From 51fde559582edd2ffbc1a783d4958000c6a5fa0d Mon Sep 17 00:00:00 2001
From: QIU SHENGMING <Kero64@126.com>
Date: Thu, 22 Jan 2026 07:10:23 +0800
Subject: [PATCH] Refactor friends page layout and styles

---
 src/pages/friends.astro | 66 ++++++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/src/pages/friends.astro b/src/pages/friends.astro
index 81ffaaa..f0df4ef 100644
--- a/src/pages/friends.astro
+++ b/src/pages/friends.astro
@@ -2,7 +2,6 @@
 import MainGridLayout from "@layouts/MainGridLayout.astro";
 import { Icon } from "astro-icon/components";
 
-// 1. 这里是数据区，以后要加友链，就在这里加！
 const friends = [
   {
     name: "Ad_closeNN の Blog",
@@ -68,37 +67,55 @@ const friends = [
 ---
 
 <MainGridLayout title="友链">
-    <!-- 页面头部 -->
+    <!-- 头部 -->
     <div class="flex items-center gap-4 mb-8 mt-4 px-2">
-        <div class="avatar placeholder">
-            <div class="bg-primary text-primary-content rounded-xl w-14 shadow-lg">
+        <div class="avatar">
+            <!-- 使用主题的主色调 (bg-primary) -->
+            <div class="bg-[var(--primary)] text-white rounded-xl w-14 flex items-center justify-center shadow-lg">
                 <Icon name="material-symbols:diversity-3" class="text-3xl" />
             </div>
         </div>
         <div>
-            <h1 class="text-3xl font-bold text-base-content">我的朋友们</h1>
-            <p class="text-base-content/60 mt-1">在这里发现更多有趣的世界</p>
+            <h1 class="text-3xl font-bold text-[var(--primary)]">我的朋友们</h1>
+            <p class="opacity-60 mt-1">在这里发现更多有趣的世界</p>
         </div>
     </div>
 
-    <!-- 友链卡片网格 -->
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
+    <!-- 卡片网格 -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
         {
             friends.map((friend) => (
                 <a 
                     href={friend.url} 
                     target="_blank" 
-                    class="card bg-base-100 shadow-md hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-base-200"
+                    class="group relative block"
                 >
-                    <div class="card-body p-5 flex flex-row items-center gap-4">
-                        <div class="avatar">
-                            <div class="w-14 mask mask-squircle bg-base-200">
-                                <img src={friend.avatar} loading="lazy" alt={friend.name} />
+                    <!-- 关键修改：使用了 card-base 类
+                         这是 Fuwari 全局定义的类，它会自动处理：
+                         1. 白天/黑夜背景色
+                         2. 透明度
+                         3. 边框颜色
+                    -->
+                    <div class="card-base flex items-center gap-4 p-4 rounded-xl transition-all duration-300
+                                hover:scale-[1.02] hover:shadow-lg
+                                border border-black/5 dark:border-white/5">
+                        
+                        <!-- 头像 -->
+                        <div class="avatar flex-shrink-0">
+                            <div class="w-16 h-16 rounded-full overflow-hidden shadow-sm">
+                                <img src={friend.avatar} loading="lazy" alt={friend.name} class="object-cover w-full h-full bg-white" />
                             </div>
                         </div>
+
+                        <!-- 文字信息 -->
                         <div class="flex-1 min-w-0">
-                            <h3 class="card-title text-base font-bold truncate text-base-content">{friend.name}</h3>
-                            <p class="text-xs text-base-content/60 line-clamp-2 mt-1">{friend.desc}</p>
+                            <!-- text-75 是 Fuwari 的常用透明度写法，或者直接用 opacity -->
+                            <h3 class="text-lg font-bold truncate group-hover:text-[var(--primary)] transition-colors">
+                                {friend.name}
+                            </h3>
+                            <p class="text-sm opacity-60 line-clamp-2 mt-1">
+                                {friend.desc}
+                            </p>
                         </div>
                     </div>
                 </a>
@@ -106,19 +123,20 @@ const friends = [
         }
     </div>
 
-    <!-- 申请友链区域 -->
-    <div class="alert shadow-lg bg-base-100 border-l-4 border-primary">
-        <Icon name="material-symbols:add-link" class="text-2xl text-primary" />
-        <div>
-            <h3 class="font-bold">想交换友链？</h3>
-            <div class="text-sm opacity-80">
-                欢迎互换友链。请确保您的网站可以正常访问。
-            </div>
+    <!-- 底部申请框 -->
+    <!-- 同样使用了 card-base 保持统一风格 -->
+    <div class="card-base rounded-xl p-6 flex items-center gap-4 border border-black/5 dark:border-white/5">
+        <div class="p-3 bg-[var(--primary)] text-white rounded-full">
+            <Icon name="material-symbols:add-link" class="text-2xl" />
+        </div>
+        <div class="flex-1">
+            <h3 class="font-bold text-[var(--primary)]">想交换友链？</h3>
+            <p class="text-sm opacity-60">欢迎优秀博客互换友链。</p>
         </div>
         <a 
             href="https://github.com/MCKero6423/fuwari/blob/main/src/pages/friends.astro" 
             target="_blank"
-            class="btn btn-sm btn-primary"
+            class="px-4 py-2 bg-[var(--primary)] hover:brightness-110 text-white text-sm font-bold rounded-lg transition-all"
         >
             提交申请
         </a>