马一丁

Update the style of "Generifying"

@@ -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 }