update

2026-05-08 15:16:04 +08:00
parent 042b626ccb
commit 507fb9789a
71 changed files with 14944 additions and 0 deletions
@@ -0,0 +1,109 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="hero-panel compact page-header-compact">
+    <div class="hero-copy">
+        <p class="eyebrow">Fuel Chart 工具化</p>
+        <h1>燃料体积 / 质量快速换算</h1>
+        <p class="hero-text">
+            系数直接来自工作簿第二行。输入升数可换算吨位，输入吨位可反推不同燃料对应的体积。
+        </p>
+    </div>
+</section>
+
+<section class="content-grid fuel-layout">
+    <article class="panel">
+        <div class="panel-heading">
+            <p class="eyebrow">换算输入</p>
+            <h2>输入一个值</h2>
+        </div>
+
+        <form id="converter-form" class="converter-form">
+            <label class="field-label" for="mode">换算方向</label>
+            <select id="mode" name="mode">
+                <option value="volume">体积 L -> 质量 t</option>
+                <option value="mass">质量 t -> 体积 L</option>
+            </select>
+
+            <label class="field-label" for="value">数值</label>
+            <input id="value" name="value" type="number" min="0.000001" step="any" value="75" required>
+
+            <button class="primary-button" type="submit">执行换算</button>
+            <p id="form-error" class="form-error" hidden></p>
+        </form>
+    </article>
+
+    <article class="panel panel-wide">
+        <div class="panel-heading">
+            <p class="eyebrow">换算结果</p>
+            <h2>输出列表</h2>
+        </div>
+
+        <div id="result-summary" class="result-summary">输入 75 t 或 75 L 后，这里会显示结果。</div>
+        <div id="result-table" class="result-table"></div>
+    </article>
+</section>
+
+<section class="panel">
+    <div class="panel-heading">
+        <p class="eyebrow">当前系数</p>
+        <h2>每升对应吨位</h2>
+    </div>
+    <div class="factor-grid">
+        {% for factor in fuel_factors %}
+        <article class="factor-card">
+            <h3>{{ factor.fuel }}</h3>
+            <p>{{ factor.tonnes_per_liter }} t / L</p>
+        </article>
+        {% endfor %}
+    </div>
+</section>
+
+<script>
+const form = document.getElementById("converter-form");
+const modeField = document.getElementById("mode");
+const valueField = document.getElementById("value");
+const resultSummary = document.getElementById("result-summary");
+const resultTable = document.getElementById("result-table");
+const formError = document.getElementById("form-error");
+const endpoint = "{{ url_for('api.convert_fuel') }}";
+
+async function renderResults(mode, value) {
+    formError.hidden = true;
+    const query = new URLSearchParams({ mode, value }).toString();
+    const response = await fetch(`${endpoint}?${query}`);
+    const payload = await response.json();
+
+    if (!response.ok) {
+        throw new Error(payload.error || "换算失败");
+    }
+
+    const outputUnit = payload.results[0]?.unit || "";
+    resultSummary.textContent = `输入 ${payload.input_value} ${payload.input_unit}，输出单位 ${outputUnit}`;
+    resultTable.innerHTML = payload.results
+        .map((item) => `
+            <div class="result-row">
+                <span>${item.fuel}</span>
+                <strong>${item.value}</strong>
+                <span>${item.unit}</span>
+            </div>
+        `)
+        .join("");
+}
+
+form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    try {
+        await renderResults(modeField.value, valueField.value);
+    } catch (error) {
+        formError.hidden = false;
+        formError.textContent = error.message;
+    }
+});
+
+renderResults(modeField.value, valueField.value).catch((error) => {
+    formError.hidden = false;
+    formError.textContent = error.message;
+});
+</script>
+{% endblock %}