king-design-analyzer 1.0.0

package/components/pagination.json

@@ -0,0 +1,444 @@
+{
+    "id": "pagination",
+    "name": "Pagination",
+    "displayName": "分页",
+    "category": "navigation",
+    "description": "分页导航组件，用于数据量较大时进行分页展示。支持页码跳转、每页条数切换、总数显示等功能。",
+    "importStatement": "import { Pagination } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "当前页码，可用 v-model 双向绑定",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "1",
+            "usageExample": "<Pagination v-model=\"currentPage\" :total=\"100\" />"
+        },
+        {
+            "name": "total",
+            "description": "数据总条数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "0",
+            "usageExample": "<Pagination :total=\"1000\" />"
+        },
+        {
+            "name": "limit",
+            "description": "每页条数，可用 v-model:limit 双向绑定",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "10",
+            "usageExample": "<Pagination v-model:limit=\"pageSize\" :total=\"100\" />"
+        },
+        {
+            "name": "limits",
+            "description": "可选的每页条数列表",
+            "type": {
+                "raw": "Array<number>",
+                "kind": "array"
+            },
+            "required": false,
+            "default": "[10, 20, 50]",
+            "usageExample": "<Pagination :limits=\"[20, 50, 100, 200]\" :total=\"1000\" />"
+        },
+        {
+            "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": "<Pagination size=\"small\" :total=\"100\" />"
+        },
+        {
+            "name": "counts",
+            "description": "展示的页码按钮个数",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false,
+            "default": "7",
+            "usageExample": "<Pagination :counts=\"5\" :total=\"100\" />"
+        },
+        {
+            "name": "flat",
+            "description": "是否展示无边框样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Pagination flat :total=\"100\" />"
+        },
+        {
+            "name": "simple",
+            "description": "是否展示简洁样式",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Pagination simple :total=\"100\" />"
+        },
+        {
+            "name": "showTotal",
+            "description": "是否显示总条数",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Pagination :showTotal=\"false\" :total=\"100\" />"
+        },
+        {
+            "name": "showGoto",
+            "description": "是否显示快速跳转框",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Pagination showGoto :total=\"100\" />"
+        },
+        {
+            "name": "showLimits",
+            "description": "是否显示每页条数选择框",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Pagination :showLimits=\"false\" :total=\"100\" />"
+        },
+        {
+            "name": "disableBtn",
+            "description": "禁用页码按钮的函数，\"上一页\"\"下一页\"按钮依然可点",
+            "type": {
+                "raw": "(page: number, limit: number) => boolean",
+                "kind": "function",
+                "functionSignature": "(page: number, limit: number) => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Pagination :disableBtn=\"(page) => page > 10\" :total=\"200\" />"
+        },
+        {
+            "name": "disablePage",
+            "description": "同时禁用页码按钮和\"上一页\"\"下一页\"按钮的函数",
+            "type": {
+                "raw": "(page: number, limit: number) => boolean",
+                "kind": "function",
+                "functionSignature": "(page: number, limit: number) => boolean"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Pagination :disablePage=\"(page) => page > 10\" :total=\"200\" />"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "@change",
+            "description": "value 和 limit 变化时触发，同时变化不会重复触发",
+            "payload": [
+                {
+                    "name": "value",
+                    "type": "number",
+                    "description": "当前页码"
+                },
+                {
+                    "name": "limit",
+                    "type": "number",
+                    "description": "每页条数"
+                }
+            ],
+            "usageExample": "<Pagination @change=\"handleChange\" :total=\"100\" />",
+            "handlerExample": "const handleChange = ({value, limit}: {value: number; limit: number}) => {\n  console.log(`当前页: ${value}, 每页: ${limit}`);\n  fetchData(value, limit);\n};"
+        }
+    ],
+    "methods": [],
+    "examples": [
+        {
+            "id": "pagination_basic",
+            "title": "基础用法",
+            "description": "基本的分页组件",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination v-model=\"currentPage\" :total=\"100\" />\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "total"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的分页组件"
+        },
+        {
+            "id": "pagination_change_event",
+            "title": "监听变化",
+            "description": "监听分页和每页条数变化",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination, Message } from '@king-design/vue';\n\nconst currentPage = ref(1);\nconst limit = ref(10);\n\nconst handleChange = ({value, limit}: {value: number; limit: number}) => {\n  Message.info(`当前页: ${value}, 每页: ${limit}`);\n};\n</script>\n<template>\n  <Pagination \n    v-model=\"currentPage\" \n    v-model:limit=\"limit\" \n    :total=\"100\" \n    @change=\"handleChange\" \n  />\n</template>",
+            "tags": [
+                "change",
+                "event",
+                "v-model:limit"
+            ],
+            "usedProps": [
+                "value",
+                "limit",
+                "total"
+            ],
+            "usedEvents": [
+                "change"
+            ],
+            "usedMethods": [],
+            "scenario": "监听分页变化并加载对应数据"
+        },
+        {
+            "id": "pagination_simple",
+            "title": "简洁样式",
+            "description": "简洁模式的分页",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination v-model=\"currentPage\" :total=\"100\" simple />\n</template>",
+            "tags": [
+                "simple",
+                "minimal"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "simple"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建简洁样式的分页，适合空间有限的场景"
+        },
+        {
+            "id": "pagination_goto",
+            "title": "快速跳转",
+            "description": "显示快速跳转输入框",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination v-model=\"currentPage\" :total=\"1000\" showGoto />\n</template>",
+            "tags": [
+                "showGoto",
+                "jump"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "showGoto"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "支持用户直接输入页码跳转"
+        },
+        {
+            "id": "pagination_custom_limits",
+            "title": "自定义每页条数",
+            "description": "自定义可选的每页条数列表",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination \n    v-model=\"currentPage\" \n    :total=\"1000\" \n    :limits=\"[20, 50, 100, 200]\" \n    :limit=\"20\" \n  />\n</template>",
+            "tags": [
+                "limits",
+                "pageSize"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "limits",
+                "limit"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义每页条数的可选项"
+        },
+        {
+            "id": "pagination_hide_controls",
+            "title": "隐藏控件",
+            "description": "隐藏总数和每页条数选择器",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination \n    v-model=\"currentPage\" \n    :total=\"100\" \n    :showTotal=\"false\" \n    :showLimits=\"false\" \n  />\n</template>",
+            "tags": [
+                "showTotal",
+                "showLimits",
+                "minimal"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "showTotal",
+                "showLimits"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建只显示页码的精简分页"
+        },
+        {
+            "id": "pagination_sizes",
+            "title": "不同尺寸",
+            "description": "展示不同尺寸的分页",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination v-model=\"currentPage\" :total=\"100\" size=\"large\" />\n  <Pagination v-model=\"currentPage\" :total=\"100\" size=\"default\" />\n  <Pagination v-model=\"currentPage\" :total=\"100\" size=\"small\" />\n  <Pagination v-model=\"currentPage\" :total=\"100\" size=\"mini\" />\n</template>",
+            "tags": [
+                "size",
+                "large",
+                "small",
+                "mini"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "size"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "展示不同尺寸的分页组件"
+        },
+        {
+            "id": "pagination_flat",
+            "title": "无边框样式",
+            "description": "扁平无边框的分页样式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Pagination } from '@king-design/vue';\n\nconst currentPage = ref(1);\n</script>\n<template>\n  <Pagination v-model=\"currentPage\" :total=\"100\" flat />\n</template>",
+            "tags": [
+                "flat",
+                "borderless"
+            ],
+            "usedProps": [
+                "value",
+                "total",
+                "flat"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建无边框扁平样式的分页"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "pagination_missing_total",
+            "description": "未设置 total 属性",
+            "wrongCode": "<Pagination v-model=\"currentPage\" />",
+            "correctCode": "<Pagination v-model=\"currentPage\" :total=\"100\" />",
+            "explanation": "必须设置 total 属性来指定数据总条数，否则分页无法正确计算总页数",
+            "relatedProps": [
+                "total"
+            ]
+        },
+        {
+            "id": "pagination_size_typo",
+            "description": "使用不存在的 size 值 (Pagination)",
+            "wrongCode": "<Pagination size=\"medium\" :total=\"100\" />",
+            "correctCode": "<Pagination size=\"default\" :total=\"100\" />",
+            "explanation": "Pagination 的 size 只支持 large, default, small, mini。常见错误是使用 medium 值。",
+            "relatedProps": [
+                "size"
+            ]
+        },
+        {
+            "id": "pagination_limit_not_in_limits",
+            "description": "limit 值不在 limits 列表中",
+            "wrongCode": "<Pagination :limit=\"15\" :limits=\"[10, 20, 50]\" :total=\"100\" />",
+            "correctCode": "<Pagination :limit=\"10\" :limits=\"[10, 20, 50]\" :total=\"100\" />",
+            "explanation": "limit 的初始值应该在 limits 列表中，否则可能导致显示异常",
+            "relatedProps": [
+                "limit",
+                "limits"
+            ]
+        },
+        {
+            "id": "pagination_change_destructure",
+            "description": "change 事件参数解构错误",
+            "wrongCode": "const handleChange = (value, limit) => {}",
+            "correctCode": "const handleChange = ({value, limit}: {value: number; limit: number}) => {}",
+            "explanation": "change 事件的参数是一个对象，需要解构获取 value 和 limit",
+            "relatedProps": []
+        },
+        {
+            "id": "pagination_wrong_event_name",
+            "description": "错误使用 Element UI 风格事件名",
+            "wrongCode": "<Pagination @current-change=\"...\" @size-change=\"...\" />",
+            "correctCode": "<Pagination @change=\"...\" />",
+            "explanation": "KPC Pagination 不支持 `@current-change` 或 `@size-change`，请统一使用 `@change` 事件监听页码或每页条数变化。",
+            "relatedEvents": [
+                "change"
+            ]
+        },
+        {
+            "id": "pagination_binding_recommendation",
+            "description": "建议使用 v-model 进行双向绑定",
+            "wrongCode": "<Pagination :value=\"page\" :limit=\"size\" @change=\"...\" />",
+            "correctCode": "<Pagination v-model=\"page\" v-model:limit=\"size\" />",
+            "explanation": "推荐使用 `v-model` 绑定当前页码，`v-model:limit` 绑定每页条数，更加简洁。",
+            "relatedProps": [
+                "value",
+                "limit"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "分页",
+        "pagination",
+        "翻页",
+        "页码",
+        "pager",
+        "总数",
+        "每页",
+        "跳转"
+    ],
+    "useCases": [
+        "表格数据分页",
+        "列表分页展示",
+        "搜索结果分页",
+        "文章列表分页",
+        "商品列表分页"
+    ],
+    "relatedComponents": [
+        "Table"
+    ]
+}

package/components/paginationplus.json

@@ -0,0 +1,74 @@
+{
+    "id": "paginationplus",
+    "name": "PaginationPlus",
+    "displayName": "增强分页",
+    "category": "navigation",
+    "description": "集成选中统计和操作的分页组件，继承自 Pagination。",
+    "importStatement": "import { PaginationPlus } from '@ksyun-internal/versatile';",
+    "props": [
+        {
+            "name": "modelValue",
+            "description": "当前页码",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "checkedKeys",
+            "description": "选中的行的 key 列表",
+            "type": {
+                "raw": "any[]",
+                "kind": "array"
+            },
+            "required": false
+        },
+        {
+            "name": "checkedLength",
+            "description": "选中的总数量",
+            "type": {
+                "raw": "number",
+                "kind": "number"
+            },
+            "required": false
+        },
+        {
+            "name": "showCheckedTotal",
+            "description": "是否显示选中统计信息",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true"
+        }
+    ],
+    "events": [
+        {
+            "name": "change",
+            "vueEventName": "change",
+            "description": "页码或每页条数改变时触发",
+            "payload": [
+                {
+                    "name": "data",
+                    "type": "{ page: number, limit: number }",
+                    "description": "分页信息"
+                }
+            ],
+            "usageExample": "<PaginationPlus @change=\"onChange\" />",
+            "handlerExample": "({ page, limit }) => { params.page = page; }"
+        }
+    ],
+    "methods": [],
+    "examples": [],
+    "searchKeywords": [
+        "pagination",
+        "page",
+        "paging",
+        "分页"
+    ],
+    "useCases": [
+        "列表页分页控制"
+    ]
+}