fix: 面板关于信息

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

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

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

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

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>