多输入协同：两个滑块联动

slex: "0.1",
  namespace: "learn_multi_coordination",
  g: {
    width: 120,
    height: 80,
    area: function () { return this.width * this.height; },
    isLandscape: function () { return this.width > this.height; },
    ratio: function () { return (this.width / this.height).toFixed(2); }
  },
  layout: {
    "section:coordinated": {
      eyebrow: "入门教程 · 3/4",
      title: "多输入协同：矩形尺寸联动",
      subtitle: "同时调整宽和高，面积和宽高比自动重新计算。这就是 g 方法的力量。",
      "grid:params": {
        columns: 1, mdColumns: 2,
        "column:w": {
          "input:width": { label: "宽度", "$value": "g.width", type: "number", unit: "px", onchange: "g.width = Number($event || 0)" },
          "slider:width": { label: "宽度", "$value": "g.width", min: 20, max: 300, step: 5, unit: "px", onchange: "g.width = Number($event)" }
        },
        "column:h": {
          "input:height": { label: "高度", "$value": "g.height", type: "number", unit: "px", onchange: "g.height = Number($event || 0)" },
          "slider:height": { label: "高度", "$value": "g.height", min: 20, max: 300, step: 5, unit: "px", onchange: "g.height = Number($event)" }
        }
      },
      "grid:results": {
        columns: 1, mdColumns: 3,
        "stat:area": { label: "面积", "$value": "g.area()", unit: "px²" },
        "stat:ratio": { label: "宽高比", "$value": "g.ratio()" },
        "badge:orientation": {
          "$label": "g.isLandscape() ? '横向' : g.width === g.height ? '正方形' : '纵向'",
          "$tone": "g.isLandscape() ? 'info' : g.width === g.height ? 'success' : 'warning'"
        }
      },
      "formula:areaEq": { "$tex": "'\\\\text{面积} = ' + g.width + ' \\\\times ' + g.height + ' = ' + g.area() + '\\\\text{ px}^2'" },
      "callout:tip": {
        "$tone": "g.isLandscape() ? 'info' : 'warning'",
        "$text": "g.isLandscape() ? '当前为横向（Landscape）。横向更适用于宽屏展示。' : '当前为纵向（Portrait）。纵向更适用于移动端阅读。'"
      },
      "callout:squareTip": {
        "$if": "g.width === g.height",
        tone: "success",
        text: "这是一个正方形！宽高完全相等。"
      }
    }
  }
}