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 df36fcfb..2b47ca6e 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ 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: {