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: 页面统一页头

Browse Source
This commit is contained in:
ssongliu 2023-01-30 09:39:37 +08:00 committed by ssongliu
parent 4c4f379b4b
commit 2652e7089b
17 changed files with 886 additions and 751 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/layout/layout-content.vue
View File

@ -12,6 +12,7 @@
></back-button>
<!-- <el-page-header @back="reload" v-if="showBack" :content="header"></el-page-header> -->
<span v-else>{{ header }}</span>
<el-divider />
</slot>
</div>
<div class="content-container__toolbar" v-if="slots.toolbar">
@ -53,7 +54,6 @@ const showBack = computed(() => {
.content-container__header {
font-weight: 700;
padding: 5px 0 25px;
font-size: 18px;
}
@ -70,4 +70,12 @@ const showBack = computed(() => {
float: right;
}
}
.el-divider--horizontal {
display: block;
height: 1px;
width: 100%;
margin: 10px 0;
border-top: 1px var(--el-border-color) var(--el-border-style);
}
</style>

5
frontend/src/views/container/compose/index.vue
View File

@ -13,7 +13,7 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card v-if="!isOnDetail" style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<div>
<LayoutContent :header="$t('container.compose')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@ -57,7 +57,7 @@
fix
/>
</ComplexTable>
</div>
</LayoutContent>
</el-card>
<EditDialog ref="dialogEditRef" />
@ -68,6 +68,7 @@
<script lang="ts" setup>
import ComplexTable from '@/components/complex-table/index.vue';
import { reactive, onMounted, ref } from 'vue';
import LayoutContent from '@/layout/layout-content.vue';
import EditDialog from '@/views/container/compose/edit/index.vue';
import CreateDialog from '@/views/container/compose/create/index.vue';
import ComposeDetial from '@/views/container/compose/detail/index.vue';

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

@ -9,73 +9,80 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button-group style="margin-left: 10px">
<el-button :disabled="checkStatus('start')" @click="onOperate('start')">
{{ $t('container.start') }}
</el-button>
<el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
{{ $t('container.stop') }}
</el-button>
<el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
{{ $t('container.restart') }}
</el-button>
<el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
{{ $t('container.kill') }}
</el-button>
<el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
{{ $t('container.pause') }}
</el-button>
<el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
{{ $t('container.unpause') }}
</el-button>
<el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
{{ $t('container.remove') }}
</el-button>
</el-button-group>
</template>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
<LayoutContent :header="$t('container.container')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #default="{ row }">
<el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button-group style="margin-left: 10px">
<el-button :disabled="checkStatus('start')" @click="onOperate('start')">
{{ $t('container.start') }}
</el-button>
<el-button :disabled="checkStatus('stop')" @click="onOperate('stop')">
{{ $t('container.stop') }}
</el-button>
<el-button :disabled="checkStatus('restart')" @click="onOperate('restart')">
{{ $t('container.restart') }}
</el-button>
<el-button :disabled="checkStatus('kill')" @click="onOperate('kill')">
{{ $t('container.kill') }}
</el-button>
<el-button :disabled="checkStatus('pause')" @click="onOperate('pause')">
{{ $t('container.pause') }}
</el-button>
<el-button :disabled="checkStatus('unpause')" @click="onOperate('unpause')">
{{ $t('container.unpause') }}
</el-button>
<el-button :disabled="checkStatus('remove')" @click="onOperate('remove')">
{{ $t('container.remove') }}
</el-button>
</el-button-group>
</template>
</el-table-column>
<el-table-column
:label="$t('container.image')"
show-overflow-tooltip
min-width="100"
prop="imageName"
/>
<el-table-column :label="$t('commons.table.status')" min-width="50" prop="state" fix>
<template #default="{ row }">
<Status :key="row.state" :status="row.state"></Status>
</template>
</el-table-column>
<el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
<el-table-column
prop="createTime"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
>
<template #default="{ row }">
<el-link @click="onInspect(row.containerID)" type="primary">{{ row.name }}</el-link>
</template>
</el-table-column>
<el-table-column
:label="$t('container.image')"
show-overflow-tooltip
min-width="100"
prop="imageName"
/>
<el-table-column :label="$t('commons.table.status')" min-width="50" prop="state" fix>
<template #default="{ row }">
<Status :key="row.state" :status="row.state"></Status>
</template>
</el-table-column>
<el-table-column :label="$t('container.upTime')" min-width="100" prop="runTime" fix />
<el-table-column
prop="createTime"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="mydetail" />
@ -89,6 +96,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import ReNameDialog from '@/views/container/container/rename/index.vue';
import CreateDialog from '@/views/container/container/create/index.vue';

67
frontend/src/views/container/image/index.vue
View File

@ -9,39 +9,41 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button @click="onOpenPull">
{{ $t('container.imagePull') }}
</el-button>
<el-button @click="onOpenload">
{{ $t('container.importImage') }}
</el-button>
<el-button @click="onOpenBuild">
{{ $t('container.build') }}
</el-button>
</template>
<el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
<el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
<template #default="{ row }">
<el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
{{ item }}
</el-tag>
<LayoutContent :header="$t('container.image')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button @click="onOpenPull">
{{ $t('container.imagePull') }}
</el-button>
<el-button @click="onOpenload">
{{ $t('container.importImage') }}
</el-button>
<el-button @click="onOpenBuild">
{{ $t('container.build') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
/>
</ComplexTable>
<el-table-column label="ID" show-overflow-tooltip prop="id" min-width="60" />
<el-table-column :label="$t('container.tag')" prop="tags" min-width="160" fix>
<template #default="{ row }">
<el-tag style="margin-left: 5px" v-for="(item, index) of row.tags" :key="index">
{{ item }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('container.size')" prop="size" min-width="70" fix />
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
/>
</ComplexTable>
</LayoutContent>
</el-card>
<Pull ref="dialogPullRef" @search="search" />
@ -82,6 +84,7 @@ import { reactive, onMounted, ref } from 'vue';
import { dateFromat } from '@/utils/util';
import Submenu from '@/views/container/index.vue';
import { Container } from '@/api/interface/container';
import LayoutContent from '@/layout/layout-content.vue';
import Pull from '@/views/container/image/pull/index.vue';
import Tag from '@/views/container/image/tag/index.vue';
import Push from '@/views/container/image/push/index.vue';

97
frontend/src/views/container/network/index.vue
View File

@ -9,47 +9,65 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip min-width="80" prop="name" fix>
<template #default="{ row }">
<el-link @click="onInspect(row.id)" type="primary">{{ row.name }}</el-link>
<el-tag effect="dark" round v-if="row.isSystem" style="margin-left: 5px">system</el-tag>
<LayoutContent :header="$t('container.network')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="40" prop="driver" />
<el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />
<el-table-column :label="$t('container.gateway')" min-width="80" prop="gateway" fix />
<el-table-column :label="$t('container.tag')" min-width="140" fix>
<template #default="{ row }">
<div v-for="(item, index) in row.labels" :key="index">
<div v-if="row.expand || (!row.expand && index < 3)">
<el-tag>{{ item }}</el-tag>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="80"
prop="name"
fix
>
<template #default="{ row }">
<el-link @click="onInspect(row.id)" type="primary">{{ row.name }}</el-link>
<el-tag effect="dark" round v-if="row.isSystem" style="margin-left: 5px">system</el-tag>
</template>
</el-table-column>
<el-table-column
:label="$t('container.driver')"
show-overflow-tooltip
min-width="40"
prop="driver"
/>
<el-table-column :label="$t('container.subnet')" min-width="80" prop="subnet" fix />
<el-table-column :label="$t('container.gateway')" min-width="80" prop="gateway" fix />
<el-table-column :label="$t('container.tag')" min-width="140" fix>
<template #default="{ row }">
<div v-for="(item, index) in row.labels" :key="index">
<div v-if="row.expand || (!row.expand && index < 3)">
<el-tag>{{ item }}</el-tag>
</div>
</div>
</div>
<div v-if="!row.expand && row.labels.length > 3">
<el-button type="primary" link @click="row.expand = true">
{{ $t('commons.button.expand') }}...
</el-button>
</div>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
min-width="90"
:label="$t('commons.table.date')"
:formatter="dateFromat"
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
<div v-if="!row.expand && row.labels.length > 3">
<el-button type="primary" link @click="row.expand = true">
{{ $t('commons.button.expand') }}...
</el-button>
</div>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
min-width="90"
:label="$t('commons.table.date')"
:formatter="dateFromat"
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="codemirror" />
@ -58,6 +76,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import CreateDialog from '@/views/container/network/create/index.vue';
import CodemirrorDialog from '@/components/codemirror-dialog/codemirror.vue';

78
frontend/src/views/container/repo/index.vue
View File

@ -9,42 +9,49 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
<el-table-column
:label="$t('container.downloadUrl')"
show-overflow-tooltip
prop="downloadUrl"
min-width="100"
fix
/>
<el-table-column :label="$t('container.protocol')" prop="protocol" min-width="60" fix />
<el-table-column :label="$t('commons.table.status')" prop="status" min-width="60" fix>
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" type="success">
{{ $t('commons.status.success') }}
</el-tag>
<el-tooltip v-else effect="dark" :content="row.message" placement="bottom">
<el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
</el-tooltip>
<LayoutContent :header="$t('container.repo')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
<el-table-column type="selection" :selectable="selectable" fix />
<el-table-column :label="$t('commons.table.name')" prop="name" min-width="60" />
<el-table-column
:label="$t('container.downloadUrl')"
show-overflow-tooltip
prop="downloadUrl"
min-width="100"
fix
/>
<el-table-column :label="$t('container.protocol')" prop="protocol" min-width="60" fix />
<el-table-column :label="$t('commons.table.status')" prop="status" min-width="60" fix>
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" type="success">
{{ $t('commons.status.success') }}
</el-tag>
<el-tooltip v-else effect="dark" :content="row.message" placement="bottom">
<el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
</LayoutContent>
</el-card>
<OperatorDialog @search="search" ref="dialogRef" />
<DeleteDialog @search="search" ref="dialogDeleteRef" />
@ -52,6 +59,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import OperatorDialog from '@/views/container/repo/operator/index.vue';
import DeleteDialog from '@/views/container/repo/delete/index.vue';

127
frontend/src/views/container/setting/index.vue
View File

@ -50,69 +50,71 @@
</el-card>
</div>
<el-card style="margin-top: 20px">
<el-radio-group v-model="confShowType" @change="changeMode">
<el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
<el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
</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-form :model="form" ref="formRef" label-width="120px">
<el-form-item :label="$t('container.mirrors')" prop="mirrors">
<el-input
type="textarea"
:placeholder="$t('container.mirrorHelper')"
:autosize="{ minRows: 3, maxRows: 10 }"
v-model="form.mirrors"
/>
<span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.registries')" prop="registries">
<el-input
type="textarea"
:placeholder="$t('container.registrieHelper')"
:autosize="{ minRows: 3, maxRows: 10 }"
v-model="form.registries"
/>
</el-form-item>
<el-form-item label="live-restore" prop="liveRestore">
<el-switch v-model="form.liveRestore"></el-switch>
<span class="input-help">{{ $t('container.liveHelper') }}</span>
</el-form-item>
<el-form-item label="cgroup-driver" prop="cgroupDriver">
<el-radio-group v-model="form.cgroupDriver">
<el-radio label="cgroupfs">cgroupfs</el-radio>
<el-radio label="systemd">systemd</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<LayoutContent :header="$t('container.setting')">
<el-radio-group v-model="confShowType" @change="changeMode">
<el-radio-button label="base">{{ $t('database.baseConf') }}</el-radio-button>
<el-radio-button label="all">{{ $t('database.allConf') }}</el-radio-button>
</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-form :model="form" ref="formRef" label-width="120px">
<el-form-item :label="$t('container.mirrors')" prop="mirrors">
<el-input
type="textarea"
:placeholder="$t('container.mirrorHelper')"
:autosize="{ minRows: 3, maxRows: 10 }"
v-model="form.mirrors"
/>
<span class="input-help">{{ $t('container.mirrorsHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.registries')" prop="registries">
<el-input
type="textarea"
:placeholder="$t('container.registrieHelper')"
:autosize="{ minRows: 3, maxRows: 10 }"
v-model="form.registries"
/>
</el-form-item>
<el-form-item label="live-restore" prop="liveRestore">
<el-switch v-model="form.liveRestore"></el-switch>
<span class="input-help">{{ $t('container.liveHelper') }}</span>
</el-form-item>
<el-form-item label="cgroup-driver" prop="cgroupDriver">
<el-radio-group v-model="form.cgroupDriver">
<el-radio label="cgroupfs">cgroupfs</el-radio>
<el-radio label="systemd">systemd</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.save') }}
</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<div v-if="confShowType === 'all'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; height: calc(100vh - 380px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="dockerConf"
:readOnly="true"
/>
<el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
{{ $t('commons.button.save') }}
</el-button>
</div>
<div v-if="confShowType === 'all'">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 10px; height: calc(100vh - 380px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="dockerConf"
:readOnly="true"
/>
<el-button :disabled="loading" type="primary" @click="onSaveFile" style="margin-top: 5px">
{{ $t('commons.button.save') }}
</el-button>
</div>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitSave"></ConfirmDialog>
@ -124,6 +126,7 @@ import { ElMessage, FormInstance } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import Submenu from '@/views/container/index.vue';
import { Codemirror } from 'vue-codemirror';
import LayoutContent from '@/layout/layout-content.vue';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import { LoadFile } from '@/api/modules/files';

62
frontend/src/views/container/template/index.vue
View File

@ -9,35 +9,42 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
<LayoutContent :header="$t('container.composeTemplate')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #default="{ row }">
<el-link @click="onOpenDetail(row)" type="primary">{{ row.name }}</el-link>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="100"
prop="name"
fix
>
<template #default="{ row }">
<el-link @click="onOpenDetail(row)" type="primary">{{ row.name }}</el-link>
</template>
</el-table-column>
<el-table-column :label="$t('container.description')" prop="description" min-width="200" fix />
<el-table-column :label="$t('commons.table.createdAt')" min-width="80" fix>
<template #default="{ row }">
{{ dateFromat(0, 0, row.createdAt) }}
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" />
</ComplexTable>
</LayoutContent>
</el-card>
<el-dialog v-model="detailVisiable" :destroy-on-close="true" :close-on-click-modal="false" width="70%">
@ -72,6 +79,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import Submenu from '@/views/container/index.vue';
import { Codemirror } from 'vue-codemirror';

77
frontend/src/views/container/volume/index.vue
View File

@ -9,36 +9,54 @@
<span style="font-size: 14px">{{ $t('container.startIn') }}</span>
</el-card>
<el-card style="margin-top: 20px" :class="{ mask: dockerStatus != 'Running' }">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip min-width="80" prop="name" fix>
<template #default="{ row }">
<el-link @click="onInspect(row.name)" type="primary">{{ row.name }}</el-link>
<LayoutContent :header="$t('container.volume')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button icon="Plus" type="primary" @click="onCreate()">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<el-table-column
:label="$t('container.mountpoint')"
show-overflow-tooltip
min-width="120"
prop="mountpoint"
/>
<el-table-column :label="$t('container.driver')" show-overflow-tooltip min-width="80" prop="driver" />
<el-table-column
prop="createdAt"
min-width="90"
:label="$t('commons.table.date')"
:formatter="dateFromat"
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
<el-table-column type="selection" fix />
<el-table-column
:label="$t('commons.table.name')"
show-overflow-tooltip
min-width="80"
prop="name"
fix
>
<template #default="{ row }">
<el-link @click="onInspect(row.name)" type="primary">{{ row.name }}</el-link>
</template>
</el-table-column>
<el-table-column
:label="$t('container.mountpoint')"
show-overflow-tooltip
min-width="120"
prop="mountpoint"
/>
<el-table-column
:label="$t('container.driver')"
show-overflow-tooltip
min-width="80"
prop="driver"
/>
<el-table-column
prop="createdAt"
min-width="90"
:label="$t('commons.table.date')"
:formatter="dateFromat"
/>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</LayoutContent>
</el-card>
<CodemirrorDialog ref="codemirror" />
@ -47,6 +65,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import ComplexTable from '@/components/complex-table/index.vue';
import CreateDialog from '@/views/container/volume/create/index.vue';
import Submenu from '@/views/container/index.vue';

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

@ -1,83 +1,94 @@
<template>
<div>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
style="margin-top: 20px"
:data="data"
>
<template #toolbar>
<el-button type="primary" icon="Plus" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('cronjob.taskName')" prop="name" />
<el-table-column :label="$t('commons.table.status')" prop="status">
<template #default="{ row }">
<el-button
v-if="row.status === 'Enable'"
@click="onChangeStatus(row.id, 'disable')"
link
type="success"
>
{{ $t('commons.status.enabled') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row.id, 'enable')">
{{ $t('commons.status.disabled') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.cronSpec')">
<template #default="{ row }">
<span v-if="row.specType.indexOf('N') === -1 || row.specType === 'perWeek'">
{{ $t('cronjob.' + row.specType) }}
</span>
<span v-else>{{ $t('cronjob.per') }}</span>
<span v-if="row.specType === 'perMonth'">
{{ row.day }}{{ $t('cronjob.day') }} {{ loadZero(row.hour) }} :
{{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perWeek'">
{{ loadWeek(row.week) }} {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perDay'">
&#32;{{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perNDay'">
{{ row.day }} {{ $t('cronjob.day1') }}, {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perNHour'">
{{ row.hour }}{{ $t('cronjob.hour') }}, {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perHour'">{{ loadZero(row.minute) }}</span>
<span v-if="row.specType === 'perNMinute'">{{ row.minute }}{{ $t('cronjob.minute') }}</span>
{{ $t('cronjob.handle') }}
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.retainCopies')" prop="retainCopies" />
<el-table-column :label="$t('cronjob.lastRecrodTime')" prop="lastRecrodTime">
<template #default="{ row }">
{{ row.lastRecrodTime }}
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.target')" prop="targetDir">
<template #default="{ row }">
{{ loadBackupName(row.targetDir) }}
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
<el-card class="topRouterCard">
<el-radio-group v-model="active">
<el-radio-button class="topRouterButton" size="default" label="cronjob">
{{ $t('cronjob.cronTask') }}
</el-radio-button>
</el-radio-group>
</el-card>
<el-card style="margin-top: 20px">
<LayoutContent :header="$t('cronjob.cronTask')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<template #toolbar>
<el-button type="primary" icon="Plus" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="onBatchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('cronjob.taskName')" prop="name" />
<el-table-column :label="$t('commons.table.status')" prop="status">
<template #default="{ row }">
<el-button
v-if="row.status === 'Enable'"
@click="onChangeStatus(row.id, 'disable')"
link
type="success"
>
{{ $t('commons.status.enabled') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row.id, 'enable')">
{{ $t('commons.status.disabled') }}
</el-button>
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.cronSpec')">
<template #default="{ row }">
<span v-if="row.specType.indexOf('N') === -1 || row.specType === 'perWeek'">
{{ $t('cronjob.' + row.specType) }}
</span>
<span v-else>{{ $t('cronjob.per') }}</span>
<span v-if="row.specType === 'perMonth'">
{{ row.day }}{{ $t('cronjob.day') }} {{ loadZero(row.hour) }} :
{{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perWeek'">
{{ loadWeek(row.week) }} {{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perDay'">
&#32;{{ loadZero(row.hour) }} : {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perNDay'">
{{ row.day }} {{ $t('cronjob.day1') }}, {{ loadZero(row.hour) }} :
{{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perNHour'">
{{ row.hour }}{{ $t('cronjob.hour') }}, {{ loadZero(row.minute) }}
</span>
<span v-if="row.specType === 'perHour'">{{ loadZero(row.minute) }}</span>
<span v-if="row.specType === 'perNMinute'">{{ row.minute }}{{ $t('cronjob.minute') }}</span>
{{ $t('cronjob.handle') }}
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.retainCopies')" prop="retainCopies" />
<el-table-column :label="$t('cronjob.lastRecrodTime')" prop="lastRecrodTime">
<template #default="{ row }">
{{ row.lastRecrodTime }}
</template>
</el-table-column>
<el-table-column :label="$t('cronjob.target')" prop="targetDir">
<template #default="{ row }">
{{ loadBackupName(row.targetDir) }}
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</LayoutContent>
</el-card>
<OperatrDialog @search="search" ref="dialogRef" />
<RecordDialog ref="dialogRecordRef" />
@ -88,6 +99,7 @@
import ComplexTable from '@/components/complex-table/index.vue';
import OperatrDialog from '@/views/cronjob/operate/index.vue';
import RecordDialog from '@/views/cronjob/record/index.vue';
import LayoutContent from '@/layout/layout-content.vue';
import { loadZero } from '@/utils/util';
import { onMounted, reactive, ref } from 'vue';
import { deleteCronjob, getCronjobPage, handleOnce, updateStatus } from '@/api/modules/cronjob';
@ -99,6 +111,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
const selects = ref<any>([]);
const active = ref('cronjob');
const data = ref();
const paginationConfig = reactive({
currentPage: 1,

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

@ -2,35 +2,37 @@
<div>
<Submenu activeName="login" />
<el-card style="margin-top: 20px">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button type="primary" @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
<el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
<el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
<el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
<el-table-column min-width="40" :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>
</div>
<div v-else>
<el-tooltip class="box-item" effect="dark" :content="row.message" placement="top-start">
<el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
</el-tooltip>
</div>
<LayoutContent :header="$t('logs.login')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button type="primary" @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
</ComplexTable>
<el-table-column min-width="40" :label="$t('logs.loginIP')" prop="ip" />
<el-table-column min-width="40" :label="$t('logs.loginAddress')" prop="address" />
<el-table-column :label="$t('logs.loginAgent')" show-overflow-tooltip prop="agent" />
<el-table-column min-width="40" :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>
</div>
<div v-else>
<el-tooltip class="box-item" effect="dark" :content="row.message" placement="top-start">
<el-tag type="danger">{{ $t('commons.status.failed') }}</el-tag>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
</ComplexTable>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
</div>
@ -40,6 +42,7 @@
import ComplexTable from '@/components/complex-table/index.vue';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { dateFromat } from '@/utils/util';
import LayoutContent from '@/layout/layout-content.vue';
import { cleanLogs, getLoginLogs } from '@/api/modules/log';
import Submenu from '@/views/log/index.vue';
import { onMounted, reactive, ref } from '@vue/runtime-core';

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

@ -2,46 +2,48 @@
<div>
<Submenu activeName="operation" />
<el-card style="margin-top: 20px">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button type="primary" @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
<LayoutContent :header="$t('logs.operation')">
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<template #toolbar>
<el-button type="primary" @click="onClean()">
{{ $t('logs.deleteLogs') }}
</el-button>
</template>
<el-table-column :label="$t('logs.resource')" prop="group" fix>
<template #default="{ row }">
{{ $t('logs.detail.' + row.group) }}
</template>
</el-table-column>
<el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH" />
<el-table-column :label="$t('logs.status')" prop="status">
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
{{ $t('commons.status.success') }}
</el-tag>
<div v-else>
<el-popover
placement="top-start"
:title="$t('commons.table.message')"
:width="400"
trigger="hover"
:content="row.message"
>
<template #reference>
<el-tag class="ml-2" type="danger">{{ $t('commons.status.failed') }}</el-tag>
</template>
</el-popover>
</div>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
</ComplexTable>
<el-table-column :label="$t('logs.resource')" prop="group" fix>
<template #default="{ row }">
{{ $t('logs.detail.' + row.group) }}
</template>
</el-table-column>
<el-table-column :label="$t('logs.operate')" min-width="150px" prop="detailZH" />
<el-table-column :label="$t('logs.status')" prop="status">
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" class="ml-2" type="success">
{{ $t('commons.status.success') }}
</el-tag>
<div v-else>
<el-popover
placement="top-start"
:title="$t('commons.table.message')"
:width="400"
trigger="hover"
:content="row.message"
>
<template #reference>
<el-tag class="ml-2" type="danger">{{ $t('commons.status.failed') }}</el-tag>
</template>
</el-popover>
</div>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
</ComplexTable>
</LayoutContent>
</el-card>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmitClean"></ConfirmDialog>
@ -52,6 +54,7 @@
import ComplexTable from '@/components/complex-table/index.vue';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { dateFromat } from '@/utils/util';
import LayoutContent from '@/layout/layout-content.vue';
import { cleanLogs, getOperationLogs } from '@/api/modules/log';
import Submenu from '@/views/log/index.vue';
import { onMounted, reactive, ref } from '@vue/runtime-core';

33
frontend/src/views/log/system/index.vue
View File

@ -2,27 +2,30 @@
<div>
<Submenu activeName="system" />
<el-card style="margin-top: 20px">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 150px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
@ready="handleReady"
v-model="logs"
:readOnly="true"
/>
<LayoutContent :header="$t('logs.system')">
<codemirror
:autofocus="true"
placeholder="None data"
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 180px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
@ready="handleReady"
v-model="logs"
:readOnly="true"
/>
</LayoutContent>
</el-card>
</div>
</template>
<script setup lang="ts">
import { Codemirror } from 'vue-codemirror';
import LayoutContent from '@/layout/layout-content.vue';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import { nextTick, onMounted, ref, shallowRef } from 'vue';

66
frontend/src/views/setting/about/index.vue
View File

@ -2,41 +2,38 @@
<div>
<Submenu activeName="about" />
<el-card style="margin-top: 20px">
<template #header>
<div class="card-header">
<span>{{ $t('setting.about') }}</span>
<LayoutContent :header="$t('setting.about')">
<div style="text-align: center">
<div style="justify-self: center">
<img style="width: 80px" src="@/assets/images/ko_image.png" />
</div>
<h3>{{ $t('setting.description') }}</h3>
<h3>
{{ version }}
<el-button type="primary" link @click="onLoadUpgradeInfo">
{{ $t('setting.upgradeCheck') }}
</el-button>
</h3>
<div style="margin-top: 10px">
<el-link @click="toGithub">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-huaban88"></svg-icon>
<span style="line-height: 20px">{{ $t('setting.project') }}</span>
</el-link>
<el-link @click="toIssue" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-bug"></svg-icon>
<span>{{ $t('setting.issue') }}</span>
</el-link>
<el-link @click="toTalk" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-taolun"></svg-icon>
<span>{{ $t('setting.chat') }}</span>
</el-link>
<el-link @click="toGithubStar" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-star"></svg-icon>
<span>{{ $t('setting.star') }}</span>
</el-link>
</div>
</div>
</template>
<div style="text-align: center">
<div style="justify-self: center">
<img style="width: 80px" src="@/assets/images/ko_image.png" />
</div>
<h3>{{ $t('setting.description') }}</h3>
<h3>
{{ version }}
<el-button type="primary" link @click="onLoadUpgradeInfo">
{{ $t('setting.upgradeCheck') }}
</el-button>
</h3>
<div style="margin-top: 10px">
<el-link @click="toGithub">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-huaban88"></svg-icon>
<span style="line-height: 20px">{{ $t('setting.project') }}</span>
</el-link>
<el-link @click="toIssue" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-bug"></svg-icon>
<span>{{ $t('setting.issue') }}</span>
</el-link>
<el-link @click="toTalk" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-taolun"></svg-icon>
<span>{{ $t('setting.chat') }}</span>
</el-link>
<el-link @click="toGithubStar" style="margin-left: 15px">
<svg-icon style="font-size: 7px; margin-bottom: 3px" iconName="p-star"></svg-icon>
<span>{{ $t('setting.star') }}</span>
</el-link>
</div>
</div>
</LayoutContent>
</el-card>
<el-drawer :key="refresh" v-model="drawerShow" size="50%">
<el-form label-width="120px">
@ -64,6 +61,7 @@
</template>
<script lang="ts" setup>
import LayoutContent from '@/layout/layout-content.vue';
import { getSettingInfo, loadUpgradeInfo } from '@/api/modules/setting';
import Submenu from '@/views/setting/index.vue';
import { onMounted, ref } from 'vue';

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

@ -2,186 +2,213 @@
<div>
<Submenu activeName="backupaccount" />
<el-form label-position="left" label-width="130px" :v-key="reflash">
<div style="margin-top: 20px"><span style="font-size: 16px; font-weight: 500">Local</span></div>
<el-row :gutter="20" style="margin-top: 10px">
<el-col :span="24">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-file-folder"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.serverDisk') }}</span>
<div style="float: right">
<el-button round @click="onOpenDialog('edit', 'local', localData)">
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<el-form-item :label="$t('setting.currentPath')">
{{ localData.varsJson['dir'] }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, localData.createdAt) }}
</el-form-item>
</el-card>
</el-col>
</el-row>
<div style="margin-top: 20px">
<span style="font-size: 16px; font-weight: 500">{{ $t('setting.thirdParty') }}</span>
</div>
<el-row :gutter="20" style="margin-top: 10px">
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
<div style="float: right">
<el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="minioData.id === 0"
@click="onOpenDialog('edit', 'MINIO', minioData)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="minioData.id !== 0">
<el-form-item label="Endpoint">
{{ minioData.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ minioData.bucket }}
<LayoutContent header="Local" style="margin-top: 20px">
<el-row :gutter="20">
<el-col :span="24">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-file-folder"></svg-icon>
<span style="font-size: 16px; font-weight: 500">
&nbsp;{{ $t('setting.serverDisk') }}
</span>
<div style="float: right">
<el-button round @click="onOpenDialog('edit', 'local', localData)">
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<el-form-item :label="$t('setting.currentPath')">
{{ localData.varsJson['dir'] }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, minioData.createdAt) }}
{{ dateFromat(0, 0, localData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
<el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'MINIO')">
{{ $t('setting.createBackupAccount', ['MINIO']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
<div style="float: right">
<el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="ossData.id === 0"
@click="onOpenDialog('edit', 'OSS', ossData)"
>
{{ $t('commons.button.edit') }}
</el-button>
</el-card>
</el-col>
</el-row>
</LayoutContent>
<LayoutContent :header="$t('setting.thirdParty')" style="margin-top: 20px">
<el-row :gutter="20">
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-minio"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;MIMIO</span>
<div style="float: right">
<el-button :disabled="minioData.id === 0" round @click="onBatchDelete(minioData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="minioData.id === 0"
@click="onOpenDialog('edit', 'MINIO', minioData)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="minioData.id !== 0">
<el-form-item label="Endpoint">
{{ minioData.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ minioData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, minioData.createdAt) }}
</el-form-item>
</div>
</template>
<div v-if="ossData.id !== 0">
<el-form-item label="Endpoint">
{{ ossData.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ ossData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, ossData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
<el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'OSS')">
{{ $t('setting.createBackupAccount', ['OSS']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
<div style="float: right">
<el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="s3Data.id === 0"
@click="onOpenDialog('edit', 'S3', s3Data)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="s3Data.id !== 0">
<el-form-item label="Region">
{{ s3Data.varsJson['region'] }}
</el-form-item>
<el-form-item label="Endpoint">
{{ s3Data.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ s3Data.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, s3Data.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'S3')">
{{ $t('setting.createBackupAccount', ['S3']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
<div style="float: right">
<el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
<el-button
size="large"
round
plain
:disabled="sftpData.id === 0"
@click="onOpenDialog('edit', 'SFTP', sftpData)"
type="primary"
@click="onOpenDialog('create', 'MINIO')"
>
{{ $t('commons.button.edit') }}
{{ $t('setting.createBackupAccount', ['MINIO']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-oss"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;OSS</span>
<div style="float: right">
<el-button round :disabled="ossData.id === 0" @click="onBatchDelete(ossData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="ossData.id === 0"
@click="onOpenDialog('edit', 'OSS', ossData)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="ossData.id !== 0">
<el-form-item label="Endpoint">
{{ ossData.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ ossData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, ossData.createdAt) }}
</el-form-item>
</div>
</template>
<div v-if="sftpData.id !== 0">
<el-form-item :label="$t('setting.address')">
{{ sftpData.varsJson['address'] }}
</el-form-item>
<el-form-item :label="$t('setting.port')">
{{ sftpData.varsJson['port'] }}
</el-form-item>
<el-form-item :label="$t('setting.path')">
{{ sftpData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, sftpData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-button size="large" round plain type="primary" @click="onOpenDialog('create', 'SFTP')">
{{ $t('setting.createBackupAccount', ['SFTP']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
</el-row>
<el-alert v-else center style="height: 127px; background-color: #e2e4ec" :closable="false">
<el-button
size="large"
round
plain
type="primary"
@click="onOpenDialog('create', 'OSS')"
>
{{ $t('setting.createBackupAccount', ['OSS']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-aws"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;{{ $t('setting.S3') }}</span>
<div style="float: right">
<el-button round :disabled="s3Data.id === 0" @click="onBatchDelete(s3Data)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
:disabled="s3Data.id === 0"
@click="onOpenDialog('edit', 'S3', s3Data)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="s3Data.id !== 0">
<el-form-item label="Region">
{{ s3Data.varsJson['region'] }}
</el-form-item>
<el-form-item label="Endpoint">
{{ s3Data.varsJson['endpoint'] }}
</el-form-item>
<el-form-item label="Bucket">
{{ s3Data.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, s3Data.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-button
size="large"
round
plain
type="primary"
@click="onOpenDialog('create', 'S3')"
>
{{ $t('setting.createBackupAccount', ['S3']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<template #header>
<svg-icon style="font-size: 7px" iconName="p-SFTP"></svg-icon>
<span style="font-size: 16px; font-weight: 500">&nbsp;SFTP</span>
<div style="float: right">
<el-button round :disabled="sftpData.id === 0" @click="onBatchDelete(sftpData)">
{{ $t('commons.button.delete') }}
</el-button>
<el-button
round
plain
:disabled="sftpData.id === 0"
@click="onOpenDialog('edit', 'SFTP', sftpData)"
>
{{ $t('commons.button.edit') }}
</el-button>
</div>
</template>
<div v-if="sftpData.id !== 0">
<el-form-item :label="$t('setting.address')">
{{ sftpData.varsJson['address'] }}
</el-form-item>
<el-form-item :label="$t('setting.port')">
{{ sftpData.varsJson['port'] }}
</el-form-item>
<el-form-item :label="$t('setting.path')">
{{ sftpData.bucket }}
</el-form-item>
<el-form-item :label="$t('commons.table.createdAt')">
{{ dateFromat(0, 0, sftpData.createdAt) }}
</el-form-item>
</div>
<el-alert v-else center style="height: 167px; background-color: #e2e4ec" :closable="false">
<el-button
size="large"
round
plain
type="primary"
@click="onOpenDialog('create', 'SFTP')"
>
{{ $t('setting.createBackupAccount', ['SFTP']) }}
</el-button>
</el-alert>
</el-card>
</el-col>
</el-row>
</LayoutContent>
</el-form>
<DialogOperate ref="dialogRef" @search="search" />
</div>
@ -189,6 +216,7 @@
<script setup lang="ts">
import { dateFromat } from '@/utils/util';
import { onMounted, ref } from 'vue';
import LayoutContent from '@/layout/layout-content.vue';
import { getBackupList, deleteBackup } from '@/api/modules/backup';
import DialogOperate from '@/views/setting/backup-account/operate/index.vue';
import Submenu from '@/views/setting/index.vue';

76
frontend/src/views/setting/monitor/index.vue
View File

@ -3,43 +3,44 @@
<Submenu activeName="monitor" />
<el-form :model="form" ref="panelFormRef" label-position="left" label-width="160px">
<el-card style="margin-top: 20px">
<template #header>
<div class="card-header">
<span>{{ $t('menu.monitor') }}</span>
</div>
</template>
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item
:label="$t('setting.enableMonitor')"
:rules="Rules.requiredInput"
prop="monitorStatus"
>
<el-switch
@change="onSave(panelFormRef, 'MonitorStatus', form.monitorStatus)"
v-model="form.monitorStatus"
active-value="enable"
inactive-value="disable"
/>
</el-form-item>
<el-form-item :label="$t('setting.storeDays')" :rules="Rules.number" prop="monitorStoreDays">
<el-input clearable v-model.number="form.monitorStoreDays">
<template #append>
<el-button
@click="onSave(panelFormRef, 'MonitorStoreDays', form.monitorStoreDays)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="onClean()" icon="Delete">{{ $t('setting.cleanMonitor') }}</el-button>
</el-form-item>
</el-col>
</el-row>
<LayoutContent :header="$t('menu.monitor')">
<el-row>
<el-col :span="1"><br /></el-col>
<el-col :span="10">
<el-form-item
:label="$t('setting.enableMonitor')"
:rules="Rules.requiredInput"
prop="monitorStatus"
>
<el-switch
@change="onSave(panelFormRef, 'MonitorStatus', form.monitorStatus)"
v-model="form.monitorStatus"
active-value="enable"
inactive-value="disable"
/>
</el-form-item>
<el-form-item
:label="$t('setting.storeDays')"
:rules="Rules.number"
prop="monitorStoreDays"
>
<el-input clearable v-model.number="form.monitorStoreDays">
<template #append>
<el-button
@click="onSave(panelFormRef, 'MonitorStoreDays', form.monitorStoreDays)"
icon="Collection"
>
{{ $t('commons.button.save') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="onClean()" icon="Delete">{{ $t('setting.cleanMonitor') }}</el-button>
</el-form-item>
</el-col>
</el-row>
</LayoutContent>
</el-card>
</el-form>
</div>
@ -48,6 +49,7 @@
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import LayoutContent from '@/layout/layout-content.vue';
import { cleanMonitors, getSettingInfo, updateSetting } from '@/api/modules/setting';
import { useDeleteData } from '@/hooks/use-delete-data';
import Submenu from '@/views/setting/index.vue';

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

@ -2,66 +2,73 @@
<div v-loading="loading">
<Submenu activeName="snapshot" />
<el-card v-if="!isRecordShow" style="margin-top: 20px">
<ComplexTable :pagination-config="paginationConfig" v-model:selects="selects" :data="data" @search="search">
<template #toolbar>
<el-button type="primary" icon="Plus" @click="onCreate()">
{{ $t('setting.createSnapshot') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column
show-overflow-tooltip
:label="$t('commons.table.name')"
min-width="100"
prop="name"
fix
/>
<el-table-column
:label="$t('commons.table.description')"
min-width="150"
show-overflow-tooltip
prop="description"
/>
<el-table-column :label="$t('setting.backupAccount')" min-width="150" prop="from" />
<el-table-column :label="$t('setting.backup')" min-width="80" prop="status">
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" type="success">
{{ $t('commons.table.statusSuccess') }}
</el-tag>
<el-tag v-if="row.status === 'Waiting'" type="info">
{{ $t('commons.table.statusWaiting') }}
</el-tag>
<el-tooltip
v-if="row.status === 'Failed'"
class="box-item"
effect="dark"
:content="row.message"
placement="top-start"
>
<el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
</el-tooltip>
<LayoutContent :header="$t('setting.snapshot')">
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
>
<template #toolbar>
<el-button type="primary" icon="Plus" @click="onCreate()">
{{ $t('setting.createSnapshot') }}
</el-button>
<el-button type="danger" plain :disabled="selects.length === 0" @click="batchDelete(null)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
<el-table-column type="selection" fix />
<el-table-column
show-overflow-tooltip
:label="$t('commons.table.name')"
min-width="100"
prop="name"
fix
/>
<el-table-column
:label="$t('commons.table.description')"
min-width="150"
show-overflow-tooltip
prop="description"
/>
<el-table-column :label="$t('setting.backupAccount')" min-width="150" prop="from" />
<el-table-column :label="$t('setting.backup')" min-width="80" prop="status">
<template #default="{ row }">
<el-tag v-if="row.status === 'Success'" type="success">
{{ $t('commons.table.statusSuccess') }}
</el-tag>
<el-tag v-if="row.status === 'Waiting'" type="info">
{{ $t('commons.table.statusWaiting') }}
</el-tag>
<el-tooltip
v-if="row.status === 'Failed'"
class="box-item"
effect="dark"
:content="row.message"
placement="top-start"
>
<el-tag type="danger">{{ $t('commons.table.statusFailed') }}</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
prop="createdAt"
:label="$t('commons.table.date')"
:formatter="dateFromat"
show-overflow-tooltip
/>
<fu-table-operations
width="200px"
:ellipsis="10"
:buttons="buttons"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</LayoutContent>
</el-card>
<RecoverStatus ref="recoverStatusRef"></RecoverStatus>
<el-dialog v-model="dialogVisiable" :title="$t('setting.createSnapshot')" width="30%">
<el-drawer v-model="dialogVisiable" :title="$t('setting.createSnapshot')" size="50%">
<el-form v-loading="loading" ref="snapRef" label-width="100px" :model="snapInfo" :rules="rules">
<el-form-item :label="$t('cronjob.target')" prop="from">
<el-select v-model="snapInfo.from" clearable>
@ -87,7 +94,7 @@
</el-button>
</span>
</template>
</el-dialog>
</el-drawer>
</div>
</template>
@ -103,6 +110,7 @@ import i18n from '@/lang';
import { ElMessage } from 'element-plus';
import { Setting } from '@/api/interface/setting';
import Submenu from '@/views/setting/index.vue';
import LayoutContent from '@/layout/layout-content.vue';
import RecoverStatus from '@/views/setting/snapshot/status/index.vue';
import { getBackupList } from '@/api/modules/backup';
import { loadBackupName } from '../helper';