Commit 346c685a authored by drigle's avatar drigle

style: align shell theme with problem rectification

parent 2b4c88a1
# UI 架构 # UI 架构
视觉基准:`/Users/liuchenlong/Desktop/job/audit_project_manager` 当前实现。所有页面文字沿用 ## 2026-09-29 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 路由、通知入口、页面状态或业务数据协议。
早期视觉基准为 `/Users/liuchenlong/Desktop/job/audit_project_manager` 当前实现。所有页面文字沿用
该应用的层级:Navbar 20px/600、页面分区 18px/700、模块标题 16px/600、正文 14px/400、 该应用的层级:Navbar 20px/600、页面分区 18px/700、模块标题 16px/600、正文 14px/400、
次要说明 13px/400、表头和状态 Chip 12px/500。 次要说明 13px/400、表头和状态 Chip 12px/500。
......
...@@ -6,6 +6,19 @@ ...@@ -6,6 +6,19 @@
## 基础约束 ## 基础约束
## 2026-09-29 Shell 配色调整
当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。`theme.css` 的 `--background` 和
`--xinyuan-sidebar-*` 是这组配色的唯一来源:侧栏背景 `oklch(32% 0.037 255)`,页面画布为
`oklch(97.4% 0.002 255)`;侧栏文字为近白色,普通项悬停使用侧栏同色系,选中项为
`oklch(46% 0.055 255)` 蓝色底与白字,当前项悬停时保留选中态。品牌主红 `#DA241A` 不变;
侧栏红色 Logo 直接显示,不加 Logo 底色。桌面与移动侧栏共用这些 Token。
内容画布顶部使用仅限 AppShell 的轻微渐变:`--xinyuan-canvas-top` 从侧栏色与 `--background`
混合 4% 得到,在顶部至 18rem 处过渡回 `--background`。Navbar 与页面滚动区透出同一层背景;
Card、Surface、字段和浮层仍按 HeroUI 原有 Token 渲染。渐变仅限 AppShell 内容画布顶部,
不用于页面或组件表面。
- 页面和共享组件直接使用 `@heroui/react`、`@heroui-pro/react` 及官方子路径。 - 页面和共享组件直接使用 `@heroui/react`、`@heroui-pro/react` 及官方子路径。
- 权威 `theme.css` 保持 HeroUI 核心主题不变;仅追加 Skill 批准的 Pie/Donut 专用图表 Token。`tokens.css` 只提供对应项目别名和其他已批准扩展 Token。 - 权威 `theme.css` 保持 HeroUI 核心主题不变;仅追加 Skill 批准的 Pie/Donut 专用图表 Token。`tokens.css` 只提供对应项目别名和其他已批准扩展 Token。
- Inter 400/500/600 拉丁子集由 `.umirc.ts` 生成的常驻 `public/fonts/inter.css` link 加载;不得在 `tailwind.css` 中导入字体 CSS,避免 Umi HMR 替换 `umi.css` 时造成英文、数字和符号字体回退抖动。 - Inter 400/500/600 拉丁子集由 `.umirc.ts` 生成的常驻 `public/fonts/inter.css` link 加载;不得在 `tailwind.css` 中导入字体 CSS,避免 Umi HMR 替换 `umi.css` 时造成英文、数字和符号字体回退抖动。
......
import xyLogoWhite from '@/assets/xy-logo-white.png'; import xyLogoRed from '@/assets/xy-logo-red.png';
import { APP_DISPLAY_NAME } from '@/constants/app'; import { APP_DISPLAY_NAME } from '@/constants/app';
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';
...@@ -47,7 +47,7 @@ function SidebarContents({ menuGroups, onLogout, onOpenApplicationSwitcher, path ...@@ -47,7 +47,7 @@ function SidebarContents({ menuGroups, onLogout, onOpenApplicationSwitcher, path
}; };
return <> return <>
<Sidebar.Header><div className="app-sidebar-brand rc-sidebar-brand"><div className="app-sidebar-brand-mark rc-sidebar-brand-mark"><img alt="鑫元" className="rc-sidebar-logo" src={xyLogoWhite} /></div><div className="app-sidebar-brand-main rc-sidebar-brand-main" data-sidebar="label"><span className="app-sidebar-title rc-sidebar-title">{APP_DISPLAY_NAME}</span></div><div className="app-sidebar-app-switcher rc-sidebar-app-switcher" data-sidebar="label"><Button isIconOnly aria-label="切换应用" className="app-sidebar-app-trigger rc-sidebar-app-trigger" size="sm" variant="ghost" onPress={onOpenApplicationSwitcher}><AppGrid size={16} /></Button></div></div></Sidebar.Header> <Sidebar.Header><div className="app-sidebar-brand rc-sidebar-brand"><div className="app-sidebar-brand-mark rc-sidebar-brand-mark"><img alt="鑫元" className="rc-sidebar-logo" src={xyLogoRed} /></div><div className="app-sidebar-brand-main rc-sidebar-brand-main" data-sidebar="label"><span className="app-sidebar-title rc-sidebar-title">{APP_DISPLAY_NAME}</span></div><div className="app-sidebar-app-switcher rc-sidebar-app-switcher" data-sidebar="label"><Button isIconOnly aria-label="切换应用" className="app-sidebar-app-trigger rc-sidebar-app-trigger" size="sm" variant="ghost" onPress={onOpenApplicationSwitcher}><AppGrid size={16} /></Button></div></div></Sidebar.Header>
<Sidebar.Content>{menuGroups.map((group) => group.showLabel === false ? <Sidebar.Group key={group.title}>{renderMenu(group)}</Sidebar.Group> : renderGroup(group))}</Sidebar.Content> <Sidebar.Content>{menuGroups.map((group) => group.showLabel === false ? <Sidebar.Group key={group.title}>{renderMenu(group)}</Sidebar.Group> : renderGroup(group))}</Sidebar.Content>
<Sidebar.Footer><SidebarUserMenu userInfo={userInfo} onLogout={onLogout} /></Sidebar.Footer> <Sidebar.Footer><SidebarUserMenu userInfo={userInfo} onLogout={onLogout} /></Sidebar.Footer>
</>; </>;
......
...@@ -408,7 +408,7 @@ ...@@ -408,7 +408,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;
} }
...@@ -1172,7 +1172,11 @@ ...@@ -1172,7 +1172,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,
...@@ -1609,7 +1613,7 @@ ...@@ -1609,7 +1613,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);
...@@ -1641,13 +1645,17 @@ ...@@ -1641,13 +1645,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'] {
......
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
--primary-800: #941711; --primary-800: #941711;
--primary-900: #73120D; --primary-900: #73120D;
--primary-950: #4A0C08; --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); --border: oklch(90.00% 0.0000 29.20);
--danger: #B51B14; --danger: #B51B14;
--danger-hover: #941711; --danger-hover: #941711;
...@@ -71,18 +72,17 @@ ...@@ -71,18 +72,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.
......
...@@ -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);
......
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