Add 'tool' tag to nav and unit conversion tool.

astro.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from 'astro/config';
-
 import sitemap from "@astrojs/sitemap";
+import vue from "@astrojs/vue";
 
 // https://astro.build/config
 export default defineConfig({
@@ -28,13 +28,15 @@ export default defineConfig({
     }
   },
   site: 'https://lishouzhong.com',
-  integrations: [sitemap({
+  integrations: [
-    // entryLimit: 10000,
+    sitemap({
-    // customPages: [],
+      // entryLimit: 10000,
-    // filter: (page) => { },
+      // customPages: [],
-    // lastmod: new Date('2022-02-24'),
+      // filter: (page) => { },
-    // serialize(item) {
+      // lastmod: new Date('2022-02-24'),
-    //   return item;
+      // serialize(item) {
-    // }
+      //   return item;
-  })]
+      // }
+    }),
+    vue()]
 });

package.json

@@ -12,8 +12,11 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/vue": "^4.5.0",
     "astro": "^4.9.2",
+    "bignumber.js": "^9.1.2",
     "pinyin-pro": "^3.22.0",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vue": "^3.4.29"
   }
 }

src/components/Nav.astro

@@ -13,6 +13,9 @@
     <span class="category-item">
       <a class="nav-link" href="/article/translation/">翻译</a>
     </span>
+    <span class="category-item">
+      <a class="nav-link" href="/tool/">工具</a>
+    </span>
   </div>
 </div>
 

src/components/tool/ToolNav.astro

@@ -0,0 +1,16 @@
+<ul class="tool-list">
+  <li class="tool-item"><a href="/tool/unit_conversion">单位换算</a></li>
+</ul>
+
+<style>
+.tool-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.5em 0;
+}
+
+.tool-list li {
+  float: left;
+  margin: 0 16px 0 0;
+}
+</style>

src/components/tool/unit_conversion/DataUnitConversion.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computed, h, ref } from 'vue'
+import BigNumber from "bignumber.js";
+
+const unitToByte: { [name: string]: number } = {
+  "unit-k-byte": 1000,
+  "unit-m-byte": 1000 * 1000,
+  "unit-g-byte": 1000 * 1000 * 1000,
+  "unit-t-byte": 1000 * 1000 * 1000 * 1000,
+  "unit-ki-byte": 1024,
+  "unit-mi-byte": 1024 * 1024,
+  "unit-gi-byte": 1024 * 1024 * 1024,
+  "unit-ti-byte": 1024 * 1024 * 1024 * 1024,
+  "unit-byte": 1,
+  "unit-bit": 1 / 8,
+  "unit-k-bit": 1000 / 8,
+  "unit-m-bit": 1000000 / 8,
+  "unit-g-bit": 1000000000 / 8,
+  "unit-t-bit": 1000000000000 / 8,
+}
+
+let variable: { [name: keyof typeof unitToByte]: string } = {
+  "unit-k-byte": '',
+  "unit-m-byte": '',
+  "unit-g-byte": '',
+  "unit-t-byte": '',
+  "unit-ki-byte": '',
+  "unit-mi-byte": '',
+  "unit-gi-byte": '',
+  "unit-ti-byte": '',
+  "unit-byte": '',
+  "unit-bit": '',
+  "unit-k-bit": '',
+  "unit-m-bit": '',
+  "unit-g-bit": '',
+  "unit-t-bit": '',
+}
+
+const size = ref(variable);
+
+function sizeChanged(event: any, unitName: keyof typeof unitToByte) {
+  let result: { [name in keyof typeof unitToByte]: string } = Object();
+  // assign 0 to current input if nothing is passed
+  if (size.value[unitName].length === 0) result[unitName] = '0';
+  let inputedBytes = new BigNumber(unitToByte[unitName]).multipliedBy(size.value[unitName]);
+  for (const key in unitToByte) {
+    result[key] = inputedBytes.div(unitToByte[key]).toString();
+  }
+  result[unitName] = size.value[unitName];
+  for (const key in unitToByte) {
+    if (result[key] !== 'NaN') {
+      size.value[key] = result[key];
+    } else if (result[key] === 'NaN') {
+      size.value[key] = '';
+    }
+  }
+}
+
+const isMultipleOf4KiB = computed(() => {
+  let userInput = new BigNumber(size.value["unit-ki-byte"])
+  if (userInput.toNumber() === 0) return false;
+  return userInput.mod(4).toNumber() === 0 ? true : false;
+})
+</script>
+
+<template>
+  <h1>数据单位换算</h1>
+  <div class="unit-conversion-computation-area 1000-in-byte">
+    <p>1000 进制并以 Byte 计: </p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-k-byte" type="text" v-model="size['unit-k-byte']"
+        @input="sizeChanged($event, 'unit-k-byte')">
+      <span class="unit-name">KB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-m-byte" type="text" v-model="size['unit-m-byte']"
+        @input="sizeChanged($event, 'unit-m-byte')">
+      <span class="unit-name">MB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-g-byte" type="text" v-model="size['unit-g-byte']"
+        @input="sizeChanged($event, 'unit-g-byte')">
+      <span class="unit-name">GB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-t-byte" type="text" v-model="size['unit-t-byte']"
+        @input="sizeChanged($event, 'unit-t-byte')">
+      <span class="unit-name">TB</span>
+    </div>
+  </div>
+  <div class="unit-conversion-computation-area 1024-in-byte">
+    <p>1024 进制并以 Byte 计</p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-ki-byte" type="text" v-model="size['unit-ki-byte']"
+        @input="sizeChanged($event, 'unit-ki-byte')">
+      <span class="unit-name">KiB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-mi-byte" type="text" v-model="size['unit-mi-byte']"
+        @input="sizeChanged($event, 'unit-mi-byte')">
+      <span class="unit-name">MiB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-gi-byte" type="text" v-model="size['unit-gi-byte']"
+        @input="sizeChanged($event, 'unit-gi-byte')">
+      <span class="unit-name">GiB</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-ti-byte" type="text" v-model="size['unit-ti-byte']"
+        @input="sizeChanged($event, 'unit-ti-byte')">
+      <span class="unit-name">TiB</span>
+    </div>
+  </div>
+  <div class="unit-conversion-computation-area byte-bit">
+    <p>以 Byte (B) / bit (b) 计:</p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-byte" type="text" v-model="size['unit-byte']"
+        @input="sizeChanged($event, 'unit-byte')">
+      <span class="unit-name">B</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-bit" type="text" v-model="size['unit-bit']"
+        @input="sizeChanged($event, 'unit-bit')">
+      <span class="unit-name">b</span>
+    </div>
+  </div>
+  <div class="unit-conversion-computation-area 1000-in-bit">
+    <p>1000 进制并以 bit 计:</p>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-k-bit" type="text" v-model="size['unit-k-bit']"
+        @input="sizeChanged($event, 'unit-k-bit')">
+      <span class="unit-name">Kb</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-m-bit" type="text" v-model="size['unit-m-bit']"
+        @input="sizeChanged($event, 'unit-m-bit')">
+      <span class="unit-name">Mb</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-g-bit" type="text" v-model="size['unit-g-bit']"
+        @input="sizeChanged($event, 'unit-g-bit')">
+      <span class="unit-name">Gb</span>
+    </div>
+    <div class="unit-conversion-computation-node">
+      <input class="size-text" id="unit-t-bit" type="text" v-model="size['unit-t-bit']"
+        @input="sizeChanged($event, 'unit-t-bit')">
+      <span class="unit-name">Tb</span>
+    </div>
+  </div>
+  <div class="unit-conversion-computation-result">
+    <p v-show="isMultipleOf4KiB">该结果值是 4 KiB 的倍数</p>
+  </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: 130px
+}
+
+@media screen and (max-width: 395px) {
+  .unit-conversion-computation-node {
+    width: 130px;
+  }
+
+  .size-text {
+    width: 90px;
+  }
+}
+
+.unit-conversion-computation-area::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.unit-conversion-computation-result {
+  margin: 0.5em 0 0.5em 0;
+  height: 1em;
+}
+</style>

src/components/tool/unit_conversion/UnitConversionWrapper.astro

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

src/pages/tool/index.astro

@@ -0,0 +1,14 @@
+---
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import Footer from "../../components/Footer.astro";
+import Nav from "../../components/Nav.astro";
+import UnitConversionWrapper from "../../components/tool/unit_conversion/UnitConversionWrapper.astro";
+import ToolNav from "../../components/tool/ToolNav.astro";
+---
+
+<DefaultLayout title="工具 - 李守中">
+  <Nav />
+  <ToolNav />
+  <UnitConversionWrapper />
+  <Footer />
+</DefaultLayout>

src/pages/tool/unit_conversion.astro

@@ -0,0 +1,14 @@
+---
+import DefaultLayout from "../../layouts/DefaultLayout.astro";
+import Footer from "../../components/Footer.astro";
+import Nav from "../../components/Nav.astro";
+import UnitConversionWrapper from "../../components/tool/unit_conversion/UnitConversionWrapper.astro";
+import ToolNav from "../../components/tool/ToolNav.astro";
+---
+
+<DefaultLayout title="单位换算 - 李守中">
+  <Nav />
+  <ToolNav />
+  <UnitConversionWrapper />
+  <Footer />
+</DefaultLayout>

tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
 }