✨ feat: 优化移动端和网页端效果和体验

feat: #82

src/renderer/utils/index.ts

@@ -1,3 +1,4 @@
+import { useWindowSize } from '@vueuse/core';
 import { computed } from 'vue';
 
 import { useSettingsStore } from '@/store/modules/settings';
@@ -73,16 +74,26 @@ export const getImgUrl = (url: string | undefined, size: string = '') => {
 };
 
 export const isMobile = computed(() => {
-  const flag = navigator.userAgent.match(
+  const { width } = useWindowSize();
+  const userAgentFlag = navigator.userAgent.match(
     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
   );
 
-  const settingsStore = useSettingsStore();
-  settingsStore.isMobile = !!flag;
+  const isMobileWidth = width.value < 500;
+  const isMobileDevice = !!userAgentFlag || isMobileWidth;
 
-  // 给html标签 添加mobile
-  if (flag) document.documentElement.classList.add('mobile');
-  return !!flag;
+  const settingsStore = useSettingsStore();
+  settingsStore.isMobile = isMobileDevice;
+
+  // 给html标签 添加或移除mobile类
+  if (isMobileDevice) {
+    document.documentElement.classList.add('mobile');
+  } else {
+    document.documentElement.classList.add('pc');
+    document.documentElement.classList.remove('mobile');
+  }
+
+  return isMobileDevice;
 });
 
 export const isElectron = (window as any).electron !== undefined;