feat: 全局自适应1440UI图

.postcssrc.js

@@ -0,0 +1,44 @@
+/**
+ * PostCSS 配置文件
+ */
+
+module.exports = {
+    // 配置要使用的 PostCSS 插件
+    plugins: {
+        // 配置使用 autoprefixer 插件
+        // 作用：生成浏览器 CSS 样式规则前缀
+        // VueCLI 内部已经配置了 autoprefixer 插件
+        // 所以又配置了一次，所以产生冲突了
+        // 'autoprefixer': { // autoprefixer 插件的配置
+        // 配置要兼容到的环境信息
+        // browsers: ['Android >= 4.0', 'iOS >= 8']
+        // },
+
+        // 配置使用 postcss-pxtorem 插件
+        // 作用：把 px 转为 rem
+        'postcss-pxtorem': {
+            // lib-flexible 的 REM 适配方案：把一行分为 10 份，每份就是十分之一
+            // 所以 rootValue 应该设置为你的设计稿宽度的十分之一
+            // 我们的设计稿是 750，所以应该设置为 750 / 10 = 75
+            // 但是 Vant 建议设置为 37.5，为什么？因为 Vant 是基于 375 写的
+            // 所以必须设置为 37.5，唯一的缺点就是使用我们设计稿的尺寸都必须 / 2
+            // 有没有更好的办法？
+            // 如果是 Vant 的样式，就按照 37.5 来转换
+            // 如果是 我们自己 的样式，就按照 75 来转换
+            // 通过查阅文档，我们发现 rootValue 支持两种类型：
+            // 数字：固定的数值
+            // 函数：可以动态处理返回
+            // postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
+            // 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
+            // file ： vant-button.css
+            // file :  login.vue
+            mediaQuery: true, //媒体查询( @media screen 之类的)中不生效
+            // unitPrecision: 5, //保留rem小数点多少位
+            // selectorBlackList: [''],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
+            rootValue: 16, 
+            // 配置要转换的 CSS 属性
+            // * 表示所有
+            propList: ['*']
+        }
+    }
+}

package.json

@@ -49,6 +49,7 @@
     "@types/node": "^18.17.1",
     "@types/sortablejs": "^1.15.7",
     "@vitejs/plugin-vue": "^4.5.0",
+    "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.4.13",
     "core-js": "^3.32.0",
     "dotenv": "^16.3.1",
@@ -59,6 +60,7 @@
     "less-loader": "^11.1.3",
     "lint-staged": "^13.1.2",
     "postcss": "^8.4.27",
+    "postcss-pxtorem": "^6.1.0",
     "rimraf": "^4.2.0",
     "sass": "^1.69.5",
     "tailwindcss": "^3.3.3",

src/App.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { dateZhCN, zhCN } from 'naive-ui'
+import { dateZhCN, zhCN } from "naive-ui";
-import { computed } from 'vue'
+import { computed, onMounted, nextTick } from "vue";
-import { AppProvider } from '@/components/Application'
+import { AppProvider } from "@/components/Application";
-import { lighten } from '@/utils/index'
+import { lighten } from "@/utils/index";
 
 const getThemeOverrides = computed(() => {
-  const theme = '#1980FF'
+  const theme = "#1980FF";
-  const lightenStr = lighten(theme, 6)
+  const lightenStr = lighten(theme, 6);
 
   return {
     common: {
@@ -16,38 +16,53 @@ const getThemeOverrides = computed(() => {
       primaryColorSuppl: theme,
     },
     Switch: {
-      railColorActive: '#07C984',
+      railColorActive: "#07C984",
     },
     Input: {
-      borderHover: '0px',
+      borderHover: "0px",
-      borderFocus: '0px',
+      borderFocus: "0px",
-      boxShadowFocus: '#ff0000',
+      boxShadowFocus: "#ff0000",
     },
     Tag: {
-      colorCheckedHover: '#507afd',
+      colorCheckedHover: "#507afd",
-      colorCheckedPressed: '#507afd',
+      colorCheckedPressed: "#507afd",
     },
     Slider: {
-      fillColor: '#1980FF',
+      fillColor: "#1980FF",
-      dotBorderActive: '#1980FF',
+      dotBorderActive: "#1980FF",
-      fillColorHover: '#1980FF',
+      fillColorHover: "#1980FF",
     },
     Card: {
-      padding: '0px',
+      padding: "0px",
     },
     Dropdown: {
-      optionColorHover: '#e8f2ff',
+      optionColorHover: "#e8f2ff",
     },
     Upload: {
-      draggerBorder: '1px dashed #1980FF',
+      draggerBorder: "1px dashed #1980FF",
-      draggerBorderHover: '1px dashed #1980FF',
+      draggerBorderHover: "1px dashed #1980FF",
     },
-  }
+  };
-})
+});
+
+onMounted(() => {
+  window.addEventListener("resize", () => {
+    nextTick(() => {
+      const designWidth = 1440;
+      const rempPx = 16;
+      const scale = window.innerWidth / designWidth;
+      document.documentElement.style.fontSize = scale * rempPx + "px";
+    });
+  });
+});
 </script>
 
 <template>
-  <NConfigProvider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="getThemeOverrides">
+  <NConfigProvider
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme-overrides="getThemeOverrides"
+  >
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -55,15 +70,15 @@ const getThemeOverrides = computed(() => {
 </template>
 
 <style lang="less">
-.n-checkbox .n-checkbox__label{
+.n-checkbox .n-checkbox__label {
   color: #666666 !important;
   font-size: 14px !important;
 }
-.n-checkbox.n-checkbox--disabled .n-checkbox__label{
+.n-checkbox.n-checkbox--disabled .n-checkbox__label {
   color: #c9c9c9 !important;
   font-size: 14px !important;
 }
-.draggable-ul .draggable-li{
+.draggable-ul .draggable-li {
   color: #666666 !important;
   font-size: 14px !important;
 }

src/main.ts

@@ -5,6 +5,7 @@ import router, { setupRouter } from './router'
 import { setupGlobalProperties, setupMousestrap, setupNaive, setupNaiveDiscreteApi, setupSvgIcon } from '@/plugins'
 import { setupStore } from '@/store'
 import 'virtual:svg-icons-register'
+import 'amfe-flexible'
 
 async function bootstrap() {
   const app = createApp(App)