feat: 添加前端页面和业务说明书
refactor(server): 重构服务层代码结构 feat(server): 添加基础设施、跨境电商、AI决策等核心服务 docs: 完善前端业务说明书和开发进度文档 style: 格式化代码和文档
This commit is contained in:
@@ -12,110 +12,89 @@
|
||||
|------|------|------|------|
|
||||
| **Framework** | React | 18.x | UI 框架 |
|
||||
| **Language** | TypeScript | 5.x | 开发语言 |
|
||||
| **Build Tool** | Vite | 5.x | 构建工具 |
|
||||
| **Build Tool** | Umi | 4.x | 构建工具 |
|
||||
| **UI Library** | Ant Design | 5.x | 组件库 |
|
||||
| **State** | Zustand | 4.x | 状态管理 |
|
||||
| **Query** | TanStack Query | 5.x | 数据获取 |
|
||||
| **Routing** | React Router | 6.x | 路由管理 |
|
||||
| **Charts** | Ant Design Charts | 2.x | 数据可视化 |
|
||||
| **Testing** | Vitest | 1.x | 单元测试 |
|
||||
| **State** | Redux | 4.x | 状态管理 |
|
||||
| **Router** | Umi Router | 4.x | 路由管理 |
|
||||
| **Testing** | Jest | 29.x | 单元测试 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 目录结构 (Directory Structure)
|
||||
|
||||
```
|
||||
web/src/
|
||||
dashboard/src/
|
||||
│
|
||||
├─ .umi/ # Umi 生成文件
|
||||
│ ├─ core/
|
||||
│ ├─ appData.json
|
||||
│ └─ exports.ts
|
||||
│
|
||||
├─ components/ # 公共组件
|
||||
│ ├─ Layout/ # 布局组件
|
||||
│ │ ├─ MainLayout.tsx
|
||||
│ │ ├─ Sidebar.tsx
|
||||
│ │ └─ Header.tsx
|
||||
│ ├─ Common/ # 通用组件
|
||||
│ │ ├─ DataTable.tsx
|
||||
│ │ ├─ FilterPanel.tsx
|
||||
│ │ ├─ StatusBadge.tsx
|
||||
│ │ └─ ActionButtons.tsx
|
||||
│ └─ Charts/ # 图表组件
|
||||
│ ├─ ProfitChart.tsx
|
||||
│ ├─ OrderTrendChart.tsx
|
||||
│ └─ InventoryChart.tsx
|
||||
│ ├─ ui/ # UI 组件库
|
||||
│ │ ├─ Button.tsx
|
||||
│ │ ├─ Card.tsx
|
||||
│ │ ├─ ComponentLibrary.tsx
|
||||
│ │ ├─ Input.tsx
|
||||
│ │ ├─ ResponsiveLayout.tsx
|
||||
│ │ └─ index.ts
|
||||
│ ├─ LazyLoad.tsx # 懒加载组件
|
||||
│ ├─ Table.tsx # 表格组件
|
||||
│ ├─ VirtualList.tsx # 虚拟滚动组件
|
||||
│ ├── README.md
|
||||
│ └── index.ts
|
||||
│
|
||||
├─ models/ # 状态管理
|
||||
│ ├─ StateManagement.ts # 状态管理主文件
|
||||
│ ├─ global.ts # 全局状态
|
||||
│ ├─ order.ts # 订单状态
|
||||
│ ├─ product.ts # 商品状态
|
||||
│ └── index.ts
|
||||
│
|
||||
├─ pages/ # 页面组件
|
||||
│ ├─ Dashboard/ # 首页/仪表盘
|
||||
│ │ └─ index.tsx
|
||||
│ ├─ Products/ # 商品管理
|
||||
│ │ ├─ index.tsx # 商品列表
|
||||
│ │ ├─ Detail.tsx # 商品详情
|
||||
│ │ ├─ Create.tsx # 创建商品
|
||||
│ │ └─ Review.tsx # 商品审核
|
||||
│ ├─ Orders/ # 订单管理
|
||||
│ │ ├─ index.tsx # 订单列表
|
||||
│ │ ├─ Detail.tsx # 订单详情
|
||||
│ │ └─ Audit.tsx # 订单审核
|
||||
│ ├─ ABTest/ # A/B测试
|
||||
│ ├─ Ad/ # 广告管理
|
||||
│ ├─ AfterSales/ # 售后服务
|
||||
│ ├─ Auth/ # 认证
|
||||
│ ├─ B2B/ # B2B贸易
|
||||
│ ├─ B2BTrade/ # B2B贸易
|
||||
│ ├─ Blacklist/ # 黑名单管理
|
||||
│ ├─ Compliance/ # 合规管理
|
||||
│ ├─ Finance/ # 财务管理
|
||||
│ │ ├─ index.tsx # 财务概览
|
||||
│ │ ├─ Transactions.tsx # 交易流水
|
||||
│ │ └─ Reconciliation.tsx # 利润对账
|
||||
│ ├─ Inventory/ # 库存管理
|
||||
│ │ ├─ index.tsx # 库存概览
|
||||
│ │ ├─ Warehouses.tsx # 仓库管理
|
||||
│ │ └─ Forecast.tsx # 库存预测
|
||||
│ ├─ Marketing/ # 营销广告
|
||||
│ │ ├─ index.tsx # 营销概览
|
||||
│ │ ├─ Ads.tsx # 广告管理
|
||||
│ │ └─ Competitors.tsx # 竞品监控
|
||||
│ ├─ Logistics/ # 物流管理
|
||||
│ ├─ Marketing/ # 营销管理
|
||||
│ ├─ Merchant/ # 商户管理
|
||||
│ ├─ Orders/ # 订单管理
|
||||
│ ├─ Product/ # 商品管理
|
||||
│ ├─ Reports/ # 报表中心
|
||||
│ ├─ Return/ # 退货管理
|
||||
│ ├─ Settings/ # 设置
|
||||
│ ├─ Suppliers/ # 供应商管理
|
||||
│ │ ├─ index.tsx # 供应商列表
|
||||
│ │ └─ Detail.tsx # 供应商详情
|
||||
│ ├─ Reports/ # 报表分析
|
||||
│ │ ├─ index.tsx # 报表中心
|
||||
│ │ ├─ Profit.tsx # 利润报表
|
||||
│ │ └─ Performance.tsx # 绩效报表
|
||||
│ ├─ Settings/ # 系统设置
|
||||
│ │ ├─ index.tsx # 设置首页
|
||||
│ │ ├─ Profile.tsx # 个人设置
|
||||
│ │ ├─ Tenant.tsx # 租户设置
|
||||
│ │ └─ Users.tsx # 用户管理
|
||||
│ └─ Login/ # 登录页
|
||||
│ └─ index.tsx
|
||||
│
|
||||
├─ hooks/ # 自定义 Hooks
|
||||
│ ├─ useAuth.ts # 认证相关
|
||||
│ ├─ useTenant.ts # 租户相关
|
||||
│ ├─ useProducts.ts # 商品数据
|
||||
│ ├─ useOrders.ts # 订单数据
|
||||
│ └─ useFinance.ts # 财务数据
|
||||
│
|
||||
├─ stores/ # 状态管理 (Zustand)
|
||||
│ ├─ authStore.ts # 认证状态
|
||||
│ ├─ tenantStore.ts # 租户状态
|
||||
│ ├─ productStore.ts # 商品状态
|
||||
│ └─ uiStore.ts # UI 状态
|
||||
│ ├─ UserAsset/ # 用户资产
|
||||
│ └─ index.tsx # 首页/仪表盘
|
||||
│
|
||||
├─ services/ # API 服务
|
||||
│ ├─ api.ts # Axios 实例
|
||||
│ ├─ productService.ts # 商品 API
|
||||
│ ├─ orderService.ts # 订单 API
|
||||
│ ├─ financeService.ts # 财务 API
|
||||
│ └─ authService.ts # 认证 API
|
||||
│ ├─ api/ # API 客户端
|
||||
│ │ ├─ client.ts
|
||||
│ │ ├─ index.ts
|
||||
│ │ ├─ order.ts
|
||||
│ │ ├─ product.ts
|
||||
│ │ └─ user.ts
|
||||
│ ├─ merchantOrderService.ts # 商户订单服务
|
||||
│ ├─ merchantService.ts # 商户服务
|
||||
│ ├─ merchantSettlementService.ts # 商户结算服务
|
||||
│ └─ merchantShopService.ts # 商户店铺服务
|
||||
│
|
||||
├─ types/ # 类型定义
|
||||
│ ├─ product.ts # 商品类型
|
||||
│ ├─ order.ts # 订单类型
|
||||
│ ├─ finance.ts # 财务类型
|
||||
│ └─ common.ts # 通用类型
|
||||
├─ tests/ # 测试文件
|
||||
│ ├─ frontend.functional.test.ts # 前端功能测试
|
||||
│ └─ frontend.integration.test.ts # 前端集成测试
|
||||
│
|
||||
├─ utils/ # 工具函数
|
||||
│ ├─ formatters.ts # 格式化
|
||||
│ ├─ validators.ts # 校验
|
||||
│ └─ constants.ts # 常量
|
||||
│
|
||||
├─ styles/ # 样式文件
|
||||
│ └─ global.css
|
||||
│
|
||||
└─ App.tsx # 应用入口
|
||||
└─ utils/ # 工具函数
|
||||
├─ PerformanceOptimization.ts # 性能优化
|
||||
├─ performance.ts # 性能相关
|
||||
├─ responsive.ts # 响应式相关
|
||||
└─ security.ts # 安全相关
|
||||
```
|
||||
|
||||
---
|
||||
@@ -212,10 +191,10 @@ const roleRoutes = {
|
||||
- 套利分析
|
||||
|
||||
**页面组件**
|
||||
- `Products/index.tsx` - 商品列表页
|
||||
- `Products/Detail.tsx` - 商品详情页
|
||||
- `Products/Create.tsx` - 创建商品页
|
||||
- `Products/Review.tsx` - 商品审核页
|
||||
- `Product/index.tsx` - 商品管理入口
|
||||
- `Product/ProductDetail.tsx` - 商品详情页
|
||||
- `Product/ProductPublishForm.tsx` - 商品发布表单
|
||||
- `Product/MaterialUpload.tsx` - 物料上传
|
||||
|
||||
### 4.2 订单管理模块
|
||||
|
||||
@@ -225,51 +204,214 @@ const roleRoutes = {
|
||||
- 订单状态流转
|
||||
- 批量审核
|
||||
- 订单统计
|
||||
- 异常订单处理
|
||||
- 订单聚合分析
|
||||
|
||||
**页面组件**
|
||||
- `Orders/index.tsx` - 订单列表页
|
||||
- `Orders/Detail.tsx` - 订单详情页
|
||||
- `Orders/Audit.tsx` - 订单审核页
|
||||
- `Orders/index.tsx` - 订单管理入口
|
||||
- `Orders/OrderList.tsx` - 订单列表页
|
||||
- `Orders/OrderDetail.tsx` - 订单详情页
|
||||
- `Orders/ExceptionOrder.tsx` - 异常订单处理
|
||||
- `Orders/OrderAggregation.tsx` - 订单聚合分析
|
||||
|
||||
### 4.3 财务管理模块
|
||||
### 4.3 商户管理模块
|
||||
|
||||
**功能列表**
|
||||
- 财务概览仪表盘
|
||||
- 交易流水查询
|
||||
- 利润对账
|
||||
- 账单回放
|
||||
- 财务统计报表
|
||||
- 商户列表管理
|
||||
- 商户订单管理
|
||||
- 商户结算管理
|
||||
- 商户店铺管理
|
||||
|
||||
**页面组件**
|
||||
- `Finance/index.tsx` - 财务概览页
|
||||
- `Finance/Transactions.tsx` - 交易流水页
|
||||
- `Finance/Reconciliation.tsx` - 利润对账页
|
||||
- `Merchant/index.tsx` - 商户管理入口
|
||||
- `Merchant/MerchantManage.tsx` - 商户管理
|
||||
- `Merchant/MerchantOrderManage.tsx` - 商户订单管理
|
||||
- `Merchant/MerchantSettlementManage.tsx` - 商户结算管理
|
||||
- `Merchant/MerchantShopManage.tsx` - 商户店铺管理
|
||||
|
||||
### 4.4 库存管理模块
|
||||
### 4.4 售后服务模块
|
||||
|
||||
**功能列表**
|
||||
- 退货申请处理
|
||||
- 退款流程管理
|
||||
- 客户服务
|
||||
|
||||
**页面组件**
|
||||
- `AfterSales/index.tsx` - 售后服务入口
|
||||
- `AfterSales/ReturnApply.tsx` - 退货申请
|
||||
- `AfterSales/RefundProcess.tsx` - 退款流程
|
||||
- `AfterSales/CustomerService.tsx` - 客户服务
|
||||
|
||||
### 4.5 物流管理模块
|
||||
|
||||
**功能列表**
|
||||
- 物流选择
|
||||
- 运费计算
|
||||
- 物流追踪
|
||||
|
||||
**页面组件**
|
||||
- `Logistics/index.tsx` - 物流管理入口
|
||||
- `Logistics/LogisticsSelect.tsx` - 物流选择
|
||||
- `Logistics/FreightCalc.tsx` - 运费计算
|
||||
- `Logistics/LogisticsTrack.tsx` - 物流追踪
|
||||
|
||||
### 4.6 合规管理模块
|
||||
|
||||
**功能列表**
|
||||
- 合规检查
|
||||
- 证书管理
|
||||
- 证书过期提醒
|
||||
|
||||
**页面组件**
|
||||
- `Compliance/index.tsx` - 合规管理入口
|
||||
- `Compliance/ComplianceCheck.tsx` - 合规检查
|
||||
- `Compliance/CertificateManage.tsx` - 证书管理
|
||||
- `Compliance/CertificateExpiryReminder.tsx` - 证书过期提醒
|
||||
|
||||
### 4.7 黑名单管理模块
|
||||
|
||||
**功能列表**
|
||||
- 黑名单管理
|
||||
- 风险监控
|
||||
|
||||
**页面组件**
|
||||
- `Blacklist/index.tsx` - 黑名单管理入口
|
||||
- `Blacklist/BlacklistManage.tsx` - 黑名单管理
|
||||
- `Blacklist/RiskMonitor.tsx` - 风险监控
|
||||
|
||||
### 4.8 B2B贸易模块
|
||||
|
||||
**功能列表**
|
||||
- 企业报价
|
||||
- 批量订单
|
||||
- 合同管理
|
||||
|
||||
**页面组件**
|
||||
- `B2B/index.tsx` - B2B贸易入口
|
||||
- `B2B/EnterpriseQuote.tsx` - 企业报价
|
||||
- `B2B/BatchOrder.tsx` - 批量订单
|
||||
- `B2B/ContractManage.tsx` - 合同管理
|
||||
|
||||
### 4.9 广告管理模块
|
||||
|
||||
**功能列表**
|
||||
- 广告投放管理
|
||||
- ROI分析
|
||||
- 广告计划
|
||||
|
||||
**页面组件**
|
||||
- `Ad/index.tsx` - 广告管理入口
|
||||
- `Ad/AdDelivery.tsx` - 广告投放
|
||||
- `Ad/ROIAnalysis.tsx` - ROI分析
|
||||
- `Ad/AdPlanPage.tsx` - 广告计划
|
||||
|
||||
### 4.10 财务管理模块
|
||||
|
||||
**功能列表**
|
||||
- 财务概览
|
||||
- 交易记录
|
||||
- 对账记录
|
||||
|
||||
**页面组件**
|
||||
- `Finance/index.tsx` - 财务管理入口
|
||||
- `Finance/Transactions.tsx` - 交易记录
|
||||
- `Finance/Reconciliation.tsx` - 对账记录
|
||||
|
||||
### 4.11 库存管理模块
|
||||
|
||||
**功能列表**
|
||||
- 库存概览
|
||||
- 仓库管理
|
||||
- 库存预测
|
||||
- 库存预警
|
||||
|
||||
**页面组件**
|
||||
- `Inventory/index.tsx` - 库存概览页
|
||||
- `Inventory/Warehouses.tsx` - 仓库管理页
|
||||
- `Inventory/Forecast.tsx` - 库存预测页
|
||||
- `Inventory/index.tsx` - 库存管理入口
|
||||
- `Inventory/Warehouses.tsx` - 仓库管理
|
||||
- `Inventory/InventoryForecast.tsx` - 库存预测
|
||||
|
||||
### 4.5 营销广告模块
|
||||
### 4.12 营销管理模块
|
||||
|
||||
**功能列表**
|
||||
- 营销概览
|
||||
- 广告管理
|
||||
- 竞品监控
|
||||
- 平台费用监控
|
||||
- 竞争对手分析
|
||||
|
||||
**页面组件**
|
||||
- `Marketing/index.tsx` - 营销概览页
|
||||
- `Marketing/Ads.tsx` - 广告管理页
|
||||
- `Marketing/Competitors.tsx` - 竞品监控页
|
||||
- `Marketing/index.tsx` - 营销管理入口
|
||||
- `Marketing/Ads.tsx` - 广告管理
|
||||
- `Marketing/Competitors.tsx` - 竞争对手分析
|
||||
|
||||
### 4.13 供应商管理模块
|
||||
|
||||
**功能列表**
|
||||
- 供应商列表
|
||||
- 供应商详情
|
||||
- 供应商产品管理
|
||||
|
||||
**页面组件**
|
||||
- `Suppliers/index.tsx` - 供应商管理入口
|
||||
- `Suppliers/SupplierDetail.tsx` - 供应商详情
|
||||
|
||||
### 4.14 报表中心模块
|
||||
|
||||
**功能列表**
|
||||
- 报表概览
|
||||
- 利润报表
|
||||
- 绩效报表
|
||||
|
||||
**页面组件**
|
||||
- `Reports/index.tsx` - 报表中心入口
|
||||
- `Reports/ProfitReport.tsx` - 利润报表
|
||||
- `Reports/PerformanceReport.tsx` - 绩效报表
|
||||
|
||||
### 4.15 设置模块
|
||||
|
||||
**功能列表**
|
||||
- 设置概览
|
||||
- 个人设置
|
||||
- 租户设置
|
||||
- 用户管理
|
||||
|
||||
**页面组件**
|
||||
- `Settings/index.tsx` - 设置入口
|
||||
- `Settings/ProfileSettings.tsx` - 个人设置
|
||||
- `Settings/TenantSettings.tsx` - 租户设置
|
||||
- `Settings/UserManagement.tsx` - 用户管理
|
||||
|
||||
### 4.16 A/B测试模块
|
||||
|
||||
**功能列表**
|
||||
- A/B测试配置
|
||||
- 测试结果分析
|
||||
|
||||
**页面组件**
|
||||
- `ABTest/index.tsx` - A/B测试入口
|
||||
- `ABTest/ABTestConfig.tsx` - A/B测试配置
|
||||
- `ABTest/ABTestResults.tsx` - 测试结果分析
|
||||
|
||||
### 4.11 退货管理模块
|
||||
|
||||
**功能列表**
|
||||
- 退货监控
|
||||
- SKU管理
|
||||
|
||||
**页面组件**
|
||||
- `Return/index.tsx` - 退货管理入口
|
||||
- `Return/ReturnMonitor.tsx` - 退货监控
|
||||
- `Return/SKUManage.tsx` - SKU管理
|
||||
|
||||
### 4.12 用户资产管理模块
|
||||
|
||||
**功能列表**
|
||||
- 会员等级管理
|
||||
- 积分管理
|
||||
- 用户资产
|
||||
|
||||
**页面组件**
|
||||
- `UserAsset/index.tsx` - 用户资产管理入口
|
||||
- `UserAsset/MemberLevel.tsx` - 会员等级管理
|
||||
- `UserAsset/PointsManage.tsx` - 积分管理
|
||||
- `UserAsset/UserAssets.tsx` - 用户资产
|
||||
|
||||
---
|
||||
|
||||
@@ -316,36 +458,52 @@ export const Products: React.FC = () => {
|
||||
### 5.3 状态管理
|
||||
|
||||
```typescript
|
||||
// Zustand Store 示例
|
||||
import { create } from 'zustand';
|
||||
// Redux Store 示例
|
||||
import { createStore, combineReducers, applyMiddleware } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import { createLogger } from 'redux-logger';
|
||||
|
||||
interface ProductState {
|
||||
products: Product[];
|
||||
selectedProduct: Product | null;
|
||||
setProducts: (products: Product[]) => void;
|
||||
setSelectedProduct: (product: Product | null) => void;
|
||||
// 定义状态类型
|
||||
interface AppState {
|
||||
user: UserState;
|
||||
products: ProductState;
|
||||
orders: OrderState;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export const useProductStore = create<ProductState>((set) => ({
|
||||
products: [],
|
||||
selectedProduct: null,
|
||||
setProducts: (products) => set({ products }),
|
||||
setSelectedProduct: (product) => set({ selectedProduct: product }),
|
||||
}));
|
||||
// 组合reducers
|
||||
const rootReducer = combineReducers({
|
||||
user: userReducer,
|
||||
products: productsReducer,
|
||||
orders: ordersReducer,
|
||||
app: appReducer,
|
||||
});
|
||||
|
||||
// 中间件
|
||||
const middleware = [thunk];
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
middleware.push(createLogger());
|
||||
}
|
||||
|
||||
// 创建store
|
||||
const store = createStore(rootReducer, applyMiddleware(...middleware));
|
||||
|
||||
export default store;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. API 集成
|
||||
|
||||
### 6.1 Axios 配置
|
||||
### 6.1 API 客户端配置
|
||||
|
||||
```typescript
|
||||
// services/api.ts
|
||||
// services/api/client.ts
|
||||
import axios from 'axios';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: import.meta.env.VITE_API_URL,
|
||||
baseURL: process.env.API_URL || 'http://localhost:3000/api',
|
||||
timeout: 30000,
|
||||
});
|
||||
|
||||
@@ -355,10 +513,6 @@ api.interceptors.request.use((config) => {
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
}
|
||||
const tenantId = localStorage.getItem('tenantId');
|
||||
if (tenantId) {
|
||||
config.headers['X-Tenant-Id'] = tenantId;
|
||||
}
|
||||
return config;
|
||||
});
|
||||
|
||||
@@ -368,7 +522,7 @@ api.interceptors.response.use(
|
||||
(error) => {
|
||||
if (error.response?.status === 401) {
|
||||
// 处理未授权
|
||||
window.location.href = '/login';
|
||||
window.location.href = '/Auth/LoginPage';
|
||||
}
|
||||
return Promise.reject(error);
|
||||
}
|
||||
@@ -377,24 +531,43 @@ api.interceptors.response.use(
|
||||
export default api;
|
||||
```
|
||||
|
||||
### 6.2 TanStack Query 配置
|
||||
### 6.2 API 服务
|
||||
|
||||
```typescript
|
||||
// hooks/useProducts.ts
|
||||
import { useQuery, useMutation } from '@tanstack/react-query';
|
||||
import { productService } from '@/services/productService';
|
||||
// services/api/product.ts
|
||||
import api from './client';
|
||||
|
||||
export const useProducts = (params?: ProductParams) => {
|
||||
return useQuery({
|
||||
queryKey: ['products', params],
|
||||
queryFn: () => productService.getAll(params),
|
||||
});
|
||||
export const productService = {
|
||||
getAll: (params?: any) => {
|
||||
return api.get('/products', { params });
|
||||
},
|
||||
getById: (id: string) => {
|
||||
return api.get(`/products/${id}`);
|
||||
},
|
||||
create: (data: any) => {
|
||||
return api.post('/products', data);
|
||||
},
|
||||
update: (id: string, data: any) => {
|
||||
return api.put(`/products/${id}`, data);
|
||||
},
|
||||
delete: (id: string) => {
|
||||
return api.delete(`/products/${id}`);
|
||||
},
|
||||
};
|
||||
|
||||
export const useCreateProduct = () => {
|
||||
return useMutation({
|
||||
mutationFn: productService.create,
|
||||
});
|
||||
// services/api/order.ts
|
||||
import api from './client';
|
||||
|
||||
export const orderService = {
|
||||
getAll: (params?: any) => {
|
||||
return api.get('/orders', { params });
|
||||
},
|
||||
getById: (id: string) => {
|
||||
return api.get(`/orders/${id}`);
|
||||
},
|
||||
updateStatus: (id: string, status: string) => {
|
||||
return api.put(`/orders/${id}/status`, { status });
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
792
docs/03_Frontend/Frontend_Development_Guide.md
Normal file
792
docs/03_Frontend/Frontend_Development_Guide.md
Normal file
@@ -0,0 +1,792 @@
|
||||
# 前端开发指导文档
|
||||
|
||||
> **基于业务语义的UI骨架设计指南**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 开发目标
|
||||
|
||||
**不是“纯UI铺页面”，而是**带业务语义的UI骨架（Business Skeleton）**
|
||||
|
||||
**目标**：所有页面结构完整 + 所有按钮有明确业务意义 + 能挂Service
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ 标准开发流程
|
||||
|
||||
### Step 1：定义菜单结构（全局）
|
||||
|
||||
```text
|
||||
Dashboard（总览）
|
||||
Product（商品 / 利润）
|
||||
Orders（订单）
|
||||
Ad（广告）
|
||||
Inventory（库存）
|
||||
B2B（贸易）
|
||||
Finance（结算 / 账单）
|
||||
Compliance（合规）
|
||||
Settings（配置）
|
||||
```
|
||||
|
||||
**关键**：每个菜单 = 一个业务域（不是页面）
|
||||
|
||||
---
|
||||
|
||||
### Step 2：定义页面骨架
|
||||
|
||||
#### Product 页面骨架（标准结构）
|
||||
|
||||
```text
|
||||
顶部：筛选区（店铺 / 分类 / 状态）
|
||||
中间：核心表格（商品列表）
|
||||
右侧/弹窗：操作面板（编辑 / AI / 定价）
|
||||
底部/侧边：数据总结（利润 / ROI）
|
||||
```
|
||||
|
||||
**目标**：把页面“分区”而不是写代码
|
||||
|
||||
---
|
||||
|
||||
### Step 3：填按钮（重点）
|
||||
|
||||
#### Product 页面按钮（标准版）
|
||||
|
||||
**行级操作（每个商品）**
|
||||
|
||||
```text
|
||||
编辑商品
|
||||
修改价格
|
||||
查看ROI
|
||||
AI优化定价 🔥
|
||||
上下架
|
||||
```
|
||||
|
||||
**批量操作**
|
||||
|
||||
```text
|
||||
批量改价
|
||||
批量上架
|
||||
批量分析
|
||||
```
|
||||
|
||||
**页面级操作**
|
||||
|
||||
```text
|
||||
创建商品
|
||||
导入商品
|
||||
导出数据
|
||||
```
|
||||
|
||||
**关键**：每个按钮必须能回答“点了之后业务发生什么变化？”
|
||||
|
||||
---
|
||||
|
||||
### Step 4：绑定假行为
|
||||
|
||||
**点击 → mock数据变化 → UI更新**
|
||||
|
||||
**示例**：点击【修改价格】
|
||||
|
||||
```text
|
||||
输入新价格
|
||||
→ 前端计算 ROI（假数据）
|
||||
→ 表格实时更新
|
||||
→ ROI变红/变绿
|
||||
```
|
||||
|
||||
**意义**：验证UI是不是“活的”，而不是死页面
|
||||
|
||||
---
|
||||
|
||||
### Step 5：统一交互规范
|
||||
|
||||
#### 1️⃣ 所有操作必须有反馈
|
||||
|
||||
```text
|
||||
loading → success / error
|
||||
```
|
||||
|
||||
#### 2️⃣ 所有“影响钱”的操作必须有提示
|
||||
|
||||
```text
|
||||
修改价格 → 显示 ROI变化
|
||||
```
|
||||
|
||||
#### 3️⃣ 所有列表必须支持：
|
||||
|
||||
```text
|
||||
分页 / 筛选 / 排序
|
||||
```
|
||||
|
||||
#### 4️⃣ 所有弹窗统一：
|
||||
|
||||
- 宽度
|
||||
- 按钮位置
|
||||
- 提交流程
|
||||
|
||||
**目的**：让AI和你写的代码风格一致
|
||||
|
||||
---
|
||||
|
||||
### Step 6：输出前端任务模板
|
||||
|
||||
#### 页面：Product
|
||||
|
||||
```md
|
||||
# 页面：Product
|
||||
|
||||
## 页面结构
|
||||
- 筛选区
|
||||
- 商品表格
|
||||
- 操作弹窗
|
||||
|
||||
## 表格字段
|
||||
- 商品名
|
||||
- 成本
|
||||
- 售价
|
||||
- 利润
|
||||
- ROI
|
||||
- 库存
|
||||
|
||||
## 按钮
|
||||
- 创建商品
|
||||
- 修改价格
|
||||
- AI定价
|
||||
- 上下架
|
||||
|
||||
## 交互
|
||||
- 修改价格 → 更新ROI（mock）
|
||||
- AI定价 → loading → 返回建议价格
|
||||
|
||||
## 状态
|
||||
- loading
|
||||
- empty
|
||||
- error
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 参考产品结构
|
||||
|
||||
### 1️⃣ Shopify（电商后台结构）
|
||||
|
||||
**重点**：
|
||||
- 商品管理
|
||||
- 订单管理
|
||||
- 分析面板
|
||||
|
||||
### 2️⃣ Google Analytics（数据驱动UI）
|
||||
|
||||
**重点**：
|
||||
- 数据展示
|
||||
- 图表交互
|
||||
- 维度筛选
|
||||
|
||||
### 3️⃣ Jungle Scout（赚钱导向）
|
||||
|
||||
**重点**：
|
||||
- 利润
|
||||
- ROI
|
||||
- 选品分析
|
||||
|
||||
**目标**：Shopify结构 + Analytics数据 + JungleScout赚钱逻辑
|
||||
|
||||
---
|
||||
|
||||
## 📋 各页面详细设计
|
||||
|
||||
### Dashboard（总览）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：时间范围选择
|
||||
- 中间：核心KPI卡片
|
||||
- 底部：趋势图表
|
||||
|
||||
**按钮**
|
||||
- 刷新数据
|
||||
- 导出报告
|
||||
- 自定义仪表盘
|
||||
|
||||
**交互**
|
||||
- 时间范围变化 → 所有数据更新
|
||||
- 点击KPI → 跳转到详情页面
|
||||
|
||||
---
|
||||
|
||||
### Product（商品 / 利润）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（店铺 / 分类 / 状态）
|
||||
- 中间：商品表格
|
||||
- 右侧：操作面板
|
||||
- 底部：利润总结
|
||||
|
||||
**按钮**
|
||||
- 行级：编辑、修改价格、查看ROI、AI定价、上下架
|
||||
- 批量：批量改价、批量上架、批量分析
|
||||
- 页面级：创建商品、导入商品、导出数据
|
||||
|
||||
**交互**
|
||||
- 修改价格 → 更新ROI（mock）
|
||||
- AI定价 → loading → 返回建议价格
|
||||
|
||||
---
|
||||
|
||||
### Orders（订单）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（状态 / 时间 / 平台）
|
||||
- 中间：订单表格
|
||||
- 右侧：订单详情
|
||||
- 底部：订单统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、处理订单、退款
|
||||
- 批量：批量发货、批量取消、批量导出
|
||||
- 页面级：创建订单、导入订单、导出数据
|
||||
|
||||
**交互**
|
||||
- 点击订单 → 显示详情
|
||||
- 处理订单 → 状态更新
|
||||
|
||||
---
|
||||
|
||||
### Ad（广告）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（平台 / 状态 / 时间）
|
||||
- 中间：广告表格
|
||||
- 右侧：广告详情
|
||||
- 底部：ROI分析
|
||||
|
||||
**按钮**
|
||||
- 行级：编辑、投放、暂停、查看ROI
|
||||
- 批量：批量启停、批量分析
|
||||
- 页面级：创建广告、导入广告、导出数据
|
||||
|
||||
**交互**
|
||||
- 投放广告 → loading → 显示投放结果
|
||||
- 查看ROI → 显示详细分析
|
||||
|
||||
---
|
||||
|
||||
### Inventory（库存）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（仓库 / 状态 / 分类）
|
||||
- 中间：库存表格
|
||||
- 右侧：库存详情
|
||||
- 底部：库存预警
|
||||
|
||||
**按钮**
|
||||
- 行级：编辑、补货、调拨、查看详情
|
||||
- 批量：批量调整、批量导出
|
||||
- 页面级：创建库存、导入库存、导出数据
|
||||
|
||||
**交互**
|
||||
- 补货 → 显示补货建议
|
||||
- 调拨 → 显示调拨选项
|
||||
|
||||
---
|
||||
|
||||
### B2B（贸易）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（客户 / 状态 / 时间）
|
||||
- 中间：订单表格
|
||||
- 右侧：订单详情
|
||||
- 底部：客户统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、处理订单、生成合同
|
||||
- 批量：批量处理、批量导出
|
||||
- 页面级：创建订单、导入订单、导出数据
|
||||
|
||||
**交互**
|
||||
- 生成合同 → 显示合同预览
|
||||
- 处理订单 → 状态更新
|
||||
|
||||
---
|
||||
|
||||
### Finance（结算 / 账单）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（时间 / 类型 / 状态）
|
||||
- 中间：账单表格
|
||||
- 右侧：账单详情
|
||||
- 底部：财务汇总
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、对账、导出
|
||||
- 批量：批量对账、批量导出
|
||||
- 页面级：创建账单、导入账单、导出数据
|
||||
|
||||
**交互**
|
||||
- 对账 → 显示对账结果
|
||||
- 查看详情 → 显示详细财务数据
|
||||
|
||||
---
|
||||
|
||||
### Transactions（交易记录）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（时间 / 类型 / 状态）
|
||||
- 中间：交易表格
|
||||
- 右侧：交易详情
|
||||
- 底部：交易统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、导出
|
||||
- 批量：批量导出
|
||||
- 页面级：导入交易、导出数据
|
||||
|
||||
**交互**
|
||||
- 查看详情 → 显示详细交易信息
|
||||
|
||||
---
|
||||
|
||||
### Reconciliation（对账记录）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（时间 / 状态）
|
||||
- 中间：对账表格
|
||||
- 右侧：对账详情
|
||||
- 底部：对账统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、重新对账、导出
|
||||
- 批量：批量对账、批量导出
|
||||
- 页面级：导入对账、导出数据
|
||||
|
||||
**交互**
|
||||
- 重新对账 → 显示对账结果
|
||||
- 查看详情 → 显示详细对账信息
|
||||
|
||||
---
|
||||
|
||||
### Warehouses（仓库管理）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（状态 / 类型）
|
||||
- 中间：仓库表格
|
||||
- 右侧：仓库详情
|
||||
- 底部：仓库统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、编辑、删除
|
||||
- 批量：批量导出
|
||||
- 页面级：创建仓库、导入仓库、导出数据
|
||||
|
||||
**交互**
|
||||
- 查看详情 → 显示详细仓库信息
|
||||
- 编辑 → 显示编辑表单
|
||||
|
||||
---
|
||||
|
||||
### InventoryForecast（库存预测）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：时间范围选择
|
||||
- 中间：预测图表
|
||||
- 右侧：预测详情
|
||||
- 底部：预测建议
|
||||
|
||||
**按钮**
|
||||
- 刷新预测
|
||||
- 导出预测
|
||||
- 调整参数
|
||||
|
||||
**交互**
|
||||
- 时间范围变化 → 预测数据更新
|
||||
- 调整参数 → 重新计算预测
|
||||
|
||||
---
|
||||
|
||||
### Marketing（营销管理）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：时间范围选择
|
||||
- 中间：营销概览卡片
|
||||
- 底部：营销趋势图表
|
||||
|
||||
**按钮**
|
||||
- 查看广告管理
|
||||
- 查看竞争对手分析
|
||||
- 查看营销绩效报表
|
||||
|
||||
**交互**
|
||||
- 点击卡片 → 跳转到对应页面
|
||||
- 时间范围变化 → 所有数据更新
|
||||
|
||||
---
|
||||
|
||||
### Ads（广告管理）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（平台 / 状态 / 时间）
|
||||
- 中间：广告表格
|
||||
- 右侧：广告详情
|
||||
- 底部：广告统计
|
||||
|
||||
**按钮**
|
||||
- 行级：编辑、启动、暂停、删除
|
||||
- 批量：批量启停、批量导出
|
||||
- 页面级：创建广告、导入广告、导出数据
|
||||
|
||||
**交互**
|
||||
- 启动/暂停 → 广告状态更新
|
||||
- 查看详情 → 显示详细广告信息
|
||||
|
||||
---
|
||||
|
||||
### Competitors（竞争对手分析）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（类别 / 时间）
|
||||
- 中间：分析图表
|
||||
- 右侧：竞争对手详情
|
||||
- 底部：竞争对手列表
|
||||
|
||||
**按钮**
|
||||
- 刷新分析
|
||||
- 导出分析
|
||||
- 添加竞争对手
|
||||
|
||||
**交互**
|
||||
- 筛选变化 → 分析数据更新
|
||||
- 查看详情 → 显示详细竞争对手信息
|
||||
|
||||
---
|
||||
|
||||
### Suppliers（供应商管理）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（类别 / 状态）
|
||||
- 中间：供应商表格
|
||||
- 右侧：供应商详情
|
||||
- 底部：供应商统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、编辑、删除
|
||||
- 批量：批量导出
|
||||
- 页面级：添加供应商、导入供应商、导出数据
|
||||
|
||||
**交互**
|
||||
- 查看详情 → 跳转到供应商详情页面
|
||||
- 编辑 → 显示编辑表单
|
||||
|
||||
---
|
||||
|
||||
### SupplierDetail（供应商详情）
|
||||
|
||||
**页面结构**
|
||||
- 左侧：供应商信息表单
|
||||
- 右侧：供应商产品列表
|
||||
- 底部：历史订单和绩效评估
|
||||
|
||||
**按钮**
|
||||
- 保存供应商信息
|
||||
- 查看历史订单
|
||||
- 查看绩效评估
|
||||
|
||||
**交互**
|
||||
- 保存 → 显示保存结果
|
||||
- 切换标签页 → 显示对应内容
|
||||
|
||||
---
|
||||
|
||||
### Reports（报表中心）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：报表类型卡片
|
||||
- 中间：报表概览图表
|
||||
- 底部：报表操作按钮
|
||||
|
||||
**按钮**
|
||||
- 查看利润报表
|
||||
- 查看绩效报表
|
||||
- 导出所有报表
|
||||
|
||||
**交互**
|
||||
- 点击卡片 → 跳转到对应报表页面
|
||||
- 导出 → 下载报表文件
|
||||
|
||||
---
|
||||
|
||||
### ProfitReport（利润报表）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（时间范围 / 类别）
|
||||
- 中间：利润概览卡片
|
||||
- 底部：利润明细表格和图表
|
||||
|
||||
**按钮**
|
||||
- 导出报表
|
||||
- 刷新数据
|
||||
- 调整参数
|
||||
|
||||
**交互**
|
||||
- 筛选变化 → 利润数据更新
|
||||
- 查看详情 → 显示详细利润信息
|
||||
|
||||
---
|
||||
|
||||
### PerformanceReport（绩效报表）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（时间范围 / 渠道）
|
||||
- 中间：绩效概览卡片
|
||||
- 底部：绩效明细表格和图表
|
||||
|
||||
**按钮**
|
||||
- 导出报表
|
||||
- 刷新数据
|
||||
- 调整参数
|
||||
|
||||
**交互**
|
||||
- 筛选变化 → 绩效数据更新
|
||||
- 查看详情 → 显示详细绩效信息
|
||||
|
||||
---
|
||||
|
||||
### Settings（设置）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：设置类型卡片
|
||||
- 中间：设置概览
|
||||
- 底部：设置操作按钮
|
||||
|
||||
**按钮**
|
||||
- 查看个人设置
|
||||
- 查看租户设置
|
||||
- 查看用户管理
|
||||
|
||||
**交互**
|
||||
- 点击卡片 → 跳转到对应设置页面
|
||||
|
||||
---
|
||||
|
||||
### ProfileSettings（个人设置）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：头像上传
|
||||
- 中间：个人信息表单
|
||||
- 底部：密码修改表单
|
||||
|
||||
**按钮**
|
||||
- 保存个人信息
|
||||
- 修改密码
|
||||
|
||||
**交互**
|
||||
- 保存 → 显示保存结果
|
||||
- 修改密码 → 显示修改结果
|
||||
|
||||
---
|
||||
|
||||
### TenantSettings（租户设置）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：基本信息表单
|
||||
- 底部：功能设置开关
|
||||
|
||||
**按钮**
|
||||
- 保存基本信息
|
||||
- 保存功能设置
|
||||
|
||||
**交互**
|
||||
- 保存 → 显示保存结果
|
||||
- 切换开关 → 实时更新设置
|
||||
|
||||
---
|
||||
|
||||
### UserManagement（用户管理）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（角色 / 状态）
|
||||
- 中间：用户表格
|
||||
- 底部：用户统计
|
||||
|
||||
**按钮**
|
||||
- 行级：编辑、删除
|
||||
- 批量：批量导出
|
||||
- 页面级：添加用户、导入用户、导出数据
|
||||
|
||||
**交互**
|
||||
- 添加用户 → 显示添加用户表单
|
||||
- 编辑 → 显示编辑表单
|
||||
- 删除 → 显示删除确认
|
||||
|
||||
---
|
||||
|
||||
### Compliance（合规）
|
||||
|
||||
**页面结构**
|
||||
- 顶部：筛选区（类型 / 状态 / 时间）
|
||||
- 中间：证书表格
|
||||
- 右侧：证书详情
|
||||
- 底部：合规统计
|
||||
|
||||
**按钮**
|
||||
- 行级：查看详情、更新、验证
|
||||
- 批量：批量验证、批量导出
|
||||
- 页面级：创建证书、导入证书、导出数据
|
||||
|
||||
**交互**
|
||||
- 验证证书 → 显示验证结果
|
||||
- 更新证书 → 显示更新表单
|
||||
|
||||
---
|
||||
|
||||
### Settings（配置）
|
||||
|
||||
**页面结构**
|
||||
- 左侧：配置菜单
|
||||
- 右侧：配置表单
|
||||
|
||||
**按钮**
|
||||
- 保存配置
|
||||
- 重置配置
|
||||
- 导出配置
|
||||
|
||||
**交互**
|
||||
- 保存 → 显示保存结果
|
||||
- 重置 → 显示重置确认
|
||||
|
||||
---
|
||||
|
||||
## 🎨 设计规范
|
||||
|
||||
### 颜色系统
|
||||
|
||||
- 主色：#1890ff
|
||||
- 成功：#52c41a
|
||||
- 警告：#faad14
|
||||
- 错误：#f5222d
|
||||
- 信息：#1890ff
|
||||
|
||||
### 字体系统
|
||||
|
||||
- 标题：16px / 20px
|
||||
- 正文：14px
|
||||
- 小文本：12px
|
||||
|
||||
### 布局规范
|
||||
|
||||
- 页面边距：16px
|
||||
- 卡片间距：16px
|
||||
- 按钮间距：8px
|
||||
- 输入框高度：32px
|
||||
|
||||
### 响应式设计
|
||||
|
||||
- 桌面端：1200px+
|
||||
- 平板端：768px - 1199px
|
||||
- 移动端：< 768px
|
||||
|
||||
---
|
||||
|
||||
## 📝 前端任务模板
|
||||
|
||||
### 页面任务模板
|
||||
|
||||
```md
|
||||
# 页面：[页面名称]
|
||||
|
||||
## 页面结构
|
||||
- [结构1]
|
||||
- [结构2]
|
||||
- [结构3]
|
||||
|
||||
## 表格字段
|
||||
- [字段1]
|
||||
- [字段2]
|
||||
- [字段3]
|
||||
|
||||
## 按钮
|
||||
- [按钮1]
|
||||
- [按钮2]
|
||||
- [按钮3]
|
||||
|
||||
## 交互
|
||||
- [交互1]
|
||||
- [交互2]
|
||||
|
||||
## 状态
|
||||
- loading
|
||||
- empty
|
||||
- error
|
||||
```
|
||||
|
||||
### 组件任务模板
|
||||
|
||||
```md
|
||||
# 组件：[组件名称]
|
||||
|
||||
## 功能描述
|
||||
[组件功能描述]
|
||||
|
||||
## 输入属性
|
||||
- [属性1]: [类型] - [描述]
|
||||
- [属性2]: [类型] - [描述]
|
||||
|
||||
## 输出事件
|
||||
- [事件1]: [描述]
|
||||
- [事件2]: [描述]
|
||||
|
||||
## 样式规范
|
||||
- [样式1]
|
||||
- [样式2]
|
||||
|
||||
## 交互规范
|
||||
- [交互1]
|
||||
- [交互2]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 开发流程
|
||||
|
||||
### 第一步：搭建骨架
|
||||
- 定义页面结构
|
||||
- 创建基础组件
|
||||
- 实现布局
|
||||
|
||||
### 第二步：实现交互
|
||||
- 绑定假数据
|
||||
- 实现按钮功能
|
||||
- 验证UI交互
|
||||
|
||||
### 第三步：对接服务
|
||||
- 替换假数据
|
||||
- 对接后端API
|
||||
- 实现真实业务逻辑
|
||||
|
||||
### 第四步：优化测试
|
||||
- 性能优化
|
||||
- 兼容性测试
|
||||
- 用户体验优化
|
||||
|
||||
---
|
||||
|
||||
## 📌 注意事项
|
||||
|
||||
1. **业务语义优先**：每个UI元素都要有明确的业务意义
|
||||
2. **一致性**：保持交互规范的一致性
|
||||
3. **可扩展性**：设计时考虑未来功能扩展
|
||||
4. **性能**：注意前端性能优化
|
||||
5. **用户体验**：关注用户操作流程的流畅性
|
||||
|
||||
---
|
||||
|
||||
## 🎯 验收标准
|
||||
|
||||
- [ ] 页面结构完整
|
||||
- [ ] 按钮功能明确
|
||||
- [ ] 交互流畅
|
||||
- [ ] 响应式适配
|
||||
- [ ] 性能良好
|
||||
- [ ] 代码规范
|
||||
|
||||
---
|
||||
|
||||
> **记住：你现在做的不是“页面开发”，而是在搭“业务操作台的骨架”。**
|
||||
511
docs/03_Frontend/Frontend_Optimization_Guide.md
Normal file
511
docs/03_Frontend/Frontend_Optimization_Guide.md
Normal file
@@ -0,0 +1,511 @@
|
||||
# 前端优化指南 (Crawlful Hub)
|
||||
|
||||
> **定位**：Crawlful Hub 前端优化指南 - 详细说明交互优化的具体实施方法。
|
||||
> **更新日期**: 2026-03-18
|
||||
> **最高优先级参考**: [Frontend_Design.md](./Frontend_Design.md)
|
||||
|
||||
---
|
||||
|
||||
## 1. 文档概述
|
||||
|
||||
本指南旨在提供 Crawlful Hub 前端系统的优化策略和实施方法，涵盖交互优化、性能优化、用户体验优化、响应式设计优化和可访问性优化等方面。通过本指南，开发团队可以系统性地提升前端系统的质量和用户体验。
|
||||
|
||||
## 2. 交互优化的重要性
|
||||
|
||||
良好的交互设计是提升用户体验的关键因素，它可以：
|
||||
- 提高用户满意度和忠诚度
|
||||
- 减少用户操作错误和挫折感
|
||||
- 提升系统的易用性和可理解性
|
||||
- 增加用户的使用效率和 productivity
|
||||
- 增强系统的专业性和品牌形象
|
||||
|
||||
## 3. 具体优化策略和实施方法
|
||||
|
||||
### 3.1 表单交互优化
|
||||
|
||||
#### 3.1.1 实时验证
|
||||
|
||||
**实施方法**：
|
||||
- 使用 Ant Design Form 的 `validateTrigger` 属性设置为 `onChange`，实现实时验证
|
||||
- 为每个表单项添加 `rules` 配置，定义验证规则
|
||||
- 使用 `validateStatus` 和 `help` 属性提供即时反馈
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
<Form.Item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
rules={[
|
||||
{ required: true, message: '请输入邮箱' },
|
||||
{ type: 'email', message: '请输入有效的邮箱地址' }
|
||||
]}
|
||||
validateTrigger="onChange"
|
||||
>
|
||||
<Input placeholder="请输入邮箱" />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
#### 3.1.2 自动保存
|
||||
|
||||
**实施方法**：
|
||||
- 使用 `useEffect` 监听表单数据变化
|
||||
- 设置防抖函数，避免频繁保存
|
||||
- 使用 `localStorage` 或 `sessionStorage` 存储草稿
|
||||
- 在组件卸载时自动保存
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { debounce } from '../utils/PerformanceOptimization';
|
||||
|
||||
const FormWithAutoSave = () => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const autoSave = debounce((values) => {
|
||||
localStorage.setItem('formDraft', JSON.stringify(values));
|
||||
}, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
const draft = localStorage.getItem('formDraft');
|
||||
if (draft) {
|
||||
form.setFieldsValue(JSON.parse(draft));
|
||||
}
|
||||
|
||||
return () => {
|
||||
autoSave(form.getFieldsValue());
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
form.watch((values) => {
|
||||
autoSave(values);
|
||||
});
|
||||
}, [form]);
|
||||
|
||||
// 表单内容...
|
||||
};
|
||||
```
|
||||
|
||||
#### 3.1.3 智能填充
|
||||
|
||||
**实施方法**：
|
||||
- 维护历史数据存储
|
||||
- 根据用户输入的上下文提供智能建议
|
||||
- 使用 `Select` 组件的 `showSearch` 和 `filterOption` 属性实现智能搜索
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
<Form.Item name="platform" label="平台">
|
||||
<Select
|
||||
showSearch
|
||||
filterOption={(input, option) =>
|
||||
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
}
|
||||
>
|
||||
<Option value="AMAZON">Amazon</Option>
|
||||
<Option value="EBAY">eBay</Option>
|
||||
<Option value="SHOPIFY">Shopify</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
### 3.2 列表交互优化
|
||||
|
||||
#### 3.2.1 虚拟滚动
|
||||
|
||||
**实施方法**：
|
||||
- 使用 `VirtualList` 组件处理长列表
|
||||
- 设置合理的 `itemHeight` 和 `containerHeight`
|
||||
- 实现数据的分批加载
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { VirtualList } from '../components/VirtualList';
|
||||
|
||||
const LongList = () => {
|
||||
return (
|
||||
<VirtualList
|
||||
items={items}
|
||||
itemHeight={48}
|
||||
containerHeight={400}
|
||||
renderItem={(item, index) => (
|
||||
<div key={item.id} style={{ height: 48, padding: '12px' }}>
|
||||
{item.name}
|
||||
</div>
|
||||
)}
|
||||
keyExtractor={(item) => item.id}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### 3.2.2 列排序和筛选
|
||||
|
||||
**实施方法**：
|
||||
- 使用 Ant Design Table 的 `sorter` 和 `filters` 属性
|
||||
- 实现服务器端排序和筛选
|
||||
- 保存用户的排序和筛选偏好
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
const columns = [
|
||||
{
|
||||
title: '商品名称',
|
||||
dataIndex: 'name',
|
||||
sorter: (a, b) => a.name.localeCompare(b.name),
|
||||
},
|
||||
{
|
||||
title: '平台',
|
||||
dataIndex: 'platform',
|
||||
filters: [
|
||||
{ text: 'Amazon', value: 'AMAZON' },
|
||||
{ text: 'eBay', value: 'EBAY' },
|
||||
],
|
||||
onFilter: (value, record) => record.platform === value,
|
||||
},
|
||||
// 其他列...
|
||||
];
|
||||
|
||||
<Table columns={columns} dataSource={data} />
|
||||
```
|
||||
|
||||
### 3.3 页面过渡优化
|
||||
|
||||
#### 3.3.1 加载状态
|
||||
|
||||
**实施方法**：
|
||||
- 使用骨架屏代替简单的加载动画
|
||||
- 为不同类型的内容设计不同的骨架屏
|
||||
- 实现渐进式加载
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
const SkeletonLoader = () => (
|
||||
<div style={{ padding: 24 }}>
|
||||
<Skeleton active paragraph={{ rows: 4 }} />
|
||||
<Skeleton active paragraph={{ rows: 4 }} style={{ marginTop: 16 }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const PageWithSkeleton = () => {
|
||||
const { data, isLoading } = useQuery({...});
|
||||
|
||||
if (isLoading) {
|
||||
return <SkeletonLoader />;
|
||||
}
|
||||
|
||||
return <PageContent data={data} />;
|
||||
};
|
||||
```
|
||||
|
||||
#### 3.3.2 错误处理
|
||||
|
||||
**实施方法**：
|
||||
- 使用错误边界捕获组件错误
|
||||
- 提供清晰的错误信息和恢复方案
|
||||
- 实现错误日志记录
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
|
||||
const ErrorFallback = ({ error, resetErrorBoundary }) => (
|
||||
<div style={{ padding: 24, textAlign: 'center' }}>
|
||||
<Alert
|
||||
message="出错了"
|
||||
description={error.message}
|
||||
type="error"
|
||||
action={
|
||||
<Button size="small" type="primary" onClick={resetErrorBoundary}>
|
||||
重试
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const SafeComponent = () => (
|
||||
<ErrorBoundary FallbackComponent={ErrorFallback}>
|
||||
<ComponentThatMightError />
|
||||
</ErrorBoundary>
|
||||
);
|
||||
```
|
||||
|
||||
## 4. 性能优化
|
||||
|
||||
### 4.1 组件懒加载
|
||||
|
||||
**实施方法**：
|
||||
- 使用 `React.lazy` 和 `Suspense` 实现组件懒加载
|
||||
- 按路由或功能模块进行代码拆分
|
||||
- 预加载关键组件
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import React, { lazy, Suspense } from 'react';
|
||||
|
||||
const LazyComponent = lazy(() => import('./LazyComponent'));
|
||||
|
||||
const App = () => (
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<LazyComponent />
|
||||
</Suspense>
|
||||
);
|
||||
```
|
||||
|
||||
### 4.2 图片优化
|
||||
|
||||
**实施方法**：
|
||||
- 实现图片懒加载
|
||||
- 使用适当的图片格式和大小
|
||||
- 支持 WebP 格式
|
||||
- 实现图片压缩
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { LazyLoad } from '../components/LazyLoad';
|
||||
|
||||
const ImageWithLazyLoad = ({ src, alt }) => (
|
||||
<LazyLoad>
|
||||
<img src={src} alt={alt} />
|
||||
</LazyLoad>
|
||||
);
|
||||
```
|
||||
|
||||
### 4.3 状态管理优化
|
||||
|
||||
**实施方法**：
|
||||
- 合理使用 Redux，避免过度使用
|
||||
- 使用 `useMemo` 和 `useCallback` 优化渲染性能
|
||||
- 实现状态的细粒度管理
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
|
||||
const processedData = useMemo(() => {
|
||||
// expensive data processing
|
||||
return processData(data);
|
||||
}, [data]);
|
||||
|
||||
const handleUpdate = useCallback((value) => {
|
||||
onUpdate(value);
|
||||
}, [onUpdate]);
|
||||
|
||||
return <div>{processedData}</div>;
|
||||
});
|
||||
```
|
||||
|
||||
## 5. 用户体验优化
|
||||
|
||||
### 5.1 全局通知系统
|
||||
|
||||
**实施方法**：
|
||||
- 使用 Ant Design 的 `message` 和 `notification` 组件
|
||||
- 实现统一的通知管理服务
|
||||
- 支持不同类型的通知（成功、错误、警告、信息）
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { message, notification } from 'antd';
|
||||
|
||||
export const notify = {
|
||||
success: (content) => message.success(content),
|
||||
error: (content) => message.error(content),
|
||||
warning: (content) => message.warning(content),
|
||||
info: (content) => message.info(content),
|
||||
|
||||
notification: {
|
||||
success: (title, content) => notification.success({ title, description: content }),
|
||||
error: (title, content) => notification.error({ title, description: content }),
|
||||
warning: (title, content) => notification.warning({ title, description: content }),
|
||||
info: (title, content) => notification.info({ title, description: content }),
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 5.2 操作引导
|
||||
|
||||
**实施方法**：
|
||||
- 使用 `react-joyride` 等库实现新用户引导
|
||||
- 为重要功能添加工具提示
|
||||
- 实现上下文帮助
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import JoyRide from 'react-joyride';
|
||||
|
||||
const Tour = () => {
|
||||
const steps = [
|
||||
{
|
||||
target: '.first-element',
|
||||
content: '这是第一个元素',
|
||||
placement: 'bottom',
|
||||
},
|
||||
{
|
||||
target: '.second-element',
|
||||
content: '这是第二个元素',
|
||||
placement: 'top',
|
||||
},
|
||||
];
|
||||
|
||||
return <JoyRide steps={steps} />;
|
||||
};
|
||||
```
|
||||
|
||||
## 6. 响应式设计优化
|
||||
|
||||
### 6.1 响应式布局
|
||||
|
||||
**实施方法**：
|
||||
- 使用 Ant Design 的 `Row` 和 `Col` 组件
|
||||
- 结合 `useMediaQuery` 钩子实现响应式逻辑
|
||||
- 为不同屏幕尺寸设计不同的布局
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
const ResponsiveLayout = () => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 });
|
||||
|
||||
return (
|
||||
<Row gutter={16}>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<Card>Card 1</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<Card>Card 2</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<Card>Card 3</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={12} md={8} lg={6}>
|
||||
<Card>Card 4</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 6.2 移动端适配
|
||||
|
||||
**实施方法**：
|
||||
- 使用 `ResponsiveLayout` 组件
|
||||
- 优化移动端的触摸交互
|
||||
- 实现汉堡菜单和底部导航
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
import { ResponsiveLayout } from '../components/ui/ResponsiveLayout';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<ResponsiveLayout
|
||||
menuItems={menuItems}
|
||||
selectedKey={selectedKey}
|
||||
onMenuSelect={onMenuSelect}
|
||||
>
|
||||
<PageContent />
|
||||
</ResponsiveLayout>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 7. 可访问性优化
|
||||
|
||||
### 7.1 键盘导航
|
||||
|
||||
**实施方法**：
|
||||
- 确保所有交互元素都可以通过键盘访问
|
||||
- 实现合理的 tab 顺序
|
||||
- 添加键盘快捷键
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
const AccessibleButton = () => {
|
||||
const handleKeyDown = (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
// 执行按钮操作
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
style={{ outline: 'none' }}
|
||||
>
|
||||
点击我
|
||||
</button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 7.2 屏幕阅读器
|
||||
|
||||
**实施方法**：
|
||||
- 使用语义化的 HTML 元素
|
||||
- 添加适当的 `aria-*` 属性
|
||||
- 确保所有内容都可以被屏幕阅读器访问
|
||||
|
||||
**示例代码**：
|
||||
```tsx
|
||||
<div role="region" aria-labelledby="section-title">
|
||||
<h2 id="section-title">商品列表</h2>
|
||||
<Table aria-label="商品列表" />
|
||||
</div>
|
||||
```
|
||||
|
||||
## 8. 最佳实践
|
||||
|
||||
### 8.1 代码规范
|
||||
|
||||
- 使用 TypeScript 严格模式
|
||||
- 遵循 ESLint 和 Prettier 规范
|
||||
- 保持代码的可读性和可维护性
|
||||
- 编写清晰的注释
|
||||
|
||||
### 8.2 测试策略
|
||||
|
||||
- 编写单元测试和集成测试
|
||||
- 使用 Jest 和 React Testing Library
|
||||
- 实现端到端测试
|
||||
- 定期运行测试套件
|
||||
|
||||
### 8.3 性能监控
|
||||
|
||||
- 使用 React DevTools 分析组件性能
|
||||
- 实现前端性能监控
|
||||
- 定期进行性能审计
|
||||
- 优化关键渲染路径
|
||||
|
||||
## 9. 测试和监控
|
||||
|
||||
### 9.1 性能测试
|
||||
|
||||
**实施方法**：
|
||||
- 使用 Lighthouse 进行性能审计
|
||||
- 监控首屏加载时间
|
||||
- 分析关键渲染路径
|
||||
- 优化资源加载
|
||||
|
||||
### 9.2 用户体验测试
|
||||
|
||||
**实施方法**：
|
||||
- 进行用户测试
|
||||
- 收集用户反馈
|
||||
- 分析用户行为数据
|
||||
- 持续优化用户体验
|
||||
|
||||
## 10. 相关资源
|
||||
|
||||
- [React 官方文档](https://reactjs.org/)
|
||||
- [Ant Design 官方文档](https://ant.design/)
|
||||
- [Web Performance Best Practices](https://web.dev/fast/)
|
||||
- [WCAG 2.1 Guidelines](https://www.w3.org/TR/WCAG21/)
|
||||
- [React Performance Optimization](https://reactjs.org/docs/optimizing-performance.html)
|
||||
|
||||
---
|
||||
|
||||
*本文档基于 Crawlful Hub 前端架构设计，最后更新: 2026-03-18*
|
||||
287
docs/03_Frontend/Interaction_Guidelines.md
Normal file
287
docs/03_Frontend/Interaction_Guidelines.md
Normal file
@@ -0,0 +1,287 @@
|
||||
# 统一交互规范
|
||||
|
||||
> **Crawlful Hub 前端交互设计标准**
|
||||
|
||||
---
|
||||
|
||||
## 🎯 核心原则
|
||||
|
||||
### 1. 所有操作必须有反馈
|
||||
|
||||
```text
|
||||
loading → success / error
|
||||
```
|
||||
|
||||
**实现方式**：
|
||||
- 使用 `BusinessLoading` 组件显示加载状态
|
||||
- 使用 `BusinessMessage` 组件显示操作结果
|
||||
- 操作按钮在加载期间应显示 loading 状态
|
||||
|
||||
### 2. 所有“影响钱”的操作必须有提示
|
||||
|
||||
**实现方式**：
|
||||
- 修改价格时显示 ROI 变化
|
||||
- 批量操作前显示确认对话框
|
||||
- 重要操作后显示详细的结果反馈
|
||||
|
||||
### 3. 所有列表必须支持
|
||||
|
||||
```text
|
||||
分页 / 筛选 / 排序
|
||||
```
|
||||
|
||||
**实现方式**：
|
||||
- 使用 `BusinessTable` 组件，默认支持分页
|
||||
- 为表格添加排序功能
|
||||
- 在页面顶部添加筛选栏
|
||||
|
||||
### 4. 所有弹窗统一
|
||||
|
||||
- **宽度**：600px（默认）
|
||||
- **按钮位置**：底部右侧，确认按钮在左，取消按钮在右
|
||||
- **提交流程**：loading → success / error → 关闭弹窗
|
||||
|
||||
---
|
||||
|
||||
## 📦 组件交互规范
|
||||
|
||||
### BusinessButton
|
||||
|
||||
**使用场景**：
|
||||
- 页面级操作（创建、导入、导出）
|
||||
- 行级操作（编辑、删除、查看）
|
||||
- 批量操作（批量修改、批量删除）
|
||||
|
||||
**交互规范**：
|
||||
- 点击按钮后显示 loading 状态
|
||||
- 操作完成后显示 success/error 消息
|
||||
- 禁用状态时应显示相应样式
|
||||
|
||||
### BusinessCard
|
||||
|
||||
**使用场景**：
|
||||
- 数据展示
|
||||
- 功能模块分组
|
||||
- 信息汇总
|
||||
|
||||
**交互规范**：
|
||||
- 卡片应有明确的标题
|
||||
- 可添加额外操作按钮
|
||||
- 卡片内容应布局合理
|
||||
|
||||
### BusinessTable
|
||||
|
||||
**使用场景**：
|
||||
- 商品列表
|
||||
- 订单列表
|
||||
- 广告列表
|
||||
|
||||
**交互规范**：
|
||||
- 支持分页（默认每页10条）
|
||||
- 支持列排序
|
||||
- 支持行选择
|
||||
- 支持行操作按钮
|
||||
|
||||
### BusinessModal
|
||||
|
||||
**使用场景**：
|
||||
- 编辑表单
|
||||
- 确认操作
|
||||
- 详细信息展示
|
||||
|
||||
**交互规范**：
|
||||
- 标题应明确操作目的
|
||||
- 内容区域应布局合理
|
||||
- 底部按钮应符合统一位置
|
||||
- 提交时显示 loading 状态
|
||||
|
||||
### BusinessForm
|
||||
|
||||
**使用场景**：
|
||||
- 商品创建/编辑
|
||||
- 订单处理
|
||||
- 广告配置
|
||||
|
||||
**交互规范**：
|
||||
- 表单验证应实时反馈
|
||||
- 提交按钮应显示 loading 状态
|
||||
- 错误信息应清晰可见
|
||||
|
||||
### BusinessMessage
|
||||
|
||||
**使用场景**：
|
||||
- 操作结果反馈
|
||||
- 错误提示
|
||||
- 成功提示
|
||||
|
||||
**交互规范**：
|
||||
- 消息应自动消失（默认3秒）
|
||||
- 错误消息应使用红色
|
||||
- 成功消息应使用绿色
|
||||
- 警告消息应使用黄色
|
||||
|
||||
### BusinessLoading
|
||||
|
||||
**使用场景**：
|
||||
- API请求
|
||||
- 数据加载
|
||||
- 复杂计算
|
||||
|
||||
**交互规范**：
|
||||
- 应显示加载动画
|
||||
- 可添加加载提示文本
|
||||
- 应覆盖在操作区域
|
||||
|
||||
---
|
||||
|
||||
## 📱 页面交互规范
|
||||
|
||||
### Product 页面
|
||||
|
||||
**核心交互**：
|
||||
- 修改价格时实时计算 ROI
|
||||
- AI定价时显示 loading 状态和建议价格
|
||||
- 上下架操作应显示确认对话框
|
||||
- 批量操作应显示操作结果
|
||||
|
||||
### Orders 页面
|
||||
|
||||
**核心交互**：
|
||||
- 订单状态更新时显示 loading 状态
|
||||
- 发货操作应要求输入物流信息
|
||||
- 退款操作应显示确认对话框
|
||||
- 批量操作应显示操作结果
|
||||
|
||||
### Dashboard 页面
|
||||
|
||||
**核心交互**：
|
||||
- 时间范围选择时更新所有数据
|
||||
- 点击 KPI 卡片跳转到详情页面
|
||||
- 图表应支持时间范围筛选
|
||||
|
||||
### Ad 页面
|
||||
|
||||
**核心交互**：
|
||||
- 广告启停操作应显示确认对话框
|
||||
- AI优化时显示 loading 状态和优化建议
|
||||
- 批量操作应显示操作结果
|
||||
|
||||
### Finance 页面
|
||||
|
||||
**核心交互**：
|
||||
- 账单详情查看应显示详细的收支明细
|
||||
- 导出操作应显示操作结果
|
||||
- 筛选条件变化时更新数据
|
||||
|
||||
---
|
||||
|
||||
## 🎨 视觉交互规范
|
||||
|
||||
### 颜色系统
|
||||
|
||||
- **主色**：#1890ff
|
||||
- **成功**：#52c41a
|
||||
- **警告**：#faad14
|
||||
- **错误**：#f5222d
|
||||
- **信息**：#1890ff
|
||||
|
||||
### 字体系统
|
||||
|
||||
- **标题**：16px / 20px
|
||||
- **正文**：14px
|
||||
- **小文本**：12px
|
||||
|
||||
### 间距系统
|
||||
|
||||
- **页面边距**：16px
|
||||
- **卡片间距**：16px
|
||||
- **按钮间距**：8px
|
||||
- **输入框高度**：32px
|
||||
|
||||
### 动画效果
|
||||
|
||||
- **按钮点击**：轻微缩放
|
||||
- **弹窗出现**：淡入效果
|
||||
- **加载状态**：旋转动画
|
||||
- **消息提示**：滑入效果
|
||||
|
||||
---
|
||||
|
||||
## 🔧 技术实现规范
|
||||
|
||||
### 状态管理
|
||||
|
||||
- 使用 React Context API 或 Redux 管理全局状态
|
||||
- 组件内部状态使用 useState
|
||||
- 异步操作使用 useEffect
|
||||
|
||||
### 数据请求
|
||||
|
||||
- 使用 axios 进行 API 请求
|
||||
- 统一处理请求错误
|
||||
- 添加请求超时处理
|
||||
|
||||
### 错误处理
|
||||
|
||||
- 全局错误边界
|
||||
- 组件级错误处理
|
||||
- 用户友好的错误提示
|
||||
|
||||
### 性能优化
|
||||
|
||||
- 组件懒加载
|
||||
- 数据缓存
|
||||
- 防抖和节流
|
||||
|
||||
---
|
||||
|
||||
## 📋 验收标准
|
||||
|
||||
### 页面交互验收
|
||||
|
||||
- [ ] 所有操作都有 loading 状态
|
||||
- [ ] 所有操作都有 success/error 反馈
|
||||
- [ ] 所有列表都支持分页、筛选、排序
|
||||
- [ ] 所有弹窗都符合统一规范
|
||||
- [ ] 所有“影响钱”的操作都有提示
|
||||
|
||||
### 组件交互验收
|
||||
|
||||
- [ ] BusinessButton 符合交互规范
|
||||
- [ ] BusinessCard 符合交互规范
|
||||
- [ ] BusinessTable 符合交互规范
|
||||
- [ ] BusinessModal 符合交互规范
|
||||
- [ ] BusinessForm 符合交互规范
|
||||
- [ ] BusinessMessage 符合交互规范
|
||||
- [ ] BusinessLoading 符合交互规范
|
||||
|
||||
### 视觉交互验收
|
||||
|
||||
- [ ] 颜色使用符合规范
|
||||
- [ ] 字体使用符合规范
|
||||
- [ ] 间距使用符合规范
|
||||
- [ ] 动画效果符合规范
|
||||
|
||||
---
|
||||
|
||||
## 🚀 实施计划
|
||||
|
||||
### 第一阶段：组件规范
|
||||
- 实现统一的组件库
|
||||
- 定义组件交互规范
|
||||
- 编写组件使用文档
|
||||
|
||||
### 第二阶段：页面规范
|
||||
- 应用组件库到所有页面
|
||||
- 实现页面级交互规范
|
||||
- 测试页面交互效果
|
||||
|
||||
### 第三阶段：系统规范
|
||||
- 统一全局交互行为
|
||||
- 优化用户体验
|
||||
- 编写系统交互文档
|
||||
|
||||
---
|
||||
|
||||
> **统一交互规范是确保系统一致性和用户体验的关键**
|
||||
> **所有前端开发必须严格遵循本规范**
|
||||
@@ -9,50 +9,95 @@
|
||||
## 1. 页面流转总览
|
||||
|
||||
```
|
||||
登录页
|
||||
登录页 (/Auth/LoginPage)
|
||||
│
|
||||
▼
|
||||
仪表盘 (Dashboard)
|
||||
仪表盘 (Dashboard) (/)
|
||||
│
|
||||
├──► 商品管理
|
||||
│ ├── 商品列表 ──► 商品详情
|
||||
├──► 商品管理 (/Product)
|
||||
│ ├── 商品列表 ──► 商品详情 (/Product/ProductDetail)
|
||||
│ │ ├── 编辑商品
|
||||
│ │ └── 审核商品
|
||||
│ ├── 创建商品
|
||||
│ └── 商品审核
|
||||
│ ├── 创建商品 (/Product/ProductPublishForm)
|
||||
│ └── 物料上传 (/Product/MaterialUpload)
|
||||
│
|
||||
├──► 订单管理
|
||||
│ ├── 订单列表 ──► 订单详情
|
||||
├──► 订单管理 (/Orders)
|
||||
│ ├── 订单列表 (/Orders/OrderList) ──► 订单详情 (/Orders/OrderDetail)
|
||||
│ │ └── 状态流转
|
||||
│ └── 订单审核
|
||||
│ ├── 异常订单处理 (/Orders/ExceptionOrder)
|
||||
│ └── 订单聚合分析 (/Orders/OrderAggregation)
|
||||
│
|
||||
├──► 财务管理
|
||||
│ ├── 财务概览
|
||||
│ ├── 交易流水
|
||||
│ └── 利润对账
|
||||
├──► 商户管理 (/Merchant)
|
||||
│ ├── 商户管理 (/Merchant/MerchantManage)
|
||||
│ ├── 商户订单管理 (/Merchant/MerchantOrderManage)
|
||||
│ ├── 商户结算管理 (/Merchant/MerchantSettlementManage)
|
||||
│ └── 商户店铺管理 (/Merchant/MerchantShopManage)
|
||||
│
|
||||
├──► 库存管理
|
||||
│ ├── 库存概览
|
||||
│ ├── 仓库管理
|
||||
│ └── 库存预测
|
||||
├──► 售后服务 (/AfterSales)
|
||||
│ ├── 退货申请 (/AfterSales/ReturnApply)
|
||||
│ ├── 退款流程 (/AfterSales/RefundProcess)
|
||||
│ └── 客户服务 (/AfterSales/CustomerService)
|
||||
│
|
||||
├──► 营销广告
|
||||
│ ├── 营销概览
|
||||
│ ├── 广告管理
|
||||
│ └── 竞品监控
|
||||
├──► 物流管理 (/Logistics)
|
||||
│ ├── 物流选择 (/Logistics/LogisticsSelect)
|
||||
│ ├── 运费计算 (/Logistics/FreightCalc)
|
||||
│ └── 物流追踪 (/Logistics/LogisticsTrack)
|
||||
│
|
||||
├──► 供应商管理
|
||||
│ ├── 供应商列表 ──► 供应商详情
|
||||
│ └── 供应商审核
|
||||
├──► 合规管理 (/Compliance)
|
||||
│ ├── 合规检查 (/Compliance/ComplianceCheck)
|
||||
│ ├── 证书管理 (/Compliance/CertificateManage)
|
||||
│ └── 证书过期提醒 (/Compliance/CertificateExpiryReminder)
|
||||
│
|
||||
├──► 报表分析
|
||||
│ ├── 利润报表
|
||||
│ └── 绩效报表
|
||||
├──► 黑名单管理 (/Blacklist)
|
||||
│ ├── 黑名单管理 (/Blacklist/BlacklistManage)
|
||||
│ └── 风险监控 (/Blacklist/RiskMonitor)
|
||||
│
|
||||
└──► 系统设置
|
||||
├── 个人设置
|
||||
├── 租户设置
|
||||
└── 用户管理
|
||||
├──► B2B贸易 (/B2B)
|
||||
│ ├── 企业报价 (/B2B/EnterpriseQuote)
|
||||
│ ├── 批量订单 (/B2B/BatchOrder)
|
||||
│ └── 合同管理 (/B2B/ContractManage)
|
||||
│
|
||||
├──► 广告管理 (/Ad)
|
||||
│ ├── 广告投放 (/Ad/AdDelivery)
|
||||
│ ├── ROI分析 (/Ad/ROIAnalysis)
|
||||
│ └── 广告计划 (/Ad/AdPlanPage)
|
||||
│
|
||||
├──► 财务管理 (/Finance)
|
||||
│ ├── 交易记录 (/Finance/Transactions)
|
||||
│ └── 对账记录 (/Finance/Reconciliation)
|
||||
│
|
||||
├──► 库存管理 (/Inventory)
|
||||
│ ├── 仓库管理 (/Inventory/Warehouses)
|
||||
│ └── 库存预测 (/Inventory/InventoryForecast)
|
||||
│
|
||||
├──► 营销管理 (/Marketing)
|
||||
│ ├── 广告管理 (/Marketing/Ads)
|
||||
│ └── 竞争对手分析 (/Marketing/Competitors)
|
||||
│
|
||||
├──► 供应商管理 (/Suppliers)
|
||||
│ └── 供应商详情 (/Suppliers/SupplierDetail)
|
||||
│
|
||||
├──► 报表中心 (/Reports)
|
||||
│ ├── 利润报表 (/Reports/ProfitReport)
|
||||
│ └── 绩效报表 (/Reports/PerformanceReport)
|
||||
│
|
||||
├──► 设置 (/Settings)
|
||||
│ ├── 个人设置 (/Settings/ProfileSettings)
|
||||
│ ├── 租户设置 (/Settings/TenantSettings)
|
||||
│ └── 用户管理 (/Settings/UserManagement)
|
||||
│
|
||||
├──► A/B测试 (/ABTest)
|
||||
│ ├── A/B测试配置 (/ABTest/ABTestConfig)
|
||||
│ └── 测试结果分析 (/ABTest/ABTestResults)
|
||||
│
|
||||
├──► 退货管理 (/Return)
|
||||
│ ├── 退货监控 (/Return/ReturnMonitor)
|
||||
│ └── SKU管理 (/Return/SKUManage)
|
||||
│
|
||||
└──► 用户资产管理 (/UserAsset)
|
||||
├── 会员等级管理 (/UserAsset/MemberLevel)
|
||||
├── 积分管理 (/UserAsset/PointsManage)
|
||||
└── 用户资产 (/UserAsset/UserAssets)
|
||||
```
|
||||
|
||||
---
|
||||
@@ -330,29 +375,93 @@
|
||||
├── 仪表盘
|
||||
├── 商品管理
|
||||
├── 订单管理
|
||||
├── 财务管理
|
||||
├── 库存管理
|
||||
├── 营销广告
|
||||
├── 供应商
|
||||
├── 报表分析
|
||||
└── 系统设置
|
||||
├── 商户管理
|
||||
├── 售后服务
|
||||
├── 物流管理
|
||||
├── 合规管理
|
||||
├── 黑名单管理
|
||||
├── B2B贸易
|
||||
├── 广告管理
|
||||
├── A/B测试
|
||||
├── 退货管理
|
||||
└── 用户资产管理
|
||||
```
|
||||
|
||||
### 10.2 面包屑导航
|
||||
|
||||
```
|
||||
首页 / 商品管理 / 商品详情
|
||||
首页 / 订单管理 / 订单审核
|
||||
首页 / 财务管理 / 利润对账
|
||||
首页 / 订单管理 / 订单列表
|
||||
首页 / 商户管理 / 商户管理
|
||||
首页 / 售后服务 / 退货申请
|
||||
首页 / 物流管理 / 物流追踪
|
||||
首页 / 合规管理 / 合规检查
|
||||
首页 / 黑名单管理 / 风险监控
|
||||
首页 / B2B贸易 / 企业报价
|
||||
首页 / 广告管理 / ROI分析
|
||||
首页 / A/B测试 / 测试结果分析
|
||||
首页 / 退货管理 / 退货监控
|
||||
首页 / 用户资产管理 / 会员等级管理
|
||||
```
|
||||
|
||||
### 10.3 快捷操作
|
||||
|
||||
| 操作 | 触发方式 | 说明 |
|
||||
|------|----------|------|
|
||||
| 全局搜索 | Ctrl + K | 快速搜索商品、订单 |
|
||||
| 通知中心 | 顶部图标 | 查看系统通知 |
|
||||
| 个人菜单 | 头像下拉 | 个人设置、退出登录 |
|
||||
| 全局搜索 | Ctrl + K | 快速搜索商品、订单、商户等 |
|
||||
| 通知中心 | 顶部图标 | 查看系统通知、待办事项 |
|
||||
| 个人菜单 | 头像下拉 | 个人设置、退出登录、切换租户 |
|
||||
| 主题切换 | 顶部图标 | 切换深色/浅色主题 |
|
||||
| 语言切换 | 顶部图标 | 切换系统语言 |
|
||||
| 帮助中心 | 顶部图标 | 查看系统文档、常见问题 |
|
||||
|
||||
### 10.4 交互优化
|
||||
|
||||
#### 10.4.1 表单交互
|
||||
- **实时验证**：表单输入时实时验证，提供即时反馈
|
||||
- **自动保存**：重要表单自动保存草稿，防止数据丢失
|
||||
- **智能填充**：根据历史数据和上下文自动填充表单字段
|
||||
- **批量操作**：支持表单数据的批量编辑和导入导出
|
||||
|
||||
#### 10.4.2 列表交互
|
||||
- **虚拟滚动**：长列表使用虚拟滚动，提升性能
|
||||
- **列排序**：支持点击列头排序
|
||||
- **列筛选**：支持按列筛选数据
|
||||
- **列调整**：支持调整列宽和显示/隐藏列
|
||||
- **批量选择**：支持复选框批量选择和操作
|
||||
|
||||
#### 10.4.3 页面过渡
|
||||
- **加载状态**：使用骨架屏代替简单的加载动画
|
||||
- **页面切换**：平滑的页面切换动画
|
||||
- **错误处理**：友好的错误提示和恢复方案
|
||||
- **成功反馈**：操作成功后的明确反馈
|
||||
|
||||
#### 10.4.4 响应式交互
|
||||
- **移动端适配**：针对移动设备优化的交互体验
|
||||
- **触摸友好**：增大触摸区域，支持手势操作
|
||||
- **自适应布局**：根据屏幕尺寸自动调整布局
|
||||
|
||||
### 10.5 用户体验考虑
|
||||
|
||||
#### 10.5.1 可访问性
|
||||
- **键盘导航**：支持全键盘操作
|
||||
- **屏幕阅读器**：兼容屏幕阅读器
|
||||
- **颜色对比度**：符合WCAG标准的颜色对比度
|
||||
|
||||
#### 10.5.2 性能优化
|
||||
- **懒加载**：非关键资源懒加载
|
||||
- **缓存策略**：合理的缓存策略减少请求
|
||||
- **预加载**：预测用户行为，预加载相关资源
|
||||
|
||||
#### 10.5.3 反馈机制
|
||||
- **操作反馈**：所有用户操作都有明确的反馈
|
||||
- **进度指示**：长时间操作显示进度条
|
||||
- **错误提示**：清晰的错误提示和解决方案
|
||||
|
||||
#### 10.5.4 引导机制
|
||||
- **新用户引导**：首次使用时的功能引导
|
||||
- **功能提示**：重要功能的使用提示
|
||||
- **上下文帮助**：在适当位置提供帮助信息
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -222,7 +222,410 @@ import { ArrowUpOutlined } from '@ant-design/icons';
|
||||
|
||||
## 3. 业务组件
|
||||
|
||||
### 3.1 状态徽章 (StatusBadge)
|
||||
### 3.1 自定义按钮组件 (CustomButton)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
export const CustomButton: React.FC<{
|
||||
type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
|
||||
size?: 'small' | 'middle' | 'large';
|
||||
onClick?: () => void;
|
||||
children: React.ReactNode;
|
||||
}> = ({ type = 'default', size = 'middle', onClick, children }) => {
|
||||
return (
|
||||
<Button type={type} size={size} onClick={onClick}>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.2 自定义卡片组件 (CustomCard)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Card } from 'antd';
|
||||
|
||||
export const CustomCard: React.FC<{
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
extra?: React.ReactNode;
|
||||
bordered?: boolean;
|
||||
hoverable?: boolean;
|
||||
}> = ({ title, children, extra, bordered = true, hoverable = true }) => {
|
||||
return (
|
||||
<Card
|
||||
title={title}
|
||||
extra={extra}
|
||||
bordered={bordered}
|
||||
hoverable={hoverable}
|
||||
>
|
||||
{children}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.3 自定义输入框组件 (CustomInput)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Input } from 'antd';
|
||||
|
||||
export const CustomInput: React.FC<{
|
||||
placeholder?: string;
|
||||
value?: string;
|
||||
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
disabled?: boolean;
|
||||
size?: 'small' | 'middle' | 'large';
|
||||
maxLength?: number;
|
||||
showCount?: boolean;
|
||||
}> = ({ placeholder, value, onChange, disabled = false, size = 'middle', maxLength, showCount }) => {
|
||||
return (
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
size={size}
|
||||
maxLength={maxLength}
|
||||
showCount={showCount}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.4 响应式布局组件 (ResponsiveLayout)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Layout, Row, Col, Menu, ConfigProvider } from 'antd';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
const { Header, Sider, Content, Footer } = Layout;
|
||||
|
||||
export const ResponsiveLayout: React.FC<{
|
||||
children: React.ReactNode;
|
||||
menuItems: { key: string; label: string }[];
|
||||
selectedKey: string;
|
||||
onMenuSelect: (key: string) => void;
|
||||
logo?: React.ReactNode;
|
||||
headerContent?: React.ReactNode;
|
||||
footerContent?: React.ReactNode;
|
||||
}> = ({
|
||||
children,
|
||||
menuItems,
|
||||
selectedKey,
|
||||
onMenuSelect,
|
||||
logo,
|
||||
headerContent,
|
||||
footerContent,
|
||||
}) => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 });
|
||||
const isTablet = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
|
||||
const isDesktop = useMediaQuery({ minWidth: 1025 });
|
||||
|
||||
const [collapsed, setCollapsed] = React.useState(false);
|
||||
|
||||
const toggleCollapse = () => {
|
||||
setCollapsed(!collapsed);
|
||||
};
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#1890ff',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
{!isMobile && (
|
||||
<Sider
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onCollapse={setCollapsed}
|
||||
style={{
|
||||
background: '#fff',
|
||||
}}
|
||||
>
|
||||
<div className="logo" style={{ padding: '16px', textAlign: 'center' }}>
|
||||
{logo || <div style={{ fontSize: '18px', fontWeight: 'bold' }}>Crawlful Hub</div>}
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
selectedKeys={[selectedKey]}
|
||||
onSelect={({ key }) => onMenuSelect(key)}
|
||||
items={menuItems}
|
||||
style={{
|
||||
height: '100%',
|
||||
borderRight: 0,
|
||||
}}
|
||||
/>
|
||||
</Sider>
|
||||
)}
|
||||
<Layout style={{ flex: 1 }}>
|
||||
<Header
|
||||
style={{
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0 24px',
|
||||
}}
|
||||
>
|
||||
{isMobile && (
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<button
|
||||
onClick={toggleCollapse}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '18px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<div style={{ marginLeft: '16px', fontSize: '16px', fontWeight: 'bold' }}>
|
||||
Crawlful Hub
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{headerContent || (
|
||||
<div style={{ fontSize: '14px' }}>Welcome to Crawlful Hub</div>
|
||||
)}
|
||||
</Header>
|
||||
<Content
|
||||
style={{
|
||||
margin: '24px',
|
||||
padding: '24px',
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '4px',
|
||||
minHeight: 280,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Content>
|
||||
<Footer
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
background: '#fff',
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
}}
|
||||
>
|
||||
{footerContent || 'Crawlful Hub ©2026 Created by AI'}
|
||||
</Footer>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.5 响应式网格组件 (ResponsiveGrid)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd';
|
||||
|
||||
export const ResponsiveGrid: React.FC<{
|
||||
children: React.ReactNode;
|
||||
gutter?: number;
|
||||
xs?: number;
|
||||
sm?: number;
|
||||
md?: number;
|
||||
lg?: number;
|
||||
xl?: number;
|
||||
}> = ({
|
||||
children,
|
||||
gutter = 16,
|
||||
xs = 24,
|
||||
sm = 12,
|
||||
md = 8,
|
||||
lg = 6,
|
||||
xl = 4,
|
||||
}) => {
|
||||
return (
|
||||
<Row gutter={gutter}>
|
||||
<Col xs={xs} sm={sm} md={md} lg={lg} xl={xl}>
|
||||
{children}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.6 响应式卡片组件 (ResponsiveCard)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
export const ResponsiveCard: React.FC<{
|
||||
title?: string;
|
||||
children: React.ReactNode;
|
||||
extra?: React.ReactNode;
|
||||
className?: string;
|
||||
}> = ({ title, children, extra, className }) => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 });
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={{
|
||||
background: '#fff',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
padding: isMobile ? '16px' : '24px',
|
||||
marginBottom: '16px',
|
||||
}}
|
||||
>
|
||||
{title && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
fontWeight: 'bold',
|
||||
marginBottom: '16px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
{extra}
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.7 响应式导航栏组件 (ResponsiveNavbar)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { useMediaQuery } from 'react-responsive';
|
||||
|
||||
export const ResponsiveNavbar: React.FC<{
|
||||
brand: React.ReactNode;
|
||||
items: { label: string; href: string; active?: boolean }[];
|
||||
onItemClick: (href: string) => void;
|
||||
}> = ({ brand, items, onItemClick }) => {
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 });
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<nav
|
||||
style={{
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
padding: '0 24px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: '64px',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>{brand}</div>
|
||||
|
||||
{!isMobile ? (
|
||||
<div style={{ display: 'flex', gap: '24px' }}>
|
||||
{items.map((item, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={item.href}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onItemClick(item.href);
|
||||
}}
|
||||
style={{
|
||||
color: item.active ? '#1890ff' : '#333',
|
||||
textDecoration: 'none',
|
||||
fontSize: '14px',
|
||||
fontWeight: item.active ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '18px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
{mobileMenuOpen && (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '64px',
|
||||
right: '0',
|
||||
left: '0',
|
||||
background: '#fff',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
padding: '16px',
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={item.href}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
onItemClick(item.href);
|
||||
setMobileMenuOpen(false);
|
||||
}}
|
||||
style={{
|
||||
display: 'block',
|
||||
padding: '8px 0',
|
||||
color: item.active ? '#1890ff' : '#333',
|
||||
textDecoration: 'none',
|
||||
fontSize: '14px',
|
||||
fontWeight: item.active ? 'bold' : 'normal',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 3.8 状态徽章组件 (StatusBadge)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
@@ -263,7 +666,7 @@ export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type }) => {
|
||||
};
|
||||
```
|
||||
|
||||
### 3.2 筛选面板 (FilterPanel)
|
||||
### 3.9 筛选面板组件 (FilterPanel)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
@@ -306,7 +709,7 @@ export const FilterPanel: React.FC<FilterPanelProps> = ({ onFilter, onReset }) =
|
||||
};
|
||||
```
|
||||
|
||||
### 3.3 数据表格 (DataTable)
|
||||
### 3.10 数据表格组件 (DataTable)
|
||||
|
||||
**组件定义**
|
||||
```tsx
|
||||
|
||||
Reference in New Issue
Block a user