diff --git a/deliver-front/vue/src/api/channel.ts b/deliver-front/vue/src/api/channel.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7092cf1040664257cfda3239d08c3c73441a3aa4
--- /dev/null
+++ b/deliver-front/vue/src/api/channel.ts
@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+import type { searchMessage, addTemp, updateTemp } from '@/views/Channel/type'
+export async function getAppInfo(data: searchMessage): Promise<any> {
+  return await request({
+    url: '/app/search',
+    method: 'post',
+    data
+  })
+}
+
+export async function addAppItem(data: addTemp): Promise<any> {
+  return await request({
+    url: '/app/save',
+    method: 'post',
+    data
+  })
+}
+
+export async function deleteAppInfo(data: { ids: number[] }): Promise<any> {
+  return await request({
+    url: '/app/deleteByIds',
+    method: 'post',
+    data
+  })
+}
+
+export async function updateAppStatus(data: { appId: number; appStatus: number }): Promise<any> {
+  return await request({
+    url: '/app/updateStatusById',
+    method: 'post',
+    data
+  })
+}
+
+export async function updateAppItem(data: updateTemp): Promise<any> {
+  return await request({
+    url: '/app/updateById',
+    method: 'post',
+    data
+  })
+}
diff --git a/deliver-front/vue/src/views/Channel/components/addTemplate.vue b/deliver-front/vue/src/views/Channel/components/addTemplate.vue
index 6e83255f4f694dc5aab6b4fe4dec44db4484d64f..c7157bc9dd7f595a9993925a533f7fa831bb50dc 100644
--- a/deliver-front/vue/src/views/Channel/components/addTemplate.vue
+++ b/deliver-front/vue/src/views/Channel/components/addTemplate.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form'
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive } from 'vue'
 import type { addTemp } from '../type'
-import { getPushWays } from '@/utils/date'
 import { getApp, getMessageType } from '@/api/message'
-
+import JsonEditorVue from 'json-editor-vue3'
 // 新增操作
 interface DelayLoading {
   delay: number
@@ -26,14 +25,10 @@ interface appItem {
 }
 
 const templateItem: addTemp = reactive({
-  templateName: '',
-  pushRange: undefined,
-  usersType: undefined,
-  pushWays: '',
-  templateStatus: 0,
-  appId: undefined,
+  appName: '',
   channelType: undefined,
-  messageType: ''
+  appStatus: 0,
+  appConfig: ''
 })
 
 const open = ref<boolean>(false)
@@ -44,20 +39,11 @@ 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: [
+  appName: [
     { 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,
@@ -65,75 +51,45 @@ const rules: Record<string, Rule[]> = {
       trigger: 'change'
     }
   ],
-  appId: [
-    {
-      required: true,
-      validator: validatePass,
-      trigger: 'blur'
-    }
-  ],
-  messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
-  templateStatus: [{ required: true, message: '请选择模板状态', trigger: 'change' }]
+  appConfig: [{ required: true, message: '请输入 APP 配置', trigger: 'change' }],
+  appStatus: [{ required: true, message: '请选择 APP 状态', trigger: 'change' }]
 }
 
 const templateForm = ref()
 
+const jsonstr = ref<string>('{}')
+
+const jsonobj = ref<object>(JSON.parse(jsonstr.value))
+
 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 options = ref({
+  search: false,
+  history: false
+})
 
-const channelData = ref<Channel[]>([])
+const modeList = ref(['text', 'view', 'tree', 'code', 'form']) // 可选模式
 
-// 推送范围 + 用户类型 => 渠道
-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 remarkValidate = (): void => {
+  const newjsonstr = JSON.stringify(jsonobj.value)
+  if (jsonstr.value === newjsonstr) {
+    console.log('no change')
+  } else {
+    jsonstr.value = newjsonstr
   }
 }
 
-const channelDisabled = ref(true)
-
-const messageDisabled = ref(true)
-
-const appDisabled = ref(true)
+const channelData = ref<Channel[]>([])
+channelData.value = [
+  { value: '1', label: '电话' },
+  { value: '2', label: '短信' },
+  { value: '3', label: '邮件' },
+  { value: '4', label: '钉钉' },
+  { value: '5', label: '企业微信' },
+  { value: '6', label: '飞书' }
+]
 
 const messageData = ref<mess[]>([])
 
@@ -141,8 +97,6 @@ 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) })
@@ -165,10 +119,6 @@ const selectValues = (channelType): void => {
     })
 }
 
-const selectApp = (): void => {
-  messageDisabled.value = false
-}
-
 // 提交并传递
 const emit = defineEmits(['add'])
 
@@ -178,10 +128,10 @@ const handleOk = (): void => {
     .validate()
     .then(() => {
       // eslint-disable-next-line
-      templateItem.templateStatus = templateItem.templateStatus === true ? 1 : 0
-      // 处理templateItem的pushways
-      templateItem.pushWays = getPushWays(templateItem.channelType, templateItem.messageType)
+      templateItem.appStatus = templateItem.appStatus === true ? 1 : 0
+      templateItem.appConfig = JSON.stringify(jsonobj.value)
       emit('add')
+      handleCancel()
     })
     .catch(error => {
       console.log('error', error)
@@ -190,29 +140,14 @@ const handleOk = (): void => {
 
 const handleCancel = (): void => {
   templateForm.value.resetFields()
-  userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: true }))
+  // userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: true }))
   templateItem.channelType = undefined
-  channelDisabled.value = true
+  templateItem.appName = ''
+  templateItem.appStatus = 1
+  templateItem.appConfig = ''
+  // 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,
@@ -221,8 +156,8 @@ defineExpose({
 </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-button type="primary" class="addModule" @click="addModules">新增 APP</a-button>
+  <a-modal v-model:open="open" title="新增 APP" width="650px" :footer="null" @cancel="handleCancel">
     <a-form
       ref="templateForm"
       :model="templateItem"
@@ -231,56 +166,39 @@ defineExpose({
       :wrapper-col="wrapperCol"
       class="temform"
     >
-      <a-form-item ref="templateName" label="模板名" name="templateName" class="tem-item">
+      <a-form-item ref="templateName" label="APP 名称" name="appName" class="tem-item">
         <a-input
-          v-model:value="templateItem.templateName"
+          v-model:value="templateItem.appName"
           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 label="APP 配置" name="appConfig" class="tem-item">
+        <json-editor-vue
+          class="editor"
+          v-model="jsonobj"
+          @blur="remarkValidate"
+          currentMode="text"
+          :modeList="modeList"
+          :options="options"
+        />
       </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 label="APP 状态" name="appStatus" class="tem-item">
+        <a-switch v-model:checked="templateItem.appStatus" 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 :wrapper-col="{ span: 25, offset: 4 }" class="tem-item">
+        <div class="between">
+          <a-button @click="handleCancel">重置</a-button>
+          <a-button type="primary" @click="handleOk" :loading="iconLoading">确认新建</a-button>
+        </div>
       </a-form-item>
     </a-form>
   </a-modal>
@@ -301,4 +219,10 @@ defineExpose({
     margin-left: 300px;
   }
 }
+.between {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/deliver-front/vue/src/views/Channel/components/searchForm.vue b/deliver-front/vue/src/views/Channel/components/searchForm.vue
index e5f52cf29b6ffb839a5c13a9852d0a1baadf9caf..f749fb24a8815ee1c11cb85994b2b621750f1f7f 100644
--- a/deliver-front/vue/src/views/Channel/components/searchForm.vue
+++ b/deliver-front/vue/src/views/Channel/components/searchForm.vue
@@ -16,9 +16,8 @@ const expand = ref(false)
 const formRef = ref<FormInstance>()
 
 const searchPage = reactive<searchMessage>({
-  templateName: undefined,
-  pushRange: undefined,
-  usersType: undefined,
+  appName: undefined,
+  channelType: undefined,
   currentPage: 1,
   pageSize: 10,
   startTime: undefined,
@@ -31,7 +30,11 @@ const selectedRange = ref<Array<Dayjs | null>>([null, null])
 const iconLoading = ref<boolean | DelayLoading>(false)
 
 const clearForm = (): void => {
+  searchPage.appName = undefined
+  searchPage.channelType = undefined
   selectedRange.value = [null, null]
+  searchPage.startTime = ''
+  searchPage.endTime = ''
   formRef.value?.resetFields()
 }
 
@@ -60,26 +63,19 @@ defineExpose({
   <a-form ref="formRef" name="advanced_search" class="search" :model="searchPage">
     <a-row :gutter="24">
       <a-col :span="8">
-        <a-form-item name="templateName" label="模板名">
-          <a-input v-model:value="searchPage.templateName" placeholder="请输入模板名"></a-input>
+        <a-form-item name="templateName" label="APP 名称">
+          <a-input v-model:value="searchPage.appName" placeholder="请输入 APP 名称"></a-input>
         </a-form-item>
       </a-col>
       <a-col :span="8">
-        <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-form-item name="pushRange" label="渠道选择">
+          <a-select v-model:value="searchPage.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-select>
         </a-form-item>
       </a-col>
diff --git a/deliver-front/vue/src/views/Channel/index.vue b/deliver-front/vue/src/views/Channel/index.vue
index ee0f6e7c2fdf4ac91c30006b8d10e8ef988ad994..83a8495c17cfaffa863593474135507dce89b05c 100644
--- a/deliver-front/vue/src/views/Channel/index.vue
+++ b/deliver-front/vue/src/views/Channel/index.vue
@@ -4,48 +4,79 @@ import { ref, reactive, h, onMounted, computed } from 'vue'
 import type { UnwrapRef } from 'vue'
 import type { TableColumnsType } from 'ant-design-vue'
 import { message, Modal } from 'ant-design-vue'
-import type { messageTemplate, searchMessage } from './type'
+import type { appTemplate, searchMessage, updateTemp } 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 { useStore } from '@/store'
-
+import { addAppItem, getAppInfo, deleteAppInfo, updateAppStatus, updateAppItem } from '@/api/channel'
+import JsonEditorVue from 'json-editor-vue3'
+import type { Rule } from 'ant-design-vue/es/form'
 /**
  * 表格初始化
  */
-const templateTable: UnwrapRef<messageTemplate[]> = reactive([])
+const templateTable: UnwrapRef<appTemplate[]> = reactive([])
+
+const open = ref<boolean>(false)
+
+const labelCol = { span: 4 }
+
+const wrapperCol = { span: 20 }
+
+const updateDate = ref<updateTemp>({})
+
+const jsonstr = ref<string>('')
+
+const jsonobj = ref<object>({})
+
+const update = (appData): void => {
+  open.value = true
+  jsonstr.value = appData.appConfig ?? '{}'
+  jsonobj.value = JSON.parse(jsonstr.value)
+  updateDate.value = JSON.parse(JSON.stringify(appData))
+}
+
+interface Channel {
+  value: number
+  label: string
+}
+
+const channelData = ref<Channel[]>([])
+channelData.value = [
+  { value: 1, label: '电话' },
+  { value: 2, label: '短信' },
+  { value: 3, label: '邮件' },
+  { value: 4, label: '钉钉' },
+  { value: 5, label: '企业微信' },
+  { value: 6, label: '飞书' }
+]
+
 // 表格数据
 const columns: TableColumnsType = [
   {
-    title: 'TemplateId',
-    dataIndex: 'templateId',
-    key: 'templateId'
-  },
-  {
-    title: '模板名',
-    dataIndex: 'templateName',
-    key: 'templateName'
+    title: 'AppId',
+    dataIndex: 'appId',
+    key: 'appId'
   },
   {
-    title: '推送范围',
-    dataIndex: 'pushRange',
-    key: 'pushRange'
+    title: 'APP 名称',
+    dataIndex: 'appName',
+    key: 'appName'
   },
   {
-    title: '用户类型',
-    dataIndex: 'usersType',
-    key: 'usersType'
+    title: '渠道类型',
+    dataIndex: 'channelType',
+    key: 'channelType'
   },
   {
-    title: '模板累计使用数',
+    title: '累计使用次数',
     dataIndex: 'useCount',
     key: 'useCount'
   },
   {
-    title: '模板状态',
-    dataIndex: 'templateStatus',
-    key: 'templateStatus'
+    title: 'APP 状态',
+    dataIndex: 'appStatus',
+    key: 'appStatus'
   },
   {
     title: '操作',
@@ -54,45 +85,13 @@ const columns: TableColumnsType = [
     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 channelValue = ['', '电话', '短信', '邮件', '钉钉', '企业微信', '飞书']
 
 /**
  * 渲染 data
  */
 
-const innertemplatedata: UnwrapRef<messageTemplate[]> = reactive([])
+const innertemplatedata: UnwrapRef<appTemplate[]> = reactive([])
 
 const expandedRowKeys: number[] = reactive([])
 
@@ -127,11 +126,10 @@ const searchform = ref()
 const addtemplate = ref()
 
 /// 新增操作
-const saveTemplate = (): void => {
-  const { channelType, messageType, ...rest } = addtemplate.value.templateItem
-  const savetemplate = { ...rest }
-  console.warn(savetemplate)
-  addTemplatePages(savetemplate)
+const saveApp = (): void => {
+  const saveApp = addtemplate.value.templateItem
+  console.warn(saveApp)
+  addAppItem(saveApp)
     .then(res => {
       if (res.code === 200) {
         void message.success('新增成功~ (*^▽^*)')
@@ -170,7 +168,7 @@ const startDelete = (): void => {
   const templates = {
     ids: state.selectedRowKeys as number[]
   }
-  deleteTemplate(templates)
+  deleteAppInfo(templates)
     .then(res => {
       if (res.code === 200) {
         void message.success('删除成功~ (*^▽^*)')
@@ -183,6 +181,7 @@ const startDelete = (): void => {
       console.error('An error occurred:', err)
       state.loading = false
     })
+  state.selectedRowKeys.length = 0
 }
 
 const cancelSelect = (): void => {
@@ -203,7 +202,7 @@ const onDelete = (id: number): void => {
   const templates = {
     ids: arr
   }
-  deleteTemplate(templates)
+  deleteAppInfo(templates)
     .then(res => {
       if (res.code === 200) {
         void message.success('删除成功~ (*^▽^*)')
@@ -239,10 +238,10 @@ const changeStatus = (id: number, status: number | boolean): void => {
   // eslint-disable-next-line
   const sta = status === true ? 1 : 0
   const obj = {
-    templateId: id,
-    templateStatus: sta
+    appId: id,
+    appStatus: sta
   }
-  updateStatus(obj)
+  updateAppStatus(obj)
     .then(res => {
       if (res.code === 200) {
         void message.success('修改成功~ (*^▽^*)')
@@ -250,16 +249,15 @@ const changeStatus = (id: number, status: number | boolean): void => {
       }
     })
     .catch(err => {
-      void message.error('查询失败，请检查网络~ (＞︿＜)')
+      void message.error('修改失败，请检查网络~ (＞︿＜)')
       console.error('An error occurred:', err)
     })
 }
 
 /// 查询操作
 const searchItem: searchMessage = reactive({
-  templateName: undefined,
-  pushRange: undefined,
-  usersType: undefined,
+  appName: undefined,
+  channelType: undefined,
   currentPage: 1,
   pageSize: 10,
   startTime: undefined,
@@ -290,18 +288,16 @@ const searchTemplate = ({ page, pageSize, opt }: SearchOptions = {}): void => {
   console.warn(searchNeedMes)
   searchNeedMes.currentPage = page
   searchNeedMes.pageSize = pageSize
-  getTemplatePages(searchNeedMes)
+  getAppInfo(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
+          item.appStatus = item.appStatus === 1 ? true : false
+          item.key = item.appId
           const i = item
           templateTable.push(i)
         })
@@ -323,18 +319,91 @@ const searchTemplate = ({ page, pageSize, opt }: SearchOptions = {}): void => {
     })
 }
 
+const handleCancel = (): void => {
+  // userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: true }))
+  updateDate.value.channelType = undefined
+  updateDate.value.appName = ''
+  updateDate.value.appStatus = 1
+  updateDate.value.appConfig = ''
+  open.value = false
+}
+
+const templateForm = ref()
+
+interface DelayLoading {
+  delay: number
+}
+
+const iconLoading = ref<boolean | DelayLoading>(false)
+
+const handleOk = (): void => {
+  // 异步关闭，先添加，渲染成功后关闭
+  templateForm.value
+    .validate()
+    .then(() => {
+      // eslint-disable-next-line
+      updateDate.value.appStatus = updateDate.value.appStatus === true ? 1 : 0
+      updateDate.value.appConfig = JSON.stringify(jsonobj.value)
+      updateAppItem(updateDate.value)
+        .then(res => {
+          if (res.code === 200) {
+            void message.success('修改成功~ (*^▽^*)')
+            searchTemplate({ opt: 3 }) // 更新表单
+          }
+        })
+        .catch(err => {
+          void message.error('修改失败，请检查网络~ (＞︿＜)')
+          console.error('An error occurred:', err)
+        })
+      handleCancel()
+    })
+    .catch(error => {
+      console.log('error', error)
+    })
+}
+
+const rules: Record<string, Rule[]> = {
+  appName: [
+    { required: true, message: '请输入模板名', trigger: 'change' },
+    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+  ],
+  channelType: [
+    {
+      required: true,
+      message: '请选择渠道',
+      trigger: 'change'
+    }
+  ],
+  appConfig: [{ required: true, message: '请输入 APP 配置', trigger: 'change' }],
+  appStatus: [{ required: true, message: '请选择 APP 状态', trigger: 'change' }]
+}
+
+const options = ref({
+  search: false,
+  history: false
+})
+const modeList = ref(['text', 'view', 'tree', 'code', 'form']) // 可选模式
+
+const remarkValidate = (): void => {
+  const newjsonstr = JSON.stringify(jsonobj.value)
+  console.log('remarkValidate', jsonobj.value, newjsonstr, updateDate.value.appConfig)
+  if (jsonstr.value === newjsonstr) {
+    console.log('no change')
+  } else {
+    jsonstr.value = newjsonstr
+  }
+}
+
 onMounted(() => {
-  getTemplatePages(searchItem)
+  getAppInfo(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
+          item.appStatus = item.appStatus === 1 ? true : false
+          item.key = item.appId
           templateTable.push(item)
         })
         console.warn('初始化数据', templateTable)
@@ -360,7 +429,7 @@ const a = computed(() => {
         <a-tooltip title="刷新">
           <a-button shape="circle" :icon="h(ReloadOutlined)" @click="searchTemplate({ opt: 1 })" />
         </a-tooltip>
-        <addTemplate ref="addtemplate" @add="saveTemplate()" />
+        <addTemplate ref="addtemplate" @add="saveApp()" />
       </div>
 
       <div class="describe" v-if="hasSelected">
@@ -385,14 +454,20 @@ const a = computed(() => {
         :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
       >
         >
+
         <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'templateStatus'">
+          <template v-if="column.key === 'channelType'">
+            <span>
+              {{ channelValue[record.channelType] }}
+            </span>
+          </template>
+          <template v-if="column.key === 'appStatus'">
             <span>
               <a-switch
-                v-model:checked="record.templateStatus"
+                v-model:checked="record.appStatus"
                 checked-children="启用"
                 un-checked-children="禁用"
-                @change="changeStatus(record.templateId, record.templateStatus)"
+                @change="changeStatus(record.appId, record.appStatus)"
               />
             </span>
           </template>
@@ -415,8 +490,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-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
+            <a-button type="link" class="btn-manager" size="small" style="font-size: 14px" @click="update(record)"
+              >编辑</a-button
+            >
+            <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.appId)" ok-text="确定" cancel-text="取消">
               <a-button type="link" danger size="small" style="font-size: 14px; margin-left: -5px">删除</a-button>
             </a-popconfirm>
           </template>
@@ -450,6 +527,47 @@ const a = computed(() => {
       </div>
     </div>
   </div>
+  <a-modal v-model:open="open" title="修改 APP 选项" width="650px" :footer="null" @cancel="handleCancel">
+    <a-form
+      ref="templateForm"
+      :model="updateDate"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+      class="temform"
+      :rules="rules"
+    >
+      <a-form-item ref="appName" label="APP 名称" name="appName" class="tem-item">
+        <a-input v-model:value="updateDate.appName" placeholder="请填写长度在3到20个字符的模板名" style="width: 70%" />
+      </a-form-item>
+
+      <a-form-item label="渠道选择" name="channelType" class="tem-item">
+        <a-select
+          v-model:value="updateDate.channelType"
+          :options="channelData.map(pro => ({ value: pro.value, label: pro.label }))"
+          style="width: 70%"
+        />
+      </a-form-item>
+      <a-form-item label="APP 配置" name="appConfig" class="tem-item">
+        <json-editor-vue
+          class="editor"
+          v-model="jsonobj"
+          @blur="remarkValidate"
+          currentMode="text"
+          :modeList="modeList"
+          :options="options"
+        />
+      </a-form-item>
+      <a-form-item label="APP 状态" name="appStatus" class="tem-item">
+        <a-switch v-model:checked="updateDate.appStatus" checked-children="启用" un-checked-children="禁用" />
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 20, offset: 4 }" class="tem-item">
+        <div class="between">
+          <a-button @click="handleCancel">取消修改</a-button>
+          <a-button type="primary" @click="handleOk" :loading="iconLoading">确认修改</a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
 </template>
 
 <style lang="scss" scoped>
@@ -529,4 +647,10 @@ const a = computed(() => {
     }
   }
 }
+.between {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/deliver-front/vue/src/views/Channel/type/index.ts b/deliver-front/vue/src/views/Channel/type/index.ts
index 51f2ebe5cfed9843b9536669216c7f5845ffad02..c758c5686508d8240eb5a09dbd687f21b2ff129b 100644
--- a/deliver-front/vue/src/views/Channel/type/index.ts
+++ b/deliver-front/vue/src/views/Channel/type/index.ts
@@ -1,41 +1,29 @@
 import type { Dayjs } from 'dayjs'
-export interface messageTemplate {
+export interface appTemplate {
   /**
-   * 模板id
-   */
-  templateId: number
-  /**
-   * 模板名
-   */
-  templateName: string
-  /**
-   * 推送范围
-   */
-  pushRange: number
-  /**
-   * 用户类型
+   * Appid
    */
-  usersType: number
+  appId: number
   /**
-   * 推送方式
+   * app名称
    */
-  pushWays?: string
+  appName: string
   /**
-   * 渠道选择
+   * 渠道类型
    */
   channelType: number
   /**
-   * 消息类型
+   * app配置
    */
-  messageType: string
+  appconfig: string
   /**
-   * 模板累计使用数
+   * app使用次数
    */
-  useCount: number
+  userCount: number
   /**
-   * 模板状态
+   * app状态
    */
-  templateStatus: number | boolean
+  appStatus: number
   /**
    * 创建用户
    */
@@ -44,14 +32,6 @@ export interface messageTemplate {
    * 创建时间
    */
   createTime: string
-  /**
-   * Appid
-   */
-  appId: number
-  /**
-   * App名称
-   */
-  appName: string
 }
 
 // 搜索框接口
@@ -59,15 +39,11 @@ export interface searchMessage {
   /**
    * 模板名
    */
-  templateName?: string
+  appName?: string
   /**
    * 推送范围
    */
-  pushRange?: number
-  /**
-   * 用户类型
-   */
-  usersType?: number
+  channelType?: number
   /**
    * 当前页面序号
    */
@@ -93,75 +69,43 @@ export interface searchMessage {
 // 新增接口
 export interface addTemp {
   /**
-   * 模板名
+   * app名称
    */
-  templateName: string
-  /**
-   * 推送范围
-   */
-  pushRange: number | undefined
-  /**
-   * 用户类型
-   */
-  usersType: number | undefined
-  /**
-   * 用户类型
-   */
-  pushWays: string
+  appName: string
   /**
-   * 渠道选择
+   * 渠道类型
    */
-  channelType?: string | undefined
+  channelType: number | undefined
   /**
-   * 消息类型
+   * App配置
    */
-  messageType?: string
+  appConfig: string
   /**
-   * Appid
+   * App状态
    */
-  appId: number | undefined
-  /**
-   * 模板状态
-   */
-  templateStatus: number | boolean
+  appStatus: number|boolean
 }
 
 // 修改接口
-export interface modiTemp {
+export interface updateTemp {
   /**
-   * 模板id
+   * appId
    */
-  templateId: number
+  appId?: number
   /**
-   * 模板名
+   * app名称
    */
-  templateName: string
+  appName?: string
   /**
-   * 推送范围
-   */
-  pushRange: number | undefined
-  /**
-   * 用户类型
-   */
-  usersType: number | undefined
-  /**
-   * 用户类型
+   * 渠道类型
    */
-  pushWays: string
+  channelType?: number | undefined
   /**
-   * 渠道选择
+   * App配置
    */
-  channelType?: string | undefined
+  appConfig?: string
   /**
-   * 消息类型
-   */
-  messageType?: string
-  /**
-   * 模板状态
-   */
-  templateStatus: number | undefined
-  /**
-   * Appid
+   * App状态
    */
-  appId: number | undefined
+  appStatus?: number|boolean
 }
diff --git a/deliver-front/vue/src/views/Message/components/sendTest.vue b/deliver-front/vue/src/views/Message/components/sendTest.vue
index 665e11e67582a06d89b7fc2dea5f5146f7602b2a..e183c1f6207e51f9903f38c1812b42763637e371 100644
--- a/deliver-front/vue/src/views/Message/components/sendTest.vue
+++ b/deliver-front/vue/src/views/Message/components/sendTest.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref, defineProps } from 'vue'
+import { reactive, ref } from 'vue'
 import { message, type DrawerProps, type FormInstance } from 'ant-design-vue'
 import type { sendMessageTest } from '../type'
 import type { Rule } from 'ant-design-vue/es/form'
@@ -7,7 +7,7 @@ import JsonEditorVue from 'json-editor-vue3'
 import { sendTestMes } from '@/api/message'
 
 const props = defineProps({
-  test: String
+  test: Number
 })
 
 const placement = ref<DrawerProps['placement']>('right')
@@ -81,6 +81,10 @@ const changeAddUser = (): void => {
   addUserFlag.value = false
 }
 
+const timeOut = ref<number>(3)
+
+const showTime = ref<boolean>(false)
+
 const searchMes = (): void => {
   sendtest.value
     ?.validate()
@@ -94,7 +98,15 @@ const searchMes = (): void => {
           } else {
             void message.error('发送失败，请检查网络~ (＞︿＜)')
           }
-          iconLoading.value = false
+          showTime.value = true
+          const setIntervals = setInterval(() => {
+            timeOut.value = timeOut.value - 1
+            if (timeOut.value === 0) {
+              iconLoading.value = false
+              showTime.value = false
+              clearInterval(setIntervals)
+            }
+          }, 1000)
         })
         .catch(err => {
           console.error('An error occurred:', err)
@@ -140,7 +152,7 @@ const rules: Record<string, Rule[]> = {
             </a-list-item>
           </template>
           <template #header>
-            <div style="color: #1677ff">用户 ID</div>
+            <div style="color: #1677ff">用户 ID 列表</div>
           </template>
         </a-list>
       </a-form-item>
@@ -152,6 +164,7 @@ const rules: Record<string, Rule[]> = {
           currentMode="code"
           :modeList="modeList"
           :options="options"
+          language="cn"
         />
       </a-form-item>
       <a-form-item label="重试次数" name="retry" style="margin-left: 10px">
@@ -160,7 +173,10 @@ const rules: Record<string, Rule[]> = {
     </a-form>
     <template #extra>
       <a-button style="margin: 0 8px" @click="clearForm">清空</a-button>
-      <a-button type="primary" html-type="submit" @click="searchMes" :loading="iconLoading">发送</a-button>
+      <a-button type="primary" html-type="submit" @click="searchMes" :loading="iconLoading">
+        发送
+        <span v-if="showTime">{{ timeOut }}</span>
+      </a-button>
     </template>
   </a-drawer>
 </template>