first commit
This commit is contained in:
hujun
13
frontend/index.html
Normal file
13
frontend/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>XueZhanMaster</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
1511
frontend/package-lock.json
generated
Normal file
1511
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
frontend/package.json
Normal file
21
frontend/package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "xzmaster-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stomp/stompjs": "^7.1.1",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"typescript": "^5.7.3",
|
||||
"vite": "^6.0.6",
|
||||
"vue-tsc": "^2.2.0"
|
||||
}
|
||||
}
|
||||
569
frontend/src/App.vue
Normal file
569
frontend/src/App.vue
Normal file
@@ -0,0 +1,569 @@
|
||||
<script setup lang="ts">
|
||||
import { Client, type IFrame, type IMessage } from '@stomp/stompjs'
|
||||
import { computed, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
type ApiResponse<T> = {
|
||||
success: boolean
|
||||
code: string
|
||||
message: string
|
||||
data: T
|
||||
}
|
||||
|
||||
type RoomSeatView = {
|
||||
seatNo: number
|
||||
participantType: string
|
||||
displayName: string
|
||||
botLevel: string | null
|
||||
readyStatus: string
|
||||
teachingEnabled: boolean
|
||||
}
|
||||
|
||||
type RoomSummaryResponse = {
|
||||
roomId: string
|
||||
inviteCode: string
|
||||
status: string
|
||||
allowBotFill: boolean
|
||||
seats: RoomSeatView[]
|
||||
}
|
||||
|
||||
type SelfSeatView = {
|
||||
seatNo: number
|
||||
playerId: string
|
||||
nickname: string
|
||||
lackSuit: string | null
|
||||
handTiles: string[]
|
||||
discardTiles: string[]
|
||||
}
|
||||
|
||||
type PublicSeatView = {
|
||||
seatNo: number
|
||||
playerId: string
|
||||
nickname: string
|
||||
ai: boolean
|
||||
lackSuit: string | null
|
||||
handCount: number
|
||||
discardTiles: string[]
|
||||
}
|
||||
|
||||
type GameStateResponse = {
|
||||
gameId: string
|
||||
phase: string
|
||||
dealerSeatNo: number
|
||||
currentSeatNo: number
|
||||
remainingWallCount: number
|
||||
selfSeat: SelfSeatView
|
||||
seats: PublicSeatView[]
|
||||
}
|
||||
|
||||
type PublicGameMessage = {
|
||||
gameId: string
|
||||
eventType: string
|
||||
seatNo: number | null
|
||||
payload: Record<string, unknown>
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
type PrivateActionMessage = {
|
||||
gameId: string
|
||||
userId: string
|
||||
availableActions: string[]
|
||||
currentSeatNo: number
|
||||
}
|
||||
|
||||
type PrivateTeachingMessage = {
|
||||
gameId: string
|
||||
userId: string
|
||||
teachingMode: string
|
||||
recommendedAction: string
|
||||
explanation: string
|
||||
}
|
||||
|
||||
const busy = ref(false)
|
||||
const error = ref('')
|
||||
const info = ref('H5 房间流原型已就位，现在会在进入对局后自动订阅 WebSocket 公共事件和私有消息。')
|
||||
|
||||
const ownerId = ref('host-1')
|
||||
const ownerName = ref('房主')
|
||||
const joinUserId = ref('player-2')
|
||||
const joinUserName = ref('玩家二')
|
||||
const roomIdInput = ref('')
|
||||
const lackSuit = ref('WAN')
|
||||
|
||||
const room = ref<RoomSummaryResponse | null>(null)
|
||||
const game = ref<GameStateResponse | null>(null)
|
||||
const currentUserId = ref('host-1')
|
||||
|
||||
const wsStatus = ref<'idle' | 'connecting' | 'connected' | 'disconnected' | 'error'>('idle')
|
||||
const publicEvents = ref<PublicGameMessage[]>([])
|
||||
const privateAction = ref<PrivateActionMessage | null>(null)
|
||||
const privateTeaching = ref<PrivateTeachingMessage | null>(null)
|
||||
let stompClient: Client | null = null
|
||||
|
||||
const phaseLabelMap: Record<string, string> = {
|
||||
WAITING: '等待中',
|
||||
READY: '全部就绪',
|
||||
PLAYING: '对局中',
|
||||
FINISHED: '已结束',
|
||||
LACK_SELECTION: '定缺阶段'
|
||||
}
|
||||
|
||||
const canSelectLack = computed(() => game.value?.phase === 'LACK_SELECTION')
|
||||
const canDiscard = computed(
|
||||
() => game.value?.phase === 'PLAYING' && game.value.selfSeat.playerId === currentUserId.value && game.value.currentSeatNo === game.value.selfSeat.seatNo
|
||||
)
|
||||
const publicSeats = computed(() => game.value?.seats ?? [])
|
||||
|
||||
async function requestJson<T>(url: string, options?: RequestInit): Promise<T> {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
...options
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`请求失败：${url}`)
|
||||
}
|
||||
|
||||
const payload = (await response.json()) as ApiResponse<T>
|
||||
if (!payload.success) {
|
||||
throw new Error(payload.message || '接口处理失败')
|
||||
}
|
||||
|
||||
return payload.data
|
||||
}
|
||||
|
||||
async function runTask(task: () => Promise<void>) {
|
||||
busy.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
await task()
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '操作失败'
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function buildBrokerUrl() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
const host = window.location.hostname
|
||||
const port = window.location.port === '5173' ? '8080' : window.location.port
|
||||
return `${protocol}://${host}${port ? `:${port}` : ''}/ws`
|
||||
}
|
||||
|
||||
function disconnectWs() {
|
||||
if (stompClient) {
|
||||
stompClient.deactivate()
|
||||
stompClient = null
|
||||
}
|
||||
wsStatus.value = 'disconnected'
|
||||
}
|
||||
|
||||
function connectWs(gameId: string, userId: string) {
|
||||
disconnectWs()
|
||||
wsStatus.value = 'connecting'
|
||||
publicEvents.value = []
|
||||
privateAction.value = null
|
||||
privateTeaching.value = null
|
||||
|
||||
const client = new Client({
|
||||
brokerURL: buildBrokerUrl(),
|
||||
reconnectDelay: 3000,
|
||||
onConnect() {
|
||||
wsStatus.value = 'connected'
|
||||
client.subscribe(`/topic/games/${gameId}/events`, (message: IMessage) => {
|
||||
const payload = JSON.parse(message.body) as PublicGameMessage
|
||||
publicEvents.value = [payload, ...publicEvents.value].slice(0, 16)
|
||||
})
|
||||
client.subscribe(`/topic/users/${userId}/actions`, (message: IMessage) => {
|
||||
privateAction.value = JSON.parse(message.body) as PrivateActionMessage
|
||||
})
|
||||
client.subscribe(`/topic/users/${userId}/teaching`, (message: IMessage) => {
|
||||
privateTeaching.value = JSON.parse(message.body) as PrivateTeachingMessage
|
||||
})
|
||||
},
|
||||
onStompError(frame: IFrame) {
|
||||
wsStatus.value = 'error'
|
||||
error.value = frame.headers.message ?? 'WebSocket 订阅失败'
|
||||
},
|
||||
onWebSocketClose() {
|
||||
wsStatus.value = 'disconnected'
|
||||
},
|
||||
onWebSocketError() {
|
||||
wsStatus.value = 'error'
|
||||
}
|
||||
})
|
||||
|
||||
client.activate()
|
||||
stompClient = client
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [game.value?.gameId, currentUserId.value] as const,
|
||||
([gameId, userId]) => {
|
||||
if (gameId) {
|
||||
connectWs(gameId, userId)
|
||||
} else {
|
||||
disconnectWs()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
disconnectWs()
|
||||
})
|
||||
|
||||
async function createRoom() {
|
||||
await runTask(async () => {
|
||||
const result = await requestJson<RoomSummaryResponse>('/api/rooms', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
ownerUserId: ownerId.value,
|
||||
allowBotFill: true
|
||||
})
|
||||
})
|
||||
room.value = result
|
||||
roomIdInput.value = result.roomId
|
||||
currentUserId.value = ownerId.value
|
||||
info.value = `房间已创建，邀请码 ${result.inviteCode}。`
|
||||
})
|
||||
}
|
||||
|
||||
async function loadRoom() {
|
||||
if (!roomIdInput.value) {
|
||||
error.value = '请先输入房间 ID'
|
||||
return
|
||||
}
|
||||
await runTask(async () => {
|
||||
room.value = await requestJson<RoomSummaryResponse>(`/api/rooms/${roomIdInput.value}`)
|
||||
info.value = '已刷新房间状态。'
|
||||
})
|
||||
}
|
||||
|
||||
async function joinRoom() {
|
||||
if (!roomIdInput.value) {
|
||||
error.value = '请先输入房间 ID'
|
||||
return
|
||||
}
|
||||
await runTask(async () => {
|
||||
room.value = await requestJson<RoomSummaryResponse>(`/api/rooms/${roomIdInput.value}/join`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
userId: joinUserId.value,
|
||||
displayName: joinUserName.value
|
||||
})
|
||||
})
|
||||
info.value = `${joinUserName.value} 已加入房间。`
|
||||
})
|
||||
}
|
||||
|
||||
async function toggleReady(userId: string, ready: boolean) {
|
||||
if (!room.value) {
|
||||
return
|
||||
}
|
||||
const targetRoomId = room.value.roomId
|
||||
await runTask(async () => {
|
||||
room.value = await requestJson<RoomSummaryResponse>(`/api/rooms/${targetRoomId}/ready`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
userId,
|
||||
ready
|
||||
})
|
||||
})
|
||||
info.value = ready ? `${userId} 已准备。` : `${userId} 已取消准备。`
|
||||
})
|
||||
}
|
||||
|
||||
async function startGame() {
|
||||
if (!room.value) {
|
||||
error.value = '请先创建或加载房间'
|
||||
return
|
||||
}
|
||||
const targetRoomId = room.value.roomId
|
||||
await runTask(async () => {
|
||||
currentUserId.value = ownerId.value
|
||||
game.value = await requestJson<GameStateResponse>(`/api/rooms/${targetRoomId}/start`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
operatorUserId: ownerId.value
|
||||
})
|
||||
})
|
||||
info.value = '对局已开始，进入定缺阶段。'
|
||||
})
|
||||
}
|
||||
|
||||
async function refreshGameState() {
|
||||
if (!game.value) {
|
||||
return
|
||||
}
|
||||
const targetGameId = game.value.gameId
|
||||
await runTask(async () => {
|
||||
game.value = await requestJson<GameStateResponse>(
|
||||
`/api/games/${targetGameId}/state?userId=${encodeURIComponent(currentUserId.value)}`
|
||||
)
|
||||
info.value = '已刷新对局状态。'
|
||||
})
|
||||
}
|
||||
|
||||
async function submitAction(actionType: string, tile?: string) {
|
||||
if (!game.value) {
|
||||
return
|
||||
}
|
||||
const targetGameId = game.value.gameId
|
||||
await runTask(async () => {
|
||||
game.value = await requestJson<GameStateResponse>(`/api/games/${targetGameId}/actions`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
userId: currentUserId.value,
|
||||
actionType,
|
||||
tile: tile ?? null
|
||||
})
|
||||
})
|
||||
info.value = actionType === 'DISCARD' ? `已打出 ${tile}。` : `已提交动作 ${actionType}。`
|
||||
})
|
||||
}
|
||||
|
||||
function selectLack() {
|
||||
return submitAction('SELECT_LACK_SUIT', lackSuit.value)
|
||||
}
|
||||
|
||||
function discard(tile: string) {
|
||||
return submitAction('DISCARD', tile)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-shell">
|
||||
<section class="hero-panel">
|
||||
<div>
|
||||
<p class="eyebrow">XueZhanMaster H5</p>
|
||||
<h1>血战大师移动端房间流原型</h1>
|
||||
<p class="intro">
|
||||
当前页面已切成 H5 操作台，并接入 WebSocket 骨架。目标是让后续手机端新对话也能快速恢复上下文：房间流、对局流、消息流都能看见。
|
||||
</p>
|
||||
</div>
|
||||
<div class="signal-card">
|
||||
<span class="signal-label">当前提示</span>
|
||||
<strong>{{ info }}</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="error" class="error-banner">{{ error }}</div>
|
||||
|
||||
<main class="workspace-grid">
|
||||
<section class="panel control-panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">步骤 1</p>
|
||||
<h2>建房与入房</h2>
|
||||
</div>
|
||||
<span class="status-pill" :class="{ busy: busy }">{{ busy ? '处理中' : '可操作' }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<label class="field">
|
||||
<span>房主 ID</span>
|
||||
<input v-model="ownerId" type="text" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>房主昵称</span>
|
||||
<input v-model="ownerName" type="text" />
|
||||
</label>
|
||||
<button class="primary-btn" @click="createRoom">创建房间</button>
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<label class="field">
|
||||
<span>房间 ID</span>
|
||||
<input v-model="roomIdInput" type="text" placeholder="创建后自动填充，也可手工输入" />
|
||||
</label>
|
||||
<div class="btn-row">
|
||||
<button class="secondary-btn" @click="loadRoom">刷新房间</button>
|
||||
<button class="secondary-btn" @click="currentUserId = ownerId">切到房主视角</button>
|
||||
<button class="secondary-btn" @click="currentUserId = joinUserId">切到玩家二视角</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-card">
|
||||
<label class="field">
|
||||
<span>加入用户 ID</span>
|
||||
<input v-model="joinUserId" type="text" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>加入昵称</span>
|
||||
<input v-model="joinUserName" type="text" />
|
||||
</label>
|
||||
<button class="primary-btn ghost-btn" @click="joinRoom">模拟加入房间</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel room-panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">步骤 2</p>
|
||||
<h2>准备与开局</h2>
|
||||
</div>
|
||||
<span class="status-pill">{{ room ? phaseLabelMap[room.status] ?? room.status : '未建房' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="room" class="room-summary">
|
||||
<div class="room-meta">
|
||||
<div>
|
||||
<span class="meta-label">房间 ID</span>
|
||||
<strong>{{ room.roomId }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="meta-label">邀请码</span>
|
||||
<strong>{{ room.inviteCode }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="meta-label">当前视角</span>
|
||||
<strong>{{ currentUserId }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seat-list">
|
||||
<article v-for="seat in room.seats" :key="seat.seatNo" class="seat-card">
|
||||
<div class="seat-top">
|
||||
<strong>{{ seat.displayName }}</strong>
|
||||
<span class="mini-pill">{{ seat.participantType }}</span>
|
||||
</div>
|
||||
<div class="mini-tags">
|
||||
<span class="mini-tag">{{ seat.readyStatus }}</span>
|
||||
<span v-if="seat.botLevel" class="mini-tag">{{ seat.botLevel }}</span>
|
||||
<span class="mini-tag">{{ seat.teachingEnabled ? '教学开' : '教学关' }}</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="btn-row vertical-on-mobile">
|
||||
<button class="secondary-btn" @click="toggleReady(ownerId, true)">房主准备</button>
|
||||
<button class="secondary-btn" @click="toggleReady(joinUserId, true)">玩家二准备</button>
|
||||
<button class="primary-btn" @click="startGame">房主开局</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="placeholder-card">先创建或加载一个房间，再进入准备和开局流程。</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<section class="play-grid" v-if="game">
|
||||
<article class="panel game-panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">步骤 3</p>
|
||||
<h2>对局控制台</h2>
|
||||
</div>
|
||||
<span class="status-pill">{{ phaseLabelMap[game.phase] ?? game.phase }}</span>
|
||||
</div>
|
||||
|
||||
<div class="room-meta">
|
||||
<div>
|
||||
<span class="meta-label">对局 ID</span>
|
||||
<strong>{{ game.gameId }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="meta-label">当前视角</span>
|
||||
<strong>{{ currentUserId }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="meta-label">剩余牌墙</span>
|
||||
<strong>{{ game.remainingWallCount }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-row vertical-on-mobile">
|
||||
<button class="secondary-btn" @click="refreshGameState">刷新对局</button>
|
||||
<label class="field compact-field">
|
||||
<span>定缺</span>
|
||||
<select v-model="lackSuit">
|
||||
<option value="WAN">万</option>
|
||||
<option value="TONG">筒</option>
|
||||
<option value="TIAO">条</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="primary-btn" :disabled="!canSelectLack" @click="selectLack">提交定缺</button>
|
||||
</div>
|
||||
|
||||
<div class="self-card">
|
||||
<div class="section-title">
|
||||
<strong>我的手牌</strong>
|
||||
<span class="mini-pill">当前回合 {{ game.currentSeatNo }}</span>
|
||||
</div>
|
||||
<div class="tile-grid">
|
||||
<button
|
||||
v-for="(tile, index) in game.selfSeat.handTiles"
|
||||
:key="`${tile}-${index}`"
|
||||
class="tile-chip"
|
||||
:disabled="!canDiscard"
|
||||
@click="discard(tile)"
|
||||
>
|
||||
{{ tile }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel board-panel">
|
||||
<div class="panel-head">
|
||||
<div>
|
||||
<p class="eyebrow">步骤 4</p>
|
||||
<h2>消息与公共桌面</h2>
|
||||
</div>
|
||||
<span class="status-pill">{{ wsStatus }}</span>
|
||||
</div>
|
||||
|
||||
<div class="message-stack">
|
||||
<div class="message-card">
|
||||
<span class="meta-label">私有动作消息</span>
|
||||
<strong v-if="privateAction">{{ privateAction.availableActions.join(' / ') }}</strong>
|
||||
<span v-else class="empty-copy">尚未收到私有动作消息</span>
|
||||
</div>
|
||||
<div class="message-card">
|
||||
<span class="meta-label">私有教学消息</span>
|
||||
<strong v-if="privateTeaching">{{ privateTeaching.recommendedAction }}</strong>
|
||||
<span v-if="privateTeaching" class="message-copy">{{ privateTeaching.explanation }}</span>
|
||||
<span v-else class="empty-copy">尚未收到私有教学消息</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="seat-list">
|
||||
<article v-for="seat in publicSeats" :key="seat.seatNo" class="seat-card seat-card-wide">
|
||||
<div class="seat-top">
|
||||
<strong>{{ seat.nickname }}</strong>
|
||||
<span class="mini-pill">座位 {{ seat.seatNo }}</span>
|
||||
</div>
|
||||
<div class="mini-tags">
|
||||
<span class="mini-tag">{{ seat.ai ? 'AI' : '真人' }}</span>
|
||||
<span class="mini-tag">手牌 {{ seat.handCount }}</span>
|
||||
<span class="mini-tag">{{ seat.lackSuit ?? '未定缺' }}</span>
|
||||
</div>
|
||||
<div class="discard-row">
|
||||
<span v-for="(tile, index) in seat.discardTiles" :key="`${seat.seatNo}-${tile}-${index}`" class="discard-chip">
|
||||
{{ tile }}
|
||||
</span>
|
||||
<span v-if="seat.discardTiles.length === 0" class="empty-copy">暂无弃牌</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="event-timeline">
|
||||
<div class="section-title">
|
||||
<strong>公共事件</strong>
|
||||
<span class="mini-pill">{{ publicEvents.length }} 条</span>
|
||||
</div>
|
||||
<div v-if="publicEvents.length === 0" class="placeholder-card">还没有收到公共事件，开局或执行动作后会自动出现。</div>
|
||||
<div v-else class="timeline-list">
|
||||
<article v-for="(event, index) in publicEvents" :key="`${event.createdAt}-${index}`" class="timeline-item">
|
||||
<div class="seat-top">
|
||||
<strong>{{ event.eventType }}</strong>
|
||||
<span class="mini-pill">{{ event.seatNo ?? '-' }}</span>
|
||||
</div>
|
||||
<div class="message-copy">{{ JSON.stringify(event.payload) }}</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
5
frontend/src/main.ts
Normal file
5
frontend/src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
373
frontend/src/style.css
Normal file
373
frontend/src/style.css
Normal file
@@ -0,0 +1,373 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #efe5d2;
|
||||
--paper: rgba(255, 248, 236, 0.92);
|
||||
--paper-strong: #fffaf1;
|
||||
--line: rgba(115, 82, 44, 0.16);
|
||||
--text: #23170f;
|
||||
--muted: #6b5949;
|
||||
--accent: #b6451f;
|
||||
--accent-deep: #7f2d19;
|
||||
--accent-soft: rgba(182, 69, 31, 0.12);
|
||||
--shadow: 0 20px 60px rgba(82, 53, 25, 0.12);
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(182, 69, 31, 0.18), transparent 28%),
|
||||
radial-gradient(circle at bottom right, rgba(218, 170, 98, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, #ead9bc 0%, #f6efe4 45%, #ebe1cf 100%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
min-height: 100vh;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.hero-panel,
|
||||
.panel {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
background: var(--paper);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
|
||||
gap: 18px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: var(--accent);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(30px, 6vw, 54px);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(20px, 3.8vw, 28px);
|
||||
}
|
||||
|
||||
.intro,
|
||||
.placeholder-card,
|
||||
.empty-copy,
|
||||
.meta-label {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.intro {
|
||||
margin: 14px 0 0;
|
||||
line-height: 1.8;
|
||||
max-width: 52rem;
|
||||
}
|
||||
|
||||
.signal-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 148px;
|
||||
padding: 18px;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(180deg, rgba(182, 69, 31, 0.12), rgba(182, 69, 31, 0.04));
|
||||
border: 1px solid rgba(182, 69, 31, 0.18);
|
||||
}
|
||||
|
||||
.signal-label {
|
||||
font-size: 12px;
|
||||
color: var(--accent-deep);
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workspace-grid,
|
||||
.play-grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.workspace-grid {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.play-grid {
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.mini-pill,
|
||||
.mini-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-deep);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.status-pill.busy {
|
||||
background: rgba(127, 45, 25, 0.16);
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
margin-top: 18px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
background: rgba(180, 41, 29, 0.14);
|
||||
color: #8f241c;
|
||||
border: 1px solid rgba(180, 41, 29, 0.18);
|
||||
}
|
||||
|
||||
.form-card,
|
||||
.self-card,
|
||||
.placeholder-card,
|
||||
.seat-card {
|
||||
padding: 16px;
|
||||
border-radius: 22px;
|
||||
background: var(--paper-strong);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form-card + .form-card,
|
||||
.self-card,
|
||||
.room-meta,
|
||||
.seat-list,
|
||||
.tile-grid {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field span {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.field input,
|
||||
.field select {
|
||||
min-height: 46px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(108, 83, 55, 0.2);
|
||||
padding: 0 14px;
|
||||
background: #fffdf8;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
min-height: 46px;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
padding: 0 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: linear-gradient(180deg, #cc5a31 0%, #b6451f 100%);
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
.primary-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.ghost-btn,
|
||||
.secondary-btn {
|
||||
background: rgba(182, 69, 31, 0.1);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.room-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.room-meta strong {
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.seat-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.seat-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.seat-card-wide {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.seat-top,
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mini-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.tile-chip,
|
||||
.discard-chip {
|
||||
min-height: 58px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(113, 82, 47, 0.18);
|
||||
background: linear-gradient(180deg, #fff7eb 0%, #f1e0c4 100%);
|
||||
color: var(--text);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.discard-chip {
|
||||
min-height: auto;
|
||||
padding: 8px 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discard-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.message-stack,
|
||||
.event-timeline,
|
||||
.timeline-list {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.message-stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.message-card,
|
||||
.timeline-item {
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: var(--paper-strong);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.compact-field {
|
||||
flex: 1;
|
||||
min-width: 110px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.vertical-on-mobile {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-panel,
|
||||
.workspace-grid,
|
||||
.play-grid,
|
||||
.room-meta {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.panel,
|
||||
.hero-panel {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn,
|
||||
.field input,
|
||||
.field select {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.vertical-on-mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
16
frontend/tsconfig.json
Normal file
16
frontend/tsconfig.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
20
frontend/vite.config.ts
Normal file
20
frontend/vite.config.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true
|
||||
},
|
||||
'/ws': {
|
||||
target: 'ws://localhost:8080',
|
||||
ws: true,
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user