.

src/enums/index.js

@@ -31,3 +31,8 @@ export const GameStatus = {
     PLAYING: '游戏中',
     FINISH: '已完成'
 }
+export const StreamPlatform = {
+    twitch: 'Twitch',
+    bilibili: 'B站',
+    douyu: '斗鱼'
+}

src/router/index.js

@@ -69,6 +69,14 @@ const router = createRouter({
                     meta: {
                         title: '提示词'
                     }
+                },
+                {
+                    path: '/room',
+                    name: 'room',
+                    component: () => import('../views/RoomView.vue'),
+                    meta: {
+                        title: '直播间'
+                    }
                 }
             ]
         }

src/views/GameView.vue

@@ -27,6 +27,9 @@
         <ElFormItem prop="name" label="名称">
             <ElInput v-model="model.name" placeholder="请输入名称" />
         </ElFormItem>
+        <ElFormItem prop="platform" label="平台">
+            <EnumSelect :enum="StreamPlatform" v-model="model.platform" />
+        </ElFormItem>
         <ElFormItem prop="roomId" label="房间ID">
             <ElInput v-model="model.roomId" placeholder="请输入房间ID" />
         </ElFormItem>
@@ -76,6 +79,7 @@ import { http } from '@/plugins/http'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useClipboard } from '@vueuse/core'
 import { useRouter } from 'vue-router'
+import { StreamPlatform } from '@/enums'
 
 const router = useRouter()
 const where = ref({})
@@ -85,6 +89,7 @@ const table = ref(null)
 const model = ref({})
 const rules = {
     name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+    platform: [{ required: true, message: '请选择平台', trigger: 'blur' }],
     roomId: [{ required: true, message: '请输入房间ID', trigger: 'blur' }],
     background: [{ required: true, message: '请输入故事背景', trigger: 'blur' }],
     charactors: [

src/views/MainView.vue

@@ -64,7 +64,8 @@ import {
     Settings,
     Photo,
     DeviceGamepad,
-    Prompt
+    Prompt,
+    Camera
 } from '@vicons/tabler'
 import UserAvatar from '@/components/UserAvatar.vue'
 import ChangePwd from '@/components/ChangePwd.vue'
@@ -80,6 +81,11 @@ const menus = [
         title: '主页',
         icon: Home
     },
+    {
+        name: '/room',
+        title: '直播间',
+        icon: Camera
+    },
     {
         name: '/game',
         title: '游戏管理',

src/views/RoomView.vue

@@ -0,0 +1,71 @@
+<template>
+    <PagingTable url="/room" :where="where" ref="table">
+        <template #filter>
+            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
+        </template>
+        <ElTableColumn prop="id" label="#" width="80" />
+        <ElTableColumn prop="name" label="名称" />
+        <ElTableColumn prop="platform" label="平台" :formatter="platformFormatter" />
+        <ElTableColumn prop="channelId" label="频道" />
+        <ElTableColumn prop="active" label="直播中" width="100" align="center">
+            <template #default="{ row }">
+                <ElSwitch v-model="row.active" @change="onActiveChange($event, row)" />
+            </template>
+        </ElTableColumn>
+        <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
+        <ElTableColumn label="操作" align="center" width="120">
+            <template #default="{ row }">
+                <ElButton @click="onEdit(row)">编辑</ElButton>
+            </template>
+        </ElTableColumn>
+    </PagingTable>
+    <EditDialog v-model="showEditDialog" :model="model" :rules="rules" :on-submit="submit" @success="table.refresh()">
+        <ElFormItem prop="name" label="名称">
+            <ElInput v-model="model.name" placeholder="请输入名称" />
+        </ElFormItem>
+        <ElFormItem prop="platform" label="平台">
+            <EnumSelect :enum="StreamPlatform" v-model="model.platform" />
+        </ElFormItem>
+        <ElFormItem prop="channelId" label="频道">
+            <ElInput v-model="model.channelId" placeholder="请输入频道" />
+        </ElFormItem>
+    </EditDialog>
+</template>
+<script setup>
+import { onActivated, ref } from 'vue'
+import PagingTable from '@/components/PagingTable.vue'
+import { useEnumFormatter, useTimeFormatter } from '@/utils/formatter'
+import { Plus } from '@vicons/tabler'
+import EditDialog from '@/components/EditDialog.vue'
+import { setupEditDialog } from '@/utils/editDialog'
+import EnumSelect from '@/components/EnumSelect.vue'
+import { UserRole } from '@/enums'
+import { http } from '@/plugins/http'
+import { ElMessage } from 'element-plus'
+import { useClipboard } from '@vueuse/core'
+import { StreamPlatform } from '@/enums'
+
+const where = ref({})
+const timeFormatter = useTimeFormatter()
+const platformFormatter = useEnumFormatter(StreamPlatform)
+const table = ref(null)
+const model = ref({})
+const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    platform: [{ required: true, message: '请选择平台', trigger: 'blur' }],
+    channelId: [{ required: true, message: '请输入频道', trigger: 'blur' }]
+}
+const { showEditDialog, onEdit } = setupEditDialog(model)
+async function submit() {
+    await http.put('/room', model.value)
+    ElMessage.success('保存成功')
+}
+function onActiveChange(e, row) {
+    console.log(e, row)
+    if (e) {
+        http.post(`/room/${row.id}/start`)
+    } else {
+        http.post(`/room/${row.id}/stop`)
+    }
+}
+</script>