u

code/base-project/base-vue/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ao/ao-design": "workspace:*",
     "@iconify/vue": "^5.0.0",
     "vue": "^3.5.18"
   },
@@ -16,11 +17,15 @@
     "@antfu/eslint-config": "^5.2.1",
     "@types/node": "^24.3.0",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.34.0",
     "eslint-plugin-format": "^1.0.1",
     "sass": "^1.90.0",
+    "tsx": "^4.20.5",
     "typescript": "~5.8.3",
+    "unplugin-auto-import": "^20.1.0",
+    "unplugin-vue-components": "^29.0.0",
     "vite": "^7.1.2",
     "vue-tsc": "^3.0.5"
   }

code/base-project/base-vue/packages/ao-design/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@ao/ao-design",
+  "version": "1.0.0",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles": "./src/_styles/index.scss"
+  },
+  "typesVersions": {
+    "*": {
+      "*": ["./src/*"]
+    }
+  },
+  "peerDependencies": {
+    "@iconify/vue": "^2.1.0",
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "sass": "^1.90.0",
+    "typescript": "^5.1.6",
+    "vue": "^3.3.0"
+  }
+}

code/base-project/base-vue/packages/ao-design/src/_styles/index.scss

@@ -0,0 +1,4 @@
+@import './theme';
+@import '../button/index.scss';
+
+@prefix: 'my-prefix';

code/base-project/base-vue/packages/ao-design/src/_styles/theme.scss

@@ -0,0 +1,8 @@
+/* 主题色 */
+$primary-color: #007bff;
+$secondary-color: #6c757d;
+$success-color: #28a745;
+$warning-color: #ffc107;
+$danger-color: #dc3545;
+$light-color: #f8f9fa;
+$dark-color: #343a40;

code/base-project/base-vue/packages/ao-design/src/button/index.scss

@@ -0,0 +1,95 @@
+/* 基本按钮样式 */
+.btn {
+  height: 40px; /* 增大按钮高度 */
+  padding: 0 24px; /* 左右内边距增加 */
+  font-size: 14px;
+  font-weight: 500; /* 加粗字体 */
+  border-radius: 6px; /* 增大圆角 */
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all 0.3s ease; /* 平滑过渡效果 */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 默认阴影效果 */
+}
+
+/* 主色按钮 */
+.btn-primary {
+  background: $primary-color; /* 使用主题色 */
+  color: #fff;
+  border: 1px solid $primary-color; /* 与背景颜色一致的边框 */
+}
+
+.btn-primary:hover {
+  background: darken($primary-color, 10%); /* 悬停效果 */
+  border-color: darken($primary-color, 10%);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 悬停时阴影加重 */
+}
+
+/* 辅助色按钮 */
+.btn-secondary {
+  background: $secondary-color; /* 使用辅助色 */
+  color: #fff;
+  border: 1px solid $secondary-color; /* 边框颜色 */
+}
+
+.btn-secondary:hover {
+  background: darken($secondary-color, 10%);
+  border-color: darken($secondary-color, 10%);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
+}
+
+/* 成功色按钮 */
+.btn-success {
+  background: $success-color; /* 成功色 */
+  color: #fff;
+  border: 1px solid $success-color; /* 边框颜色 */
+}
+
+.btn-success:hover {
+  background: darken($success-color, 10%);
+  border-color: darken($success-color, 10%);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
+}
+
+/* 警告色按钮 */
+.btn-warning {
+  background: $warning-color; /* 警告色 */
+  color: #fff;
+  border: 1px solid $warning-color; /* 边框颜色 */
+}
+
+.btn-warning:hover {
+  background: darken($warning-color, 10%);
+  border-color: darken($warning-color, 10%);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
+}
+
+/* 危险色按钮 */
+.btn-danger {
+  background: $danger-color; /* 危险色 */
+  color: #fff;
+  border: 1px solid $danger-color; /* 边框颜色 */
+}
+
+.btn-danger:hover {
+  background: darken($danger-color, 10%);
+  border-color: darken($danger-color, 10%);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 悬停时阴影加重 */
+}
+
+/* 链接按钮 */
+.btn-link {
+  background: transparent;
+  color: $primary-color;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  text-decoration: none;
+}
+
+.btn-link:hover {
+  text-decoration: underline;
+}

code/base-project/base-vue/packages/ao-design/src/button/index.tsx

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Button',
+  props: {
+    type: {
+      type: String as PropType<'primary' | 'secondary' | 'danger' | 'link'>,
+      default: 'primary',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    const baseClass = 'btn'
+    const typeClass = `btn-${props.type}`
+
+    return () => (
+      <button class={`${baseClass} ${typeClass}`} disabled={props.disabled}>
+        {slots.default?.()}
+      </button>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/components.ts

@@ -0,0 +1,3 @@
+export { default as Button } from './button'
+export { default as Icon } from './icon'
+export { default as Input } from './input'

code/base-project/base-vue/packages/ao-design/src/icon/index.tsx

@@ -0,0 +1,23 @@
+import type { PropType } from 'vue'
+import { Icon } from '@iconify/vue'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'AIcon',
+  props: {
+    icon: { type: String as PropType<string>, required: true },
+    width: { type: String, default: '24px' },
+    height: { type: String, default: '24px' },
+    color: { type: String, default: 'currentColor' }, // 默认颜色使用 currentColor，支持继承父元素的颜色
+  },
+  setup(props) {
+    return () => (
+      <Icon
+        icon={props.icon}
+        width={props.width}
+        height={props.height}
+        style={{ color: props.color, verticalAlign: 'middle' }}
+      />
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/src/index.ts

@@ -0,0 +1,41 @@
+import type { App, Component } from 'vue'
+// components/index.ts（修改后）
+
+import * as comps from './components'
+
+// 按需导出组件（可单独 import）
+export * from './components'
+
+// 收集所有组件
+const allComponents = Object.values(comps).filter(
+  (c: any) => c && c.name,
+) as Component[]
+
+export interface AoDesignOptions {
+  prefix?: string
+  components?: Component[] // 按需注册时传入需要注册的组件
+}
+
+const AoDesign = {
+  install(app: App, options: AoDesignOptions = {}) {
+    const prefix = options?.prefix ?? 'A'
+    // 如果用户指定了 components，则只注册这些，否则注册全部
+    const componentsToRegister = options?.components || allComponents
+
+    componentsToRegister.forEach((component: any) => {
+      if (!component?.name)
+        return
+
+      const name = `${prefix}${component.name}`
+
+      app.component(name, component)
+      // 注册 kebab-case
+      app.component(
+        name.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, ''),
+        component,
+      )
+    })
+  },
+}
+
+export default AoDesign

code/base-project/base-vue/packages/ao-design/src/input/index.tsx

@@ -0,0 +1,64 @@
+import type { PropType } from 'vue'
+import { computed, defineComponent, ref, toRefs } from 'vue'
+
+export default defineComponent({
+  name: 'Input',
+  props: {
+    modelValue: { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    type: { type: String as PropType<'text' | 'password' | 'number'>, default: 'text' },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+  },
+  emits: ['update:modelValue', 'change', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const inputRef = ref<HTMLInputElement | null>(null)
+
+    const handleInput = (e: Event) => {
+      const value = (e.target as HTMLInputElement).value
+      emit('update:modelValue', value)
+      emit('change', value)
+    }
+
+    const handleClear = () => {
+      emit('update:modelValue', '')
+      inputRef.value?.focus()
+      emit('change', '')
+    }
+
+    const showClear = computed(() => props.clearable && !!props.modelValue && !props.disabled)
+
+    return () => (
+      <div class="a-input-wrapper" style={{ position: 'relative', display: 'inline-block' }}>
+        <input
+          ref={inputRef}
+          class="a-input"
+          type={props.type}
+          placeholder={props.placeholder}
+          value={props.modelValue}
+          disabled={props.disabled}
+          onInput={handleInput}
+          onFocus={e => emit('focus', e)}
+          onBlur={e => emit('blur', e)}
+          style={{ paddingRight: showClear.value ? '24px' : '8px' }}
+        />
+        {showClear.value && (
+          <span
+            class="a-input-clear"
+            onClick={handleClear}
+            style={{
+              position: 'absolute',
+              right: '4px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              cursor: 'pointer',
+              fontSize: '12px',
+            }}
+          >
+            ×
+          </span>
+        )}
+      </div>
+    )
+  },
+})

code/base-project/base-vue/packages/ao-design/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

code/base-project/base-vue/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

code/base-project/base-vue/src/App.vue

@@ -1,152 +1,8 @@
-<script>
-export default {
-  directives: {
-    shine: {
-      beforeMount(el) {
-        el.style.position = el.style.position || 'relative'
-        el.style.overflow = 'hidden'
-
-        const trigger = () => {
-          if (el.disabled)
-            return
-
-          // 清理上一次效果
-          if (el.__shineTimer) {
-            clearTimeout(el.__shineTimer)
-            el.classList.remove('btn-shine')
-          }
-
-          void el.offsetWidth
-          el.classList.add('btn-shine')
-
-          el.__shineTimer = setTimeout(() => {
-            el.classList.remove('btn-shine')
-            el.__shineTimer = null
-          }, 300)
-        }
-
-        el.addEventListener('click', trigger)
-        el.addEventListener('keydown', (e) => {
-          if (e.key === 'Enter' || e.key === ' ')
-            trigger()
-        })
-      },
-    },
-  },
-}
+<script setup lang="ts">
 </script>
 
 <template>
-  <div class="btn-demo">
-    <button v-shine class="btn btn-primary">
-      主按钮
-    </button>
-    <button v-shine class="btn btn-secondary">
-      次按钮
-    </button>
-    <button v-shine class="btn btn-danger">
-      危险按钮
-    </button>
-    <button v-shine class="btn btn-link">
-      链接按钮
-    </button>
-  </div>
+  <AButton type="primary">
+    primary按钮
+  </AButton>
 </template>
-
-<style scoped>
-.btn {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  padding: 0 20px;
-  font-size: 14px;
-  border-radius: 2px;
-  border: none;
-  cursor: pointer;
-  user-select: none;
-  overflow: hidden;
-  background: #1d4ed8;
-  color: #fff;
-  transition: background 0.15s ease;
-}
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.btn:focus {
-  outline: none;
-}
-
-/* 光亮动画遮罩 */
-@keyframes shineAnimation {
-  0% {
-    transform: translateX(-100%) skewX(-20deg);
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    transform: translateX(100%) skewX(-20deg);
-    opacity: 0;
-  }
-}
-
-.btn-shine::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50%;
-  height: 100%;
-  background: linear-gradient(
-    120deg,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.5) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  transform: translateX(-100%) skewX(-20deg);
-  animation: shineAnimation 0.3s ease;
-  pointer-events: none;
-  z-index: 2;
-}
-
-/* 按钮类型 */
-.btn-primary {
-  background: #1d4ed8;
-  color: #fff;
-}
-.btn-primary:hover:not(:disabled) {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: #f3f4f6;
-  color: #374151;
-  border: 1px solid #d1d5db;
-}
-.btn-secondary:hover:not(:disabled) {
-  background: #e5e7eb;
-  border-color: #1d4ed8;
-  color: #1d4ed8;
-}
-
-.btn-danger {
-  background: #dc2626;
-  color: #fff;
-}
-.btn-danger:hover:not(:disabled) {
-  background: #b91c1c;
-}
-
-.btn-link {
-  background: transparent;
-  color: #1d4ed8;
-  padding: 0 16px;
-}
-.btn-link:hover:not(:disabled) {
-  text-decoration: underline;
-}
-</style>

code/base-project/base-vue/src/components.d.ts

@@ -0,0 +1,15 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AButton: typeof import('@ao/ao-design')['Button']
+    AIcon: typeof import('@ao/ao-design')['Icon']
+    AInput: typeof import('@ao/ao-design')['Input']
+  }
+}

code/base-project/base-vue/src/components/HelloWorld.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

code/base-project/base-vue/src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './style.css'
+import '@ao/ao-design/styles'
 
 createApp(App).mount('#app')

code/base-project/base-vue/src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

code/base-project/base-vue/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

code/base-project/base-vue/test.html

@@ -1,90 +1,79 @@
 <!doctype html>
 <html lang="zh-CN">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>后台按钮三状态带轻度阴影</title>
+    <meta charset="utf-8" />
+    <title>后台低交互按钮（纯 CSS 自动亮暗）</title>
     <style>
+      :root {
+        --primary-color: #2563eb;
+        --secondary-color: #6b7280;
+        --danger-color: #dc2626;
+      }
+
       body {
-        font-family: Arial, sans-serif;
-        background: #f5f6fa;
-        padding: 20px;
+        font-family: sans-serif;
+        background: #f8fafc;
+        padding: 40px;
+      }
+      .row {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 36px;
       }
 
-      /* 按钮组容器 */
-      .btn-group {
-        background: #fff;
-        padding: 16px;
-        border-radius: 6px;
-        min-width: 300px;
-      }
-
-      /* 基础按钮 */
-      .admin-btn {
-        padding: 8px 16px;
-        font-size: 13px;
+      .btn {
+        padding: 6px 22px;
+        border-radius: 0px;
+        font-size: 14px;
         font-weight: 500;
-        border: none;
-        border-radius: 4px;
-        color: #fff;
-        margin: 0 6px 6px 0;
         cursor: pointer;
+        border: none;
+        color: #fff;
         outline: none;
-        transition:
-          background 0.2s ease,
-          box-shadow 0.2s ease;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* 默认轻度阴影 */
+        transition: background-color 0.1s ease;
       }
 
-      /* hover 增强阴影 */
-      .admin-btn:hover {
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
-      }
-
-      /* 点击时阴影减小，颜色加深，模拟按钮被按下 */
-      .admin-btn:active {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-      }
-
-      /* 主按钮 - 蓝色系 */
+      /* 主色按钮 */
       .btn-primary {
-        background-color: #4f83ff;
+        background-color: var(--primary-color);
       }
       .btn-primary:hover {
-        background-color: #6a95ff;
+        background-color: color-mix(in srgb, var(--primary-color) 90%, white 10%);
       }
       .btn-primary:active {
-        background-color: #1e5bcc;
+        background-color: color-mix(in srgb, var(--primary-color) 90%, black 10%);
       }
 
-      /* 次按钮 - 黑色系 */
+      /* 次色按钮 */
       .btn-secondary {
-        background-color: #4a4a4a;
+        background-color: var(--secondary-color);
       }
       .btn-secondary:hover {
-        background-color: #6a6a6a;
+        background-color: color-mix(in srgb, var(--secondary-color) 90%, white 10%);
       }
       .btn-secondary:active {
-        background-color: #222;
+        background-color: color-mix(in srgb, var(--secondary-color) 90%, black 10%);
       }
 
-      /* 危险按钮 - 红色系 */
+      /* 危险按钮 */
       .btn-danger {
-        background-color: #f03e3e;
+        background-color: var(--danger-color);
       }
       .btn-danger:hover {
-        background-color: #f76666;
+        background-color: color-mix(in srgb, var(--danger-color) 90%, white 10%);
       }
       .btn-danger:active {
-        background-color: #a30000;
+        background-color: color-mix(in srgb, var(--danger-color) 90%, black 10%);
       }
     </style>
   </head>
   <body>
-    <div class="btn-group">
-      <button class="admin-btn btn-primary">保存修改</button>
-      <button class="admin-btn btn-secondary">取消</button>
-      <button class="admin-btn btn-danger">删除</button>
+    <h1>后台低交互按钮（纯 CSS 自动亮暗）</h1>
+
+    <div class="row">
+      <button class="btn btn-primary">确认</button>
+      <button class="btn btn-secondary">取消</button>
+      <button class="btn btn-danger">删除</button>
     </div>
   </body>
 </html>

code/base-project/base-vue/tsconfig.json

@@ -21,6 +21,6 @@
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true
   },
-  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.vue"],
+  "include": ["./**/*.ts", "./**/*.d.ts", "./**/*.tsx", "./**/*.vue"],
   "exclude": ["node_modules", "dist"]
 }

code/base-project/base-vue/vite.config.ts

@@ -1,7 +1,43 @@
+import type { ComponentResolver } from 'unplugin-vue-components'
 import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import Components from 'unplugin-vue-components/vite'
 import { defineConfig } from 'vite'
 
-// https://vite.dev/config/
+/**
+ * AoDesign Resolver
+ * 自动支持前缀组件，如 <AButton>
+ */
+export function AoDesignResolver(prefix = 'A'): ComponentResolver {
+  return {
+    type: 'component',
+    resolve: (name: string) => {
+      // 处理 PascalCase (AButton)
+      const pascalName = name
+        .split('-')
+        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('')
+
+      // 如果是 PascalCase，且以指定前缀开头，返回组件路径
+      if (pascalName.startsWith(prefix)) {
+        const importName = pascalName.slice(prefix.length)
+        const path = '@ao/ao-design'
+        return { name: pascalName, importName, path }
+      }
+
+      return null
+    },
+  }
+}
+
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    Components({
+      resolvers: [AoDesignResolver('A')], // 前缀可自定义
+      dts: 'src/components.d.ts', // 自动生成 TS 类型声明
+      directoryAsNamespace: true,
+    }),
+  ],
 })