From 9f34c066838b4d5a95d5711573d4a5877c947924 Mon Sep 17 00:00:00 2001
From: Frost-ZX <frost-zx@foxmail.com>
Date: Thu, 9 Oct 2025 13:03:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E5=8F=8B?=
 =?UTF-8?q?=E6=83=85=E9=93=BE=E6=8E=A5=E7=BB=93=E6=9E=84=EF=BC=8C=E6=8B=86?=
 =?UTF-8?q?=E5=88=86=E6=97=A0=E6=B3=95=E8=AE=BF=E9=97=AE=E7=9A=84=E7=BD=91?=
 =?UTF-8?q?=E7=AB=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/FriendlySiteLinks.vue          | 140 ++++++++++--------
 docs/links.md                                 |   2 +-
 2 files changed, 79 insertions(+), 63 deletions(-)

diff --git a/docs/.vitepress/components/FriendlySiteLinks.vue b/docs/.vitepress/components/FriendlySiteLinks.vue
index 29ba747..e099f31 100644
--- a/docs/.vitepress/components/FriendlySiteLinks.vue
+++ b/docs/.vitepress/components/FriendlySiteLinks.vue
@@ -5,8 +5,8 @@ import { ref, onBeforeMount } from 'vue';
 /** 默认图标 */
 const defaultAvatar = withBase('/default-avatar.svg');
 
-/** 网站列表 */
-const siteList = ref([
+/** 网站列表 - 正常访问 */
+const siteListOnline = ref([
 
   // 博客
   {
@@ -15,7 +15,6 @@ const siteList = ref([
     siteUrl: 'https://blog.dsrkafuu.net/',
     iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/blog.dsrkafuu.net.png',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: 'haojunmei',
@@ -23,7 +22,6 @@ const siteList = ref([
     siteUrl: 'https://www.haojunmei.top/',
     iconUrl0: 'https://haojunmei.top/usr/themes/images/haojunmei.png',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: `Luminous' Home`,
@@ -31,7 +29,6 @@ const siteList = ref([
     siteUrl: 'https://luotianyi.vc/',
     iconUrl0: 'https://static.lty.fun/weblogo/my.jpg',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: 'Panniyanjie 个人博客',
@@ -39,7 +36,6 @@ const siteList = ref([
     siteUrl: 'https://blog.wdztbil.top/',
     iconUrl0: 'https://blog.wdztbil.top/usr/themes/Poem/images/favicon.png',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: 'qqAys',
@@ -47,7 +43,6 @@ const siteList = ref([
     siteUrl: 'https://qqays.xyz/',
     iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/qqays.xyz.webp',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: `Saiita's Blog`,
@@ -55,7 +50,6 @@ const siteList = ref([
     siteUrl: 'https://www.saiita.com.cn/',
     iconUrl0: 'https://c.frost-zx.top/data/uploads/blog/favicon/www.saiita.com.cn.png',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: 'zgcwkj',
@@ -63,15 +57,6 @@ const siteList = ref([
     siteUrl: 'https://zgcwkj.cn/',
     iconUrl0: 'https://zgcwkj.cn/favicon.ico',
     iconUrl1: '',
-    isError: false,
-  },
-  {
-    siteTitle: '安和Blog',
-    siteDesc: 'nekocoffee.com',
-    siteUrl: 'https://nekocoffee.com/',
-    iconUrl0: 'https://i.imgtg.com/2022/06/23/7Sg4L.jpg',
-    iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '冰屋小站',
@@ -79,7 +64,6 @@ const siteList = ref([
     siteUrl: 'https://blog.biduang.cn/',
     iconUrl0: 'https://gravatar.loli.net/avatar/5273a4d195a45fd8b900545f63a94f58?s=200&r=G',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '高坂滑稽果的滑稽果农场',
@@ -87,7 +71,6 @@ const siteList = ref([
     siteUrl: 'https://funny233.xyz/',
     iconUrl0: 'https://funny233.xyz/favicon.ico',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '派兹的小站',
@@ -95,15 +78,6 @@ const siteList = ref([
     siteUrl: 'https://blog.blw.moe/',
     iconUrl0: 'https://global.cdn.blingwang.cn/blog/head.jpg',
     iconUrl1: '',
-    isError: false,
-  },
-  {
-    siteTitle: '任我乐',
-    siteDesc: '一条迷茫的死咸鱼。',
-    siteUrl: 'https://renwole.com/',
-    iconUrl0: 'https://renwole.com/wp-content/uploads/2017/04/cropped-Renwole-logo-192x192-192x192.png',
-    iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '王鑫的小站',
@@ -111,7 +85,6 @@ const siteList = ref([
     siteUrl: 'https://wxweb.xyz/',
     iconUrl0: 'https://pic.wxweb.xyz/pic/favicon.ico',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '御坂秋生の小窝',
@@ -119,7 +92,6 @@ const siteList = ref([
     siteUrl: 'https://www.akio.top/',
     iconUrl0: 'https://webstatic.akio.top/user/NiuBoss123.jpg',
     iconUrl1: '',
-    isError: false,
   },
 
   // Minecraft
@@ -129,7 +101,6 @@ const siteList = ref([
     siteUrl: 'https://www.wheat-server.top/',
     iconUrl0: 'https://www.wheat-server.top/upload/system/favicon.png',
     iconUrl1: '',
-    isError: false,
   },
   {
     siteTitle: '氢气工艺服务器',
@@ -137,9 +108,13 @@ const siteList = ref([
     siteUrl: 'https://wiki.hydcraft.cn/',
     iconUrl0: 'https://wiki.hydcraft.cn/favicon/logo.png',
     iconUrl1: '',
-    isError: false,
   },
 
+]);
+
+/** 网站列表 - 无法访问 */
+const siteListOffline = ref([
+
   // 无法访问
   {
     siteTitle: '4SSH',
@@ -147,7 +122,6 @@ const siteList = ref([
     siteUrl: 'https://4ssh.cn/',
     iconUrl0: '',
     iconUrl1: '',
-    isError: true,
   },
   {
     siteTitle: 'AurLemon Blog',
@@ -155,7 +129,6 @@ const siteList = ref([
     siteUrl: 'https://blog.aurlemon.top/',
     iconUrl0: 'https://blog.aurlemon.top/favicon.ico',
     iconUrl1: '',
-    isError: true,
   },
   {
     siteTitle: 'LuRenDing',
@@ -163,7 +136,6 @@ const siteList = ref([
     siteUrl: 'https://blog.lurending.top/',
     iconUrl0: 'https://blog.lurending.top/favicon.ico',
     iconUrl1: '',
-    isError: true,
   },
   {
     siteTitle: 'UNKNOW date',
@@ -171,7 +143,20 @@ const siteList = ref([
     siteUrl: 'https://n-a.date/',
     iconUrl0: 'https://n-a.date/favicon.ico',
     iconUrl1: '',
-    isError: true,
+  },
+  {
+    siteTitle: '安和Blog',
+    siteDesc: 'nekocoffee.com',
+    siteUrl: 'https://nekocoffee.com/',
+    iconUrl0: 'https://i.imgtg.com/2022/06/23/7Sg4L.jpg',
+    iconUrl1: '',
+  },
+  {
+    siteTitle: '任我乐',
+    siteDesc: '一条迷茫的死咸鱼。',
+    siteUrl: 'https://renwole.com/',
+    iconUrl0: 'https://renwole.com/wp-content/uploads/2017/04/cropped-Renwole-logo-192x192-192x192.png',
+    iconUrl1: '',
   },
   {
     siteTitle: '软件探索',
@@ -179,7 +164,6 @@ const siteList = ref([
     siteUrl: 'https://www.appts.cn/',
     iconUrl0: 'https://cdn.jsdelivr.net/gh/appexplore/cdn/appts@v1.0/img/logo.png',
     iconUrl1: '',
-    isError: true,
   },
   {
     siteTitle: '小哈博客',
@@ -187,7 +171,6 @@ const siteList = ref([
     siteUrl: 'https://blog.littleha.cn/',
     iconUrl0: 'https://www.gravatar.com/avatar/baafed38e0ebbe171caa1cec177bf82e',
     iconUrl1: '',
-    isError: true,
   },
   {
     siteTitle: '云影云烟工作室',
@@ -195,35 +178,39 @@ const siteList = ref([
     siteUrl: 'https://www.yunyingstudio.cn/',
     iconUrl0: 'https://www.yunyingstudio.cn/logo.jpg',
     iconUrl1: '',
-    isError: true,
   },
 
 ]);
 
 /** 加载链接项中的图标 */
 function loadIcons() {
-  siteList.value.forEach((item) => {
+  ((dataList) => {
+    dataList.forEach((siteList) => {
+      siteList.forEach((item) => {
 
-    let image = new Image();
-    let url = item.iconUrl0;
+        let image = new Image();
+        let url = item.iconUrl0;
 
-    image.onload = () => {
-      item.iconUrl1 = url;
-    };
+        image.onload = () => {
+          item.iconUrl1 = url;
+        };
 
-    image.src = url;
+        image.src = url;
 
-  });
+      });
+    });
+  })([
+    siteListOnline.value,
+    siteListOffline.value,
+  ]);
 }
 
 /**
- * @description 跳转链接
- * @param {typeof siteList[number]} item
+ * @description 跳转链接（用于无法访问的网站）
+ * @param {typeof siteListOffline[number]} item
  */
 function openLink(item) {
-  if (item.isError) {
-    window.open(item.siteUrl, '_blank');
-  }
+  window.open(item.siteUrl, '_blank');
 }
 
 onBeforeMount(() => {
@@ -233,14 +220,15 @@ onBeforeMount(() => {
 
 <template>
   <div class="friendly-site-links">
+
+    <!-- 正常访问 -->
     <ul>
-      <li v-for="(item, index) in siteList" :key="index">
+      <li v-for="(item, index) in siteListOnline" :key="index">
         <a
           class="link-item"
           target="_blank"
-          :href="item.isError ? '#' : item.siteUrl"
+          :href="item.siteUrl"
           :title="item.siteTitle"
-          @click="openLink(item)"
         >
           <div class="icon">
             <div
@@ -255,6 +243,33 @@ onBeforeMount(() => {
         </a>
       </li>
     </ul>
+
+    <!-- 无法访问 -->
+    <details class="details custom-block">
+      <summary>无法正常访问的网站</summary>
+      <ul>
+        <li v-for="(item, index) in siteListOffline" :key="index">
+          <a
+            class="link-item"
+            href="#"
+            :title="item.siteTitle"
+            @click="openLink(item)"
+          >
+            <div class="icon">
+              <div
+                class="icon-content"
+                :style="{ backgroundImage: `url('${item.iconUrl1 || defaultAvatar}')` }"
+              ></div>
+            </div>
+            <div class="info">
+              <div class="name">{{ item.siteTitle }}</div>
+              <div class="desc">{{ item.siteDesc }}</div>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </details>
+
   </div>
 </template>
 
@@ -264,25 +279,26 @@ onBeforeMount(() => {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  // max-width: 32em;
-  box-shadow: 0.125em 0.125em 0.75em rgba(0, 0, 0, 0.1);
-  background-color: #FFF;
   font-size: 16px;
-  overflow: hidden;
   -webkit-tap-highlight-color: transparent;
   user-select: none;
 
   * {
+    box-sizing: inherit;
+  }
+
+  ul, li {
     margin: 0;
     padding: 0;
-    box-sizing: inherit;
   }
 
   ul {
     position: relative;
-    margin: 0;
-    padding: 0;
+    margin-bottom: 12px;
+    box-shadow: 0.125em 0.125em 0.75em rgba(0, 0, 0, 0.1);
+    background-color: #FFF;
     list-style: none;
+    overflow: hidden;
 
     &::before {
       content: "";
diff --git a/docs/links.md b/docs/links.md
index 744b023..2c18702 100644
--- a/docs/links.md
+++ b/docs/links.md
@@ -42,4 +42,4 @@ import FriendlySiteLinks from './.vitepress/components/FriendlySiteLinks.vue';
 - 仅接受合法网站的友链申请，且网站必须存在有效的原创内容。
 - 添加友链后，我会定期访问。
 - 不接受单向链接。
-- 若网站长时间无法正常访问，链接项不会被删除，但会被移动至列表的末尾，直到恢复正常访问。
+- 若网站长时间无法正常访问，链接项将会被隐藏，直到恢复正常访问。