create-bubbles 0.1.20 → 0.1.23

package/template-vp-vue-eslint-vapor/src/views/example/echart/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useECharts } from "@/hooks/chart/useEcharts";
+
+import { getOption } from "./config";
+
+const dom = useTemplateRef("chart");
+const { setOptions } = useECharts(dom);
+
+onMounted(() => {
+  setOptions(getOption());
+});
+</script>
+
+<template>
+  <div class="h-100vh w-full bg-black">
+    <div ref="chart" class="h-30% w-30%" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vp-vue-eslint-vapor/src/views/example/tree-chart.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+
+defineOptions({ name: 'tree-chart' })
+
+</script>
+
+<template>
+    <div class="tree-chart-container">
+        
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

package/template-vp-vue-eslint-vapor/src/views/home/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex-center flex-col gap-4 h-full w-full">
+    <h1 class="text-2xl font-bold">
+      Welcome to Vue Template
+    </h1>
+    <p class="text-gray-500">
+      Vite+ + Vue 3 + Antdv Next + UnoCSS + ESLint
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vp-vue-eslint-vapor/src/views/login/index.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// const a = 123
+</script>
+
+<template>
+  <div>login</div>
+</template>
+
+<style lang="scss" scoped></style>

package/template-vp-vue-eslint-vapor/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["vite/client", "vue", "node"],
+    "allowImportingTsExtensions": true,
+
+    /* Linting */
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "vueCompilerOptions": {
+    "vapor": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "node_modules/antdv-next/global.d.ts"]
+}

package/template-vp-vue-eslint-vapor/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/main.ts","./src/api/index.ts","./src/hooks/chart/lib.ts","./src/hooks/chart/useecharts.ts","./src/router/index.ts","./src/router/interface.ts","./src/router/guard/index.ts","./src/router/guard/permissionguard.ts","./src/router/modules/index.ts","./src/store/index.ts","./src/store/modules/user.ts","./src/types/auto-import.d.ts","./src/types/components.d.ts","./src/types/vite-env.d.ts","./src/utils/env.ts","./src/utils/request/index.ts","./src/utils/request/core/index.ts","./src/utils/request/core/utils.ts","./src/views/example/echart/config.ts","./src/app.vue","./src/components/icon/svg-icon.vue","./src/layout/default/index.vue","./src/layout/default/header/index.vue","./src/views/example/tree-chart.vue","./src/views/example/echart/index.vue","./src/views/home/index.vue","./src/views/login/index.vue","./node_modules/antdv-next/global.d.ts"],"version":"6.0.3"}

package/template-vp-vue-eslint-vapor/uno.config.ts

@@ -0,0 +1,17 @@
+import presetAttributify from "@unocss/preset-attributify";
+import presetWind4 from "@unocss/preset-wind4";
+import { defineConfig } from "unocss";
+
+export default defineConfig({
+  // content: {
+  //   filesystem: [
+  //     '**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}',
+  //   ],
+  // },
+  shortcuts: [
+    {
+      "flex-center": "flex justify-center items-center",
+    },
+  ],
+  presets: [presetWind4(), presetAttributify()],
+});

package/template-vp-vue-eslint-vapor/vite.config.ts

@@ -0,0 +1,66 @@
+import path from "node:path";
+import process from "node:process";
+
+import { AntdvNextResolver } from "@antdv-next/auto-import-resolver";
+import Vue from "@vitejs/plugin-vue";
+import UnoCSS from "unocss/vite";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import Inspect from "vite-plugin-inspect";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
+import { defineConfig, lazyPlugins, loadEnv } from "vite-plus";
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const { VITE_PORT, VITE_API_URL, VITE_API_AFFIX } = env;
+
+  return {
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+    server: {
+      port: Number(VITE_PORT),
+      host: "0.0.0.0",
+      open: false,
+      proxy: {
+        [`^/${VITE_API_AFFIX}`]: {
+          target: VITE_API_URL,
+          changeOrigin: true,
+          // secure: false, // Disable SSL certificate verification
+          rewrite: (path) => path.replace(new RegExp(`^/${VITE_API_AFFIX}`), ""),
+        },
+      },
+    },
+    staged: {
+      "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,vue}": "vp check --fix",
+      "*.{json,jsonc}": "vp fmt",
+    },
+    plugins: lazyPlugins(() => [
+      Vue({
+        features: {
+          vapor: true,
+        },
+      }),
+      AutoImport({
+        imports: ["vue", "vue-router"],
+        dts: "./src/types/auto-import.d.ts",
+      }),
+      Components({
+        resolvers: [AntdvNextResolver()],
+        dts: "./src/types/components.d.ts",
+      }),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(__dirname, "src/assets/icon")],
+        // Specify symbolId format
+        symbolId: "icon-[dir]-[name]",
+      }),
+      UnoCSS(),
+      Inspect(),
+    ]),
+  };
+});

package/template-vue-vp-eslint/.env

@@ -0,0 +1,6 @@
+VITE_PORT = 9999
+VITE_PATH = '/'
+VITE_APP_NAME = "xxx"
+
+# 后端
+VITE_API_AFFIX = 'api'

package/template-vue-vp-eslint/.env.development

@@ -0,0 +1,2 @@
+# 后端
+VITE_API_URL = 'http://localhost:8080'

package/template-vue-vp-eslint/.env.production

@@ -0,0 +1,2 @@
+# 后端
+VITE_API_URL = 'http://localhost:8080'

package/template-vue-vp-eslint/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["VoidZero.vite-plus-extension-pack"]
+}

package/template-vue-vp-eslint/AGENTS.md

@@ -0,0 +1,16 @@
+<!--VITE PLUS START-->
+
+# Using Vite+, the Unified Toolchain for the Web
+
+This project is using Vite+, a unified toolchain built on top of Vite, Rolldown, Vitest, tsdown, Oxlint, Oxfmt, and Vite Task. Vite+ wraps runtime management, package management, and frontend tooling in a single global CLI called `vp`. Vite+ is distinct from Vite, and it invokes Vite through `vp dev` and `vp build`. Run `vp help` to print a list of commands and `vp <command> --help` for information about a specific command.
+
+Docs are local at `node_modules/vite-plus/docs` or online at https://viteplus.dev/guide/.
+
+## Review Checklist
+
+- [ ] Run `vp install` after pulling remote changes and before getting started.
+- [ ] Run `vp check` and `vp test` to format, lint, type check and test changes.
+- [ ] Check if there are `vite.config.ts` tasks or `package.json` scripts necessary for validation, run via `vp run <script>`.
+- [ ] If setup, runtime, or package-manager behavior looks wrong, run `vp env doctor` and include its output when asking for help.
+
+<!--VITE PLUS END-->

package/template-vue-vp-eslint/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-vue-vp-eslint/commitlint.config.js

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

package/template-vue-vp-eslint/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-vp-eslint/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template-vue-vp-eslint/lefthook.yml

@@ -0,0 +1,11 @@
+pre-commit:
+  commands:
+    check:
+      glob: "*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc,vue}"
+      run: pnpm eslint --fix {staged_files}
+      stage_fixed: true
+
+commit-msg:
+  commands:
+    lint commit message:
+      run: npx commitlint --edit {1}

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

@@ -0,0 +1,63 @@
+{
+  "name": "template-vp-vue-eslint",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "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": "^2.0.20",
+    "@antdv-next/icons": "^1.1.1",
+    "alova": "^3.5.3",
+    "antdv-next": "^1.4.5",
+    "axios": "^1.18.1",
+    "dayjs": "^1.11.21",
+    "echarts": "^6.1.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^4.0.2",
+    "pinia-plugin-persistedstate": "^4.7.1",
+    "radashi": "^12.9.1",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0"
+  },
+  "devDependencies": {
+    "@antdv-next/auto-import-resolver": "^1.1.0",
+    "@antfu/eslint-config": "^9.2.0",
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@types/node": "^26.1.1",
+    "@types/nprogress": "^0.2.3",
+    "@unocss/eslint-plugin": "^66.7.5",
+    "@unocss/preset-attributify": "^66.7.5",
+    "@unocss/preset-wind4": "^66.7.5",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "eslint": "10.8.0",
+    "eslint-plugin-format": "^2.0.1",
+    "eslint-plugin-oxlint": "^1.75.0",
+    "lefthook": "^2.1.10",
+    "oxlint": "^1.75.0",
+    "sass": "^1.102.0",
+    "typescript": "^6.0.3",
+    "unocss": "66.7.5",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.6",
+    "vite-plugin-inspect": "^12.0.2",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plus": "^0.2.6",
+    "vue-tsc": "^3.3.8"
+  },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": "11.11.0",
+      "onFail": "download"
+    }
+  }
+}

package/template-vue-vp-eslint/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@parcel/watcher': set this to true or false
+  lefthook: set this to true or false

package/template-vue-vp-eslint/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template-vue-vp-eslint/src/App.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <RouterView />
+</template>
+
+<style scoped></style>

package/template-vue-vp-eslint/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-vp-eslint/src/assets/icon/home.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.34912 1.55823C8.72361 1.23724 9.27639 1.23724 9.65088 1.55823L15.5981 6.65588C15.8493 6.87118 15.9784 7.1972 15.9419 7.526L15.0991 15.11C15.0429 15.6164 14.6145 15.9996 14.105 15.9996H3.89502C3.38553 15.9996 2.95714 15.6164 2.90088 15.11L2.05811 7.526C2.02157 7.1972 2.15067 6.87118 2.40186 6.65588L8.34912 1.55823ZM9.00049 9.99963C7.89603 9.99963 7.00066 10.8952 7.00049 11.9996V13.9996C7.00049 14.5519 7.4482 14.9996 8.00049 14.9996H10.0005C10.5526 14.9994 11.0005 14.5518 11.0005 13.9996V11.9996C11.0003 10.8953 10.1048 9.99985 9.00049 9.99963Z" fill="currentColor"/>
+</svg>

package/template-vue-vp-eslint/src/assets/icon/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="currentColor" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="currentColor" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/template-vue-vp-eslint/src/components/Icon/svg-icon.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+}>();
+const attrs = useAttrs();
+</script>
+
+<template>
+  <svg class="svg-icon" aria-hidden="true" v-bind="attrs">
+    <use :href="`#icon-${icon}`" />
+  </svg>
+</template>
+
+<style lang="scss" scoped>
+.svg-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover !important;
+}
+</style>

package/template-vue-vp-eslint/src/hooks/chart/lib.ts

@@ -0,0 +1,57 @@
+import {
+  BarChart,
+  GraphChart,
+  LineChart,
+  MapChart,
+  PictorialBarChart,
+  PieChart,
+  RadarChart,
+} from "echarts/charts";
+import {
+  AriaComponent,
+  CalendarComponent,
+  DataZoomComponent,
+  GraphicComponent,
+  GridComponent,
+  LegendComponent,
+  ParallelComponent,
+  PolarComponent,
+  RadarComponent,
+  TimelineComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+} from "echarts/components";
+import * as echarts from "echarts/core";
+// TODO 如果想换成SVG渲染，就导出SVGRenderer，
+//  并且放到 echarts.use 里，注释掉 CanvasRenderer
+import { /* SVGRenderer */ CanvasRenderer } from "echarts/renderers";
+
+echarts.use([
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  GraphChart,
+  // TODO 因为要兼容Online图表自适应打印，所以改成 CanvasRenderer，可能会模糊
+  CanvasRenderer,
+  PictorialBarChart,
+  RadarComponent,
+  ToolboxComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+]);
+
+export default echarts;

package/template-vue-vp-eslint/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-vue-vp-eslint/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>