create-bubbles 0.1.25 → 0.1.27

package/template-vp-react/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-react/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-react/src/types/auto-imports.d.ts

@@ -1,5 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
+/* oxlint-disable */
+/* oxfmt-ignore */
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import

package/template-vp-react/src/utils/request/index.ts

@@ -1,9 +1,17 @@
-import { axiosRequestAdapter } from '@alova/adapter-axios'
-import reactHook from 'alova/react'
+import { axiosRequestAdapter, type AlovaAxiosRequestConfig } from '@alova/adapter-axios'
+import reactHook, { type ReactHookExportType } from 'alova/react'
 import { message } from 'antd'
+import type { AxiosResponse, AxiosResponseHeaders } from 'axios'
 import { navigator } from '@/router'
 import { envVariables } from '@/utils/env'
-import { createDualCallInstance } from './core'
+import { createDualCallInstance, type BaseRequestOption } from './core'
+
+type WebRequestOption = BaseRequestOption<
+  AlovaAxiosRequestConfig,
+  AxiosResponse,
+  AxiosResponseHeaders,
+  ReactHookExportType<unknown>
+>
 
 function normalizeBaseUrl(apiAffix?: string) {
   if (!apiAffix) return '/'
@@ -14,7 +22,7 @@ function normalizeBaseUrl(apiAffix?: string) {
   return `/${apiAffix}`
 }
 
-function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
+function getBaseConfig(): WebRequestOption {
   return {
     baseUrl: normalizeBaseUrl(envVariables.API_AFFIX),
     statusMap: {
@@ -43,6 +51,11 @@ function getBaseConfig(): Parameters<typeof createDualCallInstance>[0] {
   }
 }
 
-const alovaRequest = createDualCallInstance(getBaseConfig())
+const alovaRequest = createDualCallInstance<
+  AlovaAxiosRequestConfig,
+  AxiosResponse,
+  AxiosResponseHeaders,
+  ReactHookExportType<unknown>
+>(getBaseConfig())
 
 export default alovaRequest

package/template-vp-react/tsconfig.json

@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2023", "DOM", "DOM.Iterable"],
-    "types": ["vite/client"],
+    "types": ["vite/client", "vite-plugin-svgr/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
@@ -23,9 +23,8 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
 
-    "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["./src/*"]
     }
   },
   "include": ["src"]

package/template-vp-react/vite.config.ts

@@ -3,6 +3,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 }) => {
@@ -22,6 +23,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-react-shadcn/.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-react-shadcn/.vscode/settings.json

@@ -6,7 +6,7 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.oxc": "explicit"
   },
-  "oxc.configPath": ".oxlintrc.jsonc",
-  "oxc.fmt.configPath": ".oxfmtrc.jsonc",
+  "oxc.disableNestedConfig": true,
+  "oxc.fmt.disableNestedConfig": true,
   "cSpell.words": ["alova"]
 }

package/template-vp-react-shadcn/{agents.md → AGENTS.md}

@@ -3,7 +3,7 @@
 ## 项目约定
 
 - 项目是 Vite+、React 19、TypeScript 前端应用，路径别名 `@/*` 指向 `src/*`。
-- 路由使用 React Router 7，集中维护在 `src/router/index.tsx`。
+- 路由使用 React Router 8，集中维护在 `src/router/index.tsx`。
 - 路由页面放在 `src/pages/<route>/index.tsx`，保持现有 `lazyLoad()` 导入规则。
 - `src/types/auto-imports.d.ts` 是生成文件，不要手动编辑。
 
@@ -17,8 +17,10 @@ tsc && vp build
 
 ## UI 与样式
 
-- UI 组件使用 shadcn/ui，已有组件位于 `src/components/ui`。
+- UI 组件使用 shadcn/ui 的 Base UI 版本（`base-nova`），已有组件位于 `src/components/ui`。
 - 新增 shadcn/ui 组件使用 `pnpm shadcn add xxx`。
+- 组合触发器使用 Base UI 的 `render` API；链接使用 `<a>` / `<Link>` 配合 `buttonVariants()`。
+- 消息提示从 `@/components/ui/toast` 导入 `toast`，使用 `toast.add({ type: 'success', description: '操作成功' })`。
 - 图标优先使用 `lucide-react`。
 - 动效：引人注目的关键区域可适当加入动画，复杂动效优先使用已安装的 `gsap`，避免过度动画影响可用性。
 - 样式优先使用 Tailwind CSS classNames。
@@ -42,3 +44,11 @@ tsc && vp build
 
 - 普通代码改动：执行 `vp check` 和 `tsc && vp build`。
 - 视觉改动：启动 `vp dev`，在浏览器中检查受影响页面。
+
+## 按需规则
+
+根据当前任务匹配下表，在执行相关操作前读取对应规则。不要预先加载整个 `.agents/rules/` 目录；任务范围变化时补读新命中的规则。
+
+| 适用条件             | 规则文件                             |
+| -------------------- | ------------------------------------ |
+| 新增、修改或使用 SVG | [SVG 使用](.agents/rules/SVG使用.md) |

package/template-vp-react-shadcn/README.md

@@ -0,0 +1,41 @@
+# Vite+ React shadcn 模板
+
+基于 React 19、React Router 8、TypeScript 7、Tailwind CSS 4 和 Vite+ 0.3。
+shadcn/ui 使用 Base UI 的 `base-nova` 风格，底层依赖为 `@base-ui/react`。
+
+## 启动与验证
+
+先安装全局 Vite+ CLI，再执行：
+
+```bash
+vp install
+vp dev
+vp check
+vp run build
+```
+
+## UI 组件
+
+```bash
+pnpm exec shadcn info
+pnpm exec shadcn add dialog
+```
+
+组件源码位于 `src/components/ui`，`components.json` 会让后续新增组件继续使用 Base UI。
+shadcn 仍支持 Radix UI；本模板已从 Radix UI 迁移到 Base UI。
+
+- Button 和触发器组合使用 Base UI 的 `render` API，不再使用 `asChild`。
+- 链接使用 `<a>` 或 React Router 的 `<Link>`，样式通过 `buttonVariants()` 生成。
+- 消息提示使用 `@/components/ui/toast`，应用入口已挂载 `<Toaster />`。
+
+```tsx
+import { toast } from '@/components/ui/toast'
+
+toast.add({ type: 'success', description: '操作成功' })
+toast.add({ type: 'error', description: '操作失败' })
+```
+
+依赖覆盖配置集中在 `pnpm-workspace.yaml`，将 `vite` 固定到 Vite+ 对应版本。
+播放器使用 `@videojs/react@10.0.0-beta.32`，仍处于 beta 阶段，因此固定精确版本。
+
+参考：[shadcn Base UI Button](https://ui.shadcn.com/docs/components/base/button)、[Toast](https://ui.shadcn.com/docs/components/base/toast)。

package/template-vp-react-shadcn/commitlint.config.js

@@ -1 +1 @@
-export default { extends: ["@commitlint/config-conventional"] };
+export default { extends: ['@commitlint/config-conventional'] }

package/template-vp-react-shadcn/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-nova",
+  "style": "base-nova",
   "rsc": false,
   "tsx": true,
   "tailwind": {

package/template-vp-react-shadcn/package.json

@@ -11,46 +11,39 @@
     "check": "vp check"
   },
   "dependencies": {
-    "@fontsource-variable/geist": "^5.2.9",
-    "@tailwindcss/vite": "^4.3.0",
-    "@videojs/react": "10.0.0-beta.23",
-    "alova": "^3.5.1",
+    "@base-ui/react": "^1.8.0",
+    "@fontsource-variable/geist": "^5.3.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@videojs/react": "10.0.0-beta.32",
+    "alova": "^3.5.5",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.20",
+    "dayjs": "^1.11.23",
     "gsap": "^3.15.0",
-    "lucide-react": "^1.17.0",
-    "next-themes": "^0.4.6",
+    "lucide-react": "^1.42.0",
     "radashi": "^12.9.1",
-    "radix-ui": "^1.5.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router": "^7.17.0",
-    "sonner": "^2.0.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router": "^8.3.1",
     "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "zustand": "^5.0.14"
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
-    "@commitlint/cli": "^21.0.2",
-    "@commitlint/config-conventional": "^21.0.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
-    "sass": "^1.100.0",
-    "shadcn": "^4.10.0",
-    "typescript": "~6.0.3",
-    "unplugin-auto-import": "^21.0.0",
-    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
-    "vite-plus": "latest"
-  },
-  "packageManager": "pnpm@11.5.2",
-  "pnpm": {
-    "overrides": {
-      "vite": "npm:@voidzero-dev/vite-plus-core@latest",
-      "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
-    }
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@types/node": "^26.5.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "sass": "^1.104.0",
+    "shadcn": "^4.21.0",
+    "typescript": "~7.0.2",
+    "unplugin-auto-import": "^21.1.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
+    "vite-plugin-svgr": "^5.2.0",
+    "vite-plus": "0.3.0"
   }
 }

package/template-vp-react-shadcn/pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+allowBuilds:
+  '@parcel/watcher': true
+  msw: true
+
+peerDependencyRules:
+  allowedVersions:
+    vite: '0.3.0'
+
+overrides:
+  vite: npm:@voidzero-dev/vite-plus-core@0.3.0

package/template-vp-react-shadcn/src/App.tsx

@@ -1,14 +1,14 @@
-import dayjs from "dayjs";
-import "dayjs/locale/zh-cn";
-import { Suspense } from "react";
-import { RouterProvider } from "react-router";
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+import { Suspense } from 'react'
+import { RouterProvider } from 'react-router'
 
-import PageLoading from "@/components/Loading/PageLoading";
-import { Toaster } from "@/components/ui/sonner";
+import PageLoading from '@/components/Loading/PageLoading'
+import { Toaster } from '@/components/ui/toast'
 
-import { router } from "./router";
+import { router } from './router'
 
-dayjs.locale("zh-cn");
+dayjs.locale('zh-cn')
 
 function App() {
   return (
@@ -18,7 +18,7 @@ function App() {
       </Suspense>
       <Toaster />
     </>
-  );
+  )
 }
 
-export default App;
+export default App

package/template-vp-react-shadcn/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-react-shadcn/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-react-shadcn/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-react-shadcn/src/components/Loading/PageLoading.tsx

@@ -1,11 +1,11 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from '@/components/ui/spinner'
 
 const Loading = () => {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <Spinner className="size-6" />
     </div>
-  );
-};
+  )
+}
 
-export default Loading;
+export default Loading