From 24534069daded45188a6e12ab6d1507de9bfaa85 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Fri, 25 Jul 2025 13:25:17 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=9C=BA=E5=99=A8?=
 =?UTF-8?q?=E4=BA=BA=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DialogView/template/bot-api.vue           | 95 ++++++++++++-------
 .../DialogView/template/bot-clearday.vue      | 28 ++++--
 .../DialogView/template/bot-deletebot.vue     | 24 +++--
 .../DialogView/template/bot-dialog.vue        | 27 ++++--
 .../DialogView/template/bot-help.vue          | 82 +++++++++-------
 .../DialogView/template/bot-info.vue          | 30 +++---
 .../DialogView/template/bot-list.vue          | 25 +++--
 .../DialogView/template/bot-newbot.vue        | 24 +++--
 .../DialogView/template/bot-revoke.vue        | 24 +++--
 .../DialogView/template/bot-setname.vue       | 24 +++--
 .../DialogView/template/bot-token.vue         | 26 +++--
 .../DialogView/template/bot-webhook.vue       | 26 +++--
 .../sass/pages/components/dialog-wrapper.scss |  2 +
 13 files changed, 282 insertions(+), 155 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-api.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-api.vue
index 48a1f61df..087f65d92 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-api.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-api.vue
@@ -1,46 +1,77 @@
 <template>
-    <div>
-        <p>{{$L("你可以通过执行以下命令来请求我")}}:</p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("发送文本消息")}}：</b></p>
-        <p>curl --request POST '{{ $A.apiUrl('dialog/msg/sendtext') }}' \</p>
-        <p>--header 'version: {{ msg.version }}' \</p>
-        <p>--header 'token: <span class="mark-color">{{$L("机器人Token")}}</span>' \</p>
-        <p>--form 'dialog_id="<span class="mark-color">{{$L("对话ID")}}</span>"' \</p>
-        <p>--form 'text="<span class="mark-color">{{$L("消息内容")}}</span>"'</p>
-        <p>--form 'text_type="<span class="mark-color">[html|md]</span>"'</p>
-        <p>--form 'key="<span class="mark-color">{{$L("搜索词 (留空自动生成)")}}</span>"'</p>
-        <p>--form 'silence="<span class="mark-color">[yes|no]</span>"'</p>
-        <p>--form 'reply_id="<span class="mark-color">{{$L("回复指定消息ID")}}</span>"'</p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("Webhook说明")}}：</b></p>
-        <p>{{$L("机器人收到消息后会将消息POST推送到Webhook地址，请求超时为10秒，请求参数如下")}}：</p>
-        <p><span class="mark-color">text</span>: {{$L("消息文本")}}</p>
-        <p><span class="mark-color">reply_text</span>: {{$L("回复/引用消息文本")}}</p>
-        <p><span class="mark-color">token</span>: {{$L("机器人Token")}}</p>
-        <p v-if="/^(ai-|user-session-)/.test(msg.email)"><span class="mark-color">session_id</span>: {{$L("会话ID")}}</p>
-        <p><span class="mark-color">dialog_id</span>: {{$L("对话ID")}}</p>
-        <p><span class="mark-color">dialog_type</span>: {{$L("对话类型")}}</p>
-        <p><span class="mark-color">msg_id</span>: {{$L("消息ID")}}</p>
-        <p><span class="mark-color">msg_uid</span>: {{$L("消息发送人ID")}}</p>
-        <p><span class="mark-color">msg_user</span>: {{$L("消息发送人信息")}}</p>
-        <p><span class="mark-color">mention</span>: {{$L("是否被@到")}}</p>
-        <p><span class="mark-color">bot_uid</span>: {{$L("机器人ID")}}</p>
-        <p><span class="mark-color">version</span>: {{$L("系统版本")}}</p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            const sessionDesc = !/^(ai-|user-session-)/.test(this.msg.email) ? " <span style='color:#999;padding-left:4px;'>({{该机器人不支持}})</span>" : "";
+            return [
+                "## {{API 使用说明}}",
+                "",
+                "### 1. {{发送文本消息}}",
+                "",
+                "{{开发者可以通过此接口调用机器人向指定对话发送文本消息。}}",
+                "",
+                "#### {{接口信息}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "|------|------|",
+                "| **{{请求方式}}** | POST |",
+                "| **{{接口地址}}** | `" + $A.apiUrl('dialog/msg/sendtext') + "` |",
+                "| **{{说明}}** | {{通过机器人向指定对话发送文本消息}} |",
+                "",
+                "#### {{请求头}}",
+                "",
+                "| {{参数名}} | {{值}} | {{必填}} |",
+                "|--------|-----|------|",
+                "| `version` | `" + this.msg.version + "` | √ |",
+                "| `token` | {{机器人Token}} | √ |",
+                "",
+                "#### {{请求参数}}",
+                "",
+                "| {{参数名}} | {{说明}} | {{类型}} | {{必填}} | {{示例值}} |",
+                "|--------|------|------|------|--------|",
+                "| `dialog_id` | {{对话ID}} | string | √ | - |",
+                "| `text` | {{消息内容}} | string | √ | - |",
+                "| `text_type` | {{文本类型}} | string | - | {{html 或 md}} |",
+                "| `key` | {{搜索词}} | string | - | {{留空自动生成}} |",
+                "| `silence` | {{静默模式}} | string | - | {{yes 或 no}} |",
+                "| `reply_id` | {{回复指定消息ID}} | string | - | - |",
+                "",
+                "### 2. {{Webhook 消息推送}}",
+                "",
+                "{{机器人收到消息后会自动POST推送到配置的Webhook地址，请求超时为10秒。}}",
+                "",
+                "#### {{推送参数}}",
+                "",
+                "| {{参数名}} | {{说明}} | {{类型}} |",
+                "|--------|------|------|",
+                "| `text` | {{消息文本内容}} | string |",
+                "| `reply_text` | {{回复/引用的消息文本}} | string |",
+                "| `token` | {{机器人Token}} | string |",
+                "| `session_id` | {{会话ID}}" + sessionDesc + " | string |",
+                "| `dialog_id` | {{对话ID}} | string |",
+                "| `dialog_type` | {{对话类型}} | string |",
+                "| `msg_id` | {{消息ID}} | string |",
+                "| `msg_uid` | {{消息发送人ID}} | string |",
+                "| `msg_user` | {{消息发送人信息}} | JSON |",
+                "| `mention` | {{是否被@到}} | boolean |",
+                "| `bot_uid` | {{机器人ID}} | string |",
+                "| `version` | {{系统版本}} | string |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-clearday.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-clearday.vue
index 1bd0518c9..b28220624 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-clearday.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-clearday.vue
@@ -1,24 +1,32 @@
 <template>
-    <div>
-        <p><b>{{$L("设置保留消息时间")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-        <p>{{$L("清理周期")}}：<span class="mark-color">{{ msg.data.clear_day }}{{$L("天")}}</span></p>
-        <p>{{$L("下次清理")}}：<span class="mark-color">{{ msg.data.clear_at }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{设置保留消息时间}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+                "| {{清理周期}} | " + this.msg.data.clear_day + " {{天}} |",
+                "| {{下次清理}} | " + this.msg.data.clear_at + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-deletebot.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-deletebot.vue
index 80b7bce5f..86bea6c76 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-deletebot.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-deletebot.vue
@@ -1,22 +1,30 @@
 <template>
-    <div>
-        <p><b>{{$L("删除成功")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{删除成功}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-dialog.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-dialog.vue
index 8d629840d..a485b3f09 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-dialog.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-dialog.vue
@@ -1,24 +1,31 @@
 <template>
-    <div>
-        <p><b>{{$L("机器人")}} <span class="mark-color">{{ msg.data.nickname }} (ID:{{ msg.data.userid }})</span> {{$L("已加入的会话")}}：</b></p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("会话ID | 会话名称")}}</b></p>
-        <p v-for="item in msg.data.list">
-            {{ item.id }} | {{ item.name }}{{ item.type == 'user' ? $L(' (个人)') : '' }}
-        </p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{机器人}} " + this.msg.data.nickname + " (ID:" + this.msg.data.userid + ") {{已加入的会话}}：",
+                "",
+                "| {{会话ID}} | {{会话名称}} |",
+                "| ------ | ------ |",
+                ...this.msg.data.list.map(item => {
+                    return "| " + item.id + " | " + item.name + (item.type === 'user' ? "{{ (个人)}}" : "") + " |";
+                }),
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-help.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-help.vue
index 2c0b2fcf6..52d9e9a35 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-help.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-help.vue
@@ -1,40 +1,12 @@
 <template>
-    <div>
-        <p>{{$L("您可以通过发送以下命令来控制我")}}：</p>
-        <p>&nbsp;</p>
-
-        <template v-if="msg.manager">
-            <p><span class="mark-color mark-set">/list</span> - {{$L("机器人列表")}}</p>
-            <p><span class="mark-color mark-set">/newbot ({{$L('机器人名称')}})</span> - {{$L("创建机器人")}}</p>
-        </template>
-        <template v-else>
-            <p><span class="mark-color mark-set">/info</span> - {{$L("查看机器人详情")}}</p>
-        </template>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("修改机器人")}}</b></p>
-        <p><span class="mark-color mark-set">/setname{{IDLabel}} ({{$L('机器人名称')}})</span> - {{$L("修改机器人名称")}}</p>
-        <p><span class="mark-color mark-set">/deletebot{{IDLabel}}</span> - {{$L("删除机器人")}}</p>
-        <p><span class="mark-color mark-set">/clearday{{IDLabel}} ({{$L('天数')}})</span> - {{$L("设置保留消息时间（默认30天）")}}</p>
-        <p><span class="mark-color mark-set">/webhook{{IDLabel}} [url]</span> - {{$L("设置消息Webhook（详情请看 API接口文档）")}}</p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("机器人设置")}}</b></p>
-        <p><span class="mark-color mark-set">/token{{IDLabel}}</span> - {{$L("生成Token令牌")}}</p>
-        <p><span class="mark-color mark-set">/revoke{{IDLabel}}</span> - {{$L("撤销机器人Token令牌")}}</p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("会话管理")}}</b></p>
-        <p><span class="mark-color mark-set">/dialog{{IDLabel}} [{{$L('搜索关键词')}}]</span> - {{$L("查看会话ID")}}</p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("API接口文档")}}</b></p>
-        <p><span class="mark-color mark-set">/api</span> - {{$L("查看接口列表")}}</p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
@@ -43,7 +15,51 @@ export default {
     },
     computed: {
         IDLabel() {
-            return this.msg.manager ? this.$L(' {机器人ID}') : '';
+            return this.msg.manager ? this.$L('机器人ID') : '';
+        },
+        content() {
+            return [
+                "### {{您可以通过发送以下命令来控制我}}",
+                "",
+                "| {{命令}} | {{说明}} |",
+                "| ------ | ------ |",
+                this.msg.manager ? "| ~/list~ | {{机器人列表}} |" : null,
+                this.msg.manager ? "| ~/newbot ({{机器人名称}})~ | {{创建机器人}} |": null,
+                !this.msg.manager ? "| ~/info~ | {{查看机器人详情}} |" : null,
+                "",
+                "### {{修改机器人}}",
+                "",
+                "| {{命令}} | {{说明}} |",
+                "| ------ | ------ |",
+                "| ~/setname:IDLabel: ({{机器人名称}})~ | {{修改机器人名称}} |",
+                "| ~/deletebot:IDLabel:~ | {{删除机器人}} |",
+                "| ~/clearday:IDLabel: ({{天数}})~ | {{设置保留消息时间（默认30天）}} |",
+                "| ~/webhook:IDLabel: [url]~ | {{设置消息Webhook（详情请看 API接口文档）}} |",
+                "",
+                "### {{机器人设置}}",
+                "",
+                "| {{命令}} | {{说明}} |",
+                "| ------ | ------ |",
+                "| ~/token:IDLabel:~ | {{生成Token令牌}} |",
+                "| ~/revoke:IDLabel:~ | {{撤销机器人Token令牌}} |",
+                "",
+                "### {{会话管理}}",
+                "",
+                "| {{命令}} | {{说明}} |",
+                "| ------ | ------ |",
+                "| ~/dialog:IDLabel: [{{搜索关键词}}]~ | {{查看会话ID}} |",
+                "",
+                "### {{API接口文档}}",
+                "",
+                "| {{命令}} | {{说明}} |",
+                "| ------ | ------ |",
+                "| ~/api~ | {{查看接口列表}} |",
+            ].filter(Boolean).map(item => {
+                return item
+                .replace(/~([^~]+)~/g, (_, v1) => '<span class="mark-color mark-set">' + v1 + '</span>')
+                .replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))
+                .replace(/:IDLabel:/g, ' {' + this.IDLabel + '}');
+            }).join("\n");
         },
     },
 }
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-info.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-info.vue
index 7cd53bd94..5422157d1 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-info.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-info.vue
@@ -1,26 +1,32 @@
 <template>
-    <div>
-        <p><b>{{$L("机器人详情")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-        <p>{{$L("保留消息时间")}}：<span class="mark-color">{{ msg.data.clear_day }}</span></p>
-        <p>{{$L("最后一次清理时间")}}：<span class="mark-color">{{ msg.data.clear_at || '-' }}</span></p>
-        <p>{{$L("Webhook地址")}}：<span class="mark-color">{{ msg.data.webhook_url || '-' }}</span></p>
-        <p>{{$L("Webhook请求次数")}}：<span class="mark-color">{{ msg.data.webhook_num }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{机器人详情}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+                "| {{保留消息时间}} | " + this.msg.data.clear_day + " |",
+                "| {{最后一次清理时间}} | " + this.msg.data.clear_at + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-list.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-list.vue
index da89e8c8f..0156ecac4 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-list.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-list.vue
@@ -1,22 +1,31 @@
 <template>
-    <div>
-        <p><b>{{$L("我的机器人")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p><b>{{$L("ID | 名称 | 清理时间 | Webhook")}}</b></p>
-        <p v-for="item in msg.data">{{ item.userid }} | {{ item.nickname }} | {{ item.clear_day }} | {{ item.webhook_url ? '✅' : '-' }}</p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{我的机器人}}",
+                "",
+                "| ID | {{名称}} | {{清理时间}} | Webhook |",
+                "| ------ | ------ | ------ | ------ |",
+                ...this.msg.data.map(item => {
+                    return "| " + item.userid + " | " + item.nickname + " | " + item.clear_day + " | " + (item.webhook_url ? '✅' : '-') + " |";
+                }),
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-newbot.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-newbot.vue
index 6a48eaade..ccb22df68 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-newbot.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-newbot.vue
@@ -1,22 +1,30 @@
 <template>
-    <div>
-        <p><b>{{$L("创建成功")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{创建成功}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-revoke.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-revoke.vue
index f0e155078..0c9c96ea6 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-revoke.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-revoke.vue
@@ -1,22 +1,30 @@
 <template>
-    <div>
-        <p><b>{{$L("撤销机器人Token令牌")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{撤销机器人Token令牌}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-setname.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-setname.vue
index 71410d8ba..5c12e0315 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-setname.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-setname.vue
@@ -1,22 +1,30 @@
 <template>
-    <div>
-        <p><b>{{$L("设置名称成功")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{设置名称成功}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-token.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-token.vue
index 9801a1f92..266c3b1ff 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-token.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-token.vue
@@ -1,23 +1,31 @@
 <template>
-    <div>
-        <p><b>{{$L("生成Token令牌")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-        <p>Token：<span class="mark-color">{{ msg.data.token }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{生成Token令牌}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| <span style='white-space:nowrap;'>{{机器人ID}}</span> | " + this.msg.data.userid + " |",
+                "| <span style='white-space:nowrap;'>{{机器人名称}}</span> | " + this.msg.data.nickname + " |",
+                "| Token | " + this.msg.data.token + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/js/pages/manage/components/DialogView/template/bot-webhook.vue b/resources/assets/js/pages/manage/components/DialogView/template/bot-webhook.vue
index 367563761..a46c617c7 100644
--- a/resources/assets/js/pages/manage/components/DialogView/template/bot-webhook.vue
+++ b/resources/assets/js/pages/manage/components/DialogView/template/bot-webhook.vue
@@ -1,23 +1,31 @@
 <template>
-    <div>
-        <p><b>{{$L("设置Webhook地址")}}</b></p>
-        <p>&nbsp;</p>
-
-        <p>{{$L("机器人ID")}}：<span class="mark-color">{{ msg.data.userid }}</span></p>
-        <p>{{$L("机器人名称")}}：<span class="mark-color">{{ msg.data.nickname }}</span></p>
-        <p>{{$L("Webhook地址")}}：<span class="mark-color">{{ msg.data.webhook_url }}</span></p>
-    </div>
+    <DialogMarkdown :text="content"/>
 </template>
 
 <script>
+import DialogMarkdown from "../../DialogMarkdown.vue";
+
 export default {
+    components: {DialogMarkdown},
     props: {
         msg: Object,
     },
     data() {
         return {};
     },
-    computed: {},
+    computed: {
+        content() {
+            return [
+                "### {{设置Webhook地址}}",
+                "",
+                "| {{属性}} | {{结果}} |",
+                "| ------ | ------ |",
+                "| {{机器人ID}} | " + this.msg.data.userid + " |",
+                "| {{机器人名称}} | " + this.msg.data.nickname + " |",
+                "| {{Webhook地址}} | " + this.msg.data.webhook_url + " |",
+            ].map(item => item.replace(/\{\{([^}]+)\}\}/g, (_, v1) => this.$L(v1))).join("\n");
+        },
+    },
     methods: {},
 }
 </script>
diff --git a/resources/assets/sass/pages/components/dialog-wrapper.scss b/resources/assets/sass/pages/components/dialog-wrapper.scss
index de5538ca6..90963ae8d 100644
--- a/resources/assets/sass/pages/components/dialog-wrapper.scss
+++ b/resources/assets/sass/pages/components/dialog-wrapper.scss
@@ -660,6 +660,8 @@
             }
 
             .dialog-view {
+                flex: 1;
+                min-width: 0;
                 display: flex;
                 flex-direction: column;
                 align-items: flex-start;