king-design-analyzer 2.1.9 → 2.2.1

package/components/colorpicker.json

@@ -0,0 +1,217 @@
+{
+    "id": "colorpicker",
+    "name": "Colorpicker",
+    "displayName": "颜色选择器",
+    "category": "form",
+    "description": "颜色选择器组件，用于选择纯色或带透明度的颜色值。点击触发器后会弹出调色面板，支持预设颜色、自定义弹出容器和弹层定位。",
+    "importStatement": "import { Colorpicker } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前颜色值，必填。支持十六进制颜色或 rgba 字符串，可用 v-model 双向绑定。",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": true,
+            "usageExample": "<Colorpicker v-model=\"color\" />"
+        },
+        {
+            "name": "presets",
+            "description": "预设颜色列表，展示在面板底部，便于快速选择常用颜色。",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[\"#D0021B\", \"#F5A623\", \"#F8E71C\", \"#8B572A\", \"#7ED321\", \"#417505\", \"#BD10E0\", \"#9013FE\", \"#4A90E2\", \"#50E3C2\", \"#B8E986\", \"#000000\", \"#4A4A4A\", \"#9B9B9B\", \"#FFFFFF\"]",
+            "usageExample": "<Colorpicker v-model=\"color\" :presets=\"['#1677ff', '#52c41a', '#faad14']\" />"
+        },
+        {
+            "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": "<Colorpicker v-model=\"color\" size=\"small\" />"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用，禁用后无法打开面板和修改颜色。",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Colorpicker v-model=\"color\" disabled />"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出层挂载位置。通常在 Dialog、Drawer 等容器中需要显式指定，避免层级或定位异常。",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Colorpicker v-model=\"color\" :container=\"() => document.body\" />"
+        },
+        {
+            "name": "show",
+            "description": "是否展示颜色面板，可用于受控显示。",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Colorpicker v-model=\"color\" :show=\"visible\" />"
+        },
+        {
+            "name": "position",
+            "description": "下拉面板定位配置，继承 Dropdown 的 position 能力。",
+            "type": {
+                "raw": "DropdownProps['position']",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{ collision: 'fit' }",
+            "usageExample": "<Colorpicker v-model=\"color\" :position=\"{ placement: 'bottom-start', collision: 'fit' }\" />"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "colorpicker_basic",
+            "title": "基础用法",
+            "description": "选择主题色并实时预览。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Colorpicker } from '@king-design/vue';\n\nconst color = ref('#1677ff');\n</script>\n<template>\n  <div style=\"display: flex; align-items: center; gap: 12px;\">\n    <Colorpicker v-model=\"color\" />\n    <span>当前颜色：{{ color }}</span>\n  </div>\n</template>",
+            "tags": [
+                "basic",
+                "v-model"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "选择品牌主色或主题色"
+        },
+        {
+            "id": "colorpicker_presets",
+            "title": "预设颜色",
+            "description": "通过 presets 提供常用颜色快捷选择。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Colorpicker } from '@king-design/vue';\n\nconst color = ref('#52c41a');\nconst presets = ['#1677ff', '#52c41a', '#faad14', '#f5222d', '#722ed1'];\n</script>\n<template>\n  <Colorpicker v-model=\"color\" :presets=\"presets\" />\n</template>",
+            "tags": [
+                "preset",
+                "theme"
+            ],
+            "usedProps": [
+                "value",
+                "presets"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "为运营后台提供固定品牌色"
+        },
+        {
+            "id": "colorpicker_in_dialog",
+            "title": "弹窗内使用",
+            "description": "在弹窗中显式指定挂载容器，避免弹层错位。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, Colorpicker, Dialog } from '@king-design/vue';\n\nconst visible = ref(false);\nconst color = ref('rgba(22, 119, 255, 0.8)');\n</script>\n<template>\n  <Button @click=\"visible = true\">编辑颜色</Button>\n  <Dialog v-model=\"visible\" title=\"颜色设置\">\n    <Colorpicker v-model=\"color\" :container=\"() => document.body\" />\n  </Dialog>\n</template>",
+            "tags": [
+                "dialog",
+                "container"
+            ],
+            "usedProps": [
+                "value",
+                "container"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在弹窗中配置颜色字段"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "colorpicker_missing_value",
+            "description": "未传入有效颜色字符串",
+            "wrongCode": "<Colorpicker :value=\"undefined\" />",
+            "correctCode": "<Colorpicker v-model=\"color\" />",
+            "explanation": "Colorpicker 的 value 是必填项，应提供合法的颜色字符串并通过 v-model 维护状态。",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "colorpicker_no_container_in_popup",
+            "description": "在弹层容器内使用时未指定 container",
+            "wrongCode": "<Dialog v-model=\"visible\"><Colorpicker v-model=\"color\" /></Dialog>",
+            "correctCode": "<Dialog v-model=\"visible\"><Colorpicker v-model=\"color\" :container=\"() => document.body\" /></Dialog>",
+            "explanation": "Colorpicker 内部会渲染下拉面板，在 Dialog、Drawer 等场景中建议显式设置挂载容器，避免遮挡和定位问题。",
+            "relatedProps": [
+                "container"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "colorpicker",
+        "颜色选择器",
+        "颜色",
+        "主题色",
+        "rgba",
+        "hex",
+        "预设颜色"
+    ],
+    "useCases": [
+        "主题颜色配置",
+        "图表颜色设置",
+        "标签颜色自定义",
+        "运营后台品牌色选择"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ColorValue",
+            "definition": "type ColorValue = string",
+            "description": "颜色值类型，通常支持 hex、rgb(a) 等字符串格式。"
+        }
+    ],
+    "relatedComponents": [
+        "Input",
+        "Dropdown",
+        "Dialog"
+    ]
+}

package/components/configprovider.json

@@ -0,0 +1,96 @@
+{
+    "id": "configprovider",
+    "name": "ConfigProvider",
+    "displayName": "全局配置提供器",
+    "category": "general",
+    "description": "配置上下文提供器，用于向包裹区域内的组件统一注入类名前缀和波纹动画配置。适合在局部区域隔离样式命名空间或关闭交互波纹效果。",
+    "importStatement": "import { ConfigProvider } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "传递给内部组件的配置对象",
+            "type": {
+                "raw": "{ classNamePrefix?: string; disableWave?: boolean }",
+                "kind": "object"
+            },
+            "required": false,
+            "default": "{}",
+            "usageExample": "<ConfigProvider :value=\"{ classNamePrefix: 'my', disableWave: true }\"></ConfigProvider>"
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "需要继承配置的子组件内容",
+            "bindingType": "none",
+            "vueTemplate": "#default",
+            "usageExample": "<ConfigProvider :value=\"config\"><Button>按钮</Button></ConfigProvider>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "configprovider_prefix",
+            "title": "自定义类名前缀",
+            "description": "为局部组件树设置独立类名前缀。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, ButtonGroup, ConfigProvider } from '@king-design/vue';\n\nconst config = ref({ classNamePrefix: 'custom' });\n</script>\n<template>\n  <ConfigProvider :value=\"config\">\n    <ButtonGroup>\n      <Button>默认按钮</Button>\n      <Button type=\"primary\">主要按钮</Button>\n    </ButtonGroup>\n  </ConfigProvider>\n</template>",
+            "tags": [
+                "classNamePrefix",
+                "scope"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在微前端或局部主题隔离场景中定制组件类名前缀。"
+        },
+        {
+            "id": "configprovider_disable_wave",
+            "title": "关闭波纹效果",
+            "description": "统一禁用子组件的波纹动画效果。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, ConfigProvider } from '@king-design/vue';\n</script>\n<template>\n  <ConfigProvider :value=\"{ disableWave: true }\">\n    <div style=\"display: flex; gap: 8px;\">\n      <Button>普通按钮</Button>\n      <Button type=\"primary\">无波纹按钮</Button>\n    </div>\n  </ConfigProvider>\n</template>",
+            "tags": [
+                "disableWave",
+                "interaction"
+            ],
+            "usedProps": [
+                "value"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "default"
+            ],
+            "usedMethods": [],
+            "scenario": "在需要弱化交互动画或统一交互体验时关闭波纹效果。"
+        }
+    ],
+    "searchKeywords": [
+        "configprovider",
+        "配置提供器",
+        "classNamePrefix",
+        "disableWave"
+    ],
+    "useCases": [
+        "局部样式前缀隔离",
+        "统一关闭波纹动画",
+        "子树级组件配置注入"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "ConfigProviderValue",
+            "definition": "type ConfigProviderValue = { classNamePrefix?: string; disableWave?: boolean }",
+            "description": "ConfigProvider 支持的配置项。"
+        }
+    ],
+    "relatedComponents": [
+        "Button",
+        "Notification"
+    ]
+}

package/components/copy.json

@@ -212,6 +212,13 @@
     "复制收货地址",
     "一键复制命令"
   ],
+  "typeDefinitions": [
+    {
+      "name": "CopyText",
+      "definition": "type CopyText = string",
+      "description": "待复制内容的文本类型。"
+    }
+  ],
   "relatedComponents": [
     "Button",
     "Icon",

package/components/copyhover.json

@@ -0,0 +1,111 @@
+{
+    "id": "copyhover",
+    "name": "CopyHover",
+    "displayName": "悬浮复制",
+    "category": "feedback",
+    "description": "在文本悬停时才露出复制图标的轻量组件，适合详情字段、表格单元格等需要降低视觉噪音的复制场景。",
+    "importStatement": "import { CopyHover } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Copy",
+            "include": [
+                "props"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "text",
+            "description": "待复制文本",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "tooltipText",
+            "description": "复制按钮提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用复制",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "copyhover_instance_id",
+            "title": "详情字段悬浮复制",
+            "description": "只在悬停时显示复制图标，适合长 ID、Token 等字段。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { CopyHover } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyHover text=\"i-2ze7x5a4a92b\" tooltip-text=\"复制实例 ID\" />\n</template>",
+            "tags": [
+                "copy",
+                "hover"
+            ],
+            "usedProps": [
+                "text",
+                "tooltipText"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页展示实例 ID，同时保持界面简洁。"
+        },
+        {
+            "id": "copyhover_disabled_secret",
+            "title": "敏感字段禁止复制",
+            "description": "对脱敏后的内容保留展示但关闭复制。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { CopyHover } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyHover text=\"sk-******\" tooltip-text=\"敏感信息不可复制\" :disabled=\"true\" />\n</template>",
+            "tags": [
+                "copy",
+                "security"
+            ],
+            "usedProps": [
+                "text",
+                "tooltipText",
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在脱敏展示 SecretKey 等敏感内容时显式禁用复制。"
+        }
+    ],
+    "searchKeywords": [
+        "copy hover",
+        "hover copy",
+        "复制悬浮",
+        "悬停复制",
+        "轻量复制按钮"
+    ],
+    "useCases": [
+        "详情字段快速复制",
+        "列表项悬浮复制",
+        "敏感信息禁用复制"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CopyHoverText",
+            "definition": "type CopyHoverText = string",
+            "description": "悬浮复制组件展示和复制的文本内容类型。"
+        }
+    ],
+    "relatedComponents": [
+        "Copy",
+        "CopyRow"
+    ]
+}

package/components/copyrow.json

@@ -0,0 +1,125 @@
+{
+    "id": "copyrow",
+    "name": "CopyRow",
+    "displayName": "复制行",
+    "category": "feedback",
+    "description": "用于展示并复制一整行文本的业务组件，适合实例 ID、API 地址、回源域名等长文本信息。",
+    "importStatement": "import { CopyRow } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "text",
+            "description": "待展示和复制的文本内容",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false
+        },
+        {
+            "name": "maxLines",
+            "description": "最大展示行数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "position",
+            "description": "复制提示弹出位置",
+            "type": {
+                "raw": "any",
+                "kind": "custom"
+            },
+            "required": false
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用复制",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        },
+        {
+            "name": "disabledTooltip",
+            "description": "禁用时是否显示 tooltip",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false
+        }
+    ],
+    "events": [],
+    "slots": [
+        {
+            "name": "default",
+            "description": "自定义行内容",
+            "bindingType": "none",
+            "vueTemplate": "<CopyRow>...</CopyRow>"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "copyrow_endpoint",
+            "title": "接口地址一键复制",
+            "description": "在单行文本中集成复制能力和超长内容省略。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { CopyRow } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyRow\n    text=\"https://api.ksyun.com/v1/instance/describe\"\n    :max-lines=\"1\"\n  />\n</template>",
+            "tags": [
+                "copy",
+                "text"
+            ],
+            "usedProps": [
+                "text",
+                "maxLines"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页展示并复制较长的接口地址或资源标识。"
+        },
+        {
+            "id": "copyrow_slot_content",
+            "title": "自定义复制行内容",
+            "description": "通过默认插槽自定义展示样式，同时保留复制能力。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { CopyRow } from '@ksyun-internal/versatile';\n</script>\n\n<template>\n  <CopyRow text=\"bucket-logs-001\">\n    <strong>日志桶：</strong>\n    <span>bucket-logs-001</span>\n  </CopyRow>\n</template>",
+            "tags": [
+                "copy",
+                "slot"
+            ],
+            "usedProps": [
+                "text"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在详情页用自定义文案组合显示可复制字段。"
+        }
+    ],
+    "searchKeywords": [
+        "copy row",
+        "copy text row",
+        "复制行",
+        "文本复制",
+        "长文本复制"
+    ],
+    "useCases": [
+        "详情页字段复制",
+        "表格文本复制",
+        "自定义内容的复制展示行"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "CopyRowText",
+            "definition": "type CopyRowText = string",
+            "description": "复制行组件中主文本内容的类型。"
+        }
+    ],
+    "relatedComponents": [
+        "CopyHover",
+        "TableColumnId"
+    ]
+}