添加角色设置

src/router/index.js

@@ -78,6 +78,14 @@ const router = createRouter({
                         title: '面具设置'
                     }
                 },
+                {
+                    path: 'chatRole',
+                    name: 'chatRole',
+                    component: () => import('../views/ChatRoleView.vue'),
+                    meta: {
+                        title: '角色设置'
+                    }
+                },
                 {
                     path: 'sysConfig',
                     name: 'sysConfig',

src/views/ChatRoleView.vue

@@ -0,0 +1,107 @@
+<template>
+    <PagingTable url="/chatRole" :where="where" ref="table">
+        <template #filter>
+            <ElButton :icon="Plus" @click="onEdit()">添加</ElButton>
+        </template>
+
+        <ElTableColumn prop="id" label="#" width="80" />
+        <ElTableColumn prop="name" label="名称" width="150" />
+        <ElTableColumn prop="playerName" label="玩家名称" width="150" />
+        <ElTableColumn prop="pic" label="头像" width="100">
+            <template #default="{ row }">
+                <el-image preview-teleported style="width: 30px; height: 30px" :src="row.pic" fit="cover"
+                    :preview-src-list="row.pic"></el-image>
+            </template>
+        </ElTableColumn>
+        <ElTableColumn prop="describe" label="描述" min-width="120" show-overflow-tooltip />
+        <ElTableColumn prop="chatted" label="聊过" min-width="30" show-overflow-tooltip />
+        <ElTableColumn prop="condition" label="动态生成条件" min-width="180" />
+        <ElTableColumn prop="dynamicNumber" label="动态数" min-width="30" />
+        <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="playerName" label="玩家名称">
+            <ElInput v-model="model.name" placeholder="请输入玩家名称" />
+        </ElFormItem>
+        <ElFormItem prop="pic" label="头像">
+            <img v-if="model.pic" :src="model.pic" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <ElUpload class="upload" action="http://localhost:3000/api/file/upload" :show-file-list="false"
+                :on-success="handleSuccess" :before-upload="beforeUpload">
+                <div class="el-button el-button--primary">修改头像</div>
+            </ElUpload>
+        </ElFormItem>
+        <ElFormItem prop="describe" label="描述">
+            <ElInput v-model="model.describe" placeholder="请输入描述" />
+        </ElFormItem>
+        <ElFormItem prop="condition" label="条件">
+            <ElInput v-model="model.condition" placeholder="请输入动态生成条件" />
+        </ElFormItem>
+    </EditDialog>
+</template>
+<script setup>
+import { ref } from 'vue'
+import PagingTable from '@/components/PagingTable.vue'
+import { useTimeFormatter } from '@/utils/formatter'
+import { Plus } from '@vicons/tabler'
+import EditDialog from '@/components/EditDialog.vue'
+import { setupEditDialog } from '@/utils/editDialog'
+import { http } from '@/plugins/http'
+import { ElMessage } from 'element-plus'
+import { useClipboard } from '@vueuse/core'
+
+const where = ref({})
+const timeFormatter = useTimeFormatter()
+const table = ref(null)
+const model = ref({})
+const rules = {
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    playerName: [{ required: true, message: '请输入玩家名称', trigger: 'blur' }],
+    pic: [{ required: true, message: '请上传头像', trigger: 'blur' }],
+    describe: [{ required: true, message: '请输入描述', trigger: 'blur' }],
+    condition: [{ required: true, message: '请输入动态生成条件', trigger: 'blur' }]
+}
+const { showEditDialog, onEdit } = setupEditDialog(model)
+async function submit() {
+    console.log(model)
+    await http.put('/chatRole', model.value)
+    ElMessage.success('保存成功')
+}
+function getToken(row) {
+    http.get(`/auth/admin/user/${row.id}/token`).then((res) => {
+        const { copy } = useClipboard({ legacy: true })
+        copy(res.access_token)
+        ElMessage.success('复制成功')
+    })
+}
+function handleSuccess(response, file, fileList) {
+    model.value.pic = response.url
+    const input = document.querySelector('.el-upload__input')
+    input.value = ''
+    const preview = document.querySelector('.avatar')
+    preview.src = response.url
+}
+function beforeUpload(file) {
+    const isJPG = file.type === 'image/jpeg'
+    const isPNG = file.type === 'image/png'
+    if (!isJPG && !isPNG) {
+        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
+        return false
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2
+    if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+        return false
+    }
+    return true
+}
+</script>

src/views/MainView.vue

@@ -122,6 +122,17 @@ const menus = ref([
             }
         ]
     },
+    {
+        name: 'chatRole',
+        title: '角色设置',
+        icon: shallowRef(Settings),
+        children: [
+            {
+                name: 'chatRole',
+                title: '角色设置'
+            }
+        ]
+    },
     {
         name: 'settings',
         title: '系统设置',