U mobile compatible

This commit is contained in:
zhenorzz 2021-05-24 22:02:52 +08:00
parent 6363035925
commit 2e8e1a376e
11 changed files with 63 additions and 14 deletions

View File

@ -47,7 +47,6 @@ import ScrollPane from './ScrollPane.vue'
import path from 'path-browserify'
import { defineComponent } from 'vue'
import { mapState } from 'vuex'
import { deepClone } from '@/utils'
export default defineComponent({
components: { ScrollPane },

View File

@ -2,11 +2,16 @@ import store from '@/store'
const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design
import { mapState } from 'vuex'
import { defineComponent } from 'vue'
export default defineComponent({
computed: {
...mapState(['app']),
},
watch: {
$route() {
if (this.device === 'mobile' && this.sidebar.opened) {
if (this.app.device === 'mobile' && this.app.sidebar.opened) {
store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
},

View File

@ -5,6 +5,11 @@
}
}
.el-message-box {
width: 98%!important;
max-width: 420px;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;

View File

@ -45,6 +45,7 @@
:label="$t('op')"
width="130"
align="center"
fixed="right"
>
<template #default="scope">
<el-button
@ -72,12 +73,19 @@
@current-change="handleCurrentChange"
/>
</el-row>
<el-dialog v-model="dialogVisible" :title="$t('setting')">
<el-dialog
v-model="dialogVisible"
:fullscreen="$store.state.app.device === 'mobile'"
:title="$t('setting')"
>
<el-form
ref="form"
:rules="formRules"
:model="formData"
label-width="80px"
:label-position="
$store.state.app.device === 'desktop' ? 'right' : 'top'
"
>
<el-form-item :label="$t('account')" prop="account">
<el-input v-model="formData.account" autocomplete="off" />

View File

@ -3,6 +3,7 @@
v-model="dialogVisible"
:title="$t('manage')"
:close-on-click-modal="false"
:fullscreen="$store.state.app.device === 'mobile'"
>
<el-row class="app-bar" type="flex" justify="end">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
@ -98,6 +99,7 @@
:label="$t('op')"
width="80"
align="center"
fixed="right"
>
<template #default="scope">
<el-button

View File

@ -18,7 +18,7 @@
:data="tableData"
style="width: 100%"
>
<el-table-column prop="id" label="ID" width="160" />
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="name" :label="$t('name')" />
<el-table-column
prop="insertTime"
@ -37,6 +37,7 @@
:label="$t('member')"
width="80"
align="center"
fixed="right"
>
<template #default="scope">
<el-button type="text" @click="handleUser(scope.row)">
@ -49,6 +50,7 @@
:label="$t('op')"
width="80"
align="center"
fixed="right"
>
<template #default="scope">
<el-button
@ -69,12 +71,19 @@
@current-change="handlePageChange"
/>
</el-row>
<el-dialog v-model="dialogVisible" :title="$t('setting')">
<el-dialog
v-model="dialogVisible"
:title="$t('setting')"
:fullscreen="$store.state.app.device === 'mobile'"
>
<el-form
ref="form"
:rules="formRules"
:model="formData"
label-width="80px"
:label-position="
$store.state.app.device === 'desktop' ? 'right' : 'top'
"
>
<el-form-item :label="$t('name')" prop="name">
<el-input v-model="formData.name" autocomplete="off" />

View File

@ -3,6 +3,7 @@
v-model="dialogVisible"
:title="$t('import')"
:close-on-click-modal="false"
:fullscreen="$store.state.app.device === 'mobile'"
>
<el-row>
<el-row type="flex" style="width: 100%">

View File

@ -3,6 +3,7 @@
v-model="dialogVisible"
:title="$t('manage')"
:close-on-click-modal="false"
:fullscreen="$store.state.app.device === 'mobile'"
>
<el-row class="app-bar" type="flex" justify="end">
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
@ -15,7 +16,7 @@
<el-form ref="form" :inline="true" :rules="formRules" :model="formData">
<el-form-item
:label="$t('server')"
label-width="120px"
label-width="80px"
prop="serverIds"
>
<el-select v-model="formData.serverIds" multiple>
@ -79,6 +80,7 @@
:label="$t('op')"
width="80"
align="center"
fixed="right"
>
<template #default="scope">
<el-button

View File

@ -1,15 +1,15 @@
<template>
<el-row class="app-container">
<el-row class="app-bar" type="flex" justify="space-between">
<el-row>
<el-col :span="16">
<el-input
v-model="crontabCommand"
style="width: 200px"
style="width: 150px"
placeholder="Fitler the command"
/>
<el-button type="primary" icon="el-icon-search" @click="searchList" />
</el-row>
<el-row>
</el-col>
<el-col :span="8" style="text-align: right">
<el-tooltip effect="dark" :content="$t('import')" placement="top">
<el-button
type="primary"
@ -18,7 +18,7 @@
/>
</el-tooltip>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd" />
</el-row>
</el-col>
</el-row>
<el-table
v-loading="tableLoading"
@ -60,6 +60,7 @@
width="80"
:label="$t('server')"
align="center"
fixed="right"
>
<template #default="scope">
<el-button type="text" @click="handleServer(scope.row)">{{
@ -98,13 +99,20 @@
@current-change="handlePageChange"
/>
</el-row>
<el-dialog v-model="dialogVisible" :title="$t('setting')">
<el-dialog
v-model="dialogVisible"
:fullscreen="$store.state.app.device === 'mobile'"
:title="$t('setting')"
>
<el-form
ref="form"
v-loading="formProps.loading"
:rules="formRules"
:model="formData"
label-width="80px"
:label-position="
$store.state.app.device === 'desktop' ? 'right' : 'top'
"
>
<el-form-item :label="$t('time')" prop="date">
<el-input
@ -155,6 +163,7 @@
v-model="crontabRemoveVisible"
:title="$t('remove')"
width="500px"
:fullscreen="$store.state.app.device === 'mobile'"
>
<el-form
ref="crontabRemoveForm"
@ -179,8 +188,9 @@
:disabled="crontabRemoveFormProps.disabled"
type="primary"
@click="remove"
>{{ $t('confirm') }}</el-button
>
{{ $t('confirm') }}
</el-button>
</template>
</el-dialog>
<TheImportDialog

View File

@ -3,6 +3,7 @@
ref="drawer"
v-model="drawerVisible"
:title="`${serverRow.name}(${serverRow.description})`"
:direction="$store.state.app.device === 'mobile' ? 'ttb' : 'rtl'"
@opened="connectTerminal"
@closed="closeTerminal"
>

View File

@ -85,13 +85,20 @@
@current-change="handlePageChange"
/>
</el-row>
<el-dialog v-model="dialogVisible" :title="$t('setting')">
<el-dialog
v-model="dialogVisible"
:fullscreen="$store.state.app.device === 'mobile'"
:title="$t('setting')"
>
<el-form
ref="form"
v-loading="formProps.loading"
:rules="formRules"
:model="formData"
label-width="130px"
:label-position="
$store.state.app.device === 'desktop' ? 'right' : 'top'
"
>
<el-form-item :label="$t('namespace')" prop="namespaceId">
<el-radio-group v-model="formData.namespaceId">