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>

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

@@ -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>
+  );
+}

apps/admin-web/src/lib/tencentLocPicker.ts

@@ -0,0 +1,60 @@
+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;
+  // 列表滑动过程中偶发空 POI，忽略无名称且无地址的噪声
+  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,
+  };
+}

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

@@ -19,7 +19,7 @@ import {
   message,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import { FilePdfOutlined, LinkOutlined } from '@ant-design/icons';
+import { FilePdfOutlined, LinkOutlined, EnvironmentOutlined } from '@ant-design/icons';
 import { request, type Paginated } from '../lib/api';
 import {
   ADMIN_OPTIONS_PAGE_SIZE,
@@ -37,6 +37,7 @@ import { useAdminList } from '../lib/useAdminList';
 import { resolveRegionBinding } from '../lib/china-region';
 import ChinaRegionCascader from '../components/ChinaRegionCascader';
 import OssUpload from '../components/OssUpload';
+import TencentLocPickerModal from '../components/TencentLocPickerModal';
 
 const CREATE_STEPS = [
   { title: '基本信息' },
@@ -44,17 +45,6 @@ const CREATE_STEPS = [
   { title: '结算资质' },
 ];
 
-/** 用店名 + 地址打开百度地图搜索，便于人工核对经纬度 */
-function openBaiduMapSearch(parts: Array<string | null | undefined>) {
-  const query = parts.map((p) => String(p || '').trim()).filter(Boolean).join(' ');
-  if (!query) {
-    message.warning('请先填写门店名称和地址');
-    return;
-  }
-  const url = `https://map.baidu.com/search/${encodeURIComponent(query)}/@0,0,12z?querytype=s&da_src=shareurl&wd=${encodeURIComponent(query)}`;
-  window.open(url, '_blank', 'noopener,noreferrer');
-}
-
 function fillGeolocation(
   setCoords: (lat: number, lng: number) => void,
   setLoading: (v: boolean) => void,
@@ -356,6 +346,8 @@ export default function StoresPage() {
   const [createStep, setCreateStep] = useState(0);
   const [createError, setCreateError] = useState('');
   const [locating, setLocating] = useState(false);
+  const [mapPickerOpen, setMapPickerOpen] = useState(false);
+  const [mapPickerTarget, setMapPickerTarget] = useState<'create' | 'edit'>('create');
   const [partners, setPartners] = useState<PartnerOption[]>([]);
   const [cities, setCities] = useState<CityOption[]>([]);
   const [categoryTree, setCategoryTree] = useState<CategoryNode[]>([]);
@@ -839,24 +831,16 @@ export default function StoresPage() {
                   获取当前位置
                 </Button>
                 <Button
-                  icon={<LinkOutlined />}
+                  icon={<EnvironmentOutlined />}
                   onClick={() => {
-                    const name = String(editForm.getFieldValue('name') || detail.name || '');
-                    const district = String(editForm.getFieldValue('district') || detail.district || '');
-                    const address = String(editForm.getFieldValue('address') || detail.address || '');
-                    openBaiduMapSearch([
-                      String(detail.province || ''),
-                      String(detail.cityName || ''),
-                      district,
-                      address,
-                      name,
-                    ]);
+                    setMapPickerTarget('edit');
+                    setMapPickerOpen(true);
                   }}
                 >
-                  百度地图查询
+                  腾讯地图选点
                 </Button>
                 <Typography.Text type="secondary">
-                  打开百度地图核对位置后，将坐标填回上方经纬度
+                  搜索或拖图确认位置后自动填入经纬度
                 </Typography.Text>
               </Space>
               <Form.Item name="avgPrice" label="人均费用（选填）">
@@ -1013,22 +997,16 @@ export default function StoresPage() {
                   获取当前位置
                 </Button>
                 <Button
-                  icon={<LinkOutlined />}
+                  icon={<EnvironmentOutlined />}
                   onClick={() => {
-                    const v = createForm.getFieldsValue();
-                    openBaiduMapSearch([
-                      v.province,
-                      v.city,
-                      v.district,
-                      v.address,
-                      v.name,
-                    ]);
+                    setMapPickerTarget('create');
+                    setMapPickerOpen(true);
                   }}
                 >
-                  百度地图查询
+                  腾讯地图选点
                 </Button>
                 <Typography.Text type="secondary">
-                  可手动填写 / 定位 / 百度地图核对后填入坐标
+                  可手动填写 / 定位 / 腾讯地图选点填入坐标
                 </Typography.Text>
               </Space>
               <Space wrap style={{ width: '100%' }}>
@@ -1132,6 +1110,42 @@ export default function StoresPage() {
           onChange={(e) => setRejectReason(e.target.value)}
         />
       </Modal>
+      <TencentLocPickerModal
+        open={mapPickerOpen}
+        onClose={() => setMapPickerOpen(false)}
+        latitude={
+          mapPickerTarget === 'edit'
+            ? Number(editForm.getFieldValue('latitude') ?? detail?.latitude)
+            : Number(createForm.getFieldValue('latitude'))
+        }
+        longitude={
+          mapPickerTarget === 'edit'
+            ? Number(editForm.getFieldValue('longitude') ?? detail?.longitude)
+            : Number(createForm.getFieldValue('longitude'))
+        }
+        onPick={(loc) => {
+          if (mapPickerTarget === 'edit') {
+            editForm.setFieldsValue({
+              latitude: loc.latitude,
+              longitude: loc.longitude,
+              ...(loc.address && !editForm.getFieldValue('address')
+                ? { address: loc.address }
+                : {}),
+            });
+          } else {
+            createForm.setFieldsValue({
+              latitude: loc.latitude,
+              longitude: loc.longitude,
+              ...(loc.address && !createForm.getFieldValue('address')
+                ? { address: loc.address }
+                : {}),
+            });
+          }
+          message.success(
+            `已选点 ${loc.latitude.toFixed(6)}, ${loc.longitude.toFixed(6)}${loc.name ? `（${loc.name}）` : ''}`,
+          );
+        }}
+      />
     </div>
   );
 }