@ybais/create-ybais-app 0.2.0

package/template/src/styles/variant.css

@@ -0,0 +1,18 @@
+/* 
+  兼容性处理：
+  iOS 12 使用 constant(safe-area-inset-*)
+  iOS 13+ 使用 env(safe-area-inset-*)
+*/
+:root {
+  --sat: constant(safe-area-inset-top);
+  --sat: env(safe-area-inset-top);
+
+  --sab: constant(safe-area-inset-bottom);
+  --sab: env(safe-area-inset-bottom);
+
+  --sal: constant(safe-area-inset-left);
+  --sal: env(safe-area-inset-left);
+
+  --sar: constant(safe-area-inset-right);
+  --sar: env(safe-area-inset-right);
+}

package/template/src/styles/webview-compat.css

@@ -0,0 +1,49 @@
+/**
+ * WebView 兼容补丁（iOS ≥12 / Android ≥7 / Chrome ≥55 / Safari ≥12）
+ * - 补回可能被 cssTarget chrome55 剥掉的 -webkit-user-select
+ * - 降级 sonner 运行时注入样式（注入晚于本文件，关键声明用 !important）
+ */
+
+/* 强制保留 WebKit 前缀：css minify 按 chrome55 会去掉 -webkit-user-select */
+html,
+body {
+  -webkit-user-select: none !important;
+  user-select: none;
+}
+
+input,
+textarea {
+  -webkit-user-select: auto !important;
+  user-select: auto;
+}
+
+/* sonner toast：无 flex gap 时用子项 margin 保间距 */
+[data-sonner-toast][data-styled="true"] {
+  gap: 0 !important;
+}
+
+[data-sonner-toast][data-styled="true"] > [data-icon] {
+  margin-right: 6px !important;
+}
+
+[data-sonner-toast][data-styled="true"] [data-content] {
+  gap: 0 !important;
+}
+
+[data-sonner-toast][data-styled="true"] [data-content] > [data-description] {
+  margin-top: 2px;
+}
+
+[data-sonner-toast] {
+  /* anywhere 需 Safari 15.4+；降级为 break-word */
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+}
+
+/* sonner loading：inset → 四向（Chrome 87+ / Safari 14.1+ 才有 inset） */
+.sonner-loading-wrapper {
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+}

package/template/src/utils/cn.ts

@@ -0,0 +1,63 @@
+/**
+ * 条件拼接 className（轻量 clsx 风格，无第三方依赖）。
+ *
+ * @example
+ * cn("btn", active && "btn--active", { "is-disabled": disabled })
+ * // => "btn btn--active" 或 "btn is-disabled"
+ *
+ * 按需引入：`import { cn } from "@/utils/cn"`（勿做 utils 聚合 barrel，利于 tree-shake）
+ */
+
+export type ClassValue =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | ClassDictionary
+  | ClassArray;
+
+export type ClassDictionary = Record<string, unknown>;
+
+export type ClassArray = ClassValue[];
+
+function append(buf: string[], value: ClassValue): void {
+  if (value == null || value === false || value === true) {
+    return;
+  }
+
+  if (typeof value === "string" || typeof value === "number") {
+    const s = String(value).trim();
+    if (s) {
+      buf.push(s);
+    }
+    return;
+  }
+
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      append(buf, value[i]);
+    }
+    return;
+  }
+
+  if (typeof value === "object") {
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key) && value[key]) {
+        const s = key.trim();
+        if (s) {
+          buf.push(s);
+        }
+      }
+    }
+  }
+}
+
+/** 将多种条件输入合并为单个 className 字符串 */
+export function cn(...inputs: ClassValue[]): string {
+  const buf: string[] = [];
+  for (let i = 0; i < inputs.length; i++) {
+    append(buf, inputs[i]);
+  }
+  return buf.join(" ");
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_ENV: "test" | "prod";
+  readonly VITE_API_BASE_URL: string;
+  readonly VITE_APP_TITLE?: string;
+  readonly VITE_QINIU_AES_KEY: string;
+  readonly VITE_QINIU_AES_IV: string;
+  /** 构建/开发时注入的当前 git 分支；master 下杜绝 vConsole */
+  readonly VITE_GIT_BRANCH?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare module "vconsole" {
+  export default class VConsole {
+    constructor(options?: Record<string, unknown>);
+    destroy(): void;
+  }
+}
+
+interface Window {
+  // iOS WebKit 注入对象
+  webkit?: {
+    messageHandlers?: Record<
+      string,
+      { postMessage: (data: unknown) => void }
+    >;
+  };
+
+  // Android WebInterface 注入对象
+  AndroidBridge?: Record<string, (data?: string) => void>;
+
+  /**
+   * Native → H5 命名回调（如 AuthCallback）及 callNative 临时回调。
+   * 业务侧请用 onNative / useNativeCallback，勿直接覆盖。
+   */
+  [key: string]: unknown;
+}

package/template/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      // 可在此处扩充针对 Safe Area 的自定义工具类
+      spacing: {
+        "safe-top": "var(--sat)",
+        "safe-bottom": "var(--sab)",
+      },
+    },
+  },
+  plugins: [],
+};

package/template/tsconfig.app.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "es2023",
+    "lib": [
+      "ES2023",
+      "DOM"
+    ],
+    "module": "esnext",
+    "types": [
+      "vite/client"
+    ],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Path alias — TS6: no baseUrl, prefix is inlined into paths */
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/template/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": [
+      "ES2023"
+    ],
+    "types": [
+      "node"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "vite.config.ts",
+    "plugins/**/*.ts"
+  ]
+}

package/template/vite.config.ts

@@ -0,0 +1,131 @@
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
+import legacy from "@vitejs/plugin-legacy";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import { execSync } from "node:child_process";
+import path from "path";
+import { appVersionPlugin } from "./plugins/app-version.ts";
+
+function resolveGitBranch(): string {
+  try {
+    return execSync("git rev-parse --abbrev-ref HEAD", {
+      stdio: ["ignore", "pipe", "ignore"],
+    })
+      .toString()
+      .trim();
+  } catch {
+    return "";
+  }
+}
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const proxyTarget =
+    env.VITE_API_BASE_URL || "https://api-test.example.com";
+  const gitBranch = resolveGitBranch();
+
+  return {
+    base: "./",
+
+    define: {
+      "import.meta.env.VITE_GIT_BRANCH": JSON.stringify(gitBranch),
+    },
+
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
+    },
+
+    server: {
+      // 仅开发：把 /proxyApi 转到真实 API，解决浏览器跨域；构建产物不含此前缀
+      proxy: {
+        "/proxyApi": {
+          target: proxyTarget,
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/proxyApi/, ""),
+        },
+      },
+    },
+
+    plugins: [
+      appVersionPlugin(),
+      tanstackRouter({
+        target: "react",
+        autoCodeSplitting: true,
+      }),
+      react(),
+      legacy({
+        targets: ["ios >= 12", "android >= 7", "chrome >= 55", "safari >= 12"],
+        // DOM / Web API 不在 core-js usage 检测内，须手动追加（见 additional*）
+        additionalLegacyPolyfills: [
+          "regenerator-runtime/runtime",
+          // alova/fetch + TanStack Router 均 new AbortController()；Chrome <66 无此 API
+          "abortcontroller-polyfill/dist/polyfill-patch-fetch",
+          // 显式固化，避免仅靠 usage 漏检
+          "core-js/modules/web.queue-microtask.js",
+          "core-js/modules/es.promise.all-settled.js",
+          // TanStack 路径解码；Chrome <85 / Safari <13.1 / 全部 iOS 12
+          "core-js/modules/es.string.replace-all.js",
+        ],
+        // modern 默认按 chrome>=105 等收集 polyfill，会漏掉 App 内嵌 WebView（ESM 但内核偏旧）
+        additionalModernPolyfills: [
+          "abortcontroller-polyfill/dist/polyfill-patch-fetch",
+          // error-guard / TanStack：Chrome <71、部分 iOS 12.0
+          "core-js/modules/web.queue-microtask.js",
+          // TanStack load-matches：Chrome <76、Safari <13（含全部 iOS 12）
+          "core-js/modules/es.promise.all-settled.js",
+          // TanStack 路径解码
+          "core-js/modules/es.string.replace-all.js",
+        ],
+        // 自动按照 Target 引入 core-js 中的按需 Polyfill
+        modernPolyfills: true,
+        renderLegacyChunks: true,
+      }),
+    ],
+
+    build: {
+      // 限制 CSS 压缩目标，防止生成 iOS 12 Safari 不支持的新 CSS 语法
+      // JS target 由 @vitejs/plugin-legacy 的 targets 接管，勿再设 build.target
+      cssTarget: "chrome55",
+      outDir: "dist",
+      assetsDir: "assets",
+      cssCodeSplit: true,
+      // 显式指定 Terser 进行 JS 压缩，避免 esbuild 在旧版 Safari ES5 转换上的语法 bug
+      minify: "terser",
+      terserOptions: {
+        compress: {
+          drop_console: false, // 生产环境可设为 true 清除 console
+          drop_debugger: true,
+        },
+        // Vite 8 会注入 format，不可再用已弃用的 output，否则会与 format 冲突
+        format: {
+          // 强制输出 ASCII 字符，防止旧内核 WebView 因 Unicode 解析异常导致白屏
+          ascii_only: true,
+        },
+      },
+      // Vite 8 底层为 Rolldown，仍兼容 rollupOptions（官方兼容层会映射）
+      // @see https://cn.vite.dev/blog/announcing-vite8#a-unified-toolchain
+      rollupOptions: {
+        output: {
+          entryFileNames: "assets/js/[name]-[hash].js",
+          chunkFileNames: "assets/js/[name]-[hash].js",
+          assetFileNames: (assetInfo) => {
+            const name = assetInfo.names?.[0] ?? assetInfo.name ?? "";
+            if (/\.css$/i.test(name)) {
+              return "assets/css/[name]-[hash][extname]";
+            }
+            if (/\.(png|jpe?g|gif|svg|webp|avif|ico)$/i.test(name)) {
+              return "assets/img/[name]-[hash][extname]";
+            }
+            if (/\.(woff2?|ttf|eot|otf)$/i.test(name)) {
+              return "assets/fonts/[name]-[hash][extname]";
+            }
+            return "assets/[name]-[hash][extname]";
+          },
+        },
+      },
+    },
+  };
+});