king-design-analyzer 1.0.0

package/components/tip.json

@@ -0,0 +1,322 @@
+{
+    "id": "tip",
+    "name": "Tip",
+    "displayName": "警告提示",
+    "category": "feedback",
+    "description": "警告提示组件，用于展示重要的提示信息。支持多种类型、可关闭、显示图标等功能。Tip 组件继承自 Tag 组件。",
+    "importStatement": "import { Tip } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "type",
+            "description": "提示类型",
+            "type": {
+                "raw": "\"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "primary",
+                    "success",
+                    "warning",
+                    "danger"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认",
+                    "isDefault": true
+                },
+                {
+                    "value": "primary",
+                    "label": "主要（蓝色）"
+                },
+                {
+                    "value": "success",
+                    "label": "成功（绿色）"
+                },
+                {
+                    "value": "warning",
+                    "label": "警告（橙色）"
+                },
+                {
+                    "value": "danger",
+                    "label": "危险（红色）"
+                }
+            ],
+            "usageExample": "<Tip type=\"warning\">警告内容</Tip>"
+        },
+        {
+            "name": "closable",
+            "description": "是否可关闭",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tip closable>可关闭的提示</Tip>"
+        },
+        {
+            "name": "closed",
+            "description": "是否已关闭，可用 v-model:closed 双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tip :closed=\"isClosed\">提示</Tip>"
+        },
+        {
+            "name": "showIcon",
+            "description": "是否展示图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tip type=\"success\" showIcon>成功</Tip>"
+        },
+        {
+            "name": "disabled",
+            "description": "是否展示禁用状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tip disabled>禁用状态</Tip>"
+        },
+        {
+            "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": "<Tip size=\"small\">小尺寸提示</Tip>"
+        },
+        {
+            "name": "border",
+            "description": "边框样式",
+            "type": {
+                "raw": "\"solid\" | \"dashed\" | \"none\"",
+                "kind": "union",
+                "unionTypes": [
+                    "solid",
+                    "dashed",
+                    "none"
+                ]
+            },
+            "required": false,
+            "default": "\"solid\"",
+            "allowedValues": [
+                {
+                    "value": "solid",
+                    "label": "实线边框",
+                    "isDefault": true
+                },
+                {
+                    "value": "dashed",
+                    "label": "虚线边框"
+                },
+                {
+                    "value": "none",
+                    "label": "无边框"
+                }
+            ],
+            "usageExample": "<Tip border=\"dashed\">虚线边框</Tip>"
+        }
+    ],
+    "events": [
+        {
+            "name": "close",
+            "vueEventName": "@close",
+            "description": "关闭时触发",
+            "payload": [
+                {
+                    "name": "e",
+                    "type": "MouseEvent",
+                    "description": "原生鼠标事件"
+                }
+            ],
+            "usageExample": "<Tip closable @close=\"handleClose\">",
+            "handlerExample": "const handleClose = (e: MouseEvent) => {\n  console.log('提示已关闭');\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "tip_basic",
+            "title": "基础用法",
+            "description": "不同类型的提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tip } from '@king-design/vue';\n</script>\n<template>\n  <Tip>这是一条默认提示</Tip>\n  <Tip type=\"primary\">这是一条主要提示</Tip>\n  <Tip type=\"success\">这是一条成功提示</Tip>\n  <Tip type=\"warning\">这是一条警告提示</Tip>\n  <Tip type=\"danger\">这是一条危险提示</Tip>\n</template>",
+            "tags": [
+                "basic",
+                "type"
+            ],
+            "usedProps": [
+                "type"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同类型的提示信息"
+        },
+        {
+            "id": "tip_icon",
+            "title": "带图标",
+            "description": "显示图标的提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tip } from '@king-design/vue';\n</script>\n<template>\n  <Tip type=\"success\" showIcon>操作成功</Tip>\n  <Tip type=\"warning\" showIcon>请注意</Tip>\n  <Tip type=\"danger\" showIcon>操作失败</Tip>\n</template>",
+            "tags": [
+                "icon",
+                "showIcon"
+            ],
+            "usedProps": [
+                "type",
+                "showIcon"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "显示带图标的提示信息"
+        },
+        {
+            "id": "tip_closable",
+            "title": "可关闭",
+            "description": "可关闭的提示",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Tip } from '@king-design/vue';\n\nconst closed = ref(false);\n\nconst handleClose = () => {\n  closed.value = true;\n};\n</script>\n<template>\n  <Tip closable :closed=\"closed\" @close=\"handleClose\">\n    可关闭的提示\n  </Tip>\n</template>",
+            "tags": [
+                "closable",
+                "close"
+            ],
+            "usedProps": [
+                "closable",
+                "closed"
+            ],
+            "usedEvents": [
+                "close"
+            ],
+            "usedMethods": [],
+            "scenario": "创建可关闭的提示"
+        },
+        {
+            "id": "tip_border",
+            "title": "边框样式",
+            "description": "不同边框样式的提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tip } from '@king-design/vue';\n</script>\n<template>\n  <Tip border=\"solid\">实线边框</Tip>\n  <Tip border=\"dashed\">虚线边框</Tip>\n  <Tip border=\"none\">无边框</Tip>\n</template>",
+            "tags": [
+                "border"
+            ],
+            "usedProps": [
+                "border"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置不同的边框样式"
+        },
+        {
+            "id": "tip_form_hint",
+            "title": "表单提示",
+            "description": "在表单中使用提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tip, Form, FormItem, Input } from '@king-design/vue';\n</script>\n<template>\n  <Tip type=\"warning\" showIcon style=\"margin-bottom: 16px;\">\n    请填写真实信息，提交后不可修改\n  </Tip>\n  <Form>\n    <FormItem label=\"姓名\">\n      <Input />\n    </FormItem>\n  </Form>\n</template>",
+            "tags": [
+                "form",
+                "hint"
+            ],
+            "usedProps": [
+                "type",
+                "showIcon"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "在表单上方显示重要提示"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "tip_closable_no_handler",
+            "description": "使用 closable 但未处理关闭逻辑",
+            "wrongCode": "<Tip closable>提示</Tip> <!-- 点击关闭按钮不会隐藏 -->",
+            "correctCode": "<Tip closable :closed=\"closed\" @close=\"handleClose\">提示</Tip>",
+            "explanation": "closable 只显示关闭按钮，需要监听 close 事件并设置 closed 来隐藏",
+            "relatedProps": [
+                "closable",
+                "closed"
+            ]
+        },
+        {
+            "id": "tip_type_typo",
+            "description": "type 值拼写错误",
+            "wrongCode": "<Tip type=\"error\">错误</Tip>",
+            "correctCode": "<Tip type=\"danger\">错误</Tip>",
+            "explanation": "错误类型应使用 danger 而非 error",
+            "relatedProps": [
+                "type"
+            ]
+        },
+        {
+            "id": "tip_showicon_case",
+            "description": "showIcon 大小写错误",
+            "wrongCode": "<Tip showicon>提示</Tip>",
+            "correctCode": "<Tip showIcon>提示</Tip>",
+            "explanation": "属性名是 showIcon（驼峰命名）",
+            "relatedProps": [
+                "showIcon"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "警告",
+        "tip",
+        "提示",
+        "alert",
+        "通知",
+        "信息提示"
+    ],
+    "useCases": [
+        "表单提示说明",
+        "操作提醒",
+        "状态展示",
+        "重要信息提示",
+        "页面公告"
+    ],
+    "relatedComponents": [
+        "Tag",
+        "Message"
+    ]
+}