454 lines
16 KiB
TypeScript
454 lines
16 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { Button, Image, Input, Modal, Space, Tag, Typography, message } from 'antd';
|
||
import type {
|
||
StorePackageAuditDetailDto,
|
||
StorePackageItemDto,
|
||
StorePackageViewDto,
|
||
} from '@dukang/shared-types';
|
||
import { normalizeStorePackageImageUrls } from '@dukang/shared-types';
|
||
import { request } from '../lib/api';
|
||
import { notifyPackageAuditChanged } from '../lib/admin-events';
|
||
import { fmtTime } from '../lib/constants';
|
||
|
||
const HQ_PACKAGE_STATUS_LABELS: Record<string, string> = {
|
||
PENDING: '待审核',
|
||
APPROVED: '已通过',
|
||
REJECTED: '已驳回',
|
||
};
|
||
|
||
function packageKey(pkg: StorePackageItemDto | StorePackageViewDto, index: number) {
|
||
const name = String(pkg.name ?? '').trim();
|
||
return name ? `name:${name}` : `idx:${index}`;
|
||
}
|
||
|
||
function imageSignature(pkg: StorePackageItemDto | StorePackageViewDto) {
|
||
return normalizeStorePackageImageUrls(pkg).join('|');
|
||
}
|
||
|
||
type FieldChange = { label: string; old: string; now: string; kind: 'text' | 'value' };
|
||
|
||
function diffText(a: string, b: string): Array<{ type: 'equal' | 'insert' | 'delete'; text: string }> {
|
||
const m = a.length;
|
||
const n = b.length;
|
||
const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
|
||
for (let i = m - 1; i >= 0; i--) {
|
||
for (let j = n - 1; j >= 0; j--) {
|
||
dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
|
||
}
|
||
}
|
||
const raw: Array<{ type: 'equal' | 'insert' | 'delete'; text: string }> = [];
|
||
let i = 0;
|
||
let j = 0;
|
||
while (i < m && j < n) {
|
||
if (a[i] === b[j]) {
|
||
raw.push({ type: 'equal', text: a[i] });
|
||
i++;
|
||
j++;
|
||
} else if (dp[i + 1][j] >= dp[i][j + 1]) {
|
||
raw.push({ type: 'delete', text: a[i] });
|
||
i++;
|
||
} else {
|
||
raw.push({ type: 'insert', text: b[j] });
|
||
j++;
|
||
}
|
||
}
|
||
while (i < m) raw.push({ type: 'delete', text: a[i++] });
|
||
while (j < n) raw.push({ type: 'insert', text: b[j++] });
|
||
const merged: Array<{ type: 'equal' | 'insert' | 'delete'; text: string }> = [];
|
||
for (const s of raw) {
|
||
const last = merged[merged.length - 1];
|
||
if (last && last.type === s.type) last.text += s.text;
|
||
else merged.push({ ...s });
|
||
}
|
||
return merged;
|
||
}
|
||
|
||
function fieldChanges(
|
||
live: StorePackageItemDto | StorePackageViewDto,
|
||
proposed: StorePackageItemDto | StorePackageViewDto,
|
||
): FieldChange[] {
|
||
const changes: FieldChange[] = [];
|
||
const text = (v: string | number | null | undefined) => (v ?? '').toString().trim();
|
||
const pushText = (label: string, oldV: string, newV: string) => {
|
||
if (oldV !== newV) changes.push({ label, old: oldV, now: newV, kind: 'text' });
|
||
};
|
||
const pushValue = (label: string, oldV: string, newV: string) => {
|
||
if (oldV !== newV) changes.push({ label, old: oldV || '（空）', now: newV || '（空）', kind: 'value' });
|
||
};
|
||
pushValue('价格', `¥${text(live.price)}`, `¥${text(proposed.price)}`);
|
||
pushText('套餐名称', text(live.name), text(proposed.name));
|
||
pushText('菜品内容', text(live.dishes), text(proposed.dishes));
|
||
pushText('可用时间', text(live.usableTime), text(proposed.usableTime));
|
||
pushText('其他说明', text(live.otherNotes), text(proposed.otherNotes));
|
||
const liveImgs = normalizeStorePackageImageUrls(live);
|
||
const proposedImgs = normalizeStorePackageImageUrls(proposed);
|
||
if (imageSignature(live) !== imageSignature(proposed)) {
|
||
changes.push({ label: '图片', old: `${liveImgs.length} 张`, now: `${proposedImgs.length} 张`, kind: 'value' });
|
||
}
|
||
return changes;
|
||
}
|
||
|
||
function diffPackages(live: StorePackageViewDto[], proposed: StorePackageItemDto[]) {
|
||
const liveMap = new Map(live.map((p, i) => [packageKey(p, i), p]));
|
||
const proposedMap = new Map(proposed.map((p, i) => [packageKey(p, i), p]));
|
||
const keys = new Set([...liveMap.keys(), ...proposedMap.keys()]);
|
||
const rows: Array<{
|
||
key: string;
|
||
change: 'added' | 'removed' | 'changed' | 'unchanged';
|
||
live?: StorePackageViewDto;
|
||
proposed?: StorePackageItemDto;
|
||
changes?: FieldChange[];
|
||
}> = [];
|
||
|
||
for (const key of keys) {
|
||
const l = liveMap.get(key);
|
||
const p = proposedMap.get(key);
|
||
if (l && !p) {
|
||
rows.push({ key, change: 'removed', live: l });
|
||
} else if (!l && p) {
|
||
rows.push({ key, change: 'added', proposed: p });
|
||
} else if (l && p) {
|
||
const changed =
|
||
l.price !== p.price ||
|
||
l.dishes !== p.dishes ||
|
||
(l.usableTime ?? '') !== (p.usableTime ?? '') ||
|
||
(l.otherNotes ?? '') !== (p.otherNotes ?? '') ||
|
||
imageSignature(l) !== imageSignature(p);
|
||
rows.push({
|
||
key,
|
||
change: changed ? 'changed' : 'unchanged',
|
||
live: l,
|
||
proposed: p,
|
||
changes: changed ? fieldChanges(l, p) : undefined,
|
||
});
|
||
}
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
const CHANGE_LABELS = {
|
||
added: { text: '新增', color: 'green' },
|
||
removed: { text: '删除', color: 'red' },
|
||
changed: { text: '变更', color: 'orange' },
|
||
unchanged: { text: '未变', color: 'default' },
|
||
} as const;
|
||
|
||
function TextDiff({ oldText, newText }: { oldText: string; newText: string }) {
|
||
const segs = diffText(oldText, newText);
|
||
return (
|
||
<div style={{ marginTop: 2 }}>
|
||
<div style={{ lineHeight: 1.6 }}>
|
||
<Typography.Text type="secondary">原：</Typography.Text>
|
||
{segs
|
||
.filter((s) => s.type !== 'insert')
|
||
.map((s, idx) =>
|
||
s.type === 'delete' ? (
|
||
<Typography.Text key={idx} delete style={{ color: '#cf1322' }}>
|
||
{s.text || '（空）'}
|
||
</Typography.Text>
|
||
) : (
|
||
<Typography.Text key={idx}>{s.text}</Typography.Text>
|
||
),
|
||
)}
|
||
</div>
|
||
<div style={{ lineHeight: 1.6 }}>
|
||
<Typography.Text type="secondary">新：</Typography.Text>
|
||
{segs
|
||
.filter((s) => s.type !== 'delete')
|
||
.map((s, idx) =>
|
||
s.type === 'insert' ? (
|
||
<Typography.Text key={idx} style={{ color: '#389e0d' }}>
|
||
{s.text || '（空）'}
|
||
</Typography.Text>
|
||
) : (
|
||
<Typography.Text key={idx}>{s.text}</Typography.Text>
|
||
),
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function PackageDetailCard({
|
||
title,
|
||
pkg,
|
||
change,
|
||
changes,
|
||
}: {
|
||
title?: string;
|
||
pkg: StorePackageItemDto | StorePackageViewDto;
|
||
change?: keyof typeof CHANGE_LABELS;
|
||
changes?: FieldChange[];
|
||
}) {
|
||
const images = normalizeStorePackageImageUrls(pkg);
|
||
const meta = change ? CHANGE_LABELS[change] : null;
|
||
return (
|
||
<div
|
||
style={{
|
||
marginBottom: 12,
|
||
padding: 12,
|
||
border: '1px solid #f0f0f0',
|
||
borderRadius: 8,
|
||
background: '#fafafa',
|
||
}}
|
||
>
|
||
<Space style={{ marginBottom: 8 }} wrap>
|
||
{title ? <Typography.Text type="secondary">{title}</Typography.Text> : null}
|
||
{meta ? <Tag color={meta.color}>{meta.text}</Tag> : null}
|
||
</Space>
|
||
<div style={{ marginBottom: 8 }}>
|
||
<strong>{pkg.name}</strong>
|
||
<span style={{ marginLeft: 8 }}>¥{pkg.price}</span>
|
||
</div>
|
||
<Typography.Paragraph className="admin-package-audit-text" style={{ marginBottom: 8 }}>
|
||
{pkg.dishes || '—'}
|
||
</Typography.Paragraph>
|
||
{pkg.usableTime ? (
|
||
<Typography.Paragraph type="secondary" className="admin-package-audit-text" style={{ marginBottom: 4 }}>
|
||
可用时间：{pkg.usableTime}
|
||
</Typography.Paragraph>
|
||
) : null}
|
||
{pkg.otherNotes ? (
|
||
<Typography.Paragraph type="secondary" className="admin-package-audit-text" style={{ marginBottom: 8 }}>
|
||
其他说明：{pkg.otherNotes}
|
||
</Typography.Paragraph>
|
||
) : null}
|
||
{images.length ? (
|
||
<Image.PreviewGroup>
|
||
<Space wrap size={8}>
|
||
{images.map((url) => (
|
||
<Image key={url} src={url} width={72} height={72} style={{ objectFit: 'cover', borderRadius: 4 }} />
|
||
))}
|
||
</Space>
|
||
</Image.PreviewGroup>
|
||
) : (
|
||
<Typography.Text type="secondary">无套餐图片</Typography.Text>
|
||
)}
|
||
{changes && changes.length ? (
|
||
<div
|
||
style={{
|
||
marginTop: 8,
|
||
padding: 8,
|
||
background: '#fff7e6',
|
||
border: '1px solid #ffe7ba',
|
||
borderRadius: 6,
|
||
}}
|
||
>
|
||
<Typography.Text strong style={{ fontSize: 12 }}>
|
||
变更明细
|
||
</Typography.Text>
|
||
<ul style={{ margin: '6px 0 0', paddingLeft: 18 }}>
|
||
{changes.map((c) => (
|
||
<li key={c.label} style={{ marginBottom: 6 }}>
|
||
<Typography.Text type="secondary">{c.label}：</Typography.Text>
|
||
{c.kind === 'text' ? (
|
||
<TextDiff oldText={c.old} newText={c.now} />
|
||
) : (
|
||
<>
|
||
<Typography.Text delete type="secondary">
|
||
{c.old}
|
||
</Typography.Text>
|
||
<Typography.Text type="secondary"> → </Typography.Text>
|
||
<Typography.Text strong>{c.now}</Typography.Text>
|
||
</>
|
||
)}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export type StorePackageAuditPanelProps = {
|
||
requestId: string;
|
||
/** 是否在面板顶部显示通过/驳回（抽屉 extra 另有按钮时可关） */
|
||
showActions?: boolean;
|
||
onAudited?: () => void;
|
||
onDetailLoaded?: (detail: StorePackageAuditDetailDto | null) => void;
|
||
};
|
||
|
||
/** 套餐变更对比 + 通过/驳回（审核通知页与门店详情抽屉共用） */
|
||
export default function StorePackageAuditPanel({
|
||
requestId,
|
||
showActions = true,
|
||
onAudited,
|
||
onDetailLoaded,
|
||
}: StorePackageAuditPanelProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
const [detail, setDetail] = useState<StorePackageAuditDetailDto | null>(null);
|
||
const [rejectOpen, setRejectOpen] = useState(false);
|
||
const [rejectReason, setRejectReason] = useState('');
|
||
const [auditing, setAuditing] = useState(false);
|
||
|
||
async function load() {
|
||
setLoading(true);
|
||
try {
|
||
const data = await request<StorePackageAuditDetailDto>(`/admin/store-package-audits/${requestId}`);
|
||
setDetail(data);
|
||
onDetailLoaded?.(data);
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '加载套餐审核详情失败');
|
||
setDetail(null);
|
||
onDetailLoaded?.(null);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
void load();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [requestId]);
|
||
|
||
async function audit(action: 'APPROVE' | 'REJECT', reason?: string) {
|
||
if (!detail) return;
|
||
setAuditing(true);
|
||
try {
|
||
await request(`/admin/store-package-audits/${detail.id}/audit`, {
|
||
method: 'PUT',
|
||
body: JSON.stringify(action === 'REJECT' ? { action, rejectReason: reason } : { action }),
|
||
});
|
||
message.success(action === 'APPROVE' ? '套餐已通过' : '套餐已驳回');
|
||
notifyPackageAuditChanged();
|
||
onAudited?.();
|
||
await load();
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '操作失败');
|
||
} finally {
|
||
setAuditing(false);
|
||
}
|
||
}
|
||
|
||
if (loading && !detail) {
|
||
return <Typography.Text type="secondary">加载套餐变更…</Typography.Text>;
|
||
}
|
||
if (!detail) {
|
||
return <Typography.Text type="secondary">暂无套餐审核详情</Typography.Text>;
|
||
}
|
||
|
||
const diffRows = diffPackages(detail.livePackages ?? [], detail.packages ?? []);
|
||
const changeByKey = new Map(diffRows.map((row) => [row.key, row.change]));
|
||
const changesByKey = new Map(diffRows.map((row) => [row.key, row.changes]));
|
||
const addedCount = diffRows.filter((r) => r.change === 'added').length;
|
||
const removedCount = diffRows.filter((r) => r.change === 'removed').length;
|
||
const changedCount = diffRows.filter((r) => r.change === 'changed').length;
|
||
const unchangedCount = diffRows.filter((r) => r.change === 'unchanged').length;
|
||
|
||
return (
|
||
<div>
|
||
<Space style={{ marginBottom: 12, width: '100%', justifyContent: 'space-between' }} wrap>
|
||
<Space wrap>
|
||
<Tag>{HQ_PACKAGE_STATUS_LABELS[detail.status] ?? detail.status}</Tag>
|
||
<Typography.Text type="secondary">
|
||
提交方：{detail.submitterType === 'PARTNER' ? '合伙人' : '门店'} · {fmtTime(detail.createdAt)}
|
||
</Typography.Text>
|
||
</Space>
|
||
{showActions && detail.status === 'PENDING' ? (
|
||
<Space>
|
||
<Button type="primary" loading={auditing} onClick={() => void audit('APPROVE')}>
|
||
通过套餐
|
||
</Button>
|
||
<Button
|
||
danger
|
||
loading={auditing}
|
||
onClick={() => {
|
||
setRejectReason('');
|
||
setRejectOpen(true);
|
||
}}
|
||
>
|
||
驳回套餐
|
||
</Button>
|
||
</Space>
|
||
) : null}
|
||
</Space>
|
||
{detail.rejectReason ? (
|
||
<Typography.Paragraph type="danger">驳回原因：{detail.rejectReason}</Typography.Paragraph>
|
||
) : null}
|
||
<Space direction="vertical" size={4} style={{ marginBottom: 12 }}>
|
||
<Typography.Text type="secondary">
|
||
线上已审核 {detail.livePackages?.length ?? 0} 条 · 待审核 {detail.packages?.length ?? 0} 条
|
||
</Typography.Text>
|
||
<Space wrap>
|
||
<Tag color="green">新增 {addedCount}</Tag>
|
||
<Tag color="red">删除 {removedCount}</Tag>
|
||
<Tag color="orange">变更 {changedCount}</Tag>
|
||
{unchangedCount ? <Tag>未变 {unchangedCount}</Tag> : null}
|
||
</Space>
|
||
</Space>
|
||
<div className="admin-package-audit-cols">
|
||
<div className="admin-package-audit-col">
|
||
<Typography.Title level={5} style={{ marginTop: 0 }}>
|
||
线上已审核套餐
|
||
</Typography.Title>
|
||
{(detail.livePackages ?? []).length ? (
|
||
(detail.livePackages ?? []).map((pkg, index) => (
|
||
<PackageDetailCard
|
||
key={`live-${packageKey(pkg, index)}`}
|
||
title={`套餐 ${index + 1}`}
|
||
pkg={pkg}
|
||
change={changeByKey.get(packageKey(pkg, index))}
|
||
/>
|
||
))
|
||
) : (
|
||
<Typography.Text type="secondary">暂无线上套餐</Typography.Text>
|
||
)}
|
||
</div>
|
||
<div className="admin-package-audit-col">
|
||
<Typography.Title level={5} style={{ marginTop: 0 }}>
|
||
待审核套餐
|
||
</Typography.Title>
|
||
{(detail.packages ?? []).length ? (
|
||
(detail.packages ?? []).map((pkg, index) => (
|
||
<PackageDetailCard
|
||
key={`pending-${packageKey(pkg, index)}`}
|
||
title={`套餐 ${index + 1}`}
|
||
pkg={pkg}
|
||
change={changeByKey.get(packageKey(pkg, index))}
|
||
changes={changesByKey.get(packageKey(pkg, index))}
|
||
/>
|
||
))
|
||
) : (
|
||
<Typography.Text type="secondary">暂无待审核套餐</Typography.Text>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<Modal
|
||
title="驳回套餐变更"
|
||
open={rejectOpen}
|
||
confirmLoading={auditing}
|
||
onCancel={() => setRejectOpen(false)}
|
||
onOk={() => {
|
||
if (!rejectReason.trim()) {
|
||
message.warning('请填写驳回原因');
|
||
return;
|
||
}
|
||
void audit('REJECT', rejectReason.trim()).then(() => setRejectOpen(false));
|
||
}}
|
||
>
|
||
<Input.TextArea
|
||
rows={3}
|
||
value={rejectReason}
|
||
placeholder="驳回原因"
|
||
onChange={(e) => setRejectReason(e.target.value)}
|
||
/>
|
||
</Modal>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** 供门店详情抽屉 extra 调用 */
|
||
export async function auditStorePackageRequest(
|
||
requestId: string,
|
||
action: 'APPROVE' | 'REJECT',
|
||
rejectReason?: string,
|
||
) {
|
||
await request(`/admin/store-package-audits/${requestId}/audit`, {
|
||
method: 'PUT',
|
||
body: JSON.stringify(action === 'REJECT' ? { action, rejectReason } : { action }),
|
||
});
|
||
notifyPackageAuditChanged();
|
||
}
|