103 lines
4.0 KiB
Markdown
103 lines
4.0 KiB
Markdown
# KnowAI UI
|
||
|
||
## 概述
|
||
|
||
KnowAI UI 是一个基于 Vue 3 和 TypeScript 的企业级 UI 组件库，专为 AI 应用场景设计。它提供了一套美观、易用、可定制的组件，帮助开发者快速构建现代化的 AI 应用界面。采用 BEM规范 与风格-呈现两层模式组合的平衡架构，使 SCSS 足够规范与灵活。
|
||
|
||
## 模块分类
|
||
|
||
### 组件分类设计
|
||
|
||
- **基础层**：提供核心组件和基础功能，如按钮、图标、文本等
|
||
- **布局层**：提供页面布局相关组件，如容器、栅格、间距等
|
||
- **反馈层**：提供用户交互反馈相关组件，如消息、通知、加载等
|
||
|
||
### 样式系统架构
|
||
|
||
为了实现高度的可定制性和一致性，样式系统采用以下架构：
|
||
- 基于 SCSS 的变量系统，支持主题定制
|
||
- 模块化的样式文件组织，便于维护和扩展
|
||
- 统一的设计规范，确保组件视觉一致性
|
||
- 支持响应式设计和暗黑模式
|
||
|
||
## 核心模块
|
||
|
||
### 组件模块
|
||
|
||
组件模块提供丰富的 UI 组件，满足各种应用场景需求：
|
||
|
||
#### 基础组件
|
||
- **KButton** - 灵活的按钮组件，支持多种样式和状态
|
||
- **KIcon** - 丰富的图标系统，支持自定义和动态加载
|
||
- **KText** - 文本组件，支持多种格式和样式控制
|
||
- **KDivider** - 分割线组件，用于内容分隔
|
||
- **KAvatar** - 头像组件，支持多种图片源和样式
|
||
- **KTag** - 标签组件，用于内容分类和标记
|
||
- **KImage** - 图片组件，支持懒加载和错误处理
|
||
|
||
#### 布局组件
|
||
- **KContainer** - 布局容器，提供基础的页面布局结构
|
||
- **KGrid** - 栅格系统，支持响应式布局和灵活的列配置
|
||
- **KSpace** - 间距组件，提供统一的元素间距管理
|
||
|
||
#### 反馈组件
|
||
- **KChatBubble** - 聊天气泡组件，适用于对话界面
|
||
- **KMessage** - 全局提示组件，提供操作反馈
|
||
- **KNotification** - 通知提醒组件，用于系统通知
|
||
- **KLoading** - 加载中组件，提供加载状态指示
|
||
- **KResult** - 结果页组件，用于操作结果展示
|
||
- **KEmpty** - 空状态组件，用于空数据展示
|
||
|
||
#### 核心功能
|
||
- **主题系统**：支持明亮/暗黑主题切换和自定义主题
|
||
- **变量系统**：基于 SCSS 的变量管理，统一控制颜色、尺寸等
|
||
- **工具类**：提供常用的辅助样式类，如布局、文本、动画等
|
||
|
||
#### 架构特点
|
||
- 支持 CSS 变量，便于运行时主题切换
|
||
- 模块化的样式组织，按需加载
|
||
- 响应式设计，适配不同设备尺寸
|
||
- 统一的设计语言，确保组件间视觉一致性
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
knowai-ui/
|
||
├── src/ # 源代码目录
|
||
│ ├── components/ # 组件目录
|
||
│ ├── styles/ # 样式文件
|
||
│ └── index.ts # 主入口文件
|
||
├── test/ # 测试文件
|
||
├── .gitignore # Git 忽略配置
|
||
├── Dockerfile # Docker 构建配置
|
||
├── README.md # 项目说明文档
|
||
├── eslint.config.js # ESLint 配置
|
||
├── package.json # 项目配置
|
||
├── pnpm-lock.yaml # 依赖锁定文件
|
||
├── tsconfig.json # TypeScript 配置
|
||
├── tsconfig.node.json # Node 环境 TypeScript 配置
|
||
├── vite.config.ts # Vite 构建配置
|
||
└── vitest.config.ts # Vitest 测试配置
|
||
```
|
||
|
||
## 更新记录
|
||
|
||
### 2025-11-14
|
||
- 完成tsc eslint测试，因框架内部通信问题放弃Vitest测试（但保留测试文件），推送1.0.0镜像。
|
||
|
||
### 2025-11-16
|
||
- 更新SCSS导出，支持引用对应css类
|
||
- 修复SCSS类名不对应问题
|
||
- 修复SCSS类名无法导出问题
|
||
- 修复1.0.0未导出types的问题（没有用vue-tsc编译.d.ts文件）
|
||
- 修复打包产物被覆盖问题
|
||
- 支持tree-shaking，不暴露内部路径
|
||
|
||
### 2025-11-17
|
||
- 删除全部组件vue实现style部分的scoped属性
|
||
- 加入"vite-plugin-css-injected-by-js"插件，解决库模式下CSS文件独立打包无法注入的问题
|
||
- 在vite入口引入所有scss文件，打包入es.js编译结果入口
|
||
- JS仍保持tree-shaking优化，但css文件不再独立打包，而是与JS文件合并
|
||
- 更规范的全局样式文件命名
|
||
|