dedsi-vue-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +113 -0
- package/dedsi-vue-ui.es.d.ts +1596 -0
- package/dedsi-vue-ui.es.js +2816 -0
- package/dedsi-vue-ui.umd.js +21 -0
- package/package.json +30 -0
- package/style.css +2 -0
- package/vite.svg +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
# Dedsi Admin AI
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<img alt="Vue" src="https://img.shields.io/badge/Vue-3.5-4FC08D?style=flat-square&logo=vue.js" />
|
|
5
|
+
<img alt="TypeScript" src="https://img.shields.io/badge/TypeScript-5.9-3178C6?style=flat-square&logo=typescript" />
|
|
6
|
+
<img alt="Vite" src="https://img.shields.io/badge/Vite-6.0-646CFF?style=flat-square&logo=vite" />
|
|
7
|
+
<img alt="UnoCSS" src="https://img.shields.io/badge/UnoCSS-Preset-333333?style=flat-square&logo=unocss" />
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
**Dedsi Admin AI** 是一个现代化的后台管理系统解决方案，基于 **Vue 3** + **TypeScript** + **Vite** 构建。项目摒弃了传统的重量级 UI 框架依赖，采用 **UnoCSS** 结合自研的 **Dedsi UI** 组件库，提供了轻量、高性能且高度可定制的开发体验。
|
|
11
|
+
|
|
12
|
+
它内置了 AI 对话、工作流引擎、权限管理等复杂的业务模块（Mock数据），适合作为构建企业级 AI 应用或复杂中后台系统的基础框架。
|
|
13
|
+
|
|
14
|
+
## ✨ 核心特性
|
|
15
|
+
|
|
16
|
+
- **🚀 前沿技术栈**: 采用最新的 Vue 3.5, Vite 6, TypeScript 5.9 等前沿技术。
|
|
17
|
+
- **🎨 Dedsi UI 组件库**: 内置 30+ 纯原生、轻量级自定义组件（无需 ElementUI/AntDesign），包含表格、表单、弹窗、抽屉等核心交互组件。
|
|
18
|
+
- **🤖 AI 能力集成**: 预置 AI Chat 界面，支持流式对话交互体验。
|
|
19
|
+
- **⚡ 原子化 CSS**: 使用 **UnoCSS** 进行极速样式开发，减少 CSS 体积。
|
|
20
|
+
- **🔐 权限管理系统**: 完善的基于 RBAC（Role-Based Access Control）的用户、角色、权限管理体系。
|
|
21
|
+
- **🔄 工作流引擎**: 内置工作流配置与管理模块。
|
|
22
|
+
- **🛠️ 完善的工程化**: TypeScript 全量覆盖，模块化 API 服务 (`apiServices`)，Pinia 状态管理。
|
|
23
|
+
|
|
24
|
+
## 🛠️ 技术栈
|
|
25
|
+
|
|
26
|
+
| 领域 | 技术方案 | 说明 |
|
|
27
|
+
| --- | --- | --- |
|
|
28
|
+
| **核心框架** | Vue 3.5 | 组合式 API (Composition API) |
|
|
29
|
+
| **构建工具** | Vite | 极速冷启动与热更新 |
|
|
30
|
+
| **编程语言** | TypeScript | 强类型支持 |
|
|
31
|
+
| **样式引擎** | UnoCSS | 原子化 CSS 引擎 |
|
|
32
|
+
| **状态管理** | Pinia | 官方推荐的状态管理库 |
|
|
33
|
+
| **路由管理** | Vue Router 4 | 路由配置与守卫 |
|
|
34
|
+
| **网络请求** | Axios | 统一拦截器封装 |
|
|
35
|
+
| **图表库** | @antv/g2 | 可视化图表支持 |
|
|
36
|
+
| **图标库** | @ant-design/icons-vue | 高质量图标资源 |
|
|
37
|
+
|
|
38
|
+
## 📂 目录结构
|
|
39
|
+
|
|
40
|
+
```text
|
|
41
|
+
dedsi-admin-ai/
|
|
42
|
+
├── public/ # 静态资源
|
|
43
|
+
├── src/
|
|
44
|
+
│ ├── apiServices/ # API 服务模块（按业务领域划分）
|
|
45
|
+
│ │ ├── identitys/ # 身份认证相关 API
|
|
46
|
+
│ │ └── ...
|
|
47
|
+
│ ├── components/ # Dedsi UI 自定义组件库
|
|
48
|
+
│ │ ├── dedsi-button/
|
|
49
|
+
│ │ ├── dedsi-table/
|
|
50
|
+
│ │ ├── dedsi-form/
|
|
51
|
+
│ │ └── ...
|
|
52
|
+
│ ├── configs/ # 全局配置
|
|
53
|
+
│ ├── layouts/ # 布局组件 (BasicLayout)
|
|
54
|
+
│ ├── router/ # 路由配置
|
|
55
|
+
│ ├── stores/ # Pinia 状态仓库
|
|
56
|
+
│ ├── utils/ # 工具函数 (Axios 封装等)
|
|
57
|
+
│ ├── views/ # 页面视图
|
|
58
|
+
│ │ ├── ai-chat/ # AI 对话模块
|
|
59
|
+
│ │ ├── dashboard/ # 仪表盘
|
|
60
|
+
│ │ ├── workflow/ # 工作流模块
|
|
61
|
+
│ │ └── user/ # 用户管理
|
|
62
|
+
│ ├── App.vue # 根组件
|
|
63
|
+
│ ├── main.ts # 入口文件
|
|
64
|
+
│ └── style.css # 全局样式
|
|
65
|
+
├── uno.config.ts # UnoCSS 配置
|
|
66
|
+
├── vite.config.ts # Vite 配置
|
|
67
|
+
└── package.json # 项目依赖与脚本
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## 📦 组件库概览 (Dedsi UI)
|
|
71
|
+
|
|
72
|
+
项目内置了一套轻量级组件库，位于 `src/components`：
|
|
73
|
+
|
|
74
|
+
- **通用**: Button, Icon (AntD), Typography
|
|
75
|
+
- **布局**: Layout, Divider, Space, Row, Split
|
|
76
|
+
- **导航**: Menu, Breadcrumb, Dropdown, Tabs
|
|
77
|
+
- **数据录入**: Form, Input, Select, NumberConverter
|
|
78
|
+
- **数据展示**: Table, Card, List, Tree, Avatar, Badge, Tag, Image, QRCode, Statistic
|
|
79
|
+
- **反馈**: Alert, Modal, Drawer, Message, Popconfirm, Popover, Skeleton, Tooltip
|
|
80
|
+
|
|
81
|
+
## 🚀 快速开始
|
|
82
|
+
|
|
83
|
+
### 环境准备
|
|
84
|
+
|
|
85
|
+
确保你的本地环境已安装 [Node.js](https://nodejs.org/) (推荐 v18+) 和 [pnpm](https://pnpm.io/)。
|
|
86
|
+
|
|
87
|
+
### 安装依赖
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
pnpm install
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 启动开发环境
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
pnpm dev
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
访问 `http://localhost:5173` 即可预览项目。
|
|
100
|
+
|
|
101
|
+
### 构建生产环境
|
|
102
|
+
|
|
103
|
+
```bash
|
|
104
|
+
pnpm build
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
构建产物将输出到 `dist` 目录。
|
|
108
|
+
|
|
109
|
+
### 本地预览构建产物
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
pnpm preview
|
|
113
|
+
```
|