From e8c0325526bf679cbd2449d2b27f3ac09a01c30b Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Mon, 8 Jan 2024 23:08:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Layout.vue | 83 +++++++++++++++++++++++++++++++++++++++-----
 src/pages/result.vue |  4 +--
 2 files changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/pages/Layout.vue b/src/pages/Layout.vue
index ef97949..232c7fe 100644
--- a/src/pages/Layout.vue
+++ b/src/pages/Layout.vue
@@ -2,10 +2,14 @@
 import {routes} from "../router.ts";
 import {useUserStore} from "../service/user-store.ts";
 import {computed} from "vue";
+import {Dropdown, DropdownItem, DropdownMenu, Icon} from "view-ui-plus";
+// 获取用户数据
 const store = useUserStore()
-const currentMenus = computed(()=>{
-    if(!store.userInfo) return []
-    return routes.filter((s)=>{
+// 获取当前用户能够访问的菜单
+const currentMenus = computed(() => {
+    // 判断是否有登录数据
+    if (!store.userInfo) return []
+    return routes.filter((s) => {
         return !s.meta || !s.meta['role'] || store.userInfo?.role == s.meta.role;
     })
 })
@@ -13,14 +17,77 @@ const currentMenus = computed(()=>{
 
 <template>
     <div class="layout">
-        <h1>12312</h1>
+        <!-- 左侧菜单 -->
         <div class="menu">
-            <div v-for="r in currentMenus">
-                <router-link :to="(r.path||'/')">{{r.meta?.title}}</router-link>
+            <div class="app-site-info">营养计算器</div>
+            <div class="menu-link" v-for="r in currentMenus">
+                <router-link :to="(r.path||'/')">{{ r.meta?.title }}</router-link>
             </div>
         </div>
-        <div class="content">
-            <router-view />
+        <!-- 右侧内容 -->
+        <div class="app-main-container">
+            <div class="header">
+                <h1 class="app-name">营养计算器管理后台</h1>
+                <div class="current-userinfo">
+                    <Dropdown>
+                        <a href="javascript:void(0)">
+                            下拉菜单  <Icon type="ios-arrow-down"></Icon>
+                        </a>
+                        <template #list>
+                            <DropdownMenu>
+                                <DropdownItem>驴打滚</DropdownItem>
+                                <DropdownItem>炸酱面</DropdownItem>
+                                <DropdownItem @click="store.logout()">退出登录</DropdownItem>
+                            </DropdownMenu>
+                        </template>
+                    </Dropdown>
+                </div>
+            </div>
+            <div class="app-content">
+                <router-view/>
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+.layout{
+    height: 100vh;
+    display: flex;
+}
+.app-site-info{
+    color:#fff;
+    line-height: 80px;
+}
+.menu{
+    background: #2ec7a5;
+    text-align: center;
+}
+.menu-link{
+    a{
+        padding: 20px;
+        display: block;
+        color:#fff;
+        &.router-link-exact-active{
+            background: #00ab99;
+        }
+    }
+}
+.app-main-container{
+    padding:20px;
+    overflow: auto;
+    background: #f0f2f0;
+    flex: 1;
+    .header{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+}
+.app-content{
+    background: #fff;
+    border-radius: 5px;
+    padding: 10px;
+}
+</style>
diff --git a/src/pages/result.vue b/src/pages/result.vue
index 1e86ff5..39428d4 100644
--- a/src/pages/result.vue
+++ b/src/pages/result.vue
@@ -1,3 +1,3 @@
 <template>
-    <h1>输出计算</h1>
-</template>
\ No newline at end of file
+    <p>输出计算</p>
+</template>