From 97e2ffddf4ac047133dc016a91ac07556e562d29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=87=95=E5=8D=9A=E6=96=87?= <349952469@qq.com>
Date: Thu, 18 Aug 2022 10:02:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=85=A8=E5=B1=80=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E8=8F=9C=E5=8D=95=E5=8F=8A=E6=B6=88=E6=81=AF=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5=E9=80=82=E9=85=8D=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GlobalHeader/components/SystemMessage.vue | 11 ++++++++--
 .../GlobalSearch/components/SearchModal.vue   | 21 ++++++++++++-------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/layouts/common/GlobalHeader/components/SystemMessage.vue b/src/layouts/common/GlobalHeader/components/SystemMessage.vue
index c4f42aa1..ef639ee6 100644
--- 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
index ea5a9850..2b06b111 100644
--- 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();