create-bubbles 0.1.22 → 0.1.23

package/dist/index.mjs

@@ -40,6 +40,7 @@ Options:
 
 Available templates:
 ${colorMap.vue("vue-vp-eslint              vue")}
+${colorMap.vue("vp-vue-eslint-vapor       vue")}
 ${colorMap.react("react-rsbuild-biome        react")}
 ${colorMap.react("vp-react                   react")}
 ${colorMap.react("vp-react-shadcn            react")}
@@ -107,6 +108,10 @@ const FRAMEWORKS = [
 			name: "vue-vp-eslint",
 			display: "vp + eslint",
 			color: colorMap.vue
+		}, {
+			name: "vp-vue-eslint-vapor",
+			display: "vp + eslint + vapor",
+			color: colorMap.vue
 		}]
 	},
 	{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bubbles",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "author": "bubbles plant",
   "bin": {

package/template-vp-monorepo-react-nestjs/.vscode/settings.json

@@ -2,7 +2,7 @@
   "eslint.enable": false,
   "prettier.enable": false,
   "biome.enabled": false,
-  "npm.scriptRunner": "vp",
+  // "npm.scriptRunner": "vp",
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "[javascript]": {
     "editor.defaultFormatter": "oxc.oxc-vscode"
@@ -20,6 +20,7 @@
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
   "editor.codeActionsOnSave": {
-    "source.fixAll.oxc": "explicit"
+    "source.organizeImports": "always",
+    "source.fixAll.oxc": "always"
   }
 }

package/template-vp-monorepo-react-nestjs/apps/server/src/database/schema.ts

@@ -1,14 +1,73 @@
-import { pgEnum } from 'drizzle-orm/pg-core'
-import { pgTable, serial, varchar, timestamp } from 'drizzle-orm/pg-core'
+import {
+  index,
+  integer,
+  pgEnum,
+  pgTable,
+  serial,
+  timestamp,
+  uuid,
+  varchar,
+} from 'drizzle-orm/pg-core'
 
-export const useStatusEnum = pgEnum('user_status', ['active', 'locked', 'disabled'])
+export const userStatusEnum = pgEnum('user_status', ['active', 'locked', 'disabled'])
 
 export const authSessionStatusEnum = pgEnum('auth_session_status', ['active', 'revoked'])
 
+export const refreshFamilyStatusEnum = pgEnum('refresh_family_status', [
+  'active',
+  'revoked',
+  'compromised',
+])
+
+export const refreshTokenStatusEnum = pgEnum('refresh_token_status', [
+  'active',
+  'consumed',
+  'revoked',
+])
+
 export const users = pgTable('users', {
   id: serial('id').primaryKey(),
   name: varchar('name', { length: 100 }).notNull(),
   email: varchar('email', { length: 255 }).notNull().unique(),
-  password: varchar('password', { length: 255 }).notNull(),
+  // 第一阶段先允许 null，旧账号完成密码回填后再改成 notNull
+  passwordHash: varchar('password_hash', { length: 255 }), // .notNull(),
+
+  status: userStatusEnum('status').default('active').notNull(),
+  authEpoch: integer('auth_epoch').default(1).notNull(),
+  passwordChangeAt: timestamp('password_change_at', {
+    withTimezone: true,
+  }),
+
   createdAt: timestamp('create_at').defaultNow().notNull(),
+  updatedAt: timestamp('update_at', { withTimezone: true }).defaultNow().notNull(),
+})
+
+export const authSessions = pgTable(
+  'auth_sessions',
+  {
+    id: uuid('id').defaultRandom().primaryKey(),
+    userId: integer('user_id')
+      .notNull()
+      .references(() => users.id, { onDelete: 'restrict' }),
+    version: integer('version').default(1).notNull(),
+    status: authSessionStatusEnum('status').default('active').notNull(),
+    expiresAt: timestamp('expires_at', { withTimezone: true }).notNull(),
+    revokedAt: timestamp('revoked_at', { withTimezone: true }),
+    revokeReason: varchar('revoke_reason', { length: 100 }),
+    ip: varchar('ip', { length: 64 }),
+    userAgent: varchar('user_agent', { length: 500 }),
+    createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
+    updatedAt: timestamp('updated_at', { withTimezone: true }).defaultNow().notNull(),
+  },
+  (table) => [
+    index('auth_sessions_user_id_idx').on(table.userId),
+    index('auth_sessions_user_status_idx').on(table.userId, table.status),
+  ],
+)
+
+export const refreshTokenFamilies = pgTable('refresh_token_families', {
+  id: uuid('id').defaultRandom().primaryKey(),
+  sessionId: uuid('session_id')
+    .notNull()
+    .references(() => authSessions.id, { onDelete: 'restrict' }),
 })

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

@@ -9,8 +9,9 @@ export default defineConfig({
     singleQuote: true,
   },
   lint: {
+    plugins: ['unicorn', 'typescript', 'oxc', 'import'],
     jsPlugins: [{ name: 'vite-plus', specifier: 'vite-plus/oxlint-plugin' }],
-    rules: { 'vite-plus/prefer-vite-plus-imports': 'error' },
+    rules: { 'vite-plus/prefer-vite-plus-imports': 'error', 'import/no-duplicates': 'error' },
     options: { typeAware: true, typeCheck: true },
   },
   run: {

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

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

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

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

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

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

package/template-vp-vue-eslint-vapor/.vite-hooks/commit-msg

@@ -0,0 +1 @@
+NO_COLOR=1 commitlint --edit "$1"

package/template-vp-vue-eslint-vapor/.vite-hooks/pre-commit

@@ -0,0 +1 @@
+NO_COLOR=1 vp staged

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

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

package/template-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/README.md

@@ -0,0 +1,93 @@
+# template-vp-vue-eslint-vapor
+
+Vue 3 Vapor 项目模板，基于 Vite+ 统一工具链，集成 Antdv Next UI 组件库、UnoCSS 原子化样式和 ESLint 代码规范。
+
+## 技术栈
+
+| 分类      | 技术                                   | 说明                                            |
+| --------- | -------------------------------------- | ----------------------------------------------- |
+| 构建工具  | Vite+ (`vp`)                           | 统一工具链，封装 Vite + Rolldown + Oxlint       |
+| 框架      | Vue 3.6 RC                             | Composition API + `<script setup>` + Vapor 模式 |
+| 语言      | TypeScript 6                           | 配合 vue-tsc 进行类型检查                       |
+| UI 组件库 | Antdv Next                             | 自动按需导入                                    |
+| 状态管理  | Pinia                                  | 含持久化插件                                    |
+| 路由      | Vue Router 5                           |                                                 |
+| 请求库    | Alova                                  | 基于 Axios 适配器，双调用实例                   |
+| 样式方案  | UnoCSS                                 | Wind4 + Attributify 预设                        |
+| 代码规范  | ESLint (@antfu/eslint-config) + OxLint |                                                 |
+| Git 钩子  | Vite+ hooks + 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`  | 应用名称                 |
+
+## Vapor 模式
+
+模板在 `vite.config.ts` 中通过 `@vitejs/plugin-vue` 开启 `features.vapor`，用于体验 Vue 3.6 的 Vapor 编译模式。
+
+当前使用 Vue RC 版本，更适合功能验证和提前适配；对稳定性要求较高的生产项目建议选择稳定版 Vue 模板。
+
+## 代码规范
+
+- **ESLint**：使用 `@antfu/eslint-config`，单引号、无分号、自动排序 imports
+- **OxLint**：作为 ESLint 的补充，提供更快的 lint 速度
+- **Commitlint**：提交信息需遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范

package/template-vp-vue-eslint-vapor/commitlint.config.js

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

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

@@ -0,0 +1,64 @@
+{
+  "name": "template-vp-vue-eslint-vapor",
+  "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",
+    "prepare": "vp config"
+  },
+  "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.6.0-rc.2",
+    "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",
+    "fast-glob": "^3.3.3",
+    "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-vp-vue-eslint-vapor/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  "@parcel/watcher": false

package/template-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/src/App.vue

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

package/template-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/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-vp-vue-eslint-vapor/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-vue-eslint-vapor/src/layout/default/header/index.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { Avatar, Dropdown } from "antdv-next";
+import { defineComponent, h } from "vue";
+
+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: "退出登录" }];
+
+const VdomUserDropdown = defineComponent({
+  name: "VdomUserDropdown",
+  setup() {
+    return () =>
+      h(
+        Dropdown,
+        {
+          trigger: ["click"],
+          menu: {
+            items: dropdownItems,
+          },
+          onMenuClick: handleMenuClick,
+        },
+        {
+          default: () =>
+            h("div", { class: "flex-center gap-2 cursor-pointer" }, [
+              h(
+                Avatar,
+                {
+                  size: 32,
+                  src: userStore.avatar,
+                },
+                {
+                  default: () => userStore.name?.charAt(0).toUpperCase(),
+                },
+              ),
+              h("span", { class: "text-sm" }, userStore.name),
+            ]),
+        },
+      );
+  },
+});
+</script>
+
+<template>
+  <div class="flex gap-3 items-center">
+    <VdomUserDropdown />
+  </div>
+</template>