sh-view 1.7.6 → 2.0.1

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "sh-view",
-  "version": "1.7.6",
-  "description": "基于vxe-table、view-ui-plus二次封装",
+  "version": "2.0.1",
+  "description": "基于vxe-table二次封装",
   "main": "packages/index.js",
   "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
     "lib": "vue-cli-service build --target lib packages/index.js --name sh-view --dest lib"
   },
   "keywords": [
@@ -15,7 +17,6 @@
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.5.2",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "@tinymce/tinymce-vue": "^5.0.0",
     "@vue-office/docx": "^1.2.3",
     "@vue-office/excel": "^1.2.7",
@@ -23,26 +24,25 @@
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.32.0",
+    "countup.js": "^1.9.3",
     "cron-parser": "^4.8.1",
+    "element-resize-detector": "^1.2.0",
     "exceljs": "^4.3.0",
-    "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
     "jszip": "^3.10.1",
-    "sh-tools": "^1.2.6",
+    "popper.js": "^1.16.1",
+    "sh-tools": "^1.4.0",
     "tinymce": "^5.10.5",
-    "view-ui-plus": "^1.3.14",
     "vue": "^3.3.4",
     "vue-demi": "^0.13.11",
     "vue-masonry": "^0.16.0",
-    "vue-ripple-directive": "^2.0.1",
     "vue-router": "^4.2.2",
     "vuex": "^4.1.0",
-    "vxe-table": "^4.5.0-beta.20",
+    "vxe-table": "^4.5.5",
     "vxe-table-plugin-export-pdf": "^3.0.4",
     "vxe-table-plugin-export-xlsx": "^3.0.5",
     "xe-clipboard": "^1.10.2",
-    "xe-utils": "^3.5.11",
-    "xlsx": "^0.18.5"
+    "xe-utils": "^3.5.11"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

package/packages/assets/css/animated.scss

@@ -12,7 +12,6 @@
 	height: 100%;
 	position: absolute;
 }
-
 .sh-pop-in-enter-from, .sh-pop-out-leave-to {
 	transform: translateX(50%);
 	opacity: 0;
@@ -21,7 +20,6 @@
 	transform: translateX(0);
 	opacity: 1;
 }
-
 .sh-pop-out-enter-from, .sh-pop-in-leave-to {
 	transform: translateX(-50%);
 	opacity: 0;
@@ -30,4 +28,171 @@
 	transform: translateX(0);
 	opacity: 1;
 }
+$animation-time: .3s;
+$animation-time-quick: .15s;
+$transition-time: .2s;
+@mixin motion-common($time) {
+	animation-duration: $time;
+	animation-fill-mode: both;
+}
+@mixin make-motion($className, $keyframeName, $time: $animation-time) {
+	.#{$className}-enter-active, .#{$className}-appear {
+		@include motion-common($time);
+		animation-play-state: paused;
+	}
+	.#{$className}-leave-active {
+		@include motion-common($time);
+		animation-play-state: paused;
+	}
+	.#{$className}-enter-active, .#{$className}-appear {
+		animation-name: #{$keyframeName}In;
+		animation-play-state: running;
+	}
+	.#{$className}-leave-active {
+		animation-name: #{$keyframeName}Out;
+		animation-play-state: running;
+	}
+}
+@mixin fade-motion($className, $keyframeName) {
+	@include make-motion($className, $keyframeName, $animation-time-quick);
+	.#{$className}-enter-active, .#{$className}-appear {
+		opacity: 0;
+		animation-timing-function: linear;
+	}
+		.#{$className}-leave-active {
+		animation-timing-function: linear;
+	}
+}
+@mixin move-motion($className, $keyframeName) {
+	@include make-motion($className, $keyframeName);
+	.#{$className}-enter-active, .#{$className}-appear {
+		opacity: 0;
+		animation-timing-function: ease-in-out;
+	}
+	.#{$className}-leave-active {
+		animation-timing-function: ease-in-out;
+	}
+}
+@mixin ease-motion($className, $keyframeName) {
+	@include make-motion($className, $keyframeName);
+	.#{$className}-enter-active, .#{$className}-appear {
+		opacity: 0;
+		animation-timing-function: linear;
+		animation-duration: $transition-time;
+	}
+	.#{$className}-leave-active {
+		animation-timing-function: linear;
+		animation-duration: $transition-time;
+	}
+}
+@mixin slide-motion($className, $keyframeName) {
+	@include make-motion($className, $keyframeName);
+	.#{$className}-enter-active, .#{$className}-appear {
+		opacity: 0;
+		animation-timing-function: ease-in-out;
+	}
+	.#{$className}-leave-active {
+		animation-timing-function: ease-in-out;
+	}
+}
 
+@include fade-motion(fade, shFade);
+@include move-motion(move-up, shMoveUp);
+@include move-motion(move-down, shMoveDown);
+@include move-motion(move-left, shMoveLeft);
+@include move-motion(move-right, shMoveRight);
+@include ease-motion(ease, shEase);
+@include slide-motion(transition-drop, shTransitionDrop);
+@include slide-motion(slide-up, shSlideUp);
+@include slide-motion(slide-down, shSlideDown);
+@include slide-motion(slide-left, shSlideLeft);
+@include slide-motion(slide-right, shSlideRight);
+
+@keyframes shFadeIn {
+	0% { opacity: 0; }
+	100% { opacity: 1; }
+}
+@keyframes shFadeOut {
+	0% { opacity: 1; }
+	100% { opacity: 0; }
+}
+@keyframes shMoveDownIn {
+	0% { transform-origin: 0 0; transform: translateY(100%); opacity: 0; }
+	100% { transform-origin: 0 0; transform: translateY(0%); opacity: 1; }
+}
+@keyframes shMoveDownOut {
+	0% { transform-origin: 0 0; transform: translateY(0%); opacity: 1; }
+	100% { transform-origin: 0 0; transform: translateY(100%); opacity: 0; }
+}
+@keyframes shMoveLeftIn {
+	0% { transform-origin: 0 0; transform: translateX(-100%); opacity: 0; }
+	100% { transform-origin: 0 0; transform: translateX(0%); opacity: 1; }
+}
+@keyframes shMoveLeftOut {
+	0% { transform-origin: 0 0; transform: translateX(0%); opacity: 1; }
+	100% { transform-origin: 0 0; transform: translateX(-100%); opacity: 0; }
+}
+@keyframes shMoveRightIn {
+	0% { opacity: 0; transform-origin: 0 0; transform: translateX(100%); }
+	100% { opacity: 1; transform-origin: 0 0; transform: translateX(0%); }
+}
+@keyframes shMoveRightOut {
+	0% { transform-origin: 0 0; transform: translateX(0%); opacity: 1; }
+	100% { transform-origin: 0 0; transform: translateX(100%); opacity: 0; }
+}
+@keyframes shMoveUpIn {
+	0% { transform-origin: 0 0; transform: translateY(-100%); opacity: 0; }
+	100% { transform-origin: 0 0; transform: translateY(0%); opacity: 1; }
+}
+@keyframes shMoveUpOut {
+	0% { transform-origin: 0 0; transform: translateY(0%); opacity: 1; }
+	100% { transform-origin: 0 0; transform: translateY(-100%); opacity: 0; }
+}
+@keyframes shEaseIn {
+	0% { opacity: 0; transform: scale(0.9); }
+	100% { opacity: 1; transform: scale(1); }
+}
+@keyframes shEaseOut {
+	0% { opacity: 1; transform: scale(1); }
+	100% { opacity: 0; transform: scale(0.9); }
+}
+@keyframes shTransitionDropIn {
+	0% { opacity: 0; transform: scaleY(0.8); }
+	100% { opacity: 1; transform: scaleY(1); }
+}
+@keyframes shTransitionDropOut {
+	0% { opacity: 1; transform: scaleY(1); }
+	100% { opacity: 0; transform: scaleY(0.8); }
+}
+@keyframes shSlideUpIn {
+	0% { opacity: 0; transform-origin: 0 0; transform: scaleY(.8); }
+	100% { opacity: 1; transform-origin: 0 0; transform: scaleY(1); }
+}
+@keyframes shSlideUpOut {
+	0% { opacity: 1; transform-origin: 0 0; transform: scaleY(1); }
+	100% { opacity: 0; transform-origin: 0 0; transform: scaleY(.8); }
+}
+@keyframes shSlideDownIn {
+	0% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(.8); }
+	100% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); }
+}
+@keyframes shSlideDownOut {
+	0% { opacity: 1; transform-origin: 100% 100%; transform: scaleY(1); }
+	100% { opacity: 0; transform-origin: 100% 100%; transform: scaleY(.8); }
+}
+@keyframes shSlideLeftIn {
+	0% { opacity: 0; transform-origin: 0 0; transform: scaleX(.8); }
+	100% { opacity: 1; transform-origin: 0 0; transform: scaleX(1); }
+}
+@keyframes shSlideLeftOut {
+	0% { opacity: 1; transform-origin: 0 0; transform: scaleX(1); }
+	100% { opacity: 0; transform-origin: 0 0; transform: scaleX(.8); }
+}
+@keyframes shSlideRightIn {
+	0% { opacity: 0; transform-origin: 100% 0; transform: scaleX(.8); }
+	100% { opacity: 1; transform-origin: 100% 0; transform: scaleX(1); }
+}
+@keyframes shSlideRightOut {
+	0% { opacity: 1; transform-origin: 100% 0; transform: scaleX(1); }
+	100% { opacity: 0; transform-origin: 100% 0; transform: scaleX(.8); }
+}

package/packages/assets/css/loader.scss

@@ -2,64 +2,64 @@
 .loading{position:relative; text-align:center; margin: auto; width:40px; height:40px; display: inline-block}
 .loadtext{position: relative; text-align: center; width: 100%; margin-top: .5em}
 .loading0{width:10px; height:10px; border-radius:50%; display:inline-block; position:relative; left:-100px; animation:shadowRolling 2s linear infinite}
-.loading1{ border:2px solid var(--theme-color); border-top-color:transparent; border-radius:100%; animation:circle infinite .75s linear}
-.loading2{ border:2px solid var(--theme-color); border-top-color:var(--theme-weak-color); border-right-color:var(--theme-weak-color); border-bottom-color:var(--theme-weak-color); border-radius:100%; animation:circle infinite .75s linear}
-.loading3{ border:2px solid var(--theme-color); border-top-color:transparent; border-bottom-color:transparent; border-radius:100%; animation:arrow-circle infinite .75s linear}
-.loading3:after,.loading3:before{position:absolute; top:24px; left:-2px; border-top:5px solid var(--theme-color); border-right:5px solid transparent; border-left:5px solid transparent; content:""; transform:rotate(-30deg)}
+.loading1{ border:2px solid var(--vxe-primary-color); border-top-color:transparent; border-radius:100%; animation:circle infinite .75s linear}
+.loading2{ border:2px solid var(--vxe-primary-color); border-top-color:var(--vxe-primary-lighten-color); border-right-color:var(--vxe-primary-lighten-color); border-bottom-color:var(--vxe-primary-lighten-color); border-radius:100%; animation:circle infinite .75s linear}
+.loading3{ border:2px solid var(--vxe-primary-color); border-top-color:transparent; border-bottom-color:transparent; border-radius:100%; animation:arrow-circle infinite .75s linear}
+.loading3:after,.loading3:before{position:absolute; top:24px; left:-2px; border-top:5px solid var(--vxe-primary-color); border-right:5px solid transparent; border-left:5px solid transparent; content:""; transform:rotate(-30deg)}
 .loading3:after{top:0; left:20.5px; transform:rotate(150deg)}
-.loading4{ border-radius:100%; background-color:var(--theme-color); animation:ball-scale infinite linear .75s}
+.loading4{ border-radius:100%; background-color:var(--vxe-primary-color); animation:ball-scale infinite linear .75s}
 .loading5{ padding-right: 40px}
-.loading5:after,.loading5:before{position:absolute; width:10px; height:10px; content:""; border-radius:100%; background-color:var(--theme-color)}
+.loading5:after,.loading5:before{position:absolute; width:10px; height:10px; content:""; border-radius:100%; background-color:var(--vxe-primary-color)}
 .loading5:before{transform:translate(0,0); animation:ball-circle-before infinite 1.5s linear}
 .loading5:after{transform:translate(30px,30px); animation:ball-circle-after infinite 1.5s linear}
-.loading6{display:block; width:6px; height:10px; animation:rectangle infinite 1s ease-in-out -.2s; background-color:var(--theme-color)}
-.loading6:after,.loading6:before{position:absolute; width:6px; height:10px; content:""; background-color:var(--theme-color)}
+.loading6{display:block; width:6px; height:10px; animation:rectangle infinite 1s ease-in-out -.2s; background-color:var(--vxe-primary-color)}
+.loading6:after,.loading6:before{position:absolute; width:6px; height:10px; content:""; background-color:var(--vxe-primary-color)}
 .loading6:before{left:-14px; animation:rectangle infinite 1s ease-in-out -.4s}
 .loading6:after{right:-14px; animation:rectangle infinite 1s ease-in-out}
 .loading7{ top:10px; animation:heart infinite .85s linear}
-.loading7:after,.loading7:before{position:absolute; top:0; left:20px; width:20px; height:35px; content:""; transform:rotate(-45deg); transform-origin:0 100%; border-radius:20px 20px 0 0; background:var(--theme-color)}
+.loading7:after,.loading7:before{position:absolute; top:0; left:20px; width:20px; height:35px; content:""; transform:rotate(-45deg); transform-origin:0 100%; border-radius:20px 20px 0 0; background:var(--vxe-primary-color)}
 .loading7:after{left:0; transform:rotate(45deg); transform-origin:100% 100%}
 .loading8{ padding-top:30px; perspective:200px}
 .loading8:after,.loading8:before{position:absolute; width:15px; height:15px; content:""; animation:jumping .5s infinite alternate; background:rgba(0,0,0,0)}
 .loading8:before{left:0}
 .loading8:after{right:0; animation-delay:.15s}
-.loading9{ animation:satellite 3s infinite linear; border:1px solid var(--theme-color); border-radius:100%}
-.loading9:after,.loading9:before{position:absolute; left:1px; top:1px; width:8px; height:8px; content:""; border-radius:100%; background-color:var(--theme-color); box-shadow:0 0 10px var(--theme-color)}
+.loading9{ animation:satellite 3s infinite linear; border:1px solid var(--vxe-primary-color); border-radius:100%}
+.loading9:after,.loading9:before{position:absolute; left:1px; top:1px; width:8px; height:8px; content:""; border-radius:100%; background-color:var(--vxe-primary-color); box-shadow:0 0 10px var(--vxe-primary-color)}
 .loading9:after{right:0; width:14px; height:14px; margin:11px}
 .loading10{display:block; font-size:0;}
-.loading10:after,.loading10:before{content:''; display:inline-block; border-color: var(--theme-color); float:none; position:absolute; top:50%; left:50%; background:0 0; border-style:solid; border-width:2px; border-radius:100%; animation:ball-clip-rotate-multiple-rotate 1.5s ease-in-out infinite}
+.loading10:after,.loading10:before{content:''; display:inline-block; border-color: var(--vxe-primary-color); float:none; position:absolute; top:50%; left:50%; background:0 0; border-style:solid; border-width:2px; border-radius:100%; animation:ball-clip-rotate-multiple-rotate 1.5s ease-in-out infinite}
 .loading10:before{position:absolute; width:32px; height:32px; border-right-color:transparent; border-left-color:transparent}
 .loading10:after{width:16px; height:16px; border-top-color:transparent; border-bottom-color:transparent; animation-duration:1s; animation-direction:reverse}
-.loading11{display:block; font-size:0; color:var(--theme-color); }
+.loading11{display:block; font-size:0; color:var(--vxe-primary-color); }
 .loading11:after,.loading11:before{content:''; display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor; position:absolute; top:50%; left:50%; border-radius:100%}
 .loading11:before{position:absolute; width:32px; height:32px; background:0 0; border-style:solid; border-width:2px; border-right-color:transparent; border-left-color:transparent; animation:ball-clip-rotate-pulse-rotate 1s cubic-bezier(.09,.57,.49,.9) infinite}
 .loading11:after{width:16px; height:16px; animation:ball-clip-rotate-pulse-scale 1s cubic-bezier(.09,.57,.49,.9) infinite}
-.loading12{display:block; font-size:0; color:var(--theme-color); }
+.loading12{display:block; font-size:0; color:var(--vxe-primary-color); }
 .loading12:after,.loading12:before{content:''; display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor; position:absolute; top:0; left:0; width:40px; height:40px; border-radius:100%; opacity:.5; animation:ball-scale-pulse 2s infinite ease-in-out}
 .loading12:after{animation-delay:-1s}
-.loading13{display:block; font-size:0; animation:ball-spin-rotate 2s infinite linear; color:var(--theme-color);}
+.loading13{display:block; font-size:0; animation:ball-spin-rotate 2s infinite linear; color:var(--vxe-primary-color);}
 .loading13:after,.loading13:before{content:''; display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor; position:absolute; top:0; width:60%; height:60%; border-radius:100%; animation:ball-spin-bounce 2s infinite ease-in-out}
 .loading13:after{top:auto; bottom:0; animation-delay:-1s}
-.loading14{display:block; font-size:0; color:var(--theme-color);}
+.loading14{display:block; font-size:0; color:var(--vxe-primary-color);}
 .loading14:after,.loading14:before{content:''; display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor; position:absolute; left:0; width:100%}
 .loading14:before{top:-25%; z-index:1; height:100%; border-radius:10%; animation:square-jelly-box-animate .6s -.1s linear infinite}
-.loading14:after{bottom:-9%; height:10%; background:var(--theme-color); border-radius:50%; opacity:.2; animation:square-jelly-box-shadow .6s -.1s linear infinite}
-.loading15{display:block; font-size:0; color:var(--theme-color);}
+.loading14:after{bottom:-9%; height:10%; background:var(--vxe-primary-color); border-radius:50%; opacity:.2; animation:square-jelly-box-shadow .6s -.1s linear infinite}
+.loading15{display:block; font-size:0; color:var(--vxe-primary-color);}
 .loading15:before{content:''; display:inline-block; float:none; background-color:currentColor; border:0 solid currentColor; width:100%; height:100%; border-radius:0; animation:square-spin 3s 0s cubic-bezier(.09,.57,.49,.9) infinite}
-.loading16{ display:inline-block; padding:0; border-radius:100%; border:5px solid; border-top-color:var(--theme-color); border-bottom-color:rgba(0,0,0,.1); border-left-color:var(--theme-color); border-right-color:rgba(0,0,0,.1); animation:loading-animation 1s ease-in-out infinite}
-.loading17{ border:3px solid var(--theme-weak-color); border-radius:50%; display:inline-block; animation:rotation 1s linear infinite}
-.loading17:after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; border:3px solid transparent; border-bottom-color:var(--theme-color)}
-.loading18{ border:3px solid var(--theme-weak-color); border-radius:50%; display:inline-block; animation:rotation 1s linear infinite}
-.loading18:after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; border:3px solid; border-color:var(--theme-color) transparent}
-.loading19{ border-radius:50%; display:inline-block; border:3px solid; border-color:var(--theme-weak-color) var(--theme-weak-color) transparent; animation:rotation 1s linear infinite}
-.loading19:after{content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:3px solid; border-color:transparent var(--theme-color) var(--theme-color); width:24px; height:24px; border-radius:50%; -webkit-animation:rotationBack .5s linear infinite; animation:rotationBack .5s linear infinite; transform-origin:center center}
-.loading20{ border-radius:50%; display:inline-block; border:3px solid; border-color:var(--theme-weak-color) var(--theme-weak-color) transparent transparent; animation:rotation 1s linear infinite}
-.loading20:after,.loading20:before{content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:3px solid; border-color:transparent transparent var(--theme-color) var(--theme-color); width:30px; height:30px; border-radius:50%; -webkit-animation:rotationBack .5s linear infinite; animation:rotationBack .5s linear infinite; transform-origin:center center}
-.loading20:before{width:32px; height:32px; border-color:var(--theme-weak-color) var(--theme-weak-color) transparent transparent; -webkit-animation:rotation 1.5s linear infinite; animation:rotation 1.5s linear infinite}
-.loading21{ border-radius:50%; display:inline-block; border-top:3px solid var(--theme-color); border-right:3px solid transparent; animation:rotation 1s linear infinite}
-.loading22{ border-radius:50%; display:inline-block; border-top:4px solid var(--theme-weak-color); border-right:4px solid transparent; animation:rotation 1s linear infinite}
-.loading22:after{content:""; position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; border-bottom:4px solid var(--theme-color); border-left:4px solid transparent}
-.loading23{width:8px; height:40px; border-radius:4px; display:inline-block; background:currentColor; color:var(--theme-weak-color); animation:loading-animation-m .3s .3s linear infinite alternate}
+.loading16{ display:inline-block; padding:0; border-radius:100%; border:5px solid; border-top-color:var(--vxe-primary-color); border-bottom-color:rgba(0,0,0,.1); border-left-color:var(--vxe-primary-color); border-right-color:rgba(0,0,0,.1); animation:loading-animation 1s ease-in-out infinite}
+.loading17{ border:3px solid var(--vxe-primary-lighten-color); border-radius:50%; display:inline-block; animation:rotation 1s linear infinite}
+.loading17:after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; border:3px solid transparent; border-bottom-color:var(--vxe-primary-color)}
+.loading18{ border:3px solid var(--vxe-primary-lighten-color); border-radius:50%; display:inline-block; animation:rotation 1s linear infinite}
+.loading18:after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; border:3px solid; border-color:var(--vxe-primary-color) transparent}
+.loading19{ border-radius:50%; display:inline-block; border:3px solid; border-color:var(--vxe-primary-lighten-color) var(--vxe-primary-lighten-color) transparent; animation:rotation 1s linear infinite}
+.loading19:after{content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:3px solid; border-color:transparent var(--vxe-primary-color) var(--vxe-primary-color); width:24px; height:24px; border-radius:50%; -webkit-animation:rotationBack .5s linear infinite; animation:rotationBack .5s linear infinite; transform-origin:center center}
+.loading20{ border-radius:50%; display:inline-block; border:3px solid; border-color:var(--vxe-primary-lighten-color) var(--vxe-primary-lighten-color) transparent transparent; animation:rotation 1s linear infinite}
+.loading20:after,.loading20:before{content:""; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:3px solid; border-color:transparent transparent var(--vxe-primary-color) var(--vxe-primary-color); width:30px; height:30px; border-radius:50%; -webkit-animation:rotationBack .5s linear infinite; animation:rotationBack .5s linear infinite; transform-origin:center center}
+.loading20:before{width:32px; height:32px; border-color:var(--vxe-primary-lighten-color) var(--vxe-primary-lighten-color) transparent transparent; -webkit-animation:rotation 1.5s linear infinite; animation:rotation 1.5s linear infinite}
+.loading21{ border-radius:50%; display:inline-block; border-top:3px solid var(--vxe-primary-color); border-right:3px solid transparent; animation:rotation 1s linear infinite}
+.loading22{ border-radius:50%; display:inline-block; border-top:4px solid var(--vxe-primary-lighten-color); border-right:4px solid transparent; animation:rotation 1s linear infinite}
+.loading22:after{content:""; position:absolute; left:0; top:0; width:40px; height:40px; border-radius:50%; border-bottom:4px solid var(--vxe-primary-color); border-left:4px solid transparent}
+.loading23{width:8px; height:40px; border-radius:4px; display:inline-block; background:currentColor; color:var(--vxe-primary-lighten-color); animation:loading-animation-m .3s .3s linear infinite alternate}
 .loading23:after,.loading23:before{content:""; width:8px; height:40px; border-radius:4px; background:currentColor; position:absolute; bottom:0; left:20px; animation:loading-animation-p .3s .45s linear infinite alternate}
 .loading23:before{left:-20px; animation-delay:0s}
 
@@ -90,8 +90,8 @@
     100%{transform:translate(0,0)}
 }
 @keyframes rectangle{
-    0%,100%,80%{height:20px; box-shadow:0 0 var(--theme-color)}
-    40%{height:30px; box-shadow:0 -20px var(--theme-color)}
+    0%,100%,80%{height:20px; box-shadow:0 0 var(--vxe-primary-color)}
+    40%{height:30px; box-shadow:0 -20px var(--vxe-primary-color)}
 }
 @keyframes heart{
     0%{transform:scale(.8)}
@@ -100,7 +100,7 @@
 }
 @keyframes jumping{
     0%{transform:scale(1) translateY(0) rotateX(0); box-shadow:0 0 0 transparent}
-    100%{transform:scale(1.2) translateY(-25px) rotateX(45deg); background:var(--theme-color); box-shadow:0 25px 40px var(--theme-color)}
+    100%{transform:scale(1.2) translateY(-25px) rotateX(45deg); background:var(--vxe-primary-color); box-shadow:0 25px 40px var(--vxe-primary-color)}
 }
 @keyframes satellite{from{transform:rotate(0) translateZ(0)}
     to{transform:rotate(360deg) translateZ(0)}
@@ -174,13 +174,13 @@
 }
 @keyframes shadowRolling{
     0%{box-shadow:0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)}
-    12%{box-shadow:100px 0 var(--theme-weak-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)}
-    25%{box-shadow:110px 0 var(--theme-weak-color),100px 0 var(--theme-weak-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)}
-    36%{box-shadow:120px 0 var(--theme-weak-color),110px 0 var(--theme-weak-color),100px 0 var(--theme-weak-color),0 0 rgba(255,255,255,0)}
-    50%{box-shadow:130px 0 var(--theme-weak-color),120px 0 var(--theme-weak-color),110px 0 var(--theme-weak-color),100px 0 var(--theme-weak-color)}
-    62%{box-shadow:200px 0 rgba(255,255,255,0),130px 0 var(--theme-weak-color),120px 0 var(--theme-weak-color),110px 0 var(--theme-weak-color)}
-    75%{box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--theme-weak-color),120px 0 var(--theme-weak-color)}
-    87%{box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--theme-weak-color)}
+    12%{box-shadow:100px 0 var(--vxe-primary-lighten-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)}
+    25%{box-shadow:110px 0 var(--vxe-primary-lighten-color),100px 0 var(--vxe-primary-lighten-color),0 0 rgba(255,255,255,0),0 0 rgba(255,255,255,0)}
+    36%{box-shadow:120px 0 var(--vxe-primary-lighten-color),110px 0 var(--vxe-primary-lighten-color),100px 0 var(--vxe-primary-lighten-color),0 0 rgba(255,255,255,0)}
+    50%{box-shadow:130px 0 var(--vxe-primary-lighten-color),120px 0 var(--vxe-primary-lighten-color),110px 0 var(--vxe-primary-lighten-color),100px 0 var(--vxe-primary-lighten-color)}
+    62%{box-shadow:200px 0 rgba(255,255,255,0),130px 0 var(--vxe-primary-lighten-color),120px 0 var(--vxe-primary-lighten-color),110px 0 var(--vxe-primary-lighten-color)}
+    75%{box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--vxe-primary-lighten-color),120px 0 var(--vxe-primary-lighten-color)}
+    87%{box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),130px 0 var(--vxe-primary-lighten-color)}
     100%{box-shadow:200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0),200px 0 rgba(255,255,255,0)}
 }
 @keyframes loading-animation-m{

package/packages/assets/css/main.scss

@@ -1,7 +1,7 @@
 *{ margin:0; padding:0; box-sizing:border-box; outline: none !important; }
 html{
-    font-size: var(--font-size-base);
-    line-height: 1.7;
+    font-size: var(--vxe-font-size);
+    line-height: 1.5;
 }
 body, html{
     -webkit-tap-highlight-color: transparent;
@@ -11,7 +11,7 @@ body, html{
     height: 100%;
     padding: 0;
     margin: 0;
-    color: var(--text-color);
+    color: var(--vxe-font-color);
 }
 #app{
     width: 100%;
@@ -25,13 +25,13 @@ body, html{
 *::-webkit-scrollbar-track {/*滚动条里面轨道*/
     box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
     border-radius: 0;
-    background: var(--theme-weak-color);
+    background: rgba(0,0,0,0.1);
 }
 *::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
     border-radius: 20px;
-    box-shadow: inset 0 0 0 var(--theme-weak-color);
-    background: var(--theme-color);
-    border: 1px solid var(--theme-weak-color);
+    box-shadow: inset 0 0 0 var(--vxe-primary-lighten-color);
+    background: var(--vxe-primary-color);
+    border: 1px solid var(--vxe-primary-lighten-color);
 }
 *::-webkit-scrollbar-thumb:hover {
     opacity: 0.9;
@@ -41,20 +41,20 @@ body, html{
 }
 /*边角，即两个滚动条的交汇处*/
 *::-webkit-scrollbar-corner {
-    background-color: var(--theme-weak-color);
+    background-color: var(--vxe-primary-lighten-color);
 }
 
 // 公共样式
-.red{ color: var(--error-color) !important; }
-.yellow{ color: var(--warning-color) !important; }
-.green{ color: var(--success-color) !important; }
-.blue{ color: var(--link-color) !important; }
-.primary{ color: var(--theme-color) !important; }
-.bgred{ background: var(--error-color) !important; color: #fff !important; }
-.bgyellow{ background: var(--warning-color) !important; color: #fff !important; }
-.bggreen{ background: var(--success-color) !important; color: #fff !important; }
-.bgblue{ background: var(--link-color) !important; color: #fff !important; }
-.bgprimary{ background: var(--theme-color) !important; color: #fff !important; }
+.red{ color: var(--vxe-danger-color) !important; }
+.yellow{ color: var(--vxe-warning-color) !important; }
+.green{ color: var(--vxe-success-color) !important; }
+.blue{ color: var(--vxe-info-color) !important; }
+.primary{ color: var(--vxe-primary-color) !important; }
+.bgred{ background: var(--vxe-danger-color) !important; color: #fff !important; }
+.bgyellow{ background: var(--vxe-warning-color) !important; color: #fff !important; }
+.bggreen{ background: var(--vxe-success-color) !important; color: #fff !important; }
+.bgblue{ background: var(--vxe-info-color) !important; color: #fff !important; }
+.bgprimary{ background: var(--vxe-primary-color) !important; color: #fff !important; }
 .hide{ display: none }
 .show{ display: block }
 .hidden{ overflow: hidden !important; }
@@ -64,7 +64,6 @@ textarea{ resize: none !important; }
 .fullscreen{ width: 100%; height: 100%; position: absolute; }
 .sh-full-with-title{ height: calc(100% - 41px) }
 .container-line{ margin: 10px 0; }
-.prevent--disabled{ background-color: #ddd !important; border-color: #ddd !important; color: #fff !important; pointerEvents: none !important; cursor: not-allowed !important; }
 
 .w-25 {width:25%!important}
 .w-30 {width:30%!important}
@@ -148,6 +147,13 @@ textarea{ resize: none !important; }
 
 
 // 清除原生input number 右侧操作符
+a{
+    color: var(--vxe-info-color);
+    cursor: pointer;
+    &:hover{
+        color: var(--vxe-info-color);
+    }
+}
 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {  -webkit-appearance: none; }
 input[type="number"]{  -moz-appearance: textfield; }
 .disabled-gray{ filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
@@ -155,14 +161,28 @@ input[type="number"]{  -moz-appearance: textfield; }
 
 // iview 样式调整
 .ivu-layout{ background: transparent }
-.ivu-drawer-content{ background-color: var(--body-background) }
+.ivu-drawer-content{ background-color: var(--vxe-table-body-background-color) }
+
+.sh-prevent--disabled{
+    background-color: #ddd !important;
+    border-color: #ddd !important;
+    color: #fff !important;
+    pointer-events: none !important;
+    cursor: not-allowed !important;
+}
+
+.sh-line-clamp{
+    display:-webkit-box;
+    -webkit-box-orient:vertical;
+    overflow:hidden
+}
 
 // 主题方块
 .sh-theme-pick{
     width: 16px;
     height: 16px;
     border-radius: 3px;
-    background: var(--theme-color);
+    background: var(--vxe-primary-color);
     display: inline-block;
     vertical-align: middle;
     margin-right: 5px;

package/packages/assets/css/theme.scss

@@ -4,53 +4,92 @@
  * @Description：自定义主题系列
  */
 :root{
-	--theme-color: #1890ff;
-	--theme-weak-color: #e7f1ff;
-	--font-size-base: 14px;
-	//暗色主题侧边栏
-	--theme-text-color          : hsla(0,0%,100%,.85);
-	--theme-active-color        : rgba(50,50,50,0.2);
-	--primary-color             : #1890ff;                         // 全局主色
-	--danger-color              : #ff3552;                          // 危险色
 	--link-color                : #1890ff;                            // 链接色
-	--success-color             : #25ad4a;                         // 成功色
-	--warning-color             : #faad14;                         // 警告色
-	--error-color               : #f5222d;                           // 错误色
-	--info-color                : #2db7f5;                            // 信息色
-	--body-background           : #ffffff;
 	--main-background           : #f5f7f9;
-	--header-color				: #f8f8f9;
-	--stripe-color				: #fafafa;
-	--hover-color				: #f5f7fa;
-	--title-color               : #17233d;
-	--text-color                : #515a6e;
-	--border-color              : #e0e0e0;
-	--disabled-color            : #f1f1f1;
-	--disabled-background       : #f3f3f3;
-	--font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-	--border-radius: 0px;
+	--box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
+	--primary-weak-color: #e7f1ff;
 }
 
-.sh-theme-black{ --theme-color: #191a23; --theme-weak-color: #f0f0f0; }
-.sh-theme-blue{ --theme-color: #1890ff; --theme-weak-color: #e7f1ff; }               	// 海蓝
-.sh-theme-dusk{ --theme-color: #e62340; --theme-weak-color: #ffe5e5; }               	// 薄暮
-.sh-theme-volcano{ --theme-color: #fa541c; --theme-weak-color: #ffe3da; }            	// 火山
-.sh-theme-sunset{ --theme-color: #FAAD14; --theme-weak-color: #fff2db; }             	// 日暮
-.sh-theme-mqing{ --theme-color: #13C2C2; --theme-weak-color: #dbffff; }              	// 明青
-.sh-theme-aurora-green{ --theme-color: #00b791; --theme-weak-color: #d8fff7; }       	// 极光绿
-.sh-theme-aurora-blue{ --theme-color: #003366; --theme-weak-color: #e2f1ff; }        	// 极客蓝
-.sh-theme-purple{  --theme-color: #722ED1; --theme-weak-color: #e6cdff; }            	// 酱紫
-.sh-theme-pink{  --theme-color: #ff5d7a; --theme-weak-color: #ffccd6; }            		// 少女
-
+.sh-theme-black{
+	--vxe-primary-color: #191a23;
+	--vxe-primary-lighten-color: #cbcbcb;
+	--vxe-primary-darken-color: #0d0e10;
+	--primary-weak-color: #f0f0f0;
+}
+// 薄暮
+.sh-theme-dusk{
+	--vxe-primary-color: #e62340;
+	--vxe-primary-lighten-color: #ff93a3;
+	--vxe-primary-darken-color: #e50023;
+	--primary-weak-color: #ffe5e5;
+}
+// 火山
+.sh-theme-volcano{
+	--vxe-primary-color: #fa541c;
+	--vxe-primary-lighten-color: #ffae93;
+	--vxe-primary-darken-color: #e83e00;
+	--primary-weak-color: #ffe3da;
+}
+// 日暮
+.sh-theme-sunset{
+	--vxe-primary-color: #FAAD14;
+	--vxe-primary-lighten-color: #ffda91;
+	--vxe-primary-darken-color: #e79a00;
+	--primary-weak-color: #fff2db;
+}
+// 明青
+.sh-theme-mqing{
+	--vxe-primary-color: #13C2C2;
+	--vxe-primary-lighten-color: #8effff;
+	--vxe-primary-darken-color: #00bdbd;
+	--primary-weak-color: #dbffff;
+}
+// 极光绿
+.sh-theme-aurora-green{
+	--vxe-primary-color: #00b791;
+	--vxe-primary-lighten-color: #5efdcd;
+	--vxe-primary-darken-color: #009475;
+	--primary-weak-color: #d8fff7;
+}
+// 极客蓝
+.sh-theme-aurora-blue{
+	--vxe-primary-color: #003366;
+	--vxe-primary-lighten-color: #80c1ff;
+	--vxe-primary-darken-color: #00264f;
+	--primary-weak-color: #e2f1ff;
+}
+// 酱紫
+.sh-theme-purple{
+	--vxe-primary-color: #722ED1;
+	--vxe-primary-lighten-color: #bc8eff;
+	--vxe-primary-darken-color: #5b13be;
+	--primary-weak-color: #e6cdff;
+}
+// 少女
+.sh-theme-pink{
+	--vxe-primary-color: #ff5d7a;
+	--vxe-primary-lighten-color: #ff90a3;
+	--vxe-primary-darken-color: #e03554;
+	--primary-weak-color: #ffccd6;
+}
+// 暗黑
 .sh-dark-mode{
-	--body-background: 		#141414;
-	--main-background: 		#0a0a0a;
-	--theme-weak-color: 	#222222;
-	--header-color: 		#222222;
-	--stripe-color: 		#040404;
-	--hover-color: 			#555555;
-	--border-color: 		#454545;
-	--disabled-color: 		#212121;
-	--disabled-background: 	#232323;
-	--text-color: 			#999999;
+	--vxe-font-color: 						#999999;
+	--vxe-icon-background-color: 			#999999;
+	--vxe-table-font-color: 				#999999;
+	--vxe-table-header-background-color: 	#222222;
+	--vxe-table-body-background-color: 		#141414;
+	--vxe-table-footer-background-color:	#141414;
+	--vxe-input-background-color: 			#0a0a0a;
+	--vxe-textarea-background-color:		#0a0a0a;
+	--vxe-textarea-count-background-color:	#0a0a0a;
+	--vxe-table-border-color: 				#454545;
+	--vxe-input-border-color:				#454545;
+	--vxe-pager-background-color:			#141414;
+	--vxe-pager-perfect-background-color:			#141414;
+	--vxe-pager-perfect-button-background-color:	#454545;
+	--vxe-button-default-background-color:	#454545;
+	--vxe-switch-close-background-color:	#454545;
+	--main-background: 						#0a0a0a;
+	--primary-weak-color: 					#222222;
 }