Commit 1e1adc14 authored by drigle's avatar drigle

style: align shell theme with problem rectification

parent ebfb900a
# 鑫元 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 审计项目管理基准
- 当前 `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`。
- DataGrid、Autocomplete、Modal、ECharts 适配器直接使用 HeroUI/HeroUI Pro 官方结构;问题整改图表点击回调通过适配器透传,业务状态和数据协议不变。
......
# 鑫元问题整改系统设计规范
## 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 基准同步
本项目 `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 基准同步补充
......@@ -66,7 +74,7 @@ Surface 用于表达页面内的包含关系,Overlay 用于表达浮动关系
- 应用名称统一为“问题整改”,供 Login、Sidebar、Navbar、应用切换和浏览器标题共用。
- 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 或弹窗正文。
- 侧边栏只有一个导航组时,不在菜单列表上方重复显示应用名称;组名继续作为 `Sidebar.Menu` 的可访问性标签。只有存在两个及以上确需区分的业务分组时才显示 `Sidebar.GroupLabel`。
- 通知中心不占用 Sidebar 导航层级。存在真实通知功能时,在 Navbar 右侧操作组中使用 HeroUI `Badge.Anchor + Badge + Button + Tooltip`,通知按钮位于主题切换左侧,主题切换始终最右;按钮沿用 36px 中性圆形 Navbar 动作规范,图标为 16px Ant Design Bell。未读数只能来自真实接口,0 时不显示角标,超过 99 显示 `99+`,点击仍进入应用原通知路由。
......
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';
......@@ -145,7 +145,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;
}
......@@ -1174,7 +1174,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,
......@@ -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,
.rc-mobile-sidebar.app-sidebar-glass {
color: var(--rc-sidebar-foreground);
......@@ -1635,13 +1639,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'] {
......
......@@ -15,7 +15,8 @@
--accent: #DA241A;
--accent-foreground: oklch(99.11% 0 0);
--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);
--danger: oklch(45.32% 0.1661 27.03);
--danger-foreground: oklch(99.11% 0 0);
......@@ -54,18 +55,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.
......@@ -114,7 +114,7 @@
[data-theme="dark"] {
color-scheme: dark;
/* 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-foreground: oklch(99.11% 0 0);
--accent-hover: #C91F17;
......
......@@ -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