hs-admin-ui 1.0.0

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

@@ -0,0 +1,19 @@
+import { showPopup } from '/@/utils/showPopup';
+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 { MoreFilled } from '@element-plus/icons-vue';
+import ICustomData from '/@/types/customData';
+import { ref } from 'vue';
+import { formStore } from '/@/utils/storage';
+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,51 @@
+import { Ref, toValue, nextTick } from 'vue';
+import { VxeTableDefines, VxeTableInstance, VxePagerDefines } from 'vxe-table';
+import ICustomData from '/@/types/customData';
+import ComponentAttr from '/@/types/components';
+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,188 @@
+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 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-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>

package/src/components/config/autocompleteAttrConfig/config.ts

@@ -0,0 +1,170 @@
+export const autocompleteAttrConfig = [
+	{
+		prop: 'attrs',
+		label: 'autocompleteAttrs',
+		tooltip: 'autocompleteAttrs',
+		type: 'object',
+		el: 'title',
+		children: [
+			{
+				prop: 'defaultValue',
+				label: '默认值',
+				tooltip: '默认值',
+				type: 'string / number / boolean / object / array',
+				el: 'hs-input',
+			},
+			{
+				prop: 'placeholder',
+				label: '占位符',
+				tooltip: '占位符',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fetch-suggestions',
+				label: '远程搜索方法',
+				tooltip: '获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用 callback(data:[])  来返回它',
+				type: 'Function',
+				el: 'hs-input',
+			},
+			{
+				prop: 'fetch-url',
+				label: '远程搜索地址',
+				tooltip: '远程搜索地址',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'clearable',
+				label: '是否可清空',
+				tooltip: '是否可清空',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'disabled',
+				label: '是否禁用',
+				tooltip: '自动补全组件是否被禁用',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'value-key',
+				label: '用于显示的键名',
+				tooltip: '输入建议对象中用于显示的键名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'debounce',
+				label: '防抖延时',
+				tooltip: '获取输入建议的防抖延时，单位为毫秒',
+				type: 'number',
+				el: 'hs-input-number',
+			},
+			{
+				prop: 'placement',
+				label: '菜单弹出位置',
+				tooltip: '菜单弹出位置',
+				type: 'enum',
+				el: 'hs-select',
+				op: [
+					{ label: 'bottom', value: 'bottom' },
+					{ label: 'bottom-start', value: 'bottom-start' },
+					{ label: 'bottom-end', value: 'bottom-end' },
+					{ label: 'top', value: 'top' },
+					{ label: 'top-start', value: 'top-start' },
+					{ label: 'top-end', value: 'top-end' },
+				],
+				cel: 'hs-option',
+			},
+			{
+				prop: 'trigger-on-focus',
+				label: 'trigger-on-focus',
+				tooltip: 'whether show suggestions when input focus',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'select-when-unmatched',
+				label: '回车触发select',
+				tooltip: '在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'name',
+				label: 'name',
+				tooltip: '等价于原生 input name 属性',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'label',
+				label: '关联的label',
+				tooltip: '输入框关联的 label 文字',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'hide-loading',
+				label: '隐藏加载图标',
+				tooltip: '是否隐藏远程加载时的加载图标',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'popper-class',
+				label: '下拉列表的类名',
+				tooltip: '下拉列表的类名',
+				type: 'string',
+				el: 'hs-input',
+			},
+			{
+				prop: 'popper-append-to-body',
+				label: '列表插入body',
+				tooltip: '是否将下拉列表插入至 body 元素。 在下拉列表的定位出现问题时，可将该属性设置为 false',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'teleported',
+				label: '传送',
+				tooltip: '是否将下拉列表元素插入 append-to 指向的元素下',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'highlight-first-item',
+				label: '高亮结果第一项',
+				tooltip: '是否默认高亮远程搜索结果的第一项',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+			{
+				prop: 'fit-input-width',
+				label: '宽度与输入框相同',
+				tooltip: '下拉框的宽度是否与输入框相同',
+				type: 'boolean',
+				el: 'hs-switch',
+			},
+		],
+	},
+];
+export const autocompleteAttrConfigMap = {
+	// 默认配置项
+	attrs: {
+		size: 'small',
+		clearable: false, // 是否可清空
+		disabled: false, // 是否禁用
+		'value-key': 'value', // 用于显示的键名
+		debounce: 300, // 防抖延时
+		placement: 'bottom-start', // 菜单弹出位置
+		'trigger-on-focus': true, // whether show suggestions when input focus
+		'select-when-unmatched': false, // 在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件
+		'hide-loading': false, // 是否隐藏远程加载时的加载图标
+		teleported: true, // 是否将下拉列表元素插入 append-to 指向的元素下
+		'highlight-first-item': false, // 是否默认高亮远程搜索结果的第一项
+		'fit-input-width': false, // 下拉框的宽度是否与输入框相同
+	},
+};