'admin-21.01.31:删除不必要logo、处理tagsView无权限也显示菜单、优化布局等'

vue-admin-wonderful-next/package.json

@@ -6,6 +6,7 @@
     "build": "vite build"
   },
   "dependencies": {
+    "clipboard": "^2.0.6",
     "element-plus": "^1.0.2-beta.30",
     "mitt": "^2.1.0",
     "nprogress": "^0.2.0",
@@ -16,6 +17,7 @@
     "vuex": "^4.0.0-rc.2"
   },
   "devDependencies": {
+    "@types/clipboard": "^2.0.1",
     "@types/node": "^14.14.22",
     "@types/nprogress": "^0.2.0",
     "@types/sortablejs": "^1.10.6",

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

@@ -528,9 +528,12 @@ export function formatTwoStageRoutes(arr: any) {
     return newArr
 }
 
-// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单过滤中使用：未过滤隐藏的(isHide))
+// 缓存多级嵌套数组处理后的一维数组(tagsView、菜单搜索中使用：未过滤隐藏的(isHide))
 export function setCacheTagsViewRoutes() {
-    store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children)
+    // 先处理有权限的路由，否则 tagsView、菜单搜索中无权限的路由也将显示
+    let authsRoutes = setFilterMenuFun(dynamicRoutes, store.state.auths)
+    // 添加到 vuex setTagsViewRoutes 中
+    store.dispatch('setTagsViewRoutes', formatTwoStageRoutes(formatFlatteningRoutes(authsRoutes))[0].children)
 }
 
 // 获取当前用户的权限去比对路由表，用于左侧菜单/横向菜单的显示
@@ -634,4 +637,5 @@ router.afterEach(() => {
     NProgress.done()
 })
 
+// 导出路由
 export default router

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

@@ -1,8 +1,8 @@
 <template>
   <div class="layout-search-dialog">
-    <el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen>
+    <el-dialog v-model="isShowSearch" width="300px" destroy-on-close :modal="false" fullscreen :show-close="false">
       <el-autocomplete v-model="menuQuery" :fetch-suggestions="menuSearch" placeholder="菜单搜索：支持中文、路由路径"
-        prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect">
+        prefix-icon="el-icon-search" ref="layoutMenuAutocompleteRef" @select="onHandleSelect" @blur="onSearchBlur">
         <template #default="{ item }">
           <div><i :class="item.meta.icon" class="mr10"></i>{{ item.meta.title }}</div>
         </template>
@@ -74,12 +74,17 @@ export default defineComponent({
       else router.push(path);
       closeSearch();
     };
+    // input 失去焦点时
+    const onSearchBlur = () => {
+      closeSearch();
+    };
     return {
       layoutMenuAutocompleteRef,
       openSearch,
       closeSearch,
       menuSearch,
       onHandleSelect,
+      onSearchBlur,
       ...toRefs(state),
     };
   },
@@ -100,12 +105,5 @@ export default defineComponent({
     left: 50%;
     transform: translateX(-50%);
   }
-  ::v-deep(.el-dialog__headerbtn) {
-    top: 15px;
-    right: 15px;
-    .el-dialog__close {
-      color: var(--color-primary);
-    }
-  }
 }
 </style>

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

@@ -339,12 +339,11 @@
           </div>
         </div>
         <div class="copy-config">
-          <el-alert title="点击下方按钮，复制 / 还原布局配置。" type="warning" :closable="false">
+          <el-alert title="点击下方按钮，复制布局配置去 `src/utils/themeConfig.ts` 中修改。" type="warning" :closable="false">
           </el-alert>
-          <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary">一键复制配置
+          <el-button size="small" class="copy-config-btn" icon="el-icon-document-copy" type="primary"
+            ref="copyConfigBtnRef" @click="onCopyConfigClick($event.target)">一键复制配置
           </el-button>
-          <el-button size="small" class="copy-config-btn copy-config-last-btn" icon="el-icon-refresh" type="warning">
-            一键还原配置</el-button>
         </div>
       </el-scrollbar>
     </el-drawer>
@@ -359,7 +358,10 @@ import {
   getCurrentInstance,
   defineComponent,
   computed,
+  ref,
 } from "vue";
+import { ElMessage } from "element-plus";
+import ClipboardJS from "clipboard";
 import { useStore } from "/@/store/index.ts";
 import { getLightColor } from "/@/utils/theme.ts";
 import Watermark from "/@/utils/wartermark.ts";
@@ -369,6 +371,7 @@ export default defineComponent({
   name: "layoutBreadcrumbSeting",
   setup() {
     const { proxy } = getCurrentInstance();
+    const copyConfigBtnRef = ref();
     const store = useStore();
     // 获取布局配置信息
     const getThemeConfig = computed(() => {
@@ -597,6 +600,10 @@ export default defineComponent({
     // 布局配置弹窗打开
     const openDrawer = () => {
       getThemeConfig.value.isDrawer = true;
+      nextTick(() => {
+        // 初始化复制功能，防止点击两次才可以复制
+        onCopyConfigClick(copyConfigBtnRef.value.$el);
+      });
     };
     // 触发 store 布局配置更新
     const setDispatchThemeConfig = () => {
@@ -611,6 +618,23 @@ export default defineComponent({
     const setLocalThemeConfigStyle = () => {
       setLocal("themeConfigStyle", document.documentElement.style.cssText);
     };
+    // 一键复制配置
+    const onCopyConfigClick = (target: any) => {
+      let copyThemeConfig = getLocal("themeConfig");
+      copyThemeConfig.isDrawer = false;
+      const clipboard = new ClipboardJS(target, {
+        text: () => JSON.stringify(copyThemeConfig),
+      });
+      clipboard.on("success", () => {
+        getThemeConfig.value.isDrawer = false;
+        ElMessage.success("复制成功！");
+        clipboard.destroy();
+      });
+      clipboard.on("error", () => {
+        ElMessage.error("复制失败！");
+        clipboard.destroy();
+      });
+    };
     onMounted(() => {
       nextTick(() => {
         // 监听菜单点击，菜单字体背景高亮
@@ -682,6 +706,8 @@ export default defineComponent({
       onClassicSplitMenuChange,
       onIsBreadcrumbChange,
       onSortableTagsViewChange,
+      copyConfigBtnRef,
+      onCopyConfigClick,
     };
   },
 });

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

@@ -21,7 +21,8 @@
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
       <span class="layout-navbars-breadcrumb-user-link">
         <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
-          class="layout-navbars-breadcrumb-user-link-photo mr5" /> small@小柒
+          class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        {{userInfo.userName === '' ? 'test' : userInfo.userName}}
         <i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <template #dropdown>
@@ -47,13 +48,14 @@ import {
   toRefs,
   toRef,
   ref,
+  onMounted,
 } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessageBox, ElMessage } from "element-plus";
 import screenfull from "screenfull";
 import { resetRoute } from "/@/router/index.ts";
 import { useStore } from "/@/store/index.ts";
-import { clearSession } from "/@/utils/storage.ts";
+import { getSession, clearSession } from "/@/utils/storage.ts";
 import UserNews from "/@/views/layout/navBars/breadcrumb/userNews.vue";
 import Search from "/@/views/layout/navBars/breadcrumb/search.vue";
 export default {
@@ -67,6 +69,7 @@ export default {
     const state = reactive({
       isScreenfull: false,
       isShowUserNewsPopover: false,
+      userInfo: {},
     });
     // 设置布局
     const setFlexAutoStyle = computed(() => {
@@ -121,7 +124,7 @@ export default {
             resetRoute(); // 删除/重置路由
             router.push("/login");
             setTimeout(() => {
-              ElMessage.success("退出成功！记得回来哟~");
+              ElMessage.success("安全退出成功！");
             }, 300);
           })
           .catch(() => {});
@@ -137,6 +140,15 @@ export default {
     const onUserNewsPopoverClick = () => {
       state.isShowUserNewsPopover = !state.isShowUserNewsPopover;
     };
+    // 获取用户信息（sessionStorage）
+    const initUserInfo = () => {
+      if (!getSession("userInfo")) return false;
+      state.userInfo = getSession("userInfo");
+    };
+    // 页面加载时
+    onMounted(() => {
+      initUserInfo();
+    });
     return {
       setFlexAutoStyle,
       onLayoutSetingClick,
@@ -145,6 +157,7 @@ export default {
       onSearchClick,
       onUserNewsPopoverClick,
       searchRef,
+      initUserInfo,
       ...toRefs(state),
     };
   },

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

@@ -79,10 +79,9 @@ export default {
   .content-box {
     font-size: 13px;
     .content-box-item {
-      border-bottom: 1px solid #ebeef5;
+      padding-top: 12px;
-      padding: 12px 0;
       &:last-of-type {
-        border-bottom: 1px solid transparent;
+        padding-bottom: 12px;
       }
       .content-box-msg {
         color: #999999;

vue-admin-wonderful-next/src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
     <div class="login-logo">
-      <img src="/@/assets/logo-web-element.svg" />
+      <span>SMALL@小柒</span>
     </div>
     <div class="login-content" :class="{'login-content-mobile' : tabsActiveName === 'mobile'}">
       <div class="login-content-main">
@@ -61,10 +61,15 @@ export default {
   .login-logo {
     position: absolute;
     top: 30px;
-    left: 30px;
+    left: 50%;
     height: 50px;
     display: flex;
     align-items: center;
+    font-size: 20px;
+    color: var(--color-primary);
+    letter-spacing: 2px;
+    width: 90%;
+    transform: translateX(-50%);
   }
   .login-content {
     width: 500px;