github/magic-boot
github/magic-boot
4
0
Fork 0
mirror of https://gitee.com/ssssssss-team/magic-boot.git synced 2025-04-03 11:51:51 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

删除旧ui项目

Browse Source
This commit is contained in:
zegezy 2023-08-02 16:00:27 +08:00
parent db83fc535b
commit 651786fafb
119 changed files with 0 additions and 9268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
magic-boot-ui/.env.demo
View File

@ -1 +0,0 @@
VITE_APP_BASE_API = 'http://localhost:8081/'

1
magic-boot-ui/.env.development
View File

@ -1 +0,0 @@
VITE_APP_BASE_API = 'http://localhost:8081/'

1
magic-boot-ui/.env.production
View File

@ -1 +0,0 @@
VITE_APP_BASE_API = 'http://localhost:8081/'

7
magic-boot-ui/README.md
View File

@ -1,7 +0,0 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

2
magic-boot-ui/del_node_modules.cmd
View File

@ -1,2 +0,0 @@
del /f/s/q node_modules > nul;
rmdir /s/q node_modules;

21
magic-boot-ui/index.html
View File

@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html, body, #app{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

29
magic-boot-ui/package.json
View File

@ -1,29 +0,0 @@
{
"name": "magic-boot-vite",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"demo": "vite build --mode demo"
},
"dependencies": {
"axios": "^0.24.0",
"element-plus": "^2.2.6",
"js-sha256": "^0.9.0",
"nprogress": "0.2.0",
"path-browserify": "^1.0.1",
"vue": "^3.2.25",
"vue-cropper": "^1.0.2",
"vue-router": "^4.0.0-0",
"vuedraggable": "^4.1.0",
"xlsx": "^0.18.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.2.0",
"vite-plugin-svg-icons": "^1.1.0",
"sass": "^1.49.7",
"vite": "^2.8.0"
}
}

BIN
magic-boot-ui/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

3
magic-boot-ui/src/App.vue
View File

@ -1,3 +0,0 @@
<template>
<router-view />
</template>

68
magic-boot-ui/src/assets/css/common.css
View File

@ -1,68 +0,0 @@
@font-face {
font-family: PoetsenOne;
src: url(../fonts/PoetsenOne.woff2) format('woff2');
font-weight: 100;
font-style: normal;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
overflow: auto
}
::-webkit-scrollbar-thumb {
background-color: #e6e6e6;
min-height: 25px;
min-width: 25px;
border: 1px solid #e0e0e0;
border-radius: 99px
}
::-webkit-scrollbar-track {
background-color: #f7f7f7;
border: 1px solid #efefef
}
body{
--mb-main-color: #409EFF;
--mb-sidebar-width: 240px;
--mb-main-icon-color: #909399;
--mb-header-height: 60px;
--mb-avatar-text-size: 18px;
/*--mb-menu-item-height: 50px;*/
}
.el-header{
--el-header-height: var(--mb-header-height);
}
.el-avatar{
--el-avatar-text-size: var(--mb-avatar-text-size);
--el-avatar-bg-color: var(--mb-main-color);
border: 1px solid white;
}
.el-dialog__body{
padding: 5px 20px;
}
/*.el-sub-menu__title, .el-menu-item{*/
/* height: var(--mb-menu-item-height) !important;*/
/*}*/
.app-container hr {
border: none;
height: 1px;
background: #F3F3F3;
}
.toolbar-container{
margin-bottom: 10px
}
.toolbar-container > div,
.toolbar-container > button{
margin-left: 12px;
}
.toolbar-container > div:nth-child(1),
.toolbar-container > button:nth-child(1){
margin-left: 0px;
}
.clear{
clear: both;
}
a{
text-decoration: none;
}

BIN
magic-boot-ui/src/assets/fonts/PoetsenOne.woff2
View File

Binary file not shown.

98
magic-boot-ui/src/assets/images/login-bg.svg
View File

@ -1,98 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" preserveAspectRatio="xMidYMid" viewBox="0 0 1920 1080">
<g transform="translate(960,540) scale(1,-1) translate(-960,-540)"><path id="path0" d="M 1349.9098887622815 185.16915627008808 c 0 26.590437311255734 -6.5061708314774656 7.6376788021692 -14.143849633646665 7.6376788021692 S 1321.6221894949883 211.7595935813438 1321.6221894949883 185.16915627008808 s 6.5061708314774656 -7.6376788021692 14.143849633646665 -7.6376788021692 S 1349.9098887622815 158.57871895883235 1349.9098887622815 185.16915627008808 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="14.632267999638175" fill="#ff708e">
<animateMotion begin="-11.590466641060427s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path0"/>
</animateMotion>
</circle><path id="path1" d="M 1299.6932195239785 317.12638037505536 c 0 34.821134259509634 -8.520064765624698 10.001815159646386 -18.521879925271083 10.001815159646386 S 1262.6494596734362 351.947514634565 1262.6494596734362 317.12638037505536 s 8.520064765624698 -10.001815159646386 18.521879925271083 -10.001815159646386 S 1299.6932195239785 282.30524611554574 1299.6932195239785 317.12638037505536 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="17.30792014672236" fill="#de9dd6">
<animateMotion begin="-8.95589724484751s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path1"/>
</animateMotion>
</circle><path id="path2" d="M 111.25272199046691 375.8719982330086 c 0 28.024935326008073 -6.8571650265764434 8.049715465981043 -14.906880492557486 8.049715465981043 S 81.43896100535193 403.89693355901665 81.43896100535193 375.8719982330086 s 6.8571650265764434 -8.049715465981043 14.906880492557486 -8.049715465981043 S 111.25272199046691 347.8470629070005 111.25272199046691 375.8719982330086 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="12.669302833148285" fill="#e0ff77">
<animateMotion begin="-5.565159510466704s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path2"/>
</animateMotion>
</circle><path id="path3" d="M 1504.755000906474 640.8630363818409 c 0 33.780400040902855 -8.26541703128474 9.702880862812522 -17.96829789409726 9.702880862812522 S 1468.8184051182793 674.6434364227437 1468.8184051182793 640.8630363818409 s 8.26541703128474 -9.702880862812522 17.96829789409726 -9.702880862812522 S 1504.755000906474 607.082636340938 1504.755000906474 640.8630363818409 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="9.146958137129836" fill="#de9dd6">
<animateMotion begin="-14.752788268299275s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path3"/>
</animateMotion>
</circle><path id="path4" d="M 1438.7194047124874 900.4906795633224 c 0 32.724571530537666 -8.00707601279113 9.399610971537415 -17.406686984328545 9.399610971537415 S 1403.9060307438301 933.21525109386 1403.9060307438301 900.4906795633224 s 8.00707601279113 -9.399610971537415 17.406686984328545 -9.399610971537415 S 1438.7194047124874 867.7661080327847 1438.7194047124874 900.4906795633224 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="15.677317452896688" fill="#ff708e">
<animateMotion begin="-1.1425743261292354s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path4"/>
</animateMotion>
</circle><path id="path5" d="M 1377.8259677685908 190.2989727154286 c 0 33.5014862564454 -8.197172169130257 9.622767328978998 -17.819939498109257 9.622767328978998 S 1342.1860887723722 223.80045897187398 1342.1860887723722 190.2989727154286 s 8.197172169130257 -9.622767328978998 17.819939498109257 -9.622767328978998 S 1377.8259677685908 156.7974864589832 1377.8259677685908 190.2989727154286 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="10.545617900229804" fill="#51cacc">
<animateMotion begin="-9.925167277224837s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path5"/>
</animateMotion>
</circle><path id="path6" d="M 699.5619032555242 173.64339385556056 c 0 22.890529496325936 -5.600874238462728 6.574939323412769 -12.175813561875497 6.574939323412769 S 675.2102761317731 196.5339233518865 675.2102761317731 173.64339385556056 s 5.600874238462728 -6.574939323412769 12.175813561875497 -6.574939323412769 S 699.5619032555242 150.75286435923462 699.5619032555242 173.64339385556056 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="8.823697641429444" fill="#ff708e">
<animateMotion begin="-7.101400252511483s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path6"/>
</animateMotion>
</circle><path id="path7" d="M 1502.3184744544892 748.3256840717742 c 0 29.56321240330199 -7.233551971020699 8.491561009459081 -15.72511298047978 8.491561009459081 S 1470.8682484935298 777.8888964750762 1470.8682484935298 748.3256840717742 s 7.233551971020699 -8.491561009459081 15.72511298047978 -8.491561009459081 S 1502.3184744544892 718.7624716684721 1502.3184744544892 748.3256840717742 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="15.097313756793348" fill="#e0ff77">
<animateMotion begin="-16.2767664139038s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path7"/>
</animateMotion>
</circle><path id="path8" d="M 875.9912218633518 184.51950247788722 c 0 36.37142976127214 -8.899392388396373 10.447112803769658 -19.34650519216603 10.447112803769658 S 837.2982114790199 220.89093223915935 837.2982114790199 184.51950247788722 s 8.899392388396373 -10.447112803769658 19.34650519216603 -10.447112803769658 S 875.9912218633518 148.14807271661508 875.9912218633518 184.51950247788722 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="17.19104452482677" fill="#51cacc">
<animateMotion begin="-1.8652637198274213s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path8"/>
</animateMotion>
</circle><path id="path9" d="M 1479.2399634419357 61.33508696828571 c 0 34.11872390217692 -8.348198401596479 9.800058993178476 -18.148257394774955 9.800058993178476 S 1442.943448652386 95.45381087046263 1442.943448652386 61.33508696828571 s 8.348198401596479 -9.800058993178476 18.148257394774955 -9.800058993178476 S 1479.2399634419357 27.21636306610879 1479.2399634419357 61.33508696828571 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="15.855811877531224" fill="#9df871">
<animateMotion begin="-3.035988641499956s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path9"/>
</animateMotion>
</circle><path id="path10" d="M 571.4191895582195 191.5481744110148 c 0 20.79300718126673 -5.087650693288667 5.972459509512785 -11.060110202801452 5.972459509512785 S 549.2989691526167 212.34118159228154 549.2989691526167 191.5481744110148 s 5.087650693288667 -5.972459509512785 11.060110202801452 -5.972459509512785 S 571.4191895582195 170.75516722974805 571.4191895582195 191.5481744110148 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="16.72806401591559" fill="#ff708e">
<animateMotion begin="-1.7963849564032675s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path10"/>
</animateMotion>
</circle><path id="path11" d="M 105.18777938216608 104.43185429353139 c 0 26.00935428319513 -6.36399094163285 7.470771974960303 -13.834762916593153 7.470771974960303 S 77.51825354897979 130.44120857672652 77.51825354897979 104.43185429353139 s 6.36399094163285 -7.470771974960303 13.834762916593153 -7.470771974960303 S 105.18777938216608 78.42250001033625 105.18777938216608 104.43185429353139 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="16.44114740668901" fill="#51cacc">
<animateMotion begin="-3.6172728417846622s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path11"/>
</animateMotion>
</circle><path id="path12" d="M 53.5023681447867 1041.9723638812375 c 0 22.600107101926067 -5.5298134398329735 6.491520125021317 -12.021333564854292 6.491520125021317 S 29.459701015078114 1064.5724709831636 29.459701015078114 1041.9723638812375 s 5.5298134398329735 -6.491520125021317 12.021333564854292 -6.491520125021317 S 53.5023681447867 1019.3722567793114 53.5023681447867 1041.9723638812375 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="16.253802352244648" fill="#9df871">
<animateMotion begin="-2.2741458273148574s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path12"/>
</animateMotion>
</circle><path id="path13" d="M 1489.2513333213988 969.2237471962012 c 0 21.52668839880468 -5.2671684380054 6.183197731571558 -11.450366169576958 6.183197731571558 S 1466.350600982245 990.7504355950059 1466.350600982245 969.2237471962012 s 5.2671684380054 -6.183197731571558 11.450366169576958 -6.183197731571558 S 1489.2513333213988 947.6970587973965 1489.2513333213988 969.2237471962012 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="15.194742236185608" fill="#ff708e">
<animateMotion begin="-11.741976075373328s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path13"/>
</animateMotion>
</circle><path id="path14" d="M 1845.6473677110291 551.4828587242023 c 0 22.591554773482507 -5.527720848830826 6.489063605149231 -12.016784453980057 6.489063605149231 S 1821.613798803069 574.0744134976848 1821.613798803069 551.4828587242023 s 5.527720848830826 -6.489063605149231 12.016784453980057 -6.489063605149231 S 1845.6473677110291 528.8913039507198 1845.6473677110291 551.4828587242023 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="14.99698402981728" fill="#de9dd6">
<animateMotion begin="-18.600839623781276s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path14"/>
</animateMotion>
</circle><path id="path15" d="M 1922.0685155799683 945.9007213755189 c 0 31.615027706616466 -7.735591885661475 9.080912213602602 -16.81650409926408 9.080912213602602 S 1888.43550738144 977.5157490821354 1888.43550738144 945.9007213755189 s 7.735591885661475 -9.080912213602602 16.81650409926408 -9.080912213602602 S 1922.0685155799683 914.2856936689024 1922.0685155799683 945.9007213755189 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="8.827700721901026" fill="#9df871">
<animateMotion begin="-19.16890602299407s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path15"/>
</animateMotion>
</circle><path id="path16" d="M 100.86860223361062 27.378621310533717 c 0 34.76624257836834 -8.50663382236672 9.98604840016963 -18.49268222253635 9.98604840016963 S 63.883237788537926 62.14486388890206 63.883237788537926 27.378621310533717 s 8.50663382236672 -9.98604840016963 18.49268222253635 -9.98604840016963 S 100.86860223361062 -7.387621267834625 100.86860223361062 27.378621310533717 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="16.13956668595096" fill="#ff708e">
<animateMotion begin="-2.2692229534473984s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path16"/>
</animateMotion>
</circle><path id="path17" d="M 1178.9411193810608 445.72324429352415 c 0 30.400067965806628 -7.438314502271834 8.731934415710414 -16.17024891798225 8.731934415710414 S 1146.6006215450964 476.12331225933076 1146.6006215450964 445.72324429352415 s 7.438314502271834 -8.731934415710414 16.17024891798225 -8.731934415710414 S 1178.9411193810608 415.32317632771753 1178.9411193810608 445.72324429352415 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="15.357762329732441" fill="#51cacc">
<animateMotion begin="-10.157359703650904s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path17"/>
</animateMotion>
</circle><path id="path18" d="M 673.5817480982976 183.535715578992 c 0 25.221915941567396 -6.171319858043086 7.244592876833188 -13.415912734876274 7.244592876833188 S 646.7499226285449 208.7576315205594 646.7499226285449 183.535715578992 s 6.171319858043086 -7.244592876833188 13.415912734876274 -7.244592876833188 S 673.5817480982976 158.3137996374246 673.5817480982976 183.535715578992 z" fill="none" stroke="none"/>
<circle cx="0" cy="0" r="9.556473475843394" fill="#51cacc">
<animateMotion begin="-0.8141051610736438s" dur="20s" repeatCount="indefinite">
<mpath xlink:href="#path18"/>
</animateMotion>
</circle></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

138
magic-boot-ui/src/assets/images/login-bg1.svg
View File

@ -1,138 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#7aceff;display:block;z-index:1;position:relative" width="1920" height="1080" preserveAspectRatio="xMidYMid" viewBox="0 0 1920 1080">
<g transform="translate(960,540) scale(1,1) translate(-960,-540)"><g transform="translate(-100 416.03196572326607) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 416.03196572326607;1920 416.03196572326607" dur="500s" repeatCount="indefinite" begin="-5.139372331517178s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 596.4001678117764) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 596.4001678117764;1920 596.4001678117764" dur="500s" repeatCount="indefinite" begin="-130.3016475134896s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 26.545882090192208) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 26.545882090192208;1920 26.545882090192208" dur="500s" repeatCount="indefinite" begin="-418.3960343898864s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 571.769019413317) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 571.769019413317;1920 571.769019413317" dur="500s" repeatCount="indefinite" begin="-479.907328466289s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 299.0294986971487) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 299.0294986971487;1920 299.0294986971487" dur="500s" repeatCount="indefinite" begin="-227.05389635543605s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 963.5414388315442) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 963.5414388315442;1920 963.5414388315442" dur="500s" repeatCount="indefinite" begin="-257.66135282842185s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 381.5964835751399) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 381.5964835751399;1920 381.5964835751399" dur="500s" repeatCount="indefinite" begin="-307.0477827472562s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 645.4789577105932) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 645.4789577105932;1920 645.4789577105932" dur="500s" repeatCount="indefinite" begin="-202.62184460542164s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 869.0735193051235) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 869.0735193051235;1920 869.0735193051235" dur="500s" repeatCount="indefinite" begin="-255.24368861928292s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 361.72520676524846) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 361.72520676524846;1920 361.72520676524846" dur="500s" repeatCount="indefinite" begin="-483.79414705548476s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 86.68805096063784) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 86.68805096063784;1920 86.68805096063784" dur="500s" repeatCount="indefinite" begin="-320.8829128692832s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(0.55)"></path>
</g><g transform="translate(-100 488.9772963132972) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 488.9772963132972;1920 488.9772963132972" dur="250s" repeatCount="indefinite" begin="-170.39139507921476s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 4.576774043616565) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 4.576774043616565;1920 4.576774043616565" dur="250s" repeatCount="indefinite" begin="-316.15263864899003s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 214.60993590372678) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 214.60993590372678;1920 214.60993590372678" dur="250s" repeatCount="indefinite" begin="-398.4521377828001s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 1078.2795968790304) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1078.2795968790304;1920 1078.2795968790304" dur="250s" repeatCount="indefinite" begin="-91.39136730030228s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 696.282800231443) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 696.282800231443;1920 696.282800231443" dur="250s" repeatCount="indefinite" begin="-9.791027044726896s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 561.7712540738951) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 561.7712540738951;1920 561.7712540738951" dur="250s" repeatCount="indefinite" begin="-193.89859611923643s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 1027.434371957216) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1027.434371957216;1920 1027.434371957216" dur="250s" repeatCount="indefinite" begin="-208.13490311748794s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 723.5576871943198) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 723.5576871943198;1920 723.5576871943198" dur="250s" repeatCount="indefinite" begin="-397.71421883595184s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 138.14742803728817) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 138.14742803728817;1920 138.14742803728817" dur="250s" repeatCount="indefinite" begin="-468.4075429967608s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 1064.1245308500543) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1064.1245308500543;1920 1064.1245308500543" dur="250s" repeatCount="indefinite" begin="-127.52573851087668s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 867.7256355602567) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 867.7256355602567;1920 867.7256355602567" dur="250s" repeatCount="indefinite" begin="-404.38720114464013s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#ffffff" transform="scale(0.7)"></path>
</g><g transform="translate(-100 585.4335678795345) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 585.4335678795345;1920 585.4335678795345" dur="166.66666666666666s" repeatCount="indefinite" begin="-232.32351534757112s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 55.826384663633284) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 55.826384663633284;1920 55.826384663633284" dur="166.66666666666666s" repeatCount="indefinite" begin="-310.35651449581314s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 550.8735693730529) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 550.8735693730529;1920 550.8735693730529" dur="166.66666666666666s" repeatCount="indefinite" begin="-250.08402103222537s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 468.8701205905754) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 468.8701205905754;1920 468.8701205905754" dur="166.66666666666666s" repeatCount="indefinite" begin="-487.8153302121583s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 507.2526567834844) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 507.2526567834844;1920 507.2526567834844" dur="166.66666666666666s" repeatCount="indefinite" begin="-233.64601277250242s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 345.3058813907401) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 345.3058813907401;1920 345.3058813907401" dur="166.66666666666666s" repeatCount="indefinite" begin="-487.12855908306886s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 1031.1827146601443) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1031.1827146601443;1920 1031.1827146601443" dur="166.66666666666666s" repeatCount="indefinite" begin="-10.720882299359303s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 18.27432163445976) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 18.27432163445976;1920 18.27432163445976" dur="166.66666666666666s" repeatCount="indefinite" begin="-239.34624845076246s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 254.00652063210185) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 254.00652063210185;1920 254.00652063210185" dur="166.66666666666666s" repeatCount="indefinite" begin="-97.67550616205378s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 853.1521302679544) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 853.1521302679544;1920 853.1521302679544" dur="166.66666666666666s" repeatCount="indefinite" begin="-215.52668400815244s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 120.29600539710484) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 120.29600539710484;1920 120.29600539710484" dur="166.66666666666666s" repeatCount="indefinite" begin="-121.43545841045444s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#f1f2f3" transform="scale(0.85)"></path>
</g><g transform="translate(-100 739.4135223183714) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 739.4135223183714;1920 739.4135223183714" dur="125s" repeatCount="indefinite" begin="-433.4250149061785s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 239.0788419164232) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 239.0788419164232;1920 239.0788419164232" dur="125s" repeatCount="indefinite" begin="-407.9383077190322s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 573.1972400632184) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 573.1972400632184;1920 573.1972400632184" dur="125s" repeatCount="indefinite" begin="-456.49760543175864s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 915.5433684236687) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 915.5433684236687;1920 915.5433684236687" dur="125s" repeatCount="indefinite" begin="-40.03727141414903s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 824.8766336499561) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 824.8766336499561;1920 824.8766336499561" dur="125s" repeatCount="indefinite" begin="-16.039906214160293s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 499.265059924676) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 499.265059924676;1920 499.265059924676" dur="125s" repeatCount="indefinite" begin="-35.858363803996426s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 1022.1802798581422) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1022.1802798581422;1920 1022.1802798581422" dur="125s" repeatCount="indefinite" begin="-190.07909527181744s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 1062.112161307141) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 1062.112161307141;1920 1062.112161307141" dur="125s" repeatCount="indefinite" begin="-108.16335769140706s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 249.76500277280388) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 249.76500277280388;1920 249.76500277280388" dur="125s" repeatCount="indefinite" begin="-360.72984703184443s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 989.5257835559386) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 989.5257835559386;1920 989.5257835559386" dur="125s" repeatCount="indefinite" begin="-358.39639108375485s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 763.1858129038242) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 763.1858129038242;1920 763.1858129038242" dur="125s" repeatCount="indefinite" begin="-57.071504489237036s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g><g transform="translate(-100 394.96112430266106) rotate(0)">
<animateTransform attributeName="transform" type="translate" keyTimes="0;1" values="-100 394.96112430266106;1920 394.96112430266106" dur="125s" repeatCount="indefinite" begin="-175.51156196107908s"></animateTransform>
<path d="M84.717,33.597c0.791-2.503,1.186-5.138,1.186-7.773C85.903,11.594,74.308,0,60.079,0 c-9.881,0-18.445,5.534-22.793,13.702c-1.581-0.527-3.426-0.791-5.138-0.791c-9.486,0-17.128,7.642-17.128,17.128 c0,1.186,0.132,2.372,0.395,3.426C6.719,34.783,0,42.424,0,51.515C0,61.66,8.169,69.829,18.314,69.829h63.373 C91.831,69.829,100,61.66,100,51.515C99.868,42.556,93.281,35.046,84.717,33.597z" fill="#bddeff" transform="scale(1)"></path>
</g></g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
magic-boot-ui/src/assets/images/logo-magic-boot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

206
magic-boot-ui/src/compiler/sfc-compiler.js
View File

@ -1,206 +0,0 @@
import * as SFCCompiler from '@vue/compiler-sfc'
const COMP_IDENTIFIER = `__sfc__`
export function compileFile(filename, code, compiled) {
if (!code.trim()) {
compiled.errors = []
return
}
if (!filename.endsWith('.vue')) {
compiled.js = compiled.ssr = code
compiled.errors = []
return
}
const id = hashId(filename)
const { errors, descriptor } = SFCCompiler.parse(code, {
filename,
sourceMap: true
})
// console.log(descriptor)
if (errors.length) {
compiled.errors = errors
return
}
if (
(descriptor.script && descriptor.script.lang) ||
(descriptor.scriptSetup && descriptor.scriptSetup.lang) ||
descriptor.styles.some((s) => s.lang) ||
(descriptor.template && descriptor.template.lang)
) {
compiled.errors = [
'lang="x" pre-processors are not supported in the in-browser playground.'
]
return
}
const hasScoped = descriptor.styles.some((s) => s.scoped)
let clientCode = ''
let ssrCode = ''
const appendSharedCode = (code) => {
clientCode += code
ssrCode += code
}
const clientScriptResult = doCompileScript(descriptor, id, false)
if (!clientScriptResult) {
return
}
const [clientScript, bindings] = clientScriptResult
clientCode += clientScript
// script ssr only needs to be performed if using <script setup> where
// the render fn is inlined.
if (descriptor.scriptSetup) {
const ssrScriptResult = doCompileScript(descriptor, id, true)
if (!ssrScriptResult) {
return
}
ssrCode += ssrScriptResult[0]
} else {
// when no <script setup> is used, the script result will be identical.
ssrCode += clientScript
}
// template
// only need dedicated compilation if not using <script setup>
if (descriptor.template && !descriptor.scriptSetup) {
const clientTemplateResult = doCompileTemplate(
descriptor,
id,
bindings,
false
)
if (!clientTemplateResult) {
return
}
clientCode += clientTemplateResult
const ssrTemplateResult = doCompileTemplate(descriptor, id, bindings, true)
if (!ssrTemplateResult) {
return
}
ssrCode += ssrTemplateResult
}
if (hasScoped) {
appendSharedCode(
`\n${COMP_IDENTIFIER}.__scopeId = ${JSON.stringify(`data-v-${id}`)}`
)
}
if (clientCode || ssrCode) {
appendSharedCode(
`\n${COMP_IDENTIFIER}.__file = ${JSON.stringify(filename)}` +
`\nexport default ${COMP_IDENTIFIER}`
)
compiled.js = clientCode.trimStart()
compiled.ssr = ssrCode.trimStart()
}
// styles
let css = ''
for (const style of descriptor.styles) {
if (style.module) {
compiled.errors = [`<style module> is not supported in the playground.`]
return
}
const styleResult = SFCCompiler.compileStyle({
source: style.content,
filename,
id,
scoped: style.scoped,
modules: !!style.module
})
if (styleResult.errors.length) {
// postcss uses pathToFileURL which isn't polyfilled in the browser
// ignore these errors for now
if (!styleResult.errors[0].message.includes('pathToFileURL')) {
compiled.errors = styleResult.errors
}
// proceed even if css compile errors
} else {
css += styleResult.code + '\n'
}
}
if (css) {
compiled.css = css.trim()
} else {
compiled.css = '/* No <style> tags present */'
}
// clear errors
compiled.errors = []
}
function doCompileScript(descriptor, id, ssr) {
if (descriptor.script || descriptor.scriptSetup) {
try {
const compiledScript = SFCCompiler.compileScript(descriptor, {
id,
refSugar: true,
inlineTemplate: true,
templateOptions: {
ssr,
ssrCssVars: descriptor.cssVars
}
})
let code = ''
if (compiledScript.bindings) {
code += `\n/* Analyzed bindings: ${JSON.stringify(
compiledScript.bindings,
null,
2
)} */`
}
code +=
`\n` +
SFCCompiler.rewriteDefault(compiledScript.content, COMP_IDENTIFIER)
// console.log( SFCCompiler.rewriteDefault(compiledScript.content, COMP_IDENTIFIER))
return [code, compiledScript.bindings]
} catch (e) {
recordFileErrors([e])
return
}
} else {
return [`\nconst ${COMP_IDENTIFIER} = {}`, undefined]
}
}
function doCompileTemplate(descriptor, id, bindingMetadata, ssr) {
const templateResult = SFCCompiler.compileTemplate({
source: descriptor.template && descriptor.template.content,
filename: descriptor.filename,
id,
scoped: descriptor.styles.some(s => s.scoped),
slotted: descriptor.slotted,
ssr,
ssrCssVars: descriptor.cssVars,
isProd: false,
compilerOptions: {
bindingMetadata
}
})
if (templateResult.errors.length) {
recordFileErrors(templateResult.errors)
return
}
const fnName = ssr ? `ssrRender` : `render`
return (
`\n${templateResult.code.replace(
/\nexport (function|const) (render|ssrRender)/,
`$1 ${fnName}`
)}` + `\n${COMP_IDENTIFIER}.${fnName} = ${fnName}`
)
}
function hashId(filename) {
return btoa(filename).slice(0, 8)
}

23
magic-boot-ui/src/compiler/testCode.js
View File

@ -1,23 +0,0 @@
export const testCode = `
<template>
<div class="aaa">
{{ msg }}
<el-button type="primary" @click="$emit('xxClick')">阿斯顿发</el-button>
{{ props.aaaaaa }}
</div>
</template>
<script setup>
const msg = '11111'
const props = defineProps({
aaaaaa: String
})
</script>
<style scoped>
.aaa{
font-size: 30px;
color: red;
}
</style>
`

9
magic-boot-ui/src/components/index.js
View File

@ -1,9 +0,0 @@
import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('./**/*.vue')
export default function install (app) {
for (const [key, value] of Object.entries(components)) {
const name = key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
app.component(name, defineAsyncComponent(value))
}
}

141
magic-boot-ui/src/components/magic/basic/mb-button.vue
View File

@ -1,141 +0,0 @@
<template>
<el-button
v-bind="props_"
:plain="plain"
@click="buttonClick"
>
{{ props_.label }}
</el-button>
</template>
<script>
import { getToken } from '@/scripts/auth'
import {ElNotification} from "element-plus";
export default {
name: 'MbButton',
props: {
props: {
type: Object,
default: () => {}
},
plain: {
type: Boolean,
default: false
},
btnType: {
type: String,
default: ''
},
requestMethod: {
type: String,
default: 'get'
},
requestUrl: {
type: String,
default: ''
},
requestData: {
type: Object,
default: () => {}
},
beforeConfirm: {
type: String,
default: ''
},
successTips: {
type: String,
default: ''
},
failTips: {
type: String,
default: ''
},
confirmType: {
type: String,
default: 'warning'
},
afterHandler: {
type: Function,
default: () => {}
},
isOpen: {
type: Boolean,
default: false
}
},
data() {
return {
props_: this.props || {},
requestMethod_: this.requestMethod,
beforeConfirm_: this.beforeConfirm,
successTips_: this.successTips,
failTips_: this.failTips
}
},
created() {
if (this.btnType) {
if (this.btnType === 'delete') {
this.requestMethod_ = 'delete'
this.props_.type = 'danger'
this.props_.label = '删除'
this.props_.icon = 'ElIconDelete'
this.beforeConfirm_ = '此操作将永久删除该数据, 是否继续?'
this.successTips_ = '删除成功！'
this.failTips_ = '删除失败！'
}
}
},
methods: {
async buttonClick() {
if (this.beforeConfirm_) {
this.$confirm(this.beforeConfirm_, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: this.confirmType
}).then((res) => {
this.buttonClickRequest().then(() => {
this.afterHandler()
})
})
}
},
buttonClickRequest() {
// var requestOptions = {}
// requestOptions.url = this.requestUrl
// requestOptions.method = this.requestMethod_
// if (requestOptions.method === 'get') {
// requestOptions.params = this.requestData
// } else {
// requestOptions.data = this.requestData
// }
if (this.isOpen) {
return new Promise(() => {
window.open(this.$common.getUrl(process.env.VUE_APP_BASE_API + this.requestUrl, this.requestData) + '&token=' + getToken())
})
}
return new Promise((resolve, reject) => {
this.$request({
url: this.requestUrl,
method: this.requestMethod_,
params: this.requestData,
data: this.requestData
}).then(res => {
const { data } = res
if (data) {
ElNotification({
title: '成功',
message: this.successTips_,
type: 'success',
duration: 2000
})
} else {
this.$message.error(this.failTips_)
}
resolve()
})
})
}
}
}
</script>

106
magic-boot-ui/src/components/magic/basic/mb-editor-table.vue
View File

@ -1,106 +0,0 @@
<template>
<div>
<el-row style="margin-bottom: 6px" v-if="toolbar">
<el-button type="primary" @click="addRow">添加一行</el-button>
</el-row>
<mb-table ref="magicTable" v-bind="tableOptions">
<template v-for="col in cols" #[col.field]="{ index }">
<div v-if="!col.component">
{{ tableOptions.data[index][col.field] }}
</div>
<component
v-else
:is="col.component.startsWith('el-') ? col.component : 'mb-' + col.component"
v-model="tableOptions.data[index][col.field]"
v-bind="col.props"
@change="dataChange"
/>
</template>
</mb-table>
</div>
</template>
<script setup>
import { reactive, ref, watch, nextTick } from 'vue'
const emit = defineEmits(['update:modelValue', 'change'])
const magicTable = ref()
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
cols: {
type: Array,
default: () => []
},
showNo: {
type: Boolean,
default: true
},
operation: {
type: Boolean,
default: true
},
page: {
type: Boolean,
default: false
},
toolbar: {
type: Boolean,
default: true
}
})
const tableOptions = reactive({
data: props.modelValue,
cols: [],
page: props.page,
showNo: props.showNo
})
for (var i in props.cols) {
var col = props.cols[i]
tableOptions.cols.push({
...col,
type: 'dynamic'
})
}
if(props.operation){
tableOptions.cols.push({
label: '操作',
type: 'btns',
width: 85,
fixed: 'right',
btns: [{
label: '删除',
type: 'danger',
click: (row, index) => {
tableOptions.data.splice(index, 1)
}
}]
})
}
watch(() => props.modelValue, (value) => {
console.log(value)
tableOptions.data = value
}, {
deep: true
})
function addRow(){
tableOptions.data.push({})
}
function dataChange() {
console.log('更新')
console.log(tableOptions.data)
emit('update:modelValue', tableOptions.data)
emit('change', tableOptions.data)
}
</script>

26
magic-boot-ui/src/components/magic/basic/mb-icon.vue
View File

@ -1,26 +0,0 @@
<template>
<svg aria-hidden="true" class="mb-icon">
<use :xlink:href="symbolId" :class="className"/>
</svg>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
prefix: {
type: String,
default: 'mb-icon'
},
icon: String
});
const symbolId = computed(() => props.icon&&props.icon.startsWith('#') ? props.icon : `#${props.prefix}-${props.icon}`)
const className = computed(() => props.icon&&props.icon.startsWith('#') ? props.icon.substring(1) : `${props.prefix}-${props.icon}`)
</script>
<style scoped>
svg {
width: 1.3em;
height: 1.3em;
vertical-align: -0.25em;
overflow: hidden;
fill: var(--mb-main-icon-color)
}
</style>

97
magic-boot-ui/src/components/magic/data/mb-pagination.vue
View File

@ -1,97 +0,0 @@
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script setup>
import { computed } from 'vue'
import { scrollTo } from '@/scripts/scroll-to'
const props = defineProps({
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, sizes, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
const currentPage = computed({
get: () => props.page,
set: (val) => {
emit('update:page', val)
}
})
const pageSize = computed({
get: () => props.limit,
set: (val) => {
emit('update:limit', val)
}
})
function handleSizeChange(val) {
emit('pagination', { page: currentPage, limit: val })
if (props.autoScroll) {
scrollTo(0, 800)
}
}
function handleCurrentChange(val) {
emit('pagination', { page: val, limit: pageSize })
if (props.autoScroll) {
scrollTo(0, 800)
}
}
</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

101
magic-boot-ui/src/components/magic/data/mb-search.vue
View File

@ -1,101 +0,0 @@
<template>
<div class="filter-container">
<el-form :inline="true" @keyup.enter="search">
<span v-for="(it, i) in where">
<el-form-item v-if="it && it.label" :label="it.label" :key="i">
<component
:is="!it.component ? 'mb-input' : it.component.startsWith('el-') || $global.dynamicComponentNames.indexOf(it.component) != -1 ? it.component : 'mb-' + it.component"
v-model="it.value"
:item-label="it.label"
v-bind="it.props"
/>
</el-form-item>
</span>
<el-form-item>
<el-button class="filter-item" type="primary" icon="ElIconSearch" @click="search">
搜索
</el-button>
<el-button class="filter-item" icon="ElIconDelete" @click="reset">
清空
</el-button>
<slot name="btns" />
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { nextTick } from 'vue'
const props = defineProps({
where: {
type: Object,
default: () => {}
},
notReset: {
type: String,
default: ''
}
})
for(var key in props.where){
if(props.where[key] instanceof Object && props.where[key].value == undefined){
props.where[key].value = null
}
}
const emit = defineEmits(['search'])
function input(input){
if(input){
emit('search')
}
}
function search(){
for(var key in props.where){
if(props.where[key] instanceof Object){
if(props.where[key].type && props.where[key].type.startsWith('date') && props.where[key].value instanceof Array && props.where[key].value.join(',')){
props.where[key].value = props.where[key].value.join(',')
}
}
}
nextTick(() => {
emit('search')
for(var key in props.where){
if(props.where[key] instanceof Object){
if(props.where[key].type && props.where[key].type.startsWith('date') && props.where[key].value){
props.where[key].value = props.where[key].value.split(',')
}
}
}
})
}
function reset() {
for(var key in props.where){
if(props.notReset.indexOf(key) == -1){
if(props.where[key] instanceof Object){
if(props.where[key].value instanceof Array){
props.where[key].value = []
}else{
props.where[key].value = null
}
}else{
if(props.where[key] instanceof Array){
props.where[key] = []
}else{
props.where[key] = null
}
}
}
}
nextTick(() => emit('search'))
}
</script>
<style scoped>
</style>

63
magic-boot-ui/src/components/magic/data/mb-table-column.vue
View File

@ -1,63 +0,0 @@
<template>
<el-table-column
v-bind="col.props"
:key="col.field"
:label="col.label"
:prop="col.field"
:align="col.align || 'center'"
:width="col.width"
:fixed="col.fixed"
:sortable="col.sortable"
>
<template v-if="!col.cols" #default="scope">
<span v-if="col.templet" v-html="col.templet(scope.row)" />
<span v-else-if="col.dictType">
{{ $common.getDictLabel(col.dictType, scope.row[col.field] + '') }}
</span>
<slot v-else-if="col.type == 'dynamic'" :name="col.field" :row="scope.row" :index="scope.$index" />
<div v-else-if="col.type == 'switch'">
<mb-switch
v-if="col.if === undefined ? true : col.if(scope.row)"
v-model="scope.row[col.field]"
@change="col.change(scope.row)"
/>
</div>
<div v-else-if="col.type == 'btns'">
<template v-for="btn in col.btns">
<el-button v-if="btn.if === undefined ? true : btn.if(scope.row)" :icon="btn.icon" :key="btn.label" v-permission="btn.permission" :type="btn.type" :link="btn.link" :size="btn.size || 'small'" :class="btn.class" @click="btn.click(scope.row, scope.$index)">
{{ btn.label }}
</el-button>
</template>
</div>
<div v-else-if="col.type == 'download'">
<a v-for="(url, i) in scope.row[col.field].split(',')" @click="$common.downloadMore(url)" href="javascript:;">
{{ url.substring(url.lastIndexOf('/') + 1) }}
{{ i != scope.row[col.field].split(',').length - 1 ? '，' : '' }}
</a>
</div>
<a v-else-if="col.type == 'downloadAll'" @click="$common.downloadMore(scope.row[col.field])" href="javascript:;">下载</a>
<el-image
v-else-if="col.type === 'image'"
preview-teleported
:src="scope.row[col.field] && scope.row[col.field].startsWith('http') ? scope.row[col.field] : $global.baseApi + scope.row[col.field]"
:preview-src-list="[scope.row[col.field] && scope.row[col.field].startsWith('http') ? scope.row[col.field] : $global.baseApi + scope.row[col.field]]"
/>
<span v-else-if="col.type === 'html'" v-html="scope.row[col.field]"></span>
<span v-else-if="col.click">
<a style="color: blue" @click="col.click(scope.row)">{{ scope.row[col.field] }}</a>
</span>
<span v-else-if="col.field">{{ scope.row[col.field] }}</span>
</template>
<mb-table-column v-for="(col2, j) in col.cols" :key="j" :col="col2">
<template v-for="(value, key) in $slots" #[key]="{ row, index }">
<slot :row="row" :index="index" :name="key" />
</template>
</mb-table-column>
</el-table-column>
</template>
<script setup>
defineProps({
col: Object
})
</script>

300
magic-boot-ui/src/components/magic/data/mb-table.vue
View File

@ -1,300 +0,0 @@
<template>
<div>
<el-table
:key="tableKey"
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
v-bind="props.props"
style="width: 100%;"
@sort-change="sortChange"
@selection-change="selectionChange"
>
<el-table-column v-if="selection" align="center" type="selection" width="50" />
<el-table-column v-if="showNo" label="序号" prop="num" align="center" width="65">
<template #default="scope">
<span>{{ scope.$index+1 }}</span>
</template>
</el-table-column>
<mb-table-column v-for="(col, i) in cols" :key="i" :col="col">
<template v-for="(value, key) in $slots" #[key]="{ row, index }">
<slot :row="row" :index="index" :name="key" />
</template>
</mb-table-column>
<template empty>
<el-empty :description="emptyText" />
</template>
</el-table>
<mb-pagination v-show="total > 0 && page" :total="total || 0" v-model:page="listCurrent" v-model:limit="_limit" @pagination="handlerPagination" />
</div>
</template>
<script setup>
import { ref, reactive, watch, onMounted, getCurrentInstance, onBeforeUnmount } from 'vue'
import common from "../../../scripts/common";
const { proxy } = getCurrentInstance()
const props = defineProps({
props: {
type: Object,
default: () => {}
},
url: {
type: String,
default: ''
},
limit: {
type: Number,
default: 10
},
page: {
type: Boolean,
default: true
},
done: {
type: Function,
default: () => {}
},
where: {
type: Object,
default: () => {
return {}
}
},
showNo: {
type: Boolean,
default: true
},
selection: {
type: Boolean,
default: false
},
data: {
type: Array,
default: null
},
method: {
type: String,
default: 'post'
},
cols: {
type: Array,
default: () => []
},
emptyText: {
type: String,
default: '暂无数据'
}
})
const emit = defineEmits(['selection-change'])
const listCurrent = ref(1)
const total = ref(0)
const list = ref([])
const listLoading = ref(false)
const tableKey = ref(0)
let newWhere = reactive({})
const _limit = ref(props.limit)
function renderWhere(){
newWhere = reactive(proxy.$common.renderWhere(props.where))
}
function getList() {
renderWhere()
listLoading.value = true
if (props.page) {
newWhere.current = listCurrent.value
newWhere.size = _limit.value
} else {
newWhere.size = 99999999
}
var then = (res) => {
const { data } = res
total.value = data.total
list.value = data.list
listLoading.value = false
props.done()
}
if(props.method.toLowerCase() == 'post'){
proxy.$post(props.url, newWhere).then(res => {
then(res)
})
}else{
proxy.$get(props.url, newWhere).then(res => {
then(res)
})
}
}
function sortChange(column) {
let order = column.order
if (order) {
order = order === 'descending' ? 'desc' : ''
order = column.prop + ' ' + order
} else {
order = null
}
newWhere.orderBy = order
reload()
}
function selectionChange(columns) {
emit('selection-change', columns)
}
function reload() {
if (props.url) {
newWhere.current = 1
listCurrent.value = 1
getList()
}
if (props.data) {
handlerData()
}
}
function renderExportData(sourceData){
var data = []
var fields = props.cols.filter(it => it.type != 'btns')
sourceData.forEach(it => {
var row = {}
fields.forEach(f => {
if(f.exportTemplet){
row[f.label] = f.exportTemplet(it)
}else if(f.templet){
row[f.label] = f.templet(it)
}else{
row[f.label] = it[f.field]
}
})
data.push(row)
})
return data
}
function exportExcel(){
if(props.url){
var where = proxy.$common.renderWhere(props.where)
where.size = 99999999
var then = (res) => {
const { data } = res
proxy.$common.exportExcel({
data: renderExportData(data.list),
fileName: '用户数据'
})
}
if(props.method.toLowerCase() == 'post'){
proxy.$post(props.url, where).then(res => {
then(res)
})
}else{
proxy.$get(props.url, where).then(res => {
then(res)
})
}
}else if(props.data){
proxy.$common.exportExcel({
data: props.data,
fileName: '用户数据'
})
}
}
function handlerData() {
listLoading.value = true
total.value = props.data.length
var currPageData = []
if(props.page){
props.data.forEach((it, i) => {
if (i >= ((listCurrent.value - 1) * _limit.value) && i < (listCurrent.value * _limit.value) && currPageData.length < _limit.value) {
currPageData.push(it)
}
})
}else{
currPageData = props.data
}
list.value = currPageData
props.done()
listLoading.value = false
}
function handlerPagination() {
if (props.url) {
getList()
}
if (props.data) {
handlerData()
}
}
function keyup(){
document.onkeyup = (e) => {
if(e.target.nodeName != 'INPUT'){
if (e && e.keyCode == 37) {
if(listCurrent.value != 1){
listCurrent.value -= 1
handlerPagination()
}
} else if (e && e.keyCode == 39) {
if(listCurrent.value != parseInt((total.value + _limit.value - 1) / _limit.value)){
listCurrent.value += 1
handlerPagination()
}
}
}
}
}
watch(() => props.data, () => {
listCurrent.value = 1
handlerData()
},{ deep: true })
watch(() => props.where,() => {
renderWhere()
},{ deep: true })
renderWhere()
onMounted(() => {
keyup()
if (props.data) {
handlerData()
}
if (props.url) {
getList()
}
})
defineExpose({ reload, exportExcel })
</script>
<style scoped>
.el-table :deep(.el-image .el-image__inner) {
max-height: 100px;
width: auto;
height: auto;
}
.el-table :deep(.el-table__cell){
z-index: auto;
}
</style>
<style>
.el-table-column--selection .cell {
padding:0px 15px!important;
}
.el-table th {
background: #F5F7FA;
}
</style>

153
magic-boot-ui/src/components/magic/data/mb-tree.vue
View File

@ -1,153 +0,0 @@
<template>
<div>
<div style="margin-bottom: 5px;" v-if="expand || checked">
<el-button v-if="expand" type="primary" icon="ElIconSort" plain @click="doExpand">展开/折叠</el-button>
<el-button v-if="checked" type="primary" icon="ElIconCheck" plain @click="() => { treeAllChecked = !treeAllChecked; checkedAll(treeData, treeAllChecked) }">全选/全不选</el-button>
</div>
<div style="margin-bottom: 5px;" v-if="search">
<el-input v-model="searchValue" placeholder="输入关键字进行过滤" @input="tree.filter(searchValue)" :style="{ width: searchWidth }" />
</div>
<el-tree
v-if="refreshTree"
ref="tree"
:data="treeData"
v-bind="props.props"
node-key="id"
:default-expand-all="defaultExpandAll"
@check-change="checkChange"
@node-click="nodeClick"
:props="defaultProps"
:filter-node-method="searchTree"
:style="style"
/>
</div>
</template>
<script setup>
import { watch, ref, reactive, nextTick, getCurrentInstance, onBeforeMount } from 'vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'check-change', 'node-click'])
const props = defineProps({
url: {
type: String,
default: ''
},
params: {
type: Object,
default: () => {}
},
modelValue: {
type: String,
default: ''
},
style: {
type: Object,
default: () => {}
},
props: {
type: Object,
default: () => {}
},
expand: {
type: Boolean,
default: true
},
checked: {
type: Boolean,
default: true
},
search: {
type: Boolean,
default: false
},
searchWidth: {
type: String,
default: '230px'
}
})
const tree = ref()
const treeData = ref([])
const defaultProps = reactive({
children: 'children',
label: 'name'
})
const defaultExpandAll = ref(true)
const refreshTree = ref(false)
const treeAllChecked = ref(false)
const searchValue = ref('')
onBeforeMount(async () => {
await loadTreeData()
})
watch(() => props.modelValue, (value) => {
nextTick(() => selectIds(value))
})
function selectIds(ids){
ids = ids.split(',')
for(var i=0;i<ids.length;i++){
tree.value && tree.value.setChecked(ids[i],true,false)
}
}
function searchTree(value, data) {
if (!value) return true
return data.name.includes(value)
}
function doExpand() {
refreshTree.value = false
defaultExpandAll.value = !defaultExpandAll.value
nextTick(() => refreshTree.value = true)
}
async function loadTreeData() {
if(treeData.value.length == 0){
await proxy.$get(props.url, props.params).then((res) => {
treeData.value = res.data.list
})
refreshTree.value = true
nextTick(() => selectIds(props.modelValue))
}
}
function getTree() {
return tree.value
}
function checkChange(node) {
var selectMenus = []
var checkedNodes = tree.value.getCheckedNodes(false, true)
for (var i = 0; i < checkedNodes.length; i++) {
selectMenus.push(checkedNodes[i].id)
}
emit('update:modelValue', selectMenus.join(','))
emit('check-change', selectMenus.join(','))
}
function nodeClick(param1, param2, param3){
emit('node-click', param1, param2, param3)
}
function checkedAll(children, checked) {
if (tree.value) {
for (var i in children) {
var id = children[i].id
if(children[i].children && children[i].children.length > 0){
checkedAll(children[i].children, checked)
}
tree.value.setChecked(id, checked, true)
}
}
}
defineExpose({ getTree })
</script>

40
magic-boot-ui/src/components/magic/data/mb-treeselect.vue
View File

@ -1,40 +0,0 @@
<template>
<el-tree-select v-model="selectValue" :data="options" :key="modelValue" :placeholder="placeholder || (itemLabel && '请选择' + itemLabel)" v-bind="props.props" />
</template>
<script setup>
import { ref, getCurrentInstance, watch } from "vue"
const emit = defineEmits(['update:modelValue'])
const selectValue = ref(null)
const { proxy } = getCurrentInstance()
const props = defineProps({
modelValue: {
type: String,
default: null
},
url: {
type: String,
default: '',
required: true
},
itemLabel: String,
placeholder: String,
props: Object
})
selectValue.value = props.modelValue
watch(() => props.modelValue, (value) => {
selectValue.value = value
})
watch(selectValue, (value) => {
emit('update:modelValue', value)
})
const options = ref([])
proxy.$get(props.url).then(res => {
options.value = res.data.list
proxy.$treeTable.deleteEmptyChildren(options.value)
})
</script>

141
magic-boot-ui/src/components/magic/feedback/mb-dialog.vue
View File

@ -1,141 +0,0 @@
<template>
<el-dialog
v-model="dialogVisible"
:custom-class="customClass"
:fullscreen="fullscreen"
:width="width"
:title="title"
:close-on-click-modal="false"
:destroy-on-close="destroyOnClose"
:append-to-body="true"
draggable
@open="$emit('open')"
@opened="opened"
@close="$emit('close')"
>
<slot name="content" />
<template v-if="showFooter" #footer>
<div slot="footer" class="dialog-footer">
<slot name="btns">
<el-button @click="hide">
关闭
</el-button>
<el-button type="primary" :loading="confirmLoading" @click="confirmClick">
确认
</el-button>
</slot>
</div>
</template>
</el-dialog>
</template>
<script>
export default {
emits: ['confirm-click', 'open', 'opened', 'close'],
props: {
title: {
type: String,
default: ''
},
width: {
type: String,
default: '50%'
},
fullscreen: {
type: Boolean,
default: false
},
destroyOnClose: {
type: Boolean,
default: true
},
showFooter: {
type: Boolean,
default: true
}
},
data() {
return {
dialogVisible: false,
confirmLoading: false,
customClass: 'mbDialog' + this.$common.uuid(),
isOpen: false
}
},
watch: {
dialogVisible(value) {
if(value){
this.addStyle()
}else{
this.removeStyle()
}
}
},
created() {
this.addStyle()
},
methods: {
opened(){
this.$emit('opened')
this.isOpen = true
},
confirmClick() {
this.$emit('confirm-click', this)
},
loading(){
this.confirmLoading = true
},
hideLoading(){
this.confirmLoading = false
},
show(callback) {
this.hideLoading()
this.dialogVisible = true
if(callback){
var callbackInterval = setInterval(() => {
if(this.isOpen){
this.isOpen = false
clearInterval(callbackInterval)
callback()
}
},1)
}
},
hide() {
this.dialogVisible = false
},
addStyle(){
var componentStyle = document.createElement("style");
var cc = this.customClass
if (this.fullscreen) {
componentStyle.innerHTML = `
.${cc}{
margin-top: 0vh;
margin-bottom: 0vh;
}
.${cc} .el-dialog__body{
max-height: 100vh;
}
`
} else {
componentStyle.innerHTML = `
.${cc}{
margin-top: 10vh;
margin-bottom: 10vh;
}
.${cc} .el-dialog__body{
max-height: 60vh;
overflow: auto;
}
`
}
componentStyle.id = cc
document.head.appendChild(componentStyle);
},
removeStyle(){
document.getElementById(this.customClass) && document.getElementById(this.customClass).remove()
}
}
}
</script>

133
magic-boot-ui/src/components/magic/form/mb-checkbox-group.vue
View File

@ -1,133 +0,0 @@
<template>
<el-checkbox-group
v-model="selectValue"
:size="size"
:disabled="disabled"
:min="min"
:max="max"
:text-color="textColor"
:fill="fill"
@change="change"
>
<el-checkbox-button v-if="button" v-for="it in checkboxOptions" v-bind="it" :label="it[valueField]">
{{ it[labelField] }}
</el-checkbox-button>
<el-checkbox v-if="!button" v-for="it in checkboxOptions" v-bind="it" :label="it[valueField]">
{{ it[labelField] }}
</el-checkbox>
</el-checkbox-group>
</template>
<script setup>
import {watch, ref, getCurrentInstance, onMounted} from "vue";
import request from '@/scripts/request'
const emit = defineEmits(['update:modelValue', 'change'])
const { proxy } = getCurrentInstance()
const props = defineProps({
modelValue: {
required: true
},
type: String,
button: {
type: Boolean,
default: false
},
options: Array,
url: String,
data: Object,
method: {
type: String,
default: 'get'
},
labelField: {
type: String,
default: 'label'
},
valueField: {
type: String,
default: 'value'
},
size: String,
disabled: {
type: Boolean,
default: false
},
min: Number,
max: Number,
textColor: {
type: String,
default: '#fff'
},
fill: {
type: String,
default: '#409EFF'
},
join: {
type: Boolean,
default: true
}
})
const selectValue = ref([])
const checkboxOptions = ref([])
watch(() => [props.type, props.url, props.options], () => {
loadData()
}, { deep: true })
watch(() => props.modelValue, (value) => {
setValue(value)
})
watch(selectValue, (value) => {
if(props.join){
emit('update:modelValue', value.join(','))
emit('change', value.join(','))
}else{
emit('update:modelValue', value)
emit('change', value)
}
})
onMounted(() => {
loadData()
})
function setValue(value){
if(value){
if(props.join){
selectValue.value = value.split(',')
}else{
selectValue.value = value
}
}
}
function loadData(){
if(props.type){
checkboxOptions.value = proxy.$common.getDictType(props.type)
setValue(props.modelValue)
}else if(props.url){
if(props.method.toLowerCase() == 'post'){
proxy.$post(props.url, props.data).then(res => {
checkboxOptions.value = res.data.list || res.data
setValue(props.modelValue)
})
}else{
proxy.$get(props.url, props.data).then(res => {
checkboxOptions.value = res.data.list || res.data
setValue(props.modelValue)
})
}
}else if(props.options){
checkboxOptions.value = props.options
setValue(props.modelValue)
}
}
function change(value){
emit('change', value)
}
</script>

48
magic-boot-ui/src/components/magic/form/mb-date.vue
View File

@ -1,48 +0,0 @@
<template>
<el-date-picker
v-model="selectValue"
:type="type"
:format="format"
:value-format="valueFormat"
:placeholder="placeholder"
:start-placeholder="startPlaceholder"
:end-placeholder="endPlaceholder"
v-bind="props.props"
/>
</template>
<script setup>
import { watch, ref } from 'vue'
const emit = defineEmits(['update:modelValue'])
const selectValue = ref('')
const props = defineProps({
modelValue: String,
type: String,
placeholder: {
type: String,
default: '请选择时间'
},
format: {
type: String,
default: 'YYYY-MM-DD'
},
startPlaceholder: {
type: String,
default: '开始时间'
},
endPlaceholder: {
type: String,
default: '结束时间'
},
props: Object
})
selectValue.value = props.modelValue
watch(() => props.modelValue, (value) => {
selectValue.value = value
})
const valueFormat = ref(props.format)
watch(selectValue, (value) => {
emit('update:modelValue', value)
})
</script>

23
magic-boot-ui/src/components/magic/form/mb-input.vue
View File

@ -1,23 +0,0 @@
<template>
<el-input v-model="selectValue" :type="type" :placeholder="placeholder || (itemLabel && '请输入' + itemLabel)" v-bind="props.props" />
</template>
<script setup>
import {ref, watch} from 'vue'
const emit = defineEmits(['update:modelValue'])
const selectValue = ref('')
const props = defineProps({
modelValue: String,
itemLabel: String,
placeholder: String,
type: String,
props: Object
})
selectValue.value = props.modelValue
watch(() => props.modelValue, (value) => {
selectValue.value = value
})
watch(selectValue, (value) => {
emit('update:modelValue', value)
})
</script>

37
magic-boot-ui/src/components/magic/form/mb-inputrange.vue
View File

@ -1,37 +0,0 @@
<template>
<el-input v-model="input1" />
<span>-</span>
<el-input v-model="input2" />
</template>
<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
modelValue: {
type: String,
default: ''
},
itemLabel: String
})
const input1 = ref('')
const input2 = ref('')
if(props.modelValue){
input1.value = props.modelValue.split(',')[0]
input2.value = props.modelValue.split(',')[1]
}
watch([input1, input2], () => {
emit('update:modelValue', input1.value + ',' + input2.value)
})
</script>
<style scoped>
.el-input{
display: inline-block;
width: 47%;
}
span{
margin: 0px 8px;
}
</style>

95
magic-boot-ui/src/components/magic/form/mb-radio-group.vue
View File

@ -1,95 +0,0 @@
<template>
<el-radio-group
v-model="selectValue"
:size="size"
:disabled="disabled"
:text-color="textColor"
:fill="fill"
@change="change"
>
<el-radio-button v-if="button" v-for="it in options" v-bind="it" :label="it[valueField]">
{{ it[labelField] }}
</el-radio-button>
<el-radio v-if="!button" v-for="it in options" v-bind="it" :label="it[valueField]">
{{ it[labelField] }}
</el-radio>
</el-radio-group>
</template>
<script setup>
import {watch, ref, getCurrentInstance} from "vue";
import request from '@/scripts/request'
const emit = defineEmits(['update:modelValue', 'change'])
const { proxy } = getCurrentInstance()
const selectValue = ref('')
const props = defineProps({
modelValue: String | Number | Boolean,
type: String,
button: {
type: Boolean,
default: false
},
options: Array,
url: String,
data: Object,
method: {
type: String,
default: 'get'
},
labelField: {
type: String,
default: 'label'
},
valueField: {
type: String,
default: 'value'
},
size: String,
disabled: {
type: Boolean,
default: false
},
textColor: {
type: String,
default: '#fff'
},
fill: {
type: String,
default: '#409EFF'
}
})
selectValue.value = props.modelValue
const options = ref([])
if(props.type){
options.value = proxy.$common.getDictType(props.type)
}else if(props.url){
var then = (res) => {
options.value = res.data.list || res.data
}
if(props.method.toLowerCase() == 'post'){
proxy.$post(props.url, props.data).then(res => {
then(res)
})
}else{
proxy.$get(props.url, props.data).then(res => {
then(res)
})
}
}else if(props.options){
options.value = props.options
}
function change(value){
emit('change', value)
}
watch(() => props.modelValue, (value) => {
selectValue.value = value
})
watch(selectValue, (value) => {
emit('update:modelValue', value)
})
</script>

151
magic-boot-ui/src/components/magic/form/mb-select.vue
View File

@ -1,151 +0,0 @@
<template>
<el-select v-model="selectValue" v-bind="props.props" :multiple="multiple" :style="{ width }" :placeholder="placeholder || (itemLabel && '请输入' + itemLabel)" filterable clearable>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">{{ item.label }}</span>
<span v-if="showValue" style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{ item.value }}</span>
</el-option>
</el-select>
</template>
<script setup>
import { ref, watch, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
modelValue: {
required: true
},
type: {
type: String,
default: ''
},
options: {
type: Array,
default: () => []
},
url: {
type: String,
default: ''
},
params: {
type: Object,
default: () => {}
},
labelField: {
type: String,
default: 'label'
},
valueField: {
type: String,
default: 'value'
},
props: {
type: Object,
default: () => {}
},
width: {
type: String,
default: '100%'
},
allOption: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: ''
},
itemLabel: String,
multiple: {
type: Boolean,
default: false
},
join: {
type: Boolean,
default: true
},
showValue: {
type: Boolean,
default: false
}
})
const selectList = ref([])
const selectValue = ref(props.multiple ? [] : '')
watch(() => [props.type, props.url, props.options], () => {
loadData()
}, { deep: true })
watch(() => props.modelValue, (value) => {
setValue(value)
})
watch(selectValue, (value) => {
if(props.multiple && props.join){
emit('update:modelValue', value.join(','))
emit('change', value.join(','))
}else{
emit('update:modelValue', value)
emit('change', value)
}
})
onMounted(() => {
loadData()
})
function setValue(value){
if(props.multiple && props.join){
selectValue.value = value ? value.split(',') : []
}else{
selectValue.value = value || value === 0 ? value.toString() : ''
}
}
function loadData() {
if(props.type){
listConcat(proxy.$common.getDictType(props.type))
}else if(props.url){
proxy.$get(props.url, props.params).then(res => {
listConcat(handlerData(res.data.list || res.data))
})
}else if(props.options && props.options.length > 0){
listConcat(handlerData(props.options))
}
}
function listConcat(dictData) {
if (props.allOption) {
selectList.value = [{
value: '',
label: '全部'
}]
selectList.value = selectList.value.concat(dictData)
} else {
selectList.value = dictData
}
setValue(props.modelValue)
}
function handlerData(data) {
var newData = []
data.forEach(it => {
newData.push({
label: it[props.labelField],
value: it[props.valueField].toString()
})
})
return newData
}
</script>

69
magic-boot-ui/src/components/magic/form/mb-switch.vue
View File

@ -1,69 +0,0 @@
<template>
<el-switch
v-model="selectValue"
:active-value="_activeValue"
:inactive-value="_inactiveValue"
v-bind="props.props"
@change="change"
/>
</template>
<script setup>
import {ref, watch} from 'vue'
const emit = defineEmits(['update:modelValue', 'change'])
const selectValue = ref('')
const props = defineProps({
modelValue: Boolean | String | Number,
activeValue: Boolean | String | Number,
inactiveValue: Boolean | String | Number,
props: Object
})
const _activeValue = ref(true)
const _inactiveValue = ref(false)
function change(){
emit('update:modelValue', selectValue.value)
emit('change', selectValue.value)
}
function setActive(value){
if(typeof(value) == 'boolean'){
_activeValue.value = true
_inactiveValue.value = false
}else{
if(value || value == 0){
if(props.activeValue == undefined && props.inactiveValue == undefined){
_activeValue.value = '1'
_inactiveValue.value = '0'
}else{
_activeValue.value = props.activeValue + ''
_inactiveValue.value = props.inactiveValue + ''
}
}else{
_activeValue.value = true
_inactiveValue.value = false
}
}
}
dynamicSetValue(props.modelValue)
setActive(props.modelValue)
watch(() => props.modelValue, (value) => {
dynamicSetValue(value)
setActive(value)
})
function dynamicSetValue(value){
if(typeof(value) == 'boolean'){
selectValue.value = value
}else{
if(value || value == 0){
selectValue.value = value + ''
}else{
selectValue.value = false
}
}
}
watch(selectValue, (value) => {
emit('update:modelValue', value)
})
</script>

302
magic-boot-ui/src/components/magic/form/mb-upload-file.vue
View File

@ -1,302 +0,0 @@
<template>
<el-upload
:id="uploadDomId"
class="upload-demo"
ref="uploadRef"
:action="actionUrl"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:multiple="multiple"
:limit="limit"
:on-exceed="handleExceed"
:show-file-list="showFileList"
:before-upload="beforeAvatarUpload"
:on-success="handleAvatarSuccess"
:file-list="fileList"
>
<el-button type="primary" icon="ElIconUploadFilled" :loading="uploadLoading" :disabled="!multiple && fileList.length == 1">{{ label }}</el-button>
<div slot="tip" v-if="showTip" class="el-upload__tip">支持上传{{ getSettingSuffixs().replace(/,/g, '，') }}文件，且不超过{{ maxFileSize }}MB</div>
</el-upload>
</template>
<script>
import { getToken } from '@/scripts/auth'
export default {
name: 'MbUploadFile',
emits: ['change', 'update:modelValue'],
model: {
prop: 'modelValue',
event: 'change'
},
props: {
modelValue: {
required: false
},
multiple: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 20
},
maxFileSize: {
type: Number,
default: 200
},
accept: {
type: String,
default: ''
},
externalId: {
type: String,
default: ''
},
externalType: {
type: String,
default: ''
},
formats: {
type: String,
default: ''
},
label: {
type: String,
default: '点击上传'
},
showTip: {
type: Boolean,
default: () => true
},
action: {
type: String,
default: ''
},
showFileList: {
type: Boolean,
default: () => true
},
onSuccess: {
type: Function,
default: () => {}
},
showRemoveTip: {
type: Boolean,
default: () => true
},
join: {
type: Boolean,
default: true
}
},
data() {
return {
acceptList: {
image: 'png,jpg,gif,jpeg',
wps: 'pdf,pptx,xls,xlsx,csv,docx,doc',
compress: 'zip,rar,7z',
video: 'avi,flv,mp4,mpeg,mov'
},
imageUrl: '',
actionUrl: import.meta.env.VITE_APP_BASE_API + '/system/file/upload',
headers: {
token: getToken()
},
urls: [],
uploadDomId: Math.random(),
fileList: [],
uploadLoading: false,
emitUpdate: true
}
},
watch: {
modelValue() {
if(this.emitUpdate){
this.emitUpdate = false
if(this.fileList.length == 0){
this.renderFile()
}
}else{
this.renderFile()
}
}
},
created() {
if (this.externalId) {
this.$get('/system/file/files', { externalId: this.externalId, externalType: this.externalType }).then(res => {
const { data } = res
this.fileList = data
})
this.actionUrl = this.actionUrl + `?externalId=${this.externalId}&externalType=${this.externalType}`
} else {
this.renderFile()
}
if(this.action){
this.actionUrl = import.meta.env.VITE_APP_BASE_API + this.action
}
},
methods: {
setFileList(){
if(this.urls.length > 0){
this.fileList = this.urls.map(it => {
return {
name: it.substring(it.lastIndexOf('/') + 1),
response: {
data: {
url: it
}
}
}
})
}
},
renderFile() {
if(this.multiple && this.join && this.modelValue){
this.urls = this.modelValue.split(',')
}else{
if (this.modelValue instanceof Array && this.modelValue.length > 0) {
this.urls = this.modelValue
} else {
if (this.modelValue) {
this.urls = [this.modelValue]
}
}
}
this.setFileList()
},
handleRemove(file, fileList) {
var url = file.response.data.url
this.urls.splice(this.urls.indexOf(url), 1)
this.fileList.forEach((it, i) => {
if (it && it.response.data.url.indexOf(url) !== -1) {
this.fileList.splice(i, 1)
}
})
if (this.multiple) {
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.emitUpdate = true
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.emitUpdate = true
this.$emit('change', this.urls)
}
} else {
document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].removeAttribute('disabled')
this.$emit('update:modelValue', '')
this.emitUpdate = true
this.$emit('change', '')
}
this.$delete('/system/file/delete', { url: encodeURI(url) })
},
handlePreview(file) {
window.open(this.$global.baseApi + file.response.data.url)
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
beforeRemove(file, fileList) {
if(!this.showRemoveTip){
return true
}
return this.$confirm(`确定移除 ${file.name}？`)
},
handleAvatarSuccess(res, file, fileList) {
this.uploadLoading = false
if (res.data) {
this.urls.push(res.data.url)
if (this.multiple) {
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.emitUpdate = true
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.emitUpdate = true
this.$emit('change', this.urls)
}
} else {
document.getElementById(this.uploadDomId).getElementsByClassName('el-upload__input')[0].setAttribute('disabled', '')
this.$emit('update:modelValue', res.data.url)
this.emitUpdate = true
this.$emit('change', res.data.url)
}
}
if(this.onSuccess){
this.onSuccess(res, file, fileList)
}
},
getSettingSuffixs() {
if (this.formats) {
return this.formats
}
var suffixs = this.acceptList[this.accept]
if (!suffixs) {
suffixs = this.getAllSuffixs()
}
return suffixs
},
beforeAvatarUpload(file, fileList) {
this.uploadLoading = true
var fileName = file.name
var accepts = this.accept.split(',')
if (accepts) {
for (var i = 0; i < accepts.length; i++) {
if (!this.validAccept(fileName, accepts[i])) {
this.$message.error('上传文件格式只能为：' + this.getSettingSuffixs().replace(/,/g, '，'))
return false
}
}
} else {
if (!this.validAccept(fileName, 'null')) {
this.$message.error('上传文件格式只能为：' + this.getAllSuffixs().replace(/,/g, '，'))
return false
}
}
const isLt2M = file.size / 1024 / 1024 < this.maxFileSize
if (!isLt2M) {
this.$message.error(`上传文件大小不能超过 ${this.maxFileSize}MB！`)
return isLt2M
}
},
getAllSuffixs() {
var suffixs = ''
for (const key in this.acceptList) {
suffixs += this.acceptList[key] + ','
}
suffixs = suffixs.substring(0, suffixs.length - 1)
return suffixs
},
validAccept(fileName, accept) {
if (this.formats) {
return this.validEndsWith(fileName, this.formats)
}
if (accept && this.acceptList[accept]) {
return this.validEndsWith(fileName, this.acceptList[accept])
} else {
return this.validEndsWith(fileName, this.getAllSuffixs())
}
},
validEndsWith(fileName, suffixs) {
suffixs = suffixs.split(',')
for (var i = 0; i < suffixs.length; i++) {
const suffix = suffixs[i]
if (fileName.toLowerCase().endsWith('.' + suffix)) {
return true
}
}
return false
}
}
}
</script>
<style scoped>
:deep(.el-upload){
display: block;
}
</style>

429
magic-boot-ui/src/components/magic/form/mb-upload-image.vue
View File

@ -1,429 +0,0 @@
<template>
<div>
<vuedraggable
v-model="urls"
class="vue-draggable"
tag="div"
draggable=".draggable-item"
@end="onDragEnd"
item-key="id"
>
<template #item="{ element }">
<div
class="draggable-item"
:style="{ width: width + 'px', height: height + 'px' }"
>
<el-image
:src="$global.baseApi + element"
:preview-src-list="[$global.baseApi + element]"
/>
<div class="tools">
<div class="shadow" @click="handleRemove(element)">
<el-icon>
<ElIconDelete />
</el-icon>
</div>
<div class="shadow" @click="beforeCropper(element)">
<el-icon>
<ElIconScissor />
</el-icon>
</div>
</div>
</div>
</template>
<template #footer>
<el-upload
v-if="(!multiple && urls.length == 0) || (multiple && urls.length < limit)"
ref="uploadRef"
class="uploadBox"
:style="{ width: width + 'px', height: height + 'px' }"
:action="action"
:headers="headers"
accept=".jpg,.jpeg,.png,.gif"
:show-file-list="false"
:multiple="multiple"
:limit="limit"
:on-success="onSuccess"
:on-error="onError"
:before-upload="beforeUpload"
:on-exceed="onExceed"
:file-list="fileList"
:disabled="isUploading"
>
<el-icon class="uploadIcon">
<ElIconPlus />
<span v-show="isUploading" class="uploading">正在上传...</span>
<span
v-if="!isUploading && limit && limit!==99 && multiple"
class="limitTxt"
>最多{{ limit }}张</span>
</el-icon>
</el-upload>
</template>
</vuedraggable>
<div v-if="tip" class="el-upload__tip" :style="{ color: tipColor }">{{ tip }}</div>
<mb-dialog ref="cropperDialog" @confirm-click="cropper">
<template #content>
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<vueCropper
ref="cropper"
v-bind="cropperOption"
:outputSize="cropperOption.outputSize === undefined ? 0.8 : cropperOption.outputSize"
:outputType="cropperOption.outputType === undefined ? 'jpeg' : cropperOption.outputType"
:canMove="cropperOption.canMove === undefined ? true : cropperOption.canMove"
:canMoveBox="cropperOption.canMoveBox === undefined ? true : cropperOption.canMoveBox"
:autoCrop="cropperOption.autoCrop === undefined ? true : cropperOption.autoCrop"
:centerBox="cropperOption.centerBox === undefined ? true : cropperOption.centerBox"
/>
</div>
</div>
</template>
</mb-dialog>
</div>
</template>
<script>
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
import vuedraggable from 'vuedraggable'
import { getToken } from '@/scripts/auth'
export default {
name: 'MbUploadImage',
emits: ['update:modelValue', 'change'],
components: { vuedraggable, VueCropper },
model: {
prop: 'modelValue',
event: 'change'
},
props: {
modelValue: {
required: false
},
externalId: {
type: String,
default: ''
},
externalType: {
type: String,
default: ''
},
multiple: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: 2
},
cropperConfig: {
type: Object,
default: () => {}
},
width: {
type: Number,
default: 100
},
height: {
type: Number,
default: 100
},
tip: {
type: String,
default: ''
},
tipColor: {
type: String,
default: ''
},
join: {
type: Boolean,
default: true
}
},
data() {
return {
action: import.meta.env.VITE_APP_BASE_API + '/system/file/upload',
headers: {
token: getToken()
},
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
isUploading: false,
cropperOption: {},
urls: [],
fileList: [],
emitUpdate: true
}
},
watch: {
modelValue() {
if(this.emitUpdate){
this.emitUpdate = false
if(this.fileList.length == 0){
this.renderFile()
}
}else{
this.renderFile()
}
}
},
created() {
this.cropperOption = this.cropperConfig || {}
this.cropperOption.img = ''
if (this.externalId) {
this.$get('/system/file/files', { externalId: this.externalId, externalType: this.externalType }).then(res => {
this.urls = res.data
})
this.action = this.action + `?externalId=${this.externalId}&externalType=${this.externalType}`
} else {
this.renderFile()
}
},
methods: {
setFileList(){
if(this.urls.length > 0){
this.fileList = this.urls.map(it => {
return {
response: {
data: {
url: it
}
}
}
})
}
},
renderFile(){
if(this.multiple && this.join && this.modelValue){
this.urls = this.modelValue.split(',')
}else{
if (this.modelValue instanceof Array) {
this.urls = this.modelValue
this.fileList = this.urls.map(it => { return { response: { data: { url: it }}} })
} else {
if (this.modelValue) {
this.urls.push(this.modelValue)
}
}
}
},
handleRemove(url) {
this.urls.splice(this.urls.indexOf(url), 1)
this.fileList.forEach((it, i) => {
if (it && it.response.data.url.indexOf(url) !== -1) {
this.fileList.splice(i, 1)
}
})
this.$delete('/system/file/delete', { url: encodeURI(url) })
if (this.multiple) {
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.emitUpdate = true
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.emitUpdate = true
this.$emit('change', this.urls)
}
} else {
this.$emit('update:modelValue', '')
this.emitUpdate = true
this.$emit('change', '')
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleDownload(file) {
console.log(file)
},
beforeUpload(){
this.isUploading = true
},
onError(){
this.isUploading = true
},
onSuccess(res, file, fileList) {
console.log(res)
this.fileList = fileList
if (res.data) {
this.urls.push(res.data.url)
// console.log(this.urls)
if (this.multiple) {
if(this.join){
this.$emit('update:modelValue', this.urls.join(','))
this.emitUpdate = true
this.$emit('change', this.urls.join(','))
}else{
this.$emit('update:modelValue', this.urls)
this.emitUpdate = true
this.$emit('change', this.urls)
}
} else {
this.$emit('update:modelValue', res.data.url)
this.emitUpdate = true
this.$emit('change', res.data.url)
}
this.onDragEnd()
} else {
this.$message({ type: 'error', message: res.msg })
}
this.isUploading = false
},
onDragEnd() {
var newUrls = []
this.urls.forEach(url => {
newUrls.push(encodeURI(url))
})
this.$get('/system/file/resort', { urls: newUrls.join(',') })
},
onExceed() {
this.$message({
type: 'warning',
message: `图片超限，最多可上传${this.limit}张图片`
})
},
beforeCropper(url) {
this.cropperOption.img = this.$global.baseApi + url
this.cropperOption.relativeImg = url
this.$refs.cropperDialog.show()
},
cropper() {
this.$refs.cropper.getCropBlob((data) => {
var dataFile = new File([data], this.cropperOption.relativeImg.substring(this.cropperOption.relativeImg.lastIndexOf('/') + 1), { type: data.type, lastModified: Date.now() })
var formData = new FormData()
formData.append('file', dataFile)
formData.append('url', encodeURI(this.cropperOption.relativeImg))
this.$request({
url: '/system/file/cropper',
method: 'post',
data: formData
}).then(res => {
this.urls.forEach((it, i) => {
if (this.cropperOption.img.indexOf(it) !== -1) {
this.urls[i] = res.data.url
this.$refs.cropperDialog.hide()
}
})
})
})
}
}
}
</script>
<style scoped>
.vue-draggable >>> .el-upload {
width: 100%;
height: 100%;
display: block;
}
</style>
<style lang="scss" scoped>
// 上传按钮
.uploadIcon {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #c0ccda;
background-color: #fbfdff;
border-radius: 6px;
font-size: 20px;
color: #999;
.limitTxt,
.uploading {
position: absolute;
bottom: 10%;
left: 0;
width: 100%;
font-size: 14px;
text-align: center;
}
}
// 拖拽
.vue-draggable {
display: flex;
flex-wrap: wrap;
.draggable-item {
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 6px;
position: relative;
overflow: hidden;
.el-image {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
top:0px;
width: 100%;
height: 20px;
}
.shadow {
display: inline-block;
background-color: rgba(0,0,0,.5);
opacity: 0;
transition: opacity .3s;
color: #fff;
font-size: 20px;
line-height: 20px;
padding: 2px;
cursor: pointer;
}
&:hover {
.shadow {
opacity: 1;
}
}
}
&.hideShadow {
.shadow {
display: none;
}
}
&.single {
overflow: hidden;
position: relative;
.draggable-item {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
}
&.maxHidden {
.uploadBox {
display: none;
}
}
}
// el-image
.el-image-viewer__wrapper {
.el-image-viewer__mask {
opacity: .8;
}
.el-icon-circle-close {
color: #fff;
}
}
.cropper-content {
.cropper {
width: auto;
height: 300px;
}
}
</style>

147
magic-boot-ui/src/components/magic/template/mb-form.vue
View File

@ -1,147 +0,0 @@
<template>
<el-form
ref="dataForm"
:rules="rules"
:model="formData"
v-bind="form.props"
>
<el-row v-for="(row,i) in form.rows" :key="i" :gutter="row.gutter">
<el-col v-for="(col,j) in row.cols" :key="j" :span="col.span" v-bind="col.colProps">
<el-form-item :label="col.label" :label-width="col.labelWidth" :prop="col.name" v-bind="col.formItemProps">
<slot v-if="col.component == 'dynamic'" :name="col.name" :form-data="formData" :col="col"></slot>
<component
v-else
:is="!col.component ? 'mb-input' : col.component.startsWith('el-') || $global.dynamicComponentNames.indexOf(col.component) != -1 ? col.component : 'mb-' + col.component"
v-model="formData[col.name]"
:item-label="col.label"
v-bind="col.props"
@change="col.change"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import common from '@/scripts/common'
import { ElNotification } from 'element-plus'
const rules = reactive(getRules())
const formData = ref({})
const dataForm = ref()
const props = defineProps({
form: {
type: Object,
default: () => {}
},
detail: {
type: Object,
default: () => {}
},
add: {
type: Object,
default: () => {}
},
primaryField: {
type: String,
default: 'id'
}
})
const emit = defineEmits(['reload'])
watch(() => [props.detail && props.detail.formData, props.add && props.add.formData], (value) => {
value.forEach(it => {
if(it){
formData.value = common.objectAssign(formData.value, it)
}
})
},{ deep: true })
props.form.props = props.form.props || {}
common.setDefaultValue(props.form.props, 'labelPosition', 'right')
common.setDefaultValue(props.form.props, 'labelWidth', '')
if(props.add && props.add.formData){
formData.value = common.objectAssign(formData.value, props.add.formData)
}
function getRules(){
var _rules = {}
props.form.rows.forEach(row => {
row.cols.forEach(col => {
if (col.rules) {
_rules[col.name] = col.rules
}
})
})
return _rules
}
function getData() {
var data = {}
props.form.rows.forEach(row => {
row.cols.forEach(col => {
data[col.name] = col.defaultValue || undefined
})
})
return data
}
function initFormData(){
formData.value = getData()
}
function getFormData(){
return formData.value
}
function save(d) {
dataForm.value.validate((valid) => {
if (valid) {
d.loading()
common.$post(props.form.request.url, formData.value).then(res => {
d.hideLoading()
ElNotification({
title: '成功',
message: (!formData.value[props.primaryField] ? '创建' : '修改') + '成功',
type: 'success',
duration: 2000
})
d.hide()
emit('reload')
}).catch(() => d.hideLoading())
}
})
}
function getDetail(id) {
formData.value = props.detail.formData || {}
if(props.detail && props.detail.request){
var _formData = getData()
_formData[props.primaryField] = id
common.$get(props.detail.request.url, { [props.primaryField]: id }).then(res => {
const { data } = res
for (var t in _formData) {
if ((data[t] || data[t] === 0) && (!props.detail.excludeAssign || props.detail.excludeAssign.indexOf(t) === -1)) {
_formData[t] = data[t]
}
}
if(formData.value){
formData.value = common.objectAssign(_formData, formData.value)
}else{
formData.value = _formData
}
if(props.detail.handlerFormData){
props.detail.handlerFormData(formData.value)
}
})
}else{
if(props.detail.handlerFormData){
props.detail.handlerFormData(formData.value)
}
}
}
defineExpose({ save, getDetail, getFormData, initFormData })
</script>

59
magic-boot-ui/src/components/magic/template/mb-list.vue
View File

@ -1,59 +0,0 @@
<template>
<div class="app-container">
<mb-search v-if="table.where" :where="table.where" :no-reset="search && search.noReset" @search="reload" />
<el-row class="toolbar-container">
<div v-for="(it, i) in tools" :key="i">
<el-button v-if="it.type == 'add'" v-permission="it.permission" class="filter-item" type="primary" icon="ElIconPlus" @click="it.click">
{{ it.label || '添加' }}
</el-button>
<mb-button v-else-if="it.type == 'delete'" v-permission="it.permission" :plain="true" :request-url="it.url" :btn-type="'delete'" :request-data="{ id: ids }" :after-handler="reload" />
<el-button v-else :icon="it.icon" :key="it.label" v-permission="it.permission" :type="it.type" :size="it.size" :class="it.class" @click="it.click(ids)">
{{ it.label }}
</el-button>
</div>
</el-row>
<mb-table ref="tableRef" v-bind="table" @selection-change="selectionChange" />
</div>
</template>
<script setup>
import { ref } from 'vue'
const tableRef = ref()
const ids = ref([])
const props = defineProps({
search: {
type: Object,
default: () => {}
},
tools: {
type: Array,
default: () => []
},
table: {
type: Object,
default: () => {}
}
})
props.tools.forEach(it => {
if(it.type == 'delete'){
props.table.selection = true
}
})
function reload(){
tableRef.value.reload()
}
function selectionChange(columns) {
ids.value = columns.map(it => it['id']).join(',')
}
defineExpose({ reload })
</script>

1
magic-boot-ui/src/icons/component.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1646452992174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4758" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M914.5 653.5c-5.5 0-11 1.1-16 3.3l-0.2 0.1h-0.2L510.2 822.2 122.2 657h-0.2l-0.2-0.1c-5-2.1-10.3-3.3-16-3.3-23.1 0-41.8 19.3-41.8 43.1 0 18 10.7 33.3 25.8 39.8l403.9 172.1 0.4 0.1c10.2 4.4 21.8 4.4 32 0l0.2-0.1c0.1 0 0.1-0.1 0.2-0.1l403.9-172.1c15.1-6.5 25.8-21.8 25.8-39.8 0.1-23.8-18.6-43.1-41.7-43.1z m0-186.5c-7.9-0.2-16 3.2-16 3.2L510.2 635.6 121.8 470.2s-10.3-3.2-16-3.2C82.7 467 64 486.2 64 510c0 17.9 10.7 33.3 25.8 39.7l403.9 172c0.1 0 0.1 0.1 0.2 0.1l0.1 0.1c5 2.1 10.3 3.3 16 3.3 5.7 0 11.1-1.2 16-3.3l0.2-0.1c0.1 0 0.1 0 0.2-0.1l403.9-172c15.1-6.4 25.8-21.8 25.9-39.7 0.1-23.8-18.6-43-41.7-43zM89.8 363.2l403.9 172.1c0.1 0 0.1 0 0.2 0.1l0.1 0.1c5 2.1 10.3 3.2 16 3.2 5.5 0 10.9-1.1 16-3.2l0.2-0.1 0.2-0.1 403.9-172c15.1-6.5 25.8-21.8 25.9-39.7 0-18-10.7-33.3-25.8-39.8L526.5 111.6c-0.1 0-0.1 0-0.2-0.1l-0.2-0.1c-10.2-4.4-21.8-4.4-32 0l-0.1 0.1L89.8 283.7C74.7 290.1 64 305.5 64 323.5c0 17.9 10.7 33.2 25.8 39.7z" p-id="4759" fill="#909399"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

2
magic-boot-ui/src/icons/configure.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1653135674579" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5558" xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="240"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M170.6752 0h682.6496A170.6752 170.6752 0 0 1 1024 170.6752v682.6496A170.6752 170.6752 0 0 1 853.3248 1024H170.6752A170.6752 170.6752 0 0 1 0 853.3248V170.6752A170.6752 170.6752 0 0 1 170.6752 0z m350.72 682.6752H195.0464a42.6752 42.6752 0 1 0 0 85.3248h326.2976a128 128 0 0 0 241.536 0h72.2432a42.6752 42.6752 0 1 0 0-85.3248H762.88a128 128 0 0 0-241.4336 0zM263.2704 256H192.5376a42.6752 42.6752 0 1 0 0 85.3248h70.7584a128 128 0 0 0 241.4336 0h327.68a42.6752 42.6752 0 0 0 0-85.3248h-327.68a128 128 0 0 0-241.4336 0z" p-id="5559"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

2
magic-boot-ui/src/icons/database.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649004377679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2837" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M511.850044 0.299912C229.332813 0.299912 0.299912 107.568486 0 239.929708v544.140584c0 132.461193 229.132871 239.929708 511.850044 239.929708s511.850044-107.468515 511.850044-239.929708V239.929708C1023.400176 107.568486 794.367275 0.299912 511.850044 0.299912zM167.950796 895.737577c-22.093527 0-39.988285-17.894757-39.988285-39.988285s17.894757-39.988285 39.988285-39.988284 39.988285 17.894757 39.988284 39.988284-17.894757 39.988285-39.988284 39.988285z m791.768036-188.644733c-17.894757 11.496632-37.489017 22.193498-58.782778 32.190569-104.969247 49.18559-243.228742 76.277653-389.08601 76.277653s-284.116763-27.092063-389.08601-76.277653c-21.293762-9.997071-40.888021-20.693937-58.782779-32.190569v-79.176804c87.274431 73.778385 255.125256 123.66377 447.868789 123.663771s360.594357-49.885385 447.868788-123.663771v79.176804zM127.962511 583.828956c0-22.093527 17.894757-39.988285 39.988285-39.988284s39.988285 17.894757 39.988284 39.988284-17.894757 39.988285-39.988284 39.988285-39.988285-17.894757-39.988285-39.988285z m831.756321-148.156594c-17.894757 11.496632-37.489017 22.193498-58.782778 32.190569-104.969247 49.18559-243.228742 76.277653-389.08601 76.277653S227.733281 517.048521 122.764034 467.862931c-21.293762-9.997071-40.888021-20.693937-58.782779-32.190569v-79.176804c87.274431 73.778385 255.125256 123.66377 447.868789 123.66377s360.594357-49.885385 447.868788-123.66377v79.176804z" p-id="2838"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.1 KiB

1
magic-boot-ui/src/icons/dict.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017183540" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5317" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M259.2 0H896a64 64 0 0 1 64 64v748.608a64 64 0 0 1-64 64H259.2a64 64 0 0 1-64-64V64a64 64 0 0 1 64-64z m132.8 183.04V640h171.264c76.096 0 133.12-20.48 172.544-61.44 37.376-39.04 56.384-94.72 56.384-167.04 0-72.96-19.008-128.64-56.384-167.04-39.36-40.96-96.448-61.44-172.544-61.44H392z m76.8 64h80c58.432 0 101.056 12.8 128 39.04 26.24 25.6 39.296 67.84 39.296 125.44 0 56.32-13.12 97.92-39.36 124.8-26.88 26.24-69.504 39.68-127.936 39.68h-80V247.04zM64 384h75.968v568.512h580.096V1024H128a64 64 0 0 1-64-64V384z" p-id="5318"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 915 B

1
magic-boot-ui/src/icons/error.svg
View File

@ -1 +0,0 @@
<svg class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M875.086452 153.730058C676.053818-45.302575 353.260522-45.302575 154.128323 153.730058s-199.032634 521.825929 0 720.958129 521.825929 199.032634 720.958129 0 199.032634-521.825929 0-720.958129zM725.836868 725.438604c-9.757478 9.757478-25.488922 9.757478-35.246399 0L514.557604 549.405739 338.624306 725.438604c-9.757478 9.757478-25.488922 9.757478-35.2464 0s-9.757478-25.488922 0-35.2464l176.032865-176.032864-176.032865-175.933299c-9.757478-9.757478-9.757478-25.488922 0-35.246399 9.757478-9.757478 25.488922-9.757478 35.2464 0l176.032864 176.032865 176.032865-176.032865c9.757478-9.757478 25.488922-9.757478 35.246399 0 9.757478 9.757478 9.757478 25.488922 0 35.246399L549.804004 514.15934 725.836868 690.192204c9.657912 9.757478 9.657912 25.488922 0 35.2464z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 899 B

1
magic-boot-ui/src/icons/examples.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017365938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6713" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M922.317764 0H101.64469A100.312307 100.312307 0 0 0 1.634036 100.010654V923.989346a100.312307 100.312307 0 0 0 100.010654 100.010654h820.673074a100.299739 100.299739 0 0 0 99.998085-100.010654V100.06093A100.299739 100.299739 0 0 0 922.317764 0zM427.933063 402.04107l-177.321894 103.064894 177.321894 97.094672v81.257871L179.684925 534.831388v-57.477532l248.248138-160.529857z m70.938812 364.661192h-53.970812l78.643542-509.303973h53.958243z m345.393085-231.845736L596.004253 683.445938v-81.257871l177.321894-97.094672-177.321894-103.064894v-85.217071l248.260707 160.542426z" p-id="6714"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 977 B

1
magic-boot-ui/src/icons/eye-open.svg
View File

@ -1 +0,0 @@
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

1
magic-boot-ui/src/icons/eye.svg
View File

@ -1 +0,0 @@
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 944 B

1
magic-boot-ui/src/icons/fullscreen.svg
View File

@ -1 +0,0 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 421 B

1
magic-boot-ui/src/icons/home.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017648725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19289" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M555.541333 117.994667l312.874667 224.565333A117.333333 117.333333 0 0 1 917.333333 437.866667V800c0 64.8-52.533333 117.333333-117.333333 117.333333H640V746.666667c0-70.688-57.312-128-128-128s-128 57.312-128 128v170.666666H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V437.877333a117.333333 117.333333 0 0 1 48.917333-95.317333l312.874667-224.565333a74.666667 74.666667 0 0 1 87.082666 0z" p-id="19290"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 803 B

2
magic-boot-ui/src/icons/interface.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649004239313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1045" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M870.4 256h-153.6V153.6a51.2 51.2 0 0 0-102.4 0v102.4H409.6V153.6a51.2 51.2 0 0 0-102.4 0v102.4H153.6a51.2 51.2 0 0 0 0 102.4h51.2v102.4a51.2 51.2 0 0 0 0 12.8A322.56 322.56 0 0 0 204.8 512a307.2 307.2 0 0 0 256 302.592V921.6h102.4v-107.008A307.2 307.2 0 0 0 819.2 512a322.56 322.56 0 0 0 0-38.4A51.2 51.2 0 0 0 819.2 460.8V358.4h51.2a51.2 51.2 0 0 0 0-102.4z m-153.6 204.8h-7.168a209.408 209.408 0 0 1 7.168 51.2 204.8 204.8 0 0 1-409.6 0 209.408 209.408 0 0 1 7.168-51.2H307.2V358.4h409.6z" p-id="1046"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

1
magic-boot-ui/src/icons/log.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1646472156835" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5189" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M956.8 828.7c3.2 20-0.8 38-12 54-11.1 16-26.4 25.7-45.5 29l-115.1 19c-18.5 3.3-35.7-0.9-51.3-12.5-15.6-11.6-25.1-27.5-28.3-47.5l-97.8-646c-1.3-10-0.8-19.5 1.4-28.5s6-17.4 11-25c5.1-7.7 11.7-14 19.7-19s16.8-8.5 26.4-10.5l114.1-19c19.2-3.3 36.4 1 51.8 13 15.4 12 24.6 28 27.8 48l97.8 645zM510 99.6c19.2 0 35.5 7 48.9 21 13.4 14 20.1 31 20.1 51v667.9c0 20-6.7 37-20.1 51-13.4 14-29.7 21-48.9 21h-99.7c-19.2 0-35.5-7-48.9-21-13.4-14-20.1-31-20.1-51V171.6c0-20 5.1-37 15.4-51s25.3-21 45-21H510z m23.4 504c6.4 0 11.8-3.1 16.3-9.5 4.5-6.3 6.7-13.9 6.7-22.5 0-9.4-2.3-17-6.7-23-4.5-6-9.9-9-16.3-9h-99.7c-6.4 0-11.8 3-16.3 9s-6.7 13.7-6.7 23c0 8.7 2.2 16.2 6.7 22.5 4.5 6.4 9.9 9.5 16.3 9.5h99.7z m0-127.1c6.4 0 11.8-3.1 16.3-9.5 4.5-6.3 6.7-14.2 6.7-23.5s-2.3-17-6.7-23c-4.5-6.1-9.9-9-16.3-9h-99.7c-6.4 0-11.8 3-16.3 9s-6.7 13.7-6.7 23 2.2 17.2 6.7 23.5c4.5 6.3 9.9 9.5 16.3 9.5h99.7z m-301-376.9c19.2 0 35.7 7 49.3 21 13.7 14 20.6 31 20.6 51v667.9c0 20-6.8 37-20.6 51s-30.2 21-49.3 21h-99.7c-19.2 0-35.7-7-49.3-21-13.8-14-20.6-31-20.6-51V171.6c0-20 6.8-37 20.6-51s30.2-21 49.3-21h99.7z m-95.9 250c-7 0-12.8 3-17.2 9-4.5 6-6.7 13.7-6.7 23 0 8.7 2.2 16.2 6.7 22.5 4.5 6.2 10.2 9.5 17.2 9.5h92c7 0 12.6-3.1 16.8-9.5s6.3-13.9 6.3-22.5c0-9.4-2.1-17-6.3-23-4.1-6-9.7-9-16.8-9h-92z m95.9 313.9c7 0 12.6-3 16.8-9 4.1-6 6.3-13.4 6.3-22 0-9.4-2.1-16.8-6.3-22.5s-9.7-8.5-16.8-8.5h-95.9c-7 0-12.8 2.8-17.2 8.5-4.4 5.7-6.7 13.2-6.7 22.5 0 8.7 2.2 16 6.7 22s10.2 9 17.2 9h95.9z m0-122.9c7 0 12.6-3 16.8-9 4.1-6 6.3-13.7 6.3-23 0-9.4-2.1-17-6.3-23-4.1-6-9.7-9-16.8-9h-95.9c-7 0-12.8 3-17.2 9-4.5 6-6.7 13.7-6.7 23 0 9.4 2.2 17 6.7 23 4.5 5.9 10.2 9 17.2 9h95.9z" p-id="5190" fill="#909399"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

2
magic-boot-ui/src/icons/login-log.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649004325581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2700" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M665.729808 153.544368V0h-102.733792v153.544368h-255.90728V0H204.725824v153.544368H0v153.544368h870.455632V153.544368h-204.725824zM0 358.270192h255.90728v255.90728H0zM562.996016 430.220934a205.096704 205.096704 0 0 0-51.181456 132.775082 170.604853 170.604853 0 0 0 5.192322 51.181456H307.088736v-255.90728h255.90728zM0 665.358928h255.90728v255.90728H0zM562.996016 696.141978a363.833394 363.833394 0 0 0-189.148859 225.49511h-66.758421v-256.27816h230.316552z" p-id="2701"></path><path d="M562.996016 562.996016A153.915248 153.915248 0 1 0 716.911264 407.968127a153.915248 153.915248 0 0 0-153.915248 153.544368z" p-id="2702"></path><path d="M716.911264 716.911264A308.201376 308.201376 0 0 0 407.968127 1024h616.031873a307.830496 307.830496 0 0 0-307.088736-307.088736z" p-id="2703"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

1
magic-boot-ui/src/icons/menu.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017024921" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2935" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M892.928 128q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 448.512q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0zM892.928 769.024q28.672 0 48.64 19.968t19.968 48.64l0 52.224q0 28.672-19.968 48.64t-48.64 19.968l-759.808 0q-28.672 0-48.64-19.968t-19.968-48.64l0-52.224q0-28.672 19.968-48.64t48.64-19.968l759.808 0z" p-id="2936"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 997 B

1
magic-boot-ui/src/icons/monitor.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1646494062534" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2291" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M759.3 525.4h-200v199.4c0 110.2 89.6 199.4 200 199.4 110.5 0 199.9-89.3 199.9-199.4 0.1-110.2-89.4-199.4-199.9-199.4zM98 724.8c0 110.2 89.6 199.4 199.9 199.4 110.5 0 199.9-89.2 199.9-199.4V525.4H297.9C187.6 525.4 98 614.6 98 724.8z m861.3-460.3c0-110.2-89.6-199.4-199.9-199.4-110.4 0-200 89.3-200 199.4v199.4h200c110.4 0 199.9-89.2 199.9-199.4zM297.9 65.1C187.5 65.1 98 154.5 98 264.5c0 110.2 89.6 199.4 199.9 199.4h200V264.5c0-110.1-89.5-199.4-200-199.4z" fill="#909399" p-id="2292"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 874 B

1
magic-boot-ui/src/icons/office.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641720023979" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15481" width="240" height="240" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M960 1024h-320v-384h128V576H256v64h128v384H0v-384h128V448h320V384H320V0h384v384H576v64h320v192h128v384h-64zM128 896h128v-128H128v128zM576 128H448v128h128V128z m320 640h-128v128h128v-128z" p-id="15482"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 592 B

2
magic-boot-ui/src/icons/oper-log.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649004383477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2972" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M12.795383 550.784512h92.979783a11.942357 11.942357 0 0 1 12.795383 11.942357v12.795383a12.795383 12.795383 0 0 1-12.795383 11.942358H12.795383a12.36887 12.36887 0 0 1-12.795383-11.942358v-12.795383a11.942357 11.942357 0 0 1 12.795383-11.942357z m0-365.521441h92.979783a11.942357 11.942357 0 0 1 12.795383 11.942357v12.795383a11.942357 11.942357 0 0 1-12.795383 11.942358H12.795383a11.942357 11.942357 0 0 1-12.795383-11.942358v-12.795383a11.942357 11.942357 0 0 1 12.795383-11.942357z m0 182.973977h92.979783a11.942357 11.942357 0 0 1 12.795383 11.515844v13.221896a11.942357 11.942357 0 0 1-12.795383 11.515845H12.795383a11.942357 11.942357 0 0 1-12.795383-11.515845V379.752892a11.942357 11.942357 0 0 1 12.795383-11.515844z m0 365.094928h92.979783a12.36887 12.36887 0 0 1 12.795383 11.942358v12.795383a11.942357 11.942357 0 0 1-12.795383 11.942357H12.795383a11.942357 11.942357 0 0 1-12.795383-11.942357v-12.795383a12.36887 12.36887 0 0 1 12.795383-11.942358z" p-id="2973"></path><path d="M945.578804 73.090213h-69.521581a10.236306 10.236306 0 0 1-10.236307-8.103742A76.772298 76.772298 0 0 0 787.76908 0.15653H127.95383A85.302553 85.302553 0 0 0 37.533123 82.473494v54.593634a9.383281 9.383281 0 0 0 9.809794 9.383281H106.628192a47.76943 47.76943 0 0 1 49.475481 45.210353v27.296817a38.386149 38.386149 0 0 1-39.665688 37.106611H47.342917a9.383281 9.383281 0 0 0-9.809794 8.956768v54.593634a9.383281 9.383281 0 0 0 9.809794 9.383281H106.628192a47.76943 47.76943 0 0 1 49.475481 46.063379v17.913536a48.195943 48.195943 0 0 1-49.475481 46.063379H47.342917a9.383281 9.383281 0 0 0-9.809794 8.956768v54.593634a9.383281 9.383281 0 0 0 9.809794 9.383281H106.628192a47.76943 47.76943 0 0 1 49.048968 45.636866v27.296817a38.386149 38.386149 0 0 1-39.665687 36.680098H47.342917a9.809794 9.809794 0 0 0-10.236306 9.383281v54.593634a9.809794 9.809794 0 0 0 10.236306 9.383281h58.858762a47.342917 47.342917 0 0 1 49.048968 45.636866V767.87951a37.959636 37.959636 0 0 1-39.239174 36.253585H46.916404a10.236306 10.236306 0 0 0-10.236306 9.383281v127.95383A85.302553 85.302553 0 0 0 127.95383 1023.78717h810.374257a85.302553 85.302553 0 0 0 85.302553-82.316964V146.450409a76.345785 76.345785 0 0 0-78.904862-73.360196z m-343.342777 91.273732a47.76943 47.76943 0 0 1 55.446659-13.648408l94.259322 49.048968A37.959636 37.959636 0 0 1 767.72298 249.239986l-298.558937 466.178454a10.662819 10.662819 0 0 1-13.221895 3.412102l-147.573418-76.345785a8.956768 8.956768 0 0 1-3.838615-12.36887z m-178.70885 597.117874l-119.850087 42.651276a10.662819 10.662819 0 0 1-12.795383-5.544666v-2.559076l-9.809794-107.90773a9.383281 9.383281 0 0 1 8.956768-9.809794 13.648409 13.648409 0 0 1 5.971179 0l127.95383 66.962505a8.956768 8.956768 0 0 1 3.838615 12.36887 8.530255 8.530255 0 0 1-4.69164 4.69164z m522.051627 152.265057c0 40.0922-2.559077 72.933683-78.904862 72.933683H156.103673a76.772298 76.772298 0 0 1-78.051837-62.697376 8.956768 8.956768 0 0 1 7.250717-10.236307h692.230221a85.302553 85.302553 0 0 0 88.714655-82.316964V118.727079a9.809794 9.809794 0 0 1 10.236306-8.956768c38.812662 0 68.668555 5.118153 68.668556 72.933683v731.042882z" p-id="2974"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

1
magic-boot-ui/src/icons/password.svg
View File

@ -1 +0,0 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 623 B

1
magic-boot-ui/src/icons/role.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641017706517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M792.703177 534.452774c-49.288352 33.217439-108.257215 52.515189-171.718341 52.515189-63.271312 0-122.050361-19.171208-171.1489-52.135561-132.996298 65.042909-224.866244 203.290726-224.866244 363.303875 0 169.314031 793.232441 166.972993 793.232441 0C1018.138862 737.7435 926.079103 599.305869 792.703177 534.452774L792.703177 534.452774 792.703177 534.452774zM354.359526 270.99103c0-149.636653 119.329695-270.99103 266.62531-270.99103 147.295615 0 266.62531 121.291105 266.62531 270.99103 0 149.636653-119.329695 270.864488-266.62531 270.864488C473.68922 541.855518 354.359526 420.627684 354.359526 270.99103L354.359526 270.99103 354.359526 270.99103 354.359526 270.99103zM177.959107 912.182508c0 6.200589 0.94907 12.084821 2.783938 17.905781C80.584558 913.827562 5.797867 881.749007 5.797867 833.409724c0-138.500902 79.468768-258.146954 194.622556-314.458422 40.177283 27.01685 88.010395 43.340849 139.576515 45.049174C241.040605 646.696082 177.959107 771.97328 177.959107 912.182508L177.959107 912.182508 177.959107 912.182508zM310.006336 270.99103c0-68.775916 21.638789-132.426856 58.399421-184.309332C361.952083 86.112256 355.561681 85.859171 349.108007 85.859171c-121.227834 0-219.488182 99.842131-219.488182 223.031376s98.197077 223.031376 219.424911 223.031376c27.269936 0 53.400988-5.061705 77.444086-14.362588C355.498409 459.666083 310.006336 370.76989 310.006336 270.99103L310.006336 270.99103zM310.006336 270.99103" p-id="20111"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.8 KiB

1
magic-boot-ui/src/icons/search.svg
View File

@ -1 +0,0 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 600 B

1
magic-boot-ui/src/icons/settings.svg
View File

@ -1 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1641015979047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2139" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M519.9 647.4c-44.8 7.4-90.4-6.9-122.5-38.3-32.1-31.4-46.6-76.2-39-120 9.4-56.8 56.2-102.7 114.2-112.1 44.9-7.6 90.7 6.7 122.9 38.2 32.2 31.6 46.7 76.5 38.9 120.4-9.7 56.9-56.5 102.6-114.5 111.8M848.4 559l66-40.4c10.5-6.4 15.6-18.6 12.9-30.4L895 349.3c-2.7-11.8-12.8-20.6-25.1-21.9l-77.5-8.4c-7.7-0.8-14.7-4.6-19.5-10.5l-13-16c-4.8-5.9-7-13.5-6.1-21l8.9-75.7c1.4-12-5.1-23.6-16.2-28.9l-131-61.8c-11.1-5.2-24.4-3-33.2 5.5l-55 54c-5.4 5.3-12.8 8.4-20.6 8.4H486c-7.7 0-15.1-3-20.6-8.4l-55-54c-8.7-8.6-22-10.8-33.2-5.5l-130.9 61.8c-11.1 5.3-17.6 16.8-16.2 28.9l8.9 75.8c0.9 7.5-1.3 15-6.1 21L220 308.4c-4.8 5.9-11.8 9.7-19.5 10.5l-77.5 8.5c-12.3 1.3-22.3 10.1-25.1 21.9L65.5 488.1c-2.7 11.8 2.4 24 12.9 30.4l66 40.5c6.5 4 11.2 10.4 12.9 17.8l4.6 19.9c1.7 7.4 0.4 15.1-3.7 21.5l-41.6 64.5c-6.6 10.2-5.8 23.4 1.9 32.9l90.7 111.3c7.7 9.5 20.7 13.1 32.3 9.1l73.5-25.3c7.3-2.5 15.3-2.1 22.2 1.2l18.7 8.8c7 3.3 12.3 9.1 14.8 16.3l25.6 72c4.1 11.4 15.1 19.1 27.4 19.1H569c12.4 0 23.4-7.7 27.4-19.1l25.6-72c2.5-7.1 7.9-13 14.8-16.3l18.7-8.8c6.9-3.3 14.9-3.7 22.2-1.2l73.5 25.3c11.7 4 24.6 0.4 32.3-9.1l90.7-111.3c7.7-9.5 8.4-22.7 1.9-32.9l-41.6-64.5c-4.1-6.4-5.5-14.1-3.8-21.5l4.6-19.8c1.9-7.5 6.5-13.9 13.1-17.9" fill="" p-id="2140"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

1
magic-boot-ui/src/icons/user.svg
View File

@ -1 +0,0 @@
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 440 B

2
magic-boot-ui/src/icons/verification-code.svg
View File

@ -1,2 +0,0 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649004142311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3942" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M522.854 33.884L902.47 164.732c14.1 4.85 23.54 18.113 23.54 33.011v402.218c-10.714 238.49-386.18 383.703-402.118 389.764A34.91 34.91 0 0 1 511.505 992c-4.217 0-8.439-0.767-12.387-2.275C483.147 983.664 107.648 838.452 97 601.502V197.743c0-14.898 9.442-28.16 23.503-33.011L500.121 33.884a35.24 35.24 0 0 1 22.733 0z m243.984 299.804c-29.29-29.29-76.777-29.29-106.066 0L459.246 535.213l-95.46-95.46c-29.289-29.289-76.776-29.289-106.065 0-29.29 29.29-29.29 76.777 0 106.067l148.492 148.492c14.645 14.645 33.839 21.967 53.033 21.967l1.152-0.009c18.808-0.287 37.53-7.606 51.881-21.958l254.559-254.558c29.289-29.29 29.289-76.777 0-106.066z" p-id="3943"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

3
magic-boot-ui/src/layout/empty.vue
View File

@ -1,3 +0,0 @@
<template>
空页面
</template>

123
magic-boot-ui/src/layout/layout.vue
View File

@ -1,123 +0,0 @@
<template>
<el-container class="container">
<el-header>
<div class="title">
{{ $global.title }}
</div>
<div class="header-right">
<div class="avatar">
<el-dropdown>
<el-row :gutter="24">
<el-col :span="6">
<el-avatar v-if="$global.user.info.headPortrait" :size="40" fit="contain" :src="$global.baseApi + $global.user.info.headPortrait"></el-avatar>
<el-avatar v-else :size="40" fit="contain">
{{ $global.user.info.name.substring(0,1) }}
</el-avatar>
</el-col>
<el-col :span="18" style="line-height: 40px;">
<span class="username">{{ $global.user.info.username }}</span>
<el-icon class="el-icon--right" color="white">
<arrow-down />
</el-icon>
</el-col>
</el-row>
<template #dropdown>
<el-dropdown-menu>
<router-link to="/user-center">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item @click="logout">退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</el-header>
<el-container class="main-container">
<el-aside width="var(--mb-sidebar-width)">
<sidebar />
</el-aside>
<el-container>
<el-header class="tabs">
<tabs />
</el-header>
<div class="main-box">
<el-main>
<router-view v-slot="{ Component }">
<keep-alive :include="$global.visitedViews.filter(it => it.meta.keepAlive).map(it => it.path.substr(it.path.lastIndexOf('/') + 1))">
<component :is="Component" :key="$route.path" />
</keep-alive>
</router-view>
</el-main>
</div>
</el-container>
</el-container>
</el-container>
</template>
<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import Tabs from './tabs.vue'
import Sidebar from './sidebar/sidebar.vue'
import { logout } from '@/scripts/auth'
</script>
<style scoped>
.container{
height: 100%;
}
.main-container{
height: calc(100% - var(--mb-header-height));
}
.title{
font-family: PoetsenOne;
line-height: 60px;
font-size: 24px;
color: white;
padding-left: 20px;
box-sizing: border-box;
float: left;
}
.header-right{
float: right;
height: 100%;
margin-right: 10px;
}
.header-right .username{
font-size: 14px;
color: white;
margin: 0px 5px;
}
.header-right .avatar{
height: 100%;
display: flex;
align-items: center;
}
.header-right .avatar :deep(.el-avatar--circle){
align-items: center;
}
.container > .el-header{
background: #409EFF;
padding: 0px;
}
.tabs{
margin-left: -21px;
height: 40px;
}
.tabs :deep(.el-tabs__header){
margin: 0px;
}
.main-box{
padding: 10px;
background-color: #F0F2F5;
height: 100%;
overflow: auto;
}
.el-main{
border-radius: 10px;
background-color: white;
height: 100%;
overflow: auto;
position: relative;
}
</style>

7
magic-boot-ui/src/layout/none.vue
View File

@ -1,7 +0,0 @@
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="$global.visitedViews.filter(it => it.meta.keepAlive).map(it => it.path.substr(it.path.lastIndexOf('/') + 1))">
<component :is="Component" :key="$route.path" />
</keep-alive>
</router-view>
</template>

17
magic-boot-ui/src/layout/sidebar/item.vue
View File

@ -1,17 +0,0 @@
<template>
<mb-icon v-if="icon" :icon="icon" style="margin-right: 5px;"/>
<span v-if="title" slot='title'>{{ title }}</span>
</template>
<script setup>
const props = defineProps({
icon: String,
title: String
})
</script>
<style scoped>
.el-menu-item.is-active svg{
fill: var(--mb-main-color);
}
</style>

17
magic-boot-ui/src/layout/sidebar/link.vue
View File

@ -1,17 +0,0 @@
<template>
<a v-if="isExternal(to)" :href="to" target="_blank" rel="noopener">
<slot />
</a>
<router-link v-else :to="to">
<slot />
</router-link>
</template>
<script setup>
import { isExternal } from '@/scripts/validate'
const props = defineProps({
to: String
})
</script>

93
magic-boot-ui/src/layout/sidebar/sidebar-item.vue
View File

@ -1,93 +0,0 @@
<template>
<div v-if="item.isShow == 1">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
</el-menu-item>
</app-link>
</template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template #title>
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
:key="child.path"
:is-nest="true"
:item="child"
:base-path="resolvePath(child.path)"
class="nest-menu"
/>
</el-sub-menu>
</div>
</template>
<script>
import path from 'path-browserify'
import { isExternal } from '@/scripts/validate'
import AppLink from './link.vue'
import Item from './item.vue'
export default {
name: 'SidebarItem',
components: { Item, AppLink },
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
data() {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
methods: {
hasOneShowingChild(children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length === 1) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath(routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
}
</script>

33
magic-boot-ui/src/layout/sidebar/sidebar.vue
View File

@ -1,33 +0,0 @@
<template>
<el-menu
:default-active="activeMenu"
class="aside-menu"
>
<sidebar-item v-for="(route,index) in permissionRoutes" :key="route.path + index" :item="route" :base-path="route.path" />
</el-menu>
</template>
<script setup>
import SidebarItem from './sidebar-item.vue'
import { getCurrentInstance, computed } from 'vue'
const { proxy } = getCurrentInstance()
const permissionRoutes = proxy.$global.user.permissionRoutes
const activeMenu = computed(() => {
const route = proxy.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
})
</script>
<style scoped>
.aside-menu{
height: 100%;
}
.aside-menu :deep(a){
text-decoration: none;
}
</style>

104
magic-boot-ui/src/layout/tabs.vue
View File

@ -1,104 +0,0 @@
<template>
<el-tabs
v-model="tabValue"
type="card"
class="demo-tabs"
@tab-click="openTab"
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(view, key) in global.visitedViews" :key="key"
:label="view.meta.title"
:name="view.path"
:closable="!(view.path == '/home')"
>
<template #label>
<el-dropdown trigger="contextmenu">
<div class="el-tabs__item is-top is-closable is-focus" style="padding: 0px;" v-if="$route.path != view.path">
{{ view.meta.title }}
</div>
<div class="el-tabs__item is-top is-active is-closable is-focus" style="padding: 0px;" v-else>
{{ view.meta.title }}
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refresh(view.path)">刷新</el-dropdown-item>
<el-dropdown-item @click="close('left', view.path)">关闭左侧</el-dropdown-item>
<el-dropdown-item @click="close('right', view.path)">关闭右侧</el-dropdown-item>
<el-dropdown-item @click="close('other', view.path)">关闭其他</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
</el-tab-pane>
</el-tabs>
</template>
<script setup>
import { getCurrentInstance, ref, watch } from 'vue'
import global from '@/scripts/global.js'
const { proxy } = getCurrentInstance()
const tabValue = ref(proxy.$route.path)
watch(global.tabValue, () => {
tabValue.value = global.tabValue.value
})
function openTab(item){
proxy.$router.push({
path: item.props.name,
query: global.visitedViews.filter(it => it.path == item.props.name)[0].query
})
}
function removeTab(path){
if(global.visitedViews.length == 1){
global.visitedViews.splice(0, 1)
proxy.$router.push({
path: '/home'
})
}else{
global.visitedViews.forEach((it, i) => {
if(it.path == path){
global.visitedViews.splice(i, 1)
proxy.$router.push({
path: global.visitedViews[global.visitedViews.length - 1].path,
query: global.visitedViews[global.visitedViews.length - 1].query
})
}
})
}
}
function refresh(path){
proxy.$router.replace({
path: `/redirect${path}`,
query: global.visitedViews.filter(it => it.path == path)[0].query
})
}
function close(type, path){
if(type == 'other'){
for(var i = global.visitedViews.length - 1; i >= 0; i--){
if(global.visitedViews[i].path != path){
global.visitedViews.splice(i, 1)
}
}
}else if(type == 'right'){
for(var i = global.visitedViews.length - 1; i >= 0; i--){
if(global.visitedViews[i].path != path){
global.visitedViews.splice(i, 1)
}else{
break;
}
}
}else{
for(var i = 0, len = global.visitedViews.length; i < len; i++){
if(global.visitedViews[0].path != path){
global.visitedViews.splice(0, 1)
}else{
break;
}
}
}
proxy.$router.push({
path: path,
query: global.visitedViews.filter(it => it.path == path)[0].query
})
}
</script>

55
magic-boot-ui/src/main.js
View File

@ -1,55 +0,0 @@
import {createApp} from 'vue'
const app = createApp(App)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@/assets/css/common.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'vite-plugin-svg-icons/register'
import App from './App.vue'
import router from './scripts/router'
import components from '@/components/index'
import globalProperties from './scripts/globalProperties'
import hasPermission from './scripts/hasPermission'
import { appComponent } from './scripts/dynamicComponent'
import '@/permission'
import global from '@/scripts/global.js'
import '@/scripts/magic-import'
app.use(globalProperties)
var loadDynamicComponent = false
import { ElLoading } from 'element-plus'
document.title = global.title
router.beforeEach(async (to, from) => {
global.tabValue.value = to.path
if((to.name && global.visitedViews.length === 0 || global.visitedViews.every(it => it.path !== to.path)) && !to.path.startsWith('/redirect') && !to.path.startsWith('/login')){
if(!loadDynamicComponent){
loadDynamicComponent = true
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0)',
})
await app.config.globalProperties.$post('/system/component/list').then((res) => {
res.data.forEach(it => {
global.dynamicComponentNames.push(it.name)
appComponent(app, it)
})
loading.close()
})
}
global.visitedViews.push(to)
}
global.visitedViews.forEach((it, i) => {
if(it.path == to.path){
global.visitedViews[i] = to
}
})
return true
})
app.use(hasPermission)
app.use(components)
app.use(ElementPlus, {
// size: 'small',
locale: zhCn
})
app.use(router)
app.mount('#app')

83
magic-boot-ui/src/permission.js
View File

@ -1,83 +0,0 @@
import router from './scripts/router'
import { getUserInfo, removeToken } from './scripts/auth'
import { ElMessage } from 'element-plus'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/scripts/auth' // get token from cookie
import global from '@/scripts/global'
import common from '@/scripts/common'
import { generateRoutes, generateHiddenRoutes } from '@/scripts/routerPermission'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login'] // no redirect whitelist
var loadInfo = false
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
// determine whether the user has obtained his permission roles through getInfo
if (loadInfo) {
next()
} else {
loadInfo = true
try {
// get user info
// note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
await getUserInfo()
await common.getDictData()
// await common.loadConfig()
// generate accessible routes map based on roles
await generateRoutes().then(accessRoutes => {
global.user.permissionRoutes.push(...accessRoutes)
accessRoutes.forEach(it => {
router.addRoute(it)
})
})
await generateHiddenRoutes().then(accessRoutes => {
accessRoutes.forEach(it => {
router.addRoute(it)
})
})
// dynamically add accessible routes
// hack method to ensure that addRoutes is complete
// set the replace: true, so the navigation will not leave a history record
next({ ...to, replace: true })
} catch (error) {
console.log(error)
// remove token and go to login page to re-login
removeToken()
ElMessage.error(error.data || 'Has Error')
next(`/login`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})

70
magic-boot-ui/src/scripts/auth.js
View File

@ -1,70 +0,0 @@
import global from './global'
import request from '@/scripts/request'
import { sha256 } from 'js-sha256'
const TokenKey = 'magic_boot_token'
export function getToken() {
return localStorage.getItem(TokenKey);
}
export function setToken(token) {
localStorage.setItem(TokenKey, token);
}
export function removeToken() {
localStorage.removeItem(TokenKey);
global.user = {
authorities: [],
info: {},
permissionRoutes: []
}
}
export async function getUserInfo() {
await request({
url: '/system/user/info',
method: 'get'
}).then(response => {
const { data } = response
if(data){
var authorities_ = []
for (var i = 0; i < data.authorities.length; i++) {
authorities_.push(data.authorities[i])
}
global.user.authorities = authorities_
global.user.info = data
}
})
}
export function login(data){
return new Promise((resolve, reject) => {
request({
url: '/system/security/login',
method: 'post',
data: {
username: data.username,
password: sha256(data.password),
code: data.code,
uuid: data.uuid
}
}).then(res => {
var token = res.data
setToken(token)
resolve(token)
}).catch((e) => {
reject(e)
})
})
}
export function logout(){
request({
url: '/system/security/logout',
method: 'get'
}).then(() => {
removeToken()
location.reload()
})
}

237
magic-boot-ui/src/scripts/common.js
View File

@ -1,237 +0,0 @@
import request from '@/scripts/request'
import { ElMessageBox, ElNotification } from 'element-plus'
import global from '@/scripts/global'
import { utils, writeFile } from 'xlsx'
import { getToken } from '@/scripts/auth'
const common = {}
let dictData = []
common.getDictData = async function() {
await request({
url: '/system/dict/items/all',
method: 'get'
}).then((response) => {
const { data } = response
dictData = data
})
}
common.getDictType = (type) => {
return dictData.filter(it => it.type === type)
}
common.getDictLabel = (type, value) => {
value = (value || '') + ''
var values = []
value.split(',').forEach(v => {
const list = dictData.filter(it => it.type === type && it.value === v + '')
values.push(list && list[0] && list[0].label || '')
})
return values.join(',')
}
common.handleDelete = (options) => {
const url = options.url
const id = options.id
ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
request({
url: url,
method: 'delete',
params: {
id: id
}
}).then(() => {
ElNotification({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
})
options && options.done()
})
})
}
const formatJson = (list, filterVal) => {
return list.map(v => filterVal.map(j => {
return v[j]
}))
}
common.$get = (url, data) => request({ url, params: data })
common.$delete = (url, data) => request({ url, method: 'delete', params: data })
common.$post = (url, data) => request.post(url, data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
transformRequest: [data => data && Object.keys(data).map(it => encodeURIComponent(it) + '=' + encodeURIComponent(data[it] === null || data[it] === undefined ? '' : data[it])).join('&')]
})
common.$postJson = (url, data) => request.post(url, JSON.stringify(data), {
headers: {
'Content-Type': 'application/json'
}
})
common.renderWhere = (where) => {
var newWhere = {}
for(var key in where) {
if(where[key] instanceof Object){
newWhere[key] = where[key].value
}else{
newWhere[key] = where[key]
}
}
return newWhere
}
// common.exportExcel = (options) => {
// var where = options.where || {}
// where = common.renderWhere(where)
// where.current = 1
// where.size = 99999999
// const url = options.url
// const headers = options.headers
// const columns = options.columns
// request({
// url: url,
// method: 'post',
// params: where
// }).then(res => {
// import('@/vendor/Export2Excel').then(excel => {
// const data = formatJson(res.data, columns)
// excel.export_json_to_excel({
// header: headers,
// data,
// filename: 'table-list'
// })
// })
// })
// }
common.handlerTreeData = (data, id, pid, sort, pidVal) => {
var treeData = []
var addChildren = (it) => {
var children = data.filter(d => d[pid] === it[id])
if (children && children.length > 0) {
children.sort((a, b) => {
return a[sort] - b[sort]
})
it.children = children
children.forEach(chi => {
addChildren(chi)
})
}
}
data.sort((a, b) => {
return a[sort] - b[sort]
})
data.filter(it => it[pid] === pidVal).forEach(it => {
addChildren(it)
treeData.push(it)
})
return treeData
}
common.uuid = () => {
function S4() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
return (S4()+S4()+S4()+S4()+S4()+S4()+S4()+S4());
}
common.objAssign = (obj1, obj2, exclude) => {
exclude = exclude || ''
for (var o1 in obj1) {
for (var o2 in obj2) {
if (o1 === o2) {
if(exclude.indexOf(o1) == -1){
obj1[o1] = obj2[o2]
}
}
}
}
}
common.copyNew = (obj) => {
return JSON.parse(JSON.stringify(obj))
}
common.getParam = (data) => {
let url = ''
for (var k in data) {
const value = data[k] !== undefined ? data[k] : ''
url += `&${k}=${encodeURIComponent(value)}`
}
return url ? url.substring(1) : ''
}
common.getUrl = (url, data) => {
url += (url.indexOf('?') < 0 ? '?' : '') + common.getParam(data)
return url
}
common.downloadMore = (urls, filename) => {
var params = {
urls: encodeURI(urls),
filename: filename || '',
token: getToken()
}
var form = document.createElement("form");
form.style.display = 'none';
form.action = global.baseApi + '/system/file/download';
form.method = 'post';
document.body.appendChild(form);
for(var key in params){
var input = document.createElement("input");
input.type = 'hidden';
input.name = key;
input.value = params[key];
form.appendChild(input);
}
form.submit();
form.remove();
}
common.download = (urls, filename) => {
location.href = common.downloadHref(urls, filename)
}
common.downloadHref = (urls, filename) => {
return global.baseApi + `/system/file/download?urls=${encodeURI(urls)}&filename=${filename || ''}&token=${getToken()}`
}
// common.loadConfig = async() => {
// await request({
// url: '/system/config/list'
// }).then(res => {
// const { data } = res
// global.filePrefix = data.filePrefix
// })
// }
common.setDefaultValue = (obj, attr, value) => {
obj[attr] = obj[attr] === undefined ? value : obj[attr]
}
common.isComma = (value) => {
return value.toString().indexOf(',') !== -1
}
common.exportExcel = (options) => {
options.suffix = options.suffix || 'xlsx'
const workBook = utils.json_to_sheet(options.data);
const wb = utils.book_new()
utils.book_append_sheet(wb, workBook, 'sheet1');
writeFile(wb, `${options.fileName}.${options.suffix || 'xlsx'}`);
}
common.objectAssign = (target, source) => {
return Object.assign({}, JSON.parse(JSON.stringify(target)), JSON.parse(JSON.stringify(source)))
}
export default common

55
magic-boot-ui/src/scripts/dynamicComponent.js
View File

@ -1,55 +0,0 @@
import { babelParse } from '@vue/compiler-sfc'
import { compileFile } from '@/compiler/sfc-compiler.js'
import { ElLoading, ElMessage } from 'element-plus'
export function appComponent(app, item){
var compiled = {}
compileFile('TestCode.vue', item.code, compiled)
if(compiled.errors.length > 0){
ElMessage({
type: 'error',
duration: 0,
showClose: true,
message: `
组件“${item.name}”发生错误：
${compiled.errors[0]}
`
})
throw compiled.errors[0]
}else{
var code = compiled.js
var ast = babelParse(code, {
sourceType: 'module'
})
var replaceCode = (node, subCode) => code.substring(0, node.start) + subCode + code.substring(node.end);
for(var i = ast.program.body.length - 1; i>=0; i--){
var node = ast.program.body[i]
if(node.type === 'ImportDeclaration'){
code = replaceCode(node, node.specifiers.map(it => `const ${it.local?.name || it.imported?.name || '*'} = ___magic__import__('${node.source.value}', '${it.imported?.name || '*'}');`).join('\r\n'));
} else if (node.type === 'ExportDefaultDeclaration'){
code = replaceCode(node, `return ${node.declaration.name}`)
}
}
code = `(function(){
${code}
})()`
var componentStyle = document.createElement("style");
componentStyle.innerHTML = compiled.css
document.head.appendChild(componentStyle);
app.component(item.name, eval(code))
}
}
//
// const install = (app) => {
// const loading = ElLoading.service({
// lock: true,
// background: 'rgba(255, 255, 255, 0)',
// })
// app.config.globalProperties.$post('/system/component/list').then((res) => {
// res.data.forEach(it => {
// appComponent(app, it)
// })
// loading.close()
// })
// }
// export default install

158
magic-boot-ui/src/scripts/gen/gen-mb-list.js
View File

@ -1,158 +0,0 @@
function gen(groupPath, data){
var permissionPrefix = groupPath.replace(/^\//,'').replace(/\/\//, '/').replace(/\//g, ':')
var html = `<template>
<mb-list ref="magicList" v-bind="listOptions" />
<mb-dialog ref="formDialog" :title="magicFormTitle" @confirm-click="magicForm.save($event)" width="50%">
<template #content>
<mb-form ref="magicForm" @reload="magicList.reload" v-bind="formOptions" />
</template>
</mb-dialog>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue'
const { proxy } = getCurrentInstance()
const formDialog = ref()
const magicList = ref()
const magicForm = ref()
const magicFormTitle = ref()
const listOptions = reactive({
tools: [{
type: 'add',
permission: '${permissionPrefix}:save',
click: () => {
magicFormTitle.value = '添加'
formDialog.value.show(() => magicForm.value.initFormData())
}
}],
table: {
url: '${groupPath}/list',
where: {`
for(var i in data){
var d = data[i]
if(d.query){
var props = ''
if(d.dictType){
props = `,
props: {
type: '${d.dictType}'
}`
}
html += `
${d.columnName}: {
label: '${d.columnComment.trim()}',
${d.component}${props}
},`
}
}
html = html.substring(0, html.length - 1)
html += `
},
cols: [`
for(var i in data){
var d = data[i]
if(d.list){
var type = ''
if(d.component){
if(d.component.indexOf('upload-image') != -1){
type = `,
type: 'image'`
}
}
var dictType = ''
if(d.dictType){
dictType = `,
dictType: '${d.dictType}'`
}
html += `
{
field: '${d.columnName}',
label: '${d.columnComment.trim()}'${type}${dictType}
},`
}
}
html += `{
label: '操作',
type: 'btns',
width: 140,
fixed: 'right',
btns: [
{
permission: '${permissionPrefix}:save',
label: '修改',
type: 'primary',
link: true,
icon: 'ElIconEdit',
click: (row) => {
magicFormTitle.value = '修改'
formDialog.value.show(() => magicForm.value.getDetail(row.id))
}
}, {
permission: '${permissionPrefix}:delete',
label: '删除',
type: 'primary',
link: true,
icon: 'ElIconDelete',
click: (row) => {
proxy.$common.handleDelete({
url: '${groupPath}/delete',
id: row.id,
done: () => magicList.value.reload()
})
}
}
]
}
]
}
})
`
html += `
const formOptions = reactive({
detail: {
request: {
url: '${groupPath}/get'
}
},
form: {
request: {
url: "${groupPath}/save"
},
rows: [{
gutter: 24,
cols: [`
for(var i in data){
var d = data[i]
if(d.save){
var props = ''
if(d.dictType){
props = `,
props: {
type: '${d.dictType}'
}`
}
var rules = ''
if(d.required){
var messagePrefix = '请选择'
if(d.component.indexOf('input') != -1){
messagePrefix = '请输入'
}
rules = `,
rules: [{ required: true, message: '${messagePrefix}${d.columnComment.trim()}', trigger: 'change' }]`
}
html += `{
span: 12,
name: '${d.columnName}',
label: '${d.columnComment.trim()}',
${d.component}${props}${rules}
},`
}
}
html = html.substring(0, html.length - 1)
html += `]
}]
}
})
</script>`
return html
}
export default gen

14
magic-boot-ui/src/scripts/global.js
View File

@ -1,14 +0,0 @@
import { reactive, ref } from 'vue'
export default {
title: 'Magic Boot',
user: {
authorities: [],
info: {},
permissionRoutes: []
},
baseApi: import.meta.env.VITE_APP_BASE_API,
visitedViews: reactive([]),
tabValue: ref(''),
dynamicComponentNames: []
}

20
magic-boot-ui/src/scripts/globalProperties.js
View File

@ -1,20 +0,0 @@
import * as PlusIcons from '@element-plus/icons-vue'
import request from './request'
import global from './global'
import common from './common'
import treeTable from './treeTable'
const install = (app) => {
app.config.globalProperties.$request = request
app.config.globalProperties.$post = common.$post
app.config.globalProperties.$postJson = common.$postJson
app.config.globalProperties.$get = common.$get
app.config.globalProperties.$delete = common.$delete
app.config.globalProperties.$global = global
app.config.globalProperties.$common = common
app.config.globalProperties.$treeTable = treeTable
for(var key in PlusIcons) {
app.component(`ElIcon${key}`, PlusIcons[key])
}
}
export default install

17
magic-boot-ui/src/scripts/hasPermission.js
View File

@ -1,17 +0,0 @@
const hasPermission = {
install(app) {
app.directive('permission', {
mounted(el, binding) {
if (binding.value) {
const permissionList = app.config.globalProperties.$global.user.authorities
if (permissionList && permissionList.length && !permissionList.includes(binding.value) && import.meta.env.MODE != 'demo') {
el.remove()
}
}
}
})
}
}
export default hasPermission

14
magic-boot-ui/src/scripts/magic-import.js
View File

@ -1,14 +0,0 @@
import * as vue from "vue";
import ElementPlus from "element-plus";
const libs = {
vue,
'element-plus': ElementPlus
}
window.___magic__import__ = function(lib, name){
if(Object.prototype.toString.call(libs[lib]) != '[object Module]' && name == '*'){
return libs[lib]
}
return (libs[lib] || {})[name]
}

117
magic-boot-ui/src/scripts/request.js
View File

@ -1,117 +0,0 @@
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { logout, login } from '@/scripts/auth'
import { getToken } from '@/scripts/auth'
import global from '@/scripts/global'
// create an axios instance
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 1000 * 60 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if (getToken()) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
var currentMessage
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
if (response.config.url.indexOf('user/info') !== -1 && response.data.code === 402) {
logout()
}
return new Promise((reslove, reject) => {
const res = response.data
if (res.code !== 200) {
var duration = 5
if (res.code === 402) {
duration = 1
if(global.user.info.username){
ElMessageBox.prompt(`当前账号：${global.user.info.username}凭证已过期，请输入密码重新登录`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '退出',
inputType: 'password',
closeOnClickModal: false,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
login({
username: global.user.info.username,
password: instance.inputValue
}).then((res) => {
if (res) {
done()
service(response.config).then(ret => reslove(ret))
}
})
} else if (action === 'cancel') {
logout()
} else {
done()
}
}
})
}
}
if (res.code !== 402) {
if(currentMessage){
currentMessage.close()
}
if(res.code == 403 && import.meta.env.MODE == 'demo'){
res.message = '演示模式，不允许操作！'
}
currentMessage = ElMessage({
message: res.message || 'Error',
type: 'error',
duration: duration * 1000,
showClose: true
})
reject(res)
}
} else {
reslove(res)
}
})
},
error => {
// console.log('err' + error) // for debug
if(currentMessage){
currentMessage.close()
}
currentMessage = ElMessage({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service

66
magic-boot-ui/src/scripts/router.js
View File

@ -1,66 +0,0 @@
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/layout.vue'
const routes = [
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/',
component: Layout,
redirect: '/home',
children: [
{
path: '/home',
component: () => import('@/views/home.vue'),
meta: { title: '首页' }
}
]
},
{
path: '/user-center',
redirect: '/system/user/user-center',
component: Layout,
hidden: true,
children: [{
path: '/system/user/user-center',
component: () => import('@/views/system/user/user-center'),
meta: { title: '个人中心' }
}]
},
{
path: '/login',
component: () => import('@/views/login.vue'),
hidden: true
},
// {
// path: '/404',
// name: '404',
// component: () => import('@/views/404.vue'),
// hidden: true
// },
// {
// path: '/:pathMatch(.*)*',
// redirect: '/404',
// hidden: true
// }
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router

111
magic-boot-ui/src/scripts/routerPermission.js
View File

@ -1,111 +0,0 @@
import request from '@/scripts/request'
import common from '@/scripts/common'
import { sha256 } from 'js-sha256'
const viewModules = import.meta.glob("../views/**/**.vue")
const layoutModules = import.meta.glob("../layout/**.vue")
export const filterAsyncRouter = (routers, level) => {
level = level || 0
const accessedRouters = routers.filter(router => {
if (router.isShow === 1) {
var setIframe = () => {
router.component = loadView(`/common/iframe`)
router.props = { url: router.url }
router.path = "/" + sha256(router.url)
}
if(router.url && router.url.startsWith('http')){
if(router.openMode == '0'){
setIframe()
}
} else if(router.url && router.url.startsWith('/') && router.url.indexOf('.htm') != -1) {
if(router.openMode == '0'){
setIframe()
}else{
router.path = location.href.substring(0, location.href.indexOf('/', location.href.indexOf('/', location.href.indexOf('/') + 1) + 1)) + router.path
}
} else if (router.componentName) {
router.component = loadView(`/common/show-component`)
router.props = { name: router.componentName }
} else if (router.component) {
const component = router.component
if (component === 'Layout') {
router.path = "/" + common.uuid()
router.component = level > 0 ? layoutModules[`../layout/none.vue`] : loadLayoutView(component)
} else {
router.path = router.path.startsWith('/') ? router.path : '/' + router.path
router.component = loadView(component) || layoutModules[`../layout/empty.vue`]
}
}
if (router.children && router.children.length) {
router.children = filterAsyncRouter(router.children, level + 1)
}
return true
}
return false
})
return accessedRouters
}
export const loadLayoutView = () => {
return layoutModules[`../layout/layout.vue`]
}
export const loadView = (view) => {
view = view.substring(0, 1) === '/' ? view : '/' + view
return viewModules[`../views${view}.vue`]
}
function loadComponent(router){
var result = {
path: router.path,
meta: {
title: router.name,
keepAlive: router.keepAlive
}
}
if(router.componentName){
result.component = loadView(`/common/show-component`)
result.props = { name: router.componentName }
}else if(router.path){
result.component = loadView(router.path) || layoutModules[`../layout/empty.vue`]
}
return result
}
export function loadHiddenRouter(routers){
return routers.filter(router => {
router.path = router.path.startsWith('/') ? router.path : '/' + router.path
router.redirect = router.path
router.component = loadLayoutView()
router.hidden = true
router.children = [loadComponent(router)]
return true
})
}
export function generateRoutes(){
return new Promise((resolve, reject) => {
request({
url: '/system/menu/current/menus',
method: 'post'
}).then(response => {
const { data } = response
const asyncRouter = filterAsyncRouter(data)
resolve(asyncRouter)
})
})
}
export function generateHiddenRoutes(){
return new Promise((resolve, reject) => {
request({
url: '/system/menu/current/hidden/menus',
method: 'post'
}).then(response => {
const { data } = response
const asyncRouter = loadHiddenRouter(data)
resolve(asyncRouter)
})
})
}

58
magic-boot-ui/src/scripts/scroll-to.js
View File

@ -1,58 +0,0 @@
Math.easeInOutQuad = function(t, b, c, d) {
t /= d / 2
if (t < 1) {
return c / 2 * t * t + b
}
t--
return -c / 2 * (t * (t - 2) - 1) + b
}
// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()
/**
* Because it's so fucking difficult to detect the scrolling element, just move them all
* @param {number} amount
*/
function move(amount) {
document.documentElement.scrollTop = amount
document.body.parentNode.scrollTop = amount
document.body.scrollTop = amount
}
function position() {
return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}
/**
* @param {number} to
* @param {number} duration
* @param {Function} callback
*/
export function scrollTo(to, duration, callback) {
const start = position()
const change = to - start
const increment = 20
let currentTime = 0
duration = (typeof (duration) === 'undefined') ? 500 : duration
var animateScroll = function() {
// increment the time
currentTime += increment
// find the value with the quadratic in-out easing function
var val = Math.easeInOutQuad(currentTime, start, change, duration)
// move the document.body
move(val)
// do the animation unless its over
if (currentTime < duration) {
requestAnimFrame(animateScroll)
} else {
if (callback && typeof (callback) === 'function') {
// the animation is done so lets callback
callback()
}
}
}
animateScroll()
}

6
magic-boot-ui/src/scripts/svg-icons.js
View File

@ -1,6 +0,0 @@
const svgs = import.meta.glob('../icons/*.svg')
const svgNames = []
for (const [key, value] of Object.entries(svgs)) {
svgNames.push(key.substring(key.lastIndexOf('/') + 1, key.lastIndexOf('.')))
}
export default svgNames

102
magic-boot-ui/src/scripts/treeTable.js
View File

@ -1,102 +0,0 @@
import common from "@/scripts/common";
const treeTable = {}
treeTable.isChildren = (children, id) => {
var result = false
for(var i in children) {
var chi = children[i]
if(chi.id == id){
result = true
}
if(chi.children && children.length > 0){
if(treeTable.isChildren(chi.children, id)){
result = true
}
}
}
return result
}
treeTable.queryChildren = (children, id) => {
var result = []
for(var i in children){
var chi = children[i]
if(chi.id == id){
if(chi.children && chi.children.length > 0){
result = chi.children
}
}else{
var qc = treeTable.queryChildren(chi.children, id)
if(qc.length > 0){
result = qc
}
}
}
return result
}
treeTable.genTree = (children) => {
var treeData = []
for(var i in children){
var chi = {}
chi.label = children[i].name
chi.value = children[i].id
if(children[i].children && children[i].children.length > 0){
chi.children = treeTable.genTree(children[i].children)
}
treeData.push(chi)
}
return treeData
}
treeTable.deleteEmptyChildren = (children) => {
for(var i in children){
var chi = children[i]
if(chi.children && chi.children.length == 0){
delete chi.children
}else{
treeTable.deleteEmptyChildren(chi.children)
}
}
}
treeTable.recursionSearch = (fields, data, text, html) => {
html = html != undefined ? html : true
var searchData = []
for(var i in data){
var treeNode = data[i]
var children = treeNode.children
if(children && children.length > 0){
var childrenSearch = treeTable.recursionSearch(fields, children, text, html)
treeNode.children = childrenSearch && childrenSearch.length > 0 ? childrenSearch : treeNode.children
treeTable.treeNodeReplace(fields, searchData, treeNode, text, childrenSearch, html)
}else{
treeTable.treeNodeReplace(fields, searchData, treeNode, text, null, html)
}
}
return searchData
}
treeTable.treeNodeReplace = (fields, searchData, treeNode, text, childrenSearch, html) => {
var exist = false
fields.forEach((f) => {
if(treeNode[f] && treeNode[f].indexOf(text) != -1){
if(html){
treeNode[f] = treeNode[f].replace(text, `<font color="#FAA353">${text}</font>`)
}
exist = true
}
})
if(exist || (childrenSearch && childrenSearch.length > 0)){
searchData.push(treeNode)
}
}
treeTable.clearFont = (data, fields) => {
fields.forEach(field => {
data[field] = data[field].replace(/<font.*?>(.*?)<\/font>/g,'$1')
})
}
export default treeTable

87
magic-boot-ui/src/scripts/validate.js
View File

@ -1,87 +0,0 @@
/**
* Created by PanJiaChen on 16/11/18.
*/
/**
* @param {string} path
* @returns {Boolean}
*/
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
}
/**
* @param {string} url
* @returns {Boolean}
*/
export function validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
}
/**
* @param {string} email
* @returns {Boolean}
*/
export function validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
}
/**
* @param {string} str
* @returns {Boolean}
*/
export function isString(str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
}
/**
* @param {Array} arg
* @returns {Boolean}
*/
export function isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}

3
magic-boot-ui/src/views/404.vue
View File

@ -1,3 +0,0 @@
<template>
404
</template>

23
magic-boot-ui/src/views/common/iframe.vue
View File

@ -1,23 +0,0 @@
<script setup>
const props = defineProps({
url: {
type: String,
default: ''
}
})
</script>
<template>
<iframe :src="url" width="100%" height="100%" frameborder="0"></iframe>
</template>
<style scoped>
iframe{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>

12
magic-boot-ui/src/views/common/show-component.vue
View File

@ -1,12 +0,0 @@
<script setup>
const props = defineProps({
name: {
type: String,
default: ''
}
})
</script>
<template>
<component :is="props.name"></component>
</template>

177
magic-boot-ui/src/views/examples/editor-table.vue
View File

@ -1,177 +0,0 @@
<template>
<div style="padding: 50px;">
<el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
<el-button type="primary" @click="gen" style="margin-bottom: 10px">代码生成</el-button>
<mb-editor-table v-model="tableDatas" :cols="cols" :show-no="false" :operation="false" />
</div>
</template>
<script setup>
import { reactive,getCurrentInstance } from 'vue'
import genCode from '@/scripts/gen/gen-mb-list.js'
const { proxy } = getCurrentInstance()
const tableDatas = reactive([])
proxy.$get('/system/code/gen/columns', { tableName: 'sys_test' }).then(res => {
var columns = res.data.columns
var primary = res.data.primary
columns.forEach(it => {
tableDatas.push({
columnName: it.columnName.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase()),
columnComment: it.columnComment,
dataType: it.dataType
})
})
console.log(tableDatas)
})
const cols = reactive([{
field: 'columnName',
label: '列名'
}, {
field: 'columnComment',
label: '列说明',
component: 'input'
}, {
field: 'dataType',
label: '字段类型'
}, {
field: 'save',
label: '保存',
component: 'switch',
width: '80px'
}, {
field: 'list',
label: '列表',
component: 'switch',
width: '80px'
}, {
field: 'query',
label: '查询',
component: 'switch',
width: '80px'
}, {
field: 'where',
label: '匹配方式',
component: 'select',
props: {
options: [{
label: '=',
value: '='
},{
label: '!=',
value: '!='
},{
label: '>',
value: '>'
},{
label: '>=',
value: '>='
},{
label: '<',
value: '<'
},{
label: '<=',
value: '<='
},{
label: 'Between',
value: 'Between'
},{
label: 'Like',
value: 'Like'
},{
label: '左Like',
value: '左Like'
},{
label: '右Like',
value: '右Like'
}]
}
}, {
field: 'required',
label: '必填',
component: 'switch',
width: '80px'
}, {
field: 'component',
label: '控件类型',
component: 'select',
props: {
options: [{
label: '单行文本框',
value: `component: 'input'`
},{
label: '多行文本框',
value: `component: 'input',
props: {
type: 'textarea'
}
`
},{
label: '单选下拉框',
value: `component: 'select'`
},{
label: '多选下拉框',
value: `component: 'select',
props: {
multiple: true
}
`
},{
label: '单选框',
value: `component: 'radio-group'`
},{
label: '复选框',
value: `component: 'checkbox-group'`
},{
label: '日期选择',
value: `component: 'date'`
},{
label: '日期时间',
value: `component: 'date',
props: {
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss'
}
`
},{
label: '图片上传',
value: `component: 'upload-image'`
},{
label: '文件上传',
value: `component: 'upload-file'`
},{
label: '多图片上传',
value: `component: 'upload-image',
props: {
multiple: true
}
`
},{
label: '多文件上传',
value: `component: 'upload-file',
props: {
multiple: true
}
`
}]
}
}, {
component: 'select',
field: 'dictType',
label: '字典类型',
props: {
url: '/system/dict/all',
showValue: true
}
}])
function gen(){
genCode('test', tableDatas)
}
function getData(){
console.log(tableDatas)
}
</script>

24
magic-boot-ui/src/views/examples/select-example.vue
View File

@ -1,24 +0,0 @@
<template>
<div style="padding: 50px;">
<h2>多选</h2>
<el-button type="primary" @click="getData" style="margin-bottom: 10px">获取数据</el-button>
<mb-select v-model="dictType" type="dict_type" multiple />
</div>
</template>
<script>
export default {
name: 'SelectExample',
data() {
return {
dictType: '0,1'
}
},
methods: {
getData() {
console.log(this.dictType)
}
}
}
</script>

142
magic-boot-ui/src/views/examples/test-mb-form.vue
View File

@ -1,142 +0,0 @@
<template>
<mb-form ref="magicForm" v-bind="formOptions" />
<el-button @click="getFormData">获取表单数据</el-button>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const magicForm = ref()
const formOptions = reactive({
form: {
request: {
url: "user/save",
method: "post"
},
rows: [{
gutter: 24,
cols: [{
span: 12,
name: 'input',
label: 'input',
rules: [{ required: true, message: '请输入input', trigger: 'change' }]
},{
span: 12,
name: 'switch',
component: 'switch',
label: 'switch',
props: {
activeValue: '1',
inactiveValue: '0'
}
},{
span: 12,
name: 'checkbox',
component: 'checkbox-group',
label: 'checkbox',
props: {
type: 'office_type'
}
},{
span: 12,
name: 'checkboxButton',
component: 'checkbox-group',
label: 'checkboxButton',
props: {
type: 'office_type',
button: true
}
},{
span: 12,
name: 'radio',
component: 'radio-group',
label: 'radio',
props: {
type: 'is_login'
}
},{
span: 12,
name: 'radioButton',
component: 'radio-group',
label: 'radioButton',
props: {
type: 'is_login',
button: true
}
},{
span: 12,
name: 'date',
component: 'date',
label: 'date',
props: {
type: 'date'
}
},{
span: 12,
name: 'datetime',
component: 'date',
label: 'datetime',
props: {
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss'
}
},{
span: 12,
name: 'daterange',
component: 'date',
label: 'daterange',
props: {
type: 'daterange'
}
},{
span: 12,
name: 'datetimerange',
component: 'date',
label: 'datetimerange',
props: {
type: 'datetimerange',
format: 'YYYY-MM-DD HH:mm:ss'
}
},{
component: 'treeselect',
span: 12,
name: 'treeselect',
label: 'treeselect',
rules: [{ required: true, message: '请选择组织机构', trigger: 'change' }],
props: {
url: '/system/user/offices'
}
}, {
component: 'select',
span: 12,
name: 'select',
label: 'select',
rules: [{ required: true, message: '请选择角色', trigger: 'change' }],
props: {
url: '/system/role/all',
placeholder: '请选择角色',
multiple: true
}
},{
span: 12,
name: 'head',
component: 'upload-image',
label: '头像',
rules: [{ required: true, message: '请选择头像', trigger: 'change' }]
},{
span: 12,
name: 'heads',
component: 'upload-image',
label: '多头像',
props: {
multiple: true
},
rules: [{ required: true, message: '请选择头像', trigger: 'change' }]
}]
}]
}
})
function getFormData(){
console.log(magicForm.value.getFormData())
}
</script>

207
magic-boot-ui/src/views/examples/test-mb-list.vue
View File

@ -1,207 +0,0 @@
<template>
<mb-list ref="magicList" v-bind="listOptions" />
<mb-dialog ref="formDialog" @confirm-click="magicForm.save($event)" width="50%">
<template #content>
<mb-form ref="magicForm" @reload="magicList.reload" v-bind="formOptions" />
</template>
</mb-dialog>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const formDialog = ref()
const magicList = ref()
const magicForm = ref()
const listOptions = reactive({
search: {
noReset: 'id'
},
tools: [{
type: 'add',
permission: 'user:save',
click: () => {
formOptions.form.rows[0].cols[1].rules = [{ required: true, message: '请输入密码', trigger: 'change' }]
formOptions.detail.formData = null
formDialog.value.show()
}
},{
type: 'delete',
permission: 'user:delete',
url: '/system/user/delete'
}],
table: {
url: '/system/user/list',
where: {
username: {
label: '登录名称',
},
name: {
label: '姓名/昵称',
},
roleId: {
component: 'select',
label: '角色',
props: {
url: '/system/role/all',
multiple: true
}
}
},
cols: [
{
field: 'username',
label: '登录名称',
sortable: 'custom'
}, {
field: 'name',
label: '姓名/昵称',
sortable: 'custom'
}, {
field: 'officeName',
label: '所属机构'
}, {
field: 'roles',
label: '角色'
}, {
field: 'phone',
label: '手机号',
sortable: 'custom'
}, {
field: 'isLogin',
label: '禁止登录',
type: 'switch',
width: 100,
change: (row) => {
proxy.$get('/system/user/change/login/status', {
id: row.id,
isLogin: row.isLogin
})
}
}, {
field: 'createDate',
label: '创建时间',
width: 180
}, {
label: '操作',
type: 'btns',
width: 140,
fixed: 'right',
btns: [
{
permission: 'user:save',
label: '修改',
type: 'primary',
link: true,
icon: 'ElIconEdit',
click: (row) => {
// magicForm.value.getDetail(row.id)
formOptions.form.rows[0].cols[1].rules = []
formOptions.detail.formData = proxy.$common.copyNew(row)
formDialog.value.show()
}
}, {
permission: 'user:delete',
label: '删除',
type: 'primary',
link: true,
icon: 'ElIconDelete',
click: (row) => {
proxy.$common.handleDelete({
url: '/system/user/delete',
id: row.id,
done: () => magicList.value.reload()
})
}
}
]
}
]
}
})
const formOptions = reactive({
detail: {
request: {
url: '/system/user/get'
}
},
form: {
request: {
url: "user/save",
method: "post"
},
rows: [{
gutter: 24,
cols: [{
span: 12,
name: 'head',
component: 'upload-image',
label: '头像',
rules: [{ required: true, message: '请选择头像', trigger: 'change' }]
},{
span: 12,
name: 'username',
label: '登录名称',
rules: [{ required: true, message: '请输入登录名称', trigger: 'change' }]
}, {
span: 12,
name: 'password',
label: '密码'
}]
},{
gutter: 24,
cols: [{
span: 12,
name: 'name',
label: '姓名/昵称'
}, {
span: 12,
name: 'phone',
label: '手机号'
}]
},{
gutter: 24,
cols: [{
component: 'treeselect',
span: 12,
name: 'officeId',
label: '组织机构',
rules: [{ required: true, message: '请选择组织机构', trigger: 'change' }],
props: {
url: '/system/user/offices'
}
}, {
component: 'select',
span: 12,
name: 'roles',
label: '选择角色',
rules: [{ required: true, message: '请选择角色', trigger: 'change' }],
props: {
url: '/system/role/all',
placeholder: '请选择角色',
multiple: true
}
}]
}, {
gutter: 24,
cols: [{
span: 24,
component: 'radio-group',
name: 'isLogin',
label: '登录状态',
defaultValue: '0',
props: {
button: true,
options: [{
label: '有效',
value: '0'
}, {
label: '锁定',
value: '1'
}]
}
}]
}]
}
})
</script>

83
magic-boot-ui/src/views/examples/three-linkage.vue
View File

@ -1,83 +0,0 @@
<template>
<div>
<el-select v-for="(data, i) in dataList" :key="i" v-model="dataValues[i]" :placeholder="'请选择' + (i+1) + '级'" @change="selectChange">
<el-option
v-for="item in data"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</div>
</template>
<script setup>
import { reactive } from 'vue'
var dataList = reactive([[], [], []])
var dataValues = reactive([])
var threeLinkageData = reactive([{
"id": 1,
"name": "1",
"pid": 0,
"level": 0
}, {
"id": 2,
"name": "2",
"pid": 0,
"level": 0
}, {
"id": 3,
"name": "1-1",
"pid": 1,
"level": 1
}, {
"id": 4,
"name": "1-2",
"pid": 1,
"level": 1
}, {
"id": 5,
"name": "2-1",
"pid": 2,
"level": 1
}, {
"id": 6,
"name": "2-2",
"pid": 2,
"level": 1
}, {
"id": 7,
"name": "1-1-3-1",
"pid": 3,
"level": 2
}, {
"id": 8,
"name": "1-1-3-2",
"pid": 3,
"level": 2
}, {
"id": 9,
"name": "1-2-3-1",
"pid": 4,
"level": 2
}, {
"id": 10,
"name": "1-2-3-2",
"pid": 4,
"level": 2
}])
dataList[0] = threeLinkageData.filter(it => it.level === 0)
function selectChange(id){
var currLevel = threeLinkageData.filter(it => it.id === id).map(it => it.level)[0]
dataList.forEach((it, i) => {
if (i > currLevel) {
dataList[i] = []
dataValues[i] = ''
}
})
if (currLevel + 1 !== dataList.length) {
dataList[currLevel + 1] = threeLinkageData.filter(it => it.pid == id)
}
}
</script>

45
magic-boot-ui/src/views/examples/upload-file.vue
View File

@ -1,45 +0,0 @@
<template>
<div style="padding: 50px;">
<h2>上传文件（单文件）</h2>
<mb-upload-file v-model="fileUrl" @change="fileChange" />
<h2>上传文件（多文件）</h2>
<mb-upload-file v-model="fileUrls" @change="multipleFileChange" multiple />
<h2>上传图片（id）</h2>
<mb-upload-image :external-id="externalId" multiple :external-type="externalType" />
<h2>上传图片（url、单图）</h2>
<mb-upload-image v-model="imgUrl" @change="imgChange" tip="建议上传尺寸：710*345" />
<h2>上传图片（url、多图）</h2>
<mb-upload-image v-model="multipleImgUrl" :width="120" :height="120" multiple :limit="3" @change="multipleImgChange" />
</div>
</template>
<script>
export default {
name: 'UploadFile',
data() {
return {
externalId: this.$common.uuid(),
externalType: '营业执照',
imgUrl: '',
multipleImgUrl: '',
fileUrl: '',
fileUrls: ''
}
},
methods: {
fileChange() {
console.log(this.fileUrl)
},
multipleFileChange() {
console.log(this.fileUrls)
},
imgChange() {
console.log(this.imgUrl)
},
multipleImgChange() {
console.log(this.multipleImgUrl)
}
}
}
</script>

9
magic-boot-ui/src/views/home.vue
View File

@ -1,9 +0,0 @@
<script setup>
</script>
<template>
home
</template>
<style scoped>
</style>

217
magic-boot-ui/src/views/login.vue
View File

@ -1,217 +0,0 @@
<template>
<div class="magic-login">
<div class="magic-login-box">
<!-- <div class="magic-login-logo"></div>-->
<div class="magic-login-text">{{ $global.title }}</div>
<form>
<div class="magic-login-row">
<input ref="username" class="magic-input" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" />
<mb-icon icon="user"/>
</div>
<div class="magic-login-row">
<input class="magic-input" ref="password" v-model="loginForm.password" type="password" placeholder="密码" name="password" tabindex="2" autocomplete="on" @keyup.enter.native="handleLogin" />
<mb-icon icon="password"/>
</div>
<div class="magic-login-row">
<input class="magic-input code" ref="code" v-model="loginForm.code" placeholder="验证码" name="code" tabindex="3" @keyup.enter.native="handleLogin" />
<mb-icon icon="verification-code"/>
<img class="code-img" :src="codeImg" @click="refreshCode">
</div>
<div class="magic-login-row">
<el-button :loading="loading" class="magic-button" type="primary" @click.native.prevent="handleLogin">登录</el-button>
</div>
</form>
</div>
<div class="magic-login-copyright">Copyright © 2020-{{new Date().getYear() + 1900}} <a href="https://ssssssss.org.cn" target="_blank">ssssssss.org.cn</a> All rights reserved.</div>
</div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import { login } from '@/scripts/auth'
const { proxy } = getCurrentInstance()
const codeImg = ref()
const loginForm = reactive({
username: '',
password: '',
code: ''
})
const loading = ref(false)
function refreshCode(){
proxy.$get('/system/security/verification/code').then(res => {
codeImg.value = 'data:image/png;base64,' + res.data.img
loginForm.uuid = res.data.uuid
})
}
refreshCode()
function handleLogin() {
if(!loginForm.username){
proxy.$message({
message: '请输入用户名',
type: 'error',
duration: 2000,
showClose: true
})
return
}else if(!loginForm.password){
proxy.$message({
message: '请输入密码',
type: 'error',
duration: 2000,
showClose: true
})
return
}else{
loading.value = true
login(loginForm).then((token) => {
if(token){
proxy.$router.push({ path: '/home' })
}else{
loading.value = false
}
}).catch(() => {
refreshCode()
loading.value = false
})
}
}
</script>
<style scoped>
*{
box-sizing: border-box;
}
.code{
width: 283px;
float: left;
margin-right: 15px;
}
.code-img{
border: 1px solid #D9D9D9;
border-radius: 4px;
}
input{
width: 100%;
}
label {
width: 60px;
text-align: right;
display: inline-block;
}
.magic-login{
position: fixed;
background: #fff;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: url(../assets/images/login-bg.svg);
}
.magic-login .magic-login-box{
border-radius: 5px;
width: 450px;
box-shadow: 0 7px 25px rgba(0,0,0,.08);
position: absolute;
box-sizing: border-box;
/*padding-top:60px;*/
padding-top:30px;
top:33.333333%;
margin-top: -125px;
background-color: #fff;
}
.magic-login-logo{
background-image: url(../assets/images/logo-magic-boot.png);
width: 128px;
height: 128px;
background-size: 90px 90px;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
top: -64px;
left: 50%;
margin-left: -64px;
border-radius: 64px;
box-shadow: 0 0 20px 5px rgba(0,0,0,.08);
padding: 10px;
background-color: #fff;
}
.magic-login-text{
height: 70px;
line-height: 70px;
display: block;
text-align: center;
font-family: PoetsenOne;
font-size: 28px;
color: #808080;
}
.magic-login-text span{
font-size: 16px;
}
.magic-login-copyright{
text-align: center;
color: #999;
font-size: 18px;
font-family: Avenir,Helvetica,Arial,sans-serif;
position: absolute;
bottom: 50px;
}
.magic-login-copyright a{
text-decoration: none;
color: #2196f3;
outline: 0;
}
.magic-login-row{
width: 400px;
margin:25px auto;
position: relative;
}
.magic-login-row svg{
position: absolute;
width: 20px;
height: 20px;
top: 15px;
left: 15px;
}
.magic-login-box .magic-input{
height: 50px;
line-height: 50px;
background-color: transparent;
display: block;
border: 1px solid #D9D9D9;
border-radius: 4px;
padding-left: 40px;
color: rgba(0,0,0,.65);
transition: all .3s;
font-size: 16px;
outline: 0;
}
.magic-login-box .magic-input:focus{
border-color:#0784de;
}
.magic-login-box .magic-input:focus + svg{
fill: #0784de;
}
.magic-login-box .magic-button{
width: 100%;
height: 50px;
line-height: 50px;
background-color: #2196f3;
color: #fff;
border-radius: 4px;
font-size: 18px;
border: 1px solid #ADADAD;
border-color: #2196f3;
transition: all .3s;
cursor: pointer;
}
.magic-login-box .magic-button:hover,
.magic-login-box .magic-button:focus{
background-color: #4db5ff !important;
border-color: #4db5ff !important;
}
.magic-login-box .magic-button:active{
background-color: #1272cc;
border-color: #1272cc;
}
</style>

416
magic-boot-ui/src/views/lowcode/code-gen-form.vue
View File

@ -1,416 +0,0 @@
<template>
<el-form ref="dataForm" :model="genInfo" :rules="genInfoRules" label-position="right" label-width="120px">
<el-tabs v-model="activeName">
<el-tab-pane label="表信息" name="basic">
<el-row :gutter="24">
<el-col :span="8">
<el-form-item label="数据源" prop="datasource">
<mb-select v-model="genInfo.datasource" url="/system/code/gen/database" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="表名" prop="tableName">
<mb-select v-model="genInfo.tableName" :options="tables" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="描述" prop="tableComment">
<el-input v-model="genInfo.tableComment" />
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="字段信息" name="field">
<mb-editor-table v-model="genInfo.columns" :cols="cols" :show-no="false" :operation="false" :toolbar="false" />
</el-tab-pane>
<el-tab-pane label="生成信息" name="gen">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="生成模板" prop="info.template">
<mb-select v-model="genInfo.info.template" :options="[{ label: '单表（增删改查）', value: 'singleTable' }]" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="info.moduleName">
<template #label>
模块名称
<el-tooltip content="第一级分组名称，例如：系统功能" placement="top">
<el-icon><ElIconQuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-input v-model="genInfo.info.moduleName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="info.modulePath">
<template #label>
模块路径
<el-tooltip content="第一级分组的路径，例如：/system" placement="top">
<el-icon><ElIconQuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-input v-model="genInfo.info.modulePath"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="info.businessName">
<template #label>
功能名称
<el-tooltip content="第二级分组名称，例如：菜单管理" placement="top">
<el-icon><ElIconQuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-input v-model="genInfo.info.businessName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="info.businessPath">
<template #label>
功能路径
<el-tooltip content="第二级分组路径，例如：/menu" placement="top">
<el-icon><ElIconQuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-input v-model="genInfo.info.businessPath"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="上级菜单" prop="pid">
<el-tree-select v-model="genInfo.info.pid" :data="menuTree" :key="genInfo.info.pid" style="width: 100%" check-strictly />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<template #label>
代码生成
<el-tooltip content="接口和页面直接生成到magic-api的api,component" placement="top">
<el-icon><ElIconQuestionFilled /></el-icon>
</el-tooltip>
</template>
<el-button type="primary" @click="executeGen()" style="margin-bottom: 10px">代码生成</el-button>
</el-form-item>
</el-col>
</el-row>
</el-tab-pane>
</el-tabs>
</el-form>
</template>
<script setup>
import {reactive, ref, watch, getCurrentInstance, onMounted, nextTick} from 'vue'
import genCode from '@/scripts/gen/gen-mb-list.js'
import { ElMessageBox } from 'element-plus'
const { proxy } = getCurrentInstance()
const dataForm = ref()
const tables = ref([])
const emit = defineEmits(['reload'])
const menuTree = ref()
proxy.$get('/system/menu/tree').then(res => {
menuTree.value = [{
label: '根节点',
value: '0',
children: proxy.$treeTable.genTree(res.data.list)
}]
})
var validatePath = (rule, value, callback) => {
if(!value.startsWith('/')){
callback(new Error('请以“/”开头'));
}else if(value.endsWith('/')){
callback(new Error('不能以“/”结尾'));
}else{
callback();
}
}
const genInfoRules = reactive({
tableName: [{ required: true, message: '请选择表', trigger: 'change' }],
tableComment: [{ required: true, message: '请输入描述', trigger: 'change' }],
'info.template': [{ required: true, message: '请选择模板', trigger: 'change' }],
'info.moduleName': [{ required: true, message: '请输入模块名称', trigger: 'change' }],
'info.modulePath': [{ required: true, message: '请输入模块路径', trigger: 'change' }, { validator: validatePath }],
'info.businessName': [{ required: true, message: '请输入功能名称', trigger: 'change' }],
'info.businessPath': [{ required: true, message: '请输入功能路径', trigger: 'change' }, { validator: validatePath }]
})
const genInfo = ref({
datasource: '',
tableName: '',
tableComment: '',
info: {
moduleName: '',
modulePath: '',
businessName: '',
businessPath: '',
template: 'singleTable',
pid: ''
},
columns: []
})
function datasourceChange(){
proxy.$get('/system/code/gen/tables?datasource='+genInfo.value.datasource).then(res => {
tables.value = res.data
})
}
function formInitClearValidate(){
genInfo.value.tableComment = ''
genInfo.value.info.moduleName = '';
genInfo.value.info.modulePath = '';
genInfo.value.info.businessName = '';
genInfo.value.info.businessPath = '';
genInfo.value.info.template = 'singleTable';
genInfo.value.info.pid = '';
genInfo.value.columns = []
setTimeout(() => {
dataForm.value.clearValidate()
},1)
}
function watchDatasource(){
watch(() => genInfo.value.datasource, () => {
datasourceChange()
genInfo.value.tableName = ''
})
}
function watchTableName(){
datasourceChange()
watch(() => genInfo.value.tableName, (value) => {
if(!value){
formInitClearValidate()
return
}
genInfo.value.tableComment = tables.value.filter(it => it.value == value)[0].label.replace(value, '').replace('(','').replace(')','')
genInfo.value.columns = []
proxy.$get('/system/code/gen/columns?datasource='+genInfo.value.datasource, { tableName: value }).then(res => {
var columns = res.data.columns
var primary = res.data.primary
columns.forEach(it => {
genInfo.value.columns.push({
columnName: it.columnName.replace(/\_(\w)/g, (all, letter) => letter.toUpperCase()),
columnComment: it.columnComment,
columnType: it.columnType,
component: `component: 'input'`,
where: '=',
save: true,
query: true,
list: true,
required: it.required == 1
})
})
})
})
}
function watchInfo(){
watchTableName()
watchDatasource()
}
const activeName = ref('basic')
const formData = reactive({
groupName: ''
})
const cols = reactive([{
field: 'columnName',
label: '列名'
}, {
field: 'columnComment',
label: '列说明',
component: 'input'
}, {
field: 'columnType',
label: '字段类型'
}, {
field: 'save',
label: '保存',
component: 'switch',
width: '80px'
}, {
field: 'list',
label: '列表',
component: 'switch',
width: '80px'
}, {
field: 'query',
label: '查询',
component: 'switch',
width: '80px'
}, {
field: 'where',
label: '匹配方式',
component: 'select',
props: {
options: [{
label: '=',
value: '='
},{
label: '!=',
value: '!='
},{
label: '<',
value: '<'
},{
label: '<=',
value: '<='
},{
label: '>',
value: '>'
},{
label: '>=',
value: '>='
},{
label: 'in',
value: 'in'
},{
label: 'like',
value: 'like'
}]
}
}, {
field: 'required',
label: '必填',
component: 'switch',
width: '80px'
}, {
field: 'component',
label: '控件类型',
component: 'select',
props: {
options: [{
label: '单行文本框',
value: `component: 'input'`
},{
label: '多行文本框',
value: `component: 'input',
props: {
type: 'textarea'
}
`
},{
label: '单选下拉框',
value: `component: 'select'`
},{
label: '多选下拉框',
value: `component: 'select',
props: {
multiple: true
}
`
},{
label: '单选框',
value: `component: 'radio-group'`
},{
label: '复选框',
value: `component: 'checkbox-group'`
},{
label: '日期选择',
value: `component: 'date'`
},{
label: '日期时间',
value: `component: 'date',
props: {
type: 'datetime',
format: 'YYYY-MM-DD HH:mm:ss'
}
`
},{
label: '图片上传',
value: `component: 'upload-image'`
},{
label: '文件上传',
value: `component: 'upload-file'`
},{
label: '多图片上传',
value: `component: 'upload-image',
props: {
multiple: true
}
`
},{
label: '多文件上传',
value: `component: 'upload-file',
props: {
multiple: true
}
`
}]
}
}, {
component: 'select',
field: 'dictType',
label: '字典类型',
props: {
url: '/system/dict/all',
showValue: true
}
}])
function executeGen(){
dataForm.value.validate((valid) => {
if (valid) {
ElMessageBox.confirm('此操作会生成代码并覆盖, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var formData = {...genInfo.value}
formData.info = JSON.stringify(genInfo.value.info)
formData.columns = JSON.stringify(genInfo.value.columns)
formData.componentScript = genCode(genInfo.value.info.modulePath+genInfo.value.info.businessPath, genInfo.value.columns)
formData.datasource = genInfo.value.datasource
proxy.$post('/system/code/gen/execute', formData).then((res) => {
if(res.data == 1){
proxy.$notify({
title: '成功',
message: '生成成功',
type: 'success',
duration: 2000
})
}
})
})
}else{
proxy.$message.error('表单校验未通过，请重新检查提交内容')
}
})
}
function save(d){
dataForm.value.validate((valid) => {
if (valid) {
var formData = {...genInfo.value}
formData.info = JSON.stringify(genInfo.value.info)
formData.columns = JSON.stringify(genInfo.value.columns)
d.loading()
proxy.$post('/system/code/gen/save', formData).then(() => {
d.hideLoading()
proxy.$notify({
title: '成功',
message: d.title + '成功',
type: 'success',
duration: 2000
})
emit('reload')
d.hide()
}).catch(() => d.hideLoading())
}else{
proxy.$message.error('表单校验未通过，请重新检查提交内容')
}
})
}
function getDetail(id){
proxy.$get('/system/code/gen/get', { id: id }).then(res => {
var formData = {...res.data}
formData.datasource = formData.datasource || ''
formData.info = JSON.parse(formData.info)
formData.columns = JSON.parse(formData.columns)
genInfo.value = formData
watchInfo()
})
}
defineExpose({ save, getDetail, watchInfo })
</script>

91
magic-boot-ui/src/views/lowcode/code-gen-list.vue
View File

@ -1,91 +0,0 @@
<template>
<mb-list ref="magicList" v-bind="listOptions" />
<mb-dialog ref="formDialog" title="配置" @confirm-click="magicForm.save($event)" width="1400px">
<template #content>
<code-gen-form ref="magicForm" @reload="magicList.reload" />
</template>
</mb-dialog>
</template>
<script setup>
import codeGenForm from './code-gen-form.vue'
import {ref, reactive, getCurrentInstance, nextTick} from 'vue'
const { proxy } = getCurrentInstance()
const formDialog = ref()
const magicList = ref()
const magicForm = ref()
const listOptions = reactive({
tools: [{
type: 'add',
permission: 'code:gen:save',
click: () => {
formDialog.value.show()
nextTick(() => magicForm.value.watchInfo())
}
}],
table: {
url: '/system/code/gen/list',
where: {
tableName: {
label: '表名'
},
tableComment: {
label: '描述'
},
createDate: {
component: 'date',
label: '创建时间',
props: {
type: 'daterange'
}
}
},
cols: [
{
field: 'tableName',
label: '表名'
},{
field: 'tableComment',
label: '描述'
},{
field: 'createDate',
label: '创建时间'
},{
field: 'updateDate',
label: '更新时间'
}, {
label: '操作',
type: 'btns',
width: 180,
fixed: 'right',
btns: [
{
permission: 'code:gen:save',
label: '修改',
type: 'primary',
link: true,
icon: 'ElIconEdit',
click: (row) => {
formDialog.value.show()
nextTick(() => magicForm.value.getDetail(row.id))
}
}, {
permission: 'code:gen:delete',
label: '删除',
type: 'primary',
link: true,
icon: 'ElIconDelete',
click: (row) => {
proxy.$common.handleDelete({
url: '/system/code/gen/delete',
id: row.id,
done: () => magicList.value.reload()
})
}
}
]
}
]
}
})
</script>

13
magic-boot-ui/src/views/lowcode/magic-editor.vue
View File

@ -1,13 +0,0 @@
<template>
<iframe :src="$global.baseApi + 'magic/web/index.html'" width="100%" height="100%" frameborder="0"></iframe>
</template>
<style scoped>
iframe{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
</style>

Some files were not shown because too many files have changed in this diff Show More