'admin-21.01.11:新增tagsView显示/隐藏图标'

vue-admin-wonderful-next/src/App.vue

@@ -8,6 +8,7 @@ import { setIconfont } from "/@/utils/setIconfont.ts";
 export default {
   name: "app",
   setup() {
+    // 设置批量第三方 icon 图标
     onBeforeMount(() => {
       setIconfont(["//at.alicdn.com/t/font_2298093_0fmefamqzj4a.css"]);
     });

vue-admin-wonderful-next/src/store/index.ts

@@ -28,6 +28,7 @@ export interface RootStateTypes {
         isShowLogoChange: boolean,
         isBreadcrumb: boolean,
         isTagsview: boolean,
+        isTagsviewIcon: boolean,
         isFooter: boolean,
         isGrayscale: boolean,
         isInvert: boolean,

vue-admin-wonderful-next/src/theme/common/var.scss

@@ -60,7 +60,7 @@ $--color-danger-light-8: mix($--color-whites, $--color-danger, 80%) !default;
 $--color-danger-light-9: mix($--color-whites, $--color-danger, 90%) !default;
 $--bg-topBar: #ffffff;
 $--bg-menuBar: #29384d;
-$--bg-columnsMenuBar: #6bb4ff;
+$--bg-columnsMenuBar: #4276ab;
 $--bg-topBarColor: #606266;
 $--bg-menuBarColor: #e6e6e6;
 $--bg-columnsMenuBarColor: #e6e6e6;

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -8,7 +8,7 @@ export default {
     danger: "#f56c6c",
     topBar: "#ffffff",
     menuBar: "#29384d",
-    columnsMenuBar: '#6BB4FF',
+    columnsMenuBar: '#4276ab',
     topBarColor: "#606266",
     menuBarColor: "#e6e6e6",
     columnsMenuBarColor: '#e6e6e6',
@@ -25,6 +25,7 @@ export default {
     isShowLogoChange: false,
     isBreadcrumb: true,
     isTagsview: true,
+    isTagsviewIcon: false,
     isFooter: false,
     isGrayscale: false,
     isInvert: false,

vue-admin-wonderful-next/src/utils/wartermark.ts

@@ -31,7 +31,6 @@ const watermark = {
     set: (str: any) => {
         let id = setWatermark(str)
         if (document.getElementById(id) === null) id = setWatermark(str)
-        window.onresize = () => { setWatermark(str) }
     },
     // 删除水印
     del: () => {

vue-admin-wonderful-next/src/views/layout/component/columnsAside.vue

@@ -12,7 +12,7 @@
               </div>
             </template>
             <template v-else>
-              <a :href="v.meta.isLink" target="_block">
+              <a :href="v.meta.isLink" target="_blank">
                 <i :class="v.meta.icon"></i>
                 <div class="layout-columns-aside-li-box-title">
                   {{v.meta.title}}

vue-admin-wonderful-next/src/views/layout/footer/index.vue

@@ -16,6 +16,7 @@ export default {
     const state = reactive({
       isDelayFooter: true,
     });
+    // 路由改变时，等主界面动画加载完毕再显示 footer
     onBeforeRouteUpdate((to, from) => {
       state.isDelayFooter = false;
       setTimeout(() => {

vue-admin-wonderful-next/src/views/layout/logo/index.vue

@@ -41,7 +41,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: rgb(0 21 41 / 3%) 0px 1px 4px;
+  box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
   color: var(--color-primary);
   font-size: 16px;
   cursor: pointer;

vue-admin-wonderful-next/src/views/layout/main/transverse.vue

@@ -6,12 +6,10 @@
 </template>
 
 <script>
-import Aside from '/@/views/layout/component/aside.vue';
 import Header from '/@/views/layout/component/header.vue';
 import Main from '/@/views/layout/component/main.vue';
-import TagsView from "/@/views/layout/navBars/tagsView/tagsView.vue";
 export default {
   name: 'layoutTransverse',
-  components: { Aside, Header, Main, TagsView }
+  components: { Header, Main }
 }
 </script>

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="layout-navbars-breadcrumb-index">
-    <Logo
+    <Logo v-if="setIsShowLogo" />
-      v-if="getThemeConfig.isShowLogo && getThemeConfig.layout === 'classic' || getThemeConfig.isShowLogo && getThemeConfig.layout === 'transverse'" />
     <Breadcrumb />
-    <Horizontal :menuList="menuList" v-if="getThemeConfig.layout === 'transverse'" />
+    <Horizontal :menuList="menuList" v-if="isLayoutTransverse" />
     <User />
   </div>
 </template>
@@ -20,9 +19,6 @@ export default {
   components: { Breadcrumb, User, Logo, Horizontal },
   setup() {
     const store = useStore();
-    const getThemeConfig = computed(() => {
-      return store.state.themeConfig;
-    });
     const state = reactive({
       menuList: [
         {
@@ -72,8 +68,24 @@ export default {
         },
       ],
     });
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
+    });
+    const setIsShowLogo = computed(() => {
+      let { isShowLogo, layout } = store.state.themeConfig;
+      return (
+        (isShowLogo && layout === "classic") ||
+        (isShowLogo && layout === "transverse")
+      );
+    });
+    const isLayoutTransverse = computed(() => {
+      let { layout } = store.state.themeConfig;
+      return layout === "transverse";
+    });
     return {
       getThemeConfig,
+      setIsShowLogo,
+      isLayoutTransverse,
       ...toRefs(state),
     };
   },

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -161,6 +161,12 @@
             <el-switch v-model="getThemeConfig.isTagsview"></el-switch>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview 图标</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="getThemeConfig.isTagsviewIcon"></el-switch>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -290,12 +296,12 @@
           </div>
         </div>
         <div class="copy-config">
-          <el-alert title="点击下方按钮，复制布局配置。" type="warning" :closable="false">
+          <el-alert title="点击下方按钮，复制 / 还原布局配置。" type="warning" :closable="false">
           </el-alert>
           <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary">一键复制配置
           </el-button>
           <el-button size="small" class="copy-config-btn copy-config-last-btn" icon="el-icon-refresh" type="warning">
-            一键恢复默认</el-button>
+            一键还原配置</el-button>
         </div>
       </el-scrollbar>
     </el-drawer>
@@ -439,10 +445,10 @@ export default defineComponent({
       if (getThemeConfig.value.layout === layout) return false;
       getThemeConfig.value.layout = layout;
       getThemeConfig.value.isDrawer = false;
-      initLayoutStyle();
+      initSetLayoutChange();
     };
-    const initLayoutStyle = () => {
+    // 设置布局切换，重置主题样式
-      console.log(getThemeConfig);
+    const initSetLayoutChange = () => {
       if (getThemeConfig.value.layout === "classic") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
@@ -450,10 +456,7 @@ export default defineComponent({
         getThemeConfig.value.menuBarColor = "#606266";
         getThemeConfig.value.topBar = "#ffffff";
         getThemeConfig.value.topBarColor = "#606266";
-        onBgColorPickerChange("menuBar");
+        initLayoutChangeFun();
-        onBgColorPickerChange("menuBarColor");
-        onBgColorPickerChange("topBar");
-        onBgColorPickerChange("topBarColor");
       } else if (getThemeConfig.value.layout === "transverse") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
@@ -461,9 +464,7 @@ export default defineComponent({
         getThemeConfig.value.menuBarColor = "#FFFFFF";
         getThemeConfig.value.topBar = "#545c64";
         getThemeConfig.value.topBarColor = "#FFFFFF";
-        onBgColorPickerChange("topBar");
+        initLayoutChangeFun();
-        onBgColorPickerChange("menuBarColor");
-        onBgColorPickerChange("topBarColor");
       } else if (getThemeConfig.value.layout === "columns") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = true;
@@ -472,10 +473,7 @@ export default defineComponent({
         getThemeConfig.value.menuBarColor = "#606266";
         getThemeConfig.value.topBar = "#ffffff";
         getThemeConfig.value.topBarColor = "#606266";
-        onBgColorPickerChange("menuBar");
+        initLayoutChangeFun();
-        onBgColorPickerChange("menuBarColor");
-        onBgColorPickerChange("topBar");
-        onBgColorPickerChange("topBarColor");
       } else {
         getThemeConfig.value.isShowLogo = false;
         getThemeConfig.value.isBreadcrumb = true;
@@ -484,14 +482,18 @@ export default defineComponent({
         getThemeConfig.value.menuBarColor = "#FFFFFF";
         getThemeConfig.value.topBar = "#FFFFFF";
         getThemeConfig.value.topBarColor = "#606266";
-        onBgColorPickerChange("menuBar");
+        initLayoutChangeFun();
-        onBgColorPickerChange("menuBarColor");
-        onBgColorPickerChange("topBar");
-        onBgColorPickerChange("topBarColor");
       }
     };
+    // 设置布局切换函数
+    const initLayoutChangeFun = () => {
+      onBgColorPickerChange("menuBar");
+      onBgColorPickerChange("menuBarColor");
+      onBgColorPickerChange("topBar");
+      onBgColorPickerChange("topBarColor");
+    };
     onBeforeMount(() => {
-      initLayoutStyle();
+      initSetLayoutChange();
       proxy.mittBus.on("onMenuClick", () => {
         onMenuBarHighlightChange();
       });

vue-admin-wonderful-next/src/views/layout/navBars/index.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="layout-navbars-container">
     <BreadcrumbIndex />
-    <TagsView
+    <TagsView v-if="setShowTagsView" />
-      v-if="getThemeConfig.layout === 'defaults' || getThemeConfig.layout === 'transverse' || getThemeConfig.layout === 'columns'" />
   </div>
 </template>
 
@@ -19,8 +18,13 @@ export default {
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
+    const setShowTagsView = computed(() => {
+      let { layout } = store.state.themeConfig;
+      return layout !== "classic";
+    });
     return {
       getThemeConfig,
+      setShowTagsView,
     };
   },
 };

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -7,6 +7,8 @@
           @contextmenu.prevent="onContextmenu(v,$event)" @click="onTagsClick(v,k)"
           :ref="el => { if (el) tagsRefs[k] = el }">
           <i class="iconfont icon-webicon318 layout-navbars-tagsview-ul-li-iconfont" v-if="isActive(v.path)"></i>
+          <i class="layout-navbars-tagsview-ul-li-iconfont" :class="v.icon"
+            v-if="!isActive(v.path) && getThemeConfig.isTagsviewIcon"></i>
           <span>{{v.name}}</span>
           <template v-if="isActive(v.path)">
             <i class="el-icon-refresh-right ml5"></i>
@@ -53,11 +55,11 @@ export default {
       },
       tagsRefsIndex: 0,
       arr2: [
-        { id: 11, name: "微软", path: "/home" },
+        { id: 11, name: "微软", path: "/home", icon: "el-icon-star-off" },
-        { id: 12, name: "文档", path: "/docs" },
+        { id: 12, name: "文档", path: "/docs", icon: "el-icon-camera" },
-        { id: 13, name: "文档1", path: "/docs1" },
+        { id: 13, name: "文档1", path: "/docs1", icon: "el-icon-truck" },
-        { id: 15, name: "文档2", path: "/docs2" },
+        { id: 15, name: "文档2", path: "/docs2", icon: "el-icon-tableware" },
-        { id: 1, name: "文档3", path: "/docs3" },
+        { id: 1, name: "文档3", path: "/docs3", icon: "el-icon-basketball" },
       ],
     });
     const setTagsStyle = computed(() => {