style: Adjust memo style (#11793)

This commit is contained in:
ssongliu
2026-02-05 10:32:37 +08:00
committed by GitHub
parent 35ea1a1d6c
commit 5209db3abc
+42 -68
View File
@@ -165,7 +165,6 @@
</el-col>
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
<el-carousel
v-if="rightCard === 'server'"
class="my-carousel"
:key="simpleNodes.length"
height="368px"
@@ -175,9 +174,6 @@
<el-carousel-item key="systemInfo">
<CardWithHeader :header="$t('home.systemInfo')">
<template #header-r>
<el-tooltip :content="$t('home.memo')" placement="top">
<el-button class="h-button-setting" @click="showMemoCard" link icon="Management" />
</el-tooltip>
<el-tooltip :content="$t('commons.button.refresh')" placement="top">
<el-button class="h-button-setting" @click="refreshDashboard" link icon="Refresh" />
</el-tooltip>
@@ -280,13 +276,50 @@
</template>
</CardWithHeader>
</el-carousel-item>
<el-carousel-item key="memoInfo">
<CardWithHeader :header="$t('home.memo')" class="memo-card">
<template #header-r>
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
</el-tooltip>
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
<el-button
class="h-button-setting"
@click="saveMemo"
link
icon="Check"
:loading="memoSaving"
/>
</el-tooltip>
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
</el-tooltip>
</template>
<template #body>
<el-scrollbar height="286px">
<div class="memo-container ml-5 mr-5">
<el-input
v-if="memoEditing"
v-model="memoEditContent"
type="textarea"
:rows="10"
:maxlength="500"
show-word-limit
:placeholder="$t('home.memoPlaceholder')"
/>
<div v-else class="memo-content">
<MarkDownEditor v-if="memoContent" :content="memoContent" />
<span v-else class="memo-placeholder">
{{ $t('home.memoPlaceholder') }}
</span>
</div>
</div>
</el-scrollbar>
</template>
</CardWithHeader>
</el-carousel-item>
<el-carousel-item key="simpleNode" v-if="showSimpleNode()">
<CardWithHeader :header="$t('setting.panel')">
<template #header-r>
<el-button class="h-button-setting" @click="showMemoCard" link>
{{ $t('home.memo') }}
</el-button>
</template>
<template #body>
<el-scrollbar height="286px">
<div class="simple-node cursor-pointer" v-for="row in simpleNodes" :key="row.id">
@@ -320,49 +353,6 @@
</CardWithHeader>
</el-carousel-item>
</el-carousel>
<CardWithHeader v-else :header="$t('home.memo')" class="memo-card">
<template #header-r>
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
</el-tooltip>
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
<el-button
class="h-button-setting"
@click="saveMemo"
link
icon="Check"
:loading="memoSaving"
/>
</el-tooltip>
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
</el-tooltip>
<el-tooltip :content="$t('commons.button.back')" placement="top">
<el-button class="h-button-setting" @click="showServerCard" link icon="Back" />
</el-tooltip>
</template>
<template #body>
<el-scrollbar height="286px">
<div class="memo-container ml-5 mr-5">
<el-input
v-if="memoEditing"
v-model="memoEditContent"
type="textarea"
:rows="10"
:maxlength="500"
show-word-limit
:placeholder="$t('home.memoPlaceholder')"
/>
<div v-else class="memo-content">
<MarkDownEditor v-if="memoContent" :content="memoContent" />
<span v-else class="memo-placeholder">
{{ $t('home.memoPlaceholder') }}
</span>
</div>
</div>
</el-scrollbar>
</template>
</CardWithHeader>
<AppLauncher ref="appRef" class="card-interval" />
</el-col>
@@ -452,8 +442,6 @@ const memoContent = ref('');
const memoEditContent = ref('');
const memoEditing = ref(false);
const memoSaving = ref(false);
const rightCard = ref<'server' | 'memo'>('server');
const RIGHT_CARD_STORAGE_KEY = 'homeRightCardPreference';
const baseInfo = ref<Dashboard.BaseInfo>({
hostname: '',
@@ -792,16 +780,6 @@ const saveMemo = async () => {
}
};
const showMemoCard = () => {
rightCard.value = 'memo';
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
};
const showServerCard = () => {
rightCard.value = 'server';
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
};
const loadData = async () => {
if (chartOption.value === 'io') {
chartsOption.value['ioChart'] = {
@@ -952,10 +930,6 @@ const clearTimer = () => {
onMounted(() => {
fetchData();
loadMemo();
const savedRightCard = localStorage.getItem(RIGHT_CARD_STORAGE_KEY);
if (savedRightCard === 'memo' || savedRightCard === 'server') {
rightCard.value = savedRightCard;
}
if (localStorage.getItem('welcomeShow') !== 'false') {
loadWelcome();
}