.

src/utils/formatter.js

@@ -1,7 +1,11 @@
 import { format } from 'date-fns'
 export function useTimeFormatter(pattern = 'yyyy-MM-dd HH:mm') {
     return function (row, column, value, index) {
-        return format(new Date(value), pattern)
+        try {
+            return format(new Date(value), pattern)
+        } catch (error) {
+            return ''
+        }
     }
 }
 

src/views/GameView.vue

@@ -4,9 +4,12 @@
             <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
         </template>
         <ElTableColumn prop="id" label="#" width="80" />
-        <ElTableColumn prop="name" label="名称" min-width="120" />
+        <ElTableColumn prop="name" label="名称" />
+        <ElTableColumn prop="roomId" label="房间ID" />
         <ElTableColumn prop="status" label="状态" width="150" :formatter="statusFormatter" />
-        <ElTableColumn prop="running" label="运行">
+        <ElTableColumn prop="autoReset" label="自动重置" />
+        <ElTableColumn prop="resetNum" label="重置次数" />
+        <ElTableColumn prop="running" label="运行" width="100" align="center">
             <template #default="{ row }">
                 <ElSwitch :model-value="row.status === 'running'" @update:model-value="onActiveChange($event, row)" />
             </template>
@@ -35,6 +38,12 @@
         <ElFormItem prop="roomId" label="房间ID">
             <ElInput v-model="model.roomId" placeholder="请输入房间ID" />
         </ElFormItem>
+        <ElFormItem prop="autoReset" label="自动重置">
+            <ElRadioGroup v-model="model.autoReset">
+                <ElRadio :label="true">是</ElRadio>
+                <ElRadio :label="false">否</ElRadio>
+            </ElRadioGroup>
+        </ElFormItem>
         <ElFormItem prop="background" label="故事背景">
             <ElInput v-model="model.background" type="textarea" placeholder="请输入故事背景" />
         </ElFormItem>
@@ -111,6 +120,7 @@ const model = ref({})
 const rules = {
     name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
     roomId: [{ required: true, message: '请输入房间ID', trigger: 'blur' }],
+    autoReset: [{ required: true, message: '请输入自动重置', trigger: 'blur' }],
     background: [{ required: true, message: '请输入故事背景', trigger: 'blur' }],
     charactors: [
         {

src/views/PlayView.vue

@@ -9,28 +9,45 @@
             :timestamp="formatDatetime(item.date, item.time)"
         >
             <ElCard>
+                <ElButton :icon="InfoCircle" size="small" type="info" plain @click="onDetail(item)"></ElButton>&nbsp;
                 <span class="whitespace-pre-wrap" v-html="item.plot"></span>
-                <template v-if="index === history.length - 1 && item.choices && item.choices.length">
+                <template v-if="index === history.length - 1 && item.options && item.options.length">
                     <br /><br />
                     <el-radio-group v-model="choice" class="ml-4">
                         <el-radio
-                            v-for="c in item.choices"
-                            :key="c"
-                            :label="c"
+                            v-for="(c, i) in item.options"
+                            :key="i"
+                            :label="c.content"
                             class="w-full !h-auto !whitespace-normal mb-4"
                         >
+                            {{ c.content }}<br />
+                            <span>
+                                {{
+                                    c.modifyHp
+                                        .map((i) => `${i.name}${i.changeValue > 0 ? '+' : ''}${i.changeValue}`)
+                                        .join(', ')
+                                }}
+                            </span>
                         </el-radio>
                     </el-radio-group>
                 </template>
-                <template v-else-if="item.choices && item.choices.length">
+                <template v-else-if="item.options && item.options.length">
                     <br /><br />
                     <el-radio-group :model-value="item.picked" disabled class="ml-4">
                         <el-radio
-                            v-for="c in item.choices"
-                            :key="c"
-                            :label="c"
+                            v-for="(c, i) in item.options"
+                            :key="i"
+                            :label="c.content"
                             class="w-full !h-auto !whitespace-normal mb-4"
                         >
+                            {{ c.content }}<br />
+                            <span>
+                                {{
+                                    c.modifyHp
+                                        .map((i) => `${i.name}${i.changeValue > 0 ? '+' : ''}${i.changeValue}`)
+                                        .join(', ')
+                                }}
+                            </span>
                         </el-radio>
                     </el-radio-group>
                 </template>
@@ -49,7 +66,31 @@
             <ElButton :loading="loading" @click="revert">回退</ElButton>
         </ElButtonGroup>
     </div>
-
+    <ElDialog title="详情" v-model="showDetailDialog" width="1000px">
+        <ElCollapse :model-value="['1', '2']">
+            <ElCollapseItem title="角色信息" name="1">
+                <ElTable :data="detail.charactors" size="small">
+                    <ElTableColumn prop="name" label="角色名称" width="80"></ElTableColumn>
+                    <ElTableColumn prop="gender" label="性别" width="45" align="center"></ElTableColumn>
+                    <ElTableColumn prop="age" label="年龄" width="45" align="center"></ElTableColumn>
+                    <ElTableColumn prop="occupation" label="职业" width="80" show-overflow-tooltip></ElTableColumn>
+                    <ElTableColumn prop="personality" label="性格"></ElTableColumn>
+                    <ElTableColumn prop="background" label="背景" show-overflow-tooltip></ElTableColumn>
+                    <ElTableColumn prop="hp" label="生命值" width="55" align="center"></ElTableColumn>
+                    <ElTableColumn prop="status" label="状态" width="45" align="center">
+                        <template #default="{ row }">
+                            <span>{{ row.dead ? '死亡' : '存活' }}</span>
+                        </template>
+                    </ElTableColumn>
+                    <ElTableColumn prop="joinAt" label="加入时间" :formatter="timeFormatter" width="80"></ElTableColumn>
+                    <ElTableColumn prop="deadAt" label="死亡时间" :formatter="timeFormatter" width="80"></ElTableColumn>
+                </ElTable>
+            </ElCollapseItem>
+            <ElCollapseItem title="剧情概要" name="2">
+                {{ detail.summary }}
+            </ElCollapseItem>
+        </ElCollapse>
+    </ElDialog>
     <!-- </div> -->
 </template>
 <script setup>
@@ -59,12 +100,14 @@ import { useRoute } from 'vue-router'
 import { format } from 'date-fns'
 import { zhCN } from 'date-fns/locale'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { InfoCircle } from '@vicons/tabler'
+import { useTimeFormatter } from '@/utils/formatter'
 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
+    return (history.value[history.value.length - 1].options || []).length > 0
 })
 async function getData(params) {
     http.get(`/game/${route.params.id}`, { params }).then((res) => {
@@ -72,7 +115,7 @@ async function getData(params) {
     })
     http.get(`/game/${route.params.id}/history`, { params }).then((res) => {
         for (let i = 0; i < res.length; i++) {
-            if (res[i].choices && res[i].choices.length && res[i + 1] && res[i + 1].pickedChoice) {
+            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
                 }
@@ -152,5 +195,13 @@ async function onAddCharactor(genChoice = false) {
     })
     continueGame(genChoice, value)
 }
+
+const showDetailDialog = ref(false)
+const detail = ref({})
+function onDetail(row) {
+    detail.value = { ...row }
+    showDetailDialog.value = true
+}
+const timeFormatter = useTimeFormatter('MM/dd')
 </script>
 <style lang="less" scoped></style>