From 035fa114c9fd638cf467e6a73a8e4c558f503deb Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Tue, 4 Jan 2022 13:53:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=88=9D=E5=A7=8B=E5=8C=96?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C=EF=BC=9A=E5=BA=94=E7=94=A8?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 - .eslintrc.js | 1 + .gitignore | 2 ++ .prettierrc.js | 12 ++++++++++-- index.html | 18 ++++++++++++++++-- public/favicon.ico | Bin 4286 -> 16958 bytes src/App.vue | 15 +++------------ src/AppProvider.vue | 13 +++++++++++++ src/main.ts | 19 +++++++++++++------ src/plugins/index.ts | 3 ++- src/plugins/logo.ts | 28 ++++++++++++++++++++++++++++ src/store/modules/theme/index.ts | 21 +++++++++++++-------- vite.config.ts | 4 ++++ windi.config.ts | 3 ++- 14 files changed, 107 insertions(+), 33 deletions(-) create mode 100644 src/AppProvider.vue create mode 100644 src/plugins/logo.ts diff --git a/.eslintignore b/.eslintignore index 105e5d69..1f2dc32f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -11,5 +11,4 @@ lib /docs .vscode .local -index.html !.env-config.ts diff --git a/.eslintrc.js b/.eslintrc.js index e813bffc..0569d385 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -135,6 +135,7 @@ module.exports = { 'no-shadow': 0, 'no-unused-vars': 'off', 'no-use-before-define': 'off', + 'vue/comment-directive': 0, 'vue/multi-word-component-names': 0, '@typescript-eslint/ban-types': 'off', '@typescript-eslint/ban-ts-ignore': 'off', diff --git a/.gitignore b/.gitignore index b4300fae..c16790f4 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ dist-ssr *.njsproj *.sln *.sw? + +stats.html diff --git a/.prettierrc.js b/.prettierrc.js index a1267c68..4b3ba654 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -15,5 +15,13 @@ module.exports = { requireConfig: false, // Require a 'prettierconfig' to format prettier stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验 trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） - tslintIntegration: false // 不让prettier使用tslint的代码格式进行校验 -} + tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验 + overrides: [ + { + files: '*.html', + options: { + parser: 'html' + } + } + ] +}; diff --git a/index.html b/index.html index 11603f87..3f9903e8 100644 --- a/index.html +++ b/index.html @@ -4,10 +4,24 @@ - Vite App + <%= appName %> -
+ +
+
+ +
+
+
+
+
+
+
+
+

<%= appTitle %>

+
+
diff --git a/public/favicon.ico b/public/favicon.ico index df36fcfb72584e00488330b560ebcf34a41c64c2..2b47ca6e980c026368b61d73b28cc993f659c382 100644 GIT binary patch literal 16958 zcmZQzU}RuqaBu+83Je-f3=Con3=A3!3=9qo3=9nn5OD?&011HTQ9K#~qai?12>jns z%<%v6O2+>y!<7Cn_KNzy&@Jiz@<8MN`;GKa|NrMXK=54q z|NrOMy#Bw~Bl`cFJBs2|H?4K|8wnM!TpXL26Jtn{$K1F{r~iI*8f{`khKmv_W$*X4F7jm zvi)D^UjKiN&By>vN1XAg;c znEydE*bLiu{}*}G{$H0M`d^)a;s5O&2m`3h`hR&f!~f@(82|4m;rPEMO7#EoAg%w) z0?hxf2(kaaz}fNtVlT)4D?)7kFAvoFzd4it|NsA>vJ31Aa9pkkw)j8S_63SxKw&V? z{@nj{ank=+1cBAUi2oas8UF97;rPG6dFKB)Hkkegg#jpB=Gy-JKi_Hh|0Ui*|JTL| z{omKb_y7pX>jMVD(bZh;;z-7h%`Oatl&vSVGf1drD z|MTqM|DWgZ;r~2`_y6bGzxzMW{>A_K&RhR4@v#BN>y8qJ{|nt2{x9*({6EL`FGgCP zWBcp>5}%y^W(*Af_tv1e_y1CVhX1R=75~q*-;YuTfc*|F4?t{iTCn^4f4`v8pV23Q!n0?EMc4TV#81 zu|e*hYkTAW>L_hcIzllNiSvI;F2nzuJ3ws=t^W&Ly8h3#fAoJYC=9WbIk@b?CO+5h z@BfAFS^wudGyFf;%J4srf#LsRuhjo@Y=2^;0g(PVHlO}4@`wlLxh<&W`TtLk8U7bC zF#KN~sqlY+^X&g~ZNGraP>?=+c#iF#|4V(-K=}{J%U~who;h|5|JTIu|6lBt`+uIp zHL$<&nMbS~C>_qReer*Ju+{&?-Vpm%hB5r#kRtqlp2KdeX#k{WuI;`5OMRXGCo?eo z-&YUThfMrm6T|R-QyS0z#oj6Z=Q&*ZKNnP<;EAU>w!i-`@k#x^&<)ub25=q+mCq|f z4gb$~TJwLd?RTQW6XbueJMBUF`~UyBc7MR_vUv_5{onu3wF9-!{`{Y7`|STh_u~J1 z>sbG9NCDgZ|Mqr<|NTm!a=`un92-!%iJ7OsY1aPY|E0bb|ARqcPz~0LO#I)R1*%sV z|E~&H{lCb)@&7!BtB`yO3I`B|<}I*Ub~pd8iqHntr7$x<<>CKxb6Nf`@ecey*Zwlr zxB&SR8H4={&J!R0&v&};e}T*D|BKw){x9;({J+#U?*DwJ@c)b4BmXb;N&dgsEA9V^ z5R3o2%2?6cX5c#QP#Y__9+_kF2Wvh6xf@g`E)TQ?*B?0AcmMZPGyFd{pZWjlD3$+< zz0>|La9RF;zT@rxbM4>%pKJH=|2+Hi{}*`#{Qv!x@&EP$u=l}Xcc6vy|00iq|8s0# z6O40^Tjtt*`9I(B*#E_z4gZ$~y8K@mF8P0VCFlRUdl>(pn+GRkgi_?n#S64ym>D?6^|Ca|T{$Ckt|9?fO%l{Q2^8b(b z!^{5vYoZwbZ_3~X*N<~-KZENr{;!J@{r~J7_Q(JEj(h(v^Yi<^F@@)UJu^6bQ4FMz^M7{*!~akQhW|^v9skdJGZdk=RQIDpDo5PtW6f%BsO%LDEIZ!h2m>%F-Z zul=Agg8v_1GX7uWk@kO%^+()(2lp?J|6l6s@c-r(CRlla%kcl#)-wFRvy^}m9FvHbDnj}HeCN4Dx9`AZBsg9C`ajR% z?f-d>SN<<>+5LZ^`|SUVJZk?L&~Apmc+d=h*xLx67uRFo5b=m^q}-|JNlj{NIwz^MA2d%Kv%xS0Qdk zYSW_>A^WlT6WPx& zHYmN$wLAZRRk+UoIo2p?{{P;325?!jBGmZ*JjdPt=i2_kU00&n2g(DBJ@fug(Pltz z_mSd%nA-mvQyBj5C}szbe=cyD`+u(e6TInf9-4cw^1*rK+5e?}Uf{CoKr_rb25_D1 z$^dGg+y0+xe;yL%gva_x}I#K#%{6Jm6^`Jl4D^4b(T?3CZg?;vFi;~4JK#DRIURt~$UKL; z|5rz;!^YeGFLG!2ztqR)|2%sf<8yZR|1b86|G%S%6McM&E*>P&lK(qP8UDYy!Tf)r zTR+zH3>p^!jSI~*1=TeS|Ca@V+DZ!l=h|IC$@`$RGS}|T{{>EN;Cf+IIEgNyjq?BR zo-q7>`rm~2jJbz6{|DuFMA znrPYoX$%bie}98J>i@bphW}f01pY5@-is2aApb+k#s}ar?xlWUJ^xpQGyLC>#Q1-i zpZ5R7o~i#Ad&T`<9ij67crWAstyy3-15Ny2;tQ&y4FAuy1I>qm#<@XrNPqv&v)}Q5 zUA!D}-3uB&1dk&w@@T;HKe$i%_5bp~K+xFyK>Ldr`~PpvWB7k%70dqxu2V7kNONrd z{a@r>`ag$(;s3!FxN+b-urk!+|6IFI7<~Xx9su6_`kb~`~O1MjTm}B{-5uB`2U7vK~NtY zrf0Cypmyc|nPv?Cm-u8s`Xy*>w7GWQ|1S@W{J+=}?uGw*>pM{%}2mnE@{UR)t&qpKJdXYkpqnR{VdS1H=FAgIVC4U|v+uLzd>Ki}yFR{t;Z=mWP0546IxK-V6C z+V&1u+V*ze{x1&m;@;^9TgVs_k@l6NM zJENB4pz#=twETZh6~q4-Ciu($RS{N0q5KE8fA%-AgXbGC>N0Tq=gI#SAsV1O0*icb z9{{xeg;4#!bnw^z;Ia=iW--syb^M?2*!zEpci8`pX*{5{ zQONH8zakX0=1%VaJjctJZ6#27>3IGB>L^*z`b1=XLxKH&Lo~zxommY3XMyTAXACEU z=CHx@8B2UX>+L{uqiAgGzNl9pG{z1hm%DGwVNSZ86Bd$QaainD2Px|E3Jl|EmXoy+@MYL1V+9 zb@MC3bpOw_yM`m~|NLL3Bf#LswMpBI*^y)$7+5e@!`v2!S zyu=(I1I^Jp?D)SvSr}9|4tmd!;Xv?uvaLCM|K~exM%gn0O80YY9{pbyVE=!D8pHpe zAIUI%@N4;hc_n0R>55?U|MMJ<{0EH*L+0^r{a@q}`~UWKrlHW*rzE7oW4^yWgXVLk z|1b3o0k6*ntc5U=OOl85kSn8$j#z7!U9tVED(tz<7ZF0mBal z2F3^M9~eF`Ffc!0{=@Kqf%*RjhX0HQ80`Q5V5tA!!1(|F9|rmV49x%k|6^eO$H4!i z{vQLwKL+~)_Wv0eSQzRVa4?yV$ zFj^iW{s2bvL-{ZoCXPnK%z@K(5Pb(=_Srz}e^3LVe?mk2{|{&kz~~QP-~9jo07ip0 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/App.vue b/src/App.vue index 9edec8f8..32af11c2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,10 @@ diff --git a/src/AppProvider.vue b/src/AppProvider.vue new file mode 100644 index 00000000..fbf4dd9c --- /dev/null +++ b/src/AppProvider.vue @@ -0,0 +1,13 @@ + + + + diff --git a/src/main.ts b/src/main.ts index 69e55df9..5a8af4fc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,22 +1,29 @@ import { createApp } from 'vue'; -import { setupAssets } from '@/plugins'; +import { setupAssets, setupInitSvgLogo } from '@/plugins'; import { setupRouter } from '@/router'; import { setupStore } from '@/store'; +import AppProvider from './AppProvider.vue'; import App from './App.vue'; async function setupApp() { - const app = createApp(App); + setupAssets(); - // 挂载全局状态 + // 挂载 appProvider 解决路由守卫，Axios中可使用，LoadingBar，Dialog，Message 等之类组件 + const appProvider = createApp(AppProvider); + setupStore(appProvider); + appProvider.mount('#appProvider'); + + // 初始化加载的svg logo + setupInitSvgLogo('#loadingLogo'); + + const app = createApp(App); setupStore(app); // 挂载路由 await setupRouter(app); - // 路由准备就绪后挂载APP实例 + // 路由准备就绪后挂载 App app.mount('#app'); } -setupAssets(); - setupApp(); diff --git a/src/plugins/index.ts b/src/plugins/index.ts index 4de580b2..fddc1b12 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,3 +1,4 @@ import setupAssets from './assets'; +import setupInitSvgLogo from './logo'; -export { setupAssets }; +export { setupAssets, setupInitSvgLogo }; diff --git a/src/plugins/logo.ts b/src/plugins/logo.ts new file mode 100644 index 00000000..6d982d66 --- /dev/null +++ b/src/plugins/logo.ts @@ -0,0 +1,28 @@ +/** 初始化加载效果的svg格式logo */ +export default function setupInitSvgLogo(id: string) { + const svgStr = ` + + + + + + +`; + const appEl = document.querySelector(id); + const div = document.createElement('div'); + div.innerHTML = svgStr; + appEl?.appendChild(div); +} diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts index 23884f08..6577a84c 100644 --- a/src/store/modules/theme/index.ts +++ b/src/store/modules/theme/index.ts @@ -25,8 +25,6 @@ interface ThemeStore { otherColor: ComputedRef; /** naiveUI的主题配置 */ naiveThemeOverrides: ComputedRef; - /** 添加css vars至html */ - addThemeCssVarsToRoot(): void; } type ThemeVarsKeys = keyof Exclude; @@ -64,23 +62,30 @@ export const useThemeStore = defineStore('theme-store', () => { }; }); - function addThemeCssVarsToRoot() { - const updatedThemeVars = { ...themeVars.value }; - Object.assign(updatedThemeVars, naiveThemeOverrides.value.common); + /** 添加css vars至html */ + function addThemeCssVarsToHtml() { + if (document.documentElement.style.cssText) return; + + const updatedThemeVars = { ...themeVars.value, ...naiveThemeOverrides.value.common }; const keys = Object.keys(updatedThemeVars) as ThemeVarsKeys[]; const style: string[] = []; keys.forEach(key => { style.push(`--${kebabCase(key)}: ${updatedThemeVars[key]}`); }); const styleStr = style.join(';'); - document.documentElement.style.cssText += styleStr; + document.documentElement.style.cssText = styleStr; } + function init() { + addThemeCssVarsToHtml(); + } + + init(); + const themeStore: ThemeStore = { themeColor, otherColor, - naiveThemeOverrides, - addThemeCssVarsToRoot + naiveThemeOverrides }; return themeStore; diff --git a/vite.config.ts b/vite.config.ts index 96439b9b..d23568b8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -28,6 +28,10 @@ export default defineConfig(configEnv => { host: '0.0.0.0', port: 3200, open: true + }, + build: { + brotliSize: false, + sourcemap: false } }; }); diff --git a/windi.config.ts b/windi.config.ts index 94f59d86..c5154233 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -39,7 +39,8 @@ export default defineConfig({ 'fixed-br': 'fixed-rb', 'fixed-center': 'fixed left-0 top-0 flex-center wh-full', 'nowrap-hidden': 'whitespace-nowrap overflow-hidden', - 'ellipsis-text': 'nowrap-hidden overflow-ellipsis' + 'ellipsis-text': 'nowrap-hidden overflow-ellipsis', + 'init-loading-spin': 'w-16px h-16px bg-primary rounded-8px animate-pulse' }, theme: { extend: {