@@ -273,6 +280,7 @@ export default defineComponent({
{
emit('navigate', id);
@@ -284,19 +292,19 @@ export default defineComponent({
);
}
const isPrimary = effectiveActiveId.value === action.id || action.fixed;
- const isPersonalCenter = action.id === 'personal-center';
- if (isPersonalCenter) {
+ if (action.id === 'syber-team') {
return (
- {
- emit("closePersonalCenter");
- }}
- />
+ class={[
+ "f-chat-nav-action-item",
+ {active: effectiveActiveId.value === action.id, primary: isPrimary},
+ ]}
+ onClick={() => handleActionClick(action)}
+ >
+ 
+ {action.label}
+
);
}
return (
@@ -329,6 +337,7 @@ export default defineComponent({
{renderSearchBox()}
{renderNavActions()}
{renderNavHistory()}
+ {renderPersonalCenter()}
);
},
diff --git a/packages/x-workbench/src/components/nav-panel/nav-panel.props.ts b/packages/x-workbench/src/components/nav-panel/nav-panel.props.ts
index 34c18a2a9058fa0f6aa6b2076b16558d2e8d03ef..eb45bb1fc454a1e397e07b5a3080ffd6465b8311 100644
--- a/packages/x-workbench/src/components/nav-panel/nav-panel.props.ts
+++ b/packages/x-workbench/src/components/nav-panel/nav-panel.props.ts
@@ -56,6 +56,10 @@ export const navPanelProps = {
type: Boolean,
default: false,
},
+ navWidth: {
+ type: Number,
+ default: 260,
+ },
onNavigate: {
type: Function as PropType<(id: string) => void>,
default: null,
diff --git a/packages/x-workbench/src/components/notification-center/notification-center-nav.tsx b/packages/x-workbench/src/components/notification-center/notification-center-nav.tsx
index 3a6aeef142bf62fbb4466447b4527a095db14825..aad0fd13e453ac2f2744bbb09f89a0a04a398b7f 100644
--- a/packages/x-workbench/src/components/notification-center/notification-center-nav.tsx
+++ b/packages/x-workbench/src/components/notification-center/notification-center-nav.tsx
@@ -1,12 +1,13 @@
import { defineComponent, ref, PropType } from 'vue';
import { FPopover } from '../../../../../../farris-vue/packages/ui-vue';
import noticeIconUrl from '@/assets/icon/notice.svg?url';
-
+import arrowIconUrl from '@/assets/icon/arrow.svg?url';
export default defineComponent({
name: 'NotificationCenterNav',
props: {
active: { type: Boolean, default: false },
label: { type: String, default: '通知中心' },
+ collapsed: { type: Boolean, default: false }, // 新增
onNavigate: { type: Function as PropType<(id: string) => void>, required: true },
},
emits: ['navigate'],
@@ -52,20 +53,21 @@ export default defineComponent({
return () => (
- 
+
{props.label}
-
+ 
void>,
default: null,
@@ -33,14 +42,10 @@ export default defineComponent({
emits: ['closePersonalCenter', 'resetPersonalCenter', 'restorePrevious'],
setup(props, { emit }) {
const CARD_HEIGHT = 420;
- const isPersonalCenterHovered = ref(false);
const isPersonalCenterActive = ref(false);
- const isPersonalCenterClicked = ref(false);
- const previousActiveId = ref(null);
const personalCenterPopoverRef = ref(null);
const personalCenterPopoverTop = ref(undefined);
const personalCenterPopoverLeft = ref(undefined);
- const personalCenterCloseTimer = ref(null);
const isDarkTheme = ref(false);
const currentLanguage = ref('中文');
const isLanguageHovered = ref(false);
@@ -60,65 +65,29 @@ export default defineComponent({
{ id: 'contact', icon: contactIconUrl, label: '联系我们' },
];
- function clearPersonalCenterCloseTimer() {
- if (personalCenterCloseTimer.value !== null) {
- window.clearTimeout(personalCenterCloseTimer.value);
- personalCenterCloseTimer.value = null;
- }
- }
-
- function handlePersonalCenterMouseEnter(event: MouseEvent) {
- clearPersonalCenterCloseTimer();
- personalCenterPopoverTop.value = undefined;
- personalCenterPopoverLeft.value = undefined;
- isPersonalCenterHovered.value = true;
- const targetEl = event.currentTarget as HTMLElement;
- const targetRect = targetEl.getBoundingClientRect();
- const viewportHeight = window.innerHeight;
- const spaceBelow = viewportHeight - targetRect.top;
- if (spaceBelow < CARD_HEIGHT) {
- const newTop = viewportHeight - CARD_HEIGHT - 16;
- personalCenterPopoverTop.value = newTop;
- personalCenterPopoverLeft.value = targetRect.right + 8;
- }
- }
-
- function handlePersonalCenterMouseLeave() {
- clearPersonalCenterCloseTimer();
- personalCenterCloseTimer.value = window.setTimeout(() => {
- isPersonalCenterHovered.value = false;
- // active 状态下不重置位置，保持卡片位置不变
- if (!isPersonalCenterActive.value) {
- personalCenterPopoverTop.value = undefined;
- personalCenterPopoverLeft.value = undefined;
- }
- }, 150);
- }
-
- function handlePersonalCenterPopoverMouseEnter() {
- clearPersonalCenterCloseTimer();
- isPersonalCenterHovered.value = true;
- }
-
- function handlePersonalCenterPopoverMouseLeave() {
- clearPersonalCenterCloseTimer();
- personalCenterCloseTimer.value = window.setTimeout(() => {
- isPersonalCenterHovered.value = false;
- // active 状态下不重置位置，保持卡片位置不变
- if (!isPersonalCenterActive.value) {
- personalCenterPopoverTop.value = undefined;
- personalCenterPopoverLeft.value = undefined;
- }
- }, 150);
- }
-
function handlePersonalCenterClick() {
- // 打开个人中心浮层，不影响主导航状态
- isPersonalCenterActive.value = true;
- isPersonalCenterHovered.value = false;
- isPersonalCenterClicked.value = true;
- emit('closePersonalCenter');
- props.onActivate?.();
+ if (isPersonalCenterActive.value) {
+ // 已打开，点击则关闭
+ isPersonalCenterActive.value = false;
+ personalCenterPopoverTop.value = undefined;
+ personalCenterPopoverLeft.value = undefined;
+ } else {
+ // 打开个人中心浮层，不影响主导航状态
+ isPersonalCenterActive.value = true;
+ // 计算浮层位置：紧贴导航区域右侧
+ const viewportHeight = window.innerHeight;
+ const wrapperEl = document.querySelector('.f-chat-nav-personal-center-btn');
+ if (wrapperEl) {
+ const wrapperRect = wrapperEl.getBoundingClientRect();
+ const spaceBelow = viewportHeight - wrapperRect.top;
+ if (spaceBelow < CARD_HEIGHT) {
+ personalCenterPopoverTop.value = viewportHeight - CARD_HEIGHT - 16;
+ }
+ personalCenterPopoverLeft.value = props.navWidth + 8;
+ }
+ emit('closePersonalCenter');
+ props.onActivate?.();
+ }
}
function handleLanguageMouseEnter(event: MouseEvent) {
@@ -146,11 +115,28 @@ export default defineComponent({
const reset = () => {
isPersonalCenterActive.value = false;
- isPersonalCenterClicked.value = false;
- isPersonalCenterHovered.value = false;
emit('resetPersonalCenter');
};
+ // 点击外部关闭浮层
+ function handleDocumentClick(e: MouseEvent) {
+ const wrapper = document.querySelector('.f-chat-nav-personal-center-wrapper');
+ const popover = document.querySelector('.f-chat-nav-personal-center-popover');
+ if (isPersonalCenterActive.value && wrapper && popover) {
+ if (!wrapper.contains(e.target as Node) && !popover.contains(e.target as Node)) {
+ reset();
+ }
+ }
+ }
+
+ onMounted(() => {
+ document.addEventListener('click', handleDocumentClick);
+ });
+
+ onUnmounted(() => {
+ document.removeEventListener('click', handleDocumentClick);
+ });
+
// 监听 closeTrigger 变化，点击其他按钮时自动关闭
watch(() => props.closeTrigger, () => {
reset();
@@ -158,31 +144,19 @@ export default defineComponent({
return () => (
<>
- {isPersonalCenterActive.value && (
-
{ reset(); props.onRestorePrevious?.(); }}
- />
- )}
{ e.stopPropagation(); handlePersonalCenterClick(); }}
>
- 个人中心
- {props.userInfo?.avatar ? (
+ {!props.collapsed && 个人中心}
+ {!props.collapsed && (props.userInfo?.avatar ? (
@@ -190,20 +164,18 @@ export default defineComponent({
- )}
- >
+ ))}
+ {!props.collapsed && }
{ e.stopPropagation(); }}
- onMouseenter={handlePersonalCenterPopoverMouseEnter}
- onMouseleave={handlePersonalCenterPopoverMouseLeave}
>
@@ -230,7 +202,7 @@ export default defineComponent({
{item.id === 'language' && (
{currentLanguage.value}
- >
+
)}
{item.id === 'theme' && (
diff --git a/packages/x-workbench/src/components/personal-center/personal-center.scss b/packages/x-workbench/src/components/personal-center/personal-center.scss
index 895a529e252ad32e4b4fca95d103ded4cb7cb358..15cc8d9d625ad0db5f170087ac4a0ded6990ee50 100644
--- a/packages/x-workbench/src/components/personal-center/personal-center.scss
+++ b/packages/x-workbench/src/components/personal-center/personal-center.scss
@@ -18,16 +18,6 @@
cursor: pointer;
transition: background-color 0.2s ease;
- &:hover,
- &.active {
- background-color: rgba(0, 0, 0, 0.06);
- }
-
- // 点击激活状态：更深的底色，与 hover 区分
- &.is-clicked {
- background-color: rgba(0, 0, 0, 0.12);
- }
-
> .f-chat-nav-action-icon-img {
width: 18px;
height: 18px;
@@ -76,10 +66,11 @@
// 个人中心按钮 chevron
.f-chat-nav-personal-center-btn-chevron {
- font-size: 12px;
- color: rgba(0, 0, 0, 0.35);
+ width: 16px;
+ height: 16px;
margin-left: 4px;
flex-shrink: 0;
+ opacity: 0.5;
}
// 个人中心卡片 Popover
@@ -304,9 +295,10 @@
}
.f-chat-nav-language-arrow {
- font-size: 12px;
- color: rgba(0, 0, 0, 0.45);
+ width: 16px;
+ height: 16px;
line-height: 1;
+ opacity: 0.5;
}
}
@@ -360,14 +352,11 @@
}
.f-chat-nav-action-icon-img {
- display: none;
+ display: block;
}
.f-chat-nav-personal-center-btn-avatar {
- display: flex;
- width: 28px;
- height: 28px;
- margin-left: 0;
+ display: none;
}
.f-chat-nav-personal-center-btn-chevron {
diff --git a/packages/x-workbench/src/components/workbench-content/workbench-content.component.tsx b/packages/x-workbench/src/components/workbench-content/workbench-content.component.tsx
index 3a369ed0ba73490c5bd119f610fe6a46c3c833f9..ef30a3fad518d757ef6795a26f91d65fe0bc454e 100644
--- a/packages/x-workbench/src/components/workbench-content/workbench-content.component.tsx
+++ b/packages/x-workbench/src/components/workbench-content/workbench-content.component.tsx
@@ -117,12 +117,16 @@ export default defineComponent({
return (
- {functionInstances.value.map((tabItem: FunctionInstance) => {
+ {functionInstances.value.map((tabItem: FunctionInstance, index: number) => {
const isActive = tabItem.instanceId === activeInstanceId.value;
+ const tabClasses = {
+ ...getFunctionTabClass(tabItem),
+ 'wb-content-tab--first': index === 0,
+ };
return (
onClickFunctionTabItem(tabItem)}
>
{tabItem.name || '未命名'}
@@ -142,6 +146,7 @@ export default defineComponent({
)}
{isActive && (
<>
+ {/* 右侧圆角遮罩 */}
+ {/* 非第一个 tab 左侧圆角遮罩 */}
+ {index !== 0 && (
+
+ )}
)}
diff --git a/packages/x-workbench/src/components/workbench.component.tsx b/packages/x-workbench/src/components/workbench.component.tsx
index cd2968ed5e7dc7e6a56b1d26d78c262aa269598d..0c3cc60ec4619f89165c2fbf6d3cda5e186283e3 100644
--- a/packages/x-workbench/src/components/workbench.component.tsx
+++ b/packages/x-workbench/src/components/workbench.component.tsx
@@ -48,8 +48,6 @@ const NAV_ACTIONS: NavActionItem[] = [
// { id: 'automation', icon: 'f-icon f-icon-forecast-of-completion', label: '自动化' },
{ id: 'syber-team', icon: 'f-icon f-icon-team', label: '赛博协同'},
{ id: 'notification-center', icon: 'f-icon f-icon-message', label: '通知中心'},
- { id: 'personal-center', icon: 'f-icon f-icon-user', label: '个人中心' },
- { id: 'car-report', icon: 'f-icon f-icon-survey', label: '经营分析报告' },
];
const WORKBENCH_NAV_MENU: MenuGroup[] = [
@@ -209,6 +207,7 @@ export default defineComponent({
primaryActionId="new-task"
activeNavId={activeNavId.value}
collapsed={chatNavPaneCollapsed.value}
+ navWidth={chatNavPaneCollapsed.value ? 64 : 260}
onOpenAgentHub={() => {
activeNavId.value = 'assistant';
agentHubRef.value?.openFromNav();
diff --git a/packages/x-workbench/src/style.scss b/packages/x-workbench/src/style.scss
index 6e20633073a154bddfd0625a7bdcf191dbd564ea..5ef6befa9630211a19046d64749d26946d579e7d 100644
--- a/packages/x-workbench/src/style.scss
+++ b/packages/x-workbench/src/style.scss
@@ -1985,6 +1985,14 @@ $wb-tabs-bar-bg-hover: rgba(229, 242, 255, 0.5);
display: block;
pointer-events: none;
}
+
+ .wb-content-tab__corner--bl {
+ position: absolute;
+ left: -10px;
+ bottom: 0;
+ display: block;
+ pointer-events: none;
+ }
}
&.wb-content-tab--fix .wb-content-tab__title {