fix: 优化移动端运行时样式 (#6460)

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

@@ -1,7 +1,7 @@
 <template>
-    <div class="flex w-full flex-col gap-2 md:justify-between md:flex-row">
+    <div>
-        <div class="flex flex-wrap gap-4">
+        <div class="flex w-full flex-col gap-2 md:flex-row">
-            <span v-if="props.footer">
+            <div class="flex flex-wrap" v-if="props.footer">
                 <el-button type="primary" link @click="toForum">
                     <span class="font-normal">{{ $t('setting.forum') }}</span>
                 </el-button>
@@ -13,30 +13,35 @@
                 <el-button type="primary" link @click="toGithub">
                     <span class="font-normal">{{ $t('setting.project') }}</span>
                 </el-button>
-                <el-divider direction="vertical" />
+                <el-divider v-if="!mobile" direction="vertical" />
-            </span>
+            </div>
-        </div>
+            <div class="flex flex-wrap">
-        <div class="flex flex-wrap">
+                <el-button type="primary" link @click="toHalo">
-            <el-button type="primary" link @click="toHalo">
+                    <span class="font-normal">
-                <span class="font-normal">{{ isProductPro ? $t('license.pro') : $t('license.community') }}</span>
+                        {{ isProductPro ? $t('license.pro') : $t('license.community') }}
-            </el-button>
+                    </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>
+                <span class="version" @click="copyText(version)">{{ version }}</span>
-            <el-button
+                <el-badge is-dot style="margin-top: -3px" v-if="version !== 'Waiting' && globalStore.hasNewVersion">
-                v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
+                    <el-button type="primary" link @click="onLoadUpgradeInfo">
-                type="primary"
+                        <span class="font-normal">({{ $t('setting.hasNewVersion') }})</span>
-                link
+                    </el-button>
-                @click="onLoadUpgradeInfo"
+                </el-badge>
-            >
+                <el-button
-                <span>({{ $t('setting.upgradeCheck') }})</span>
+                    v-if="version !== 'Waiting' && !globalStore.hasNewVersion"
-            </el-button>
+                    type="primary"
-            <el-tag v-if="version === 'Waiting'" round style="margin-left: 10px">{{ $t('setting.upgrading') }}</el-tag>
+                    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>
+            </div>
         </div>
     </div>
+
     <el-drawer
         :close-on-click-modal="false"
         :close-on-press-escape="false"
@@ -86,7 +91,7 @@ import i18n from '@/lang';
 import 'md-editor-v3/lib/style.css';
 import { MsgSuccess } from '@/utils/message';
 import { copyText } from '@/utils/util';
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { GlobalStore } from '@/store';
 import { ElMessageBox } from 'element-plus';
 import { storeToRefs } from 'pinia';
@@ -94,6 +99,10 @@ import { storeToRefs } from 'pinia';
 const globalStore = GlobalStore();
 const { isDarkTheme } = storeToRefs(globalStore);
 
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const version = ref<string>('');
 const isProductPro = ref();
 const loading = ref(false);

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

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

frontend/src/views/setting/about/index.vue

@@ -8,10 +8,10 @@
                         <PrimaryLogo v-else />
                     </div>
                     <h3 class="description">{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
-                    <h3>
+                    <div class="flex justify-center">
                         <SystemUpgrade />
-                    </h3>
+                    </div>
-                    <div style="margin-top: 10px">
+                    <div class="flex w-full justify-center my-5 flex-wrap md:flex-row gap-4">
                         <el-link @click="toDoc" class="system-link">
                             <el-icon><Document /></el-icon>
                             <span>{{ $t('setting.doc2') }}</span>

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

@@ -84,8 +84,8 @@
                         fix
                     />
                     <fu-table-operations
-                        :ellipsis="10"
+                        :ellipsis="mobile ? 0 : 10"
-                        width="300px"
+                        :min-width="mobile ? 'auto' : 300"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fixed="right"
@@ -103,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';
@@ -120,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);
@@ -130,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,

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

@@ -84,10 +84,9 @@
                     />
                     <fu-table-operations
                         :ellipsis="mobile ? 0 : 3"
-                        width="300px"
+                        :min-width="mobile ? 'auto' : 300"
                         :buttons="buttons"
-                        :min-width="mobile ? 'auto' : 200"
+                        fixed="right"
-                        :fixed="mobile ? false : 'right'"
                         :label="$t('commons.table.operate')"
                         fix
                     />

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

@@ -83,8 +83,8 @@
                         fix
                     />
                     <fu-table-operations
-                        :ellipsis="10"
+                        :ellipsis="mobile ? 0 : 10"
-                        width="350px"
+                        :min-width="mobile ? 'auto' : 300"
                         :buttons="buttons"
                         :label="$t('commons.table.operate')"
                         fixed="right"
@@ -103,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';
@@ -121,6 +121,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);
@@ -132,6 +133,11 @@ const composeLogRef = ref();
 const moduleRef = ref();
 const checkRef = ref();
 
+const globalStore = GlobalStore();
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
+
 const paginationConfig = reactive({
     cacheSizeKey: 'runtime-page-size',
     currentPage: 1,