430 lines
13 KiB
TypeScript
430 lines
13 KiB
TypeScript
|
import React, { useState } from 'react';
|
|||
|
|
import { Card, Row, Col, Switch, Tag, Typography, Space, Button, Modal, Progress, Divider, Alert, Tabs, Table, message } from 'antd';
|
|||
|
|
import {
|
|||
|
|
CrownOutlined,
|
|||
|
|
RobotOutlined,
|
|||
|
|
ShopOutlined,
|
|||
|
|
GlobalOutlined,
|
|||
|
|
LineChartOutlined,
|
|||
|
|
ApiOutlined,
|
|||
|
|
CheckCircleOutlined,
|
|||
|
|
CloseCircleOutlined,
|
|||
|
|
ThunderboltOutlined,
|
|||
|
|
StarOutlined,
|
|||
|
|
} from '@ant-design/icons';
|
|||
|
|
import { useUser, FEATURES, ROLE_CONFIG } from '@/contexts/UserContext';
|
|||
|
|
|
|||
|
|
const { Title, Text, Paragraph } = Typography;
|
|||
|
|
|
|||
|
|
interface FeatureConfig {
|
|||
|
|
key: string;
|
|||
|
|
name: string;
|
|||
|
|
description: string;
|
|||
|
|
icon: React.ReactNode;
|
|||
|
|
requiredPlan: string[];
|
|||
|
|
benefits: string[];
|
|||
|
|
limitations?: string[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const FEATURE_CONFIGS: FeatureConfig[] = [
|
|||
|
|
{
|
|||
|
|
key: FEATURES.AI_OPERATIONS,
|
|||
|
|
name: 'AI运营中心',
|
|||
|
|
description: '智能运营助手，自动化执行日常运营任务',
|
|||
|
|
icon: <RobotOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['basic', 'pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'自动选品推荐',
|
|||
|
|
'智能定价策略',
|
|||
|
|
'自动上下架',
|
|||
|
|
'AI决策日志追踪',
|
|||
|
|
'策略市场访问',
|
|||
|
|
],
|
|||
|
|
limitations: [
|
|||
|
|
'免费版: 每日仅3次AI调用',
|
|||
|
|
'基础版: 每日100次AI调用',
|
|||
|
|
'专业版: 无限AI调用',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.AUTO_PRICING,
|
|||
|
|
name: '自动定价',
|
|||
|
|
description: '基于市场数据和竞争分析的智能定价系统',
|
|||
|
|
icon: <ThunderboltOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'实时竞品价格监控',
|
|||
|
|
'动态定价策略',
|
|||
|
|
'利润率自动优化',
|
|||
|
|
'价格预警通知',
|
|||
|
|
],
|
|||
|
|
limitations: [
|
|||
|
|
'基础版: 仅查看定价建议',
|
|||
|
|
'专业版: 自动执行定价',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.MULTI_SHOP,
|
|||
|
|
name: '多店铺管理',
|
|||
|
|
description: '统一管理多个电商平台的店铺',
|
|||
|
|
icon: <ShopOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['basic', 'pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'跨平台商品同步',
|
|||
|
|
'统一库存管理',
|
|||
|
|
'多店铺数据报表',
|
|||
|
|
'批量操作支持',
|
|||
|
|
],
|
|||
|
|
limitations: [
|
|||
|
|
'免费版: 仅支持1个店铺',
|
|||
|
|
'基础版: 最多3个店铺',
|
|||
|
|
'专业版: 最多10个店铺',
|
|||
|
|
'企业版: 无限店铺',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.B2B_TRADE,
|
|||
|
|
name: 'B2B贸易',
|
|||
|
|
description: '企业级批发贸易管理功能',
|
|||
|
|
icon: <ShopOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['basic', 'pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'供应商管理',
|
|||
|
|
'批量订单处理',
|
|||
|
|
'B2B专属定价',
|
|||
|
|
'合同管理',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.INDEPENDENT_SITE,
|
|||
|
|
name: '独立站',
|
|||
|
|
description: '创建和管理独立电商网站',
|
|||
|
|
icon: <GlobalOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'自定义品牌站点',
|
|||
|
|
'独立域名绑定',
|
|||
|
|
'SEO优化工具',
|
|||
|
|
'独立支付集成',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.ADVANCED_ANALYTICS,
|
|||
|
|
name: '高级数据分析',
|
|||
|
|
description: '深度数据分析和可视化报表',
|
|||
|
|
icon: <LineChartOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['pro', 'enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'自定义报表',
|
|||
|
|
'数据导出',
|
|||
|
|
'趋势预测',
|
|||
|
|
'竞品分析报告',
|
|||
|
|
],
|
|||
|
|
limitations: [
|
|||
|
|
'基础版: 仅基础报表',
|
|||
|
|
'专业版: 完整分析功能',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: FEATURES.API_ACCESS,
|
|||
|
|
name: 'API访问',
|
|||
|
|
description: '开放API接口，支持系统集成',
|
|||
|
|
icon: <ApiOutlined style={{ fontSize: 24 }} />,
|
|||
|
|
requiredPlan: ['enterprise'],
|
|||
|
|
benefits: [
|
|||
|
|
'RESTful API',
|
|||
|
|
'Webhook支持',
|
|||
|
|
'SDK下载',
|
|||
|
|
'技术文档',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const PLAN_DETAILS = {
|
|||
|
|
free: {
|
|||
|
|
name: '免费版',
|
|||
|
|
price: 0,
|
|||
|
|
color: 'default',
|
|||
|
|
features: ['基础商品管理', '订单管理', '基础报表'],
|
|||
|
|
limitations: ['1个店铺', '每日3次AI调用', '无API访问'],
|
|||
|
|
},
|
|||
|
|
basic: {
|
|||
|
|
name: '基础版',
|
|||
|
|
price: 99,
|
|||
|
|
color: 'blue',
|
|||
|
|
features: ['多店铺管理(3个)', 'AI运营(100次/日)', 'B2B贸易', '基础定价建议'],
|
|||
|
|
limitations: ['无独立站', '无API访问'],
|
|||
|
|
},
|
|||
|
|
pro: {
|
|||
|
|
name: '专业版',
|
|||
|
|
price: 299,
|
|||
|
|
color: 'gold',
|
|||
|
|
features: ['多店铺管理(10个)', '无限AI调用', '自动定价', '独立站', '高级分析'],
|
|||
|
|
limitations: ['无API访问'],
|
|||
|
|
},
|
|||
|
|
enterprise: {
|
|||
|
|
name: '企业版',
|
|||
|
|
price: 999,
|
|||
|
|
color: 'purple',
|
|||
|
|
features: ['无限店铺', '全部功能', 'API访问', '专属客服', '定制开发'],
|
|||
|
|
limitations: [],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const SubscriptionManage: React.FC = () => {
|
|||
|
|
const { currentUser, hasFeature, isPaidUser, getPlanLabel } = useUser();
|
|||
|
|
const [previewFeature, setPreviewFeature] = useState<FeatureConfig | null>(null);
|
|||
|
|
const [simulatedPlan, setSimulatedPlan] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
const currentPlan = currentUser.subscription?.plan || 'free';
|
|||
|
|
|
|||
|
|
const handleFeaturePreview = (feature: FeatureConfig) => {
|
|||
|
|
setPreviewFeature(feature);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSimulatePlan = (plan: string) => {
|
|||
|
|
setSimulatedPlan(plan);
|
|||
|
|
message.info(`已切换到${PLAN_DETAILS[plan as keyof typeof PLAN_DETAILS].name}预览模式`);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isFeatureAvailable = (featureKey: string) => {
|
|||
|
|
if (simulatedPlan) {
|
|||
|
|
const feature = FEATURE_CONFIGS.find(f => f.key === featureKey);
|
|||
|
|
return feature?.requiredPlan.includes(simulatedPlan) ?? false;
|
|||
|
|
}
|
|||
|
|
return hasFeature(featureKey);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const columns = [
|
|||
|
|
{
|
|||
|
|
title: '功能',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
key: 'name',
|
|||
|
|
render: (name: string, record: FeatureConfig) => (
|
|||
|
|
<Space>
|
|||
|
|
{record.icon}
|
|||
|
|
<span>{name}</span>
|
|||
|
|
</Space>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '免费版',
|
|||
|
|
key: 'free',
|
|||
|
|
render: (_: any, record: FeatureConfig) =>
|
|||
|
|
record.requiredPlan.includes('free') ?
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a' }} /> :
|
|||
|
|
<CloseCircleOutlined style={{ color: '#d9d9d9' }} />,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '基础版',
|
|||
|
|
key: 'basic',
|
|||
|
|
render: (_: any, record: FeatureConfig) =>
|
|||
|
|
record.requiredPlan.includes('basic') ?
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a' }} /> :
|
|||
|
|
<CloseCircleOutlined style={{ color: '#d9d9d9' }} />,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '专业版',
|
|||
|
|
key: 'pro',
|
|||
|
|
render: (_: any, record: FeatureConfig) =>
|
|||
|
|
record.requiredPlan.includes('pro') ?
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a' }} /> :
|
|||
|
|
<CloseCircleOutlined style={{ color: '#d9d9d9' }} />,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '企业版',
|
|||
|
|
key: 'enterprise',
|
|||
|
|
render: (_: any, record: FeatureConfig) =>
|
|||
|
|
record.requiredPlan.includes('enterprise') ?
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a' }} /> :
|
|||
|
|
<CloseCircleOutlined style={{ color: '#d9d9d9' }} />,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '当前状态',
|
|||
|
|
key: 'status',
|
|||
|
|
render: (_: any, record: FeatureConfig) => (
|
|||
|
|
<Tag color={isFeatureAvailable(record.key) ? 'green' : 'default'}>
|
|||
|
|
{isFeatureAvailable(record.key) ? '已开通' : '未开通'}
|
|||
|
|
</Tag>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
key: 'action',
|
|||
|
|
render: (_: any, record: FeatureConfig) => (
|
|||
|
|
<Button type="link" onClick={() => handleFeaturePreview(record)}>
|
|||
|
|
查看详情
|
|||
|
|
</Button>
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="subscription-manage">
|
|||
|
|
<div className="page-header" style={{ marginBottom: 24 }}>
|
|||
|
|
<Title level={2}>
|
|||
|
|
<CrownOutlined style={{ marginRight: 8 }} />
|
|||
|
|
订阅管理中心
|
|||
|
|
</Title>
|
|||
|
|
<Paragraph type="secondary">
|
|||
|
|
管理您的订阅计划和付费功能，预览不同套餐的功能差异
|
|||
|
|
</Paragraph>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Alert
|
|||
|
|
message="临时预览模式"
|
|||
|
|
description="点击下方套餐卡片可以预览不同套餐的功能权限，实际功能以订阅为准"
|
|||
|
|
type="info"
|
|||
|
|
showIcon
|
|||
|
|
style={{ marginBottom: 24 }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<Row gutter={16} style={{ marginBottom: 24 }}>
|
|||
|
|
{Object.entries(PLAN_DETAILS).map(([key, plan]) => (
|
|||
|
|
<Col span={6} key={key}>
|
|||
|
|
<Card
|
|||
|
|
hoverable
|
|||
|
|
style={{
|
|||
|
|
borderColor: currentPlan === key ? '#1890ff' : undefined,
|
|||
|
|
borderWidth: currentPlan === key ? 2 : 1,
|
|||
|
|
}}
|
|||
|
|
onClick={() => handleSimulatePlan(key)}
|
|||
|
|
>
|
|||
|
|
<div style={{ textAlign: 'center' }}>
|
|||
|
|
<Tag color={plan.color} style={{ marginBottom: 8 }}>
|
|||
|
|
{plan.name}
|
|||
|
|
</Tag>
|
|||
|
|
{currentPlan === key && (
|
|||
|
|
<Tag color="green" style={{ marginLeft: 4 }}>当前套餐</Tag>
|
|||
|
|
)}
|
|||
|
|
{simulatedPlan === key && currentPlan !== key && (
|
|||
|
|
<Tag color="blue" style={{ marginLeft: 4 }}>预览中</Tag>
|
|||
|
|
)}
|
|||
|
|
<Title level={3} style={{ margin: '8px 0' }}>
|
|||
|
|
¥{plan.price}
|
|||
|
|
<Text type="secondary" style={{ fontSize: 14 }}>/月</Text>
|
|||
|
|
</Title>
|
|||
|
|
<Divider style={{ margin: '12px 0' }} />
|
|||
|
|
<div style={{ textAlign: 'left' }}>
|
|||
|
|
{plan.features.map((f, i) => (
|
|||
|
|
<div key={i} style={{ marginBottom: 4 }}>
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
|
|||
|
|
<Text>{f}</Text>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{plan.limitations.map((l, i) => (
|
|||
|
|
<div key={i} style={{ marginBottom: 4 }}>
|
|||
|
|
<CloseCircleOutlined style={{ color: '#d9d9d9', marginRight: 8 }} />
|
|||
|
|
<Text type="secondary">{l}</Text>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Card>
|
|||
|
|
</Col>
|
|||
|
|
))}
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
<Card title="功能对比表" style={{ marginBottom: 24 }}>
|
|||
|
|
<Table
|
|||
|
|
columns={columns}
|
|||
|
|
dataSource={FEATURE_CONFIGS}
|
|||
|
|
rowKey="key"
|
|||
|
|
pagination={false}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card title="当前订阅状态">
|
|||
|
|
<Row gutter={24}>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: 24 }}>
|
|||
|
|
<Tag color={PLAN_DETAILS[currentPlan as keyof typeof PLAN_DETAILS]?.color || 'default'} style={{ fontSize: 16, padding: '4px 12px' }}>
|
|||
|
|
{getPlanLabel()}
|
|||
|
|
</Tag>
|
|||
|
|
<Title level={4} style={{ marginTop: 16 }}>当前套餐</Title>
|
|||
|
|
<Text type="secondary">
|
|||
|
|
{currentUser.subscription?.expiresAt ?
|
|||
|
|
`到期时间: ${currentUser.subscription.expiresAt}` :
|
|||
|
|
'永久有效'}
|
|||
|
|
</Text>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: 24 }}>
|
|||
|
|
<Title level={2}>{currentUser.subscription?.features.length || 0}</Title>
|
|||
|
|
<Text type="secondary">已开通功能</Text>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={8}>
|
|||
|
|
<div style={{ textAlign: 'center', padding: 24 }}>
|
|||
|
|
<Title level={2}>{FEATURE_CONFIGS.filter(f => !hasFeature(f.key)).length}</Title>
|
|||
|
|
<Text type="secondary">可升级功能</Text>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Modal
|
|||
|
|
title={previewFeature?.name}
|
|||
|
|
open={!!previewFeature}
|
|||
|
|
onCancel={() => setPreviewFeature(null)}
|
|||
|
|
footer={[
|
|||
|
|
<Button key="close" onClick={() => setPreviewFeature(null)}>
|
|||
|
|
关闭
|
|||
|
|
</Button>,
|
|||
|
|
!isFeatureAvailable(previewFeature?.key || '') && (
|
|||
|
|
<Button key="upgrade" type="primary">
|
|||
|
|
升级套餐
|
|||
|
|
</Button>
|
|||
|
|
),
|
|||
|
|
]}
|
|||
|
|
width={600}
|
|||
|
|
>
|
|||
|
|
{previewFeature && (
|
|||
|
|
<div>
|
|||
|
|
<Paragraph>{previewFeature.description}</Paragraph>
|
|||
|
|
|
|||
|
|
<Title level={5}>功能权益</Title>
|
|||
|
|
{previewFeature.benefits.map((b, i) => (
|
|||
|
|
<div key={i} style={{ marginBottom: 8 }}>
|
|||
|
|
<CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
|
|||
|
|
{b}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
|
|||
|
|
{previewFeature.limitations && (
|
|||
|
|
<>
|
|||
|
|
<Title level={5} style={{ marginTop: 16 }}>版本限制</Title>
|
|||
|
|
{previewFeature.limitations.map((l, i) => (
|
|||
|
|
<div key={i} style={{ marginBottom: 8 }}>
|
|||
|
|
<Text type="secondary">• {l}</Text>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Divider />
|
|||
|
|
|
|||
|
|
<Title level={5}>所需套餐</Title>
|
|||
|
|
<Space>
|
|||
|
|
{previewFeature.requiredPlan.map(p => (
|
|||
|
|
<Tag key={p} color={PLAN_DETAILS[p as keyof typeof PLAN_DETAILS]?.color}>
|
|||
|
|
{PLAN_DETAILS[p as keyof typeof PLAN_DETAILS]?.name}
|
|||
|
|
</Tag>
|
|||
|
|
))}
|
|||
|
|
</Space>
|
|||
|
|
|
|||
|
|
<div style={{ marginTop: 16 }}>
|
|||
|
|
<Tag color={isFeatureAvailable(previewFeature.key) ? 'green' : 'orange'}>
|
|||
|
|
{isFeatureAvailable(previewFeature.key) ? '✓ 您已拥有此功能' : '✗ 需要升级套餐'}
|
|||
|
|
</Tag>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default SubscriptionManage;
|