king-design-analyzer 1.0.0

package/components/tablecolumnid.json

@@ -0,0 +1,217 @@
+{
+    "id": "tablecolumnid",
+    "name": "TableColumnId",
+    "displayName": "表格ID列",
+    "category": "data",
+    "description": "用于表格中的ID列展示，支持复制功能和禁用状态。",
+    "importStatement": "import { TableColumnId } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "name",
+            "description": "显示的名称",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "id",
+            "description": "显示的 id",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁止复制功能",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "disabledClickName",
+            "description": "是否置灰名称",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "disabledEditable",
+            "description": "是否置灰编辑按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "type",
+            "description": "样式模式",
+            "type": {
+                "raw": "\"link\" | \"none\"",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"link\"",
+            "allowedValues": [
+                {
+                    "value": "link",
+                    "label": "链接样式",
+                    "isDefault": true
+                },
+                {
+                    "value": "none",
+                    "label": "无样式"
+                }
+            ]
+        },
+        {
+            "name": "editable",
+            "description": "名称是否支持编辑",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        },
+        {
+            "name": "editableTip",
+            "description": "编辑图标的 tooltip 提示，默认编辑",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"编辑\""
+        },
+        {
+            "name": "editableProps",
+            "description": "Editable 组件支持的属性",
+            "type": {
+                "raw": "Record<string, any>",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "to",
+            "description": "链接跳转路径，当 type 为 'link' 时生效，同 router-link 的 to 属性一致；当使用 to 属性进行跳转时，右键菜单栏才会出现 '在新标签页中打开'",
+            "type": {
+                "raw": "string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "target",
+            "description": "链接跳转目标，当 type 为 'link' 且使用 to 时生效，同 a 标签的 target 属性一致",
+            "type": {
+                "raw": "'_blank' | '_self' | '_parent' | '_top'",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "'_self'",
+            "allowedValues": [
+                {
+                    "value": "_blank",
+                    "label": "新窗口打开"
+                },
+                {
+                    "value": "_self",
+                    "label": "当前窗口",
+                    "isDefault": true
+                },
+                {
+                    "value": "_parent",
+                    "label": "父窗口"
+                },
+                {
+                    "value": "_top",
+                    "label": "顶层窗口"
+                }
+            ]
+        },
+        {
+            "name": "maxLines",
+            "description": "名称/ID 展示的最大行数，超出部分会被省略号代替",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "1"
+        }
+    ],
+    "events": [
+        {
+            "name": "click:name",
+            "vueEventName": "@click:name",
+            "description": "当点击名称时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "名称的值"
+                }
+            ],
+            "usageExample": "<TableColumnId @click:name=\"handleClickName\" />"
+        },
+        {
+            "name": "click:id",
+            "vueEventName": "@click:id",
+            "description": "当点击 id 时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "id 的值"
+                }
+            ],
+            "usageExample": "<TableColumnId @click:id=\"handleClickId\" />"
+        },
+        {
+            "name": "change:name",
+            "vueEventName": "@change:name",
+            "description": "当编辑名称，名称内容改变时触发",
+            "payload": [
+                {
+                    "name": "newValue",
+                    "type": "string",
+                    "description": "新的名称值"
+                },
+                {
+                    "name": "oldValue",
+                    "type": "string",
+                    "description": "旧的名称值"
+                }
+            ],
+            "usageExample": "<TableColumnId @change:name=\"(newVal, oldVal) => handleNameChange(newVal, oldVal)\" />"
+        }
+    ],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "id",
+        "column",
+        "table",
+        "表格列"
+    ],
+    "useCases": [
+        "资源列表ID列展示"
+    ]
+}

package/components/tabs.json

@@ -0,0 +1,363 @@
+{
+    "id": "tabs",
+    "name": "Tabs",
+    "displayName": "选项卡",
+    "category": "navigation",
+    "description": "选项卡组件，用于页面内容区域的分组和切换。支持多种样式、可关闭选项卡、切换前拦截等功能。注意：Tabs 仅提供头部样式，内容区域需要使用 v-if 自行切换。",
+    "importStatement": "import { Tabs, Tab } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "被选中的选项卡，可用 v-model 双向绑定",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Tabs v-model=\"activeTab\">"
+        },
+        {
+            "name": "type",
+            "description": "选项卡类型",
+            "type": {
+                "raw": "\"default\" | \"card\" | \"flat-card\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "card",
+                    "flat-card"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认样式",
+                    "isDefault": true
+                },
+                {
+                    "value": "card",
+                    "label": "卡片样式"
+                },
+                {
+                    "value": "flat-card",
+                    "label": "扁平卡片样式"
+                }
+            ],
+            "usageExample": "<Tabs type=\"card\">"
+        },
+        {
+            "name": "size",
+            "description": "选项卡尺寸",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Tabs size=\"small\">"
+        },
+        {
+            "name": "vertical",
+            "description": "是否垂直排列",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Tabs vertical>"
+        },
+        {
+            "name": "closable",
+            "description": "是否展示选项卡关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tabs closable @remove=\"handleRemove\">"
+        },
+        {
+            "name": "beforeChange",
+            "description": "切换选项卡之前的拦截函数，返回 false 阻止切换，支持异步",
+            "type": {
+                "raw": "(value: any) => boolean | Promise<boolean>",
+                "kind": "function",
+                "functionSignature": "(value: any) => boolean | Promise<boolean>"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Tabs :beforeChange=\"handleBeforeChange\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "remove",
+            "vueEventName": "@remove",
+            "description": "关闭选项卡时触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "any",
+                    "description": "被关闭选项卡的 value"
+                }
+            ],
+            "usageExample": "<Tabs @remove=\"handleRemove\">",
+            "handlerExample": "const handleRemove = (value: string) => {\n  const index = tabs.value.indexOf(value);\n  tabs.value.splice(index, 1);\n};"
+        }
+    ],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "Tab",
+            "description": "选项卡项组件",
+            "props": [
+                {
+                    "name": "value",
+                    "description": "选项卡的值，用于标识和选中",
+                    "type": {
+                        "raw": "any",
+                        "kind": "custom"
+                    },
+                    "required": true,
+                    "usageExample": "<Tab value=\"home\">首页</Tab>"
+                },
+                {
+                    "name": "disabled",
+                    "description": "是否禁用该选项卡",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<Tab value=\"tab\" disabled>禁用</Tab>"
+                },
+                {
+                    "name": "to",
+                    "description": "点击标签的跳转地址",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "undefined",
+                    "usageExample": "<Tab value=\"home\" to=\"/home\">首页</Tab>"
+                },
+                {
+                    "name": "closable",
+                    "description": "是否展示该选项卡的关闭按钮",
+                    "type": {
+                        "raw": "boolean",
+                        "kind": "boolean"
+                    },
+                    "required": false,
+                    "default": "false",
+                    "usageExample": "<Tab value=\"tab\" closable>可关闭</Tab>"
+                }
+            ],
+            "events": [
+                {
+                    "name": "click",
+                    "vueEventName": "@click",
+                    "description": "Tab 点击事件，发生在 value 改变之后，disabled 状态不触发",
+                    "payload": [
+                        {
+                            "name": "e",
+                            "type": "MouseEvent",
+                            "description": "原生鼠标事件"
+                        }
+                    ],
+                    "usageExample": "<Tab @click=\"handleClick\">",
+                    "handlerExample": "const handleClick = (e: MouseEvent) => {\n  console.log('Tab 被点击');\n};"
+                }
+            ]
+        }
+    ],
+    "examples": [
+        {
+            "id": "tabs_basic",
+            "title": "基础用法",
+            "description": "基本的选项卡，配合 v-if 切换内容",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('home');\n</script>\n<template>\n  <Tabs v-model=\"activeTab\">\n    <Tab value=\"home\">首页</Tab>\n    <Tab value=\"products\">产品</Tab>\n    <Tab value=\"about\">关于</Tab>\n  </Tabs>\n  \n  <div v-if=\"activeTab === 'home'\">首页内容</div>\n  <div v-else-if=\"activeTab === 'products'\">产品内容</div>\n  <div v-else-if=\"activeTab === 'about'\">关于内容</div>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建基本的选项卡导航"
+        },
+        {
+            "id": "tabs_card",
+            "title": "卡片式选项卡",
+            "description": "卡片样式的选项卡",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('tab1');\n</script>\n<template>\n  <Tabs v-model=\"activeTab\" type=\"card\">\n    <Tab value=\"tab1\">选项卡1</Tab>\n    <Tab value=\"tab2\">选项卡2</Tab>\n    <Tab value=\"tab3\">选项卡3</Tab>\n  </Tabs>\n</template>",
+            "tags": [
+                "card",
+                "type"
+            ],
+            "usedProps": [
+                "value",
+                "type"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用卡片样式的选项卡"
+        },
+        {
+            "id": "tabs_closable",
+            "title": "可关闭选项卡",
+            "description": "支持关闭选项卡",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('tab1');\nconst tabs = ref(['tab1', 'tab2', 'tab3']);\n\nconst handleRemove = (value: string) => {\n  const index = tabs.value.indexOf(value);\n  tabs.value.splice(index, 1);\n  if (activeTab.value === value && tabs.value.length > 0) {\n    activeTab.value = tabs.value[0];\n  }\n};\n</script>\n<template>\n  <Tabs v-model=\"activeTab\" closable @remove=\"handleRemove\">\n    <Tab v-for=\"tab in tabs\" :key=\"tab\" :value=\"tab\">{{ tab }}</Tab>\n  </Tabs>\n</template>",
+            "tags": [
+                "closable",
+                "remove"
+            ],
+            "usedProps": [
+                "value",
+                "closable"
+            ],
+            "usedEvents": [
+                "remove"
+            ],
+            "usedMethods": [],
+            "scenario": "创建可关闭的选项卡"
+        },
+        {
+            "id": "tabs_disabled",
+            "title": "禁用选项卡",
+            "description": "禁用某个选项卡",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('tab1');\n</script>\n<template>\n  <Tabs v-model=\"activeTab\">\n    <Tab value=\"tab1\">可用</Tab>\n    <Tab value=\"tab2\" disabled>禁用</Tab>\n    <Tab value=\"tab3\">可用</Tab>\n  </Tabs>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "value",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用某个选项卡"
+        },
+        {
+            "id": "tabs_vertical",
+            "title": "垂直选项卡",
+            "description": "垂直排列的选项卡",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('tab1');\n</script>\n<template>\n  <div style=\"display: flex;\">\n    <Tabs v-model=\"activeTab\" vertical>\n      <Tab value=\"tab1\">选项1</Tab>\n      <Tab value=\"tab2\">选项2</Tab>\n      <Tab value=\"tab3\">选项3</Tab>\n    </Tabs>\n    <div style=\"padding: 16px;\">\n      内容区域: {{ activeTab }}\n    </div>\n  </div>\n</template>",
+            "tags": [
+                "vertical"
+            ],
+            "usedProps": [
+                "value",
+                "vertical"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建垂直排列的选项卡"
+        },
+        {
+            "id": "tabs_router",
+            "title": "路由导航",
+            "description": "配合路由使用的选项卡",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tabs, Tab } from '@king-design/vue';\n\nconst activeTab = ref('home');\n</script>\n<template>\n  <Tabs v-model=\"activeTab\">\n    <Tab value=\"home\" to=\"/\">首页</Tab>\n    <Tab value=\"products\" to=\"/products\">产品</Tab>\n    <Tab value=\"docs\" to=\"/docs\">文档</Tab>\n  </Tabs>\n</template>",
+            "tags": [
+                "router",
+                "to"
+            ],
+            "usedProps": [
+                "value",
+                "to"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用 to 属性进行路由导航"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "tabs_no_content",
+            "description": "期望 Tabs 自动切换内容",
+            "wrongCode": "<Tabs v-model=\"activeTab\">\n  <Tab value=\"home\">首页内容</Tab> <!-- 期望显示内容 -->\n</Tabs>",
+            "correctCode": "<Tabs v-model=\"activeTab\">\n  <Tab value=\"home\">首页</Tab>\n</Tabs>\n<div v-if=\"activeTab === 'home'\">首页内容</div>",
+            "explanation": "Tabs 仅提供头部样式，内容区域需要使用 v-if 自行切换",
+            "relatedProps": []
+        },
+        {
+            "id": "tabs_missing_value",
+            "description": "Tab 未设置 value",
+            "wrongCode": "<Tab>选项卡</Tab>",
+            "correctCode": "<Tab value=\"tab1\">选项卡</Tab>",
+            "explanation": "每个 Tab 必须设置 value 用于标识",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "tabs_closable_remove",
+            "description": "使用 closable 但未处理 remove 事件",
+            "wrongCode": "<Tabs closable> <!-- 点击关闭不会真正移除 -->",
+            "correctCode": "<Tabs closable @remove=\"handleRemove\">",
+            "explanation": "closable 只显示关闭按钮，需要监听 remove 事件手动移除选项卡",
+            "relatedProps": [
+                "closable"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "选项卡",
+        "tabs",
+        "标签页",
+        "导航",
+        "切换",
+        "tab"
+    ],
+    "useCases": [
+        "页面内容分区",
+        "表单分步",
+        "配置项分组",
+        "数据视图切换",
+        "详情页多维度展示"
+    ],
+    "relatedComponents": [
+        "Tab",
+        "Menu"
+    ]
+}