From fc85225fd5b8d4c866493a9bbe6ce3a0000e8f59 Mon Sep 17 00:00:00 2001
From: TOM88812 <ttangxs0808@163.com>
Date: Sun, 16 Feb 2025 23:13:08 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=97=A0=E6=B3=95=E6=BB=9A=E5=8A=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ZhiKongTaiWeb/src/App.vue                    | 27 +++++++++++++++++---
 ZhiKongTaiWeb/src/components/Main.vue        |  8 ++++++
 ZhiKongTaiWeb/src/components/RoleSetting.vue |  7 +++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/ZhiKongTaiWeb/src/App.vue b/ZhiKongTaiWeb/src/App.vue
index 7dbc3af7..52081e2b 100644
--- a/ZhiKongTaiWeb/src/App.vue
+++ b/ZhiKongTaiWeb/src/App.vue
@@ -24,17 +24,16 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  width: 100%;
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
 .app-content {
   flex: 1;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0; /* 允许内容区域收缩 */
 }
 
 /* 登录注册页面的布局 */
@@ -47,8 +46,28 @@ export default {
 /* 主要页面的布局 */
 .main-layout {
   flex: 1;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0; /* 允许内容区域收缩 */
+}
+
+/* 添加全局滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #999;
 }
 </style>
\ No newline at end of file
diff --git a/ZhiKongTaiWeb/src/components/Main.vue b/ZhiKongTaiWeb/src/components/Main.vue
index 6d81a77f..3a0ab876 100644
--- a/ZhiKongTaiWeb/src/components/Main.vue
+++ b/ZhiKongTaiWeb/src/components/Main.vue
@@ -21,6 +21,10 @@
           <button class="action-button github-button" @click="openGithubServer">
             <i class="icon-github"></i> Github服务端
           </button>
+
+          <button class="action-button github-button" @click="openGithubWeb">
+            <i class="icon-github"></i> Web客户端
+          </button>
           
           <button class="action-button control-panel-button" @click="enterPanel">
             <i class="icon-control-panel"></i> 控制台
@@ -49,6 +53,10 @@ const openGithubServer = () => {
   window.open('https://github.com/xinnan-tech/xiaozhi-esp32-server', '_blank');
 };
 
+const openGithubWeb = () => {
+  window.open('https://github.com/TOM88812/xiaozhi-web-client', '_blank');
+};
+
 const enterPanel = () => {
   router.push('/panel');
 };
diff --git a/ZhiKongTaiWeb/src/components/RoleSetting.vue b/ZhiKongTaiWeb/src/components/RoleSetting.vue
index 0f556e6c..d146ff26 100644
--- a/ZhiKongTaiWeb/src/components/RoleSetting.vue
+++ b/ZhiKongTaiWeb/src/components/RoleSetting.vue
@@ -283,7 +283,7 @@ const resetConfig = async () => {
 
 <style scoped>
 .app-container {
-  height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   background-color: #f5f7fa;
@@ -299,7 +299,9 @@ const resetConfig = async () => {
   max-width: 1000px;
   margin: 0 auto;
   padding: 16px 24px;
-  overflow: auto;
+  width: 100%;
+  overflow-y: auto;
+  height: calc(100vh - 120px); /* 减去头部和面包屑的高度 */
 }
 
 .page-title {
@@ -313,6 +315,7 @@ const resetConfig = async () => {
   border-radius: 4px;
   padding: 20px;
   box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  margin-bottom: 20px;
 }
 
 .form-group {