From 4f9ddc6c26b5c28b2977a7e2e79c016dd31ed095 Mon Sep 17 00:00:00 2001
From: lyt <1105290566@qq.com>
Date: Fri, 10 Sep 2021 23:24:58 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.09.10:=E6=96=B0=E5=A2=9E=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E5=85=B7=E4=BD=93=E6=9F=A5=E7=9C=8BCHANGELOG?=
 =?UTF-8?q?.md'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  13 +
 README.md                                     |   1 +
 package.json                                  |  28 +-
 src/components/cropper/index.vue              |  10 +-
 src/components/dragVerify/dragVerify.vue      | 296 +++++++++++
 src/components/dragVerify/dragVerifyImg.vue   | 453 +++++++++++++++++
 .../dragVerify/dragVerifyImgChip.vue          | 473 ++++++++++++++++++
 .../dragVerify/dragVerifyImgRotate.vue        | 434 ++++++++++++++++
 src/i18n/lang/en.ts                           |   4 +
 src/i18n/lang/zh-cn.ts                        |   4 +
 src/i18n/lang/zh-tw.ts                        |   4 +
 src/layout/component/columnsAside.vue         |   4 +-
 src/layout/footer/index.vue                   |   2 +-
 src/layout/lockScreen/index.vue               |  22 +-
 src/layout/navBars/breadcrumb/setings.vue     |  15 +
 src/layout/navBars/tagsView/tagsView.vue      |  10 +-
 src/router/route.ts                           |  45 ++
 src/store/interface/index.ts                  |   1 +
 src/store/modules/themeConfig.ts              |   3 +-
 src/theme/app.scss                            |   4 +-
 src/theme/common/var.scss                     |   2 -
 src/theme/dark.scss                           |  48 ++
 src/theme/element.scss                        |   6 +-
 src/theme/iconSelector.scss                   |   6 +-
 src/theme/index.scss                          |   1 +
 src/theme/media/login.scss                    |  11 +
 src/views/chart/chart.scss                    |  20 +-
 src/views/error/401.vue                       |   8 +-
 src/views/error/404.vue                       |   8 +-
 src/views/fun/countup/index.vue               |   4 +-
 src/views/fun/dragVerify/index.vue            | 107 ++++
 src/views/fun/gridLayout/index.vue            |   2 +-
 src/views/home/index.vue                      |  24 +-
 src/views/login/index.vue                     |  33 +-
 src/views/pages/dynamicForm/index.vue         | 159 ++++++
 src/views/pages/dynamicForm/mock.ts           | 119 +++++
 src/views/pages/waterfall/index.vue           |   4 +-
 src/views/pages/waves/index.vue               |   2 +-
 src/views/pages/workflow/index.vue            | 143 ++++++
 src/views/pages/workflow/mock.ts              |  60 +++
 src/views/personal/index.vue                  |  16 +-
 src/views/visualizing/demo1.vue               |  10 +-
 vite.config.ts                                |   1 +
 43 files changed, 2509 insertions(+), 111 deletions(-)
 create mode 100644 src/components/dragVerify/dragVerify.vue
 create mode 100644 src/components/dragVerify/dragVerifyImg.vue
 create mode 100644 src/components/dragVerify/dragVerifyImgChip.vue
 create mode 100644 src/components/dragVerify/dragVerifyImgRotate.vue
 create mode 100644 src/theme/dark.scss
 create mode 100644 src/views/fun/dragVerify/index.vue
 create mode 100644 src/views/pages/dynamicForm/index.vue
 create mode 100644 src/views/pages/dynamicForm/mock.ts
 create mode 100644 src/views/pages/workflow/index.vue
 create mode 100644 src/views/pages/workflow/mock.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af40e224..789c9b1e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.1.0
+
+`2021.09.10`
+
+- 🌟 更新 依赖更新最新版本
+- 🎯 优化 小屏模式下登录页二维码遮挡标题问题
+- 🎉 新增 图片验证器
+- 🎉 新增 动态复杂表单
+- 🎉 新增 工作流（未完成）
+- 🎉 新增 深色主题(伪深色，样式变动大，谨慎更新)
+
+`2021.08.29`
+
 ## 1.0.18
 
 `2021.08.29`
diff --git a/README.md b/README.md
index b34ec221..489c6cb3 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,7 @@ cnpm run build
 - <a href="https://github.com/likaia/screen-shot" target="_blank">vue-web-screen-shot</a>
 - <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
 - <a href="https://github.com/antoniandre/splitpanes" target="_blank">splitpanes</a>
+- <a href="https://github.com/yimijianfang/vue-drag-verify" target="_blank">vue-drag-verify</a>
 
 #### 💕 特别感谢
 
diff --git a/package.json b/package.json
index 5c2dad72..ce9c9573 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,19 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.18",
+	"version": "1.1.0",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
 		"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
 	},
 	"dependencies": {
-		"axios": "^0.21.1",
+		"axios": "^0.21.4",
 		"countup.js": "^2.0.8",
 		"cropperjs": "^1.5.12",
-		"echarts": "^5.1.2",
+		"echarts": "^5.2.0",
 		"echarts-gl": "^2.0.8",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.1.0-beta.7",
+		"element-plus": "^1.1.0-beta.9",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -28,27 +28,27 @@
 		"vue-router": "^4.0.11",
 		"vue-web-screen-shot": "^1.2.0",
 		"vuex": "^4.0.2",
-		"wangeditor": "^4.7.7"
+		"wangeditor": "^4.7.8"
 	},
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.7.5",
+		"@types/node": "^16.9.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.29.3",
-		"@typescript-eslint/parser": "^4.29.3",
-		"@vitejs/plugin-vue": "^1.6.0",
-		"@vue/compiler-sfc": "^3.2.6",
+		"@typescript-eslint/eslint-plugin": "^4.31.0",
+		"@typescript-eslint/parser": "^4.31.0",
+		"@vitejs/plugin-vue": "^1.6.2",
+		"@vue/compiler-sfc": "^3.2.11",
 		"dotenv": "^10.0.0",
 		"eslint": "^7.32.0",
 		"eslint-plugin-vue": "^7.17.0",
-		"prettier": "^2.3.2",
-		"sass": "^1.38.2",
+		"prettier": "^2.4.0",
+		"sass": "^1.39.2",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.4.2",
-		"vite": "^2.5.1",
-		"vue-eslint-parser": "^7.10.0"
+		"vite": "^2.5.6",
+		"vue-eslint-parser": "^7.11.0"
 	},
 	"browserslist": [
 		"> 1%",
diff --git a/src/components/cropper/index.vue b/src/components/cropper/index.vue
index 082db12f..176931d9 100644
--- a/src/components/cropper/index.vue
+++ b/src/components/cropper/index.vue
@@ -98,12 +98,12 @@ export default {
 		display: inline-block;
 		height: 350px;
 		flex: 1;
-		border: 1px solid #ebeef5;
-		background: #fff;
+		border: var(--el-border-base);
+		background: var(--color-whites);
 		overflow: hidden;
 		background-repeat: no-repeat;
 		cursor: move;
-		border-radius: 3px;
+		border-radius: var(--el-border-radius-base);
 		.cropper-warp-left-img {
 			width: 100%;
 			height: 100%;
@@ -124,7 +124,7 @@ export default {
 				.cropper-warp-right-value-img {
 					width: 100px;
 					height: 100px;
-					border-radius: 100%;
+					border-radius: var(--el-border-radius-circle);
 					margin: auto;
 				}
 				.cropper-size {
@@ -135,7 +135,7 @@ export default {
 			.cropper-warp-right-label {
 				text-align: center;
 				font-size: 12px;
-				color: #666666;
+				color: var(--el-text-color-primary);
 				height: 30px;
 				line-height: 30px;
 			}
diff --git a/src/components/dragVerify/dragVerify.vue b/src/components/dragVerify/dragVerify.vue
new file mode 100644
index 00000000..ec474075
--- /dev/null
+++ b/src/components/dragVerify/dragVerify.vue
@@ -0,0 +1,296 @@
+<template>
+	<div
+		ref="dragVerify"
+		class="drag_verify"
+		:style="dragVerifyStyle"
+		@mousemove="dragMoving"
+		@mouseup="dragFinish"
+		@mouseleave="dragFinish"
+		@touchmove="dragMoving"
+		@touchend="dragFinish"
+	>
+		<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle"></div>
+		<div class="dv_text" :style="textStyle" ref="message">
+			<slot name="textBefore" v-if="$slots.textBefore"></slot>
+			{{ message }}
+			<slot name="textAfter" v-if="$slots.textAfter"></slot>
+		</div>
+
+		<div
+			class="dv_handler dv_handler_bg"
+			:class="{ goFirst: isOk }"
+			@mousedown="dragStart"
+			@touchstart="dragStart"
+			ref="handler"
+			:style="handlerStyle"
+		>
+			<i :class="handlerIcon"></i>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'dragVerify',
+	props: {
+		isPassing: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: Number,
+			default: 250,
+		},
+		height: {
+			type: Number,
+			default: 40,
+		},
+		text: {
+			type: String,
+			default: 'swiping to the right side',
+		},
+		successText: {
+			type: String,
+			default: 'success',
+		},
+		background: {
+			type: String,
+			default: '#eee',
+		},
+		progressBarBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		completedBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		circle: {
+			type: Boolean,
+			default: false,
+		},
+		radius: {
+			type: String,
+			default: '4px',
+		},
+		handlerIcon: {
+			type: String,
+		},
+		successIcon: {
+			type: String,
+		},
+		handlerBg: {
+			type: String,
+			default: '#fff',
+		},
+		textSize: {
+			type: String,
+			default: '14px',
+		},
+		textColor: {
+			type: String,
+			default: '#333',
+		},
+	},
+	mounted: function () {
+		const dragEl = this.$refs.dragVerify;
+		dragEl.style.setProperty('--textColor', this.textColor);
+		dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
+		dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
+		console.log(this.$slots);
+	},
+	computed: {
+		handlerStyle: function () {
+			return {
+				width: this.height + 'px',
+				height: this.height + 'px',
+				background: this.handlerBg,
+			};
+		},
+		message: function () {
+			return this.isPassing ? this.successText : this.text;
+		},
+		dragVerifyStyle: function () {
+			return {
+				width: this.width + 'px',
+				height: this.height + 'px',
+				lineHeight: this.height + 'px',
+				background: this.background,
+				borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
+			};
+		},
+		progressBarStyle: function () {
+			return {
+				background: this.progressBarBg,
+				height: this.height + 'px',
+				borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
+			};
+		},
+		textStyle: function () {
+			return {
+				height: this.height + 'px',
+				width: this.width + 'px',
+				fontSize: this.textSize,
+			};
+		},
+	},
+	data() {
+		return {
+			isMoving: false,
+			x: 0,
+			isOk: false,
+		};
+	},
+	methods: {
+		dragStart: function (e) {
+			if (!this.isPassing) {
+				this.isMoving = true;
+				this.x = e.pageX || e.touches[0].pageX;
+			}
+			this.$emit('handlerMove');
+		},
+		dragMoving: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.touches[0].pageX) - this.x;
+				var handler = this.$refs.handler;
+				if (_x > 0 && _x <= this.width - this.height) {
+					handler.style.left = _x + 'px';
+					this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
+				} else if (_x > this.width - this.height) {
+					handler.style.left = this.width - this.height + 'px';
+					this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
+					this.passVerify();
+				}
+			}
+		},
+		dragFinish: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
+				if (_x < this.width - this.height) {
+					this.isOk = true;
+					var that = this;
+					setTimeout(function () {
+						that.$refs.handler.style.left = '0';
+						that.$refs.progressBar.style.width = '0';
+						that.isOk = false;
+					}, 500);
+					this.$emit('passfail');
+				} else {
+					var handler = this.$refs.handler;
+					handler.style.left = this.width - this.height + 'px';
+					this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
+					this.passVerify();
+				}
+				this.isMoving = false;
+			}
+		},
+		passVerify: function () {
+			this.$emit('update:isPassing', true);
+			this.isMoving = false;
+			var handler = this.$refs.handler;
+			handler.children[0].className = this.successIcon;
+			this.$refs.progressBar.style.background = this.completedBg;
+			this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
+			this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
+			this.$refs.message.style.color = '#fff';
+			this.$emit('passcallback');
+		},
+		reset: function () {
+			const oriData = this.$options.data();
+			for (const key in oriData) {
+				if (Object.prototype.hasOwnProperty.call(oriData, key)) {
+					this[key] = oriData[key];
+				}
+			}
+			var handler = this.$refs.handler;
+			var message = this.$refs.message;
+			handler.style.left = '0';
+			this.$refs.progressBar.style.width = '0';
+			handler.children[0].className = this.handlerIcon;
+			message.style['-webkit-text-fill-color'] = 'transparent';
+			message.style.animation = 'slidetounlock 3s infinite';
+			message.style.color = this.background;
+		},
+	},
+};
+</script>
+<style scoped>
+.drag_verify {
+	position: relative;
+	background-color: #e8e8e8;
+	text-align: center;
+	overflow: hidden;
+}
+.drag_verify .dv_handler {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	cursor: move;
+}
+.drag_verify .dv_handler i {
+	color: #666;
+	padding-left: 0;
+	font-size: 16px;
+}
+.drag_verify .dv_handler .el-icon-circle-check {
+	color: #6c6;
+	margin-top: 9px;
+}
+.drag_verify .dv_progress_bar {
+	position: absolute;
+	height: 34px;
+	width: 0px;
+}
+.drag_verify .dv_text {
+	position: absolute;
+	top: 0px;
+	color: transparent;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(0, var(--textColor)),
+		color-stop(0.4, var(--textColor)),
+		color-stop(0.5, #fff),
+		color-stop(0.6, var(--textColor)),
+		color-stop(1, var(--textColor))
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-text-size-adjust: none;
+	animation: slidetounlock 3s infinite;
+}
+.drag_verify .dv_text * {
+	-webkit-text-fill-color: var(--textColor);
+}
+.goFirst {
+	left: 0px !important;
+	transition: left 0.5s;
+}
+.goFirst2 {
+	width: 0px !important;
+	transition: width 0.5s;
+}
+</style>
+<style>
+@-webkit-keyframes slidetounlock {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--width) 0;
+	}
+}
+@-webkit-keyframes slidetounlock2 {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--pwidth) 0;
+	}
+}
+</style>
diff --git a/src/components/dragVerify/dragVerifyImg.vue b/src/components/dragVerify/dragVerifyImg.vue
new file mode 100644
index 00000000..8bc1f3dc
--- /dev/null
+++ b/src/components/dragVerify/dragVerifyImg.vue
@@ -0,0 +1,453 @@
+<template>
+	<div class="drag-verify-container">
+		<div :style="dragVerifyImgStyle">
+			<img ref="checkImg" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
+			<div class="move-bar" :class="{ goFirst: isOk, goKeep: isKeep }" :style="movebarStyle" ref="moveBar" v-show="showBar"></div>
+			<div class="clip-bar" :style="clipbarStyle" ref="clipBar"></div>
+			<div class="refresh" v-if="showRefresh && !isPassing">
+				<i :class="refreshIcon" @click="refreshimg"></i>
+			</div>
+			<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
+			<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
+		</div>
+		<div
+			ref="dragVerify"
+			class="drag_verify"
+			:style="dragVerifyStyle"
+			@mousemove="dragMoving"
+			@mouseup="dragFinish"
+			@mouseleave="dragFinish"
+			@touchmove="dragMoving"
+			@touchend="dragFinish"
+		>
+			<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
+				{{ successMessage }}
+			</div>
+			<div class="dv_text" :style="textStyle" ref="message">
+				{{ message }}
+			</div>
+
+			<div
+				class="dv_handler dv_handler_bg"
+				:class="{ goFirst: isOk }"
+				@mousedown="dragStart"
+				@touchstart="dragStart"
+				ref="handler"
+				:style="handlerStyle"
+			>
+				<i :class="handlerIcon"></i>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'dragVerify',
+	props: {
+		isPassing: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: Number,
+			default: 250,
+		},
+		height: {
+			type: Number,
+			default: 40,
+		},
+		text: {
+			type: String,
+			default: 'swiping to the right side',
+		},
+		successText: {
+			type: String,
+			default: 'success',
+		},
+		background: {
+			type: String,
+			default: '#eee',
+		},
+		progressBarBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		completedBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		circle: {
+			type: Boolean,
+			default: false,
+		},
+		radius: {
+			type: String,
+			default: '4px',
+		},
+		handlerIcon: {
+			type: String,
+		},
+		successIcon: {
+			type: String,
+		},
+		handlerBg: {
+			type: String,
+			default: '#fff',
+		},
+		textSize: {
+			type: String,
+			default: '14px',
+		},
+		textColor: {
+			type: String,
+			default: '#333',
+		},
+		imgsrc: {
+			type: String,
+		},
+		barWidth: {
+			type: Number,
+			default: 70,
+		},
+		barHeight: {
+			type: Number,
+			default: 40,
+		},
+		barRadius: {
+			type: Number,
+			default: 2,
+		},
+		showRefresh: {
+			type: Boolean,
+			default: false,
+		},
+		refreshIcon: {
+			type: String,
+		},
+		showTips: {
+			type: Boolean,
+			default: true,
+		},
+		successTip: {
+			type: String,
+			default: '验证通过，超过80%用户',
+		},
+		failTip: {
+			type: String,
+			default: '验证未通过，拖动滑块将悬浮图像正确合并',
+		},
+		diffWidth: {
+			type: Number,
+			default: 20,
+		},
+	},
+	mounted: function () {
+		const dragEl = this.$refs.dragVerify;
+		dragEl.style.setProperty('--textColor', this.textColor);
+		dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
+		dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
+	},
+	computed: {
+		handlerStyle: function () {
+			return {
+				width: this.height + 'px',
+				height: this.height + 'px',
+				background: this.handlerBg,
+			};
+		},
+		message: function () {
+			return this.isPassing ? '' : this.text;
+		},
+		successMessage: function () {
+			return this.isPassing ? this.successText : '';
+		},
+		dragVerifyStyle: function () {
+			console.log(this.width, 'width');
+			return {
+				width: this.width + 'px',
+				height: this.height + 'px',
+				lineHeight: this.height + 'px',
+				background: this.background,
+				borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
+			};
+		},
+		dragVerifyImgStyle: function () {
+			return {
+				width: this.width + 'px',
+				position: 'relative',
+				overflow: 'hidden',
+			};
+		},
+		progressBarStyle: function () {
+			return {
+				background: this.progressBarBg,
+				height: this.height + 'px',
+				borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
+			};
+		},
+		textStyle: function () {
+			return {
+				height: this.height + 'px',
+				width: this.width + 'px',
+				fontSize: this.textSize,
+			};
+		},
+	},
+	data() {
+		return {
+			isMoving: false,
+			x: 0,
+			isOk: false,
+			isKeep: false,
+			movebarStyle: {},
+			clipbarStyle: {},
+			showBar: false,
+			clipBarx: 0,
+			showErrorTip: false,
+		};
+	},
+	methods: {
+		checkimgLoaded: function () {
+			//生成图片缺失位置
+			var barWidth = this.barWidth;
+			var barHeight = this.barHeight;
+			var imgHeight = this.$refs.checkImg.height;
+			var halfWidth = Math.floor(this.width / 2);
+			var refreshHeigth = 25;
+			var tipHeight = 20;
+			var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth));
+			var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barHeight - refreshHeigth - tipHeight));
+			this.clipbarStyle = {
+				width: barWidth + 'px',
+				height: barHeight + 'px',
+				top: y + 'px',
+				left: x + 'px',
+				'border-radius': this.barRadius + 'px',
+			};
+			this.clipBarx = x;
+			var imgsrc = this.imgsrc;
+			var width = this.width;
+			this.movebarStyle = {
+				background: `url(${imgsrc})`,
+				'background-position': `-${x}px -${y}px`,
+				'background-size': `${width}px`,
+				width: barWidth + 'px',
+				height: barHeight + 'px',
+				top: y + 'px',
+				'border-radius': this.barRadius + 'px',
+			};
+		},
+		dragStart: function (e) {
+			if (!this.isPassing) {
+				this.isMoving = true;
+				this.x = e.pageX || e.touches[0].pageX;
+			}
+			this.showBar = true;
+			this.showErrorTip = false;
+			this.$emit('handlerMove');
+		},
+		dragMoving: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.touches[0].pageX) - this.x;
+				var handler = this.$refs.handler;
+				handler.style.left = _x + 'px';
+				this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
+				this.$refs.moveBar.style.left = _x + 'px';
+			}
+		},
+		dragFinish: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
+				if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
+					this.isOk = true;
+					var that = this;
+					setTimeout(function () {
+						that.$refs.handler.style.left = '0';
+						that.$refs.progressBar.style.width = '0';
+						that.$refs.moveBar.style.left = '0';
+						that.isOk = false;
+					}, 500);
+					this.showErrorTip = true;
+					this.$emit('passfail');
+				} else {
+					this.passVerify();
+				}
+				this.isMoving = false;
+			}
+		},
+		passVerify: function () {
+			this.$emit('update:isPassing', true);
+			this.isMoving = false;
+			var handler = this.$refs.handler;
+			handler.children[0].className = this.successIcon;
+			this.$refs.progressBar.style.background = this.completedBg;
+			this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
+			this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
+			this.$refs.progressBar.style.color = '#fff';
+			this.$refs.progressBar.style.fontSize = this.textSize;
+			this.isKeep = true;
+			setTimeout(() => {
+				this.$refs.moveBar.style.left = this.clipBarx + 'px';
+				setTimeout(() => {
+					this.isKeep = false;
+				}, 200);
+			}, 100);
+			this.$emit('passcallback');
+		},
+		reset: function () {
+			this.reImg();
+			this.checkimgLoaded();
+		},
+		reImg: function () {
+			this.$emit('update:isPassing', false);
+			const oriData = this.$options.data();
+			for (const key in oriData) {
+				if (Object.prototype.hasOwnProperty.call(oriData, key)) {
+					this[key] = oriData[key];
+				}
+			}
+			var handler = this.$refs.handler;
+			var message = this.$refs.message;
+			handler.style.left = '0';
+			this.$refs.progressBar.style.width = '0';
+			handler.children[0].className = this.handlerIcon;
+			message.style['-webkit-text-fill-color'] = 'transparent';
+			message.style.animation = 'slidetounlock 3s infinite';
+			message.style.color = this.background;
+		},
+		refreshimg: function () {
+			this.$emit('refresh');
+		},
+	},
+	watch: {
+		imgsrc: {
+			immediate: false,
+			handler: function () {
+				this.reImg();
+			},
+		},
+	},
+};
+</script>
+<style scoped>
+.drag_verify {
+	position: relative;
+	background-color: #e8e8e8;
+	text-align: center;
+	overflow: hidden;
+}
+.drag_verify .dv_handler {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	cursor: move;
+}
+.drag_verify .dv_handler i {
+	color: #666;
+	padding-left: 0;
+	font-size: 16px;
+}
+.drag_verify .dv_handler .el-icon-circle-check {
+	color: #6c6;
+	margin-top: 9px;
+}
+.drag_verify .dv_progress_bar {
+	position: absolute;
+	height: 34px;
+	width: 0px;
+}
+.drag_verify .dv_text {
+	position: absolute;
+	top: 0px;
+	color: transparent;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(0, var(--textColor)),
+		color-stop(0.4, var(--textColor)),
+		color-stop(0.5, #fff),
+		color-stop(0.6, var(--textColor)),
+		color-stop(1, var(--textColor))
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-text-size-adjust: none;
+	animation: slidetounlock 3s infinite;
+}
+.drag_verify .dv_text * {
+	-webkit-text-fill-color: var(--textColor);
+}
+.goFirst {
+	left: 0px !important;
+	transition: left 0.5s;
+}
+.goKeep {
+	transition: left 0.2s;
+}
+.goFirst2 {
+	width: 0px !important;
+	transition: width 0.5s;
+}
+.drag-verify-container {
+	position: relative;
+	line-height: 0;
+}
+.move-bar {
+	position: absolute;
+	z-index: 100;
+}
+.clip-bar {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.8);
+}
+.refresh {
+	position: absolute;
+	right: 5px;
+	top: 5px;
+	cursor: pointer;
+	font-size: 20px;
+	z-index: 200;
+}
+.tips {
+	position: absolute;
+	bottom: 0;
+	height: 20px;
+	line-height: 20px;
+	text-align: center;
+	width: 100%;
+	font-size: 12px;
+	z-index: 200;
+}
+.tips.success {
+	background: rgba(255, 255, 255, 0.6);
+	color: green;
+}
+.tips.danger {
+	background: rgba(0, 0, 0, 0.6);
+	color: yellow;
+}
+</style>
+<style>
+@-webkit-keyframes slidetounlock {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--width) 0;
+	}
+}
+@-webkit-keyframes slidetounlock2 {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--pwidth) 0;
+	}
+}
+</style>
diff --git a/src/components/dragVerify/dragVerifyImgChip.vue b/src/components/dragVerify/dragVerifyImgChip.vue
new file mode 100644
index 00000000..d34fead8
--- /dev/null
+++ b/src/components/dragVerify/dragVerifyImgChip.vue
@@ -0,0 +1,473 @@
+<template>
+	<div class="drag-verify-container">
+		<div :style="dragVerifyImgStyle">
+			<img ref="checkImg" crossOrigin="anonymous" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
+			<canvas ref="maincanvas" class="main-canvas"></canvas>
+			<canvas ref="movecanvas" :class="{ goFirst: isOk, goKeep: isKeep }" class="move-canvas"></canvas>
+			<div class="refresh" v-if="showRefresh && !isPassing">
+				<i :class="refreshIcon" @click="refreshimg"></i>
+			</div>
+			<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
+			<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
+		</div>
+		<div
+			ref="dragVerify"
+			class="drag_verify"
+			:style="dragVerifyStyle"
+			@mousemove="dragMoving"
+			@mouseup="dragFinish"
+			@mouseleave="dragFinish"
+			@touchmove="dragMoving"
+			@touchend="dragFinish"
+		>
+			<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
+				{{ successMessage }}
+			</div>
+			<div class="dv_text" :style="textStyle" ref="message">
+				{{ message }}
+			</div>
+
+			<div
+				class="dv_handler dv_handler_bg"
+				:class="{ goFirst: isOk }"
+				@mousedown="dragStart"
+				@touchstart="dragStart"
+				ref="handler"
+				:style="handlerStyle"
+			>
+				<i :class="handlerIcon"></i>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'dragVerifyImgChip',
+	props: {
+		isPassing: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: Number,
+			default: 250,
+		},
+		height: {
+			type: Number,
+			default: 40,
+		},
+		text: {
+			type: String,
+			default: 'swiping to the right side',
+		},
+		successText: {
+			type: String,
+			default: 'success',
+		},
+		background: {
+			type: String,
+			default: '#eee',
+		},
+		progressBarBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		completedBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		circle: {
+			type: Boolean,
+			default: false,
+		},
+		radius: {
+			type: String,
+			default: '4px',
+		},
+		handlerIcon: {
+			type: String,
+		},
+		successIcon: {
+			type: String,
+		},
+		handlerBg: {
+			type: String,
+			default: '#fff',
+		},
+		textSize: {
+			type: String,
+			default: '14px',
+		},
+		textColor: {
+			type: String,
+			default: '#333',
+		},
+		imgsrc: {
+			type: String,
+		},
+		barWidth: {
+			type: Number,
+			default: 40,
+		},
+		barRadius: {
+			type: Number,
+			default: 8,
+		},
+		showRefresh: {
+			type: Boolean,
+			default: false,
+		},
+		refreshIcon: {
+			type: String,
+		},
+		showTips: {
+			type: Boolean,
+			default: true,
+		},
+		successTip: {
+			type: String,
+			default: '验证通过，超过80%用户',
+		},
+		failTip: {
+			type: String,
+			default: '验证未通过，拖动滑块将悬浮图像正确合并',
+		},
+		diffWidth: {
+			type: Number,
+			default: 20,
+		},
+	},
+	mounted: function () {
+		const dragEl = this.$refs.dragVerify;
+		dragEl.style.setProperty('--textColor', this.textColor);
+		dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
+		dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
+	},
+	computed: {
+		handlerStyle: function () {
+			return {
+				width: this.height + 'px',
+				height: this.height + 'px',
+				background: this.handlerBg,
+			};
+		},
+		message: function () {
+			return this.isPassing ? '' : this.text;
+		},
+		successMessage: function () {
+			return this.isPassing ? this.successText : '';
+		},
+		dragVerifyStyle: function () {
+			return {
+				width: this.width + 'px',
+				height: this.height + 'px',
+				lineHeight: this.height + 'px',
+				background: this.background,
+				borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
+			};
+		},
+		dragVerifyImgStyle: function () {
+			return {
+				width: this.width + 'px',
+				position: 'relative',
+				overflow: 'hidden',
+			};
+		},
+		progressBarStyle: function () {
+			return {
+				background: this.progressBarBg,
+				height: this.height + 'px',
+				borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
+			};
+		},
+		textStyle: function () {
+			return {
+				height: this.height + 'px',
+				width: this.width + 'px',
+				fontSize: this.textSize,
+			};
+		},
+	},
+	data() {
+		return {
+			isMoving: false,
+			x: 0,
+			isOk: false,
+			isKeep: false,
+			clipBarx: 0,
+			showErrorTip: false,
+		};
+	},
+	methods: {
+		draw: function (ctx, x, y, operation) {
+			var l = this.barWidth;
+			var r = this.barRadius;
+			const PI = Math.PI;
+			ctx.beginPath();
+			ctx.moveTo(x, y);
+			ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
+			ctx.lineTo(x + l, y);
+			ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
+			ctx.lineTo(x + l, y + l);
+			ctx.lineTo(x, y + l);
+			ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
+			ctx.lineTo(x, y);
+			ctx.lineWidth = 2;
+			ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+			ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+			ctx.stroke();
+			ctx[operation]();
+			ctx.globalCompositeOperation = 'destination-over';
+		},
+		checkimgLoaded: function () {
+			// 生成图片缺失位置
+			var barWidth = this.barWidth;
+			var imgHeight = this.$refs.checkImg.height;
+			var imgWidth = this.$refs.checkImg.width;
+			var halfWidth = Math.floor(this.width / 2);
+			var refreshHeigth = 25;
+			var tipHeight = 20;
+			var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth - this.barRadius - 5));
+			var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barWidth - refreshHeigth - tipHeight));
+			this.$refs.maincanvas.setAttribute('width', imgWidth);
+			this.$refs.maincanvas.setAttribute('height', imgHeight);
+			this.$refs.maincanvas.style.display = 'block';
+			var canvasCtx = this.$refs.maincanvas.getContext('2d');
+			this.draw(canvasCtx, x, y, 'fill');
+			this.clipBarx = x;
+			var moveCanvas = this.$refs.movecanvas;
+			moveCanvas.setAttribute('width', imgWidth);
+			moveCanvas.setAttribute('height', imgHeight);
+			this.$refs.movecanvas.style.display = 'block';
+			const L = barWidth + this.barRadius * 2 + 3; //实际宽度
+			var moveCtx = this.$refs.movecanvas.getContext('2d');
+			moveCtx.clearRect(0, 0, imgWidth, imgHeight);
+			this.draw(moveCtx, x, y, 'clip');
+			moveCtx.drawImage(this.$refs.checkImg, 0, 0, imgWidth, imgHeight);
+			var y = y - this.barRadius * 2 - 1;
+			const ImageData = moveCtx.getImageData(x, y, L, L);
+			moveCanvas.setAttribute('width', L);
+			moveCanvas.setAttribute('height', imgHeight);
+			moveCtx.putImageData(ImageData, 0, y);
+		},
+		dragStart: function (e) {
+			if (!this.isPassing) {
+				this.isMoving = true;
+				this.x = e.pageX || e.touches[0].pageX;
+			}
+			this.showBar = true;
+			this.showErrorTip = false;
+			this.$emit('handlerMove');
+		},
+		dragMoving: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.touches[0].pageX) - this.x;
+				var handler = this.$refs.handler;
+				handler.style.left = _x + 'px';
+				this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
+				this.$refs.movecanvas.style.left = _x + 'px';
+			}
+		},
+		dragFinish: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
+				if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
+					this.isOk = true;
+					var that = this;
+					setTimeout(function () {
+						that.$refs.handler.style.left = '0';
+						that.$refs.progressBar.style.width = '0';
+						that.$refs.movecanvas.style.left = '0';
+						that.isOk = false;
+					}, 500);
+					this.$emit('passfail');
+					this.showErrorTip = true;
+				} else {
+					this.passVerify();
+				}
+				this.isMoving = false;
+			}
+		},
+		passVerify: function () {
+			this.$emit('update:isPassing', true);
+			this.isMoving = false;
+			var handler = this.$refs.handler;
+			handler.children[0].className = this.successIcon;
+			this.$refs.progressBar.style.background = this.completedBg;
+			this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
+			this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
+			this.$refs.progressBar.style.color = '#fff';
+			this.$refs.progressBar.style.fontSize = this.textSize;
+			this.isKeep = true;
+			setTimeout(() => {
+				this.$refs.movecanvas.style.left = this.clipBarx + 'px';
+				setTimeout(() => {
+					this.isKeep = false;
+					this.$refs.maincanvas.style.display = 'none';
+					this.$refs.movecanvas.style.display = 'none';
+				}, 200);
+			}, 100);
+			this.$emit('passcallback');
+		},
+		reset: function () {
+			this.reImg();
+			this.checkimgLoaded();
+		},
+		reImg: function () {
+			this.$emit('update:isPassing', false);
+			const oriData = this.$options.data();
+			for (const key in oriData) {
+				if (Object.prototype.hasOwnProperty.call(oriData, key)) {
+					this[key] = oriData[key];
+				}
+			}
+			var handler = this.$refs.handler;
+			var message = this.$refs.message;
+			handler.style.left = '0';
+			this.$refs.progressBar.style.width = '0';
+			handler.children[0].className = this.handlerIcon;
+			message.style['-webkit-text-fill-color'] = 'transparent';
+			message.style.animation = 'slidetounlock 3s infinite';
+			message.style.color = this.background;
+			this.$refs.movecanvas.style.left = '0px';
+		},
+		refreshimg: function () {
+			this.$emit('refresh');
+		},
+	},
+	watch: {
+		imgsrc: {
+			immediate: false,
+			handler: function () {
+				this.reImg();
+			},
+		},
+	},
+};
+</script>
+<style scoped>
+.drag_verify {
+	position: relative;
+	background-color: #e8e8e8;
+	text-align: center;
+	overflow: hidden;
+}
+.drag_verify .dv_handler {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	cursor: move;
+}
+.drag_verify .dv_handler i {
+	color: #666;
+	padding-left: 0;
+	font-size: 16px;
+}
+.drag_verify .dv_handler .el-icon-circle-check {
+	color: #6c6;
+	margin-top: 9px;
+}
+.drag_verify .dv_progress_bar {
+	position: absolute;
+	height: 34px;
+	width: 0px;
+}
+.drag_verify .dv_text {
+	position: absolute;
+	top: 0px;
+	color: transparent;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(0, var(--textColor)),
+		color-stop(0.4, var(--textColor)),
+		color-stop(0.5, #fff),
+		color-stop(0.6, var(--textColor)),
+		color-stop(1, var(--textColor))
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-text-size-adjust: none;
+	animation: slidetounlock 3s infinite;
+}
+.drag_verify .dv_text * {
+	-webkit-text-fill-color: var(--textColor);
+}
+.goFirst {
+	left: 0px !important;
+	transition: left 0.5s;
+}
+.goKeep {
+	transition: left 0.2s;
+}
+.goFirst2 {
+	width: 0px !important;
+	transition: width 0.5s;
+}
+.drag-verify-container {
+	position: relative;
+	line-height: 0;
+}
+.refresh {
+	position: absolute;
+	right: 5px;
+	top: 5px;
+	cursor: pointer;
+	font-size: 20px;
+	z-index: 200;
+}
+.tips {
+	position: absolute;
+	bottom: 0;
+	height: 20px;
+	line-height: 20px;
+	text-align: center;
+	width: 100%;
+	font-size: 12px;
+	z-index: 200;
+}
+.tips.success {
+	background: rgba(255, 255, 255, 0.6);
+	color: green;
+}
+.tips.danger {
+	background: rgba(0, 0, 0, 0.6);
+	color: yellow;
+}
+.main-canvas {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.move-canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+</style>
+<style>
+@-webkit-keyframes slidetounlock {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--width) 0;
+	}
+}
+@-webkit-keyframes slidetounlock2 {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--pwidth) 0;
+	}
+}
+</style>
diff --git a/src/components/dragVerify/dragVerifyImgRotate.vue b/src/components/dragVerify/dragVerifyImgRotate.vue
new file mode 100644
index 00000000..c3f70506
--- /dev/null
+++ b/src/components/dragVerify/dragVerifyImgRotate.vue
@@ -0,0 +1,434 @@
+<template>
+	<div class="drag-verify-container">
+		<div :style="dragVerifyImgStyle">
+			<img ref="checkImg" :src="imgsrc" class="check-img" :class="{ goOrigin: isOk }" @load="checkimgLoaded" :style="imgStyle" alt="" />
+			<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
+			<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
+		</div>
+		<div
+			ref="dragVerify"
+			class="drag_verify"
+			:style="dragVerifyStyle"
+			@mousemove="dragMoving"
+			@mouseup="dragFinish"
+			@mouseleave="dragFinish"
+			@touchmove="dragMoving"
+			@touchend="dragFinish"
+		>
+			<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
+				{{ successMessage }}
+			</div>
+			<div class="dv_text" :style="textStyle" ref="message">
+				{{ message }}
+			</div>
+
+			<div
+				class="dv_handler dv_handler_bg"
+				:class="{ goFirst: isOk }"
+				@mousedown="dragStart"
+				@touchstart="dragStart"
+				ref="handler"
+				:style="handlerStyle"
+			>
+				<i :class="handlerIcon"></i>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'dragVerify',
+	props: {
+		isPassing: {
+			type: Boolean,
+			default: false,
+		},
+		width: {
+			type: Number,
+			default: 250,
+		},
+		height: {
+			type: Number,
+			default: 40,
+		},
+		text: {
+			type: String,
+			default: 'swiping to the right side',
+		},
+		successText: {
+			type: String,
+			default: 'success',
+		},
+		background: {
+			type: String,
+			default: '#eee',
+		},
+		progressBarBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		completedBg: {
+			type: String,
+			default: '#76c61d',
+		},
+		circle: {
+			type: Boolean,
+			default: false,
+		},
+		radius: {
+			type: String,
+			default: '4px',
+		},
+		handlerIcon: {
+			type: String,
+		},
+		successIcon: {
+			type: String,
+		},
+		handlerBg: {
+			type: String,
+			default: '#fff',
+		},
+		textSize: {
+			type: String,
+			default: '14px',
+		},
+		textColor: {
+			type: String,
+			default: '#333',
+		},
+		imgsrc: {
+			type: String,
+		},
+		showTips: {
+			type: Boolean,
+			default: true,
+		},
+		successTip: {
+			type: String,
+			default: '验证通过',
+		},
+		failTip: {
+			type: String,
+			default: '验证失败',
+		},
+		diffDegree: {
+			type: Number,
+			default: 10,
+		},
+		minDegree: {
+			type: Number,
+			default: 90,
+		},
+		maxDegree: {
+			type: Number,
+			default: 270,
+		},
+	},
+	mounted: function () {
+		const dragEl = this.$refs.dragVerify;
+		dragEl.style.setProperty('--textColor', this.textColor);
+		dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
+		dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
+	},
+	computed: {
+		handlerStyle: function () {
+			return {
+				width: this.height + 'px',
+				height: this.height + 'px',
+				background: this.handlerBg,
+			};
+		},
+		message: function () {
+			return this.isPassing ? '' : this.text;
+		},
+		successMessage: function () {
+			return this.isPassing ? this.successText : '';
+		},
+		dragVerifyStyle: function () {
+			return {
+				width: this.width + 'px',
+				height: this.height + 'px',
+				lineHeight: this.height + 'px',
+				background: this.background,
+				borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
+			};
+		},
+		dragVerifyImgStyle: function () {
+			return {
+				width: this.width + 'px',
+				height: this.width + 'px',
+				position: 'relative',
+				overflow: 'hidden',
+				'border-radius': '50%',
+			};
+		},
+		progressBarStyle: function () {
+			return {
+				background: this.progressBarBg,
+				height: this.height + 'px',
+				borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
+			};
+		},
+		textStyle: function () {
+			return {
+				height: this.height + 'px',
+				width: this.width + 'px',
+				fontSize: this.textSize,
+			};
+		},
+		factor: function () {
+			//避免指定旋转角度时一直拖动到最右侧才验证通过
+			if (this.minDegree == this.maxDegree) {
+				return Math.floor(1 + Math.random() * 6) / 10 + 1;
+			}
+			return 1;
+		},
+	},
+	data() {
+		return {
+			isMoving: false,
+			x: 0,
+			isOk: false,
+			showBar: false,
+			showErrorTip: false,
+			ranRotate: 0,
+			cRotate: 0,
+			imgStyle: {},
+		};
+	},
+	methods: {
+		checkimgLoaded: function () {
+			//生成旋转角度
+			var minDegree = this.minDegree;
+			var maxDegree = this.maxDegree;
+			var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree)); //生成随机角度
+			this.ranRotate = ranRotate;
+			console.log('旋转' + ranRotate);
+			this.imgStyle = {
+				transform: `rotateZ(${ranRotate}deg)`,
+			};
+		},
+		dragStart: function (e) {
+			if (!this.isPassing) {
+				this.isMoving = true;
+				this.x = e.pageX || e.touches[0].pageX;
+			}
+			this.showBar = true;
+			this.showErrorTip = false;
+			this.$emit('handlerMove');
+		},
+		dragMoving: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				var _x = (e.pageX || e.touches[0].pageX) - this.x;
+				console.log(_x, '_x');
+				var handler = this.$refs.handler;
+				handler.style.left = _x + 'px';
+				this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
+				var cRotate = Math.ceil((_x / (this.width - this.height)) * this.maxDegree * this.factor);
+				console.log(cRotate, 'cRotate');
+				this.cRotate = cRotate;
+				var rotate = this.ranRotate - cRotate;
+				this.imgStyle = {
+					transform: `rotateZ(${rotate}deg)`,
+				};
+			}
+		},
+		dragFinish: function (e) {
+			if (this.isMoving && !this.isPassing) {
+				if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
+					this.isOk = true;
+					this.imgStyle = {
+						transform: `rotateZ(${this.ranRotate}deg)`,
+					};
+					var that = this;
+					setTimeout(function () {
+						that.$refs.handler.style.left = '0';
+						that.$refs.progressBar.style.width = '0';
+						that.isOk = false;
+					}, 500);
+					this.showErrorTip = true;
+					this.$emit('passfail');
+				} else {
+					this.passVerify();
+				}
+				this.isMoving = false;
+			}
+		},
+		passVerify: function () {
+			this.$emit('update:isPassing', true);
+			this.isMoving = false;
+			var handler = this.$refs.handler;
+			handler.children[0].className = this.successIcon;
+			this.$refs.progressBar.style.background = this.completedBg;
+			this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
+			this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
+			this.$refs.progressBar.style.color = '#fff';
+			this.$refs.progressBar.style.fontSize = this.textSize;
+			this.$emit('passcallback');
+		},
+		reset: function () {
+			this.reImg();
+			this.checkimgLoaded();
+		},
+		reImg: function () {
+			this.$emit('update:isPassing', false);
+			const oriData = this.$options.data();
+			for (const key in oriData) {
+				if (Object.prototype.hasOwnProperty.call(oriData, key)) {
+					this[key] = oriData[key];
+				}
+			}
+			var handler = this.$refs.handler;
+			var message = this.$refs.message;
+			handler.style.left = '0';
+			this.$refs.progressBar.style.width = '0';
+			handler.children[0].className = this.handlerIcon;
+			message.style['-webkit-text-fill-color'] = 'transparent';
+			message.style.animation = 'slidetounlock 3s infinite';
+			message.style.color = this.background;
+		},
+		refreshimg: function () {
+			this.$emit('refresh');
+		},
+	},
+	watch: {
+		imgsrc: {
+			immediate: false,
+			handler: function () {
+				this.reImg();
+			},
+		},
+	},
+};
+</script>
+<style scoped>
+.drag_verify {
+	position: relative;
+	background-color: #e8e8e8;
+	text-align: center;
+	overflow: hidden;
+}
+.drag_verify .dv_handler {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	cursor: move;
+}
+.drag_verify .dv_handler i {
+	color: #666;
+	padding-left: 0;
+	font-size: 16px;
+}
+.drag_verify .dv_handler .el-icon-circle-check {
+	color: #6c6;
+	margin-top: 9px;
+}
+.drag_verify .dv_progress_bar {
+	position: absolute;
+	height: 34px;
+	width: 0px;
+}
+.drag_verify .dv_text {
+	position: absolute;
+	top: 0px;
+	color: transparent;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
+	-o-user-select: none;
+	-ms-user-select: none;
+	background: -webkit-gradient(
+		linear,
+		left top,
+		right top,
+		color-stop(0, var(--textColor)),
+		color-stop(0.4, var(--textColor)),
+		color-stop(0.5, #fff),
+		color-stop(0.6, var(--textColor)),
+		color-stop(1, var(--textColor))
+	);
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	-webkit-text-size-adjust: none;
+	animation: slidetounlock 3s infinite;
+}
+.drag_verify .dv_text * {
+	-webkit-text-fill-color: var(--textColor);
+}
+.goFirst {
+	left: 0px !important;
+	transition: left 0.5s;
+}
+.goOrigin {
+	transition: transform 0.5s;
+}
+.goKeep {
+	transition: left 0.2s;
+}
+.goFirst2 {
+	width: 0px !important;
+	transition: width 0.5s;
+}
+.drag-verify-container {
+	position: relative;
+	line-height: 0;
+	border-radius: 50%;
+}
+.move-bar {
+	position: absolute;
+	z-index: 100;
+}
+.clip-bar {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.8);
+}
+.refresh {
+	position: absolute;
+	right: 5px;
+	top: 5px;
+	cursor: pointer;
+	font-size: 20px;
+	z-index: 200;
+}
+.tips {
+	position: absolute;
+	bottom: 25px;
+	height: 20px;
+	line-height: 20px;
+	text-align: center;
+	width: 100%;
+	font-size: 12px;
+	z-index: 200;
+}
+.tips.success {
+	background: rgba(255, 255, 255, 0.6);
+	color: green;
+}
+.tips.danger {
+	background: rgba(0, 0, 0, 0.6);
+	color: yellow;
+}
+.check-img {
+	width: 100%;
+	border-radius: 50%;
+}
+</style>
+<style>
+@-webkit-keyframes slidetounlock {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--width) 0;
+	}
+}
+@-webkit-keyframes slidetounlock2 {
+	0% {
+		background-position: var(--pwidth) 0;
+	}
+	100% {
+		background-position: var(--pwidth) 0;
+	}
+}
+</style>
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 0b1f1b80..152de08f 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -34,6 +34,7 @@ export default {
 		funScreenShort: 'screenCapture',
 		funGridLayout: 'Drag layout',
 		funSplitpanes: 'Pane splitter',
+		funDragVerify: 'Validator',
 		pagesIndex: 'pages',
 		pagesFiltering: 'Filtering',
 		pagesFilteringDetails: 'FilteringDetails',
@@ -45,6 +46,8 @@ export default {
 		pagesFormAdapt: 'FormAdapt',
 		pagesFormI18n: 'FormI18n',
 		pagesFormRules: 'Multi form validation',
+		pagesDynamicForm: 'Dynamic complex form',
+		pagesWorkflow: 'Workflow',
 		pagesListAdapt: 'ListAdapt',
 		pagesWaterfall: 'Waterfall',
 		pagesSteps: 'Steps',
@@ -153,6 +156,7 @@ export default {
 		fourIsFooter: 'Open footer',
 		fourIsGrayscale: 'Grey model',
 		fourIsInvert: 'Color weak mode',
+		fourIsDark: 'Dark Mode',
 		fourIsWartermark: 'Turn on watermark',
 		fourWartermarkText: 'Watermark copy',
 		fiveTitle: 'Other settings',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index c456f0a4..a3a79463 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -34,6 +34,7 @@ export default {
 		funScreenShort: 'web端自定义截屏',
 		funGridLayout: '拖拽布局',
 		funSplitpanes: '窗格拆分器',
+		funDragVerify: '验证器',
 		pagesIndex: '页面',
 		pagesFiltering: '过滤筛选组件',
 		pagesFilteringDetails: '过滤筛选组件详情',
@@ -45,6 +46,8 @@ export default {
 		pagesFormAdapt: '表单自适应',
 		pagesFormI18n: '表单国际化',
 		pagesFormRules: '多表单验证',
+		pagesDynamicForm: '动态复杂表单',
+		pagesWorkflow: '工作流',
 		pagesListAdapt: '列表自适应',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步骤条',
@@ -153,6 +156,7 @@ export default {
 		fourIsFooter: '开启 Footer',
 		fourIsGrayscale: '灰色模式',
 		fourIsInvert: '色弱模式',
+		fourIsDark: '深色模式',
 		fourIsWartermark: '开启水印',
 		fourWartermarkText: '水印文案',
 		fiveTitle: '其它设置',
diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts
index 2a310715..1bd381dc 100644
--- a/src/i18n/lang/zh-tw.ts
+++ b/src/i18n/lang/zh-tw.ts
@@ -34,6 +34,7 @@ export default {
 		funScreenShort: '自定義截圖',
 		funGridLayout: '拖拽佈局',
 		funSplitpanes: '窗格折開器',
+		funDragVerify: '驗證器',
 		pagesIndex: '頁面',
 		pagesFiltering: '過濾篩選組件',
 		pagesFilteringDetails: '過濾篩選組件詳情',
@@ -45,6 +46,8 @@ export default {
 		pagesFormAdapt: '表單自我調整',
 		pagesFormI18n: '表單國際化',
 		pagesFormRules: '多表單驗證',
+		pagesDynamicForm: '動態複雜表單',
+		pagesWorkflow: '工作流',
 		pagesListAdapt: '清單自我調整',
 		pagesWaterfall: '瀑布屏',
 		pagesSteps: '步驟條',
@@ -153,6 +156,7 @@ export default {
 		fourIsFooter: '開啟 Footer',
 		fourIsGrayscale: '灰色模式',
 		fourIsInvert: '色弱模式',
+		fourIsDark: '深色模式',
 		fourIsWartermark: '開啟浮水印',
 		fourWartermarkText: '浮水印文案',
 		fiveTitle: '其它設定',
diff --git a/src/layout/component/columnsAside.vue b/src/layout/component/columnsAside.vue
index 750e55ff..ab99c825 100644
--- a/src/layout/component/columnsAside.vue
+++ b/src/layout/component/columnsAside.vue
@@ -202,12 +202,12 @@ export default {
 			}
 		}
 		.layout-columns-active {
-			color: #ffffff;
+			color: var(--color-whites);
 			transition: 0.3s ease-in-out;
 		}
 		.columns-round {
 			background: var(--color-primary);
-			color: #ffffff;
+			color: var(--color-whites);
 			position: absolute;
 			left: 50%;
 			top: 2px;
diff --git a/src/layout/footer/index.vue b/src/layout/footer/index.vue
index 9021dffc..cbe8feed 100644
--- a/src/layout/footer/index.vue
+++ b/src/layout/footer/index.vue
@@ -36,7 +36,7 @@ export default {
 	display: flex;
 	&-warp {
 		margin: auto;
-		color: #9e9e9e;
+		color: var(--el-text-color-secondary);
 		text-align: center;
 		animation: logoAnimation 0.3s ease-in-out;
 	}
diff --git a/src/layout/lockScreen/index.vue b/src/layout/lockScreen/index.vue
index 3977508c..bdf856a1 100644
--- a/src/layout/lockScreen/index.vue
+++ b/src/layout/lockScreen/index.vue
@@ -203,7 +203,7 @@ export default defineComponent({
 	transition: all 0.1s 0.1s ease-in-out;
 }
 .layout-lock-screen-mask {
-	background: rgba(255, 255, 255, 1);
+	background: var(--el-color-white);
 	@extend .layout-lock-screen-fixed;
 	z-index: 9999990;
 }
@@ -222,7 +222,7 @@ export default defineComponent({
 		top: 0;
 		width: 100%;
 		height: 100%;
-		color: #ffffff;
+		color: var(--el-color-white);
 		z-index: 9999993;
 		user-select: none;
 		&-box {
@@ -231,9 +231,11 @@ export default defineComponent({
 			bottom: 50px;
 			&-time {
 				font-size: 100px;
+				color: var(--color-whites);
 			}
 			&-info {
 				font-size: 40px;
+				color: var(--color-whites);
 			}
 			&-minutes {
 				font-size: 16px;
@@ -244,9 +246,9 @@ export default defineComponent({
 			height: 40px;
 			line-height: 40px;
 			border-radius: 100%;
-			border: 1px solid rgba(255, 255, 255, 0.3);
+			border: 1px solid var(--el-border-color-light, #ebeef5);
 			background: rgba(255, 255, 255, 0.1);
-			color: #ffffff;
+			color: var(--color-whites);
 			opacity: 0.8;
 			position: absolute;
 			right: 30px;
@@ -262,7 +264,7 @@ export default defineComponent({
 				position: absolute;
 				top: 150%;
 				font-size: 12px;
-				color: #ffffff;
+				color: var(--color-whites);
 				left: 50%;
 				line-height: 1.2;
 				transform: translate(-50%, -50%);
@@ -273,7 +275,7 @@ export default defineComponent({
 				border: 1px solid rgba(255, 255, 255, 0.5);
 				background: rgba(255, 255, 255, 0.2);
 				box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
-				color: #ffffff;
+				color: var(--color-whites);
 				opacity: 1;
 				transition: all 0.3s ease;
 				i {
@@ -298,7 +300,7 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		color: #ffffff;
+		color: var(--color-whites);
 		&-box {
 			text-align: center;
 			margin: auto;
@@ -334,13 +336,13 @@ export default defineComponent({
 	}
 }
 ::v-deep(.el-input-group__append) {
-	background: #ffffff;
+	background: var(--el-color-white);
 	padding: 0px 15px;
 }
 ::v-deep(.el-input__inner) {
-	border-right-color: #f6f6f6;
+	border-right-color: var(--el-border-color-extra-light);
 	&:hover {
-		border-color: #f6f6f6;
+		border-color: var(--el-border-color-extra-light);
 	}
 }
 </style>
diff --git a/src/layout/navBars/breadcrumb/setings.vue b/src/layout/navBars/breadcrumb/setings.vue
index 775d7668..7bf87bcb 100644
--- a/src/layout/navBars/breadcrumb/setings.vue
+++ b/src/layout/navBars/breadcrumb/setings.vue
@@ -231,6 +231,12 @@
 						<el-switch v-model="getThemeConfig.isInvert" @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.fourIsDark') }}</div>
+					<div class="layout-breadcrumb-seting-bar-flex-value">
+						<el-switch v-model="getThemeConfig.isIsDark" @change="onAddDarkChange"></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-value">
@@ -503,6 +509,12 @@ export default defineComponent({
 			appEle.setAttribute('style', `filter: ${cssAttr}`);
 			setLocalThemeConfig();
 		};
+		// 4、界面显示 --> 深色模式
+		const onAddDarkChange = () => {
+			const body = document.documentElement as HTMLElement;
+			if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
+			else body.setAttribute('data-theme', '');
+		};
 		// 4、界面显示 --> 开启水印
 		const onWartermarkChange = () => {
 			getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
@@ -609,6 +621,8 @@ export default defineComponent({
 					if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
 					// 色弱模式
 					if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
+					// 深色模式
+					if (getThemeConfig.value.isIsDark) onAddDarkChange();
 					// 开启水印
 					onWartermarkChange();
 					// 语言国际化
@@ -636,6 +650,7 @@ export default defineComponent({
 			getThemeConfig,
 			onDrawerClose,
 			onAddFilterChange,
+			onAddDarkChange,
 			onWartermarkChange,
 			onWartermarkTextInput,
 			onSetLayout,
diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue
index ae7cb748..952c5412 100644
--- a/src/layout/navBars/tagsView/tagsView.vue
+++ b/src/layout/navBars/tagsView/tagsView.vue
@@ -504,7 +504,7 @@ export default {
 <style scoped lang="scss">
 .layout-navbars-tagsview {
 	flex: 1;
-	background-color: #ffffff;
+	background-color: var(--el-color-white);
 	border-bottom: 1px solid #f1f2f3;
 	::v-deep(.el-scrollbar__wrap) {
 		overflow-x: auto !important;
@@ -516,7 +516,7 @@ export default {
 		height: 34px;
 		display: flex;
 		align-items: center;
-		color: #606266;
+		color: var(--el-text-color-regular);
 		font-size: 12px;
 		white-space: nowrap;
 		padding: 0 15px;
@@ -552,7 +552,7 @@ export default {
 				line-height: 14px;
 				right: -5px;
 				&:hover {
-					color: #fff;
+					color: var(--color-whites);
 					background-color: var(--color-primary-light-3);
 				}
 			}
@@ -564,7 +564,7 @@ export default {
 			}
 		}
 		.is-active {
-			color: #ffffff;
+			color: var(--color-whites);
 			background: var(--color-primary);
 			border-color: var(--color-primary);
 		}
@@ -615,7 +615,7 @@ export default {
 			}
 		}
 		.is-active {
-			background: white !important;
+			background: var(--el-color-white) !important;
 			color: var(--color-primary) !important;
 			border-top: 1px solid !important;
 			border-top-color: var(--color-primary) !important;
diff --git a/src/router/route.ts b/src/router/route.ts
index c5806f75..ee44a90f 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -542,6 +542,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							icon: 'iconfont icon--chaifenlie',
 						},
 					},
+					{
+						path: '/fun/dragVerify',
+						name: 'funDragVerify',
+						component: () => import('/@/views/fun/dragVerify/index.vue'),
+						meta: {
+							title: 'message.router.funDragVerify',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin', 'test'],
+							icon: 'el-icon-s-promotion',
+						},
+					},
 				],
 			},
 			{
@@ -838,6 +853,36 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 							icon: 'el-icon-picture-outline',
 						},
 					},
+					{
+						path: '/pages/dynamicForm',
+						name: 'pagesDynamicForm',
+						component: () => import('/@/views/pages/dynamicForm/index.vue'),
+						meta: {
+							title: 'message.router.pagesDynamicForm',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'iconfont icon-diannao',
+						},
+					},
+					{
+						path: '/pages/workflow',
+						name: 'pagesWorkflow',
+						component: () => import('/@/views/pages/workflow/index.vue'),
+						meta: {
+							title: 'message.router.pagesWorkflow',
+							isLink: '',
+							isHide: false,
+							isKeepAlive: true,
+							isAffix: false,
+							isIframe: false,
+							auth: ['admin'],
+							icon: 'el-icon-connection',
+						},
+					},
 				],
 			},
 			{
diff --git a/src/store/interface/index.ts b/src/store/interface/index.ts
index 780e2e81..39feb1f7 100644
--- a/src/store/interface/index.ts
+++ b/src/store/interface/index.ts
@@ -38,6 +38,7 @@ export interface ThemeConfigState {
 		isFooter: boolean;
 		isGrayscale: boolean;
 		isInvert: boolean;
+		isIsDark: boolean;
 		isWartermark: boolean;
 		wartermarkText: string;
 		tagsStyle: string;
diff --git a/src/store/modules/themeConfig.ts b/src/store/modules/themeConfig.ts
index d18e2ddb..44e778ad 100644
--- a/src/store/modules/themeConfig.ts
+++ b/src/store/modules/themeConfig.ts
@@ -54,7 +54,6 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isColumnsMenuBarColorGradual: false,
 			// 是否开启菜单字体背景高亮
 			isMenuBarColorHighlight: false,
-			// 是否开启菜单字体背景高亮
 
 			/**
 			 * 界面设置
@@ -101,6 +100,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
 			isGrayscale: false,
 			// 是否开启色弱模式
 			isInvert: false,
+			// 是否开启深色模式
+			isIsDark: false,
 			// 是否开启水印
 			isWartermark: false,
 			// 水印文案
diff --git a/src/theme/app.scss b/src/theme/app.scss
index a5743ffd..352b2d6b 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -56,11 +56,11 @@ body,
 	}
 	// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
 	.layout-view-bg-white {
-		background: white;
+		background: var(--el-color-white);
 		width: 100%;
 		height: 100%;
 		border-radius: 4px;
-		border: 1px solid #ebeef5;
+		border: 1px solid var(--el-border-color-light, #ebeef5);
 	}
 	.layout-el-aside-br-color {
 		border-right: 1px solid rgb(238, 238, 238);
diff --git a/src/theme/common/var.scss b/src/theme/common/var.scss
index 549e061e..388358df 100644
--- a/src/theme/common/var.scss
+++ b/src/theme/common/var.scss
@@ -8,7 +8,6 @@
 ------------------------------- */
 $--color-primary: #409eff !default;
 $--color-whites: #ffffff !default;
-$--color-blacks: #000000 !default;
 $--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
 $--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
 $--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
@@ -70,7 +69,6 @@ $--bg-columnsMenuBarColor: #e6e6e6;
 :root {
 	--color-primary: #{$--color-primary};
 	--color-whites: #{$--color-whites};
-	--color-blacks: #{$--color-blacks};
 	--color-primary-light-1: #{$--color-primary-light-1};
 	--color-primary-light-2: #{$--color-primary-light-2};
 	--color-primary-light-3: #{$--color-primary-light-3};
diff --git a/src/theme/dark.scss b/src/theme/dark.scss
new file mode 100644
index 00000000..f1964ea5
--- /dev/null
+++ b/src/theme/dark.scss
@@ -0,0 +1,48 @@
+/* 深色模式样式
+------------------------------- */
+[data-theme='dark'] {
+	// 全局
+	filter: invert(1) hue-rotate(180deg);
+	img,
+	.layout-lock-screen-img,
+	.visualizing-demo2,
+	.w-e-panel-tab-content {
+		filter: invert(1) hue-rotate(180deg);
+	}
+	.error img {
+		filter: unset;
+	}
+	// element plus
+	.el-radio-button__original-radio:checked + .el-radio-button__inner,
+	.el-image-viewer__close,
+	.el-image-viewer__actions__inner,
+	.el-image-viewer__next,
+	.el-image-viewer__prev {
+		color: #000000 !important;
+	}
+	// 数据可视化演示
+	.visualizing-container-head {
+		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.02)) !important;
+		.visualizing-container-head-left-text-box {
+			color: #000000 !important;
+		}
+	}
+	.visualizing-container-content-left {
+		background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
+	}
+	.visualizing-container-content-center {
+		background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
+	}
+	.visualizing-container-content-right {
+		background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
+	}
+	.cropper-modal {
+		background-color: #ffffff;
+	}
+	// 其它菜单等
+	--bg-menuBar: #ffffff !important;
+	--bg-menuBarColor: #303133 !important;
+	--bg-columnsMenuBar: #ffffff !important;
+	--bg-columnsMenuBarColor: #303133 !important;
+	--color-whites: #000000 !important;
+}
diff --git a/src/theme/element.scss b/src/theme/element.scss
index a0c3bbf9..19be5df0 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -809,10 +809,10 @@
 	color: set-color(primary);
 }
 .el-active-extend {
-	color: #ffffff !important;
+	color: var(--color-whites) !important;
 	background-color: set-color(primary) !important;
 	i {
-		color: #ffffff !important;
+		color: var(--color-whites) !important;
 	}
 }
 #add-is-active {
@@ -823,7 +823,7 @@
 }
 // 菜单收起时且是a链接
 .el-popper.is-dark a {
-	color: #ffffff !important;
+	color: var(--color-whites) !important;
 	text-decoration: none;
 }
 // 菜单收起时鼠标经过背景颜色/字体颜色
diff --git a/src/theme/iconSelector.scss b/src/theme/iconSelector.scss
index 8340dcc9..c9af770c 100644
--- a/src/theme/iconSelector.scss
+++ b/src/theme/iconSelector.scss
@@ -13,7 +13,7 @@
 		.icon-selector-warp-row {
 			height: 230px;
 			overflow: hidden;
-			border-top: 1px solid #ebeef5;
+			border-top: var(--el-border-base);
 			.el-row {
 				padding: 15px;
 			}
@@ -22,14 +22,14 @@
 			}
 			.icon-selector-warp-item {
 				display: flex;
-				border: 1px solid #ebeef5;
+				border: var(--el-border-base);
 				padding: 5px;
 				border-radius: 5px;
 				margin-bottom: 10px;
 				.icon-selector-warp-item-value {
 					i {
 						font-size: 20px;
-						color: #606266;
+						color: var(--el-text-color-regular);
 					}
 				}
 				&:hover {
diff --git a/src/theme/index.scss b/src/theme/index.scss
index 92263947..7ed25d2e 100644
--- a/src/theme/index.scss
+++ b/src/theme/index.scss
@@ -5,3 +5,4 @@
 @import './iconSelector.scss';
 @import './media/media.scss';
 @import './waves.scss';
+@import './dark.scss';
diff --git a/src/theme/media/login.scss b/src/theme/media/login.scss
index 0f265524..caaf6690 100644
--- a/src/theme/media/login.scss
+++ b/src/theme/media/login.scss
@@ -24,3 +24,14 @@
 		}
 	}
 }
+
+/* 页面宽度小于375px
+------------------------------- */
+@media screen and (max-width: 376px) {
+	.login-container {
+		.login-content-title {
+			font-size: 18px !important;
+			transition: all 0.3s ease;
+		}
+	}
+}
diff --git a/src/views/chart/chart.scss b/src/views/chart/chart.scss
index f2b26597..2c1ee64d 100644
--- a/src/views/chart/chart.scss
+++ b/src/views/chart/chart.scss
@@ -19,8 +19,8 @@
 					.flex-warp-item-box {
 						width: 100%;
 						height: 100%;
-						background: white;
-						border: 1px solid #ebeef5;
+						background: var(--el-color-white);
+						border: 1px solid var(--el-border-color-light, #ebeef5);
 						border-radius: 4px;
 						display: flex;
 						flex-direction: column;
@@ -49,7 +49,7 @@
 				}
 			}
 			.big-data-down-left {
-				color: #303133;
+				color: var(--el-text-color-primary);
 				.sky {
 					display: flex;
 					align-items: center;
@@ -67,7 +67,7 @@
 							background: #22bc76;
 							border-radius: 2px;
 							padding: 0 5px;
-							color: white;
+							color: var(--color-whites);
 						}
 					}
 					.sky-right {
@@ -117,7 +117,7 @@
 							text-align: center;
 							border-radius: 100%;
 							flex-shrink: 1;
-							color: #ffffff;
+							color: var(--color-whites);
 						}
 						.i-bg1 {
 							background: #22bc76;
@@ -189,9 +189,9 @@
 					padding: 0 7.5px 15px;
 					.big-data-down-center-one-content {
 						height: 100%;
-						background: white;
+						background: var(--el-color-white);
 						padding: 15px;
-						border: 1px solid #ebeef5;
+						border: 1px solid var(--el-border-color-light, #ebeef5);
 						border-radius: 4px;
 						transition: all ease 0.3s;
 						&:hover {
@@ -206,11 +206,11 @@
 					.flex-warp-item-box {
 						width: 100%;
 						height: 100%;
-						background: white;
+						background: var(--el-color-white);
 						display: flex;
 						flex-direction: column;
 						padding: 15px;
-						border: 1px solid #ebeef5;
+						border: 1px solid var(--el-border-color-light, #ebeef5);
 						border-radius: 4px;
 						transition: all ease 0.3s;
 						&:hover {
@@ -317,7 +317,7 @@
 							height: 45px;
 							.task-item {
 								flex: 1;
-								color: #ffffff;
+								color: var(--color-whites);
 								display: flex;
 								justify-content: center;
 								.task-item-box {
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index 8d3e1ecd..18f2d53a 100644
--- a/src/views/error/401.vue
+++ b/src/views/error/401.vue
@@ -39,7 +39,7 @@ export default {
 <style scoped lang="scss">
 .error {
 	height: 100%;
-	background-color: white;
+	background-color: var(--el-color-white);
 	display: flex;
 	.error-flex {
 		margin: auto;
@@ -59,17 +59,17 @@ export default {
 					animation-fill-mode: forwards;
 				}
 				.left-item-num {
-					color: #d6e0f6;
+					color: var(--el-color-info);
 					font-size: 55px;
 				}
 				.left-item-title {
 					font-size: 20px;
-					color: #333333;
+					color: var(--el-text-color-primary);
 					margin: 15px 0 5px 0;
 					animation-delay: 0.1s;
 				}
 				.left-item-msg {
-					color: #c0bebe;
+					color: var(--el-text-color-secondary);
 					font-size: 12px;
 					margin-bottom: 30px;
 					animation-delay: 0.2s;
diff --git a/src/views/error/404.vue b/src/views/error/404.vue
index 64b861d5..4441c3ae 100644
--- a/src/views/error/404.vue
+++ b/src/views/error/404.vue
@@ -37,7 +37,7 @@ export default {
 <style scoped lang="scss">
 .error {
 	height: 100%;
-	background-color: white;
+	background-color: var(--el-color-white);
 	display: flex;
 	.error-flex {
 		margin: auto;
@@ -57,17 +57,17 @@ export default {
 					animation-fill-mode: forwards;
 				}
 				.left-item-num {
-					color: #d6e0f6;
+					color: var(--el-color-info);
 					font-size: 55px;
 				}
 				.left-item-title {
 					font-size: 20px;
-					color: #333333;
+					color: var(--el-text-color-primary);
 					margin: 15px 0 5px 0;
 					animation-delay: 0.1s;
 				}
 				.left-item-msg {
-					color: #c0bebe;
+					color: var(--el-text-color-secondary);
 					font-size: 12px;
 					margin-bottom: 30px;
 					animation-delay: 0.2s;
diff --git a/src/views/fun/countup/index.vue b/src/views/fun/countup/index.vue
index a620806f..839e99a8 100644
--- a/src/views/fun/countup/index.vue
+++ b/src/views/fun/countup/index.vue
@@ -110,7 +110,7 @@ export default {
 .countup-card-item {
 	width: 100%;
 	height: 103px;
-	background: gray;
+	background: var(--el-text-color-secondary);
 	border-radius: 4px;
 	transition: all ease 0.3s;
 	&:hover {
@@ -140,7 +140,7 @@ export default {
 	}
 	.countup-card-item-flex {
 		padding: 0 20px;
-		color: white;
+		color: var(--color-whites);
 		.countup-card-item-title,
 		.countup-card-item-tip {
 			font-size: 13px;
diff --git a/src/views/fun/dragVerify/index.vue b/src/views/fun/dragVerify/index.vue
new file mode 100644
index 00000000..d9635613
--- /dev/null
+++ b/src/views/fun/dragVerify/index.vue
@@ -0,0 +1,107 @@
+<template>
+	<div class="dragVerify-container">
+		<el-card shadow="hover" header="验证器：基本滑块验证组件">
+			<el-alert
+				title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<DragVerify
+				v-model:isPassing="isPassingOne"
+				text="请按住滑块拖动"
+				successText="验证通过"
+				handlerIcon="el-icon-d-arrow-right"
+				successIcon="el-icon-circle-check"
+			/>
+		</el-card>
+
+		<el-card shadow="hover" header="验证器：图片滑块组件" class="mt15">
+			<el-alert
+				title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<DragVerifyImg
+				:imgsrc="imgTwo"
+				v-model:isPassing="isPassingTwo"
+				:showRefresh="true"
+				text="请按住滑块拖动"
+				successText="验证通过"
+				handlerIcon="el-icon-d-arrow-right"
+				successIcon="el-icon-circle-check"
+			/>
+		</el-card>
+
+		<el-card shadow="hover" header="验证器：图片滑块组件(拼图)" class="mt15">
+			<el-alert
+				title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<DragVerifyImgChip
+				:imgsrc="imgThree"
+				v-model:isPassing="isPassingThree"
+				:showRefresh="true"
+				text="请按住滑块拖动"
+				successText="验证通过"
+				handlerIcon="el-icon-d-arrow-right"
+				successIcon="el-icon-circle-check"
+			/>
+		</el-card>
+
+		<el-card shadow="hover" header="验证器：旋转图片滑块组件" class="mt15">
+			<el-alert
+				title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
+				type="success"
+				:closable="false"
+				class="mb15"
+			></el-alert>
+			<DragVerifyImgRotate
+				:imgsrc="imgThree"
+				v-model:isPassing="isPassingFour"
+				:showRefresh="true"
+				text="请按住滑块拖动"
+				successText="验证通过"
+				handlerIcon="el-icon-d-arrow-right"
+				successIcon="el-icon-circle-check"
+			/>
+		</el-card>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive } from 'vue';
+// 基本滑块验证组件
+import DragVerify from '/@/components/dragVerify/dragVerify.vue';
+// 图片滑块组件
+import DragVerifyImg from '/@/components/dragVerify/dragVerifyImg.vue';
+// 图片滑块组件(拼图)
+import DragVerifyImgChip from '/@/components/dragVerify/dragVerifyImgChip.vue';
+// 旋转图片滑块组件
+import DragVerifyImgRotate from '/@/components/dragVerify/dragVerifyImgRotate.vue';
+export default {
+	name: 'funDragVerify',
+	components: {
+		DragVerify,
+		DragVerifyImg,
+		DragVerifyImgChip,
+		DragVerifyImgRotate,
+	},
+	setup() {
+		const state = reactive({
+			isPassingOne: false,
+			isPassingTwo: false,
+			isPassingThree: false,
+			isPassingFour: false,
+			imgTwo: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
+			imgThree: 'https://img1.baidu.com/it/u=2813520958,2218166536&fm=26&fmt=auto&gp=0.jpg',
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+};
+</script>
diff --git a/src/views/fun/gridLayout/index.vue b/src/views/fun/gridLayout/index.vue
index 9650ad6a..34dd9bc7 100644
--- a/src/views/fun/gridLayout/index.vue
+++ b/src/views/fun/gridLayout/index.vue
@@ -55,7 +55,7 @@ export default {
 .grid-layout-container {
 	.vue-grid-item {
 		background: var(--color-primary);
-		color: #ffffff;
+		color: var(--color-whites);
 	}
 }
 </style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2400212a..8854cf7d 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -334,7 +334,7 @@ export default {
 	.home-card-item {
 		width: 100%;
 		height: 103px;
-		background: gray;
+		background: var(--el-text-color-secondary);
 		border-radius: 4px;
 		transition: all ease 0.3s;
 		&:hover {
@@ -364,7 +364,7 @@ export default {
 		}
 		.home-card-item-flex {
 			padding: 0 20px;
-			color: white;
+			color: var(--color-whites);
 			.home-card-item-title,
 			.home-card-item-tip {
 				font-size: 13px;
@@ -378,8 +378,8 @@ export default {
 		}
 	}
 	.home-card-first {
-		background: white;
-		border: 1px solid #ebeef5;
+		background: var(--el-color-white);
+		border: 1px solid var(--el-border-color-light, #ebeef5);
 		display: flex;
 		align-items: center;
 		img {
@@ -392,9 +392,12 @@ export default {
 			flex: 1;
 			display: flex;
 			flex-direction: column;
+			.home-card-first-right-title {
+				color: var(--el-color-black);
+			}
 			.home-card-first-right-msg {
 				font-size: 13px;
-				color: gray;
+				color: var(--el-text-color-secondary);
 			}
 		}
 	}
@@ -408,6 +411,7 @@ export default {
 				margin: auto;
 				height: auto;
 				text-align: center;
+				color: var(--el-text-color-primary);
 			}
 		}
 	}
@@ -437,12 +441,12 @@ export default {
 				}
 				.home-dynamic-item-left-time2 {
 					font-size: 13px;
-					color: gray;
+					color: var(--el-text-color-secondary);
 				}
 			}
 			.home-dynamic-item-line {
 				height: 60px;
-				border-right: 2px dashed #dfdfdf;
+				border-right: 2px dashed var(--el-border-color-light, #ebeef5);
 				margin: 0 20px;
 				position: relative;
 				i {
@@ -452,7 +456,7 @@ export default {
 					top: 1px;
 					left: -6px;
 					transform: rotate(46deg);
-					background: white;
+					background: var(--el-color-white);
 				}
 			}
 			.home-dynamic-item-right {
@@ -460,7 +464,7 @@ export default {
 				.home-dynamic-item-right-title {
 					i {
 						margin-right: 5px;
-						border: 1px solid #dfdfdf;
+						border: 1px solid var(--el-border-color-light, #ebeef5);
 						width: 20px;
 						height: 20px;
 						border-radius: 100%;
@@ -471,7 +475,7 @@ export default {
 				}
 				.home-dynamic-item-right-label {
 					font-size: 13px;
-					color: gray;
+					color: var(--el-text-color-secondary);
 				}
 			}
 		}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 047bd444..082697a0 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -27,6 +27,7 @@
 				<Scan v-else />
 				<div class="login-content-main-sacn" @click="isScan = !isScan">
 					<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
+					<div class="login-content-main-sacn-delta"></div>
 				</div>
 			</div>
 		</div>
@@ -114,6 +115,9 @@ export default {
 				letter-spacing: 4px;
 				margin: 15px 0 30px;
 				white-space: nowrap;
+				z-index: 5;
+				position: relative;
+				transition: all 0.3s ease;
 			}
 		}
 		.login-content-main-sacn {
@@ -124,18 +128,16 @@ export default {
 			height: 50px;
 			overflow: hidden;
 			cursor: pointer;
-			opacity: 0.7;
 			transition: all ease 0.3s;
-			&::before {
-				content: '';
+			&-delta {
 				position: absolute;
-				width: 0;
-				height: 0;
-				border-bottom: 50px solid #ffffff;
-				border-right: 50px solid transparent;
+				width: 35px;
+				height: 70px;
 				z-index: 2;
-				top: 0;
-				right: 0;
+				top: 2px;
+				right: 21px;
+				background: var(--el-color-white);
+				transform: rotate(-45deg);
 			}
 			&:hover {
 				opacity: 1;
@@ -143,14 +145,13 @@ export default {
 				color: var(--color-primary);
 			}
 			i {
-				content: '';
-				width: 48px;
+				width: 47px;
 				height: 50px;
+				display: inline-block;
+				font-size: 48px;
 				position: absolute;
-				top: 0px;
-				right: 0px;
-				font-size: 47px;
-				z-index: 1;
+				right: 2px;
+				top: -1px;
 			}
 		}
 	}
@@ -163,7 +164,7 @@ export default {
 		transform: translateX(-50%);
 		bottom: 30px;
 		text-align: center;
-		color: white;
+		color: var(--color-whites);
 		font-size: 12px;
 		opacity: 0.8;
 		.login-copyright-company {
diff --git a/src/views/pages/dynamicForm/index.vue b/src/views/pages/dynamicForm/index.vue
new file mode 100644
index 00000000..ee7fae03
--- /dev/null
+++ b/src/views/pages/dynamicForm/index.vue
@@ -0,0 +1,159 @@
+<template>
+	<div class="dynamic-form-container">
+		<el-card shadow="hover" header="动态复杂表单">
+			<el-form :model="form" ref="formRulesOneRef" size="small" 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="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="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="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="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 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" icon="el-icon-plus" circle size="mini" @click="onAddRow" v-if="k === 0"></el-button>
+											<el-button type="danger" icon="el-icon-delete" circle size="mini" @click="onDelRow(k)" v-else></el-button>
+											<span class="ml10">年度</span>
+										</template>
+										<el-input v-model="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="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="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="small" icon="el-icon-refresh-right" @click="onResetForm">重置表单</el-button>
+				<el-button size="small" type="primary" icon="iconfont icon-shuxing" @click="onSubmitForm">验证表单</el-button>
+			</div>
+		</el-row>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
+import { formData } from './mock';
+export default {
+	name: 'pagesDynamicForm',
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		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) => {
+			state.form.list.splice(k, 1);
+		};
+		// 表单验证
+		const onSubmitForm = () => {
+			proxy.$refs.formRulesOneRef.validate((valid) => {
+				if (valid) {
+					proxy.$message.success('验证成功');
+				} else {
+					return false;
+				}
+			});
+		};
+		// 重置表单
+		const onResetForm = () => {
+			proxy.$refs.formRulesOneRef.resetFields();
+		};
+		// 页面加载时
+		onMounted(() => {});
+		return {
+			onAddRow,
+			onDelRow,
+			onSubmitForm,
+			onResetForm,
+			...toRefs(state),
+		};
+	},
+};
+</script>
diff --git a/src/views/pages/dynamicForm/mock.ts b/src/views/pages/dynamicForm/mock.ts
new file mode 100644
index 00000000..2293fe93
--- /dev/null
+++ b/src/views/pages/dynamicForm/mock.ts
@@ -0,0 +1,119 @@
+// 表单数据选项(自行扩展)
+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,
+	},
+];
diff --git a/src/views/pages/waterfall/index.vue b/src/views/pages/waterfall/index.vue
index d0b95abd..fe66acfe 100644
--- a/src/views/pages/waterfall/index.vue
+++ b/src/views/pages/waterfall/index.vue
@@ -45,7 +45,7 @@ export default {
 		.waterfall-first-item {
 			width: 100%;
 			background: var(--color-primary);
-			color: #ffffff;
+			color: var(--color-whites);
 			transition: all 0.3s ease;
 			border-radius: 3px;
 			&:nth-of-type(3n + 1) {
@@ -73,7 +73,7 @@ export default {
 		.waterfall-last-item {
 			height: 100%;
 			background: var(--color-primary);
-			color: #ffffff;
+			color: var(--color-whites);
 			transition: all 0.3s ease;
 			border-radius: 3px;
 			&:hover {
diff --git a/src/views/pages/waves/index.vue b/src/views/pages/waves/index.vue
index 04386141..8aa1490e 100644
--- a/src/views/pages/waves/index.vue
+++ b/src/views/pages/waves/index.vue
@@ -89,7 +89,7 @@ export default {
 		.waterfall-first-item {
 			width: 100%;
 			background: var(--color-primary);
-			color: #ffffff;
+			color: var(--color-whites);
 			transition: all 0.3s ease;
 			border-radius: 3px;
 			&:nth-of-type(3n + 1) {
diff --git a/src/views/pages/workflow/index.vue b/src/views/pages/workflow/index.vue
new file mode 100644
index 00000000..47635628
--- /dev/null
+++ b/src/views/pages/workflow/index.vue
@@ -0,0 +1,143 @@
+<template>
+	<div class="workflow-form-container">
+		<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
+			<div class="workflow">
+				<div class="workflow-left">
+					<el-scrollbar>
+						<div :id="`left${key}`" v-for="(val, key) in leftNavList" :key="key">
+							<div class="workflow-left-title">
+								<span>{{ val.title }}</span>
+								<i :class="val.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
+							</div>
+							<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k">
+								<i :class="v.icon"></i>
+							</div>
+						</div>
+					</el-scrollbar>
+				</div>
+				<div class="workflow-right">
+					<div id="right"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
+import Sortable from 'sortablejs';
+import { useStore } from '/@/store/index';
+import { leftNavList } from './mock';
+export default defineComponent({
+	name: 'pagesWorkflow',
+	setup() {
+		const store = useStore();
+		const state = reactive({
+			leftNavList,
+		});
+		// 设置 view 的高度
+		const setViewHeight = computed(() => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
+			if (isTagsViewCurrenFull) {
+				return `30px`;
+			} else {
+				if (isTagsview) return `114px`;
+				else return `80px`;
+			}
+		});
+		// 初始化拖动
+		const initSortable = () => {
+			state.leftNavList.forEach((v, k) => {
+				Sortable.create(document.getElementById(`left${k}`), {
+					group: { name: 'vue-next-admin-1', pull: 'clone', put: false },
+					animation: 1000,
+					sort: false,
+					draggable: '.workflow-left-item',
+					direction: 'vertical',
+					forceFallback: true,
+					onEnd: function (evt) {
+						console.log(evt);
+					},
+				});
+			});
+
+			Sortable.create(document.getElementById(`right`), {
+				group: { name: 'vue-next-admin-2', pull: 'clone', put: true },
+				animation: 1000,
+				onEnd: function (evt) {
+					console.log(evt);
+				},
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initSortable();
+		});
+		return {
+			setViewHeight,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.workflow-form-container {
+	.workflow {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		.workflow-left {
+			width: 220px;
+			::v-deep(.el-collapse-item__content) {
+				padding-bottom: 0;
+			}
+			.workflow-left-title {
+				height: 50px;
+				display: flex;
+				align-items: center;
+				padding: 0 15px;
+				border-top: 1px solid var(--el-border-color-light, #ebeef5);
+				border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+				color: --el-text-color-primary;
+				cursor: pointer;
+				span {
+					flex: 1;
+				}
+			}
+			.workflow-left-item {
+				display: inline-block;
+				width: 33.33%;
+				height: 50px;
+				position: relative;
+				cursor: pointer;
+				i {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					font-size: 25px;
+					color: var(--el-text-color-secondary);
+					transition: all 0.3s ease;
+				}
+				&:hover {
+					i {
+						color: var(--el-text-color-regular);
+						transition: all 0.3s ease;
+					}
+				}
+			}
+		}
+		.workflow-right {
+			flex: 1;
+			border: 1px solid red;
+			#right {
+				border: 1px solid yellow;
+				height: 100%;
+				width: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/pages/workflow/mock.ts b/src/views/pages/workflow/mock.ts
new file mode 100644
index 00000000..e4352cf6
--- /dev/null
+++ b/src/views/pages/workflow/mock.ts
@@ -0,0 +1,60 @@
+// 左侧菜单导航数据
+export const leftNavList = [
+	{
+		title: '录像',
+		icon: 'el-icon-video-camera-solid',
+		isOpen: true,
+		children: [
+			{
+				icon: 'el-icon-s-custom',
+			},
+			{
+				icon: 'el-icon-s-opportunity',
+			},
+			{
+				icon: 'el-icon-s-data',
+			},
+			{
+				icon: 'el-icon-s-check',
+			},
+			{
+				icon: 'el-icon-s-grid',
+			},
+			{
+				icon: 'el-icon-menu',
+			},
+		],
+		form: {},
+	},
+	{
+		title: '文本',
+		isOpen: true,
+		icon: 'el-icon-s-order',
+		children: [
+			{
+				icon: 'el-icon-share',
+			},
+			{
+				icon: 'el-icon-s-shop',
+			},
+			{
+				icon: 'el-icon-s-marketing',
+			},
+		],
+		form: {},
+	},
+	{
+		title: '电视',
+		isOpen: true,
+		icon: 'el-icon-s-platform',
+		children: [
+			{
+				icon: 'el-icon-s-flag',
+			},
+			{
+				icon: 'el-icon-s-comment',
+			},
+		],
+		form: {},
+	},
+];
diff --git a/src/views/personal/index.vue b/src/views/personal/index.vue
index 6f1c5bd1..f2924091 100644
--- a/src/views/personal/index.vue
+++ b/src/views/personal/index.vue
@@ -248,7 +248,7 @@ export default {
 				align-items: center;
 				font-size: 13px;
 				.personal-item-label {
-					color: gray;
+					color: var(--el-text-color-secondary);
 					@include text-ellipsis(1);
 				}
 				.personal-item-value {
@@ -260,7 +260,7 @@ export default {
 	.personal-info {
 		.personal-info-more {
 			float: right;
-			color: gray;
+			color: var(--el-text-color-secondary);
 			font-size: 13px;
 			&:hover {
 				color: var(--color-primary);
@@ -278,7 +278,7 @@ export default {
 					.personal-info-li-title {
 						display: inline-block;
 						@include text-ellipsis(1);
-						color: grey;
+						color: var(--el-text-color-secondary);
 						text-decoration: none;
 					}
 					& a:hover {
@@ -294,7 +294,7 @@ export default {
 			.personal-recommend {
 				position: relative;
 				height: 100px;
-				color: #ffffff;
+				color: var(--color-whites);
 				border-radius: 3px;
 				overflow: hidden;
 				cursor: pointer;
@@ -330,7 +330,7 @@ export default {
 		.personal-edit-title {
 			position: relative;
 			padding-left: 10px;
-			color: #606266;
+			color: var(--el-text-color-regular);
 			&::after {
 				content: '';
 				width: 2px;
@@ -343,7 +343,7 @@ export default {
 			}
 		}
 		.personal-edit-safe-box {
-			border-bottom: 1px solid #ebeef5;
+			border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
 			padding: 15px 0;
 			.personal-edit-safe-item {
 				width: 100%;
@@ -354,11 +354,11 @@ export default {
 					flex: 1;
 					overflow: hidden;
 					.personal-edit-safe-item-left-label {
-						color: #606266;
+						color: var(--el-text-color-regular);
 						margin-bottom: 5px;
 					}
 					.personal-edit-safe-item-left-value {
-						color: gray;
+						color: var(--el-text-color-secondary);
 						@include text-ellipsis(1);
 						margin-right: 15px;
 					}
diff --git a/src/views/visualizing/demo1.vue b/src/views/visualizing/demo1.vue
index ba98f49c..2f85f634 100644
--- a/src/views/visualizing/demo1.vue
+++ b/src/views/visualizing/demo1.vue
@@ -971,7 +971,7 @@ $titleWidth: 240px;
 			left: 0;
 			display: flex;
 			align-items: center;
-			color: #fff;
+			color: var(--color-whites);
 			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
 			z-index: 3;
 			.visualizing-container-head-left {
@@ -1176,11 +1176,11 @@ $titleWidth: 240px;
 		.visualizing-container-title {
 			max-width: $titleWidth;
 			font-size: 14px;
-			color: #ffffff;
+			color: var(--color-whites);
 			opacity: 0.8;
 			padding: 0 5px;
-			border-bottom: 1px solid #ffffff;
-			border-image: linear-gradient(to right, #ffffff, rgba(22, 207, 208, 0.02)) 1 10;
+			border-bottom: 1px solid var(--color-whites);
+			border-image: linear-gradient(to right, var(--color-whites), rgba(22, 207, 208, 0.02)) 1 10;
 			position: relative;
 			i {
 				padding-right: 5px;
@@ -1193,7 +1193,7 @@ $titleWidth: 240px;
 				bottom: 0;
 				width: 1px;
 				height: 10px;
-				background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.5));
+				background: linear-gradient(to top, var(--color-whites), rgba(255, 255, 255, 0.5));
 			}
 		}
 		.visualizing-container-title-colorful {
diff --git a/vite.config.ts b/vite.config.ts
index d02ddc6d..866a94c5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -39,6 +39,7 @@ const viteConfig: UserConfig = {
 		outDir: 'dist',
 		minify: 'esbuild',
 		sourcemap: false,
+		chunkSizeWarningLimit: 1500,
 	},
 	define: {
 		__VUE_I18N_LEGACY_API__: JSON.stringify(false),