'admin-20.12.18:处理自定义主题问题'

vue-admin-wonderful-next-docs/docs/config/README.md

@@ -217,11 +217,14 @@ $--font-path: '~element-plus/lib/theme-chalk/fonts';
 - 2.2、当只有 :root 选择器或者 html 选择器时，`document.documentElement.style.getPropertyValue` 获取到的值为空
 
 ```ts
-// 获取值
+// 读取变量
-document.documentElement.style.getPropertyValue('--main-bg-color');
+document.documentElement.style.getPropertyValue('--main-bg-color').trim();
 
-// 设置值
+// 设置变量
 document.documentElement.style.setProperty('--main-bg-color', 'blue');
+
+// 删除变量
+document.body.style.removeProperty('--main-bg-color');
 ```
 
 #### 2、配置目录别名 `@`，方便引用

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

@@ -1,4 +1,9 @@
 <template>
+  <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
+  <span>灰色模式</span>
+  <el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
+  <el-divider></el-divider>
+  <div>button</div>
   <el-row>
     <el-button>默认按钮</el-button>
     <el-button type="primary">主要按钮</el-button>
@@ -7,40 +12,36 @@
     <el-button type="warning">警告按钮</el-button>
     <el-button type="danger">危险按钮</el-button>
   </el-row>
-  <div class="Selector1">
-    22
-    <div class="aaa">66</div>
-    <div class="bb">33</div>
-    <div class="red">44</div>
-  </div>
-  <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
-  <!-- <img src="/@/assets/11.png" /> -->
-  <span>灰色模式</span>
-  <el-switch v-model="value1" @change="onSwitchChange1"></el-switch>
-  <el-tabs v-model="activeName">
-    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
-    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
-    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
-  </el-tabs>
 
-  <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal">
+  <el-row>
-    <el-menu-item index="1">处理中心</el-menu-item>
+    <el-button plain>朴素按钮</el-button>
-    <el-submenu index="2">
+    <el-button type="primary" plain>主要按钮</el-button>
-      <template #title>我的工作台</template>
+    <el-button type="success" plain>成功按钮</el-button>
-      <el-menu-item index="2-1">选项1</el-menu-item>
+    <el-button type="info" plain>信息按钮</el-button>
-      <el-menu-item index="2-2">选项2</el-menu-item>
+    <el-button type="warning" plain>警告按钮</el-button>
-      <el-menu-item index="2-3">选项3</el-menu-item>
+    <el-button type="danger" plain>危险按钮</el-button>
-      <el-submenu index="2-4">
+  </el-row>
-        <template #title>选项4</template>
+
-        <el-menu-item index="2-4-1">选项1</el-menu-item>
+  <el-row>
-        <el-menu-item index="2-4-2">选项2</el-menu-item>
+    <el-button round>圆角按钮</el-button>
-        <el-menu-item index="2-4-3">选项3</el-menu-item>
+    <el-button type="primary" round>主要按钮</el-button>
-      </el-submenu>
+    <el-button type="success" round>成功按钮</el-button>
-    </el-submenu>
+    <el-button type="info" round>信息按钮</el-button>
-    <el-menu-item index="3" disabled>消息中心</el-menu-item>
+    <el-button type="warning" round>警告按钮</el-button>
-    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+    <el-button type="danger" round>危险按钮</el-button>
-  </el-menu>
+  </el-row>
+
+  <el-row>
+    <el-button icon="el-icon-search" circle></el-button>
+    <el-button type="primary" icon="el-icon-edit" circle></el-button>
+    <el-button type="success" icon="el-icon-check" circle></el-button>
+    <el-button type="info" icon="el-icon-message" circle></el-button>
+    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+    <el-button type="danger" icon="el-icon-delete" circle></el-button>
+  </el-row>
+  <el-divider></el-divider>
+  <div class="aaa">button</div>
+  <el-divider></el-divider>
 </template>
 
 <script lang="ts">
@@ -51,14 +52,18 @@ export default {
     const state = reactive({
       color: "",
       value1: false,
-      activeName: "second",
-      activeIndex2: "1",
     });
     function colorChange() {
+      // let aa = getDarkColor(state.color, 0.2);
+      // console.log(aa);
       document.documentElement.style.setProperty(
         "--color-primary",
         state.color
       );
+      document.documentElement.style.setProperty(
+        "--color-primary-light-1",
+        getLightColor(state.color, 0.3)
+      );
     }
     function onSwitchChange1() {
       document.body.setAttribute(
@@ -66,6 +71,48 @@ export default {
         `filter:grayscale(${state.value1 ? 1 : 0})`
       );
     }
+    function HexToRgb(str) {
+      var r = /^\#?[0-9A-F]{6}$/;
+      //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
+      if (!r.test(str)) return window.alert("输入错误的hex");
+      //replace替换查找的到的字符串
+      str = str.replace("#", "");
+      //match得到查询数组
+      var hxs = str.match(/../g);
+      //alert('bf:'+hxs)
+      for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
+      //alert(parseInt(80, 16))
+      //console.log(hxs);
+      return hxs;
+    }
+    //GRB颜色转Hex颜色
+    function RgbToHex(a, b, c) {
+      var r = /^\d{1,3}$/;
+      if (!r.test(a) || !r.test(b) || !r.test(c))
+        return window.alert("输入错误的rgb颜色值");
+      var hexs = [a.toString(16), b.toString(16), c.toString(16)];
+      for (var i = 0; i < 3; i++)
+        if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
+      return "#" + hexs.join("");
+    }
+    //得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
+    function getDarkColor(color, level) {
+      var r = /^\#?[0-9A-F]{6}$/;
+      if (!r.test(color)) return window.alert("输入错误的hex颜色值");
+      var rgbc = HexToRgb(color);
+      //floor 向下取整
+      for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
+      return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
+    }
+    //得到hex颜色值为color的减淡颜色值，level为加深的程度，限0-1之间
+    function getLightColor(color, level) {
+      var r = /^\#?[0-9A-F]{6}$/;
+      if (!r.test(color)) return window.alert("输入错误的hex颜色值");
+      var rgbc = HexToRgb(color);
+      for (var i = 0; i < 3; i++)
+        rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
+      return RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
+    }
     return {
       colorChange,
       onSwitchChange1,
@@ -74,13 +121,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-.aa {
-  border: 1px solid red;
-  .bb {
-    color: blue;
-    display: flex;
-  }
-}
-</style>

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

@@ -3,7 +3,7 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
-import '/@/style/index.scss';
+import '/@/theme/index.scss';
 
-createApp(App).use(ElementPlus).mount('#app')
+createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')
 

vue-admin-wonderful-next/src/style/base.scss

@@ -1,33 +0,0 @@
-@import 'common/transition.scss';
-@import 'common/var.scss';
-
-.el-button--primary {
-  color: #ffffff;
-  background-color: setColor(primary);
-  border-color: setColor(primary);
-}
-
-// .el-button--primary:hover {
-//   color: #ffffff;
-//   background-color: var(--primary--color-hover);
-//   border-color: var(--primary--color-hover);
-// }
-
-.el-switch.is-checked .el-switch__core {
-  border-color: setColor(primary) !important;
-  background-color: setColor(primary) !important;
-}
-
-.el-tabs__item:hover,
-.el-tabs__item.is-active {
-  color: setColor(primary) !important;
-}
-.el-tabs__active-bar {
-  background-color: setColor(primary) !important;
-}
-
-.el-menu-item.is-active,
-.el-submenu.is-active .el-submenu__title {
-  color: setColor(primary) !important;
-  border-bottom-color: setColor(primary) !important;
-}

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

@@ -1,64 +0,0 @@
-/* 定义初始颜色
-------------------------------- */
-$root: (
-  primary: #409eff,
-  success: #67c23a,
-  warning: #e6a23c,
-  danger: #f56c6c,
-  info: #909399,
-);
-
-/* 循环赋值给:root
-------------------------------- */
-:root {
-  @each $key, $value in $root {
-    --color-#{$key}: #{$value};
-  }
-}
-
-/* 颜色调用函数
-------------------------------- */
-@function setColor($key) {
-  @return var(--color-#{$key});
-}
-
-/* 文本不换行
-------------------------------- */
-@mixin text-no-wrap() {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-/* 多行文本溢出
-------------------------------- */
-@mixin text-ellipsis($line: 2) {
-  overflow: hidden;
-  word-break: break-all;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-
-// 使用方式:
-// .text{
-//     @include multiEllipsis(3)  // 表示只显示三行,多出来的显示省略号
-// }
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.aaa {
-  color: setColor(primary);
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  border: 1px solid red;
-}

vue-admin-wonderful-next/src/style/index.scss

@@ -1 +0,0 @@
-@import './base.scss';

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

@@ -0,0 +1,11 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,2 @@
+@import 'common/transition.scss';
+@import 'common/var.scss';

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

@@ -1,32 +1,40 @@
+/* 定义重用混入指令
+------------------------------- */
+@mixin transition($second: 0.3) {
+  transition: all #{$second}s;
+}
+
+@mixin translateX($opacity: 0, $offsetX: 0) {
+  opacity: $opacity;
+  transform: translateX(#{$offsetX}px);
+}
+
 /* 页面切换动画
 ------------------------------- */
 .fade-transform-enter-active,
 .fade-transform-leave-active {
   will-change: transform;
-  transition: all 0.3s;
+  @include transition();
 }
 .fade-transform-enter {
-  opacity: 0;
+  @include translateX(-30);
-  transform: translateX(-30px);
 }
 .fade-transform-leave-active {
-  opacity: 0;
+  @include translateX(30);
-  transform: translateX(30px);
 }
 
 /* Breadcrumb 面包屑过渡动画
 ------------------------------- */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
-  transition: all 0.3s;
+  @include transition();
 }
 .breadcrumb-enter,
 .breadcrumb-leave-active {
-  opacity: 0;
+  @include translateX(20);
-  transform: translateX(20px);
 }
 .breadcrumb-move {
-  transition: all 0.3s;
+  @include transition();
 }
 .breadcrumb-leave-active {
   position: absolute;

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

@@ -0,0 +1,39 @@
+/* 定义初始颜色
+------------------------------- */
+// $root: (
+//   primary: #409eff,
+//   success: #67c23a,
+//   warning: #e6a23c,
+//   danger: #f56c6c,
+//   info: #909399,
+//   whites: #ffffff,
+//   blacks: #000000,
+// );
+
+/* 循环赋值给:root
+------------------------------- */
+// :root {
+//   @each $key, $value in $root {
+//     --color-#{$key}: #{$value};
+//   }
+// }
+
+$--color-primary: #409eff !default;
+$--color-white: #ffffff !default;
+$--color-black: #000000 !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default;
+// $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default;
+// $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default;
+// $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default;
+// $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default;
+// $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default;
+// $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default;
+// $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default;
+// $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default;
+
+:root {
+  --color-primary: #{$--color-primary};
+  --color-white: #{$--color-white};
+  --color-black: #{$--color-black};
+  --color-primary-light-1: #{$--color-primary-light-1};
+}

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

@@ -0,0 +1,4 @@
+@import './app.scss';
+@import './base.scss';
+@import './reset-element.scss';
+@import './media.scss';

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

@@ -0,0 +1 @@
+// 540/720/960/1140

vue-admin-wonderful-next/src/theme/mixins/function.scss

@@ -0,0 +1,5 @@
+/* 颜色调用函数
+------------------------------- */
+@function set-color($key) {
+  @return var(--color-#{$key});
+}

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

@@ -0,0 +1,18 @@
+/* 文本不换行
+------------------------------- */
+@mixin text-no-wrap() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* 多行文本溢出
+  ------------------------------- */
+@mixin text-ellipsis($line: 2) {
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}

vue-admin-wonderful-next/src/theme/reset-element.scss

@@ -0,0 +1,13 @@
+@import 'mixins/function.scss';
+
+/* Button 按钮
+------------------------------- */
+.el-button--primary {
+  background-color: set-color(primary);
+  border-color: set-color(primary);
+  &:hover,
+  &:focus {
+    background: set-color(primary-light-1);
+    border-color: set-color(primary-light-1);
+  }
+}