Merge pull request #3042 from xinnan-tech/update-web-style

优化页面主体内容区域适配

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玩具，情感陪伴，聊天机器人，智能家居，车载机器人

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 {

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);

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

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);
+    };
+}
+

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);

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) {

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);

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);

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);

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);

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 {

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);

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);

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);

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);

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);

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);

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);

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 {

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);

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);