工业泵功率计算器公式：P(kW) = (Q × ρ × g × H) / (3600 × η)，其中Q=流量(m³/h)、ρ=液体密度(kg/m³)、H=扬程(m)、η=泵效率(0.6-0.85)。用Astro组件实现纯前端计算，支持SI/Imperial双单位，结果展示建议电机功率和安全系数说明。

在线计算工具开发：以工业泵功率计算器为例

工程师在泵选型阶段，最常见的计算需求是：给定流量、扬程和液体密度，需要配多大的电机？

这个计算不复杂，但每次手算或用 Excel 都很繁琐。如果你的网站提供一个精确好用的在线计算器，工程师会把它加进书签，下次还会来用，也会推荐给同事。

核心公式

泵轴功率（Shaft Power）：

P_shaft (kW) = (Q × ρ × g × H) / (3600 × 1000 × η_pump)

简化为常用形式：

P_shaft (kW) = (Q × ρ × H) / (367,200 × η_pump)

参数说明：

Q：流量，m³/h
ρ：液体密度，kg/m³（水=1000，化工介质根据实际情况）
H：扬程，m
η_pump：泵效率（通常 0.60–0.85，取决于泵型和工况点）

电机选配功率（考虑安全系数）：

P_motor (kW) = P_shaft / η_motor × safety_factor

η_motor：电机效率（IE3：0.90–0.95）
safety_factor：通常取 1.1–1.2（为峰值工况留余量）

Astro 计算器组件

<!-- src/components/tools/PumpPowerCalculator.astro -->
---
// 纯客户端组件，无服务器端逻辑
---

<div id="pump-calculator" class="bg-white border rounded-xl p-6 shadow-sm max-w-2xl">
  <h2 class="text-xl font-semibold mb-6">Pump Power Calculator</h2>

  <!-- 单位切换 -->
  <div class="flex gap-2 mb-6">
    <button id="unit-si" class="unit-btn active" data-unit="si">SI (m³/h, m, kW)</button>
    <button id="unit-imperial" class="unit-btn" data-unit="imperial">Imperial (GPM, ft, HP)</button>
  </div>

  <!-- 输入区 -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        Flow Rate <span id="unit-flow">(m³/h)</span>
      </label>
      <input type="number" id="flow" min="0" step="0.1" value="50"
        class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        Head <span id="unit-head">(m)</span>
      </label>
      <input type="number" id="head" min="0" step="0.5" value="30"
        class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        Liquid Density (kg/m³)
        <span class="text-gray-400 text-xs">Water = 1000</span>
      </label>
      <input type="number" id="density" min="100" max="3000" step="10" value="1000"
        class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
    </div>

    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">
        Pump Efficiency (%)
        <span class="text-gray-400 text-xs">Typical: 60–85%</span>
      </label>
      <input type="number" id="efficiency" min="30" max="95" step="1" value="75"
        class="w-full border rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
    </div>
  </div>

  <!-- 计算按钮 -->
  <button id="calculate-btn"
    class="w-full bg-blue-700 text-white font-semibold py-3 rounded-lg hover:bg-blue-800 mb-6">
    Calculate
  </button>

  <!-- 结果区 -->
  <div id="results" class="hidden bg-blue-50 border border-blue-200 rounded-lg p-4">
    <h3 class="font-semibold text-blue-900 mb-3">Calculation Results</h3>
    <div class="space-y-2">
      <div class="flex justify-between">
        <span class="text-gray-600">Shaft Power Required:</span>
        <span id="shaft-power" class="font-bold text-blue-900">— kW</span>
      </div>
      <div class="flex justify-between">
        <span class="text-gray-600">Recommended Motor Size (1.2× safety):</span>
        <span id="motor-power" class="font-bold text-green-700">— kW</span>
      </div>
      <div class="flex justify-between">
        <span class="text-gray-600">Standard Motor Size (next available):</span>
        <span id="standard-motor" class="font-bold text-green-700">— kW</span>
      </div>
    </div>
    <p id="result-note" class="text-xs text-gray-500 mt-3"></p>
  </div>
</div>

<style>
.unit-btn {
  padding: 6px 16px; border: 1px solid #d1d5db;
  border-radius: 6px; cursor: pointer; font-size: 14px;
}
.unit-btn.active { background: #1e3a5f; color: white; border-color: #1e3a5f; }
</style>

<script>
// 标准电机功率规格（IEC/NEMA，kW）
const STANDARD_MOTORS_KW = [
  0.18, 0.25, 0.37, 0.55, 0.75, 1.1, 1.5, 2.2, 3, 4, 5.5,
  7.5, 11, 15, 18.5, 22, 30, 37, 45, 55, 75, 90, 110, 132, 160, 200, 250
];

function getNextStandardMotor(kw) {
  return STANDARD_MOTORS_KW.find(m => m >= kw) || kw * 1.1;
}

// 单位转换：GPM→m³/h, ft→m
function convertToSI(flow, head, unit) {
  if (unit === 'imperial') {
    return { flow: flow * 0.2271, head: head * 0.3048 };
  }
  return { flow, head };
}

function calculate() {
  const unit = document.querySelector('.unit-btn.active').dataset.unit;
  const flowRaw = parseFloat(document.getElementById('flow').value);
  const headRaw = parseFloat(document.getElementById('head').value);
  const density = parseFloat(document.getElementById('density').value);
  const efficiency = parseFloat(document.getElementById('efficiency').value) / 100;

  if (!flowRaw || !headRaw || !density || !efficiency) return;

  const { flow, head } = convertToSI(flowRaw, headRaw, unit);

  // 轴功率计算
  const shaftPower = (flow * density * head) / (367200 * efficiency);
  // 推荐电机功率（1.2 安全系数，电机效率 0.93）
  const motorPower = shaftPower / 0.93 * 1.2;
  const standardMotor = getNextStandardMotor(motorPower);

  document.getElementById('shaft-power').textContent =
    shaftPower.toFixed(2) + ' kW';
  document.getElementById('motor-power').textContent =
    motorPower.toFixed(2) + ' kW';
  document.getElementById('standard-motor').textContent =
    standardMotor + ' kW (' + (standardMotor * 1.341).toFixed(1) + ' HP)';

  document.getElementById('result-note').textContent =
    `Based on: Q=${flow.toFixed(1)} m³/h, H=${head.toFixed(1)} m, ρ=${density} kg/m³, η=${(efficiency*100).toFixed(0)}%. ` +
    `Motor sizing includes 1.2× safety factor for peak load and IE3 motor efficiency (93%).`;

  document.getElementById('results').classList.remove('hidden');
}

// 单位切换
document.querySelectorAll('.unit-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const isImperial = btn.dataset.unit === 'imperial';
    document.getElementById('unit-flow').textContent = isImperial ? '(GPM)' : '(m³/h)';
    document.getElementById('unit-head').textContent = isImperial ? '(ft)' : '(m)';
  });
});

document.getElementById('calculate-btn').addEventListener('click', calculate);

// 实时计算
['flow', 'head', 'density', 'efficiency'].forEach(id => {
  document.getElementById(id).addEventListener('input', calculate);
});

// 页面加载时自动计算
calculate();
</script>

让工程师愿意分享的 UX 设计原则

1. 实时计算：输入数值的同时就更新结果，不需要点按钮——工程师调整参数时能立刻看到影响。

2. 提供标准电机规格：不只是给出理论计算值，还给出“下一档标准电机功率”——这才是工程师真正需要的采购依据。

3. 显示计算依据：在结果下方显示“基于：Q=50 m³/h，H=30 m，ρ=1000 kg/m³”，让工程师验证输入是否正确。

4. 单位双向支持：同时支持 SI 和 Imperial 单位，服务北美和欧洲工程师——这是很多计算工具忽略的差异。

5. 永久可用，无需注册：不要求邮箱才能使用，这会让大部分工程师直接离开。

页面文案与内链（GEO + 权重回流）

计算器页面的文案应该包含：

计算公式说明（工程师会验证你的公式是否正确）
常见液体密度参考表（水、硫酸、乙醇等）
泵效率经验值指南（不同泵型的典型效率范围）
内链到 Pillar 页："Need a pump matching these specs? View our [centrifugal pump manufacturer] page"

→ 行业实测报告 / 数据白皮书的结构与发布策略

NEXT ACTION / 下一步