refactor: ♻️ 修复原子化 css 移动端适配问题

在写原子化 css 的时候通过 unocss 的 presetRemToPx 预设它可以原子化默认 rem 转换成 px，最后再由 postcss 把 px 转成 vw，从而让我们无痛使用原子化css

closed #6, #20

index.html

@@ -38,7 +38,7 @@
           flex-direction: column;
         }
         .first-loading-wrap > h1 {
-          font-size: 128px;
+          font-size: 28px;
         }
         .first-loading-wrap .loading-wrap {
           padding: 98px;
@@ -51,14 +51,14 @@
           transform: rotate(45deg);
           position: relative;
           display: inline-block;
-          font-size: 52px;
+          font-size: 12px;
-          width: 52px;
+          width: 30px;
-          height: 52px;
+          height: 30px;
           box-sizing: border-box;
         }
         .dot i {
-          width: 24px;
+          width: 14px;
-          height: 24px;
+          height: 14px;
           position: absolute;
           display: block;
           background-color: #1890ff;

package.json

@@ -57,6 +57,7 @@
     "@types/node": "^20.10.5",
     "@types/qs": "^6.9.11",
     "@unocss/eslint-plugin": "^0.58.4",
+    "@unocss/preset-rem-to-px": "^0.58.5",
     "@unocss/transformer-directives": "^0.58.4",
     "@unocss/transformer-variant-group": "^0.58.4",
     "@vitejs/plugin-vue": "^5.0.0",
@@ -98,12 +99,10 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^1.8.27"
   },
-
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
     "commit-msg": "npx --no-install commitlint --edit $1"
   },
-
   "lint-staged": {
     "*": "eslint --fix"
   },

pnpm-lock.yaml

@@ -82,6 +82,9 @@ devDependencies:
   '@unocss/eslint-plugin':
     specifier: ^0.58.4
     version: 0.58.5(eslint@8.56.0)(typescript@5.3.3)
+  '@unocss/preset-rem-to-px':
+    specifier: ^0.58.5
+    version: 0.58.5
   '@unocss/transformer-directives':
     specifier: ^0.58.4
     version: 0.58.5
@@ -2068,6 +2071,12 @@ packages:
       '@unocss/rule-utils': 0.58.5
     dev: true
 
+  /@unocss/preset-rem-to-px@0.58.5:
+    resolution: {integrity: sha512-gM1jy/HoUS/HeiuOt5u+fAAWT/PPLqfC8eWGRrtqm22zKOq0Ea/Lp8Jh+BApc1cGby2xw6lwiFJRbFbiPaFoNw==}
+    dependencies:
+      '@unocss/core': 0.58.5
+    dev: true
+
   /@unocss/preset-tagify@0.58.5:
     resolution: {integrity: sha512-UB9IXi8vA/SzmmRLMWR7bzeBpxpiRo7y9xk3ruvDddYlsyiwIeDIMwG23YtcA6q41FDQvkrmvTxUEH9LFlv6aA==}
     dependencies:

postcss.config.js

@@ -20,7 +20,7 @@ import viewport from 'postcss-mobile-forever'
 
 const baseViewportOpts = {
   appSelector: '#app', // 根元素选择器，用于设置桌面端和横屏时的居中样式
-  viewportWidth: 750, // 设计稿的视口宽度，可传递函数动态生成视图宽度
+  viewportWidth: 375, // 设计稿的视口宽度，可传递函数动态生成视图宽度
   unitPrecision: 3, // 单位转换后保留的精度（很多时候无法整除）
   maxDisplayWidth: 600, // 桌面端最大展示宽度
   propList: [
@@ -45,8 +45,8 @@ export default {
     autoprefixer(),
     viewport({
       ...baseViewportOpts,
-      // 只将 vant 转为 350 设计稿的 viewport，其它样式的视图宽度为 750
+      // 只将 vant 转为 375 设计稿的 viewport，其它样式的视图宽度为 750
-      viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
+      // viewportWidth: file => (file.includes('node_modules/vant/') ? 375 : 750),
     }),
   ],
 }

src/styles/common.less

@@ -94,7 +94,7 @@ a:hover {
 }
 
 .xicon {
-  font-size: 42px;
+  font-size: 18px;
 
   svg {
     width: 100% !important;

src/views/dashboard/index.vue

@@ -5,6 +5,7 @@
       <div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
         {{ title }}
       </div>
+
       <div class="mb-6 mt-4 w-full">
         <van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
           <van-swipe-item

src/views/login/ForgetPasswordForm.vue

@@ -2,7 +2,7 @@
   <van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleReset">
     <van-field
       v-model="formData.username"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="username"
       placeholder="用户名"
       :rules="getFormRules.username"
@@ -16,7 +16,7 @@
 
     <van-field
       v-model="formData.mobile"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="password"
       placeholder="手机号码"
       :rules="getFormRules.mobile"
@@ -30,7 +30,7 @@
 
     <van-field
       v-model="formData.sms"
-      class="enter-y mb-70px items-center !rounded-md"
+      class="enter-y mb-10 items-center !rounded-md"
       center
       clearable
       placeholder="请输入短信验证码"
@@ -47,9 +47,11 @@
         </van-button>
       </template>
     </van-field>
-
+    <van-button type="success">
+      成功按钮
+    </van-button>
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -59,7 +61,7 @@
     </van-button>
 
     <van-button
-      class="enter-y !mb-150px !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

src/views/login/LoginForm.vue

@@ -2,7 +2,7 @@
   <van-form v-if="getShow" ref="formRef" class="flex flex-col items-center" @submit="handleSubmit">
     <van-field
       v-model="formData.username"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       name="username"
       placeholder="用户名"
       :rules="getFormRules.username"
@@ -15,7 +15,7 @@
     </van-field>
     <van-field
       v-model="formData.password"
-      class="enter-y mb-25px items-center !rounded-md"
+      class="enter-y mb-4 items-center !rounded-md"
       :type="switchPassType ? 'password' : 'text'"
       name="password"
       placeholder="密码"
@@ -37,16 +37,16 @@
       </template>
     </van-field>
 
-    <div class="enter-y mb-100px w-full flex justify-between px-5px">
+    <div class="enter-y mb-10 w-full flex justify-between px-5px">
       <div class="flex items-center">
-        <van-switch v-model="rememberMe" class="mr-8px !text-30px" />
+        <van-switch v-model="rememberMe" size="18px" class="mr-8px" />
-        <span class="!text-25px">记住我</span>
+        <span>记住我</span>
       </div>
-      <a class="!text-25px" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
+      <a @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">忘记密码?</a>
     </div>
 
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -55,7 +55,7 @@
       登 录
     </van-button>
     <van-button
-      class="enter-y !mb-25 !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

src/views/login/LoginTitle.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col items-center justify-center">
-    <div class="logo enter-y my-35px">
+    <div class="logo enter-y mb-2 mt-8">
-      <SvgIcon class="!h-250px !w-250px" name="logo" />
+      <SvgIcon class="!h-30 !w-30" name="logo" />
     </div>
-    <div class="text-darkBlue dark:text-garyWhite enter-y mb-80px text-45px font-black">
+    <div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
       {{ title }}
     </div>
   </div>

src/views/login/RegisterForm.vue

@@ -1,6 +1,6 @@
 <template>
   <van-form v-if="getShow" ref="formRef" class="flex flex-col" @submit="handleRegister">
-    <van-cell-group inset class="enter-y !mx-0 !mb-60px">
+    <van-cell-group inset class="enter-y !mx-0 !mb-10">
       <van-field
         v-model="formData.username"
         class="enter-y items-center !rounded-md"
@@ -111,7 +111,7 @@
     </van-cell-group>
 
     <van-button
-      class="enter-y !mb-25px !rounded-md"
+      class="enter-y !mb-4 !rounded-md"
       type="primary"
       block
       native-type="submit"
@@ -121,7 +121,7 @@
     </van-button>
 
     <van-button
-      class="enter-y !mb-150px !rounded-md"
+      class="enter-y !rounded-md"
       plain
       type="primary"
       block

src/views/my/EditNickname.vue

@@ -2,13 +2,13 @@
   <div>
     <NavBar>
       <template #right>
-        <span class="text-32px" @click="handleNickname">保存</span>
+        <span @click="handleNickname">保存</span>
       </template>
     </NavBar>
     <van-form ref="formRef">
       <van-field
         v-model="formValue.nickname"
-        class="mt-20px"
+        class="mt-4"
         name="nickname"
         placeholder="请输入昵称（2-12字）"
         :rules="[
@@ -20,7 +20,7 @@
       />
     </van-form>
 
-    <div class="note px-30px">
+    <div class="note p-6">
       <p>昵称支持2-12个中文字符或3-24个英文字符，</p>
       <p>符号仅支持”-“和”_“和”.“以及“·”</p>
     </div>
@@ -82,9 +82,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .note {
+.note {
-  margin-top: 15px;
-  font-size: 25px;
   color: var(--van-text-color-2);
 }
 </style>

src/views/my/EditSign.vue

@@ -2,7 +2,7 @@
   <div>
     <NavBar>
       <template #right>
-        <span class="text-32px" @click="handleNickname">保存</span>
+        <span @click="handleNickname">保存</span>
       </template>
     </NavBar>
     <van-form ref="formRef">
@@ -16,7 +16,7 @@
         label="签名"
         type="textarea"
         maxlength="70"
-        placeholder="介绍一下你自己"
+        placeholder="随知修行乃当务之急，然怠惰度日至今"
         show-word-limit
       />
     </van-form>
@@ -65,9 +65,5 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .note {
+
-  margin-top: 15px;
-  font-size: 25px;
-  color: var(--van-text-color-2);
-}
 </style>

src/views/my/EditUserInfo.vue

@@ -13,7 +13,11 @@
     >
       <template #input>
         <UploaderImage>
-          <van-image class="avatar" round fit="cover" :src="avatar" />
+          <van-image
+            class="h-16 w-16"
+            round fit="cover"
+            :src="avatar"
+          />
         </UploaderImage>
       </template>
     </van-field>
@@ -65,7 +69,11 @@
     >
       <template #input>
         <UploaderImage>
-          <van-image class="cover" fit="cover" :src="cover ? cover : avatar" />
+          <van-image
+            class="cover h-15 w-25"
+            fit="cover"
+            :src="cover ? cover : avatar"
+          />
         </UploaderImage>
       </template>
     </van-field>
@@ -121,10 +129,8 @@ const showIndustryPicker = ref(false)
 const state = reactive({
   nickname: '',
   sign: '',
-  // the field v-model
   genderText: '',
   industryText: '',
-  // the pick v-model
   industryValues: [0],
   genderValues: [0],
 })
@@ -165,13 +171,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
-  .avatar {
-  width: 140px;
-  height: 140px;
-}
 .cover {
-  width: 170px;
-  height: 100px;
   :deep(.van-image__img) {
     border-radius: 10px !important;
   }

src/views/my/ThemeSetting.vue

@@ -14,17 +14,17 @@
         <span
           v-for="(item, index) in designStore.appThemeList"
           :key="index"
-          h="70px"
+          h="9"
-          w="70px"
+          w="9"
           items-center
-          border="2 rounded-md border-white"
+          border="2 rounded-md"
           flex="~"
           justify="center"
           :style="{ 'background-color': item }"
           @click="togTheme(item)"
         >
           <Icon v-if="item === designStore.appTheme">
-            <CheckOutlined h="!60px" w="!60px" text="white" />
+            <CheckOutlined text="white" />
           </Icon>
         </span>
       </div>

src/views/my/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
-    <div :style="getUserCoverBg" class="my-bg h-550px -z-19" />
+    <div :style="getUserCoverBg" class="my-bg h-70" />
     <div
-      class="my-card relative mx-40px flex flex-col items-center rounded-2xl pb-20px shadow-xl -top-150px"
+      class="my-card relative mx-6 flex flex-col items-center rounded-2xl pb-2 shadow-xl -top-18"
     >
       <van-image
-        class="h-170px w-170px border-4 border-solid !absolute -top-90px"
+        class="fixed h-22 w-22 border-2 border-solid -top-10"
         round
         fit="cover"
         :src="avatar"
       />
-      <div class="mt-90px flex flex-col items-center">
+      <div class="flex flex-col items-center -mt-10">
-        <p class="mb-20px text-40px font-black">
+        <p class="mb-2 text-5 font-black">
           {{ nickname }}
         </p>
-        <p class="px-36px text-30px">
+        <p class="text-4">
           {{ sign }}
         </p>
       </div>

src/views/welcome/index.vue

@@ -11,7 +11,7 @@
           <SvgIcon :size="130" name="logo" />
         </div>
         <div
-          class="text-darkBlue dark:text-garyWhite enter-y mb-4 mt-12 text-center text-2xl font-black"
+          class="enter-y text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black"
         >
           欢迎来到 {{ title }}
         </div>

uno.config.ts

@@ -1,4 +1,3 @@
-// uno.config.ts
 import {
   defineConfig,
   presetAttributify,
@@ -7,7 +6,7 @@ import {
   presetUno,
   presetWebFonts,
 } from 'unocss'
-
+import presetRemToPx from '@unocss/preset-rem-to-px'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import transformerDirectives from '@unocss/transformer-directives'
 
@@ -17,6 +16,11 @@ export default defineConfig({
     // 此预设尝试提供流行的实用程序优先框架的通用超集，包括 Tailwind CSS、Windi CSS、Bootstrap、Tachyons 等
     presetUno(),
 
+    // 模板使用 viewport 作为移动端适配方案，unocss 默认单位为 rem
+    // 所以需要转成 px，然后由 postcss 把 px 转成 vw/vh，完成适配
+    // https://unocss.dev/presets/rem-to-px
+    presetRemToPx(),
+
     // 图标预设: https://unocss.dev/presets/icons
     presetIcons({
       extraProperties: {

vite.config.ts

@@ -152,7 +152,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // }
     },
 
-    // 有需要再打开，否则 既不优化 也不排除
     optimizeDeps: {
       /**
        * 依赖预构建，vite 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，
@@ -172,7 +171,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       ],
       // 打包时强制排除的依赖项
       exclude: [
-
+        // https://www.mulingyuer.com/archives/928/
+        'vant',
+        '@vant/use',
       ],
     },