TIAN/matrix-screen-controller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Android app UI and controller flows

Browse Source
This commit is contained in:
TIAN
2026-10-09 16:43:58 +08:00
parent c0e26b97fe
commit 608229a497
90 changed files with 8103 additions and 1133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
核桃派软件源代码/app/static/index.html
+38 -15
View File
@@ -103,6 +103,7 @@
<div id="board-stage" class="board-stage">
<canvas id="scene-canvas" width="64" height="64" aria-label="统一画板的正向合成预览"></canvas>
<canvas id="scene-overlay" width="64" height="64" aria-label="统一画板交互层"></canvas>
<div id="actual-screen-frame" aria-hidden="true" hidden><span>实际屏幕 64×64</span></div>
<div id="pixel-grid" class="pixel-grid" aria-hidden="true" hidden></div>
</div>
<canvas id="canvas-coordinate-guide" class="canvas-coordinate-guide" aria-hidden="true" hidden></canvas>
@@ -120,6 +121,16 @@
</button>
<div id="canvas-assistive-menu" class="canvas-assistive-menu" role="menu" aria-label="画布编辑操作" hidden>
<p id="canvas-edit-mode-hint" role="status" aria-live="polite">绘画模式：直接在画布上绘制</p>
<button id="toggle-expanded-board" type="button" role="menuitem" aria-pressed="false">显示扩展画面</button>
<button id="move-current-layer" type="button" role="menuitem" aria-pressed="false">移动当前图层</button>
<section id="layer-move-controls" class="layer-move-controls" aria-label="图层偏移" hidden>
<button id="exit-layer-move" type="button">退出图层移动</button>
<p>移动图层 · 范围 −64..64</p>
<label>X <input id="layer-offset-x" type="number" min="-64" max="64" value="0" step="1"></label>
<div class="offset-steps" data-axis="x"><button type="button" data-offset="-10">−10</button><button type="button" data-offset="-1">−1</button><button type="button" data-offset="1">+1</button><button type="button" data-offset="10">+10</button></div>
<label>Y <input id="layer-offset-y" type="number" min="-64" max="64" value="0" step="1"></label>
<div class="offset-steps" data-axis="y"><button type="button" data-offset="-10">−10</button><button type="button" data-offset="-1">−1</button><button type="button" data-offset="1">+1</button><button type="button" data-offset="10">+10</button></div>
</section>
<button id="toggle-canvas-coordinates" type="button" role="menuitem" aria-pressed="false">显示坐标系</button>
<button id="undo-canvas-edit" type="button" role="menuitem" aria-disabled="true"
data-unavailable-reason="还没有可以撤销的像素操作。">撤销</button>
@@ -218,13 +229,14 @@
</div>
<article class="panel canvas-workbench">
<div id="brush-layer-tools">
<div class="canvas-toolbar">
<div class="color-field"><span>画笔颜色</span>
<div class="color-field"><div class="canvas-color-heading"><span>画笔颜色</span></div>
<button id="paint-color" class="color-trigger" type="button" value="#FFFFFF" data-color-picker aria-label="选择画笔颜色">
<span class="color-trigger-swatch" aria-hidden="true"></span><span class="color-trigger-value">#FFFFFF</span>
</button>
</div>
<div class="color-field"><span>背景颜色</span>
<div class="color-field"><div class="canvas-color-heading"><span>背景颜色</span><label class="layer-background-toggle"><input id="layer-background-enabled" type="checkbox"><span>开启图层背景</span></label></div>
<button id="background-color" class="color-trigger" type="button" value="#000000" data-color-picker aria-label="选择画布背景颜色">
<span class="color-trigger-swatch" aria-hidden="true"></span><span class="color-trigger-value">#000000</span>
</button>
@@ -252,20 +264,8 @@
<button id="fill-canvas" type="button">填充背景</button>
<button id="clear-canvas" type="button">清空像素层</button>
</div>
<button id="start-canvas-edit" class="primary-button full-width" type="button">开始编辑</button>
<p class="hint">画布默认不会直接落笔。选好颜色和工具后，点击“开始编辑”进入全屏画布。</p>
</article>
</section>
<section id="workspace-text" class="workspace" aria-labelledby="text-title" hidden>
<div class="workspace-heading">
<div>
<p class="eyebrow" data-ui-copy-default-text="内容"></p>
<h2 id="text-title" aria-label="文字显示" data-ui-copy-default-text="文字显示"></h2>
</div>
<span class="orientation-label" data-ui-copy-default-text="正向 0°"></span>
</div>
<div id="text-layer-tools" hidden>
<article class="panel text-elements-panel">
<div class="panel-heading">
<div>
@@ -329,6 +329,22 @@
</div>
</fieldset>
</form>
</div>
<section id="layer-panel" class="layer-panel" aria-labelledby="layer-panel-title">
<h3 id="layer-panel-title">图层</h3>
<div class="layer-actions">
<button id="new-brush-layer" type="button">新建画笔层</button><button id="new-text-layer" type="button">新建文字层</button>
<button id="copy-layer" type="button">复制图层…</button><button id="rename-layer" type="button">重命名</button>
<button id="raise-layer" type="button">上移</button><button id="lower-layer" type="button">下移</button>
<button id="delete-layer" class="danger-button" type="button">删除图层</button>
</div>
<div id="layer-list" class="layer-list" role="group" aria-label="图层顺序，上方覆盖下方"></div>
<p class="hint">上方图层覆盖下方。至少保留一个画笔层。</p>
</section>
<button id="start-canvas-edit" class="primary-button full-width" type="button">开始编辑</button>
<p class="hint">画布默认不会直接落笔。选好颜色和工具后，点击“开始编辑”进入全屏画布。</p>
</article>
</section>
<section id="workspace-media-import" class="workspace" aria-labelledby="media-import-title" hidden>
@@ -942,5 +958,12 @@
<div id="control-feedback-toast" class="control-feedback-toast" role="status" aria-live="polite" aria-atomic="true" hidden></div>
<noscript>此控制台需要启用 JavaScript。</noscript>
<script type="module" src="/static/app.js"></script>
<dialog id="layer-copy-dialog" class="layer-copy-dialog">
<h2>复制当前图层</h2>
<label>目标画面 <select id="layer-copy-target"><option value="current">当前画板</option></select></label>
<section id="layer-copy-frames" hidden><p>选择目标帧</p><button id="layer-copy-all" type="button">全选</button><button id="layer-copy-none" type="button">清空选择</button><div id="layer-copy-frame-list"></div></section>
<p id="layer-copy-feedback" role="status" aria-live="polite"></p>
<div class="layer-actions"><button id="layer-copy-submit" type="button">复制到最上方</button><button id="layer-copy-cancel" type="button">取消</button></div>
</dialog>
</body>
</html>