webadmin系统设置

apps/admin-web/src/App.tsx

@@ -36,6 +36,7 @@ import StoreLogsPage from './pages/StoreLogsPage';
 import PartnerLogsPage from './pages/PartnerLogsPage';
 import WechatBindingsPage from './pages/WechatBindingsPage';
 import HqPermissionsPage from './pages/HqPermissionsPage';
+import SystemSettingsPage from './pages/SystemSettingsPage';
 
 function RequireAuth({ children }: { children: React.ReactNode }) {
   if (!getToken()) return <Navigate to="/login" replace />;
@@ -90,6 +91,7 @@ export default function App() {
         <Route path="/deliveries" element={<DeliveriesPage />} />
         <Route path="/deliveries/xiaofeixia" element={<XiaofeixiaTestPage />} />
         <Route path="/hq-permissions" element={<HqPermissionsPage />} />
+        <Route path="/system-settings" element={<SystemSettingsPage />} />
         <Route path="/hq-accounts" element={<HqAccountsPage />} />
       </Route>
       <Route path="*" element={<Navigate to="/" replace />} />

apps/admin-web/src/components/OssUpload.tsx

@@ -45,11 +45,7 @@ export default function OssUpload({
       const result = await uploadFileToOss(raw, { bizType, mediaType });
       onChange?.(result.url);
       onUploaded?.(result);
-      if (result.mock) {
-        message.info('当前为 Mock OSS，已使用占位 URL');
-      } else {
-        message.success('上传成功');
-      }
+      message.success('上传成功');
       onSuccess?.(result);
     } catch (e) {
       const err = e instanceof Error ? e : new Error('上传失败');

apps/admin-web/src/layouts/AdminLayout.tsx

@@ -15,6 +15,7 @@ import {
   CloudUploadOutlined,
   FileTextOutlined,
   LockOutlined,
+  SettingOutlined,
 } from '@ant-design/icons';
 import { clearAuth, request, type HqProfile } from '../lib/api';
 import { bindAdminEllipsisTitle } from '../lib/ellipsis-title';
@@ -94,6 +95,7 @@ const MENU_ITEMS: MenuProps['items'] = [
     ],
   },
   { key: '/hq-permissions', icon: <LockOutlined />, label: '权限分配' },
+  { key: '/system-settings', icon: <SettingOutlined />, label: '系统设置' },
   { key: '/hq-accounts', icon: <SafetyOutlined />, label: 'HQ账户' },
 ];
 

apps/admin-web/src/pages/SystemSettingsPage.tsx

@@ -0,0 +1,573 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+
+import {
+
+  Alert,
+
+  Button,
+
+  Card,
+
+  Collapse,
+
+  Form,
+
+  Input,
+
+  InputNumber,
+
+  Space,
+
+  Switch,
+
+  Table,
+
+  Tag,
+
+  Typography,
+
+  message,
+
+} from 'antd';
+
+import type { MockSmsCodeItem, SystemConfigFieldMeta, SystemConfigFormResponse } from '@dukang/shared-types';
+
+import { request } from '../lib/api';
+
+
+
+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') {
+
+    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>
+
+    );
+
+  }
+
+
+
+  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>
+
+  );
+
+}
+
+
+
+export default function SystemSettingsPage() {
+
+  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 mockSmsEnabled = Form.useWatch('MOCK_SMS', form) === 'true';
+
+
+
+  async function load(silent = false) {
+
+    if (!silent) setLoading(true);
+
+    try {
+
+      const data = await request<SystemConfigFormResponse>('/admin/system-config');
+
+      setMeta(data);
+
+      form.setFieldsValue(data.values);
+
+    } 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]);
+
+
+
+  const collapseItems = useMemo(() => {
+
+    if (!meta) return [];
+
+    return meta.groups.map((group) => ({
+
+      key: group.key,
+
+      label: group.label,
+
+      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();
+
+    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(', ')}`);
+
+      }
+
+      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={{ 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>
+
+          </ul>
+
+        }
+
+      />
+
+
+
+      <Card loading={loading}>
+
+        <Form form={form} layout="vertical">
+
+          <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>
+
+  );
+
+}
+
+