Commit fcbbd381 authored by drigle's avatar drigle

style: align sidebar and canvas palette

parent f2f393a4
# 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` 管理,用户可手动收起/展开且路由切换不
强制重置状态。
......
# 审计项目管理鑫元设计系统
## 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,禁止页面自行替换为纯黑、深蓝或局部色板。
### 应用切换弹窗详细规范
......
import xyLogoWhite from '@/assets/xy-logo-white.png';
import xyLogoRed 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={xyLogoWhite}
src={xyLogoRed}
/>
</div>
<div
......
......@@ -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'] {
......
......@@ -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.004 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.005 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;
......
......@@ -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);
......
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