king-design-analyzer 1.0.0

package/components/virtuallist.json

@@ -0,0 +1,178 @@
+{
+    "id": "virtuallist",
+    "name": "VirtualList",
+    "displayName": "虚拟列表",
+    "category": "data-display",
+    "description": "虚拟列表组件，用于高性能渲染大量数据。只渲染可视区域内的元素，大幅减少 DOM 节点数量，提升滚动性能。适用于长列表、大数据量表格、无限滚动等场景。",
+    "importStatement": "import { VirtualList } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "disabled",
+            "description": "是否禁用虚拟化，禁用后会渲染所有元素",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<VirtualList disabled>"
+        }
+    ],
+    "events": [],
+    "methods": [],
+    "subComponents": [
+        {
+            "name": "VirtualListContainer",
+            "description": "虚拟列表容器组件，用于组合式使用"
+        },
+        {
+            "name": "VirtualListWrapper",
+            "description": "虚拟列表包装器组件，可通过 tagName 属性指定标签类型",
+            "props": [
+                {
+                    "name": "tagName",
+                    "description": "指定渲染的标签名",
+                    "type": {
+                        "raw": "string",
+                        "kind": "string"
+                    },
+                    "required": false,
+                    "default": "\"div\"",
+                    "usageExample": "<VirtualListWrapper tagName=\"ul\">"
+                }
+            ]
+        },
+        {
+            "name": "VirtualListPhantom",
+            "description": "占位组件，用于撑开滚动高度"
+        },
+        {
+            "name": "VirtualListRows",
+            "description": "行渲染组件，包裹实际渲染的列表项"
+        }
+    ],
+    "examples": [
+        {
+            "id": "virtuallist_basic",
+            "title": "基础用法",
+            "description": "渲染大量数据",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { VirtualList } from '@king-design/vue';\n\nconst data = ref<{value: number; label: string}[]>([]);\n\nonMounted(() => {\n  const arr = [];\n  for (let i = 0; i < 10000; i++) {\n    arr.push({ value: i, label: `列表项 ${i}` });\n  }\n  data.value = arr;\n});\n</script>\n<template>\n  <VirtualList style=\"height: 400px;\">\n    <div v-for=\"item in data\" :key=\"item.value\" style=\"height: 40px; line-height: 40px;\">\n      {{ item.label }}\n    </div>\n  </VirtualList>\n</template>",
+            "tags": [
+                "basic",
+                "large-data"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "渲染万级数据量的列表"
+        },
+        {
+            "id": "virtuallist_variable_height",
+            "title": "不定高度",
+            "description": "支持不定高度的列表项",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { VirtualList } from '@king-design/vue';\n\nconst data = ref<{value: number; label: string}[]>([]);\n\nonMounted(() => {\n  const arr = [];\n  for (let i = 0; i < 10000; i++) {\n    const content = '内容'.repeat(Math.floor(Math.random() * 5) + 1);\n    arr.push({ value: i, label: `项目 ${i}: ${content}` });\n  }\n  data.value = arr;\n});\n</script>\n<template>\n  <VirtualList style=\"width: 300px; height: 400px;\">\n    <div v-for=\"item in data\" :key=\"item.value\" style=\"padding: 10px; border-bottom: 1px solid #eee;\">\n      {{ item.label }}\n    </div>\n  </VirtualList>\n</template>",
+            "tags": [
+                "variable-height"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "处理不定高度的列表项"
+        },
+        {
+            "id": "virtuallist_composite",
+            "title": "组合式使用",
+            "description": "使用子组件进行组合",
+            "difficulty": "hard",
+            "code": "<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { VirtualListContainer, VirtualListWrapper, VirtualListPhantom, VirtualListRows } from '@king-design/vue';\n\nconst data = ref<{value: number; label: string}[]>([]);\n\nonMounted(() => {\n  const arr = [];\n  for (let i = 0; i < 10000; i++) {\n    arr.push({ value: i, label: `列表项 ${i}` });\n  }\n  data.value = arr;\n});\n</script>\n<template>\n  <div style=\"height: 400px;\">\n    <VirtualListContainer>\n      <VirtualListPhantom />\n      <VirtualListWrapper tagName=\"ul\">\n        <VirtualListRows>\n          <li v-for=\"item in data\" :key=\"item.value\" style=\"height: 40px; line-height: 40px;\">\n            {{ item.label }}\n          </li>\n        </VirtualListRows>\n      </VirtualListWrapper>\n    </VirtualListContainer>\n  </div>\n</template>",
+            "tags": [
+                "composite",
+                "advanced"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用子组件进行复杂布局"
+        },
+        {
+            "id": "virtuallist_dynamic",
+            "title": "动态更新",
+            "description": "动态添加和删除数据",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { VirtualList, Button } from '@king-design/vue';\n\nconst data = ref<{value: number; label: string}[]>([]);\n\nonMounted(() => {\n  initData();\n});\n\nconst initData = () => {\n  const arr = [];\n  for (let i = 0; i < 1000; i++) {\n    arr.push({ value: i, label: `列表项 ${i}` });\n  }\n  data.value = arr;\n};\n\nconst addItems = () => {\n  const len = data.value.length;\n  for (let i = 0; i < 10; i++) {\n    data.value.push({ value: len + i, label: `新增项 ${len + i}` });\n  }\n};\n</script>\n<template>\n  <div>\n    <Button @click=\"addItems\">新增10项</Button>\n    <VirtualList style=\"height: 400px;\">\n      <div v-for=\"item in data\" :key=\"item.value\" style=\"height: 40px; line-height: 40px;\">\n        {{ item.label }}\n      </div>\n    </VirtualList>\n  </div>\n</template>",
+            "tags": [
+                "dynamic",
+                "update"
+            ],
+            "usedProps": [],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "动态更新列表数据"
+        },
+        {
+            "id": "virtuallist_disabled",
+            "title": "禁用虚拟化",
+            "description": "禁用虚拟化渲染所有元素",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { VirtualList } from '@king-design/vue';\n\nconst data = ref([\n  { value: 1, label: '项目 1' },\n  { value: 2, label: '项目 2' },\n  { value: 3, label: '项目 3' }\n]);\n</script>\n<template>\n  <VirtualList disabled style=\"height: 200px;\">\n    <div v-for=\"item in data\" :key=\"item.value\">\n      {{ item.label }}\n    </div>\n  </VirtualList>\n</template>",
+            "tags": [
+                "disabled"
+            ],
+            "usedProps": [
+                "disabled"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "数据量较小时禁用虚拟化"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "virtuallist_no_height",
+            "description": "容器未设置高度",
+            "wrongCode": "<VirtualList> <!-- 没有高度，无法滚动 -->\n  <div v-for=\"item in data\" :key=\"item.value\">...</div>\n</VirtualList>",
+            "correctCode": "<VirtualList style=\"height: 400px;\">\n  <div v-for=\"item in data\" :key=\"item.value\">...</div>\n</VirtualList>",
+            "explanation": "VirtualList 容器必须设置固定高度才能正常工作",
+            "relatedProps": []
+        },
+        {
+            "id": "virtuallist_missing_key",
+            "description": "列表项缺少 key",
+            "wrongCode": "<div v-for=\"item in data\">{{ item.label }}</div>",
+            "correctCode": "<div v-for=\"item in data\" :key=\"item.value\">{{ item.label }}</div>",
+            "explanation": "每个列表项必须设置唯一的 key 以确保正确渲染",
+            "relatedProps": []
+        },
+        {
+            "id": "virtuallist_small_data",
+            "description": "数据量较小时启用虚拟化",
+            "wrongCode": "const data = [1, 2, 3]; // 只有 3 条数据\n<VirtualList>...</VirtualList>",
+            "correctCode": "const data = [1, 2, 3];\n<VirtualList disabled>...</VirtualList>",
+            "explanation": "数据量较小时建议禁用虚拟化，避免不必要的计算开销",
+            "relatedProps": [
+                "disabled"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "虚拟列表",
+        "virtuallist",
+        "大数据",
+        "无限滚动",
+        "高性能",
+        "长列表"
+    ],
+    "useCases": [
+        "长列表展示",
+        "聊天记录",
+        "日志列表",
+        "大数据表格",
+        "无限滚动"
+    ],
+    "relatedComponents": [
+        "Table",
+        "Select"
+    ]
+}

package/dist/ast/index.d.mts

@@ -0,0 +1,71 @@
+interface RuleViolation {
+    rule: string;
+    match: string;
+    suggestion: string;
+}
+/**
+ * 使用 AST 分析 Vue 代码 (Async)
+ */
+declare function analyzeCodeWithAST(code: string): Promise<RuleViolation[]>;
+
+interface ComponentProp {
+    name: string;
+    description?: string;
+    type: {
+        raw: string;
+        kind: string;
+        unionTypes?: any[];
+    };
+    required: boolean;
+    allowedValues?: {
+        value: any;
+    }[];
+}
+interface ComponentEvent {
+    name: string;
+}
+interface ComponentSlot {
+    name: string;
+}
+interface MistakeEntry {
+    id: string;
+    description: string;
+    wrongCode: string;
+    correctCode: string;
+    explanation: string;
+}
+interface ComponentMetadata {
+    name: string;
+    props: ComponentProp[];
+    events: ComponentEvent[];
+    slots: ComponentSlot[];
+    subComponents?: ComponentMetadata[];
+    commonMistakes?: MistakeEntry[];
+    importStatement?: string;
+    requiredParent?: string;
+}
+declare class ComponentRegistry {
+    private components;
+    private loaded;
+    private watcher;
+    private metadataPath;
+    load(): Promise<void>;
+    /**
+     * 重新加载所有组件元数据
+     */
+    reload(): Promise<void>;
+    /**
+     * 开始监听文件变化
+     */
+    private startWatching;
+    /**
+     * 停止监听
+     */
+    stopWatching(): void;
+    getComponent(name: string): ComponentMetadata | undefined;
+    getAllComponentNames(): string[];
+    isKnownComponent(name: string): boolean;
+}
+declare const componentRegistry: ComponentRegistry;
+
+export { type ComponentEvent, type ComponentMetadata, type ComponentProp, type ComponentSlot, type MistakeEntry, type RuleViolation, analyzeCodeWithAST, componentRegistry };

package/dist/ast/index.d.ts

@@ -0,0 +1,71 @@
+interface RuleViolation {
+    rule: string;
+    match: string;
+    suggestion: string;
+}
+/**
+ * 使用 AST 分析 Vue 代码 (Async)
+ */
+declare function analyzeCodeWithAST(code: string): Promise<RuleViolation[]>;
+
+interface ComponentProp {
+    name: string;
+    description?: string;
+    type: {
+        raw: string;
+        kind: string;
+        unionTypes?: any[];
+    };
+    required: boolean;
+    allowedValues?: {
+        value: any;
+    }[];
+}
+interface ComponentEvent {
+    name: string;
+}
+interface ComponentSlot {
+    name: string;
+}
+interface MistakeEntry {
+    id: string;
+    description: string;
+    wrongCode: string;
+    correctCode: string;
+    explanation: string;
+}
+interface ComponentMetadata {
+    name: string;
+    props: ComponentProp[];
+    events: ComponentEvent[];
+    slots: ComponentSlot[];
+    subComponents?: ComponentMetadata[];
+    commonMistakes?: MistakeEntry[];
+    importStatement?: string;
+    requiredParent?: string;
+}
+declare class ComponentRegistry {
+    private components;
+    private loaded;
+    private watcher;
+    private metadataPath;
+    load(): Promise<void>;
+    /**
+     * 重新加载所有组件元数据
+     */
+    reload(): Promise<void>;
+    /**
+     * 开始监听文件变化
+     */
+    private startWatching;
+    /**
+     * 停止监听
+     */
+    stopWatching(): void;
+    getComponent(name: string): ComponentMetadata | undefined;
+    getAllComponentNames(): string[];
+    isKnownComponent(name: string): boolean;
+}
+declare const componentRegistry: ComponentRegistry;
+
+export { type ComponentEvent, type ComponentMetadata, type ComponentProp, type ComponentSlot, type MistakeEntry, type RuleViolation, analyzeCodeWithAST, componentRegistry };

package/dist/ast/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+require('../chunk-YTEYDSDW.js');
+var chunk5IF32MBB_js = require('../chunk-5IF32MBB.js');
+
+
+
+Object.defineProperty(exports, "analyzeCodeWithAST", {
+  enumerable: true,
+  get: function () { return chunk5IF32MBB_js.analyzeCodeWithAST; }
+});
+Object.defineProperty(exports, "componentRegistry", {
+  enumerable: true,
+  get: function () { return chunk5IF32MBB_js.componentRegistry; }
+});

package/dist/ast/index.mjs

@@ -0,0 +1,2 @@
+import '../chunk-5H7N2A5X.mjs';
+export { analyzeCodeWithAST, componentRegistry } from '../chunk-C3L4IXJC.mjs';

package/dist/chunk-4BUGNH4F.mjs

@@ -0,0 +1,62 @@
+import { compileSFC } from './chunk-TB6BF5TJ.mjs';
+
+// src/static/index.ts
+function validateCompilation(code) {
+  const scopeId = `validate-${Date.now()}`;
+  const scriptOpenCount = (code.match(/<script[\s\S]*?>/g) || []).length;
+  const scriptCloseCount = (code.match(/<\/script>/g) || []).length;
+  const templateOpenCount = (code.match(/<template>/g) || []).length;
+  const templateCloseCount = (code.match(/<\/template>/g) || []).length;
+  if (scriptCloseCount > 0 && scriptOpenCount === 0) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: ["SFC \u7ED3\u6784\u9519\u8BEF: \u7F3A\u5C11 <script> \u5F00\u59CB\u6807\u7B7E"]
+    };
+  }
+  if (scriptOpenCount > scriptCloseCount) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: ["SFC \u7ED3\u6784\u9519\u8BEF: \u7F3A\u5C11 </script> \u7ED3\u675F\u6807\u7B7E"]
+    };
+  }
+  if (templateOpenCount > 0 && templateCloseCount === 0) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: ["SFC \u7ED3\u6784\u9519\u8BEF: \u7F3A\u5C11 </template> \u7ED3\u675F\u6807\u7B7E"]
+    };
+  }
+  const hasValidScript = scriptOpenCount > 0 && scriptCloseCount > 0;
+  const hasValidTemplate = templateOpenCount > 0 && templateCloseCount > 0;
+  if (!hasValidScript && !hasValidTemplate) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: ["SFC \u7ED3\u6784\u9519\u8BEF: \u7F3A\u5C11 <template> \u6216 <script> \u6807\u7B7E"]
+    };
+  }
+  const result = compileSFC(code, scopeId);
+  if (result.error) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: [result.error]
+    };
+  }
+  if (!result.template && !result.script) {
+    return {
+      name: "\u7F16\u8BD1\u68C0\u67E5",
+      passed: false,
+      errors: ["\u4EE3\u7801\u4E3A\u7A7A\u6216\u683C\u5F0F\u4E0D\u6B63\u786E"]
+    };
+  }
+  return {
+    name: "\u7F16\u8BD1\u68C0\u67E5",
+    passed: true,
+    errors: []
+  };
+}
+
+export { validateCompilation };

package/dist/chunk-5H7N2A5X.mjs

@@ -0,0 +1 @@
+