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 {
margin-top: 20px;
.el-button + .el-button {
margin: 0 !important;
}
}
.content-container_form {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -10,8 +10,8 @@
/>
<LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('cronjob.cronTask')">
<template #toolbar>
<el-row>
<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
<div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
</el-button>
@ -26,12 +26,12 @@
{{ $t('commons.button.delete') }}
</el-button>
</el-button-group>
</el-col>
<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
</div>
<div class="flex flex-wrap gap-3">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable

View file

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

View file

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

View file

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

View file

@ -5,16 +5,11 @@
<back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
</template>
<template #toolbar>
<el-row>
<el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('database.createRemoteDB') }}
</el-button>
</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>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('database.createRemoteDB') }}
</el-button>
<TableSearch @search="search()" v-model:searchName="searchName" />
</template>
<template #main>
<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' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<div class="flex justify-between gap-2 flex-wrap sm:flex-row">
<div class="flex flex-wrap gap-3">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}{{ $t('firewall.forwardRule') }}
</el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
</div>
<div class="flex flex-wrap gap-3">
<TableSetting @search="search()" />
<TableSearch @search="search()" v-model:searchName="searchName" />
</el-col>
</el-row>
</div>
</div>
</template>
<template #main>
<ComplexTable

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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