重构: 实现前后端分离架构

wanshenmean

2026-03-13 d216edd0e9931d71664f33e625cff6d8131a0fad

 Code/WCS/WIDESEAWCS_S7Simulator/WIDESEAWCS_S7Simulator.Web/Pages/Index.cshtml

@@ -11,9 +11,15 @@
        </h2>
        <p class="text-muted mb-0 mt-1">管理和监控 S7 PLC 仿真器实例</p>
    </div>
    <div class="d-flex align-items-center gap-3">
        <div id="refreshIndicator" class="text-muted small" style="display: none;">
            <i class="bi bi-arrow-clockwise spin-icon me-1"></i>
            <span>更新中...</span>
        </div>
    <a asp-page="/Create" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>创建实例
    </a>
    </div>
</div>

<div id="instancesContainer">
@@ -41,18 +47,29 @@
    let autoRefreshInterval = null;

    document.addEventListener('DOMContentLoaded', function () {
        loadInstances();
        startAutoRefresh(loadInstances, 5000);
        loadInstances(false); // 首次加载显示 loading
        startAutoRefresh(() => loadInstances(true), 2000); // 自动刷新使用静默模式，每2秒刷新
    });

    async function loadInstances() {
    async function loadInstances(silent = false) {
        const refreshIndicator = document.getElementById('refreshIndicator');
        if (silent && refreshIndicator) {
            refreshIndicator.style.display = 'block';
        }

        try {
            const instances = await apiCall(`${API_BASE_URL}/SimulatorInstances`);
            const instances = await apiCall(`${API_BASE_URL}/SimulatorInstances`, { silent: silent });
            renderInstances(instances);
        } catch (error) {
            console.error('Failed to load instances:', error);
            if (!silent) {
            document.getElementById('loadingState').classList.add('d-none');
            document.getElementById('emptyState').classList.remove('d-none');
            }
        } finally {
            if (silent && refreshIndicator) {
                refreshIndicator.style.display = 'none';
            }
        }
    }

@@ -173,7 +190,7 @@
                    method: 'POST'
                });
                showToast(`实例 "${id}" 启动命令已发送`, 'success');
                setTimeout(() => loadInstances(), 1000);
                setTimeout(() => loadInstances(false), 1000);
            } catch (error) {
                console.error('Failed to start instance:', error);
            }
@@ -187,7 +204,7 @@
                    method: 'POST'
                });
                showToast(`实例 "${id}" 停止命令已发送`, 'success');
                setTimeout(() => loadInstances(), 1000);
                setTimeout(() => loadInstances(false), 1000);
            } catch (error) {
                console.error('Failed to stop instance:', error);
            }
@@ -201,7 +218,7 @@
                    method: 'DELETE'
                });
                showToast(`实例 "${id}" 已删除`, 'success');
                loadInstances();
                loadInstances(false);
            } catch (error) {
                console.error('Failed to delete instance:', error);
            }