diff --git a/deliver-front/vue/components.d.ts b/deliver-front/vue/components.d.ts
index c257409af54b34190bb65ae133d9abe53700da53..87aa8790e408ff2a6978342805e028a9d1bf32a1 100644
--- a/deliver-front/vue/components.d.ts
+++ b/deliver-front/vue/components.d.ts
@@ -13,11 +13,12 @@ declare module 'vue' {
     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']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
+    AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
@@ -37,6 +38,7 @@ declare module 'vue' {
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATable: typeof import('ant-design-vue/es')['Table']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     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']
diff --git a/deliver-front/vue/package-lock.json b/deliver-front/vue/package-lock.json
index 954938faf242d2f6638fc4bfed0c85c182a9b58f..e9823a0022127e18a6693a895e5a0184c885a082 100644
--- a/deliver-front/vue/package-lock.json
+++ b/deliver-front/vue/package-lock.json
@@ -11,10 +11,12 @@
         "ant-design-vue": "^4.0.6",
         "axios": "^1.5.1",
         "echarts": "^5.4.3",
+        "json-editor-vue3": "^1.0.8",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "prismjs": "^1.29.0",
         "vue": "^3.3.4",
+        "vue-json-views": "^1.3.0",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -1210,6 +1212,11 @@
         "nanopop": "^2.1.0"
       }
     },
+    "node_modules/@sphinxxxx/color-conversion": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+      "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+    },
     "node_modules/@types/eslint": {
       "version": "8.44.6",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.44.6.tgz",
@@ -1609,6 +1616,11 @@
         "@vue/language-core": "1.8.19"
       }
     },
+    "node_modules/ace-builds": {
+      "version": "1.31.2",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.31.2.tgz",
+      "integrity": "sha512-IeZI9ytPA6mB+goPxPkUPW4vXBoLuaBl5czu2tjtKrMi7mdRgyIUA/8e5JlrI1mqKoMeWHoUujzMTWkyutTdBw=="
+    },
     "node_modules/acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
@@ -1634,7 +1646,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2893,8 +2904,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -2921,8 +2931,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -3679,6 +3688,19 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
+    "node_modules/jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmmirror.com/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3714,11 +3736,23 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-editor-vue3": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/json-editor-vue3/-/json-editor-vue3-1.0.8.tgz",
+      "integrity": "sha512-tkmWw8lvS0i9Kf4nXWl3/H431zxPMsUUW+Sc+fZ0eWLcBdqcG2oYBpcLzo4cCIwtaa/xbjHeP48NoMajSDPg5A==",
+      "dependencies": {
+        "jsoneditor": "^9.5.6"
+      }
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/json-source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/json-source-map/-/json-source-map-0.6.1.tgz",
+      "integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -3738,6 +3772,30 @@
         "json5": "lib/cli.js"
       }
     },
+    "node_modules/jsoneditor": {
+      "version": "9.10.4",
+      "resolved": "https://registry.npmmirror.com/jsoneditor/-/jsoneditor-9.10.4.tgz",
+      "integrity": "sha512-tr7dSARLHM65OQTE81zo5fQAjLzijLl+u/z+pcJaeaFzgkey59Gi8TDCYIejQ/plvm6RLVmuEeqgDhsQdayhiQ==",
+      "dependencies": {
+        "ace-builds": "^1.31.1",
+        "ajv": "^6.12.6",
+        "javascript-natural-sort": "^0.7.1",
+        "jmespath": "^0.16.0",
+        "json-source-map": "^0.6.1",
+        "jsonrepair": "^3.4.0",
+        "mobius1-selectr": "^2.4.13",
+        "picomodal": "^3.0.0",
+        "vanilla-picker": "^2.12.2"
+      }
+    },
+    "node_modules/jsonrepair": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.4.1.tgz",
+      "integrity": "sha512-KcKVkjXuNIIVDOzjLqPmo6xNG6rR7qnJWQ/jMkJjan+NPxipNYxkDNCWFO3sncVhiG+V48WVlCe7XSs0Yd4K3A==",
+      "bin": {
+        "jsonrepair": "bin/cli.js"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -3905,6 +3963,11 @@
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true
     },
+    "node_modules/mobius1-selectr": {
+      "version": "2.4.13",
+      "resolved": "https://registry.npmmirror.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz",
+      "integrity": "sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw=="
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -4204,6 +4267,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/picomodal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/picomodal/-/picomodal-3.0.0.tgz",
+      "integrity": "sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw=="
+    },
     "node_modules/pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
@@ -4324,7 +4392,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
       "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5065,7 +5132,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -5076,6 +5142,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/vanilla-picker": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmmirror.com/vanilla-picker/-/vanilla-picker-2.12.2.tgz",
+      "integrity": "sha512-dk0gNeNL9fQFGd1VEhNDQfFlbCqAiksRh1H2tVPlavkH88n/a/y30rXi9PPKrYPTK5kEfPO4xcldt4ts/1wIAg==",
+      "dependencies": {
+        "@sphinxxxx/color-conversion": "^2.2.2"
+      }
+    },
     "node_modules/vite": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
@@ -5217,6 +5291,11 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-json-views": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-views/-/vue-json-views-1.3.0.tgz",
+      "integrity": "sha512-4dwcBmMF7g9ndcdGdl+FcxOnfKIcWFZdHPIM+j4XPuemU0jk4IaG4tQIP6xQW/etIhdIWq2AoZdKQqDWuMNTlg=="
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
@@ -6178,6 +6257,11 @@
         "nanopop": "^2.1.0"
       }
     },
+    "@sphinxxxx/color-conversion": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+      "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+    },
     "@types/eslint": {
       "version": "8.44.6",
       "resolved": "https://registry.npmmirror.com/@types/eslint/-/eslint-8.44.6.tgz",
@@ -6503,6 +6587,11 @@
         "@vue/language-core": "1.8.19"
       }
     },
+    "ace-builds": {
+      "version": "1.31.2",
+      "resolved": "https://registry.npmmirror.com/ace-builds/-/ace-builds-1.31.2.tgz",
+      "integrity": "sha512-IeZI9ytPA6mB+goPxPkUPW4vXBoLuaBl5czu2tjtKrMi7mdRgyIUA/8e5JlrI1mqKoMeWHoUujzMTWkyutTdBw=="
+    },
     "acorn": {
       "version": "8.10.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.10.0.tgz",
@@ -6520,7 +6609,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -7529,8 +7617,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-diff": {
       "version": "1.3.0",
@@ -7554,8 +7641,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -8151,6 +8237,16 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmmirror.com/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw=="
+    },
+    "jmespath": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmmirror.com/jmespath/-/jmespath-0.16.0.tgz",
+      "integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8177,11 +8273,23 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "json-editor-vue3": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/json-editor-vue3/-/json-editor-vue3-1.0.8.tgz",
+      "integrity": "sha512-tkmWw8lvS0i9Kf4nXWl3/H431zxPMsUUW+Sc+fZ0eWLcBdqcG2oYBpcLzo4cCIwtaa/xbjHeP48NoMajSDPg5A==",
+      "requires": {
+        "jsoneditor": "^9.5.6"
+      }
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "json-source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/json-source-map/-/json-source-map-0.6.1.tgz",
+      "integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -8198,6 +8306,27 @@
         "minimist": "^1.2.0"
       }
     },
+    "jsoneditor": {
+      "version": "9.10.4",
+      "resolved": "https://registry.npmmirror.com/jsoneditor/-/jsoneditor-9.10.4.tgz",
+      "integrity": "sha512-tr7dSARLHM65OQTE81zo5fQAjLzijLl+u/z+pcJaeaFzgkey59Gi8TDCYIejQ/plvm6RLVmuEeqgDhsQdayhiQ==",
+      "requires": {
+        "ace-builds": "^1.31.1",
+        "ajv": "^6.12.6",
+        "javascript-natural-sort": "^0.7.1",
+        "jmespath": "^0.16.0",
+        "json-source-map": "^0.6.1",
+        "jsonrepair": "^3.4.0",
+        "mobius1-selectr": "^2.4.13",
+        "picomodal": "^3.0.0",
+        "vanilla-picker": "^2.12.2"
+      }
+    },
+    "jsonrepair": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmmirror.com/jsonrepair/-/jsonrepair-3.4.1.tgz",
+      "integrity": "sha512-KcKVkjXuNIIVDOzjLqPmo6xNG6rR7qnJWQ/jMkJjan+NPxipNYxkDNCWFO3sncVhiG+V48WVlCe7XSs0Yd4K3A=="
+    },
     "keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -8329,6 +8458,11 @@
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true
     },
+    "mobius1-selectr": {
+      "version": "2.4.13",
+      "resolved": "https://registry.npmmirror.com/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz",
+      "integrity": "sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -8570,6 +8704,11 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "picomodal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/picomodal/-/picomodal-3.0.0.tgz",
+      "integrity": "sha512-FoR3TDfuLlqUvcEeK5ifpKSVVns6B4BQvc8SDF6THVMuadya6LLtji0QgUDSStw0ZR2J7I6UGi5V2V23rnPWTw=="
+    },
     "pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
@@ -8641,8 +8780,7 @@
     "punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-2.3.0.tgz",
-      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==",
-      "dev": true
+      "integrity": "sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA=="
     },
     "queue-microtask": {
       "version": "1.2.3",
@@ -9211,7 +9349,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -9222,6 +9359,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "vanilla-picker": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmmirror.com/vanilla-picker/-/vanilla-picker-2.12.2.tgz",
+      "integrity": "sha512-dk0gNeNL9fQFGd1VEhNDQfFlbCqAiksRh1H2tVPlavkH88n/a/y30rXi9PPKrYPTK5kEfPO4xcldt4ts/1wIAg==",
+      "requires": {
+        "@sphinxxxx/color-conversion": "^2.2.2"
+      }
+    },
     "vite": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.5.0.tgz",
@@ -9303,6 +9448,11 @@
         "semver": "^7.3.6"
       }
     },
+    "vue-json-views": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-json-views/-/vue-json-views-1.3.0.tgz",
+      "integrity": "sha512-4dwcBmMF7g9ndcdGdl+FcxOnfKIcWFZdHPIM+j4XPuemU0jk4IaG4tQIP6xQW/etIhdIWq2AoZdKQqDWuMNTlg=="
+    },
     "vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/deliver-front/vue/package.json b/deliver-front/vue/package.json
index 08a6d8f435b1b14dda6cd20a2cdddd0915ecbcfa..b2c83275638cd28bd9778d55648f0d8fbc52bf1d 100644
--- a/deliver-front/vue/package.json
+++ b/deliver-front/vue/package.json
@@ -14,10 +14,12 @@
     "ant-design-vue": "^4.0.6",
     "axios": "^1.5.1",
     "echarts": "^5.4.3",
+    "json-editor-vue3": "^1.0.8",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "prismjs": "^1.29.0",
     "vue": "^3.3.4",
+    "vue-json-views": "^1.3.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
diff --git a/deliver-front/vue/src/api/message.ts b/deliver-front/vue/src/api/message.ts
index 9be0c2a132544dc5605cffda78164e36fee69a6a..68b8080ec8561b0f6ecfc8c6c86bcccdf4e064f3 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, addTemp } from '@/views/Message/type'
+import type { searchMessage, addTemp, sendMessageTest } from '@/views/Message/type'
 
 export async function getTemplatePages(data: searchMessage): Promise<any> {
   return await request({
@@ -48,3 +48,11 @@ export async function deleteTemplate(data: { ids: number[] }): Promise<any> {
     data
   })
 }
+
+export async function sendTestMes(data: sendMessageTest): Promise<any> {
+  return await request({
+    url: '/template/testSendMessage',
+    method: 'post',
+    data
+  })
+}
diff --git a/deliver-front/vue/src/main.ts b/deliver-front/vue/src/main.ts
index 6f3e909e6814cf4a1ba077fe220fdcaa818416d1..de11ec3bd445822310c44bb40e2d8632e51c3e76 100644
--- a/deliver-front/vue/src/main.ts
+++ b/deliver-front/vue/src/main.ts
@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 
+import 'jsoneditor'
 import './permisson'
 
 const pinia = createPinia()
diff --git a/deliver-front/vue/src/utils/date.ts b/deliver-front/vue/src/utils/date.ts
index 0e6a01eaf845ecca8577f6f56d2fe945ab7ab34e..6cbbb5c31a3b53db013f875d1171373a8cb3a58f 100644
--- a/deliver-front/vue/src/utils/date.ts
+++ b/deliver-front/vue/src/utils/date.ts
@@ -1,4 +1,10 @@
-import type { messageTemplate, updateTemp } from '@/views/Message/type'
+import { getApp, getMessageType } from '@/api/message'
+import type { messageTemplate } from '@/views/Message/type'
+
+interface Channel {
+  value: string
+  label: string
+}
 
 export const getDate = (d): string => {
   const date = new Date(d)
@@ -30,27 +36,73 @@ export const getChannelType = (s: string): number => {
 }
 
 export const getUsersType = (s: string): number => {
-  const usersarr = ['企业账号', '电话', '邮箱', '平台 UserId']
+  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: ''
+export const getAllMessage = (mod, record: messageTemplate): void => {
+  // 表格渲染数据
+  mod.updateTemp.templateId = record.templateId
+  mod.updateTemp.templateName = record.templateName
+  mod.updateTemp.pushRange = getPushRange(record.pushRange as string)
+  mod.updateTemp.usersType = getUsersType(record.usersType as string) + 1
+  mod.updateTemp.appId = record.appName
+  mod.updateTemp.templateStatus = record.templateStatus as number
+  mod.updateTemp.channelType = record.channelType
+  mod.updateTemp.messageType = record.messageType
+
+  // 选项渲染
+  mod.messageData.length = 0
+  mod.appData.length = 0
+
+  const Data: Channel[] = [
+    { value: '1', label: '电话' },
+    { value: '2', label: '短信' },
+    { value: '3', label: '邮件' },
+    { value: '4', label: '钉钉' },
+    { value: '5', label: '企业微信' },
+    { value: '6', label: '飞书' }
+  ]
+  const user = getUsersType(record.usersType as string)
+  if (user === 1) {
+    mod.channelData = [...Data]
+  } else if (user === 2) {
+    mod.channelData = Data.filter(item => item.value !== '3')
+  } else if (user === 3) {
+    mod.channelData = Data.filter(item => item.value === '3')
+  } else if (user === 4) {
+    mod.channelData = Data.slice(3)
+  }
+
+  getMessageType({ channelType: getChannelType(record.channelType as string) })
+    .then(res => {
+      res.data.forEach(item => {
+        mod.messageData.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+  getApp({ channelType: getChannelType(record.channelType as string) })
+    .then(res => {
+      res.data.forEach(item => {
+        mod.appData.push(item)
+      })
+    })
+    .catch(err => {
+      console.error('An error occurred:', err)
+    })
+}
+
+export const changeTable = (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
+  // pushrange
+  const pusharr = ['不限', '企业内部', '企业外部']
+  item.pushRange = pusharr[item.pushRange]
+  return item
+}
diff --git a/deliver-front/vue/src/views/Channel/type/index.ts b/deliver-front/vue/src/views/Channel/type/index.ts
index 04646f2d2f28c77ecd09f78e2a644d942b21709f..51f2ebe5cfed9843b9536669216c7f5845ffad02 100644
--- a/deliver-front/vue/src/views/Channel/type/index.ts
+++ b/deliver-front/vue/src/views/Channel/type/index.ts
@@ -127,7 +127,7 @@ export interface addTemp {
 }
 
 // 修改接口
-export interface updateTemp {
+export interface modiTemp {
   /**
    * 模板id
    */
diff --git a/deliver-front/vue/src/views/Message/components/addTemplate.vue b/deliver-front/vue/src/views/Message/components/addTemplate.vue
index 2480ef726ab237be5930215df0d32d093ca0c9fb..671a4a6570881ece54b6a33579deb6946d510de9 100644
--- a/deliver-front/vue/src/views/Message/components/addTemplate.vue
+++ b/deliver-front/vue/src/views/Message/components/addTemplate.vue
@@ -54,7 +54,7 @@ const validatePass = async (_rule: Rule): Promise<any> => {
 const rules: Record<string, Rule[]> = {
   templateName: [
     { required: true, message: '请输入模板名', trigger: 'change' },
-    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
   ],
   pushRange: [{ required: true, message: '请选择推送范围', trigger: 'change' }],
   usersType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
@@ -278,7 +278,7 @@ defineExpose({
       <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-form-item :wrapper-col="{ span: 15, offset: 7 }" 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>
diff --git a/deliver-front/vue/src/views/Message/components/modifyTemplate.vue b/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
index 29a4517eb3dbd84d6ec8d4ff2cbf190268953422..71e945ca51f6fb90f0e15fc72741cf76e17966f0 100644
--- a/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
+++ b/deliver-front/vue/src/views/Message/components/modifyTemplate.vue
@@ -1,7 +1,7 @@
 <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 type { modiTemp } from '../type'
 import { getPushWays } from '@/utils/date'
 import { getApp, getMessageType } from '@/api/message'
 
@@ -25,8 +25,8 @@ interface appItem {
   appName: string
 }
 
-const updateTemp: addTemp = reactive({
-  templateId: undefined,
+const updateTemp: modiTemp = reactive({
+  templateId: -1,
   templateName: '',
   pushRange: undefined,
   usersType: undefined,
@@ -45,8 +45,18 @@ const wrapperCol = { span: 20 }
 
 const iconLoading = ref<boolean | DelayLoading>(false)
 
+const channelDisabled = ref(false)
+
+const messageDisabled = ref(false)
+
+const appDisabled = ref(false)
+
+const messageData = ref<mess[]>([])
+
+const appData = ref<appItem[]>([])
+
 const validatePass = async (_rule: Rule): Promise<any> => {
-  if (!appDisabled.value && appData.value.length === 0) {
+  if (!appDisabled.value && appData.value.length === 0 && updateTemp.appId === undefined) {
     throw new Error('请先进行渠道 App 配置')
   }
   await Promise.resolve()
@@ -55,7 +65,7 @@ const validatePass = async (_rule: Rule): Promise<any> => {
 const rules: Record<string, Rule[]> = {
   templateName: [
     { required: true, message: '请输入模板名', trigger: 'change' },
-    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
   ],
   pushRange: [{ required: true, message: '请选择推送范围', trigger: 'change' }],
   usersType: [{ required: true, message: '请选择用户类型', trigger: 'change' }],
@@ -70,7 +80,7 @@ const rules: Record<string, Rule[]> = {
     {
       required: true,
       validator: validatePass,
-      trigger: 'change'
+      trigger: 'blur'
     }
   ],
   messageType: [{ required: true, message: '请选择消息类型', trigger: 'change' }],
@@ -88,6 +98,12 @@ const userdisabled = ref([
 ])
 
 const handlePushRangeChange = (e): void => {
+  userdisabled.value = [
+    { value: 1, label: '企业账号', disabled: false },
+    { value: 2, label: '电话', disabled: false },
+    { value: 3, label: '邮箱', disabled: false },
+    { value: 4, label: '平台 UserId', disabled: false }
+  ]
   if (e.target.value === 0 || e.target.value === 1) {
     userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: false }))
   } else if (e.target.value === 2) {
@@ -99,6 +115,13 @@ const handlePushRangeChange = (e): void => {
       }
     })
   }
+  channelDisabled.value = true
+  updateTemp.channelType = undefined
+  messageDisabled.value = true
+  updateTemp.messageType = ''
+  appDisabled.value = true
+  updateTemp.appId = undefined
+  updateTemp.usersType = undefined
 }
 
 const channelData = ref<Channel[]>([])
@@ -126,22 +149,13 @@ const pickChannel = (e): void => {
   }
 }
 
-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
+  messageDisabled.value = true
   getMessageType({ channelType: Number(channelType) })
     .then(res => {
       res.data.forEach((item: mess) => {
@@ -186,7 +200,28 @@ const handleOk = (): void => {
     })
 }
 
-const handleCancel = (): void => {}
+const handleCancel = (): void => {
+  channelDisabled.value = false
+  messageDisabled.value = false
+  appDisabled.value = false
+  userdisabled.value = [
+    { value: 1, label: '企业账号', disabled: false },
+    { value: 2, label: '电话', disabled: false },
+    { value: 3, label: '邮箱', disabled: false },
+    { value: 4, label: '平台 UserId', disabled: false }
+  ]
+}
+
+const reset = (): void => {
+  updateTemp.channelType = undefined
+  updateTemp.usersType = undefined
+  updateTemp.templateName = ''
+  updateTemp.pushRange = undefined
+  messageDisabled.value = true
+  appDisabled.value = true
+  channelDisabled.value = true
+  userdisabled.value = userdisabled.value.map(item => ({ ...item, disabled: true }))
+}
 
 watch(
   () => updateTemp.channelType,
@@ -210,7 +245,8 @@ defineExpose({
   openModify,
   updateTemp,
   messageData,
-  appData
+  appData,
+  channelData
 })
 </script>
 
@@ -271,9 +307,9 @@ defineExpose({
       <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-form-item :wrapper-col="{ span: 15, offset: 7 }" class="tem-item">
         <a-button type="primary" @click="handleOk" :loading="iconLoading">确认修改</a-button>
-        <a-button style="margin-left: 10px" @click="handleCancel">重置</a-button>
+        <a-button style="margin-left: 10px" @click="reset">重置</a-button>
       </a-form-item>
     </a-form>
   </a-modal>
diff --git a/deliver-front/vue/src/views/Message/components/sendTest.vue b/deliver-front/vue/src/views/Message/components/sendTest.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d6439a04a615315e85f8daebeb722f2427f6ea65
--- /dev/null
+++ b/deliver-front/vue/src/views/Message/components/sendTest.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { reactive, ref, defineProps } 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'
+import JsonEditorVue from 'json-editor-vue3'
+import { sendTestMes } from '@/api/message'
+
+const props = defineProps({
+  test: String
+})
+
+const placement = ref<DrawerProps['placement']>('right')
+
+const jsonstr = ref('{ "content": {} }')
+
+const jsonobj = ref(JSON.parse(jsonstr.value))
+
+const sendTestTable = reactive<sendMessageTest>({
+  templateId: Number(props.test),
+  users: [] as string[],
+  paramMap: jsonobj.value,
+  retry: undefined
+})
+
+const open = ref<boolean>(false)
+
+const sendtest = ref<FormInstance>()
+
+const userItem = ref<string>('')
+
+const iconLoading = ref(false)
+
+// JSON处理
+
+const options = ref({
+  search: false,
+  history: false
+})
+
+const modeList = ref(['code']) // 可选模式
+
+const remarkValidate = (): void => {
+  const newjsonstr = JSON.stringify(jsonobj.value)
+  if (jsonstr.value !== newjsonstr) {
+    jsonstr.value = newjsonstr
+  }
+}
+
+const showDrawer = (): void => {
+  open.value = true
+}
+
+const onClose = (): void => {
+  open.value = false
+}
+
+const addUser = (): void => {
+  if (userItem.value !== '') {
+    if (!sendTestTable.users.includes(userItem.value) || sendTestTable.users.length === 0) {
+      sendTestTable.users.push(userItem.value)
+      userItem.value = ''
+    }
+  }
+  userItem.value = ''
+}
+
+const searchMes = (): void => {
+  sendtest.value
+    ?.validate()
+    .then(() => {
+      iconLoading.value = true
+      sendTestMes(sendTestTable)
+        .then(res => {
+          if (res.code === 200) {
+            void message.success('发送成功~ (*^▽^*)')
+            onClose()
+          } else {
+            void message.error('发送失败，请检查网络~ (＞︿＜)')
+          }
+          iconLoading.value = false
+        })
+        .catch(err => {
+          console.error('An error occurred:', err)
+        })
+    })
+    .catch(error => {
+      console.log('error', error)
+    })
+}
+
+const clearForm = (): void => {
+  userItem.value = ''
+  sendtest.value?.resetFields()
+}
+
+const rules: Record<string, Rule[]> = {
+  users: [{ required: true, message: '请添加至少一个用户', trigger: 'change' }],
+  paramMap: [{ required: true, message: '请输入请求参数', trigger: 'change' }]
+}
+</script>
+
+<template>
+  <a-button type="link" class="btn-manager" size="small" style="font-size: 14px; margin-left: -5px" @click="showDrawer">
+    测试发送
+  </a-button>
+  <a-drawer title="测试发送" :placement="placement" :closable="true" :open="open" @close="onClose" :width="660">
+    <a-form ref="sendtest" :model="sendTestTable" :rules="rules">
+      <a-form-item label="用户 ID" name="userItem" style="margin-left: 22px">
+        <a-input-group compact>
+          <a-input v-model:value="userItem" placeholder="请输入用户 ID" style="width: 450px"></a-input>
+          <a-button type="primary" @click="addUser">添加</a-button>
+        </a-input-group>
+      </a-form-item>
+      <a-form-item label="用户列表" name="users">
+        <a-select
+          v-model:value="sendTestTable.users"
+          mode="multiple"
+          style="width: 100%"
+          :max-tag-text-length="11"
+          :open="false"
+        ></a-select>
+      </a-form-item>
+      <a-form-item label="发送参数" name="paramMap">
+        <json-editor-vue
+          class="editor"
+          v-model="sendTestTable.paramMap"
+          @blur="remarkValidate"
+          currentMode="code"
+          :modeList="modeList"
+          :options="options"
+        />
+      </a-form-item>
+      <a-form-item label="重试次数" name="retry" style="margin-left: 10px">
+        <a-input-number id="inputNumber" v-model:value="sendTestTable.retry" :max="3" />
+      </a-form-item>
+    </a-form>
+    <template #extra>
+      <a-button type="primary" html-type="submit" @click="searchMes" :loading="iconLoading">发送</a-button>
+      <a-button style="margin: 0 8px" @click="clearForm">清空</a-button>
+    </template>
+  </a-drawer>
+</template>
+
+<style scoped>
+.btn-manager {
+  margin-right: 10px;
+}
+</style>
diff --git a/deliver-front/vue/src/views/Message/index.vue b/deliver-front/vue/src/views/Message/index.vue
index 5079cdd5fc0b813aba29ab7cfa267b28bf73c7de..a74d6f25ce3c16bd06e39235ad8924a5b302dce6 100644
--- a/deliver-front/vue/src/views/Message/index.vue
+++ b/deliver-front/vue/src/views/Message/index.vue
@@ -8,8 +8,9 @@ import type { messageTemplate, searchMessage } from './type'
 import searchForm from './components/searchForm.vue'
 import addTemplate from './components/addTemplate.vue'
 import modifyTemplate from './components/modifyTemplate.vue'
-import { addTemplatePages, deleteTemplate, getApp, getMessageType, getTemplatePages, updateStatus } from '@/api/message'
-import { getAllMessage, getChannelType, getDate } from '@/utils/date'
+import sendTest from './components/sendTest.vue'
+import { addTemplatePages, deleteTemplate, getTemplatePages, updateStatus } from '@/api/message'
+import { changeTable, getAllMessage, getDate } from '@/utils/date'
 import { useStore } from '@/store'
 
 /**
@@ -52,7 +53,7 @@ const columns: TableColumnsType = [
     title: '操作',
     key: 'operation',
     fixed: 'right',
-    width: 200
+    width: 270
   }
 ]
 
@@ -133,13 +134,14 @@ const saveTemplate = (): void => {
   const { channelType, messageType, ...rest } = addtemplate.value.templateItem
   const savetemplate = { ...rest }
   console.warn(savetemplate)
+  addtemplate.value.iconLoading = true
   addTemplatePages(savetemplate)
     .then(res => {
       if (res.code === 200) {
-        void message.success('新增成功~ (*^▽^*)')
+        addtemplate.value.iconLoading = false
         addtemplate.value.open = false
+        void message.success('新增成功~ (*^▽^*)')
         searchTemplate({ opt: 2 }) // 更新表单
-        addtemplate.value.iconLoading = false
       }
     })
     .catch(err => {
@@ -261,26 +263,8 @@ const changeStatus = (id: number, status: number | boolean): void => {
 const startModify = (record): void => {
   modifytemplate.value.openModify = true
   console.log(record)
-  getAllMessage(modifytemplate.value.updateTemp, record)
+  getAllMessage(modifytemplate.value, 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)
-    })
 }
 
 /// 查询操作
@@ -357,12 +341,7 @@ onMounted(() => {
       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 = changeTable(item)
           templateTable.push(item)
         })
         console.warn('初始化数据', templateTable)
@@ -414,6 +393,9 @@ const a = computed(() => {
       >
         >
         <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'templateId'">
+            <span style="font-weight: bold">{{ record.templateId }}</span>
+          </template>
           <template v-if="column.key === 'templateStatus'">
             <span>
               <a-switch
@@ -447,6 +429,7 @@ const a = computed(() => {
               编辑
             </a-button>
             <modifyTemplate ref="modifytemplate" :mod="record" />
+            <sendTest :test="record.templateId" />
             <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>
@@ -466,6 +449,7 @@ const a = computed(() => {
         @change="change"
         showSizeChanger
         :locale="locale"
+        :show-total="total => `共 ${total} 条数据`"
       />
     </div>
     <!-- 对表格的操作 -->
diff --git a/deliver-front/vue/src/views/Message/type/index.ts b/deliver-front/vue/src/views/Message/type/index.ts
index d264a1873189d0e6c9979d6e4887c89f9b468c3a..f14d4fc2e7962a5fe820d4b8471ed8fbf690e790 100644
--- a/deliver-front/vue/src/views/Message/type/index.ts
+++ b/deliver-front/vue/src/views/Message/type/index.ts
@@ -23,7 +23,7 @@ export interface messageTemplate {
   /**
    * 渠道选择
    */
-  channelType: number
+  channelType: number | string
   /**
    * 消息类型
    */
@@ -127,7 +127,7 @@ export interface addTemp {
 }
 
 // 修改接口
-export interface updateTemp {
+export interface modiTemp {
   /**
    * 模板id
    */
@@ -151,7 +151,7 @@ export interface updateTemp {
   /**
    * 渠道选择
    */
-  channelType?: string | undefined
+  channelType?: string | undefined | number
   /**
    * 消息类型
    */
@@ -165,3 +165,22 @@ export interface updateTemp {
    */
   appId: number | undefined | string
 }
+
+export interface sendMessageTest {
+  /**
+   * 模板id
+   */
+  templateId: number
+  /**
+   * 用户列表
+   */
+  users: string[]
+  /**
+   * 传递参数
+   */
+  paramMap: JSON
+  /**
+   * 重试次数
+   */
+  retry: number | undefined
+}