From f6980214e3bd04d14c5815a00345a082ca198338 Mon Sep 17 00:00:00 2001
From: icssoa <615206459@qq.com>
Date: Mon, 6 Sep 2021 10:13:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0elm-plus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  6 +-
 public/theme/black.css                        | 84 +++++++++---------
 public/theme/blue.css                         | 80 ++++++++---------
 public/theme/green.css                        | 80 ++++++++---------
 public/theme/purple.css                       | 88 +++++++++----------
 src/assets/css/element-variables.scss         |  6 +-
 .../base/components/menu/slider/index.scss    |  8 +-
 .../base/components/menu/slider/index.tsx     |  2 +-
 .../modules/demo/components/crud/upsert.vue   | 12 ++-
 yarn.lock                                     | 32 +++++--
 10 files changed, 210 insertions(+), 188 deletions(-)

diff --git a/package.json b/package.json
index 27e9996..4bf4957 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -11,13 +11,13 @@
 	"dependencies": {
 		"array.prototype.flat": "^1.2.4",
 		"axios": "^0.21.1",
-		"cl-admin-crud-vue3": "^0.7.0",
+		"cl-admin-crud-vue3": "^0.7.2",
 		"clipboard": "^2.0.8",
 		"clone-deep": "^4.0.1",
 		"codemirror": "^5.62.0",
 		"core-js": "^3.6.5",
 		"echarts": "^5.0.2",
-		"element-plus": "^1.0.2-beta.65",
+		"element-plus": "^1.1.0-beta.6",
 		"file-saver": "^2.0.5",
 		"glob": "^7.1.6",
 		"js-beautify": "^1.13.5",
diff --git a/public/theme/black.css b/public/theme/black.css
index f9523a9..3a97864 100644
--- a/public/theme/black.css
+++ b/public/theme/black.css
@@ -278,7 +278,7 @@
 	box-sizing: border-box;
 	text-align: center;
 }
-.el-menu--collapse .el-menu .el-submenu,
+.el-menu--collapse .el-menu .el-sub-menu,
 .el-menu--popup {
 	min-width: 200px;
 }
@@ -455,7 +455,7 @@
 	background-color: #fff;
 }
 .el-dropdown-menu,
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	z-index: 10;
 	-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
@@ -645,7 +645,7 @@
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
 	background-color: #fff;
 }
 .el-menu::after,
@@ -674,35 +674,35 @@
 .el-menu--horizontal > .el-menu-item a:hover {
 	color: inherit;
 }
-.el-menu--horizontal > .el-submenu {
+.el-menu--horizontal > .el-sub-menu {
 	float: left;
 }
-.el-menu--horizontal > .el-submenu:focus,
-.el-menu--horizontal > .el-submenu:hover {
+.el-menu--horizontal > .el-sub-menu:focus,
+.el-menu--horizontal > .el-sub-menu:hover {
 	outline: 0;
 }
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
+.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom: 2px solid #1d1a1a;
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
 	height: 60px;
 	line-height: 60px;
 	border-bottom: 2px solid transparent;
 	color: #909399;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
 	position: static;
 	vertical-align: middle;
 	margin-left: 8px;
 	margin-top: -3px;
 }
 .el-menu--horizontal .el-menu .el-menu-item,
-.el-menu--horizontal .el-menu .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu__title {
 	background-color: #fff;
 	float: none;
 	height: 36px;
@@ -711,7 +711,7 @@
 	color: #909399;
 }
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
 	color: #303133;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
@@ -727,18 +727,18 @@
 	width: 64px;
 }
 .el-menu--collapse > .el-menu-item [class^="el-icon-"],
-.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title [class^="el-icon-"] {
 	margin: 0;
 	vertical-align: middle;
 	width: 24px;
 	text-align: center;
 }
-.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
-.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse > .el-menu-item .el-sub-menu__icon-arrow,
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	display: none;
 }
 .el-menu--collapse > .el-menu-item span,
-.el-menu--collapse > .el-submenu > .el-submenu__title span {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title span {
 	height: 0;
 	width: 0;
 	overflow: hidden;
@@ -748,10 +748,10 @@
 .el-menu--collapse > .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-menu--collapse .el-submenu {
+.el-menu--collapse .el-sub-menu {
 	position: relative;
 }
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	position: absolute;
 	margin-left: 5px;
 	top: 0;
@@ -761,7 +761,7 @@
 	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .el-menu-item,
-.el-submenu__title {
+.el-sub-menu__title {
 	height: 56px;
 	line-height: 56px;
 	position: relative;
@@ -769,7 +769,7 @@
 	white-space: nowrap;
 	list-style: none;
 }
-.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: none;
 	transform: none;
 }
@@ -826,12 +826,12 @@
 .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-submenu {
+.el-sub-menu {
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 }
-.el-submenu__title {
+.el-sub-menu__title {
 	font-size: 14px;
 	color: #303133;
 	padding: 0 20px;
@@ -840,35 +840,35 @@
 	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 	box-sizing: border-box;
 }
-.el-submenu__title * {
+.el-sub-menu__title * {
 	vertical-align: middle;
 }
-.el-submenu__title i {
+.el-sub-menu__title i {
 	color: #909399;
 }
-.el-submenu__title:focus,
-.el-submenu__title:hover {
+.el-sub-menu__title:focus,
+.el-sub-menu__title:hover {
 	outline: 0;
 	background-color: rgb(232, 232, 232);
 }
-.el-submenu__title.is-disabled {
+.el-sub-menu__title.is-disabled {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu__title:hover {
+.el-sub-menu__title:hover {
 	background-color: rgb(232, 232, 232);
 }
-.el-submenu .el-menu {
+.el-sub-menu .el-menu {
 	border: none;
 }
-.el-submenu .el-menu-item {
+.el-sub-menu .el-menu-item {
 	height: 50px;
 	line-height: 50px;
 	padding: 0 45px;
 	min-width: 200px;
 }
-.el-submenu__icon-arrow {
+.el-sub-menu__icon-arrow {
 	position: absolute;
 	top: 50%;
 	right: 20px;
@@ -879,20 +879,20 @@
 	transition: transform 0.3s, -webkit-transform 0.3s;
 	font-size: 12px;
 }
-.el-submenu.is-active .el-submenu__title {
+.el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom-color: #1d1a1a;
 }
-.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: rotateZ(180deg);
 	transform: rotateZ(180deg);
 }
-.el-submenu.is-disabled .el-menu-item,
-.el-submenu.is-disabled .el-submenu__title {
+.el-sub-menu.is-disabled .el-menu-item,
+.el-sub-menu.is-disabled .el-sub-menu__title {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu [class^="el-icon-"] {
+.el-sub-menu [class^="el-icon-"] {
 	vertical-align: middle;
 	margin-right: 5px;
 	width: 24px;
@@ -914,7 +914,7 @@
 	line-height: 1;
 	vertical-align: middle;
 }
-.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transition: 0.2s;
 	transition: 0.2s;
 	opacity: 0;
@@ -12000,8 +12000,8 @@
 
 /* custom */
 
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover,
 .app-slider .cl-slider-menu .el-menu .el-menu-item.is-active {
 	background-color: #1d1a1a !important;
@@ -12036,8 +12036,8 @@
 	color: #fff;
 }
 
-.page-layout__topbar .cl-menu-topbar .el-menu .el-submenu__title:hover,
-.page-layout__topbar .cl-menu-topbar .el-menu .el-submenu__title.is-active,
+.page-layout__topbar .cl-menu-topbar .el-menu .el-sub-menu__title:hover,
+.page-layout__topbar .cl-menu-topbar .el-menu .el-sub-menu__title.is-active,
 .page-layout__topbar .cl-menu-topbar .el-menu .el-menu-item:hover,
 .page-layout__topbar .cl-menu-topbar .el-menu .el-menu-item.is-active {
 	background-color: rgba(47, 52, 71, 0.8) !important;
diff --git a/public/theme/blue.css b/public/theme/blue.css
index 7228dda..27c1d37 100644
--- a/public/theme/blue.css
+++ b/public/theme/blue.css
@@ -278,7 +278,7 @@
 	box-sizing: border-box;
 	text-align: center;
 }
-.el-menu--collapse .el-menu .el-submenu,
+.el-menu--collapse .el-menu .el-sub-menu,
 .el-menu--popup {
 	min-width: 200px;
 }
@@ -455,7 +455,7 @@
 	background-color: #fff;
 }
 .el-dropdown-menu,
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	z-index: 10;
 	-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
@@ -645,7 +645,7 @@
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
 	background-color: #fff;
 }
 .el-menu::after,
@@ -674,35 +674,35 @@
 .el-menu--horizontal > .el-menu-item a:hover {
 	color: inherit;
 }
-.el-menu--horizontal > .el-submenu {
+.el-menu--horizontal > .el-sub-menu {
 	float: left;
 }
-.el-menu--horizontal > .el-submenu:focus,
-.el-menu--horizontal > .el-submenu:hover {
+.el-menu--horizontal > .el-sub-menu:focus,
+.el-menu--horizontal > .el-sub-menu:hover {
 	outline: 0;
 }
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
+.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom: 2px solid #4165d7;
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
 	height: 60px;
 	line-height: 60px;
 	border-bottom: 2px solid transparent;
 	color: #909399;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
 	position: static;
 	vertical-align: middle;
 	margin-left: 8px;
 	margin-top: -3px;
 }
 .el-menu--horizontal .el-menu .el-menu-item,
-.el-menu--horizontal .el-menu .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu__title {
 	background-color: #fff;
 	float: none;
 	height: 36px;
@@ -711,7 +711,7 @@
 	color: #909399;
 }
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
 	color: #303133;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
@@ -727,18 +727,18 @@
 	width: 64px;
 }
 .el-menu--collapse > .el-menu-item [class^="el-icon-"],
-.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title [class^="el-icon-"] {
 	margin: 0;
 	vertical-align: middle;
 	width: 24px;
 	text-align: center;
 }
-.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
-.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse > .el-menu-item .el-sub-menu__icon-arrow,
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	display: none;
 }
 .el-menu--collapse > .el-menu-item span,
-.el-menu--collapse > .el-submenu > .el-submenu__title span {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title span {
 	height: 0;
 	width: 0;
 	overflow: hidden;
@@ -748,10 +748,10 @@
 .el-menu--collapse > .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-menu--collapse .el-submenu {
+.el-menu--collapse .el-sub-menu {
 	position: relative;
 }
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	position: absolute;
 	margin-left: 5px;
 	top: 0;
@@ -761,7 +761,7 @@
 	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .el-menu-item,
-.el-submenu__title {
+.el-sub-menu__title {
 	height: 56px;
 	line-height: 56px;
 	position: relative;
@@ -769,7 +769,7 @@
 	white-space: nowrap;
 	list-style: none;
 }
-.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: none;
 	transform: none;
 }
@@ -826,12 +826,12 @@
 .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-submenu {
+.el-sub-menu {
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 }
-.el-submenu__title {
+.el-sub-menu__title {
 	font-size: 14px;
 	color: #303133;
 	padding: 0 20px;
@@ -840,35 +840,35 @@
 	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 	box-sizing: border-box;
 }
-.el-submenu__title * {
+.el-sub-menu__title * {
 	vertical-align: middle;
 }
-.el-submenu__title i {
+.el-sub-menu__title i {
 	color: #909399;
 }
-.el-submenu__title:focus,
-.el-submenu__title:hover {
+.el-sub-menu__title:focus,
+.el-sub-menu__title:hover {
 	outline: 0;
 	background-color: rgb(236, 240, 251);
 }
-.el-submenu__title.is-disabled {
+.el-sub-menu__title.is-disabled {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu__title:hover {
+.el-sub-menu__title:hover {
 	background-color: rgb(236, 240, 251);
 }
-.el-submenu .el-menu {
+.el-sub-menu .el-menu {
 	border: none;
 }
-.el-submenu .el-menu-item {
+.el-sub-menu .el-menu-item {
 	height: 50px;
 	line-height: 50px;
 	padding: 0 45px;
 	min-width: 200px;
 }
-.el-submenu__icon-arrow {
+.el-sub-menu__icon-arrow {
 	position: absolute;
 	top: 50%;
 	right: 20px;
@@ -879,20 +879,20 @@
 	transition: transform 0.3s, -webkit-transform 0.3s;
 	font-size: 12px;
 }
-.el-submenu.is-active .el-submenu__title {
+.el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom-color: #4165d7;
 }
-.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: rotateZ(180deg);
 	transform: rotateZ(180deg);
 }
-.el-submenu.is-disabled .el-menu-item,
-.el-submenu.is-disabled .el-submenu__title {
+.el-sub-menu.is-disabled .el-menu-item,
+.el-sub-menu.is-disabled .el-sub-menu__title {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu [class^="el-icon-"] {
+.el-sub-menu [class^="el-icon-"] {
 	vertical-align: middle;
 	margin-right: 5px;
 	width: 24px;
@@ -914,7 +914,7 @@
 	line-height: 1;
 	vertical-align: middle;
 }
-.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transition: 0.2s;
 	transition: 0.2s;
 	opacity: 0;
@@ -12000,8 +12000,8 @@
 
 /* custom */
 
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover,
 .app-slider .cl-slider-menu .el-menu .el-menu-item.is-active {
 	background-color: #4165d7 !important;
diff --git a/public/theme/green.css b/public/theme/green.css
index 5a16589..824a9d0 100644
--- a/public/theme/green.css
+++ b/public/theme/green.css
@@ -278,7 +278,7 @@
 	box-sizing: border-box;
 	text-align: center;
 }
-.el-menu--collapse .el-menu .el-submenu,
+.el-menu--collapse .el-menu .el-sub-menu,
 .el-menu--popup {
 	min-width: 200px;
 }
@@ -455,7 +455,7 @@
 	background-color: #fff;
 }
 .el-dropdown-menu,
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	z-index: 10;
 	-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
@@ -645,7 +645,7 @@
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
 	background-color: #fff;
 }
 .el-menu::after,
@@ -674,35 +674,35 @@
 .el-menu--horizontal > .el-menu-item a:hover {
 	color: inherit;
 }
-.el-menu--horizontal > .el-submenu {
+.el-menu--horizontal > .el-sub-menu {
 	float: left;
 }
-.el-menu--horizontal > .el-submenu:focus,
-.el-menu--horizontal > .el-submenu:hover {
+.el-menu--horizontal > .el-sub-menu:focus,
+.el-menu--horizontal > .el-sub-menu:hover {
 	outline: 0;
 }
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
+.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom: 2px solid #51c21a;
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
 	height: 60px;
 	line-height: 60px;
 	border-bottom: 2px solid transparent;
 	color: #909399;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
 	position: static;
 	vertical-align: middle;
 	margin-left: 8px;
 	margin-top: -3px;
 }
 .el-menu--horizontal .el-menu .el-menu-item,
-.el-menu--horizontal .el-menu .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu__title {
 	background-color: #fff;
 	float: none;
 	height: 36px;
@@ -711,7 +711,7 @@
 	color: #909399;
 }
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
 	color: #303133;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
@@ -727,18 +727,18 @@
 	width: 64px;
 }
 .el-menu--collapse > .el-menu-item [class^="el-icon-"],
-.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title [class^="el-icon-"] {
 	margin: 0;
 	vertical-align: middle;
 	width: 24px;
 	text-align: center;
 }
-.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
-.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse > .el-menu-item .el-sub-menu__icon-arrow,
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	display: none;
 }
 .el-menu--collapse > .el-menu-item span,
-.el-menu--collapse > .el-submenu > .el-submenu__title span {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title span {
 	height: 0;
 	width: 0;
 	overflow: hidden;
@@ -748,10 +748,10 @@
 .el-menu--collapse > .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-menu--collapse .el-submenu {
+.el-menu--collapse .el-sub-menu {
 	position: relative;
 }
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	position: absolute;
 	margin-left: 5px;
 	top: 0;
@@ -761,7 +761,7 @@
 	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .el-menu-item,
-.el-submenu__title {
+.el-sub-menu__title {
 	height: 56px;
 	line-height: 56px;
 	position: relative;
@@ -769,7 +769,7 @@
 	white-space: nowrap;
 	list-style: none;
 }
-.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: none;
 	transform: none;
 }
@@ -826,12 +826,12 @@
 .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-submenu {
+.el-sub-menu {
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 }
-.el-submenu__title {
+.el-sub-menu__title {
 	font-size: 14px;
 	color: #303133;
 	padding: 0 20px;
@@ -840,35 +840,35 @@
 	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 	box-sizing: border-box;
 }
-.el-submenu__title * {
+.el-sub-menu__title * {
 	vertical-align: middle;
 }
-.el-submenu__title i {
+.el-sub-menu__title i {
 	color: #909399;
 }
-.el-submenu__title:focus,
-.el-submenu__title:hover {
+.el-sub-menu__title:focus,
+.el-sub-menu__title:hover {
 	outline: 0;
 	background-color: rgb(238, 249, 232);
 }
-.el-submenu__title.is-disabled {
+.el-sub-menu__title.is-disabled {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu__title:hover {
+.el-sub-menu__title:hover {
 	background-color: rgb(238, 249, 232);
 }
-.el-submenu .el-menu {
+.el-sub-menu .el-menu {
 	border: none;
 }
-.el-submenu .el-menu-item {
+.el-sub-menu .el-menu-item {
 	height: 50px;
 	line-height: 50px;
 	padding: 0 45px;
 	min-width: 200px;
 }
-.el-submenu__icon-arrow {
+.el-sub-menu__icon-arrow {
 	position: absolute;
 	top: 50%;
 	right: 20px;
@@ -879,20 +879,20 @@
 	transition: transform 0.3s, -webkit-transform 0.3s;
 	font-size: 12px;
 }
-.el-submenu.is-active .el-submenu__title {
+.el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom-color: #51c21a;
 }
-.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: rotateZ(180deg);
 	transform: rotateZ(180deg);
 }
-.el-submenu.is-disabled .el-menu-item,
-.el-submenu.is-disabled .el-submenu__title {
+.el-sub-menu.is-disabled .el-menu-item,
+.el-sub-menu.is-disabled .el-sub-menu__title {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu [class^="el-icon-"] {
+.el-sub-menu [class^="el-icon-"] {
 	vertical-align: middle;
 	margin-right: 5px;
 	width: 24px;
@@ -914,7 +914,7 @@
 	line-height: 1;
 	vertical-align: middle;
 }
-.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transition: 0.2s;
 	transition: 0.2s;
 	opacity: 0;
@@ -12000,8 +12000,8 @@
 
 /* custom */
 
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover,
 .app-slider .cl-slider-menu .el-menu .el-menu-item.is-active {
 	background-color: #51c21a !important;
diff --git a/public/theme/purple.css b/public/theme/purple.css
index fdbe6b8..550c427 100644
--- a/public/theme/purple.css
+++ b/public/theme/purple.css
@@ -278,7 +278,7 @@
 	box-sizing: border-box;
 	text-align: center;
 }
-.el-menu--collapse .el-menu .el-submenu,
+.el-menu--collapse .el-menu .el-sub-menu,
 .el-menu--popup {
 	min-width: 200px;
 }
@@ -455,7 +455,7 @@
 	background-color: #fff;
 }
 .el-dropdown-menu,
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	z-index: 10;
 	-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
@@ -645,7 +645,7 @@
 }
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
 .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
-.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title:hover {
 	background-color: #fff;
 }
 .el-menu::after,
@@ -674,35 +674,35 @@
 .el-menu--horizontal > .el-menu-item a:hover {
 	color: inherit;
 }
-.el-menu--horizontal > .el-submenu {
+.el-menu--horizontal > .el-sub-menu {
 	float: left;
 }
-.el-menu--horizontal > .el-submenu:focus,
-.el-menu--horizontal > .el-submenu:hover {
+.el-menu--horizontal > .el-sub-menu:focus,
+.el-menu--horizontal > .el-sub-menu:hover {
 	outline: 0;
 }
-.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
-.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu:focus .el-sub-menu__title,
+.el-menu--horizontal > .el-sub-menu:hover .el-sub-menu__title {
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom: 2px solid #d0378d;
 	color: #303133;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__title {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
 	height: 60px;
 	line-height: 60px;
 	border-bottom: 2px solid transparent;
 	color: #909399;
 }
-.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+.el-menu--horizontal > .el-sub-menu .el-sub-menu__icon-arrow {
 	position: static;
 	vertical-align: middle;
 	margin-left: 8px;
 	margin-top: -3px;
 }
 .el-menu--horizontal .el-menu .el-menu-item,
-.el-menu--horizontal .el-menu .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu__title {
 	background-color: #fff;
 	float: none;
 	height: 36px;
@@ -711,7 +711,7 @@
 	color: #909399;
 }
 .el-menu--horizontal .el-menu .el-menu-item.is-active,
-.el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title {
+.el-menu--horizontal .el-menu .el-sub-menu.is-active > .el-sub-menu__title {
 	color: #303133;
 }
 .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
@@ -727,18 +727,18 @@
 	width: 64px;
 }
 .el-menu--collapse > .el-menu-item [class^="el-icon-"],
-.el-menu--collapse > .el-submenu > .el-submenu__title [class^="el-icon-"] {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title [class^="el-icon-"] {
 	margin: 0;
 	vertical-align: middle;
 	width: 24px;
 	text-align: center;
 }
-.el-menu--collapse > .el-menu-item .el-submenu__icon-arrow,
-.el-menu--collapse > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse > .el-menu-item .el-sub-menu__icon-arrow,
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	display: none;
 }
 .el-menu--collapse > .el-menu-item span,
-.el-menu--collapse > .el-submenu > .el-submenu__title span {
+.el-menu--collapse > .el-sub-menu > .el-sub-menu__title span {
 	height: 0;
 	width: 0;
 	overflow: hidden;
@@ -748,10 +748,10 @@
 .el-menu--collapse > .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-menu--collapse .el-submenu {
+.el-menu--collapse .el-sub-menu {
 	position: relative;
 }
-.el-menu--collapse .el-submenu .el-menu {
+.el-menu--collapse .el-sub-menu .el-menu {
 	position: absolute;
 	margin-left: 5px;
 	top: 0;
@@ -761,7 +761,7 @@
 	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 .el-menu-item,
-.el-submenu__title {
+.el-sub-menu__title {
 	height: 56px;
 	line-height: 56px;
 	position: relative;
@@ -769,7 +769,7 @@
 	white-space: nowrap;
 	list-style: none;
 }
-.el-menu--collapse .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse .el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: none;
 	transform: none;
 }
@@ -826,12 +826,12 @@
 .el-menu-item.is-active i {
 	color: inherit;
 }
-.el-submenu {
+.el-sub-menu {
 	list-style: none;
 	margin: 0;
 	padding-left: 0;
 }
-.el-submenu__title {
+.el-sub-menu__title {
 	font-size: 14px;
 	color: #303133;
 	padding: 0 20px;
@@ -840,35 +840,35 @@
 	transition: border-color 0.3s, background-color 0.3s, color 0.3s;
 	box-sizing: border-box;
 }
-.el-submenu__title * {
+.el-sub-menu__title * {
 	vertical-align: middle;
 }
-.el-submenu__title i {
+.el-sub-menu__title i {
 	color: #909399;
 }
-.el-submenu__title:focus,
-.el-submenu__title:hover {
+.el-sub-menu__title:focus,
+.el-sub-menu__title:hover {
 	outline: 0;
 	background-color: rgb(250, 235, 244);
 }
-.el-submenu__title.is-disabled {
+.el-sub-menu__title.is-disabled {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu__title:hover {
+.el-sub-menu__title:hover {
 	background-color: rgb(250, 235, 244);
 }
-.el-submenu .el-menu {
+.el-sub-menu .el-menu {
 	border: none;
 }
-.el-submenu .el-menu-item {
+.el-sub-menu .el-menu-item {
 	height: 50px;
 	line-height: 50px;
 	padding: 0 45px;
 	min-width: 200px;
 }
-.el-submenu__icon-arrow {
+.el-sub-menu__icon-arrow {
 	position: absolute;
 	top: 50%;
 	right: 20px;
@@ -879,20 +879,20 @@
 	transition: transform 0.3s, -webkit-transform 0.3s;
 	font-size: 12px;
 }
-.el-submenu.is-active .el-submenu__title {
+.el-sub-menu.is-active .el-sub-menu__title {
 	border-bottom-color: #d0378d;
 }
-.el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
+.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transform: rotateZ(180deg);
 	transform: rotateZ(180deg);
 }
-.el-submenu.is-disabled .el-menu-item,
-.el-submenu.is-disabled .el-submenu__title {
+.el-sub-menu.is-disabled .el-menu-item,
+.el-sub-menu.is-disabled .el-sub-menu__title {
 	opacity: 0.25;
 	cursor: not-allowed;
 	background: 0 0 !important;
 }
-.el-submenu [class^="el-icon-"] {
+.el-sub-menu [class^="el-icon-"] {
 	vertical-align: middle;
 	margin-right: 5px;
 	width: 24px;
@@ -914,7 +914,7 @@
 	line-height: 1;
 	vertical-align: middle;
 }
-.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
 	-webkit-transition: 0.2s;
 	transition: 0.2s;
 	opacity: 0;
@@ -12014,18 +12014,18 @@
 	color: #666;
 }
 
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover,
 .app-slider .cl-slider-menu .el-menu .el-menu-item.is-active {
 	background-color: #fff !important;
 	border-right: 2px solid #d0378d;
 }
 
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover span,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title:hover .icon-svg,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active span,
-.app-slider .cl-slider-menu .el-menu .el-submenu__title.is-active .icon-svg,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover span,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title:hover .icon-svg,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active span,
+.app-slider .cl-slider-menu .el-menu .el-sub-menu__title.is-active .icon-svg,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover span,
 .app-slider .cl-slider-menu .el-menu .el-menu-item:hover .icon-svg,
 .app-slider .cl-slider-menu .el-menu .el-menu-item.is-active span,
diff --git a/src/assets/css/element-variables.scss b/src/assets/css/element-variables.scss
index 8352cda..ffe4b38 100644
--- a/src/assets/css/element-variables.scss
+++ b/src/assets/css/element-variables.scss
@@ -4,10 +4,10 @@ $--color-danger: $color-danger;
 $--color-warning: $color-warning;
 $--color-info: $color-info;
 
-$--font-path: "element-plus/lib/theme-chalk/fonts";
+$--font-path: "element-plus/dist/fonts";
 
 // 动态主题色，开发时可注释，会影响页面加载速度
-@import "element-plus/packages/theme-chalk/src/index";
+// @import "element-plus/packages/theme-chalk/src/index";
 
 // 默认主题色
-// @import "element-plus/lib/theme-chalk/index.css";
+@import "element-plus/dist/index.css";
diff --git a/src/cool/modules/base/components/menu/slider/index.scss b/src/cool/modules/base/components/menu/slider/index.scss
index 6051619..722c5f7 100644
--- a/src/cool/modules/base/components/menu/slider/index.scss
+++ b/src/cool/modules/base/components/menu/slider/index.scss
@@ -10,7 +10,7 @@
 	.el-menu {
 		border-right: 0;
 
-		.el-submenu__title,
+		.el-sub-menu__title,
 		&-item {
 			&.is-active,
 			&:hover {
@@ -19,7 +19,7 @@
 			}
 		}
 
-		.el-submenu__title,
+		.el-sub-menu__title,
 		&-item,
 		&__title {
 			color: #eee;
@@ -42,7 +42,7 @@
 		}
 
 		&--collapse {
-			.el-submenu__title {
+			.el-sub-menu__title {
 				.icon-svg {
 					margin-left: 2px;
 					font-size: 19px;
@@ -63,7 +63,7 @@
 
 	&.el-menu {
 		&--vertical {
-			.el-submenu {
+			.el-sub-menu {
 				&__title {
 					display: flex;
 					align-items: center;
diff --git a/src/cool/modules/base/components/menu/slider/index.tsx b/src/cool/modules/base/components/menu/slider/index.tsx
index 0c79b92..6818eb8 100644
--- a/src/cool/modules/base/components/menu/slider/index.tsx
+++ b/src/cool/modules/base/components/menu/slider/index.tsx
@@ -59,7 +59,7 @@ export default defineComponent({
 
 					if (e.type == 0) {
 						html = h(
-							<el-submenu></el-submenu>,
+							<el-sub-menu></el-sub-menu>,
 							{
 								index: String(e.id),
 								key: e.id,
diff --git a/src/cool/modules/demo/components/crud/upsert.vue b/src/cool/modules/demo/components/crud/upsert.vue
index bfd5a10..d2a8b43 100644
--- a/src/cool/modules/demo/components/crud/upsert.vue
+++ b/src/cool/modules/demo/components/crud/upsert.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="demo-upsert">
-		<cl-upsert ref="upsertRef" :items="items" />
+		<cl-upsert ref="upsertRef" :items="items" :dialog="dialog" />
 	</div>
 </template>
 
@@ -12,6 +12,13 @@ export default defineComponent({
 	setup() {
 		const upsertRef = ref<UpsertRef>();
 
+		const dialog = {
+			props: {
+				fullscreen: false,
+				width: "1200px"
+			}
+		};
+
 		const items = ref<UpsertItem[]>([
 			{
 				label: "测试hook",
@@ -136,7 +143,8 @@ export default defineComponent({
 
 		return {
 			items,
-			upsertRef
+			upsertRef,
+			dialog
 		};
 	}
 });
diff --git a/yarn.lock b/yarn.lock
index 8cea5c4..68d20d0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -971,14 +971,14 @@ change-case@^4.1.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
-cl-admin-crud-vue3@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.7.0.tgz#e30401cd80b96ed971eec14e4340c58114a42acc"
-  integrity sha1-4wQBzYC5btlx7sFOQ0DFgRSkKsw=
+cl-admin-crud-vue3@^0.7.2:
+  version "0.7.2"
+  resolved "https://registry.nlark.com/cl-admin-crud-vue3/download/cl-admin-crud-vue3-0.7.2.tgz?cache=0&sync_timestamp=1629800578492&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcl-admin-crud-vue3%2Fdownload%2Fcl-admin-crud-vue3-0.7.2.tgz#9cc6b59673d54297ebd21ae750b36725076afebe"
+  integrity sha1-nMa1lnPVQpfr0hrnULNnJQdq/r4=
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.6.5"
-    element-plus "^1.0.2-beta.65"
+    element-plus "^1.1.0-beta.1"
     merge "^2.1.1"
     mitt "^2.1.0"
     vue "^3.2.1"
@@ -1407,10 +1407,24 @@ electron-to-chromium@^1.3.811:
   resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.812.tgz?cache=0&sync_timestamp=1629324236911&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.812.tgz#4c4fb407e0e1335056097f172e9f2c0a09efe77d"
   integrity sha1-TE+0B+DhM1BWCX8XLp8sCgnv530=
 
-element-plus@^1.0.2-beta.65:
-  version "1.0.2-beta.71"
-  resolved "https://registry.nlark.com/element-plus/download/element-plus-1.0.2-beta.71.tgz?cache=0&sync_timestamp=1629258544058&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felement-plus%2Fdownload%2Felement-plus-1.0.2-beta.71.tgz#148f16d5a0a800549989f7869bbf4d656c652d36"
-  integrity sha1-FI8W1aCoAFSZifeGm79NZWxlLTY=
+element-plus@^1.1.0-beta.1:
+  version "1.1.0-beta.4"
+  resolved "https://registry.nlark.com/element-plus/download/element-plus-1.1.0-beta.4.tgz#c82afb73ad5e35fc0ee99274783c1bbcfd8493f1"
+  integrity sha1-yCr7c61eNfwO6ZJ0eDwbvP2Ek/E=
+  dependencies:
+    "@element-plus/icons" "^0.0.11"
+    "@popperjs/core" "^2.4.4"
+    async-validator "^3.4.0"
+    dayjs "1.x"
+    lodash "^4.17.20"
+    mitt "^2.1.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.1"
+
+element-plus@^1.1.0-beta.6:
+  version "1.1.0-beta.6"
+  resolved "https://registry.nlark.com/element-plus/download/element-plus-1.1.0-beta.6.tgz#ba47b09b3ca434b17c6e21cc88934657d6b42ff8"
+  integrity sha1-ukewmzykNLF8biHMiJNGV9a0L/g=
   dependencies:
     "@element-plus/icons" "^0.0.11"
     "@popperjs/core" "^2.4.4"