优化

src/modules/notifications/pages/MessageTemplatesView.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Download, FileUp, Pencil, Plus } from '@lucide/vue'
+import AdminPage from '@/shared/components/AdminPage.vue'
+import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
+import ListPageLayout from '@/shared/components/ListPageLayout.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
+import ContractPendingNotice from '@/modules/notifications/components/ContractPendingNotice.vue'
+import TemplateEditorDialog from '@/modules/notifications/components/TemplateEditorDialog.vue'
+
+const page = ref(1)
+const pageSize = ref(20)
+const editorOpen = ref(false)
+const filters = ref<QueryModel>({ code: '', content: '' })
+const queryFields: QueryField[] = [{ key: 'code', type: 'input', label: '模板CODE', placeholder: '模板CODE' }, { key: 'content', type: 'input', label: '模板内容', placeholder: '模板内容' }]
+const columns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 110, fixed: 'left', slotName: 'actions' },
+  { key: 'code', prop: 'code', label: '模板CODE', minWidth: 190 },
+  { key: 'title', prop: 'title', label: '模板标题', minWidth: 180 },
+  { key: 'content', prop: 'content', label: '模板内容', minWidth: 320 },
+  { key: 'type', prop: 'type', label: '模板类型', width: 110 },
+]
+</script>
+
+<template>
+  <AdminPage><ListPageLayout aria-label="消息模板列表">
+    <template #toolbar><QueryToolbar v-model="filters" class="surface-panel" aria-label="消息模板筛选" ariaLabel="消息模板筛选" :fields="queryFields" preference-key="notifications-templates-query" /></template>
+    <template #state><ContractPendingNotice /></template>
+    <section class="surface-panel table-panel">
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="[]" :columns="columns" preference-key="notifications-templates-table" :total="0" row-key="code" empty-text="接口接入后显示站内消息模板">
+        <template #toolbar-actions><el-button type="primary" @click="editorOpen = true"><Plus :size="16" />新增模板</el-button><el-button disabled><Download :size="16" />导出</el-button><el-button disabled><FileUp :size="16" />导入</el-button></template>
+        <template #pagination-left><span>共 0 个模板</span></template>
+        <template #actions><el-button link type="primary" disabled><Pencil :size="15" />编辑</el-button></template>
+      </DataTable>
+    </section>
+  </ListPageLayout><TemplateEditorDialog v-model="editorOpen" /></AdminPage>
+</template>