feat: expand toolbox and add math games

backend/templates/index.html

@@ -90,24 +90,82 @@
           <button class="active" data-track="standard">标准</button><button data-track="beginner">入门</button><button data-track="advanced">进阶</button>
         </div>
         <div id="contest-list" class="content-grid loading">正在读取比赛…</div>
+        <section class="math-games-section">
+          <div class="section-heading">
+            <div><span class="kicker">MATH PLAYGROUND</span><h2>数学玩法</h2></div>
+            <p>短局推理，成绩由服务端校验并记录。</p>
+          </div>
+          <div id="math-game-list" class="game-card-grid"></div>
+        </section>
       </section>
 
       <section class="view" id="view-toolbox">
         <div class="page-title"><span class="kicker">MATHEMATICAL WORKBENCH</span><h1>工具箱</h1><p>计算、查询、绘图与表达，把想法直接变成可以继续工作的对象。</p></div>
         <div class="tool-grid" id="tool-grid">
           <button class="tool-card" data-tool="mental"><span>⚡</span><b>口算竞技</b><small>限时挑战你的心算速度</small></button>
-          <button class="tool-card active" data-tool="calculator"><span>123</span><b>科学计算器</b><small>四则、幂运算与三角函数</small></button>
+          <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>输入 f(x)，实时观察曲线</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="latex"><span>TeX</span><b>LaTeX Lab</b><small>编辑、预览、课程与公式库</small></button>
         </div>
 
         <div class="tool-workspace active" id="tool-calculator">
-          <div class="workspace-heading"><div><span class="kicker">CALCULATOR</span><h2>科学计算器</h2></div><p>支持 + − × ÷、括号、幂、sin、cos、tan、sqrt、log 与常数 π。</p></div>
-          <div class="calculator-shell">
-            <div class="calculator-display"><small id="calc-history">准备计算</small><output id="calc-output">0</output></div>
-            <input id="calc-input" class="formula-input" autocomplete="off" value="sqrt(144) + 2^5" aria-label="计算表达式">
-            <div class="calculator-actions"><button data-calc-example="sin(pi/6)">sin(π/6)</button><button data-calc-example="log(100)">log(100)</button><button data-calc-example="(18+7)*4">(18+7)×4</button><button id="calc-run" class="primary-button">计算</button></div>
+          <div class="workspace-heading"><div><span class="kicker">COMPUTATION STUDIO</span><h2>数学计算工作台</h2></div><p>精确值、方程、微积分、矩阵、统计与进制转换由受限数学内核计算。</p></div>
+          <div class="calculator-shell advanced-calculator">
+            <div class="calculator-controls">
+              <label>计算类型
+                <select id="calc-operation">
+                  <option value="calculate">精确计算</option>
+                  <option value="simplify">表达式化简</option>
+                  <option value="expand">代数展开</option>
+                  <option value="factor">因式分解</option>
+                  <option value="solve">解方程</option>
+                  <option value="derivative">求导</option>
+                  <option value="integral">积分</option>
+                  <option value="limit">极限</option>
+                  <option value="matrix_det">矩阵行列式</option>
+                  <option value="matrix_inverse">逆矩阵</option>
+                  <option value="matrix_rref">矩阵行最简形</option>
+                  <option value="matrix_transpose">矩阵转置</option>
+                  <option value="statistics">描述统计</option>
+                  <option value="base">进制转换</option>
+                  <option value="unit">单位换算</option>
+                </select>
+              </label>
+              <label>变量
+                <select id="calc-variable"><option>x</option><option>y</option><option>z</option><option>a</option><option>b</option><option>t</option><option>n</option></select>
+              </label>
+              <label class="calc-field" data-calc-field="order">阶数<input id="calc-order" type="number" min="1" max="5" value="1"></label>
+              <label class="calc-field" data-calc-field="bounds">下限<input id="calc-lower" placeholder="可留空"></label>
+              <label class="calc-field" data-calc-field="bounds">上限<input id="calc-upper" placeholder="可留空"></label>
+              <label class="calc-field" data-calc-field="point">趋近值<input id="calc-point" value="0"></label>
+              <label class="calc-field" data-calc-field="base">原进制<input id="calc-from-base" type="number" min="2" max="36" value="10"></label>
+              <label class="calc-field" data-calc-field="base">目标进制<input id="calc-to-base" type="number" min="2" max="36" value="2"></label>
+              <label class="calc-field" data-calc-field="unit">原单位<select id="calc-from-unit"><option>mm</option><option>cm</option><option selected>m</option><option>km</option><option>in</option><option>ft</option><option>g</option><option>kg</option><option>lb</option><option>s</option><option>min</option><option>h</option><option>deg</option><option>rad</option></select></label>
+              <label class="calc-field" data-calc-field="unit">目标单位<select id="calc-to-unit"><option>mm</option><option selected>cm</option><option>m</option><option>km</option><option>in</option><option>ft</option><option>g</option><option>kg</option><option>lb</option><option>s</option><option>min</option><option>h</option><option>deg</option><option>rad</option></select></label>
+            </div>
+            <label class="calculator-expression-label">表达式或数据
+              <textarea id="calc-input" class="formula-input" autocomplete="off" aria-label="计算表达式">sqrt(2) + 1/3</textarea>
+            </label>
+            <div class="calculator-actions calc-examples">
+              <button data-calc-operation="solve" data-calc-example="x^2 - 5*x + 6 = 0">解方程</button>
+              <button data-calc-operation="derivative" data-calc-example="sin(x) + x^3">求导</button>
+              <button data-calc-operation="integral" data-calc-example="x^2">积分</button>
+              <button data-calc-operation="matrix_inverse" data-calc-example="1,2;3,4">逆矩阵</button>
+              <button data-calc-operation="statistics" data-calc-example="12,15,18,21,24">统计</button>
+              <button data-calc-operation="unit" data-calc-example="1.75">单位换算</button>
+              <button id="calc-run" class="primary-button">开始计算</button>
+            </div>
+            <div class="calculator-result" aria-live="polite">
+              <div class="calculator-display"><small id="calc-history">准备计算</small><output id="calc-output">0</output></div>
+              <div class="calc-result-grid">
+                <div><span>近似值</span><code id="calc-decimal">0</code></div>
+                <div><span>LaTeX</span><code id="calc-latex">0</code></div>
+              </div>
+              <ol id="calc-steps" class="calc-steps"></ol>
+            </div>
           </div>
         </div>
 
@@ -117,13 +175,59 @@
         </div>
 
         <div class="tool-workspace" id="tool-graph">
-          <div class="workspace-heading"><div><span class="kicker">FUNCTION PLOTTER</span><h2>函数图形绘制</h2></div><p>变量使用 x，支持与计算器相同的函数。</p></div>
+          <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"><label>f(x)<input id="graph-expression" class="formula-input" value="sin(x) + x/3"></label><label>显示范围<input id="graph-range" type="range" min="5" max="30" value="10"><span id="graph-range-label">−10 到 10</span></label><button id="graph-run" class="primary-button">绘制函数</button><p id="graph-error"></p></div>
+            <div class="graph-controls">
+              <label>函数列表<textarea id="graph-expression" class="formula-input">sin(x) + a*x/3&#10;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>
+              <label class="check-row"><input id="graph-derivative" type="checkbox"> 绘制第一条函数的导数</label>
+              <label class="check-row"><input id="graph-integral" type="checkbox"> 填充第一条函数与 x 轴区域</label>
+              <button id="graph-run" class="primary-button">绘制函数</button>
+              <p id="graph-error"></p>
+              <div id="graph-analysis" class="graph-analysis"></div>
+            </div>
             <canvas id="graph-canvas" width="900" height="480" aria-label="函数曲线图"></canvas>
           </div>
         </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>
+          <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>
+          </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">
           <div class="workspace-heading"><div><span class="kicker">LATEX LAB</span><h2>数学表达实验室</h2></div><p>源码、实时预览与版本保存。</p></div>
           <div class="editor-shell">
@@ -199,6 +303,8 @@
 
   <div class="toast" id="toast" role="status"></div>
   <div class="csrf-token">{% csrf_token %}</div>
+  <script src="{% static 'js/toolbox.js' %}" defer></script>
+  <script src="{% static 'js/games.js' %}" defer></script>
   <script src="{% static 'js/app.js' %}" defer></script>
 </body>
 </html>