Skip to content

Commit 560916e

Browse files
CritasWangCritasWang
committed
fix home display error (apache#919)
1 parent c7d1822 commit 560916e

3 files changed

Lines changed: 152 additions & 131 deletions

File tree

‎pnpm-lock.yaml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/.vuepress/components/ResourceEvaluator.vue‎

Lines changed: 147 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { ElButton, ElIcon, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElTo
2222
import * as Icons from "@element-plus/icons-vue";
2323
import 'element-plus/theme-chalk/index.css';
2424
import ConfigItem from "./ConfigItem.vue";
25+
import { ClientOnly } from "vuepress/client";
2526
2627
class Calculator {
2728
static add(...args: Array<string | number>): number {
@@ -210,7 +211,7 @@ const configItems = ref([{
210211
const storeInfo = ref({
211212
storePeriod: null,
212213
storePeriodUnit: 'DAY',
213-
compressionRatio: null,
214+
compressionRatio: 10,
214215
});
215216
216217
const addConfigItem = () => {
@@ -293,145 +294,164 @@ const calculateSpacePrecise = () => {
293294
</script>
294295

295296
<template>
296-
<div class="content-area">
297-
<div class="title">TimechoDB 磁盘资源评估器</div>
298-
<div v-for="(item, index) in configItems" :key="index" class="relative-box">
299-
<el-button class="add-button" @click="addConfigItem">
300-
<el-icon>
301-
<Icons.Plus />
302-
</el-icon>
303-
</el-button>
304-
<el-button class="remove-button" @click="removeConfigItem(index)" :disabled="configItems.length <= 1">
305-
<el-icon>
306-
<Icons.Minus />
307-
</el-icon>
308-
</el-button>
309-
<ConfigItem :index="index + 1" v-model:info="configItems[index]" />
297+
<ClientOnly>
298+
<div class="calc-content-area">
299+
<div class="title">TimechoDB 磁盘资源评估器</div>
300+
<div v-for="(item, index) in configItems" :key="index" class="relative-box">
301+
<el-button class="add-button" @click="addConfigItem">
302+
<el-icon>
303+
<Icons.Plus />
304+
</el-icon>
305+
</el-button>
306+
<el-button class="remove-button" @click="removeConfigItem(index)" :disabled="configItems.length <= 1">
307+
<el-icon>
308+
<Icons.Minus />
309+
</el-icon>
310+
</el-button>
311+
<ConfigItem :index="index + 1" v-model:info="configItems[index]" />
312+
</div>
313+
<div class="outer-box">
314+
<el-form :inline="true" class="store-row">
315+
<el-form-item label="存储周期：" label-width="90px">
316+
<el-input v-model="storeInfo.storePeriod" placeholder="请输入存储周期" type="number" min="0"
317+
style="width: 205px;"></el-input>
318+
<el-select v-model="storeInfo.storePeriodUnit" style="width: 80px;">
319+
<el-option label="天" value="DAY"></el-option>
320+
<el-option label="月" value="MONTH"></el-option>
321+
<el-option label="年" value="YEAR"></el-option>
322+
</el-select>
323+
</el-form-item>
324+
<el-form-item label-width="130px">
325+
<template #label>
326+
预估压缩比：
327+
<client-only>
328+
<el-tooltip placement="top" effect="light" content="原始数据与压缩后数据的体积比值（压缩比 = 原始大小 / 压缩后大小）">
329+
<el-icon color="">
330+
<Icons.QuestionFilled />
331+
</el-icon>
332+
</el-tooltip>
333+
</client-only>
334+
</template>
335+
<el-input v-model="storeInfo.compressionRatio" type="number" min="0" placeholder="请输入预估压缩比"
336+
style="width: 180px;"></el-input>
337+
</el-form-item>
338+
</el-form>
339+
</div>
340+
<div class="button-row">
341+
<el-button class="calculate-button" color="#4c59c7" @click="calculateSpacePrecise()">计算结果</el-button>
342+
</div>
343+
<div class="result-row">
344+
<el-form :inline="true">
345+
<el-form-item label-width="200px">
346+
<template #label>
347+
每节点共需磁盘空间：
348+
<client-only>
349+
<el-tooltip placement="top" effect="light">
350+
<template #content>
351+
<ul>
352+
<li>双活为两节点单副本（每台机器按单副本规划资源）</li>
353+
<li>三节点分布式集群推荐使用双副本（每台机器按双副本规划资源）</li>
354+
</ul>
355+
</template>
356+
<el-icon>
357+
<Icons.QuestionFilled />
358+
</el-icon>
359+
</el-tooltip>
360+
</client-only>
361+
</template>
362+
</el-form-item>
363+
364+
<el-form-item label="单副本空间：" label-width="150px">
365+
<div class="result-text">{{ singleSpaceStorage }}</div>
366+
</el-form-item>
367+
<el-form-item label="双副本空间：" label-width="150px">
368+
<div class="result-text">{{ doubleSpaceStorage }}</div>
369+
</el-form-item>
370+
</el-form>
371+
</div>
310372
</div>
311-
<div class="outer-box">
312-
<el-form :inline="true" class="store-row">
313-
<el-form-item label="存储周期：" label-width="90px">
314-
<el-input v-model="storeInfo.storePeriod" placeholder="请输入存储周期" type="number" min="0"
315-
style="width: 205px;"></el-input>
316-
<el-select v-model="storeInfo.storePeriodUnit" style="width: 80px;">
317-
<el-option label="天" value="DAY"></el-option>
318-
<el-option label="月" value="MONTH"></el-option>
319-
<el-option label="年" value="YEAR"></el-option>
320-
</el-select>
321-
</el-form-item>
322-
<el-form-item label-width="130px">
323-
<template #label>
324-
预估压缩比：
325-
<client-only>
326-
<el-tooltip placement="top" effect="light" content="原始数据与压缩后数据的体积比值（压缩比 = 原始大小 / 压缩后大小）">
327-
<el-icon color="">
328-
<Icons.QuestionFilled />
329-
</el-icon>
330-
</el-tooltip>
331-
</client-only>
332-
</template>
333-
<el-input v-model="storeInfo.compressionRatio" type="number" min="0" placeholder="请输入预估压缩比"
334-
style="width: 180px;"></el-input>
335-
</el-form-item>
336-
</el-form>
337-
</div>
338-
<div class="button-row">
339-
<el-button class="calculate-button" color="#4c59c7" @click="calculateSpacePrecise()">计算结果</el-button>
340-
</div>
341-
<div class="result-row">
342-
<el-form :inline="true">
343-
<el-form-item label-width="200px">
344-
<template #label>
345-
每节点共需磁盘空间：
346-
<client-only>
347-
<el-tooltip placement="top" effect="light">
348-
<template #content>
349-
<ul>
350-
<li>双活为两节点单副本（每台机器按单副本规划资源）</li>
351-
<li>三节点分布式集群推荐使用双副本（每台机器按双副本规划资源）</li>
352-
</ul>
353-
</template>
354-
<el-icon>
355-
<Icons.QuestionFilled />
356-
</el-icon>
357-
</el-tooltip>
358-
</client-only>
359-
</template>
360-
</el-form-item>
361-
362-
<el-form-item label="单副本空间：" label-width="150px">
363-
<div class="result-text">{{ singleSpaceStorage }}</div>
364-
</el-form-item>
365-
<el-form-item label="双副本空间：" label-width="150px">
366-
<div class="result-text">{{ doubleSpaceStorage }}</div>
367-
</el-form-item>
368-
</el-form>
369-
</div>
370-
</div>
373+
</ClientOnly>
371374
</template>
372375

373-
<style>
374-
.content-area {
375-
width: 1230px;
376-
margin: 0 auto;
377-
padding-top: 50px;
378-
}
376+
<style lang="scss">
377+
.calc-page {
378+
display: flex;
379+
justify-content: center;
380+
margin-top: 50px;
381+
margin-bottom: 50px;
379382
380-
.title {
381-
text-align: center;
382-
font-size: 28px;
383-
font-weight: bold;
384-
margin-bottom: 40px;
383+
.vp-page-title,
384+
.vp-page-meta,
385+
.vp-breadcrumb {
386+
display: none;
387+
}
385388
}
386389
387-
.relative-box {
388-
position: relative;
390+
.theme-hope-content {
391+
width: 1230px;
392+
max-width: 100% !important;
393+
overflow: auto;
389394
}
390395
391-
.add-button {
392-
background-color: transparent;
393-
border: none;
394-
position: absolute;
395-
right: 48px;
396-
top: 8px;
397-
}
396+
.calc-content-area {
397+
width: 1230px;
398398
399-
.remove-button {
400-
background-color: transparent;
401-
border: none;
402-
position: absolute;
403-
right: 8px;
404-
top: 8px;
405-
}
399+
.title {
400+
text-align: center;
401+
font-size: 28px;
402+
font-weight: bold;
403+
margin-bottom: 40px;
404+
}
406405
407-
.store-row {
408-
display: flex;
409-
margin-top: 20px;
410-
margin-bottom: 20px;
411-
}
406+
.relative-box {
407+
position: relative;
408+
}
412409
413-
.button-row {
414-
display: flex;
415-
justify-content: center;
416-
margin-top: 50px;
417-
margin-bottom: 30px;
418-
}
410+
.add-button {
411+
background-color: transparent;
412+
border: none;
413+
position: absolute;
414+
right: 48px;
415+
top: 8px;
416+
}
419417
420-
.calculate-button {
421-
padding: 20px 30px;
422-
}
418+
.remove-button {
419+
background-color: transparent;
420+
border: none;
421+
position: absolute;
422+
right: 8px;
423+
top: 8px;
424+
}
423425
424-
.result-row {
425-
display: flex;
426-
justify-content: space-evenly;
427-
background-color: #f2f5fc;
428-
border-radius: 15px;
429-
padding: 30px;
430-
margin-bottom: 50px;
431-
}
426+
.store-row {
427+
display: flex;
428+
margin-top: 20px;
429+
margin-bottom: 20px;
430+
}
432431
433-
.result-text {
434-
color: #4c59c7;
435-
font-weight: bold;
432+
.button-row {
433+
display: flex;
434+
justify-content: center;
435+
margin-top: 50px;
436+
margin-bottom: 30px;
437+
}
438+
439+
.calculate-button {
440+
padding: 20px 30px;
441+
}
442+
443+
.result-row {
444+
display: flex;
445+
justify-content: space-evenly;
446+
background-color: #f2f5fc;
447+
border-radius: 15px;
448+
padding: 30px;
449+
margin-bottom: 50px;
450+
}
451+
452+
.result-text {
453+
color: #4c59c7;
454+
font-weight: bold;
455+
}
436456
}
437457
</style>

‎src/zh/ResourceEvaluator.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
2-
home: true
3-
heroText: ''
2+
toc: false
3+
containerClass: 'calc-page'
44
---
5+
56
<!--
67
78
Licensed to the Apache Software Foundation (ASF) under one
@@ -26,4 +27,4 @@ heroText: ''
2627

2728
<script setup>
2829
import ResourceEvaluator from '@source/.vuepress/components/ResourceEvaluator.vue'
29-
</script>
30+
</script>

0 commit comments

Comments
 (0)