数据加载失败
...
;
};
```
### 12.3 懒加载
**路由懒加载**:
```typescript
const Dashboard = lazy(() => import('./pages/Dashboard'));
const ProjectList = lazy(() => import('./pages/ProjectList'));
const App = () => (
{loaded ? 
:
);
};
```
### 12.5 缓存策略
**React Query缓存**:
```typescript
// 默认缓存时间：5分钟
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000,
cacheTime: 10 * 60 * 1000,
retry: 1,
},
},
});
```
---
## 附录
### A. API错误码对照表
| 错误码 | 说明 | HTTP状态码 | 处理方式 |
|--------|------|-----------|---------|
| 1001 | 参数验证失败 | 400 | 显示字段级错误提示 |
| 1002 | 用户名或密码错误 | 401 | 提示"用户名或密码错误" |
| 1003 | Token无效或过期 | 401 | 跳转登录页 |
| 2001 | 资源不存在 | 404 | 显示"资源不存在" |
| 2002 | 资源已存在 | 409 | 显示"已存在"提示 |
| 3001 | 权限不足 | 403 | 显示"无权限"提示 |
| 5000 | 服务器内部错误 | 500 | 显示"服务器错误" |
### B. 常用格式化函数
```typescript
// utils/format.ts
// 格式化金额
export const formatMoney = (amount: number): string => {
return amount.toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
};
// 格式化百分比
export const formatPercentage = (value: number): string => {
return `${(value * 100).toFixed(2)}%`;
};
// 格式化日期
export const formatDate = (date: string | Date): string => {
const d = new Date(date);
return d.toLocaleDateString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
});
};
// 格式化日期时间
export const formatDateTime = (date: string | Date): string => {
const d = new Date(date);
return d.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
};
```
### C. TypeScript类型定义
```typescript
// types/project.ts
export interface Project {
id: number;
project_no: string;
power_contract_no?: string;
name: string;
engineering_type: '基建' | '业扩' | '客户' | '营销' | '检修';
owner_unit?: string;
owner_contact?: string;
contract_amount: number;
signing_date?: string;
start_date?: string;
planned_end_date?: string;
actual_end_date?: string;
project_department?: string;
project_leader?: string;
payment_method?: string;
// ... 其他字段
}
export interface ProjectListParams {
page: number;
page_size: number;
project_no?: string;
engineering_type?: string;
project_department?: string;
signing_date_start?: string;
signing_date_end?: string;
contract_amount_min?: number;
contract_amount_max?: number;
keyword?: string;
sort_by?: string;
sort_order?: 'asc' | 'desc';
}
export interface ProjectFormData {
project_no: string;
name: string;
engineering_type: string;
contract_amount: number;
// ... 其他字段
}
```
```typescript
// types/user.ts
export interface UserInfo {
id: number;
username: string;
real_name: string;
department: string;
role: 'admin' | 'market' | 'other';
email?: string;
phone?: string;
is_active: boolean;
}
export interface CreateUserForm {
username: string;
password: string;
real_name: string;
department: string;
role: string;
email?: string;
phone?: string;
}
```
```typescript
// types/statistics.ts
export interface StatisticsResponse {
total_count: number;
total_investment: number;
total_contract_amount: number;
total_settlement_amount: number;
total_receipt_amount: number;
total_payment_amount: number;
avg_receipt_completion_rate: number;
avg_payment_completion_rate: number;
avg_cumulative_progress: number;
}
export interface GroupStatisticsItem {
engineering_type: string;
count: number;
total_contract_amount: number;
total_receipt_amount: number;
total_payment_amount: number;
}
export interface TimelineStatisticsItem {
month: string;
count: number;
total_contract_amount: number;
}
```
---
**文档结束**
如有任何疑问，请参考：
- API文档：`docs/desigen/api.md`
- UI设计规范：`docs/desigen/ui-design-spec.md`
- 设计参考预览：`docs/desigen/design-preview.html`
加油！！！