feat(fe-shell): 主页 KPI 合并网格与空数据态 REQ-USR-003

zichun
1 parent 253aec06
Showing 4 changed files with 376 additions and 1 deletions
frontend/src/pages/home/HomePage/HomePage.module.css
frontend/src/pages/home/HomePage/KpiBoard.tsx
frontend/tests/unit/KpiBoard.test.tsx
frontend/tests/unit/renderShell.tsx
+/* REQ-USR-003: 主页 scoped 样式。语义色用 var(--color-*)；网格线/底色经 token。 */
+
+.home {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+  gap: 10px;
+  padding: 10px;
+  min-height: 100%;
+}
+
+.mainCol {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.panel {
+  background: var(--color-form-bg-edit);
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+}
+
+/* ===== KPI head bar ===== */
+.kpiHead {
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.kpiHeadTitle {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--color-text);
+  margin-right: 6px;
+}
+.kpiStat {
+  color: var(--color-text-secondary);
+}
+.kpiStat b {
+  color: var(--color-error);
+  font-weight: 500;
+  margin-left: 6px;
+  font-size: 14px;
+}
+.kpiStatBlue b {
+  color: var(--color-primary);
+}
+.kpiSep {
+  color: var(--color-border);
+}
+.aiBtn {
+  margin-left: auto;
+}
+
+/* ===== three-col layout ===== */
+.threeCol {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 10px;
+  min-height: 0;
+}
+.leftNav {
+  background: var(--color-form-bg-edit);
+  border: 1px solid var(--color-border);
+  overflow: auto;
+  max-height: 70vh;
+}
+.center {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+/* ===== role / process tree ===== */
+.tree {
+  padding: 6px 0;
+}
+.treeGroup {
+  padding: 8px 14px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.treeItem {
+  padding: 6px 14px 6px 36px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: 13px;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+}
+.treeItem:hover {
+  background: var(--color-table-row-bg-hover);
+}
+.treeItemActive {
+  background: var(--color-table-row-bg-selected);
+  color: var(--color-text);
+}
+
+/* ===== KPI merged grid (复刻原型 kpi-body) ===== */
+.kpiBoard {
+  display: grid;
+  grid-template-columns: 200px 90px 1fr 1fr 90px 90px 130px;
+  border-top: 1px solid var(--color-border);
+  overflow: auto;
+}
+.kpiBoard > div {
+  border-right: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+  padding: 10px 12px;
+  font-size: 13px;
+  min-height: 38px;
+  display: flex;
+  align-items: center;
+}
+.kpiHeadCell {
+  background: var(--color-table-header-bg);
+  font-weight: 500;
+  color: var(--color-table-header-fg);
+  padding: 9px 12px;
+}
+.kpiNavType {
+  justify-content: center;
+}
+.kpiCellCenter {
+  justify-content: center;
+}
+.kpiLink {
+  color: var(--color-primary);
+  cursor: pointer;
+}
+.kpiLink:hover {
+  text-decoration: underline;
+}
+.kpiNum {
+  justify-content: center;
+}
+.kpiNumRed {
+  color: var(--color-error);
+  font-weight: 600;
+}
+.kpiSubProc {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  color: var(--color-text);
+  font-weight: 500;
+  justify-content: center;
+}
+.kpiRowAlt {
+  background: var(--color-form-bg-readonly);
+}
+.kpiEmpty {
+  padding: 32px 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* ===== common ops ===== */
+.commonOps {
+  padding: 14px 18px;
+  height: fit-content;
+}
+.commonOpsTitle {
+  font-size: 14px;
+  color: var(--color-text);
+  margin-bottom: 14px;
+  font-weight: 500;
+}
+.commonOpsLink {
+  display: block;
+  color: var(--color-primary);
+  padding: 8px 0;
+  font-size: 13px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+}
+.commonOpsLink:hover {
+  text-decoration: underline;
+}
+// REQ-USR-003: KPI 合并网格（D5：CSS Grid gridRow span 复刻原型 kpi-body 合并）。
+// 「导航类型」整列一格跨全部行；「角色」「子流程」按 roleSpan/subSpan 合并；空数据 → Empty。
+import { Empty } from 'antd';
+import type { KpiRow } from './dashboardData';
+import { KPI_HEADERS } from './dashboardData';
+import styles from './HomePage.module.css';
+
+interface KpiBoardProps {
+  rows: KpiRow[];
+  /** KPI 待处理事项/描述为纯展示（蓝色链接样式），点击不跳转；保留占位以示意无导航。 */
+  onNavigate?: (target: string) => void;
+}
+
+export default function KpiBoard({ rows }: KpiBoardProps) {
+  if (!rows.length) {
+    return (
+      <div className={styles.kpiEmpty} data-testid="kpi-empty">
+        <Empty />
+      </div>
+    );
+  }
+
+  const total = rows.length;
+  // 表头行 = 第 1 行；数据行从第 2 行起
+  const cells: React.ReactNode[] = [];
+
+  // 表头 7 列
+  KPI_HEADERS.forEach((h, i) => {
+    cells.push(
+      <div key={`h-${i}`} className={styles.kpiHeadCell} style={{ gridColumn: i + 1, gridRow: 1 }}>
+        {h}
+      </div>,
+    );
+  });
+
+  // 导航类型：整列一格，跨全部数据行（复刻原型 navCell '按角色'）
+  cells.push(
+    <div
+      key="navtype"
+      className={styles.kpiNavType}
+      style={{ gridColumn: 1, gridRow: `2 / span ${total}` }}
+    >
+      按角色
+    </div>,
+  );
+
+  rows.forEach((row, idx) => {
+    const curRow = idx + 2;
+    const alt = idx % 2 === 1 ? styles.kpiRowAlt : '';
+
+    // 角色（带 rowSpan）
+    if (row.role) {
+      const span = row.roleSpan ?? 1;
+      cells.push(
+        <div
+          key={`role-${idx}`}
+          className={`${styles.kpiCellCenter} ${alt}`}
+          style={{ gridColumn: 2, gridRow: `${curRow} / span ${span}` }}
+        >
+          {row.role}
+        </div>,
+      );
+    }
+
+    // KPI 待处理事项（蓝色链接样式，纯展示）
+    cells.push(
+      <div
+        key={`item-${idx}`}
+        className={`${styles.kpiLink} ${alt}`}
+        style={{ gridColumn: 3, gridRow: curRow }}
+      >
+        {row.item}
+      </div>,
+    );
+
+    // KPI 内容描述（蓝色链接样式，纯展示）
+    cells.push(
+      <div
+        key={`desc-${idx}`}
+        className={`${styles.kpiLink} ${alt}`}
+        style={{ gridColumn: 4, gridRow: curRow }}
+      >
+        {row.desc}
+      </div>,
+    );
+
+    // 今日未处理
+    cells.push(
+      <div
+        key={`today-${idx}`}
+        className={`${styles.kpiNum} ${row.red ? styles.kpiNumRed : ''} ${alt}`}
+        style={{ gridColumn: 5, gridRow: curRow }}
+      >
+        {row.today}
+      </div>,
+    );
+
+    // 未清总数
+    cells.push(
+      <div
+        key={`total-${idx}`}
+        className={`${styles.kpiNum} ${row.red ? styles.kpiNumRed : ''} ${alt}`}
+        style={{ gridColumn: 6, gridRow: curRow }}
+      >
+        {row.total}
+      </div>,
+    );
+
+    // 子流程（带 rowSpan）
+    if (row.sub && row.subSpan) {
+      cells.push(
+        <div
+          key={`sub-${idx}`}
+          className={styles.kpiSubProc}
+          style={{ gridColumn: 7, gridRow: `${curRow} / span ${row.subSpan}` }}
+        >
+          {row.sub}
+        </div>,
+      );
+    }
+  });
+
+  return (
+    <div
+      className={styles.kpiBoard}
+      style={{ gridTemplateRows: `38px repeat(${total}, minmax(38px, auto))` }}
+    >
+      {cells}
+    </div>
+  );
+}
+// REQ-USR-003: KpiBoard KPI 合并网格 + 空数据（BR11 / empty 态 / D5）
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfigProvider, App as AntdApp } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
+import KpiBoard from '../../src/pages/home/HomePage/KpiBoard';
+import { KPI_ROWS, KPI_HEADERS } from '../../src/pages/home/HomePage/dashboardData';
+
+function renderBoard(ui: React.ReactElement) {
+  return render(
+    <ConfigProvider locale={zhCN}>
+      <AntdApp>{ui}</AntdApp>
+    </ConfigProvider>,
+  );
+}
+
+describe('KpiBoard', () => {
+  it('renders 7 column headers', () => {
+    renderBoard(<KpiBoard rows={KPI_ROWS} />);
+    KPI_HEADERS.forEach((h) => {
+      expect(screen.getByText(h)).toBeInTheDocument();
+    });
+  });
+
+  it('renders all kpi rows with item/desc/today/total', () => {
+    renderBoard(<KpiBoard rows={KPI_ROWS} />);
+    expect(screen.getByText('01/04【新增】新报价单')).toBeInTheDocument();
+    expect(screen.getByText('02/04 审核后报价单->客户确认价格')).toBeInTheDocument();
+    // 红色统计数（red 行）
+    const red = screen.getAllByText('16');
+    expect(red.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('renders Empty when rows is empty', () => {
+    renderBoard(<KpiBoard rows={[]} />);
+    expect(screen.getByTestId('kpi-empty')).toBeInTheDocument();
+    // AntD Empty 默认描述「暂无数据」（可能在 <p> 与 svg <title> 各出现一次）
+    expect(screen.getAllByText('暂无数据').length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('KPI item/desc rendered as link-styled text without navigation', async () => {
+    const onNav = vi.fn();
+    renderBoard(<KpiBoard rows={KPI_ROWS} onNavigate={onNav} />);
+    const item = screen.getByText('01/04【新增】新报价单');
+    await userEvent.click(item);
+    // 纯展示，不发生路由跳转
+    expect(onNav).not.toHaveBeenCalled();
+  });
+});
@@ -5,6 +5,7 @@ import { render } from &#39;@testing-library/react&#39;;
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { App as AntdApp, ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh_CN';
 import { configureStore } from '@reduxjs/toolkit';
 import authReducer, { type AuthState } from '../../src/store/slices/authSlice';
 import type { RootState } from '../../src/store/store';
@@ -29,7 +30,7 @@ export function renderShell(ui: ReactElement, options?: RenderShellOptions) {
   const store = options?.store ?? makeShellStore(options?.preloadedAuth);
   const result = render(
     <Provider store={store}>
-      <ConfigProvider>
+      <ConfigProvider locale={zhCN}>
         <AntdApp>
           <MemoryRouter initialEntries={options?.initialEntries ?? ['/']}>
             {ui}