# DJM UI

> 面向企业级中后台的 Vue 3 组件库，零构建 ESM，100 个组件，MIT 许可。

DJM UI（npm 包名 djm-ui）用于搭建 CMS、OA、ERP 等中后台系统。组件以 ESM 源码提供，不依赖构建步骤；同时提供 UMD 与打包好的 CSS，可通过 CDN 引入。内置浅色 / 深色主题、zh-CN 与 en-US 文案、v-permission 按钮权限和 TypeScript 类型。

## 入口

- [官网](https://ui.duojumi.com/): 项目主页，含安装命令与组件概览
- [组件文档](https://ui.duojumi.com/docs/): 110 个页面的属性、事件、插槽与可运行示例
- [示例应用](https://ui.duojumi.com/app/): 完整后台外壳，含工作台、用户管理、报表等页面
- [后台模板](https://ui.duojumi.com/admin/): djm-ui-admin 介绍，壳与页面清单、接入三步、子路径与许可
- [常见问题](https://ui.duojumi.com/faq/): 安装、接入、升级与许可的 15 个问题
- [后台模板接入文档](https://ui.duojumi.com/docs/#/admin): 壳的属性、事件与数据接口约定
- [npm 包](https://www.npmjs.com/package/djm-ui): djm-ui@0.74.1
- [后台模板包](https://www.npmjs.com/package/djm-ui-admin): djm-ui-admin@0.74.1
- [源码仓库](https://yohan.cloud:8081/DJM/dimui.git): 组件、样式、文档与测试
- [站点地图](https://ui.duojumi.com/sitemap.xml)

## 事实

- 当前版本：0.74.1
- 组件数量：100 个，文档页 110 个
- 对等依赖：vue ^3.4.0（不支持 Vue 2）
- 后台模板：djm-ui-admin，与组件库同版本号，20 个业务页，外壳与示例应用共用，演示数据随包，接入时替换成自己的接口
- 许可：MIT，可商用、修改、分发，保留版权声明
- 浏览器：Chrome / Edge / Firefox / Safari 最近两个大版本，不支持 IE
- 宽度适配：320 到 2560 逐档校验
- 无障碍：组件带 aria 属性与键盘操作，浮层有焦点管理

## 安装

```bash
npm i djm-ui

# 连同后台模板一起装
npm i djm-ui djm-ui-admin
```

```js
import { createApp } from 'vue'
import DjmUI from 'djm-ui'
import 'djm-ui/styles'
import App from './App.js'

createApp(App).use(DjmUI, { locale: 'zh-CN' }).mount('#app')
```

按需引入走具名导入或组件子路径，例如 `djm-ui/components/button`、`djm-ui/components/grid/row`；只要部分样式时按 `styles/tokens.css`、`styles/base.css`、`styles/components/*.css` 的顺序引入。

## 组件

### 指南

- [快速开始](https://ui.duojumi.com/docs/#/start)
- [主题与国际化](https://ui.duojumi.com/docs/#/guide)
- [Admin 后台模板](https://ui.duojumi.com/docs/#/admin)
- [AI 助手 · MCP](https://ui.duojumi.com/docs/#/mcp)

### 基础

- [Button 按钮](https://ui.duojumi.com/docs/#/button)
- [Icon 图标](https://ui.duojumi.com/docs/#/icon)
- [PageHeader 页头](https://ui.duojumi.com/docs/#/page-header)
- [Breadcrumb 面包屑](https://ui.duojumi.com/docs/#/breadcrumb)
- [Divider 分割线](https://ui.duojumi.com/docs/#/divider)
- [Avatar 头像](https://ui.duojumi.com/docs/#/avatar)
- [Badge 徽标](https://ui.duojumi.com/docs/#/badge)
- [Menu 菜单](https://ui.duojumi.com/docs/#/menu)
- [Popover 浮层](https://ui.duojumi.com/docs/#/popover)
- [Status 状态](https://ui.duojumi.com/docs/#/status)
- [Empty 空状态](https://ui.duojumi.com/docs/#/empty)

### 导航

- [Anchor 锚点](https://ui.duojumi.com/docs/#/anchor)
- [Backtop 回到顶部](https://ui.duojumi.com/docs/#/backtop)
- [Segmented 分段切换](https://ui.duojumi.com/docs/#/segmented)

### 布局

- [Space 间距](https://ui.duojumi.com/docs/#/space)
- [Affix 固钉](https://ui.duojumi.com/docs/#/affix)
- [Splitter 分隔面板](https://ui.duojumi.com/docs/#/splitter)
- [Grid 栅格](https://ui.duojumi.com/docs/#/grid)
- [Layout 布局容器](https://ui.duojumi.com/docs/#/layout)

### 展示

- [Tag 标签](https://ui.duojumi.com/docs/#/tag)
- [Card 卡片](https://ui.duojumi.com/docs/#/card)
- [Statistic 统计数值](https://ui.duojumi.com/docs/#/statistic)
- [Progress 进度条](https://ui.duojumi.com/docs/#/progress)
- [Skeleton 骨架屏](https://ui.duojumi.com/docs/#/skeleton)
- [Result 结果页](https://ui.duojumi.com/docs/#/result)
- [Timeline 时间线](https://ui.duojumi.com/docs/#/timeline)
- [Collapse 折叠面板](https://ui.duojumi.com/docs/#/collapse)
- [Steps 步骤条](https://ui.duojumi.com/docs/#/steps)
- [Image 图片](https://ui.duojumi.com/docs/#/image)
- [Watermark 水印](https://ui.duojumi.com/docs/#/watermark)
- [Carousel 轮播](https://ui.duojumi.com/docs/#/carousel)
- [Calendar 日历](https://ui.duojumi.com/docs/#/calendar)

### 表单

- [Input 输入框](https://ui.duojumi.com/docs/#/input)
- [Select 下拉选择](https://ui.duojumi.com/docs/#/select)
- [Checkbox 复选框](https://ui.duojumi.com/docs/#/checkbox)
- [Radio 单选框](https://ui.duojumi.com/docs/#/radio)
- [Switch 开关](https://ui.duojumi.com/docs/#/switch)
- [AutoComplete 自动完成](https://ui.duojumi.com/docs/#/autocomplete)
- [Mentions 提及](https://ui.duojumi.com/docs/#/mentions)
- [InputTag 标签输入](https://ui.duojumi.com/docs/#/input-tag)
- [Password 密码输入](https://ui.duojumi.com/docs/#/password)
- [InputNumber 数字输入](https://ui.duojumi.com/docs/#/input-number)
- [Slider 滑块](https://ui.duojumi.com/docs/#/slider)
- [Rate 评分](https://ui.duojumi.com/docs/#/rate)
- [TimePicker 时间选择](https://ui.duojumi.com/docs/#/time-picker)
- [ColorPicker 颜色选择](https://ui.duojumi.com/docs/#/color-picker)
- [Cascader 级联选择](https://ui.duojumi.com/docs/#/cascader)
- [Transfer 穿梭框](https://ui.duojumi.com/docs/#/transfer)
- [Upload 上传](https://ui.duojumi.com/docs/#/upload)
- [Form 表单](https://ui.duojumi.com/docs/#/form)
- [FormItem 表单项](https://ui.duojumi.com/docs/#/form-item)
- [FilterTags 筛选标签](https://ui.duojumi.com/docs/#/filter-tags)

### 业务组件

- [OrgPicker 人员选择](https://ui.duojumi.com/docs/#/org-picker)
- [SchemaForm 动态表单](https://ui.duojumi.com/docs/#/schema-form)
- [ApprovalFlow 审批流](https://ui.duojumi.com/docs/#/approval-flow)
- [QueryFilter 查询筛选](https://ui.duojumi.com/docs/#/query-filter)
- [MediaPicker 媒体库](https://ui.duojumi.com/docs/#/media-picker)
- [Kanban 看板](https://ui.duojumi.com/docs/#/kanban)
- [AttachmentList 附件列表](https://ui.duojumi.com/docs/#/attachment-list)
- [Notification 通知列表](https://ui.duojumi.com/docs/#/notification)
- [ConfigProvider 全局配置](https://ui.duojumi.com/docs/#/config-provider)
- [DateTimePicker 日期时间](https://ui.duojumi.com/docs/#/date-time-picker)
- [VirtualList 虚拟列表](https://ui.duojumi.com/docs/#/virtual-list)
- [BatchBar 批量操作条](https://ui.duojumi.com/docs/#/batch-bar)
- [ImportWizard 导入向导](https://ui.duojumi.com/docs/#/import-wizard)
- [Diff 差异对比](https://ui.duojumi.com/docs/#/diff)
- [TreeTable 树形表格](https://ui.duojumi.com/docs/#/tree-table)
- [Schedule 日程表](https://ui.duojumi.com/docs/#/schedule)
- [Comment 评论区](https://ui.duojumi.com/docs/#/comment)
- [Signature 手写签名](https://ui.duojumi.com/docs/#/signature)
- [Print 打印](https://ui.duojumi.com/docs/#/print)
- [Gantt 甘特图](https://ui.duojumi.com/docs/#/gantt)
- [FieldList 动态字段列表](https://ui.duojumi.com/docs/#/field-list)
- [Chat 对话气泡](https://ui.duojumi.com/docs/#/chat)
- [OrgChart 组织架构图](https://ui.duojumi.com/docs/#/org-chart)
- [PageTabs 页面标签](https://ui.duojumi.com/docs/#/page-tabs)

### 数据展示

- [Table 表格](https://ui.duojumi.com/docs/#/table)
- [Table 固定列与列宽](https://ui.duojumi.com/docs/#/table-fixed)
- [Table 虚拟滚动](https://ui.duojumi.com/docs/#/table-virtual)
- [Table 多级表头](https://ui.duojumi.com/docs/#/table-grouped)
- [Table 行拖拽排序](https://ui.duojumi.com/docs/#/table-row-drag)
- [EditableTable 行内编辑](https://ui.duojumi.com/docs/#/editable-table)
- [Pagination 分页](https://ui.duojumi.com/docs/#/pagination)
- [Tabs 选项卡](https://ui.duojumi.com/docs/#/tabs)
- [Tree 树形控件](https://ui.duojumi.com/docs/#/tree)
- [Descriptions 描述列表](https://ui.duojumi.com/docs/#/descriptions)
- [List 列表](https://ui.duojumi.com/docs/#/list)

### 反馈

- [Alert 提示条](https://ui.duojumi.com/docs/#/alert)
- [Spin 加载中](https://ui.duojumi.com/docs/#/spin)
- [Popconfirm 气泡确认](https://ui.duojumi.com/docs/#/popconfirm)
- [Tour 引导](https://ui.duojumi.com/docs/#/tour)
- [Message 消息提示](https://ui.duojumi.com/docs/#/message)
- [Modal 弹窗](https://ui.duojumi.com/docs/#/modal)
- [ConfirmDialog 确认框](https://ui.duojumi.com/docs/#/confirm-dialog)
- [Drawer 抽屉](https://ui.duojumi.com/docs/#/drawer)

### 浮层

- [Tooltip 文字提示](https://ui.duojumi.com/docs/#/tooltip)
- [Dropdown 下拉菜单](https://ui.duojumi.com/docs/#/dropdown)

### 其它组件

- [DatePicker 日期选择](https://ui.duojumi.com/docs/#/date-picker)
- [TreeSelect 树形选择](https://ui.duojumi.com/docs/#/tree-select)
- [RichEditor 富文本](https://ui.duojumi.com/docs/#/rich-editor)
- [FloatingWindow 浮动窗口](https://ui.duojumi.com/docs/#/floating-window)
- [ContextMenu 右键菜单](https://ui.duojumi.com/docs/#/context-menu)
- [FloatButton 悬浮按钮](https://ui.duojumi.com/docs/#/float-button)
- [CommandPalette 命令面板](https://ui.duojumi.com/docs/#/command-palette)
- [QRCode 二维码](https://ui.duojumi.com/docs/#/qrcode)

## 常见问题

### 支持 Vue 2 吗？

不支持。对等依赖是 vue ^3.4.0，只提供 Vue 3 版本。

### 必须用 Vite 或 Webpack 吗？

不必须。组件库是零构建 ESM，源码可直接被浏览器加载；也提供 UMD 产物，可用 script 标签通过 CDN 引入。

### 能用在商业项目里吗？

可以。MIT 许可，保留版权声明即可修改、分发与商用。

### 有 TypeScript 类型吗？

有。包内 types/index.d.ts 覆盖全部组件的属性、事件与插槽，按需引入的子路径同样带类型。

### 支持服务端渲染吗？

服务端只渲染结构，组件挂载后才访问 DOM；SSR 场景需在客户端调用 initTheme() 初始化主题。