zishuo/1Panel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
20 changed files with 79 additions and 61 deletions
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-model:page-size="paginationConfig.pageSize"
v-bind="paginationConfig" v-bind="paginationConfig"
@change="search" @change="search"
:small="mobile"
:layout="mobile ? 'total, prev, pager, next' : 'total, sizes, prev, pager, next, jumper'"
/> />
</slot> </slot>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref, computed } from 'vue';
import { GlobalStore } from '@/store';
defineOptions({ name: 'ComplexTable' }); defineOptions({ name: 'ComplexTable' });
defineProps({ defineProps({
header: String, header: String,
@@ -51,6 +55,13 @@ defineProps({
}, },
}); });
const emit = defineEmits(['search', 'update:selects']); const emit = defineEmits(['search', 'update:selects']);
const globalStore = GlobalStore();
const mobile = computed(() => {
return globalStore.isMobile();
});
const condition = ref({}); const condition = ref({});
const tableRef = ref(); const tableRef = ref();
function search(conditions: any, e: any) { 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 { .main-box {
position: relative; 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 { .main-content {
margin-top: 20px; margin-top: 20px;

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

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

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

@@ -34,4 +34,10 @@
overflow: inherit !important; 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')"> <LayoutContent v-loading="loading" v-if="!showDetail" :title="$t('app.app')">
<template #toolbar> <template #toolbar>
<el-row :gutter="5"> <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 <el-button
class="tag-button" class="tag-button"
:class="activeTag === 'all' ? '' : 'no-active'" :class="activeTag === 'all' ? '' : 'no-active'"
@@ -24,7 +24,7 @@
</el-button> </el-button>
</div> </div>
</el-col> </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"> <div class="search-button">
<el-input <el-input
v-model="req.name" v-model="req.name"
@@ -49,7 +49,7 @@
<div class="app-card"> <div class="app-card">
<el-card class="e-card"> <el-card class="e-card">
<el-row :gutter="20"> <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"> <div class="app-icon">
<el-avatar <el-avatar
shape="square" shape="square"
@@ -58,7 +58,7 @@
/> />
</div> </div>
</el-col> </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-content">
<div class="app-header"> <div class="app-header">
<span class="app-title">{{ app.name }}</span> <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"> <LayoutContent v-loading="loading || syncLoading" :title="activeName">
<template #toolbar> <template #toolbar>
<el-row :gutter="5"> <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> <div>
<el-button <el-button
class="tag-button" class="tag-button"
@@ -26,7 +26,7 @@
</div> </div>
</div> </div>
</el-col> </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"> <div class="search-button">
<el-input <el-input
class="table-button" 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' }"> <LayoutContent :title="$t('container.container')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar> <template #toolbar>
<el-row> <el-row>
<el-col :span="16"> <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onCreate()"> <el-button type="primary" @click="onCreate()">
{{ $t('container.createContainer') }} {{ $t('container.createContainer') }}
</el-button> </el-button>
@@ -39,7 +39,7 @@
</el-button> </el-button>
</el-button-group> </el-button-group>
</el-col> </el-col>
<el-col :span="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<div class="search-button"> <div class="search-button">
<el-input <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')"> <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('cronjob.cronTask')">
<template #toolbar> <template #toolbar>
<el-row> <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')"> <el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }} {{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
</el-button> </el-button>
@@ -19,7 +19,7 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<div class="search-button"> <div class="search-button">
<el-input <el-input

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

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

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

@@ -23,7 +23,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top: 20px"> <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"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">CPU</span> <span class="title">CPU</span>
@@ -41,7 +41,7 @@
<div id="loadCPUChart" class="chart"></div> <div id="loadCPUChart" class="chart"></div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.memory') }}</span> <span class="title">{{ $t('monitor.memory') }}</span>
@@ -61,7 +61,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top: 20px"> <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"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.disk') }} IO</span> <span class="title">{{ $t('monitor.disk') }} IO</span>
@@ -79,7 +79,7 @@
<div id="loadIOChart" class="chart"></div> <div id="loadIOChart" class="chart"></div>
</el-card> </el-card>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<el-card style="overflow: inherit"> <el-card style="overflow: inherit">
<template #header> <template #header>
<span class="title">{{ $t('monitor.network') }} IO:</span> <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')"> <LayoutContent v-loading="loading" :title="$t('ssh.loginLogs')">
<template #toolbar> <template #toolbar>
<el-row> <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()"> <el-select v-model="searchStatus" @change="search()">
<template #prefix>{{ $t('commons.table.status') }}</template> <template #prefix>{{ $t('commons.table.status') }}</template>
<el-option :label="$t('commons.table.all')" value="All"></el-option> <el-option :label="$t('commons.table.all')" value="All"></el-option>
@@ -17,7 +17,7 @@
{{ $t('commons.status.failed') }}： {{ faliedCount }} {{ $t('commons.status.failed') }}： {{ faliedCount }}
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<div class="search-button"> <div class="search-button">
<el-input <el-input
@@ -36,18 +36,18 @@
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search"> <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="80" :label="$t('logs.loginIP')" prop="address" />
<el-table-column min-width="30" :label="$t('ssh.belong')" prop="isLocal"> <el-table-column min-width="60" :label="$t('ssh.belong')" prop="isLocal">
<template #default="{ row }">{{ row.isLocal ? $t('ssh.local') : $t('ssh.remote') }}</template> <template #default="{ row }">{{ row.isLocal ? $t('ssh.local') : $t('ssh.remote') }}</template>
</el-table-column> </el-table-column>
<el-table-column min-width="40" :label="$t('firewall.port')" prop="port" /> <el-table-column min-width="60" :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('ssh.loginMode')" prop="authMode">
<template #default="{ row }"> <template #default="{ row }">
<span v-if="row.authMode">{{ $t('ssh.' + row.authMode) }}</span> <span v-if="row.authMode">{{ $t('ssh.' + row.authMode) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="40" :label="$t('ssh.loginUser')" prop="user" /> <el-table-column min-width="60" :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('logs.loginStatus')" prop="status">
<template #default="{ row }"> <template #default="{ row }">
<div v-if="row.status === 'Success'"> <div v-if="row.status === 'Success'">
<el-tag type="success">{{ $t('commons.status.success') }}</el-tag> <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-radio-group>
<el-row style="margin-top: 20px" v-if="confShowType === 'base'"> <el-row style="margin-top: 20px" v-if="confShowType === 'base'">
<el-col :span="1"><br /></el-col> <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 :model="form" label-position="left" ref="formRef" label-width="120px">
<el-form-item :label="$t('ssh.port')" prop="port"> <el-form-item :label="$t('ssh.port')" prop="port">
<el-input disabled v-model.number="form.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')"> <LayoutContent v-loading="loading" :title="$t('logs.login')">
<template #toolbar> <template #toolbar>
<el-row> <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')"> <el-button class="no-active-button" @click="onChangeRoute('OperationLog')">
{{ $t('logs.operation') }} {{ $t('logs.operation') }}
</el-button> </el-button>
@@ -14,7 +14,7 @@
{{ $t('logs.system') }} {{ $t('logs.system') }}
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<div class="search-button"> <div class="search-button">
<el-input <el-input

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

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

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

@@ -38,7 +38,7 @@
</el-alert> </el-alert>
<el-row :gutter="20" class="common-div"> <el-row :gutter="20" class="common-div">
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div> <div>
<svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span> <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
@@ -76,7 +76,7 @@
</el-button> </el-button>
</el-alert> </el-alert>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div> <div>
<svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.OSS') }}</span> <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.OSS') }}</span>
@@ -114,7 +114,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" class="common-div"> <el-row :gutter="20" class="common-div">
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div> <div>
<svg-icon style="font-size: 7px" iconName="p-tengxunyun1"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-tengxunyun1"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.COS') }}</span> <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.COS') }}</span>
@@ -149,7 +149,7 @@
</el-button> </el-button>
</el-alert> </el-alert>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div> <div>
<svg-icon style="font-size: 7px" iconName="p-qiniuyun"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-qiniuyun"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.KODO') }}</span> <span style="font-size: 14px; font-weight: 500">&nbsp;{{ $t('setting.KODO') }}</span>
@@ -187,7 +187,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="margin-top: 20px"> <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> <div>
<svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;MINIO</span> <span style="font-size: 14px; font-weight: 500">&nbsp;MINIO</span>
@@ -222,7 +222,7 @@
</el-button> </el-button>
</el-alert> </el-alert>
</el-col> </el-col>
<el-col :span="12"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
<div> <div>
<svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon> <svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
<span style="font-size: 14px; font-weight: 500">&nbsp;SFTP</span> <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"> <div v-loading="loading">
<LayoutContent :title="$t('setting.panel')" :divider="true"> <LayoutContent :title="$t('setting.panel')" :divider="true">
<template #main> <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-row>
<el-col :span="1"><br /></el-col> <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-form-item :label="$t('setting.user')" prop="userName">
<el-input disabled v-model="form.userName"> <el-input disabled v-model="form.userName">
<template #append> <template #append>

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

@@ -2,10 +2,10 @@
<div> <div>
<LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true"> <LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true">
<template #main> <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-row>
<el-col :span="1"><br /></el-col> <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-form-item :label="$t('setting.panelPort')" prop="serverPort">
<el-input disabled v-model.number="form.serverPort"> <el-input disabled v-model.number="form.serverPort">
<template #append> <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')"> <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot')">
<template #toolbar> <template #toolbar>
<el-row> <el-row>
<el-col :span="16"> <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<el-button type="primary" @click="onCreate()"> <el-button type="primary" @click="onCreate()">
{{ $t('setting.createSnapshot') }} {{ $t('setting.createSnapshot') }}
</el-button> </el-button>
@@ -14,7 +14,7 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="8"> <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
<TableSetting ref="timerRef" @search="search()" /> <TableSetting ref="timerRef" @search="search()" />
<div class="search-button"> <div class="search-button">
<el-input <el-input

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

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

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

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