Commit 46ec095b authored by drigle's avatar drigle

style: sync sidebar and app canvas palette

parent 3e4b9102
# 廉洁从业管理 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 路由、通知入口、页面状态或业务数据协议。
## 运行结构 ## 运行结构
```text ```text
...@@ -45,7 +52,7 @@ Navbar -> GET notice/customer/count -> /notifications -> query/read/action ...@@ -45,7 +52,7 @@ Navbar -> GET notice/customer/count -> /notifications -> query/read/action
Grid View 的 `viewAuth` 在查询前过滤;没有可访问 View 时数据链在 `POST record/query` 之前终止。打开详情时,`useSubjectRecord` 在 View 摘要之后继续读取每个 View 的完整配置。当前 Detail 有有效 `auth` 或 `disableColumns` 时,其字段权限整套优先;两项都未配置或没有实际 Detail 时,整体回退打开它的 Grid `authorizationView`。Detail 与 Grid 不合并、也不逐字段回退;`disableColumns` 始终强制只读。切换 Detail 后,字段状态和编辑入口只按当前 Detail 的展示字段立即重算。Grid `viewAuth` 不用于隐藏详情字段。 Grid View 的 `viewAuth` 在查询前过滤;没有可访问 View 时数据链在 `POST record/query` 之前终止。打开详情时,`useSubjectRecord` 在 View 摘要之后继续读取每个 View 的完整配置。当前 Detail 有有效 `auth` 或 `disableColumns` 时,其字段权限整套优先;两项都未配置或没有实际 Detail 时,整体回退打开它的 Grid `authorizationView`。Detail 与 Grid 不合并、也不逐字段回退;`disableColumns` 始终强制只读。切换 Detail 后,字段状态和编辑入口只按当前 Detail 的展示字段立即重算。Grid `viewAuth` 不用于隐藏详情字段。
根主题固定为 `light`,内容画布保持浅色,Sidebar 通过独立 Token 保持深色;Portal 跟随内容区主题。应用切换数据来自真实 application info;登出调用现有 logout API 后清理登录态并回到 base-aware 登录路径。 根主题固定为 `light`,内容画布保持浅色,Sidebar 通过独立 Token 使用低饱和深藏蓝;Portal 跟随内容区主题。应用切换数据来自真实 application info;登出调用现有 logout API 后清理登录态并回到 base-aware 登录路径。
Pie/Donut 是普通图表色板之外的独立例外:前六个 `--xinyuan-pie-chart-*` 为品牌红、灰蓝、灰紫、暖金、暖棕、石板灰,扩展色保持低饱和且无绿色。适配器覆盖页面旧扇区颜色,并让 ECharts 的 Legend/Tooltip 标记跟随数据项视觉色;普通 Bar/Line/Ranking、KPI、HeroUI Primary 与页面 Surface 不读取该色板。 Pie/Donut 是普通图表色板之外的独立例外:前六个 `--xinyuan-pie-chart-*` 为品牌红、灰蓝、灰紫、暖金、暖棕、石板灰,扩展色保持低饱和且无绿色。适配器覆盖页面旧扇区颜色,并让 ECharts 的 Legend/Tooltip 标记跟随数据项视觉色;普通 Bar/Line/Ranking、KPI、HeroUI Primary 与页面 Surface 不读取该色板。
......
...@@ -2,6 +2,14 @@ ...@@ -2,6 +2,14 @@
本文件约束 `/integrity_practice_management/` 的活动路由。唯一视觉和结构基准是已确认的“审计项目管理”应用;不得重新设计或在页面层覆盖 HeroUI 外观。 本文件约束 `/integrity_practice_management/` 的活动路由。唯一视觉和结构基准是已确认的“审计项目管理”应用;不得重新设计或在页面层覆盖 HeroUI 外观。
## 2026-09-28 Shell 配色调整
当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。`theme.css` 的 `--background` 和 `--xinyuan-sidebar-*` 是这组配色的唯一来源:侧栏背景 `oklch(32% 0.037 255)`,页面画布为 `oklch(97.4% 0.002 255)`;侧栏文字为近白色,悬停项为稍亮的蓝色,选中项为提亮的蓝色底与白字。品牌主红 `#DA241A` 不变。侧栏红色 Logo 直接显示,不加底色。桌面与移动侧栏共用这些 Token,导航结构、交互及数据状态不变。后续配色调整以本节和实际 Token 为准。
当前选中项底色为 `oklch(46% 0.055 255)`,与深藏蓝侧栏明确区分。普通项悬停时使用侧栏同色系;当前项悬停时保留选中底色和白色文字,不被普通悬停色覆盖。
内容画布顶部使用仅限 AppShell 的轻微渐变:`--xinyuan-canvas-top` 从深藏蓝侧栏色与 `--background` 混合 4% 得到,在顶部至 18rem 处过渡回 `--background`。Navbar 与页面滚动区透出同一层背景;Card、Surface、字段和浮层仍按 HeroUI 原有 Token 渲染。
## 来源与加载顺序 ## 来源与加载顺序
1. `.umirc.ts` 中的 `public/fonts/inter.css` 常驻 link:按需加载 Inter 400/500/600,不参与 `umi.css` 热替换。 1. `.umirc.ts` 中的 `public/fonts/inter.css` 常驻 link:按需加载 Inter 400/500/600,不参与 `umi.css` 热替换。
...@@ -45,7 +53,7 @@ Inter 禁止通过 `src/tailwind.css` 导入。Tailwind v4 内容扫描必须排 ...@@ -45,7 +53,7 @@ Inter 禁止通过 `src/tailwind.css` 导入。Tailwind v4 内容扫描必须排
## 基准同步记录 ## 基准同步记录
2026-09-02 已同步审计项目管理的固定浅色内容画布、深色 Sidebar、Disclosure 分组、移动 Sheet、应用切换 Pro ItemCard 结构、共享 DataTable/FilterSelect/ActionButton 和工作台筛选/分页布局。页面仍只负责布局 className,业务数据、回调和请求边界保持原实现。 2026-09-02 已同步审计项目管理的固定浅色内容画布、深色 Sidebar、Disclosure 分组、移动 Sheet、应用切换 Pro ItemCard 结构、共享 DataTable/FilterSelect/ActionButton 和工作台筛选/分页布局。页面仍只负责布局 className,业务数据、回调和请求边界保持原实现。Shell 配色以 2026-09-28 调整覆盖;导航、业务数据和回调逻辑保持不变。
## 业务和数据保护 ## 业务和数据保护
......
import xyLogoWhite from '@/assets/xy-logo-white.png'; import xyLogoRed 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';
...@@ -120,7 +120,7 @@ function SidebarContents({ ...@@ -120,7 +120,7 @@ function SidebarContents({
<img <img
alt="鑫元" alt="鑫元"
className="rc-sidebar-logo" className="rc-sidebar-logo"
src={xyLogoWhite} src={xyLogoRed}
/> />
</div> </div>
<div <div
......
...@@ -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;
} }
...@@ -1194,7 +1194,11 @@ ...@@ -1194,7 +1194,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,
...@@ -1623,7 +1627,7 @@ ...@@ -1623,7 +1627,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);
...@@ -1655,13 +1659,17 @@ ...@@ -1655,13 +1659,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'] {
......
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
--accent-foreground: oklch(99.11% 0 0); --accent-foreground: oklch(99.11% 0 0);
--accent-hover: #C91F17; --accent-hover: #C91F17;
--accent-pressed: #B51B14; --accent-pressed: #B51B14;
--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);
...@@ -55,18 +56,17 @@ ...@@ -55,18 +56,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.004 255); --xinyuan-sidebar-foreground: oklch(97% 0.005 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.
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment