style: Adjusted some English layouts (#7305)

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 }}

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',

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: '周三',

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: '周三',

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;

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

@@ -84,7 +84,12 @@
 
                     <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)">
+                            <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"
@@ -92,7 +97,11 @@
                                         :label="item.label"
                                     />
                                 </el-select>
-                            <el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
+                                <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"
@@ -100,43 +109,61 @@
                                         :label="item.label"
                                     />
                                 </el-select>
-                            <el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
+                                <el-input v-if="hasDay(specObj)" class="col-span-2" v-model.number="specObj.day">
                                     <template #append>
-                                    <div class="append">{{ $t('cronjob.day') }}</div>
+                                        <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="specClass" v-model.number="specObj.hour">
+                                <el-input v-if="hasHour(specObj)" class="col-span-2" v-model.number="specObj.hour">
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.hour') }}</div>
+                                        <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="specClass"
+                                    class="col-span-2"
                                     v-model.number="specObj.minute"
                                 >
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.minute') }}</div>
+                                        <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="specClass"
+                                    class="col-span-2"
                                     v-model.number="specObj.second"
                                 >
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.second') }}</div>
+                                        <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 {
+:deep(.el-input-group__append) {
-    width: 20% !important;
+    padding: 0 10px;
-    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;
-    }
-}
-
 .selectClass {
     width: 100%;
 }

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
                     >

frontend/src/views/toolbox/clam/operate/index.vue

@@ -55,11 +55,8 @@
                             <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
+                            <div class="grid sm:grid-cols-4 gap-4 grid-cols-1">
-                                class="specTypeClass"
+                                <el-select v-model="dialogData.rowData!.specObj.specType" @change="changeSpecType()">
-                                v-model="dialogData.rowData!.specObj.specType"
-                                @change="changeSpecType()"
-                            >
                                     <el-option
                                         v-for="item in specOptions"
                                         :key="item.label"
@@ -69,7 +66,6 @@
                                 </el-select>
                                 <el-select
                                     v-if="dialogData.rowData!.specObj.specType === 'perWeek'"
-                                class="specClass"
                                     v-model="dialogData.rowData!.specObj.week"
                                 >
                                     <el-option
@@ -81,40 +77,53 @@
                                 </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>
+                                        <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)"
-                                class="specClass"
                                     v-model.number="dialogData.rowData!.specObj.hour"
                                 >
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.hour') }}</div>
+                                        <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'"
-                                class="specClass"
                                     v-model.number="dialogData.rowData!.specObj.minute"
                                 >
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.minute') }}</div>
+                                        <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'"
-                                class="specClass"
                                     v-model.number="dialogData.rowData!.specObj.second"
                                 >
                                     <template #append>
-                                    <div class="append">{{ $t('commons.units.second') }}</div>
+                                        <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>