feat: 添加MSW模拟服务和数据源集成
refactor: 重构页面组件移除冗余Layout组件 feat: 实现WebSocket和事件总线系统 feat: 添加队列和调度系统 docs: 更新架构文档和服务映射 style: 清理重复接口定义使用数据源 chore: 更新依赖项配置 feat: 添加运行时系统和领域引导 ci: 配置ESLint边界检查规则 build: 添加Redis和WebSocket依赖 test: 添加MSW浏览器环境入口 perf: 优化数据获取逻辑使用统一数据源 fix: 修复类型定义和状态管理问题
This commit is contained in:
@@ -31,6 +31,7 @@ import {
|
||||
ExclamationCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { orderDataSource, OrderDetailData } from '@/services/orderDataSource';
|
||||
|
||||
const { Option } = Select;
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
UnorderedListOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { orderDataSource, OrderDetailData } from '@/services/orderDataSource';
|
||||
|
||||
const { Option } = Select;
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
@@ -33,60 +33,12 @@ import {
|
||||
EditOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { orderDataSource, OrderDetailData } from '@/services/orderDataSource';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { TextArea } = Input;
|
||||
|
||||
interface OrderItem {
|
||||
id: string;
|
||||
sku: string;
|
||||
productName: string;
|
||||
quantity: number;
|
||||
unitPrice: number;
|
||||
totalPrice: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface ShippingInfo {
|
||||
carrier: string;
|
||||
trackingNumber: string;
|
||||
estimatedDelivery: string;
|
||||
shippedAt?: string;
|
||||
}
|
||||
|
||||
interface OrderDetailData {
|
||||
orderId: string;
|
||||
platform: string;
|
||||
status: string;
|
||||
paymentStatus: string;
|
||||
customer: {
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
};
|
||||
shippingAddress: {
|
||||
name: string;
|
||||
address: string;
|
||||
city: string;
|
||||
state: string;
|
||||
country: string;
|
||||
postalCode: string;
|
||||
};
|
||||
items: OrderItem[];
|
||||
subtotal: number;
|
||||
shippingFee: number;
|
||||
tax: number;
|
||||
totalAmount: number;
|
||||
currency: string;
|
||||
shippingInfo?: ShippingInfo;
|
||||
timeline: Array<{
|
||||
status: string;
|
||||
time: string;
|
||||
description: string;
|
||||
}>;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
// 类型从DataSource导入
|
||||
|
||||
const ORDER_STATUS_MAP: Record<string, { color: string; text: string }> = {
|
||||
PULLED: { color: 'default', text: 'Pulled' },
|
||||
@@ -129,52 +81,10 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({ orderId, onBack }) =>
|
||||
const fetchOrderDetail = async (id: string) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const mockData: OrderDetailData = {
|
||||
orderId: id || 'ORD-2026-001',
|
||||
platform: 'AMAZON',
|
||||
status: 'SHIPPED',
|
||||
paymentStatus: 'PAID',
|
||||
customer: {
|
||||
name: 'John Smith',
|
||||
email: 'john.smith@email.com',
|
||||
phone: '+1 (555) 123-4567',
|
||||
},
|
||||
shippingAddress: {
|
||||
name: 'John Smith',
|
||||
address: '123 Main Street, Apt 4B',
|
||||
city: 'New York',
|
||||
state: 'NY',
|
||||
country: 'United States',
|
||||
postalCode: '10001',
|
||||
},
|
||||
items: [
|
||||
{ id: '1', sku: 'SKU-001', productName: 'Wireless Bluetooth Headphones', quantity: 2, unitPrice: 49.99, totalPrice: 99.98, status: 'SHIPPED' },
|
||||
{ id: '2', sku: 'SKU-002', productName: 'USB-C Charging Cable', quantity: 3, unitPrice: 9.99, totalPrice: 29.97, status: 'SHIPPED' },
|
||||
{ id: '3', sku: 'SKU-003', productName: 'Phone Case', quantity: 1, unitPrice: 19.99, totalPrice: 19.99, status: 'SHIPPED' },
|
||||
],
|
||||
subtotal: 149.94,
|
||||
shippingFee: 5.99,
|
||||
tax: 12.06,
|
||||
totalAmount: 167.99,
|
||||
currency: 'USD',
|
||||
shippingInfo: {
|
||||
carrier: 'FedEx',
|
||||
trackingNumber: 'FX123456789US',
|
||||
estimatedDelivery: '2026-03-22',
|
||||
shippedAt: '2026-03-18 14:00:00',
|
||||
},
|
||||
timeline: [
|
||||
{ status: 'PULLED', time: '2026-03-18 10:30:00', description: 'Order pulled from Amazon' },
|
||||
{ status: 'PENDING_REVIEW', time: '2026-03-18 10:35:00', description: 'Order submitted for review' },
|
||||
{ status: 'CONFIRMED', time: '2026-03-18 11:00:00', description: 'Order confirmed by operator' },
|
||||
{ status: 'ALLOCATED', time: '2026-03-18 12:00:00', description: 'Stock allocated from warehouse' },
|
||||
{ status: 'READY_TO_SHIP', time: '2026-03-18 13:00:00', description: 'Order packed and ready' },
|
||||
{ status: 'SHIPPED', time: '2026-03-18 14:00:00', description: 'Shipped via FedEx' },
|
||||
],
|
||||
createdAt: '2026-03-18 10:30:00',
|
||||
updatedAt: '2026-03-18 14:00:00',
|
||||
};
|
||||
setOrderData(mockData);
|
||||
const data = await orderDataSource.fetchOrderDetail(id);
|
||||
if (data) {
|
||||
setOrderData(data);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('Failed to load order details');
|
||||
} finally {
|
||||
@@ -183,12 +93,12 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({ orderId, onBack }) =>
|
||||
};
|
||||
|
||||
const handleStatusUpdate = async (newStatus: string) => {
|
||||
if (!orderId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
console.log('Updating status to:', newStatus);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
await orderDataSource.updateStatus(orderId, newStatus);
|
||||
message.success('Status updated successfully');
|
||||
if (orderId) fetchOrderDetail(orderId);
|
||||
fetchOrderDetail(orderId);
|
||||
} catch (error) {
|
||||
message.error('Failed to update status');
|
||||
} finally {
|
||||
@@ -204,12 +114,13 @@ export const OrderDetail: React.FC<OrderDetailProps> = ({ orderId, onBack }) =>
|
||||
};
|
||||
|
||||
const handleSaveAddress = async () => {
|
||||
if (!orderId) return;
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
console.log('Saving address:', values);
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
await orderDataSource.updateAddress(orderId, values);
|
||||
message.success('Address updated successfully');
|
||||
setEditModalVisible(false);
|
||||
fetchOrderDetail(orderId);
|
||||
} catch (error) {
|
||||
message.error('Failed to save address');
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Card, Layout, Typography, Row, Col, Button } from 'antd';
|
||||
import { Card, Typography, Row, Col, Button } from 'antd';
|
||||
import { FileTextOutlined, AlertOutlined, BarChartOutlined } from '@ant-design/icons';
|
||||
import { Link } from 'umi';
|
||||
|
||||
const { Content } = Layout;
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const OrderManagement: React.FC = () => {
|
||||
return (
|
||||
<Content style={{ padding: 24, margin: 0, minHeight: 280, background: '#fff' }}>
|
||||
<div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
|
||||
<Title level={4}>订单管理</Title>
|
||||
<div>
|
||||
@@ -23,7 +22,7 @@ const OrderManagement: React.FC = () => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Card title="订单概览">
|
||||
@@ -31,8 +30,8 @@ const OrderManagement: React.FC = () => {
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OrderManagement;
|
||||
export default OrderManagement;
|
||||
|
||||
Reference in New Issue
Block a user