manager 升级到vue3

manager/src/views/Main.vue

@@ -3,155 +3,126 @@
 </style>
 <template>
   <div class="main">
-    <!-- 左侧菜单 -->
     <div class="sidebar-menu-con menu-bar">
-      <div class="logo-con">
-        <!-- <img src="../assets/logo.png" key="max-logo" /> -->
-        <img :src="domainLogo" key="max-logo" />
-      </div>
-      <shrinkable-menu></shrinkable-menu>
+      <shrinkable-menu />
     </div>
-    <!-- 顶部标题栏主体 -->
-    <div class="main-header-con" :style="{ height: setting.isUseTabsRouter ? '100px' : '60px' }">
+    <div class="main-header-con" :style="{ height: '60px' }">
       <div class="main-header">
+        <div class="header-logo-con">
+          <img :src="domainLogo" key="max-logo" />
+        </div>
         <div class="header-avator-con">
-          <!-- 左侧栏 -->
-          <div>
-
-          </div>
-          <div class="flex flex-a-c user-module">
-            <!-- 通知消息 -->
-            <message-tip v-if="tipsMessage" :res="tipsMessage"></message-tip>
-            <!-- 用户头像 -->
-            <div class="user-dropdown-menu-con">
-              <Row
+          <div class="flex flex-a-c user-module" style="height: 100%">
+            <message-tip v-if="tipsMessage" :res="tipsMessage" />
+            <div class="user-dropdown-menu-con" style="margin-left: 24px; display: flex; align-items: center; height: 100%">
+              <el-row
                 type="flex"
                 justify="end"
                 align="middle"
                 class="user-dropdown-innercon"
               >
-                <ul class="nav-list">
-                  <li class="nav-item " @click="handleClickSetting">
-                    <Tooltip content="设置">
-                      <Icon size="16" type="md-settings" />
-                    </Tooltip>
-                  </li>
-                </ul>
-                <Dropdown
-                  transfer
-                  trigger="hover"
-                  @on-click="handleClickUserDropdown"
-                >
+                <el-dropdown trigger="hover" @command="handleClickUserDropdown">
                   <div class="dropList">
                     <span class="main-user-name">{{ userInfo.nickName }}</span>
-                    <Avatar
-                      icon="ios-person"
+                    <el-avatar
+                      :size="32"
                       :src="avatarPath"
                       style="background: #fff; margin-left: 10px"
-                    ></Avatar>
+                    >
+                      <el-icon><UserFilled /></el-icon>
+                    </el-avatar>
                   </div>
-                  <DropdownMenu slot="list">
-                    <DropdownItem name="personalCenter">{{
-                      $t("userCenter")
-                    }}</DropdownItem>
-                    <DropdownItem name="changePass">{{
-                      $t("changePass")
-                    }}</DropdownItem>
-                    <DropdownItem name="loginOut" divided>{{
-                      $t("logout")
-                    }}</DropdownItem>
-                  </DropdownMenu>
-                </Dropdown>
-              </Row>
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item command="personalCenter">
+                        {{ $t("userCenter") }}
+                      </el-dropdown-item>
+                      <el-dropdown-item command="changePass">
+                        {{ $t("changePass") }}
+                      </el-dropdown-item>
+                      <el-dropdown-item divided command="loginOut">
+                        {{ $t("logout") }}
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+              </el-row>
             </div>
           </div>
         </div>
       </div>
-      <!-- 已打开的页面标签 -->
-      <div class="tags-con"  v-if="setting.isUseTabsRouter">
-        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
-      </div>
     </div>
-    <div class="single-page-con"  :style="{ 'top': setting.isUseTabsRouter ? '100px' : '60px', height: setting.isUseTabsRouter ? 'calc(100% - 110px)' : 'calc(100% - 70px)' }">
+    <div class="breadcrumb-bar" v-if="setting.isUseTabsRouter">
+      <page-breadcrumb />
+    </div>
+    <div
+      class="single-page-con"
+      :style="{
+        top: setting.isUseTabsRouter ? '104px' : '60px',
+        height: setting.isUseTabsRouter ? 'calc(100% - 114px)' : 'calc(100% - 70px)',
+      }"
+    >
       <div class="single-page">
-        <!-- <keep-alive :include="cachePage"> -->
-        <router-view></router-view>
-        <!-- </keep-alive> -->
+        <router-view v-slot="{ Component }">
+          <component :is="Component" v-if="Component" :key="$route.fullPath" />
+        </router-view>
       </div>
     </div>
-    <!-- 全局加载动画 -->
     <circleLoading class="loading-position" v-show="loading" />
-    <!-- 右侧抽屉配置 -->
-    <configDrawer ref="config"/>
   </div>
 </template>
 
 <script>
+import { UserFilled } from "@element-plus/icons-vue";
 import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu.vue";
-import tagsPageOpened from "./main-parts/tags-page-opened.vue";
+import pageBreadcrumb from "./main-parts/page-breadcrumb.vue";
 import messageTip from "./main-parts/message-tip.vue";
 import circleLoading from "@/components/lili/circle-loading.vue";
-import configDrawer from "@/components/lili/config-drawer.vue";
 import Cookies from "js-cookie";
 import util from "@/libs/util.js";
 import { getNoticePage, logout } from "@/api/index";
-import { getBaseSite } from "@/api/common";
 
-var client;
 const config = require("@/config/index.js");
+
 export default {
   components: {
+    UserFilled,
     shrinkableMenu,
-    tagsPageOpened,
+    pageBreadcrumb,
     messageTip,
     circleLoading,
-    configDrawer
   },
   data() {
     return {
       config,
-      sliceNum: 5, // 展示nav数量
-      userInfo: "", // 用户信息
-      tipsMessage: "", // 通知消息
+      sliceNum: 5,
+      userInfo: "",
+      tipsMessage: "",
+      defaultLogo: require("@/assets/logo.png"),
       domainLogo: "",
     };
   },
   computed: {
-    setting(){
-      let data = this.$store.state.setting
-
-      return data.setting
+    setting() {
+      return this.$store.state.setting.setting;
     },
     loading() {
       return this.$store.state.app.loading;
     },
     pageTagsList() {
-      return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
+      return this.$store.state.app.pageOpenedList;
     },
     avatarPath() {
       return localStorage.avatorImgPath;
     },
-    lang() {
-      return this.$store.state.app.lang;
-    },
   },
-
   methods: {
-    handleClickSetting() {
-      this.$refs.config.open();
-    },
     init() {
-      // 菜单初始化
-      let userInfo = JSON.parse(Cookies.get("userInfoManager"));
-
+      const userInfo = JSON.parse(Cookies.get("userInfoManager"));
       this.userInfo = userInfo;
       this.checkTag(this.$route.name);
-      let currWidth = document.body.clientWidth;
-      if (currWidth <= 1200) {
-        this.sliceNum = 2;
-      }
-      this.domainLogo = localStorage.getItem("icon");
-      let link =
+      this.domainLogo = localStorage.getItem("icon") || this.defaultLogo;
+      const link =
         document.querySelector("link[rel*='icon']") ||
         document.createElement("link");
       link.type = "image/x-icon";
@@ -159,35 +130,22 @@ export default {
       link.rel = "shortcut icon";
       document.getElementsByTagName("head")[0].appendChild(link);
       window.document.title = localStorage.getItem("title") + " - 运营后台";
-      // 读取未读消息数
       getNoticePage({}).then((res) => {
         if (res.success) {
           this.tipsMessage = res.result;
-
           this.$store.state.notices = res.result;
         }
       });
     },
-
-    //用户头像下方抽屉点击
     handleClickUserDropdown(name) {
-      //个人中心
       if (name === "personalCenter") {
         util.openNewPage(this, "personal-center");
-        this.$router.push({
-          name: "personal-center",
-        });
-      }
-      //修改密码
-      else if (name === "changePass") {
+        this.$router.push({ name: "personal-center" });
+      } else if (name === "changePass") {
         util.openNewPage(this, "change-password");
-        this.$router.push({
-          name: "change_password",
-        });
-      }
-      // 退出登录
-      else if (name === "loginOut") {
-        logout().then((res) => {
+        this.$router.push({ name: "change_password" });
+      } else if (name === "loginOut") {
+        logout().then(() => {
           this.$store.commit("logout", this);
           this.$store.commit("setAdded", false);
           this.setStore("accessToken", "");
@@ -196,15 +154,9 @@ export default {
         });
       }
     },
-    //切换标签
     checkTag(name) {
-      let openpageHasTag = this.pageTagsList.some((item) => {
-        if (item.name == name) {
-          return true;
-        }
-      });
+      const openpageHasTag = this.pageTagsList.some((item) => item.name == name);
       if (!openpageHasTag) {
-        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
         util.openNewPage(
           this,
           name,
@@ -213,33 +165,33 @@ export default {
         );
       }
     },
-    //宽度动态计算
     resize() {
-      let currWidth = document.body.clientWidth;
-      let count = currWidth / 300;
-      if (count > 6) {
-        this.sliceNum = 6;
-      } else {
-        this.sliceNum = count;
+      const currWidth = document.body.clientWidth;
+      const count = currWidth / 300;
+      this.sliceNum = count > 6 ? 6 : count;
+    },
+    onLogoError(e) {
+      if (e?.target && e.target.src !== this.defaultLogo) {
+        e.target.src = this.defaultLogo;
       }
     },
   },
   watch: {
-    $route(to, from) {
+    $route(to) {
       this.checkTag(to.name);
       localStorage.currentPageName = to.name;
     },
   },
   mounted() {
     this.init();
-    let that = this;
     this.resize();
-    window.addEventListener("resize", function () {
-      that.resize();
-    });
+    window.addEventListener("resize", this.resize);
+    this.$store.commit("setOpenedList");
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.resize);
   },
   created() {
-    // 显示打开的页面的列表
     this.$store.commit("setOpenedList");
   },
 };