From 6a8c4d95d5908d5c2205a15ba4f14a4b1fcc5565 Mon Sep 17 00:00:00 2001
From: logan <admin@attacker.club>
Date: Sun, 24 May 2026 15:46:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Redis/MySQL=20=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E9=AA=A8=E6=9E=B6=E5=B1=8F=20loading=20=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SchemaSidebar: MySQL 表列表加载改为 6 行骨架屏 animate-pulse
- SchemaSidebar: Redis key 列表加载改为 6 行骨架屏 animate-pulse
- RedisDetailPage: key 表格加载时显示 5 行骨架屏 + 加载中提示
- 替换原来的纯文字/spinner，视觉上更流畅
---
 frontend/src/components/SchemaSidebar.tsx | 24 ++++++++++++++++++-----
 frontend/src/pages/RedisDetailPage.tsx    | 17 +++++++++++++++-
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/SchemaSidebar.tsx b/frontend/src/components/SchemaSidebar.tsx
index 41fa9d4..b41c66b 100644
--- a/frontend/src/components/SchemaSidebar.tsx
+++ b/frontend/src/components/SchemaSidebar.tsx
@@ -215,8 +215,14 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
             {/* Table List */}
             <div className="flex-1 overflow-y-auto">
               {loadingTables ? (
-                <div className="flex items-center gap-2 p-3 text-xs text-[var(--dg-text-muted)]">
-                  <Loader2 className="w-3 h-3 animate-spin" /> 加载中...
+                <div className="space-y-1 p-2">
+                  {Array.from({ length: 6 }, (_, i) => (
+                    <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+                      <div className="w-3 h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
+                      <div className="h-3.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
+                      <div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-8" />
+                    </div>
+                  ))}
                 </div>
               ) : filteredTables.length === 0 ? (
                 <div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无表</div>
@@ -311,10 +317,18 @@ export default function SchemaSidebar({ instanceId, database, dbType, onInsert }
 
             {/* Key List + Detail */}
             <div className="flex-1 overflow-y-auto">
-              {redisKeys.length === 0 ? (
-                <div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">
-                  {loadingRedis ? '扫描中...' : '无 Keys'}
+              {loadingRedis ? (
+                <div className="space-y-1 p-2">
+                  {Array.from({ length: 6 }, (_, i) => (
+                    <div key={i} className="flex items-center gap-2 px-2 py-1.5">
+                      <div className="w-3 h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse" />
+                      <div className="h-3.5 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
+                      <div className="h-3 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-10" />
+                    </div>
+                  ))}
                 </div>
+              ) : redisKeys.length === 0 ? (
+                <div className="p-3 text-xs text-[var(--dg-text-muted)] text-center">无 Keys</div>
               ) : (
                 <div className="divide-y divide-[var(--dg-border-light)]">
                   {redisKeys.map(k => (
diff --git a/frontend/src/pages/RedisDetailPage.tsx b/frontend/src/pages/RedisDetailPage.tsx
index fd46cc4..f9ec823 100644
--- a/frontend/src/pages/RedisDetailPage.tsx
+++ b/frontend/src/pages/RedisDetailPage.tsx
@@ -137,6 +137,21 @@ export default function RedisDetailPage() {
 
           {/* 键列表 */}
           <div className="overflow-x-auto">
+            {loading ? (
+              <div className="space-y-2 p-4">
+                {Array.from({ length: 5 }, function (_, i) {
+                  return <div key={i} className="flex items-center gap-4">
+                    <div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse flex-1" />
+                    <div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-16" />
+                    <div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-12" />
+                    <div className="h-4 bg-[var(--dg-bg-tertiary)] rounded animate-pulse w-20" />
+                  </div>;
+                })}
+                <div className="text-center text-xs text-[var(--dg-text-muted)] pt-2">加载中...</div>
+              </div>
+            ) : keys.length === 0 ? (
+              <div className="text-center py-8 text-[var(--dg-text-muted)]">点击刷新加载键列表</div>
+            ) : (
             <table className="w-full text-sm">
               <thead><tr className="text-left text-[var(--dg-text-muted)] border-b border-[var(--dg-border)]">
                 <th className="px-4 py-2">键名</th><th className="px-4 py-2">类型</th><th className="px-4 py-2">TTL</th><th className="px-4 py-2">操作</th>
@@ -157,7 +172,7 @@ export default function RedisDetailPage() {
                 })}
               </tbody>
             </table>
-            {keys.length === 0 && <div className="text-center py-8 text-[var(--dg-text-muted)]">点击刷新加载键列表</div>}
+            )}
           </div>
         </div>
       )}