This is an automated email from the ASF dual-hosted git repository. critas pushed a commit to branch fix_content in repository https://gitbox.apache.org/repos/asf/iotdb-docs.git
commit c9b06ecff5f69920455c9670e3cb03c87fffcad5 Author: CritasWang <[email protected]> AuthorDate: Fri Dec 5 17:24:30 2025 +0800 fix home display error --- pnpm-lock.yaml | 20 +- src/.vuepress/components/ResourceEvaluator.vue | 339 +++++++++++++------------ src/.vuepress/theme.ts | 1 - src/zh/ResourceEvaluator.md | 7 +- 4 files changed, 198 insertions(+), 169 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25bb1d45..c6015021 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -853,51 +853,61 @@ packages: resolution: {integrity: sha512-88fSzjC5xeH9S2Vg3rPgXJULkHcLYMkh8faix8DX4h4TIAL65ekwuQMA/g2CXq8W+NJC43V6fUpYZNjaX3+IIg==} cpu: [arm] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-wM4ztnutBqYFyvNeR7Av+reWI/enK9tDOTKNF+6Kk2Q96k9bwhDDOlnCUNRPvromlVXo04riSliMBs/Z7RteEg==} cpu: [arm] os: [linux] + libc: [musl] '@rollup/[email protected]': resolution: {integrity: sha512-9RyprECbRa9zEjXLtvvshhw4CMrRa3K+0wcp3KME0zmBe1ILmvcVHnypZ/aIDXpRyfhSYSuN4EPdCCj5Du8FIA==} cpu: [arm64] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-qTmklhCTyaJSB05S+iSovfo++EwnIEZxHkzv5dep4qoszUMX5Ca4WM4zAVUMbfdviLgCSQOu5oU8YoGk1s6M9Q==} cpu: [arm64] os: [linux] + libc: [musl] '@rollup/[email protected]': resolution: {integrity: sha512-4Qmkaps9yqmpjY5pvpkfOerYgKNUGzQpFxV6rnS7c/JfYbDSU0y6WpbbredB5cCpLFGJEqYX40WUmxMkwhWCjw==} cpu: [loong64] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-Zsrtux3PuaxuBTX/zHdLaFmcofWGzaWW1scwLU3ZbW/X+hSsFbz9wDIp6XvnT7pzYRl9MezWqEqKy7ssmDEnuQ==} cpu: [ppc64] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-aK+Zp+CRM55iPrlyKiU3/zyhgzWBxLVrw2mwiQSYJRobCURb781+XstzvA8Gkjg/hbdQFuDw44aUOxVQFycrAg==} cpu: [riscv64] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-WoKLVrY9ogmaYPXwTH326+ErlCIgMmsoRSx6bO+l68YgJnlOXhygDYSZe/qbUJCSiCiZAQ+tKm88NcWuUXqOzw==} cpu: [s390x] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-Sht4aFvmA4ToHd2vFzwMFaQCiYm2lDFho5rPcvPBT5pCdC+GwHG6CMch4GQfmWTQ1SwRKS0dhDYb54khSrjDWw==} cpu: [x64] os: [linux] + libc: [glibc] '@rollup/[email protected]': resolution: {integrity: sha512-zmmpOQh8vXc2QITsnCiODCDGXFC8LMi64+/oPpPx5qz3pqv0s6x46ps4xoycfUiVZps5PFn1gksZzo4RGTKT+A==} cpu: [x64] os: [linux] + libc: [musl] '@rollup/[email protected]': resolution: {integrity: sha512-3/q1qUsO/tLqGBaD4uXsB6coVGB3usxw3qyeVb59aArCgedSF66MPdgRStUd7vbZOsko/CgVaY5fo2vkvPLWiA==} @@ -1466,8 +1476,8 @@ packages: resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==} engines: {node: '>=6'} - [email protected]: - resolution: {integrity: sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==} + [email protected]: + resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==} [email protected]: resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==} @@ -4481,7 +4491,7 @@ snapshots: [email protected]([email protected]): dependencies: browserslist: 4.24.4 - caniuse-lite: 1.0.30001699 + caniuse-lite: 1.0.30001759 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.1.1 @@ -4515,7 +4525,7 @@ snapshots: [email protected]: dependencies: - caniuse-lite: 1.0.30001699 + caniuse-lite: 1.0.30001759 electron-to-chromium: 1.5.97 node-releases: 2.0.19 update-browserslist-db: 1.1.2([email protected]) @@ -4528,7 +4538,7 @@ snapshots: [email protected]: {} - [email protected]: {} + [email protected]: {} [email protected]: {} diff --git a/src/.vuepress/components/ResourceEvaluator.vue b/src/.vuepress/components/ResourceEvaluator.vue index ccb43738..6be37d01 100644 --- a/src/.vuepress/components/ResourceEvaluator.vue +++ b/src/.vuepress/components/ResourceEvaluator.vue @@ -22,6 +22,7 @@ import { ElButton, ElIcon, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElTo import * as Icons from "@element-plus/icons-vue"; import 'element-plus/theme-chalk/index.css'; import ConfigItem from "./ConfigItem.vue"; +import { ClientOnly } from "vuepress/client"; class Calculator { static add(...args: Array<string | number>): number { @@ -183,256 +184,274 @@ class Calculator { const totalSpaceInBytes = ref(0); const singleSpaceStorage = computed(() => { - let tmp = Calculator.toFixed(Calculator.divide(totalSpaceInBytes.value, 1024, 1024, 1024), 2); - if (tmp >= 1024) { - return Calculator.toFixed(Calculator.divide(totalSpaceInBytes.value, 1024, 1024, 1024, 1024), 2).toString() + ' TB'; - } else { - return tmp.toString() + ' GB'; - } + let tmp = Calculator.toFixed(Calculator.divide(totalSpaceInBytes.value, 1024, 1024, 1024), 2); + if (tmp >= 1024) { + return Calculator.toFixed(Calculator.divide(totalSpaceInBytes.value, 1024, 1024, 1024, 1024), 2).toString() + ' TB'; + } else { + return tmp.toString() + ' GB'; + } }); const doubleSpaceStorage = computed(() => { - let tmp = Calculator.toFixed(Calculator.divide(Calculator.multiply(totalSpaceInBytes.value, 2), 1024, 1024, 1024), 2); - if (tmp >= 1024) { - return Calculator.toFixed(Calculator.divide(Calculator.multiply(totalSpaceInBytes.value, 2), 1024, 1024, 1024, 1024), 2).toString() + ' TB'; - } else { - return tmp.toString() + ' GB'; - } + let tmp = Calculator.toFixed(Calculator.divide(Calculator.multiply(totalSpaceInBytes.value, 2), 1024, 1024, 1024), 2); + if (tmp >= 1024) { + return Calculator.toFixed(Calculator.divide(Calculator.multiply(totalSpaceInBytes.value, 2), 1024, 1024, 1024, 1024), 2).toString() + ' TB'; + } else { + return tmp.toString() + ' GB'; + } }); const configItems = ref([{ - measurementCount: null, - dataType: null, - frequency: null, - frequencyUnit: 'HZ', - averageStringLength: null, + measurementCount: null, + dataType: null, + frequency: null, + frequencyUnit: 'HZ', + averageStringLength: null, }]); const storeInfo = ref({ - storePeriod: null, - storePeriodUnit: 'DAY', - compressionRatio: null, + storePeriod: null, + storePeriodUnit: 'DAY', + compressionRatio: 10, }); const addConfigItem = () => { - configItems.value.push({ - measurementCount: null, - dataType: null, - frequency: null, - frequencyUnit: 'HZ', - averageStringLength: null, - }); + configItems.value.push({ + measurementCount: null, + dataType: null, + frequency: null, + frequencyUnit: 'HZ', + averageStringLength: null, + }); }; const removeConfigItem = (index: number) => { - if (configItems.value.length > 1) { - configItems.value.splice(index, 1); - } else { - alert('至少保留一个配置项'); - } + if (configItems.value.length > 1) { + configItems.value.splice(index, 1); + } else { + alert('至少保留一个配置项'); + } }; const dataTypeBytes: Record<string, number> = { - 'BOOLEAN': 9, - 'INT32': 12, - 'INT64': 16, - 'FLOAT': 12, - 'DOUBLE': 16, - 'TEXT': 8, - 'STRING': 8, - 'BLOB': 8, - 'TIMESTAMP': 16, - 'DATATIME': 12, + 'BOOLEAN': 9, + 'INT32': 12, + 'INT64': 16, + 'FLOAT': 12, + 'DOUBLE': 16, + 'TEXT': 8, + 'STRING': 8, + 'BLOB': 8, + 'TIMESTAMP': 16, + 'DATATIME': 12, }; const storeDurationInDays: Record<string, number> = { - 'DAY': 1, - 'MONTH': 30, - 'YEAR': 365, + 'DAY': 1, + 'MONTH': 30, + 'YEAR': 365, }; const samplingPeriodInSec: Record<string, number> = { - 'HZ': 1, - 'SECOND': 1, - 'MINUTE': 60, - 'HOUR': 3600, - 'DAY': 86400, + 'HZ': 1, + 'SECOND': 1, + 'MINUTE': 60, + 'HOUR': 3600, + 'DAY': 86400, } const calculateSpacePrecise = () => { - let totalSpace = 0; - configItems.value.forEach((item, index) => { - if (item.measurementCount && item.frequency && item.dataType && item.frequencyUnit) { - if (storeInfo.value.storePeriod && storeInfo.value.compressionRatio) { - let measurementCount = item.measurementCount; - let dataTypeSize = dataTypeBytes[item.dataType]; - if (item.dataType === 'STRING' || item.dataType === 'TEXT' || item.dataType === 'BLOB') { - if (item.averageStringLength === null) { - alert('请填写字符串平均长度'); - return; - } - dataTypeSize = Calculator.add(dataTypeSize, Number(item.averageStringLength)); - } - let samplingPeriod = Calculator.multiply(samplingPeriodInSec[item.frequencyUnit], item.frequency); - let samplePerDay = item.frequencyUnit === 'HZ' ? Calculator.multiply(86400, item.frequency) : Calculator.divide(86400, samplingPeriod); - let storePeriodInDay = Calculator.multiply(storeDurationInDays[storeInfo.value.storePeriodUnit], Number(storeInfo.value.storePeriod)); - totalSpace = Calculator.add(totalSpace, Calculator.divide(Calculator.multiply(measurementCount, dataTypeSize, samplePerDay, storePeriodInDay), storeInfo.value.compressionRatio)); - } else { - alert('请完整填写存储周期和压缩比'); - return; - } - } else { - alert(`请完整填写配置项 ${index + 1} 的数据`); + let totalSpace = 0; + configItems.value.forEach((item, index) => { + if (item.measurementCount && item.frequency && item.dataType && item.frequencyUnit) { + if (storeInfo.value.storePeriod && storeInfo.value.compressionRatio) { + let measurementCount = item.measurementCount; + let dataTypeSize = dataTypeBytes[item.dataType]; + if (item.dataType === 'STRING' || item.dataType === 'TEXT' || item.dataType === 'BLOB') { + if (item.averageStringLength === null) { + alert('请填写字符串平均长度'); return; + } + dataTypeSize = Calculator.add(dataTypeSize, Number(item.averageStringLength)); } - }); - totalSpaceInBytes.value = totalSpace; + let samplingPeriod = Calculator.multiply(samplingPeriodInSec[item.frequencyUnit], item.frequency); + let samplePerDay = item.frequencyUnit === 'HZ' ? Calculator.multiply(86400, item.frequency) : Calculator.divide(86400, samplingPeriod); + let storePeriodInDay = Calculator.multiply(storeDurationInDays[storeInfo.value.storePeriodUnit], Number(storeInfo.value.storePeriod)); + totalSpace = Calculator.add(totalSpace, Calculator.divide(Calculator.multiply(measurementCount, dataTypeSize, samplePerDay, storePeriodInDay), storeInfo.value.compressionRatio)); + } else { + alert('请完整填写存储周期和压缩比'); + return; + } + } else { + alert(`请完整填写配置项 ${index + 1} 的数据`); + return; + } + }); + totalSpaceInBytes.value = totalSpace; } </script> <template> - <div class="content-area"> - <div class="title">IoTDB 磁盘资源评估器</div> - <div v-for="(item, index) in configItems" :key="index" class="relative-box"> - <el-button class="add-button" @click="addConfigItem"> - <el-icon><Icons.Plus /></el-icon> - </el-button> - <el-button class="remove-button" @click="removeConfigItem(index)" :disabled="configItems.length <= 1"> - <el-icon><Icons.Minus /></el-icon> - </el-button> - <ConfigItem :index="index + 1" v-model:info="configItems[index]" /> - </div> - <div class="outer-box"> - <el-form :inline="true" class="store-row"> + <ClientOnly> + <div class="calc-content-area"> + <div class="title">IoTDB 磁盘资源评估器</div> + <div v-for="(item, index) in configItems" :key="index" class="relative-box"> + <el-button class="add-button" @click="addConfigItem"> + <el-icon> + <Icons.Plus /> + </el-icon> + </el-button> + <el-button class="remove-button" @click="removeConfigItem(index)" :disabled="configItems.length <= 1"> + <el-icon> + <Icons.Minus /> + </el-icon> + </el-button> + <ConfigItem :index="index + 1" v-model:info="configItems[index]" /> + </div> + <div class="outer-box"> + <el-form :inline="true" class="store-row"> <el-form-item label="存储周期：" label-width="90px"> - <el-input v-model="storeInfo.storePeriod" placeholder="请输入存储周期" type="number" min="0" style="width: 205px;"></el-input> - <el-select v-model="storeInfo.storePeriodUnit" style="width: 80px;"> - <el-option label="天" value="DAY"></el-option> - <el-option label="月" value="MONTH"></el-option> - <el-option label="年" value="YEAR"></el-option> - </el-select> + <el-input v-model="storeInfo.storePeriod" placeholder="请输入存储周期" type="number" min="0" + style="width: 205px;"></el-input> + <el-select v-model="storeInfo.storePeriodUnit" style="width: 80px;"> + <el-option label="天" value="DAY"></el-option> + <el-option label="月" value="MONTH"></el-option> + <el-option label="年" value="YEAR"></el-option> + </el-select> </el-form-item> - <el-form-item label-width="130px" > + <el-form-item label-width="130px"> <template #label> 预估压缩比： <client-only> <el-tooltip placement="top" effect="light" content="原始数据与压缩后数据的体积比值（压缩比 = 原始大小 / 压缩后大小）"> - <el-icon color=""><Icons.QuestionFilled /></el-icon> + <el-icon color=""> + <Icons.QuestionFilled /> + </el-icon> </el-tooltip> </client-only> </template> - <el-input v-model="storeInfo.compressionRatio" type="number" min="0" placeholder="请输入预估压缩比" style="width: 180px;"></el-input> + <el-input v-model="storeInfo.compressionRatio" type="number" min="0" placeholder="请输入预估压缩比" + style="width: 180px;"></el-input> </el-form-item> - </el-form> - </div> - <div class="button-row"> - <el-button class="calculate-button" color="#4c59c7" @click="calculateSpacePrecise()">计算结果</el-button> - </div> - <div class="result-row"> - <el-form :inline="true"> - <el-form-item label-width="200px"> - <template #label> - 每节点共需磁盘空间： - <client-only> - <el-tooltip placement="top" effect="light"> - <template #content> - <ul> - <li>双活为两节点单副本（每台机器按单副本规划资源）</li> - <li>三节点分布式集群推荐使用双副本（每台机器按双副本规划资源）</li> - </ul> - </template> - <el-icon><Icons.QuestionFilled /></el-icon> - </el-tooltip> - </client-only> - </template> - </el-form-item> - - <el-form-item label="单副本空间：" label-width="150px"> - <div class="result-text">{{ singleSpaceStorage }}</div> - </el-form-item> - <el-form-item label="双副本空间：" label-width="150px"> - <div class="result-text">{{ doubleSpaceStorage }}</div> - </el-form-item> - </el-form> + </el-form> + </div> + <div class="button-row"> + <el-button class="calculate-button" color="#4c59c7" @click="calculateSpacePrecise()">计算结果</el-button> + </div> + <div class="result-row"> + <el-form :inline="true"> + <el-form-item label-width="200px"> + <template #label> + 每节点共需磁盘空间： + <client-only> + <el-tooltip placement="top" effect="light"> + <template #content> + <ul> + <li>双活为两节点单副本（每台机器按单副本规划资源）</li> + <li>三节点分布式集群推荐使用双副本（每台机器按双副本规划资源）</li> + </ul> + </template> + <el-icon> + <Icons.QuestionFilled /> + </el-icon> + </el-tooltip> + </client-only> + </template> + </el-form-item> + + <el-form-item label="单副本空间：" label-width="150px"> + <div class="result-text">{{ singleSpaceStorage }}</div> + </el-form-item> + <el-form-item label="双副本空间：" label-width="150px"> + <div class="result-text">{{ doubleSpaceStorage }}</div> + </el-form-item> + </el-form> + </div> </div> - </div> + </ClientOnly> </template> -<style> -#main-content .theme-hope-content { - padding: 0; -} - -header .vp-hero-info { - visibility: hidden; +<style lang="scss"> +.calc-page { + display: flex; + justify-content: center; + margin-top: 50px; + margin-bottom: 50px; + + .vp-page-title, + .vp-page-meta, + .vp-breadcrumb { + display: none; + } } -#main-content .vp-hero-info-wrapper { - visibility: hidden; +.theme-hope-content { + width: 1230px; + max-width: 100% !important; + overflow: auto; } -.content-area { - width: 1230px; - margin-left: -35px; -} +.calc-content-area { + width: 1230px; -.title { + .title { text-align: center; font-size: 28px; font-weight: bold; margin-bottom: 40px; -} + } -.relative-box { + .relative-box { position: relative; -} + } -.add-button { + .add-button { background-color: transparent; border: none; position: absolute; right: 48px; top: 8px; -} + } -.remove-button { + .remove-button { background-color: transparent; border: none; position: absolute; right: 8px; top: 8px; -} + } -.store-row { + .store-row { display: flex; margin-top: 20px; margin-bottom: 20px; -} + } -.button-row { + .button-row { display: flex; justify-content: center; margin-top: 50px; margin-bottom: 30px; -} + } -.calculate-button { - padding: 20px 30px; -} + .calculate-button { + padding: 20px 30px; + } -.result-row { + .result-row { display: flex; justify-content: space-evenly; background-color: #f2f5fc; border-radius: 15px; padding: 30px; margin-bottom: 50px; -} + } -.result-text { + .result-text { color: #4c59c7; font-weight: bold; + } } </style> \ No newline at end of file diff --git a/src/.vuepress/theme.ts b/src/.vuepress/theme.ts index 103997d6..b7ae2c21 100644 --- a/src/.vuepress/theme.ts +++ b/src/.vuepress/theme.ts @@ -19,7 +19,6 @@ import { hopeTheme } from 'vuepress-theme-hope'; import { enNavbar, zhNavbar } from './navbar/index.js'; import { enSidebar, zhSidebar } from './sidebar/index.js'; -import { error } from 'vuepress/utils'; export default hopeTheme( { diff --git a/src/zh/ResourceEvaluator.md b/src/zh/ResourceEvaluator.md index e16bc100..027885c1 100644 --- a/src/zh/ResourceEvaluator.md +++ b/src/zh/ResourceEvaluator.md @@ -1,7 +1,8 @@ --- -home: true -heroText: '' +toc: false +containerClass: 'calc-page' --- + <!-- Licensed to the Apache Software Foundation (ASF) under one @@ -26,4 +27,4 @@ heroText: '' <script setup> import ResourceEvaluator from '@source/.vuepress/components/ResourceEvaluator.vue' -</script> \ No newline at end of file +</script>
