refactor(h5): 移除 vite-plugin-svg-icons, 首页 logo 改用直连图片

根因：Logo.vue 默认主题用 <SvgIcon name="logo">，而 public/logo.svg 依赖内部 <style>.s0/.s1 上色，sprite 被 vite-plugin-svg-icons 作用域成 #icon-logo .s0，该选择器在 <use> 克隆的 shadow tree 内不生效 → logo 渲染为空。 - mobile 首页 <Logo/> → <img src="/logo.svg"> (160px, 保比例)，与 PC 首页同源 - 删除 Logo.vue / SvgIcon.vue（互为唯一消费者，均成孤儿） - 删除 build/vite/plugin/svgSprite.ts，plugin/index.ts 移除其装配 - mobile/app.ts 移除 virtual:svg-icons-register 注册 - 删除 shared/assets/icons/logo.svg（仅被 sprite 扫描，现已冗余） - package.json 移除 vite-plugin-svg-icons 依赖（连带清掉 132 个传递依赖） - exception/404.svg 保留（PC/移动 404 页直接 import 使用）
2026-08-07 13:55:44 +08:00 · 2026-06-24 14:15:55 +08:00
parent 3a571d8713
commit bbb29ea806
9 changed files with 10 additions and 1249 deletions
--- a/build/vite/plugin/index.ts
+++ b/build/vite/plugin/index.ts
@@ -5,7 +5,6 @@ import AutoImport from 'unplugin-auto-import/vite'
 import { VantResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import { configHtmlPlugin } from './html'
-import { configSvgIconsPlugin } from './svgSprite'
 import { configVisualizerConfig } from './visualizer'

 /**
@@ -52,8 +51,5 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  // rollup-plugin-visualizer
  vitePlugins.push(configVisualizerConfig())

-  // vite-plugin-svg-icons
-  vitePlugins.push(configSvgIconsPlugin(isBuild))
-
  return vitePlugins
 }
--- a/build/vite/plugin/svgSprite.ts
+++ b/build/vite/plugin/svgSprite.ts
@@ -1,19 +0,0 @@
-/**
- *  Vite Plugin for fast creating SVG sprites.
- * https://github.com/anncwb/vite-plugin-svg-icons
- */
-
-import path from 'node:path'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-
-export function configSvgIconsPlugin(isBuild: boolean) {
-  // 指定需要缓存的图标文件夹
-  const svgIconsPlugin = createSvgIconsPlugin({
-    iconDirs: [path.resolve(process.cwd(), 'src/shared/assets/icons')],
-    // 是否压缩
-    svgoOptions: isBuild,
-    // 指定symbolId格式
-    symbolId: 'icon-[dir]-[name]',
-  })
-  return svgIconsPlugin
-}
--- a/package.json
+++ b/package.json
@@ -78,7 +78,6 @@
    "vconsole": "^3.15.1",
    "vite": "^8.1.0",
    "vite-plugin-html": "^3.2.2",
-    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "^3.3.5"
  },
  "pnpm": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/mobile/app.ts
+++ b/src/mobile/app.ts
@@ -8,8 +8,6 @@ import 'vant/es/toast/style'
 import 'vant/es/dialog/style'
 import 'vant/es/notify/style'
 import 'vant/es/image-preview/style'
-// Register icon sprite
-import 'virtual:svg-icons-register'

 // 开发环境启用 vconsole 移动端调试面板（由 VITE_V_CONSOLE 控制，默认开启）
 if (import.meta.env.DEV && import.meta.env.VITE_V_CONSOLE !== 'false') {
--- a/src/mobile/views/home/index.vue
+++ b/src/mobile/views/home/index.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Logo from '@/shared/components/Logo.vue'
-
 defineOptions({ name: 'HomePage' })

 // 由 vite define 注入的项目信息
@@ -12,8 +10,8 @@ const version = pkg.version
  <div class="home">
    <div class="home__body">
      <div class="home__welcome">
-        <!-- DaxPay 文字 logo（默认主题色时显示） -->
-        <Logo />
+        <!-- DaxPay 文字字标（public/logo.svg，与 PC 首页同源） -->
+        <img class="home__logo" src="/logo.svg" alt="DaxPay">
        <!-- 欢迎语 -->
        <div class="home__title">
          欢迎使用 DaxPay
@@ -48,6 +46,12 @@ const version = pkg.version
    align-items: center;
  }

+  // 文字字标（保比例，mobile-forever 正常转 vw）
+  &__logo {
+    width: 160px;
+    height: auto;
+  }
+
  // 欢迎语（参考商业版 text-2xl font-black mt-12）
  &__title {
    margin-top: 12px;
--- a/src/shared/assets/icons/logo.svg
+++ b/src/shared/assets/icons/logo.svg
@@ -1,21 +0,0 @@
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567 513" width="567" height="513">
-  <title>dax-pay-无汉字-svg</title>
-  <style>
-    .s0 { fill: #ebb54b }
-    .s1 { fill: #403f3b }
-  </style>
-  <g id="#ffffffff">
-  </g>
-  <g id="#ebb54bff">
-    <path id="Layer" class="s0" d="m286.3 29.2c28.6-12.8 60.3-20.1 91.7-17.2 22.5 2.3 44.5 10.6 62.5 24.4 16 11.9 28.2 28.3 37.3 45.9 17.9 35.1 23 75.4 21.3 114.4-7.5 0.4-15 0.1-22.5 0-0.5-8.5-0.1-17.1-0.7-25.7-0.7-21.2-4.4-42.3-11.7-62.2-6.1-16.7-15.2-32.5-27.8-45.2-16.3-16.2-38.4-26.7-61.4-28.4-27.6-3-55.2 4.4-80.4 15.5-18.5 8.1-35.5 19.2-52.1 30.7-40.8 29-74.9 66.7-103.4 107.6-2.1 2.8-4.1 6.1-7.5 7.3-8.2 2-16.5 0.5-24.7 0.3 13.3-22.4 29-43.2 45.8-63 13.4-15.8 27.7-30.9 43.3-44.6 26.6-24.6 57-45.3 90.3-59.8z"/>
-    <path id="Layer" class="s0" d="m71.9 333.6c7.3-1.4 14.8-0.9 22.2-0.2 1.1 22.7 3.8 45.6 11.4 67.2 6.5 18.4 16.4 35.8 30.6 49.4 12.9 12.3 29.4 20.9 47 24.5 13.7 3.1 28 3 41.9 1.3 18.1-2.4 35.6-8.3 52.3-15.4 18.1-7.7 34.5-18.5 50.5-29.6 35.6-25.6 66.2-57.6 92.4-92.6 2.4-3.7 6.6-5.3 10.9-5.3 6.7-0.6 13.4 0.5 20.2 0.6-7.6 13.2-17.2 25.2-26.8 37-23.5 28.7-50.1 55.1-80 77.1-31.3 22.8-66.3 41.6-104.5 49.5-16.1 3.3-32.6 3-48.9 2.2-19.8-1.7-39.2-8.6-55.5-19.9-23.7-16.2-40.9-40.5-50.7-67.2-7.5-19.9-11.5-41.1-13.2-62.2-0.5-5.5-0.3-10.9 0.2-16.4z"/>
-  </g>
-  <g id="#403f3bff">
-    <path id="Layer" fill-rule="evenodd" class="s1" d="m29.1 203.6c7.2-1.3 14.6-0.9 21.9-0.9 12.3 0.2 25.1-0.8 36.8 3.5 7.2 2.5 12.8 8.5 15.2 15.7 3.8 11.1 2.2 23 0 34.3-2.9 13.8-8.8 27.7-20.1 36.6-11 8.6-25.4 10.7-38.9 10.5-10.9 0.2-21.7-0.1-32.6-0.1 3.7-25.5 8.8-50.7 13.1-76.1 1.4-7.9 2.3-15.8 4.6-23.5zm16.5 27.8c-3 17.7-6 35.3-9.1 53 10.2 0.1 21.5 1.3 30.5-4.5 8.5-5.8 11.8-16.2 13.7-25.8 1.2-6.3 1.6-12.8 0.8-19.2-0.6-4.9-3.8-9.7-8.6-11.5-7.9-2.8-16.3-2.4-24.5-2q-1.9 4.9-2.8 10z"/>
-    <path id="Layer" fill-rule="evenodd" class="s1" d="m308.3 203.5c12.5-1.7 25.2-0.5 37.8-0.7 9 0.6 19.3 1.3 25.9 8.2 5.8 6.2 5.2 15.3 4.3 23.1-1.6 9.6-4.1 19.8-11 27.1-6.5 6.9-16.1 9.7-25.2 10.6-7.5 0.7-14.9 0.7-22.3 1-1.9 10.1-3.7 20.3-5.4 30.4q-11.1 0.1-22.2 0c4.5-27.1 9.6-54.2 14.2-81.3 1-6.2 1.8-12.5 3.9-18.4zm19.2 17c-3.7 11.1-4.6 22.8-6.6 34.2 7.8-0.1 16 0.9 23.3-2.3 6.8-3.3 9.2-11.4 9.5-18.4 0.4-4.2-0.3-9.2-4.3-11.5-6.8-3.1-14.6-3-21.9-2z"/>
-    <path id="Layer" fill-rule="evenodd" class="s1" d="m142.3 225.4c2.6-1.5 5.8-1.1 8.6-1.5 10.4-0.3 21.3-0.8 31.1 3.2 4.9 2 9 6.3 9.6 11.7 1 8.5-1.2 16.8-2.6 25.1-2.3 13.1-4.8 26.2-7 39.4q-9.4-0.1-18.8 0c-0.3-2.5-0.5-5-0.8-7.5-6.2 3.8-12.7 8-20.2 8.7-7.5 0.6-15.6 0.6-22.2-3.4-4-2.2-6.6-6.6-7-11.1-1.1-9.6 1.9-20.1 9.5-26.4 6.6-5.3 15.3-6.7 23.6-7.2 7.8-0.2 15.6 0 23.4-0.1-0.4-4.2 1.1-9.3-2.1-12.6-9.2-4.1-19.6-1.7-29.2-1 1.1-5.8 1.3-12 4.1-17.3zm-3.6 47.4c-4.6 2.7-7.2 11.1-2 14.5 7.9 3.1 17.3 1.3 24.2-3.4 4.3-3 4.9-8.5 6.1-13.2-9.4-0.3-19.4-1.7-28.3 2.1z"/>
-    <path id="Layer" fill-rule="evenodd" class="s1" d="m409.2 225.5c8.1-2.3 16.6-1.7 24.8-1.6 8.3 0.6 17.8 2 23 9.1 4.1 6.7 2.4 14.8 1.3 22.1-3 16-5.8 32.1-8.7 48.1q-9.4 0.1-18.8 0-0.3-3.7-0.6-7.5c-10.9 8-25.4 11.5-38.5 7.5-5.6-1.6-10.3-6.4-11.1-12.2-1.9-11.8 3.3-25.6 14.6-30.7 13.3-5.9 28-3.5 42-4-0.3-4.3 1.2-10.5-3.3-13.1-9-3.3-18.7-1.1-28-0.6 0.7-5.8 1.7-11.5 3.3-17.1zm-2.6 47c-3.9 2.3-5.7 7.3-4.8 11.6 0.9 3.5 4.9 4.4 8.1 4.6 6.5 0.3 13.3-1.3 18.7-5.1 4.2-2.9 4.7-8.4 6.1-12.9-9.3-0.3-19.2-1.7-28.1 1.8z"/>
-    <path id="Layer" class="s1" d="m210.3 225.4c7.7-0.6 15.5-1.1 23.2 0 5.5 7.5 7.7 16.8 11.7 25.1 5.7-6.1 10.5-13 15.6-19.6 2.1-2.6 4.6-5.6 8.2-5.8 6.7-0.7 13.5-0.3 20.2 0.4-9.7 13-20.9 24.9-31 37.6 6.2 13.5 13.3 26.5 19.3 40.1-8.3 0.1-16.5 0-24.7 0.1-3.9-9-7.7-18.1-12.1-26.8-5.8 6.6-11.1 13.7-16.5 20.6-2.1 2.6-4.4 5.8-8.1 6.1-7.1 0.6-14.2 0.2-21.4 0 10.6-13.6 22.2-26.3 33.4-39.3-5.2-13.2-12.4-25.4-17.8-38.5z"/>
-    <path id="Layer" class="s1" d="m476.1 225c7.4-0.3 14.8-0.1 22.2-0.2 3.4 18.6 5.5 37.5 9.1 56.1 10-18.4 18.2-37.7 28.1-56.1 7.2-0.1 14.4 0.3 21.6 0.6-10 20.5-21.7 40.2-32.4 60.3-4.6 8.4-9 16.8-14.3 24.7-5 7.2-11.1 14.2-19.3 17.8-7.8 3.5-16.5 3.9-24.9 4.3 1-5.9 2.1-11.7 3.2-17.6 5.6-1.1 11.6-1.8 16.5-5 2.6-1.8 5-4.5 5-7.8 0.1-4.5-1-8.9-1.9-13.2-3.4-15-6.7-30-10-44.9-1.4-6.3-3.1-12.6-2.9-19z"/>
-  </g>
-</svg>
--- a/src/shared/components/Logo.vue
+++ b/src/shared/components/Logo.vue
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { appThemeList } from '@/shared/settings/designSetting'
-import { useDesignSettingStore } from '@/shared/store/modules/designSetting'
-import { hexToRgba } from '@/shared/utils'
-
-defineOptions({ name: 'Logo' })
-
-const defaultAppTheme = appThemeList[0]
-const designStore = useDesignSettingStore()
-</script>
-
-<template>
-  <div>
-    <SvgIcon v-if="designStore.getAppTheme === defaultAppTheme" class="!h-30 !w-30" name="logo" />
-    <svg v-else xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 87 100">
-      <defs>
-        <linearGradient id="gradient23" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(-90 .5 .5)">
-          <stop offset="0" :stop-color="hexToRgba(designStore.getAppTheme, 0.3)" stop-opacity="1" />
-          <stop offset="1" :stop-color="hexToRgba(designStore.getAppTheme, 0.8)" stop-opacity="1" />
-        </linearGradient>
-      </defs>
-      <path fill="url(#gradient23)" d="M 86.45 25.05Q 86.05 25.9 85.5 26.25L 44.9 49.7 44.9 51.75 41.9 51.75 41.9 49.7 1.25 26.25Q 0.9 26.05 0.65 25.55L 0.45 25.1 0.45 75.2 0.5 75.75Q 0.7 76.35 1.1 76.55L 41.75 100 41.85 59.85 44.95 59.85 45.05 100 85.65 76.55Q 86.15 76.2 86.35 75.7L 86.45 75.2 86.45 25.05 Z" />
-      <defs>
-        <linearGradient id="gradient24" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(-90 .5 .5)">
-          <stop offset="0" :stop-color="hexToRgba(designStore.getAppTheme, 0.8)" stop-opacity="1" />
-          <stop offset="1" :stop-color="hexToRgba(designStore.getAppTheme, 0.2)" stop-opacity="1" />
-        </linearGradient>
-      </defs>
-      <path fill="url(#gradient24)" d="M 86.6 25.1Q 86.6 24.4 85.8 23.95L 45.15 0.5Q 44.35 0 43.15 0 42 0 41.2 0.5L 0.85 23.95Q 0 24.4 0 25.1 0 25.75 0.85 26.25L 41.45 49.7Q 42.3 50.15 43.45 50.15 44.65 50.15 45.45 49.7L 85.8 26.25Q 86.6 25.75 86.6 25.1 Z" />
-      <defs>
-        <linearGradient id="gradient25" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(-90 .5 .5)">
-          <stop offset="0" :stop-color="hexToRgba(designStore.getAppTheme, 0.4)" stop-opacity="1" />
-          <stop offset="1" :stop-color="hexToRgba(designStore.getAppTheme, 0.9)" stop-opacity="1" />
-        </linearGradient>
-      </defs>
-      <path fill="url(#gradient25)" d="M 67.9 35.85Q 67.8 36.35 67.5 36.55L 43.25 50.2 43.25 79.3 67.6 65.3Q 67.95 65.1 67.9 64.5L 67.9 35.85 Z" />
-      <defs>
-        <linearGradient id="gradient26" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(-90 .5 .5)">
-          <stop offset="0" :stop-color="hexToRgba(designStore.getAppTheme, 0.8)" stop-opacity="1" />
-          <stop offset="1" :stop-color="hexToRgba(designStore.getAppTheme, 0.4)" stop-opacity="1" />
-        </linearGradient>
-      </defs>
-      <path fill="url(#gradient26)" d="M 19.2 36.55Q 19 36.4 18.9 36.1L 18.8 35.85 18.85 64.85Q 18.9 65.15 19.15 65.3L 43.45 79.3 43.45 50.2 19.2 36.55 Z" />
-      <defs>
-        <linearGradient id="gradient27" x1="0" y1="0" x2="0" y2="1" gradientTransform="rotate(-90 .5 .5)">
-          <stop offset="0" :stop-color="hexToRgba(designStore.getAppTheme, 0.9)" stop-opacity="1" />
-          <stop offset="1" :stop-color="hexToRgba(designStore.getAppTheme, 0.3)" stop-opacity="1" />
-        </linearGradient>
-      </defs>
-      <path fill="url(#gradient27)" d="M 67.6 35.2L 44.4 21.8Q 43.9 21.55 43.25 21.55 42.55 21.55 42.1 21.8L 19.05 35.2Q 18.6 35.5 18.6 35.9 18.6 36.25 19.05 36.55L 42.25 49.95Q 42.7 50.2 43.4 50.2 44.1 50.2 44.55 49.95L 67.6 36.55Q 68.1 36.25 68.05 35.9 68.05 35.5 67.6 35.2 Z" />
-    </svg>
-  </div>
-</template>
--- a/src/shared/components/SvgIcon.vue
+++ b/src/shared/components/SvgIcon.vue
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import type { CSSProperties } from 'vue'
-
-defineOptions({ name: 'SvgIcon' })
-
-const props = withDefaults(
-  defineProps<{
-    prefix?: string
-    name: string
-    size?: number | string
-    color?: string
-  }>(),
-  {
-    prefix: 'icon',
-    size: 16,
-    color: '#333',
-  },
-)
-
-const symbolId = computed(() => `#${props.prefix}-${props.name}`)
-
-const getStyle = computed((): CSSProperties => {
-  const { size } = props
-  let s = `${size}`
-  s = `${s.replace('px', '')}px`
-  return {
-    width: s,
-    height: s,
-  }
-})
-</script>
-
-<template>
-  <svg :style="getStyle" aria-hidden="true">
-    <use :xlink:href="symbolId" :fill="color" />
-  </svg>
-</template>
-
-<style scoped lang="less"></style>