hs-admin-ui 1.0.0 → 1.0.2

package/src/views/test/test/test/345/211/257/346/234/254.vue

@@ -1,2424 +0,0 @@
-<template>
-	<div class="system-user-container layout-padding">
-		<el-card shadow="hover" class="layout-padding-auto">
-			<div class="flex flex-row min-h-[600px]">
-				<div class="flex-1 bg-red-200">
-					<!-- <hs-input v-bind="data2.attrs" v-model="inputVal"></hs-input>
-          {{ data2 }} -->
-					<!-- <hs-select v-bind="selectData.selectAttrs" v-model="selectValue3">
-            <hs-option v-for="item  in JSON.parse(selectData.selectAttrs.options)" v-bind="selectData.optionAttrs" :key="item.value" :label="item[selectData.optionAttrs.label]" :value="item[selectData.optionAttrs.value]"    />
-          </hs-select> -->
-					<!-- {{  selectData  }} -->
-
-					<!-- <hs-date-picker v-model="datePickerValue" v-bind="datePickerData.attrs"   />
-          {{ datePickerData }} -->
-					<!-- {{ buttonData }} -->
-					<!-- <hs-autocomplete v-model="autocompleteValue" v-bind="autocompleteData.attrs"></hs-autocomplete>
-          {{autocompleteData}} -->
-					<!-- <hs-switch v-model="switchValue" v-bind="switchData.attrs" />
-          {{ switchData }} -->
-					<!-- {{ uploadData }} -->
-					<!-- {{ checkboxData }} -->
-					<!-- {{ radioData }} -->
-					<!-- <hs-input-number v-model="inputNumberValue" v-bind="inputNumberData.attrs"/>
-          {{ inputNumberData }} -->
-					<!-- <hs-cascader v-model="cascaderValue" v-bind="cascaderData.attrs" :options="cascaderData.attrs.options ?JSON.parse(cascaderData.attrs.options) : []" />
-					{{ cascaderData }} -->
-					<!-- <hs-cascader-panel
-						v-model="cascaderPanelValue2"
-						v-bind="cascaderPanelData.attrs"
-						:options="cascaderPanelData.attrs && cascaderPanelData.attrs.options ? JSON.parse(cascaderPanelData.attrs.options) : []"
-					/>
-					{{ cascaderPanelData }} -->
-          {{ treeSelectData2 }}
-				</div>
-				<div class="basis-1/4 border-2 border-amber-400 border-solid">
-					<!-- <input-attr-config :data="data2"> </input-attr-config> -->
-					<!-- <input-event-config :data="data2"></input-event-config> -->
-					<!-- <select-attr-config :data="selectData"></select-attr-config> -->
-					<!-- <date-picker-attr-config :data="datePickerData"></date-picker-attr-config> -->
-					<!-- <button-attr-config :data="buttonData"></button-attr-config> -->
-					<!-- <autocomplete-attr-config :data="autocompleteData"></autocomplete-attr-config> -->
-					<!-- <switch-attr-config :data="switchData"></switch-attr-config> -->
-					<!-- <upload-attr-config :data="uploadData"></upload-attr-config> -->
-					<!-- <checkbox-attr-config :data="checkboxData"></checkbox-attr-config> -->
-
-					<!-- <radio-attr-config :data="radioData"></radio-attr-config> -->
-					<!-- <input-number-attr-config :data="inputNumberData"></input-number-attr-config> -->
-					<!-- <cascader-attr-config :data="cascaderData"></cascader-attr-config> -->
-					<!-- <cascader-panel-attr-config :data="cascaderPanelData" :isVModel="false"></cascader-panel-attr-config> -->
-          <tree-select-attr-config :data="treeSelectData2" :isVModel="true"></tree-select-attr-config>
-				</div>
-			</div>
-			<!-- 新组件 -->
-			<hs-button color="#626aef" ref="buttonRef" @click="getCheckedNodes">
-				按钮
-				<template #icon> icon </template>
-			</hs-button>
-
-			<!-- 原组件 -->
-			<!-- <div> -->
-			<el-button type="danger" ref="buttonRef2" @click="testMessage"> 测试 </el-button>
-			<!-- </div> -->
-			<hs-button-group>
-				<hs-button type="primary" icon="ele-ArrowLeft" @click="getVal()">Previous Page</hs-button>
-				<hs-button type="primary" @click="click(2, 4, 6)">
-					Next Page<el-icon class="el-icon--right"><ele-ArrowRight /></el-icon>
-				</hs-button>
-			</hs-button-group>
-			<hs-input
-				v-model="testValue"
-				placeholder="请输入hs-input"
-				@blur="handleBlur"
-				@focus="handleFocus"
-				@change="handleChange"
-				@input="handleInput"
-				@clear="handleClear"
-				clearable
-				@keyup.enter="inputEnter"
-				ref="inputRef"
-				size="small"
-				maxlength="10"
-			>
-				<template #prefix>prefix</template>
-				<template #suffix>Hsuffix</template>
-				<template #prepend>Http://</template>
-				<template #append>
-					<el-select v-model="select" placeholder="Select" style="width: 115px">
-						<el-option label="Restaurant" value="1" />
-						<el-option label="Order No." value="2" />
-						<el-option label="Tel" value="3" />
-					</el-select>
-				</template>
-			</hs-input>
-			<el-input
-				v-model="testValue2"
-				placeholder="请输入el-input"
-				@blur="handleBlur"
-				@focus="handleFocus"
-				@change="handleChange"
-				@input="handleInput"
-				@clear="handleClear"
-				clearable
-				@keyup.enter="inputEnter"
-				ref="inputRef2"
-				size="small"
-				maxlength="10"
-			>
-				<template #prefix>prefix</template>
-				<template #suffix>Hsuffix</template>
-				<template #prepend>Http://</template>
-				<template #append>
-					<el-select v-model="select" placeholder="Select" style="width: 115px">
-						<el-option label="Restaurant" value="1" />
-						<el-option label="Order No." value="2" />
-						<el-option label="Tel" value="3" />
-					</el-select>
-				</template>
-			</el-input>
-			<hs-input
-				v-model.number="testValue3"
-				placeholder="请输入hs-input"
-				@blur="handleBlur"
-				@focus="handleFocus"
-				@change="handleChange"
-				@input="handleInput"
-				@clear="handleClear"
-				clearable
-				@keyup.enter="inputEnter"
-				ref="inputRef3"
-				size="small"
-				type="textarea"
-				show-password
-				autosize
-			>
-				<template #prefix>prefix</template>
-				<template #suffix>Hsuffix</template>
-				<template #prepend>Http://</template>
-				<template #append>
-					<el-select v-model="select" placeholder="Select" style="width: 115px">
-						<el-option label="Restaurant" value="1" />
-						<el-option label="Order No." value="2" />
-						<el-option label="Tel" value="3" />
-					</el-select>
-				</template>
-			</hs-input>
-			<el-select
-				v-model="selectValue"
-				class="m-2"
-				placeholder="el-Select"
-				size="large"
-				ref="elSelectRef"
-				multiple
-				clearable
-				@change="selectChange"
-				filterable
-				allow-create
-				clear-icon="ele-Close"
-				fit-input-width
-				suffix-icon="ele-Search"
-				tag-type="warning"
-			>
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-				<template #header>header</template>
-				<template #footer>footer</template>
-				<template #prefix>el-select prefix</template>
-				<template #empty>empty</template>
-			</el-select>
-			<hs-select
-				v-model="selectValue2"
-				class="m-2"
-				placeholder="hs-Select"
-				size="large"
-				ref="hsSelectRef"
-				multiple
-				clearable
-				@change="selectChange"
-				filterable
-				allow-create
-				clear-icon="ele-Close"
-				fit-input-width
-				suffix-icon="ele-Search"
-				tag-type="warning"
-			>
-				<hs-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-				<template #header>header</template>
-				<template #footer>footer</template>
-				<template #prefix>hs-select prefix</template>
-				<template #empty>empty</template>
-			</hs-select>
-
-			<!-- tree -->
-			<el-input v-model="filterText" placeholder="el-input Filter keyword" />
-
-			<el-tree
-				ref="treeRef"
-				class="filter-tree"
-				:data="data"
-				:props="defaultProps"
-				:filter-node-method="filterNode"
-				show-checkbox
-				:check-strictly="true"
-				draggable
-				@check="treeCheck"
-				@node-click="treeNodeClick"
-				@node-contextmenu="treeNodeContextmenu"
-				@check-change="treeCheckChange"
-			/>
-
-			<hs-input v-model="filterText" placeholder="hs-input Filter keyword" />
-
-			<hs-tree
-				ref="treeRef2"
-				class="filter-tree"
-				:data="data"
-				:props="defaultProps"
-				:filter-node-method="filterNode"
-				show-checkbox
-				:check-strictly="true"
-				draggable
-				@check="treeCheck"
-				@node-click="treeNodeClick"
-				@node-contextmenu="treeNodeContextmenu"
-				@check-change="treeCheckChange"
-			>
-				<template #empty>
-					<div>empty</div>
-				</template>
-			</hs-tree>
-			<!-- input-number -->
-			<el-input-number v-model="num" :precision="2" :step="0.1" :max="10" ref="elInputNumberRef" />
-			<hs-input-number v-model="num" :precision="2" :step="0.1" :max="10" ref="hsInputNumberRef" />
-			<!-- switch -->
-			<el-switch
-				v-model="switchValue"
-				active-color="#13ce66"
-				inactive-color="#ff4949"
-				ref="elSwitchRef"
-				active-text="el-switch active-text"
-				inactive-text="el-switch inactive-text"
-				@change="switchChange"
-			>
-				<template #active-action>active</template>
-				<template #inactive-action>inactive</template>
-			</el-switch>
-			<hs-switch
-				v-model="switchValue"
-				active-color="#13ce66"
-				inactive-color="#ff4949"
-				ref="hsSwitchRef"
-				active-text="hs-switch active-text"
-				inactive-text="hs-switch inactive-text"
-				@change="switchChange"
-			>
-				<template #active-action>active</template>
-				<template #inactive-action>inactive</template>
-			</hs-switch>
-			<!-- radio -->
-			<el-radio-group v-model="radio" ref="elRadioGroupRef" @change="radioChange">
-				<el-radio-button label="上海" ref="elRadioButtonRef">上海</el-radio-button>
-				<el-radio-button label="北京">北京</el-radio-button>
-				<el-radio-button label="广州">广州</el-radio-button>
-				<el-radio-button label="深圳">深圳</el-radio-button>
-			</el-radio-group>
-			<hs-radio-group v-model="radio" ref="hsRadioGroupRef" @change="radioChange">
-				<hs-radio-button label="上海" ref="hsRadioButtonRef">上海</hs-radio-button>
-				<hs-radio-button label="北京">北京</hs-radio-button>
-				<hs-radio-button label="广州">广州</hs-radio-button>
-				<hs-radio-button label="深圳">深圳</hs-radio-button>
-			</hs-radio-group>
-			<el-radio-group v-model="radio1" class="ml-4" @change="radioChange">
-				<el-radio label="1" size="large">Option 1</el-radio>
-				<el-radio label="2" size="large">Option 2</el-radio>
-			</el-radio-group>
-			<hs-radio-group v-model="radio1" class="ml-4" @change="radioChange">
-				<hs-radio label="1" size="large">Option 1</hs-radio>
-				<hs-radio label="2" size="large">Option 2</hs-radio>
-			</hs-radio-group>
-			<el-radio v-model="switchValue" :label="true" size="large" @change="radioChange"></el-radio>
-			<hs-radio v-model="switchValue" :label="true" size="large" @change="radioChange"></hs-radio>
-			<!-- checkbox -->
-			<el-checkbox v-model="checked1" label="Option 1" size="large" ref="elCheckboxRef" @change="checkboxChange" />
-			<el-checkbox v-model="checked2" label="Option 2" size="large" />
-			<hs-checkbox v-model="checked1" label="Option 1" size="large" ref="hsCheckboxRef" @change="checkboxChange" />
-			<hs-checkbox v-model="checked2" label="Option 2" size="large" />
-			<el-checkbox-group v-model="checkList">
-				<el-checkbox label="Option A" />
-				<el-checkbox label="Option B" />
-				<el-checkbox label="Option C" />
-				<el-checkbox label="disabled" disabled />
-				<el-checkbox label="selected and disabled" disabled />
-			</el-checkbox-group>
-			<hs-checkbox-group v-model="checkList">
-				<hs-checkbox label="Option A" />
-				<hs-checkbox label="Option B" />
-				<hs-checkbox label="Option C" />
-				<hs-checkbox label="disabled" disabled />
-				<hs-checkbox label="selected and disabled" disabled />
-			</hs-checkbox-group>
-			<el-checkbox-group v-model="checkboxGroup4" size="small">
-				<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox-button>
-			</el-checkbox-group>
-			<hs-checkbox-group v-model="checkboxGroup4" size="small">
-				<hs-checkbox-button v-for="city in cities" :key="city" :label="city">{{ city }}</hs-checkbox-button>
-			</hs-checkbox-group>
-			<!-- rate -->
-			<el-rate v-model="value2" :colors="colors" clearable size="small" @change="rateChange" ref="elRateRef" />
-			<hs-rate v-model="value2" :colors="colors" clearable size="small" @change="rateChange" ref="hsRateRef" />
-			<!-- autocomplete -->
-			<el-autocomplete
-				v-model="state1"
-				:fetch-suggestions="querySearchAsync"
-				clearable
-				class="inline-input w-50"
-				placeholder="Please el-Input"
-				@select="handleSelect"
-				ref="elAutocompleteRef"
-			>
-			</el-autocomplete>
-			<hs-autocomplete
-				v-model="state1"
-				:fetch-suggestions="querySearchAsync"
-				clearable
-				class="inline-input w-50"
-				placeholder="Please hs-Input"
-				@select="handleSelect"
-				ref="hsAutocompleteRef"
-			>
-			</hs-autocomplete>
-			<!-- slider -->
-			<div class="slider-demo-block">
-				<span class="demonstration">el-slider</span>
-				<el-slider
-					v-model="innerValue"
-					ref="sliderRef"
-					@change="sliderChange"
-					@input="sliderInput"
-					:max="50"
-					:step="10"
-					show-input
-					:show-input-controls="false"
-					size="small"
-					show-stops
-				></el-slider>
-			</div>
-			<div class="slider-demo-block">
-				<span class="demonstration">hs-slider</span>
-				<hs-slider
-					v-model="innerValue"
-					ref="hsSliderRef"
-					@change="sliderChange"
-					@input="sliderInput"
-					:max="50"
-					:step="10"
-					show-input
-					:show-input-controls="false"
-					size="small"
-					show-stops
-				></hs-slider>
-				<!-- color-picker -->
-				<div class="demo-color-block">
-					<span class="demonstration">el-color-picker</span>
-					<el-color-picker
-						v-model="color"
-						ref="colorPickerRef"
-						show-alpha
-						@change="colorChange"
-						@active-change="colorActiveChange"
-						@focus="colorFocus"
-						@blur="colorBlur"
-					></el-color-picker>
-				</div>
-				<div class="demo-color-block">
-					<span class="demonstration">hs-color-picker</span>
-					<hs-color-picker
-						v-model="color"
-						ref="hsColorPickerRef"
-						show-alpha
-						@change="colorChange"
-						@active-change="colorActiveChange"
-						@focus="colorFocus"
-						@blur="colorBlur"
-					></hs-color-picker>
-				</div>
-			</div>
-			<!-- cascader -->
-			<div class="m-4">
-				<p>Child options expand when clicked (default) el-cascader</p>
-				<el-cascader v-model="value" :options="options1" clearable filterable @change="cascaderChange" ref="elCascaderRef">
-					<template #default="{ data, node }">
-						<span>{{ data.label }}</span>
-						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-					</template>
-				</el-cascader>
-			</div>
-			<div class="m-4">
-				<p>Child options expand when hovered el-cascader</p>
-				<el-cascader v-model="value" :options="options1" :props="props" clearable collapse-tags filterable @change="cascaderChange" />
-			</div>
-			<div class="m-4">
-				<p>Child options expand when clicked (default) hs-cascader</p>
-				<hs-cascader v-model="value" :options="options1" clearable filterable @change="cascaderChange" ref="hsCascaderRef">
-					<template #default="{ data, node }">
-						<span>{{ data.label }}</span>
-						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-					</template>
-				</hs-cascader>
-			</div>
-			<div class="m-4">
-				<p>Child options expand when hovered hs-cascader</p>
-				<hs-cascader v-model="value" :options="options1" :props="props" clearable collapse-tags filterable @change="cascaderChange" />
-			</div>
-			<el-cascader-panel v-model="cascaderPanelValue" :options="options1" @change="cascaderPanelChange" ref="elCascaderPanelRef" />
-			<hs-cascader-panel v-model="cascaderPanelValue" :options="options1" @change="cascaderPanelChange" ref="hsCascaderPanelRef" />
-			<!-- upload -->
-			<el-upload
-				v-model:file-list="fileList"
-				class="upload-demo"
-				action="/xypms-web/pub/singlefile"
-				name="file"
-				:data="{
-					top_company_id: '2001',
-					company_id: '2001',
-					pup_token: 'a842ca95c67ec5c722afdb4e69d40d45',
-				}"
-				multiple
-				:on-preview="handlePreview"
-				:on-remove="handleRemove"
-				:before-remove="beforeRemove"
-				:limit="3"
-				:on-exceed="handleExceed"
-				ref="elUploadRef"
-				:on-error="handleError"
-				:on-success="handleSuccess"
-			>
-				<el-button type="primary">Click to upload</el-button>
-				<template #tip>
-					<div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
-				</template>
-			</el-upload>
-			<hs-upload
-				v-model:file-list="fileList"
-				class="upload-demo"
-				action="/xypms-web/pub/singlefile"
-				name="file"
-				:data="{
-					top_company_id: '2001',
-					company_id: '2001',
-					pup_token: 'a842ca95c67ec5c722afdb4e69d40d45',
-				}"
-				multiple
-				:on-preview="handlePreview"
-				:on-remove="handleRemove"
-				:before-remove="beforeRemove"
-				:limit="3"
-				:on-exceed="handleExceed"
-				ref="hsUploadRef"
-				:on-error="handleError"
-				:on-success="handleSuccess"
-			>
-				<hs-button type="primary">Click to upload</hs-button>
-				<template #tip>
-					<div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
-				</template>
-			</hs-upload>
-			<!-- transfer -->
-			<el-transfer v-model="transferValue" :data="transferData" ref="elTransferRef" />
-			<el-divider border-style="dashed" />
-			<hs-transfer v-model="transferValue" :data="transferData" ref="hsTransferRef" />
-			<el-divider border-style="dashed" />
-			<el-transfer v-model="transferValue" :data="transferData" :button-texts="['To left', 'To right']" filterable :titles="['Source', 'Target']">
-				<template #left-footer>
-					<el-button class="transfer-footer" size="small">Operation</el-button>
-				</template>
-				<template #right-footer>
-					<el-button class="transfer-footer" size="small">Operation</el-button>
-				</template>
-			</el-transfer>
-			<el-divider border-style="dashed" />
-			<hs-transfer v-model="transferValue" :data="transferData" :button-texts="['To left', 'To right']" filterable :titles="['Source', 'Target']">
-				<template #left-footer>
-					<el-button class="transfer-footer" size="small">Operation</el-button>
-				</template>
-				<template #right-footer>
-					<el-button class="transfer-footer" size="small">Operation</el-button>
-				</template>
-			</hs-transfer>
-			<!-- date-picker -->
-			<el-date-picker
-				v-model="date"
-				type="date"
-				placeholder="选择日期"
-				ref="elDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<hs-date-picker
-				v-model="date"
-				type="date"
-				placeholder="选择日期"
-				ref="hsDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<el-divider border-style="dashed" />
-			<el-date-picker
-				v-model="date"
-				type="datetime"
-				placeholder="选择日期"
-				ref="elDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<hs-date-picker
-				v-model="date"
-				type="datetime"
-				placeholder="选择日期"
-				ref="hsDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<el-divider border-style="dashed" />
-			<el-date-picker
-				v-model="dateArray"
-				type="datetimerange"
-				start-placeholder="Start date"
-				end-placeholder="End date"
-				ref="elDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<hs-date-picker
-				v-model="dateArray"
-				type="datetimerange"
-				start-placeholder="Start date"
-				end-placeholder="End date"
-				ref="hsDatePickerRef"
-				@change="dateChange"
-				@input="dateInput"
-				@focus="dateFocus"
-				@blur="dateBlur"
-				:picker-options="{
-					disabledDate(time) {
-						return time.getTime() > Date.now();
-					},
-				}"
-			/>
-			<!-- calendar -->
-			<el-calendar v-model="calendarValue" :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" ref="elCalendarRef" />
-			<el-divider border-style="dashed" />
-			<hs-calendar v-model="calendarValue" :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]" ref="hsCalendarRef" />
-			<!-- carousel -->
-			<div class="block text-center">
-				<span class="demonstration">Switch when indicator is hovered (default) el-carousel</span>
-				<el-carousel height="150px" type="card" direction="vertical">
-					<el-carousel-item v-for="item in 4" :key="item">
-						<h3 class="small justify-center" text="2xl">{{ item }}</h3>
-					</el-carousel-item>
-				</el-carousel>
-			</div>
-			<div class="block text-center">
-				<span class="demonstration">Switch when indicator is hovered (default) hs-carousel</span>
-				<hs-carousel height="150px" type="card" direction="vertical">
-					<hs-carousel-item v-for="item in 4" :key="item">
-						<h3 class="small justify-center" text="2xl">{{ item }}</h3>
-					</hs-carousel-item>
-				</hs-carousel>
-			</div>
-			<!-- collapse -->
-			<!-- <el-collapse v-model="activeNames" ref="elCollapseRef" @change="collapseChange">
-				<el-collapse-item title="一致性 Consistency" name="1" ref="elCollapseItemRef">
-					<p>一致性 Consistency</p>
-				</el-collapse-item>
-				<el-collapse-item title="反馈 Feedback" name="2">
-					<p>反馈 Feedback</p>
-				</el-collapse-item>
-				<el-collapse-item title="效率 Efficiency" name="3">
-					<p>效率 Efficiency</p>
-				</el-collapse-item>
-			</el-collapse>
-			<el-divider border-style="dashed" />
-			<hs-collapse v-model="activeNames" ref="hsCollapseRef" @change="collapseChange">
-				<hs-collapse-item title="一致性 Consistency" name="1" ref="hsCollapseItemRef">
-					<p>一致性 Consistency</p>
-				</hs-collapse-item>
-				<hs-collapse-item title="反馈 Feedback" name="2">
-					<p>反馈 Feedback</p>
-				</hs-collapse-item>
-				<hs-collapse-item title="效率 Efficiency" name="3">
-					<p>效率 Efficiency</p>
-				</hs-collapse-item>
-			</hs-collapse> -->
-			<!-- progress -->
-			<!-- <div class="demo-progress">
-				<el-progress :percentage="50" ref="elProgressRef" />
-				<el-progress :percentage="100" status="success" />
-				<el-progress :percentage="100" status="warning" />
-				<el-progress :percentage="50" status="exception" />
-			</div>
-			<el-divider border-style="dashed" />
-			<div class="demo-progress">
-				<hs-progress :percentage="50" ref="hsProgressRef" />
-				<hs-progress :percentage="100" status="success" />
-				<hs-progress :percentage="100" status="warning" />
-				<hs-progress :percentage="50" status="exception" />
-			</div>
-			<div class="demo-progress">
-				<el-progress type="dashboard" :percentage="percentage" :color="colors2" :indeterminate="true" :duration="5" />
-				<el-progress type="dashboard" :percentage="percentage2" :color="colors2" />
-				<el-progress :percentage="percentage" :color="colors2" :indeterminate="true" :duration="5" />
-				<el-progress :percentage="percentage2" :color="colors2" striped striped-flow :duration="10" />
-				<div>
-					<el-button-group>
-						<el-button icon="ele-Minus" @click="decrease" />
-						<el-button icon="ele-Plus" @click="increase" />
-					</el-button-group>
-				</div>
-			</div>
-			<el-divider border-style="dashed" />
-			<div class="demo-progress">
-				<hs-progress type="dashboard" :percentage="percentage" :color="colors2" :indeterminate="true" :duration="5" />
-				<hs-progress type="dashboard" :percentage="percentage2" :color="colors2" />
-				<hs-progress :percentage="percentage" :color="colors2" :indeterminate="true" :duration="5" />
-				<hs-progress :percentage="percentage2" :color="colors2" striped striped-flow :duration="10" />
-				<div>
-					<hs-button-group>
-						<hs-button icon="ele-Minus" @click="decrease" />
-						<hs-button icon="ele-Plus" @click="increase" />
-					</hs-button-group>
-				</div>
-			</div> -->
-			<!-- result -->
-			<!-- <el-result icon="success" title="Success Tip" sub-title="Please follow the instructions">
-				<template #extra>
-					<el-button type="primary">Back</el-button>
-				</template>
-			</el-result>
-			<el-divider border-style="dashed" />
-			<hs-result icon="success" title="Success Tip" sub-title="Please follow the instructions">
-				<template #extra>
-					<hs-button type="primary">Back</hs-button>
-				</template>
-			</hs-result> -->
-			<!-- tour -->
-			<!-- <el-button type="primary" @click="open = true">Begin Tour</el-button>
-
-			<el-divider />
-
-			<el-space>
-				<el-button ref="ref1">upload</el-button>
-				<el-button ref="ref2" type="primary">save</el-button>
-				<el-button ref="ref3" icon="ele-MoreFilled" />
-			</el-space>
-
-			<el-tour v-model="open" v-model:current="current" @change="tourChange" ref="elTourRef">
-				<el-tour-step :target="ref1?.$el" title="Upload File">
-					<img src="https://element-plus.org/images/element-plus-logo.svg" alt="tour.png" />
-					<div>Put you files here.</div>
-				</el-tour-step>
-				<el-tour-step :target="ref2?.$el" title="Save" description="Save your changes" />
-				<el-tour-step :target="ref3?.$el" title="Other Actions" description="Click to see other" />
-			</el-tour>
-			<el-divider border-style="dashed" />
-			<hs-button type="primary" @click="open2 = true">Begin Tour</hs-button>
-
-			<el-divider />
-
-			<el-space>
-				<el-button ref="ref4">upload</el-button>
-				<el-button ref="ref5" type="primary">save</el-button>
-				<el-button ref="ref6" icon="ele-MoreFilled" />
-			</el-space>
-
-			<hs-tour v-model="open2" v-model:current="current" @change="tourChange" ref="hsTourRef">
-				<el-tour-step :target="ref4?.$el" title="Upload File">
-					<img src="https://element-plus.org/images/element-plus-logo.svg" alt="tour.png" />
-					<div>Put you files here.</div>
-				</el-tour-step>
-				<el-tour-step :target="ref5?.$el" title="Save" description="Save your changes" />
-				<el-tour-step :target="ref6?.$el" title="Other Actions" description="Click to see other" />
-			</hs-tour> -->
-			<!-- tag -->
-			<!-- <el-divider />
-			<div>
-				<el-tag ref="elTagRef">Tag 1</el-tag>
-				<el-tag class="ml-2" type="success">Tag 2</el-tag>
-				<el-tag class="ml-2" type="info">Tag 3</el-tag>
-				<el-tag class="ml-2" type="warning">Tag 4</el-tag>
-				<el-tag class="ml-2" type="danger" round>Tag 5</el-tag>
-				<el-divider />
-				<el-tag v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type">
-					{{ tag.name }}
-				</el-tag>
-				<el-check-tag checked style="margin-right: 8px">Checked</el-check-tag>
-				<el-check-tag v-model:checked="checkTagChecked" @change="checkTagChange" ref="elCheckTagRef">Toggle me</el-check-tag>
-			</div>
-			<el-divider />
-			<div>
-				<hs-tag ref="hsTagRef">Tag 1</hs-tag>
-				<hs-tag class="ml-2" type="success">Tag 2</hs-tag>
-				<hs-tag class="ml-2" type="info">Tag 3</hs-tag>
-				<hs-tag class="ml-2" type="warning">Tag 4</hs-tag>
-				<hs-tag class="ml-2" type="danger" round>Tag 5</hs-tag>
-				<el-divider />
-				<hs-tag v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type">
-					{{ tag.name }}
-				</hs-tag>
-				<hs-check-tag checked style="margin-right: 8px">Checked</hs-check-tag>
-				<hs-check-tag v-model:checked="checkTagChecked" @change="checkTagChange" ref="hsCheckTagRef">Toggle me</hs-check-tag>
-			</div> -->
-			<!-- affix -->
-			<!-- <el-affix :offset="100" ref="elAffixRef">
-				<el-button type="primary" @click="scrollToTop">Affix top UP</el-button>
-			</el-affix>
-			<el-affix :offset="150" position="bottom" ref="elAffixRef2">
-				<el-button type="primary" @click="scrollToTop">Affix bottom UP</el-button>
-			</el-affix>
-			<el-divider />
-			<hs-affix :offset="150" ref="hsAffixRef">
-				<hs-button type="primary" @click="scrollToBottom">Affix top Down</hs-button>
-			</hs-affix>
-			<hs-affix :offset="100" position="bottom" ref="hsAffixRef2">
-				<hs-button type="primary" @click="scrollToBottom">Affix bottom Down</hs-button>
-			</hs-affix> -->
-			<!-- tab -->
-			<!-- <el-tabs v-model="tabsActiveName" class="demo-tabs" @tab-click="tabsClick" type="border-card" closable addable>
-				<el-tab-pane label="User" name="first">User</el-tab-pane>
-				<el-tab-pane label="Config" name="second">Config</el-tab-pane>
-				<el-tab-pane label="Role" name="third">Role</el-tab-pane>
-				<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
-			</el-tabs>
-			<el-divider />
-			<hs-tabs v-model="tabsActiveName" class="demo-tabs" @tab-click="tabsClick" type="border-card" closable addable>
-				<hs-tab-pane label="User" name="first">User</hs-tab-pane>
-				<hs-tab-pane label="Config" name="second">Config</hs-tab-pane>
-				<hs-tab-pane label="Role" name="third">Role</hs-tab-pane>
-				<hs-tab-pane label="Task" name="fourth">Task</hs-tab-pane>
-			</hs-tabs> -->
-			<!-- steps -->
-			<!-- <el-steps :active="stepsActive" finish-status="success" align-center>
-				<el-step title="Step 1" />
-				<el-step title="Step 2" />
-				<el-step title="Step 3" />
-			</el-steps>
-
-			<el-button style="margin-top: 12px" @click="stepsNext">Next step</el-button>
-			<el-divider />
-			<hs-steps :active="stepsActive" finish-status="success" align-center>
-				<hs-step title="Step 1" />
-				<hs-step title="Step 2" />
-				<hs-step title="Step 3" />
-			</hs-steps>
-
-			<hs-button style="margin-top: 12px" @click="stepsNext">Next step</hs-button> -->
-			<!-- alert -->
-			<!-- <div>
-				<el-alert title="success alert" type="success" ref="elAlertRef" />
-				<el-alert title="info alert" type="info" />
-				<el-alert title="warning alert" type="warning" />
-				<el-alert title="error alert" type="error" />
-			</div>
-			<el-divider />
-			<div>
-				<hs-alert title="success alert" type="success" ref="hsAlertRef" />
-				<hs-alert title="info alert" type="info" />
-				<hs-alert title="warning alert" type="warning" />
-				<hs-alert title="error alert" type="error" />
-			</div> -->
-			<!-- dialog -->
-			<!-- <div>
-				<hs-button text @click="dialogVisible2 = true"> click to open the Dialog </hs-button>
-			</div>
-
-			<hs-dialog v-model="dialogVisible2" title="Tips" width="30%" :before-close="handleClose" ref="hsDialogRef" draggable :modal="false">
-				<span>This is a message</span>
-				<template #footer>
-					<span class="dialog-footer">
-						<hs-button @click="dialogVisible2 = false">Cancel</hs-button>
-						<hs-button type="primary" @click="dialogVisible2 = false"> Confirm </hs-button>
-					</span>
-				</template>
-			</hs-dialog>
-
-			<el-divider />
-			<div>
-				<el-button text @click="dialogVisible = true"> click to open the Dialog </el-button>
-			</div>
-
-			<el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose" ref="elDialogRef" draggable :modal="false">
-				<span>This is a message</span>
-				<template #footer>
-					<span class="dialog-footer">
-						<el-button @click="dialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
-					</span>
-				</template>
-			</el-dialog> -->
-			<!-- drawer -->
-			<!-- <el-radio-group v-model="direction">
-				<el-radio label="ltr">left to right</el-radio>
-				<el-radio label="rtl">right to left</el-radio>
-				<el-radio label="ttb">top to bottom</el-radio>
-				<el-radio label="btt">bottom to top</el-radio>
-			</el-radio-group>
-
-			<el-button type="primary" style="margin-left: 16px" @click="drawer = true"> open </el-button>
-			<el-button type="primary" style="margin-left: 16px" @click="drawer2 = true"> with footer </el-button>
-
-			<el-drawer v-model="drawer" title="I am the title" :direction="direction" :before-close="handleClose" ref="elDrawerRef">
-				<span>Hi, there!</span>
-			</el-drawer>
-			<el-drawer v-model="drawer2" :direction="direction">
-				<template #header>
-					<h4>set title by slot</h4>
-				</template>
-				<template #default>
-					<div>
-						<el-radio v-model="radio1" label="Option 1" size="large">Option 1</el-radio>
-						<el-radio v-model="radio1" label="Option 2" size="large">Option 2</el-radio>
-					</div>
-				</template>
-				<template #footer>
-					<div style="flex: auto">
-						<el-button @click="cancelClick">cancel</el-button>
-						<el-button type="primary" @click="confirmClick">confirm</el-button>
-					</div>
-				</template>
-			</el-drawer>
-			<el-divider />
-			<hs-radio-group v-model="direction">
-				<hs-radio label="ltr">left to right</hs-radio>
-				<hs-radio label="rtl">right to left</hs-radio>
-				<hs-radio label="ttb">top to bottom</hs-radio>
-				<hs-radio label="btt">bottom to top</hs-radio>
-			</hs-radio-group>
-
-			<hs-button type="primary" style="margin-left: 16px" @click="drawer = true"> open </hs-button>
-			<hs-button type="primary" style="margin-left: 16px" @click="drawer2 = true"> with footer </hs-button>
-
-			<hs-drawer v-model="drawer" title="I am the title" :direction="direction" :before-close="handleClose" ref="hsDrawerRef">
-				<span>Hi, there!</span>
-			</hs-drawer>
-
-			<hs-drawer v-model="drawer2" :direction="direction">
-				<template #header>
-					<h4>set title by slot</h4>
-				</template>
-				<template #default>
-					<div>
-						<hs-radio v-model="radio1" label="Option 1" size="large">Option 1</hs-radio>
-						<hs-radio v-model="radio1" label="Option 2" size="large">Option 2</hs-radio>
-					</div>
-				</template>
-				<template #footer>
-					<div style="flex: auto">
-						<hs-button @click="cancelClick">cancel</hs-button>
-						<hs-button type="primary" @click="confirmClick">confirm</hs-button>
-					</div>
-				</template>
-			</hs-drawer> -->
-			<!-- popconfirm -->
-			<!-- <el-popconfirm title="Are you sure to delete this?" ref="elPopconfirmRef">
-				<template #reference>
-					<el-button>Delete el</el-button>
-				</template>
-			</el-popconfirm>
-			<el-divider />
-			<hs-popconfirm title="Are you sure to delete this?" ref="hsPopconfirmRef">
-				<template #reference>
-					<hs-button>Delete hs</hs-button>
-				</template>
-			</hs-popconfirm> -->
-			<!-- popover -->
-			<!-- <el-popover
-				placement="top-start"
-				title="Title"
-				:width="200"
-				trigger="hover"
-				content="this is content, this is content, this is content"
-				ref="elPopoverRef"
-			>
-				<template #reference>
-					<el-button class="m-2">Hover to activate</el-button>
-				</template>
-			</el-popover>
-
-			<el-popover placement="bottom" title="Title" :width="200" trigger="click" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2">Click to activate</el-button>
-				</template>
-			</el-popover>
-
-			<el-popover
-				ref="popover"
-				placement="right"
-				title="Title"
-				:width="200"
-				trigger="focus"
-				content="this is content, this is content, this is content"
-			>
-				<template #reference>
-					<el-button class="m-2">Focus to activate</el-button>
-				</template>
-			</el-popover>
-
-			<el-popover ref="popover" title="Title" :width="200" trigger="contextmenu" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2">contextmenu to activate</el-button>
-				</template>
-			</el-popover>
-
-			<el-popover :visible="visible" placement="bottom" title="Title" :width="200" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2" @click="visible = !visible">Manual to activate</el-button>
-				</template>
-			</el-popover>
-			<el-divider />
-			<hs-popover
-				placement="top-start"
-				title="Title"
-				:width="200"
-				trigger="hover"
-				content="this is content, this is content, this is content"
-				ref="hsPopoverRef"
-			>
-				<template #reference>
-					<el-button class="m-2">Hover to activate</el-button>
-				</template>
-			</hs-popover>
-
-			<hs-popover placement="bottom" title="Title" :width="200" trigger="click" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2">Click to activate</el-button>
-				</template>
-			</hs-popover>
-
-			<hs-popover
-				ref="popover"
-				placement="right"
-				title="Title"
-				:width="200"
-				trigger="focus"
-				content="this is content, this is content, this is content"
-			>
-				<template #reference>
-					<el-button class="m-2">Focus to activate</el-button>
-				</template>
-			</hs-popover>
-
-			<hs-popover ref="popover" title="Title" :width="200" trigger="contextmenu" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2">contextmenu to activate</el-button>
-				</template>
-			</hs-popover>
-
-			<hs-popover :visible="visible" placement="bottom" title="Title" :width="200" content="this is content, this is content, this is content">
-				<template #reference>
-					<el-button class="m-2" @click="visible = !visible">Manual to activate</el-button>
-				</template>
-			</hs-popover> -->
-			<!-- tooltip -->
-			<!-- <div class="tooltip-base-box">
-				<div class="row center">
-					<el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" ref="elTooltipRef">
-						<el-button>top-start</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
-						<el-button>top</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
-						<el-button>top-end</el-button>
-					</el-tooltip>
-				</div>
-				<div class="row">
-					<el-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
-						<el-button>left-start</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
-						<el-button>right-start</el-button>
-					</el-tooltip>
-				</div>
-				<div class="row">
-					<el-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
-						<el-button class="mt-3 mb-3">left</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
-						<el-button>right</el-button>
-					</el-tooltip>
-				</div>
-				<div class="row">
-					<el-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
-						<el-button>left-end</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
-						<el-button>right-end</el-button>
-					</el-tooltip>
-				</div>
-				<div class="row center">
-					<el-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
-						<el-button>bottom-start</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
-						<el-button>bottom</el-button>
-					</el-tooltip>
-					<el-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
-						<el-button>bottom-end</el-button>
-					</el-tooltip>
-				</div>
-			</div>
-			<el-divider />
-			<div class="tooltip-base-box">
-				<div class="row center">
-					<hs-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" ref="hsTooltipRef">
-						<hs-button>top-start</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
-						<hs-button>top</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
-						<hs-button>top-end</hs-button>
-					</hs-tooltip>
-				</div>
-				<div class="row">
-					<hs-tooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
-						<hs-button>left-start</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
-						<hs-button>right-start</hs-button>
-					</hs-tooltip>
-				</div>
-				<div class="row">
-					<hs-tooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
-						<hs-button class="mt-3 mb-3">left</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
-						<hs-button>right</hs-button>
-					</hs-tooltip>
-				</div>
-				<div class="row">
-					<hs-tooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
-						<hs-button>left-end</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
-						<hs-button>right-end</hs-button>
-					</hs-tooltip>
-				</div>
-				<div class="row center">
-					<hs-tooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
-						<hs-button>bottom-start</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
-						<hs-button>bottom</hs-button>
-					</hs-tooltip>
-					<hs-tooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
-						<hs-button>bottom-end</hs-button>
-					</hs-tooltip>
-				</div>
-			</div> -->
-			<!-- watermark -->
-			<!-- <el-watermark :font="watermarkFont" ref="elWatermarkRef" :content="['Element+', 'Element Plus']">
-				<div style="height: 500px" />
-			</el-watermark>
-			<el-divider />
-			<hs-watermark :font="watermarkFont" ref="hsWatermarkRef" :content="['Element+', 'Element Plus']">
-				<div style="height: 500px" />
-			</hs-watermark> -->
-			<!-- dropdown -->
-			<!-- <el-dropdown>
-				<span class="el-dropdown-link"> Dropdown List </span>
-				<template #dropdown>
-					<el-dropdown-menu>
-						<el-dropdown-item>Action 1</el-dropdown-item>
-						<el-dropdown-item>Action 2</el-dropdown-item>
-						<el-dropdown-item>Action 3</el-dropdown-item>
-						<el-dropdown-item disabled>Action 4</el-dropdown-item>
-						<el-dropdown-item divided>Action 5</el-dropdown-item>
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown> -->
-			<el-divider />
-			<!-- <hs-dropdown>
-				<span class="el-dropdown-link"> Dropdown List </span>
-				<template #dropdown>
-					<hs-dropdown-menu>
-						<hs-dropdown-item>Action 1</hs-dropdown-item>
-						<hs-dropdown-item>Action 2</hs-dropdown-item>
-						<hs-dropdown-item>Action 3</hs-dropdown-item>
-						<hs-dropdown-item disabled>Action 4</hs-dropdown-item>
-						<hs-dropdown-item divided>Action 5</hs-dropdown-item>
-					</hs-dropdown-menu>
-				</template>
-			</hs-dropdown> -->
-			<!-- tree-select -->
-			<el-tree-select
-				v-model="treeSelectValue"
-				:data="treeSelectData"
-				:render-after-expand="false"
-				show-checkbox
-				style="width: 240px"
-				:filterable="true"
-				multiple
-        ref="hsTreeSelectRef"
-			/>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="systemUser">
-import { Action, CascaderValue, ElSwitch, ElTree } from 'element-plus';
-import { ref, watch, onMounted, reactive, getCurrentInstance, h, markRaw } from 'vue';
-// import useMessage from '/@/utils/showMessage';
-import { Delete, ArrowDown } from '@element-plus/icons-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';
-
-// ======================================================================== 按钮 start ===================================================================
-const buttonRef = ref(null);
-const buttonRef2 = ref(null);
-// ======================================================================== 按钮 end =====================================================================
-// ======================================================================== 输入框 start =================================================================
-const inputRef = ref(null);
-const inputRef2 = ref(null);
-const select = ref('1');
-const testValue = ref('');
-const testValue2 = ref('');
-const testValue3 = ref('');
-const handleBlur = (value) => {
-	console.debug('handleBlur失焦事件', value);
-};
-const handleFocus = (value) => {
-	console.debug('handleFocus聚焦事件', value);
-};
-const handleChange = (value) => {
-	console.debug('handleChange值改变事件', value);
-};
-const handleInput = (value) => {
-	console.debug('handleInput输入事件', value);
-};
-const handleClear = (value) => {
-	console.debug('handleClear清空事件', value);
-};
-const inputEnter = (value) => {
-	console.debug('inputEnter回车事件', value);
-};
-// ======================================================================== 输入框 end ===================================================================
-
-// ======================================================================== 下拉框 start ================================================================
-const selectValue = ref([]);
-const selectValue2 = ref([]);
-const elSelectRef = ref(null);
-const hsSelectRef = ref(null);
-const options = [
-	{
-		value: '1',
-		label: '黄金糕',
-	},
-	{
-		value: '2',
-		label: '双皮奶',
-	},
-	{
-		value: '3',
-		label: '蚵仔煎',
-	},
-	{
-		value: '4',
-		label: '龙须面',
-	},
-	{
-		value: '5',
-		label: '北京烤鸭',
-	},
-];
-const selectChange = (value) => {
-	console.debug('selectChange', value);
-};
-// ======================================================================== 下拉框 end ==================================================================
-// ======================================================================== 树 start =====================================================================
-const filterText = ref('');
-const treeRef = ref<InstanceType<typeof ElTree>>();
-const treeRef2 = ref<InstanceType<typeof ElTree>>();
-watch(filterText, (val) => {
-	treeRef.value!.filter(val);
-	treeRef2.value.treeRef!.filter(val);
-	console.debug('treeRef2.value', treeRef2.value.treeRef);
-});
-const data = [
-	{
-		id: 1,
-		label: '一级 1',
-		children: [
-			{
-				id: 4,
-				label: '二级 1-1',
-				children: [
-					{
-						id: 9,
-						label: '三级 1-1-1',
-					},
-					{
-						id: 10,
-						label: '三级 1-1-2',
-					},
-				],
-			},
-		],
-	},
-	{
-		id: 2,
-		label: '一级 2',
-		children: [
-			{
-				id: 5,
-				label: '二级 2-1',
-			},
-			{
-				id: 6,
-				label: '二级 2-2',
-			},
-		],
-	},
-	{
-		id: 3,
-		label: '一级 3',
-		children: [
-			{
-				id: 7,
-				label: '二级 3-1',
-			},
-			{
-				id: 8,
-				label: '二级 3-2',
-			},
-		],
-	},
-];
-const defaultProps = {
-	children: 'children',
-	label: 'label',
-};
-const filterNode = (value, data) => {
-	if (!value) return true;
-	return data.label.indexOf(value) !== -1;
-};
-// 获取选中节点
-const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false));
-	console.log(treeRef2.value.treeRef!.getCheckedNodes(false, false));
-};
-// 选中节点
-const treeCheck = (data, checked, indeterminate) => {
-	console.debug('treeCheck', data, checked, indeterminate);
-};
-// 点击节点
-const treeNodeClick = (data, node, instance) => {
-	console.debug('treeNodeClick', data, node, instance);
-};
-// 右键节点
-const treeNodeContextmenu = (event, data, node) => {
-	console.debug('treeNodeContextmenu', event, data, node);
-};
-// 选中节点
-const treeCheckChange = (data, checked, indeterminate) => {
-	console.debug('treeCheckChange', data, checked, indeterminate);
-};
-// ======================================================================== 树 end =======================================================================
-// ======================================================================== 数字输入框 start ==============================================================
-const num = ref(0);
-const elInputNumberRef = ref(null);
-const hsInputNumberRef = ref(null);
-// ======================================================================== 数字输入框 end ================================================================
-// ======================================================================== 开关 start ===================================================================
-const switchValue = ref(false);
-const elSwitchRef = ref(null);
-const hsSwitchRef = ref(null);
-const switchChange = (value: boolean | number | string) => {
-	console.debug('switchChange', value);
-};
-// ======================================================================== 开关 end =====================================================================
-// ======================================================================== 单选框 start =================================================================
-const radio = ref('上海');
-const elRadioGroupRef = ref(null);
-const elRadioButtonRef = ref(null);
-const hsRadioGroupRef = ref(null);
-const hsRadioButtonRef = ref(null);
-const radio1 = ref('1');
-const radioChange = (value) => {
-	console.debug('radioChange', value);
-};
-// ======================================================================== 单选框 end ===================================================================
-// ======================================================================== 复选框 start =================================================================
-const checked1 = ref(false);
-const checked2 = ref(false);
-const elCheckboxRef = ref(null);
-const hsCheckboxRef = ref(null);
-const checkList = ref([]);
-const checkboxGroup4 = ref(['深圳']);
-const cities = ['上海', '北京', '广州', '深圳'];
-const checkboxChange = (value) => {
-	console.debug('checkboxChange', value);
-	console.debug('checkList', checkList.value);
-	console.debug('checkboxGroup4', checkboxGroup4.value);
-};
-// ======================================================================== 复选框 end ===================================================================
-// ======================================================================== 评分 start ===================================================================
-const value2 = ref(3);
-const colors = ['#99A9BF', '#F7BA2A', '#FF9900', '#FF6600', '#FF3300'];
-const elRateRef = ref(null);
-const hsRateRef = ref(null);
-const rateChange = (value) => {
-	console.debug('rateChange', value);
-};
-// ======================================================================== 评分 end =====================================================================
-// ======================================================================== 自动完成 start ================================================================
-const state1 = ref('');
-const elAutocompleteRef = ref(null);
-const hsAutocompleteRef = ref(null);
-interface RestaurantItem {
-	value: string;
-	link: string;
-}
-interface LinkItem {
-	value: string;
-	link: string;
-}
-const links = ref<LinkItem[]>([]);
-const loadAll = () => {
-	return [
-		{ value: 'vue', link: 'https://github.com/vuejs/vue' },
-		{ value: 'element', link: 'https://github.com/ElemeFE/element' },
-		{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
-		{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
-		{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
-		{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
-		{ value: 'babel', link: 'https://github.com/babel/babel' },
-	];
-};
-let timeout: ReturnType<typeof setTimeout>;
-const createFilter = (queryString: string) => {
-	return (restaurant: LinkItem) => {
-		return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
-	};
-};
-const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
-	const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
-
-	clearTimeout(timeout);
-	timeout = setTimeout(() => {
-		cb(results);
-	}, 3000 * Math.random());
-};
-
-const handleSelect = (item: RestaurantItem) => {
-	console.debug('handleSelect', item);
-};
-// ======================================================================== 自动完成 end ==================================================================
-// ======================================================================== 滑块 start ===================================================================
-const innerValue = ref(20);
-const sliderRef = ref(null);
-const hsSliderRef = ref(null);
-const sliderChange = (value) => {
-	console.debug('sliderChange', value);
-};
-const sliderInput = (value) => {
-	console.debug('sliderInput', value);
-};
-// ======================================================================== 滑块 end =====================================================================
-// ======================================================================== 颜色选择器 start ==============================================================
-const color = ref('#ff0000');
-const colorPickerRef = ref(null);
-const hsColorPickerRef = ref(null);
-const colorChange = (value: string) => {
-	console.debug('colorChange', value);
-};
-const colorActiveChange = (value: string) => {
-	console.debug('colorActiveChange', value);
-};
-const colorFocus = (value: FocusEvent) => {
-	console.debug('colorFocus', value);
-};
-const colorBlur = (value: FocusEvent) => {
-	console.debug('colorBlur', value);
-};
-// ======================================================================== 颜色选择器 end ================================================================
-// ======================================================================== 级联选择器 start ==============================================================
-const value = ref([]);
-const props = {
-	value: 'value',
-	label: 'label',
-	children: 'children',
-	expandTrigger: 'hover' as const,
-	multiple: true,
-	checkStrictly: true,
-};
-const options1 = [
-	{
-		value: 'guide',
-		label: 'Guide',
-		children: [
-			{
-				value: 'disciplines',
-				label: 'Disciplines',
-				children: [
-					{
-						value: 'consistency',
-						label: 'Consistency',
-					},
-					{
-						value: 'feedback',
-						label: 'Feedback',
-					},
-					{
-						value: 'efficiency',
-						label: 'Efficiency',
-					},
-					{
-						value: 'controllability',
-						label: 'Controllability',
-					},
-				],
-			},
-			{
-				value: 'navigation',
-				label: 'Navigation',
-				children: [
-					{
-						value: 'side nav',
-						label: 'Side Navigation',
-					},
-					{
-						value: 'top nav',
-						label: 'Top Navigation',
-					},
-				],
-			},
-		],
-	},
-	{
-		value: 'component',
-		label: 'Component',
-		children: [
-			{
-				value: 'basic',
-				label: 'Basic',
-				children: [
-					{
-						value: 'layout',
-						label: 'Layout',
-					},
-					{
-						value: 'color',
-						label: 'Color',
-					},
-					{
-						value: 'typography',
-						label: 'Typography',
-					},
-					{
-						value: 'icon',
-						label: 'Icon',
-					},
-					{
-						value: 'button',
-						label: 'Button',
-					},
-				],
-			},
-			{
-				value: 'form',
-				label: 'Form',
-				children: [
-					{
-						value: 'radio',
-						label: 'Radio',
-					},
-					{
-						value: 'checkbox',
-						label: 'Checkbox',
-					},
-					{
-						value: 'input',
-						label: 'Input',
-					},
-					{
-						value: 'input-number',
-						label: 'InputNumber',
-					},
-					{
-						value: 'select',
-						label: 'Select',
-					},
-					{
-						value: 'cascader',
-						label: 'Cascader',
-					},
-					{
-						value: 'switch',
-						label: 'Switch',
-					},
-					{
-						value: 'slider',
-						label: 'Slider',
-					},
-					{
-						value: 'time-picker',
-						label: 'TimePicker',
-					},
-					{
-						value: 'date-picker',
-						label: 'DatePicker',
-					},
-					{
-						value: 'datetime-picker',
-						label: 'DateTimePicker',
-					},
-					{
-						value: 'upload',
-						label: 'Upload',
-					},
-					{
-						value: 'rate',
-						label: 'Rate',
-					},
-					{
-						value: 'form',
-						label: 'Form',
-					},
-				],
-			},
-			{
-				value: 'data',
-				label: 'Data',
-				children: [
-					{
-						value: 'table',
-						label: 'Table',
-					},
-					{
-						value: 'tag',
-						label: 'Tag',
-					},
-					{
-						value: 'progress',
-						label: 'Progress',
-					},
-					{
-						value: 'tree',
-						label: 'Tree',
-					},
-					{
-						value: 'pagination',
-						label: 'Pagination',
-					},
-					{
-						value: 'badge',
-						label: 'Badge',
-					},
-				],
-			},
-			{
-				value: 'notice',
-				label: 'Notice',
-				children: [
-					{
-						value: 'alert',
-						label: 'Alert',
-					},
-					{
-						value: 'loading',
-						label: 'Loading',
-					},
-					{
-						value: 'message',
-						label: 'Message',
-					},
-					{
-						value: 'message-box',
-						label: 'MessageBox',
-					},
-					{
-						value: 'notification',
-						label: 'Notification',
-					},
-				],
-			},
-			{
-				value: 'navigation',
-				label: 'Navigation',
-				children: [
-					{
-						value: 'menu',
-						label: 'Menu',
-					},
-					{
-						value: 'tabs',
-						label: 'Tabs',
-					},
-					{
-						value: 'breadcrumb',
-						label: 'Breadcrumb',
-					},
-					{
-						value: 'dropdown',
-						label: 'Dropdown',
-					},
-					{
-						value: 'steps',
-						label: 'Steps',
-					},
-				],
-			},
-			{
-				value: 'others',
-				label: 'Others',
-				children: [
-					{
-						value: 'dialog',
-						label: 'Dialog',
-					},
-					{
-						value: 'tooltip',
-						label: 'Tooltip',
-					},
-					{
-						value: 'popover',
-						label: 'Popover',
-					},
-					{
-						value: 'card',
-						label: 'Card',
-					},
-					{
-						value: 'carousel',
-						label: 'Carousel',
-					},
-					{
-						value: 'collapse',
-						label: 'Collapse',
-					},
-				],
-			},
-		],
-	},
-	{
-		value: 'resource',
-		label: 'Resource',
-		children: [
-			{
-				value: 'axure',
-				label: 'Axure Components',
-			},
-			{
-				value: 'sketch',
-				label: 'Sketch Templates',
-			},
-			{
-				value: 'docs',
-				label: 'Design Documentation',
-			},
-		],
-	},
-];
-const cascaderChange = (value) => {
-	console.debug('handleChange', value);
-};
-const cascaderPanelValue = ref('');
-const cascaderPanelChange = (value: CascaderValue) => {
-	console.debug('cascaderPanelChange', value, cascaderPanelValue.value);
-};
-const elCascaderRef = ref(null);
-const hsCascaderRef = ref(null);
-const elCascaderPanelRef = ref(null);
-const hsCascaderPanelRef = ref(null);
-// ======================================================================== 级联选择器 end ================================================================
-// ======================================================================== 上传 start ===================================================================
-const elUploadRef = ref(null);
-const hsUploadRef = ref(null);
-const fileList = ref([
-	{
-		name: 'element-plus-logo.svg',
-		url: 'https://element-plus.org/images/element-plus-logo.svg',
-	},
-	{
-		name: 'element-plus-logo2.svg',
-		url: 'https://element-plus.org/images/element-plus-logo.svg',
-	},
-]);
-const handlePreview = (file: any) => {
-	console.debug('handlePreview', file);
-};
-const handleRemove = (file: any, fileList: any) => {
-	console.debug('handleRemove', file, fileList);
-};
-const beforeRemove = (file: any, fileList: any) => {
-	console.debug('beforeRemove', file, fileList);
-};
-const handleExceed = (files: any, fileList: any) => {
-	console.debug('handleExceed', files, fileList);
-};
-const handleError = (err: any, file: any, fileList: any) => {
-	console.debug('handleError', err, file, fileList);
-};
-const handleSuccess = () => {
-	// console.debug('handleSuccess', res, file, fileList);
-	console.debug('handleSuccess', fileList.value);
-};
-// ======================================================================== 上传 end =====================================================================
-// ======================================================================== 穿梭框 start =================================================================
-const transferValue = ref([]);
-const transferData = ref([
-	{
-		key: 1,
-		label: '备选项1',
-	},
-	{
-		key: 2,
-		label: '备选项2',
-	},
-	{
-		key: 3,
-		label: '备选项3',
-	},
-	{
-		key: 4,
-		label: '备选项4',
-	},
-	{
-		key: 5,
-		label: '备选项5',
-	},
-	{
-		key: 6,
-		label: '备选项6',
-		disabled: true,
-	},
-]);
-const elTransferRef = ref(null);
-const hsTransferRef = ref(null);
-// ======================================================================== 穿梭框 end ===================================================================
-// ======================================================================== 日期选择器 start ================================================================
-const date = ref('');
-const dateArray = ref(['2021-06-01 00:00:00', '2021-06-02 00:00:00']);
-const dateChange = (value) => {
-	console.debug('dateChange', value);
-};
-const dateInput = (value) => {
-	console.debug('dateInput', value);
-};
-const dateFocus = (value) => {
-	console.debug('dateFocus', value);
-};
-const dateBlur = (value) => {
-	console.debug('dateBlur', value);
-};
-const elDatePickerRef = ref(null);
-const hsDatePickerRef = ref(null);
-// ======================================================================== 日期选择器 end ==================================================================
-// ======================================================================== 日历 start ===================================================================
-const calendarValue = ref();
-const elCalendarRef = ref(null);
-const hsCalendarRef = ref(null);
-// ======================================================================== 日历 end =====================================================================
-// ======================================================================== 折叠面板 start =================================================================
-const activeNames = ref([]);
-const elCollapseRef = ref(null);
-const hsCollapseRef = ref(null);
-const elCollapseItemRef = ref(null);
-const hsCollapseItemRef = ref(null);
-const collapseChange = (value) => {
-	console.debug('collapseChange', value);
-};
-// ======================================================================== 折叠面板 end ===================================================================
-// ======================================================================== 走马灯 start ===================================================================
-const carouselValue = ref();
-// ======================================================================== 走马灯 end =====================================================================
-// ======================================================================== 进度条 start ===================================================================
-const elProgressRef = ref(null);
-const hsProgressRef = ref(null);
-const percentage = ref(0);
-const percentage2 = ref(0);
-const colors2 = [
-	{ color: '#f56c6c', percentage: 20 },
-	{ color: '#e6a23c', percentage: 40 },
-	{ color: '#5cb87a', percentage: 60 },
-	{ color: '#1989fa', percentage: 80 },
-	{ color: '#6f7ad3', percentage: 100 },
-];
-
-const increase = () => {
-	percentage.value += 10;
-	if (percentage.value > 100) {
-		percentage.value = 100;
-	}
-};
-const decrease = () => {
-	percentage.value -= 10;
-	if (percentage.value < 0) {
-		percentage.value = 0;
-	}
-};
-// ======================================================================== 进度条 end =====================================================================
-// ======================================================================== 结果 start =====================================================================
-// ======================================================================== 结果 end =======================================================================
-// ======================================================================== 引导 start =====================================================================
-const open = ref(false);
-const ref1 = ref(null);
-const ref2 = ref(null);
-const ref3 = ref(null);
-const open2 = ref(false);
-const ref4 = ref(null);
-const ref5 = ref(null);
-const ref6 = ref(null);
-const current = ref(2);
-const elTourRef = ref(null);
-const hsTourRef = ref(null);
-const tourChange = (value) => {
-	console.debug('tourChange', value, current.value);
-};
-// ======================================================================== 引导 end =======================================================================
-// ======================================================================== 标签 start =====================================================================
-const elTagRef = ref(null);
-const hsTagRef = ref(null);
-const elCheckTagRef = ref(null);
-const hsCheckTagRef = ref(null);
-const checkTagChecked = ref(false);
-const checkTagChange = (value) => {
-	console.debug('checkTagChange', value, checkTagChecked.value);
-	setTimeout(() => {
-		console.debug('checkTagChange', value, checkTagChecked.value);
-	}, 1000);
-};
-const tags = ref([
-	{ name: 'Tag 1', type: '' },
-	{ name: 'Tag 2', type: 'success' },
-	{ name: 'Tag 3', type: 'info' },
-	{ name: 'Tag 4', type: 'warning' },
-	{ name: 'Tag 5', type: 'danger' },
-]);
-// ======================================================================== 标签 end =======================================================================
-// ======================================================================== 固钉 start =====================================================================
-const elAffixRef = ref(null);
-const elAffixRef2 = ref(null);
-const hsAffixRef = ref(null);
-const hsAffixRef2 = ref(null);
-// 滚动到头部
-const scrollToTop = () => {
-	const elCardBody = document.querySelector('.el-card__body');
-	elCardBody?.scrollTo({
-		top: 0,
-		behavior: 'smooth',
-	});
-};
-// 滚动到底部
-const scrollToBottom = () => {
-	const elCardBody = document.querySelector('.el-card__body');
-	elCardBody?.scrollTo({
-		top: elCardBody.scrollHeight,
-		behavior: 'smooth',
-	});
-};
-// ======================================================================== 固钉 end =======================================================================
-// ======================================================================== 标签页 start ===================================================================
-const tabsActiveName = ref('first');
-const tabsClick = (tab, event) => {
-	console.debug('tabsClick', tab, event);
-};
-// ======================================================================== 标签页 end =====================================================================
-// ======================================================================== 步骤条 start ===================================================================
-const stepsActive = ref(0);
-const stepsNext = () => {
-	stepsActive.value++;
-};
-// ======================================================================== 步骤条 end =====================================================================
-// ======================================================================== 提示 start =====================================================================
-const elAlertRef = ref(null);
-const hsAlertRef = ref(null);
-// ======================================================================== 提示 end =======================================================================
-// ======================================================================== 对话框 start ===================================================================
-const dialogVisible = ref(false);
-const elDialogRef = ref(null);
-const hsDialogRef = ref(null);
-
-const handleClose = (done) => {
-	console.debug('handleClose', done);
-	done();
-};
-const dialogVisible2 = ref(false);
-// ======================================================================== 对话框 end =====================================================================
-// ======================================================================== 抽屉 start ===================================================================
-const drawer = ref(false);
-const drawer2 = ref(false);
-const direction = ref('rtl');
-const elDrawerRef = ref(null);
-const hsDrawerRef = ref(null);
-const cancelClick = () => {
-	console.debug('cancelClick');
-};
-const confirmClick = () => {
-	console.debug('confirmClick');
-};
-// ======================================================================== 抽屉 end =====================================================================
-// ======================================================================== 气泡确认框 start =====================================================================
-const elPopconfirmRef = ref(null);
-const hsPopconfirmRef = ref(null);
-// ======================================================================== 气泡确认框 end =======================================================================
-// ======================================================================== 气泡提示框 start =====================================================================
-const elPopoverRef = ref(null);
-const hsPopoverRef = ref(null);
-const visible = ref(false);
-// ======================================================================== 气泡提示框 end =======================================================================
-// ======================================================================== 文字提示 start =====================================================================
-const elTooltipRef = ref(null);
-const hsTooltipRef = ref(null);
-// ======================================================================== 文字提示 end =======================================================================
-// ======================================================================== 水印 start =====================================================================
-const elWatermarkRef = ref(null);
-const hsWatermarkRef = ref(null);
-const watermarkFont = reactive({
-	color: 'rgba(0, 0, 0, .15)',
-});
-// ======================================================================== 水印 end =======================================================================
-// ======================================================================== 树形选择 start =====================================================================
-const hsTreeSelectRef = ref(null);
-const treeSelectValue = ref([]);
-const treeSelectData = [
-	{
-		value: '1',
-		label: 'Level one 1',
-		children: [
-			{
-				value: '1-1',
-				label: 'Level two 1-1',
-				children: [
-					{
-						value: '1-1-1',
-						label: 'Level three 1-1-1',
-					},
-				],
-			},
-		],
-	},
-	{
-		value: '2',
-		label: 'Level one 2',
-		children: [
-			{
-				value: '2-1',
-				label: 'Level two 2-1',
-				children: [
-					{
-						value: '2-1-1',
-						label: 'Level three 2-1-1',
-					},
-				],
-			},
-			{
-				value: '2-2',
-				label: 'Level two 2-2',
-				children: [
-					{
-						value: '2-2-1',
-						label: 'Level three 2-2-1',
-					},
-				],
-			},
-		],
-	},
-	{
-		value: '3',
-		label: 'Level one 3',
-		children: [
-			{
-				value: '3-1',
-				label: 'Level two 3-1',
-				children: [
-					{
-						value: '3-1-1',
-						label: 'Level three 3-1-1',
-					},
-				],
-			},
-			{
-				value: '3-2',
-				label: 'Level two 3-2',
-				children: [
-					{
-						value: '3-2-1',
-						label: 'Level three 3-2-1',
-					},
-				],
-			},
-		],
-	},
-];
-// ======================================================================== 树形选择 end =====================================================================
-const click = (...rest: any[]) => {
-	console.debug('点击了按钮' + rest);
-	// console.debug('radio', elRadioGroupRef.value, elRadioButtonRef.value);
-	// console.debug('radio', hsRadioGroupRef.value, hsRadioButtonRef.value);
-	// console.debug('switch', elSwitchRef.value, hsSwitchRef.value);
-	// console.debug('checkbox', elCheckboxRef.value, hsCheckboxRef.value);
-	// console.debug('input', inputRef.value, inputRef2.value);
-	// console.debug('select', elSelectRef.value, hsSelectRef.value);
-	// console.debug('tree', treeRef.value, treeRef2.value);
-	// console.debug('inputNumber', elInputNumberRef.value, hsInputNumberRef.value);
-	// console.debug('button', buttonRef.value, buttonRef2.value);
-	// inputRef.value.focus(); // 聚焦
-	// inputRef.value.blur(); // 失焦
-	// console.debug('elRateRef', elRateRef.value!.resetCurrentValue, hsRateRef.value!.resetCurrentValue);
-	// console.debug('elAutocompleteRef', elAutocompleteRef.value, hsAutocompleteRef.value.focus());
-	// console.debug('slider', sliderRef.value, hsSliderRef.value);
-	// console.debug('colorPicker', colorPickerRef.value, hsColorPickerRef.value);
-	// console.debug('cascader', elCascaderRef.value, hsCascaderRef.value);
-	// console.debug('cascaderPanel', elCascaderPanelRef.value, hsCascaderPanelRef.value);
-	// console.debug('upload', elUploadRef.value, hsUploadRef.value);
-	// fileList.value.push({
-	// 	name: 'element-plus-logo.svg' + (fileList.value.length + 1),
-	// 	url: 'https://element-plus.org/images/element-plus-logo.svg',
-	// });
-	// console.debug('transfer', elTransferRef.value, hsTransferRef.value);
-	// console.debug('datePicker', elDatePickerRef.value, hsDatePickerRef.value);
-	// console.debug('calendar', calendarValue.value, elCalendarRef.value, hsCalendarRef.value);
-	// console.debug('collapse', activeNames.value, elCollapseRef.value, hsCollapseRef.value);
-	// console.debug('collapseItem', elCollapseItemRef.value, hsCollapseItemRef.value);
-	// console.debug('progress', elProgressRef.value, hsProgressRef.value);
-	// console.debug('tour', elTourRef.value, hsTourRef.value);
-	// console.debug('tag', elTagRef.value, hsTagRef.value);
-	// console.debug('checkTag', elCheckTagRef.value, hsCheckTagRef.value);
-	// console.debug('affix', elAffixRef.value, elAffixRef2.value, hsAffixRef.value, hsAffixRef2.value);
-	// console.debug('alert', elAlertRef.value, hsAlertRef.value);
-	// console.debug('dialog', elDialogRef.value, hsDialogRef.value);
-	// console.debug('drawer', elDrawerRef.value, hsDrawerRef.value);
-	// console.debug('popconfirm', elPopconfirmRef.value, hsPopconfirmRef.value);
-	// console.debug('popover', elPopoverRef.value, hsPopoverRef.value);
-	// console.debug('tooltip', elTooltipRef.value, hsTooltipRef.value);
-	// console.debug('watermark', elWatermarkRef.value, hsWatermarkRef.value);
-  console.debug('treeSelect', hsTreeSelectRef.value);
-};
-// const { message: $message, success } = useMessage();
-onMounted(() => {
-	links.value = loadAll();
-	setInterval(() => {
-		percentage2.value = (percentage2.value % 100) + 10;
-	}, 500);
-});
-const { proxy } = getCurrentInstance();
-
-const showMessageFn = () => {
-	const messageRef = ref(null);
-	// proxy.$message({
-	// 	message: '这是一条消息提示success',
-	// 	type: 'success',
-	//   duration: 5000,
-	//   showClose: true,
-	//   center: true,
-	// });
-	messageRef.value = proxy.$message({
-		message: '这是一条消息提示warning',
-		type: 'warning',
-		duration: 0,
-		showClose: true,
-	});
-	// proxy.$message({
-	//   message: '这是一条消息提示info',
-	//   type: 'info',
-	// });
-	// proxy.$message({
-	//   message: '这是一条消息提示error',
-	//   type: 'error',
-	//   grouping: true,
-	// });
-	// proxy.$message({
-	//   dangerouslyUseHTMLString: true,
-	//   message: '<strong>This is <i>HTML</i> string</strong>',
-	// })
-	// console.debug('testMessage:', typeof useMessage(), typeof useMessage);
-	// proxy.$message.success('这是一条消息提示success');
-	// proxy.$message.warning('这是一条消息提示warning');
-	// proxy.$message.info('这是一条消息提示info');
-	// proxy.$message.error('这是一条消息提示error');
-	// console.debug("instance:",proxy);
-	// proxy.$message
-	setTimeout(() => {
-		console.debug('messageRef', messageRef.value);
-		messageRef.value.close();
-	}, 5000);
-};
-
-const showNotificationFn = () => {
-	const notificationRef = ref(null);
-	// proxy.$notification({
-	// 	title: '标题',
-	// 	message: '这是一条消息提示success',
-	// 	type: 'success',
-	// 	duration: 5000,
-	// 	showClose: true,
-	// 	center: true,
-	// });
-	notificationRef.value = proxy.$notification({
-		title: '标题',
-		message: '这是一条消息提示warning',
-		type: 'warning',
-		duration: 0,
-		showClose: true,
-	});
-	// proxy.$notification({
-	// 	title: '标题',
-	// 	message: '这是一条消息提示info',
-	// 	type: 'info',
-	// });
-	// proxy.$notification({
-	// 	title: '标题',
-	// 	message: '这是一条消息提示error',
-	// 	type: 'error',
-	// 	grouping: true,
-	// });
-	// proxy.$notification({
-	// 	dangerouslyUseHTMLString: true,
-	// 	title: '标题',
-	// 	message: '<strong>This is <i>HTML</i> string</strong>',
-	// });
-	// proxy.$notification.success({
-	//   title: 'Info',
-	//   message: 'This is a message without close button',
-	//   showClose: false,
-	// })
-	setTimeout(() => {
-		console.debug('notificationRef', notificationRef.value);
-		notificationRef.value.close();
-	}, 5000);
-};
-const showMessageBoxFn = () => {
-	// proxy.$MessageBox.alert('This is a message', 'Title', {
-	//   // if you want to disable its autofocus
-	//   // autofocus: false,
-	//   confirmButtonText: 'OK',
-	//   callback: (action: Action) => {
-	//     proxy.$message({
-	//       type: 'info',
-	//       message: `action: ${action}`,
-	//     })
-	//   },
-	// })
-	// proxy.$MessageBox.confirm(
-	//   'proxy will permanently delete the file. Continue?',
-	//   'Warning',
-	//   {
-	//     confirmButtonText: 'OK',
-	//     cancelButtonText: 'Cancel',
-	//     type: 'warning',
-	//   }
-	// )
-	//   .then(() => {
-	//     proxy.$message({
-	//       type: 'success',
-	//       message: 'Delete completed',
-	//     })
-	//   })
-	//   .catch(() => {
-	//     proxy.$message({
-	//       type: 'info',
-	//       message: 'Delete canceled',
-	//     })
-	//   })
-	// proxy.$MessageBox.prompt('Please input your e-mail', 'Tip', {
-	//   confirmButtonText: 'OK',
-	//   cancelButtonText: 'Cancel',
-	//   inputPattern:
-	//     /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
-	//   inputErrorMessage: 'Invalid Email',
-	// })
-	//   .then(({ value }) => {
-	//     proxy.$message({
-	//       type: 'success',
-	//       message: `Your email is:${value}`,
-	//     })
-	//   })
-	//   .catch(() => {
-	//     proxy.$message({
-	//       type: 'info',
-	//       message: 'Input canceled',
-	//     })
-	//   })
-	// proxy.$MessageBox({
-	//   title: 'Message',
-	//   message: h('p', null, [
-	//     h('span', null, 'Message can be '),
-	//     h('i', { style: 'color: teal' }, 'VNode'),
-	//   ]),
-	// })
-	// const checked = ref<boolean | string | number>(false)
-	//   proxy.$MessageBox({
-	//   title: 'Message',
-	//   // Should pass a function if VNode contains dynamic props
-	//   message: () =>
-	//     h(ElSwitch, {
-	//       modelValue: checked.value,
-	//       'onUpdate:modelValue': (val: boolean | string | number) => {
-	//         checked.value = val
-	//       },
-	//     }),
-	// })
-	// proxy.$MessageBox({
-	//   title: 'Message',
-	//   message: h('p', null, [
-	//     h('span', null, 'Message can be '),
-	//     h('i', { style: 'color: teal' }, 'VNode'),
-	//   ]),
-	//   showCancelButton: true,
-	//   confirmButtonText: 'OK',
-	//   cancelButtonText: 'Cancel',
-	//   beforeClose: (action, instance, done) => {
-	//     if (action === 'confirm') {
-	//       instance.confirmButtonLoading = true
-	//       instance.confirmButtonText = 'Loading...'
-	//       setTimeout(() => {
-	//         done()
-	//         setTimeout(() => {
-	//           instance.confirmButtonLoading = false
-	//         }, 300)
-	//       }, 3000)
-	//     } else {
-	//       done()
-	//     }
-	//   },
-	// }).then((action) => {
-	//   proxy.$message({
-	//     type: 'info',
-	//     message: `action: ${action}`,
-	//   })
-	// })
-	// proxy.$MessageBox.alert(
-	//   '<strong>proxy is <i>HTML</i> string</strong>',
-	//   'HTML String',
-	//   {
-	//     dangerouslyUseHTMLString: true,
-	//   }
-	// )
-	// proxy.$MessageBox
-	// 	.confirm('You have unsaved changes, save and proceed?', 'Confirm', {
-	// 		distinguishCancelAndClose: true,
-	// 		confirmButtonText: 'Save',
-	// 		cancelButtonText: 'Discard Changes',
-	// 	})
-	// 	.then(() => {
-	// 		proxy.$message({
-	// 			type: 'info',
-	// 			message: 'Changes saved. Proceeding to a new route.',
-	// 		});
-	// 	})
-	// 	.catch((action: Action) => {
-	// 		proxy.$message({
-	// 			type: 'info',
-	// 			message: action === 'cancel' ? 'Changes discarded. Proceeding to a new route.' : 'Stay in the current route',
-	// 		});
-	// 	});
-	// proxy.$MessageBox.confirm(
-	//   'proxy will permanently delete the file. Continue?',
-	//   'Warning',
-	//   {
-	//     confirmButtonText: 'OK',
-	//     cancelButtonText: 'Cancel',
-	//     type: 'warning',
-	//     center: true,
-	//   }
-	// )
-	//   .then(() => {
-	//     proxy.$message({
-	//       type: 'success',
-	//       message: 'Delete completed',
-	//     })
-	//   })
-	//   .catch(() => {
-	//     proxy.$message({
-	//       type: 'info',
-	//       message: 'Delete canceled',
-	//     })
-	//   })
-	// proxy.$MessageBox.confirm(
-	//   'It will permanently delete the file. Continue?',
-	//   'Warning',
-	//   {
-	//     type: 'warning',
-	//     icon: markRaw(Delete),
-	//   }
-	// )
-	proxy.$MessageBox
-		.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
-			confirmButtonText: 'OK',
-			cancelButtonText: 'Cancel',
-			type: 'warning',
-			draggable: true,
-		})
-		.then(() => {
-			proxy.$message({
-				type: 'success',
-				message: 'Delete completed',
-			});
-		})
-		.catch(() => {
-			proxy.$message({
-				type: 'info',
-				message: 'Delete canceled',
-			});
-		});
-};
-
-const data2 = ref({});
-const inputVal = ref('');
-const selectData = ref({});
-const selectValue3 = ref('');
-const datePickerData = ref({});
-const datePickerValue = ref('');
-const buttonData = ref({});
-const autocompleteData = ref({});
-const autocompleteValue = ref('');
-const switchData = ref({});
-const uploadData = ref({});
-const checkboxData = ref({});
-const radioData = ref({});
-const inputNumberData = ref({});
-const inputNumberValue = ref(0);
-const cascaderData = ref({});
-const cascaderValue = ref([]);
-const cascaderPanelData = ref({});
-const cascaderPanelValue2 = ref([]);
-const treeSelectData2 = ref({});
-const testMessage = () => {
-	showMessageFn();
-	showNotificationFn();
-	showMessageBoxFn();
-	// console.log('data2', data2.value);
-	// inputVal.value = data2.value.defaultValue;
-	// setTimeout(() => {
-	//   inputVal.value = '123'
-	// }, 3000);
-	// setTimeout(() => {
-	//   console.log('inputVal', inputVal.value);
-	// }, 5000);
-	console.log('selectData', selectData.value);
-};
-const getVal = () => {
-	// console.log('inputVal', inputVal.value);
-	// console.log('selectData', selectData.value);
-	// selectValue3.value = selectData.value.selectAttrs.defaultValue;
-	datePickerValue.value = datePickerData.value.baseAttrs.defaultValue;
-};
-</script>
-
-<style scoped lang="scss">
-.system-user-container {
-	:deep(.el-card__body) {
-		display: flex;
-		flex-direction: column;
-		flex: 1;
-		overflow: auto;
-	}
-}
-.el-carousel__item:nth-child(2n) {
-	background-color: #99a9bf;
-}
-
-.el-carousel__item:nth-child(2n + 1) {
-	background-color: #d3dce6;
-}
-.tooltip-base-box .row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-.tooltip-base-box .center {
-	justify-content: center;
-}
-.tooltip-base-box .box-item {
-	width: 110px;
-	margin-top: 10px;
-}
-</style>