From c13387bc70cd1cffd16fe47938c7cd8ab991f11d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Fri, 27 Dec 2024 14:01:02 +0800
Subject: [PATCH] style: Optimize the display of status cards on the overview
 page (#7562)

* style: Optimize the display of status cards on the overview page
---
 frontend/src/lang/modules/zh.ts               |   2 +-
 frontend/src/styles/element-dark.scss         |   2 +-
 frontend/src/views/home/status/index.vue      | 253 +++++-------
 .../src/views/login/components/login-form.vue |   5 +-
 frontend/src/views/setting/panel/index.vue    | 364 ++++++++++--------
 5 files changed, 296 insertions(+), 330 deletions(-)

diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 4a1a58d61..8ac88cb41 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -369,7 +369,7 @@ const message = {
 
         core: '物理核心',
         logicCore: '逻辑核心',
-        loadAverage: '最近 {0} 分钟平均负载',
+        loadAverage: '最近 1 分钟平均负载 | 最近 {n} 分钟平均负载',
         load: '负载',
         mount: '挂载点',
         fileSystem: '文件系统',
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index b37b044b4..f2fc13ade 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -165,7 +165,7 @@ html.dark {
     }
 
     .el-loading-mask {
-        background-color: #5b5e6a75;
+        background-color: rgba(0, 0, 0, 0.8);
     }
 
     .el-input {
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index 0ff18d0c3..287d26cb8 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-row :gutter="10" class="status-container">
+    <el-row :gutter="10">
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
             <el-popover placement="bottom" :width="loadWidth()" trigger="hover" v-if="chartsOption['cpu']">
                 <div>
@@ -52,28 +52,39 @@
             </span>
         </el-col>
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['memory']">
-                <el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
-                <el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}</el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
-                </el-tag>
-                <div v-if="currentInfo.swapMemoryTotal" class="mt-2">
-                    <el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
-                    </el-tag>
+            <el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['memory']">
+                <div class="grid grid-cols-2 gap-1">
+                    <div class="grid grid-cols-1 gap-1">
+                        <el-tag class="font-medium !justify-start w-max">{{ $t('home.mem') }}:</el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.free') }}: {{ computeSize(currentInfo.memoryAvailable) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
+                        </el-tag>
+                    </div>
+
+                    <div class="grid grid-cols-1 gap-1" v-if="currentInfo.swapMemoryTotal">
+                        <el-tag class="font-medium !justify-start w-max">{{ $t('home.swapMem') }}:</el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
+                        </el-tag>
+                        <el-tag class="!justify-start">
+                            {{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
+                        </el-tag>
+                    </div>
                 </div>
                 <template #reference>
                     <v-charts
@@ -90,12 +101,12 @@
             </span>
         </el-col>
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="200" trigger="hover" v-if="chartsOption['load']">
-                <el-tag class="tagClass">{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}
-                </el-tag>
+            <el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption['load']">
+                <div class="grid grid-cols-1 gap-1">
+                    <el-tag>{{ $t('home.loadAverage', 1) }}: {{ formatNumber(currentInfo.load1) }}</el-tag>
+                    <el-tag>{{ $t('home.loadAverage', 5) }}: {{ formatNumber(currentInfo.load5) }}</el-tag>
+                    <el-tag>{{ $t('home.loadAverage', 15) }}: {{ formatNumber(currentInfo.load15) }}</el-tag>
+                </div>
                 <template #reference>
                     <v-charts
                         height="160px"
@@ -110,42 +121,35 @@
         </el-col>
         <template v-for="(item, index) of currentInfo.diskData" :key="index">
             <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('disk', index)">
-                <el-popover placement="bottom" :width="300" trigger="hover" v-if="chartsOption[`disk${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="nameTag">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-col :span="12">
-                            <div><el-tag class="tagClass" style="font-weight: 500">Inode:</el-tag></div>
-                            <el-tag class="tagClass">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
-                            <el-tag class="tagClass">
+                <el-popover placement="bottom" width="auto" trigger="hover" v-if="chartsOption[`disk${index}`]">
+                    <div class="grid grid-cols-1 gap-1">
+                        <el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
+                        <el-tag class="!justify-start w-max">{{ $t('home.mount') }}: {{ item.path }}</el-tag>
+                        <el-tag class="!justify-start w-max">{{ $t('commons.table.type') }}: {{ item.type }}</el-tag>
+                        <el-tag class="!justify-start w-max">{{ $t('home.fileSystem') }}: {{ item.device }}</el-tag>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2 mt-1">
+                        <div class="grid grid-cols-1 gap-1">
+                            <el-tag class="font-medium !justify-start w-max">Inode:</el-tag>
+                            <el-tag class="!justify-start">{{ $t('home.total') }}: {{ item.inodesTotal }}</el-tag>
+                            <el-tag class="!justify-start">{{ $t('home.used') }}: {{ item.inodesUsed }}</el-tag>
+                            <el-tag class="!justify-start">{{ $t('home.free') }}: {{ item.inodesFree }}</el-tag>
+                            <el-tag class="!justify-start">
                                 {{ $t('home.percent') }}: {{ formatNumber(item.inodesUsedPercent) }}%
                             </el-tag>
-                        </el-col>
-
-                        <el-col :span="12">
-                            <div>
-                                <el-tag style="margin-top: 3px; font-weight: 500">{{ $t('monitor.disk') }}:</el-tag>
-                            </div>
-                            <el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(item.total) }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
-                            <el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
-                            <el-tag class="tagClass">
+                        </div>
+                        <div class="grid grid-cols-1 gap-1">
+                            <el-tag class="font-medium !justify-start w-max">{{ $t('monitor.disk') }}:</el-tag>
+                            <el-tag class="!justify-start">
+                                {{ $t('home.total') }}: {{ computeSize(item.total) }}
+                            </el-tag>
+                            <el-tag class="!justify-start">{{ $t('home.used') }}: {{ computeSize(item.used) }}</el-tag>
+                            <el-tag class="!justify-start">{{ $t('home.free') }}: {{ computeSize(item.free) }}</el-tag>
+                            <el-tag class="!justify-start">
                                 {{ $t('home.percent') }}: {{ formatNumber(item.usedPercent) }}%
                             </el-tag>
-                        </el-col>
-                    </el-row>
+                        </div>
+                    </div>
                     <template #reference>
                         <v-charts
                             height="160px"
@@ -164,31 +168,19 @@
         <template v-for="(item, index) of currentInfo.gpuData" :key="index">
             <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('gpu', index)">
                 <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`gpu${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">
+                    <div class="grid grid-cols-1 gap-1">
+                        <el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.gpuUtil }}</el-tag>
+                        <el-tag class="!justify-start">
                             {{ $t('monitor.temperature') }}: {{ item.temperature.replaceAll('C', '°C') }}
                         </el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">
+                        <el-tag class="!justify-start">
                             {{ $t('monitor.performanceState') }}: {{ item.performanceState }}
                         </el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
-                    </el-row>
+                        <el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.powerUsage }}</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.memoryUsage') }}: {{ item.memoryUsage }}</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.fanSpeed') }}: {{ item.fanSpeed }}</el-tag>
+                    </div>
                     <template #reference>
                         <v-charts
                             @click="goGPU()"
@@ -209,23 +201,15 @@
         <template v-for="(item, index) of currentInfo.xpuData" :key="index">
             <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="isShow('xpu', index)">
                 <el-popover placement="bottom" :width="250" trigger="hover" v-if="chartsOption[`xpu${index}`]">
-                    <el-row :gutter="5">
-                        <el-tag style="font-weight: 500">{{ $t('home.baseInfo') }}:</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
-                    </el-row>
-                    <el-row :gutter="5">
-                        <el-tag class="tagClass">
+                    <div class="grid grid-cols-1 gap-1">
+                        <el-tag class="font-medium !justify-start w-max">{{ $t('home.baseInfo') }}:</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.gpuUtil') }}: {{ item.memoryUtil }}</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.temperature') }}: {{ item.temperature }}</el-tag>
+                        <el-tag class="!justify-start">{{ $t('monitor.powerUsage') }}: {{ item.power }}</el-tag>
+                        <el-tag class="!justify-start">
                             {{ $t('monitor.memoryUsage') }}: {{ item.memoryUsed }}/{{ item.memory }}
                         </el-tag>
-                    </el-row>
+                    </div>
                     <template #reference>
                         <v-charts
                             @click="goGPU()"
@@ -243,12 +227,21 @@
                 <span class="input-help" v-else>{{ item.deviceName }}</span>
             </el-col>
         </template>
-        <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center" v-if="totalCount > 5">
-            <el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="buttonClass">
+        <el-col
+            :xs="12"
+            :sm="12"
+            :md="6"
+            :lg="6"
+            :xl="6"
+            v-if="totalCount > 5"
+            align="center"
+            class="!flex !justify-center !items-center"
+        >
+            <el-button v-if="!showMore" link type="primary" @click="changeShowMore(true)" class="text-sm">
                 {{ $t('tabs.more') }}
                 <el-icon><Bottom /></el-icon>
             </el-button>
-            <el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="buttonClass">
+            <el-button v-if="showMore" type="primary" link @click="changeShowMore(false)" class="text-sm">
                 {{ $t('tabs.hide') }}
                 <el-icon><Top /></el-icon>
             </el-button>
@@ -431,39 +424,6 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.status-container {
-    :deep(.el-button) {
-        min-width: 180px;
-        padding: 8px 16px;
-        height: auto;
-        white-space: normal;
-        line-height: 1.5;
-        text-align: left;
-    }
-
-    :deep(.el-tag) {
-        min-width: 180px;
-        padding: 8px 12px;
-        height: auto;
-        white-space: normal;
-        line-height: 1.5;
-        margin: 4px;
-        text-align: left;
-    }
-
-    :deep(.el-button--primary) {
-        background-color: var(--el-color-primary);
-        &.is-plain {
-            background: var(--el-color-primary-light-9);
-            color: var(--el-color-primary);
-            &:hover {
-                background: var(--el-color-primary);
-                color: white;
-            }
-        }
-    }
-}
-
 .cpuModeTag {
     justify-content: flex-start !important;
     text-align: left !important;
@@ -476,13 +436,6 @@ defineExpose({
     margin-top: 3px;
     margin-left: 1px;
 }
-.tagClass {
-    margin-top: 3px;
-    min-width: 140px;
-    white-space: normal;
-    height: auto;
-    line-height: 1.5;
-}
 
 .tagCPUClass {
     justify-content: flex-start !important;
@@ -492,24 +445,4 @@ defineExpose({
     margin-left: 1px;
     width: 140px;
 }
-
-.buttonClass {
-    margin-top: 28%;
-    font-size: 14px;
-}
-
-.input-help {
-    display: inline-block;
-    min-width: 120px;
-    white-space: normal;
-    line-height: 1.2;
-    padding: 2px 4px;
-}
-.nameTag {
-    margin-top: 3px;
-    height: auto;
-    display: inline-block;
-    white-space: normal;
-    line-height: 1.8;
-}
 </style>
diff --git a/frontend/src/views/login/components/login-form.vue b/frontend/src/views/login/components/login-form.vue
index 0521a2e94..2721dde35 100644
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@@ -55,16 +55,13 @@
                                         <el-dropdown-item v-if="globalStore.isIntl" command="en">
                                             English
                                         </el-dropdown-item>
-                                        <el-dropdown-item v-if="globalStore.isIntl" command="ru">
-                                            Русский
-                                        </el-dropdown-item>
                                         <el-dropdown-item command="zh">中文(简体)</el-dropdown-item>
                                         <el-dropdown-item command="tw">中文(繁體)</el-dropdown-item>
                                         <el-dropdown-item v-if="!globalStore.isIntl" command="en">
                                             English
                                         </el-dropdown-item>
                                     </el-dropdown-menu>
-                                    <el-dropdown-item v-if="!globalStore.isIntl" command="ru">Русский</el-dropdown-item>
+                                    <el-dropdown-item command="ru">Русский</el-dropdown-item>
                                 </template>
                             </el-dropdown>
                         </div>
diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue
index c2208ad25..c737b2934 100644
--- a/frontend/src/views/setting/panel/index.vue
+++ b/frontend/src/views/setting/panel/index.vue
@@ -2,183 +2,202 @@
     <div v-loading="loading">
         <LayoutContent :title="$t('setting.panel')" :divider="true">
             <template #main>
-                <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="auto">
-                    <el-row>
-                        <el-col :span="1"><br /></el-col>
-                        <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
-                            <el-form-item :label="$t('setting.user')" prop="userName">
-                                <el-input disabled v-model="form.userName">
-                                    <template #append>
-                                        <el-button @click="onChangeUserName()" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                <el-form
+                    :model="form"
+                    :label-position="mobile ? 'top' : 'left'"
+                    label-width="auto"
+                    class="sm:w-full md:w-4/5 lg:w-3/5 2xl:w-1/2 max-w-max"
+                >
+                    <el-form-item :label="$t('setting.user')" prop="userName">
+                        <el-input disabled v-model="form.userName">
+                            <template #append>
+                                <el-button @click="onChangeUserName()" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.passwd')" prop="password">
-                                <el-input type="password" disabled v-model="form.password">
-                                    <template #append>
-                                        <el-button icon="Setting" @click="onChangePassword">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.passwd')" prop="password">
+                        <el-input type="password" disabled v-model="form.password">
+                            <template #append>
+                                <el-button icon="Setting" @click="onChangePassword">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.theme')" prop="theme">
-                                <div class="flex justify-between items-center gap-6">
-                                    <el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
-                                        <el-radio-button value="light">
-                                            <span>{{ $t('setting.light') }}</span>
-                                        </el-radio-button>
-                                        <el-radio-button value="dark">
-                                            <span>{{ $t('setting.dark') }}</span>
-                                        </el-radio-button>
-                                        <el-radio-button value="auto">
-                                            <span>{{ $t('setting.auto') }}</span>
-                                        </el-radio-button>
-                                    </el-radio-group>
-                                    <el-button
-                                        v-if="isProductPro"
-                                        @click="onChangeThemeColor"
-                                        icon="Setting"
-                                        class="!h-[34px]"
-                                    >
-                                        <span>{{ $t('container.custom') }}</span>
-                                    </el-button>
-                                </div>
-                            </el-form-item>
-
-                            <el-form-item :label="$t('setting.menuTabs')" prop="menuTabs">
-                                <el-radio-group @change="onSave('MenuTabs', form.menuTabs)" v-model="form.menuTabs">
-                                    <el-radio-button value="enable">
-                                        <span>{{ $t('commons.button.enable') }}</span>
+                    <el-form-item :label="$t('setting.theme')" prop="theme">
+                        <div class="flex justify-center items-center sm:gap-6 gap-2">
+                            <div class="sm:contents hidden">
+                                <el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
+                                    <el-radio-button value="light">
+                                        <span>{{ $t('setting.light') }}</span>
                                     </el-radio-button>
-                                    <el-radio-button value="disable">
-                                        <span>{{ $t('commons.button.disable') }}</span>
+                                    <el-radio-button value="dark">
+                                        <span>{{ $t('setting.dark') }}</span>
+                                    </el-radio-button>
+                                    <el-radio-button value="auto">
+                                        <span>{{ $t('setting.auto') }}</span>
                                     </el-radio-button>
                                 </el-radio-group>
-                            </el-form-item>
-
-                            <el-form-item :label="$t('setting.title')" prop="panelName">
-                                <el-input disabled v-model="form.panelName">
-                                    <template #append>
-                                        <el-button icon="Setting" @click="onChangeTitle">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-
-                            <el-form-item :label="$t('setting.language')" prop="language">
-                                <el-radio-group
-                                    style="width: 100%"
-                                    @change="onSave('Language', form.language)"
-                                    v-model="form.language"
+                            </div>
+                            <div class="sm:hidden block w-32 !h-[33.5px]">
+                                <el-select @change="onSave('Theme', form.theme)" v-model="form.theme">
+                                    <el-option key="light" value="light" :label="$t('setting.light')">
+                                        {{ $t('setting.light') }}
+                                    </el-option>
+                                    <el-option key="dark" value="dark" :label="$t('setting.dark')">
+                                        {{ $t('setting.dark') }}
+                                    </el-option>
+                                    <el-option key="auto" value="auto" :label="$t('setting.auto')">
+                                        {{ $t('setting.auto') }}
+                                    </el-option>
+                                </el-select>
+                            </div>
+                            <div>
+                                <el-button
+                                    v-if="isProductPro"
+                                    @click="onChangeThemeColor"
+                                    icon="Setting"
+                                    class="!h-[32px] sm:!h-[33.5px]"
                                 >
-                                    <el-radio v-if="globalStore.isIntl" value="en">English</el-radio>
-                                    <el-radio v-if="globalStore.isIntl" value="ru">Русский</el-radio>
-                                    <el-radio value="zh">中文(简体)</el-radio>
-                                    <el-radio value="tw">中文(繁體)</el-radio>
-                                    <el-radio v-if="!globalStore.isIntl" value="en">English</el-radio>
-                                    <el-radio v-if="!globalStore.isIntl" value="ru">Русский</el-radio>
-                                </el-radio-group>
-                            </el-form-item>
+                                    <span>{{ $t('container.custom') }}</span>
+                                </el-button>
+                            </div>
+                        </div>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
-                                <el-input disabled v-model.number="form.sessionTimeout">
-                                    <template #append>
-                                        <el-button @click="onChangeTimeout" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <span class="input-help">
-                                    {{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
-                                </span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.menuTabs')" prop="menuTabs">
+                        <el-radio-group @change="onSave('MenuTabs', form.menuTabs)" v-model="form.menuTabs">
+                            <el-radio-button value="enable">
+                                <span>{{ $t('commons.button.enable') }}</span>
+                            </el-radio-button>
+                            <el-radio-button value="disable">
+                                <span>{{ $t('commons.button.disable') }}</span>
+                            </el-radio-button>
+                        </el-radio-group>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.defaultNetwork')">
-                                <el-input disabled v-model="form.defaultNetworkVal">
-                                    <template #append>
-                                        <el-button v-show="!show" @click="onChangeNetwork" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.title')" prop="panelName">
+                        <el-input disabled v-model="form.panelName">
+                            <template #append>
+                                <el-button icon="Setting" @click="onChangeTitle">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.systemIP')" prop="systemIP">
-                                <el-input disabled v-if="form.systemIP" v-model="form.systemIP">
-                                    <template #append>
-                                        <el-button @click="onChangeSystemIP" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                                <el-input disabled v-if="!form.systemIP" v-model="unset">
-                                    <template #append>
-                                        <el-button @click="onChangeSystemIP" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.language')" prop="language">
+                        <el-select
+                            class="sm:!w-1/2 !w-full"
+                            @change="onSave('Language', form.language)"
+                            v-model="form.language"
+                        >
+                            <el-option
+                                v-for="option in languageOptions"
+                                :key="option.value"
+                                :value="option.value"
+                                :label="option.label"
+                            >
+                                {{ option.label }}
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.proxy')" prop="proxyShow">
-                                <el-input disabled v-model="form.proxyShow">
-                                    <template #append>
-                                        <el-button @click="onChangeProxy" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.sessionTimeout')" prop="sessionTimeout">
+                        <el-input disabled v-model.number="form.sessionTimeout">
+                            <template #append>
+                                <el-button @click="onChangeTimeout" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <span class="input-help">
+                            {{ $t('setting.sessionTimeoutHelper', [form.sessionTimeout]) }}
+                        </span>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.apiInterface')" prop="apiInterface">
-                                <el-switch
-                                    @change="onChangeApiInterfaceStatus"
-                                    v-model="form.apiInterfaceStatus"
-                                    active-value="enable"
-                                    inactive-value="disable"
-                                />
-                                <span class="input-help">{{ $t('setting.apiInterfaceHelper') }}</span>
-                                <div v-if="form.apiInterfaceStatus === 'enable'">
-                                    <div>
-                                        <el-button link type="primary" @click="onChangeApiInterfaceStatus">
-                                            {{ $t('commons.button.view') }}
-                                        </el-button>
-                                    </div>
-                                </div>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.defaultNetwork')">
+                        <el-input disabled v-model="form.defaultNetworkVal">
+                            <template #append>
+                                <el-button v-show="!show" @click="onChangeNetwork" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.developerMode')" prop="developerMode">
-                                <el-radio-group
-                                    @change="onSave('DeveloperMode', form.developerMode)"
-                                    v-model="form.developerMode"
-                                >
-                                    <el-radio-button value="enable">
-                                        <span>{{ $t('commons.button.enable') }}</span>
-                                    </el-radio-button>
-                                    <el-radio-button value="disable">
-                                        <span>{{ $t('commons.button.disable') }}</span>
-                                    </el-radio-button>
-                                </el-radio-group>
-                                <span class="input-help">{{ $t('setting.developerModeHelper') }}</span>
-                            </el-form-item>
+                    <el-form-item :label="$t('setting.systemIP')" prop="systemIP">
+                        <el-input disabled v-if="form.systemIP" v-model="form.systemIP">
+                            <template #append>
+                                <el-button @click="onChangeSystemIP" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                        <el-input disabled v-if="!form.systemIP" v-model="unset">
+                            <template #append>
+                                <el-button @click="onChangeSystemIP" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
 
-                            <el-form-item :label="$t('setting.advancedMenuHide')">
-                                <el-input disabled v-model="form.proHideMenus">
-                                    <template #append>
-                                        <el-button v-show="!show" @click="onChangeHideMenus" icon="Setting">
-                                            {{ $t('commons.button.set') }}
-                                        </el-button>
-                                    </template>
-                                </el-input>
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
+                    <el-form-item :label="$t('setting.proxy')" prop="proxyShow">
+                        <el-input disabled v-model="form.proxyShow">
+                            <template #append>
+                                <el-button @click="onChangeProxy" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item :label="$t('setting.apiInterface')" prop="apiInterface">
+                        <el-switch
+                            @change="onChangeApiInterfaceStatus"
+                            v-model="form.apiInterfaceStatus"
+                            active-value="enable"
+                            inactive-value="disable"
+                        />
+                        <span class="input-help">{{ $t('setting.apiInterfaceHelper') }}</span>
+                        <div v-if="form.apiInterfaceStatus === 'enable'">
+                            <div>
+                                <el-button link type="primary" @click="onChangeApiInterfaceStatus">
+                                    {{ $t('commons.button.view') }}
+                                </el-button>
+                            </div>
+                        </div>
+                    </el-form-item>
+
+                    <el-form-item :label="$t('setting.developerMode')" prop="developerMode">
+                        <el-radio-group
+                            @change="onSave('DeveloperMode', form.developerMode)"
+                            v-model="form.developerMode"
+                        >
+                            <el-radio-button value="enable">
+                                <span>{{ $t('commons.button.enable') }}</span>
+                            </el-radio-button>
+                            <el-radio-button value="disable">
+                                <span>{{ $t('commons.button.disable') }}</span>
+                            </el-radio-button>
+                        </el-radio-group>
+                        <span class="input-help">{{ $t('setting.developerModeHelper') }}</span>
+                    </el-form-item>
+
+                    <el-form-item :label="$t('setting.advancedMenuHide')">
+                        <el-input disabled v-model="form.proHideMenus">
+                            <template #append>
+                                <el-button v-show="!show" @click="onChangeHideMenus" icon="Setting">
+                                    {{ $t('commons.button.set') }}
+                                </el-button>
+                            </template>
+                        </el-input>
+                    </el-form-item>
                 </el-form>
             </template>
         </LayoutContent>
@@ -294,6 +313,17 @@ interface Node {
     children?: Node[];
 }
 
+const languageOptions = ref([
+    { value: 'zh', label: '中文(简体)' },
+    { value: 'tw', label: '中文(繁體)' },
+    ...(!globalStore.isIntl ? [{ value: 'en', label: 'English' }] : []),
+    { value: 'ru', label: 'Русский' },
+]);
+
+if (globalStore.isIntl) {
+    languageOptions.value.unshift({ value: 'en', label: 'English' });
+}
+
 const search = async () => {
     const res = await getSettingInfo();
     form.userName = res.data.userName;
@@ -491,3 +521,9 @@ onMounted(() => {
     getSystemAvailable();
 });
 </script>
+
+<style scoped lang="scss">
+:deep(.el-radio-group) {
+    min-width: max-content;
+}
+</style>