diff --git a/README.md b/README.md
index 9d5a2de..b6342b3 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ## 概述
 
-KnowAI UI 是一个基于 Vue 3 和 TypeScript 的企业级 UI 组件库，专为 AI 应用场景设计。它提供了一套美观、易用、可定制的组件，帮助开发者快速构建现代化的 AI 应用界面。
+KnowAI UI 是一个基于 Vue 3 和 TypeScript 的企业级 UI 组件库，专为 AI 应用场景设计。它提供了一套美观、易用、可定制的组件，帮助开发者快速构建现代化的 AI 应用界面。采用 BEM规范 与风格-呈现两层模式组合的平衡架构，使 SCSS 足够规范与灵活。
 
 ## 模块分类
 
@@ -27,26 +27,26 @@ KnowAI UI 是一个基于 Vue 3 和 TypeScript 的企业级 UI 组件库，专
 组件模块提供丰富的 UI 组件，满足各种应用场景需求：
 
 #### 基础组件
-- **Button** - 灵活的按钮组件，支持多种样式和状态
-- **Icon** - 丰富的图标系统，支持自定义和动态加载
-- **Text** - 文本组件，支持多种格式和样式控制
-- **Divider** - 分割线组件，用于内容分隔
-- **Avatar** - 头像组件，支持多种图片源和样式
-- **Tag** - 标签组件，用于内容分类和标记
-- **Image** - 图片组件，支持懒加载和错误处理
+- **KButton** - 灵活的按钮组件，支持多种样式和状态
+- **KIcon** - 丰富的图标系统，支持自定义和动态加载
+- **KText** - 文本组件，支持多种格式和样式控制
+- **KDivider** - 分割线组件，用于内容分隔
+- **KAvatar** - 头像组件，支持多种图片源和样式
+- **KTag** - 标签组件，用于内容分类和标记
+- **KImage** - 图片组件，支持懒加载和错误处理
 
 #### 布局组件
-- **Container** - 布局容器，提供基础的页面布局结构
-- **Grid** - 栅格系统，支持响应式布局和灵活的列配置
-- **Space** - 间距组件，提供统一的元素间距管理
+- **KContainer** - 布局容器，提供基础的页面布局结构
+- **KGrid** - 栅格系统，支持响应式布局和灵活的列配置
+- **KSpace** - 间距组件，提供统一的元素间距管理
 
 #### 反馈组件
-- **ChatBubble** - 聊天气泡组件，适用于对话界面
-- **Message** - 全局提示组件，提供操作反馈
-- **Notification** - 通知提醒组件，用于系统通知
-- **Loading** - 加载中组件，提供加载状态指示
-- **Result** - 结果页组件，用于操作结果展示
-- **Empty** - 空状态组件，用于空数据展示
+- **KChatBubble** - 聊天气泡组件，适用于对话界面
+- **KMessage** - 全局提示组件，提供操作反馈
+- **KNotification** - 通知提醒组件，用于系统通知
+- **KLoading** - 加载中组件，提供加载状态指示
+- **KResult** - 结果页组件，用于操作结果展示
+- **KEmpty** - 空状态组件，用于空数据展示
 
 #### 核心功能
 - **主题系统**：支持明亮/暗黑主题切换和自定义主题
@@ -98,5 +98,5 @@ knowai-ui/
 - 加入"vite-plugin-css-injected-by-js"插件，解决库模式下CSS文件独立打包无法注入的问题
 - 在vite入口引入所有scss文件，打包入es.js编译结果入口
 - JS仍保持tree-shaking优化，但css文件不再独立打包，而是与JS文件合并
-
+- 更规范的全局样式文件命名
 
diff --git a/eslint.config.js b/eslint.config.js
index 9614c1b..fd541ba 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,105 +1,155 @@
+// 导入ESLint核心JavaScript规则配置
 import js from '@eslint/js';
+
+// 导入TypeScript ESLint插件，提供TypeScript相关的检查规则
 import typescript from '@typescript-eslint/eslint-plugin';
+
+// 导入TypeScript ESLint解析器，用于解析TypeScript代码
 import typescriptParser from '@typescript-eslint/parser';
+
+// 导入Vue ESLint插件，提供Vue特定的检查规则
 import vueEslintPlugin from 'eslint-plugin-vue';
 
+// 导出ESLint配置数组（使用flat配置格式，ESLint v9+推荐）
 export default [
+  // 应用JavaScript默认推荐规则
   js.configs.recommended,
+  
+  // 应用Vue推荐规则（flat格式），使用扩展运算符展开数组
   ...vueEslintPlugin.configs['flat/recommended'],
+  
+  // 文件忽略配置块
   {
+    // ignores属性指定需要ESLint忽略检查的文件路径模式
     ignores: [
-      '**/*.test.ts',
-      '**/*.spec.ts',
-      'test/**',
-      'dist/**',
-      'node_modules/**',
-      'coverage/**',
-      '*.config.js',
-      '*.config.ts',
+      '**/*.test.ts',        // 忽略所有测试文件
+      '**/*.spec.ts',        // 忽略所有规格文件
+      'test/**',             // 忽略test目录下所有文件
+      'dist/**',             // 忽略构建输出目录
+      'node_modules/**',     // 忽略第三方依赖
+      'coverage/**',         // 忽略测试覆盖率报告目录
+      '*.config.js',         // 忽略配置文件
+      '*.config.ts',         // 忽略TypeScript配置文件
     ],
   },
-  // Vue文件规则
+  // Vue文件特定规则配置块
   {
+    // files属性指定此配置块适用的文件模式
     files: ['**/*.vue'],
+    
+    // languageOptions配置解析器和语言选项
     languageOptions: {
+      // 使用Vue ESLint插件提供的解析器来解析.vue文件
       parser: vueEslintPlugin.parser,
+      
+      // parserOptions配置解析器选项
       parserOptions: {
+        // 使用最新的ECMAScript版本
         ecmaVersion: 'latest',
+        
+        // 源代码类型为module（ES模块）
         sourceType: 'module',
+        
+        // 为Vue文件中的<script>块指定TypeScript解析器
         parser: typescriptParser,
+        
+        // 禁用projectService以避免与TypeScript编译器重复检查
         projectService: false, // 用tsc检查过了
-        extraFileExtensions: ['.vue'], // 添加.vue作为额外文件扩展名
+        
+        // 添加.vue作为额外的文件扩展名
+        extraFileExtensions: ['.vue'],
       },
     },
+    
+    // plugins指定在此配置块中启用的插件
     plugins: {
-      '@typescript-eslint': typescript,
-      vue: vueEslintPlugin,
+      '@typescript-eslint': typescript,  // 启用TypeScript ESLint插件
+      vue: vueEslintPlugin,              // 启用Vue ESLint插件
     },
+    
+    // rules配置具体的ESLint规则及其严重级别
     rules: {
       // Vue特定规则
-      'vue/multi-word-component-names': 'off',
-      'vue/no-v-model-argument': 'error',
-      'vue/script-setup-uses-vars': 'error',
+      'vue/multi-word-component-names': 'off',  // 关闭组件名称必须为多个单词的规则
+      'vue/no-v-model-argument': 'error',       // 禁止在v-model中使用参数，违反时报错
+      'vue/script-setup-uses-vars': 'error',    // 确保script-setup中声明的变量被使用，违反时报错
       
       // TypeScript规则
-      '@typescript-eslint/no-unused-vars': ['error', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^[A-Z_]+$'
+      '@typescript-eslint/no-unused-vars': ['error', {  // 未使用的变量报错
+        argsIgnorePattern: '^_',          // 忽略以下划线开头的参数
+        varsIgnorePattern: '^[A-Z_]+$'    // 忽略全大写或带下划线的常量
       }],
       
       // 通用规则
-      'no-unused-vars': 'off',
-      'no-console': 'warn',
-      'no-debugger': 'error',
-      'no-var': 'error',
-      'prefer-const': 'error',
+      'no-unused-vars': 'off',            // 关闭JavaScript原生未使用变量规则（使用TypeScript版本替代）
+      'no-console': 'warn',               // 禁止使用console，违反时警告
+      'no-debugger': 'error',             // 禁止使用debugger，违反时报错
+      'no-var': 'error',                  // 禁止使用var声明，违反时报错
+      'prefer-const': 'error',            // 优先使用const声明，违反时报错
       
       // 代码风格
-      'indent': ['error', 2, { SwitchCase: 1 }],
-      'quotes': ['error', 'single', { avoidEscape: true }],
-      'semi': ['error', 'always'],
-      'comma-dangle': ['error', 'never'],
-      'eol-last': ['warn', 'always'],
-      'no-trailing-spaces': 'warn',
+      'indent': ['error', 2, { SwitchCase: 1 }],  // 强制2空格缩进，switch case额外缩进1级
+      'quotes': ['error', 'single', { avoidEscape: true }], // 强制使用单引号，允许转义的例外情况
+      'semi': ['error', 'always'],        // 语句末尾必须有分号
+      'comma-dangle': ['error', 'never'], // 禁止行末逗号
+      'eol-last': ['warn', 'always'],     // 文件末尾必须有空行
+      'no-trailing-spaces': 'warn',       // 禁止行尾空格
     },
   },
-  // TypeScript文件规则（排除测试文件）
+  // TypeScript文件特定规则配置块（排除测试文件）
   {
+    // files属性指定此配置块适用的文件模式
     files: ['**/*.ts', '**/*.tsx'],
+    
+    // ignores在此配置块中进一步排除特定文件
     ignores: ['**/*.test.ts', '**/*.spec.ts', 'test/**/*.ts'],
+    
+    // languageOptions配置解析器和语言选项
     languageOptions: {
+      // 使用TypeScript解析器
       parser: typescriptParser,
+      
+      // parserOptions配置解析器选项
       parserOptions: {
+        // 使用最新的ECMAScript版本
         ecmaVersion: 'latest',
+        
+        // 源代码类型为module（ES模块）
         sourceType: 'module',
-        projectService: false, // 禁用projectService以提高性能
+        
+        // 禁用projectService以提高性能
+        projectService: false, // vue-tsc来检查类型安全
       },
     },
+    
+    // plugins指定在此配置块中启用的插件
     plugins: {
-      '@typescript-eslint': typescript,
+      '@typescript-eslint': typescript,  // 启用TypeScript ESLint插件
     },
+    
+    // rules配置具体的ESLint规则及其严重级别
     rules: {
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['error', {
-        argsIgnorePattern: '^_',
-        varsIgnorePattern: '^[A-Z_]+$'
+      'no-unused-vars': 'off',            // 关闭JavaScript原生未使用变量规则（使用TypeScript版本替代）
+      '@typescript-eslint/no-unused-vars': ['error', {  // 未使用的变量报错
+        argsIgnorePattern: '^_',          // 忽略以下划线开头的参数（函数参数）
+        varsIgnorePattern: '^[A-Z_]+$'    // 忽略全大写或带下划线的常量
       }],
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-non-null-assertion': 'warn',
+      '@typescript-eslint/no-explicit-any': 'warn',  // 禁止使用any类型，违反时警告
+      '@typescript-eslint/no-non-null-assertion': 'warn', // 禁止使用非空断言（!），违反时警告
       
       // 通用规则
-      'no-console': 'warn',
-      'no-debugger': 'error',
-      'no-var': 'error',
-      'prefer-const': 'error',
+      'no-console': 'warn',               // 禁止使用console，违反时警告
+      'no-debugger': 'error',             // 禁止使用debugger，违反时报错
+      'no-var': 'error',                  // 禁止使用var声明，违反时报错
+      'prefer-const': 'error',            // 优先使用const声明，违反时报错
       
       // 代码风格
-      'indent': ['error', 2, { SwitchCase: 1 }],
-      'quotes': ['error', 'single', { avoidEscape: true }],
-      'semi': ['error', 'always'],
-      'comma-dangle': ['error', 'never'],
-      'eol-last': ['warn', 'always'],
-      'no-trailing-spaces': 'warn',
+      'indent': ['error', 2, { SwitchCase: 1 }],  // 强制2空格缩进，switch case额外缩进1级
+      'quotes': ['error', 'single', { avoidEscape: true }], // 强制使用单引号，允许转义的例外情况
+      'semi': ['error', 'always'],        // 语句末尾必须有分号
+      'comma-dangle': ['error', 'never'], // 禁止行末逗号
+      'eol-last': ['warn', 'always'],     // 文件末尾必须有空行
+      'no-trailing-spaces': 'warn',       // 禁止行尾空格
     },
   },
-];
\ No newline at end of file
+]; // ESLint配置数组结束
\ No newline at end of file
diff --git a/src/components/Avatar/README.md b/src/components/Avatar/README.md
index d4de6dc..f3af96b 100644
--- a/src/components/Avatar/README.md
+++ b/src/components/Avatar/README.md
@@ -26,27 +26,27 @@ Avatar组件用于显示用户头像，支持图片、文字和图标三种显
 
 Avatar组件没有提供事件。
 
-## 使用示例
+## 项目内使用示例
 
 ```vue
 <template>
   <!-- 基础用法 -->
-  <Avatar src="/path/to/avatar.jpg" alt="用户头像" />
+  <KAvatar src="/path/to/avatar.jpg" alt="用户头像" />
   
   <!-- 不同尺寸 -->
-  <Avatar size="small" src="/path/to/avatar.jpg" />
-  <Avatar size="medium" src="/path/to/avatar.jpg" />
-  <Avatar size="large" src="/path/to/avatar.jpg" />
+  <KAvatar size="small" src="/path/to/avatar.jpg" />
+  <KAvatar size="medium" src="/path/to/avatar.jpg" />
+  <KAvatar size="large" src="/path/to/avatar.jpg" />
   
   <!-- 不同形状 -->
-  <Avatar shape="circle" src="/path/to/avatar.jpg" />
-  <Avatar shape="square" src="/path/to/avatar.jpg" />
-  
+  <KAvatar shape="circle" src="/path/to/avatar.jpg" />
+  <KAvatar shape="square" src="/path/to/avatar.jpg" />
+    
   <!-- 文字头像 -->
-  <Avatar text="张三" />
+  <KAvatar text="张三" />
   
   <!-- 自定义样式 -->
-  <Avatar 
+  <KAvatar 
     text="张三" 
     bgColor="#1890ff" 
     textColor="#ffffff" 
@@ -54,6 +54,6 @@ Avatar组件没有提供事件。
 </template>
 
 <script setup>
-import { Avatar } from '@/components';
+import { KAvatar } from 'knowai-ui';
 </script>
 ```
\ No newline at end of file
diff --git a/src/components/Avatar/index.scss b/src/components/Avatar/index.scss
index 45d09e3..72755c8 100644
--- a/src/components/Avatar/index.scss
+++ b/src/components/Avatar/index.scss
@@ -2,7 +2,9 @@
 @use "@/styles/index.scss" as *;
 
 .k-avatar {
+  // 相对原位置偏移
   position: relative;
+  // 内联元素、不独占一行
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -10,6 +12,7 @@
   background-color: #f0f2f5;
   color: #333;
   font-size: 14px;
+  // 禁止选中（enum: auto | text | all）
   user-select: none;
 
   &--small {
@@ -41,11 +44,12 @@
   &__img {
     width: 100%;
     height: 100%;
-    // 图片裁剪填充
+    // 图片裁剪填充 (enum: cover | contain | fill（默认） | none | scale-down)
     object-fit: cover;
   }
 
   &__text {
+    // 文本转换（enum: uppercase | lowercase | capitalize）
     text-transform: uppercase;
   }
 
diff --git a/src/components/Avatar/index.vue b/src/components/Avatar/index.vue
index 7e9bef1..2adf3db 100644
--- a/src/components/Avatar/index.vue
+++ b/src/components/Avatar/index.vue
@@ -16,6 +16,7 @@
       v-else-if="text"
       class="k-avatar__text"
     >{{ text.toUpperCase() }}</span>
+    <!-- 纯逻辑容器 -->
     <template v-else>
       <slot name="icon">
         <k-icon
@@ -77,7 +78,6 @@ export default defineComponent({
   setup(props: AvatarProps) {
     const isError = ref(false);
 
-    // 缓存与性能优化
     const avatarClass = computed(() => {
       return [
         `k-avatar--${props.size}`,
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 3663460..554cc9d 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -1,26 +1,71 @@
-# KButton
+# Button 按钮组件
 
-`KButton` 组件是一个可定制的按钮组件，支持多种类型、尺寸、状态和样式。
+Button组件是一个可定制的按钮组件，支持多种类型、尺寸、状态和样式，适用于各种交互场景。
 
-## 使用示例
+## 参数接口 (Props)
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| type | 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'default' | 'default' | 按钮类型 |
+| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮尺寸 |
+| disabled | boolean | false | 是否禁用按钮 |
+| loading | boolean | false | 是否显示加载状态 |
+| round | boolean | false | 是否为圆角按钮 |
+| circle | boolean | false | 是否为圆形按钮（通常与 icon 属性一起使用） |
+| plain | boolean | false | 是否为朴素按钮 |
+| text | boolean | false | 是否为文本按钮 |
+| link | boolean | false | 是否为链接按钮 |
+| icon | string | '' | 按钮图标类名 |
+| autofocus | boolean | false | 是否自动获取焦点 |
+| nativeType | 'button' \| 'submit' \| 'reset' | 'button' | 按钮的原生 type 属性 |
+
+## 插槽 (Slots)
+
+| 插槽名 | 说明 |
+|--------|------|
+| default | 按钮的默认内容 |
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| click | MouseEvent | 按钮点击事件 |
+
+## 项目内使用示例
 
 ```vue
 <template>
-  <div>
-    <KButton type="primary">Primary Button</KButton>
-    <KButton type="success" size="large">Success Large</KButton>
-    <KButton type="warning" disabled>Warning Disabled</KButton>
-    <KButton type="danger" loading>Danger Loading</KButton>
-    <KButton plain>Plain Button</KButton>
-    <KButton round>Round Button</KButton>
-    <KButton circle icon="k-icon-search"></KButton>
-    <KButton text>Text Button</KButton>
-    <KButton link>Link Button</KButton>
-  </div>
+  <!-- 基础用法 -->
+  <KButton>默认按钮</KButton>
+  <KButton type="primary">主要按钮</KButton>
+  
+  <!-- 不同类型 -->
+  <KButton type="success">成功按钮</KButton>
+  <KButton type="warning">警告按钮</KButton>
+  <KButton type="danger">危险按钮</KButton>
+  <KButton type="info">信息按钮</KButton>
+  
+  <!-- 不同尺寸 -->
+  <KButton size="small">小型按钮</KButton>
+  <KButton size="medium">中型按钮</KButton>
+  <KButton size="large">大型按钮</KButton>
+  
+  <!-- 特殊状态 -->
+  <KButton disabled>禁用按钮</KButton>
+  <KButton loading>加载中按钮</KButton>
+  <KButton plain>朴素按钮</KButton>
+  
+  <!-- 形状 -->
+  <KButton round>圆角按钮</KButton>
+  <KButton circle icon="k-icon-search"></KButton>
+  
+  <!-- 文本和链接按钮 -->
+  <KButton text>文本按钮</KButton>
+  <KButton link>链接按钮</KButton>
 </template>
 
-<script setup lang="ts">
-import KButton from './index.vue';
+<script setup>
+import { KButton } from 'knowai-ui';
 </script>
 ```
 
diff --git a/src/components/Button/index.scss b/src/components/Button/index.scss
index 4e46328..44fce05 100644
--- a/src/components/Button/index.scss
+++ b/src/components/Button/index.scss
@@ -4,23 +4,32 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  // 字体大小的一倍
   line-height: 1;
+  // 文本不换行
   white-space: nowrap;
+  // 悬停显示手型
   cursor: pointer;
   background-color: #ffffff;
   border: 1px solid #dcdfe6;
   color: #606266;
+  // 水平居中
   text-align: center;
+  // 和全局基础样式重复了，宽度和高度包含padding和border（方便计算）
   box-sizing: border-box;
+  // 去掉外部轮廓线
   outline: none;
   transition: 0.1s;
+  // 100~900
   font-weight: 500;
   user-select: none;
+  // 垂直居中，只有行内元素能用
   vertical-align: middle;
   padding: 8px 15px;
   font-size: 14px;
   border-radius: 4px;
 
+  // 鼠标操作和键盘操作
   &:hover,
   &:focus {
     color: #409eff;
@@ -28,6 +37,7 @@
     background-color: #ecf5ff;
   }
 
+  // 被按下瞬间
   &:active {
     color: #3a8ee6;
     border-color: #3a8ee6;
@@ -161,6 +171,7 @@
     }
   }
 
+  // 链接样式，所以用--
   &--link {
     border-color: transparent;
     background: transparent;
@@ -268,6 +279,7 @@
     }
   }
 
+  // 自定义，导出可使用
   &--text.is-disabled,
   &--link.is-disabled,
   &.is-disabled,
diff --git a/src/components/Button/index.vue b/src/components/Button/index.vue
index ed03f24..91c043b 100644
--- a/src/components/Button/index.vue
+++ b/src/components/Button/index.vue
@@ -19,10 +19,12 @@
     :type="nativeType"
     @click="handleClick"
   >
+    <!-- 行内显示图标 -->
     <span
       v-if="loading"
       class="k-button__loading"
     >
+      <!-- 这个图标没引入，而且不是这么用的 -->
       <i class="k-icon-loading" />
     </span>
     <i
diff --git a/src/components/ChatBubble/README.md b/src/components/ChatBubble/README.md
index 2ac1528..4857fa4 100644
--- a/src/components/ChatBubble/README.md
+++ b/src/components/ChatBubble/README.md
@@ -1,8 +1,33 @@
-# KChatBubble
+# ChatBubble 聊天气泡组件
 
-`KChatBubble` 组件用于显示聊天气泡，支持多种消息类型（文本、图片、文件、语音、系统消息）以及消息状态和发送者信息。
+ChatBubble组件用于显示聊天气泡，支持多种消息类型（文本、图片、文件、语音、系统消息）以及消息状态和发送者信息，适用于聊天应用场景。
 
-## 使用示例
+## 参数接口 (Props)
+
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| message | ChatBubbleMessage | - | 消息对象，必填 |
+| isSelf | boolean | false | 是否为当前用户的消息 |
+| showAvatar | boolean | true | 是否显示头像 |
+| avatarSize | 'small' \| 'middle' \| 'large' | 'middle' | 头像大小 |
+| showSenderName | boolean | true | 是否显示发送者名称 |
+| bubbleStyle | 'default' \| 'rounded' \| 'sharp' | 'default' | 气泡样式 |
+
+## 插槽 (Slots)
+
+ChatBubble组件没有提供插槽。
+
+## 事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| bubbleClick | (message: ChatBubbleMessage) | 气泡点击事件 |
+| imageClick | (message: ChatBubbleMessage) | 图片点击事件 |
+| downloadClick | (message: ChatBubbleMessage) | 文件下载点击事件 |
+| voicePlay | (message: ChatBubbleMessage, isPlaying: boolean) | 语音播放/暂停事件 |
+| retry | (message: ChatBubbleMessage) | 消息重试点击事件 |
+
+## 项目内使用示例
 
 ```vue
 <template>
@@ -51,10 +76,10 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
-import KChatBubble from './index.vue';
-import { ChatBubbleMessage } from './types';
+import { KChatBubble } from 'knowai-ui';
+import { ChatBubbleMessage } from 'knowai-ui/src/components/ChatBubble/types';
 
 // 文本消息示例
 const textMessage = ref<ChatBubbleMessage>({
@@ -149,145 +174,24 @@ const failedMessage = ref<ChatBubbleMessage>({
   status: 'failed'
 });
 
-// 事件处理
-const handleBubbleClick = (message: ChatBubbleMessage) => {
+// 事件处理函数
+const handleBubbleClick = (message) => {
   console.log('气泡点击', message);
 };
 
-const handleImageClick = (message: ChatBubbleMessage) => {
+const handleImageClick = (message) => {
   console.log('图片点击', message);
 };
 
-const handleDownloadClick = (message: ChatBubbleMessage) => {
+const handleDownloadClick = (message) => {
   console.log('下载点击', message);
 };
 
-const handleVoicePlay = (message: ChatBubbleMessage, isPlaying: boolean) => {
+const handleVoicePlay = (message, isPlaying) => {
   console.log('语音播放', message, isPlaying);
 };
 
-const handleRetry = (message: ChatBubbleMessage) => {
+const handleRetry = (message) => {
   console.log('重试点击', message);
-  // 实现重试逻辑
 };
-</script>
-
-## Props
-
-| 属性名 | 类型 | 默认值 | 描述 |
-| ----- | ---- | ----- | ---- |
-| `message` | `ChatBubbleMessage` | - | 消息对象，必填 |
-| `isSelf` | `boolean` | `false` | 是否为当前用户的消息 |
-| `showAvatar` | `boolean` | `true` | 是否显示头像 |
-| `avatarSize` | `'small' \| 'middle' \| 'large'` | `'middle'` | 头像大小 |
-| `showSenderName` | `boolean` | `true` | 是否显示发送者名称 |
-| `bubbleStyle` | `'default' \| 'rounded' \| 'sharp'` | `'default'` | 气泡样式 |
-
-## Events
-
-| 事件名 | 参数 | 描述 |
-| ----- | ---- | ---- |
-| `bubbleClick` | `(message: ChatBubbleMessage)` | 气泡点击事件 |
-| `imageClick` | `(message: ChatBubbleMessage)` | 图片点击事件 |
-| `downloadClick` | `(message: ChatBubbleMessage)` | 文件下载点击事件 |
-| `voicePlay` | `(message: ChatBubbleMessage, isPlaying: boolean)` | 语音播放/暂停事件 |
-| `retry` | `(message: ChatBubbleMessage)` | 消息重试点击事件 |
-
-## 消息类型
-
-`ChatBubbleMessage` 接口支持以下消息类型：
-
-### 文本消息
-```ts
-{
-  id: string;
-  type: 'text';
-  content: string;
-  sender: { id: string; name: string; avatar?: string; isOnline?: boolean };
-  timestamp: number;
-  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-}
-```
-
-### 图片消息
-```ts
-{
-  id: string;
-  type: 'image';
-  content: { url: string; alt?: string };
-  sender: { id: string; name: string; avatar?: string; isOnline?: boolean };
-  timestamp: number;
-  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-}
-```
-
-### 文件消息
-```ts
-{
-  id: string;
-  type: 'file';
-  content: { name: string; size: number; type: string };
-  sender: { id: string; name: string; avatar?: string; isOnline?: boolean };
-  timestamp: number;
-  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-}
-```
-
-### 语音消息
-```ts
-{
-  id: string;
-  type: 'voice';
-  content: { duration: number; waveform?: number[] };
-  sender: { id: string; name: string; avatar?: string; isOnline?: boolean };
-  timestamp: number;
-  status?: 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
-}
-```
-
-### 系统消息
-```ts
-{
-  id: string;
-  type: 'system';
-  content: string;
-  sender: { id: string; name: string };
-  timestamp: number;
-}
-```
-
-## 消息状态
-
-消息状态包括以下几种：
-- `sending`: 发送中
-- `sent`: 已发送
-- `delivered`: 已送达
-- `read`: 已读
-- `failed`: 发送失败
-
-## 样式定制
-
-可以通过覆盖以下CSS变量来自定义组件样式：
-
-```css
-.k-chat-bubble {
-  /* 自定义聊天气泡样式 */
-}
-
-.k-chat-bubble--own {
-  /* 自定义自己的聊天气泡样式 */
-}
-
-.k-chat-bubble--other {
-  /* 自定义他人的聊天气泡样式 */
-}
-
-.k-chat-bubble--style-rounded {
-  /* 自定义圆角聊天气泡样式 */
-}
-
-.k-chat-bubble--style-sharp {
-  /* 自定义锐角聊天气泡样式 */
-}
-}
-```
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/ChatBubble/index.scss b/src/components/ChatBubble/index.scss
index 9eec21c..af1cae2 100644
--- a/src/components/ChatBubble/index.scss
+++ b/src/components/ChatBubble/index.scss
@@ -4,6 +4,7 @@
 .k-chat-bubble {
   display: flex;
   margin-bottom: $spacing-4;
+  // 相对父容器宽度
   max-width: 80%;
 
   // 自己的消息
@@ -24,6 +25,7 @@
 
   // 头像
   &__avatar {
+    // 不会被压缩，而是溢出或滚动
     flex-shrink: 0;
     margin: 0 $spacing-3;
   }
@@ -32,7 +34,9 @@
   &__content {
     display: flex;
     flex-direction: column;
+    // 可以收缩到0
     min-width: 0;
+    // 自动占据剩余空间
     flex: 1;
   }
 
@@ -49,6 +53,7 @@
     position: relative;
     padding: $spacing-3 $spacing-4;
     border-radius: $rounded-lg;
+    // 允许换行
     word-wrap: break-word;
     max-width: 100%;
 
@@ -56,13 +61,18 @@
     &--own {
       background-color: $primary-color;
       color: $white;
+      // 设置右上角圆角
       border-top-right-radius: $rounded-sm;
 
       &::after {
+        // 生成伪元素
         content: '';
+        // 不占空间
         position: absolute;
+        // 放在右上
         top: 10px;
         right: -6px;
+        // 画三角形
         width: 0;
         height: 0;
         border-style: solid;
@@ -102,6 +112,7 @@
       border-radius: $rounded-md;
       overflow: hidden;
 
+      // 去掉小箭头
       .k-chat-bubble__bubble--own::after,
       .k-chat-bubble__bubble--other::after {
         display: none;
@@ -136,6 +147,7 @@
 
   // 文本消息
   &__text {
+    // 保留空格和换行，允许自动换行
     white-space: pre-wrap;
   }
 
diff --git a/src/components/ChatBubble/index.vue b/src/components/ChatBubble/index.vue
index 8ee8f8a..8830615 100644
--- a/src/components/ChatBubble/index.vue
+++ b/src/components/ChatBubble/index.vue
@@ -8,12 +8,14 @@
       v-if="showAvatar"
       class="k-chat-bubble__avatar"
     >
+      <!-- 没有badge这个元素 -->
       <k-avatar
         :src="message.sender.avatar"
         :alt="message.sender.name"
         :size="avatarSize"
         :badge="message.sender.isOnline ? 'online' : null"
       >
+        <!-- 具名插槽 -->
         <template
           v-if="!message.sender.avatar"
           #icon
@@ -84,6 +86,7 @@
 </template>
 
 <script lang="ts">
+// 组件引入了吗？？？KAvatar没引入就用了。。。。
 import { computed, defineComponent } from 'vue';
 import { ChatBubbleProps, ChatBubbleMessage, ChatBubbleEmits } from './types';
 
diff --git a/src/components/Container/README.md b/src/components/Container/README.md
index 413765b..5cf1036 100644
--- a/src/components/Container/README.md
+++ b/src/components/Container/README.md
@@ -25,51 +25,51 @@ Container组件是一个布局容器组件，用于控制内容区域的宽度
 
 Container组件没有提供事件。
 
-## 使用示例
+## 项目内使用示例
 
 ```vue
 <template>
   <!-- 基础用法 -->
-  <Container>
+  <KContainer>
     <p>容器内容</p>
-  </Container>
+  </KContainer>
   
   <!-- 流体布局 -->
-  <Container fluid>
+  <KContainer fluid>
     <p>占据整行的流体容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 自定义最大宽度 -->
-  <Container maxWidth="1200">
+  <KContainer maxWidth="1200">
     <p>最大宽度为1200px的容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 自定义内外边距 -->
-  <Container padding="20" margin="10">
+  <KContainer padding="20" margin="10">
     <p>有内外边距的容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 数组形式的边距设置 -->
-  <Container padding="[20, 10, 20, 10]" margin="[10, 20]">
+  <KContainer padding="[20, 10, 20, 10]" margin="[10, 20]">
     <p>使用数组设置边距的容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 自定义背景和圆角 -->
-  <Container bgColor="#f5f5f5" borderRadius="8">
+  <KContainer bgColor="#f5f5f5" borderRadius="8">
     <p>有背景色和圆角的容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 阴影效果 -->
-  <Container shadow="always">
+  <KContainer shadow="always">
     <p>始终显示阴影的容器</p>
-  </Container>
+  </KContainer>
   
-  <Container shadow="hover">
+  <KContainer shadow="hover">
     <p>鼠标悬停时显示阴影的容器</p>
-  </Container>
+  </KContainer>
   
   <!-- 复合配置 -->
-  <Container 
+  <KContainer 
     maxWidth="800" 
     padding="24" 
     bgColor="#fff" 
@@ -77,5 +77,9 @@ Container组件没有提供事件。
     shadow="always"
   >
     <p>完整配置的容器示例</p>
-  </Container>
-</template>
\ No newline at end of file
+  </KContainer>
+</template>
+
+<script setup>
+import { KContainer } from 'knowai-ui';
+</script>
\ No newline at end of file
diff --git a/src/components/Container/index.scss b/src/components/Container/index.scss
index b857e8a..e0357d1 100644
--- a/src/components/Container/index.scss
+++ b/src/components/Container/index.scss
@@ -6,7 +6,7 @@
   width: 100%;
   box-sizing: border-box;
 
-  // 流体布局
+  // 流体布局（无限扩展宽度）
   &--fluid {
     max-width: none !important;
   }
diff --git a/src/components/Divider/README.md b/src/components/Divider/README.md
index ae2d592..c9a0674 100644
--- a/src/components/Divider/README.md
+++ b/src/components/Divider/README.md
@@ -1,99 +1,30 @@
 # Divider 分割线
 
-用于分隔内容区域的分割线组件。
+Divider组件用于分隔内容区域，提供水平和垂直两种方向，支持自定义样式、颜色和文本位置等属性。
 
-## 基本用法
+## 参数接口 (Props)
 
-### 水平分割线
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| direction | string | horizontal | 分割线方向，可选值：horizontal, vertical |
+| contentPosition | string | center | 文本位置，可选值：left, center, right |
+| dashed | boolean | false | 是否为虚线 |
+| borderStyle | string | - | 边框样式，支持CSS边框样式值 |
+| color | string | - | 边框颜色 |
+| margin | string \| number | - | 外边距 |
+| size | string | medium | 分割线尺寸，可选值：small, medium, large |
 
-最基础的水平分割线。
-
-```vue
-<KDivider />
-```
-
-### 带文本的分割线
-
-可以在分割线中间显示文本内容。
-
-```vue
-<KDivider contentPosition="center">分割线标题</KDivider>
-<KDivider contentPosition="left">左侧标题</KDivider>
-<KDivider contentPosition="right">右侧标题</KDivider>
-```
-
-### 虚线分割线
-
-通过设置 `dashed` 属性可以创建虚线分割线。
-
-```vue
-<KDivider dashed>虚线分割线</KDivider>
-```
-
-### 垂直分割线
-
-设置 `direction` 属性为 `vertical` 可以创建垂直分割线。
-
-```vue
-<div class="divider-vertical-wrapper">
-  <span>内容 1</span>
-  <KDivider direction="vertical" />
-  <span>内容 2</span>
-  <KDivider direction="vertical" dashed />
-  <span>内容 3</span>
-</div>
-```
-
-### 自定义样式
-
-可以自定义分割线的颜色、边框样式和边距。
-
-```vue
-<KDivider color="#f00" borderStyle="dotted">红色点状分割线</KDivider>
-<KDivider margin="20px 0">带外边距的分割线</KDivider>
-```
-
-### 不同尺寸
-
-通过 `size` 属性可以设置分割线的尺寸。
-
-```vue
-<KDivider size="small">小号分割线</KDivider>
-<KDivider size="medium">中号分割线</KDivider>
-<KDivider size="large">大号分割线</KDivider>
-```
-
-## API
-
-### Props
-
-| 属性名 | 类型 | 说明 | 默认值 | 可选值 |
-|-------|-----|------|-------|-------|
-| direction | string | 分割线方向 | horizontal | horizontal, vertical |
-| contentPosition | string | 文本位置 | center | left, center, right |
-| dashed | boolean | 是否为虚线 | false | true, false |
-| borderStyle | string | 边框样式 | - | solid, dashed, dotted 等 CSS 边框样式值 |
-| color | string | 边框颜色 | - | 任意 CSS 颜色值 |
-| margin | string \| number | 外边距 | - | CSS margin 值或数字 |
-| size | string | 分割线尺寸 | medium | small, medium, large |
-
-### Slots
+## 插槽 (Slots)
 
 | 插槽名 | 说明 |
-|-------|-----|
+|--------|------|
 | default | 分割线中显示的文本内容 |
 
-## 类型定义
+## 事件 (Events)
 
-组件导出以下类型定义，可以在 TypeScript 项目中使用：
+Divider组件没有提供事件。
 
-```typescript
-import { DividerProps, DividerDirection, DividerContentPosition, DividerSize } from '@/components/Divider';
-```
-
-## 示例代码
-
-以下是一个更复杂的使用示例：
+## 项目内使用示例
 
 ```vue
 <template>
@@ -138,6 +69,10 @@ import { DividerProps, DividerDirection, DividerContentPosition, DividerSize } f
   </div>
 </template>
 
+<script setup>
+import { KDivider } from 'knowai-ui';
+</script>
+
 <style scoped>
 .divider-demo {
   padding: 20px;
@@ -149,5 +84,4 @@ import { DividerProps, DividerDirection, DividerContentPosition, DividerSize } f
   gap: 16px;
   margin: 10px 0;
 }
-</style>
-```
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/Divider/index.scss b/src/components/Divider/index.scss
index 6b58501..b2eb566 100644
--- a/src/components/Divider/index.scss
+++ b/src/components/Divider/index.scss
@@ -6,6 +6,7 @@
   width: 100%;
   margin: 16px 0;
   border-top: 1px solid #e4e7ed;
+  // 又重复了
   box-sizing: border-box;
 
   // 方向样式
@@ -47,12 +48,14 @@
 
   // 文本样式
   &__text {
+    // 文字和线掺杂在一起
     position: absolute;
     background-color: #fff;
     padding: 0 16px;
     color: #303133;
     font-size: 14px;
     font-weight: 500;
+    // 垂直居中（和top一起使用）
     transform: translateY(-50%);
     top: 50%;
 
diff --git a/src/components/Divider/index.vue b/src/components/Divider/index.vue
index e4f0250..f8b9310 100644
--- a/src/components/Divider/index.vue
+++ b/src/components/Divider/index.vue
@@ -4,6 +4,8 @@
     :class="dividerClass"
     :style="dividerStyle"
   >
+    <!-- slots.default用于判断是否存在插槽内容 -->
+    <!-- 这里支持水平分割线，不然不能用span -->
     <span
       v-if="$slots.default"
       class="k-divider__text"
diff --git a/src/components/Empty/README.md b/src/components/Empty/README.md
index b097c7a..8e0e985 100644
--- a/src/components/Empty/README.md
+++ b/src/components/Empty/README.md
@@ -1,102 +1,29 @@
 # Empty 空状态
 
-用于空状态显示，如暂无数据、暂无内容等场景。
+Empty组件用于在数据为空时显示提示信息，适用于列表为空、搜索无结果等场景，支持自定义图标、文本和操作按钮。
 
-## 基本用法
+## 参数接口 (Props)
 
-### 默认空状态
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| image | string | 'empty' | 图标名称 |
+| description | string | '暂无数据' | 描述文本 |
+| size | string | 'medium' | 空状态尺寸，可选值：'small', 'medium', 'large' |
+| imageSize | number \| string | - | 图标尺寸 |
 
-显示默认的空状态，包含默认图标和默认文本。
-
-```vue
-<KEmpty />
-```
-
-### 自定义描述
-
-可以自定义空状态的描述文本。
-
-```vue
-<KEmpty description="暂无相关数据" />
-```
-
-### 自定义图标
-
-通过设置 `image` 属性可以自定义空状态的图标。
-
-```vue
-<KEmpty image="search" description="没有找到相关内容" />
-```
-
-### 不同尺寸
-
-通过 `size` 属性可以设置空状态的尺寸。
-
-```vue
-<KEmpty size="small" description="小型空状态" />
-<KEmpty size="medium" description="中型空状态" />
-<KEmpty size="large" description="大型空状态" />
-```
-
-### 底部操作区
-
-可以通过默认插槽添加底部操作区域。
-
-```vue
-<KEmpty description="暂无数据">
-  <KButton type="primary">添加数据</KButton>
-</KEmpty>
-```
-
-### 完全自定义内容
-
-可以通过命名插槽完全自定义空状态的各个部分。
-
-```vue
-<KEmpty>
-  <template #image>
-    <img src="/custom-image.png" alt="空状态" class="custom-image" />
-  </template>
-  <template #description>
-    <div class="custom-description">这里什么都没有</div>
-  </template>
-  <div class="custom-actions">
-    <KButton>返回</KButton>
-    <KButton type="primary">刷新</KButton>
-  </div>
-</KEmpty>
-```
-
-## API
-
-### Props
-
-| 属性名 | 类型 | 说明 | 默认值 | 可选值 |
-|-------|-----|------|-------|-------|
-| image | string | 图标名称 | 'empty' | 任意有效的图标名称 |
-| description | string | 描述文本 | '暂无数据' | - |
-| size | string | 空状态尺寸 | 'medium' | 'small', 'medium', 'large' |
-| imageSize | number \| string | 图标尺寸（可选） | - | CSS 尺寸值或数字 |
-
-### Slots
+## 插槽 (Slots)
 
 | 插槽名 | 说明 |
-|-------|-----|
+|--------|------|
 | default | 底部内容区域，通常用于放置操作按钮 |
 | image | 自定义图像/图标区域 |
 | description | 自定义描述文本区域 |
 
-## 类型定义
+## 事件 (Events)
 
-组件导出以下类型定义，可以在 TypeScript 项目中使用：
+Empty组件没有提供事件。
 
-```typescript
-import { EmptyProps } from '@/components/Empty';
-```
-
-## 示例代码
-
-以下是一个更复杂的使用示例：
+## 项目内使用示例
 
 ```vue
 <template>
@@ -165,6 +92,10 @@ import { EmptyProps } from '@/components/Empty';
   </div>
 </template>
 
+<script setup>
+import { KEmpty, KButton } from 'knowai-ui';
+</script>
+
 <style scoped>
 .empty-demo {
   padding: 20px;
@@ -202,5 +133,4 @@ import { EmptyProps } from '@/components/Empty';
   color: #8c8c8c;
   margin-top: 8px;
 }
-</style>
-```
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/Empty/index.vue b/src/components/Empty/index.vue
index a977700..6f00b01 100644
--- a/src/components/Empty/index.vue
+++ b/src/components/Empty/index.vue
@@ -6,6 +6,7 @@
   >
     <div class="k-empty__image">
       <slot name="image">
+        <!-- 用不了，组件名错了且没有正确引用 -->
         <Icon
           :name="imageIcon"
           :class="['k-empty__icon', `k-empty__icon--${size}`]"
diff --git a/src/components/Grid/README.md b/src/components/Grid/README.md
index 270e5a0..a09bf40 100644
--- a/src/components/Grid/README.md
+++ b/src/components/Grid/README.md
@@ -1,72 +1,38 @@
-# KGrid
+# Grid 网格布局组件
 
-KGrid 组件是一个基于 CSS Grid 的网格布局组件，用于创建响应式、灵活的页面布局。
+Grid组件是一个基于CSS Grid的网格布局组件，用于创建响应式、灵活的页面布局，支持自定义列数、间距、对齐方式和响应式断点。
 
-## 使用示例
+## 参数接口 (Props)
 
-```vue
-<template>
-  <div>
-    <KGrid>基本网格</KGrid>
-    <KGrid :columns="6">6列网格</KGrid>
-    <KGrid :gap="20">自定义间距</KGrid>
-    <KGrid :columns="3" align="center" justify="space-between">自定义对齐</KGrid>
-    <KGrid :responsive="true" :xs="2" :sm="3" :md="4" :lg="6" :xl="8">响应式网格</KGrid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import KGrid from './index.vue';
-</script>
+| 参数名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| columns | number \| string[] | 12 | 列数，支持数字或数组形式，数组形式可自定义每列宽度 |
+| gap | number \| string | '' | 网格间距，支持数字（像素）或字符串（CSS单位） |
+| rowGap | number \| string | '' | 行间距，支持数字（像素）或字符串（CSS单位） |
+| columnGap | number \| string | '' | 列间距，支持数字（像素）或字符串（CSS单位） |
+| align | 'start' \| 'center' \| 'end' \| 'stretch' | 'stretch' | 垂直对齐方式 |
+| justify | 'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly' | 'start' | 水平对齐方式 |
+| responsive | boolean | false | 是否启用响应式布局 |
+| xs | number | 0 | 超小屏幕（< 576px）下的列数 |
+| sm | number | 0 | 小屏幕（≥ 576px）下的列数 |
+| md | number | 0 | 中等屏幕（≥ 768px）下的列数 |
+| lg | number | 0 | 大屏幕（≥ 992px）下的列数 |
+| xl | number | 0 | 超大屏幕（≥ 1200px）下的列数 |
 ```
 
-## Props
 
-| 属性名 | 类型 | 默认值 | 描述 |
-|-------|------|-------|------|
-| columns | `number \| string[]` | `12` | 列数，支持数字或数组形式，数组形式可自定义每列宽度 |
-| gap | `number \| string` | `''` | 网格间距，支持数字（像素）或字符串（CSS单位） |
-| rowGap | `number \| string` | `''` | 行间距，支持数字（像素）或字符串（CSS单位） |
-| columnGap | `number \| string` | `''` | 列间距，支持数字（像素）或字符串（CSS单位） |
-| align | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | 垂直对齐方式 |
-| justify | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around' \| 'space-evenly'` | `'start'` | 水平对齐方式 |
-| responsive | `boolean` | `false` | 是否启用响应式布局 |
-| xs | `number` | `0` | 超小屏幕（< 576px）下的列数 |
-| sm | `number` | `0` | 小屏幕（≥ 576px）下的列数 |
-| md | `number` | `0` | 中等屏幕（≥ 768px）下的列数 |
-| lg | `number` | `0` | 大屏幕（≥ 992px）下的列数 |
-| xl | `number` | `0` | 超大屏幕（≥ 1200px）下的列数 |
 
-## Slots
+## 插槽 (Slots)
 
-| 插槽名 | 描述 |
-|-------|------|
+| 插槽名 | 说明 |
+|--------|------|
 | default | 网格内容区域，放置网格项目 |
 
-## Events
+## 事件 (Events)
 
-KGrid 组件没有提供事件。
+Grid组件没有提供事件。
 
-## 高级用法
-
-### 自定义列宽
-
-```vue
-<template>
-  <KGrid :columns="['100px', '1fr', '2fr', 'auto']">
-    <div>固定宽度</div>
-    <div>1fr</div>
-    <div>2fr</div>
-    <div>自动宽度</div>
-  </KGrid>
-</template>
-
-<script setup lang="ts">
-import KGrid from './index.vue';
-</script>
-```
-
-### 复杂布局示例
+## 项目内使用示例
 
 ```vue
 <template>
@@ -104,8 +70,8 @@ import KGrid from './index.vue';
   </div>
 </template>
 
-<script setup lang="ts">
-import KGrid from './index.vue';
+<script setup>
+import { KGrid } from 'knowai-ui';
 </script>
 
 <style scoped>
@@ -129,5 +95,4 @@ h2 {
 .grid-item:hover {
   background-color: #e0e0e0;
 }
-</style>
-```
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/Icon/README.md b/src/components/Icon/README.md
index a956e46..9e2d019 100644
--- a/src/components/Icon/README.md
+++ b/src/components/Icon/README.md
@@ -1,32 +1,27 @@
 # Icon 图标组件
 
-## 介绍
+Icon组件是一个基于Element Plus图标的封装组件，提供了统一的图标使用方式，支持多种图标尺寸、颜色设置以及旋转动画效果。
 
-Icon 组件是一个基于 Element Plus 图标的封装组件，提供了统一的图标使用方式。它支持多种图标尺寸、颜色设置以及旋转动画效果。
+## 参数接口 (Props)
 
-## 特性
+| 参数名 | 类型 | 默认值 | 说明 |
+|-------|------|-------|------|
+| name | string | - | 图标名称，支持短横线命名（如 'check-circle'）和驼峰命名（如 'CircleCheck'） |
+| size | number \| string | 'inherit' | 图标尺寸，支持CSS尺寸值或数字 |
+| color | string | 'inherit' | 图标颜色，支持任意有效的CSS颜色值 |
+| spin | boolean | false | 是否显示旋转动画 |
 
-- 📦 按需加载 Element Plus 图标，减小打包体积
-- 🎨 支持自定义尺寸和颜色
-- 🔄 内置旋转动画效果
-- 🔧 支持短横线命名和驼峰命名两种方式
-- 📱 响应式设计，适应不同屏幕尺寸
-- 🧩 与其他组件无缝集成
+## 插槽 (Slots)
 
-## 安装
+| 插槽名 | 说明 |
+|-------|------|
+| default | 当图标不存在时显示的默认内容 |
 
-Icon 组件已包含在 KnowAI UI 组件库中，您可以通过以下方式导入使用：
+## 事件 (Events)
 
-```typescript
-// 完整导入组件库
-import KnowAIUI from 'knowai-ui';
-import 'knowai-ui/dist/style.css';
+Icon组件没有提供事件。
 
-// 按需导入 Icon 组件
-import { KIcon } from 'knowai-ui';
-```
-
-## 基础用法
+## 项目内使用示例
 
 ```vue
 <template>
@@ -48,113 +43,12 @@ import { KIcon } from 'knowai-ui';
     
     <!-- 使用驼峰命名 -->
     <KIcon name="CircleClose" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import KIcon from './index.vue';
-</script>
-```
-
-## API
-
-### 属性
-
-| 属性名 | 类型 | 说明 | 默认值 | 可选值 |
-|-------|-----|------|-------|-------|
-| name | string | 图标名称 | - | 支持短横线命名（如 'check-circle'）和驼峰命名（如 'CircleCheck'） |
-| size | number \| string | 图标尺寸 | 'inherit' | CSS 尺寸值或数字 |
-| color | string | 图标颜色 | 'inherit' | 任意有效的 CSS 颜色值 |
-| spin | boolean | 是否显示旋转动画 | false | true / false |
-
-### 插槽
-
-| 插槽名 | 说明 |
-|-------|-----|
-| default | 当图标不存在时显示的默认内容 |
-
-## 内置图标列表
-
-Icon 组件目前内置了以下常用图标：
-
-### 基础图标
-- `check` - 选中
-- `close` - 关闭
-- `search` - 搜索
-
-### 方向性图标
-- `arrow-left` - 左箭头
-- `arrow-right` - 右箭头
-- `arrow-up` - 上箭头
-- `arrow-down` - 下箭头
-
-### 状态图标
-- `check-circle` - 选中圆
-- `close-circle` - 关闭圆
-- `info-circle` - 信息圆
-- `exclamation-circle` - 警告圆
-
-### 功能图标
-- `image` - 图片
-- `image-error` - 图片错误
-- `preview` - 预览
-- `loading` - 加载中
-- `empty` - 空状态
-
-> 注意：您也可以直接使用 Element Plus 图标的原始名称（驼峰命名）。
-
-## 图标名称映射
-
-为了提供更好的使用体验，Icon 组件支持短横线命名方式，并自动映射到 Element Plus 的图标名称：
-
-| 短横线命名 | Element Plus 图标名称 |
-|-----------|---------------------|
-| check-circle | CircleCheck |
-| close-circle | CircleClose |
-| info-circle | CircleInfoFilled |
-| exclamation-circle | CircleWarningFilled |
-| image | Picture |
-| image-error | PictureRounded |
-| preview | ZoomIn |
-| loading | Loading |
-| empty | Document |
-| search | Search |
-| close | Close |
-| check | Check |
-| arrow-left | ArrowLeft |
-| arrow-right | ArrowRight |
-| arrow-up | ArrowUp |
-| arrow-down | ArrowDown |
-
-## 高级用法
-
-### 动态切换图标
-
-```vue
-<template>
-  <div>
+    
+    <!-- 动态切换图标 -->
     <KIcon :name="currentIcon" />
     <button @click="toggleIcon">切换图标</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import KIcon from './index.vue';
-
-const currentIcon = ref('search');
-
-const toggleIcon = () => {
-  currentIcon.value = currentIcon.value === 'search' ? 'close' : 'search';
-};
-</script>
-```
-
-### 结合其他组件使用
-
-```vue
-<template>
-  <div>
+    
+    <!-- 结合其他组件使用 -->
     <button class="custom-button">
       <KIcon name="search" />
       搜索
@@ -162,8 +56,15 @@ const toggleIcon = () => {
   </div>
 </template>
 
-<script setup lang="ts">
-import KIcon from './index.vue';
+<script setup>
+import { ref } from 'vue';
+import { KIcon } from 'knowai-ui';
+
+const currentIcon = ref('search');
+
+const toggleIcon = () => {
+  currentIcon.value = currentIcon.value === 'search' ? 'close' : 'search';
+};
 </script>
 
 <style scoped>
@@ -178,26 +79,4 @@ import KIcon from './index.vue';
   border-radius: 4px;
   cursor: pointer;
 }
-</style>
-```
-
-## 类型定义
-
-组件导出以下类型定义，可以在 TypeScript 项目中使用：
-
-```typescript
-import { IconProps } from '@/components/Icon';
-```
-
-## 注意事项
-
-1. 图标组件目前只包含了常用的图标，如果需要使用其他 Element Plus 图标，请参考迁移文档扩展图标支持
-2. 当指定的图标名称不存在时，组件会显示默认插槽内容
-3. 旋转动画仅对某些图标（如 loading）有意义
-4. 图标尺寸和颜色会继承父元素的样式，也可以通过属性直接设置
-
-## 性能优化
-
-- 组件使用按需静态导入方式加载图标，避免了导入整个图标库
-- 图标组件实现了高效的缓存机制，避免重复加载
-- 支持 Vue 3 的响应式优化，确保图标更新时的性能
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/Icon/index.scss b/src/components/Icon/index.scss
index 158a28c..c913a4a 100644
--- a/src/components/Icon/index.scss
+++ b/src/components/Icon/index.scss
@@ -10,11 +10,14 @@
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
+  // 优化可读性
   text-rendering: optimizeLegibility;
+  // 启用灰度抗锯齿，让字体边缘更加平滑（webkit和macOS系统）
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   vertical-align: middle;
 
+  // 用于loading
   &--spin {
     animation: rotating 2s linear infinite;
   }
diff --git a/src/components/Icon/index.vue b/src/components/Icon/index.vue
index 396bcff..f683923 100644
--- a/src/components/Icon/index.vue
+++ b/src/components/Icon/index.vue
@@ -154,7 +154,7 @@ export default defineComponent({
       return props.size === 'inherit' ? undefined : props.size;
     });
 
-    // 基础类名
+    // 基础类名，逆天代码，完全没用
     const baseClass = computed(() => 'k-icon');
     const spinClass = computed(() => 'k-icon--spin');
 
diff --git a/src/components/Image/README.md b/src/components/Image/README.md
index ffafc1d..8e24388 100644
--- a/src/components/Image/README.md
+++ b/src/components/Image/README.md
@@ -1,97 +1,76 @@
 # Image 图片组件
 
-用于展示图片，支持加载中状态、错误处理和图片预览功能。
+Image组件用于展示图片，支持加载中状态、错误处理和图片预览功能。
 
-## 特性
-
-- 支持自定义尺寸和裁剪方式
-- 提供加载中状态和错误状态的默认展示
-- 支持图片预览功能
-- 可自定义占位图和错误提示
-- 响应式设计，适应不同屏幕尺寸
-
-## 安装
-
-```bash
-# 安装组件库
-npm install @knowai/knowai-ui
-# 或
-yarn add @knowai/knowai-ui
-# 或
-pnpm add @knowai/knowai-ui
-```
-
-## 基础用法
-
-### 基本图片展示
-
-最简单的使用方式，只需要提供图片地址：
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
+    <!-- 基本图片展示 -->
     <KImage src="https://picsum.photos/id/237/200/200" alt="示例图片" />
-  </div>
-</template>
-
-<script setup>
-import { KImage } from '@knowai/knowai-ui';
-</script>
-```
-
-### 自定义尺寸
-
-设置图片的宽度和高度：
-
-```vue
-<template>
-  <div>
+    
+    <!-- 自定义尺寸 -->
     <KImage 
       src="https://picsum.photos/id/237/300/200" 
       alt="示例图片" 
       width="300" 
       height="200"
     />
+    
+    <!-- 不同的裁剪方式 -->
+    <div class="image-grid">
+      <div class="image-item">
+        <h4>contain</h4>
+        <KImage src="https://picsum.photos/id/237/200/200" alt="contain" fit="contain" width="100" height="100" />
+      </div>
+      <div class="image-item">
+        <h4>cover</h4>
+        <KImage src="https://picsum.photos/id/237/200/200" alt="cover" fit="cover" width="100" height="100" />
+      </div>
+      <div class="image-item">
+        <h4>fill</h4>
+        <KImage src="https://picsum.photos/id/237/200/200" alt="fill" fit="fill" width="100" height="100" />
+      </div>
+      <div class="image-item">
+        <h4>none</h4>
+        <KImage src="https://picsum.photos/id/237/200/200" alt="none" fit="none" width="100" height="100" />
+      </div>
+      <div class="image-item">
+        <h4>scale-down</h4>
+        <KImage src="https://picsum.photos/id/237/200/200" alt="scale-down" fit="scale-down" width="100" height="100" />
+      </div>
+    </div>
+    
+    <!-- 图片预览 -->
+    <KImage 
+      src="https://picsum.photos/id/237/400/300" 
+      alt="可预览图片" 
+      preview 
+      :previewSrcList="[
+        'https://picsum.photos/id/237/800/600',
+        'https://picsum.photos/id/238/800/600',
+        'https://picsum.photos/id/239/800/600'
+      ]"
+    />
+    
+    <!-- 自定义占位图和错误提示 -->
+    <KImage 
+      src="https://picsum.photos/id/237/200/200" 
+      alt="自定义占位图"
+    >
+      <template #placeholder>
+        <div class="custom-placeholder">加载中...</div>
+      </template>
+      <template #error>
+        <div class="custom-error">图片加载失败</div>
+      </template>
+    </KImage>
   </div>
 </template>
 
 <script setup>
-import { KImage } from '@knowai/knowai-ui';
-</script>
-```
-
-### 不同的裁剪方式
-
-使用`fit`属性控制图片如何适应容器：
-
-```vue
-<template>
-  <div class="image-grid">
-    <div class="image-item">
-      <h4>contain</h4>
-      <KImage src="https://picsum.photos/id/237/200/200" alt="contain" fit="contain" width="100" height="100" />
-    </div>
-    <div class="image-item">
-      <h4>cover</h4>
-      <KImage src="https://picsum.photos/id/237/200/200" alt="cover" fit="cover" width="100" height="100" />
-    </div>
-    <div class="image-item">
-      <h4>fill</h4>
-      <KImage src="https://picsum.photos/id/237/200/200" alt="fill" fit="fill" width="100" height="100" />
-    </div>
-    <div class="image-item">
-      <h4>none</h4>
-      <KImage src="https://picsum.photos/id/237/200/200" alt="none" fit="none" width="100" height="100" />
-    </div>
-    <div class="image-item">
-      <h4>scale-down</h4>
-      <KImage src="https://picsum.photos/id/237/200/200" alt="scale-down" fit="scale-down" width="100" height="100" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { KImage } from '@knowai/knowai-ui';
+import { KImage } from 'knowai-ui';
 </script>
 
 <style scoped>
@@ -108,60 +87,7 @@ h4 {
   margin-bottom: 8px;
   font-size: 12px;
 }
-</style>
-```
 
-### 图片预览
-
-启用图片预览功能：
-
-```vue
-<template>
-  <div>
-    <KImage 
-      src="https://picsum.photos/id/237/400/300" 
-      alt="可预览图片" 
-      preview 
-      :previewSrcList="[
-        'https://picsum.photos/id/237/800/600',
-        'https://picsum.photos/id/238/800/600',
-        'https://picsum.photos/id/239/800/600'
-      ]"
-    />
-  </div>
-</template>
-
-<script setup>
-import { KImage } from '@knowai/knowai-ui';
-</script>
-```
-
-### 自定义占位图和错误提示
-
-使用插槽自定义加载中和加载错误时的显示内容：
-
-```vue
-<template>
-  <div>
-    <KImage 
-      src="https://picsum.photos/id/237/200/200" 
-      alt="自定义占位图"
-    >
-      <template #placeholder>
-        <div class="custom-placeholder">加载中...</div>
-      </template>
-      <template #error>
-        <div class="custom-error">图片加载失败</div>
-      </template>
-    </KImage>
-  </div>
-</template>
-
-<script setup>
-import { KImage } from '@knowai/knowai-ui';
-</script>
-
-<style scoped>
 .custom-placeholder,
 .custom-error {
   display: flex;
@@ -175,12 +101,10 @@ import { KImage } from '@knowai/knowai-ui';
 </style>
 ```
 
-## API
+## 参数接口 (Props)
 
-### 属性
-
-| 属性名 | 类型 | 默认值 | 说明 |
-|-------|------|-------|------|
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
 | src | String | 必填 | 图片的 URL 地址 |
 | alt | String | '' | 图片的替代文本 |
 | fit | String | 'cover' | 图片的裁剪方式，可选值：'contain'、'cover'、'fill'、'none'、'scale-down' |
@@ -193,56 +117,17 @@ import { KImage } from '@knowai/knowai-ui';
 | initialIndex | Number | 0 | 预览图片时的初始索引 |
 | hideOnClickModal | Boolean | false | 点击遮罩层是否隐藏预览 |
 
-### 插槽
+## 插槽 (Slots)
 
-| 插槽名 | 说明 |
-|-------|------|
+| 插槽名 | 描述 |
+|--------|------|
 | placeholder | 加载中状态的自定义内容 |
 | error | 加载错误状态的自定义内容 |
 
-### 事件
+## 事件 (Events)
 
-| 事件名 | 说明 | 参数 |
-|-------|------|------|
+| 事件名 | 描述 | 参数 |
+|--------|------|------|
 | load | 图片加载成功时触发 | 无 |
 | error | 图片加载失败时触发 | 无 |
-| preview | 图片预览时触发 | 当前预览的图片索引 |
-
-## 类型定义
-
-```typescript
-// ImageProps 接口定义
-export interface ImageProps {
-  src: string;
-  alt?: string;
-  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
-  width?: string | number;
-  height?: string | number;
-  borderRadius?: string | number;
-  lazy?: boolean;
-  placeholder?: string;
-  preview?: boolean;
-  previewSrcList?: string[];
-  initialIndex?: number;
-  hideOnClickModal?: boolean;
-}
-```
-
-## 注意事项
-
-1. 当设置了 `preview` 属性为 `true` 时，建议同时提供 `previewSrcList` 以获得更好的预览体验
-2. 使用 `lazy` 属性时，需要确保图片在可视区域内才会触发加载
-3. `fit` 属性的默认值为 `cover`，这意味着图片会被裁剪以填满容器
-4. 当图片加载失败时，组件会显示默认的错误图标和提示文本，可以通过 `error` 插槽自定义
-
-## 浏览器支持
-
-- Chrome >= 60
-- Firefox >= 55
-- Safari >= 10.1
-- Edge >= 16
-
-## 相关链接
-
-- [MDN: img 元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img)
-- [CSS object-fit 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit)
\ No newline at end of file
+| preview | 图片预览时触发 | 当前预览的图片索引 |
\ No newline at end of file
diff --git a/src/components/Loading/README.md b/src/components/Loading/README.md
index e579b25..9356b7b 100644
--- a/src/components/Loading/README.md
+++ b/src/components/Loading/README.md
@@ -1,8 +1,8 @@
-# KLoading
+# Loading 加载组件
 
-`KLoading` 组件用于展示加载状态，支持多种尺寸、全屏模式和自定义内容。
+Loading组件用于展示加载状态，支持多种尺寸、全屏模式和自定义内容。
 
-## 使用示例
+## 项目内使用示例
 
 ```vue
 <template>
@@ -32,44 +32,44 @@
     <!-- 自定义图标 -->
     <KLoading>
       <template #spinner>
-        <KIcon name="custom-loading" />
+        <KIcon name="loading" />
       </template>
     </KLoading>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
-import KLoading from './index.vue';
+import { KLoading, KIcon } from 'knowai-ui';
 
 const loading = ref(true);
 </script>
 ```
 
-## Props
-
-| 属性名 | 类型 | 默认值 | 描述 |
+| 参数名 | 类型 | 默认值 | 描述 |
 |--------|------|--------|------|
-| `loading` | `boolean` | `true` | 是否显示加载状态 |
-| `size` | 'small' \| 'medium' \| 'large' | 'medium' | 加载组件尺寸 |
-| `text` | `string` | `''` | 加载文字提示 |
-| `delay` | `number` | `0` | 延迟显示时间（毫秒） |
-| `fullscreen` | `boolean` | `false` | 是否全屏显示 |
-| `background` | `string` | `''` | 背景颜色 |
-| `spinner` | `string` | 'loading' | 加载图标名称 |
-| `color` | `string` | `''` | 图标颜色 |
-| `vertical` | `boolean` | `false` | 是否垂直排列图标和文字 |
-| `lock` | `boolean` | - | 是否锁定背景滚动 |
-| `customClass` | `string` | - | 自定义类名 |
+| loading | boolean | true | 是否显示加载状态 |
+| size | 'small' \| 'medium' \| 'large' | 'medium' | 加载组件尺寸 |
+| text | string | '' | 加载文字提示 |
+| delay | number | 0 | 延迟显示时间（毫秒） |
+| fullscreen | boolean | false | 是否全屏显示 |
+| background | string | '' | 背景颜色 |
+| spinner | string | 'loading' | 加载图标名称 |
+| color | string | '' | 图标颜色 |
+| vertical | boolean | false | 是否垂直排列图标和文字 |
+| lock | boolean | - | 是否锁定背景滚动 |
+| customClass | string | - | 自定义类名 |
 
-## Slots
+## 插槽 (Slots)
 
 | 插槽名 | 描述 |
 |--------|------|
-| `default` | 未加载状态下显示的内容 |
-| `spinner` | 自定义加载图标 |
-| `text` | 自定义加载文字内容 |
+| default | 未加载状态下显示的内容 |
+| spinner | 自定义加载图标 |
+| text | 自定义加载文字内容 |
 
-## Events
 
-KLoading组件没有提供事件。
\ No newline at end of file
+
+## 事件 (Events)
+
+Loading组件没有提供事件。
\ No newline at end of file
diff --git a/src/components/Loading/index.vue b/src/components/Loading/index.vue
index 62f68ce..faf700a 100644
--- a/src/components/Loading/index.vue
+++ b/src/components/Loading/index.vue
@@ -27,6 +27,7 @@
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
+// 引用没错，名字不一样也行
 import Icon from '../Icon/index.vue';
 import { LoadingProps } from './types';
 
diff --git a/src/components/Message/README.md b/src/components/Message/README.md
index 5e727c0..f7e4789 100644
--- a/src/components/Message/README.md
+++ b/src/components/Message/README.md
@@ -1,132 +1,108 @@
-# Message 消息提示
+# Message 消息提示组件
 
 轻量级的提示组件，用于向用户反馈操作结果或展示临时信息。
 
-## 基础用法
-
-直接在模板中使用组件。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
+    <!-- 基础消息 -->
     <k-button @click="showMessage">显示消息</k-button>
-    
-    <!-- 在模板中使用组件 -->
     <k-message 
       v-if="visible" 
       content="这是一条消息提示"
       type="info"
       :on-close="handleClose"
     />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import KMessage from '@/components/Message';
-import KButton from '@/components/Button';
-
-const visible = ref(false);
-
-const showMessage = () => {
-  visible.value = true;
-};
-
-const handleClose = () => {
-  visible.value = false;
-};
-</script>
-```
-
-## 不同类型的消息
-
-Message 组件支持多种类型的消息，可以通过 `type` 属性来设置。
-
-```vue
-<template>
-  <div>
-    <k-button @click="showSuccessMessage">成功消息</k-button>
-    <k-button @click="showErrorMessage">错误消息</k-button>
-    <k-button @click="showInfoMessage">信息消息</k-button>
-    <k-button @click="showWarningMessage">警告消息</k-button>
-    <k-button @click="showLoadingMessage">加载消息</k-button>
     
+    <!-- 不同类型的消息 -->
+    <div style="margin-top: 20px;">
+      <k-button @click="showSuccessMessage">成功消息</k-button>
+      <k-button @click="showErrorMessage">错误消息</k-button>
+      <k-button @click="showInfoMessage">信息消息</k-button>
+      <k-button @click="showWarningMessage">警告消息</k-button>
+      <k-button @click="showLoadingMessage">加载消息</k-button>
+    </div>
     <k-message 
       v-if="messageVisible" 
       :content="messageContent"
       :type="messageType"
-      :on-close="handleClose"
+      :on-close="handleMessageClose"
+    />
+    
+    <!-- 自定义配置 -->
+    <k-message 
+      v-if="customVisible" 
+      content="可关闭的消息"
+      type="warning"
+      :closable="true"
+      :duration="3000"
+      :on-close="handleCustomClose"
     />
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
-import KMessage from '@/components/Message';
-import KButton from '@/components/Button';
+import { KMessage, KButton } from 'knowai-ui';
 
+// 基础消息
+const visible = ref(false);
+const showMessage = () => {
+  visible.value = true;
+};
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 不同类型消息
 const messageVisible = ref(false);
 const messageContent = ref('');
-const messageType = ref<'success' | 'info' | 'warning' | 'error' | 'loading'>('info');
+const messageType = ref('info');
 
-const showMessage = (content: string, type: typeof messageType.value) => {
+const showMessageByType = (content, type) => {
   messageContent.value = content;
   messageType.value = type;
   messageVisible.value = true;
 };
 
-const showSuccessMessage = () => showMessage('这是一条成功消息', 'success');
-const showErrorMessage = () => showMessage('这是一条错误消息', 'error');
-const showInfoMessage = () => showMessage('这是一条信息消息', 'info');
-const showWarningMessage = () => showMessage('这是一条警告消息', 'warning');
-const showLoadingMessage = () => showMessage('加载中...', 'loading');
-
-const handleClose = () => {
+const showSuccessMessage = () => showMessageByType('这是一条成功消息', 'success');
+const showErrorMessage = () => showMessageByType('这是一条错误消息', 'error');
+const showInfoMessage = () => showMessageByType('这是一条信息消息', 'info');
+const showWarningMessage = () => showMessageByType('这是一条警告消息', 'warning');
+const showLoadingMessage = () => showMessageByType('加载中...', 'loading');
+const handleMessageClose = () => {
   messageVisible.value = false;
 };
+
+// 自定义配置
+const customVisible = ref(false);
+const handleCustomClose = () => customVisible.value = false;
 </script>
 ```
 
-## 自定义配置
+## 参数接口 (Props)
 
-可以通过各种属性来自定义消息的行为。
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| content | string | '' | 消息内容 |
+| type | string | 'info' | 消息类型，可选值: success / info / warning / error / loading |
+| icon | boolean | true | 是否显示图标 |
+| duration | number | 3 | 显示时长(秒)，0 表示永久显示 |
+| closable | boolean | false | 是否显示关闭按钮 |
+| onClose | Function | null | 关闭时的回调函数 |
+| onClick | Function | null | 点击消息时的回调函数 |
+| className | string | '' | 自定义类名 |
+| style | Object | {} | 自定义样式 |
+| top | number | 24 | 消息距离顶部的距离(px) |
+| pauseOnHover | boolean | true | 鼠标悬停时是否暂停计时 |
 
-```vue
-<template>
-  <div>
-    <k-message 
-      v-if="visible" 
-      content="可关闭的消息"
-      type="warning"
-      :closable="true"
-      :duration="3000"
-      :on-close="handleClose"
-    />
-  </div>
-</template>
+## 插槽 (Slots)
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import KMessage from '@/components/Message';
+Message组件没有提供插槽。
 
-const visible = ref(true);
-const handleClose = () => visible.value = false;
-</script>
-```
+## 事件 (Events)
 
-## Props
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| content | 消息内容 | `string` | - | '' |
-| type | 消息类型 | `string` | success / info / warning / error / loading | info |
-| icon | 是否显示图标 | `boolean` | - | true |
-| duration | 显示时长(秒)，0 表示永久显示 | `number` | - | 3 |
-| closable | 是否显示关闭按钮 | `boolean` | - | false |
-| onClose | 关闭时的回调函数 | `Function` | - | null |
-| onClick | 点击消息时的回调函数 | `Function` | - | null |
-| className | 自定义类名 | `string` | - | '' |
-| style | 自定义样式 | `Object` | - | {} |
-| top | 消息距离顶部的距离(px) | `number` | - | 24 |
-| pauseOnHover | 鼠标悬停时是否暂停计时 | `boolean` | - | true |
+Message组件通过props中的回调函数处理事件，没有单独的事件接口。
 
diff --git a/src/components/Message/index.scss b/src/components/Message/index.scss
index f6b7625..e380c06 100644
--- a/src/components/Message/index.scss
+++ b/src/components/Message/index.scss
@@ -5,9 +5,11 @@
 .k-message {
   position: fixed;
   top: 24px;
+  // 水平居中
   left: 50%;
   transform: translateX(-50%);
   z-index: 1010;
+  // 又没有用到全局基础样式
   display: flex;
   align-items: center;
   padding: 10px 16px;
@@ -127,6 +129,7 @@
 }
 
 .k-message-fade-enter-active {
+  // 自定义缓动函数（贝塞尔曲线）
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
diff --git a/src/components/Message/index.vue b/src/components/Message/index.vue
index 5ecd404..27aad67 100644
--- a/src/components/Message/index.vue
+++ b/src/components/Message/index.vue
@@ -1,5 +1,7 @@
 <template>
+  <!-- 直接挂到父组件里面 -->
   <teleport to="body">
+    <!-- 包装器，首次渲染使用，非DOM -->
     <transition
       name="k-message-fade"
       appear
diff --git a/src/components/Notification/README.md b/src/components/Notification/README.md
index 725320e..35fb964 100644
--- a/src/components/Notification/README.md
+++ b/src/components/Notification/README.md
@@ -1,135 +1,111 @@
-# Notification 通知
+# Notification 通知组件
 
 在页面顶部显示通知提醒信息。
 
-## 基础用法
-
-直接在模板中使用组件。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
-    <k-button @click="showNotification">显示通知</k-button>
-    
-    <!-- 在模板中使用组件 -->
+    <!-- 基础通知 -->
+    <k-button @click="showBasicNotification">显示通知</k-button>
     <k-notification 
-      v-if="visible" 
+      v-if="basicVisible" 
       title="通知标题"
       description="这是一条通知信息"
       type="info"
-      :on-close="handleClose"
+      :on-close="handleBasicClose"
     />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import KNotification from '@/components/Notification';
-import KButton from '@/components/Button';
-
-const visible = ref(false);
-
-const showNotification = () => {
-  visible.value = true;
-};
-
-const handleClose = () => {
-  visible.value = false;
-};
-</script>
-```
-
-## 不同类型的通知
-
-Notification 组件支持多种类型的通知，可以通过 `type` 属性来设置。
-
-```vue
-<template>
-  <div>
-    <k-button @click="showSuccessNotification">成功通知</k-button>
-    <k-button @click="showErrorNotification">错误通知</k-button>
-    <k-button @click="showInfoNotification">信息通知</k-button>
-    <k-button @click="showWarningNotification">警告通知</k-button>
     
+    <!-- 不同类型的通知 -->
+    <div style="margin-top: 20px;">
+      <k-button @click="showSuccessNotification">成功通知</k-button>
+      <k-button @click="showErrorNotification">错误通知</k-button>
+      <k-button @click="showInfoNotification">信息通知</k-button>
+      <k-button @click="showWarningNotification">警告通知</k-button>
+    </div>
     <k-notification 
-      v-if="notificationVisible" 
+      v-if="typeVisible" 
       :title="notificationTitle"
       :description="notificationDescription"
       :type="notificationType"
-      :on-close="handleClose"
+      :on-close="handleTypeClose"
     />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import KNotification from '@/components/Notification';
-import KButton from '@/components/Button';
-
-const notificationVisible = ref(false);
-const notificationTitle = ref('');
-const notificationDescription = ref('');
-const notificationType = ref<'success' | 'info' | 'warning' | 'error'>('info');
-
-const showNotification = (title: string, description: string, type: typeof notificationType.value) => {
-  notificationTitle.value = title;
-  notificationDescription.value = description;
-  notificationType.value = type;
-  notificationVisible.value = true;
-};
-
-const showSuccessNotification = () => showNotification('成功', '操作已成功完成', 'success');
-const showErrorNotification = () => showNotification('错误', '操作失败，请稍后重试', 'error');
-const showInfoNotification = () => showNotification('提示', '这是一条提示信息', 'info');
-const showWarningNotification = () => showNotification('警告', '请确认您的操作', 'warning');
-
-const handleClose = () => {
-  notificationVisible.value = false;
-};
-</script>
-```
-
-## 不同位置的通知
-
-可以通过 `placement` 属性来设置通知显示的位置。
-
-```vue
-<template>
-  <div>
+    
+    <!-- 不同位置的通知 -->
     <k-notification 
-      v-if="visible" 
+      v-if="placementVisible" 
       title="顶部右侧通知"
       description="这是一条显示在顶部右侧的通知"
       placement="topRight"
-      :on-close="handleClose"
+      :on-close="handlePlacementClose"
     />
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
-import KNotification from '@/components/Notification';
+import { KNotification, KButton } from 'knowai-ui';
 
-const visible = ref(true);
-const handleClose = () => visible.value = false;
+// 基础通知
+const basicVisible = ref(false);
+const showBasicNotification = () => {
+  basicVisible.value = true;
+};
+const handleBasicClose = () => {
+  basicVisible.value = false;
+};
+
+// 不同类型通知
+const typeVisible = ref(false);
+const notificationTitle = ref('');
+const notificationDescription = ref('');
+const notificationType = ref('info');
+
+const showNotificationByType = (title, description, type) => {
+  notificationTitle.value = title;
+  notificationDescription.value = description;
+  notificationType.value = type;
+  typeVisible.value = true;
+};
+
+const showSuccessNotification = () => showNotificationByType('成功', '操作已成功完成', 'success');
+const showErrorNotification = () => showNotificationByType('错误', '操作失败，请稍后重试', 'error');
+const showInfoNotification = () => showNotificationByType('提示', '这是一条提示信息', 'info');
+const showWarningNotification = () => showNotificationByType('警告', '请确认您的操作', 'warning');
+const handleTypeClose = () => {
+  typeVisible.value = false;
+};
+
+// 不同位置通知
+const placementVisible = ref(false);
+const handlePlacementClose = () => placementVisible.value = false;
 </script>
 ```
 
-## Props
+## 参数接口 (Props)
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| title | 通知标题 | `string` | - | '' |
-| description | 通知描述 | `string` | - | '' |
-| type | 通知类型 | `string` | success / info / warning / error | info |
-| duration | 显示时长(秒)，0 表示永久显示 | `number` | - | 4.5 |
-| closable | 是否显示关闭按钮 | `boolean` | - | true |
-| onClose | 关闭时的回调函数 | `Function` | - | null |
-| onClick | 点击通知时的回调函数 | `Function` | - | null |
-| className | 自定义类名 | `string` | - | '' |
-| style | 自定义样式 | `Object` | - | {} |
-| placement | 通知位置 | `string` | topLeft / topRight / bottomLeft / bottomRight | topRight |
-| zIndex | 通知的 z-index | `number` | - | 1010 |
-| top | 通知距离顶部的距离(px) | `number` | - | 24 |
-| bottom | 通知距离底部的距离(px) | `number` | - | 24 |
-| pauseOnHover | 鼠标悬停时是否暂停计时 | `boolean` | - | true |
\ No newline at end of file
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| title | string | '' | 通知标题 |
+| description | string | '' | 通知描述 |
+| type | string | 'info' | 通知类型，可选值: success / info / warning / error |
+| duration | number | 4.5 | 显示时长(秒)，0 表示永久显示 |
+| closable | boolean | true | 是否显示关闭按钮 |
+| onClose | Function | null | 关闭时的回调函数 |
+| onClick | Function | null | 点击通知时的回调函数 |
+| className | string | '' | 自定义类名 |
+| style | Object | {} | 自定义样式 |
+| placement | string | 'topRight' | 通知位置，可选值: topLeft / topRight / bottomLeft / bottomRight |
+| zIndex | number | 1010 | 通知的 z-index |
+| top | number | 24 | 通知距离顶部的距离(px) |
+| bottom | number | 24 | 通知距离底部的距离(px) |
+| pauseOnHover | boolean | true | 鼠标悬停时是否暂停计时 |
+
+## 插槽 (Slots)
+
+Notification组件没有提供插槽。
+
+## 事件 (Events)
+
+Notification组件通过props中的回调函数处理事件，没有单独的事件接口。
\ No newline at end of file
diff --git a/src/components/Notification/index.scss b/src/components/Notification/index.scss
index b695b5e..c5acf1e 100644
--- a/src/components/Notification/index.scss
+++ b/src/components/Notification/index.scss
@@ -5,6 +5,7 @@
 .k-notification {
   position: fixed;
   z-index: 1010;
+  // 基于视口动态计算
   max-width: calc(100vw - 48px);
   margin-bottom: 16px;
   margin-left: 24px;
diff --git a/src/components/Result/README.md b/src/components/Result/README.md
index 6259938..3af412a 100644
--- a/src/components/Result/README.md
+++ b/src/components/Result/README.md
@@ -1,86 +1,86 @@
-# Result 结果
+# Result 结果组件
 
 用于反馈一系列操作任务的处理结果。
 
-## 基础用法
-
-Result 组件需要设置 `status` 属性，可选值为 `success`、`warning`、`error`、`info`、`loading`、`404`、`403`、`500`，默认值为 `info`。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
-    <!-- 成功状态 -->
-    <k-result status="success" title="成功提示" subtitle="恭喜你，操作成功！" />
+    <!-- 基础状态示例 -->
+    <div style="margin-bottom: 30px;">
+      <h3>基础状态</h3>
+      <!-- 成功状态 -->
+      <k-result status="success" title="成功提示" subtitle="恭喜你，操作成功！" />
+      
+      <!-- 警告状态 -->
+      <k-result status="warning" title="警告提示" subtitle="操作可能会有风险，请谨慎！" />
+      
+      <!-- 错误状态 -->
+      <k-result status="error" title="错误提示" subtitle="操作失败，请稍后重试！" />
+      
+      <!-- 加载状态 -->
+      <k-result status="loading" title="加载中" subtitle="正在处理您的请求..." />
+    </div>
     
-    <!-- 警告状态 -->
-    <k-result status="warning" title="警告提示" subtitle="操作可能会有风险，请谨慎！" />
+    <!-- 自定义内容示例 -->
+    <div style="margin-bottom: 30px;">
+      <h3>自定义内容</h3>
+      <k-result status="success" title="操作成功">
+        <template #icon>
+          <k-icon name="check" size="64" />
+        </template>
+        <template #title>
+          <span style="color: #67C23A;">自定义标题</span>
+        </template>
+        <template #subtitle>
+          <span>这是自定义的副标题内容</span>
+        </template>
+        <template #extra>
+          <k-button type="primary">返回首页</k-button>
+          <k-button>查看详情</k-button>
+        </template>
+      </k-result>
+    </div>
     
-    <!-- 错误状态 -->
-    <k-result status="error" title="错误提示" subtitle="操作失败，请稍后重试！" />
-    
-    <!-- 加载状态 -->
-    <k-result status="loading" title="加载中" subtitle="正在处理您的请求..." />
+    <!-- 状态码展示 -->
+    <div>
+      <h3>状态码展示</h3>
+      <!-- 404 页面 -->
+      <k-result status="404" title="404" subtitle="抱歉，请求的页面不存在" />
+      
+      <!-- 403 页面 -->
+      <k-result status="403" title="403" subtitle="抱歉，您没有权限访问此页面" />
+      
+      <!-- 500 页面 -->
+      <k-result status="500" title="500" subtitle="服务器内部错误，请稍后重试" />
+    </div>
   </div>
 </template>
+
+<script setup>
+import { KResult, KIcon, KButton } from 'knowai-ui';
+</script>
 ```
 
-## 自定义内容
+## 参数接口 (Props)
 
-Result 组件提供了多个插槽，可以自定义各个部分的内容。
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| status | string | 'info' | 结果状态，可选值: success / warning / error / info / loading / 404 / 403 / 500 |
+| title | string | - | 标题内容 |
+| subtitle | string | - | 副标题内容 |
 
-```vue
-<template>
-  <k-result status="success" title="操作成功">
-    <template #icon>
-      <k-icon name="check" size="64" />
-    </template>
-    <template #title>
-      <span style="color: #67C23A;">自定义标题</span>
-    </template>
-    <template #subtitle>
-      <span>这是自定义的副标题内容</span>
-    </template>
-    <template #extra>
-      <k-button type="primary">返回首页</k-button>
-      <k-button>查看详情</k-button>
-    </template>
-  </k-result>
-</template>
-```
+## 插槽 (Slots)
 
-## 状态码展示
-
-用于展示特定状态码的结果页面。
-
-```vue
-<template>
-  <div>
-    <!-- 404 页面 -->
-    <k-result status="404" title="404" subtitle="抱歉，请求的页面不存在" />
-    
-    <!-- 403 页面 -->
-    <k-result status="403" title="403" subtitle="抱歉，您没有权限访问此页面" />
-    
-    <!-- 500 页面 -->
-    <k-result status="500" title="500" subtitle="服务器内部错误，请稍后重试" />
-  </div>
-</template>
-```
-
-## Props
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| status | 结果状态 | `string` | success / warning / error / info / loading / 404 / 403 / 500 | info |
-| title | 标题内容 | `string` | - | - |
-| subtitle | 副标题内容 | `string` | - | - |
-
-## Slots
-
-| 名称 | 说明 |
-| --- | --- |
+| 插槽名 | 描述 |
+|--------|------|
 | icon | 图标区域 |
 | title | 标题区域 |
 | subtitle | 副标题区域 |
 | extra | 额外操作区域 |
-| default | 自定义内容区域 |
\ No newline at end of file
+| default | 自定义内容区域 |
+
+## 事件 (Events)
+
+Result组件没有提供事件。
\ No newline at end of file
diff --git a/src/components/Result/index.vue b/src/components/Result/index.vue
index 66fb879..27ba402 100644
--- a/src/components/Result/index.vue
+++ b/src/components/Result/index.vue
@@ -22,6 +22,7 @@
         {{ subtitle }}
       </slot>
     </div>
+    <!-- 子组件判断具名插槽是否有传入 -->
     <div
       v-if="$slots.extra"
       class="k-result__extra"
diff --git a/src/components/Space/README.md b/src/components/Space/README.md
index da37445..c03a488 100644
--- a/src/components/Space/README.md
+++ b/src/components/Space/README.md
@@ -1,155 +1,129 @@
-# Space 间距
+# Space 间距组件
 
 设置组件之间的间距。
 
-## 基础用法
-
-Space 组件可以包裹多个子组件，在它们之间添加间距。
-
-```vue
-<template>
-  <k-space>
-    <k-button>按钮1</k-button>
-    <k-button>按钮2</k-button>
-    <k-button>按钮3</k-button>
-  </k-space>
-</template>
-
-<script setup lang="ts">
-import { KSpace } from '@/components/Space';
-import { KButton } from '@/components/Button';
-</script>
-```
-
-## 垂直布局
-
-通过 `direction` 属性可以设置布局方向为垂直。
-
-```vue
-<template>
-  <k-space direction="vertical">
-    <k-button>按钮1</k-button>
-    <k-button>按钮2</k-button>
-    <k-button>按钮3</k-button>
-  </k-space>
-</template>
-
-<script setup lang="ts">
-import { KSpace } from '@/components/Space';
-import { KButton } from '@/components/Button';
-</script>
-```
-
-## 自定义间距
-
-通过 `size` 属性可以设置间距大小。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
-    <p>小间距</p>
-    <k-space size="small">
-      <k-button>按钮1</k-button>
-      <k-button>按钮2</k-button>
-      <k-button>按钮3</k-button>
-    </k-space>
+    <!-- 基础用法 -->
+    <div style="margin-bottom: 30px;">
+      <h3>基础用法</h3>
+      <k-space>
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+    </div>
     
-    <p>默认间距</p>
-    <k-space size="default">
-      <k-button>按钮1</k-button>
-      <k-button>按钮2</k-button>
-      <k-button>按钮3</k-button>
-    </k-space>
+    <!-- 垂直布局 -->
+    <div style="margin-bottom: 30px;">
+      <h3>垂直布局</h3>
+      <k-space direction="vertical">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+    </div>
     
-    <p>大间距</p>
-    <k-space size="large">
-      <k-button>按钮1</k-button>
-      <k-button>按钮2</k-button>
-      <k-button>按钮3</k-button>
-    </k-space>
+    <!-- 自定义间距 -->
+    <div style="margin-bottom: 30px;">
+      <h3>自定义间距</h3>
+      <p>小间距</p>
+      <k-space size="small">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+      
+      <p>默认间距</p>
+      <k-space size="medium">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+      
+      <p>大间距</p>
+      <k-space size="large">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+      
+      <p>自定义数值间距</p>
+      <k-space :size="24">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+    </div>
     
-    <p>自定义数值间距</p>
-    <k-space :size="24">
-      <k-button>按钮1</k-button>
-      <k-button>按钮2</k-button>
-      <k-button>按钮3</k-button>
-    </k-space>
+    <!-- 对齐方式 -->
+    <div style="margin-bottom: 30px;">
+      <h3>对齐方式</h3>
+      <p>顶部对齐</p>
+      <k-space align="start">
+        <k-button>按钮</k-button>
+        <k-tag>标签</k-tag>
+        <div style="height: 40px; background: #f0f0f0;">自定义元素</div>
+      </k-space>
+    </div>
+    
+    <!-- 分布方式 -->
+    <div style="margin-bottom: 30px;">
+      <h3>分布方式</h3>
+      <p>两端对齐</p>
+      <k-space justify="space-between">
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+    </div>
+    
+    <!-- 其他特性 -->
+    <div style="margin-bottom: 30px;">
+      <h3>其他特性</h3>
+      <p>显示分隔线</p>
+      <k-space split>
+        <k-button>按钮1</k-button>
+        <k-button>按钮2</k-button>
+        <k-button>按钮3</k-button>
+      </k-space>
+      
+      <p>自动换行</p>
+      <k-space wrap>
+        <k-button v-for="i in 10" :key="i">按钮{{ i }}</k-button>
+      </k-space>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { KSpace } from '@/components/Space';
-import { KButton } from '@/components/Button';
+<script setup>
+import { KSpace, KButton, KTag } from 'knowai-ui';
 </script>
 ```
 
-## 对齐方式
+## 参数接口 (Props)
 
-通过 `align` 属性可以设置对齐方式。
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| size | number / string / array | 'medium' | 间距大小，可选值: small / medium / large / 自定义数值 / [垂直间距, 水平间距] |
+| direction | string | 'horizontal' | 间距方向，可选值: horizontal / vertical |
+| align | string | 'center' | 对齐方式，可选值: start / center / end / baseline / stretch |
+| justify | string | 'start' | 主轴分布方式，可选值: start / center / end / space-between / space-around |
+| wrap | boolean | false | 是否自动换行 |
+| fill | boolean | false | 是否填充父容器 |
+| split | boolean | false | 是否显示分隔线 |
+| className | string | '' | 自定义类名 |
+| style | Object | {} | 自定义样式 |
 
-```vue
-<template>
-  <div>
-    <p>顶部对齐</p>
-    <k-space align="start">
-      <k-button>按钮</k-button>
-      <k-tag>标签</k-tag>
-      <div style="height: 40px; background: #f0f0f0;">自定义元素</div>
-    </k-space>
-    
-    <p>居中对齐</p>
-    <k-space align="center">
-      <k-button>按钮</k-button>
-      <k-tag>标签</k-tag>
-      <div style="height: 40px; background: #f0f0f0;">自定义元素</div>
-    </k-space>
-    
-    <p>底部对齐</p>
-    <k-space align="end">
-      <k-button>按钮</k-button>
-      <k-tag>标签</k-tag>
-      <div style="height: 40px; background: #f0f0f0;">自定义元素</div>
-    </k-space>
-  </div>
-</template>
+## 插槽 (Slots)
 
-<script setup lang="ts">
-import { KSpace } from '@/components/Space';
-import { KButton } from '@/components/Button';
-import { KTag } from '@/components/Tag';
-</script>
-```
+| 插槽名 | 描述 |
+|--------|------|
+| default | 放置子组件，支持多个子元素 |
 
-## 环绕模式
+## 事件 (Events)
 
-通过 `wrap` 属性可以设置是否自动换行。
-
-```vue
-<template>
-  <k-space wrap>
-    <k-button v-for="i in 20" :key="i">按钮{{ i }}</k-button>
-  </k-space>
-</template>
-
-<script setup lang="ts">
-import { KSpace } from '@/components/Space';
-import { KButton } from '@/components/Button';
-</script>
-```
-
-## Props
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| size | 间距大小 | `number` / `string` | small / default / large / 自定义数值 | 'default' |
-| direction | 间距方向 | `string` | 'horizontal' / 'vertical' | 'horizontal' |
-| align | 对齐方式 | `string` | 'start' / 'center' / 'end' / 'baseline' | 'start' |
-| wrap | 是否自动换行 | `boolean` | - | false |
-| className | 自定义类名 | `string` | - | '' |
-| style | 自定义样式 | `Object` | - | {} |
-
-## Slots
-
-| 插槽名 | 说明 |
-| --- | --- |
-| default | 放置子组件，支持多个子元素 |
\ No newline at end of file
+Space组件没有提供事件。
\ No newline at end of file
diff --git a/src/components/Space/index.scss b/src/components/Space/index.scss
index ced2d03..b2cf2c6 100644
--- a/src/components/Space/index.scss
+++ b/src/components/Space/index.scss
@@ -60,6 +60,7 @@
 
   // 填充
   &--fill {
+    // 直接传子元素
     & > * {
       flex: 1;
     }
@@ -67,6 +68,7 @@
 
   // 分割线
   &--split {
+    // 选择父元素下的所有元素，除了最后一个子元素
     & > *:not(:last-child)::after {
       content: '';
       display: inline-block;
diff --git a/src/components/Tag/README.md b/src/components/Tag/README.md
index f7cf597..7517a17 100644
--- a/src/components/Tag/README.md
+++ b/src/components/Tag/README.md
@@ -1,49 +1,78 @@
-# Tag 标签
+# Tag 标签组件
 
 用于标记和分类的标签组件。
 
-## 基础用法
-
-最基础的标签组件用法。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
-    <k-tag>默认标签</k-tag>
-    <k-tag type="success">成功标签</k-tag>
-    <k-tag type="warning">警告标签</k-tag>
-    <k-tag type="error">错误标签</k-tag>
-    <k-tag type="info">信息标签</k-tag>
+    <!-- 基础用法 -->
+    <div style="margin-bottom: 20px;">
+      <h3>基础用法</h3>
+      <k-tag>默认标签</k-tag>
+      <k-tag type="success">成功标签</k-tag>
+      <k-tag type="warning">警告标签</k-tag>
+      <k-tag type="error">错误标签</k-tag>
+      <k-tag type="info">信息标签</k-tag>
+    </div>
+    
+    <!-- 可移除标签 -->
+    <div style="margin-bottom: 20px;">
+      <h3>可移除标签</h3>
+      <k-tag 
+        v-for="tag in tagsList" 
+        :key="tag.name"
+        :closable="true"
+        :type="tag.type"
+        @close="handleClose(tag)"
+      >
+        {{ tag.name }}
+      </k-tag>
+    </div>
+    
+    <!-- 不同尺寸 -->
+    <div style="margin-bottom: 20px;">
+      <h3>不同尺寸</h3>
+      <k-tag size="large">大号标签</k-tag>
+      <k-tag>默认标签</k-tag>
+      <k-tag size="small">小号标签</k-tag>
+    </div>
+    
+    <!-- 自定义颜色 -->
+    <div style="margin-bottom: 20px;">
+      <h3>自定义颜色</h3>
+      <k-tag color="#f56c6c">红色标签</k-tag>
+      <k-tag color="#e6a23c">橙色标签</k-tag>
+      <k-tag color="#67c23a">绿色标签</k-tag>
+    </div>
+    
+    <!-- 描边标签 -->
+    <div style="margin-bottom: 20px;">
+      <h3>描边标签</h3>
+      <k-tag effect="plain">默认描边</k-tag>
+      <k-tag effect="plain" type="success">成功描边</k-tag>
+      <k-tag effect="plain" type="warning">警告描边</k-tag>
+    </div>
+    
+    <!-- 带图标标签 -->
+    <div>
+      <h3>带图标标签</h3>
+      <k-tag type="success">
+        <k-icon name="check-circle"></k-icon>
+        成功标签
+      </k-tag>
+      <k-tag type="error">
+        <k-icon name="close-circle"></k-icon>
+        错误标签
+      </k-tag>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { KTag } from '@/components/Tag';
-</script>
-```
-
-## 可移除标签
-
-通过 `closable` 属性可以设置标签是否可移除。
-
-```vue
-<template>
-  <div>
-    <k-tag 
-      v-for="tag in tags" 
-      :key="tag.name"
-      :closable="true"
-      :type="tag.type"
-      @close="handleClose(tag)"
-    >
-      {{ tag.name }}
-    </k-tag>
-  </div>
-</template>
-
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue';
-import { KTag } from '@/components/Tag';
+import { KTag, KIcon } from 'knowai-ui';
 
 interface TagItem {
   name: string;
@@ -66,119 +95,29 @@ const handleClose = (tagToRemove: TagItem) => {
 </script>
 ```
 
-## 不同尺寸
+## 参数接口 (Props)
 
-通过 `size` 属性可以设置标签的大小。
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| type | string | - | 标签类型，可选值: success / warning / error / info |
+| effect | string | 'light' | 标签效果，可选值: dark / light / plain |
+| size | string | 'default' | 标签大小，可选值: large / default / small |
+| closable | boolean | false | 是否可关闭 |
+| hit | boolean | false | 是否有边框描边 |
+| disableTransitions | boolean | false | 是否禁用渐变动画 |
+| color | string | - | 自定义标签颜色 |
+| className | string | '' | 自定义类名 |
+| style | Object | {} | 自定义样式 |
 
-```vue
-<template>
-  <div>
-    <k-tag size="large">大号标签</k-tag>
-    <k-tag>默认标签</k-tag>
-    <k-tag size="small">小号标签</k-tag>
-  </div>
-</template>
+## 插槽 (Slots)
 
-<script setup lang="ts">
-import { KTag } from '@/components/Tag';
-</script>
-```
+| 插槽名 | 描述 |
+|--------|------|
+| default | 标签内容 |
 
-## 自定义颜色
+## 事件 (Events)
 
-通过 `color` 属性可以自定义标签的背景色。
-
-```vue
-<template>
-  <div>
-    <k-tag color="#f56c6c">红色标签</k-tag>
-    <k-tag color="#e6a23c">橙色标签</k-tag>
-    <k-tag color="#67c23a">绿色标签</k-tag>
-    <k-tag color="#409eff">蓝色标签</k-tag>
-    <k-tag color="#909399">灰色标签</k-tag>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KTag } from '@/components/Tag';
-</script>
-```
-
-## 描边标签
-
-通过 `effect` 属性设置为 `'plain'` 可以创建描边标签。
-
-```vue
-<template>
-  <div>
-    <k-tag effect="plain">默认描边</k-tag>
-    <k-tag effect="plain" type="success">成功描边</k-tag>
-    <k-tag effect="plain" type="warning">警告描边</k-tag>
-    <k-tag effect="plain" type="error">错误描边</k-tag>
-    <k-tag effect="plain" type="info">信息描边</k-tag>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KTag } from '@/components/Tag';
-</script>
-```
-
-## 带图标标签
-
-可以在标签中插入图标。
-
-```vue
-<template>
-  <div>
-    <k-tag type="success">
-      <k-icon name="check-circle"></k-icon>
-      成功标签
-    </k-tag>
-    <k-tag type="warning">
-      <k-icon name="warning-circle"></k-icon>
-      警告标签
-    </k-tag>
-    <k-tag type="error">
-      <k-icon name="close-circle"></k-icon>
-      错误标签
-    </k-tag>
-    <k-tag type="info">
-      <k-icon name="info-circle"></k-icon>
-      信息标签
-    </k-tag>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KTag } from '@/components/Tag';
-import { KIcon } from '@/components/Icon';
-</script>
-```
-
-## Props
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| type | 标签类型 | `string` | success / warning / error / info | - |
-| effect | 标签效果 | `string` | dark / light / plain | light |
-| size | 标签大小 | `string` | large / default / small | default |
-| closable | 是否可关闭 | `boolean` | - | false |
-| hit | 是否有边框描边 | `boolean` | - | false |
-| disableTransitions | 是否禁用渐变动画 | `boolean` | - | false |
-| color | 自定义标签颜色 | `string` | - | - |
-| className | 自定义类名 | `string` | - | '' |
-| style | 自定义样式 | `Object` | - | {} |
-
-## Events
-
-| 事件名 | 说明 | 回调参数 |
-| --- | --- | --- |
+| 事件名 | 描述 | 回调参数 |
+|--------|------|----------|
 | close | 关闭标签时触发 | - |
-| click | 点击标签时触发 | - |
-
-## Slots
-
-| 插槽名 | 说明 |
-| --- | --- |
-| default | 标签内容 |
\ No newline at end of file
+| click | 点击标签时触发 | - |
\ No newline at end of file
diff --git a/src/components/Tag/index.scss b/src/components/Tag/index.scss
index cdfe33b..ff56670 100644
--- a/src/components/Tag/index.scss
+++ b/src/components/Tag/index.scss
@@ -6,6 +6,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  // 又没开响应式，不对啊
   height: 22px;
   padding: 0 8px;
   font-size: 12px;
diff --git a/src/components/Text/README.md b/src/components/Text/README.md
index 0668bfc..3ba97c5 100644
--- a/src/components/Text/README.md
+++ b/src/components/Text/README.md
@@ -1,190 +1,94 @@
-# Text 文本
+# Text 文本组件
 
 用于展示文本内容，支持多种尺寸、颜色和样式。
 
-## 基础用法
-
-最基础的文本组件用法。
+## 项目内使用示例
 
 ```vue
 <template>
   <div>
-    <k-text>默认文本</k-text>
-    <k-text type="primary">主要文本</k-text>
-    <k-text type="success">成功文本</k-text>
-    <k-text type="warning">警告文本</k-text>
-    <k-text type="error">错误文本</k-text>
-    <k-text type="info">信息文本</k-text>
+    <!-- 基础用法 -->
+    <div style="margin-bottom: 20px;">
+      <h3>基础用法</h3>
+      <k-text>默认文本</k-text>
+      <k-text type="primary">主要文本</k-text>
+      <k-text type="success">成功文本</k-text>
+      <k-text type="warning">警告文本</k-text>
+      <k-text type="error">错误文本</k-text>
+    </div>
+    
+    <!-- 不同尺寸 -->
+    <div style="margin-bottom: 20px;">
+      <h3>不同尺寸</h3>
+      <k-text size="large">大号文本</k-text>
+      <k-text>默认文本</k-text>
+      <k-text size="small">小号文本</k-text>
+      <k-text size="mini">迷你文本</k-text>
+    </div>
+    
+    <!-- 文本样式 -->
+    <div style="margin-bottom: 20px;">
+      <h3>文本样式</h3>
+      <k-text weight="bold">加粗文本</k-text>
+      <k-text italic>斜体文本</k-text>
+      <k-text underline>下划线文本</k-text>
+      <k-text deleteline>删除线文本</k-text>
+    </div>
+    
+    <!-- 文本截断 -->
+    <div style="margin-bottom: 20px; width: 200px;">
+      <h3>文本截断</h3>
+      <k-text>正常文本内容，不会自动截断</k-text>
+      <k-text ellipsis>很长的文本内容，超出容器宽度时会自动显示省略号</k-text>
+    </div>
+    
+    <!-- 文本对齐 -->
+    <div style="margin-bottom: 20px;">
+      <h3>文本对齐</h3>
+      <k-text align="left">左对齐文本</k-text>
+      <k-text align="center">居中对齐文本</k-text>
+      <k-text align="right">右对齐文本</k-text>
+    </div>
+    
+    <!-- 组合使用 -->
+    <div>
+      <h3>组合使用</h3>
+      <k-text type="success" size="large" weight="bold">大号加粗成功文本</k-text>
+      <k-text type="error" italic underline>错误斜体下划线文本</k-text>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { KText } from '@/components/Text';
+<script setup>
+import { KText } from 'knowai-ui';
 </script>
 ```
 
-## 不同尺寸
+## 参数接口 (Props)
 
-通过 `size` 属性可以设置文本的大小。
+| 参数名 | 类型 | 默认值 | 描述 |
+|--------|------|--------|------|
+| type | string | 'default' | 文本类型，可选值: primary / secondary / success / warning / danger / info |
+| size | string \| number | 'medium' | 文本大小，可选值: large / medium / small |
+| weight | string | 'normal' | 字重，可选值: normal / medium / bold |
+| align | string | 'left' | 文本对齐方式，可选值: left / center / right |
+| underline | boolean | false | 是否有下划线 |
+| deleteline | boolean | false | 是否有删除线 |
+| italic | boolean | false | 是否斜体 |
+| ellipsis | boolean \| number | false | 是否显示省略号 |
+| code | boolean | false | 是否为代码样式 |
+| mark | boolean | false | 是否为标记样式 |
+| strong | boolean | false | 是否加粗 |
+| disabled | boolean | false | 是否禁用 |
+| copyable | boolean | false | 是否可复制 |
+| selectable | boolean | true | 是否可选择 |
 
-```vue
-<template>
-  <div>
-    <k-text size="large">大号文本</k-text>
-    <k-text>默认文本</k-text>
-    <k-text size="small">小号文本</k-text>
-    <k-text size="mini">迷你文本</k-text>
-  </div>
-</template>
+## 插槽 (Slots)
 
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
+| 插槽名 | 描述 |
+|--------|------|
+| default | 文本内容 |
 
-## 字重
+## 事件 (Events)
 
-通过 `bold` 属性可以设置文本是否加粗。
-
-```vue
-<template>
-  <div>
-    <k-text>正常文本</k-text>
-    <k-text bold>加粗文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 斜体
-
-通过 `italic` 属性可以设置文本是否为斜体。
-
-```vue
-<template>
-  <div>
-    <k-text>正常文本</k-text>
-    <k-text italic>斜体文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 下划线
-
-通过 `underline` 属性可以设置文本是否有下划线。
-
-```vue
-<template>
-  <div>
-    <k-text>正常文本</k-text>
-    <k-text underline>下划线文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 删除线
-
-通过 `line-through` 属性可以设置文本是否有删除线。
-
-```vue
-<template>
-  <div>
-    <k-text>正常文本</k-text>
-    <k-text line-through>删除线文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 自定义颜色
-
-通过 `color` 属性可以自定义文本颜色。
-
-```vue
-<template>
-  <div>
-    <k-text color="#f56c6c">红色文本</k-text>
-    <k-text color="#e6a23c">橙色文本</k-text>
-    <k-text color="#67c23a">绿色文本</k-text>
-    <k-text color="#409eff">蓝色文本</k-text>
-    <k-text color="#909399">灰色文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 不同标签
-
-通过 `tag` 属性可以设置渲染的HTML标签。
-
-```vue
-<template>
-  <div>
-    <k-text tag="p">段落文本</k-text>
-    <k-text tag="h1">标题1</k-text>
-    <k-text tag="h2">标题2</k-text>
-    <k-text tag="span">span标签文本</k-text>
-    <k-text tag="div">div标签文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## 组合使用
-
-可以组合使用多种属性。
-
-```vue
-<template>
-  <div>
-    <k-text type="success" size="large" bold>大号加粗成功文本</k-text>
-    <k-text type="error" italic underline>错误斜体下划线文本</k-text>
-    <k-text type="warning" size="small" line-through>小号警告删除线文本</k-text>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { KText } from '@/components/Text';
-</script>
-```
-
-## Props
-
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| type | 文本类型 | `string` | primary / success / warning / error / info | - |
-| size | 文本大小 | `string` | large / default / small / mini | 'default' |
-| bold | 是否加粗 | `boolean` | - | false |
-| italic | 是否斜体 | `boolean` | - | false |
-| underline | 是否有下划线 | `boolean` | - | false |
-| line-through | 是否有删除线 | `boolean` | - | false |
-| color | 自定义文本颜色 | `string` | - | - |
-| tag | HTML标签 | `string` | h1-h6, p, div, span等 | 'span' |
-| className | 自定义类名 | `string` | - | '' |
-| style | 自定义样式 | `Object` | - | {} |
-
-## Slots
-
-| 插槽名 | 说明 |
-| --- | --- |
-| default | 文本内容 |
\ No newline at end of file
+Text组件没有提供事件。
\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1dfb339..7cce0bc 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,6 @@
-// KnowAI UI组件库基础样式
+// KnowAI UI组件库基础样式及全局样式（全局样式覆盖太少，没有充分利用_variables的定义）
 
-// 引入SCSS变量系统
+// 引入SCSS变量系统并供其他scss文件使用（但这里不能打包导出，scss不能作为编译产物）
 @forward './_variables.scss';
 @use './_variables.scss' as *;
 
@@ -11,6 +11,7 @@
   box-sizing: border-box;
 }
 
+// 因为都是原子组件，所以下面的都没怎么用到
 // 基础样式
 body {
   margin: 0;
diff --git a/vite.config.ts b/vite.config.ts
index d00354d..21e719c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import { fileURLToPath, URL } from 'node:url'
 export default defineConfig({
   plugins: [
     vue(),
+    // 这个很重要，要把css带到js文件里面，因为styles要留给全局样式的导出
     cssInjectedByJsPlugin() 
   ],
   resolve: {
@@ -20,12 +21,16 @@ export default defineConfig({
       name: 'knowaiUi',
       fileName: (format) => `knowai-ui.${format}.js`
     },
+    // 为了和类型文件以及sass文件在同一根目录下
     outDir: 'dist/client',
+    // 不让清空
     emptyOutDir: false,
     cssCodeSplit: false, // 插件模式下可以关闭拆分
+    // vue时peer dependency
     rollupOptions: {
       external: ['vue'],
       output: {
+        // 把external变量映射到内部全局
         globals: {
           vue: 'Vue'
         }
diff --git a/vitest.config.ts b/vitest.config.ts
index a75bea3..fe8e192 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -5,12 +5,14 @@ import { fileURLToPath, URL } from 'node:url';
 export default defineConfig({
   plugins: [vue()],
   resolve: {
+    // import.meta是ESM运行时元信息，import.meta.url时当前目录路径
     alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url)),
         '~': fileURLToPath(new URL('./src', import.meta.url))
       },
   },
   test: {
+    // 这里都没用啊，因为组合环境的问题，vitest会出现IPC通信报错，暂时无法解决
     timeout: 60000, // 60秒超时
     globals: true,
     environment: 'jsdom', // Vue组件测试需要浏览器环境