Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
A
audit_project_manager
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
David Yang
audit_project_manager
Commits
fcbbd381
Commit
fcbbd381
authored
Sep 29, 2026
by
drigle
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: align sidebar and canvas palette
parent
f2f393a4
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
66 additions
and
34 deletions
+66
-34
ui-architecture.md
docs/ui-architecture.md
+12
-1
xinyuan-design-system.md
docs/xinyuan-design-system.md
+24
-11
DashboardSidebar.jsx
src/components/DashboardSidebar.jsx
+2
-2
shell.css
src/design-system/shell.css
+15
-7
theme.css
src/design-system/theme.css
+12
-12
tokens.css
src/design-system/tokens.css
+1
-1
No files found.
docs/ui-architecture.md
View file @
fcbbd381
# UI 架构
## 2026-09-28 Shell 配色
-
AppShell 采用中性灰白内容画布与低饱和深藏蓝 Sidebar。页面画布由
`theme.css`
的
`--background: oklch(97.4% 0.002 255)`
提供;侧栏背景为
`oklch(32% 0.037 255)`
。桌面和
移动侧栏共用
`--xinyuan-sidebar-*`
,选中导航为提亮的蓝色底与白字,侧栏红色 Logo 直接
显示、不加底色;页面仍固定浅色,不提供主题切换。
-
内容画布在 AppShell 顶部使用 4% 侧栏蓝色与
`--background`
混合的轻微渐变,至
`18rem`
淡出到灰白底色;Navbar 和滚动区共用这一层,页面 Card 与 HeroUI 组件保持原有表面 Token。
-
当前导航悬停时保留选中底色;普通导航悬停使用侧栏同色系。此调整仅涉及 Shell 视觉层,
不改变 Sidebar 路由、通知入口、页面状态或业务数据协议。
## 组件所有权
活动页面和共享 UI 组合直接导入
`@heroui/react`
、
`@heroui-pro/react`
或验证过的 Pro
...
...
@@ -16,7 +27,7 @@ Hover/Focus/Selected/Disabled。`src/pages` 下没有页面私有 CSS/Less/SCSS
## 共享组合
-
`AppShell`
:固定浅色根主题、Pro Sidebar Provider、Navbar 和 base-aware 页面滚动容器。
-
`DashboardSidebar`
/
`DashboardNavbar`
:
固定深色
导航、offcanvas、应用切换、用户菜单与通知动作;
-
`DashboardSidebar`
/
`DashboardNavbar`
:
低饱和深藏蓝
导航、offcanvas、应用切换、用户菜单与通知动作;
Navbar 不再提供主题切换。
Sidebar 业务分类首次渲染默认展开,分类仍由 HeroUI
`Disclosure`
管理,用户可手动收起/展开且路由切换不
强制重置状态。
...
...
docs/xinyuan-design-system.md
View file @
fcbbd381
# 审计项目管理鑫元设计系统
## 2026-09-28 Shell 配色调整
当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。
`theme.css`
的
`--background`
和
`--xinyuan-sidebar-*`
是这组配色的唯一来源:侧栏背景为
`oklch(32% 0.037 255)`
,页面画布为
`oklch(97.4% 0.002 255)`
;侧栏文字为近白色,
普通项悬停为同色系提亮蓝,当前项为更亮的蓝色底和白色文字。品牌主红
`#DA241A`
不变。
桌面与移动侧栏共用这些 Token,导航结构、交互和数据状态不变。
内容画布顶部使用仅限 AppShell 的轻微渐变:
`--xinyuan-canvas-top`
从深藏蓝侧栏色与
`--background`
混合 4% 得到,在顶部至
`18rem`
处过渡回
`--background`
。Navbar 与页面
滚动区透出同一层背景;Card、Surface、字段和浮层仍按 HeroUI 原有 Token 渲染。
渐变不用于页面或组件表面。
## 权威边界
本应用使用原生 HeroUI 3 / HeroUI Pro compound API
,并以用户提供的
`/Users/liuchenlong/Desktop/theme.css`
作为新的唯一主题基准。
`src/design-system/theme.css`
必须与该文件逐字节一致;
`tokens.css`
只增加批准的
`--rc-*`
语义与布局 Token,不重定义
HeroUI 核心主题
。
本应用使用原生 HeroUI 3 / HeroUI Pro compound API
。
`src/design-system/theme.css`
仍是
浅色、暗色、品牌色、语义色、圆角、字体和 Shell 配色的唯一主题权威;
`tokens.css`
只增加
批准的
`--rc-*`
语义与布局 Token,不重定义 HeroUI 核心主题。Shell 配色以上方
2026-09-28 调整为准
。
全局加载顺序为 Tailwind、HeroUI、HeroUI Pro、权威
`theme.css`
、鑫元
`tokens.css`
、共享
Shell 样式。页面 className 只承担布局;组件外观由官方 variant/size/state、权威主题和批准
...
...
@@ -18,8 +31,8 @@ Inter 与系统回退字体之间切换。
## 身份与 Shell
-
统一应用名称为
`审计项目管理`
;登录
与浅色内容面使用红色鑫元 Logo,固定深色 Sidebar
使用白色 Logo
。
-
统一应用名称为
`审计项目管理`
;登录
、浅色内容面和当前侧栏都使用红色鑫元 Logo,侧栏
不为 Logo 增加底色
。
-
登录按“问题整改”保留真实验证码:首次加载
`/auth/captcha`
,提交
`captcha/token`
,失败后
清空并刷新;账号、密码和验证码控件等高,验证码输入与图片使用批准的两列网格。
-
HeroUI Pro Sidebar 为桌面 240px,
`collapsible="offcanvas"`
;移动端使用官方 80vw。
...
...
@@ -53,11 +66,11 @@ Inter 与系统回退字体之间切换。
-
应用分组读取
`/info -> site.group`
,按配置和账号可访问应用的真实顺序匹配,隐藏空组,
显示真实数量,未引用应用进入“其他应用”,无分组配置时使用“全部应用”。
-
应用根固定为
`.light`
/
`data-theme="light"`
,不提供深浅模式切换,也不写入主题存储。
Sidebar 独立使用
`--xinyuan-sidebar-*`
深色 Token;Portal、ActionBar 和右侧内容始终使用
新主题的
浅色 Token。
-
Sidebar 背景固定为
`oklch(
16% 0.020 255)`
的近黑蓝灰,Hover 使用
`oklch(22% 0.026 255)`
,Selected 使用低饱和的
`oklch(28% 0.016 255)`
且选中文字和图标反白;
边框、文字和 Focus 均取自同一组
主题 Token,禁止页面自行替换为纯黑、深蓝或局部色板。
Sidebar 独立使用
`--xinyuan-sidebar-*`
低饱和深藏蓝 Token;Portal、ActionBar 和右侧内容
始终使用
浅色 Token。
-
Sidebar 背景固定为
`oklch(
32% 0.037 255)`
,Hover 使用
`oklch(39% 0.042 255)`
;当前项
Hover 保留
`oklch(46% 0.055 255)`
选中底色和反白文字。边框、文字和 Focus 均取自同一组
主题 Token,禁止页面自行替换为纯黑、深蓝或局部色板。
### 应用切换弹窗详细规范
...
...
src/components/DashboardSidebar.jsx
View file @
fcbbd381
import
xyLogo
White
from
'@/assets/xy-logo-white
.png'
;
import
xyLogo
Red
from
'@/assets/xy-logo-red
.png'
;
import
{
APPLICATION_DISPLAY_NAME
}
from
'@/config/application'
;
import
{
Sheet
}
from
'@heroui-pro/react'
;
import
{
Sidebar
,
useSidebar
}
from
'@heroui-pro/react/sidebar'
;
...
...
@@ -120,7 +120,7 @@ function SidebarContents({
<
img
alt=
"鑫元"
className=
"rc-sidebar-logo"
src=
{
xyLogo
White
}
src=
{
xyLogo
Red
}
/>
</
div
>
<
div
...
...
src/design-system/shell.css
View file @
fcbbd381
...
...
@@ -400,7 +400,7 @@
.app-shell-content-scroll
{
min-width
:
0
;
background
:
var
(
--rc-bg-canvas
)
;
background
:
transparent
;
overscroll-behavior
:
contain
;
}
...
...
@@ -1188,7 +1188,11 @@
overflow
:
hidden
;
border
:
0
;
border-radius
:
0
;
background
:
var
(
--rc-bg-canvas
);
background
:
linear-gradient
(
180deg
,
var
(
--xinyuan-canvas-top
)
0
,
var
(
--rc-bg-canvas
)
18rem
);
}
.dark
.rc-app-main.sidebar__main
,
...
...
@@ -1617,7 +1621,7 @@
}
}
/*
Fixed split-shell theme: dark navigation,
permanently light content canvas. */
/*
Muted navy navigation beside the
permanently light content canvas. */
.template-dashboard-shell
.app-sidebar-glass
,
.rc-mobile-sidebar.app-sidebar-glass
{
color
:
var
(
--rc-sidebar-foreground
);
...
...
@@ -1649,13 +1653,17 @@
color
:
var
(
--rc-sidebar-item-selected-foreground
)
!important
;
}
.template-dashboard-shell
.sidebar__menu-item
:hover
.sidebar__menu-item-content
,
.template-dashboard-shell
.sidebar__menu-item
[
data-hovered
=
'true'
]
.sidebar__menu-item
:not
([
data-current
=
'true'
])
:hover
.sidebar__menu-item-content
,
.template-dashboard-shell
.sidebar__menu-item
:not
([
data-current
=
'true'
])[
data-hovered
=
'true'
]
.sidebar__menu-item-content
,
.rc-mobile-sidebar
.sidebar__menu-item
:hover
.sidebar__menu-item-content
,
.rc-mobile-sidebar
.sidebar__menu-item
[
data-hovered
=
'true'
]
.sidebar__menu-item
:not
([
data-current
=
'true'
])
:hover
.sidebar__menu-item-content
,
.rc-mobile-sidebar
.sidebar__menu-item
:not
([
data-current
=
'true'
])[
data-hovered
=
'true'
]
.sidebar__menu-item-content
,
.app-sidebar-user-trigger.dropdown__trigger
:hover
,
.app-sidebar-user-trigger.dropdown__trigger
[
data-hovered
=
'true'
]
{
...
...
src/design-system/theme.css
View file @
fcbbd381
...
...
@@ -31,7 +31,8 @@
--primary-800
:
#941711
;
--primary-900
:
#73120D
;
--primary-950
:
#4A0C08
;
--background
:
oklch
(
97.02%
0.0000
29.20
);
--background
:
oklch
(
97.4%
0.002
255
);
--xinyuan-canvas-top
:
color-mix
(
in
oklab
,
var
(
--xinyuan-sidebar-background
)
4%
,
var
(
--background
));
--border
:
oklch
(
90.00%
0.0000
29.20
);
--danger
:
#B51B14
;
--danger-hover
:
#941711
;
...
...
@@ -71,18 +72,17 @@
--font-sans
:
var
(
--font-inter
);
/*
* Xinyuan fixed split-shell contract.
* The application canvas always uses this light theme. The Sidebar is the
* only persistent dark plane and must consume these semantic tokens.
* Xinyuan fixed light canvas with a muted navy Sidebar.
* Navigation colors are kept separate from HeroUI surfaces.
*/
--xinyuan-sidebar-background
:
oklch
(
16%
0.020
255
);
--xinyuan-sidebar-border
:
oklch
(
26%
0.022
255
);
--xinyuan-sidebar-foreground
:
oklch
(
97%
0.00
4
255
);
--xinyuan-sidebar-muted
:
oklch
(
76
%
0.018
255
);
--xinyuan-sidebar-item-hover
:
oklch
(
22%
0.026
255
);
--xinyuan-sidebar-item-selected
:
oklch
(
28%
0.016
255
);
--xinyuan-sidebar-background
:
oklch
(
32%
0.037
255
);
--xinyuan-sidebar-border
:
oklch
(
41%
0.036
255
);
--xinyuan-sidebar-foreground
:
oklch
(
97%
0.00
5
255
);
--xinyuan-sidebar-muted
:
oklch
(
82
%
0.018
255
);
--xinyuan-sidebar-item-hover
:
oklch
(
39%
0.042
255
);
--xinyuan-sidebar-item-selected
:
oklch
(
46%
0.055
255
);
--xinyuan-sidebar-item-selected-foreground
:
oklch
(
99%
0.002
255
);
--xinyuan-sidebar-focus
:
oklch
(
78%
0.105
29.20
);
--xinyuan-sidebar-focus
:
oklch
(
85%
0.070
255
);
/*
* ECharts is the required chart renderer for Xinyuan applications.
...
...
@@ -139,7 +139,7 @@
.dark
,
[
data-theme
=
"dark"
]
{
color-scheme
:
dark
;
/*
Theme Colors (Dark Mode)
*/
/*
Keep brand and focus stable across HeroUI theme contexts.
*/
--accent
:
#DA241A
;
--accent-hover
:
#C91F17
;
--accent-pressed
:
#B51B14
;
...
...
src/design-system/tokens.css
View file @
fcbbd381
...
...
@@ -27,7 +27,7 @@
--rc-text-muted
:
var
(
--muted
);
--rc-text-empty
:
color-mix
(
in
oklab
,
var
(
--muted
)
72%
,
var
(
--background
));
/*
Fixed dark
Sidebar aliases. The content canvas remains light. */
/*
Muted navy
Sidebar aliases. The content canvas remains light. */
--rc-sidebar-background
:
var
(
--xinyuan-sidebar-background
);
--rc-sidebar-border
:
var
(
--xinyuan-sidebar-border
);
--rc-sidebar-foreground
:
var
(
--xinyuan-sidebar-foreground
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment