feat: 数据mock

2026-06-22 09:28:15 +08:00
parent 676f4d5e2d
commit 0b7a89c06b
10 changed files with 613 additions and 73 deletions
--- a/src/components/baseLayouts/CreateRoomDialog.vue
+++ b/src/components/baseLayouts/CreateRoomDialog.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="dialogTitle"
+    width="420px"
+    :close-on-click-modal="false"
+    @closed="handleClosed"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="72px"
+      label-position="left"
+      @submit.prevent="handleSubmit"
+    >
+      <!-- 房间名称（可选） -->
+      <el-form-item label="房间名" prop="name">
+        <el-input
+          v-model="form.name"
+          placeholder="留空自动生成桌号"
+          maxlength="20"
+          show-word-limit
+          clearable
+        />
+        <div class="create-room-dialog__hint">留空将自动生成"桌 XX"编号</div>
+      </el-form-item>
+
+      <!-- 游戏模式 -->
+      <el-form-item label="模式" prop="mode">
+        <el-select v-model="form.mode" placeholder="请选择模式">
+          <el-option v-for="m in gameConfig?.modes ?? []" :key="m" :label="m" :value="m" />
+        </el-select>
+      </el-form-item>
+
+      <!-- 底注金额 -->
+      <el-form-item label="底注" prop="stakes">
+        <el-select v-model="form.stakes" placeholder="请选择底注">
+          <el-option
+            v-for="s in gameConfig?.stakesOptions ?? []"
+            :key="s"
+            :label="`${s} 金币`"
+            :value="s"
+          />
+        </el-select>
+      </el-form-item>
+
+      <!-- 房间密码（可选） -->
+      <el-form-item label="密码" prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          placeholder="留空为公开房间"
+          maxlength="16"
+          show-password
+          clearable
+        />
+        <div class="create-room-dialog__hint">设置密码后，其他玩家需输入密码才能加入</div>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="handleSubmit"> 确认创建 </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { useBaseLayoutStore } from '@/stores'
+import { storeToRefs } from 'pinia'
+import type { GameConfig } from '@/api/modules/game'
+import { createRoom } from '@/api/modules/game'
+
+/** 创建房间表单数据 */
+interface CreateRoomForm {
+  name: string
+  mode: string
+  stakes: number | undefined
+  password: string
+}
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'created'): void
+}>()
+
+const baseLayoutStore = useBaseLayoutStore()
+const { activeGameName, activeGameConfig } = storeToRefs(baseLayoutStore)
+
+const formRef = ref<FormInstance>()
+const submitting = ref(false)
+
+/** 对话框可见性（双向绑定） */
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit('update:modelValue', val)
+})
+
+/** 对话框标题 */
+const dialogTitle = computed(() => `创建房间 — ${activeGameName.value}`)
+
+/** 当前游戏配置（只读） */
+const gameConfig = computed<GameConfig | null>(() => activeGameConfig.value)
+
+/** 表单数据 */
+const form = reactive<CreateRoomForm>({
+  name: '',
+  mode: '',
+  stakes: undefined,
+  password: ''
+})
+
+/** 初始化默认值：取当前游戏配置的第一个选项 */
+function initDefaults() {
+  if (gameConfig.value) {
+    form.mode = gameConfig.value.modes[0] ?? ''
+    form.stakes = gameConfig.value.stakesOptions[0]
+  }
+  form.name = ''
+  form.password = ''
+}
+
+/** 弹窗打开时设置默认值 */
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) initDefaults()
+  }
+)
+
+/** 切换游戏时重置默认值 */
+watch(activeGameConfig, () => {
+  if (props.modelValue) initDefaults()
+})
+
+const rules: FormRules = {
+  mode: [{ required: true, message: '请选择游戏模式', trigger: 'change' }],
+  stakes: [{ required: true, message: '请选择底注金额', trigger: 'change' }],
+  name: [{ max: 20, message: '房间名不超过 20 个字符', trigger: 'blur' }],
+  password: [{ max: 16, message: '密码不超过 16 个字符', trigger: 'blur' }]
+}
+
+/** 提交创建房间 */
+async function handleSubmit() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+
+  submitting.value = true
+  try {
+    await createRoom({
+      gameId: baseLayoutStore.activeGameId,
+      name: form.name.trim() || undefined,
+      password: form.password || undefined,
+      mode: form.mode,
+      stakes: form.stakes!,
+      maxPlayers: gameConfig.value?.maxPlayers ?? 0
+    })
+    visible.value = false
+    emit('created')
+  } finally {
+    submitting.value = false
+  }
+}
+
+/** 弹窗关闭动画结束后重置表单 */
+function handleClosed() {
+  initDefaults()
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped lang="scss">
+.create-room-dialog__hint {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+</style>
--- a/src/components/baseLayouts/GameList.vue
+++ b/src/components/baseLayouts/GameList.vue
@@ -53,11 +53,18 @@ async function fetchGameList() {
  try {
    const res = await getGameList()
    games.value = res.data.list
-    // 默认选中第一个游戏
-    if (games.value.length > 0 && !activeGameId.value) {
-      const first = games.value[0]
-      if (first) {
-        baseLayoutStore.setActiveGame(first.id, first.icon, first.name)
+    // 优先恢复已选中的游戏，否则默认选第一个
+    if (games.value.length > 0) {
+      const storedGame = games.value.find((g) => g.id === activeGameId.value)
+      if (storedGame) {
+        // 已有选中的游戏，同步最新配置到 store
+        baseLayoutStore.setActiveGame(storedGame.id, storedGame.icon, storedGame.name, storedGame.config)
+      } else {
+        // 没有匹配的已选游戏，默认选第一个
+        const first = games.value[0]
+        if (first) {
+          baseLayoutStore.setActiveGame(first.id, first.icon, first.name, first.config)
+        }
      }
    }
  } finally {
@@ -79,7 +86,7 @@ const activeGame = computed(() => games.value.find((g) => g.id === activeGameId.
 function selectGame(id: string) {
  const game = games.value.find((g) => g.id === id)
  if (game) {
-    baseLayoutStore.setActiveGame(game.id, game.icon, game.name)
+    baseLayoutStore.setActiveGame(game.id, game.icon, game.name, game.config)
  }
 }
 </script>
@@ -113,7 +120,9 @@ function selectGame(id: string) {
  height: 48px;
  border-radius: var(--radius-sm);
  cursor: pointer;
-  transition: background-color 0.15s ease, transform 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    transform 0.15s ease;

  &:hover {
    background-color: var(--bg-surface-hover);
--- a/src/components/baseLayouts/Lobby.vue
+++ b/src/components/baseLayouts/Lobby.vue
@@ -37,12 +37,16 @@
      <p class="lobby__empty-text">暂无符合条件的房间</p>
      <p class="lobby__empty-hint">换个筛选条件，或者自己创建一个房间吧</p>
    </div>
+
+    <!-- 创建房间弹窗 -->
+    <CreateRoomDialog v-model="showCreateDialog" @created="fetchRoomList" />
  </div>
 </template>

 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import TableCard from './TableCard.vue'
+import CreateRoomDialog from './CreateRoomDialog.vue'
 import type { RoomItem } from '@/api/modules/game'
 import { useBaseLayoutStore } from '@/stores'
 import { storeToRefs } from 'pinia'
@@ -111,10 +115,12 @@ function handleSpectate(roomId: string) {
  console.log('观战房间:', roomId)
 }

+/** 创建房间对话框可见性 */
+const showCreateDialog = ref(false)
+
 /** 创建房间 */
 function handleCreateRoom() {
-  // eslint-disable-next-line no-console
-  console.log('创建房间')
+  showCreateDialog.value = true
 }
 </script>