228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>DWG / DXF 图纸查看器</title>
|
||
<link rel="icon" href="favicon.ico">
|
||
<link rel="stylesheet" href="./style.css?v=2">
|
||
<!-- dxf-parser 直接引用了 npm 包名 loglevel，这里映射到本地替身，免掉打包步骤 -->
|
||
<script type="importmap">
|
||
{ "imports": { "loglevel": "./libs/shims/loglevel.js" } }
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<!-- 顶栏 -->
|
||
<div id="topbar">
|
||
<div class="logo"><span class="logo-text">DWG / DXF 图纸查看器</span></div>
|
||
<button id="btnOpen" class="btn-primary" title="打开 DWG / DXF 图纸">打开图纸</button>
|
||
<button id="btnEmbed" class="btn-secondary" title="生成嵌入链接">嵌入</button>
|
||
<label id="layoutBox" class="layout-label hidden">图纸
|
||
<select id="layoutSelect"></select>
|
||
</label>
|
||
<span id="fileName" class="file-name">未加载图纸（支持拖拽 .dwg / .dxf 到页面）</span>
|
||
<div class="top-right">
|
||
<button id="btnFullscreen" class="icon-btn" title="全屏"><img src="./icons/all-screen.png" alt="全屏"></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="main">
|
||
<!-- 左侧图层面板 -->
|
||
<div id="treePanel">
|
||
<div class="tree-header">
|
||
<span class="tree-title">图层</span>
|
||
<span id="layerCount" class="tree-count"></span>
|
||
<button id="btnTreeClose" class="tree-close" title="关闭面板">✕</button>
|
||
<div class="tree-search">
|
||
<img src="./icons/ico-search.33e9e6a1.png" alt="搜索">
|
||
<input id="treeSearch" type="text" placeholder="搜索图层...">
|
||
</div>
|
||
<div class="tree-actions">
|
||
<button id="btnLayerAll" class="link-btn">全选</button>
|
||
<button id="btnLayerNone" class="link-btn">全不选</button>
|
||
<button id="btnLayerInvert" class="link-btn">反选</button>
|
||
</div>
|
||
</div>
|
||
<div id="tree" class="tree-body"><div class="tree-empty">加载图纸后显示图层</div></div>
|
||
</div>
|
||
|
||
<!-- 视口 -->
|
||
<div id="viewport">
|
||
<div id="canvasWrap"></div>
|
||
|
||
<!-- 底部工具栏 -->
|
||
<div id="toolbar">
|
||
<button class="tool-btn active" data-tool="select" title="选择（点选图元查看属性）"><img src="./icons/view-tool-select.png" alt="选择"><span>选择</span></button>
|
||
<button class="tool-btn" data-tool="measure" title="测量"><img src="./icons/view-tool-measure.png" alt="测量"><span>测量</span></button>
|
||
<button class="tool-btn" data-tool="anno" title="批注"><img src="./icons/view-tool-comment.png" alt="批注"><span>批注</span></button>
|
||
<button class="tool-btn" data-tool="zoomBox" title="框选放大"><img src="./icons/view-tool-scale.png" alt="框选放大"><span>框选</span></button>
|
||
<div class="tool-sep"></div>
|
||
<button class="tool-btn" id="btnLayerPanel" title="图层显示/隐藏"><img src="./icons/view-tool-layer.png" alt="图层"><span>图层</span></button>
|
||
<button class="tool-btn" id="btnFind" title="文字查找"><img src="./icons/view-tool-textFind.png" alt="文字查找"><span>查找</span></button>
|
||
<button class="tool-btn" id="btnLineWeight" title="显示真实线宽"><img src="./icons/view-tool-lineWeight.png" alt="线宽"><span>线宽</span></button>
|
||
<button class="tool-btn" id="btnBg" title="黑底 / 白底切换"><img src="./icons/ico-set-color.png" alt="背景"><span>背景</span></button>
|
||
<button class="tool-btn" id="btnSettings" title="显示设置"><img src="./icons/view-tool-settings.png" alt="设置"><span>设置</span></button>
|
||
<button class="tool-btn" id="btnInfo" title="图纸信息"><img src="./icons/view-tool-graphic.png" alt="信息"><span>信息</span></button>
|
||
<div class="tool-sep"></div>
|
||
<button class="tool-btn" id="btnSnapshot" title="导出 PNG 截图"><img src="./icons/view-tool-screen.png" alt="截图"><span>截图</span></button>
|
||
<button class="tool-btn" id="btnPrint" title="打印 / 导出 PDF"><img src="./icons/ico-add-modelview.png" alt="打印"><span>打印</span></button>
|
||
<button class="tool-btn" id="btnReset" title="全图（复位视图与旋转）"><img src="./icons/view-tool-reset.png" alt="复位"><span>全图</span></button>
|
||
<button class="tool-btn" id="btnFull" title="全屏"><img src="./icons/all-screen.png" alt="全屏"><span>全屏</span></button>
|
||
</div>
|
||
|
||
<!-- 测量子面板 -->
|
||
<div id="measurePanel" class="float-panel measure-panel hidden">
|
||
<div id="measureModes"></div>
|
||
<div class="measure-actions">
|
||
<button id="btnStats" class="measure-act" title="结果统计"><img src="./icons/view-tool-statisticalResult.png" alt="统计"></button>
|
||
<button id="btnMeasureClear" class="measure-act" title="清空"><img src="./icons/view-tool-clear.png" alt="清空"></button>
|
||
</div>
|
||
<button id="btnMeasureClose" class="measure-act" title="关闭测量"><img src="./icons/close.0fb8dc6e.png" alt="关闭"></button>
|
||
</div>
|
||
|
||
<!-- 批注子面板 -->
|
||
<div id="annoPanel" class="float-panel measure-panel hidden">
|
||
<div id="annoModes"></div>
|
||
<div class="measure-actions">
|
||
<input type="color" id="annoColor" value="#e60012" title="批注颜色">
|
||
<select id="annoWidth" title="批注线宽">
|
||
<option value="1">细</option>
|
||
<option value="2" selected>中</option>
|
||
<option value="4">粗</option>
|
||
</select>
|
||
<button id="btnAnnoUndo" class="measure-act" title="撤销"><img src="./icons/return-icon.1cb36f98.png" alt="撤销"></button>
|
||
<button id="btnAnnoClear" class="measure-act" title="清空批注"><img src="./icons/view-tool-clear.png" alt="清空"></button>
|
||
</div>
|
||
<button id="btnAnnoClose" class="measure-act" title="关闭批注"><img src="./icons/close.0fb8dc6e.png" alt="关闭"></button>
|
||
</div>
|
||
|
||
<!-- 结果统计 -->
|
||
<div id="statsPanel" class="float-panel hidden">
|
||
<div class="panel-title">测量结果 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="stats" alt="关闭"></div>
|
||
<div id="statsList"><div class="stats-empty">暂无测量结果</div></div>
|
||
</div>
|
||
|
||
<!-- 文字查找 -->
|
||
<div id="findPanel" class="float-panel hidden">
|
||
<div class="panel-title">文字查找 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="find" alt="关闭"></div>
|
||
<div class="panel-row">
|
||
<input type="text" id="findInput" placeholder="输入要查找的文字，回车搜索">
|
||
</div>
|
||
<div id="findResult" class="find-result"><div class="stats-empty">输入关键字后回车</div></div>
|
||
</div>
|
||
|
||
<!-- 显示设置 -->
|
||
<div id="settingsPanel" class="float-panel hidden">
|
||
<div class="panel-title">显示设置 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="settings" alt="关闭"></div>
|
||
<div class="panel-row">
|
||
<span>背景</span>
|
||
<div id="bgSwatches" class="bg-swatches"></div>
|
||
</div>
|
||
<div class="panel-row">
|
||
<span>旋转</span>
|
||
<div class="sub-tools">
|
||
<button id="btnRotL2" class="sub-tool" title="逆时针旋转 90°">
|
||
<img src="./icons/leftRotation.4801be73.png" alt="左转"><span>左转</span>
|
||
</button>
|
||
<button id="btnRotR2" class="sub-tool" title="顺时针旋转 90°">
|
||
<img src="./icons/rightRotation.d4d1fd16.png" alt="右转"><span>右转</span>
|
||
</button>
|
||
<button id="btnRot0" class="sub-tool" title="角度归零">
|
||
<img src="./icons/refreshScale.6e4404e3.png" alt="归零"><span>归零</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="panel-row">
|
||
<input type="range" id="optRot" min="-180" max="180" step="1" value="0">
|
||
<span id="optRotVal" class="panel-val">0°</span>
|
||
</div>
|
||
<label class="panel-check"><input type="checkbox" id="optContrast" checked> 自动调整过暗/过亮的线色</label>
|
||
<label class="panel-check"><input type="checkbox" id="optText" checked> 显示文字</label>
|
||
<label class="panel-check"><input type="checkbox" id="optHatch" checked> 显示填充 / 剖面线</label>
|
||
<label class="panel-check"><input type="checkbox" id="optLineWeight"> 显示真实线宽</label>
|
||
<div class="panel-row">
|
||
<span>线宽倍数</span>
|
||
<input type="range" id="optLwScale" min="50" max="400" value="100">
|
||
<span id="optLwVal" class="panel-val">1.0x</span>
|
||
</div>
|
||
<div class="panel-row">
|
||
<span>测量单位</span>
|
||
<select id="optUnit">
|
||
<option value="mm">毫米 mm</option>
|
||
<option value="cm">厘米 cm</option>
|
||
<option value="m">米 m</option>
|
||
<option value="in">英寸 in</option>
|
||
<option value="">无单位</option>
|
||
</select>
|
||
<span id="optUnitSrc" class="panel-val"></span>
|
||
</div>
|
||
<div class="panel-row">
|
||
<span>小数位</span>
|
||
<input type="range" id="optPrec" min="0" max="6" value="3">
|
||
<span id="optPrecVal" class="panel-val">3</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 属性 / 图纸信息 -->
|
||
<div id="infoPanel" class="float-panel hidden">
|
||
<div class="panel-title" id="infoTitle">图纸信息 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="info" alt="关闭"></div>
|
||
<div id="infoBody" class="info-body"></div>
|
||
</div>
|
||
|
||
<!-- 嵌入链接 -->
|
||
<div id="embedPanel" class="float-panel hidden">
|
||
<div class="panel-title">生成嵌入链接 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="embed" alt="关闭"></div>
|
||
<div class="panel-row">
|
||
<span>图纸路径</span>
|
||
<input type="text" id="embedPath" placeholder="samples/xxx.dwg 或 https://...">
|
||
</div>
|
||
<div class="panel-row">
|
||
<span>嵌入地址</span>
|
||
<input type="text" id="embedUrl" readonly>
|
||
</div>
|
||
<div class="panel-row">
|
||
<span>iframe 代码</span>
|
||
<textarea id="embedCode" rows="3" readonly></textarea>
|
||
</div>
|
||
<div class="panel-row embed-actions">
|
||
<button id="btnUpload" class="small-btn">上传当前图纸</button>
|
||
<button id="btnCopyUrl" class="small-btn">复制链接</button>
|
||
<button id="btnCopyCode" class="small-btn">复制代码</button>
|
||
</div>
|
||
<div class="embed-hint">
|
||
「上传当前图纸」会把图纸<b>加密</b>存到服务器并生成<b>随机文件名</b>，
|
||
链接里看不出原始图纸名；读取要走短时令牌，源文件禁止直链下载。
|
||
本地拖进来的图纸没有服务器路径，要先点「上传当前图纸」再复制链接。<br>
|
||
参数：<code>?file=路径&embed=1&bg=grey|beige|black</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 图元属性气泡 -->
|
||
<div id="propPanel" class="float-panel hidden">
|
||
<div class="panel-title">图元属性 <img src="./icons/close.0fb8dc6e.png" class="panel-close" data-panel="prop" alt="关闭"></div>
|
||
<div id="propBody" class="info-body"></div>
|
||
</div>
|
||
|
||
<!-- 状态栏 -->
|
||
<div id="statusbar">
|
||
<span id="statusText">就绪 | 滚轮缩放 · 左键拖动平移 · 双击全图</span>
|
||
<span id="coordText" class="status-mid"></span>
|
||
<span id="modelInfo" class="status-right"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<input type="file" id="fileInput" accept=".dwg,.dxf,.DWG,.DXF" style="display:none">
|
||
|
||
<!-- 加载遮罩（新迪同款弹跳圆点） -->
|
||
<div id="loading" class="hidden">
|
||
<div class="waiter"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
|
||
<div id="loadingText">正在解析图纸...</div>
|
||
</div>
|
||
|
||
<div id="dropOverlay" class="hidden"><div class="drop-box">松开鼠标加载 DWG / DXF 图纸</div></div>
|
||
|
||
<script type="module" src="./app.js?v=2"></script>
|
||
</body>
|
||
</html>
|