ld/ld-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
liding 2024-06-20 10:05:29 +08:00
parent 740fc03778
commit a643397716
10 changed files with 1164 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
astro.config.mjs
View File

@ -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({
// entryLimit: 10000,
// customPages: [],
// filter: (page) => { },
// lastmod: new Date('2022-02-24'),
// serialize(item) {
// return item;
// }
})]
integrations: [
sitemap({
// entryLimit: 10000,
// customPages: [],
// filter: (page) => { },
// lastmod: new Date('2022-02-24'),
// serialize(item) {
// return item;
// }
}),
vue()]
});

970
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -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"
}
}

3
src/components/Nav.astro
View File

@ -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
View 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
View 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>

5
src/components/tool/unit_conversion/UnitConversionWrapper.astro Normal file
View File

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

14
src/pages/tool/index.astro Normal file
View 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
View 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>

5
tsconfig.json
View File

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