GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
燕博文 2022-08-18 10:02:15 +08:00
parent 907cf44cc1
commit 97e2ffddf4
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/layouts/common/GlobalHeader/components/SystemMessage.vue
View File

@ -11,10 +11,15 @@
/> />
</hover-container> </hover-container>
</template> </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"> <n-tab-pane v-for="(item, index) in tabData" :key="item.key" :name="index">
<template #tab> <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> <span class="mr-5px">{{ item.name }}</span>
<n-badge <n-badge
v-bind="item.badgeProps" v-bind="item.badgeProps"
@ -45,12 +50,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useThemeStore } from '@/store'; import { useThemeStore } from '@/store';
import { useBasicLayout } from '@/composables';
import { useBoolean } from '@/hooks'; import { useBoolean } from '@/hooks';
import MessageList from './MessageList.vue'; import MessageList from './MessageList.vue';
defineOptions({ name: 'SystemMessage' }); defineOptions({ name: 'SystemMessage' });
const theme = useThemeStore(); const theme = useThemeStore();
const { isMobile } = useBasicLayout();
const { bool: loading, setBool: setLoading } = useBoolean(); const { bool: loading, setBool: setLoading } = useBoolean();
const currentTab = ref(0); const currentTab = ref(0);

21
src/layouts/common/GlobalSearch/components/SearchModal.vue
View File

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