✨ feat: 优化图片加载

2026-04-03 14:20:50 +08:00 · 2024-12-15 14:13:13 +08:00
parent 51f67bb2c2
commit 100268448a
6 changed files with 23 additions and 49 deletions
--- a/index.html
+++ b/index.html
@@ -5,16 +5,17 @@
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  
+
  <!-- SEO 元数据 -->
  <title>网抑云音乐 | AlgerKong ｜ AlgerMusicPlayer</title>
-  <meta name="description" content="AlgerMusicPlayer 网抑云音乐 基于 网易云音乐API 的一款免费的在线音乐播放器，支持在线播放、歌词显示、音乐下载等功能。提供海量音乐资源，让您随时随地享受音乐。" />
+  <meta name="description"
+    content="AlgerMusicPlayer 网抑云音乐 基于 网易云音乐API 的一款免费的在线音乐播放器，支持在线播放、歌词显示、音乐下载等功能。提供海量音乐资源，让您随时随地享受音乐。" />
  <meta name="keywords" content="AlgerMusic, AlgerMusicPlayer, 网抑云, 音乐播放器, 在线音乐, 免费音乐, 歌词显示, 音乐下载, AlgerKong, 网易云音乐" />

  <!-- 作者信息 -->
  <meta name="author" content="AlgerKong" />
  <meta name="author-url" content="https://github.com/algerkong" />
-  
+
  <!-- PWA 相关 -->
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#000000" />
@@ -22,12 +23,12 @@
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="网抑云音乐" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-  
+
  <!-- 资源预加载 -->
  <link rel="preload" href="/icon/iconfont.css" as="style" />
  <link rel="preload" href="/css/animate.css" as="style" />
  <link rel="preload" href="/css/base.css" as="style" />
-  
+
  <!-- 样式表 -->
  <link rel="stylesheet" href="/icon/iconfont.css" />
  <link rel="stylesheet" href="/css/animate.css" />
@@ -45,37 +46,12 @@
 <body>
  <div id="app"></div>

-<div style="display: none;">
-  Total Page View <span id="vercount_value_page_pv">Loading</span>
-  Total Visits <span id="vercount_value_site_pv">Loading</span>
-  Site Total Visitors <span id="vercount_value_site_uv">Loading</span>
-</div>
-  <!-- 收款码图片预加载 -->
-  <link rel="preload" as="image" href="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true" />
-  <link rel="preload" as="image" href="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true" />
+  <div style="display: none;">
+    Total Page View <span id="vercount_value_page_pv">Loading</span>
+    Total Visits <span id="vercount_value_site_pv">Loading</span>
+    Site Total Visitors <span id="vercount_value_site_uv">Loading</span>
+  </div>
  <script type="module" src="/src/main.ts"></script>
-  
-  <!-- 结构化数据 -->
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org", 
-      "@type": "WebApplication",
-      "name": "网抑云音乐",
-      "applicationCategory": "MultimediaApplication",
-      "operatingSystem": "Web, Windows, MacOS",
-      "author": {
-        "@type": "Person",
-        "name": "AlgerKong",
-        "url": "https://github.com/algerkong"
-      },
-      "description": "一款免费的在线音乐播放器，支持在线播放、歌词显示、音乐下载等功能。",
-      "offers": {
-        "@type": "Offer",
-        "price": "0",
-        "priceCurrency": "CNY"
-      }
-    }
-  </script>
 </body>

 </html>
--- a/src/assets/alipay.png
+++ b/src/assets/alipay.png
--- a/src/assets/wechat.png
+++ b/src/assets/wechat.png
--- a/src/components/Coffee.vue
+++ b/src/components/Coffee.vue
@@ -13,13 +13,13 @@
      </template>

      <div class="p-6 bg-black rounded-lg shadow-lg">
-        <div class="flex gap-6">
+        <div class="flex gap-10">
          <div class="flex flex-col items-center gap-2">
-            <n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+            <n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
            <span class="text-sm text-gray-100">支付宝</span>
          </div>
          <div class="flex flex-col items-center gap-2">
-            <n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+            <n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg cursor-none" preview-disabled />
            <span class="text-sm text-gray-100">微信支付</span>
          </div>
        </div>
--- a/src/layout/components/SearchBar.vue
+++ b/src/layout/components/SearchBar.vue
@@ -35,10 +35,7 @@
      />
      <div v-else class="mx-2 rounded-full cursor-pointer text-sm" @click="toLogin">登录</div>
    </div>
-    <coffee
-      alipay-q-r="https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true"
-      wechat-q-r="https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true"
-    >
+    <coffee :alipay-q-r="alipay" :wechat-q-r="wechat">
      <div class="github" @click="toGithub">
        <i class="ri-github-fill"></i>
      </div>
@@ -52,6 +49,8 @@ import { useStore } from 'vuex';

 import { getSearchKeyword } from '@/api/home';
 import { getUserDetail, logout } from '@/api/login';
+import alipay from '@/assets/alipay.png';
+import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
 import { getImgUrl } from '@/utils';
--- a/src/views/set/index.vue
+++ b/src/views/set/index.vue
@@ -63,12 +63,12 @@
      <div class="p-6 bg-black rounded-lg shadow-lg mt-20">
        <div class="text-gray-100 text-base text-center">支持作者</div>
        <div class="flex gap-60">
-          <div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black">
-            <n-image :src="alipayQR" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+          <div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
+            <n-image :src="alipay" alt="支付宝收款码" class="w-32 h-32 rounded-lg" preview-disabled />
            <span class="text-sm text-gray-100">支付宝</span>
          </div>
-          <div class="flex flex-col items-center gap-2 cursor-pointer hover:scale-[2] transition-all z-10 bg-black">
-            <n-image :src="wechatQR" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
+          <div class="flex flex-col items-center gap-2 cursor-none hover:scale-[2] transition-all z-10 bg-black">
+            <n-image :src="wechat" alt="微信收款码" class="w-32 h-32 rounded-lg" preview-disabled />
            <span class="text-sm text-gray-100">微信支付</span>
          </div>
        </div>
@@ -82,15 +82,14 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';

 import config from '@/../package.json';
+import alipay from '@/assets/alipay.png';
+import wechat from '@/assets/wechat.png';
 import store from '@/store';

 defineOptions({
  name: 'Setting',
 });

-const alipayQR = 'https://github.com/algerkong/algerkong/blob/main/alipay.jpg?raw=true';
-const wechatQR = 'https://github.com/algerkong/algerkong/blob/main/wechat.jpg?raw=true';
-
 const isElectron = ref((window as any).electronAPI !== undefined);
 const router = useRouter();