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

2024-09-20 07:35:58 +08:00 · 2024-09-11 18:22:15 +08:00 · 2024-09-11 18:22:15 +08:00 · 6ae9b982a9
parent 0122b4c6ce
commit 6ae9b982a9
13 changed files with 161 additions and 116 deletions
--- a/frontend/src/components/router-button/index.vue
+++ b/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>

--- a/frontend/src/components/system-upgrade/index.vue
+++ b/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>
+    <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" />
-            <el-button type="primary" link @click="toDoc">
-                <span class="font-normal">{{ $t('setting.doc2') }}</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-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>
-        <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>
-            </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;
--- a/frontend/src/layout/components/AppFooter.vue
+++ b/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">
--- a/frontend/src/styles/common.scss
+++ b/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 {
--- a/frontend/src/views/app-store/index.vue
+++ b/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>
--- a/frontend/src/views/container/container/log/index.vue
+++ b/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>
--- a/frontend/src/views/home/index.vue
+++ b/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;
--- a/frontend/src/views/host/monitor/monitor/index.vue
+++ b/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">
--- a/frontend/src/views/host/terminal/terminal/index.vue
+++ b/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>
--- a/frontend/src/views/log/website/index.vue
+++ b/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">
--- a/frontend/src/views/setting/backup-account/index.vue
+++ b/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: '',
--- a/frontend/src/views/toolbox/clam/index.vue
+++ b/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>
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/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,