feat: support Mobile (#50)

dreamhunter2333 · Mar 2, 2024 · efa6a52 · efa6a52
1 parent f71d70f
commit efa6a52
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@vueuse/core": "^10.1.2",
     "markdown-it": "^13.0.1",
     "naive-ui": "^2.34.3",
+    "vooks": "^0.2.12",
     "vue": "^3.2.47",
     "vue-router": "^4.2.1"
   },

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -3,8 +3,10 @@ import { NGrid, NGi, NSpace, NAlert, NButton, NMessageProvider } from 'naive-ui'
 import { onMounted, ref, computed } from "vue";
 import { useRouter } from 'vue-router'
 import { useStorage } from '@vueuse/core'
+import { useIsMobile } from './utils/composables'
 
 const state_jwt = useStorage('jwt')
+const isMobile = useIsMobile()
 
 const router = useRouter()
 const settings = ref({});
@@ -38,8 +40,8 @@ onMounted(async () => {
 
 <template>
   <n-message-provider>
-    <n-grid x-gap="12" :cols="6">
-      <n-gi>
+    <n-grid x-gap="12" :cols="isMobile ? 4 : 6">
+      <n-gi v-if="!isMobile">
         <div class="side">
           <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
             :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>
@@ -69,7 +71,7 @@ onMounted(async () => {
           </n-space>
         </div>
       </n-gi>
-      <n-gi>
+      <n-gi v-if="!isMobile">
         <div class="side">
           <ins class="adsbygoogle" style="display:block" :data-ad-client="settings.ad_client"
             :data-ad-slot="settings.ad_slot" data-ad-format="auto" data-full-width-responsive="true"></ins>

diff --git a/frontend/src/utils/composables.js b/frontend/src/utils/composables.js
@@ -0,0 +1,8 @@
+import { useBreakpoint, useMemo } from 'vooks'
+
+export function useIsMobile() {
+    const breakpointRef = useBreakpoint()
+    return useMemo(() => {
+        return breakpointRef.value === 'xs'
+    })
+}
diff --git a/frontend/src/views/Index.vue b/frontend/src/views/Index.vue
@@ -4,8 +4,10 @@ import { watch, ref } from "vue";
 import MarkdownIt from 'markdown-it';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 import { useStorage } from '@vueuse/core';
+import { useIsMobile } from '../utils/composables'
 
 import { MENU_OPTIONS, DIVINATION_OPTIONS, ABOUT } from "../config/constants";
+const isMobile = useIsMobile()
 
 const state_jwt = useStorage('jwt')
 const prompt = ref("");
@@ -103,7 +105,8 @@ watch(birthday, async (newBirthday, oldBirthday) => {
 <template>
   <div>
     <n-spin size="large" description="正在占卜..." :show="loading">
-      <n-menu v-model:value="prompt_type" mode="horizontal" :options="MENU_OPTIONS" />
+      <n-menu accordion v-model:value="prompt_type" :mode="isMobile ? 'vertical' : 'horizontal'"
+        :options="MENU_OPTIONS" />
       <n-card v-if="prompt_type != 'about'">
         <div style="display: inline-block;">
           <n-form-item label="当前占卜" label-placement="left">