.

src/views/PlayView.vue

@@ -17,7 +17,7 @@
                         <el-radio
                             v-for="(c, i) in item.options"
                             :key="i"
-                            :label="c.content"
+                            :label="i"
                             class="w-full !h-auto !whitespace-normal mb-4"
                         >
                             {{ c.content }}<br />
@@ -33,11 +33,11 @@
                 </template>
                 <template v-else-if="item.options && item.options.length">
                     <br /><br />
-                    <el-radio-group :model-value="item.picked" disabled class="ml-4">
+                    <el-radio-group :model-value="item.choiceIndex" disabled class="ml-4">
                         <el-radio
                             v-for="(c, i) in item.options"
                             :key="i"
-                            :label="c.content"
+                            :label="i"
                             class="w-full !h-auto !whitespace-normal mb-4"
                         >
                             {{ c.content }}<br />
@@ -91,6 +91,33 @@
             </ElCollapseItem>
         </ElCollapse>
     </ElDialog>
+    <ElDialog title="加入角色" v-model="showAddCharactorDialog" width="500px">
+        <ElForm :model="charactorModel" label-position="top" inline :rules="charactorRules" ref="charactorForm">
+            <ElFormItem prop="name" label="角色名称">
+                <ElInput v-model="charactorModel.name" />
+            </ElFormItem>
+            <ElFormItem prop="gender" label="性别">
+                <ElInput v-model="charactorModel.gender" />
+            </ElFormItem>
+            <ElFormItem prop="age" label="年龄">
+                <ElInput v-model="charactorModel.age" />
+            </ElFormItem>
+            <ElFormItem prop="occupation" label="职业">
+                <ElInput v-model="charactorModel.occupation" />
+            </ElFormItem>
+            <ElFormItem prop="personality" label="性格">
+                <ElInput v-model="charactorModel.personality" />
+            </ElFormItem>
+            <div class="w-full"></div>
+            <ElFormItem class="w-full" prop="background" label="背景">
+                <ElInput v-model="charactorModel.background" type="textarea" />
+            </ElFormItem>
+        </ElForm>
+        <template #footer>
+            <ElButton @click="showAddCharactorDialog = false">取消</ElButton>
+            <ElButton type="primary" @click="addCharactor">确定</ElButton>
+        </template>
+    </ElDialog>
     <!-- </div> -->
 </template>
 <script setup>
@@ -105,7 +132,7 @@ import { useTimeFormatter } from '@/utils/formatter'
 const route = useRoute()
 const game = ref({})
 const history = ref([])
-const choice = ref('')
+const choice = ref(-1)
 const needChoice = computed(() => {
     return (history.value[history.value.length - 1].options || []).length > 0
 })
@@ -114,21 +141,23 @@ async function getData(params) {
         game.value = res
     })
     http.get(`/game/${route.params.id}/history`, { params }).then((res) => {
-        for (let i = 0; i < res.length; i++) {
-            if (res[i].options && res[i].options.length && res[i + 1] && res[i + 1].pickedChoice) {
-                if (res[i + 1] && res[i + 1].pickedChoice) {
-                    res[i].picked = res[i + 1].pickedChoice
-                }
+        res.forEach((i) => {
+            if (i.options && i.choice) {
+                i.choiceIndex = i.options.findIndex((o) => o.content === i.choice.content)
+            }
+        })
+        const last = res[res.length - 1]
+        if (last && last.options && last.options.length && last.choice) {
+            if (
+                history.value.length === 0 ||
+                (res[res.length - 1] &&
+                    history.value[history.value.length - 1] &&
+                    res[res.length - 1].id !== history.value[history.value.length - 1].id)
+            ) {
+                choice.value = last.options.findIndex((i) => i.content === last.choice.content)
             }
         }
-        if (
-            res[res.length - 1] &&
-            history.value[history.value.length - 1] &&
-            res[res.length - 1].id !== history.value[history.value.length - 1].id
-        ) {
-            ElMessage.success('有新的剧情')
-            choice.value = ''
-        }
+
         history.value = res
     })
 }
@@ -157,8 +186,8 @@ async function start() {
     getData()
 }
 
-async function continueGame(genChoice = false, addCharactor = null) {
-    if (needChoice.value && !choice.value) {
+async function continueGame(genChoice = false, newCharactor = null) {
+    if (needChoice.value && choice.value < 0) {
         ElMessage.info('请选择一个选项')
         return
     }
@@ -166,8 +195,8 @@ async function continueGame(genChoice = false, addCharactor = null) {
     try {
         await http.post(`/game/${route.params.id}/continue`, {
             genChoice: genChoice,
-            choice: choice.value,
-            addCharactor
+            choice: history.value[history.value.length - 1].options[choice.value],
+            addCharactor: newCharactor
         })
         loading.value = false
         getData()
@@ -188,12 +217,30 @@ async function revert() {
     getData()
 }
 
-async function onAddCharactor(genChoice = false) {
-    const { value } = await ElMessageBox.prompt('基本信息：', '添加角色', {
-        inputPattern: /^.+$/,
-        inputErrorMessage: '请输入基本信息'
-    })
-    continueGame(genChoice, value)
+const showAddCharactorDialog = ref(false)
+const charactorRules = {
+    name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+    gender: [{ required: true, message: '请输入性别', trigger: 'blur' }],
+    age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
+    occupation: [{ required: true, message: '请输入职业', trigger: 'blur' }],
+    personality: [{ required: true, message: '请输入性格', trigger: 'blur' }],
+    background: [{ required: true, message: '请输入背景', trigger: 'blur' }]
+}
+const charactorForm = ref(null)
+const charactorModel = ref({})
+const genChoice = ref(false)
+
+async function onAddCharactor(g = false) {
+    charactorModel.value = {}
+    charactorForm.value?.clearValidate()
+    showAddCharactorDialog.value = true
+    genChoice.value = g
+}
+
+async function addCharactor() {
+    await charactorForm.value.validate()
+    showAddCharactorDialog.value = false
+    continueGame(genChoice.value, charactorModel.value)
 }
 
 const showDetailDialog = ref(false)