ADD file via upload

HomeView.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="containner">
+    <div class="common-layout">
+      <el-container>
+        <el-aside>
+          <el-row class="tac">
+            <el-col :span="24">
+              <LeftMenu></LeftMenu>
+            </el-col>
+          </el-row>
+        </el-aside>
+        <el-container>
+          <el-header class="userHeader">
+            <div>
+              <div class="userInfo">
+                <el-avatar :src="avatarimg" />
+                <label>{{ user.name }}</label>
+              </div>
+            </div>
+            <div style="height: 100%; padding-left: 20px">
+              <el-icon class="logout"
+                ><el-tooltip content="退出登录" placement="bottom" effect="dark">
+                  <img @click="exit" style="cursor: pointer" src="/img/exit.png" />
+                </el-tooltip>
+              </el-icon>
+            </div>
+          </el-header>
+          <el-main>
+            <RouterView></RouterView>
+          </el-main>
+        </el-container>
+      </el-container>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import router from '@/router'
+import LeftMenu from '@/components/home/LeftMenu.vue'
+import { ElMessage } from 'element-plus'
+import { onBeforeMount, ref } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+const user = ref()
+const avatarimg = '/avatar/1.jpg'
+
+const exit = () => {
+  ElMessage({
+    message: '退出成功',
+    type: 'success',
+    duration: 1000
+  })
+  router.replace({
+    name: 'loginView'
+  })
+}
+onBeforeMount(() => {
+  const userStore = useUserStore()
+  user.value = userStore.userInfo
+})
+</script>
+
+<style scoped lang="scss">
+* {
+  overflow: hidden;
+}
+.common-layout {
+  height: 100vh;
+  width: 100vw;
+}
+span {
+  font-size: large;
+}
+.el-aside {
+  width: var(--el-menu--collapse-width);
+  background-color: #545c64;
+}
+.el-header {
+  background-color: #6a737d;
+  border-bottom: solid;
+  border-bottom-width: 1px;
+  display: flex;
+  align-items: center;
+  height: 70px;
+  padding: 0px;
+}
+label {
+  max-width: 100px; /* 最大宽度为100px */
+  overflow: hidden;
+  white-space: nowrap; /* 确保文本不换行 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+  color: #f5f5f5;
+}
+.userHeader {
+  display: flex;
+  justify-content: flex-end;
+}
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.logout {
+  height: 100%;
+  width: 50px;
+}
+.el-main {
+  --el-main-padding: 0;
+}
+.el-container {
+  height: 100%;
+}
+</style>