本 PR 修复了在 H5 模式下构建与运行时兼容性问题

config/index.ts

@@ -45,7 +45,12 @@ export default defineConfig(async (merge) => {
       },
     },
     framework: "react",
-    compiler: "webpack5",
+    compiler: {
+      type: "webpack5",
+      prebundle: {
+        enable: false,
+      },
+    },
     cache: {
       enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
     },
@@ -88,43 +93,37 @@ export default defineConfig(async (merge) => {
       publicPath: "/",
       staticDirectory: "static",
       esnextModules: ["@taroify"],
-      output: {
-        filename: "js/[name].[hash:8].js",
-        chunkFilename: "js/[name].[chunkhash:8].js",
-      },
-      miniCssExtractPluginOption: {
-        ignoreOrder: true,
-        filename: "css/[name].[hash].css",
-        chunkFilename: "css/[name].[chunkhash].css",
-      },
       router: {
         mode: "browser",
       },
       devServer: {
         port: 8888,
-        hot: false,
+        hot: true,
         host: "0.0.0.0",
         historyApiFallback: true,
         headers: {
           "Access-Control-Allow-Origin": "*", // 表示允许跨域
         },
+        client: {
+          overlay: false,
+        },
       },
       postcss: {
         autoprefixer: {
           enable: true,
           config: {},
         },
-        cssModules: {
-          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-          config: {
-            namingPattern: "module", // 转换模式，取值为 global/module
-            generateScopedName: "[name]__[local]___[hash:base64:5]",
-          },
+        pxtransform: {
+          enable: true,
+          config: {},
         },
       },
       webpackChain(chain) {
         chain.resolve.plugin("tsconfig-paths").use(TsconfigPathsPlugin);
-        chain.plugin("unocss").use(UnoCSS());
+        chain.plugin("unocss").use(UnoCSS({
+          // Force UnoCSS Webpack injection to be handled securely as CSS rather than throwing raw AST
+          hmrTopLevelAwait: false,
+        }));
       },
     },
     rn: {

package.json

@@ -136,15 +136,22 @@
     "pinyin-pro": "3.25.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "sass": "^1.77.8",
     "sr-sdk-wxapp": "^2.1.1",
     "taro-hooks": "^2.1.0",
     "yet-another-abortcontroller-polyfill": "^0.0.4",
     "zod": "^3.24.2"
   },
   "devDependencies": {
     "@babel/core": "^7.26.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-react": "^7.28.5",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
+    "@iconify-json/iconamoon": "^1.2.2",
+    "@iconify-json/line-md": "^1.2.14",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/tabler": "^1.2.27",
     "@iconify/json": "^2.2.304",
     "@kirklin/eslint-config": "^3.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",

src/app.scss

@@ -1,4 +1,5 @@
-page {
+page,
+:root {
   // Color Palette
   --black: #000;
   --white: #fff;

src/components/PageWrapper/Navigation.tsx

@@ -85,7 +85,20 @@ export default function Navigation({
     const fetchMenuButtonInfo = async () => {
       try {
         const windowInfo = Taro.getWindowInfo();
-        const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
+        let menuButtonInfo;
+
+        if (process.env.TARO_ENV === "h5") {
+          // H5 模拟胶囊按钮信息的默认值
+          menuButtonInfo = {
+            top: 7,
+            height: 32,
+            width: 87,
+            right: windowInfo.windowWidth - 7,
+          };
+        } else {
+          menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
+        }
+
         setMenuButton({
           top: menuButtonInfo.top,
           height: menuButtonInfo.height,

src/pages/index/index.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Tag } from "@taroify/core";
 import { Image, Text, View } from "@tarojs/components";
-import { useLoad } from "@tarojs/taro";
+import Taro, { useLoad } from "@tarojs/taro";
 import { useState } from "react";
 import { cache } from "~/cache";
 import PageWrapper from "~/components/PageWrapper";
@@ -132,18 +132,21 @@ export default function Index() {
               查看全部
             </View>
           </View>
-          <View className="relative m-0 space-y-4">
+          <View className="relative m-0" style={{ height: Taro.pxTransform(230) }}>
             {[1, 2, 3].map((item, index) => (
               <View
                 key={item}
-                className="absolute w-full transition-transform"
+                className="absolute w-full"
                 style={{
-                  transform: `translateY(${index * 1.6}rem) scale(${1 - index * 0.1})`,
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  transform: `translateY(${Taro.pxTransform(index * 70)}) scale(${1 - index * 0.04})`,
                   zIndex: 4 - index,
                 }}
               >
                 <View className="flex items-center rounded-xl bg-gray-100 p-4 shadow-lg">
-                  <Image className="mr-2 h-8 w-8 rounded-full" src={`https://avatars.githubusercontent.com/u/17453452?v=" />${item}`} />
+                  <Image className="mr-2 h-8 w-8 rounded-full" src={`https://avatars.githubusercontent.com/u/17453452?v=${item}`} />
                   <View className="flex-1">
                     <View className="text-gray-800 font-medium">
                       示例项目

src/sr.config.ts

@@ -1,7 +1,5 @@
 // srInit.ts
-import sr from "sr-sdk-wxapp";
-
-// srConfig.ts
+// import sr from "sr-sdk-wxapp";// srConfig.ts
 export const srConfig = {
   /**
    * 有数 - ka‘接入测试用’ 分配的 app_id，对应的业务接口人负责
@@ -70,8 +68,13 @@ export const srConfig = {
   },
 };
 
-export function initSRSDK(isEnabled: boolean) {
-  if (isEnabled) {
-    sr.init(srConfig);
+export async function initSRSDK(isEnabled: boolean) {
+  if (isEnabled && process.env.TARO_ENV !== "h5") {
+    try {
+      const sr = (await import("sr-sdk-wxapp")).default;
+      sr.init(srConfig);
+    } catch (e) {
+      console.warn("SR SDK Init Error:", e);
+    }
   }
 }

unocss.config.ts

@@ -1,19 +1,30 @@
+import IconIconamoon from "@iconify-json/iconamoon/icons.json";
+import IconLineMd from "@iconify-json/line-md/icons.json";
+import IconMdi from "@iconify-json/mdi/icons.json";
+import IconTabler from "@iconify-json/tabler/icons.json";
+
 import { defineConfig, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from "unocss";
 import {
   presetApplet,
   presetRemRpx,
   transformerAttributify,
 } from "unocss-applet";
-import presetChinese from "unocss-preset-chinese";
 import presetEase from "unocss-preset-ease";
 
-const isApplet = process.env.TARO_ENV !== "h5" ?? false;
+const isApplet = process.env.TARO_ENV !== "h5";
+console.log("[UnoCSS Config] TARO_ENV:", process.env.TARO_ENV, "isApplet:", isApplet);
 
 export default defineConfig({
   presets: [
     presetIcons({
       scale: 1.5,
       warn: true,
+      collections: {
+        "mdi": () => IconMdi,
+        "tabler": () => IconTabler,
+        "line-md": () => IconLineMd,
+        "iconamoon": () => IconIconamoon,
+      },
       extraProperties: {
         "display": "inline-block",
         "vertical-align": "middle",
@@ -23,12 +34,15 @@ export default defineConfig({
      * you can add `presetAttributify()` here to enable unocss attributify mode prompt
      * although preset is not working for applet, but will generate useless css
      */
-    presetChinese(),
+    // presetChinese(), // Temporary disable: Complex quotes cause Syntax Error in Webpack css-loader output
     presetEase(),
-    presetApplet(),
+    isApplet ? presetApplet() : presetApplet(),
     presetAttributify(),
     presetRemRpx({ mode: isApplet ? "rem2rpx" : "rpx2rem" }),
-  ],
+  ].filter(Boolean) as any,
+  // 不再需要手动 postprocess：presetRemRpx 已处理双端单位转换
+  // 小程序: rem → rpx (presetRemRpx mode: rem2rpx)
+  // H5: 保持 rem (presetRemRpx mode: rpx2rem)，由浏览器原生渲染
   shortcuts: {
     // position
     "common-bg": "bg-gray-100 dark:bg-gray-900",