From 5ff5b53ed4a997b85c45e1ced12b271b9f4e5f10 Mon Sep 17 00:00:00 2001
From: Leonmmcoset <testmod@qq.com>
Date: Mon, 7 Jul 2025 19:29:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(UI):=20=E7=A7=BB=E9=99=A4=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=9B=BE=E7=89=87=E5=B9=B6=E6=B7=BB=E5=8A=A0=E9=AA=A8?=
 =?UTF-8?q?=E6=9E=B6=E5=B1=8F=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除多个页面中的默认卡片图片以简化UI
在评分图表区域添加骨架屏加载动画，提升用户体验
---
 app.php            |  2 ++
 developer_apps.php |  2 +-
 index.php          |  4 ++--
 styles.css         | 27 +++++++++++++++++++++++++++
 tags.php           |  2 +-
 5 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app.php b/app.php
index a8ad741..f5cf99b 100644
--- a/app.php
+++ b/app.php
@@ -212,6 +212,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
                 </div>
                 <div class="col-md-6">
                     <h2>评分分布</h2>
+                    <div id="ratingChartSkeleton" class="skeleton-chart"></div>
                     <canvas id="ratingChart" width="400" height="200"></canvas>
                     <script>
                         const ctx = document.getElementById('ratingChart').getContext('2d');
@@ -297,6 +298,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['rating'])) {
                                 }
                             }
                         });
+                        document.getElementById('ratingChartSkeleton').style.display = 'none';
                     </script>
                 </div>
             <div class="col-md-6">
diff --git a/developer_apps.php b/developer_apps.php
index a280c8f..5a3ca68 100644
--- a/developer_apps.php
+++ b/developer_apps.php
@@ -90,7 +90,7 @@ $resultApps = $conn->query($sqlApps);
                             $image = $resultImage ? $resultImage->fetch_assoc() : null;
                             $imagePath = $image ? $image['image_path'] : 'default-app.png';
                             ?>
-                            <img src="<?php echo $imagePath; ?>" class="card-img-top" alt="<?php echo htmlspecialchars($app['name']); ?>">
+                            
                             <div class="card-body">
                                 <h5 class="card-title"><?php echo htmlspecialchars($app['name']); ?></h5>
                                 <p class="card-text"><?php echo htmlspecialchars(substr($app['description'], 0, 100)); ?>...</p>
diff --git a/index.php b/index.php
index 1ead044..f6b24c4 100644
--- a/index.php
+++ b/index.php
@@ -173,7 +173,7 @@ if (!isset($conn) || !$conn instanceof mysqli) {
                 while ($row = $recommendResult->fetch_assoc()) {
                     echo '<div class="col-md-3 mb-4">';
                     echo '<div class="card blur-bg">';
-                    echo '<img src="images/default.png" class="card-img-top" alt="'. htmlspecialchars($row['name']) . '">';
+                    
                     echo '<div class="card-body">';
                     echo '<h5 class="card-title">'. htmlspecialchars($row['name']) . '</h5>';
                     echo '<p class="card-text">'. substr(htmlspecialchars($row['description']), 0, 100) . '...</p>';
@@ -280,7 +280,7 @@ if (!isset($conn) || !$conn instanceof mysqli) {
                 while ($row = $result->fetch_assoc()) {
                     echo '<div class="col-md-3 mb-4">';
                     echo '<div class="card blur-bg">';
-                    echo '<img src="images/default.png" class="card-img-top" alt="'. $row['name'] . '">';
+                    
                     echo '<div class="card-body">';
                     echo '<h5 class="card-title">'. $row['name'] . '</h5>';
                     echo '<p class="card-text">'. substr($row['description'], 0, 100) . '...</p>';
diff --git a/styles.css b/styles.css
index fa286dc..14d90e8 100644
--- a/styles.css
+++ b/styles.css
@@ -128,4 +128,31 @@ body {
 .age-rating svg {
     width: 20px;
     height: 20px;
+}
+
+/* 骨架屏加载动画 */
+.skeleton-chart {
+    width: 400px;
+    height: 200px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+}
+
+@keyframes shimmer {
+    0% { background-position: -468px 0 }
+    100% { background-position: 468px 0 }
+}
+
+.skeleton-chart::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%);
+    animation: shimmer 2s infinite;
 }
\ No newline at end of file
diff --git a/tags.php b/tags.php
index 3d2a842..fe2a0f8 100644
--- a/tags.php
+++ b/tags.php
@@ -135,7 +135,7 @@ $tagResult = $conn->query("SELECT id, name FROM tags ORDER BY name");
                 <?php while ($row = $result->fetch_assoc()): ?>
                     <div class="col-md-3 mb-4">
                         <div class="card blur-bg">
-                            <img src="images/default.png" class="card-img-top" alt="<?php echo $row['name']; ?>">
+                            
                             <div class="card-body">
                                 <h5 class="card-title"><?php echo $row['name']; ?></h5>
                                 <p class="card-text"><?php echo substr($row['description'], 0, 100); ?>...</p>