| <!DOCTYPE html> |
| <html lang="zh-CN"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Grok2API - 缓存管理</title> |
| <link rel="icon" href="/static/common/img/favicon/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet"> |
| <link href="/static/common/css/common.css?v=1.5.0" rel="stylesheet"> |
| <link href="/static/admin/css/cache.css?v=1.5.0" rel="stylesheet"> |
| <link href="/static/common/css/toast.css" rel="stylesheet"> |
| </head> |
|
|
| <body class="min-h-screen flex flex-col" style="background-color: var(--bg);"> |
| <div id="app-header"></div> |
|
|
| <main class="space-y-6 flex-1 container mx-auto max-w-5xl px-6 py-8 fade-in"> |
| <div class="space-y-6"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h2 class="text-2xl font-semibold tracking-tight">缓存管理</h2> |
| <p class="text-[var(--accents-4)] mt-1 text-sm">管理本地资源与在线资产缓存。</p> |
| </div> |
| </div> |
|
|
| <div class="h-px bg-[var(--border)] my-6"></div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="stat-card cache-card" data-type="image"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <div class="cache-stat-label">本地图片</div> |
| <div class="cache-stat-value"> |
| <span id="img-count">0</span> |
| <span class="text-xs text-[var(--accents-4)] ml-1">个文件</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div id="img-size" class="text-xs font-mono text-[var(--accents-4)]">0 MB</div> |
| <button onclick="clearCache('image')" class="cache-action-btn mt-3" title="清空缓存"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" |
| d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stat-card cache-card" data-type="video"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <div class="cache-stat-label">本地视频</div> |
| <div class="cache-stat-value"> |
| <span id="video-count">0</span> |
| <span class="text-xs text-[var(--accents-4)] ml-1">个文件</span> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div id="video-size" class="text-xs font-mono text-[var(--accents-4)]">0 MB</div> |
| <button onclick="clearCache('video')" class="cache-action-btn mt-3" title="清空缓存"> |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" |
| d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="stat-card cache-card" data-type="online"> |
| <div class="flex items-start justify-between"> |
| <div> |
| <div class="cache-stat-label">在线资产</div> |
| <div class="cache-stat-value"> |
| <span id="online-count">0</span> |
| <span class="text-xs text-[var(--accents-4)] ml-1">个文件</span> |
| </div> |
| <div id="online-status" class="text-xs text-green-600 mt-1">连接正常</div> |
| <div id="online-last-clear" class="text-xs text-[var(--accents-4)] mt-1"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="local-cache-lists" class="space-y-4 hidden"> |
| <div id="local-image-list" class="cache-list hidden"> |
| <div class="rounded-lg overflow-hidden bg-white overflow-x-auto"> |
| <table class="geist-table min-w-[600px]"> |
| <thead> |
| <tr> |
| <th class="w-10 text-center"> |
| <input id="local-image-select-all" type="checkbox" class="checkbox" onchange="toggleLocalSelectAll('image', this)"> |
| </th> |
| <th class="w-108 text-left">文件</th> |
| <th class="w-32 text-left">大小</th> |
| <th class="w-48 text-left">时间</th> |
| <th class="w-24 text-center">操作</th> |
| </tr> |
| </thead> |
| <tbody id="local-image-body"></tbody> |
| </table> |
| </div> |
| </div> |
| <div id="local-video-list" class="cache-list hidden"> |
| <div class="rounded-lg overflow-hidden bg-white overflow-x-auto"> |
| <table class="geist-table min-w-[600px]"> |
| <thead> |
| <tr> |
| <th class="w-10 text-center"> |
| <input id="local-video-select-all" type="checkbox" class="checkbox" onchange="toggleLocalSelectAll('video', this)"> |
| </th> |
| <th class="w-108 text-left">文件</th> |
| <th class="w-32 text-left">大小</th> |
| <th class="w-48 text-left">时间</th> |
| <th class="w-24 text-center">操作</th> |
| </tr> |
| </thead> |
| <tbody id="local-video-body"></tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="online-assets-table" class="rounded-lg overflow-hidden bg-white mb-4 overflow-x-auto"> |
| <table class="geist-table min-w-[800px]"> |
| <thead> |
| <tr> |
| <th class="w-10 text-center"> |
| <input id="select-all" type="checkbox" class="checkbox" onchange="toggleSelectAll(this)"> |
| </th> |
| <th class="w-48 text-left">Token</th> |
| <th class="w-32 text-center">类型</th> |
| <th class="w-32 text-center">资产数</th> |
| <th class="w-42 text-left">上次清空时间</th> |
| <th class="w-24 text-center">操作</th> |
| </tr> |
| </thead> |
| <tbody id="account-table-body"></tbody> |
| </table> |
| <div id="account-empty" class="hidden table-empty">暂无可用账号</div> |
| </div> |
|
|
| </div> |
| </div> |
| </main> |
| <div id="app-footer"></div> |
|
|
| <div id="batch-actions" |
| class="fixed bottom-8 left-1/2 -translate-x-1/2 z-20 bg-white border border-[var(--border)] rounded-full px-3 py-2 flex items-center shadow-lg gap-3 cursor-move select-none active:cursor-grabbing whitespace-nowrap"> |
| <div class="text-sm font-medium flex items-center gap-2"> |
| <span class="text-[var(--accents-5)] text-xs">已选择</span> |
| <span class="bg-black text-white text-xs px-1.5 py-0.5 rounded-full" id="selected-count">0</span> |
| <span class="text-[var(--accents-5)] text-xs">项</span> |
| </div> |
| <span class="toolbar-sep"></span> |
| <div class="flex items-center gap-1"> |
| <button id="btn-load-stats" onclick="handleLoadClick()" |
| class="geist-button-outline text-xs px-3 gap-1 border-0 hover:bg-gray-100"> |
| 加载 |
| </button> |
| <button id="btn-delete-assets" onclick="handleDeleteClick()" class="geist-button-danger text-xs px-3"> |
| 清理 |
| </button> |
| </div> |
| <div id="batch-progress" class="hidden text-xs text-[var(--accents-5)] flex items-center gap-2"> |
| <span class="toolbar-sep"></span> |
| <span id="batch-progress-text"></span> |
| <button id="btn-pause-action" type="button" class="batch-link hidden">暂停</button> |
| <button id="btn-stop-action" type="button" class="batch-link hidden">终止</button> |
| </div> |
| </div> |
|
|
| <dialog id="confirm-dialog" class="confirm-dialog"> |
| <div class="confirm-dialog-body"> |
| <div class="confirm-dialog-title">请确认</div> |
| <div id="confirm-message" class="confirm-dialog-message"></div> |
| <div class="confirm-dialog-actions"> |
| <button id="confirm-cancel" type="button" class="geist-button-outline text-xs px-3">取消</button> |
| <button id="confirm-ok" type="button" class="geist-button-danger text-xs px-3">确定</button> |
| </div> |
| </div> |
| </dialog> |
|
|
| <dialog id="failure-dialog" class="confirm-dialog"> |
| <div class="confirm-dialog-body"> |
| <div class="confirm-dialog-title">失败详情</div> |
| <div id="failure-list" class="failure-list"></div> |
| <div class="confirm-dialog-actions"> |
| <button id="failure-close" type="button" class="geist-button-outline text-xs px-3">关闭</button> |
| <button id="failure-retry" type="button" class="geist-button text-xs px-3">重试失败项</button> |
| </div> |
| </div> |
| </dialog> |
|
|
| <script src="/static/common/js/admin-auth.js?v=1.5.0"></script> |
| <script src="/static/common/js/batch-sse.js?v=1.5.0"></script> |
| <script src="/static/common/js/header.js?v=1.5.0"></script> |
| <script src="/static/common/js/footer.js?v=1.5.0"></script> |
| <script src="/static/common/js/toast.js"></script> |
| <script src="/static/admin/js/cache.js?v=1.5.0"></script> |
| <script src="/static/common/js/draggable.js"></script> |
| </body> |
|
|
| </html> |
|
|
