Showing
1 changed file
with
28 additions
and
8 deletions
| @@ -1554,10 +1554,20 @@ | @@ -1554,10 +1554,20 @@ | ||
| 1554 | font-weight: bold; | 1554 | font-weight: bold; |
| 1555 | } | 1555 | } |
| 1556 | 1556 | ||
| 1557 | - .graph-status-chip.idle { background-color: #fff7ed; color: #b45309; } | ||
| 1558 | - .graph-status-chip.loading { background-color: #fef3c7; color: #92400e; } | ||
| 1559 | - .graph-status-chip.ready { background-color: #e8f5e9; color: #2f855a; } | ||
| 1560 | - .graph-status-chip.error { background-color: #fef2f2; color: #b91c1c; } | 1557 | + .graph-status-chip.graph-idle { background-color: #fff7ed; color: #b45309; } |
| 1558 | + .graph-status-chip.graph-loading { background-color: #fef3c7; color: #92400e; } | ||
| 1559 | + .graph-status-chip.graph-ready { background-color: #e8f5e9; color: #2f855a; } | ||
| 1560 | + .graph-status-chip.graph-error { background-color: #fef2f2; color: #b91c1c; } | ||
| 1561 | + | ||
| 1562 | + .chip-spinner { | ||
| 1563 | + display: inline-block; | ||
| 1564 | + width: 12px; | ||
| 1565 | + height: 12px; | ||
| 1566 | + border: 2px solid currentColor; | ||
| 1567 | + border-radius: 50%; | ||
| 1568 | + border-top-color: transparent; | ||
| 1569 | + animation: spin 1s linear infinite; | ||
| 1570 | + } | ||
| 1561 | 1571 | ||
| 1562 | .graph-panel-body { | 1572 | .graph-panel-body { |
| 1563 | padding: 10px 12px 14px 12px; | 1573 | padding: 10px 12px 14px 12px; |
| @@ -4999,7 +5009,7 @@ function getConsoleContainer() { | @@ -4999,7 +5009,7 @@ function getConsoleContainer() { | ||
| 4999 | <div class="graph-panel-subtitle">GraphRAG 节点关系可视化</div> | 5009 | <div class="graph-panel-subtitle">GraphRAG 节点关系可视化</div> |
| 5000 | </div> | 5010 | </div> |
| 5001 | <div class="graph-panel-actions"> | 5011 | <div class="graph-panel-actions"> |
| 5002 | - <span class="graph-status-chip idle" id="graphStatusChip">未生成</span> | 5012 | + <span class="graph-status-chip graph-idle" id="graphStatusChip">未生成</span> |
| 5003 | <button class="graph-panel-button" id="graphFullBtn" title="在新标签页查看">全屏</button> | 5013 | <button class="graph-panel-button" id="graphFullBtn" title="在新标签页查看">全屏</button> |
| 5004 | <button class="graph-panel-button" id="graphRefreshBtn" title="刷新知识图谱">刷新</button> | 5014 | <button class="graph-panel-button" id="graphRefreshBtn" title="刷新知识图谱">刷新</button> |
| 5005 | <button class="graph-panel-button" id="graphCollapseBtn" title="折叠/展开">收起</button> | 5015 | <button class="graph-panel-button" id="graphCollapseBtn" title="折叠/展开">收起</button> |
| @@ -5192,15 +5202,25 @@ function getConsoleContainer() { | @@ -5192,15 +5202,25 @@ function getConsoleContainer() { | ||
| 5192 | graphPanelState = state; | 5202 | graphPanelState = state; |
| 5193 | const chip = document.getElementById('graphStatusChip'); | 5203 | const chip = document.getElementById('graphStatusChip'); |
| 5194 | if (!chip) return; | 5204 | if (!chip) return; |
| 5195 | - chip.classList.remove('idle', 'loading', 'ready', 'error'); | ||
| 5196 | - chip.classList.add(state); | 5205 | + const stateClassMap = { |
| 5206 | + idle: 'graph-idle', | ||
| 5207 | + loading: 'graph-loading', | ||
| 5208 | + ready: 'graph-ready', | ||
| 5209 | + error: 'graph-error' | ||
| 5210 | + }; | ||
| 5211 | + chip.classList.remove('graph-idle', 'graph-loading', 'graph-ready', 'graph-error'); | ||
| 5212 | + chip.classList.add(stateClassMap[state] || 'graph-idle'); | ||
| 5197 | const textMap = { | 5213 | const textMap = { |
| 5198 | idle: '未生成', | 5214 | idle: '未生成', |
| 5199 | loading: '正在生成', | 5215 | loading: '正在生成', |
| 5200 | ready: '已生成', | 5216 | ready: '已生成', |
| 5201 | error: '加载失败' | 5217 | error: '加载失败' |
| 5202 | }; | 5218 | }; |
| 5203 | - chip.textContent = textMap[state] || state; | 5219 | + if (state === 'loading') { |
| 5220 | + chip.innerHTML = `<span class="chip-spinner" aria-hidden="true"></span><span>${textMap[state]}</span>`; | ||
| 5221 | + } else { | ||
| 5222 | + chip.textContent = textMap[state] || state; | ||
| 5223 | + } | ||
| 5204 | if (message) { | 5224 | if (message) { |
| 5205 | setGraphPanelPlaceholder(message, state === 'error' ? 'error' : ''); | 5225 | setGraphPanelPlaceholder(message, state === 'error' ? 'error' : ''); |
| 5206 | } | 5226 | } |
-
Please register or login to post a comment