面具后台页面

src/router/index.js

@@ -70,6 +70,14 @@ const router = createRouter({
                         title: '会员列表'
                     }
                 },
+                {
+                    path: 'mask',
+                    name: 'mask',
+                    component: () => import('../views/MaskView.vue'),
+                    meta: {
+                        title: '面具设置'
+                    }
+                },
                 {
                     path: 'sysConfig',
                     name: 'sysConfig',

src/views/MainView.vue

@@ -111,6 +111,17 @@ const menus = ref([
             }
         ]
     },
+    {
+        name: 'mask',
+        title: '面具设置',
+        icon: shallowRef(Settings),
+        children: [
+            {
+                name: 'mask',
+                title: '面具设置'
+            }
+        ]
+    },
     {
         name: 'settings',
         title: '系统设置',

src/views/MaskView.vue

@@ -0,0 +1,65 @@
+<template>
+    <PagingTable url="/admin/mask" :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="describe" label="描述" min-width="120" show-overflow-tooltip />
+        <ElTableColumn prop="welcomeMessage" label="欢迎语" min-width="120" show-overflow-tooltip />
+        <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="describe" label="描述">
+            <ElInput v-model="model.describe" placeholder="请输入描述" />
+        </ElFormItem>
+        <ElFormItem prop="welcomeMessage" label="欢迎语">
+            <ElInput v-model="model.welcomeMessage" 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 EnumSelect from '@/components/EnumSelect.vue'
+import { UserRole } from '@/enums'
+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' }
+    ],
+    describe: [{ required: true, message: '请输入描述', trigger: 'blur' }],
+    welcomeMessage: [{ required: true, message: '请输入欢迎语', trigger: 'blur' }]
+}
+const { showEditDialog, onEdit } = setupEditDialog(model)
+async function submit() {
+    await http.put('/admin/mask', 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('复制成功')
+    })
+}
+</script>