Add 'tool' tag to nav and unit conversion tool.
This commit is contained in:
parent
740fc03778
commit
a643397716
@ -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,7 +28,8 @@ export default defineConfig({
|
||||
}
|
||||
},
|
||||
site: 'https://lishouzhong.com',
|
||||
integrations: [sitemap({
|
||||
integrations: [
|
||||
sitemap({
|
||||
// entryLimit: 10000,
|
||||
// customPages: [],
|
||||
// filter: (page) => { },
|
||||
@ -36,5 +37,6 @@ export default defineConfig({
|
||||
// serialize(item) {
|
||||
// return item;
|
||||
// }
|
||||
})]
|
||||
}),
|
||||
vue()]
|
||||
});
|
||||
970
package-lock.json
generated
970
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
16
src/components/tool/ToolNav.astro
Normal file
16
src/components/tool/ToolNav.astro
Normal file
@ -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>
|
||||
193
src/components/tool/unit_conversion/DataUnitConversion.vue
Normal file
193
src/components/tool/unit_conversion/DataUnitConversion.vue
Normal file
@ -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>
|
||||
@ -0,0 +1,5 @@
|
||||
---
|
||||
import DataUnitConversion from "./DataUnitConversion.vue";
|
||||
---
|
||||
|
||||
<DataUnitConversion client:load />
|
||||
14
src/pages/tool/index.astro
Normal file
14
src/pages/tool/index.astro
Normal file
@ -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>
|
||||
14
src/pages/tool/unit_conversion.astro
Normal file
14
src/pages/tool/unit_conversion.astro
Normal file
@ -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>
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict"
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user