.

src/views/GameView.vue

@@ -8,6 +8,7 @@
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
         <ElTableColumn prop="name" label="名称" />
+        <ElTableColumn prop="type" label="类型" width="100" />
         <ElTableColumn prop="roomId" label="房间ID" />
         <ElTableColumn prop="status" label="状态" width="150" :formatter="statusFormatter" />
         <ElTableColumn prop="autoReset" label="自动重置" />
@@ -24,7 +25,7 @@
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
         <ElTableColumn label="操作" align="center" width="350">
             <template #default="{ row }">
-                <ElButton v-if="row.status === 'created'" @click="onEdit(row)" type="primary">编辑</ElButton>
+                <ElButton @click="onEdit(row)" type="primary">编辑</ElButton>
                 <ElButton v-if="row.status === 'created'" @click="onInit(row)" type="primary">初始化</ElButton>
                 <ElButton v-if="row.status !== 'created'" @click="onPlay(row)" type="primary">详情</ElButton>
                 <ElButton @click="onDelete(row)" type="danger">删除</ElButton>
@@ -42,6 +43,11 @@
         <ElFormItem prop="name" label="名称">
             <ElInput v-model="model.name" placeholder="请输入名称" />
         </ElFormItem>
+        <ElFormItem prop="type" label="类型">
+            <ElSelect v-model="model.type" placeholder="请选择类型">
+                <ElOption v-for="item in promptTypes" :key="item" :label="item" :value="item" />
+            </ElSelect>
+        </ElFormItem>
         <ElFormItem prop="roomId" label="房间">
             <ElSelect v-model="model.roomId" placeholder="请选择房间">
                 <ElOption v-for="item in rooms" :key="item.id" :label="item.name" :value="item.id" />
@@ -131,6 +137,7 @@ const table = ref(null)
 const model = ref({})
 const rules = {
     name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
     roomId: [{ required: true, message: '请选择房间', trigger: 'blur' }],
     autoReset: [{ required: true, message: '请输入自动重置', trigger: 'blur' }],
     background: [{ required: true, message: '请输入故事背景', trigger: 'blur' }],
@@ -154,10 +161,14 @@ const rules = {
 }
 
 const rooms = ref([])
+const promptTypes = ref([])
 onMounted(() => {
     http.post('/room').then((res) => {
         rooms.value = res.items
     })
+    http.get('/prompt/types').then((res) => {
+        promptTypes.value = res
+    })
 })
 
 const { showEditDialog, onEdit } = setupEditDialog(model)
@@ -177,13 +188,21 @@ async function genCharactor() {
         ElMessage.error('请先输入故事背景')
         return
     }
+    if (!model.value.background) {
+        ElMessage.error('请先选择类型')
+        return
+    }
     const { value } = await ElMessageBox.prompt('生成数量：', '生成角色', {
         inputPattern: /^\d{1,2}$/,
         inputErrorMessage: 'Invalid Num'
     })
     generating.value = true
     try {
-        const res = await http.post(`/game/genCharactor`, { background: model.value.background, num: value })
+        const res = await http.post(`/game/genCharactor`, {
+            type: model.value.type,
+            background: model.value.background,
+            num: value
+        })
         generating.value = false
         model.value.charactors = (model.value.charactors || []).concat(res)
     } catch (error) {

src/views/PromptView.vue

@@ -1,6 +1,13 @@
 <template>
     <div>
-        <el-tabs v-model="activeName" class="demo-tabs" tabPosition="left">
+        <div class="">
+            <ElSelect v-model="type">
+                <ElOption v-for="item in types" :key="item" :label="item" :value="item" />
+            </ElSelect>
+            <ElButton :icon="Plus" class="ml-4" @click="addType"></ElButton>
+            <ElButton :icon="Trash" @click="delType" />
+        </div>
+        <el-tabs v-model="activeName" class="mt-4" tabPosition="left">
             <el-tab-pane v-for="(item, i) in prompts" :key="item.name" :label="item.description" :name="item.name">
                 <ElInput v-model="item.template" type="textarea" :autosize="{ min: 20 }"></ElInput>
                 <div class="mt-4">
@@ -13,14 +20,44 @@
 </template>
 <script setup>
 import { http } from '@/plugins/http'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
+import { Plus, Trash } from '@vicons/tabler'
+import { ElMessageBox } from 'element-plus'
 const activeName = ref('')
 const prompts = ref([])
-onMounted(() => {
-    http.get('/prompt').then((res) => {
-        prompts.value = res
+const types = ref([])
+const type = ref(null)
+const props = defineProps({
+    gameId: {
+        type: Number,
+        default: 0
+    }
+})
+function load() {
+    http.get('/prompt/types').then((res) => {
+        types.value = res
+        if (res.length === 0) {
+            type.value = null
+            prompts.value = []
+        } else {
+            if (!type.value) {
+                type.value = res[0]
+            } else if (!res.find((item) => item === type.value)) {
+                type.value = res[0]
+            }
+        }
     })
+}
+watch(type, (val) => {
+    if (val) {
+        http.get(`/prompt/${val}`).then((res) => {
+            prompts.value = res
+        })
+    }
+})
+onMounted(() => {
+    load()
 })
 const loading = ref(false)
 async function save(i) {
@@ -37,4 +74,32 @@ async function save(i) {
 async function restore(i) {
     prompts.value[i].template = prompts.value[i].defaultTemplate
 }
+async function addType() {
+    const { value: type } = await ElMessageBox.prompt('请输入类型', '添加类型', {
+        inputPattern: /.+/,
+        inputErrorMessage: '请输入类型'
+    })
+    console.log(type)
+    try {
+        await http.put(`/prompt/types`, { type })
+        ElMessage.success('添加成功')
+        load()
+    } catch (error) {
+        ElMessage.error(error.message)
+    }
+}
+async function delType() {
+    await ElMessageBox.confirm('确定删除该类型吗？', '删除类型', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+    })
+    try {
+        await http.delete(`/prompt/${type.value}`)
+        ElMessage.success('删除成功')
+        load()
+    } catch (error) {
+        ElMessage.error(error.message)
+    }
+}
 </script>