'admin-21.01.02:新增切换动画、布局页等'

vue-admin-wonderful-next/package.json

@@ -6,14 +6,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "element-plus": "^v1.0.1-beta.17",
+    "element-plus": "^v1.0.1-beta.19",
     "sortablejs": "^1.10.2",
-    "vue": "^3.0.4",
+    "vue": "^3.0.5",
-    "vue-router": "^4.0.1"
+    "vue-router": "^4.0.2"
   },
   "devDependencies": {
     "@types/sortablejs": "^1.10.6",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/compiler-sfc": "^3.0.5",
     "sass": "^1.30.0",
     "sass-loader": "^10.1.0",
     "typescript": "^4.1.2",

vue-admin-wonderful-next/src/main.ts

@@ -5,7 +5,6 @@ import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 import '/@/theme/index.scss'
-import { locale } from 'element-plus'
+import lang from 'element-plus/lib/locale/lang/zh-cn'
-
-createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
 
+createApp(App).use(router).use(ElementPlus, { locale: lang }).mount('#app')

vue-admin-wonderful-next/src/theme/app.scss

@@ -4,6 +4,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  outline: none !important;
 }
 
 html,
@@ -53,6 +54,22 @@ body,
   }
 }
 
+/* element plus 全局样式
+------------------------------- */
+.layout-breadcrumb-seting {
+  .el-drawer__header {
+    padding: 0 15px !important;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 0 !important;
+    border-bottom: 1px solid rgb(230, 230, 230);
+  }
+  .el-divider {
+    background-color: rgb(230, 230, 230);
+  }
+}
+
 /* 宽高 100%
 ------------------------------- */
 .w100 {

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

@@ -1,9 +0,0 @@
-<template>
-  layoutBreadcrumbSeting
-</template>
-
-<script lang="ts">
-export default {
-  name: "layoutBreadcrumbSeting",
-};
-</script>

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

@@ -0,0 +1,364 @@
+<template>
+  <div class="layout-breadcrumb-seting">
+    <el-drawer title="布局配置" v-model="isDrawer" direction="rtl" destroy-on-close size="240px">
+      <el-scrollbar class="layout-breadcrumb-seting-bar">
+        <!-- 全局主题 -->
+        <el-divider content-position="left">全局主题</el-divider>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="primary" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">success</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="success" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">info</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="info" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">warning</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="warning" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">danger</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="danger" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">顶栏背景</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="topBar" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单背景</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-color-picker v-model="menuBar" show-alpha size="small"></el-color-picker>
+          </div>
+        </div>
+
+        <!-- 界面设置 -->
+        <el-divider content-position="left">界面设置</el-divider>
+        <div class="layout-breadcrumb-seting-bar-flex">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单水平折叠</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单折叠动画</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">自动分割菜单</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">菜单展开宽度</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-input-number v-model="menuWidth" controls-position="right" :min="1" :max="999" size="mini"
+              style="width:90px;">
+            </el-input-number>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt11">
+          <div class="layout-breadcrumb-seting-bar-flex-label">自动锁屏</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-input-number v-model="menuWidth" controls-position="right" :min="1" :max="999" size="mini"
+              style="width:90px;">
+            </el-input-number>
+          </div>
+        </div>
+
+        <!-- 界面显示 -->
+        <el-divider content-position="left">界面显示</el-divider>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></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="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">灰色模式</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">色弱模式</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启水印</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="isCollapse"></el-switch>
+          </div>
+        </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt14">
+          <div class="layout-breadcrumb-seting-bar-flex-label">水印文案</div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-input v-model="menuWidth" size="mini" style="width:90px;"></el-input>
+          </div>
+        </div>
+
+        <!-- 布局切换 -->
+        <el-divider content-position="left">布局切换</el-divider>
+        <div class="drawer-layout-content-flex">
+          <!-- fashion 布局 -->
+          <div class="drawer-layout-content-item">
+            <section class="el-container drawer-layout-active el-circular">
+              <aside class="el-aside" style="width: 20px"></aside>
+              <section class="el-container is-vertical">
+                <header class="el-header" style="height: 10px"></header>
+                <main class="el-main"></main>
+              </section>
+            </section>
+            <div class="layout-tips-warp-active layout-tips-warp">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">时尚</p>
+              </div>
+            </div>
+          </div>
+          <!-- classic 布局 -->
+          <div class="drawer-layout-content-item">
+            <section class="el-container is-vertical el-circular">
+              <header class="el-header" style="height: 10px"></header>
+              <section class="el-container">
+                <aside class="el-aside" style="width: 20px"></aside>
+                <section class="el-container is-vertical">
+                  <main class="el-main"></main>
+                </section>
+              </section>
+            </section>
+            <div class="layout-tips-warp">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">经典</p>
+              </div>
+            </div>
+          </div>
+          <!-- elegant 布局 -->
+          <div class="drawer-layout-content-item">
+            <section class="el-container is-vertical el-circular">
+              <header class="el-header" style="height: 10px"></header>
+              <section class="el-container">
+                <section class="el-container is-vertical">
+                  <main class="el-main"></main>
+                </section>
+              </section>
+            </section>
+            <div class="layout-tips-warp">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">典雅</p>
+              </div>
+            </div>
+          </div>
+          <!-- scitech 布局 -->
+          <div class="drawer-layout-content-item">
+            <section class="el-container el-circular">
+              <aside class="el-aside-dark" style="width: 10px"></aside>
+              <aside class="el-aside" style="width: 20px"></aside>
+              <section class="el-container is-vertical">
+                <header class="el-header" style="height: 10px"></header>
+                <main class="el-main"></main>
+              </section>
+            </section>
+            <div class="layout-tips-warp">
+              <div class="layout-tips-box">
+                <p class="layout-tips-txt">科技</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="copy-config">
+          <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>
+        </div>
+      </el-scrollbar>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from "vue";
+export default {
+  name: "layoutBreadcrumbSeting",
+  setup() {
+    const state = reactive({
+      isDrawer: false,
+      primary: "#409eff",
+      success: "#67c23a",
+      info: "#909399",
+      warning: "#e6a23c",
+      danger: "#f56c6c",
+      topBar: "#ffffff",
+      menuBar: "#29384d",
+      isCollapse: false,
+      menuWidth: 240,
+    });
+    const openDrawer = () => {
+      state.isDrawer = true;
+    };
+    const closeDrawer = () => {
+      state.isDrawer = false;
+    };
+    return {
+      openDrawer,
+      closeDrawer,
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.layout-breadcrumb-seting-bar {
+  height: calc(100vh - 50px);
+  padding: 0 15px;
+  overflow-x: hidden !important;
+  .layout-breadcrumb-seting-bar-flex {
+    display: flex;
+    align-items: center;
+    &-label {
+      flex: 1;
+      color: #666666;
+    }
+  }
+  .drawer-layout-content-flex {
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    margin: 0 -5px;
+    .drawer-layout-content-item {
+      width: 50%;
+      height: 70px;
+      cursor: pointer;
+      border: 1px solid transparent;
+      position: relative;
+      padding: 5px;
+      .el-container {
+        height: 100%;
+        .el-aside-dark {
+          background-color: #b3c0d1;
+        }
+        .el-aside {
+          background-color: #d3dce6;
+        }
+        .el-header {
+          background-color: #b3c0d1;
+        }
+        .el-main {
+          background-color: #e9eef3;
+        }
+      }
+      .border-color-09f {
+        border: 1px solid var(--color-primary) !important;
+      }
+      .el-circular {
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .drawer-layout-active {
+        @extend .border-color-09f;
+      }
+      .layout-tips-warp,
+      .layout-tips-warp-active {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border: 1px solid var(--color-primary-light-6);
+        border-radius: 100%;
+        padding: 4px;
+        .layout-tips-box {
+          width: 30px;
+          height: 30px;
+          z-index: 9;
+          border: 1px solid var(--color-primary-light-6);
+          border-radius: 100%;
+          .layout-tips-txt {
+            position: relative;
+            top: 5px;
+            font-size: 12px;
+            line-height: 1;
+            letter-spacing: 2px;
+            white-space: nowrap;
+            color: var(--color-primary-light-6);
+            text-align: center;
+            transform: rotate(30deg);
+            left: -1px;
+            background-color: #e9eef3;
+            width: 32px;
+            height: 17px;
+            line-height: 17px;
+          }
+        }
+      }
+      .layout-tips-warp-active {
+        @extend .border-color-09f;
+        .layout-tips-box {
+          @extend .border-color-09f;
+          .layout-tips-txt {
+            color: var(--color-primary) !important;
+            background-color: #e9eef3 !important;
+          }
+        }
+      }
+    }
+  }
+  .copy-config {
+    margin: 10px 0;
+    .copy-config-btn {
+      width: 100%;
+      margin-top: 15px;
+    }
+    .copy-config-last-btn {
+      margin: 10px 0 0;
+    }
+  }
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="layout-navbars-breadcrumb-user">
     <i class="el-icon-search layout-navbars-breadcrumb-user-icon" title="菜单搜索"></i>
-    <i class="el-icon-setting layout-navbars-breadcrumb-user-icon" title="布局配置"></i>
+    <i class="el-icon-setting layout-navbars-breadcrumb-user-icon" title="布局配置" @click="onLayoutSetingClick"></i>
     <i class="el-icon-bell layout-navbars-breadcrumb-user-icon" title="消息"></i>
     <i class="icon-fullscreen iconfont layout-navbars-breadcrumb-user-icon mr10" title="开全屏"></i>
     <el-dropdown :show-timeout="70" :hide-timeout="50">
@@ -22,11 +22,25 @@
       </template>
     </el-dropdown>
   </div>
+  <Setings ref="setingsRef" />
 </template>
 
 <script lang="ts">
+import { ref } from "vue";
+import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
 export default {
   name: "layoutBreadcrumbUser",
+  components: { Setings },
+  setup() {
+    const setingsRef = ref();
+    const onLayoutSetingClick = () => {
+      setingsRef.value.openDrawer();
+    };
+    return {
+      setingsRef,
+      onLayoutSetingClick,
+    };
+  },
 };
 </script>
 

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

@@ -1,7 +1,8 @@
 <template>
   <transition name="el-zoom-in-center">
     <div aria-hidden="true" class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu" role="tooltip"
-      data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" v-show="isShow">
+      data-popper-placement="bottom" :style="`top: ${dropdown.y + 5}px;left: ${dropdown.x}px;`" :key="Math.random()"
+      v-show="isShow">
       <ul class="el-dropdown-menu">
         <li class="el-dropdown-menu__item" aria-disabled="false" tabindex="-1" v-for="(v,k) in dropdownList" :key="k">
           <i :class="v.icon"></i>

vue-admin-wonderful-next/vite.config.ts

@@ -22,6 +22,9 @@ const viteConfig: UserConfig = {
     port: VITE_PORT,
     open: VITE_OPEN,
     base: process.env.NODE_ENV === "production" ? "./" : VITE_PUBLIC_PATH,
+    optimizeDeps: {
+        include: ['element-plus/lib/locale/lang/zh-cn']
+    }
 }
 
 export default viteConfig