refactor: 重构项目结构并优化代码

- 删除无用的文件和错误日志
- 创建统一的 imports 模块集中管理依赖
- 重构组件使用新的 imports 方式
- 修复文档路径大小写问题
- 优化类型定义和接口导出
- 更新依赖版本
- 改进错误处理和API配置
- 统一组件导出方式

dashboard/src/pages/Settings/InstancePurchase.tsx

@@ -0,0 +1,543 @@
+import {
+  useState,
+  useEffect,
+  Card,
+  Row,
+  Col,
+  Button,
+  Tag,
+  Typography,
+  Space,
+  Radio,
+  Select,
+  Spin,
+  message,
+  Steps,
+  Divider,
+  Alert,
+  ConfigProvider,
+  theme,
+  SaveOutlined,
+  CopyOutlined,
+  DatabaseOutlined,
+  DownloadOutlined,
+  DollarOutlined,
+  CheckCircleOutlined,
+  CreditCardOutlined,
+  AimOutlined,
+  PieChartOutlined,
+  Title,
+  Text,
+  Paragraph,
+  FC,
+} from '@/imports';
+import { instanceDataSource, InstanceType, InstanceConfig } from '@/services/instanceDataSource';
+import { useUser } from '@/contexts/UserContext';
+
+const InstancePurchase: FC = () => {
+  const { currentUser } = useUser();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [instanceTypes, setInstanceTypes] = useState<InstanceType[]>([]);
+  const [selectedInstanceType, setSelectedInstanceType] = useState<string>('medium');
+  const [instanceConfig, setInstanceConfig] = useState<InstanceConfig>({
+    cpu: 4,
+    memory: 8,
+    storage: 200,
+    bandwidth: 50
+  });
+  const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
+  const [price, setPrice] = useState({ monthly: 0, yearly: 0, discount: 0 });
+  const [paymentMethod, setPaymentMethod] = useState<string>('creditCard');
+  const [loading, setLoading] = useState(false);
+  const [configOptions, setConfigOptions] = useState({
+    cpuOptions: [] as number[],
+    memoryOptions: [] as number[],
+    storageOptions: [] as number[],
+    bandwidthOptions: [] as number[]
+  });
+
+  // 检查用户是否为 ADMIN
+  const isAdmin = currentUser?.role === 'ADMIN';
+
+  useEffect(() => {
+    loadInstanceTypes();
+    loadConfigOptions();
+  }, []);
+
+  useEffect(() => {
+    if (selectedInstanceType) {
+      calculatePrice();
+    }
+  }, [selectedInstanceType, instanceConfig, billingCycle]);
+
+  const loadInstanceTypes = async () => {
+    setLoading(true);
+    try {
+      const types = await instanceDataSource.getInstanceTypes();
+      setInstanceTypes(types);
+      if (types.length > 0) {
+        const defaultType = types.find(t => t.recommended) || types[0];
+        setSelectedInstanceType(defaultType.id);
+        setInstanceConfig(defaultType.defaultConfig);
+      }
+    } catch (error) {
+      message.error('Failed to load instance types');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadConfigOptions = async () => {
+    try {
+      const options = await instanceDataSource.getInstanceConfigOptions();
+      setConfigOptions(options);
+    } catch (error) {
+      message.error('Failed to load config options');
+    }
+  };
+
+  const calculatePrice = async () => {
+    try {
+      const priceData = await instanceDataSource.calculatePrice(
+        selectedInstanceType,
+        instanceConfig,
+        billingCycle
+      );
+      setPrice(priceData);
+    } catch (error) {
+      message.error('Failed to calculate price');
+    }
+  };
+
+  const handleInstanceTypeChange = (typeId: string) => {
+    setSelectedInstanceType(typeId);
+    const instanceType = instanceTypes.find(t => t.id === typeId);
+    if (instanceType) {
+      setInstanceConfig(instanceType.defaultConfig);
+    }
+  };
+
+  const handleConfigChange = (key: keyof InstanceConfig, value: number) => {
+    setInstanceConfig(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const handleNext = () => {
+    if (currentStep < 3) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const order = await instanceDataSource.createOrder(
+        selectedInstanceType,
+        instanceConfig,
+        billingCycle,
+        paymentMethod
+      );
+      message.success('Order created successfully!');
+      setCurrentStep(4);
+    } catch (error) {
+      message.error('Failed to create order');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const renderInstanceTypeSelection = () => (
+    <Card title={isAdmin ? "选择实例类型" : "选择套餐"}>
+      <Row gutter={[16, 16]}>
+        {instanceTypes.map(type => (
+          <Col xs={24} sm={12} lg={8} key={type.id}>
+            <Card
+              hoverable
+              style={{
+                borderColor: selectedInstanceType === type.id ? '#1890ff' : undefined,
+                borderWidth: selectedInstanceType === type.id ? 2 : 1,
+                borderRadius: '12px',
+                cursor: 'pointer'
+              }}
+              bodyStyle={{ padding: '24px' }}
+              onClick={() => handleInstanceTypeChange(type.id)}
+            >
+              <div style={{ textAlign: 'center' }}>
+                <div style={{ fontSize: '48px', marginBottom: '16px' }}>
+                  {type.icon}
+                </div>
+                <Title level={4} style={{ margin: 0, marginBottom: '8px' }}>
+                  {type.name}
+                </Title>
+                <Tag color="blue" style={{ marginBottom: '16px' }}>{type.cupSize}</Tag>
+                {type.recommended && (
+                  <Tag color="gold" style={{ marginBottom: '16px' }}>推荐</Tag>
+                )}
+                <Paragraph type="secondary" style={{ marginBottom: '16px' }}>
+                  {type.description}
+                </Paragraph>
+                {isAdmin && (
+                  <>
+                    <Divider style={{ margin: '16px 0' }} />
+                    <Space direction="vertical" style={{ width: '100%' }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Text>CPU</Text>
+                        <Text strong>{type.defaultConfig.cpu} 核</Text>
+                      </div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Text>内存</Text>
+                        <Text strong>{type.defaultConfig.memory} GB</Text>
+                      </div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Text>存储</Text>
+                        <Text strong>{type.defaultConfig.storage} GB</Text>
+                      </div>
+                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Text>带宽</Text>
+                        <Text strong>{type.defaultConfig.bandwidth} Mbps</Text>
+                      </div>
+                    </Space>
+                  </>
+                )}
+              </div>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    </Card>
+  );
+
+  const renderInstanceConfig = () => (
+    <Card title="配置实例">
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} md={6}>
+          <Card size="small" title={<Space><CpuOutlined /> CPU核心数</Space>}>
+            <Select
+              style={{ width: '100%' }}
+              value={instanceConfig.cpu}
+              onChange={(value) => handleConfigChange('cpu', value)}
+              options={configOptions.cpuOptions.map(option => ({
+                value: option,
+                label: `${option} 核`
+              }))}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card size="small" title={<Space><ServerOutlined /> 内存</Space>}>
+            <Select
+              style={{ width: '100%' }}
+              value={instanceConfig.memory}
+              onChange={(value) => handleConfigChange('memory', value)}
+              options={configOptions.memoryOptions.map(option => ({
+                value: option,
+                label: `${option} GB`
+              }))}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card size="small" title={<Space><DatabaseOutlined /> 存储</Space>}>
+            <Select
+              style={{ width: '100%' }}
+              value={instanceConfig.storage}
+              onChange={(value) => handleConfigChange('storage', value)}
+              options={configOptions.storageOptions.map(option => ({
+                value: option,
+                label: `${option} GB`
+              }))}
+            />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={6}>
+          <Card size="small" title={<Space><DownloadOutlined /> 带宽</Space>}>
+            <Select
+              style={{ width: '100%' }}
+              value={instanceConfig.bandwidth}
+              onChange={(value) => handleConfigChange('bandwidth', value)}
+              options={configOptions.bandwidthOptions.map(option => ({
+                value: option,
+                label: `${option} Mbps`
+              }))}
+            />
+          </Card>
+        </Col>
+      </Row>
+      <Card style={{ marginTop: '16px' }} title="计费周期">
+        <Radio.Group
+          value={billingCycle}
+          onChange={(e) => setBillingCycle(e.target.value)}
+          buttonStyle="solid"
+          size="large"
+        >
+          <Radio.Button value="monthly">
+            月付
+            <Tag style={{ marginLeft: '8px' }}>¥{price.monthly}</Tag>
+          </Radio.Button>
+          <Radio.Button value="yearly">
+            年付
+            <Tag color="red" style={{ marginLeft: '8px' }}>¥{price.yearly} (省{price.discount}%)</Tag>
+          </Radio.Button>
+        </Radio.Group>
+        <Alert
+          message="价格说明"
+          description={`根据您选择的配置，${billingCycle === 'monthly' ? '月付' : '年付'}价格为 ¥${billingCycle === 'monthly' ? price.monthly : price.yearly}`}
+          type="info"
+          showIcon
+          style={{ marginTop: '16px' }}
+        />
+      </Card>
+    </Card>
+  );
+
+  const renderPaymentMethod = () => (
+    <Card title="选择支付方式">
+      <Radio.Group
+        value={paymentMethod}
+        onChange={(e) => setPaymentMethod(e.target.value)}
+        style={{ width: '100%' }}
+      >
+        <Card
+          hoverable
+          style={{
+            marginBottom: '16px',
+            borderColor: paymentMethod === 'creditCard' ? '#1890ff' : undefined,
+            borderWidth: paymentMethod === 'creditCard' ? 2 : 1,
+            cursor: 'pointer'
+          }}
+          onClick={() => setPaymentMethod('creditCard')}
+        >
+          <Row align="middle">
+            <Col span={4}>
+              <CreditCardOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
+            </Col>
+            <Col span={16}>
+              <Text strong>信用卡</Text>
+              <Paragraph type="secondary">支持Visa、Mastercard、American Express等</Paragraph>
+            </Col>
+            <Col span={4}>
+              <Radio value="creditCard" />
+            </Col>
+          </Row>
+        </Card>
+        <Card
+          hoverable
+          style={{
+            marginBottom: '16px',
+            borderColor: paymentMethod === 'alipay' ? '#1890ff' : undefined,
+            borderWidth: paymentMethod === 'alipay' ? 2 : 1,
+            cursor: 'pointer'
+          }}
+          onClick={() => setPaymentMethod('alipay')}
+        >
+          <Row align="middle">
+            <Col span={4}>
+              <AliPayOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
+            </Col>
+            <Col span={16}>
+              <Text strong>支付宝</Text>
+              <Paragraph type="secondary">使用支付宝扫码支付</Paragraph>
+            </Col>
+            <Col span={4}>
+              <Radio value="alipay" />
+            </Col>
+          </Row>
+        </Card>
+        <Card
+          hoverable
+          style={{
+            borderColor: paymentMethod === 'wechat' ? '#1890ff' : undefined,
+            borderWidth: paymentMethod === 'wechat' ? 2 : 1,
+            cursor: 'pointer'
+          }}
+          onClick={() => setPaymentMethod('wechat')}
+        >
+          <Row align="middle">
+            <Col span={4}>
+              <WechatOutlined style={{ fontSize: '24px', color: '#1890ff' }} />
+            </Col>
+            <Col span={16}>
+              <Text strong>微信支付</Text>
+              <Paragraph type="secondary">使用微信扫码支付</Paragraph>
+            </Col>
+            <Col span={4}>
+              <Radio value="wechat" />
+            </Col>
+          </Row>
+        </Card>
+      </Radio.Group>
+    </Card>
+  );
+
+  const renderOrderSummary = () => {
+    const instanceType = instanceTypes.find(t => t.id === selectedInstanceType);
+    return (
+      <Card title="订单摘要">
+        <Space direction="vertical" style={{ width: '100%' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>实例类型</Text>
+            <Text strong>{instanceType?.name}</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>CPU</Text>
+            <Text strong>{instanceConfig.cpu} 核</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>内存</Text>
+            <Text strong>{instanceConfig.memory} GB</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>存储</Text>
+            <Text strong>{instanceConfig.storage} GB</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>带宽</Text>
+            <Text strong>{instanceConfig.bandwidth} Mbps</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>计费周期</Text>
+            <Text strong>{billingCycle === 'monthly' ? '月付' : '年付'}</Text>
+          </div>
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
+            <Text>支付方式</Text>
+            <Text strong>
+              {paymentMethod === 'creditCard' ? '信用卡' : 
+               paymentMethod === 'alipay' ? '支付宝' : '微信支付'}
+            </Text>
+          </div>
+          <Divider />
+          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: '18px' }}>
+            <Text strong>总计</Text>
+            <Text strong style={{ color: '#1890ff' }}>
+              ¥{billingCycle === 'monthly' ? price.monthly : price.yearly}
+            </Text>
+          </div>
+        </Space>
+      </Card>
+    );
+  };
+
+  const renderSuccess = () => (
+    <Card title="购买成功">
+      <div style={{ textAlign: 'center', padding: '48px 0' }}>
+        <CheckCircleOutlined style={{ fontSize: '72px', color: '#52c41a', marginBottom: '24px' }} />
+        <Title level={3} style={{ marginBottom: '16px' }}>订单创建成功！</Title>
+        <Paragraph style={{ marginBottom: '24px' }}>
+          您的实例将在支付完成后立即激活
+        </Paragraph>
+        <Button type="primary" size="large">
+          查看订单详情
+        </Button>
+      </div>
+    </Card>
+  );
+
+  // 根据用户角色生成步骤
+  const steps = isAdmin ? [
+    { title: '选择实例类型' },
+    { title: '配置实例' },
+    { title: '选择支付方式' },
+    { title: '确认订单' },
+    { title: '购买成功' }
+  ] : [
+    { title: '选择套餐' },
+    { title: '选择支付方式' },
+    { title: '确认订单' },
+    { title: '购买成功' }
+  ];
+
+  // 处理下一步逻辑
+  const handleNext = () => {
+    if (isAdmin) {
+      if (currentStep < 3) {
+        setCurrentStep(currentStep + 1);
+      }
+    } else {
+      if (currentStep < 2) {
+        setCurrentStep(currentStep + 1);
+      }
+    }
+  };
+
+  // 处理上一步逻辑
+  const handlePrevious = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  return (
+    <div className="instance-purchase" style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
+      <ConfigProvider
+        theme={{
+          token: {
+            colorPrimary: '#1890ff',
+            borderRadius: 8,
+          },
+        }}
+      >
+        <div className="page-header" style={{ marginBottom: '24px' }}>
+          <Title level={2} style={{ margin: 0 }}>
+            <ServerOutlined style={{ marginRight: '8px' }} />
+            实例购买
+          </Title>
+          <Paragraph type="secondary">
+            {isAdmin ? '选择适合您业务需求的实例配置' : '选择适合您业务需求的套餐'}
+          </Paragraph>
+        </div>
+
+        <Steps
+          current={currentStep}
+          items={steps}
+          style={{ marginBottom: '32px' }}
+        />
+
+        <Spin spinning={loading}>
+          {currentStep === 0 && renderInstanceTypeSelection()}
+          {isAdmin && currentStep === 1 && renderInstanceConfig()}
+          {currentStep === (isAdmin ? 2 : 1) && renderPaymentMethod()}
+          {currentStep === (isAdmin ? 3 : 2) && renderOrderSummary()}
+          {currentStep === (isAdmin ? 4 : 3) && renderSuccess()}
+        </Spin>
+
+        <div style={{ marginTop: '32px', textAlign: 'center' }}>
+          {currentStep > 0 && currentStep < (isAdmin ? 4 : 3) && (
+            <Button
+              style={{ marginRight: '16px' }}
+              onClick={handlePrevious}
+            >
+              上一步
+            </Button>
+          )}
+          {currentStep < (isAdmin ? 3 : 2) && (
+            <Button
+              type="primary"
+              onClick={handleNext}
+            >
+              下一步
+            </Button>
+          )}
+          {currentStep === (isAdmin ? 3 : 2) && (
+            <Button
+              type="primary"
+              onClick={handleSubmit}
+              loading={loading}
+            >
+              确认购买
+            </Button>
+          )}
+        </div>
+      </ConfigProvider>
+    </div>
+  );
+};
+
+export default InstancePurchase;