。

src/views/PlayView.vue

@@ -1,52 +1,64 @@
 <template>
-    <div class="h-full overflow-auto p-4 rounded-lg bg-white dark:bg-neutral-800">
-        <el-timeline>
-            <el-timeline-item
-                type="primary"
-                placement="top"
-                v-for="(item, index) in history"
-                :key="index"
-                :timestamp="formatDatetime(item.date, item.time)"
-            >
-                <ElCard>
-                    <span class="whitespace-pre-wrap" v-html="item.plot"></span>
-                    <template v-if="index === history.length - 1">
-                        <br />
-                    </template>
-                </ElCard>
-            </el-timeline-item>
-        </el-timeline>
-        <div class="text-center">
-            <ElButtonGroup v-if="game.status === 'PLAYING'">
-                <ElButton :loading="loading" @click="continueGame">继续</ElButton>
-                <ElButton :loading="loading" @click="continueGame(true)">生成选择</ElButton>
-                <ElButton :loading="loading" @click="revert">回退</ElButton>
-            </ElButtonGroup>
-            <ElButton v-else @click="start" :loading="loading">开始</ElButton>
-        </div>
+    <!-- <div class="h-full overflow-auto p-4 rounded-lg bg-white dark:bg-neutral-800"> -->
+    <el-timeline>
+        <el-timeline-item
+            type="primary"
+            placement="top"
+            v-for="(item, index) in history"
+            :key="index"
+            :timestamp="formatDatetime(item.date, item.time)"
+        >
+            <ElCard>
+                <span class="whitespace-pre-wrap" v-html="item.plot"></span>
+                <template v-if="index === history.length - 1 && item.choices.length">
+                    <br /><br />
+                    <el-radio-group v-model="choice" class="ml-4">
+                        <el-radio v-for="c in item.choices" :key="c" :label="c" class="w-full"> </el-radio>
+                    </el-radio-group>
+                </template>
+                <template v-if="index === history.length - 1">
+                    <br />
+                </template>
+            </ElCard>
+        </el-timeline-item>
+    </el-timeline>
+    <div class="text-center">
+        <ElButtonGroup v-if="game.status === 'PLAYING'">
+            <ElButton :loading="loading" @click="continueGame(false)">继续</ElButton>
+            <ElButton :loading="loading" @click="continueGame(true)">生成选择</ElButton>
+            <ElButton :loading="loading" @click="onAddCharactor">加入角色</ElButton>
+            <ElButton :loading="loading" @click="revert">回退</ElButton>
+        </ElButtonGroup>
+        <ElButton v-else @click="start" :loading="loading">开始</ElButton>
     </div>
+
+    <!-- </div> -->
 </template>
 <script setup>
 import { http } from '@/plugins/http'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { format } from 'date-fns'
 import { zhCN } from 'date-fns/locale'
-
+import { ElMessage, ElMessageBox } from 'element-plus'
 const route = useRoute()
 const game = ref({})
 const history = ref([])
+const choice = ref('')
+const needChoice = computed(() => {
+    return (history.value[history.value.length - 1].choices || []).length > 0
+})
 async function getData(params) {
     http.get(`/game/${route.params.id}`, { params }).then((res) => {
         game.value = res
-    })
-    http.get(`/game/${route.params.id}/history`, { params }).then((res) => {
-        history.value = res
-    })
+    }),
+        http.get(`/game/${route.params.id}/history`, { params }).then((res) => {
+            history.value = res
+        })
+    choice.value = ''
 }
 getData()
 function formatDatetime(date, time) {
-    console.log(date, time)
     return (
         format(new Date(date), 'MMMdo', { locale: zhCN }) +
         {
@@ -59,23 +71,46 @@ function formatDatetime(date, time) {
 const loading = ref(false)
 async function start() {
     loading.value = true
-    await http.post(`/game/${route.params.id}/start`)
+    await http.post(`/game/${route.params.id}/start`, { date: new Date() })
     loading.value = false
     getData()
 }
+
 async function continueGame(genChoice = false) {
+    if (needChoice.value && !choice.value) {
+        ElMessage.info('请选择一个选项')
+        return
+    }
     loading.value = true
-    await http.post(`/game/${route.params.id}/continue`, { genChoice: genChoice })
-    loading.value = false
-    getData()
+    try {
+        await http.post(`/game/${route.params.id}/continue`, { genChoice: genChoice, choice: choice.value })
+        loading.value = false
+        getData()
+    } catch (error) {
+        ElMessage.error(error.message)
+        loading.value = false
+    }
 }
 
-const reverting = ref(false)
 async function revert() {
     loading.value = true
     await http.post(`/game/${route.params.id}/revert`)
     loading.value = false
     getData()
 }
+
+async function onAddCharactor() {
+    const { value } = await ElMessageBox.prompt('基本信息：', '添加角色', {
+        inputPattern: /^.+$/,
+        inputErrorMessage: '请输入基本信息'
+    })
+    try {
+        await http.post(`/game/${route.params.id}/addCharactor`, {
+            base: value
+        })
+    } catch (error) {
+        ElMessage.error(error.message)
+    }
+}
 </script>
 <style lang="less" scoped></style>