feat: 新增 unocss 支持，新增公共样式

apps/bigmember_pc/package.json

@@ -30,9 +30,10 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
+    "@unocss/transformer-directives": "^0.58.5",
+    "@unocss/transformer-variant-group": "^0.58.5",
     "@vitejs/plugin-legacy": "^4.0.4",
     "@vitejs/plugin-vue2": "^2.2.0",
-    "vite-plugin-eslint": "^1.8.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.5.0",
@@ -41,9 +42,11 @@
     "prettier": "^2.5.1",
     "sass": "^1.63.2",
     "terser": "^5.14.2",
+    "unocss": "^0.58.5",
     "unplugin-vue-components": "^0.25.1",
     "vite": "^4.3.9",
     "vite-plugin-ejs": "^1.6.4",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-externals": "^0.6.2",
     "vite-plugin-legacy-qiankun": "^0.0.12"
   }

apps/bigmember_pc/src/App.vue

@@ -32,6 +32,7 @@ export default {
 </script>
 <style lang="scss">
 @import '~@/assets/style/common.scss';
+@import '~@/assets/style/uno.common.scss';
 @import '~@/assets/style/reset-ele.scss';
 @import '~@/assets/style/reset-qiankun.scss';
 

apps/bigmember_pc/src/assets/style/_variables.scss

@@ -17,11 +17,15 @@ $bg-color-4: linear-gradient(90deg, #f83f4f 0%, #f38797 100%);
 $bg-color-5: linear-gradient(90deg, #41af92 0%, #84ceb7 100%);
 $bg-color-6: linear-gradient(90deg, #7446a0 0%, #a380c4 100%);
 
+$bg-less: #f5feff;
+
 $font-text--title: 17px;
 
 $color-text--default: #1d1d1d;
 $color-text--active: $color_main;
-$color-input--default: #1d1d1d;
 $color-text--highlight: $color_main;
+$color-text--less: #2abed1;
+
+$color-input--default: #1d1d1d;
 
 $bg-main-color: #fff;

apps/bigmember_pc/src/assets/style/common.scss

@@ -89,7 +89,7 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
-.flex {
+.flex-w-100 {
   width: 100%;
   flex: 1;
 }
@@ -140,3 +140,5 @@ input[type='number'] {
     border: none !important;
   }
 }
+
+

apps/bigmember_pc/src/assets/style/reset-ele.scss

@@ -47,7 +47,6 @@
   }
 
   .el-button--main {
-    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
     border-color: $color-text--highlight;
     background: $color-text--highlight;
     border-radius: 6px;
@@ -65,6 +64,24 @@
     }
   }
 
+  .el-button--less {
+    border-color: $color-text--less;
+    background: $bg-less;
+    border-radius: 6px;
+    padding: 6px 16px;
+    box-sizing: border-box;
+    font-size: 16px;
+    line-height: 22px;
+    font-weight: 400;
+    color: $color-text--less;
+    &:hover,
+    &:focus {
+      border-color: $color-text--highlight;
+      background: $color-text--highlight;
+      color: #fff;
+    }
+  }
+
   .el-link {
     &.el-link--default {
       &:hover {

apps/bigmember_pc/src/assets/style/uno.common.scss

@@ -0,0 +1,24 @@
+/**
+* 常用颜色定义，对应 _variables.scss $color-text--*
+* 编译后： .color-highlight
+*/
+
+$colors: (
+  default: $color-text--default,
+  highlight: $color-text--highlight,
+);
+
+/**
+* :hover 时改变颜色
+* 编译后： .hover-color-highlight:hover
+*/
+
+@each $c, $color in $colors {
+  .color-#{$c},
+  .hover-color-#{$c}:hover {
+    color: $color;
+  }
+}
+
+
+

apps/bigmember_pc/src/main.js

@@ -1,4 +1,5 @@
 // import '@jianyu/easy-inject-qiankun/src/pre-mount.js'
+import 'virtual:uno.css'
 import Vue from 'vue'
 import App from './App.vue'
 import store from './store/'

apps/bigmember_pc/uno.config.js

@@ -0,0 +1,9 @@
+import { defineConfig, presetUno, presetAttributify } from 'unocss'
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+import transformerDirectives from '@unocss/transformer-directives'
+
+export default defineConfig({
+  // ...UnoCSS options
+  presets: [presetUno(), presetAttributify()],
+  transformers: [transformerVariantGroup(), transformerDirectives()]
+})

apps/bigmember_pc/vite.config.js

@@ -1,4 +1,5 @@
 import { resolve } from 'path'
+import UnoCSS from 'unocss/vite'
 
 import { defineConfig, loadEnv } from 'vite'
 import legacy from '@vitejs/plugin-legacy'
@@ -85,6 +86,7 @@ export default defineConfig({
   },
   plugins: [
     vue2(),
+    UnoCSS(),
     ViteEjsPlugin({
       cdn: getCDN(),
       assets: {