refactor: 样式规范化

全局样式文件规范化
font-size改为自动换算rem
 不同size下的elment base font-size变更

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",

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;
 

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) {

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;

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;
 

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;

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>

src/main.ts

@@ -1,4 +1,4 @@
 import '@/event/module';
-import '@/styles/common.scss';
+import '@/styles/index.scss';
 import { bootscrapt } from './app';
 bootscrapt();

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);
+}

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;
+}

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);
+}

src/styles/variables.scss

@@ -0,0 +1,3 @@
+$page-padding: 20px;
+$header-top-height: 48px;
+$header-tag-height: 35px;

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) {

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