perf: 优化工具栏样式 (#6431)

#### 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 2024-09-10 00:18:10 -07:00 committed by GitHub
parent b6c873f22d
commit 2219b3f47b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 190 additions and 217 deletions

View File

@ -105,6 +105,9 @@ const showBack = computed(() => {
.content-container__toolbar { .content-container__toolbar {
margin-top: 20px; margin-top: 20px;
.el-button + .el-button {
margin: 0 !important;
}
} }
.content-container_form { .content-container_form {

View File

@ -375,7 +375,6 @@ html {
} }
.tag-button { .tag-button {
margin-right: 10px;
&.no-active { &.no-active {
background: none; background: none;
border: none; border: none;

View File

@ -85,7 +85,6 @@
} }
.tag-button { .tag-button {
margin-right: 10px;
&.no-active { &.no-active {
background: none; background: none;
border: none; border: none;

View File

@ -24,14 +24,13 @@
<template #toolbar> <template #toolbar>
<div class="flex w-full flex-col gap-4 md:justify-between md:flex-row"> <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<div> <el-button type="primary" @click="onOpenDialog('create')">
<el-button type="primary" @click="onOpenDialog('create')"> {{ $t('container.create') }}
{{ $t('container.create') }} </el-button>
</el-button> <el-button type="primary" plain @click="onClean()">
<el-button type="primary" plain @click="onClean()"> {{ $t('container.containerPrune') }}
{{ $t('container.containerPrune') }} </el-button>
</el-button>
</div>
<el-button-group> <el-button-group>
<el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)"> <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
{{ $t('container.start') }} {{ $t('container.start') }}

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }"> <LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar> <template #toolbar>
<div class="flex flex-col gap-4 justify-between items-center flex-wrap sm:flex-row"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex gap-4 flex-wrap"> <div class="flex flex-wrap gap-3">
<el-button type="primary" plain @click="onOpenPull"> <el-button type="primary" plain @click="onOpenPull">
{{ $t('container.imagePull') }} {{ $t('container.imagePull') }}
</el-button> </el-button>
@ -26,7 +26,7 @@
{{ $t('container.imagePrune') }} {{ $t('container.imagePrune') }}
</el-button> </el-button>
</div> </div>
<div class="flex ml-2 gap-2"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</div> </div>

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }"> <LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar> <template #toolbar>
<div class="flex flex-col gap-4 justify-between sm:flex-row"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex gap-4"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onCreate()"> <el-button type="primary" @click="onCreate()">
{{ $t('container.createNetwork') }} {{ $t('container.createNetwork') }}
</el-button> </el-button>
@ -20,7 +20,7 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</div> </div>
<div class="flex flex-row gap-2"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</div> </div>

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }"> <LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar> <template #toolbar>
<div class="flex flex-col gap-2 sm:flex-row sm:justify-between"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex gap-4"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')"> <el-button type="primary" @click="onOpenDialog('create')">
{{ $t('container.createComposeTemplate') }} {{ $t('container.createComposeTemplate') }}
</el-button> </el-button>
@ -17,7 +17,7 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</div> </div>
<div class="flex gap-4 sm:gap-2"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</div> </div>

View File

@ -8,8 +8,8 @@
<LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }"> <LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
<template #toolbar> <template #toolbar>
<div class="flex flex-col gap-4 sm:flex-row justify-between"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onCreate()"> <el-button type="primary" @click="onCreate()">
{{ $t('container.createVolume') }} {{ $t('container.createVolume') }}
</el-button> </el-button>
@ -20,7 +20,7 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</div> </div>
<div class="flex flex-row flex-wrap gap-2"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</div> </div>

View File

@ -10,8 +10,8 @@
/> />
<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> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"> <div class="flex flex-wrap gap-3">
<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>
@ -26,12 +26,12 @@
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-button-group> </el-button-group>
</el-col> </div>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #main> <template #main>
<ComplexTable <ComplexTable

View File

@ -61,8 +61,8 @@
</template> </template>
<template #toolbar> <template #toolbar>
<div class="flex flex-wrap gap-4 sm:justify-between"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex gap-2 flex-wrap items-center justify-start [&>*]:ml-3"> <div class="flex flex-wrap gap-3">
<el-button <el-button
v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')" v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
type="primary" type="primary"

View File

@ -5,16 +5,11 @@
<back-button name="MySQL" :header="$t('database.remoteDB')" /> <back-button name="MySQL" :header="$t('database.remoteDB')" />
</template> </template>
<template #toolbar> <template #toolbar>
<el-row> <el-button type="primary" @click="onOpenDialog('create')">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20"> {{ $t('database.createRemoteDB') }}
<el-button type="primary" @click="onOpenDialog('create')"> </el-button>
{{ $t('database.createRemoteDB') }}
</el-button> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data"> <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

View File

@ -53,8 +53,8 @@
</template> </template>
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20"> <div class="flex flex-wrap gap-3">
<el-button <el-button
v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')" v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
type="primary" type="primary"
@ -77,11 +77,9 @@
{{ $t('database.remoteDB') }} {{ $t('database.remoteDB') }}
</el-button> </el-button>
<el-button @click="goDashboard()" type="primary" plain>PGAdmin4</el-button> <el-button @click="goDashboard()" type="primary" plain>PGAdmin4</el-button>
</el-col> </div>
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4"> <div><TableSearch @search="search()" v-model:searchName="searchName" /></div>
<TableSearch @search="search()" v-model:searchName="searchName" /> </div>
</el-col>
</el-row>
</template> </template>
<template #main v-if="currentDB"> <template #main v-if="currentDB">
<ComplexTable <ComplexTable

View File

@ -5,16 +5,11 @@
<back-button name="PostgreSQL" :header="$t('database.remoteDB')" /> <back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
</template> </template>
<template #toolbar> <template #toolbar>
<el-row> <el-button type="primary" @click="onOpenDialog('create')">
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20"> {{ $t('database.createRemoteDB') }}
<el-button type="primary" @click="onOpenDialog('create')"> </el-button>
{{ $t('database.createRemoteDB') }}
</el-button> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data"> <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

View File

@ -19,20 +19,20 @@
<LayoutContent :title="$t('firewall.forwardRule')" :class="{ mask: fireStatus != 'running' }"> <LayoutContent :title="$t('firewall.forwardRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :span="16"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')"> <el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('firewall.forwardRule') }} {{ $t('commons.button.create') }}{{ $t('firewall.forwardRule') }}
</el-button> </el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0"> <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-col> </div>
<el-col :span="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #main> <template #main>
<ComplexTable <ComplexTable

View File

@ -20,20 +20,20 @@
<LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }"> <LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :span="16"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')"> <el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }} {{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
</el-button> </el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0"> <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-col> </div>
<el-col :span="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #search> <template #search>
<div class="flx-align-center"> <div class="flx-align-center">

View File

@ -52,20 +52,20 @@
</div> </div>
</template> </template>
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :span="16"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')"> <el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('firewall.portRule') }} {{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
</el-button> </el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0"> <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }} {{ $t('commons.button.delete') }}
</el-button> </el-button>
</el-col> </div>
<el-col :span="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #main> <template #main>
<ComplexTable <ComplexTable

View File

@ -3,37 +3,28 @@
<FireRouter /> <FireRouter />
<LayoutContent :title="$t('menu.network')" v-loading="loading"> <LayoutContent :title="$t('menu.network')" v-loading="loading">
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :span="24"> <div><!-- 占位 --></div>
<div style="width: 100%"> <div class="flex flex-wrap gap-3">
<el-form-item style="float: right"> <TableSearch
<el-row :gutter="20"> @search="search()"
<el-col :span="8"> :placeholder="$t('process.pid')"
<TableSearch v-model:searchName="netSearch.processID"
@search="search()" />
:placeholder="$t('process.pid')"
v-model:searchName="netSearch.processID" <TableSearch
/> @search="search()"
</el-col> :placeholder="$t('process.processName')"
<el-col :span="8"> v-model:searchName="netSearch.processName"
<TableSearch />
@search="search()"
:placeholder="$t('process.processName')" <TableSearch
v-model:searchName="netSearch.processName" @search="search()"
/> :placeholder="$t('commons.table.port')"
</el-col> v-model:searchName="netSearch.port"
<el-col :span="8"> />
<TableSearch </div>
@search="search()" </div>
:placeholder="$t('commons.table.port')"
v-model:searchName="netSearch.port"
/>
</el-col>
</el-row>
</el-form-item>
</div>
</el-col>
</el-row>
</template> </template>
<template #main> <template #main>
<ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef"> <ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef">

View File

@ -3,37 +3,28 @@
<FireRouter /> <FireRouter />
<LayoutContent :title="$t('menu.process')" v-loading="loading"> <LayoutContent :title="$t('menu.process')" v-loading="loading">
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :span="24"> <div><!-- 占位 --></div>
<div style="width: 100%"> <div class="flex flex-wrap gap-3">
<el-form-item class="float-right"> <TableSearch
<el-row :gutter="20"> @search="search()"
<el-col :span="8"> :placeholder="$t('process.pid')"
<TableSearch v-model:searchName="processSearch.pid"
@search="search()" />
:placeholder="$t('process.pid')"
v-model:searchName="processSearch.pid" <TableSearch
/> @search="search()"
</el-col> :placeholder="$t('commons.table.name')"
<el-col :span="8"> v-model:searchName="processSearch.name"
<TableSearch />
@search="search()"
:placeholder="$t('commons.table.name')" <TableSearch
v-model:searchName="processSearch.name" @search="search()"
/> :placeholder="$t('commons.table.user')"
</el-col> v-model:searchName="processSearch.username"
<el-col :span="8"> />
<TableSearch </div>
@search="search()" </div>
:placeholder="$t('commons.table.user')"
v-model:searchName="processSearch.username"
/>
</el-col>
</el-row>
</el-form-item>
</div>
</el-col>
</el-row>
</template> </template>
<template #main> <template #main>
<ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef"> <ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef">

View File

@ -14,13 +14,13 @@
</el-select> </el-select>
</template> </template>
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"></el-col> <div><!-- 占位 --></div>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchInfo" /> <TableSearch @search="search()" v-model:searchName="searchInfo" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #main> <template #main>

View File

@ -3,14 +3,11 @@
<FireRouter /> <FireRouter />
<LayoutContent :title="$t('ssh.session')"> <LayoutContent :title="$t('ssh.session')">
<template #toolbar> <template #toolbar>
<div style="width: 100%"> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-row :gutter="20"> <div><!-- 占位 --></div>
<el-col :span="8"></el-col> <div class="flex flex-wrap gap-3">
<el-col :span="8"></el-col> <TableSearch @search="search()" v-model:searchName="sshSearch.loginUser" />
<el-col :span="8"> </div>
<TableSearch @search="search()" v-model:searchName="sshSearch.loginUser" />
</el-col>
</el-row>
</div> </div>
</template> </template>
<template #main> <template #main>

View File

@ -2,8 +2,8 @@
<div> <div>
<LayoutContent v-loading="loading" :title="$t('logs.operation')"> <LayoutContent v-loading="loading" :title="$t('logs.operation')">
<template #toolbar> <template #toolbar>
<el-row> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"> <div class="flex flex-wrap gap-3">
<el-button type="primary" class="tag-button" @click="onChangeRoute('OperationLog')"> <el-button type="primary" class="tag-button" @click="onChangeRoute('OperationLog')">
{{ $t('logs.operation') }} {{ $t('logs.operation') }}
</el-button> </el-button>
@ -13,12 +13,12 @@
<el-button class="tag-button no-active" @click="onChangeRoute('SystemLog')"> <el-button class="tag-button no-active" @click="onChangeRoute('SystemLog')">
{{ $t('logs.system') }} {{ $t('logs.system') }}
</el-button> </el-button>
</el-col> </div>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8"> <div class="flex flex-wrap gap-3">
<TableSetting @search="search()" /> <TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #search> <template #search>
<el-select v-model="searchGroup" @change="search()" clearable class="p-w-200"> <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">

View File

@ -2,26 +2,22 @@
<div> <div>
<LayoutContent v-loading="loading" :title="$t('logs.websiteLog')"> <LayoutContent v-loading="loading" :title="$t('logs.websiteLog')">
<template #toolbar> <template #toolbar>
<el-row> <el-button
<el-col :span="16"> class="tag-button"
<el-button :class="logConfig.name === 'access.log' ? '' : 'no-active'"
class="tag-button" :type="logConfig.name === 'access.log' ? 'primary' : ''"
:class="logConfig.name === 'access.log' ? '' : 'no-active'" @click="changeType('access.log')"
:type="logConfig.name === 'access.log' ? 'primary' : ''" >
@click="changeType('access.log')" {{ $t('logs.runLog') }}
> </el-button>
{{ $t('logs.runLog') }} <el-button
</el-button> class="tag-button"
<el-button :class="logConfig.name === 'error.log' ? '' : 'no-active'"
class="tag-button" :type="logConfig.name === 'error.log' ? 'primary' : ''"
:class="logConfig.name === 'error.log' ? '' : 'no-active'" @click="changeType('error.log')"
:type="logConfig.name === 'error.log' ? 'primary' : ''" >
@click="changeType('error.log')" {{ $t('logs.errLog') }}
> </el-button>
{{ $t('logs.errLog') }}
</el-button>
</el-col>
</el-row>
</template> </template>
<template #search> <template #search>
<div> <div>

View File

@ -2,8 +2,8 @@
<div> <div>
<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> <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onCreate()"> <el-button type="primary" @click="onCreate()">
{{ $t('setting.createSnapshot') }} {{ $t('setting.createSnapshot') }}
</el-button> </el-button>
@ -16,12 +16,12 @@
<el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)"> <el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $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-wrap gap-3">
<TableSetting ref="timerRef" @search="search()" /> <TableSetting ref="timerRef" @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" /> <TableSearch @search="search()" v-model:searchName="searchName" />
</el-col> </div>
</el-row> </div>
</template> </template>
<template #main> <template #main>
<ComplexTable <ComplexTable

View File

@ -10,13 +10,15 @@
</el-alert> </el-alert>
</template> </template>
<template #toolbar> <template #toolbar>
<el-button type="primary" @click="openCreate"> <div class="flex flex-wrap gap-3">
{{ $t('runtime.create') }} <el-button type="primary" @click="openCreate">
</el-button> {{ $t('runtime.create') }}
</el-button>
<el-button type="primary" plain @click="onOpenBuildCache()"> <el-button type="primary" plain @click="onOpenBuildCache()">
{{ $t('container.cleanBuildCache') }} {{ $t('container.cleanBuildCache') }}
</el-button> </el-button>
</div>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()"> <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">

View File

@ -10,13 +10,15 @@
</el-alert> </el-alert>
</template> </template>
<template #toolbar> <template #toolbar>
<el-button type="primary" @click="openCreate"> <div class="flex flex-wrap gap-3">
{{ $t('runtime.create') }} <el-button type="primary" @click="openCreate">
</el-button> {{ $t('runtime.create') }}
</el-button>
<el-button type="primary" plain @click="onOpenBuildCache()"> <el-button type="primary" plain @click="onOpenBuildCache()">
{{ $t('container.cleanBuildCache') }} {{ $t('container.cleanBuildCache') }}
</el-button> </el-button>
</div>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()"> <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">

View File

@ -10,13 +10,15 @@
</el-alert> </el-alert>
</template> </template>
<template #toolbar> <template #toolbar>
<el-button type="primary" @click="openCreate"> <div class="flex flex-wrap gap-3">
{{ $t('runtime.create') }} <el-button type="primary" @click="openCreate">
</el-button> {{ $t('runtime.create') }}
</el-button>
<el-button type="primary" plain @click="onOpenBuildCache()"> <el-button type="primary" plain @click="onOpenBuildCache()">
{{ $t('container.cleanBuildCache') }} {{ $t('container.cleanBuildCache') }}
</el-button> </el-button>
</div>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()"> <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">

View File

@ -10,17 +10,19 @@
</el-alert> </el-alert>
</template> </template>
<template #toolbar> <template #toolbar>
<el-button type="primary" @click="openCreate"> <div class="flex flex-wrap gap-3">
{{ $t('runtime.create') }} <el-button type="primary" @click="openCreate">
</el-button> {{ $t('runtime.create') }}
</el-button>
<el-button @click="openExtensions"> <el-button @click="openExtensions">
{{ $t('php.extensions') }} {{ $t('php.extensions') }}
</el-button> </el-button>
<el-button type="primary" plain @click="onOpenBuildCache()"> <el-button type="primary" plain @click="onOpenBuildCache()">
{{ $t('container.cleanBuildCache') }} {{ $t('container.cleanBuildCache') }}
</el-button> </el-button>
</div>
</template> </template>
<template #main> <template #main>
<ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()"> <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">

View File

@ -3,7 +3,7 @@
<RouterButton :buttons="routerButton" /> <RouterButton :buttons="routerButton" />
<LayoutContent :title="$t('website.ssl')"> <LayoutContent :title="$t('website.ssl')">
<template #toolbar> <template #toolbar>
<div class="flex flex-wrap gap-3 [&>*]:ml-3"> <div class="flex flex-wrap gap-3">
<el-button type="primary" @click="openSSL()"> <el-button type="primary" @click="openSSL()">
{{ $t('ssl.create') }} {{ $t('ssl.create') }}
</el-button> </el-button>

View File

@ -19,8 +19,11 @@
></AppStatus> ></AppStatus>
</template> </template>
<template v-if="nginxIsExist && !openNginxConfig" #toolbar> <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
<el-row :class="{ mask: nginxStatus != 'Running' }"> <div
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20"> class="flex justify-between gap-2 flex-wrap sm:flex-row"
:class="{ mask: nginxStatus != 'Running' }"
>
<div class="flex flex-wrap gap-3">
<el-button type="primary" @click="openCreate"> <el-button type="primary" @click="openCreate">
{{ $t('website.create') }} {{ $t('website.create') }}
</el-button> </el-button>
@ -33,11 +36,10 @@
<el-button type="primary" plain @click="openDefaultHtml"> <el-button type="primary" plain @click="openDefaultHtml">
{{ $t('website.defaultHtml') }} {{ $t('website.defaultHtml') }}
</el-button> </el-button>
</el-col> </div>
<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
<TableSearch @search="search()" v-model:searchName="req.name" /> <TableSearch @search="search()" v-model:searchName="req.name" />
</el-col> </div>
</el-row>
</template> </template>
<template v-if="nginxIsExist && !openNginxConfig" #search> <template v-if="nginxIsExist && !openNginxConfig" #search>
<div :class="{ mask: nginxStatus != 'Running' }"> <div :class="{ mask: nginxStatus != 'Running' }">