create-bubbles 0.1.25 → 0.1.27

package/template-react-rsbuild-biome/src/assets/svg/draft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6.5 3.5h11L21 12v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19v-7Z" />
+  <path d="M3 12h5.25a3.75 3.75 0 0 0 7.5 0H21" />
+</svg>

package/template-react-rsbuild-biome/src/components/Icon/svg-icon/README.md

@@ -0,0 +1,37 @@
+# SvgIcon
+
+使用 `@rsbuild/plugin-svgr` 将本地 SVG 导入为 React 组件，再由 `SvgIcon` 统一控制大小与颜色。
+
+```tsx
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import SvgIcon from '@/components/Icon/svg-icon/SvgIcon'
+;<SvgIcon icon={DraftIcon} size={24} color="#1677ff" />
+```
+
+| 参数                 | 说明                                                              |
+| -------------------- | ----------------------------------------------------------------- |
+| `icon`               | 通过 `?react` 导入的 SVG 组件，必填                               |
+| `size`               | 字号，数字按 px 处理，也支持 `1.5rem` 等 CSS 长度；不传时继承父级 |
+| `color`              | 图标颜色；不传时继承父级                                          |
+| `className`、`style` | 原生 SVG 样式；`style` 中的同名设置优先                           |
+
+SVG 的宽高统一为 `1em`，因此 `font-size` 决定图标大小。`ref`、事件和其他 SVG 属性继续透传。默认作为装饰图标隐藏于辅助技术；需要独立表达含义时传 `role="img"` 和 `aria-label`。
+
+```tsx
+<span style={{ fontSize: 20, color: '#1677ff' }}>
+  <SvgIcon icon={DraftIcon} />
+  草稿
+</span>
+
+<SvgIcon icon={DraftIcon} size={24} role="img" aria-label="草稿" />
+```
+
+源文件规范：
+
+- 保留 `viewBox`，保证缩放正确。
+- 单色填充图标使用 `fill="currentColor"`；线条图标使用 `stroke="currentColor"`。
+- 保留 `fill="none"`、`stroke="none"`，避免填实空心图形。
+- 内部元素若写死颜色，也需要在源文件中改成 `currentColor` 才能跟随文字颜色。
+- SVGR 与组件保留多色和渐变，不会强制覆盖所有颜色。
+
+现有 `draft.svg` 已遵循上述规范。直接导入 `draft.svg` 仍然得到资源 URL，只有 `draft.svg?react` 会转换为 React 组件。

package/template-react-rsbuild-biome/src/components/Icon/svg-icon/SvgIcon.tsx

@@ -0,0 +1,27 @@
+import type { ComponentType, SVGProps } from 'react'
+
+export type SvgIconProps = Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+  size?: number | string
+}
+
+/** SVG 源文件使用 currentColor；不传 size、color 时继承父级文字样式。 */
+export default function SvgIcon({ icon: Icon, size, color, style, ...props }: SvgIconProps) {
+  return (
+    <Icon
+      aria-hidden={props['aria-label'] || props['aria-labelledby'] ? undefined : true}
+      focusable="false"
+      {...props}
+      width="1em"
+      height="1em"
+      style={{
+        display: 'inline-block',
+        verticalAlign: '-0.125em',
+        flexShrink: 0,
+        fontSize: size,
+        color,
+        ...style,
+      }}
+    />
+  )
+}

package/template-react-rsbuild-biome/src/env.d.ts

@@ -1 +1,8 @@
 /// <reference types="@rsbuild/core/types" />
+
+declare module '*.svg?react' {
+  import type { ComponentType, SVGProps } from 'react'
+
+  const SvgComponent: ComponentType<SVGProps<SVGSVGElement>>
+  export default SvgComponent
+}

package/template-react-rsbuild-biome/src/utils/request/index.ts

@@ -2,13 +2,12 @@ import { message } from 'antd'
 import { router } from '@/router'
 import { envVariables } from '../env'
 import { createDualCallInstance } from './core'
-import 'element-plus/es/components/message/style/css'
 
 import { axiosRequestAdapter } from '@alova/adapter-axios'
-import vueHook from 'alova/vue'
+import reactHook from 'alova/react'
 
 // 🎯 获取基础配置
-const getBaseConfig = (): Parameters<typeof createDualCallInstance>[0] => {
+const getBaseConfig = () => {
   return {
     baseUrl: `/${envVariables.PUBLIC_API_AFFIX}`,
     statusMap: {
@@ -31,7 +30,7 @@ const getBaseConfig = (): Parameters<typeof createDualCallInstance>[0] => {
       router.navigate('/login')
       message.error('登录过期或未登录')
     },
-    statesHook: vueHook,
+    statesHook: reactHook,
     requestAdapter: axiosRequestAdapter(),
   }
 }

package/template-react-rsbuild-biome/tsconfig.json

@@ -19,9 +19,8 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
 
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": [

package/template-taro-react-oxc/.oxlintrc.json

@@ -2,7 +2,6 @@
   "$schema": "./node_modules/oxlint/configuration_schema.json",
   "plugins": ["eslint", "typescript", "unicorn", "oxc", "react", "import"],
   "rules": {
-    "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
   },
   "ignorePatterns": ["dist/**", ".swc/**", "node_modules/**"]

package/template-taro-react-oxc/package.json

@@ -34,68 +34,69 @@
     "prepare": "lefthook install"
   },
   "dependencies": {
-    "@alova/adapter-taro": "^2.0.15",
-    "@babel/runtime": "^7.24.4",
+    "@alova/adapter-taro": "^2.0.17",
+    "@babel/runtime": "^7.29.7",
     "@nutui/icons-react-taro": "3.0.2-cpp.3.beta.9",
     "@nutui/nutui-react-taro": "3.1.0-beta.1",
-    "@tarojs/components": "4.2.0",
-    "@tarojs/plugin-html": "4.2.0",
-    "@tarojs/react": "4.2.0",
-    "@tarojs/runtime": "4.2.0",
-    "@tarojs/shared": "4.2.0",
-    "@tarojs/taro": "4.2.0",
-    "alova": "^3.5.1",
+    "@tarojs/components": "4.2.1",
+    "@tarojs/plugin-html": "4.2.1",
+    "@tarojs/react": "4.2.1",
+    "@tarojs/runtime": "4.2.1",
+    "@tarojs/shared": "4.2.1",
+    "@tarojs/taro": "4.2.1",
+    "alova": "^3.5.5",
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.21",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "zustand": "^5.0.14"
+    "dayjs": "^1.11.23",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/plugin-transform-class-properties": "7.25.9",
-    "@babel/preset-react": "^7.24.1",
-    "@commitlint/cli": "^19.8.1",
-    "@commitlint/config-conventional": "^19.8.1",
+    "@babel/core": "^7.29.7",
+    "@babel/plugin-transform-class-properties": "7.29.7",
+    "@babel/preset-react": "^7.29.7",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@nutui/auto-import-resolver": "^1.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@tarojs/cli": "4.2.0",
-    "@tarojs/helper": "4.2.0",
-    "@tarojs/plugin-framework-react": "4.2.0",
-    "@tarojs/plugin-generator": "4.2.0",
-    "@tarojs/plugin-mini-ci": "^4.2.0",
-    "@tarojs/plugin-platform-alipay": "4.2.0",
-    "@tarojs/plugin-platform-h5": "4.2.0",
-    "@tarojs/plugin-platform-harmony-hybrid": "4.2.0",
-    "@tarojs/plugin-platform-jd": "4.2.0",
-    "@tarojs/plugin-platform-qq": "4.2.0",
-    "@tarojs/plugin-platform-swan": "4.2.0",
-    "@tarojs/plugin-platform-tt": "4.2.0",
-    "@tarojs/plugin-platform-weapp": "4.2.0",
-    "@tarojs/taro-loader": "4.2.0",
-    "@tarojs/webpack5-runner": "4.2.0",
-    "@types/minimatch": "^5",
-    "@types/node": "^18",
-    "@types/react": "^18.0.0",
-    "@types/webpack-env": "^1.13.6",
-    "autoprefixer": "^10.5.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.3",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@tarojs/cli": "4.2.1",
+    "@tarojs/helper": "4.2.1",
+    "@tarojs/plugin-framework-react": "4.2.1",
+    "@tarojs/plugin-generator": "4.2.1",
+    "@tarojs/plugin-mini-ci": "4.2.1",
+    "@tarojs/plugin-platform-alipay": "4.2.1",
+    "@tarojs/plugin-platform-h5": "4.2.1",
+    "@tarojs/plugin-platform-harmony-hybrid": "4.2.1",
+    "@tarojs/plugin-platform-jd": "4.2.1",
+    "@tarojs/plugin-platform-qq": "4.2.1",
+    "@tarojs/plugin-platform-swan": "4.2.1",
+    "@tarojs/plugin-platform-tt": "4.2.1",
+    "@tarojs/plugin-platform-weapp": "4.2.1",
+    "@tarojs/taro-loader": "4.2.1",
+    "@tarojs/webpack5-runner": "4.2.1",
+    "@types/minimatch": "^5.1.2",
+    "@types/node": "^24.13.3",
+    "@types/react": "^18.3.31",
+    "@types/webpack-env": "^1.18.8",
+    "autoprefixer": "^10.5.5",
     "babel-plugin-import": "^1.13.8",
-    "babel-preset-taro": "4.2.0",
-    "lint-staged": "^16.1.2",
+    "babel-preset-taro": "4.2.1",
+    "lefthook": "^2.1.12",
+    "lint-staged": "^17.5.0",
     "miniprogram-ci": "^2.1.31",
-    "oxfmt": "^0.54.0",
-    "oxlint": "^1.69.0",
-    "postcss": "^8.5.15",
-    "react-refresh": "^0.14.0",
-    "sass": "^1.75.0",
-    "stylelint": "^16.26.1",
+    "oxfmt": "^0.67.0",
+    "oxlint": "^1.82.0",
+    "postcss": "^8.5.28",
+    "react-refresh": "^0.14.2",
+    "sass": "^1.104.0",
+    "stylelint": "^17.15.0",
     "stylelint-config-standard-scss": "^17.0.0",
-    "tailwindcss": "^4.3.0",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
-    "typescript": "^5.4.5",
+    "tailwindcss": "^4.3.3",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.9.3",
     "unplugin-vue-components": "^32.1.0",
-    "weapp-tailwindcss": "^5.0.4",
+    "weapp-tailwindcss": "^5.5.2",
     "webpack": "5.91.0"
   },
   "browserslist": {

package/template-taro-react-oxc/pnpm-workspace.yaml

@@ -7,7 +7,53 @@ allowBuilds:
   core-js: true
   core-js-pure: true
   esbuild: true
+  lefthook: true
   less: true
   protobufjs: true
+minimumReleaseAgeExclude:
+  - '@oxfmt/binding-android-arm-eabi@0.67.0'
+  - '@oxfmt/binding-android-arm64@0.67.0'
+  - '@oxfmt/binding-darwin-arm64@0.67.0'
+  - '@oxfmt/binding-darwin-x64@0.67.0'
+  - '@oxfmt/binding-freebsd-x64@0.67.0'
+  - '@oxfmt/binding-linux-arm-gnueabihf@0.67.0'
+  - '@oxfmt/binding-linux-arm-musleabihf@0.67.0'
+  - '@oxfmt/binding-linux-arm64-gnu@0.67.0'
+  - '@oxfmt/binding-linux-arm64-musl@0.67.0'
+  - '@oxfmt/binding-linux-ppc64-gnu@0.67.0'
+  - '@oxfmt/binding-linux-riscv64-gnu@0.67.0'
+  - '@oxfmt/binding-linux-riscv64-musl@0.67.0'
+  - '@oxfmt/binding-linux-s390x-gnu@0.67.0'
+  - '@oxfmt/binding-linux-x64-gnu@0.67.0'
+  - '@oxfmt/binding-linux-x64-musl@0.67.0'
+  - '@oxfmt/binding-openharmony-arm64@0.67.0'
+  - '@oxfmt/binding-win32-arm64-msvc@0.67.0'
+  - '@oxfmt/binding-win32-ia32-msvc@0.67.0'
+  - '@oxfmt/binding-win32-x64-msvc@0.67.0'
+  - '@oxlint/binding-android-arm-eabi@1.82.0'
+  - '@oxlint/binding-android-arm64@1.82.0'
+  - '@oxlint/binding-darwin-arm64@1.82.0'
+  - '@oxlint/binding-darwin-x64@1.82.0'
+  - '@oxlint/binding-freebsd-x64@1.82.0'
+  - '@oxlint/binding-linux-arm-gnueabihf@1.82.0'
+  - '@oxlint/binding-linux-arm-musleabihf@1.82.0'
+  - '@oxlint/binding-linux-arm64-gnu@1.82.0'
+  - '@oxlint/binding-linux-arm64-musl@1.82.0'
+  - '@oxlint/binding-linux-ppc64-gnu@1.82.0'
+  - '@oxlint/binding-linux-riscv64-gnu@1.82.0'
+  - '@oxlint/binding-linux-riscv64-musl@1.82.0'
+  - '@oxlint/binding-linux-s390x-gnu@1.82.0'
+  - '@oxlint/binding-linux-x64-gnu@1.82.0'
+  - '@oxlint/binding-linux-x64-musl@1.82.0'
+  - '@oxlint/binding-openharmony-arm64@1.82.0'
+  - '@oxlint/binding-win32-arm64-msvc@1.82.0'
+  - '@oxlint/binding-win32-ia32-msvc@1.82.0'
+  - '@oxlint/binding-win32-x64-msvc@1.82.0'
+  - '@weapp-tailwindcss/postcss-calc@1.0.6'
+  - '@weapp-tailwindcss/postcss@3.3.3'
+  - oxfmt@0.67.0
+  - oxlint@1.82.0
+  - weapp-style-injector@1.0.5
+  - weapp-tailwindcss@5.5.2
 patchedDependencies:
   '@tarojs/plugin-mini-ci': patches/@tarojs__plugin-mini-ci.patch

package/template-taro-vue-eslint/package.json

@@ -4,12 +4,6 @@
   "private": true,
   "description": "vue-taro-eslint",
   "author": "",
-  "templateInfo": {
-    "name": "default",
-    "typescript": true,
-    "css": "Sass",
-    "framework": "Vue3"
-  },
   "scripts": {
     "new": "taro new",
     "build:weapp": "taro build --type weapp --open",
@@ -35,81 +29,87 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix"
   },
-  "browserslist": {
-    "development": [
-      "defaults and fully supports es6-module",
-      "maintained node versions"
-    ],
-    "production": [
-      "last 3 versions",
-      "Android >= 4.1",
-      "ios >= 8"
-    ]
-  },
   "dependencies": {
-    "@alova/adapter-taro": "^2.0.15",
+    "@alova/adapter-taro": "^2.0.17",
     "@babel/runtime": "^7.29.7",
     "@nutui/nutui-taro": "^4.3.14",
     "@nutui/touch-emulator": "^1.0.0",
-    "@tarojs/components": "4.2.0",
-    "@tarojs/helper": "4.2.0",
-    "@tarojs/plugin-framework-vue3": "4.2.0",
-    "@tarojs/plugin-html": "4.2.0",
-    "@tarojs/plugin-platform-alipay": "4.2.0",
-    "@tarojs/plugin-platform-h5": "4.2.0",
-    "@tarojs/plugin-platform-harmony-hybrid": "4.2.0",
-    "@tarojs/plugin-platform-jd": "4.2.0",
-    "@tarojs/plugin-platform-qq": "4.2.0",
-    "@tarojs/plugin-platform-swan": "4.2.0",
-    "@tarojs/plugin-platform-tt": "4.2.0",
-    "@tarojs/plugin-platform-weapp": "4.2.0",
-    "@tarojs/runtime": "4.2.0",
-    "@tarojs/shared": "4.2.0",
-    "@tarojs/taro": "4.2.0",
-    "alova": "^3.5.1",
+    "@tarojs/components": "4.2.1",
+    "@tarojs/helper": "4.2.1",
+    "@tarojs/plugin-framework-vue3": "4.2.1",
+    "@tarojs/plugin-html": "4.2.1",
+    "@tarojs/plugin-platform-alipay": "4.2.1",
+    "@tarojs/plugin-platform-h5": "4.2.1",
+    "@tarojs/plugin-platform-harmony-hybrid": "4.2.1",
+    "@tarojs/plugin-platform-jd": "4.2.1",
+    "@tarojs/plugin-platform-qq": "4.2.1",
+    "@tarojs/plugin-platform-swan": "4.2.1",
+    "@tarojs/plugin-platform-tt": "4.2.1",
+    "@tarojs/plugin-platform-weapp": "4.2.1",
+    "@tarojs/runtime": "4.2.1",
+    "@tarojs/shared": "4.2.1",
+    "@tarojs/taro": "4.2.1",
+    "alova": "^3.5.5",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "spark-md5": "^3.0.2",
-    "vue": "^3.5.35"
+    "vue": "^3.5.42"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^9.0.0",
+    "@antfu/eslint-config": "^9.5.1",
     "@babel/core": "^7.29.7",
     "@babel/plugin-transform-class-properties": "7.29.7",
-    "@commitlint/cli": "^21.0.2",
-    "@commitlint/config-conventional": "^21.0.2",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@nutui/auto-import-resolver": "^1.0.0",
-    "@tarojs/cli": "4.2.0",
-    "@tarojs/plugin-generator": "4.2.0",
-    "@tarojs/plugin-mini-ci": "^4.2.0",
-    "@tarojs/taro-loader": "4.2.0",
+    "@tarojs/cli": "4.2.1",
+    "@tarojs/plugin-generator": "4.2.1",
+    "@tarojs/plugin-mini-ci": "4.2.1",
+    "@tarojs/taro-loader": "4.2.1",
     "@tarojs/test-utils-vue3": "^0.1.1",
-    "@tarojs/webpack5-runner": "4.2.0",
+    "@tarojs/webpack5-runner": "4.2.1",
     "@types/minimatch": "^6.0.0",
-    "@types/node": "^24.13.1",
+    "@types/node": "^24.13.3",
     "@types/webpack-env": "^1.18.8",
-    "@unocss/eslint-plugin": "^66.6.2",
+    "@unocss/eslint-plugin": "^66.10.0",
     "@unocss/webpack": "0.58.9",
     "@vue/babel-plugin-jsx": "^2.0.1",
-    "@vue/compiler-sfc": "^3.5.35",
-    "autoprefixer": "^10.5.0",
-    "babel-preset-taro": "4.2.0",
-    "css-loader": "^7.1.4",
-    "eslint": "^10.4.1",
-    "eslint-config-taro": "4.2.0",
+    "@vue/compiler-sfc": "^3.5.42",
+    "autoprefixer": "^10.5.5",
+    "babel-preset-taro": "4.2.1",
+    "css-loader": "^7.1.5",
+    "eslint": "^10.10.0",
+    "eslint-config-taro": "4.2.1",
     "eslint-plugin-format": "^2.0.1",
-    "eslint-plugin-vue": "^10.9.2",
-    "lefthook": "^2.1.9",
+    "eslint-plugin-vue": "^10.11.0",
+    "lefthook": "^2.1.12",
     "miniprogram-ci": "^2.1.31",
-    "postcss": "^8.5.15",
-    "sass": "^1.100.0",
+    "postcss": "^8.5.28",
+    "sass": "^1.104.0",
     "style-loader": "^4.0.0",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^6.0.3",
     "unocss": "0.58.9",
-    "unocss-preset-weapp": "0.58.8",
+    "unocss-preset-weapp": "0.58.9",
     "unplugin-vue-components": "^32.1.0",
     "vue-loader": "^17.4.2",
     "webpack": "5.91.0"
+  },
+  "browserslist": {
+    "development": [
+      "defaults and fully supports es6-module",
+      "maintained node versions"
+    ],
+    "production": [
+      "last 3 versions",
+      "Android >= 4.1",
+      "ios >= 8"
+    ]
+  },
+  "templateInfo": {
+    "name": "default",
+    "typescript": true,
+    "css": "Sass",
+    "framework": "Vue3"
   }
 }

package/template-vp-monorepo-react-hono/apps/web/.agents/rules/SVG/344/275/277/347/224/250.md

@@ -0,0 +1,8 @@
+# SVG 使用
+
+- 图标通过 `*.svg?react` 导入，使用 `@/components/Icon/svg-icon/SvgIcon` 渲染；用 `size`、`color` 控制大小和颜色，默认继承父级。
+- 公共图标放 `src/assets/svg/`，页面专用图标放所属页面的 `assets/svg/`。
+- 保留 `viewBox`；单色图标用 `currentColor`，保留 `none`、多色和渐变。
+- 图片或背景直接导入 `*.svg` 获取 URL。
+
+参数、无障碍设置及示例见 [SvgIcon 使用说明](../../src/components/Icon/svg-icon/README.md)。

package/template-vp-monorepo-react-hono/apps/web/AGENTS.md

@@ -0,0 +1,11 @@
+## 适用范围
+
+本文件适用于 `apps/web` 及其子目录，同时遵循[根目录 AGENTS.md](../../AGENTS.md)中的通用规则。
+
+## 按需规则
+
+根据当前任务匹配下表，在执行相关操作前读取对应规则。不要预先加载整个 `.agents/rules/` 目录；任务范围变化时补读新命中的规则。
+
+| 适用条件             | 规则文件                             |
+| -------------------- | ------------------------------------ |
+| 新增、修改或使用 SVG | [SVG 使用](.agents/rules/SVG使用.md) |

package/template-vp-monorepo-react-hono/apps/web/package.json

@@ -30,6 +30,7 @@
     "typescript": "catalog:",
     "unplugin-auto-import": "catalog:",
     "vite": "catalog:",
+    "vite-plugin-svgr": "catalog:",
     "vite-plus": "catalog:"
   }
 }

package/template-vp-monorepo-react-hono/apps/web/src/assets/svg/draft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6.5 3.5h11L21 12v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19v-7Z" />
+  <path d="M3 12h5.25a3.75 3.75 0 0 0 7.5 0H21" />
+</svg>

package/template-vp-monorepo-react-hono/apps/web/src/components/Icon/svg-icon/README.md

@@ -0,0 +1,37 @@
+# SvgIcon
+
+使用 `vite-plugin-svgr` 将本地 SVG 导入为 React 组件，再由 `SvgIcon` 统一控制大小与颜色。
+
+```tsx
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import SvgIcon from '@/components/Icon/svg-icon/SvgIcon'
+;<SvgIcon icon={DraftIcon} size={24} color="#1677ff" />
+```
+
+| 参数                 | 说明                                                              |
+| -------------------- | ----------------------------------------------------------------- |
+| `icon`               | 通过 `?react` 导入的 SVG 组件，必填                               |
+| `size`               | 字号，数字按 px 处理，也支持 `1.5rem` 等 CSS 长度；不传时继承父级 |
+| `color`              | 图标颜色；不传时继承父级                                          |
+| `className`、`style` | 原生 SVG 样式；`style` 中的同名设置优先                           |
+
+SVG 的宽高统一为 `1em`，因此 `font-size` 决定图标大小。`ref`、事件和其他 SVG 属性继续透传。默认作为装饰图标隐藏于辅助技术；需要独立表达含义时传 `role="img"` 和 `aria-label`。
+
+```tsx
+<span style={{ fontSize: 20, color: '#1677ff' }}>
+  <SvgIcon icon={DraftIcon} />
+  草稿
+</span>
+
+<SvgIcon icon={DraftIcon} size={24} role="img" aria-label="草稿" />
+```
+
+源文件规范：
+
+- 保留 `viewBox`，保证缩放正确。
+- 单色填充图标使用 `fill="currentColor"`；线条图标使用 `stroke="currentColor"`。
+- 保留 `fill="none"`、`stroke="none"`，避免填实空心图形。
+- 内部元素若写死颜色，也需要在源文件中改成 `currentColor` 才能跟随文字颜色。
+- SVGR 与组件保留多色和渐变，不会强制覆盖所有颜色。
+
+现有 `draft.svg` 已遵循上述规范。直接导入 `draft.svg` 仍然得到资源 URL，只有 `draft.svg?react` 会转换为 React 组件。

package/template-vp-monorepo-react-hono/apps/web/src/components/Icon/svg-icon/SvgIcon.tsx

@@ -0,0 +1,27 @@
+import type { ComponentType, SVGProps } from 'react'
+
+export type SvgIconProps = Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+  size?: number | string
+}
+
+/** SVG 源文件使用 currentColor；不传 size、color 时继承父级文字样式。 */
+export default function SvgIcon({ icon: Icon, size, color, style, ...props }: SvgIconProps) {
+  return (
+    <Icon
+      aria-hidden={props['aria-label'] || props['aria-labelledby'] ? undefined : true}
+      focusable="false"
+      {...props}
+      width="1em"
+      height="1em"
+      style={{
+        display: 'inline-block',
+        verticalAlign: '-0.125em',
+        flexShrink: 0,
+        fontSize: size,
+        color,
+        ...style,
+      }}
+    />
+  )
+}

package/template-vp-monorepo-react-hono/apps/web/tsconfig.json

@@ -4,7 +4,7 @@
     "target": "ES2023",
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "jsx": "react-jsx",
-    "types": ["vite-plus/client"],
+    "types": ["vite-plus/client", "vite-plugin-svgr/client"],
     "paths": {
       "@/*": ["./src/*"]
     },

package/template-vp-monorepo-react-hono/apps/web/vite.config.ts

@@ -2,6 +2,7 @@ import path from 'path'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
 import AutoImport from 'unplugin-auto-import/vite'
+import svgr from 'vite-plugin-svgr'
 import { defineConfig, loadEnv } from 'vite-plus'
 
 export default defineConfig(({ mode }) => {
@@ -35,6 +36,7 @@ export default defineConfig(({ mode }) => {
     },
     plugins: [
       react(),
+      svgr({ svgrOptions: { icon: true, ref: true } }),
       AutoImport({
         imports: ['react', 'react-router', 'react-dom'],
         dts: './src/types/auto-imports.d.ts',

package/template-vp-monorepo-react-hono/pnpm-workspace.yaml

@@ -37,6 +37,7 @@ catalog:
   typescript: ^6
   unplugin-auto-import: ^21.0.0
   vite: npm:@voidzero-dev/vite-plus-core@0.2.4
+  vite-plugin-svgr: ^5.2.0
   vite-plus: 0.2.4
   vue: ^3.5.39
   zod: ^4.4.3

package/template-vp-monorepo-react-nestjs/.agents/rules//344/273/243/347/240/201/350/256/276/350/256/241.md

@@ -0,0 +1,4 @@
+# 代码设计
+
+- 无论前端还是后端，代码设计都必须遵循高内聚、低耦合的原则，并优先保证人类阅读和理解的便利性。
+- 当函数或方法的参数超过 3 个时，必须改为通过一个对象传参，并为对象属性使用清晰、具有业务含义的名称。

package/template-vp-monorepo-react-nestjs/.agents/rules//345/205/261/344/272/253/344/273/243/347/240/201.md

@@ -0,0 +1,4 @@
+# 共享代码
+
+- 前后端的接口类型和返回类型统一放在 `packages/shared/src/types` 中。
+- 公用方法统一放在 `packages/shared/src/utils` 中。