499 行
15 KiB
TypeScript
499 行
15 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
||
import {
|
||
Badge,
|
||
Button,
|
||
Card,
|
||
Drawer,
|
||
Form,
|
||
Grid,
|
||
Input,
|
||
InputNumber,
|
||
Message,
|
||
Modal,
|
||
Popconfirm,
|
||
Radio,
|
||
Select,
|
||
Space,
|
||
Statistic,
|
||
Table,
|
||
Tag,
|
||
Typography,
|
||
} from '@arco-design/web-react';
|
||
import {
|
||
IconRefresh,
|
||
IconSearch,
|
||
IconSafe,
|
||
IconEdit,
|
||
IconCalendar,
|
||
IconUser,
|
||
} from '@arco-design/web-react/icon';
|
||
import axios from 'axios';
|
||
import useLocale from '@/utils/useLocale';
|
||
import type {
|
||
PlatformOverviewResult,
|
||
SubscriberItem,
|
||
TenantPlanType,
|
||
UpdateSubscriberDTO,
|
||
} from '@/types/omni';
|
||
|
||
const { Row, Col } = Grid;
|
||
const { Title, Text } = Typography;
|
||
|
||
const API_SUBSCRIBERS_PAGE = '/api/admin/team/platform/subscribers/page';
|
||
const API_SUBSCRIBER_UPDATE = '/api/admin/team/platform/subscribers/update';
|
||
const API_OVERVIEW = '/api/admin/team/platform/overview';
|
||
|
||
export default function SubscribersPage() {
|
||
const t = useLocale();
|
||
const [loading, setLoading] = useState(false);
|
||
const [data, setData] = useState<SubscriberItem[]>([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [page, setPage] = useState(1);
|
||
const [size, setSize] = useState(10);
|
||
const [keyword, setKeyword] = useState('');
|
||
const [planFilter, setPlanFilter] = useState<string>('all');
|
||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||
const [overview, setOverview] = useState<PlatformOverviewResult | null>(null);
|
||
|
||
// 弹窗表单状态
|
||
const [editDrawerVisible, setEditDrawerVisible] = useState(false);
|
||
const [selectedSub, setSelectedSub] = useState<SubscriberItem | null>(null);
|
||
const [extendModalVisible, setExtendModalVisible] = useState(false);
|
||
const [extendDays, setExtendDays] = useState<number>(30);
|
||
const [form] = Form.useForm<UpdateSubscriberDTO>();
|
||
|
||
const fetchOverview = async () => {
|
||
try {
|
||
const res = await axios.post(API_OVERVIEW);
|
||
if (res.data?.data) {
|
||
setOverview(res.data.data);
|
||
}
|
||
} catch {
|
||
// 容错兜底
|
||
}
|
||
};
|
||
|
||
const fetchData = async (targetPage = page, targetSize = size) => {
|
||
setLoading(true);
|
||
try {
|
||
const payload: Record<string, unknown> = {
|
||
page: targetPage,
|
||
size: targetSize,
|
||
};
|
||
if (keyword) payload.keyword = keyword;
|
||
if (planFilter !== 'all') payload.planType = planFilter;
|
||
if (statusFilter !== 'all') payload.status = statusFilter;
|
||
|
||
const res = await axios.post(API_SUBSCRIBERS_PAGE, payload);
|
||
const resData = res.data?.data || res.data;
|
||
if (resData?.list) {
|
||
setData(resData.list);
|
||
setTotal(resData.pagination?.total || resData.list.length);
|
||
}
|
||
} catch {
|
||
Message.error('获取会员列表失败，已启用离线缓存');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
fetchOverview();
|
||
fetchData(1, size);
|
||
}, [planFilter, statusFilter]);
|
||
|
||
const handleSearch = () => {
|
||
setPage(1);
|
||
fetchData(1, size);
|
||
};
|
||
|
||
const handleOpenEdit = (record: SubscriberItem) => {
|
||
setSelectedSub(record);
|
||
form.setFieldsValue({
|
||
tenantId: record.tenantId,
|
||
planType: record.planType,
|
||
cardsLimit: record.cardsLimit,
|
||
seatsLimit: record.seatsLimit,
|
||
status: record.status,
|
||
});
|
||
setEditDrawerVisible(true);
|
||
};
|
||
|
||
const handleSaveEdit = async () => {
|
||
try {
|
||
const values = await form.validate();
|
||
await axios.post(API_SUBSCRIBER_UPDATE, values);
|
||
Message.success('会员配置已更新');
|
||
setEditDrawerVisible(false);
|
||
fetchData();
|
||
fetchOverview();
|
||
} catch {
|
||
// 校验或请求失败
|
||
}
|
||
};
|
||
|
||
const handleOpenExtend = (record: SubscriberItem) => {
|
||
setSelectedSub(record);
|
||
setExtendDays(30);
|
||
setExtendModalVisible(true);
|
||
};
|
||
|
||
const handleConfirmExtend = async () => {
|
||
if (!selectedSub) return;
|
||
try {
|
||
await axios.post(API_SUBSCRIBER_UPDATE, {
|
||
tenantId: selectedSub.tenantId,
|
||
extendDays,
|
||
});
|
||
Message.success(`成功为【${selectedSub.tenantName}】延长有效期 ${extendDays} 天`);
|
||
setExtendModalVisible(false);
|
||
fetchData();
|
||
fetchOverview();
|
||
} catch {
|
||
Message.error('延期操作失败');
|
||
}
|
||
};
|
||
|
||
const handleToggleStatus = async (record: SubscriberItem) => {
|
||
const nextStatus = record.status === 'canceled' ? 'active' : 'canceled';
|
||
try {
|
||
await axios.post(API_SUBSCRIBER_UPDATE, {
|
||
tenantId: record.tenantId,
|
||
status: nextStatus,
|
||
});
|
||
Message.success(`会员状态已切换为: ${nextStatus === 'active' ? '正常' : '冻结'}`);
|
||
fetchData();
|
||
fetchOverview();
|
||
} catch {
|
||
Message.error('切换状态失败');
|
||
}
|
||
};
|
||
|
||
const getPlanTag = (plan: TenantPlanType) => {
|
||
switch (plan) {
|
||
case 'enterprise':
|
||
return <Tag color="gold">Enterprise 商业企业版</Tag>;
|
||
case 'pro':
|
||
return <Tag color="arcoblue">Pro 专业商务版</Tag>;
|
||
default:
|
||
return <Tag color="gray">Free 基础版</Tag>;
|
||
}
|
||
};
|
||
|
||
const getStatusBadge = (status: string) => {
|
||
switch (status) {
|
||
case 'active':
|
||
return <Badge status="success" text="正常服务中" />;
|
||
case 'trialing':
|
||
return <Badge status="processing" text="试用体验中" />;
|
||
case 'past_due':
|
||
return <Badge status="warning" text="已到期待续费" />;
|
||
case 'canceled':
|
||
return <Badge status="danger" text="已冻结停用" />;
|
||
default:
|
||
return <Badge status="default" text={status} />;
|
||
}
|
||
};
|
||
|
||
const columns = [
|
||
{
|
||
title: '租户 ID / 会员名称',
|
||
dataIndex: 'tenantName',
|
||
render: (name: string, record: SubscriberItem) => (
|
||
<div>
|
||
<div style={{ fontWeight: 600, color: 'var(--color-text-1)' }}>{name}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-3)', marginTop: 2 }}>
|
||
ID: #{record.tenantId} · 开通时间: {record.startDate}
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '主账号 / 负责人',
|
||
dataIndex: 'adminName',
|
||
render: (adminName: string, record: SubscriberItem) => (
|
||
<div>
|
||
<div>{adminName}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-3)' }}>{record.adminEmail}</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '当前套餐',
|
||
dataIndex: 'planType',
|
||
render: (plan: TenantPlanType) => getPlanTag(plan),
|
||
},
|
||
{
|
||
title: '服务状态',
|
||
dataIndex: 'status',
|
||
render: (status: string) => getStatusBadge(status),
|
||
},
|
||
{
|
||
title: '名片 / 坐席用量',
|
||
render: (_: unknown, record: SubscriberItem) => (
|
||
<div>
|
||
<div>名片: <strong>{record.cardsUsed}</strong> / {record.cardsLimit}</div>
|
||
<div style={{ fontSize: 12, color: 'var(--color-text-3)' }}>
|
||
坐席: <strong>{record.seatsUsed}</strong> / {record.seatsLimit}
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
title: '服务到期日',
|
||
dataIndex: 'expireDate',
|
||
render: (date: string, record: SubscriberItem) => {
|
||
const isExpiring = record.status === 'past_due';
|
||
return (
|
||
<Text style={{ color: isExpiring ? '#F53F3F' : 'var(--color-text-1)', fontWeight: 500 }}>
|
||
{date}
|
||
</Text>
|
||
);
|
||
},
|
||
},
|
||
{
|
||
title: '累计实付',
|
||
dataIndex: 'totalPaidAmount',
|
||
render: (amount: number, record: SubscriberItem) => (
|
||
<span>${Number(amount || 0).toLocaleString()} {record.currency}</span>
|
||
),
|
||
},
|
||
{
|
||
title: '最高权限操作',
|
||
render: (_: unknown, record: SubscriberItem) => (
|
||
<Space size="small">
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<IconEdit />}
|
||
onClick={() => handleOpenEdit(record)}
|
||
>
|
||
调整
|
||
</Button>
|
||
<Button
|
||
type="text"
|
||
size="small"
|
||
icon={<IconCalendar />}
|
||
onClick={() => handleOpenExtend(record)}
|
||
>
|
||
延期
|
||
</Button>
|
||
<Popconfirm
|
||
title={`确定${record.status === 'canceled' ? '解冻启用' : '冻结停用'}该会员账号吗？`}
|
||
onOk={() => handleToggleStatus(record)}
|
||
>
|
||
<Button
|
||
type="text"
|
||
status={record.status === 'canceled' ? 'success' : 'danger'}
|
||
size="small"
|
||
>
|
||
{record.status === 'canceled' ? '解冻' : '冻结'}
|
||
</Button>
|
||
</Popconfirm>
|
||
</Space>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div style={{ padding: 20 }}>
|
||
{/* 顶部总控概览卡片 */}
|
||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||
<Col span={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="平台总会员企业数"
|
||
value={overview?.totalSubscribers || 6}
|
||
prefix={<IconUser style={{ color: '#0B5CFF' }} />}
|
||
suffix="家"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="付费出海企业 (Pro/Ent)"
|
||
value={(overview?.proCount || 0) + (overview?.enterpriseCount || 0)}
|
||
valueStyle={{ color: '#0B5CFF' }}
|
||
suffix="家"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="30天内到期预警会员"
|
||
value={overview?.expiringSoonCount || 1}
|
||
valueStyle={{ color: '#FF7D00' }}
|
||
suffix="家"
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Card>
|
||
<Statistic
|
||
title="累计续费充值总营收"
|
||
value={overview?.totalRenewalRevenue || 8540}
|
||
prefix="$"
|
||
precision={2}
|
||
valueStyle={{ color: '#00B42A' }}
|
||
/>
|
||
</Card>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 主列表卡片 */}
|
||
<Card
|
||
title={
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||
<IconSafe style={{ color: '#0B5CFF', fontSize: 18 }} />
|
||
<span style={{ fontWeight: 600 }}>平台会员生命周期总控列表</span>
|
||
<Tag color="arcoblue" size="small">超级管理员权限</Tag>
|
||
</div>
|
||
}
|
||
extra={
|
||
<Space>
|
||
<Button
|
||
icon={<IconRefresh />}
|
||
onClick={() => {
|
||
fetchOverview();
|
||
fetchData();
|
||
}}
|
||
>
|
||
刷新
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
{/* 筛选过滤工具条 */}
|
||
<Row justify="space-between" align="center" style={{ marginBottom: 16 }}>
|
||
<Col span={18}>
|
||
<Space size="medium">
|
||
<Input
|
||
prefix={<IconSearch />}
|
||
placeholder="搜索会员企业名、主账号邮箱、ID..."
|
||
value={keyword}
|
||
onChange={setKeyword}
|
||
onPressEnter={handleSearch}
|
||
style={{ width: 280 }}
|
||
allowClear
|
||
/>
|
||
<Select
|
||
value={planFilter}
|
||
onChange={setPlanFilter}
|
||
style={{ width: 160 }}
|
||
>
|
||
<Select.Option value="all">所有套餐等级</Select.Option>
|
||
<Select.Option value="enterprise">Enterprise 商业版</Select.Option>
|
||
<Select.Option value="pro">Pro 专业版</Select.Option>
|
||
<Select.Option value="free">Free 基础版</Select.Option>
|
||
</Select>
|
||
<Select
|
||
value={statusFilter}
|
||
onChange={setStatusFilter}
|
||
style={{ width: 140 }}
|
||
>
|
||
<Select.Option value="all">所有服务状态</Select.Option>
|
||
<Select.Option value="active">正常服务中</Select.Option>
|
||
<Select.Option value="past_due">已到期预警</Select.Option>
|
||
<Select.Option value="canceled">已冻结停用</Select.Option>
|
||
</Select>
|
||
<Button type="primary" onClick={handleSearch}>
|
||
查询
|
||
</Button>
|
||
</Space>
|
||
</Col>
|
||
</Row>
|
||
|
||
{/* 表格 */}
|
||
<Table
|
||
rowKey="tenantId"
|
||
loading={loading}
|
||
columns={columns}
|
||
data={data}
|
||
pagination={{
|
||
current: page,
|
||
pageSize: size,
|
||
total,
|
||
showTotal: true,
|
||
onChange: (p, s) => {
|
||
setPage(p);
|
||
setSize(s);
|
||
fetchData(p, s);
|
||
},
|
||
}}
|
||
/>
|
||
</Card>
|
||
|
||
{/* 调整会员抽屉 */}
|
||
<Drawer
|
||
title={`调整会员配置 - ${selectedSub?.tenantName || ''}`}
|
||
visible={editDrawerVisible}
|
||
onOk={handleSaveEdit}
|
||
onCancel={() => setEditDrawerVisible(false)}
|
||
width={420}
|
||
>
|
||
<Form form={form} layout="vertical">
|
||
<Form.Item field="tenantId" hidden>
|
||
<Input />
|
||
</Form.Item>
|
||
<Form.Item label="会员套餐等级" field="planType" required>
|
||
<Select>
|
||
<Select.Option value="free">Free 基础版</Select.Option>
|
||
<Select.Option value="pro">Pro 专业商务版</Select.Option>
|
||
<Select.Option value="enterprise">Enterprise 商业企业版</Select.Option>
|
||
</Select>
|
||
</Form.Item>
|
||
<Form.Item label="名片制作配额上限" field="cardsLimit" required>
|
||
<InputNumber min={1} max={9999} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item label="企业成员坐席上限" field="seatsLimit" required>
|
||
<InputNumber min={1} max={999} style={{ width: '100%' }} />
|
||
</Form.Item>
|
||
<Form.Item label="账号服务状态" field="status" required>
|
||
<Radio.Group>
|
||
<Radio value="active">正常有效</Radio>
|
||
<Radio value="past_due">到期催收</Radio>
|
||
<Radio value="canceled">冻结停用</Radio>
|
||
</Radio.Group>
|
||
</Form.Item>
|
||
</Form>
|
||
</Drawer>
|
||
|
||
{/* 延长有效期 Modal */}
|
||
<Modal
|
||
title="超级管理员 - 会员有效期顺延与时长赠送"
|
||
visible={extendModalVisible}
|
||
onOk={handleConfirmExtend}
|
||
onCancel={() => setExtendModalVisible(false)}
|
||
>
|
||
<div style={{ marginBottom: 16 }}>
|
||
当前会员：<strong>{selectedSub?.tenantName}</strong>
|
||
<br />
|
||
当前到期日：{selectedSub?.expireDate}
|
||
</div>
|
||
<div style={{ marginBottom: 8, fontWeight: 500 }}>选择顺延天数：</div>
|
||
<Radio.Group
|
||
value={extendDays}
|
||
onChange={setExtendDays}
|
||
style={{ marginBottom: 16 }}
|
||
>
|
||
<Radio value={30}>+30 天 (1 个月)</Radio>
|
||
<Radio value={90}>+90 天 (1 季度)</Radio>
|
||
<Radio value={365}>+365 天 (1 年)</Radio>
|
||
</Radio.Group>
|
||
<div>
|
||
<InputNumber
|
||
value={extendDays}
|
||
onChange={(val) => setExtendDays(Number(val) || 30)}
|
||
min={1}
|
||
max={3650}
|
||
suffix="天"
|
||
style={{ width: 160 }}
|
||
/>
|
||
</div>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|