1977 lines
90 KiB
JavaScript
1977 lines
90 KiB
JavaScript
/**
|
||
* @class ConfigurationConfig
|
||
* @classdesc 构型配置开发组件，采用卡片风格，展示机型信息和构型信息。
|
||
* @extends HTMLElement
|
||
*/
|
||
class ConfigurationConfig extends HTMLElement {
|
||
constructor() {
|
||
super();
|
||
this.attachShadow({ mode: 'open' });
|
||
this.currentView = 'planes'; // 'planes' 或 'configurations' 或 'editor'
|
||
this.selectedPlane = null;
|
||
this.selectedConfiguration = null;
|
||
this.userAccessLevel = 0; // 添加用户权限级别属性
|
||
|
||
/**
|
||
* 初始化DOM结构，采用卡片风格，展示机型信息和构型信息。
|
||
*/
|
||
this.shadowRoot.innerHTML = `
|
||
<style>
|
||
:host {
|
||
display: block;
|
||
padding: 20px;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
height: calc(100vh - 40px);
|
||
overflow: hidden;
|
||
}
|
||
.page-header {
|
||
margin-bottom: 20px;
|
||
}
|
||
.page-title {
|
||
color: #5c6bc0;
|
||
font-weight: 500;
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.back-section {
|
||
margin-bottom: 15px;
|
||
}
|
||
.back-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
color: #5c6bc0;
|
||
font-size: 14px;
|
||
text-decoration: none;
|
||
}
|
||
.back-button:hover {
|
||
color: #3949ab;
|
||
}
|
||
.back-icon {
|
||
margin-right: 5px;
|
||
font-size: 16px;
|
||
}
|
||
.config-dev-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
max-height: calc(100vh - 160px);
|
||
overflow-y: auto;
|
||
padding-right: 10px;
|
||
padding-top: 10px;
|
||
padding-bottom: 30px;
|
||
width: 100%;
|
||
}
|
||
.config-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
cursor: pointer;
|
||
min-height: 280px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
}
|
||
.config-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.icon-container {
|
||
width: 160px;
|
||
height: 160px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
.plane-icon {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
.text-container {
|
||
width: 100%;
|
||
text-align: center;
|
||
flex-grow: 1;
|
||
}
|
||
.config-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: #333;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.config-desc {
|
||
font-size: 16px;
|
||
color: #666;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
padding: 0 10px;
|
||
}
|
||
.loading {
|
||
text-align: center;
|
||
padding: 20px;
|
||
color: #666;
|
||
}
|
||
.error {
|
||
color: #f44336;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
.config-info {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-top: 8px;
|
||
}
|
||
/* 构型卡片特定样式 */
|
||
.config-dev-container.configurations {
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.config-card.configuration {
|
||
min-height: auto;
|
||
height: 80px;
|
||
padding: 0 20px;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.config-card.configuration .config-title {
|
||
font-size: 18px;
|
||
margin: 0;
|
||
height: auto;
|
||
flex-grow: 1;
|
||
text-align: left;
|
||
}
|
||
.delete-button {
|
||
width: 24px;
|
||
height: 24px;
|
||
border: none;
|
||
background: none;
|
||
cursor: pointer;
|
||
padding: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #999;
|
||
transition: color 0.3s;
|
||
margin-left: 10px;
|
||
}
|
||
.delete-button:hover {
|
||
color: #f44336;
|
||
}
|
||
.delete-button svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
/* 新建构型卡片样式 */
|
||
.config-card.new-config {
|
||
border: 2px dashed #5c6bc0;
|
||
background: #f8f9ff;
|
||
box-shadow: none;
|
||
min-height: auto;
|
||
height: 80px;
|
||
padding: 0 20px;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
.config-card.new-config:hover {
|
||
background: #f0f2ff;
|
||
box-shadow: none;
|
||
}
|
||
.config-card.new-config .config-title {
|
||
color: #5c6bc0;
|
||
font-size: 18px;
|
||
margin: 0;
|
||
height: auto;
|
||
}
|
||
/* 构型编辑视图样式 */
|
||
.editor-container {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 30px;
|
||
height: calc(100vh - 160px);
|
||
overflow-y: auto;
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
gap: 30px;
|
||
}
|
||
.editor-main {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
min-width: 0; /* 防止内容溢出 */
|
||
padding-right: 30px;
|
||
border-right: 1px solid #e8eaf6;
|
||
}
|
||
.editor-sidebar {
|
||
width: 300px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
position: sticky;
|
||
top: 30px;
|
||
height: fit-content;
|
||
}
|
||
.status-card {
|
||
background: #f8f9ff;
|
||
border: 1px solid #e8eaf6;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
.status-card-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #5c6bc0;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.status-card-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
color: #5c6bc0;
|
||
}
|
||
.status-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.status-item {
|
||
background: white;
|
||
border: 1px solid #e8eaf6;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
.status-item.empty {
|
||
color: #999;
|
||
font-style: italic;
|
||
}
|
||
.section {
|
||
margin-bottom: 30px;
|
||
padding-right: 10px;
|
||
}
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #5c6bc0;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #e8eaf6;
|
||
}
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 25px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-row-2 {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 30px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-row-3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 25px;
|
||
margin-bottom: 15px;
|
||
}
|
||
.form-label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
.form-input:focus {
|
||
border-color: #5c6bc0;
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
|
||
}
|
||
.form-input[readonly] {
|
||
background-color: #f5f5f5;
|
||
border-color: #e0e0e0;
|
||
color: #666;
|
||
cursor: not-allowed;
|
||
}
|
||
.form-input[readonly]:focus {
|
||
border-color: #e0e0e0;
|
||
box-shadow: none;
|
||
}
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
.form-textarea:focus {
|
||
border-color: #5c6bc0;
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
|
||
}
|
||
.checkbox-group {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
.checkbox-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.checkbox-item input[type="checkbox"] {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.checkbox-item label {
|
||
font-size: 14px;
|
||
color: #555;
|
||
}
|
||
.button-group {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
.button {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
.button-primary {
|
||
background-color: #5c6bc0;
|
||
color: white;
|
||
}
|
||
.button-primary:hover {
|
||
background-color: #3949ab;
|
||
}
|
||
.button-secondary {
|
||
background-color: #e8eaf6;
|
||
color: #5c6bc0;
|
||
}
|
||
.button-secondary:hover {
|
||
background-color: #c5cae9;
|
||
}
|
||
.log-section {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 30px;
|
||
}
|
||
.log-box {
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
}
|
||
.log-box-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #5c6bc0;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
<div class="config-development">
|
||
<div class="page-header">
|
||
<h2 class="page-title" id="pageTitle">机型</h2>
|
||
<div class="back-section" id="backSection" style="display: none;">
|
||
<a class="back-button" id="backButton">
|
||
<span class="back-icon">←</span>
|
||
<span>返回机型列表</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="config-dev-container" id="contentContainer">
|
||
<div class="loading">加载中...</div>
|
||
</div>
|
||
<div class="editor-container" id="editorContainer" style="display: none;">
|
||
<div class="editor-main">
|
||
<div class="section">
|
||
<h3 class="section-title">基本信息</h3>
|
||
<div class="form-row-3">
|
||
<div class="form-group">
|
||
<label class="form-label">操作系统</label>
|
||
<input type="text" class="form-input" id="osName" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">系统版本</label>
|
||
<input type="text" class="form-input" id="osVersion" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">RTX版本</label>
|
||
<input type="text" class="form-input" id="rtxVersion" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<h3 class="section-title">系统配置</h3>
|
||
<div class="form-row-3">
|
||
<div class="form-group">
|
||
<label class="form-label">CPU亲和性</label>
|
||
<input type="text" class="form-input" id="cpuAffinity" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">域ID</label>
|
||
<input type="text" class="form-input" id="domainId" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">工作路径</label>
|
||
<input type="text" class="form-input" id="workPath" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row-3">
|
||
<div class="form-group">
|
||
<label class="form-label">模型路径</label>
|
||
<input type="text" class="form-input" id="modelsPath" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">服务路径</label>
|
||
<input type="text" class="form-input" id="servicesPath" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="section">
|
||
<h3 class="section-title">输出配置</h3>
|
||
<div class="log-section">
|
||
<div class="log-box">
|
||
<div class="log-box-title">控制台输出配置</div>
|
||
<div class="checkbox-group">
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="consoleDebug" />
|
||
<label for="consoleDebug">Debug</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="consoleInfo" />
|
||
<label for="consoleInfo">Info</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="consoleWarning" />
|
||
<label for="consoleWarning">Warning</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="consoleError" />
|
||
<label for="consoleError">Error</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="log-box">
|
||
<div class="log-box-title">日志输出配置</div>
|
||
<div class="checkbox-group">
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="logDebug" />
|
||
<label for="logDebug">Debug</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="logInfo" />
|
||
<label for="logInfo">Info</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="logWarning" />
|
||
<label for="logWarning">Warning</label>
|
||
</div>
|
||
<div class="checkbox-item">
|
||
<input type="checkbox" id="logError" />
|
||
<label for="logError">Error</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="button-group">
|
||
<button class="button button-primary" id="saveButton">保存构型</button>
|
||
<button class="button button-secondary" id="cancelButton">取消</button>
|
||
</div>
|
||
</div>
|
||
<div class="editor-sidebar">
|
||
<div class="status-card">
|
||
<div class="status-card-title" style="position:relative;">
|
||
加载模型
|
||
<img src="/assets/icons/png/plus_b.png" alt="添加模型组" title="添加模型组" id="addModelGroupBtn" style="position:absolute;top:0;right:0;width:20px;height:20px;cursor:pointer;z-index:2;" />
|
||
</div>
|
||
<div class="status-list" id="pendingModelsList">
|
||
<div class="status-item empty">暂无待加载模型</div>
|
||
</div>
|
||
</div>
|
||
<div class="status-card">
|
||
<div class="status-card-title">
|
||
加载服务
|
||
</div>
|
||
<div class="status-list" id="pendingServicesList">
|
||
<div class="status-item empty">暂无待加载服务</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// 绑定事件
|
||
this.shadowRoot.getElementById('backButton').addEventListener('click', (e) => {
|
||
e.preventDefault();
|
||
if (this.currentView === 'editor') {
|
||
this.showConfigurations(this.selectedPlane);
|
||
} else {
|
||
this.showPlanes();
|
||
}
|
||
});
|
||
|
||
// 绑定编辑器按钮事件
|
||
this.shadowRoot.getElementById('saveButton').addEventListener('click', () => this.saveConfiguration());
|
||
this.shadowRoot.getElementById('cancelButton').addEventListener('click', () => {
|
||
this.showConfigurations(this.selectedPlane);
|
||
});
|
||
|
||
// 添加输入验证
|
||
this.shadowRoot.getElementById('cpuAffinity').addEventListener('input', (e) => {
|
||
// 只允许数字和英文逗号
|
||
e.target.value = e.target.value.replace(/[^0-9,]/g, '');
|
||
});
|
||
|
||
this.shadowRoot.getElementById('domainId').addEventListener('input', (e) => {
|
||
// 只允许数字
|
||
e.target.value = e.target.value.replace(/[^0-9]/g, '');
|
||
// 限制范围在0-232之间
|
||
const value = parseInt(e.target.value);
|
||
if (value > 232) {
|
||
e.target.value = '232';
|
||
}
|
||
});
|
||
|
||
// 获取机型数据
|
||
this.loadPlanes();
|
||
|
||
// 渲染sidebar后，绑定添加模型组按钮事件
|
||
const addModelGroupBtn = this.shadowRoot.getElementById('addModelGroupBtn');
|
||
if (addModelGroupBtn) {
|
||
addModelGroupBtn.onclick = () => this.showAddModelGroupDialog();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method loadPlanes
|
||
* @description 从服务器获取机型数据并更新UI
|
||
*/
|
||
async loadPlanes() {
|
||
try {
|
||
const response = await fetch('/api/planes');
|
||
if (!response.ok) {
|
||
throw new Error('获取机型数据失败');
|
||
}
|
||
const planes = await response.json();
|
||
this.renderPlanes(planes);
|
||
} catch (error) {
|
||
console.error('加载机型数据失败:', error);
|
||
this.showError('加载机型数据失败，请稍后重试');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method loadConfigurations
|
||
* @description 从服务器获取构型数据并更新UI
|
||
* @param {string} planeName - 机型名称
|
||
*/
|
||
async loadConfigurations(planeName) {
|
||
try {
|
||
const response = await fetch(`/api/configurations?plane=${encodeURIComponent(planeName)}`);
|
||
if (!response.ok) {
|
||
throw new Error('获取构型数据失败');
|
||
}
|
||
const configs = await response.json();
|
||
this.renderConfigurations(configs, planeName);
|
||
} catch (error) {
|
||
console.error('加载构型数据失败:', error);
|
||
this.showError('加载构型数据失败，请稍后重试');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method renderPlanes
|
||
* @description 渲染机型卡片
|
||
* @param {Array} planes - 机型数据数组
|
||
*/
|
||
renderPlanes(planes) {
|
||
const container = this.shadowRoot.getElementById('contentContainer');
|
||
if (!planes || planes.length === 0) {
|
||
container.innerHTML = '<div class="error">暂无机型数据</div>';
|
||
return;
|
||
}
|
||
|
||
container.innerHTML = planes.map(plane => `
|
||
<div class="config-card" data-plane="${plane.PlaneName}">
|
||
<div class="icon-container">
|
||
${plane.Icon ? `<img class="plane-icon" src="${plane.Icon}" alt="${plane.PlaneName}">` : ''}
|
||
</div>
|
||
<div class="text-container">
|
||
<div class="config-title">${plane.PlaneName || '未知机型'}</div>
|
||
<div class="config-desc">${plane.Description || '暂无描述'}</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// 添加点击事件
|
||
container.querySelectorAll('.config-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
const planeName = card.dataset.plane;
|
||
this.showConfigurations(planeName);
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @method showBaseConfigDialog
|
||
* @description 显示基准构型选择对话框
|
||
* @param {Array} configs - 构型数据数组
|
||
* @param {string} planeName - 机型名称
|
||
* @returns {Promise<Object|undefined>} 返回选择的基准构型或undefined（表示不使用基准构型）
|
||
*/
|
||
showBaseConfigDialog(configs, planeName) {
|
||
return new Promise((resolve) => {
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'base-config-dialog';
|
||
dialog.innerHTML = `
|
||
<style>
|
||
.base-config-dialog {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
.dialog-content {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
width: 400px;
|
||
max-width: 90%;
|
||
}
|
||
.dialog-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
}
|
||
.select-container {
|
||
margin-bottom: 20px;
|
||
}
|
||
.select-label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
.select-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
background-color: white;
|
||
box-sizing: border-box;
|
||
}
|
||
.select-input:focus {
|
||
border-color: #5c6bc0;
|
||
outline: none;
|
||
box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.2);
|
||
}
|
||
.select-input[type="text"] {
|
||
cursor: text;
|
||
}
|
||
.select-input[type="text"]::placeholder {
|
||
color: #999;
|
||
}
|
||
.select-input[type="select"] {
|
||
cursor: pointer;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
||
background-repeat: no-repeat;
|
||
background-position: right 8px center;
|
||
background-size: 16px;
|
||
}
|
||
.dialog-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 10px;
|
||
}
|
||
.dialog-button {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.button-primary {
|
||
background: #5c6bc0;
|
||
color: white;
|
||
}
|
||
.button-secondary {
|
||
background: #e8eaf6;
|
||
color: #5c6bc0;
|
||
}
|
||
</style>
|
||
<div class="dialog-content">
|
||
<div class="dialog-title">新建构型</div>
|
||
<div class="select-container">
|
||
<label class="select-label">构型名称：</label>
|
||
<input type="text" class="select-input" id="newConfName" placeholder="请输入构型名称" />
|
||
</div>
|
||
<div class="select-container">
|
||
<label class="select-label">请选择基准构型：</label>
|
||
<select class="select-input" id="baseConfigSelect">
|
||
<option value="none">不使用基准构型</option>
|
||
${configs.map(config => `
|
||
<option value="${config.ConfID}">${config.ConfName}</option>
|
||
`).join('')}
|
||
</select>
|
||
</div>
|
||
<div class="dialog-buttons">
|
||
<button class="dialog-button button-secondary" id="cancelButton">取消</button>
|
||
<button class="dialog-button button-primary" id="confirmButton">确认</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
const select = dialog.querySelector('#baseConfigSelect');
|
||
const newConfName = dialog.querySelector('#newConfName');
|
||
|
||
dialog.querySelector('#cancelButton').addEventListener('click', () => {
|
||
document.body.removeChild(dialog);
|
||
resolve(null); // 取消时返回null
|
||
});
|
||
|
||
dialog.querySelector('#confirmButton').addEventListener('click', () => {
|
||
const selectedValue = select.value;
|
||
const confName = newConfName.value.trim();
|
||
|
||
if (!confName) {
|
||
alert('请输入构型名称');
|
||
return;
|
||
}
|
||
|
||
const selectedConfig = selectedValue === 'none' ?
|
||
undefined : // 选择"不使用基准构型"时返回undefined
|
||
configs.find(c => c.ConfID === parseInt(selectedValue));
|
||
|
||
document.body.removeChild(dialog);
|
||
resolve({
|
||
...selectedConfig,
|
||
ConfName: confName
|
||
});
|
||
});
|
||
|
||
document.body.appendChild(dialog);
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @method checkUserAccessLevel
|
||
* @description 检查用户访问权限级别
|
||
*/
|
||
async checkUserAccessLevel() {
|
||
try {
|
||
const response = await fetch('/api/check-auth', {
|
||
credentials: 'include'
|
||
});
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
this.userAccessLevel = parseInt(result.user.access_level);
|
||
// 重新渲染构型列表以更新删除按钮的显示状态
|
||
if (this.currentView === 'configurations' && this.selectedPlane) {
|
||
this.loadConfigurations(this.selectedPlane);
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取用户权限失败:', error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method renderConfigurations
|
||
* @description 渲染构型卡片
|
||
* @param {Array} configs - 构型数据数组
|
||
* @param {string} planeName - 机型名称
|
||
*/
|
||
renderConfigurations(configs, planeName) {
|
||
const container = this.shadowRoot.getElementById('contentContainer');
|
||
if (!configs || configs.length === 0) {
|
||
container.innerHTML = '<div class="error">暂无构型数据</div>';
|
||
return;
|
||
}
|
||
|
||
// 添加新建构型卡片（根据权限显示）
|
||
container.innerHTML = `
|
||
${this.userAccessLevel >= 2 ? `
|
||
<div class="config-card new-config" id="newConfigCard">
|
||
<div class="config-title">+ 新建构型</div>
|
||
</div>
|
||
` : ''}
|
||
${configs.map(config => `
|
||
<div class="config-card configuration" data-config-id="${config.ConfID}">
|
||
<div class="config-title">${config.ConfName || '未知构型'}</div>
|
||
${this.userAccessLevel >= 2 ? `
|
||
<button class="delete-button" data-config-id="${config.ConfID}" title="删除构型">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path 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>
|
||
`).join('')}
|
||
`;
|
||
|
||
// 添加新建构型卡片点击事件（仅在权限足够时添加）
|
||
if (this.userAccessLevel >= 2) {
|
||
container.querySelector('#newConfigCard')?.addEventListener('click', async () => {
|
||
const baseConfig = await this.showBaseConfigDialog(configs, planeName);
|
||
if (baseConfig !== null) {
|
||
const defaultConfig = {
|
||
ConfName: '',
|
||
OSName: baseConfig?.OSName || '',
|
||
OSVersion: baseConfig?.OSVersion || '',
|
||
RTXVersion: baseConfig?.RTXVersion || '',
|
||
CPUAffinity: baseConfig?.CPUAffinity || '',
|
||
DomainID: baseConfig?.DomainID || '',
|
||
WorkPath: baseConfig?.WorkPath || '',
|
||
ModelsPath: baseConfig?.ModelsPath || '',
|
||
ServicesPath: baseConfig?.ServicesPath || '',
|
||
ConsoleDebug: baseConfig?.ConsoleDebug ?? 1,
|
||
ConsoleInfo: baseConfig?.ConsoleInfo ?? 1,
|
||
ConsoleWarning: baseConfig?.ConsoleWarning ?? 1,
|
||
ConsoleError: baseConfig?.ConsoleError ?? 1,
|
||
LogDebug: baseConfig?.LogDebug ?? 0,
|
||
LogInfo: baseConfig?.LogInfo ?? 1,
|
||
LogWarning: baseConfig?.LogWarning ?? 1,
|
||
LogError: baseConfig?.LogError ?? 1,
|
||
sourceConfId: baseConfig?.ConfID // 添加源构型ID
|
||
};
|
||
this.showEditor(defaultConfig, planeName, true);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 添加构型卡片点击事件
|
||
container.querySelectorAll('.config-card:not(.new-config)').forEach(card => {
|
||
card.addEventListener('click', (e) => {
|
||
// 如果点击的是删除按钮，不触发编辑
|
||
if (e.target.closest('.delete-button')) {
|
||
return;
|
||
}
|
||
const configId = parseInt(card.dataset.configId, 10);
|
||
const config = configs.find(c => c.ConfID === configId);
|
||
if (config) {
|
||
this.showEditor(config, planeName, false);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 添加删除按钮点击事件
|
||
container.querySelectorAll('.delete-button').forEach(button => {
|
||
button.addEventListener('click', async (e) => {
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
|
||
// 再次检查权限
|
||
if (this.userAccessLevel < 2) {
|
||
alert('您没有删除构型的权限');
|
||
return;
|
||
}
|
||
|
||
const configId = parseInt(button.dataset.configId, 10);
|
||
const config = configs.find(c => c.ConfID === configId);
|
||
|
||
if (config && confirm(`确定要删除构型"${config.ConfName}"吗？\n注意：删除后将无法恢复，且会同时删除该构型下的所有模型组、模型和服务。`)) {
|
||
try {
|
||
const response = await fetch(`/api/configurations/${configId}`, {
|
||
method: 'DELETE',
|
||
credentials: 'include'
|
||
});
|
||
|
||
const responseData = await response.json();
|
||
|
||
if (!response.ok) {
|
||
throw new Error(responseData.error || '删除构型失败');
|
||
}
|
||
|
||
// 重新加载构型列表
|
||
this.loadConfigurations(planeName);
|
||
} catch (error) {
|
||
console.error('删除构型失败:', error);
|
||
alert(error.message || '删除构型失败，请稍后重试');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/**
|
||
* @method showEditor
|
||
* @description 显示构型编辑器
|
||
* @param {Object} configuration - 构型数据
|
||
* @param {string} planeName - 机型名称
|
||
* @param {boolean} isNew - 是否是新建构型
|
||
*/
|
||
async showEditor(configuration, planeName, isNew) {
|
||
this.currentView = 'editor';
|
||
this.selectedConfiguration = configuration;
|
||
this.isNewConfiguration = isNew;
|
||
|
||
// 更新UI
|
||
const pageTitle = this.shadowRoot.getElementById('pageTitle');
|
||
const backSection = this.shadowRoot.getElementById('backSection');
|
||
const backButtonText = this.shadowRoot.querySelector('#backButton span:last-child');
|
||
const contentContainer = this.shadowRoot.getElementById('contentContainer');
|
||
const editorContainer = this.shadowRoot.getElementById('editorContainer');
|
||
|
||
if (!pageTitle || !backSection || !contentContainer || !editorContainer) {
|
||
return;
|
||
}
|
||
|
||
pageTitle.textContent = isNew ? `${planeName} - 新建构型` : `${planeName} - ${configuration.ConfName} 构型`;
|
||
backSection.style.display = 'block';
|
||
backButtonText.textContent = '返回构型列表';
|
||
contentContainer.style.display = 'none';
|
||
editorContainer.style.display = 'flex';
|
||
|
||
// 填充其他表单数据
|
||
this.shadowRoot.getElementById('osName').value = configuration.OSName || '';
|
||
this.shadowRoot.getElementById('osVersion').value = configuration.OSVersion || '';
|
||
this.shadowRoot.getElementById('rtxVersion').value = configuration.RTXVersion || '';
|
||
this.shadowRoot.getElementById('cpuAffinity').value = configuration.CPUAffinity || '';
|
||
this.shadowRoot.getElementById('domainId').value = configuration.DomainID !== undefined ? Math.floor(configuration.DomainID) : '';
|
||
this.shadowRoot.getElementById('modelsPath').value = configuration.ModelsPath || '';
|
||
this.shadowRoot.getElementById('servicesPath').value = configuration.ServicesPath || '';
|
||
this.shadowRoot.getElementById('workPath').value = configuration.WorkPath || '';
|
||
|
||
// 设置复选框状态
|
||
this.shadowRoot.getElementById('consoleDebug').checked = configuration.ConsoleDebug === 1;
|
||
this.shadowRoot.getElementById('consoleInfo').checked = configuration.ConsoleInfo === 1;
|
||
this.shadowRoot.getElementById('consoleWarning').checked = configuration.ConsoleWarning === 1;
|
||
this.shadowRoot.getElementById('consoleError').checked = configuration.ConsoleError === 1;
|
||
this.shadowRoot.getElementById('logDebug').checked = configuration.LogDebug === 1;
|
||
this.shadowRoot.getElementById('logInfo').checked = configuration.LogInfo === 1;
|
||
this.shadowRoot.getElementById('logWarning').checked = configuration.LogWarning === 1;
|
||
this.shadowRoot.getElementById('logError').checked = configuration.LogError === 1;
|
||
|
||
// 在加载模型卡片右上角增加添加模型组按钮
|
||
const modelCard = this.shadowRoot.querySelectorAll('.editor-sidebar .status-card')[0];
|
||
const modelCardTitle = modelCard.querySelector('.status-card-title');
|
||
if (modelCard && modelCardTitle && this.userAccessLevel >= 2) {
|
||
// 移除已存在的按钮（如果有）
|
||
const existingBtn = this.shadowRoot.getElementById('addModelGroupBtn');
|
||
if (existingBtn) {
|
||
existingBtn.remove();
|
||
}
|
||
// 添加新按钮
|
||
const addBtn = document.createElement('img');
|
||
addBtn.src = '/assets/icons/png/plus_b.png';
|
||
addBtn.alt = '添加模型组';
|
||
addBtn.title = '添加模型组';
|
||
addBtn.id = 'addModelGroupBtn';
|
||
addBtn.style.cssText = 'width:20px;height:20px;cursor:pointer;position:absolute;top:18px;right:18px;z-index:2;';
|
||
modelCard.style.position = 'relative';
|
||
modelCard.appendChild(addBtn);
|
||
addBtn.addEventListener('click', () => this.showAddModelGroupDialog());
|
||
}
|
||
|
||
// 在加载服务卡片右上角增加添加按钮
|
||
const serviceCard = this.shadowRoot.querySelectorAll('.editor-sidebar .status-card')[1];
|
||
const serviceCardTitle = serviceCard.querySelector('.status-card-title');
|
||
if (serviceCard && serviceCardTitle && this.userAccessLevel >= 2) {
|
||
// 移除已存在的按钮（如果有）
|
||
const existingBtn = this.shadowRoot.getElementById('addServiceBtn');
|
||
if (existingBtn) {
|
||
existingBtn.remove();
|
||
}
|
||
// 添加新按钮
|
||
const addBtn = document.createElement('img');
|
||
addBtn.src = '/assets/icons/png/plus_b.png';
|
||
addBtn.alt = '添加服务';
|
||
addBtn.title = '添加服务';
|
||
addBtn.id = 'addServiceBtn';
|
||
addBtn.style.cssText = 'width:20px;height:20px;cursor:pointer;position:absolute;top:18px;right:18px;z-index:2;';
|
||
serviceCard.style.position = 'relative';
|
||
serviceCard.appendChild(addBtn);
|
||
addBtn.addEventListener('click', () => this.showAddServiceDialog());
|
||
}
|
||
|
||
// 如果不是新建构型，获取模型组数据和服务列表
|
||
if (!isNew && configuration.ConfID) {
|
||
try {
|
||
// 并行请求模型组数据和服务列表
|
||
const [modelGroupsResponse, servicesResponse] = await Promise.all([
|
||
fetch(`/api/configurations/${configuration.ConfID}/model-groups`),
|
||
fetch(`/api/configurations/${configuration.ConfID}/services`)
|
||
]);
|
||
|
||
if (!modelGroupsResponse.ok) {
|
||
throw new Error('获取模型组数据失败');
|
||
}
|
||
const modelGroups = await modelGroupsResponse.json();
|
||
|
||
// 更新加载模型卡片
|
||
const pendingModelsList = this.shadowRoot.getElementById('pendingModelsList');
|
||
if (modelGroups && modelGroups.length > 0) {
|
||
// 获取每个模型组下的模型
|
||
const modelGroupsWithModels = await Promise.all(modelGroups.map(async (group) => {
|
||
try {
|
||
const modelsResponse = await fetch(`/api/model-groups/${group.GroupID}/models`);
|
||
if (!modelsResponse.ok) {
|
||
throw new Error(`获取模型组 ${group.GroupName} 的模型失败`);
|
||
}
|
||
const models = await modelsResponse.json();
|
||
return { ...group, models };
|
||
} catch (error) {
|
||
console.error(`获取模型组 ${group.GroupName} 的模型失败:`, error);
|
||
return { ...group, models: [] };
|
||
}
|
||
}));
|
||
|
||
pendingModelsList.innerHTML = modelGroupsWithModels.map(group => `
|
||
<div class="status-item" data-group-id="${group.GroupID}" style="position:relative;">
|
||
<div style="font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between;">
|
||
<span>${group.GroupName}</span>
|
||
${this.userAccessLevel >= 2 ? `
|
||
<span style="display: flex; gap: 8px; align-items: center; position: absolute; right: 12px; top: 10px;">
|
||
<img src="/assets/icons/png/plus_b.png" alt="添加模型" title="添加模型" class="group-add-btn" style="width:18px;height:18px;cursor:pointer;" data-group-id="${group.GroupID}" />
|
||
<img src="/assets/icons/png/sliders_b.png" alt="编辑" title="编辑模型组" class="group-edit-btn" style="width:18px;height:18px;cursor:pointer;" data-group-id="${group.GroupID}" />
|
||
<img src="/assets/icons/png/delete_b.png" alt="删除" title="删除模型组" class="group-delete-btn" style="width:18px;height:18px;cursor:pointer;" data-group-id="${group.GroupID}" />
|
||
</span>
|
||
` : ''}
|
||
</div>
|
||
<div style="font-size: 12px; color: #666; margin-bottom: 8px;">
|
||
频率：${group.Freq || 0} Hz / 优先级：${group.Priority || 0} / 亲和性：${group.CPUAff || '无'}
|
||
</div>
|
||
<div style="margin-top: 8px; border-top: 1px solid #e8eaf6; padding-top: 8px;">
|
||
${group.models && group.models.length > 0 ?
|
||
group.models.map(model => `
|
||
<div style=\"margin-bottom: 6px; padding: 4px 8px; background: #f8f9ff; border-radius: 4px; display: flex; align-items: center; justify-content: space-between;\">
|
||
<div style=\"font-size: 14px;\">${model.ModelName || '未知模型'} ${model.ModelVersion || '未知版本'}</div>
|
||
${this.userAccessLevel >= 2 ? `
|
||
<img src="/assets/icons/png/delete_b.png" alt="删除" title="删除" class="model-delete-btn" style="width:20px;height:20px;cursor:pointer;margin-left:8px;" data-group-id="${group.GroupID}" data-class-name="${model.ClassName}" />
|
||
` : ''}
|
||
</div>
|
||
`).join('')
|
||
: '<div style=\"font-size: 12px; color: #999; font-style: italic;\">暂无模型</div>'
|
||
}
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// 绑定模型组按钮事件
|
||
if (this.userAccessLevel >= 2) {
|
||
// 添加模型按钮
|
||
this.shadowRoot.querySelectorAll('.group-add-btn').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
const groupId = btn.getAttribute('data-group-id');
|
||
this.onAddModel && this.onAddModel(groupId);
|
||
});
|
||
});
|
||
// 编辑模型组按钮
|
||
this.shadowRoot.querySelectorAll('.group-edit-btn').forEach(btn => {
|
||
btn.addEventListener('click', (e) => {
|
||
const groupId = btn.getAttribute('data-group-id');
|
||
const group = modelGroupsWithModels.find(g => String(g.GroupID) === String(groupId));
|
||
if (group) this.showEditGroupDialog(group);
|
||
});
|
||
});
|
||
// 删除模型组按钮
|
||
this.shadowRoot.querySelectorAll('.group-delete-btn').forEach(btn => {
|
||
btn.addEventListener('click', async (e) => {
|
||
const groupId = btn.getAttribute('data-group-id');
|
||
if (!groupId) return;
|
||
if (!confirm('确定要删除该模型组吗？')) return;
|
||
try {
|
||
const resp = await fetch(`/api/model-groups/${groupId}`, {
|
||
method: 'DELETE',
|
||
credentials: 'include'
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '删除失败');
|
||
}
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('删除失败：' + err.message);
|
||
}
|
||
});
|
||
});
|
||
// 删除模型按钮
|
||
this.shadowRoot.querySelectorAll('.model-delete-btn').forEach(btn => {
|
||
btn.addEventListener('click', async (e) => {
|
||
e.stopPropagation();
|
||
const groupId = btn.getAttribute('data-group-id');
|
||
const className = btn.getAttribute('data-class-name');
|
||
if (!groupId || !className) return;
|
||
if (!confirm('确定要删除该模型吗？')) return;
|
||
try {
|
||
const resp = await fetch(`/api/model-groups/${groupId}/models/${encodeURIComponent(className)}`, {
|
||
method: 'DELETE',
|
||
credentials: 'include'
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '删除失败');
|
||
}
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('删除失败：' + err.message);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
pendingModelsList.innerHTML = '<div class="status-item empty">暂无待加载模型</div>';
|
||
}
|
||
|
||
// 更新服务列表
|
||
const pendingServicesList = this.shadowRoot.getElementById('pendingServicesList');
|
||
if (!servicesResponse.ok) {
|
||
throw new Error('获取服务列表失败');
|
||
}
|
||
const services = await servicesResponse.json();
|
||
if (services && services.length > 0) {
|
||
pendingServicesList.innerHTML = services.map(service => `
|
||
<div class="status-item">
|
||
<div style="margin-bottom: 6px; padding: 4px 8px; background: #f8f9ff; border-radius: 4px; display: flex; align-items: center; justify-content: space-between;">
|
||
<div style="font-size: 14px;">${service.ServiceName || service.ClassName || '未知服务'} ${service.ServiceVersion || '未知'}</div>
|
||
${this.userAccessLevel >= 2 ? `
|
||
<img src="/assets/icons/png/delete_b.png" alt="删除" title="删除" class="service-delete-btn" style="width:20px;height:20px;cursor:pointer;margin-left:8px;" data-service-name="${service.ClassName}" />
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
|
||
// 绑定服务删除按钮事件
|
||
if (this.userAccessLevel >= 2) {
|
||
this.shadowRoot.querySelectorAll('.service-delete-btn').forEach(btn => {
|
||
btn.addEventListener('click', async (e) => {
|
||
e.stopPropagation();
|
||
const serviceName = btn.getAttribute('data-service-name');
|
||
if (!serviceName) return;
|
||
if (!confirm('确定要删除该服务吗？')) return;
|
||
try {
|
||
const resp = await fetch(`/api/configurations/${configuration.ConfID}/services/${encodeURIComponent(serviceName)}`, {
|
||
method: 'DELETE',
|
||
credentials: 'include'
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '删除失败');
|
||
}
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('删除失败：' + err.message);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
pendingServicesList.innerHTML = '<div class="status-item empty">暂无待加载服务</div>';
|
||
}
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
const pendingModelsList = this.shadowRoot.getElementById('pendingModelsList');
|
||
const pendingServicesList = this.shadowRoot.getElementById('pendingServicesList');
|
||
pendingModelsList.innerHTML = '<div class="status-item empty">获取模型组数据失败</div>';
|
||
pendingServicesList.innerHTML = '<div class="status-item empty">获取服务列表失败</div>';
|
||
}
|
||
}
|
||
|
||
// 控制右侧卡片显示：新建构型时隐藏
|
||
const editorSidebar = this.shadowRoot.querySelector('.editor-sidebar');
|
||
if (isNew) {
|
||
editorSidebar.style.display = 'none';
|
||
} else {
|
||
editorSidebar.style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method ensurePathEndsWithSlash
|
||
* @description 确保路径以斜杠结尾
|
||
* @param {string} path - 要处理的路径
|
||
* @returns {string} 处理后的路径
|
||
*/
|
||
ensurePathEndsWithSlash(path) {
|
||
if (!path) return path;
|
||
return path.endsWith('/') ? path : path + '/';
|
||
}
|
||
|
||
/**
|
||
* @method saveConfiguration
|
||
* @description 保存构型配置
|
||
*/
|
||
async saveConfiguration() {
|
||
// 检查权限
|
||
if (this.userAccessLevel < 2) {
|
||
alert('您没有保存构型的权限');
|
||
return;
|
||
}
|
||
|
||
// 验证域ID
|
||
const domainId = parseInt(this.shadowRoot.getElementById('domainId').value);
|
||
if (isNaN(domainId) || domainId < 0 || domainId > 232) {
|
||
alert('域ID必须在0-232之间');
|
||
return;
|
||
}
|
||
|
||
// 获取构型名称
|
||
const confName = this.selectedConfiguration.ConfName || '';
|
||
|
||
const updatedConfig = {
|
||
...this.selectedConfiguration,
|
||
ConfName: confName, // 保留构型名称
|
||
OSName: this.shadowRoot.getElementById('osName').value,
|
||
OSVersion: this.shadowRoot.getElementById('osVersion').value,
|
||
RTXVersion: this.shadowRoot.getElementById('rtxVersion').value,
|
||
CPUAffinity: this.shadowRoot.getElementById('cpuAffinity').value,
|
||
DomainID: domainId,
|
||
ModelsPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('modelsPath').value),
|
||
ServicesPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('servicesPath').value),
|
||
WorkPath: this.ensurePathEndsWithSlash(this.shadowRoot.getElementById('workPath').value),
|
||
ConsoleDebug: this.shadowRoot.getElementById('consoleDebug').checked ? 1 : 0,
|
||
ConsoleInfo: this.shadowRoot.getElementById('consoleInfo').checked ? 1 : 0,
|
||
ConsoleWarning: this.shadowRoot.getElementById('consoleWarning').checked ? 1 : 0,
|
||
ConsoleError: this.shadowRoot.getElementById('consoleError').checked ? 1 : 0,
|
||
LogDebug: this.shadowRoot.getElementById('logDebug').checked ? 1 : 0,
|
||
LogInfo: this.shadowRoot.getElementById('logInfo').checked ? 1 : 0,
|
||
LogWarning: this.shadowRoot.getElementById('logWarning').checked ? 1 : 0,
|
||
LogError: this.shadowRoot.getElementById('logError').checked ? 1 : 0
|
||
};
|
||
|
||
// 如果是新建构型，保留源构型ID
|
||
if (this.isNewConfiguration && this.selectedConfiguration.sourceConfId) {
|
||
updatedConfig.sourceConfId = this.selectedConfiguration.sourceConfId;
|
||
}
|
||
|
||
try {
|
||
const url = this.isNewConfiguration ?
|
||
'/api/configurations' :
|
||
`/api/configurations/${this.selectedConfiguration.ConfID}`;
|
||
|
||
const method = this.isNewConfiguration ? 'POST' : 'PUT';
|
||
|
||
const response = await fetch(url, {
|
||
method: method,
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(updatedConfig),
|
||
credentials: 'include'
|
||
});
|
||
|
||
const responseData = await response.json();
|
||
|
||
if (!response.ok) {
|
||
if (responseData.error === '路径验证失败') {
|
||
const errorMessages = responseData.details.map(detail =>
|
||
`${detail.path === 'workPath' ? '工作路径' :
|
||
detail.path === 'modelsPath' ? '模型路径' : '服务路径'}: ${detail.error}`
|
||
).join('\n');
|
||
alert(`路径验证失败：\n${errorMessages}`);
|
||
} else {
|
||
throw new Error(responseData.error || '保存构型失败');
|
||
}
|
||
return;
|
||
}
|
||
|
||
this.selectedConfiguration = responseData;
|
||
this.showConfigurations(this.selectedPlane);
|
||
} catch (error) {
|
||
console.error('保存构型失败:', error);
|
||
alert(error.message || '保存构型失败，请稍后重试');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @method showConfigurations
|
||
* @description 显示指定机型的构型列表
|
||
* @param {string} planeName - 机型名称
|
||
*/
|
||
async showConfigurations(planeName) {
|
||
this.currentView = 'configurations';
|
||
this.selectedPlane = planeName;
|
||
|
||
// 更新UI
|
||
this.shadowRoot.getElementById('pageTitle').textContent = `${planeName} - 构型列表`;
|
||
this.shadowRoot.getElementById('backSection').style.display = 'block';
|
||
this.shadowRoot.querySelector('#backButton span:last-child').textContent = '返回机型列表';
|
||
this.shadowRoot.getElementById('contentContainer').classList.add('configurations');
|
||
this.shadowRoot.getElementById('contentContainer').style.display = 'grid';
|
||
this.shadowRoot.getElementById('editorContainer').style.display = 'none';
|
||
|
||
// 检查用户权限
|
||
await this.checkUserAccessLevel();
|
||
|
||
// 加载构型数据
|
||
this.loadConfigurations(planeName);
|
||
}
|
||
|
||
/**
|
||
* @method showPlanes
|
||
* @description 显示机型列表
|
||
*/
|
||
showPlanes() {
|
||
this.currentView = 'planes';
|
||
this.selectedPlane = null;
|
||
this.selectedConfiguration = null;
|
||
|
||
// 更新UI
|
||
this.shadowRoot.getElementById('pageTitle').textContent = '机型';
|
||
this.shadowRoot.getElementById('backSection').style.display = 'none';
|
||
this.shadowRoot.getElementById('contentContainer').classList.remove('configurations');
|
||
this.shadowRoot.getElementById('contentContainer').style.display = 'grid';
|
||
this.shadowRoot.getElementById('editorContainer').style.display = 'none';
|
||
|
||
// 重新加载机型数据
|
||
this.loadPlanes();
|
||
}
|
||
|
||
/**
|
||
* @method showError
|
||
* @description 显示错误信息
|
||
* @param {string} message - 错误信息
|
||
*/
|
||
showError(message) {
|
||
const container = this.shadowRoot.getElementById('contentContainer');
|
||
container.innerHTML = `<div class="error">${message}</div>`;
|
||
}
|
||
|
||
/**
|
||
* @method onAddModel
|
||
* @description 添加模型功能，弹窗选择ATA章节、模型、版本，确认后添加
|
||
* @param {string} groupId - 模型组ID
|
||
*/
|
||
async onAddModel(groupId) {
|
||
const planeName = this.selectedPlane;
|
||
const confID = this.selectedConfiguration.ConfID;
|
||
if (!planeName || !confID) {
|
||
alert('缺少机型或构型信息');
|
||
return;
|
||
}
|
||
// 创建弹窗
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'add-model-dialog';
|
||
dialog.innerHTML = `
|
||
<style>
|
||
.add-model-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 1002; }
|
||
.add-model-content { background: #fff; border-radius: 8px; padding: 24px 32px; min-width: 340px; box-shadow: 0 2px 16px rgba(0,0,0,0.15); }
|
||
.add-model-title { font-size: 18px; font-weight: 500; margin-bottom: 18px; color: #333; }
|
||
.add-model-row { margin-bottom: 16px; }
|
||
.add-model-label { display: block; margin-bottom: 6px; color: #555; font-size: 14px; }
|
||
.add-model-select { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; }
|
||
.add-model-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; }
|
||
.add-model-btn { padding: 7px 18px; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; }
|
||
.add-model-btn-primary { background: #5c6bc0; color: #fff; }
|
||
.add-model-btn-secondary { background: #e8eaf6; color: #5c6bc0; }
|
||
</style>
|
||
<div class="add-model-content">
|
||
<div class="add-model-title">添加模型</div>
|
||
<div class="add-model-row">
|
||
<label class="add-model-label">ATA章节</label>
|
||
<select class="add-model-select" id="ataSelect"><option value="">加载中...</option></select>
|
||
</div>
|
||
<div class="add-model-row">
|
||
<label class="add-model-label">模型</label>
|
||
<select class="add-model-select" id="modelSelect" disabled><option value="">请先选择章节</option></select>
|
||
</div>
|
||
<div class="add-model-row">
|
||
<label class="add-model-label">版本</label>
|
||
<select class="add-model-select" id="versionSelect" disabled><option value="">请先选择模型</option></select>
|
||
</div>
|
||
<div class="add-model-buttons">
|
||
<button class="add-model-btn add-model-btn-secondary" id="cancelAddModel">取消</button>
|
||
<button class="add-model-btn add-model-btn-primary" id="confirmAddModel">确认添加</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(dialog);
|
||
// 关闭弹窗
|
||
dialog.querySelector('#cancelAddModel').onclick = () => document.body.removeChild(dialog);
|
||
// 获取ATA章节
|
||
const ataSelect = dialog.querySelector('#ataSelect');
|
||
const modelSelect = dialog.querySelector('#modelSelect');
|
||
const versionSelect = dialog.querySelector('#versionSelect');
|
||
let ataList = [], modelList = [], versionList = [];
|
||
try {
|
||
const ataResp = await fetch('/api/ata-chapters');
|
||
ataList = await ataResp.json();
|
||
ataSelect.innerHTML = '<option value="">请选择章节</option>' + ataList.map(a => `<option value="${a.ID}">${a.ID}</option>`).join('');
|
||
} catch {
|
||
ataSelect.innerHTML = '<option value="">加载失败</option>';
|
||
}
|
||
// 章节选择事件
|
||
ataSelect.onchange = async () => {
|
||
const chapterId = ataSelect.value;
|
||
modelSelect.disabled = true;
|
||
versionSelect.disabled = true;
|
||
modelSelect.innerHTML = '<option value="">加载中...</option>';
|
||
versionSelect.innerHTML = '<option value="">请先选择模型</option>';
|
||
if (!chapterId) {
|
||
modelSelect.innerHTML = '<option value="">请先选择章节</option>';
|
||
return;
|
||
}
|
||
try {
|
||
const modelResp = await fetch(`/api/chapter-models/${chapterId}?planeName=${encodeURIComponent(planeName)}`);
|
||
modelList = await modelResp.json();
|
||
modelSelect.innerHTML = '<option value="">请选择模型</option>' + modelList.map(m => `<option value="${m.ClassName}">${m.ModelName_CN}</option>`).join('');
|
||
modelSelect.disabled = false;
|
||
} catch {
|
||
modelSelect.innerHTML = '<option value="">加载失败</option>';
|
||
}
|
||
};
|
||
// 模型选择事件
|
||
modelSelect.onchange = async () => {
|
||
const className = modelSelect.value;
|
||
versionSelect.disabled = true;
|
||
versionSelect.innerHTML = '<option value="">加载中...</option>';
|
||
if (!className) {
|
||
versionSelect.innerHTML = '<option value="">请先选择模型</option>';
|
||
return;
|
||
}
|
||
try {
|
||
const versionResp = await fetch(`/api/model-versions/${className}?planeName=${encodeURIComponent(planeName)}&confID=${encodeURIComponent(confID)}`);
|
||
versionList = await versionResp.json();
|
||
versionSelect.innerHTML = '<option value="">请选择版本</option>' + versionList.map(v => `<option value="${v.Version}">${v.Version}</option>`).join('');
|
||
versionSelect.disabled = false;
|
||
} catch {
|
||
versionSelect.innerHTML = '<option value="">加载失败</option>';
|
||
}
|
||
};
|
||
// 确认添加
|
||
dialog.querySelector('#confirmAddModel').onclick = async () => {
|
||
const chapterId = ataSelect.value;
|
||
const className = modelSelect.value;
|
||
const version = versionSelect.value;
|
||
if (!chapterId || !className || !version) {
|
||
alert('请选择完整信息');
|
||
return;
|
||
}
|
||
// 获取选中模型的详细信息
|
||
const model = modelList.find(m => m.ClassName === className);
|
||
if (!model) {
|
||
alert('模型信息异常');
|
||
return;
|
||
}
|
||
// 组装要添加的数据
|
||
const postData = {
|
||
GroupID: groupId,
|
||
ClassName: className,
|
||
ModelName: model.ModelName,
|
||
ModelName_CN: model.ModelName_CN,
|
||
ModelVersion: version
|
||
};
|
||
try {
|
||
const resp = await fetch(`/api/model-groups/${groupId}/models`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify(postData)
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '添加失败');
|
||
}
|
||
document.body.removeChild(dialog);
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('添加失败：' + err.message);
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* @method showEditGroupDialog
|
||
* @description 显示模型组编辑对话框，编辑频率、优先级、亲和性
|
||
* @param {Object} group - 模型组对象
|
||
*/
|
||
showEditGroupDialog(group) {
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'edit-group-dialog';
|
||
dialog.innerHTML = `
|
||
<style>
|
||
.edit-group-dialog {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex; align-items: center; justify-content: center;
|
||
z-index: 1001;
|
||
}
|
||
.edit-group-content {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 24px 32px;
|
||
min-width: 320px;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,0.15);
|
||
}
|
||
.edit-group-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 18px;
|
||
color: #333;
|
||
}
|
||
.edit-group-row {
|
||
margin-bottom: 16px;
|
||
}
|
||
.edit-group-label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
.edit-group-input {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
.edit-group-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
.edit-group-btn {
|
||
padding: 7px 18px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.edit-group-btn-primary {
|
||
background: #5c6bc0;
|
||
color: #fff;
|
||
}
|
||
.edit-group-btn-secondary {
|
||
background: #e8eaf6;
|
||
color: #5c6bc0;
|
||
}
|
||
</style>
|
||
<div class="edit-group-content">
|
||
<div class="edit-group-title">编辑模型组参数</div>
|
||
<div class="edit-group-row">
|
||
<label class="edit-group-label">频率 (Hz)</label>
|
||
<input type="number" class="edit-group-input" id="editFreq" value="${group.Freq || 0}" min="0" />
|
||
</div>
|
||
<div class="edit-group-row">
|
||
<label class="edit-group-label">优先级</label>
|
||
<input type="number" class="edit-group-input" id="editPriority" value="${group.Priority || 0}" min="0" />
|
||
</div>
|
||
<div class="edit-group-row">
|
||
<label class="edit-group-label">亲和性</label>
|
||
<input type="text" class="edit-group-input" id="editCPUAff" value="${group.CPUAff || ''}" />
|
||
</div>
|
||
<div class="edit-group-buttons">
|
||
<button class="edit-group-btn edit-group-btn-secondary" id="cancelEditGroup">取消</button>
|
||
<button class="edit-group-btn edit-group-btn-primary" id="confirmEditGroup">保存</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(dialog);
|
||
dialog.querySelector('#cancelEditGroup').onclick = () => document.body.removeChild(dialog);
|
||
dialog.querySelector('#confirmEditGroup').onclick = async () => {
|
||
const freq = parseInt(dialog.querySelector('#editFreq').value) || 0;
|
||
const priority = parseInt(dialog.querySelector('#editPriority').value) || 0;
|
||
const cpuAff = dialog.querySelector('#editCPUAff').value.trim();
|
||
try {
|
||
const resp = await fetch(`/api/model-groups/${group.GroupID}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({ ...group, Freq: freq, Priority: priority, CPUAff: cpuAff })
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '保存失败');
|
||
}
|
||
document.body.removeChild(dialog);
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('保存失败：' + err.message);
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* @method showAddModelGroupDialog
|
||
* @description 显示添加模型组对话框
|
||
*/
|
||
showAddModelGroupDialog() {
|
||
const cpuAffinityStr = this.shadowRoot.getElementById('cpuAffinity').value || '';
|
||
const cpuOptions = cpuAffinityStr.split(',').map(s => s.trim()).filter(s => s !== '' && !isNaN(Number(s)));
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'add-model-group-dialog';
|
||
dialog.innerHTML = `
|
||
<style>
|
||
.add-model-group-dialog {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex; align-items: center; justify-content: center;
|
||
z-index: 1001;
|
||
}
|
||
.add-model-group-content {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 24px 32px;
|
||
min-width: 320px;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,0.15);
|
||
}
|
||
.add-model-group-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 18px;
|
||
color: #333;
|
||
}
|
||
.add-model-group-row {
|
||
margin-bottom: 16px;
|
||
}
|
||
.add-model-group-label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
.add-model-group-input, .add-model-group-multiselect {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
.add-model-group-multiselect { height: 80px; }
|
||
.add-model-group-selected {
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
color: #5c6bc0;
|
||
min-height: 18px;
|
||
}
|
||
.add-model-group-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
.add-model-group-btn {
|
||
padding: 7px 18px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.add-model-group-btn-primary {
|
||
background: #5c6bc0;
|
||
color: #fff;
|
||
}
|
||
.add-model-group-btn-secondary {
|
||
background: #e8eaf6;
|
||
color: #5c6bc0;
|
||
}
|
||
</style>
|
||
<div class="add-model-group-content">
|
||
<div class="add-model-group-title">添加模型组</div>
|
||
<div class="add-model-group-row">
|
||
<label class="add-model-group-label">模型组名称</label>
|
||
<input type="text" class="add-model-group-input" id="newModelGroupName" placeholder="请输入模型组名称" />
|
||
</div>
|
||
<div class="add-model-group-row">
|
||
<label class="add-model-group-label">运行频率 (Hz)</label>
|
||
<input type="number" step="0.01" class="add-model-group-input" id="freqInput" min="0.01" max="1000" placeholder="请输入频率" />
|
||
</div>
|
||
<div class="add-model-group-row">
|
||
<label class="add-model-group-label">优先级 (1-99)</label>
|
||
<input type="number" class="add-model-group-input" id="priorityInput" min="1" max="99" placeholder="请输入优先级" />
|
||
</div>
|
||
<div class="add-model-group-row">
|
||
<label class="add-model-group-label">亲和性</label>
|
||
<div style="position:relative;">
|
||
<input type="text" class="add-model-group-input" id="cpuAffInput" readonly placeholder="请选择" style="background:#fff;cursor:pointer;" />
|
||
<div id="cpuAffDropdown" style="display:none;position:absolute;z-index:10;top:38px;left:0;width:100%;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.08);max-height:150px;overflow:auto;">
|
||
${cpuOptions.map(opt => `
|
||
<label style='display:flex;align-items:center;padding:6px 12px;cursor:pointer;'>
|
||
<input type="checkbox" value="${opt}" style="margin-right:8px;" />${opt}
|
||
</label>
|
||
`).join('')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="add-model-group-buttons">
|
||
<button class="add-model-group-btn add-model-group-btn-secondary" id="cancelAddModelGroup">取消</button>
|
||
<button class="add-model-group-btn add-model-group-btn-primary" id="confirmAddModelGroup">确认添加</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(dialog);
|
||
// 亲和性多选下拉逻辑
|
||
const cpuAffInput = dialog.querySelector('#cpuAffInput');
|
||
const cpuAffDropdown = dialog.querySelector('#cpuAffDropdown');
|
||
cpuAffInput.addEventListener('click', () => {
|
||
cpuAffDropdown.style.display = cpuAffDropdown.style.display === 'block' ? 'none' : 'block';
|
||
});
|
||
document.addEventListener('mousedown', function handler(e) {
|
||
if (!dialog.contains(e.target)) {
|
||
cpuAffDropdown.style.display = 'none';
|
||
document.removeEventListener('mousedown', handler);
|
||
}
|
||
});
|
||
cpuAffDropdown.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||
checkbox.addEventListener('change', () => {
|
||
const selected = Array.from(cpuAffDropdown.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
|
||
cpuAffInput.value = selected.join(',');
|
||
});
|
||
});
|
||
dialog.querySelector('#cancelAddModelGroup').onclick = () => document.body.removeChild(dialog);
|
||
dialog.querySelector('#confirmAddModelGroup').onclick = async () => {
|
||
const name = dialog.querySelector('#newModelGroupName').value.trim();
|
||
const freq = parseFloat(dialog.querySelector('#freqInput').value);
|
||
const priority = parseInt(dialog.querySelector('#priorityInput').value);
|
||
const cpuAffSel = cpuAffInput.value;
|
||
if (!name) { alert('请输入模型组名称'); return; }
|
||
if (isNaN(freq) || freq <= 0 || freq > 1000) { alert('频率必须为0~1000之间的正浮点数'); return; }
|
||
if (isNaN(priority) || priority < 1 || priority > 99) { alert('优先级必须为1-99之间的整数'); return; }
|
||
if (!cpuAffSel) { alert('请选择亲和性'); return; }
|
||
// 组装数据
|
||
const postData = {
|
||
ConfID: this.selectedConfiguration.ConfID,
|
||
GroupName: name,
|
||
Freq: freq,
|
||
Priority: priority,
|
||
CPUAff: cpuAffSel
|
||
};
|
||
try {
|
||
const resp = await fetch(`/api/configurations/${this.selectedConfiguration.ConfID}/model-groups`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify(postData)
|
||
});
|
||
if (!resp.ok) {
|
||
const data = await resp.json();
|
||
throw new Error(data.error || '添加失败');
|
||
}
|
||
document.body.removeChild(dialog);
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (err) {
|
||
alert('添加失败：' + err.message);
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* @method showAddServiceDialog
|
||
* @description 显示添加服务对话框
|
||
*/
|
||
async showAddServiceDialog() {
|
||
const dialog = document.createElement('div');
|
||
dialog.className = 'add-service-dialog';
|
||
dialog.innerHTML = `
|
||
<style>
|
||
.add-service-dialog {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0,0,0,0.4);
|
||
display: flex; align-items: center; justify-content: center;
|
||
z-index: 1001;
|
||
}
|
||
.add-service-content {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 24px 32px;
|
||
min-width: 320px;
|
||
box-shadow: 0 2px 16px rgba(0,0,0,0.15);
|
||
}
|
||
.add-service-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 18px;
|
||
color: #333;
|
||
}
|
||
.add-service-row {
|
||
margin-bottom: 16px;
|
||
}
|
||
.add-service-label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #555;
|
||
font-size: 14px;
|
||
}
|
||
.add-service-select {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
.add-service-buttons {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 12px;
|
||
margin-top: 10px;
|
||
}
|
||
.add-service-btn {
|
||
padding: 7px 18px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
}
|
||
.add-service-btn-primary {
|
||
background: #5c6bc0;
|
||
color: #fff;
|
||
}
|
||
.add-service-btn-secondary {
|
||
background: #e8eaf6;
|
||
color: #5c6bc0;
|
||
}
|
||
</style>
|
||
<div class="add-service-content">
|
||
<div class="add-service-title">添加服务</div>
|
||
<div class="add-service-row">
|
||
<label class="add-service-label">服务</label>
|
||
<select class="add-service-select" id="serviceSelect">
|
||
<option value="">加载中...</option>
|
||
</select>
|
||
</div>
|
||
<div class="add-service-row">
|
||
<label class="add-service-label">版本</label>
|
||
<select class="add-service-select" id="versionSelect" disabled>
|
||
<option value="">请先选择服务</option>
|
||
</select>
|
||
</div>
|
||
<div class="add-service-buttons">
|
||
<button class="add-service-btn add-service-btn-secondary" id="cancelAddService">取消</button>
|
||
<button class="add-service-btn add-service-btn-primary" id="confirmAddService">确认添加</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(dialog);
|
||
|
||
// 获取服务列表
|
||
const serviceSelect = dialog.querySelector('#serviceSelect');
|
||
const versionSelect = dialog.querySelector('#versionSelect');
|
||
let serviceList = [];
|
||
|
||
try {
|
||
const response = await fetch('/api/services');
|
||
if (!response.ok) throw new Error('获取服务列表失败');
|
||
serviceList = await response.json();
|
||
serviceSelect.innerHTML = '<option value="">请选择服务</option>' +
|
||
serviceList.map(service => `<option value="${service.ClassName}">${service.ServiceName_CN || service.ServiceName}</option>`).join('');
|
||
} catch (error) {
|
||
console.error('获取服务列表失败:', error);
|
||
serviceSelect.innerHTML = '<option value="">获取服务列表失败</option>';
|
||
}
|
||
|
||
// 服务选择事件
|
||
serviceSelect.onchange = async () => {
|
||
const className = serviceSelect.value;
|
||
versionSelect.disabled = true;
|
||
versionSelect.innerHTML = '<option value="">加载中...</option>';
|
||
|
||
if (!className) {
|
||
versionSelect.innerHTML = '<option value="">请先选择服务</option>';
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/service-versions/${className}`);
|
||
if (!response.ok) throw new Error('获取版本列表失败');
|
||
const versions = await response.json();
|
||
versionSelect.innerHTML = '<option value="">请选择版本</option>' +
|
||
versions.map(version => `<option value="${version.Version}">${version.Version}</option>`).join('');
|
||
versionSelect.disabled = false;
|
||
} catch (error) {
|
||
console.error('获取版本列表失败:', error);
|
||
versionSelect.innerHTML = '<option value="">获取版本列表失败</option>';
|
||
}
|
||
};
|
||
|
||
// 取消按钮事件
|
||
dialog.querySelector('#cancelAddService').onclick = () => {
|
||
document.body.removeChild(dialog);
|
||
};
|
||
|
||
// 确认按钮事件
|
||
dialog.querySelector('#confirmAddService').onclick = async () => {
|
||
const className = serviceSelect.value;
|
||
const version = versionSelect.value;
|
||
|
||
if (!className || !version) {
|
||
alert('请选择完整的服务信息');
|
||
return;
|
||
}
|
||
|
||
// 查找ServiceName
|
||
const selectedService = serviceList.find(s => s.ClassName === className);
|
||
const serviceName = selectedService ? (selectedService.ServiceName || selectedService.ServiceName_CN || className) : className;
|
||
|
||
try {
|
||
const response = await fetch(`/api/configurations/${this.selectedConfiguration.ConfID}/services`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
credentials: 'include',
|
||
body: JSON.stringify({
|
||
ClassName: className,
|
||
ServiceVersion: version,
|
||
ServiceName: serviceName
|
||
})
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const data = await response.json();
|
||
throw new Error(data.error || '添加服务失败');
|
||
}
|
||
|
||
document.body.removeChild(dialog);
|
||
this.showEditor(this.selectedConfiguration, this.selectedPlane, false);
|
||
} catch (error) {
|
||
console.error('添加服务失败:', error);
|
||
alert('添加服务失败：' + error.message);
|
||
}
|
||
};
|
||
}
|
||
}
|
||
|
||
// 注册自定义元素
|
||
customElements.define('configuration-config', ConfigurationConfig);
|