78 lines
5.1 KiB
HTML
78 lines
5.1 KiB
HTML
<!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>
|