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