# 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文件合并
- 更规范的全局样式文件命名