完成流程

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 []
+const currentMenus = computed(() => {
-    return routes.filter((s)=>{
+    // 判断是否有登录数据
+    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">
+            <div class="app-site-info">营养计算器</div>
-                <router-link :to="(r.path||'/')">{{r.meta?.title}}</router-link>
+            <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>

src/pages/result.vue

@@ -1,3 +1,3 @@
 <template>
-    <h1>输出计算</h1>
+    <p>输出计算</p>
 </template>