From a87593f58a1185d6360b8e49ffe1c9fff768770e Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Wed, 1 Sep 2021 17:43:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E9=85=8D=E7=BD=AE=E6=8A=BD=E5=B1=89=EF=BC=8C=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=9A=97=E9=BB=91=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- index.html | 4 +- public/favicon.ico | Bin 4286 -> 16958 bytes src/assets/img/common/logo.png | Bin 0 -> 11341 bytes src/enum/animate.ts | 9 +++ src/enum/common.ts | 2 +- src/enum/index.ts | 2 + src/enum/theme.ts | 13 ++++ src/interface/app.ts | 73 ++++++++++++++++++ .../components/HeaderItemContainer.vue | 8 ++ .../GlobalHeader/components/index.ts | 3 + .../components/GlobalHeader/index.vue | 20 +++++ .../components/GlobalLogo/index.vue | 16 ++++ .../components/GlobalMenu/index.vue | 6 ++ .../SettingDrawer/components/DarkMode.vue | 25 ++++++ .../SettingDrawer/components/ThemeStyle.vue | 0 .../SettingDrawer/components/index.ts | 3 + .../components/SettingDrawer/index.vue | 16 ++++ src/layouts/BasicLayout/components/index.ts | 6 ++ src/layouts/BasicLayout/index.vue | 66 ++++++++++++++-- src/main.ts | 17 ++-- src/plugins/dark-mode.ts | 31 ++++++++ src/plugins/index.ts | 3 +- src/settings/theme/index.ts | 34 +++++++- src/store/modules/app/index.ts | 32 ++++++-- src/views/home/index.vue | 2 +- src/views/system/index.vue | 5 +- 27 files changed, 364 insertions(+), 36 deletions(-) create mode 100644 src/assets/img/common/logo.png create mode 100644 src/enum/animate.ts create mode 100644 src/enum/theme.ts create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/components/index.ts create mode 100644 src/layouts/BasicLayout/components/GlobalHeader/index.vue create mode 100644 src/layouts/BasicLayout/components/GlobalLogo/index.vue create mode 100644 src/layouts/BasicLayout/components/GlobalMenu/index.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/components/index.ts create mode 100644 src/layouts/BasicLayout/components/SettingDrawer/index.vue create mode 100644 src/layouts/BasicLayout/components/index.ts create mode 100644 src/plugins/dark-mode.ts diff --git a/.env b/.env index fa204ea2..ce6d12fc 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # 变量需要以VITE开头 -VITE_APP_TITLE=web-cli -VITE_APP_TITLE_LABEL=web脚手架 +VITE_APP_TITLE=SoybeanAdmin +VITE_APP_TITLE_LABEL=Soybean后台管理系统 VITE_BASE_URL=/ diff --git a/index.html b/index.html index c7c16fc4..5a9c3245 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,10 @@ - Vite App + <%= title %> - +
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..2b47ca6e980c026368b61d73b28cc993f659c382 100644 GIT binary patch literal 16958 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 YbpHSU{{f5!`||()4=~yu*hu-2k;;s(FXw$>tr7 z|DhPf28q$seyH6be^xc`aQp|g8{`HM8zcsjqlp`k?AB}E;dmd(Zjk*T3=#v$(Zmf< z`&pZJIL^XiH^_bv2FZccP&Evoc7y!o(Y(X)10MT9av(JzwN!Hh)P8~H9gaKj*bVYO z2!qss)KbNMsNEp{q&4qw{6&QQAT=PhAUzbj0cyWO^A5*L7iKh$o<<{gf0*zB%ZV*ek6akv4b2c(xQH$d$Mg`s)#4##Kc_BU;D{GXL$3C18c zx;#`5NH53?lHCBcpR;*~<1!4hcRKzrpKSX--p3S-L2Mjh0MZLGgCzT*c7xm<)V#y- z3yS?a9sf71bNHW@Xz@SJ!xW4`Y>*fhH-Pkl%mA51v>TxIi#G3YJcMF5D4p$e{9n{+ z^FPkh6a|CCu-Feuiy$*VW)WpS)NYV_3!8U1{z0*Sr{n+HW%mD*!_C3|hP%PT6f6dk z!{P>z86dMjW)gG*)P9ZT9geq9><0OLyW{`dGAmTOVd3Cm3YKf$4zCkIeurU@Ss*j< z+7Gpxxp{}*uwyWnns+ArO_!|@D?-JmqL!|{JXy){Z+gZlMPypL%f2*-Jv z{(*|Y)q(V2GYe`5$S$z`P`g3ysYPp3f$NrjCM-5(c2Q8ptk?oiME5yuZM-3=hU zAT!X-h1vzO6J$So^A5*3=xSPaIsUJhX8S+E&kP=>F!STRO_wBvm~$isnlXSdhz$~h z$-`)nUXU3ev(U|l+6l5d9HUJID&yBX{7+ATmhrH(1){x7pC(=HT=LB0y}A7)UP8)AS^=9*`Lzvp{CT%!kq-J3)5yHScf)ByT?WW^if zV!|8eX^Mgqe9c%vaSpN<8H2>Ya%k#7X5$(!Tt{e|LXt$|6>oq zKji=a2jLI=|NlQ=hu{Ou|Nnz<1LOby3=ClWkAa~cg#R!w*n{v71_t>L3=I4r{D6Uh a9fS`sFffB~17iat17ib}cK|F4vKj!X^7qaF diff --git a/src/assets/img/common/logo.png b/src/assets/img/common/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..6641c8273c22557208827ac4c1e8c60dd6314920 GIT binary patch literal 11341 zcmeAS@N?(olHy`uVBq!ia0y~yU}ykg4mJh`hQoG=rx_R&7(87ZLn`LHom)O9CcN_d z{_SVyZZqEOdMkEn=vE!>+dDYI3m9)dV3|Eb?1zLCXC*J^9u>uwkR;|z2O$p*0Vht= zg;o;M$s9WpdGvNDdWY%nzVvP8+bdtMnvp`N&7xe6U%uL%<+W=kzOE z&$#J&MX3iCTyH)ecJ#+NhbDQ+Sv@-svmKxNez~1thE#~`&y|d+>^iZ>-d80^e%iNv z|AK8Rp8c_T^|JA~;{k@t4a?hhetntvZ_SH@o%3`yt=wE%-?e?c$EOpnt1F`Gr=-i| z@0ld z{JOxH<@cmD6)zP2fBfXTXWc73zenNH+b=yjeBOiM)n-R-rh7IWjPt*$bT8_N+VyA4 z*=zHUUP`n${VSxATdDD;c>KZ73#@ti<)4|KfAQ?{Ypb34M)&2cV>JTi?4Igwzl=|S z^GrYAf}hG7A&E--+jQ-}FFjD&YAc_gXma4|jhI3g!5r3Uj8Uxb?w)>Yn|?W0a>vqF zkFGR}T(^{c!QM*@tTr-#og?YSOp%zf5vYm${UsiKI}?7Pr91rN^Sg>CrbWlQod3>|C;jxSbEesmCa0Y4x0g%}z9v@} zi}SLtXkXf`al@36nUfB~!xzLdFCqbE7XRWNP}%Y#5;-s7Jyh)+ElSmf{M>~pfX>gTP0D)|+E46c{A_U8*V z70j#+9S-`Z#tJX3P`g|ZD8z6gfvIghPnfHx&iMr*yFzb%6<`0z zv|82e^_|&&Z8@=4jpxBpDQm4FixU}m(k<%aC#7yXc_V2HTf)R2j4}K| zjumB7;`f)!mp{`!#LCn*|ILF#4|$^5F4tH_Kby7s`sXzN)FTSt)-81okEmf;c5lZC zMQ*c_Pgmb2?>UsIn8cQlHDSHe&4-Vk3cfot&Hv~Le|ss81jQ7F>W-JD(;lypfA{d* zB;|zve_56pGPC6Wk)MA2s|yeID9Q+;k2y1H!d1{*?6bM z){S=>W4rMe{`4IxdGghhY+cOypC|sd$hX_yzkiO_)g2Ap0-nWg6LzJ>x9I1Z@7VS< z{qn+qRNqw|CoXA*h-LnDu$AIC5W`^Rc%mhxG283vwV<6b{`btMJAEcdSBs;@JB zW~tq(UwP{UYs^N2Ix#cV&nGhy-%MlNX|%A@M*kgO@%1DhkxVyc#t7~PhCfHn%PqgU z#?57=^w~@1p-HE^_~xDa$u)~TV%7`(okhuM8>1T=4j#;CxKh#RvZ8gPw*TXlM(^K? z?u6Pje$+KF5pY;NZ)0%h1kSmNa$FLdyrTnsczL<>c$QYCnjE-1Gw7}9)4!Ky$+(B| zCo!(F6|A$E^K|RlTh4VWBkKc2#Z=>qVXr{F) z({)lzeldzQ@G&f!GWX(9_cFf^dZ7=iY-U)AtUj_iRqxG)$|Z5m;V}okt!}#7;Z7I(jRI zFY_f;Hnq<}U$f@5)VSWL+v~E?_kszZgj94?m4UC)l-=r)g&Mlt2J#;UCQ#(qzlF~W2 zM1!i;qP@kgPT)K@jdRwom-_RA-^4jL#m_o_k!S6_a(uvTm6UOaZ0aq6dMRf|?XJ@x2}RpimVjSOs;)yp^UY}ub}+~y}0 zrQEQJds}1eMXy~-VwzL`E($v4&Yh$=qjYlGY=cQh@0e?{T)DJ4GobV$_tneG&3`^q z4|e5jW#_qHVte!Vwf~o7t$s?MQ*Bav_mJmkXH9maV*It&g|j0}6y6B7F!;z$TDsW# zsDBA_;~ziEJwNp)N1>tY$%B<`Z5=AH*|u-iiJ659y4G9$ zKkLtDIibnY&XtPb>Y)jWOZ$zwB-8m0hGHErvZ@T=zCn|v+isM*9!`oFzt6}Mn_ zQhmt0jk-UqqjpZ5Iz4FSu4RfJCrna4^=yk$b=RB{Ugy5;Pq?jZKWwf%v{dV2n5e8b z`}L)N9ym^#7O32@>I+NCYc7l3+c!?yVa&oWmvHx9%4-$@-UIhkex?*YTlM7Tg0j2| zQ>tG?t*tUo^7L&^?P{8?*ST(yP0eyHUgvukN?+|;5qpE}iB`!w3H5ugSS<8fa=Z*@ zuX#0d`Gd+2r*p&&U4jinnObc&Nkt_QajRzrna#PU-uKaK! zTVb;z&BUy7&ia-43Jph?E-^lGykU4u+w1DJ*FR759m#FGuHw>|l_9p!w5{o&zqJ0w zH4&;SwlBto({R&!wN1-`McXvyrKTq?xof^SF>7}DiJF5KQZ60)9CInJ&nbMy z{Olk9>go?o?cWn)8#Vh}h)2ln7j033+z%X74kX;1Y1{6!bdj&v0(GV2sE(b?+(r^2 z+a4rztv=4ZCg-a8!yStv^|_0~Z|ZY0x7_{pKRjx?lY`H?&02o1la5WaYEIwnY!vT) zGCTfav2A6n^;x66u_gis_8i?ddjTVR@ScqUjV*U))vVbufn!qVO`AItd|v7Adf0St z%LzweBh|Q|vM6z5yX6vc=g;p+oMIba)WW@0IC%!Yj)(h%`Oo*OU2)UgrvHDtJ5$9^ zuimArHxz7(iI({gyM|TbWMQoJR{=eNZ4#WbjDIkga3&wm(Nx#hX==O7%d%lp@;%cW#oDuQj57@)Q(!ADWl}^`U-C%qqSE;qS(uRXuJ;ay-O#l>fF^pE30>yYCC0&u^2azMT1;AzZj`5{KET{}~K@ zDK}zPY>N{J7PVbGiQ`l9(x=y*oiCj?^>y0X&B)6V5TT%Y{;AfQHxE9?I@+0qPC7a( z*RGUz6061j`SaI#7gVg`aGM+Mzc#SA)=`P$_VG&Jg-m7L&+w$)Def z&U>n#x?V}#)5x$(EWpA-PNn!C*S-4hdUgUIY}3x(+Op1Zm4?jYO;`8aHOflos`#;$ zNp#}zucnMrn-bbD$K3Awv)<}L;^&wHAO7;#+1PKmoOphH@N<_75i+-y9b4riqZ<91 zy>8Po|EtZqr++-i=o3BP^Wj@i=$XSW=hTI7`Ov{?p8Ig=-oS0XVp$VS4{twwIrZX+ zv%3sd1zSMCqH|Akra-|wVt{tC0?@2>j2(x!Ct(+$}jKd0#( zKIXS?O=eA{&G}>Z4E~DtPg-i6@`C5)GM0@zv6G@oW6x}kmz~J^g46t(^@`teCySD; zll81FNGslyOo^|ZwrN?nUE-@lTVwopO-}W_VSMtnacW%nstwmZY8+{{d3msYT~Fcu zBC)gPeyiLkSWR$>jkrRk< zgxK!s?l)qKS}$BujVw4T=A^T8LwV4>*`Ll!zvA<}ZILR~raMEU;9fyn_wAF*N@FBE zK1AL=;whH>?&$5$ft5*oIXquR4RBr84U-jWK z^D?g+?nZlzQns#JA-3v*wBlXaq}f91az@1N@#eIEH=Ui{WRof66N zP0jLo-}4>+|J22;P)yEWp8qf=@t&8X$o35-Geu4doV5xSFx!_L^5%C%!L5I4a#K9L z#8Q{H>s(Yk_E{+`?UPj0t}k}0c5SfYI~(%r4TbCY&S&7)Ub2hVZp{l6$z$8^Z{nR3RKhOEYv_oCigzuac%8mo8wJwb8=?s6ns6;UTG4)Q2$=igKWKx3ev7k@sdx%4_U}n`04&w zw8PDI%D%*3&!#``%Gt(S;1kF*U-IEqYxNtqR=s53wBhyc8(Xc8{XKQ8pG~FU+lhq7 zH@o_dFAEd(Ug~@#_s0B`*WXXsRKLuMyDI|Y<2E-{5`ap&F1ZYwsgem1W?b!!rHtm2%h zhWpk{3AOoHU(&i@|KhUsGkC4lD_-2Z80CF?+VSU|rXlMNB|HDQ_m1=4mYwb2%i4by z**Lrl*|s!x1Iq$2Td4_4P6dg&ZQk?8qpf(d>$;QEcP@I85F)dG_KfxR8vYM*-fX^l z^t#DK*>f+R^@#?ysdM$7l-+f02LA-TLtT7zyKKD5ES$F(Us;xZb#*1rXVFFdvd@BT z6Z4`k9#j{0+;>^hRhBKTYoIhTVQ__B9|$H!|U8 zMqhNY*><^e9~MtI>3^8<-)*zXTOZy_Z}M9geX~h{Ve9SCzqeD`#CxAs6fZlnb+KjG zYEJX7m&5l*tT@2>x2C#uj(g}FN5}8;cfK;!E7-&^d)Lm#ufG2Iy!ZEy{in|4mKR=e z+u)m-8(fxf+~WExsq1P@cg$v_&0f0sZu7%XKK`}7A9^<&<;>*%?8VUa_Gs=3tBB^z zJWG?K){|VfiD+%L+P71$Bj@YQUyJV~OYbvYb?()N8I|eU$FE&|T~WT$>q{f^o~_m@ z$u^SG_pfB%yObn)Np&8(&3R_F#u$ z-6Ib3@*C>MIMbRU)0wh6IHb;Re6>&K{wCjl2}ix`uASM~*LwLCN6^E>`wutfd{>d* z@t>i(-ta`c3ip}-?))={`|{mX7}%Fb)PDDSXY{x4abI}&N#oPZS+g=e-!$4&VVhrZ zQR<&==#;tE*K>bN(N`1`(fj7jNCJ-)q8c{j?cNe#EZX*8lmr{hhP-mbd*p z?Ifz4c6wdDpVmzO9rIcyZSUXs^@wv=~xiZ$Q}0KoA&ijc6YaH`Lz}w z|9m9MYx;wgiFw7gKmXlaS2d@IDS#_RiQ}+j-Q$0MbLvw%_?LFMJpRUc<@$WLjE*;Z z>+Sddzan_=hOpf)Tdm(Kex~^OPF4un#1K90f;>(_`XmA5MEGurg(1 z*m?u?BKejh0?A*`qk&1bll?qzb_i= z&Hfze43>QtvbSjJ|Cp_98+{E-iWr+uuJTq1U9x&^4MXYr6vkc3Jo{>d)7yQP^`*FG zZv7jwBdGM(f>)UvC#*klUyCoq<^`7@`%bIvy`P@{4*qkmqA%fw(D6$reFE3!?0?X^&>y3I&mG+7{sk!8^ zF|#=kWPj)6c&>S?J*=Ys&TR8~v$Q*5w#xa)bMkXdxDIg;^aw@*SHW zU%I+y!C|#-^`r%_%*$W#cnWpp{<{Bm`JqtTz&7r>w@F7^pC-=SeK_;i_oX{hjn1z= z#yw~4ruj|JKDxH7^9(w(iKErrW`3w+^T}k>e|4u>i%&4x_zPJ(tNkgO!GC{y|My$_ z%JcO$#f5roikFP$^EOgY?^kwTV_F_KC~BuZD9) z7&R^*W_@?>&Np72TT$wr{tI1s8LQ3xHJFJsjkC2e{x-4-W3zFMo9BFpX_1(=G!-p zmTz14WUp=FH#P3Jf?qg=8(w!NFONC;?_}J&o2Cb+&Ruvb&ss7>X6A$phVoeT_?P{k zww@FC{^OL)%}p_)+rI|;*`$2*jkRcge6Un{XQIvdeGhfCZ}Ht%QhWE%r1t*ZgTmL> zJzuuYz+UF0X{g6T;rV}3a!cOgw7KxJCNj4{J6(?8o^!EFRy;!%y=KRMO z(PE2|E!?k}RjyM%GkKccSHX!6)sHO{nF5vtUUmI{u1xN}@xjkkO8*-C3qG3qvc*mO zWt|?(FMt2e;p4K?o9E4M2`o8MW_PXlYPhmywnEzVDpoDAS-Q?jE%wFsurcAZk-@PR?zB^f5@*eh(Xemb)TZ_BqNH2yZ$=w`HLvRi?{6G*uAaR0sJ)64*w)}cfPTjKSfdQ6Gq5C6@1zSuD121%iMo6wUjkspw z`6fo};Q`*+I}d(#5!?QHefS&!UO9^c?sBq^x~KUSEYpcEy%ceEV)~jNrxa(+|6MVs zO=zCF^pb$7Kea;A?3CONe|J^*K1b`&z9kXzXWzZq#;K6uYwh~(zU4tx^;-#1w(iSx z{=M8f_s@e_Uvu^)u)Z&_;Y-#2WP3b{|M+UvzE@H@-A*U;LxWwVPb(W09DmLi?7IKb zjrz6_L9?>L=U>x5JSz&Fa=fhbz~?1}E+!1OkN;R}UA`%I(}B>~hi=9JiMyV!U%$rh znW~%6)>Ow=N29EHt~&2%Sb4hkyV_B!8CnM)_M9pG+_c??LC&af8)NyqC%bRE?aWcT zU!fgfwx{0W%Rce7PrpuI^W;~&R zpPf%JUu_s7vwvB@>dYte)Ljbw^y}+SX8qHO7rg$ib4P~lk-NDWAC3s#``jG+=7#Ob z+d>Ox9nM&0S-2-^N9C#Y**YOD#xtUl#RFr7vk$Jkoc&Ebm8Ut_AaDZf_P#)U!@qaG z?$0oedBvD)W@B~4TF&lB^i_u2iTYUpjZI#~fb5Gs9hm})8x^K;#7pl8z<@KbS zud1h>$tj(CMbGrhta%IUUjLkvpm2`;+}p?RwMzMxmp!cfw5L;{=ZVCQa{2#t|Lf{3 zLLY6KQTu1v6)%>MIZ-i+@e|W|qm_)x{SG+9MEp6-{_r1jP>nS26_*(83CsO)?SCdj!R2;ReoIl{CnrxkhPU>{aEC-PTsSvzwoU-Tjh)J#dqee zFK|3E>A7`Se!|t{gTcj*ejAObVZ6HT4S5?zqF}cND%pb)5I--bYtc9tGZS)TuC0kox4( zr#rbaOqDxF;`~M9NvY-O9k~-3{Fk5ZJ^#KU;mY0HUtQSp-#ogu!}sUDzkf74G-O~U&$ca=|?&bzcSGJXns*wLRiHW_?B()6VHc&5xki%%u4 zTmILn-k;5XJWrID<-!I1>yz(W=lu8>x6gFa!sN&=N5u9AGxvp&5Ea@|qDS}(lGqUboE-Fl0MomCdLE!;o<34dF@=!VQ+>94ZP1>Lu0C@oANaaJougm&*;{|U&zsH_%yty^O$lAcG@b8*fB4#` z{QN4ZfopcvRGB`UcmDaJe=6axZ}0sT5HG)Rndo-yvgZ{?Gx}x+vsRtX>y?&}k`U9- z-umc}KL6)se>KiakA5e=|6vR@p@_;Zz}q?#mR-2#bB*~qILZu zhx@g^e@xLjma}seTjT*JRI_RUE>Vf(r{a+X@(tcZ^1c@~q4>kLmkm$N^V-+Jbo z^U32)E3a2cRvFcwKK6OfrRMOcI>(+=10fU3H#>Tw*p8M=yc0693OF~<#e>a!R(49H+^3y0j+_s-F+J1%O|8;I^BKWtA`2an_Y5^S^)h{=w<9NecrxuN>JqY5gMm znvU~V!mn=o^DJ z@aJE;Gv<5wiVdea|_HsL~+ z<$a&ooilgczF2it?!6u+I+RYctR6@(z_`=Z#Of>L|-JanhdS@v*yRiO20|`p)jVC*`1h|BI59 z?{gJig{#@tbol#;Wmrh9xhVMLP{OPukK2FFE|3o0F7+=d`@<&V3Qv;*KX%+-5*Rx* zOV`;gmF>L9Nv{@#;H1~z%QwC~sl3NbD&vhn)us!73f-7&9%fAVtlauFd>zvYp*52G zBAhLvm+`#b_2a>5^NmmM#O;gxcK6IHTW;2@U|+EZFBAW5`L~r#@PcHMd)tq{6LlKH zqE~48h(3Jv_0Q{Nd39#9W>>0b?AvA)U3`L1x-VttzvIvj|w6$l=Rp8Vk3 zynx4+hum$~v-wq)J)iviXYR{IZ+7G~TrX>_{JYQdUb)KY&r>(2Efi>ae)6--oJXsE z?KdxInAE+kdXhcgw!rJ_vYjH+zis&2WxD6``F!E$-gi?alm4H7@Lw^(L-N`_mG^u8 zM(&F*yYT!MgZ5T|$CVblr@NnzI#!>0+W5G=Nlog;)~lCI9WxD?J zwVevhtosw5goH57F10oPEBDqEr}n5HE3)hU zDy5(H!K<>Phj(Vd|GImX=kxvtG=8MkLrc}n`qnyV`|2CaYj-cWj;WJh1&^AW|JS7MxIZfjj7@M9B4d5g|FjWCORjlgxh)9`@il z)z6D-TuT|OC(d1O)8E=P-%jpv=Z>>?R}0siE4;b-)=A#<7K=A#uNnN|^S@qnRpDo!Q`AaOVlO1+mo9tTgkm3HV8)ucjt~ZZn zESInn-(K{1(gtC+M>QE5x--{Z{&2HS#h{o+F~ez>$NSjbKMJolpPSsV>1l1ebAHS3 zYbrmc``Xs1hfdhxe9~Vn)Tq|(VW4)v)zS|3o!ONwyKNHAtAvZJj)_`PkhklI_b1V+ z&|c@8{#=2bIu36a@Ja1l=bk*N`*A1xwF?j5Jgs^C^Y5NzJMA5q8Ru-BQ-9m+Sp0MC z<9g4on0T7(*)x58Y3m7}XPFA&SKaJl=PW#SR`}bW3yyi#bC#u7&Q?q-{l7`MIa)69 z#iP(Y-j{dm4Vd_Cllr8))m9HH7wLq_+_$<^nc%9<|Kn-uwxz}2BKk~!YNbb6iK}X9O|cZdWU`d zC;#RV^EA8Sw$8SYliyr5V>We_N3)f%NXMI(6ms^bSiaigC+i{F$+xUB_6v)YO7<)r zn*-copH}|UsNZDc^ebT3G`oE>7M!~NS+ue)c<~gDk2@ZJs@S2`xM_|^7mtM0+;-zH z5>kzgES(2Uu2sm@ny}wh-1E-hi|a~1QO~fLPk#gZ*7SUqk$dBPHYWXs1A{92x%bbT zX9{(?^M7t<{r@2C_KK^|r^>$IoLu$NElz~fV4j|7>emdP?_Yge`oi)KiOHNSO5EkL z=k7ZNsmrm4_D;`xV$Lp9^Lc0CMweHS_mkRQcfQd2nOb=B)0c_g*>@k7nWN!g!|>WV zyFE?AZxY8L2Oc+`nUnc;e-wB-^V#zi83`vFeedp3&-iqCA|%uTK}0J_*^S=bXEM+x592GS1#?)tW{k8OYq0i&j%mh_~NeGvZA! zRNZttXI`Qfbo851({uylG@pQLA2ugGy*`CaGc{dYOUP(m=J#KTVOGwMZq5C8FX@x* z=JH8*e+TEhvGH?ikNWe@VDb8UhpsubcAm5;Y0E6h)P2}eaOUrFAB`0o7bZJ8Ke@Pt zXSH0dsJ4?wddbJc{+Y^6m-(MpOC_5vy`J-Ml}AJ3asI53zF@O$E!PZ|#~zY7zdp#; zPa~39FY4@mf3eD!&g_+;xt&g!D;?;{gx>{fUf&B-U^Z+lvgYUQ8lui2bs`Snlt#f-7i!;e73nb@@N@ zgmb@HsxJRO!?!d!M0Ur5`P*HX|9p07ygyTG)5aLpgqc3;-aKeDEwp>>Xcn7wW_PgQ mZdF0}@>|48T&L(C^&7vLFSk0Ypvl0%z~JfX=d#Wzp$P!D;Um8Q literal 0 HcmV?d00001 diff --git a/src/enum/animate.ts b/src/enum/animate.ts new file mode 100644 index 00000000..04f6ab90 --- /dev/null +++ b/src/enum/animate.ts @@ -0,0 +1,9 @@ +/** 动画类型 */ +export enum EnumAnimate { + 'zoom-fade' = '渐变', + 'zoom-out' = '闪现', + 'fade-slide' = '滑动', + 'fade' = '消退', + 'fade-bottom' = '底部消退', + 'fade-scale' = '缩放消退' +} diff --git a/src/enum/common.ts b/src/enum/common.ts index 0eaaff0b..f4d81362 100644 --- a/src/enum/common.ts +++ b/src/enum/common.ts @@ -1,4 +1,4 @@ -/** 请求头的content-type类型 */ +/** http请求头的content-type类型 */ export enum ContentType { json = 'application/json', formUrlencoded = 'application/x-www-form-urlencoded', diff --git a/src/enum/index.ts b/src/enum/index.ts index 6e4371f6..99dd268d 100644 --- a/src/enum/index.ts +++ b/src/enum/index.ts @@ -1 +1,3 @@ export { ContentType } from './common'; +export { EnumAnimate } from './animate'; +export { EnumNavMode, EnumNavTheme } from './theme'; diff --git a/src/enum/theme.ts b/src/enum/theme.ts new file mode 100644 index 00000000..664dd012 --- /dev/null +++ b/src/enum/theme.ts @@ -0,0 +1,13 @@ +/** 导航模式 */ +export enum EnumNavMode { + 'vertical' = '左侧菜单模式', + 'horizontal' = '顶部菜单模式', + 'horizontal-mix' = '顶部菜单混合模式' +} + +/** 导航风格 */ +export enum EnumNavTheme { + 'dark' = '暗色侧边栏', + 'light' = '白色侧边栏', + 'header-dark' = '暗色的侧边栏和顶栏' +} diff --git a/src/interface/app.ts b/src/interface/app.ts index 5c0ad0a4..3190ac88 100644 --- a/src/interface/app.ts +++ b/src/interface/app.ts @@ -1,3 +1,5 @@ +import { EnumAnimate, EnumNavMode, EnumNavTheme } from '@/enum'; + export interface ThemeSettings { /** 深色模式 */ darkMode: boolean; @@ -7,6 +9,18 @@ export interface ThemeSettings { themeColorList: string[]; /** 其他颜色 */ otherColor: OtherColor; + /** 导航样式 */ + navStyle: NavStyle; + /** 头部样式 */ + headerStyle: HeaderStyle; + /** 菜单样式 */ + menuStyle: MenuStyle; + /** 多标签样式 */ + multiTabStyle: MultiTabStyle; + /** 面包屑样式 */ + crumbsStyle: CrumbsStyle; + /** 页面样式 */ + pageStyle: PageStyle; } interface OtherColor { @@ -19,3 +33,62 @@ interface OtherColor { /** 错误 */ error: string; } + +type NavMode = keyof typeof EnumNavMode; +type NavTheme = keyof typeof EnumNavTheme; + +interface NavStyle { + /** 导航模式 */ + mode: NavMode; + /** 导航主题 */ + theme: NavTheme; +} + +interface HeaderStyle { + /** 顶部高度 */ + height: number; + /** 背景颜色 */ + bgColor: string; + /** 固定顶部 */ + fixed: boolean; + /** 显示重载按钮 */ + showReload: boolean; +} + +interface MenuStyle { + /** 折叠菜单 */ + collapsed: boolean; + /** 菜单宽度 */ + width: number; + /** 菜单折叠时的宽度 */ + collapsedWidth: number; + /** 固定菜单 */ + fixed: boolean; + /** 分割菜单 */ + splitMenu: boolean; +} + +interface MultiTabStyle { + /** 多标签可见 */ + visible: boolean; + /** 背景颜色 */ + bgColor: string; + /** 固定标签页 */ + fixed: boolean; +} + +interface CrumbsStyle { + /** 面包屑可见 */ + visible: boolean; + /** 显示图标 */ + showIcon: boolean; +} + +type AnimateType = keyof typeof EnumAnimate; + +interface PageStyle { + /** 页面是否开启动画 */ + animate: boolean; + /** 动画类型 */ + animateType: AnimateType; +} diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue b/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue new file mode 100644 index 00000000..ccec0d10 --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalHeader/components/HeaderItemContainer.vue @@ -0,0 +1,8 @@ + + + + diff --git a/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts new file mode 100644 index 00000000..c4911d8e --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalHeader/components/index.ts @@ -0,0 +1,3 @@ +import HeaderItemContainer from './HeaderItemContainer.vue'; + +export { HeaderItemContainer }; diff --git a/src/layouts/BasicLayout/components/GlobalHeader/index.vue b/src/layouts/BasicLayout/components/GlobalHeader/index.vue new file mode 100644 index 00000000..abd51f5a --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalHeader/index.vue @@ -0,0 +1,20 @@ + + + + diff --git a/src/layouts/BasicLayout/components/GlobalLogo/index.vue b/src/layouts/BasicLayout/components/GlobalLogo/index.vue new file mode 100644 index 00000000..157b6c60 --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalLogo/index.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/BasicLayout/components/GlobalMenu/index.vue b/src/layouts/BasicLayout/components/GlobalMenu/index.vue new file mode 100644 index 00000000..c5c27b65 --- /dev/null +++ b/src/layouts/BasicLayout/components/GlobalMenu/index.vue @@ -0,0 +1,6 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue new file mode 100644 index 00000000..2becea9e --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/DarkMode.vue @@ -0,0 +1,25 @@ + + + + diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue b/src/layouts/BasicLayout/components/SettingDrawer/components/ThemeStyle.vue new file mode 100644 index 00000000..e69de29b diff --git a/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts new file mode 100644 index 00000000..e49edc04 --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/components/index.ts @@ -0,0 +1,3 @@ +import DarkMode from './DarkMode.vue'; + +export { DarkMode }; diff --git a/src/layouts/BasicLayout/components/SettingDrawer/index.vue b/src/layouts/BasicLayout/components/SettingDrawer/index.vue new file mode 100644 index 00000000..012c3467 --- /dev/null +++ b/src/layouts/BasicLayout/components/SettingDrawer/index.vue @@ -0,0 +1,16 @@ + + + + diff --git a/src/layouts/BasicLayout/components/index.ts b/src/layouts/BasicLayout/components/index.ts new file mode 100644 index 00000000..a4180a4c --- /dev/null +++ b/src/layouts/BasicLayout/components/index.ts @@ -0,0 +1,6 @@ +import GlobalHeader from './GlobalHeader/index.vue'; +import GlobalLogo from './GlobalLogo/index.vue'; +import GlobalMenu from './GlobalMenu/index.vue'; +import SettingDrawer from './SettingDrawer/index.vue'; + +export { GlobalHeader, GlobalLogo, GlobalMenu, SettingDrawer }; diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue index b480b910..edc58f96 100644 --- a/src/layouts/BasicLayout/index.vue +++ b/src/layouts/BasicLayout/index.vue @@ -1,15 +1,67 @@ - - + + diff --git a/src/main.ts b/src/main.ts index ab02d46d..23e10a9e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,30 +3,29 @@ import App from './App.vue'; import AppProvider from './AppProvider.vue'; import { setupStore } from './store'; import { router, setupRouter } from './router'; -import { setupSmoothScroll, setupNaive } from './plugins'; +import { setupSmoothScroll, setupWindicssDarkMode } from './plugins'; import 'virtual:windi.css'; import './styles/css/global.css'; async function setupApp() { - const naiveApp = createApp(AppProvider); + const appProvider = createApp(AppProvider); const app = createApp(App); - /** 注册naive UI组件 */ - setupNaive(app); - - /** 挂载全局状态 */ + // 挂载全局状态 setupStore(app); - // 优先挂载一下 naiveApp 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 - naiveApp.mount('#naiveApp', true); + // 优先挂载一下 appProvider 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 + appProvider.mount('#appProvider', true); // 挂载路由 - await setupRouter(app); + setupRouter(app); // 路由准备就绪后挂载APP实例 await router.isReady(); app.mount('#app', true); + + setupWindicssDarkMode(); } setupSmoothScroll(); diff --git a/src/plugins/dark-mode.ts b/src/plugins/dark-mode.ts new file mode 100644 index 00000000..ff35c7fd --- /dev/null +++ b/src/plugins/dark-mode.ts @@ -0,0 +1,31 @@ +import { watch } from 'vue'; +import { useAppStore } from '@/store'; + +export default function setupWindicssDarkMode() { + const app = useAppStore(); + + const DARK_CLASS = 'dark'; + function getHtmlElement() { + return document.querySelector('html')!; + } + + function addDarkClass() { + const html = getHtmlElement(); + html.classList.add(DARK_CLASS); + } + function removeDarkClass() { + const html = getHtmlElement(); + html.classList.remove(DARK_CLASS); + } + + watch( + () => app.themeSettings.darkMode, + newValue => { + if (newValue) { + addDarkClass(); + } else { + removeDarkClass(); + } + } + ); +} diff --git a/src/plugins/index.ts b/src/plugins/index.ts index e0557b2e..ba9de06c 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,4 +1,5 @@ import setupSmoothScroll from './smooth-scroll'; import setupNaive from './naive'; +import setupWindicssDarkMode from './dark-mode'; -export { setupSmoothScroll, setupNaive }; +export { setupSmoothScroll, setupNaive, setupWindicssDarkMode }; diff --git a/src/settings/theme/index.ts b/src/settings/theme/index.ts index 5523b0c2..001694ca 100644 --- a/src/settings/theme/index.ts +++ b/src/settings/theme/index.ts @@ -23,18 +23,44 @@ const themeColorList = [ ]; const themeSettings: ThemeSettings = { - /** 深色主题 */ darkMode: false, - /** 系统主题色 */ themeColor: themeColorList[0], - /** 系统内置主题色列表 */ themeColorList, - /** 其他颜色 */ otherColor: { info: '#2080f0', success: '#67C23A', warning: '#E6A23C', error: '#F56C6C' + }, + navStyle: { + mode: 'vertical', + theme: 'light' + }, + headerStyle: { + height: 64, + bgColor: '#fff', + fixed: true, + showReload: true + }, + menuStyle: { + collapsed: false, + width: 200, + collapsedWidth: 64, + fixed: true, + splitMenu: false + }, + multiTabStyle: { + visible: true, + bgColor: '#fff', + fixed: true + }, + crumbsStyle: { + visible: true, + showIcon: false + }, + pageStyle: { + animate: true, + animateType: 'zoom-fade' } }; diff --git a/src/store/modules/app/index.ts b/src/store/modules/app/index.ts index b91e7e91..cab27621 100644 --- a/src/store/modules/app/index.ts +++ b/src/store/modules/app/index.ts @@ -1,22 +1,28 @@ import { defineStore } from 'pinia'; import type { GlobalThemeOverrides } from 'naive-ui'; -import { store } from '../../index'; import { themeSettings } from '@/settings'; import type { ThemeSettings } from '@/interface'; +import { store } from '../../index'; import { getHoverAndPressedColor } from './helpers'; interface AppState { /** 主题配置 */ themeSettings: ThemeSettings; - /** 侧边栏折叠 */ - asideCollapse: boolean; + /** 主题配置抽屉 */ + settingDrawer: SettingDrawer; +} + +interface SettingDrawer { + visible: boolean; } const appStore = defineStore({ id: 'app-store', state: (): AppState => ({ themeSettings, - asideCollapse: false + settingDrawer: { + visible: false + } }), getters: { /** naive UI主题配置 */ @@ -59,11 +65,21 @@ const appStore = defineStore({ } }, actions: { - handleAsideCollapse(collapse: boolean) { - this.asideCollapse = collapse; + /** 折叠/展开菜单 */ + handleMenuCollapse(collapsed: boolean) { + this.themeSettings.menuStyle.collapsed = collapsed; }, - toggleAside() { - this.asideCollapse = !this.asideCollapse; + /** 切换折叠/展开菜单 */ + toggleMenu() { + this.themeSettings.menuStyle.collapsed = !this.themeSettings.menuStyle.collapsed; + }, + /** 打开配置抽屉 */ + openSettingDrawer() { + this.settingDrawer.visible = true; + }, + /** 关闭配置抽屉 */ + closeSettingDrawer() { + this.settingDrawer.visible = false; } } }); diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 5a5dd101..ae2718e8 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -25,7 +25,7 @@ +