king-design-analyzer 1.0.0

package/components/icon.json

@@ -0,0 +1,442 @@
+{
+    "id": "icon",
+    "name": "Icon",
+    "displayName": "字体图标",
+    "category": "general",
+    "description": "字体图标组件，提供丰富的图标库。通过 class 指定图标名称，支持自定义尺寸、颜色、旋转动画等效果。",
+    "importStatement": "import { Icon } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "class",
+            "description": "必填。通过 class 指定图标名称，需以 k-icon- 为前缀。例如: k-icon-user",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": true,
+            "usageExample": "<Icon class=\"k-icon-user\" />"
+        },
+        {
+            "name": "size",
+            "description": "定义图标尺寸，可使用预设值或自定义数值",
+            "type": {
+                "raw": "\"default\" | \"large\" | \"small\" | \"mini\" | string | number",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "large",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                }
+            ],
+            "usageExample": "<Icon class=\"k-icon-home\" size=\"large\" />"
+        },
+        {
+            "name": "color",
+            "description": "图标颜色，可使用预设主题色或自定义颜色值",
+            "type": {
+                "raw": "\"default\" | \"primary\" | \"danger\" | \"warning\" | \"success\" | string",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "primary",
+                    "danger",
+                    "warning",
+                    "success"
+                ]
+            },
+            "required": false,
+            "default": "undefined",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认颜色（继承父元素）"
+                },
+                {
+                    "value": "primary",
+                    "label": "主题蓝色"
+                },
+                {
+                    "value": "danger",
+                    "label": "危险红色"
+                },
+                {
+                    "value": "warning",
+                    "label": "警告橙色"
+                },
+                {
+                    "value": "success",
+                    "label": "成功绿色"
+                }
+            ],
+            "usageExample": "<Icon class=\"k-icon-heart\" color=\"danger\" />"
+        },
+        {
+            "name": "rotate",
+            "description": "是否一直旋转图标，适用于加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Icon class=\"k-icon-refresh\" rotate />"
+        },
+        {
+            "name": "hoverable",
+            "description": "图标是否具有 hover 效果，适用于可点击图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Icon class=\"k-icon-delete\" hoverable @click=\"handleDelete\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否展示禁用状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Icon class=\"k-icon-edit\" disabled />"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "iconNames": {
+        "description": "通过 class 属性指定图标名称",
+        "categories": {
+            "操作类": [
+                "k-icon-search",
+                "k-icon-edit",
+                "k-icon-delete",
+                "k-icon-add",
+                "k-icon-add-bold",
+                "k-icon-minus",
+                "k-icon-minus-bold",
+                "k-icon-save",
+                "k-icon-close",
+                "k-icon-close-bold",
+                "k-icon-check",
+                "k-icon-check-bold",
+                "k-icon-refresh",
+                "k-icon-upload",
+                "k-icon-download",
+                "k-icon-cut",
+                "k-icon-clone",
+                "k-icon-share",
+                "k-icon-zoom-in",
+                "k-icon-zoom-out"
+            ],
+            "状态类": [
+                "k-icon-success-fill",
+                "k-icon-warning-fill",
+                "k-icon-error-fill",
+                "k-icon-information-fill",
+                "k-icon-question-fill",
+                "k-icon-information",
+                "k-icon-question",
+                "k-icon-alert",
+                "k-icon-notification-fill",
+                "k-icon-heart-fill"
+            ],
+            "导航类": [
+                "k-icon-home",
+                "k-icon-settings",
+                "k-icon-user",
+                "k-icon-users",
+                "k-icon-logout",
+                "k-icon-settings-horizontal",
+                "k-icon-settings-vertical",
+                "k-icon-more",
+                "k-icon-more-circled",
+                "k-icon-all",
+                "k-icon-panel"
+            ],
+            "方向类": [
+                "k-icon-left",
+                "k-icon-right",
+                "k-icon-up",
+                "k-icon-down",
+                "k-icon-left-bold",
+                "k-icon-right-bold",
+                "k-icon-up-bold",
+                "k-icon-down-bold",
+                "k-icon-left-circled",
+                "k-icon-right-circled",
+                "k-icon-up-circled",
+                "k-icon-down-circled",
+                "k-icon-left-squared",
+                "k-icon-right-squared",
+                "k-icon-up-squared",
+                "k-icon-down-squared",
+                "k-icon-return-right",
+                "k-icon-sort",
+                "k-icon-sort-bold"
+            ],
+            "文件类": [
+                "k-icon-folder",
+                "k-icon-folder-open",
+                "k-icon-paper",
+                "k-icon-picture"
+            ],
+            "其他": [
+                "k-icon-calendar",
+                "k-icon-time",
+                "k-icon-location",
+                "k-icon-mail",
+                "k-icon-phone",
+                "k-icon-message",
+                "k-icon-earphone",
+                "k-icon-heart",
+                "k-icon-tag",
+                "k-icon-pin",
+                "k-icon-cloud",
+                "k-icon-server",
+                "k-icon-internet",
+                "k-icon-lock",
+                "k-icon-unlock",
+                "k-icon-visible",
+                "k-icon-hidden",
+                "k-icon-drag",
+                "k-icon-alarm",
+                "k-icon-history",
+                "k-icon-log",
+                "k-icon-memory",
+                "k-icon-cpu",
+                "k-icon-start",
+                "k-icon-stop",
+                "k-icon-check-outline",
+                "k-icon-close-outline"
+            ]
+        }
+    },
+    "examples": [
+        {
+            "id": "icon_basic",
+            "title": "基础用法",
+            "description": "基本的图标使用",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-search\" />\n  <Icon class=\"k-icon-user\" />\n  <Icon class=\"k-icon-settings\" />\n  <Icon class=\"k-icon-home\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示基本的图标"
+        },
+        {
+            "id": "icon_sizes",
+            "title": "不同尺寸",
+            "description": "展示不同尺寸的图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-home\" size=\"mini\" />\n  <Icon class=\"k-icon-home\" size=\"small\" />\n  <Icon class=\"k-icon-home\" size=\"default\" />\n  <Icon class=\"k-icon-home\" size=\"large\" />\n  <Icon class=\"k-icon-home\" :size=\"32\" />\n</template>",
+            "tags": [
+                "size",
+                "large",
+                "small",
+                "mini"
+            ],
+            "usedProps": [
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用不同尺寸的图标"
+        },
+        {
+            "id": "icon_colors",
+            "title": "图标颜色",
+            "description": "使用不同颜色的图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-heart\" color=\"primary\" />\n  <Icon class=\"k-icon-heart\" color=\"danger\" />\n  <Icon class=\"k-icon-heart\" color=\"warning\" />\n  <Icon class=\"k-icon-heart\" color=\"success\" />\n  <Icon class=\"k-icon-heart\" color=\"#ff5500\" />\n</template>",
+            "tags": [
+                "color",
+                "primary",
+                "danger",
+                "warning",
+                "success"
+            ],
+            "usedProps": [
+                "color"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用主题预设色或自定义颜色"
+        },
+        {
+            "id": "icon_rotate",
+            "title": "旋转动画",
+            "description": "持续旋转的图标，适合加载状态",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-refresh\" rotate />\n</template>",
+            "tags": [
+                "rotate",
+                "loading",
+                "animation"
+            ],
+            "usedProps": [
+                "rotate"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建持续旋转的加载图标"
+        },
+        {
+            "id": "icon_hoverable",
+            "title": "可点击图标",
+            "description": "带有 hover 效果的可交互图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon, Message } from '@king-design/vue';\n\nconst handleClick = () => {\n  Message.info('图标被点击');\n};\n</script>\n<template>\n  <Icon class=\"k-icon-delete\" hoverable color=\"danger\" @click=\"handleClick\" />\n  <Icon class=\"k-icon-edit\" hoverable color=\"primary\" @click=\"handleClick\" />\n</template>",
+            "tags": [
+                "hoverable",
+                "click",
+                "interactive"
+            ],
+            "usedProps": [
+                "hoverable",
+                "color"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建可点击的操作图标"
+        },
+        {
+            "id": "icon_disabled",
+            "title": "禁用状态",
+            "description": "禁用状态的图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-edit\" disabled />\n  <Icon class=\"k-icon-delete\" disabled />\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示禁用状态的图标"
+        },
+        {
+            "id": "icon_status",
+            "title": "状态图标",
+            "description": "常用的状态提示图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon } from '@king-design/vue';\n</script>\n<template>\n  <Icon class=\"k-icon-success-fill\" color=\"success\" />\n  <Icon class=\"k-icon-warning-fill\" color=\"warning\" />\n  <Icon class=\"k-icon-error-fill\" color=\"danger\" />\n  <Icon class=\"k-icon-information-fill\" color=\"primary\" />\n  <Icon class=\"k-icon-question-fill\" />\n</template>",
+            "tags": [
+                "status",
+                "success",
+                "warning",
+                "error",
+                "info"
+            ],
+            "usedProps": [
+                "color"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用状态提示类图标"
+        },
+        {
+            "id": "icon_with_button",
+            "title": "配合按钮使用",
+            "description": "在按钮中使用图标",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Icon, Button } from '@king-design/vue';\n</script>\n<template>\n  <Button type=\"primary\">\n    <Icon class=\"k-icon-search\" /> 搜索\n  </Button>\n  <Button>\n    <Icon class=\"k-icon-download\" /> 下载\n  </Button>\n  <Button icon>\n    <Icon class=\"k-icon-add\" />\n  </Button>\n</template>",
+            "tags": [
+                "button",
+                "combined"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在按钮中添加图标"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "icon_missing_class",
+            "description": "未通过 class 指定图标名称",
+            "wrongCode": "<Icon name=\"k-icon-search\" />",
+            "correctCode": "<Icon class=\"k-icon-search\" />",
+            "explanation": "图标名称必须通过 class 属性指定，而非 name 属性",
+            "relatedProps": []
+        },
+        {
+            "id": "icon_wrong_prefix",
+            "description": "图标名称前缀错误",
+            "wrongCode": "<Icon class=\"icon-search\" />",
+            "correctCode": "<Icon class=\"k-icon-search\" />",
+            "explanation": "KPC 图标名称必须以 k-icon- 为前缀",
+            "relatedProps": []
+        },
+        {
+            "id": "icon_size_string",
+            "description": "自定义尺寸使用字符串而非数字",
+            "wrongCode": "<Icon class=\"k-icon-home\" size=\"24px\" />",
+            "correctCode": "<Icon class=\"k-icon-home\" :size=\"24\" />",
+            "explanation": "自定义数值尺寸应使用数字类型，不需要带单位",
+            "relatedProps": [
+                "size"
+            ]
+        },
+        {
+            "id": "icon_color_typo",
+            "description": "预设颜色值拼写错误",
+            "wrongCode": "<Icon class=\"k-icon-heart\" color=\"red\" />",
+            "correctCode": "<Icon class=\"k-icon-heart\" color=\"danger\" />",
+            "explanation": "预设颜色值为 default, primary, danger, warning, success。如需使用其他颜色，请使用十六进制或 RGB 格式",
+            "relatedProps": [
+                "color"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "图标",
+        "icon",
+        "字体图标",
+        "搜索",
+        "删除",
+        "编辑",
+        "用户",
+        "设置",
+        "k-icon"
+    ],
+    "useCases": [
+        "按钮中的图标",
+        "菜单项图标",
+        "状态提示图标",
+        "操作按钮图标",
+        "加载旋转动画",
+        "表格操作列图标"
+    ],
+    "relatedComponents": [
+        "Button"
+    ]
+}