chore(admin): 优化构建配置并升级资源格式

- 新增构建插件：打包分析、压缩、自动部署、图片优化和PWA支持
- 将SVG资源转换为WebP格式以提升加载性能
- 添加新的背景图片资源用于用户界面优化
- 更新环境配置：调整基础URL和服务地址
- 优化用户界面组件以适配新的资源格式
- 更新package.json依赖以支持新的构建功能
- 改进构建流程以支持自动部署和性能监控

apps/admin/build/plugins/analyzer.ts

@@ -0,0 +1,11 @@
+import type { PluginOption } from 'vite'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export function setupAnalyzer() {
+  return visualizer({
+    open: true,
+    gzipSize: true,
+    brotliSize: true,
+    filename: 'report.html',
+  }) as PluginOption
+}

apps/admin/build/plugins/compression.ts

@@ -0,0 +1,11 @@
+import viteCompression from 'vite-plugin-compression'
+
+export function setupCompression() {
+  return viteCompression({
+    verbose: true,
+    disable: false,
+    threshold: 10240,
+    algorithm: 'gzip',
+    ext: '.gz',
+  })
+}

apps/admin/build/plugins/deploy.ts

@@ -0,0 +1,21 @@
+import { viteAutoDeployPlugin } from 'vite-auto-deploy'
+import { name } from '../../package.json'
+
+export function setupDeploy(isBuild: boolean) {
+  return viteAutoDeployPlugin({
+    /** 上传地址 */
+    uploadUrl: 'http://47.109.17.238:8200/api/upload/code/deploy',
+    /** 项目名称 (如果多个项目都是用的同上传地址时，服务端可用此字段区分是哪一个项目) */
+    projectKey: name,
+    /** 上传完成后,是否保留压缩包到本地 */
+    saveLocalZip: true,
+    /** 是否开启自动部署 */
+    autoDeploy: isBuild,
+    headers: {
+      'Custom-Timestamp': new Date().getTime().toString(),
+      'Custom-Run-Platform': 'app',
+      'Custom-Device-Id': Math.random().toString(36).substring(2),
+      'Custom-Os-Name': 'windows',
+    },
+  })
+}

apps/admin/build/plugins/image-optimizer.ts

@@ -0,0 +1,51 @@
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer'
+
+export function setupImageOptimizer() {
+  return ViteImageOptimizer({
+    logStats: true,
+
+    // SVG 优化配置
+    svg: {
+      multipass: true,
+      plugins: [
+        {
+          name: 'preset-default',
+          params: {
+            overrides: {
+              removeViewBox: false,
+              cleanupIds: false,
+            },
+          },
+        },
+        'sortAttrs',
+      ],
+    },
+
+    // PNG 高质量压缩
+    png: {
+      quality: 90,
+      compressionLevel: 9,
+    },
+
+    // JPEG 优化
+    jpeg: {
+      quality: 85,
+      mozjpeg: true,
+    },
+    jpg: {
+      quality: 85,
+      mozjpeg: true,
+    },
+
+    // WebP 转换
+    webp: {
+      quality: 80,
+      lossless: false,
+      force: true,
+    },
+
+    includePublic: true,
+    cache: true,
+    cacheLocation: 'node_modules/.cache/image-optimizer',
+  })
+}

apps/admin/build/plugins/index.ts

@@ -2,14 +2,20 @@ import type { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import progress from 'vite-plugin-progress'
+import { setupAnalyzer } from './analyzer'
+import { setupCompression } from './compression'
+import { setupDeploy } from './deploy'
 import { setupDevtoolsPlugin } from './devtools'
 import { setupHtmlPlugin } from './html'
+import { setupImageOptimizer } from './image-optimizer'
+import { setupPWA } from './pwa'
 import { setupElegantRouter } from './router'
 import { setupUnocss } from './unocss'
 import { setupUnplugin } from './unplugin'
 
-export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
+export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string, isBuild: boolean) {
   const plugins: PluginOption = [
+    // 基础插件
     vue(),
     vueJsx(),
     setupDevtoolsPlugin(viteEnv),
@@ -18,7 +24,18 @@ export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
     ...setupUnplugin(viteEnv),
     progress(),
     setupHtmlPlugin(buildTime),
+
+    // 优化插件
+    setupImageOptimizer(),
+    setupCompression(),
+    setupPWA(),
+    setupDeploy(isBuild),
   ]
 
+  // 构建时添加打包分析插件
+  if (isBuild) {
+    plugins.push(setupAnalyzer())
+  }
+
   return plugins
 }

apps/admin/build/plugins/pwa.ts

@@ -0,0 +1,51 @@
+import { VitePWA } from 'vite-plugin-pwa'
+
+export function setupPWA() {
+  return VitePWA({
+    registerType: 'autoUpdate',
+    workbox: {
+      globPatterns: ['**/*.{js,css,html,ico,png,svg,webp,jpg,jpeg}'],
+      runtimeCaching: [
+        {
+          urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'google-fonts-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
+            },
+          },
+        },
+      ],
+    },
+    includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
+    manifest: {
+      name: '阅读之星竞赛系统',
+      short_name: '阅读之星',
+      description: '教育学会树人研究院阅读之星竞赛系统',
+      theme_color: '#ffffff',
+      background_color: '#ffffff',
+      display: 'standalone',
+      orientation: 'landscape',
+      icons: [
+        {
+          src: 'pwa-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+        },
+        {
+          src: 'pwa-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable',
+        },
+      ],
+    },
+  })
+}