Pr@dev@dan

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();