king-design-analyzer 1.0.0

package/components/progress.json

@@ -0,0 +1,354 @@
+{
+    "id": "progress",
+    "name": "Progress",
+    "displayName": "进度条",
+    "category": "feedback",
+    "description": "进度条组件，用于展示操作进度或任务完成状态。支持条形和圆形两种类型、多种状态颜色、自定义颜色配置等功能。",
+    "importStatement": "import { Progress } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "percent",
+            "description": "当前百分比 (0-100)",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Progress :percent=\"50\" />"
+        },
+        {
+            "name": "type",
+            "description": "进度条类型",
+            "type": {
+                "raw": "\"bar\" | \"circle\"",
+                "kind": "union",
+                "unionTypes": [
+                    "bar",
+                    "circle"
+                ]
+            },
+            "required": false,
+            "default": "\"bar\"",
+            "allowedValues": [
+                {
+                    "value": "bar",
+                    "label": "条形进度条",
+                    "isDefault": true
+                },
+                {
+                    "value": "circle",
+                    "label": "圆形进度条"
+                }
+            ],
+            "usageExample": "<Progress type=\"circle\" :percent=\"75\" />"
+        },
+        {
+            "name": "status",
+            "description": "进度条状态，决定颜色",
+            "type": {
+                "raw": "\"success\" | \"error\" | \"active\" | \"normal\" | \"warning\"",
+                "kind": "union",
+                "unionTypes": [
+                    "success",
+                    "error",
+                    "active",
+                    "normal",
+                    "warning"
+                ]
+            },
+            "required": false,
+            "default": "\"active\"",
+            "allowedValues": [
+                {
+                    "value": "active",
+                    "label": "活动状态（蓝色动画）",
+                    "isDefault": true
+                },
+                {
+                    "value": "normal",
+                    "label": "正常状态"
+                },
+                {
+                    "value": "success",
+                    "label": "成功状态（绿色）"
+                },
+                {
+                    "value": "warning",
+                    "label": "警告状态（橙色）"
+                },
+                {
+                    "value": "error",
+                    "label": "错误状态（红色）"
+                }
+            ],
+            "usageExample": "<Progress :percent=\"100\" status=\"success\" />"
+        },
+        {
+            "name": "size",
+            "description": "进度条尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Progress :percent=\"50\" size=\"small\" />"
+        },
+        {
+            "name": "showOuterText",
+            "description": "是否展示进度条后面的百分比文字",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Progress :percent=\"50\" :showOuterText=\"false\" />"
+        },
+        {
+            "name": "showInnerText",
+            "description": "是否展示进度条上面的百分比文字",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Progress :percent=\"50\" showInnerText />"
+        },
+        {
+            "name": "strokeWidth",
+            "description": "圆形进度条的线条宽度，单位 px，只对 type=\"circle\" 有效",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "10",
+            "usageExample": "<Progress type=\"circle\" :percent=\"50\" :strokeWidth=\"8\" />"
+        },
+        {
+            "name": "color",
+            "description": "进度条背景颜色，支持固定颜色、根据百分比的颜色数组或函数。会覆盖 status 设置的颜色",
+            "type": {
+                "raw": "string | Color[] | ((percent: number) => string)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Progress :percent=\"50\" color=\"#8e44ad\" />"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "Color",
+            "definition": "type Color = {\n  percent: string | number\n  color: string\n}",
+            "description": "根据百分比设置的颜色配置"
+        }
+    ],
+    "examples": [
+        {
+            "id": "progress_basic",
+            "title": "基础用法",
+            "description": "基本的条形进度条",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Progress } from '@king-design/vue';\n</script>\n<template>\n  <Progress :percent=\"30\" />\n  <Progress :percent=\"60\" />\n  <Progress :percent=\"100\" />\n</template>",
+            "tags": [
+                "basic",
+                "bar"
+            ],
+            "usedProps": [
+                "percent"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同进度的条形进度条"
+        },
+        {
+            "id": "progress_status",
+            "title": "不同状态",
+            "description": "不同状态的进度条",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Progress } from '@king-design/vue';\n</script>\n<template>\n  <Progress :percent=\"30\" status=\"active\" />\n  <Progress :percent=\"70\" status=\"success\" />\n  <Progress :percent=\"50\" status=\"error\" />\n  <Progress :percent=\"60\" status=\"warning\" />\n</template>",
+            "tags": [
+                "status",
+                "success",
+                "error",
+                "warning"
+            ],
+            "usedProps": [
+                "percent",
+                "status"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同状态的进度条"
+        },
+        {
+            "id": "progress_circle",
+            "title": "圆形进度条",
+            "description": "环形进度展示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Progress } from '@king-design/vue';\n</script>\n<template>\n  <Progress type=\"circle\" :percent=\"75\" />\n  <Progress type=\"circle\" :percent=\"100\" status=\"success\" />\n  <Progress type=\"circle\" :percent=\"50\" status=\"error\" />\n</template>",
+            "tags": [
+                "circle",
+                "ring"
+            ],
+            "usedProps": [
+                "type",
+                "percent",
+                "status"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建圆形进度条"
+        },
+        {
+            "id": "progress_inner_text",
+            "title": "内部显示百分比",
+            "description": "在进度条内部显示百分比文字",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Progress } from '@king-design/vue';\n</script>\n<template>\n  <Progress :percent=\"60\" showInnerText :showOuterText=\"false\" />\n</template>",
+            "tags": [
+                "innerText",
+                "text"
+            ],
+            "usedProps": [
+                "percent",
+                "showInnerText",
+                "showOuterText"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在进度条内部显示百分比"
+        },
+        {
+            "id": "progress_custom_color",
+            "title": "自定义颜色",
+            "description": "自定义进度条颜色",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Progress } from '@king-design/vue';\n</script>\n<template>\n  <!-- 固定颜色 -->\n  <Progress :percent=\"50\" color=\"#8e44ad\" />\n  \n  <!-- 根据百分比渐变 -->\n  <Progress :percent=\"80\" :color=\"[\n    {percent: 30, color: '#f56c6c'},\n    {percent: 60, color: '#e6a23c'},\n    {percent: 100, color: '#67c23a'}\n  ]\" />\n</template>",
+            "tags": [
+                "color",
+                "custom",
+                "gradient"
+            ],
+            "usedProps": [
+                "percent",
+                "color"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义进度条颜色"
+        },
+        {
+            "id": "progress_dynamic",
+            "title": "动态进度",
+            "description": "动态控制进度值",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Progress, Button } from '@king-design/vue';\n\nconst percent = ref(0);\n\nconst increase = () => {\n  if (percent.value < 100) percent.value += 10;\n};\n\nconst decrease = () => {\n  if (percent.value > 0) percent.value -= 10;\n};\n</script>\n<template>\n  <Progress :percent=\"percent\" />\n  <Button @click=\"decrease\">-</Button>\n  <Button @click=\"increase\">+</Button>\n</template>",
+            "tags": [
+                "dynamic",
+                "reactive"
+            ],
+            "usedProps": [
+                "percent"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "动态控制进度条的进度值"
+        },
+        {
+            "id": "progress_upload",
+            "title": "文件上传场景",
+            "description": "文件上传进度展示",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue';\nimport { Progress } from '@king-design/vue';\n\nconst uploadProgress = ref(0);\n\nconst status = computed(() => {\n  if (uploadProgress.value >= 100) return 'success';\n  if (uploadProgress.value > 0) return 'active';\n  return 'normal';\n});\n</script>\n<template>\n  <div>\n    <p>文件上传中...</p>\n    <Progress :percent=\"uploadProgress\" :status=\"status\" />\n  </div>\n</template>",
+            "tags": [
+                "upload",
+                "file"
+            ],
+            "usedProps": [
+                "percent",
+                "status"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示文件上传进度"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "progress_percent_type",
+            "description": "percent 使用字符串而非数字",
+            "wrongCode": "<Progress percent=\"50\" />",
+            "correctCode": "<Progress :percent=\"50\" />",
+            "explanation": "percent 是数字类型，需要使用 v-bind 语法 (:percent)",
+            "relatedProps": [
+                "percent"
+            ]
+        },
+        {
+            "id": "progress_percent_range",
+            "description": "percent 超出 0-100 范围",
+            "wrongCode": "<Progress :percent=\"150\" />",
+            "correctCode": "<Progress :percent=\"100\" />",
+            "explanation": "percent 的有效范围是 0-100",
+            "relatedProps": [
+                "percent"
+            ]
+        },
+        {
+            "id": "progress_strokewidth_bar",
+            "description": "在条形进度条上使用 strokeWidth",
+            "wrongCode": "<Progress type=\"bar\" :percent=\"50\" :strokeWidth=\"5\" /> <!-- strokeWidth 无效 -->",
+            "correctCode": "<Progress type=\"circle\" :percent=\"50\" :strokeWidth=\"5\" />",
+            "explanation": "strokeWidth 只对 type=\"circle\" 圆形进度条有效",
+            "relatedProps": [
+                "strokeWidth",
+                "type"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "进度条",
+        "progress",
+        "百分比",
+        "圆形进度",
+        "加载进度",
+        "上传进度"
+    ],
+    "useCases": [
+        "文件上传进度",
+        "任务完成进度",
+        "加载进度展示",
+        "步骤进度指示",
+        "容量使用展示"
+    ],
+    "relatedComponents": [
+        "Spin"
+    ]
+}

package/components/protable.json

@@ -0,0 +1,132 @@
+{
+    "id": "protable",
+    "name": "ProTable",
+    "displayName": "高级表格",
+    "category": "data",
+    "description": "集成了搜索、筛选、排序、分页、工具栏等功能的高级表格组件。",
+    "importStatement": "import { ProTable } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "data",
+            "description": "表格数据",
+            "type": {
+                "raw": "Array",
+                "kind": "array"
+            },
+            "required": true
+        },
+        {
+            "name": "loading",
+            "description": "加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "tableHeaderProps",
+            "description": "头部工具栏配置对象。包含以下子属性：\n- show: Boolean (默认 true) - 是否显示\n- toolbar: TableToolbar - 表格功能区配置\n  - show: Boolean (默认 true) - 是否显示\n  - refresh: { show: Boolean } (默认 { show: true }) - 刷新按钮配置\n  - export: { show: Boolean, title: string, exportRangeList: ExportRange[] } - 导出按钮配置\n  - setting: { show: Boolean, title: string, onColumnsChange: (keys: string[]) => void } - 设置按钮配置\n- search: TableSearch - 表格搜索区配置\n  - show: Boolean (默认 true) - 是否显示\n  - searchKey: string (默认 '') - 继承 Search 组件的 searchKey 属性\n  - searches: string (默认 '') - 继承 Search 组件的 searches 属性\n  - searchGroups: TableFilter - 继承 Search 组件的 searchGroups 属性\n- filter: TableFilter - 表格检索区配置\n  - show: Boolean (默认 true) - 是否显示",
+            "type": {
+                "raw": "TableHeaderProps",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{ show: true }",
+            "usageExample": ":tableHeaderProps=\"{\n  show: true,\n  toolbar: {\n    show: true,\n    refresh: { show: true },\n    export: { show: true, title: '导出' },\n    setting: { show: true, title: '列设置' }\n  },\n  search: {\n    show: true,\n    searchKey: 'name',\n    searches: '请输入名称'\n  },\n  filter: { show: true }\n}\""
+        },
+        {
+            "name": "searchKey",
+            "description": "搜索关键词绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "usageExample": "v-model:searchKey=\"key\""
+        },
+        {
+            "name": "searchValue",
+            "description": "搜索值绑定",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "usageExample": "v-model:searchValue=\"val\""
+        },
+        {
+            "name": "searchItems",
+            "description": "同 SearchItems 组件的 modelValue，可用 v-model 双向绑定",
+            "type": {
+                "raw": "object",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}",
+            "usageExample": "v-model:searchItems=\"searchParams\""
+        }
+    ],
+    "events": [
+        {
+            "name": "refresh",
+            "vueEventName": "@refresh",
+            "description": "点击刷新按钮时触发",
+            "payload": [],
+            "usageExample": "<ProTable @refresh=\"loadData\" />"
+        },
+        {
+            "name": "change:searchValue",
+            "vueEventName": "@change:searchValue",
+            "description": "搜索框内容变更时触发"
+        },
+        {
+            "name": "change:searchKey",
+            "vueEventName": "@change:searchKey",
+            "description": "搜索 Key 变更时触发"
+        },
+        {
+            "name": "change:columns",
+            "vueEventName": "@change:columns",
+            "description": "列设置变更时触发"
+        },
+        {
+            "name": "change:filters",
+            "vueEventName": "@change:filters",
+            "description": "筛选条件变更时触发"
+        },
+        {
+            "name": "change:export",
+            "vueEventName": "@change:export",
+            "description": "导出配置变更时触发，payload 包含 selectedKeys 和 exportRange"
+        }
+    ],
+    "slots": [
+        {
+            "name": "actions",
+            "description": "表格的左上角操作区",
+            "vueTemplate": "<template #actions>...</template>",
+            "usageExample": "<ProTable><template #actions><Button type=\"primary\">新建</Button></template></ProTable>"
+        },
+        {
+            "name": "toolbar",
+            "description": "表格的右上角功能区",
+            "vueTemplate": "<template #toolbar>...</template>",
+            "usageExample": "<ProTable><template #toolbar><Button>自定义操作</Button></template></ProTable>"
+        }
+    ],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "table",
+        "search",
+        "filter",
+        "list",
+        "表格",
+        "pro"
+    ],
+    "useCases": [
+        "资源列表页",
+        "复杂数据展示"
+    ]
+}