From dbe62082ff2f40c735a966e70b010b9a424be5ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Tue, 10 Dec 2024 11:49:37 +0800
Subject: [PATCH] style: Adjusted some English layouts (#7305)

---
 .../src/components/system-upgrade/index.vue   |   2 +-
 frontend/src/lang/modules/en.ts               |   9 +
 frontend/src/lang/modules/tw.ts               |   9 +
 frontend/src/lang/modules/zh.ts               |   9 +
 frontend/src/views/cronjob/index.vue          |  17 +-
 frontend/src/views/cronjob/operate/index.vue  | 165 +++++++++---------
 frontend/src/views/toolbox/clam/index.vue     |   4 +-
 .../src/views/toolbox/clam/operate/index.vue  | 157 ++++++++---------
 8 files changed, 194 insertions(+), 178 deletions(-)

diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index 8e5cd76d8..719de29e7 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -17,7 +17,7 @@
             </div>
             <div class="flex flex-wrap items-center">
                 <el-link :underline="false" type="primary" @click="toHalo">
-                    {{ isProductPro && globalStore.isIntl ? $t('license.pro') : $t('license.community') }}
+                    {{ $t(globalStore.isIntl || !isProductPro ? 'license.community' : 'license.pro') }}
                 </el-link>
                 <el-link :underline="false" class="version" type="primary" @click="copyText(version)">
                     {{ version }}
diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts
index ff5550974..1ad2a2e2b 100644
--- a/frontend/src/lang/modules/en.ts
+++ b/frontend/src/lang/modules/en.ts
@@ -295,6 +295,14 @@ const message = {
             time: 'time(s)',
             core: 'core(s)',
             millisecond: 'millisecond(s)',
+            secondUnit: 's',
+            minuteUnit: 'min',
+            hourUnit: 'h',
+            dayUnit: 'd',
+            weekUnit: 'w',
+            monthUnit: 'm',
+            yearUnit: 'y',
+            millisecondUnit: 'ms',
         },
         operate: {
             down: 'Stop',
@@ -921,6 +929,7 @@ const message = {
         per: 'Every ',
         handle: '',
         day: 'day(s)',
+        dayUnit: 'd',
         monday: 'Monday',
         tuesday: 'Tuesday',
         wednesday: 'Wednesday',
diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts
index 75663245d..dcdfd80be 100644
--- a/frontend/src/lang/modules/tw.ts
+++ b/frontend/src/lang/modules/tw.ts
@@ -289,6 +289,14 @@ const message = {
             time: '次',
             core: '核',
             millisecond: '毫秒',
+            secondUnit: '秒',
+            minuteUnit: '分鐘',
+            hourUnit: '小時',
+            dayUnit: '天',
+            weekUnit: '周',
+            monthUnit: '月',
+            yearUnit: '年',
+            millisecondUnit: '毫秒',
         },
         operate: {
             down: '停止',
@@ -876,6 +884,7 @@ const message = {
         per: '每',
         handle: '執行',
         day: '日',
+        dayUnit: '日',
         monday: '周一',
         tuesday: '周二',
         wednesday: '周三',
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index dc486ee8d..1ee435c22 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -289,6 +289,14 @@ const message = {
             time: '次',
             core: '核',
             millisecond: '毫秒',
+            secondUnit: '秒',
+            minuteUnit: '分钟',
+            hourUnit: '小时',
+            dayUnit: '天',
+            weekUnit: '周',
+            monthUnit: '月',
+            yearUnit: '年',
+            millisecondUnit: '毫秒',
         },
         operate: {
             down: '停止',
@@ -877,6 +885,7 @@ const message = {
         per: '每',
         handle: '执行',
         day: '日',
+        dayUnit: '日',
         monday: '周一',
         tuesday: '周二',
         wednesday: '周三',
diff --git a/frontend/src/views/cronjob/index.vue b/frontend/src/views/cronjob/index.vue
index ada16a5b8..cecee672b 100644
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@@ -55,7 +55,7 @@
                             </el-text>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.status')" :min-width="80" prop="status" sortable>
+                    <el-table-column :label="$t('commons.table.status')" :min-width="110" prop="status" sortable>
                         <template #default="{ row }">
                             <el-button
                                 v-if="row.status === 'Enable'"
@@ -98,7 +98,7 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('cronjob.retainCopies')" :min-width="90" prop="retainCopies">
+                    <el-table-column :label="$t('cronjob.retainCopies')" :min-width="120" prop="retainCopies">
                         <template #default="{ row }">
                             <el-button v-if="hasBackup(row.type)" @click="loadBackups(row)" plain size="small">
                                 {{ row.retainCopies }}{{ $t('cronjob.retainCopiesUnit') }}
@@ -111,7 +111,7 @@
                             {{ row.lastRecordTime }}
                         </template>
                     </el-table-column>
-                    <el-table-column :min-width="80" :label="$t('setting.backupAccount')" prop="defaultDownload">
+                    <el-table-column :min-width="120" :label="$t('setting.backupAccount')" prop="defaultDownload">
                         <template #default="{ row }">
                             <span v-if="!hasBackup(row.type)">-</span>
                             <div v-else>
@@ -150,6 +150,8 @@
                         :buttons="buttons"
                         :ellipsis="10"
                         :label="$t('commons.table.operate')"
+                        :min-width="mobile ? 'auto' : 200"
+                        :fixed="mobile ? false : 'right'"
                         fix
                     />
                 </ComplexTable>
@@ -178,13 +180,14 @@
 import OperateDialog from '@/views/cronjob/operate/index.vue';
 import Records from '@/views/cronjob/record/index.vue';
 import Backups from '@/views/cronjob/backup/index.vue';
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { deleteCronjob, getCronjobPage, handleOnce, updateStatus } from '@/api/modules/cronjob';
 import i18n from '@/lang';
 import { Cronjob } from '@/api/interface/cronjob';
 import { ElMessageBox } from 'element-plus';
 import { MsgSuccess } from '@/utils/message';
 import { transSpecToStr } from './helper';
+import { GlobalStore } from '@/store';
 
 const loading = ref();
 const selects = ref<any>([]);
@@ -206,6 +209,12 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const search = async (column?: any) => {
     paginationConfig.orderBy = column?.order ? column.prop : paginationConfig.orderBy;
     paginationConfig.order = column?.order ? column.order : paginationConfig.order;
diff --git a/frontend/src/views/cronjob/operate/index.vue b/frontend/src/views/cronjob/operate/index.vue
index d66fec842..3b417ef1e 100644
--- a/frontend/src/views/cronjob/operate/index.vue
+++ b/frontend/src/views/cronjob/operate/index.vue
@@ -84,59 +84,86 @@
 
                     <el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
                         <div v-for="(specObj, index) of dialogData.rowData.specObjs" :key="index" style="width: 100%">
-                            <el-select class="specTypeClass" v-model="specObj.specType" @change="changeSpecType(index)">
-                                <el-option
-                                    v-for="item in specOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
-                                <el-option
-                                    v-for="item in weekOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
-                                <template #append>
-                                    <div class="append">{{ $t('cronjob.day') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input v-if="hasHour(specObj)" class="specClass" v-model.number="specObj.hour">
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.hour') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="specObj.specType !== 'perNSecond'"
-                                class="specClass"
-                                v-model.number="specObj.minute"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.minute') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="specObj.specType === 'perNSecond'"
-                                class="specClass"
-                                v-model.number="specObj.second"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.second') }}</div>
-                                </template>
-                            </el-input>
-                            <el-button
-                                link
-                                type="primary"
-                                style="float: right; margin-top: 5px"
-                                @click="handleSpecDelete(index)"
-                                v-if="dialogData.rowData.specObjs.length > 1"
-                            >
-                                {{ $t('commons.button.delete') }}
-                            </el-button>
+                            <div class="grid sm:grid-cols-9 gap-4 grid-cols-1">
+                                <el-select
+                                    v-model="specObj.specType"
+                                    class="col-span-2"
+                                    @change="changeSpecType(index)"
+                                >
+                                    <el-option
+                                        v-for="item in specOptions"
+                                        :key="item.label"
+                                        :value="item.value"
+                                        :label="item.label"
+                                    />
+                                </el-select>
+                                <el-select
+                                    v-if="specObj.specType === 'perWeek'"
+                                    class="col-span-2"
+                                    v-model="specObj.week"
+                                >
+                                    <el-option
+                                        v-for="item in weekOptions"
+                                        :key="item.label"
+                                        :value="item.value"
+                                        :label="item.label"
+                                    />
+                                </el-select>
+                                <el-input v-if="hasDay(specObj)" class="col-span-2" v-model.number="specObj.day">
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('cronjob.day')" placement="top">
+                                                {{ $t('cronjob.dayUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input v-if="hasHour(specObj)" class="col-span-2" v-model.number="specObj.hour">
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.hour')" placement="top">
+                                                {{ $t('commons.units.hourUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input
+                                    v-if="specObj.specType !== 'perNSecond'"
+                                    class="col-span-2"
+                                    v-model.number="specObj.minute"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.minute')" placement="top">
+                                                {{ $t('commons.units.minuteUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input
+                                    v-if="specObj.specType === 'perNSecond'"
+                                    class="col-span-2"
+                                    v-model.number="specObj.second"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.second')" placement="top">
+                                                {{ $t('commons.units.secondUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-button
+                                    link
+                                    type="primary"
+                                    class="col-span-1"
+                                    style="float: right; margin-top: 5px"
+                                    @click="handleSpecDelete(index)"
+                                    v-if="dialogData.rowData.specObjs.length > 1"
+                                >
+                                    {{ $t('commons.button.delete') }}
+                                </el-button>
+                            </div>
                             <el-divider v-if="dialogData.rowData.specObjs.length > 1" class="divider" />
                         </div>
                     </el-form-item>
@@ -838,37 +865,9 @@ defineExpose({
 });
 </script>
 <style scoped lang="scss">
-.specClass {
-    width: 20% !important;
-    margin-left: 20px;
-
-    .append {
-        width: 20px;
-    }
+:deep(.el-input-group__append) {
+    padding: 0 10px;
 }
-
-@media only screen and (max-width: 1000px) {
-    .specClass {
-        width: 100% !important;
-        margin-top: 20px;
-        margin-left: 0;
-
-        .append {
-            width: 43px;
-        }
-    }
-}
-
-.specTypeClass {
-    width: 22% !important;
-}
-
-@media only screen and (max-width: 1000px) {
-    .specTypeClass {
-        width: 100% !important;
-    }
-}
-
 .selectClass {
     width: 100%;
 }
diff --git a/frontend/src/views/toolbox/clam/index.vue b/frontend/src/views/toolbox/clam/index.vue
index 2f14f9e2f..62a4a191a 100644
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/frontend/src/views/toolbox/clam/index.vue
@@ -54,7 +54,7 @@
                     <el-table-column type="selection" fix />
                     <el-table-column
                         :label="$t('commons.table.name')"
-                        :min-width="60"
+                        :min-width="90"
                         prop="name"
                         sortable
                         show-overflow-tooltip
@@ -78,7 +78,7 @@
                     <el-table-column
                         v-if="isProductPro"
                         :label="$t('commons.table.status')"
-                        :min-width="70"
+                        :min-width="110"
                         prop="status"
                         sortable
                     >
diff --git a/frontend/src/views/toolbox/clam/operate/index.vue b/frontend/src/views/toolbox/clam/operate/index.vue
index 2a2bde605..c5e30e4d5 100644
--- a/frontend/src/views/toolbox/clam/operate/index.vue
+++ b/frontend/src/views/toolbox/clam/operate/index.vue
@@ -55,66 +55,75 @@
                             <el-checkbox v-model="dialogData.rowData!.hasSpec" :label="$t('toolbox.clam.cron')" />
                         </el-form-item>
                         <el-form-item prop="spec" v-if="dialogData.rowData!.hasSpec && isProductPro">
-                            <el-select
-                                class="specTypeClass"
-                                v-model="dialogData.rowData!.specObj.specType"
-                                @change="changeSpecType()"
-                            >
-                                <el-option
-                                    v-for="item in specOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-select
-                                v-if="dialogData.rowData!.specObj.specType === 'perWeek'"
-                                class="specClass"
-                                v-model="dialogData.rowData!.specObj.week"
-                            >
-                                <el-option
-                                    v-for="item in weekOptions"
-                                    :key="item.label"
-                                    :value="item.value"
-                                    :label="item.label"
-                                />
-                            </el-select>
-                            <el-input
-                                v-if="hasDay(dialogData.rowData!.specObj)"
-                                class="specClass"
-                                v-model.number="dialogData.rowData!.specObj.day"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('cronjob.day') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="hasHour(dialogData.rowData!.specObj)"
-                                class="specClass"
-                                v-model.number="dialogData.rowData!.specObj.hour"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.hour') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="dialogData.rowData!.specObj.specType !== 'perNSecond'"
-                                class="specClass"
-                                v-model.number="dialogData.rowData!.specObj.minute"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.minute') }}</div>
-                                </template>
-                            </el-input>
-                            <el-input
-                                v-if="dialogData.rowData!.specObj.specType === 'perNSecond'"
-                                class="specClass"
-                                v-model.number="dialogData.rowData!.specObj.second"
-                            >
-                                <template #append>
-                                    <div class="append">{{ $t('commons.units.second') }}</div>
-                                </template>
-                            </el-input>
+                            <div class="grid sm:grid-cols-4 gap-4 grid-cols-1">
+                                <el-select v-model="dialogData.rowData!.specObj.specType" @change="changeSpecType()">
+                                    <el-option
+                                        v-for="item in specOptions"
+                                        :key="item.label"
+                                        :value="item.value"
+                                        :label="item.label"
+                                    />
+                                </el-select>
+                                <el-select
+                                    v-if="dialogData.rowData!.specObj.specType === 'perWeek'"
+                                    v-model="dialogData.rowData!.specObj.week"
+                                >
+                                    <el-option
+                                        v-for="item in weekOptions"
+                                        :key="item.label"
+                                        :value="item.value"
+                                        :label="item.label"
+                                    />
+                                </el-select>
+                                <el-input
+                                    v-if="hasDay(dialogData.rowData!.specObj)"
+                                    v-model.number="dialogData.rowData!.specObj.day"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.day')" placement="top">
+                                                {{ $t('commons.units.dayUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input
+                                    v-if="hasHour(dialogData.rowData!.specObj)"
+                                    v-model.number="dialogData.rowData!.specObj.hour"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.hour')" placement="top">
+                                                {{ $t('commons.units.hourUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input
+                                    v-if="dialogData.rowData!.specObj.specType !== 'perNSecond'"
+                                    v-model.number="dialogData.rowData!.specObj.minute"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.minute')" placement="top">
+                                                {{ $t('commons.units.minuteUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                                <el-input
+                                    v-if="dialogData.rowData!.specObj.specType === 'perNSecond'"
+                                    v-model.number="dialogData.rowData!.specObj.second"
+                                >
+                                    <template #append>
+                                        <div class="sm:min-w-8 min-w-14 text-center">
+                                            <el-tooltip :content="$t('commons.units.second')" placement="top">
+                                                {{ $t('commons.units.secondUnit') }}
+                                            </el-tooltip>
+                                        </div>
+                                    </template>
+                                </el-input>
+                            </div>
                         </el-form-item>
                         <el-form-item prop="hasAlert">
                             <el-checkbox v-model="dialogData.rowData!.hasAlert" :label="$t('alert.isAlert')" />
@@ -439,31 +448,3 @@ defineExpose({
     acceptParams,
 });
 </script>
-
-<style scoped lang="scss">
-.specClass {
-    width: 20% !important;
-    margin-left: 20px;
-    .append {
-        width: 20px;
-    }
-}
-@media only screen and (max-width: 1000px) {
-    .specClass {
-        width: 100% !important;
-        margin-top: 20px;
-        margin-left: 0;
-        .append {
-            width: 43px;
-        }
-    }
-}
-.specTypeClass {
-    width: 22% !important;
-}
-@media only screen and (max-width: 1000px) {
-    .specTypeClass {
-        width: 100% !important;
-    }
-}
-</style>