create-bubbles 0.1.20 → 0.1.22

package/template-vp-monorepo-react-nestjs/apps/web-vue/README.md

@@ -0,0 +1,98 @@
+# template-vp-vue-eslint
+
+Vue 3 项目模板，基于 Vite+ 统一工具链，集成 Antdv Next UI 组件库、UnoCSS 原子化样式、ESLint 代码规范。
+
+## 技术栈
+
+| 分类 | 技术 | 说明 |
+|------|------|------|
+| 构建工具 | Vite+ (`vp`) | 统一工具链，封装 Vite + Rolldown + Oxlint |
+| 框架 | Vue 3 | Composition API + `<script setup>` |
+| 语言 | TypeScript 6/7 并存 | TS7 编译 + TS6 支持 typescript-eslint/vue-tsc |
+| UI 组件库 | Antdv Next | 自动按需导入 |
+| 状态管理 | Pinia | 含持久化插件 |
+| 路由 | Vue Router 5 | |
+| 请求库 | Alova | 基于 Axios 适配器，双调用实例 |
+| 样式方案 | UnoCSS | Wind4 + Attributify 预设 |
+| 代码规范 | ESLint (@antfu/eslint-config) + OxLint | |
+| Git 钩子 | Lefthook + Commitlint | |
+
+## 快速开始
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建生产包
+pnpm build
+
+# 代码检查
+pnpm lint
+
+# 代码修复
+pnpm lint:fix
+```
+
+## 目录结构
+
+```
+src/
+├── api/                # API 接口定义
+├── assets/             # 静态资源
+│   ├── icon/           # SVG 图标
+│   └── image/          # 图片资源
+├── components/         # 公共组件
+│   └── Icon/           # SVG 图标组件
+├── hooks/              # 组合式函数
+├── layout/             # 布局组件
+│   └── default/        # 默认布局（侧边栏 + 顶部栏）
+├── router/             # 路由配置
+│   ├── guard/          # 路由守卫
+│   └── modules/        # 路由模块
+├── store/              # Pinia 状态管理
+│   └── modules/        # 业务 Store
+├── styles/             # 全局样式
+├── types/              # 类型声明（自动生成）
+├── utils/              # 工具函数
+│   └── request/        # Alova 请求封装
+├── views/              # 页面视图
+├── App.vue             # 根组件
+└── main.ts             # 应用入口
+```
+
+## 环境变量
+
+| 文件 | 用途 |
+|------|------|
+| `.env` | 公共环境变量 |
+| `.env.development` | 开发环境 |
+| `.env.production` | 生产环境 |
+
+关键变量：
+
+| 变量名 | 说明 |
+|--------|------|
+| `VITE_PORT` | 开发服务器端口 |
+| `VITE_API_URL` | 后端 API 地址 |
+| `VITE_API_AFFIX` | API 路由前缀（用于代理） |
+| `VITE_APP_NAME` | 应用名称 |
+
+## TypeScript 6/7 并存说明
+
+TypeScript 7.0 使用 Go 重写了编译器，但暂不提供程序化 API，因此 `typescript-eslint` 和 `vue-tsc` 暂不兼容。
+
+本项目采用微软官方推荐的并存方案：
+
+- `typescript` → 指向 `@typescript/typescript6`（供 ESLint、vue-tsc 使用）
+- `@typescript/native` → 指向 TypeScript 7（可手动调用 `npx @typescript/native tsc`）
+
+VS Code 中安装 [TypeScript (Native Preview)](https://marketplace.visualstudio.com/items?itemName=TypeScriptTeam.native-preview) 扩展可享受 TS7 的语言服务加速。
+
+## 代码规范
+
+- **ESLint**：使用 `@antfu/eslint-config`，单引号、无分号、自动排序 imports
+- **OxLint**：作为 ESLint 的补充，提供更快的 lint 速度
+- **Commitlint**：提交信息需遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范

package/template-vp-monorepo-react-nestjs/apps/web-vue/commitlint.config.js

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

package/template-vp-monorepo-react-nestjs/apps/web-vue/eslint.config.js

@@ -0,0 +1,13 @@
+import antfu from '@antfu/eslint-config'
+import oxlint from 'eslint-plugin-oxlint'
+
+export default antfu(
+  {
+    formatters: {
+      css: true,
+      html: true,
+    },
+    vue: true,
+    unocss: true,
+  },
+).append(...oxlint.configs['flat/recommended'])

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/lefthook.yml

@@ -1,7 +1,7 @@
 pre-commit:
   commands:
     check:
-      glob: '*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}'
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}"
       run: pnpm eslint --fix {staged_files}
       stage_fixed: true
 

package/template-vp-monorepo-react-nestjs/apps/web-vue/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "web-vue",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev --mode development",
+    "build": "vue-tsc -b && vp build",
+    "preview": "vp preview",
+    "lint": "oxlint && eslint",
+    "lint:fix": "oxlint && eslint --fix"
+  },
+  "dependencies": {
+    "@alova/adapter-axios": "catalog:",
+    "@antdv-next/icons": "catalog:",
+    "@bubblesjs/i18n-vue": "workspace:*",
+    "alova": "catalog:",
+    "antdv-next": "catalog:",
+    "axios": "catalog:",
+    "dayjs": "catalog:",
+    "echarts": "catalog:",
+    "nprogress": "catalog:",
+    "pinia": "catalog:",
+    "pinia-plugin-persistedstate": "catalog:",
+    "radashi": "catalog:",
+    "vue": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@antdv-next/auto-import-resolver": "catalog:",
+    "@antfu/eslint-config": "catalog:",
+    "@bubblesjs/i18n-core": "workspace:*",
+    "@commitlint/cli": "catalog:",
+    "@commitlint/config-conventional": "catalog:",
+    "@types/node": "catalog:",
+    "@types/nprogress": "catalog:",
+    "@typescript/native": "catalog:",
+    "@unocss/eslint-plugin": "catalog:",
+    "@unocss/preset-attributify": "catalog:",
+    "@unocss/preset-wind4": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "@vue/tsconfig": "catalog:",
+    "eslint": "catalog:",
+    "eslint-plugin-format": "catalog:",
+    "eslint-plugin-oxlint": "catalog:",
+    "fast-glob": "catalog:",
+    "lefthook": "catalog:",
+    "oxlint": "catalog:",
+    "sass": "catalog:",
+    "typescript": "catalog:typescript6",
+    "unocss": "catalog:",
+    "unplugin-auto-import": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-inspect": "catalog:",
+    "vite-plugin-svg-icons": "catalog:",
+    "vite-plus": "catalog:",
+    "vue-tsc": "catalog:"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.11.0",
+      "onFail": "download"
+    }
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/pnpm-workspace.yaml

@@ -0,0 +1,16 @@
+minimumReleaseAgeExclude:
+  - eslint@10.7.0
+catalog:
+  vite: npm:@voidzero-dev/vite-plus-core@0.2.4
+  vite-plus: 0.2.4
+overrides:
+  vite: "catalog:"
+peerDependencyRules:
+  allowAny:
+    - vite
+  allowedVersions:
+    vite: "*"
+allowBuilds:
+  '@parcel/watcher': true
+  lefthook: true
+  vue-demi: true

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/App.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import I18nProvider from '@bubblesjs/i18n-vue'
+import { leftStore } from '@/i18n/instance'
+</script>
+
+<template>
+  <I18nProvider :store="leftStore">
+    <RouterView />
+  </I18nProvider>
+</template>
+
+<style scoped></style>

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/api/index.ts

@@ -0,0 +1,12 @@
+import request from "@/utils/request";
+
+export const EXPIRE_TIME = 60 * 10 * 1000;
+
+export function getTree() {
+  return request.Get("/xxx/xx", {
+    cacheFor: {
+      mode: "restore",
+      expire: EXPIRE_TIME,
+    },
+  });
+}

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/src/components/Icon/svg-icon.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineProps<{
-  icon: string
-}>()
-const attrs = useAttrs()
+  icon: string;
+}>();
+const attrs = useAttrs();
 </script>
 
 <template>

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/src/hooks/chart/lib.ts

@@ -6,7 +6,7 @@ import {
   PictorialBarChart,
   PieChart,
   RadarChart,
-} from 'echarts/charts'
+} from "echarts/charts";
 import {
   AriaComponent,
   CalendarComponent,
@@ -22,11 +22,11 @@ import {
   ToolboxComponent,
   TooltipComponent,
   VisualMapComponent,
-} from 'echarts/components'
-import * as echarts from 'echarts/core'
+} from "echarts/components";
+import * as echarts from "echarts/core";
 // TODO 如果想换成SVG渲染，就导出SVGRenderer，
 //  并且放到 echarts.use 里，注释掉 CanvasRenderer
-import { /* SVGRenderer */ CanvasRenderer } from 'echarts/renderers'
+import { /* SVGRenderer */ CanvasRenderer } from "echarts/renderers";
 
 echarts.use([
   LegendComponent,
@@ -52,6 +52,6 @@ echarts.use([
   TimelineComponent,
   CalendarComponent,
   GraphicComponent,
-])
+]);
 
-export default echarts
+export default echarts;

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/hooks/chart/useEcharts.ts

@@ -0,0 +1,65 @@
+import type { EChartsOption } from "echarts";
+
+import type { ShallowRef } from "vue";
+
+import { debounce } from "radashi";
+
+import echarts from "./lib";
+
+type setOptionsType = (options: EChartsOption, clear?: boolean) => void;
+
+export function useECharts(
+  elRef: Ref<HTMLDivElement> | Readonly<ShallowRef<HTMLDivElement | null>>,
+) {
+  let chartInstance: echarts.ECharts | null = null;
+  let resizeObserver: ResizeObserver | undefined;
+
+  const resize = () => {
+    chartInstance?.resize();
+  };
+
+  const initCharts = () => {
+    if (!elRef) return;
+    const el = unref(elRef);
+    if (!el) return;
+
+    resizeObserver = new ResizeObserver(
+      debounce(
+        {
+          delay: 100,
+        },
+        resize,
+      ),
+    );
+    resizeObserver.observe(el);
+
+    chartInstance = echarts.init(el);
+  };
+
+  const setOptions: setOptionsType = (options, clear = true) => {
+    if (!chartInstance) {
+      initCharts();
+      if (!chartInstance) return;
+    }
+    clear && chartInstance?.clear();
+    chartInstance?.setOption(options);
+  };
+
+  const getInstance: () => echarts.ECharts | null = () => {
+    if (!chartInstance) initCharts();
+    return chartInstance;
+  };
+
+  onUnmounted(() => {
+    chartInstance?.dispose();
+    resizeObserver?.disconnect();
+    resizeObserver = undefined;
+  });
+
+  return {
+    setOptions,
+    resize,
+    echarts,
+    getInstance,
+  };
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/i18n/instance.ts

@@ -0,0 +1,8 @@
+import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
+
+export const leftStore = await i18n.init({
+  locale: 'zh_CN',
+  loaderMessage: async (locale?: string) => (await import(`@/locales/${locale}.json`))?.default,
+  storageKey: 'i18n-home-left',
+  storage: createJsonStorage(localStorage),
+})

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/layout/default/header/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+const userStore = useUserStoreWithOut()
+const router = useRouter()
+
+function handleMenuClick({ key }: { key: string }) {
+  if (key === 'logout') {
+    userStore.$reset()
+    router.push('/login')
+  }
+}
+
+const dropdownItems = [
+  { key: 'logout', label: '退出登录' },
+]
+</script>
+
+<template>
+  <div class="flex gap-3 items-center">
+    <ADropdown :menu="{ items: dropdownItems, onClick: handleMenuClick }">
+      <div class="flex-center gap-2 cursor-pointer">
+        <AAvatar :size="32" :src="userStore.avatar">
+          {{ userStore.name?.charAt(0).toUpperCase() }}
+        </AAvatar>
+        <span class="text-sm">{{ userStore.name }}</span>
+      </div>
+    </ADropdown>
+  </div>
+</template>

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/layout/default/index.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { MenuRouteRecordRawType } from '@/router/interface'
+
+import SvgIcon from '@/components/Icon/svg-icon.vue'
+
+import { menuRoutes } from '@/router/modules'
+
+import Header from './header/index.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const collapsed = ref(false)
+
+const selectedKeys = computed(() => {
+  const matched = route.matched.map(item => item.name)
+  return matched.filter(Boolean) as string[]
+})
+
+const openKeys = ref<string[]>([])
+
+watchEffect(() => {
+  const matched = route.matched.map(item => item.name).filter(Boolean) as string[]
+  if (matched.length > 1) {
+    openKeys.value = [matched[0]]
+  }
+})
+
+function handleMenuClick({ key }: { key: string }) {
+  router.push({ name: key })
+}
+
+function renderIcon(icon?: string) {
+  if (!icon)
+    return null
+  const isSvgIcon = icon.startsWith('svg-')
+  if (isSvgIcon) {
+    return h(SvgIcon, {
+      icon: icon.replace('svg-', ''),
+      style: { fontSize: '18px' },
+    })
+  }
+  return null
+}
+
+function getMenuItems(routes: MenuRouteRecordRawType[]) {
+  return routes
+    .filter(item => !item.meta?.hideInMenu)
+    .map((item) => {
+      const hasChildren = item.children && item.children.length > 0
+      if (hasChildren) {
+        return {
+          key: item.name as string,
+          label: item.meta?.title ?? item.name,
+          icon: renderIcon(item.meta?.icon),
+          children: getMenuItems(item.children as MenuRouteRecordRawType[]),
+        }
+      }
+      return {
+        key: item.name as string,
+        label: item.meta?.title ?? item.name,
+        icon: renderIcon(item.meta?.icon),
+      }
+    })
+}
+
+const menuItems = computed(() => getMenuItems(menuRoutes))
+</script>
+
+<template>
+  <ALayout class="h-screen">
+    <ALayoutSider
+      v-model:collapsed="collapsed"
+      :trigger="null"
+      collapsible
+      :width="220"
+      class="layout-sider"
+    >
+      <div class="logo flex-center gap-2 h-[var(--header-height)]">
+        <SvgIcon icon="logo" class="text-2xl" />
+        <span v-show="!collapsed" class="text-lg text-white font-bold">
+          Vue Template
+        </span>
+      </div>
+      <AMenu
+        v-model:selected-keys="selectedKeys"
+        v-model:open-keys="openKeys"
+        :items="menuItems"
+        theme="dark"
+        mode="inline"
+        @click="handleMenuClick"
+      />
+    </ALayoutSider>
+
+    <ALayout>
+      <ALayoutHeader class="layout-header px-4 flex items-center justify-between">
+        <div class="flex gap-3 items-center">
+          <AButton
+            type="text"
+            class="flex-center"
+            @click="collapsed = !collapsed"
+          >
+            <SvgIcon
+              :icon="collapsed ? 'menu-unfold' : 'menu-fold'"
+              style="font-size: 18px"
+            />
+          </AButton>
+        </div>
+        <Header />
+      </ALayoutHeader>
+
+      <ALayoutContent class="layout-content p-4 overflow-auto">
+        <RouterView />
+      </ALayoutContent>
+    </ALayout>
+  </ALayout>
+</template>
+
+<style lang="scss" scoped>
+.layout-sider {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: auto;
+}
+
+.layout-header {
+  height: var(--header-height);
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0;
+}
+
+.layout-content {
+  min-height: calc(100vh - var(--header-height));
+  background: #f5f5f5;
+}
+</style>

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/locales/en_US.json

@@ -0,0 +1,4 @@
+{
+  "保存": "Save",
+  "你好1": "Hello"
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/locales/zh_CN.json

@@ -0,0 +1,4 @@
+{
+  "保存": "保存",
+  "你好1": "你好"
+}

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/src/main.ts

@@ -1,11 +1,8 @@
 import { createApp } from 'vue'
-
 import App from './App.vue'
 import { setupRouter } from './router'
 import { setupStore } from './store'
-
 import 'virtual:svg-icons-register'
-
 import '@/styles/index.scss'
 import 'virtual:uno.css'
 

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/guard/index.ts

@@ -0,0 +1,7 @@
+import type { Router } from "vue-router";
+
+import { createPermissionGuard } from "./permissionGuard";
+
+export function setupGuard(router: Router) {
+  createPermissionGuard(router);
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/guard/permissionGuard.ts

@@ -0,0 +1,13 @@
+import type { Router } from "vue-router";
+
+import NProgress from "nprogress";
+
+export function createPermissionGuard(router: Router) {
+  router.beforeEach((_to, _from, next) => {
+    NProgress.start();
+    next();
+  });
+  router.afterEach((_to, _from) => {
+    NProgress.done();
+  });
+}

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/src/router/index.ts

@@ -1,18 +1,18 @@
-import type { App } from 'vue'
+import type { App } from "vue";
 
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
-import { setupGuard } from './guard'
-import { routes } from './modules'
+import { setupGuard } from "./guard";
+import { routes } from "./modules";
 
 export const router = createRouter({
   history: createWebHistory(import.meta.env.PUBLIC_PATH),
   routes,
   strict: true,
   scrollBehavior: () => ({ left: 0, top: 0 }),
-})
+});
 
 export function setupRouter(app: App) {
-  setupGuard(router)
-  app.use(router)
+  setupGuard(router);
+  app.use(router);
 }

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/router/interface.ts

@@ -0,0 +1,9 @@
+import type { RouteRecordRaw } from "vue-router";
+
+export type MenuRouteRecordRawType = RouteRecordRaw & {
+  meta?: {
+    title?: string;
+    icon?: string;
+    hideInMenu?: boolean;
+  };
+};

package/{template-vue-vite-eslint → template-vp-monorepo-react-nestjs/apps/web-vue}/src/router/modules/index.ts

@@ -2,9 +2,7 @@ import type { RouteRecordRaw } from 'vue-router'
 
 import type { MenuRouteRecordRawType } from '../interface'
 
-import { ExampleRoutes } from './example'
-
-export const menuRoutes: MenuRouteRecordRawType [] = [
+export const menuRoutes: MenuRouteRecordRawType[] = [
   {
     path: '/home',
     name: 'Home',
@@ -26,7 +24,6 @@ export const routes: RouteRecordRaw[] = [
       ...menuRoutes,
     ],
   },
-  ...ExampleRoutes,
   {
     path: '/login',
     name: 'login',

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/store/index.ts

@@ -0,0 +1,11 @@
+import type { App } from "vue";
+
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+
+export const store = createPinia();
+store.use(piniaPluginPersistedstate);
+
+export function setupStore(app: App) {
+  app.use(store);
+}

package/template-vp-monorepo-react-nestjs/apps/web-vue/src/store/modules/user.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+
+import { store } from "..";
+
+export const useUserStore = defineStore("user", {
+  state: () => {
+    return {
+      name: "admin",
+      token: "admin",
+      avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
+    };
+  },
+});
+
+export function useUserStoreWithOut() {
+  return useUserStore(store);
+}