diff --git a/frontend/src/components/MainLayout/AppHeader.css b/frontend/src/components/MainLayout/AppHeader.css
index 6429ab2..2ce81ca 100644
--- a/frontend/src/components/MainLayout/AppHeader.css
+++ b/frontend/src/components/MainLayout/AppHeader.css
@@ -8,6 +8,7 @@
height: 64px;
border-bottom: 1px solid var(--border-color);
color: var(--text-color);
+ overflow: visible;
}
/* 左侧区域 */
@@ -55,6 +56,50 @@
gap: 16px;
}
+.workspace-header-brand {
+ position: relative;
+ height: 64px;
+ min-width: 360px;
+ padding-left: 70px;
+ padding-right: 36px;
+ display: inline-flex;
+ align-items: center;
+ gap: 14px;
+}
+
+.workspace-header-brand::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ width: 1px;
+ height: 64px;
+ background: var(--border-color);
+}
+
+.workspace-header-brand::before {
+ left: 0;
+}
+
+.workspace-brand-icon {
+ font-size: 22px;
+ color: #6b7280;
+}
+
+.workspace-brand-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #4b5563;
+ white-space: nowrap;
+}
+
+body.dark .workspace-brand-title {
+ color: var(--text-color);
+}
+
+body.dark .workspace-brand-icon {
+ color: var(--text-color-secondary);
+}
+
/* Icon Buttons */
.header-icon-btn {
display: flex;
@@ -151,4 +196,4 @@ body.dark .notification-item.unread:hover {
padding: 8px;
border-top: 1px solid var(--border-color);
text-align: center;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/MainLayout/AppHeader.jsx b/frontend/src/components/MainLayout/AppHeader.jsx
index 09f6f4b..814c68c 100644
--- a/frontend/src/components/MainLayout/AppHeader.jsx
+++ b/frontend/src/components/MainLayout/AppHeader.jsx
@@ -10,7 +10,7 @@ import {
NotificationOutlined,
MoonOutlined,
SunOutlined,
- GlobalOutlined
+ AppstoreOutlined
} from '@ant-design/icons'
import useUserStore from '@/stores/userStore'
import useNotificationStore from '@/stores/notificationStore'
@@ -151,7 +151,12 @@ function AppHeader({ collapsed, onToggle, showLogo = true }) {
)}
- {!showLogo &&
diff --git a/frontend/src/components/MainLayout/MainLayout.css b/frontend/src/components/MainLayout/MainLayout.css
index e71ef55..45ea1a7 100644
--- a/frontend/src/components/MainLayout/MainLayout.css
+++ b/frontend/src/components/MainLayout/MainLayout.css
@@ -24,4 +24,4 @@
.content-wrapper {
padding: 0;
min-height: 100%;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ModernSidebar/ModernSidebar.css b/frontend/src/components/ModernSidebar/ModernSidebar.css
index 43e8d18..9b16b0d 100644
--- a/frontend/src/components/ModernSidebar/ModernSidebar.css
+++ b/frontend/src/components/ModernSidebar/ModernSidebar.css
@@ -30,39 +30,31 @@
white-space: nowrap;
}
-/* Collapse Trigger */
-.collapse-trigger {
+.sidebar-collapse-trigger {
position: absolute;
- right: -14px;
- top: 28px;
- width: 28px;
- height: 28px;
- background: var(--bg-color);
+ right: -13px;
+ top: 32px;
+ z-index: 20;
+ width: 26px;
+ height: 26px;
border: 1px solid var(--border-color);
- border-radius: 50%;
- display: flex;
+ border-radius: 999px;
+ background: var(--header-bg);
+ color: #8a94a6;
+ display: inline-flex;
align-items: center;
justify-content: center;
+ box-shadow: 0 2px 8px rgba(0, 21, 41, 0.08);
cursor: pointer;
- z-index: 10;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
- color: var(--text-color-secondary);
- font-size: 12px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- opacity: 0;
+ transform: translateY(-50%);
+ transition: all 0.2s;
+ font-size: 10px;
}
-.modern-sidebar:hover .collapse-trigger,
-.collapse-trigger:focus {
- opacity: 1;
-}
-
-.collapse-trigger:hover {
- color: #fff;
- background: #1677ff;
- border-color: #1677ff;
- box-shadow: 0 4px 12px rgba(22, 119, 255, 0.35);
- transform: scale(1.1);
+.sidebar-collapse-trigger:hover {
+ color: #1677ff;
+ border-color: rgba(22, 119, 255, 0.28);
+ background: var(--header-bg);
}
/* Menu Area */
@@ -228,4 +220,4 @@
.logout-btn:hover {
background-color: var(--border-color);
color: #ef4444; /* Red for logout */
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/ModernSidebar/ModernSidebar.jsx b/frontend/src/components/ModernSidebar/ModernSidebar.jsx
index d4ce841..8f0a9a1 100644
--- a/frontend/src/components/ModernSidebar/ModernSidebar.jsx
+++ b/frontend/src/components/ModernSidebar/ModernSidebar.jsx
@@ -1,12 +1,10 @@
-import React, { useState } from 'react';
-import { Layout, Avatar, Tooltip, Button } from 'antd';
+import React from 'react';
+import { Layout, Avatar, Tooltip } from 'antd';
import {
- MenuUnfoldOutlined,
- MenuFoldOutlined,
LogoutOutlined,
QuestionCircleOutlined,
RightOutlined,
- LeftOutlined
+ LeftOutlined,
} from '@ant-design/icons';
import './ModernSidebar.css';
@@ -81,13 +79,14 @@ const ModernSidebar = ({
{logo}
- {/* 折叠按钮 - 悬浮在边缘 */}
-
onCollapse && onCollapse(!collapsed)}
+ aria-label={collapsed ? '展开侧边栏' : '收起侧边栏'}
>
{collapsed ? : }
-
+
{/* 菜单列表区域 */}