diff --git a/deliver-front/vue/components.d.ts b/deliver-front/vue/components.d.ts
index a99b415d4335c7750c54a09735c5adc079df0f73..0720bfc24dda17c3f8b61070a387d84ec6206967 100644
--- a/deliver-front/vue/components.d.ts
+++ b/deliver-front/vue/components.d.ts
@@ -24,6 +24,7 @@ declare module 'vue' {
     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']
@@ -35,6 +36,7 @@ declare module 'vue' {
     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']
     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/api/dashboard.ts b/deliver-front/vue/src/api/dashboard.ts
index cb7263ff287672541e6dbda20201d92e058c2e8c..2b1775e37f64758d130735a0375c7168dc2080ae 100644
--- a/deliver-front/vue/src/api/dashboard.ts
+++ b/deliver-front/vue/src/api/dashboard.ts
@@ -18,7 +18,7 @@ export type templeteDataSource = pieDataPoint[]
 export type channelDataSource = pieDataPoint[]
 export type userDataSource = pieDataPoint[]
 
-export async function getDashboardHeadData(): Promise<DashboardHeadData> {
+export async function getDashboardHeadData(): Promise<any> {
   return await request({
     url: '/dashboard/getDashboardHeadData',
     method: 'post'
diff --git a/deliver-front/vue/src/api/message.ts b/deliver-front/vue/src/api/message.ts
index 97b965364bbe754f21695d49cbc4cb47f7639065..4009b1b59f882b24b23899188bcdcece442db2da 100644
--- a/deliver-front/vue/src/api/message.ts
+++ b/deliver-front/vue/src/api/message.ts
@@ -1,5 +1,5 @@
 import request from '@/utils/request'
-import type { searchMessage } from '@/views/Message/type'
+import type { searchMessage, addTemp } from '@/views/Message/type'
 
 export async function getTemplatePages(data: searchMessage): Promise<any> {
   return await request({
@@ -8,3 +8,43 @@ export async function getTemplatePages(data: searchMessage): Promise<any> {
     data
   })
 }
+
+export async function getMessageType(data: { channelType: number }): Promise<any> {
+  return await request({
+    url: '/template/getMessageTypeByChannelType',
+    method: 'post',
+    data
+  })
+}
+
+export async function getApp(data: { channelType: number }): Promise<any> {
+  return await request({
+    url: '/app/getAppByChannelType',
+    method: 'post',
+    data
+  })
+}
+
+export async function addTemplatePages(data: addTemp): Promise<any> {
+  return await request({
+    url: '/template/saveTemplate',
+    method: 'post',
+    data
+  })
+}
+
+export async function updateStatus(data: { templateId: number; templateStatus: number }): Promise<any> {
+  return await request({
+    url: '/template/updateStatusById',
+    method: 'post',
+    data
+  })
+}
+
+export async function deleteTemplate(data: string[]): Promise<any> {
+  return await request({
+    url: '/template/deleteByIds',
+    method: 'post',
+    data
+  })
+}
diff --git a/deliver-front/vue/src/views/Banner/index.vue b/deliver-front/vue/src/components/Banner/index.vue
similarity index 94%
rename from deliver-front/vue/src/views/Banner/index.vue
rename to deliver-front/vue/src/components/Banner/index.vue
index 24cc8fa841fe7a33af60b394a3a684ad0af61096..f9d5a99b901c58d01140a8e8792436bd49ae03ad 100644
--- a/deliver-front/vue/src/views/Banner/index.vue
+++ b/deliver-front/vue/src/components/Banner/index.vue
@@ -13,6 +13,9 @@
         rgb(230, 248, 255) 10px,
         rgb(230, 248, 255) 40px
       );
+      position: fixed;
+      width: 100%;
+      z-index: 999;
     "
   >
     <div>
diff --git a/deliver-front/vue/src/layouts/components/Header/index.vue b/deliver-front/vue/src/layouts/components/Header/index.vue
index 8301097b8c5c24943a2655aeb1cdf605b3d6ca86..500f2b90e5dc3800b685778e63f267453fc392ed 100644
--- a/deliver-front/vue/src/layouts/components/Header/index.vue
+++ b/deliver-front/vue/src/layouts/components/Header/index.vue
@@ -7,7 +7,7 @@ const setShowAbout = (open: boolean): void => {
 }
 </script>
 <template>
-  <a-layout-header class="header">
+  <a-layout-header class="header" :style="{ position: 'fixed', top: '25px', zIndex: 999, width: '100%' }">
     <div class="left">
       <RouterLink to="/"><img src="logo.png" style="height: 100%" alt="空" /></RouterLink>
       <h1>Deliver 企业消息推送平台</h1>
diff --git a/deliver-front/vue/src/layouts/components/SideBar/index.vue b/deliver-front/vue/src/layouts/components/Section/index.vue
similarity index 54%
rename from deliver-front/vue/src/layouts/components/SideBar/index.vue
rename to deliver-front/vue/src/layouts/components/Section/index.vue
index 235029119bf4e59e78f7ff4d2f2192bd8948af5d..2ba506d1ae898a5c43c1aa2c40afab692bf1becf 100644
--- a/deliver-front/vue/src/layouts/components/SideBar/index.vue
+++ b/deliver-front/vue/src/layouts/components/Section/index.vue
@@ -3,17 +3,19 @@ import {
   MessageOutlined,
   FunnelPlotOutlined,
   FileTextOutlined,
-  SettingOutlined,
   DashboardOutlined,
   LeftOutlined,
   RightOutlined,
   SmileOutlined
 } from '@ant-design/icons-vue'
 import { ref } from 'vue'
-
 import ItemLink from '../ItemLink/index.vue'
-const selectedKeys2 = ref<string[]>([])
-const openKeys = ref<string[]>([])
+import Breadcrumb from '../Breadcrumb/index.vue'
+import { useRoute } from 'vue-router'
+const route = useRoute()
+
+const selectedKeys2 = ref<string[]>([`${route.name as string}-1`])
+const openKeys = ref<string[]>([route.name as string])
 const collapsed = ref(false)
 const toggleCollapsed = (): void => {
   collapsed.value = !collapsed.value
@@ -21,71 +23,78 @@ const toggleCollapsed = (): void => {
 </script>
 
 <template>
-  <a-layout-sider width="190" style="background: #fff; position: relative" :collapsed="collapsed">
+  <a-layout-sider
+    width="200"
+    :style="{ overflow: 'auto', height: '100vh', position: 'fixed', top: '85px', bottom: 0, zIndex: 999 }"
+    style="background: #fff"
+    :collapsed="collapsed"
+  >
     <a-button
       shape="circle"
       size="small"
-      style="margin-bottom: 16px; position: absolute; right: -12px; top: 20px"
+      style="margin-bottom: 16px; position: fixed"
+      :style="{ left: collapsed ? '70px' : '190px', top: '120px' }"
       @click="toggleCollapsed"
     >
       <RightOutlined v-if="collapsed" />
       <LeftOutlined v-else />
     </a-button>
     <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline">
-      <a-sub-menu key="sub6">
+      <a-sub-menu key="welcome">
         <template #title>
           <span>
             <SmileOutlined />
             <span>欢迎</span>
           </span>
         </template>
-        <ItemLink itemKey="6" info="欢迎" to="welcome" />
+        <ItemLink itemKey="welcome-1" info="欢迎" to="welcome" />
       </a-sub-menu>
-      <a-sub-menu key="sub1">
+      <a-sub-menu key="dashboard">
         <template #title>
           <span>
             <DashboardOutlined />
             <span>系统监控看板</span>
           </span>
         </template>
-        <ItemLink itemKey="1" info="平台数据看板" to="dashboard" />
+        <ItemLink itemKey="dashboard-1" info="平台数据看板" to="dashboard" />
       </a-sub-menu>
-      <a-sub-menu key="sub2">
+      <a-sub-menu key="message">
         <template #title>
           <span>
             <MessageOutlined />
             <span>消息模板配置</span>
           </span>
         </template>
-        <ItemLink itemKey="2" info="消息模板" to="message" />
+        <ItemLink itemKey="message-1" info="消息模板" to="message" />
       </a-sub-menu>
-      <a-sub-menu key="sub3">
+      <a-sub-menu key="channel">
         <template #title>
           <span>
             <FunnelPlotOutlined />
             <span>渠道 APP 配置</span>
           </span>
         </template>
-        <ItemLink itemKey="3" info="APP 配置" to="channel" />
+        <ItemLink itemKey="channel-1" info="APP 配置" to="channel" />
       </a-sub-menu>
-      <a-sub-menu key="sub4">
+      <a-sub-menu key="file">
         <template #title>
           <span>
             <FileTextOutlined />
             <span>平台文件管理</span>
           </span>
         </template>
-        <ItemLink itemKey="4" info="文件管理" to="file" />
-      </a-sub-menu>
-      <a-sub-menu key="sub5">
-        <template #title>
-          <span>
-            <SettingOutlined />
-            <span>系统设置</span>
-          </span>
-        </template>
+        <ItemLink itemKey="file-1" info="文件管理" to="file" />
       </a-sub-menu>
     </a-menu>
   </a-layout-sider>
+  <a-layout
+    style="padding: 0 24px 12px; background: #f8f8f8"
+    :style="{ marginLeft: collapsed ? '80px' : '200px', marginTop: '85px' }"
+  >
+    <Breadcrumb style="margin-bottom: 12px"></Breadcrumb>
+    <a-layout-content>
+      <RouterView></RouterView>
+    </a-layout-content>
+  </a-layout>
 </template>
 <style lang="scss" scoped></style>
diff --git a/deliver-front/vue/src/layouts/index.vue b/deliver-front/vue/src/layouts/index.vue
index 9ff00120b9a45b6538ed7dd62a72789f09d8962d..517706f4320df800d148c851e71d5bf7363976c4 100644
--- a/deliver-front/vue/src/layouts/index.vue
+++ b/deliver-front/vue/src/layouts/index.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import Header from './components/Header/index.vue'
-import SideBar from './components/SideBar/index.vue'
-import Breadcrumb from './components/Breadcrumb/index.vue'
-import Banner from '../views/Banner/index.vue'
+import Banner from '../components/Banner/index.vue'
+import Section from './components/Section/index.vue'
 </script>
 
 <template>
@@ -10,13 +9,7 @@ import Banner from '../views/Banner/index.vue'
     <Banner></Banner>
     <Header></Header>
     <a-layout>
-      <SideBar></SideBar>
-      <a-layout style="padding: 0 24px 12px; background: #f8f8f8">
-        <Breadcrumb style="margin-bottom: 12px"></Breadcrumb>
-        <a-layout-content>
-          <RouterView></RouterView>
-        </a-layout-content>
-      </a-layout>
+      <Section></Section>
     </a-layout>
   </a-layout>
 </template>
diff --git a/deliver-front/vue/src/router/index.ts b/deliver-front/vue/src/router/index.ts
index 75ffbe819bb6a48a36ab8b8c4d4917246588eea2..4a9a8fbad3c4e6a8fb91ffc61461b57eb32f62d8 100644
--- a/deliver-front/vue/src/router/index.ts
+++ b/deliver-front/vue/src/router/index.ts
@@ -50,15 +50,6 @@ const routes: RouteRecordRaw[] = [
           parent: 'home',
           name: '平台文件管理'
         }
-      },
-      {
-        path: 'setting',
-        name: 'setting',
-        component: async () => await import('@/views/Setting/index.vue'),
-        meta: {
-          parent: 'home',
-          name: '系统设置'
-        }
       }
     ]
   },
diff --git a/deliver-front/vue/src/store/modules/dashboard.ts b/deliver-front/vue/src/store/modules/dashboard.ts
index 064f63831fd6ab10966aa9ccf9ed43d89f8f069b..687eae787069e23414f83cea227fea4a732ce331 100644
--- a/deliver-front/vue/src/store/modules/dashboard.ts
+++ b/deliver-front/vue/src/store/modules/dashboard.ts
@@ -1,12 +1,5 @@
 import { defineStore } from 'pinia'
-import {
-  getDashboardHeadData,
-  getMessageInfo,
-  getTemplateInfo,
-  getAppInfo,
-  getPushUserInfo,
-  type DashboardHeadData
-} from '@/api/dashboard'
+import { getDashboardHeadData, getMessageInfo, getTemplateInfo, getAppInfo, getPushUserInfo } from '@/api/dashboard'
 import { type EChartsOption } from 'echarts'
 const chartsMessageOption: EChartsOption = {
   legend: {
@@ -125,15 +118,15 @@ export const useDashboardStore = defineStore('dashboard', {
   },
   actions: {
     async getDashboardHeadData() {
-      const dashboardHeadData: DashboardHeadData = await getDashboardHeadData()
-      return dashboardHeadData
+      const dashboardHeadData = await getDashboardHeadData()
+      return dashboardHeadData.data
     },
     async getMessageInfo(dateSelect: number): Promise<EChartsOption> {
       const messageData = await getMessageInfo({ dateSelect })
       if (chartsMessageOption.dataset !== undefined) {
         chartsMessageOption.dataset = {
           dimensions: ['product', '成功', '失败'],
-          source: messageData.messageInfoList
+          source: messageData.data.messageInfoList
         }
       }
       return chartsMessageOption
@@ -141,21 +134,21 @@ export const useDashboardStore = defineStore('dashboard', {
     async getTemplateInfo(dateSelect: number): Promise<EChartsOption> {
       const messageData = await getTemplateInfo({ dateSelect })
       if (chartsTemplateOption.series !== undefined) {
-        chartsTemplateOption.series[0].data = messageData?.dashboardInfoList
+        chartsTemplateOption.series[0].data = messageData.data?.dashboardInfoList
       }
       return chartsTemplateOption
     },
     async getAppInfo(dateSelect: number): Promise<EChartsOption> {
       const messageData = await getAppInfo({ dateSelect })
       if (chartsChannelOption.series !== undefined) {
-        chartsChannelOption.series[0].data = messageData?.dashboardInfoList
+        chartsChannelOption.series[0].data = messageData.data?.dashboardInfoList
       }
       return chartsChannelOption
     },
     async getPushUserInfo(dateSelect: number): Promise<EChartsOption> {
       const messageData = await getPushUserInfo({ dateSelect })
       if (chartsAccountOption.series !== undefined) {
-        chartsAccountOption.series[0].data = messageData?.dashboardInfoList
+        chartsAccountOption.series[0].data = messageData.data?.dashboardInfoList
       }
       return chartsAccountOption
     }
diff --git a/deliver-front/vue/src/utils/date.ts b/deliver-front/vue/src/utils/date.ts
index ca7b5b975d8bfe2da4816650df36983f49db2136..4032e7d3b34df99a0174da2d34a4c90761847ee4 100644
--- a/deliver-front/vue/src/utils/date.ts
+++ b/deliver-front/vue/src/utils/date.ts
@@ -8,3 +8,11 @@ export const getDate = (d): string => {
   const second = String(date.getSeconds()).padStart(2, '0')
   return `${year}-${month}-${day} ${hour}:${minute}:${second}`
 }
+
+export const getPushWays = (channelType: string | undefined, messageType: string | undefined): string => {
+  const obj = {
+    channelType: Number(channelType),
+    messageType
+  }
+  return JSON.stringify(obj)
+}
diff --git a/deliver-front/vue/src/utils/request.ts b/deliver-front/vue/src/utils/request.ts
index 568b64160b89a7e048f17caeb7e0e263de6926de..98cfe85d52122b08a7ff85192cc23d1f992d3a09 100644
--- a/deliver-front/vue/src/utils/request.ts
+++ b/deliver-front/vue/src/utils/request.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { message } from 'ant-design-vue'
 
 const service = axios.create({
   baseURL: '/admin',
@@ -16,9 +17,10 @@ service.interceptors.request.use(
 
 service.interceptors.response.use(
   async res => {
-    if (res?.data.code === 200) return res.data.data
+    if (res?.data.code === 200) return res.data
     else {
-      return await Promise.reject(res?.data.errorMessage)
+      void message.error(`操作失败，${res?.data.errorMessage} (＞︿＜)`)
+      return res?.data.errorMessage
     }
   },
   async err => {
diff --git a/deliver-front/vue/src/views/Channel/index.vue b/deliver-front/vue/src/views/Channel/index.vue
index 3b56a4f9764bc72580645459e3e08068beee010a..ac9c5930f53b5c31bef642d343b4f1f29eef283f 100644
--- a/deliver-front/vue/src/views/Channel/index.vue
+++ b/deliver-front/vue/src/views/Channel/index.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { ReloadOutlined } from '@ant-design/icons-vue'
+import { ReloadOutlined, EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons-vue'
 import { ref, reactive, h, watch, 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 type { messageTemplate } from './type'
 import searchForm from './components/searchForm.vue'
+
 // import { message } from 'ant-design-vue'
 
 /// 表格部分
@@ -112,31 +113,29 @@ watch(
 
 const columns: TableColumnsType = [
   {
-    title: '项目名称',
-    dataIndex: 'projectName',
-    sorter: {
-      compare: (a: any, b: any) => a.projectName.localeCompare(b.projectName),
-      multiple: 3
-    },
-    key: 'projectname'
+    title: 'AppId',
+    dataIndex: 'appId',
+    key: 'appId'
+  },
+  {
+    title: 'App名称',
+    dataIndex: 'appName',
+    key: 'appName'
+  },
+  {
+    title: '渠道类型',
+    dataIndex: 'channelType',
+    key: 'channelType'
   },
   {
-    title: '管理员1',
-    dataIndex: 'admin1',
-    sorter: {
-      compare: (a: any, b: any) => a.admin1.localeCompare(b.admin1),
-      multiple: 2
-    },
-    key: 'admin1'
+    title: '使用次数',
+    dataIndex: 'useCount',
+    key: 'useCount'
   },
   {
-    title: '管理员2',
-    dataIndex: 'admin2',
-    sorter: {
-      compare: (a: any, b: any) => a.admin2.localeCompare(b.admin2),
-      multiple: 1
-    },
-    key: 'admin2'
+    title: 'app状态',
+    dataIndex: 'appStatus',
+    key: 'appStatus'
   },
   {
     title: '操作',
@@ -149,29 +148,68 @@ const columns: TableColumnsType = [
 const data = ref([
   {
     key: '1',
-    projectName: '1.txt',
-    admin1: 'a',
-    admin2: 'b'
+    appId: '1',
+    appName: '飞书消息推送',
+    channelType: 'b',
+    useCount: 0,
+    appStatus: 1,
+    appConfig: 'xxx',
+    createUser: 1,
+    createTime: '2023/12/6'
   },
   {
     key: '2',
-    projectName: '2.txt',
-    admin1: 'c',
-    admin2: 'd'
+    appId: '1',
+    appName: '飞书消息推送',
+    channelType: 'b',
+    useCount: 0,
+    appStatus: 1,
+    appConfig: 'xxx',
+    createUser: 1,
+    createTime: '2023/12/6'
   },
   {
     key: '3',
-    projectName: '3.txt',
-    admin1: 'e',
-    admin2: 'f'
+    appId: '1',
+    appName: '飞书消息推送',
+    channelType: 'b',
+    useCount: 0,
+    appStatus: 1,
+    appConfig: 'xxx',
+    createUser: 1,
+    createTime: '2023/12/6'
   },
   {
     key: '4',
-    projectName: '4.txt',
-    admin1: 'g',
-    admin2: 'h'
+    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
+}))
 </script>
 
 <template>
@@ -247,13 +285,36 @@ const data = ref([
       </div>
 
       <!-- 表格部分 -->
-      <a-table :columns="columns" :data-source="data" :scroll="{ x: 1200, y: 300 }" bordered>
+      <a-table
+        :pagination="pagination"
+        :columns="columns"
+        :data-source="data"
+        :scroll="{ x: 1200, y: 300 }"
+        bordered
+        :expand-column-width="100"
+      >
         <template #bodyCell="{ column }">
           <template v-if="column.key === 'operation'">
             <a-button type="primary" class="btn-manager">编辑</a-button>
             <a-button type="primary" danger>删除</a-button>
           </template>
         </template>
+        <template #expandedRowRender="{ record }">
+          <a-descriptions>
+            <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>
+        </template>
       </a-table>
     </div>
     <!-- 对表格的操作 -->
diff --git a/deliver-front/vue/src/views/Message/components/addTemplate.vue b/deliver-front/vue/src/views/Message/components/addTemplate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6e83255f4f694dc5aab6b4fe4dec44db4484d64f
--- /dev/null
+++ b/deliver-front/vue/src/views/Message/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/Message/components/modifyTemplate.vue b/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..581cd0c4e609138d4a44ae860f21aa9b96bf6498
--- /dev/null
+++ b/deliver-front/vue/src/views/Message/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/Message/components/searchForm.vue b/deliver-front/vue/src/views/Message/components/searchForm.vue
index 771cbbc11c9154e6c1027eba399fbe1401896ee6..e5f52cf29b6ffb839a5c13a9852d0a1baadf9caf 100644
--- a/deliver-front/vue/src/views/Message/components/searchForm.vue
+++ b/deliver-front/vue/src/views/Message/components/searchForm.vue
@@ -43,11 +43,11 @@ const onRangeChange = (value: [Dayjs, Dayjs] | [string, string], dateString: [st
 }
 
 // 新增自定义事件，当查询按钮被点击时，可以立即告知父组件
-const $emit = defineEmits(['mes'])
+const emit = defineEmits(['mes'])
 
 const searchMes = (): void => {
   iconLoading.value = true
-  $emit('mes')
+  emit('mes')
 }
 
 defineExpose({
@@ -118,4 +118,10 @@ defineExpose({
   </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/Message/index.vue b/deliver-front/vue/src/views/Message/index.vue
index 72b5fdd88f829ec4a3167cf667488538a5a5bfc2..e644c347b6f457fbc212dcdfe2a9df8cb5472fdb 100644
--- a/deliver-front/vue/src/views/Message/index.vue
+++ b/deliver-front/vue/src/views/Message/index.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { ReloadOutlined } from '@ant-design/icons-vue'
-import { ref, reactive, h, onMounted } from 'vue' // watch, ,
+import { ref, reactive, h, onMounted } from 'vue'
 import type { UnwrapRef } from 'vue'
-// import type { Rule } from 'ant-design-vue/es/form'
 import type { TableColumnsType } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { messageTemplate, searchMessage } from './type'
 import searchForm from './components/searchForm.vue'
-import { getTemplatePages } from '@/api/message'
+import addTemplate from './components/addTemplate.vue'
+import { addTemplatePages, getTemplatePages, updateStatus } from '@/api/message'
 import { getDate } from '@/utils/date'
 
 /**
@@ -110,99 +110,62 @@ const getInnerData = (expanded, record): void => {
 /**
  * 相关操作: 增删改查
  */
-const searchform = ref()
-
-// 新增操作
-const open = ref<boolean>(false)
-const addModules = (): void => {
-  open.value = true
+interface SearchOptions {
+  page?: number
+  pageSize?: number
+  opt?: number // 操作标识符，识别操作，保证message消息提示不重复
 }
 
-// const labelCol = { span: 4 }
-
-// const wrapperCol = { span: 20 }
-
-// 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' }],
-//   messageType: [
-//     {
-//       required: true,
-//       message: '请选择消息类型',
-//       trigger: 'change'
-//     }
-//   ],
-//   channel: [
-//     {
-//       required: true,
-//       message: '请选择渠道',
-//       trigger: 'change'
-//     }
-//   ],
-//   channelApp: [{ required: true, message: '请选择渠道App', trigger: 'change' }]
-// }
-
-// const templateForm = ref()
-// const handleOk = (): void => {
-//   templateForm.value
-//     .validate()
-//     .then(() => {
-//       console.log('values', templateTable)
-//       open.value = false
-//     })
-//     .catch(error => {
-//       console.log('error', error)
-//     })
-// }
-// const handleCancel = (): void => {
-//   templateForm.value.resetFields()
-// }
-
-// const channelData = ['默认标签1', '默认标签2', '默认标签3']
-
-// const messageData = {
-//   默认标签1: ['Online'],
-//   默认标签2: ['Promotion'],
-//   默认标签3: ['Offline']
-// }
-
-// const appData = {
-//   默认标签1: ['IOS'],
-//   默认标签2: ['安卓'],
-//   默认标签3: ['MAC']
-// }
-
-// const mesType = computed(() => {
-//   return messageData[templateTable.channel] === undefined ? [] : messageData[templateTable.channel]
-// })
+const searchform = ref()
+const addtemplate = ref()
+
+/// 新增操作
+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 appType = computed(() => {
-//   return appData[templateTable.channel] === undefined ? [] : appData[templateTable.channel]
-// })
+/// 删除操作
+const onDelete = (id: number): void => {
+  console.log(id)
+}
 
-// watch(
-//   () => templateTable.channel,
-//   newVal => {
-//     if (messageData[newVal] !== undefined) {
-//       templateTable.messageType = messageData[newVal][0]
-//     } else {
-//       // 未定义或空数组的情况
-//       templateTable.messageType = ''
-//       messageData[newVal] = []
-//     }
-//     if (appData[newVal] !== undefined) {
-//       templateTable.channelApp = appData[newVal][0]
-//     } else {
-//       // 处理未定义或空数组的情况
-//       templateTable.channelApp = ''
-//       appData[newVal] = []
-//     }
-//   }
-// )
+/// 修改操作
+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 searchItem: searchMessage = reactive({
@@ -220,8 +183,7 @@ const total = ref()
 const current = ref()
 
 const change = (page: number, pageSize: number): void => {
-  console.log(page, pageSize)
-  searchTemplate(page, pageSize)
+  searchTemplate({ page, pageSize })
 }
 
 const locale = {
@@ -233,7 +195,7 @@ const locale = {
 }
 
 // 条件查询
-const searchTemplate = (page?: number, pageSize?: number): void => {
+const searchTemplate = ({ page, pageSize, opt }: SearchOptions = {}): void => {
   // 对象解构
   const { perid, ...rest } = searchform.value.searchPage
   const searchNeedMes = { ...rest }
@@ -243,9 +205,9 @@ const searchTemplate = (page?: number, pageSize?: number): void => {
   getTemplatePages(searchNeedMes)
     .then(res => {
       templateTable.length = 0
-      if (res.records.length > 0) {
-        total.value = res.total
-        res.records.forEach((item: any, index: number) => {
+      if (res.data.records.length > 0) {
+        total.value = res.data.total
+        res.data.records.forEach((item: any, index: number) => {
           item.channelType = JSON.parse(item.pushWays).channelType
           item.messageType = JSON.parse(item.pushWays).messageType
           item.createTime = getDate(item.createTime)
@@ -255,17 +217,20 @@ const searchTemplate = (page?: number, pageSize?: number): void => {
           const i = item
           templateTable.push(i)
         })
-        void message.success('查询成功~ (*^▽^*)')
-        console.warn('查询数据', templateTable)
+        if (opt === 1) {
+          void message.success('查询成功~ (*^▽^*)')
+        }
       } else {
-        void message.success('未查询到任何数据   ≧ ﹏ ≦')
-        console.warn('查询数据', templateTable)
+        if (opt === 1) {
+          void message.success('未查询到任何数据   ≧ ﹏ ≦')
+        }
       }
+      console.warn('查询数据', templateTable)
       searchform.value.iconLoading = false
     })
     .catch(err => {
       searchform.value.iconLoading = false
-      void message.error('查询失败~ (＞︿＜)')
+      void message.error('查询失败，请检查网络~ (＞︿＜)')
       console.error('An error occurred:', err)
     })
 }
@@ -273,9 +238,9 @@ const searchTemplate = (page?: number, pageSize?: number): void => {
 onMounted(() => {
   getTemplatePages(searchItem)
     .then(res => {
-      if (res.records.length > 0) {
-        total.value = res.total
-        res.records.forEach((item: any, index: number) => {
+      if (res.data.records.length > 0) {
+        total.value = res.data.total
+        res.data.records.forEach((item: any, index: number) => {
           item.channelType = JSON.parse(item.pushWays).channelType
           item.messageType = JSON.parse(item.pushWays).messageType
           item.createTime = getDate(item.createTime)
@@ -295,54 +260,15 @@ onMounted(() => {
 
 <template>
   <!-- 搜索部分 -->
-  <searchForm ref="searchform" @mes="searchTemplate" />
+  <searchForm ref="searchform" @mes="searchTemplate({ opt: 1 })" />
   <!-- 表格部分 -->
   <div id="message-container">
     <div class="message-section">
       <div class="splitter">
         <a-tooltip title="刷新">
-          <a-button shape="circle" :icon="h(ReloadOutlined)" @click="searchTemplate()" />
+          <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="templateTable" :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="templateTable.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="templateTable.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="templateTable.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="channel" class="tem-item">
-              <a-select v-model:value="templateTable.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="templateTable.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="templateTable.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>
 
       <!-- 表格部分 -->
@@ -359,12 +285,19 @@ onMounted(() => {
         <template #bodyCell="{ column, record }">
           <template v-if="column.key === 'templateStatus'">
             <span>
-              <a-switch v-model:checked="record.templateStatus" checked-children="启用" un-checked-children="禁用" />
+              <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" size="small" style="font-size: 13px">编辑</a-button>
-            <a-button type="primary" danger size="small" style="font-size: 13px">删除</a-button>
+            <a-popconfirm title="确认删除吗?" @confirm="onDelete(record.templateId)" ok-text="确定" cancel-text="取消">
+              <a-button type="primary" danger size="small" style="font-size: 13px">删除</a-button>
+            </a-popconfirm>
           </template>
         </template>
         <template #expandedRowRender>
@@ -393,41 +326,12 @@ onMounted(() => {
   overflow: auto;
 }
 
-.search {
-  padding: 24px 24px 0 24px;
-  background: #ffffff;
-  border-radius: 6px;
-
-  .search-item:nth-child(1) {
-    margin-left: 15px;
-  }
-
-  .search-item:nth-child(2) {
-    margin-left: 30px;
-  }
-}
-
 .splitter {
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: right;
-
-  .addModule {
-    margin: 0px 20px;
-  }
-}
-
-.temform {
-  .tem-item {
-    margin-top: 20px;
-  }
-
-  .tem-item:nth-child(7) {
-    text-align: right;
-    margin-left: 300px;
-  }
 }
 
 .message-section {
diff --git a/deliver-front/vue/src/views/Message/type/index.ts b/deliver-front/vue/src/views/Message/type/index.ts
index 4241a2298ed1fa7408fcab5580b3f9fa045e75a8..04646f2d2f28c77ecd09f78e2a644d942b21709f 100644
--- a/deliver-front/vue/src/views/Message/type/index.ts
+++ b/deliver-front/vue/src/views/Message/type/index.ts
@@ -3,7 +3,7 @@ export interface messageTemplate {
   /**
    * 模板id
    */
-  templateId: string
+  templateId: number
   /**
    * 模板名
    */
@@ -16,9 +16,9 @@ export interface messageTemplate {
    * 用户类型
    */
   usersType: number
-  // /**
-  //  * 推送方式
-  //  */
+  /**
+   * 推送方式
+   */
   pushWays?: string
   /**
    * 渠道选择
@@ -89,3 +89,79 @@ export interface searchMessage {
    */
   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/Setting/index.vue b/deliver-front/vue/src/views/Setting/index.vue
deleted file mode 100644
index 78cf40a22f83467924528b051882d58c346384f8..0000000000000000000000000000000000000000
--- a/deliver-front/vue/src/views/Setting/index.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts" setup></script>
-<template>
-  <div>setting</div>
-</template>
-<style lang="scss" scoped></style>
diff --git a/deliver-front/vue/vite.config.ts b/deliver-front/vue/vite.config.ts
index b9d24789ff5e26afaeddecb7b86868cb6d6e1eb3..60ff90555cbafda5f21ce62d0cbd0187d58032ef 100644
--- a/deliver-front/vue/vite.config.ts
+++ b/deliver-front/vue/vite.config.ts
@@ -12,7 +12,7 @@ export default defineConfig({
     proxy: {
       '/admin': {
         // 请求接口中要替换的标识
-        target: 'http://localhost:9090', // 代理地址
+        target: 'http://10.90.118.84:9090', // 代理地址
         changeOrigin: true, // 是否允许跨域
         secure: true
       }