1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-09-12 01:24:38 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: 优化移动端样式 (#6455)
Some checks failed
Build Test / build-linux-binary (push) Failing after -8m53s
Details
Build / SonarCloud (push) Failing after -8m47s
Details
sync2gitee / repo-sync (push) Failing after -8m57s
Details

Browse source
This commit is contained in:
ssongliu 2024-09-11 18:22:15 +08:00 • committed by GitHub
parent 0122b4c6ce
commit 6ae9b982a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 161 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/router-button/index.vue
View file

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

67
frontend/src/components/system-upgrade/index.vue
View file

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

19
frontend/src/layout/components/AppFooter.vue
View file

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

5
frontend/src/styles/common.scss
View file

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

12
frontend/src/views/app-store/index.vue
View file

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

31
frontend/src/views/container/container/log/index.vue
View file

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

6
frontend/src/views/home/index.vue
View file

@ -620,6 +620,12 @@ onBeforeUnmount(() => {
font-size: 14px; font-size: 14px;
color: var(--el-text-color-regular); 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 { .count {
margin-top: 10px; margin-top: 10px;

25
frontend/src/views/host/monitor/monitor/index.vue
View file

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

6
frontend/src/views/host/terminal/terminal/index.vue
View file

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

36
frontend/src/views/log/website/index.vue
View file

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

11
frontend/src/views/setting/backup-account/index.vue
View file

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

12
frontend/src/views/toolbox/clam/index.vue
View file

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

13
frontend/src/views/website/runtime/java/index.vue
View file

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