1027 lines
24 KiB
Markdown
1027 lines
24 KiB
Markdown
# 前端技术架构详设文档
|
||
|
||
> **文档版本**: v1.0
|
||
> **撰写人**: 前端架构师
|
||
> **创建日期**: 2024年9月11日
|
||
|
||
## 1. 前端架构总览
|
||
|
||
### 1.1 技术栈详细说明
|
||
|
||
```typescript
|
||
// 核心技术栈配置
|
||
{
|
||
"framework": "Taro 4.x", // 跨端开发框架
|
||
"ui": "React 18.2.0", // UI框架
|
||
"language": "TypeScript 5.0+", // 开发语言
|
||
"state": "Zustand 4.4.0", // 状态管理
|
||
"css": "Sass + CSS Modules", // 样式方案
|
||
"build": "Webpack 5 + SWC", // 构建工具
|
||
"lint": "ESLint + Prettier", // 代码规范
|
||
"test": "Jest + Testing Library" // 测试框架
|
||
}
|
||
```
|
||
|
||
### 1.2 项目目录结构
|
||
|
||
```
|
||
src/
|
||
├── components/ # 通用组件
|
||
│ ├── GameBoard/ # 游戏棋盘组件
|
||
│ ├── PlaneShape/ # 飞机形状组件
|
||
│ ├── Modal/ # 模态框组件
|
||
│ └── Loading/ # 加载组件
|
||
├── pages/ # 页面组件
|
||
│ ├── entry/ # 入口页面
|
||
│ ├── room/ # 房间相关页面
|
||
│ └── game/ # 游戏页面
|
||
├── hooks/ # 自定义Hooks
|
||
│ ├── useGame.ts # 游戏逻辑Hook
|
||
│ ├── useWebSocket.ts # WebSocket Hook
|
||
│ └── useAuth.ts # 认证Hook
|
||
├── store/ # 状态管理
|
||
│ ├── gameStore.ts # 游戏状态
|
||
│ ├── userStore.ts # 用户状态
|
||
│ └── roomStore.ts # 房间状态
|
||
├── services/ # 业务服务
|
||
│ ├── api.ts # API封装
|
||
│ ├── websocket.ts # WebSocket服务
|
||
│ └── storage.ts # 本地存储
|
||
├── utils/ # 工具函数
|
||
│ ├── gameLogic.ts # 游戏逻辑工具
|
||
│ ├── helpers.ts # 通用工具
|
||
│ └── constants.ts # 常量定义
|
||
└── styles/ # 样式文件
|
||
├── variables.scss # 变量定义
|
||
├── mixins.scss # 混合器
|
||
└── global.scss # 全局样式
|
||
```
|
||
|
||
## 2. 状态管理架构
|
||
|
||
### 2.1 Zustand Store 设计
|
||
|
||
```typescript
|
||
// 用户状态Store
|
||
interface UserState {
|
||
user: User | null
|
||
isAuthenticated: boolean
|
||
login: (userInfo: WxUserInfo) => Promise<void>
|
||
logout: () => void
|
||
updateProfile: (profile: Partial<User>) => void
|
||
}
|
||
|
||
export const useUserStore = create<UserState>((set, get) => ({
|
||
user: null,
|
||
isAuthenticated: false,
|
||
|
||
login: async (userInfo: WxUserInfo) => {
|
||
try {
|
||
const user = await apiService.login(userInfo)
|
||
set({ user, isAuthenticated: true })
|
||
// 持久化存储
|
||
await storage.setUser(user)
|
||
} catch (error) {
|
||
throw new Error('登录失败')
|
||
}
|
||
},
|
||
|
||
logout: () => {
|
||
set({ user: null, isAuthenticated: false })
|
||
storage.clearUser()
|
||
},
|
||
|
||
updateProfile: (profile: Partial<User>) => {
|
||
const currentUser = get().user
|
||
if (currentUser) {
|
||
set({ user: { ...currentUser, ...profile } })
|
||
}
|
||
}
|
||
}))
|
||
|
||
// 游戏状态Store
|
||
interface GameState {
|
||
// 当前游戏状态
|
||
currentGame: GameSession | null
|
||
gamePhase: GamePhase
|
||
currentPlayer: string
|
||
myBoard: GameBoard
|
||
opponentBoard: GameBoard
|
||
|
||
// 操作方法
|
||
initGame: (gameData: GameInitData) => void
|
||
placePlane: (plane: PlaneData) => boolean
|
||
attack: (position: Position) => void
|
||
updateGameState: (state: GameStateUpdate) => void
|
||
resetGame: () => void
|
||
}
|
||
|
||
export const useGameStore = create<GameState>((set, get) => ({
|
||
currentGame: null,
|
||
gamePhase: GamePhase.WAITING,
|
||
currentPlayer: '',
|
||
myBoard: createEmptyBoard(),
|
||
opponentBoard: createEmptyBoard(),
|
||
|
||
initGame: (gameData: GameInitData) => {
|
||
set({
|
||
currentGame: gameData.session,
|
||
gamePhase: GamePhase.PLACING,
|
||
currentPlayer: gameData.firstPlayer,
|
||
myBoard: createEmptyBoard(),
|
||
opponentBoard: createEmptyBoard()
|
||
})
|
||
},
|
||
|
||
placePlane: (plane: PlaneData): boolean => {
|
||
const state = get()
|
||
const newBoard = GameLogic.placePlane(state.myBoard, plane)
|
||
|
||
if (newBoard) {
|
||
set({ myBoard: newBoard })
|
||
return true
|
||
}
|
||
return false
|
||
},
|
||
|
||
attack: (position: Position) => {
|
||
const state = get()
|
||
if (state.gamePhase !== GamePhase.BATTLING) return
|
||
|
||
// 发送攻击请求
|
||
websocketService.sendAttack(position)
|
||
},
|
||
|
||
updateGameState: (update: GameStateUpdate) => {
|
||
set(state => ({
|
||
...state,
|
||
...update
|
||
}))
|
||
},
|
||
|
||
resetGame: () => {
|
||
set({
|
||
currentGame: null,
|
||
gamePhase: GamePhase.WAITING,
|
||
currentPlayer: '',
|
||
myBoard: createEmptyBoard(),
|
||
opponentBoard: createEmptyBoard()
|
||
})
|
||
}
|
||
}))
|
||
|
||
// 房间状态Store
|
||
interface RoomState {
|
||
currentRoom: Room | null
|
||
availableRooms: Room[]
|
||
connectionStatus: ConnectionStatus
|
||
|
||
createRoom: () => Promise<Room>
|
||
joinRoom: (roomCode: string) => Promise<boolean>
|
||
leaveRoom: () => void
|
||
refreshRoomList: () => Promise<void>
|
||
}
|
||
|
||
export const useRoomStore = create<RoomState>((set, get) => ({
|
||
currentRoom: null,
|
||
availableRooms: [],
|
||
connectionStatus: ConnectionStatus.DISCONNECTED,
|
||
|
||
createRoom: async (): Promise<Room> => {
|
||
const room = await apiService.createRoom()
|
||
set({ currentRoom: room })
|
||
// 连接WebSocket
|
||
await websocketService.joinRoom(room.code)
|
||
return room
|
||
},
|
||
|
||
joinRoom: async (roomCode: string): Promise<boolean> => {
|
||
try {
|
||
const room = await apiService.joinRoom(roomCode)
|
||
set({ currentRoom: room })
|
||
await websocketService.joinRoom(roomCode)
|
||
return true
|
||
} catch (error) {
|
||
return false
|
||
}
|
||
},
|
||
|
||
leaveRoom: () => {
|
||
const room = get().currentRoom
|
||
if (room) {
|
||
websocketService.leaveRoom(room.code)
|
||
set({ currentRoom: null })
|
||
}
|
||
},
|
||
|
||
refreshRoomList: async () => {
|
||
const rooms = await apiService.getRoomList()
|
||
set({ availableRooms: rooms })
|
||
}
|
||
}))
|
||
```
|
||
|
||
### 2.2 状态持久化策略
|
||
|
||
```typescript
|
||
// 状态持久化中间件
|
||
const persistMiddleware = <T>(
|
||
config: StateCreator<T>,
|
||
options: {
|
||
name: string
|
||
storage: Storage
|
||
partialize?: (state: T) => Partial<T>
|
||
}
|
||
) => (set: any, get: any, api: any) =>
|
||
config(
|
||
(partial, replace) => {
|
||
const nextState = typeof partial === 'function' ? partial(get()) : partial
|
||
const stateToStore = options.partialize ? options.partialize(nextState) : nextState
|
||
|
||
// 更新状态
|
||
set(partial, replace)
|
||
|
||
// 持久化存储
|
||
options.storage.setItem(options.name, JSON.stringify(stateToStore))
|
||
},
|
||
get,
|
||
api
|
||
)
|
||
|
||
// 使用示例
|
||
export const useUserStore = create<UserState>()(
|
||
persistMiddleware(
|
||
(set, get) => ({
|
||
// 状态定义...
|
||
}),
|
||
{
|
||
name: 'user-store',
|
||
storage: wx.getStorageSync ? wxStorage : localStorage,
|
||
partialize: (state) => ({ user: state.user, isAuthenticated: state.isAuthenticated })
|
||
}
|
||
)
|
||
)
|
||
```
|
||
|
||
## 3. 组件设计架构
|
||
|
||
### 3.1 基础组件设计
|
||
|
||
```typescript
|
||
// 游戏棋盘组件
|
||
interface GameBoardProps {
|
||
board: GameBoard
|
||
mode: 'placement' | 'battle' | 'readonly'
|
||
onCellClick?: (position: Position) => void
|
||
onPlanePlace?: (plane: PlaneData) => void
|
||
showAttackResults?: boolean
|
||
className?: string
|
||
}
|
||
|
||
export const GameBoard: React.FC<GameBoardProps> = ({
|
||
board,
|
||
mode,
|
||
onCellClick,
|
||
onPlanePlace,
|
||
showAttackResults = false,
|
||
className = ''
|
||
}) => {
|
||
const [selectedCell, setSelectedCell] = useState<Position | null>(null)
|
||
const [dragState, setDragState] = useState<DragState | null>(null)
|
||
|
||
// 处理单元格点击
|
||
const handleCellClick = useCallback((position: Position) => {
|
||
if (mode === 'readonly') return
|
||
|
||
if (mode === 'placement') {
|
||
handlePlacementClick(position)
|
||
} else if (mode === 'battle') {
|
||
handleBattleClick(position)
|
||
}
|
||
}, [mode, onCellClick, onPlanePlace])
|
||
|
||
// 处理飞机放置
|
||
const handlePlacementClick = (position: Position) => {
|
||
// 飞机放置逻辑
|
||
if (onPlanePlace) {
|
||
const plane = createPlaneAt(position, currentDirection)
|
||
onPlanePlace(plane)
|
||
}
|
||
}
|
||
|
||
// 处理攻击点击
|
||
const handleBattleClick = (position: Position) => {
|
||
if (onCellClick) {
|
||
onCellClick(position)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className={`game-board ${className} ${mode}`}>
|
||
{board.cells.map((row, x) =>
|
||
row.map((cell, y) => (
|
||
<BoardCell
|
||
key={`${x}-${y}`}
|
||
cell={cell}
|
||
position={{ x, y }}
|
||
isSelected={isSelected(position)}
|
||
onClick={handleCellClick}
|
||
showAttackResult={showAttackResults}
|
||
/>
|
||
))
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
// 棋盘单元格组件
|
||
interface BoardCellProps {
|
||
cell: BoardCell
|
||
position: Position
|
||
isSelected: boolean
|
||
onClick: (position: Position) => void
|
||
showAttackResult: boolean
|
||
}
|
||
|
||
const BoardCell: React.FC<BoardCellProps> = ({
|
||
cell,
|
||
position,
|
||
isSelected,
|
||
onClick,
|
||
showAttackResult
|
||
}) => {
|
||
const handleClick = () => onClick(position)
|
||
|
||
const cellClass = [
|
||
'board-cell',
|
||
cell.state,
|
||
isSelected && 'selected',
|
||
cell.planeId && 'has-plane'
|
||
].filter(Boolean).join(' ')
|
||
|
||
return (
|
||
<div
|
||
className={cellClass}
|
||
onClick={handleClick}
|
||
data-position={`${position.x}-${position.y}`}
|
||
>
|
||
{showAttackResult && cell.attackResult && (
|
||
<div className={`attack-result ${cell.attackResult.type}`}>
|
||
{cell.attackResult.type === 'HIT' ? '🎯' : '💥'}
|
||
</div>
|
||
)}
|
||
{cell.planeId && (
|
||
<div className="plane-indicator" />
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
### 3.2 页面组件架构
|
||
|
||
```typescript
|
||
// 游戏对战页面
|
||
const BattlePage: React.FC = () => {
|
||
const gameState = useGameStore()
|
||
const userState = useUserStore()
|
||
const { connectWebSocket, sendMessage } = useWebSocket()
|
||
|
||
// 游戏初始化
|
||
useEffect(() => {
|
||
initializeGame()
|
||
}, [])
|
||
|
||
// WebSocket消息处理
|
||
useEffect(() => {
|
||
const handleMessage = (message: GameMessage) => {
|
||
switch (message.type) {
|
||
case 'GAME_STATE_UPDATE':
|
||
gameState.updateGameState(message.data)
|
||
break
|
||
case 'ATTACK_RESULT':
|
||
handleAttackResult(message.data)
|
||
break
|
||
case 'PLAYER_DISCONNECTED':
|
||
handlePlayerDisconnect(message.data)
|
||
break
|
||
}
|
||
}
|
||
|
||
connectWebSocket(handleMessage)
|
||
}, [])
|
||
|
||
const initializeGame = async () => {
|
||
try {
|
||
const gameData = await apiService.getGameState(gameState.currentGame?.id)
|
||
gameState.initGame(gameData)
|
||
} catch (error) {
|
||
showError('游戏初始化失败')
|
||
}
|
||
}
|
||
|
||
const handleAttack = (position: Position) => {
|
||
gameState.attack(position)
|
||
}
|
||
|
||
const handleAttackResult = (result: AttackResult) => {
|
||
gameState.updateGameState({
|
||
opponentBoard: applyAttackResult(gameState.opponentBoard, result)
|
||
})
|
||
|
||
if (result.gameEnded) {
|
||
showGameResult(result.winner)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="battle-page">
|
||
<GameHeader
|
||
currentPlayer={gameState.currentPlayer}
|
||
gamePhase={gameState.gamePhase}
|
||
/>
|
||
|
||
<div className="battle-boards">
|
||
<div className="my-board-section">
|
||
<h3>我的棋盘</h3>
|
||
<GameBoard
|
||
board={gameState.myBoard}
|
||
mode="readonly"
|
||
showAttackResults={true}
|
||
/>
|
||
</div>
|
||
|
||
<div className="opponent-board-section">
|
||
<h3>对手棋盘</h3>
|
||
<GameBoard
|
||
board={gameState.opponentBoard}
|
||
mode="battle"
|
||
onCellClick={handleAttack}
|
||
showAttackResults={true}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<GameControls
|
||
gamePhase={gameState.gamePhase}
|
||
currentPlayer={gameState.currentPlayer}
|
||
onSurrender={() => gameState.surrender()}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
## 4. 自定义Hooks设计
|
||
|
||
### 4.1 游戏逻辑Hooks
|
||
|
||
```typescript
|
||
// 游戏逻辑Hook
|
||
export const useGame = () => {
|
||
const gameStore = useGameStore()
|
||
const [loading, setLoading] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
// 开始游戏
|
||
const startGame = async (roomCode: string) => {
|
||
setLoading(true)
|
||
setError(null)
|
||
|
||
try {
|
||
const gameData = await apiService.startGame(roomCode)
|
||
gameStore.initGame(gameData)
|
||
} catch (err) {
|
||
setError('游戏启动失败')
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
// 放置飞机
|
||
const placePlane = (plane: PlaneData) => {
|
||
const success = gameStore.placePlane(plane)
|
||
if (!success) {
|
||
setError('飞机放置失败，请检查位置')
|
||
return false
|
||
}
|
||
|
||
// 如果已放置3架飞机，自动进入准备状态
|
||
if (gameStore.myBoard.planes.length === 3) {
|
||
confirmPlacement()
|
||
}
|
||
|
||
return true
|
||
}
|
||
|
||
// 确认飞机布置
|
||
const confirmPlacement = async () => {
|
||
try {
|
||
await apiService.confirmPlacement(gameStore.myBoard.planes)
|
||
gameStore.updateGameState({ gamePhase: GamePhase.WAITING_OPPONENT })
|
||
} catch (err) {
|
||
setError('确认布置失败')
|
||
}
|
||
}
|
||
|
||
// 执行攻击
|
||
const attack = async (position: Position) => {
|
||
if (gameStore.gamePhase !== GamePhase.BATTLING) return
|
||
|
||
try {
|
||
const result = await apiService.attack(position)
|
||
gameStore.updateGameState({
|
||
opponentBoard: applyAttackResult(gameStore.opponentBoard, result)
|
||
})
|
||
|
||
if (result.gameEnded) {
|
||
gameStore.updateGameState({ gamePhase: GamePhase.FINISHED })
|
||
}
|
||
} catch (err) {
|
||
setError('攻击失败')
|
||
}
|
||
}
|
||
|
||
return {
|
||
...gameStore,
|
||
loading,
|
||
error,
|
||
startGame,
|
||
placePlane,
|
||
confirmPlacement,
|
||
attack,
|
||
clearError: () => setError(null)
|
||
}
|
||
}
|
||
|
||
// WebSocket Hook
|
||
export const useWebSocket = () => {
|
||
const [socket, setSocket] = useState<WebSocketConnection | null>(null)
|
||
const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
|
||
const [lastMessage, setLastMessage] = useState<GameMessage | null>(null)
|
||
|
||
// 连接WebSocket
|
||
const connect = useCallback((onMessage: (message: GameMessage) => void) => {
|
||
if (socket?.readyState === WebSocket.OPEN) return
|
||
|
||
const ws = new WebSocketConnection({
|
||
url: WS_URL,
|
||
onOpen: () => setConnectionState('connected'),
|
||
onClose: () => setConnectionState('disconnected'),
|
||
onError: () => setConnectionState('error'),
|
||
onMessage: (message) => {
|
||
setLastMessage(message)
|
||
onMessage(message)
|
||
}
|
||
})
|
||
|
||
setSocket(ws)
|
||
setConnectionState('connecting')
|
||
}, [socket])
|
||
|
||
// 发送消息
|
||
const sendMessage = useCallback((message: GameMessage) => {
|
||
if (socket?.readyState === WebSocket.OPEN) {
|
||
socket.send(JSON.stringify(message))
|
||
}
|
||
}, [socket])
|
||
|
||
// 断线重连
|
||
useEffect(() => {
|
||
let reconnectTimer: NodeJS.Timeout
|
||
|
||
if (connectionState === 'disconnected') {
|
||
reconnectTimer = setTimeout(() => {
|
||
if (socket) {
|
||
connect(() => {}) // 重连
|
||
}
|
||
}, 3000)
|
||
}
|
||
|
||
return () => clearTimeout(reconnectTimer)
|
||
}, [connectionState, connect])
|
||
|
||
// 清理连接
|
||
useEffect(() => {
|
||
return () => {
|
||
if (socket) {
|
||
socket.close()
|
||
}
|
||
}
|
||
}, [])
|
||
|
||
return {
|
||
connectionState,
|
||
lastMessage,
|
||
connect,
|
||
sendMessage,
|
||
disconnect: () => socket?.close()
|
||
}
|
||
}
|
||
```
|
||
|
||
### 4.2 UI交互Hooks
|
||
|
||
```typescript
|
||
// 模态框Hook
|
||
export const useModal = () => {
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
const [title, setTitle] = useState('')
|
||
const [content, setContent] = useState<React.ReactNode>(null)
|
||
|
||
const openModal = (modalTitle: string, modalContent: React.ReactNode) => {
|
||
setTitle(modalTitle)
|
||
setContent(modalContent)
|
||
setIsOpen(true)
|
||
}
|
||
|
||
const closeModal = () => {
|
||
setIsOpen(false)
|
||
}
|
||
|
||
const Modal = ({ children }: { children?: React.ReactNode }) => {
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={closeModal}>
|
||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
<div className="modal-header">
|
||
<h3>{title}</h3>
|
||
<button onClick={closeModal}>×</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
{content || children}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return {
|
||
isOpen,
|
||
openModal,
|
||
closeModal,
|
||
Modal
|
||
}
|
||
}
|
||
|
||
// 加载状态Hook
|
||
export const useLoading = () => {
|
||
const [loading, setLoading] = useState(false)
|
||
const [loadingText, setLoadingText] = useState('加载中...')
|
||
|
||
const showLoading = (text = '加载中...') => {
|
||
setLoadingText(text)
|
||
setLoading(true)
|
||
}
|
||
|
||
const hideLoading = () => {
|
||
setLoading(false)
|
||
}
|
||
|
||
const LoadingComponent = () => {
|
||
if (!loading) return null
|
||
|
||
return (
|
||
<div className="loading-overlay">
|
||
<div className="loading-spinner">
|
||
<div className="spinner"></div>
|
||
<p>{loadingText}</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return {
|
||
loading,
|
||
showLoading,
|
||
hideLoading,
|
||
LoadingComponent
|
||
}
|
||
}
|
||
```
|
||
|
||
## 5. 样式架构设计
|
||
|
||
### 5.1 设计Token系统
|
||
|
||
```scss
|
||
// styles/variables.scss - 设计变量定义
|
||
:root {
|
||
// 颜色系统 - 基于原型的深色科技主题
|
||
--color-primary: #6366f1;
|
||
--color-secondary: #40e0d0;
|
||
--color-accent: #ff6b6b;
|
||
--color-success: #51cf66;
|
||
--color-warning: #ffd43b;
|
||
--color-danger: #ff6b6b;
|
||
|
||
// 背景色
|
||
--bg-primary: #0f1419;
|
||
--bg-secondary: #1a1a2e;
|
||
--bg-card: #16213e;
|
||
--bg-overlay: rgba(15, 20, 25, 0.9);
|
||
|
||
// 渐变背景
|
||
--gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
|
||
--gradient-card: linear-gradient(145deg, #1e2a47 0%, #2a3f5f 100%);
|
||
|
||
// 文字颜色
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #b8c5d3;
|
||
--text-muted: #6c7983;
|
||
--text-disabled: #4a5568;
|
||
|
||
// 边框和分割线
|
||
--border-color: #2d3748;
|
||
--border-hover: #4a5568;
|
||
--divider: #2d3748;
|
||
|
||
// 阴影
|
||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
|
||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.16);
|
||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
|
||
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
|
||
|
||
// 间距系统
|
||
--space-xs: 4px;
|
||
--space-sm: 8px;
|
||
--space-md: 16px;
|
||
--space-lg: 24px;
|
||
--space-xl: 32px;
|
||
--space-xxl: 48px;
|
||
|
||
// 字体大小
|
||
--font-xs: 12px;
|
||
--font-sm: 14px;
|
||
--font-base: 16px;
|
||
--font-lg: 18px;
|
||
--font-xl: 20px;
|
||
--font-2xl: 24px;
|
||
--font-3xl: 30px;
|
||
|
||
// 圆角
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--radius-full: 50%;
|
||
|
||
// Z-index层级
|
||
--z-modal: 1000;
|
||
--z-loading: 999;
|
||
--z-toast: 998;
|
||
--z-header: 100;
|
||
}
|
||
```
|
||
|
||
### 5.2 组件样式库
|
||
|
||
```scss
|
||
// styles/components.scss - 组件样式
|
||
.game-board {
|
||
display: grid;
|
||
grid-template-columns: repeat(10, 1fr);
|
||
grid-template-rows: repeat(10, 1fr);
|
||
gap: 2px;
|
||
padding: var(--space-md);
|
||
background: var(--gradient-card);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-lg);
|
||
|
||
&.placement {
|
||
.board-cell {
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background: var(--color-primary);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.battle {
|
||
.board-cell {
|
||
cursor: crosshair;
|
||
|
||
&:hover:not(.attacked) {
|
||
background: var(--color-accent);
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.board-cell {
|
||
aspect-ratio: 1;
|
||
background: var(--bg-secondary);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-sm);
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
|
||
&.has-plane {
|
||
background: var(--color-secondary);
|
||
}
|
||
|
||
&.attacked-miss {
|
||
background: var(--bg-card);
|
||
|
||
&::after {
|
||
content: '○';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: var(--text-muted);
|
||
font-size: var(--font-sm);
|
||
}
|
||
}
|
||
|
||
&.attacked-hit {
|
||
background: var(--color-danger);
|
||
|
||
&::after {
|
||
content: '✕';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
color: var(--text-primary);
|
||
font-size: var(--font-base);
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
&.selected {
|
||
background: var(--color-primary);
|
||
box-shadow: var(--shadow-glow);
|
||
}
|
||
}
|
||
|
||
.attack-result {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: var(--font-lg);
|
||
animation: attackResult 0.8s ease-out;
|
||
|
||
&.HIT {
|
||
color: var(--color-success);
|
||
}
|
||
|
||
&.MISS {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
&.DESTROY {
|
||
color: var(--color-danger);
|
||
font-size: var(--font-xl);
|
||
}
|
||
}
|
||
|
||
@keyframes attackResult {
|
||
0% {
|
||
transform: translate(-50%, -50%) scale(0);
|
||
opacity: 0;
|
||
}
|
||
50% {
|
||
transform: translate(-50%, -50%) scale(1.5);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
```
|
||
|
||
## 6. 性能优化策略
|
||
|
||
### 6.1 渲染优化
|
||
|
||
```typescript
|
||
// 使用React.memo优化组件渲染
|
||
export const GameBoard = React.memo<GameBoardProps>(({
|
||
board,
|
||
mode,
|
||
onCellClick,
|
||
onPlanePlace
|
||
}) => {
|
||
// 只有相关props变化时才重渲染
|
||
}, (prevProps, nextProps) => {
|
||
return (
|
||
prevProps.board === nextProps.board &&
|
||
prevProps.mode === nextProps.mode &&
|
||
prevProps.onCellClick === nextProps.onCellClick &&
|
||
prevProps.onPlanePlace === nextProps.onPlanePlace
|
||
)
|
||
})
|
||
|
||
// 使用useMemo缓存计算结果
|
||
const BoardCell = React.memo<BoardCellProps>(({ cell, position, onClick }) => {
|
||
const cellClass = useMemo(() => {
|
||
return [
|
||
'board-cell',
|
||
cell.state,
|
||
cell.planeId && 'has-plane'
|
||
].filter(Boolean).join(' ')
|
||
}, [cell.state, cell.planeId])
|
||
|
||
const handleClick = useCallback(() => {
|
||
onClick(position)
|
||
}, [onClick, position])
|
||
|
||
return (
|
||
<div className={cellClass} onClick={handleClick}>
|
||
{/* 单元格内容 */}
|
||
</div>
|
||
)
|
||
})
|
||
```
|
||
|
||
### 6.2 状态更新优化
|
||
|
||
```typescript
|
||
// 批量状态更新
|
||
class GameStateManager {
|
||
private updateQueue: StateUpdate[] = []
|
||
private isUpdating = false
|
||
|
||
queueUpdate(update: StateUpdate) {
|
||
this.updateQueue.push(update)
|
||
if (!this.isUpdating) {
|
||
this.flushUpdates()
|
||
}
|
||
}
|
||
|
||
private async flushUpdates() {
|
||
this.isUpdating = true
|
||
|
||
// 合并所有更新
|
||
const mergedUpdate = this.updateQueue.reduce((merged, update) => {
|
||
return { ...merged, ...update }
|
||
}, {})
|
||
|
||
// 批量应用更新
|
||
useGameStore.setState(state => ({
|
||
...state,
|
||
...mergedUpdate
|
||
}))
|
||
|
||
this.updateQueue = []
|
||
this.isUpdating = false
|
||
}
|
||
}
|
||
```
|
||
|
||
## 7. 错误处理机制
|
||
|
||
### 7.1 错误边界设计
|
||
|
||
```typescript
|
||
// 游戏错误边界
|
||
class GameErrorBoundary extends React.Component<
|
||
{ children: React.ReactNode },
|
||
{ hasError: boolean; error: Error | null }
|
||
> {
|
||
constructor(props: any) {
|
||
super(props)
|
||
this.state = { hasError: false, error: null }
|
||
}
|
||
|
||
static getDerivedStateFromError(error: Error) {
|
||
return { hasError: true, error }
|
||
}
|
||
|
||
componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||
console.error('游戏错误:', error, errorInfo)
|
||
|
||
// 上报错误
|
||
this.reportError(error, errorInfo)
|
||
}
|
||
|
||
private reportError(error: Error, errorInfo: ErrorInfo) {
|
||
// 调用错误上报服务
|
||
errorReportingService.log({
|
||
message: error.message,
|
||
stack: error.stack,
|
||
componentStack: errorInfo.componentStack
|
||
})
|
||
}
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
return (
|
||
<div className="error-fallback">
|
||
<h2>游戏出错了</h2>
|
||
<p>我们已经记录了错误信息，请稍后重试。</p>
|
||
<button onClick={() => window.location.reload()}>刷新页面</button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return this.props.children
|
||
}
|
||
} |