mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-10-29 17:27:08 +08:00
354 lines
19 KiB
HTML
354 lines
19 KiB
HTML
<!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="togglePagesButton" class="icon-button" type="button" title="页面栏" aria-label="页面栏" aria-pressed="true">☰</button>
|
|
<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">ⓘ</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">
|
|
<select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select>
|
|
<select id="imageDPI" class="format-select dpi-select" title="图片 DPI" aria-label="图片 DPI" disabled>
|
|
<option value="96">96</option>
|
|
<option value="150">150</option>
|
|
<option value="300" selected>300</option>
|
|
<option value="600">600</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" aria-label="保存OFD">保存</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">
|
|
<button id="selectObjectButton" class="button" type="button" aria-pressed="true">选择</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>
|
|
<span>对象</span>
|
|
</div>
|
|
<div class="editor-group">
|
|
<select id="textFont" aria-label="字体" title="字体" disabled></select>
|
|
<div class="form-unit text-size"><input id="textSize" type="number" min="1" step="any" required aria-label="字号" disabled><span>pt</span></div>
|
|
<input id="textColor" class="color-input" type="color" value="#000000" aria-label="文字颜色" title="文字颜色" disabled>
|
|
<span>文字</span>
|
|
</div>
|
|
<div class="editor-group">
|
|
<button id="insertTextButton" class="button" type="button" aria-label="添加文字">文字</button>
|
|
<button id="insertImageButton" class="button" type="button" aria-label="添加图片">图片</button>
|
|
<button id="drawLineButton" class="button" type="button" aria-label="绘制直线" aria-pressed="false">直线</button>
|
|
<button id="drawRectangleButton" class="button" type="button" aria-label="绘制矩形" aria-pressed="false">矩形</button>
|
|
<button id="drawEllipseButton" class="button" type="button" aria-label="绘制椭圆" aria-pressed="false">椭圆</button>
|
|
<span>插入</span>
|
|
</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>
|
|
<div class="form-unit text-size"><input id="shapeWidth" type="number" value="1" min="0" step="any" required aria-label="线宽" title="线宽"><span>pt</span></div>
|
|
<span>图形</span>
|
|
</div>
|
|
<div class="editor-group">
|
|
<button id="addPageButton" class="button" type="button" aria-label="新增页面">新增</button>
|
|
<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>
|
|
<span>页面</span>
|
|
</div>
|
|
</div>
|
|
<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="pagePanel" class="form-dialog" aria-label="页面设置">
|
|
<form id="pageForm">
|
|
<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 id="insertTextRow" class="form-row">
|
|
<label for="insertText">内容</label>
|
|
<textarea id="insertText" rows="3" required autofocus></textarea>
|
|
</div>
|
|
<div id="insertFontRow" class="form-row">
|
|
<label for="insertFont">字体</label>
|
|
<div class="form-font">
|
|
<select id="insertFont" required></select>
|
|
<button id="insertFontAdd" class="icon-button" type="button" title="添加字体" aria-label="添加字体">+</button>
|
|
</div>
|
|
</div>
|
|
<div id="insertImageRow" class="form-row" hidden>
|
|
<label for="insertImage">图片</label>
|
|
<input id="insertImage" type="file" accept=".png,.jpg,.jpeg,image/png,image/jpeg" required>
|
|
</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="exportPanel" class="form-dialog" aria-label="导出文档">
|
|
<form id="exportForm">
|
|
<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="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>
|
|
</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>↻</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="panel-title">文档</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="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 id="annotationPanel" class="annotation-panel" aria-labelledby="annotationPanelTitle" hidden>
|
|
<div id="annotationPanelTitle" class="panel-title">注解</div>
|
|
<div id="annotationList" class="annotation-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>
|