右上角位置信息仅展示不做交互

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

@@ -11,6 +11,7 @@ import {
   FALLBACK_CITY_CODE,
   resolveUserCity,
 } from '../lib/wechat-location';
+import { formatRegionCity } from '../lib/region-data';
 import CouponBadge from '@dukang/shared-ui/CouponBadge';
 
 type Product = {
@@ -44,8 +45,7 @@ export default function HomePage() {
   const [products, setProducts] = useState<Product[]>([]);
   const [cities, setCities] = useState<City[]>([]);
   const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || FALLBACK_CITY_CODE);
-  const [locatedCityLabel, setLocatedCityLabel] = useState('');
-  const [citySource, setCitySource] = useState<'auto' | 'manual'>('auto');
+  const [locationLabel, setLocationLabel] = useState('定位中...');
   const [toast, setToast] = useState('');
 
   useEffect(() => {
@@ -62,10 +62,13 @@ export default function HomePage() {
   }, []);
 
   useEffect(() => {
-    if (citySource !== 'auto') return;
     resolveUserCity().then((resolved) => {
-      if (!resolved) return;
-      setLocatedCityLabel(resolved.displayCity);
+      if (!resolved) {
+        setLocationLabel('郑州市');
+        setCityCode(FALLBACK_CITY_CODE);
+        return;
+      }
+      setLocationLabel(formatRegionCity(resolved.province, resolved.city));
       if (resolved.openCity && resolved.cityCode) {
         setCityCode(resolved.cityCode);
       } else {
@@ -74,7 +77,7 @@ export default function HomePage() {
         window.setTimeout(() => setToast(''), 2200);
       }
     });
-  }, [citySource]);
+  }, []);
 
   useEffect(() => {
     if (!cityCode) return;
@@ -95,8 +98,6 @@ export default function HomePage() {
     setTab(key);
   }
 
-  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';
 
@@ -105,23 +106,9 @@ export default function HomePage() {
       <TabMainHeader
         title="杜康好客"
         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) => {
-                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>
-              ))}
-              {!cities.length && <option value={cityCode}>{selectedCity?.name ?? '郑州市'}</option>}
-            </select>
+          <div className="tab-main-city tab-main-city--readonly" aria-label={`当前位置 ${locationLabel}`}>
+            <span className="material-symbols-outlined" aria-hidden>location_on</span>
+            <span className="tab-main-city-label">{locationLabel}</span>
           </div>
         )}
       />

apps/h5-user/src/styles.css

@@ -606,21 +606,16 @@
   max-width: 46vw;
 }
 
+.tab-main-city--readonly {
+  pointer-events: none;
+  user-select: none;
+}
+
 .tab-main-city-label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 72px;
-}
-
-.tab-main-city-select {
-  border: none;
-  background: transparent;
-  font: inherit;
-  color: inherit;
-  max-width: 72px;
-  opacity: 0.85;
-  font-size: 11px;
+  max-width: 120px;
 }
 
 .tab-main-city .material-symbols-outlined {