前端进度条性能优化、仿真结束后后处理优化；后端C代码生成流程优化：先识别来源，再按照已知未知量需求排序，最后局部求解
This commit is contained in:
ljz committed
1 parent
0dcb465d84
commit
91bd9fb252
77 files changed
+11223
-551
No files matched your search
@@ -0,0 +1,42 @@
|
||||
# 管路子模型三栏布局 demo
|
||||
|
||||
打开：`http://127.0.0.1:5173/demos/pipe-submodels/index.html`
|
||||
|
||||
此版只开放 PNL00R、PNL0001、PNL0002、PNL0003 的管路子模型。左侧为管路子模型库，中间为固定气动网络，右侧为子模型属性及参数表，底部为配置检查信息。采用主应用的三栏、工作模式标签、紧凑工具栏和参数表结构，借鉴 Amesim 的子模型工作模式；不是完整复刻 Amesim 界面。
|
||||
|
||||
## 操作
|
||||
|
||||
1. 默认进入“子模型”。单击画布中的管路或左侧管路列表进行选择。
|
||||
2. 左侧默认只展示兼容管路型号。点击预览，在右侧“应用到 L…”或“应用并下一条”。双击型号也可应用。
|
||||
3. 切换“参数”后编辑数值；子模型阶段参数只读，避免选型时误改物理参数。
|
||||
4. 切换“检查”，底部显示本例的局部匹配和必填参数检查。点击问题项直接定位。
|
||||
5. 滚轮或左下角按钮缩放；拖动画布空白区平移查看；“适配视图”恢复视口。
|
||||
|
||||
## 位置锁定
|
||||
|
||||
- 部件坐标和连接端点为固定定义，选型及参数状态不包含坐标。
|
||||
- 所有模式均不提供部件拖动、连线改路由、重新连接、删除、旋转或镜像。
|
||||
- pnode 固定为 P4NODE2，参考端口不变。其他部件只作为管路端点的上下文。
|
||||
- 允许的平移、缩放只改变观察视口，不改变模型坐标或连接。
|
||||
|
||||
## 演示范围
|
||||
|
||||
- 四条管路覆盖两侧提供状态、两侧需要状态、一侧提供/另一侧需要状态的局部匹配场景。
|
||||
- 不包含其他组件子模型选型；理想连接不进入本版管路库。
|
||||
- 管路接口元数据按上一版已核对的本机 Amesim 管路定义整理，数值代码未复制。
|
||||
- C/R 图标沿用主应用储气/阻力表示。管路实际端口映射见“端口方向与选型说明”，与画线顺序无关。
|
||||
- 子模型切换可能改变是否计入储气、储气分布及状态数量，界面明确展示其物理作用。仅按接口筛选，不能替代工程物理选型。
|
||||
- 仅为固定局部网络的交互 demo。未接入全网方程分析、XML、SI 单位转换或仿真后端，不执行求解。
|
||||
- 主应用及正式组件、pnode、数值内核不作修改。没有新增 npm 依赖。
|
||||
|
||||
## 恢复
|
||||
|
||||
- “重置演示”只重置本页的选型与参数。
|
||||
- 本版独立存储键：`system-simulation:pipe-submodels-layout-demo:v1`。
|
||||
- 上一版完整保留在 `../amesim-submodels/index.html`，两个演示互不读取对方存档。
|
||||
- 撤回此版只需移除 `frontend/public/demos/pipe-submodels/`，不需要回退其他源码。
|
||||
- 位于 Vite public 下的 demo 会随前端打包输出；正式发布前可移除演示目录。
|
||||
|
||||
## 本次验证
|
||||
|
||||
2026-09-10：JavaScript 语法与静态入口检查通过。Edge 浏览器验证部件拖动、连线拖动与 Delete 均不改变固定坐标/连接；缩放、空白区平移只改变视口。四种管路的兼容筛选、预览与应用分离、连续选型、子模型阶段参数只读、参数校验、更换型号保留共同参数、反向端口映射、刷新恢复及独立重置通过。桌面、窄桌面和移动宽度没有横向溢出，未发起后端 API 请求。检查截图在 `test/pipe-submodels-demo/`。
|
||||
@@ -0,0 +1,313 @@
|
||||
(() => {
|
||||
'use strict';
|
||||
const KEY = 'system-simulation:pipe-submodels-layout-demo:v1';
|
||||
const $ = id => document.getElementById(id);
|
||||
const safe = value => String(value).replace(/[&<>"']/g, char => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' })[char]);
|
||||
// The demo never stores component coordinates or connection endpoints in editable state.
|
||||
const endpoints = Object.freeze({
|
||||
'A.1': Object.freeze({ label: '储气罐 A · 端口 1', state: 'out' }),
|
||||
'N1.1': Object.freeze({ label: '节点 N1 · 端口 1', state: 'out' }),
|
||||
'N1.2': Object.freeze({ label: '节点 N1 · 端口 2（参考）', state: 'in' }),
|
||||
'N1.3': Object.freeze({ label: '节点 N1 · 端口 3', state: 'out' }),
|
||||
'N1.4': Object.freeze({ label: '节点 N1 · 端口 4', state: 'out' }),
|
||||
'B.2': Object.freeze({ label: '阀门 B · 端口 2', state: 'in' }),
|
||||
'C.1': Object.freeze({ label: '封堵 C · 端口 1', state: 'in' }),
|
||||
'D.1': Object.freeze({ label: '封堵 D · 端口 1', state: 'in' }),
|
||||
});
|
||||
const PIPES = Object.freeze([
|
||||
Object.freeze({ id: 'L1', a: 'A.1', b: 'N1.1', path: 'M175 360H460', x: 315, y: 334, anchor: 'middle' }),
|
||||
Object.freeze({ id: 'L2', a: 'N1.2', b: 'B.2', path: 'M500 360H790', x: 645, y: 334, anchor: 'middle' }),
|
||||
Object.freeze({ id: 'L3', a: 'C.1', b: 'N1.3', path: 'M480 134V340', x: 507, y: 240, anchor: 'start' }),
|
||||
Object.freeze({ id: 'L4', a: 'N1.4', b: 'D.1', path: 'M480 380V566', x: 507, y: 485, anchor: 'start' }),
|
||||
]);
|
||||
const MODELS = [
|
||||
{ id: 'PNL00R', name: '阻性管路', sections: ['R'], ends: ['in', 'in'], caption: '压降 · 无储气', description: '计算摩擦压降，不增加管内储气状态。', states: 0, fields: ['length', 'diameter', 'roughness'] },
|
||||
{ id: 'PNL0001', name: '单端储气管路', sections: ['C', 'R'], ends: ['in', 'out'], caption: '单端储气', description: '考虑摩擦压降与一处储气容积，包含 2 个热力状态。', states: 2, fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
|
||||
{ id: 'PNL0002', name: '中间储气管路', sections: ['R', 'C', 'R'], ends: ['in', 'in'], caption: '中间储气', description: '考虑摩擦压降与中间储气容积，包含 2 个热力状态。', states: 2, fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature'] },
|
||||
{ id: 'PNL0003', name: '双端储气管路', sections: ['C', 'R', 'C'], ends: ['out', 'out'], caption: '双端储气', description: '考虑摩擦压降与两端储气容积，包含 4 个热力状态。', states: 4, fields: ['length', 'diameter', 'roughness', 'pressure', 'temperature', 'pressure2', 'temperature2'] },
|
||||
];
|
||||
const FIELDS = {
|
||||
length: { name: '管长', unit: 'm', min: 0, positive: true, default: '' },
|
||||
diameter: { name: '内径', unit: 'mm', min: 0, positive: true, default: '' },
|
||||
roughness: { name: '相对粗糙度', unit: '—', min: 0, max: .1, default: '0.00001' },
|
||||
pressure: { name: '初始压力', unit: 'bar(a)', min: 0, positive: true, default: '1' },
|
||||
temperature: { name: '初始温度', unit: 'K', min: 0, positive: true, default: '293.15' },
|
||||
pressure2: { name: '端口 2 初始压力', unit: 'bar(a)', min: 0, positive: true, default: '1' },
|
||||
temperature2: { name: '端口 2 初始温度', unit: 'K', min: 0, positive: true, default: '293.15' },
|
||||
};
|
||||
const modelById = id => MODELS.find(model => model.id === id);
|
||||
const pipeById = id => PIPES.find(pipe => pipe.id === id);
|
||||
const initial = () => ({ version: 1, mode: 'submodel', selected: 'L1', configs: Object.fromEntries(PIPES.map(pipe => [pipe.id, { model: null, params: {} }])) });
|
||||
let state = initial();
|
||||
let preview = null, storageOK = true, consoleOpen = true;
|
||||
let pan = null, view = { zoom: 1, x: 0, y: 0 }, baseScale = 1;
|
||||
let log = [{ kind: 'INFO', text: '选择中间画布的管路，再从左侧指定子模型。' }, { kind: 'INFO', text: '位置和连接关系固定；支持缩放与空白区平移查看。' }];
|
||||
const activePipe = () => pipeById(state.selected);
|
||||
const activeConfig = () => state.configs[state.selected];
|
||||
function compatible(pipe, model) {
|
||||
const a = endpoints[pipe.a].state, b = endpoints[pipe.b].state;
|
||||
return (a !== model.ends[0] && b !== model.ends[1]) || (a !== model.ends[1] && b !== model.ends[0]);
|
||||
}
|
||||
function candidates(pipe) { return MODELS.filter(model => compatible(pipe, model)); }
|
||||
function choosePreview() { preview = activeConfig().model || candidates(activePipe())[0]?.id || null; }
|
||||
function load() {
|
||||
try {
|
||||
const data = JSON.parse(localStorage.getItem(KEY) || 'null');
|
||||
if (!data || data.version !== 1 || !data.configs || typeof data.configs !== 'object') return;
|
||||
const restored = initial();
|
||||
if (['modeling', 'submodel', 'parameters', 'check'].includes(data.mode)) restored.mode = data.mode;
|
||||
if (pipeById(data.selected)) restored.selected = data.selected;
|
||||
PIPES.forEach(pipe => {
|
||||
const item = data.configs[pipe.id];
|
||||
if (!item || !modelById(item.model) || !compatible(pipe, modelById(item.model))) return;
|
||||
restored.configs[pipe.id] = { model: item.model, params: Object.fromEntries(Object.keys(FIELDS)
|
||||
.filter(key => ['string', 'number'].includes(typeof item.params?.[key]))
|
||||
.map(key => [key, String(item.params[key]).slice(0, 64)])) };
|
||||
});
|
||||
state = restored;
|
||||
} catch { storageOK = false; }
|
||||
}
|
||||
function save() {
|
||||
try { localStorage.setItem(KEY, JSON.stringify(state)); storageOK = true; }
|
||||
catch { storageOK = false; }
|
||||
$('save-state').textContent = storageOK ? '演示已保存' : '仅当前页面保留';
|
||||
}
|
||||
function tell(text) { $('notice').textContent = text; }
|
||||
function addLog(text, kind = 'INFO') { log = [...log.slice(-15), { kind, text }]; renderLog(); }
|
||||
function valid(key, value) {
|
||||
const spec = FIELDS[key], number = Number(value);
|
||||
return String(value ?? '').trim() !== '' && Number.isFinite(number) && (spec.positive ? number > spec.min : number >= spec.min) && (spec.max === undefined || number <= spec.max);
|
||||
}
|
||||
function missing(pipe) {
|
||||
const config = state.configs[pipe.id];
|
||||
return (modelById(config.model)?.fields || []).filter(key => !valid(key, config.params[key]));
|
||||
}
|
||||
function pipeStatus(pipe) {
|
||||
const config = state.configs[pipe.id];
|
||||
return !config.model ? '未指定' : missing(pipe).length ? '待填参数' : '配置完成';
|
||||
}
|
||||
function pipeIcon(model) {
|
||||
const width = 58 / model.sections.length;
|
||||
return `<svg viewBox="0 0 84 44" aria-hidden="true"><path d="M1 22H13M71 22H83" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="13" y="10" width="58" height="24" fill="white" stroke="currentColor" stroke-width="1.5"/>${model.sections.map((section, index) => `${index ? `<path d="M${13 + index * width} 10V34" stroke="currentColor" stroke-width="1"/>` : ''}<text x="${13 + width * (index + .5)}" y="26" text-anchor="middle" font-family="Segoe UI,sans-serif" font-size="12" fill="currentColor">${section}</text>`).join('')}</svg>`;
|
||||
}
|
||||
function renderLibrary() {
|
||||
const pipe = activePipe(), editable = state.mode === 'submodel';
|
||||
const list = $('compatible-only').checked ? candidates(pipe) : MODELS;
|
||||
$('library').innerHTML = list.map(model => {
|
||||
const ok = compatible(pipe, model);
|
||||
return `<button type="button" class="model-tile" data-model="${model.id}" draggable="false" aria-label="${model.id} ${model.name}${ok ? '' : '，不兼容'}" aria-pressed="${preview === model.id}" ${!ok || !editable ? 'disabled' : ''} title="${ok ? model.description : '与当前管路两端的变量供需不匹配'}">${pipeIcon(model)}<strong>${model.id}</strong><small>${model.caption}</small></button>`;
|
||||
}).join('');
|
||||
$('library-hint').textContent = editable ? `${pipe.id}：${candidates(pipe).length} 个兼容型号。点击预览，应用后生效。` : '切换到“子模型”模式可更换管路型号。';
|
||||
$('pipe-list').innerHTML = PIPES.map(item => `<button type="button" data-pipe="${item.id}" aria-label="${item.id} ${pipeStatus(item)}" aria-pressed="${item.id === state.selected}"><span class="state-dot ${state.configs[item.id].model ? missing(item).length ? 'assigned' : 'ready' : ''}"></span><strong>${item.id}</strong><span class="model-id">${state.configs[item.id].model || '未指定'}</span></button>`).join('');
|
||||
}
|
||||
function drawFixedComponents() {
|
||||
const port = (x, y, label = '') => `<circle cx="${x}" cy="${y}" r="4" fill="white" stroke="#b3809a" stroke-width="1.2"/>${label ? `<text class="port-label" x="${x + 9}" y="${y - 10}">${label}</text>` : ''}`;
|
||||
$('component-layer').innerHTML = `
|
||||
<g class="fixed-component" data-component="A" transform="translate(140 360)"><rect x="-35" y="-40" width="70" height="80" rx="0" fill="white" stroke="#be8ca5" stroke-width="1.5"/>${port(35, 0)}<text class="component-label" x="0" y="76" text-anchor="middle">储气罐 A</text><text class="component-code" x="0" y="101" text-anchor="middle">PNCH023</text></g>
|
||||
<g class="fixed-component" data-component="N1" transform="translate(480 360)"><path d="M-20 0H20M0-20V20" stroke="#ae7391" stroke-width="1.6" fill="none"/>${port(-20, 0, '1')}${port(20, 0, '2')}${port(0, -20, '3')}${port(0, 20, '4')}<text class="component-label" x="36" y="63">节点 N1</text><text class="component-code" x="36" y="88">P4NODE2 · 固定</text></g>
|
||||
<g class="fixed-component" data-component="B" transform="translate(825 360)"><path d="M-35 0H35M-20-17Q0 9 20-17M-20 17Q0-9 20 17M-18 31L18-31" stroke="#be8ca5" stroke-width="1.6" fill="none"/><path d="M18-31L9-23L18-20Z" fill="#be8ca5"/>${port(-35, 0)}<text class="component-label" x="0" y="76" text-anchor="middle">阀门 B</text><text class="component-code" x="0" y="101" text-anchor="middle">PNVO001</text></g>
|
||||
<g class="fixed-component" data-component="C" transform="translate(480 130)"><path d="M-15-4H15M-12-4L-7-11M-3-4L2-11M6-4L11-11" stroke="#ba829f" stroke-width="1.5" fill="none"/>${port(0, 4)}<text class="component-label" x="30" y="5">封堵 C</text></g>
|
||||
<g class="fixed-component" data-component="D" transform="translate(480 570)"><path d="M-15 4H15M-12 4L-7 11M-3 4L2 11M6 4L11 11" stroke="#ba829f" stroke-width="1.5" fill="none"/>${port(0, -4)}<text class="component-label" x="30" y="5">封堵 D</text></g>`;
|
||||
}
|
||||
function renderWires() {
|
||||
$('wire-layer').innerHTML = PIPES.map(pipe => `<g><path class="wire ${state.configs[pipe.id].model ? 'assigned' : ''} ${pipe.id === state.selected ? 'selected' : ''}" d="${pipe.path}"/><path class="wire-hit" data-pipe="${pipe.id}" d="${pipe.path}"/></g>`).join('');
|
||||
const compact = $('canvas').clientWidth < 460;
|
||||
$('pipe-label-layer').innerHTML = PIPES.map(pipe => `<text class="pipe-name ${pipe.id === state.selected ? 'selected' : ''}" x="${pipe.x}" y="${pipe.y}" text-anchor="${pipe.anchor}">${pipe.id}${!compact && $('show-labels').checked && state.mode !== 'modeling' ? ' · ' + (state.configs[pipe.id].model || '未指定') : ''}</text>`).join('');
|
||||
$('diagram').classList.toggle('compact', compact);
|
||||
applyView();
|
||||
}
|
||||
function resizeCanvas() {
|
||||
const width = $('canvas').clientWidth, height = $('canvas').clientHeight;
|
||||
if (!width || !height) return;
|
||||
$('diagram').setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||||
baseScale = Math.max(.1, Math.min((width - 30) / 960, (height - 35) / 660));
|
||||
renderWires();
|
||||
}
|
||||
function applyView() {
|
||||
const width = $('canvas').clientWidth, height = $('canvas').clientHeight;
|
||||
const scale = baseScale * view.zoom;
|
||||
const x = (width - 960 * scale) / 2 + view.x, y = (height - 660 * scale) / 2 + view.y;
|
||||
$('scene').setAttribute('transform', `translate(${x} ${y}) scale(${scale})`);
|
||||
$('zoom-value').textContent = `${Math.round(view.zoom * 100)}%`;
|
||||
const textScale = Math.max(baseScale, .42);
|
||||
$('scene').querySelectorAll('.component-label,.pipe-name').forEach(label => { label.style.fontSize = `${12 / textScale}px`; });
|
||||
$('scene').querySelectorAll('.component-code').forEach(label => { label.style.fontSize = `${10 / textScale}px`; });
|
||||
$('grid-pattern').setAttribute('width', 20 * view.zoom);
|
||||
$('grid-pattern').setAttribute('height', 20 * view.zoom);
|
||||
$('grid-pattern').setAttribute('patternTransform', `translate(${view.x} ${view.y})`);
|
||||
}
|
||||
function portMapping(pipe, model) {
|
||||
if (model.ends[0] === model.ends[1]) return `端口 1：${endpoints[pipe.a].label}；端口 2：${endpoints[pipe.b].label}。两端接口对称。`;
|
||||
const forward = endpoints[pipe.a].state !== model.ends[0];
|
||||
return `端口 1：${endpoints[forward ? pipe.a : pipe.b].label}；端口 2：${endpoints[forward ? pipe.b : pipe.a].label}。`;
|
||||
}
|
||||
function renderProperties() {
|
||||
const pipe = activePipe(), config = activeConfig();
|
||||
const model = modelById(state.mode === 'submodel' ? preview : config.model);
|
||||
$('selected-pipe').textContent = pipe.id;
|
||||
const editable = state.mode === 'submodel';
|
||||
$('model-properties').innerHTML = `<table class="property-table"><tbody>
|
||||
<tr><th>对象</th><td>管路 ${pipe.id}</td></tr>
|
||||
<tr><th>连接端 A</th><td>${safe(endpoints[pipe.a].label)}</td></tr>
|
||||
<tr><th>连接端 B</th><td>${safe(endpoints[pipe.b].label)}</td></tr>
|
||||
<tr><th>已用型号</th><td>${config.model || '未指定'}</td></tr>
|
||||
</tbody></table>${model ? `<div class="preview"><div class="preview-title">${pipeIcon(model)}<div><strong>${model.id}</strong><small>${model.name}${editable && model.id !== config.model ? ' · 待应用' : ''}</small></div></div><p class="preview-description">${model.description}</p>
|
||||
${editable ? `<div class="apply-buttons"><button type="button" class="primary" data-action="apply" ${model.id === config.model ? 'disabled' : ''}>应用到 ${pipe.id}</button><button type="button" data-action="apply-next">应用并下一条</button></div>` : ''}
|
||||
<details class="property-details"><summary>端口方向与选型说明</summary><p>${safe(portMapping(pipe, model))}</p><p>按接口筛选；储气、压降等物理作用由所选型号决定。</p><p>C 表示储气，R 表示阻力。图标沿用建模区表示方式。</p></details></div>` : '<div class="empty-hint">在“子模型”模式从左侧选择管路型号。</div>'}`;
|
||||
renderParameters();
|
||||
}
|
||||
function renderParameters() {
|
||||
const config = activeConfig(), model = modelById(config.model), editable = state.mode === 'parameters';
|
||||
$('edit-parameters').disabled = !model || editable;
|
||||
if (!model) { $('parameter-properties').innerHTML = '<div class="empty-hint">应用管路子模型后显示所需参数。</div>'; return; }
|
||||
$('parameter-properties').innerHTML = `<table class="parameter-table"><thead><tr><th>参数</th><th>数值</th><th>单位</th></tr></thead><tbody>${model.fields.map(key => {
|
||||
const spec = FIELDS[key];
|
||||
const label = model.id === 'PNL0003' && ['pressure', 'temperature'].includes(key) ? '端口 1 ' + spec.name : spec.name;
|
||||
return `<tr><td><label for="parameter-${key}">${label}</label></td><td><input id="parameter-${key}" type="number" data-parameter="${key}" value="${safe(config.params[key] ?? '')}" min="${spec.min}" ${spec.max !== undefined ? `max="${spec.max}"` : ''} step="any" ${editable ? '' : 'readonly'} aria-invalid="${editable && !valid(key, config.params[key])}" placeholder="待填"></td><td>${spec.unit}</td></tr>`;
|
||||
}).join('')}</tbody></table><div class="parameter-note" id="parameter-note"></div>`;
|
||||
updateParameterNote();
|
||||
}
|
||||
function updateParameterNote() {
|
||||
const note = $('parameter-note');
|
||||
if (!note) return;
|
||||
const count = missing(activePipe()).length;
|
||||
note.classList.toggle('ready', !count);
|
||||
note.textContent = state.mode !== 'parameters' ? '当前只读；进入参数模式填写实际值。' : count ? `待填写或修正 ${count} 项。` : '参数完整 · 已保存到此演示。';
|
||||
}
|
||||
function updateProgress() {
|
||||
const assigned = PIPES.filter(pipe => state.configs[pipe.id].model).length;
|
||||
const ready = PIPES.filter(pipe => state.configs[pipe.id].model && !missing(pipe).length).length;
|
||||
$('progress').textContent = `${assigned}/4 已选型 · ${ready}/4 参数完整`;
|
||||
}
|
||||
function renderLog() {
|
||||
const items = state.mode === 'check' ? PIPES.map(pipe => {
|
||||
const config = state.configs[pipe.id];
|
||||
return { kind: !config.model || missing(pipe).length ? 'WARN' : 'OK', text: `${pipe.id} ${config.model || '未指定子模型'} ${pipeStatus(pipe)}`, pipe: !config.model || missing(pipe).length ? pipe.id : null };
|
||||
}) : log;
|
||||
$('console-content').innerHTML = items.map(item => `<div class="log-row"><span class="log-kind ${item.kind === 'WARN' ? 'warn' : item.kind === 'OK' ? 'ok' : ''}">${item.kind}</span>${item.pipe ? `<button type="button" data-fix="${item.pipe}">${safe(item.text)} → 处理</button>` : `<span>${safe(item.text)}</span>`}</div>`).join('');
|
||||
if (state.mode === 'check') {
|
||||
const complete = items.every(item => item.kind === 'OK');
|
||||
$('console-summary').textContent = complete ? '局部配置检查通过 · 未执行仿真' : '点击问题项定位';
|
||||
} else $('console-summary').textContent = '仅配置演示，不执行仿真';
|
||||
}
|
||||
function render() {
|
||||
document.querySelectorAll('[data-mode]').forEach(button => button.setAttribute('aria-pressed', String(button.dataset.mode === state.mode)));
|
||||
$('mode-marker').textContent = ({ modeling: '建模预览', submodel: '子模型模式', parameters: '参数模式', check: '配置检查' })[state.mode];
|
||||
renderLibrary(); renderWires(); renderProperties(); renderLog(); updateProgress();
|
||||
}
|
||||
function setMode(mode) {
|
||||
state.mode = mode; choosePreview(); render(); save();
|
||||
tell(mode === 'modeling' ? '此 demo 的部件、位置与连接固定；进入子模型模式选择管路型号。' : mode === 'submodel' ? '选中管路，在左侧预览型号，在右侧应用。' : mode === 'parameters' ? '在右侧填写选中管路的实际参数。' : '当前仅检查演示的接口匹配和必填参数。');
|
||||
if (mode === 'check') { consoleOpen = true; renderConsoleVisibility(); }
|
||||
}
|
||||
function selectPipe(id) {
|
||||
if (!pipeById(id)) return;
|
||||
state.selected = id; choosePreview(); render(); save();
|
||||
tell(`${id} 已选中。部件与连线位置保持锁定。`);
|
||||
}
|
||||
function nextUnassigned() {
|
||||
const start = PIPES.findIndex(pipe => pipe.id === state.selected);
|
||||
const ordered = [...PIPES.slice(start + 1), ...PIPES.slice(0, start + 1)];
|
||||
const next = ordered.find(pipe => !state.configs[pipe.id].model);
|
||||
if (next) { setMode('submodel'); selectPipe(next.id); }
|
||||
else tell('所有管路均已选型。可进入参数模式继续填写。');
|
||||
}
|
||||
function applyModel(next = false) {
|
||||
if (state.mode !== 'submodel') return;
|
||||
const pipe = activePipe(), model = modelById(preview), config = activeConfig();
|
||||
if (!model || !compatible(pipe, model)) return;
|
||||
config.model = model.id;
|
||||
model.fields.forEach(key => { if (config.params[key] === undefined) config.params[key] = FIELDS[key].default; });
|
||||
render(); save(); addLog(`${pipe.id} 已应用 ${model.id}。${model.description}`);
|
||||
tell(`${pipe.id} 已应用 ${model.id}。`);
|
||||
if (next) {
|
||||
if (PIPES.some(item => !state.configs[item.id].model)) nextUnassigned();
|
||||
else { const target = PIPES.find(item => missing(item).length); if (target) state.selected = target.id; setMode('parameters'); tell('管路选型完成；填写实际管长、内径后检查配置。'); }
|
||||
}
|
||||
}
|
||||
function zoom(factor, anchor = null) {
|
||||
const next = Math.max(.5, Math.min(3, view.zoom * factor));
|
||||
if (anchor) {
|
||||
const width = $('canvas').clientWidth, height = $('canvas').clientHeight;
|
||||
const ratio = next / view.zoom;
|
||||
view.x = anchor.x - width / 2 - (anchor.x - width / 2 - view.x) * ratio;
|
||||
view.y = anchor.y - height / 2 - (anchor.y - height / 2 - view.y) * ratio;
|
||||
}
|
||||
view.zoom = next; applyView();
|
||||
}
|
||||
function renderConsoleVisibility() {
|
||||
$('console').classList.toggle('collapsed', !consoleOpen);
|
||||
$('toggle-console').setAttribute('aria-expanded', String(consoleOpen));
|
||||
$('toggle-console').textContent = `${consoleOpen ? '▾' : '▸'} 配置信息`;
|
||||
}
|
||||
document.querySelectorAll('[data-mode]').forEach(button => button.addEventListener('click', () => setMode(button.dataset.mode)));
|
||||
$('pipe-list').addEventListener('click', event => { const id = event.target.closest('[data-pipe]')?.dataset.pipe; if (id) selectPipe(id); });
|
||||
$('diagram').addEventListener('click', event => {
|
||||
if (pan?.moved) return;
|
||||
const pipe = event.target.closest('[data-pipe]');
|
||||
if (pipe) selectPipe(pipe.dataset.pipe);
|
||||
else if (event.target.closest('[data-component]')) tell('此 demo 只开放管路子模型，部件与 pnode 固定。');
|
||||
});
|
||||
$('diagram').addEventListener('dblclick', event => { const id = event.target.closest('[data-pipe]')?.dataset.pipe; if (id) { setMode('submodel'); selectPipe(id); $('library').querySelector('button:not(:disabled)')?.focus(); } });
|
||||
$('library').addEventListener('click', event => {
|
||||
const target = event.target.closest('[data-model]');
|
||||
if (!target || target.disabled || state.mode !== 'submodel') return;
|
||||
preview = target.dataset.model; renderLibrary(); renderProperties();
|
||||
tell(`预览 ${preview}；点击“应用到 ${state.selected}”生效。`);
|
||||
});
|
||||
$('library').addEventListener('dblclick', event => { const target = event.target.closest('[data-model]'); if (target && !target.disabled) { preview = target.dataset.model; applyModel(); } });
|
||||
$('compatible-only').addEventListener('change', renderLibrary);
|
||||
$('show-labels').addEventListener('change', renderWires);
|
||||
$('next-unassigned').addEventListener('click', nextUnassigned);
|
||||
$('model-properties').addEventListener('click', event => { const action = event.target.closest('[data-action]')?.dataset.action; if (action === 'apply' || action === 'apply-next') applyModel(action === 'apply-next'); });
|
||||
$('edit-parameters').addEventListener('click', () => setMode('parameters'));
|
||||
$('parameter-properties').addEventListener('input', event => {
|
||||
if (state.mode !== 'parameters') return;
|
||||
const key = event.target.dataset.parameter;
|
||||
if (!FIELDS[key]) return;
|
||||
activeConfig().params[key] = event.target.value;
|
||||
event.target.setAttribute('aria-invalid', String(!valid(key, event.target.value)));
|
||||
updateParameterNote(); updateProgress(); renderLibrary(); save();
|
||||
});
|
||||
$('console-content').addEventListener('click', event => {
|
||||
const id = event.target.closest('[data-fix]')?.dataset.fix;
|
||||
if (id) { selectPipe(id); setMode(state.configs[id].model ? 'parameters' : 'submodel'); }
|
||||
});
|
||||
$('toggle-console').addEventListener('click', () => { consoleOpen = !consoleOpen; renderConsoleVisibility(); });
|
||||
$('fit-view').addEventListener('click', () => { view = { zoom: 1, x: 0, y: 0 }; applyView(); });
|
||||
$('zoom-in').addEventListener('click', () => zoom(1.2));
|
||||
$('zoom-out').addEventListener('click', () => zoom(1 / 1.2));
|
||||
$('diagram').addEventListener('wheel', event => { event.preventDefault(); const bounds = $('diagram').getBoundingClientRect(); zoom(event.deltaY < 0 ? 1.1 : 1 / 1.1, { x: event.clientX - bounds.left, y: event.clientY - bounds.top }); }, { passive: false });
|
||||
// Only viewport movement is supported. No component/port/edge drag handler exists.
|
||||
$('diagram').addEventListener('pointerdown', event => {
|
||||
if (event.button !== 1 && !(event.button === 0 && event.target.hasAttribute('data-background'))) return;
|
||||
event.preventDefault();
|
||||
pan = { id: event.pointerId, x: event.clientX, y: event.clientY, initialX: view.x, initialY: view.y, moved: false };
|
||||
$('diagram').setPointerCapture(event.pointerId); $('diagram').classList.add('panning');
|
||||
});
|
||||
$('diagram').addEventListener('pointermove', event => {
|
||||
if (!pan || pan.id !== event.pointerId) return;
|
||||
const dx = event.clientX - pan.x, dy = event.clientY - pan.y;
|
||||
pan.moved ||= Math.abs(dx) + Math.abs(dy) > 3;
|
||||
view.x = pan.initialX + dx; view.y = pan.initialY + dy; applyView();
|
||||
});
|
||||
function endPan(event) {
|
||||
if (!pan || pan.id !== event.pointerId) return;
|
||||
if ($('diagram').hasPointerCapture(event.pointerId)) $('diagram').releasePointerCapture(event.pointerId);
|
||||
$('diagram').classList.remove('panning'); pan = null;
|
||||
}
|
||||
$('diagram').addEventListener('pointerup', endPan);
|
||||
$('diagram').addEventListener('pointercancel', endPan);
|
||||
$('diagram').addEventListener('lostpointercapture', endPan);
|
||||
document.addEventListener('dragstart', event => { if (event.target.closest('#diagram,#library')) event.preventDefault(); });
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Delete' && !event.target.closest('input,textarea,[contenteditable=true]')) { event.preventDefault(); tell('子模型演示的部件和连接固定，不能删除或移动。'); }
|
||||
});
|
||||
$('reset').addEventListener('click', () => {
|
||||
state = initial(); view = { zoom: 1, x: 0, y: 0 }; pan = null; choosePreview();
|
||||
log = [{ kind: 'INFO', text: '已重置本页的管路选型与参数。固定布局保持原样。' }];
|
||||
render(); save(); tell('已重置此 demo；上一版和正式工程不受影响。');
|
||||
});
|
||||
load(); choosePreview(); drawFixedComponents(); render(); save();
|
||||
new ResizeObserver(resizeCanvas).observe($('canvas'));
|
||||
})();
|
||||
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>管路子模型 · System Simulation</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<script src="./app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="topbar">
|
||||
<div class="product"><strong>System Simulation</strong><span>管路子模型布局演示</span></div>
|
||||
<nav class="view-tabs" aria-label="工作模式">
|
||||
<button data-mode="modeling" type="button" aria-pressed="false">建模</button>
|
||||
<button data-mode="submodel" type="button" aria-pressed="true">子模型</button>
|
||||
<button data-mode="parameters" type="button" aria-pressed="false">参数</button>
|
||||
<button data-mode="check" type="button" aria-pressed="false">检查</button>
|
||||
</nav>
|
||||
<div class="topbar-actions"><a href="../amesim-submodels/index.html">上一版</a><a href="/">主应用</a><button id="reset" type="button">重置演示</button></div>
|
||||
</header>
|
||||
<nav class="editor-toolbar" aria-label="子模型工具">
|
||||
<span class="mode-marker" id="mode-marker">子模型模式</span>
|
||||
<span class="toolbar-separator"></span>
|
||||
<button id="next-unassigned" type="button"><span aria-hidden="true">↦</span> 下一条待选</button>
|
||||
<button id="fit-view" type="button">适配视图</button>
|
||||
<label class="toolbar-check"><input type="checkbox" id="show-labels" checked>显示子模型名称</label>
|
||||
<span class="toolbar-end"><svg width="13" height="14" viewBox="0 0 13 14" aria-hidden="true"><rect x="2" y="6" width="9" height="7" rx="1"/><path d="M4 6V4a2.5 2.5 0 0 1 5 0v2"/></svg>布局已锁定</span>
|
||||
</nav>
|
||||
<main class="workbench">
|
||||
<aside class="palette" aria-label="管路子模型库">
|
||||
<div class="panel-title"><strong>管路子模型</strong><span>4 个</span></div>
|
||||
<div class="palette-content">
|
||||
<label class="compat-filter"><input id="compatible-only" type="checkbox" checked>只显示当前连线兼容项</label>
|
||||
<div class="library-heading">▾ 气动管路</div>
|
||||
<div id="library" class="palette-grid" aria-label="可选管路子模型"></div>
|
||||
<div id="library-hint" class="library-hint">先选中画布中的管路。</div>
|
||||
</div>
|
||||
<div class="section-heading">模型中的管路</div>
|
||||
<div id="pipe-list" class="pipe-list" aria-label="管路列表"></div>
|
||||
<div class="palette-footer">仅管路可选型<br>pnode 与其他部件固定</div>
|
||||
</aside>
|
||||
<div class="pane-divider" aria-hidden="true"></div>
|
||||
<section class="center-pane" aria-label="模型画布与检查信息">
|
||||
<div class="document-tab"><span>气动管路示例</span><span class="document-note">固定连接 · 独立 demo</span></div>
|
||||
<div id="canvas" class="canvas">
|
||||
<svg id="diagram" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="固定气动网络，选择管路可指定子模型，部件位置不可修改">
|
||||
<defs><pattern id="grid-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r="0.75" fill="#c8d1da"/></pattern></defs>
|
||||
<rect width="100%" height="100%" fill="white" data-background="true"/>
|
||||
<rect width="100%" height="100%" fill="url(#grid-pattern)" data-background="true"/>
|
||||
<g id="scene"><g id="wire-layer"></g><g id="component-layer"></g><g id="pipe-label-layer"></g></g>
|
||||
</svg>
|
||||
<div class="canvas-lock">部件 / 连线位置锁定</div>
|
||||
<div class="viewport-controls"><button type="button" id="zoom-out" aria-label="缩小画布">−</button><span id="zoom-value">100%</span><button type="button" id="zoom-in" aria-label="放大画布">+</button></div>
|
||||
</div>
|
||||
<section id="console" class="console" aria-label="配置检查信息">
|
||||
<div class="console-header"><button id="toggle-console" type="button" aria-expanded="true">▾ 配置信息</button><span id="console-summary">仅配置演示，不执行仿真</span></div>
|
||||
<div id="console-content" class="console-content"></div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="pane-divider" aria-hidden="true"></div>
|
||||
<aside class="properties" aria-label="子模型属性与参数">
|
||||
<section class="properties-subpane">
|
||||
<div class="panel-title"><strong>子模型属性</strong><span id="selected-pipe">L1</span></div>
|
||||
<div id="model-properties" class="properties-content"></div>
|
||||
</section>
|
||||
<div class="horizontal-divider" aria-hidden="true"></div>
|
||||
<section class="properties-subpane">
|
||||
<div class="panel-title"><strong>管路参数</strong><button id="edit-parameters" type="button">进入参数模式</button></div>
|
||||
<div id="parameter-properties" class="properties-content"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
<footer class="statusbar"><span id="notice" role="status" aria-live="polite">选择管路，再从左侧指定子模型。</span><span id="progress"></span><span id="save-state">独立保存</span></footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
:root { font: 13px/1.5 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; color: #263442; background: #eef2f6; --blue: #1d6fb8; --border: #cfd8e3; --muted: #64748b; --gas: #8b134f; }
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; width: 100%; height: 100%; }
|
||||
button, input { font: inherit; }
|
||||
button { cursor: pointer; border: 1px solid #c2ccda; background: #fff; color: #263442; padding: 5px 10px; border-radius: 4px; }
|
||||
button:hover { background: #eff5fa; }
|
||||
button:disabled { cursor: default; opacity: .48; }
|
||||
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
|
||||
a { color: #155a94; text-decoration: none; }
|
||||
input[type=checkbox] { accent-color: var(--blue); }
|
||||
.app-shell { height: 100dvh; display: grid; grid-template-rows: 62px 42px minmax(0,1fr) 28px; }
|
||||
.topbar { display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(240px,1fr); align-items: center; gap: 16px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: #fff; }
|
||||
.product strong { display: block; font-size: 15px; }
|
||||
.product span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
|
||||
.view-tabs { display: flex; height: 34px; border-bottom: 1px solid #bfcbd8; }
|
||||
.view-tabs button { min-width: 68px; padding: 0 13px; border: 0; border-radius: 0; border-bottom: 2px solid transparent; color: #526172; background: transparent; }
|
||||
.view-tabs button[aria-pressed=true] { border-bottom-color: var(--blue); color: #155a94; background: #eaf3fa; font-weight: 600; }
|
||||
.topbar-actions { display: flex; justify-content: flex-end; align-items: center; gap: 13px; font-size: 12px; }
|
||||
.editor-toolbar { display: flex; gap: 9px; align-items: center; padding: 5px 12px; border-bottom: 1px solid var(--border); background: #f5f7f9; }
|
||||
.editor-toolbar button { font-size: 12px; background: transparent; border-color: transparent; }
|
||||
.editor-toolbar button:hover { border-color: #c2ccda; background: #fff; }
|
||||
.mode-marker { color: #155a94; font-size: 12px; font-weight: 600; }
|
||||
.toolbar-separator { height: 22px; width: 1px; background: #d0d9e2; margin: 0 3px; }
|
||||
.toolbar-check { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
|
||||
.toolbar-end { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
|
||||
.toolbar-end svg { stroke: currentColor; stroke-width: 1.2; fill: none; }
|
||||
.workbench { display: grid; grid-template-columns: 230px 7px minmax(0,1fr) 7px 330px; min-height: 0; }
|
||||
.palette { display: flex; flex-direction: column; min-height: 0; overflow: auto; background: #fff; }
|
||||
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 10px; min-height: 33px; background: #f2f4f6; border-bottom: 1px solid #c7cdd4; font-size: 12px; }
|
||||
.panel-title span { font-size: 11px; color: var(--muted); }
|
||||
.panel-title button { font-size: 11px; border: 0; background: transparent; padding: 3px; color: #155a94; }
|
||||
.palette > .panel-title { background: #fff; padding: 12px 14px; min-height: 49px; border-bottom: 1px solid #e3e8ef; font-size: 13px; }
|
||||
.palette-content { padding: 12px; }
|
||||
.compat-filter { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #526172; cursor: pointer; margin-bottom: 15px; }
|
||||
.library-heading { color: #526172; font-size: 12px; margin-bottom: 10px; font-weight: 600; }
|
||||
.palette-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
|
||||
.model-tile { display: grid; grid-template-rows: 39px 18px 15px; gap: 2px; padding: 7px 5px; place-items: center; min-width: 0; border: 1px solid #d6dee9; background: #fff; border-radius: 5px; }
|
||||
.model-tile svg { width: 70px; height: 37px; color: var(--gas); }
|
||||
.model-tile strong { font-size: 11px; line-height: 18px; }
|
||||
.model-tile small { color: #66788c; font-size: 10px; line-height: 15px; }
|
||||
.model-tile[aria-pressed=true] { border-color: #4f92c7; background: #eaf4fc; box-shadow: inset 0 0 0 1px #4f92c7; }
|
||||
.model-tile:disabled { opacity: .4; background: #f5f6f7; }
|
||||
.library-hint { font-size: 11px; color: var(--muted); margin-top: 12px; min-height: 33px; }
|
||||
.section-heading { padding: 9px 13px; border-top: 1px solid #e3e8ef; border-bottom: 1px solid #e3e8ef; font-size: 12px; color: #475a6e; background: #f8fafc; }
|
||||
.pipe-list { padding: 7px 0; }
|
||||
.pipe-list button { display: grid; grid-template-columns: 8px 27px minmax(0,1fr); align-items: center; gap: 7px; width: 100%; border: 0; border-radius: 0; text-align: left; padding: 9px 14px; font-size: 12px; }
|
||||
.pipe-list button[aria-pressed=true] { color: #155a94; background: #eaf3fa; }
|
||||
.pipe-list .model-id { justify-self: end; font-size: 11px; color: #63788b; }
|
||||
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: #c3904f; }
|
||||
.state-dot.assigned { background: #628594; }
|
||||
.state-dot.ready { background: #398267; }
|
||||
.palette-footer { margin-top: auto; padding: 15px 13px; color: #738295; font-size: 11px; border-top: 1px solid #e5ebf0; }
|
||||
.pane-divider { background: linear-gradient(90deg,#eef2f6 3px,#c7d1dc 3px,#c7d1dc 4px,#eef2f6 4px); }
|
||||
.horizontal-divider { height: 7px; background: linear-gradient(#eef2f6 3px,#c7d1dc 3px,#c7d1dc 4px,#eef2f6 4px); }
|
||||
.center-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: 32px minmax(0,1fr) auto; }
|
||||
.document-tab { display: flex; justify-content: space-between; align-items: center; background: #f2f5f8; border-bottom: 1px solid #cbd5df; font-size: 12px; }
|
||||
.document-tab > span:first-child { background: #fff; height: 100%; padding: 7px 16px; border-right: 1px solid #cbd5df; }
|
||||
.document-note { padding-right: 11px; color: #8290a0; font-size: 11px; }
|
||||
.canvas { min-width: 0; min-height: 0; position: relative; overflow: hidden; background: #fff; }
|
||||
#diagram { display: block; width: 100%; height: 100%; user-select: none; touch-action: none; }
|
||||
#diagram [data-background] { cursor: grab; }
|
||||
#diagram.panning [data-background] { cursor: grabbing; }
|
||||
.fixed-component { cursor: default; }
|
||||
.fixed-component path, .fixed-component rect, .fixed-component circle { vector-effect: non-scaling-stroke; }
|
||||
.component-label { font: 15px "Segoe UI", "Microsoft YaHei", sans-serif; fill: #344759; }
|
||||
.component-code { font: 11px "Segoe UI", sans-serif; fill: #8a97a4; }
|
||||
.port-label { font: 11px "Segoe UI", sans-serif; fill: #8b134f; }
|
||||
.wire { fill: none; stroke: #b66b92; stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }
|
||||
.wire.assigned { stroke: #8b134f; stroke-dasharray: none; }
|
||||
.wire.selected { stroke: #176eb0; stroke-width: 2.6; }
|
||||
.wire-hit { fill: none; stroke: transparent; stroke-width: 20; vector-effect: non-scaling-stroke; cursor: pointer; }
|
||||
.pipe-name { font: 13px "Segoe UI", "Microsoft YaHei", sans-serif; fill: #8b134f; paint-order: stroke; stroke: white; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
|
||||
.pipe-name.selected { fill: #155a94; }
|
||||
.canvas-lock { position: absolute; top: 10px; right: 12px; font-size: 10px; color: #8a97a5; pointer-events: none; }
|
||||
.viewport-controls { display: flex; align-items: center; position: absolute; left: 12px; bottom: 12px; border: 1px solid #cbd5e1; background: white; border-radius: 4px; box-shadow: 0 2px 5px #40526910; }
|
||||
.viewport-controls button { padding: 2px 9px; border: 0; font-size: 18px; }
|
||||
.viewport-controls span { font-size: 11px; color: #536b7f; min-width: 44px; text-align: center; }
|
||||
.console { background: #fff; border-top: 1px solid #c7d1dc; min-height: 31px; }
|
||||
.console-header { display: flex; gap: 10px; align-items: center; min-height: 31px; background: #f3f5f8; border-bottom: 1px solid #dfe5ec; padding-right: 11px; }
|
||||
.console-header button { font-size: 12px; background: transparent; border: 0; text-align: left; border-radius: 0; }
|
||||
.console-header span { margin-left: auto; color: #7f8d9b; font-size: 10px; }
|
||||
.console-content { height: 120px; padding: 9px 12px; overflow: auto; font-size: 11px; color: #5e7286; }
|
||||
.console.collapsed .console-content { display: none; }
|
||||
.log-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; }
|
||||
.log-kind { font-size: 10px; color: #6a8090; flex: 0 0 30px; }
|
||||
.log-kind.warn { color: #956b28; }
|
||||
.log-kind.ok { color: #388166; }
|
||||
.log-row button { font-size: 11px; padding: 0; border: 0; color: #1764a0; background: transparent; text-align: left; }
|
||||
.properties { display: grid; grid-template-rows: minmax(290px, 46%) 7px minmax(0,1fr); min-width: 0; min-height: 0; }
|
||||
.properties-subpane { display: grid; grid-template-rows: 33px minmax(0,1fr); min-width: 0; min-height: 0; background: #fff; }
|
||||
.properties-content { min-height: 0; overflow: auto; }
|
||||
.property-table, .parameter-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
|
||||
.property-table th, .property-table td, .parameter-table td, .parameter-table th { text-align: left; vertical-align: middle; padding: 7px 9px; border-bottom: 1px solid #e3e8ee; overflow-wrap: anywhere; }
|
||||
.property-table th { width: 76px; font-weight: 400; color: #687c8e; background: #f8fafc; }
|
||||
.preview { padding: 13px 11px 10px; }
|
||||
.preview-title { display: flex; align-items: center; gap: 10px; }
|
||||
.preview-title svg { width: 72px; height: 38px; color: var(--gas); }
|
||||
.preview-title strong { font-size: 13px; }
|
||||
.preview-title small { display: block; color: #7f8e9d; font-size: 11px; }
|
||||
.preview-description { font-size: 11px; color: #62768a; margin: 7px 0 9px; }
|
||||
.apply-buttons { display: flex; gap: 7px; flex-wrap: wrap; }
|
||||
.apply-buttons button { font-size: 12px; }
|
||||
.primary { background: var(--blue); border-color: var(--blue); color: white; }
|
||||
.primary:hover { background: #155a94; }
|
||||
.property-details { font-size: 11px; color: #6a7d8f; margin: 11px 0 0; }
|
||||
summary { cursor: pointer; }
|
||||
.property-details p { margin: 7px 0; }
|
||||
.empty-hint { padding: 15px 12px; color: #7d8b99; font-size: 12px; }
|
||||
.parameter-table th { background: #f2f4f6; color: #536576; font-size: 11px; font-weight: 400; }
|
||||
.parameter-table th:nth-child(1) { width: 46%; }
|
||||
.parameter-table th:nth-child(2) { width: 34%; }
|
||||
.parameter-table th:nth-child(3) { width: 20%; }
|
||||
.parameter-table td { padding: 3px 7px; height: 34px; }
|
||||
.parameter-table td:first-child { color: #435b70; font-size: 11px; }
|
||||
.parameter-table td:last-child { color: #7c8d9e; font-size: 10px; }
|
||||
.parameter-table input { width: 100%; min-width: 0; height: 26px; color: #293f52; padding: 3px 5px; border: 1px solid #c9d4df; border-radius: 2px; font-size: 12px; background: white; }
|
||||
.parameter-table input:read-only { background: #f7f9fb; color: #7b8a98; border-color: transparent; }
|
||||
.parameter-table input[aria-invalid=true] { border-color: #c39450; }
|
||||
.parameter-note { font-size: 11px; color: #7d8d9b; padding: 10px; }
|
||||
.parameter-note.ready { color: #398267; }
|
||||
.statusbar { display: flex; align-items: center; gap: 16px; padding: 0 12px; font-size: 11px; background: #f5f7f9; border-top: 1px solid #cbd5df; color: #647b8f; }
|
||||
#notice { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
#progress, #save-state { flex-shrink: 0; }
|
||||
@media(max-width:1150px) { .workbench { grid-template-columns: 195px 7px minmax(0,1fr) 7px 280px; } .topbar { grid-template-columns: minmax(185px,1fr) auto minmax(180px,1fr); gap: 8px; } .view-tabs button { min-width: 56px; padding: 0 10px; } .topbar-actions { gap: 9px; } .palette-content { padding: 10px; } .model-tile svg { width: 60px; } }
|
||||
@media(max-width:850px) { .app-shell { height: auto; min-height: 100dvh; grid-template-rows: auto auto 1fr auto; } .topbar { grid-template-columns: 1fr auto; padding: 10px; } .view-tabs { grid-row: 2; grid-column: 1 / -1; justify-content: center; margin-top: 6px; } .view-tabs button { flex: 1; } .editor-toolbar { flex-wrap: wrap; min-height: 42px; } .toolbar-end { margin-left: auto; } .workbench { grid-template-columns: 175px 5px minmax(0,1fr); grid-template-rows: 530px auto; } .workbench > .pane-divider:nth-of-type(2) { display: none; } .properties { grid-column: 1 / -1; grid-template-columns: 1fr 7px 1fr; grid-template-rows: 350px; border-top: 1px solid #cbd5df; } .horizontal-divider { height: 100%; background: #eef2f6; } .properties-subpane { height: 100%; } .palette { min-height: 0; } .document-note { display: none; } .console-header span { display: none; } .console-content { height: 95px; } .palette-content { padding: 8px; } .palette-footer { font-size: 10px; } .statusbar { min-height: 28px; flex-wrap: wrap; gap: 5px 10px; padding: 5px 10px; } #notice { flex: 1 1 100%; } }
|
||||
@media(max-width:520px) { .topbar-actions { gap: 8px; font-size: 11px; } .topbar-actions button { padding: 4px 6px; } .product strong { font-size: 13px; } .product span { font-size: 10px; } .toolbar-check { margin-right: auto; } .toolbar-end { font-size: 10px; } .workbench { display: flex; flex-direction: column; } .workbench > .pane-divider { display: none; } .palette { display: grid; grid-template-columns: 1fr; overflow: visible; } .palette-content { padding: 10px; } .palette-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; } .model-tile svg { width: 54px; } .model-tile small { font-size: 9px; } .palette-footer, .library-heading, .palette .section-heading { display: none; } .compat-filter { margin-bottom: 8px; } .library-hint { margin-top: 7px; min-height: 0; } .pipe-list { display: flex; padding: 0; } .pipe-list button { display: flex; gap: 5px; padding: 8px; } .pipe-list .model-id { display: none; } .center-pane { height: 450px; } .properties { display: flex; flex-direction: column; } .properties-subpane { min-height: 310px; max-height: none; overflow: visible; } .properties-content { overflow: visible; } .horizontal-divider { height: 7px; } }
|
||||
Reference in new issue
Block a user