Skip to content

Commit 8e99d49

Browse files
ssongliuadri
ssongliu
authored and
adri
committed
style: Adjust memo style (1Panel-dev#11793)
1 parent 9b7d667 commit 8e99d49

1 file changed

Lines changed: 42 additions & 68 deletions

File tree

‎frontend/src/views/home/index.vue‎

Lines changed: 42 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,6 @@
165165
</el-col>
166166
<el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
167167
<el-carousel
168-
v-if="rightCard === 'server'"
169168
class="my-carousel"
170169
:key="simpleNodes.length"
171170
height="368px"
@@ -175,9 +174,6 @@
175174
<el-carousel-item key="systemInfo">
176175
<CardWithHeader :header="$t('home.systemInfo')">
177176
<template #header-r>
178-
<el-tooltip :content="$t('home.memo')" placement="top">
179-
<el-button class="h-button-setting" @click="showMemoCard" link icon="Management" />
180-
</el-tooltip>
181177
<el-tooltip :content="$t('commons.button.refresh')" placement="top">
182178
<el-button class="h-button-setting" @click="refreshDashboard" link icon="Refresh" />
183179
</el-tooltip>
@@ -280,13 +276,50 @@
280276
</template>
281277
</CardWithHeader>
282278
</el-carousel-item>
283-
<el-carousel-item key="simpleNode" v-if="showSimpleNode()">
284-
<CardWithHeader :header="$t('setting.panel')">
279+
<el-carousel-item key="memoInfo">
280+
<CardWithHeader :header="$t('home.memo')" class="memo-card">
285281
<template #header-r>
286-
<el-button class="h-button-setting" @click="showMemoCard" link>
287-
{{ $t('home.memo') }}
288-
</el-button>
282+
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
283+
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
284+
</el-tooltip>
285+
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
286+
<el-button
287+
class="h-button-setting"
288+
@click="saveMemo"
289+
link
290+
icon="Check"
291+
:loading="memoSaving"
292+
/>
293+
</el-tooltip>
294+
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
295+
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
296+
</el-tooltip>
289297
</template>
298+
<template #body>
299+
<el-scrollbar height="286px">
300+
<div class="memo-container ml-5 mr-5">
301+
<el-input
302+
v-if="memoEditing"
303+
v-model="memoEditContent"
304+
type="textarea"
305+
:rows="10"
306+
:maxlength="500"
307+
show-word-limit
308+
:placeholder="$t('home.memoPlaceholder')"
309+
/>
310+
<div v-else class="memo-content">
311+
<MarkDownEditor v-if="memoContent" :content="memoContent" />
312+
<span v-else class="memo-placeholder">
313+
{{ $t('home.memoPlaceholder') }}
314+
</span>
315+
</div>
316+
</div>
317+
</el-scrollbar>
318+
</template>
319+
</CardWithHeader>
320+
</el-carousel-item>
321+
<el-carousel-item key="simpleNode" v-if="showSimpleNode()">
322+
<CardWithHeader :header="$t('setting.panel')">
290323
<template #body>
291324
<el-scrollbar height="286px">
292325
<div class="simple-node cursor-pointer" v-for="row in simpleNodes" :key="row.id">
@@ -320,49 +353,6 @@
320353
</CardWithHeader>
321354
</el-carousel-item>
322355
</el-carousel>
323-
<CardWithHeader v-else :header="$t('home.memo')" class="memo-card">
324-
<template #header-r>
325-
<el-tooltip v-if="!memoEditing" :content="$t('commons.button.edit')" placement="top">
326-
<el-button class="h-button-setting" @click="startMemoEdit" link icon="Edit" />
327-
</el-tooltip>
328-
<el-tooltip v-if="memoEditing" :content="$t('commons.button.save')" placement="top">
329-
<el-button
330-
class="h-button-setting"
331-
@click="saveMemo"
332-
link
333-
icon="Check"
334-
:loading="memoSaving"
335-
/>
336-
</el-tooltip>
337-
<el-tooltip v-if="memoEditing" :content="$t('commons.button.cancel')" placement="top">
338-
<el-button class="h-button-setting" @click="cancelMemoEdit" link icon="Close" />
339-
</el-tooltip>
340-
<el-tooltip :content="$t('commons.button.back')" placement="top">
341-
<el-button class="h-button-setting" @click="showServerCard" link icon="Back" />
342-
</el-tooltip>
343-
</template>
344-
<template #body>
345-
<el-scrollbar height="286px">
346-
<div class="memo-container ml-5 mr-5">
347-
<el-input
348-
v-if="memoEditing"
349-
v-model="memoEditContent"
350-
type="textarea"
351-
:rows="10"
352-
:maxlength="500"
353-
show-word-limit
354-
:placeholder="$t('home.memoPlaceholder')"
355-
/>
356-
<div v-else class="memo-content">
357-
<MarkDownEditor v-if="memoContent" :content="memoContent" />
358-
<span v-else class="memo-placeholder">
359-
{{ $t('home.memoPlaceholder') }}
360-
</span>
361-
</div>
362-
</div>
363-
</el-scrollbar>
364-
</template>
365-
</CardWithHeader>
366356

367357
<AppLauncher ref="appRef" class="card-interval" />
368358
</el-col>
@@ -452,8 +442,6 @@ const memoContent = ref('');
452442
const memoEditContent = ref('');
453443
const memoEditing = ref(false);
454444
const memoSaving = ref(false);
455-
const rightCard = ref<'server' | 'memo'>('server');
456-
const RIGHT_CARD_STORAGE_KEY = 'homeRightCardPreference';
457445
458446
const baseInfo = ref<Dashboard.BaseInfo>({
459447
hostname: '',
@@ -792,16 +780,6 @@ const saveMemo = async () => {
792780
}
793781
};
794782
795-
const showMemoCard = () => {
796-
rightCard.value = 'memo';
797-
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
798-
};
799-
800-
const showServerCard = () => {
801-
rightCard.value = 'server';
802-
localStorage.setItem(RIGHT_CARD_STORAGE_KEY, rightCard.value);
803-
};
804-
805783
const loadData = async () => {
806784
if (chartOption.value === 'io') {
807785
chartsOption.value['ioChart'] = {
@@ -952,10 +930,6 @@ const clearTimer = () => {
952930
onMounted(() => {
953931
fetchData();
954932
loadMemo();
955-
const savedRightCard = localStorage.getItem(RIGHT_CARD_STORAGE_KEY);
956-
if (savedRightCard === 'memo' || savedRightCard === 'server') {
957-
rightCard.value = savedRightCard;
958-
}
959933
if (localStorage.getItem('welcomeShow') !== 'false') {
960934
loadWelcome();
961935
}

0 commit comments

Comments
 (0)