feat(mini-user): add configurable home banner and footer

HQ system settings WeChat mini config with OSS swiper/footer uploads; client-config exposes miniHome. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-23 12:15:15 +08:00
parent cebeefdb22
commit 479de04f7c
8 changed files with 292 additions and 66 deletions
@@ -0,0 +1,114 @@
+import { Button, Space } from 'antd';
+import { ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  parseMiniHomeBanners,
+  serializeMiniHomeBanners,
+} from '@dukang/shared-types';
+import OssUpload from './OssUpload';
+
+const MAX_BANNERS = 8;
+
+/** Ant Form 控件：单图 URL 字符串（默认 OSS 路径 footer） */
+export function ConfigImageField({
+  value,
+  onChange,
+  bizType = 'footer',
+}: {
+  value?: string;
+  onChange?: (url: string) => void;
+  bizType?: string;
+}) {
+  return (
+    <OssUpload
+      bizType={bizType}
+      mediaType="IMAGE"
+      value={value}
+      onChange={onChange}
+      placeholder="上传或粘贴图片 URL"
+    />
+  );
+}
+
+/** Ant Form 控件：多图 JSON 字符串（默认 OSS 路径 swiper） */
+export function ConfigImageListField({
+  value,
+  onChange,
+  bizType = 'swiper',
+}: {
+  value?: string;
+  onChange?: (json: string) => void;
+  bizType?: string;
+}) {
+  const urls = parseMiniHomeBanners(value);
+
+  function commit(next: string[]) {
+    onChange?.(serializeMiniHomeBanners(next));
+  }
+
+  function updateAt(index: number, url: string) {
+    const next = [...urls];
+    next[index] = url;
+    commit(next);
+  }
+
+  function removeAt(index: number) {
+    commit(urls.filter((_, i) => i !== index));
+  }
+
+  function move(index: number, delta: number) {
+    const target = index + delta;
+    if (target < 0 || target >= urls.length) return;
+    const next = [...urls];
+    const tmp = next[index];
+    next[index] = next[target];
+    next[target] = tmp;
+    commit(next);
+  }
+
+  function add() {
+    if (urls.length >= MAX_BANNERS) return;
+    commit([...urls, '']);
+  }
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }} size="middle">
+      {urls.map((url, index) => (
+        <Space key={`${index}-${url || 'empty'}`} align="start" style={{ width: '100%' }} wrap>
+          <div style={{ flex: 1, minWidth: 240 }}>
+            <OssUpload
+              bizType={bizType}
+              mediaType="IMAGE"
+              value={url}
+              onChange={(u) => updateAt(index, u)}
+              placeholder="上传或粘贴图片 URL"
+            />
+          </div>
+          <Space>
+            <Button
+              type="text"
+              icon={<ArrowUpOutlined />}
+              disabled={index === 0}
+              onClick={() => move(index, -1)}
+            />
+            <Button
+              type="text"
+              icon={<ArrowDownOutlined />}
+              disabled={index === urls.length - 1}
+              onClick={() => move(index, 1)}
+            />
+            <Button type="text" danger icon={<DeleteOutlined />} onClick={() => removeAt(index)} />
+          </Space>
+        </Space>
+      ))}
+      <Button
+        type="dashed"
+        block
+        icon={<PlusOutlined />}
+        disabled={urls.length >= MAX_BANNERS}
+        onClick={add}
+      >
+        添加轮播图（{urls.length}/{MAX_BANNERS}）
+      </Button>
+    </Space>
+  );
+}
@@ -31,10 +31,8 @@ import {
 } 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;

@@ -131,123 +129,89 @@ function renderField(
  const isConfiguredSecret = field.secret && configuredSecrets.includes(field.key);

  if (field.type === 'boolean') {
-
    return (
-
      <div key={field.key}>
-
        <Form.Item
-
          name={field.key}
-
          label={
-
            <Space size={4}>
-
              <span>{field.label}</span>
-
              <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
-
                {field.key}
-
              </Typography.Text>
-
              {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
-
            </Space>
-
          }
-
          tooltip={field.description}
-
          valuePropName="checked"
-
          getValueFromEvent={(checked: boolean) => (checked ? 'true' : 'false')}
-
          getValueProps={(v: string) => ({ checked: v === 'true' || v === '1' })}
-
        >
-
          <Switch />
-
        </Form.Item>
-
        {extra}
-
      </div>
-
    );
-
  }

-
+  if (field.type === 'image' || field.type === 'imageList') {
+    return (
+      <Form.Item
+        key={field.key}
+        name={field.key}
+        label={
+          <Space size={4} wrap>
+            <span>{field.label}</span>
+            <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
+              {field.key}
+            </Typography.Text>
+            {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
+          </Space>
+        }
+        tooltip={field.description}
+      >
+        {field.type === 'image' ? (
+          <ConfigImageField bizType="footer" />
+        ) : (
+          <ConfigImageListField bizType="swiper" />
+        )}
+      </Form.Item>
+    );
+  }

  const input =
-
    field.type === 'textarea' ? (
-
      <TextArea rows={3} placeholder={field.placeholder} />
-
    ) : field.type === 'number' ? (
-
      <InputNumber style={{ width: '100%' }} placeholder={field.placeholder} />
-
    ) : field.secret ? (
-
      <Input.Password
-
        placeholder={isConfiguredSecret ? '已配置，留空则不修改' : field.placeholder}
-
        autoComplete="new-password"
-
      />
-
    ) : (
-
      <Input placeholder={field.placeholder} />
-
    );

-
-
  return (
-
    <Form.Item
-
      key={field.key}
-
      name={field.key}
-
      label={
-
        <Space size={4} wrap>
-
          <span>{field.label}</span>
-
          <Typography.Text type="secondary" code style={{ fontSize: 11 }}>
-
            {field.key}
-
          </Typography.Text>
-
          {field.requiresRestart ? <Tag color="orange">需重启</Tag> : <Tag color="green">即时</Tag>}
-
          {isConfiguredSecret ? <Tag>已配置</Tag> : null}
-
        </Space>
-
      }
-
      tooltip={field.description}
-
    >
-
      {input}
-
    </Form.Item>
-
  );
-
 }