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,133 @@
+import { useEffect, useMemo, useState } from 'react';
+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>('PARTNER_H5', '/common/client-config', {
+    silent: true,
+  });
+  const key = (cfg.tencentLbsKey || '').trim();
+  if (!key) {
+    throw new Error('未配置腾讯位置服务 Key，请联系管理员在系统设置中配置');
+  }
+  cachedKey = key;
+  return key;
+}
+
+export default function TencentLocPickerOverlay({
+  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) setError(e instanceof Error ? e.message : '加载地图配置失败');
+      })
+      .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]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 1000,
+        background: '#fff',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '12px 16px',
+          borderBottom: '1px solid rgba(0,0,0,0.06)',
+          flexShrink: 0,
+        }}
+      >
+        <button type="button" className="partner-btn-outline" style={{ padding: '6px 12px' }} onClick={onClose}>
+          关闭
+        </button>
+        <span style={{ fontWeight: 600 }}>地图选点</span>
+        <span style={{ width: 52 }} />
+      </div>
+      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
+        {loading ? (
+          <p className="label-md text-muted" style={{ padding: 24, textAlign: 'center' }}>
+            加载地图…
+          </p>
+        ) : error ? (
+          <p className="label-md" style={{ padding: 24, color: 'var(--color-heritage-red, #a61d24)' }}>
+            {error}
+          </p>
+        ) : src ? (
+          <iframe
+            title="腾讯地图选点"
+            src={src}
+            style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,59 @@
+export type TencentPickedLocation = {
+  latitude: number;
+  longitude: number;
+  address?: string;
+  name?: string;
+  cityname?: string;
+};
+
+type LocPickerMessage = {
+  module?: string;
+  latlng?: { lat?: number; lng?: number };
+  poiaddress?: string;
+  poiname?: string;
+  cityname?: string;
+};
+
+const REFERER = 'dukang-haoke';
+
+export function buildTencentLocPickerUrl(
+  key: string,
+  options?: { latitude?: number; longitude?: number },
+): string {
+  const params = new URLSearchParams({
+    search: '1',
+    type: '1',
+    key,
+    referer: REFERER,
+    policy: '1',
+  });
+  const lat = options?.latitude;
+  const lng = options?.longitude;
+  if (
+    lat != null &&
+    lng != null &&
+    Number.isFinite(lat) &&
+    Number.isFinite(lng) &&
+    !(lat === 0 && lng === 0)
+  ) {
+    params.set('coord', `${lat},${lng}`);
+    params.set('coordtype', '5');
+  }
+  return `https://apis.map.qq.com/tools/locpicker?${params.toString()}`;
+}
+
+export function parseTencentLocPickerMessage(data: unknown): TencentPickedLocation | null {
+  const loc = data as LocPickerMessage;
+  if (!loc || loc.module !== 'locationPicker') return null;
+  const lat = Number(loc.latlng?.lat);
+  const lng = Number(loc.latlng?.lng);
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
+  if (!loc.poiname && !loc.poiaddress) return null;
+  return {
+    latitude: lat,
+    longitude: lng,
+    address: loc.poiaddress?.trim() || undefined,
+    name: loc.poiname?.trim() || undefined,
+    cityname: loc.cityname?.trim() || undefined,
+  };
+}
@@ -19,6 +19,8 @@ import { fetchPartnerCities, type OpenCityOption } from '../lib/upload';

 import { usePartnerSession } from '../contexts/PartnerSessionContext';

+import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
+
 import {

  clearAllStoreDrafts,
@@ -106,6 +108,8 @@ export default function StoreCreatePage() {

  const [locating, setLocating] = useState(false);

+  const [mapPickerOpen, setMapPickerOpen] = useState(false);
+
  const draftSaveDisabledRef = useRef(false);

  function reportFormError(message: string) {
@@ -777,10 +781,18 @@ export default function StoreCreatePage() {
                >
                  {locating ? '定位中…' : '获取当前位置'}
                </button>
+                <button
+                  type="button"
+                  className="partner-btn-outline"
+                  style={{ padding: '8px 12px', fontSize: 13 }}
+                  onClick={() => setMapPickerOpen(true)}
+                >
+                  地图选点
+                </button>
                <span className="label-md text-muted">
                  {formatStoreCoords(form.latitude, form.longitude)
                    ? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
-                    : '未定位（提交后可按地址自动解析）'}
+                    : '未定位（可定位或地图选点）'}
                </span>
              </div>

@@ -1278,6 +1290,23 @@ export default function StoreCreatePage() {

      </footer>

+      <TencentLocPickerOverlay
+        open={mapPickerOpen}
+        onClose={() => setMapPickerOpen(false)}
+        latitude={form.latitude ? Number(form.latitude) : undefined}
+        longitude={form.longitude ? Number(form.longitude) : undefined}
+        onPick={(loc) => {
+          patchForm({
+            latitude: String(loc.latitude),
+            longitude: String(loc.longitude),
+            ...(loc.address && !form.address.trim() ? { address: loc.address } : {}),
+          });
+          toastSuccess(
+            `已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
+          );
+        }}
+      />
+
    </div>

  );
@@ -8,6 +8,7 @@ import { canManagePartnerStore } from '../lib/partnerAccess';
 import { normalizeStringArray, patchEnvPhotoAt } from '../lib/storeDraft';
 import { formatStoreCoords, locateStorePosition } from '../lib/storeLocate';
 import OssUploadField from '../components/OssUploadField';
+import TencentLocPickerOverlay from '../components/TencentLocPickerOverlay';
 import {
  canPartnerOpenStore,
  storeAuditLabel,
@@ -54,6 +55,7 @@ export default function StoreDetailPage() {
  const [saving, setSaving] = useState(false);
  const [mediaSaving, setMediaSaving] = useState(false);
  const [locating, setLocating] = useState(false);
+  const [mapPickerOpen, setMapPickerOpen] = useState(false);
  const [actionError, setActionError] = useState('');
  const [closeConfirmOpen, setCloseConfirmOpen] = useState(false);

@@ -367,6 +369,14 @@ export default function StoreDetailPage() {
                >
                  {locating ? '定位中…' : '获取当前位置'}
                </button>
+                <button
+                  type="button"
+                  className="partner-btn-outline"
+                  style={{ padding: '8px 12px', fontSize: 13 }}
+                  onClick={() => setMapPickerOpen(true)}
+                >
+                  地图选点
+                </button>
                <span className="label-md text-muted">
                  {formatStoreCoords(form.latitude, form.longitude)
                    ? `坐标：${formatStoreCoords(form.latitude, form.longitude)}`
@@ -480,6 +490,24 @@ export default function StoreDetailPage() {
          </div>
        </div>
      )}
+
+      <TencentLocPickerOverlay
+        open={mapPickerOpen}
+        onClose={() => setMapPickerOpen(false)}
+        latitude={form.latitude ? Number(form.latitude) : undefined}
+        longitude={form.longitude ? Number(form.longitude) : undefined}
+        onPick={(loc) => {
+          setForm((prev) => ({
+            ...prev,
+            latitude: String(loc.latitude),
+            longitude: String(loc.longitude),
+            ...(loc.address && !prev.address.trim() ? { address: loc.address } : {}),
+          }));
+          toastSuccess(
+            `已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
+          );
+        }}
+      />
    </div>
  );
 }