feat: complete xinyuan material center ui

docs/ui-architecture.md

@@ -21,10 +21,10 @@ upload field, confirmation dialog and application switcher. They expose current
 HeroUI selection/value/event contracts; page controllers adapt those values to
 existing material services.
 
-`Select`-shaped compatibility wrappers and page-local ECharts theme helpers are
+`Select`-shaped compatibility wrappers and page-local chart theme helpers are
 not part of the target architecture. Enum/reference fields use the current
-HeroUI Autocomplete compound model, while dashboards use HeroUI Pro KPI and
-chart compounds with the approved chart Tokens.
+HeroUI Autocomplete compound model, while dashboards use HeroUI Pro KPI and the
+shared `XinyuanEChart` ECharts adapter with approved chart Tokens.
 
 ## Dependency Source
 

docs/ui-migration-checklist.md

@@ -12,7 +12,7 @@ Status legend: `done`, `in progress`, `superseded`, `blocked`, `pending`.
 | Baseline login QA             | superseded  | Earlier viewport evidence predates the corrected problem-rectification login parity pass              |
 | Authoritative theme           | done        | Exact baseline `theme.css`, Xinyuan assets, Inter and app-only extension Tokens installed             |
 | Login                         | done        | Baseline structure, assets and approved 12px label / 24px field rhythm synchronized                    |
-| Shell                         | done        | Pro AppLayout/Sidebar/Navbar; desktop offcanvas plus an accessible Pro Sheet mobile sidebar            |
+| Shell                         | done        | Pro Sidebar.Provider/Sidebar/Navbar; fixed dark Sidebar, light content canvas, desktop offcanvas plus accessible mobile Sheet |
 | Application switcher          | done        | model_analysis parity; `/info -> site.group`, counts, empty-group filtering, 其他应用/全部应用 fallbacks, two-column grid |
 | Dashboard                     | done        | Pro KPI uses the approved 24px Card and 48px toned icon Surface; analytical modules follow the same radius contract |
 | Material archive filters      | done        | HeroUI Surface, Disclosure, InputGroup, Autocomplete and DatePicker compounds                          |
@@ -27,10 +27,10 @@ Status legend: `done`, `in progress`, `superseded`, `blocked`, `pending`.
 | Real-data-only states         | done        | Demo material/project fallbacks removed; empty/error states reflect the API                            |
 | Private visual CSS            | done        | Duplicate portable/app-token layers removed; approved shared shell/login baseline retained            |
 | Production build              | done        | `npm run build` completed after core migration                                                        |
-| Browser acceptance            | in progress | Four switcher viewports, dark theme, desktop/mobile sidebar and user menu pass; Autocomplete library warnings remain |
+| Browser acceptance            | in progress | 1440x900 and 390x844 shell/material flows pass; remaining warnings are HeroUI Autocomplete internal dialog labels |
 | Cross-app scope classification | done        | Real app name is 审计材料中心; notification-only rollout, full-feature items intentionally excluded                 |
 | Notification route             | done        | Independent `/notifications` page with message/todo, all/unread, search and fixed pagination                        |
-| Notification Navbar entry      | done        | HeroUI Badge.Anchor/Badge/Button/Tooltip, 36px Bell left of theme action, no Sidebar entry                           |
+| Notification Navbar entry      | done        | HeroUI Badge.Anchor/Badge/Button/Tooltip, 36px Bell action, no theme toggle or Sidebar entry                       |
 | Notification mutations         | done        | Existing query/count/read/action APIs; single/all read and `{notice_id}` dynamic actions preserved                  |
 | Notification link safety       | done        | Plain text content, base-aware same-app links, external new-window links and normalized login redirect              |
 | Notification browser acceptance | done       | Four required viewports in both themes; badge boundaries, actions, links, overflow and isolated console pass        |

docs/xinyuan-design-system.md

@@ -29,8 +29,8 @@ paths are not valid delivery mechanisms.
 - Primary brand: `#9E1B1B` through the authoritative `--accent` token.
 - Light identity: `xy-logo-red.png`.
 - Dark identity: `xy-logo-white.png`.
-- Root theme: `.light`/`.dark` plus matching `data-theme`.
-- Theme storage key: `xinyuan_color_theme`.
+- Root theme: the application shell is explicitly `.light`; the content canvas stays light while the Sidebar consumes the fixed dark split-shell tokens.
+- Theme switching is intentionally absent from the production Navbar.
 - Application display name: `审计材料中心` everywhere.
 
 ## Surface Hierarchy
@@ -92,8 +92,8 @@ IDs only. Dates are submitted as ISO 8601. `source_system` and
 
 ## Notification Center
 
-- The Bell is a 36px HeroUI icon Button immediately left of the theme action,
-  composed with `Tooltip`, `Badge.Anchor` and `Badge`.
+- The Bell is a 36px HeroUI icon Button in the Navbar action area, composed with
+  `Tooltip`, `Badge.Anchor` and `Badge`; no theme toggle is rendered.
 - Zero unread hides the Badge, 1-99 shows the real count, and values above 99
   display `99+` while retaining the real accessible count.
 - `/notifications` uses message/todo and all/unread HeroUI Tabs, HeroUI

docs/xinyuan-ui-audit.md

@@ -63,7 +63,7 @@ The authoritative references are `src/services/record-api.md`,
 
 ## Remaining UI Inventory
 
-Production routes contain no Catalyst, Headless UI, ECharts, visible native
+Production routes contain no Catalyst, Headless UI or visible native
 select/date/file controls, legacy UI compatibility imports or page-owned
 HeroUI appearance styles. The historical kit, unreachable workspace and unused
 decorative empty-state page were removed after production references reached
@@ -88,11 +88,12 @@ switcher grouping gap without changing its application source or navigation.
 
 ## Theme Audit
 
-- `src/design-system/theme.css` is byte-identical to the approved baseline.
+- `src/design-system/theme.css` retains the Xinyuan HeroUI tokens and now includes
+  the fixed dark Sidebar and ECharts chart tokens used by the approved baseline.
 - `tokens.css`, `shell.css` and the login contract in `tailwind.css` are exact
   copies of the approved `problem_rectification` shared baseline.
 - Inter weights and the stable red/white Xinyuan assets are loaded globally.
-- Official `@heroui-pro/react/css` loads before the exact Xinyuan theme and
+- Official `@heroui-pro/react/css` loads before the Xinyuan theme and
   extension Tokens. The temporary Pro CSS compatibility snapshot was removed.
 
 ## Browser Evidence

package-lock.json

@@ -29,6 +29,8 @@
         "clsx": "^2.1.1",
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.20",
+        "echarts": "^6.1.0",
+        "echarts-for-react": "^3.0.6",
         "embla-carousel": "^8.6.0",
         "embla-carousel-react": "^8.6.0",
         "jszip": "^3.10.1",
@@ -12642,6 +12644,36 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "license": "MIT"
     },
+    "node_modules/echarts": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.1.0.tgz",
+      "integrity": "sha512-q0yaFPggC9FUdsWH4blavRWFmxdrIodbkoKNAjJudAI6CA9gNPxHtV2RcZNEepZVlk4yvBYkOkbk6HIVpIyHZA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "6.1.0"
+      }
+    },
+    "node_modules/echarts-for-react": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-3.0.6.tgz",
+      "integrity": "sha512-4zqLgTGWS3JvkQDXjzkR1k1CHRdpd6by0988TWMJgnvDytegWLbeP/VNZmMa+0VJx2eD7Y632bi2JquXDgiGJg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "size-sensor": "^1.0.1"
+      },
+      "peerDependencies": {
+        "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0",
+        "react": "^15.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -23635,6 +23667,12 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
       "license": "MIT"
     },
+    "node_modules/size-sensor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.3.tgz",
+      "integrity": "sha512-+k9mJ2/rQMiRmQUcjn+qznch260leIXY8r4FyYKKyRBO/s5UoeMAHGkCJyE1R/4wrIhTJONfyloY55SkE7ve3A==",
+      "license": "ISC"
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -26605,6 +26643,21 @@
         "zod": "^3.18.0"
       }
     },
+    "node_modules/zrender": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.1.0.tgz",
+      "integrity": "sha512-oEGMDB6pOP2S6OwRR4PdVv610zrjnA3Bh+JnSG12fYJlBKjtNAoEb5fSUoCOOINlH96I2fU38/A2UpRKs67xYQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -31,6 +31,8 @@
     "clsx": "^2.1.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.20",
+    "echarts": "^6.1.0",
+    "echarts-for-react": "^3.0.6",
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "jszip": "^3.10.1",

src/components/DataTable.jsx

-import { Button, Chip, Pagination, Spinner, Tooltip } from "@heroui/react";
+import { Avatar, Button, Chip, Pagination, Spinner, Tooltip } from "@heroui/react";
 import { ActionBar } from "@heroui-pro/react/action-bar";
 import { DataGrid } from "@heroui-pro/react/data-grid";
 import { EmptyState } from "@heroui-pro/react/empty-state";
+import XinyuanAutocomplete from "@/components/XinyuanAutocomplete";
 import { useMemo } from "react";
 
 function resolveRowKey(row, index, getRowKey) {
@@ -239,13 +240,57 @@ export function DataTableTextPair({ primary, secondary, className = "" }) {
   );
 }
 
-export function DataTablePersonIdentity({ name, account, className = "" }) {
+function getPersonFallback(name) {
+  const normalized = String(name ?? "").trim();
+  if (!normalized || normalized === "-") {
+    return "?";
+  }
+  const compact = normalized.replace(/\s+/g, "");
+  if (/^[\u3400-\u9fff]/.test(compact)) {
+    return Array.from(compact)[0];
+  }
+  return Array.from(compact).slice(0, 2).join("").toUpperCase();
+}
+
+export function DataTablePersonIdentity({
+  name,
+  account,
+  secondary,
+  avatar,
+  className = "",
+}) {
+  const primaryText = String(name ?? "").trim() || "-";
+  const secondaryText = String(account ?? secondary ?? "").trim();
+
   return (
-    <DataTableTextPair
-      primary={name}
-      secondary={account}
-      className={className}
-    />
+    <Tooltip delay={0}>
+      <div
+        className={["flex min-w-0 items-center gap-2", className]
+          .filter(Boolean)
+          .join(" ")}
+        tabIndex={0}
+      >
+        <Avatar size="sm" variant="soft" className="shrink-0">
+          {avatar ? <Avatar.Image alt={primaryText} src={avatar} /> : null}
+          <Avatar.Fallback>{getPersonFallback(primaryText)}</Avatar.Fallback>
+        </Avatar>
+        <span className="grid min-w-0 gap-1">
+          <span className="min-w-0 truncate text-sm font-medium">
+            {primaryText}
+          </span>
+          {secondaryText ? (
+            <span className="min-w-0 truncate text-sm text-muted">
+              {secondaryText}
+            </span>
+          ) : null}
+        </span>
+      </div>
+      <Tooltip.Content>
+        <span className="whitespace-pre-wrap">
+          {[primaryText, secondaryText].filter(Boolean).join("\n")}
+        </span>
+      </Tooltip.Content>
+    </Tooltip>
   );
 }
 
@@ -264,8 +309,10 @@ export function DataTableChip({ children, text, className = "" }) {
 export function DataTablePagination({
   page,
   pageSize,
+  pageSizeOptions = [],
   total,
   onPageChange,
+  onPageSizeChange,
   isDisabled = false,
   itemLabel = "条",
 }) {
@@ -274,13 +321,50 @@ export function DataTablePagination({
   const pageWindowEnd = total
     ? Math.min(totalPages, pageWindowStart + 5)
     : pageWindowStart;
+  const normalizedPageSizeOptions = pageSizeOptions
+    .map((value) => Number(value))
+    .filter(
+      (value, index, values) =>
+        Number.isFinite(value) &&
+        value > 0 &&
+        values.indexOf(value) === index,
+    );
+  const pageSizeOptionsForPicker = normalizedPageSizeOptions.map((value) => ({
+    id: String(value),
+    label: `${value} 条/页`,
+  }));
+  const hasPageSizePicker =
+    pageSizeOptionsForPicker.length > 0 &&
+    typeof onPageSizeChange === "function";
+
   return (
-    <div className="mt-2">
-      <Pagination size="sm" className="w-full">
-        <Pagination.Summary>
+    <div className="mt-2 flex min-w-0 flex-wrap items-center justify-between gap-3">
+      <div className="flex min-w-0 shrink-0 items-center gap-3">
+        <span className="min-w-0 text-sm text-muted">
           共 {total} {itemLabel}，第 {total ? page + 1 : 0}{" "}
           / {total ? totalPages : 0} 页
-        </Pagination.Summary>
+        </span>
+        {hasPageSizePicker ? (
+          <XinyuanAutocomplete
+            aria-label="每页条数"
+            className="w-24 shrink-0"
+            isDisabled={isDisabled}
+            options={pageSizeOptionsForPicker}
+            placeholder="每页条数"
+            selectedKey={String(pageSize)}
+            showSearch={false}
+            valueText={`${pageSize} 条/页`}
+            variant="secondary"
+            onSelectionChange={(key) => {
+              const nextPageSize = Number(key);
+              if (normalizedPageSizeOptions.includes(nextPageSize)) {
+                onPageSizeChange(nextPageSize);
+              }
+            }}
+          />
+        ) : null}
+      </div>
+      <Pagination className="ml-auto w-auto shrink-0" size={hasPageSizePicker ? "lg" : "sm"}>
         <Pagination.Content>
           <Pagination.Item>
             <Pagination.Previous

src/components/XinyuanAutocomplete.jsx

@@ -54,6 +54,7 @@ export default function XinyuanAutocomplete({
   popoverHeader,
   renderOption,
   searchPlaceholder = "输入关键词搜索",
+  showSearch = true,
   selectedKey,
   selectedKeys,
   selectionMode = "single",
@@ -139,6 +140,7 @@ export default function XinyuanAutocomplete({
           onInputChange={onInputChange}
         >
           {popoverHeader}
+          {showSearch ? (
             <SearchField
               aria-label={searchPlaceholder}
               fullWidth
@@ -154,6 +156,7 @@ export default function XinyuanAutocomplete({
                 </SearchField.ClearButton>
               </SearchField.Group>
             </SearchField>
+          ) : null}
           <ListBox
             aria-label={ariaLabel || placeholder}
             dependencies={[Array.from(selectedKeyStringSet).join("\u0000")]}

src/components/XinyuanEChart.jsx

+import { getXinyuanEChartsTheme } from '@/design-system/chartPalette';
+import ReactECharts from 'echarts-for-react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+
+function mergeAxisTheme(axis, theme) {
+  if (!axis) return axis;
+  const applyTheme = (item) => ({
+    ...item,
+    axisLabel: { color: theme.axis, fontFamily: theme.fontFamily, fontSize: 12, ...item?.axisLabel },
+    axisLine: { ...item?.axisLine, lineStyle: { color: theme.grid, ...item?.axisLine?.lineStyle } },
+    axisTick: { ...item?.axisTick, lineStyle: { color: theme.grid, ...item?.axisTick?.lineStyle } },
+    splitLine: { ...item?.splitLine, lineStyle: { color: theme.grid, ...item?.splitLine?.lineStyle } },
+  });
+  return Array.isArray(axis) ? axis.map(applyTheme) : applyTheme(axis);
+}
+
+export default function XinyuanEChart({ ariaLabel, className = '', height = 320, onEvents, option }) {
+  const chartRef = useRef(null);
+  const hideTooltip = useCallback(() => {
+    chartRef.current?.getEchartsInstance?.().dispatchAction({ type: 'hideTip' });
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', hideTooltip);
+    return () => window.removeEventListener('resize', hideTooltip);
+  }, [hideTooltip]);
+
+  const themedOption = useMemo(() => {
+    const theme = getXinyuanEChartsTheme();
+    const applyPieTheme = (series) => series?.type === 'pie'
+      ? {
+          ...series,
+          itemStyle: { borderColor: theme.sectorGap, borderRadius: theme.sectorRadius, borderWidth: 2, ...series.itemStyle },
+          padAngle: series.padAngle ?? 1,
+        }
+      : series;
+    const series = Array.isArray(option?.series) ? option.series.map(applyPieTheme) : applyPieTheme(option?.series);
+    return {
+      animationDuration: 320,
+      animationDurationUpdate: 240,
+      animationEasing: 'cubicOut',
+      aria: { enabled: true, decal: { show: false }, ...option?.aria },
+      color: option?.color || theme.palette,
+      textStyle: { color: theme.label, fontFamily: theme.fontFamily, ...option?.textStyle },
+      ...option,
+      series,
+      legend: option?.legend ? {
+        icon: 'circle', itemHeight: 8, itemWidth: 8, ...option.legend,
+        textStyle: { color: theme.label, fontFamily: theme.fontFamily, fontSize: 12, lineHeight: 16, ...option.legend?.textStyle },
+      } : undefined,
+      tooltip: {
+        appendToBody: true,
+        backgroundColor: theme.tooltipBackground,
+        borderColor: theme.tooltipBorder,
+        borderWidth: 1,
+        className: 'rc-echarts-tooltip',
+        confine: true,
+        enterable: false,
+        extraCssText: `border-radius: 12px; box-shadow: ${theme.tooltipShadow};`,
+        padding: [10, 12],
+        renderMode: 'html',
+        ...option?.tooltip,
+        textStyle: { color: theme.foreground, fontFamily: theme.fontFamily, fontSize: 12, ...option?.tooltip?.textStyle },
+      },
+      xAxis: mergeAxisTheme(option?.xAxis, theme),
+      yAxis: mergeAxisTheme(option?.yAxis, theme),
+    };
+  }, [option]);
+
+  return (
+    <div aria-label={ariaLabel} className={`rc-chart-interaction w-full min-w-0 ${className}`.trim()} role="img" tabIndex={0}>
+      <ReactECharts lazyUpdate notMerge onEvents={{ globalout: hideTooltip, ...onEvents }} option={themedOption} opts={{ renderer: 'canvas' }} ref={chartRef} style={{ height, width: '100%' }} />
+    </div>
+  );
+}

src/design-system/chartPalette.js

@@ -93,3 +93,36 @@ export function colorizeXinyuanChartTooltipPayload(payload = [], resolveColor) {
     };
   });
 }
+
+function readRootToken(tokenName, fallback = '') {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return fallback;
+  }
+  return window.getComputedStyle(document.documentElement).getPropertyValue(tokenName).trim() || fallback;
+}
+
+export function createResolvedXinyuanChartColorMap(keys = [], options = {}) {
+  return new Map(Array.from(createXinyuanChartColorMap(keys, options)).map(([key, color]) => {
+    const match = String(color).match(/^var\((--[^)]+)\)$/);
+    return [key, match ? readRootToken(match[1], '#667085') : color];
+  }));
+}
+
+export function getXinyuanEChartsTheme() {
+  const fontFamily = typeof document === 'undefined'
+    ? 'Inter, sans-serif'
+    : window.getComputedStyle(document.body).fontFamily;
+  return {
+    axis: readRootToken('--xinyuan-chart-axis', '#737373'),
+    grid: readRootToken('--xinyuan-chart-grid', '#e8e8e8'),
+    label: readRootToken('--xinyuan-chart-label', '#737373'),
+    foreground: readRootToken('--xinyuan-chart-tooltip-foreground', '#222222'),
+    fontFamily: fontFamily || 'Inter, sans-serif',
+    palette: Array.from({ length: 16 }, (_, index) => readRootToken(`--xinyuan-chart-${index + 1}`, '#667085')),
+    tooltipBackground: readRootToken('--xinyuan-chart-tooltip-background', '#ffffff'),
+    tooltipBorder: readRootToken('--xinyuan-chart-tooltip-border', '#dedede'),
+    tooltipShadow: readRootToken('--xinyuan-chart-tooltip-shadow', '0 16px 40px rgb(15 23 42 / 14%)'),
+    sectorGap: readRootToken('--xinyuan-chart-sector-gap', '#ffffff'),
+    sectorRadius: Number.parseFloat(readRootToken('--xinyuan-chart-sector-radius', '10')) || 10,
+  };
+}

src/design-system/shell.css

@@ -436,6 +436,24 @@
   gap: var(--rc-page-module-gap);
 }
 
+.rc-section-title {
+  margin: 0;
+  color: var(--rc-text-primary);
+  font-size: 1.125rem;
+  font-weight: var(--rc-font-bold);
+  line-height: 1.5rem;
+  letter-spacing: 0;
+}
+
+.rc-module-title {
+  margin: 0;
+  color: var(--rc-text-primary);
+  font-size: 1rem;
+  font-weight: var(--rc-font-semibold);
+  line-height: 1.5rem;
+  letter-spacing: 0;
+}
+
 .rc-page-grid {
   min-width: 0;
   gap: var(--rc-page-module-gap);
@@ -466,6 +484,10 @@
   outline-offset: 2px;
 }
 
+.rc-echarts-tooltip {
+  position: fixed !important;
+}
+
 .rc-kpi-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -1454,3 +1476,118 @@
     border-right: 0;
   }
 }
+
+/* Final fixed dark Sidebar overrides. */
+.template-dashboard-shell .app-sidebar-glass,
+.rc-mobile-sidebar.app-sidebar-glass {
+  color: var(--rc-sidebar-foreground);
+  border-color: var(--rc-sidebar-border) !important;
+  background-color: var(--rc-sidebar-background) !important;
+}
+.template-dashboard-shell .sidebar__group-label,
+.rc-mobile-sidebar .sidebar__group-label,
+.template-dashboard-shell .sidebar__menu-icon,
+.rc-mobile-sidebar .sidebar__menu-icon { color: var(--rc-sidebar-muted); }
+.template-dashboard-shell .sidebar__menu-label,
+.rc-mobile-sidebar .sidebar__menu-label,
+.template-dashboard-shell .sidebar__menu-item-content,
+.rc-mobile-sidebar .sidebar__menu-item-content { color: var(--rc-sidebar-foreground); }
+.template-dashboard-shell .sidebar__menu-item[data-current='true'] .sidebar__menu-item-content,
+.rc-mobile-sidebar .sidebar__menu-item[data-current='true'] .sidebar__menu-item-content {
+  color: var(--rc-sidebar-item-selected-foreground);
+  background: var(--rc-sidebar-item-selected);
+}
+.template-dashboard-shell .sidebar__menu-item:hover .sidebar__menu-item-content,
+.template-dashboard-shell .sidebar__menu-item[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-content {
+  color: var(--rc-sidebar-foreground);
+  background: var(--rc-sidebar-item-hover);
+}
+.template-dashboard-shell .app-sidebar-user-trigger,
+.rc-mobile-sidebar .app-sidebar-user-trigger { color: var(--rc-sidebar-foreground); }
+
+/* Keep HeroUI's generated slot styles from replacing the fixed dark-sidebar tokens. */
+.template-dashboard-shell .sidebar__menu-icon,
+.rc-mobile-sidebar .sidebar__menu-icon,
+.template-dashboard-shell .sidebar__menu-icon .anticon,
+.rc-mobile-sidebar .sidebar__menu-icon .anticon {
+  color: var(--rc-sidebar-muted) !important;
+}
+
+.template-dashboard-shell .sidebar__menu-label,
+.rc-mobile-sidebar .sidebar__menu-label,
+.template-dashboard-shell .app-sidebar-title,
+.rc-mobile-sidebar .app-sidebar-title,
+.template-dashboard-shell .app-sidebar-user-name,
+.rc-mobile-sidebar .app-sidebar-user-name,
+.template-dashboard-shell .app-sidebar-app-trigger.button,
+.rc-mobile-sidebar .app-sidebar-app-trigger.button {
+  color: var(--rc-sidebar-foreground) !important;
+}
+
+.template-dashboard-shell
+  .sidebar__menu-item[data-current='true']
+  .sidebar__menu-item-content,
+.rc-mobile-sidebar
+  .sidebar__menu-item[data-current='true']
+  .sidebar__menu-item-content {
+  color: var(--rc-sidebar-item-selected-foreground) !important;
+  background: var(--rc-sidebar-item-selected) !important;
+}
+
+.template-dashboard-shell
+  .sidebar__menu-item[data-current='true']
+  .sidebar__menu-item-content
+  :is(.sidebar__menu-icon, .sidebar__menu-label, .anticon),
+.rc-mobile-sidebar
+  .sidebar__menu-item[data-current='true']
+  .sidebar__menu-item-content
+  :is(.sidebar__menu-icon, .sidebar__menu-label, .anticon) {
+  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-content,
+.rc-mobile-sidebar .sidebar__menu-item:hover .sidebar__menu-item-content,
+.rc-mobile-sidebar .sidebar__menu-item[data-hovered='true'] .sidebar__menu-item-content {
+  color: var(--rc-sidebar-foreground) !important;
+  background: var(--rc-sidebar-item-hover) !important;
+}
+
+.template-dashboard-shell .app-sidebar-user-description,
+.rc-mobile-sidebar .app-sidebar-user-description {
+  color: var(--rc-sidebar-muted) !important;
+}
+
+.template-dashboard-shell .app-sidebar-user-trigger,
+.rc-mobile-sidebar .app-sidebar-user-trigger {
+  color: var(--rc-sidebar-foreground) !important;
+}
+
+.template-dashboard-shell .app-sidebar-user-trigger.dropdown__trigger:hover,
+.template-dashboard-shell .app-sidebar-user-trigger.dropdown__trigger[data-hovered='true'],
+.template-dashboard-shell .app-sidebar-user-trigger.dropdown__trigger[aria-expanded='true'],
+.rc-mobile-sidebar .app-sidebar-user-trigger.dropdown__trigger:hover,
+.rc-mobile-sidebar .app-sidebar-user-trigger.dropdown__trigger[data-hovered='true'],
+.rc-mobile-sidebar .app-sidebar-user-trigger.dropdown__trigger[aria-expanded='true'] {
+  color: var(--rc-sidebar-foreground) !important;
+  background: var(--rc-sidebar-item-hover) !important;
+}
+
+.template-dashboard-shell .app-sidebar-user-avatar,
+.rc-mobile-sidebar .app-sidebar-user-avatar {
+  background: var(--rc-sidebar-item-hover) !important;
+}
+
+.template-dashboard-shell .app-sidebar-app-trigger.button:hover,
+.template-dashboard-shell .app-sidebar-app-trigger.button[data-hovered='true'],
+.template-dashboard-shell .app-sidebar-app-trigger.button[data-pressed='true'],
+.template-dashboard-shell .app-sidebar-app-trigger.button[aria-expanded='true'],
+.rc-mobile-sidebar .app-sidebar-app-trigger.button:hover,
+.rc-mobile-sidebar .app-sidebar-app-trigger.button[data-hovered='true'],
+.rc-mobile-sidebar .app-sidebar-app-trigger.button[data-pressed='true'],
+.rc-mobile-sidebar .app-sidebar-app-trigger.button[aria-expanded='true'] {
+  color: var(--rc-sidebar-item-selected-foreground) !important;
+  background: var(--rc-sidebar-item-selected) !important;
+}

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,86 @@
   /* 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.
+   */
+  --xinyuan-chart-1: #d92d20;
+  --xinyuan-chart-2: #ef4444;
+  --xinyuan-chart-3: #f97316;
+  --xinyuan-chart-4: #f59e0b;
+  --xinyuan-chart-5: #22c55e;
+  --xinyuan-chart-6: #14b87a;
+  --xinyuan-chart-7: #06b6d4;
+  --xinyuan-chart-8: #0ea5e9;
+  --xinyuan-chart-9: #3b82f6;
+  --xinyuan-chart-10: #6366f1;
+  --xinyuan-chart-11: #8b5cf6;
+  --xinyuan-chart-12: #7c3aed;
+  --xinyuan-chart-13: #b42318;
+  --xinyuan-chart-14: #84cc16;
+  --xinyuan-chart-15: #a855f7;
+  --xinyuan-chart-16: #64748b;
+  --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

@@ -27,10 +27,19 @@
     var(--background)
   );
   --rc-text-muted: var(--muted);
+  --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;
   --rc-font-semibold: 600;
+  --rc-font-bold: 700;
   --rc-line-normal: 1.5;
   --rc-text-xs: 0.75rem;
   --rc-text-sm: 0.875rem;
@@ -146,6 +155,14 @@
   --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-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);

src/pages/project_manager_xy/ApplicationSwitcherDialog.jsx

 import { getApplications } from '@/services/DataService';
-import { ExclamationCircleIcon, XMarkIcon } from '@/components/AppIcons';
+import { ExclamationCircleIcon, MagnifyingGlassIcon, XMarkIcon } from '@/components/AppIcons';
 import xinyuanLogo from '@/assets/xy-logo-red.png';
 import {
   APPLICATION_BASE_PATH,
   APPLICATION_DISPLAY_NAME,
 } from '@/config/application';
 import { EmptyState } from '@heroui-pro/react/empty-state';
+import { ItemCard } from '@heroui-pro/react/item-card';
+import { ItemCardGroup } from '@heroui-pro/react/item-card-group';
 import {
   Alert,
   Avatar,
-  Card,
   Chip,
   Description,
   Modal,
   Skeleton,
+  SearchField,
+  ScrollShadow,
   Surface,
 } from '@heroui/react';
 import { useEffect, useMemo, useState } from 'react';
@@ -226,68 +229,38 @@ function markCurrentApplication(applications) {
 function ApplicationCard({ application }) {
   const current = application.current === true;
   const target = application?.url?.startsWith('http') ? '_blank' : undefined;
-  const initial = application.title.trim().slice(0, 1).toUpperCase() || 'A';
+  const description = application.description?.trim();
+  const hasDistinctDescription = description && description !== application.title.trim();
 
   return (
-    <Card className="h-full" variant="secondary">
-      <Card.Content>
-        <a
-          href={application.url}
-          target={target}
-          rel={target ? 'noreferrer' : undefined}
-          aria-current={current ? 'page' : undefined}
-          className="flex min-w-0 items-center gap-3 no-underline"
-        >
-          <Surface
-            aria-hidden="true"
-            className="grid size-9 shrink-0 place-items-center overflow-hidden rounded-[var(--rc-radius-control)]"
-            variant="tertiary"
-          >
-            <Avatar
-              className="size-full rounded-[var(--rc-radius-control)] bg-transparent"
-              color="accent"
-              variant="soft"
-            >
-              {application.logo ? (
-                <Avatar.Image
-                  alt=""
-                  className="object-contain p-1.5"
-                  src={application.logo}
-                />
-              ) : null}
-              <Avatar.Fallback>{initial}</Avatar.Fallback>
+    <ItemCard aria-current={current ? 'page' : undefined} className="h-full min-w-0 no-underline" href={application.url} rel={target ? 'noreferrer' : undefined} render={(props) => <a {...props} />} target={target} variant={current ? 'outline' : 'default'}>
+      <ItemCard.Icon aria-hidden="true">
+        <Surface className="rc-application-identity-well" variant="default">
+          <Avatar className="rc-application-identity-avatar" color="accent" variant="soft">
+            <Avatar.Image alt="" className="object-contain p-1.5" src={application.logo || xinyuanLogo} />
+            <Avatar.Fallback><img alt="" className="object-contain p-1.5" src={xinyuanLogo} /></Avatar.Fallback>
           </Avatar>
         </Surface>
-          <span className="min-w-0 flex-1">
-            <span className="block truncate text-sm font-medium leading-5 text-foreground" title={application.title}>
-              {application.title}
-            </span>
-            <Description className="mt-0.5 block truncate leading-4" title={application.description}>
-              {application.description || application.name || '应用'}
-            </Description>
-          </span>
-          {current ? <Chip color="accent" size="sm">当前</Chip> : null}
-        </a>
-      </Card.Content>
-    </Card>
+      </ItemCard.Icon>
+      <ItemCard.Content>
+        <ItemCard.Title title={application.title}>{application.title}</ItemCard.Title>
+        {hasDistinctDescription ? <ItemCard.Description title={description}>{description}</ItemCard.Description> : null}
+      </ItemCard.Content>
+      {current ? <ItemCard.Action><Chip color="accent" size="sm">当前</Chip></ItemCard.Action> : null}
+    </ItemCard>
   );
 }
 
 function LoadingSkeleton() {
   return (
-    <div className="grid gap-3 sm:grid-cols-2" aria-label="正在加载应用">
+    <ItemCardGroup aria-label="正在加载应用" className="grid-cols-1 sm:grid-cols-2" columns={2} layout="grid" variant="transparent">
       {Array.from({ length: 6 }).map((_, index) => (
-        <Card key={index} variant="secondary">
-          <Card.Content className="flex items-center gap-3">
-            <Skeleton className="size-9" />
-            <div className="min-w-0 flex-1 space-y-2">
-              <Skeleton className="h-4 w-2/3" />
-              <Skeleton className="h-3 w-full" />
-            </div>
-          </Card.Content>
-        </Card>
+        <ItemCard key={index} variant="default">
+          <ItemCard.Icon><Skeleton className="size-9" /></ItemCard.Icon>
+          <ItemCard.Content className="gap-2"><Skeleton className="h-4 w-2/3" /><Skeleton className="h-3 w-full" /></ItemCard.Content>
+        </ItemCard>
       ))}
-    </div>
+    </ItemCardGroup>
   );
 }
 
@@ -319,6 +292,7 @@ export default function ApplicationSwitcherDialog({
     fallbackApplications.length > 0 ? 'success' : 'idle',
   );
   const [errorMessage, setErrorMessage] = useState('');
+  const [applicationSearch, setApplicationSearch] = useState('');
   const currentApplicationName = useMemo(() => {
     return applications.find(isCurrentApplication)?.name || '';
   }, [applications]);
@@ -326,6 +300,20 @@ export default function ApplicationSwitcherDialog({
     () => buildApplicationSections(applications, siteInfo?.group),
     [applications, siteInfo?.group],
   );
+  const filteredApplicationSections = useMemo(() => {
+    const keyword = applicationSearch.trim().toLowerCase();
+    if (!keyword) return applicationSections;
+    return applicationSections
+      .map((section) => ({
+        ...section,
+        applications: section.applications.filter((application) =>
+          [application.title, application.description, application.name]
+            .filter(Boolean)
+            .some((value) => String(value).toLowerCase().includes(keyword)),
+        ),
+      }))
+      .filter((section) => section.applications.length > 0);
+  }, [applicationSearch, applicationSections]);
 
   useEffect(() => {
     if (fallbackApplications.length === 0) {
@@ -343,6 +331,7 @@ export default function ApplicationSwitcherDialog({
 
   useEffect(() => {
     if (!open) {
+      setApplicationSearch('');
       return;
     }
 
@@ -399,7 +388,7 @@ export default function ApplicationSwitcherDialog({
       >
         <Modal.Container className="w-full sm:w-full" placement="center" scroll="inside" size="lg">
           <Modal.Dialog
-            className="max-h-[min(42rem,calc(100dvh-2rem))] p-7"
+            className="max-h-[min(42rem,calc(100dvh-2rem))] bg-background p-7"
             style={{
               maxWidth: 'min(46rem, calc(100vw - 2rem))',
               width: 'min(46rem, calc(100vw - 2rem))',
@@ -412,11 +401,23 @@ export default function ApplicationSwitcherDialog({
               <XMarkIcon size={16} />
             </Modal.CloseTrigger>
             <Modal.Header>
-              <Modal.Heading>应用切换</Modal.Heading>
-              <div className="text-sm text-muted">选择你可访问的应用</div>
+              <SearchField
+                aria-label="搜索应用"
+                className="w-full min-w-0"
+                value={applicationSearch}
+                variant="secondary"
+                onChange={setApplicationSearch}
+              >
+                <SearchField.Group>
+                  <SearchField.SearchIcon><MagnifyingGlassIcon size={16} /></SearchField.SearchIcon>
+                  <SearchField.Input placeholder="搜索应用" />
+                  <SearchField.ClearButton aria-label="清空应用搜索" />
+                </SearchField.Group>
+              </SearchField>
             </Modal.Header>
 
-            <Modal.Body style={{ marginTop: '0.75rem' }}>
+            <Modal.Body className="flex min-h-0 overflow-hidden" style={{ marginTop: '0.75rem' }}>
+              <ScrollShadow className="h-full min-h-0 flex-1 overflow-y-auto pe-1 pb-1" hideScrollBar={false} offset={12} size={24}>
               {status === 'error' && errorMessage ? (
                 <Alert status="warning">
                   <Alert.Indicator><ExclamationCircleIcon size={20} /></Alert.Indicator>
@@ -428,9 +429,9 @@ export default function ApplicationSwitcherDialog({
 
               {status === 'loading' && applications.length === 0 ? (
                 <LoadingSkeleton />
-              ) : applications.length > 0 ? (
+              ) : filteredApplicationSections.length > 0 ? (
                 <div className="space-y-6">
-                  {applicationSections.map((section) => (
+                  {filteredApplicationSections.map((section) => (
                     <section key={section.key}>
                       <div className="mb-3 flex items-center justify-between gap-3">
                         <h3 className="text-sm font-medium leading-5 text-foreground">
@@ -440,7 +441,7 @@ export default function ApplicationSwitcherDialog({
                           {section.applications.length} 个应用
                         </Description>
                       </div>
-                      <div className="grid gap-3 sm:grid-cols-2">
+                      <ItemCardGroup className="grid-cols-1 sm:grid-cols-2" columns={2} layout="grid" variant="transparent">
                         {section.applications.map((application) => (
                           <ApplicationCard
                             key={application.name}
@@ -450,18 +451,19 @@ export default function ApplicationSwitcherDialog({
                             }}
                           />
                         ))}
-                      </div>
+                      </ItemCardGroup>
                     </section>
                   ))}
                 </div>
               ) : (
                 <EmptyState size="md">
                   <EmptyState.Header>
-                    <EmptyState.Title>暂无可切换应用</EmptyState.Title>
-                    <EmptyState.Description>当前账号还没有分配其它应用权限。</EmptyState.Description>
+                    <EmptyState.Title>{applicationSearch.trim() ? '没有找到匹配的应用' : '暂无可切换应用'}</EmptyState.Title>
+                    <EmptyState.Description>{applicationSearch.trim() ? '请尝试其他关键词。' : '当前账号还没有分配其它应用权限。'}</EmptyState.Description>
                   </EmptyState.Header>
                 </EmptyState>
               )}
+              </ScrollShadow>
             </Modal.Body>
           </Modal.Dialog>
         </Modal.Container>

src/pages/project_manager_xy/Layout.jsx

-import xinyuanLogoRed from "@/assets/xy-logo-red.png";
 import xinyuanLogoWhite from "@/assets/xy-logo-white.png";
 import {
   APPLICATION_BASE_PATH,
@@ -6,68 +5,46 @@ import {
   ROUTE_TITLES,
 } from "@/config/application";
 import ApplicationSwitcherDialog from "@/pages/project_manager_xy/ApplicationSwitcherDialog";
-import { Bell, SidebarPanel } from "@/components/AppIcons";
+import {
+  AppGrid,
+  Bell,
+  Database,
+  Folder,
+  LogOut,
+  SidebarPanel,
+} from "@/components/AppIcons";
 import {
   loadUnreadNotificationCount,
   NOTIFICATION_STATE_EVENT,
 } from "@/pages/project_manager_xy/notifications/notificationService";
 import { UserContext } from "@/wrapper/Auth";
 import { SiteContext } from "@/wrapper/Site";
-import {
-  AppstoreOutlined,
-  DatabaseOutlined,
-  FolderOpenOutlined,
-  LogoutOutlined,
-  MoonOutlined,
-  SunOutlined,
-} from "@ant-design/icons";
 import { Avatar, Badge, Button, Dropdown, Label, Tooltip } from "@heroui/react";
-import { AppLayout } from "@heroui-pro/react/app-layout";
 import { Navbar } from "@heroui-pro/react/navbar";
 import { Sheet } from "@heroui-pro/react/sheet";
 import { Sidebar, useSidebar } from "@heroui-pro/react/sidebar";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { history, Outlet, useLocation } from "umi";
 
-const THEME_STORAGE_KEY = "xinyuan_color_theme";
-
 const menuGroups = [
   {
-    title: "统一材料工作台",
+    title: APPLICATION_DISPLAY_NAME,
+    showLabel: false,
     items: [
       {
         name: "工作台",
         path: "/resource/stat",
-        icon: DatabaseOutlined,
+        icon: Database,
       },
       {
         name: "材料归档",
         path: "/resource/booking",
-        icon: FolderOpenOutlined,
+        icon: Folder,
       },
     ],
   },
 ];
 
-function getPreferredTheme() {
-  if (typeof window === "undefined") {
-    return "light";
-  }
-
-  const storedTheme = window.localStorage?.getItem?.(THEME_STORAGE_KEY);
-  return storedTheme === "dark" ? "dark" : "light";
-}
-
-function applyTheme(theme) {
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  document.documentElement.dataset.theme = theme;
-  document.documentElement.classList.toggle("dark", theme === "dark");
-  document.documentElement.classList.toggle("light", theme !== "dark");
-}
-
 function NavItem({ name, path, active, icon: Icon }) {
   return (
     <Sidebar.MenuItem
@@ -78,7 +55,7 @@ function NavItem({ name, path, active, icon: Icon }) {
       tooltip={name}
     >
       <Sidebar.MenuIcon>
-        <Icon />
+        <Icon size={16} />
       </Sidebar.MenuIcon>
       <Sidebar.MenuLabel>{name}</Sidebar.MenuLabel>
     </Sidebar.MenuItem>
@@ -108,16 +85,7 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
       <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={xinyuanLogoRed}
-            />
-            <img
-              alt="鑫元"
-              className="rc-sidebar-logo rc-sidebar-logo--dark"
-              src={xinyuanLogoWhite}
-            />
+            <img alt="鑫元" className="rc-sidebar-logo" src={xinyuanLogoWhite} />
           </div>
           <div className="app-sidebar-brand-main rc-sidebar-brand-main" data-sidebar="label">
             <span className="app-sidebar-title rc-sidebar-title">
@@ -125,7 +93,6 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
             </span>
           </div>
           <div className="app-sidebar-app-switcher rc-sidebar-app-switcher" data-sidebar="label">
-            <Tooltip delay={0}>
             <Button
               isIconOnly
               aria-label="切换应用"
@@ -134,10 +101,8 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
               variant="ghost"
               onPress={handleOpenApplicationDialog}
             >
-                <AppstoreOutlined />
+              <AppGrid size={16} />
             </Button>
-              <Tooltip.Content>切换应用</Tooltip.Content>
-            </Tooltip>
           </div>
         </div>
       </Sidebar.Header>
@@ -145,7 +110,9 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
       <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) => (
                 <NavItem
@@ -195,7 +162,7 @@ function SidebarContent({ currentPath, onOpenApplicationDialog, userInfo }) {
               >
                 <div className="rc-sidebar-user-menu-item">
                   <Label>退出登录</Label>
-                  <LogoutOutlined aria-hidden="true" />
+                  <LogOut size={14} />
                 </div>
               </Dropdown.Item>
             </Dropdown.Menu>
@@ -214,19 +181,16 @@ function MobileSidebar({ children }) {
   }
 
   return (
-    <Sheet
+    <Sheet.Root
       isOpen={isMobileOpen}
       placement={side}
       onOpenChange={setMobileOpen}
     >
       <Sheet.Backdrop variant="blur">
-        <Sheet.Content className="h-full w-4/5">
-          <Sheet.Dialog
-            aria-label="主导航"
-            className="h-full"
-          >
+        <Sheet.Content className="sidebar__mobile-sheet">
+          <Sheet.Dialog aria-label={`${APPLICATION_DISPLAY_NAME}导航`} className="sidebar__mobile-dialog">
             <div
-              className="app-sidebar-glass rc-mobile-sidebar"
+              className="sidebar__mobile app-sidebar-glass rc-mobile-sidebar"
               data-slot="sidebar-mobile"
             >
               {children}
@@ -234,7 +198,7 @@ function MobileSidebar({ children }) {
           </Sheet.Dialog>
         </Sheet.Content>
       </Sheet.Backdrop>
-    </Sheet>
+    </Sheet.Root>
   );
 }
 
@@ -242,16 +206,10 @@ export default function ProjectManagerLayout() {
   const location = useLocation();
   const siteInfo = useContext(SiteContext);
   const userInfo = useContext(UserContext);
-  const [theme, setTheme] = useState(() => getPreferredTheme());
   const [isApplicationDialogOpen, setIsApplicationDialogOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
 
-  useEffect(() => {
-    applyTheme(theme);
-    window.localStorage?.setItem?.(THEME_STORAGE_KEY, theme);
-  }, [theme]);
-
   useEffect(() => {
     let cancelled = false;
 
@@ -313,7 +271,6 @@ export default function ProjectManagerLayout() {
     document.title = `${currentRoute.name} - ${APPLICATION_DISPLAY_NAME}`;
   }, [currentRoute.name]);
 
-  const nextTheme = theme === "dark" ? "light" : "dark";
   const sidebarNavigation = (
     <SidebarContent
       currentPath={appPathname}
@@ -323,15 +280,19 @@ export default function ProjectManagerLayout() {
   );
 
   return (
-    <AppLayout
-      className="template-dashboard-shell rc-app-shell"
-      data-sidebar-collapsible="offcanvas"
+    <Sidebar.Provider
+      className="template-dashboard-shell rc-app-shell light"
+      collapsible="offcanvas"
       navigate={(href) => history.push(href)}
-      navbar={
-        <Navbar
-          className="app-navbar rc-navbar"
-          maxWidth="full"
+      open={isSidebarOpen}
+      onOpenChange={setIsSidebarOpen}
     >
+      <Sidebar.Root className="app-sidebar-glass rc-sidebar">
+        {sidebarNavigation}
+      </Sidebar.Root>
+      <MobileSidebar>{sidebarNavigation}</MobileSidebar>
+      <Sidebar.Main className="app-main-glass rc-app-main">
+        <Navbar className="app-navbar rc-navbar" maxWidth="full">
           <Navbar.Header>
             <Sidebar.Trigger
               className="app-navbar-trigger rc-navbar-trigger"
@@ -339,12 +300,6 @@ export default function ProjectManagerLayout() {
             >
               <SidebarPanel size={16} />
             </Sidebar.Trigger>
-            <AppLayout.MenuToggle
-              aria-label="打开导航"
-              className="app-navbar-trigger rc-navbar-trigger"
-            >
-              <SidebarPanel size={16} />
-            </AppLayout.MenuToggle>
             <h1 className="app-navbar-page-title rc-navbar-title">{currentRoute.name}</h1>
             <Navbar.Spacer />
             <div className="rc-navbar-actions">
@@ -374,52 +329,19 @@ export default function ProjectManagerLayout() {
                 </Badge.Anchor>
                 <Tooltip.Content>通知消息</Tooltip.Content>
               </Tooltip>
-              <Tooltip delay={0}>
-                <Button
-                  isIconOnly
-                  aria-label={theme === "dark" ? "切换至浅色模式" : "切换至深色模式"}
-                  aria-pressed={theme === "dark"}
-                  className="app-navbar-icon-button rc-navbar-icon-button"
-                  size="sm"
-                  variant="ghost"
-                  onPress={() => setTheme(nextTheme)}
-                >
-                  {theme === "dark" ? <SunOutlined /> : <MoonOutlined />}
-                </Button>
-                <Tooltip.Content>
-                  {theme === "dark" ? "切换至浅色模式" : "切换至深色模式"}
-                </Tooltip.Content>
-              </Tooltip>
             </div>
           </Navbar.Header>
         </Navbar>
-      }
-      scrollMode="content"
-      sidebar={
-        <>
-          <Sidebar.Root className="app-sidebar-glass rc-sidebar">
-            {sidebarNavigation}
-          </Sidebar.Root>
-          <MobileSidebar>
-            {sidebarNavigation}
-          </MobileSidebar>
-        </>
-      }
-      sidebarCollapsible="offcanvas"
-      sidebarOpen={isSidebarOpen}
-      onSidebarOpenChange={setIsSidebarOpen}
-      toggleShortcut="mod+b"
-    >
-      <div className="rc-app-page min-h-full">
-        <Outlet />
+        <div className="app-shell-content-scroll min-h-0 flex-1 overflow-y-auto">
+          <div className="rc-app-page min-h-full"><Outlet /></div>
         </div>
-
+      </Sidebar.Main>
       <ApplicationSwitcherDialog
         open={isApplicationDialogOpen}
         onClose={() => setIsApplicationDialogOpen(false)}
         siteInfo={siteInfo}
         userInfo={userInfo}
       />
-    </AppLayout>
+    </Sidebar.Provider>
   );
 }

src/pages/project_manager_xy/resource-booking/index.jsx

@@ -2,6 +2,7 @@ import {
   DataTable,
   DataTableChip,
   DataTablePagination,
+  DataTablePersonIdentity,
   DataTableText,
   DataTableTextPair,
 } from "@/components/DataTable";
@@ -75,7 +76,22 @@ import {
 } from "../materialService";
 
 const ALL_CATEGORY_KEY = "__all__";
-const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_PAGE_SIZE = 20;
+const PAGE_SIZE_OPTIONS = [20, 50, 100];
+const READABLE_FILE_TYPE_LABELS = {
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+    "Excel（XLSX）",
+  "application/vnd.ms-excel": "Excel（XLS）",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+    "Word（DOCX）",
+  "application/msword": "Word（DOC）",
+  "application/pdf": "PDF",
+  "application/json": "JSON",
+  "application/zip": "ZIP",
+  "application/octet-stream": "文件",
+  "text/csv": "CSV",
+  "text/plain": "TXT",
+};
 const BOOLEAN_FILTER_OPTIONS = [
   { value: "true", label: "是" },
   { value: "false", label: "否" },
@@ -144,6 +160,33 @@ function buildEmptyBatchTagForm() {
   };
 }
 
+function getReadableFileType(fileName = "", mimeType = "") {
+  const normalizedMimeType = String(mimeType || "")
+    .trim()
+    .toLowerCase();
+  if (
+    normalizedMimeType &&
+    normalizedMimeType !== "application/octet-stream" &&
+    READABLE_FILE_TYPE_LABELS[normalizedMimeType]
+  ) {
+    return READABLE_FILE_TYPE_LABELS[normalizedMimeType];
+  }
+
+  const fileNameParts = String(fileName || "").split(".");
+  const extension =
+    fileNameParts.length > 1 ? fileNameParts.pop().trim().toUpperCase() : "";
+  if (extension) {
+    return extension;
+  }
+
+  if (READABLE_FILE_TYPE_LABELS[normalizedMimeType]) {
+    return READABLE_FILE_TYPE_LABELS[normalizedMimeType];
+  }
+
+  const mimeSubtype = normalizedMimeType.split("/")[1] || "";
+  return mimeSubtype.replace(/^x-/, "").toUpperCase() || "文件";
+}
+
 function formatDateTimeLocalInput(value) {
   if (!value) {
     return "";
@@ -228,20 +271,11 @@ function FormSection({ title, description, children, className }) {
   );
 }
 
-function DetailContent({ isEditing, children }) {
-  const className = 'grid min-h-0 min-w-0 gap-6';
-
-  if (isEditing) {
-    return <div className={className}>{children}</div>;
-  }
-
+function DetailContent({ children }) {
   return (
-    <Surface
-      className={`${className} px-5 py-2 sm:px-6 sm:py-3`}
-      variant="secondary"
-    >
+    <div className="grid min-h-0 min-w-0 gap-6">
       {children}
-    </Surface>
+    </div>
   );
 }
 
@@ -263,10 +297,10 @@ function FieldLabel({ children, required = false, infoText, infoTone }) {
 
 function DetailValue({ label, children }) {
   return (
-    <div className="min-w-0 py-2">
-      <div className="text-sm text-muted">{label}</div>
-      <div className="mt-1 break-words text-sm font-medium">
-        {children || "-"}
+    <div className="min-w-0 py-3">
+      <div className="text-sm font-medium text-muted">{label}</div>
+      <div className="mt-1.5 min-w-0 break-words text-sm text-foreground">
+        {children || <span className="text-muted">-</span>}
       </div>
     </div>
   );
@@ -385,7 +419,7 @@ export default function ResourceBookingPage() {
     useState(false);
   const deferredMaterialSearchForm = useDeferredValue(materialSearchForm);
   const [activeCategory, setActiveCategory] = useState(ALL_CATEGORY_KEY);
-  const pageSize = DEFAULT_PAGE_SIZE;
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
   const [page, setPage] = useState(0);
   const [categoryOptions, setCategoryOptions] = useState([]);
   const [materials, setMaterials] = useState([]);
@@ -620,7 +654,10 @@ export default function ResourceBookingPage() {
         render: (material) => (
           <DataTableTextPair
             primary={material.fileName}
-            secondary={`${material.fileType} · ${material.fileSizeLabel}`}
+            secondary={`${getReadableFileType(
+              material.fileName,
+              material.fileType,
+            )} · ${material.fileSizeLabel}`}
           />
         ),
       },
@@ -656,7 +693,7 @@ export default function ResourceBookingPage() {
         title: "上传人",
         minWidth: 160,
         render: (material) => (
-          <DataTableText text={material.uploaderLabel} showTooltip />
+          <DataTablePersonIdentity name={material.uploaderLabel} />
         ),
       },
       {
@@ -711,6 +748,16 @@ export default function ResourceBookingPage() {
     setPage(Math.max(0, Math.min(nextPage, totalPages - 1)));
   }
 
+  function handlePageSizeChange(nextPageSize) {
+    const normalizedPageSize = Number(nextPageSize);
+    if (!PAGE_SIZE_OPTIONS.includes(normalizedPageSize)) {
+      return;
+    }
+
+    setPageSize(normalizedPageSize);
+    setPage(0);
+  }
+
   function updateMaterialSearchField(fieldName, value) {
     setMaterialSearchForm((prev) => ({
       ...prev,
@@ -1527,8 +1574,10 @@ export default function ResourceBookingPage() {
             <DataTablePagination
               page={page}
               pageSize={pageSize}
+              pageSizeOptions={PAGE_SIZE_OPTIONS}
               total={total}
               onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
             />
           </div>
         </div>
@@ -1622,24 +1671,48 @@ export default function ResourceBookingPage() {
         </Modal.Header>
         <Modal.Body>
           {activeMaterial ? (
-            <DetailContent isEditing={isDetailEditing}>
-              <aside className="grid min-w-0 items-center gap-4 lg:grid-cols-[minmax(0,1fr)_auto]">
-                <div className="grid min-w-0 items-center gap-3 lg:grid-cols-[minmax(0,1fr)_auto]">
+            <DetailContent>
+              <aside className="grid min-w-0 gap-4">
+                <div className="flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                   <div className="min-w-0">
                     <div
-                      className="truncate text-base font-medium"
+                      className="break-words text-lg font-semibold leading-6 text-foreground"
                       title={activeMaterial.fileName}
                     >
                       {activeMaterial.fileName}
                     </div>
-                    <div className="mt-1.5 flex min-w-0 flex-wrap gap-x-3 gap-y-1 text-sm text-muted">
-                      <span>{activeMaterial.fileType}</span>
+                    <div className="mt-2 flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 text-sm text-muted">
+                      <span>
+                        {getReadableFileType(
+                          activeMaterial.fileName,
+                          activeMaterial.fileType,
+                        )}
+                      </span>
                       <span>{activeMaterial.fileSizeLabel}</span>
-                      <span>{activeMaterial.uploaderLabel}</span>
+                      <span>上传人：{activeMaterial.uploaderLabel || "-"}</span>
                       <span>上传于 {activeMaterial.uploadedAtLabel}</span>
                     </div>
                   </div>
-                  <div className="flex max-w-96 flex-wrap justify-end gap-1.5 max-lg:justify-start">
+                  <div className="flex shrink-0 flex-wrap gap-2">
+                    <Button
+                      variant="secondary"
+                      className="cursor-pointer"
+                      onPress={handleCopyFileUrl}
+                    >
+                      <ClipboardDocumentIcon size={16} />
+                      复制链接
+                    </Button>
+                    <Button
+                      variant="secondary"
+                      className="cursor-pointer"
+                      onPress={handleOpenFile}
+                    >
+                      <ArrowTopRightOnSquareIcon size={16} />
+                      打开文件
+                    </Button>
+                  </div>
+                </div>
+                <div className="flex min-w-0 flex-wrap items-center gap-2">
                   <Chip
                     color={activeMaterial.archiveYear ? "warning" : "default"}
                     size="sm"
@@ -1647,7 +1720,11 @@ export default function ResourceBookingPage() {
                   >
                     {activeMaterial.archiveYearLabel}
                   </Chip>
-                    <Chip color="accent" size="sm" variant="soft">
+                  <Chip
+                    color={activeMaterial.archiveCategory === UNCATEGORIZED_CATEGORY_LABEL ? "default" : "accent"}
+                    size="sm"
+                    variant="soft"
+                  >
                     {activeMaterial.archiveCategory}
                   </Chip>
                   {activeMaterial.tag ? (
@@ -1656,29 +1733,16 @@ export default function ResourceBookingPage() {
                     </Chip>
                   ) : null}
                   {activeMaterial.isConfidential ? (
-                      <Chip color="warning" size="sm" variant="soft">涉密</Chip>
+                    <Chip color="warning" size="sm" variant="soft">
+                      涉密
+                    </Chip>
                   ) : null}
                   {activeMaterial.isAuditDeptMaterial ? (
-                      <Chip color="accent" size="sm" variant="soft">审计部材料</Chip>
+                    <Chip color="accent" size="sm" variant="soft">
+                      审计部材料
+                    </Chip>
                   ) : null}
                 </div>
-                </div>
-                <div className="flex flex-wrap justify-end gap-2 max-lg:justify-start">
-                  <Button
-                    variant="secondary"
-                    className="cursor-pointer"
-                    onPress={handleCopyFileUrl}
-                  >
-                    复制链接
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    className="cursor-pointer"
-                    onPress={handleOpenFile}
-                  >
-                    打开文件
-                  </Button>
-                </div>
               </aside>
 
               <div className="grid min-w-0 content-start gap-6">
@@ -1876,7 +1940,7 @@ export default function ResourceBookingPage() {
                     </FormSection>
                   </>
                 ) : (
-                  <div className="grid gap-x-8 sm:grid-cols-2">
+                  <div className="grid min-w-0 gap-x-8 gap-y-2 sm:grid-cols-2">
                     <DetailValue label="材料标题">{activeMaterial.materialTitle}</DetailValue>
                     <DetailValue label="所属周期/年份">{activeMaterial.archiveYearLabel}</DetailValue>
                     <DetailValue label="来源应用">{activeMaterial.sourceAppLabel}</DetailValue>

src/pages/project_manager_xy/resource-stat/index.jsx

@@ -2,6 +2,7 @@ import { UserContext } from "@/wrapper/Auth";
 import {
   DataTable,
   DataTableChip,
+  DataTablePersonIdentity,
   DataTableText,
   DataTableTextPair,
 } from "@/components/DataTable";
@@ -17,38 +18,41 @@ import {
   ShieldExclamationIcon,
 } from "@/components/AppIcons";
 import {
-  colorizeXinyuanChartTooltipPayload,
-  createXinyuanChartColorMap,
-  getXinyuanChartColor,
+  createResolvedXinyuanChartColorMap,
+  getXinyuanEChartsTheme,
 } from "@/design-system/chartPalette";
+import XinyuanEChart from "@/components/XinyuanEChart";
 import {
   Alert,
   Button,
   Card,
   Chip,
   ProgressBar as HeroProgressBar,
-  Separator,
   Spinner,
-  Surface,
   Tooltip,
 } from "@heroui/react";
-import { BarChart } from "@heroui-pro/react/bar-chart";
-import { ChartTooltipContent } from "@heroui-pro/react/chart-tooltip";
 import { EmptyState } from "@heroui-pro/react/empty-state";
 import { KPI } from "@heroui-pro/react/kpi";
-import { PieChart } from "@heroui-pro/react/pie-chart";
-import { Cell, Legend } from "recharts";
 import { useContext, useEffect, useMemo, useState } from "react";
 import {
   buildMaterialDashboard,
   formatDateTime,
-  formatFileSize,
   loadMaterialRecords,
 } from "../materialService";
 
-function Panel({ className, children }) {
+function Panel({ title, titleInfo, className, children }) {
   return (
     <Card className="rc-card-surface rc-dashboard-card">
+      {title ? (
+        <Card.Header className="flex-row items-center gap-3">
+          <Card.Title className="rc-module-title min-w-0 flex-1">
+            {title}
+          </Card.Title>
+          {titleInfo ? (
+            <TitleInfoTooltip label={title} text={titleInfo} />
+          ) : null}
+        </Card.Header>
+      ) : null}
       <Card.Content className={className}>{children}</Card.Content>
     </Card>
   );
@@ -56,10 +60,10 @@ function Panel({ className, children }) {
 
 function GovernanceCard({ title, titleInfo, icon: Icon, tone, children }) {
   return (
-    <Card className="rc-card-surface rc-dashboard-card h-full">
-      <Card.Header className="p-5 pb-0">
+    <Card className="rc-card-surface rc-dashboard-card">
+      <Card.Header className="flex-row items-center gap-3">
         <div className="flex w-full min-w-0 items-center justify-between gap-4">
-          <Card.Title className="inline-flex min-w-0 items-center gap-1.5 text-sm font-medium">
+          <Card.Title className="rc-module-title inline-flex min-w-0 items-center gap-1.5">
             <span>{title}</span>
             {titleInfo ? (
               <TitleInfoTooltip label={title} text={titleInfo} />
@@ -74,7 +78,7 @@ function GovernanceCard({ title, titleInfo, icon: Icon, tone, children }) {
           </span>
         </div>
       </Card.Header>
-      <Card.Content className="flex min-h-0 flex-1 flex-col p-5 pt-4">
+      <Card.Content className="flex min-h-0 flex-1 flex-col">
         {children}
       </Card.Content>
     </Card>
@@ -129,14 +133,12 @@ function MetricCard({ icon: Icon, label, value, hint, tone }) {
 
 function SectionHeader({ title, description }) {
   return (
-    <div className="mb-5">
-      <div className="inline-flex items-center gap-1.5 text-lg font-medium">
+    <h2 className="rc-section-title inline-flex items-center gap-1.5">
       <span>{title}</span>
       {description ? (
         <TitleInfoTooltip label={title} text={description} />
       ) : null}
-      </div>
-    </div>
+    </h2>
   );
 }
 
@@ -150,62 +152,92 @@ function ChartEmptyState({ title }) {
   );
 }
 
-function XinyuanChartTooltipContent({ active, label, payload, colorForEntry }) {
-  return (
-    <ChartTooltipContent
-      active={active}
-      label={label}
-      payload={colorizeXinyuanChartTooltipPayload(payload, colorForEntry)}
-      valueFormatter={(value) => `${Number(value || 0)} 份`}
-    />
-  );
-}
-
 function SourceDistributionChart({ data }) {
   const chartData = data.slice(0, 6).map((item) => ({
     name: item.label,
     value: item.count,
   }));
-  const colorMap = createXinyuanChartColorMap(chartData.map((item) => item.name));
+  const colorMap = createResolvedXinyuanChartColorMap(chartData.map((item) => item.name));
 
   if (chartData.length === 0) {
     return <ChartEmptyState title="暂无来源分布数据" />;
   }
 
-  return (
-    <BarChart
-      className="rc-chart-interaction"
-      data={chartData}
-      height={320}
-      layout="vertical"
-      margin={{ left: 16, right: 24 }}
-    >
-      <BarChart.Grid horizontal={false} />
-      <BarChart.XAxis allowDecimals={false} type="number" />
-      <BarChart.YAxis dataKey="name" type="category" width={112} />
-      <BarChart.Tooltip
-        content={(
-          <XinyuanChartTooltipContent
-            colorForEntry={({ sourceDatum }) =>
-              colorMap.get(String(sourceDatum?.name || ""))
+  const theme = getXinyuanEChartsTheme();
+  const chartHeight = 220;
+  const option = {
+    grid: { left: 112, right: 40, top: 10, bottom: 10, containLabel: true },
+    xAxis: {
+      type: "value",
+      minInterval: 1,
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+    },
+    yAxis: {
+      type: "category",
+      inverse: true,
+      data: chartData.map((item) => item.name),
+      axisLine: { show: false },
+      axisTick: { show: false },
+    },
+    series: [{
+      type: "bar",
+      name: "数量",
+      barMaxWidth: 18,
+      emphasis: { disabled: true },
+      itemStyle: { borderRadius: [0, 4, 4, 0] },
+      label: {
+        show: true,
+        position: "right",
+        color: theme.label,
+        fontSize: 12,
+        formatter: "{c}",
+      },
+      data: chartData.map((item) => ({
+        value: item.value,
+        itemStyle: { color: colorMap.get(item.name) },
+        emphasis: {
+          itemStyle: { color: colorMap.get(item.name), opacity: 1 },
+        },
+        blur: {
+          itemStyle: { color: colorMap.get(item.name), opacity: 1 },
+        },
+      })),
+    }],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "none" },
+      valueFormatter: (value) => `${value} 份`,
+    },
+  };
+  return <XinyuanEChart ariaLabel="来源应用分布图" height={chartHeight} option={option} />;
+}
+
+function DepartmentRanking({ data }) {
+  const maxValue = Math.max(...data.slice(0, 5).map((item) => item.count), 1);
+
+  if (data.length === 0) {
+    return <ChartEmptyState title="当前还没有已登记的提供部门" />;
   }
+
+  return (
+    <div className="space-y-4">
+      {data.slice(0, 1).map((item) => (
+        <div key={item.key} className="space-y-2">
+          <div className="flex items-center justify-between gap-3">
+            <span className="min-w-0 truncate text-sm">{item.label}</span>
+            <span className="shrink-0 text-sm font-medium tabular-nums">{item.count}</span>
+          </div>
+          <ProgressBar
+            ariaLabel={`${item.label}材料数占比`}
+            value={(item.count / maxValue) * 100}
+            tone="accent"
           />
-        )}
-      />
-      <BarChart.Bar
-        dataKey="value"
-        maxBarSize={28}
-        name="数量"
-        radius={[0, 4, 4, 0]}
-      >
-        {chartData.map((item, index) => (
-          <Cell
-            key={item.name}
-            fill={colorMap.get(item.name) || getXinyuanChartColor(item.name, index)}
-          />
+        </div>
       ))}
-      </BarChart.Bar>
-    </BarChart>
+    </div>
   );
 }
 
@@ -214,63 +246,114 @@ function CategoryDistributionChart({ data, uniqueCategoryCount }) {
     name: item.label,
     value: item.count,
   }));
-  const colorMap = createXinyuanChartColorMap(chartData.map((item) => item.name));
+  const colorMap = createResolvedXinyuanChartColorMap(chartData.map((item) => item.name));
 
   if (chartData.length === 0) {
     return <ChartEmptyState title="暂无分类数据" />;
   }
 
-  return (
-    <PieChart className="rc-chart-interaction" height={320}>
-      <PieChart.Pie
-        data={chartData}
-        dataKey="value"
-        innerRadius="52%"
-        nameKey="name"
-        outerRadius="72%"
-        paddingAngle={2}
-      >
-        {chartData.map((item, index) => (
-          <PieChart.Cell
-            key={item.name}
-            fill={colorMap.get(item.name) || getXinyuanChartColor(item.name, index)}
-          />
-        ))}
-        <PieChart.Label
-          content={({ viewBox }) => {
-            const { cx = 0, cy = 0 } = viewBox || {};
-            return (
-              <text textAnchor="middle" x={cx} y={cy}>
-                <tspan fill="var(--foreground)" fontSize="24" fontWeight="600" x={cx} dy="-0.1em">
-                  {uniqueCategoryCount}
-                </tspan>
-                <tspan fill="var(--muted)" fontSize="12" x={cx} dy="1.6em">
-                  分类热度
-                </tspan>
-              </text>
+  const theme = getXinyuanEChartsTheme();
+  const option = {
+    legend: { bottom: 0, left: "center" },
+    series: [{
+      type: "pie", name: "分类热度", radius: ["52%", "72%"], center: ["50%", "44%"],
+      emphasis: { disabled: true },
+      data: chartData.map((item) => ({
+        name: item.name,
+        value: item.value,
+        itemStyle: { color: colorMap.get(item.name) },
+        emphasis: {
+          itemStyle: { color: colorMap.get(item.name), opacity: 1 },
+        },
+        blur: {
+          itemStyle: { color: colorMap.get(item.name), opacity: 1 },
+        },
+      })),
+      label: { show: true, formatter: ({ name, value }) => `{name|${name}}\n{value|${value} 份}`, rich: { name: { color: theme.label, fontSize: 12, lineHeight: 16 }, value: { color: theme.label, fontSize: 13, fontWeight: 600, lineHeight: 18 } } },
+      labelLine: { show: true, length: 16, length2: 18, lineStyle: { color: theme.grid } },
+    }],
+    tooltip: {
+      trigger: "item",
+      valueFormatter: (value) => `${value} 份`,
+      position: (point, params, dom, rect, size) => {
+        const [viewWidth, viewHeight] = size.viewSize;
+        const [tooltipWidth, tooltipHeight] = size.contentSize;
+        const padding = 12;
+        const isRightSide = point[0] >= viewWidth / 2;
+        const x = isRightSide
+          ? padding
+          : viewWidth - tooltipWidth - padding;
+        const y = Math.max(
+          padding,
+          Math.min(viewHeight - tooltipHeight - padding, point[1] - tooltipHeight / 2),
         );
-          }}
-          position="center"
-        />
-      </PieChart.Pie>
-      <PieChart.Tooltip
-        content={(
-          <XinyuanChartTooltipContent
-            colorForEntry={({ key, index }) =>
-              colorMap.get(String(key || "")) || getXinyuanChartColor(key, index)
+        return [x, y];
+      },
+    },
+  };
+  return <XinyuanEChart ariaLabel="分类热度图" height={220} option={option} />;
+}
+
+function ComplianceDistributionChart({ items, total }) {
+  if (total <= 0) {
+    return <ChartEmptyState title="暂无合规标记数据" />;
   }
-          />
-        )}
-      />
-      <Legend
-        iconSize={8}
-        iconType="circle"
-        wrapperStyle={{
-          fontSize: "var(--rc-chart-legend-font-size)",
-          lineHeight: "var(--rc-chart-legend-line-height)",
-        }}
-      />
-    </PieChart>
+
+  const theme = getXinyuanEChartsTheme();
+  const chartItems = items.map((item, index) => ({
+    ...item,
+    percent: Math.round((item.value / total) * 100),
+    color: theme.palette[[0, 3, 15][index] || 0],
+  }));
+  const option = {
+    grid: { left: 0, right: 0, top: 8, bottom: 8 },
+    xAxis: { type: "value", max: 100, show: false },
+    yAxis: { type: "category", data: ["合规构成"], show: false },
+    series: chartItems.map((item, index) => ({
+      type: "bar",
+      name: item.label,
+      stack: "total",
+      barWidth: 22,
+      data: [item.percent],
+      itemStyle: {
+        color: item.color,
+        borderRadius: index === 0
+          ? [11, 0, 0, 11]
+          : index === chartItems.length - 1
+            ? [0, 11, 11, 0]
+            : 0,
+      },
+      label: {
+        show: item.percent >= 10,
+        position: "inside",
+        color: "#ffffff",
+        fontSize: 12,
+        fontWeight: 600,
+        formatter: `${item.percent}%`,
+      },
+    })),
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      valueFormatter: (value) => `${value}%`,
+    },
+  };
+
+  return (
+    <div className="space-y-4">
+      <XinyuanEChart ariaLabel="合规标记构成图" height={74} option={option} />
+      <div className="grid grid-cols-3 gap-3">
+        {chartItems.map((item) => (
+          <div key={item.label} className="min-w-0">
+            <div className="truncate text-sm text-muted">{item.label}</div>
+            <div className="mt-1 flex items-baseline gap-1.5 tabular-nums">
+              <span className="text-lg font-semibold">{item.value}</span>
+              <span className="text-xs text-muted">{item.percent}%</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }
 
@@ -286,7 +369,7 @@ function ChartPanel({ children, className = "", emptyText = "暂无图表数据"
   return <div className={className}>{children}</div>;
 }
 
-function ProgressBar({ value, tone = "emerald" }) {
+function ProgressBar({ value, tone = "emerald", ariaLabel = "完成比例" }) {
   const normalizedValue = Math.max(0, Math.min(100, value));
   const color =
     tone === "amber"
@@ -298,7 +381,7 @@ function ProgressBar({ value, tone = "emerald" }) {
           : "accent";
 
   return (
-    <HeroProgressBar aria-label="完成比例" color={color} value={normalizedValue}>
+    <HeroProgressBar aria-label={ariaLabel} color={color} value={normalizedValue}>
       <HeroProgressBar.Track>
         <HeroProgressBar.Fill />
       </HeroProgressBar.Track>
@@ -306,33 +389,6 @@ function ProgressBar({ value, tone = "emerald" }) {
   );
 }
 
-function RatioRow({ label, value, total, tone = "emerald", icon: Icon }) {
-  const percent = total > 0 ? Math.round((value / total) * 100) : 0;
-
-  return (
-    <div className="space-y-2.5">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex min-w-0 items-center gap-2">
-          {Icon ? (
-            <span
-              aria-hidden="true"
-              className="grid size-5 shrink-0 place-items-center text-muted"
-            >
-              <Icon size={16} />
-            </span>
-          ) : null}
-          <div className="truncate text-sm">{label}</div>
-        </div>
-        <div className="flex shrink-0 items-center gap-2 tabular-nums">
-          <span className="font-medium">{value}</span>
-          <span className="text-sm text-muted">{percent}%</span>
-        </div>
-      </div>
-      <ProgressBar value={percent} tone={tone} />
-    </div>
-  );
-}
-
 const RECENT_UPLOAD_COLUMNS = [
   {
     key: "materialTitle",
@@ -367,8 +423,8 @@ const RECENT_UPLOAD_COLUMNS = [
     title: "上传人 / 文件大小",
     minWidth: 180,
     render: (item) => (
-      <DataTableTextPair
-        primary={item.uploaderLabel}
+      <DataTablePersonIdentity
+        name={item.uploaderLabel}
         secondary={item.fileSizeLabel}
       />
     ),
@@ -446,10 +502,6 @@ export default function ResourceStatPage() {
       "审计同事"
     );
   }, [userInfo]);
-  const topCategoryCards = useMemo(
-    () => dashboard.categoryGroups.slice(0, 4),
-    [dashboard.categoryGroups],
-  );
   const providedInfoPercent = useMemo(() => {
     if (dashboard.totalCount <= 0) {
       return 0;
@@ -459,11 +511,6 @@ export default function ResourceStatPage() {
       (dashboard.providedInfoCompleteCount / dashboard.totalCount) * 100,
     );
   }, [dashboard.providedInfoCompleteCount, dashboard.totalCount]);
-  const missingProvideInfoCount = useMemo(
-    () =>
-      Math.max(dashboard.totalCount - dashboard.providedInfoCompleteCount, 0),
-    [dashboard.providedInfoCompleteCount, dashboard.totalCount],
-  );
   const plainGovernanceCount = useMemo(
     () =>
       Math.max(
@@ -478,19 +525,8 @@ export default function ResourceStatPage() {
       dashboard.totalCount,
     ],
   );
-  const maxProvideDepartmentCount = useMemo(
-    () =>
-      Math.max(
-        ...dashboard.provideDepartmentGroups
-          .slice(0, 5)
-          .map((item) => item.count),
-        1,
-      ),
-    [dashboard.provideDepartmentGroups],
-  );
-
   return (
-    <div className="space-y-6">
+    <div className="rc-page-stack">
       <Panel className="p-5 sm:p-6">
         <div>
           <h1 className="sr-only">工作台</h1>
@@ -597,103 +633,31 @@ export default function ResourceStatPage() {
         />
       </div>
 
-      <div className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
-        <Panel className="p-5 sm:p-6">
-          <SectionHeader
+      <div className="rc-page-grid rc-chart-grid">
+        <Panel
           title="来源应用分布"
-            description="帮助判断材料是否已经从项目管理、问题整改等应用顺利汇入统一材料池。"
-          />
+          titleInfo="帮助判断材料是否已经从项目管理、问题整改等应用顺利汇入统一材料池。"
+        >
           <ChartPanel emptyText="暂无来源分布数据">
             <SourceDistributionChart data={dashboard.sourceGroups} />
           </ChartPanel>
-          <div className="mt-4 grid gap-3 sm:grid-cols-3">
-            {dashboard.sourceGroups.slice(0, 3).map((item, index) => (
-              <div key={item.key} className="flex min-w-0 items-start gap-3 py-2">
-                <Chip size="sm" variant="soft">{index + 1}</Chip>
-                <div className="min-w-0">
-                  <div className="truncate text-sm font-medium">{item.label}</div>
-                  <div className="mt-1 text-sm text-muted">
-                    {item.count} 份，占比{" "}
-                    {dashboard.totalCount > 0
-                      ? `${Math.round((item.count / dashboard.totalCount) * 100)}%`
-                      : "0%"}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-          <Separator className="my-5" />
-          <div>
-            <div className="text-sm font-medium">来源系统分布</div>
-            <div className="mt-3 grid gap-3 sm:grid-cols-3">
-              {dashboard.sourceSystemGroups.slice(0, 4).length > 0 ? (
-                dashboard.sourceSystemGroups.slice(0, 4).map((item, index) => (
-                  <div key={item.key} className="min-w-0 space-y-3 py-2">
-                    <div className="flex min-w-0 items-start gap-3">
-                      <Chip size="sm" variant="soft">{index + 1}</Chip>
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">
-                          {item.label}
-                        </div>
-                        <div className="mt-1 text-sm text-muted">
-                          {item.count} 份，占比{" "}
-                          {dashboard.totalCount > 0
-                            ? `${Math.round((item.count / dashboard.totalCount) * 100)}%`
-                            : "0%"}
-                        </div>
-                      </div>
-                    </div>
-                    <ProgressBar
-                      value={
-                        dashboard.totalCount > 0
-                          ? (item.count / dashboard.totalCount) * 100
-                          : 0
-                      }
-                      tone={index === 0 ? "rose" : "sky"}
-                    />
-                  </div>
-                ))
-              ) : (
-                <div className="text-sm text-muted">暂无来源系统数据</div>
-              )}
-            </div>
-          </div>
         </Panel>
 
-        <Panel className="p-5 sm:p-6">
-          <SectionHeader
+        <Panel
           title="分类热度"
-            description="按当前材料数量快速观察哪些分类最常用，也方便检查是否出现大量未分类材料。"
-          />
+          titleInfo="按当前材料数量快速观察哪些分类最常用，也方便检查是否出现大量未分类材料。"
+        >
           <ChartPanel emptyText="暂无分类数据">
             <CategoryDistributionChart
               data={dashboard.categoryGroups}
               uniqueCategoryCount={dashboard.uniqueCategoryCount}
             />
           </ChartPanel>
-          <div className="mt-4 grid gap-3 sm:grid-cols-2">
-            {topCategoryCards.length > 0 ? (
-              topCategoryCards.map((item) => (
-                <div key={item.key} className="min-w-0 py-2">
-                  <div className="truncate text-sm text-muted">
-                    {item.label}
-                  </div>
-                  <div className="mt-1 text-2xl font-semibold tabular-nums">
-                    {item.count}
-                  </div>
-                  <div className="mt-1 text-sm text-muted">
-                    占用 {formatFileSize(item.bytes)}
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-sm text-muted">暂无分类数据</div>
-            )}
-          </div>
         </Panel>
+
       </div>
 
-      <section className="min-w-0">
+      <section className="rc-page-section min-w-0">
         <SectionHeader
           title="提供与合规"
           description="根据最新字段快速看清提供信息补录进度，以及涉密、审计部材料的标记情况。"
@@ -735,20 +699,6 @@ export default function ResourceStatPage() {
                 <div className="mt-1 text-sm text-muted">缺时间</div>
               </div>
             </div>
-            <Surface
-              className="mt-auto flex items-start gap-3 rounded-2xl p-4"
-              variant="secondary"
-            >
-              <span
-                aria-hidden="true"
-                className="grid size-5 shrink-0 place-items-center text-muted"
-              >
-                <InformationCircleIcon size={16} />
-              </span>
-              <span className="text-sm leading-5 text-muted">
-                待补录 {missingProvideInfoCount} 份，优先补齐提供部门和提供时间。
-              </span>
-            </Surface>
           </GovernanceCard>
 
           <GovernanceCard
@@ -757,29 +707,14 @@ export default function ResourceStatPage() {
             titleInfo="分别关注敏感材料、审计部材料与常规材料占比。"
             tone="danger"
           >
-            <div className="space-y-3">
-              <RatioRow
-                icon={ShieldExclamationIcon}
-                label="涉密材料"
-                value={dashboard.confidentialCount}
-                total={dashboard.totalCount}
-                tone="rose"
-              />
-              <RatioRow
-                icon={ShieldCheckIcon}
-                label="审计部材料"
-                value={dashboard.auditDeptCount}
-                total={dashboard.totalCount}
-                tone="emerald"
-              />
-              <RatioRow
-                icon={DocumentTextIcon}
-                label="其它材料"
-                value={plainGovernanceCount}
+            <ComplianceDistributionChart
+              items={[
+                { label: "涉密材料", value: dashboard.confidentialCount },
+                { label: "审计部材料", value: dashboard.auditDeptCount },
+                { label: "其它材料", value: plainGovernanceCount },
+              ]}
               total={dashboard.totalCount}
-                tone="sky"
             />
-            </div>
           </GovernanceCard>
 
           <GovernanceCard
@@ -791,35 +726,14 @@ export default function ResourceStatPage() {
               {dashboard.provideDepartmentGroups.length}
             </div>
             <div className="mt-1 text-sm text-muted">已登记部门数</div>
-            <div className="mt-5 space-y-4">
-              {dashboard.provideDepartmentGroups.length > 0 ? (
-                dashboard.provideDepartmentGroups.slice(0, 5).map((item) => (
-                  <div key={item.key}>
-                    <div className="mb-2 flex items-center justify-between gap-3 text-sm">
-                      <div className="min-w-0 truncate font-medium">
-                        {item.label}
-                      </div>
-                      <div className="shrink-0 tabular-nums text-muted">
-                        {item.count} 份
-                      </div>
-                    </div>
-                    <ProgressBar
-                      value={(item.count / maxProvideDepartmentCount) * 100}
-                      tone="sky"
-                    />
-                  </div>
-                ))
-              ) : (
-                <div className="text-sm text-muted">
-                  当前还没有已登记的提供部门
-                </div>
-              )}
+            <div className="mt-5">
+              <DepartmentRanking data={dashboard.provideDepartmentGroups} />
             </div>
           </GovernanceCard>
         </div>
       </section>
 
-      <section className="min-w-0">
+      <section className="rc-page-section min-w-0">
         <SectionHeader
           title="最近上传"
           description="快速浏览最近进入材料池的文件，便于发现异常命名、来源遗漏或归档不完整的情况。"