Refine English translation and UI style (#7399)

frontend/src/lang/modules/en.ts

@@ -349,7 +349,7 @@ const message = {
         restart_system: 'Restart server',
         operationSuccess: 'Operation succeeded, rebooting, please refresh the browser manually later!',
         overview: 'Overview',
-        entranceHelper: `Security entrance isn't enabled. You can enable it in "Setting -> Security" to improve system security.`,
+        entranceHelper: `Security entrance isn't enabled. You can enable it in "Settings -> Security" to improve system security.`,
         appInstalled: 'Applications',
         systemInfo: 'System infomation',
         hostname: 'Hostname',
@@ -1007,7 +1007,6 @@ const message = {
         fold: 'All contract',
         batchInput: 'Batch processing',
         quickCommand: 'Quick command | Quick commands',
-        // quickCommandHelper: 'Frequently used command list for quick selection at the bottom of the terminal interface.',
         quickCommandHelper: 'You can use the quick commands at the bottom of the "Terminals -> Terminals".',
         groupDeleteHelper:
             'After the group is removed, all connections in the group will be migrated to the default group. Do you want to continue?',
@@ -1857,13 +1856,13 @@ const message = {
         updateWarn: 'Update parameters need to rebuild the application, Do you want to continue? ',
         busPort: 'Port',
         syncStart: 'Start syncing! Please refresh the app store later',
-        advanced: 'Advanced Settings',
+        advanced: 'Advanced settings',
         cpuCore: 'core(s)',
         containerName: 'Container name',
         containerNameHelper: 'The container name will be automatically generated when not set',
         allowPort: 'External access',
         allowPortHelper: 'Allowing external port access will release the firewall port',
-        appInstallWarn: `The application dosn't expose the external access port by default. Click "Advanced Settings" to expose it.`,
+        appInstallWarn: `The application dosn't expose the external access port by default. Click "Advanced settings" to expose it.`,
         upgradeStart: 'Start upgrading! Please refresh the page later',
         toFolder: 'Open the installation directory',
         editCompose: 'Edit compose file',
@@ -1873,7 +1872,7 @@ const message = {
         allReadyInstalled: 'Installed',
         installHelper: 'If you have image pull issues, configure image acceleration.',
         upgradeHelper:
-            'Bring abnormal applications back to normal status before upgrading. If the upgrade fails, go to "Log" > "System Logs" to check the failure reason.',
+            'Bring abnormal applications back to normal status before upgrading. If the upgrade fails, go to "Logs > System Logs" to check the failure reason.',
         installWarn: `External access has not been enabled, which prevents the application from being accessible via external networks. Do you want to continue?`,
         showIgnore: 'View ignored applications',
         cancelIgnore: 'Cancel ignore',
@@ -2345,12 +2344,11 @@ const message = {
         accept: 'Accept',
         drop: 'Drop',
         source: 'Source',
-        anyWhere: 'AnyWhere',
+        anyWhere: 'Any',
-        address: 'Specified IP',
+        address: 'Specified IPs',
         addressHelper: 'Support IP address or IP segment',
         allow: 'Allow',
         deny: 'Deny',
-        // addressFormatError: 'Please enter a valid IP address!',
         addressFormatError: 'This field must be a valid IP address.',
         addressHelper1: 'Support IP address or IP range. For example, "172.16.10.11" or "172.16.10.0/24".',
         addressHelper2: 'For multiple IP addresses, separate with comma. For example, "172.16.10.11, 172.16.0.0/24".',
@@ -2484,9 +2482,6 @@ const message = {
             uptime: 'Running time',
             notStartWarn: `Supervisor isn't started. Start it first.`,
             serviceName: 'Service name',
-            // initHelper:
-            //     'The initialization process will modify the configuration file, causing all existing daemon processes to stop, please confirm the risk in advance',
-            // initHelper: '尚未初始化 Supervisor ，请先初始化',
             initHelper: `Supervisor service isn't initialized. Click "Initialize" to initialize.`,
             serviceNameHelper: 'Supervisor service name managed by systemctl, usually supervisor or supervisord',
             restartHelper:

frontend/src/views/home/index.vue

@@ -170,20 +170,16 @@
                 <CardWithHeader :header="$t('home.systemInfo')">
                     <template #body>
                         <el-scrollbar>
-                            <el-descriptions :column="1" class="h-systemInfo">
+                            <el-descriptions :column="1" class="h-systemInfo" border>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.hostname') }}</span>
-                                            {{ $t('home.hostname') }}
-                                        </span>
                                     </template>
                                     {{ baseInfo.hostname }}
                                 </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.platformVersion') }}</span>
-                                            {{ $t('home.platformVersion') }}
-                                        </span>
                                     </template>
                                     {{
                                         baseInfo.platformVersion
@@ -191,57 +187,47 @@
                                             : baseInfo.platform + '-' + baseInfo.platformVersion
                                     }}
                                 </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.kernelVersion') }}</span>
-                                            {{ $t('home.kernelVersion') }}
-                                        </span>
                                     </template>
                                     {{ baseInfo.kernelVersion }}
                                 </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.kernelArch') }}</span>
-                                            {{ $t('home.kernelArch') }}
-                                        </span>
                                     </template>
                                     {{ baseInfo.kernelArch }}
                                 </el-descriptions-item>
                                 <el-descriptions-item
                                     v-if="baseInfo.ipv4Addr && baseInfo.ipv4Addr !== 'IPNotFound'"
                                     class-name="system-content"
+                                    label-class-name="system-label"
                                 >
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.ip') }}</span>
-                                            {{ $t('home.ip') }}
-                                        </span>
                                     </template>
                                     {{ baseInfo.ipv4Addr }}
                                 </el-descriptions-item>
                                 <el-descriptions-item
                                     v-if="baseInfo.systemProxy && baseInfo.systemProxy !== 'noProxy'"
                                     class-name="system-content"
+                                    label-class-name="system-label"
                                 >
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.proxy') }}</span>
-                                            {{ $t('home.proxy') }}
-                                        </span>
                                     </template>
                                     {{ baseInfo.systemProxy }}
                                 </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.uptime') }}</span>
-                                            {{ $t('home.uptime') }}
-                                        </span>
                                     </template>
                                     {{ currentInfo.timeSinceUptime }}
                                 </el-descriptions-item>
-                                <el-descriptions-item class-name="system-content">
+                                <el-descriptions-item class-name="system-content" label-class-name="system-label">
                                     <template #label>
-                                        <span class="system-label">
+                                        <span>{{ $t('home.runningTime') }}</span>
-                                            {{ $t('home.runningTime') }}
-                                        </span>
                                     </template>
                                     {{ loadUpTime(currentInfo.uptime) }}
                                 </el-descriptions-item>
@@ -563,43 +549,25 @@ function loadUpTime(uptime: number) {
     let hours = Math.floor((uptime % 86400) / 3600);
     let minutes = Math.floor((uptime % 3600) / 60);
     let seconds = uptime % 60;
+    let uptimeParts = [];
+    let lead = false;
     if (days !== 0) {
-        return (
+        uptimeParts.push(days + i18n.global.t('commons.units.dayUnit', days));
-            days +
+        lead = true;
-            i18n.global.t('commons.units.day', days) +
-            ' ' +
-            hours +
-            i18n.global.t('commons.units.hour', hours) +
-            ' ' +
-            minutes +
-            i18n.global.t('commons.units.minute', minutes) +
-            ' ' +
-            seconds +
-            i18n.global.t('commons.units.second', seconds)
-        );
     }
-    if (hours !== 0) {
+    if (lead || hours !== 0) {
-        return (
+        uptimeParts.push(hours + i18n.global.t('commons.units.hourUnit', hours));
-            hours +
+        lead = true;
-            i18n.global.t('commons.units.hour', hours) +
-            ' ' +
-            minutes +
-            i18n.global.t('commons.units.minute', minutes) +
-            ' ' +
-            seconds +
-            i18n.global.t('commons.units.second', seconds)
-        );
     }
-    if (minutes !== 0) {
+    if (lead || minutes !== 0) {
-        return (
+        uptimeParts.push(minutes + i18n.global.t('commons.units.minuteUnit', minutes));
-            minutes +
+        lead = true;
-            i18n.global.t('commons.units.minute', minutes) +
-            ' ' +
-            seconds +
-            i18n.global.t('commons.units.second', seconds)
-        );
     }
-    return seconds + i18n.global.t('commons.units.second');
+    if (lead || seconds !== 0) {
+        uptimeParts.push(seconds + i18n.global.t('commons.units.secondUnit', seconds));
+        lead = true;
+    }
+    return lead ? uptimeParts.join(' ') : '-';
 }
 
 const loadData = async () => {
@@ -725,10 +693,16 @@ onBeforeUnmount(() => {
     font-weight: 400 !important;
     font-size: 14px !important;
     color: var(--panel-text-color);
+    border: none !important;
+    background: none !important;
+    width: fit-content !important;
+    white-space: nowrap !important;
 }
 
 .system-content {
     font-size: 13px !important;
+    border: none !important;
+    width: 100% !important;
 }
 
 .monitor-tags {

frontend/src/views/host/firewall/port/index.vue

@@ -17,7 +17,7 @@
                     <span>{{ $t('firewall.firewallNotStart') }}</span>
                 </el-card>
 
-                <LayoutContent :title="$t('firewall.portRule')" :class="{ mask: fireStatus != 'running' }">
+                <LayoutContent :title="$t('firewall.portRule', 2)" :class="{ mask: fireStatus != 'running' }">
                     <template #prompt>
                         <el-alert type="info" :closable="false">
                             <template #default>