Skip to content

Commit

Permalink
perf: 动态导入组件名
Browse files Browse the repository at this point in the history
  • Loading branch information
@Simon-He95
Simon-He95 committed Jul 10, 2023
1 parent 337aa97 commit ec319a6
Show file tree
Hide file tree
Showing 4 changed files with 358 additions and 161 deletions.
13 changes: 6 additions & 7 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ export function activate(context: vscode.ExtensionContext) {
title: '选择你使用的UI框架',
canPickMany: true,
}).then((options: any) => {
optionsComponents = options.map((option: string) => `${option}Components`)
optionsComponents = options.map((option: string) => `${option}Components`).reduce((result: any, name: string) => {
result.push(...(UI as any)[name]())
return result
}, [])
UiCompletions = options.reduce((result: any, option: string) =>
Object.assign(result, (UI as any)[option]?.())
, {} as any)
Expand All @@ -35,12 +38,8 @@ export function activate(context: vscode.ExtensionContext) {
: UiCompletions[name].completions
}
const { lineText } = getSelection()!
if (optionsComponents && lineText?.slice(-1)[0] !== ' ') {
return optionsComponents.reduce((result: any, name: string) => {
result.push(...(UI as any)[name])
return result
}, [])
}
if (optionsComponents && lineText?.slice(-1)[0] !== ' ')
return optionsComponents
}, ['"', '\'', '-', ' ', '@']))
}

Expand Down
156 changes: 79 additions & 77 deletions src/ui/antDesign/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,80 +62,82 @@ export function antDesign() {
}, {} as any)
}

export const antDesignComponents = [
['Row', '布局'],
['Col', '布局'],
['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
['Header', '顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
['Sider', '侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。'],
['Layout', '布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。'],
['Footer', '底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
['Button', '按钮'],
['Space', '间距'],
['Anchor', '锚点'],
['radio', '单选框'],
['radio-group', '单选框组'],
['radio-button', '按钮样式的单选组合'],
['checkbox', '多选框'],
['checkbox-group', '多选框组'],
['checkbox-button', '按钮样式的多选组合'],
['input', '输入框'],
['input-number', '计数器'],
['select', '选择器'],
['option', '基础多选'],
['option-group', '备选项进行分组展示'],
['cascader', '级联选择器'],
['switch', '开关'],
['slider', '滑块'],
['time-select', '时间选择器'],
['date-picker', '日期选择器/日期时间选择器'],
['upload', '上传'],
['rate', '评分'],
['color-picker', '颜色选择器'],
['transfer', '穿梭框'],
['form', '表单'],
['form-item', '表单项'],
['table', '表格'],
['table-column', '表格项'],
['tag', '标签'],
['progress', '进度条'],
['tree', '树形控件'],
['pagination', '分页'],
['badge', '标记'],
['avatar', '头像'],
['skeleton', '骨架屏'],
['empty', '空状态'],
['descriptions', '描述列表'],
['descriptions-item', '描述列表项'],
['result', '结果'],
['statistic', '统计数值'],
['alert', '警告'],
['menu', '导航菜单'],
['submenu', '导航子菜单'],
['menu-item', '导航菜单项'],
['tabs', '标签页'],
['tab-pane', '标签项'],
['breadcrumb', '面包屑'],
['breadcrumb-item', '面包屑项'],
['page-header', '页头'],
['dropdown', '下拉菜单'],
['dropdown-menu', '下拉菜单列表'],
['dropdown-item', '下拉菜单列表项'],
['steps', '步骤条'],
['dialog', '对话框'],
['tooltip', '文字提示'],
['popover', '弹出框'],
['popconfirm', '气泡确认框'],
['card', '卡片'],
['carousel', '走马灯'],
['carousel-item', '走马灯项'],
['collapse', '折叠面板'],
['collapse-item', '折叠面板项'],
['timeline', '时间线'],
['timeline-item', '时间线项'],
['divider', '分割线'],
['calendar', '日历'],
['image', '图片'],
['backtop', '回到顶部'],
['drawer', '抽屉'],
].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
export function antDesignComponents() {
return [
['Row', '布局'],
['Col', '布局'],
['Content', '内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中'],
['Header', '顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
['Sider', '侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。'],
['Layout', '布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。'],
['Footer', '底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。'],
['Button', '按钮'],
['Space', '间距'],
['Anchor', '锚点'],
['radio', '单选框'],
['radio-group', '单选框组'],
['radio-button', '按钮样式的单选组合'],
['checkbox', '多选框'],
['checkbox-group', '多选框组'],
['checkbox-button', '按钮样式的多选组合'],
['input', '输入框'],
['input-number', '计数器'],
['select', '选择器'],
['option', '基础多选'],
['option-group', '备选项进行分组展示'],
['cascader', '级联选择器'],
['switch', '开关'],
['slider', '滑块'],
['time-select', '时间选择器'],
['date-picker', '日期选择器/日期时间选择器'],
['upload', '上传'],
['rate', '评分'],
['color-picker', '颜色选择器'],
['transfer', '穿梭框'],
['form', '表单'],
['form-item', '表单项'],
['table', '表格'],
['table-column', '表格项'],
['tag', '标签'],
['progress', '进度条'],
['tree', '树形控件'],
['pagination', '分页'],
['badge', '标记'],
['avatar', '头像'],
['skeleton', '骨架屏'],
['empty', '空状态'],
['descriptions', '描述列表'],
['descriptions-item', '描述列表项'],
['result', '结果'],
['statistic', '统计数值'],
['alert', '警告'],
['menu', '导航菜单'],
['submenu', '导航子菜单'],
['menu-item', '导航菜单项'],
['tabs', '标签页'],
['tab-pane', '标签项'],
['breadcrumb', '面包屑'],
['breadcrumb-item', '面包屑项'],
['page-header', '页头'],
['dropdown', '下拉菜单'],
['dropdown-menu', '下拉菜单列表'],
['dropdown-item', '下拉菜单列表项'],
['steps', '步骤条'],
['dialog', '对话框'],
['tooltip', '文字提示'],
['popover', '弹出框'],
['popconfirm', '气泡确认框'],
['card', '卡片'],
['carousel', '走马灯'],
['carousel-item', '走马灯项'],
['collapse', '折叠面板'],
['collapse-item', '折叠面板项'],
['timeline', '时间线'],
['timeline-item', '时间线项'],
['divider', '分割线'],
['calendar', '日历'],
['image', '图片'],
['backtop', '回到顶部'],
['drawer', '抽屉'],
].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
}
156 changes: 79 additions & 77 deletions src/ui/elementUI/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,80 +88,82 @@ export function elementUI() {
}, {} as any)
}

export const elementUIComponents = [
['el-row', '布局'],
['el-col', '布局'],
['el-container', '布局容器'],
['el-header', '顶栏容器'],
['el-aside', '侧边栏容器'],
['el-main', '主要区域容器'],
['el-footer', '底栏容器'],
['el-button', '按钮'],
['el-link', '文字链接'],
['el-radio', '单选框'],
['el-radio-group', '单选框组'],
['el-radio-button', '按钮样式的单选组合'],
['el-checkbox', '多选框'],
['el-checkbox-group', '多选框组'],
['el-checkbox-button', '按钮样式的多选组合'],
['el-input', '输入框'],
['el-input-number', '计数器'],
['el-select', '选择器'],
['el-option', '基础多选'],
['el-option-group', '备选项进行分组展示'],
['el-cascader', '级联选择器'],
['el-switch', '开关'],
['el-slider', '滑块'],
['el-time-select', '时间选择器'],
['el-date-picker', '日期选择器/日期时间选择器'],
['el-upload', '上传'],
['el-rate', '评分'],
['el-color-picker', '颜色选择器'],
['el-transfer', '穿梭框'],
['el-form', '表单'],
['el-form-item', '表单项'],
['el-table', '表格'],
['el-table-column', '表格项'],
['el-tag', '标签'],
['el-progress', '进度条'],
['el-tree', '树形控件'],
['el-pagination', '分页'],
['el-badge', '标记'],
['el-avatar', '头像'],
['el-skeleton', '骨架屏'],
['el-empty', '空状态'],
['el-descriptions', '描述列表'],
['el-descriptions-item', '描述列表项'],
['el-result', '结果'],
['el-statistic', '统计数值'],
['el-alert', '警告'],
['el-menu', '导航菜单'],
['el-submenu', '导航子菜单'],
['el-menu-item', '导航菜单项'],
['el-tabs', '标签页'],
['el-tab-pane', '标签项'],
['el-breadcrumb', '面包屑'],
['el-breadcrumb-item', '面包屑项'],
['el-page-header', '页头'],
['el-dropdown', '下拉菜单'],
['el-dropdown-menu', '下拉菜单列表'],
['el-dropdown-item', '下拉菜单列表项'],
['el-steps', '步骤条'],
['el-dialog', '对话框'],
['el-tooltip', '文字提示'],
['el-popover', '弹出框'],
['el-popconfirm', '气泡确认框'],
['el-card', '卡片'],
['el-carousel', '走马灯'],
['el-carousel-item', '走马灯项'],
['el-collapse', '折叠面板'],
['el-collapse-item', '折叠面板项'],
['el-timeline', '时间线'],
['el-timeline-item', '时间线项'],
['el-divider', '分割线'],
['el-calendar', '日历'],
['el-image', '图片'],
['el-backtop', '回到顶部'],
['el-drawer', '抽屉'],
['el-autocomplete', '远程搜索'],
].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
export function elementUIComponents() {
return [
['el-row', '布局'],
['el-col', '布局'],
['el-container', '布局容器'],
['el-header', '顶栏容器'],
['el-aside', '侧边栏容器'],
['el-main', '主要区域容器'],
['el-footer', '底栏容器'],
['el-button', '按钮'],
['el-link', '文字链接'],
['el-radio', '单选框'],
['el-radio-group', '单选框组'],
['el-radio-button', '按钮样式的单选组合'],
['el-checkbox', '多选框'],
['el-checkbox-group', '多选框组'],
['el-checkbox-button', '按钮样式的多选组合'],
['el-input', '输入框'],
['el-input-number', '计数器'],
['el-select', '选择器'],
['el-option', '基础多选'],
['el-option-group', '备选项进行分组展示'],
['el-cascader', '级联选择器'],
['el-switch', '开关'],
['el-slider', '滑块'],
['el-time-select', '时间选择器'],
['el-date-picker', '日期选择器/日期时间选择器'],
['el-upload', '上传'],
['el-rate', '评分'],
['el-color-picker', '颜色选择器'],
['el-transfer', '穿梭框'],
['el-form', '表单'],
['el-form-item', '表单项'],
['el-table', '表格'],
['el-table-column', '表格项'],
['el-tag', '标签'],
['el-progress', '进度条'],
['el-tree', '树形控件'],
['el-pagination', '分页'],
['el-badge', '标记'],
['el-avatar', '头像'],
['el-skeleton', '骨架屏'],
['el-empty', '空状态'],
['el-descriptions', '描述列表'],
['el-descriptions-item', '描述列表项'],
['el-result', '结果'],
['el-statistic', '统计数值'],
['el-alert', '警告'],
['el-menu', '导航菜单'],
['el-submenu', '导航子菜单'],
['el-menu-item', '导航菜单项'],
['el-tabs', '标签页'],
['el-tab-pane', '标签项'],
['el-breadcrumb', '面包屑'],
['el-breadcrumb-item', '面包屑项'],
['el-page-header', '页头'],
['el-dropdown', '下拉菜单'],
['el-dropdown-menu', '下拉菜单列表'],
['el-dropdown-item', '下拉菜单列表项'],
['el-steps', '步骤条'],
['el-dialog', '对话框'],
['el-tooltip', '文字提示'],
['el-popover', '弹出框'],
['el-popconfirm', '气泡确认框'],
['el-card', '卡片'],
['el-carousel', '走马灯'],
['el-carousel-item', '走马灯项'],
['el-collapse', '折叠面板'],
['el-collapse-item', '折叠面板项'],
['el-timeline', '时间线'],
['el-timeline-item', '时间线项'],
['el-divider', '分割线'],
['el-calendar', '日历'],
['el-image', '图片'],
['el-backtop', '回到顶部'],
['el-drawer', '抽屉'],
['el-autocomplete', '远程搜索'],
].map(([content, detail]) => createCompletionItem({ content, snippet: `<${content}>$1</${content}>`, detail, type: vscode.CompletionItemKind.TypeParameter }))
}
Loading

0 comments on commit ec319a6

Please sign in to comment.