style: 调整界面元素的尺寸和间距以优化布局

- 新增HUD图标、面板和状态指示器资产
- 实现HUD图标组件和错误边界组件
- 重构顶部状态栏和底部导航栏
- 更新路线面板样式和交互
- 添加HUD资产清单和切片脚本
- 移除未使用的资产文件
- 调整API安全配置和生产环境设置

apps/api/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@fastify/cookie": "^11.0.2",
     "@fastify/cors": "^11.1.0",
+    "@fastify/rate-limit": "^10.3.0",
     "@fastify/static": "^9.1.3",
     "@tinywaste/content": "workspace:*",
     "@tinywaste/game-core": "workspace:*",

apps/api/src/features/auth/auth.routes.ts

@@ -8,13 +8,13 @@ export const registerAuthRoutes = (app: FastifyInstance, authService: AuthServic
     return { user };
   });
 
-  app.post('/api/auth/register', async (request, reply) => {
+  app.post('/api/auth/register', { config: { rateLimit: { max: 5, timeWindow: '1 minute' } } }, async (request, reply) => {
     const input = registerSchema.parse(request.body);
     const user = await authService.register(input, reply);
     return { user };
   });
 
-  app.post('/api/auth/login', async (request, reply) => {
+  app.post('/api/auth/login', { config: { rateLimit: { max: 10, timeWindow: '1 minute' } } }, async (request, reply) => {
     const input = loginSchema.parse(request.body);
     const user = await authService.login(input, reply);
     return { user };

apps/api/src/features/auth/auth.service.ts

@@ -48,7 +48,7 @@ export class AuthService {
       sameSite: 'lax',
       path: '/',
       maxAge: SESSION_TTL_MS / 1000,
-      secure: false,
+      secure: env.isProduction,
     });
   }
 

apps/api/src/features/game/game.repository.ts

@@ -13,11 +13,15 @@ export class GameRepository {
     });
   }
 
-  async upsertMainSlot(userId: string, stateJson: string, label: string) {
+  async upsertMainSlot(userId: string, stateJson: string, label: string, expectedRevision?: number) {
     const existing = await this.getMainSlot(userId);
     const now = Date.now();
 
     if (existing) {
+      if (expectedRevision !== undefined && existing.revision !== expectedRevision) {
+        return null;
+      }
+
       this.db
         .update(saveSlotsTable)
         .set({

apps/api/src/features/game/game.service.ts

@@ -43,7 +43,10 @@ export class GameService {
 
     const state = JSON.parse(slot.stateJson) as GameState;
     const result = applyGameAction(state, gameContent, action);
-    await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label);
+    const saved = await this.repository.upsertMainSlot(userId, JSON.stringify(result.state), slot.label, slot.revision);
+    if (!saved) {
+      throw new AppError(409, 'SAVE_CONFLICT', '存档已被其他请求修改，请重试。');
+    }
     return buildGameView(result.state, gameContent);
   }
 }

apps/api/src/server.ts

@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs';
 import Fastify from 'fastify';
 import cookie from '@fastify/cookie';
 import cors from '@fastify/cors';
+import rateLimit from '@fastify/rate-limit';
 import fastifyStatic from '@fastify/static';
 import { ZodError } from 'zod';
 import { db } from './shared/database/client';
@@ -25,6 +26,11 @@ await app.register(cors, {
   credentials: true,
 });
 
+await app.register(rateLimit, {
+  max: env.isProduction ? 100 : 1000,
+  timeWindow: '1 minute',
+});
+
 const authRepository = new AuthRepository(db);
 const authService = new AuthService(authRepository);
 const gameRepository = new GameRepository(db);

apps/api/src/shared/env.ts

@@ -8,6 +8,7 @@ loadDotenv({
 });
 
 const envSchema = z.object({
+  NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),
   API_PORT: z.coerce.number().int().positive().default(3001),
   WEB_ORIGIN: z.string().url().default('http://localhost:5173'),
   WEB_DIST_DIR: z.string().min(1).default('../web/dist'),
@@ -26,6 +27,8 @@ const webDistPath = resolve(process.cwd(), parsed.data.WEB_DIST_DIR);
 mkdirSync(dirname(databasePath), { recursive: true });
 
 export const env = {
+  nodeEnv: parsed.data.NODE_ENV,
+  isProduction: parsed.data.NODE_ENV === 'production',
   port: parsed.data.API_PORT,
   webOrigin: parsed.data.WEB_ORIGIN,
   webDistPath,

apps/web/public/generated/hud/manifest.json

@@ -0,0 +1,52 @@
+{
+  "reference": {
+    "canonical": "/generated/hud/reference/tinywaste-hud-reference.png",
+    "notes": "Current no-character HUD reference. Replaces the earlier right-side portrait layout."
+  },
+  "atlases": {
+    "chromeSource": "/generated/hud/atlases/hud-chrome-atlas-source.png",
+    "chromeTransparent": "/generated/hud/atlases/hud-chrome-atlas.png",
+    "iconSource": "/generated/hud/atlases/hud-icon-atlas-source.png",
+    "iconTransparent": "/generated/hud/atlases/hud-icon-atlas.png"
+  },
+  "chrome": {
+    "panelWide": "/generated/hud/chrome/panel-wide.png",
+    "panelTall": "/generated/hud/chrome/panel-tall.png",
+    "panelCard": "/generated/hud/chrome/panel-card.png",
+    "panelCompact": "/generated/hud/chrome/panel-compact.png",
+    "routeCardIdle": "/generated/hud/chrome/route-card-idle.png",
+    "routeCardActive": "/generated/hud/chrome/route-card-active.png",
+    "actionCardPrimary": "/generated/hud/chrome/action-card-primary.png",
+    "actionCardSecondary": "/generated/hud/chrome/action-card-secondary.png",
+    "statusCapsule": "/generated/hud/chrome/status-capsule.png",
+    "statusMeter": "/generated/hud/chrome/status-meter.png",
+    "quickStrip": "/generated/hud/chrome/quick-strip.png",
+    "quickStripLocked": "/generated/hud/chrome/quick-strip-locked.png",
+    "dockTabIdle": "/generated/hud/chrome/dock-tab-idle.png",
+    "dockTabActive": "/generated/hud/chrome/dock-tab-active.png",
+    "warningStrip": "/generated/hud/chrome/warning-strip.png",
+    "dividerOrnament": "/generated/hud/chrome/divider-ornament.png"
+  },
+  "icons": {
+    "shelter": "/generated/hud/icons/shelter.png",
+    "expedition": "/generated/hud/icons/expedition.png",
+    "inventory": "/generated/hud/icons/inventory.png",
+    "crafting": "/generated/hud/icons/crafting.png",
+    "skills": "/generated/hud/icons/skills.png",
+    "factions": "/generated/hud/icons/factions.png",
+    "map": "/generated/hud/icons/map.png",
+    "weather": "/generated/hud/icons/weather.png",
+    "clock": "/generated/hud/icons/clock.png",
+    "routePin": "/generated/hud/icons/route-pin.png",
+    "rest": "/generated/hud/icons/rest.png",
+    "repair": "/generated/hud/icons/repair.png",
+    "scavenge": "/generated/hud/icons/scavenge.png",
+    "signal": "/generated/hud/icons/signal.png",
+    "settings": "/generated/hud/icons/settings.png",
+    "logout": "/generated/hud/icons/logout.png"
+  },
+  "pipeline": {
+    "transparentCleanup": "python3 \"$HOME/.codex/skills/.system/imagegen/scripts/remove_chroma_key.py\"",
+    "sliceScript": "scripts/slice_hud_atlas.py"
+  }
+}

apps/web/src/App.tsx

@@ -2,6 +2,7 @@ import './App.css';
 import { AuthScreen } from './features/auth/components/AuthScreen';
 import { NewGameScreen } from './features/auth/components/NewGameScreen';
 import { GameHud } from './features/game/components/GameHud';
+import { ErrorBoundary } from './features/shared/components/ErrorBoundary';
 import { LoadingScreen } from './features/shared/components/LoadingScreen';
 import { useGameSession } from './features/session/useGameSession';
 
@@ -45,6 +46,7 @@ function App() {
   }
 
   return (
+    <ErrorBoundary>
       <GameHud
         accountName={session.user.username}
         gameError={session.gameError}
@@ -56,6 +58,7 @@ function App() {
         onSendAction={session.sendAction}
         view={session.view}
       />
+    </ErrorBoundary>
   );
 }
 

apps/web/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

apps/web/src/features/game/components/BottomDock.tsx

@@ -1,6 +1,7 @@
 import type { OverlayPanel } from '../types';
 import type { GameAction, GameView } from '@tinywaste/game-core';
 import { getActiveQuestCount, getCurrentPlace, getDominantAlert, getSupplyCounts } from '../hudModel';
+import { HudIcon } from './HudIcon';
 
 export function BottomDock({
   activePanel,
@@ -9,7 +10,7 @@ export function BottomDock({
   view,
 }: {
   activePanel: OverlayPanel | null;
-  onOpenPanel: (panel: OverlayPanel) => void;
+  onOpenPanel: (panel: OverlayPanel | null) => void;
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
@@ -18,44 +19,47 @@ export function BottomDock({
   const currentPlace = getCurrentPlace(view);
   const homeRoute = view.map.edges.find((edge) => edge.to === 'home');
   const dominantAlert = getDominantAlert(view);
+  const dockTabs: Array<{
+    id: OverlayPanel | 'local';
+    label: string;
+    icon: 'shelter' | 'expedition' | 'inventory' | 'crafting' | 'skills' | 'factions' | 'map';
+    onClick?: () => void;
+  }> = [
+    { id: 'local', label: currentPlace?.name ?? 'Expedition', icon: 'expedition' },
+    { id: 'inventory', label: '背包', icon: 'inventory', onClick: () => onOpenPanel('inventory') },
+    { id: 'blueprints', label: '蓝图', icon: 'crafting', onClick: () => onOpenPanel('blueprints') },
+    { id: 'missions', label: '任务', icon: 'skills', onClick: () => onOpenPanel('missions') },
+    { id: 'logs', label: '日志', icon: 'factions', onClick: () => onOpenPanel('logs') },
+    { id: 'local', label: '地图', icon: 'map', onClick: () => onOpenPanel(null) },
+  ];
 
   return (
-    <footer className="command-dock tactical-dock">
+    <footer className="command-dock tactical-dock hud-dock-frame">
       <div className="operator-card tactical-operator">
         <div className="operator-emblem">{view.player.name.slice(0, 1)}</div>
         <div className="operator-copy">
-          <span>ACTIVE SURVIVOR</span>
+          <span>在线幸存者</span>
           <strong>{view.player.name}</strong>
         </div>
       </div>
 
       <div className="dock-nav-groups">
         <div className="dock-tabs">
-          <button className="dock-tab active">{currentPlace?.name ?? 'Expedition'}</button>
+          {dockTabs.map((tab, index) => {
+            const isCurrentLocation = index === 0 && activePanel === null;
+            const isActive = tab.id !== 'local' ? activePanel === tab.id : isCurrentLocation;
+            return (
               <button
-            className={`dock-tab ${activePanel === 'blueprints' ? 'active' : ''}`}
+                key={`${tab.label}-${index}`}
-            onClick={() => onOpenPanel('blueprints')}
+                className={`dock-tab ${isActive ? 'active' : ''}`}
+                onClick={tab.onClick}
+                type="button"
               >
-            Crafting
+                <HudIcon name={tab.icon} className="dock-tab-icon" />
-          </button>
+                <span>{tab.label}</span>
-          <button
-            className={`dock-tab ${activePanel === 'logs' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('logs')}
-          >
-            Logs
-          </button>
-          <button
-            className={`dock-tab ${activePanel === 'inventory' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('inventory')}
-          >
-            Inventory
-          </button>
-          <button
-            className={`dock-tab ${activePanel === 'missions' ? 'active' : ''}`}
-            onClick={() => onOpenPanel('missions')}
-          >
-            Missions
               </button>
+            );
+          })}
         </div>
 
         <div className="dock-metrics">
@@ -73,10 +77,12 @@ export function BottomDock({
             className="primary-button dock-commit-button"
             onClick={() => onSendAction({ type: 'travel', toPlaceId: homeRoute.to })}
           >
+            <HudIcon name="shelter" className="dock-commit-icon" />
             返回避难点
           </button>
         ) : (
           <button className="primary-button dock-commit-button" onClick={() => onOpenPanel('inventory')}>
+            <HudIcon name="inventory" className="dock-commit-icon" />
             打开补给终端
           </button>
         )}

apps/web/src/features/game/components/CommandCenter.tsx

@@ -1,12 +1,25 @@
 import type { GameAction, GameView, InventoryViewEntry } from '@tinywaste/game-core';
 import { getLatestLog, getPrimaryObjective, getQuickUseItems } from '../hudModel';
-import { getPlaceHeroStyle } from '../uiAssets';
+import { getItemArt, getPlaceHeroStyle, type HudIconAsset } from '../uiAssets';
 import type { OverlayPanel } from '../types';
+import { AssetThumb } from './AssetThumb';
+import { HudIcon } from './HudIcon';
+
+const MIN_SUCCESS_CHANCE = 15;
+const REST_DURATION_MINUTES = 30;
 
 function pickRecoveryItem(items: InventoryViewEntry[], type: 'water' | 'food' | 'medicine') {
   return items.find((item) => item.type === type);
 }
 
+function getOperationIcon(actionId: string): HudIconAsset {
+  if (actionId.includes('rest')) return 'rest';
+  if (actionId.includes('repair') || actionId.includes('fix')) return 'repair';
+  if (actionId.includes('craft')) return 'crafting';
+  if (actionId.includes('search') || actionId.includes('scavenge') || actionId.includes('collect')) return 'scavenge';
+  return 'expedition';
+}
+
 export function CommandCenter({
   gameError,
   isWorking,
@@ -20,7 +33,7 @@ export function CommandCenter({
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
-  const quickUseItems = getQuickUseItems(view);
+  const quickUseItems = getQuickUseItems(view, 6);
   const primaryObjective = getPrimaryObjective(view);
   const latestLog = getLatestLog(view);
   const primaryAlert = view.survival.alerts[0] ?? null;
@@ -32,82 +45,56 @@ export function CommandCenter({
       const water = pickRecoveryItem(quickUseItems, 'water');
       if (water) {
         return {
-          kicker: 'Recover now',
+          icon: 'inventory' as const,
-          title: `饮用 ${water.name}`,
+          title: `使用 ${water.name}`,
           description: primaryAlert.recovery,
-          hint: '先把出行窗口拉回来，再考虑继续搜刮。',
+          label: '恢复',
-          chips: [`携带 x${water.count}`, '即时恢复', '口渴优先'],
+          time: '0 分钟',
-          actionLabel: '立即饮水',
+          actionLabel: '立即使用',
+          chance: '100%',
+          items: quickUseItems.slice(0, 6),
           onClick: () => onSendAction({ type: 'use-item', itemId: water.itemId }),
         };
       }
     }
 
-    if (primaryAlert?.stat === 'hunger') {
-      const food = pickRecoveryItem(quickUseItems, 'food');
-      if (food) {
-        return {
-          kicker: 'Recover now',
-          title: `吃掉 ${food.name}`,
-          description: primaryAlert.recovery,
-          hint: '热量恢复后，连续行动的容错会更高。',
-          chips: [`携带 x${food.count}`, '即时恢复', '饥饿优先'],
-          actionLabel: '立即进食',
-          onClick: () => onSendAction({ type: 'use-item', itemId: food.itemId }),
-        };
-      }
-    }
-
-    if (primaryAlert && (primaryAlert.stat === 'life' || primaryAlert.stat === 'radiation')) {
-      const medicine = pickRecoveryItem(quickUseItems, 'medicine');
-      if (medicine) {
-        return {
-          kicker: 'Stabilize',
-          title: `使用 ${medicine.name}`,
-          description: primaryAlert.recovery,
-          hint: '先把身体拉回稳定区，再决定是否继续推进。',
-          chips: [`携带 x${medicine.count}`, '医疗补给', primaryAlert.label],
-          actionLabel: '立即处理',
-          onClick: () => onSendAction({ type: 'use-item', itemId: medicine.itemId }),
-        };
-      }
-    }
-
     if (primaryAlert?.stat === 'energy' && view.place.services.includes('rest')) {
       return {
-        kicker: 'Recover now',
+        icon: 'rest' as const,
-        title: '短休 30 分钟',
+        title: '休息',
         description: primaryAlert.recovery,
-        hint: '把精力先抬到安全线，再出门会更稳。',
+        label: '恢复',
-        chips: ['30 分钟', '精力恢复', '低风险'],
+        time: '12 分钟',
-        actionLabel: '立即休整',
+        actionLabel: '立即休息',
-        onClick: () => onSendAction({ type: 'rest', minutes: 30 }),
+        chance: '安全',
+        items: quickUseItems.slice(0, 6),
+        onClick: () => onSendAction({ type: 'rest', minutes: REST_DURATION_MINUTES }),
       };
     }
 
     if (firstUtilityAction) {
       return {
-        kicker: 'Next move',
+        icon: getOperationIcon(firstUtilityAction.id),
         title: firstUtilityAction.name,
         description: firstUtilityAction.desc,
-        hint: firstUtilityAction.rewardHint,
+        label: '主要行动',
-        chips: [
+        time: `${firstUtilityAction.timeCostMin} 分钟`,
-          `${firstUtilityAction.timeCostMin} 分钟`,
+        actionLabel: '执行',
-          `精力 -${firstUtilityAction.energyCost}`,
+        chance: `${Math.max(MIN_SUCCESS_CHANCE, 100 - Math.round(firstUtilityAction.risk * 100))}%`,
-          `风险 ${Math.round(firstUtilityAction.risk * 100)}%`,
+        items: quickUseItems.slice(0, 6),
-        ],
-        actionLabel: '执行行动',
         onClick: () => onSendAction({ type: 'perform-action', actionId: firstUtilityAction.id }),
       };
     }
 
     return {
-      kicker: 'System focus',
+      icon: 'inventory' as const,
-      title: '打开背包面板',
+      title: '打开背包',
-      description: '当前没有可直接执行的扇区行为，先整理资源和配装。',
+      description: '出发前整理补给物资。',
-      hint: '库存与仓储都在系统面板里管理。',
+      label: '系统',
-      chips: ['系统面板', '整理补给', '继续规划'],
+      time: '0 分钟',
-      actionLabel: '打开背包',
+      actionLabel: '打开',
+      chance: '安全',
+      items: quickUseItems.slice(0, 6),
       onClick: () => onOpenPanel('inventory'),
     };
   })();
@@ -118,112 +105,119 @@ export function CommandCenter({
       .slice(0, 3)
       .map((action) => ({
         id: action.id,
+        icon: getOperationIcon(action.id),
         title: action.name,
         detail: action.rewardHint,
-        meta: `${action.timeCostMin}m · 风险 ${Math.round(action.risk * 100)}%`,
+        time: `${action.timeCostMin} 分钟`,
         onClick: () => onSendAction({ type: 'perform-action', actionId: action.id }),
       })),
-    {
+  ];
-      id: 'inventory',
+
-      title: '整理补给',
+  while (secondaryOperations.length < 3) {
-      detail: '打开背包与避难所仓储',
+    const fillers = [
-      meta: 'inventory',
+      { id: 'inventory', icon: 'inventory' as const, title: '背包', detail: '打开野外背包终端', time: '0 分钟', onClick: () => onOpenPanel('inventory') },
-      onClick: () => onOpenPanel('inventory'),
+      { id: 'craft', icon: 'crafting' as const, title: '制作', detail: '查看蓝图与材料缺口', time: '15 分钟', onClick: () => onOpenPanel('blueprints') },
-    },
+      { id: 'logs', icon: 'signal' as const, title: '查看日志', detail: '检查最近的探索信号', time: '2 分钟', onClick: () => onOpenPanel('logs') },
-    {
+    ];
-      id: 'blueprints',
+    secondaryOperations.push(fillers[secondaryOperations.length]);
-      title: '检查蓝图',
+  }
-      detail: '查看可制作项与材料缺口',
-      meta: 'crafting',
-      onClick: () => onOpenPanel('blueprints'),
-    },
-  ].slice(0, 5);
 
   return (
-    <section className="panel panel-command theater-panel">
+    <section className="panel panel-command theater-panel hud-shell-panel">
-      <div className="theater-scene" style={getPlaceHeroStyle(view.place.id)}>
+      <header className="theater-titlebar">
-        <div className="theater-scene-copy">
+        <div>
-          <p className="eyebrow">Operation theater</p>
+          <h2>{view.header.placeName.toUpperCase()}</h2>
-          <h2>{view.header.placeName}</h2>
           <p>{view.header.placeDesc}</p>
         </div>
-
+        <div className="theater-titlebar-metrics">
-        <div className="theater-scene-side">
+          <article>
-          <article className="scene-focus-card">
+            <span>预计耗时</span>
-            <span>当前重点</span>
+            <strong>{primaryOperation.time}</strong>
-            <strong>{primaryObjective?.title ?? view.survival.headline}</strong>
-            <p>{primaryObjective?.detail ?? '先处理生存威胁，再推进任务。'}</p>
           </article>
-          <article className={`scene-focus-card ${gameError ? 'error' : ''}`}>
+          <article>
-            <span>扇区反馈</span>
+            <span>风险等级</span>
-            <strong>{primaryAlert ? primaryAlert.summary : '链路稳定'}</strong>
+            <strong className={primaryAlert ? 'warn' : 'safe'}>{view.header.riskLabel}</strong>
-            <p>{gameError ?? latestLog?.message ?? '最新日志会在这里同步关键结果。'}</p>
           </article>
         </div>
-      </div>
+      </header>
 
-      <div className="theater-deck">
+      <div className="theater-scene-stage">
-        <section className="primary-operation-card">
+        <div className="theater-scene-image" style={getPlaceHeroStyle(view.place.id)} />
-          <div className="primary-operation-copy">
+
-            <span>{primaryOperation.kicker}</span>
+        <div className="theater-action-zone">
+          <section className="theater-primary-card">
+            <div className="theater-primary-head">
+              <HudIcon name={primaryOperation.icon} className="theater-action-icon" />
+              <span>{primaryOperation.label}</span>
+            </div>
+            <div className="theater-primary-copy">
               <h3>{primaryOperation.title}</h3>
               <p>{primaryOperation.description}</p>
             </div>
-          <div className="operation-chip-row">
+
-            {primaryOperation.chips.map((chip) => (
+            <div className="theater-find-row">
-              <span key={chip}>{chip}</span>
+              <div className="theater-find-meta">
+                <span>最佳发现概率</span>
+                <strong>{primaryOperation.chance}</strong>
+              </div>
+              <div className="theater-find-meta">
+                <span>时间消耗</span>
+                <strong>{primaryOperation.time}</strong>
+              </div>
+            </div>
+
+              <div className="theater-potential-finds">
+              {primaryOperation.items.slice(0, 6).map((item) => (
+                <AssetThumb
+                  key={`potential-${item.itemId}`}
+                  src={getItemArt(item.itemId, item.type)}
+                  label={item.name}
+                  className="potential-find-thumb"
+                />
               ))}
             </div>
-          <small>{primaryOperation.hint}</small>
+
-          <button className="primary-button operation-commit-button" disabled={isWorking} onClick={primaryOperation.onClick}>
+            <button className="primary-button theater-primary-button" disabled={isWorking} onClick={primaryOperation.onClick} type="button">
               {primaryOperation.actionLabel}
             </button>
           </section>
 
-        <section className="secondary-operation-stack">
+          <div className="theater-secondary-column">
-          {secondaryOperations.map((operation) => (
+            {secondaryOperations.slice(0, 3).map((operation) => (
-            <button
+              <button key={operation.id} className="theater-secondary-card" disabled={isWorking} onClick={operation.onClick} type="button">
-              key={operation.id}
+                <HudIcon name={operation.icon} className="theater-action-icon" />
-              className="secondary-operation-card"
+                <div>
-              disabled={isWorking}
-              onClick={operation.onClick}
-            >
                   <strong>{operation.title}</strong>
                   <p>{operation.detail}</p>
-              <small>{operation.meta}</small>
+                </div>
+                <span>{operation.time}</span>
               </button>
             ))}
-        </section>
+          </div>
         </div>
 
-      <div className="theater-intel-grid">
+        <footer className="theater-intel-strip">
-        <article className="intel-focus-card">
+          <article className="theater-intel-block">
-          <span>Mission thread</span>
+            <span>区域情报</span>
-          <strong>{primaryObjective?.title ?? '暂无关键目标'}</strong>
+            <p>{latestLog?.message ?? '近期有拾荒者活动，发现少量物资缓存。'}</p>
-          <p>{primaryObjective?.detail ?? '继续探索以触发新的委托与线索。'}</p>
           </article>
-
+          <article className="theater-intel-block compact">
-        <article className="intel-focus-card">
+            <HudIcon name="expedition" className="theater-intel-icon" />
-          <span>Recent log</span>
+            <strong>{primaryObjective?.title ?? '任务线索'}</strong>
-          <strong>{latestLog ? `${latestLog.minute}m` : '日志空闲'}</strong>
-          <p>{latestLog?.message ?? '还没有新的结构化战报。'}</p>
           </article>
-
+          <article className="theater-intel-block compact">
-        <article className="intel-focus-card system">
+            <HudIcon name="inventory" className="theater-intel-icon" />
-          <span>Systems</span>
+            <strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
-          <strong>中频终端</strong>
-          <div className="intel-system-links">
-            <button className="small-button secondary" onClick={() => onOpenPanel('logs')}>
-              日志
-            </button>
-            <button className="small-button secondary" onClick={() => onOpenPanel('missions')}>
-              任务
-            </button>
-            <button className="small-button secondary" onClick={() => onOpenPanel('blueprints')}>
-              蓝图
-            </button>
-          </div>
           </article>
+          <article className="theater-intel-block compact">
+            <HudIcon name="signal" className="theater-intel-icon" />
+            <strong>{gameError ?? latestLog?.minute ? `${latestLog?.minute ?? 0}分` : '在线'}</strong>
+          </article>
+          <article className="theater-intel-block compact">
+            <HudIcon name="weather" className="theater-intel-icon" />
+            <strong>{primaryAlert ? primaryAlert.label : '安全'}</strong>
+          </article>
+        </footer>
       </div>
     </section>
   );

apps/web/src/features/game/components/HudIcon.tsx

@@ -0,0 +1,16 @@
+import { getHudIconArt, type HudIconAsset } from '../uiAssets';
+
+export function HudIcon({
+  name,
+  label,
+  className = '',
+  decorative = true,
+}: {
+  name: HudIconAsset;
+  label?: string;
+  className?: string;
+  decorative?: boolean;
+}) {
+  const src = getHudIconArt(name);
+  return <img alt={decorative ? '' : label ?? name} aria-hidden={decorative} className={`hud-icon ${className}`.trim()} src={src} />;
+}

apps/web/src/features/game/components/LoadoutPanel.tsx

@@ -1,15 +1,10 @@
 import type { GameAction, GameView } from '@tinywaste/game-core';
 import { useMemo } from 'react';
 import { getItemArt } from '../uiAssets';
-import {
+import { getLoadoutEntries, getQuickUseItems, getStatusEffects, getSurvivorMetrics } from '../hudModel';
-  getLoadoutEntries,
-  getQuickUseItems,
-  getStatusEffects,
-  getSurvivorMetrics,
-} from '../hudModel';
 import type { OverlayPanel } from '../types';
 import { AssetThumb } from './AssetThumb';
-import { PanelHeader } from '../../shared/components/PanelHeader';
+import { HudIcon } from './HudIcon';
 
 export function LoadoutPanel({
   isWorking,
@@ -24,143 +19,141 @@ export function LoadoutPanel({
 }) {
   const loadoutEntries = useMemo(() => getLoadoutEntries(view), [view]);
   const statusEffects = useMemo(() => getStatusEffects(view), [view]);
-  const quickUseItems = useMemo(() => getQuickUseItems(view, 5), [view]);
+  const quickUseItems = useMemo(() => getQuickUseItems(view, 3), [view]);
   const survivorMetrics = useMemo(() => getSurvivorMetrics(view), [view]);
   const equipmentEntries = useMemo(
-    () => [...loadoutEntries.left, ...loadoutEntries.right],
+    () => [...loadoutEntries.right.slice(0, 2), loadoutEntries.left[1], loadoutEntries.right[2], loadoutEntries.left[2]],
     [loadoutEntries.left, loadoutEntries.right],
   );
   const storagePreview = useMemo(() => view.player.storage.slice(0, 5), [view.player.storage]);
 
   return (
-    <section className="panel panel-loadout survivor-panel">
+    <section className="panel panel-loadout equipment-terminal">
-      <div className="panel-tabs survivor-tabs">
+      <header className="equipment-terminal-head">
-        <button className="active">Character</button>
+        <div className="equipment-terminal-title">
-        <button onClick={() => onOpenPanel('inventory')}>Inventory</button>
+          <HudIcon name="inventory" className="section-glyph" />
-        <button onClick={() => onOpenPanel('missions')}>Missions</button>
-      </div>
-
-      <div className="survivor-head">
           <div>
-          <p className="eyebrow">Survivor rig</p>
+            <p className="eyebrow">装备</p>
             <strong>{view.player.name}</strong>
           </div>
-        <div className="survivor-head-chips">
+        </div>
+        <div className="equipment-terminal-badges">
           <span className={`hud-chip ${view.player.storageAccessible ? 'safe' : 'muted'}`}>
             {view.player.storageAccessible ? '仓储在线' : '野外行动'}
           </span>
-          <span className="hud-chip muted">
+          <span className="hud-chip muted">负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}</span>
-            负载 {view.player.inventoryUsage}/{view.player.inventoryCapacity}
-          </span>
         </div>
+      </header>
+
+      <section className="equipment-grid-frame">
+        <div className="equipment-grid-head">
+          <span>装备栏</span>
+          <p>右侧保留装备、警报与补给摘要</p>
         </div>
 
-      <section className="subpanel equipment-grid-panel">
+        <div className="equipment-grid">
-        <PanelHeader title="Equipment" subtitle="去掉人物展示后，右侧改为纯功能 HUD 终端" compact />
-        <div className="survivor-equipment-grid">
           {equipmentEntries.map((entry) => (
-            <article key={entry.id} className={`loadout-slot equipment-module ${entry.isEquipped ? 'equipped' : ''}`}>
+            <article key={entry.id} className={`equipment-slot-card ${entry.isEquipped ? 'equipped' : ''}`}>
-              <AssetThumb src={entry.art} label={entry.title} className="slot-thumb" />
+              <div className="equipment-slot-top">
-              <div className="slot-copy">
                 <span>{entry.label}</span>
+              </div>
+              <AssetThumb src={entry.art} label={entry.title} className="equipment-slot-thumb" />
+              <div className="equipment-slot-copy">
                 <strong>{entry.title}</strong>
                 <small>{entry.subtitle}</small>
               </div>
             </article>
           ))}
+          <article className="equipment-slot-card placeholder">
+            <div className="equipment-slot-top">
+              <span>模组</span>
+            </div>
+            <div className="equipment-slot-placeholder">+</div>
+          </article>
         </div>
       </section>
 
-      <section className="survivor-metrics-row">
+      <section className="equipment-metrics-row">
         {survivorMetrics.map((metric) => (
-          <article key={metric.id} className="survivor-metric-card">
+          <article key={metric.id} className="equipment-metric-box">
             <span>{metric.label}</span>
             <strong>{metric.value}</strong>
           </article>
         ))}
       </section>
 
-      <section className="survivor-warning-strip">
+      <section className="warning-terminal">
-        {statusEffects.map((effect) => (
+        <div className="warning-terminal-head">
-          <article key={effect.id} className={`survivor-warning-card tone-${effect.tone}`}>
+          <span>生存警报</span>
-            {effect.art ? <img className="status-effect-icon" src={effect.art} alt={effect.label} /> : null}
+          <button className="warning-terminal-button" type="button">
-            <div>
+            详情
-              <strong>{effect.label}</strong>
+          </button>
-              <p>{effect.detail}</p>
+        </div>
+        <div className="warning-terminal-list">
+          {statusEffects.slice(0, 4).map((effect) => (
+            <article key={effect.id} className={`warning-meter tone-${effect.tone}`}>
+              <div className="warning-meter-head">
+                <HudIcon name="signal" className="warning-meter-icon" />
+                <span>{effect.label.split('·')[0].trim()}</span>
+              </div>
+              <div className="warning-meter-track">
+                <div className="warning-meter-fill" />
               </div>
             </article>
           ))}
+        </div>
       </section>
 
-      <section className="subpanel quick-slot-panel survivor-supply-panel">
+      <section className="ready-pack-frame">
-        <PanelHeader title="Quick supplies" subtitle="高频补给直接可点，不再只是展示" compact />
+        <div className="ready-pack-head">
-        <div className="survivor-supply-grid">
+          <span>快速补给</span>
+          <p>快速补给和仓储摘要</p>
+        </div>
+
+        <div className="ready-pack-columns">
+          <div>
+            <strong>快捷栏</strong>
+            <div className="quick-access-row">
               {quickUseItems.map((item) => (
                 <button
-              key={`quick-use-${item.itemId}`}
+                  key={`quick-${item.itemId}`}
-              className="survivor-supply-card"
+                  className="quick-access-slot"
                   disabled={isWorking}
                   onClick={() => onSendAction({ type: 'use-item', itemId: item.itemId })}
+                  type="button"
                 >
-              <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
+                  <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
-              <div className="survivor-supply-copy">
+                  <span>{item.count}</span>
-                <strong>{item.name}</strong>
-                <span>x{item.count}</span>
-                <small>{item.type}</small>
-              </div>
                 </button>
               ))}
-          {Array.from({ length: Math.max(0, 5 - quickUseItems.length) }).map((_, index) => (
+              {Array.from({ length: Math.max(0, 4 - quickUseItems.length) }).map((_, index) => (
-            <article key={`locked-${index}`} className="survivor-supply-card locked">
+                <article key={`quick-empty-${index}`} className="quick-access-slot locked">
-              <div className="quick-slot-lock">EMPTY</div>
+                  <span>锁定</span>
                 </article>
               ))}
             </div>
-      </section>
+          </div>
 
-      <section className="subpanel survivor-stash-panel">
+          <div>
-        <PanelHeader
+            <strong>仓储</strong>
-          title="Stash snapshot"
+            <div className="stash-row">
-          subtitle={
-            view.player.storageAccessible
-              ? `避难所仓储 ${view.player.storageUsage}/${view.player.storageCapacity}`
-              : '离开避难所后只保留摘要'
-          }
-          compact
-        />
-        <div className="survivor-stash-grid">
               {storagePreview.map((item) => (
-            <article key={`stash-${item.itemId}`} className="survivor-stash-card">
+                <article key={`stash-${item.itemId}`} className="stash-slot">
-              <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} />
+                  <AssetThumb src={getItemArt(item.itemId, item.type)} label={item.name} className="quick-access-thumb" />
-              <div className="survivor-stash-copy">
+                  <span>{item.count}</span>
-                <strong>{item.name}</strong>
-                <span>x{item.count}</span>
-              </div>
                 </article>
               ))}
-          <button className="secondary-button survivor-stash-open" onClick={() => onOpenPanel('inventory')}>
+              <button className="stash-slot stash-open" onClick={() => onOpenPanel('inventory')} type="button">
-            打开仓储终端
+                +
               </button>
             </div>
+          </div>
+        </div>
       </section>
 
-      <section className="subpanel survivor-actions-panel">
+      <button className="secondary-button equipment-terminal-button" onClick={() => onOpenPanel('inventory')} type="button">
-        <PanelHeader title="Field terminals" subtitle="中频系统从这里切换，主屏只保留决策所需" compact />
+        打开背包 / 仓储终端
-        <div className="panel-link-grid">
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('inventory')}>
-            背包 / 仓储
       </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('blueprints')}>
-            制作蓝图
-          </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('missions')}>
-            任务线程
-          </button>
-          <button className="secondary-button panel-link-button" onClick={() => onOpenPanel('logs')}>
-            行动日志
-          </button>
-        </div>
-      </section>
     </section>
   );
 }

apps/web/src/features/game/components/RoutePanel.tsx

@@ -1,7 +1,16 @@
 import type { GameAction, GameView } from '@tinywaste/game-core';
-import { edgeDestination, getActiveQuestCount, getCurrentPlace, getExpeditionStatus, getRiskDots, getRouteRiskTier } from '../hudModel';
+import { useState } from 'react';
+import {
+  edgeDestination,
+  getCurrentPlace,
+  getExpeditionStatus,
+  getPlaceAtmosphere,
+  getRiskDots,
+  getRouteRiskTier,
+  getVisibleRoutes,
+} from '../hudModel';
 import { getPlaceThumbStyle } from '../uiAssets';
-import { PanelHeader } from '../../shared/components/PanelHeader';
+import { HudIcon } from './HudIcon';
 
 export function RoutePanel({
   isWorking,
@@ -12,52 +21,56 @@ export function RoutePanel({
   onSendAction: (action: GameAction) => void;
   view: GameView;
 }) {
+  const [safeOnly, setSafeOnly] = useState(false);
   const currentPlace = getCurrentPlace(view);
-  const activeQuestCount = getActiveQuestCount(view);
+  const placeId = currentPlace?.id ?? view.place.id;
   const expedition = getExpeditionStatus(view);
+  const atmosphere = getPlaceAtmosphere(placeId);
+  const allRoutes = getVisibleRoutes(view, 10);
+  const routes = safeOnly
+    ? allRoutes.filter((edge) => !edge.blockedReason && getRouteRiskTier(edge.risk).tone === 'safe')
+    : allRoutes.slice(0, 3);
+  const launchRoute = routes[0] ?? null;
 
   return (
-    <section className="panel panel-route expedition-panel">
+    <section className="panel panel-route expedition-panel hud-shell-panel">
-      <header className="expedition-head">
+      <header className="expedition-panel-head">
         <div>
-          <p className="eyebrow">Expedition rail</p>
+          <p className="eyebrow">探索</p>
           <h2>{currentPlace?.name ?? view.header.placeName}</h2>
         </div>
-        <span className={`hud-chip ${expedition.tone === 'good' ? 'safe' : expedition.tone}`}>
+        <span className={`hud-chip ${expedition.tone === 'good' ? 'safe' : expedition.tone}`}>{view.header.riskLabel}</span>
-          {view.header.riskLabel}
-        </span>
       </header>
 
-      <article className="expedition-core">
+      <section className="expedition-location-card">
-        <span className="intel-kicker">CURRENT SECTOR</span>
+        <p className="eyebrow">当前位置</p>
-        <p>{view.header.placeDesc}</p>
+        <strong>{view.header.placeName}</strong>
-        <div className="expedition-status-grid">
+        <div className="expedition-weather-block">
-          <article className="expedition-status-card">
+          <div className="expedition-weather-main">
-            <small>准备度</small>
+            <HudIcon name="weather" className="expedition-weather-icon" />
-            <strong>{expedition.readiness}%</strong>
+            <span>{atmosphere.weather}</span>
-          </article>
-          <article className="expedition-status-card">
-            <small>负载</small>
-            <strong>{view.player.inventoryUsage}/{view.player.inventoryCapacity}</strong>
-          </article>
-          <article className="expedition-status-card">
-            <small>威胁</small>
-            <strong>{expedition.threatCount || activeQuestCount}</strong>
-          </article>
           </div>
-        <div className="intel-meta">
+          <div className="expedition-weather-meta">
-          {(currentPlace?.tags ?? []).map((tag) => (
+            <span>{atmosphere.temperature}</span>
-            <span key={tag} className="hud-chip muted">
+            <span>{atmosphere.wind}</span>
-              {tag}
-            </span>
-          ))}
           </div>
-      </article>
+        </div>
+        <div className="expedition-risk-line">
+          <span>风险等级</span>
+          <strong>{view.header.riskLabel}</strong>
+        </div>
+      </section>
 
-      <section className="route-stack">
+      <section className="expedition-routes-card">
-        <PanelHeader title="Routes" subtitle="选择下一段远行目标" compact />
+        <div className="expedition-section-head">
-        <div className="route-list expedition-route-list">
+          <span>路线</span>
-        {view.map.edges.map((edge) => {
+          <button className={`expedition-toggle ${safeOnly ? 'active' : ''}`} type="button" onClick={() => setSafeOnly((prev) => !prev)}>
+            {safeOnly ? '显示全部' : '仅安全路线'}
+          </button>
+        </div>
+
+        <div className="expedition-route-stack">
+          {routes.map((edge, index) => {
             const destination = edgeDestination(view, edge);
             if (!destination) return null;
 
@@ -67,45 +80,62 @@ export function RoutePanel({
             return (
               <button
                 key={`${edge.from}-${edge.to}`}
-              className={`route-card expedition-route-card tone-${riskTier.tone}`}
+                className={`expedition-route-card ${index === 0 ? 'active' : ''} tone-${riskTier.tone}`}
                 disabled={Boolean(edge.blockedReason) || isWorking}
                 onClick={() => onSendAction({ type: 'travel', toPlaceId: edge.to })}
+                type="button"
               >
                 <div className="route-card-thumb" style={getPlaceThumbStyle(destination.id)} />
                 <div className="route-card-copy">
+                  <div className="route-card-topline">
                     <strong>{destination.name}</strong>
+                    <span>{destination.visited ? '已探明' : '未知'}</span>
+                  </div>
                   <p>{destination.desc}</p>
                   <div className="route-card-detail">
                     <span>{edge.travelTimeMin} 分钟</span>
                     <span>{riskTier.label}</span>
                   </div>
                   <div className="risk-dots" aria-hidden="true">
-                  {riskDots.map((active, index) => (
+                    {riskDots.map((active, dotIndex) => (
-                    <span key={`${destination.id}-${index}`} className={active ? 'active' : ''} />
+                      <span key={`${destination.id}-${dotIndex}`} className={active ? 'active' : ''} />
                     ))}
                   </div>
                 </div>
-              <div className="route-card-state">
-                <span>{destination.visited ? '已探明' : '未知'}</span>
-                {edge.blockedReason ? <em>{edge.blockedReason}</em> : null}
-              </div>
               </button>
             );
           })}
         </div>
       </section>
 
-      <section className="world-map-panel expedition-map-panel">
+      <section className="expedition-status-card">
-        <PanelHeader title="Known sectors" subtitle="压缩后的节点情报" compact />
+        <div className="expedition-section-head">
-        <div className="map-node-grid expedition-map-grid">
+          <span>探索状态</span>
-          {view.map.places.map((place) => (
-            <article key={place.id} className={`map-node-card ${place.current ? 'current' : ''}`}>
-              <strong>{place.name}</strong>
-              <span>{place.visited ? '已探明' : '待深入'}</span>
-              <small>{place.tags.join(' · ') || 'unknown'}</small>
-            </article>
-          ))}
         </div>
+        <div className="expedition-status-grid">
+          <article className="expedition-status-cell">
+            <small>装备</small>
+            <strong>{expedition.readiness}%</strong>
+          </article>
+          <article className="expedition-status-cell">
+            <small>状态</small>
+            <strong>{Math.round((view.player.stats.life / view.player.maxStats.life) * 100)}%</strong>
+          </article>
+          <article className="expedition-status-cell">
+            <small>负重</small>
+            <strong>
+              {view.player.inventoryUsage}/{view.player.inventoryCapacity}
+            </strong>
+          </article>
+        </div>
+        <button
+          className="primary-button expedition-launch-button"
+          disabled={!launchRoute || isWorking}
+          onClick={() => launchRoute && onSendAction({ type: 'travel', toPlaceId: launchRoute.to })}
+          type="button"
+        >
+          准备出发
+        </button>
       </section>
     </section>
   );

apps/web/src/features/game/components/StatMeter.tsx

@@ -1,9 +1,11 @@
 export function StatMeter({
+  iconSrc,
   label,
   value,
   maxValue,
   tone,
 }: {
+  iconSrc?: string;
   label: string;
   value: number;
   maxValue: number;
@@ -13,6 +15,8 @@ export function StatMeter({
 
   return (
     <article className={`stat-meter tone-${tone}`}>
+      <div className="stat-meter-copy">
+        {iconSrc ? <img className="stat-meter-icon" src={iconSrc} alt="" aria-hidden="true" /> : null}
         <div>
         <span>{label}</span>
         <strong>
@@ -20,6 +24,7 @@ export function StatMeter({
           <small>/{Math.round(maxValue)}</small>
         </strong>
         </div>
+      </div>
       <div className="meter-track">
         <div className="meter-fill" style={{ width: `${percentage}%` }} />
       </div>

apps/web/src/features/game/components/TopHud.tsx

@@ -1,7 +1,8 @@
 import type { GameView } from '@tinywaste/game-core';
 import { getAlertCount, getDominantAlert, getTimeLabels } from '../hudModel';
-import { STAT_LABELS, STAT_ORDER } from '../uiAssets';
+import { getStatusArt, STAT_LABELS, STAT_ORDER } from '../uiAssets';
 import { StatMeter } from './StatMeter';
+import { HudIcon } from './HudIcon';
 
 export function TopHud({
   accountName,
@@ -25,24 +26,28 @@ export function TopHud({
         : 'safe';
 
   return (
-    <header className="top-hud">
+    <header className="top-hud hud-surface hud-surface-wide hud-top-frame">
       <div className="brand-block">
         <div className="brand-mark">TW</div>
         <div className="brand-copy">
-          <p className="eyebrow">Persistent Wasteland Interface</p>
+          <p className="eyebrow">废土生存终端</p>
           <strong>TinyWaste Online</strong>
         </div>
       </div>
 
       <div className="clock-block">
+        <HudIcon name="clock" className="clock-icon" />
+        <div>
           <span>{dayLabel}</span>
           <strong>{clockLabel}</strong>
         </div>
+      </div>
 
       <section className="status-strip">
         {STAT_ORDER.map((statKey) => (
           <StatMeter
             key={statKey}
+            iconSrc={getStatusArt(statKey)}
             label={STAT_LABELS[statKey] ?? statKey}
             maxValue={view.player.maxStats[statKey]}
             tone={statKey === 'radiation' ? 'danger' : statKey === 'life' ? 'health' : 'neutral'}
@@ -60,7 +65,8 @@ export function TopHud({
         <span className={`hud-chip ${alertCount ? 'accent' : ''}`}>
           {alertCount ? `警报 ${alertCount}` : '链路稳定'}
         </span>
-        <button className="secondary-button" onClick={onLogout} disabled={logoutPending}>
+        <button className="secondary-button top-action-button" onClick={onLogout} disabled={logoutPending}>
+          <HudIcon name="logout" className="top-action-icon" />
           退出
         </button>
       </div>

apps/web/src/features/game/hudModel.ts

@@ -10,6 +10,55 @@ export interface EquipmentPreviewEntry {
   isEquipped: boolean;
 }
 
+/** Readiness weights for each survival stat (must sum to 100) */
+const READINESS_WEIGHTS = {
+  life: 34,
+  energy: 28,
+  thirst: 20,
+  hunger: 18,
+} as const;
+
+/** Readiness thresholds for tone classification */
+const READINESS_TONE_THRESHOLD_GOOD = 74;
+const READINESS_TONE_THRESHOLD_WARN = 48;
+
+/** Risk tier boundaries */
+const RISK_LOW_MAX = 0.35;
+const RISK_MID_MAX = 0.65;
+
+/** Survivor metric formula constants */
+const PROTECTION_BASE_ARMOR = 34;
+const PROTECTION_BASE_UNARMORED = 12;
+const PROTECTION_STR_FACTOR = 5;
+const PROTECTION_LIFE_FACTOR = 30;
+
+const STEALTH_AGI_FACTOR = 8;
+const STEALTH_PER_FACTOR = 5;
+const STEALTH_SANITY_FACTOR = 20;
+
+const MOBILITY_AGI_FACTOR = 7;
+const MOBILITY_ENERGY_FACTOR = 42;
+const MOBILITY_LOAD_PENALTY = 18;
+
+const PLACE_ATMOSPHERE: Record<
+  string,
+  {
+    weather: string;
+    temperature: string;
+    wind: string;
+  }
+> = {
+  home: { weather: 'Light rain', temperature: '18°C', wind: 'Wind 12 km/h' },
+  roadside: { weather: 'Cloud break', temperature: '16°C', wind: 'Wind 18 km/h' },
+  old_store: { weather: 'Dust drift', temperature: '20°C', wind: 'Wind 9 km/h' },
+  village_market: { weather: 'Dry overcast', temperature: '22°C', wind: 'Wind 7 km/h' },
+  rain_farm: { weather: 'Wet fog', temperature: '14°C', wind: 'Wind 10 km/h' },
+  city_edge: { weather: 'Soot haze', temperature: '19°C', wind: 'Wind 15 km/h' },
+  subway_entrance: { weather: 'Cold draft', temperature: '11°C', wind: 'Wind 6 km/h' },
+  sewer: { weather: 'Toxic mist', temperature: '13°C', wind: 'Air still' },
+  vault_gate: { weather: 'Ash fall', temperature: '9°C', wind: 'Wind 4 km/h' },
+};
+
 export function edgeDestination(view: GameView, edge: EdgeView) {
   return view.map.places.find((place) => place.id === edge.to);
 }
@@ -38,12 +87,16 @@ export function getCurrentPlace(view: GameView) {
   return view.map.places.find((place) => place.current) ?? null;
 }
 
+export function getPlaceAtmosphere(placeId: string) {
+  return PLACE_ATMOSPHERE[placeId] ?? { weather: 'Dry static', temperature: '17°C', wind: 'Wind 10 km/h' };
+}
+
 export function getLatestLog(view: GameView) {
   return view.logs[0] ?? null;
 }
 
-export function getVisibleInventory(view: GameView, limit = 6) {
+export function getVisibleRoutes(view: GameView, limit = 3) {
-  return view.player.inventory.slice(0, limit);
+  return view.map.edges.slice(0, limit);
 }
 
 export function getQuickUseItems(view: GameView, limit = 6) {
@@ -132,10 +185,10 @@ export function getStatusEffects(view: GameView) {
 export function getExpeditionStatus(view: GameView) {
   const { stats, maxStats } = view.player;
   const readiness = Math.round(
-    (stats.life / maxStats.life) * 34 +
+    (stats.life / maxStats.life) * READINESS_WEIGHTS.life +
-      (stats.energy / maxStats.energy) * 28 +
+      (stats.energy / maxStats.energy) * READINESS_WEIGHTS.energy +
-      (stats.thirst / maxStats.thirst) * 20 +
+      (stats.thirst / maxStats.thirst) * READINESS_WEIGHTS.thirst +
-      (stats.hunger / maxStats.hunger) * 18,
+      (stats.hunger / maxStats.hunger) * READINESS_WEIGHTS.hunger,
   );
   const loadPercent = Math.round((view.player.inventoryUsage / view.player.inventoryCapacity) * 100);
   const threatCount = view.survival.alerts.length;
@@ -144,7 +197,7 @@ export function getExpeditionStatus(view: GameView) {
     readiness,
     loadPercent,
     threatCount,
-    tone: readiness >= 74 && threatCount === 0 ? 'good' : readiness >= 48 ? 'warn' : 'danger',
+    tone: readiness >= READINESS_TONE_THRESHOLD_GOOD && threatCount === 0 ? 'good' : readiness >= READINESS_TONE_THRESHOLD_WARN ? 'warn' : 'danger',
   };
 }
 
@@ -152,17 +205,17 @@ export function getSurvivorMetrics(view: GameView) {
   const protection = Math.min(
     100,
     Math.round(
-      (view.player.equipment.body ? 34 : 12) +
+      (view.player.equipment.body ? PROTECTION_BASE_ARMOR : PROTECTION_BASE_UNARMORED) +
-        view.player.attributes.str * 5 +
+        view.player.attributes.str * PROTECTION_STR_FACTOR +
-        (view.player.stats.life / view.player.maxStats.life) * 30,
+        (view.player.stats.life / view.player.maxStats.life) * PROTECTION_LIFE_FACTOR,
     ),
   );
   const stealth = Math.min(
     100,
     Math.round(
-      view.player.attributes.agi * 8 +
+      view.player.attributes.agi * STEALTH_AGI_FACTOR +
-        view.player.attributes.per * 5 +
+        view.player.attributes.per * STEALTH_PER_FACTOR +
-        (view.player.stats.sanity / view.player.maxStats.sanity) * 20,
+        (view.player.stats.sanity / view.player.maxStats.sanity) * STEALTH_SANITY_FACTOR,
     ),
   );
   const mobility = Math.max(
@@ -170,9 +223,9 @@ export function getSurvivorMetrics(view: GameView) {
     Math.min(
       100,
       Math.round(
-        view.player.attributes.agi * 7 +
+        view.player.attributes.agi * MOBILITY_AGI_FACTOR +
-          (view.player.stats.energy / view.player.maxStats.energy) * 42 -
+          (view.player.stats.energy / view.player.maxStats.energy) * MOBILITY_ENERGY_FACTOR -
-          (view.player.inventoryUsage / view.player.inventoryCapacity) * 18,
+          (view.player.inventoryUsage / view.player.inventoryCapacity) * MOBILITY_LOAD_PENALTY,
       ),
     ),
   );
@@ -271,8 +324,8 @@ export function getLoadoutEntries(view: GameView) {
 }
 
 export function getRouteRiskTier(risk: number) {
-  if (risk <= 0.35) return { label: '低风险', tone: 'safe' as const };
+  if (risk <= RISK_LOW_MAX) return { label: '低风险', tone: 'safe' as const };
-  if (risk <= 0.65) return { label: '中风险', tone: 'warn' as const };
+  if (risk <= RISK_MID_MAX) return { label: '中风险', tone: 'warn' as const };
   return { label: '高风险', tone: 'danger' as const };
 }
 

apps/web/src/features/game/uiAssets.ts

@@ -3,6 +3,7 @@ import type { EquipSlot } from '@tinywaste/game-core';
 
 const GENERATED_ROOT = '/generated';
 const GENERATED_UI_ROOT = `${GENERATED_ROOT}/ui`;
+const GENERATED_HUD_ROOT = `${GENERATED_ROOT}/hud`;
 
 export const PLACE_ART: Record<string, string> = {
   home: `${GENERATED_ROOT}/home-camp.png`,
@@ -81,6 +82,49 @@ const ITEM_TO_EQUIPMENT_ART: Record<string, string> = {
   leather_coat: `${GENERATED_UI_ROOT}/equipment/body-coat.png`,
 };
 
+export const HUD_REFERENCE_ART = `${GENERATED_HUD_ROOT}/reference/tinywaste-hud-reference.png`;
+
+export const HUD_CHROME_ART = {
+  panelWide: `${GENERATED_HUD_ROOT}/chrome/panel-wide.png`,
+  panelTall: `${GENERATED_HUD_ROOT}/chrome/panel-tall.png`,
+  panelCard: `${GENERATED_HUD_ROOT}/chrome/panel-card.png`,
+  panelCompact: `${GENERATED_HUD_ROOT}/chrome/panel-compact.png`,
+  routeCardIdle: `${GENERATED_HUD_ROOT}/chrome/route-card-idle.png`,
+  routeCardActive: `${GENERATED_HUD_ROOT}/chrome/route-card-active.png`,
+  actionCardPrimary: `${GENERATED_HUD_ROOT}/chrome/action-card-primary.png`,
+  actionCardSecondary: `${GENERATED_HUD_ROOT}/chrome/action-card-secondary.png`,
+  statusCapsule: `${GENERATED_HUD_ROOT}/chrome/status-capsule.png`,
+  statusMeter: `${GENERATED_HUD_ROOT}/chrome/status-meter.png`,
+  quickStrip: `${GENERATED_HUD_ROOT}/chrome/quick-strip.png`,
+  quickStripLocked: `${GENERATED_HUD_ROOT}/chrome/quick-strip-locked.png`,
+  dockTabIdle: `${GENERATED_HUD_ROOT}/chrome/dock-tab-idle.png`,
+  dockTabActive: `${GENERATED_HUD_ROOT}/chrome/dock-tab-active.png`,
+  warningStrip: `${GENERATED_HUD_ROOT}/chrome/warning-strip.png`,
+  dividerOrnament: `${GENERATED_HUD_ROOT}/chrome/divider-ornament.png`,
+} as const;
+
+export const HUD_ICON_ART = {
+  shelter: `${GENERATED_HUD_ROOT}/icons/shelter.png`,
+  expedition: `${GENERATED_HUD_ROOT}/icons/expedition.png`,
+  inventory: `${GENERATED_HUD_ROOT}/icons/inventory.png`,
+  crafting: `${GENERATED_HUD_ROOT}/icons/crafting.png`,
+  skills: `${GENERATED_HUD_ROOT}/icons/skills.png`,
+  factions: `${GENERATED_HUD_ROOT}/icons/factions.png`,
+  map: `${GENERATED_HUD_ROOT}/icons/map.png`,
+  weather: `${GENERATED_HUD_ROOT}/icons/weather.png`,
+  clock: `${GENERATED_HUD_ROOT}/icons/clock.png`,
+  routePin: `${GENERATED_HUD_ROOT}/icons/route-pin.png`,
+  rest: `${GENERATED_HUD_ROOT}/icons/rest.png`,
+  repair: `${GENERATED_HUD_ROOT}/icons/repair.png`,
+  scavenge: `${GENERATED_HUD_ROOT}/icons/scavenge.png`,
+  signal: `${GENERATED_HUD_ROOT}/icons/signal.png`,
+  settings: `${GENERATED_HUD_ROOT}/icons/settings.png`,
+  logout: `${GENERATED_HUD_ROOT}/icons/logout.png`,
+} as const;
+
+export type HudChromeAsset = keyof typeof HUD_CHROME_ART;
+export type HudIconAsset = keyof typeof HUD_ICON_ART;
+
 export function getPlaceHeroStyle(placeId: string): CSSProperties {
   return {
     backgroundImage: `linear-gradient(180deg, rgba(7, 7, 7, 0.12), rgba(7, 7, 7, 0.84)), linear-gradient(90deg, rgba(220, 146, 65, 0.18), rgba(10, 10, 10, 0.05) 58%), url(${PLACE_ART[placeId] ?? ''})`,
@@ -117,4 +161,10 @@ export function getEquipmentArt(itemId?: string, slot?: EquipSlot | 'head' | 'ba
   return undefined;
 }
 
-export const CHARACTER_PREVIEW_ART = `${GENERATED_UI_ROOT}/character-preview.png`;
+export function getHudChromeArt(name: HudChromeAsset) {
+  return HUD_CHROME_ART[name];
+}
+
+export function getHudIconArt(name: HudIconAsset) {
+  return HUD_ICON_ART[name];
+}

apps/web/src/features/shared/components/ErrorBoundary.tsx

@@ -0,0 +1,82 @@
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error('[ErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+
+      return (
+        <div
+          style={{
+            display: 'grid',
+            placeItems: 'center',
+            minHeight: '100dvh',
+            padding: '2rem',
+            color: '#efe2ce',
+            background: '#070604',
+            fontFamily: "'Chakra Petch', sans-serif",
+          }}
+        >
+          <div
+            style={{
+              maxWidth: 480,
+              textAlign: 'center',
+              padding: '2rem',
+              borderRadius: 20,
+              border: '1px solid rgba(225, 109, 76, 0.3)',
+              background: 'rgba(16, 13, 10, 0.94)',
+            }}
+          >
+            <h2 style={{ margin: '0 0 0.75rem', fontSize: '1.3rem', letterSpacing: '0.08em' }}>
+              界面发生异常
+            </h2>
+            <p style={{ margin: '0 0 1.25rem', color: '#a38f73', lineHeight: 1.5 }}>
+              {this.state.error?.message ?? '渲染过程中出现未知错误，请尝试刷新页面。'}
+            </p>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                minHeight: 48,
+                padding: '0 2rem',
+                borderRadius: 14,
+                border: '1px solid rgba(228, 158, 75, 0.42)',
+                background: 'linear-gradient(135deg, #eeab52, #c86d22)',
+                color: '#160f08',
+                fontWeight: 700,
+                cursor: 'pointer',
+                fontSize: '0.9rem',
+              }}
+            >
+              刷新页面
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

apps/web/src/features/shared/components/PanelHeader.tsx

@@ -2,14 +2,23 @@ export function PanelHeader({
   title,
   subtitle,
   compact = false,
+  iconSrc,
+  iconAlt = '',
 }: {
   title: string;
   subtitle: string;
   compact?: boolean;
+  iconSrc?: string;
+  iconAlt?: string;
 }) {
   return (
     <header className={`panel-header ${compact ? 'compact' : ''}`}>
-      <div>
+      <div className="panel-header-copy">
+        {iconSrc ? (
+          <span className="panel-header-mark">
+            <img src={iconSrc} alt={iconAlt} aria-hidden={iconAlt ? undefined : true} />
+          </span>
+        ) : null}
         <h2>{title}</h2>
         <p>{subtitle}</p>
       </div>

apps/web/src/index.css

@@ -1,26 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
-html,
-body,
-#root {
-  height: 100%;
-}
-
 html {
   font-family: 'Chakra Petch', sans-serif;
 }
-
-body {
-  min-width: 320px;
-}
-
-code,
-pre,
-button,
-input {
-  font-family: inherit;
-}
-
-#root {
-  min-height: 100vh;
-}

docs/07-UX与界面信息架构.md

@@ -9,7 +9,7 @@
   - 我现在状态如何（生存状态与主要威胁）
   - 我下一步能做什么（行动入口与成本）
 - 避免“信息黑箱”：所有关键数值变化必须可追溯原因
-- 支持碎片化：移动端单手可操作，任何时候可暂停/保存
+- 支持 PC / 平板横屏的单屏 HUD 体验，任何时候可暂停/保存
 
 ## 7.2 信息架构（IA）
 
@@ -138,10 +138,13 @@ flowchart TB
 - PC：
   - 三栏布局（状态/背包/主操作+信息）
   - 鼠标悬浮展示细节
-- Mobile：
+- Tablet（横屏）：
-  - 单栏纵向布局
+  - 保持单屏 HUD，不切成长网页
-  - 背包与详情用抽屉/底部弹层
+  - 缩窄三栏宽度，优先保住顶部状态带与底部模式坞站
-  - 长按替代悬浮
+  - 背包、任务、蓝图通过弹层进入
+- 当前阶段不适配小屏手机：
+  - 不为 860px 以下宽度继续补专门的游戏体验设计
+  - 若后续启动移动版，再单独设计纵向信息架构
 
 ## 7.8 界面清单（MVP）
 
@@ -153,4 +156,3 @@ flowchart TB
 - 战斗
 - 事件详情（可选）
 - 设置（音量/文本速度/难度/存档管理）
-

docs/12-前端HUD架构与资产管线.md

@@ -91,13 +91,17 @@ UI 组件 <- Query Cache <- 最新 GameView
 所有当前接入的 GPT-image-2 资产位于：
 
 - `apps/web/public/generated/`：地点背景
-- `apps/web/public/generated/ui/character-preview.png`：角色立绘
 - `apps/web/public/generated/ui/item-atlas.png`：物资图集原图
 - `apps/web/public/generated/ui/equipment-atlas.png`：装备图集原图
 - `apps/web/public/generated/ui/status-atlas.png`：生存状态图集原图
 - `apps/web/public/generated/ui/items/*`：切分后的物资图标
 - `apps/web/public/generated/ui/equipment/*`：切分后的装备槽素材
 - `apps/web/public/generated/ui/status/*`：切分后的生存状态图标
+- `apps/web/public/generated/hud/reference/tinywaste-hud-reference.png`：当前唯一 HUD 参考图（无右侧人物）
+- `apps/web/public/generated/hud/atlases/*`：HUD chrome / icon atlas 原图与透明版
+- `apps/web/public/generated/hud/chrome/*`：切分后的 HUD 框体素材
+- `apps/web/public/generated/hud/icons/*`：切分后的 HUD 功能图标
+- `apps/web/public/generated/hud/manifest.json`：HUD 资产清单
 
 对应映射入口：
 
@@ -108,7 +112,9 @@ UI 组件 <- Query Cache <- 最新 GameView
 - 地点图使用整图背景，服务于中央场景和左侧路线卡。
 - 物资与装备图使用 atlas + 裁切结果，服务于快捷栏、库存卡、角色槽位。
 - 生存状态图使用 atlas + 裁切结果，服务于状态效果卡和后续中断提示。
+- HUD chrome 与 HUD icon 统一走 `apps/web/public/generated/hud/`，并通过 `uiAssets.ts` 暴露。
 - 所有引用都走 `uiAssets.ts`，避免组件里散落硬编码路径。
+- HUD atlas 的透明化与切分流程由 `scripts/slice_hud_atlas.py` 和 `remove_chroma_key.py` 组合完成。
 
 ## 12.6 HUD 信息职责
 
@@ -137,12 +143,12 @@ UI 组件 <- Query Cache <- 最新 GameView
 
 ### 12.6.4 LoadoutPanel
 
-- 角色 / 背包 / 任务三态切换
+- Equipment terminal 头部与负载状态
-- 角色立绘与槽位矩阵
+- 2x3 装备槽矩阵
-- 属性与状态效果
+- 生存能力指标（防护 / 潜行 / 机动）
-- 快捷栏
+- 生存告警条
-- 完整库存与避难所仓储管理
+- Ready pack 资源终端（快速补给 + 仓储摘要）
-- 任务与休整
+- 打开背包 / 仓储弹层入口
 
 ### 12.6.5 BottomDock
 
@@ -156,17 +162,17 @@ UI 组件 <- Query Cache <- 最新 GameView
 
 - 维持单屏阅读，整页不滚动，滚动只发生在内部面板。
 - 中央区优先展示场景与决策，避免全文字堆叠。
-- 右侧区优先视觉化角色与装备，而不是继续做普通列表。
+- 右侧区不再展示人物立绘，改为装备、警报与资源终端。
 - 底部区承担模式切换和系统导航，强化“游戏 HUD”心智。
+- HUD chrome 资产只重点压在小模块和导航件上，大面板只保留轻量纹理，避免再次出现网页卡片感。
 
 ## 12.8 下一步扩展建议
 
 下一轮优先项：
 
 1. 继续补 GPT-image-2 资产：
-   - 头部、侧武器、弹药、医疗、食物第二批图集
+   - 第二批 HUD chrome（战斗态、事件态、模态终端）
    - 天气、辐射、事件状态专用小图标
-2. 将 `LoadoutPanel` 的 tab 与底部导航进一步联动为统一模式系统。
+2. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
-3. 为 `CommandCenter` 增加战斗专属视图和事件专属视图，而不是完全依赖弹层。
+3. 为物资卡补充更精细的分类过滤和排序逻辑。
-4. 为物资卡补充更精细的分类过滤和排序逻辑。
+4. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。
-5. 引入可配置的 HUD 主题参数，支撑不同章节或区域切换皮肤。

packages/content/src/index.ts

@@ -1070,6 +1070,30 @@ export const gameContent: GameContent = {
         },
       ],
     },
+    road_wanderer: {
+      id: 'road_wanderer',
+      title: '路边的求助声',
+      text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
+      trigger: 'travel',
+      options: [
+        {
+          id: 'wanderer_share',
+          text: '给他一瓶浑水',
+          conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
+          successEffects: [
+            { type: 'remove-item', itemId: 'water_dirty', count: 1 },
+            { type: 'add-item', itemId: 'herb_bundle', count: 1 },
+          ],
+          successText: '那人把最后一束干草药塞给了你。',
+        },
+        {
+          id: 'wanderer_leave',
+          text: '继续赶路',
+          successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
+          successText: '你没有回头，但那声"算了"跟了你一路。',
+        },
+      ],
+    },
   },
   enemies: {
     rat_swarm: {
@@ -1217,29 +1241,4 @@ export const gameContent: GameContent = {
   travelEventPool: ['road_wanderer'],
 };
 
-gameContent.events.road_wanderer = {
-  id: 'road_wanderer',
-  title: '路边的求助声',
-  text: '一辆翻覆的车旁边，有人虚弱地问你有没有水。',
-  trigger: 'travel',
-  options: [
-    {
-      id: 'wanderer_share',
-      text: '给他一瓶浑水',
-      conditions: [{ kind: 'has-item', itemId: 'water_dirty', count: 1 }],
-      successEffects: [
-        { type: 'remove-item', itemId: 'water_dirty', count: 1 },
-        { type: 'add-item', itemId: 'herb_bundle', count: 1 },
-      ],
-      successText: '那人把最后一束干草药塞给了你。',
-    },
-    {
-      id: 'wanderer_leave',
-      text: '继续赶路',
-      successEffects: [{ type: 'change-stat', stat: 'sanity', amount: -2 }],
-      successText: '你没有回头，但那声“算了”跟了你一路。',
-    },
-  ],
-};
-
 export default gameContent;

scripts/slice_hud_atlas.py

@@ -0,0 +1,150 @@
+#!/usr/bin/env python3
+
+from __future__ import annotations
+
+import argparse
+from pathlib import Path
+
+from PIL import Image
+
+
+WHITE_THRESHOLD = 245
+GREEN_KEY = (0, 255, 0)
+
+
+def is_gutter(sample: list[tuple[int, int, int, int]]) -> bool:
+    white_pixels = 0
+    opaque_pixels = 0
+
+    for red, green, blue, alpha in sample:
+        if alpha == 0:
+            continue
+        opaque_pixels += 1
+        if red >= WHITE_THRESHOLD and green >= WHITE_THRESHOLD and blue >= WHITE_THRESHOLD:
+            white_pixels += 1
+
+    if opaque_pixels == 0:
+        return False
+
+    return white_pixels / opaque_pixels >= 0.92
+
+
+def find_segments(mask: list[bool]) -> list[tuple[int, int]]:
+    segments: list[tuple[int, int]] = []
+    start: int | None = None
+
+    for index, is_gap in enumerate(mask):
+        if not is_gap and start is None:
+            start = index
+        if is_gap and start is not None:
+            segments.append((start, index))
+            start = None
+
+    if start is not None:
+        segments.append((start, len(mask)))
+
+    return segments
+
+
+def detect_grid(image: Image.Image) -> tuple[list[tuple[int, int]], list[tuple[int, int]]]:
+    rgba = image.convert('RGBA')
+    width, height = rgba.size
+    pixels = rgba.load()
+
+    column_mask = []
+    for x in range(width):
+        sample = [pixels[x, y] for y in range(height)]
+        column_mask.append(is_gutter(sample))
+
+    row_mask = []
+    for y in range(height):
+        sample = [pixels[x, y] for x in range(width)]
+        row_mask.append(is_gutter(sample))
+
+    columns = [segment for segment in find_segments(column_mask) if segment[1] - segment[0] > 48]
+    rows = [segment for segment in find_segments(row_mask) if segment[1] - segment[0] > 48]
+
+    return columns, rows
+
+
+def remove_chroma(image: Image.Image) -> Image.Image:
+    rgba = image.convert('RGBA')
+    cleaned = Image.new('RGBA', rgba.size)
+
+    for x in range(rgba.width):
+        for y in range(rgba.height):
+            red, green, blue, alpha = rgba.getpixel((x, y))
+            if alpha == 0:
+                cleaned.putpixel((x, y), (0, 0, 0, 0))
+                continue
+
+            dominant_green = green - max(red, blue)
+            color_distance = abs(red - GREEN_KEY[0]) + abs(green - GREEN_KEY[1]) + abs(blue - GREEN_KEY[2])
+
+            if color_distance <= 60:
+                cleaned.putpixel((x, y), (0, 0, 0, 0))
+            elif green > 120 and dominant_green > 26:
+                despilled_green = min(green, max(red, blue) + 10)
+                new_alpha = max(0, min(alpha, 255 - dominant_green * 2))
+                if new_alpha <= 12:
+                    cleaned.putpixel((x, y), (0, 0, 0, 0))
+                else:
+                    cleaned.putpixel((x, y), (red, despilled_green, blue, new_alpha))
+            else:
+                cleaned.putpixel((x, y), (red, green, blue, alpha))
+
+    return cleaned
+
+
+def trim_alpha(image: Image.Image, padding: int = 8) -> Image.Image:
+    bbox = image.getbbox()
+    if bbox is None:
+        return image
+
+    left = max(0, bbox[0] - padding)
+    top = max(0, bbox[1] - padding)
+    right = min(image.width, bbox[2] + padding)
+    bottom = min(image.height, bbox[3] + padding)
+    return image.crop((left, top, right, bottom))
+
+
+def save_cells(image: Image.Image, names: list[str], output_dir: Path) -> list[str]:
+    columns, rows = detect_grid(image)
+    expected = len(columns) * len(rows)
+    if expected != len(names):
+        raise ValueError(
+            f'Grid detection found {len(columns)} columns x {len(rows)} rows = {expected} cells, '
+            f'but {len(names)} names were provided.'
+        )
+
+    written: list[str] = []
+    index = 0
+    for row_start, row_end in rows:
+        for col_start, col_end in columns:
+            cell = image.crop((col_start, row_start, col_end, row_end))
+            cleaned = trim_alpha(remove_chroma(cell))
+            target = output_dir / f'{names[index]}.png'
+            cleaned.save(target)
+            written.append(target.name)
+            index += 1
+
+    return written
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description='Slice a HUD atlas with white gutters and green chroma background.')
+    parser.add_argument('--input', required=True, type=Path)
+    parser.add_argument('--output-dir', required=True, type=Path)
+    parser.add_argument('--names', required=True, help='Comma-separated output filenames without extension.')
+    args = parser.parse_args()
+
+    names = [name.strip() for name in args.names.split(',') if name.strip()]
+    args.output_dir.mkdir(parents=True, exist_ok=True)
+
+    atlas = Image.open(args.input)
+    written = save_cells(atlas, names, args.output_dir)
+    print('\n'.join(written))
+
+
+if __name__ == '__main__':
+    main()