yd-admin

🎨 基于 Vue 3 的后台管理框架通用组件库

✨ 特性

• 📦 轻量高效 - Tree-shaking 支持，按需引入
• 🎯 类型安全 - 完整的 TypeScript 类型定义
• 🎨 主题定制 - CSS 变量设计，支持暗色模式
• ⚡ 性能优化 - 虚拟滚动、防抖节流、位置缓存
• 🔌 即插即用 - 零配置，简单 API

📦 安装

vp add yd-admin

🚀 快速开始

完整引入

import { createApp } from "vue";
import YdAdmin from "yd-admin";
import "yd-admin/style.css"; // 引入样式
import App from "./App.vue";

const app = createApp(App);
app.use(YdAdmin);
app.mount("#app");

按需引入

import { YdButton, YdInput, YdSelect } from "yd-admin";
import "yd-admin/style.css";

Vite 配置（自动导入）

// vite.config.ts
import Components from "unplugin-vue-components/vite";
import { YdAdminResolver } from "yd-admin/resolver";

export default {
  plugins: [
    Components({
      resolvers: [YdAdminResolver()],
    }),
  ],
};

📚 组件列表

基础组件 (Base)

| 组件 | 说明 | | ------------------- | ------------ | | YdButton | 按钮 | | YdInput | 输入框 | | YdTextarea | 多行文本 | | YdInputNumber | 数字输入 | | YdSelect | 选择器 | | YdColorPicker | 颜色选择 | | YdTreeSelect | 树选择 | | YdSwitch | 开关 | | YdCheckbox | 复选框 | | YdCheckboxGroup | 复选框组 | | YdRadio | 单选框 | | YdRadioGroup | 单选框组 | | YdTag | 标签 | | YdAvatar | 头像 | | YdBadge | 徽章 | | YdRate | 评分 | | YdSlider | 滑块 | | YdDatePicker | 日期选择 | | YdDateRangePicker | 日期范围选择 | | YdTimePicker | 时间选择 | | YdCascader | 级联选择 | | YdAutoComplete | 自动完成 | | YdTransfer | 穿梭框 | | YdUpload | 上传 | | YdLogin | 登录框 | | YdLoginCentered | 居中登录框 | | YdCaptcha | 验证码 | | YdPinInput | PIN 输入 | | YdCalendar | 日历 |

AI 组件 (AI Components)

| 组件 | 说明 | | ----------------- | ---------------- | | YdChatBubble | 聊天消息气泡 | | YdConversation | 会话容器 | | YdPromptInput | AI提示词输入框 | | YdReasoning | AI推理过程展示 | | YdCodeBlock | 代码块（带高亮） | | YdStreamingText | 流式文本展示 | | YdAiLoader | AI加载动画 | | YdSuggestion | AI建议按钮 | | YdSources | 引用来源展示 | | YdModelSelector | AI模型选择器 | | YdChatPage | AI聊天页面 |

表单组件 (Form)

| 组件 | 说明 | | ------------ | -------- | | YdForm | 表单容器 | | YdFormItem | 表单项 |

布局组件 (Layout)

| 组件 | 说明 | | ----------------- | ------------ | | YdLayout | 后台管理布局 | | YdLayoutSidebar | 侧边栏 | | YdLayoutHeader | 顶部 header | | YdLayoutContent | 内容区域 | | YdCrudPage | 增删改查页面 | | YdSpace | 间距 | | YdDivider | 分割线 | | YdStepper | 步骤条 |

数据存储 (Stores)

| 导出 | 说明 | | --------------------- | ---------------------------- | | secureStoragePlugin | Pinia 加密存储插件 (AES-GCM) | | initSecureStorage | 初始化安全存储密钥 |

使用示例:

import { createPinia } from "pinia";
import { secureStoragePlugin, initSecureStorage } from "yd-admin";

const pinia = createPinia();
pinia.use(secureStoragePlugin);

// 应用启动时初始化
await initSecureStorage();

数据展示 (Data Display)

| 组件 | 说明 | | --------------------- | ------------------ | | YdCard | 卡片 | | YdTable | 表格（含虚拟滚动） | | YdProgress | 进度条 | | YdStatistic | 统计数值 | | YdCollapse | 折叠面板 | | YdTimeline | 时间线 | | YdTree | 树形控件 | | YdList | 列表 | | YdEmpty | 空状态 | | YdImage | 图片 | | YdImagePreviewGroup | 图片预览组 | | YdFlowChart | 流程图 | | YdWatermark | 水印 |

导航组件 (Navigation)

| 组件 | 说明 | | -------------- | -------- | | YdMenu | 菜单 | | YdTabs | 标签页 | | YdBreadcrumb | 面包屑 | | YdPagination | 分页 | | YdDropdown | 下拉菜单 | | YdSteps | 步骤条 | | YdStepper | 步骤器 | | YdAnchor | 锚点 |

反馈组件 (Feedback)

| 组件 | 说明 | | --------------- | ---------- | | YdModal | 对话框 | | YdDrawer | 抽屉 | | Message | 消息提示 | | Notification | 通知提醒 | | YdTooltip | 文字提示 | | YdSpin | 加载中 | | YdSkeleton | 骨架屏 | | YdPopconfirm | 气泡确认框 | | YdResult | 结果页 | | YdContextMenu | 右键菜单 | | YdLoadingBar | 加载进度条 |

配置组件 (Config)

| 组件 | 说明 | | ------------------ | -------- | | YdConfigProvider | 全局配置 |

路由 (Router)

| 导出 | 说明 | | ----------------------- | ---------------- | | createAppRouter | 创建路由实例 | | createAuthGuard | 创建认证守卫 | | createPermissionGuard | 创建权限守卫 | | YdRouter | 路由命名空间导出 |

🎨 主题定制

组件库使用 CSS 变量构建，支持全局主题覆盖：

:root {
  --yd-color-primary: #1890ff;
  --yd-border-radius: 4px;
  /* 更多变量见 tokens.css */
}

或使用 YdConfigProvider：

<template>
  <YdConfigProvider :theme="darkTheme">
    <App />
  </YdConfigProvider>
</template>

🛠️ 工具函数

import { cn, debounce, throttle, generateId, deepClone } from "yd-admin";

// 合并 class
const classes = cn("base-class", condition && "conditional-class");

// 防抖
const debouncedFn = debounce(() => console.log("debounced"), 300);

// 节流
const throttledFn = throttle(() => console.log("throttled"), 100);

// 生成唯一 ID
const id = generateId("prefix");

// 深拷贝
const cloned = deepClone(obj);

📐 组件尺寸

所有组件支持统一尺寸配置：

| 尺寸 | 说明 | | ---- | ---------- | | xs | 超小 | | sm | 小 | | md | 中（默认） | | lg | 大 | | xl | 特大 |

🌐 开发

环境要求

• Node.js >= 18
• Vite+ (vp)

安装依赖

vp install

开发预览

# 启动 Demo
vp dev

# 监视模式构建
vp build --watch

代码检查

# 类型检查和格式化检查
vp check

# 格式化修复
vp fmt

构建发布

vp build

运行测试

vp test

✅ 代码质量状态

项目已通过以下检查：

• ✅ TypeScript 类型检查
• ✅ ESLint 代码检查
• ✅ 格式化检查
• ✅ 100 个单元测试全部通过

📊 Bundle 信息

| 文件 | 大小 | Gzip | | -------------- | ----------- | ----------- | | dist/index.js | ~472 KB | ~89 KB | | dist/style.css | ~182 KB | ~23 KB | | 总计 | ~800 KB | ~136 KB |

📋 更新日志

v0.1.11

• release: 版本号更新至 v0.1.11
• enhancement: 优化构建配置

v0.1.9

• feat(AI Chat): AI 聊天页面组件 (YdChatPage) - 支持会话列表、模型选择、流式输出
• docs: ChatPage 组件文档
• docs: VitePress sidebar 新增 ChatPage
• docs: README.md 新增 AI 组件列表

v0.1.8

• feat(secureStorage): 支持 localStorage 和 sessionStorage 分别设置不同密钥
• fix: 修复报错问题
• enhancement: 优化说明文档
• feat: 登录控件优化，增强用户体验
• feat: 增加侧边栏控件，支持更灵活的布局配置
• feat: 增加懒加载和优化轮询机制，提升性能
• enhancement: 优化整体介绍和文档
• feat: 增加整体效果展示组件
• feat: 虚拟滚动等性能优化
• enhancement: 暂存优化，改进数据缓存

v0.1.7

• feat: 安全存储插件 (AES-GCM) 支持敏感数据加密存储

v0.1.6

• feat: 多语言支持 (i18n)

v0.1.5

• feat: 虚拟滚动表格组件

v0.1.4

• feat: 初始版本发布

🔗 相关链接

• Vue 3 文档
• Vite+ 文档
• AsyncValidator

📄 License

MIT