@blueking/bkui-knowledge 0.0.1-beta.13 → 0.0.1-beta.15

package/README.md

@@ -112,12 +112,18 @@ MCP 服务启动时，skills 会自动同步到用户项目：
 
 ## 使用方式
 
-### 推荐：@bkui-knowledge/BKUI-EXPERT 或 /bkui-knowledge/BKUI-EXPERT (设计稿还原 / 写组件)
+### Vue3 推荐：@bkui-knowledge/BKUI-EXPERT 或 /bkui-knowledge/BKUI-EXPERT (设计稿还原 / 写组件)
 
 ```
 [粘贴设计稿图片 或 描述需求]
 /bkui-knowledge/BKUI-EXPERT
 ```
+### Vue2 推荐：@bkui-knowledge/BKUI-EXPERT-VUE2 或 /bkui-knowledge/BKUI-EXPERT-VUE2 (设计稿还原 / 写组件)
+
+```
+[粘贴设计稿图片 或 描述需求]
+/bkui-knowledge/BKUI-EXPERT-VUE2
+```
 
 **效果：**
 
@@ -130,7 +136,8 @@ MCP 服务启动时，skills 会自动同步到用户项目：
 
 | 命令                                                           | 作用                                   | 推荐场景                |
 | -------------------------------------------------------------- | -------------------------------------- | ----------------------- |
-| `@bkui-knowledge/BKUI-EXPERT` or `/bkui-knowledge/BKUI-EXPERT` | 设计稿还原专家模式，引导 AI 按步骤执行 | **写组件 / 还原设计稿** |
+| `@bkui-knowledge/BKUI-EXPERT` or `/bkui-knowledge/BKUI-EXPERT` | 设计稿还原专家模式(Vue3组件库)，引导 AI 按步骤执行 | **写组件 / 还原设计稿** |
+| `@bkui-knowledge/BKUI-EXPERT-VUE2` or `/bkui-knowledge/BKUI-EXPERT-VUE2` | 设计稿还原专家模式(Vue2组件库) | **写组件 / 还原设计稿** |
 
 ### 直接对话 + 明确指定
 
@@ -155,8 +162,10 @@ MCP 服务启动时，skills 会自动同步到用户项目：
 | --------------------- | -------------------------------- | ----- |
 | `get_knowledge_index` | 获取完整索引                     | L0    |
 | `get_skill`           | 获取技能文档 (Markdown + assets) | L1    |
-| `get_component_api`   | 获取组件 API (JSON)              | L2    |
+| `get_component_api`   | 获取 Vue3 组件 API (JSON)              | L2    |
+｜ `get_component_api_vue2` | 获取 Vue2 组件 API (JSON)              | L2    |
 | `batch_load`          | 批量加载多个资源                 | L1+L2 |
+| `batch_load_vue2`     | 批量加载 vue2 组件库多个组件 | L2 |
 | `sync_skills`         | 查看 skills 同步状态和信息       | -     |
 
 ### 组件示例 (Resources) - L3 层

package/knowledge/agents/chat-x-code-reviewer.md

@@ -0,0 +1,156 @@
+---
+name: chat-x-code-reviewer
+description: Chat-X 组件库代码审查专家。在编写或修改代码后主动进行代码审查，检查代码质量、安全性、Vue 3/TypeScript 最佳实践和组件库规范。使用此 subagent 进行代码 review、安全检查和质量评估。
+---
+
+你是 @blueking/chat-x 组件库的高级代码审查专家，负责确保代码质量、安全性和可维护性。
+
+## 审查流程
+
+当被调用时：
+
+1. 运行 `git diff` 或 `git diff --cached` 查看最近的变更
+2. 聚焦于修改的文件
+3. 立即开始审查
+
+## 审查清单
+
+### 一、代码质量
+
+#### 1.1 可读性
+
+- [ ] 变量和函数命名是否清晰、有意义
+- [ ] 代码逻辑是否易于理解
+- [ ] 复杂逻辑是否有注释说明
+- [ ] 是否遵循单一职责原则
+
+#### 1.2 可维护性
+
+- [ ] 是否有重复代码（违反 DRY 原则）
+- [ ] 函数是否过长（建议不超过 50 行）
+- [ ] 嵌套层级是否过深（建议不超过 3 层）
+- [ ] 是否有魔法数字或硬编码字符串
+
+#### 1.3 TypeScript 规范
+
+- [ ] 类型定义是否完整，避免使用 `any`
+- [ ] 接口和类型是否正确导出
+- [ ] 泛型使用是否恰当
+- [ ] 是否有类型断言滥用
+
+### 二、Vue 3 最佳实践
+
+#### 2.1 组合式 API (Composition API)
+
+- [ ] 是否正确使用 `ref` 和 `reactive`
+- [ ] 计算属性是否用于派生状态
+- [ ] 侦听器是否有清理逻辑
+- [ ] 组合函数是否遵循 `use` 前缀命名
+
+#### 2.2 组件设计
+
+- [ ] Props 是否有完整的类型定义和默认值
+- [ ] Emits 是否声明并使用类型化
+- [ ] 是否滥用 `$parent`、`$refs`
+- [ ] 组件是否保持单一职责
+
+#### 2.3 模板规范
+
+- [ ] 是否正确使用 `v-if` vs `v-show`
+- [ ] 列表渲染是否有唯一的 `key`
+- [ ] 是否避免在模板中使用复杂表达式
+- [ ] 指令使用是否规范
+
+### 三、安全检查（重点）
+
+#### 3.1 XSS 防护
+
+- [ ] 禁止直接使用 `v-html` 渲染用户输入
+- [ ] 检查 `innerHTML`、`outerHTML`、`insertAdjacentHTML` 使用
+- [ ] 动态属性绑定是否安全（特别是 `href`、`src`）
+- [ ] 事件属性是否来自可信来源
+
+#### 3.2 URL 安全
+
+- [ ] 外部链接是否使用 `rel="noopener noreferrer"`
+- [ ] 用户输入的 URL 是否经过校验
+- [ ] 是否防止 `javascript:` 协议注入
+- [ ] 重定向是否使用白名单校验
+
+#### 3.3 敏感信息
+
+- [ ] 禁止在代码中硬编码密钥、Token
+- [ ] 敏感数据是否存储在 localStorage/sessionStorage
+- [ ] 错误信息是否暴露内部实现细节
+- [ ] 日志是否包含敏感信息
+
+#### 3.4 动态代码执行
+
+- [ ] 禁止使用 `eval()`、`new Function()`
+- [ ] 定时器是否使用函数而非字符串
+- [ ] 动态 import 是否使用白名单
+
+#### 3.5 原型污染
+
+- [ ] 对象合并是否过滤危险键（`__proto__`、`constructor`、`prototype`）
+- [ ] JSON 解析后是否清理危险属性
+
+### 四、组件库规范
+
+#### 4.1 API 设计
+
+- [ ] Props 命名是否一致且符合约定
+- [ ] 事件命名是否使用 kebab-case
+- [ ] Slot 设计是否合理
+- [ ] 是否提供足够的自定义能力
+
+#### 4.2 样式规范
+
+- [ ] 是否使用 BEM 或其他命名约定
+- [ ] 是否避免使用 `!important`
+- [ ] 样式是否有作用域隔离
+- [ ] 是否支持主题定制
+
+#### 4.3 文档和测试
+
+- [ ] 是否有完整的 JSDoc 注释
+- [ ] 是否有对应的单元测试
+- [ ] 边界情况是否有测试覆盖
+
+### 五、性能考虑
+
+- [ ] 是否有不必要的响应式数据
+- [ ] 大列表是否使用虚拟滚动
+- [ ] 图片是否懒加载
+- [ ] 是否有内存泄漏风险（事件监听器清理）
+- [ ] 计算属性是否被缓存利用
+
+## 输出格式
+
+将反馈按优先级组织：
+
+### 🔴 严重问题（必须修复）
+
+安全漏洞、严重 bug、会导致功能失效的问题
+
+### 🟡 警告（应该修复）
+
+代码规范问题、潜在风险、影响可维护性的问题
+
+### 🟢 建议（考虑改进）
+
+可以优化的地方、最佳实践建议、代码风格统一
+
+对于每个问题：
+
+1. 指出问题位置（文件和行号）
+2. 说明问题原因
+3. 提供具体的修复建议和代码示例
+
+## 审查原则
+
+- 保持客观，基于事实而非偏好
+- 解释"为什么"而不仅仅是"是什么"
+- 提供可操作的建议
+- 认可好的代码设计
+- 区分"必须修复"和"建议改进"

package/knowledge/commands/bk-monitor-create-component.md

@@ -0,0 +1,247 @@
+# 组件模板创建助手
+
+根据用户意图和当前文件位置，快速创建符合 bk-monitor 项目规范的组件模板。
+
+## 执行步骤
+
+### 1. 分析用户意图和上下文
+
+#### 1.1 获取目标信息
+
+1. **目标文件名**（按优先级）：
+   - 用户提供了文件名 → 直接使用
+   - 用户未提供但有打开的文件 → 使用当前打开的文件名（去掉扩展名）
+   - 用户未提供且没有打开的文件 → 询问组件名称
+
+2. **目标目录**（按优先级）：
+   - 用户明确指定的目录 → 直接使用
+   - 用户未指定但有打开的文件 → 使用当前打开文件所在的目录
+   - 用户未指定且没有打开的文件 → 询问目标目录
+
+3. **文件格式**：
+   - 默认使用 `.tsx` 格式
+   - 仅当用户明确要求时使用 `.vue` 格式
+
+#### 1.2 判断 Vue 版本
+
+**规则**：
+- 如果目标路径包含 `src/trace` → **Vue3 组件**
+- 其他路径（如 `src/monitor-pc`、`src/fta-solutions`、`src/apm` 等）→ **Vue2 组件**
+
+#### 1.3 文件名规范
+
+- 文件名使用 **kebab-case**（如 `field-type-icon.tsx`）
+- 组件名使用 **PascalCase**（如 `FieldTypeIcon`）
+- scss 类名使用 **kebab-case**（如 `.field-type-icon`）
+
+**文件名转换示例**：
+| 用户输入 | 文件名 | 组件名 | scss 类名 |
+|---------|--------|--------|-----------|
+| `FieldTypeIcon` | `field-type-icon.tsx` | `FieldTypeIcon` | `.field-type-icon` |
+| `field-type-icon` | `field-type-icon.tsx` | `FieldTypeIcon` | `.field-type-icon` |
+| `fieldTypeIcon` | `field-type-icon.tsx` | `FieldTypeIcon` | `.field-type-icon` |
+
+### 2. 检查并创建文件
+
+1. **检查文件是否存在**：
+   - 如果文件不存在 → **直接创建**，无需任何确认
+   - 如果文件已存在 → **询问用户是否覆盖**，等待确认后再创建
+
+2. **创建文件**：
+   - 同时创建 `.tsx`（或 `.vue`）和 `.scss` 文件
+
+> **注意**：`.vue` 格式仅在用户明确要求时使用，默认使用 `.tsx` 格式。
+
+### 3. 文件模板
+
+#### 3.1 Vue3 组件模板（src/trace 目录）
+
+**TSX 文件模板**：
+
+```tsx
+import { defineComponent } from 'vue';
+
+import './<文件名>.scss';
+
+export default defineComponent({
+  name: '<组件名>',
+  props: {},
+  emits: [],
+  setup(props, { emit }) {
+    return {};
+  },
+  render() {
+    return (
+      <div class="<scss类名>">
+        {/* TODO: 组件内容 */}
+      </div>
+    );
+  },
+});
+```
+
+#### 3.2 Vue2 组件模板（非 src/trace 目录）
+
+**TSX 文件模板**（默认）：
+
+```tsx
+import { Component, Emit, Prop, Watch } from 'vue-property-decorator';
+import { Component as tsc } from 'vue-tsx-support';
+
+import './<文件名>.scss';
+
+interface I<组件名>Props {
+  // TODO: 定义 props 类型
+}
+
+interface I<组件名>Events {
+  // TODO: 定义 events 类型
+}
+
+@Component({
+  name: '<组件名>',
+})
+export default class <组件名> extends tsc<I<组件名>Props, I<组件名>Events> {
+  // @Prop({ type: String, default: '' }) propName: string;
+
+  render() {
+    return (
+      <div class="<scss类名>">
+        {/* TODO: 组件内容 */}
+      </div>
+    );
+  }
+}
+```
+
+**Vue 文件模板**（仅在用户明确要求时使用）：
+
+```vue
+<template>
+  <div class="<scss类名>">
+    <!-- TODO: 组件内容 -->
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Emit, Watch } from 'vue-property-decorator';
+import { Component as tsc } from 'vue-tsx-support';
+
+interface I<组件名>Props {
+  // TODO: 定义 props 类型
+}
+
+interface I<组件名>Events {
+  // TODO: 定义 events 类型
+}
+
+@Component({
+  name: '<组件名>',
+})
+export default class <组件名> extends tsc<I<组件名>Props, I<组件名>Events> {
+  // @Prop({ type: String, default: '' }) propName: string;
+}
+</script>
+
+<style lang="scss" scoped>
+@import './<文件名>.scss';
+</style>
+```
+
+> **注意**：使用 `.vue` 格式时，样式可以选择：
+> 1. 在 `<style>` 标签中直接写样式
+> 2. 或者通过 `@import` 引入同名 scss 文件
+
+#### 3.3 SCSS 文件模板（通用）
+
+```scss
+.<scss类名> {
+  // TODO: 样式内容
+}
+```
+
+### 4. 创建完成
+
+创建完成后，向用户展示：
+
+```
+✅ 组件创建成功！
+
+📁 已创建的文件：
+- <组件文件路径>
+- <样式文件路径>
+
+🎯 下一步：
+1. 在组件文件中定义 props 和 emits
+2. 在 render 方法中编写组件模板
+3. 在 scss 文件中编写样式
+```
+
+## 快捷使用
+
+直接执行此命令，AI 会自动：
+
+1. 根据用户当前打开的文件判断目标目录和 Vue 版本
+2. 如果未提供组件名：
+   - 有打开的文件 → 使用当前文件名，直接创建
+   - 没有打开的文件 → 询问组件名和目录
+3. 如果提供了组件名 → 直接创建
+4. 仅当文件已存在时才询问是否覆盖
+
+## 示例
+
+### 示例 1：在 trace 目录创建 Vue3 组件
+
+```
+用户：帮我创建一个 trace-list 组件
+当前位置：src/trace/pages/xxx/
+
+→ 创建 Vue3 组件：
+  - src/trace/pages/xxx/trace-list.tsx
+  - src/trace/pages/xxx/trace-list.scss
+```
+
+### 示例 2：在 monitor-pc 目录创建 Vue2 组件
+
+```
+用户：创建 DataTable 组件
+当前位置：src/monitor-pc/components/
+
+→ 创建 Vue2 组件：
+  - src/monitor-pc/components/data-table.tsx
+  - src/monitor-pc/components/data-table.scss
+```
+
+### 示例 3：基于当前打开的文件创建组件
+
+```
+用户：/create-component（未提供组件名）
+当前打开：src/trace/pages/my-page.tsx
+
+→ 自动使用文件名 my-page，在同目录创建：
+  - src/trace/pages/my-page.tsx（如已存在则询问覆盖）
+  - src/trace/pages/my-page.scss
+```
+
+### 示例 4：使用 .vue 格式创建组件
+
+```
+用户：创建一个 config-panel 组件，用 .vue 格式
+当前位置：src/monitor-pc/pages/xxx/
+
+→ 创建 Vue2 组件（.vue 格式）：
+  - src/monitor-pc/pages/xxx/config-panel.vue
+  - src/monitor-pc/pages/xxx/config-panel.scss（可选）
+```
+
+## 注意事项
+
+1. **不要覆盖**：如果文件已存在，需要提醒用户并询问是否覆盖
+2. **遵循规范**：
+   - 文件名使用 kebab-case
+   - 组件名使用 PascalCase
+   - scss 第一个类名与文件名同名
+3. **文件格式**：
+   - 默认使用 `.tsx` 格式
+   - `.vue` 格式仅在用户明确要求时使用
+   - Vue3（src/trace 目录）只支持 `.tsx` 格式