hs-admin-ui 1.0.6 → 1.0.8

package/src/components/business/bcTable/bcTable.vue

@@ -0,0 +1,65 @@
+<template>
+	<div ref="wrapRef" class="bc-table__wrapper bg-white">
+		<div class="bc-table__content" :style="style">
+			<vxe-table ref="tableRef" v-bind="baseData" @cell-click="handleCellClick" @header-cell-click="headerCellClick" :data="tableData">
+				<vxe-column v-for="item in tableConfig" :key="item.id" v-bind="item.data">
+					<!-- 自定义插槽 -->
+					<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+						<slot :name="name" v-bind="scopeData || {}"></slot>
+					</template>
+
+					<!-- 列单元格插槽渲染 -->
+					<template v-if="item.data.isSlot" #default="scopeData">
+						<slot :name="item.data.field" v-bind="scopeData || {}"></slot>
+					</template>
+
+					<!-- 按钮渲染 -->
+					<template v-else-if="item.btnData && item.btnData.length" #default="scopeData">
+						<template v-for="btn in item.btnData" :key="btn.key">
+							<template v-if="btn.isShow">
+								<slot v-if="btn.isSlot" :name="`hs_btn_${item.key}`" v-bind="scopeData || {}"></slot>
+								<bc-btn :data="btn" @click="btn.fnName(scopeData)" v-else />
+							</template>
+						</template>
+					</template>
+				</vxe-column>
+			</vxe-table>
+		</div>
+		<!-- 分页设置 -->
+		<div ref="pagerRef">
+			<vxe-pager v-if="baseData.is_apply_page" v-bind="baseData.table_page_data" @page-change="pageChange">
+				<template v-for="(value, name) in $slots" #[name]="scopeData" :key="name">
+					<slot :name="'hs_pager_' + name" v-bind="scopeData || {}"></slot>
+				</template>
+			</vxe-pager>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="bcTable">
+import { onMounted } from 'vue';
+import { ICustomData } from '/@/types';
+import { useTable } from './useTable';
+import { useTableHeight } from './useTableHeight';
+
+interface Props {
+	uniqueId: string;
+	id: string;
+	baseData: ICustomData.TableBaseData;
+	tableData: ICustomData.Data[];
+	tableConfig: ICustomData.TableItem[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['ready', 'cell-click', 'header-cell-click', 'page-change']);
+const { wrapRef, pagerRef, tableRef, style } = useTableHeight();
+const { handleCellClick, headerCellClick, pageChange } = useTable(props, tableRef, emit);
+
+onMounted(() => {
+	emit('ready', tableRef.value);
+});
+</script>
+<style scoped lang="scss">
+:deep(.col--seq) {
+	cursor: pointer;
+}
+</style>

package/src/components/business/bcTable/components/sortColumn/index.ts

@@ -0,0 +1,19 @@
+import { showPopup } from '/@/utils';
+import SortColumn from './sortColumn.vue';
+
+/** 自定义列排序 */
+export function setSortPopup<T>(uniqueId: string, id: string): Promise<T> {
+	return new Promise((reslove) => {
+		showPopup(
+			SortColumn,
+			{ uniqueId, id },
+			{
+				id,
+				title: '表格配置',
+				success: (res: T) => {
+					reslove(res);
+				},
+			}
+		);
+	});
+}

package/src/components/business/bcTable/components/sortColumn/sortColumn.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="h-full flex flex-col">
+		<div class="flex-1 overflow-hidden border-bottom-1">
+			<div class="w-full h-full">
+				<ul class="head flex items-center list-none">
+					<li class="w-[50px] px-2">拖动</li>
+					<li class="flex-1 pl-6">列名称</li>
+					<li class="flex-1 px-2">显示状态</li>
+					<li class="flex-1 px-2">排序值</li>
+				</ul>
+				<VueDraggable
+					v-model="list"
+					ghostClass="ghost"
+					handle=".sort-target"
+					animation="150"
+					class="overflow-y-auto border-1"
+					style="height: calc(100% - 34px)"
+				>
+					<div v-for="(item, index) in list" :key="item.id" class="flex items-center w-full px-2 border-bottom-1">
+						<span class="sort-target w-[50px] cursor-move px-2">
+							<el-icon class="rotate-90" size="14"><MoreFilled /></el-icon>
+						</span>
+						<span class="flex-1 px-2"><hs-input v-model="item.data.title" /></span>
+						<span class="flex-1 px-2"><hs-switch v-model="item.data.isShow" /></span>
+						<span class="flex-1 px-2">{{ index + 1 }}</span>
+					</div>
+				</VueDraggable>
+			</div>
+		</div>
+		<div class="footer h-12 mt-2 flex items-center justify-between">
+			<hs-button type="primary" size="small" @click="reset">重置设置</hs-button>
+			<div class="flex items-center">
+				<hs-button size="small" @click="$emit('success')">取消</hs-button>
+				<hs-button type="primary" size="small" @click="submit">保存</hs-button>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts" setup name="sortColumn">
+import { ref } from 'vue';
+import { MoreFilled } from '@element-plus/icons-vue';
+import { ICustomData } from '/@/types';
+import { formStore } from '/@/utils';
+import { VueDraggable } from 'vue-draggable-plus';
+
+interface Props {
+	uniqueId: string;
+	id: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['success']);
+const list = ref<ICustomData.TableItem[]>([]);
+
+getList(props.uniqueId);
+
+function getList(uniqueId: string) {
+	return formStore.get<ICustomData.FormTable>(uniqueId).then((res) => {
+		const { tableConfig } = res.tables.find((i) => i.id === props.id)!;
+		list.value = tableConfig.filter((i) => !i.data.type);
+	});
+}
+
+function reset() {
+	formStore.get<ICustomData.FormTable>(`${props.uniqueId}_origin`).then((res) => {
+		const cache = res.tables.find((i) => i.id === props.id)!;
+		list.value = cache.tableConfig.filter((i) => !i.data.type);
+		formStore.set(props.uniqueId, res);
+	});
+}
+
+function submit() {
+	formStore.get<ICustomData.FormTable>(props.uniqueId).then((res) => {
+		const cache = res.tables.find((i) => i.id === props.id)!;
+		const typeData = cache.tableConfig.filter((i) => i.data.type);
+		// 序列化掉代理数据，获取源数据
+		cache.tableConfig = JSON.parse(JSON.stringify([...typeData, ...list.value]));
+		formStore.set(props.uniqueId, res).then(() => {
+			emit('success', cache);
+		});
+	});
+}
+</script>
+<style scoped lang="scss">
+.ghost {
+	opacity: 0.5;
+	background: #48c9b0;
+}
+:deep(.el-input__wrapper) {
+	box-shadow: none;
+	background-color: transparent;
+}
+:deep(.el-input__wrapper.is-focus) {
+	box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;
+}
+ul {
+	&.head {
+		background-color: #f5f5f5;
+		border: 1px solid #f5f5f5;
+	}
+	li {
+		height: 34px;
+		display: flex;
+		align-items: center;
+	}
+}
+</style>

package/src/components/business/bcTable/useTable.ts

@@ -0,0 +1,50 @@
+import { Ref, toValue, nextTick } from 'vue';
+import { VxeTableDefines, VxeTableInstance, VxePagerDefines } from 'vxe-table';
+import { ICustomData, ComponentAttr } from '/@/types';
+import BcTable from './bcTable.vue';
+import { setSortPopup } from './components/sortColumn';
+import { tableIndex } from '../bcFormTable/utils/onTableKey';
+import { setPropertyData } from '/@parseTable';
+
+export type EmitEvent = 'ready' | 'cell-click' | 'header-cell-click' | 'page-change';
+export function useTable(
+	props: ComponentAttr.Props<typeof BcTable>,
+	tableApi: Ref<VxeTableInstance | undefined>,
+	emit: (event: EmitEvent, ...args: ICustomData.ANY[]) => void
+) {
+	/** 单元格点击 */
+	function handleCellClick(params: VxeTableDefines.CellClickEventParams) {
+		tableIndex.rowIndex = params.rowIndex;
+		tableIndex.columnIndex = params.columnIndex;
+		emit('cell-click', params);
+	}
+	/** 表头点击 */
+	function headerCellClick(params: VxeTableDefines.HeaderCellClickParams) {
+		if (params.columnIndex === 0) {
+			setSortPopup<ICustomData.Table>(props.uniqueId, props.id).then((res) => {
+				const columns = res.tableConfig.map((i) => setPropertyData(i.data));
+				nextTick(() => {
+					toValue(tableApi)
+						?.reloadColumn(columns)
+						.then(() => {
+							// 问题描述：重加载列配置后，数据编辑功能失效，待解决。。。
+							toValue(tableApi)?.refreshColumn();
+						});
+				});
+			});
+		} else {
+			emit('header-cell-click', params);
+		}
+	}
+
+	/** 分页改变 */
+	function pageChange(params: VxePagerDefines.PageChangeEventParams) {
+		emit('page-change', params);
+	}
+
+	return {
+		handleCellClick,
+		headerCellClick,
+		pageChange,
+	};
+}

package/src/components/business/bcTable/useTableHeight.ts

@@ -0,0 +1,24 @@
+import { computed, ref } from 'vue';
+import { VxeTableInstance } from 'vxe-table';
+import { useElementSize } from '@vueuse/core';
+
+export function useTableHeight() {
+	const wrapRef = ref();
+	const pagerRef = ref();
+	const tableRef = ref<VxeTableInstance>();
+	const { height: wrapHeight } = useElementSize(wrapRef);
+	const { height: pageHeight } = useElementSize(pagerRef, { height: 0, width: 0 });
+
+	const style = computed(() => {
+		return {
+			height: `${wrapHeight.value - pageHeight.value}px`,
+		};
+	});
+
+	return {
+		wrapRef,
+		pagerRef,
+		tableRef,
+		style,
+	};
+}

package/src/components/business/bcTreeSelect/bcTreeSelect.vue

@@ -0,0 +1,12 @@
+<template>
+	<hs-tree-select class="bc-tree-select" v-bind="$attrs">
+		<template #default="{ data }"> {{ data.label }}<span style="color: gray">(suffix)</span></template>
+	</hs-tree-select>
+</template>
+<script lang="ts" setup name="bcTreeSelect"></script>
+<style scoped lang="scss"></style>
+<style>
+.bc-tree-select .el-tree-node__content {
+	height: 36px !important;
+}
+</style>

package/src/components/business/cardID/cardID.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-button text @click="dialogVisible = true">
+    Click to open Dialog
+  </el-button>
+  <div>111111111111111</div>
+  <el-dialog v-model="dialogVisible" title="Tips" width="30%" draggable :modal="false" :close-on-click-modal="false" append-to-body>
+    <span>It's a draggable Dialog</span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button>Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+
+const dialogVisible = ref(false)
+</script>

package/src/components/component.ts

@@ -0,0 +1,190 @@
+import { App } from 'vue';
+import hsTest from '/@/components/base/hsTest/HsTest.vue';
+import hsTable from '/@/components/base/hsTable/hsTable.vue';
+import hsBCTable from '/@/components/base/hsTable/hsBCTable.vue';
+import hsButton from '/@/components/base/hsButton/src/hsButton.vue';
+import hsButtonGroup from '/@/components/base/hsButton/src/hsButtonGroup.vue';
+import hsInput from '/@/components/base/hsInput/src/hsInput.vue';
+import hsSelect from '/@/components/base/hsSelect/src/hsSelect.vue';
+import hsOption from '/@/components/base/hsSelect/src/hsOption.vue';
+import hsOptionGroup from '/@/components/base/hsSelect/src/hsOptionGroup.vue';
+import hsForm from '/@/components/base/hsForm/src/hsForm.vue';
+import hsFormItem from '/@/components/base/hsForm/src/hsFormItem.vue';
+import hsRow from '/@/components/base/hsRow/src/hsRow.vue';
+import hsCol from '/@/components/base/hsCol/src/hsCol.vue';
+import hsTree from '/@/components/base/hsTree/src/hsTree.vue';
+import hsInputNumber from '/@/components/base/hsInputNumber/src/hsInputNumber.vue';
+import hsSwitch from '/@/components/base/hsSwitch/src/hsSwitch.vue';
+import hsRadio from '/@/components/base/hsRadio/src/hsRadio.vue';
+import hsRadioGroup from '/@/components/base/hsRadio/src/hsRadioGroup.vue';
+import hsRadioButton from '/@/components/base/hsRadio/src/hsRadioButton.vue';
+import hsCheckbox from '/@/components/base/hsCheckbox/src/hsCheckbox.vue';
+import hsCheckboxGroup from '/@/components/base/hsCheckbox/src/hsCheckboxGroup.vue';
+import hsCheckboxButton from '/@/components/base/hsCheckbox/src/hsCheckboxButton.vue';
+import hsRate from '/@/components/base/hsRate/src/hsRate.vue';
+import hsAutocomplete from '/@/components/base/hsAutocomplete/src/hsAutocomplete.vue';
+import hsSlider from '/@/components/base/hsSlider/src/hsSlider.vue';
+import hsCascader from '/@/components/base/hsCascader/src/hsCascader.vue';
+import hsCascaderPanel from '/@/components/base/hsCascader/src/hsCascaderPanel.vue';
+import hsColorPicker from '/@/components/base/hsColorPicker/src/hsColorPicker.vue';
+import hsUpload from '/@/components/base/hsUpload/src/hsUpload.vue';
+import hsTransfer from '/@/components/base/hsTransfer/src/hsTransfer.vue';
+import hsDatePicker from '/@/components/base/hsDatePicker/src/hsDatePicker.vue';
+import hsScrollbar from '/@/components/base/hsScrollbar/src/hsScrollbar.vue';
+import hsCalendar from '/@/components/base/hsCalendar/src/hsCalendar.vue';
+import hsCarousel from '/@/components/base/hsCarousel/src/hsCarousel.vue';
+import hsCarouselItem from '/@/components/base/hsCarousel/src/hsCarouselItem.vue';
+import hsCollapse from '/@/components/base/hsCollapse/src/hsCollapse.vue';
+import hsCollapseItem from '/@/components/base/hsCollapse/src/hsCollapseItem.vue';
+import hsProgress from '/@/components/base/hsProgress/src/hsProgress.vue';
+import hsResult from '/@/components/base/hsResult/src/hsResult.vue';
+import hsTour from '/@/components/base/hsTour/src/hsTour.vue';
+import hsTourStep from '/@/components/base/hsTour/src/hsTourStep.vue';
+import hsTag from '/@/components/base/hsTag/src/hsTag.vue';
+import hsCheckTag from '/@/components/base/hsTag/src/hsCheckTag.vue';
+import hsAffix from '/@/components/base/hsAffix/src/hsAffix.vue';
+import hsTabs from '/@/components/base/hsTabs/src/hsTabs.vue';
+import hsTabPane from '/@/components/base/hsTabs/src/hsTabPane.vue';
+import hsSteps from '/@/components/base/hsSteps/src/hsSteps.vue';
+import hsStep from '/@/components/base/hsSteps/src/hsStep.vue';
+import hsAlert from '/@/components/base/hsAlert/src/hsAlert.vue';
+import hsDialog from '/@/components/base/hsDialog/src/hsDialog.vue';
+import hsDrawer from '/@/components/base/hsDrawer/src/hsDrawer.vue';
+import hsPopconfirm from '/@/components/base/hsPopconfirm/src/hsPopconfirm.vue';
+import hsPopover from '/@/components/base/hsPopover/src/hsPopover.vue';
+import hsTooltip from '/@/components/base/hsTooltip/src/hsTooltip.vue';
+import hsWatermark from '/@/components/base/hsWatermark/src/hsWatermark.vue';
+import hsDropdown from '/@/components/base/hsDropdown/src/hsDropdown.vue';
+import hsDropdownMenu from '/@/components/base/hsDropdown/src/hsDropdownMenu.vue';
+import hsDropdownItem from '/@/components/base/hsDropdown/src/hsDropdownItem.vue';
+import hsTreeSelect from '/@/components/base/hsTreeSelect/src/hsTreeSelect.vue';
+
+import bcIcon from '/@/components/business/bcIcon/bcIcon.vue';
+import bcBtn from '/@/components/business/bcBtn/bcBtn.vue';
+import bcForm from '/@/components/business/bcForm/bcForm.vue';
+import bcFormSearch from '/@/components/business/bcForm/bcFormSearch.vue';
+import bcTable from '/@/components/business/bcTable/bcTable.vue';
+import bcFormTable from '/@/components/business/bcFormTable/bcFormTable.vue';
+import bcSelect from '/@/components/business/bcSelect/bcSelect.vue';
+import bcFormConfig from '/@/components/business/bcFormConfig/bcFormConfig.vue';
+import bcTreeSelect from '/@/components/business/bcTreeSelect/bcTreeSelect.vue';
+import bcPageConfig from '/@/components/business/bcPageConfig/bcPageConfig.vue';
+import bcSwitchSystems from '/@/components/business/bcSwitchSystems/bcSwitchSystems.vue';
+import bcAutoComplete from './business/bcAutoComplete/bcAutoComplete.vue';
+// 配置组件
+import inputAttrConfig from '/@/components/config/inputAttrConfig/inputAttrConfig.vue';
+import inputEventConfig from '/@/components/config/inputAttrConfig/inputEventConfig.vue';
+import selectAttrConfig from '/@/components/config/selectAttrConfig/selectAttrConfig.vue';
+import datePickerAttrConfig from '/@/components/config/datePickerAttrConfig/datePickerAttrConfig.vue';
+import buttonAttrConfig from '/@/components/config/buttonAttrConfig/buttonAttrConfig.vue';
+import autocompleteAttrConfig from '/@/components/config/autocompleteAttrConfig/autocompleteAttrConfig.vue';
+import switchAttrConfig from '/@/components/config/switchAttrConfig/switchAttrConfig.vue';
+import uploadAttrConfig from '/@/components/config/uploadAttrConfig/uploadAttrConfig.vue';
+import checkboxAttrConfig from '/@/components/config/checkboxAttrConfig/checkboxAttrConfig.vue';
+import radioAttrConfig from '/@/components/config/radioAttrConfig/radioAttrConfig.vue';
+import inputNumberAttrConfig from '/@/components/config/inputNumberAttrConfig/inputNumberAttrConfig.vue';
+import cascaderAttrConfig from '/@/components/config/cascaderAttrConfig/cascaderAttrConfig.vue';
+import cascaderPanelAttrConfig from '/@/components/config/cascaderPanelAttrConfig/cascaderPanelAttrConfig.vue';
+import treeSelectAttrConfig from '/@/components/config/treeSelectAttrConfig/treeSelectAttrConfig.vue';
+const components = [
+	{ title: 'hs-test', componentName: hsTest },
+	{ title: 'hs-table', componentName: hsTable },
+	{ title: 'hs-bc-table', componentName: hsBCTable },
+	{ title: 'hs-button', componentName: hsButton },
+	{ title: 'hs-button-group', componentName: hsButtonGroup },
+	{ title: 'hs-input', componentName: hsInput },
+	{ title: 'hs-select', componentName: hsSelect },
+	{ title: 'hs-option', componentName: hsOption },
+	{ title: 'hs-option-group', componentName: hsOptionGroup },
+	{ title: 'hs-form', componentName: hsForm },
+	{ title: 'hs-form-item', componentName: hsFormItem },
+	{ title: 'hs-row', componentName: hsRow },
+	{ title: 'hs-col', componentName: hsCol },
+	{ title: 'hs-tree', componentName: hsTree },
+	{ title: 'hs-input-number', componentName: hsInputNumber },
+	{ title: 'hs-switch', componentName: hsSwitch },
+	{ title: 'hs-radio', componentName: hsRadio },
+	{ title: 'hs-radio-group', componentName: hsRadioGroup },
+	{ title: 'hs-radio-button', componentName: hsRadioButton },
+	{ title: 'hs-checkbox', componentName: hsCheckbox },
+	{ title: 'hs-checkbox-group', componentName: hsCheckboxGroup },
+	{ title: 'hs-checkbox-button', componentName: hsCheckboxButton },
+	{ title: 'hs-rate', componentName: hsRate },
+	{ title: 'hs-autocomplete', componentName: hsAutocomplete },
+	{ title: 'hs-slider', componentName: hsSlider },
+	{ title: 'hs-cascader', componentName: hsCascader },
+	{ title: 'hs-cascader-panel', componentName: hsCascaderPanel },
+	{ title: 'hs-color-picker', componentName: hsColorPicker },
+	{ title: 'hs-upload', componentName: hsUpload },
+	{ title: 'hs-transfer', componentName: hsTransfer },
+	{ title: 'hs-date-picker', componentName: hsDatePicker },
+	{ title: 'hs-scrollbar', componentName: hsScrollbar },
+	{ title: 'hs-calendar', componentName: hsCalendar },
+	{ title: 'hs-carousel', componentName: hsCarousel },
+	{ title: 'hs-carousel-item', componentName: hsCarouselItem },
+	{ title: 'hs-collapse', componentName: hsCollapse },
+	{ title: 'hs-collapse-item', componentName: hsCollapseItem },
+	{ title: 'hs-progress', componentName: hsProgress },
+	{ title: 'hs-result', componentName: hsResult },
+	{ title: 'hs-tour', componentName: hsTour },
+	{ title: 'hs-tour-step', componentName: hsTourStep },
+	{ title: 'hs-tag', componentName: hsTag },
+	{ title: 'hs-check-tag', componentName: hsCheckTag },
+	{ title: 'hs-affix', componentName: hsAffix },
+	{ title: 'hs-tabs', componentName: hsTabs },
+	{ title: 'hs-tab-pane', componentName: hsTabPane },
+	{ title: 'hs-steps', componentName: hsSteps },
+	{ title: 'hs-step', componentName: hsStep },
+	{ title: 'hs-alert', componentName: hsAlert },
+	{ title: 'hs-dialog', componentName: hsDialog },
+	{ title: 'hs-drawer', componentName: hsDrawer },
+	{ title: 'hs-popconfirm', componentName: hsPopconfirm },
+	{ title: 'hs-popover', componentName: hsPopover },
+	{ title: 'hs-tooltip', componentName: hsTooltip },
+	{ title: 'hs-watermark', componentName: hsWatermark },
+	{ title: 'hs-dropdown', componentName: hsDropdown },
+	{ title: 'hs-dropdown-menu', componentName: hsDropdownMenu },
+	{ title: 'hs-dropdown-item', componentName: hsDropdownItem },
+	{ title: 'hs-tree-select', componentName: hsTreeSelect },
+
+	// 业务组件
+	{ title: 'bc-btn', componentName: bcBtn },
+	{ title: 'bc-icon', componentName: bcIcon },
+	{ title: 'bc-form', componentName: bcForm },
+	{ title: 'bc-form-search', componentName: bcFormSearch },
+	{ title: 'bc-table', componentName: bcTable },
+	{ title: 'bc-form-table', componentName: bcFormTable },
+	{ title: 'bc-form-config', componentName: bcFormConfig },
+	{ title: 'bc-select', componentName: bcSelect },
+	{ title: 'bc-tree-select', componentName: bcTreeSelect },
+	{ title: 'bc-page-config', componentName: bcPageConfig },
+	{ title: 'bc-switch-systems', componentName: bcSwitchSystems },
+	{ title: 'bc-auto-complete', componentName: bcAutoComplete },
+
+	// 配置组件
+	{ title: 'hs-config-input', componentName: inputAttrConfig },
+	{ title: 'hs-config-event', componentName: inputEventConfig },
+	{ title: 'hs-config-select', componentName: selectAttrConfig },
+	{ title: 'hs-config-date-picker', componentName: datePickerAttrConfig },
+	{ title: 'hs-config-button', componentName: buttonAttrConfig },
+	{ title: 'hs-config-autocomplete', componentName: autocompleteAttrConfig },
+	{ title: 'hs-config-switch', componentName: switchAttrConfig },
+	{ title: 'hs-config-upload', componentName: uploadAttrConfig },
+	{ title: 'hs-config-checkbox', componentName: checkboxAttrConfig },
+	{ title: 'hs-config-radio', componentName: radioAttrConfig },
+	{ title: 'hs-config-input-number', componentName: inputNumberAttrConfig },
+	{ title: 'hs-config-cascader', componentName: cascaderAttrConfig },
+	{ title: 'hs-config-cascader-panel', componentName: cascaderPanelAttrConfig },
+	{ title: 'hs-config-tree-select', componentName: treeSelectAttrConfig },
+] as const;
+
+export type Component = Student<typeof components, 'title'>;
+
+export default {
+	install(app: App) {
+		components.forEach((item) => {
+			// 通过循环遍历数据批量注册组件
+			app.component(item.title, item.componentName);
+		});
+	},
+};

package/src/components/config/autocompleteAttrConfig/autocompleteAttrConfig.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="p-[10px] h-full">
+		<base-form v-model:data="data" :config="autocompleteAttrConfig" :isVModel="isVModel"></base-form>
+	</div>
+</template>
+
+<script setup lang="ts" name="autocompleteAttrConfig">
+import baseForm from '../baseForm.vue';
+import { ref } from 'vue';
+import { autocompleteAttrConfig, autocompleteAttrConfigMap } from './config';
+import _ from 'lodash';
+const props = defineProps({
+	data: {
+		type: Object,
+		default: () => {},
+	},
+	isVModel: {
+		type: Boolean,
+		default: false,
+	},
+});
+// lodash判断对象是否为空
+const data = ref(_.isEmpty(props.data) ? Object.assign(props.data, _.cloneDeep(autocompleteAttrConfigMap)) : props.data);
+</script>
+
+<style scoped lang="scss"></style>