✨ Introducing new features. 删除 i18n 前缀 删除 没用的页面

src/i18n/index.ts

@@ -46,7 +46,7 @@ for (const key in itemize) {
 	messages[key] = {
 		name: key,
 		el: element[key].el,
-		message: mergeArrObj(itemize, key),
+		...mergeArrObj(itemize, key),
 	};
 }
 

src/layout/navBars/breadcrumb/closeFull.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-navbars-close-full" v-if="isTagsViewCurrenFull">
 		<div class="layout-navbars-close-full-icon">
-			<SvgIcon name="ele-Close" :title="$t('message.tagsView.closeFullscreen')" @click="onCloseFullscreen" />
+			<SvgIcon name="ele-Close" :title="$t('tagsView.closeFullscreen')" @click="onCloseFullscreen" />
 		</div>
 	</div>
 </template>

src/layout/navBars/breadcrumb/search.vue

@@ -5,7 +5,7 @@
 				<el-autocomplete
 					v-model="state.menuQuery"
 					:fetch-suggestions="menuSearch"
-					:placeholder="$t('message.user.searchPlaceholder')"
+					:placeholder="$t('user.searchPlaceholder')"
 					ref="layoutMenuAutocompleteRef"
 					@select="onHandleSelect"
 					:fit-input-width="true"

src/layout/navBars/breadcrumb/setings.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-breadcrumb-seting">
 		<el-drawer
-			:title="$t('message.layout.configTitle')"
+			:title="$t('layout.configTitle')"
 			v-model="getThemeConfig.isDrawer"
 			direction="rtl"
 			destroy-on-close
@@ -10,7 +10,7 @@
 		>
 			<el-scrollbar class="layout-breadcrumb-seting-bar">
 				<!-- 全局主题 -->
-				<el-divider content-position="left">{{ $t('message.layout.oneTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.oneTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
 					<div class="layout-breadcrumb-seting-bar-flex-label">primary</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
@@ -18,49 +18,49 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsDark') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isIsDark" size="small" @change="onAddDarkChange"></el-switch>
 					</div>
 				</div>
 
 				<!-- 顶栏设置 -->
-				<el-divider content-position="left">{{ $t('message.layout.twoTopTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.twoTopTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoTopBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.topBar" size="default" @change="onBgColorPickerChange('topBar')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoTopBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoTopBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.topBarColor" size="default" @change="onBgColorPickerChange('topBarColor')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt10">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsTopBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoIsTopBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTopBarColorGradual" size="small" @change="onTopBarGradualChange"></el-switch>
 					</div>
 				</div>
 
 				<!-- 菜单设置 -->
-				<el-divider content-position="left">{{ $t('message.layout.twoMenuTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.twoMenuTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.menuBar" size="default" @change="onBgColorPickerChange('menuBar')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker v-model="getThemeConfig.menuBarColor" size="default" @change="onBgColorPickerChange('menuBarColor')"> </el-color-picker>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoMenuBarActiveColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoMenuBarActiveColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker
 							v-model="getThemeConfig.menuBarActiveColor"
@@ -71,7 +71,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsMenuBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoIsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isMenuBarColorGradual" size="small" @change="onMenuBarGradualChange"></el-switch>
 					</div>
@@ -79,10 +79,10 @@
 
 				<!-- 分栏设置 -->
 				<el-divider content-position="left" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">{{
-					$t('message.layout.twoColumnsTitle')
+					$t('layout.twoColumnsTitle')
 				}}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBar') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoColumnsMenuBar') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker
 							v-model="getThemeConfig.columnsMenuBar"
@@ -94,7 +94,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoColumnsMenuBarColor') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoColumnsMenuBarColor') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-color-picker
 							v-model="getThemeConfig.columnsMenuBarColor"
@@ -106,7 +106,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuBarColorGradual') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoIsColumnsMenuBarColorGradual') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isColumnsMenuBarColorGradual"
@@ -117,7 +117,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.twoIsColumnsMenuHoverPreload') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.twoIsColumnsMenuHoverPreload') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isColumnsMenuHoverPreload"
@@ -129,9 +129,9 @@
 				</div>
 
 				<!-- 界面设置 -->
-				<el-divider content-position="left">{{ $t('message.layout.threeTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.threeTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsCollapse') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeIsCollapse') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isCollapse"
@@ -142,7 +142,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout === 'transverse' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsUniqueOpened') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeIsUniqueOpened') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isUniqueOpened"
@@ -153,13 +153,13 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsFixedHeader') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeIsFixedHeader') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isFixedHeader" size="small" @change="onIsFixedHeaderChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'classic' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsClassicSplitMenu') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeIsClassicSplitMenu') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isClassicSplitMenu"
@@ -171,13 +171,13 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeIsLockScreen') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeIsLockScreen') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isLockScreen" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt11">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.threeLockScreenTime') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.threeLockScreenTime') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-input-number
 							v-model="getThemeConfig.lockScreenTime"
@@ -193,9 +193,9 @@
 				</div>
 
 				<!-- 界面显示 -->
-				<el-divider content-position="left">{{ $t('message.layout.fourTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.fourTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShowLogo') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsShowLogo') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isShowLogo" size="small" @change="onIsShowLogoChange"></el-switch>
 					</div>
@@ -204,7 +204,7 @@
 					class="layout-breadcrumb-seting-bar-flex mt15"
 					:style="{ opacity: getThemeConfig.layout === 'classic' || getThemeConfig.layout === 'transverse' ? 0.5 : 1 }"
 				>
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumb') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsBreadcrumb') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isBreadcrumb"
@@ -215,31 +215,31 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsBreadcrumbIcon') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsBreadcrumbIcon') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isBreadcrumbIcon" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsview') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsTagsview') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTagsview" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsTagsviewIcon') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsTagsviewIcon') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isTagsviewIcon" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsCacheTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsCacheTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isCacheTagsView" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: state.isMobile ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsSortableTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsSortableTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch
 							v-model="getThemeConfig.isSortableTagsView"
@@ -250,46 +250,46 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsShareTagsView') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsShareTagsView') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isShareTagsView" size="small" @change="onShareTagsViewChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsFooter') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsFooter') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isFooter" size="small" @change="setLocalThemeConfig"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsGrayscale') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsGrayscale') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isGrayscale" size="small" @change="onAddFilterChange('grayscale')"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsInvert') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsInvert') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isInvert" size="small" @change="onAddFilterChange('invert')"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourIsWartermark') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-switch v-model="getThemeConfig.isWartermark" size="small" @change="onWartermarkChange"></el-switch>
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt14">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourWartermarkText') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fourWartermarkText') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-input v-model="getThemeConfig.wartermarkText" size="default" style="width: 90px" @input="onWartermarkTextInput"></el-input>
 					</div>
 				</div>
 
 				<!-- 其它设置 -->
-				<el-divider content-position="left">{{ $t('message.layout.fiveTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.fiveTitle') }}</el-divider>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveTagsStyle') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fiveTagsStyle') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.tagsStyle" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
 							<el-option label="风格1" value="tags-style-one"></el-option>
@@ -299,7 +299,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveAnimation') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fiveAnimation') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select v-model="getThemeConfig.animation" placeholder="请选择" size="default" style="width: 90px" @change="setLocalThemeConfig">
 							<el-option label="slide-right" value="slide-right"></el-option>
@@ -309,7 +309,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideStyle') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fiveColumnsAsideStyle') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select
 							v-model="getThemeConfig.columnsAsideStyle"
@@ -325,7 +325,7 @@
 					</div>
 				</div>
 				<div class="layout-breadcrumb-seting-bar-flex mt15 mb27" :style="{ opacity: getThemeConfig.layout !== 'columns' ? 0.5 : 1 }">
-					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fiveColumnsAsideLayout') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('layout.fiveColumnsAsideLayout') }}</div>
 					<div class="layout-breadcrumb-seting-bar-flex-value">
 						<el-select
 							v-model="getThemeConfig.columnsAsideLayout"
@@ -342,7 +342,7 @@
 				</div>
 
 				<!-- 布局切换 -->
-				<el-divider content-position="left">{{ $t('message.layout.sixTitle') }}</el-divider>
+				<el-divider content-position="left">{{ $t('layout.sixTitle') }}</el-divider>
 				<div class="layout-drawer-content-flex">
 					<!-- defaults 布局 -->
 					<div class="layout-drawer-content-item" @click="onSetLayout('defaults')">
@@ -355,7 +355,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'defaults' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">{{ $t('message.layout.sixDefaults') }}</p>
+								<p class="layout-tips-txt">{{ $t('layout.sixDefaults') }}</p>
 							</div>
 						</div>
 					</div>
@@ -372,7 +372,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'classic' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">{{ $t('message.layout.sixClassic') }}</p>
+								<p class="layout-tips-txt">{{ $t('layout.sixClassic') }}</p>
 							</div>
 						</div>
 					</div>
@@ -388,7 +388,7 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'transverse' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">{{ $t('message.layout.sixTransverse') }}</p>
+								<p class="layout-tips-txt">{{ $t('layout.sixTransverse') }}</p>
 							</div>
 						</div>
 					</div>
@@ -404,24 +404,24 @@
 						</section>
 						<div class="layout-tips-warp" :class="{ 'layout-tips-warp-active': getThemeConfig.layout === 'columns' }">
 							<div class="layout-tips-box">
-								<p class="layout-tips-txt">{{ $t('message.layout.sixColumns') }}</p>
+								<p class="layout-tips-txt">{{ $t('layout.sixColumns') }}</p>
 							</div>
 						</div>
 					</div>
 				</div>
 				<div class="copy-config">
-					<el-alert :title="$t('message.layout.tipText')" type="warning" :closable="false"> </el-alert>
+					<el-alert :title="$t('layout.tipText')" type="warning" :closable="false"> </el-alert>
 					<el-button size="default" class="copy-config-btn" type="primary" ref="copyConfigBtnRef" @click="onCopyConfigClick">
 						<el-icon class="mr5">
 							<ele-CopyDocument />
 						</el-icon>
-						{{ $t('message.layout.copyText') }}
+						{{ $t('layout.copyText') }}
 					</el-button>
 					<el-button size="default" class="copy-config-btn-reset" type="info" @click="onResetConfigClick">
 						<el-icon class="mr5">
 							<ele-RefreshRight />
 						</el-icon>
-						{{ $t('message.layout.resetText') }}
+						{{ $t('layout.resetText') }}
 					</el-button>
 				</div>
 			</el-scrollbar>

src/layout/navBars/breadcrumb/user.vue

@@ -2,13 +2,13 @@
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
 		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
-				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
+				<i class="iconfont icon-ziti" :title="$t('user.title0')"></i>
 			</div>
 			<template #dropdown>
 				<el-dropdown-menu>
-					<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
+					<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">{{ $t('user.dropdownLarge') }}</el-dropdown-item>
-					<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
+					<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">{{ $t('user.dropdownDefault') }}</el-dropdown-item>
-					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
+					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('user.dropdownSmall') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
@@ -17,7 +17,7 @@
 				<i
 					class="iconfont"
 					:class="state.disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'"
-					:title="$t('message.user.title1')"
+					:title="$t('user.title1')"
 				></i>
 			</div>
 			<template #dropdown>
@@ -29,18 +29,18 @@
 			</template>
 		</el-dropdown>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
-			<el-icon :title="$t('message.user.title2')">
+			<el-icon :title="$t('user.title2')">
 				<ele-Search />
 			</el-icon>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
-			<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
+			<i class="icon-skin iconfont" :title="$t('user.title3')"></i>
 		</div>
 		<div class="layout-navbars-breadcrumb-user-icon">
 			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
 				<template #reference>
 					<el-badge :is-dot="true">
-						<el-icon :title="$t('message.user.title4')">
+						<el-icon :title="$t('user.title4')">
 							<ele-Bell />
 						</el-icon>
 					</el-badge>
@@ -53,7 +53,7 @@
 		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
 			<i
 				class="iconfont"
-				:title="state.isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
+				:title="state.isScreenfull ? $t('user.title6') : $t('user.title5')"
 				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
 			></i>
 		</div>
@@ -67,12 +67,12 @@
 			</span>
 			<template #dropdown>
 				<el-dropdown-menu>
-					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
+					<el-dropdown-item command="/home">{{ $t('user.dropdown1') }}</el-dropdown-item>
-					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<el-dropdown-item command="wareHouse">{{ $t('user.dropdown6') }}</el-dropdown-item>
-					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
+					<el-dropdown-item command="/personal">{{ $t('user.dropdown2') }}</el-dropdown-item>
-					<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
+					<el-dropdown-item command="/404">{{ $t('user.dropdown3') }}</el-dropdown-item>
-					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
+					<el-dropdown-item command="/401">{{ $t('user.dropdown4') }}</el-dropdown-item>
-					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
+					<el-dropdown-item divided command="logOut">{{ $t('user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
@@ -142,16 +142,16 @@ const onHandleCommandClick = (path: string) => {
 		ElMessageBox({
 			closeOnClickModal: false,
 			closeOnPressEscape: false,
-			title: t('message.user.logOutTitle'),
+			title: t('user.logOutTitle'),
-			message: t('message.user.logOutMessage'),
+			message: t('user.logOutMessage'),
 			showCancelButton: true,
-			confirmButtonText: t('message.user.logOutConfirm'),
+			confirmButtonText: t('user.logOutConfirm'),
-			cancelButtonText: t('message.user.logOutCancel'),
+			cancelButtonText: t('user.logOutCancel'),
 			buttonSize: 'default',
 			beforeClose: (action, instance, done) => {
 				if (action === 'confirm') {
 					instance.confirmButtonLoading = true;
-					instance.confirmButtonText = t('message.user.logOutExit');
+					instance.confirmButtonText = t('user.logOutExit');
 					setTimeout(() => {
 						done();
 						setTimeout(() => {

src/layout/navBars/breadcrumb/userNews.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user-news">
 		<div class="head-box">
-			<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
+			<div class="head-box-title">{{ $t('user.newTitle') }}</div>
-			<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
+			<div class="head-box-btn" v-if="state.newsList.length > 0" @click="onAllReadClick">{{ $t('user.newBtn') }}</div>
 		</div>
 		<div class="content-box">
 			<template v-if="state.newsList.length > 0">
@@ -14,9 +14,9 @@
 					<div class="content-box-time">{{ v.time }}</div>
 				</div>
 			</template>
-			<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
+			<el-empty :description="$t('user.newDesc')" v-else></el-empty>
 		</div>
-		<div class="foot-box" @click="onGoToGiteeClick" v-if="state.newsList.length > 0">{{ $t('message.user.newGo') }}</div>
+		<div class="foot-box" @click="onGoToGiteeClick" v-if="state.newsList.length > 0">{{ $t('user.newGo') }}</div>
 	</div>
 </template>
 

src/layout/navBars/tagsView/contextmenu.vue

@@ -52,13 +52,13 @@ const emit = defineEmits(['currentContextmenuClick']);
 const state = reactive({
 	isShow: false,
 	dropdownList: [
-		{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
+		{ contextMenuClickId: 0, txt: 'tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
-		{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
+		{ contextMenuClickId: 1, txt: 'tagsView.close', affix: false, icon: 'ele-Close' },
-		{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
+		{ contextMenuClickId: 2, txt: 'tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
-		{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
+		{ contextMenuClickId: 3, txt: 'tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
 		{
 			contextMenuClickId: 4,
-			txt: 'message.tagsView.fullscreen',
+			txt: 'tagsView.fullscreen',
 			affix: false,
 			icon: 'iconfont icon-fullscreen',
 		},

src/layout/upgrade/index.vue

@@ -10,21 +10,21 @@
 		>
 			<div class="upgrade-title">
 				<div class="upgrade-title-warp">
-					<span class="upgrade-title-warp-txt">{{ $t('message.upgrade.title') }}</span>
+					<span class="upgrade-title-warp-txt">{{ $t('upgrade.title') }}</span>
 					<span class="upgrade-title-warp-version">v{{ state.version }}</span>
 				</div>
 			</div>
 			<div class="upgrade-content">
-				{{ getThemeConfig.globalTitle }} {{ $t('message.upgrade.msg') }}
+				{{ getThemeConfig.globalTitle }} {{ $t('upgrade.msg') }}
 				<div class="mt5">
 					<el-link type="primary" class="font12" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_black">
 						CHANGELOG.md
 					</el-link>
 				</div>
-				<div class="upgrade-content-desc mt5">{{ $t('message.upgrade.desc') }}</div>
+				<div class="upgrade-content-desc mt5">{{ $t('upgrade.desc') }}</div>
 			</div>
 			<div class="upgrade-btn">
-				<el-button round size="default" type="info" text @click="onCancel">{{ $t('message.upgrade.btnOne') }}</el-button>
+				<el-button round size="default" type="info" text @click="onCancel">{{ $t('upgrade.btnOne') }}</el-button>
 				<el-button type="primary" round size="default" @click="onUpgrade" :loading="state.isLoading">{{ state.btnTxt }}</el-button>
 			</div>
 		</el-dialog>
@@ -61,7 +61,7 @@ const onCancel = () => {
 // 马上更新
 const onUpgrade = () => {
 	state.isLoading = true;
-	state.btnTxt = t('message.upgrade.btnTwoLoading');
+	state.btnTxt = t('upgrade.btnTwoLoading');
 	setTimeout(() => {
 		Local.clear();
 		window.location.reload();
@@ -78,7 +78,7 @@ const delayShow = () => {
 onMounted(() => {
 	delayShow();
 	setTimeout(() => {
-		state.btnTxt = t('message.upgrade.btnTwo');
+		state.btnTxt = t('upgrade.btnTwo');
 	}, 200);
 });
 </script>

src/utils/commonFunction.ts

@@ -45,11 +45,11 @@ export default function () {
 				//复制
 				toClipboard(text);
 				//下面可以设置复制成功的提示框等操作
-				ElMessage.success(t('message.layout.copyTextSuccess'));
+				ElMessage.success(t('layout.copyTextSuccess'));
 				resolve(text);
 			} catch (e) {
 				//复制失败
-				ElMessage.error(t('message.layout.copyTextError'));
+				ElMessage.error(t('layout.copyTextError'));
 				reject(e);
 			}
 		});

src/views/error/401.vue

@@ -5,10 +5,10 @@
 				<div class="left">
 					<div class="left-item">
 						<div class="left-item-animation left-item-num">401</div>
-						<div class="left-item-animation left-item-title">{{ $t('message.noAccess.accessTitle') }}</div>
+						<div class="left-item-animation left-item-title">{{ $t('noAccess.accessTitle') }}</div>
-						<div class="left-item-animation left-item-msg">{{ $t('message.noAccess.accessMsg') }}</div>
+						<div class="left-item-animation left-item-msg">{{ $t('noAccess.accessMsg') }}</div>
 						<div class="left-item-animation left-item-btn">
-							<el-button type="primary" size="default" round @click="onSetAuth">{{ $t('message.noAccess.accessBtn') }}</el-button>
+							<el-button type="primary" size="default" round @click="onSetAuth">{{ $t('noAccess.accessBtn') }}</el-button>
 						</div>
 					</div>
 				</div>

src/views/error/404.vue

@@ -5,10 +5,10 @@
 				<div class="left">
 					<div class="left-item">
 						<div class="left-item-animation left-item-num">404</div>
-						<div class="left-item-animation left-item-title">{{ $t('message.notFound.foundTitle') }}</div>
+						<div class="left-item-animation left-item-title">{{ $t('notFound.foundTitle') }}</div>
-						<div class="left-item-animation left-item-msg">{{ $t('message.notFound.foundMsg') }}</div>
+						<div class="left-item-animation left-item-msg">{{ $t('notFound.foundMsg') }}</div>
 						<div class="left-item-animation left-item-btn">
-							<el-button type="primary" size="default" round @click="onGoHome">{{ $t('message.notFound.foundBtn') }}</el-button>
+							<el-button type="primary" size="default" round @click="onGoHome">{{ $t('notFound.foundBtn') }}</el-button>
 						</div>
 					</div>
 				</div>

src/views/login/component/account.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-form size="large" class="login-content-form">
 		<el-form-item class="login-animation1">
-			<el-input text :placeholder="$t('message.account.accountPlaceholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
+			<el-input text :placeholder="$t('account.accountPlaceholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
 				<template #prefix>
 					<el-icon class="el-input__icon"><ele-User /></el-icon>
 				</template>
@@ -10,7 +10,7 @@
 		<el-form-item class="login-animation2">
 			<el-input
 				:type="state.isShowPassword ? 'text' : 'password'"
-				:placeholder="$t('message.account.accountPlaceholder2')"
+				:placeholder="$t('account.accountPlaceholder2')"
 				v-model="state.ruleForm.password"
 				autocomplete="off"
 			>
@@ -32,7 +32,7 @@
 				<el-input
 					text
 					maxlength="4"
-					:placeholder="$t('message.account.accountPlaceholder3')"
+					:placeholder="$t('account.accountPlaceholder3')"
 					v-model="state.ruleForm.code"
 					clearable
 					autocomplete="off"
@@ -49,7 +49,7 @@
 		</el-form-item>
 		<el-form-item class="login-animation4">
 			<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
-				<span>{{ $t('message.account.accountBtnText') }}</span>
+				<span>{{ $t('account.accountBtnText') }}</span>
 			</el-button>
 		</el-form-item>
 	</el-form>
@@ -129,7 +129,7 @@ const signInSuccess = (isNoPower: boolean | undefined) => {
 			router.push('/');
 		}
 		// 登录成功提示
-		const signInText = t('message.signInText');
+		const signInText = t('signInText');
 		ElMessage.success(`${currentTimeInfo}，${signInText}`);
 		// 添加 loading，防止第一次进入界面时出现短暂空白
 		NextLoading.start();

src/views/login/component/mobile.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-form size="large" class="login-content-form">
 		<el-form-item class="login-animation1">
-			<el-input text :placeholder="$t('message.mobile.placeholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
+			<el-input text :placeholder="$t('mobile.placeholder1')" v-model="state.ruleForm.userName" clearable autocomplete="off">
 				<template #prefix>
 					<i class="iconfont icon-dianhua el-input__icon"></i>
 				</template>
@@ -9,7 +9,7 @@
 		</el-form-item>
 		<el-form-item class="login-animation2">
 			<el-col :span="15">
-				<el-input text maxlength="4" :placeholder="$t('message.mobile.placeholder2')" v-model="state.ruleForm.code" clearable autocomplete="off">
+				<el-input text maxlength="4" :placeholder="$t('mobile.placeholder2')" v-model="state.ruleForm.code" clearable autocomplete="off">
 					<template #prefix>
 						<el-icon class="el-input__icon"><ele-Position /></el-icon>
 					</template>
@@ -17,15 +17,15 @@
 			</el-col>
 			<el-col :span="1"></el-col>
 			<el-col :span="8">
-				<el-button v-waves class="login-content-code">{{ $t('message.mobile.codeText') }}</el-button>
+				<el-button v-waves class="login-content-code">{{ $t('mobile.codeText') }}</el-button>
 			</el-col>
 		</el-form-item>
 		<el-form-item class="login-animation3">
 			<el-button round type="primary" v-waves class="login-content-submit">
-				<span>{{ $t('message.mobile.btnText') }}</span>
+				<span>{{ $t('mobile.btnText') }}</span>
 			</el-button>
 		</el-form-item>
-		<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
+		<div class="font12 mt30 login-animation4 login-msg">{{ $t('mobile.msgText') }}</div>
 	</el-form>
 </template>
 

src/views/login/component/scan.vue

@@ -3,7 +3,7 @@
 		<div ref="qrcodeRef"></div>
 		<div class="font12 mt20 login-msg">
 			<i class="iconfont icon-saoyisao mr5"></i>
-			<span>{{ $t('message.scan.text') }}</span>
+			<span>{{ $t('scan.text') }}</span>
 		</div>
 	</div>
 </template>

src/views/login/index.vue

@@ -22,10 +22,10 @@
 					<div class="login-right-warp-main-form">
 						<div v-if="!state.isScan">
 							<el-tabs v-model="state.tabsActiveName">
-								<el-tab-pane :label="$t('message.label.one1')" name="account">
+								<el-tab-pane :label="$t('label.one1')" name="account">
 									<Account />
 								</el-tab-pane>
-								<el-tab-pane :label="$t('message.label.two2')" name="mobile">
+								<el-tab-pane :label="$t('label.two2')" name="mobile">
 									<Mobile />
 								</el-tab-pane>
 							</el-tabs>

src/views/make/noticeBar/index.vue

@@ -1,158 +0,0 @@
-<template>
-	<div class="notice-bar-container layout-pd">
-		<el-card shadow="hover" header="滚动通知栏：默认">
-			<NoticeBar
-				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
-				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
-			/>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：设置样式" class="mt15">
-			<NoticeBar
-				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
-				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
-				leftIcon="iconfont icon-tongzhi2"
-				rightIcon="ele-ArrowRight"
-				background="#ecf5ff"
-				color="#409eff"
-			/>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：搭配 NoticeBar 和 Carousel 走马灯 组件可以实现垂直滚动的效果" class="mt15">
-			<NoticeBar :scrollable="true">
-				<el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
-					<el-carousel-item v-for="v in state.noticeList" :key="v">{{ v }} </el-carousel-item>
-				</el-carousel>
-			</NoticeBar>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：参数" class="mt15">
-			<el-table :data="state.tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
-			<el-table :data="state.tableData1" style="width: 100%">
-				<el-table-column prop="a1" label="事件名称"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="回调参数"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="makeNoticeBar">
-import { defineAsyncComponent, reactive } from 'vue';
-
-// 引入组件
-const NoticeBar = defineAsyncComponent(() => import('/@/components/noticeBar/index.vue'));
-
-// 定义变量内容
-const state = reactive({
-	noticeList: [
-		'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
-		'适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
-		'仓库地址：https://gitee.com/lyt-top/vue-next-admin',
-		'演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
-	],
-	tableData: [
-		{
-			a1: 'mode',
-			a2: '通知栏模式，用于右侧 icon 图标点击',
-			a3: 'string',
-			a4: 'closeable / link',
-			a5: '',
-		},
-		{
-			a1: 'text',
-			a2: '通知文本内容，scrollable 为 false 时生效',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-		{
-			a1: 'color',
-			a2: '通知文本颜色',
-			a3: 'string',
-			a4: '',
-			a5: '#e6a23c',
-		},
-		{
-			a1: 'background',
-			a2: '通知背景色',
-			a3: 'string',
-			a4: '',
-			a5: '#fdf6ec',
-		},
-		{
-			a1: 'size',
-			a2: '字体大小，单位px',
-			a3: 'number / string',
-			a4: '',
-			a5: '14',
-		},
-		{
-			a1: 'height',
-			a2: '通知栏高度，单位px',
-			a3: 'number / string',
-			a4: '',
-			a5: '40',
-		},
-		{
-			a1: 'delay',
-			a2: '动画延迟时间 (s)',
-			a3: 'number / string',
-			a4: '',
-			a5: '1',
-		},
-		{
-			a1: 'speed',
-			a2: '滚动速率 (px/s)',
-			a3: 'number / string',
-			a4: '',
-			a5: '100',
-		},
-		{
-			a1: 'scrollable',
-			a2: '是否开启垂直滚动',
-			a3: 'boolean',
-			a4: 'true',
-			a5: 'false',
-		},
-		{
-			a1: 'leftIcon',
-			a2: '自定义左侧图标',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-		{
-			a1: 'rightIcon',
-			a2: '自定义右侧图标',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-	],
-	tableData1: [
-		{
-			a1: 'close',
-			a2: '通知栏模式（mode）closeable 时回调事件',
-			a3: 'function',
-			a4: '',
-		},
-		{
-			a1: 'link',
-			a2: '通知栏模式（mode）link 时回调事件',
-			a3: 'function',
-			a4: '',
-		},
-	],
-});
-</script>

src/views/make/selector/index.vue

@@ -1,118 +0,0 @@
-<template>
-	<div class="selector-container layout-pd">
-		<el-card shadow="hover" header="图标选择器(宽度自动)：">
-			<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="state.modelIcon" />
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：参数" class="mt15">
-			<el-table :data="state.tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
-			<el-table :data="state.tableData1" style="width: 100%">
-				<el-table-column prop="a1" label="事件名称"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="回调参数"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="makeSelector">
-import { defineAsyncComponent, reactive } from 'vue';
-
-// 引入组件
-const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
-
-// 定义变量内容
-const state = reactive({
-	modelIcon: '',
-	tableData: [
-		{
-			a1: 'v-model',
-			a2: '双向绑定值',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-		{
-			a1: 'prepend',
-			a2: '输入框前置内容，只能字体图标',
-			a3: 'string',
-			a4: '',
-			a5: 'ele-Pointer',
-		},
-		{
-			a1: 'placeholder',
-			a2: '输入框占位文本',
-			a3: 'string',
-			a4: '',
-			a5: '请输入内容搜索图标或者选择图标',
-		},
-		{
-			a1: 'size',
-			a2: '尺寸',
-			a3: 'string',
-			a4: 'large / default / small',
-			a5: 'default',
-		},
-		{
-			a1: 'title',
-			a2: '弹窗标题',
-			a3: 'string',
-			a4: '',
-			a5: '请选择图标',
-		},
-		{
-			a1: 'disabled',
-			a2: '禁用',
-			a3: 'boolean',
-			a4: 'true',
-			a5: 'false',
-		},
-		{
-			a1: 'clearable',
-			a2: '是否可清空',
-			a3: 'boolean',
-			a4: 'false',
-			a5: 'true',
-		},
-		{
-			a1: 'emptyDescription',
-			a2: '自定义空状态描述文字',
-			a3: 'String',
-			a4: '',
-			a5: '无相关图标',
-		},
-	],
-	tableData1: [
-		{
-			a1: 'get',
-			a2: '获取当前点击的 icon 图标',
-			a3: 'function',
-			a4: '(icon: string)',
-		},
-		{
-			a1: 'clear',
-			a2: '清空当前点击的 icon 图标',
-			a3: 'function',
-			a4: '(icon: string)',
-		},
-	],
-});
-// 获取当前点击的 icon 图标
-const onGetIcon = (icon: string) => {
-	console.log(icon);
-};
-// 清空当前点击的 icon 图标
-const onClearIcon = (icon: string) => {
-	console.log(icon);
-};
-</script>

src/views/make/svgDemo/index.vue

@@ -1,51 +0,0 @@
-<template>
-	<div class="svg-demo-container layout-pd">
-		<el-card shadow="hover" header="svgIcon：演示（支持本地svg）">
-			<SvgIcon name="iconfont icon-shuju1" color="red" :size="30" />
-			<SvgIcon name="ele-Trophy" color="var(--el-color-primary)" :size="30" />
-			<SvgIcon name="fa fa-flag-checkered" color="#09f" :size="30" />
-			<SvgIcon :name="logoMini" color="#09f" :size="30" />
-		</el-card>
-		<el-card shadow="hover" header="svgIcon：参数" class="mt15">
-			<el-table :data="state.tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="makeSvgDemo">
-import { reactive } from 'vue';
-import logoMini from '/@/assets/logo-mini.svg';
-
-// 定义变量内容
-const state = reactive({
-	tableData: [
-		{
-			a1: 'name',
-			a2: 'svg 图标组件名字 / svg 路径 url',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-		{
-			a1: 'size',
-			a2: 'svg 大小',
-			a3: 'number',
-			a4: '',
-			a5: 14,
-		},
-		{
-			a1: 'color',
-			a2: 'svg 颜色',
-			a3: 'string',
-			a4: '',
-			a5: '',
-		},
-	],
-});
-</script>

src/views/make/tableDemo/index.vue

@@ -1,134 +0,0 @@
-<template>
-	<div class="table-demo-container layout-padding">
-		<div class="table-demo-padding layout-padding-view layout-padding-auto">
-			<TableSearch :search="state.tableData.search" @search="onSearch" />
-			<Table
-				ref="tableRef"
-				v-bind="state.tableData"
-				class="table-demo"
-				@delRow="onTableDelRow"
-				@pageChange="onTablePageChange"
-				@sortHeader="onSortHeader"
-			/>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="makeTableDemo">
-import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
-
-// 引入组件
-const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
-const TableSearch = defineAsyncComponent(() => import('/@/views/make/tableDemo/search.vue'));
-
-// 定义变量内容
-const tableRef = ref<RefType>();
-const state = reactive<TableDemoState>({
-	tableData: {
-		// 列表数据（必传）
-		data: [],
-		// 表头内容（必传，注意格式）
-		header: [
-			{ key: 'name', colWidth: '', title: '应检尽检核酸采样点名称', type: 'text', isCheck: true },
-			{ key: 'address', colWidth: '', title: '详细地址', type: 'text', isCheck: true },
-			{ key: 'phone', colWidth: '', title: '采样点联系电话', type: 'text', isCheck: true },
-			{ key: 'time', colWidth: '', title: '开放时间', type: 'text', isCheck: true },
-			{ key: 'isSupport', colWidth: '', title: '是否支持24小时核酸检测', type: 'text', isCheck: true },
-			{ key: 'image', colWidth: '', width: '70', height: '40', title: '图片描述', type: 'image', isCheck: true },
-		],
-		// 配置项（必传）
-		config: {
-			total: 0, // 列表总数
-			loading: true, // loading 加载
-			isBorder: false, // 是否显示表格边框
-			isSerialNo: true, // 是否显示表格序号
-			isSelection: true, // 是否显示表格多选
-			isOperate: true, // 是否显示表格操作栏
-		},
-		// 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
-		search: [
-			{ label: '采样点名称', prop: 'name', placeholder: '请输入应检尽检核酸采样点名称', required: true, type: 'input' },
-			{ label: '详细地址', prop: 'address', placeholder: '请输入详细地址', required: false, type: 'input' },
-			{ label: '联系电话', prop: 'phone', placeholder: '请输入采样点联系电话', required: false, type: 'input' },
-			{ label: '开放时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
-			{
-				label: '支持24小时',
-				prop: 'isSupport',
-				placeholder: '请选择',
-				required: false,
-				type: 'select',
-				options: [
-					{ label: '是', value: 1 },
-					{ label: '否', value: 0 },
-				],
-			},
-			{ label: '图片描述', prop: 'image', placeholder: '请输入图片描述', required: false, type: 'input' },
-			{ label: '核酸机构', prop: 'mechanism', placeholder: '请输入核酸机构', required: false, type: 'input' },
-		],
-		// 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
-		param: {
-			pageNum: 1,
-			pageSize: 10,
-		},
-	},
-});
-
-// 初始化列表数据
-const getTableData = () => {
-	state.tableData.config.loading = true;
-	state.tableData.data = [];
-	for (let i = 0; i < 20; i++) {
-		state.tableData.data.push({
-			id: `123456789${i + 1}`,
-			name: `莲塘别墅广场${i + 1}`,
-			address: `中沧公寓中庭榕树下${i + 1}`,
-			phone: `0592-6081259${i + 1}`,
-			time: `6:00 ~ 24:00`,
-			isSupport: `${i % 2 === 0 ? '是' : '否'}`,
-			image: `https://img2.baidu.com/it/u=417454395,2713356475&fm=253&fmt=auto?w=200&h=200`,
-		});
-	}
-	// 数据总数（模拟，真实从接口取）
-	state.tableData.config.total = state.tableData.data.length;
-	setTimeout(() => {
-		state.tableData.config.loading = false;
-	}, 500);
-};
-// 搜索点击时表单回调
-const onSearch = (data: EmptyObjectType) => {
-	state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
-	tableRef.value.pageReset();
-};
-// 删除当前项回调
-const onTableDelRow = (row: EmptyObjectType) => {
-	ElMessage.success(`删除${row.name}成功！`);
-	getTableData();
-};
-// 分页改变时回调
-const onTablePageChange = (page: TableDemoPageType) => {
-	state.tableData.param.pageNum = page.pageNum;
-	state.tableData.param.pageSize = page.pageSize;
-	getTableData();
-};
-// 拖动显示列排序回调
-const onSortHeader = (data: TableHeaderType[]) => {
-	state.tableData.header = data;
-};
-// 页面加载时
-onMounted(() => {
-	getTableData();
-});
-</script>
-
-<style scoped lang="scss">
-.table-demo-container {
-	.table-demo-padding {
-		padding: 15px;
-		.table-demo {
-			flex: 1;
-			overflow: hidden;
-		}
-	}
-}
-</style>

src/views/make/tableDemo/search.vue

@@ -1,110 +0,0 @@
-<template>
-	<div class="table-search-container" v-if="props.search.length > 0">
-		<el-form ref="tableSearchRef" :model="state.form" size="default" label-width="100px" class="table-form">
-			<el-row>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key" v-show="key === 0 || state.isToggle">
-					<template v-if="val.type !== ''">
-						<el-form-item
-							:label="val.label"
-							:prop="val.prop"
-							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
-						>
-							<el-input v-model="state.form[val.prop]" :placeholder="val.placeholder" clearable v-if="val.type === 'input'" style="width: 100%" />
-							<el-date-picker
-								v-model="state.form[val.prop]"
-								type="date"
-								:placeholder="val.placeholder"
-								v-else-if="val.type === 'date'"
-								style="width: 100%"
-							/>
-							<el-select v-model="state.form[val.prop]" :placeholder="val.placeholder" v-else-if="val.type === 'select'" style="width: 100%">
-								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-							</el-select>
-						</el-form-item>
-					</template>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item class="table-form-btn" :label-width="search.length <= 1 ? '10px' : '100px'">
-						<template #label v-if="search.length > 1">
-							<div class="table-form-btn-toggle ml10" @click="state.isToggle = !state.isToggle">
-								<span>{{ state.isToggle ? '收筛选' : '展筛选' }}</span>
-								<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
-							</div>
-						</template>
-						<div>
-							<el-button size="default" type="primary" @click="onSearch(tableSearchRef)">查询 </el-button>
-							<el-button size="default" type="info" class="ml10" @click="onReset(tableSearchRef)"> 重置 </el-button>
-						</div>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="makeTableDemoSearch">
-import { reactive, ref, onMounted } from 'vue';
-import type { FormInstance } from 'element-plus';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	// 搜索表单
-	search: {
-		type: Array<TableSearchType>,
-		default: () => [],
-	},
-});
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['search']);
-
-// 定义变量内容
-const tableSearchRef = ref<FormInstance>();
-const state = reactive({
-	form: {},
-	isToggle: false,
-});
-
-// 查询
-const onSearch = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate((valid: boolean) => {
-		if (valid) {
-			emit('search', state.form);
-		} else {
-			return false;
-		}
-	});
-};
-// 重置
-const onReset = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
-	emit('search', state.form);
-};
-// 初始化 form 字段，取自父组件 search.prop
-const initFormField = () => {
-	if (props.search.length <= 0) return false;
-	props.search.forEach((v) => (state.form[v.prop] = ''));
-};
-// 页面加载时
-onMounted(() => {
-	initFormField();
-});
-</script>
-
-<style scoped lang="scss">
-.table-search-container {
-	display: flex;
-	.table-form {
-		flex: 1;
-		.table-form-btn-toggle {
-			white-space: nowrap;
-			user-select: none;
-			display: flex;
-			align-items: center;
-			color: var(--el-color-primary);
-		}
-	}
-}
-</style>

src/views/menu/menu1/menu11/index.vue

@@ -1,12 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-input v-model="val" placeholder="menu11：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script setup lang="ts" name="menu11">
-import { ref } from 'vue';
-
-// 定义变量内容
-const val = ref('');
-</script>

src/views/menu/menu1/menu12/menu121/index.vue

@@ -1,12 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-input v-model="val" placeholder="menu121：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script setup lang="ts" name="menu121">
-import { ref } from 'vue';
-
-// 定义变量内容
-const val = ref('');
-</script>

src/views/menu/menu1/menu12/menu122/index.vue

@@ -1,12 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-input v-model="val" placeholder="menu122：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script setup lang="ts" name="menu122">
-import { ref } from 'vue';
-
-// 定义变量内容
-const val = ref('');
-</script>

src/views/menu/menu1/menu13/index.vue

@@ -1,21 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-input v-model="val" placeholder="menu13：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script setup lang="ts" name="menu13">
-import { ref, onActivated, onMounted } from 'vue';
-
-// 定义变量内容
-const val = ref('');
-
-// 页面加载时
-onMounted(() => {
-	console.log(2222);
-});
-// keep-alive 钩子函数，页面进入时
-onActivated(() => {
-	console.log(1111);
-});
-</script>

src/views/menu/menu2/index.vue

@@ -1,12 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-input v-model="val" placeholder="menu2：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script setup lang="ts" name="menu2">
-import { ref } from 'vue';
-
-// 定义变量内容
-const val = ref('');
-</script>

src/views/pages/awesome/index.vue

@@ -1,81 +0,0 @@
-<template>
-	<div class="awesome-container layout-pd">
-		<el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${state.sheetsIconList.length - 24}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in state.sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<i :class="v" class="fa"></i>
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesAwesome">
-import { reactive, onMounted } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-
-// 定义变量内容
-const state = reactive({
-	sheetsIconList: [],
-});
-
-// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
-const initGetStyleSheets = () => {
-	initIconfont.awe().then((res: any) => (state.sheetsIconList = res));
-};
-// 页面加载时
-onMounted(() => {
-	initGetStyleSheets();
-});
-</script>
-
-<style scoped lang="scss">
-.awesome-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/pages/drag/index.vue

@@ -1,59 +0,0 @@
-<template>
-	<div class="drag-container layout-pd">
-		<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
-			<el-button type="primary" @click="state.dialogVisible = true" size="default">
-				<el-icon>
-					<ele-Pointer />
-				</el-icon>
-				点击打开 Dialog
-			</el-button>
-		</el-card>
-
-		<el-card shadow="hover" header="自定义div" class="mt15">
-			<div class="drag-dom">
-				<div class="drag-header">
-					<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
-						<el-icon>
-							<ele-Pointer />
-						</el-icon>
-						按住进行拖动测试
-					</el-button>
-				</div>
-			</div>
-		</el-card>
-
-		<el-dialog v-model="state.dialogVisible" width="769px">
-			<template #header>
-				<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
-			</template>
-			<p>鼠标放标题头进行 Dialog 对话框拖动</p>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="state.dialogVisible = false" size="default">取 消</el-button>
-					<el-button type="primary" @click="state.dialogVisible = false" size="default">确 定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesDrag">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	dialogVisible: false,
-});
-</script>
-
-<style scoped lang="scss">
-.drag-container {
-	.drag-dom {
-		position: relative;
-		display: inline-block;
-		.drag-header {
-			display: inline-block;
-		}
-	}
-}
-</style>

src/views/pages/dynamicForm/index.vue

@@ -1,168 +0,0 @@
-<template>
-	<div class="dynamic-form-container layout-pd">
-		<el-card shadow="hover" header="动态复杂表单">
-			<el-form :model="state.form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
-				<el-row :gutter="35">
-					<el-col
-						:xs="val.xs"
-						:sm="val.sm"
-						:md="val.md"
-						:lg="val.md"
-						:xl="val.xl"
-						class="mb20"
-						v-show="val.isShow"
-						v-for="(val, key) in formData"
-						:key="key"
-					>
-						<template v-if="val.type !== ''">
-							<el-form-item
-								:label="val.label"
-								:prop="val.prop"
-								:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
-								v-if="val.type !== ''"
-							>
-								<el-input
-									v-model="state.form[val.prop]"
-									:placeholder="val.placeholder"
-									clearable
-									v-if="val.type === 'input'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								></el-input>
-								<el-date-picker
-									v-model="state.form[val.prop]"
-									type="date"
-									:placeholder="val.placeholder"
-									v-else-if="val.type === 'date'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								>
-								</el-date-picker>
-								<el-select
-									v-model="state.form[val.prop]"
-									:placeholder="val.placeholder"
-									v-else-if="val.type === 'select'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								>
-									<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-								</el-select>
-								<el-input
-									type="textarea"
-									v-model="state.form[val.prop]"
-									:placeholder="val.placeholder"
-									clearable
-									v-if="val.type === 'textarea'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								></el-input>
-							</el-form-item>
-						</template>
-						<template v-else>
-							<el-row :gutter="35" v-for="(v, k) in state.form.list" :key="k">
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
-										<template #label>
-											<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
-												<el-icon>
-													<ele-Plus />
-												</el-icon>
-											</el-button>
-											<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
-												<el-icon>
-													<ele-Delete />
-												</el-icon>
-											</el-button>
-											<span class="ml10">年度</span>
-										</template>
-										<el-input v-model="state.form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
-										<el-input v-model="state.form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
-										<el-input v-model="state.form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</template>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-		<el-row class="flex mt15">
-			<div class="flex-margin">
-				<el-button size="default" @click="onResetForm(formRulesOneRef)">
-					<el-icon>
-						<ele-RefreshRight />
-					</el-icon>
-					重置表单
-				</el-button>
-				<el-button size="default" type="primary" @click="onSubmitForm(formRulesOneRef)">
-					<SvgIcon name="iconfont icon-shuxing" />
-					验证表单
-				</el-button>
-			</div>
-		</el-row>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesDynamicForm">
-import { reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import type { FormInstance } from 'element-plus';
-import { formData } from './mock';
-
-// 定义变量内容
-const formRulesOneRef = ref<FormInstance>();
-const state = reactive({
-	formData,
-	form: {
-		name: '',
-		email: '',
-		autograph: '',
-		occupation: '',
-		list: [
-			{
-				year: '',
-				month: '',
-				day: '',
-			},
-		],
-		remarks: '',
-	},
-});
-
-// 新增行
-const onAddRow = () => {
-	state.form.list.push({
-		year: '',
-		month: '',
-		day: '',
-	});
-};
-// 删除行
-const onDelRow = (k: number) => {
-	state.form.list.splice(k, 1);
-};
-// 表单验证
-const onSubmitForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate((valid: boolean) => {
-		if (valid) {
-			ElMessage.success('验证成功');
-		} else {
-			return false;
-		}
-	});
-};
-// 重置表单
-const onResetForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
-};
-</script>

src/views/pages/dynamicForm/mock.ts

@@ -1,119 +0,0 @@
-// 表单数据选项(自行扩展)
-export const formData = [
-	{
-		label: '姓名',
-		prop: 'name',
-		placeholder: '请输入姓名',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'input',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '邮箱',
-		prop: 'email',
-		placeholder: '请输入用户邮箱',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'input',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '登陆时间',
-		prop: 'autograph',
-		placeholder: '选择时间',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'date',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '职务',
-		prop: 'occupation',
-		placeholder: '请选择职务',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'select',
-		i18n: false,
-		i18nText: '',
-		options: [
-			{
-				label: '计算机 / 互联网 / 通信',
-				value: '1',
-			},
-			{
-				label: '生产 / 工艺 / 制造',
-				value: '2',
-			},
-			{
-				label: '医疗 / 护理 / 制药',
-				value: '3',
-			},
-		],
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '',
-		prop: '',
-		placeholder: '',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: '',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 24,
-		md: 24,
-		lg: 24,
-		xl: 24,
-	},
-	{
-		label: '备注',
-		prop: 'remarks',
-		placeholder: '请输入',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'textarea',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 24,
-		md: 24,
-		lg: 24,
-		xl: 24,
-	},
-];

src/views/pages/element/index.vue

@@ -1,83 +0,0 @@
-<template>
-	<div class="element-container layout-pd">
-		<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${state.sheetsIconList.length}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in state.sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<SvgIcon :name="v" :size="30" />
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesElement">
-import { reactive, onMounted } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-
-// 定义变量内容
-const state = reactive({
-	sheetsIconList: [],
-});
-
-// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
-const initGetStyleSheets = () => {
-	initIconfont.ele().then((res: any) => {
-		state.sheetsIconList = res;
-	});
-};
-// 页面加载时
-onMounted(() => {
-	initGetStyleSheets();
-});
-</script>
-
-<style scoped lang="scss">
-.element-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/pages/filtering/details.vue

@@ -1,13 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="w100 h100 flex">
-				<div class="flex-margin color-primary">filtering-details 测试界面</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFilteringDetails">
-// 此处需有内容（注释也得），否则缓存将失败
-</script>

src/views/pages/filtering/details1.vue

@@ -1,13 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="w100 h100 flex">
-				<div class="flex-margin color-primary">测试界面</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFilteringDetails1">
-// 此处需有内容（注释也得），否则缓存将失败
-</script>

src/views/pages/filtering/index.vue

@@ -1,344 +0,0 @@
-<template>
-	<div class="filtering layout-pd">
-		<el-card
-			shadow="hover"
-			class="filtering-list br-top-no"
-			v-loading="state.tableData.loading"
-			element-loading-text="加载中..."
-			element-loading-background="rgba(255, 255, 255, 0.1)"
-			:class="{ 'min-h-360': state.tableData.data.length <= 0 }"
-		>
-			<div
-				v-for="(val, key) in filtering"
-				:key="key"
-				:ref="
-					(el) => {
-						if (el) dlRefs[key] = el;
-					}
-				"
-				class="filtering-list-flex"
-			>
-				<div class="filtering-list-title">{{ val.title }}</div>
-				<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
-					<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
-						v.label
-					}}</span>
-					<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
-						<span>{{ val.isMore ? '收起' : '展开' }}</span>
-						<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
-					</div>
-				</div>
-			</div>
-			<div class="flex-warp mt15 mb15" v-if="state.tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in state.tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img">
-									<img :src="v.img" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<div v-else class="filtering-no-data">
-				<div class="no-data-box">
-					<i class="el-icon-search"></i>
-					<div class="no-txt">暂无数据</div>
-				</div>
-			</div>
-			<template v-if="state.tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="state.tableData.param.pageNum"
-					:page-size="state.tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="state.tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFiltering">
-import { ref, reactive, onMounted, nextTick } from 'vue';
-import { useRouter } from 'vue-router';
-import { filtering, filterList } from './mock';
-
-// 定义变量内容
-const dlRefs = ref<RefType[]>([]);
-const router = useRouter();
-const state = reactive({
-	filtering,
-	tableData: {
-		data: filterList,
-		total: 99,
-		loading: false,
-		param: {
-			pageNum: 1,
-			pageSize: 10,
-		},
-	},
-});
-
-// 页面加载时
-onMounted(() => {
-	initBtnToggle();
-	window.onresize = () => {
-		initBtnToggle();
-	};
-});
-// 初始化 `收起、展开` 按钮
-const initBtnToggle = () => {
-	nextTick(() => {
-		const els = dlRefs.value;
-		els.map((v: any, k: number) => {
-			v.scrollHeight < v.lastChild.scrollHeight ? (state.filtering[k].isShowMore = true) : (state.filtering[k].isShowMore = false);
-		});
-	});
-};
-// 过滤当前选中的数据
-const onSelItem = (val: FilteringRowType, v: FilteringChilType) => {
-	val.children.map((v: FilteringChilType) => (v.active = false));
-	v.active = true;
-	let arr = [];
-	state.filtering.map((item: FilteringRowType) => {
-		item.children.map((chil: FilteringChilType) => {
-			if (chil.active) {
-				arr.push({
-					...item,
-					children: [{ ...chil }],
-				});
-			}
-		});
-	});
-	state.tableData.loading = true;
-	setTimeout(() => {
-		state.tableData.loading = false;
-	}, 500);
-};
-// 当前列表项点击
-const onTableItemClick = (v: FilterListType) => {
-	if (v.id === 1) {
-		router.push({
-			path: '/pages/filtering/details',
-			query: { id: v.id },
-		});
-	} else {
-		router.push({
-			path: '/pages/filtering/details1',
-			query: { id: v.id },
-		});
-	}
-};
-// 分页点击
-const onHandleSizeChange = (val: number) => {
-	state.tableData.param.pageSize = val;
-};
-// 分页点击
-const onHandleCurrentChange = (val: number) => {
-	state.tableData.param.pageNum = val;
-};
-</script>
-
-<style scoped lang="scss">
-.filtering {
-	.filtering-list {
-		overflow: hidden;
-		border-bottom: none !important;
-		.filtering-list-flex {
-			&:last-of-type {
-				.filtering-list-item {
-					border-bottom: none !important;
-				}
-			}
-			.filtering-list-title {
-				float: left;
-				width: 64px;
-				font-weight: 700;
-				position: relative;
-				color: #909399;
-				margin: 15px 0;
-				&:after {
-					content: '';
-					position: absolute;
-					border: 1px solid #909399;
-					border-width: 0 1px 1px 0;
-					width: 4px;
-					height: 4px;
-					transform: rotate(-45deg) translateY(-50%);
-					right: 10px;
-					top: 50%;
-				}
-			}
-			.filtering-list-item {
-				border-bottom: 1px dotted var(--next-border-color-light);
-				margin-left: 64px;
-				overflow: hidden;
-				position: relative;
-				.span {
-					color: #8d8d91;
-					font-size: 14px;
-					float: left;
-					padding: 0 15px;
-					margin: 15px 0;
-					&:hover {
-						color: var(--el-color-primary);
-						cursor: pointer;
-					}
-				}
-				.dd-active {
-					color: var(--el-color-primary);
-				}
-				.dd-more {
-					font-size: 12px;
-					position: absolute;
-					right: 0;
-					top: 16px;
-					color: #a5a5a5;
-					&:hover {
-						cursor: pointer;
-						color: #8d8d91;
-					}
-				}
-			}
-		}
-	}
-	.br-top-no {
-		border-top: none;
-		.flex-warp {
-			display: flex;
-			flex-wrap: wrap;
-			align-content: flex-start;
-			margin: 0 -5px;
-			.flex-warp-item {
-				padding: 5px;
-				width: 100%;
-				height: 360px;
-				.flex-warp-item-box {
-					border: 1px solid var(--next-border-color-light);
-					width: 100%;
-					height: 100%;
-					border-radius: 2px;
-					display: flex;
-					flex-direction: column;
-					transition: all 0.3s ease;
-					&:hover {
-						cursor: pointer;
-						border: 1px solid var(--el-color-primary);
-						transition: all 0.3s ease;
-						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-						.item-txt-title {
-							color: var(--el-color-primary) !important;
-							transition: all 0.3s ease;
-						}
-						.item-img {
-							img {
-								transition: all 0.3s ease;
-								transform: translateZ(0) scale(1.05);
-							}
-						}
-					}
-					.item-img {
-						width: 100%;
-						height: 215px;
-						overflow: hidden;
-						img {
-							transition: all 0.3s ease;
-							width: 100%;
-							height: 100%;
-						}
-					}
-					.item-txt {
-						flex: 1;
-						padding: 15px;
-						display: flex;
-						flex-direction: column;
-						overflow: hidden;
-						.item-txt-title {
-							text-overflow: ellipsis;
-							overflow: hidden;
-							-webkit-line-clamp: 2;
-							-webkit-box-orient: vertical;
-							display: -webkit-box;
-							color: #666666;
-							transition: all 0.3s ease;
-							&:hover {
-								color: var(--el-color-primary);
-								text-decoration: underline;
-								transition: all 0.3s ease;
-							}
-						}
-						.item-txt-other {
-							flex: 1;
-							align-items: flex-end;
-							display: flex;
-							.item-txt-msg {
-								font-size: 12px;
-								color: #8d8d91;
-							}
-							.item-txt-price {
-								display: flex;
-								justify-content: space-between;
-								align-items: center;
-								.font-price {
-									color: #ff5000;
-									.font {
-										font-size: 22px;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-		:deep(.el-card__body) {
-			height: 100%;
-			.filtering-no-data {
-				display: flex;
-				height: 100%;
-				.no-data-box {
-					color: #cccccc;
-					margin: auto;
-					i {
-						font-size: 70px;
-					}
-					.no-txt {
-						font-size: 14px;
-						text-align: center;
-						margin-top: 15px;
-					}
-				}
-			}
-		}
-	}
-	.min-h-360 {
-		height: 360px;
-	}
-}
-</style>

src/views/pages/filtering/mock.ts

@@ -1,201 +0,0 @@
-// 导航数据
-export const filtering = [
-	{
-		title: '权限',
-		isMore: false,
-		isShowMore: false,
-		id: 0,
-		children: [
-			{
-				id: '01',
-				label: '全部',
-				active: true,
-			},
-			{
-				id: '02',
-				label: '普通用户',
-				active: false,
-			},
-			{
-				id: '03',
-				label: '管理员',
-				active: false,
-			},
-		],
-	},
-	{
-		title: '布局',
-		isMore: false,
-		isShowMore: false,
-		id: 1,
-		children: [
-			{
-				id: 11,
-				label: '全部',
-				active: true,
-			},
-			{
-				id: 12,
-				label: '默认',
-				active: false,
-			},
-			{
-				id: 13,
-				label: '经典',
-				active: false,
-			},
-			{
-				id: 14,
-				label: '横向',
-				active: false,
-			},
-			{
-				id: 15,
-				label: '分栏',
-				active: false,
-			},
-		],
-	},
-	{
-		title: '配置',
-		isMore: false,
-		isShowMore: false,
-		id: 2,
-		children: [
-			{
-				id: 21,
-				label: '全部',
-				active: true,
-			},
-			{
-				id: 22,
-				label: '开启 Breadcrumb',
-				active: false,
-			},
-			{
-				id: 23,
-				label: '开启 Tags-View',
-				active: false,
-			},
-			{
-				id: 24,
-				label: '固定 Header',
-				active: false,
-			},
-			{
-				id: 25,
-				label: '侧边栏 Logo',
-				active: false,
-			},
-			{
-				id: 26,
-				label: '开启折叠 NavMenu',
-				active: false,
-			},
-			{
-				id: 27,
-				label: '开启一个 NavMenu 展开',
-				active: false,
-			},
-			{
-				id: 28,
-				label: '登录用户头像',
-				active: false,
-			},
-		],
-	},
-];
-
-// 列表数据
-export const filterList = [
-	{
-		img: 'http://news.sznews.com/pic/2020-08/14/9d9c9a60-f0af-41aa-b617-683b07c87642.jpg',
-		title: '嘉陵江2020年第1号洪水”在嘉陵江支流涪江形成',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-	},
-	{
-		img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
-		title: '让《民法典》走近群众 盐田街道开展人民调解宣传活动',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
-		title: '记者手记：可可西里，“挪”向“藏羚羊大产房”的14个半小时',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
-		title: '以优异成绩庆祝深圳经济特区建立40周年',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
-		title: '草原上的“太阳姑娘”',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-	},
-	{
-		img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
-		title: '奇观天下|带你走进非洲野生动物观光第一目的地',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
-		title: '五角大楼发布“中国军力报告” 华春莹： 罔顾事实，充满偏见',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
-		title: '最新地铁消息汇总：4号线北延、2号线三期、8号线一期等今年通车',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
-		title: '9月1日深圳新增5例无症状感染者！钟南山这段话冲上热搜！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-	},
-	{
-		img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
-		title: '全能“小福宝” 为文明社区建设添砖加瓦',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-	},
-];

src/views/pages/formAdapt/index.vue

@@ -1,107 +0,0 @@
-<template>
-	<div class="form-adapt-container layout-pd">
-		<el-card shadow="hover" header="表单自适应演示(改变窗口查看效果)">
-			<el-form :model="state.form" size="default" label-width="100px" class="mt35 mb35">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="姓名">
-							<el-input v-model="state.form.name" placeholder="请输入姓名" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="用户归属部门">
-							<el-input v-model="state.form.email" placeholder="请输入用户归属部门" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="登陆账户名">
-							<el-input v-model="state.form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="职务">
-							<el-select v-model="state.form.occupation" placeholder="请选择职务" clearable class="w100">
-								<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
-								<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
-								<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="手机">
-							<el-input v-model="state.form.phone" placeholder="请输入手机" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="性别">
-							<el-select v-model="state.form.sex" placeholder="请选择性别" clearable class="w100">
-								<el-option label="男" value="1"></el-option>
-								<el-option label="女" value="2"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="登录密码">
-							<el-input v-model="state.form.phone1" placeholder="请输入登录密码" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="权限角色">
-							<el-input v-model="state.form.phone2" placeholder="请输入权限角色" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="创建用户">
-							<el-input v-model="state.form.phone3" placeholder="请输入创建用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="修改用户">
-							<el-input v-model="state.form.phone4" placeholder="请输入修改用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="所属用户">
-							<el-input v-model="state.form.phone5" placeholder="请输入所属用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="所属部门">
-							<el-input v-model="state.form.phone6" placeholder="请输入所属部门" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item>
-							<el-button type="primary">
-								<SvgIcon name="iconfont icon-biaodan" />
-								更新个人信息
-							</el-button>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesListAdapt">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	form: {
-		name: '',
-		email: '',
-		autograph: '',
-		occupation: '',
-		phone: '',
-		sex: '',
-		phone1: '',
-		phone2: '',
-		phone3: '',
-		phone4: '',
-		phone5: '',
-		phone6: '',
-	},
-});
-</script>

src/views/pages/formI18n/index.vue

@@ -1,53 +0,0 @@
-<template>
-	<div class="form-i18n-container layout-pd">
-		<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
-			<div style="text-align: center; margin-top: 15px">
-				<el-radio-group v-model="state.radio" size="default" @change="onRadioChange">
-					<el-radio-button label="zh-cn">中文简体</el-radio-button>
-					<el-radio-button label="en">英文</el-radio-button>
-					<el-radio-button label="zh-tw">中文繁体</el-radio-button>
-				</el-radio-group>
-			</div>
-			<el-form :model="state.form" size="default" label-width="100px" class="mt35 mb35">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.name')">
-							<el-input v-model="state.form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.email')">
-							<el-input v-model="state.form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.autograph')">
-							<el-input v-model="state.form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFormI18n">
-import { reactive } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-// 定义变量内容
-const { locale } = useI18n();
-const state = reactive({
-	radio: 'zh-cn',
-	form: {
-		name: '',
-		email: '',
-		autograph: '',
-	},
-});
-
-// 单选框改变时
-const onRadioChange = () => {
-	locale.value = state.radio;
-};
-</script>

src/views/pages/formRules/component/formRulesOne.vue

@@ -1,64 +0,0 @@
-<template>
-	<div class="form-rules-one-container">
-		<el-form :model="state.form" :rules="state.rules" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="姓名" prop="name">
-						<el-input v-model="state.form.name" placeholder="请输入姓名" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="邮箱" prop="email">
-						<el-input v-model="state.form.email" placeholder="请输入用户邮箱" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="登陆账户名" prop="autograph">
-						<el-input v-model="state.form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="职务" prop="occupation">
-						<el-select v-model="state.form.occupation" placeholder="请选择职务" clearable class="w100">
-							<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
-							<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
-							<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
-						</el-select>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFormRulesOne">
-import { reactive, onMounted } from 'vue';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	data: {
-		type: Object,
-		default: () => {},
-	},
-});
-
-// 定义变量内容
-const state = reactive({
-	form: { name: '', email: '', autograph: '', occupation: '' },
-	rules: {
-		name: { required: true, message: '请输入姓名', trigger: 'blur' },
-		email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
-		autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
-		occupation: { required: true, message: '请选择职务', trigger: 'change' },
-	},
-});
-
-// 赋值回显
-const initForm = () => {
-	state.form = props.data as TableRulesOneProps;
-};
-// 页面加载时
-onMounted(() => {
-	initForm();
-});
-</script>

src/views/pages/formRules/component/formRulesThree.vue

@@ -1,43 +0,0 @@
-<template>
-	<div class="form-rules-three-container">
-		<el-form :model="state.form" :rules="state.rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="创建用户" prop="createUser">
-						<el-input v-model="state.form.createUser" placeholder="请输入创建用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="修改用户" prop="editUser">
-						<el-input v-model="state.form.editUser" placeholder="请输入修改用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="所属用户" prop="user">
-						<el-input v-model="state.form.user" placeholder="请输入所属用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="所属部门" prop="department">
-						<el-input v-model="state.form.department" placeholder="请输入所属部门" clearable></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFormRulesThree">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	form: { createUser: '', editUser: '', user: '', department: '' },
-	rules: {
-		createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
-		editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
-		user: { required: true, message: '请输入所属用户', trigger: 'blur' },
-		department: { required: true, message: '请输入所属部门', trigger: 'blur' },
-	},
-});
-</script>

src/views/pages/formRules/component/formRulesTwo.vue

@@ -1,45 +0,0 @@
-<template>
-	<div class="form-rules-two-container">
-		<el-form :model="state.form" :rules="state.rules" ref="formRulesTwoRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="手机" prop="phone">
-						<el-input v-model="state.form.phone" placeholder="请输入手机" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="性别">
-						<el-select v-model="state.form.sex" placeholder="请选择性别" clearable class="w100">
-							<el-option label="男" value="1"></el-option>
-							<el-option label="女" value="2"></el-option>
-						</el-select>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="登录密码" prop="password">
-						<el-input v-model="state.form.password" placeholder="请输入登录密码" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="权限角色" prop="auth">
-						<el-input v-model="state.form.auth" placeholder="请输入权限角色" clearable></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFormRulesTwo">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	form: { phone: '', sex: '', password: '', auth: '' },
-	rules: {
-		phone: { required: true, message: '请输入手机', trigger: 'blur' },
-		password: { required: true, message: '请输入登录密码', trigger: 'blur' },
-		auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
-	},
-});
-</script>

src/views/pages/formRules/index.vue

@@ -1,71 +0,0 @@
-<template>
-	<div class="form-rules-container layout-pd">
-		<el-card shadow="hover" header="表单组件1"> <FormRulesOne :data="state.formRulesOneData" ref="pagesFormRulesOneRef" /></el-card>
-		<el-card shadow="hover" header="表单组件2" class="mt15"><FormRulesTwo ref="pagesFormRulesTwoRef" /> </el-card>
-		<el-card shadow="hover" header="表单组件3" class="mt15"> <FormRulesThree ref="pagesFormRulesThreeRef" /></el-card>
-		<el-row class="flex mt15">
-			<div class="flex-margin">
-				<el-button size="default" @click="onResetForm">
-					<SvgIcon name="ele-RefreshRight" />
-					重置表单
-				</el-button>
-				<el-button size="default" type="primary" @click="onSubmitForm">
-					<SvgIcon name="iconfont icon-shuxing" />
-					验证表单
-				</el-button>
-			</div>
-		</el-row>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesFormRules">
-import { defineAsyncComponent, reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-
-// 引入组件
-const FormRulesOne = defineAsyncComponent(() => import('/@/views/pages/formRules/component/formRulesOne.vue'));
-const FormRulesTwo = defineAsyncComponent(() => import('/@/views/pages/formRules/component/formRulesTwo.vue'));
-const FormRulesThree = defineAsyncComponent(() => import('/@/views/pages/formRules/component/formRulesThree.vue'));
-
-// 定义变量内容
-const pagesFormRulesOneRef = ref();
-const pagesFormRulesTwoRef = ref();
-const pagesFormRulesThreeRef = ref();
-const state = reactive({
-	formRulesOneData: {
-		name: 'lyt',
-		email: 'lyt123@.com',
-		autograph: 'lyt123456',
-		occupation: '1',
-	},
-});
-
-// 表单组件验证
-const formRulesValidate = (pageRef: RefType, sonRef: string) => {
-	return new Promise((resolve) => {
-		pageRef.value.$refs[sonRef].validate((valid: boolean) => {
-			if (valid) resolve(valid);
-		});
-	});
-};
-// 表单组件重置
-const formRulesResetFields = () => {
-	pagesFormRulesOneRef.value.$refs.formRulesOneRef.resetFields();
-	pagesFormRulesTwoRef.value.$refs.formRulesTwoRef.resetFields();
-	pagesFormRulesThreeRef.value.$refs.formRulesThreeRef.resetFields();
-};
-// 验证表单
-const onSubmitForm = () => {
-	Promise.all([
-		formRulesValidate(pagesFormRulesOneRef, 'formRulesOneRef'),
-		formRulesValidate(pagesFormRulesTwoRef, 'formRulesTwoRef'),
-		formRulesValidate(pagesFormRulesThreeRef, 'formRulesThreeRef'),
-	]).then(() => {
-		ElMessage.success('表单全部验证成功');
-	});
-};
-// 重置表单
-const onResetForm = () => {
-	formRulesResetFields();
-};
-</script>

src/views/pages/iocnfont/index.vue

@@ -1,81 +0,0 @@
-<template>
-	<div class="iconfont-container layout-pd">
-		<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${state.sheetsIconList.length}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in state.sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<i :class="v" class="iconfont"></i>
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesIocnfont">
-import { reactive, onMounted } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-
-// 定义变量内容
-const state = reactive({
-	sheetsIconList: [],
-});
-
-// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
-const initGetStyleSheets = () => {
-	initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
-};
-// 页面加载时
-onMounted(() => {
-	initGetStyleSheets();
-});
-</script>
-
-<style scoped lang="scss">
-.iconfont-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/pages/lazyImg/index.vue

@@ -1,185 +0,0 @@
-<template>
-	<div class="lazy-img-container layout-pd">
-		<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
-			<div class="flex-warp" v-if="state.tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in state.tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img" v-loading="v.loading">
-									<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<el-empty v-else description="暂无数据"></el-empty>
-			<template v-if="state.tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="state.tableData.param.pageNum"
-					:page-size="state.tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="state.tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesLazyImg">
-import { reactive, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import other from '/@/utils/other';
-import { filterList } from './mock';
-
-// 定义变量内容
-const router = useRouter();
-const state = reactive({
-	tableData: {
-		data: filterList,
-		total: 99,
-		loading: false,
-		param: {
-			pageNum: 1,
-			pageSize: 10,
-		},
-	},
-});
-
-// 当前列表项点击
-const onTableItemClick = (v: FilterListType) => {
-	router.push({
-		path: '/pages/filteringDetails',
-		query: { id: v.id },
-	});
-};
-// 分页点击
-const onHandleSizeChange = (val: number) => {
-	state.tableData.param.pageSize = val;
-};
-// 分页点击
-const onHandleCurrentChange = (val: number) => {
-	state.tableData.param.pageNum = val;
-};
-// 页面加载时
-onMounted(() => {
-	other.lazyImg('[data-lazy-img-list]', state.tableData.data);
-});
-</script>
-
-<style scoped lang="scss">
-.lazy-img-container {
-	.flex-warp {
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		margin: 0 -5px;
-		.flex-warp-item {
-			padding: 5px;
-			width: 100%;
-			height: 360px;
-			.flex-warp-item-box {
-				border: 1px solid var(--next-border-color-light);
-				width: 100%;
-				height: 100%;
-				border-radius: 2px;
-				display: flex;
-				flex-direction: column;
-				transition: all 0.3s ease;
-				&:hover {
-					cursor: pointer;
-					border: 1px solid var(--el-color-primary);
-					transition: all 0.3s ease;
-					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-					.item-txt-title {
-						color: var(--el-color-primary) !important;
-						transition: all 0.3s ease;
-					}
-					.item-img {
-						img {
-							transition: all 0.3s ease;
-							transform: translateZ(0) scale(1.05);
-						}
-					}
-				}
-				.item-img {
-					width: 100%;
-					height: 215px;
-					overflow: hidden;
-					img {
-						transition: all 0.3s ease;
-						width: 100%;
-						height: 100%;
-					}
-				}
-				.item-txt {
-					flex: 1;
-					padding: 15px;
-					display: flex;
-					flex-direction: column;
-					overflow: hidden;
-					.item-txt-title {
-						text-overflow: ellipsis;
-						overflow: hidden;
-						-webkit-line-clamp: 2;
-						-webkit-box-orient: vertical;
-						display: -webkit-box;
-						color: #666666;
-						transition: all 0.3s ease;
-						&:hover {
-							color: var(--el-color-primary);
-							text-decoration: underline;
-							transition: all 0.3s ease;
-						}
-					}
-					.item-txt-other {
-						flex: 1;
-						align-items: flex-end;
-						display: flex;
-						.item-txt-msg {
-							font-size: 12px;
-							color: #8d8d91;
-						}
-						.item-txt-price {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							.font-price {
-								color: #ff5000;
-								.font {
-									font-size: 22px;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>

src/views/pages/lazyImg/mock.ts

@@ -1,313 +0,0 @@
-// 列表数据
-export const filterList = [
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
-		title: '盛夏的那考河湿地公园！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
-		title: '民众前往中共一大纪念馆参观',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
-		title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-];

src/views/pages/listAdapt/index.vue

@@ -1,178 +0,0 @@
-<template>
-	<div class="list-adapt-container layout-pd">
-		<el-card shadow="hover" header="列表自适应演示(改变窗口查看效果)">
-			<div class="flex-warp" v-if="state.tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in state.tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img">
-									<img :src="v.img" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<el-empty v-else description="暂无数据"></el-empty>
-			<template v-if="state.tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="state.tableData.param.pageNum"
-					:page-size="state.tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="state.tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesListAdapt">
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { filterList } from './mock';
-
-// 定义变量内容
-const router = useRouter();
-const state = reactive({
-	tableData: {
-		data: filterList,
-		total: 99,
-		loading: false,
-		param: {
-			pageNum: 1,
-			pageSize: 10,
-		},
-	},
-});
-
-// 当前列表项点击
-const onTableItemClick = (v: FilterListType) => {
-	router.push({
-		path: '/pages/filteringDetails',
-		query: { id: v.id },
-	});
-};
-// 分页点击
-const onHandleSizeChange = (val: number) => {
-	state.tableData.param.pageSize = val;
-};
-// 分页点击
-const onHandleCurrentChange = (val: number) => {
-	state.tableData.param.pageNum = val;
-};
-</script>
-
-<style scoped lang="scss">
-.flex-warp {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-	margin: 0 -5px;
-	.flex-warp-item {
-		padding: 5px;
-		width: 100%;
-		height: 360px;
-		.flex-warp-item-box {
-			border: 1px solid var(--next-border-color-light);
-			width: 100%;
-			height: 100%;
-			border-radius: 2px;
-			display: flex;
-			flex-direction: column;
-			transition: all 0.3s ease;
-			&:hover {
-				cursor: pointer;
-				border: 1px solid var(--el-color-primary);
-				transition: all 0.3s ease;
-				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-				.item-txt-title {
-					color: var(--el-color-primary) !important;
-					transition: all 0.3s ease;
-				}
-				.item-img {
-					img {
-						transition: all 0.3s ease;
-						transform: translateZ(0) scale(1.05);
-					}
-				}
-			}
-			.item-img {
-				width: 100%;
-				height: 215px;
-				overflow: hidden;
-				img {
-					transition: all 0.3s ease;
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.item-txt {
-				flex: 1;
-				padding: 15px;
-				display: flex;
-				flex-direction: column;
-				overflow: hidden;
-				.item-txt-title {
-					text-overflow: ellipsis;
-					overflow: hidden;
-					-webkit-line-clamp: 2;
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					color: #666666;
-					transition: all 0.3s ease;
-					&:hover {
-						color: var(--el-color-primary);
-						text-decoration: underline;
-						transition: all 0.3s ease;
-					}
-				}
-				.item-txt-other {
-					flex: 1;
-					align-items: flex-end;
-					display: flex;
-					.item-txt-msg {
-						font-size: 12px;
-						color: #8d8d91;
-					}
-					.item-txt-price {
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-						.font-price {
-							color: #ff5000;
-							.font {
-								font-size: 22px;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>

src/views/pages/listAdapt/mock.ts

@@ -1,93 +0,0 @@
-// 列表数据
-export const filterList = [
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-	},
-];

src/views/pages/preview/index.vue

@@ -1,21 +0,0 @@
-<template>
-	<div class="preview-container layout-pd">
-		<el-card shadow="hover" header="element-plus 大图预览">
-			<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="state.url" :preview-src-list="state.srcList" title="点击查看大图预览" />
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesPreview">
-import { reactive } from 'vue';
-
-// 定义变量内容
-const state = reactive({
-	url: 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
-	srcList: [
-		'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500',
-		'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-		'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F582fc47531494.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671617723&t=024966ede9f71fb7c39f6b06a712c1e3',
-	],
-});
-</script>

src/views/pages/steps/index.vue

@@ -1,42 +0,0 @@
-<template>
-	<div class="steps-container layout-pd">
-		<el-card shadow="hover" header="element-plus 步骤条">
-			<el-steps :active="stepsActive">
-				<el-step title="第一步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-0_round_solid" :size="40" />
-					</template>
-				</el-step>
-				<el-step title="第二步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-2_round_solid" :size="40" />
-					</template>
-				</el-step>
-				<el-step title="第三步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-3_round_solid" :size="40" />
-					</template>
-				</el-step>
-			</el-steps>
-			<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
-			<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
-			<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
-			<el-button @click="onNextSteps" size="default" class="mt15" type="primary">
-				<SvgIcon name="iconfont icon-step" />
-				下一步
-			</el-button>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesSteps">
-import { ref } from 'vue';
-
-// 定义变量内容
-const stepsActive = ref(1);
-
-// 下一步点击
-const onNextSteps = () => {
-	if (stepsActive.value++ > 2) stepsActive.value = 1;
-};
-</script>

src/views/pages/tableRules/index.vue

@@ -1,107 +0,0 @@
-<template>
-	<div class="layout-pd">
-		<el-card shadow="hover" header="表单表格验证">
-			<el-form ref="tableRulesRef" :model="state.tableData" size="default">
-				<el-table :data="state.tableData.data" border class="module-table-uncollected">
-					<el-table-column
-						v-for="(item, index) in state.tableData.header"
-						:key="index"
-						show-overflow-tooltip
-						:prop="item.prop"
-						:width="item.width"
-						:label="item.label"
-					>
-						<template v-slot:header>
-							<span v-if="item.isRequired" class="color-danger">*</span>
-							<span class="pl5">{{ item.label }}</span>
-							<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
-								<i class="iconfont icon-quanxian" />
-							</el-tooltip>
-						</template>
-						<template v-slot="scope">
-							<el-form-item
-								:prop="`data.${scope.$index}.${item.prop}`"
-								:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
-							>
-								<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
-									<el-option v-for="sel in state.tableData.option" :key="sel.value" :label="sel.label" :value="sel.value" />
-								</el-select>
-								<el-date-picker
-									v-else-if="item.type === 'date'"
-									v-model="scope.row[item.prop]"
-									type="date"
-									placeholder="选择日期"
-									style="width: 100%"
-								/>
-								<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
-								<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
-									<template v-slot:suffix>
-										<i class="iconfont icon-shouye_dongtaihui" />
-									</template>
-								</el-input>
-							</el-form-item>
-						</template>
-					</el-table-column>
-				</el-table>
-			</el-form>
-			<el-row class="flex mt15">
-				<div class="flex-margin">
-					<el-button size="default" type="success" @click="onValidate(tableRulesRef)">表格验证</el-button>
-					<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
-				</div>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesTableRules">
-import { reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-import type { FormInstance } from 'element-plus';
-
-// 定义变量内容
-const tableRulesRef = ref<FormInstance>();
-const state = reactive<TableRulesState>({
-	tableData: {
-		data: [],
-		header: [
-			{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
-			{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
-			{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
-			{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
-			{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
-			{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
-			{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
-			{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
-		],
-		option: [
-			{ value: '选项1', label: '黄金糕' },
-			{ value: '选项2', label: '双皮奶' },
-			{ value: '选项3', label: '蚵仔煎' },
-		],
-	},
-});
-
-// 表格验证
-const onValidate = (formEl: FormInstance | undefined) => {
-	if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
-	if (!formEl) return;
-	formEl.validate((valid) => {
-		if (!valid) return ElMessage.warning('表格项必填未填');
-		ElMessage.success('全部验证通过');
-	});
-};
-// 新增一行
-const onAddRow = () => {
-	state.tableData.data.push({
-		a1: '',
-		a2: '',
-		a3: '',
-		a4: '',
-		a5: '',
-		a6: '',
-		a7: '',
-		a8: '',
-	});
-};
-</script>

src/views/pages/tree/index.vue

@@ -1,227 +0,0 @@
-<template>
-	<div class="tree-container layout-pd">
-		<el-card shadow="hover" header="element plus Tree 树形控件改成表格">
-			<div v-loading="state.treeLoading">
-				<div class="tree-head">
-					<div class="tree-head-check"><el-checkbox v-model="state.treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>
-					<div class="tree-head-one">商品 ID</div>
-					<div style="flex: 1; display: flex">
-						<div class="tree-head-two">商品名称</div>
-						<div class="tree-head-three">描述</div>
-					</div>
-				</div>
-				<el-tree :data="state.treeTableData" show-checkbox node-key="id" ref="treeTableRef" :props="state.treeDefaultProps" @check="onCheckTree">
-					<template #default="{ node, data }">
-						<span class="tree-custom-node">
-							<span style="flex: 1">{{ node.label }}</span>
-							<span v-if="data.isShow" style="flex: 1; display: flex">
-								<span style="flex: 1">{{ data.label1 }}</span>
-								<span style="flex: 1">{{ data.label2 }}</span>
-							</span>
-						</span>
-					</template>
-				</el-tree>
-			</div>
-			<el-button @click="onSelect" class="mt15" size="default" type="primary">
-				<SvgIcon name="iconfont icon-shuxingtu" />
-				选择元素
-			</el-button>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesTree">
-import { reactive, onBeforeMount, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-
-// 定义变量内容
-const treeTableRef = ref();
-const state = reactive({
-	treeCheckAll: false,
-	treeLoading: false,
-	treeTableData: [] as RowTreeType[],
-	treeDefaultProps: {
-		children: 'children',
-		label: 'label',
-	},
-	treeSelArr: [] as RowTreeType[],
-	treeLength: 0,
-});
-
-// 初始化树的长度
-const initTreeLengh = (arr: RowTreeType[]) => {
-	let count = 0;
-	arr.map((item) => {
-		if (item.children) {
-			count += item.children.length;
-		}
-	});
-	state.treeLength = count + arr.length;
-};
-// 全选改变时
-const onCheckAllChange = () => {
-	if (state.treeCheckAll) {
-		treeTableRef.value.setCheckedNodes(state.treeTableData);
-	} else {
-		treeTableRef.value.setCheckedKeys([]);
-	}
-};
-// 节点选中状态发生变化时的回调
-const onCheckTree = () => {
-	state.treeSelArr = [];
-	state.treeSelArr = treeTableRef.value.getCheckedNodes();
-	state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
-};
-// 选择元素按钮
-const onSelect = () => {
-	let treeArr = treeTableRef.value.getCheckedNodes();
-	if (treeArr.length <= 0) {
-		ElMessage.warning('请选择元素');
-		return;
-	} else {
-		// console.log(treeTableRef.value.getCheckedNodes());
-	}
-};
-// 初始化树模拟数据
-const getTreeData = () => {
-	state.treeTableData = [
-		{
-			id: 1,
-			label: '12987121',
-			label1: '好滋好味鸡蛋仔',
-			label2: '荷兰优质淡奶，奶香浓而不腻',
-			isShow: true,
-			children: [
-				{
-					id: 11,
-					label: '一级 1-1',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-				{
-					id: 12,
-					label: '一级 1-2',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-			],
-		},
-		{
-			id: 2,
-			label: '12987122',
-			label1: '好滋好味鸡蛋仔',
-			label2: '荷兰优质淡奶，奶香浓而不腻',
-			isShow: true,
-			children: [
-				{
-					id: 21,
-					label: '二级 2-1',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-				{
-					id: 22,
-					label: '二级 2-2',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-			],
-		},
-		{
-			id: 3,
-			label: '12987123',
-			label1: '好滋好味鸡蛋仔',
-			label2: '荷兰优质淡奶，奶香浓而不腻',
-			isShow: true,
-			children: [
-				{
-					id: 31,
-					label: '二级 3-1',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-				{
-					id: 32,
-					label: '二级 3-2',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-				{
-					id: 33,
-					label: '二级 3-3',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: false,
-				},
-			],
-		},
-	];
-	initTreeLengh(state.treeTableData);
-};
-// 页面加载前
-onBeforeMount(() => {
-	getTreeData();
-});
-</script>
-
-<style scoped lang="scss">
-.tree-container {
-	.tree-head {
-		height: 48px;
-		line-height: 48px;
-		border: 1px solid var(--next-border-color-light);
-		border-bottom: none;
-		display: flex;
-		padding-right: 8px;
-		font-weight: bold;
-		color: #909399;
-		.tree-head-check {
-			width: 38px;
-			text-align: right;
-		}
-		.tree-head-one,
-		.tree-head-two,
-		.tree-head-three {
-			flex: 1;
-		}
-		.tree-head-one {
-			padding-left: 8px;
-		}
-	}
-	.el-tree {
-		overflow: hidden;
-		border-bottom: 1px solid var(--next-border-color-light);
-		.tree-custom-node {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding-right: 8px;
-			width: 100%;
-		}
-		&:deep(.el-tree-node) {
-			border: 1px solid var(--next-border-color-light);
-			border-bottom: none;
-			color: #606266;
-			.el-tree-node__content {
-				line-height: 57px !important;
-				height: 57px !important;
-			}
-			.el-tree-node__children {
-				.el-tree-node {
-					border: none;
-				}
-				.el-tree-node__content {
-					border-top: 1px solid var(--next-border-color-light);
-				}
-			}
-		}
-	}
-}
-</style>

src/views/pages/waterfall/index.vue

@@ -1,164 +0,0 @@
-<template>
-	<div class="waterfall-container layout-pd">
-		<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
-			<div class="waterfall-first">
-				<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-		<el-card shadow="hover" header="瀑布屏（布局二）">
-			<div class="waterfall-last">
-				<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWaterfall">
-// 此处需有内容（注释也得），否则缓存将失败
-</script>
-
-<style scoped lang="scss">
-.waterfall-container {
-	.waterfall-first {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: 20px;
-		.waterfall-first-item {
-			width: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:nth-of-type(3n + 1) {
-				grid-row: auto / span 5;
-			}
-			&:nth-of-type(3n + 2) {
-				grid-row: auto / span 6;
-			}
-			&:nth-of-type(3n + 3) {
-				grid-row: auto / span 8;
-			}
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-	.waterfall-last {
-		display: grid;
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: minmax(188px, 20vmin);
-		grid-template-columns: 1fr;
-		.waterfall-last-item {
-			height: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-	@media (min-width: 576px) {
-		.waterfall-last {
-			grid-template-columns: repeat(7, 1fr);
-			.waterfall-last-item {
-				&:nth-of-type(9n + 9) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 8) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 7) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 6) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 5) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 4) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 3) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 2) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 1) {
-					grid-column: auto / span 2;
-				}
-			}
-		}
-	}
-	@media (min-width: 576px) and (min-width: 1024px) {
-		.waterfall-last {
-			grid-template-columns: repeat(14, 1fr);
-			.waterfall-last-item {
-				&:nth-of-type(15n + 15) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 14) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 13) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(15n + 12) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 11) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 10) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(15n + 9) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 8) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 7) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 6) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 5) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 4) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 3) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 2) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 1) {
-					grid-column: auto / span 2;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/pages/waves/index.vue

@@ -1,124 +0,0 @@
-<template>
-	<div class="preview-container layout-pd">
-		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 btn">
-			<el-row class="mb10" style="color: #808080">可选参数 v-waves=" |light|red|orange|purple|green|teal"</el-row>
-			<div class="flex-warp">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button size="default" v-waves>
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							默认效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" v-waves="'light'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							light 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="success" size="default" v-waves="'red'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							red 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="info" size="default" v-waves="'orange'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							orange 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="warning" size="default" v-waves="'purple'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							purple 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="danger" size="default" v-waves="'green'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							green 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" v-waves="'teal'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							teal 效果
-						</el-button>
-					</div>
-				</div>
-			</div>
-		</el-card>
-		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 div" class="mt15">
-			<div class="waterfall-first">
-				<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWaves">
-// 此处需有内容（注释也得），否则缓存将失败
-</script>
-
-<style scoped lang="scss">
-.preview-container {
-	.flex-warp {
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		margin: 0 -5px;
-		.flex-warp-item {
-			padding: 5px;
-			.flex-warp-item-box {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-	.waterfall-first {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: 20px;
-		.waterfall-first-item {
-			width: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:nth-of-type(3n + 1) {
-				grid-row: auto / span 5;
-			}
-			&:nth-of-type(3n + 2) {
-				grid-row: auto / span 6;
-			}
-			&:nth-of-type(3n + 3) {
-				grid-row: auto / span 8;
-			}
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-}
-</style>

src/views/pages/workflow/component/contextmenu/index.vue

@@ -1,111 +0,0 @@
-<template>
-	<transition name="el-zoom-in-center" ref="contextmenuRef">
-		<div
-			aria-hidden="true"
-			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
-			role="tooltip"
-			data-popper-placement="bottom"
-			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
-			:key="Math.random()"
-			v-show="state.isShow"
-		>
-			<ul class="el-dropdown-menu">
-				<li
-					v-for="(v, k) in state.dropdownList"
-					class="el-dropdown-menu__item"
-					aria-disabled="false"
-					tabindex="-1"
-					:key="k"
-					@click="onCurrentClick(v.contextMenuClickId)"
-				>
-					<SvgIcon :name="v.icon" />
-					<span>{{ v.txt }}{{ state.item.type === 'line' ? '线' : '节点' }}</span>
-				</li>
-			</ul>
-			<div class="el-popper__arrow" style="left: 10px"></div>
-		</div>
-	</transition>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowContextmenu">
-import { computed, reactive, onMounted, onUnmounted, ref } from 'vue';
-
-// 定义父组件传过来的值
-const props = defineProps({
-	dropdown: {
-		type: Object,
-		default: () => {
-			return { x: '', y: '' };
-		},
-	},
-});
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['current']);
-
-// 定义变量内容
-const contextmenuRef = ref();
-const state = reactive({
-	isShow: false,
-	dropdownList: [
-		{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
-		{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
-	],
-	item: {
-		type: 'node',
-	},
-	conn: {},
-});
-
-// 父级传过来的坐标 x,y 值
-const dropdowns = computed(() => {
-	return props.dropdown;
-});
-// 当前项菜单点击
-const onCurrentClick = (contextMenuClickId: number) => {
-	emit('current', Object.assign({}, { contextMenuClickId }, state.item), state.conn);
-};
-// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
-const openContextmenu = (item: WorkflowDrawerLabelType, conn = {}) => {
-	state.item = item;
-	state.conn = conn;
-	closeContextmenu();
-	setTimeout(() => {
-		state.isShow = true;
-	}, 10);
-};
-// 关闭右键菜单
-const closeContextmenu = () => {
-	state.isShow = false;
-};
-// 监听页面监听进行右键菜单的关闭
-onMounted(() => {
-	document.body.addEventListener('click', closeContextmenu);
-	document.body.addEventListener('contextmenu', closeContextmenu);
-});
-// 页面卸载时，移除右键菜单监听事件
-onUnmounted(() => {
-	document.body.removeEventListener('click', closeContextmenu);
-	document.body.removeEventListener('contextmenu', closeContextmenu);
-});
-
-// 暴露变量
-defineExpose({
-	openContextmenu,
-});
-</script>
-
-<style scoped lang="scss">
-.custom-contextmenu {
-	transform-origin: center top;
-	z-index: 2190;
-	position: fixed;
-	.el-dropdown-menu__item {
-		font-size: 12px !important;
-		white-space: nowrap;
-		i {
-			font-size: 12px !important;
-		}
-	}
-}
-</style>

src/views/pages/workflow/component/drawer/index.vue

@@ -1,63 +0,0 @@
-<template>
-	<div>
-		<el-drawer :title="`${state.nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="state.isOpen" size="320px">
-			<el-scrollbar>
-				<Lines v-if="state.nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
-				<Nodes v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
-			</el-scrollbar>
-		</el-drawer>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowDrawer">
-import { defineAsyncComponent, reactive, ref, nextTick } from 'vue';
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['label', 'node']);
-
-// 引入组件
-const Lines = defineAsyncComponent(() => import('./line.vue'));
-const Nodes = defineAsyncComponent(() => import('./node.vue'));
-
-// 定义变量内容
-const lineRef = ref();
-const nodeRef = ref();
-const state = reactive<WorkflowDrawerState>({
-	isOpen: false,
-	nodeData: {
-		type: 'node',
-	},
-	jsplumbConn: {},
-});
-
-// 打开抽屉
-const open = (item: WorkflowDrawerLabelType, conn: EmptyObjectType) => {
-	state.isOpen = true;
-	state.jsplumbConn = conn;
-	state.nodeData = item;
-	nextTick(() => {
-		setTimeout(() => {
-			if (item.type === 'line') lineRef.value.getParentData(item);
-			else nodeRef.value.getParentData(item);
-		}, 300);
-	});
-};
-// 关闭
-const close = () => {
-	state.isOpen = false;
-};
-// 线 label 内容改变时
-const onLineChange = (label: string) => {
-	state.jsplumbConn.label = label;
-	emit('label', state.jsplumbConn);
-};
-// 节点内容改变时
-const onNodeSubmit = (data: object) => {
-	emit('node', data);
-};
-
-// 暴露变量
-defineExpose({
-	open,
-});
-</script>

src/views/pages/workflow/component/drawer/line.vue

@@ -1,56 +0,0 @@
-<template>
-	<div class="pt15 pr15 pb15 pl15">
-		<el-form :model="state.line" size="default" label-width="50px">
-			<el-form-item label="来往">
-				<el-input v-model="state.line.contact" placeholder="来往" clearable disabled></el-input>
-			</el-form-item>
-			<el-form-item label="类型">
-				<el-input v-model="state.line.type" placeholder="类型" clearable disabled></el-input>
-			</el-form-item>
-			<el-form-item label="label">
-				<el-input v-model="state.line.label" placeholder="请输入label内容" clearable></el-input>
-			</el-form-item>
-			<el-form-item>
-				<el-button @click="onLineTextReset">
-					<SvgIcon name="ele-RefreshRight" />
-					重置
-				</el-button>
-				<el-button @click="onLineTextChange" type="primary">
-					<SvgIcon name="ele-Check" />
-					保存
-				</el-button>
-			</el-form-item>
-		</el-form>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowDrawerLine">
-import { reactive } from 'vue';
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['change', 'close']);
-
-// 定义变量内容
-const state = reactive<EmptyObjectType>({
-	line: {},
-});
-
-// 获取父组件数据
-const getParentData = (data: object) => {
-	state.line = data;
-};
-// 重置
-const onLineTextReset = () => {
-	state.line.label = '';
-};
-// 保存
-const onLineTextChange = () => {
-	emit('change', state.line.label);
-	emit('close');
-};
-
-// 暴露变量
-defineExpose({
-	getParentData,
-});
-</script>

src/views/pages/workflow/component/drawer/node.vue

@@ -1,254 +0,0 @@
-<template>
-	<div class="workflow-drawer-node">
-		<el-tabs type="border-card" v-model="state.tabsActive">
-			<!-- 节点编辑 -->
-			<el-tab-pane label="节点编辑" name="1">
-				<el-scrollbar>
-					<el-form :model="state.node" :rules="state.nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
-						<el-form-item label="数据id" prop="id">
-							<el-input v-model="state.node.id" placeholder="请输入数据id" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="节点id" prop="nodeId">
-							<el-input v-model="state.node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="类型" prop="type">
-							<el-input v-model="state.node.type" placeholder="请输入类型" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="left坐标" prop="left">
-							<el-input v-model="state.node.left" placeholder="请输入left坐标" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="top坐标" prop="top">
-							<el-input v-model="state.node.top" placeholder="请输入top坐标" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="icon图标" prop="icon">
-							<el-input v-model="state.node.icon" placeholder="请输入icon图标" clearable></el-input>
-						</el-form-item>
-						<el-form-item label="名称" prop="name">
-							<el-input v-model="state.node.name" placeholder="请输入名称" clearable></el-input>
-						</el-form-item>
-						<el-form-item>
-							<el-button class="mb15" @click="onNodeRefresh">
-								<SvgIcon name="ele-RefreshRight" />
-								重置
-							</el-button>
-							<el-button type="primary" class="mb15" @click="onNodeSubmit">
-								<SvgIcon name="ele-Check" />
-								保存
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</el-scrollbar>
-			</el-tab-pane>
-
-			<!-- 扩展表单 -->
-			<el-tab-pane label="扩展表单" name="2">
-				<el-scrollbar>
-					<el-form :model="state.form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
-						<el-form-item
-							:label="val.label"
-							:prop="val.prop"
-							v-for="(val, key) in state.node.from"
-							:key="key"
-							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
-						>
-							<el-input
-								v-model="state.form[val.prop]"
-								:placeholder="val.placeholder"
-								clearable
-								v-if="val.type === 'input'"
-								:disabled="val.disabled"
-							></el-input>
-							<el-select v-model="state.form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
-								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-							</el-select>
-							<el-checkbox-group v-model="state.form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
-								<el-checkbox label="美食推荐" name="type"></el-checkbox>
-								<el-checkbox label="统计分析" name="type"></el-checkbox>
-							</el-checkbox-group>
-						</el-form-item>
-						<el-form-item>
-							<el-button class="mb15" @click="onExtendRefresh">
-								<SvgIcon name="ele-RefreshRight" />
-								重置
-							</el-button>
-							<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="state.loading.extend">
-								<SvgIcon name="ele-Check" />
-								保存
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</el-scrollbar>
-			</el-tab-pane>
-
-			<!-- 图表可视化 -->
-			<el-tab-pane label="图表可视化" name="3">
-				<el-scrollbar>
-					<div class="flex-content-right">
-						<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
-					</div>
-				</el-scrollbar>
-			</el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowDrawerNode">
-import { reactive, ref, nextTick } from 'vue';
-import { ElMessage } from 'element-plus';
-import * as echarts from 'echarts';
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['submit', 'close']);
-
-// 定义变量内容
-const nodeFormRef = ref();
-const extendFormRef = ref();
-const chartsMonitorRef = ref();
-const state = reactive<WorkflowDrawerNodeState>({
-	node: {},
-	nodeRules: {
-		id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
-		nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
-		type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
-		left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
-		top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
-		icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
-		name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-	},
-	form: {
-		module: [],
-	},
-	tabsActive: '1',
-	loading: {
-		extend: false,
-	},
-});
-
-// 获取父组件数据
-const getParentData = (data: object) => {
-	state.tabsActive = '1';
-	state.node = data;
-	initChartsMonitor();
-};
-// 节点编辑-重置
-const onNodeRefresh = () => {
-	state.node.icon = '';
-	state.node.name = '';
-};
-// 节点编辑-保存
-const onNodeSubmit = () => {
-	nodeFormRef.value.validate((valid: boolean) => {
-		if (valid) {
-			emit('submit', state.node);
-			emit('close');
-		} else {
-			return false;
-		}
-	});
-};
-// 扩展表单-重置
-const onExtendRefresh = () => {
-	extendFormRef.value.resetFields();
-};
-// 扩展表单-保存
-const onExtendSubmit = () => {
-	extendFormRef.value.validate((valid: boolean) => {
-		if (valid) {
-			state.loading.extend = true;
-			setTimeout(() => {
-				state.loading.extend = false;
-				ElMessage.success('保存成功');
-				emit('close');
-			}, 1000);
-		} else {
-			return false;
-		}
-	});
-};
-// 图表可视化-初始化
-const initChartsMonitor = () => {
-	const myChart = echarts.init(chartsMonitorRef.value);
-	const numsOne = [];
-	const numsTwo = [];
-	for (let i = 0; i < 7; i++) {
-		numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
-		numsTwo.push(Math.floor(Math.random() * 52 + 1));
-	}
-	const option = {
-		grid: {
-			top: 50,
-			right: 30,
-			bottom: 30,
-			left: 50,
-		},
-		tooltip: {
-			trigger: 'axis',
-		},
-		xAxis: {
-			type: 'category',
-			boundaryGap: false,
-			data: numsOne,
-		},
-		yAxis: {
-			type: 'value',
-		},
-		series: [
-			{
-				itemStyle: {
-					color: '#289df5',
-					borderColor: '#289df5',
-					areaStyle: {
-						type: 'default',
-						opacity: 0.1,
-					},
-				},
-				data: numsTwo,
-				type: 'line',
-				areaStyle: {},
-			},
-		],
-	};
-	myChart.setOption(option);
-	nextTick(() => {
-		myChart.resize();
-	});
-};
-
-// 暴露变量
-defineExpose({
-	getParentData,
-});
-</script>
-
-<style scoped lang="scss">
-.workflow-drawer-node {
-	:deep {
-		.el-tabs {
-			box-shadow: unset;
-			border: unset;
-			.el-tabs__nav {
-				display: flex;
-				width: 100%;
-				.el-tabs__item {
-					flex: 1;
-					padding: unset;
-					text-align: center;
-					&:first-of-type.is-active {
-						border-left-color: transparent;
-					}
-					&:last-of-type.is-active {
-						border-right-color: transparent;
-					}
-				}
-			}
-			.el-tabs__content {
-				padding: 0;
-				height: calc(100vh - 90px);
-				.el-tab-pane {
-					height: 100%;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/pages/workflow/component/tool/help.vue

@@ -1,36 +0,0 @@
-<template>
-	<div class="workflow-tool-help">
-		<el-dialog v-model="isShow" width="769px">
-			<template #header>
-				<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
-			</template>
-			<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>
-			<div class="mt10">2、移动：鼠标移入到视图中的某个节点元素，鼠标形状改变时拖动改变位置。</div>
-			<div class="mt10">3、连线：鼠标移入到视图中的某个节点元素的icon(图标)，鼠标形状改变（变成"+"），按下鼠标左键进行拖线连接。</div>
-			<div class="mt10">4、节点：鼠标移入到视图中的某个节点元素，点击鼠标右键可进行删除、编辑节点。</div>
-			<div class="mt10 mb10">5、线条：鼠标移入到视图中的某个线条，线条颜色改变时，点击鼠标右键可进行删除、编辑线条。</div>
-		</el-dialog>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowToolHelp">
-import { ref } from 'vue';
-
-// 定义变量内容
-const isShow = ref(false);
-
-// 打开弹窗
-const open = () => {
-	isShow.value = true;
-};
-// 关闭弹窗
-const close = () => {
-	isShow.value = false;
-};
-
-// 暴露变量
-defineExpose({
-	open,
-	close,
-});
-</script>

src/views/pages/workflow/component/tool/index.vue

@@ -1,74 +0,0 @@
-<template>
-	<div class="workflow-tool">
-		<div class="pl15">{{ setToolTitle }}</div>
-		<div class="workflow-tool-right">
-			<div class="workflow-tool-icon" v-for="(v, k) in state.toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
-				<SvgIcon :name="v.icon" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflowTool">
-import { computed, reactive } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-
-// 定义子组件向父组件传值/事件
-const emit = defineEmits(['tool']);
-
-// 定义变量内容
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const state = reactive({
-	toolList: [
-		{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
-		{ icon: 'ele-Download', title: '下载', fnName: 'download' },
-		{ icon: 'ele-Check', title: '提交', fnName: 'submit' },
-		{ icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
-		{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
-		{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
-	],
-});
-
-// 设置 tool 标题
-const setToolTitle = computed(() => {
-	let { globalTitle } = themeConfig.value;
-	return `${globalTitle}工作流`;
-});
-// 顶部工具栏
-const onToolClick = (fnName: string) => {
-	emit('tool', fnName);
-};
-</script>
-
-<style scoped lang="scss">
-.workflow-tool {
-	height: 35px;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
-	color: var(--el-text-color-primary);
-	.workflow-tool-right {
-		flex: 1;
-		display: flex;
-		justify-content: flex-end;
-	}
-	&-icon {
-		padding: 0 10px;
-		cursor: pointer;
-		color: var(--next-bg-topBarColor);
-		height: 35px;
-		line-height: 35px;
-		display: flex;
-		align-items: center;
-		&:hover {
-			background: rgba(0, 0, 0, 0.04);
-			i {
-				display: inline-block;
-				animation: logoAnimation 0.3s ease-in-out;
-			}
-		}
-	}
-}
-</style>

src/views/pages/workflow/index.vue

@@ -1,631 +0,0 @@
-<template>
-	<div class="workflow-container layout-padding">
-		<div class="workflow-mask" v-if="state.isShow"></div>
-		<div class="layout-padding-auto layout-padding-view workflow-warp">
-			<div class="workflow">
-				<!-- 顶部工具栏 -->
-				<Tool @tool="onToolClick" />
-
-				<!-- 左侧导航区 -->
-				<div class="workflow-content">
-					<div class="workflow-left">
-						<el-scrollbar>
-							<div
-								ref="leftNavRefs"
-								v-for="val in state.leftNavList"
-								:key="val.id"
-								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
-								class="workflow-left-id"
-							>
-								<div class="workflow-left-title" @click="onTitleClick(val)">
-									<span>{{ val.title }}</span>
-									<SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" />
-								</div>
-								<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
-									<div class="workflow-left-item-icon">
-										<SvgIcon :name="v.icon" class="workflow-icon-drag" />
-										<div class="font10 pl5 name">{{ v.name }}</div>
-									</div>
-								</div>
-							</div>
-						</el-scrollbar>
-					</div>
-
-					<!-- 右侧绘画区 -->
-					<div class="workflow-right" ref="workflowRightRef">
-						<div
-							v-for="(v, k) in state.jsplumbData.nodeList"
-							:key="v.nodeId"
-							:id="v.nodeId"
-							:data-node-id="v.nodeId"
-							:class="v.class"
-							:style="{ left: v.left, top: v.top }"
-							@click="onItemCloneClick(k)"
-							@contextmenu.prevent="onContextmenu(v, k, $event)"
-						>
-							<div class="workflow-right-box" :class="{ 'workflow-right-active': state.jsPlumbNodeIndex === k }">
-								<div class="workflow-left-item-icon">
-									<SvgIcon :name="v.icon" class="workflow-icon-drag" />
-									<div class="font10 pl5 name">{{ v.name }}</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- 节点右键菜单 -->
-		<Contextmenu :dropdown="state.dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
-		<!-- 线右键菜单 -->
-		<Contextmenu :dropdown="state.dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
-		<!-- 抽屉表单、线 -->
-		<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />
-
-		<!-- 顶部工具栏-帮助弹窗 -->
-		<Help ref="helpRef" />
-	</div>
-</template>
-
-<script setup lang="ts" name="pagesWorkflow">
-import { defineAsyncComponent, reactive, onMounted, onUnmounted, nextTick, ref } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { jsPlumb } from 'jsplumb';
-import Sortable from 'sortablejs';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-import commonFunction from '/@/utils/commonFunction';
-import { leftNavList } from './js/mock';
-import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
-
-// 引入组件
-const Tool = defineAsyncComponent(() => import('./component/tool/index.vue'));
-const Contextmenu = defineAsyncComponent(() => import('./component/contextmenu/index.vue'));
-const Drawer = defineAsyncComponent(() => import('./component/drawer/index.vue'));
-const Help = defineAsyncComponent(() => import('./component/tool/help.vue'));
-
-// 定义变量内容
-const leftNavRefs = ref([]);
-const workflowRightRef = ref();
-const contextmenuNodeRef = ref();
-const contextmenuLineRef = ref();
-const drawerRef = ref();
-const helpRef = ref();
-const stores = useTagsViewRoutes();
-const storesThemeConfig = useThemeConfig();
-const { themeConfig } = storeToRefs(storesThemeConfig);
-const { copyText } = commonFunction();
-const state = reactive<WorkflowState>({
-	leftNavList: [],
-	dropdownNode: { x: '', y: '' },
-	dropdownLine: { x: '', y: '' },
-	isShow: false,
-	jsPlumb: null,
-	jsPlumbNodeIndex: null,
-	jsplumbDefaults,
-	jsplumbMakeSource,
-	jsplumbMakeTarget,
-	jsplumbConnect,
-	jsplumbData: {
-		nodeList: [],
-		lineList: [],
-	},
-});
-
-// 设置 宽度小于 768，不支持操
-const setClientWidth = () => {
-	const clientWidth = document.body.clientWidth;
-	clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
-};
-// 左侧导航-数据初始化
-const initLeftNavList = () => {
-	state.leftNavList = leftNavList;
-	state.jsplumbData = {
-		nodeList: [
-			{ nodeId: 'huej738hbji', left: '148px', top: '93px', class: 'workflow-right-clone', icon: 'iconfont icon-gongju', name: '引擎', id: '11' },
-			{
-				nodeId: '52kcszzyxrd',
-				left: '458px',
-				top: '203px',
-				class: 'workflow-right-clone',
-				icon: 'iconfont icon-shouye_dongtaihui',
-				name: '模版',
-				id: '12',
-			},
-			{
-				nodeId: 'nltskl6k4me',
-				left: '164px',
-				top: '350px',
-				class: 'workflow-right-clone',
-				icon: 'iconfont icon-zhongduancanshuchaxun',
-				name: '名称',
-				id: '13',
-			},
-		],
-		lineList: [
-			{ sourceId: 'huej738hbji', targetId: '52kcszzyxrd', label: '传送' },
-			{ sourceId: 'huej738hbji', targetId: 'nltskl6k4me', label: '' },
-		],
-	};
-};
-// 左侧导航-初始化拖动
-const initSortable = () => {
-	leftNavRefs.value.forEach((v) => {
-		Sortable.create(v as HTMLDivElement, {
-			group: {
-				name: 'vue-next-admin-1',
-				pull: 'clone',
-				put: false,
-			},
-			animation: 0,
-			sort: false,
-			draggable: '.workflow-left-item',
-			forceFallback: true,
-			onEnd: function (evt: any) {
-				const { name, icon, id } = evt.clone.dataset;
-				const { layerX, layerY, clientX, clientY } = evt.originalEvent;
-				const el = workflowRightRef.value!;
-				const { x, y, width, height } = el.getBoundingClientRect();
-				if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
-					ElMessage.warning('请把节点拖入到画布中');
-				} else {
-					// 节点id（唯一）
-					const nodeId = Math.random().toString(36).substr(2, 12);
-					// 处理节点数据
-					const node = {
-						nodeId,
-						left: `${layerX - 40}px`,
-						top: `${layerY - 15}px`,
-						class: 'workflow-right-clone',
-						name,
-						icon,
-						id,
-					};
-					// 右侧视图内容数组
-					state.jsplumbData.nodeList.push(node);
-					// 元素加载完毕时
-					nextTick(() => {
-						// 整个节点作为source或者target
-						state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
-						// // 整个节点作为source或者target
-						state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
-						// 设置节点可以拖拽（此处为id值，非class）
-						state.jsPlumb.draggable(nodeId, {
-							containment: 'parent',
-							stop: (el: any) => {
-								state.jsplumbData.nodeList.forEach((v) => {
-									if (v.nodeId === el.el.id) {
-										// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
-										v.left = `${el.pos[0]}px`;
-										v.top = `${el.pos[1]}px`;
-									}
-								});
-							},
-						});
-					});
-				}
-			},
-		});
-	});
-};
-// 初始化 jsPlumb
-const initJsPlumb = () => {
-	(<any>jsPlumb).ready(() => {
-		state.jsPlumb = (<any>jsPlumb).getInstance({
-			detachable: false,
-			Container: 'workflow-right',
-		});
-		state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
-		// 导入默认配置
-		state.jsPlumb.importDefaults(state.jsplumbDefaults);
-		// 会使整个jsPlumb立即重绘。
-		state.jsPlumb.setSuspendDrawing(false, true);
-		// 初始化节点、线的链接
-		initJsPlumbConnection();
-		// 点击线弹出右键菜单
-		state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
-			originalEvent.preventDefault();
-			const { sourceId, targetId } = conn;
-			const { clientX, clientY } = originalEvent;
-			state.dropdownLine.x = clientX;
-			state.dropdownLine.y = clientY;
-			const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
-			const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
-			v.type = 'line';
-			v.label = line.label;
-			contextmenuLineRef.value.openContextmenu(v, conn);
-		});
-		// 连线之前
-		state.jsPlumb.bind('beforeDrop', (conn: any) => {
-			const { sourceId, targetId } = conn;
-			const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
-			if (item) {
-				ElMessage.warning('关系已存在，不可重复连接');
-				return false;
-			} else {
-				return true;
-			}
-		});
-		// 连线时
-		state.jsPlumb.bind('connection', (conn: any) => {
-			const { sourceId, targetId } = conn;
-			state.jsplumbData.lineList.push({
-				sourceId,
-				targetId,
-				label: '',
-			});
-		});
-		// 删除连线时回调函数
-		state.jsPlumb.bind('connectionDetached', (conn: any) => {
-			const { sourceId, targetId } = conn;
-			state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
-				if (line.sourceId == sourceId && line.targetId == targetId) {
-					return false;
-				}
-				return true;
-			});
-		});
-	});
-};
-// 初始化节点、线的链接
-const initJsPlumbConnection = () => {
-	// 节点
-	state.jsplumbData.nodeList.forEach((v) => {
-		// 整个节点作为source或者target
-		state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
-		// 整个节点作为source或者target
-		state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
-		// 设置节点可以拖拽（此处为id值，非class）
-		state.jsPlumb.draggable(v.nodeId, {
-			containment: 'parent',
-			stop: (el: any) => {
-				state.jsplumbData.nodeList.forEach((v) => {
-					if (v.nodeId === el.el.id) {
-						// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
-						v.left = `${el.pos[0]}px`;
-						v.top = `${el.pos[1]}px`;
-					}
-				});
-			},
-		});
-	});
-	// 线
-	state.jsplumbData.lineList.forEach((v) => {
-		state.jsPlumb.connect(
-			{
-				source: v.sourceId,
-				target: v.targetId,
-				label: v.label,
-			},
-			state.jsplumbConnect
-		);
-	});
-};
-// 左侧导航-菜单标题点击
-const onTitleClick = (val: any) => {
-	val.isOpen = !val.isOpen;
-};
-// 右侧内容区-当前项点击
-const onItemCloneClick = (k: number) => {
-	state.jsPlumbNodeIndex = k;
-};
-// 右侧内容区-当前项右键菜单点击
-const onContextmenu = (v: any, k: number, e: MouseEvent) => {
-	state.jsPlumbNodeIndex = k;
-	const { clientX, clientY } = e;
-	state.dropdownNode.x = clientX;
-	state.dropdownNode.y = clientY;
-	v.type = 'node';
-	v.label = '';
-	let item: any = {};
-	state.leftNavList.forEach((l) => {
-		if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
-	});
-	v.from = item.form;
-	contextmenuNodeRef.value.openContextmenu(v);
-};
-// 右侧内容区-当前项右键菜单点击回调(节点)
-const onCurrentNodeClick = (item: any) => {
-	const { contextMenuClickId, nodeId } = item;
-	if (contextMenuClickId === 0) {
-		const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
-		state.jsplumbData.nodeList.splice(nodeIndex, 1);
-		state.jsPlumb.removeAllEndpoints(nodeId);
-		state.jsPlumbNodeIndex = null;
-	} else if (contextMenuClickId === 1) {
-		drawerRef.value.open(item);
-	}
-};
-// 右侧内容区-当前项右键菜单点击回调(线)
-const onCurrentLineClick = (item: any, conn: any) => {
-	const { contextMenuClickId } = item;
-	const { endpoints } = conn;
-	const intercourse: any = [];
-	endpoints.forEach((v: any) => {
-		intercourse.push({
-			id: v.element.id,
-			innerText: v.element.innerText,
-		});
-	});
-	item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
-	if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
-	else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
-};
-// 设置线的 label
-const setLineLabel = (obj: any) => {
-	const { sourceId, targetId, label } = obj;
-	const conn = state.jsPlumb.getConnections({
-		source: sourceId,
-		target: targetId,
-	})[0];
-	conn.setLabel(label);
-	if (!label || label === '') {
-		conn.addClass('workflow-right-empty-label');
-	} else {
-		conn.removeClass('workflow-right-empty-label');
-		conn.addClass('workflow-right-label');
-	}
-	state.jsplumbData.lineList.forEach((v) => {
-		if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
-	});
-};
-// 设置节点内容
-const setNodeContent = (obj: any) => {
-	const { nodeId, name, icon } = obj;
-	// 设置节点 name 与 icon
-	state.jsplumbData.nodeList.forEach((v) => {
-		if (v.nodeId === nodeId) {
-			v.name = name;
-			v.icon = icon;
-		}
-	});
-	// 重绘
-	nextTick(() => {
-		state.jsPlumb.setSuspendDrawing(false, true);
-	});
-};
-// 顶部工具栏-当前项点击
-const onToolClick = (fnName: String) => {
-	switch (fnName) {
-		case 'help':
-			onToolHelp();
-			break;
-		case 'download':
-			onToolDownload();
-			break;
-		case 'submit':
-			onToolSubmit();
-			break;
-		case 'copy':
-			onToolCopy();
-			break;
-		case 'del':
-			onToolDel();
-			break;
-		case 'fullscreen':
-			onToolFullscreen();
-			break;
-	}
-};
-// 顶部工具栏-帮助
-const onToolHelp = () => {
-	nextTick(() => {
-		helpRef.value.open();
-	});
-};
-// 顶部工具栏-下载
-const onToolDownload = () => {
-	const { globalTitle } = themeConfig.value;
-	const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
-	const aLink = document.createElement('a');
-	aLink.setAttribute('href', href);
-	aLink.setAttribute('download', `${globalTitle}工作流.json`);
-	aLink.click();
-	aLink.remove();
-	ElMessage.success('下载成功');
-};
-// 顶部工具栏-提交
-const onToolSubmit = () => {
-	// console.log(state.jsplumbData);
-	ElMessage.success('数据提交成功');
-};
-// 顶部工具栏-复制
-const onToolCopy = () => {
-	copyText(JSON.stringify(state.jsplumbData));
-};
-// 顶部工具栏-删除
-const onToolDel = () => {
-	ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
-		confirmButtonText: '清空',
-		cancelButtonText: '取消',
-	})
-		.then(() => {
-			state.jsplumbData.nodeList.forEach((v) => {
-				state.jsPlumb.removeAllEndpoints(v.nodeId);
-			});
-			nextTick(() => {
-				state.jsplumbData = {
-					nodeList: [],
-					lineList: [],
-				};
-				ElMessage.success('清空画布成功');
-			});
-		})
-		.catch(() => {});
-};
-// 顶部工具栏-全屏
-const onToolFullscreen = () => {
-	stores.setCurrenFullscreen(true);
-};
-// 页面加载时
-onMounted(async () => {
-	await initLeftNavList();
-	initSortable();
-	initJsPlumb();
-	setClientWidth();
-	window.addEventListener('resize', setClientWidth);
-});
-// 页面卸载时
-onUnmounted(() => {
-	window.removeEventListener('resize', setClientWidth);
-});
-</script>
-
-<style scoped lang="scss">
-.workflow-container {
-	position: relative;
-	.workflow-warp {
-		position: relative;
-	}
-	.workflow {
-		display: flex;
-		height: 100%;
-		width: 100%;
-		flex-direction: column;
-		position: absolute;
-		top: 0;
-		left: 0;
-		.workflow-content {
-			display: flex;
-			height: calc(100% - 35px);
-			.workflow-left {
-				width: 220px;
-				height: 100%;
-				border-right: 1px solid var(--el-border-color-light, #ebeef5);
-				:deep(.el-collapse-item__content) {
-					padding-bottom: 0;
-				}
-				.workflow-left-title {
-					height: 50px;
-					display: flex;
-					align-items: center;
-					padding: 0 10px;
-					border-top: 1px solid var(--el-border-color-light, #ebeef5);
-					color: var(--el-text-color-primary);
-					cursor: default;
-					span {
-						flex: 1;
-					}
-				}
-				.workflow-left-item {
-					display: inline-block;
-					width: calc(50% - 15px);
-					position: relative;
-					cursor: move;
-					margin: 0 0 10px 10px;
-					.workflow-left-item-icon {
-						height: 35px;
-						display: flex;
-						align-items: center;
-						transition: all 0.3s ease;
-						padding: 5px 10px;
-						border: 1px dashed transparent;
-						background: var(--next-bg-color);
-						border-radius: 3px;
-						i,
-						.name {
-							color: var(--el-text-color-secondary);
-							transition: all 0.3s ease;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							overflow: hidden;
-						}
-						&:hover {
-							transition: all 0.3s ease;
-							border: 1px dashed var(--el-color-primary);
-							background: var(--el-color-primary-light-9);
-							border-radius: 5px;
-							i,
-							.name {
-								transition: all 0.3s ease;
-								color: var(--el-color-primary);
-							}
-						}
-					}
-				}
-				& .workflow-left-id:first-of-type {
-					.workflow-left-title {
-						border-top: none;
-					}
-				}
-			}
-			.workflow-right {
-				flex: 1;
-				position: relative;
-				overflow: hidden;
-				height: 100%;
-				background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
-					linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
-				background-size: 10px 10px;
-				.workflow-right-clone {
-					position: absolute;
-					.workflow-right-box {
-						height: 35px;
-						align-items: center;
-						color: var(--el-text-color-secondary);
-						padding: 0 10px;
-						border-radius: 3px;
-						cursor: move;
-						transition: all 0.3s ease;
-						min-width: 94.5px;
-						background: var(--el-color-white);
-						border: 1px solid var(--el-border-color-light, #ebeef5);
-						.workflow-left-item-icon {
-							display: flex;
-							align-items: center;
-							height: 35px;
-						}
-						&:hover {
-							border: 1px dashed var(--el-color-primary);
-							background: var(--el-color-primary-light-9);
-							transition: all 0.3s ease;
-							color: var(--el-color-primary);
-							i {
-								cursor: Crosshair;
-							}
-						}
-					}
-					.workflow-right-active {
-						border: 1px dashed var(--el-color-primary);
-						background: var(--el-color-primary-light-9);
-						color: var(--el-color-primary);
-					}
-				}
-				:deep(.jtk-overlay):not(.aLabel) {
-					padding: 4px 10px;
-					border: 1px solid var(--el-border-color-light, #ebeef5) !important;
-					color: var(--el-text-color-secondary) !important;
-					background: var(--el-color-white) !important;
-					border-radius: 3px;
-					font-size: 10px;
-				}
-				:deep(.jtk-overlay.workflow-right-empty-label) {
-					display: none;
-				}
-			}
-		}
-	}
-	.workflow-mask {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		&::after {
-			content: '手机版不支持 jsPlumb 操作';
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1;
-			background: rgba(255, 255, 255, 0.9);
-			color: #666666;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-</style>

src/views/pages/workflow/js/config.ts

@@ -1,99 +0,0 @@
-// jsplumb 默认配置
-export const jsplumbDefaults = {
-	// 多个锚点 [源锚点，目标锚点]
-	Anchors: [
-		'Top',
-		'TopCenter',
-		'TopRight',
-		'TopLeft',
-		'Right',
-		'RightMiddle',
-		'Bottom',
-		'BottomCenter',
-		'BottomRight',
-		'BottomLeft',
-		'Left',
-		'LeftMiddle',
-	],
-	// 连线的容器id
-	Container: 'workflow-right',
-	// 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
-	Connector: ['Bezier', { curviness: 100 }],
-	// 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
-	ConnectionsDetachable: false,
-	// 删除线的时候节点不删除
-	DeleteEndpointsOnDetach: false,
-	//  每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
-	Endpoint: ['Blank', { Overlays: '' }],
-	// 连接中源和目标端点的默认外观
-	EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
-	// jsPlumb 的内部日志记录是否打开
-	LogEnabled: true,
-	// 连接器的默认外观
-	PaintStyle: {
-		stroke: '#E0E3E7',
-		strokeWidth: 1,
-		outlineStroke: 'transparent',
-		outlineWidth: 10,
-	},
-	// 用于配置任何可拖动元素的默认选项jsPlumb.draggable
-	DragOptions: { cursor: 'pointer', zIndex: 2000 },
-	// 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
-	Overlays: [
-		[
-			'Arrow',
-			{
-				width: 10, // 箭头尾部的宽度
-				length: 8, // 从箭头的尾部到头部的距离
-				location: 1, // 位置，建议使用0～1之间
-				direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
-				foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
-			},
-		],
-		[
-			'Label',
-			{
-				label: '',
-				location: 0.5,
-				cssClass: 'aLabel',
-			},
-		],
-	],
-	// 默认渲染模式 svg、canvas
-	RenderMode: 'svg',
-	// 悬停状态下连接的默认外观
-	HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
-	// 悬停状态下端点的默认外观
-	EndpointHoverStyle: { fill: 'red' },
-	// 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
-	Scope: 'jsPlumb_DefaultScope',
-};
-
-// 整个节点作为source或者target
-export const jsplumbMakeSource = {
-	// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
-	filter: '.workflow-icon-drag',
-	filterExclude: false,
-	anchor: 'Continuous',
-	// 是否允许自己连接自己
-	allowLoopback: true,
-	maxConnections: -1,
-};
-
-// 整个节点作为source或者target
-export const jsplumbMakeTarget = {
-	filter: '.workflow-icon-drag',
-	filterExclude: false,
-	// 是否允许自己连接自己
-	anchor: 'Continuous',
-	allowLoopback: true,
-	dropOptions: { hoverClass: 'ef-drop-hover' },
-};
-
-// 连线参数
-export const jsplumbConnect = {
-	isSource: true,
-	isTarget: true,
-	// 动态锚点、提供了4个方向 Continuous、AutoDefault
-	anchor: 'Continuous',
-};

src/views/pages/workflow/js/mock.ts

@@ -1,262 +0,0 @@
-// 左侧菜单导航数据
-export const leftNavList = [
-	{
-		title: '工作流',
-		icon: 'iconfont icon-shouye',
-		isOpen: true,
-		id: '1',
-		children: [
-			{
-				icon: 'iconfont icon-gongju',
-				name: '引擎',
-				id: '11',
-				form: [
-					{
-						type: 'input',
-						label: '客户姓名',
-						prop: 'name',
-						placeholder: '请输入客户姓名',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'select',
-						label: '性别',
-						prop: 'sex',
-						placeholder: '请选择性别',
-						required: true,
-						disabled: false,
-						options: [
-							{
-								value: '0',
-								label: '女',
-							},
-							{
-								value: '1',
-								label: '男',
-							},
-						],
-					},
-					{
-						type: 'input',
-						label: '员工编号',
-						prop: 'number',
-						placeholder: '请输入员工编号',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '办公电话',
-						prop: 'mobile',
-						placeholder: '请输入办公电话',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'select',
-						label: '权限分配',
-						prop: 'role',
-						placeholder: '请选择性别',
-						required: true,
-						disabled: false,
-						options: [
-							{
-								value: '0',
-								label: '编辑权限',
-							},
-							{
-								value: '1',
-								label: '删除权限',
-							},
-						],
-					},
-					{
-						type: 'checkbox',
-						label: '模块选择',
-						prop: 'module',
-						placeholder: '请选择模块',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-shouye_dongtaihui',
-				name: '模版',
-				id: '12',
-				form: [
-					{
-						type: 'input',
-						label: '等级',
-						prop: 'grade',
-						placeholder: '请输入等级',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '登记密码',
-						prop: 'password',
-						placeholder: '请输入登记密码',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-zhongduancanshuchaxun',
-				name: '名称',
-				id: '13',
-				form: [
-					{
-						type: 'input',
-						label: '数据表',
-						prop: 'dataSheet',
-						placeholder: '请输入数据表',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '字段配置',
-						prop: 'field',
-						placeholder: '请输入字段配置',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-zhongduancanshu',
-				name: '版本',
-				id: '14',
-				form: [
-					{
-						type: 'input',
-						label: '发布模板',
-						prop: 'publish',
-						placeholder: '请输入发布模板',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-bolangnengshiyanchang',
-				name: '建模',
-				id: '15',
-				form: [
-					{
-						type: 'input',
-						label: '内容模板',
-						prop: 'content',
-						placeholder: '请输入内容模板',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-xingqiu',
-				name: '节点',
-				id: '16',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称6',
-						prop: 'name16',
-					},
-				],
-			},
-		],
-	},
-	{
-		title: '流程',
-		isOpen: true,
-		icon: 'iconfont icon-caijian',
-		id: '2',
-		children: [
-			{
-				icon: 'iconfont icon-fuwenben',
-				name: '实例',
-				id: '21',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称7',
-						prop: 'name21',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-fuwenbenkuang',
-				name: '轨迹',
-				id: '22',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称8',
-						prop: 'name22',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-shangchuan',
-				name: '数据',
-				id: '23',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称9',
-						prop: 'name23',
-					},
-				],
-			},
-		],
-	},
-	{
-		title: '任务',
-		isOpen: true,
-		icon: 'iconfont icon-shuju',
-		id: '3',
-		children: [
-			{
-				icon: 'iconfont icon-icon-',
-				name: '参与人',
-				id: '31',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称1',
-						prop: 'name31',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-gerenzhongxin',
-				name: '执行人',
-				id: '32',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称2',
-						prop: 'name32',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-fangkuang',
-				name: '工单',
-				id: '33',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称3',
-						prop: 'name33',
-					},
-				],
-			},
-		],
-	},
-];

src/views/params/common/details.vue

@@ -1,18 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="flex-margin color-primary">
-				<div>paramsCommonDetails</div>
-				<div class="mt10 mb10">路径：path: {{ route.path }}</div>
-				<div>参数：query: {{ route.query }}</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="paramsCommonDetails">
-import { useRoute } from 'vue-router';
-
-// 定义变量内容
-const route = useRoute();
-</script>

src/views/params/common/index.vue

@@ -1,77 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="flex-margin" style="width: 400px">
-				<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
-					<template #extra>
-						<el-alert type="success" :closable="false" class="mb30">
-							<template #default>
-								<div>1、设置非国际化：格式：tagsViewName=xxx</div>
-								<br />
-								<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
-								<br />
-								<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
-								<br />
-								<div>
-									4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
-									<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
-								</div>
-							</template>
-						</el-alert>
-						<el-input v-model="state.tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
-						<el-input v-model="state.value" placeholder="请输入路由参数 id 值" clearable style="width: 400px"></el-input>
-						<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
-							<SvgIcon name="iconfont icon-putong" />
-							普通路由传参
-						</el-button>
-						<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
-							<SvgIcon name="iconfont icon-fuhao-zhongwen" />
-							{{ state.tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
-						</el-button>
-					</template>
-				</el-result>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="paramsCommon">
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-
-// 定义变量内容
-const router = useRouter();
-const state = reactive<ParamsState>({
-	value: '',
-	tagsViewName: '',
-	tagsViewNameIsI18n: false,
-});
-
-// 跳转到详情
-/**
- * 设置 tagsView 名称：
- * 传不同的 tagsViewName 值
- */
-const onGoDetailsClick = () => {
-	const params: EmptyObjectType = { id: state.value };
-	if (state.tagsViewName) params.tagsViewName = state.tagsViewName;
-	router.push({
-		path: '/params/common/details',
-		query: params,
-	});
-	state.value = '';
-};
-// 模拟测试内容
-const onChangeI18n = () => {
-	state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
-	if (state.tagsViewNameIsI18n) {
-		state.tagsViewName = JSON.stringify({
-			'zh-cn': '测试用',
-			en: 'test page',
-			'zh-tw': '測試用',
-		});
-	} else {
-		state.tagsViewName = '我是普通路由测试tagsViewName(非国际化)';
-	}
-};
-</script>

src/views/params/dynamic/details.vue

@@ -1,18 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="flex-margin color-primary">
-				<div>paramsDynamicDetails</div>
-				<div class="mt10 mb10">路径：path: {{ route.path }}</div>
-				<div>参数：params: {{ route.params }}</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="paramsDynamicDetails">
-import { useRoute } from 'vue-router';
-
-// 定义变量内容
-const route = useRoute();
-</script>

src/views/params/dynamic/index.vue

@@ -1,79 +0,0 @@
-<template>
-	<div class="layout-padding">
-		<div class="layout-padding-auto layout-padding-view">
-			<div class="flex-margin" style="width: 400px">
-				<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
-					<template #extra>
-						<el-alert type="success" :closable="false" class="mb30">
-							<template #default>
-								<div>1、设置非国际化：格式：tagsViewName=xxx</div>
-								<br />
-								<div>2、设置国际化：格式：tagsViewName=JSON.stringify({"zh-cn":"测试用","en":"test+page","zh-tw":"測試用"})</div>
-								<br />
-								<div>3、设置国际化后，去顶栏切换语言查看演示效果</div>
-								<br />
-								<div>
-									4、 <a href="https://gitee.com/q7but" target="_black">感谢@q7but</a>、
-									<a href="https://gitee.com/lyt-top/vue-next-admin/pulls/22/files" target="_black">!22 add 添加自定义 tagVIewName 拓展,支持国际化</a>
-								</div>
-							</template>
-						</el-alert>
-						<el-input v-model="state.tagsViewName" placeholder="请输入tagsView 名称" clearable class="mb15" style="width: 400px"></el-input>
-						<el-input v-model="state.value" placeholder="请输入路由参数id值" clearable style="width: 400px"></el-input>
-						<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
-							<SvgIcon name="iconfont icon-dongtai" />
-							动态路由传参
-						</el-button>
-						<el-button type="primary" size="default" class="mt15" @click="onChangeI18n">
-							<SvgIcon name="iconfont icon-fuhao-zhongwen" />
-							{{ state.tagsViewNameIsI18n ? '普通的演示' : '国际化演示' }}
-						</el-button>
-					</template>
-				</el-result>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts" name="paramsDynamic">
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-
-// 定义变量内容
-const router = useRouter();
-const state = reactive<ParamsState>({
-	value: '',
-	tagsViewName: '',
-	tagsViewNameIsI18n: false,
-});
-
-// 跳转到详情
-const onGoDetailsClick = () => {
-	if (!state.tagsViewName) return ElMessage.warning('动态路由tagsViewName为必填，因为路由配置了');
-	if (!state.value) return ElMessage.warning('路由参数id值为必填');
-	// name 值为路由中的 name
-	router.push({
-		name: 'paramsDynamicDetails',
-		params: {
-			t: 'vue-next-admin',
-			id: state.value,
-			tagsViewName: state.tagsViewName,
-		},
-	});
-	state.value = '';
-};
-// 模拟测试内容
-const onChangeI18n = () => {
-	state.tagsViewNameIsI18n = !state.tagsViewNameIsI18n;
-	if (state.tagsViewNameIsI18n) {
-		state.tagsViewName = JSON.stringify({
-			'zh-cn': '我是动态路由',
-			en: 'Im dynamic routing',
-			'zh-tw': '我是動態路由',
-		});
-	} else {
-		state.tagsViewName = '我是动态路由测试tagsViewName(非国际化)';
-	}
-};
-</script>

src/views/system/menu/dialog.vue

@@ -30,7 +30,7 @@
 					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 						<el-form-item label="菜单名称">
-							<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
+							<el-input v-model="state.ruleForm.meta.title" placeholder="格式：router.xxx" clearable></el-input>
 						</el-form-item>
 					</el-col>
 					<template v-if="state.ruleForm.menuType === 'menu'">

src/views/visualizing/mock/demo1.ts

@@ -1,51 +0,0 @@
-// 地图模拟数据
-export const echartsMapList = [
-	{ name: '深圳市人民政府', value: '100' },
-	{ name: '莲花山公园', value: '100' },
-	{ name: '世界之窗', value: '100' },
-	{ name: '华侨城欢乐谷', value: '100' },
-	{ name: '宝安区西乡', value: '100' },
-];
-
-// 地图经纬度数据
-export const echartsMapData: object = {
-	深圳市人民政府: [114.064524, 22.549225],
-	莲花山公园: [114.0658, 22.560072],
-	世界之窗: [113.979419, 22.540579],
-	华侨城欢乐谷: [113.986066, 22.548056],
-	宝安区西乡: [113.869053, 22.581714],
-};
-
-// 地图图片显示
-export const echartsMapImgs = [
-	{
-		url: 'https://img1.baidu.com/it/u=2425496005,2401702709&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
-		name: '深圳市人民政府',
-		add: '深圳市福田区福中三路市民中心C区',
-		dec: '深圳市人民政府是根据《中华人民共和国地方各级人民代表大会和地方各级人民政府组织法》设立的，是深圳市人民代表大会的执行机关，是深圳市的国家行政机关。',
-	},
-	{
-		url: 'https://img0.baidu.com/it/u=2666213152,2487785512&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
-		name: '莲花山公园',
-		add: '广东省深圳市福田区莲花街道莲花北社区红荔路6030号',
-		dec: '莲花山公园筹建于1992年10月10日 ，1997年6月23日正式对外局部开放。',
-	},
-	{
-		url: 'https://img1.baidu.com/it/u=1595204841,1838139326&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
-		name: '世界之窗',
-		add: '深圳市南山区深南大道9037号',
-		dec: '这里，世界首座实景拍摄悬空式球幕影院“飞跃美利坚””，为游客提供集休闲放松于一体的都市时尚生活空间。',
-	},
-	{
-		url: 'https://img0.baidu.com/it/u=1586832283,2276617306&fm=253&fmt=auto&app=138&f=JPEG?w=476&h=500',
-		name: '华侨城欢乐谷',
-		add: '广东省深圳市南山区沙河街道星河街社区侨城西街1号',
-		dec: '深圳欢乐谷注重满足人们参与、体验的新型诱游需求，营造出自然、清新、活泼、惊奇、热烈、刺激的休闲旅游氛围。',
-	},
-	{
-		url: 'https://img0.baidu.com/it/u=2899429152,3158963267&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200',
-		name: '宝安区西乡',
-		add: '西乡街道下辖25个社区',
-		dec: '西乡街道，隶属于广东省深圳市宝安区，位于宝安区西南部，东接石岩街道，南接新安街道，西至珠江口岸边，北接航城街道。',
-	},
-];

src/views/visualizing/mock/demo2.ts

@@ -1,131 +0,0 @@
-// 顶部下来菜单
-export const dropdownList: Array<object> = [
-	{
-		label: '广东省农业农村厅',
-	},
-	{
-		label: '广西省农业农村厅',
-	},
-	{
-		label: '四川省农业农村厅',
-	},
-	{
-		label: '湖北省农业农村厅',
-	},
-	{
-		label: '福建省农业农村厅',
-	},
-	{
-		label: '山东省农业农村厅',
-	},
-	{
-		label: '江西省农业农村厅',
-	},
-];
-
-// sky 天气
-export const skyList: Array<object> = [
-	{
-		v1: '时间',
-		v2: '天气',
-		v3: '温度',
-		v4: '湿度',
-		v5: '降水概率',
-		v6: '风向',
-		v7: '风力',
-		type: 'title',
-	},
-	{
-		v1: '今天',
-		v2: 'ele-Sunny',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-	{
-		v1: '明天',
-		v2: 'ele-Lightning',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-	{
-		v1: '后天',
-		v2: 'ele-Sunny',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-];
-
-// 当前设置状态
-export const dBtnList: Array<object> = [
-	{
-		v1: '地块A-灌溉',
-		v2: '阳光玫瑰种植',
-		v3: '126天',
-		v4: '设备在线',
-	},
-	{
-		v1: '地块B-收割',
-		v2: '阳光玫瑰种植',
-		v3: '360天',
-		v4: '设备预警',
-	},
-];
-
-// 当前设备监测
-export const chartData4List: Array<object> = [
-	{
-		label: '温度',
-	},
-	{
-		label: '光照',
-	},
-	{
-		label: '湿度',
-	},
-	{
-		label: '风力',
-	},
-	{
-		label: '张力',
-	},
-	{
-		label: '气压',
-	},
-];
-
-// 3DEarth 地图周围按钮组
-export const earth3DBtnList: Array<object> = [
-	{
-		topLevelClass: 'fixed-top',
-		icon: 'ele-MagicStick',
-		label: '环境监测',
-		type: 0,
-	},
-	{
-		topLevelClass: 'fixed-right',
-		icon: 'ele-MoonNight',
-		label: '精准管理',
-		type: 1,
-	},
-	{
-		topLevelClass: 'fixed-bottom',
-		icon: 'ele-TrendCharts',
-		label: '数据报表',
-		type: 2,
-	},
-	{
-		topLevelClass: 'fixed-left',
-		icon: 'ele-Van',
-		label: '产品追溯',
-		type: 3,
-	},
-];