2023年4月1日 完善门户基本架子

src/views/site/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <a-card>
+  <div id="siteMain">
+    <!-- <a-card>
       <div>
         <h1>首页</h1>
       </div>
@@ -20,10 +21,54 @@
         <RouterLink to="/dashboard/analysis">跳转到首页</RouterLink>
       </div>
     </a-card>
+    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
+    <a-layout>
+      <a-layout-header>
+        <span class="topTitle">管理系统</span>
+        <span class="topRight">
+          <a-dropdown>
+            <span class="ant-dropdown-link topRightMenu" @click.prevent>
+              {{ userStore?.getUserInfo?.realname }}
+              <DownOutlined />
+            </span>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item>
+                  <!-- <a href="javascript:;">后台管理</a> -->
+                  <RouterLink to="/dashboard/analysis">后台管理</RouterLink>
+                </a-menu-item>
+                <a-menu-item>
+                  <a href="javascript:;" @click="userStore?.confirmLoginOut();">安全退出</a>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </span>
+      </a-layout-header>
+      <a-layout-content>
+        内容流区域
+      </a-layout-content>
+      <a-layout-footer>
+        <span class="footerLeft">TEL：0431-85099971</span>
+        <span class="footerRight">Copyright 东北师范大学教务处 2023</span>
+      </a-layout-footer>
+    </a-layout>
+  </div>
 </template>
 
 <script lang="ts" setup>
   import { ref, reactive, computed, onMounted } from 'vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import { useUserStore } from '/@/store/modules/user';
+
+  //用户相关
+  const userStore = useUserStore();
+
+  console.log(`🚀 -----------------------------------------------🚀`);
+  console.log(`🚀 ~ file: index.vue:66 ~ userStore:`, userStore);
+  console.log(`🚀 -----------------------------------------------🚀`);
+
+
   // reactive
   let list = reactive({ list: [] });
   //针对基础类型
@@ -45,3 +90,54 @@
     // list.list.push({ key: i.value });
   }
 </script>
+<style lang="less">
+#siteMain {
+  //最大宽度
+  max-width: 1100px;
+  //居中
+  margin: 0 auto;
+  .topTitle {
+    font-size: 1.5rem;
+  }
+  .topRight {
+    float: right;
+    .topRightMenu {
+      font-size: 1.1rem;
+    }
+  }
+  .footerRight {
+    float: right;
+  }
+
+  .ant-layout-header {
+    color: #fff;
+    background: #1ab394;
+  }
+  .ant-layout-footer {
+    line-height: 1.5;
+  }
+  .ant-layout-sider {
+    color: #fff;
+    line-height: 120px;
+    background: #3ba0e9;
+  }
+  .ant-layout-content {
+    min-height: 120px;
+    color: #000;
+    line-height: 120px;
+    background: #FFF
+  }
+}s
+/**暗黑模式特殊配色*/
+[data-theme='dark'] #siteMain {
+  .ant-layout-header, .ant-layout-footer {
+    background: #6aa0c7;
+  }
+  .ant-layout-content {
+    background: #107bcb;
+  }
+  .ant-layout-sider {
+    background: #3499ec;
+  }
+}
+</style>