diff --git a/deliver-front/vue/components.d.ts b/deliver-front/vue/components.d.ts
index 8679701b83394dd266b7eb60b220e1e1a3601de3..c257409af54b34190bb65ae133d9abe53700da53 100644
--- a/deliver-front/vue/components.d.ts
+++ b/deliver-front/vue/components.d.ts
@@ -10,6 +10,8 @@ declare module 'vue' {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACol: typeof import('ant-design-vue/es')['Col']
     ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
     ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
@@ -23,16 +25,21 @@ declare module 'vue' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    AStatistic: typeof import('ant-design-vue/es')['Statistic']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     Banner: typeof import('./src/components/Banner/index.vue')['default']
+    Code: typeof import('./src/components/Code/index.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/deliver-front/vue/src/components/Code/index.vue b/deliver-front/vue/src/components/Code/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d43e23bafbca2814a968e763a300593ad817cc8a
--- /dev/null
+++ b/deliver-front/vue/src/components/Code/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import Prism from 'prismjs'
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'html'
+  }
+})
+onMounted(() => {
+  Prism.highlightAll()
+})
+</script>
+<template>
+  <pre>
+    <code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"  data-prismjs-copy="复制"></code>
+ </pre>
+</template>
+<style lang="scss" scoped>
+pre {
+  width: 100%;
+}
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #f8f8f8;
+}
+</style>
diff --git a/deliver-front/vue/src/store/index.ts b/deliver-front/vue/src/store/index.ts
index eca97856db1d087a815fd9c296c8ac16c8d9448e..0ae09efc6d39d2d34ee45a90589a8a9a44cbac72 100644
--- a/deliver-front/vue/src/store/index.ts
+++ b/deliver-front/vue/src/store/index.ts
@@ -8,6 +8,9 @@ export const useStore = defineStore('store', {
   },
   getters: {},
   actions: {
+    getCollapse() {
+      return this.collapse
+    },
     changeCollapse() {
       this.collapse = !this.collapse
     }
diff --git a/deliver-front/vue/src/utils/date.ts b/deliver-front/vue/src/utils/date.ts
index 4032e7d3b34df99a0174da2d34a4c90761847ee4..0e6a01eaf845ecca8577f6f56d2fe945ab7ab34e 100644
--- a/deliver-front/vue/src/utils/date.ts
+++ b/deliver-front/vue/src/utils/date.ts
@@ -1,3 +1,5 @@
+import type { messageTemplate, updateTemp } from '@/views/Message/type'
+
 export const getDate = (d): string => {
   const date = new Date(d)
   const year = date.getFullYear()
@@ -16,3 +18,39 @@ export const getPushWays = (channelType: string | undefined, messageType: string
   }
   return JSON.stringify(obj)
 }
+
+export const getPushRange = (s: string): number => {
+  const pusharr = ['不限', '企业内部', '企业外部']
+  return pusharr.indexOf(s)
+}
+
+export const getChannelType = (s: string): number => {
+  const ChannelType = ['电话', '短信', '邮件', '钉钉', '企业微信', '飞书']
+  return ChannelType.indexOf(s) + 1
+}
+
+export const getUsersType = (s: string): number => {
+  const usersarr = ['企业账号', '电话', '邮箱', '平台 UserId']
+  return usersarr.indexOf(s)
+}
+
+export const getAllMessage = (mod: updateTemp, record: messageTemplate): void => {
+  mod.templateId = record.templateId
+  mod.templateName = record.templateName
+  mod.pushRange = getPushRange(record.pushRange as string)
+  mod.usersType = getUsersType(record.usersType as string)
+  mod.appId = record.appName
+  mod.templateStatus = record.templateStatus as number
+  mod.channelType = record.channelType
+  mod.messageType = record.messageType
+}
+
+// templateId: undefined,
+// templateName: '',
+// pushRange: undefined,
+// usersType: undefined,
+// pushWays: '',
+// templateStatus: 0,
+// appId: undefined,
+// channelType: undefined,
+// messageType: ''
diff --git a/deliver-front/vue/src/views/Channel/components/addTemplate.vue b/deliver-front/vue/src/views/Channel/components/addTemplate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e83255f4f694dc5aab6b4fe4dec44db4484d64f
--- /dev/null
+++ b/deliver-front/vue/src/views/Channel/components/addTemplate.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form'
+import { ref, reactive, watch } from 'vue'
+import type { addTemp } from '../type'
+import { getPushWays } from '@/utils/date'
+import { getApp, getMessageType } from '@/api/message'
+
+// 新增操作
+interface DelayLoading {
+  delay: number
+}
+
+interface Channel {
+  value: string
+  label: string
+}
+
+interface mess {
+  code: string
+  name: string
+}
+
+interface appItem {
+  appId: number
+  appName: string
+}
+
+const templateItem: addTemp = reactive({
+  templateName: '',
+  pushRange: undefined,
+  usersType: undefined,
+  pushWays: '',
+  templateStatus: 0,
+  appId: undefined,
+  channelType: undefined,
+  messageType: ''
+})
+
+const open = ref<boolean>(false)
+
+const labelCol = { span: 4 }
+
+const wrapperCol = { span: 20 }
+
+const iconLoading = ref<boolean | DelayLoading>(false)
+
+const validatePass = async (_rule: Rule): Promise<any> => {
+  if (!appDisabled.value && appData.value.length === 0) {
+    throw new Error('请先进行渠道 App 配置')
+  }
+  await Promise.resolve()
+}
+
+const rules: Record<string, Rule[]> = {
+  templateName: [
+    { required: true, message: '请输入模板名', trigger: 'change' },
+    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  pushRange: [{ required: true, message: '请选择推送范围', trigger: 'change' }],
+  usersType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
+  channelType: [
+    {
+      required: true,
+      message: '请选择渠道',
+      trigger: 'change'
+    }
+  ],
+  appId: [
+    {
+      required: true,
+      validator: validatePass,
+      trigger: 'blur'
+    }
+  ],
+  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
+  templateStatus: [{ required: true, message: '请选择模板状态', trigger: 'change' }]
+}
+
+const templateForm = ref()
+
+const addModules = (): void => {
+  open.value = true
+}
+
+// 处理推送范围和用户类型之间的关系
+const userdisabled = ref([
+  { value: 1, label: '企业账号', disabled: true },
+  { value: 2, label: '电话', disabled: true },
+  { value: 3, label: '邮箱', disabled: true },
+  { value: 4, label: '平台 UserId', disabled: true }
+])
+
+const handlePushRangeChange = (e): void => {
+  if (e.target.value === 0 || e.target.value === 1) {
+    userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: false }))
+  } else if (e.target.value === 2) {
+    userdisabled.value = userdisabled.value.map(item => {
+      if (item.value === 2 || item.value === 3) {
+        return { ...item, disabled: false }
+      } else {
+        return { ...item, disabled: true }
+      }
+    })
+  }
+}
+
+const channelData = ref<Channel[]>([])
+
+// 推送范围 + 用户类型 => 渠道
+const pickChannel = (e): void => {
+  channelDisabled.value = false
+  templateItem.channelType = undefined
+  const Data: Channel[] = [
+    { value: '1', label: '电话' },
+    { value: '2', label: '短信' },
+    { value: '3', label: '邮件' },
+    { value: '4', label: '钉钉' },
+    { value: '5', label: '企业微信' },
+    { value: '6', label: '飞书' }
+  ]
+  if (e.target.value === 1) {
+    channelData.value = [...Data]
+  } else if (e.target.value === 2) {
+    channelData.value = Data.filter(item => item.value !== '3')
+  } else if (e.target.value === 3) {
+    channelData.value = Data.filter(item => item.value === '3')
+  } else if (e.target.value === 4) {
+    channelData.value = Data.slice(3)
+  }
+}
+
+const channelDisabled = ref(true)
+
+const messageDisabled = ref(true)
+
+const appDisabled = ref(true)
+
+const messageData = ref<mess[]>([])
+
+const appData = ref<appItem[]>([])
+
+// 选择完渠道后，此时应该是已经拿到下面两项的选择项
+const selectValues = (channelType): void => {
+  templateItem.appId = undefined
+  templateItem.messageType = ''
+  messageData.value.length = 0
+  appData.value.length = 0
+  getMessageType({ channelType: Number(channelType) })
+    .then(res => {
+      res.data.forEach((item: mess) => {
+        messageData.value.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+  getApp({ channelType: Number(channelType) })
+    .then(res => {
+      res.data.forEach((item: any) => {
+        appData.value.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+}
+
+const selectApp = (): void => {
+  messageDisabled.value = false
+}
+
+// 提交并传递
+const emit = defineEmits(['add'])
+
+const handleOk = (): void => {
+  // 异步关闭，先添加，渲染成功后关闭
+  templateForm.value
+    .validate()
+    .then(() => {
+      // eslint-disable-next-line
+      templateItem.templateStatus = templateItem.templateStatus === true ? 1 : 0
+      // 处理templateItem的pushways
+      templateItem.pushWays = getPushWays(templateItem.channelType, templateItem.messageType)
+      emit('add')
+    })
+    .catch(error => {
+      console.log('error', error)
+    })
+}
+
+const handleCancel = (): void => {
+  templateForm.value.resetFields()
+  userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: true }))
+  templateItem.channelType = undefined
+  channelDisabled.value = true
+}
+
+watch(
+  () => templateItem.channelType,
+  newVal => {
+    // 防止不能及时重置到数据，直接清零
+    if (newVal === undefined) {
+      templateItem.appId = undefined
+      templateItem.messageType = ''
+      messageDisabled.value = true
+      appDisabled.value = true
+      if (templateItem.pushRange === undefined && templateItem.usersType === undefined) {
+        channelDisabled.value = true
+      }
+    } else {
+      appDisabled.value = false
+    }
+  }
+)
+
+defineExpose({
+  open,
+  templateItem,
+  iconLoading
+})
+</script>
+
+<template>
+  <a-button type="primary" class="addModule" @click="addModules">新增模板</a-button>
+  <a-modal v-model:open="open" title="新增模板" width="650px" :footer="null" @cancel="handleCancel">
+    <a-form
+      ref="templateForm"
+      :model="templateItem"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      class="temform"
+    >
+      <a-form-item ref="templateName" label="模板名" name="templateName" class="tem-item">
+        <a-input
+          v-model:value="templateItem.templateName"
+          placeholder="请填写长度在3到20个字符的模板名"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item label="推送范围" name="pushRange" class="tem-item">
+        <a-radio-group v-model:value="templateItem.pushRange" button-style="solid" @change="handlePushRangeChange">
+          <a-radio-button :value="0">不限</a-radio-button>
+          <a-radio-button :value="1">企业内部</a-radio-button>
+          <a-radio-button :value="2">企业外部</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="用户类型" name="usersType" class="tem-item">
+        <a-radio-group v-model:value="templateItem.usersType" button-style="solid" @change="pickChannel">
+          <a-radio-button v-for="u in userdisabled" :key="u.value" :disabled="u.disabled" :value="u.value">
+            {{ u.label }}
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="渠道选择" name="channelType" class="tem-item">
+        <a-select
+          v-model:value="templateItem.channelType"
+          :options="channelData.map(pro => ({ value: pro.value, label: pro.label }))"
+          style="width: 70%"
+          @change="selectValues"
+          :disabled="channelDisabled"
+        />
+      </a-form-item>
+      <a-form-item label="渠道 App" name="appId" class="tem-item">
+        <a-select v-model:value="templateItem.appId" style="width: 70%" :disabled="appDisabled" @change="selectApp">
+          <a-select-option v-for="item in appData" :key="item.appId" :value="item.appId">
+            {{ item.appName }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="消息类型" name="messageType" class="tem-item">
+        <a-select v-model:value="templateItem.messageType" style="width: 70%" :disabled="messageDisabled">
+          <a-select-option v-for="item in messageData" :key="item.code" :value="item.code">
+            {{ item.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="模板状态" name="templateStatus" class="tem-item">
+        <a-switch v-model:checked="templateItem.templateStatus" checked-children="启用" un-checked-children="禁用" />
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 14, offset: 4 }" class="tem-item">
+        <a-button type="primary" @click="handleOk" :loading="iconLoading">确认新建</a-button>
+        <a-button style="margin-left: 10px" @click="handleCancel">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style scoped>
+.addModule {
+  margin: 0px 20px;
+}
+
+.temform {
+  .tem-item {
+    margin-top: 20px;
+  }
+
+  .tem-item:nth-child(8) {
+    text-align: right;
+    margin-left: 300px;
+  }
+}
+</style>
diff --git a/deliver-front/vue/src/views/Channel/components/modifyTemplate.vue b/deliver-front/vue/src/views/Channel/components/modifyTemplate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..581cd0c4e609138d4a44ae860f21aa9b96bf6498
--- /dev/null
+++ b/deliver-front/vue/src/views/Channel/components/modifyTemplate.vue
@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form'
+import { ref, computed, watch, reactive } from 'vue'
+import type { updateTemp } from '../type'
+import { getPushWays } from '@/utils/date'
+
+// 新增操作
+interface DelayLoading {
+  delay: number
+}
+
+const modifyTemp: updateTemp = reactive({
+  templateId: 0,
+  templateName: '',
+  pushRange: undefined,
+  usersType: undefined,
+  pushWays: '',
+  templateStatus: 0,
+  appId: undefined,
+  channelType: undefined,
+  messageType: ''
+})
+
+const open = ref<boolean>(false)
+
+const labelCol = { span: 4 }
+
+const wrapperCol = { span: 20 }
+
+const iconLoading = ref<boolean | DelayLoading>(false)
+
+const rules: Record<string, Rule[]> = {
+  templateName: [
+    { required: true, message: '请输入模板名', trigger: 'change' },
+    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  pushRange: [{ required: true, message: '请选择推送范围', trigger: 'change' }],
+  usersType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
+  channelType: [
+    {
+      required: true,
+      message: '请选择渠道',
+      trigger: 'change'
+    }
+  ]
+}
+
+const templateForm = ref()
+
+const emit = defineEmits(['add'])
+
+const handleOk = (): void => {
+  // 异步关闭，先添加，渲染成功后关闭
+  templateForm.value
+    .validate()
+    .then(() => {
+      // 处理templateItem的pushways
+      modifyTemp.pushWays = getPushWays(modifyTemp.channelType, modifyTemp.messageType)
+      emit('add')
+    })
+    .catch(error => {
+      console.log('error', error)
+    })
+}
+
+const handleCancel = (): void => {
+  templateForm.value.resetFields()
+}
+
+const addModules = (): void => {
+  open.value = true
+}
+
+const channelData = [
+  { value: '1', label: '电话' },
+  { value: '2', label: '短信' },
+  { value: '3', label: '邮件' },
+  { value: '4', label: '钉钉' },
+  { value: '5', label: '企业微信' },
+  { value: '6', label: '飞书' }
+]
+
+const messageData = {
+  1: ['text 消息'],
+  2: ['text 消息'],
+  3: ['text 消息'],
+  4: [
+    'text 消息',
+    '钉钉图片消息',
+    '钉钉语音消息',
+    '钉钉文件消息',
+    '钉钉链接消息',
+    '钉钉 OA 消息',
+    '钉钉 markdown 消息',
+    '钉钉卡片消息'
+  ],
+  5: [
+    'text 消息',
+    '企业微信图片消息',
+    '企业微信语音消息',
+    '企业微信视频消息',
+    '企业微信文件消息',
+    '企业微信文本卡片消息',
+    '企业微信图文消息（mpnews）',
+    '企业微信 markdown 消息',
+    '企业微信小程序通知消息'
+  ],
+  6: [
+    '消息 text',
+    '富文本 post',
+    '图片 image',
+    '消息卡片 interactive',
+    '分享群名片 share_chat',
+    '分享个人名片 share_user',
+    '语音 audio',
+    '视频 media',
+    '文件 file',
+    '表情包 sticker'
+  ]
+}
+
+const appData = {
+  1: ['电话'],
+  2: ['短信'],
+  3: ['邮件'],
+  4: ['钉钉'],
+  5: ['企业微信'],
+  6: ['飞书']
+}
+
+const mesType = computed(() => {
+  if (modifyTemp.channelType !== undefined) {
+    const messageType = messageData[modifyTemp.channelType]
+    return messageType === undefined ? [] : messageType
+  } else {
+    return []
+  }
+})
+
+const appType = computed(() => {
+  if (modifyTemp.channelType !== undefined) {
+    const appTypeData = appData[modifyTemp.channelType]
+    return appTypeData === undefined ? [] : appTypeData
+  } else {
+    return []
+  }
+})
+
+watch(
+  () => modifyTemp.channelType,
+  newVal => {
+    if (newVal !== undefined) {
+      if (messageData[newVal] !== undefined) {
+        modifyTemp.messageType = messageData[newVal][0]
+      } else {
+        modifyTemp.messageType = ''
+        messageData[newVal] = []
+      }
+      if (appData[newVal] !== undefined) {
+        modifyTemp.appId = appData[newVal][0]
+      } else {
+        modifyTemp.appId = undefined
+        appData[newVal] = []
+      }
+    }
+  }
+)
+
+// defineExpose({
+//   open,
+//   modifyTemp,
+//   iconLoading
+// })
+</script>
+
+<template>
+  <a-button type="primary" class="addModule" @click="addModules">新增模板</a-button>
+  <a-modal v-model:open="open" title="新增模板" width="650px" :footer="null" @cancel="handleCancel">
+    <a-form
+      ref="templateForm"
+      :model="modifyTemp"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      class="temform"
+    >
+      <a-form-item ref="templateName" label="模板名" name="templateName" class="tem-item">
+        <a-input
+          v-model:value="modifyTemp.templateName"
+          placeholder="请填写长度在3到20个字符的模板名"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item label="推送范围" name="pushRange" class="tem-item">
+        <a-radio-group v-model:value="modifyTemp.pushRange" button-style="solid">
+          <a-radio-button :value="0">不限</a-radio-button>
+          <a-radio-button :value="1">企业内部</a-radio-button>
+          <a-radio-button :value="2">企业外部</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="用户类型" name="usersType" class="tem-item">
+        <a-radio-group v-model:value="modifyTemp.usersType" button-style="solid">
+          <a-radio-button :value="1">企业账号</a-radio-button>
+          <a-radio-button :value="2">电话</a-radio-button>
+          <a-radio-button :value="3">邮箱</a-radio-button>
+          <a-radio-button :value="4">平台 UserId</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="渠道选择" name="channelType" class="tem-item">
+        <a-select
+          v-model:value="modifyTemp.channelType"
+          :options="channelData.map(pro => ({ value: pro.value, label: pro.label }))"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item label="渠道 App" name="appId" class="tem-item">
+        <a-select
+          v-model:value="modifyTemp.appId"
+          :options="appType.map((pro: any) => ({ value: pro }))"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item label="消息类型" name="messageType" class="tem-item">
+        <a-select
+          v-model:value="modifyTemp.messageType"
+          :options="mesType.map((pro: any) => ({ value: pro }))"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 14, offset: 4 }" class="tem-item">
+        <a-button type="primary" @click="handleOk" :loading="iconLoading">确认新建</a-button>
+        <a-button style="margin-left: 10px" @click="handleCancel">重置</a-button>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<style scoped>
+.addModule {
+  margin: 0px 20px;
+}
+
+.temform {
+  .tem-item {
+    margin-top: 20px;
+  }
+
+  .tem-item:nth-child(7) {
+    text-align: right;
+    margin-left: 300px;
+  }
+}
+</style>
diff --git a/deliver-front/vue/src/views/Channel/components/searchForm.vue b/deliver-front/vue/src/views/Channel/components/searchForm.vue
index 930f38120623ddd1312d82b34d5d22a542fc41c6..e5f52cf29b6ffb839a5c13a9852d0a1baadf9caf 100644
--- a/deliver-front/vue/src/views/Channel/components/searchForm.vue
+++ b/deliver-front/vue/src/views/Channel/components/searchForm.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
-import type { appSearch } from '../type'
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
+import 'dayjs/locale/zh-cn'
+import type { searchMessage } from '../type'
 import type { FormInstance } from 'ant-design-vue'
+import type { Dayjs } from 'dayjs'
+
+interface DelayLoading {
+  delay: number
+}
 
 const expand = ref(false)
 
 const formRef = ref<FormInstance>()
 
-const searchForm = reactive<appSearch>({
-  appName: undefined,
-  channelType: undefined,
+const searchPage = reactive<searchMessage>({
+  templateName: undefined,
+  pushRange: undefined,
+  usersType: undefined,
   currentPage: 1,
   pageSize: 10,
   startTime: undefined,
@@ -18,33 +26,60 @@ const searchForm = reactive<appSearch>({
   perid: undefined
 })
 
-const onFinish = (): void => {
-  console.log('searchForm: ', searchForm)
+const selectedRange = ref<Array<Dayjs | null>>([null, null])
+
+const iconLoading = ref<boolean | DelayLoading>(false)
+
+const clearForm = (): void => {
+  selectedRange.value = [null, null]
+  formRef.value?.resetFields()
 }
 
-// 等接口出来在该
-const searchMessage = (): void => {
-  console.log('查询成功')
+const onRangeChange = (value: [Dayjs, Dayjs] | [string, string], dateString: [string, string]): void => {
+  if (Array.isArray(value)) {
+    searchPage.startTime = dateString[0] + ' 00:00:00'
+    searchPage.endTime = dateString[1] + ' 23:59:59'
+  }
+}
+
+// 新增自定义事件，当查询按钮被点击时，可以立即告知父组件
+const emit = defineEmits(['mes'])
+
+const searchMes = (): void => {
+  iconLoading.value = true
+  emit('mes')
 }
+
+defineExpose({
+  searchPage,
+  iconLoading
+})
 </script>
 
 <template>
-  <a-form ref="formRef" name="advanced_search" class="search" :model="searchForm" @finish="onFinish">
+  <a-form ref="formRef" name="advanced_search" class="search" :model="searchPage">
     <a-row :gutter="24">
       <a-col :span="8">
-        <a-form-item name="appName" label="APP 名">
-          <a-input v-model:value="searchForm.appName" placeholder="请输入 APP 名"></a-input>
+        <a-form-item name="templateName" label="模板名">
+          <a-input v-model:value="searchPage.templateName" placeholder="请输入模板名"></a-input>
         </a-form-item>
       </a-col>
       <a-col :span="8">
-        <a-form-item name="channelType" label="渠道类型">
-          <a-select v-model:value="searchForm.channelType" placeholder="请选择渠道类型">
-            <a-select-option value="1">电话</a-select-option>
-            <a-select-option value="2">短信</a-select-option>
-            <a-select-option value="3">邮件</a-select-option>
-            <a-select-option value="4">钉钉</a-select-option>
-            <a-select-option value="5">企微</a-select-option>
-            <a-select-option value="6">飞书</a-select-option>
+        <a-form-item name="pushRange" label="推送范围">
+          <a-select v-model:value="searchPage.pushRange" placeholder="请选择推送范围">
+            <a-select-option value="0">不限</a-select-option>
+            <a-select-option value="1">企业内部</a-select-option>
+            <a-select-option value="2">企业外部</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :span="8" v-if="expand">
+        <a-form-item name="usersType" label="用户类型">
+          <a-select v-model:value="searchPage.usersType" placeholder="请选择用户类型">
+            <a-select-option value="1">企业账号</a-select-option>
+            <a-select-option value="2">电话</a-select-option>
+            <a-select-option value="3">邮箱</a-select-option>
+            <a-select-option value="4">平台 UserId</a-select-option>
           </a-select>
         </a-form-item>
       </a-col>
@@ -52,7 +87,7 @@ const searchMessage = (): void => {
         <a-form-item name="perid" label="创建时间">
           <a-range-picker
             :locale="locale"
-            v-model:value="searchForm.perid"
+            v-model:value="searchPage.perid"
             @change="onRangeChange"
             format="YYYY-MM-DD"
             :placeholder="['起始日期', '结束日期']"
@@ -66,8 +101,8 @@ const searchMessage = (): void => {
           'margin-bottom': expand === true ? '24px' : '0'
         }"
       >
-        <a-button type="primary" html-type="submit" @click="searchMessage">查询</a-button>
-        <a-button style="margin: 0 8px" @click="() => (formRef as FormInstance).resetFields()">清空</a-button>
+        <a-button type="primary" html-type="submit" @click="searchMes" :loading="iconLoading">查询</a-button>
+        <a-button style="margin: 0 8px" @click="clearForm">清空</a-button>
         <a style="font-size: 14px" @click="expand = !expand">
           <template v-if="expand">
             <UpOutlined />
@@ -83,4 +118,10 @@ const searchMessage = (): void => {
   </a-form>
 </template>
 
-<style scoped></style>
+<style scoped>
+.search {
+  padding: 24px 24px 0 24px;
+  background: #ffffff;
+  border-radius: 6px;
+}
+</style>
diff --git a/deliver-front/vue/src/views/Channel/index.vue b/deliver-front/vue/src/views/Channel/index.vue
index ac574f123a9d567ba6bb4cb60579ce22485d2702..ee0f6e7c2fdf4ac91c30006b8d10e8ef988ad994 100644
--- a/deliver-front/vue/src/views/Channel/index.vue
+++ b/deliver-front/vue/src/views/Channel/index.vue
@@ -1,391 +1,531 @@
 <script lang="ts" setup>
-import { ReloadOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons-vue'
-import { ref, reactive, h, watch, computed, onMounted } from 'vue'
+import { ReloadOutlined, DownOutlined, UpOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { ref, reactive, h, onMounted, computed } from 'vue'
 import type { UnwrapRef } from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
-import type { Rule } from 'ant-design-vue/es/form'
-import type { messageTemplate } from './type'
+import { message, Modal } from 'ant-design-vue'
+import type { messageTemplate, searchMessage } from './type'
 import searchForm from './components/searchForm.vue'
-// import { message } from 'ant-design-vue'
+import addTemplate from './components/addTemplate.vue'
+import { addTemplatePages, deleteTemplate, getTemplatePages, updateStatus } from '@/api/message'
+import { getDate } from '@/utils/date'
+import { useStore } from '@/store'
 
-import Prism from 'prismjs' // 导入代码高亮插件的core（里面提供了其他官方插件及代码高亮样式主题，你只需要引入即可）
-import 'prismjs/themes/prism.css' // 引入代码高亮主题（这个去node_modules的安装prismjs中找到想使用的主题即可）
+/**
+ * 表格初始化
+ */
+const templateTable: UnwrapRef<messageTemplate[]> = reactive([])
+// 表格数据
+const columns: TableColumnsType = [
+  {
+    title: 'TemplateId',
+    dataIndex: 'templateId',
+    key: 'templateId'
+  },
+  {
+    title: '模板名',
+    dataIndex: 'templateName',
+    key: 'templateName'
+  },
+  {
+    title: '推送范围',
+    dataIndex: 'pushRange',
+    key: 'pushRange'
+  },
+  {
+    title: '用户类型',
+    dataIndex: 'usersType',
+    key: 'usersType'
+  },
+  {
+    title: '模板累计使用数',
+    dataIndex: 'useCount',
+    key: 'useCount'
+  },
+  {
+    title: '模板状态',
+    dataIndex: 'templateStatus',
+    key: 'templateStatus'
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 200
+  }
+]
+
+// const innerColumns = [
+//   {
+//     title: '渠道选择',
+//     dataIndex: 'channelType',
+//     key: 'channelType'
+//   },
+//   {
+//     title: '消息类型',
+//     dataIndex: 'messageType',
+//     key: 'messageType'
+//   },
+//   {
+//     title: '创建用户',
+//     dataIndex: 'createUser',
+//     key: 'createUser'
+//   },
+//   {
+//     title: '创建时间',
+//     dataIndex: 'createTime',
+//     key: 'createTime'
+//   },
+//   {
+//     title: '渠道 AppId',
+//     dataIndex: 'appId',
+//     key: 'appId'
+//   },
+//   {
+//     title: '渠道 APP 名',
+//     dataIndex: 'appName',
+//     key: 'appName'
+//   }
+// ]
 
-/// 表格部分
-// 新增
-const open = ref<boolean>(false)
-const addModules = (): void => {
-  open.value = true
+/**
+ * 渲染 data
+ */
+
+const innertemplatedata: UnwrapRef<messageTemplate[]> = reactive([])
+
+const expandedRowKeys: number[] = reactive([])
+
+const getInnerData = (expanded, record): void => {
+  // 判断是否点开
+  expandedRowKeys.length = 0
+  if (expanded === true) {
+    const b = record.key
+    expandedRowKeys.push(b)
+    innertemplatedata.length = 0
+    innertemplatedata.push(record)
+  } else {
+    expandedRowKeys.length = 0
+    innertemplatedata.length = 0
+  }
 }
 
-const labelCol = { span: 4 }
+const judgeInclude = (record): boolean => {
+  return innertemplatedata.includes(record)
+}
 
-const wrapperCol = { span: 20 }
+/**
+ * 相关操作: 增删改查
+ */
+interface SearchOptions {
+  page?: number
+  pageSize?: number
+  opt?: number // 操作标识符，识别操作，保证message消息提示不重复
+}
 
-const addTemplate: UnwrapRef<messageTemplate> = reactive({
-  templateName: '',
-  pushRange: '',
-  userType: '',
-  channel: '',
-  messageType: '',
-  channelApp: ''
-})
+const searchform = ref()
+const addtemplate = ref()
 
-const rules: Record<string, Rule[]> = {
-  templateName: [
-    { required: true, message: '请输入模板名', trigger: 'change' },
-    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
-  ],
-  pushRange: [{ required: true, message: '请选择推送范围', trigger: 'change' }],
-  userType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
-  messageType: [
-    {
-      required: true,
-      message: '请选择消息类型',
-      trigger: 'change'
-    }
-  ],
-  channel: [
-    {
-      required: true,
-      message: '请选择渠道',
-      trigger: 'change'
-    }
-  ],
-  channelApp: [{ required: true, message: '请选择渠道App', trigger: 'change' }]
+/// 新增操作
+const saveTemplate = (): void => {
+  const { channelType, messageType, ...rest } = addtemplate.value.templateItem
+  const savetemplate = { ...rest }
+  console.warn(savetemplate)
+  addTemplatePages(savetemplate)
+    .then(res => {
+      if (res.code === 200) {
+        void message.success('新增成功~ (*^▽^*)')
+        addtemplate.value.open = false
+        searchTemplate({ opt: 2 }) // 更新表单
+        addtemplate.value.iconLoading = false
+      }
+    })
+    .catch(err => {
+      addtemplate.value.open = false
+      addtemplate.value.iconLoading = false
+      void message.error('新增失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+    })
 }
 
-const templateForm = ref()
-const handleOk = (): void => {
-  templateForm.value
-    .validate()
-    .then(() => {
-      console.log('values', addTemplate)
-      open.value = false
+/// 删除操作
+type Key = string | number
+
+const store = useStore()
+
+const state = reactive<{
+  selectedRowKeys: Key[]
+  loading: boolean
+}>({
+  selectedRowKeys: [],
+  loading: false
+})
+
+const openDelete = ref(false)
+
+const hasSelected = computed(() => state.selectedRowKeys.length > 0)
+
+const startDelete = (): void => {
+  state.loading = true
+  const templates = {
+    ids: state.selectedRowKeys as number[]
+  }
+  deleteTemplate(templates)
+    .then(res => {
+      if (res.code === 200) {
+        void message.success('删除成功~ (*^▽^*)')
+        searchTemplate({ opt: 4 }) //
+      }
+      state.loading = false
     })
-    .catch(error => {
-      console.log('error', error)
+    .catch(err => {
+      void message.error('删除失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+      state.loading = false
     })
 }
-const handleCancel = (): void => {
-  templateForm.value.resetFields()
+
+const cancelSelect = (): void => {
+  state.selectedRowKeys.length = 0
 }
 
-const channelData = ['默认标签1', '默认标签2', '默认标签3']
+const onSelectChange = (selectedRowKeys: Key[]): void => {
+  console.log(selectedRowKeys)
+  state.selectedRowKeys = selectedRowKeys
+  if (state.selectedRowKeys.length !== 0) {
+    openDelete.value = true
+  }
+}
 
-const messageData = {
-  默认标签1: ['Online'],
-  默认标签2: ['Promotion'],
-  默认标签3: ['Offline']
+const onDelete = (id: number): void => {
+  const arr: number[] = []
+  arr.push(id)
+  const templates = {
+    ids: arr
+  }
+  deleteTemplate(templates)
+    .then(res => {
+      if (res.code === 200) {
+        void message.success('删除成功~ (*^▽^*)')
+        searchTemplate({ opt: 4 }) //
+      }
+      state.loading = false
+    })
+    .catch(err => {
+      void message.error('删除失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+      state.loading = false
+    })
 }
 
-const appData = {
-  默认标签1: ['IOS'],
-  默认标签2: ['安卓'],
-  默认标签3: ['MAC']
+const [modal, contextHolder] = Modal.useModal()
+
+const showDeleteConfirm = (): void => {
+  modal.confirm({
+    title: '确认删除吗?',
+    icon: h(ExclamationCircleOutlined),
+    content: '删除后不可恢复，请谨慎删除！',
+    okText: '确认',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      startDelete()
+    }
+  })
 }
 
-const mesType = computed(() => {
-  return messageData[addTemplate.channel] === undefined ? [] : messageData[addTemplate.channel]
-})
+/// 修改操作
+const changeStatus = (id: number, status: number | boolean): void => {
+  // eslint-disable-next-line
+  const sta = status === true ? 1 : 0
+  const obj = {
+    templateId: id,
+    templateStatus: sta
+  }
+  updateStatus(obj)
+    .then(res => {
+      if (res.code === 200) {
+        void message.success('修改成功~ (*^▽^*)')
+        searchTemplate({ opt: 3 }) // 更新表单
+      }
+    })
+    .catch(err => {
+      void message.error('查询失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+    })
+}
 
-const appType = computed(() => {
-  return appData[addTemplate.channel] === undefined ? [] : appData[addTemplate.channel]
+/// 查询操作
+const searchItem: searchMessage = reactive({
+  templateName: undefined,
+  pushRange: undefined,
+  usersType: undefined,
+  currentPage: 1,
+  pageSize: 10,
+  startTime: undefined,
+  endTime: undefined
 })
 
-watch(
-  () => addTemplate.channel,
-  newVal => {
-    if (messageData[newVal] !== undefined) {
-      addTemplate.messageType = messageData[newVal][0]
-    } else {
-      // 未定义或空数组的情况
-      addTemplate.messageType = ''
-      messageData[newVal] = []
-    }
-    if (appData[newVal] !== undefined) {
-      addTemplate.channelApp = appData[newVal][0]
-    } else {
-      // 处理未定义或空数组的情况
-      addTemplate.channelApp = ''
-      appData[newVal] = []
-    }
-  }
-)
+const total = ref()
 
-const columns: TableColumnsType = [
-  {
-    title: 'AppId',
-    dataIndex: 'appId',
-    key: 'appId'
-  },
-  {
-    title: 'App名称',
-    dataIndex: 'appName',
-    key: 'appName'
-  },
-  {
-    title: '渠道类型',
-    dataIndex: 'channelType',
-    key: 'channelType'
-  },
-  {
-    title: '使用次数',
-    dataIndex: 'useCount',
-    key: 'useCount'
-  },
-  {
-    title: 'app状态',
-    dataIndex: 'appStatus',
-    key: 'appStatus'
-  },
-  {
-    title: '操作',
-    key: 'operation',
-    fixed: 'right',
-    width: 180
-  }
-]
-// data到时候肯定是需要去接口获取到res然后渲染的
-const data = ref([
-  {
-    key: '1',
-    appId: '1',
-    appName: '飞书消息推送',
-    channelType: 'b',
-    useCount: 0,
-    appStatus: 1,
-    appConfig: 'xxx',
-    createUser: 1,
-    createTime: '2023/12/6'
-  },
-  {
-    key: '2',
-    appId: '1',
-    appName: '飞书消息推送',
-    channelType: 'b',
-    useCount: 0,
-    appStatus: 1,
-    appConfig: 'xxx',
-    createUser: 1,
-    createTime: '2023/12/6'
-  },
-  {
-    key: '3',
-    appId: '1',
-    appName: '飞书消息推送',
-    channelType: 'b',
-    useCount: 0,
-    appStatus: 1,
-    appConfig: 'xxx',
-    createUser: 1,
-    createTime: '2023/12/6'
-  },
-  {
-    key: '4',
-    appId: '1',
-    appName: '飞书消息推送',
-    channelType: 'b',
-    useCount: 0,
-    appStatus: 1,
-    appConfig: 'xxx',
-    createUser: 1,
-    createTime: '2023/12/6'
-  },
-  {
-    key: '',
-    appId: '1',
-    appName: '飞书消息推送',
-    channelType: 'b',
-    useCount: 0,
-    appStatus: 1,
-    appConfig: 'xxx',
-    createUser: 1,
-    createTime: '2023/12/6'
-  }
-])
 const current = ref()
-const pageSize = ref()
-const visible = ref(false)
-const pagination = computed(() => ({
-  total: 200,
-  current: current.value,
-  pageSize: pageSize.value
-}))
+
+const change = (page: number, pageSize: number): void => {
+  searchTemplate({ page, pageSize })
+}
+
+const locale = {
+  items_per_page: '条/页', // 每页显示条数的文字描述
+  jump_to: '跳至', // 跳转到某页的文字描述
+  page: '页', // 页的文字描述
+  prev_page: '上一页', // 上一页按钮文字描述
+  next_page: '下一页' // 下一页按钮文字描述
+}
+
+// 条件查询
+const searchTemplate = ({ page, pageSize, opt }: SearchOptions = {}): void => {
+  // 对象解构
+  const { perid, ...rest } = searchform.value.searchPage
+  const searchNeedMes = { ...rest }
+  console.warn(searchNeedMes)
+  searchNeedMes.currentPage = page
+  searchNeedMes.pageSize = pageSize
+  getTemplatePages(searchNeedMes)
+    .then(res => {
+      templateTable.length = 0
+      if (res.data.records.length > 0) {
+        total.value = res.data.total
+        res.data.records.forEach((item: any) => {
+          item.channelType = JSON.parse(item.pushWays).channelType
+          item.messageType = JSON.parse(item.pushWays).messageType
+          item.createTime = getDate(item.createTime)
+          // eslint-disable-next-line
+          item.templateStatus = item.templateStatus === 1 ? true : false
+          item.key = item.templateId
+          const i = item
+          templateTable.push(i)
+        })
+        if (opt === 1) {
+          void message.success('查询成功~ (*^▽^*)')
+        }
+      } else {
+        if (opt === 1) {
+          void message.success('未查询到任何数据   ≧ ﹏ ≦')
+        }
+      }
+      console.warn('查询数据', templateTable)
+      searchform.value.iconLoading = false
+    })
+    .catch(err => {
+      searchform.value.iconLoading = false
+      void message.error('查询失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+    })
+}
+
 onMounted(() => {
-  Prism.highlightAll()
+  getTemplatePages(searchItem)
+    .then(res => {
+      if (res.data.records.length > 0) {
+        total.value = res.data.total
+        res.data.records.forEach((item: any) => {
+          item.channelType = JSON.parse(item.pushWays).channelType
+          item.messageType = JSON.parse(item.pushWays).messageType
+          item.createTime = getDate(item.createTime)
+          // eslint-disable-next-line
+          item.templateStatus = item.templateStatus === 1 ? true : false
+          item.key = item.templateId
+          templateTable.push(item)
+        })
+        console.warn('初始化数据', templateTable)
+      }
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+})
+
+const a = computed(() => {
+  return store.getCollapse() ? 80 : 200 // 计算输入框应该有的高度
 })
 </script>
 
 <template>
   <!-- 搜索部分 -->
-  <searchForm />
+  <searchForm ref="searchform" @mes="searchTemplate({ opt: 1 })" />
   <!-- 表格部分 -->
-  <div id="message-container">
+  <div id="message-container" :style="{ height: hasSelected ? '100%' : 'auto' }">
     <div class="message-section">
       <div class="splitter">
         <a-tooltip title="刷新">
-          <a-button shape="circle" :icon="h(ReloadOutlined)" />
+          <a-button shape="circle" :icon="h(ReloadOutlined)" @click="searchTemplate({ opt: 1 })" />
         </a-tooltip>
-        <a-button type="primary" class="addModule" @click="addModules">新增模板</a-button>
-        <a-modal v-model:open="open" title="新增模板" width="650px" :footer="null" @cancel="handleCancel">
-          <a-form
-            ref="templateForm"
-            :model="addTemplate"
-            :rules="rules"
-            :label-col="labelCol"
-            :wrapper-col="wrapperCol"
-            class="temform"
-          >
-            <a-form-item ref="templateName" label="模板名" name="templateName" class="tem-item">
-              <a-input
-                v-model:value="addTemplate.templateName"
-                placeholder="请填写长度在3到20个字符的模板名"
-                style="width: 70%"
-              />
-            </a-form-item>
-            <a-form-item label="推送范围" name="pushRange" class="tem-item">
-              <a-radio-group v-model:value="addTemplate.pushRange" button-style="solid">
-                <a-radio-button value="杭州">杭州</a-radio-button>
-                <a-radio-button value="上海">上海</a-radio-button>
-                <a-radio-button value="北京">北京</a-radio-button>
-                <a-radio-button value="成都">成都</a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item label="用户类型" name="userType" class="tem-item">
-              <a-radio-group v-model:value="addTemplate.userType" button-style="solid">
-                <a-radio-button value="类型1">类型1</a-radio-button>
-                <a-radio-button value="类型2">类型2</a-radio-button>
-                <a-radio-button value="类型3">类型3</a-radio-button>
-                <a-radio-button value="类型4">类型4</a-radio-button>
-              </a-radio-group>
-            </a-form-item>
-            <a-form-item label="渠道选择" name="channel" class="tem-item">
-              <a-select
-                v-model:value="addTemplate.channel"
-                :options="channelData.map(pro => ({ value: pro }))"
-                style="width: 70%"
-              />
-            </a-form-item>
-            <a-form-item label="消息类型" name="messageType" class="tem-item">
-              <a-select
-                v-model:value="addTemplate.messageType"
-                :options="mesType.map((pro: any) => ({ value: pro }))"
-                style="width: 70%"
-              />
-            </a-form-item>
-            <a-form-item label="渠道App" name="channelApp" class="tem-item">
-              <a-select
-                v-model:value="addTemplate.channelApp"
-                :options="appType.map((pro: any) => ({ value: pro }))"
-                style="width: 70%"
-              />
-            </a-form-item>
-            <a-form-item :wrapper-col="{ span: 14, offset: 4 }" class="tem-item">
-              <a-button type="primary" @click="handleOk">确认新建</a-button>
-              <a-button style="margin-left: 10px" @click="handleCancel">重置</a-button>
-            </a-form-item>
-          </a-form>
-        </a-modal>
+        <addTemplate ref="addtemplate" @add="saveTemplate()" />
       </div>
-      <!-- 表格部分 -->
 
+      <div class="describe" v-if="hasSelected">
+        <template v-if="hasSelected">
+          <span class="count">
+            {{ `已选择 ${state.selectedRowKeys.length} 项` }}
+          </span>
+          <a-button type="link" class="cancel" @click="cancelSelect">取消选择</a-button>
+        </template>
+      </div>
+      <!-- 表格部分 -->
       <a-table
-        :pagination="pagination"
         :columns="columns"
-        :data-source="data"
-        :scroll="{ x: 1200, y: 300 }"
-        bordered
-        :expand-column-width="100"
+        :data-source="templateTable"
+        :scroll="{ x: 1200, y: undefined, scrollToFirstRowOnChange: true }"
+        class="components-table-demo-nested"
+        @expand="getInnerData"
+        :expandIconColumnIndex="-1"
+        :expandIconAsCell="false"
+        :pagination="false"
+        :expandedRowKeys="expandedRowKeys"
+        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
       >
-        <template #bodyCell="{ column }">
+        >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'templateStatus'">
+            <span>
+              <a-switch
+                v-model:checked="record.templateStatus"
+                checked-children="启用"
+                un-checked-children="禁用"
+                @change="changeStatus(record.templateId, record.templateStatus)"
+              />
+            </span>
+          </template>
           <template v-if="column.key === 'operation'">
-            <a-button type="primary" class="btn-manager">编辑</a-button>
-            <a-button type="primary" danger>删除</a-button>
+            <a-button
+              type="link"
+              size="small"
+              style="font-size: 14px"
+              @click="getInnerData(false, record)"
+              v-if="judgeInclude(record)"
+            >
+              <UpOutlined />
+              收起
+            </a-button>
+            <a-button
+              type="link"
+              size="small"
+              style="font-size: 14px"
+              @click="getInnerData(true, record)"
+              v-if="!judgeInclude(record)"
+              ><DownOutlined />展开</a-button
+            >
+            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px">编辑</a-button>
+            <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
+              <a-button type="link" danger size="small" style="font-size: 14px; margin-left: -5px">删除</a-button>
+            </a-popconfirm>
           </template>
         </template>
         <template #expandedRowRender="{ record }">
-          <a-descriptions>
-            <a-descriptions-item>
-              <pre class="language-json" style="width: 100%">
-              <code class="language-json" >
-                {
-                   "a":1,
-                   "b":2
-                }
-              </code>
-              </pre>
-            </a-descriptions-item>
-
-            <a-descriptions-item label="APP 配置">
-              <div style="display: flex; justify-content: center; align-items: center">
-                <span style="margin-right: 10px">{{ visible ? record.appConfig : '***' }}</span>
-                <EyeTwoTone v-if="visible" @click="visible = !visible"></EyeTwoTone>
-                <EyeInvisibleOutlined v-else @click="visible = !visible"></EyeInvisibleOutlined>
-              </div>
-            </a-descriptions-item>
-            <!-- <a-descriptions-item label="创建者">{{ record.createUser }}</a-descriptions-item>
-            <a-descriptions-item label="创建时间">{{ record.createTime }}</a-descriptions-item> -->
-          </a-descriptions>
-        </template>
-        <template #expandColumnTitle>
-          <span style="color: red">详情</span>
+          <a-row :gutter="[16, 16]">
+            <a-col :span="24"> APP 配置：<Code type="json" :code="record.appConfig"></Code> </a-col>
+            <a-col :span="6">创建者：{{ record.createUser }}</a-col>
+            <a-col :span="6">创建时间：{{ record.createTime }}</a-col>
+          </a-row>
         </template>
       </a-table>
+      <a-pagination
+        v-model:current="current"
+        class="pagination"
+        show-quick-jumper
+        :total="total"
+        @change="change"
+        showSizeChanger
+        :locale="locale"
+      />
     </div>
     <!-- 对表格的操作 -->
+    <div class="showDelete" :style="{ width: `calc(100% - ${a}px)` }" v-if="hasSelected">
+      <div class="box">{{ `已选择 ${state.selectedRowKeys.length} 项` }}</div>
+      <div class="del">
+        <a-button type="primary" style="font-size: 14px" :loading="state.loading" @click="showDeleteConfirm">
+          批量删除
+        </a-button>
+        <contextHolder />
+      </div>
+    </div>
   </div>
 </template>
-<style lang="scss">
+
+<style lang="scss" scoped>
 #message-container {
-  height: 100%;
   overflow: auto;
-  .search {
-    padding: 24px 24px 0 24px;
-    background: #ffffff;
-    border-radius: 6px;
+}
 
-    .search-item:nth-child(1) {
-      margin-left: 15px;
-    }
+.splitter {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  margin-bottom: 6px;
+}
 
-    .search-item:nth-child(2) {
-      margin-left: 30px;
-    }
+.message-section {
+  border-radius: 6px;
+  margin-top: 12px;
+  background: #ffffff;
+  padding: 12px;
+
+  .btn-manager {
+    margin-right: 10px;
   }
 
-  .splitter {
-    width: 100%;
-    height: 60px;
+  .pagination {
+    margin-top: 20px;
     display: flex;
-    align-items: center;
     justify-content: right;
-
-    .addModule {
-      margin: 0px 20px;
-    }
   }
 
-  .temform {
-    .tem-item {
-      margin-top: 20px;
+  .describe {
+    width: 100%;
+    background-color: rgb(248, 248, 248);
+    height: 40px;
+    margin-bottom: 20px;
+    line-height: 40px;
+    border-radius: 10px;
+    .count {
+      color: gray;
+      margin-left: 30px;
     }
-
-    .tem-item:nth-child(7) {
-      text-align: right;
-      margin-left: 300px;
+    .cancel {
+      position: absolute;
+      right: 50px;
+      padding-top: 7px;
     }
   }
+}
 
-  .message-section {
-    height: 100%;
-    border-radius: 6px;
-    margin-top: 12px;
-    background: #ffffff;
-    padding: 12px;
-
-    .btn-manager {
-      margin-right: 10px;
+#message-container {
+  position: relative;
+  width: 100%;
+  // height: 100%;
+  .showDelete {
+    position: fixed; /* 将showDelete盒子设置为固定定位 */
+    inset-inline-end: 0;
+    bottom: 0; /* 将showDelete盒子的底部与页面底部对齐 */
+    right: 0; /* 将showDelete盒子的左侧与页面左侧对齐 */
+    background-color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    height: 60px;
+    z-index: 999;
+    box-sizing: border-box; /* 确保padding不会撑开盒子 */
+    transition: 0.2s;
+    line-height: 40px;
+    .box {
+      width: 15%;
+      height: 100%;
+      margin-left: 2%;
+    }
+    .del {
+      margin-left: 75%;
     }
   }
 }
diff --git a/deliver-front/vue/src/views/Channel/type/index.ts b/deliver-front/vue/src/views/Channel/type/index.ts
index 71b0600bbf0334f0c0f653861b180884430307f5..04646f2d2f28c77ecd09f78e2a644d942b21709f 100644
--- a/deliver-front/vue/src/views/Channel/type/index.ts
+++ b/deliver-front/vue/src/views/Channel/type/index.ts
@@ -1,8 +1,73 @@
 import type { Dayjs } from 'dayjs'
-
-export interface appSearch {
-  appName: string
+export interface messageTemplate {
+  /**
+   * 模板id
+   */
+  templateId: number
+  /**
+   * 模板名
+   */
+  templateName: string
+  /**
+   * 推送范围
+   */
+  pushRange: number
+  /**
+   * 用户类型
+   */
+  usersType: number
+  /**
+   * 推送方式
+   */
+  pushWays?: string
+  /**
+   * 渠道选择
+   */
   channelType: number
+  /**
+   * 消息类型
+   */
+  messageType: string
+  /**
+   * 模板累计使用数
+   */
+  useCount: number
+  /**
+   * 模板状态
+   */
+  templateStatus: number | boolean
+  /**
+   * 创建用户
+   */
+  createUser: string
+  /**
+   * 创建时间
+   */
+  createTime: string
+  /**
+   * Appid
+   */
+  appId: number
+  /**
+   * App名称
+   */
+  appName: string
+}
+
+// 搜索框接口
+export interface searchMessage {
+  /**
+   * 模板名
+   */
+  templateName?: string
+  /**
+   * 推送范围
+   */
+  pushRange?: number
+  /**
+   * 用户类型
+   */
+  usersType?: number
   /**
    * 当前页面序号
    */
@@ -24,3 +89,79 @@ export interface appSearch {
    */
   perid?: [Dayjs, Dayjs]
 }
+
+// 新增接口
+export interface addTemp {
+  /**
+   * 模板名
+   */
+  templateName: string
+  /**
+   * 推送范围
+   */
+  pushRange: number | undefined
+  /**
+   * 用户类型
+   */
+  usersType: number | undefined
+  /**
+   * 用户类型
+   */
+  pushWays: string
+  /**
+   * 渠道选择
+   */
+  channelType?: string | undefined
+  /**
+   * 消息类型
+   */
+  messageType?: string
+  /**
+   * Appid
+   */
+  appId: number | undefined
+  /**
+   * 模板状态
+   */
+  templateStatus: number | boolean
+}
+
+// 修改接口
+export interface updateTemp {
+  /**
+   * 模板id
+   */
+  templateId: number
+  /**
+   * 模板名
+   */
+  templateName: string
+  /**
+   * 推送范围
+   */
+  pushRange: number | undefined
+  /**
+   * 用户类型
+   */
+  usersType: number | undefined
+  /**
+   * 用户类型
+   */
+  pushWays: string
+  /**
+   * 渠道选择
+   */
+  channelType?: string | undefined
+  /**
+   * 消息类型
+   */
+  messageType?: string
+  /**
+   * 模板状态
+   */
+  templateStatus: number | undefined
+  /**
+   * Appid
+   */
+  appId: number | undefined
+}
diff --git a/deliver-front/vue/src/views/Message/components/addTemplate.vue b/deliver-front/vue/src/views/Message/components/addTemplate.vue
index 6e83255f4f694dc5aab6b4fe4dec44db4484d64f..2480ef726ab237be5930215df0d32d093ca0c9fb 100644
--- a/deliver-front/vue/src/views/Message/components/addTemplate.vue
+++ b/deliver-front/vue/src/views/Message/components/addTemplate.vue
@@ -38,7 +38,7 @@ const templateItem: addTemp = reactive({
 
 const open = ref<boolean>(false)
 
-const labelCol = { span: 4 }
+const labelCol = { span: 5 }
 
 const wrapperCol = { span: 20 }
 
diff --git a/deliver-front/vue/src/views/Message/components/modifyTemplate.vue b/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
index 581cd0c4e609138d4a44ae860f21aa9b96bf6498..29a4517eb3dbd84d6ec8d4ff2cbf190268953422 100644
--- a/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
+++ b/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
@@ -1,16 +1,32 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form'
-import { ref, computed, watch, reactive } from 'vue'
-import type { updateTemp } from '../type'
+import { ref, reactive, watch } from 'vue'
+import type { addTemp } from '../type'
 import { getPushWays } from '@/utils/date'
+import { getApp, getMessageType } from '@/api/message'
 
 // 新增操作
 interface DelayLoading {
   delay: number
 }
 
-const modifyTemp: updateTemp = reactive({
-  templateId: 0,
+interface Channel {
+  value: string
+  label: string
+}
+
+interface mess {
+  code: string
+  name: string
+}
+
+interface appItem {
+  appId: number
+  appName: string
+}
+
+const updateTemp: addTemp = reactive({
+  templateId: undefined,
   templateName: '',
   pushRange: undefined,
   usersType: undefined,
@@ -21,14 +37,21 @@ const modifyTemp: updateTemp = reactive({
   messageType: ''
 })
 
-const open = ref<boolean>(false)
+const openModify = ref<boolean>(false)
 
-const labelCol = { span: 4 }
+const labelCol = { span: 5 }
 
 const wrapperCol = { span: 20 }
 
 const iconLoading = ref<boolean | DelayLoading>(false)
 
+const validatePass = async (_rule: Rule): Promise<any> => {
+  if (!appDisabled.value && appData.value.length === 0) {
+    throw new Error('请先进行渠道 App 配置')
+  }
+  await Promise.resolve()
+}
+
 const rules: Record<string, Rule[]> = {
   templateName: [
     { required: true, message: '请输入模板名', trigger: 'change' },
@@ -42,143 +65,160 @@ const rules: Record<string, Rule[]> = {
       message: '请选择渠道',
       trigger: 'change'
     }
-  ]
+  ],
+  appId: [
+    {
+      required: true,
+      validator: validatePass,
+      trigger: 'change'
+    }
+  ],
+  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
+  templateStatus: [{ required: true, message: '请选择模板状态', trigger: 'change' }]
 }
 
 const templateForm = ref()
 
-const emit = defineEmits(['add'])
+// 处理推送范围和用户类型之间的关系
+const userdisabled = ref([
+  { value: 1, label: '企业账号', disabled: false },
+  { value: 2, label: '电话', disabled: false },
+  { value: 3, label: '邮箱', disabled: false },
+  { value: 4, label: '平台 UserId', disabled: false }
+])
+
+const handlePushRangeChange = (e): void => {
+  if (e.target.value === 0 || e.target.value === 1) {
+    userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: false }))
+  } else if (e.target.value === 2) {
+    userdisabled.value = userdisabled.value.map(item => {
+      if (item.value === 2 || item.value === 3) {
+        return { ...item, disabled: false }
+      } else {
+        return { ...item, disabled: true }
+      }
+    })
+  }
+}
+
+const channelData = ref<Channel[]>([])
+
+// 推送范围 + 用户类型 => 渠道
+const pickChannel = (e): void => {
+  channelDisabled.value = false
+  updateTemp.channelType = undefined
+  const Data: Channel[] = [
+    { value: '1', label: '电话' },
+    { value: '2', label: '短信' },
+    { value: '3', label: '邮件' },
+    { value: '4', label: '钉钉' },
+    { value: '5', label: '企业微信' },
+    { value: '6', label: '飞书' }
+  ]
+  if (e.target.value === 1) {
+    channelData.value = [...Data]
+  } else if (e.target.value === 2) {
+    channelData.value = Data.filter(item => item.value !== '3')
+  } else if (e.target.value === 3) {
+    channelData.value = Data.filter(item => item.value === '3')
+  } else if (e.target.value === 4) {
+    channelData.value = Data.slice(3)
+  }
+}
+
+const channelDisabled = ref(false)
+
+const messageDisabled = ref(false)
+
+const appDisabled = ref(false)
+
+const messageData = ref<mess[]>([])
+
+const appData = ref<appItem[]>([])
+
+// 选择完渠道后，此时应该是已经拿到下面两项的选择项
+const selectValues = (channelType): void => {
+  updateTemp.appId = undefined
+  updateTemp.messageType = ''
+  messageData.value.length = 0
+  appData.value.length = 0
+  getMessageType({ channelType: Number(channelType) })
+    .then(res => {
+      res.data.forEach((item: mess) => {
+        messageData.value.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+  getApp({ channelType: Number(channelType) })
+    .then(res => {
+      res.data.forEach((item: any) => {
+        appData.value.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+}
+
+const selectApp = (): void => {
+  messageDisabled.value = false
+}
+
+// 提交并传递
+// const emit = defineEmits(['add'])
 
 const handleOk = (): void => {
   // 异步关闭，先添加，渲染成功后关闭
   templateForm.value
     .validate()
     .then(() => {
+      // eslint-disable-next-line
+      updateTemp.templateStatus = updateTemp.templateStatus === true ? 1 : 0
       // 处理templateItem的pushways
-      modifyTemp.pushWays = getPushWays(modifyTemp.channelType, modifyTemp.messageType)
-      emit('add')
+      updateTemp.pushWays = getPushWays(updateTemp.channelType, updateTemp.messageType)
+      // emit('add')
+      console.log(updateTemp)
     })
     .catch(error => {
       console.log('error', error)
     })
 }
 
-const handleCancel = (): void => {
-  templateForm.value.resetFields()
-}
-
-const addModules = (): void => {
-  open.value = true
-}
-
-const channelData = [
-  { value: '1', label: '电话' },
-  { value: '2', label: '短信' },
-  { value: '3', label: '邮件' },
-  { value: '4', label: '钉钉' },
-  { value: '5', label: '企业微信' },
-  { value: '6', label: '飞书' }
-]
-
-const messageData = {
-  1: ['text 消息'],
-  2: ['text 消息'],
-  3: ['text 消息'],
-  4: [
-    'text 消息',
-    '钉钉图片消息',
-    '钉钉语音消息',
-    '钉钉文件消息',
-    '钉钉链接消息',
-    '钉钉 OA 消息',
-    '钉钉 markdown 消息',
-    '钉钉卡片消息'
-  ],
-  5: [
-    'text 消息',
-    '企业微信图片消息',
-    '企业微信语音消息',
-    '企业微信视频消息',
-    '企业微信文件消息',
-    '企业微信文本卡片消息',
-    '企业微信图文消息（mpnews）',
-    '企业微信 markdown 消息',
-    '企业微信小程序通知消息'
-  ],
-  6: [
-    '消息 text',
-    '富文本 post',
-    '图片 image',
-    '消息卡片 interactive',
-    '分享群名片 share_chat',
-    '分享个人名片 share_user',
-    '语音 audio',
-    '视频 media',
-    '文件 file',
-    '表情包 sticker'
-  ]
-}
-
-const appData = {
-  1: ['电话'],
-  2: ['短信'],
-  3: ['邮件'],
-  4: ['钉钉'],
-  5: ['企业微信'],
-  6: ['飞书']
-}
-
-const mesType = computed(() => {
-  if (modifyTemp.channelType !== undefined) {
-    const messageType = messageData[modifyTemp.channelType]
-    return messageType === undefined ? [] : messageType
-  } else {
-    return []
-  }
-})
-
-const appType = computed(() => {
-  if (modifyTemp.channelType !== undefined) {
-    const appTypeData = appData[modifyTemp.channelType]
-    return appTypeData === undefined ? [] : appTypeData
-  } else {
-    return []
-  }
-})
+const handleCancel = (): void => {}
 
 watch(
-  () => modifyTemp.channelType,
+  () => updateTemp.channelType,
   newVal => {
-    if (newVal !== undefined) {
-      if (messageData[newVal] !== undefined) {
-        modifyTemp.messageType = messageData[newVal][0]
-      } else {
-        modifyTemp.messageType = ''
-        messageData[newVal] = []
-      }
-      if (appData[newVal] !== undefined) {
-        modifyTemp.appId = appData[newVal][0]
-      } else {
-        modifyTemp.appId = undefined
-        appData[newVal] = []
+    // 防止不能及时重置到数据，直接清零
+    if (newVal === undefined) {
+      updateTemp.appId = undefined
+      updateTemp.messageType = ''
+      messageDisabled.value = true
+      appDisabled.value = true
+      if (updateTemp.pushRange === undefined && updateTemp.usersType === undefined) {
+        channelDisabled.value = true
       }
+    } else {
+      appDisabled.value = false
     }
   }
 )
 
-// defineExpose({
-//   open,
-//   modifyTemp,
-//   iconLoading
-// })
+defineExpose({
+  openModify,
+  updateTemp,
+  messageData,
+  appData
+})
 </script>
 
 <template>
-  <a-button type="primary" class="addModule" @click="addModules">新增模板</a-button>
-  <a-modal v-model:open="open" title="新增模板" width="650px" :footer="null" @cancel="handleCancel">
+  <a-modal v-model:open="openModify" title="修改模板" width="650px" :footer="null" @cancel="handleCancel">
     <a-form
       ref="templateForm"
-      :model="modifyTemp"
+      :model="updateTemp"
       :rules="rules"
       :label-col="labelCol"
       :wrapper-col="wrapperCol"
@@ -186,49 +226,53 @@ watch(
     >
       <a-form-item ref="templateName" label="模板名" name="templateName" class="tem-item">
         <a-input
-          v-model:value="modifyTemp.templateName"
+          v-model:value="updateTemp.templateName"
           placeholder="请填写长度在3到20个字符的模板名"
           style="width: 70%"
         />
       </a-form-item>
       <a-form-item label="推送范围" name="pushRange" class="tem-item">
-        <a-radio-group v-model:value="modifyTemp.pushRange" button-style="solid">
+        <a-radio-group v-model:value="updateTemp.pushRange" button-style="solid" @change="handlePushRangeChange">
           <a-radio-button :value="0">不限</a-radio-button>
           <a-radio-button :value="1">企业内部</a-radio-button>
           <a-radio-button :value="2">企业外部</a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item label="用户类型" name="usersType" class="tem-item">
-        <a-radio-group v-model:value="modifyTemp.usersType" button-style="solid">
-          <a-radio-button :value="1">企业账号</a-radio-button>
-          <a-radio-button :value="2">电话</a-radio-button>
-          <a-radio-button :value="3">邮箱</a-radio-button>
-          <a-radio-button :value="4">平台 UserId</a-radio-button>
+        <a-radio-group v-model:value="updateTemp.usersType" button-style="solid" @change="pickChannel">
+          <a-radio-button v-for="u in userdisabled" :key="u.value" :disabled="u.disabled" :value="u.value">
+            {{ u.label }}
+          </a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item label="渠道选择" name="channelType" class="tem-item">
         <a-select
-          v-model:value="modifyTemp.channelType"
+          v-model:value="updateTemp.channelType"
           :options="channelData.map(pro => ({ value: pro.value, label: pro.label }))"
           style="width: 70%"
+          @change="selectValues"
+          :disabled="channelDisabled"
         />
       </a-form-item>
       <a-form-item label="渠道 App" name="appId" class="tem-item">
-        <a-select
-          v-model:value="modifyTemp.appId"
-          :options="appType.map((pro: any) => ({ value: pro }))"
-          style="width: 70%"
-        />
+        <a-select v-model:value="updateTemp.appId" style="width: 70%" :disabled="appDisabled" @change="selectApp">
+          <a-select-option v-for="item in appData" :key="item.appId" :value="item.appId">
+            {{ item.appName }}
+          </a-select-option>
+        </a-select>
       </a-form-item>
       <a-form-item label="消息类型" name="messageType" class="tem-item">
-        <a-select
-          v-model:value="modifyTemp.messageType"
-          :options="mesType.map((pro: any) => ({ value: pro }))"
-          style="width: 70%"
-        />
+        <a-select v-model:value="updateTemp.messageType" style="width: 70%" :disabled="messageDisabled">
+          <a-select-option v-for="item in messageData" :key="item.code" :value="item.code">
+            {{ item.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="模板状态" name="templateStatus" class="tem-item">
+        <a-switch v-model:checked="updateTemp.templateStatus" checked-children="启用" un-checked-children="禁用" />
       </a-form-item>
       <a-form-item :wrapper-col="{ span: 14, offset: 4 }" class="tem-item">
-        <a-button type="primary" @click="handleOk" :loading="iconLoading">确认新建</a-button>
+        <a-button type="primary" @click="handleOk" :loading="iconLoading">确认修改</a-button>
         <a-button style="margin-left: 10px" @click="handleCancel">重置</a-button>
       </a-form-item>
     </a-form>
@@ -236,8 +280,8 @@ watch(
 </template>
 
 <style scoped>
-.addModule {
-  margin: 0px 20px;
+.btn-manager {
+  margin-right: 10px;
 }
 
 .temform {
@@ -245,7 +289,7 @@ watch(
     margin-top: 20px;
   }
 
-  .tem-item:nth-child(7) {
+  .tem-item:nth-child(8) {
     text-align: right;
     margin-left: 300px;
   }
diff --git a/deliver-front/vue/src/views/Message/index.vue b/deliver-front/vue/src/views/Message/index.vue
index dc41ae408f5496f58f208a0f0e754bfee82c8762..5079cdd5fc0b813aba29ab7cfa267b28bf73c7de 100644
--- a/deliver-front/vue/src/views/Message/index.vue
+++ b/deliver-front/vue/src/views/Message/index.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-import { ReloadOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
+import { ReloadOutlined, DownOutlined, UpOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { ref, reactive, h, onMounted, computed } from 'vue'
 import type { UnwrapRef } from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
+import { message, Modal } from 'ant-design-vue'
 import type { messageTemplate, searchMessage } from './type'
 import searchForm from './components/searchForm.vue'
 import addTemplate from './components/addTemplate.vue'
-import { addTemplatePages, deleteTemplate, getTemplatePages, updateStatus } from '@/api/message'
-import { getDate } from '@/utils/date'
+import modifyTemplate from './components/modifyTemplate.vue'
+import { addTemplatePages, deleteTemplate, getApp, getMessageType, getTemplatePages, updateStatus } from '@/api/message'
+import { getAllMessage, getChannelType, getDate } from '@/utils/date'
 import { useStore } from '@/store'
 
 /**
@@ -100,8 +101,8 @@ const getInnerData = (expanded, record): void => {
   // 判断是否点开
   expandedRowKeys.length = 0
   if (expanded === true) {
-    const b = record.key.toString()
-    expandedRowKeys.push(Number(b.slice(-1)))
+    const b = record.key
+    expandedRowKeys.push(b)
     innertemplatedata.length = 0
     innertemplatedata.push(record)
   } else {
@@ -125,6 +126,7 @@ interface SearchOptions {
 
 const searchform = ref()
 const addtemplate = ref()
+const modifytemplate = ref()
 
 /// 新增操作
 const saveTemplate = (): void => {
@@ -179,7 +181,7 @@ const startDelete = (): void => {
       state.loading = false
     })
     .catch(err => {
-      void message.error('查询失败，请检查网络~ (＞︿＜)')
+      void message.error('删除失败，请检查网络~ (＞︿＜)')
       console.error('An error occurred:', err)
       state.loading = false
     })
@@ -198,7 +200,40 @@ const onSelectChange = (selectedRowKeys: Key[]): void => {
 }
 
 const onDelete = (id: number): void => {
-  console.log(id)
+  const arr: number[] = []
+  arr.push(id)
+  const templates = {
+    ids: arr
+  }
+  deleteTemplate(templates)
+    .then(res => {
+      if (res.code === 200) {
+        void message.success('删除成功~ (*^▽^*)')
+        searchTemplate({ opt: 4 }) //
+      }
+      state.loading = false
+    })
+    .catch(err => {
+      void message.error('删除失败，请检查网络~ (＞︿＜)')
+      console.error('An error occurred:', err)
+      state.loading = false
+    })
+}
+
+const [modal, contextHolder] = Modal.useModal()
+
+const showDeleteConfirm = (): void => {
+  modal.confirm({
+    title: '确认删除吗?',
+    icon: h(ExclamationCircleOutlined),
+    content: '删除后不可恢复，请谨慎删除！',
+    okText: '确认',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      startDelete()
+    }
+  })
 }
 
 /// 修改操作
@@ -222,6 +257,32 @@ const changeStatus = (id: number, status: number | boolean): void => {
     })
 }
 
+// 传递相关数据，初始化data
+const startModify = (record): void => {
+  modifytemplate.value.openModify = true
+  console.log(record)
+  getAllMessage(modifytemplate.value.updateTemp, record)
+  console.log(modifytemplate.value.updateTemp)
+  getMessageType({ channelType: getChannelType(record.channelType) })
+    .then(res => {
+      res.data.forEach(item => {
+        modifytemplate.value.messageData.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+  getApp({ channelType: getChannelType(record.channelType) })
+    .then(res => {
+      res.data.forEach(item => {
+        modifytemplate.value.appData.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+}
+
 /// 查询操作
 const searchItem: searchMessage = reactive({
   templateName: undefined,
@@ -268,7 +329,6 @@ const searchTemplate = ({ page, pageSize, opt }: SearchOptions = {}): void => {
           item.createTime = getDate(item.createTime)
           // eslint-disable-next-line
           item.templateStatus = item.templateStatus === 1 ? true : false
-          // item.key = index
           item.key = item.templateId
           const i = item
           templateTable.push(i)
@@ -302,7 +362,6 @@ onMounted(() => {
           item.createTime = getDate(item.createTime)
           // eslint-disable-next-line
           item.templateStatus = item.templateStatus === 1 ? true : false
-          // item.key = index
           item.key = item.templateId
           templateTable.push(item)
         })
@@ -315,7 +374,7 @@ onMounted(() => {
 })
 
 const a = computed(() => {
-  return store.$state.collapse ? 80 : 200 // 计算输入框应该有的高度
+  return store.getCollapse() ? 80 : 200 // 计算输入框应该有的高度
 })
 </script>
 
@@ -323,7 +382,7 @@ const a = computed(() => {
   <!-- 搜索部分 -->
   <searchForm ref="searchform" @mes="searchTemplate({ opt: 1 })" />
   <!-- 表格部分 -->
-  <div id="message-container" style="{ margin-bottom: 100px; }">
+  <div id="message-container" :style="{ height: hasSelected ? '100%' : 'auto' }">
     <div class="message-section">
       <div class="splitter">
         <a-tooltip title="刷新">
@@ -384,7 +443,10 @@ const a = computed(() => {
               v-if="!judgeInclude(record)"
               ><DownOutlined />展开</a-button
             >
-            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px">编辑</a-button>
+            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px" @click="startModify(record)">
+              编辑
+            </a-button>
+            <modifyTemplate ref="modifytemplate" :mod="record" />
             <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
               <a-button type="link" danger size="small" style="font-size: 14px; margin-left: -5px">删除</a-button>
             </a-popconfirm>
@@ -410,9 +472,10 @@ const a = computed(() => {
     <div class="showDelete" :style="{ width: `calc(100% - ${a}px)` }" v-if="hasSelected">
       <div class="box">{{ `已选择 ${state.selectedRowKeys.length} 项` }}</div>
       <div class="del">
-        <a-button type="primary" style="font-size: 14px" @click="startDelete" :loading="state.loading"
-          >批量删除</a-button
-        >
+        <a-button type="primary" style="font-size: 14px" :loading="state.loading" @click="showDeleteConfirm">
+          批量删除
+        </a-button>
+        <contextHolder />
       </div>
     </div>
   </div>
@@ -470,7 +533,7 @@ const a = computed(() => {
 #message-container {
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
   .showDelete {
     position: fixed; /* 将showDelete盒子设置为固定定位 */
     inset-inline-end: 0;
@@ -486,10 +549,12 @@ const a = computed(() => {
     transition: 0.2s;
     line-height: 40px;
     .box {
+      width: 15%;
+      height: 100%;
       margin-left: 2%;
     }
     .del {
-      margin-left: 78%;
+      margin-left: 75%;
     }
   }
 }
diff --git a/deliver-front/vue/src/views/Message/type/index.ts b/deliver-front/vue/src/views/Message/type/index.ts
index 04646f2d2f28c77ecd09f78e2a644d942b21709f..d264a1873189d0e6c9979d6e4887c89f9b468c3a 100644
--- a/deliver-front/vue/src/views/Message/type/index.ts
+++ b/deliver-front/vue/src/views/Message/type/index.ts
@@ -11,11 +11,11 @@ export interface messageTemplate {
   /**
    * 推送范围
    */
-  pushRange: number
+  pushRange: number | string
   /**
    * 用户类型
    */
-  usersType: number
+  usersType: number | string
   /**
    * 推送方式
    */
@@ -163,5 +163,5 @@ export interface updateTemp {
   /**
    * Appid
    */
-  appId: number | undefined
+  appId: number | undefined | string
 }
diff --git a/deliver-front/vue/vite.config.ts b/deliver-front/vue/vite.config.ts
index 6d05476fb52fa9fe5dff58300cf67788c61fedde..c44669da741ab49805d0e4a3e0a66a8cc1d11212 100644
--- a/deliver-front/vue/vite.config.ts
+++ b/deliver-front/vue/vite.config.ts
@@ -30,9 +30,9 @@ export default defineConfig({
       ]
     }),
     prismjsPlugin({
-      languages: ['json', 'js'], //  languages: 'all',
-      plugins: ['line-numbers'], // 配置显示行号插件
-      theme: 'solarizedlight', // 主题名称
+      languages: ['json', 'js'],
+      plugins: ['line-numbers', 'copy-to-clipboard'],
+      theme: 'solarizedlight',
       css: true
     })
   ],