wurenzhi
2b86715c09
- 移除未使用的TabPane组件 - 修复类型定义和导入方式 - 优化mock数据源的环境变量判断逻辑 - 更新文档结构并归档旧文件 - 添加新的UI组件和Memo组件 - 调整API路径和响应处理
210 lines
4.5 KiB
Markdown
210 lines
4.5 KiB
Markdown
# 前端架构
|
|
|
|
> **入口**: [_index.md](_index.md)
|
|
|
|
---
|
|
|
|
## 1. 技术栈
|
|
|
|
| 技术 | 版本 | 用途 |
|
|
|------|------|------|
|
|
| UmiJS | 4.x | 前端框架 |
|
|
| React | 18.x | UI库 |
|
|
| Ant Design | 5.x | 组件库 |
|
|
| TypeScript | 5.x | 类型系统 |
|
|
| axios | 1.x | HTTP请求 |
|
|
|
|
---
|
|
|
|
## 2. 目录结构
|
|
|
|
```
|
|
dashboard/src/
|
|
├── pages/ # 页面组件
|
|
│ ├── product/ # 商品管理
|
|
│ ├── order/ # 订单管理
|
|
│ ├── inventory/ # 库存管理
|
|
│ ├── finance/ # 财务管理
|
|
│ └── ...
|
|
├── components/ # 公共组件
|
|
│ ├── Layout/ # 布局组件
|
|
│ ├── Table/ # 表格组件
|
|
│ └── Form/ # 表单组件
|
|
├── models/ # 状态管理
|
|
│ ├── product.ts # 商品状态
|
|
│ ├── order.ts # 订单状态
|
|
│ └── user.ts # 用户状态
|
|
├── services/ # 数据源
|
|
│ ├── productDataSource.ts
|
|
│ └── orderDataSource.ts
|
|
├── utils/ # 工具函数
|
|
├── types/ # 类型定义
|
|
└── mock/ # Mock数据
|
|
```
|
|
|
|
---
|
|
|
|
## 3. 页面结构
|
|
|
|
### 3.1 标准页面模板
|
|
|
|
```tsx
|
|
import { PageContainer } from '@ant-design/pro-components';
|
|
import { Table, Button, Space } from 'antd';
|
|
|
|
const ProductList: React.FC = () => {
|
|
const columns = [
|
|
{ title: '商品名称', dataIndex: 'name' },
|
|
{ title: '价格', dataIndex: 'price' },
|
|
{ title: '状态', dataIndex: 'status' },
|
|
];
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Space style={{ marginBottom: 16 }}>
|
|
<Button type="primary">新建</Button>
|
|
</Space>
|
|
<Table columns={columns} dataSource={[]} />
|
|
</PageContainer>
|
|
);
|
|
};
|
|
|
|
export default ProductList;
|
|
```
|
|
|
|
### 3.2 页面分类
|
|
|
|
| 页面类型 | 说明 | 示例 |
|
|
|---------|------|------|
|
|
| 列表页 | 数据展示、筛选、操作 | 商品列表、订单列表 |
|
|
| 详情页 | 单条数据详情 | 商品详情、订单详情 |
|
|
| 表单页 | 数据创建/编辑 | 新建商品、编辑订单 |
|
|
| 分析页 | 数据可视化 | 销售报表、利润分析 |
|
|
|
|
---
|
|
|
|
## 4. 状态管理
|
|
|
|
### 4.1 Umi Model
|
|
|
|
```typescript
|
|
// models/product.ts
|
|
import { useState, useCallback } from 'react';
|
|
import { productDataSource } from '@/services/productDataSource';
|
|
|
|
export default function useProductModel() {
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const fetchProducts = useCallback(async (params) => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await productDataSource.list(params);
|
|
setProducts(data);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
return {
|
|
products,
|
|
loading,
|
|
fetchProducts,
|
|
};
|
|
}
|
|
```
|
|
|
|
### 4.2 使用方式
|
|
|
|
```tsx
|
|
import { useModel } from 'umi';
|
|
|
|
const ProductList = () => {
|
|
const { products, loading, fetchProducts } = useModel('product');
|
|
|
|
useEffect(() => {
|
|
fetchProducts({});
|
|
}, []);
|
|
|
|
return <Table loading={loading} dataSource={products} />;
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 数据源层
|
|
|
|
### 5.1 DataSource设计
|
|
|
|
```typescript
|
|
// services/productDataSource.ts
|
|
import { request } from 'umi';
|
|
|
|
export const productDataSource = {
|
|
list: async (params: ListParams) => {
|
|
const response = await request('/api/v1/products', { params });
|
|
return response.data;
|
|
},
|
|
|
|
get: async (id: string) => {
|
|
const response = await request(`/api/v1/products/${id}`);
|
|
return response.data;
|
|
},
|
|
|
|
create: async (data: CreateProductRequest) => {
|
|
const response = await request('/api/v1/products', {
|
|
method: 'POST',
|
|
data,
|
|
});
|
|
return response.data;
|
|
},
|
|
|
|
update: async (id: string, data: UpdateProductRequest) => {
|
|
const response = await request(`/api/v1/products/${id}`, {
|
|
method: 'PUT',
|
|
data,
|
|
});
|
|
return response.data;
|
|
},
|
|
};
|
|
```
|
|
|
|
### 5.2 Mock支持
|
|
|
|
```typescript
|
|
// mock/product.ts
|
|
export default {
|
|
'GET /api/v1/products': {
|
|
success: true,
|
|
data: [
|
|
{ id: '1', name: '商品1', price: 100 },
|
|
{ id: '2', name: '商品2', price: 200 },
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 6. 组件规范
|
|
|
|
### 6.1 组件大小限制
|
|
|
|
| 类型 | 限制 |
|
|
|------|------|
|
|
| UI组件 | ≤ 300 行 |
|
|
| 页面组件 | ≤ 500 行 |
|
|
| 复杂组件 | 拆分子组件 |
|
|
|
|
### 6.2 组件命名
|
|
|
|
| 类型 | 格式 | 示例 |
|
|
|------|------|------|
|
|
| 页面 | PascalCase | `ProductList.tsx` |
|
|
| 组件 | PascalCase | `ProductCard.tsx` |
|
|
| 工具 | camelCase | `formatPrice.ts` |
|
|
|
|
---
|
|
|
|
*最后更新: 2026-03-22*
|