实施SHINOBI WAY游戏中的Split-Panel Combat UI（模式A）。当用户想要创建水平对抗战斗布局、角色面板、行动码头、阶段标题、VS分隔符或模式A战斗UI系统的任何组件时使用。按照既定架构指导组件创建。

架构概览

┌───────────────────────────────────────────────────┐
│  TURN INDICATOR  │  PHASE PIPELINE  │  MODIFIERS  │  ← PhaseHeader
├──────────────────┴───────┬───────────┴────────────┤
│                          │                        │
│     PLAYER PANEL         │     ENEMY PANEL        │  ← ConfrontationZone
│     (CharacterPanel)     │     (CharacterPanel)   │
│                          │                        │
├──────────────────────────┴────────────────────────┤
│  QUICK ACTIONS (SIDE/TOGGLE)  │   MAIN ACTIONS    │  ← ActionDock
└───────────────────────────────┴───────────────────┘

组件层级

Combat.tsx (场景编排器)
├── CombatLayout.tsx (CSS Grid容器)
│   ├── PhaseHeader.tsx (顶部状态栏)
│   │   ├── TurnIndicator
│   │   ├── PhasePipeline
│   │   ├── SideActionCounter
│   │   └── ApproachModifier
│   │
│   ├── ConfrontationZone.tsx (战斗区域)
│   │   ├── CharacterPanel.tsx (玩家变体)
│   │   │   ├── CharacterSprite
│   │   │   ├── IdentityBar
│   │   │   ├── ResourceBars (HP/CP)
│   │   │   └── BuffBar
│   │   │
│   │   ├── VSDivider.tsx (中心徽标)
│   │   │
│   │   └── CharacterPanel.tsx (敌人变体)
│   │       ├── CharacterSprite
│   │       ├── IdentityBar (名称、等级、元素)
│   │       ├── HealthBar
│   │       ├── DefenseStats
│   │       └── BuffBar
│   │
│   └── ActionDock.tsx (技能栏)
│       ├── QuickActionsSection
│       │   ├── QuickActionCard (SIDE技能)
│       │   └── QuickActionCard (TOGGLE技能)
│       ├── MainActionsSection
│       │   └── MainActionCard (MAIN技能)
│       └── ControlButtons (Auto, End Turn)
│
└── FloatingTextLayer (z-50, 不变)

文件结构

src/components/combat/
├── index.ts                  # 桶导出
├── CombatLayout.tsx          # 网格容器
├── PhaseHeader.tsx           # 顶部状态栏
├── ConfrontationZone.tsx     # 玩家与敌人区域
├── CharacterPanel.tsx        # 可重用角色显示
├── VSDivider.tsx             # 中心VS徽标
├── ActionDock.tsx            # 底部技能栏
├── QuickActionCard.tsx       # 紧凑SIDE/TOGGLE卡片
└── MainActionCard.tsx        # 大型MAIN技能卡片

实施工作流程

第1步：确定目标组件

询问用户要实现哪个组件：

CombatLayout - 新实施从这里开始
PhaseHeader - 顶部状态栏
ConfrontationZone - 带有两个面板的战斗区域
CharacterPanel - 单独角色显示
VSDivider - 中心徽标和效果
ActionDock - 底部技能栏
QuickActionCard - 紧凑技能卡片变体
MainActionCard - 大型技能卡片变体

第2步：加载组件参考

根据选择，加载适当的参考：

布局/结构：见layout-specs.md
组件属性：见component-interfaces.md
样式指南：见styling-tokens.md
动画规范：见animations.md

第3步：生成组件代码

遵循组件模板模式：

import React from 'react';
import { cn } from '@/lib/utils'; // 如果使用cn工具

interface ComponentNameProps {
  // 来自component-interfaces.md的属性
}

export const ComponentName: React.FC<ComponentNameProps> = ({
  // 解构属性
}) => {
  return (
    <div className={cn(
      // 来自styling-tokens.md的基础样式
      // 条件样式
    )}>
      {/* 组件内容 */}
    </div>
  );
};

第4步：连接到Combat.tsx

组件创建后：

从components/combat/index.ts导出
在Combat.tsx中导入
替换相应部分
从现有状态传递所需属性

快速实施命令

创建所有文件（脚手架）

# 创建目录
mkdir -p src/components/combat

# 创建所有组件文件
touch src/components/combat/{index,CombatLayout,PhaseHeader,ConfrontationZone,CharacterPanel,VSDivider,ActionDock,QuickActionCard,MainActionCard}.tsx

桶导出模板

// src/components/combat/index.ts
export { CombatLayout } from './CombatLayout';
export { PhaseHeader } from './PhaseHeader';
export { ConfrontationZone } from './ConfrontationZone';
export { CharacterPanel } from './CharacterPanel';
export { VSDivider } from './VSDivider';
export { ActionDock } from './ActionDock';
export { QuickActionCard } from './QuickActionCard';
export { MainActionCard } from './MainActionCard';

从现有代码映射属性

从App.tsx → Combat.tsx（不变）

player: Player
enemy: Enemy
turnState: 'PLAYER' | 'ENEMY_TURN'
turnPhase: TurnPhaseState
combatState: CombatState
onUseSkill: (skill: Skill) => void
onPassTurn: () => void
onToggleAutoCombat: () => void
autoCombatEnabled: boolean

Combat.tsx → 新组件

// PhaseHeader
turnState, turnPhase, combatState.approach

// ConfrontationZone
player, enemy, playerStats, enemyStats

// CharacterPanel (player)
character: player, stats: playerStats, variant: 'player'

// CharacterPanel (enemy)
character: enemy, stats: enemyStats, variant: 'enemy'

// ActionDock
skills: player.skills, turnPhase, onUseSkill, onPassTurn

迁移策略

第1阶段：布局基础

创建CombatLayout.tsx带有CSS Grid
创建占位符组件
在Combat.tsx中添加功能标志

第2阶段：组件提取

实施CharacterPanel（从PlayerHUD + CinematicViewscreen中提取）
实施ActionDock（从技能网格中提取）
实施PhaseHeader（从内联指示器中提取）

第3阶段：视觉抛光

添加VSDivider带有效果
实施动画
调整浮动文本位置

第4阶段：清理

移除旧剧院模式代码
移除功能标志
更新测试

参考文件

layout-specs.md - CSS Grid结构，响应式断点
component-interfaces.md - 所有组件的TypeScript接口
styling-tokens.md - 颜色、间距、排版令牌
animations.md - 动画关键帧和过渡

现有代码参考

实施时参考这些现有文件：

新组件	参考自
CharacterPanel (player)	`src/components/PlayerHUD.tsx`
CharacterPanel (enemy)	`src/scenes/Combat.tsx` 行 113-305
ActionDock	`src/scenes/Combat.tsx` 行 308-607
QuickActionCard	`src/components/SkillCard.tsx`
MainActionCard	`src/components/SkillCard.tsx`
PhaseHeader	`src/scenes/Combat.tsx` 行 311-328