fix: 修复 21 个问题 — 数据/逻辑/性能/无障碍/UX

数据/逻辑:
- visitCount 阈值 1000→10000(万转换)
- city-photo 按长度降序匹配(防短键屏蔽长键)
- AI 空响应不加空气泡
- probeUrl no-cors 局限性注释
- DEFAULT_VIEWPORT 坐标顺序注释
- ErrorBoundary 3次重试限制

无障碍:
- SortPopover/RegionSelect/Input/LocationCard/MobileLayout 补 aria-label
- 按钮加 type=button 防误提交
- EmptyState 空标题不渲染 h3
- MapControls 未就绪 disabled 态

UX/性能:
- Chat 桌面端加关闭按钮 + safe-area + 移动端FAB safe-area
- Sidebar safe-area insets
- LocationCard flyToMarker null 时 cursor-default
- MarkersLayer setFeatureState 全 try-catch
- promptShield 零宽字符注释化
- Worker replaceAll 子域名注释
- useFilteredLocations useMemo 空依赖注释
- MapContainer CJK 字体 PBF 注释

Co-Authored-By: Claude <noreply@anthropic.com>

Author: asdw

CHANGELOG.md

@@ -768,4 +768,5 @@
 
 
 
+
 

src/components/chat/ChatAssistant.tsx

@@ -180,16 +180,19 @@ export function ChatAssistant() {
       abortRef.current = controller
       const response = await chat(chatMessages, controller.signal)
 
-      // 5. Add assistant message
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: generateId(),
-          role: 'assistant',
-          content: response,
-          timestamp: new Date(),
-        },
-      ])
+      // 5. Add assistant message (skip if response is empty/whitespace)
+      const trimmedResponse = response?.trim()
+      if (trimmedResponse) {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: generateId(),
+            role: 'assistant',
+            content: trimmedResponse,
+            timestamp: new Date(),
+          },
+        ])
+      }
       setInput('')
     } catch (err: unknown) {
       const message =
@@ -335,8 +338,8 @@ export function ChatAssistant() {
 
   return (
     <>
-      {/* Injected keyframes */}
-      <style>{KEYFRAMES}</style>
+      {/* Injected keyframes — stable key prevents redundant DOM writes */}
+      <style key="chat-keyframes">{KEYFRAMES}</style>
 
       {/* ---------- Chat Panel ---------- */}
       <div
@@ -364,6 +367,7 @@ export function ChatAssistant() {
           WebkitBackdropFilter: 'blur(20px)',
           border: '1px solid var(--color-border)',
           boxShadow: 'var(--shadow-xl)',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
         }}
       >
           {/* ---- Header ---- */}
@@ -383,6 +387,14 @@ export function ChatAssistant() {
                 动漫店铺问答
               </div>
             </div>
+            <button
+              type="button"
+              onClick={closePanel}
+              aria-label="关闭聊天面板"
+              className="hidden md:flex h-7 w-7 items-center justify-center rounded-full bg-white/20 hover:bg-white/35 active:scale-90 transition-all shrink-0"
+            >
+              <X size={16} color="#fff" />
+            </button>
           </div>
 
           {/* ---- Messages ---- */}
@@ -514,6 +526,7 @@ export function ChatAssistant() {
           color: '#ffffff',
           boxShadow: 'var(--shadow-lg)',
           animation: 'chat-pop-in 400ms var(--ease-spring) both',
+          marginBottom: 'env(safe-area-inset-bottom, 0px)',
         }}
         onMouseEnter={(e) => {
           ;(e.currentTarget as HTMLButtonElement).style.boxShadow =

src/components/layout/DesktopLayout.tsx

@@ -23,9 +23,7 @@ export function DesktopLayout({ locations }: DesktopLayoutProps) {
           <RouteLayer />
         </MapView>
         {/* 地图控件 */}
-        <div className="absolute top-4 right-4 z-[1000]">
-          <MapControls />
-        </div>
+        <MapControls className="absolute top-4 right-4 z-[1000]" />
       </div>
 
       {/* 侧边栏浮在地图上方 */}

src/components/layout/MobileLayout.tsx

@@ -74,6 +74,8 @@ export function MobileLayout({ locations }: MobileLayoutProps) {
 
       {/* 遮罩 — 点击关闭抽屉 */}
       <div
+        role="dialog"
+        aria-label="关闭菜单"
         className={cn(
           'fixed inset-0 z-40 bg-black/40 transition-opacity duration-300',
           sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
@@ -105,6 +107,7 @@ export function MobileLayout({ locations }: MobileLayoutProps) {
             </span>
           </div>
           <button
+            type="button"
             onClick={() => setSidebarOpen(false)}
             className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 hover:bg-white/30 active:scale-90 transition-all"
             aria-label="关闭"

src/components/map/MapContainer.tsx

@@ -46,6 +46,10 @@ export function MapView({ children }: MapViewProps) {
         pixelRatio: isMobile ? 1 : window.devicePixelRatio,
         fadeDuration: 0,
         refreshExpiredTiles: false,
+        // NOTE: localIdeographFontFamily depends on locally-installed CJK fonts.
+        // PBF glyph fallback (localIdeographFontFamily: false) is disabled,
+        // so missing CJK glyphs will render as tofu (□) on systems without
+        // the specified fonts installed.
         localIdeographFontFamily: "'Noto Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif",
         canvasContextAttributes: { antialias: false },
         trackResize: true,

src/components/map/MapControls.tsx

@@ -8,6 +8,7 @@ interface MapControlsProps {
 }
 
 export function MapControls({ className }: MapControlsProps) {
+  const isMapReady = useMapStore((s) => s.isMapReady)
   const zoomIn = useMapStore((s) => s.zoomIn)
   const zoomOut = useMapStore((s) => s.zoomOut)
   const flyToMarker = useMapStore((s) => s.flyToMarker)
@@ -24,6 +25,7 @@ export function MapControls({ className }: MapControlsProps) {
     'transition-all duration-300 ease-out',
     'hover:scale-110 active:scale-95',
     'hover:bg-white/95',
+    !isMapReady && 'opacity-50 cursor-not-allowed',
   )
 
   return (
@@ -37,20 +39,23 @@ export function MapControls({ className }: MapControlsProps) {
     >
       <button
         onClick={zoomIn}
+        disabled={!isMapReady}
         className={cn(btnClass, 'rounded-t-2xl border-b border-gray-100/30')}
         aria-label="放大"
       >
         <Plus className="h-5 w-5" />
       </button>
       <button
         onClick={goHome}
+        disabled={!isMapReady}
         className={cn(btnClass, 'border-b border-gray-100/30')}
         aria-label="回到初始位置"
       >
         <Home className="h-4 w-4" />
       </button>
       <button
         onClick={zoomOut}
+        disabled={!isMapReady}
         className={cn(btnClass, 'rounded-b-2xl')}
         aria-label="缩小"
       >

src/components/map/MarkersLayer.tsx

@@ -30,6 +30,16 @@ function MarkersLayerInner({ locations }: MarkersLayerProps) {
   const popupRef = useRef<maplibregl.Popup | null>(null)
   const hoveredFeatureIdRef = useRef<number | null>(null)
   const settingUpRef = useRef(false)
+  const willUnmountRef = useRef(false)
+
+  // Track actual unmount so we only tear down layers/source on final unmount,
+  // not on every dependency change (e.g. locations data update).
+  // MUST be declared BEFORE the main effect so its cleanup runs first on unmount.
+  useEffect(() => {
+    return () => {
+      willUnmountRef.current = true
+    }
+  }, [])
 
   // 字符串 location.id → 数字 feature index 映射
   const idToIndexMap = useMemo(() => {
@@ -125,19 +135,23 @@ function MarkersLayerInner({ locations }: MarkersLayerProps) {
       if (e.features && e.features[0]) {
         const fid = e.features[0].id as number
         if (hoveredFeatureIdRef.current === fid) return
-        // 清除上一个
+        // 清除上一个（try-catch 防止 source 在检查和调用之间被移除）
         if (hoveredFeatureIdRef.current !== null) {
-          map.setFeatureState(
-            { source: 'locations', id: hoveredFeatureIdRef.current },
-            { hover: false }
-          )
+          try {
+            map.setFeatureState(
+              { source: 'locations', id: hoveredFeatureIdRef.current },
+              { hover: false }
+            )
+          } catch (e) { if (e instanceof Error && !e.message.includes('does not exist')) console.warn('Feature state error:', e) }
         }
         // 设置新的
         hoveredFeatureIdRef.current = fid
-        map.setFeatureState(
-          { source: 'locations', id: fid },
-          { hover: true }
-        )
+        try {
+          map.setFeatureState(
+            { source: 'locations', id: fid },
+            { hover: true }
+          )
+        } catch (e) { if (e instanceof Error && !e.message.includes('does not exist')) console.warn('Feature state error:', e) }
         // 同步 store（侧边栏卡片高亮）
         const locId = e.features[0].properties?.id as string
         if (locId) {
@@ -278,7 +292,9 @@ function MarkersLayerInner({ locations }: MarkersLayerProps) {
         popupRef.current.remove()
         popupRef.current = null
       }
-      // 清除图层和数据源（如果还存在）
+      // Only remove layers/source on actual unmount, not on dependency changes.
+      // On data updates, setupLayers() handles incremental updates via setData().
+      if (!willUnmountRef.current) return
       try {
         if (map.getLayer('location-labels')) map.removeLayer('location-labels')
         if (map.getLayer('location-dots')) map.removeLayer('location-dots')
@@ -386,7 +402,7 @@ function renderPopupHTML(props: Record<string, unknown>): string {
   const visitHtml =
     visitCount != null && visitCount > 0
       ? `<span style="font-size:11px;font-weight:600;color:var(--color-text, #1a1a2e);opacity:0.7;flex-shrink:0;">
-          🔥 ${visitCount >= 1000 ? `${(visitCount / 10000).toFixed(1)}万` : visitCount}
+          🔥 ${visitCount >= 10000 ? `${(visitCount / 10000).toFixed(1)}万` : visitCount}
         </span>`
       : ''
 

src/components/sidebar/LocationCard.tsx

@@ -44,12 +44,13 @@ export const LocationCard = memo(function LocationCard({ location, index }: Loca
       onMouseEnter={() => setHovered(location.id)}
       onMouseLeave={() => setHovered(null)}
       className={cn(
-        'location-card rounded-[16px] bg-white p-3 cursor-pointer',
+        'location-card rounded-[16px] bg-white p-3',
         'transition-all duration-300 ease-out',
         'hover:-translate-y-0.5 hover:shadow-card',
         'active:scale-[0.98]',
         isSelected && 'ring-2 ring-offset-1',
-        isHovered && !isSelected && 'shadow-card'
+        isHovered && !isSelected && 'shadow-card',
+        flyToMarker ? 'cursor-pointer' : 'cursor-default'
       )}
       style={{
         boxShadow: isSelected
@@ -117,10 +118,12 @@ export const LocationCard = memo(function LocationCard({ location, index }: Loca
       {/* Navigate button — only show when selected */}
       {isSelected && (
         <button
+          type="button"
           onClick={(e) => {
             e.stopPropagation()
             startNavigation(location)
           }}
+          aria-label={`导航到${location.name}`}
           className="mt-2.5 flex w-full items-center justify-center gap-1.5 rounded-xl py-2 text-xs font-semibold
             transition-all duration-200 active:scale-[0.97]"
           style={{

src/components/sidebar/RegionSelect.tsx

@@ -61,6 +61,7 @@ export function RegionSelect({ regionList }: RegionSelectProps) {
         <div className="absolute top-full right-0 mt-1 z-50 min-w-[120px] max-h-[240px] overflow-y-auto rounded-xl glass border border-[var(--color-border)] shadow-elevated py-1">
           <button
             onClick={() => handleSelect(null)}
+            aria-label="全部地区"
             className={cn(
               'w-full text-left px-3 py-1.5 text-[11px] transition-colors',
               'hover:bg-[var(--color-accent)]/5',
@@ -75,6 +76,7 @@ export function RegionSelect({ regionList }: RegionSelectProps) {
             <button
               key={region}
               onClick={() => handleSelect(region)}
+              aria-label={region}
               className={cn(
                 'w-full text-left px-3 py-1.5 text-[11px] transition-colors',
                 'hover:bg-[var(--color-accent)]/5',

src/components/sidebar/Sidebar.tsx

@@ -38,6 +38,8 @@ export function Sidebar({ locations, className }: SidebarProps) {
           transitionTimingFunction: sidebarCollapsed
             ? 'cubic-bezier(0.4, 0, 0.2, 1)'
             : 'var(--ease-spring)',
+          paddingTop: 'env(safe-area-inset-top, 0px)',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
         }}
       >
         {/* Header — compact one line */}