feat(admin,partner): Tencent map location picker and expose LBS key

Store create/edit on HQ and partner can pick coords via Tencent locpicker; client-config exposes TENCENT_LBS_KEY; seed empty system settings from env. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-27 23:19:40 +08:00
parent d36fe13bcd
commit 317f910f3c
13 changed files with 571 additions and 52 deletions
@@ -0,0 +1,115 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Modal, Spin, Typography, message } from 'antd';
+import type { ClientRuntimeConfig } from '@dukang/shared-types';
+import { request } from '../lib/api';
+import {
+  buildTencentLocPickerUrl,
+  parseTencentLocPickerMessage,
+  type TencentPickedLocation,
+} from '../lib/tencentLocPicker';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onPick: (loc: TencentPickedLocation) => void;
+  latitude?: number | null;
+  longitude?: number | null;
+};
+
+let cachedKey: string | null | undefined;
+
+async function loadTencentLbsKey(): Promise<string> {
+  if (cachedKey) return cachedKey;
+  const cfg = await request<ClientRuntimeConfig>('/common/client-config');
+  const key = (cfg.tencentLbsKey || '').trim();
+  if (!key) {
+    throw new Error('未配置腾讯位置服务 Key，请在系统设置中填写 TENCENT_LBS_KEY');
+  }
+  cachedKey = key;
+  return key;
+}
+
+export default function TencentLocPickerModal({
+  open,
+  onClose,
+  onPick,
+  latitude,
+  longitude,
+}: Props) {
+  const [key, setKey] = useState<string | null>(cachedKey ?? null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setError('');
+    if (key) return;
+    setLoading(true);
+    void loadTencentLbsKey()
+      .then((k) => {
+        if (!cancelled) setKey(k);
+      })
+      .catch((e) => {
+        if (!cancelled) {
+          const msg = e instanceof Error ? e.message : '加载地图配置失败';
+          setError(msg);
+          message.error(msg);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, key]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onMessage(event: MessageEvent) {
+      const picked = parseTencentLocPickerMessage(event.data);
+      if (!picked) return;
+      onPick(picked);
+      onClose();
+    }
+    window.addEventListener('message', onMessage);
+    return () => window.removeEventListener('message', onMessage);
+  }, [open, onPick, onClose]);
+
+  const src = useMemo(() => {
+    if (!key) return '';
+    return buildTencentLocPickerUrl(key, {
+      latitude: latitude != null ? Number(latitude) : undefined,
+      longitude: longitude != null ? Number(longitude) : undefined,
+    });
+  }, [key, latitude, longitude]);
+
+  return (
+    <Modal
+      title="腾讯地图选点"
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={720}
+      destroyOnClose
+      styles={{ body: { padding: 0, height: 560 } }}
+    >
+      {loading ? (
+        <div style={{ height: 560, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Spin tip="加载地图…" />
+        </div>
+      ) : error ? (
+        <div style={{ padding: 24 }}>
+          <Typography.Text type="danger">{error}</Typography.Text>
+        </div>
+      ) : src ? (
+        <iframe
+          title="腾讯地图选点"
+          src={src}
+          style={{ width: '100%', height: 560, border: 0, display: 'block' }}
+        />
+      ) : null}
+    </Modal>
+  );
+}