renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 走查问题调整，修改sidebar结构

Browse Source
This commit is contained in:
rd
2025-08-29 16:44:27 +08:00
parent a9e49faf66
commit 7f493b8014
11 changed files with 109 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/layouts/components/siderBar/index.vue
View File

@ -1,5 +1,5 @@
<script lang="tsx">
import { Dropdown, Menu } from 'ant-design-vue';
import { Dropdown, Menu, Layout } from 'ant-design-vue';
import type { RouteMeta, RouteRecordRaw } from 'vue-router';
import { useRoute } from 'vue-router';
import SvgIcon from '@/components/svg-icon/index.vue';
@ -20,6 +20,7 @@ export default defineComponent({
const route = useRoute();
const sidebarStore = useSidebarStore();
const appStore = useAppStore();
const currentMenuList = ref<typeMenuItem[]>([]);
const currentMenuModInfo = ref<typeMenuItem>({});
@ -29,6 +30,13 @@ export default defineComponent({
const isHomeRoute = computed(() => currentRouteName.value === 'Home');
const showAiSearch = computed(() => !route.meta?.hideAiSearch);
const collapsed = computed(() => {
return sidebarStore.menuCollapse;
});
const setCollapsed = (val) => {
appStore.updateSettings({ menuCollapse: val });
};
const getCollapseMenuKey = (routeName: string): string => {
let _key: string;
for (let i = 0; i < currentMenuList.value.length; i++) {
@ -113,8 +121,9 @@ export default defineComponent({
};
const initMenuList = () => {
const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string];
const groupMenuList = MENU_LIST?.[currentRouteGroup.value as string] ?? [];
currentMenuList.value = cloneDeep(groupMenuList);
sidebarStore.setCurrentMenuList(groupMenuList);
};
const initCollapse = () => {
getCollapseMenuKey(currentRouteName.value);
@ -144,37 +153,47 @@ export default defineComponent({
});
return () => (
<Menu class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}>
{showAiSearch.value && (
<>
<Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
<img src={icon1} width={18} height={18} />
{!sidebarStore.menuCollapse && (
<span class="cts label">{isHomeRoute.value ? '开始工作' : '智能搜索'}</span>
)}
</Menu.Item>
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
</>
)}
<div class="flex flex-col flex-1">
<div class="menu-list flex-1">{renderMenuList()}</div>
<div class="flex justify-end items-center">
<div
class="flex fold-btn items-center cursor-pointer"
onClick={() => {
sidebarStore.setMenuCollapse();
}}
>
{sidebarStore.menuCollapse ? (
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
) : (
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
)}
{!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
<Layout.Sider
v-model={collapsed.value}
width={sidebarStore.sidebarWidth}
collapsible
trigger
onCollapse={setCollapsed}
>
<Menu
class={`siderBar-wrap p-16px w-full h-full flex flex-col ${sidebarStore.menuCollapse ? 'menu-fold' : ''}`}
>
{showAiSearch.value && (
<>
<Menu.Item class={`menu-item !mb-0 ${isHomeRoute.value ? 'active' : ''}`} onClick={handleUserHome}>
<img src={icon1} width={18} height={18} />
{!sidebarStore.menuCollapse && (
<span class="cts label">{isHomeRoute.value ? '开始工作' : '智能搜索'}</span>
)}
</Menu.Item>
<div class="line w-full h-1px bg-#211F24 my-12px"></div>
</>
)}
<div class="flex flex-col flex-1">
<div class="menu-list flex-1">{renderMenuList()}</div>
<div class="flex justify-end items-center">
<div
class="flex fold-btn items-center cursor-pointer"
onClick={() => {
sidebarStore.setMenuCollapse();
}}
>
{sidebarStore.menuCollapse ? (
<icon-menu-unfold size={16} class="color-#55585F icon mr-4px" />
) : (
<icon-menu-fold size={16} class="color-#55585F icon mr-4px" />
)}
{!sidebarStore.menuCollapse && <span class="cts !color-#55585F flex-shrink-0">收起</span>}
</div>
</div>
</div>
</div>
</Menu>
</Menu>
</Layout.Sider>
);
},
});