From 3aecb99f70431652eed37fba4c0191ed75e19a66 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Fri, 20 Mar 2026 16:21:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E8=AE=B0=E5=BD=95=E6=92=AD=E6=94=BE=E9=9F=B3=E9=A2=91=E9=87=8D?=
 =?UTF-8?q?=E5=8F=A0=E6=92=AD=E6=94=BE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ChatHistoryDialog.vue      | 12 +++++---
 main/manager-web/src/store/index.js           |  1 -
 main/manager-web/src/utils/index.js           | 30 +++++++++++++++++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/main/manager-web/src/components/ChatHistoryDialog.vue b/main/manager-web/src/components/ChatHistoryDialog.vue
index f44c4de7..1af1b151 100644
--- a/main/manager-web/src/components/ChatHistoryDialog.vue
+++ b/main/manager-web/src/components/ChatHistoryDialog.vue
@@ -49,6 +49,7 @@
 </template>
 
 <script>
+import { debounce } from '@/utils'
 import Api from '@/apis/api';
 
 export default {
@@ -259,7 +260,7 @@ export default {
             }
             return 'el-icon-video-play';
         },
-        playAudio(message) {
+        playAudio: debounce(function(message) {
             if (this.playingAudioId === message.audioId) {
                 // 如果正在播放当前音频，则停止播放
                 if (this.audioElement) {
@@ -280,9 +281,12 @@ export default {
             this.playingAudioId = message.audioId;
             Api.agent.getAudioId(message.audioId, (res) => {
                 if (res.data && res.data.data) {
+                    if (!this.audioElement) {
+                        this.audioElement = new Audio();
+                    }
+                    
                     // 使用获取到的下载ID播放音频
-                    this.audioElement = new Audio(Api.getServiceUrl() + `/agent/play/${res.data.data}`);
-
+                    this.audioElement.src = Api.getServiceUrl() + `/agent/play/${res.data.data}`;
                     this.audioElement.onended = () => {
                         this.playingAudioId = null;
                         this.audioElement = null;
@@ -291,7 +295,7 @@ export default {
                     this.audioElement.play();
                 }
             });
-        },
+        }, 300),
         getUserAvatar(sessionId) {
             // 从 sessionId 中提取所有数字
             const numbers = sessionId.match(/\d+/g);
diff --git a/main/manager-web/src/store/index.js b/main/manager-web/src/store/index.js
index 271c5827..95eaa014 100644
--- a/main/manager-web/src/store/index.js
+++ b/main/manager-web/src/store/index.js
@@ -58,7 +58,6 @@ export default new Vuex.Store({
       return new Promise((resolve) => {
         commit('clearAuth')
         goToPage(Constant.PAGE.LOGIN, true);
-        window.location.reload(); // 彻底重置状态
       })
     },
     // 添加获取公共配置的 action
diff --git a/main/manager-web/src/utils/index.js b/main/manager-web/src/utils/index.js
index 638ee8fc..dfeb6ac8 100755
--- a/main/manager-web/src/utils/index.js
+++ b/main/manager-web/src/utils/index.js
@@ -257,3 +257,33 @@ export function sm2Decrypt(privateKey, cipherText) {
     return sm2.doDecrypt(dataWithoutPrefix, privateKey, 1);
 }
 
+/**
+ * 防抖函数
+ * @param {Function} fn 要防抖的函数
+ * @param {number} delay 延迟时间（毫秒），默认500ms
+ * @param {boolean} immediate 是否立即执行，默认false
+ * @returns {Function} 防抖处理后的函数
+ */
+export function debounce(fn, delay = 500, immediate = false) {
+    let timer = null;
+    
+    return function (...args) {
+        const context = this;
+        
+        if (timer) {
+            clearTimeout(timer);
+        }
+        
+        if (immediate && !timer) {
+            fn.apply(context, args);
+        }
+        
+        timer = setTimeout(() => {
+            if (!immediate) {
+                fn.apply(context, args);
+            }
+            timer = null;
+        }, delay);
+    };
+}
+

From 4d8279d916808bc82275b9ede262baf0ff77662a Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Wed, 25 Mar 2026 09:26:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?update:=20=E4=BC=98=E5=8C=96=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=BB=E4=BD=93=E5=86=85=E5=AE=B9=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/.env                          |  2 +-
 main/manager-web/src/App.vue                   | 11 +++++------
 .../src/views/AgentTemplateManagement.vue      |  7 +++----
 .../manager-web/src/views/DeviceManagement.vue | 18 ++++++++++--------
 main/manager-web/src/views/DictManagement.vue  |  5 +++--
 .../src/views/FeatureManagement.vue            |  6 ++----
 .../src/views/KnowledgeBaseManagement.vue      |  7 +++----
 .../src/views/KnowledgeFileUpload.vue          |  7 +++----
 main/manager-web/src/views/ModelConfig.vue     |  6 +++---
 main/manager-web/src/views/OtaManagement.vue   |  7 +++----
 .../manager-web/src/views/ParamsManagement.vue |  7 +++----
 .../src/views/ProviderManagement.vue           |  7 +++----
 .../src/views/ServerSideManager.vue            |  7 +++----
 .../src/views/TemplateQuickConfig.vue          | 12 ++++++++----
 main/manager-web/src/views/UserManagement.vue  |  7 +++----
 .../src/views/VoiceCloneManagement.vue         |  7 +++----
 main/manager-web/src/views/VoicePrint.vue      | 10 ++++------
 .../src/views/VoiceResourceManagement.vue      |  7 +++----
 main/manager-web/src/views/roleConfig.vue      | 12 ++++++++----
 19 files changed, 74 insertions(+), 78 deletions(-)

diff --git a/main/manager-web/.env b/main/manager-web/.env
index 3fd5202e..d234c067 100644
--- a/main/manager-web/.env
+++ b/main/manager-web/.env
@@ -1,3 +1,3 @@
 VUE_APP_TITLE=智控台
-VUE_APP_DESCRIPTION=是由华南理工大学刘思源教授团队研发的智能终端软硬件体系后端服务系统，专为xiaozhi-esp32开源硬件打造，具备多协议兼容、声纹识别、知识库管理等核心能力。
+VUE_APP_DESCRIPTION=小智后端服务(xiaozhi-server)是由华南理工大学刘思源教授团队主导研发的智能终端软硬件体系后端服务系统，专为xiaozhi-esp32开源硬件打造，具备多协议兼容、声纹识别、知识库管理等核心能力。
 VUE_APP_KEYWORDS=xiaozhi-server，小智服务端，智控台，AI硬件，智能硬件，AI玩具，情感陪伴，聊天机器人，智能家居，车载机器人
diff --git a/main/manager-web/src/App.vue b/main/manager-web/src/App.vue
index bf4c7a45..f101e155 100644
--- a/main/manager-web/src/App.vue
+++ b/main/manager-web/src/App.vue
@@ -28,17 +28,16 @@ nav {
 }
 
 .copyright {
-  text-align: center;
+  padding: 0 !important;
   color: rgb(0, 0, 0);
   font-size: 12px;
   font-weight: 400;
   margin-top: auto;
-  padding: 30px 0 20px;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
   width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .el-message {
diff --git a/main/manager-web/src/views/AgentTemplateManagement.vue b/main/manager-web/src/views/AgentTemplateManagement.vue
index ef935f0a..22d1d8fc 100644
--- a/main/manager-web/src/views/AgentTemplateManagement.vue
+++ b/main/manager-web/src/views/AgentTemplateManagement.vue
@@ -483,11 +483,10 @@ export default {
 
 /* 主容器样式 */
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询72px
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue
index d6aeaeb0..124d7101 100644
--- a/main/manager-web/src/views/DeviceManagement.vue
+++ b/main/manager-web/src/views/DeviceManagement.vue
@@ -119,7 +119,9 @@
       @refresh="fetchBindDevices(currentAgentId)" />
     <ManualAddDeviceDialog :visible.sync="manualAddDeviceDialogVisible" :agent-id="currentAgentId"
       @refresh="fetchBindDevices(currentAgentId)" />
-
+    <el-footer>
+      <version-footer />
+    </el-footer>
   </div>
 </template>
 
@@ -128,12 +130,14 @@ import Api from '@/apis/api';
 import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 import ManualAddDeviceDialog from "@/components/ManualAddDeviceDialog.vue";
+import VersionFooter from "@/components/VersionFooter.vue";
 
 export default {
   components: {
     HeaderBar,
     AddDeviceDialog,
-    ManualAddDeviceDialog
+    ManualAddDeviceDialog,
+    VersionFooter
   },
   data() {
     return {
@@ -504,11 +508,9 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
@@ -645,7 +647,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
-  padding-bottom: 10px;
+  /* padding-bottom: 10px; */
 }
 
 
@@ -807,7 +809,7 @@ export default {
   flex: 1;
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 40vh);
+  /* max-height: calc(100vh - 40vh); */
 }
 
 :deep(.el-table__body-wrapper) {
diff --git a/main/manager-web/src/views/DictManagement.vue b/main/manager-web/src/views/DictManagement.vue
index e7acdbb8..179bfeb3 100644
--- a/main/manager-web/src/views/DictManagement.vue
+++ b/main/manager-web/src/views/DictManagement.vue
@@ -461,9 +461,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/FeatureManagement.vue b/main/manager-web/src/views/FeatureManagement.vue
index 1b7dd1a6..d6272a50 100644
--- a/main/manager-web/src/views/FeatureManagement.vue
+++ b/main/manager-web/src/views/FeatureManagement.vue
@@ -422,11 +422,9 @@ export default {
 }
 
 .main-wrapper {
-  margin: 0 22px 5px 22px;
+  height: calc(100vh - 63px - 35px - 58px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/KnowledgeBaseManagement.vue b/main/manager-web/src/views/KnowledgeBaseManagement.vue
index 0065c9c2..7160d61e 100644
--- a/main/manager-web/src/views/KnowledgeBaseManagement.vue
+++ b/main/manager-web/src/views/KnowledgeBaseManagement.vue
@@ -472,11 +472,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/KnowledgeFileUpload.vue b/main/manager-web/src/views/KnowledgeFileUpload.vue
index 37fd7e27..d9d1a870 100644
--- a/main/manager-web/src/views/KnowledgeFileUpload.vue
+++ b/main/manager-web/src/views/KnowledgeFileUpload.vue
@@ -1127,11 +1127,10 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询58px
+  height: calc(100vh - 63px - 35px - 58px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index 28dd48b2..05c6add6 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -660,9 +660,10 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询72px
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
   border-radius: 15px;
-  height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
@@ -687,7 +688,6 @@ export default {
   height: 100%;
   border-radius: 15px;
   background: transparent;
-  border: 1px solid #fff;
 }
 
 .nav-panel {
diff --git a/main/manager-web/src/views/OtaManagement.vue b/main/manager-web/src/views/OtaManagement.vue
index 24bad3ce..66b82e52 100644
--- a/main/manager-web/src/views/OtaManagement.vue
+++ b/main/manager-web/src/views/OtaManagement.vue
@@ -422,11 +422,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/ParamsManagement.vue b/main/manager-web/src/views/ParamsManagement.vue
index 3b181f41..dcd1dc39 100644
--- a/main/manager-web/src/views/ParamsManagement.vue
+++ b/main/manager-web/src/views/ParamsManagement.vue
@@ -381,11 +381,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/ProviderManagement.vue b/main/manager-web/src/views/ProviderManagement.vue
index 830d2867..8827c494 100644
--- a/main/manager-web/src/views/ProviderManagement.vue
+++ b/main/manager-web/src/views/ProviderManagement.vue
@@ -460,11 +460,10 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询72px
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/ServerSideManager.vue b/main/manager-web/src/views/ServerSideManager.vue
index 1c9fdde8..7fb45652 100644
--- a/main/manager-web/src/views/ServerSideManager.vue
+++ b/main/manager-web/src/views/ServerSideManager.vue
@@ -189,11 +189,10 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询58px
+  height: calc(100vh - 63px - 35px - 58px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/TemplateQuickConfig.vue b/main/manager-web/src/views/TemplateQuickConfig.vue
index 024e120f..d9d644aa 100644
--- a/main/manager-web/src/views/TemplateQuickConfig.vue
+++ b/main/manager-web/src/views/TemplateQuickConfig.vue
@@ -53,12 +53,16 @@
         </div>
       </div>
     </div>
+    <el-footer>
+      <version-footer />
+    </el-footer>
   </div>
 </template>
 
 <script>
 import HeaderBar from "@/components/HeaderBar.vue";
 import agentApi from '@/apis/module/agent';
+import VersionFooter from "@/components/VersionFooter.vue";
 
 // 默认模型配置常量
 const DEFAULT_MODEL_CONFIG = {
@@ -73,7 +77,7 @@ const DEFAULT_MODEL_CONFIG = {
 
 export default {
   name: 'TemplateQuickConfig',
-  components: { HeaderBar },
+  components: { HeaderBar, VersionFooter },
   data() {
     return {
       form: {
@@ -276,7 +280,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5vh 24px;
+  padding: 16px 24px;
 }
 
 .page-title {
@@ -286,9 +290,9 @@ export default {
 }
 
 .main-wrapper {
-  margin: 1vh 22px;
+  height: calc(100vh - 63px - 35px - 60px);
+  margin: 0 22px;
   border-radius: 15px;
-  height: calc(100vh - 24vh);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index fd7b3fbc..2a303824 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -381,11 +381,10 @@ export default {
 }
 
 .main-wrapper {
-  margin: 5px 22px;
+  // 顶部 63px 底部 35px 查询72px
+  height: calc(100vh - 63px - 35px - 72px);
+  margin: 0 22px;
   border-radius: 15px;
-  min-height: calc(100vh - 24vh);
-  height: auto;
-  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/VoiceCloneManagement.vue b/main/manager-web/src/views/VoiceCloneManagement.vue
index e32f90a4..5baba939 100644
--- a/main/manager-web/src/views/VoiceCloneManagement.vue
+++ b/main/manager-web/src/views/VoiceCloneManagement.vue
@@ -511,11 +511,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/VoicePrint.vue b/main/manager-web/src/views/VoicePrint.vue
index 43f818a9..4f9fd4f9 100644
--- a/main/manager-web/src/views/VoicePrint.vue
+++ b/main/manager-web/src/views/VoicePrint.vue
@@ -202,11 +202,9 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    height: calc(100vh - 63px - 35px - 60px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
@@ -285,7 +283,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     margin-top: 10px;
-    padding-bottom: 10px;
+    // padding-bottom: 10px;
 }
 
 .ctrl_btn {
@@ -533,7 +531,7 @@ export default {
 }
 
 .el-table {
-    --table-max-height: calc(100vh - 40vh);
+    // --table-max-height: calc(100vh - 40vh);
     max-height: var(--table-max-height);
 
     .el-table__body-wrapper {
diff --git a/main/manager-web/src/views/VoiceResourceManagement.vue b/main/manager-web/src/views/VoiceResourceManagement.vue
index caf2e40f..50ee99eb 100644
--- a/main/manager-web/src/views/VoiceResourceManagement.vue
+++ b/main/manager-web/src/views/VoiceResourceManagement.vue
@@ -363,11 +363,10 @@ export default {
 }
 
 .main-wrapper {
-    margin: 5px 22px;
+    // 顶部 63px 底部 35px 查询72px
+    height: calc(100vh - 63px - 35px - 72px);
+    margin: 0 22px;
     border-radius: 15px;
-    min-height: calc(100vh - 24vh);
-    height: auto;
-    max-height: 80vh;
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
     position: relative;
     background: rgba(237, 242, 255, 0.5);
diff --git a/main/manager-web/src/views/roleConfig.vue b/main/manager-web/src/views/roleConfig.vue
index 85ed9d77..467022ab 100644
--- a/main/manager-web/src/views/roleConfig.vue
+++ b/main/manager-web/src/views/roleConfig.vue
@@ -355,6 +355,9 @@
       :settings="ttsSettings"
       @save="handleTtsSettingsSave"
     />
+    <el-footer>
+      <version-footer />
+    </el-footer>
   </div>
 </template>
 
@@ -368,10 +371,11 @@ import TtsAdvancedSettings from "@/components/TtsAdvancedSettings.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 import i18n from "@/i18n";
 import featureManager from "@/utils/featureManager"; 
+import VersionFooter from "@/components/VersionFooter.vue";
 
 export default {
   name: "RoleConfigPage",
-  components: { HeaderBar, FunctionDialog, ContextProviderDialog, TtsAdvancedSettings },
+  components: { HeaderBar, FunctionDialog, ContextProviderDialog, TtsAdvancedSettings, VersionFooter },
   data() {
     return {
       showContextProviderDialog: false,
@@ -1291,7 +1295,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5vh 24px;
+  padding: 16px 24px;
 }
 
 .page-title {
@@ -1301,9 +1305,9 @@ export default {
 }
 
 .main-wrapper {
-  margin: 1vh 22px;
+  height: calc(100vh - 63px - 35px - 60px);
+  margin: 0 22px;
   border-radius: 15px;
-  height: calc(100vh - 24vh);
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);