chore: 格式化文件

.env.staging

@@ -0,0 +1 @@
+VITE_USE_MOCK = "staging"

.eslintignore

@@ -10,6 +10,6 @@ dist
 /public
 /docs
 .husky
-.local
 /bin
+*html
 Dockerfile

.eslintrc.js

@@ -1,30 +1,30 @@
 module.exports = {
-  root: true,
-  env: {
-    browser: true,
-        commonjs: true,
-        es6: true,
-        node: true
-  },
-  extends: ['standard', 'plugin:vue/essential', 'plugin:prettier/recommended'],
-  parserOptions: {
-    ecmaVersion: 2016,
-    // 对Babel解析器的包装使其与 ESLint 兼容。
-    parser: 'babel-eslint',
-    // 代码是 ECMAScript 模块
-    sourceType: 'module',
-  },
-  plugins: ['vue'],
-  rules: {
-    // 'prettier/prettier': 'error',
-    'no-unused-vars': 'off',
-    'vue/no-multiple-template-root': 'off',
-    camelcase: 0,
-    'vue/component-tags-order': [
-      'error',
-      {
-        order: ['template', 'script', 'style']
-      }
-    ]
-  },
+	root: true,
+	env: {
+		browser: true,
+		commonjs: true,
+		es6: true,
+		node: true,
+	},
+	extends: ['standard', 'plugin:vue/essential', 'plugin:prettier/recommended'],
+	parserOptions: {
+		ecmaVersion: 2016,
+		// 对Babel解析器的包装使其与 ESLint 兼容。
+		parser: 'babel-eslint',
+		// 代码是 ECMAScript 模块
+		sourceType: 'module',
+	},
+	plugins: ['vue'],
+	rules: {
+		// 'prettier/prettier': 'error',
+		'no-unused-vars': 'off',
+		'vue/no-multiple-template-root': 'off',
+		camelcase: 0,
+		'vue/component-tags-order': [
+			'error',
+			{
+				order: ['template', 'script', 'style'],
+			},
+		],
+	},
 }

build/vite/plugin/compress.js

@@ -1,32 +1,31 @@
 /**
  * 用于打包和输出gzip
- * https://github.com/anncwb/vite-plugin-compression/blob/main/README.zh_CN.md 
+ * https://github.com/anncwb/vite-plugin-compression/blob/main/README.zh_CN.md
  */
-import viteCompression from 'vite-plugin-compression';
+import viteCompression from 'vite-plugin-compression'
 
+export function configCompressPlugin(compress, deleteOriginFile) {
+	let options = {}
+	if (compress === 'gzip') {
+		options = {
+			ext: '.gz',
+			algorithm: 'gzip',
+		}
+	}
+	if (compress === 'brotli') {
+		options = {
+			ext: '.br',
+			algorithm: 'brotliCompress',
+		}
+	}
+	const plugin = [
+		viteCompression({
+			verbose: true,
+			threshold: 1500,
+			deleteOriginFile,
+			...options,
+		}),
+	]
 
-export function configCompressPlugin( compress, deleteOriginFile) {
-  let options = {}
-  if (compress == 'gzip') {
-    options = {
-      ext: '.gz',
-      algorithm: 'gzip',
-    }
-  }
-  if (compress == 'brotli') {
-    options = {
-      ext: '.br',
-      algorithm: 'brotliCompress',
-    }
-  }
-  const plugin = [
-    viteCompression({
-      verbose: true,
-      threshold: 1500,
-      deleteOriginFile,
-      ...options
-    })
-  ]
-
-  return plugin
-}
+	return plugin
+}

build/vite/plugin/index.js

@@ -11,16 +11,16 @@ import { configCompressPlugin } from './compress'
 
 // import viteESLint from '@ehutch79/vite-eslint'
 
-export function createVitePlugins () {
-  const vitePlugins = [vue()]
-  vitePlugins.push(configStylePlugin())
+export function createVitePlugins() {
+	const vitePlugins = [vue()]
+	vitePlugins.push(configStylePlugin())
 
-  vitePlugins.push(configThemePlugin())
+	vitePlugins.push(configThemePlugin())
 
-  vitePlugins.push(configSvgPlugin())
+	vitePlugins.push(configSvgPlugin())
 
-  vitePlugins.push(configCompressPlugin('gzip', true))
+	vitePlugins.push(configCompressPlugin('gzip', true))
 
-  // vitePlugins.push(viteESLint())
-  return vitePlugins
+	// vitePlugins.push(viteESLint())
+	return vitePlugins
 }

build/vite/plugin/style.js

@@ -4,26 +4,26 @@
  */
 import styleImport from 'vite-plugin-style-import'
 
-export function configStylePlugin(){
-  const options = {
-    libs: [{
-      libraryName: 'element-plus',
-      esModule: true,
-      ensureStyleFile: true,
-      resolveStyle: (name) => {
-        name = name.slice(3)
-        // 使用element scss样式
-        return `element-plus/packages/theme-chalk/src/${name}.scss`;
-        // 使用element css样式
-        // return `element-plus/lib/theme-chalk/${name}.css`;
-      },
-      resolveComponent: (name) => {
-        return `element-plus/lib/${name}`;
-      },
-    }]
-  }
-  const plugin = [
-    styleImport(options)
-  ]
-  return plugin
-}
+export function configStylePlugin() {
+	const options = {
+		libs: [
+			{
+				libraryName: 'element-plus',
+				esModule: true,
+				ensureStyleFile: true,
+				resolveStyle: (name) => {
+					name = name.slice(3)
+					// 使用element scss样式
+					return `element-plus/packages/theme-chalk/src/${name}.scss`
+					// 使用element css样式
+					// return `element-plus/lib/theme-chalk/${name}.css`;
+				},
+				resolveComponent: (name) => {
+					return `element-plus/lib/${name}`
+				},
+			},
+		],
+	}
+	const plugin = [styleImport(options)]
+	return plugin
+}

build/vite/plugin/svg.js

@@ -2,17 +2,17 @@
  * svg
  * https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
  */
-import viteSvgIcons from 'vite-plugin-svg-icons';
-import path from 'path';
+import viteSvgIcons from 'vite-plugin-svg-icons'
+import path from 'path'
 
 export function configSvgPlugin() {
-  const svgPlugin = viteSvgIcons({
-    // 指定需要缓存的图标文件夹
-    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-    // 压缩配置
-    // svgoOptions: false,
-    // 指定symbolId格式
-    symbolId: 'icon-[dir]-[name]',
-  })
-  return svgPlugin
-}
+	const svgPlugin = viteSvgIcons({
+		// 指定需要缓存的图标文件夹
+		iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+		// 压缩配置
+		// svgoOptions: false,
+		// 指定symbolId格式
+		symbolId: 'icon-[dir]-[name]',
+	})
+	return svgPlugin
+}

build/vite/plugin/theme.js

@@ -5,53 +5,51 @@
 
 import path from 'path'
 import themePreprocessorPlugin, {
-  getModulesScopeGenerater,
-} from "@zougt/vite-plugin-theme-preprocessor";
+	getModulesScopeGenerater,
+} from '@zougt/vite-plugin-theme-preprocessor'
 
 export function configThemePlugin() {
-  let options = {
-    scss: {
-      multipleScopeVars: [
-        {
-          scopeName: "variables-theme-day",
-          path: path.resolve("src/styles/variables-day.scss"),
-        },
-        {
-          scopeName: "variables-theme-dark",
-          path: path.resolve("src/styles/variables-dark.scss"),
-        },
-      ],
-      // 默认取 multipleScopeVars[0].scopeName
-      defaultScopeName: "",
-      // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
-      extract: false,
-      // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
-      outputDir: "",
-      // 会选取defaultScopeName对应的主题css文件在html添加link
-      // themeLinkTagId: "theme-link-tag",
-      // // "head"||"head-prepend" || "body" ||"body-prepend"
-      // themeLinkTagInjectTo: "head",
-      // 是否对抽取的css文件内对应scopeName的权重类名移除
-      removeCssScopeName: false,
-      // 可以自定义css文件名称的函数
-      customThemeCssFileName: (scopeName) => scopeName,
-    },
-    // less: {
-    //   multipleScopeVars: [
-    //     {
-    //       scopeName: "theme-default",
-    //       path: path.resolve("src/theme/default-vars.less"),
-    //     },
-    //     {
-    //       scopeName: "theme-mauve",
-    //       path: path.resolve("src/theme/mauve-vars.less"),
-    //     },
-    //   ],
-    // },
-  }
+	const options = {
+		scss: {
+			multipleScopeVars: [
+				{
+					scopeName: 'variables-theme-day',
+					path: path.resolve('src/styles/variables-day.scss'),
+				},
+				{
+					scopeName: 'variables-theme-dark',
+					path: path.resolve('src/styles/variables-dark.scss'),
+				},
+			],
+			// 默认取 multipleScopeVars[0].scopeName
+			defaultScopeName: '',
+			// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
+			extract: false,
+			// 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
+			outputDir: '',
+			// 会选取defaultScopeName对应的主题css文件在html添加link
+			// themeLinkTagId: "theme-link-tag",
+			// // "head"||"head-prepend" || "body" ||"body-prepend"
+			// themeLinkTagInjectTo: "head",
+			// 是否对抽取的css文件内对应scopeName的权重类名移除
+			removeCssScopeName: false,
+			// 可以自定义css文件名称的函数
+			customThemeCssFileName: (scopeName) => scopeName,
+		},
+		// less: {
+		//   multipleScopeVars: [
+		//     {
+		//       scopeName: "theme-default",
+		//       path: path.resolve("src/theme/default-vars.less"),
+		//     },
+		//     {
+		//       scopeName: "theme-mauve",
+		//       path: path.resolve("src/theme/mauve-vars.less"),
+		//     },
+		//   ],
+		// },
+	}
 
-  const plugin = [
-    themePreprocessorPlugin(options),
-  ]
-  return plugin
-}
+	const plugin = [themePreprocessorPlugin(options)]
+	return plugin
+}

package.json

@@ -9,6 +9,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
+		"staging": "vite build --mode staging",
 		"serve": "vite preview",
 		"test:gzip": "http-server dist --cors --gzip -c-1",
 		"test:br": "http-server dist --cors --brotli -c-1",

src/components/SvgIcon/index.vue

@@ -1,26 +1,26 @@
 <template>
-  <svg aria-hidden="true">
-    <use :xlink:href="symbolId" :fill="color" />
-  </svg>
+	<svg aria-hidden="true">
+		<use :xlink:href="symbolId" :fill="color" />
+	</svg>
 </template>
 
 <script setup>
 import { computed, defineProps, ref } from 'vue'
 
 const props = defineProps({
-  // route object
-  prefix: {
-    type: String,
-    default: 'icon'
-  },
-  name: {
-    type: String,
-    required: true
-  },
-  color: {
-    type: String,
-    default: '#333'
-  }
+	// route object
+	prefix: {
+		type: String,
+		default: 'icon',
+	},
+	name: {
+		type: String,
+		required: true,
+	},
+	color: {
+		type: String,
+		default: '#333',
+	},
 })
 const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 </script>