{Array.from({ length: rows }).map((_, i) => (

))}

) } export function CardSkeleton() { return (

) } export function DetailSkeleton() { return (

) } ``` **替换清单**（13 处 "加载中..."）： | 文件 | 行号 | 替换为 | |------|------|--------| | Dashboard.tsx | L112 | `` | | Roster.tsx | L249, L702 | `` | | Money.tsx | L239, L371, L719, L933, L1268 | `` | | SocialInsurance.tsx | L314, L623 | `` | | AIAssistant.tsx | L773 | `` | | portal/Payslip.tsx | L131 | `` | | portal/MyContract.tsx | L70 | `` | | portal/ContractConfirm.tsx | L85 | `` | | Contracts.tsx | L82 | `` | **验收标准**：`grep -r "加载中" src/` 返回 0 结果，加载时显示骨架屏动画。 --- ### P3.4 搜索防抖 **修改文件**：`src/pages/Roster.tsx` ```tsx import { useDeferredValue } from 'react' const [search, setSearch] = useState('') const deferredSearch = useDeferredValue(search) // queryKey 使用 deferredSearch 而非 search const { data: rosterData } = useQuery({ queryKey: ['roster', page, pageSize, deferredSearch, filterStatus, filterContractStatus], queryFn: async () => { const params: any = { page, pageSize } if (deferredSearch) params.search = deferredSearch // ... }, }) ``` **验收标准**：快速输入时不会每次按键触发 API 请求，停止输入 ~200ms 后才发请求。 --- ## Phase 4：视觉与数据可视化（2-3 天） ### P4.1 主色调暖 **修改文件**：`tailwind.config.js` ```js // 当前：冷蓝 primary: { DEFAULT: '#2563EB', light: '#3B82F6', dark: '#1D4ED8' } // 目标：indigo-600（略带紫调，专业且亲和） primary: { DEFAULT: '#4F46E5', light: '#6366F1', dark: '#4338CA' } ``` **影响范围**：所有使用 `text-primary`、`bg-primary`、`border-primary` 的组件自动生效。 **验收标准**：主色从冷蓝变为 indigo，与 Tailwind indigo-600 色卡一致。 --- ### P4.2 Dashboard 数据可视化 **安装**：`npm install recharts` **修改文件**：`src/pages/Dashboard.tsx` 在概览 tab 的统计卡片下方增加： ```tsx import { LineChart, Line, ResponsiveContainer, XAxis, YAxis, Tooltip, PieChart, Pie, Cell } from 'recharts' // 月度薪税趋势迷你折线图

月度薪税趋势

// 风险分布环形图

风险分布

{riskData.map((entry, i) => )} ``` **验收标准**：Dashboard 概览页有折线图和环形图，图表响应式，tooltip 正常显示。 --- ### P4.3 Modal 过渡动画 **修改文件**：`src/components/ui/Modal.tsx` ```tsx import { ReactNode, useEffect, useState } from 'react' import { X } from 'lucide-react' import clsx from 'clsx' export default function Modal({ open, onClose, title, children, className, size = 'md' }: ModalProps) { const [show, setShow] = useState(false) useEffect(() => { if (open) { setShow(true) } else { const timer = setTimeout(() => setShow(false), 200) return () => clearTimeout(timer) } }, [open]) // body overflow 控制（保持原有逻辑） useEffect(() => { document.body.style.overflow = open ? 'hidden' : '' return () => { document.body.style.overflow = '' } }, [open]) if (!show && !open) return null return (

{/* title + children 保持不变 */}

) } ``` **验收标准**：弹窗有淡入+缩放动画，关闭有淡出动画，~200ms。 --- ### P4.4 移动端表格响应式 **新增组件**：`src/components/ui/ResponsiveTable.tsx` ```tsx import { ReactNode } from 'react' import clsx from 'clsx' interface Column { key: string label: string render?: (row: T) => ReactNode priority: 'high' | 'medium' | 'low' className?: string } interface ResponsiveTableProps { columns: Column[] data: T[] rowKey: (row: T) => string onRowClick?: (row: T) => void } export default function ResponsiveTable({ columns, data, rowKey, onRowClick }: ResponsiveTableProps) { return ( <> {/* 桌面端/平板：表格 */} {columns.map(col => ( ))} {data.map(row => ( onRowClick?.(row)}> {columns.map(col => ( ))} ))}

{col.label}
{col.render ? col.render(row) : (row as any)[col.key]}

{/* 手机端：卡片列表 */}

{data.map(row => { const highCols = columns.filter(c => c.priority === 'high') return (

onRowClick?.(row)}> {highCols.map(col => (

{col.label} {col.render ? col.render(row) : (row as any)[col.key]}

))}

) })}

) } ``` **应用页面**：Roster、Money（工资条列表）、SocialInsurance（月度申报表） **验收标准**：iPhone SE 上列表为卡片模式，iPad 上为表格，桌面端完整表格。 --- ## Phase 5：a11y 与细节打磨（1-2 天） ### P5.1 div onClick → button + aria **修改文件**：`src/components/layout/TopNav.tsx` ```tsx // 添加 aria 属性