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

2
src/components/xt-chat/chat-view/index.vue
View File

@ -171,7 +171,7 @@ export default {
onSubmit={handleSubmit}
onCancel={handleCancel}
/>
<p class="cts !color-#939499 text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
<p class="cts !color-#939499 !text-12px !lh-20px my-4px">内容由AI生成，仅供参考</p>
</div>
</section>

32
src/components/xt-chat/chat-view/useChatHandler.tsx
View File

@ -113,12 +113,16 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
const isShow = conversationList.value[conversationList.value.length - 1].run_id === item.run_id;
return (
<div class="flex items-center">
<Tooltip title="复制" onClick={() => onCopy(content)}>
<IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
<Tooltip title="复制" onClick={() => onCopy(content)} align={{ offset: [0, 4] }} >
<div class="action-box">
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
{isShow && (
<Tooltip title="重新生成" onClick={() => handleRemoteRefresh(item)}>
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
<Tooltip title="重新生成" onClick={() => handleRemoteRefresh(item)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
</div>
</Tooltip>
)}
</div>
@ -353,17 +357,23 @@ export default function useChatHandler(options: UseChatHandlerOptions): UseChatH
<div class="flex items-center">
{!extra_data && (
// ? (
// <Tooltip title="下载" onClick={onDownload}>
// <IconDownload size={16} class="color-#737478 cursor-pointer mr-12px" />
// </Tooltip>
// <Tooltip title="下载" onClick={onDownload} align={{ offset: [0, 4] }}>
// <div class="action-box">
// <IconDownload size={16} class="color-#737478 mr-12px" />
// </div>
// </Tooltip>
// ) :
<Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)}>
<IconCopy size={16} class="color-#737478 cursor-pointer mr-12px" />
<Tooltip title="复制" onClick={() => onCopy(_targetTask.content.output)} align={{ offset: [0, 4] }}>
<div class="action-box">
<IconCopy size={16} class="color-#737478" />
</div>
</Tooltip>
)}
{isShow && (
<Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)}>
<IconRefresh size={16} class="color-#737478 cursor-pointer" />
<Tooltip title="重新生成" onClick={() => onRefresh(teamRunTaskId)} align={{ offset: [0, 4] }}>
<div class="action-box ml-12px">
<IconRefresh size={16} class="color-#737478 " />
</div>
</Tooltip>
)}
</div>

11
src/components/xt-chat/xt-bubble/style.scss
View File

@ -127,6 +127,17 @@
}
}
}
.action-box {
cursor: pointer;
padding: 2px;
border-radius: 2px;
transition: all 0.2s;
line-height: normal;
&:hover {
background-color: #f2f3f5;
}
}
}
.xt-bubble-header {

27
src/layouts/Basic.vue
View File

@ -23,9 +23,6 @@ const route = useRoute();
useResponsive(true);
const showSider = computed(() => {
return !route.meta?.hideSidebar;
});
const isHomeRoute = computed(() => {
return route.name === 'Home';
});
@ -43,20 +40,10 @@ const layoutPageClass = computed(() => {
return result;
});
const siderWidth = computed(() => {
return showSider.value ? sidebarStore.sidebarWidth : 0;
});
const collapsed = computed(() => {
return sidebarStore.menuCollapse;
});
onMounted(() => {
checkHasInviteCode();
});
const setCollapsed = (val) => {
appStore.updateSettings({ menuCollapse: val });
};
const checkHasInviteCode = () => {
const inviteCode = getQueryParam('invite_code');
@ -74,21 +61,11 @@ const checkHasInviteCode = () => {
<Navbar />
</Layout.Header>
<Layout class="flex layout-content-wrap">
<Layout.Sider
v-if="showSider"
v-model="collapsed"
:width="siderWidth"
collapsible
trigger
@collapse="setCollapsed"
class="layout-sider"
>
<SiderBar />
</Layout.Sider>
<SiderBar />
<Layout
class="layout-content"
:style="{
paddingLeft: `${siderWidth}px`,
paddingLeft: `${sidebarStore.sidebarWidth}px`,
}"
>
<Layout.Content :class="layoutPageClass" class="!min-h-initial">

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>
);
},
});

11
src/router/routes/modules/agent.ts
View File

@ -15,6 +15,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
requireLogin: true,
roles: ['*'],
id: MENU_GROUP_IDS.AGENT,
group: 'agent'
},
children: [
{
@ -26,7 +27,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
requiresAuth: false,
requireLogin: true,
hideFooter: true,
isAgentRoute: true
isAgentRoute: true,
group: 'agent',
hideAiSearch: true,
},
},
{
@ -41,6 +44,8 @@ const COMPONENTS: AppRouteRecordRaw[] = [
id: MENU_GROUP_IDS.AGENT,
isAgentRoute: true,
hideInMenu: true,
group: 'agent',
hideAiSearch: true,
},
},
@ -55,7 +60,9 @@ const COMPONENTS: AppRouteRecordRaw[] = [
hideFooter: true,
id: MENU_GROUP_IDS.AGENT,
isAgentRoute: true,
hideInMenu: true,
hideInMenu: true,
group: 'agent',
hideAiSearch: true,
},
},
],

16
src/stores/modules/side-bar/index.ts
View File

@ -2,6 +2,7 @@
* @Author: RenXiaoDong
* @Date: 2025-06-23 22:13:30
*/
// import { useRoute } from 'vue-router';
import { defineStore } from 'pinia';
import router from '@/router';
import type { RouteLocationNormalized } from 'vue-router';
@ -11,7 +12,7 @@ import { getTaskUnread, patchTaskRead } from '@/api/all/common';
interface sidebarState {
activeMenuKey: string | number | null;
// menuList: any[];
currentMenuList: any[];
unreadInfo: number[];
menuCollapse: boolean;
}
@ -21,12 +22,17 @@ let unreadInfoTimer: number | null = null;
export const useSidebarStore = defineStore('sidebar', {
state: (): sidebarState => ({
activeMenuKey: null, // 激活的菜单id
// menuList: [], // 菜单信息
currentMenuList: [], // 菜单信息
unreadInfo: [], // 未读消息
menuCollapse: false, // 菜单是否折叠
}),
getters: {
showSider(): boolean {
const route = router.currentRoute.value;
return !route.meta?.hideSidebar && this.currentMenuList.length > 0;
},
sidebarWidth(): number {
if (!this.showSider) return 0;
return this.menuCollapse ? 74 : 138;
},
},
@ -43,9 +49,9 @@ export const useSidebarStore = defineStore('sidebar', {
clearMenuCollapse() {
this.menuCollapse = false;
},
// clearUserNavbarMenuList() {
// this.menuList = [];
// },
setCurrentMenuList(val: any[]) {
this.currentMenuList = val;
},
// navbar菜单列表由企业对应权限决定
// getUserNavbarMenuList() {
// const enterpriseStore = useEnterpriseStore();

1
src/utils/user.ts
View File

@ -60,7 +60,6 @@ export function handleUserLogout() {
userStore.clearUserInfo(); // 清除用户信息
userStore.clearToken(); // 清除token
enterpriseStore.clearUserEnterpriseInfo(); // 清除企业信息
// sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
// userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
sidebarStore.clearActiveMenuKey(); // 清除active菜单id

2
src/views/agent/chat/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="px-4px h-full flex flex-col overflow-y-auto">
<div class="pl-16px h-full flex flex-col overflow-y-auto">
<div class="back-wap cursor-pointer mb-17px mt--3px !w-fit" @click="goChatIndex">
<icon-left size="16" class="color-#737478 mr-4px" />
<span class="cs">返回空间</span>

4
src/views/agent/index/index.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="agent-wrap relative h-full">
<div class="agent-wrap relative h-full pl-16px">
<a-input
v-model="query.name"
@press-enter="getData()"
placeholder="搜索智能体"
size="large"
allow-clear
class="absolute right-0 top--10px !w-400px"
class="absolute right-0 top-4px !w-400px"
>
<template #prefix>
<icon-search @click="getData()" />

2
src/views/home/components/history-conversation-drawer/index.vue
View File

@ -90,7 +90,7 @@ export default {
return () => (
<Drawer width={240} rootClassName="ct-history-conversation-drawer" v-model:open={open.value} onClose={onClose}>
<header class="header h-40px px-12px flex justify-between items-center">
<span class="text-16px font-400 color-#211F24 font-family-medium">历史对话</span>
<span class="text-12px font-400 color-#211F24 font-family-medium">历史对话</span>
<icon-close size={16} class="color-#211F24 cursor-pointer" onClick={onClose} />
</header>
{dataSource.value.length === 0 ? (