refactor: 优化代码结构并修复类型问题

- 移除未使用的TabPane组件
- 修复类型定义和导入方式
- 优化mock数据源的环境变量判断逻辑
- 更新文档结构并归档旧文件
- 添加新的UI组件和Memo组件
- 调整API路径和响应处理

docs/ARCHIVE/03_Frontend/00_Frontend_Index.md

@@ -0,0 +1,30 @@
+# 前端文档索引
+
+> **模块**: 03_Frontend - 前端设计与开发  
+> **更新日期**: 2026-03-19
+
+---
+
+## 核心设计
+
+| 文档 | 描述 | 状态 |
+|------|------|------|
+| [01_Design](01_Design.md) | 前端设计总览 | ✅ |
+| [02_Development_Guide](02_Development_Guide.md) | 前端开发指南 | ✅ |
+| [03_Optimization_Guide](03_Optimization_Guide.md) | 前端优化指南 | ✅ |
+| [04_Interaction_Guidelines](04_Interaction_Guidelines.md) | 交互设计规范 | ✅ |
+| [05_UI_Components](05_UI_Components.md) | UI组件规范 | ✅ |
+| [06_Pages_Flow](06_Pages_Flow.md) | 页面流程设计 | ✅ |
+
+---
+
+## 关联模块
+
+- [架构模块](../01_Architecture/00_Architecture_Index.md)
+- [后端模块](../02_Backend/00_Backend_Index.md)
+
+---
+
+## 最近更新
+
+- 2026-03-19: 重构前端文档结构，统一命名规范

docs/ARCHIVE/03_Frontend/01_Design.md

@@ -0,0 +1,732 @@
+# Frontend Design (Crawlful Hub)
+
+> **定位**：Crawlful Hub 前端架构设计文档 - 包含技术栈、目录结构、核心模块及开发规范。
+> **更新日期**: 2026-03-18
+> **最高优先级参考**: [Business_Blueprint.md](../00_Business/Business_Blueprint.md)
+
+---
+
+## 1. 技术栈 (Tech Stack)
+
+### 1.1 当前技术栈
+
+| 层级 | 技术 | 版本 | 用途 |
+|------|------|------|------|
+| **Framework** | React | 18.x | UI 框架 |
+| **Language** | TypeScript | 5.x | 开发语言 |
+| **Build Tool** | Umi | 4.x | 构建工具 |
+| **UI Library** | Ant Design | 5.x | 组件库 |
+| **State** | Redux | 4.x | 状态管理 |
+| **Router** | Umi Router | 4.x | 路由管理 |
+| **Testing** | Jest | 29.x | 单元测试 |
+
+### 1.2 技术栈演进 (2026 Q4 目标)
+
+| 层级 | 技术 | 版本 | 用途 |
+|------|------|------|------|
+| **Framework** | React | 19 (或 Next.js 15) | UI 框架 |
+| **Language** | TypeScript | 5.x | 开发语言 |
+| **Build Tool** | Vite (开发) + Rspack (生产) | - | 构建工具 |
+| **UI Library** | Ant Design 5.x + 自定义组件库 | - | 组件库 |
+| **State** | Zustand + TanStack Query | - | 状态管理 |
+| **Router** | Umi Router 4.x | - | 路由管理 |
+| **Testing** | Jest | 29.x | 单元测试 |
+| **微前端** | qiankun | - | 大型模块独立部署 |
+
+---
+
+## 2. 目录结构 (Directory Structure)
+
+```
+dashboard/src/
+│
+├─ .umi/                        # Umi 生成文件
+│   ├─ core/
+│   ├─ appData.json
+│   └─ exports.ts
+│
+├─ components/                   # 公共组件
+│   ├─ 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                 # 订单状态
+│   ├─ crossBorder.ts           # 跨境电商状态
+
+├─ pages/
+│   ├─ CrossBorder/
+│   │   ├─ ProductManagement.tsx        # 跨境商品管理
+│   │   ├─ CustomsDeclaration.tsx       # 清关申报
+│   │   ├─ LogisticsManagement.tsx      # 物流管理
+│   │   ├─ PaymentManagement.tsx        # 支付管理
+│   │   ├─ PlatformIntegration.tsx      # 平台集成
+│   │   └─ index.tsx
+
+├─ services/
+│   ├─ crossBorderDataSource.ts         # 跨境电商数据源
+│   ├─ platformIntegrationService.ts    # 平台集成服务
+│   ├─ product.ts               # 商品状态
+│   └── index.ts
+│
+├─ pages/                        # 页面组件
+│   ├─ ABTest/                  # A/B测试
+│   ├─ Ad/                      # 广告管理
+│   ├─ AfterSales/              # 售后服务
+│   ├─ Auth/                    # 认证
+│   ├─ B2B/                     # B2B贸易
+│   ├─ B2BTrade/                # B2B贸易
+│   ├─ Blacklist/               # 黑名单管理
+│   ├─ Compliance/              # 合规管理
+│   ├─ Finance/                 # 财务管理
+│   ├─ Inventory/               # 库存管理
+│   ├─ Logistics/               # 物流管理
+│   ├─ Marketing/               # 营销管理
+│   ├─ Merchant/                # 商户管理
+│   ├─ Orders/                  # 订单管理
+│   ├─ Product/                 # 商品管理
+│   ├─ Reports/                 # 报表中心
+│   ├─ Return/                  # 退货管理
+│   ├─ Settings/                # 设置
+│   ├─ Suppliers/               # 供应商管理
+│   ├─ UserAsset/               # 用户资产
+│   └─ index.tsx                # 首页/仪表盘
+│
+├─ services/                     # API 服务
+│   ├─ api/                     # API 客户端
+│   │   ├─ client.ts
+│   │   ├─ index.ts
+│   │   ├─ order.ts
+│   │   ├─ product.ts
+│   │   └─ user.ts
+│   ├─ merchantOrderService.ts  # 商户订单服务
+│   ├─ merchantService.ts       # 商户服务
+│   ├─ merchantSettlementService.ts # 商户结算服务
+│   └─ merchantShopService.ts   # 商户店铺服务
+│
+├─ tests/                        # 测试文件
+│   ├─ frontend.functional.test.ts # 前端功能测试
+│   └─ frontend.integration.test.ts # 前端集成测试
+│
+└─ utils/                        # 工具函数
+    ├─ PerformanceOptimization.ts # 性能优化
+    ├─ performance.ts           # 性能相关
+    ├─ responsive.ts            # 响应式相关
+    └─ security.ts              # 安全相关
+```
+
+---
+
+## 3. 页面路由 (Routes)
+
+### 3.1 路由结构
+
+```typescript
+const routes = [
+  // 公共路由
+  { path: '/login', element: <Login /> },
+  
+  // 受保护路由
+  {
+    path: '/',
+    element: <MainLayout />,
+    children: [
+      { path: '/', element: <Dashboard /> },
+      { path: '/products', element: <Products /> },
+      { path: '/products/:id', element: <ProductDetail /> },
+      { path: '/products/create', element: <ProductCreate /> },
+      { path: '/products/review', element: <ProductReview /> },
+      { path: '/orders', element: <Orders /> },
+      { path: '/orders/:id', element: <OrderDetail /> },
+      { path: '/orders/audit', element: <OrderAudit /> },
+      { path: '/finance', element: <Finance /> },
+      { path: '/finance/transactions', element: <Transactions /> },
+      { path: '/finance/reconciliation', element: <Reconciliation /> },
+      { path: '/inventory', element: <Inventory /> },
+      { path: '/inventory/warehouses', element: <Warehouses /> },
+      { path: '/inventory/forecast', element: <InventoryForecast /> },
+      { path: '/marketing', element: <Marketing /> },
+      { path: '/marketing/ads', element: <Ads /> },
+      { path: '/marketing/competitors', element: <Competitors /> },
+      { path: '/suppliers', element: <Suppliers /> },
+      { path: '/suppliers/:id', element: <SupplierDetail /> },
+      { path: '/reports', element: <Reports /> },
+      { path: '/reports/profit', element: <ProfitReport /> },
+      { path: '/reports/performance', element: <PerformanceReport /> },
+      { path: '/settings', element: <Settings /> },
+      { path: '/settings/profile', element: <ProfileSettings /> },
+      { path: '/settings/tenant', element: <TenantSettings /> },
+      { path: '/settings/users', element: <UserManagement /> },
+    ]
+  }
+];
+```
+
+### 3.2 权限路由
+
+```typescript
+// 基于角色的路由访问控制
+const roleRoutes = {
+  ADMIN: ['*'],           // 所有路由
+  MANAGER: ['*'],         // 所有路由
+  OPERATOR: [
+    '/products',
+    '/orders',
+    '/inventory'
+  ],
+  FINANCE: [
+    '/finance',
+    '/reports'
+  ],
+  SOURCING: [
+    '/products',
+    '/suppliers'
+  ],
+  LOGISTICS: [
+    '/orders',
+    '/inventory'
+  ],
+  ANALYST: [
+    '/reports',
+    '/marketing/competitors'
+  ]
+};
+```
+
+---
+
+## 4. 核心模块
+
+### 4.1 商品管理模块
+
+**功能列表**
+- 商品列表展示 (分页、筛选、排序)
+- 商品详情查看
+- 商品创建/编辑
+- 商品审核流程
+- 批量操作
+- 动态定价
+- 套利分析
+
+**页面组件**
+- `Product/index.tsx` - 商品管理入口
+- `Product/ProductDetail.tsx` - 商品详情页
+- `Product/ProductPublishForm.tsx` - 商品发布表单
+- `Product/MaterialUpload.tsx` - 物料上传
+
+### 4.2 订单管理模块
+
+**功能列表**
+- 订单列表展示
+- 订单详情查看
+- 订单状态流转
+- 批量审核
+- 订单统计
+- 异常订单处理
+- 订单聚合分析
+
+**页面组件**
+- `Orders/index.tsx` - 订单管理入口
+- `Orders/OrderList.tsx` - 订单列表页
+- `Orders/OrderDetail.tsx` - 订单详情页
+- `Orders/ExceptionOrder.tsx` - 异常订单处理
+- `Orders/OrderAggregation.tsx` - 订单聚合分析
+
+### 4.3 商户管理模块
+
+**功能列表**
+- 商户列表管理
+- 商户订单管理
+- 商户结算管理
+- 商户店铺管理
+
+**页面组件**
+- `Merchant/index.tsx` - 商户管理入口
+- `Merchant/MerchantManage.tsx` - 商户管理
+- `Merchant/MerchantOrderManage.tsx` - 商户订单管理
+- `Merchant/MerchantSettlementManage.tsx` - 商户结算管理
+- `Merchant/MerchantShopManage.tsx` - 商户店铺管理
+
+### 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/InventoryForecast.tsx` - 库存预测
+
+### 4.12 营销管理模块
+
+**功能列表**
+- 营销概览
+- 广告管理
+- 竞争对手分析
+
+**页面组件**
+- `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` - 用户资产
+
+### 4.13 多语言管理模块
+
+**功能列表**
+- 语言切换
+- 翻译管理
+- 多语言内容发布
+- 语言资源管理
+
+**页面组件**
+- `I18n/index.tsx` - 多语言管理入口
+- `I18n/LanguageSwitcher.tsx` - 语言切换组件
+- `I18n/TranslationManage.tsx` - 翻译管理
+- `I18n/ContentPublish.tsx` - 多语言内容发布
+
+---
+
+## 5. 组件规范
+
+### 5.1 组件命名
+
+- **页面组件**: PascalCase，以功能命名 (如 `ProductList`, `OrderDetail`)
+- **公共组件**: PascalCase，以功能命名 (如 `DataTable`, `FilterPanel`)
+- **Hooks**: camelCase，以 `use` 开头 (如 `useProducts`, `useAuth`)
+
+### 5.2 组件结构
+
+```typescript
+// 页面组件示例
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Table, Button } from 'antd';
+import { useProducts } from '@/hooks/useProducts';
+
+export const Products: React.FC = () => {
+  const { data, isLoading } = useProducts();
+  
+  const columns = [
+    { title: '商品名称', dataIndex: 'title' },
+    { title: '平台', dataIndex: 'platform' },
+    { title: '状态', dataIndex: 'status' },
+    { title: '售价', dataIndex: 'sellingPrice' },
+  ];
+  
+  return (
+    <div>
+      <h1>商品管理</h1>
+      <Table 
+        dataSource={data} 
+        columns={columns} 
+        loading={isLoading} 
+      />
+    </div>
+  );
+};
+```
+
+### 5.3 状态管理
+
+```typescript
+// Redux Store 示例
+import { createStore, combineReducers, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import { createLogger } from 'redux-logger';
+
+// 定义状态类型
+interface AppState {
+  user: UserState;
+  products: ProductState;
+  orders: OrderState;
+  loading: boolean;
+  error: string | null;
+}
+
+// 组合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 API 客户端配置
+
+```typescript
+// services/api/client.ts
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.API_URL || 'http://localhost:3000/api',
+  timeout: 30000,
+});
+
+// 请求拦截器
+api.interceptors.request.use((config) => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+// 响应拦截器
+api.interceptors.response.use(
+  (response) => response.data,
+  (error) => {
+    if (error.response?.status === 401) {
+      // 处理未授权
+      window.location.href = '/Auth/LoginPage';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
+```
+
+### 6.2 API 服务
+
+```typescript
+// services/api/product.ts
+import api from './client';
+
+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}`);
+  },
+};
+
+// 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 });
+  },
+};
+```
+
+---
+
+## 7. 开发规范
+
+### 7.1 代码规范
+
+- 使用 TypeScript 严格模式
+- 组件使用函数式组件 + Hooks
+- 使用绝对路径导入 (`@/components/...`)
+- 避免使用 `any` 类型
+
+### 7.2 样式规范
+
+- 使用 Ant Design 组件默认样式
+- 自定义样式使用 CSS Modules 或 Tailwind
+- 遵循设计系统规范
+
+### 7.3 错误处理
+
+```typescript
+// 错误边界
+import { ErrorBoundary } from 'react-error-boundary';
+
+const ErrorFallback = ({ error }: { error: Error }) => (
+  <div>
+    <h2>出错了</h2>
+    <p>{error.message}</p>
+  </div>
+);
+
+// 使用
+<ErrorBoundary FallbackComponent={ErrorFallback}>
+  <App />
+</ErrorBoundary>
+```
+
+---
+
+## 8. 构建与部署
+
+### 8.1 环境变量
+
+```env
+VITE_API_URL=http://localhost:3000/api/v1
+VITE_APP_NAME=Crawlful Hub
+VITE_APP_VERSION=1.0.0
+```
+
+### 8.2 构建命令
+
+```bash
+npm install       # 安装依赖
+npm run dev       # 开发模式
+npm run build     # 生产构建
+npm run preview   # 预览构建
+npm run test      # 运行测试
+```
+
+---
+
+## 9. 前端发展规划
+
+### 9.1 前端架构规划
+
+- **微前端架构**: 采用 qiankun 实现大型模块独立部署，解决大型应用构建慢、维护难的问题
+- **BFF 层**: 引入 Backend for Frontend 模式，统一接口管理，减少前端复杂度
+- **多端适配**: 支持桌面端、平板端和移动端的响应式布局
+- **离线能力**: 实现 PWA，支持离线访问核心功能
+
+### 9.2 页面功能扩展计划
+
+| 模块 | 现有功能 | 计划扩展 |
+|------|---------|---------|
+| 商品管理 | 基础商品管理、套利分析 | 智能选品推荐、商品生命周期管理、多平台批量操作 |
+| 订单管理 | 订单列表、状态流转 | 智能审单、异常订单自动处理、多渠道订单聚合 |
+| 财务管理 | 基础财务概览 | 智能对账、多币种自动换算、税务报表自动生成 |
+| 营销管理 | 广告投放管理 | 智能广告优化、竞品分析、多平台营销协同 |
+| 库存管理 | 基础库存管理 | 智能补货建议、库存预测、多仓协同 |
+| 物流管理 | 基础物流选择 | 智能物流路径规划、运费优化、实时轨迹监控 |
+| 平台集成 | 基础平台连接 | 更多平台集成、API 自动同步、无 API 平台支持 |
+
+### 9.3 组件库规划
+
+- **基础组件**: 基于 Ant Design 5.x 扩展，统一设计规范
+- **业务组件**: 封装商品、订单、财务等核心业务组件
+- **智能组件**: 集成 AI 能力的智能推荐、智能分析组件
+- **可视化组件**: 基于 ECharts 的数据可视化组件库
+- **表单组件**: 智能表单验证、动态表单生成
+
+### 9.4 性能优化规划
+
+- **构建优化**: 使用 Vite + Rspack，提升构建速度
+- **渲染优化**: 虚拟滚动、懒加载、代码分割
+- **缓存策略**: 合理使用浏览器缓存、Service Worker 缓存
+- **网络优化**: HTTP/2、HTTP/3 支持，减少请求体积
+- **监控体系**: 集成前端性能监控，实时预警性能问题
+
+### 9.5 开发体验优化
+
+- **代码生成**: 基于模板自动生成页面、组件代码
+- **Mock 系统**: 完善的 Mock 数据体系，支持离线开发
+- **开发工具**: 定制化 VS Code 插件，提升开发效率
+- **文档体系**: 自动生成 API 文档、组件文档
+
+---
+
+## 10. 相关文档
+
+- [UI Components](./UI_Components.md)
+- [Pages Flow](./Pages_Flow.md)
+- [API Consumption](./API_Consumption.md)
+- [Backend API Specs](../02_Backend/API_Specs/)
+
+---
+
+*本文档基于业务蓝图设计，最后更新: 2026-03-18*

docs/ARCHIVE/03_Frontend/02_Development_Guide.md

@@ -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. **用户体验**：关注用户操作流程的流畅性
+
+---
+
+## 🎯 验收标准
+
+- [ ] 页面结构完整
+- [ ] 按钮功能明确
+- [ ] 交互流畅
+- [ ] 响应式适配
+- [ ] 性能良好
+- [ ] 代码规范
+
+---
+
+> **记住：你现在做的不是“页面开发”，而是在搭“业务操作台的骨架”。**

docs/ARCHIVE/03_Frontend/03_Optimization_Guide.md

@@ -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*

docs/ARCHIVE/03_Frontend/04_Interaction_Guidelines.md

@@ -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 符合交互规范
+
+### 视觉交互验收
+
+- [ ] 颜色使用符合规范
+- [ ] 字体使用符合规范
+- [ ] 间距使用符合规范
+- [ ] 动画效果符合规范
+
+---
+
+## 🚀 实施计划
+
+### 第一阶段：组件规范
+- 实现统一的组件库
+- 定义组件交互规范
+- 编写组件使用文档
+
+### 第二阶段：页面规范
+- 应用组件库到所有页面
+- 实现页面级交互规范
+- 测试页面交互效果
+
+### 第三阶段：系统规范
+- 统一全局交互行为
+- 优化用户体验
+- 编写系统交互文档
+
+---
+
+> **统一交互规范是确保系统一致性和用户体验的关键**
+> **所有前端开发必须严格遵循本规范**

docs/ARCHIVE/03_Frontend/05_UI_Components.md

@@ -0,0 +1,896 @@
+# UI Components (Crawlful Hub)
+
+> **定位**：Crawlful Hub 前端 UI 组件规范 - 基于 Ant Design 5.x 的组件库使用指南。
+> **更新日期**: 2026-03-18
+
+---
+
+## 1. 设计系统
+
+### 1.1 色彩规范
+
+```typescript
+// 主色调
+const colors = {
+  primary: '#1890ff',      // 主色
+  success: '#52c41a',      // 成功
+  warning: '#faad14',      // 警告
+  error: '#f5222d',        // 错误
+  info: '#1890ff',         // 信息
+};
+
+// 中性色
+const neutral = {
+  textPrimary: 'rgba(0, 0, 0, 0.85)',
+  textSecondary: 'rgba(0, 0, 0, 0.65)',
+  textDisabled: 'rgba(0, 0, 0, 0.25)',
+  border: '#d9d9d9',
+  background: '#f5f5f5',
+};
+```
+
+### 1.2 字体规范
+
+```typescript
+const typography = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial',
+  fontSize: {
+    small: '12px',
+    base: '14px',
+    medium: '16px',
+    large: '20px',
+    xlarge: '24px',
+  },
+};
+```
+
+---
+
+## 2. 基础组件
+
+### 2.1 按钮 (Button)
+
+**使用场景**
+- 主操作：蓝色主按钮
+- 次操作：默认按钮
+- 危险操作：红色按钮
+- 文字链接：链接按钮
+
+**示例**
+```tsx
+import { Button, Space } from 'antd';
+
+// 主操作
+<Button type="primary">创建商品</Button>
+
+// 次操作
+<Button>取消</Button>
+
+// 危险操作
+<Button type="primary" danger>删除</Button>
+
+// 图标按钮
+<Button icon={<PlusOutlined />}>新增</Button>
+
+// 加载状态
+<Button loading>保存中</Button>
+```
+
+### 2.2 表单 (Form)
+
+**使用场景**
+- 商品创建/编辑
+- 订单审核
+- 用户设置
+
+**示例**
+```tsx
+import { Form, Input, Select, Button } from 'antd';
+
+const ProductForm: React.FC = () => {
+  const [form] = Form.useForm();
+  
+  const onFinish = (values: any) => {
+    console.log(values);
+  };
+  
+  return (
+    <Form form={form} onFinish={onFinish} layout="vertical">
+      <Form.Item 
+        name="title" 
+        label="商品名称" 
+        rules={[{ required: true }]}
+      >
+        <Input placeholder="请输入商品名称" />
+      </Form.Item>
+      
+      <Form.Item name="platform" label="平台">
+        <Select>
+          <Select.Option value="AMAZON">Amazon</Select.Option>
+          <Select.Option value="EBAY">eBay</Select.Option>
+          <Select.Option value="SHOPIFY">Shopify</Select.Option>
+        </Select>
+      </Form.Item>
+      
+      <Form.Item>
+        <Button type="primary" htmlType="submit">提交</Button>
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+### 2.3 表格 (Table)
+
+**使用场景**
+- 商品列表
+- 订单列表
+- 交易流水
+
+**示例**
+```tsx
+import { Table, Tag } from 'antd';
+
+const ProductTable: React.FC = () => {
+  const columns = [
+    {
+      title: '商品名称',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '平台',
+      dataIndex: 'platform',
+      key: 'platform',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: string) => {
+        const colorMap: Record<string, string> = {
+          DRAFTED: 'default',
+          PENDING_REVIEW: 'processing',
+          APPROVED: 'success',
+          REJECTED: 'error',
+        };
+        return <Tag color={colorMap[status]}>{status}</Tag>;
+      },
+    },
+    {
+      title: '售价',
+      dataIndex: 'sellingPrice',
+      key: 'sellingPrice',
+      render: (price: number) => `$${price.toFixed(2)}`,
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, record) => (
+        <Space>
+          <Button type="link">查看</Button>
+          <Button type="link">编辑</Button>
+        </Space>
+      ),
+    },
+  ];
+  
+  return (
+    <Table 
+      columns={columns} 
+      dataSource={products}
+      rowKey="id"
+      pagination={{ pageSize: 20 }}
+    />
+  );
+};
+```
+
+### 2.4 卡片 (Card)
+
+**使用场景**
+- 仪表盘统计卡片
+- 商品信息展示
+- 订单概要
+
+**示例**
+```tsx
+import { Card, Statistic } from 'antd';
+import { ArrowUpOutlined } from '@ant-design/icons';
+
+// 统计卡片
+<Card>
+  <Statistic
+    title="本月营收"
+    value={112893}
+    precision={2}
+    valueStyle={{ color: '#3f8600' }}
+    prefix="$"
+    suffix={<ArrowUpOutlined />}
+  />
+</Card>
+
+// 带标题的卡片
+<Card title="商品信息" extra={<a href="#">更多</a>}>
+  <p>商品名称: Product Name</p>
+  <p>平台: Amazon</p>
+  <p>状态: 已上架</p>
+</Card>
+```
+
+---
+
+## 3. 业务组件
+
+### 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
+import { Badge } from 'antd';
+
+interface StatusBadgeProps {
+  status: string;
+  type: 'product' | 'order' | 'payment';
+}
+
+const statusMap: Record<string, Record<string, { color: string; text: string }>> = {
+  product: {
+    DRAFTED: { color: 'default', text: '草稿' },
+    PENDING_REVIEW: { color: 'processing', text: '待审核' },
+    APPROVED: { color: 'success', text: '已通过' },
+    REJECTED: { color: 'error', text: '已拒绝' },
+    LISTED: { color: 'success', text: '已上架' },
+    DELISTED: { color: 'default', text: '已下架' },
+  },
+  order: {
+    PULLED: { color: 'default', text: '已拉取' },
+    PENDING_REVIEW: { color: 'processing', text: '待审核' },
+    CONFIRMED: { color: 'success', text: '已确认' },
+    SHIPPED: { color: 'blue', text: '已发货' },
+    DELIVERED: { color: 'success', text: '已送达' },
+  },
+  payment: {
+    PENDING: { color: 'warning', text: '待支付' },
+    COMPLETED: { color: 'success', text: '已完成' },
+    FAILED: { color: 'error', text: '失败' },
+    REFUNDED: { color: 'default', text: '已退款' },
+  },
+};
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, type }) => {
+  const config = statusMap[type]?.[status] || { color: 'default', text: status };
+  return <Badge status={config.color as any} text={config.text} />;
+};
+```
+
+### 3.9 筛选面板组件 (FilterPanel)
+
+**组件定义**
+```tsx
+import { Form, Input, Select, DatePicker, Button, Space } from 'antd';
+
+interface FilterPanelProps {
+  onFilter: (values: any) => void;
+  onReset: () => void;
+}
+
+export const FilterPanel: React.FC<FilterPanelProps> = ({ onFilter, onReset }) => {
+  const [form] = Form.useForm();
+  
+  return (
+    <Form form={form} layout="inline" onFinish={onFilter}>
+      <Form.Item name="keyword" label="关键词">
+        <Input placeholder="搜索..." allowClear />
+      </Form.Item>
+      
+      <Form.Item name="platform" label="平台">
+        <Select allowClear style={{ width: 120 }}>
+          <Select.Option value="AMAZON">Amazon</Select.Option>
+          <Select.Option value="EBAY">eBay</Select.Option>
+          <Select.Option value="SHOPIFY">Shopify</Select.Option>
+        </Select>
+      </Form.Item>
+      
+      <Form.Item name="dateRange" label="日期">
+        <DatePicker.RangePicker />
+      </Form.Item>
+      
+      <Form.Item>
+        <Space>
+          <Button type="primary" htmlType="submit">筛选</Button>
+          <Button onClick={() => { form.resetFields(); onReset(); }}>重置</Button>
+        </Space>
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+### 3.10 数据表格组件 (DataTable)
+
+**组件定义**
+```tsx
+import { Table, TableProps } from 'antd';
+
+interface DataTableProps<T> extends TableProps<T> {
+  loading?: boolean;
+  pagination?: {
+    current: number;
+    pageSize: number;
+    total: number;
+  };
+  onPageChange?: (page: number, pageSize: number) => void;
+}
+
+export function DataTable<T extends object>({
+  loading,
+  pagination,
+  onPageChange,
+  ...tableProps
+}: DataTableProps<T>) {
+  return (
+    <Table<T>
+      {...tableProps}
+      loading={loading}
+      pagination={pagination ? {
+        ...pagination,
+        showSizeChanger: true,
+        showTotal: (total) => `共 ${total} 条`,
+        onChange: onPageChange,
+      } : false}
+      scroll={{ x: 'max-content' }}
+    />
+  );
+}
+```
+
+---
+
+## 4. 图表组件
+
+### 4.1 利润趋势图
+
+**使用 Ant Design Charts**
+```tsx
+import { Line } from '@ant-design/charts';
+
+const ProfitChart: React.FC = () => {
+  const data = [
+    { date: '2026-03-01', profit: 1000 },
+    { date: '2026-03-02', profit: 1200 },
+    { date: '2026-03-03', profit: 900 },
+    // ...
+  ];
+  
+  const config = {
+    data,
+    xField: 'date',
+    yField: 'profit',
+    smooth: true,
+    point: {
+      size: 5,
+      shape: 'diamond',
+    },
+    label: {
+      style: {
+        fill: '#aaa',
+      },
+    },
+  };
+  
+  return <Line {...config} />;
+};
+```
+
+### 4.2 订单分布图
+
+```tsx
+import { Pie } from '@ant-design/charts';
+
+const OrderDistributionChart: React.FC = () => {
+  const data = [
+    { type: 'Amazon', value: 400 },
+    { type: 'eBay', value: 300 },
+    { type: 'Shopify', value: 300 },
+  ];
+  
+  const config = {
+    data,
+    angleField: 'value',
+    colorField: 'type',
+    radius: 0.8,
+    label: {
+      type: 'outer',
+    },
+  };
+  
+  return <Pie {...config} />;
+};
+```
+
+---
+
+## 5. 布局组件
+
+### 5.1 主布局 (MainLayout)
+
+```tsx
+import { Layout, Menu } from 'antd';
+import { Outlet, useNavigate } from 'react-router-dom';
+
+const { Header, Sider, Content } = Layout;
+
+const MainLayout: React.FC = () => {
+  const navigate = useNavigate();
+  
+  const menuItems = [
+    { key: '/', label: '仪表盘', icon: <DashboardOutlined /> },
+    { key: '/products', label: '商品管理', icon: <ShoppingOutlined /> },
+    { key: '/orders', label: '订单管理', icon: <FileTextOutlined /> },
+    { key: '/finance', label: '财务管理', icon: <DollarOutlined /> },
+    { key: '/inventory', label: '库存管理', icon: <InboxOutlined /> },
+    { key: '/marketing', label: '营销广告', icon: <BarChartOutlined /> },
+    { key: '/suppliers', label: '供应商', icon: <TeamOutlined /> },
+    { key: '/reports', label: '报表分析', icon: <PieChartOutlined /> },
+    { key: '/settings', label: '系统设置', icon: <SettingOutlined /> },
+  ];
+  
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider theme="light">
+        <div style={{ height: 64, padding: 16 }}>Crawlful Hub</div>
+        <Menu
+          mode="inline"
+          items={menuItems}
+          onClick={({ key }) => navigate(key)}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{ background: '#fff', padding: '0 24px' }}>
+          {/* Header content */}
+        </Header>
+        <Content style={{ margin: 24, padding: 24, background: '#fff' }}>
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+};
+```
+
+---
+
+## 6. 表单校验规则
+
+```typescript
+// utils/validators.ts
+export const validators = {
+  required: (message: string) => ({ required: true, message }),
+  
+  email: { type: 'email', message: '请输入有效的邮箱地址' },
+  
+  price: (min: number = 0) => ({
+    validator: (_: any, value: number) => {
+      if (value >= min) return Promise.resolve();
+      return Promise.reject(new Error(`价格不能低于 ${min}`));
+    },
+  }),
+  
+  url: { type: 'url', message: '请输入有效的URL' },
+};
+```
+
+---
+
+## 7. 相关文档
+
+- [Frontend Design](./Frontend_Design.md)
+- [Pages Flow](./Pages_Flow.md)
+- [Ant Design 官方文档](https://ant.design/)
+
+---
+
+*本文档基于 Ant Design 5.x，最后更新: 2026-03-18*

docs/ARCHIVE/03_Frontend/06_Pages_Flow.md

@@ -0,0 +1,476 @@
+# Pages Flow (Crawlful Hub)
+
+> **定位**：Crawlful Hub 前端页面流转文档 - 描述各模块页面间的跳转关系和数据流。
+> **更新日期**: 2026-03-18
+> **最高优先级参考**: [Business_ClosedLoops.md](../00_Business/Business_ClosedLoops.md)
+
+---
+
+## 1. 页面流转总览
+
+```
+登录页 (/Auth/LoginPage)
+  │
+  ▼
+仪表盘 (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)
+```
+
+---
+
+## 2. 商品管理模块
+
+### 2.1 页面流转图
+
+```
+商品列表页 (/products)
+  │
+  ├──► 创建商品 (/products/create) ──► 返回列表
+  │
+  ├──► 商品详情 (/products/:id)
+  │     ├── 编辑 ──► 编辑页 (/products/:id/edit)
+  │     └── 审核 ──► 审核弹窗
+  │
+  └──► 商品审核 (/products/review)
+```
+
+### 2.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 商品列表 | `/products` | 展示所有商品，支持筛选、排序、分页 | product:read |
+| 商品详情 | `/products/:id` | 展示商品详细信息，支持编辑、删除 | product:read |
+| 创建商品 | `/products/create` | 表单创建新商品 | product:create |
+| 编辑商品 | `/products/:id/edit` | 编辑商品信息 | product:update |
+| 商品审核 | `/products/review` | 审核待上架商品 | product:review |
+
+### 2.3 数据流
+
+```
+商品列表页
+  │
+  ├── 加载数据: GET /api/v1/products
+  │
+  ├── 筛选操作
+  │     ├── 平台筛选
+  │     ├── 状态筛选
+  │     └── 关键词搜索
+  │
+  ├── 分页操作
+  │     └── GET /api/v1/products?page={n}
+  │
+  └── 批量操作
+        ├── 批量审核
+        └── 批量删除
+```
+
+---
+
+## 3. 订单管理模块
+
+### 3.1 页面流转图
+
+```
+订单列表页 (/orders)
+  │
+  ├──► 订单详情 (/orders/:id)
+  │     ├── 状态流转
+  │     ├── 编辑信息
+  │     └── 查看账单
+  │
+  └──► 订单审核 (/orders/audit)
+```
+
+### 3.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 订单列表 | `/orders` | 展示所有订单，支持筛选 | order:read |
+| 订单详情 | `/orders/:id` | 展示订单详细信息 | order:read |
+| 订单审核 | `/orders/audit` | 批量审核订单 | order:audit |
+
+### 3.3 状态流转
+
+```
+订单详情页
+  │
+  ├── 当前状态: PULLED
+  │     └── 操作: 审核 ──► PENDING_REVIEW
+  │
+  ├── 当前状态: PENDING_REVIEW
+  │     └── 操作: 确认 ──► CONFIRMED
+  │
+  ├── 当前状态: CONFIRMED
+  │     └── 操作: 分配 ──► ALLOCATED
+  │
+  ├── 当前状态: ALLOCATED
+  │     └── 操作: 准备发货 ──► READY_TO_SHIP
+  │
+  ├── 当前状态: READY_TO_SHIP
+  │     └── 操作: 发货 ──► SHIPPED
+  │
+  ├── 当前状态: SHIPPED
+  │     └── 操作: 送达 ──► DELIVERED
+  │
+  └── 当前状态: DELIVERED
+        └── 操作: 关闭 ──► CLOSED
+```
+
+---
+
+## 4. 财务管理模块
+
+### 4.1 页面流转图
+
+```
+财务概览 (/finance)
+  │
+  ├──► 交易流水 (/finance/transactions)
+  │     └── 查看详情
+  │
+  └──► 利润对账 (/finance/reconciliation)
+        └── 查看对账结果
+```
+
+### 4.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 财务概览 | `/finance` | 展示财务关键指标 | finance:read |
+| 交易流水 | `/finance/transactions` | 查看所有交易记录 | finance:read |
+| 利润对账 | `/finance/reconciliation` | 执行利润对账 | finance:reconcile |
+
+### 4.3 数据流
+
+```
+财务概览页
+  │
+  ├── 加载统计数据: GET /api/v1/finance/stats
+  │
+  ├── 图表数据
+  │     ├── 营收趋势图
+  │     ├── 利润分布图
+  │     └── 平台占比图
+  │
+  └── 快捷操作
+        ├── 查看交易流水
+        └── 执行利润对账
+```
+
+---
+
+## 5. 库存管理模块
+
+### 5.1 页面流转图
+
+```
+库存概览 (/inventory)
+  │
+  ├──► 仓库管理 (/inventory/warehouses)
+  │     ├── 创建仓库
+  │     └── 编辑仓库
+  │
+  └──► 库存预测 (/inventory/forecast)
+        └── 查看预测结果
+```
+
+### 5.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 库存概览 | `/inventory` | 展示库存总览 | inventory:read |
+| 仓库管理 | `/inventory/warehouses` | 管理仓库信息 | inventory:manage |
+| 库存预测 | `/inventory/forecast` | 查看库存预测 | inventory:read |
+
+---
+
+## 6. 营销广告模块
+
+### 6.1 页面流转图
+
+```
+营销概览 (/marketing)
+  │
+  ├──► 广告管理 (/marketing/ads)
+  │     ├── 创建广告
+  │     └── 广告报表
+  │
+  └──► 竞品监控 (/marketing/competitors)
+        └── 竞品详情
+```
+
+### 6.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 营销概览 | `/marketing` | 展示营销关键指标 | marketing:read |
+| 广告管理 | `/marketing/ads` | 管理广告投放 | marketing:manage |
+| 竞品监控 | `/marketing/competitors` | 监控竞品动态 | marketing:read |
+
+---
+
+## 7. 供应商管理模块
+
+### 7.1 页面流转图
+
+```
+供应商列表 (/suppliers)
+  │
+  ├──► 创建供应商
+  │
+  └──► 供应商详情 (/suppliers/:id)
+        ├── 编辑信息
+        └── 查看交易记录
+```
+
+### 7.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 供应商列表 | `/suppliers` | 展示所有供应商 | supplier:read |
+| 供应商详情 | `/suppliers/:id` | 展示供应商详细信息 | supplier:read |
+
+---
+
+## 8. 报表分析模块
+
+### 8.1 页面流转图
+
+```
+报表中心 (/reports)
+  │
+  ├──► 利润报表 (/reports/profit)
+  │
+  └──► 绩效报表 (/reports/performance)
+```
+
+### 8.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 报表中心 | `/reports` | 展示所有报表入口 | report:read |
+| 利润报表 | `/reports/profit` | 查看利润分析报表 | report:read |
+| 绩效报表 | `/reports/performance` | 查看绩效分析报表 | report:read |
+
+---
+
+## 9. 系统设置模块
+
+### 9.1 页面流转图
+
+```
+设置首页 (/settings)
+  │
+  ├──► 个人设置 (/settings/profile)
+  │
+  ├──► 租户设置 (/settings/tenant)
+  │
+  └──► 用户管理 (/settings/users)
+        ├── 创建用户
+        └── 编辑用户
+```
+
+### 9.2 页面说明
+
+| 页面 | 路径 | 功能 | 权限 |
+|------|------|------|------|
+| 设置首页 | `/settings` | 设置导航 | - |
+| 个人设置 | `/settings/profile` | 修改个人信息 | - |
+| 租户设置 | `/settings/tenant` | 管理租户配置 | tenant:manage |
+| 用户管理 | `/settings/users` | 管理系统用户 | user:manage |
+
+---
+
+## 10. 全局交互
+
+### 10.1 导航菜单
+
+```
+侧边栏菜单
+  │
+  ├── 仪表盘
+  ├── 商品管理
+  ├── 订单管理
+  ├── 商户管理
+  ├── 售后服务
+  ├── 物流管理
+  ├── 合规管理
+  ├── 黑名单管理
+  ├── B2B贸易
+  ├── 广告管理
+  ├── A/B测试
+  ├── 退货管理
+  └── 用户资产管理
+```
+
+### 10.2 面包屑导航
+
+```
+首页 / 商品管理 / 商品详情
+首页 / 订单管理 / 订单列表
+首页 / 商户管理 / 商户管理
+首页 / 售后服务 / 退货申请
+首页 / 物流管理 / 物流追踪
+首页 / 合规管理 / 合规检查
+首页 / 黑名单管理 / 风险监控
+首页 / B2B贸易 / 企业报价
+首页 / 广告管理 / ROI分析
+首页 / A/B测试 / 测试结果分析
+首页 / 退货管理 / 退货监控
+首页 / 用户资产管理 / 会员等级管理
+```
+
+### 10.3 快捷操作
+
+| 操作 | 触发方式 | 说明 |
+|------|----------|------|
+| 全局搜索 | 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 引导机制
+- **新用户引导**：首次使用时的功能引导
+- **功能提示**：重要功能的使用提示
+- **上下文帮助**：在适当位置提供帮助信息
+
+---
+
+## 11. 相关文档
+
+- [Frontend Design](./Frontend_Design.md)
+- [UI Components](./UI_Components.md)
+- [Business ClosedLoops](../00_Business/Business_ClosedLoops.md)
+
+---
+
+*本文档基于业务闭环设计，最后更新: 2026-03-18*