在企业级中后台系统中，数据面板是最常见的业务场景。随着业务发展，会面临：
- 需求变更频繁：产品经理经常调整筛选条件、表格列、统计指标
- 多租户/多角色：不同角色需要看到不同的数据视图
- 跨项目复用：多个业务线需要类似的表格/表单组件，但配置各异
- 研发效率瓶颈：每次改动都需要前端开发介入，响应慢
核心问题：如何让非技术人员也能配置数据面板，而不是依赖代码开发？
解决方案：配置驱动的开发模式 —— 前端定义 Schema 规范，后端/配置平台生成配置，前端根据配置动态渲染 UI。
- 实现 Schema 配置驱动
- 支持筛选表单、统计卡片、数据表格
- 组件化拆分，职责清晰
- 模拟数据请求，统一 loading 状态
- [] 代码报错，需要修复
- 筛选条件同步到 URL Query（支持分享、书签）
- 表格支持排序、筛选、分页联动
- 配置表单 Schema（动态渲染配置界面）
- 错误边界处理（ErrorBoundary）
- 支持 Schema 版本管理，平滑升级
- 配置校验（JSON Schema / Zod）
- 虚拟滚动（大数据量优化）
- 离线缓存（IndexedDB / Service Worker）
- 支持多种渲染模式（表格、卡片、看板）
┌─────────────────────────────────────────────────────────┐
│ Schema Configuration │
│ { filters, stats, table, ... } │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ Schema Registry │
│ 解析 Schema → 分发到对应组件 │
└─────────────────────────────────────────────────────────┘
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Filter │ │ Stats │ │ Table │
│ Renderer │ │ Renderer │ │ Renderer │
└──────────┘ └──────────┘ └──────────┘
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Input │ │ Card │ │ Column │
│ Select │ │ Chart │ │ Sort │
│ Date │ │ Number │ │ Filter │
└──────────┘ └──────────┘ └──────────┘
interface SchemaV1 {
version: 1;
filters: FilterItem[];
stats: StatItem[];
table: TableConfig;
}
// 未来可扩展
interface SchemaV2 extends SchemaV1 {
version: 2;
actions: ActionItem[]; // 行操作按钮
permissions?: string[]; // 权限控制
}
type FilterFieldType = 'input' | 'select' | 'dateRange' | 'cascader' | 'treeSelect';
type StatWidgetType = 'number' | 'chart' | 'progress' | 'trend';
type ColumnRenderType = 'text' | 'tag' | 'image' | 'link' | 'custom';
| 能力维度 | 考察点 |
|---|---|
| 抽象能力 | Schema 设计是否合理，是否便于扩展 |
| 组件化思维 | 是否做到高内聚低耦合 |
| TypeScript | 类型定义是否严谨，泛型运用 |
| 性能意识 | 大数据量处理、缓存策略 |
| 工程化 | 目录结构、命名规范、代码组织 |
| 架构设计 | 可扩展性、配置校验、版本管理 |
npm install
npm run dev
访问 http://localhost:3000/dashboard
├── app/
│ └── dashboard/page.tsx # 页面入口
├── components/dashboard/
│ ├── FilterForm.tsx # 筛选表单
│ ├── StatCards.tsx # 统计卡片
│ └── DataTable.tsx # 数据表格
└── lib/
├── schema.tsx # Schema 类型定义
└── request.ts # 请求封装
35/F,Tencent Building,Kejizhongyi Avenue,Nanshan District,Shenzhen
