feat: align integrity management UI with Xinyuan baseline

docs/ui-architecture.md

@@ -3,12 +3,12 @@
 ## 运行结构
 
 ```text
-app.js (主题初始化)
+app.js (固定浅色主题初始化)
   -> Site/Auth wrappers (现有鉴权与登出)
   -> integrity_practice_management/Layout
      -> AppShell (Pro Sidebar.Provider)
         -> DashboardSidebar (Pro Sidebar + HeroUI Dropdown)
-        -> DashboardNavbar (Pro Navbar + Sidebar.Trigger)
+        -> DashboardNavbar (Pro Navbar + Sidebar.Trigger + Badge.Anchor 通知)
            -> Badge.Anchor + Badge 通知入口 -> /notifications
         -> SubjectWorkbench (七个 Subject 配置入口)
            -> RecordWorkbench (Tabs/Search/DataGrid/Pagination/ActionBar)
@@ -19,12 +19,12 @@ app.js (主题初始化)
 
 ## 责任边界
 
-- `src/config/application.js`：稳定 `APPLICATION_NAME`、展示名、base、主题存储键；路由、应用切换与授权判断从同一应用标识派生。
+- `src/config/application.js`：稳定 `APPLICATION_NAME`、展示名和 base；路由、应用切换与授权判断从同一应用标识派生。
 - `src/design-system/`：权威主题、Tokens 和跨应用 Shell 样式；页面不得复制这些规则。
 - `AppShell/DashboardSidebar/DashboardNavbar/ApplicationSwitcherDialog`：业务无关的共享壳层。
 - `ApplicationSwitcherDialog` 从既有 `SiteContext.site.group` 读取动态分组，从 `GET /application/info` 与 `UserContext.applications` 合并真实可访问应用；分组仅影响呈现，不改变路由、会话或跳转。
 - `SubjectWorkbench`：把现有 Subject/View/动作配置适配为工作台 props，不定义组件外观。
-- `record-workbench`：DataGrid/Pagination/ActionBar 组合；详情能力统一映射为操作列首个预览图标，首个业务列仅展示文本；不发请求、不解释业务动作。
+- `record-workbench`：DataGrid/Pagination/ActionBar 组合；筛选使用 `FilterSelect`/`FormDatePicker`/Disclosure，详情能力统一映射为操作列首个预览图标，首个业务列仅展示文本；不发请求、不解释业务动作。
 - `RecordDetailDrawer`：详情整窗草稿、Modal 状态和字段编排；一次保存通过 `useSubjectRecord.handleFieldsUpdate` 提交。
 - `integrityPracticeMaterialService`：`am_material` 查询、`/upload` 结果快照规范化和材料建档；应用标识由廉洁从业业务层固定为 `integrity_practice_management`。
 - `notifications/notificationService`：平台通知查询、已读、动态 action、未读事件和 base-aware 链接解析。
@@ -43,7 +43,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` 不用于隐藏详情字段。
 
-主题状态写入 `xinyuan_color_theme`，同时更新根 `data-theme` 与 `dark` class，使 Portal 与页面一致。应用切换数据来自真实 application info；登出调用现有 logout API 后清理登录态并回到 base-aware 登录路径。
+根主题固定为 `light`，内容画布保持浅色，Sidebar 通过独立 Token 保持深色；Portal 跟随内容区主题。应用切换数据来自真实 application info；登出调用现有 logout API 后清理登录态并回到 base-aware 登录路径。
 
 ## 历史源码隔离
 

docs/ui-migration-checklist.md

@@ -13,13 +13,14 @@
 
 - [x] 登录、鉴权、真实退出
 - [x] Pro Sidebar/Navbar/offcanvas/mobile
-- [x] HeroUI 应用切换 Modal：model_analysis 基准、46rem/42rem、28px inset、动态分组与真实计数、桌面两列/移动单列、API Logo/首字 identity、唯一当前态；用户 Dropdown
+- [x] HeroUI 应用切换 Modal：`audit_project_manager` 基准、46rem/42rem、28px inset、动态分组与真实计数、桌面两列/移动单列、鑫元 Logo identity well、唯一当前态；用户 Dropdown
 - [x] 七条 SubjectWorkbench 路由
 - [x] Tabs、SearchField/Surface 筛选
 - [x] Pro DataGrid 选择、排序、固定列、横向滚动
-- [x] HeroUI Pagination（固定每页 10 条、无页容量选择器）、ActionBar、EmptyState
+- [x] HeroUI Pagination、共享 Autocomplete 页容量选择器（20/50/100）、ActionBar、EmptyState
 - [x] 4+ 行动作 More 菜单与危险动作末位
 - [x] 详情/编辑 Modal、指派 Modal、删除 AlertDialog
+- [x] 新增记录 Modal：4xl 居中弹窗、blur Backdrop、标准关闭按钮、可滚动 Body、两列动态表单和次级/主操作层级
 - [x] Select、Autocomplete、DatePicker、DropZone 直接 compound API
 - [x] 活动路由 KPI/图表判定为不适用
 - [x] Grid `shortTitle` 严格布尔隐藏标题展示列，标题数据与查询协议保留
@@ -54,12 +55,23 @@
 - [x] 所有活动 DataGrid 的操作列预览入口、首列只读文本、32px 图标按钮与 More 危险项顺序
 - [x] 操作列固定内容宽度；非溢出表格由首个业务列 `1fr` 吸收余量，表头与首个动作按标准内边距对齐，右侧无弹性空白
 - [x] Tabs、Select、Autocomplete、DatePicker 打开态
+- [x] 筛选 Disclosure 收起态不保留隐藏面板高度，展开态正常显示扩展字段
 - [x] 编辑弹窗远程引用多选：长标题省略、数量汇总、搜索/清空、受控选择、移动端视口边界与单选关闭行为
 - [x] 详情查看/编辑、指派、删除确认
 - [x] 详情 Modal 4xl/24px、secondary 查看区、tertiary DataGrid 表头、default 表体及固定列层级（四视口浅/深色）
 - [x] 新页面重载控制台 0 error
 - [x] 真实退出请求 200、base-aware 登录跳转、`current_user`/`auth_token` 清理
 
+## 2026-09-02 审计项目管理基准同步
+
+- [x] 目标基准切换为 `/Users/liuchenlong/Desktop/job/audit_project_manager`
+- [x] 固定浅色内容画布，移除主题按钮和主题持久化读取
+- [x] Sidebar 分组 Disclosure、移动 Sheet、用户 Dropdown 与通知 Navbar 保持 Pro compound API
+- [x] 应用切换改为 Pro ItemCard/ItemCardGroup/ScrollShadow 两列结构并保留搜索/分组计数
+- [x] 新增共享 `DataTable`、`FilterSelect`、`TableActionButton`，工作台筛选和分页接入共享层
+- [x] 所有操作列继续在首个操作位提供预览图标，首列不承担点击预览
+- [x] API、Subject/View、权限、路由、校验、保存回调和业务状态流未改
+
 ## 明确保留
 
 - [ ] 全仓旧组件扫描为零：未完成。未挂载历史 `src/pages/problem_rectification` 与 `src/catalyst-ui-kit` 仍保留，且不进入当前应用路由。

docs/xinyuan-design-system.md

 # 廉洁从业管理鑫元设计系统
 
-本文件约束 `/integrity_practice_management/` 的活动路由。唯一视觉和结构基准是已确认的“问题整改”应用；不得重新设计或在页面层覆盖 HeroUI 外观。
+本文件约束 `/integrity_practice_management/` 的活动路由。唯一视觉和结构基准是已确认的“审计项目管理”应用；不得重新设计或在页面层覆盖 HeroUI 外观。
 
 ## 来源与加载顺序
 
@@ -15,22 +15,28 @@ Inter 禁止通过 `src/tailwind.css` 导入。Tailwind v4 内容扫描必须排
 
 ## 组件合同
 
-- Shell：`@heroui-pro/react/sidebar`、`navbar`；桌面 offcanvas 真折叠，移动端 `Sidebar.Mobile`。
+- Shell：`@heroui-pro/react/sidebar`、`navbar`；桌面 offcanvas 真折叠，移动端 `Sidebar.Mobile`；导航分组首次进入时默认展开，用户仍可手动收起。
 - 全局操作：HeroUI Button/Tooltip/Dropdown；用户菜单的退出项调用真实登出回调。
-- 应用切换：严格使用 model_analysis 当前 HeroUI Modal + Card/Surface/Avatar/Chip 基准；最大 46rem x 42rem、28px inset、24px 圆角，桌面两列、移动端单列，间距 12px。分组来自 `site.group`，保持后端分组与组内顺序并显示真实数量；未分组应用进入“其他应用”，无配置时回退“全部应用”。API 有 Logo 时显示真实 Logo，无 Logo 时显示应用首字，当前应用只显示一个 accent Chip。
+- 应用切换：严格使用 `audit_project_manager` 当前 HeroUI Modal + Pro ItemCard/ItemCardGroup/ScrollShadow/Surface/Avatar/Chip 基准；最大 46rem x 42rem、28px inset、24px 圆角，桌面两列、移动端单列，间距 12px。分组来自 `site.group`，保持后端分组与组内顺序并显示真实数量；搜索按名称、描述和标识实时过滤；所有应用使用鑫元 Logo，当前应用只显示一个 accent Chip。
 - 数据视图：HeroUI Tabs；不手写 segmented/tab 外观。
-- 筛选：HeroUI Surface + SearchField/Autocomplete/DatePicker/Disclosure。没有业务配置的筛选不得添加。
-- 列表：HeroUI Pro DataGrid、EmptyState、ActionBar + HeroUI Pagination；分页固定沿用业务默认每页 10 条，不显示额外页容量选择器。首列只在真实横向溢出时固定且仅展示文本，详情入口统一为操作列首个预览图标。操作列宽度由 32px 动作按钮、8px 间距和标准单元格内边距计算，`minWidth/width/maxWidth` 必须一致；表格未横向溢出时首个业务列使用 `1fr` 吸收剩余宽度，操作列不得参与余量分配；仅在横向溢出时固定在右端。
+- 列表标题：除“自查底稿填写表”数据表外，其他列表在工具栏上方显示独立 `listTitle`；列表标题不得复用顶部栏路由文案。
+- 筛选：HeroUI Surface + SearchField/Autocomplete/DatePicker/Disclosure。没有业务配置的筛选不得添加；动态字段标签已说明字段含义时，控件 placeholder 使用简短动作提示（文本“请输入内容”、数字“请输入数值”、选择/引用“请选择”、日期按类型提示），禁止重复拼接“筛选+字段名”；后端显式配置的 placeholder 优先保留。
+- 筛选 Disclosure 收起时卸载扩展字段面板，不在 Surface 内保留隐藏 Grid 行；展开后再挂载扩展字段，避免收起态出现额外空白高度。
+- 列表：HeroUI Pro DataGrid、EmptyState、ActionBar + HeroUI Pagination；页容量选择器使用共享 HeroUI Autocomplete，弹层选项必须包含外层当前页容量，并与业务传入选项保持一致（例如 10/20/50/100），且必须隐藏搜索输入；切换后回到第一页并保留筛选/权限范围。首列只在真实横向溢出时固定且仅展示文本，详情入口统一为操作列首个预览图标。操作列宽度由 32px 动作按钮、8px 间距和标准单元格内边距计算，`minWidth/width/maxWidth` 必须一致；表格未横向溢出时首个业务列使用 `1fr` 吸收剩余空间，操作列不得参与余量分配；仅在横向溢出时固定在右端。
 - 行动作：1-3 项全部直出；4 项以上直出前两项和 More Dropdown；危险项排序最后。
-- Modal：详情/表单使用 HeroUI Modal；确认使用 AlertDialog；内容型详情使用 4xl/1088px、24px 圆角，查看态只允许一个 16px 圆角的 secondary Surface。嵌套 DataGrid 使用 20px 圆角，表头与固定表头使用 tertiary Surface，表体与固定单元格回到 default Surface，禁止表头与外层详情 Surface 使用同一层颜色。
-- 动态字段：Input、TextArea、Checkbox、Select、Autocomplete、DatePicker；附件使用 Pro DropZone。
+- Modal：详情/新增/编辑表单使用 HeroUI Modal，普通动态表单采用 4xl/1088px、居中、blur Backdrop、24px 圆角、标准 CloseTrigger 和可滚动 Body；字段按两列网格排列，长文本/选择字段跨列，Footer 固定为次级取消在左、主提交在右。确认使用 AlertDialog；查看态只允许一个 16px 圆角的 secondary Surface。嵌套 DataGrid 使用 20px 圆角，表头与固定表头使用 tertiary Surface，表体与固定单元格回到 default Surface，禁止表头与外层详情 Surface 使用同一层颜色。
+- 动态字段：Input、TextArea、Checkbox、Select、Autocomplete、DatePicker；附件使用 Pro DropZone。Autocomplete 长标题候选项必须允许内容收缩、省略，并为右侧选中标记保留固定空间。
 - View 标题：仅 `settings.shortTitle === true` 隐藏 Grid 的 title 展示列；Detail View 同配置隐藏记录副标题与 title 字段，Modal 功能标题始终存在。
 - View 权限：以稳定 `APPLICATION_NAME = integrity_practice_management` 定位授权，只读取 `user.applications[]` 中当前应用项目的 groups/roles/permissions；不得合并顶层身份或其他应用授权。Grid `viewAuth` 只控制 Tab 可见性；零可访问 Grid View 时禁止查询与操作，一个 View 时隐藏 Tabs。
 - Detail 字段权限：打开详情时加载 `GET /subject/:subjectName/view/:viewName` 的完整配置。当前 Detail 有有效 `auth` 或 `disableColumns` 时整套使用 Detail；两项均未配置或不存在实际 Detail 时整体回退打开它的 Grid。两套配置不合并、不逐字段回退；`disableColumns` 对所有用户始终只读，编辑入口只根据当前激活 Detail 展示字段计算。
-- 通知：Navbar 直接组合 `Badge.Anchor + Badge + Button + Tooltip`，Bell 位于主题按钮左侧；通知页使用平台真实接口和 HeroUI Tabs/SearchField/Pagination/Card。
+- 通知：Navbar 直接组合 `Badge.Anchor + Badge + Button + Tooltip`，Bell 位于全局动作区；通知页使用平台真实接口和 HeroUI Tabs/SearchField/Pagination/Card。
 - 文件：可编辑 file 字段统一使用 HeroUI Tabs、Autocomplete 和 Pro DropZone；材料中心选择及本地上传都只向业务草稿写 `{name,type,size,url}`。
-- 远程引用：使用 HeroUI `Popover.Root + Button + SearchField + controlled ListBox`。多选触发器固定 40px 高并只显示“已选择 N 项”，候选长标题单行省略且通过 `title` 暴露全文；弹层最大 24rem、移动端收敛到 `100vw - 24px`、列表最大 288px。多选后保持打开，单选后关闭，清空不改变原 ID 保存协议。
-- KPI/图表：仅在真实业务路由存在时使用 Pro KPI、PieChart、BarChart、ComposedChart、ChartTooltip；禁止 Card 数字卡或 ECharts 私有主题。
+- 远程引用：使用 HeroUI `Autocomplete`/`Popover.Root + Button + SearchField + controlled ListBox`。多选触发器固定 40px 高并只显示“已选择 N 项”，候选长标题单行省略且通过 `title` 暴露全文；弹层最大 24rem、移动端收敛到 `100vw - 24px`、列表最大 288px。多选后保持打开，单选后关闭；有值时显示官方 `Autocomplete.ClearButton`，清空分别回传空数组或原协议要求的空值，不改变 ID 保存协议。
+- KPI/图表：仅在真实业务路由存在时使用 Pro KPI、PieChart、BarChart、ComposedChart、ChartTooltip；当前七条业务路由无 KPI/图表，不制造测试模块。
+
+## 基准同步记录
+
+2026-09-02 已同步审计项目管理的固定浅色内容画布、深色 Sidebar、Disclosure 分组、移动 Sheet、应用切换 Pro ItemCard 结构、共享 DataTable/FilterSelect/ActionButton 和工作台筛选/分页布局。页面仍只负责布局 className，业务数据、回调和请求边界保持原实现。
 
 ## 业务和数据保护
 

src/app.js

 import '@/global.less';
 import '@/tailwind.css';
 import { defineApp } from 'umi';
-import { APPLICATION_BASE_PATH, THEME_STORAGE_KEY } from '@/config/application';
+import { APPLICATION_BASE_PATH } from '@/config/application';
 
 if (typeof document !== 'undefined') {
-  const storedTheme = window.localStorage?.getItem?.(THEME_STORAGE_KEY);
-  const theme = storedTheme === 'dark' ? 'dark' : 'light';
-  document.documentElement.classList.toggle('dark', theme === 'dark');
-  document.documentElement.classList.toggle('light', theme === 'light');
-  document.documentElement.dataset.theme = theme;
-  document.documentElement.style.colorScheme = theme;
+  document.documentElement.classList.remove('dark');
+  document.documentElement.classList.add('light');
+  document.documentElement.dataset.theme = 'light';
+  document.documentElement.style.colorScheme = 'light';
 }
 
 const appBasePath = String(

src/components/AppIcons.jsx

@@ -15,12 +15,10 @@ import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
 import FullscreenExitOutlined from '@ant-design/icons/FullscreenExitOutlined';
 import FullscreenOutlined from '@ant-design/icons/FullscreenOutlined';
 import LogoutOutlined from '@ant-design/icons/LogoutOutlined';
-import MoonOutlined from '@ant-design/icons/MoonOutlined';
 import ReloadOutlined from '@ant-design/icons/ReloadOutlined';
 import SendOutlined from '@ant-design/icons/SendOutlined';
 import SearchOutlined from '@ant-design/icons/SearchOutlined';
 import SettingOutlined from '@ant-design/icons/SettingOutlined';
-import SunOutlined from '@ant-design/icons/SunOutlined';
 import ToolOutlined from '@ant-design/icons/ToolOutlined';
 import UploadOutlined from '@ant-design/icons/UploadOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
@@ -67,7 +65,6 @@ export const FileText = withSize(FileTextOutlined);
 export const Fullscreen = withSize(FullscreenOutlined);
 export const FullscreenExit = withSize(FullscreenExitOutlined);
 export const LogOut = withSize(LogoutOutlined);
-export const Moon = withSize(MoonOutlined);
 export const More = withSize(MoreOutlined);
 export const Reload = withSize(ReloadOutlined);
 export const ArrowPathIcon = Reload;
@@ -75,7 +72,6 @@ export const Send = withSize(SendOutlined);
 export const Search = withSize(SearchOutlined);
 export const MagnifyingGlassIcon = Search;
 export const Settings = withSize(SettingOutlined);
-export const Sun = withSize(SunOutlined);
 export const Tool = withSize(ToolOutlined);
 export const Upload = withSize(UploadOutlined);
 export const Plus = withSize(PlusOutlined);

src/components/AppShell.jsx

-import { THEME_STORAGE_KEY } from '@/config/application';
 import { Sidebar } from '@heroui-pro/react/sidebar';
 import { Toast } from '@heroui/react';
-import { useLayoutEffect, useState } from 'react';
 import { history } from 'umi';
 import DashboardNavbar from './DashboardNavbar';
 import DashboardSidebar from './DashboardSidebar';
 
-function getInitialTheme() {
-  if (typeof window === 'undefined') return 'light';
-  try {
-    return window.localStorage.getItem(THEME_STORAGE_KEY) === 'dark' ? 'dark' : 'light';
-  } catch {
-    return 'light';
-  }
-}
-
 export default function AppShell({ children, notificationCount, notificationPath, open, onOpenChange, title, ...sidebarProps }) {
-  const [theme, setTheme] = useState(getInitialTheme);
-
-  useLayoutEffect(() => {
-    const root = document.documentElement;
-    root.classList.toggle('dark', theme === 'dark');
-    root.classList.toggle('light', theme === 'light');
-    root.dataset.theme = theme;
-    root.style.colorScheme = theme;
-    try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch {}
-  }, [theme]);
-
   return (
     <Sidebar.Provider
-      className={`template-dashboard-shell rc-app-shell ${theme}`}
+      className="template-dashboard-shell rc-app-shell light"
       collapsible="offcanvas"
       navigate={(href) => history.push(href)}
       open={open}
       onOpenChange={onOpenChange}
     >
-      <DashboardSidebar theme={theme} {...sidebarProps} />
+      <DashboardSidebar {...sidebarProps} />
       <Sidebar.Main className="app-main-glass rc-app-main">
         <DashboardNavbar
           notificationCount={notificationCount}
           onOpenNotifications={notificationPath ? () => history.push(notificationPath) : undefined}
-          theme={theme}
           title={title}
-          onThemeChange={setTheme}
         />
         <div className="app-shell-content-scroll min-h-0 flex-1 overflow-y-auto">
           <div className="rc-app-page">{children}</div>

src/components/DashboardNavbar.jsx

 import { Navbar } from '@heroui-pro/react/navbar';
 import { Sidebar, useSidebar } from '@heroui-pro/react/sidebar';
 import { Badge, Button, Tooltip } from '@heroui/react';
-import { Bell, Moon, SidebarPanel, Sun } from './AppIcons';
+import { Bell, SidebarPanel } from './AppIcons';
 
-export default function DashboardNavbar({ notificationCount = 0, onOpenNotifications, onThemeChange, theme, title }) {
+export default function DashboardNavbar({ notificationCount = 0, onOpenNotifications, title }) {
   const { isMobile, isOpen } = useSidebar();
-  const isDark = theme === 'dark';
-  const themeLabel = isDark ? '切换至浅色模式' : '切换至深色模式';
   const normalizedNotificationCount = Math.max(0, Number(notificationCount) || 0);
 
   return (
@@ -41,20 +39,6 @@ export default function DashboardNavbar({ notificationCount = 0, onOpenNotificat
             </Badge.Anchor>
             <Tooltip.Content>通知消息</Tooltip.Content>
           </Tooltip>
-          <Tooltip delay={0}>
-            <Button
-              isIconOnly
-              aria-label={themeLabel}
-              aria-pressed={isDark}
-              className="app-navbar-icon-button rc-navbar-icon-button"
-              size="sm"
-              variant="ghost"
-              onPress={() => onThemeChange(isDark ? 'light' : 'dark')}
-            >
-              {isDark ? <Sun size={16} /> : <Moon size={16} />}
-            </Button>
-            <Tooltip.Content>{themeLabel}</Tooltip.Content>
-          </Tooltip>
         </div>
       </Navbar.Header>
     </Navbar>

src/components/DashboardSidebar.jsx

-import xyLogoRed from '@/assets/xy-logo-red.png';
 import xyLogoWhite from '@/assets/xy-logo-white.png';
 import { APPLICATION_DISPLAY_NAME } from '@/config/application';
-import { Sidebar } from '@heroui-pro/react/sidebar';
-import { Avatar, Button, Dropdown, Label, Tooltip } from '@heroui/react';
-import { AppGrid, LogOut } from './AppIcons';
+import { Sheet } from '@heroui-pro/react';
+import { Sidebar, useSidebar } from '@heroui-pro/react/sidebar';
+import { Avatar, Button, Disclosure, Dropdown, Label } from '@heroui/react';
+import { AppGrid, ChevronDown, LogOut } from './AppIcons';
 
 function getUserDisplay(userInfo) {
   const displayName = userInfo?.display_name || userInfo?.username || '当前用户';
   const username = userInfo?.username || userInfo?.email || '已登录';
+
   return {
     displayName,
     username,
@@ -17,22 +18,39 @@ function getUserDisplay(userInfo) {
 
 function SidebarUserMenu({ userInfo, onLogout }) {
   const user = getUserDisplay(userInfo);
+
   return (
     <Dropdown>
-      <Dropdown.Trigger aria-label="打开用户菜单" className="app-sidebar-user-trigger rc-sidebar-user-trigger">
+      <Dropdown.Trigger
+        aria-label="打开用户菜单"
+        className="app-sidebar-user-trigger rc-sidebar-user-trigger"
+      >
         <Avatar className="app-sidebar-user-avatar rc-sidebar-avatar">
-          {userInfo?.avatar ? <Avatar.Image alt={user.displayName} src={userInfo.avatar} /> : null}
+          {userInfo?.avatar ? (
+            <Avatar.Image alt={user.displayName} src={userInfo.avatar} />
+          ) : null}
           <Avatar.Fallback>{user.initials}</Avatar.Fallback>
         </Avatar>
-        <span className="app-sidebar-user-copy rc-sidebar-user-copy" data-sidebar="label">
+        <span
+          className="app-sidebar-user-copy rc-sidebar-user-copy"
+          data-sidebar="label"
+        >
           <span className="app-sidebar-user-name">{user.displayName}</span>
           <span className="app-sidebar-user-description">{user.username}</span>
         </span>
       </Dropdown.Trigger>
       <Dropdown.Popover placement="top start">
-        <Dropdown.Menu aria-label="用户菜单" onAction={(key) => key === 'logout' && onLogout?.()}>
+        <Dropdown.Menu
+          aria-label="用户菜单"
+          onAction={(key) => {
+            if (key === 'logout') onLogout?.();
+          }}
+        >
           <Dropdown.Item id="logout" textValue="退出登录" variant="danger">
-            <div className="rc-sidebar-user-menu-item"><Label>退出登录</Label><LogOut size={14} /></div>
+            <div className="rc-sidebar-user-menu-item">
+              <Label>退出登录</Label>
+              <LogOut size={14} />
+            </div>
           </Dropdown.Item>
         </Dropdown.Menu>
       </Dropdown.Popover>
@@ -40,59 +58,151 @@ function SidebarUserMenu({ userInfo, onLogout }) {
   );
 }
 
-function SidebarContents({ menuGroups, onLogout, onOpenApplicationSwitcher, pathname, userInfo }) {
+function SidebarContents({
+  menuGroups,
+  onLogout,
+  onOpenApplicationSwitcher,
+  pathname,
+  userInfo,
+}) {
+  const renderMenu = (group) => (
+    <Sidebar.Menu aria-label={group.title}>
+      {group.items.map((item) => {
+        const Icon = item.icon;
+        return (
+          <Sidebar.MenuItem
+            href={item.path}
+            isCurrent={pathname === item.path}
+            key={item.path}
+            textValue={item.name}
+            tooltip={item.name}
+          >
+            <Sidebar.MenuIcon>
+              <Icon size={16} />
+            </Sidebar.MenuIcon>
+            <Sidebar.MenuLabel>{item.name}</Sidebar.MenuLabel>
+          </Sidebar.MenuItem>
+        );
+      })}
+    </Sidebar.Menu>
+  );
+
+  const renderGroup = (group) => {
+    const GroupIcon = group.icon;
+
+    return (
+      <Sidebar.Group key={group.title}>
+        <Disclosure defaultExpanded>
+          <Disclosure.Heading>
+            <Sidebar.GroupLabel>
+              <Disclosure.Trigger className="flex w-full min-w-0 items-center gap-2 text-left">
+                {GroupIcon ? <GroupIcon size={16} /> : null}
+                <span className="min-w-0 flex-1 truncate">{group.title}</span>
+                <Disclosure.Indicator>
+                  <ChevronDown size={14} />
+                </Disclosure.Indicator>
+              </Disclosure.Trigger>
+            </Sidebar.GroupLabel>
+          </Disclosure.Heading>
+          <Disclosure.Content>
+            <Disclosure.Body>{renderMenu(group)}</Disclosure.Body>
+          </Disclosure.Content>
+        </Disclosure>
+      </Sidebar.Group>
+    );
+  };
+
   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 rc-sidebar-logo--light" src={xyLogoRed} />
-            <img alt="鑫元" className="rc-sidebar-logo rc-sidebar-logo--dark" src={xyLogoWhite} />
+            <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">{APPLICATION_DISPLAY_NAME}</span>
+          <div
+            className="app-sidebar-brand-main rc-sidebar-brand-main"
+            data-sidebar="label"
+          >
+            <span className="app-sidebar-title rc-sidebar-title">
+              {APPLICATION_DISPLAY_NAME}
+            </span>
           </div>
-          <div className="app-sidebar-app-switcher rc-sidebar-app-switcher" data-sidebar="label">
-            <Tooltip delay={0}>
-              <Button isIconOnly aria-label="切换应用" className="app-sidebar-app-trigger rc-sidebar-app-trigger" size="sm" variant="ghost" onPress={onOpenApplicationSwitcher}>
-                <AppGrid size={16} />
-              </Button>
-              <Tooltip.Content>切换应用</Tooltip.Content>
-            </Tooltip>
+          <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) => (
-          <Sidebar.Group key={group.title}>
-            {group.showLabel !== false ? <Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel> : null}
-            <Sidebar.Menu aria-label={group.title}>
-              {group.items.map((item) => {
-                const Icon = item.icon;
-                return (
-                  <Sidebar.MenuItem href={item.path} isCurrent={pathname === item.path} key={item.path} textValue={item.name} tooltip={item.name}>
-                    <Sidebar.MenuIcon><Icon size={16} /></Sidebar.MenuIcon>
-                    <Sidebar.MenuLabel>{item.name}</Sidebar.MenuLabel>
-                  </Sidebar.MenuItem>
-                );
-              })}
-            </Sidebar.Menu>
-          </Sidebar.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>
     </>
   );
 }
 
+function AccessibleMobileSidebar(props) {
+  const { isMobile, isMobileOpen, setMobileOpen, side } = useSidebar();
+
+  if (!isMobile) {
+    return null;
+  }
+
+  return (
+    <Sheet.Root
+      isOpen={isMobileOpen}
+      placement={side}
+      onOpenChange={setMobileOpen}
+    >
+      <Sheet.Backdrop variant="blur">
+        <Sheet.Content className="sidebar__mobile-sheet">
+          <Sheet.Dialog
+            aria-label={`${APPLICATION_DISPLAY_NAME}导航`}
+            className="sidebar__mobile-dialog"
+          >
+            <div
+              className="sidebar__mobile app-sidebar-glass rc-mobile-sidebar"
+              data-slot="sidebar-mobile"
+            >
+              <SidebarContents {...props} />
+            </div>
+          </Sheet.Dialog>
+        </Sheet.Content>
+      </Sheet.Backdrop>
+    </Sheet.Root>
+  );
+}
+
 export default function DashboardSidebar(props) {
   return (
     <>
-      <Sidebar className="app-sidebar-glass rc-sidebar"><SidebarContents {...props} /></Sidebar>
-      <Sidebar.Mobile className="app-sidebar-glass rc-mobile-sidebar">
-        <h2 className="sr-only" slot="title">{APPLICATION_DISPLAY_NAME}导航</h2>
+      <Sidebar className="app-sidebar-glass rc-sidebar">
         <SidebarContents {...props} />
-      </Sidebar.Mobile>
+      </Sidebar>
+      <AccessibleMobileSidebar {...props} />
     </>
   );
 }

src/components/FilterSelect.jsx

+import XinyuanAutocomplete from '@/components/XinyuanAutocomplete';
+import { useMemo } from 'react';
+
+function normalizeOption(option) {
+  if (option && typeof option === 'object') {
+    return {
+      label: String(option.label ?? option.value ?? ''),
+      value: String(option.value ?? ''),
+      disabled: Boolean(option.disabled),
+    };
+  }
+
+  return {
+    label: String(option ?? ''),
+    value: String(option ?? ''),
+    disabled: false,
+  };
+}
+
+export default function FilterSelect({
+  'aria-label': ariaLabel,
+  className,
+  disabled = false,
+  emptyText = '暂无可选项',
+  onChange,
+  options = [],
+  placeholder = '请选择',
+  value = '',
+  variant,
+}) {
+  const normalizedOptions = useMemo(
+    () =>
+      options.map(normalizeOption).map((option) => ({
+        ...option,
+        id: option.value,
+        isDisabled: option.disabled,
+      })).filter((option) => option.value !== ''),
+    [options],
+  );
+  const selectedValue = String(value ?? '');
+  const selectedOption = normalizedOptions.find(
+    (option) => option.value === selectedValue,
+  );
+  const selectedKey = selectedValue === '' ? null : selectedValue;
+
+  return (
+    <XinyuanAutocomplete
+      aria-label={ariaLabel || placeholder}
+      className={className}
+      isDisabled={disabled}
+      isClearable
+      emptyText={emptyText}
+      options={normalizedOptions}
+      placeholder={placeholder}
+      selectedKey={selectedKey}
+      variant={variant}
+      onClear={() => onChange?.('')}
+      onSelectionChange={(key) => {
+        const nextValue = String(key ?? '');
+        onChange?.(nextValue);
+      }}
+      valueText={selectedOption?.label || placeholder}
+    />
+  );
+}

src/components/ReferenceSearchSelect.jsx

 import XinyuanAutocomplete from '@/components/XinyuanAutocomplete';
 import { queryRecords } from '@/services/DataService';
-import { Button, Label } from '@heroui/react';
+import { Label } from '@heroui/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 const DEFAULT_ID_LOOKUP_CHUNK_SIZE = 50;
@@ -574,27 +574,22 @@ export default function ReferenceSearchSelect({
       errorText={error}
       inputValue={query}
       isDisabled={disabled}
+      isClearable={allowClear}
       isLoading={loading}
       isOpen={active}
       options={menuOptions}
       placement={optionsAnchor || 'bottom start'}
       placeholder={placeholder}
-      popoverHeader={allowClear ? (
-        <div className="flex justify-end px-3 pb-1">
-          <Button size="sm" variant="tertiary" onPress={clearSelection}>
-            清空
-          </Button>
-        </div>
-      ) : null}
       searchPlaceholder={placeholder}
       selectionMode={multiple ? 'multiple' : 'single'}
       shouldFilter={false}
       valueText={displayText}
       variant={variant}
       onInputChange={setQuery}
+      onClear={clearSelection}
       onOpenChange={handleOpenChange}
       renderOption={(option) => (
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1 overflow-hidden">
           <Label className="block truncate" title={option.label}>
             {option.label}
           </Label>

src/components/TableActionButton.jsx

+import { Button, Tooltip } from '@heroui/react';
+import { Close, Delete, Edit, Eye, More } from '@/components/AppIcons';
+
+const ACTION_ICON_CLASS = 'grid size-4 shrink-0 place-items-center !leading-none [&>svg]:!m-0 [&>svg]:block [&>svg]:!size-4';
+
+const ICON_BY_ACTION = {
+  view: Eye,
+  edit: Edit,
+  delete: Delete,
+  close: Close,
+  more: More,
+};
+
+export function TableActionButton({ icon: Icon, label, tone, isDisabled, onPress, className = '' }) {
+  const ActionIcon = Icon || ICON_BY_ACTION[tone] || Eye;
+  const variant = tone === 'delete' ? 'danger-soft' : 'tertiary';
+  return (
+    <Tooltip delay={0}>
+      <Button
+        isIconOnly
+        aria-label={label}
+        className={`grid !size-8 shrink-0 place-items-center p-0 ${className}`.trim()}
+        isDisabled={isDisabled}
+        size="sm"
+        variant={variant}
+        onPress={onPress}
+      >
+        <ActionIcon aria-hidden="true" className={ACTION_ICON_CLASS} size={16} />
+      </Button>
+      <Tooltip.Content>{label}</Tooltip.Content>
+    </Tooltip>
+  );
+}
+
+export function TableActionGroup({ children, className = '' }) {
+  return <div className={`flex flex-nowrap items-center justify-start gap-2 whitespace-nowrap ${className}`.trim()}>{children}</div>;
+}
+
+export { ACTION_ICON_CLASS };

src/components/XinyuanAutocomplete.jsx

@@ -39,11 +39,13 @@ export default function XinyuanAutocomplete({
   fullWidth = true,
   inputValue,
   isDisabled = false,
+  isClearable = false,
   isLoading = false,
   isOpen,
   isRequired = false,
   name,
   onInputChange,
+  onClear,
   onOpenChange,
   onSelectionChange,
   options = [],
@@ -52,6 +54,7 @@ export default function XinyuanAutocomplete({
   popoverHeader,
   renderOption,
   searchPlaceholder = '输入关键词搜索',
+  showSearch = true,
   selectedKey,
   selectedKeys,
   selectionMode = 'single',
@@ -101,6 +104,7 @@ export default function XinyuanAutocomplete({
       isOpen={isOpen}
       isRequired={isRequired}
       name={name}
+      onClear={onClear}
       selectionMode={isMultiple ? 'single' : selectionMode}
       variant={variant}
       onOpenChange={onOpenChange}
@@ -115,6 +119,11 @@ export default function XinyuanAutocomplete({
             {resolvedValueText}
           </span>
         </Autocomplete.Value>
+        {isClearable ? (
+          <Autocomplete.ClearButton
+            aria-label={`清除${ariaLabel || placeholder}`}
+          />
+        ) : null}
         <Autocomplete.Indicator>
           <ChevronDown size={16} style={FIELD_SUFFIX_ICON_STYLE} />
         </Autocomplete.Indicator>
@@ -126,21 +135,23 @@ export default function XinyuanAutocomplete({
           onInputChange={onInputChange}
         >
           {popoverHeader}
-          <SearchField
-            aria-label={searchPlaceholder}
-            fullWidth
-            variant={variant}
-          >
-            <SearchField.Group>
-              <SearchField.SearchIcon>
-                <Search size={16} />
-              </SearchField.SearchIcon>
-              <SearchField.Input autoFocus placeholder={searchPlaceholder} />
-              <SearchField.ClearButton aria-label="清空搜索">
-                <Close size={14} />
-              </SearchField.ClearButton>
-            </SearchField.Group>
-          </SearchField>
+          {showSearch ? (
+            <SearchField
+              aria-label={searchPlaceholder}
+              fullWidth
+              variant={variant}
+            >
+              <SearchField.Group>
+                <SearchField.SearchIcon>
+                  <Search size={16} />
+                </SearchField.SearchIcon>
+                <SearchField.Input autoFocus placeholder={searchPlaceholder} />
+                <SearchField.ClearButton aria-label="清空搜索">
+                  <Close size={14} />
+                </SearchField.ClearButton>
+              </SearchField.Group>
+            </SearchField>
+          ) : null}
           <ListBox
             aria-label={ariaLabel || placeholder}
             dependencies={[
@@ -162,6 +173,7 @@ export default function XinyuanAutocomplete({
 
               return (
                 <ListBox.Item
+                  className="min-w-0"
                   id={option.id}
                   isDisabled={option.isDisabled}
                   isSelected={isSelected}
@@ -170,14 +182,14 @@ export default function XinyuanAutocomplete({
                   {renderOption ? (
                     renderOption(option)
                   ) : (
-                    <Label className="truncate" title={option.label}>
+                    <Label className="min-w-0 flex-1 truncate" title={option.label}>
                       {option.label}
                     </Label>
                   )}
                   {selectionMode === 'multiple' ? (
                     <span
                       aria-hidden="true"
-                      className="ml-auto inline-flex w-5 justify-center text-foreground"
+                      className="ml-auto inline-flex w-5 shrink-0 justify-center text-foreground"
                     >
                       {isSelected ? <Check size={14} /> : null}
                     </span>

src/config/application.js

@@ -3,7 +3,6 @@ export const APPLICATION_NAME = 'integrity_practice_management';
 export const APPLICATION_ROUTE_NAME = APPLICATION_NAME;
 export const AUTHORIZATION_APPLICATION_NAME = APPLICATION_NAME;
 export const APPLICATION_BASE_PATH = `/${APPLICATION_NAME}/`;
-export const THEME_STORAGE_KEY = 'xinyuan_color_theme';
 
 export const ROUTE_TITLES = Object.freeze({
   '/self_check_the_results_of_the_working_draft': '自查底稿填写表',

src/design-system/theme.css

@@ -11,38 +11,37 @@
 [data-theme="light"],
 [data-theme="default"] {
   /* Theme Colors (Light Mode) */
-  --accent: oklch(45.32% 0.1661 27.03);
+  --accent: oklch(57.14% 0.2156 29.20);
   --accent-foreground: oklch(99.11% 0 0);
-  --background: oklch(97.02% 0.0045 27.03);
-  --border: oklch(90.00% 0.0045 27.03);
+  --background: oklch(97.02% 0.0000 29.20);
+  --border: oklch(90.00% 0.0000 29.20);
   --danger: oklch(45.32% 0.1661 27.03);
   --danger-foreground: oklch(99.11% 0 0);
-  /* HeroUI control aliases: primary = L1, secondary = L2. */
-  --default: var(--surface-secondary);
-  --default-foreground: var(--surface-secondary-foreground);
-  --field-background: var(--surface);
+  --default: oklch(94.00% 0.0000 29.20);
+  --default-foreground: oklch(21.03% 0.0059 29.20);
+  --field-background: oklch(100.00% 0.0000 29.20);
   --field-border: transparent;
-  --field-foreground: var(--surface-foreground);
-  --field-placeholder: oklch(55.17% 0.0090 27.03);
-  --focus: oklch(45.32% 0.1661 27.03);
-  --foreground: oklch(21.03% 0.0045 27.03);
-  --muted: oklch(55.17% 0.0090 27.03);
-  --overlay: var(--surface);
-  --overlay-foreground: var(--surface-foreground);
-  --scrollbar: oklch(87.10% 0.0045 27.03);
-  --segment: oklch(100.00% 0.0045 27.03);
-  --segment-foreground: oklch(21.03% 0.0045 27.03);
-  --separator: oklch(92.00% 0.0045 27.03);
-  --success: oklch(73.29% 0.1952 123.59);
-  --success-foreground: oklch(21.03% 0.0059 123.59);
-  --surface: oklch(100.00% 0.0022 27.03);
-  --surface-foreground: oklch(21.03% 0.0045 27.03);
-  --surface-secondary: oklch(95.24% 0.0036 27.03);
-  --surface-secondary-foreground: oklch(21.03% 0.0045 27.03);
-  --surface-tertiary: oklch(93.73% 0.0036 27.03);
-  --surface-tertiary-foreground: oklch(21.03% 0.0045 27.03);
-  --warning: oklch(78.19% 0.1599 45.11);
-  --warning-foreground: oklch(21.03% 0.0059 45.11);
+  --field-foreground: oklch(21.03% 0.0000 29.20);
+  --field-placeholder: oklch(55.17% 0.0000 29.20);
+  --focus: oklch(57.14% 0.2156 29.20);
+  --foreground: oklch(21.03% 0.0000 29.20);
+  --muted: oklch(55.17% 0.0000 29.20);
+  --overlay: oklch(100.00% 0.0000 29.20);
+  --overlay-foreground: oklch(21.03% 0.0000 29.20);
+  --scrollbar: oklch(87.10% 0.0000 29.20);
+  --segment: oklch(100.00% 0.0000 29.20);
+  --segment-foreground: oklch(21.03% 0.0000 29.20);
+  --separator: oklch(92.00% 0.0000 29.20);
+  --success: oklch(73.29% 0.1935 123.85);
+  --success-foreground: oklch(21.03% 0.0059 123.85);
+  --surface: oklch(100.00% 0.0000 29.20);
+  --surface-foreground: oklch(21.03% 0.0000 29.20);
+  --surface-secondary: oklch(95.24% 0.0000 29.20);
+  --surface-secondary-foreground: oklch(21.03% 0.0000 29.20);
+  --surface-tertiary: oklch(93.73% 0.0000 29.20);
+  --surface-tertiary-foreground: oklch(21.03% 0.0000 29.20);
+  --warning: oklch(78.19% 0.1585 45.37);
+  --warning-foreground: oklch(21.03% 0.0059 45.37);
 
   /* Border Radius */
   --radius: 0.5rem;
@@ -51,42 +50,90 @@
   /* Font Family */
   /* Make sure to load Inter font in your app */
   --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-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-item-selected-foreground: oklch(99% 0.002 255);
+  --xinyuan-sidebar-focus: oklch(78% 0.105 29.20);
+
+  /*
+   * ECharts is the required chart renderer for Xinyuan applications.
+   * Ant Design remains the icon source. Resolve these CSS variables to
+   * concrete colors before assigning them to an ECharts option object.
+   */
+  /* First pass: red -> pink -> orange -> yellow -> blue -> purple -> cyan -> neutral. */
+  --xinyuan-chart-1: #991b1b;
+  --xinyuan-chart-2: #db2777;
+  --xinyuan-chart-3: #ea580c;
+  --xinyuan-chart-4: #eab308;
+  --xinyuan-chart-5: #1d4ed8;
+  --xinyuan-chart-6: #7e22ce;
+  --xinyuan-chart-7: #0891b2;
+  --xinyuan-chart-8: #475569;
+  /* Second pass: stronger/lighter companions for charts with more series. */
+  --xinyuan-chart-9: #dc2626;
+  --xinyuan-chart-10: #ec4899;
+  --xinyuan-chart-11: #f97316;
+  --xinyuan-chart-12: #facc15;
+  --xinyuan-chart-13: #60a5fa;
+  --xinyuan-chart-14: #a855f7;
+  --xinyuan-chart-15: #06b6d4;
+  --xinyuan-chart-16: #1e293b;
+  --xinyuan-chart-sector-gap: var(--surface);
+  --xinyuan-chart-sector-radius: 10px;
+  --xinyuan-chart-grid: #e8e8e8;
+  --xinyuan-chart-axis: #737373;
+  --xinyuan-chart-label: #737373;
+  --xinyuan-chart-tooltip-background: #ffffff;
+  --xinyuan-chart-tooltip-border: #dedede;
+  --xinyuan-chart-tooltip-foreground: #222222;
+  --xinyuan-chart-tooltip-shadow: 0 16px 40px rgb(15 23 42 / 14%);
+  --xinyuan-chart-legend-font-size: 0.75rem;
+  --xinyuan-chart-legend-line-height: 1rem;
 }
 
 .dark,
 [data-theme="dark"] {
   color-scheme: dark;
   /* Theme Colors (Dark Mode) */
-  --accent: oklch(45.32% 0.1661 27.03);
+  --accent: oklch(57.14% 0.2156 29.20);
   --accent-foreground: oklch(99.11% 0 0);
-  --background: oklch(12.00% 0.0045 27.03);
-  --border: oklch(28.00% 0.0045 27.03);
-  --danger: oklch(62.00% 0.1600 27.03);
+  --background: oklch(12.00% 0.0000 29.20);
+  --border: oklch(28.00% 0.0000 29.20);
+  --danger: oklch(62% 0.16 27.03);
   --danger-foreground: oklch(99.11% 0 0);
-  /* HeroUI control aliases: primary = L1, secondary = L2. */
-  --default: var(--surface-secondary);
-  --default-foreground: var(--surface-secondary-foreground);
-  --field-background: var(--surface);
+  --default: oklch(27.40% 0.0000 29.20);
+  --default-foreground: oklch(99.11% 0 0);
+  --field-background: oklch(21.03% 0.0000 29.20);
   --field-border: transparent;
-  --field-foreground: var(--surface-foreground);
-  --field-placeholder: oklch(70.50% 0.0090 27.03);
-  --focus: oklch(45.32% 0.1661 27.03);
-  --foreground: oklch(99.11% 0.0045 27.03);
-  --muted: oklch(70.50% 0.0090 27.03);
-  --overlay: var(--surface);
-  --overlay-foreground: var(--surface-foreground);
-  --scrollbar: oklch(70.50% 0.0045 27.03);
-  --segment: oklch(39.64% 0.0045 27.03);
-  --segment-foreground: oklch(99.11% 0.0045 27.03);
-  --separator: oklch(25.00% 0.0045 27.03);
-  --success: oklch(73.29% 0.1952 123.59);
-  --success-foreground: oklch(21.03% 0.0059 123.59);
-  --surface: oklch(21.03% 0.0090 27.03);
-  --surface-foreground: oklch(99.11% 0.0045 27.03);
-  --surface-secondary: oklch(25.70% 0.0067 27.03);
-  --surface-secondary-foreground: oklch(99.11% 0.0045 27.03);
-  --surface-tertiary: oklch(27.21% 0.0067 27.03);
-  --surface-tertiary-foreground: oklch(99.11% 0.0045 27.03);
-  --warning: oklch(82.03% 0.1400 49.12);
-  --warning-foreground: oklch(21.03% 0.0059 49.12);
+  --field-foreground: oklch(99.11% 0.0000 29.20);
+  --field-placeholder: oklch(70.50% 0.0000 29.20);
+  --focus: oklch(57.14% 0.2156 29.20);
+  --foreground: oklch(99.11% 0.0000 29.20);
+  --muted: oklch(70.50% 0.0000 29.20);
+  --overlay: oklch(21.03% 0.0000 29.20);
+  --overlay-foreground: oklch(99.11% 0.0000 29.20);
+  --scrollbar: oklch(70.50% 0.0000 29.20);
+  --segment: oklch(39.64% 0.0000 29.20);
+  --segment-foreground: oklch(99.11% 0.0000 29.20);
+  --separator: oklch(25.00% 0.0000 29.20);
+  --success: oklch(73.29% 0.1935 123.85);
+  --success-foreground: oklch(21.03% 0.0059 123.85);
+  --surface: oklch(21.03% 0.0000 29.20);
+  --surface-foreground: oklch(99.11% 0.0000 29.20);
+  --surface-secondary: oklch(25.70% 0.0000 29.20);
+  --surface-secondary-foreground: oklch(99.11% 0.0000 29.20);
+  --surface-tertiary: oklch(27.21% 0.0000 29.20);
+  --surface-tertiary-foreground: oklch(99.11% 0.0000 29.20);
+  --warning: oklch(82.03% 0.1388 49.38);
+  --warning-foreground: oklch(21.03% 0.0059 49.38);
 }

src/design-system/tokens.css

@@ -2,9 +2,7 @@
 .light,
 .default,
 [data-theme='light'],
-[data-theme='default'],
-.dark,
-[data-theme='dark'] {
+[data-theme='default'] {
   /* Xinyuan aliases and extension tokens. HeroUI core tokens are owned by theme.css. */
   --rc-brand-primary: var(--accent);
   --rc-brand-light: color-mix(in oklab, var(--accent) 84%, white);
@@ -27,6 +25,17 @@
     var(--background)
   );
   --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. */
+  --rc-sidebar-background: var(--xinyuan-sidebar-background);
+  --rc-sidebar-border: var(--xinyuan-sidebar-border);
+  --rc-sidebar-foreground: var(--xinyuan-sidebar-foreground);
+  --rc-sidebar-muted: var(--xinyuan-sidebar-muted);
+  --rc-sidebar-item-hover: var(--xinyuan-sidebar-item-hover);
+  --rc-sidebar-item-selected: var(--xinyuan-sidebar-item-selected);
+  --rc-sidebar-item-selected-foreground: var(--xinyuan-sidebar-item-selected-foreground);
+  --rc-sidebar-focus: var(--xinyuan-sidebar-focus);
 
   --rc-font-sans: var(--font-sans);
   --rc-font-medium: 500;
@@ -45,6 +54,7 @@
 
   /* Page geometry only. Component appearance remains owned by HeroUI. */
   --rc-shell-inline-gutter: 3rem;
+  --rc-sidebar-width: 15rem;
   --rc-navbar-inline-padding: var(--rc-shell-inline-gutter);
   --rc-page-inline-start: var(--rc-shell-inline-gutter);
   --rc-page-inline-end: var(--rc-shell-inline-gutter);
@@ -58,10 +68,6 @@
   --rc-radius-control: 0.375rem;
   --rc-radius-container: 0.5rem;
   --rc-radius-overlay: 0.75rem;
-  --rc-radius-detail-surface: 1rem;
-  --rc-radius-data-grid: 1.25rem;
-  --rc-radius-modal: 1.5rem;
-  --rc-dialog-width-4xl: 68rem;
   --rc-motion-fast: 120ms;
   --rc-motion-normal: 180ms;
   --rc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
@@ -142,40 +148,28 @@
   );
 
   /* Data visualization only. Do not reuse UI status colors as a series palette. */
-  --rc-chart-1: oklch(45.32% 0.1661 27.03);
-  --rc-chart-2: oklch(56% 0.135 255);
-  --rc-chart-3: oklch(64% 0.11 220);
-  --rc-chart-4: oklch(56% 0.115 280);
-  --rc-chart-5: oklch(60% 0.095 200);
-  --rc-chart-6: oklch(70% 0.12 80);
-  --rc-chart-7: oklch(60% 0.1 295);
-  --rc-chart-8: oklch(57% 0.035 250);
+  --rc-chart-1: var(--xinyuan-chart-1);
+  --rc-chart-2: var(--xinyuan-chart-2);
+  --rc-chart-3: var(--xinyuan-chart-3);
+  --rc-chart-4: var(--xinyuan-chart-4);
+  --rc-chart-5: var(--xinyuan-chart-5);
+  --rc-chart-6: var(--xinyuan-chart-6);
+  --rc-chart-7: var(--xinyuan-chart-7);
+  --rc-chart-8: var(--xinyuan-chart-8);
+  --rc-chart-9: var(--xinyuan-chart-9);
+  --rc-chart-10: var(--xinyuan-chart-10);
+  --rc-chart-11: var(--xinyuan-chart-11);
+  --rc-chart-12: var(--xinyuan-chart-12);
+  --rc-chart-13: var(--xinyuan-chart-13);
+  --rc-chart-14: var(--xinyuan-chart-14);
+  --rc-chart-15: var(--xinyuan-chart-15);
+  --rc-chart-16: var(--xinyuan-chart-16);
   --rc-chart-primary: var(--rc-chart-1);
-  --rc-chart-risk: oklch(47% 0.145 27.03);
-  --rc-chart-warning: var(--rc-chart-6);
-  --rc-chart-positive: var(--rc-chart-2);
-  --rc-chart-comparison: var(--rc-chart-4);
+  --rc-chart-risk: var(--rc-chart-1);
+  --rc-chart-warning: var(--rc-chart-3);
+  --rc-chart-positive: var(--rc-chart-7);
+  --rc-chart-comparison: var(--rc-chart-5);
   --rc-chart-neutral: var(--rc-chart-8);
-  --rc-chart-legend-font-size: 0.75rem;
-  --rc-chart-legend-line-height: 1rem;
-}
-
-.dark,
-[data-theme='dark'] {
-  color-scheme: dark;
-  --rc-text-secondary: color-mix(
-    in oklab,
-    var(--foreground) 76%,
-    var(--background)
-  );
-  --rc-button-secondary-border: color-mix(
-    in oklab,
-    var(--foreground) 18%,
-    transparent
-  );
-  --rc-shadow-raised: 0 1px 2px rgb(0 0 0 / 24%),
-    0 8px 24px rgb(0 0 0 / 24%);
-  --rc-shadow-overlay: 0 16px 40px rgb(0 0 0 / 38%);
-  --rc-shadow-card: 0 1px 2px rgb(0 0 0 / 20%),
-    0 4px 12px rgb(0 0 0 / 18%);
+  --rc-chart-legend-font-size: var(--xinyuan-chart-legend-font-size);
+  --rc-chart-legend-line-height: var(--xinyuan-chart-legend-line-height);
 }

src/pages/RecordDetailDrawer/components/SubjectViewContent.jsx

 import clsx from 'clsx';
 import { EmptyState } from '@heroui-pro/react/empty-state';
 import { Surface } from '@heroui/react';
+import { EmptyStateSurface } from '@/components/DataTable';
 import TailwindEditableField from './TailwindEditableField';
 import {
   buildViewColumns,
@@ -12,20 +13,6 @@ const FIELD_LABEL_OVERRIDES = {
   problem_discovery_situation: '问题发现情况',
 };
 
-const FULL_WIDTH_FIELD_TYPES = new Set([
-  'long_text',
-  'rich_text',
-  'object',
-  'form',
-  'subject',
-  'file',
-  'reference',
-  'document',
-  'view',
-  'template',
-  'task',
-]);
-
 function getFieldName(fieldPath = '') {
   return String(fieldPath).replace(/^metadata\./, '').split('.').pop();
 }
@@ -53,6 +40,7 @@ export default function SubjectViewContent({
   editSessionId,
   mode = 'view',
   onFieldChange,
+  onFieldUpdate,
   onPendingLocalMaterialChange,
   onFieldValidation,
   readonly,
@@ -73,21 +61,27 @@ export default function SubjectViewContent({
     }
 
     return (
-      <EmptyState size="md">
-        <EmptyState.Header><EmptyState.Title>暂无可显示的字段</EmptyState.Title></EmptyState.Header>
-      </EmptyState>
+      <Surface className="rc-workspace-module w-full min-w-0 p-4" variant="tertiary">
+        <EmptyStateSurface>
+          <EmptyState size="md">
+            <EmptyState.Header>
+              <EmptyState.Description className="rc-empty-state-message">
+                暂无可显示的字段
+              </EmptyState.Description>
+            </EmptyState.Header>
+          </EmptyState>
+        </EmptyStateSurface>
+      </Surface>
     );
   }
 
   const fields = (
     <section
-      className="grid min-w-0 grid-cols-1 gap-x-8 gap-y-2 md:grid-cols-2"
+      className="grid min-w-0 grid-cols-1 gap-y-2"
     >
       {contentFields.map((field) => {
         const value = getFieldValue(editableRecord, field.field);
-        const fieldType = field.fieldDef?.type || 'text';
         const fieldLabel = getFieldLabel(field);
-        const isFullWidth = FULL_WIDTH_FIELD_TYPES.has(fieldType);
         const fieldDisabled = isFieldDisabled
           ? isFieldDisabled(field.field, view)
           : isFieldDisabledByView(field.field, view);
@@ -98,7 +92,6 @@ export default function SubjectViewContent({
             className={clsx(
               'min-w-0',
               minimal ? 'py-1' : 'py-3',
-              isFullWidth && 'md:col-span-2',
             )}
           >
             <div className={minimal ? 'sr-only' : 'text-sm font-medium text-muted'}>
@@ -121,6 +114,9 @@ export default function SubjectViewContent({
                     editSessionId,
                   )
                 }
+                onSave={onFieldUpdate
+                  ? (newValue) => onFieldUpdate(field.field, newValue, field.fieldDef)
+                  : undefined}
                 onValidationChange={onFieldValidation}
                 onPendingLocalMaterialChange={onPendingLocalMaterialChange}
                 readonly={readonly}
@@ -134,13 +130,5 @@ export default function SubjectViewContent({
     </section>
   );
 
-  if (mode === 'view' && !minimal) {
-    return (
-      <Surface className="px-5 py-2 sm:px-6 sm:py-3" variant="secondary">
-        {fields}
-      </Surface>
-    );
-  }
-
   return fields;
 }

src/pages/RecordDetailDrawer/components/TailwindEditableField.jsx

@@ -234,6 +234,7 @@ function UserSelector({ value, onChange, multiple, variant }) {
       aria-label="用户"
       emptyText="暂无用户"
       inputValue={keyword}
+      isClearable
       options={autocompleteOptions}
       placeholder="请选择用户"
       searchPlaceholder="搜索用户名或显示名"
@@ -242,9 +243,10 @@ function UserSelector({ value, onChange, multiple, variant }) {
       valueText={valueText || '请选择用户'}
       variant={variant}
       onInputChange={setKeyword}
+      onClear={() => onChange(multiple ? [] : null)}
       onSelectionChange={handleSelectionChange}
       renderOption={(option) => (
-        <span className="min-w-0">
+        <span className="min-w-0 flex-1 overflow-hidden">
           <Label className="block truncate">{option.label}</Label>
           <span className="block truncate text-xs text-muted">
             {option.description}
@@ -289,6 +291,8 @@ function FieldOptionSelect({ multiple, onChange, options, value, variant }) {
       selectionMode={multiple ? 'multiple' : 'single'}
       valueText={displayValue}
       variant={variant}
+      isClearable
+      onClear={() => onChange(multiple ? [] : '')}
     />
   );
 }

src/pages/RecordDetailDrawer/index.jsx

@@ -390,7 +390,7 @@ const RecordDetailDrawer = (props, ref) => {
         variant="blur"
       >
         <Modal.Container placement="center" scroll="inside" size={isFullscreen ? 'full' : 'lg'}>
-          <Modal.Dialog className={isFullscreen ? undefined : 'p-7 sm:max-w-[68rem]'}>
+          <Modal.Dialog className={isFullscreen ? 'bg-background' : 'bg-background p-7 sm:max-w-[68rem]'}>
             <div className="absolute right-7 top-7 z-10 flex items-center gap-2">
               {!minimalContent ? (
                 <Tooltip>
@@ -418,40 +418,39 @@ const RecordDetailDrawer = (props, ref) => {
               ) : null}
             </div>
 
-            <Modal.Header className="pr-16">
+            <Modal.Header className="shrink-0 pr-16">
               <Modal.Heading>{title || '记录详情'}</Modal.Heading>
               {!hideRecordTitle ? (
                 <div className="truncate text-sm text-muted" title={recordTitle}>
                   {loading ? '正在读取记录信息' : recordTitle}
                 </div>
               ) : null}
+              {detailViews.length > 1 ? (
+                <Tabs
+                  aria-label="详情视图"
+                  className="mt-3 w-fit max-w-full min-w-0"
+                  selectedKey={activeView?.name}
+                  variant="primary"
+                  onSelectionChange={setActiveTabKey}
+                >
+                  <Tabs.ListContainer className="w-fit max-w-full min-w-0">
+                    <Tabs.List className="w-max min-w-max">
+                      {detailViews.map((view) => (
+                        <Tabs.Tab
+                          className="w-auto min-w-max flex-none whitespace-nowrap"
+                          id={view.name}
+                          key={view.name}
+                        >
+                          {view.title || view.name}
+                          <Tabs.Indicator />
+                        </Tabs.Tab>
+                      ))}
+                    </Tabs.List>
+                  </Tabs.ListContainer>
+                </Tabs>
+              ) : null}
             </Modal.Header>
 
-            {detailViews.length > 1 ? (
-              <Tabs
-                aria-label="详情视图"
-                className="w-fit max-w-full min-w-0"
-                selectedKey={activeView?.name}
-                variant="secondary"
-                onSelectionChange={setActiveTabKey}
-              >
-                <Tabs.ListContainer className="w-fit max-w-full min-w-0">
-                  <Tabs.List className="w-max min-w-max">
-                    {detailViews.map((view) => (
-                      <Tabs.Tab
-                        className="w-auto min-w-max flex-none whitespace-nowrap"
-                        id={view.name}
-                        key={view.name}
-                      >
-                        {view.title || view.name}
-                        <Tabs.Indicator />
-                      </Tabs.Tab>
-                    ))}
-                  </Tabs.List>
-                </Tabs.ListContainer>
-              </Tabs>
-            ) : null}
-
             <Modal.Body>
               {loading ? (
                 <div className="flex min-h-48 items-center justify-center" role="status">

src/pages/integrity_practice_management/components/IntegrityPracticeMaterialField.jsx

@@ -308,6 +308,7 @@ export default function IntegrityPracticeMaterialField({
               errorText={materialsError}
               inputValue={keyword}
               isDisabled={uploading}
+              isClearable
               isLoading={materialsLoading}
               options={materialOptions}
               placeholder="请选择审计材料"
@@ -317,9 +318,13 @@ export default function IntegrityPracticeMaterialField({
               valueText={selectedValueText}
               variant="secondary"
               onInputChange={setKeyword}
+              onClear={() => {
+                setSelectedMaterialId(null);
+                onChange?.(multiple ? [] : null);
+              }}
               onSelectionChange={handleMaterialSelection}
               renderOption={(material) => (
-                <span className="min-w-0">
+                <span className="min-w-0 flex-1 overflow-hidden">
                   <Label className="block truncate" title={material.materialTitle}>
                     {material.materialTitle}
                   </Label>

src/pages/integrity_practice_management/integrityPracticeConfig.js

@@ -72,6 +72,7 @@ export const INTEGRITY_PRACTICE_SUBJECT_CONFIG = {
   },
   self_check_the_draft_template: {
     title: '自查底稿模版',
+    listTitle: '自查底稿模板列表',
     gridRecordConfig: {
       menuConfig: [
         { name: '编辑', action: 'integrityRiskManagerService.editDetail' },
@@ -82,10 +83,12 @@ export const INTEGRITY_PRACTICE_SUBJECT_CONFIG = {
   },
   self_check_the_working_draft: {
     title: '自查底稿项目',
+    listTitle: '自查底稿项目列表',
     gridRecordConfig: { menuConfig: [] },
   },
   statistical_table: {
     title: '廉洁从业规定落实情况统计表',
+    listTitle: '统计表记录',
     gridRecordConfig: {
       filterView: [],
       menuConfig: [
@@ -97,12 +100,14 @@ export const INTEGRITY_PRACTICE_SUBJECT_CONFIG = {
         {
           label: '导出统计表',
           execute: 'integrityRiskManagerService.exportIntegrityPracticeStatisticsTable',
+          tone: 'secondary',
         },
       ],
     },
   },
   self_inspection_submission_form: {
     title: '廉洁从业自查底稿',
+    listTitle: '自查底稿报送记录',
     gridRecordConfig: {
       menuConfig: [
         { name: '编辑', action: 'integrityRiskManagerService.editDetail' },
@@ -114,6 +119,7 @@ export const INTEGRITY_PRACTICE_SUBJECT_CONFIG = {
   },
   integrity_practice_report: {
     title: '廉洁从业报告生成',
+    listTitle: '廉洁从业报告记录',
     gridRecordConfig: {
       filterView: [],
       menuConfig: [
@@ -126,6 +132,7 @@ export const INTEGRITY_PRACTICE_SUBJECT_CONFIG = {
   },
   self_inspection_annual_submission_materials: {
     title: '历年报送材料',
+    listTitle: '历史报送材料记录',
     gridRecordConfig: {
       pagination: false,
       menuConfig: [

src/pages/integrity_practice_management/integrityPracticeWorkbenchService.js

@@ -174,7 +174,23 @@ export function buildSubjectFilterSchema(view, subject) {
     const fieldDef = column.fieldDef || {};
     const type = String(fieldDef.type || 'text').toLowerCase();
     const options = getSelectOptions(fieldDef);
-    return { key: column.field, field: column.field, label: column.label || fieldDef.label || column.field, type: type === 'select' && options.length ? 'select' : isDateFieldType(type) ? 'date' : isReferenceFieldType(type) && getReferenceSubjectName(fieldDef) ? 'reference' : 'text', options, fieldDef, placeholder: `筛选${column.label || fieldDef.label || column.field}` };
+    return {
+      key: column.field,
+      field: column.field,
+      label: column.label || fieldDef.label || column.field,
+      type: type === 'select' && options.length
+        ? 'select'
+        : isDateFieldType(type)
+          ? 'date'
+          : isReferenceFieldType(type) && getReferenceSubjectName(fieldDef)
+            ? 'reference'
+            : type === 'number'
+              ? 'number'
+              : 'text',
+      options,
+      fieldDef,
+      placeholder: column.placeholder,
+    };
   });
 }
 

src/pages/integrity_practice_management/notifications/NotificationListPage.jsx

@@ -317,6 +317,17 @@ export default function NotificationListPage() {
   return (
     <div className="rc-page-stack">
       <div className="rc-page-toolbar rc-page-toolbar-responsive">
+        <div className="rc-page-toolbar">
+          <h2 className="rc-section-title">通知记录</h2>
+          <Button
+            isDisabled={loading || unreadTotal === 0}
+            isLoading={busyKey === 'all'}
+            variant="secondary"
+            onPress={handleMarkAllRead}
+          >
+            全部已读
+          </Button>
+        </div>
         <Tabs
           className="w-fit max-w-full min-w-0"
           selectedKey={category}
@@ -337,14 +348,6 @@ export default function NotificationListPage() {
           </Tabs.ListContainer>
         </Tabs>
 
-        <Button
-          isDisabled={loading || unreadTotal === 0}
-          isLoading={busyKey === 'all'}
-          variant="secondary"
-          onPress={handleMarkAllRead}
-        >
-          全部已读
-        </Button>
       </div>
 
       <div className="rc-page-toolbar">