king-design-analyzer 1.0.0

package/components/message.json

@@ -0,0 +1,345 @@
+{
+    "id": "message",
+    "name": "Message",
+    "displayName": "全局提示",
+    "category": "feedback",
+    "description": "全局消息提示组件，用于向用户显示操作反馈信息。支持 info、success、warning、error 四种类型，通过静态方法调用，自动在页面顶部显示并自动消失。",
+    "importStatement": "import { Message } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "content",
+            "description": "提示内容",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "Message.info({ content: '提示内容' })"
+        },
+        {
+            "name": "duration",
+            "description": "提示展示多长时间后自动关闭，传入 0 时不自动关闭，单位 ms",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "5000",
+            "usageExample": "Message.info('提示', 10000)"
+        },
+        {
+            "name": "type",
+            "description": "提示类型",
+            "type": {
+                "raw": "\"info\" | \"error\" | \"success\" | \"warning\"",
+                "kind": "union",
+                "unionTypes": [
+                    "info",
+                    "error",
+                    "success",
+                    "warning"
+                ]
+            },
+            "required": false,
+            "default": "\"info\"",
+            "allowedValues": [
+                {
+                    "value": "info",
+                    "label": "普通提示（蓝色）",
+                    "isDefault": true
+                },
+                {
+                    "value": "success",
+                    "label": "成功提示（绿色）"
+                },
+                {
+                    "value": "warning",
+                    "label": "警告提示（橙色）"
+                },
+                {
+                    "value": "error",
+                    "label": "错误提示（红色）"
+                }
+            ],
+            "usageExample": "Message.success('成功')"
+        },
+        {
+            "name": "closable",
+            "description": "是否展示关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "Message.info({ content: '可关闭', closable: true })"
+        },
+        {
+            "name": "hideIcon",
+            "description": "是否隐藏文字前面的图标",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "Message.info({ content: '无图标', hideIcon: true })"
+        }
+    ],
+    "events": [],
+    "methods": [
+        {
+            "name": "info",
+            "description": "显示普通提示消息",
+            "params": [
+                {
+                    "name": "content",
+                    "type": "string | VNode | Partial<MessageProps>",
+                    "description": "提示内容或配置对象"
+                },
+                {
+                    "name": "duration",
+                    "type": "number",
+                    "description": "可选，显示时长（ms）"
+                }
+            ],
+            "returnType": "void",
+            "usageExample": "Message.info('这是一条普通消息');"
+        },
+        {
+            "name": "success",
+            "description": "显示成功提示消息",
+            "params": [
+                {
+                    "name": "content",
+                    "type": "string | VNode | Partial<MessageProps>",
+                    "description": "提示内容或配置对象"
+                },
+                {
+                    "name": "duration",
+                    "type": "number",
+                    "description": "可选，显示时长（ms）"
+                }
+            ],
+            "returnType": "void",
+            "usageExample": "Message.success('操作成功');"
+        },
+        {
+            "name": "warning",
+            "description": "显示警告提示消息",
+            "params": [
+                {
+                    "name": "content",
+                    "type": "string | VNode | Partial<MessageProps>",
+                    "description": "提示内容或配置对象"
+                },
+                {
+                    "name": "duration",
+                    "type": "number",
+                    "description": "可选，显示时长（ms）"
+                }
+            ],
+            "returnType": "void",
+            "usageExample": "Message.warning('请注意');"
+        },
+        {
+            "name": "error",
+            "description": "显示错误提示消息",
+            "params": [
+                {
+                    "name": "content",
+                    "type": "string | VNode | Partial<MessageProps>",
+                    "description": "提示内容或配置对象"
+                },
+                {
+                    "name": "duration",
+                    "type": "number",
+                    "description": "可选，显示时长（ms）"
+                }
+            ],
+            "returnType": "void",
+            "usageExample": "Message.error('操作失败');"
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "MessageProps",
+            "definition": "interface MessageProps {\n  content?: string | VNode\n  duration?: number\n  type?: 'info' | 'error' | 'success' | 'warning'\n  closable?: boolean\n  hideIcon?: boolean\n}",
+            "description": "Message 配置对象类型"
+        }
+    ],
+    "examples": [
+        {
+            "id": "message_basic",
+            "title": "基础用法",
+            "description": "基本的消息提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, Message } from '@king-design/vue';\n\nconst showMessage = () => {\n  Message.info('这是一条普通消息');\n};\n</script>\n<template>\n  <Button @click=\"showMessage\">显示消息</Button>\n</template>",
+            "tags": [
+                "basic",
+                "info"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [
+                "info"
+            ],
+            "scenario": "显示一条普通的提示消息"
+        },
+        {
+            "id": "message_types",
+            "title": "不同类型",
+            "description": "四种类型的消息提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, Message } from '@king-design/vue';\n\nconst showSuccess = () => Message.success('操作成功');\nconst showWarning = () => Message.warning('请注意');\nconst showError = () => Message.error('操作失败');\nconst showInfo = () => Message.info('提示信息');\n</script>\n<template>\n  <Button type=\"primary\" @click=\"showSuccess\">成功</Button>\n  <Button type=\"warning\" @click=\"showWarning\">警告</Button>\n  <Button type=\"danger\" @click=\"showError\">错误</Button>\n  <Button @click=\"showInfo\">信息</Button>\n</template>",
+            "tags": [
+                "success",
+                "warning",
+                "error",
+                "info"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [
+                "success",
+                "warning",
+                "error",
+                "info"
+            ],
+            "scenario": "展示不同类型的消息提示"
+        },
+        {
+            "id": "message_duration",
+            "title": "自定义时长",
+            "description": "设置消息显示时长",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, Message } from '@king-design/vue';\n\nconst showMessage = () => {\n  // 显示 10 秒后关闭\n  Message.info('这条消息会显示 10 秒', 10000);\n};\n\nconst showPermanent = () => {\n  // 传入 0 表示不自动关闭\n  Message.warning('这条消息不会自动关闭', 0);\n};\n</script>\n<template>\n  <Button @click=\"showMessage\">显示 10 秒</Button>\n  <Button @click=\"showPermanent\">不自动关闭</Button>\n</template>",
+            "tags": [
+                "duration",
+                "permanent"
+            ],
+            "usedProps": [
+                "duration"
+            ],
+            "usedEvents": [],
+            "usedMethods": [
+                "info",
+                "warning"
+            ],
+            "scenario": "自定义消息显示时长"
+        },
+        {
+            "id": "message_closable",
+            "title": "可关闭消息",
+            "description": "带关闭按钮的消息",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, Message } from '@king-design/vue';\n\nconst showMessage = () => {\n  Message.info({\n    content: '点击关闭按钮关闭',\n    closable: true,\n    duration: 0\n  });\n};\n</script>\n<template>\n  <Button @click=\"showMessage\">显示可关闭消息</Button>\n</template>",
+            "tags": [
+                "closable",
+                "close"
+            ],
+            "usedProps": [
+                "content",
+                "closable",
+                "duration"
+            ],
+            "usedEvents": [],
+            "usedMethods": [
+                "info"
+            ],
+            "scenario": "显示带关闭按钮的消息"
+        },
+        {
+            "id": "message_no_icon",
+            "title": "隐藏图标",
+            "description": "不显示图标的消息",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Button, Message } from '@king-design/vue';\n\nconst showMessage = () => {\n  Message.success({\n    content: '没有图标的消息',\n    hideIcon: true\n  });\n};\n</script>\n<template>\n  <Button @click=\"showMessage\">无图标消息</Button>\n</template>",
+            "tags": [
+                "hideIcon",
+                "no-icon"
+            ],
+            "usedProps": [
+                "content",
+                "hideIcon"
+            ],
+            "usedEvents": [],
+            "usedMethods": [
+                "success"
+            ],
+            "scenario": "显示不带图标的简洁消息"
+        },
+        {
+            "id": "message_api_response",
+            "title": "接口响应提示",
+            "description": "常见的 API 请求结果提示",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Button, Message } from '@king-design/vue';\n\nconst loading = ref(false);\n\nconst submitForm = async () => {\n  loading.value = true;\n  try {\n    // 模拟 API 请求\n    await new Promise(r => setTimeout(r, 1000));\n    Message.success('提交成功！');\n  } catch (error) {\n    Message.error('提交失败，请重试');\n  } finally {\n    loading.value = false;\n  }\n};\n</script>\n<template>\n  <Button type=\"primary\" :loading=\"loading\" @click=\"submitForm\">\n    提交表单\n  </Button>\n</template>",
+            "tags": [
+                "api",
+                "response",
+                "async"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [
+                "success",
+                "error"
+            ],
+            "scenario": "API 请求成功或失败后的提示"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "message_wrong_import",
+            "description": "未导入 Message 组件",
+            "wrongCode": "Message.success('成功'); // ReferenceError: Message is not defined",
+            "correctCode": "import { Message } from '@king-design/vue';\n\nMessage.success('成功');",
+            "explanation": "使用 Message 前需要先从 @king-design/vue 导入",
+            "relatedProps": []
+        },
+        {
+            "id": "message_duration_string",
+            "description": "duration 使用字符串而非数字",
+            "wrongCode": "Message.info('提示', '5000');",
+            "correctCode": "Message.info('提示', 5000);",
+            "explanation": "duration 必须是数字类型，单位是毫秒",
+            "relatedProps": [
+                "duration"
+            ]
+        },
+        {
+            "id": "message_config_without_content",
+            "description": "传入配置对象时忘记设置 content",
+            "wrongCode": "Message.info({ duration: 10000 });",
+            "correctCode": "Message.info({ content: '提示内容', duration: 10000 });",
+            "explanation": "使用配置对象时必须包含 content 属性",
+            "relatedProps": [
+                "content"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "消息",
+        "message",
+        "提示",
+        "toast",
+        "通知",
+        "notification",
+        "成功",
+        "错误",
+        "警告"
+    ],
+    "useCases": [
+        "操作成功提示",
+        "操作失败提示",
+        "表单提交反馈",
+        "API 请求结果提示",
+        "系统通知",
+        "警告提醒"
+    ],
+    "relatedComponents": [
+        "Notice"
+    ]
+}