refactor(unocss): 迁移至@uni-helper/unocss-preset-uni预设并优化配置

- 使用@uni-helper/unocss-preset-uni替代原有小程序预设配置
- 移除unocss-applet依赖及相关自定义规则
- 更新vite配置中UnoCSS的异步导入方式
- 添加fg-*组件自动导入规则
- 更新about页面导航栏标题
- 调整package.json依赖版本
```

这个提交消息：
1. 使用`refactor`类型，因为这是对CSS配置体系的重构
2. 添加`unocss`作用域明确修改范围
3. 简明描述主要变更内容
4. 使用中文符合要求
5. 通过条目列出重要修改点，避免重复描述

package.json

@@ -121,6 +121,7 @@
     "@types/node": "^20.17.9",
     "@types/wechat-miniprogram": "^3.4.8",
     "@uni-helper/uni-types": "1.0.0-alpha.3",
+    "@uni-helper/unocss-preset-uni": "^0.2.11",
     "@uni-helper/vite-plugin-uni-layouts": "^0.1.10",
     "@uni-helper/vite-plugin-uni-manifest": "^0.2.8",
     "@uni-helper/vite-plugin-uni-pages": "0.2.20",
@@ -140,8 +141,7 @@
     "sass": "1.77.8",
     "terser": "^5.36.0",
     "typescript": "^5.7.2",
-    "unocss": "66.1.2",
-    "unocss-applet": "^0.7.8",
+    "unocss": "^66.0.0",
     "unplugin-auto-import": "^0.17.8",
     "vite": "5.2.8",
     "vite-plugin-restart": "^0.4.2",

src/main.ts

@@ -1,6 +1,6 @@
 import '@/style/index.scss'
 import { VueQueryPlugin } from '@tanstack/vue-query'
-import 'virtual:uno.css'
+import 'uno.css'
 import { createSSRApp } from 'vue'
 
 import App from './App.vue'

src/pages.json

@@ -9,6 +9,7 @@
   "easycom": {
     "autoscan": true,
     "custom": {
+      "^fg-(.*)": "@/components/fg-$1/fg-$1.vue",
       "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue",
       "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
     }
@@ -50,7 +51,8 @@
       "path": "pages/about/about",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "关于"
+        "navigationBarTitleText": "关于",
+        "navigationStyle": "custom"
       }
     }
   ],

src/pages/about/about.vue

@@ -2,23 +2,26 @@
 {
   style: {
     navigationBarTitleText: '关于',
+    navigationStyle: 'custom', // 开启自定义导航栏
   },
 }
 </route>
 
 <template>
-  <view
-    class="bg-white overflow-hidden pt-2 px-4"
-    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
-  >
+  <view>
     <fg-navbar>关于</fg-navbar>
-    <view class="text-center text-3xl mt-8">
-      鸽友们好，我是
-      <text class="text-red-500">菲鸽</text>
+    <view
+      class="bg-white overflow-hidden pt-2 px-4"
+      :style="{ marginTop: safeAreaInsets?.top + 'px' }"
+    >
+      <view class="text-center text-3xl mt-8">
+        鸽友们好，我是
+        <text class="text-red-500">菲鸽</text>
+      </view>
+      <view class="test-css">测试 scss 样式</view>
+      <RequestComp />
+      <UploadComp />
     </view>
-    <view class="test-css">测试 scss 样式</view>
-    <RequestComp />
-    <UploadComp />
   </view>
 </template>
 

src/types/async-component.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by @uni-ku/bundle-optimizer
+declare module '*?async' {
+  const component: any
+  export = component
+}

src/types/async-import.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by @uni-ku/bundle-optimizer
+export {}
+
+interface ModuleMap {
+  [path: string]: any
+}
+
+declare global {
+  function AsyncImport<T extends keyof ModuleMap>(arg: T): Promise<ModuleMap[T]>
+}

uno.config.ts

@@ -1,37 +1,9 @@
-// uno.config.ts
-import {
-  type Preset,
-  defineConfig,
-  presetUno,
-  presetAttributify,
-  presetIcons,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
+import { presetUni } from '@uni-helper/unocss-preset-uni'
+import { defineConfig, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss'
 
-import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet'
-
-// @see https://unocss.dev/presets/legacy-compat
-// import { presetLegacyCompat } from '@unocss/preset-legacy-compat'
-
-const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false
-
-const presets: Preset[] = []
-if (isMp) {
-  // 使用小程序预设
-  presets.push(presetApplet(), presetRemRpx())
-} else {
-  presets.push(
-    // 非小程序用官方预设
-    presetUno(),
-    // 支持css class属性化
-    presetAttributify(),
-  )
-}
 export default defineConfig({
   presets: [
-    ...presets,
-    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
+    presetUni(),
     presetIcons({
       scale: 1.2,
       warn: true,
@@ -40,50 +12,6 @@ export default defineConfig({
         'vertical-align': 'middle',
       },
     }),
-    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
-    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
-    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
-    // 与群友的正常写法冲突，先去掉！（2024-05-25）
-    // presetLegacyCompat({
-    //   commaStyleColorFunction: true,
-    // }) as Preset,
-  ],
-  /**
-   * 自定义快捷语句
-   * @see https://github.com/unocss/unocss#shortcuts
-   */
-  shortcuts: [['center', 'flex justify-center items-center']],
-  transformers: [
-    // 启用 @apply 功能
-    transformerDirectives(),
-    // 启用 () 分组功能
-    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
-    transformerVariantGroup(),
-    // Don't change the following order
-    transformerAttributify({
-      // 解决与第三方框架样式冲突问题
-      prefixedOnly: true,
-      prefix: 'fg',
-    }),
-  ],
-  rules: [
-    [
-      'p-safe',
-      {
-        padding:
-          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
-      },
-    ],
-    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
-    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
   ],
+  transformers: [transformerDirectives(), transformerVariantGroup()],
 })
-
-/**
- * 最终这一套组合下来会得到：
- * mp 里面：mt-4 => margin-top: 32rpx  == 16px
- * h5 里面：mt-4 => margin-top: 1rem == 16px
- *
- * 如果是传统方式写样式，则推荐设计稿设置为 750，这样设计稿1px，代码写1rpx。
- * rpx是响应式的，可以让不同设备的屏幕显示效果保持一致。
- */

vite.config.ts

@@ -17,14 +17,14 @@ import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
  */
 import Optimization from '@uni-ku/bundle-optimizer'
 import { visualizer } from 'rollup-plugin-visualizer'
-// @see https://unocss.dev/
-import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import ViteRestart from 'vite-plugin-restart'
 import { copyNativeRes } from './vite-plugins/copyNativeRes'
 
 // https://vitejs.dev/config/
-export default ({ command, mode }) => {
+export default async ({ command, mode }) => {
+  // @see https://unocss.dev/
+  const UnoCSS = (await import('unocss/vite')).default
   // console.log(mode === process.env.NODE_ENV) // true
 
   // mode: 区分生产环境还是开发环境