From 3a465769bc2e128d57d6319689e6e37b16f48d7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Fri, 22 Dec 2023 10:22:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8F=B6=E7=BB=86=E8=83=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |   1 +
 pnpm-lock.yaml                            |   6 +
 src/assets/avatar.png                     | Bin 0 -> 424 bytes
 src/assets/bg.jpg                         | Bin 0 -> 4175 bytes
 src/assets/login-header.png               | Bin 0 -> 19983 bytes
 src/layouts/admin/components/config.vue   | 201 +++++++++++---------
 src/layouts/admin/components/navMenus.vue |  10 -
 src/layouts/admin/index.vue               |   4 +-
 src/layouts/admin/router-view/main.vue    |  25 +--
 src/router/index.ts                       |  84 ++-------
 src/router/static.ts                      |  24 ++-
 src/styles/loading.scss                   |  54 ++++++
 src/utils/loading.ts                      |  34 ++++
 src/utils/pageBubble.ts                   | 104 +++++++++++
 src/utils/router.ts                       |  10 +-
 src/views/dashboard/index.vue             |  82 +--------
 src/views/user/login.vue                  | 214 +++++++++++++++++++++-
 17 files changed, 596 insertions(+), 257 deletions(-)
 create mode 100644 src/assets/avatar.png
 create mode 100644 src/assets/bg.jpg
 create mode 100644 src/assets/login-header.png
 create mode 100644 src/styles/loading.scss
 create mode 100644 src/utils/loading.ts
 create mode 100644 src/utils/pageBubble.ts

diff --git a/package.json b/package.json
index 2f2327d..16553b6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "element-plus": "^2.4.4",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
+    "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "screenfull": "^6.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 706dd80..790e7da 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
   element-plus: ^2.4.4
   lodash-es: ^4.17.21
   mitt: ^3.0.1
+  nprogress: ^0.2.0
   pinia: ^2.1.7
   pinia-plugin-persistedstate: ^3.2.1
   sass: ^1.69.5
@@ -25,6 +26,7 @@ dependencies:
   element-plus: 2.4.4_vue@3.3.13
   lodash-es: 4.17.21
   mitt: 3.0.1
+  nprogress: 0.2.0
   pinia: 2.1.7_dembj2eby4ermcojoe7jay3m6m
   pinia-plugin-persistedstate: 3.2.1_pinia@2.1.7
   screenfull: 6.0.2
@@ -860,6 +862,10 @@ packages:
     resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
     dev: false
 
+  /nprogress/0.2.0:
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
+    dev: false
+
   /path-browserify/1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
     dev: true
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..e32edd3c2a132f5bdec328594b3963b841eafc97
GIT binary patch
literal 424
zcmeAS@N?(olHy`uVBq!ia0vp^2SAvG8AvYpRA>UE_yc@GTo0bU-ZpLd<V73zp187d
z>){*bGnO(iFot-#IEGZ*dVAw;Z?k~_OM-Abquc_9ON=E2FZZw9-F|uPq77n3^E!H;
zX*VQZ|8rxu3ltpL{P6meh!6UPcNjJ=dB<j>IpufyH3sL%cJ{b4Evyf8nac#Z5~eZ~
zc>id6Jo|#8SN{X0y+_g%OFAwnhqQ3)SeW!sr%_XoDPU=XIZH~&+BxkfL|8Q(7zLS(
zR$Y5t|3;*saekex!l7f@|L$$sRoh?4;91~m$@1&?4Gs3f@+ku85|4U{m3WtYn<bK~
zvBUaWkLirB?x!2u9xEwba{l-GtAF+@{rewN-bimsJU*pr=V8NdyKVH77*;$MlR03e
zH2Y~uwMTB%gAF?mUk)~(^zQzdCI4n$DyU6zYFm7rLCBYbH!D|2%2eclCgWK?@dLVy
z>M=?Q3_EOZ6&!MTHDRZN!!b?m^j_b<1}2dO3?OH71;Cl}Wj-)(l`Yvl*IX+Q81xLD
Lu6{1-oD!M<^TDzH

literal 0
HcmV?d00001

diff --git a/src/assets/bg.jpg b/src/assets/bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ddf4655562339c8302fd248990e139bfdb47bf36
GIT binary patch
literal 4175
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
U{5*!T&1N$d^G)ORyR+&40uoUk3;+NC

literal 0
HcmV?d00001

diff --git a/src/assets/login-header.png b/src/assets/login-header.png
new file mode 100644
index 0000000000000000000000000000000000000000..545b9c04d6f7a9abb522e90176c4559bc4ce03dc
GIT binary patch
literal 19983
zcmdUXd03NIw{Mt1qGA#yB5FWF5(gv|B`6gTkR)J);DCx1qN2675^+GK3Mgpe#H64`
z1&uh=DijB-RuGa}D-N~xQ!7<St@^1|sJ5kby1%{Og!-K4{BzHJ?m74Vp}hNDd(CU_
zz4qGsjV@jl)3u9N7Z!`vRUwa3vsm4^ES8hX)d6pUK5#yPKdSh+3DNlbrm5*b>FJJ(
z7i%lNdim|e>oum66=yfBJ$|U{^!~yx_LqHmXxr%x`6pK9)a)!g^|q-A%^zw^;k(|h
z$~o5Y&Ba^C&3NB(>g#dq?{;tGyZ}XyMQT+d>t~g(<;O+eKDq80{m0|jKYtU-Q&_BV
zDT=6w37J1Wxl#RbWCYtO!t0az@}kFe>KN7Qo^I#QZ}aap?b3S>Tv7_2|DD)Y>B;Kf
zgY)k+&sa7)!*|}rw{g<?xx=T`=!MQ-hqxX8B}d}SKb-&3h-y=PxTyR@sMO4w`NN`1
zzFYbHe>WW+vKiguhksDBR_L7n_um15W>)Z_zqSt_EDhW$`I_gDe9%5<T9PIuFmZ##
zxi(%ncWafYer_c{k)6I%fAvX<E~hn4TFGyDZ%f6La~y}Cw`o9c;=rhy9HFy)8EHfh
zjIPNRI{VVb@PT8CuW%fEC=O@KUfmpB4xduX>vGKqi+K<}D{mbw_GRU;oKxo3*Cny5
zZn#&DOJ38zwy1ecqDG+S4KTBIpWf3v3ylq=F{k9FZihtb5u-2EWOJ2IOqWXdu6|~@
zw0^X3i6u?Rjw;d^`6;EGQQBcb=P?SYnq3v6+gZDf<4|qnOPp_3m{iSix||gC2A;!V
zNi{bZl(!SggRI0vgqVTBw-Efmy$p&yLD|5dl;;wZ0St=RhoFpN_+Kvo|CWsmzFsa>
zzp9!c3Su>|Sf;3^y2)c)Z;4u`dOFpDPN_s%;7d>y5D+r)C1dq=OF(nBl6?=D>?*ZJ
z6ae|;L|JPmKhkL>(<zFG*OtI^iY1+h-cU7_iV9VeD^1~4I|ji-5Xzy>J_Ib$0Iw%1
z*#ZcW4a^db17V8}-up}}LPK25jgd&Rtz8q8?6#^IE<vp9KvrYhQLiz(b|gLC^Pl$n
z-yr#4?HZ%EBf(I@57#d<^21?6xz5g5HlDs-L0<Q!x+L#~E=@%m797+|c>jwTcO6*{
zQjhwMn#<dt?YhEow^KK5rm8O8Lwbf&0x#n=EJ>O#HPLi2Oi)umDfA<RZ!yo^=rcn(
zi<r@yvExXgbAe_Pl}WaP*wm8>Vu&O14U#y=YebicftyxSw)@p!bzec*4kOl16i~K0
zLS9lx*@hDGJOy==7a{*GCEqc#?gJIyIYpekY)$r`caN8-|Gp^P|99^X-G8OJI8nxD
zbVP_!DqMR%LMhpga+pRGd%m=5m7>)YLM>Kq_lMXZTg!3qUdtO6?l3<=rtKzlt}WI$
z&&}@JMRd8s#OkhYVs)*GpcpL*eeZI+-+HPHkvh8%jAeFSg6RxkCqbVzh|<a`BIvX7
zxDVnr*$W7I!Ds0fZ$wipL02>Am*rB2pzz8DU4~d%A0kQ1cCM|S;S%j(AK_8|bz{e$
z%e!R%viPS77T=A|qNk8!vayWiesxZ|1sbJ~)4Nr%K4t(*DPT4O7*7D>7{GW6m`MR`
zaRe}g0f;CdmBAQG09_ftegY_1zyMSP@NWjNKrXfGCAi&UdcTC<(pTbNZ|~Q~Pz$@g
z+KItZzn`sYhDGejaLW3I_7adOqkawp7(*t8nRVUPv9eS7uI9Q&w;n#Lcd8fVbC*K-
z-egG4;H#RU<yuN2MWzL91DP!ff(^AGy{QoM%(_0b&jZrO*j4lt=3Px@xdw)gg3y`L
zs2c?t#h5p84z!y3!dP1&N%*yN3p^`}!?Yoo%aHdc<cBfjiwXJO40$qZ7}=COi;yXx
zWD3Z@Es)agzWrV<4tHd+8^gtKCSDo4$|ZnIgX<U-s5)*`3_%oO$7o|DQX3d;&{^WV
ziP0v6NWGuYMnKp#Qf<PEi2WFC1WJ%;VYDd_LX31q8&@K=jM2tOq&6_xSSWc$n`M+d
zqfK`rg7<q=g|kGR^sk9k^3SjQs;`f0J&X02{nM(XkbCi0JXhY@I%|Es2SJW@R5imJ
z8_2XDKc>a>DO@HX04FPexT$Sv4);&^uaU5LHCDGi_NiFPQpc^~IpjG}d^TCO(hZ!_
z(kCT+OaMxK&Ys+K%ZL(w3U$`ZlG>bEn7icCU^Sb^8*Hd`6FT#Wzgk8KKk=C&0lB6D
z5@)^JBvo@R$AL{&uC{HQ;KIR_-ZpS@>?8UlTxX{WCs^+bKN+A9I%B#Vr_b@t-N`Lo
znp)RQ<>8tuV0q;R&3#kxH^=d-pL%57OrF>a^OJ}u2!ft&N_I9cL$1#WOK;8Nz70Xx
z^dOE|s!SFVrJ8bi4tEnQ0TDX80?i~NzayVhN^xrZ%vefKGSB|z`V!6!x3EQZ)9qw^
z3BE}9lxu|QX)*d7H(>yeKF8{FASm-ZUZ2xfc!YTl*XIluK4qTA=yQ4s1A5Z_QTm*j
z%I1Mldhi|#@9!}kAA@OIE*+p|hu%E8ppSE|z%}Ll4SzqISg`C&SO1?JZaM9iv?u%M
zcn$*d1S3Clk7;#YcM0rr5dPS2D$W~fYwR=a&FgP#RGMn?!fXwrsWES(mB39&`y!t{
zR!CKXrM*E#gc%6Gi`%nWv7XRImbl%%q0q+ktCCEoRw^|5iQ731a2FLP-qLf8yOmhE
z$=!9b8pcm7)P(CExFZm(&*$BjGS8Oamy6>Z0@?Mf4UrwI`{o?K)aOE4YPjx3UjKhO
z=Y@4XpUj)l`Mf`GRp)bQo<k?o#s-^h;w{r#<yQH{?T6F-iD7$6oJ%q%)?y7bmg#v8
z%Fuz$auV9ndOP7A-Vx%JN?&s}XM7i{jF8<k&!v<6>W1~5y1w6vb&r}y+-_(C`K%{5
zDtg)n@*D#P*WP*4xW_JI;)^=}X;H*E<)-h~Ak?g8N*xo~i8{D~x|~W@aurLaRWgNG
zVUw(%-?2`~uJoAKsrY%<_d6v^T+_Al{aV*i|Md4bVbw6F|529*ZY!*i`qJM^EDm|&
ztVk`5Q`K2}+Msp%0K|9edmky<3me`lr1cvy0p)*oSZJQp#ic-#Su?{0IY@+S_IsJH
z8;|6#sBo$xIUc`Au06OnhvzVuB(Z6J>gGoWkP56P$UStt8zV;|S@Z?vR7Ch!n>ff2
zDO!PCTfH~Wingm%uC3XdZ*BEM>-gTaHrQ6V_T=7mHW*r`_QKVa-L5Ti?diSnCvEjZ
z>#M!+69X%eYwPx6hGSqQ^7iiDA0y2!#FX4-h|<4pIe=u6%6Z;T{mMNCgC>bgZ=u3M
z%PLuyPoLbdvttFiI+U|(R^7aj?l~1|d6Egbzrt8+s=}y1Mk1GH4JfqqYE;60l(H^L
z{}Fo>%omN>wb7F!c`6+&v?0okwck{2u_9iNHP&9J+G=f;p!IE4skJo$t&3G<))o(~
zrYa0J%J90<SbM2zyA2Pm%T+sUcxYXzGT89Yx>~i<h6k~~tJ-D5L+e`AZX2G$*ik)0
zRN0jk=uw|0dlojoVokvUR{yOh;`di%+sFas`c+H~0mRkw;OcqA)zl_Jj^xPjMFpB{
zYS1n^-k)AdIGz|GGAByEzUvU|FlZQj6{X+Nb-1l{%CFF(iNs7+OQIra$XjFWjd)Bk
zltr(Lt9duPwp-~mPF+@HnG}if!t@<Dl!$`?O#4pywvXg#Pzm-ERD!(UBJ_j0!ru(j
zomqvJv5|dksQzJcZAAqVXll?^Pi~#kIz)IlM)XMw`umx<=jd?9U89^%epUSM=;-Q_
z<#OJG5AAiDY+aOe55Jds{5p$loNod<uuwdf*ZAHeNrItL=cl*x=a|=NlA^v6=o^E!
zMM>+U_V5$fu?I?{v|Ig4#Li`M-T-~7-S7G0P1lSZGmER!L`jp6+~JrN+mrV2Q+yLP
zi1Ra+$TbOBG28(l#|1gr%*}qi%qN4uI3<X5_<4x}9U@7GG}>X_ZghA{JIF|fnM;(K
zgjbY8CFxMxFnOo1eppbeO(M?&#ZlTd{yVJ_wbmS|Gwtap^&g8#O5elWHpM*|1Skg&
z^W7&mT)Nf=dN@|K#r#xp=#ji%{q9Q*a_RNuTa)zNRTy0)11b3ut);fsgul@`pN<eA
ziC4wdQzmt&0jUyM&yyZc*GQIFL8%8<==R;zk(m#ZMcy0XR*eW7MUsV8a+HJ3HiB`p
zN|N+DtrR*Gl4{;4j6$-(Yb#9rhg_@hph^A2L?%6qyvRxK(4IE+okr{j?=%uMOd|z}
zts{$-B5;jpy1V$9c6JYv1ARaEA71G{aAK>um@)|9*8ls@S623QMIndf`rFBV_r7o?
zzDS++kG1}PdfxPUqz5!f;hWM|-CBKk@Iq?<`Mjggf9G@R^v*c@{=|Eo@hq9PqcbuW
zeXi;Z*+coAuMMw93hY^qDS}yfzYqOv&c?O9g1UC%f9UlO*&w5BU{ro6w}oBY_XV~Q
zQda5HIX=ckcCy<353Bzg;Z3|^8|$(dy_-#<CXx9b+bZbUCpS*@Sk1zm;I;M5`o)&i
z4xc;4UwW)kHw8vm1(~9d?sc?wPm9#|_Oq!lO5Mb_bqXoa<hxomZqo6Fjj<^gfK9ax
z`+gBGai|SD*jTpEhJ8wCp5Si7c92vi*|7U5q{nlu27f+AFX?HuWZ7hO+&+QTXjv#s
zbg^NJ)NwljX!-&>hnaO}H}Y8;e)gsM*QLLQh<eWd-DN&a_L@=&)ydYhX%h!zPZcvs
zTL!k3s-|Kl%PX5nWWQt0w!D2I{Bvu**wllNxN8Fm2q>1x2b-2du`*j~yVbo=BTB>C
zN)p$!;{{QGA;ls|WSO~PBZ$}%-;a=^F3~t!rP|tMD3oGb864(~28UtRoVO;v!xvIo
zGyA5It!pWnvnY;5vm06L`oOZVTXtn9zpT5b()b`5)$ua6wMB#T7$Ty-x@qDV#9W*Y
zk%}w1?^{u%5mi#+=((`~@!r`}*f1V)@Q75y3N=SO-oQDXU31z>!5OKaz#L~R`#I0$
zovz(H`zflqiDV9MiqeNn<wJqaR#Mr!tx5cMdrl~Ox24V`*0jl;(=g~A7Mr*q6j{2z
zT&#AC@UUmaIdpiQcK-Xv8}S9T>$o-4<S4mla-S`Z)6%^Cuw1&&v1gFAHCQ3da~%F6
z)(TTdXFE<jW^K)vOQRhZFS53t$fZKZEkQPzLh9sr{DqRid!mr;c0cst7K<ZU7BLXs
z>@{&0S%C(*^liMQx7R*d1Tp+3W7$$=X!LHLh+1VE@3~U<U~Vykda6KkN8Ii=U2UL}
z2dkUhg}e4C^mL1g-TA3R%ZJO2456pSvi>g@FZ_|ka<Hpnx#Zs1{NnD10lNilvCbEU
zO>Y{ee6@0tQAX(;UD^?v!x?|l$81LgTz0DQeEVZZW#~`2JQo^V6Q^7D^7fkCo5pJe
z#LM3w3aCcA&jz&VPG-_#-9EnXPReq<LzopqBN?j;=I^r9)2-@<6HAly36`#D`(<sY
ziWX?5{($wrBy;t5l5Vf)xKb}*NG#Ml%%So9km12rX<MjkyZpppoRV})rdy_p(<b!>
z&Vs-Z<{Y}Ul`LX-R94E;DGwV)g``_E<uPU{!y`@a(4C0+Catd9CV}G^R`w69*Pbh$
zW&E(ak)`l#ZTpn;+f_bW&wWE!HMPFv#7dQ+5$AcLWa=04qJ8-}$F7NnbmaST>Dp(p
zgUuJ6h9OoOs3W@|rTNS$5z*2>=L6DS@05XfY3NF<ED=}pj`obZHrVX8l$xyEq&_nt
zF!m@<)Qozqu`CxHl;?szR~yn%FfPy#0`5-F5jPEVI-mr&ao5FWxAC0>;sO&9I-#8e
z2A-SnvD$!2qLsjU$Be}aZ3ErCQvyBW{^e(OThK`$Dsb9np6E=Grse#~zT7}|HjDK=
z>y7#HIpt8XUx2+jE>gFzV@=BG@kUuIEj4@yJ^Fh*`7;k}>GY6KE#uT*u5I8FMM;OD
zp3Q+_X1C3hO$8L4nr`j@0`&?((46c0eWD?rhGSRZR?G3+*!=yn3hH<-C?4x{vPq>K
zLpS|F$PXuXInsNlWsO%S177p65VKn}jm~(D<O5Od+;lznP$$E<^zWN_q7oW7P$6?m
z%b{wC>OiLezUQVVCK}r496%V{a1H3Q-LfXQlR#AZ?Isw;*Bti8<6lnL@$>C(vah{q
z>=m8xqWE6H`q#6Hr+J`GM9kxA{?#|Jxvd`&?iPd@9Uh_4_ql_Dwp`i=%KY3js<Jk9
z6t*XYy#8qskft{Gkck)kM1=FMBFo;v$ayzUYLf(-yV_w(Ggh5d5DlB0>vHzqzFHrw
z49#-==IX;pv?rZAS<4HK!bYr*qTQz#GV!$oI|{d2^4WBQKf2)>Y%6!F%L5+Ddcf;m
zRSUfMb2Fw$K9OT`2fy~M7&qr79YY72yGkj)&}QP3K&Q<`>gEEJFh21!@BNqvrEZIh
z*Z0ZA7Hy+3vuYfKis-WIqCy+Vp~`GN{yB(`JvT@y`D7i+9UxvYf(Rwf93nLLe{v(D
zM<aF@f$TYNQZANne0kx{Vbd5FEX3ghBp>`68FzaZhr4Tx9pT9S=lYr5ze<KDQ(8`M
z;Psay6$j6qH!#fFomcAQ?Kv_v`>I@D>W27Q+oxlQkJ;rnhLUiPN$ve{i!Phj9|vy)
zt+0R-tF6kJb7y>eP83DEu@3s2_sV?qJFovbrjxE5oet!<mtu*<ZkEX8a|o0^Z25XN
z)|Xxs&(n2KHP6MXHlq}497-5LMV3r0>>zVEc?8SO3%Fve+B={Mcxf$n#sSZl;_Z!w
z9rm(c{ft#P4&wsqof`vPBAnkm55+6&bMdNLgI7}LH^0m9%9FmT$i=Jve>`p;f!&II
zQrAayQySB=Hka4e@V{`+&um$J5zFgrBfq?m7o*3N8I#$vp1i_l7_VHq428IvEjv!*
z)nfYUybiD4o_0C=rLvm)Jtj&og|^HNDl9E2i+e!UYKB<v1dU{6q)xFo4&6{;L$?AS
zbX%c}JCX>!Py>PaXX3b#cUP?`>I>}`6;bUq@fZY~IK?0DhK)+7ja>I4?t@Fp7TpGe
z&l%D9lQ1+AHNX7|%<B~M)w8d+B<aVOl(~(750)#44_3xve2mv^OWg@#D3QS6OG`SI
z88c&a+cewo4uulD3ohv><sFqsGY*5=gkmB`)_C1pdApu7>;kcQFs%8akyOo*{;>Mw
zzFzu^Onj;F<L8f)ejKAdqtta*dnalZ>JpL3U>x>Tw0j9hE3{F%3;r-bBFZWg{LF(&
zYK7)uLjT=jP+X>F#~1R#5-q!Un@h?zkYo>06Rmy~rHfHFgVuJ?!i*+Vw7)OhrO?Le
zF3f|;aiVtJ&%Crm=4%!S{f|n`Dh$^665fnNOBt_!Nm&y~>Op9tIxAXtRNh|7DV_#H
zI!m0zvHF?Hta19VlCmdXGM%QYy%Q{>)UTFHq<<ZU%@BSK#>`67pT;EJt%zcZb|6k4
zqkI*m-%{4sz;wB0tle+ALb{v_W7zNDoh-@B;|-FIlEHou+N@|-=x)fXIW?<iAk8=O
z@8ALe_5p0isvqm#*5{<ZX!))1gh$p+-rbT8iDZ(-E198vrP#8b6DBe%<5sVth%Cuy
zNqZmlVN;Ndv4^}pLU*@NBdk1U(vhXovYJyTB>i>7HUhKq4F3JU)@t1RdSs;?D?5U<
zr2E_42RX&Z0tR9}ujY8dj8oFJusjP-?$C2^tqlHS;mHYh>6L7N^;nWgmRy+EJ%D&S
zn>R=s0e?7o61Rryx70%8rrh;b{gVqc!nAW{Y8;I)fH<MWLY(s7$L`kANPFzSol`Pr
z|GD6geqBzQqW#~Myz76V)taU6KR>Y3Qs)z2rL48NJXyBW;xaAHW~zo(Uf9i<ojPBx
z>^SGowb?2?$lQI&Hk*y}iX|(nE-{e=V|mB5ul}@CxYlH_4El$q`c=w)$};_Zvobkk
z3wVwrJhN}ZKi4XFtNwUg7MLq=wom$a>HYB|ycfQ_v;iyBsWdVIvhVW-wb%V%>=4{K
zOgwdUher6O+|TTCivj-&U{O!WXnF8s;;coLNxHCs2==p6h~(u`v+~uHEPZ#crjaB(
zJ_SdYhQzF^ssAF5o*P@u3G1=bvbt9dv2*xj{g#fx7GD1sWs6B@ZAUa+F;#YyUtm}l
zYlJJsL1vff4C}36omeOtJ$D$x8j;xFJ+3`sH^bTotdo<$`VwXR7g+aqjct$EPr(A%
z;uSXm*uyFItLhmKPV{h+^6E8`#J88c@>4tF=JZ;=`$_ICAV%h@L)(&nph7N$kY#1O
z?x9nT6N41MAfv^8W``@2ekB$#!UCK1^7i`gCz2VBwGHTv_Uh1Zrgs^7fAXo`rR*S?
zw^+YHMbE+G+gZ;JQEMNAPCY+M46R=~kJwKz$gIq|VBvLdJNP3pm|R)SnNc&s?2yHv
zFC^$g#<jEVGR!b1Sw5RonVG$tA-4hKX1jyj0!H>Rkp0WWl71~mDfyIDXgh7)mzn)`
z0u}al;$hR!>Vam5S4RoI){U=6p7>bcn#*#QonCtEb?|3hjCY@;vA%G({|TI8_3F_2
z;0H9)wgdCVbz^4sv&%mdGrWKqh7MG;v+4}zsjJ69@`;5OyOpCh(>U6u5uObgZFV>l
zLajPmzeN_Fsdvfz^BF<s0ewK!{><#WFd9cg%}Q@y8G2_Bt9gN$R0Fkg38{G4v>Ru;
z#cl+R>a&<<O1|NBuc9OA`o1Jxqa!TRm(m#mI-&rx!{89&o7qqzJXO*!<suRBA&eWN
zSGKc0q7qGnL=)omE;lnY9o7PZhlvyreCKlOz6>5vUBGjwD$xipe{1Yuc~aIDV2$$?
zm)cgM!xIGL_Z-RS`ksV!ia%I;%G>Rp(m^~3tk2Z#?_iZu%tAOS`!wcC9)-FC>K2TN
zRGv=sb%vV<+}WR`t2jpm#nYTKFlgi&8iC`hIo+3)YJ~Y+sE)fd!d<_C8@o5vBh;)6
zy&r;RU)mgn<^u_uKD0R!&4)|%Tlh*U2ZB5E+EK`1q;j-EtOL&=$K1cFW(*a%Mn|yB
z-`2ifI?&hh>{Qq=zv*-edI)Eo|C<QFCjtmCBKkc6VfJv!VmMg*2y5~eQWkT;qV_IW
zyr3*DfkozBuy9>SR4sz$PNU)9_<J-C@HFTQ^!2$wG<OB3(oDFtf;J!G=|(2r`Fu;D
z-=OKa3|6n8%>!soK1Fb;d)J{^8lq&UQlT)g&RkB=Jfuw3V4Amy6S<X!6T;x=q7wcg
zDs4QZJ-F8t{Kw;R=M+J{9e+dHoRRGPqkA16;T|cW_QtY*W>N`%Bn_$IAZ6ZTil_3;
zRe)44Vg6XkQUOw@#8Mt*IT9{?9IdOMgCQP?!DxY!y_mAhheg~HG;`@V;z6Cw>o}3U
z39FX303k(vNJIM-96j1k$(~5D$kI9)SQHco>Sy$v$Q}eM1wnd$VhMjawRa6He-r{X
z5{vO+yJbCv`MrpM^+A{tF%9~&qj9xodB=qpcMqOB*?7+VrTszo@ARBTAIhi>E;+Wx
zl<sVkNcy>0>P-U^r7X_(=;%f}>cEMB>M19ff`CSg@=*>%U5mCxit-<0+ddZJf@IZ2
zT`P|0ZNPz|d>l@v_#rPEq-5_f@ONQ3!ayNJQ6JAl5ypmiUe`MAA4D%vK2F<gh|>)G
zvl#0G5MomkG)Wdy+dEymiSqla+08ePuIA>a3S6^2u7!W_sP6kSGZi_j%_AG*JRJzb
ziIKWiS5ZDr=);LLKg4Tf=X9;ur>}!|4tgosE;1=8&)E8|RI#z!5fmZan<thwU)H7K
z1U(8$vbwjJ0wK3Agvowm;HNPZ*;jXQ8?g)bfLR<CJup@ITDxBgk)j$$>4q;*u|KkP
z-_C8sHjL?h-&BQdBBj1DL^>bcb-cO~e)&*QK2FdDg_b{EvX2<}Zwf3!aU}tlfgB^g
zse3H@X2w?z0W6eCuNn9&Nv`HB#zaSID11Sau9a3_vI9i<G&^NYQL(WzLvM@<70Kls
zqC%w26m9N84IlPZvkUH-sxX4F&-q4|3Js9X7jPTtX;*eXQ9iw5!NP2hn|2^Hk7^G>
zCYkgJLr7~O<rh1agAeQZvoF2M{&vx=52wZ4?13t_8%5hLlSVPpT1*A>Sgm|5H<I3k
z$o5jP@8VS2SK>_EgF+4FVwR^&>W#@5C#EedQNBAp9d~&3z?2Sq<Jdg=nSuWaHV`PH
zcr4V+MOh0y1wWhO5v9Gb7c=Q9a9~Y3uHi;X8IpFQd^iqg{5g=9$7122;L+XXT`L!K
zpIQ$`eu$k77-JPV2?9`ieu&f?yDPA$x@StqriuqCH*p)uUJ4xtsn~y7JIbVvuo_SX
z%cMN!smZ|Sz@*R+vk0z15Dcy;-xdCXP&wR4RGA6A-P}lo1bHguM&e=tdD_g4#H9lA
z1RJ4@#8b5646qB!IhD2Uucco-%bs*j7+_zOp^@WE8D>igksf2X&NuLJ07bZBY8cLN
z9VW{6X1Eq|BXO`y=$dps=%a^KTTDbU=-9SUBZp)lmnoA5F^V-C_<I;~*a}Q!$caSx
zgBfzGxsk9jAqOR}+a*sB9eZ39bH}j4T^+;4jeiVXanwsw?nHpCrUDEoVowOna2Tv&
zYZ<y>qWqBzUC_W)0D^E)haxYr*IKRv0u_P=i<}`4ij-*vKHM+H6>a)PskfsqAX>Tx
zvG;|MUr&&~!N?#T1c-}wI}AngoSiCg&b~Q`^-K2=f;;O!#m&`OxDiS@A)Zuhm=sqa
zWKx9T6g9iWgrG-<`kT5{t5SwBavkKxN(VDB61Yes$^VtHR+?(CnOtWeI(&oj>>t?U
z!?0ztYF?uqqppK!tELu$!Urv{O=>nu=p=wbcPHsvG5HgvZ-BTr%3j1dnIJxhA$|wM
zajmDiD=AM^4NUJT$oq5m@VeX&e(HP5Nr(O$LGlquhM+%4HXD-kK8U9vkX#Rveh8Ye
z@IhELFOo;gHmt{ZJ<Iy~eY`Gv@Z6z%6T*4?U~|DQ%jzI9!et3WUiaIXqo^)`)DO_B
zC=UOXqiQlAGI`8G*@Sf*F{OpDs82u(xcdRYlA;`*jY~r5Spe}U2v*w<kShf(2Z*T1
zCLml*3wyaZ9#dWetEuks5B6=30<=By(Ya#`VS$R?3#b<+2XoASd}1;ORCcf(XFZ1|
zFHnUcfFvkh@qrcNJ}`b&Q|fk;KuTPSDmiAqs!`DQB#NjgI%od^#6$bg6Rw^Q-LDRY
z+?W|tK80)=D~p$eg_2<*BP=FaS^NUT&#f#}gvAzyMLJ=zpRyn`<!zR$Lj>#gs*jF1
zyXntFsj5!~)>}Yspq26AU7(p@rTH5GU2Fg-S~1=Vs0ZMYkr6eHNHNX|Ao2FC70^Tg
zu~xuU01nwOb^@TV0&W7Jw_y-Kj1};VnEZqm;FdVVAfh*Nz131f;PAFjo<qU<Z3wp|
zuunH)A5R?PGzxf8cI*WE*Pc7pMb&%W{(a-uPaEJHDah4M#?b-$Dh?#sXdOry!niGh
zfF=<c2*?}63l^YuNjyqGvOyEzxrZ3`Ct!RdsY{b(ifA;}Od9WFpuGk5EfwQ1!9z4o
z=aQ&H_K`wj`iqN<H$2EV-Mz;OYFU9+^2v9wE~-&<regehshAge==?iq*Q{7`KLOSE
zzCx8Wj0{9vsdlXT;g1<X9D)4pfcyN@?wx{vNoXnbIrB!T*}4D}3`v-kLkVx(HgSIF
zXAZCKE6EQnMcve<(Iyl|9Z;Pt|JNp7<o0Rrh!%s|x7|pEG=AP3BY#gb>1Q*LjgRsQ
zXq)6HGgA`ZJqCZD_lSvh8u{X5&;86EJ|vuoOru8)RkQ6DT7d^@p8K2IG89BbqzcFW
zLKwF03Pb&sQfj)qmiIiR?()Vy&e^PWKPA779(AmrdXGBbs#AygS0X;H?Hzl9^Re0h
z93wc-Ez$^PKgi)VPSnAG;qa<(6pmDm=tux<H}YL?E%P;}M^_SAV1@IShe`6EjUmka
zCC=|H`2e@qiU)#s5Y(-HuGF{IB*EL5`E%Co3|6yu-y>p!Wzdr|#TuC>Zo`nS1yvd0
z`qsEFtW?ik?jgya`JGh&yHRV6{7tj0vNqqnES2OhZM6bVp3E4dZ=Fc(h-<b#{c0%G
zWcDK3gKQfawgTM3Vom$l?Zu42V_YK|-kOIk@$7c;c`2{)=--5hNaFm(udhVrHe%m+
zTtA*W%G1anP4t}y$>u-M^BQ-Mjz~vxe@!mZWTI&8e8Arveq<*y#La67EJWh0`L($~
zLri!;WDY;H6M;ii{T(Jdo)N3Z2@Jm+OUt$;PZd()=Ig~8!L`d+>WJ+ykNW)>;$tR*
zEFRZ=!$-v!`9y+8kYLV(4ZPKa3Gz$J6Yru<Cfj!=+L&})Kx$;iZVY5S-V*jO^_!0l
z4ypF=NK1z}R{FEHVN$V4k?^$lKe86B@b6^iac@_TPLzAKbH;X}NLOOvNfhAf6%9h(
zTg+;@Qrl=)=Y-+ju+JLk1*wg?ePwh1vc_ao5>^)fBph4u%Mnm+OCX8v2VzAskg|n9
z9dn#$i!su6b_kljzuTH;hNEdeoQyyM{qlV@EsN01L9x`I#djUUI`OYM%ccc(n@rI+
zLGBb8rRNV5gb@nq)gk{jshcD#h$M)*3F}8z^D@4{4K02OB)RkjW-LSX6i7l)tE+$-
za~RVDMIH1jP~A>jQLpQ<9Awllw4#3g8&I#`CS!R%#{7g9D7^5oweKQjC~P&(+I5RB
zmL$4(CJD{qdz-+7YP$qOM2r<NPD0RTtJyCUnD7!6y4~0fI0Gp913(;yXtEb$j9wtX
z7@T^{sp~cucb7bze_!x%*SZLIR)I!vzXM%2AV{z@UMI<jf|wU8vVr6XJ|q(5(yPz0
z9{LkEV3p0i45^|>Bnr&o-@SzRj^KnvQ~o6!%_WhD)pXoj*!wB7f`(6Mfk8r;UIzxk
ziKoakfL>E{#OB0h1)B2D;OzTb8Bx|m69Y4AYt9$nf{AriE7%$WYg#jbA4h`8*Vv1&
zT<Zg|7x8l2uzpEwvfn0#NXZ~LjXRbR`^Vu}>2x@JBYb~91oDnnO;=6_6%C_Mz5Q%7
z##kH9AEV)GZFE_ThP}1X?Nc;X?q{gQ@-TJ&HCFdCy&cM)H4jdFp2u+^`4_(8n6OME
zNmJ<tV97#e=l2NEVf#!KSVes$&h}e?yDh<zL@(_+ESn1B#)-9o^m=HH>^Rumk!XXM
z=GxaIPet(cxvYOh{ynsp&zhS>=}kMrmU!;+{}TodQ-<QUEwa9pvKE;2K}lvP&GzaC
zUjUWMVlAA9W4wCtcW7>sXmR0#H2rRordW%e3TX;j(fmWAWiw6hf0L$I>%lbn?P#u)
zXqh~+p7$4;XC+$ZNVML=9lrg`Xwou?=&-|>M(*#VhCl+kp~?h5dI~ootw+jQma-92
zj#qjkmG@Fe1M7W3t6zx>DL8a!S^gP`lSE4jrVZ@iE)L0n6>pcwaM>6qYJFZV{=^i>
zcC<VE_DJ8U-G`6N|Iz77R@DVCz;P0G7zF2iI5{-Ia)lnavFDTU%HiPtILU^eK(w@R
zx&g>4@D0caq&hW5lMf?z2JjAxZ5Akll<rDzTm&Xk{sKeq<is$!Gn>TXUQ?=7U7#gP
zwAgzQJFWwor_vi~G(l?x+BQxMA_BbG;Fht6L;y+GpFz(MH3<MB^JEb5rv4{H`oJV_
zsLnXpH{e?*RyN<|xy$XkNX@7fxEh7cL@gOxyE%8^dh9-`9-y_EbC=nRR1s-QIWEjr
zV-!ediOH=W(ve8CgA>DmJ_6{BSj%iovH4Xu6?4`ypg{m_s4z+BE(V3%SZSngCM1Wf
zA&{;_hC^D2QMQoWslmm50_aTv%!acJhQ{YR3}6@qAgu$24E`9a+ra<^P=Hd8V|X{a
zYypc^&3-ZT@zIpL+f&(uVt)d!MWg^R30B{0!VV1^+4=^IZsAkd6=R9)!o*r;V~V33
zP`}7f-wdgh24*XI2Ifw%jG#NN78qdz=RC7B4W=wm*CIxRhxVG7eSbZIiZ4WYgvd<a
z!!SiWhf$<I349DVlG~E!b$GUQ!QFbuGylnr9L%|_Y{9C>5drH-r<+9@lFSp5Cyab*
z9)!~ni8GN5yZIDsU9I%~$GYa+JnCRa<c@gruhq%DsKqh6VQdl`<JNJN(40-Iifh*>
zWg!MPa8TWvrY5ny7Z;!Zo4U5|B5YCc1KTSS$c0aA@bN$pYCSAd+tKAyTwANtKVNST
zsXrvL9;32)S3<&Y6nOA@3VAIc%HaE5(2^5n@ck|=m4Pb0-=#|ix+eT5U1!R*MK-iB
zNjEjU4(x2mEV6hL2N%HAo{~+(t(bicnZ*{K?e%!I_Z};k_Hp`QBr;GQ5Uo^b*MML>
zGEf5xA8)cA*F9dL6YP2Xcvjq(u0*<VBJ=oo8^N*q{^d3*2HyEZ>-*Z?3a!k>=`?O%
z*Z`T)`qeg#&cIeSws#6G@iz6IDYSkz+(AZJfla^RYVR24ihR0dprjjdGqMJmb|){!
zreMb!o=fNR2Hts_oE=Nm$$L!6v3ks7Eso*jvIzH&8K1R87L59RRHOfN#}tfT#Q$eD
z*}Nn4t0dCzFd7)ZN1cF3eV9br-U%2ak)n!594IQZOjgD@q3nX0N3_*4QrUzrGKdF?
z<?UNJiMT7|PlsNuo|8fDR`Js<e(E#vnnMWJC>laH;x+vkPswz=FfqB5V&y+bET#9-
z>_jSGbFi=y6F{6Fjhawl8V0PDO|)+OACGUlhO^e$@rPBtty;5dLTgy;v~|^(h%nb9
zh`uW+i)8`|AO1`hreSHvOdo$mw@+5eLB4OLRLvQN4{5LviZP=bl)7bDG>P*SsAO+L
zVH}If1gwacjV9ds`i~GEASysG<NXJm>kBQ>`k%$p-B#CeP~c8u*2jH@Op!UEqzvC%
zVM)wasj><z0%e>%Bi{ub;x$rt0sBv^-CiN>U$6YMkB^5V%j0p~NA}GtxY|bLbZppN
zDoh(taK~JkYv_p9uPrxifZfqtZs-`NcR>>iDVhrn9g+G~DqU}UBZcMYx~#pFcXzMp
z6}BqkBF#Fj#Z7WHQs;)n+E<d_OSG%V^0=f784G}Nt);i*tWu|AfE>}TV#`M*Wk^^6
zbk$m%BxlFy+%TmAvzrJvY%`Q`_$~`vX35(1yxj>J3=%9V6%D!@#*Q*hF-AQSvmUB5
z5&F$yX#`zZuC|z_88dftikV`mo9c{0|EE}*K!Nx!a&sTYTo%5IOnz(jUE|R@;;T7N
z0^%G*{faG8VI`Boh+9ltb?6=wkFoDxhRm`0XC-B*ieaJm*~J~NXb%%sGAWz<fhj}%
zDpq$8RWjJOA*4N*w<-|_ZP~cVbjyHI8&-l-ew5xKgNRDOLevZo2+ajeM2Bc{a-&yB
z9WyLlB`ehg4O~tcGGp{dV+rhAh19grG6c>B2z$nZhRpFe=mWuByhyQVG;Vm{U<n&Y
zpJMKAT<{>oMP`o+y3IH#!pQ;@UhRwPC9aw`({I?H`Syu0;Jxwsif?pR7<f}Ljs-1|
zI5|OlJg3es!FdeERVXThqS54(6Tbujl&^JHaCiceK!KOZl@tbLs-Xi1YE~4U=&Wxi
zib?nEA1+!;Y$wV{L&s8_z>;tIQwn*J`P{chcjG7rqXQ=b6J+fUj{tnc0M~Hq%69^Y
z9TI>+vUcvb0QQ1}h!RK9%E(|`a&ea2N8KHts)T#6Ua$J8>$pt2DmiM6qHgUt9Bt}C
zj}_Xox%)eCDxSuC75MOhNje(Gb5k%3k>xxJ(QaA=%J|@sP+p?)zBdggekjd@QiXvl
z`fCeNQI*G0#l!oigwZ(doPrnw>Y)(r)-a%A_eoIGRNnVvfr>IbK`rC%{|m>DY0N3d
z!(U9=(U=ORV2A^CUWj(r8(8l)qwFA2x9d1`Ov4HXHsW7Qx-W4U2s@+e$Pld&cSVSy
z{U!NImEj=K9KRG0#9{@qSHC)acH?jtPxPIkkn%#>56q)+(lS(%FA#n3Lmc&8mcRMx
z&!!qZghf2zBZ7s7%*i<VhmYHK@*+2KyMG3?5O)Q{$Fo1D?66b}SA~9#Lrz3jxZdZy
z?&M;|m2w<0w<EbD0m-6#$lWe_pcQ}5^t=mYgXy}+ka>5dt(U*3TM`b`X)ljoOis8Y
z17XnXkU^G8j?u{^i<9DDZ=9y#+euagO3U+79`*MN_yPytRECO+x&f0I%gCi`LbT>I
z8};`@my;M>1?GbLroJm|)PFR{X5n%IL*2kFoo`e0K!&AcpH0zas^%|n3x;8GMK^Pj
zP0{3f-A5yAjplk?MlV|<`J8UW8=FGuE~0KD!M_nnL1rPZQ7j4=iR11@>@7&sU!)od
z3pEO8^LaIXl7sDl&n7x*p5ES~{ju6KCTgKYbrPC+AlF8``z^GngGmz^G@6bJEt5`y
zu?LnLH1BCGQ-etpH?h$)X)Pa=Lf>^vY+aLStJg!ZHJHXQO{N-ZZ+!?e;kR8#lnz!U
z|BAC#wi6S1Jkir7xaN`Hg$AvUj$1kkf=1#@5NCWICf)7V<T?cIn4?+HsC)bxlR+d3
zM+Dlad-)n6U4gk8Q7dmXb#KF1$$yU_wT2sZE(UxbF$0UOdgZzRLW(hVaJF;PwE~x(
zlODW|$^TjQt?6LL<>C|Z5HBX(GU^pn3&eWuhYFm%=&T9x&W^+)2e3=JWm*;iW5x!!
zBTRJmYh1iwuV%n?8I~0#oW{90io!Hdz^x%hx3)HLYvPscy-ddeswSmGx&a2$8Tl%i
zG<KgU5F1sHl(m=+Z?Pd&T+!VU3-giH2rysm;MOE|QV0;GeOAIB3mYR78K-Lcpp)Ek
zLs`CB!^f<~QAm%;q<tyv=bE}rI>EYBLH6SN-T!jS;=CMrMLF0J93Q4@rYd!*!zIpg
zKQorG7tjE!0ny-+?!$q?{2wU$#$xXG`0bj{7zI2<m7kaJCo$~1tKw!zq=y-8o*K$>
z)S4uQeR7DDyU#>E_ywa{t!8W|qx4o&(?5)wbiMy!RLC9n4<oK9?Qka}7gbYoC!;qR
zn$a+hRk|6fCeM8)d;@j)W4^0KkUhIg-|26Ud$p~YaZJC)=X8tJ3!At##!j;Z8_I@v
z8oqX+rdOxoTN`v!AcNIg!$fIQI?byxlr8Q=k}cGDK_%p5uw8nKX;G*5Q?KYgl-OL?
zxQYAyKduWCRUYh=AxsrFxs&!;L)nQ=*Ja71pB}d>X6zj-s{FOuuEu8k`>4X=v%<ze
z_O<x8X>b4ST8m$up!tkUwSmJNg|>xAmE?%BnAdpUBqoQHNJcWS?Zgy3P~t2aYd!u<
zXI|l8^#95${8EX4Yzzh8++AL9(bvEi;<Oc8)^oZ9at@0f?f?8M4gG+Y#d7>>TK9!h
zjtR{zjKQ!yWz31)>pQQ`>?cRPSqiDF-9U_uJ!FgNBVz3O9lX`t%@Sg4{3?O!%s$dl
z04TgqGiX)l|Iw?&my6{%_H+nmKXra^_X)d%x60y+g_8V$l$8^HG>YN$-~6i2gV8CY
a+g<$A{+RLN<kni^az(T%>d2Us-2VlI%q|T8

literal 0
HcmV?d00001

diff --git a/src/layouts/admin/components/config.vue b/src/layouts/admin/components/config.vue
index 95d5da9..ea3e7c3 100644
--- a/src/layouts/admin/components/config.vue
+++ b/src/layouts/admin/components/config.vue
@@ -1,198 +1,198 @@
 <template>
-    <div class="layout-config-drawer">
+    <div class='layout-config-drawer'>
         <el-drawer
-            :model-value="configStore.layout.showDrawer"
-            title="布局配置"
-            size="310px"
-            @close="onCloseDrawer"
+            :model-value='configStore.layout.showDrawer'
+            title='布局配置'
+            size='310px'
+            @close='onCloseDrawer'
         >
-            <el-scrollbar class="layout-mode-style-scrollbar">
-                <el-form ref="formRef" :model="configStore.layout">
-                    <div class="layout-mode-styles-box">
-                        <el-divider border-style="dashed">全局</el-divider>
-                        <div class="layout-mode-box-style">
-                            <el-row class="layout-mode-box-style-row" :gutter="10">
-                                <el-col :span="12">
+            <el-scrollbar class='layout-mode-style-scrollbar'>
+                <el-form ref='formRef' :model='configStore.layout'>
+                    <div class='layout-mode-styles-box'>
+                        <el-divider border-style='dashed'>全局</el-divider>
+                        <div class='layout-mode-box-style'>
+                            <el-row class='layout-mode-box-style-row' :gutter='10'>
+                                <el-col :span='12'>
                                     <div
                                         @click="setLayoutMode('Default')"
-                                        class="layout-mode-style default"
+                                        class='layout-mode-style default'
                                         :class="configStore.layout.layoutMode == 'Default' ? 'active' : ''"
                                     >
-                                        <div class="layout-mode-style-box">
-                                            <div class="layout-mode-style-aside"></div>
-                                            <div class="layout-mode-style-container-box">
-                                                <div class="layout-mode-style-header"></div>
-                                                <div class="layout-mode-style-container"></div>
+                                        <div class='layout-mode-style-box'>
+                                            <div class='layout-mode-style-aside'></div>
+                                            <div class='layout-mode-style-container-box'>
+                                                <div class='layout-mode-style-header'></div>
+                                                <div class='layout-mode-style-container'></div>
                                             </div>
                                         </div>
-                                        <div class="layout-mode-style-name">默认</div>
+                                        <div class='layout-mode-style-name'>默认</div>
                                     </div>
                                 </el-col>
-                                <el-col :span="12">
+                                <el-col :span='12'>
                                     <div
                                         @click="setLayoutMode('Classic')"
-                                        class="layout-mode-style classic"
+                                        class='layout-mode-style classic'
                                         :class="configStore.layout.layoutMode == 'Classic' ? 'active' : ''"
                                     >
-                                        <div class="layout-mode-style-box">
-                                            <div class="layout-mode-style-aside"></div>
-                                            <div class="layout-mode-style-container-box">
-                                                <div class="layout-mode-style-header"></div>
-                                                <div class="layout-mode-style-container"></div>
+                                        <div class='layout-mode-style-box'>
+                                            <div class='layout-mode-style-aside'></div>
+                                            <div class='layout-mode-style-container-box'>
+                                                <div class='layout-mode-style-header'></div>
+                                                <div class='layout-mode-style-container'></div>
                                             </div>
                                         </div>
-                                        <div class="layout-mode-style-name">经典</div>
+                                        <div class='layout-mode-style-name'>经典</div>
                                     </div>
                                 </el-col>
                             </el-row>
-                            <el-row :gutter="10">
-                                <el-col :span="12">
+                            <el-row :gutter='10'>
+                                <el-col :span='12'>
                                     <div
                                         @click="setLayoutMode('Streamline')"
-                                        class="layout-mode-style streamline"
+                                        class='layout-mode-style streamline'
                                         :class="configStore.layout.layoutMode == 'Streamline' ? 'active' : ''"
                                     >
-                                        <div class="layout-mode-style-box">
-                                            <div class="layout-mode-style-container-box">
-                                                <div class="layout-mode-style-header"></div>
-                                                <div class="layout-mode-style-container"></div>
+                                        <div class='layout-mode-style-box'>
+                                            <div class='layout-mode-style-container-box'>
+                                                <div class='layout-mode-style-header'></div>
+                                                <div class='layout-mode-style-container'></div>
                                             </div>
                                         </div>
-                                        <div class="layout-mode-style-name">单栏</div>
+                                        <div class='layout-mode-style-name'>单栏</div>
                                     </div>
                                 </el-col>
-                                <el-col :span="12">
+                                <el-col :span='12'>
                                     <div
                                         @click="setLayoutMode('Double')"
-                                        class="layout-mode-style double"
+                                        class='layout-mode-style double'
                                         :class="configStore.layout.layoutMode == 'Double' ? 'active' : ''"
                                     >
-                                        <div class="layout-mode-style-box">
-                                            <div class="layout-mode-style-aside"></div>
-                                            <div class="layout-mode-style-container-box">
-                                                <div class="layout-mode-style-header"></div>
-                                                <div class="layout-mode-style-container"></div>
+                                        <div class='layout-mode-style-box'>
+                                            <div class='layout-mode-style-aside'></div>
+                                            <div class='layout-mode-style-container-box'>
+                                                <div class='layout-mode-style-header'></div>
+                                                <div class='layout-mode-style-container'></div>
                                             </div>
                                         </div>
-                                        <div class="layout-mode-style-name">双栏</div>
+                                        <div class='layout-mode-style-name'>双栏</div>
                                     </div>
                                 </el-col>
                             </el-row>
                         </div>
-                        <el-divider border-style="dashed">全局</el-divider>
-                        <div class="layout-config-global">
+                        <el-divider border-style='dashed'>全局</el-divider>
+                        <div class='layout-config-global'>
                             <el-form-item label="'后台页面切换动画">
                                 <el-select
                                     @change="onCommitState($event, 'mainAnimation')"
-                                    :model-value="configStore.layout.mainAnimation"
+                                    :model-value='configStore.layout.mainAnimation'
                                     :placeholder="'layouts.Please select an animation name'"
                                 >
-                                    <el-option label="slide-right" value="slide-right"></el-option>
-                                    <el-option label="slide-left" value="slide-left"></el-option>
-                                    <el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
-                                    <el-option label="el-fade-in" value="el-fade-in"></el-option>
-                                    <el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
-                                    <el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
-                                    <el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
+                                    <el-option label='slide-right' value='slide-right'></el-option>
+                                    <el-option label='slide-left' value='slide-left'></el-option>
+                                    <el-option label='el-fade-in-linear' value='el-fade-in-linear'></el-option>
+                                    <el-option label='el-fade-in' value='el-fade-in'></el-option>
+                                    <el-option label='el-zoom-in-center' value='el-zoom-in-center'></el-option>
+                                    <el-option label='el-zoom-in-top' value='el-zoom-in-top'></el-option>
+                                    <el-option label='el-zoom-in-bottom' value='el-zoom-in-bottom'></el-option>
                                 </el-select>
                             </el-form-item>
                         </div>
 
-                        <el-divider border-style="dashed">侧边栏</el-divider>
-                        <div class="layout-config-aside">
-                            <el-form-item label="侧边菜单栏背景色">
+                        <el-divider border-style='dashed'>侧边栏</el-divider>
+                        <div class='layout-config-aside'>
+                            <el-form-item label='侧边菜单栏背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuBackground')"
                                     :model-value="configStore.getColorVal('menuBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="侧边菜单文字颜色">
+                            <el-form-item label='侧边菜单文字颜色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuColor')"
                                     :model-value="configStore.getColorVal('menuColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label="侧边菜单激活项背景色">
+                            <el-form-item label='侧边菜单激活项背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuActiveBackground')"
                                     :model-value="configStore.getColorVal('menuActiveBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="侧边菜单激活项文字色">
+                            <el-form-item label='侧边菜单激活项文字色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuActiveColor')"
                                     :model-value="configStore.getColorVal('menuActiveColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label="显示侧边菜单顶栏(LOGO栏)">
+                            <el-form-item label='显示侧边菜单顶栏(LOGO栏)'>
                                 <el-switch
                                     @change="onCommitState($event, 'menuShowTopBar')"
-                                    :model-value="configStore.layout.menuShowTopBar"
+                                    :model-value='configStore.layout.menuShowTopBar'
                                 ></el-switch>
                             </el-form-item>
-                            <el-form-item label="侧边菜单顶栏背景色">
+                            <el-form-item label='侧边菜单顶栏背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'menuTopBarBackground')"
                                     :model-value="configStore.getColorVal('menuTopBarBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="侧边菜单宽度(展开时)">
+                            <el-form-item label='侧边菜单宽度(展开时)'>
                                 <el-input
                                     @input="onCommitState($event, 'menuWidth')"
-                                    type="number"
-                                    :step="10"
-                                    :model-value="configStore.layout.menuWidth"
+                                    type='number'
+                                    :step='10'
+                                    :model-value='configStore.layout.menuWidth'
                                 >
                                     <template #append>px</template>
                                 </el-input>
                             </el-form-item>
-                            <el-form-item label="侧边菜单默认图标">
+                            <el-form-item label='侧边菜单默认图标'>
                                 <IconSelector
                                     @change="onCommitMenuDefaultIcon($event, 'menuDefaultIcon')"
-                                    :model-value="configStore.layout.menuDefaultIcon"
+                                    :model-value='configStore.layout.menuDefaultIcon'
                                 />
                             </el-form-item>
-                            <el-form-item label="侧边菜单水平折叠">
+                            <el-form-item label='侧边菜单水平折叠'>
                                 <el-switch
                                     @change="onCommitState($event, 'menuCollapse')"
-                                    :model-value="configStore.layout.menuCollapse"
+                                    :model-value='configStore.layout.menuCollapse'
                                 ></el-switch>
                             </el-form-item>
-                            <el-form-item label="侧边菜单手风琴">
+                            <el-form-item label='侧边菜单手风琴'>
                                 <el-switch
                                     @change="onCommitState($event, 'menuUniqueOpened')"
-                                    :model-value="configStore.layout.menuUniqueOpened"
+                                    :model-value='configStore.layout.menuUniqueOpened'
                                 ></el-switch>
                             </el-form-item>
                         </div>
 
-                        <el-divider border-style="dashed">顶栏</el-divider>
-                        <div class="layout-config-aside">
-                            <el-form-item label="顶栏背景色">
+                        <el-divider border-style='dashed'>顶栏</el-divider>
+                        <div class='layout-config-aside'>
+                            <el-form-item label='顶栏背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarBackground')"
                                     :model-value="configStore.getColorVal('headerBarBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="顶栏文字色">
+                            <el-form-item label='顶栏文字色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarTabColor')"
                                     :model-value="configStore.getColorVal('headerBarTabColor')"
                                 />
                             </el-form-item>
-                            <el-form-item label="顶栏悬停时背景色">
+                            <el-form-item label='顶栏悬停时背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarHoverBackground')"
                                     :model-value="configStore.getColorVal('headerBarHoverBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="顶栏菜单激活项背景色">
+                            <el-form-item label='顶栏菜单激活项背景色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarTabActiveBackground')"
                                     :model-value="configStore.getColorVal('headerBarTabActiveBackground')"
                                 />
                             </el-form-item>
-                            <el-form-item label="顶栏菜单激活项文字色">
+                            <el-form-item label='顶栏菜单激活项文字色'>
                                 <el-color-picker
                                     @change="onCommitColorState($event, 'headerBarTabActiveColor')"
                                     :model-value="configStore.getColorVal('headerBarTabActiveColor')"
@@ -200,14 +200,12 @@
                             </el-form-item>
                         </div>
                         <el-popconfirm
-                            @confirm="restoreDefault"
-                            :title="
-                                'layouts.Are you sure you want to restore all configurations to the default values?'
-                            "
+                            @confirm='restoreDefault'
+                            title='确定要恢复全部配置到默认值吗？'
                         >
                             <template #reference>
-                                <div class="ba-center">
-                                    <el-button class="w80" type="info">恢复默认</el-button>
+                                <div class='ba-center'>
+                                    <el-button class='w80' type='info'>恢复默认</el-button>
                                 </div>
                             </template>
                         </el-popconfirm>
@@ -218,7 +216,7 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
 import { useRouter } from 'vue-router'
@@ -271,34 +269,42 @@ const restoreDefault = () => {
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .layout-config-drawer :deep(.el-input__inner) {
     padding: 0 0 0 6px;
 }
+
 .layout-config-drawer :deep(.el-input-group__append) {
     padding: 0 10px;
 }
+
 .layout-config-drawer :deep(.el-drawer__header) {
     margin-bottom: 0 !important;
 }
+
 .layout-config-drawer :deep(.el-drawer__body) {
     padding: 0;
 }
+
 .layout-mode-styles-box {
     padding: 20px;
 }
+
 .layout-mode-box-style-row {
     margin-bottom: 15px;
 }
+
 .layout-mode-style {
     position: relative;
     height: 100px;
     border: 1px solid var(--el-border-color-light);
     border-radius: var(--el-border-radius-small);
+
     &:hover,
     &.active {
         border: 1px solid var(--el-color-primary);
     }
+
     .layout-mode-style-name {
         position: absolute;
         display: flex;
@@ -310,6 +316,7 @@ const restoreDefault = () => {
         width: 50px;
         border: 1px solid var(--el-color-primary-light-3);
     }
+
     .layout-mode-style-box {
         display: flex;
         align-items: center;
@@ -317,24 +324,29 @@ const restoreDefault = () => {
         width: 100%;
         height: 100%;
     }
+
     &.default {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .layout-mode-style-aside {
             width: 18%;
             height: 90%;
             background-color: var(--el-border-color-lighter);
         }
+
         .layout-mode-style-container-box {
             width: 68%;
             height: 90%;
             margin-left: 4%;
+
             .layout-mode-style-header {
                 width: 100%;
                 height: 10%;
                 background-color: var(--el-border-color-lighter);
             }
+
             .layout-mode-style-container {
                 width: 100%;
                 height: 85%;
@@ -343,23 +355,28 @@ const restoreDefault = () => {
             }
         }
     }
+
     &.classic {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .layout-mode-style-aside {
             width: 18%;
             height: 100%;
             background-color: var(--el-border-color-lighter);
         }
+
         .layout-mode-style-container-box {
             width: 82%;
             height: 100%;
+
             .layout-mode-style-header {
                 width: 100%;
                 height: 10%;
                 background-color: var(--el-border-color);
             }
+
             .layout-mode-style-container {
                 width: 100%;
                 height: 90%;
@@ -367,18 +384,22 @@ const restoreDefault = () => {
             }
         }
     }
+
     &.streamline {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .layout-mode-style-container-box {
             width: 100%;
             height: 100%;
+
             .layout-mode-style-header {
                 width: 100%;
                 height: 10%;
                 background-color: var(--el-border-color);
             }
+
             .layout-mode-style-container {
                 width: 100%;
                 height: 90%;
@@ -386,23 +407,28 @@ const restoreDefault = () => {
             }
         }
     }
+
     &.double {
         display: flex;
         align-items: center;
         justify-content: center;
+
         .layout-mode-style-aside {
             width: 18%;
             height: 100%;
             background-color: var(--el-border-color);
         }
+
         .layout-mode-style-container-box {
             width: 82%;
             height: 100%;
+
             .layout-mode-style-header {
                 width: 100%;
                 height: 10%;
                 background-color: var(--el-border-color);
             }
+
             .layout-mode-style-container {
                 width: 100%;
                 height: 90%;
@@ -411,6 +437,7 @@ const restoreDefault = () => {
         }
     }
 }
+
 .w80 {
     width: 90%;
 }
diff --git a/src/layouts/admin/components/navMenus.vue b/src/layouts/admin/components/navMenus.vue
index 065c24e..f6b945b 100644
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -1,15 +1,5 @@
 <template>
     <div class="nav-menus" :class="configStore.layout.layoutMode">
-        <router-link class="h100" target="_blank" title="'Home'" to="/">
-            <div class="nav-menu-item">
-                <Icon
-                    :color="configStore.getColorVal('headerBarTabColor')"
-                    class="nav-menu-icon"
-                    name="el-icon-Monitor"
-                    size="18"
-                />
-            </div>
-        </router-link>
         <div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
             <Icon
                 :color="configStore.getColorVal('headerBarTabColor')"
diff --git a/src/layouts/admin/index.vue b/src/layouts/admin/index.vue
index a426303..3692485 100644
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <component :is="config.layout.layoutMode"></component>
+    <component :is='config.layout.layoutMode'></component>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { reactive } from 'vue'
 import { useConfig } from '@/stores/config'
 import { useNavTabs } from '@/stores/navTabs'
diff --git a/src/layouts/admin/router-view/main.vue b/src/layouts/admin/router-view/main.vue
index e5bdbc0..e04def3 100644
--- a/src/layouts/admin/router-view/main.vue
+++ b/src/layouts/admin/router-view/main.vue
@@ -1,10 +1,12 @@
 <template>
-    <el-main class="layout-main">
-        <el-scrollbar class="layout-main-scrollbar" :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
-            <router-view v-slot="{ Component }">
-                <transition :name="config.layout.mainAnimation" mode="out-in">
-                    <keep-alive :include="state.keepAliveComponentNameList">
-                        <component :is="Component" :key="state.componentKey" />
+    <el-main class='layout-main'>
+        <el-scrollbar class='layout-main-scrollbar' :style='layoutMainScrollbarStyle()' ref='mainScrollbarRef'>
+            <router-view v-slot='{ Component }'>
+                <transition :name='config.layout.mainAnimation' mode='out-in'>
+                    <keep-alive :include='state.keepAliveComponentNameList'>
+                        <div class='default-main'>
+                            <component :is='Component' :key='state.componentKey' />
+                        </div>
                     </keep-alive>
                 </transition>
             </router-view>
@@ -12,7 +14,7 @@
     </el-main>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
 import { useRoute, type RouteLocationNormalized } from 'vue-router'
 import { mainHeight as layoutMainScrollbarStyle } from '@/utils/layout'
@@ -22,7 +24,7 @@ import { useNavTabs } from '@/stores/navTabs'
 import type { ScrollbarInstance } from 'element-plus'
 
 defineOptions({
-    name: 'layout/main',
+    name: 'layout/main'
 })
 
 const { proxy } = useCurrentInstance()
@@ -37,10 +39,10 @@ const state: {
     keepAliveComponentNameList: string[]
 } = reactive({
     componentKey: route.path,
-    keepAliveComponentNameList: [],
+    keepAliveComponentNameList: []
 })
 
-const addKeepAliveComponentName = function (keepAliveName: string | undefined) {
+const addKeepAliveComponentName = function(keepAliveName: string | undefined) {
     if (keepAliveName) {
         let exist = state.keepAliveComponentNameList.find((name: string) => {
             return name === keepAliveName
@@ -89,13 +91,14 @@ watch(
 provide('mainScrollbarRef', mainScrollbarRef)
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .layout-container .layout-main {
     padding: 0 !important;
     overflow: hidden;
     width: 100%;
     height: 100%;
 }
+
 .layout-main-scrollbar {
     width: 100%;
     position: relative;
diff --git a/src/router/index.ts b/src/router/index.ts
index 2268115..53eee87 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,75 +1,31 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import staticRoutes from '@/router/static'
+import { useConfig } from '@/stores/config'
+import NProgress from 'nprogress'
+import { loading } from '@/utils/loading'
 
 const router = createRouter({
     history: createWebHashHistory(),
     routes: staticRoutes
 })
 
-// router.beforeEach((to, from, next) => {
-//     NProgress.configure({ showSpinner: false })
-//     NProgress.start()
-//     if (!window.existLoading) {
-//         loading.show()
-//         window.existLoading = true
-//     }
+router.beforeEach((to, from, next) => {
+    NProgress.configure({ showSpinner: false })
+    NProgress.start()
+    if (!window.existLoading) {
+        loading.show()
+        window.existLoading = true
+    }
+    console.log(to)
+    next()
+})
 
-//     // 按需动态加载页面的语言包-start
-//     let loadPath: string[] = []
-//     const config = useConfig()
-//     if (to.path in langAutoLoadMap) {
-//         loadPath.push(...langAutoLoadMap[to.path as keyof typeof langAutoLoadMap])
-//     }
-//     let prefix = ''
-//     if (isAdminApp(to.fullPath)) {
-//         prefix = './backend/' + config.lang.defaultLang
-
-//         // 去除 path 中的 /admin
-//         const adminPath = to.path.slice(to.path.indexOf(adminBaseRoutePath) + adminBaseRoutePath.length)
-//         if (adminPath) loadPath.push(prefix + adminPath + '.ts')
-//     } else {
-//         prefix = './frontend/' + config.lang.defaultLang
-//         loadPath.push(prefix + to.path + '.ts')
-//     }
-
-//     // 根据路由 name 加载的语言包
-//     if (to.name) {
-//         loadPath.push(prefix + '/' + to.name.toString() + '.ts')
-//     }
-
-//     if (!window.loadLangHandle.publicMessageLoaded) window.loadLangHandle.publicMessageLoaded = []
-//     const publicMessagePath = prefix + '.ts'
-//     if (!window.loadLangHandle.publicMessageLoaded.includes(publicMessagePath)) {
-//         loadPath.push(publicMessagePath)
-//         window.loadLangHandle.publicMessageLoaded.push(publicMessagePath)
-//     }
-
-//     // 去重
-//     loadPath = uniq(loadPath)
-
-//     for (const key in loadPath) {
-//         loadPath[key] = loadPath[key].replaceAll('${lang}', config.lang.defaultLang)
-//         if (loadPath[key] in window.loadLangHandle) {
-//             window.loadLangHandle[loadPath[key]]().then((res: { default: anyObj }) => {
-//                 const pathName = loadPath[key].slice(
-//                     loadPath[key].lastIndexOf(prefix) + (prefix.length + 1),
-//                     loadPath[key].lastIndexOf('.')
-//                 )
-//                 mergeMessage(res.default, pathName)
-//             })
-//         }
-//     }
-//     // 动态加载语言包-end
-
-//     next()
-// })
-
-// // 路由加载后
-// router.afterEach(() => {
-//     if (window.existLoading) {
-//         loading.hide()
-//     }
-//     NProgress.done()
-// })
+// 路由加载后
+router.afterEach(() => {
+    if (window.existLoading) {
+        loading.hide()
+    }
+    NProgress.done()
+})
 
 export default router
diff --git a/src/router/static.ts b/src/router/static.ts
index 1229702..d433dfc 100644
--- a/src/router/static.ts
+++ b/src/router/static.ts
@@ -34,6 +34,14 @@ export const adminBaseRoute = {
  */
 const staticRoutes: Array<RouteRecordRaw> = [
     adminBaseRoute,
+    {
+        path: '/',
+        redirect: (to) => {
+            return {
+                name: 'adminMainLoading'
+            }
+        }
+    },
     {
         // 管理员登录页 - 不放在 adminBaseRoute.children 因为登录页不需要使用后台的布局
         path: '/login',
@@ -43,7 +51,6 @@ const staticRoutes: Array<RouteRecordRaw> = [
             title: pageTitle('login')
         }
     },
-
     {
         path: '/:path(.*)*',
         redirect: '/404'
@@ -56,6 +63,21 @@ const staticRoutes: Array<RouteRecordRaw> = [
         meta: {
             title: pageTitle('notFound') // 页面不存在
         }
+    },
+    {
+        // 后台找不到页面了-可能是路由未加载上
+        path: adminBaseRoutePath + ':path(.*)*',
+        redirect: (to) => {
+            return {
+                name: 'adminMainLoading',
+                params: {
+                    to: JSON.stringify({
+                        path: to.path,
+                        query: to.query
+                    })
+                }
+            }
+        }
     }
 ]
 
diff --git a/src/styles/loading.scss b/src/styles/loading.scss
new file mode 100644
index 0000000..ae6c793
--- /dev/null
+++ b/src/styles/loading.scss
@@ -0,0 +1,54 @@
+.block-loading {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9990;
+    background-color: var(--ba-bg-color);
+}
+.block-loading .block-loading-box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.block-loading .block-loading-box-warp {
+    width: 80px;
+    height: 80px;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item {
+    width: 33.333333%;
+    height: 33.333333%;
+    background: #409eff;
+    float: left;
+    animation: block-loading-animation 1.2s infinite ease;
+    border-radius: 1px;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(7) {
+    animation-delay: 0s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(4),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(8) {
+    animation-delay: 0.1s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(1),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(5),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(9) {
+    animation-delay: 0.2s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(2),
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(6) {
+    animation-delay: 0.3s;
+}
+.block-loading .block-loading-box-warp .block-loading-box-item:nth-child(3) {
+    animation-delay: 0.4s;
+}
+@keyframes block-loading-animation {
+    0%,
+    70%,
+    100% {
+        transform: scale3D(1, 1, 1);
+    }
+    35% {
+        transform: scale3D(0, 0, 1);
+    }
+}
diff --git a/src/utils/loading.ts b/src/utils/loading.ts
new file mode 100644
index 0000000..daa6b26
--- /dev/null
+++ b/src/utils/loading.ts
@@ -0,0 +1,34 @@
+import { nextTick } from 'vue'
+import '@/styles/loading.scss'
+
+export const loading = {
+    show: () => {
+        const bodys: Element = document.body
+        const div = document.createElement('div')
+        div.className = 'block-loading'
+        div.innerHTML = `
+            <div class="block-loading-box">
+                <div class="block-loading-box-warp">
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                    <div class="block-loading-box-item"></div>
+                </div>
+            </div>
+        `
+        bodys.insertBefore(div, bodys.childNodes[0])
+    },
+    hide: () => {
+        nextTick(() => {
+            setTimeout(() => {
+                const el = document.querySelector('.block-loading')
+                el && el.parentNode?.removeChild(el)
+            }, 1000)
+        })
+    },
+}
diff --git a/src/utils/pageBubble.ts b/src/utils/pageBubble.ts
new file mode 100644
index 0000000..f024753
--- /dev/null
+++ b/src/utils/pageBubble.ts
@@ -0,0 +1,104 @@
+// 页面气泡效果
+
+const bubble: {
+    width: number
+    height: number
+    bubbleEl: any
+    canvas: any
+    ctx: any
+    circles: any[]
+    animate: boolean
+    requestId: any
+} = {
+    width: 0,
+    height: 0,
+    bubbleEl: null,
+    canvas: null,
+    ctx: {},
+    circles: [],
+    animate: true,
+    requestId: null,
+}
+
+export const init = function (): void {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+
+    bubble.bubbleEl = document.getElementById('bubble')
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+
+    bubble.canvas = document.getElementById('bubble-canvas')
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+    bubble.ctx = bubble.canvas.getContext('2d')
+
+    // create particles
+    bubble.circles = []
+    for (let x = 0; x < bubble.width * 0.5; x++) {
+        const c = new Circle()
+        bubble.circles.push(c)
+    }
+    animate()
+    addListeners()
+}
+
+function scrollCheck() {
+    bubble.animate = document.body.scrollTop > bubble.height ? false : true
+}
+
+function resize() {
+    bubble.width = window.innerWidth
+    bubble.height = window.innerHeight
+    bubble.bubbleEl.style.height = bubble.height + 'px'
+    bubble.canvas.width = bubble.width
+    bubble.canvas.height = bubble.height
+}
+
+function animate() {
+    if (bubble.animate) {
+        bubble.ctx.clearRect(0, 0, bubble.width, bubble.height)
+        for (const i in bubble.circles) {
+            bubble.circles[i].draw()
+        }
+    }
+    bubble.requestId = requestAnimationFrame(animate)
+}
+
+class Circle {
+    pos: {
+        x: number
+        y: number
+    }
+    alpha: number
+    scale: number
+    velocity: number
+    draw: () => void
+    constructor() {
+        this.pos = {
+            x: Math.random() * bubble.width,
+            y: bubble.height + Math.random() * 100,
+        }
+        this.alpha = 0.1 + Math.random() * 0.3
+        this.scale = 0.1 + Math.random() * 0.3
+        this.velocity = Math.random()
+        this.draw = function () {
+            this.pos.y -= this.velocity
+            this.alpha -= 0.0005
+            bubble.ctx.beginPath()
+            bubble.ctx.arc(this.pos.x, this.pos.y, this.scale * 10, 0, 2 * Math.PI, false)
+            bubble.ctx.fillStyle = 'rgba(255,255,255,' + this.alpha + ')'
+            bubble.ctx.fill()
+        }
+    }
+}
+
+function addListeners() {
+    window.addEventListener('scroll', scrollCheck)
+    window.addEventListener('resize', resize)
+}
+
+export function removeListeners() {
+    window.removeEventListener('scroll', scrollCheck)
+    window.removeEventListener('resize', resize)
+    cancelAnimationFrame(bubble.requestId)
+}
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 6d31c8c..ada4af5 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -22,14 +22,14 @@ export const routePush = async (to: RouteLocationRaw) => {
                 type: 'error'
             })
         } else if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
-            ElNotification({
-                message: 'utils.Navigation failed, it is at the navigation target position!',
-                type: 'warning'
-            })
+            // ElNotification({
+            //     message: '已在目标页',
+            //     type: 'warning'
+            // })
         }
     } catch (error) {
         ElNotification({
-            message: 'utils.Navigation failed, invalid route!',
+            message: '导航失败，路由无效',
             type: 'error'
         })
         console.error(error)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index d7eb11c..6cc54a7 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,78 +1,8 @@
 <template>
-    <el-form :model="form" label-width="120px">
-      <el-form-item label="Activity name">
-        <el-input v-model="form.name" />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="Activity time">
-        <el-col :span="11">
-          <el-date-picker
-            v-model="form.date1"
-            type="date"
-            placeholder="Pick a date"
-            style="width: 100%"
-          />
-        </el-col>
-        <el-col :span="2" class="text-center">
-          <span class="text-gray-500">-</span>
-        </el-col>
-        <el-col :span="11">
-          <el-time-picker
-            v-model="form.date2"
-            placeholder="Pick a time"
-            style="width: 100%"
-          />
-        </el-col>
-      </el-form-item>
-      <el-form-item label="Instant delivery">
-        <el-switch v-model="form.delivery" />
-      </el-form-item>
-      <el-form-item label="Activity type">
-        <el-checkbox-group v-model="form.type">
-          <el-checkbox label="Online activities" name="type" />
-          <el-checkbox label="Promotion activities" name="type" />
-          <el-checkbox label="Offline activities" name="type" />
-          <el-checkbox label="Simple brand exposure" name="type" />
-        </el-checkbox-group>
-      </el-form-item>
-      <el-form-item label="Resources">
-        <el-radio-group v-model="form.resource">
-          <el-radio label="Sponsor" />
-          <el-radio label="Venue" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="Activity form">
-        <el-input v-model="form.desc" type="textarea" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSubmit">Create</el-button>
-        <el-button>Cancel</el-button>
-      </el-form-item>
-    </el-form>
-  </template>
-  
-  <script lang="ts" setup>
-  import { reactive } from 'vue'
-  
-  // do not use same name with ref
-  const form = reactive({
-    name: '',
-    region: '',
-    date1: '',
-    date2: '',
-    delivery: false,
-    type: [],
-    resource: '',
-    desc: '',
-  })
-  
-  const onSubmit = () => {
-    console.log('submit!')
-  }
-  </script>
+    123123
+</template>
+
+<script lang='ts' setup>
+
+</script>
   
\ No newline at end of file
diff --git a/src/views/user/login.vue b/src/views/user/login.vue
index 00af92b..45704b4 100644
--- a/src/views/user/login.vue
+++ b/src/views/user/login.vue
@@ -1 +1,213 @@
-<template>login</template>
+<template>
+    <div>
+        <div @contextmenu.stop='' id='bubble' class='bubble'>
+            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
+        </div>
+        <div class='login'>
+            <div class='login-box'>
+                <div class='head'>
+                    <img src='@/assets/login-header.png' alt='' />
+                </div>
+                <div class='form'>
+                    <img class='profile-avatar' src='@/assets/avatar.png' alt='' />
+                    <div class='content'>
+                        <el-form @keyup.enter='onSubmit()' ref='formRef' size='large' :model='form'>
+                            <el-form-item prop='username'>
+                                <el-input
+                                    ref='usernameRef'
+                                    type='text'
+                                    clearable
+                                    v-model='form.username'
+                                    placeholder='请输入账号'
+                                >
+                                    <template #prefix>
+                                        <Icon name='fa fa-user' class='form-item-icon' size='16'
+                                              color='var(--el-input-icon-color)' />
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item prop='password'>
+                                <el-input
+                                    ref='passwordRef'
+                                    v-model='form.password'
+                                    type='password'
+                                    placeholder='请输入密码'
+                                    show-password
+                                >
+                                    <template #prefix>
+                                        <Icon name='fa fa-unlock-alt' class='form-item-icon' size='16'
+                                              color='var(--el-input-icon-color)' />
+                                    </template>
+                                </el-input>
+                            </el-form-item>
+                            <el-form-item>
+                                <el-button
+                                    :loading='state.submitLoading'
+                                    class='submit-button'
+                                    round
+                                    type='primary'
+                                    size='large'
+                                    @click='onSubmit()'
+                                >
+                                    登录
+                                </el-button>
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
+import * as pageBubble from '@/utils/pageBubble'
+import type { FormInstance, InputInstance } from 'element-plus'
+
+let timer: number
+
+const formRef = ref<FormInstance>()
+const usernameRef = ref<InputInstance>()
+const passwordRef = ref<InputInstance>()
+const state = reactive({
+    showCaptcha: false,
+    submitLoading: false
+})
+const form = reactive({
+    username: '',
+    password: '',
+})
+
+
+const focusInput = () => {
+    if (form.username === '') {
+        usernameRef.value!.focus()
+    } else if (form.password === '') {
+        passwordRef.value!.focus()
+    }
+}
+
+onMounted(() => {
+    timer = window.setTimeout(() => {
+        pageBubble.init()
+    }, 1000)
+
+})
+
+onBeforeUnmount(() => {
+    clearTimeout(timer)
+    pageBubble.removeListeners()
+})
+
+const onSubmit = (captchaInfo = '') => {
+    state.submitLoading = true
+    setTimeout(() => {
+        state.submitLoading = false
+    }, 3000)
+}
+</script>
+
+<style scoped lang='scss'>
+.switch-language {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+}
+
+.bubble {
+    overflow: hidden;
+    background: url(@/assets/bg.jpg) repeat;
+}
+
+.form-item-icon {
+    height: auto;
+}
+
+.login {
+    position: absolute;
+    top: 0;
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    align-items: center;
+    justify-content: center;
+
+    .login-box {
+        overflow: hidden;
+        width: 430px;
+        padding: 0;
+        background: var(--ba-bg-color-overlay);
+        margin-bottom: 80px;
+    }
+
+    .head {
+        background: #ccccff;
+
+        img {
+            display: block;
+            width: 430px;
+            margin: 0 auto;
+            user-select: none;
+        }
+    }
+
+    .form {
+        position: relative;
+
+        .profile-avatar {
+            display: block;
+            position: absolute;
+            height: 100px;
+            width: 100px;
+            border-radius: 50%;
+            border: 4px solid var(--ba-bg-color-overlay);
+            top: -50px;
+            right: calc(50% - 50px);
+            z-index: 2;
+            user-select: none;
+        }
+
+        .content {
+            padding: 100px 40px 40px 40px;
+        }
+
+        .submit-button {
+            width: 100%;
+            letter-spacing: 2px;
+            font-weight: 300;
+            margin-top: 15px;
+            --el-button-bg-color: var(--el-color-primary);
+        }
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .login {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .login-box {
+            width: 340px;
+            margin-top: 0;
+        }
+    }
+}
+
+.chang-lang :deep(.el-dropdown-menu__item) {
+    justify-content: center;
+}
+
+.content :deep(.el-input__prefix) {
+    display: flex;
+    align-items: center;
+}
+
+@media screen and (max-height: 800px) {
+    .login .login-box {
+        margin-bottom: 0;
+    }
+}
+</style>