feat(projects): 全局搜索菜单及消息通知适配移动端

soybeanjs · Aug 18, 2022 · 97e2ffd · 97e2ffd
1 parent 907cf44
commit 97e2ffd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/src/layouts/common/GlobalHeader/components/SystemMessage.vue b/src/layouts/common/GlobalHeader/components/SystemMessage.vue
@@ -11,10 +11,15 @@
         />
       </hover-container>
     </template>
-    <n-tabs v-model:value="currentTab" class="w-360px" type="line" justify-content="space-evenly">
+    <n-tabs
+      v-model:value="currentTab"
+      :class="[isMobile ? 'w-276px' : 'w-360px']"
+      type="line"
+      justify-content="space-evenly"
+    >
       <n-tab-pane v-for="(item, index) in tabData" :key="item.key" :name="index">
         <template #tab>
-          <div class="flex-x-center items-center w-120px">
+          <div class="flex-x-center items-center" :class="[isMobile ? 'w-92px' : 'w-120px']">
             <span class="mr-5px">{{ item.name }}</span>
             <n-badge
               v-bind="item.badgeProps"
@@ -45,12 +50,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { useThemeStore } from '@/store';
+import { useBasicLayout } from '@/composables';
 import { useBoolean } from '@/hooks';
 import MessageList from './MessageList.vue';
 
 defineOptions({ name: 'SystemMessage' });
 
 const theme = useThemeStore();
+const { isMobile } = useBasicLayout();
 const { bool: loading, setBool: setLoading } = useBoolean();
 
 const currentTab = ref(0);

diff --git a/src/layouts/common/GlobalSearch/components/SearchModal.vue b/src/layouts/common/GlobalSearch/components/SearchModal.vue
@@ -5,20 +5,25 @@
     :closable="false"
     preset="card"
     footer-style="padding: 0; margin: 0"
-    class="w-630px fixed left-0 right-0 top-50px"
+    class="fixed left-0 right-0"
+    :class="[isMobile ? 'wh-full top-0px rounded-0' : 'w-630px top-50px']"
     @after-leave="handleClose"
   >
-    <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
-      <template #prefix>
-        <icon-uil-search class="text-15px text-[#c2c2c2]" />
-      </template>
-    </n-input>
+    <n-input-group>
+      <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
+        <template #prefix>
+          <icon-uil-search class="text-15px text-[#c2c2c2]" />
+        </template>
+      </n-input>
+      <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>
+    </n-input-group>
+
     <div class="mt-20px">
       <n-empty v-if="resultOptions.length === 0" description="暂无搜索结果" />
       <search-result v-else v-model:value="activePath" :options="resultOptions" @enter="handleEnter" />
     </div>
     <template #footer>
-      <search-footer />
+      <search-footer v-if="!isMobile" />
     </template>
   </n-modal>
 </template>
@@ -28,6 +33,7 @@ import { computed, nextTick, ref, shallowRef, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { onKeyStroke, useDebounceFn } from '@vueuse/core';
 import { useRouteStore } from '@/store';
+import { useBasicLayout } from '@/composables';
 import SearchResult from './SearchResult.vue';
 import SearchFooter from './SearchFooter.vue';
 
@@ -46,6 +52,7 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const { isMobile } = useBasicLayout();
 const router = useRouter();
 const routeStore = useRouteStore();