king-design-analyzer 1.0.0

package/components/transfer.json

@@ -0,0 +1,414 @@
+{
+    "id": "transfer",
+    "name": "Transfer",
+    "displayName": "穿梭框",
+    "category": "form",
+    "description": "穿梭框组件，用于在两个列表之间进行数据选择和转移。支持搜索过滤、自定义渲染、禁用选项等功能。",
+    "importStatement": "import { Transfer } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "data",
+            "description": "需要展示的列表数据，包含 label、key、disabled 属性",
+            "type": {
+                "raw": "TransferDataItem[]",
+                "kind": "array"
+            },
+            "required": true,
+            "usageExample": "<Transfer :data=\"data\">"
+        },
+        {
+            "name": "value",
+            "description": "已选择的 key 数组，可用 v-model 双向绑定",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<Transfer v-model=\"selectedKeys\">"
+        },
+        {
+            "name": "keyName",
+            "description": "指定数据的 key 属性名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"key\"",
+            "usageExample": "<Transfer keyName=\"id\">"
+        },
+        {
+            "name": "labelName",
+            "description": "指定数据的 label 属性名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"label\"",
+            "usageExample": "<Transfer labelName=\"name\">"
+        },
+        {
+            "name": "leftCheckedKeys",
+            "description": "左侧勾选的节点 key 数组，可用 v-model:leftCheckedKeys",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<Transfer v-model:leftCheckedKeys=\"leftChecked\">"
+        },
+        {
+            "name": "rightCheckedKeys",
+            "description": "右侧勾选的节点 key 数组，可用 v-model:rightCheckedKeys",
+            "type": {
+                "raw": "string[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[]",
+            "usageExample": "<Transfer v-model:rightCheckedKeys=\"rightChecked\">"
+        },
+        {
+            "name": "filterable",
+            "description": "是否启用过滤功能",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Transfer filterable>"
+        },
+        {
+            "name": "filter",
+            "description": "自定义过滤函数",
+            "type": {
+                "raw": "(data: TransferDataItem, keywords: string) => boolean",
+                "kind": "function",
+                "functionSignature": "(data: TransferDataItem, keywords: string) => boolean"
+            },
+            "required": false,
+            "default": "(data, keywords) => data.label.includes(keywords)",
+            "usageExample": "<Transfer :filter=\"customFilter\">"
+        },
+        {
+            "name": "placeholder",
+            "description": "过滤输入框的占位文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"请输入\"",
+            "usageExample": "<Transfer placeholder=\"搜索...\">"
+        },
+        {
+            "name": "leftKeywords",
+            "description": "左侧筛选关键字",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Transfer v-model:leftKeywords=\"leftSearch\">"
+        },
+        {
+            "name": "rightKeywords",
+            "description": "右侧筛选关键字",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Transfer v-model:rightKeywords=\"rightSearch\">"
+        },
+        {
+            "name": "leftTitle",
+            "description": "左侧标题",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"请选择\"",
+            "usageExample": "<Transfer leftTitle=\"待选列表\">"
+        },
+        {
+            "name": "rightTitle",
+            "description": "右侧标题",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "\"已选择\"",
+            "usageExample": "<Transfer rightTitle=\"已选列表\">"
+        },
+        {
+            "name": "enableAdd",
+            "description": "控制右箭头按钮的可用状态",
+            "type": {
+                "raw": "() => boolean",
+                "kind": "function",
+                "functionSignature": "() => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Transfer :enableAdd=\"canAdd\">"
+        },
+        {
+            "name": "enableRemove",
+            "description": "控制左箭头按钮的可用状态",
+            "type": {
+                "raw": "() => boolean",
+                "kind": "function",
+                "functionSignature": "() => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Transfer :enableRemove=\"canRemove\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "add",
+            "vueEventName": "@add",
+            "description": "点击右箭头按钮时触发",
+            "payload": [],
+            "usageExample": "<Transfer @add=\"handleAdd\">",
+            "handlerExample": "const handleAdd = () => {\n  console.log('数据已添加到右侧');\n};"
+        },
+        {
+            "name": "remove",
+            "vueEventName": "@remove",
+            "description": "点击左箭头按钮时触发",
+            "payload": [],
+            "usageExample": "<Transfer @remove=\"handleRemove\">",
+            "handlerExample": "const handleRemove = () => {\n  console.log('数据已移回左侧');\n};"
+        }
+    ],
+    "methods": [
+        {
+            "name": "getData",
+            "description": "获取右侧已选择的节点数据",
+            "returnType": "TransferDataItem[]",
+            "usageExample": "const rightData = transferRef.value?.getData();"
+        },
+        {
+            "name": "getCheckedData",
+            "description": "获取勾选的节点数据",
+            "arguments": [
+                {
+                    "name": "type",
+                    "type": "'left' | 'right'",
+                    "description": "指定获取左侧或右侧的勾选数据"
+                }
+            ],
+            "returnType": "TransferDataItem[]",
+            "usageExample": "const leftChecked = transferRef.value?.getCheckedData('left');"
+        }
+    ],
+    "slots": [
+        {
+            "name": "header",
+            "description": "自定义整个头部内容",
+            "params": "(type: 'left' | 'right') => Children"
+        },
+        {
+            "name": "filter",
+            "description": "自定义检索内容",
+            "params": "(type: 'left' | 'right') => Children"
+        },
+        {
+            "name": "list",
+            "description": "自定义整个列表内容",
+            "params": "(type: 'left' | 'right') => Children"
+        },
+        {
+            "name": "label",
+            "description": "自定义每一项的渲染函数，类似于label属性",
+            "params": "(data: TransferDataItem, key: string, type: 'left' | 'right') => Children"
+        }
+    ],
+    "typeDefinitions": [
+        {
+            "name": "TransferDataItem",
+            "definition": "type TransferDataItem = {\n  key: string | number\n  label?: string\n  disabled?: boolean\n  [key: string]: any\n}",
+            "description": "穿梭框数据项类型"
+        }
+    ],
+    "examples": [
+        {
+            "id": "transfer_basic",
+            "title": "基础用法",
+            "description": "基本的穿梭框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Transfer } from '@king-design/vue';\n\nconst data = reactive([\n  { label: '选项0', key: 0 },\n  { label: '选项1', key: 1 },\n  { label: '选项2', key: 2 },\n  { label: '选项3', key: 3 },\n  { label: '选项4', key: 4 }\n]);\nconst value = ref<number[]>([]);\n</script>\n<template>\n  <div>\n    <Transfer :data=\"data\" v-model=\"value\" />\n    <p>已选择: {{ JSON.stringify(value) }}</p>\n  </div>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "data",
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的穿梭框"
+        },
+        {
+            "id": "transfer_filterable",
+            "title": "可搜索",
+            "description": "支持搜索过滤的穿梭框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Transfer } from '@king-design/vue';\n\nconst data = reactive([\n  { label: '北京', key: 'beijing' },\n  { label: '上海', key: 'shanghai' },\n  { label: '广州', key: 'guangzhou' },\n  { label: '深圳', key: 'shenzhen' },\n  { label: '杭州', key: 'hangzhou' }\n]);\nconst value = ref<string[]>([]);\n</script>\n<template>\n  <Transfer :data=\"data\" v-model=\"value\" filterable placeholder=\"输入城市名搜索\" />\n</template>",
+            "tags": [
+                "filterable",
+                "search"
+            ],
+            "usedProps": [
+                "data",
+                "value",
+                "filterable",
+                "placeholder"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建可搜索的穿梭框"
+        },
+        {
+            "id": "transfer_disabled",
+            "title": "禁用选项",
+            "description": "禁用某些选项",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Transfer } from '@king-design/vue';\n\nconst data = reactive([\n  { label: '选项0', key: 0 },\n  { label: '选项1（禁用）', key: 1, disabled: true },\n  { label: '选项2', key: 2 },\n  { label: '选项3（禁用）', key: 3, disabled: true },\n  { label: '选项4', key: 4 }\n]);\nconst value = ref<number[]>([0, 1]);\n</script>\n<template>\n  <Transfer :data=\"data\" v-model=\"value\" />\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "data",
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "禁用某些选项"
+        },
+        {
+            "id": "transfer_custom_key",
+            "title": "自定义属性名",
+            "description": "使用自定义的 key 和 label 属性名",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Transfer } from '@king-design/vue';\n\nconst data = reactive([\n  { id: 1, name: '张三' },\n  { id: 2, name: '李四' },\n  { id: 3, name: '王五' }\n]);\nconst value = ref<number[]>([]);\n</script>\n<template>\n  <Transfer :data=\"data\" v-model=\"value\" keyName=\"id\" labelName=\"name\" />\n</template>",
+            "tags": [
+                "keyName",
+                "labelName",
+                "custom"
+            ],
+            "usedProps": [
+                "data",
+                "value",
+                "keyName",
+                "labelName"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用 id 作为 key，name 作为 label"
+        },
+        {
+            "id": "transfer_custom_label",
+            "title": "自定义渲染",
+            "description": "自定义列表项渲染",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { reactive, ref } from 'vue';\nimport { Transfer } from '@king-design/vue';\n\nconst data = reactive([\n  { name: '主机A', desc: '前端服务器', ip: '192.168.1.1' },\n  { name: '主机B', desc: '后端服务器', ip: '192.168.1.2' },\n  { name: '主机C', desc: '数据库服务器', ip: '192.168.1.3' }\n]);\nconst value = ref<string[]>([]);\n</script>\n<template>\n  <Transfer :data=\"data\" v-model=\"value\" keyName=\"name\">\n    <template #label=\"[item]\">\n      <div>\n        <div style=\"font-weight: bold;\">{{ item.name }}</div>\n        <div style=\"font-size: 12px; color: #999;\">{{ item.desc }} | {{ item.ip }}</div>\n      </div>\n    </template>\n  </Transfer>\n</template>",
+            "tags": [
+                "label",
+                "slot",
+                "custom"
+            ],
+            "usedProps": [
+                "data",
+                "value",
+                "keyName"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义列表项的渲染内容"
+        },
+        {
+            "id": "transfer_methods",
+            "title": "获取数据",
+            "description": "使用方法获取穿梭框数据",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Transfer, Button } from '@king-design/vue';\n\nconst transfer = ref<InstanceType<typeof Transfer>>();\nconst data = reactive([\n  { label: '选项0', key: 0 },\n  { label: '选项1', key: 1 },\n  { label: '选项2', key: 2 }\n]);\nconst value = ref<number[]>([0]);\n\nconst handleGetData = () => {\n  const rightData = transfer.value?.getData();\n  console.log('右侧数据:', rightData);\n};\n</script>\n<template>\n  <div>\n    <Button @click=\"handleGetData\">获取右侧数据</Button>\n    <Transfer ref=\"transfer\" :data=\"data\" v-model=\"value\" />\n  </div>\n</template>",
+            "tags": [
+                "methods",
+                "getData"
+            ],
+            "usedProps": [
+                "data",
+                "value"
+            ],
+            "usedEvents": [],
+            "usedMethods": [
+                "getData"
+            ],
+            "scenario": "获取穿梭框右侧的数据"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "transfer_data_key",
+            "description": "data 中缺少 key 属性",
+            "wrongCode": "const data = [{ label: '选项1' }]; // 缺少 key",
+            "correctCode": "const data = [{ label: '选项1', key: 1 }];",
+            "explanation": "每个数据项必须有 key 属性（或通过 keyName 指定的属性）",
+            "relatedProps": [
+                "data",
+                "keyName"
+            ]
+        },
+        {
+            "id": "transfer_value_type",
+            "description": "value 类型错误",
+            "wrongCode": "const value = ref(0); // 应该是数组",
+            "correctCode": "const value = ref<number[]>([]);",
+            "explanation": "value 必须是数组类型",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "transfer_keyname_mismatch",
+            "description": "keyName 与实际属性名不匹配",
+            "wrongCode": "const data = [{ id: 1, name: '张三' }];\n<Transfer :data=\"data\" /> <!-- 默认使用 key，但数据中是 id -->",
+            "correctCode": "const data = [{ id: 1, name: '张三' }];\n<Transfer :data=\"data\" keyName=\"id\" labelName=\"name\" />",
+            "explanation": "如果数据中使用非默认的属性名，需要通过 keyName 和 labelName 指定",
+            "relatedProps": [
+                "keyName",
+                "labelName"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "穿梭框",
+        "transfer",
+        "双列表",
+        "选择器",
+        "列表转移"
+    ],
+    "useCases": [
+        "权限分配",
+        "用户组管理",
+        "标签选择",
+        "资源分配",
+        "数据筛选"
+    ],
+    "relatedComponents": [
+        "Checkbox",
+        "Select"
+    ]
+}