feat: upgrade toolbox for v1.2.1

backend/static/js/app.js

@@ -1109,18 +1109,6 @@ function evaluateExpression(source, variables = {}) {
   return value;
 }
 
-function runCalculator() {
-  const input = $("#calc-input").value;
-  try {
-    const result = evaluateExpression(input);
-    $("#calc-history").textContent = input;
-    $("#calc-output").textContent = Number(result.toPrecision(12)).toString();
-  } catch (error) {
-    $("#calc-history").textContent = error.message;
-    $("#calc-output").textContent = "错误";
-  }
-}
-
 function renderSymbols(query = "") {
   const keyword = query.trim().toLowerCase();
   const matches = MATH_SYMBOLS.filter((symbol) =>
@@ -1152,70 +1140,7 @@ function renderSymbols(query = "") {
   );
 }
 
-function drawGraph() {
-  const canvas = $("#graph-canvas");
-  const context = canvas.getContext("2d");
-  const expression = $("#graph-expression").value;
-  const range = Number($("#graph-range").value);
-  const width = canvas.width;
-  const height = canvas.height;
-  $("#graph-range-label").textContent = `−${range} 到 ${range}`;
-  $("#graph-error").textContent = "";
-  context.clearRect(0, 0, width, height);
-  context.fillStyle = "#fbfbf7";
-  context.fillRect(0, 0, width, height);
-
-  const toX = (x) => ((x + range) / (range * 2)) * width;
-  const toY = (y) => height / 2 - (y / range) * (height / 2);
-  context.strokeStyle = "#e4e5df";
-  context.lineWidth = 1;
-  for (let value = -range; value <= range; value += 1) {
-    context.beginPath();
-    context.moveTo(toX(value), 0);
-    context.lineTo(toX(value), height);
-    context.stroke();
-    context.beginPath();
-    context.moveTo(0, toY(value));
-    context.lineTo(width, toY(value));
-    context.stroke();
-  }
-  context.strokeStyle = "#718078";
-  context.lineWidth = 2;
-  context.beginPath();
-  context.moveTo(0, height / 2);
-  context.lineTo(width, height / 2);
-  context.moveTo(width / 2, 0);
-  context.lineTo(width / 2, height);
-  context.stroke();
-
-  context.strokeStyle = "#196548";
-  context.lineWidth = 3;
-  context.beginPath();
-  let drawing = false;
-  try {
-    for (let pixel = 0; pixel <= width; pixel += 2) {
-      const x = (pixel / width) * range * 2 - range;
-      const y = evaluateExpression(expression, { x });
-      const screenY = toY(y);
-      if (screenY < -height * 2 || screenY > height * 3) {
-        drawing = false;
-        continue;
-      }
-      if (!drawing) context.moveTo(pixel, screenY);
-      else context.lineTo(pixel, screenY);
-      drawing = true;
-    }
-    context.stroke();
-  } catch (error) {
-    $("#graph-error").textContent = error.message;
-  }
-}
-
 function switchTool(tool) {
-  if (tool === "mental") {
-    navigate("contest");
-    return;
-  }
   $$(".tool-card").forEach((card) => {
     card.classList.toggle("active", card.dataset.tool === tool);
   });

backend/static/js/graph.js

@@ -0,0 +1,525 @@
+(function () {
+  const $graph = (selector, root = document) => root.querySelector(selector);
+  const COLORS = [
+    "#196548",
+    "#d86f45",
+    "#5d73e8",
+    "#8667b5",
+    "#c44f83",
+    "#198b9a",
+    "#b07b24",
+    "#3d4852",
+  ];
+  const graph = {
+    functions: [],
+    nextId: 1,
+    viewport: { xMin: -10, xMax: 10, yMin: -6, yMax: 6 },
+    dragging: null,
+    frame: null,
+    initialized: false,
+    observer: null,
+  };
+
+  function schedule() {
+    if (graph.frame) window.cancelAnimationFrame(graph.frame);
+    graph.frame = window.requestAnimationFrame(() => {
+      graph.frame = null;
+      draw();
+    });
+  }
+
+  function activeFunctions() {
+    return graph.functions.filter(
+      (item) => item.visible && item.expression.trim(),
+    );
+  }
+
+  function addFunction(expression = "", color) {
+    if (graph.functions.length >= 8) {
+      showToast("最多同时绘制 8 条曲线");
+      return;
+    }
+    graph.functions.push({
+      id: graph.nextId,
+      expression,
+      color: color || COLORS[(graph.nextId - 1) % COLORS.length],
+      visible: true,
+    });
+    graph.nextId += 1;
+    renderFunctionList();
+    schedule();
+  }
+
+  function renderFunctionList() {
+    const root = $graph("#graph-function-list");
+    root.replaceChildren(
+      ...graph.functions.map((item, index) => {
+        const row = document.createElement("div");
+        row.className = "graph-function-row";
+        const visible = document.createElement("input");
+        visible.type = "checkbox";
+        visible.checked = item.visible;
+        visible.setAttribute("aria-label", `显示曲线 ${index + 1}`);
+        visible.addEventListener("change", () => {
+          item.visible = visible.checked;
+          schedule();
+        });
+        const color = document.createElement("input");
+        color.type = "color";
+        color.value = item.color;
+        color.setAttribute("aria-label", `曲线 ${index + 1} 颜色`);
+        color.addEventListener("input", () => {
+          item.color = color.value;
+          schedule();
+        });
+        const prefix = document.createElement("span");
+        prefix.textContent = `f${index + 1}(x)`;
+        const input = document.createElement("input");
+        input.className = "formula-input";
+        input.value = item.expression;
+        input.placeholder = "例如 sin(x)";
+        input.setAttribute("aria-label", `函数 ${index + 1}`);
+        input.addEventListener("input", () => {
+          item.expression = input.value;
+          schedule();
+        });
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.textContent = "×";
+        remove.title = "删除曲线";
+        remove.disabled = graph.functions.length === 1;
+        remove.addEventListener("click", () => {
+          graph.functions = graph.functions.filter(
+            (candidate) => candidate.id !== item.id,
+          );
+          renderFunctionList();
+          schedule();
+        });
+        row.append(visible, color, prefix, input, remove);
+        return row;
+      }),
+    );
+  }
+
+  function readViewport() {
+    const viewport = {
+      xMin: Number($graph("#graph-x-min").value),
+      xMax: Number($graph("#graph-x-max").value),
+      yMin: Number($graph("#graph-y-min").value),
+      yMax: Number($graph("#graph-y-max").value),
+    };
+    if (
+      !Object.values(viewport).every(Number.isFinite) ||
+      viewport.xMin >= viewport.xMax ||
+      viewport.yMin >= viewport.yMax ||
+      viewport.xMax - viewport.xMin > 1_000_000 ||
+      viewport.yMax - viewport.yMin > 1_000_000
+    ) {
+      throw new Error("坐标范围必须有限、最小值小于最大值，跨度不超过 1,000,000");
+    }
+    return viewport;
+  }
+
+  function writeViewport(viewport = graph.viewport) {
+    $graph("#graph-x-min").value = Number(viewport.xMin.toPrecision(8));
+    $graph("#graph-x-max").value = Number(viewport.xMax.toPrecision(8));
+    $graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(8));
+    $graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(8));
+  }
+
+  function sampleFunction(item, viewport, count) {
+    const parameter = Number($graph("#graph-parameter").value);
+    const samples = [];
+    let lastError = null;
+    for (let index = 0; index <= count; index += 1) {
+      const x =
+        viewport.xMin +
+        (index / count) * (viewport.xMax - viewport.xMin);
+      let y = Number.NaN;
+      try {
+        y = evaluateExpression(item.expression, { x, a: parameter });
+      } catch (error) {
+        lastError = error;
+      }
+      samples.push({ x, y: Number.isFinite(y) ? y : Number.NaN });
+    }
+    if (!samples.some((point) => Number.isFinite(point.y))) {
+      throw lastError || new Error(`函数 ${item.expression} 在当前视窗没有有效值`);
+    }
+    return samples;
+  }
+
+  function autoY(functions, viewport) {
+    const values = functions
+      .flatMap((item) => sampleFunction(item, viewport, 500))
+      .map((item) => item.y)
+      .filter(Number.isFinite)
+      .sort((left, right) => left - right);
+    if (!values.length) return { ...viewport, yMin: -6, yMax: 6 };
+    const low = values[Math.floor(values.length * 0.02)];
+    const high = values[Math.min(values.length - 1, Math.ceil(values.length * 0.98))];
+    const span = Math.max(high - low, Math.abs(high) * 0.1, 2);
+    return {
+      ...viewport,
+      yMin: low - span * 0.12,
+      yMax: high + span * 0.12,
+    };
+  }
+
+  function niceStep(span, target = 9) {
+    const rough = span / target;
+    const power = 10 ** Math.floor(Math.log10(rough));
+    const fraction = rough / power;
+    return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10) * power;
+  }
+
+  function tickLabel(value, step) {
+    if (Math.abs(value) < step * 0.001) return "0";
+    if (Math.abs(value) >= 10000 || Math.abs(value) < 0.001) {
+      return value.toExponential(1);
+    }
+    return value.toFixed(Math.min(6, Math.max(0, -Math.floor(Math.log10(step)))));
+  }
+
+  function canvasSize() {
+    const canvas = $graph("#graph-canvas");
+    const rect = canvas.getBoundingClientRect();
+    const ratio = Math.min(window.devicePixelRatio || 1, 2);
+    const width = Math.max(320, Math.round(rect.width));
+    const height = Math.max(320, Math.round(rect.height));
+    if (
+      canvas.width !== Math.round(width * ratio) ||
+      canvas.height !== Math.round(height * ratio)
+    ) {
+      canvas.width = Math.round(width * ratio);
+      canvas.height = Math.round(height * ratio);
+    }
+    const context = canvas.getContext("2d");
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    return { context, width, height };
+  }
+
+  function drawGrid(context, viewport, width, height, toX, toY) {
+    context.fillStyle = "#fcfcf8";
+    context.fillRect(0, 0, width, height);
+    if (!$graph("#graph-grid").checked) return;
+    const xStep = niceStep(viewport.xMax - viewport.xMin);
+    const yStep = niceStep(viewport.yMax - viewport.yMin);
+    context.font = "11px system-ui, sans-serif";
+    context.lineWidth = 1;
+    context.strokeStyle = "#e1e6e0";
+    context.fillStyle = "#6d796f";
+    context.textAlign = "center";
+    context.textBaseline = "top";
+    for (
+      let value = Math.ceil(viewport.xMin / xStep) * xStep;
+      value <= viewport.xMax + xStep * 0.001;
+      value += xStep
+    ) {
+      const x = toX(value);
+      context.beginPath();
+      context.moveTo(x, 0);
+      context.lineTo(x, height);
+      context.stroke();
+      const labelY =
+        viewport.yMin <= 0 && viewport.yMax >= 0
+          ? Math.min(height - 18, Math.max(4, toY(0) + 6))
+          : height - 18;
+      context.fillText(tickLabel(value, xStep), x, labelY);
+    }
+    context.textAlign = "left";
+    context.textBaseline = "middle";
+    for (
+      let value = Math.ceil(viewport.yMin / yStep) * yStep;
+      value <= viewport.yMax + yStep * 0.001;
+      value += yStep
+    ) {
+      const y = toY(value);
+      context.beginPath();
+      context.moveTo(0, y);
+      context.lineTo(width, y);
+      context.stroke();
+      const labelX =
+        viewport.xMin <= 0 && viewport.xMax >= 0
+          ? Math.min(width - 50, Math.max(6, toX(0) + 7))
+          : 7;
+      context.fillText(tickLabel(value, yStep), labelX, y);
+    }
+  }
+
+  function drawAxes(context, viewport, width, height, toX, toY) {
+    context.strokeStyle = "#263b30";
+    context.fillStyle = "#263b30";
+    context.lineWidth = 2;
+    context.beginPath();
+    if (viewport.yMin <= 0 && viewport.yMax >= 0) {
+      const y = toY(0);
+      context.moveTo(0, y);
+      context.lineTo(width, y);
+      context.moveTo(width - 9, y - 5);
+      context.lineTo(width, y);
+      context.lineTo(width - 9, y + 5);
+    }
+    if (viewport.xMin <= 0 && viewport.xMax >= 0) {
+      const x = toX(0);
+      context.moveTo(x, height);
+      context.lineTo(x, 0);
+      context.moveTo(x - 5, 9);
+      context.lineTo(x, 0);
+      context.lineTo(x + 5, 9);
+    }
+    context.stroke();
+    context.font = "700 12px system-ui, sans-serif";
+    context.fillText("x", width - 16, Math.min(height - 16, Math.max(14, toY(0) - 15)));
+    context.fillText("y", Math.min(width - 18, Math.max(10, toX(0) + 10)), 14);
+  }
+
+  function drawPath(context, samples, color, viewport, toX, toY) {
+    const ySpan = viewport.yMax - viewport.yMin;
+    context.strokeStyle = color;
+    context.lineWidth = 2.6;
+    context.lineJoin = "round";
+    context.beginPath();
+    let drawing = false;
+    let previous;
+    samples.forEach((item) => {
+      const discontinuity =
+        previous &&
+        Number.isFinite(previous.y) &&
+        Number.isFinite(item.y) &&
+        Math.abs(item.y - previous.y) > ySpan * 3;
+      if (
+        !Number.isFinite(item.y) ||
+        item.y < viewport.yMin - ySpan ||
+        item.y > viewport.yMax + ySpan ||
+        discontinuity
+      ) {
+        drawing = false;
+      } else if (!drawing) {
+        context.moveTo(toX(item.x), toY(item.y));
+        drawing = true;
+      } else {
+        context.lineTo(toX(item.x), toY(item.y));
+      }
+      previous = item;
+    });
+    context.stroke();
+  }
+
+  function analyze(samples, xSpan) {
+    const roots = [];
+    let extrema = 0;
+    for (let index = 1; index < samples.length; index += 1) {
+      const before = samples[index - 1];
+      const current = samples[index];
+      if (!Number.isFinite(before.y) || !Number.isFinite(current.y)) continue;
+      if (before.y === 0 || before.y * current.y < 0) {
+        const root = (before.x + current.x) / 2;
+        if (!roots.length || Math.abs(root - roots.at(-1)) > xSpan / 300) {
+          roots.push(root);
+        }
+      }
+      if (index > 1) {
+        const older = samples[index - 2];
+        if (!Number.isFinite(older.y)) continue;
+        if ((before.y - older.y) * (current.y - before.y) < 0) extrema += 1;
+      }
+    }
+    return { roots: roots.slice(0, 8), extrema };
+  }
+
+  function renderLegend(functions) {
+    $graph("#graph-legend").replaceChildren(
+      ...functions.map((item) => {
+        const badge = document.createElement("span");
+        const dot = document.createElement("i");
+        dot.style.background = item.color;
+        badge.append(dot, document.createTextNode(item.expression));
+        return badge;
+      }),
+    );
+  }
+
+  function draw() {
+    const canvas = $graph("#graph-canvas");
+    if (!canvas) return;
+    const functions = activeFunctions();
+    const { context, width, height } = canvasSize();
+    $graph("#graph-error").textContent = "";
+    $graph("#graph-parameter-label").textContent =
+      Number($graph("#graph-parameter").value).toFixed(1);
+    try {
+      let viewport = readViewport();
+      if ($graph("#graph-auto-y").checked && functions.length) {
+        viewport = autoY(functions, viewport);
+        $graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(7));
+        $graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(7));
+      }
+      graph.viewport = viewport;
+      const toX = (x) =>
+        ((x - viewport.xMin) / (viewport.xMax - viewport.xMin)) * width;
+      const toY = (y) =>
+        height - ((y - viewport.yMin) / (viewport.yMax - viewport.yMin)) * height;
+      drawGrid(context, viewport, width, height, toX, toY);
+      drawAxes(context, viewport, width, height, toX, toY);
+      if (!functions.length) {
+        $graph("#graph-error").textContent = "请至少输入并启用一个函数";
+        renderLegend([]);
+        return;
+      }
+      const count = Math.max(500, Math.min(1600, Math.round(width * 1.5)));
+      const sampled = functions.map((item) => ({
+        item,
+        samples: sampleFunction(item, viewport, count),
+      }));
+      const first = sampled[0].samples;
+      if ($graph("#graph-integral").checked) {
+        context.fillStyle = `${functions[0].color}22`;
+        context.beginPath();
+        context.moveTo(toX(viewport.xMin), toY(0));
+        first.forEach((point) => {
+          if (Number.isFinite(point.y)) context.lineTo(toX(point.x), toY(point.y));
+        });
+        context.lineTo(toX(viewport.xMax), toY(0));
+        context.closePath();
+        context.fill();
+      }
+      sampled.forEach(({ item, samples }) => {
+        drawPath(context, samples, item.color, viewport, toX, toY);
+      });
+      if ($graph("#graph-derivative").checked) {
+        const derivative = first.slice(1, -1).map((point, index) => {
+          const before = first[index];
+          const after = first[index + 2];
+          return { x: point.x, y: (after.y - before.y) / (after.x - before.x) };
+        });
+        context.setLineDash([8, 6]);
+        drawPath(context, derivative, "#111827", viewport, toX, toY);
+        context.setLineDash([]);
+      }
+      const analysis = analyze(first, viewport.xMax - viewport.xMin);
+      const rootText = analysis.roots.length
+        ? analysis.roots.map((item) => item.toPrecision(4)).join("、")
+        : "当前视窗未发现";
+      $graph("#graph-analysis").textContent =
+        `第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
+      renderLegend(functions);
+    } catch (error) {
+      context.clearRect(0, 0, width, height);
+      $graph("#graph-error").textContent = error.message;
+    }
+  }
+
+  function setViewport(viewport, disableAutoY = true) {
+    graph.viewport = viewport;
+    if (disableAutoY) $graph("#graph-auto-y").checked = false;
+    writeViewport(viewport);
+    schedule();
+  }
+
+  function resetViewport() {
+    $graph("#graph-auto-y").checked = true;
+    setViewport({ xMin: -10, xMax: 10, yMin: -6, yMax: 6 }, false);
+  }
+
+  function autoFit() {
+    $graph("#graph-auto-y").checked = true;
+    schedule();
+  }
+
+  function bindCanvasNavigation() {
+    const canvas = $graph("#graph-canvas");
+    canvas.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      graph.dragging = {
+        x: event.clientX,
+        y: event.clientY,
+        viewport: { ...graph.viewport },
+      };
+      canvas.setPointerCapture(event.pointerId);
+      canvas.classList.add("dragging");
+    });
+    canvas.addEventListener("pointermove", (event) => {
+      if (!graph.dragging) return;
+      const rect = canvas.getBoundingClientRect();
+      const start = graph.dragging;
+      const dx =
+        ((event.clientX - start.x) / rect.width) *
+        (start.viewport.xMax - start.viewport.xMin);
+      const dy =
+        ((event.clientY - start.y) / rect.height) *
+        (start.viewport.yMax - start.viewport.yMin);
+      setViewport({
+        xMin: start.viewport.xMin - dx,
+        xMax: start.viewport.xMax - dx,
+        yMin: start.viewport.yMin + dy,
+        yMax: start.viewport.yMax + dy,
+      });
+    });
+    const stopDragging = () => {
+      graph.dragging = null;
+      canvas.classList.remove("dragging");
+    };
+    canvas.addEventListener("pointerup", stopDragging);
+    canvas.addEventListener("pointercancel", stopDragging);
+    canvas.addEventListener(
+      "wheel",
+      (event) => {
+        event.preventDefault();
+        const rect = canvas.getBoundingClientRect();
+        const viewport = graph.viewport;
+        const xRatio = (event.clientX - rect.left) / rect.width;
+        const yRatio = 1 - (event.clientY - rect.top) / rect.height;
+        const centerX = viewport.xMin + xRatio * (viewport.xMax - viewport.xMin);
+        const centerY = viewport.yMin + yRatio * (viewport.yMax - viewport.yMin);
+        const factor = event.deltaY > 0 ? 1.14 : 0.88;
+        setViewport({
+          xMin: centerX + (viewport.xMin - centerX) * factor,
+          xMax: centerX + (viewport.xMax - centerX) * factor,
+          yMin: centerY + (viewport.yMin - centerY) * factor,
+          yMax: centerY + (viewport.yMax - centerY) * factor,
+        });
+      },
+      { passive: false },
+    );
+    canvas.addEventListener("dblclick", autoFit);
+  }
+
+  function init() {
+    if (graph.initialized) return;
+    graph.initialized = true;
+    addFunction("sin(x) + a*x/3", COLORS[0]);
+    addFunction("0.08*x^2 - 2", COLORS[1]);
+    $graph("#graph-add-function").addEventListener("click", () => addFunction());
+    $graph("#graph-run").addEventListener("click", draw);
+    $graph("#graph-auto-fit").addEventListener("click", autoFit);
+    $graph("#graph-reset-view").addEventListener("click", resetViewport);
+    [
+      "#graph-parameter",
+      "#graph-x-min",
+      "#graph-x-max",
+      "#graph-auto-y",
+      "#graph-grid",
+      "#graph-derivative",
+      "#graph-integral",
+    ].forEach((selector) => {
+      $graph(selector).addEventListener("input", schedule);
+    });
+    ["#graph-y-min", "#graph-y-max"].forEach((selector) => {
+      $graph(selector).addEventListener("input", () => {
+        $graph("#graph-auto-y").checked = false;
+        schedule();
+      });
+    });
+    bindCanvasNavigation();
+    if ("ResizeObserver" in window) {
+      graph.observer = new ResizeObserver(schedule);
+      graph.observer.observe($graph(".graph-stage"));
+    } else {
+      window.addEventListener("resize", schedule);
+    }
+    schedule();
+  }
+
+  window.HuluGraph = { init, draw, resize: schedule, addFunction };
+})();

backend/static/js/toolbox.js

@@ -5,25 +5,107 @@
   const CALC_FIELDS = {
     derivative: ["order"],
     integral: ["bounds"],
-    limit: ["point"],
+    limit: ["point", "direction"],
+    series: ["point", "order"],
+    solve_system: ["variables"],
+    gradient: ["variables"],
+    hessian: ["variables"],
     base: ["base"],
     unit: ["unit"],
   };
 
-  function formatCalculatorResult(result) {
-    if (Array.isArray(result)) {
-      return {
-        exact: result.map((item) => item.exact).join(", "),
-        decimal: result.map((item) => item.decimal).join(", "),
-        latex: result.map((item) => item.latex).join(", "),
-      };
+  const CALC_OPERATION_META = {
+    statistics: {
+      placeholder: "12, 15, 18, 21, 24",
+      hint: "使用逗号分隔数据，返回四分位数、方差、标准差、极差等统计量。",
+    },
+    base: {
+      placeholder: "FF",
+      hint: "输入不带前缀的整数，原进制与目标进制均支持 2 到 36。",
+    },
+    solve: {
+      placeholder: "x^2 - 5*x + 6 = 0",
+      hint: "可省略等号右侧；通过“变量”指定要求解的未知量。",
+    },
+    solve_system: {
+      placeholder: "x + y = 5; x - y = 1",
+      hint: "使用分号分隔方程，通过“变量列表”指定未知量，最多 4 个变量、6 个方程。",
+    },
+    polynomial_roots: {
+      placeholder: "x^5 - x + 1 = 0",
+      hint: "返回至多 12 次单变量多项式的全部高精度数值根，包括复根。",
+    },
+    series: {
+      placeholder: "exp(x) * cos(x)",
+      hint: "在指定点附近展开；“阶数 6”表示保留到 5 阶并显示余项。",
+      order: 6,
+    },
+    gradient: {
+      placeholder: "x^2*y + sin(y)",
+      hint: "变量列表示例：x,y。结果按该顺序组成梯度列向量。",
+    },
+    hessian: {
+      placeholder: "x^2 + x*y + y^2",
+      hint: "变量列表示例：x,y。结果为二阶偏导组成的 Hessian 矩阵。",
+    },
+    matrix_det: { placeholder: "1,2;3,4", hint: "逗号分列、分号分行，最多 36 个元素。" },
+    matrix_inverse: { placeholder: "1,2;3,4", hint: "逆矩阵要求方阵且行列式非零。" },
+    matrix_rref: { placeholder: "1,2,3;2,4,6", hint: "返回矩阵的行最简形。" },
+    matrix_transpose: { placeholder: "1,2,3;4,5,6", hint: "交换矩阵的行与列。" },
+    matrix_rank: { placeholder: "1,2,3;2,4,6", hint: "通过精确行变换计算矩阵秩。" },
+    matrix_nullspace: { placeholder: "1,2;2,4", hint: "返回齐次方程组对应零空间的一组基。" },
+    matrix_eigenvalues: { placeholder: "2,1;1,2", hint: "要求方阵，返回特征值及其代数重数。" },
+  };
+
+  function calculatorCategoryFor(operation) {
+    const option = [...$tool("#calc-operation").options].find(
+      (item) => item.value === operation,
+    );
+    return option?.parentElement?.dataset.calcCategoryOptions || "algebra";
+  }
+
+  function setCalculatorCategory(category, selectFirst = true) {
+    const select = $tool("#calc-operation");
+    $$tool("[data-calc-category-options]").forEach((group) => {
+      const active = group.dataset.calcCategoryOptions === category;
+      group.hidden = !active;
+      group.disabled = !active;
+    });
+    $$tool("[data-calc-category]").forEach((button) => {
+      button.classList.toggle(
+        "active",
+        button.dataset.calcCategory === category,
+      );
+    });
+    if (selectFirst) {
+      const group = $tool(
+        `[data-calc-category-options="${category}"]`,
+      );
+      if (group?.querySelector("option")) {
+        select.value = group.querySelector("option").value;
+      }
     }
-    if (result && typeof result === "object" && "exact" in result) return result;
-    const entries = Object.entries(result || {});
+    updateCalculatorFields();
+  }
+
+  function resultText(value, field = "exact") {
+    if (Array.isArray(value)) {
+      return value.map((item) => resultText(item, field)).join("； ");
+    }
+    if (value && typeof value === "object") {
+      if ("exact" in value) return value[field] || value.exact;
+      return Object.entries(value)
+        .map(([key, item]) => `${key}: ${resultText(item, field)}`)
+        .join("； ");
+    }
+    return String(value ?? "");
+  }
+
+  function formatCalculatorResult(result) {
     return {
-      exact: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
-      decimal: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
-      latex: entries.map(([key, value]) => `${key}=${value}`).join(", "),
+      exact: resultText(result, "exact"),
+      decimal: resultText(result, "decimal"),
+      latex: resultText(result, "latex"),
     };
   }
 
@@ -33,17 +115,13 @@
     $$tool("[data-calc-field]").forEach((field) => {
       field.hidden = !visible.has(field.dataset.calcField);
     });
-    const input = $tool("#calc-input");
-    const placeholders = {
-      statistics: "12, 15, 18, 21, 24",
-      base: "FF",
-      matrix_det: "1,2;3,4",
-      matrix_inverse: "1,2;3,4",
-      matrix_rref: "1,2,3;2,4,6",
-      matrix_transpose: "1,2,3;4,5,6",
-      solve: "x^2 - 5*x + 6 = 0",
-    };
-    input.placeholder = placeholders[operation] || "例如：sqrt(2) + 1/3";
+    const meta = CALC_OPERATION_META[operation] || {};
+    $tool("#calc-input").placeholder = meta.placeholder || "例如：sqrt(2) + 1/3";
+    $tool("#calc-hint").textContent =
+      meta.hint || "支持精确常量、受限数学函数和变量；按 Command/Ctrl + Enter 运行。";
+    $tool("#calc-order").max = operation === "derivative" ? 5 : 12;
+    if (meta.order) $tool("#calc-order").value = meta.order;
+    else if (operation === "derivative") $tool("#calc-order").value = 1;
   }
 
   async function runCalculator() {
@@ -59,10 +137,12 @@
           operation,
           expression,
           variable: $tool("#calc-variable").value,
+          variables: $tool("#calc-variables").value,
           order: $tool("#calc-order").value,
           lower: $tool("#calc-lower").value,
           upper: $tool("#calc-upper").value,
           point: $tool("#calc-point").value,
+          direction: $tool("#calc-direction").value,
           from_base: $tool("#calc-from-base").value,
           to_base: $tool("#calc-to-base").value,
           from_unit: $tool("#calc-from-unit").value,
@@ -92,163 +172,6 @@
     }
   }
 
-  const GRAPH_COLORS = ["#196548", "#d86f45", "#5d73e8", "#8667b5"];
-
-  function drawFunctionPath(context, expression, variables, range, width, height, color) {
-    const toY = (value) => height / 2 - (value / range) * (height / 2);
-    context.strokeStyle = color;
-    context.lineWidth = 3;
-    context.beginPath();
-    let drawing = false;
-    const samples = [];
-    for (let pixel = 0; pixel <= width; pixel += 2) {
-      const x = (pixel / width) * range * 2 - range;
-      let y;
-      try {
-        y = evaluateExpression(expression, { ...variables, x });
-      } catch (error) {
-        if (pixel === 0) throw error;
-        drawing = false;
-        continue;
-      }
-      samples.push({ x, y });
-      const screenY = toY(y);
-      if (!Number.isFinite(screenY) || screenY < -height * 2 || screenY > height * 3) {
-        drawing = false;
-        continue;
-      }
-      if (!drawing) context.moveTo(pixel, screenY);
-      else context.lineTo(pixel, screenY);
-      drawing = true;
-    }
-    context.stroke();
-    return samples;
-  }
-
-  function graphAnalysis(samples) {
-    const roots = [];
-    let extrema = 0;
-    for (let index = 1; index < samples.length; index += 1) {
-      const before = samples[index - 1];
-      const current = samples[index];
-      if (before.y === 0 || before.y * current.y < 0) {
-        const root = (before.x + current.x) / 2;
-        if (!roots.length || Math.abs(root - roots.at(-1)) > 0.15) roots.push(root);
-      }
-      if (index > 1) {
-        const previousSlope = before.y - samples[index - 2].y;
-        const currentSlope = current.y - before.y;
-        if (previousSlope * currentSlope < 0) extrema += 1;
-      }
-    }
-    return { roots: roots.slice(0, 8), extrema };
-  }
-
-  function drawGraph() {
-    const canvas = $tool("#graph-canvas");
-    const context = canvas.getContext("2d");
-    const expressions = $tool("#graph-expression").value
-      .split("\n")
-      .map((item) => item.trim())
-      .filter(Boolean)
-      .slice(0, 4);
-    const range = Number($tool("#graph-range").value);
-    const parameter = Number($tool("#graph-parameter").value);
-    const width = canvas.width;
-    const height = canvas.height;
-    $tool("#graph-range-label").textContent = `−${range} 到 ${range}`;
-    $tool("#graph-parameter-label").textContent = `a = ${parameter}`;
-    $tool("#graph-error").textContent = "";
-    context.clearRect(0, 0, width, height);
-    context.fillStyle = "#fbfbf7";
-    context.fillRect(0, 0, width, height);
-    const toX = (x) => ((x + range) / (range * 2)) * width;
-    const toY = (y) => height / 2 - (y / range) * (height / 2);
-
-    context.strokeStyle = "#e4e5df";
-    context.lineWidth = 1;
-    for (let value = -range; value <= range; value += 1) {
-      context.beginPath();
-      context.moveTo(toX(value), 0);
-      context.lineTo(toX(value), height);
-      context.moveTo(0, toY(value));
-      context.lineTo(width, toY(value));
-      context.stroke();
-    }
-    context.strokeStyle = "#718078";
-    context.lineWidth = 2;
-    context.beginPath();
-    context.moveTo(0, height / 2);
-    context.lineTo(width, height / 2);
-    context.moveTo(width / 2, 0);
-    context.lineTo(width / 2, height);
-    context.stroke();
-
-    if (!expressions.length) {
-      $tool("#graph-error").textContent = "请至少输入一个函数";
-      return;
-    }
-    try {
-      const firstSamples = drawFunctionPath(
-        context,
-        expressions[0],
-        { a: parameter },
-        range,
-        width,
-        height,
-        GRAPH_COLORS[0],
-      );
-      expressions.slice(1).forEach((expression, index) => {
-        drawFunctionPath(
-          context,
-          expression,
-          { a: parameter },
-          range,
-          width,
-          height,
-          GRAPH_COLORS[index + 1],
-        );
-      });
-
-      if ($tool("#graph-integral").checked) {
-        context.fillStyle = "rgba(25, 101, 72, .13)";
-        context.beginPath();
-        context.moveTo(0, height / 2);
-        firstSamples.forEach((item) => context.lineTo(toX(item.x), toY(item.y)));
-        context.lineTo(width, height / 2);
-        context.closePath();
-        context.fill();
-      }
-      if ($tool("#graph-derivative").checked) {
-        const derivative = firstSamples.slice(1, -1).map((item, index) => {
-          const before = firstSamples[index];
-          const after = firstSamples[index + 2];
-          return { x: item.x, y: (after.y - before.y) / (after.x - before.x) };
-        });
-        context.strokeStyle = "#111827";
-        context.lineWidth = 2;
-        context.setLineDash([9, 7]);
-        context.beginPath();
-        derivative.forEach((item, index) => {
-          const x = toX(item.x);
-          const y = toY(item.y);
-          if (index === 0) context.moveTo(x, y);
-          else context.lineTo(x, y);
-        });
-        context.stroke();
-        context.setLineDash([]);
-      }
-      const analysis = graphAnalysis(firstSamples);
-      const rootText = analysis.roots.length
-        ? analysis.roots.map((item) => item.toFixed(2)).join("、")
-        : "当前范围未发现";
-      $tool("#graph-analysis").textContent =
-        `第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
-    } catch (error) {
-      $tool("#graph-error").textContent = error.message;
-    }
-  }
-
   function canvasPoint(canvas, event) {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -930,7 +853,17 @@
   }
 
   function init() {
-    $tool("#calc-operation").addEventListener("change", updateCalculatorFields);
+    $tool("#calc-operation").addEventListener("change", () => {
+      setCalculatorCategory(
+        calculatorCategoryFor($tool("#calc-operation").value),
+        false,
+      );
+    });
+    $$tool("[data-calc-category]").forEach((button) => {
+      button.addEventListener("click", () => {
+        setCalculatorCategory(button.dataset.calcCategory);
+      });
+    });
     $tool("#calc-run").addEventListener("click", runCalculator);
     $tool("#calc-input").addEventListener("keydown", (event) => {
       if ((event.metaKey || event.ctrlKey) && event.key === "Enter") runCalculator();
@@ -939,24 +872,22 @@
       button.addEventListener("click", () => {
         $tool("#calc-operation").value = button.dataset.calcOperation;
         $tool("#calc-input").value = button.dataset.calcExample;
-        updateCalculatorFields();
+        setCalculatorCategory(
+          calculatorCategoryFor(button.dataset.calcOperation),
+          false,
+        );
         runCalculator();
       });
     });
-    ["#graph-run", "#graph-range", "#graph-parameter", "#graph-derivative", "#graph-integral"]
-      .forEach((selector) => $tool(selector).addEventListener("input", drawGraph));
-    $tool("#graph-expression").addEventListener("keydown", (event) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") drawGraph();
-    });
     initDrawingTools();
-    updateCalculatorFields();
-    drawGraph();
+    setCalculatorCategory("algebra", false);
+    window.HuluGraph?.init();
   }
 
   function activate(tool) {
-    if (tool === "graph") window.setTimeout(drawGraph, 30);
+    if (tool === "graph") window.setTimeout(() => window.HuluGraph?.resize(), 30);
     if (tool === "whiteboard") window.setTimeout(() => geometry.draw(), 30);
   }
 
-  window.HuluToolbox = { init, activate, runCalculator, drawGraph };
+  window.HuluToolbox = { init, activate, runCalculator };
 })();