lanyuanxiaoyao/GrandClaw-prototype
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一全局 Header 结构

Browse Source 
- 新增 AppHeader 组件（Logo + 台入口 + 用户状态）
- 新增 UserDropdown 组件（用户下拉菜单）
- 新增 AppLayout 布局组件
- 移除 SidebarBrand 和 SidebarUser 组件
- 修改各台页面，移除侧边栏中的品牌区和用户区
- 修改 HomePage，移除独立 header/footer
- 修改 Layout 组件，简化为 sidebar + content
- 账户设置改为弹框形式，不中断用户操作
- 更新 README.md 布局系统说明
- 同步 delta specs 到主 specs
This commit is contained in:
兰缘小妖
2026-03-27 12:27:38 +08:00
parent ce9ebe5784
commit 7f493aa921
22 changed files with 793 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/components/_index.scss
View File

@@ -16,6 +16,7 @@
@forward 'password-input';
@forward 'search-bar';
@forward 'stat-card';
@forward 'header';
.page-back-btn {
display: inline-flex;

251
src/styles/components/header/_index.scss Normal file
View File

@@ -0,0 +1,251 @@
// AppHeader 组件样式
@use '../../tokens' as *;
// 全局布局容器
.app-layout {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--color-bg-1);
}
.app-layout__main {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
min-height: 0;
}
// 头部容器
.app-header {
height: var(--header-height);
background: var(--color-bg-1);
border-bottom: 1px solid var(--color-border-2);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
position: sticky;
top: 0;
z-index: $z-index-header;
flex-shrink: 0;
}
// 左侧品牌区
.app-header__left {
display: flex;
align-items: center;
}
.app-header__brand {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--color-text-1);
cursor: pointer;
}
.app-header__title {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
}
// 右侧功能区
.app-header__right {
display: flex;
align-items: center;
gap: 16px;
}
// 导航区
.app-header__nav {
display: flex;
align-items: center;
gap: 4px;
}
.app-header__nav-item {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
color: var(--color-text-2);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border-radius: var(--radius-md);
transition: all 0.2s;
svg {
width: 18px;
height: 18px;
}
&:hover {
color: var(--color-text-1);
background: var(--color-bg-2);
}
&.active {
color: var(--color-primary);
background: var(--color-primary-light);
}
}
// 用户状态区
.app-header__user {
position: relative;
}
.app-header__user-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
cursor: pointer;
border-radius: var(--radius-md);
transition: background 0.2s;
&:hover {
background: var(--color-bg-2);
}
}
.app-header__user-name {
font-size: 14px;
font-weight: 600;
color: var(--color-text-1);
}
.app-header__user-arrow {
width: 16px;
height: 16px;
color: var(--color-text-3);
transition: transform 0.2s;
&.open {
transform: rotate(180deg);
}
}
// 下拉菜单
.app-header__dropdown {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 160px;
background: var(--color-bg-1);
border: 1px solid var(--color-border-2);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
overflow: hidden;
z-index: $z-index-modal;
}
.app-header__dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 14px;
color: var(--color-text-2);
cursor: pointer;
transition: background 0.15s;
svg {
width: 16px;
height: 16px;
}
&:hover {
background: var(--color-bg-2);
color: var(--color-text-1);
}
}
// 移动端菜单
.app-header__mobile {
display: none;
}
.app-header__mobile-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: var(--radius-md);
svg {
width: 20px;
height: 20px;
color: var(--color-text-2);
}
&:hover {
background: var(--color-bg-2);
}
}
.app-header__mobile-menu {
position: absolute;
top: 100%;
right: 16px;
margin-top: 4px;
min-width: 160px;
background: var(--color-bg-1);
border: 1px solid var(--color-border-2);
border-radius: var(--radius-md);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
overflow: hidden;
z-index: $z-index-modal;
}
.app-header__mobile-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
font-size: 14px;
font-weight: 500;
color: var(--color-text-2);
cursor: pointer;
transition: background 0.15s;
svg {
width: 18px;
height: 18px;
}
&:hover {
background: var(--color-bg-2);
color: var(--color-text-1);
}
&.active {
color: var(--color-primary);
background: var(--color-primary-light);
}
}
// 响应式 - 移动端
@include mobile {
.app-header__nav {
display: none;
}
.app-header__mobile {
display: block;
}
.app-header__user-name {
display: none;
}
}

40
src/styles/layouts/_admin-layout.scss
View File

@@ -19,11 +19,6 @@
height: 100%;
}
.admin-sidebar-header {
padding: 16px;
border-bottom: 1px solid var(--color-border-2);
}
.admin-sidebar-nav {
flex: 1;
overflow-y: auto;
@@ -68,41 +63,6 @@
flex: 1;
}
// 管理台用户区域
.admin-sidebar-user {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-top: 1px solid var(--color-border-2);
background: var(--color-bg-2);
cursor: pointer;
transition: background 0.2s;
&:hover {
background: var(--color-bg-3);
}
}
.admin-sidebar-user-info {
flex: 1;
min-width: 0;
}
.admin-sidebar-user-name {
font-size: 14px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 2px;
@include text-truncate;
}
.admin-sidebar-user-role {
font-size: 12px;
color: var(--color-text-3);
@include text-truncate;
}
// 管理台内容区
.admin-layout__content {
flex: 1;

74
src/styles/layouts/_app-shell.scss
View File

@@ -6,7 +6,7 @@
.app-shell,
.layout {
display: flex;
height: 100vh;
height: 100%;
overflow: hidden;
}
@@ -16,7 +16,7 @@
background: var(--color-bg-1);
border-right: 1px solid var(--color-border-2);
position: fixed;
height: 100vh;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
z-index: $z-index-sidebar;
@@ -24,23 +24,6 @@
flex-direction: column;
}
// 侧边栏头部
.sidebar-header {
height: var(--header-height);
display: flex;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid var(--color-border-2);
flex-shrink: 0;
}
// 品牌区
.sidebar-brand {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-logo-icon {
width: 28px;
height: 28px;
@@ -87,20 +70,6 @@
}
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar-logo {
font-size: 18px;
font-weight: 700;
color: var(--color-text-1);
letter-spacing: -0.3px;
line-height: 1.2;
}
// 导航区
.sidebar__nav,
.sidebar-menu {
@@ -114,13 +83,6 @@
margin: 12px 0;
}
.sidebar-subtitle {
font-size: 13px;
color: var(--color-text-3);
font-weight: 600;
line-height: 1.2;
}
// 导航项 - 统一使用 .nav-item
.nav-item,
.menu-item {
@@ -178,34 +140,6 @@
overflow: hidden;
}
// 顶部栏
.app-shell__header,
.header {
height: var(--header-height);
background: var(--color-bg-1);
border-bottom: 1px solid var(--color-border-2);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
position: sticky;
top: 0;
z-index: $z-index-header;
}
.header__left,
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.header-title {
font-size: 15px;
font-weight: 600;
color: var(--color-text-1);
}
// 用户头像
.user-avatar {
width: 34px;
@@ -290,10 +224,6 @@
padding: 16px;
}
.header-title {
display: none;
}
.mobile-menu-btn {
display: flex !important;
}

35
src/styles/layouts/_chat-layout.scss
View File

@@ -177,41 +177,6 @@
color: var(--color-text-3);
}
// 侧边栏用户状态区域
.chat-sidebar-user {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-top: 1px solid var(--color-border-2);
background: var(--color-bg-1);
cursor: pointer;
transition: background 0.2s;
&:hover {
background: var(--color-bg-2);
}
}
.chat-sidebar-user-info {
flex: 1;
min-width: 0;
}
.chat-sidebar-user-name {
font-size: 14px;
font-weight: 600;
color: var(--color-text-1);
margin-bottom: 2px;
@include text-truncate;
}
.chat-sidebar-user-role {
font-size: 12px;
color: var(--color-text-3);
@include text-truncate;
}
// 侧边栏项目切换区域
.chat-sidebar-project {
padding: 16px;

130
src/styles/pages/_home.scss
View File

@@ -3,7 +3,7 @@
@use '../tokens' as *;
.home-layout {
min-height: 100vh;
flex: 1;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
@@ -33,116 +33,6 @@
}
}
.home-header {
padding: 0 48px;
height: 68px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
border-bottom: 1px solid var(--color-border-2);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
}
.home-logo {
font-size: 18px;
font-weight: 800;
color: var(--color-text-1);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.3px;
.sidebar-logo-icon {
width: 28px;
height: 28px;
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
width: 14px;
height: 10px;
background: rgba(255, 255, 255, 0.95);
border-radius: 4px 4px 2px 2px;
top: 5px;
}
&::after {
content: '';
position: absolute;
width: 18px;
height: 10px;
background: rgba(255, 255, 255, 0.85);
border-radius: 2px 2px 4px 4px;
bottom: 4px;
}
span {
position: absolute;
width: 3px;
height: 3px;
background: rgba(59, 130, 246, 0.9);
border-radius: 50%;
top: 9px;
z-index: 1;
&:nth-child(1) { left: 9px; }
&:nth-child(2) { right: 9px; }
}
}
}
.home-nav {
display: flex;
gap: 6px;
a {
color: var(--color-text-2);
text-decoration: none;
padding: 9px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 6px;
&:hover {
color: var(--color-text-1);
background: var(--color-bg-2);
}
svg, .home-icon {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
}
&.home-nav-login {
color: #3B82F6;
font-weight: 600;
&:hover {
color: #2563EB;
background: #EFF6FF;
}
}
}
}
.home-main {
flex: 1;
display: flex;
@@ -300,22 +190,8 @@
line-height: 1.6;
}
.home-footer {
padding: 28px;
text-align: center;
color: var(--color-text-4);
font-size: 13px;
font-weight: 500;
position: relative;
z-index: 1;
}
// Responsive
@include mobile {
.home-header {
padding: 0 16px;
}
.home-title {
font-size: 36px;
}
@@ -338,8 +214,4 @@
.home-features {
grid-template-columns: 1fr;
}
.home-nav {
display: none;
}
}