king-design-analyzer 2.1.9 → 2.2.0

package/components/searchselect.json

@@ -0,0 +1,195 @@
+{
+    "id": "searchselect",
+    "name": "SearchSelect",
+    "displayName": "搜索下拉框",
+    "category": "form",
+    "description": "面向搜索维度或搜索值选择的业务下拉组件，适合在搜索框左侧选择字段，也适合承载小规模筛选选项。",
+    "importStatement": "import { SearchSelect } from '@ksyun-internal/versatile';",
+    "inherits": [
+        {
+            "component": "Select",
+            "include": [
+                "props"
+            ],
+            "exclude": [
+                "value"
+            ]
+        }
+    ],
+    "props": [
+        {
+            "name": "label",
+            "description": "下拉框前置标题或说明文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "helper",
+            "description": "辅助提示文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "modelValue",
+            "description": "当前选中的值",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"\""
+        },
+        {
+            "name": "searches",
+            "description": "搜索选项列表",
+            "type": {
+                "raw": "SearchType[] | Record<string, SearchType>",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "[]"
+        },
+        {
+            "name": "searchKeyName",
+            "description": "搜索项中 value 字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"key\""
+        },
+        {
+            "name": "searchLabelName",
+            "description": "搜索项中 label 字段名",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"label\""
+        },
+        {
+            "name": "searchGroups",
+            "description": "搜索项分组配置",
+            "type": {
+                "raw": "SearchGroupItem[]",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "undefined"
+        },
+        {
+            "name": "showValue",
+            "description": "选项展示时是否同时显示 value",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false"
+        }
+    ],
+    "events": [
+        {
+            "name": "change:value",
+            "vueEventName": "@change:value",
+            "description": "下拉选中值变化时触发，通常用于联动输入框占位或直接发起查询。",
+            "params": [
+                {
+                    "name": "value",
+                    "type": "string",
+                    "description": "当前选中的搜索项 key。",
+                    "optional": true
+                }
+            ]
+        }
+    ],
+    "slots": [],
+    "methods": [],
+    "examples": [
+        {
+            "id": "searchselect_type",
+            "title": "选择搜索维度",
+            "description": "在组合搜索中用下拉框切换当前搜索字段。",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SearchSelect } from '@ksyun-internal/versatile';\n\nconst searchKey = ref('name');\nconst searches = [\n  { key: 'name', label: '实例名称' },\n  { key: 'id', label: '实例 ID' },\n  { key: 'ip', label: '内网 IP' },\n];\n</script>\n\n<template>\n  <SearchSelect\n    v-model=\"searchKey\"\n    label=\"搜索字段\"\n    :searches=\"searches\"\n  />\n</template>",
+            "tags": [
+                "search",
+                "select"
+            ],
+            "usedProps": [
+                "modelValue",
+                "label",
+                "searches"
+            ],
+            "usedEvents": [
+                "change:value"
+            ],
+            "usedMethods": [],
+            "scenario": "在列表搜索区切换当前按哪个字段检索。"
+        },
+        {
+            "id": "searchselect_show_value",
+            "title": "同时展示标签和值",
+            "description": "在选项较多时同时展示 value，方便用户准确识别字段。",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { SearchSelect } from '@ksyun-internal/versatile';\n\nconst searchKey = ref('instanceId');\nconst searches = [\n  { key: 'instanceId', label: '实例 ID' },\n  { key: 'privateIp', label: '内网 IP' },\n  { key: 'projectId', label: '项目 ID' },\n];\n</script>\n\n<template>\n  <SearchSelect\n    v-model=\"searchKey\"\n    :searches=\"searches\"\n    helper=\"请选择检索字段\"\n    :show-value=\"true\"\n  />\n</template>",
+            "tags": [
+                "search",
+                "value"
+            ],
+            "usedProps": [
+                "modelValue",
+                "searches",
+                "helper",
+                "showValue"
+            ],
+            "usedEvents": [
+                "change:value"
+            ],
+            "usedMethods": [],
+            "scenario": "在字段名称可能重复或歧义较大时同时展示 key 和 label。"
+        }
+    ],
+    "searchKeywords": [
+        "search select",
+        "search field select",
+        "filter select",
+        "下拉搜索",
+        "搜索下拉框",
+        "检索字段选择",
+        "筛选字段",
+        "条件下拉"
+    ],
+    "useCases": [
+        "搜索类型选择",
+        "业务下拉筛选",
+        "组合搜索左侧字段切换",
+        "小规模筛选项选择"
+    ],
+    "relatedComponents": [
+        "Search",
+        "Select"
+    ],
+    "typeDefinitions": [
+        {
+            "name": "SearchType",
+            "definition": "type SearchType = {\n  key: string\n  label: string\n  helper?: string\n  disabled?: boolean\n}",
+            "description": "下拉中可选的搜索字段配置，至少包含 key 和 label。"
+        },
+        {
+            "name": "SearchGroupItem",
+            "definition": "type SearchGroupItem = {\n  label: string\n  keys: string[]\n}",
+            "description": "搜索字段分组配置，用于按资源域或功能域展示下拉选项。"
+        }
+    ]
+}