gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-13 17:24:44 +08:00
Code

feat: 兼容移动端 (#1126)

Browse Source 
#### 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.
This commit is contained in:
wangdan-fit2cloud 2023-05-24 16:36:54 +08:00 committed by GitHub
parent f77972fa38
commit 83ac2f1ff7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 79 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/components/complex-table/index.vue
View File

@ -34,13 +34,17 @@
v-model:page-size="paginationConfig.pageSize"
v-bind="paginationConfig"
@change="search"
:small="mobile"
:layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
/>
</slot>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { GlobalStore } from '@/store';
defineOptions({ name: 'ComplexTable' });
defineProps({
header: String,
@ -51,6 +55,13 @@ defineProps({
},
});
const emit = defineEmits(['search', 'update:selects']);
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const condition = ref({});
const tableRef = ref();
function search(conditions: any, e: any) {

12
frontend/src/components/layout-content/index.vue
View File

@ -132,18 +132,6 @@ const showBack = computed(() => {
.main-box {
position: relative;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 5px;
overflow: auto;
overflow-x: hidden !important;
// background-color: #f0f2f5;
border-radius: 4px;
// box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
&::-webkit-scrollbar {
background-color: white;
}
}
.main-content {
margin-top: 20px;

3
frontend/src/store/index.ts
View File

@ -57,6 +57,9 @@ export const GlobalStore = defineStore({
toggleDevice(value: DeviceType) {
this.device = value;
},
isMobile() {
return this.device === DeviceType.Mobile;
},
},
persist: piniaPersistConfig('GlobalState'),
});

6
frontend/src/styles/moblie.scss
View File

@ -34,4 +34,10 @@
overflow: inherit !important;
}
}
.router_card_button {
padding: 2px 0;
}
.el-drawer.rtl {
width: 80% !important;
}
}

8
frontend/src/views/app-store/apps/index.vue
View File

@ -2,7 +2,7 @@
<LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
<template #toolbar>
<el-row :gutter="5">
<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<el-button
class="tag-button"
:class="activeTag === 'all' ? '' : 'no-active'"
@ -24,7 +24,7 @@
</el-button>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<div class="search-button">
<el-input
v-model="req.name"
@ -49,7 +49,7 @@
<div class="app-card">
<el-card class="e-card">
<el-row :gutter="20">
<el-col :xs="8" :sm="5" :md="6" :lg="6" :xl="5">
<el-col :xs="8" :sm="6" :md="6" :lg="6" :xl="5">
<div class="app-icon">
<el-avatar
shape="square"
@ -58,7 +58,7 @@
/>
</div>
</el-col>
<el-col :xs="16" :sm="19" :md="18" :lg="18" :xl="19">
<el-col :xs="16" :sm="18" :md="18" :lg="18" :xl="19">
<div class="app-content">
<div class="app-header">
<span class="app-title">{{ app.name }}</span>

4
frontend/src/views/app-store/installed/index.vue
View File

@ -2,7 +2,7 @@
<LayoutContent v-loading="loading || syncLoading" :title="activeName">
<template #toolbar>
<el-row :gutter="5">
<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<div>
<el-button
class="tag-button"
@ -26,7 +26,7 @@
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<div class="search-button">
<el-input
class="table-button"

4
frontend/src/views/container/container/index.vue
View File

@ -8,7 +8,7 @@
<LayoutContent :title="$t('container.container')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onCreate()">
{{ $t('container.createContainer') }}
</el-button>
@ -39,7 +39,7 @@
</el-button>
</el-button-group>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input

4
frontend/src/views/cronjob/index.vue
View File

@ -11,7 +11,7 @@
<LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('cronjob.cronTask')">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
</el-button>
@ -19,7 +19,7 @@
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input

4
frontend/src/views/database/mysql/index.vue
View File

@ -13,7 +13,7 @@
<template #toolbar v-if="mysqlIsExist && !isOnSetting">
<el-row :class="{ mask: mysqlStatus != 'Running' }">
<el-col :span="20">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<el-button type="primary" @click="onOpenDialog()">
{{ $t('database.create') }}
</el-button>
@ -25,7 +25,7 @@
</el-button>
<el-button @click="goDashboard" icon="Position" type="primary" plain>phpMyAdmin</el-button>
</el-col>
<el-col :span="4">
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<div class="search-button">
<el-input
v-model="searchName"

8
frontend/src/views/host/monitor/monitor/index.vue
View File

@ -23,7 +23,7 @@
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
<span class="title">CPU</span>
@ -41,7 +41,7 @@
<div id="loadCPUChart" class="chart"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
<span class="title">{{ $t('monitor.memory') }}</span>
@ -61,7 +61,7 @@
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
<span class="title">{{ $t('monitor.disk') }} IO</span>
@ -79,7 +79,7 @@
<div id="loadIOChart" class="chart"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit">
<template #header>
<span class="title">{{ $t('monitor.network') }} IO:</span>

16
frontend/src/views/host/ssh/log/log.vue
View File

@ -3,7 +3,7 @@
<LayoutContent v-loading="loading" :title="$t('ssh.loginLogs')">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-select v-model="searchStatus" @change="search()">
<template #prefix>{{ $t('commons.table.status') }}</template>
<el-option :label="$t('commons.table.all')" value="All"></el-option>
@ -17,7 +17,7 @@
{{ $t('commons.status.failed') }}： {{ faliedCount }}
</el-button>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
@ -36,18 +36,18 @@
<template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column min-width="60" :label="$t('logs.loginIP')" prop="address" />
<el-table-column min-width="30" :label="$t('ssh.belong')" prop="isLocal">
<el-table-column min-width="80" :label="$t('logs.loginIP')" prop="address" />
<el-table-column min-width="60" :label="$t('ssh.belong')" prop="isLocal">
<template #default="{ row }">{{ row.isLocal ? $t('ssh.local') : $t('ssh.remote') }}</template>
</el-table-column>
<el-table-column min-width="40" :label="$t('firewall.port')" prop="port" />
<el-table-column min-width="40" :label="$t('ssh.loginMode')" prop="authMode">
<el-table-column min-width="60" :label="$t('firewall.port')" prop="port" />
<el-table-column min-width="60" :label="$t('ssh.loginMode')" prop="authMode">
<template #default="{ row }">
<span v-if="row.authMode">{{ $t('ssh.' + row.authMode) }}</span>
</template>
</el-table-column>
<el-table-column min-width="40" :label="$t('ssh.loginUser')" prop="user" />
<el-table-column min-width="40" :label="$t('logs.loginStatus')" prop="status">
<el-table-column min-width="60" :label="$t('ssh.loginUser')" prop="user" />
<el-table-column min-width="60" :label="$t('logs.loginStatus')" prop="status">
<template #default="{ row }">
<div v-if="row.status === 'Success'">
<el-tag type="success">{{ $t('commons.status.success') }}</el-tag>

2
frontend/src/views/host/ssh/ssh/index.vue
View File

@ -42,7 +42,7 @@
</el-radio-group>
<el-row style="margin-top: 20px" v-if="confShowType === 'base'">
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-col :xs="24" :sm="20" :md="20" :lg="10" :xl="10">
<el-form :model="form" label-position="left" ref="formRef" label-width="120px">
<el-form-item :label="$t('ssh.port')" prop="port">
<el-input disabled v-model.number="form.port">

4
frontend/src/views/log/login/index.vue
View File

@ -3,7 +3,7 @@
<LayoutContent v-loading="loading" :title="$t('logs.login')">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button class="no-active-button" @click="onChangeRoute('OperationLog')">
{{ $t('logs.operation') }}
</el-button>
@ -14,7 +14,7 @@
{{ $t('logs.system') }}
</el-button>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input

4
frontend/src/views/log/operation/index.vue
View File

@ -3,7 +3,7 @@
<LayoutContent v-loading="loading" :title="$t('logs.operation')">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onChangeRoute('OperationLog')">
{{ $t('logs.operation') }}
</el-button>
@ -14,7 +14,7 @@
{{ $t('logs.system') }}
</el-button>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input

12
frontend/src/views/setting/backup-account/index.vue
View File

@ -38,7 +38,7 @@
</el-alert>
<el-row :gutter="20" class="common-div">
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
@ -76,7 +76,7 @@
</el-button>
</el-alert>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.OSS') }}</span>
@ -114,7 +114,7 @@
</el-col>
</el-row>
<el-row :gutter="20" class="common-div">
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-tengxunyun1"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.COS') }}</span>
@ -149,7 +149,7 @@
</el-button>
</el-alert>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-qiniuyun"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.KODO') }}</span>
@ -187,7 +187,7 @@
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;MINIO</span>
@ -222,7 +222,7 @@
</el-button>
</el-alert>
</el-col>
<el-col :span="12">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div>
<svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;SFTP</span>

4
frontend/src/views/setting/panel/index.vue
View File

@ -2,10 +2,10 @@
<div v-loading="loading">
<LayoutContent :title="$t('setting.panel')" :divider="true">
<template #main>
<el-form :model="form" label-position="left" label-width="180px">
<el-form :model="form" label-position="left" label-width="150px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
<el-form-item :label="$t('setting.user')" prop="userName">
<el-input disabled v-model="form.userName">
<template #append>

4
frontend/src/views/setting/safe/index.vue
View File

@ -2,10 +2,10 @@
<div>
<LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
<template #main>
<el-form :model="form" v-loading="loading" label-position="left" label-width="180px">
<el-form :model="form" v-loading="loading" label-position="left" label-width="150px">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="12">
<el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12">
<el-form-item :label="$t('setting.panelPort')" prop="serverPort">
<el-input disabled v-model.number="form.serverPort">
<template #append>

4
frontend/src/views/setting/snapshot/index.vue
View File

@ -3,7 +3,7 @@
<LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot')">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onCreate()">
{{ $t('setting.createSnapshot') }}
</el-button>
@ -14,7 +14,7 @@
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting ref="timerRef" @search="search()" />
<div class="search-button">
<el-input

10
frontend/src/views/website/ssl/index.vue
View File

@ -69,7 +69,7 @@
:ellipsis="3"
:buttons="buttons"
:label="$t('commons.table.operate')"
fixed="right"
:fixed="mobile ? false : 'right'"
fix
/>
</ComplexTable>
@ -84,7 +84,7 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { onMounted, reactive, ref, computed } from 'vue';
import { DeleteSSL, SearchSSL, UpdateSSL } from '@/api/modules/website';
import DnsAccount from './dns-account/index.vue';
import AcmeAccount from './acme-account/index.vue';
@ -96,6 +96,8 @@ import i18n from '@/lang';
import { Website } from '@/api/interface/website';
import { useDeleteData } from '@/hooks/use-delete-data';
import { MsgSuccess } from '@/utils/message';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const paginationConfig = reactive({
currentPage: 1,
@ -141,6 +143,10 @@ const buttons = [
},
];
const mobile = computed(() => {
return globalStore.isMobile();
});
const search = () => {
const req = {
page: paginationConfig.currentPage,

14
frontend/src/views/website/website/index.vue
View File

@ -20,7 +20,7 @@
</template>
<template v-if="nginxIsExist && !openNginxConfig" #toolbar>
<el-row :class="{ mask: nginxStatus != 'Running' }">
<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<el-button type="primary" @click="openCreate">
{{ $t('website.create') }}
</el-button>
@ -31,7 +31,7 @@
{{ $t('website.defaultServer') }}
</el-button>
</el-col>
<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<div class="search-button">
<el-input
v-model="req.name"
@ -144,7 +144,7 @@
width="400px"
:buttons="buttons"
:label="$t('commons.table.operate')"
fixed="right"
:fixed="mobile ? false : 'right'"
fix
/>
</ComplexTable>
@ -168,7 +168,7 @@ import Tooltip from '@/components/tooltip/index.vue';
import Backups from '@/components/backup/index.vue';
import UploadDialog from '@/components/upload/index.vue';
import DefaultServer from '@/views/website/website/default/index.vue';
import { onMounted, reactive, ref } from '@vue/runtime-core';
import { onMounted, reactive, ref, computed } from '@vue/runtime-core';
import CreateWebSite from './create/index.vue';
import DeleteWebsite from './delete/index.vue';
import GroupDialog from '@/components/group/index.vue';
@ -187,6 +187,8 @@ import { VideoPlay, VideoPause } from '@element-plus/icons-vue';
import MsgInfo from '@/components/msg-info/index.vue';
import { GetGroupList } from '@/api/modules/group';
import { Group } from '@/api/interface/group';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const shortcuts = [
{
@ -233,7 +235,9 @@ let req = reactive({
pageSize: 10,
websiteGroupId: 0,
});
const mobile = computed(() => {
return globalStore.isMobile();
});
const search = async () => {
req.page = paginationConfig.currentPage;
req.pageSize = paginationConfig.pageSize;