Files
ofdgo/assets/webui/index.html
T

604 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#fbfcfd">
<title>OFDGo WebUI - OFD编辑器</title>
<link rel="manifest" href="./ofdgo.json">
<link rel="icon" type="image/svg+xml" href="./ofdgo.svg">
<link rel="stylesheet" href="./ofdgo.css">
</head>
<body>
<div class="app">
<header class="toolbar app-bar">
<input id="ofdInput" class="file-input" type="file" accept=".ofd">
<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
<input id="fontDirectoryInput" class="file-input" type="file" webkitdirectory multiple>
<div class="tool-group">
<button id="ofdButton" class="icon-button" type="button" title="打开" aria-label="打开" aria-keyshortcuts="Control+O Meta+O"><span class="open-icon" aria-hidden="true"></span></button>
<button id="newButton" class="icon-button" type="button" title="新建" aria-label="新建"><span class="new-icon" aria-hidden="true"></span></button>
<button id="editButton" class="icon-button" type="button" title="编辑" aria-label="编辑" aria-pressed="false" disabled><span class="edit-icon" aria-hidden="true"></span></button>
<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" aria-label="页面栏" aria-pressed="true">&#9776;</button>
<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">&#9432;</button>
</div>
<div class="toolbar-space"></div>
<div class="tool-group">
<button id="prevButton" class="icon-button arrow-prev" type="button" title="上一页" aria-label="上一页" aria-keyshortcuts="ArrowLeft" disabled></button>
<label class="page-control">
<input id="pageInput" type="number" min="1" value="0" disabled>
<span>/</span>
<span id="pageTotal">0</span>
</label>
<button id="nextButton" class="icon-button arrow-next" type="button" title="下一页" aria-label="下一页" aria-keyshortcuts="ArrowRight" disabled></button>
</div>
<div class="tool-group">
<button id="zoomOutButton" class="icon-button" type="button" title="缩小" aria-label="缩小" aria-keyshortcuts="-" disabled>-</button>
<span id="zoomLabel" class="zoom-label">100%</span>
<button id="zoomInButton" class="icon-button" type="button" title="放大" aria-label="放大" aria-keyshortcuts="= Shift+= Plus" disabled>+</button>
<button id="fitButton" class="button" type="button" data-short="宽" aria-label="适宽" disabled>适宽</button>
<button id="fitHeightButton" class="button" type="button" data-short="高" aria-label="适高" disabled>适高</button>
<button id="rotateButton" class="button" type="button" data-short="转" title="右转90°" aria-label="旋转" disabled>旋转</button>
<button id="panButton" class="button" type="button" data-short="拖" title="拖动页面" aria-label="拖动" aria-pressed="false" disabled>拖动</button>
<button id="continuousButton" class="button" type="button" data-short="连" title="连续显示" aria-label="连续显示" aria-pressed="false" disabled>连续</button>
<button id="annotationButton" class="button" type="button" data-short="注" title="隐藏注解" aria-label="隐藏注解" aria-pressed="true">注解</button>
</div>
<div class="tool-group" role="group" aria-label="导出">
<select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select>
<select id="imageDPI" class="format-select dpi-select" title="导出DPI(仅PNG/JPG)" aria-label="导出DPI" disabled>
<option value="96">96 dpi</option>
<option value="150">150 dpi</option>
<option value="300" selected>300 dpi</option>
<option value="600">600 dpi</option>
</select>
<button id="exportPageButton" class="button" type="button" data-short="单" title="导出单页" aria-label="导出单页" disabled>单页</button>
<button id="exportButton" class="button" type="button" data-short="多" title="导出文档" aria-label="导出文档" aria-haspopup="dialog" aria-controls="exportPanel" disabled>文档</button>
</div>
</header>
<div id="editorTools" class="editor-toolbar" role="toolbar" aria-label="编辑工具" hidden>
<div class="editor-group editor-file">
<button id="saveButton" class="button" type="button" title="另存为OFD" aria-label="另存为OFD" aria-keyshortcuts="Control+S Meta+S">保存</button>
<button id="undoButton" class="button" type="button" disabled>撤销</button>
<button id="redoButton" class="button" type="button" disabled>重做</button>
<span>文件</span>
</div>
<div class="editor-group editor-objects">
<button id="compositeBackButton" class="button" type="button" title="返回上层" hidden>返回</button>
<button id="selectObjectButton" class="button" type="button" aria-pressed="true">选择</button>
<button id="multiSelectButton" class="button" type="button" aria-pressed="false" title="多选对象">多选</button>
<button id="editObjectButton" class="button" type="button" aria-label="修改对象" disabled>修改</button>
<button id="copyObjectButton" class="button" type="button" aria-label="复制对象" disabled>复制</button>
<button id="deleteObjectButton" class="button" type="button" disabled>删除</button>
<select id="objectOrder" class="order-select" aria-label="对象层级" disabled>
<option value="" hidden>层级</option>
<option value="up">上移</option>
<option value="down">下移</option>
<option value="top">置顶</option>
<option value="bottom">置底</option>
</select>
<select id="objectAlign" class="order-select" aria-label="对象对齐" disabled>
<option value="" hidden>对齐</option>
<option value="left">左侧</option>
<option value="center">水平</option>
<option value="right">右侧</option>
<option value="top">顶部</option>
<option value="middle">垂直</option>
<option value="bottom">底部</option>
</select>
<select id="objectDistribute" class="order-select" aria-label="对象分布" disabled>
<option value="" hidden>分布</option>
<option value="horizontal">水平</option>
<option value="vertical">垂直</option>
</select>
<button id="objectStyleButton" class="editor-group-action" type="button" title="对象样式" aria-label="对象样式" aria-haspopup="dialog" aria-controls="objectStylePanel" disabled>对象</button>
</div>
<div class="editor-group">
<button id="insertTextButton" class="button" type="button" title="文字" aria-label="文字" aria-pressed="false">文字</button>
<button id="insertImageButton" class="button" type="button" title="图片" aria-label="图片">图片</button>
<button id="drawLineButton" class="button" type="button" title="直线" aria-label="直线" aria-pressed="false">直线</button>
<button id="drawRectangleButton" class="button" type="button" title="矩形" aria-label="矩形" aria-pressed="false">矩形</button>
<button id="drawEllipseButton" class="button" type="button" title="椭圆" aria-label="椭圆" aria-pressed="false">椭圆</button>
<select id="arrowTool" aria-label="箭头" title="箭头"><option value="" hidden>箭头</option><option value="line">直线</option><option value="arrow">单向</option><option value="double-arrow">双向</option></select>
<select id="penTool" aria-label="画笔" title="画笔"><option value="" hidden>画笔</option><option value="pen-round">圆笔</option><option value="pen-pressure">钢笔</option></select>
<select id="annotationTool" aria-label="注解" title="注解"><option value="" hidden>注解</option><option value="note">批注</option><option value="watermark">水印</option><option value="stamp">印章</option><option value="link">链接</option><option value="details">说明</option><option value="replace">替换</option><option value="objects">选取</option></select>
<span>插入</span>
</div>
<div class="editor-group">
<div class="text-font"><div class="font-picker"><input id="textFont" type="text" role="combobox" aria-label="字体" title="字体" aria-autocomplete="list" aria-controls="textFontList" aria-expanded="false" autocomplete="off" spellcheck="false" disabled><button id="textFontToggle" type="button" title="选择字体" aria-label="选择字体" tabindex="-1" disabled></button></div><button id="textFontAdd" class="icon-button" type="button" title="添加字体" aria-label="添加字体">+</button></div>
<div id="textFontList" class="font-listbox" role="listbox" aria-label="字体列表" popover="manual"></div>
<label class="editor-field"><span>字号</span><span class="editor-number"><input id="textSize" type="number" min="1" step="any" required aria-label="字号" disabled><span>pt</span></span></label>
<input id="textColor" class="color-input" type="color" value="#000000" aria-label="文字颜色" title="文字颜色" disabled>
<span>文字</span>
</div>
<div class="editor-group editor-paragraph">
<select id="textAlign" aria-label="段落对齐" title="段落对齐" disabled>
<option value="" hidden>原文</option>
<option value="left">左齐</option>
<option value="center">居中</option>
<option value="right">右齐</option>
<option value="justify">两端</option>
</select>
<label class="editor-field"><span>行距</span><span class="editor-number"><input id="textLineHeight" type="number" min="0" step="any" placeholder="自动" aria-label="行距" title="行距,0为自动" disabled><span>pt</span></span></label>
<button id="textWrap" class="button" type="button" aria-label="自动折行" aria-pressed="false" disabled>折行</button>
<label class="editor-field"><span>字距</span><span class="editor-number"><input id="textSpacing" type="number" step="any" placeholder="0" aria-label="字距" title="字距" disabled><span>pt</span></span></label>
<button id="paragraphButton" class="editor-group-action" type="button" title="段落缩进" aria-label="段落缩进" aria-haspopup="dialog" aria-controls="paragraphPanel" disabled>段落</button>
</div>
<div class="editor-group">
<div class="shape-paint"><label><input id="shapeFill" type="checkbox">填充</label><input id="shapeFillColor" class="color-input" type="color" value="#dcefeb" aria-label="填充颜色" title="填充颜色"></div>
<div class="shape-paint"><label><input id="shapeStroke" type="checkbox" checked>描边</label><input id="shapeStrokeColor" class="color-input" type="color" value="#000000" aria-label="描边颜色" title="描边颜色"></div>
<label class="editor-field"><span>线宽</span><span class="editor-number"><input id="shapeWidth" type="number" value="1" min="0" step="any" required aria-label="线宽" title="线宽"><span>pt</span></span></label>
<span>图形</span>
</div>
<div class="editor-group editor-image">
<select id="imageFit" aria-label="图片适应方式" disabled>
<option value="" hidden>缩放</option>
<option value="contain">适应</option>
<option value="cover">填充</option>
</select>
<button id="cropImageButton" class="button" type="button" aria-label="裁剪图片" aria-pressed="false" disabled>裁剪</button>
<button id="resetCropButton" class="button" type="button" aria-label="还原图片" disabled>还原</button>
<span>图片</span>
</div>
<div class="editor-group editor-transform">
<select id="objectRotate" class="order-select" aria-label="对象旋转" disabled>
<option value="" hidden>旋转</option>
<option value="90">右转90°</option>
<option value="-90">左转90°</option>
</select>
<select id="objectFlip" class="order-select" aria-label="对象翻转" disabled>
<option value="" hidden>翻转</option>
<option value="horizontal">水平</option>
<option value="vertical">垂直</option>
</select>
<button id="objectBoundsButton" class="editor-group-action" type="button" title="位置尺寸" aria-label="位置尺寸" aria-haspopup="dialog" aria-controls="objectBoundsPanel" disabled>变换</button>
</div>
<div class="editor-group editor-erase">
<button id="eraseButton" class="button" type="button" title="擦除" aria-label="擦除" aria-pressed="false">擦除</button>
<select id="eraseMode" aria-label="擦除方式" title="擦除方式,矩形和套索为视觉裁剪"><option value="erase-object">对象</option><option value="erase-region">矩形</option><option value="erase-path">套索</option></select>
<span>擦除</span>
</div>
<div class="editor-group">
<select id="addPageButton" aria-label="新增页面" title="新增页面"><option value="" hidden>新增</option><option value="blank">空白</option><option value="import">插页</option></select>
<button id="copyPageButton" class="button" type="button" aria-label="复制页面">复制</button>
<button id="deletePageButton" class="button" type="button" aria-label="删除页面">删除</button>
<button id="movePagePrevButton" class="button" type="button" aria-label="页面前移">前移</button>
<button id="movePageNextButton" class="button" type="button" aria-label="页面后移">后移</button>
<button id="pageSettingsButton" class="button" type="button" aria-label="页面设置" aria-haspopup="dialog" aria-controls="pagePanel">设置</button>
<button id="batchPagesButton" class="editor-group-action" type="button" title="批量页面" aria-label="批量页面" aria-haspopup="dialog" aria-controls="batchPagesPanel">页面</button>
</div>
</div>
<dialog id="batchPagesPanel" class="form-dialog" aria-label="批量页面">
<form id="batchPagesForm">
<div class="form-row"><label for="batchPageAction">操作</label><select id="batchPageAction"><option value="copy">复制</option><option value="move">移动</option><option value="delete">删除</option><option value="save">另存</option></select></div>
<div class="form-row"><label for="batchPageRange">页码</label><input id="batchPageRange" type="text" required autocomplete="off" spellcheck="false" autofocus></div>
<div id="batchPagePositionRow" class="form-row" hidden><label for="batchPagePosition">位置</label><select id="batchPagePosition"><option value="before">页前</option><option value="after">页后</option><option value="first">开头</option><option value="last">末尾</option></select></div>
<div class="form-actions"><div id="batchPagesStatus" class="form-status" role="status"></div><button id="batchPagesCancel" class="button" type="button">取消</button><button id="batchPagesSubmit" class="button" type="submit">复制</button></div>
</form>
</dialog>
<dialog id="objectStylePanel" class="form-dialog" aria-label="对象样式">
<form id="objectStyleForm">
<div class="form-row"><span>组合</span><div class="form-format"><button id="groupObjectsButton" class="button" type="button">组合</button><button id="ungroupObjectButton" class="button" type="button">解组</button></div></div>
<div class="form-row"><span>格式</span><div class="form-format"><button id="copyStyleButton" class="button" type="button" aria-label="复制格式">复制</button><button id="pasteStyleButton" class="button" type="button" aria-label="粘贴格式">粘贴</button></div></div>
<div class="form-row"><label for="objectOpacity">透明</label><div class="form-unit"><input id="objectOpacity" type="number" min="0" max="100" step="any" aria-label="透明度" autofocus><span>%</span></div></div>
<div id="objectStrokeFields">
<div class="form-row"><label for="objectDash">线型</label><select id="objectDash"><option value="mixed" hidden>混合</option><option value="solid">实线</option><option value="dash">虚线</option><option value="dot">点线</option><option value="dashdot">点划</option><option value="custom">自定</option></select></div>
<div id="objectDashRow" class="form-row" hidden><label for="objectDashPattern">间隔</label><div class="form-unit"><input id="objectDashPattern" type="text" autocomplete="off" spellcheck="false"><span>mm</span></div></div>
<div class="form-row"><label for="objectDashOffset">偏移</label><div class="form-unit"><input id="objectDashOffset" type="number" step="any"><span>mm</span></div></div>
<div class="form-pair">
<div class="form-row"><label for="objectCap">端点</label><select id="objectCap"><option value="mixed" hidden>混合</option><option value="Butt">平头</option><option value="Round">圆头</option><option value="Square">方头</option></select></div>
<div class="form-row"><label for="objectJoin">转角</label><select id="objectJoin"><option value="mixed" hidden>混合</option><option value="Miter">尖角</option><option value="Round">圆角</option><option value="Bevel">斜角</option></select></div>
</div>
</div>
<div class="form-actions"><div id="objectStyleStatus" class="form-status" role="status"></div><button id="objectStyleCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
</form>
</dialog>
<dialog id="outlinePanel" class="form-dialog" aria-label="编辑目录">
<form id="outlineForm">
<div class="form-row"><label for="outlineTitle">标题</label><input id="outlineTitle" type="text" required autofocus></div>
<div class="form-row"><label for="outlineParent">上级</label><select id="outlineParent"></select></div>
<div class="form-row"><label for="outlinePage">页码</label><input id="outlinePage" type="number" min="1" step="1" placeholder="无" aria-label="目标页码,留空表示无目标"></div>
<div id="outlinePositionRow" class="form-row" hidden><label for="outlinePosition">顺序</label><input id="outlinePosition" type="number" min="1" step="1" required value="1"></div>
<div class="form-actions"><div id="outlineStatus" class="form-status" role="status"></div><button id="outlineCancel" class="button" type="button">取消</button><button id="outlineSubmit" class="button" type="submit">新增</button></div>
</form>
</dialog>
<dialog id="objectBoundsPanel" class="form-dialog" aria-label="位置尺寸">
<form id="objectBoundsForm">
<div class="form-pair">
<div class="form-row"><label for="objectX">横向</label><div class="form-unit"><input id="objectX" type="number" step="any" required autofocus><span>mm</span></div></div>
<div class="form-row"><label for="objectY">纵向</label><div class="form-unit"><input id="objectY" type="number" step="any" required><span>mm</span></div></div>
</div>
<div class="form-pair">
<div class="form-row"><label for="objectWidth">宽度</label><div class="form-unit"><input id="objectWidth" type="number" min="0" step="any" required><span>mm</span></div></div>
<div class="form-row"><label for="objectHeight">高度</label><div class="form-unit"><input id="objectHeight" type="number" min="0" step="any" required><span>mm</span></div></div>
</div>
<div class="form-row"><span>比例</span><label class="form-check"><input id="objectAspect" type="checkbox" checked>锁定</label></div>
<div class="form-actions"><div id="objectBoundsStatus" class="form-status" role="status"></div><button id="objectBoundsCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
</form>
</dialog>
<dialog id="createPanel" class="form-dialog" aria-label="新建文档">
<form id="createForm">
<div class="form-row">
<label for="createName">名称</label>
<input id="createName" type="text" value="未命名" required autofocus>
</div>
<div class="form-pair">
<div class="form-row">
<label for="createWidth">宽度</label>
<div class="form-unit"><input id="createWidth" type="number" value="210" min="1" step="any" required><span>mm</span></div>
</div>
<div class="form-row">
<label for="createHeight">高度</label>
<div class="form-unit"><input id="createHeight" type="number" value="297" min="1" step="any" required><span>mm</span></div>
</div>
</div>
<div class="form-actions">
<div id="createStatus" class="form-status" role="status"></div>
<button id="createCancel" class="button" type="button">取消</button>
<button class="button" type="submit">新建</button>
</div>
</form>
</dialog>
<dialog id="importPanel" class="form-dialog" aria-label="插入页面">
<form id="importForm">
<div class="form-row"><label for="importFile">文档</label><input id="importFile" type="file" accept=".ofd" required autofocus></div>
<div class="form-row"><label for="importRange">范围</label><select id="importRange"><option value="all">全部</option><option value="custom">指定</option></select></div>
<div id="importPagesRow" class="form-row" hidden><label for="importPages">页码</label><input id="importPages" type="text" autocomplete="off" spellcheck="false" disabled></div>
<div class="form-row"><label for="importPosition">位置</label><select id="importPosition"><option value="before">页前</option><option value="after" selected>页后</option><option value="first">开头</option><option value="last">末尾</option></select></div>
<div class="form-row"><label for="importOutlines">目录</label><input id="importOutlines" type="checkbox" title="导入对应目录"></div>
<div class="form-actions"><div id="importStatus" class="form-status" role="status"></div><button id="importCancel" class="button" type="button">取消</button><button id="importSubmit" class="button" type="submit" disabled>插入</button></div>
</form>
</dialog>
<dialog id="paragraphPanel" class="form-dialog" aria-label="段落缩进">
<form id="paragraphForm">
<div class="form-row"><label for="firstLineIndent">首行</label><div class="form-unit"><input id="firstLineIndent" type="number" step="any" required autofocus><span>mm</span></div></div>
<div class="form-pair">
<div class="form-row"><label for="leftIndent">左侧</label><div class="form-unit"><input id="leftIndent" type="number" step="any" required><span>mm</span></div></div>
<div class="form-row"><label for="rightIndent">右侧</label><div class="form-unit"><input id="rightIndent" type="number" step="any" required><span>mm</span></div></div>
</div>
<div class="form-actions"><div id="paragraphStatus" class="form-status" role="status"></div><button id="paragraphCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
</form>
</dialog>
<dialog id="infoPanel" class="form-dialog" aria-label="文档信息">
<form id="infoForm">
<label class="form-row"><span>标题</span><input id="infoTitle" type="text" autofocus></label>
<label class="form-row"><span>主题</span><input id="infoSubject" type="text"></label>
<label class="form-row"><span>作者</span><input id="infoAuthor" type="text"></label>
<div class="form-actions"><div id="infoStatus" class="form-status" role="status"></div><button id="infoCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
</form>
</dialog>
<dialog id="annotationCreate" class="form-dialog" aria-label="添加注解">
<form id="annotationCreateForm">
<label class="form-row" data-annotation="watermark"><span>类型</span><select id="annotationContent"><option value="text">文字</option><option value="image">图片</option></select></label>
<label class="form-row" data-annotation="replace"><span>原文</span><select id="annotationOld"></select></label>
<label class="form-row" data-annotation="replace"><span>字体</span><select id="annotationFont"><option value="keep">原有</option><option value="current">当前</option></select></label>
<label class="form-row" id="annotationTextRow"><span>内容</span><textarea id="annotationText" rows="2" required></textarea></label>
<label class="form-row" id="annotationImageRow" hidden><span>图片</span><input id="annotationImage" type="file" accept="image/png,image/jpeg,image/bmp,image/tiff,image/gif,image/webp"></label>
<label class="form-row" data-annotation="note watermark stamp link"><span>作者</span><input id="annotationAuthor" type="text"></label>
<label class="form-row" data-annotation="link"><span>目标</span><select id="annotationLinkKind"><option value="uri">网址</option><option value="page">页面</option><option value="keep" hidden>原有</option></select></label>
<label class="form-row" data-annotation="link" id="annotationAddressRow"><span>网址</span><input id="annotationAddress" type="text"></label>
<label class="form-row" data-annotation="link" id="annotationTargetRow"><span>页码</span><input id="annotationTarget" type="number" min="1" value="1"></label>
<div class="form-pair" data-annotation="note watermark stamp link">
<label class="form-row"><span>横向</span><span class="form-unit"><input id="annotationX" type="number" step="any" value="10" required><span>mm</span></span></label>
<label class="form-row"><span>纵向</span><span class="form-unit"><input id="annotationY" type="number" step="any" value="10" required><span>mm</span></span></label>
</div>
<div class="form-pair" data-annotation="watermark stamp link">
<label class="form-row"><span>宽度</span><span class="form-unit"><input id="annotationWidth" type="number" min="1" step="any" value="60" required><span>mm</span></span></label>
<label class="form-row"><span>高度</span><span class="form-unit"><input id="annotationHeight" type="number" min="1" step="any" value="12" required><span>mm</span></span></label>
</div>
<div class="form-pair" data-annotation="watermark stamp">
<label class="form-row"><span>角度</span><span class="form-unit"><input id="annotationAngle" type="number" min="-180" max="180" step="any" value="-30" required><span>°</span></span></label>
<label class="form-row"><span>透明</span><span class="form-unit"><input id="annotationOpacity" type="number" min="0" max="100" step="any" value="80" aria-label="透明度" required><span>%</span></span></label>
</div>
<label class="form-row" data-annotation="watermark"><span>排列</span><select id="annotationTile"><option value="single">单个</option><option value="tile">平铺</option></select></label>
<div class="form-row" data-annotation="watermark"><label id="annotationPlacementLabel" for="annotationPlacement">位置</label><div class="annotation-placement"><select id="annotationPlacement"><option value="page">居中</option><option value="custom">指定</option></select><button id="annotationPick" class="button" type="button">定位</button></div></div>
<label class="form-row" data-annotation="watermark"><span>应用</span><select id="annotationScope"><option value="current">本页</option><option value="all">全部</option><option value="custom">指定</option></select></label>
<label class="form-row" data-annotation="note watermark stamp link"><span>页码</span><input id="annotationPages" type="text" required></label>
<div class="form-actions"><div id="annotationCreateStatus" class="form-status" role="status"></div><button id="annotationCreateCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
</form>
</dialog>
<dialog id="objectPicker" class="form-dialog" aria-label="选取对象">
<form method="dialog"><div id="objectPickerList" class="object-picker-list"></div><div class="form-actions"><button class="button" type="submit">关闭</button></div></form>
</dialog>
<dialog id="annotationNote" class="form-dialog" aria-label="注解">
<form id="annotationForm" method="dialog">
<div id="annotationDetail" class="annotation-detail"></div>
<div id="annotationFields" hidden>
<div class="form-row"><label for="annotationRemark">说明</label><textarea id="annotationRemark" rows="4"></textarea></div>
<div class="form-row"><label for="annotationCreator">作者</label><input id="annotationCreator" type="text"></div>
</div>
<div class="form-actions"><div id="annotationStatus" class="form-status" role="status"></div><button id="annotationClose" class="button" type="button" autofocus>关闭</button><button id="annotationSubmit" class="button" type="submit" hidden>确定</button></div>
</form>
</dialog>
<dialog id="pagePanel" class="form-dialog" aria-label="页面设置">
<form id="pageForm">
<div id="pageRangeRow" class="form-row" hidden><span>范围</span><output id="pageRange"></output></div>
<div class="form-row">
<span id="pageDirectionLabel">方向</span>
<div class="form-options" role="radiogroup" aria-labelledby="pageDirectionLabel">
<label><input id="pagePortrait" type="radio" name="direction" value="portrait" autofocus><span>竖向</span></label>
<label><input id="pageLandscape" type="radio" name="direction" value="landscape"><span>横向</span></label>
</div>
</div>
<div class="form-pair">
<div class="form-row">
<label for="pageWidth">宽度</label>
<div class="form-unit"><input id="pageWidth" type="number" min="1" step="any" required><span>mm</span></div>
</div>
<div class="form-row">
<label for="pageHeight">高度</label>
<div class="form-unit"><input id="pageHeight" type="number" min="1" step="any" required><span>mm</span></div>
</div>
</div>
<div class="form-actions">
<div id="pageStatus" class="form-status" role="status"></div>
<button id="pageCancel" class="button" type="button">取消</button>
<button class="button" type="submit">确定</button>
</div>
</form>
</dialog>
<dialog id="insertPanel" class="form-dialog" aria-label="添加图片">
<form id="insertForm">
<div class="form-row">
<label for="insertImage">图片</label>
<input id="insertImage" type="file" accept=".png,.jpg,.jpeg,image/png,image/jpeg" required autofocus>
</div>
<div id="insertFitRow" class="form-row" hidden>
<label for="insertFit">缩放</label>
<select id="insertFit"><option value="contain">适应</option><option value="cover">填充</option></select>
</div>
<div class="form-actions">
<div id="insertStatus" class="form-status" role="status"></div>
<button id="insertCancel" class="button" type="button">取消</button>
<button id="insertSubmit" class="button" type="submit">添加</button>
</div>
</form>
</dialog>
<dialog id="signPanel" class="form-dialog security-dialog" aria-label="签章">
<form id="signForm" autocomplete="off">
<div class="form-row"><label for="signCertificate">证书</label><input id="signCertificate" type="file" accept=".pem,.cer,.crt,.der" required></div>
<div class="form-row"><label for="signKey">私钥</label><input id="signKey" type="file" accept=".pem,.key,.der" required></div>
<div class="form-row"><label for="signKeyPassword">私钥口令</label><input id="signKeyPassword" type="password" autocomplete="off"></div>
<div class="form-row"><label for="signRoots">信任根</label><input id="signRoots" type="file" accept=".pem,.cer,.crt,.der" multiple required></div>
<div class="form-row"><label for="signIntermediates">中间证书</label><input id="signIntermediates" type="file" accept=".pem,.cer,.crt,.der" multiple></div>
<div class="form-row"><label for="signSeal">电子印章</label><input id="signSeal" type="file" accept=".esl,.ses,.der" aria-label="SES电子印章"></div>
<div id="signPlacementFields" hidden>
<div class="form-row"><label for="signPlacement">位置</label><select id="signPlacement"><option value="normal">页面</option><option value="seam">骑缝</option></select></div>
<div class="form-row"><label for="signPages">页码</label><input id="signPages" type="text" autocomplete="off" spellcheck="false"></div>
<div class="form-row"><label for="signX">横坐标</label><div class="form-unit"><input id="signX" type="number" min="0" step="any" value="10" aria-label="横坐标(毫米)"><span>mm</span></div></div>
<div class="form-row"><label for="signY">纵坐标</label><div class="form-unit"><input id="signY" type="number" min="0" step="any" value="10" aria-label="纵坐标(毫米)"><span>mm</span></div></div>
<div class="form-row"><label for="signWidth">宽度</label><div class="form-unit"><input id="signWidth" type="number" min="0.01" step="any" value="40" aria-label="宽度(毫米)"><span>mm</span></div></div>
<div class="form-row"><label for="signHeight">高度</label><div class="form-unit"><input id="signHeight" type="number" min="0.01" step="any" value="40" aria-label="高度(毫米)"><span>mm</span></div></div>
</div>
<div class="form-row"><label for="signMode">方式</label><select id="signMode"><option value="append">追加</option><option value="replace">替换</option></select></div>
<div class="form-row"><label for="signLock">禁止追加</label><input id="signLock" type="checkbox" aria-label="禁止追加签名"></div>
<div class="form-actions"><div id="signStatus" class="form-status" role="status" aria-live="polite"></div><button id="signCancel" class="button" type="button">取消</button><button class="button" type="submit" title="签署另存">签署</button></div>
</form>
</dialog>
<dialog id="verifyPanel" class="form-dialog security-dialog" aria-label="验签">
<form id="verifyForm">
<div class="form-row"><label for="verifyRoots">信任根</label><input id="verifyRoots" type="file" accept=".pem,.cer,.crt,.der" multiple></div>
<div class="form-row"><label for="verifyCerts">证书</label><input id="verifyCerts" type="file" accept=".pem,.cer,.crt,.der" multiple></div>
<div class="form-row"><label for="verifyTimeRoots">时间戳根</label><input id="verifyTimeRoots" type="file" accept=".pem,.cer,.crt,.der" multiple></div>
<div class="form-row"><label for="verifyTokens">时间戳</label><input id="verifyTokens" type="file" accept=".tsr,.tst,.der" multiple></div>
<div class="form-row"><label for="verifyCRLs">撤销表</label><input id="verifyCRLs" type="file" accept=".crl,.der" multiple></div>
<div class="form-row"><label for="verifyOCSP">OCSP响应</label><input id="verifyOCSP" type="file" accept=".ocsp,.der" multiple></div>
<div class="form-row"><span>要求</span><div class="form-options"><label><input id="verifyRequireTime" type="checkbox"><span>时间戳</span></label><label><input id="verifyRequireRevocation" type="checkbox"><span>撤销检查</span></label></div></div>
<div class="form-actions"><div id="verifyStatus" class="form-status" role="status" aria-live="polite"></div><button id="verifyCancel" class="button" type="button">取消</button><button class="button" type="submit">验签</button></div>
</form>
</dialog>
<dialog id="credentialsPanel" class="form-dialog security-dialog" aria-label="解锁文档">
<form id="credentialsForm" autocomplete="off">
<div class="form-row"><label for="credentialsType">方式</label><select id="credentialsType"><option value="password">口令</option><option value="certificate">证书</option></select></div>
<div class="form-row"><label for="credentialsUser">用户</label><input id="credentialsUser" type="text" autocomplete="off" spellcheck="false"></div>
<div id="credentialsPasswordRow" class="form-row"><label for="credentialsPassword">口令</label><input id="credentialsPassword" type="password" autocomplete="off" required autofocus></div>
<div id="credentialsCertificateRow" class="form-row" hidden><label for="credentialsCertificate">证书</label><input id="credentialsCertificate" type="file" accept=".pem,.cer,.crt,.der"></div>
<div id="credentialsKeyRow" class="form-row" hidden><label for="credentialsKey">私钥</label><input id="credentialsKey" type="file" accept=".pem,.key,.der"></div>
<div id="credentialsKeyPasswordRow" class="form-row" hidden><label for="credentialsKeyPassword">私钥口令</label><input id="credentialsKeyPassword" type="password" autocomplete="off"></div>
<div class="form-actions"><div id="credentialsStatus" class="form-status" role="status" aria-live="polite"></div><button id="credentialsCancel" class="button" type="button">取消</button><button class="button" type="submit">解锁</button></div>
</form>
</dialog>
<dialog id="exportPanel" class="form-dialog" aria-label="导出文档">
<form id="exportForm">
<div id="encryptionFields" hidden>
<div class="form-row"><label for="encryptionType">方式</label><select id="encryptionType"><option value="password">口令</option><option value="certificate">证书</option></select></div>
<div id="encryptionUserRow" class="form-row"><label for="encryptionUser">用户</label><input id="encryptionUser" type="text" autocomplete="off" spellcheck="false"></div>
<div id="encryptionPasswordRow" class="form-row"><label for="encryptionPassword">口令</label><input id="encryptionPassword" type="password" autocomplete="new-password"></div>
<div id="encryptionConfirmRow" class="form-row"><label for="encryptionConfirm">确认</label><input id="encryptionConfirm" type="password" autocomplete="new-password"></div>
<div id="encryptionCertificatesRow" class="form-row" hidden><label for="encryptionCertificates">证书</label><input id="encryptionCertificates" type="file" accept=".pem,.cer,.crt,.der" multiple></div>
</div>
<div class="form-row">
<span id="exportScopeLabel">范围</span>
<div class="form-options" role="radiogroup" aria-labelledby="exportScopeLabel">
<label><input id="exportAll" type="radio" name="scope" value="all" checked autofocus><span>全部</span></label>
<label><input id="exportSpecified" type="radio" name="scope" value="specified"><span>指定</span></label>
</div>
</div>
<div id="exportRangeRow" class="form-row" hidden>
<label for="exportRange">页码</label>
<input id="exportRange" type="text" aria-describedby="exportRangeStatus" autocomplete="off" spellcheck="false">
</div>
<div class="form-actions">
<div id="exportRangeStatus" class="form-status" role="status" aria-live="polite"></div>
<button id="exportCancel" class="button" type="button">取消</button>
<button id="exportSubmit" class="button" type="submit">导出</button>
</div>
</form>
</dialog>
<main class="workspace">
<aside class="page-list-panel">
<div id="pageListTitle" class="panel-title">页面</div>
<div id="navigationTabs" class="navigation-tabs" role="tablist" aria-label="文档导航" hidden>
<button id="pagesTab" type="button" role="tab" aria-selected="true" aria-controls="pageList">页面</button>
<button id="outlinesTab" type="button" role="tab" aria-selected="false" aria-controls="outlineList" tabindex="-1">目录</button>
<button id="searchTab" type="button" role="tab" aria-keyshortcuts="Control+F Meta+F" aria-selected="false" aria-controls="searchPanel" tabindex="-1">搜索</button>
</div>
<div id="pageSelectionTools" class="page-selection-tools" hidden>
<span id="pageSelectionCount" role="status"></span>
<button id="selectAllPages" class="small-button" type="button" title="全选页面" aria-label="全选页面">全选</button>
<button id="finishPageSelection" class="small-button" type="button">完成</button>
</div>
<div id="navigationContent" class="navigation-content">
<div id="pageList" class="page-list" role="tabpanel" aria-label="页面"></div>
<div id="outlineList" role="tabpanel" aria-label="目录" hidden></div>
<div id="searchPanel" role="tabpanel" aria-label="搜索" hidden>
<form id="searchForm" class="search-form" role="search">
<input id="searchInput" type="search" aria-label="搜索文字" placeholder="搜索文字" autocomplete="off">
<button type="submit" class="button">搜索</button>
</form>
<div class="search-tools">
<span id="searchStatus" role="status" aria-live="polite"></span>
<span id="searchCount">0 / 0</span>
<button id="searchPrev" type="button" class="icon-button arrow-prev" title="上一处" aria-label="上一处" aria-keyshortcuts="Shift+F3" disabled></button>
<button id="searchNext" type="button" class="icon-button arrow-next" title="下一处" aria-label="下一处" aria-keyshortcuts="F3" disabled></button>
</div>
<div id="searchResults" class="search-results"></div>
</div>
</div>
</aside>
<section class="viewer-panel" tabindex="0" aria-label="阅读区">
<div id="emptyState" class="empty-state">选择 OFD 文件</div>
<div id="progressPanel" class="progress-panel" role="status" aria-live="polite" hidden>
<div class="progress-spinner"></div>
<div id="progressLabel" class="progress-label">加载中</div>
<button id="cancelExportButton" class="small-button" type="button" title="取消导出" aria-label="取消导出" hidden>取消</button>
<div class="progress-track">
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
</div>
<div id="pageFrame" class="page-frame" hidden>
<div id="svgHost" class="svg-host"></div>
</div>
</section>
<aside class="meta-panel">
<section id="appPanel" class="app-panel" aria-labelledby="appPanelTitle" hidden>
<div class="panel-row">
<div id="appPanelTitle" class="panel-title compact">应用</div>
<div class="panel-actions">
<span id="offlineStatus" class="app-status" role="status">准备中</span>
<button id="refreshAppButton" class="small-button app-refresh" type="button" title="刷新应用" aria-label="刷新应用" disabled>&#8635;</button>
</div>
</div>
</section>
<section id="renderPanel" class="render-panel" aria-label="渲染">
<div class="panel-row">
<label class="panel-title compact" for="renderBackend">渲染</label>
<div class="render-controls">
<select id="renderBackend" title="渲染后端" disabled></select>
</div>
</div>
<div class="render-mode-row">
<span id="renderModeLabel">预览</span>
<div class="render-controls">
<div class="render-modes" role="group" aria-labelledby="renderModeLabel">
<button id="renderVectorButton" class="small-button" type="button" aria-pressed="true" title="矢量显示" disabled>矢量</button>
<button id="renderRasterButton" class="small-button" type="button" aria-pressed="false" title="位图显示" disabled>位图</button>
</div>
<select id="renderDPI" aria-label="预览DPI" title="预览DPI(仅位图)" disabled><option value="96">96 dpi</option><option value="150" selected>150 dpi</option><option value="300">300 dpi</option><option value="600">600 dpi</option></select>
</div>
</div>
<details class="render-support">
<summary>详情</summary>
<dl><div><dt>显示</dt><dd id="renderDisplay">SVG</dd></div><div><dt>编辑</dt><dd>SVG</dd></div><div><dt>字体</dt><dd id="renderFonts"></dd></div><div><dt>几何</dt><dd id="renderGeometry"></dd></div><div><dt>编译</dt><dd id="renderCompiler"></dd></div><div><dt>图片</dt><dd id="renderImages"></dd></div><div><dt>SVG</dt><dd id="renderSVG"></dd></div><div><dt>PDF</dt><dd id="renderPDF"></dd></div><div><dt>EPS</dt><dd id="renderEPS"></dd></div></dl>
</details>
</section>
<div class="panel-row">
<div class="panel-title compact">文档</div>
<button id="infoButton" class="small-button" type="button" aria-label="修改文档信息" aria-haspopup="dialog" aria-controls="infoPanel" hidden>修改</button>
</div>
<div id="editNotice" class="font-permission-hint" role="status" hidden></div>
<dl class="meta-list">
<div>
<dt>文件</dt>
<dd id="metaFile">-</dd>
</div>
<div>
<dt>标题</dt>
<dd id="metaTitle">-</dd>
</div>
<div hidden>
<dt>主题</dt>
<dd id="metaSubject"></dd>
</div>
<div>
<dt>作者</dt>
<dd id="metaAuthor">-</dd>
</div>
<div hidden>
<dt>创建</dt>
<dd id="metaCreationDate"></dd>
</div>
<div hidden>
<dt>修改</dt>
<dd id="metaModDate"></dd>
</div>
<div>
<dt>类型</dt>
<dd id="metaType">-</dd>
</div>
<div>
<dt>版本</dt>
<dd id="metaVersion">-</dd>
</div>
<div>
<dt>签名</dt>
<dd id="metaSignatures">0</dd>
</div>
<div>
<dt>字体</dt>
<dd id="metaFonts">0</dd>
</div>
</dl>
<section id="securityPanel" class="security-panel" aria-labelledby="securityPanelTitle" hidden>
<div class="panel-row"><div id="securityPanelTitle" class="panel-title compact">安全</div><div class="panel-actions"><button id="encryptSaveButton" class="small-button" type="button" title="加密另存" aria-label="加密另存" aria-haspopup="dialog" aria-controls="exportPanel" disabled>加密</button><button id="signButton" class="small-button" type="button" aria-haspopup="dialog" aria-controls="signPanel" disabled>签章</button><button id="verifyButton" class="small-button" type="button" aria-haspopup="dialog" aria-controls="verifyPanel" disabled>验签</button></div></div>
<dl class="meta-list"><div><dt>加密</dt><dd id="securityEncryption">未加密</dd></div><div id="securityMethodRow" hidden><dt>算法</dt><dd id="securityMethod"></dd></div></dl>
</section>
<section id="attachmentPanel" class="attachment-panel" aria-labelledby="attachmentPanelTitle" hidden>
<div id="attachmentPanelTitle" class="panel-title">附件</div>
<div id="attachmentList" class="attachment-list"></div>
</section>
<section id="signaturePanel" class="signature-panel" aria-labelledby="signaturePanelTitle" hidden>
<div class="panel-row">
<div id="signaturePanelTitle" class="panel-title compact">签名</div>
<span id="signatureSummary" class="count-pill">0</span>
</div>
<div id="signatureList" class="signature-list"></div>
</section>
<section class="doc-font-panel" aria-labelledby="docFontPanelTitle">
<div class="panel-row">
<div id="docFontPanelTitle" class="panel-title compact">OFD 字体</div>
<span id="docFontSummary" class="count-pill">0</span>
</div>
<div id="docFontList" class="doc-font-list"></div>
</section>
<section class="font-panel" aria-labelledby="fontPanelTitle">
<div class="panel-row">
<div id="fontPanelTitle" class="panel-title compact">可用字体</div>
<div class="panel-actions">
<span id="availableFontSummary" class="count-pill">0</span>
<button id="localFontButton" class="small-button" type="button" aria-label="系统字体">系统</button>
<button id="fontAddButton" class="small-button" type="button">添加</button>
<button id="fontDirectoryButton" class="small-button" type="button" title="添加字体目录" aria-label="添加字体目录">目录</button>
</div>
</div>
<div id="fontPermissionHint" class="font-permission-hint" hidden>系统字体未授权</div>
<div id="fontList" class="font-list"></div>
</section>
</aside>
</main>
<footer class="app-footer app-bar">
<a class="footer-brand" href="https://github.com/xiaoqidun/ofdgo" target="_blank" rel="noreferrer">OFDGo</a>
<div id="statusText" class="status-text">正在准备引擎</div>
<nav class="footer-links" aria-label="相关链接">
<a href="https://aite.me/" target="_blank" rel="noreferrer">官方网站</a>
</nav>
</footer>
</div>
<script type="module" src="./ofdgo.js"></script>
</body>
</html>