From 13f8c82e63c78ecddf8e963956b79f4182682372 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Thu, 17 Dec 2020 18:59:01 +0800
Subject: [PATCH] =?UTF-8?q?'admin-20.12.17:=E7=BC=96=E5=86=99=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98=E6=A0=B7=E5=BC=8F'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/config/README.md                     | 60 ++++++++++++-------
 .../docs/update/README.md                     | 10 ++++
 vue-admin-wonderful-next/src/App.vue          | 48 +++++++++++++--
 vue-admin-wonderful-next/src/main.ts          |  4 +-
 vue-admin-wonderful-next/src/style/index.css  | 51 ++++++++++++++++
 vue-admin-wonderful-next/src/style/index.scss | 23 -------
 6 files changed, 145 insertions(+), 51 deletions(-)
 create mode 100644 vue-admin-wonderful-next/src/style/index.css
 delete mode 100644 vue-admin-wonderful-next/src/style/index.scss

diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md
index 8954a02f..2489aa3c 100644
--- a/vue-admin-wonderful-next-docs/docs/config/README.md
+++ b/vue-admin-wonderful-next-docs/docs/config/README.md
@@ -175,32 +175,53 @@ cnpm install sass sass-loader --save-dev
 
 ## 自定义 Element Plus 主题
 Element Plus 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
-
 #### 1、element-variables.scss
-注意没有 `~` 符号，`@import '~element-plus/packages/theme-chalk/src/index';`
-
 `404问题`：[在vite当中使用主题，字体路径的 ~ 无法正常解析，build和dev均报错](https://github.com/element-plus/element-plus/issues/958)临时处理：把字体文件复制到src下了，用相对路径引入。
 
-1.1、element-variables.scss
+::: warning 提示
+由于 vite 目前（2020.12.17）不支持 [自定义主题 Element Plus](https://element-plus.org/#/zh-CN/component/custom-theme) 文档中的写法，若强行使用打包会出现问题：
+:::
 
-```scss
+```ts
 /* 改变主题色变量 */
 $--color-primary: teal;
 
-@import 'element-plus/packages/theme-chalk/src/index';
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-plus/lib/theme-chalk/fonts';
+
+@import "~element-plus/packages/theme-chalk/src/index";
 ```
 
-1.2、页面引入下载的 fonts `（注意路径）`：
+::: tip 提示
+所以采用 CSS3 `:root`（:root 选择器选取文档的根元素） 写法，具体方法我会在顶部导航 `主题` 中进行说明：
+:::
 
-```scss
-@font-face {
-  font-family: 'element-icons';
-  src: url('../fonts/element-icons.woff') format('woff'), /* chrome, firefox */
-     url('../fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  font-weight: normal;
-  font-display: $--font-display;
-  font-style: normal;
+```css
+/* 定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性： */
+:root {
+  --main-bg-color: red;
 }
+ 
+#div1 {
+  background-color: var(--main-bg-color);
+}
+ 
+#div2 {
+  background-color: var(--main-bg-color);
+}
+```
+
+改变变量的颜色：
+
+- 1.1、当有内联样式或者 js 设置的值时：`document.documentElement.style.getPropertyValue` 获取到的是实际的值
+- 2.2、当只有 :root 选择器或者 html 选择器时，`document.documentElement.style.getPropertyValue` 获取到的值为空
+
+```ts
+// 获取值
+document.documentElement.style.getPropertyValue('--main-bg-color');
+
+// 设置值
+document.documentElement.style.setProperty('--main-bg-color', 'blue');
 ```
 
 #### 2、配置目录别名 `@`，方便引用
@@ -227,18 +248,17 @@ export default viteConfig
 ```
 
 #### 3、页面中使用
-注意 `/@assets` 写法，一定要以 `/` 开头，否则报 `404`
+注意 `/@` 写法，一定要以 `/` 开头，否则报 `404`
 
 ```ts
 import { createApp } from 'vue'
 import App from './App.vue'
 
 import ElementPlus from 'element-plus';
-import '/@assets/style/base/index.scss';
+import 'element-plus/lib/theme-chalk/index.css';
+import '/@/style/index.css';
 
-const app = createApp(App)
-app.use(ElementPlus)
-app.mount('#app')
+createApp(App).use(ElementPlus).mount('#app')
 ```
 
 #### 4、动态换肤功能
diff --git a/vue-admin-wonderful-next-docs/docs/update/README.md b/vue-admin-wonderful-next-docs/docs/update/README.md
index fa290d28..27366282 100644
--- a/vue-admin-wonderful-next-docs/docs/update/README.md
+++ b/vue-admin-wonderful-next-docs/docs/update/README.md
@@ -2,6 +2,16 @@
 sidebar: auto
 ---
 # 更新日志
+## 2020-12-17
+- 处理打包报错问题，找了好几天，加上白天上班没时间
+## 2020-12-13
+- 网修好了，电脑也好了，风停了，雨也停了，可以愉快的继续开发了。:smile: :smile: :muscle:
+- 新增 安装 element-plus 框架，处理自定义主题问题，由于 vite 目前(2020-12-13)不支持 [element-plus 官方文档自定义主题](https://element-plus.org/#/zh-CN/component/custom-theme) `~` 引入写法，改用 css3 :root 写法。这是一个坑，我蹲了好久 :smile:
+- 新增 对应编写相关文档
+## 2020-12-09
+- 由于晚上下班回到去 :crescent_moon: ，没有网（电信线路坏），暂停开发。顺便把电脑修了 :watermelon: :joy: :joy:
+- 因为是晚上下班回去 :crescent_moon: 才开发，所以开发的有点慢
 ## 2020-12-08
 - 创建 vue-admin-wonderful-next目录，包含主体项目、文档、图片库
+- 说明 该项目基于 [vue3.x](https://github.com/vuejs/vue-next)、[vite](https://github.com/vitejs/vite)、[typescript](https://github.com/microsoft/TypeScript)、[element-plus](https://github.com/element-plus/element-plus)
 
diff --git a/vue-admin-wonderful-next/src/App.vue b/vue-admin-wonderful-next/src/App.vue
index 733cd441..046c36f5 100644
--- a/vue-admin-wonderful-next/src/App.vue
+++ b/vue-admin-wonderful-next/src/App.vue
@@ -13,7 +13,33 @@
     <div class="red">44</div>
   </div>
   <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
-  <img src="/@/assets/11.png" />
+  <!-- <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-menu-item index="1">处理中心</el-menu-item>
+    <el-submenu index="2">
+      <template #title>我的工作台</template>
+      <el-menu-item index="2-1">选项1</el-menu-item>
+      <el-menu-item index="2-2">选项2</el-menu-item>
+      <el-menu-item index="2-3">选项3</el-menu-item>
+      <el-submenu index="2-4">
+        <template #title>选项4</template>
+        <el-menu-item index="2-4-1">选项1</el-menu-item>
+        <el-menu-item index="2-4-2">选项2</el-menu-item>
+        <el-menu-item index="2-4-3">选项3</el-menu-item>
+      </el-submenu>
+    </el-submenu>
+    <el-menu-item index="3" disabled>消息中心</el-menu-item>
+    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+  </el-menu>
 </template>
 
 <script lang="ts">
@@ -22,16 +48,26 @@ export default {
   name: "App",
   setup() {
     const state = reactive({
-      color: ""
+      color: "",
+      value1: false,
+      activeName: "second",
+      activeIndex2: "1",
     });
     function colorChange() {
-      console.log(state.color);
-      document
-        .getElementsByTagName("body")[0]
-        .style.setProperty("--primary", state.color);
+      document.documentElement.style.setProperty(
+        "--primary-color",
+        state.color
+      );
+    }
+    function onSwitchChange1() {
+      document.documentElement.style.setProperty(
+        "--grey-model",
+        state.value1 ? "100%" : "0%"
+      );
     }
     return {
       colorChange,
+      onSwitchChange1,
       ...toRefs(state),
     };
   },
diff --git a/vue-admin-wonderful-next/src/main.ts b/vue-admin-wonderful-next/src/main.ts
index ca57534c..6eabb22e 100644
--- a/vue-admin-wonderful-next/src/main.ts
+++ b/vue-admin-wonderful-next/src/main.ts
@@ -2,8 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 
 import ElementPlus from 'element-plus';
-// import 'element-plus/lib/theme-chalk/index.css';
-import '/@/style/index.scss';
+import 'element-plus/lib/theme-chalk/index.css';
+import '/@/style/index.css';
 
 createApp(App).use(ElementPlus).mount('#app')
 
diff --git a/vue-admin-wonderful-next/src/style/index.css b/vue-admin-wonderful-next/src/style/index.css
new file mode 100644
index 00000000..bf1f5d96
--- /dev/null
+++ b/vue-admin-wonderful-next/src/style/index.css
@@ -0,0 +1,51 @@
+@import './transition.scss';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-color: #409eff;
+  --primary--color-hover: #66b1ff;
+  --grey-model: 0%;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  filter: grayscale(var(--grey-model));
+}
+
+.el-button--primary {
+  color: #ffffff;
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.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: var(--primary-color) !important;
+  background-color: var(--primary-color) !important;
+}
+
+.el-tabs__item:hover,
+.el-tabs__item.is-active {
+  color: var(--primary-color) !important;
+}
+.el-tabs__active-bar {
+  background-color: var(--primary-color) !important;
+}
+
+.el-menu-item.is-active,
+.el-submenu.is-active .el-submenu__title {
+  color: var(--primary-color) !important;
+  border-bottom-color: var(--primary-color) !important;
+}
diff --git a/vue-admin-wonderful-next/src/style/index.scss b/vue-admin-wonderful-next/src/style/index.scss
deleted file mode 100644
index 9a0404ca..00000000
--- a/vue-admin-wonderful-next/src/style/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import './element-variables.scss';
-@import './transition.scss';
-
-// @font-face {
-//   font-family: 'element-icons';
-//   src: url('./element-icons.woff') format('woff'), /* chrome, firefox */ 
-//   url('./element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-//   font-weight: normal;
-//   // font-display: $--font-display;
-//   font-style: normal;
-// }
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-}