From 50079e7a966050eebefa89751ddc0ca0a2bfa99e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Fri, 15 Nov 2024 14:46:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9D=A2=E6=9D=BF=E5=85=B3=E4=BA=8E?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 napcat.webui/src/components/Dashboard.vue | 21 +++++--
 napcat.webui/src/components/QQLogin.vue   |  2 +-
 napcat.webui/src/css/style.css            |  6 +-
 napcat.webui/src/main.ts                  | 18 ++++++
 napcat.webui/src/pages/AboutUs.vue        | 67 ++++++++++++++++++++++-
 5 files changed, 104 insertions(+), 10 deletions(-)

diff --git a/napcat.webui/src/components/Dashboard.vue b/napcat.webui/src/components/Dashboard.vue
index ae567a49..a2afa213 100644
--- a/napcat.webui/src/components/Dashboard.vue
+++ b/napcat.webui/src/components/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <SidebarMenu :menuItems="menuItems" />
+  <div class="dashboard-container">
+    <SidebarMenu :menuItems="menuItems" class="sidebar-menu" />
     <div class="content">
       <router-view />
     </div>
@@ -29,14 +29,27 @@ export default {
 </script>
 
 <style scoped>
+.dashboard-container {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+}
+
+.sidebar-menu {
+  position: relative;
+  z-index: 2;
+}
+
 .content {
-  margin-left: 200px; /* 根据侧边栏宽度调整 */
+  flex: 1;
   padding: 20px;
+  overflow: auto;
+  position: relative;
+  z-index: 1;
 }
 
 @media (max-width: 768px) {
   .content {
-    margin-left: 0; /* 移动端侧边栏收起 */
     padding: 10px;
   }
 }
diff --git a/napcat.webui/src/components/QQLogin.vue b/napcat.webui/src/components/QQLogin.vue
index 3a6ad5b6..4e6517c1 100644
--- a/napcat.webui/src/components/QQLogin.vue
+++ b/napcat.webui/src/components/QQLogin.vue
@@ -49,7 +49,7 @@ const selectAccount = async (accountName) => {
     //const { result, errMsg } = await SetQuickLogin(accountName, localStorage.getItem('auth'));
     if (true) {
         MessagePlugin.success("登录成功即将跳转");
-        await router.push({ path: '/dashboard' });
+        await router.push({ path: '/dashboard/basic-info' });
     } else {
         MessagePlugin.error("登录失败," + errMsg);
     }
diff --git a/napcat.webui/src/css/style.css b/napcat.webui/src/css/style.css
index 9997725c..6305f260 100644
--- a/napcat.webui/src/css/style.css
+++ b/napcat.webui/src/css/style.css
@@ -62,9 +62,9 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  height: 100%;
+  width: 100%;
+  margin: 0;
   text-align: center;
 }
 
diff --git a/napcat.webui/src/main.ts b/napcat.webui/src/main.ts
index 7112cef7..b9d312a2 100644
--- a/napcat.webui/src/main.ts
+++ b/napcat.webui/src/main.ts
@@ -11,6 +11,15 @@ import {
     MenuItem as TMenuItem,
     Icon as TIcon,
     Submenu as TSubmenu,
+    Col as TCol,
+    Row as TRow,
+    Card as TCard,
+    Divider as TDivider,
+    Link as TLink,
+    List as TList,
+    Alert as TAlert,
+    Tag as TTag,
+    ListItem as TListItem,
 
 } from 'tdesign-vue-next';
 import { router } from './router';
@@ -27,4 +36,13 @@ app.use(TMenu);
 app.use(TMenuItem);
 app.use(TIcon);
 app.use(TSubmenu);
+app.use(TCol);
+app.use(TRow);
+app.use(TCard);
+app.use(TDivider);
+app.use(TLink);
+app.use(TList);
+app.use(TAlert);
+app.use(TTag);
+app.use(TListItem);
 app.mount('#app');
\ No newline at end of file
diff --git a/napcat.webui/src/pages/AboutUs.vue b/napcat.webui/src/pages/AboutUs.vue
index 0dcd1b7a..36d0eaca 100644
--- a/napcat.webui/src/pages/AboutUs.vue
+++ b/napcat.webui/src/pages/AboutUs.vue
@@ -1,6 +1,69 @@
 <template>
     <div class="about-us">
-        <h1>面板关于信息</h1>
-        <p>这里显示面板的关于信息。</p>
+        <div>
+            <t-divider content="面板关于信息" align="left" />
+            <t-alert theme="success" message="NapCat.WebUi is running" />
+
+            <t-list class="list">
+                <t-list-item class="list-item">
+                    <span class="item-label">开发人员:</span>
+                    <span class="item-content"><t-link href="mailto:nanaeonn@outlook.com">Mlikiowa</t-link></span>
+                </t-list-item>
+                <t-list-item class="list-item">
+                    <span class="item-label">版本信息:</span>
+                    <span class="item-content">
+                        <t-tag class="tag-item" theme="success"> WebUi: 1.0.0 </t-tag>
+                        <t-tag class="tag-item" theme="success"> NapCat: 1.0.0 </t-tag>
+                        <t-tag class="tag-item" theme="success"> Tdesign: 1.0.0 </t-tag>
+                    </span>
+                </t-list-item>
+            </t-list>
+        </div>
     </div>
 </template>
+
+<script>
+export default {
+    methods: {
+        joinQQGroup() {
+            // 加入QQ群的逻辑
+            window.open('https://jq.qq.com/?_wv=1027&k=123456789', '_blank');
+        }
+    }
+}
+</script>
+
+<style scoped>
+.about-us {
+    padding: 20px;
+    text-align: left;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+}
+
+.list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.item-label {
+    flex: 1;
+    font-weight: bold;
+}
+
+.item-content {
+    flex: 2;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end; /* 添加这一行 */
+}
+
+.tag-item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+</style>
\ No newline at end of file