style: Optimize the styles of dashboard, container, and other pages (#7811)

frontend/src/assets/iconfont/iconfont.css

@@ -1,8 +1,9 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4776196 */
-  src: url('iconfont.woff2?t=1734689625014') format('woff2'),
+  src: url('iconfont.woff2?t=1738832240410') format('woff2'),
-       url('iconfont.woff?t=1734689625014') format('woff'),
+       url('iconfont.woff?t=1738832240410') format('woff'),
-       url('iconfont.ttf?t=1734689625014') format('truetype');
+       url('iconfont.ttf?t=1738832240410') format('truetype'),
+       url('iconfont.svg?t=1738832240410#iconfont') format('svg');
 }
 
 .iconfont {
@@ -13,6 +14,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.p-terminal3:before {
+  content: "\eace";
+}
+
+.p-tuijian:before {
+  content: "\e627";
+}
+
 .p-node-1:before {
   content: "\e61a";
 }
@@ -61,6 +70,14 @@
   content: "\e638";
 }
 
+.p-terminal:before {
+  content: "\e864";
+}
+
+.p-terminal1:before {
+  content: "\e663";
+}
+
 .p-arrow-right:before {
   content: "\e665";
 }
@@ -361,10 +378,6 @@
   content: "\e76a";
 }
 
-.p-zhongduan:before {
-  content: "\e731";
-}
-
 .p-alert-1:before {
   content: "\e615";
 }
@@ -373,7 +386,7 @@
   content: "\e701";
 }
 
-.p-minglinghang:before {
+.p-zhongduan:before {
   content: "\e61e";
 }
 

frontend/src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "p-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "40071541",
+      "name": "terminal",
+      "font_class": "terminal3",
+      "unicode": "eace",
+      "unicode_decimal": 60110
+    },
+    {
+      "icon_id": "34213658",
+      "name": "推荐",
+      "font_class": "tuijian",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
     {
       "icon_id": "17895547",
       "name": "node-1",
@@ -89,6 +103,20 @@
       "unicode": "e638",
       "unicode_decimal": 58936
     },
+    {
+      "icon_id": "6172786",
+      "name": "terminal",
+      "font_class": "terminal",
+      "unicode": "e864",
+      "unicode_decimal": 59492
+    },
+    {
+      "icon_id": "14772948",
+      "name": "terminal",
+      "font_class": "terminal1",
+      "unicode": "e663",
+      "unicode_decimal": 58979
+    },
     {
       "icon_id": "15838431",
       "name": "arrow-right",
@@ -614,13 +642,6 @@
       "unicode": "e76a",
       "unicode_decimal": 59242
     },
-    {
-      "icon_id": "30053592",
-      "name": "终端",
-      "font_class": "zhongduan",
-      "unicode": "e731",
-      "unicode_decimal": 59185
-    },
     {
       "icon_id": "29851742",
       "name": "短信告警",
@@ -638,7 +659,7 @@
     {
       "icon_id": "11052436",
       "name": "命令行",
-      "font_class": "minglinghang",
+      "font_class": "zhongduan",
       "unicode": "e61e",
       "unicode_decimal": 58910
     },

frontend/src/components/card-with-header/index.vue

@@ -2,7 +2,8 @@
     <div>
         <el-card :style="{ height: height }" class="home-card">
             <div class="header">
-                <span>{{ header }}</span>
+                <span class="header-span">{{ header }}</span>
+                <slot name="header-l" />
                 <slot name="header-r" />
             </div>
 
@@ -24,7 +25,7 @@ defineProps({
 <style scoped lang="scss">
 .home-card {
     .header {
-        span {
+        .header-span {
             position: relative;
             font-size: 16px;
             font-weight: 500;

frontend/src/lang/modules/en.ts

@@ -382,7 +382,6 @@ const message = {
         used: 'Used',
         free: 'Free',
         percent: 'Percent',
-        app: 'Recommended Apps',
         goInstall: 'Go install',
 
         networkCard: 'NetworkCard',

frontend/src/lang/modules/ja.ts

@@ -374,7 +374,6 @@ const message = {
         used: '使用済み',
         free: '無料',
         percent: '利用',
-        app: '推奨アプリケーション',
         goInstall: 'インストールします',
 
         networkCard: 'ネットワークカード',

frontend/src/lang/modules/ko.ts

@@ -376,7 +376,6 @@ const message = {
         used: '사용 중',
         free: '여유',
         percent: '사용률',
-        app: '추천 애플리케이션',
         goInstall: 'Go 설치',
 
         networkCard: '네트워크 카드',

frontend/src/lang/modules/ms.ts

@@ -382,7 +382,6 @@ const message = {
         used: 'Digunakan',
         free: 'Percuma',
         percent: 'Penggunaan',
-        app: 'Aplikasi Disyorkan',
         goInstall: 'Pergi pasang',
 
         networkCard: 'Kad rangkaian',

frontend/src/lang/modules/pt-br.ts

@@ -380,7 +380,6 @@ const message = {
         used: 'Usado',
         free: 'Livre',
         percent: 'Utilização',
-        app: 'Aplicações recomendadas',
         goInstall: 'Ir para instalação',
 
         networkCard: 'Placa de rede',

frontend/src/lang/modules/ru.ts

@@ -376,7 +376,6 @@ const message = {
         used: 'Использовано',
         free: 'Свободно',
         percent: 'Утилизация',
-        app: 'Рекомендуемые приложения',
         goInstall: 'Установить',
 
         networkCard: 'Интерфейс',

frontend/src/lang/modules/tw.ts

@@ -374,7 +374,6 @@ const message = {
         used: '已用',
         free: '可用',
         percent: '使用率',
-        app: '推薦應用',
         goInstall: '去安裝',
 
         networkCard: '網卡',

frontend/src/lang/modules/zh.ts

@@ -372,7 +372,6 @@ const message = {
         used: '已用',
         free: '可用',
         percent: '使用率',
-        app: '推荐应用',
         goInstall: '去安装',
 
         networkCard: '网卡',

frontend/src/routers/modules/terminal.ts

@@ -1,13 +1,13 @@
 import { Layout } from '@/routers/constant';
 
 const terminalRouter = {
-    sort: 8,
+    sort: 7,
     path: '/terminal',
     component: Layout,
     redirect: '/terminal',
     meta: {
-        icon: 'p-zhongduan',
         title: 'menu.terminal',
+        icon: 'p-terminal3',
     },
     children: [
         {

frontend/src/routers/modules/toolbox.ts

@@ -1,7 +1,7 @@
 import { Layout } from '@/routers/constant';
 
 const toolboxRouter = {
-    sort: 7,
+    sort: 8,
     path: '/toolbox',
     component: Layout,
     redirect: '/toolbox/supervisor',

frontend/src/views/container/compose/detail/index.vue

@@ -302,7 +302,7 @@ const onTerminal = (row: any) => {
 
 const buttons = [
     {
-        label: i18n.global.t('file.terminal'),
+        label: i18n.global.t('menu.terminal'),
         disabled: (row: Container.ContainerInfo) => {
             return row.state !== 'running';
         },

frontend/src/views/container/container/command/index.vue

@@ -75,9 +75,10 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (!valid) return;
-        ElMessageBox.confirm(i18n.global.t('container.commandHelper'), {
+        ElMessageBox.confirm(i18n.global.t('container.commandHelper'), i18n.global.t('container.createByCommand'), {
             confirmButtonText: i18n.global.t('commons.button.confirm'),
             cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
         }).then(async () => {
             loading.value = true;
             let taskID = newUUID();

frontend/src/views/container/container/index.vue

@@ -714,7 +714,7 @@ const onOperate = async (op: string, row: Container.ContainerInfo | null) => {
 
 const buttons = [
     {
-        label: i18n.global.t('file.terminal'),
+        label: i18n.global.t('menu.terminal'),
         disabled: (row: Container.ContainerInfo) => {
             return row.state !== 'running';
         },

frontend/src/views/container/container/operate/index.vue

@@ -120,7 +120,7 @@
                                         </el-table-column>
                                     </el-table>
 
-                                    <el-button class="ml-3" @click="handlePortsAdd()">
+                                    <el-button class="ml-3 mt-2" @click="handlePortsAdd()">
                                         {{ $t('commons.button.add') }}
                                     </el-button>
                                 </el-form-item>
@@ -185,7 +185,7 @@
                                                         </template>
                                                     </el-input>
                                                 </div>
-                                                <el-button @click="form.dns.push('')">
+                                                <el-button class="mt-2" @click="form.dns.push('')">
                                                     {{ $t('commons.button.add') }}
                                                 </el-button>
                                             </el-form-item>
@@ -259,7 +259,7 @@
                                                 </template>
                                             </el-table-column>
                                         </el-table>
-                                        <el-button @click="handleVolumesAdd()">
+                                        <el-button class="ml-3 mt-2" @click="handleVolumesAdd()">
                                             {{ $t('commons.button.add') }}
                                         </el-button>
                                     </el-form-item>
@@ -366,7 +366,7 @@
                                                         </template>
                                                     </el-input>
                                                 </div>
-                                                <el-button @click="form.labels.push('')">
+                                                <el-button class="mt-2" @click="form.labels.push('')">
                                                     {{ $t('commons.button.add') }}
                                                 </el-button>
                                             </el-form-item>
@@ -388,7 +388,7 @@
                                                         </template>
                                                     </el-input>
                                                 </div>
-                                                <el-button @click="form.env.push('')">
+                                                <el-button class="mt-2" @click="form.env.push('')">
                                                     {{ $t('commons.button.add') }}
                                                 </el-button>
                                             </el-form-item>

frontend/src/views/container/dashboard/index.vue

@@ -3,32 +3,32 @@
         <CardWithHeader :header="$t('menu.container')" class="mt-5">
             <template #body>
                 <span class="count" @click="goRouter('Container')">{{ countItem.containerCount }}</span>
-                <div class="float-right">
+            </template>
-                    <el-tag v-if="countItem.all" effect="plain">
+            <template #header-l>
+                <el-tag size="small" class="ml-5" v-if="countItem.all" effect="plain">
                     {{ $t('commons.table.all') }} * {{ countItem.all }}
                 </el-tag>
-                    <el-tag v-if="countItem.running" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.running" effect="plain" class="ml-2">
                     {{ $t('commons.status.running') }} * {{ countItem.running }}
                 </el-tag>
-                    <el-tag v-if="countItem.created" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.created" effect="plain" class="ml-2">
                     {{ $t('commons.status.created') }} * {{ countItem.created }}
                 </el-tag>
-                    <el-tag v-if="countItem.paused" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.paused" effect="plain" class="ml-2">
                     {{ $t('commons.status.paused') }} * {{ countItem.paused }}
                 </el-tag>
-                    <el-tag v-if="countItem.restarting" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.restarting" effect="plain" class="ml-2">
                     {{ $t('commons.status.restarting') }} * {{ countItem.restarting }}
                 </el-tag>
-                    <el-tag v-if="countItem.removing" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.removing" effect="plain" class="ml-2">
                     {{ $t('commons.status.removing') }} * {{ countItem.removing }}
                 </el-tag>
-                    <el-tag v-if="countItem.exited" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.exited" effect="plain" class="ml-2">
                     {{ $t('commons.status.exited') }} * {{ countItem.exited }}
                 </el-tag>
-                    <el-tag v-if="countItem.dead" effect="plain" class="ml-2">
+                <el-tag size="small" v-if="countItem.dead" effect="plain" class="ml-2">
                     {{ $t('commons.status.dead') }} * {{ countItem.dead }}
                 </el-tag>
-                </div>
             </template>
         </CardWithHeader>
         <el-row :gutter="20" class="mt-5">
@@ -52,11 +52,11 @@
                 <CardWithHeader :header="$t('container.image')">
                     <template #body>
                         <span class="count" @click="goRouter('Image')">{{ countItem.imageCount }}</span>
-                        <div class="float-right">
+                    </template>
-                            <el-tag v-if="countItem.imageSize" effect="plain" class="ml-2">
+                    <template #header-l>
+                        <span v-if="countItem.imageSize" effect="plain" class="ml-2 text-xs">
                             {{ $t('commons.status.used') }}: {{ computeSize(countItem.imageSize) }}
-                            </el-tag>
+                        </span>
-                        </div>
                     </template>
                 </CardWithHeader>
             </el-col>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CardWithHeader :header="$t('home.app')" class="mt-5" :loading="loading">
+        <CardWithHeader :header="$t('app.app')" class="mt-5" :loading="loading">
             <template #header-r>
                 <el-popover placement="left" :width="226" trigger="click">
                     <el-input size="small" v-model="filter" clearable @input="loadOption()" />
@@ -29,11 +29,13 @@
                             <el-col :span="5">
                                 <div>
                                     <el-badge
-                                        badge-style="background-color: transparent; color: #646a73; font-size: 12px; border: none"
+                                        badge-style="background-color: transparent; font-size: 10px; border: none"
-                                        :value="$t('home.recommend')"
                                         v-if="app.isRecommend"
                                         :offset="[-60, 0]"
                                     >
+                                        <template #content>
+                                            <svg-icon iconName="p-tuijian"></svg-icon>
+                                        </template>
                                         <el-avatar
                                             shape="square"
                                             :size="55"

frontend/src/views/host/file-management/index.vue

@@ -54,7 +54,7 @@
                 <el-alert type="info" :closable="false">
                     <template #title>
                         <span class="input-help whitespace-break-spaces">
-                            {{ $t('file.fileHeper') }}
+                            {{ $t('file.fileHelper') }}
                         </span>
                     </template>
                 </el-alert>

frontend/src/views/toolbox/supervisor/file/index.vue

@@ -31,7 +31,7 @@
     <OpDialog ref="opRef" @search="getContent" />
 </template>
 <script lang="ts" setup>
-import { onUnmounted, reactive, ref, watch } from 'vue';
+import { onUnmounted, reactive, ref } from 'vue';
 import { operateSupervisorProcessFile } from '@/api/modules/host-tool';
 import i18n from '@/lang';
 import { TabsPaneContext } from 'element-plus';