Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
R
risk_manager_new
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
risk_manager_new
Commits
1e1adc14
Commit
1e1adc14
authored
Sep 28, 2026
by
drigle
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: align shell theme with problem rectification
parent
ebfb900a
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
48 additions
and
25 deletions
+48
-25
ui-architecture.md
docs/ui-architecture.md
+8
-1
xinyuan-design-system.md
docs/xinyuan-design-system.md
+10
-2
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 @
1e1adc14
# 鑫元 UI 架构
# 鑫元 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 路由、通知入口、页面状态或业务数据协议。
## 2026-09-02 审计项目管理基准
## 2026-09-02 审计项目管理基准
-
当前
`develop`
分支的共享架构与
`/Users/liuchenlong/Desktop/job/audit_project_manager`
当前实现对齐。
-
当前
`develop`
分支的共享架构与
`/Users/liuchenlong/Desktop/job/audit_project_manager`
当前实现对齐。
-
AppShell 固定浅色内容画布和深色 Sidebar;
禁止主题切换、主题持久化及局部暗色容器。
-
当时的 AppShell 基准为浅色内容画布和深色 Sidebar;当前配色以上方 2026-09-28 调整为准。继续
禁止主题切换、主题持久化及局部暗色容器。
-
Sidebar 分组使用 HeroUI
`Disclosure`
compound API,Navbar 使用 HeroUI Pro
`Sidebar.Trigger`
与通知
`Badge.Anchor`
;用户菜单使用
`Dropdown.Trigger`
。
-
Sidebar 分组使用 HeroUI
`Disclosure`
compound API,Navbar 使用 HeroUI Pro
`Sidebar.Trigger`
与通知
`Badge.Anchor`
;用户菜单使用
`Dropdown.Trigger`
。
-
DataGrid、Autocomplete、Modal、ECharts 适配器直接使用 HeroUI/HeroUI Pro 官方结构;问题整改图表点击回调通过适配器透传,业务状态和数据协议不变。
-
DataGrid、Autocomplete、Modal、ECharts 适配器直接使用 HeroUI/HeroUI Pro 官方结构;问题整改图表点击回调通过适配器透传,业务状态和数据协议不变。
...
...
docs/xinyuan-design-system.md
View file @
1e1adc14
# 鑫元问题整改系统设计规范
# 鑫元问题整改系统设计规范
## 2026-09-28 Shell 配色调整
当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。
`theme.css`
的
`--background`
和
`--xinyuan-sidebar-*`
是这组配色的唯一来源:侧栏背景
`oklch(32% 0.037 255)`
,页面画布为
`oklch(97.4% 0.002 255)`
;侧栏文字为近白色,悬停项为稍亮的蓝色,选中项为提亮的蓝色底与白字。品牌主红
`#DA241A`
不变。侧栏红色 Logo 直接显示,不加 Logo 底色。桌面与移动侧栏共用这些 Token,导航结构、交互及数据状态不变。
当前选中项底色为
`oklch(46% 0.055 255)`
,与深藏蓝侧栏明确区分;普通项悬停使用侧栏同色系,当前项悬停时保留选中底色和白色文字。
内容画布顶部使用仅限 AppShell 的轻微渐变:
`--xinyuan-canvas-top`
从深藏蓝侧栏色与
`--background`
混合 4% 得到,在顶部至 18rem 处过渡回
`--background`
。Navbar 与页面滚动区透出同一层背景;Card、Surface、字段和浮层仍按 HeroUI 原有 Token 渲染。
## 2026-09-02 基准同步
## 2026-09-02 基准同步
本项目
`develop`
分支统一以
`/Users/liuchenlong/Desktop/job/audit_project_manager`
当前实现为唯一 UI 基准。右侧内容区固定浅色、Sidebar 固定深色;不得新增主题切换按钮、Sun/Moon 图标、主题存储或局部暗色模式。Shell、Sidebar 分组、Navbar 通知、DataGrid、Autocomplete、Modal、ECharts 和全局 Tailwind 加载顺序以基准项目对应文件为
准。问题整改专属路由、Subject/View、接口和业务回调只保留自身实现。
此前以
`/Users/liuchenlong/Desktop/job/audit_project_manager`
的深色 Sidebar 与浅色内容区作为 UI 基准;Shell 配色现由上方 2026-09-28 调整覆盖。仍不提供主题切换按钮、Sun/Moon 图标、主题存储或局部暗色模式。Sidebar 分组、Navbar 通知、DataGrid、Autocomplete、Modal、ECharts 和全局 Tailwind 加载顺序沿用原基
准。问题整改专属路由、Subject/View、接口和业务回调只保留自身实现。
## 2026-08-31 基准同步补充
## 2026-08-31 基准同步补充
...
@@ -66,7 +74,7 @@ Surface 用于表达页面内的包含关系,Overlay 用于表达浮动关系
...
@@ -66,7 +74,7 @@ Surface 用于表达页面内的包含关系,Overlay 用于表达浮动关系
-
应用名称统一为“问题整改”,供 Login、Sidebar、Navbar、应用切换和浏览器标题共用。
-
应用名称统一为“问题整改”,供 Login、Sidebar、Navbar、应用切换和浏览器标题共用。
-
Login 使用 HeroUI Card/Input/Button/Alert,保留已批准的 Logo、居中布局、验证码和浏览器 autofill 修正;这些规则只能作用于
`.login-*`
范围。
-
Login 使用 HeroUI Card/Input/Button/Alert,保留已批准的 Logo、居中布局、验证码和浏览器 autofill 修正;这些规则只能作用于
`.login-*`
范围。
-
Sidebar、Navbar 使用 HeroUI Pro
,Logo 浅色使用
`xy-logo-red.png`
、暗色使用
`xy-logo-white.png`
。
-
Sidebar、Navbar 使用 HeroUI Pro
;当前侧栏直接显示
`xy-logo-red.png`
,不加 Logo 底色
。
-
`src/design-system/shell.css`
只负责应用壳布局、导航定位、折叠、Logo 和响应式,不得延伸到列表、筛选、Tabs、Card、DataGrid 或弹窗正文。
-
`src/design-system/shell.css`
只负责应用壳布局、导航定位、折叠、Logo 和响应式,不得延伸到列表、筛选、Tabs、Card、DataGrid 或弹窗正文。
-
侧边栏只有一个导航组时,不在菜单列表上方重复显示应用名称;组名继续作为
`Sidebar.Menu`
的可访问性标签。只有存在两个及以上确需区分的业务分组时才显示
`Sidebar.GroupLabel`
。
-
侧边栏只有一个导航组时,不在菜单列表上方重复显示应用名称;组名继续作为
`Sidebar.Menu`
的可访问性标签。只有存在两个及以上确需区分的业务分组时才显示
`Sidebar.GroupLabel`
。
-
通知中心不占用 Sidebar 导航层级。存在真实通知功能时,在 Navbar 右侧操作组中使用 HeroUI
`Badge.Anchor + Badge + Button + Tooltip`
,通知按钮位于主题切换左侧,主题切换始终最右;按钮沿用 36px 中性圆形 Navbar 动作规范,图标为 16px Ant Design Bell。未读数只能来自真实接口,0 时不显示角标,超过 99 显示
`99+`
,点击仍进入应用原通知路由。
-
通知中心不占用 Sidebar 导航层级。存在真实通知功能时,在 Navbar 右侧操作组中使用 HeroUI
`Badge.Anchor + Badge + Button + Tooltip`
,通知按钮位于主题切换左侧,主题切换始终最右;按钮沿用 36px 中性圆形 Navbar 动作规范,图标为 16px Ant Design Bell。未读数只能来自真实接口,0 时不显示角标,超过 99 显示
`99+`
,点击仍进入应用原通知路由。
...
...
src/components/DashboardSidebar.jsx
View file @
1e1adc14
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
{
APPLICATION_DISPLAY_NAME
}
from
'@/config/application'
;
import
{
Sheet
}
from
'@heroui-pro/react'
;
import
{
Sheet
}
from
'@heroui-pro/react'
;
import
{
Sidebar
,
useSidebar
}
from
'@heroui-pro/react/sidebar'
;
import
{
Sidebar
,
useSidebar
}
from
'@heroui-pro/react/sidebar'
;
...
@@ -145,7 +145,7 @@ function SidebarContents({
...
@@ -145,7 +145,7 @@ function SidebarContents({
<
img
<
img
alt=
"鑫元"
alt=
"鑫元"
className=
"rc-sidebar-logo"
className=
"rc-sidebar-logo"
src=
{
xyLogo
White
}
src=
{
xyLogo
Red
}
/>
/>
</
div
>
</
div
>
<
div
<
div
...
...
src/design-system/shell.css
View file @
1e1adc14
...
@@ -400,7 +400,7 @@
...
@@ -400,7 +400,7 @@
.app-shell-content-scroll
{
.app-shell-content-scroll
{
min-width
:
0
;
min-width
:
0
;
background
:
var
(
--rc-bg-canvas
)
;
background
:
transparent
;
overscroll-behavior
:
contain
;
overscroll-behavior
:
contain
;
}
}
...
@@ -1174,7 +1174,11 @@
...
@@ -1174,7 +1174,11 @@
overflow
:
hidden
;
overflow
:
hidden
;
border
:
0
;
border
:
0
;
border-radius
:
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
,
.dark
.rc-app-main.sidebar__main
,
...
@@ -1603,7 +1607,7 @@
...
@@ -1603,7 +1607,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
,
.template-dashboard-shell
.app-sidebar-glass
,
.rc-mobile-sidebar.app-sidebar-glass
{
.rc-mobile-sidebar.app-sidebar-glass
{
color
:
var
(
--rc-sidebar-foreground
);
color
:
var
(
--rc-sidebar-foreground
);
...
@@ -1635,13 +1639,17 @@
...
@@ -1635,13 +1639,17 @@
color
:
var
(
--rc-sidebar-item-selected-foreground
)
!important
;
color
:
var
(
--rc-sidebar-item-selected-foreground
)
!important
;
}
}
.template-dashboard-shell
.sidebar__menu-item
:hover
.sidebar__menu-item-content
,
.template-dashboard-shell
.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
,
.sidebar__menu-item-content
,
.rc-mobile-sidebar
.sidebar__menu-item
:hover
.sidebar__menu-item-content
,
.rc-mobile-sidebar
.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
,
.sidebar__menu-item-content
,
.app-sidebar-user-trigger.dropdown__trigger
:hover
,
.app-sidebar-user-trigger.dropdown__trigger
:hover
,
.app-sidebar-user-trigger.dropdown__trigger
[
data-hovered
=
'true'
]
{
.app-sidebar-user-trigger.dropdown__trigger
[
data-hovered
=
'true'
]
{
...
...
src/design-system/theme.css
View file @
1e1adc14
...
@@ -15,7 +15,8 @@
...
@@ -15,7 +15,8 @@
--accent
:
#DA241A
;
--accent
:
#DA241A
;
--accent-foreground
:
oklch
(
99.11%
0
0
);
--accent-foreground
:
oklch
(
99.11%
0
0
);
--accent-hover
:
#C91F17
;
--accent-hover
:
#C91F17
;
--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
);
--border
:
oklch
(
90.00%
0.0000
29.20
);
--danger
:
oklch
(
45.32%
0.1661
27.03
);
--danger
:
oklch
(
45.32%
0.1661
27.03
);
--danger-foreground
:
oklch
(
99.11%
0
0
);
--danger-foreground
:
oklch
(
99.11%
0
0
);
...
@@ -54,18 +55,17 @@
...
@@ -54,18 +55,17 @@
--font-sans
:
var
(
--font-inter
);
--font-sans
:
var
(
--font-inter
);
/*
/*
* Xinyuan fixed split-shell contract.
* Xinyuan fixed light canvas with a muted navy Sidebar.
* The application canvas always uses this light theme. The Sidebar is the
* Navigation colors are kept separate from HeroUI surfaces.
* only persistent dark plane and must consume these semantic tokens.
*/
*/
--xinyuan-sidebar-background
:
oklch
(
16%
0.020
255
);
--xinyuan-sidebar-background
:
oklch
(
32%
0.037
255
);
--xinyuan-sidebar-border
:
oklch
(
26%
0.022
255
);
--xinyuan-sidebar-border
:
oklch
(
41%
0.036
255
);
--xinyuan-sidebar-foreground
:
oklch
(
97%
0.00
4
255
);
--xinyuan-sidebar-foreground
:
oklch
(
97%
0.00
5
255
);
--xinyuan-sidebar-muted
:
oklch
(
76
%
0.018
255
);
--xinyuan-sidebar-muted
:
oklch
(
82
%
0.018
255
);
--xinyuan-sidebar-item-hover
:
oklch
(
22%
0.026
255
);
--xinyuan-sidebar-item-hover
:
oklch
(
39%
0.042
255
);
--xinyuan-sidebar-item-selected
:
oklch
(
28%
0.016
255
);
--xinyuan-sidebar-item-selected
:
oklch
(
46%
0.055
255
);
--xinyuan-sidebar-item-selected-foreground
:
oklch
(
99%
0.002
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.
* ECharts is the required chart renderer for Xinyuan applications.
...
@@ -114,7 +114,7 @@
...
@@ -114,7 +114,7 @@
[
data-theme
=
"dark"
]
{
[
data-theme
=
"dark"
]
{
color-scheme
:
dark
;
color-scheme
:
dark
;
/* Theme Colors (Dark Mode) */
/* Theme Colors (Dark Mode) */
/* Keep brand and focus stable
when the Sidebar uses its dark plane
. */
/* Keep brand and focus stable
across HeroUI theme contexts
. */
--accent
:
#DA241A
;
--accent
:
#DA241A
;
--accent-foreground
:
oklch
(
99.11%
0
0
);
--accent-foreground
:
oklch
(
99.11%
0
0
);
--accent-hover
:
#C91F17
;
--accent-hover
:
#C91F17
;
...
...
src/design-system/tokens.css
View file @
1e1adc14
...
@@ -27,7 +27,7 @@
...
@@ -27,7 +27,7 @@
--rc-text-muted
:
var
(
--muted
);
--rc-text-muted
:
var
(
--muted
);
--rc-text-empty
:
color-mix
(
in
oklab
,
var
(
--muted
)
72%
,
var
(
--background
));
--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-background
:
var
(
--xinyuan-sidebar-background
);
--rc-sidebar-border
:
var
(
--xinyuan-sidebar-border
);
--rc-sidebar-border
:
var
(
--xinyuan-sidebar-border
);
--rc-sidebar-foreground
:
var
(
--xinyuan-sidebar-foreground
);
--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