feat(框架): 分辨率适配

package.json

@@ -41,11 +41,13 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@vitejs/plugin-vue": "5.0.5",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^16.0.0",
+    "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.5.2",
     "sass": "1.77.5",
     "unplugin-auto-import": "0.17.6",

src/assets/styles/element-ui.scss

 // cover some element-ui styles
-
+$base-font-size: 16px;
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
   font-weight: 400 !important;
@@ -93,4 +93,26 @@
 
 .el-dropdown .el-dropdown-link{
   color: var(--el-color-primary) !important;
-}
\ No newline at end of file
+}
+
+.el-input{
+  height: 36px;
+}
+.el-select{
+  height: 36px;
+}
+.el-form-item__label{
+  font-size:$base-font-size;
+}
+.el-table--default {
+  font-size: $base-font-size;
+}
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
+  font-size: $base-font-size !important;
+}
+.el-input__inner {
+  font-size: 14px;
+}
+.el-select__wrapper{
+  min-height:36px;
+}

src/assets/styles/variables.module.scss

@@ -21,7 +21,7 @@ $menuLightText: #303133;
 $menuLightActiveText: #409EFF;
 
 // 基础变量
-$base-sidebar-width: 200px;
+$base-sidebar-width: 250px;
 $sideBarWidth: 200px;
 
 // 菜单暗色变量
@@ -37,7 +37,6 @@ $--color-success: #67C23A;
 $--color-warning: #E6A23C;
 $--color-danger: #F56C6C;
 $--color-info: #909399;
-
 :export {
   menuText: $menuText;
   menuActiveText: $menuActiveText;
@@ -71,13 +70,13 @@ $--color-info: #909399;
   --sidebar-bg: #{$menuBg};
   --sidebar-text: #{$menuText};
   --menu-hover: #{$menuHover};
-  
+
   --navbar-bg: #ffffff;
   --navbar-text: #303133;
-  
+  --el-menu-item-font-size:14px;
   /* splitpanes default-theme 变量 */
   --splitpanes-default-bg: #ffffff;
-
+  --el-font-size-base:16px;
 }
 
 // 暗黑模式变量
@@ -119,7 +118,7 @@ html.dark {
   --blockquote-bg: #1d1e1f;
   --blockquote-border: #303030;
   --blockquote-text: #d0d0d0;
-  
+
   /* Cron 时间表达式 模式变量 */
   --cron-border: #303030;
 
@@ -199,7 +198,7 @@ html.dark {
       background-color: var(--el-bg-color-overlay);
     }
   }
-  
+
   /* 下拉菜单样式覆盖 */
   .el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover{
     background-color: var(--navbar-hover) !important;
@@ -211,7 +210,7 @@ html.dark {
     border-left-color: var(--blockquote-border) !important;
     color: var(--blockquote-text) !important;
   }
-  
+
   /* 时间表达式标题样式覆盖 */
   .popup-result .title {
     background: var(--cron-border);

src/main.js

@@ -6,6 +6,7 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
+import "./utils/rem.js"; // 自适应分辨率
 
 import '@/assets/styles/index.scss' // global css
 

src/utils/rem.js

+// rem等比适配配置文件
+// 基准大小
+const baseSize = 15
+// 设置 rem 函数
+function setRem () {
+    // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
+    const scale = document.documentElement.clientWidth / 1920
+    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+    setRem()
+}

vite.config.js

@@ -2,6 +2,7 @@ import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
 
+import postcsspxtorem from "postcss-pxtorem"
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {
   const env = loadEnv(mode, process.cwd())
@@ -39,6 +40,9 @@ export default defineConfig(({ mode, command }) => {
     },
     //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
     css: {
+      sass: {
+        sassOptions: { outputStyle: 'expanded' },
+      },
       postcss: {
         plugins: [
           {
@@ -50,7 +54,13 @@ export default defineConfig(({ mode, command }) => {
                 }
               }
             }
-          }
+          },
+          postcsspxtorem({
+            rootValue: 15,
+            propList: ["*", '!border'],
+            unitPrecision: 4,//px变为rem后保留的小数位数
+            minPixelValue: 2 //px小于2px时不替换为rem
+          }),
         ]
       }
     }