From 5209db3abc92d5a6af1c912deebd437bc7579526 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 5 Feb 2026 10:32:37 +0800
Subject: [PATCH] style: Adjust memo style (#11793)

---
 frontend/src/views/home/index.vue | 110 ++++++++++++------------------
 1 file changed, 42 insertions(+), 68 deletions(-)

diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 6bcdee4d2..ef85c620f 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -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();
     }