From d7ee0ddeb46de0cb9db2b0882df43ac261d43bfa Mon Sep 17 00:00:00 2001
From: yuntian001 <479820787@qq.com>
Date: Sat, 27 Aug 2022 19:36:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=A0=B7=E5=BC=8F=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

全局样式文件规范化
font-size改为自动换算rem
 不同size下的elment base font-size变更
---
 package.json                                  |  2 +
 .../header/components/tagBar/index.vue        |  6 +-
 .../components/topBar/components/left.vue     |  2 +-
 .../right/components/messageBox.vue           |  2 +-
 .../topBar/components/right/index.vue         |  2 +-
 .../header/components/topBar/index.vue        |  2 +-
 src/layout/index.vue                          |  5 +-
 src/main.ts                                   |  2 +-
 src/styles/common.scss                        | 77 -------------------
 src/styles/element-plus.scss                  | 21 +++++
 src/styles/index.scss                         | 77 +++++++++++++++++++
 src/styles/transition.scss                    | 17 ++++
 src/styles/variables.scss                     |  3 +
 src/views/login/index.vue                     |  2 +-
 vite.config.ts                                | 27 ++++++-
 15 files changed, 156 insertions(+), 91 deletions(-)
 delete mode 100644 src/styles/common.scss
 create mode 100644 src/styles/element-plus.scss
 create mode 100644 src/styles/index.scss
 create mode 100644 src/styles/transition.scss
 create mode 100644 src/styles/variables.scss

diff --git a/package.json b/package.json
index cfa2b650..7db8200a 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,13 @@
     "@typescript-eslint/parser": "^5.33.1",
     "@vitejs/plugin-vue": "^3.0.0",
     "@vue/eslint-config-typescript": "^11.0.0",
+    "autoprefixer": "^10.4.8",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "postcss-plugin-px2rem": "^0.8.1",
     "prettier": "2.7.1",
     "release-it": "^15.1.1",
     "rollup-plugin-visualizer": "^5.7.1",
diff --git a/src/layout/components/header/components/tagBar/index.vue b/src/layout/components/header/components/tagBar/index.vue
index 29026c32..7bcda19f 100644
--- a/src/layout/components/header/components/tagBar/index.vue
+++ b/src/layout/components/header/components/tagBar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="footer">
+  <div class="tag-bar">
     <a class="icon pointer" :class="{ 'is-disabled': scrollLeft <= 0 }" @click="back">
       <mel-icon-d-arrow-left></mel-icon-d-arrow-left>
     </a>
@@ -185,9 +185,9 @@ watch(route, () => {
 });
 </script>
 <style lang="scss" scoped>
-.footer {
+.tag-bar {
   border-bottom: 1px solid var(--el-border-color);
-  height: 35px;
+  height: $header-tag-height;
   display: flex;
   align-items: center;
 
diff --git a/src/layout/components/header/components/topBar/components/left.vue b/src/layout/components/header/components/topBar/components/left.vue
index 2b563bcd..b2d31237 100644
--- a/src/layout/components/header/components/topBar/components/left.vue
+++ b/src/layout/components/header/components/topBar/components/left.vue
@@ -42,7 +42,7 @@ mitter.on(event.BEFORE_ROUTE_CHANGE, ({ to }) => setBreadcrumbList(to), true);
   height: 100%;
 
   .fold-expand {
-    font-size: 1.55rem;
+    font-size: 20px;
   }
 
   &:deep(.el-breadcrumb__inner.is-link) {
diff --git a/src/layout/components/header/components/topBar/components/right/components/messageBox.vue b/src/layout/components/header/components/topBar/components/right/components/messageBox.vue
index 80b0068c..f736609b 100644
--- a/src/layout/components/header/components/topBar/components/right/components/messageBox.vue
+++ b/src/layout/components/header/components/topBar/components/right/components/messageBox.vue
@@ -54,7 +54,7 @@ const isDot = ref(true);
 .message-tabs {
   padding: 15px 10px;
   height: 300px;
-  font-size: 1rem;
+  font-size: 14px;
 
   .message-header {
     display: flex;
diff --git a/src/layout/components/header/components/topBar/components/right/index.vue b/src/layout/components/header/components/topBar/components/right/index.vue
index 813ad2da..8434a533 100644
--- a/src/layout/components/header/components/topBar/components/right/index.vue
+++ b/src/layout/components/header/components/topBar/components/right/index.vue
@@ -21,7 +21,7 @@ const { themeConfig } = useSettingStore();
 </script>
 <style lang="scss" scoped>
 .right {
-  font-size: 1rem;
+  font-size: 14px;
   height: 100%;
   display: flex;
 
diff --git a/src/layout/components/header/components/topBar/index.vue b/src/layout/components/header/components/topBar/index.vue
index 46f46e67..6e96e505 100644
--- a/src/layout/components/header/components/topBar/index.vue
+++ b/src/layout/components/header/components/topBar/index.vue
@@ -11,7 +11,7 @@ import Right from './components/right/index.vue';
 </script>
 <style lang="scss" scoped>
 .top-bar {
-  height: 48px;
+  height: $header-top-height;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index bd190a6a..5cc3b155 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -60,9 +60,6 @@ const globalStore = useGlobalStore();
 }
 
 .main {
-  padding: 1rem;
-}
-:global(.me-sidebar-drawer .el-drawer__body) {
-  padding: 0;
+  padding: $page-padding;
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 3d5bb081..51a0e5b0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
 import '@/event/module';
-import '@/styles/common.scss';
+import '@/styles/index.scss';
 import { bootscrapt } from './app';
 bootscrapt();
diff --git a/src/styles/common.scss b/src/styles/common.scss
deleted file mode 100644
index 0299d495..00000000
--- a/src/styles/common.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-html {
-  body {
-    margin: 0;
-    padding: 0;
-    color: var(--el-text-color-primary);
-
-    #app {
-      width: 100%;
-      height: 100vh;
-    }
-  }
-
-  div,
-  span {
-    box-sizing: border-box;
-  }
-
-  .pointer {
-    cursor: pointer;
-    /*鼠标变小手*/
-  }
-
-  .flex-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  a:hover,
-  a:visited,
-  a:link,
-  a:active {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  .ellipsis-1 {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .ellipsis-2 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .ellipsis-3 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-}
-
-.me-large {
-  //element-plus 在切换large与default时 大部分组件字体大小用的base，间距大了字体依然没变。这里强制将font-size-base设置为large
-  --el-font-size-base: var(--el-font-size-large);
-}
-
-.me-large {
-  font-size: var(--el-font-size-base);
-}
-
-.me-default {
-  font-size: var(--el-font-size-base);
-}
-
-.me-small {
-  font-size: var(--el-font-size-small);
-}
-.el-color-predefine__color-selector > div {
-  border: 1px solid var(--el-border-color);
-}
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
new file mode 100644
index 00000000..cd3716fe
--- /dev/null
+++ b/src/styles/element-plus.scss
@@ -0,0 +1,21 @@
+//自定义 element-ui 样式
+.me-large {
+  //这里强制将font-size-base设置为large
+  --el-font-size-base: var(--el-font-size-large);
+}
+.me-small {
+  //这里强制将font-size-base设置为small
+  --el-font-size-base: var(--el-font-size-small);
+}
+//颜色选择器预定义样式加上border
+.el-color-predefine__color-selector > div {
+  border: 1px solid var(--el-border-color);
+}
+.me-sidebar-drawer {
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+.el-breadcrumb {
+  font-size: var(--el-font-size-base);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 00000000..acbf76b9
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,77 @@
+@import './element-plus.scss';
+@import './transition.scss';
+html {
+  body {
+    margin: 0;
+    padding: 0;
+    color: var(--el-text-color-primary);
+
+    #app {
+      width: 100%;
+      height: 100vh;
+    }
+  }
+
+  div,
+  span {
+    box-sizing: border-box;
+  }
+}
+
+.me-large {
+  font-size: var(--el-font-size-base);
+}
+
+.me-default {
+  font-size: var(--el-font-size-base);
+}
+
+.me-small {
+  font-size: var(--el-font-size-small);
+}
+
+//鼠标变小手
+.pointer {
+  cursor: pointer;
+}
+
+//用felx 子元素居中
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+//去a标签默认样式
+a:hover,
+a:visited,
+a:link,
+a:active {
+  color: inherit;
+  text-decoration: none;
+}
+
+//超出一行...
+.ellipsis-1 {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+//超出两行...
+.ellipsis-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+//超出三行...
+.ellipsis-3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
new file mode 100644
index 00000000..35361bd9
--- /dev/null
+++ b/src/styles/transition.scss
@@ -0,0 +1,17 @@
+//动画样式文件
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 00000000..e0775779
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,3 @@
+$page-padding: 20px;
+$header-top-height: 48px;
+$header-tag-height: 35px;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index da71bb08..6fba87d4 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -148,7 +148,7 @@ const login = async () => {
       text-align: center;
       width: 100%;
       margin-bottom: 20px;
-      font-size: 1.6rem;
+      font-size: 20px;
       font-weight: bold;
     }
     :deep(.el-input) {
diff --git a/vite.config.ts b/vite.config.ts
index 6550a2fb..074dd077 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,8 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import { splitVendorChunkPlugin } from 'vite';
 // @ts-ignore
 import { loadMessageConfig } from './src/config/locale';
-
+import autoprefixer from 'autoprefixer';
+import px2rem from 'postcss-plugin-px2rem';
 function pathResolve(dir: string) {
   return resolve(process.cwd(), '.', dir);
 }
@@ -126,6 +127,30 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       ]),
       visualizer(),
     ],
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles/variables.scss" as *;`,
+        },
+      },
+      postcss: {
+        plugins: [
+          autoprefixer,
+          px2rem({
+            rootValue: 14, //换算基数，将 px 替换为 1/rootValue rem (即设计图下的fontSize)
+            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
+            propWhiteList: ['font-size'], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
+            // propBlackList: ['font-size', 'border'], //不应从 px 更改为 rem 的属性
+            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
+            // selectorBlackList: [], //要忽略并保留为px的选择器
+            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
+            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
+            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
+            minPixelValue: 2, //设置要替换的最小像素值(包含)。 默认 0
+          }),
+        ],
+      },
+    },
     resolve: {
       alias: [
         // /@/xxxx => src/xxxx