fix(admin): improve promo layout and system settings save UX
CI / verify (pull_request) Has been cancelled
CI / verify (pull_request) Has been cancelled
Fix mini home media form persistence; float save with unsaved leave prompt; promo detail QR on the right. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button, Space } from 'antd';
|
||||
import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
@@ -8,6 +9,21 @@ import OssUpload from './OssUpload';
|
||||
|
||||
const MAX_BANNERS = 8;
|
||||
|
||||
/** 编辑态保留空位；下发/入库仍用 parseMiniHomeBanners 过滤空串 */
|
||||
function parseBannersForEdit(raw?: string | null): string[] {
|
||||
if (!raw?.trim()) return [];
|
||||
try {
|
||||
const parsed = JSON.parse(raw.trim()) as unknown;
|
||||
if (!Array.isArray(parsed)) return parseMiniHomeBanners(raw);
|
||||
return parsed
|
||||
.filter((u): u is string => typeof u === 'string')
|
||||
.map((u) => u.trim())
|
||||
.slice(0, MAX_BANNERS);
|
||||
} catch {
|
||||
return parseMiniHomeBanners(raw);
|
||||
}
|
||||
}
|
||||
|
||||
/** Ant Form 控件：单图 URL 字符串（默认 OSS 路径 footer） */
|
||||
export function ConfigImageField({
|
||||
value,
|
||||
@@ -22,8 +38,8 @@ export function ConfigImageField({
|
||||
<OssUpload
|
||||
bizType={bizType}
|
||||
mediaType="IMAGE"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
value={value ?? ''}
|
||||
onChange={(url) => onChange?.(url ?? '')}
|
||||
placeholder="上传或粘贴图片 URL"
|
||||
/>
|
||||
);
|
||||
@@ -39,10 +55,17 @@ export function ConfigImageListField({
|
||||
onChange?: (json: string) => void;
|
||||
bizType?: string;
|
||||
}) {
|
||||
const urls = parseMiniHomeBanners(value);
|
||||
const [urls, setUrls] = useState<string[]>(() => parseBannersForEdit(value));
|
||||
|
||||
useEffect(() => {
|
||||
setUrls(parseBannersForEdit(value));
|
||||
}, [value]);
|
||||
|
||||
/** 本地可含空位；写入 Form 时去掉空串 */
|
||||
function commit(next: string[]) {
|
||||
onChange?.(serializeMiniHomeBanners(next));
|
||||
const clipped = next.slice(0, MAX_BANNERS);
|
||||
setUrls(clipped);
|
||||
onChange?.(serializeMiniHomeBanners(clipped));
|
||||
}
|
||||
|
||||
function updateAt(index: number, url: string) {
|
||||
@@ -67,13 +90,14 @@ export function ConfigImageListField({
|
||||
|
||||
function add() {
|
||||
if (urls.length >= MAX_BANNERS) return;
|
||||
commit([...urls, '']);
|
||||
// 只加本地空位，避免 serialize 过滤空串导致「点击无反应」
|
||||
setUrls((prev) => [...prev, '']);
|
||||
}
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }} size="middle">
|
||||
{urls.map((url, index) => (
|
||||
<Space key={`${index}-${url || 'empty'}`} align="start" style={{ width: '100%' }} wrap>
|
||||
<Space key={`banner-${index}`} align="start" style={{ width: '100%' }} wrap>
|
||||
<div style={{ flex: 1, minWidth: 240 }}>
|
||||
<OssUpload
|
||||
bizType={bizType}
|
||||
|
||||
@@ -1,131 +1,71 @@
|
||||
import { useEffect, useMemo, useState, type ReactNode } from 'react';
|
||||
|
||||
import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
|
||||
Alert,
|
||||
|
||||
Button,
|
||||
|
||||
Card,
|
||||
|
||||
Collapse,
|
||||
|
||||
Form,
|
||||
|
||||
Input,
|
||||
|
||||
InputNumber,
|
||||
|
||||
Modal,
|
||||
Space,
|
||||
|
||||
Switch,
|
||||
|
||||
Table,
|
||||
|
||||
Tag,
|
||||
|
||||
Typography,
|
||||
|
||||
message,
|
||||
|
||||
} from 'antd';
|
||||
|
||||
import type { MockSmsCodeItem, SystemConfigFieldMeta, SystemConfigFormResponse } from '@dukang/shared-types';
|
||||
import { request } from '../lib/api';
|
||||
import { ConfigImageField, ConfigImageListField } from '../components/ConfigMediaFields';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
|
||||
|
||||
function MockSmsCodePanel({ codes, loading }: { codes: MockSmsCodeItem[]; loading?: boolean }) {
|
||||
|
||||
return (
|
||||
|
||||
<div style={{ marginTop: -8, marginBottom: 16, marginLeft: 0 }}>
|
||||
|
||||
<Typography.Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
|
||||
|
||||
最近 Mock 验证码（写入数据库，最新 50 条）
|
||||
|
||||
</Typography.Text>
|
||||
|
||||
<Table<MockSmsCodeItem>
|
||||
|
||||
size="small"
|
||||
|
||||
rowKey="id"
|
||||
|
||||
loading={loading}
|
||||
|
||||
pagination={false}
|
||||
|
||||
scroll={{ y: 240 }}
|
||||
|
||||
locale={{ emptyText: '暂无记录，触发短信发送后将显示在此' }}
|
||||
|
||||
columns={[
|
||||
|
||||
{
|
||||
|
||||
title: '时间',
|
||||
|
||||
dataIndex: 'createdAt',
|
||||
|
||||
width: 168,
|
||||
|
||||
render: (v: string) => new Date(v).toLocaleString(),
|
||||
|
||||
},
|
||||
|
||||
{ title: '手机号', dataIndex: 'phone', width: 120 },
|
||||
|
||||
{ title: '场景', dataIndex: 'scene', width: 160 },
|
||||
|
||||
{
|
||||
|
||||
title: '验证码',
|
||||
|
||||
dataIndex: 'code',
|
||||
|
||||
width: 88,
|
||||
|
||||
render: (code: string) => (
|
||||
|
||||
<Typography.Text copyable strong>
|
||||
|
||||
{code}
|
||||
|
||||
</Typography.Text>
|
||||
|
||||
),
|
||||
|
||||
},
|
||||
|
||||
]}
|
||||
|
||||
dataSource={codes}
|
||||
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function renderField(
|
||||
|
||||
field: SystemConfigFieldMeta,
|
||||
|
||||
configuredSecrets: string[],
|
||||
|
||||
extra?: ReactNode,
|
||||
|
||||
) {
|
||||
|
||||
const isConfiguredSecret = field.secret && configuredSecrets.includes(field.key);
|
||||
|
||||
if (field.type === 'boolean') {
|
||||
@@ -169,6 +109,9 @@ function renderField(
|
||||
</Space>
|
||||
}
|
||||
tooltip={field.description}
|
||||
trigger="onChange"
|
||||
getValueFromEvent={(v: unknown) => (typeof v === 'string' ? v : '')}
|
||||
normalize={(v) => (typeof v === 'string' ? v : '')}
|
||||
>
|
||||
{field.type === 'image' ? (
|
||||
<ConfigImageField bizType="footer" />
|
||||
@@ -214,34 +157,25 @@ function renderField(
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default function SystemSettingsPage() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm<Record<string, string>>();
|
||||
|
||||
const [meta, setMeta] = useState<SystemConfigFormResponse | null>(null);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [syncing, setSyncing] = useState(false);
|
||||
|
||||
const [dirty, setDirty] = useState(false);
|
||||
const dirtyRef = useRef(false);
|
||||
const bypassLeaveRef = useRef(false);
|
||||
const mockSmsEnabled = Form.useWatch('MOCK_SMS', form) === 'true';
|
||||
|
||||
|
||||
dirtyRef.current = dirty;
|
||||
|
||||
async function load(silent = false) {
|
||||
|
||||
if (!silent) setLoading(true);
|
||||
|
||||
try {
|
||||
|
||||
const data = await request<SystemConfigFormResponse>('/admin/system-config');
|
||||
|
||||
if (silent) {
|
||||
// 仅刷新 Mock 验证码列表，避免轮询用服务端值覆盖未保存的表单（含 MOCK_SMS 开关）
|
||||
setMeta((prev) =>
|
||||
prev
|
||||
? { ...prev, mockSmsCodes: data.mockSmsCodes, updatedAt: data.updatedAt }
|
||||
@@ -249,300 +183,221 @@ export default function SystemSettingsPage() {
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
setMeta(data);
|
||||
|
||||
form.setFieldsValue(data.values);
|
||||
|
||||
setDirty(false);
|
||||
} catch (e) {
|
||||
|
||||
if (!silent) message.error(e instanceof Error ? e.message : '加载失败');
|
||||
|
||||
} finally {
|
||||
|
||||
if (!silent) setLoading(false);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
void load();
|
||||
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
// 以表单开关为准展示验证码；轮询只刷列表，不回写表单
|
||||
if (!mockSmsEnabled) return;
|
||||
|
||||
const timer = window.setInterval(() => void load(true), 5000);
|
||||
|
||||
return () => window.clearInterval(timer);
|
||||
|
||||
}, [mockSmsEnabled]);
|
||||
|
||||
useEffect(() => {
|
||||
const onBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
if (!dirtyRef.current) return;
|
||||
e.preventDefault();
|
||||
e.returnValue = '';
|
||||
};
|
||||
window.addEventListener('beforeunload', onBeforeUnload);
|
||||
return () => window.removeEventListener('beforeunload', onBeforeUnload);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onDocClick = (e: MouseEvent) => {
|
||||
if (!dirtyRef.current || bypassLeaveRef.current) return;
|
||||
const target = e.target as HTMLElement | null;
|
||||
const anchor = target?.closest?.('a');
|
||||
if (!anchor || !(anchor instanceof HTMLAnchorElement)) return;
|
||||
if (anchor.target === '_blank' || anchor.hasAttribute('download')) return;
|
||||
const url = new URL(anchor.href, window.location.href);
|
||||
if (url.origin !== window.location.origin) return;
|
||||
if (url.pathname === window.location.pathname && url.search === window.location.search) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
Modal.confirm({
|
||||
title: '有未保存的更改',
|
||||
content: '离开前请先保存，否则更改将丢失。',
|
||||
okText: '仍要离开',
|
||||
cancelText: '留下',
|
||||
onOk: () => {
|
||||
bypassLeaveRef.current = true;
|
||||
setDirty(false);
|
||||
navigate(`${url.pathname}${url.search}${url.hash}`);
|
||||
window.setTimeout(() => {
|
||||
bypassLeaveRef.current = false;
|
||||
}, 0);
|
||||
},
|
||||
});
|
||||
};
|
||||
document.addEventListener('click', onDocClick, true);
|
||||
return () => document.removeEventListener('click', onDocClick, true);
|
||||
}, [navigate]);
|
||||
|
||||
const collapseItems = useMemo(() => {
|
||||
|
||||
if (!meta) return [];
|
||||
|
||||
return meta.groups.map((group) => ({
|
||||
|
||||
key: group.key,
|
||||
|
||||
label: group.label,
|
||||
|
||||
forceRender: true,
|
||||
children: (
|
||||
|
||||
<div style={{ maxWidth: 720 }}>
|
||||
|
||||
{meta.fields
|
||||
|
||||
.filter((f) => f.group === group.key)
|
||||
|
||||
.map((f) =>
|
||||
|
||||
renderField(
|
||||
|
||||
f,
|
||||
|
||||
meta.configuredSecrets,
|
||||
|
||||
f.key === 'MOCK_SMS' && mockSmsEnabled ? (
|
||||
|
||||
<MockSmsCodePanel codes={meta.mockSmsCodes ?? []} loading={loading} />
|
||||
|
||||
) : undefined,
|
||||
|
||||
),
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
|
||||
),
|
||||
|
||||
}));
|
||||
|
||||
}, [meta, mockSmsEnabled, loading]);
|
||||
|
||||
|
||||
|
||||
async function onSave() {
|
||||
|
||||
const values = await form.validateFields();
|
||||
|
||||
await form.validateFields();
|
||||
const values = form.getFieldsValue(true);
|
||||
const payload: Record<string, string> = {};
|
||||
|
||||
for (const [k, v] of Object.entries(values)) {
|
||||
|
||||
payload[k] = v === undefined || v === null ? '' : String(v);
|
||||
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
|
||||
try {
|
||||
|
||||
const res = await request<{ updatedKeys: string[]; requiresRestartKeys: string[] }>(
|
||||
|
||||
'/admin/system-config',
|
||||
|
||||
{ method: 'PUT', body: JSON.stringify({ values: payload }) },
|
||||
|
||||
);
|
||||
|
||||
message.success(`已保存 ${res.updatedKeys.length} 项`);
|
||||
|
||||
if (res.requiresRestartKeys.length) {
|
||||
|
||||
message.warning(`以下配置需重启 API 后生效：${res.requiresRestartKeys.join(', ')}`);
|
||||
|
||||
}
|
||||
|
||||
setDirty(false);
|
||||
await load();
|
||||
|
||||
} catch (e) {
|
||||
|
||||
message.error(e instanceof Error ? e.message : '保存失败');
|
||||
|
||||
} finally {
|
||||
|
||||
setSaving(false);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function onSyncEnv() {
|
||||
|
||||
setSyncing(true);
|
||||
|
||||
try {
|
||||
|
||||
const res = await request<{ message: string; envFilePath: string }>(
|
||||
|
||||
'/admin/system-config/sync-env',
|
||||
|
||||
{ method: 'POST' },
|
||||
|
||||
);
|
||||
|
||||
message.success(res.message || '已同步到 env 文件');
|
||||
|
||||
} catch (e) {
|
||||
|
||||
message.error(e instanceof Error ? e.message : '同步失败');
|
||||
|
||||
} finally {
|
||||
|
||||
setSyncing(false);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function onImportEnv() {
|
||||
|
||||
try {
|
||||
|
||||
const res = await request<{ imported: number }>('/admin/system-config/import-env', {
|
||||
|
||||
method: 'POST',
|
||||
|
||||
});
|
||||
|
||||
message.success(`已从当前进程环境导入 ${res.imported} 项`);
|
||||
|
||||
await load();
|
||||
|
||||
} catch (e) {
|
||||
|
||||
message.error(e instanceof Error ? e.message : '导入失败');
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
|
||||
<div style={{ paddingBottom: 88 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
|
||||
|
||||
<div>
|
||||
|
||||
<Typography.Title level={4} style={{ margin: 0 }}>
|
||||
|
||||
系统设置
|
||||
|
||||
</Typography.Title>
|
||||
|
||||
<Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 8 }}>
|
||||
|
||||
配置存于 <code>system_config</code> 表；保存后写入进程环境。可同步到{' '}
|
||||
|
||||
<code>{meta?.envFilePath ?? '.env'}</code> 以便部署持久化。
|
||||
|
||||
</Typography.Paragraph>
|
||||
|
||||
</div>
|
||||
|
||||
<Space>
|
||||
|
||||
<Button onClick={() => void onImportEnv()}>从环境导入</Button>
|
||||
|
||||
<Button loading={syncing} onClick={() => void onSyncEnv()}>
|
||||
|
||||
同步到 env 文件
|
||||
|
||||
</Button>
|
||||
|
||||
<Button type="primary" loading={saving} onClick={() => void onSave()}>
|
||||
|
||||
保存
|
||||
|
||||
</Button>
|
||||
|
||||
</Space>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Alert
|
||||
|
||||
type="info"
|
||||
|
||||
showIcon
|
||||
|
||||
style={{ marginBottom: 16 }}
|
||||
|
||||
message="生效说明"
|
||||
|
||||
description={
|
||||
|
||||
<ul style={{ margin: '8px 0 0', paddingLeft: 20 }}>
|
||||
|
||||
<li>
|
||||
|
||||
<Tag color="green">即时</Tag>：保存后写入 <code>process.env</code>，Mock 开关、短信模板等可立即生效。
|
||||
|
||||
</li>
|
||||
|
||||
<li>
|
||||
|
||||
<Tag color="orange">需重启</Tag>：微信/OSS 密钥等集成凭证变更后，<strong>建议重启 API 进程</strong>。
|
||||
|
||||
</li>
|
||||
|
||||
<li>OSS 始终走阿里云配置；凭证缺失时上传接口将直接报错。</li>
|
||||
|
||||
<li>修改后请点击右下角「保存」；未保存离开页面将提示确认。</li>
|
||||
</ul>
|
||||
|
||||
}
|
||||
|
||||
/>
|
||||
|
||||
|
||||
|
||||
<Card loading={loading}>
|
||||
|
||||
<Form form={form} layout="vertical">
|
||||
|
||||
<Form form={form} layout="vertical" onValuesChange={() => setDirty(true)}>
|
||||
<Collapse defaultActiveKey={meta?.groups.map((g) => g.key)} items={collapseItems} />
|
||||
|
||||
</Form>
|
||||
|
||||
{meta?.updatedAt ? (
|
||||
|
||||
<Typography.Text type="secondary" style={{ display: 'block', marginTop: 16 }}>
|
||||
|
||||
最近更新：{new Date(meta.updatedAt).toLocaleString()}
|
||||
|
||||
</Typography.Text>
|
||||
|
||||
) : null}
|
||||
|
||||
</Card>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
right: 32,
|
||||
bottom: 32,
|
||||
zIndex: 1000,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-end',
|
||||
gap: 8,
|
||||
}}
|
||||
>
|
||||
{dirty ? <Tag color="orange">有未保存更改</Tag> : null}
|
||||
<Button
|
||||
type="primary"
|
||||
size="large"
|
||||
loading={saving}
|
||||
onClick={() => void onSave()}
|
||||
style={{
|
||||
minWidth: 120,
|
||||
boxShadow: '0 6px 16px rgba(0,0,0,0.18)',
|
||||
}}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, type CSSProperties } from 'react';
|
||||
import { useOutletContext } from 'react-router-dom';
|
||||
import {
|
||||
Button,
|
||||
@@ -25,6 +25,15 @@ import { request } from '../../lib/api';
|
||||
import { fmtTime } from '../../lib/constants';
|
||||
import type { PromoCodeDetailContext } from './PromoCodeDetailLayout';
|
||||
|
||||
const descLabelStyle: CSSProperties = {
|
||||
whiteSpace: 'nowrap',
|
||||
width: 108,
|
||||
};
|
||||
|
||||
const descContentStyle: CSSProperties = {
|
||||
wordBreak: 'break-all',
|
||||
};
|
||||
|
||||
async function downloadQrcode(url: string, filename: string) {
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
@@ -72,49 +81,25 @@ export default function PromoCodeDetailPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col xs={24} lg={8}>
|
||||
<Card title="小程序码" size="small">
|
||||
{detail.qrcodeUrl ? (
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<img
|
||||
src={detail.qrcodeUrl}
|
||||
alt="推广小程序码"
|
||||
style={{ width: 200, height: 200, marginBottom: 12 }}
|
||||
/>
|
||||
<Typography.Paragraph type="secondary" style={{ marginBottom: 12, fontSize: 12 }}>
|
||||
微信扫码进入小程序（scene=活动 ID {detail.id}）
|
||||
</Typography.Paragraph>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button
|
||||
block
|
||||
onClick={() => void downloadQrcode(detail.qrcodeUrl!, `${detail.code}-wxacode.png`)}
|
||||
>
|
||||
下载小程序码
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
) : (
|
||||
<Typography.Text type="secondary">暂无小程序码</Typography.Text>
|
||||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col xs={24} lg={16}>
|
||||
<Row gutter={[16, 16]} align="top">
|
||||
<Col flex="1 1 480px" style={{ minWidth: 0 }}>
|
||||
<Card
|
||||
title="基础信息"
|
||||
size="small"
|
||||
styles={{ body: { paddingTop: 12 } }}
|
||||
extra={(
|
||||
<Space>
|
||||
<Button size="small" onClick={() => {
|
||||
editForm.setFieldsValue({
|
||||
name: detail.name,
|
||||
scene: detail.scene,
|
||||
remark: detail.remark,
|
||||
ownerUserId: detail.ownerUser?.id,
|
||||
});
|
||||
setEditOpen(true);
|
||||
}}
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
editForm.setFieldsValue({
|
||||
name: detail.name,
|
||||
scene: detail.scene,
|
||||
remark: detail.remark,
|
||||
ownerUserId: detail.ownerUser?.id,
|
||||
});
|
||||
setEditOpen(true);
|
||||
}}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
@@ -138,7 +123,18 @@ export default function PromoCodeDetailPage() {
|
||||
</Space>
|
||||
)}
|
||||
>
|
||||
<Descriptions column={{ xs: 1, sm: 2 }} bordered size="small">
|
||||
<Descriptions
|
||||
column={2}
|
||||
bordered
|
||||
size="small"
|
||||
layout="horizontal"
|
||||
labelStyle={descLabelStyle}
|
||||
contentStyle={descContentStyle}
|
||||
styles={{
|
||||
label: descLabelStyle,
|
||||
content: descContentStyle,
|
||||
}}
|
||||
>
|
||||
<Descriptions.Item label="名称">{detail.name}</Descriptions.Item>
|
||||
<Descriptions.Item label="码值">{detail.code}</Descriptions.Item>
|
||||
<Descriptions.Item label="场景">
|
||||
@@ -147,30 +143,67 @@ export default function PromoCodeDetailPage() {
|
||||
<Descriptions.Item label="状态">
|
||||
{PROMO_CODE_STATUS_LABELS[detail.status] || detail.status}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="活动 ID" span={2}>
|
||||
<Typography.Text copyable={{ text: String(detail.id) }}>
|
||||
{detail.id}（小程序码 scene）
|
||||
<Descriptions.Item label="活动 ID">
|
||||
<Typography.Text copyable={{ text: String(detail.id) }} style={{ whiteSpace: 'nowrap' }}>
|
||||
{detail.id}
|
||||
</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="二维码 ID" span={2}>
|
||||
<Typography.Text copyable={{ text: detail.qrcodeId }}>{detail.qrcodeId}</Typography.Text>
|
||||
<Descriptions.Item label="二维码 ID">
|
||||
<Typography.Text copyable={{ text: detail.qrcodeId }} style={{ whiteSpace: 'nowrap' }}>
|
||||
{detail.qrcodeId}
|
||||
</Typography.Text>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="小程序码 OSS" span={2}>
|
||||
{detail.qrcodeUrl ? (
|
||||
<Typography.Text copyable={{ text: detail.qrcodeUrl }} ellipsis>
|
||||
<Typography.Text copyable={{ text: detail.qrcodeUrl }} ellipsis style={{ maxWidth: '100%' }}>
|
||||
{detail.qrcodeUrl}
|
||||
</Typography.Text>
|
||||
) : '—'}
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="渠道负责人">
|
||||
{detail.ownerUser?.userNo || detail.ownerUser?.phone || '—'}
|
||||
<span style={{ whiteSpace: 'nowrap' }}>
|
||||
{detail.ownerUser?.userNo || detail.ownerUser?.phone || '—'}
|
||||
</span>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="备注">{detail.remark || '—'}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">{fmtTime(detail.createdAt)}</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">{fmtTime(detail.updatedAt)}</Descriptions.Item>
|
||||
<Descriptions.Item label="创建时间">
|
||||
<span style={{ whiteSpace: 'nowrap' }}>{fmtTime(detail.createdAt)}</span>
|
||||
</Descriptions.Item>
|
||||
<Descriptions.Item label="更新时间">
|
||||
<span style={{ whiteSpace: 'nowrap' }}>{fmtTime(detail.updatedAt)}</span>
|
||||
</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col flex="0 0 220px">
|
||||
<Card title="小程序码" size="small" styles={{ body: { textAlign: 'center', padding: 12 } }}>
|
||||
{detail.qrcodeUrl ? (
|
||||
<>
|
||||
<img
|
||||
src={detail.qrcodeUrl}
|
||||
alt="推广小程序码"
|
||||
style={{ width: 168, height: 168, display: 'block', margin: '0 auto 8px' }}
|
||||
/>
|
||||
<Typography.Paragraph
|
||||
type="secondary"
|
||||
style={{ marginBottom: 8, fontSize: 12, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
scene={detail.id}
|
||||
</Typography.Paragraph>
|
||||
<Button
|
||||
block
|
||||
size="small"
|
||||
onClick={() => void downloadQrcode(detail.qrcodeUrl!, `${detail.code}-wxacode.png`)}
|
||||
>
|
||||
下载小程序码
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Typography.Text type="secondary">暂无小程序码</Typography.Text>
|
||||
)}
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16} style={{ marginTop: 16 }}>
|
||||
|
||||
@@ -74,7 +74,7 @@ export const SYSTEM_CONFIG_FIELDS: SystemConfigFieldMeta[] = [
|
||||
group: G.wechat_mini,
|
||||
type: 'imageList',
|
||||
requiresRestart: false,
|
||||
description: '小程序商品首页顶部轮播，建议比例 15:8，最多 8 张',
|
||||
description: '小程序商品首页顶部轮播，建议比例 15:8，最多 8 张；上传后需点击右上角「保存」',
|
||||
},
|
||||
{
|
||||
key: 'MINI_HOME_FOOTER_URL',
|
||||
@@ -82,7 +82,7 @@ export const SYSTEM_CONFIG_FIELDS: SystemConfigFieldMeta[] = [
|
||||
group: G.wechat_mini,
|
||||
type: 'image',
|
||||
requiresRestart: false,
|
||||
description: '小程序商品首页底部 footer，建议比例 15:4',
|
||||
description: '小程序商品首页底部 footer，建议比例 15:4；上传后需点击右上角「保存」',
|
||||
},
|
||||
|
||||
{ key: 'OSS_ACCESS_KEY_ID', label: 'OSS AccessKey ID', group: G.oss, type: 'password', secret: true, requiresRestart: true },
|
||||
|
||||
@@ -5,7 +5,7 @@ import type {
|
||||
SystemConfigSyncResult,
|
||||
SystemConfigUpdateRequest,
|
||||
} from '@dukang/shared-types';
|
||||
import { loadAppConfig } from '@dukang/shared-types';
|
||||
import { loadAppConfig, parseMiniHomeBanners, serializeMiniHomeBanners } from '@dukang/shared-types';
|
||||
import { PrismaService } from '../prisma/prisma.module';
|
||||
import {
|
||||
SYSTEM_CONFIG_FIELDS,
|
||||
@@ -209,6 +209,12 @@ export class SystemConfigService implements OnModuleInit {
|
||||
if (meta.type === 'boolean') {
|
||||
return raw === 'true' || raw === '1' ? 'true' : 'false';
|
||||
}
|
||||
if (meta.type === 'imageList') {
|
||||
return serializeMiniHomeBanners(parseMiniHomeBanners(raw));
|
||||
}
|
||||
if (meta.type === 'image') {
|
||||
return raw.trim();
|
||||
}
|
||||
if (meta.key === 'WX_MCH_PRIVATE_KEY' || meta.key === 'WX_PLATFORM_CERT') {
|
||||
let value = raw.trim();
|
||||
if (
|
||||
|
||||
Reference in New Issue
Block a user