定位获取城市功能，需要微信地图的key？

apps/h5-user/src/pages/HomePage.tsx

@@ -6,6 +6,11 @@ import TabMainHeader from '../components/TabMainHeader';
 import AppToast from '../components/AppToast';
 import { getProductImages } from '../lib/product-images';
 import { track } from '../lib/analytics';
+import {
+  CITY_STORAGE_KEY,
+  FALLBACK_CITY_CODE,
+  resolveUserCity,
+} from '../lib/wechat-location';
 import CouponBadge from '@dukang/shared-ui/CouponBadge';
 
 type Product = {
@@ -34,18 +39,18 @@ const AROMA_TABS = [
   { key: 'NONGXIANG', label: '浓香型', open: false },
 ];
 
-const CITY_STORAGE_KEY = 'dukang_selected_city';
-
 export default function HomePage() {
   const [tab, setTab] = useState('QINGXIANG');
   const [products, setProducts] = useState<Product[]>([]);
   const [cities, setCities] = useState<City[]>([]);
-  const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || '410100');
+  const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || FALLBACK_CITY_CODE);
+  const [locatedCityLabel, setLocatedCityLabel] = useState('');
+  const [citySource, setCitySource] = useState<'auto' | 'manual'>('auto');
   const [toast, setToast] = useState('');
 
   useEffect(() => {
-    track('home_view', { pagePath: '/' });
-  }, []);
+    track('home_view', { pagePath: '/', cityCode });
+  }, [cityCode]);
 
   useEffect(() => {
     request<City[]>('USER_H5', '/catalog/cities').then((list) => {
@@ -56,6 +61,21 @@ export default function HomePage() {
     });
   }, []);
 
+  useEffect(() => {
+    if (citySource !== 'auto') return;
+    resolveUserCity().then((resolved) => {
+      if (!resolved) return;
+      setLocatedCityLabel(resolved.displayCity);
+      if (resolved.openCity && resolved.cityCode) {
+        setCityCode(resolved.cityCode);
+      } else {
+        setCityCode(FALLBACK_CITY_CODE);
+        setToast('当前城市暂未开城，已展示郑州商品');
+        window.setTimeout(() => setToast(''), 2200);
+      }
+    });
+  }, [citySource]);
+
   useEffect(() => {
     if (!cityCode) return;
     localStorage.setItem(CITY_STORAGE_KEY, cityCode);
@@ -76,6 +96,7 @@ export default function HomePage() {
   }
 
   const selectedCity = cities.find((c) => c.code === cityCode);
+  const headerCityLabel = locatedCityLabel || selectedCity?.name || '郑州市';
   const filtered = products.filter((p) => p.aromaType === tab);
   const onSale = tab === 'QINGXIANG';
 
@@ -86,10 +107,15 @@ export default function HomePage() {
         extra={(
           <div className="tab-main-city">
             <span className="material-symbols-outlined">location_on</span>
+            <span className="tab-main-city-label">{headerCityLabel}</span>
             <select
               value={cityCode}
-              onChange={(e) => setCityCode(e.target.value)}
-              style={{ border: 'none', background: 'transparent', font: 'inherit', color: 'inherit' }}
+              onChange={(e) => {
+                setCitySource('manual');
+                setCityCode(e.target.value);
+              }}
+              className="tab-main-city-select"
+              aria-label="选择开城城市"
             >
               {cities.map((c) => (
                 <option key={c.code} value={c.code}>{c.name}</option>