rlwj-lab/opsxsql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Redis/MySQL 加载骨架屏 loading 效果

Browse Source 
- SchemaSidebar: MySQL 表列表加载改为 6 行骨架屏 animate-pulse
- SchemaSidebar: Redis key 列表加载改为 6 行骨架屏 animate-pulse
- RedisDetailPage: key 表格加载时显示 5 行骨架屏 + 加载中提示
- 替换原来的纯文字/spinner，视觉上更流畅
This commit is contained in:
logan committed 2026-05-24 15:46:58 +08:00
1 parent ca99f0ea7f
commit 6a8c4d95d5
2 files changed
+35 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/SchemaSidebar.tsx
+19 -5
View File
@@ -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 => (
frontend/src/pages/RedisDetailPage.tsx
+16 -1
View File
@@ -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>
)}