Pr@dev@dan (#1891)

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

Author: wangdan-fit2cloud

frontend/src/components/container-log/index.vue

@@ -1,21 +1,16 @@
 <template>
     <div>
-        <div>
-            <el-select @change="searchLogs" style="width: 10%; float: left" v-model="logSearch.mode">
+        <div style="display: flex; flex-wrap: wrap">
+            <el-select @change="searchLogs" v-model="logSearch.mode" style="width: 100px">
                 <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-input
-                @change="searchLogs"
-                class="margin-button"
-                style="width: 10%; float: left"
-                v-model.number="logSearch.tail"
-            >
+            <el-input @change="searchLogs" class="margin-button" style="width: 100px" v-model.number="logSearch.tail">
                 <template #prefix>
                     <div style="margin-left: 2px">{{ $t('container.lines') }}</div>
                 </template>
             </el-input>
-            <div class="margin-button" style="float: left">
+            <div class="margin-button">
                 <el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
                     {{ $t('commons.button.watch') }}
                 </el-checkbox>

frontend/src/styles/moblie.scss

@@ -65,7 +65,7 @@
             }
         }
     }
-    
+
     .mini-form-item {
         width: 100% !important;
     }
@@ -84,4 +84,7 @@
             margin-bottom: 10px;
         }
     }
+    .el-dialog {
+        --el-dialog-width: 80% !important;
+    }
 }

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

@@ -119,7 +119,7 @@
                     v-model:page-size="paginationConfig.pageSize"
                     v-bind="paginationConfig"
                     @change="search(req)"
-                    :layout="'total, sizes, prev, pager, next, jumper'"
+                    :layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
                 />
             </div>
         </template>
@@ -129,13 +129,20 @@
 
 <script lang="ts" setup>
 import { App } from '@/api/interface/app';
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, reactive, ref, computed } from 'vue';
 import { GetAppTags, SearchApp, SyncApp } from '@/api/modules/app';
 import i18n from '@/lang';
 import Detail from '../detail/index.vue';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { useI18n } from 'vue-i18n';
+import { GlobalStore } from '@/store';
+
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const language = useI18n().locale.value;
 

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

@@ -54,7 +54,7 @@
                     :data="data"
                     @search="search"
                 >
-                    <el-table-column :label="$t('commons.table.name')" min-width="100" prop="name" fix>
+                    <el-table-column :label="$t('commons.table.name')" width="170" prop="name" fix>
                         <template #default="{ row }">
                             <Tooltip @click="loadDetail(row)" :text="row.name" />
                         </template>

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

@@ -64,7 +64,14 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" sortable fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        :width="mobile ? 300 : 'auto'"
+                        min-width="80"
+                        prop="name"
+                        sortable
+                        fix
+                    >
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.containerID)" :text="row.name" />
                         </template>
@@ -75,12 +82,12 @@
                         min-width="80"
                         prop="imageName"
                     />
-                    <el-table-column :label="$t('commons.table.status')" min-width="60" prop="state" sortable fix>
+                    <el-table-column :label="$t('commons.table.status')" min-width="80" prop="state" sortable fix>
                         <template #default="{ row }">
                             <Status :key="row.state" :status="row.state"></Status>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="75" fix>
+                    <el-table-column :label="$t('container.source')" show-overflow-tooltip min-width="100" fix>
                         <template #default="{ row }">
                             <div v-if="row.hasLoad">
                                 <div>CPU: {{ row.cpuPercent.toFixed(2) }}%</div>
@@ -91,7 +98,13 @@
                             </div>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('commons.table.port')" min-width="120" prop="ports" fix>
+                    <el-table-column
+                        :label="$t('commons.table.port')"
+                        :width="mobile ? 260 : 'auto'"
+                        min-width="120"
+                        prop="ports"
+                        fix
+                    >
                         <template #default="{ row }">
                             <div v-if="row.ports">
                                 <div v-for="(item, index) in row.ports" :key="index">
@@ -127,7 +140,7 @@
                     </el-table-column>
                     <el-table-column
                         :label="$t('container.upTime')"
-                        min-width="70"
+                        min-width="80"
                         show-overflow-tooltip
                         prop="runTime"
                         fix
@@ -168,7 +181,7 @@ import TerminalDialog from '@/views/container/container/terminal/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
 import PortJumpDialog from '@/components/port-jump/index.vue';
 import Status from '@/components/status/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import {
     containerListStats,
     containerOperator,
@@ -184,6 +197,12 @@ import i18n from '@/lang';
 import router from '@/routers';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { computeSize } from '@/utils/util';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref();
 const data = ref();

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

@@ -41,14 +41,25 @@
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
-                    <el-table-column label="ID" prop="id" min-width="50">
+                    <el-table-column label="ID" prop="id" width="120">
                         <template #default="{ row }">
                             <span>{{ row.id.replaceAll('sha256:', '').substring(0, 12) }}</span>
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
+                    <el-table-column
+                        :label="$t('container.tag')"
+                        prop="tags"
+                        min-width="160"
+                        :width="mobile ? 400 : 'auto'"
+                        fix
+                    >
                         <template #default="{ row }">
-                            <el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
+                            <el-tag
+                                style="margin-left: 5px"
+                                v-for="(item, index) of row.tags"
+                                :key="index"
+                                :title="item"
+                            >
                                 {{ item }}
                             </el-tag>
                         </template>
@@ -83,7 +94,7 @@
 
 <script lang="ts" setup>
 import TableSetting from '@/components/table-setting/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import { dateFormat } from '@/utils/util';
 import { Container } from '@/api/interface/container';
 import Pull from '@/views/container/image/pull/index.vue';
@@ -98,6 +109,12 @@ import { searchImage, listImageRepo, loadDockerStatus, imageRemove } from '@/api
 import i18n from '@/lang';
 import router from '@/routers';
 import { useDeleteData } from '@/hooks/use-delete-data';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref(false);
 

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

@@ -44,20 +44,20 @@
                     @search="search"
                 >
                     <el-table-column type="selection" :selectable="selectable" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
+                    <el-table-column :label="$t('commons.table.name')" width="130" prop="name" fix>
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.id)" :text="row.name" />
                         </template>
                     </el-table-column>
-                    <el-table-column min-width="50">
+                    <el-table-column width="90">
                         <template #default="{ row }">
                             <el-tag effect="dark" round v-if="row.isSystem">system</el-tag>
                         </template>
                     </el-table-column>
                     <el-table-column
                         :label="$t('container.driver')"
                         show-overflow-tooltip
-                        min-width="40"
+                        min-width="60"
                         prop="driver"
                     />
                     <el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />

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

@@ -44,12 +44,18 @@
                     @search="search"
                 >
                     <el-table-column type="selection" fix />
-                    <el-table-column :label="$t('commons.table.name')" min-width="80" prop="name" fix>
+                    <el-table-column
+                        :label="$t('commons.table.name')"
+                        min-width="100"
+                        :width="mobile ? 220 : 'auto'"
+                        prop="name"
+                        fix
+                    >
                         <template #default="{ row }">
                             <Tooltip @click="onInspect(row.name)" :text="row.name" />
                         </template>
                     </el-table-column>
-                    <el-table-column :label="$t('container.volumeDir')" min-width="50">
+                    <el-table-column :label="$t('container.volumeDir')" min-width="100">
                         <template #default="{ row }">
                             <el-button type="primary" link @click="toFolder(row.mountpoint)">
                                 <el-icon>
@@ -91,7 +97,7 @@ import Tooltip from '@/components/tooltip/index.vue';
 import TableSetting from '@/components/table-setting/index.vue';
 import CreateDialog from '@/views/container/volume/create/index.vue';
 import CodemirrorDialog from '@/components/codemirror-dialog/index.vue';
-import { reactive, onMounted, ref } from 'vue';
+import { reactive, onMounted, ref, computed } from 'vue';
 import { computeSize, dateFormat } from '@/utils/util';
 import { deleteVolume, searchVolume, inspect, loadDockerStatus, containerPrune } from '@/api/modules/container';
 import { Container } from '@/api/interface/container';
@@ -100,6 +106,12 @@ import { useDeleteData } from '@/hooks/use-delete-data';
 import router from '@/routers';
 import { MsgSuccess } from '@/utils/message';
 import { ElMessageBox } from 'element-plus';
+import { GlobalStore } from '@/store';
+const globalStore = GlobalStore();
+
+const mobile = computed(() => {
+    return globalStore.isMobile();
+});
 
 const loading = ref();
 const detailInfo = ref();