vscode-geega-ui-helper

vscode-geega-ui-helper是VS Code extension for Geega-UI 的一个扩展.

提供功能

文档
代码提取

如何安装

如何使用

按动 shift + cmd + i(windows: shift + win + i) ，查看所有组件
移动鼠标到GeegaUI的组件按动 shift + cmd + i(windows: shift + win + i)直接打开组件文档
代码提取输入 Geega 可快速提取所有组件,路由，hooks，等代码

移动鼠标到GeegaUI的组件按动 shift + cmd + i(windows: shift + win + i)直接打开组件文档，非GeegaUI组件时弹窗打开所有组件目录点击entry打开文档

代码提取

快捷键设置

默认 shift + cmd + i( windows: shift + win + i). 如果被占用可以重新设置. 快捷键设置

提取-组件

指令	说明	提取代码
GeegaIcon	Icon图标-icon须以g-开头	<Icon icon="${1:g-xxx}">
GeegaButton	Buttion图标	<a-button class="${1:className}" color="${2\|error,warning,success\|}" @click="${3:()=>{})}"> ${4} </a-button>
GeegaPageWrapper	GeegaUI包裹页面组件	<template #left>left <template #right>right</template></PageWrapper>
GeegaBasicTable	GeegaUI表格组件	<BasicTable @register="registerTable"><template #toolbar> <a-button type="link" preIcon="g-icon_light_add" @click="${1:()=>{}}" >${2:新增} {{ ${3:编辑} }} <template #action="{ record }"> <TableAction :actions="createActions(record)" /></template></template></BasicTable>
GeegaBasicDrawer	GeegaUI抽屉组件	<BasicDrawer :title="actionType" @register="registerFormDrawer" @close="resetFormFields"> ${1}</BasicDrawer>
GeegaBasicForm	GeegaUI表单组件	<BasicForm layout="vertical" @register="registerForm" @submit="onSubmitForCreate" />
GeegaBasicTitle	GeegaUI显示标题	<BasicTitle helpMessage="${1:提醒}">标题</BasicTitle>
GeegaBasicArrow	GeegaUI动画的箭头	<BasicArrow :expand="false" />
GeegaBasicHelp	GeegaUI帮助按钮	<BasicHelp text="['提示1', '提示2']" />
GeegaSvgIcon	GeegaUI svg 雪碧图	<SvgIcon name="test"> </SvgIcon>
GeegaIconPicker	GeegaUI图标选择器	<IconPicker> </IconPicker>
GeegaPageFooter	GeegaUI页面底部工具栏	<template #left>left</template> <template #right>right</template></PageFooter>
GeegaPopConfirmButton	GeegaUI带有 PopConfirm 功能的按钮	<PopConfirmButton>按钮文本</PopConfirmButton>
GeegaAuthority	GeegaUI 用于项目权限的组件，一般用于按钮级等细粒度权限管理	<Authority :value="RoleEnum.ADMIN"> 只有admin角色可见 </a-button></Authority>
GeegaBasicModal	GeegaUI 对 antv 的 modal 组件进行封装，扩展拖拽，全屏，自适应高度等功能	<BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']"> Modal Info.</BasicModal>
GeegaDescription	GeegaUI对antv的 Descriptions 组件进行封装	<Description title="基础示例" :collapseOptions="{ canExpand: true, helpMessage: 'help me' }" :column="3" :data="mockData" :schema="schema"/>
GeegaBasicUpload	GeegaUI项目文件上传	<BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" />
GeegaBasicTree	GeegaUI对antv的 tree 组件进行封装	<BasicTree :treeData="treeData" />
GeegaLoading	GeegaUI Loading	<Loading :loading="loading" :absolute="absolute" tip="xx" />
GeegaImportExcel	GeegaUI XLSX，具体文档可以参考XLSX 文档https://sheetjs.com/	<ImportExcel @success="loadDataSuccess"> <a-button class="m-3">导入Excel</a-button></ImportExcel>
GeegaScrollContainer	GeegaUI 基于element-ui的 el-scrollbar 组件	<ScrollContainer class="mt-4"> ${1}</ScrollContainer>
GeegaCollapseContainer	GeegaUI 区域折叠卡片容器	<CollapseContainer> content </CollapseContainer>
GeegaLazyContainer	GeegaUI 延时加载/懒加载组件	<LazyContainer @init="() => {}"><TargetContent /> <template #skeleton> <Skeleton :rows="10" /> </template></LazyContainer>
GeegaFadeTransition	GeegaUI 渐变动画组件	<FadeTransition> <div>渐变动画组件</FadeTransition>
GeegaScaleTransition	GeegaUI 缩放动画组件	<ScaleTransition> <div>缩放动画组件</div>
GeegaSlideYTransition	GeegaUI Y轴动画组件	<SlideYTransition> <div>Y轴动画组件</SlideYTransition>
GeegaSlideYReverseTransition	GeegaUI Y轴反向动画组件	<SlideYReverseTransition> <div>Y轴反向动画组件</SlideYReverseTransition>
GeegaScrollYTransition	GeegaUI Y轴滑动组件	<ScrollYTransition> Y轴滑动组件</div></ScrollYTransition>
GeegaScrollYReverseTransition	GeegaUI Y轴动滑动反方向滑动组件	<ScrollYReverseTransition> <div>Y轴动滑动反方向滑动组件</div></ScrollYReverseTransition>
GeegaSlideXTransition	GeegaUI X轴动滑动组件	<SlideXTransition> <div>X轴动滑动组件</SlideXTransition>
GeegaScrollXTransition	GeegaUI Y轴动滑动滑动组件	<ScrollXTransition> <div>Y轴动滑动滑动组件</div></ScrollXTransition>
GeegaSlideXReverseTransition	GeegaUI X轴动反方向滑动组件	<SlideXReverseTransition> <div>X轴动反方向滑动组件</div></SlideXReverseTransition>
GeegaScrollXReverseTransition	GeegaUI X轴动滑动反方向滑动组件	<GeegaScrollXReverseTransition> X轴动滑动反方向滑动组件</div></GeegaScrollXReverseTransition>
GeegaScaleRotateTransition	GeegaUI 收缩旋转滑动组件	<ScaleRotateTransition> 收缩旋转滑动组件</div></ScaleRotateTransition>
GeegaExpandXTransition	GeegaUI X轴展开滑动组件	<ExpandXTransition> <div>X轴展开滑动组件</div></ExpandXTransition>
GeegaExpandTransition	GeegaUI Y轴展开滑动组件	<ExpandTransition> <div>Y轴展开滑动组件</div></ExpandTransition>
GeegaClickOutSide	GeegaUI 用于监听包裹的元素点击外部触发事件	<ClickOutSide @clickOutside="() => (showRef.value = false)"> <div class="click-out-side-demo-content" @click="() => (showRef.value = true)"> {{ showRef ? '鼠标点击那部（点击边框外可以恢复）' : '点击该区域状态(初始状态)' }} </div></ClickOutSide>
GeegaTinymce	GeegaUI 富文本组件	<Tinymce v-model="value" @change="handleChange" width="100%" />
GeegaStrengthMeter	GeegaUI 密码强度检测组件	<StrengthMeter placeholder="隐藏input" :show-input="false" value="!@#qwe12345" />
GeegaQrCode	GeegaUI 二维码组件	<QrCode value="https://www.geega.com" />
GeegaBasicDragVerify	GeegaUI 拖拽验证组件	<BasicDragVerify @success="handleSuccess" />
GeegaMarkDown	GeegaUI 基于Vditor (opens new window)的 MarkDown 编辑器	<MarkDown v-model:value="value" ref="markDownRef" />
GeegaVirtualScroll	GeegaUI 虚拟滚动组件(用于大量数据纯展示时使用)	<VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300"> <template v-slot="{ item }"> <div class="virtual-scroll-demo__item">{{ item.title }}</div> </template></VirtualScroll>
GeegaCountTo	GeegaUI 虚拟滚动组件(用于大量数据纯展示时使用)	<CountTo prefix="$" :startVal="1" :endVal="200000" :duration="8000" />
GeegaCreateImgPreview	GeegaUI 将Preview组件函数化。通过函数方便创建组件	createImgPreview({ imageList: [ 'https://xxxx', 'https://xxxx', 'https://xxxx', ] });
GeegacreateContextMenu	GeegaUI 函数式创建右键菜单组件。只要能拿到 dom 的 event 对象就能为其创建右键菜单	import { useContextMenu } from '/@/hooks/web/useContextMenu';const [createContextMenu] = useContextMenu();createContextMenu({ event: e, items: [ { label: 'New', icon: 'ant-design:plus-outlined', handler: () => { createMessage.success('click new'); }, }, { label: 'Open', icon: 'ant-design:folder-open-filled', handler: () => { createMessage.success('click open'); }, }, ], });
GeegaUseLoading	GeegaUI 函数话loading	const [openFullLoading, closeFullLoading] = useLoading({ tip: '加载中...', }); const [openWrapLoading, closeWrapLoading] = useLoading({ target: wrapEl, props: { tip: '加载中...', absolute: true, }, });
GeegaImpGeegaUI	一键导入GeegaUI 组件	import { ${1:Input commponent} } } from '@geega-ui-plus/geega-ui'

提取-常用代码片段模板

指令	说明	提取代码
GeegaRouterPage	创建router页面模板	...
GeegaRouteAdd	添加路由模板	...
GeegaSchemaTable	GeegaUI table Schema	...
GeegaSchemaSearchForm	GeegaUI table schemaSearchForm	...
GeegaSchemaForm	GeegaUI Form	...
GeegaSchemaDesc	GeegaUI schemaDesc	...
GeegaPageCRUD	GeegaCRUDPage 页面	...
GeegaSchemaCRUD	GeegaCRUDSchema 描述文件生产页面	...
GeegaApiPage	api接口模板	...
GeegaApiAddGet	添加单个get请求	...
GeegaApiAddPost	添加单个post请求	...
GeegaModalPage	添加弹窗页面	...

提取-常用hooks相关操作

指令	说明	提取代码
GeegaHooksImpMessage	导入Message	import { useMessage } from '/@/hooks/web/useMessage';
GeegaHooksInitMessage	初始化消息hooks	const { createMessage } = useMessage();
GeegaHooksUseMessage	创建消息模态框	createMessage.success('提醒消息内容');
GeegaImpHooksAppInject	导入useAppInject	import { useAppInject } from '/@/hooks/web/useAppInject';
GeegaHooksInitAppInject	初始化useAppInject	const { getIsMobile } = useAppInject();
GeegaImpHooksClickOutside	导入useClickOutside	import { useClickOutside } from '/@/hooks/web/useClickOutside';
GeegaHooksUseClickOutside	点击除自身外的dom节点，触发回调函数	nextTick(() => { useClickOutside(dom as Ref, () => { //todo });});
GeegaImpHooksContextMenu	导入useContextMenu	import { useContextMenu } from '/@/hooks/web/useContextMenu';
GeegaHooksInitContextMenu	初始化useContextMenu	const [createContextMenu] = useContextMenu();
GeegaHooksUseContextMenu	使用上下文菜单，右键弹出菜单	createContextMenu({ event: e, items: [ { label: 'New', icon: 'bi:plus', handler: () => { createMessage.success('click new'); }, }, { label: 'Open', icon: 'bx:bxs-folder-open', handler: () => { createMessage.success('click open'); }, }, ], });
GeegaImpHooksCopyToClipboard	导入剪贴板	import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
GeegaHooksInitCopyToClipboard	初始化剪贴板	const { clipboardRef, isSuccessRef } = useCopyToClipboard(${1:'value'});
GeegaHooksUseCopyToClipboard	通过isSuccessRef判断是否操作成功	unref(isSuccessRef) && createSuccessModal({ title: '', content: '', });
GeegaImpHooksECharts	导入ECharts	import { useECharts } from '/@/hooks/web/useECharts';
GeegaHooksInitECharts	初始化ECharts	const chartRef=ref<HTMLDivElement \| null>(null); const { setOptions, resize, echarts } = useECharts(chartRef as Ref);
GeegaHooksUseECharts	使用ECharts	...
GeegaImpHooksFullContent	导入FullContent	import { useFullContent } from '/@/hooks/web/useFullContent';
GeegaHooksInitFullContent	初始化useFullContent	const { getFullContent } = useFullContent();
GeegaHooksUseFullContent	通过getFullContent来判断是否全屏显示内容，不显示菜单	unref(getFullContent)
GeegaImpHooksI18n	导入I18n	import { useI18n } from '/@/hooks/web/useI18n';
GeegaHooksInitI18n	初始化useI18n	const { t } = useI18n();
GeegaHooksUseI18n	通过t函数设置文本	t('common.cancelText')
GeegaImpHooksLockPage	导入LockPage	import { useLockPage } from '/@/hooks/web/useLockPage';
GeegaHooksInitLockPage	初始化lockEvents, 绑定dom触发事件更新锁屏事件	const lockEvents = useLockPage();
GeegaHooksUseLockPage	lockEvents函数绑定dom节点，从而触发onKeyup、onMousemove事件	<div v-bind="lockEvents"></div>
GeegaImpHooksPage	导入useGo,	import { useGo } from '/@/hooks/web/usePage';
GeegaHooksInitPage	初始化useGo	const go = useGo();
GeegaHooksUsePage	进行页面跳转，包含push，replace方法	go(${1:'path'},${2:'isReplace:Boolean'})
GeegaImpHooksPagination	导入分页	import { usePagination } from '/@/hooks/web/usePagination';
GeegaHooksInitPagination	初始化分页	const {, setCurrentPage,, getTotal,, setPageSize,, getPaginationList,,} = usePagination(${1:'list'}, ${2:'pageSize'});
GeegaHooksUsePagination	使用usePagination返回的方法，设置分页数据	setCurrentPage(${1:'page'});
GeegaImpHooksScript	导入Script	import { useScript } from '/@/hooks/web/useScript';
GeegaHooksInitScript	初始化Script,加载js资源	const { toPromise, isLoading, error, success} = useScript({ src: ${1:'src'} });
GeegaHooksUseScript	加载资源成功后，可进行操作	await toPromise();,await nextTick();
GeegaImpHooksSortable	导入Sortable	import { useSortable } from '/@/hooks/web/useSortable';
GeegaHooksInitSortable	初始化Sortable	const { initSortable } = useSortable(${1:'HTMLElement'}, {, filter: (e: ChangeEvent) => {, },, onEnd: (evt) => {, },,});
GeegaHooksUseSortable	执行initSortable	initSortable()
GeegaImpHooksTabs	导入Tabs	import { useTabs } from '/@/hooks/web/useTabs';
GeegaHooksInitTabs	初始化Tabs	const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } = useTabs();
GeegaHooksUseTabs	关闭当前标签页	closeCurrent()
GeegaImpHooksWatermark	导入Watermark添加水印	import { useWatermark } from '/@/hooks/web/useWatermark';
GeegaHooksInitWatermark	初始化Watermark	const { setWatermark, clear } = useWatermark();
GeegaHooksUseWatermark	设置水印	setWatermark()
GeegaImpHooksPermission	导入Permission权限	import { usePermission } from '/@/hooks/web/usePermission';
GeegaHooksInitPermission	初始化Permission	const { changeRole, hasPermission, togglePermissionMode, refreshMenu } = usePermission();
GeegaHooksUsePermission	改变许可模式,重置和恢复权限资源信息,确认是否有权限,刷新菜单数据	hasPermission(${1:'value'})

如何贡献

GeegaUI-Helper非常欢迎大家贡献你们常用的代码块

clone http://git.geega.com/geega/front-end/vscode-geega-ui-helpler.git ，新建功能分支
snippets/geegaui.json 创建指令新功能开发参考 https://code.visualstudio.com/api

指令规则：

指令	说明	提取代码
Geegaxxx	GeegaUI组件 eg: GeegaButton	<a-button class="${1:className}" color="${2\|error,warning,success\|}" @click="${3:()=>{})}"> ${4} </a-button>
GeegaHookxxx	常用hooks代码 eg: 初始化：GeegaHooksInitMessage 使用：GeegaHooksUseMessage	const { createMessage } = useMessage();
GeegaImpxxxxxx	快速导入 eg: GeegaImpGeegaUI	import { ${1:Input commponent} } } from '@geega-ui-plus/geega-ui'
GeegaPagexxxxxx	页面级 eg: GeegaPageCRUD：增删改查耶页面,GeegaPageFooter：公共头部等	<template #left>left <template #right>right</template></PageWrapper>
GeegaSchemaxxx	Schema描述文件 eg: GeegaSchemaCRUD：增删改查，GeegaSchematable，搜索等等	export function getColumns(): BasicColumn[] ...

提交合并请求 @hao.liu8 合并发布。

Geega UI helper

geega-bsc