feat: add collaborative math board and draw guess mode
This commit is contained in:
@@ -212,8 +212,7 @@
|
||||
<button class="tool-card active" data-tool="calculator"><span>123</span><b>数学计算工作台</b><small>代数、微积分、矩阵与统计</small></button>
|
||||
<button class="tool-card" data-tool="symbols"><span>Σ</span><b>数学符号查询</b><small>含义、读法与 LaTeX 写法</small></button>
|
||||
<button class="tool-card" data-tool="graph"><span>⌁</span><b>函数图形绘制</b><small>多函数、参数、导数与分析</small></button>
|
||||
<button class="tool-card" data-tool="whiteboard"><span>✎</span><b>数学白板</b><small>书写、图形、撤销与导出</small></button>
|
||||
<button class="tool-card" data-tool="geometry"><span>△</span><b>几何画板</b><small>点线圆、中点与动态测量</small></button>
|
||||
<button class="tool-card" data-tool="whiteboard"><span>✎△</span><b>数学画板</b><small>白板、几何、联机展示与你画我猜</small></button>
|
||||
<button class="tool-card" data-tool="latex"><span>TeX</span><b>LaTeX Lab</b><small>编辑、预览、课程与公式库</small></button>
|
||||
</div>
|
||||
|
||||
@@ -284,6 +283,10 @@
|
||||
<div class="workspace-heading"><div><span class="kicker">FUNCTION PLOTTER</span><h2>函数图形绘制</h2></div><p>每行一个函数；支持参数 a、数值导数、积分区域和曲线分析。</p></div>
|
||||
<div class="graph-shell">
|
||||
<div class="graph-controls">
|
||||
<details class="function-syntax-help" open>
|
||||
<summary>函数书写规则</summary>
|
||||
<p>每行一个表达式，直接写右侧：<code>sin(x)</code>、<code>x^2 - 2*x + 1</code>、<code>sqrt(abs(x))</code>。乘法必须写 <code>*</code>，幂可写 <code>^</code>，参数仅支持 <code>a</code>。</p>
|
||||
</details>
|
||||
<label>函数列表<textarea id="graph-expression" class="formula-input">sin(x) + a*x/3 0.08*x^2 - 2</textarea></label>
|
||||
<label>X 范围<input id="graph-range" type="range" min="5" max="30" value="10"><span id="graph-range-label">−10 到 10</span></label>
|
||||
<label>参数 a<input id="graph-parameter" type="range" min="-5" max="5" step="0.1" value="1"><span id="graph-parameter-label">a = 1</span></label>
|
||||
@@ -298,40 +301,63 @@
|
||||
</div>
|
||||
|
||||
<div class="tool-workspace" id="tool-whiteboard">
|
||||
<div class="workspace-heading"><div><span class="kicker">MATH WHITEBOARD</span><h2>数学白板</h2></div><p>支持鼠标、触控笔和手机触摸，作品仅在当前设备编辑，可导出 PNG。</p></div>
|
||||
<div class="drawing-toolbar" id="whiteboard-toolbar">
|
||||
<button class="active" data-whiteboard-tool="pen">画笔</button>
|
||||
<button data-whiteboard-tool="line">直线</button>
|
||||
<button data-whiteboard-tool="rect">矩形</button>
|
||||
<button data-whiteboard-tool="text">文字 / 公式</button>
|
||||
<button data-whiteboard-tool="eraser">橡皮</button>
|
||||
<input id="whiteboard-text" class="toolbar-text-input" placeholder="输入文字或公式">
|
||||
<label>颜色<input id="whiteboard-color" type="color" value="#17211b"></label>
|
||||
<label>粗细<input id="whiteboard-size" type="range" min="2" max="24" value="4"></label>
|
||||
<button id="whiteboard-grid">添加坐标纸</button>
|
||||
<label class="file-tool">导入图片<input id="whiteboard-image" type="file" accept="image/*"></label>
|
||||
<button id="whiteboard-undo">撤销</button>
|
||||
<button id="whiteboard-clear">清空</button>
|
||||
<button id="whiteboard-export" class="primary-button">导出 PNG</button>
|
||||
<div class="workspace-heading"><div><span class="kicker">MATH BOARD</span><h2>统一数学画板</h2></div><p>在白板与几何构造之间切换，可用联机码同步展示或发起数学你画我猜。</p></div>
|
||||
<div class="board-mode-switch">
|
||||
<button class="active" data-board-pane-toggle="whiteboard">自由白板</button>
|
||||
<button data-board-pane-toggle="geometry">几何构造</button>
|
||||
</div>
|
||||
<div class="canvas-stage"><canvas id="whiteboard-canvas" width="1200" height="700" aria-label="数学白板"></canvas></div>
|
||||
</div>
|
||||
|
||||
<div class="tool-workspace" id="tool-geometry">
|
||||
<div class="workspace-heading"><div><span class="kicker">GEOMETRY BOARD</span><h2>几何画板</h2></div><p>依次点击构造点、线段和圆；支持中点、长度与坐标测量。</p></div>
|
||||
<div class="drawing-toolbar" id="geometry-toolbar">
|
||||
<button class="active" data-geometry-tool="point">点</button>
|
||||
<button data-geometry-tool="segment">线段</button>
|
||||
<button data-geometry-tool="circle">圆</button>
|
||||
<button data-geometry-tool="midpoint">中点</button>
|
||||
<button data-geometry-tool="move">拖动</button>
|
||||
<label class="check-row"><input id="geometry-labels" type="checkbox" checked> 坐标与测量</label>
|
||||
<button id="geometry-undo">撤销</button>
|
||||
<button id="geometry-clear">清空</button>
|
||||
<button id="geometry-export" class="primary-button">导出 PNG</button>
|
||||
<section class="board-online-panel">
|
||||
<div>
|
||||
<select id="board-session-mode" aria-label="画板联机模式">
|
||||
<option value="collaborate">协作展示</option>
|
||||
<option value="draw_guess">数学你画我猜</option>
|
||||
</select>
|
||||
<button id="board-create" class="primary-button">创建联机码</button>
|
||||
</div>
|
||||
<form id="board-join-form">
|
||||
<input id="board-code-input" maxlength="6" autocomplete="off" placeholder="输入 6 位联机码" aria-label="画板联机码">
|
||||
<button type="submit">加入画板</button>
|
||||
</form>
|
||||
<p id="board-session-status">当前为本地画板，创建或加入后开始实时同步。</p>
|
||||
<strong id="board-target" hidden></strong>
|
||||
<form id="board-guess-form" hidden>
|
||||
<input id="board-guess-input" maxlength="40" placeholder="猜一个数学对象">
|
||||
<button type="submit">提交猜测</button>
|
||||
</form>
|
||||
</section>
|
||||
<div class="board-pane active" data-board-pane="whiteboard">
|
||||
<div class="drawing-toolbar" id="whiteboard-toolbar">
|
||||
<button class="active" data-whiteboard-tool="pen">画笔</button>
|
||||
<button data-whiteboard-tool="line">直线</button>
|
||||
<button data-whiteboard-tool="rect">矩形</button>
|
||||
<button data-whiteboard-tool="text">文字 / 公式</button>
|
||||
<button data-whiteboard-tool="eraser">橡皮</button>
|
||||
<input id="whiteboard-text" class="toolbar-text-input" placeholder="输入文字或公式">
|
||||
<label>颜色<input id="whiteboard-color" type="color" value="#17211b"></label>
|
||||
<label>粗细<input id="whiteboard-size" type="range" min="2" max="24" value="4"></label>
|
||||
<button id="whiteboard-grid">添加坐标纸</button>
|
||||
<label class="file-tool">导入图片<input id="whiteboard-image" type="file" accept="image/*"></label>
|
||||
<button id="whiteboard-undo">撤销</button>
|
||||
<button id="whiteboard-clear">清空</button>
|
||||
<button id="whiteboard-export" class="primary-button">导出 PNG</button>
|
||||
</div>
|
||||
<div class="canvas-stage"><canvas id="whiteboard-canvas" width="1200" height="700" aria-label="数学白板"></canvas></div>
|
||||
</div>
|
||||
<div class="board-pane" data-board-pane="geometry">
|
||||
<div class="drawing-toolbar" id="geometry-toolbar">
|
||||
<button class="active" data-geometry-tool="point">点</button>
|
||||
<button data-geometry-tool="segment">线段</button>
|
||||
<button data-geometry-tool="circle">圆</button>
|
||||
<button data-geometry-tool="midpoint">中点</button>
|
||||
<button data-geometry-tool="move">拖动</button>
|
||||
<label class="check-row"><input id="geometry-labels" type="checkbox" checked> 坐标与测量</label>
|
||||
<button id="geometry-undo">撤销</button>
|
||||
<button id="geometry-clear">清空</button>
|
||||
<button id="geometry-export" class="primary-button">导出 PNG</button>
|
||||
</div>
|
||||
<div class="canvas-stage geometry-stage"><canvas id="geometry-canvas" width="1200" height="700" aria-label="几何画板"></canvas></div>
|
||||
<p id="geometry-hint" class="canvas-hint">点击画布创建第一个点。</p>
|
||||
</div>
|
||||
<div class="canvas-stage geometry-stage"><canvas id="geometry-canvas" width="1200" height="700" aria-label="几何画板"></canvas></div>
|
||||
<p id="geometry-hint" class="canvas-hint">点击画布创建第一个点。</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-workspace" id="tool-latex">
|
||||
|
||||
Reference in New Issue
Block a user