Commit 5519d074 authored by drigle's avatar drigle

style: align theme UI with problem rectification

parent 07684a76
......@@ -85,8 +85,8 @@ export default defineConfig({
npmClient: 'npm',
proxy: {
'/api': {
// target: 'https://xy.streams7.com/api',
target: 'http://127.0.0.1:3000/',
target: 'https://xy.streams7.com/api',
// target: 'http://127.0.0.1:3000/',
changeOrigin: true,
pathRewrite: { '^/api': '' },
secure: false,
......
# UI 架构
## 2026-09-28 Shell 配色同步
AppShell 采用中性灰白内容画布与低饱和深藏蓝 Sidebar。页面画布由 `theme.css` 的 `--background: oklch(97.4% 0.002 255)` 提供;侧栏背景为 `oklch(32% 0.037 255)`,桌面和移动侧栏共用 `--xinyuan-sidebar-*` Token。选中导航使用提亮的蓝色底与白字,普通导航悬停使用同色系较浅底色,当前项悬停保持选中底色;侧栏直接显示红色 Logo,不加额外底色。
内容画布在 AppShell 顶部使用由侧栏色与 `--background` 混合 4% 得到的 `--xinyuan-canvas-top`,在 18rem 内渐变回灰白底色;Navbar 与滚动区透出同一层背景。此次仅调整 Shell 视觉层,不改变路由、通知入口、页面状态或业务数据协议。
## 分层
1. `src/services` 与 `integrityPartyService.js` 负责接口、Record/metadata 映射、Excel、日期和附件协议。
......
# 鑫元设计系统实施规范
## 2026-09-28 Shell 配色调整
当前 AppShell 使用低饱和深藏蓝侧栏与中性灰白内容画布。`theme.css` 的 `--background` 和 `--xinyuan-sidebar-*` 是这组配色的唯一来源:侧栏背景 `oklch(32% 0.037 255)`,页面画布为 `oklch(97.4% 0.002 255)`;侧栏文字为近白色,悬停项为稍亮的蓝色,选中项为提亮的蓝色底与白字。品牌主红 `#DA241A` 不变。桌面与移动侧栏共用这些 Token,导航结构、交互及数据状态不变。
当前选中项底色为 `oklch(46% 0.055 255)`,与深藏蓝侧栏明确区分;当前项悬停时保留选中底色和白色文字。内容画布顶部使用仅限 AppShell 的 `--xinyuan-canvas-top` 轻微渐变,Card、Surface 与 HeroUI 组件继续使用原有语义 Token。
## 适用范围
本应用统一采用鑫元 HeroUI / HeroUI Pro 设计系统。品牌主色固定为 `#DA241A`,浅色和深色主题的 HeroUI `accent`、`focus` 与主操作均保持该品牌色;Hover/Pressed 仅使用品牌红的深浅派生,不随主题自动切换为其他色相。
......@@ -10,7 +16,7 @@
- HeroUI 基础 CSS 使用 `@heroui/styles/css`,HeroUI Pro 使用 `@heroui-pro/react/css`;禁止用 `@heroui/styles` JavaScript 入口代替基础 CSS。
- `theme.css` 是本应用 HeroUI 主题权威源;业务样式不得重定义其核心变量。品牌 `accent/focus` 固定为 `#DA241A`,并提供 `primary-50` 至 `primary-950` 的同色相派生层级。
- `tokens.css` 仅定义 `--rc-*` 扩展、别名、图表色和组件几何。
- 浅色使用 `xy-logo-red.png`,深色使用 `xy-logo-white.png`,禁止使用 RSM 资产或 CSS 反色。
- AppShell 固定浅色内容区与深色 Sidebar,Sidebar 直接使用 `xy-logo-red.png`,不加 Logo 底色;禁止使用 RSM 资产或 CSS 反色。
- 应用展示名统一为“党风廉政建设”。
## 组件边界
......
import xyLogoWhite from '@/assets/identity/xy-logo-white.png';
import xyLogoRed from '@/assets/identity/xy-logo-red.png';
import { APP_NAME } from '@/config/ApplicationConfig';
import { Sheet } from '@heroui-pro/react';
import { Sidebar, useSidebar } from '@heroui-pro/react/sidebar';
......@@ -140,7 +140,7 @@ function SidebarContents({
<div className="app-sidebar-brand rc-sidebar-brand">
<div className="app-sidebar-brand-mark rc-sidebar-brand-mark">
<img
src={xyLogoWhite}
src={xyLogoRed}
alt="鑫元"
className="rc-sidebar-logo"
/>
......
......@@ -400,7 +400,7 @@
.app-shell-content-scroll {
min-width: 0;
background: var(--rc-bg-canvas);
background: transparent;
overscroll-behavior: contain;
}
......@@ -468,7 +468,7 @@
display: flex;
min-width: 0;
flex-wrap: wrap;
align-items: flex-start;
align-items: center;
gap: 0.875rem;
padding: 0.875rem;
border: 1px solid var(--rc-border-default);
......@@ -493,6 +493,10 @@
font-weight: 500;
}
.law-status-filter > .flex {
align-items: center;
}
.law-column-board-fixed {
flex: 1;
overflow-x: auto;
......@@ -2839,7 +2843,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,
......@@ -3268,7 +3276,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);
......@@ -3300,13 +3308,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-foreground: oklch(99.11% 0 0);
--accent-hover: #C91F17;
--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);
--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.
......@@ -120,6 +120,7 @@
[data-theme="dark"] {
color-scheme: dark;
/* Theme Colors (Dark Mode) */
/* Keep brand and focus stable across HeroUI theme contexts. */
--accent: #DA241A;
--accent-foreground: oklch(99.11% 0 0);
--accent-hover: #C91F17;
......
......@@ -46,7 +46,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