sh-view 1.5.2

package/.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true
+	},
+	extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
+	plugins: ['vue', 'prettier'],
+	parserOptions: {
+		parser: '@babel/eslint-parser',
+		requireConfigFile: false
+	},
+	rules: {
+		'prettier/prettier': 'error',
+		'no-console': 'off',
+		'no-debugger': 'off',
+		'no-unused-vars': 'off',
+		'no-empty': 'off',
+		'vue/no-v-html': 'off',
+		'vue/require-default-prop': 'off'
+	}
+}

package/README.en.md

@@ -0,0 +1,36 @@
+# sh-view
+
+#### Description
+{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/README.md

@@ -0,0 +1,39 @@
+# sh-view
+
+#### 介绍
+{**以下是 Gitee 平台说明，您可以替换此简介**
+Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
+无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}
+
+#### 软件架构
+软件架构说明
+
+
+#### 安装教程
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 使用说明
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### 参与贡献
+
+1.  Fork 本仓库
+2.  新建 Feat_xxx 分支
+3.  提交代码
+4.  新建 Pull Request
+
+
+#### 特技
+
+1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
+2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
+3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
+4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
+5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
+6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "sh-view",
+  "version": "1.5.2",
+  "description": "基于vxe-table、view-ui-plus二次封装",
+  "main": "packages/index.js",
+  "scripts": {
+    "lib": "vue-cli-service build --target lib packages/index.js --name sh-view --dest lib"
+  },
+  "keywords": [
+    "sh-view"
+  ],
+  "author": "神秘的sh",
+  "license": "ISC",
+  "dependencies": {
+    "@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",
+    "babel-polyfill": "^6.26.0",
+    "codemirror": "^6.0.1",
+    "core-js": "^3.8.3",
+    "cron-parser": "^4.8.1",
+    "docx-preview": "^0.1.11",
+    "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
+    "jspdf": "^2.5.1",
+    "jszip": "^3.10.1",
+    "tinymce": "^5.10.5",
+    "sh-tools": "^1.2.0",
+    "view-ui-plus": "^1.3.14",
+    "vue": "^3.3.4",
+    "vue-ripple-directive": "^2.0.1",
+    "vue-router": "^4.2.2",
+    "vue-masonry": "^0.16.0",
+    "vuex": "^4.1.0",
+    "vxe-table": "^4.5.0-beta.10",
+    "vxe-table-plugin-export-pdf": "^3.0.4",
+    "vxe-table-plugin-export-xlsx": "^3.0.5",
+    "xe-clipboard": "^1.10.2",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "babel-loader": "^9.1.2",
+    "compression-webpack-plugin": "~6.1.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "html-webpack-tags-plugin": "^3.0.2",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0"
+  }
+}

package/packages/assets/css/animated.scss

@@ -0,0 +1,33 @@
+/* 设置持续时间和动画函数 */
+.sh-pop-in-enter-active,
+.sh-pop-in-leave-active,
+.sh-pop-out-enter-active,
+.sh-pop-out-leave-active,{
+	will-change: transform;
+	transform-origin: center;
+	transition: all 0.1s;
+	backface-visibility: hidden;
+	perspective: 1000px;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+}
+
+.sh-pop-in-enter-from, .sh-pop-out-leave-to {
+	transform: translateX(50%);
+	opacity: 0;
+}
+.sh-pop-in-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}
+
+.sh-pop-out-enter-from, .sh-pop-in-leave-to {
+	transform: translateX(-50%);
+	opacity: 0;
+}
+.sh-pop-out-enter-to {
+	transform: translateX(0);
+	opacity: 1;
+}
+

package/packages/assets/css/loader.scss

@@ -0,0 +1,193 @@
+.loadbox{position:relative; text-align:center; }
+.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)}
+.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}
+.loading5{ padding-right: 40px}
+.loading5:after,.loading5:before{position:absolute; width:10px; height:10px; content:""; border-radius:100%; background-color:var(--theme-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: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{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: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: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: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: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: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: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);}
+.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}
+.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}
+
+@keyframes circle{
+    0%{transform:rotate(0)}
+    100%{transform:rotate(360deg)}
+}
+@keyframes arrow-circle{
+    0%{transform:rotate(360deg)}
+    100%{transform:rotate(0)}
+}
+@keyframes ball-scale{
+    0%{transform:scale(.1); opacity:1}
+    100%{transform:scale(1); opacity:0}
+}
+@keyframes ball-circle-after{
+    0%{transform:translate(30px,30px)}
+    25%{transform:translate(0,30px)}
+    50%{transform:translate(0,0)}
+    75%{transform:translate(30px,0)}
+    100%{transform:translate(30px,30px)}
+}
+@keyframes ball-circle-before{
+    0%{transform:translate(0,0)}
+    25%{transform:translate(30px,0)}
+    50%{transform:translate(30px,30px)}
+    75%{transform:translate(0,30px)}
+    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)}
+}
+@keyframes heart{
+    0%{transform:scale(.8)}
+    50%{transform:scale(1)}
+    100%{transform:scale(.8)}
+}
+@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)}
+}
+@keyframes satellite{from{transform:rotate(0) translateZ(0)}
+    to{transform:rotate(360deg) translateZ(0)}
+}
+@keyframes ball-clip-rotate-multiple-rotate{
+    0%{transform:translate(-50%,-50%) rotate(0)}
+    50%{transform:translate(-50%,-50%) rotate(180deg)}
+    100%{transform:translate(-50%,-50%) rotate(360deg)}
+}
+@keyframes ball-clip-rotate-pulse-rotate{
+    0%{transform:translate(-50%,-50%) rotate(0)}
+    50%{transform:translate(-50%,-50%) rotate(180deg)}
+    100%{transform:translate(-50%,-50%) rotate(360deg)}
+}
+@keyframes ball-clip-rotate-pulse-scale{
+    0%,100%{opacity:1; transform:translate(-50%,-50%) scale(1)}
+    30%{opacity:.3; transform:translate(-50%,-50%) scale(.15)}
+}
+@keyframes ball-scale-pulse{
+    0%,100%{transform:scale(0)}
+    50%{transform:scale(1)}
+}
+@keyframes ball-spin-rotate{
+    100%{transform:rotate(360deg)}
+}
+@keyframes ball-spin-bounce{
+    0%,100%{transform:scale(0)}
+    50%{transform:scale(1)}
+}
+@keyframes square-jelly-box-animate{
+    17%{border-bottom-right-radius:10%}
+    25%{transform:translateY(25%) rotate(22.5deg)}
+    50%{border-bottom-right-radius:100%; transform:translateY(50%) scale(1,.9) rotate(45deg)}
+    75%{transform:translateY(25%) rotate(67.5deg)}
+    100%{transform:translateY(0) rotate(90deg)}
+}
+@keyframes square-jelly-box-shadow{50%{transform:scale(1.25,1)}
+}
+@keyframes square-loader{
+    0%{transform:rotate(0)}
+    25%{transform:rotate(180deg)}
+    50%{transform:rotate(180deg)}
+    75%{transform:rotate(360deg)}
+    100%{transform:rotate(360deg)}
+}
+@keyframes square-loader-inner{
+    0%{height:0}
+    25%{height:0}
+    50%{height:100%}
+    75%{height:100%}
+    100%{height:0}
+}
+@keyframes square-spin{
+    0%{transform:perspective(100px) rotateX(0) rotateY(0)}
+    25%{transform:perspective(100px) rotateX(180deg) rotateY(0)}
+    50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg)}
+    75%{transform:perspective(100px) rotateX(0) rotateY(180deg)}
+    100%{transform:perspective(100px) rotateX(0) rotateY(360deg)}
+}
+@keyframes loading-animation{
+    from{transform:rotate(0)}
+    to{transform:rotate(360deg)}
+}
+@keyframes rotation{
+    0%{transform:rotate(0)}
+    100%{transform:rotate(360deg)}
+}
+@keyframes rotationBack{
+    0%{transform:rotate(0)}
+    100%{transform:rotate(-360deg)}
+}
+@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)}
+    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{
+    0%{height:40px; transform:translateY(0)}
+    100%{height:10px; transform:translateY(30px)}
+}
+@keyframes loading-animation-p{
+    0%{height:48px}
+    100%{height:4.8px}
+}

package/packages/assets/css/main.scss

@@ -0,0 +1,235 @@
+*{ margin:0; padding:0; box-sizing:border-box; outline: none !important; }
+html{
+    font-size: var(--font-size-base);
+    line-height: 1.7;
+}
+body, html{
+    -webkit-tap-highlight-color: transparent;
+    word-break: break-all;
+    overflow-y: auto;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    color: var(--text-color);
+}
+#app{
+    width: 100%;
+    height: 100%;
+}
+/*滚动条样式*/
+*::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 12px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 12px;
+}
+*::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
+    border-radius: 0;
+    background: var(--theme-weak-color);
+}
+*::-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);
+}
+*::-webkit-scrollbar-thumb:hover {
+    opacity: 0.9;
+}
+*::-webkit-scrollbar-thumb:active {
+    opacity: 0.9;
+}
+/*边角，即两个滚动条的交汇处*/
+*::-webkit-scrollbar-corner {
+    background-color: var(--theme-weak-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; }
+.hide{ display: none }
+.show{ display: block }
+.hidden{ overflow: hidden !important; }
+input:focus{ box-shadow: none !important; }
+textarea{ resize: none !important; }
+.heightall{ height: 100%; position: relative }
+.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}
+.w-35 {width:35%!important}
+.w-40 {width:40%!important}
+.w-50 {width:50%!important}
+.w-60 {width:60%!important}
+.w-75 {width:75%!important}
+.w-100 {width:100%!important}
+.w-auto {width:auto!important}
+.m-0 {margin:0!important}
+.mt-0,.my-0 {margin-top:0!important}
+.mr-0,.mx-0 {margin-right:0!important}
+.mb-0,.my-0 {margin-bottom:0!important}
+.ml-0,.mx-0 {margin-left:0!important}
+.m-1 {margin:.25rem!important}
+.mt-1,.my-1 {margin-top:.25rem!important}
+.mr-1,.mx-1 {margin-right:.25rem!important}
+.mb-1,.my-1 {margin-bottom:.25rem!important}
+.ml-1,.mx-1 {margin-left:.25rem!important}
+.m-2 {margin:.5rem!important}
+.mt-2,.my-2 {margin-top:.5rem!important}
+.mr-2,.mx-2 {margin-right:.5rem!important}
+.mb-2,.my-2 {margin-bottom:.5rem!important}
+.ml-2,.mx-2 {margin-left:.5rem!important}
+.m-3 {margin:1rem!important}
+.mt-3,.my-3 {margin-top:1rem!important}
+.mr-3,.mx-3 {margin-right:1rem!important}
+.mb-3,.my-3 {margin-bottom:1rem!important}
+.ml-3,.mx-3 {margin-left:1rem!important}
+.m-4 {margin:1.5rem!important}
+.mt-4,.my-4 {margin-top:1.5rem!important}
+.mr-4,.mx-4 {margin-right:1.5rem!important}
+.mb-4,.my-4 {margin-bottom:1.5rem!important}
+.ml-4,.mx-4 {margin-left:1.5rem!important}
+.m-5 {margin:3rem!important}
+.mt-5,.my-5 {margin-top:3rem!important}
+.mr-5,.mx-5 {margin-right:3rem!important}
+.mb-5,.my-5 {margin-bottom:3rem!important}
+.ml-5,.mx-5 {margin-left:3rem!important}
+.p-0 {padding:0!important}
+.pt-0,.py-0 {padding-top:0!important}
+.pr-0,.px-0 {padding-right:0!important}
+.pb-0,.py-0 {padding-bottom:0!important}
+.pl-0,.px-0 {padding-left:0!important}
+.p-1 {padding:.25rem!important}
+.pt-1,.py-1 {padding-top:.25rem!important}
+.pr-1,.px-1 {padding-right:.25rem!important}
+.pb-1,.py-1 {padding-bottom:.25rem!important}
+.pl-1,.px-1 {padding-left:.25rem!important}
+.p-2 {padding:.5rem!important}
+.pt-2,.py-2 {padding-top:.5rem!important}
+.pr-2,.px-2 {padding-right:.5rem!important}
+.pb-2,.py-2 {padding-bottom:.5rem!important}
+.pl-2,.px-2 {padding-left:.5rem!important}
+.p-3 {padding:1rem!important}
+.pt-3,.py-3 {padding-top:1rem!important}
+.pr-3,.px-3 {padding-right:1rem!important}
+.pb-3,.py-3 {padding-bottom:1rem!important}
+.pl-3,.px-3 {padding-left:1rem!important}
+.p-4 {padding:1.5rem!important}
+.pt-4,.py-4 {padding-top:1.5rem!important}
+.pr-4,.px-4 {padding-right:1.5rem!important}
+.pb-4,.py-4 {padding-bottom:1.5rem!important}
+.pl-4,.px-4 {padding-left:1.5rem!important}
+.p-5 {padding:3rem!important}
+.pt-5,.py-5 {padding-top:3rem!important}
+.pr-5,.px-5 {padding-right:3rem!important}
+.pb-5,.py-5 {padding-bottom:3rem!important}
+.pl-5,.px-5 {padding-left:3rem!important}
+.m-auto {margin:auto!important}
+.mt-auto,.my-auto {margin-top:auto!important}
+.mr-auto,.mx-auto {margin-right:auto!important}
+.mb-auto,.my-auto {margin-bottom:auto!important}
+.ml-auto,.mx-auto {margin-left:auto!important}
+.textcenter{ text-align: center !important; }
+.textright{ text-align: right !important; }
+.textleft{ text-align: left !important; }
+.floatleft{ float: left }
+.floatright{ float: right }
+
+
+// 清除原生input number 右侧操作符
+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);}
+
+
+// iview 样式调整
+.ivu-layout{ background: transparent }
+.ivu-drawer-content{ background-color: var(--body-background) }
+
+// 主题方块
+.sh-theme-pick{
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    background: var(--theme-color);
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+
+// 布局样式
+.sh-layout-wrap {
+    background-color: var(--main-background);
+    .header-item{
+        padding: 0 8px;
+        cursor: pointer;
+        &:hover{
+            background-color: rgba(0, 0, 0, .1);
+        }
+    }
+    .sh-layout-layout-sider{
+        height: 100%;
+        flex-direction: row;
+    }
+    .sh-layout-layout-content{
+        overflow-x: hidden;
+        position: relative;
+        margin: 9px;
+    }
+    .sh-layout-layout-content-inner{
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: absolute;
+    }
+}
+.sh-layout-drawer-sider{
+    .sh-sys-logo{
+        height: auto;
+        max-height: 100px;
+    }
+}
+
+//sh空数据风格
+.sh-empty{
+    text-align: center;
+    line-height: 2;
+    padding: 10px;
+}
+
+//sh列表list风格
+.sh-list{
+}
+
+// sh-vxeform无底部提交按钮，做公共样式
+.sh-common-footer{
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .vxe-button + .vxe-button,
+    .vxe-button + .vxe-button--dropdown,
+    .vxe-input + .vxe-button,
+    .vxe-input + .vxe-button--dropdown{
+        margin-left: 5px;
+    }
+    .sh-table-form-buttons-left{
+        flex: 1;
+    }
+    .sh-table-form-buttons-right{
+    }
+}
+

package/packages/assets/css/theme.scss

@@ -0,0 +1,52 @@
+/**
+ * @author: 大山
+ * @date: 2021/4/1 8:58
+ * @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              : #e8e8e8;
+	--font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+	--border-radius: 0px;
+}
+
+.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-dark-mode{
+	--body-background: #141414;
+	--main-background: #0a0a0a;
+	--theme-weak-color: #222222;
+	--header-color: #222222;
+	--stripe-color: #040404;
+	--hover-color: #555555;
+	--border-color: #333;
+	--text-color: #999;
+}