fix: 优化移动端样式 (#6455)

frontend/src/components/router-button/index.vue

@@ -1,20 +1,24 @@
 <template>
     <el-card class="router_card">
-        <el-radio-group v-model="activeName" @change="handleChange">
-            <el-radio-button
-                class="router_card_button"
-                :label="button.label"
-                :value="button.label"
-                v-for="(button, index) in buttonArray"
-                size="large"
-                :key="index"
-            >
-                <el-badge :value="button.count" v-if="button.count" is-dot>
-                    <span>{{ button.label }}</span>
-                </el-badge>
-            </el-radio-button>
-        </el-radio-group>
-        <slot name="route-button"></slot>
+        <div class="flex w-full flex-col md:justify-between md:flex-row">
+            <el-radio-group v-model="activeName" @change="handleChange">
+                <el-radio-button
+                    class="router_card_button"
+                    :label="button.label"
+                    :value="button.label"
+                    v-for="(button, index) in buttonArray"
+                    size="large"
+                    :key="index"
+                >
+                    <el-badge :value="button.count" v-if="button.count" is-dot>
+                        <span>{{ button.label }}</span>
+                    </el-badge>
+                </el-radio-button>
+            </el-radio-group>
+            <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
+                <slot name="route-button"></slot>
+            </div>
+        </div>
     </el-card>
 </template>
 

frontend/src/components/system-upgrade/index.vue

@@ -1,37 +1,41 @@
 <template>
-    <div class="flx-center">
-        <span v-if="props.footer">
-            <el-button type="primary" link @click="toForum">
-                <span class="font-normal">{{ $t('setting.forum') }}</span>
-            </el-button>
-            <el-divider direction="vertical" />
-            <el-button type="primary" link @click="toDoc">
-                <span class="font-normal">{{ $t('setting.doc2') }}</span>
-            </el-button>
-            <el-divider direction="vertical" />
-            <el-button type="primary" link @click="toGithub">
-                <span class="font-normal">{{ $t('setting.project') }}</span>
+    <div class="flex w-full flex-col gap-2 md:justify-between md:flex-row">
+        <div class="flex flex-wrap gap-4">
+            <span v-if="props.footer">
+                <el-button type="primary" link @click="toForum">
+                    <span class="font-normal">{{ $t('setting.forum') }}</span>
+                </el-button>
+                <el-divider direction="vertical" />
+                <el-button type="primary" link @click="toDoc">
+                    <span class="font-normal">{{ $t('setting.doc2') }}</span>
+                </el-button>
+                <el-divider direction="vertical" />
+                <el-button type="primary" link @click="toGithub">
+                    <span class="font-normal">{{ $t('setting.project') }}</span>
+                </el-button>
+                <el-divider direction="vertical" />
+            </span>
+        </div>
+        <div class="flex flex-wrap">
+            <el-button type="primary" link @click="toHalo">
+                <span class="font-normal">{{ isProductPro ? $t('license.pro') : $t('license.community') }}</span>
             </el-button>
-            <el-divider direction="vertical" />
-        </span>
-        <el-button type="primary" link @click="toHalo">
-            <span class="font-normal">{{ isProductPro ? $t('license.pro') : $t('license.community') }}</span>
-        </el-button>
-        <span class="version" @click="copyText(version)">{{ version }}</span>
-        <el-badge is-dot style="margin-top: -3px" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
-            <el-button type="primary" link @click="onLoadUpgradeInfo">
-                <span class="font-normal">({{ $t('setting.hasNewVersion') }})</span>
+            <span class="version" @click="copyText(version)">{{ version }}</span>
+            <el-badge is-dot style="margin-top: -3px" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
+                <el-button type="primary" link @click="onLoadUpgradeInfo">
+                    <span class="font-normal">({{ $t('setting.hasNewVersion') }})</span>
+                </el-button>
+            </el-badge>
+            <el-button
+                v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
+                type="primary"
+                link
+                @click="onLoadUpgradeInfo"
+            >
+                <span>({{ $t('setting.upgradeCheck') }})</span>
             </el-button>
-        </el-badge>
-        <el-button
-            v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
-            type="primary"
-            link
-            @click="onLoadUpgradeInfo"
-        >
-            <span>({{ $t('setting.upgradeCheck') }})</span>
-        </el-button>
-        <el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
+            <el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
+        </div>
     </div>
     <el-drawer
         :close-on-click-modal="false"
@@ -192,6 +196,7 @@ onMounted(() => {
     text-decoration: none;
     letter-spacing: 0.5px;
     cursor: pointer;
+    margin-top: 2px;
 }
 .line-height {
     line-height: 25px;

frontend/src/layout/components/AppFooter.vue

@@ -1,12 +1,25 @@
 <template>
-    <div class="footer">
-        <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 FIT2CLOUD 飞致云</a>
-        <SystemUpgrade :footer="true" />
+    <div class="footer" :style="{ height: mobile ? '108px' : '48px' }">
+        <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+            <div class="flex flex-wrap gap-4">
+                <a href="https://fit2cloud.com/" target="_blank">Copyright © 2014-2024 FIT2CLOUD 飞致云</a>
+            </div>
+            <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
+                <SystemUpgrade :footer="true" />
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import SystemUpgrade from '@/components/system-upgrade/index.vue';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 </script>
 
 <style scoped lang="scss">

frontend/src/styles/common.scss

@@ -182,7 +182,7 @@ html {
 .mask-prompt {
     position: absolute;
     z-index: 1;
-    top: 220px;
+    top: 320px;
     left: 45%;
     transform: translate(-50%, -50%);
     width: 400px;
@@ -386,7 +386,8 @@ html {
 }
 
 .router-button {
-    margin-right: 20px;
+    margin-right: 30px;
+    padding: 10px;
 }
 
 .text-parent {

frontend/src/views/app-store/index.vue

@@ -3,11 +3,13 @@
         <div v-if="showButton">
             <RouterButton :buttons="buttons">
                 <template #route-button>
-                    <el-badge is-dot :hidden="!canUpdate" class="pr-5">
-                        <el-button @click="sync" type="primary" plain :disabled="syncing">
-                            {{ $t('app.syncAppList') }}
-                        </el-button>
-                    </el-badge>
+                    <div class="pr-5 mt-1">
+                        <el-badge is-dot :hidden="canUpdate">
+                            <el-button @click="sync" type="primary" plain :disabled="syncing">
+                                {{ $t('app.syncAppList') }}
+                            </el-button>
+                        </el-badge>
+                    </div>
                 </template>
             </RouterButton>
         </div>

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

@@ -17,12 +17,12 @@
                     </template>
                 </DrawerHeader>
             </template>
-            <div>
-                <el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
+            <div class="flex w-full flex-col gap-2 md:flex-row">
+                <el-select @change="searchLogs" v-model="logSearch.mode">
                     <template #prefix>{{ $t('container.fetch') }}</template>
                     <el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
                 </el-select>
-                <el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
+                <el-select @change="searchLogs" v-model.number="logSearch.tail">
                     <template #prefix>{{ $t('container.lines') }}</template>
                     <el-option :value="0" :label="$t('commons.table.all')" />
                     <el-option :value="100" :label="100" />
@@ -30,15 +30,13 @@
                     <el-option :value="500" :label="500" />
                     <el-option :value="1000" :label="1000" />
                 </el-select>
-                <div class="margin-button" style="float: left">
-                    <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
-                        {{ $t('commons.button.watch') }}
-                    </el-checkbox>
-                </div>
-                <el-button class="margin-button" @click="onDownload" icon="Download">
+                <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
+                    {{ $t('commons.button.watch') }}
+                </el-checkbox>
+                <el-button @click="onDownload" icon="Download">
                     {{ $t('file.download') }}
                 </el-button>
-                <el-button class="margin-button" @click="onClean" icon="Delete">
+                <el-button @click="onClean" icon="Delete">
                     {{ $t('commons.button.clean') }}
                 </el-button>
             </div>
@@ -236,19 +234,14 @@ defineExpose({
 </script>
 
 <style scoped lang="scss">
-.margin-button {
-    margin-left: 20px;
-}
 .fullScreen {
     border: none;
 }
-.tailClass {
-    width: 20%;
+.select-width {
+    width: 50%;
     float: left;
-    margin-left: 20px;
 }
-.fetchClass {
-    width: 30%;
-    float: left;
+.el-button + .el-button {
+    margin: 0 !important;
 }
 </style>

frontend/src/views/home/index.vue

@@ -620,6 +620,12 @@ onBeforeUnmount(() => {
         font-size: 14px;
         color: var(--el-text-color-regular);
     }
+    @media only screen and (max-width: 1300px) {
+        span:first-child {
+            font-size: 12px;
+            color: var(--el-text-color-regular);
+        }
+    }
 
     .count {
         margin-top: 10px;

frontend/src/views/host/monitor/monitor/index.vue

@@ -4,18 +4,19 @@
 
         <div class="content-container__search">
             <el-card>
-                <span style="font-size: 14px">{{ $t('monitor.globalFilter') }}</span>
-                <el-date-picker
-                    @change="searchGlobal()"
-                    v-model="timeRangeGlobal"
-                    type="datetimerange"
-                    :range-separator="$t('commons.search.timeRange')"
-                    :start-placeholder="$t('commons.search.timeStart')"
-                    :end-placeholder="$t('commons.search.timeEnd')"
-                    :shortcuts="shortcuts"
-                    style="max-width: 360px; width: 100%; margin-left: 10px"
-                    :size="mobile ? 'small' : 'default'"
-                ></el-date-picker>
+                <div :class="mobile ? 'flx-wrap' : 'flx-justify-between'">
+                    <el-date-picker
+                        @change="searchGlobal()"
+                        v-model="timeRangeGlobal"
+                        type="datetimerange"
+                        :range-separator="$t('commons.search.timeRange')"
+                        :start-placeholder="$t('commons.search.timeStart')"
+                        :end-placeholder="$t('commons.search.timeEnd')"
+                        :shortcuts="shortcuts"
+                        style="max-width: 360px; width: 100%"
+                        :size="mobile ? 'small' : 'default'"
+                    ></el-date-picker>
+                </div>
             </el-card>
         </div>
         <el-row :gutter="20" style="margin-top: 20px">

frontend/src/views/host/terminal/terminal/index.vue

@@ -48,8 +48,8 @@
                     :ref="'t-' + item.index"
                     :key="item.Refresh"
                 ></Terminal>
-                <div>
-                    <el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 25%">
+                <div class="flex w-full flex-col md:flex-row">
+                    <el-select v-model="quickCmd" clearable filterable @change="quickInput">
                         <template #prefix>{{ $t('terminal.quickCommand') }}</template>
                         <el-option-group v-for="group in commandTree" :key="group.label" :label="group.label">
                             <el-option
@@ -60,7 +60,7 @@
                             />
                         </el-option-group>
                     </el-select>
-                    <el-input v-model="batchVal" @keyup.enter="batchInput" style="width: 75%">
+                    <el-input v-model="batchVal" @keyup.enter="batchInput">
                         <template #prepend>
                             <el-checkbox :label="$t('terminal.batchInput')" v-model="isBatch" />
                         </template>

frontend/src/views/log/website/index.vue

@@ -2,22 +2,26 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.websiteLog')">
             <template #toolbar>
-                <el-button
-                    class="tag-button"
-                    :class="logConfig.name === 'access.log' ? '' : 'no-active'"
-                    :type="logConfig.name === 'access.log' ? 'primary' : ''"
-                    @click="changeType('access.log')"
-                >
-                    {{ $t('logs.runLog') }}
-                </el-button>
-                <el-button
-                    class="tag-button"
-                    :class="logConfig.name === 'error.log' ? '' : 'no-active'"
-                    :type="logConfig.name === 'error.log' ? 'primary' : ''"
-                    @click="changeType('error.log')"
-                >
-                    {{ $t('logs.errLog') }}
-                </el-button>
+                <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-button
+                            class="tag-button"
+                            :class="logConfig.name === 'access.log' ? '' : 'no-active'"
+                            :type="logConfig.name === 'access.log' ? 'primary' : ''"
+                            @click="changeType('access.log')"
+                        >
+                            {{ $t('logs.runLog') }}
+                        </el-button>
+                        <el-button
+                            class="tag-button"
+                            :class="logConfig.name === 'error.log' ? '' : 'no-active'"
+                            :type="logConfig.name === 'error.log' ? 'primary' : ''"
+                            @click="changeType('error.log')"
+                        >
+                            {{ $t('logs.errLog') }}
+                        </el-button>
+                    </div>
+                </div>
             </template>
             <template #search>
                 <div class="flex flex-wrap items-center gap-2 sm:gap-4">

frontend/src/views/setting/backup-account/index.vue

@@ -16,7 +16,7 @@
                             </div>
                         </div>
                         <el-divider class="divider" />
-                        <div class="grid gird-cols-2 items-center justify-center">
+                        <div class="grid gird-cols-2 items-center ml-5">
                             <el-form-item :label="$t('setting.backupDir')">
                                 {{ localData.varsJson['dir'] }}
                             </el-form-item>
@@ -506,6 +506,7 @@ const localData = ref<Backup.BackupInfo>({
     type: 'LOCAL',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -519,6 +520,7 @@ const ossData = ref<Backup.BackupInfo>({
     type: 'OSS',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -533,6 +535,7 @@ const minioData = ref<Backup.BackupInfo>({
     type: 'MINIO',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -547,6 +550,7 @@ const sftpData = ref<Backup.BackupInfo>({
     type: 'SFTP',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -561,6 +565,7 @@ const webDAVData = ref<Backup.BackupInfo>({
     type: 'WebDAV',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -575,6 +580,7 @@ const oneDriveData = ref<Backup.BackupInfo>({
     type: 'OneDrive',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -590,6 +596,7 @@ const s3Data = ref<Backup.BackupInfo>({
     type: 'S3',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -605,6 +612,7 @@ const cosData = ref<Backup.BackupInfo>({
     type: 'COS',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',
@@ -620,6 +628,7 @@ const kodoData = ref<Backup.BackupInfo>({
     type: 'KODO',
     accessKey: '',
     bucket: '',
+    bucketInput: false,
     credential: '',
     backupPath: '',
     vars: '',

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

@@ -20,8 +20,8 @@
                 />
             </template>
             <template #toolbar v-if="clamStatus.isExist">
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                    <div class="flex flex-wrap gap-4">
                         <el-button type="primary" :disabled="!clamStatus.isRunning" @click="onOpenDialog('add')">
                             {{ $t('toolbox.clam.clamCreate') }}
                         </el-button>
@@ -32,11 +32,11 @@
                         >
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                    </div>
+                    <div class="flex flex-row gap-2 md:flex-col lg:flex-row">
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <el-card v-if="clamStatus.isExist && !clamStatus.isRunning && maskShow" class="mask-prompt">
                 <span>{{ $t('toolbox.clam.notStart') }}</span>

frontend/src/views/website/runtime/java/index.vue

@@ -83,11 +83,12 @@
                         fix
                     />
                     <fu-table-operations
-                        :ellipsis="10"
+                        :ellipsis="mobile ? 0 : 3"
                         width="300px"
                         :buttons="buttons"
+                        :min-width="mobile ? 'auto' : 200"
+                        :fixed="mobile ? false : 'right'"
                         :label="$t('commons.table.operate')"
-                        fixed="right"
                         fix
                     />
                 </ComplexTable>
@@ -102,7 +103,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref, computed } from 'vue';
 import { Runtime } from '@/api/interface/runtime';
 import { OperateRuntime, RuntimeDeleteCheck, SearchRuntimes, SyncRuntime } from '@/api/modules/runtime';
 import { dateFormat } from '@/utils/util';
@@ -119,6 +120,7 @@ import AppResources from '@/views/website/runtime/php/check/index.vue';
 import { ElMessageBox } from 'element-plus';
 import { containerPrune } from '@/api/modules/container';
 import { MsgSuccess } from '@/utils/message';
+import { GlobalStore } from '@/store';
 
 let timer: NodeJS.Timer | null = null;
 const loading = ref(false);
@@ -129,6 +131,11 @@ const dialogPortJumpRef = ref();
 const composeLogRef = ref();
 const checkRef = ref();
 
+const globalStore = GlobalStore();
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const paginationConfig = reactive({
     cacheSizeKey: 'runtime-page-size',
     currentPage: 1,