@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/component-apis/steps.json

@@ -0,0 +1,51 @@
+{
+  "name": "bk-steps",
+  "description": "步骤条组件",
+  "version": "3.0",
+
+  "props": {
+    "curStep": {
+      "type": "number",
+      "default": "1",
+      "description": "当前步骤 (从 1 开始)"
+    },
+    "steps": {
+      "type": "array",
+      "default": "[]",
+      "description": "步骤配置数组"
+    },
+    "direction": {
+      "type": "'horizontal' | 'vertical'",
+      "default": "horizontal",
+      "description": "方向"
+    },
+    "theme": {
+      "type": "'primary' | 'success' | 'warning' | 'danger'",
+      "default": "primary",
+      "description": "主题色"
+    },
+    "size": {
+      "type": "'small'",
+      "default": "undefined",
+      "description": "尺寸"
+    },
+    "controllable": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否可点击切换"
+    }
+  },
+
+  "stepItemProps": {
+    "title": "string - 标题",
+    "icon": "number | VNode - 图标",
+    "description": "string - 描述"
+  },
+
+  "events": {
+    "click": {
+      "params": "(index: number)",
+      "description": "步骤点击时触发 (controllable 为 true 时)"
+    }
+  }
+}

package/knowledge/component-apis/swiper.json

@@ -0,0 +1,51 @@
+{
+  "name": "bk-swiper",
+  "description": "轮播图组件",
+  "version": "3.0",
+
+  "props": {
+    "pics": {
+      "type": "array",
+      "default": "[]",
+      "description": "图片列表"
+    },
+    "list": {
+      "type": "array",
+      "default": "[]",
+      "description": "数据列表 (自定义内容时使用)"
+    },
+    "isLoop": {
+      "type": "boolean",
+      "default": "true",
+      "description": "是否循环播放"
+    },
+    "loopTime": {
+      "type": "number",
+      "default": "8000",
+      "description": "自动播放间隔 (ms)"
+    },
+    "height": {
+      "type": "number",
+      "default": "undefined",
+      "description": "高度"
+    },
+    "width": {
+      "type": "number",
+      "default": "undefined",
+      "description": "宽度"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "description": "自定义轮播内容"
+    }
+  },
+
+  "events": {
+    "index-change": {
+      "params": "(index: number)",
+      "description": "索引变化时触发"
+    }
+  }
+}

package/knowledge/component-apis/switcher.json

@@ -0,0 +1,93 @@
+{
+  "name": "bk-switcher",
+  "description": "开关组件",
+  "version": "3.0",
+
+  "props": {
+    "modelValue": {
+      "type": "boolean | string | number",
+      "default": "false",
+      "description": "绑定值，支持 v-model"
+    },
+    "trueValue": {
+      "type": "boolean | string | number",
+      "default": "true",
+      "description": "选中时的值"
+    },
+    "falseValue": {
+      "type": "boolean | string | number",
+      "default": "false",
+      "description": "未选中时的值"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否禁用"
+    },
+    "theme": {
+      "type": "'primary'",
+      "default": "undefined",
+      "description": "主题"
+    },
+    "size": {
+      "type": "'small' | 'large'",
+      "default": "undefined",
+      "description": "尺寸"
+    },
+    "showText": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否显示文字"
+    },
+    "onText": {
+      "type": "string",
+      "default": "ON",
+      "description": "开启时的文字"
+    },
+    "offText": {
+      "type": "string",
+      "default": "OFF",
+      "description": "关闭时的文字"
+    },
+    "isOutline": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否为线框样式"
+    },
+    "isSquare": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否为方形"
+    },
+    "beforeChange": {
+      "type": "function",
+      "default": "undefined",
+      "description": "切换前回调，返回 false 或 Promise.reject 阻止切换"
+    }
+  },
+
+  "events": {
+    "update:modelValue": {
+      "params": "(value)",
+      "description": "值变化时触发"
+    },
+    "change": {
+      "params": "(checked: boolean)",
+      "description": "开关状态变化时触发"
+    }
+  },
+
+  "visualMapping": {
+    "description": "设计稿视觉特征到属性的映射",
+    "绿色圆角开关": "默认样式，无需额外属性",
+    "蓝色圆角开关": "theme=\"primary\"",
+    "小尺寸开关": "size=\"small\"",
+    "带文字ON/OFF": "show-text",
+    "方形开关": "is-square"
+  },
+
+  "tableUsage": {
+    "description": "在表格中使用开关的示例",
+    "code": "<template #enabled=\"{ row }\">\n  <bk-switcher\n    v-model=\"row.enabled\"\n    size=\"small\"\n    @change=\"(val) => handleToggle(row, val)\"\n  />\n</template>"
+  }
+}

package/knowledge/component-apis/tab.json

@@ -0,0 +1,116 @@
+{
+  "name": "bk-tab",
+  "description": "选项卡组件",
+  "version": "3.0",
+
+  "props": {
+    "active": {
+      "type": "string | number",
+      "default": "undefined",
+      "description": "当前激活的标签名，支持 v-model:active"
+    },
+    "type": {
+      "type": "'border-card' | 'card' | 'card-grid' | 'card-tab' | 'unborder-card'",
+      "default": "border-card",
+      "description": "选项卡类型 (从源码提取)"
+    },
+    "tabPosition": {
+      "type": "'top' | 'right' | 'bottom' | 'left'",
+      "default": "top",
+      "description": "标签位置"
+    },
+    "closable": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否可关闭"
+    },
+    "addable": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否可新增"
+    },
+    "sortable": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否可拖拽排序"
+    },
+    "scrollStep": {
+      "type": "number",
+      "default": "200",
+      "description": "标签滚动步长"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "description": "标签面板，放置 bk-tab-panel"
+    },
+    "add": {
+      "description": "自定义新增按钮"
+    },
+    "setting": {
+      "description": "设置区域插槽"
+    }
+  },
+
+  "events": {
+    "update:active": {
+      "params": "(name: string | number)",
+      "description": "激活标签变化"
+    },
+    "change": {
+      "params": "(name: string | number)",
+      "description": "切换标签时触发"
+    },
+    "add": {
+      "params": "()",
+      "description": "点击新增按钮时触发"
+    },
+    "remove": {
+      "params": "(name: string | number)",
+      "description": "关闭标签时触发"
+    }
+  },
+
+  "relatedComponents": {
+    "bk-tab-panel": {
+      "props": {
+        "name": "string | number - 标签名 (必填，唯一标识)",
+        "label": "string - 标签显示文字",
+        "disabled": "boolean - 是否禁用",
+        "closable": "boolean - 是否可关闭",
+        "visible": "boolean - 是否可见"
+      }
+    }
+  },
+
+  "visualMapping": {
+    "description": "设计稿视觉特征到属性的映射 - 仔细看Tab选项是否有边框包裹",
+    "选项被矩形边框包裹": "type=\"border-card\"",
+    "选项无边框自由排列": "type=\"unborder-card\"",
+    "选项有独立卡片背景": "type=\"card\"",
+    "选中项是蓝色下划线": "type=\"unborder-card\"",
+    "选中项是蓝色文字+边框高亮": "type=\"border-card\""
+  },
+
+  "filterUsage": {
+    "description": "作为表格筛选使用时的示例 (如：全部/启用/停用)",
+    "withBorder": {
+      "description": "有边框包裹的筛选Tab（设计稿中Tab选项被矩形框包住）",
+      "code": "<bk-tab v-model:active=\"activeTab\" type=\"border-card\" @change=\"handleFilter\">\n  <bk-tab-panel name=\"all\" :label=\"`全部(${totalCount})`\" />\n  <bk-tab-panel name=\"enabled\" :label=\"`启用(${enabledCount})`\" />\n  <bk-tab-panel name=\"disabled\" :label=\"`停用(${disabledCount})`\" />\n</bk-tab>"
+    },
+    "noBorder": {
+      "description": "无边框的筛选Tab（选项自由排列，选中项有下划线）",
+      "code": "<bk-tab v-model:active=\"activeTab\" type=\"unborder-card\" @change=\"handleFilter\">\n  <bk-tab-panel name=\"all\" :label=\"`全部(${totalCount})`\" />\n  <bk-tab-panel name=\"enabled\" :label=\"`启用(${enabledCount})`\" />\n  <bk-tab-panel name=\"disabled\" :label=\"`停用(${disabledCount})`\" />\n</bk-tab>"
+    },
+    "判断规则": "如果设计稿中Tab选项被一个矩形边框包住 → 用 border-card；如果选项自由排列无边框 → 用 unborder-card"
+  },
+
+  "commonMistakes": [
+    {
+      "wrong": "v-model=\"activeTab\"",
+      "correct": "v-model:active=\"activeTab\"",
+      "reason": "bk-tab 使用 v-model:active，不是 v-model"
+    }
+  ]
+}

package/knowledge/component-apis/table.json

@@ -0,0 +1,215 @@
+{
+  "name": "bk-table",
+  "description": "表格组件，用于展示列表数据",
+  "version": "3.0",
+
+  "props": {
+    "data": {
+      "type": "array",
+      "default": "[]",
+      "description": "表格数据"
+    },
+    "columns": {
+      "type": "Column[]",
+      "default": "[]",
+      "description": "列配置"
+    },
+    "height": {
+      "type": "string | number",
+      "default": "auto",
+      "description": "表格高度"
+    },
+    "maxHeight": {
+      "type": "string | number",
+      "default": "auto",
+      "description": "表格最大高度"
+    },
+    "stripe": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否为斑马纹"
+    },
+    "border": {
+      "type": "string | array",
+      "default": "['row']",
+      "description": "边框配置: row | col | outer | none"
+    },
+    "showHead": {
+      "type": "boolean",
+      "default": "true",
+      "description": "是否显示表头"
+    },
+    "rowKey": {
+      "type": "string | function",
+      "default": "$index",
+      "description": "行数据唯一标识"
+    },
+    "pagination": {
+      "type": "boolean | object",
+      "default": "false",
+      "description": "分页配置"
+    },
+    "remotePagination": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否远程分页"
+    },
+    "virtualEnabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否启用虚拟滚动"
+    },
+    "showOverflowTooltip": {
+      "type": "boolean | object",
+      "default": "false",
+      "description": "内容过长时是否显示 tooltip"
+    },
+    "emptyText": {
+      "type": "string",
+      "default": "暂无数据",
+      "description": "空数据提示文字"
+    },
+    "settings": {
+      "type": "boolean | object",
+      "default": "false",
+      "description": "表格设置 (列显隐、密度等)"
+    },
+    "rowDraggable": {
+      "type": "boolean | object | function",
+      "default": "false",
+      "description": "是否可拖拽排序"
+    },
+    "rowHeight": {
+      "type": "number | function",
+      "default": "42",
+      "description": "行高 (从源码)"
+    },
+    "headHeight": {
+      "type": "number",
+      "default": "42",
+      "description": "表头高度 (从源码)"
+    },
+    "columnPick": {
+      "type": "'single' | 'multi' | 'disabled'",
+      "default": "disabled",
+      "description": "列选中方式 (从源码)"
+    },
+    "rowHover": {
+      "type": "'highlight' | 'auto'",
+      "default": "highlight",
+      "description": "行悬停样式 (从源码)"
+    },
+    "shiftMultiChecked": {
+      "type": "boolean",
+      "default": "false",
+      "description": "shift多选 (从源码)"
+    },
+    "acrossAll": {
+      "type": "boolean",
+      "default": "false",
+      "description": "跨页全选 (从源码)"
+    }
+  },
+
+  "slots": {
+    "empty": {
+      "description": "空数据插槽"
+    },
+    "prepend": {
+      "description": "表格头部插入内容"
+    },
+    "append": {
+      "description": "表格尾部插入内容"
+    }
+  },
+
+  "events": {
+    "row-click": {
+      "params": "(event, row, index)",
+      "description": "行点击事件"
+    },
+    "cell-click": {
+      "params": "(event, row, column, index)",
+      "description": "单元格点击事件"
+    },
+    "selection-change": {
+      "params": "(selection: any[])",
+      "description": "选择项变化"
+    },
+    "sort-change": {
+      "params": "({ column, prop, order })",
+      "description": "排序变化"
+    },
+    "page-change": {
+      "params": "(page: number)",
+      "description": "分页变化"
+    },
+    "page-limit-change": {
+      "params": "(limit: number)",
+      "description": "每页条数变化"
+    },
+    "scroll-bottom": {
+      "params": "()",
+      "description": "滚动到底部"
+    }
+  },
+
+  "columnProps": {
+    "label": "列标题",
+    "field": "字段名 (或 prop)",
+    "width": "列宽 (number | string)",
+    "minWidth": "最小列宽",
+    "fixed": "固定列: left | right",
+    "type": "列类型: selection | index | expand",
+    "sort": "排序配置: true | { value: 'asc' | 'desc' | null }",
+    "filter": "筛选配置: { list: [{ text, value }], checked?: [] }",
+    "render": "自定义渲染函数: (cell, row, index) => VNode",
+    "showOverflowTooltip": "是否显示 tooltip (长文本省略时悬浮显示)"
+  },
+
+  "paginationConfig": {
+    "description": "分页配置对象，用于 :pagination 属性",
+    "props": {
+      "current": "当前页码",
+      "count": "总条数",
+      "limit": "每页条数",
+      "showLimit": "是否显示每页条数选择器 (默认 true)",
+      "showTotalCount": "是否显示总条数 (默认 false)",
+      "location": "分页信息位置: left | right (默认 right)",
+      "limitList": "每页条数选项: [10, 20, 50, 100]",
+      "small": "是否使用小尺寸"
+    },
+    "example": {
+      "leftTotalCount": ":pagination=\"{ current: 1, count: 198, limit: 10, showTotalCount: true, location: 'left' }\""
+    }
+  },
+
+  "settingsConfig": {
+    "description": "表格设置配置，启用后表头右侧显示齿轮图标",
+    "props": {
+      "fields": "可配置的列: [{ label, field, disabled? }]",
+      "checked": "默认选中的列",
+      "size": "行高: small | medium | large"
+    }
+  },
+
+  "commonMistakes": [
+    {
+      "wrong": "@page-change",
+      "correct": "@page-value-change",
+      "reason": "事件名是 page-value-change，不是 page-change"
+    },
+    {
+      "wrong": ":remote-pagination=\"true\" 但没有监听分页事件",
+      "correct": "必须同时监听 @page-value-change 和 @page-limit-change",
+      "reason": "远程分页需要手动处理分页逻辑"
+    }
+  ],
+
+  "slotNaming": {
+    "description": "自定义列插槽命名规则",
+    "rule": "插槽名 = 列的 field 值",
+    "example": "列 { field: 'source' } 对应 <template #source=\"{ row }\">",
+    "params": "{ row, column, index, cell }"
+  }
+}

package/knowledge/component-apis/tag-input.json

@@ -0,0 +1,110 @@
+{
+  "name": "bk-tag-input",
+  "description": "标签输入框组件",
+  "version": "3.0",
+
+  "props": {
+    "modelValue": {
+      "type": "array",
+      "default": "[]",
+      "description": "绑定值，支持 v-model"
+    },
+    "list": {
+      "type": "array",
+      "default": "[]",
+      "description": "候选项列表"
+    },
+    "placeholder": {
+      "type": "string",
+      "default": "请输入",
+      "description": "占位文本"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否禁用"
+    },
+    "clearable": {
+      "type": "boolean",
+      "default": "true",
+      "description": "是否可清空"
+    },
+    "hasDeleteIcon": {
+      "type": "boolean",
+      "default": "true",
+      "description": "标签是否显示删除图标"
+    },
+    "allowCreate": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否允许自定义标签"
+    },
+    "maxData": {
+      "type": "number",
+      "default": "-1",
+      "description": "最大标签数，-1 为不限制"
+    },
+    "saveKey": {
+      "type": "string",
+      "default": "id",
+      "description": "列表数据中值的键名"
+    },
+    "displayKey": {
+      "type": "string",
+      "default": "name",
+      "description": "列表数据中显示文本的键名"
+    },
+    "searchKey": {
+      "type": "string | array",
+      "default": "name",
+      "description": "搜索时匹配的键名"
+    },
+    "separator": {
+      "type": "string",
+      "default": "undefined",
+      "description": "分隔符，用于快速输入"
+    },
+    "trigger": {
+      "type": "'focus' | 'search'",
+      "default": "search",
+      "description": "下拉框触发方式"
+    },
+    "collapseTags": {
+      "type": "boolean",
+      "default": "false",
+      "description": "是否折叠标签"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "description": "自定义标签内容"
+    },
+    "suffix": {
+      "description": "后缀图标"
+    }
+  },
+
+  "events": {
+    "update:modelValue": {
+      "params": "(value: array)",
+      "description": "值变化时触发"
+    },
+    "change": {
+      "params": "(value: array)",
+      "description": "值改变时触发"
+    },
+    "select": {
+      "params": "(item)",
+      "description": "选中标签时触发"
+    },
+    "remove": {
+      "params": "(item)",
+      "description": "删除标签时触发"
+    },
+    "blur": {
+      "params": "(event)",
+      "description": "失去焦点时触发"
+    }
+  }
+}