Add weight conversion to unit conversion tool.

src/components/tool/unit_conversion/UnitConversionWrapper.astro

@@ -1,5 +1,8 @@
 ---
 import DataUnitConversion from "./DataUnitConversion.vue";
+import WeightConversion from "./WeightConversion.vue";
 ---
 
 <DataUnitConversion client:load />
+
+<WeightConversion client:load />

src/components/tool/unit_conversion/WeightConversion.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed, ref } from 'vue';
+import BigNumber from "bignumber.js";
+
+/**
+ * @typedef {string} UnitNameStr
+ */
+
+/**
+ * @enum {UnitNameStr}
+ */
+const twToMetricUnitName = Object.freeze({
+  JIN: "jin",
+  LIANG: "liang",
+  QIAN: "qian",
+  FEN: "fen",
+  GRAM: "gram",
+  KILOGRAM: "kilogram"
+})
+
+/**
+ * @enum {number}
+ */
+const twToMetricUnitNameToWeight = Object.freeze({
+  [twToMetricUnitName.JIN]: 600,
+  [twToMetricUnitName.LIANG]: 600 / 16,
+  [twToMetricUnitName.QIAN]: 600 / 16 / 10,
+  [twToMetricUnitName.FEN]: 600 / 16 / 10 / 10,
+  [twToMetricUnitName.GRAM]: 1,
+  [twToMetricUnitName.KILOGRAM]: 1 * 1000,
+})
+
+const weight = ref({
+  [twToMetricUnitName.JIN]: '',
+  [twToMetricUnitName.LIANG]: '',
+  [twToMetricUnitName.QIAN]: '',
+  [twToMetricUnitName.FEN]: '',
+  [twToMetricUnitName.GRAM]: '',
+  [twToMetricUnitName.KILOGRAM]: '',
+});
+
+/**
+ * Change ref variable when user inputs some characters.
+ * @param {UnitNameStr} unitName 
+ * @returns {void}
+ */
+function weightChanged(unitName) {
+  /**
+   * @type {object.<UnitNameStr, string>}
+   */
+  let result = {};
+  // assign 0 to current input if nothing is passed
+  if (weight.value[unitName].length === 0) result[unitName] = '0';
+  let inputedGram = new BigNumber(twToMetricUnitNameToWeight[unitName]).multipliedBy(weight.value[unitName]);
+  for (const key in twToMetricUnitNameToWeight) {
+    result[key] = inputedGram.div(twToMetricUnitNameToWeight[key]).toString();
+  }
+  result[unitName] = weight.value[unitName];
+  for (const key in twToMetricUnitNameToWeight) {
+    if (result[key] !== 'NaN') {
+      weight.value[key] = result[key];
+    } else if (result[key] === 'NaN') {
+      weight.value[key] = '';
+    }
+  }
+}
+</script>
+
+<template>
+  <h1>重量换算</h1>
+  <div class="unit-conversion-computation-area metric">
+    <p>公制重量:</p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.KILOGRAM" type="text"
+        v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)">
+      <span class="unit-name">千克</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.GRAM" type="text" v-model="weight[twToMetricUnitName.GRAM]"
+        @input="weightChanged(twToMetricUnitName.GRAM)">
+      <span class="unit-name">克</span>
+    </div>
+  </div>
+  <div class="unit-conversion-computation-area tw">
+    <p>台湾制重量:</p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.JIN" type="text" v-model="weight[twToMetricUnitName.JIN]"
+        @input="weightChanged(twToMetricUnitName.JIN)">
+      <span class="unit-name">斤</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.LIANG" type="text" v-model="weight[twToMetricUnitName.LIANG]"
+        @input="weightChanged(twToMetricUnitName.LIANG)">
+      <span class="unit-name">两</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.QIAN" type="text" v-model="weight[twToMetricUnitName.QIAN]"
+        @input="weightChanged(twToMetricUnitName.QIAN)">
+      <span class="unit-name">钱</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" :id="twToMetricUnitName.FEN" type="text" v-model="weight[twToMetricUnitName.FEN]"
+        @input="weightChanged(twToMetricUnitName.FEN)">
+      <span class="unit-name">分</span>
+    </div>
+  </div>
+</template>
+
+<style>
+h1,
+p,
+.unit-conversion-computation-node {
+  margin: 0.5em 0;
+}
+
+.unit-conversion-computation-node {
+  float: left;
+  width: 170px;
+  margin: 0 8px 0 0;
+}
+
+.size-text {
+  margin: 0 6px 0 0;
+  width: 115px
+}
+
+@media screen and (max-width: 395px) {
+  .unit-conversion-computation-node {
+    width: 130px;
+  }
+
+  .size-text {
+    width: 85px;
+  }
+}
+
+.unit-conversion-computation-area::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.unit-conversion-computation-result {
+  margin: 0.5em 0 0.5em 0;
+  height: 1em;
+}
+</style>