feat: 创建房间新增观战开关,成功后跳转到房间页

This commit is contained in:
2026-06-23 11:20:28 +08:00
parent 78c172cce0
commit cf1a14bf24

View File

@@ -57,6 +57,12 @@
/>
<div class="create-room-dialog__hint">设置密码后其他玩家需输入密码才能加入</div>
</el-form-item>
<!-- 是否允许观战 -->
<el-form-item label="观战">
<el-switch v-model="form.allowSpectate" />
<div class="create-room-dialog__hint">开启后其他玩家可旁观对局</div>
</el-form-item>
</el-form>
<template #footer>
@@ -68,6 +74,7 @@
<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { useBaseLayoutStore } from '@/stores'
import { storeToRefs } from 'pinia'
@@ -80,6 +87,7 @@ interface CreateRoomForm {
mode: string
stakes: number | undefined
password: string
allowSpectate: boolean
}
const props = defineProps<{
@@ -91,6 +99,7 @@ const emit = defineEmits<{
(e: 'created'): void
}>()
const router = useRouter()
const baseLayoutStore = useBaseLayoutStore()
const { activeGameName, activeGameConfig } = storeToRefs(baseLayoutStore)
@@ -114,7 +123,8 @@ const form = reactive<CreateRoomForm>({
name: '',
mode: '',
stakes: undefined,
password: ''
password: '',
allowSpectate: true
})
/** 初始化默认值:取当前游戏配置的第一个选项 */
@@ -125,6 +135,7 @@ function initDefaults() {
}
form.name = ''
form.password = ''
form.allowSpectate = true
}
/** 弹窗打开时设置默认值 */
@@ -154,16 +165,19 @@ async function handleSubmit() {
submitting.value = true
try {
await createRoom({
const res = 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
maxPlayers: gameConfig.value?.maxPlayers ?? 0,
allowSpectate: form.allowSpectate
})
visible.value = false
emit('created')
// 跳转到新创建的房间
router.push(`/room/${res.data.room.id}`)
} finally {
submitting.value = false
}