From 4775f309dfe22da2dc697c9ddbf44e3f1d0906d6 Mon Sep 17 00:00:00 2001
From: Simon He <57086651+Simon-He95@users.noreply.github.com>
Date: Fri, 14 Jul 2023 09:57:58 +0800
Subject: [PATCH] refactor: use propsReducer & componentsReducer

---
 src/ui/antDesignVue/antDesignVue2/index.ts | 69 ++--------------
 src/ui/antDesignVue/antDesignVue3/index.ts | 69 ++--------------
 src/ui/antd/antd4/anchor.json              | 33 +-------
 src/ui/antd/antd4/index.ts                 | 69 ++--------------
 src/ui/antd/antd5/anchor.json              | 33 +-------
 src/ui/antd/antd5/index.ts                 | 69 ++--------------
 src/ui/elementUI/elementUi2/index.ts       | 94 ++--------------------
 src/ui/utils.ts                            | 94 ++++++++++++++++++++++
 src/ui/vant/vant4/index.ts                 | 69 ++--------------
 src/ui/varlet/varlet2/index.ts             | 69 ++--------------
 10 files changed, 131 insertions(+), 537 deletions(-)
 create mode 100644 src/ui/utils.ts

diff --git a/src/ui/antDesignVue/antDesignVue2/index.ts b/src/ui/antDesignVue/antDesignVue2/index.ts
index c0d66a1b..c8e5cffa 100644
--- a/src/ui/antDesignVue/antDesignVue2/index.ts
+++ b/src/ui/antDesignVue/antDesignVue2/index.ts
@@ -1,68 +1,14 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 
 export function antDesignVue2() {
   const map: any = [
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        let { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-        name = name.replace(/-(\w)/g, (_: string, v: string) => v.toUpperCase())
-        const snippet = `${name}="$\{1:on${name[0].toUpperCase()}${name.slice(1)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="on${name[0].toUpperCase()}${name.slice(1)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function antDesignVue2Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -138,11 +84,6 @@ export function antDesignVue2Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/antDesignVue/antDesignVue3/index.ts b/src/ui/antDesignVue/antDesignVue3/index.ts
index 8d5fb5b1..17a964a9 100644
--- a/src/ui/antDesignVue/antDesignVue3/index.ts
+++ b/src/ui/antDesignVue/antDesignVue3/index.ts
@@ -1,68 +1,14 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 
 export function antDesignVue3() {
   const map: any = [
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        let { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-        name = name.replace(/-(\w)/g, (_: string, v: string) => v.toUpperCase())
-        const snippet = `${name}="$\{1:on${name[0].toUpperCase()}${name.slice(1)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="on${name[0].toUpperCase()}${name.slice(1)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function antDesignVue3Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -138,11 +84,6 @@ export function antDesignVue3Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/antd/antd4/anchor.json b/src/ui/antd/antd4/anchor.json
index 570c150e..c1357ba4 100644
--- a/src/ui/antd/antd4/anchor.json
+++ b/src/ui/antd/antd4/anchor.json
@@ -47,38 +47,7 @@
       "value": "",
       "description": "数据化配置选项内容，支持通过 children 嵌套",
       "default": "-",
-      "type": {
-        "key": {
-          "value": "",
-          "description": "唯一标志",
-          "default": "—",
-          "type": "string | number"
-        },
-        "href": {
-          "value": "",
-          "description": "锚点链接",
-          "default": "—",
-          "type": "string"
-        },
-        "title": {
-          "value": "",
-          "description": "文字内容",
-          "default": "—",
-          "type": "ReactNode"
-        },
-        "target": {
-          "value": "",
-          "description": "该属性指定在何处显示链接的资源",
-          "default": "—",
-          "type": "string"
-        },
-        "children": {
-          "value": "",
-          "description": "嵌套的 Anchor Link，注意：水平方向该属性不支持",
-          "default": "—",
-          "type": "[]"
-        }
-      }
+      "type": ""
     },
     "direction": {
       "value": "",
diff --git a/src/ui/antd/antd4/index.ts b/src/ui/antd/antd4/index.ts
index 2844ee6c..ce3e6123 100644
--- a/src/ui/antd/antd4/index.ts
+++ b/src/ui/antd/antd4/index.ts
@@ -1,5 +1,4 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 import Divider from './divider.json'
 import Row from './row.json'
 import Col from './col.json'
@@ -31,64 +30,11 @@ export function antd4() {
     BreadCrumb,
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        const { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-
-        const snippet = `${name}="$\{1:handle${name.slice(2)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="handle${name.slice(2)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function antd4Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -164,11 +110,6 @@ export function antd4Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/antd/antd5/anchor.json b/src/ui/antd/antd5/anchor.json
index 570c150e..c1357ba4 100644
--- a/src/ui/antd/antd5/anchor.json
+++ b/src/ui/antd/antd5/anchor.json
@@ -47,38 +47,7 @@
       "value": "",
       "description": "数据化配置选项内容，支持通过 children 嵌套",
       "default": "-",
-      "type": {
-        "key": {
-          "value": "",
-          "description": "唯一标志",
-          "default": "—",
-          "type": "string | number"
-        },
-        "href": {
-          "value": "",
-          "description": "锚点链接",
-          "default": "—",
-          "type": "string"
-        },
-        "title": {
-          "value": "",
-          "description": "文字内容",
-          "default": "—",
-          "type": "ReactNode"
-        },
-        "target": {
-          "value": "",
-          "description": "该属性指定在何处显示链接的资源",
-          "default": "—",
-          "type": "string"
-        },
-        "children": {
-          "value": "",
-          "description": "嵌套的 Anchor Link，注意：水平方向该属性不支持",
-          "default": "—",
-          "type": "[]"
-        }
-      }
+      "type": ""
     },
     "direction": {
       "value": "",
diff --git a/src/ui/antd/antd5/index.ts b/src/ui/antd/antd5/index.ts
index 56214fad..cfd317e7 100644
--- a/src/ui/antd/antd5/index.ts
+++ b/src/ui/antd/antd5/index.ts
@@ -1,5 +1,4 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 import Divider from './divider.json'
 import Row from './row.json'
 import Col from './col.json'
@@ -31,64 +30,11 @@ export function antd5() {
     BreadCrumb,
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        const { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-
-        const snippet = `${name}="$\{1:handle${name.slice(2)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="handle${name.slice(2)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function antd5Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -164,11 +110,6 @@ export function antd5Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/elementUI/elementUi2/index.ts b/src/ui/elementUI/elementUi2/index.ts
index 95412971..8c568c08 100644
--- a/src/ui/elementUI/elementUi2/index.ts
+++ b/src/ui/elementUI/elementUi2/index.ts
@@ -1,5 +1,4 @@
-import { createCompletionItem } from '@vscode-use/utils'
-import * as vscode from 'vscode'
+import { componentsReducer, propsReducer } from '../../utils'
 import ElRow from './row.json'
 import ElCol from './col.json'
 import ElAlert from './alert.json'
@@ -149,89 +148,11 @@ export function elementUi2() {
     ElBacktop,
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### 💎 默认值:    ***\`${value.default}\`***`)
-
-        if (value.description)
-          detail.push(`#### 🔦 说明:    ***\`${value.description}\`***`)
-
-        if (value.type)
-          detail.push(`#### 💡 类型:    ***\`${value.type}\`***`)
-        documentation.appendMarkdown(detail.join('\n\n'))
-
-        if (value.typeDetail)
-          documentation.appendCodeblock(`#### 🌈 类型详情:\n${Object.keys(value.typeDetail).reduce((result, key) => result += `interface ${key} {\n  ${value.typeDetail[key].map((item: any) => `${item.name}: ${item.type} /*${item.description}${item.default ? ` 默认值: ***${item.default}***` : ''}*/`).join('\n  ')}\n}`, '')}`, 'typescript')
-
-        // if (item.methods && item.methods.length) {
-        //   item.methods.forEach((methods: any) => {
-        //     const detail = []
-        //     const { name, description, params } = methods
-        //     if (name)
-        //       detail.push(`\n#### 💨 方法 ${name}:`)
-
-        //     if (description)
-        //       detail.push(`- 👓 说明:    ***\`${description}\`***`)
-
-        //     if (params)
-        //       detail.push(`- 🚢 参数:    ***\`${params}\`***`)
-        //     documentation.appendMarkdown(detail.join('\n'))
-        //   })
-        // }
-
-        if (item.link)
-          documentation.appendMarkdown(`\n\n[🔗 文档链接](${item.link})`)
-
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        let { name, description, params } = events
-
-        if (description)
-          detail.push(`#### 🔦 说明:    ***\`${description}\`***`)
-
-        if (params)
-          detail.push(`#### 🔮 回调参数:    ***\`${params}\`***`)
-        name = name.replace(/-(\w)/g, (_: string, v: string) => v.toUpperCase())
-        const snippet = `${name}="$\{1:on${name[0].toUpperCase()}${name.slice(1)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="on${name[0].toUpperCase()}${name.slice(1)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function elementUi2Components() {
-  return [
+  const map = [
     ['el-row', '布局'],
     ['el-col', '布局'],
     ['el-container', '布局容器'],
@@ -308,11 +229,6 @@ export function elementUi2Components() {
     ['el-backtop', '回到顶部'],
     ['el-drawer', '抽屉'],
     ['el-autocomplete', '远程搜索'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### 🍀 ${detail}`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/utils.ts b/src/ui/utils.ts
new file mode 100644
index 00000000..3a4311f5
--- /dev/null
+++ b/src/ui/utils.ts
@@ -0,0 +1,94 @@
+import * as vscode from 'vscode'
+import { createCompletionItem } from '@vscode-use/utils'
+
+export function propsReducer(map: string[]) {
+  return map.reduce((result: any, item: any) => {
+    const completions: any = []
+    const events: any = []
+    Object.keys(item.props!).forEach((key) => {
+      const value = (item.props as any)[key]
+      let type = vscode.CompletionItemKind.Property
+      if (typeof value.value === 'string')
+        value.value = [value.value]
+      else
+        type = vscode.CompletionItemKind.Enum
+      completions.push(...value.value.map((v: string) => {
+        const documentation = new vscode.MarkdownString()
+        documentation.isTrusted = true
+        documentation.supportHtml = true
+
+        const detail = []
+        if (value.default !== undefined && value.default !== '')
+          detail.push(`#### 💎 默认值:    ***\`${value.default}\`***`)
+
+        if (value.description)
+          detail.push(`#### 🔦 说明:    ***\`${value.description}\`***`)
+
+        if (value.type)
+          detail.push(`#### 💡 类型:    ***\`${value.type}\`***`)
+        documentation.appendMarkdown(detail.join('\n\n'))
+
+        if (value.typeDetail)
+          documentation.appendCodeblock(`#### 🌈 类型详情:\n${Object.keys(value.typeDetail).reduce((result, key) => result += `interface ${key} {\n  ${value.typeDetail[key].map((item: any) => `${item.name}: ${item.type} /*${item.description}${item.default ? ` 默认值: ***${item.default}***` : ''}*/`).join('\n  ')}\n}`, '')}`, 'typescript')
+
+        // if (item.methods && item.methods.length) {
+        //   item.methods.forEach((methods: any) => {
+        //     const detail = []
+        //     const { name, description, params } = methods
+        //     if (name)
+        //       detail.push(`\n#### 💨 方法 ${name}:`)
+
+        //     if (description)
+        //       detail.push(`- 👓 说明:    ***\`${description}\`***`)
+
+        //     if (params)
+        //       detail.push(`- 🚢 参数:    ***\`${params}\`***`)
+        //     documentation.appendMarkdown(detail.join('\n'))
+        //   })
+        // }
+
+        if (item.link)
+          documentation.appendMarkdown(`\n\n[🔗 文档链接](${item.link})`)
+
+        if (value.type && value.type.includes('boolean') && value.default === 'false')
+          return createCompletionItem({ content: key, documentation })
+        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
+      },
+      ))
+    })
+
+    if (item.events) {
+      events.push(...item.events.map((events: any) => {
+        const detail = []
+        let { name, description, params } = events
+
+        if (description)
+          detail.push(`#### 🔦 说明:    ***\`${description}\`***`)
+
+        if (params)
+          detail.push(`#### 🔮 回调参数:    ***\`${params}\`***`)
+        name = name.replace(/-(\w)/g, (_: string, v: string) => v.toUpperCase())
+        const snippet = `${name}="$\{1:on${name[0].toUpperCase()}${name.slice(1)}\}$2"`
+        const documentation = new vscode.MarkdownString()
+        documentation.isTrusted = true
+        documentation.supportHtml = true
+        documentation.appendMarkdown(detail.join('\n\n'))
+        return createCompletionItem({ content: `${name}="on${name[0].toUpperCase()}${name.slice(1)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
+      },
+      ))
+    }
+
+    result[item.name!] = { completions, events }
+    return result
+  }, {} as any)
+}
+
+export function componentsReducer(map: string[][]) {
+  return map.map(([content, detail]) => {
+    const documentation = new vscode.MarkdownString()
+    documentation.isTrusted = true
+    documentation.supportHtml = true
+    documentation.appendMarkdown(`#### 🍀 ${detail}`)
+    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
+  })
+}
diff --git a/src/ui/vant/vant4/index.ts b/src/ui/vant/vant4/index.ts
index 3fd9e619..c538460d 100644
--- a/src/ui/vant/vant4/index.ts
+++ b/src/ui/vant/vant4/index.ts
@@ -1,68 +1,14 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 
 export function vant4() {
   const map: any = [
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        let { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-        name = name.replace(/-(\w)/g, (_: string, v: string) => v.toUpperCase())
-        const snippet = `${name}="$\{1:on${name[0].toUpperCase()}${name.slice(1)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="on${name[0].toUpperCase()}${name.slice(1)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function vant4Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -138,11 +84,6 @@ export function vant4Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }
diff --git a/src/ui/varlet/varlet2/index.ts b/src/ui/varlet/varlet2/index.ts
index 330284f5..1f7f55df 100644
--- a/src/ui/varlet/varlet2/index.ts
+++ b/src/ui/varlet/varlet2/index.ts
@@ -1,68 +1,14 @@
-import * as vscode from 'vscode'
-import { createCompletionItem } from '@vscode-use/utils'
+import { componentsReducer, propsReducer } from '../../utils'
 
 export function varlet2() {
   const map: any = [
   ]
 
-  return map.reduce((result: any, item: any) => {
-    const completions: any = []
-    const events: any = []
-    Object.keys(item.props!).forEach((key) => {
-      const value = (item.props as any)[key]
-      let type = vscode.CompletionItemKind.Property
-      if (typeof value.value === 'string')
-        value.value = [value.value]
-      else
-        type = vscode.CompletionItemKind.Enum
-      completions.push(...value.value.map((v: string) => {
-        const detail = []
-        if (value.default !== undefined && value.default !== '')
-          detail.push(`#### ***💎 默认值:***    \`${value.default}\``)
-
-        if (value.type)
-          detail.push(`#### ***💡 类型:***    \`${value.type}\``)
-
-        if (value.description)
-          detail.push(`#### ***🔦 说明:***    \`${value.description}\``)
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        if (value.type && value.type.includes('boolean') && value.default === 'false')
-          return createCompletionItem({ content: key, documentation })
-        return createCompletionItem({ content: `${key}="${v}"`, documentation, snippet: `${key}="$\{1:${v}\}$2"`, type })
-      },
-      ))
-    })
-    if (item.events) {
-      events.push(...item.events.map((events: any) => {
-        const detail = []
-        const { name, description, params } = events
-
-        if (description)
-          detail.push(`#### ***🔦 说明:***    \`${description}\``)
-
-        if (params)
-          detail.push(`#### ***🔮 回调参数:***    \`${params}\``)
-
-        const snippet = `${name}="$\{1:handle${name.slice(2)}\}$2"`
-        const documentation = new vscode.MarkdownString()
-        documentation.isTrusted = true
-        documentation.supportHtml = true
-        documentation.appendMarkdown(detail.join('\n\n'))
-        return createCompletionItem({ content: `${name}="handle${name.slice(2)}"`, snippet, documentation, type: vscode.CompletionItemKind.Event })
-      },
-      ))
-    }
-
-    result[item.name!] = { completions, events }
-    return result
-  }, {} as any)
+  return propsReducer(map)
 }
 
 export function varlet2Components() {
-  return [
+  const map = [
     ['Row', '布局'],
     ['Col', '布局'],
     ['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
@@ -138,11 +84,6 @@ export function varlet2Components() {
     ['image', '图片'],
     ['backtop', '回到顶部'],
     ['drawer', '抽屉'],
-  ].map(([content, detail]) => {
-    const documentation = new vscode.MarkdownString()
-    documentation.isTrusted = true
-    documentation.supportHtml = true
-    documentation.appendMarkdown(`#### ***📖 ${detail}***`)
-    return createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, documentation, type: vscode.CompletionItemKind.TypeParameter })
-  })
+  ]
+  return componentsReducer(map)
 }