gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-03-14 01:34:47 +08:00
Code

feat: 统一抽屉组件 (#5691)

Browse Source
This commit is contained in:
zhengkunwang 2024-07-05 16:48:38 +08:00 committed by zhengkunwang223
parent a1b1790935
commit ed2f5c42d0
154 changed files with 6464 additions and 8584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -37,7 +37,7 @@
"codemirror": "^6.0.1",
"echarts": "^5.5.0",
"element-plus": "^2.7.5",
"fit2cloud-ui-plus": "^1.1.4",
"fit2cloud-ui-plus": "^1.1.5",
"highlight.js": "^11.9.0",
"js-base64": "^3.7.7",
"md-editor-v3": "^2.11.3",

35
frontend/src/components/backup/index.vue
View File

@ -1,22 +1,12 @@
<template>
<div>
<el-drawer
v-model="backupVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader
v-if="detailName"
:header="$t('commons.button.backup')"
:resource="name + '(' + detailName + ')'"
:back="handleClose"
/>
<DrawerHeader v-else :header="$t('commons.button.backup')" :resource="name" :back="handleClose" />
</template>
<DrawerPro
v-model="backupVisible"
:header="$t('commons.button.backup')"
:resource="detailName ? name + ' [' + detailName + ']' : name"
:back="handleClose"
size="large"
>
<template #content>
<div class="mb-5" v-if="type === 'app'">
<el-alert :closable="false" type="warning">
<div class="mt-2 text-xs">
@ -70,11 +60,9 @@
<fu-table-operations width="230px" :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</el-drawer>
<OpDialog ref="opRef" @search="search" />
</div>
</template>
</DrawerPro>
<OpDialog ref="opRef" @search="search" />
<AppBackUp ref="backupRef" @close="search" />
<AppRecover ref="recoverRef" />
</template>
@ -84,7 +72,6 @@ import { reactive, ref } from 'vue';
import { computeSize, dateFormat, downloadFile } from '@/utils/util';
import { getBackupList } from '@/api/modules/setting';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { deleteBackupRecord, downloadBackupRecord, searchBackupRecords } from '@/api/modules/setting';
import { Backup } from '@/api/interface/backup';
import router from '@/routers';

7
frontend/src/components/complex-table/index.vue
View File

@ -3,7 +3,7 @@
<div class="complex-table__header" v-if="slots.header || header">
<slot name="header">{{ header }}</slot>
</div>
<div v-if="slots.toolbar" class="bt-5">
<div v-if="slots.toolbar">
<slot name="toolbar"></slot>
</div>
@ -48,7 +48,6 @@ const props = defineProps({
paginationConfig: {
type: Object,
required: false,
default: () => {},
},
heightDiff: {
type: Number,
@ -126,6 +125,10 @@ onMounted(() => {
font-size: 18px;
}
.complex-table__body {
margin-top: 10px;
}
.complex-table__toolbar {
@include flex-row(space-between, center);

4
frontend/src/components/del-dialog/index.vue
View File

@ -37,7 +37,7 @@
<script setup lang="ts">
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { onMounted, reactive, ref } from 'vue';
import { reactive, ref } from 'vue';
defineOptions({ name: 'OpDialog' });
@ -103,8 +103,6 @@ const handleClose = () => {
open.value = false;
};
onMounted(() => {});
defineExpose({
acceptParams,
});

122
frontend/src/components/drawer-pro/index.vue Normal file
View File

@ -0,0 +1,122 @@
<template>
<el-drawer
v-model="localOpenPage"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:size="size"
>
<template #header>
<el-page-header @back="handleBack">
<template #content>
<span>{{ header }}</span>
<span v-if="resource != ''">
-
<el-tooltip v-if="resource.length > 25" :content="resource" placement="bottom">
<el-text type="primary">{{ resource.substring(0, 23) + '...' }}</el-text>
</el-tooltip>
<el-text type="primary" v-else>{{ resource }}</el-text>
</span>
<el-divider v-if="slots.buttons" direction="vertical" />
<slot v-if="slots.buttons" name="buttons"></slot>
</template>
<template #extra>
<el-tooltip :content="loadTooltip()" placement="top" v-if="fullScreen">
<el-button @click="toggleFullscreen" link icon="FullScreen" plain class="mr-5"></el-button>
</el-tooltip>
<slot v-if="slots.extra" name="extra"></slot>
</template>
</el-page-header>
</template>
<div v-if="slots.content">
<slot name="content"></slot>
</div>
<el-row v-else>
<el-col :span="22" :offset="1">
<slot></slot>
</el-col>
</el-row>
<template #footer v-if="slots.footer">
<slot name="footer"></slot>
</template>
</el-drawer>
</template>
<script lang="ts" setup>
import { computed, useSlots } from 'vue';
defineOptions({ name: 'DrawerPro' });
import screenfull from 'screenfull';
import i18n from '@/lang';
const props = defineProps({
header: String,
back: Function,
resource: {
type: String,
default: '',
},
size: {
type: String,
default: 'normal',
},
modelValue: {
type: Boolean,
default: false,
},
fullScreen: {
type: Boolean,
default: false,
},
});
const slots = useSlots();
const emit = defineEmits(['update:modelValue']);
const size = computed(() => {
switch (props.size) {
case 'small':
return '30%';
case 'normal':
return '40%';
case 'large':
return '50%';
case 'full':
return '100%';
default:
return '50%';
}
});
const localOpenPage = computed({
get() {
return props.modelValue;
},
set(value: boolean) {
emit('update:modelValue', value);
},
});
const handleBack = () => {
if (props.back) {
props.back();
} else {
closePage();
}
};
const closePage = () => {
localOpenPage.value = false;
};
function toggleFullscreen() {
if (screenfull.isEnabled) {
screenfull.toggle();
}
}
const loadTooltip = () => {
return i18n.global.t('commons.button.' + (screenfull.isFullscreen ? 'quitFullscreen' : 'fullscreen'));
};
</script>

2
frontend/src/components/index.ts
View File

@ -10,6 +10,7 @@ import Tooltip from '@/components/tooltip/index.vue';
import CopyButton from '@/components/copy-button/index.vue';
import MsgInfo from '@/components/msg-info/index.vue';
import MainDiv from '@/components/main-div/index.vue';
import DrawerPro from '@/components/drawer-pro/index.vue';
export default {
install(app: App) {
app.component(LayoutContent.name, LayoutContent);
@ -23,5 +24,6 @@ export default {
app.component(TableSetting.name, TableSetting);
app.component(MsgInfo.name, MsgInfo);
app.component(MainDiv.name, MainDiv);
app.component(DrawerPro.name, DrawerPro);
},
};

40
frontend/src/components/layout-content/index.vue
View File

@ -19,23 +19,29 @@
</div>
<div class="content-container__main" v-if="slots.main">
<el-card>
<div class="content-container__title" v-if="slots.title || title">
<div class="content-container__title" v-if="title">
<slot name="title">
<back-button
:path="backPath"
:name="backName"
:to="backTo"
:header="title"
:reload="reload"
v-if="showBack"
>
<template v-if="slots.leftToolBar" #buttons>
<slot name="leftToolBar"></slot>
</template>
<template v-else-if="slots.buttons" #buttons>
<slot name="buttons"></slot>
</template>
</back-button>
<div v-if="showBack">
<div class="flex justify-between">
<back-button
:path="backPath"
:name="backName"
:to="backTo"
:header="title"
:reload="reload"
>
<template v-if="slots.leftToolBar" #buttons>
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
</template>
<!-- <template v-else-if="slots.buttons" #buttons>
<slot name="buttons"></slot>
</template> -->
</back-button>
<div>
<slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
</div>
</div>
</div>
<div class="flex justify-between" v-else>
<div>
{{ title }}
@ -106,7 +112,7 @@ const showBack = computed(() => {
}
.content-container__title {
font-weight: 700;
font-weight: 400;
font-size: 18px;
}

2
frontend/src/components/table-setting/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-popover placement="bottom-start" :width="200" trigger="click">
<el-popover placement="bottom-start" :width="200" trigger="hover">
<template #reference>
<el-button class="timer-button" :icon="Refresh"></el-button>
</template>

176
frontend/src/components/upload/index.vue
View File

@ -1,97 +1,100 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="upVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('commons.button.import')"
:resource="title"
:back="handleClose"
size="large"
>
<template #header>
<DrawerHeader :header="$t('commons.button.import')" :resource="title" :back="handleClose" />
</template>
<div v-loading="loading">
<div class="mb-4" v-if="type === 'mysql' || type === 'mariadb'">
<el-alert type="error" :title="$t('database.formatHelper', [remark])" />
</div>
<div class="mb-4" v-if="type === 'website'">
<el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
</div>
<el-upload ref="uploadRef" drag :on-change="fileOnChange" class="upload-demo" :auto-upload="false">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('database.dropHelper') }}
<em>{{ $t('database.clickHelper') }}</em>
<template #content>
<div v-loading="loading">
<div class="mb-4" v-if="type === 'mysql' || type === 'mariadb'">
<el-alert type="error" :title="$t('database.formatHelper', [remark])" />
</div>
<template #tip>
<el-progress
v-if="isUpload"
text-inside
:stroke-width="12"
:percentage="uploadPercent"
></el-progress>
<div
v-if="type === 'mysql' || type === 'mariadb' || type === 'postgresql'"
style="width: 80%"
class="el-upload__tip"
>
<span class="input-help">{{ $t('database.supportUpType') }}</span>
<span class="input-help">
{{ $t('database.zipFormat') }}
</span>
<div class="mb-4" v-if="type === 'website'">
<el-alert :closable="false" type="warning" :title="$t('website.websiteBackupWarn')"></el-alert>
</div>
<el-upload ref="uploadRef" drag :on-change="fileOnChange" class="upload-demo" :auto-upload="false">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('database.dropHelper') }}
<em>{{ $t('database.clickHelper') }}</em>
</div>
<div v-else style="width: 80%" class="el-upload__tip">
<span class="input-help">{{ $t('website.supportUpType') }}</span>
<span class="input-help">
{{ $t('website.zipFormat', [type + '.json']) }}
</span>
</div>
</template>
</el-upload>
<el-button :disabled="isUpload" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
{{ $t('commons.button.upload') }}
</el-button>
<template #tip>
<el-progress
v-if="isUpload"
text-inside
:stroke-width="12"
:percentage="uploadPercent"
></el-progress>
<div
v-if="type === 'mysql' || type === 'mariadb' || type === 'postgresql'"
style="width: 80%"
class="el-upload__tip"
>
<span class="input-help">{{ $t('database.supportUpType') }}</span>
<span class="input-help">
{{ $t('database.zipFormat') }}
</span>
</div>
<div v-else style="width: 80%" class="el-upload__tip">
<span class="input-help">{{ $t('website.supportUpType') }}</span>
<span class="input-help">
{{ $t('website.zipFormat', [type + '.json']) }}
</span>
</div>
</template>
</el-upload>
<el-button :disabled="isUpload" v-if="uploaderFiles.length === 1" icon="Upload" @click="onSubmit">
{{ $t('commons.button.upload') }}
</el-button>
<el-divider />
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="data"
>
<template #toolbar>
<el-button
style="margin-left: 10px"
plain
:disabled="selects.length === 0"
@click="onBatchDelete(null)"
<el-divider />
<ComplexTable
:pagination-config="paginationConfig"
@search="search"
v-model:selects="selects"
:data="data"
>
<template #toolbar>
<el-button
class="ml-2.5"
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 prop="name" />
<el-table-column :label="$t('file.size')" prop="size">
<template #default="{ row }">
{{ computeSize(row.size) }}
</template>
</el-table-column>
<el-table-column
show-overflow-tooltip
:label="$t('commons.table.createdAt')"
min-width="90"
fix
>
{{ $t('commons.button.delete') }}
</el-button>
</template>
<el-table-column type="selection" fix />
<el-table-column :label="$t('commons.table.name')" show-overflow-tooltip prop="name" />
<el-table-column :label="$t('file.size')" prop="size">
<template #default="{ row }">
{{ computeSize(row.size) }}
</template>
</el-table-column>
<el-table-column show-overflow-tooltip :label="$t('commons.table.createdAt')" min-width="90" fix>
<template #default="{ row }">
{{ row.createdAt }}
</template>
</el-table-column>
<fu-table-operations
width="150px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</div>
</el-drawer>
<template #default="{ row }">
{{ row.createdAt }}
</template>
</el-table-column>
<fu-table-operations
width="150px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</div>
</template>
</DrawerPro>
<OpDialog ref="opRef" @search="search" />
</div>
<AppRecover ref="recoverRef" />
@ -103,7 +106,6 @@ import { computeSize } from '@/utils/util';
import i18n from '@/lang';
import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
import { File } from '@/api/interface/file';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
import { loadBaseDir } from '@/api/modules/setting';
import { MsgError, MsgSuccess } from '@/utils/message';

135
frontend/src/views/app-store/detail/index.vue
View File

@ -1,79 +1,72 @@
<template>
<el-drawer
v-model="open"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('app.detail')" :back="handleClose" />
</template>
<div class="brief" v-loading="loadingApp">
<div class="detail flex">
<div class="w-12 h-12 rounded p-1 shadow-md icon">
<img :src="app.icon" alt="App Icon" class="w-full h-full rounded" style="object-fit: contain" />
<DrawerPro v-model="open" :header="$t('app.detail')" :back="handleClose" size="large">
<template #content>
<div class="brief" v-loading="loadingApp">
<div class="detail flex">
<div class="w-12 h-12 rounded p-1 shadow-md icon">
<img :src="app.icon" alt="App Icon" class="w-full h-full rounded" style="object-fit: contain" />
</div>
<div class="ml-4">
<div class="name mb-2">
<span>{{ app.name }}</span>
</div>
<div class="description mb-4">
<span>
{{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
</span>
</div>
<br />
<div v-if="!loadingDetail" class="mb-2">
<el-alert
v-if="!appDetail.enable"
:title="$t('app.limitHelper')"
type="warning"
show-icon
:closable="false"
/>
</div>
<el-button
round
v-if="appDetail.enable && operate === 'install'"
@click="openInstall"
type="primary"
class="brief-button"
>
{{ $t('app.install') }}
</el-button>
</div>
</div>
<div class="ml-4">
<div class="name mb-2">
<span>{{ app.name }}</span>
</div>
<div class="description mb-4">
<span>
{{ language == 'zh' || language == 'tw' ? app.shortDescZh : app.shortDescEn }}
</span>
</div>
<br />
<div v-if="!loadingDetail" class="mb-2">
<el-alert
v-if="!appDetail.enable"
:title="$t('app.limitHelper')"
type="warning"
show-icon
:closable="false"
/>
</div>
<el-button
round
v-if="appDetail.enable && operate === 'install'"
@click="openInstall"
type="primary"
class="brief-button"
>
{{ $t('app.install') }}
</el-button>
</div>
</div>
<div class="divider"></div>
<div class="descriptions">
<div>
<el-descriptions direction="vertical">
<el-descriptions-item>
<div class="icons">
<el-link @click="toLink(app.website)">
<el-icon><OfficeBuilding /></el-icon>
<span>{{ $t('app.appOfficeWebsite') }}</span>
<div class="divider"></div>
<div class="descriptions">
<div>
<el-descriptions direction="vertical">
<el-descriptions-item>
<div class="icons">
<el-link @click="toLink(app.website)">
<el-icon><OfficeBuilding /></el-icon>
<span>{{ $t('app.appOfficeWebsite') }}</span>
</el-link>
</div>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.document)">
<el-icon><Document /></el-icon>
<span>{{ $t('app.document') }}</span>
</el-link>
</div>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.document)">
<el-icon><Document /></el-icon>
<span>{{ $t('app.document') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.github)">
<el-icon><Link /></el-icon>
<span>{{ $t('app.github') }}</span>
</el-link>
</el-descriptions-item>
</el-descriptions>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.github)">
<el-icon><Link /></el-icon>
<span>{{ $t('app.github') }}</span>
</el-link>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
</div>
<MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
</el-drawer>
<MdEditor previewOnly v-model="app.readMe" :theme="isDarkTheme ? 'dark' : 'light'" />
</template>
</DrawerPro>
<Install ref="installRef"></Install>
</template>

244
frontend/src/views/app-store/detail/install/index.vue
View File

@ -1,137 +1,114 @@
<template>
<el-drawer
:close-on-click-modal="false"
:close-on-press-escape="false"
v-model="open"
:title="$t('app.install')"
size="50%"
:before-close="handleClose"
>
<template #header>
<Header :header="$t('app.install')" :back="handleClose"></Header>
</template>
<el-row v-loading="loading">
<el-col :span="22" :offset="1">
<el-alert
:title="$t('app.appInstallWarn')"
class="common-prompt"
:closable="false"
type="error"
v-if="!isHostMode"
/>
<el-alert
:title="$t('app.hostModeHelper')"
class="common-prompt"
:closable="false"
type="warning"
v-else
/>
<el-form
@submit.prevent
ref="paramForm"
label-position="top"
:model="req"
label-width="150px"
:rules="rules"
:validate-on-rule-change="false"
<DrawerPro v-model="open" :header="$t('app.install')" :back="handleClose" size="large">
<el-alert
:title="$t('app.appInstallWarn')"
class="common-prompt"
:closable="false"
type="error"
v-if="!isHostMode"
/>
<el-alert :title="$t('app.hostModeHelper')" class="common-prompt" :closable="false" type="warning" v-else />
<el-form
v-loading="loading"
@submit.prevent
ref="paramForm"
label-position="top"
:model="req"
label-width="150px"
:rules="rules"
:validate-on-rule-change="false"
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model.trim="req.name"></el-input>
</el-form-item>
<el-form-item :label="$t('app.version')" prop="version">
<el-select v-model="req.version" @change="getAppDetail(req.version)">
<el-option
v-for="(version, index) in appVersions"
:key="index"
:label="version"
:value="version"
></el-option>
</el-select>
</el-form-item>
<Params
:key="paramKey"
v-if="open"
v-model:form="req.params"
v-model:params="installData.params"
v-model:rules="rules.params"
:propStart="'params.'"
></Params>
<el-form-item prop="advanced">
<el-checkbox v-model="req.advanced" :label="$t('app.advanced')" size="large" />
</el-form-item>
<div v-if="req.advanced">
<el-form-item :label="$t('app.containerName')" prop="containerName">
<el-input v-model.trim="req.containerName" :placeholder="$t('app.containerNameHelper')"></el-input>
</el-form-item>
<el-form-item prop="allowPort" v-if="!isHostMode">
<el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
<span class="input-help">{{ $t('app.allowPortHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('container.cpuQuota')"
prop="cpuQuota"
:rules="checkNumberRange(0, limits.cpu)"
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model.trim="req.name"></el-input>
</el-form-item>
<el-form-item :label="$t('app.version')" prop="version">
<el-select v-model="req.version" @change="getAppDetail(req.version)">
<el-option
v-for="(version, index) in appVersions"
:key="index"
:label="version"
:value="version"
></el-option>
</el-select>
</el-form-item>
<Params
:key="paramKey"
v-if="open"
v-model:form="req.params"
v-model:params="installData.params"
v-model:rules="rules.params"
:propStart="'params.'"
></Params>
<el-form-item prop="advanced">
<el-checkbox v-model="req.advanced" :label="$t('app.advanced')" size="large" />
</el-form-item>
<div v-if="req.advanced">
<el-form-item :label="$t('app.containerName')" prop="containerName">
<el-input
v-model.trim="req.containerName"
:placeholder="$t('app.containerNameHelper')"
></el-input>
</el-form-item>
<el-form-item prop="allowPort" v-if="!isHostMode">
<el-checkbox v-model="req.allowPort" :label="$t('app.allowPort')" size="large" />
<span class="input-help">{{ $t('app.allowPortHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('container.cpuQuota')"
prop="cpuQuota"
:rules="checkNumberRange(0, limits.cpu)"
>
<el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
<template #append>{{ $t('app.cpuCore') }}</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
</span>
</el-form-item>
<el-form-item
:label="$t('container.memoryLimit')"
prop="memoryLimit"
:rules="checkNumberRange(0, limits.memory)"
>
<el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
<template #append>
<el-select
v-model="req.memoryUnit"
placeholder="Select"
style="width: 85px"
@change="changeUnit"
>
<el-option label="MB" value="M" />
<el-option label="GB" value="G" />
</el-select>
</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
</span>
</el-form-item>
<el-form-item prop="editCompose">
<el-checkbox v-model="req.editCompose" :label="$t('app.editCompose')" size="large" />
<span class="input-help">{{ $t('app.editComposeHelper') }}</span>
</el-form-item>
<el-form-item pro="pullImage">
<el-checkbox v-model="req.pullImage" :label="$t('container.forcePull')" size="large" />
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
<div v-if="req.editCompose">
<codemirror
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="height: 400px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="req.dockerCompose"
/>
</div>
</div>
</el-form>
</el-col>
</el-row>
<el-input type="number" style="width: 40%" v-model.number="req.cpuQuota" maxlength="5">
<template #append>{{ $t('app.cpuCore') }}</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
</span>
</el-form-item>
<el-form-item
:label="$t('container.memoryLimit')"
prop="memoryLimit"
:rules="checkNumberRange(0, limits.memory)"
>
<el-input style="width: 40%" v-model.number="req.memoryLimit" maxlength="10">
<template #append>
<el-select
v-model="req.memoryUnit"
placeholder="Select"
style="width: 85px"
@change="changeUnit"
>
<el-option label="MB" value="M" />
<el-option label="GB" value="G" />
</el-select>
</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.memory]) }}{{ req.memoryUnit }}B
</span>
</el-form-item>
<el-form-item prop="editCompose">
<el-checkbox v-model="req.editCompose" :label="$t('app.editCompose')" size="large" />
<span class="input-help">{{ $t('app.editComposeHelper') }}</span>
</el-form-item>
<el-form-item pro="pullImage">
<el-checkbox v-model="req.pullImage" :label="$t('container.forcePull')" size="large" />
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
<div v-if="req.editCompose">
<codemirror
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="height: 400px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="req.dockerCompose"
/>
</div>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -140,7 +117,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup name="appInstall">
@ -151,7 +128,6 @@ import { FormInstance, FormRules } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import Params from '../params/index.vue';
import Header from '@/components/drawer-header/index.vue';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';

199
frontend/src/views/app-store/installed/detail/index.vue
View File

@ -1,112 +1,98 @@
<template>
<el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="40%">
<template #header>
<Header :header="$t('app.param')" :back="handleClose">
<template #buttons>
<el-button type="primary" plain @click="editParam" :disabled="loading">
{{ edit ? $t('app.detail') : $t('commons.button.edit') }}
</el-button>
</template>
</Header>
<DrawerPro v-model="open" :header="$t('app.param')" :back="handleClose" size="normal">
<template #buttons>
<el-button type="primary" plain @click="editParam" :disabled="loading">
{{ edit ? $t('app.detail') : $t('commons.button.edit') }}
</el-button>
</template>
<el-row v-if="!edit">
<el-col :span="22" :offset="1">
<el-descriptions border :column="1">
<el-descriptions-item v-for="(param, key) in params" :label="getLabel(param)" :key="key">
<span>{{ param.showValue && param.showValue != '' ? param.showValue : param.value }}</span>
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
<el-row v-else v-loading="loading">
<el-col :span="22" :offset="1">
<el-alert :title="$t('app.updateHelper')" type="warning" :closable="false" class="common-prompt" />
<el-form @submit.prevent ref="paramForm" :model="paramModel" label-position="top" :rules="rules">
<div v-for="(p, index) in params" :key="index">
<el-form-item :prop="p.key" :label="getLabel(p)">
<el-input
v-if="p.type == 'number'"
type="number"
v-model.number="paramModel.params[p.key]"
:disabled="!p.edit"
></el-input>
<el-select
v-model="paramModel.params[p.key]"
v-else-if="p.type == 'select'"
:multiple="p.multiple"
>
<el-option
v-for="value in p.values"
:key="value.label"
:value="value.value"
:label="value.label"
:disabled="!p.edit"
></el-option>
</el-select>
<el-input v-else v-model.trim="paramModel.params[p.key]" :disabled="!p.edit"></el-input>
</el-form-item>
</div>
<el-form-item prop="advanced">
<el-checkbox v-model="paramModel.advanced" :label="$t('app.advanced')" size="large" />
</el-form-item>
<div v-if="paramModel.advanced">
<el-form-item :label="$t('app.containerName')" prop="containerName">
<el-input
v-model.trim="paramModel.containerName"
:placeholder="$t('app.containerNameHelper')"
></el-input>
</el-form-item>
<el-form-item prop="allowPort" v-if="!paramModel.isHostMode">
<el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
<span class="input-help">{{ $t('app.allowPortHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
<el-input
type="number"
style="width: 40%"
v-model.number="paramModel.cpuQuota"
maxlength="5"
>
<template #append>{{ $t('app.cpuCore') }}</template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
<el-input style="width: 40%" v-model.number="paramModel.memoryLimit" maxlength="10">
<template #append>
<el-select v-model="paramModel.memoryUnit" placeholder="Select" style="width: 85px">
<el-option label="KB" value="K" />
<el-option label="MB" value="M" />
<el-option label="GB" value="G" />
</el-select>
</template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper') }}</span>
</el-form-item>
<el-descriptions border :column="1" v-if="!edit">
<el-descriptions-item v-for="(param, key) in params" :label="getLabel(param)" :key="key">
<span>{{ param.showValue && param.showValue != '' ? param.showValue : param.value }}</span>
</el-descriptions-item>
</el-descriptions>
<el-form-item prop="editCompose">
<el-checkbox v-model="paramModel.editCompose" :label="$t('app.editCompose')" size="large" />
<span class="input-help">{{ $t('app.editComposeHelper') }}</span>
</el-form-item>
<div v-if="paramModel.editCompose">
<codemirror
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="height: 400px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="paramModel.dockerCompose"
/>
</div>
<div v-else v-loading="loading">
<el-alert :title="$t('app.updateHelper')" type="warning" :closable="false" class="common-prompt" />
<el-form @submit.prevent ref="paramForm" :model="paramModel" label-position="top" :rules="rules">
<div v-for="(p, index) in params" :key="index">
<el-form-item :prop="p.key" :label="getLabel(p)">
<el-input
v-if="p.type == 'number'"
type="number"
v-model.number="paramModel.params[p.key]"
:disabled="!p.edit"
></el-input>
<el-select
v-model="paramModel.params[p.key]"
v-else-if="p.type == 'select'"
:multiple="p.multiple"
>
<el-option
v-for="value in p.values"
:key="value.label"
:value="value.value"
:label="value.label"
:disabled="!p.edit"
></el-option>
</el-select>
<el-input v-else v-model.trim="paramModel.params[p.key]" :disabled="!p.edit"></el-input>
</el-form-item>
</div>
<el-form-item prop="advanced">
<el-checkbox v-model="paramModel.advanced" :label="$t('app.advanced')" size="large" />
</el-form-item>
<div v-if="paramModel.advanced">
<el-form-item :label="$t('app.containerName')" prop="containerName">
<el-input
v-model.trim="paramModel.containerName"
:placeholder="$t('app.containerNameHelper')"
></el-input>
</el-form-item>
<el-form-item prop="allowPort" v-if="!paramModel.isHostMode">
<el-checkbox v-model="paramModel.allowPort" :label="$t('app.allowPort')" size="large" />
<span class="input-help">{{ $t('app.allowPortHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.cpuQuota')" prop="cpuQuota">
<el-input type="number" class="!w-2/5" v-model.number="paramModel.cpuQuota" maxlength="5">
<template #append>{{ $t('app.cpuCore') }}</template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.memoryLimit')" prop="memoryLimit">
<el-input class="!w-2/5" v-model.number="paramModel.memoryLimit" maxlength="10">
<template #append>
<el-select v-model="paramModel.memoryUnit" placeholder="Select" style="width: 85px">
<el-option label="KB" value="K" />
<el-option label="MB" value="M" />
<el-option label="GB" value="G" />
</el-select>
</template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper') }}</span>
</el-form-item>
<el-form-item prop="editCompose">
<el-checkbox v-model="paramModel.editCompose" :label="$t('app.editCompose')" size="large" />
<span class="input-help">{{ $t('app.editComposeHelper') }}</span>
</el-form-item>
<div v-if="paramModel.editCompose">
<codemirror
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="height: 400px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="paramModel.dockerCompose"
/>
</div>
</el-form>
</el-col>
</el-row>
</div>
</el-form>
</div>
<template #footer v-if="edit">
<span>
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -115,13 +101,12 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { App } from '@/api/interface/app';
import { GetAppInstallParams, UpdateAppInstallParams } from '@/api/modules/app';
import { reactive, ref } from 'vue';
import Header from '@/components/drawer-header/index.vue';
import { FormInstance } from 'element-plus';
import { Rules, checkNumberRange } from '@/global/form-rules';
import { MsgSuccess } from '@/utils/message';

52
frontend/src/views/app-store/installed/ignore/index.vue
View File

@ -1,41 +1,39 @@
<template>
<el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="30%">
<template #header>
<Header :header="$t('app.ignoreList')" :back="handleClose"></Header>
<DrawerPro v-model="open" :header="$t('app.ignoreList')" :back="handleClose" size="small">
<template #content>
<el-row :gutter="5">
<el-col v-for="(app, index) in apps" :key="index">
<el-card class="app-margin">
<el-row :gutter="20">
<el-col :span="6">
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
</el-col>
<el-col :span="12">
<span>{{ app.name }}</span>
<div class="app-margin">
<el-tag>{{ app.version }}</el-tag>
</div>
</el-col>
<el-col :span="6">
<el-button type="primary" link @click="cancelIgnore(app.detailID)">
{{ $t('app.cancelIgnore') }}
</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</template>
<el-row :gutter="5">
<el-col v-for="(app, index) in apps" :key="index">
<el-card class="app-margin">
<el-row :gutter="20">
<el-col :span="6">
<el-avatar shape="square" :size="60" :src="'data:image/png;base64,' + app.icon" />
</el-col>
<el-col :span="12">
<span>{{ app.name }}</span>
<div class="app-margin">
<el-tag>{{ app.version }}</el-tag>
</div>
</el-col>
<el-col :span="6">
<el-button type="primary" link @click="cancelIgnore(app.detailID)">
{{ $t('app.cancelIgnore') }}
</el-button>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { GetIgnoredApp, IgnoreUpgrade } from '@/api/modules/app';
import { ref } from 'vue';
import Header from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import i18n from '@/lang';

171
frontend/src/views/app-store/installed/upgrade/index.vue
View File

@ -1,94 +1,84 @@
<template>
<el-drawer :close-on-click-modal="false" :close-on-press-escape="false" v-model="open" size="50%">
<template #header>
<Header
:header="$t('commons.button.' + operateReq.operate)"
:resource="resourceName"
:back="handleClose"
></Header>
</template>
<el-row :gutter="10">
<el-col :span="22" :offset="1">
<div>
<el-descriptions direction="vertical">
<el-descriptions-item>
<el-link @click="toLink(app.website)">
<el-icon><OfficeBuilding /></el-icon>
<span>{{ $t('app.appOfficeWebsite') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.document)">
<el-icon><Document /></el-icon>
<span>{{ $t('app.document') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.github)">
<el-icon><Link /></el-icon>
<span>{{ $t('app.github') }}</span>
</el-link>
</el-descriptions-item>
</el-descriptions>
</div>
</el-col>
<el-col :span="22" :offset="1">
<el-form
@submit.prevent
ref="updateRef"
:rules="rules"
label-position="top"
:model="operateReq"
v-loading="loading"
>
<el-form-item :label="$t('app.versionSelect')" prop="detailId">
<el-select v-model="operateReq.version" @change="getVersions(operateReq.version)">
<el-option
v-for="(version, index) in versions"
:key="index"
:value="version.version"
:label="version.version"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="backup" v-if="operateReq.operate === 'upgrade'">
<el-checkbox v-model="operateReq.backup" :label="$t('app.backupApp')" />
<span class="input-help">
<el-text type="warning">{{ $t('app.backupAppHelper') }}</el-text>
</span>
</el-form-item>
<el-form-item pro="pullImage" v-if="operateReq.operate === 'upgrade'">
<el-checkbox v-model="operateReq.pullImage" :label="$t('container.forcePull')" size="large" />
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
</el-form>
</el-col>
<DrawerPro
v-model="open"
:header="$t('commons.button.' + operateReq.operate)"
:resource="resourceName"
:back="handleClose"
>
<el-descriptions direction="vertical">
<el-descriptions-item>
<el-link @click="toLink(app.website)">
<el-icon><OfficeBuilding /></el-icon>
<span>{{ $t('app.appOfficeWebsite') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.document)">
<el-icon><Document /></el-icon>
<span>{{ $t('app.document') }}</span>
</el-link>
</el-descriptions-item>
<el-descriptions-item>
<el-link @click="toLink(app.github)">
<el-icon><Link /></el-icon>
<span>{{ $t('app.github') }}</span>
</el-link>
</el-descriptions-item>
</el-descriptions>
<el-form
@submit.prevent
ref="updateRef"
:rules="rules"
label-position="top"
:model="operateReq"
v-loading="loading"
>
<el-form-item :label="$t('app.versionSelect')" prop="detailId">
<el-select v-model="operateReq.version" @change="getVersions(operateReq.version)">
<el-option
v-for="(version, index) in versions"
:key="index"
:value="version.version"
:label="version.version"
></el-option>
</el-select>
</el-form-item>
<el-form-item prop="backup" v-if="operateReq.operate === 'upgrade'">
<el-checkbox v-model="operateReq.backup" :label="$t('app.backupApp')" />
<span class="input-help">
<el-text type="warning">{{ $t('app.backupAppHelper') }}</el-text>
</span>
</el-form-item>
<el-form-item pro="pullImage" v-if="operateReq.operate === 'upgrade'">
<el-checkbox v-model="operateReq.pullImage" :label="$t('container.forcePull')" size="large" />
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
</el-form>
<el-col :span="22" :offset="1" v-if="operateReq.operate === 'upgrade'">
<el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
<el-button class="ml-1.5" type="text" @click="openDiff()">{{ $t('app.showDiff') }}</el-button>
<div>
<el-checkbox v-model="useNewCompose" :label="$t('app.useCustom')" size="large" />
</div>
<div v-if="useNewCompose">
<el-text type="danger">{{ $t('app.useCustomHelper') }}</el-text>
</div>
<codemirror
v-if="useNewCompose"
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 500px); margin-top: 10px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="newCompose"
/>
</el-col>
</el-row>
<div v-if="operateReq.operate === 'upgrade'">
<el-text type="warning">{{ $t('app.upgradeWarn') }}</el-text>
<el-button class="ml-1.5" type="text" @click="openDiff()">{{ $t('app.showDiff') }}</el-button>
<div>
<el-checkbox v-model="useNewCompose" :label="$t('app.useCustom')" size="large" />
</div>
<div v-if="useNewCompose">
<el-text type="danger">{{ $t('app.useCustomHelper') }}</el-text>
</div>
<codemirror
v-if="useNewCompose"
:autofocus="true"
placeholder=""
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 500px); margin-top: 10px"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="newCompose"
/>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -98,7 +88,7 @@
</span>
</template>
<Diff ref="composeDiffRef" @confirm="getNewCompose" />
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { App } from '@/api/interface/app';
@ -106,7 +96,6 @@ import { GetAppUpdateVersions, IgnoreUpgrade, InstalledOp } from '@/api/modules/
import i18n from '@/lang';
import { ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, onBeforeUnmount } from 'vue';
import Header from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { Rules } from '@/global/form-rules';
import Diff from './diff/index.vue';

165
frontend/src/views/container/compose/create/index.vue
View File

@ -1,95 +1,74 @@
<template>
<el-drawer
v-model="drawerVisible"
@close="handleClose"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.compose')" :back="handleClose" />
</template>
<div v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules">
<el-form-item :label="$t('container.from')">
<el-radio-group v-model="form.from" @change="onEdit('form')">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
<el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'path'" prop="path">
<el-input
@change="onEdit('')"
:placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
v-model="form.path"
>
<template #prepend>
<FileList @choose="loadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="form.from === 'template'" prop="template">
<el-select v-model="form.template" @change="onEdit('template')">
<template #prefix>{{ $t('container.template') }}</template>
<el-option
v-for="item in templateOptions"
:key="item.id"
:value="item.id"
:label="item.name"
/>
</el-select>
</el-form-item>
<el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
<el-input @input="changePath" @change="onEdit('')" v-model.trim="form.name">
<template #prefix>
<span style="margin-right: 8px">{{ $t('file.dir') }}</span>
</template>
</el-input>
<span class="input-help">
{{ $t('container.composePathHelper', [composeFile]) }}
</span>
</el-form-item>
<el-form-item>
<div v-if="form.from === 'edit' || form.from === 'template'" style="width: 100%">
<el-radio-group v-model="mode" size="small">
<el-radio-button label="edit">{{ $t('commons.button.edit') }}</el-radio-button>
<el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
</el-radio-group>
<codemirror
@change="onEdit('')"
v-if="mode === 'edit'"
:autofocus="true"
placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 376px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.file"
/>
</div>
<div style="width: 100%">
<LogFile
ref="logRef"
v-model:is-reading="isReading"
:config="logConfig"
:default-button="false"
v-if="mode === 'log' && showLog"
:style="'height: calc(100vh - 370px);min-height: 200px'"
/>
</div>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('container.compose')" :back="handleClose" size="large">
<el-form ref="formRef" @submit.prevent label-position="top" :model="form" :rules="rules" v-loading="loading">
<el-form-item :label="$t('container.from')">
<el-radio-group v-model="form.from" @change="onEdit('form')">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
<el-radio value="template">{{ $t('container.composeTemplate') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'path'" prop="path">
<el-input
@change="onEdit('')"
:placeholder="$t('commons.example') + '/tmp/docker-compose.yml'"
v-model="form.path"
>
<template #prepend>
<FileList @choose="loadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="form.from === 'template'" prop="template">
<el-select v-model="form.template" @change="onEdit('template')">
<template #prefix>{{ $t('container.template') }}</template>
<el-option v-for="item in templateOptions" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item v-if="form.from === 'edit' || form.from === 'template'" prop="name">
<el-input @input="changePath" @change="onEdit('')" v-model.trim="form.name">
<template #prefix>
<span style="margin-right: 8px">{{ $t('file.dir') }}</span>
</template>
</el-input>
<span class="input-help">
{{ $t('container.composePathHelper', [composeFile]) }}
</span>
</el-form-item>
<el-form-item>
<div v-if="form.from === 'edit' || form.from === 'template'" style="width: 100%">
<el-radio-group v-model="mode" size="small">
<el-radio-button label="edit">{{ $t('commons.button.edit') }}</el-radio-button>
<el-radio-button label="log">{{ $t('commons.button.log') }}</el-radio-button>
</el-radio-group>
<codemirror
@change="onEdit('')"
v-if="mode === 'edit'"
:autofocus="true"
placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 376px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.file"
/>
</div>
<div style="width: 100%">
<LogFile
ref="logRef"
v-model:is-reading="isReading"
:config="logConfig"
:default-button="false"
v-if="mode === 'log' && showLog"
:style="'height: calc(100vh - 370px);min-height: 200px'"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">
@ -100,7 +79,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -110,8 +89,6 @@ import { Codemirror } from 'vue-codemirror';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessageBox } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
import { loadBaseDir } from '@/api/modules/setting';
import { MsgError } from '@/utils/message';
import { javascript } from '@codemirror/lang-javascript';

16
frontend/src/views/container/compose/edit/index.vue
View File

@ -1,14 +1,11 @@
<template>
<el-drawer
<DrawerPro
v-model="composeVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('commons.button.edit')"
:back="handleClose"
:resource="name"
size="large"
>
<template #header>
<DrawerHeader :header="$t('commons.button.edit')" :resource="name" :back="handleClose" />
</template>
<div v-loading="loading">
<codemirror
:autofocus="true"
@ -34,7 +31,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { Codemirror } from 'vue-codemirror';
@ -44,7 +41,6 @@ import { ref } from 'vue';
import { composeUpdate } from '@/api/modules/container';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import DrawerHeader from '@/components/drawer-header/index.vue';
const loading = ref(false);
const composeVisible = ref(false);

70
frontend/src/views/container/container/commit/index.vue
View File

@ -1,43 +1,36 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('container.makeImage')"
:back="handleClose"
:resource="form.containerName"
size="large"
>
<template #header>
<DrawerHeader :header="$t('container.makeImage')" :resource="form.containerName" :back="handleClose" />
</template>
<el-row v-loading="loading">
<el-col :span="22" :offset="1">
<el-form @submit.prevent ref="formRef" :model="form" label-position="top">
<el-form-item prop="newImageName" :rules="Rules.imageName">
<template #label>
{{ $t('container.newImageName') }}
</template>
<el-input v-model="form.newImageName" />
</el-form-item>
<el-form-item prop="comment">
<template #label>
{{ $t('container.commitMessage') }}
</template>
<el-input v-model="form.comment" />
</el-form-item>
<el-form-item prop="author">
<template #label>
{{ $t('container.author') }}
</template>
<el-input v-model="form.author" />
</el-form-item>
<el-form-item prop="pause">
<el-checkbox v-model="form.pause">
{{ $t('container.ifPause') }}
</el-checkbox>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-form @submit.prevent ref="formRef" :model="form" label-position="top" v-loading="loading">
<el-form-item prop="newImageName" :rules="Rules.imageName">
<template #label>
{{ $t('container.newImageName') }}
</template>
<el-input v-model="form.newImageName" />
</el-form-item>
<el-form-item prop="comment">
<template #label>
{{ $t('container.commitMessage') }}
</template>
<el-input v-model="form.comment" />
</el-form-item>
<el-form-item prop="author">
<template #label>
{{ $t('container.author') }}
</template>
<el-input v-model="form.author" />
</el-form-item>
<el-form-item prop="pause">
<el-checkbox v-model="form.pause">
{{ $t('container.ifPause') }}
</el-checkbox>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="drawerVisible = false">
@ -48,12 +41,11 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ElForm } from 'element-plus';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';

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

@ -59,6 +59,7 @@
trigger="hover"
:title="$t('commons.table.selectColumn')"
popper-class="popper-class"
:only-icon="true"
/>
</template>
<template #main>

111
frontend/src/views/container/container/log/index.vue
View File

@ -1,69 +1,71 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="logVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
:size="globalStore.isFullScreen ? '100%' : '50%'"
:header="$t('commons.button.log')"
:back="handleClose"
:resource="logSearch.container"
:size="globalStore.isFullScreen ? 'full' : 'large'"
>
<template #header>
<DrawerHeader :header="$t('commons.button.log')" :resource="logSearch.container" :back="handleClose">
<template #extra v-if="!mobile">
<el-tooltip :content="loadTooltip()" placement="top">
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
</el-tooltip>
</template>
</DrawerHeader>
<template #extra v-if="!mobile">
<el-tooltip :content="loadTooltip()" placement="top">
<el-button @click="toggleFullscreen" class="fullScreen" icon="FullScreen" plain></el-button>
</el-tooltip>
</template>
<div>
<el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
<template #prefix>{{ $t('container.fetch') }}</template>
<el-option v-for="item in timeOptions" :key="item.label" :value="item.value" :label="item.label" />
</el-select>
<el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
<template #prefix>{{ $t('container.lines') }}</template>
<el-option :value="0" :label="$t('commons.table.all')" />
<el-option :value="100" :label="100" />
<el-option :value="200" :label="200" />
<el-option :value="500" :label="500" />
<el-option :value="1000" :label="1000" />
</el-select>
<div class="margin-button" style="float: left">
<el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
{{ $t('commons.button.watch') }}
</el-checkbox>
<template #content>
<div>
<el-select @change="searchLogs" class="fetchClass" v-model="logSearch.mode">
<template #prefix>{{ $t('container.fetch') }}</template>
<el-option
v-for="item in timeOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-select @change="searchLogs" class="tailClass" v-model.number="logSearch.tail">
<template #prefix>{{ $t('container.lines') }}</template>
<el-option :value="0" :label="$t('commons.table.all')" />
<el-option :value="100" :label="100" />
<el-option :value="200" :label="200" />
<el-option :value="500" :label="500" />
<el-option :value="1000" :label="1000" />
</el-select>
<div class="margin-button" style="float: left">
<el-checkbox border @change="searchLogs" v-model="logSearch.isWatch">
{{ $t('commons.button.watch') }}
</el-checkbox>
</div>
<el-button class="margin-button" @click="onDownload" icon="Download">
{{ $t('file.download') }}
</el-button>
<el-button class="margin-button" @click="onClean" icon="Delete">
{{ $t('commons.button.clean') }}
</el-button>
</div>
<el-button class="margin-button" @click="onDownload" icon="Download">
{{ $t('file.download') }}
</el-button>
<el-button class="margin-button" @click="onClean" icon="Delete">
{{ $t('commons.button.clean') }}
</el-button>
</div>
<codemirror
:autofocus="true"
:placeholder="$t('commons.msg.noneData')"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 20px; height: calc(100vh - 230px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="logInfo"
@ready="handleReady"
:disabled="true"
/>
<codemirror
:autofocus="true"
:placeholder="$t('commons.msg.noneData')"
:indent-with-tab="true"
:tabSize="4"
style="margin-top: 20px; height: calc(100vh - 230px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="logInfo"
@ready="handleReady"
:disabled="true"
/>
</template>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</div>
</template>
@ -75,7 +77,6 @@ import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ElMessageBox } from 'element-plus';
import { MsgError, MsgSuccess } from '@/utils/message';
import screenfull from 'screenfull';

23
frontend/src/views/container/container/monitor/index.vue
View File

@ -1,15 +1,11 @@
<template>
<el-drawer
<DrawerPro
v-model="monitorVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('container.monitor')"
:back="handleClose"
:resource="title"
size="large"
>
<template #header>
<DrawerHeader :header="$t('container.monitor')" :resource="title" :back="handleClose" />
</template>
<el-form label-position="top" @submit.prevent>
<el-form-item :label="$t('container.refreshTime')">
<el-select v-model="timeInterval" @change="changeTimer">
@ -30,7 +26,7 @@
v-if="chartsOption['cpuChart']"
/>
</el-card>
<el-card style="margin-top: 10px">
<el-card class="mt-2.5">
<v-charts
height="200px"
id="memoryChart"
@ -39,7 +35,7 @@
v-if="chartsOption['memoryChart']"
/>
</el-card>
<el-card style="margin-top: 10px">
<el-card class="mt-2.5">
<v-charts
height="200px"
id="ioChart"
@ -48,7 +44,7 @@
v-if="chartsOption['ioChart']"
/>
</el-card>
<el-card style="margin-top: 10px">
<el-card class="mt-2.5">
<v-charts
height="200px"
id="networkChart"
@ -57,7 +53,7 @@
v-if="chartsOption['networkChart']"
/>
</el-card>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -66,7 +62,6 @@ import { containerStats } from '@/api/modules/container';
import { dateFormatForSecond } from '@/utils/util';
import VCharts from '@/components/v-charts/index.vue';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
const title = ref();
const monitorVisible = ref(false);

492
frontend/src/views/container/container/operate/index.vue
View File

@ -1,20 +1,11 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
@close="handleClose"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="title"
:back="handleClose"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
size="large"
>
<template #header>
<DrawerHeader
:header="title"
:hideResource="dialogData.title === 'create'"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form
ref="formRef"
label-position="top"
@ -23,263 +14,227 @@
:rules="rules"
label-width="80px"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-alert
v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
:title="$t('container.containerFromAppHelper')"
:closable="false"
type="error"
/>
<el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
<el-input
:disabled="isFromApp(dialogData.rowData!)"
clearable
v-model.trim="dialogData.rowData!.name"
/>
<div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)">
<span class="input-help">
{{ $t('container.containerFromAppHelper1') }}
<el-button
style="margin-left: -5px"
size="small"
text
type="primary"
@click="goRouter()"
>
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</el-button>
</span>
</div>
</el-form-item>
<el-form-item :label="$t('container.image')" prop="image">
<el-checkbox v-model="dialogData.rowData!.imageInput" :label="$t('container.input')" />
<el-select
v-if="!dialogData.rowData!.imageInput"
filterable
v-model="dialogData.rowData!.image"
>
<el-option
v-for="(item, index) of images"
:key="index"
:value="item.option"
:label="item.option"
/>
</el-select>
<el-input v-else v-model="dialogData.rowData!.image" />
</el-form-item>
<el-form-item prop="forcePull">
<el-checkbox v-model="dialogData.rowData!.forcePull">
{{ $t('container.forcePull') }}
</el-checkbox>
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.table.port')">
<el-radio-group v-model="dialogData.rowData!.publishAllPorts" class="ml-4">
<el-radio :value="false">{{ $t('container.exposePort') }}</el-radio>
<el-radio :value="true">{{ $t('container.exposeAll') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="!dialogData.rowData!.publishAllPorts">
<el-card class="widthClass">
<el-table
v-if="dialogData.rowData!.exposedPorts.length !== 0"
:data="dialogData.rowData!.exposedPorts"
>
<el-table-column :label="$t('container.server')" min-width="150">
<template #default="{ row }">
<el-input :placeholder="$t('container.serverExample')" v-model="row.host" />
</template>
</el-table-column>
<el-table-column :label="$t('container.container')" min-width="80">
<template #default="{ row }">
<el-input
:placeholder="$t('container.containerExample')"
v-model="row.containerPort"
/>
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.protocol')" min-width="50">
<template #default="{ row }">
<el-select
v-model="row.protocol"
style="width: 100%"
:placeholder="$t('container.serverExample')"
>
<el-option label="tcp" value="tcp" />
<el-option label="udp" value="udp" />
</el-select>
</template>
</el-table-column>
<el-table-column min-width="35">
<template #default="scope">
<el-button link type="primary" @click="handlePortsDelete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="ml-3 mt-2" @click="handlePortsAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-card>
</el-form-item>
<el-form-item :label="$t('container.network')" prop="network">
<el-select v-model="dialogData.rowData!.network">
<el-option
v-for="(item, indexV) of networks"
:key="indexV"
:value="item.option"
:label="item.option"
/>
</el-select>
</el-form-item>
<el-form-item label="ipv4" prop="ipv4">
<el-input v-model="dialogData.rowData!.ipv4" :placeholder="$t('container.inputIpv4')" />
</el-form-item>
<el-form-item label="ipv6" prop="ipv6">
<el-input v-model="dialogData.rowData!.ipv6" :placeholder="$t('container.inputIpv6')" />
</el-form-item>
<el-form-item :label="$t('container.mount')">
<div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
<el-card class="mt-1">
<el-radio-group v-model="row.type">
<el-radio-button value="volume">{{ $t('container.volumeOption') }}</el-radio-button>
<el-radio-button value="bind">{{ $t('container.hostOption') }}</el-radio-button>
</el-radio-group>
<el-button
class="float-right mt-3"
link
type="primary"
@click="handleVolumesDelete(index)"
<el-alert
v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)"
:title="$t('container.containerFromAppHelper')"
:closable="false"
type="error"
/>
<el-form-item class="mt-5" :label="$t('commons.table.name')" prop="name">
<el-input
:disabled="isFromApp(dialogData.rowData!)"
clearable
v-model.trim="dialogData.rowData!.name"
/>
<div v-if="dialogData.title === 'edit' && isFromApp(dialogData.rowData!)">
<span class="input-help">
{{ $t('container.containerFromAppHelper1') }}
<el-button style="margin-left: -5px" size="small" text type="primary" @click="goRouter()">
<el-icon><Position /></el-icon>
{{ $t('firewall.quickJump') }}
</el-button>
</span>
</div>
</el-form-item>
<el-form-item :label="$t('container.image')" prop="image">
<el-checkbox v-model="dialogData.rowData!.imageInput" :label="$t('container.input')" />
<el-select v-if="!dialogData.rowData!.imageInput" filterable v-model="dialogData.rowData!.image">
<el-option v-for="(item, index) of images" :key="index" :value="item.option" :label="item.option" />
</el-select>
<el-input v-else v-model="dialogData.rowData!.image" />
</el-form-item>
<el-form-item prop="forcePull">
<el-checkbox v-model="dialogData.rowData!.forcePull">
{{ $t('container.forcePull') }}
</el-checkbox>
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.table.port')">
<el-radio-group v-model="dialogData.rowData!.publishAllPorts" class="ml-4">
<el-radio :value="false">{{ $t('container.exposePort') }}</el-radio>
<el-radio :value="true">{{ $t('container.exposeAll') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="!dialogData.rowData!.publishAllPorts">
<el-card class="widthClass">
<el-table
v-if="dialogData.rowData!.exposedPorts.length !== 0"
:data="dialogData.rowData!.exposedPorts"
>
<el-table-column :label="$t('container.server')" min-width="150">
<template #default="{ row }">
<el-input :placeholder="$t('container.serverExample')" v-model="row.host" />
</template>
</el-table-column>
<el-table-column :label="$t('container.container')" min-width="80">
<template #default="{ row }">
<el-input :placeholder="$t('container.containerExample')" v-model="row.containerPort" />
</template>
</el-table-column>
<el-table-column :label="$t('commons.table.protocol')" min-width="50">
<template #default="{ row }">
<el-select
v-model="row.protocol"
style="width: 100%"
:placeholder="$t('container.serverExample')"
>
<el-option label="tcp" value="tcp" />
<el-option label="udp" value="udp" />
</el-select>
</template>
</el-table-column>
<el-table-column min-width="35">
<template #default="scope">
<el-button link type="primary" @click="handlePortsDelete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
<el-row class="mt-4" :gutter="5">
<el-col :span="10">
<el-form-item
v-if="row.type === 'volume'"
:label="$t('container.volumeOption')"
>
<el-select filterable v-model="row.sourceDir">
<div v-for="(item, indexV) of volumes" :key="indexV">
<el-tooltip :hide-after="20" :content="item.option" placement="top">
<el-option
:value="item.option"
:label="item.option.substring(0, 30)"
/>
</el-tooltip>
</div>
</el-select>
</el-form-item>
<el-form-item v-else :label="$t('container.hostOption')">
<el-input v-model="row.sourceDir" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item :label="$t('container.mode')">
<el-select class="widthClass" filterable v-model="row.mode">
<el-option value="rw" :label="$t('container.modeRW')" />
<el-option value="ro" :label="$t('container.modeR')" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item :label="$t('container.containerDir')">
<el-input v-model="row.containerDir" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</div>
<el-button @click="handleVolumesAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
<el-form-item label="Command" prop="cmdStr">
<el-input v-model="dialogData.rowData!.cmdStr" :placeholder="$t('container.cmdHelper')" />
</el-form-item>
<el-form-item label="Entrypoint" prop="entrypointStr">
<el-input
v-model="dialogData.rowData!.entrypointStr"
:placeholder="$t('container.entrypointHelper')"
/>
</el-form-item>
<el-form-item prop="autoRemove">
<el-checkbox v-model="dialogData.rowData!.autoRemove">
{{ $t('container.autoRemove') }}
</el-checkbox>
</el-form-item>
<el-form-item>
<el-checkbox v-model="dialogData.rowData!.privileged">
{{ $t('container.privileged') }}
</el-checkbox>
<span class="input-help">{{ $t('container.privilegedHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.console')">
<el-checkbox v-model="dialogData.rowData!.tty">{{ $t('container.tty') }}</el-checkbox>
<el-checkbox v-model="dialogData.rowData!.openStdin">
{{ $t('container.openStdin') }}
</el-checkbox>
</el-form-item>
<el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
<el-radio-group v-model="dialogData.rowData!.restartPolicy">
<el-radio value="no">{{ $t('container.no') }}</el-radio>
<el-radio value="always">{{ $t('container.always') }}</el-radio>
<el-radio value="on-failure">{{ $t('container.onFailure') }}</el-radio>
<el-radio value="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
<el-input class="mini-form-item" v-model.number="dialogData.rowData!.cpuShares" />
<span class="input-help">{{ $t('container.cpuShareHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('container.cpuQuota')"
prop="nanoCPUs"
:rules="checkFloatNumberRange(0, Number(limits.cpu))"
>
<el-input class="mini-form-item" v-model="dialogData.rowData!.nanoCPUs">
<template #append>
<div style="width: 35px">{{ $t('commons.units.core') }}</div>
</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
</span>
</el-form-item>
<el-form-item
:label="$t('container.memoryLimit')"
prop="memory"
:rules="checkFloatNumberRange(0, Number(limits.memory))"
>
<el-input class="mini-form-item" v-model="dialogData.rowData!.memory">
<template #append><div style="width: 35px">MB</div></template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper', [limits.memory]) }}MB</span>
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelsStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="dialogData.rowData!.labelsStr"
/>
</el-form-item>
<el-form-item :label="$t('container.env')" prop="envStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="dialogData.rowData!.envStr"
/>
</el-form-item>
</el-col>
</el-row>
</el-table-column>
</el-table>
<el-button class="ml-3 mt-2" @click="handlePortsAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-card>
</el-form-item>
<el-form-item :label="$t('container.network')" prop="network">
<el-select v-model="dialogData.rowData!.network">
<el-option
v-for="(item, indexV) of networks"
:key="indexV"
:value="item.option"
:label="item.option"
/>
</el-select>
</el-form-item>
<el-form-item label="ipv4" prop="ipv4">
<el-input v-model="dialogData.rowData!.ipv4" :placeholder="$t('container.inputIpv4')" />
</el-form-item>
<el-form-item label="ipv6" prop="ipv6">
<el-input v-model="dialogData.rowData!.ipv6" :placeholder="$t('container.inputIpv6')" />
</el-form-item>
<el-form-item :label="$t('container.mount')">
<div v-for="(row, index) in dialogData.rowData!.volumes" :key="index" style="width: 100%">
<el-card class="mt-1">
<el-radio-group v-model="row.type">
<el-radio-button value="volume">{{ $t('container.volumeOption') }}</el-radio-button>
<el-radio-button value="bind">{{ $t('container.hostOption') }}</el-radio-button>
</el-radio-group>
<el-button class="float-right mt-3" link type="primary" @click="handleVolumesDelete(index)">
{{ $t('commons.button.delete') }}
</el-button>
<el-row class="mt-4" :gutter="5">
<el-col :span="10">
<el-form-item v-if="row.type === 'volume'" :label="$t('container.volumeOption')">
<el-select filterable v-model="row.sourceDir">
<div v-for="(item, indexV) of volumes" :key="indexV">
<el-tooltip :hide-after="20" :content="item.option" placement="top">
<el-option :value="item.option" :label="item.option.substring(0, 30)" />
</el-tooltip>
</div>
</el-select>
</el-form-item>
<el-form-item v-else :label="$t('container.hostOption')">
<el-input v-model="row.sourceDir" />
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item :label="$t('container.mode')">
<el-select class="widthClass" filterable v-model="row.mode">
<el-option value="rw" :label="$t('container.modeRW')" />
<el-option value="ro" :label="$t('container.modeR')" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="9">
<el-form-item :label="$t('container.containerDir')">
<el-input v-model="row.containerDir" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</div>
<el-button @click="handleVolumesAdd()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
<el-form-item label="Command" prop="cmdStr">
<el-input v-model="dialogData.rowData!.cmdStr" :placeholder="$t('container.cmdHelper')" />
</el-form-item>
<el-form-item label="Entrypoint" prop="entrypointStr">
<el-input v-model="dialogData.rowData!.entrypointStr" :placeholder="$t('container.entrypointHelper')" />
</el-form-item>
<el-form-item prop="autoRemove">
<el-checkbox v-model="dialogData.rowData!.autoRemove">
{{ $t('container.autoRemove') }}
</el-checkbox>
</el-form-item>
<el-form-item>
<el-checkbox v-model="dialogData.rowData!.privileged">
{{ $t('container.privileged') }}
</el-checkbox>
<span class="input-help">{{ $t('container.privilegedHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('container.console')">
<el-checkbox v-model="dialogData.rowData!.tty">{{ $t('container.tty') }}</el-checkbox>
<el-checkbox v-model="dialogData.rowData!.openStdin">
{{ $t('container.openStdin') }}
</el-checkbox>
</el-form-item>
<el-form-item :label="$t('container.restartPolicy')" prop="restartPolicy">
<el-radio-group v-model="dialogData.rowData!.restartPolicy">
<el-radio value="no">{{ $t('container.no') }}</el-radio>
<el-radio value="always">{{ $t('container.always') }}</el-radio>
<el-radio value="on-failure">{{ $t('container.onFailure') }}</el-radio>
<el-radio value="unless-stopped">{{ $t('container.unlessStopped') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('container.cpuShare')" prop="cpuShares">
<el-input class="mini-form-item" v-model.number="dialogData.rowData!.cpuShares" />
<span class="input-help">{{ $t('container.cpuShareHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('container.cpuQuota')"
prop="nanoCPUs"
:rules="checkFloatNumberRange(0, Number(limits.cpu))"
>
<el-input class="mini-form-item" v-model="dialogData.rowData!.nanoCPUs">
<template #append>
<div style="width: 35px">{{ $t('commons.units.core') }}</div>
</template>
</el-input>
<span class="input-help">
{{ $t('container.limitHelper', [limits.cpu]) }}{{ $t('commons.units.core') }}
</span>
</el-form-item>
<el-form-item
:label="$t('container.memoryLimit')"
prop="memory"
:rules="checkFloatNumberRange(0, Number(limits.memory))"
>
<el-input class="mini-form-item" v-model="dialogData.rowData!.memory">
<template #append><div style="width: 35px">MB</div></template>
</el-input>
<span class="input-help">{{ $t('container.limitHelper', [limits.memory]) }}MB</span>
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelsStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="dialogData.rowData!.labelsStr"
/>
</el-form-item>
<el-form-item :label="$t('container.env')" prop="envStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="dialogData.rowData!.envStr"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -291,7 +246,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -299,7 +254,6 @@ import { reactive, ref } from 'vue';
import { Rules, checkFloatNumberRange, checkNumberRange } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessageBox } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import {
listImage,
listVolume,

34
frontend/src/views/container/container/rename/index.vue
View File

@ -1,26 +1,19 @@
<template>
<el-drawer
<DrawerPro
v-model="newNameVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
:header="$t('container.rename')"
:back="handleClose"
:resource="renameForm.name"
size="small"
>
<template #header>
<DrawerHeader :header="$t('container.rename')" :resource="renameForm.name" :back="handleClose" />
</template>
<el-form @submit.prevent ref="newNameRef" v-loading="loading" :model="renameForm" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item
:label="$t('container.newName')"
:rules="[Rules.containerName, Rules.requiredInput]"
prop="newName"
>
<el-input v-model="renameForm.newName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item
:label="$t('container.newName')"
:rules="[Rules.containerName, Rules.requiredInput]"
prop="newName"
>
<el-input v-model="renameForm.newName"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -32,7 +25,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -42,7 +35,6 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ElForm } from 'element-plus';
import { reactive, ref } from 'vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
const loading = ref(false);

99
frontend/src/views/container/container/terminal/index.vue
View File

@ -1,57 +1,55 @@
<template>
<el-drawer
<DrawerPro
v-model="terminalVisible"
@close="handleClose"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('container.containerTerminal')"
:back="handleClose"
:resource="title"
size="large"
>
<template #header>
<DrawerHeader :header="$t('container.containerTerminal')" :resource="title" :back="handleClose" />
</template>
<el-form ref="formRef" :model="form" label-position="top">
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input placeholder="root" clearable v-model="form.user" />
</el-form-item>
<el-form-item
v-if="form.isCustom"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredInput"
>
<el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
{{ $t('container.custom') }}
</el-checkbox>
<el-input style="width: calc(100% - 100px)" clearable v-model="form.command" />
</el-form-item>
<el-form-item
v-if="!form.isCustom"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredSelect"
>
<el-checkbox style="width: 100px" border v-model="form.isCustom" @change="onChangeCommand">
{{ $t('container.custom') }}
</el-checkbox>
<el-select style="width: calc(100% - 100px)" filterable clearable v-model="form.command">
<el-option value="/bin/ash" label="/bin/ash" />
<el-option value="/bin/bash" label="/bin/bash" />
<el-option value="/bin/sh" label="/bin/sh" />
</el-select>
</el-form-item>
<template #content>
<el-form ref="formRef" :model="form" label-position="top">
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input placeholder="root" clearable v-model="form.user" />
</el-form-item>
<el-form-item
v-if="form.isCustom"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredInput"
>
<el-checkbox class="p-w-100" border v-model="form.isCustom" @change="onChangeCommand">
{{ $t('container.custom') }}
</el-checkbox>
<el-input style="width: calc(100% - 100px)" clearable v-model="form.command" />
</el-form-item>
<el-form-item
v-if="!form.isCustom"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredSelect"
>
<el-checkbox class="p-w-100" border v-model="form.isCustom" @change="onChangeCommand">
{{ $t('container.custom') }}
</el-checkbox>
<el-select style="width: calc(100% - 100px)" filterable clearable v-model="form.command">
<el-option value="/bin/ash" label="/bin/ash" />
<el-option value="/bin/bash" label="/bin/bash" />
<el-option value="/bin/sh" label="/bin/sh" />
</el-select>
</el-form-item>
<el-button v-if="!terminalOpen" @click="initTerm(formRef)">
{{ $t('commons.button.conn') }}
</el-button>
<el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
<Terminal
style="height: calc(100vh - 302px); margin-top: 18px"
ref="terminalRef"
v-if="terminalOpen"
></Terminal>
</el-form>
</el-drawer>
<el-button v-if="!terminalOpen" @click="initTerm(formRef)">
{{ $t('commons.button.conn') }}
</el-button>
<el-button v-else @click="onClose()">{{ $t('commons.button.disconn') }}</el-button>
<Terminal
style="height: calc(100vh - 302px); margin-top: 18px"
ref="terminalRef"
v-if="terminalOpen"
></Terminal>
</el-form>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -59,7 +57,6 @@ import { reactive, ref, nextTick } from 'vue';
import { ElForm, FormInstance } from 'element-plus';
import { Rules } from '@/global/form-rules';
import Terminal from '@/components/terminal/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
const title = ref();
const terminalVisible = ref(false);

87
frontend/src/views/container/container/upgrade/index.vue
View File

@ -1,54 +1,42 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('commons.button.upgrade')"
:back="handleClose"
:resource="form.containerName"
size="large"
>
<template #header>
<DrawerHeader :header="$t('commons.button.upgrade')" :resource="form.containerName" :back="handleClose" />
</template>
<el-row v-loading="loading">
<el-col :span="22" :offset="1">
<el-alert
:title="$t('container.appHelper')"
v-if="form.fromApp"
class="common-prompt"
:closable="false"
type="error"
/>
<el-form @submit.prevent ref="formRef" :model="form" label-position="top">
<el-form-item :label="$t('container.oldImage')" prop="oldImage">
<el-tooltip
placement="top-start"
:content="form.oldImageName"
v-if="form.oldImageName.length > 50"
>
<el-tag>{{ form.oldImageName.substring(0, 50) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ form.oldImageName }}</el-tag>
</el-form-item>
<el-form-item prop="newImageName" :rules="Rules.imageName">
<template #label>
{{ $t('container.targetImage') }}
<span v-if="!form.hasName">
{{ ' (' + $t('container.imageLoadErr') + ')' }}
</span>
</template>
<el-input v-model="form.newImageName" />
<span class="input-help">{{ $t('container.upgradeHelper') }}</span>
</el-form-item>
<el-form-item prop="forcePull">
<el-checkbox v-model="form.forcePull">
{{ $t('container.forcePull') }}
</el-checkbox>
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-alert
:title="$t('container.appHelper')"
v-if="form.fromApp"
class="common-prompt"
:closable="false"
type="error"
/>
<el-form @submit.prevent ref="formRef" :model="form" label-position="top">
<el-form-item :label="$t('container.oldImage')" prop="oldImage">
<el-tooltip placement="top-start" :content="form.oldImageName" v-if="form.oldImageName.length > 50">
<el-tag>{{ form.oldImageName.substring(0, 50) }}...</el-tag>
</el-tooltip>
<el-tag v-else>{{ form.oldImageName }}</el-tag>
</el-form-item>
<el-form-item prop="newImageName" :rules="Rules.imageName">
<template #label>
{{ $t('container.targetImage') }}
<span v-if="!form.hasName">
{{ ' (' + $t('container.imageLoadErr') + ')' }}
</span>
</template>
<el-input v-model="form.newImageName" />
<span class="input-help">{{ $t('container.upgradeHelper') }}</span>
</el-form-item>
<el-form-item prop="forcePull">
<el-checkbox v-model="form.forcePull">
{{ $t('container.forcePull') }}
</el-checkbox>
<span class="input-help">{{ $t('container.forcePullHelper') }}</span>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="drawerVisible = false">
@ -59,7 +47,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -69,7 +57,6 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ElForm } from 'element-plus';
import { reactive, ref } from 'vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
const loading = ref(false);

123
frontend/src/views/container/image/build/index.vue
View File

@ -1,72 +1,58 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.imageBuild')" :back="handleClose" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
</el-form-item>
<el-form-item label="Dockerfile" prop="from">
<el-radio-group @change="onEdit()" v-model="form.from">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
<codemirror
@change="onEdit()"
:autofocus="true"
placeholder="#Define or paste the content of your Dockerfile here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 520px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.dockerfile"
:readOnly="true"
/>
</el-form-item>
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
<el-input @change="onEdit()" clearable v-model="form.dockerfile">
<template #prepend>
<FileList @choose="loadBuildDir"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input
@change="onEdit()"
:placeholder="$t('container.tagHelper')"
type="textarea"
:rows="3"
v-model="form.tagStr"
/>
</el-form-item>
</el-form>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
<DrawerPro v-model="drawerVisible" :header="$t('container.imageBuild')" :back="handleClose" size="large">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px" :rules="rules">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input :placeholder="$t('container.imageNameHelper')" v-model.trim="form.name" clearable />
</el-form-item>
<el-form-item label="Dockerfile" prop="from">
<el-radio-group @change="onEdit()" v-model="form.from">
<el-radio value="edit">{{ $t('commons.button.edit') }}</el-radio>
<el-radio value="path">{{ $t('container.pathSelect') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.from === 'edit'" :rules="Rules.requiredInput">
<codemirror
@change="onEdit()"
:autofocus="true"
placeholder="#Define or paste the content of your Dockerfile here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 520px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="form.dockerfile"
:readOnly="true"
/>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-else :rules="Rules.requiredSelect" prop="dockerfile">
<el-input @change="onEdit()" clearable v-model="form.dockerfile">
<template #prepend>
<FileList @choose="loadBuildDir"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('container.tag')">
<el-input
@change="onEdit()"
:placeholder="$t('container.tagHelper')"
type="textarea"
:rows="3"
v-model="form.tagStr"
/>
</el-form-item>
</el-form>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
/>
<template #footer>
<span class="dialog-footer">
@ -76,7 +62,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -89,7 +75,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm, ElMessage } from 'element-plus';
import { imageBuild } from '@/api/modules/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
const logVisible = ref<boolean>(false);
const extensions = [javascript(), oneDark];

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

@ -25,7 +25,7 @@
</el-button>
</template>
<template #rightToolBar>
<TableSearch @search="search()" v-model:searchName="searchName" class="mr-" />
<TableSearch @search="search()" v-model:searchName="searchName" class="mr-2.5" />
<TableSetting @search="search()" />
</template>
<template #main>

32
frontend/src/views/container/image/load/index.vue
View File

@ -1,26 +1,13 @@
<template>
<el-drawer
v-model="loadVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('container.importImage')" :back="handleClose" />
</template>
<DrawerPro v-model="loadVisible" :header="$t('container.importImage')" :back="handleClose" size="small">
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.path')" :rules="Rules.requiredInput" prop="path">
<el-input v-model="form.path">
<template #prepend>
<FileList @choose="loadLoadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('container.path')" :rules="Rules.requiredInput" prop="path">
<el-input v-model="form.path">
<template #prepend>
<FileList @choose="loadLoadDir" :dir="false"></FileList>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -32,7 +19,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -43,7 +30,6 @@ import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { imageLoad } from '@/api/modules/container';
import { MsgSuccess } from '@/utils/message';
import DrawerHeader from '@/components/drawer-header/index.vue';
const loading = ref(false);

79
frontend/src/views/container/image/pull/index.vue
View File

@ -1,49 +1,35 @@
<template>
<el-drawer
v-model="drawerVisible"
@close="onCloseLog"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.imagePull')" :back="onCloseLog" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form">
<el-form-item :label="$t('container.from')">
<el-checkbox @change="onEdit()" v-model="form.fromRepo">
{{ $t('container.imageRepo') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.imageName" prop="imageName">
<el-input @change="onEdit()" v-model.trim="form.imageName">
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="showLog"
:style="'height: calc(100vh - 397px);min-height: 200px'"
/>
</el-col>
</el-row>
<DrawerPro v-model="drawerVisible" :header="$t('container.imagePull')" :back="onCloseLog" size="large">
<el-form ref="formRef" label-position="top" :model="form">
<el-form-item :label="$t('container.from')">
<el-checkbox @change="onEdit()" v-model="form.fromRepo">
{{ $t('container.imageRepo') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repoID"
>
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageName')" :rules="Rules.imageName" prop="imageName">
<el-input @change="onEdit()" v-model.trim="form.imageName">
<template v-if="form.fromRepo" #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="showLog"
:style="'height: calc(100vh - 397px);min-height: 200px'"
/>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">
@ -54,7 +40,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -64,7 +50,6 @@ import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { imagePull } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
const drawerVisible = ref(false);

76
frontend/src/views/container/image/push/index.vue
View File

@ -1,51 +1,32 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="onCloseLog"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.imagePush')" :back="onCloseLog" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px">
<el-form-item :label="$t('container.tag')" :rules="Rules.requiredSelect" prop="tagName">
<el-select @change="onEdit(true)" filterable v-model="form.tagName">
<el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option
v-for="item in dialogData.repos"
:key="item.id"
:value="item.id"
:label="item.name"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('container.image')" :rules="Rules.imageName" prop="name">
<el-input @change="onEdit()" v-model.trim="form.name">
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<DrawerPro v-model="drawerVisible" :header="$t('container.imagePush')" :back="onCloseLog" size="large">
<el-form ref="formRef" label-position="top" :model="form" label-width="80px">
<el-form-item :label="$t('container.tag')" :rules="Rules.requiredSelect" prop="tagName">
<el-select @change="onEdit(true)" filterable v-model="form.tagName">
<el-option v-for="item in form.tags" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.repoName')" :rules="Rules.requiredSelect" prop="repoID">
<el-select @change="onEdit()" clearable style="width: 100%" filterable v-model="form.repoID">
<el-option v-for="item in dialogData.repos" :key="item.id" :value="item.id" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.image')" :rules="Rules.imageName" prop="name">
<el-input @change="onEdit()" v-model.trim="form.name">
<template #prepend>{{ loadDetailInfo(form.repoID) }}/</template>
</el-input>
</el-form-item>
</el-form>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
v-model:loading="loading"
/>
</el-col>
</el-row>
<LogFile
ref="logRef"
:config="logConfig"
:default-button="false"
v-model:is-reading="isReading"
v-if="logVisible"
:style="'height: calc(100vh - 370px);min-height: 200px'"
v-model:loading="loading"
/>
<template #footer>
<span class="dialog-footer">
@ -57,7 +38,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -67,7 +48,6 @@ import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { imagePush } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
const drawerVisible = ref(false);

72
frontend/src/views/container/image/tag/index.vue
View File

@ -1,50 +1,31 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.imageTag')" :back="handleClose" />
</template>
<DrawerPro v-model="drawerVisible" :header="$t('container.imageTag')" :back="handleClose" size="large">
<el-form v-loading="loading" label-position="top" ref="formRef" :model="form" label-width="80px">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repo"
>
<el-select style="width: 100%" clearable filterable v-model="form.repo" @change="changeRepo">
<el-option v-for="item in repos" :key="item.id" :value="item.name" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageTag')" :rules="Rules.imageName" prop="targetName">
<el-input v-model="form.targetName" />
</el-form-item>
<el-form-item :label="$t('container.from')">
<el-checkbox v-model="form.fromRepo">{{ $t('container.imageRepo') }}</el-checkbox>
</el-form-item>
<el-form-item
v-if="form.fromRepo"
:label="$t('container.repoName')"
:rules="Rules.requiredSelect"
prop="repo"
>
<el-select clearable filterable v-model="form.repo" @change="changeRepo">
<el-option v-for="item in repos" :key="item.id" :value="item.name" :label="item.name" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.imageTag')" :rules="Rules.imageName" prop="targetName">
<el-input v-model="form.targetName" />
</el-form-item>
<el-form-item>
<el-checkbox style="width: 100%" v-model="form.deleteTag">
{{ $t('container.imageTagDeleteHelper') }}
</el-checkbox>
<el-checkbox-group class="ml-5" v-if="form.deleteTag" v-model="form.deleteTags">
<el-checkbox
style="width: 100%"
v-for="item in tags"
:key="item"
:value="item"
:label="item"
/>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-form-item>
<el-checkbox v-model="form.deleteTag">
{{ $t('container.imageTagDeleteHelper') }}
</el-checkbox>
<el-checkbox-group class="ml-5" v-if="form.deleteTag" v-model="form.deleteTags">
<el-checkbox v-for="item in tags" :key="item" :value="item" :label="item" />
</el-checkbox-group>
</el-form-item>
</el-form>
<template #footer>
@ -57,7 +38,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -67,7 +48,6 @@ import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { imageRemove, imageTag } from '@/api/modules/container';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
const loading = ref(false);

240
frontend/src/views/container/network/create/index.vue
View File

@ -1,139 +1,116 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('container.createNetwork')" :back="handleClose" />
</template>
<DrawerPro v-model="drawerVisible" :header="$t('container.createNetwork')" :back="handleClose" size="large">
<el-form ref="formRef" label-position="top" v-loading="loading" :model="form" :rules="rules" label-width="80px">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('container.networkName')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
<el-form-item :label="$t('container.driver')" prop="driver">
<el-select v-model="form.driver">
<el-option label="bridge" value="bridge" />
<el-option label="ipvlan" value="ipvlan" />
<el-option label="macvlan" value="macvlan" />
<el-option label="overlay" value="overlay" />
</el-select>
</el-form-item>
<el-form-item :label="$t('container.networkName')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
<el-form-item :label="$t('container.driver')" prop="driver">
<el-select v-model="form.driver">
<el-option label="bridge" value="bridge" />
<el-option label="ipvlan" value="ipvlan" />
<el-option label="macvlan" value="macvlan" />
<el-option label="overlay" value="overlay" />
</el-select>
</el-form-item>
<el-checkbox v-model="form.ipv4">IPv4</el-checkbox>
<div v-if="form.ipv4">
<el-row type="flex" justify="center" :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('container.subnet')" prop="subnet">
<el-input placeholder="172.16.10.0/24" clearable v-model.trim="form.subnet" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.gateway')" prop="gateway">
<el-input placeholder="172.16.10.12" clearable v-model.trim="form.gateway" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.scope')" prop="scope">
<el-input placeholder="172.16.10.0/16" clearable v-model.trim="form.scope" />
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-row>
<el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
<el-table :data="form.auxAddress" v-if="form.auxAddress.length !== 0">
<el-table-column :label="$t('container.label')" min-width="100">
<template #default="{ row }">
<el-input placeholder="my-router" v-model="row.key" />
</template>
</el-table-column>
<el-table-column label="IP" min-width="150">
<template #default="{ row }">
<el-input placeholder="172.16.10.13" v-model="row.value" />
</template>
</el-table-column>
<el-table-column min-width="40">
<template #default="scope">
<el-button link type="primary" @click="handleV4Delete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="mt-2" @click="handleV4Add()">
{{ $t('commons.button.add') }}
</el-button>
<el-checkbox v-model="form.ipv4">IPv4</el-checkbox>
<div v-if="form.ipv4">
<el-row type="flex" justify="center" :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('container.subnet')" prop="subnet">
<el-input placeholder="172.16.10.0/24" clearable v-model.trim="form.subnet" />
</el-form-item>
</div>
<el-checkbox class="mb-4" v-model="form.ipv6">IPv6</el-checkbox>
<div v-if="form.ipv6">
<el-row type="flex" justify="center" :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('container.subnet')" prop="subnetV6">
<el-input placeholder="2408:400e::/48" clearable v-model.trim="form.subnetV6" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.gateway')" prop="gatewayV6">
<el-input placeholder="2408:400e::1" clearable v-model.trim="form.gatewayV6" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.scope')" prop="scopeV6">
<el-input placeholder="2408:400e::/64" clearable v-model.trim="form.scopeV6" />
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-row>
<el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
<el-table :data="form.auxAddressV6" v-if="form.auxAddressV6.length !== 0">
<el-table-column :label="$t('container.label')" min-width="100">
<template #default="{ row }">
<el-input placeholder="my-router" v-model="row.key" />
</template>
</el-table-column>
<el-table-column label="IP" min-width="150">
<template #default="{ row }">
<el-input placeholder="2408:400e::3" v-model="row.value" />
</template>
</el-table-column>
<el-table-column min-width="40">
<template #default="scope">
<el-button link type="primary" @click="handleV6Delete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="mt-2" @click="handleV6Add()">
{{ $t('commons.button.add') }}
</el-button>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.gateway')" prop="gateway">
<el-input placeholder="172.16.10.12" clearable v-model.trim="form.gateway" />
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.scope')" prop="scope">
<el-input placeholder="172.16.10.0/16" clearable v-model.trim="form.scope" />
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-row>
<el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
<el-table :data="form.auxAddress" v-if="form.auxAddress.length !== 0">
<el-table-column :label="$t('container.label')" min-width="100">
<template #default="{ row }">
<el-input placeholder="my-router" v-model="row.key" />
</template>
</el-table-column>
<el-table-column label="IP" min-width="150">
<template #default="{ row }">
<el-input placeholder="172.16.10.13" v-model="row.value" />
</template>
</el-table-column>
<el-table-column min-width="40">
<template #default="scope">
<el-button link type="primary" @click="handleV4Delete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="mt-2" @click="handleV4Add()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
</div>
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="form.optionStr"
/>
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="form.labelStr"
/>
</el-form-item>
</el-col>
</el-row>
<el-checkbox class="mb-4" v-model="form.ipv6">IPv6</el-checkbox>
<div v-if="form.ipv6">
<el-row type="flex" justify="center" :gutter="20">
<el-col :span="12">
<el-form-item :label="$t('container.subnet')" prop="subnetV6">
<el-input placeholder="2408:400e::/48" clearable v-model.trim="form.subnetV6" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.gateway')" prop="gatewayV6">
<el-input placeholder="2408:400e::1" clearable v-model.trim="form.gatewayV6" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item :label="$t('container.scope')" prop="scopeV6">
<el-input placeholder="2408:400e::/64" clearable v-model.trim="form.scopeV6" />
</el-form-item>
</el-col>
<el-col :span="12"></el-col>
</el-row>
<el-form-item :label="$t('container.auxAddress')" prop="scopeV6">
<el-table :data="form.auxAddressV6" v-if="form.auxAddressV6.length !== 0">
<el-table-column :label="$t('container.label')" min-width="100">
<template #default="{ row }">
<el-input placeholder="my-router" v-model="row.key" />
</template>
</el-table-column>
<el-table-column label="IP" min-width="150">
<template #default="{ row }">
<el-input placeholder="2408:400e::3" v-model="row.value" />
</template>
</el-table-column>
<el-table-column min-width="40">
<template #default="scope">
<el-button link type="primary" @click="handleV6Delete(scope.$index)">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="mt-2" @click="handleV6Add()">
{{ $t('commons.button.add') }}
</el-button>
</el-form-item>
</div>
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.optionStr" />
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -145,7 +122,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -154,7 +131,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { createNetwork } from '@/api/modules/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { checkIp, checkIpV6 } from '@/utils/util';

110
frontend/src/views/container/repo/operator/index.vue
View File

@ -1,18 +1,11 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
:header="title + $t('container.repo')"
:resource="dialogData.rowData?.name"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader
:header="title + $t('container.repo')"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form
ref="formRef"
label-position="top"
@ -21,53 +14,49 @@
:rules="rules"
label-width="120px"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
clearable
:disabled="dialogData.title === 'edit'"
v-model.trim="dialogData.rowData!.name"
></el-input>
</el-form-item>
<el-form-item :label="$t('container.auth')" prop="auth">
<el-radio-group v-model="dialogData.rowData!.auth">
<el-radio :value="true">{{ $t('commons.true') }}</el-radio>
<el-radio :value="false">{{ $t('commons.false') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="dialogData.rowData!.username"></el-input>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password">
<el-input
clearable
type="password"
show-password
v-model.trim="dialogData.rowData!.password"
></el-input>
</el-form-item>
<el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl">
<el-input
clearable
v-model.trim="dialogData.rowData!.downloadUrl"
:placeholder="'172.16.10.10:8081'"
></el-input>
<span v-if="dialogData.rowData!.downloadUrl" class="input-help">
docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
</span>
</el-form-item>
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-radio-group v-model="dialogData.rowData!.protocol">
<el-radio label="http">http</el-radio>
<el-radio label="https">https</el-radio>
</el-radio-group>
<span v-if="dialogData.rowData!.protocol === 'http'" class="input-help">
{{ $t('container.httpRepo') }}
</span>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
clearable
:disabled="dialogData.title === 'edit'"
v-model.trim="dialogData.rowData!.name"
></el-input>
</el-form-item>
<el-form-item :label="$t('container.auth')" prop="auth">
<el-radio-group v-model="dialogData.rowData!.auth">
<el-radio :value="true">{{ $t('commons.true') }}</el-radio>
<el-radio :value="false">{{ $t('commons.false') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="dialogData.rowData!.username"></el-input>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.auth" :label="$t('commons.login.password')" prop="password">
<el-input
clearable
type="password"
show-password
v-model.trim="dialogData.rowData!.password"
></el-input>
</el-form-item>
<el-form-item :label="$t('container.downloadUrl')" prop="downloadUrl">
<el-input
clearable
v-model.trim="dialogData.rowData!.downloadUrl"
:placeholder="'172.16.10.10:8081'"
></el-input>
<span v-if="dialogData.rowData!.downloadUrl" class="input-help">
docker pull {{ dialogData.rowData!.downloadUrl }}/nginx
</span>
</el-form-item>
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-radio-group v-model="dialogData.rowData!.protocol">
<el-radio label="http">http</el-radio>
<el-radio label="https">https</el-radio>
</el-radio-group>
<span v-if="dialogData.rowData!.protocol === 'http'" class="input-help">
{{ $t('container.httpRepo') }}
</span>
</el-form-item>
</el-form>
<template #footer>
@ -80,7 +69,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -89,7 +78,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { createImageRepo, updateImageRepo } from '@/api/modules/container';
import { MsgSuccess } from '@/utils/message';

15
frontend/src/views/container/template/detail/index.vue
View File

@ -1,16 +1,5 @@
<template>
<el-drawer
v-model="detailVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<div class="card-header">
<span>{{ $t('commons.button.view') }}</span>
</div>
</template>
<DrawerPro v-model="detailVisible" :header="$t('commons.button.view')" size="large">
<codemirror
:autofocus="true"
:placeholder="$t('commons.msg.noneData')"
@ -30,7 +19,7 @@
<el-button @click="detailVisible = false">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>

70
frontend/src/views/container/template/operator/index.vue
View File

@ -1,19 +1,11 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="$t('container.composeTemplate')"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
:back="handleClose"
size="large"
>
<template #header>
<DrawerHeader
:header="title + $t('container.composeTemplate')"
:hideResource="dialogData.title === 'create'"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form
v-loading="loading"
label-position="top"
@ -22,34 +14,27 @@
:rules="rules"
label-width="80px"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
:disabled="dialogData.title === 'edit'"
v-model.trim="dialogData.rowData!.name"
></el-input>
</el-form-item>
<el-form-item :label="$t('container.description')">
<el-input v-model="dialogData.rowData!.description"></el-input>
</el-form-item>
<el-form-item>
<codemirror
:autofocus="true"
placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 351px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="dialogData.rowData!.content"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input :disabled="dialogData.title === 'edit'" v-model.trim="dialogData.rowData!.name"></el-input>
</el-form-item>
<el-form-item :label="$t('container.description')">
<el-input v-model="dialogData.rowData!.description"></el-input>
</el-form-item>
<el-form-item>
<codemirror
:autofocus="true"
placeholder="#Define or paste the content of your docker-compose file here"
:indent-with-tab="true"
:tabSize="4"
style="width: 100%; height: calc(100vh - 351px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="dialogData.rowData!.content"
/>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -61,7 +46,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -73,7 +58,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Container } from '@/api/interface/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { createComposeTemplate, updateComposeTemplate } from '@/api/modules/container';
import { MsgSuccess } from '@/utils/message';

124
frontend/src/views/container/volume/create/index.vue
View File

@ -1,78 +1,51 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('container.createVolume')" :back="handleClose" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form
ref="formRef"
v-loading="loading"
label-position="top"
:model="form"
:rules="rules"
label-width="80px"
@submit.prevent
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
<el-form-item :label="$t('container.driver')" prop="driver">
<el-tag type="success">local</el-tag>
</el-form-item>
<el-form-item :label="$t('container.nfsEnable')" prop="nfsStatus">
<el-switch v-model="form.nfsStatus" active-value="enable" inactive-value="disable" />
</el-form-item>
<div v-if="form.nfsStatus === 'enable'">
<el-form-item :label="$t('container.nfsAddress')" prop="nfsAddress">
<el-input
clearable
v-model.trim="form.nfsAddress"
:placeholder="$t('commons.rule.hostHelper')"
/>
</el-form-item>
<el-form-item :label="$t('container.version')" prop="nfsVersion">
<el-radio-group v-model="form.nfsVersion">
<el-radio value="v3">NFS</el-radio>
<el-radio value="v4">NFS4</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('container.mountpoint')" prop="nfsMount">
<el-input
clearable
v-model.trim="form.nfsMount"
:placeholder="$t('container.mountpointNFSHelper')"
/>
</el-form-item>
<el-form-item :label="$t('container.options')" prop="nfsOption">
<el-input clearable v-model.trim="form.nfsOption" />
</el-form-item>
</div>
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="form.optionStr"
/>
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input
type="textarea"
:placeholder="$t('container.tagHelper')"
:rows="3"
v-model="form.labelStr"
/>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="drawerVisible" :header="$t('container.createVolume')" :back="handleClose" size="small">
<el-form
ref="formRef"
v-loading="loading"
label-position="top"
:model="form"
:rules="rules"
label-width="80px"
@submit.prevent
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" />
</el-form-item>
<el-form-item :label="$t('container.driver')" prop="driver">
<el-tag type="success">local</el-tag>
</el-form-item>
<el-form-item :label="$t('container.nfsEnable')" prop="nfsStatus">
<el-switch v-model="form.nfsStatus" active-value="enable" inactive-value="disable" />
</el-form-item>
<div v-if="form.nfsStatus === 'enable'">
<el-form-item :label="$t('container.nfsAddress')" prop="nfsAddress">
<el-input clearable v-model.trim="form.nfsAddress" :placeholder="$t('commons.rule.hostHelper')" />
</el-form-item>
<el-form-item :label="$t('container.version')" prop="nfsVersion">
<el-radio-group v-model="form.nfsVersion">
<el-radio value="v3">NFS</el-radio>
<el-radio value="v4">NFS4</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('container.mountpoint')" prop="nfsMount">
<el-input
clearable
v-model.trim="form.nfsMount"
:placeholder="$t('container.mountpointNFSHelper')"
/>
</el-form-item>
<el-form-item :label="$t('container.options')" prop="nfsOption">
<el-input clearable v-model.trim="form.nfsOption" />
</el-form-item>
</div>
<el-form-item :label="$t('container.option')" prop="optionStr">
<el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.optionStr" />
</el-form-item>
<el-form-item :label="$t('container.tag')" prop="labelStr">
<el-input type="textarea" :placeholder="$t('container.tagHelper')" :rows="3" v-model="form.labelStr" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="drawerVisible = false">
@ -83,7 +56,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -92,7 +65,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { createVolume } from '@/api/modules/container';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
const loading = ref(false);

30
frontend/src/views/cronjob/backup/index.vue
View File

@ -1,21 +1,12 @@
<template>
<div>
<el-drawer
v-model="backupVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader
v-if="cronjob"
:header="$t('commons.button.backup')"
:resource="cronjob"
:back="handleClose"
/>
<DrawerHeader v-else :header="$t('commons.button.backup')" :resource="cronjob" :back="handleClose" />
</template>
<DrawerPro
v-model="backupVisible"
:header="$t('commons.button.backup')"
:resource="cronjob"
:back="handleClose"
size="large"
>
<template #content>
<ComplexTable
v-loading="loading"
:pagination-config="paginationConfig"
@ -48,15 +39,14 @@
<fu-table-operations width="130px" :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</el-drawer>
</div>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { computeSize, dateFormat, downloadFile } from '@/utils/util';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { downloadBackupRecord, searchBackupRecordsByCronjob } from '@/api/modules/setting';
import { Backup } from '@/api/interface/backup';

615
frontend/src/views/cronjob/operate/index.vue
View File

@ -1,353 +1,311 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="title"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
:back="handleClose"
size="large"
>
<template #header>
<DrawerHeader
:header="title"
:hideResource="dialogData.title === 'create'"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('cronjob.taskType')" prop="type">
<el-select
v-if="dialogData.title === 'create'"
class="selectClass"
@change="changeType"
v-model="dialogData.rowData!.type"
<el-form-item :label="$t('cronjob.taskType')" prop="type">
<el-select
v-if="dialogData.title === 'create'"
class="selectClass"
@change="changeType"
v-model="dialogData.rowData!.type"
>
<el-option value="shell" :label="$t('cronjob.shell')" />
<el-option value="app" :label="$t('cronjob.app')" />
<el-option value="website" :label="$t('cronjob.website')" />
<el-option value="database" :label="$t('cronjob.database')" />
<el-option value="directory" :label="$t('cronjob.directory')" />
<el-option value="log" :label="$t('cronjob.log')" />
<el-option value="curl" :label="$t('cronjob.curl')" />
<el-option value="cutWebsiteLog" :label="$t('cronjob.cutWebsiteLog')" />
<el-option value="clean" :label="$t('setting.diskClean')" />
<el-option value="snapshot" :label="$t('cronjob.snapshot')" />
<el-option value="ntp" :label="$t('cronjob.ntp')" />
</el-select>
<div v-else class="w-full">
<el-tag>{{ $t('cronjob.' + dialogData.rowData!.type) }}</el-tag>
</div>
<div v-if="dialogData.rowData!.type === 'log'" class="logText">
<span class="input-help">
{{ $t('cronjob.logHelper1') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/system')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<span class="input-help">
{{ $t('cronjob.logHelper2') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/ssh')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<span class="input-help">
{{ $t('cronjob.logHelper3') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/website')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</div>
<div v-if="dialogData.rowData!.type === 'ntp'">
<span class="input-help">
{{ $t('cronjob.ntp_helper') }}
<el-link
style="font-size: 12px"
icon="Position"
@click="goRouter('/toolbox/device')"
type="primary"
>
<el-option value="shell" :label="$t('cronjob.shell')" />
<el-option value="app" :label="$t('cronjob.app')" />
<el-option value="website" :label="$t('cronjob.website')" />
<el-option value="database" :label="$t('cronjob.database')" />
<el-option value="directory" :label="$t('cronjob.directory')" />
<el-option value="log" :label="$t('cronjob.log')" />
<el-option value="curl" :label="$t('cronjob.curl')" />
<el-option value="cutWebsiteLog" :label="$t('cronjob.cutWebsiteLog')" />
<el-option value="clean" :label="$t('setting.diskClean')" />
<el-option value="snapshot" :label="$t('cronjob.snapshot')" />
<el-option value="ntp" :label="$t('cronjob.ntp')" />
</el-select>
<div v-else style="width: 100%">
<el-tag>{{ $t('cronjob.' + dialogData.rowData!.type) }}</el-tag>
</div>
<div v-if="dialogData.rowData!.type === 'log'" class="logText">
<span class="input-help">
{{ $t('cronjob.logHelper1') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/system')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<span class="input-help">
{{ $t('cronjob.logHelper2') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/ssh')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
<span class="input-help">
{{ $t('cronjob.logHelper3') }}
<el-link class="link" icon="Position" @click="goRouter('/logs/website')" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</div>
<div v-if="dialogData.rowData!.type === 'ntp'">
<span class="input-help">
{{ $t('cronjob.ntp_helper') }}
<el-link
style="font-size: 12px"
icon="Position"
@click="goRouter('/toolbox/device')"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</div>
</el-form-item>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</div>
</el-form-item>
<el-form-item :label="$t('cronjob.taskName')" prop="name">
<el-input
:disabled="dialogData.title === 'edit'"
clearable
v-model.trim="dialogData.rowData!.name"
<el-form-item :label="$t('cronjob.taskName')" prop="name">
<el-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.name" />
</el-form-item>
<el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
<div v-for="(specObj, index) of dialogData.rowData.specObjs" :key="index" style="width: 100%">
<el-select class="specTypeClass" v-model="specObj.specType" @change="changeSpecType(index)">
<el-option
v-for="item in specOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-form-item>
<el-form-item :label="$t('cronjob.cronSpec')" prop="spec">
<div v-for="(specObj, index) of dialogData.rowData.specObjs" :key="index" style="width: 100%">
<el-select class="specTypeClass" v-model="specObj.specType" @change="changeSpecType(index)">
<el-option
v-for="item in specOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
<el-option
v-for="item in weekOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
<template #append>
<div class="append">{{ $t('cronjob.day') }}</div>
</template>
</el-input>
<el-input v-if="hasHour(specObj)" class="specClass" v-model.number="specObj.hour">
<template #append>
<div class="append">{{ $t('commons.units.hour') }}</div>
</template>
</el-input>
<el-input
v-if="specObj.specType !== 'perNSecond'"
class="specClass"
v-model.number="specObj.minute"
>
<template #append>
<div class="append">{{ $t('commons.units.minute') }}</div>
</template>
</el-input>
<el-input
v-if="specObj.specType === 'perNSecond'"
class="specClass"
v-model.number="specObj.second"
>
<template #append>
<div class="append">{{ $t('commons.units.second') }}</div>
</template>
</el-input>
<el-button
link
type="primary"
style="float: right; margin-top: 5px"
@click="handleSpecDelete(index)"
v-if="dialogData.rowData.specObjs.length > 1"
>
{{ $t('commons.button.delete') }}
</el-button>
<el-divider v-if="dialogData.rowData.specObjs.length > 1" class="divider" />
</div>
</el-form-item>
<el-button class="mb-3" @click="handleSpecAdd()">
{{ $t('commons.button.add') }}
</el-select>
<el-select v-if="specObj.specType === 'perWeek'" class="specClass" v-model="specObj.week">
<el-option
v-for="item in weekOptions"
:key="item.label"
:value="item.value"
:label="item.label"
/>
</el-select>
<el-input v-if="hasDay(specObj)" class="specClass" v-model.number="specObj.day">
<template #append>
<div class="append">{{ $t('cronjob.day') }}</div>
</template>
</el-input>
<el-input v-if="hasHour(specObj)" class="specClass" v-model.number="specObj.hour">
<template #append>
<div class="append">{{ $t('commons.units.hour') }}</div>
</template>
</el-input>
<el-input
v-if="specObj.specType !== 'perNSecond'"
class="specClass"
v-model.number="specObj.minute"
>
<template #append>
<div class="append">{{ $t('commons.units.minute') }}</div>
</template>
</el-input>
<el-input
v-if="specObj.specType === 'perNSecond'"
class="specClass"
v-model.number="specObj.second"
>
<template #append>
<div class="append">{{ $t('commons.units.second') }}</div>
</template>
</el-input>
<el-button
class="ml-2.5"
link
type="primary"
@click="handleSpecDelete(index)"
v-if="dialogData.rowData.specObjs.length > 1"
>
{{ $t('commons.button.delete') }}
</el-button>
<el-divider v-if="dialogData.rowData.specObjs.length > 1" class="divider" />
</div>
</el-form-item>
<el-button class="mb-3" @click="handleSpecAdd()">
{{ $t('commons.button.add') }}
</el-button>
<el-form-item v-if="hasScript()">
<el-checkbox v-model="dialogData.rowData!.inContainer">
{{ $t('cronjob.containerCheckBox') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="hasScript() && dialogData.rowData!.inContainer"
:label="$t('cronjob.containerName')"
prop="containerName"
>
<el-select class="selectClass" v-model="dialogData.rowData!.containerName">
<el-option v-for="item in containerOptions" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item
v-if="hasScript() && dialogData.rowData!.inContainer"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredInput"
>
<el-checkbox style="width: 100px" border v-model="dialogData.rowData!.isCustom">
{{ $t('container.custom') }}
</el-checkbox>
<el-select
style="width: calc(100% - 100px)"
filterable
clearable
v-model="dialogData.rowData!.command"
>
<el-option value="ash" label="/bin/ash" />
<el-option value="bash" label="/bin/bash" />
<el-option value="sh" label="/bin/sh" />
</el-select>
</el-form-item>
<el-form-item v-if="hasScript()">
<el-checkbox v-model="dialogData.rowData!.inContainer">
{{ $t('cronjob.containerCheckBox') }}
</el-checkbox>
</el-form-item>
<el-form-item
v-if="hasScript() && dialogData.rowData!.inContainer"
:label="$t('cronjob.containerName')"
prop="containerName"
>
<el-select class="selectClass" v-model="dialogData.rowData!.containerName">
<el-option v-for="item in containerOptions" :key="item" :value="item" :label="item" />
</el-select>
</el-form-item>
<el-form-item
v-if="hasScript() && dialogData.rowData!.inContainer"
:label="$t('container.command')"
prop="command"
:rules="Rules.requiredInput"
>
<el-checkbox class="w-full" border v-model="dialogData.rowData!.isCustom">
{{ $t('container.custom') }}
</el-checkbox>
<el-select style="width: calc(100% - 100px)" filterable clearable v-model="dialogData.rowData!.command">
<el-option value="ash" label="/bin/ash" />
<el-option value="bash" label="/bin/bash" />
<el-option value="sh" label="/bin/sh" />
</el-select>
</el-form-item>
<el-form-item v-if="hasScript()" :label="$t('cronjob.shellContent')" prop="script">
<el-input clearable type="textarea" :rows="5" v-model="dialogData.rowData!.script" />
</el-form-item>
<el-form-item v-if="hasScript()" :label="$t('cronjob.shellContent')" prop="script">
<el-input clearable type="textarea" :rows="5" v-model="dialogData.rowData!.script" />
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'cutWebsiteLog'"
:label="dialogData.rowData!.type === 'website' ? $t('cronjob.website'):$t('website.website')"
prop="website"
<el-form-item
v-if="dialogData.rowData!.type === 'website' || dialogData.rowData!.type === 'cutWebsiteLog'"
:label="dialogData.rowData!.type === 'website' ? $t('cronjob.website'):$t('website.website')"
prop="website"
>
<el-select class="selectClass" v-model="dialogData.rowData!.website">
<el-option :disabled="websiteOptions.length === 0" :label="$t('commons.table.all')" value="all" />
<el-option
v-for="(item, index) in websiteOptions"
:key="index"
:value="item.id + ''"
:label="item.primaryDomain"
>
<el-select class="selectClass" v-model="dialogData.rowData!.website">
<el-option
:disabled="websiteOptions.length === 0"
:label="$t('commons.table.all')"
value="all"
/>
<el-option
v-for="(item, index) in websiteOptions"
:key="index"
:value="item.id + ''"
:label="item.primaryDomain"
>
<span>{{ item.primaryDomain }}</span>
<span>{{ item.primaryDomain }}</span>
<el-tag class="tagClass">
{{ item.alias }}
</el-tag>
</el-option>
</el-select>
<span class="input-help" v-if="dialogData.rowData!.type === 'cutWebsiteLog'">
{{ $t('cronjob.cutWebsiteLogHelper') }}
</span>
</el-form-item>
<div v-if="dialogData.rowData!.type === 'app'">
<el-form-item :label="$t('cronjob.app')" prop="appID">
<el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
<el-option :disabled="appOptions.length === 0" :label="$t('commons.table.all')" value="all" />
<div v-for="item in appOptions" :key="item.id">
<el-option :value="item.id + ''" :label="item.name">
<span>{{ item.name }}</span>
<el-tag class="tagClass">
{{ item.alias }}
{{ item.key }}
</el-tag>
</el-option>
</el-select>
<span class="input-help" v-if="dialogData.rowData!.type === 'cutWebsiteLog'">
{{ $t('cronjob.cutWebsiteLogHelper') }}
</span>
</el-form-item>
</div>
</el-select>
</el-form-item>
</div>
<div v-if="dialogData.rowData!.type === 'app'">
<el-form-item :label="$t('cronjob.app')" prop="appID">
<el-select class="selectClass" clearable v-model="dialogData.rowData!.appID">
<el-option
:disabled="appOptions.length === 0"
:label="$t('commons.table.all')"
value="all"
/>
<div v-for="item in appOptions" :key="item.id">
<el-option :value="item.id + ''" :label="item.name">
<span>{{ item.name }}</span>
<el-tag class="tagClass">
{{ item.key }}
</el-tag>
</el-option>
</div>
</el-select>
</el-form-item>
</div>
<div v-if="dialogData.rowData!.type === 'database'">
<el-form-item :label="$t('cronjob.database')">
<el-radio-group v-model="dialogData.rowData!.dbType" @change="loadDatabases">
<el-radio value="mysql">MySQL</el-radio>
<el-radio value="mariadb">Mariadb</el-radio>
<el-radio value="postgresql">PostgreSQL</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('cronjob.database')" prop="dbName">
<el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
<el-option :disabled="dbInfo.dbs.length === 0" :label="$t('commons.table.all')" value="all" />
<el-option v-for="item in dbInfo.dbs" :key="item.id" :value="item.id + ''" :label="item.name">
<span>{{ item.name }}</span>
<el-tag class="tagClass">
{{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
</el-tag>
<el-tag class="tagClass">
{{ item.database }}
</el-tag>
</el-option>
</el-select>
</el-form-item>
</div>
<div v-if="dialogData.rowData!.type === 'database'">
<el-form-item :label="$t('cronjob.database')">
<el-radio-group v-model="dialogData.rowData!.dbType" @change="loadDatabases">
<el-radio value="mysql">MySQL</el-radio>
<el-radio value="mariadb">Mariadb</el-radio>
<el-radio value="postgresql">PostgreSQL</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('cronjob.database')" prop="dbName">
<el-select class="selectClass" clearable v-model="dialogData.rowData!.dbName">
<el-option
:disabled="dbInfo.dbs.length === 0"
:label="$t('commons.table.all')"
value="all"
/>
<el-option
v-for="item in dbInfo.dbs"
:key="item.id"
:value="item.id + ''"
:label="item.name"
>
<span>{{ item.name }}</span>
<el-tag class="tagClass">
{{ item.from === 'local' ? $t('database.local') : $t('database.remote') }}
</el-tag>
<el-tag class="tagClass">
{{ item.database }}
</el-tag>
</el-option>
</el-select>
</el-form-item>
</div>
<el-form-item
v-if="dialogData.rowData!.type === 'directory'"
:label="$t('cronjob.sourceDir')"
prop="sourceDir"
>
<el-input v-model="dialogData.rowData!.sourceDir">
<template #prepend>
<FileList @choose="loadDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item
v-if="dialogData.rowData!.type === 'directory'"
:label="$t('cronjob.sourceDir')"
prop="sourceDir"
<div v-if="isBackup()">
<el-form-item :label="$t('setting.backupAccount')" prop="backupAccountList">
<el-select
multiple
class="selectClass"
v-model="dialogData.rowData!.backupAccountList"
@change="changeAccount"
>
<el-input v-model="dialogData.rowData!.sourceDir">
<template #prepend>
<FileList @choose="loadDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<div v-if="isBackup()">
<el-form-item :label="$t('setting.backupAccount')" prop="backupAccountList">
<el-select
multiple
class="selectClass"
v-model="dialogData.rowData!.backupAccountList"
@change="changeAccount"
>
<div v-for="item in backupOptions" :key="item.label">
<el-option :value="item.value" :label="item.label" />
</div>
</el-select>
<span class="input-help">
{{ $t('cronjob.targetHelper') }}
<el-link
style="font-size: 12px"
icon="Position"
@click="goRouter('/settings/backupaccount')"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item
:label="$t('setting.compressPassword')"
prop="secret"
v-if="isBackup() && dialogData.rowData!.type !== 'database'"
<div v-for="item in backupOptions" :key="item.label">
<el-option :value="item.value" :label="item.label" />
</div>
</el-select>
<span class="input-help">
{{ $t('cronjob.targetHelper') }}
<el-link
style="font-size: 12px"
icon="Position"
@click="goRouter('/settings/backupaccount')"
type="primary"
>
<el-input v-model="dialogData.rowData!.secret" />
</el-form-item>
<el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
<el-select class="selectClass" v-model="dialogData.rowData!.defaultDownload">
<div v-for="item in accountOptions" :key="item.label">
<el-option :value="item.value" :label="item.label" />
</div>
</el-select>
</el-form-item>
</div>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item
:label="$t('setting.compressPassword')"
prop="secret"
v-if="isBackup() && dialogData.rowData!.type !== 'database'"
>
<el-input v-model="dialogData.rowData!.secret" />
</el-form-item>
<el-form-item :label="$t('cronjob.default_download_path')" prop="defaultDownload">
<el-select class="selectClass" v-model="dialogData.rowData!.defaultDownload">
<div v-for="item in accountOptions" :key="item.label">
<el-option :value="item.value" :label="item.label" />
</div>
</el-select>
</el-form-item>
</div>
<el-form-item :label="$t('cronjob.retainCopies')" prop="retainCopies">
<el-input-number
style="width: 200px"
:min="1"
step-strictly
:step="1"
v-model.number="dialogData.rowData!.retainCopies"
></el-input-number>
<span v-if="isBackup()" class="input-help">{{ $t('cronjob.retainCopiesHelper1') }}</span>
<span v-else class="input-help">{{ $t('cronjob.retainCopiesHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('cronjob.retainCopies')" prop="retainCopies">
<el-input-number
style="width: 200px"
:min="1"
step-strictly
:step="1"
v-model.number="dialogData.rowData!.retainCopies"
></el-input-number>
<span v-if="isBackup()" class="input-help">{{ $t('cronjob.retainCopiesHelper1') }}</span>
<span v-else class="input-help">{{ $t('cronjob.retainCopiesHelper') }}</span>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.type === 'curl'" :label="$t('cronjob.url')" prop="url">
<el-input clearable v-model.trim="dialogData.rowData!.url" />
</el-form-item>
<el-form-item v-if="dialogData.rowData!.type === 'curl'" :label="$t('cronjob.url')" prop="url">
<el-input clearable v-model.trim="dialogData.rowData!.url" />
</el-form-item>
<el-form-item
v-if="hasExclusionRules()"
:label="$t('cronjob.exclusionRules')"
prop="exclusionRules"
>
<el-input
type="textarea"
:placeholder="$t('cronjob.rulesHelper')"
:rows="3"
clearable
v-model="dialogData.rowData!.exclusionRules"
/>
<span class="input-help">{{ $t('cronjob.exclusionRulesHelper') }}</span>
</el-form-item>
</el-col>
</el-row>
<el-form-item v-if="hasExclusionRules()" :label="$t('cronjob.exclusionRules')" prop="exclusionRules">
<el-input
type="textarea"
:placeholder="$t('cronjob.rulesHelper')"
:rows="3"
clearable
v-model="dialogData.rowData!.exclusionRules"
/>
<span class="input-help">{{ $t('cronjob.exclusionRulesHelper') }}</span>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -357,7 +315,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -371,7 +329,6 @@ import { Cronjob } from '@/api/interface/cronjob';
import { addCronjob, editCronjob } from '@/api/modules/cronjob';
import { listDbItems } from '@/api/modules/database';
import { GetWebsiteOptions } from '@/api/modules/website';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
import { useRouter } from 'vue-router';
import { listContainer } from '@/api/modules/container';

42
frontend/src/views/cronjob/record/index.vue
View File

@ -58,30 +58,24 @@
</div>
<LayoutContent :title="$t('cronjob.record')" :reload="true">
<template #search>
<el-row :gutter="20">
<el-col :span="8">
<el-date-picker
style="width: calc(100% - 20px)"
@change="search()"
v-model="timeRangeLoad"
type="datetimerange"
:range-separator="$t('commons.search.timeRange')"
:start-placeholder="$t('commons.search.timeStart')"
:end-placeholder="$t('commons.search.timeEnd')"
:shortcuts="shortcuts"
></el-date-picker>
</el-col>
<el-col :span="16">
<el-select @change="search()" v-model="searchInfo.status" class="p-w-200">
<template #prefix>{{ $t('commons.table.status') }}</template>
<el-option :label="$t('commons.table.all')" value="" />
<el-option :label="$t('commons.status.success')" value="Success" />
<el-option :label="$t('commons.status.waiting')" value="Waiting" />
<el-option :label="$t('commons.status.failed')" value="Failed" />
</el-select>
</el-col>
</el-row>
<template #rightToolBar>
<el-date-picker
class="mr-2.5"
@change="search()"
v-model="timeRangeLoad"
type="datetimerange"
:range-separator="$t('commons.search.timeRange')"
:start-placeholder="$t('commons.search.timeStart')"
:end-placeholder="$t('commons.search.timeEnd')"
:shortcuts="shortcuts"
></el-date-picker>
<el-select @change="search()" v-model="searchInfo.status" class="p-w-200">
<template #prefix>{{ $t('commons.table.status') }}</template>
<el-option :label="$t('commons.table.all')" value="" />
<el-option :label="$t('commons.status.success')" value="Success" />
<el-option :label="$t('commons.status.waiting')" value="Waiting" />
<el-option :label="$t('commons.status.failed')" value="Failed" />
</el-select>
</template>
<template #main>
<div class="mainClass">

59
frontend/src/views/database/mysql/bind/index.vue
View File

@ -1,41 +1,30 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="bindVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="30%"
:header="$t('database.userBind')"
:resource="form.mysqlName"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader :header="$t('database.userBind')" :resource="form.mysqlName" :back="handleClose" />
</template>
<el-form v-loading="loading" ref="changeFormRef" :model="form" :rules="rules" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="form.password"></el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="permission">
<el-select v-model="form.permission">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option
v-if="form.from !== 'local'"
value="localhost"
:label="$t('terminal.localhost')"
/>
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
<el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="form.password"></el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="permission">
<el-select v-model="form.permission">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
<el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -47,8 +36,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
</div>
</template>
@ -57,7 +45,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { bindUser } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Rules } from '@/global/form-rules';
import { MsgSuccess } from '@/utils/message';
import { checkIp } from '@/utils/util';

187
frontend/src/views/database/mysql/conn/index.vue
View File

@ -1,113 +1,89 @@
<template>
<el-drawer
v-model="dialogVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
</template>
<DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(true).length > 48"
:content="loadMysqlInfo(true)"
placement="top"
>
{{ loadMysqlInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(true) }}
</span>
<CopyButton :content="loadMysqlInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
3306
<CopyButton content="3306" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(false).length > 48"
:content="loadMysqlInfo(false)"
placement="top"
>
{{ loadMysqlInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(false) }}
</span>
<CopyButton :content="loadMysqlInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(true).length > 48"
:content="loadMysqlInfo(true)"
placement="top"
>
{{ loadMysqlInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(true) }}
</span>
<CopyButton :content="loadMysqlInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
3306
<CopyButton content="3306" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadMysqlInfo(false).length > 48"
:content="loadMysqlInfo(false)"
placement="top"
>
{{ loadMysqlInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadMysqlInfo(false) }}
</span>
<CopyButton :content="loadMysqlInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<div v-if="form.from === 'local'">
<el-form-item :label="$t('database.remoteAccess')" prop="privilege">
<el-switch
v-model="form.privilege"
:disabled="form.status !== 'Running'"
@change="onSaveAccess"
/>
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
</el-form-item>
<el-form-item
:label="$t('database.rootPassword')"
:rules="Rules.paramComplexity"
prop="password"
>
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-col>
</el-row>
<div v-if="form.from === 'local'">
<el-form-item :label="$t('database.remoteAccess')" prop="privilege">
<el-switch v-model="form.privilege" :disabled="form.status !== 'Running'" @change="onSaveAccess" />
<span class="input-help">{{ $t('database.remoteConnHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('database.rootPassword')" :rules="Rules.paramComplexity" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-form>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit" @cancel="loadPassword"></ConfirmDialog>
<ConfirmDialog ref="confirmAccessDialogRef" @confirm="onSubmitAccess" @cancel="loadAccess"></ConfirmDialog>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="dialogVisible = false">
@ -118,7 +94,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -129,7 +105,6 @@ import { ElForm } from 'element-plus';
import { getDatabase, loadRemoteAccess, updateMysqlAccess, updateMysqlPassword } from '@/api/modules/database';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { GetAppConnInfo } from '@/api/modules/app';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { getRandomStr } from '@/utils/util';
import { getSettingInfo } from '@/api/modules/setting';

110
frontend/src/views/database/mysql/create/index.vue
View File

@ -1,69 +1,46 @@
<template>
<el-drawer
v-model="createVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('database.create')" :back="handleClose" />
</template>
<div v-loading="loading">
<el-form ref="formRef" label-position="top" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" @input="form.username = form.name">
<template #append>
<el-select v-model="form.format" style="width: 120px">
<el-option label="utf8mb4" value="utf8mb4" />
<el-option label="utf-8" value="utf8" />
<el-option label="gbk" value="gbk" />
<el-option label="big5" value="big5" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model.trim="form.password">
<template #append>
<el-button @click="random">{{ $t('commons.button.random') }}</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="permission">
<el-select v-model="form.permission">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option
v-if="form.from !== 'local'"
value="localhost"
:label="$t('terminal.localhost')"
/>
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
<el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="database">
<el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input type="textarea" clearable v-model="form.description" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<DrawerPro v-model="createVisible" :header="$t('database.create')" :back="handleClose" size="normal">
<el-form ref="formRef" label-position="top" :model="form" :rules="rules" v-loading="loading">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" @input="form.username = form.name">
<template #append>
<el-select v-model="form.format" class="p-w-100">
<el-option label="utf8mb4" value="utf8mb4" />
<el-option label="utf-8" value="utf8" />
<el-option label="gbk" value="gbk" />
<el-option label="big5" value="big5" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model.trim="form.password">
<template #append>
<el-button @click="random">{{ $t('commons.button.random') }}</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="permission">
<el-select v-model="form.permission">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option v-if="form.from !== 'local'" value="localhost" :label="$t('terminal.localhost')" />
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="form.permission === 'ip'" prop="permissionIPs">
<el-input clearable :rows="3" type="textarea" v-model="form.permissionIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="database">
<el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input type="textarea" clearable v-model="form.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="createVisible = false">
@ -74,7 +51,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -83,7 +60,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { addMysqlDB } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { checkIp, getRandomStr } from '@/utils/util';

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

@ -257,10 +257,8 @@
<UploadDialog ref="uploadRef" />
<OperateDialog @search="search" ref="dialogRef" />
<Backups ref="dialogBackupRef" />
<AppResources ref="checkRef"></AppResources>
<DeleteDialog ref="deleteRef" @search="search" />
<PortJumpDialog ref="dialogPortJumpRef" />
</div>
</template>

75
frontend/src/views/database/mysql/password/index.vue
View File

@ -1,50 +1,38 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="changeVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="30%"
:header="title"
:resource="changeForm.mysqlName"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader :header="title" :resource="changeForm.mysqlName" :back="handleClose" />
</template>
<el-form v-loading="loading" ref="changeFormRef" :model="changeForm" :rules="rules" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<div v-if="changeForm.operation === 'password'">
<el-form-item :label="$t('commons.login.username')" prop="userName">
<el-input disabled v-model="changeForm.userName"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
type="password"
clearable
show-password
v-model="changeForm.password"
></el-input>
</el-form-item>
</div>
<div v-if="changeForm.operation === 'privilege'">
<el-form-item :label="$t('database.permission')" prop="privilege">
<el-select style="width: 100%" v-model="changeForm.privilege">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option
v-if="changeForm.from !== 'local'"
value="localhost"
:label="$t('terminal.localhost')"
/>
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="changeForm.privilege === 'ip'" prop="privilegeIPs">
<el-input clearable :rows="3" type="textarea" v-model="changeForm.privilegeIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
</div>
</el-col>
</el-row>
<div v-if="changeForm.operation === 'password'">
<el-form-item :label="$t('commons.login.username')" prop="userName">
<el-input disabled v-model="changeForm.userName"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="changeForm.password"></el-input>
</el-form-item>
</div>
<div v-if="changeForm.operation === 'privilege'">
<el-form-item :label="$t('database.permission')" prop="privilege">
<el-select style="width: 100%" v-model="changeForm.privilege">
<el-option value="%" :label="$t('database.permissionAll')" />
<el-option
v-if="changeForm.from !== 'local'"
value="localhost"
:label="$t('terminal.localhost')"
/>
<el-option value="ip" :label="$t('database.permissionForIP')" />
</el-select>
</el-form-item>
<el-form-item v-if="changeForm.privilege === 'ip'" prop="privilegeIPs">
<el-input clearable :rows="3" type="textarea" v-model="changeForm.privilegeIPs" />
<span class="input-help">{{ $t('database.remoteHelper') }}</span>
</el-form-item>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -56,7 +44,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
</div>
@ -66,7 +54,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { deleteCheckMysqlDB, updateMysqlAccess, updateMysqlPassword } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Rules } from '@/global/form-rules';
import { MsgSuccess } from '@/utils/message';
import { checkIp } from '@/utils/util';

21
frontend/src/views/database/mysql/remote/index.vue
View File

@ -1,20 +1,13 @@
<template>
<div v-loading="loading">
<LayoutContent>
<template #title>
<back-button name="MySQL" :header="$t('database.remoteDB')" />
<LayoutContent backName="MySQL" :title="$t('database.remoteDB')">
<template #leftToolBar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('database.createRemoteDB') }}
</el-button>
</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>
<template #rightToolBar>
<TableSearch @search="search()" v-model:searchName="searchName" />
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

202
frontend/src/views/database/mysql/remote/operate/index.vue
View File

@ -1,120 +1,95 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="title"
:back="handleClose"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
size="large"
>
<template #header>
<DrawerHeader
:hideResource="dialogData.title === 'create'"
:header="title"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
v-if="dialogData.title === 'create'"
clearable
v-model.trim="dialogData.rowData!.name"
/>
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="type">
<el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
<el-radio-button value="mysql">MySQL</el-radio-button>
<el-radio-button value="mariadb">MariaDB</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<div v-if="dialogData.rowData!.type === 'mysql'">
<el-radio label="8.x" value="8.x" />
<el-radio label="5.7" value="5.7" />
<el-radio label="5.6" value="5.6" />
</div>
<div v-else>
<el-radio label="10.x" value="10.x" />
<el-radio label="11.x" value="11.x" />
</div>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
<span class="input-help">{{ $t('database.userHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item>
<el-checkbox
@change="isOK = false"
v-model="dialogData.rowData!.ssl"
:label="$t('database.ssl')"
/>
</el-form-item>
<div v-if="dialogData.rowData!.ssl">
<el-form-item>
<el-checkbox
@change="isOK = false"
v-model="dialogData.rowData!.hasCA"
:label="$t('database.hasCA')"
/>
</el-form-item>
<el-form-item>
<el-checkbox
@change="isOK = false"
v-model="dialogData.rowData!.skipVerify"
:label="$t('database.skipVerify')"
/>
</el-form-item>
<el-form-item :label="$t('database.clientKey')" prop="clientKey">
<el-input
type="textarea"
@change="isOK = false"
clearable
v-model="dialogData.rowData!.clientKey"
/>
</el-form-item>
<el-form-item :label="$t('database.clientCert')" prop="clientCert">
<el-input
type="textarea"
@change="isOK = false"
clearable
v-model="dialogData.rowData!.clientCert"
/>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.hasCA" :label="$t('database.caCert')" prop="rootCert">
<el-input
type="textarea"
@change="isOK = false"
clearable
v-model="dialogData.rowData!.rootCert"
/>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="type">
<el-radio-group v-model="dialogData.rowData!.type" @change="changeType">
<el-radio-button value="mysql">MySQL</el-radio-button>
<el-radio-button value="mariadb">MariaDB</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<div v-if="dialogData.rowData!.type === 'mysql'">
<el-radio label="8.x" value="8.x" />
<el-radio label="5.7" value="5.7" />
<el-radio label="5.6" value="5.6" />
</div>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-col>
</el-row>
<div v-else>
<el-radio label="10.x" value="10.x" />
<el-radio label="11.x" value="11.x" />
</div>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
<span class="input-help">{{ $t('database.userHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item>
<el-checkbox @change="isOK = false" v-model="dialogData.rowData!.ssl" :label="$t('database.ssl')" />
</el-form-item>
<div v-if="dialogData.rowData!.ssl">
<el-form-item>
<el-checkbox
@change="isOK = false"
v-model="dialogData.rowData!.hasCA"
:label="$t('database.hasCA')"
/>
</el-form-item>
<el-form-item>
<el-checkbox
@change="isOK = false"
v-model="dialogData.rowData!.skipVerify"
:label="$t('database.skipVerify')"
/>
</el-form-item>
<el-form-item :label="$t('database.clientKey')" prop="clientKey">
<el-input
type="textarea"
@change="isOK = false"
clearable
v-model="dialogData.rowData!.clientKey"
/>
</el-form-item>
<el-form-item :label="$t('database.clientCert')" prop="clientCert">
<el-input
type="textarea"
@change="isOK = false"
clearable
v-model="dialogData.rowData!.clientCert"
/>
</el-form-item>
<el-form-item v-if="dialogData.rowData!.hasCA" :label="$t('database.caCert')" prop="rootCert">
<el-input type="textarea" @change="isOK = false" clearable v-model="dialogData.rowData!.rootCert" />
</el-form-item>
</div>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -127,7 +102,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -135,7 +110,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Database } from '@/api/interface/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
import { Rules } from '@/global/form-rules';
import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';

90
frontend/src/views/database/mysql/setting/index.vue
View File

@ -1,49 +1,45 @@
<template>
<div v-loading="loading">
<LayoutContent>
<template #title>
<back-button name="MySQL" :header="props.database + ' ' + $t('commons.button.set')">
<template #buttons>
<el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
{{ $t('database.confChange') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'status'"
@click="activeName = 'status'"
>
{{ $t('database.currentStatus') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'tuning'"
@click="activeName = 'tuning'"
>
{{ $t('database.performanceTuning') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
{{ $t('commons.table.port') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'log'"
@click="activeName = 'log'"
>
{{ $t('database.log') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
@click="jumpToSlowlog"
:plain="activeName !== 'slowLog'"
>
{{ $t('database.slowLog') }}
</el-button>
</template>
</back-button>
<LayoutContent backName="MySQL" :title="props.database + ' ' + $t('commons.button.set')">
<template #leftToolBar>
<el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
{{ $t('database.confChange') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'status'"
@click="activeName = 'status'"
>
{{ $t('database.currentStatus') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'tuning'"
@click="activeName = 'tuning'"
>
{{ $t('database.performanceTuning') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
{{ $t('commons.table.port') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
:plain="activeName !== 'log'"
@click="activeName = 'log'"
>
{{ $t('database.log') }}
</el-button>
<el-button
type="primary"
:disabled="mysqlStatus !== 'Running'"
@click="jumpToSlowlog"
:plain="activeName !== 'slowLog'"
>
{{ $t('database.slowLog') }}
</el-button>
</template>
<template #app>
@ -65,17 +61,17 @@
:extensions="extensions"
v-model="mysqlConf"
/>
<el-button style="margin-top: 10px" @click="getDefaultConfig()">
<el-button class="mt-2.5" @click="getDefaultConfig()">
{{ $t('app.defaultConfig') }}
</el-button>
<el-button type="primary" style="margin-top: 10px" @click="onSaveConf">
<el-button type="primary" class="mt-2.5" @click="onSaveConf">
{{ $t('commons.button.save') }}
</el-button>
<el-row>
<el-col :span="8">
<el-alert
v-if="useOld"
style="margin-top: 10px"
class="mt-2.5"
:title="$t('app.defaultConfigHelper')"
type="info"
:closable="false"

40
frontend/src/views/database/postgresql/bind/index.vue
View File

@ -1,30 +1,23 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="bindVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="30%"
:header="$t('database.userBind')"
:resource="form.name"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader :header="$t('database.userBind')" :resource="form.name" :back="handleClose" />
</template>
<el-form v-loading="loading" ref="changeFormRef" :model="form" :rules="rules" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-alert type="warning" :title="$t('database.pgBindHelper')" :closable="false" />
<el-form-item class="mt-5" :label="$t('database.userBind')" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="form.password" />
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="superUser">
<el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<el-alert type="warning" :title="$t('database.pgBindHelper')" :closable="false" />
<el-form-item class="mt-5" :label="$t('database.userBind')" prop="username">
<el-input v-model="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="form.password" />
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="superUser">
<el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -36,7 +29,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
</div>
@ -46,7 +39,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { bindPostgresqlUser } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Rules } from '@/global/form-rules';
import { MsgSuccess } from '@/utils/message';

186
frontend/src/views/database/postgresql/conn/index.vue
View File

@ -1,108 +1,87 @@
<template>
<el-drawer
v-model="dialogVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
</template>
<DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadPgInfo(true).length > 48"
:content="loadPgInfo(true)"
placement="top"
>
{{ loadPgInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(true) }}
</span>
<CopyButton :content="loadPgInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadPgInfo(false).length > 48"
:content="loadPgInfo(false)"
placement="top"
>
{{ loadPgInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(false) }}
</span>
<CopyButton :content="loadPgInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip v-if="loadPgInfo(true).length > 48" :content="loadPgInfo(true)" placement="top">
{{ loadPgInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(true) }}
</span>
<CopyButton :content="loadPgInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadPgInfo(false).length > 48"
:content="loadPgInfo(false)"
placement="top"
>
{{ loadPgInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadPgInfo(false) }}
</span>
<CopyButton :content="loadPgInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span v-if="form.from === 'local'" class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<div v-if="form.from === 'local'">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input type="text" readonly disabled v-model="form.username">
<template #append>
<el-button-group>
<CopyButton :content="form.username" />
</el-button-group>
</template>
</el-input>
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
:rules="Rules.paramComplexity"
prop="password"
>
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-col>
</el-row>
<el-divider border-style="dashed" />
<div v-if="form.from === 'local'">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input type="text" readonly disabled v-model="form.username">
<template #append>
<el-button-group>
<CopyButton :content="form.username" />
</el-button-group>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" :rules="Rules.paramComplexity" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
</div>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.username')">
<el-tag>{{ form.username }}</el-tag>
<CopyButton :content="form.username" type="icon" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-form>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit" @cancel="loadPassword"></ConfirmDialog>
@ -117,7 +96,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -128,7 +107,6 @@ import { ElForm } from 'element-plus';
import { getDatabase, updatePostgresqlPassword } from '@/api/modules/database';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { GetAppConnInfo } from '@/api/modules/app';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { getRandomStr } from '@/utils/util';
import { getSettingInfo } from '@/api/modules/setting';

63
frontend/src/views/database/postgresql/create/index.vue
View File

@ -1,47 +1,33 @@
<template>
<el-drawer
v-model="createVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('database.create')" :back="handleClose" />
</template>
<DrawerPro v-model="createVisible" :header="$t('database.create')" :back="handleClose" size="small">
<div v-loading="loading">
<el-form ref="formRef" label-position="top" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" @input="form.username = form.name"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model.trim="form.password">
<template #append>
<el-button @click="random">{{ $t('commons.button.random') }}</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="superUser">
<el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model.trim="form.name" @input="form.username = form.name"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input clearable v-model.trim="form.username" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model.trim="form.password">
<template #append>
<el-button @click="random">{{ $t('commons.button.random') }}</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('database.permission')" prop="superUser">
<el-checkbox v-model="form.superUser">{{ $t('database.pgSuperUser') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="database">
<el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.type')" prop="database">
<el-tag>{{ form.database + ' [' + form.type + ']' }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input type="textarea" clearable v-model="form.description" />
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input type="textarea" clearable v-model="form.description" />
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="createVisible = false">
@ -52,7 +38,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -61,7 +47,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { addPostgresqlDB } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { getRandomStr } from '@/utils/util';

41
frontend/src/views/database/postgresql/password/index.vue
View File

@ -1,33 +1,21 @@
<template>
<div>
<el-drawer
<DrawerPro
v-model="changeVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
width="30%"
:header="title"
:resource="changeForm.postgresqlName"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader :header="title" :resource="changeForm.postgresqlName" :back="handleClose" />
</template>
<el-form v-loading="loading" ref="changeFormRef" :rules="rules" :model="changeForm" label-position="top">
<el-row type="flex" justify="center">
<el-col :span="22">
<div v-if="changeForm.operation === 'password'">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input disabled v-model="changeForm.username"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
type="password"
clearable
show-password
v-model="changeForm.password"
></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
<div v-if="changeForm.operation === 'password'">
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input disabled v-model="changeForm.username"></el-input>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input type="password" clearable show-password v-model="changeForm.password"></el-input>
</el-form-item>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -39,7 +27,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
</div>
@ -49,7 +37,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { deleteCheckPostgresqlDB, updatePostgresqlPassword } from '@/api/modules/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { Rules } from '@/global/form-rules';

21
frontend/src/views/database/postgresql/remote/index.vue
View File

@ -1,20 +1,13 @@
<template>
<div v-loading="loading">
<LayoutContent>
<template #title>
<back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
<LayoutContent :title="$t('database.remoteDB')" backName="PostgreSQL">
<template #leftToolBar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('database.createRemoteDB') }}
</el-button>
</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>
<template #rightToolBar>
<TableSearch @search="search()" v-model:searchName="searchName" />
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

95
frontend/src/views/database/postgresql/remote/operate/index.vue
View File

@ -1,62 +1,46 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="title"
:back="handleClose"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
size="large"
>
<template #header>
<DrawerHeader
:hideResource="dialogData.title === 'create'"
:header="title"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
v-if="dialogData.title === 'create'"
clearable
v-model.trim="dialogData.rowData!.name"
/>
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<el-radio label="16.x" value="16.x" />
<el-radio label="15.x" value="15.x" />
<el-radio label="14.x" value="14.x" />
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
<span class="input-help">{{ $t('database.pgUserHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<el-radio label="16.x" value="16.x" />
<el-radio label="15.x" value="15.x" />
<el-radio label="14.x" value="14.x" />
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="username">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.username" />
<span class="input-help">{{ $t('database.pgUserHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -69,7 +53,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -77,7 +61,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Database } from '@/api/interface/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
import { Rules } from '@/global/form-rules';
import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';

36
frontend/src/views/database/postgresql/setting/index.vue
View File

@ -1,25 +1,21 @@
<template>
<div v-loading="loading">
<LayoutContent>
<template #title>
<back-button name="PostgreSQL" :header="props.database + ' ' + $t('commons.button.set')">
<template #buttons>
<el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
{{ $t('database.confChange') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
{{ $t('commons.table.port') }}
</el-button>
<el-button
type="primary"
:disabled="postgresqlStatus !== 'Running'"
:plain="activeName !== 'log'"
@click="activeName = 'log'"
>
{{ $t('database.log') }}
</el-button>
</template>
</back-button>
<LayoutContent :title="props.database + ' ' + $t('commons.button.set')" backName="PostgreSQL">
<template #leftToolBar>
<el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
{{ $t('database.confChange') }}
</el-button>
<el-button type="primary" :plain="activeName !== 'port'" @click="activeName = 'port'">
{{ $t('commons.table.port') }}
</el-button>
<el-button
type="primary"
:disabled="postgresqlStatus !== 'Running'"
:plain="activeName !== 'log'"
@click="activeName = 'log'"
>
{{ $t('database.log') }}
</el-button>
</template>
<template #app>

32
frontend/src/views/database/redis/command/index.vue
View File

@ -1,16 +1,6 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('database.redisQuickCmd')" :back="handleClose" />
</template>
<DrawerPro v-model="drawerVisible" :header="$t('database.redisQuickCmd')" :back="handleClose" size="large">
<template #content>
<el-button type="primary" @click="handleCmdAdd()">
{{ $t('commons.button.add') }}
</el-button>
@ -66,15 +56,14 @@
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</el-drawer>
<OpDialog ref="opRef" @search="search" />
</div>
</template>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
</span>
</template>
</DrawerPro>
<OpDialog ref="opRef" @search="search" />
</template>
<script setup lang="ts">
@ -82,7 +71,6 @@ import { Command } from '@/api/interface/command';
import { saveRedisCommand, deleteRedisCommand, getRedisCommandPage } from '@/api/modules/host';
import { reactive, ref } from 'vue';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
const drawerVisible = ref();

156
frontend/src/views/database/redis/conn/index.vue
View File

@ -1,90 +1,77 @@
<template>
<el-drawer
v-model="dialogVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('database.databaseConnInfo')" :back="handleClose" />
</template>
<DrawerPro v-model="dialogVisible" :header="$t('database.databaseConnInfo')" :back="handleClose" size="small">
<el-form @submit.prevent v-loading="loading" ref="formRef" :model="form" label-position="top" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadRedisInfo(true).length > 48"
:content="loadRedisInfo(true)"
placement="top"
>
{{ loadRedisInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadRedisInfo(true) }}
</span>
<CopyButton :content="loadRedisInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
6379
<CopyButton content="6379" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadRedisInfo(false).length > 48"
:content="loadRedisInfo(false)"
placement="top"
>
{{ loadRedisInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadRedisInfo(false) }}
</span>
<CopyButton :content="loadRedisInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.containerConn')" v-if="form.from === 'local'">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadRedisInfo(true).length > 48"
:content="loadRedisInfo(true)"
placement="top"
>
{{ loadRedisInfo(true).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadRedisInfo(true) }}
</span>
<CopyButton :content="loadRedisInfo(true)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
6379
<CopyButton content="6379" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.containerConnHelper') }}
</span>
</el-form-item>
<el-form-item :label="$t('database.remoteConn')">
<el-card class="mini-border-card">
<el-descriptions :column="1">
<el-descriptions-item :label="$t('database.connAddress')">
<el-tooltip
v-if="loadRedisInfo(false).length > 48"
:content="loadRedisInfo(false)"
placement="top"
>
{{ loadRedisInfo(false).substring(0, 48) }}...
</el-tooltip>
<span else>
{{ loadRedisInfo(false) }}
</span>
<CopyButton :content="loadRedisInfo(false)" type="icon" />
</el-descriptions-item>
<el-descriptions-item :label="$t('database.connPort')">
{{ form.port }}
<CopyButton :content="form.port + ''" type="icon" />
</el-descriptions-item>
</el-descriptions>
</el-card>
<span class="input-help">
{{ $t('database.remoteConnHelper2') }}
</span>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-divider border-style="dashed" />
<el-form-item :label="$t('commons.login.password')" v-if="form.from === 'local'" prop="password">
<el-input type="password" show-password clearable v-model="form.password">
<template #append>
<CopyButton :content="form.password" />
<el-button @click="random" class="p-ml-5">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-col>
</el-row>
<div v-if="form.from !== 'local'">
<el-form-item :label="$t('commons.login.password')">
<el-tag>{{ form.password }}</el-tag>
<CopyButton :content="form.password" type="icon" />
</el-form-item>
</div>
</el-form>
<ConfirmDialog ref="confirmDialogRef" @confirm="onSubmit"></ConfirmDialog>
@ -99,7 +86,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -110,7 +97,6 @@ import { changeRedisPassword, getDatabase } from '@/api/modules/database';
import ConfirmDialog from '@/components/confirm-dialog/index.vue';
import { GetAppConnInfo } from '@/api/modules/app';
import { MsgSuccess } from '@/utils/message';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { getRandomStr } from '@/utils/util';
import { getSettingInfo } from '@/api/modules/setting';

170
frontend/src/views/database/redis/index.vue
View File

@ -8,7 +8,7 @@
</div>
</el-card>
</div>
<LayoutContent>
<LayoutContent title="Redis">
<template #app v-if="currentDB?.from === 'local'">
<AppStatus
:app-key="'redis'"
@ -19,96 +19,100 @@
@setting="onSetting"
></AppStatus>
</template>
<template #search v-if="!isOnSetting">
<div class="flex">
<div>
<el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
{{ $t('database.databaseConnInfo') }}
<template #leftToolBar v-if="!isOnSetting">
<el-button v-if="currentDB" type="primary" plain @click="onLoadConn">
{{ $t('database.databaseConnInfo') }}
</el-button>
<el-button @click="goRemoteDB" type="primary" plain>
{{ $t('database.remoteDB') }}
</el-button>
</template>
<template #rightToolBar v-if="!isOnSetting">
<el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200 ml-5" v-if="currentDB">
<template #prefix>{{ $t('commons.table.type') }}</template>
<el-option-group :label="$t('database.local')">
<div v-for="(item, index) in dbOptionsLocal" :key="index">
<el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
<span v-if="item.database.length < 25">{{ item.database }}</span>
<el-tooltip v-else :content="item.database" placement="top">
<span>{{ item.database.substring(0, 25) }}...</span>
</el-tooltip>
</el-option>
</div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
{{ $t('database.goInstall') }}
</el-button>
<el-button @click="goRemoteDB" type="primary" plain>
{{ $t('database.remoteDB') }}
</el-option-group>
<el-option-group :label="$t('database.remote')">
<div v-for="(item, index) in dbOptionsRemote" :key="index">
<el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
<span v-if="item.database.length < 25">{{ item.database }}</span>
<el-tooltip v-else :content="item.database" placement="top">
<span>{{ item.database.substring(0, 25) }}...</span>
</el-tooltip>
</el-option>
</div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
{{ $t('database.createRemoteDB') }}
</el-button>
</el-option-group>
</el-select>
</template>
<template #main v-if="!isOnSetting">
<div v-if="currentDB && !isOnSetting" class="mt-5">
<Terminal
:style="{ height: `calc(100vh - ${loadHeight()})` }"
:key="isRefresh"
ref="terminalRef"
v-show="redisStatus === 'Running' && terminalShow"
/>
<el-empty
v-if="redisStatus !== 'Running' || (currentDB.from === 'remote' && !redisCliExist)"
:image-size="80"
:style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
:description="loadErrMsg()"
>
<el-button v-if="currentDB.from === 'remote'" type="primary" @click="installCli">
{{ $t('commons.button.enable') }}
</el-button>
</el-empty>
<div>
<el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 90%">
<template #prefix>{{ $t('terminal.quickCommand') }}</template>
<el-option
v-for="cmd in quickCmdList"
:key="cmd.id"
:label="cmd.name"
:value="cmd.command"
/>
</el-select>
<el-button @click="onSetQuickCmd" icon="Setting" style="width: 10%">
{{ $t('commons.button.set') }}
</el-button>
</div>
<el-select v-model="currentDBName" @change="changeDatabase()" class="p-w-200 ml-5" v-if="currentDB">
<template #prefix>{{ $t('commons.table.type') }}</template>
<el-option-group :label="$t('database.local')">
<div v-for="(item, index) in dbOptionsLocal" :key="index">
<el-option v-if="item.from === 'local'" :value="item.database" class="optionClass">
<span v-if="item.database.length < 25">{{ item.database }}</span>
<el-tooltip v-else :content="item.database" placement="top">
<span>{{ item.database.substring(0, 25) }}...</span>
</el-tooltip>
</el-option>
</div>
<div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
<LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
<span @click="goRouter('app')">
<el-icon class="ml-2"><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('app')" icon="Position">
{{ $t('database.goInstall') }}
</el-button>
</el-option-group>
<el-option-group :label="$t('database.remote')">
<div v-for="(item, index) in dbOptionsRemote" :key="index">
<el-option v-if="item.from === 'remote'" :value="item.database" class="optionClass">
<span v-if="item.database.length < 25">{{ item.database }}</span>
<el-tooltip v-else :content="item.database" placement="top">
<span>{{ item.database.substring(0, 25) }}...</span>
</el-tooltip>
</el-option>
</div>
<el-button link type="primary" class="jumpAdd" @click="goRouter('remote')" icon="Position">
{{ $t('database.createRemoteDB') }}
</el-button>
</el-option-group>
</el-select>
</template>
</LayoutContent>
</div>
</template>
</LayoutContent>
<div v-if="currentDB && !isOnSetting" class="mt-5">
<Terminal
:style="{ height: `calc(100vh - ${loadHeight()})` }"
:key="isRefresh"
ref="terminalRef"
v-show="redisStatus === 'Running' && terminalShow"
/>
<el-empty
v-if="redisStatus !== 'Running' || (currentDB.from === 'remote' && !redisCliExist)"
:image-size="80"
:style="{ height: `calc(100vh - ${loadHeight()})`, 'background-color': '#000' }"
:description="loadErrMsg()"
>
<el-button v-if="currentDB.from === 'remote'" type="primary" @click="installCli">
{{ $t('commons.button.enable') }}
</el-button>
</el-empty>
<div>
<el-select v-model="quickCmd" clearable filterable @change="quickInput" style="width: 90%">
<template #prefix>{{ $t('terminal.quickCommand') }}</template>
<el-option v-for="cmd in quickCmdList" :key="cmd.id" :label="cmd.name" :value="cmd.command" />
</el-select>
<el-button @click="onSetQuickCmd" icon="Setting" style="width: 10%">
{{ $t('commons.button.set') }}
</el-button>
</div>
</div>
<div v-if="dbOptionsLocal.length === 0 && dbOptionsRemote.length === 0">
<LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
<template #main>
<div class="app-warn">
<div>
<span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
<span @click="goRouter('app')">
<el-icon class="ml-2"><Position /></el-icon>
{{ $t('database.goInstall') }}
</span>
<div>
<img src="@/assets/images/no_app.svg" />
</div>
</div>
</div>
</template>
</LayoutContent>
</div>
<Setting ref="settingRef" style="margin-top: 30px" />
<Conn ref="connRef" @check-exist="reOpenTerminal" @close-terminal="closeTerminal(true)" />
<el-dialog

21
frontend/src/views/database/redis/remote/index.vue
View File

@ -1,20 +1,13 @@
<template>
<div v-loading="loading">
<LayoutContent>
<template #title>
<back-button name="Redis" :header="$t('database.remoteDB')" />
<LayoutContent :title="$t('database.remoteDB')" backName="Redis">
<template #leftToolBar>
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('database.createRemoteDB') }}
</el-button>
</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>
<template #rightToolBar>
<TableSearch @search="search()" v-model:searchName="searchName" />
</template>
<template #main>
<ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">

85
frontend/src/views/database/redis/remote/operate/index.vue
View File

@ -1,56 +1,40 @@
<template>
<el-drawer
<DrawerPro
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
:header="title"
:back="handleClose"
:resource="dialogData.title === 'create' ? '' : dialogData.rowData?.name"
size="large"
>
<template #header>
<DrawerHeader
:hideResource="dialogData.title === 'create'"
:header="title"
:resource="dialogData.rowData?.name"
:back="handleClose"
/>
</template>
<el-form ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input
v-if="dialogData.title === 'create'"
clearable
v-model.trim="dialogData.rowData!.name"
/>
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<el-radio label="6.x" value="6.x" />
<el-radio label="7.x" value="7.x" />
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-if="dialogData.title === 'create'" clearable v-model.trim="dialogData.rowData!.name" />
<el-tag v-else>{{ dialogData.rowData!.name }}</el-tag>
</el-form-item>
<el-form-item :label="$t('database.version')" prop="version">
<el-radio-group v-model="dialogData.rowData!.version" @change="isOK = false">
<el-radio label="6.x" value="6.x" />
<el-radio label="7.x" value="7.x" />
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('database.address')" prop="address">
<el-input @change="isOK = false" clearable v-model.trim="dialogData.rowData!.address" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input
@change="isOK = false"
type="password"
clearable
show-password
v-model.trim="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -63,7 +47,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -71,7 +55,6 @@ import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Database } from '@/api/interface/database';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
import { Rules } from '@/global/form-rules';
import { addDatabase, checkDatabase, editDatabase } from '@/api/modules/database';

2
frontend/src/views/database/redis/setting/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-show="settingShow" v-loading="loading">
<LayoutContent :title="database + ' ' + $t('commons.button.set')" :reload="true">
<template #buttons>
<template #leftToolBar>
<el-button type="primary" :plain="activeName !== 'conf'" @click="changeTab('conf')">
{{ $t('database.confChange') }}
</el-button>

45
frontend/src/views/host/file-management/batch-role/index.vue
View File

@ -1,42 +1,29 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('file.setRole')" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1" v-loading="loading">
<FileRole :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
<el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input v-model.trim="addForm.user" />
</el-form-item>
<el-form-item :label="$t('file.group')" prop="group">
<el-input v-model.trim="addForm.group" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" size="large">
<div v-loading="loading">
<FileRole :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
<el-form ref="fileForm" label-position="left" :model="addForm" label-width="100px" :rules="rules">
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input v-model.trim="addForm.user" />
</el-form-item>
<el-form-item :label="$t('file.group')" prop="group">
<el-input v-model.trim="addForm.group" />
</el-form-item>
<el-form-item>
<el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { reactive, ref } from 'vue';
import { File } from '@/api/interface/file';
import { BatchChangeRole } from '@/api/modules/files';

27
frontend/src/views/host/file-management/change-role/index.vue
View File

@ -1,34 +1,19 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('file.setRole')" :resource="name" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<FileRole v-loading="loading" :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
<el-form-item v-if="form.isDir">
<el-checkbox v-model="form.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" :resource="name" size="large">
<FileRole v-loading="loading" :mode="mode" @get-mode="getMode" :key="open.toString()"></FileRole>
<el-form-item v-if="form.isDir">
<el-checkbox v-model="form.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit()">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ref } from 'vue';
import { File } from '@/api/interface/file';
import { ChangeFileMode } from '@/api/modules/files';

50
frontend/src/views/host/file-management/chown/index.vue
View File

@ -1,38 +1,31 @@
<template>
<el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
<template #header>
<DrawerHeader :header="$t('file.changeOwner')" :resource="name" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" class="common-prompt" />
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input v-model.trim="addForm.user" />
</el-form-item>
<el-form-item :label="$t('file.group')" prop="group">
<el-input v-model.trim="addForm.group" />
</el-form-item>
<el-form-item v-if="isDir">
<el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.setRole')" :back="handleClose" :resource="name" size="normal">
<el-alert :title="$t('file.ownerHelper')" type="info" :closable="false" class="common-prompt" />
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('commons.table.user')" prop="user">
<el-input v-model.trim="addForm.user" />
</el-form-item>
<el-form-item :label="$t('file.group')" prop="group">
<el-input v-model.trim="addForm.group" />
</el-form-item>
<el-form-item v-if="isDir">
<el-checkbox v-model="addForm.sub">{{ $t('file.containSub') }}</el-checkbox>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -42,7 +35,6 @@ import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import DrawerHeader from '@/components/drawer-header/index.vue';
interface OwnerProps {
path: string;

83
frontend/src/views/host/file-management/compress/index.vue
View File

@ -1,58 +1,44 @@
<template>
<el-drawer
v-model="open"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
size="50%"
>
<template #header>
<DrawerHeader :header="title" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
ref="fileForm"
label-position="top"
:model="form"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.compressType')" prop="type">
<el-select v-model="form.type">
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="form.name">
<template #append>{{ extension }}</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('file.compressDst')" prop="dst">
<el-input v-model="form.dst">
<template #prepend>
<FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="form.type === 'tar.gz'">
<el-input v-model="form.secret"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="title" :back="handleClose" size="large">
<el-form
ref="fileForm"
label-position="top"
:model="form"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.compressType')" prop="type">
<el-select v-model="form.type">
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="form.name">
<template #append>{{ extension }}</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('file.compressDst')" prop="dst">
<el-input v-model="form.dst">
<template #prepend>
<FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="form.type === 'tar.gz'">
<el-input v-model="form.secret"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="form.replace" :label="$t('file.replace')"></el-checkbox>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
@ -64,7 +50,6 @@ import { Rules } from '@/global/form-rules';
import { CompressExtension, CompressType } from '@/enums/files';
import { CompressFile } from '@/api/modules/files';
import FileList from '@/components/file-list/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
interface CompressProps {

87
frontend/src/views/host/file-management/create/index.vue
View File

@ -1,65 +1,48 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="40%"
>
<template #header>
<DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
@submit.enter.prevent
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model.trim="addForm.name" />
</el-form-item>
<el-form-item v-if="!addForm.isDir">
<el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
</el-form-item>
<el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
<el-radio-group v-model="addForm.isSymlink">
<el-radio :value="true">{{ $t('file.softLink') }}</el-radio>
<el-radio :value="false">{{ $t('file.hardLink') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
<el-input v-model="addForm.linkPath">
<template #prepend>
<FileList @choose="getLinkPath"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
</el-form-item>
</el-form>
<FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('commons.button.create')" :back="handleClose" size="normal">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
@submit.enter.prevent
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model.trim="addForm.name" />
</el-form-item>
<el-form-item v-if="!addForm.isDir">
<el-checkbox v-model="addForm.isLink" :label="$t('file.link')"></el-checkbox>
</el-form-item>
<el-form-item :label="$t('file.linkType')" v-if="addForm.isLink" prop="linkType">
<el-radio-group v-model="addForm.isSymlink">
<el-radio :value="true">{{ $t('file.softLink') }}</el-radio>
<el-radio :value="false">{{ $t('file.hardLink') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="addForm.isLink" :label="$t('file.linkPath')" prop="linkPath">
<el-input v-model="addForm.linkPath">
<template #prepend>
<FileList @choose="getLinkPath"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-if="addForm.isDir" v-model="setRole" :label="$t('file.setRole')"></el-checkbox>
</el-form-item>
</el-form>
<FileRole v-if="setRole" :mode="'0755'" @get-mode="getMode" :key="open.toString()"></FileRole>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ref, reactive, computed } from 'vue';
import { File } from '@/api/interface/file';
import { FormInstance, FormRules } from 'element-plus';

63
frontend/src/views/host/file-management/decompress/index.vue
View File

@ -1,48 +1,34 @@
<template>
<el-drawer
v-model="open"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
size="40%"
>
<template #header>
<DrawerHeader :header="$t('file.deCompress')" :resource="name" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
ref="fileForm"
label-position="top"
:model="form"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('commons.table.name')">
<el-input v-model="name" disabled></el-input>
</el-form-item>
<el-form-item :label="$t('file.deCompressDst')" prop="dst">
<el-input v-model="form.dst">
<template #prepend>
<FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="name.includes('tar.gz')">
<el-input v-model="form.secret"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.deCompress')" :resource="name" :back="handleClose" size="normal">
<el-form
ref="fileForm"
label-position="top"
:model="form"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('commons.table.name')">
<el-input v-model="name" disabled></el-input>
</el-form-item>
<el-form-item :label="$t('file.deCompressDst')" prop="dst">
<el-input v-model="form.dst">
<template #prepend>
<FileList :path="form.dst" @choose="getLinkPath" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('setting.compressPassword')" prop="secret" v-if="name.includes('tar.gz')">
<el-input v-model="form.secret"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
@ -54,7 +40,6 @@ import { Rules } from '@/global/form-rules';
import { DeCompressFile } from '@/api/modules/files';
import { Mimetypes } from '@/global/mimetype';
import FileList from '@/components/file-list/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
interface CompressProps {

54
frontend/src/views/host/file-management/detail/index.vue
View File

@ -1,35 +1,28 @@
<template>
<el-drawer v-model="open" width="30%" :close-on-click-modal="false" :close-on-press-escape="false">
<template #header>
<DrawerHeader :header="$t('file.info')" :back="handleClose" />
</template>
<el-row>
<el-col>
<el-descriptions :column="1" border>
<el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.size')">
<span v-if="data.isDir">
<el-button type="primary" link small @click="getDirSize(data)" :loading="loading">
<span v-if="data.dirSize == undefined">
{{ $t('file.calculate') }}
</span>
<span v-else>{{ computeSize(data.dirSize) }}</span>
</el-button>
<DrawerPro v-model="open" :header="$t('file.info')" :back="handleClose" size="large">
<el-descriptions :column="1" border>
<el-descriptions-item :label="$t('file.fileName')">{{ data.name }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.type')">{{ data.type }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.path')">{{ data.path }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.size')">
<span v-if="data.isDir">
<el-button type="primary" link small @click="getDirSize(data)">
<span v-if="data.dirSize == undefined">
{{ $t('file.calculate') }}
</span>
<span v-else>{{ computeSize(data.size) }}</span>
</el-descriptions-item>
<el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.updatedAt')">
{{ dateFormatSimple(data.modTime) }}
</el-descriptions-item>
</el-descriptions>
</el-col>
</el-row>
</el-drawer>
<span v-else>{{ computeSize(data.dirSize) }}</span>
</el-button>
</span>
<span v-else>{{ computeSize(data.size) }}</span>
</el-descriptions-item>
<el-descriptions-item :label="$t('file.role')">{{ data.mode }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.user')">{{ data.user }}</el-descriptions-item>
<el-descriptions-item :label="$t('file.group')">{{ data.group }}</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.updatedAt')">
{{ dateFormatSimple(data.modTime) }}
</el-descriptions-item>
</el-descriptions>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -37,7 +30,6 @@ import { ComputeDirSize, GetFileContent } from '@/api/modules/files';
import { computeSize } from '@/utils/util';
import { ref } from 'vue';
import { dateFormatSimple } from '@/utils/util';
import DrawerHeader from '@/components/drawer-header/index.vue';
interface InfoProps {
path: string;

40
frontend/src/views/host/file-management/download/index.vue
View File

@ -1,31 +1,16 @@
<template>
<el-drawer
v-model="open"
:title="$t('file.download')"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="handleClose"
size="40%"
>
<template #header>
<DrawerHeader :header="$t('file.download')" :back="handleClose" />
</template>
<DrawerPro v-model="open" :header="$t('file.download')" :back="handleClose" size="normal">
<el-form ref="fileForm" label-position="top" :model="addForm" :rules="rules" v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('file.compressType')" prop="type">
<el-select v-model="addForm.type">
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name">
<template #append>{{ extension }}</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-form-item :label="$t('file.compressType')" prop="type">
<el-select v-model="addForm.type">
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name">
<template #append>{{ extension }}</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
@ -33,7 +18,7 @@
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
@ -43,7 +28,6 @@ import { computed, reactive, ref } from 'vue';
import { DownloadFile } from '@/api/modules/files';
import { File } from '@/api/interface/file';
import { Rules } from '@/global/form-rules';
import DrawerHeader from '@/components/drawer-header/index.vue';
interface DownloadProps {
paths: Array<string>;

21
frontend/src/views/host/file-management/favorite/index.vue
View File

@ -1,19 +1,12 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('file.favorite')" :back="handleClose" />
<DrawerPro v-model="open" :header="$t('file.favorite')" :back="handleClose" size="large">
<template #content>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column :label="$t('file.path')" show-overflow-tooltip prop="path"></el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</template>
<ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
<el-table-column :label="$t('file.path')" show-overflow-tooltip prop="path"></el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">

2
frontend/src/views/host/file-management/index.vue
View File

@ -138,7 +138,7 @@
</el-table>
</div>
</el-popover>
<el-button class="btn mr-5" @click="openRecycleBin">
<el-button class="btn mr-2.5" @click="openRecycleBin">
{{ $t('file.recycleBin') }}
</el-button>
<div class="w-96">

64
frontend/src/views/host/file-management/move/index.vue
View File

@ -1,41 +1,28 @@
<template>
<el-drawer
v-model="open"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="40%"
>
<template #header>
<DrawerHeader :header="title" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
@submit.prevent
ref="fileForm"
label-position="top"
:model="addForm"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.path')" prop="newPath">
<el-input v-model="addForm.newPath">
<template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
</el-input>
</el-form-item>
<div v-if="changeName">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name" :disabled="addForm.cover"></el-input>
</el-form-item>
<el-radio-group v-model="addForm.cover" @change="changeType">
<el-radio :value="true" size="large">{{ $t('file.replace') }}</el-radio>
<el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
</el-radio-group>
</div>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="title" :back="handleClose" size="normal">
<el-form
@submit.prevent
ref="fileForm"
label-position="top"
:model="addForm"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.path')" prop="newPath">
<el-input v-model="addForm.newPath">
<template #prepend><FileList @choose="getPath" :dir="true"></FileList></template>
</el-input>
</el-form-item>
<div v-if="changeName">
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name" :disabled="addForm.cover"></el-input>
</el-form-item>
<el-radio-group v-model="addForm.cover" @change="changeType">
<el-radio :value="true" size="large">{{ $t('file.replace') }}</el-radio>
<el-radio :value="false" size="large">{{ $t('file.rename') }}</el-radio>
</el-radio-group>
</div>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose(false)" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -44,7 +31,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -54,7 +41,6 @@ import i18n from '@/lang';
import { FormInstance, FormRules } from 'element-plus';
import { ref, reactive, computed } from 'vue';
import FileList from '@/components/file-list/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { getDateStr } from '@/utils/util';

113
frontend/src/views/host/file-management/recycle-bin/index.vue
View File

@ -1,63 +1,60 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('file.recycleBin')" :back="handleClose" />
</template>
<div class="flex space-x-4">
<el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
{{ $t('file.clearRecycleBin') }}
</el-button>
<el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
{{ $t('commons.button.delete') }}
</el-button>
<el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
{{ $t('file.reduce') }}
</el-button>
<el-form-item :label="$t('file.fileRecycleBin')">
<el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
</el-form-item>
</div>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
class="mt-5"
>
<el-table-column type="selection" fix />
<el-table-column prop="name" :label="$t('commons.table.name')" show-overflow-tooltip>
<template #default="{ row }">
<span class="text-ellipsis" type="primary">
<svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
<svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
{{ row.name }}
</span>
</template>
</el-table-column>
<DrawerPro v-model="open" :header="$t('file.recycleBin')" :back="handleClose" size="large">
<template #content>
<div class="flex space-x-4">
<el-button @click="clear" type="primary" :disabled="data == null || data.length == 0">
{{ $t('file.clearRecycleBin') }}
</el-button>
<el-button @click="patchDelete" :disabled="data == null || selects.length == 0">
{{ $t('commons.button.delete') }}
</el-button>
<el-button @click="patchReduce" :disabled="data == null || selects.length == 0">
{{ $t('file.reduce') }}
</el-button>
<el-form-item :label="$t('file.fileRecycleBin')">
<el-switch v-model="status" active-value="enable" inactive-value="disable" @change="changeStatus" />
</el-form-item>
</div>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
:data="data"
@search="search"
class="mt-5"
>
<el-table-column type="selection" fix />
<el-table-column prop="name" :label="$t('commons.table.name')" show-overflow-tooltip>
<template #default="{ row }">
<span class="text-ellipsis" type="primary">
<svg-icon v-if="row.isDir" className="table-icon" iconName="p-file-folder"></svg-icon>
<svg-icon v-else className="table-icon" iconName="p-file-normal"></svg-icon>
{{ row.name }}
</span>
</template>
</el-table-column>
<el-table-column :label="$t('file.sourcePath')" show-overflow-tooltip prop="sourcePath"></el-table-column>
<el-table-column :label="$t('file.size')" prop="size" max-width="50">
<template #default="{ row }">
{{ getFileSize(row.size) }}
</template>
</el-table-column>
<el-table-column
:label="$t('file.deleteTime')"
prop="deleteTime"
:formatter="dateFormat"
show-overflow-tooltip
></el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
<Delete ref="deleteRef" @close="search" />
<Reduce ref="reduceRef" @close="search" />
</el-drawer>
<el-table-column
:label="$t('file.sourcePath')"
show-overflow-tooltip
prop="sourcePath"
></el-table-column>
<el-table-column :label="$t('file.size')" prop="size" max-width="50">
<template #default="{ row }">
{{ getFileSize(row.size) }}
</template>
</el-table-column>
<el-table-column
:label="$t('file.deleteTime')"
prop="deleteTime"
:formatter="dateFormat"
show-overflow-tooltip
></el-table-column>
<fu-table-operations :buttons="buttons" :label="$t('commons.table.operate')" fix />
</ComplexTable>
<Delete ref="deleteRef" @close="search" />
<Reduce ref="reduceRef" @close="search" />
</template>
</DrawerPro>
</template>
<script lang="ts" setup>

42
frontend/src/views/host/file-management/rename/index.vue
View File

@ -1,34 +1,27 @@
<template>
<el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
<template #header>
<DrawerHeader :header="$t('file.rename')" :resource="oldName" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.path')" prop="path">
<el-input v-model="addForm.path" disabled />
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="newName">
<el-input v-model.trim="addForm.newName" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.rename')" :resource="oldName" :back="handleClose" size="normal">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.path')" prop="path">
<el-input v-model="addForm.path" disabled />
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="newName">
<el-input v-model.trim="addForm.newName" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="submit(fileForm)">{{ $t('commons.button.confirm') }}</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -39,7 +32,6 @@ import { reactive, ref } from 'vue';
import { File } from '@/api/interface/file';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import DrawerHeader from '@/components/drawer-header/index.vue';
interface RenameProps {
path: string;

148
frontend/src/views/host/file-management/upload/index.vue
View File

@ -1,82 +1,87 @@
<template>
<el-drawer
v-model="open"
:before-close="handleClose"
size="40%"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header>
<DrawerHeader :header="$t('file.upload')" :back="handleClose" />
</template>
<div class="button-container">
<div>
<el-button type="primary" @click="upload('file')">
{{ $t('file.upload') }}{{ $t('file.file') }}
</el-button>
<el-button type="primary" @click="upload('dir')">{{ $t('file.upload') }}{{ $t('file.dir') }}</el-button>
<DrawerPro v-model="open" :header="$t('file.upload')" :back="handleClose" size="normal">
<template #content>
<div class="button-container">
<div>
<el-button type="primary" @click="upload('file')">
{{ $t('file.upload') }}{{ $t('file.file') }}
</el-button>
<el-button type="primary" @click="upload('dir')">
{{ $t('file.upload') }}{{ $t('file.dir') }}
</el-button>
</div>
<el-button @click="clearFiles">{{ $t('file.clearList') }}</el-button>
</div>
<el-button @click="clearFiles">{{ $t('file.clearList') }}</el-button>
</div>
<div>
<div class="el-upload-dragger" @dragover="handleDragover" @drop="handleDrop" @dragleave="handleDragleave">
<div class="flex items-center justify-center h-52">
<div>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('file.dropHelper') }}
<div>
<div
class="el-upload-dragger"
@dragover="handleDragover"
@drop="handleDrop"
@dragleave="handleDragleave"
>
<div class="flex items-center justify-center h-52">
<div>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
{{ $t('file.dropHelper') }}
</div>
</div>
</div>
</div>
</div>
</div>
<el-upload
action="#"
:auto-upload="false"
ref="uploadRef"
:on-change="fileOnChange"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:show-file-list="false"
multiple
v-model:file-list="uploaderFiles"
:limit="1000"
>
<template #tip>
<el-text>{{ uploadHelper }}</el-text>
<el-progress v-if="loading" text-inside :stroke-width="20" :percentage="uploadPercent"></el-progress>
</template>
</el-upload>
<div>
<p
v-for="(item, index) in uploaderFiles"
:key="index"
class="file-item"
@mouseover="hoverIndex = index"
@mouseout="hoverIndex = null"
<el-upload
action="#"
:auto-upload="false"
ref="uploadRef"
:on-change="fileOnChange"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:show-file-list="false"
multiple
v-model:file-list="uploaderFiles"
:limit="1000"
>
<el-icon class="file-icon"><Document /></el-icon>
<span v-if="item.raw.webkitRelativePath != ''">{{ item.raw.webkitRelativePath }}</span>
<span v-else>{{ item.name }}</span>
<span v-if="item.status === 'success'" class="success-icon">
<el-icon><Select /></el-icon>
</span>
<span v-else>
<el-button
class="delete-button"
type="primary"
link
@click="removeFile(index)"
:disabled="loading"
:icon="Close"
></el-button>
</span>
</p>
</div>
<template #tip>
<el-text>{{ uploadHelper }}</el-text>
<el-progress
v-if="loading"
text-inside
:stroke-width="20"
:percentage="uploadPercent"
></el-progress>
</template>
</el-upload>
<div>
<p
v-for="(item, index) in uploaderFiles"
:key="index"
class="file-item"
@mouseover="hoverIndex = index"
@mouseout="hoverIndex = null"
>
<el-icon class="file-icon"><Document /></el-icon>
<span v-if="item.raw.webkitRelativePath != ''">{{ item.raw.webkitRelativePath }}</span>
<span v-else>{{ item.name }}</span>
<span v-if="item.status === 'success'" class="success-icon">
<el-icon><Select /></el-icon>
</span>
<span v-else>
<el-button
class="delete-button"
type="primary"
link
@click="removeFile(index)"
:disabled="loading"
:icon="Close"
></el-button>
</span>
</p>
</div>
</template>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -85,7 +90,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script setup lang="ts">
@ -93,7 +98,6 @@ import { nextTick, reactive, ref } from 'vue';
import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { ChunkUploadFileData, UploadFileData } from '@/api/modules/files';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message';
import { Close, Document, UploadFilled } from '@element-plus/icons-vue';
import { TimeoutEnum } from '@/enums/http-enum';

71
frontend/src/views/host/file-management/wget/index.vue
View File

@ -1,45 +1,31 @@
<template>
<el-drawer
v-model="open"
:destroy-on-close="true"
:before-close="handleClose"
size="50%"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<template #header>
<DrawerHeader :header="$t('file.download')" :back="handleClose" />
</template>
<el-row>
<el-col :span="22" :offset="1">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.downloadUrl')" prop="url">
<el-input v-model="addForm.url" @input="getFileName" />
</el-form-item>
<el-form-item :label="$t('file.path')" prop="path">
<el-input v-model="addForm.path">
<template #prepend><FileList :path="addForm.path" @choose="getPath"></FileList></template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="addForm.ignoreCertificate">
{{ $t('file.ignoreCertificate') }}
</el-checkbox>
<span class="input-help">{{ $t('file.ignoreCertificateHelper') }}</span>
</el-form-item>
</el-form>
</el-col>
</el-row>
<DrawerPro v-model="open" :header="$t('file.download')" :back="handleClose" size="large">
<el-form
ref="fileForm"
label-position="top"
:model="addForm"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('file.downloadUrl')" prop="url">
<el-input v-model="addForm.url" @input="getFileName" />
</el-form-item>
<el-form-item :label="$t('file.path')" prop="path">
<el-input v-model="addForm.path">
<template #prepend><FileList :path="addForm.path" @choose="getPath"></FileList></template>
</el-input>
</el-form-item>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox v-model="addForm.ignoreCertificate">
{{ $t('file.ignoreCertificate') }}
</el-checkbox>
<span class="input-help">{{ $t('file.ignoreCertificateHelper') }}</span>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose()" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -48,7 +34,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -58,7 +44,6 @@ import i18n from '@/lang';
import { FormInstance, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import FileList from '@/components/file-list/index.vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
interface WgetProps {

61
frontend/src/views/host/firewall/forward/operate/index.vue
View File

@ -1,44 +1,29 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title" :back="handleClose" />
</template>
<div v-loading="loading">
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-select style="width: 100%" v-model="dialogData.rowData!.protocol">
<el-option value="tcp" label="tcp" />
<el-option value="udp" label="udp" />
<el-option value="tcp/udp" label="tcp/udp" />
</el-select>
</el-form-item>
<DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-select class="w-full" v-model="dialogData.rowData!.protocol">
<el-option value="tcp" label="tcp" />
<el-option value="udp" label="udp" />
<el-option value="tcp/udp" label="tcp/udp" />
</el-select>
</el-form-item>
<el-form-item :label="$t('firewall.sourcePort')" prop="port">
<el-input clearable v-model.trim="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('firewall.sourcePort')" prop="port">
<el-input clearable v-model.trim="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('firewall.targetIP')" prop="targetIP">
<el-input v-model.trim="dialogData.rowData!.targetIP" />
<span class="input-help">{{ $t('firewall.forwardHelper1') }}</span>
<span class="input-help">{{ $t('firewall.forwardHelper2') }}</span>
<span class="input-help">{{ $t('firewall.forwardHelper3') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.targetIP')" prop="targetIP">
<el-input v-model.trim="dialogData.rowData!.targetIP" />
<span class="input-help">{{ $t('firewall.forwardHelper1') }}</span>
<span class="input-help">{{ $t('firewall.forwardHelper2') }}</span>
<span class="input-help">{{ $t('firewall.forwardHelper3') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.targetPort')" prop="targetPort">
<el-input clearable v-model.trim="dialogData.rowData!.targetPort" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-form-item :label="$t('firewall.targetPort')" prop="targetPort">
<el-input clearable v-model.trim="dialogData.rowData!.targetPort" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@ -47,7 +32,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>

71
frontend/src/views/host/firewall/ip/operate/index.vue
View File

@ -1,42 +1,34 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title" :back="handleClose" />
</template>
<div v-loading="loading">
<el-form ref="formRef" label-position="top" @submit.prevent :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('firewall.address')" prop="address">
<el-input
:disabled="dialogData.title === 'edit'"
:rows="3"
type="textarea"
clearable
v-model.trim="dialogData.rowData!.address"
/>
<span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
<span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.strategy')" prop="strategy">
<el-radio-group v-model="dialogData.rowData!.strategy">
<el-radio value="accept">{{ $t('firewall.allow') }}</el-radio>
<el-radio value="drop">{{ $t('firewall.deny') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
<el-form
ref="formRef"
label-position="top"
@submit.prevent
:model="dialogData.rowData"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('firewall.address')" prop="address">
<el-input
:disabled="dialogData.title === 'edit'"
:rows="3"
type="textarea"
clearable
v-model.trim="dialogData.rowData!.address"
/>
<span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
<span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.strategy')" prop="strategy">
<el-radio-group v-model="dialogData.rowData!.strategy">
<el-radio value="accept">{{ $t('firewall.allow') }}</el-radio>
<el-radio value="drop">{{ $t('firewall.deny') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@ -45,14 +37,13 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { Host } from '@/api/interface/host';
import { operateIPRule, updateAddrRule } from '@/api/modules/host';

100
frontend/src/views/host/firewall/port/operate/index.vue
View File

@ -1,66 +1,47 @@
<template>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title" :back="handleClose" />
</template>
<div v-loading="loading">
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-select style="width: 100%" v-model="dialogData.rowData!.protocol">
<el-option value="tcp" label="tcp" />
<el-option value="udp" label="udp" />
<el-option value="tcp/udp" label="tcp/udp" />
</el-select>
</el-form-item>
<DrawerPro v-model="drawerVisible" :header="title" :back="handleClose" size="large">
<el-form ref="formRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
<el-form-item :label="$t('commons.table.protocol')" prop="protocol">
<el-select class="w-full" v-model="dialogData.rowData!.protocol">
<el-option value="tcp" label="tcp" />
<el-option value="udp" label="udp" />
<el-option value="tcp/udp" label="tcp/udp" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input
:disabled="dialogData.title === 'edit'"
clearable
v-model.trim="dialogData.rowData!.port"
/>
<span class="input-help">{{ $t('firewall.portHelper1') }}</span>
<span class="input-help">{{ $t('firewall.portHelper2') }}</span>
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="port">
<el-input :disabled="dialogData.title === 'edit'" clearable v-model.trim="dialogData.rowData!.port" />
<span class="input-help">{{ $t('firewall.portHelper1') }}</span>
<span class="input-help">{{ $t('firewall.portHelper2') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.source')" prop="source">
<el-radio-group v-model="dialogData.rowData!.source">
<el-radio value="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
<el-radio value="address">{{ $t('firewall.address') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('firewall.source')" prop="source">
<el-radio-group v-model="dialogData.rowData!.source">
<el-radio value="anyWhere">{{ $t('firewall.anyWhere') }}</el-radio>
<el-radio value="address">{{ $t('firewall.address') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('firewall.address')"
v-if="dialogData.rowData!.source === 'address'"
prop="address"
>
<el-input v-model.trim="dialogData.rowData!.address" />
<span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
<span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
</el-form-item>
<el-form-item
:label="$t('firewall.address')"
v-if="dialogData.rowData!.source === 'address'"
prop="address"
>
<el-input v-model.trim="dialogData.rowData!.address" />
<span class="input-help">{{ $t('firewall.addressHelper1') }}</span>
<span class="input-help">{{ $t('firewall.addressHelper2') }}</span>
</el-form-item>
<el-form-item :label="$t('firewall.strategy')" prop="strategy">
<el-radio-group v-model="dialogData.rowData!.strategy">
<el-radio value="accept">{{ $t('firewall.accept') }}</el-radio>
<el-radio value="drop">{{ $t('firewall.drop') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-form-item :label="$t('firewall.strategy')" prop="strategy">
<el-radio-group v-model="dialogData.rowData!.strategy">
<el-radio value="accept">{{ $t('firewall.accept') }}</el-radio>
<el-radio value="drop">{{ $t('firewall.drop') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model.trim="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@ -69,7 +50,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -77,7 +58,6 @@ import { reactive, ref } from 'vue';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgError, MsgSuccess } from '@/utils/message';
import { Host } from '@/api/interface/host';
import { operatePortRule, updatePortRule } from '@/api/modules/host';

51
frontend/src/views/host/monitor/setting/days/index.vue
View File

@ -1,39 +1,19 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('monitor.storeDays')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item
:label="$t('monitor.storeDays')"
:rules="[Rules.integerNumber]"
prop="monitorStoreDays"
>
<el-input clearable v-model.number="form.monitorStoreDays" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('monitor.storeDays')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-form-item :label="$t('monitor.storeDays')" :rules="[Rules.integerNumber]" prop="monitorStoreDays">
<el-input clearable v-model.number="form.monitorStoreDays" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
@ -42,7 +22,6 @@ import { MsgSuccess } from '@/utils/message';
import { FormInstance } from 'element-plus';
import { Rules } from '@/global/form-rules';
import { updateSetting } from '@/api/modules/setting';
import DrawerHeader from '@/components/drawer-header/index.vue';
const emit = defineEmits<{ (e: 'search'): void }>();

55
frontend/src/views/host/monitor/setting/interval/index.vue
View File

@ -1,39 +1,23 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('monitor.interval')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item
:label="$t('monitor.interval')"
:rules="[Rules.integerNumber, checkNumberRange(1, 60)]"
prop="monitorInterval"
>
<el-input clearable v-model.number="form.monitorInterval" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('monitor.interval')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-form-item
:label="$t('monitor.interval')"
:rules="[Rules.integerNumber, checkNumberRange(1, 60)]"
prop="monitorInterval"
>
<el-input clearable v-model.number="form.monitorInterval" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
@ -42,7 +26,6 @@ import { MsgSuccess } from '@/utils/message';
import { FormInstance } from 'element-plus';
import { Rules, checkNumberRange } from '@/global/form-rules';
import { updateSetting } from '@/api/modules/setting';
import DrawerHeader from '@/components/drawer-header/index.vue';
const emit = defineEmits<{ (e: 'search'): void }>();

176
frontend/src/views/host/process/process/detail/index.vue
View File

@ -1,100 +1,94 @@
<template>
<el-drawer v-model="open" size="40%" :close-on-click-modal="false" :close-on-press-escape="false">
<template #header>
<DrawerHeader :header="$t('app.detail')" :back="handleClose" :resource="resourceName" />
<DrawerPro v-model="open" :header="$t('app.detail')" :resource="resourceName" :back="handleClose" size="large">
<template #content>
<el-tabs v-model="activeName" type="card">
<el-tab-pane :label="$t('process.basic')" name="basic">
<el-descriptions :column="2" border>
<el-descriptions-item :label="$t('commons.table.name')" min-width="100px">
{{ data.name }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.status')">{{ data.status }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.pid')">{{ data.PID }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.ppid')">{{ data.PPID }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.numThreads')">
{{ data.numThreads }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.numConnections')">
{{ data.numConnections }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.diskRead')">
{{ data.diskRead }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.diskWrite')">
{{ data.diskWrite }}
</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.user')">
{{ data.username }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.startTime')">
{{ data.startTime }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.cmdLine')">
{{ data.cmdLine }}
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane :label="$t('process.mem')" name="mem">
<el-descriptions :column="2" border>
<el-descriptions-item :label="'rss'">{{ data.rss }}</el-descriptions-item>
<el-descriptions-item :label="'swap'">{{ data.swap }}</el-descriptions-item>
<el-descriptions-item :label="'vms'">{{ data.vms }}</el-descriptions-item>
<el-descriptions-item :label="'hwm'">{{ data.hwm }}</el-descriptions-item>
<el-descriptions-item :label="'data'">{{ data.data }}</el-descriptions-item>
<el-descriptions-item :label="'stack'">{{ data.stack }}</el-descriptions-item>
<el-descriptions-item :label="'locked'">{{ data.locked }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane :label="$t('process.openFiles')" name="openFiles">
<el-table :data="data.openFiles" border style="width: 100%">
<el-table-column prop="path" :label="$t('process.file')" />
<el-table-column prop="fd" label="fd" width="100px" />
</el-table>
</el-tab-pane>
<el-tab-pane :label="$t('process.env')" name="env">
<codemirror
:autofocus="true"
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 200px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="envStr"
:disabled="true"
/>
</el-tab-pane>
<el-tab-pane :label="$t('process.net')" name="net">
<el-table :data="data.connects" border style="width: 100%">
<el-table-column prop="localaddr" :label="$t('process.laddr')">
<template #default="{ row }">
<span>{{ row.localaddr.ip }}</span>
<span v-if="row.localaddr.port > 0">:{{ row.localaddr.port }}</span>
</template>
</el-table-column>
<el-table-column prop="remoteaddr" :label="$t('process.raddr')">
<template #default="{ row }">
<span>{{ row.remoteaddr.ip }}</span>
<span v-if="row.remoteaddr.port > 0">:{{ row.remoteaddr.port }}</span>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('app.status')" />
</el-table>
</el-tab-pane>
</el-tabs>
</template>
<el-row>
<el-col>
<el-tabs v-model="activeName" type="card">
<el-tab-pane :label="$t('process.basic')" name="basic">
<el-descriptions :column="2" border>
<el-descriptions-item :label="$t('commons.table.name')" min-width="100px">
{{ data.name }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.status')">{{ data.status }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.pid')">{{ data.PID }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.ppid')">{{ data.PPID }}</el-descriptions-item>
<el-descriptions-item :label="$t('process.numThreads')">
{{ data.numThreads }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.numConnections')">
{{ data.numConnections }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.diskRead')">
{{ data.diskRead }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.diskWrite')">
{{ data.diskWrite }}
</el-descriptions-item>
<el-descriptions-item :label="$t('commons.table.user')">
{{ data.username }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.startTime')">
{{ data.startTime }}
</el-descriptions-item>
<el-descriptions-item :label="$t('process.cmdLine')">
{{ data.cmdLine }}
</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane :label="$t('process.mem')" name="mem">
<el-descriptions :column="2" border>
<el-descriptions-item :label="'rss'">{{ data.rss }}</el-descriptions-item>
<el-descriptions-item :label="'swap'">{{ data.swap }}</el-descriptions-item>
<el-descriptions-item :label="'vms'">{{ data.vms }}</el-descriptions-item>
<el-descriptions-item :label="'hwm'">{{ data.hwm }}</el-descriptions-item>
<el-descriptions-item :label="'data'">{{ data.data }}</el-descriptions-item>
<el-descriptions-item :label="'stack'">{{ data.stack }}</el-descriptions-item>
<el-descriptions-item :label="'locked'">{{ data.locked }}</el-descriptions-item>
</el-descriptions>
</el-tab-pane>
<el-tab-pane :label="$t('process.openFiles')" name="openFiles">
<el-table :data="data.openFiles" border style="width: 100%">
<el-table-column prop="path" :label="$t('process.file')" />
<el-table-column prop="fd" label="fd" width="100px" />
</el-table>
</el-tab-pane>
<el-tab-pane :label="$t('process.env')" name="env">
<codemirror
:autofocus="true"
:indent-with-tab="true"
:tabSize="4"
style="height: calc(100vh - 200px)"
:lineWrapping="true"
:matchBrackets="true"
theme="cobalt"
:styleActiveLine="true"
:extensions="extensions"
v-model="envStr"
:disabled="true"
/>
</el-tab-pane>
<el-tab-pane :label="$t('process.net')" name="net">
<el-table :data="data.connects" border style="width: 100%">
<el-table-column prop="localaddr" :label="$t('process.laddr')">
<template #default="{ row }">
<span>{{ row.localaddr.ip }}</span>
<span v-if="row.localaddr.port > 0">:{{ row.localaddr.port }}</span>
</template>
</el-table-column>
<el-table-column prop="remoteaddr" :label="$t('process.raddr')">
<template #default="{ row }">
<span>{{ row.remoteaddr.ip }}</span>
<span v-if="row.remoteaddr.port > 0">:{{ row.remoteaddr.port }}</span>
</template>
</el-table-column>
<el-table-column prop="status" :label="$t('app.status')" />
</el-table>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</el-drawer>
</DrawerPro>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Codemirror } from 'vue-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';

98
frontend/src/views/host/ssh/ssh/address/index.vue
View File

@ -1,64 +1,41 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('ssh.listenAddress')" :back="handleClose" />
</template>
<el-form
ref="formRef"
label-position="top"
:rules="rules"
:model="form"
@submit.prevent
v-loading="loading"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-alert class="common-prompt" :closable="false" type="error">
<template #default>
<span>
{{ $t('ssh.listenHelper', [form.port]) }}
</span>
</template>
</el-alert>
<el-form-item label="IPv4" prop="listenAddressV4">
<el-checkbox
v-model="form.ipv4All"
@change="form.listenAddressV4 = form.ipv4All ? '0.0.0.0' : form.listenAddressV4"
>
{{ $t('setting.bindAll') }}
</el-checkbox>
<el-input :disabled="form.ipv4All" clearable v-model="form.listenAddressV4"></el-input>
</el-form-item>
<el-form-item label="IPv6" prop="listenAddressV6">
<el-checkbox
v-model="form.ipv6All"
@change="form.listenAddressV6 = form.ipv6All ? '::' : form.listenAddressV6"
>
{{ $t('setting.bindAll') }}
</el-checkbox>
<el-input :disabled="form.ipv6All" clearable v-model="form.listenAddressV6"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('ssh.listenAddress')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :rules="rules" :model="form" @submit.prevent v-loading="loading">
<el-alert class="common-prompt" :closable="false" type="error">
<template #default>
<span>
{{ $t('ssh.listenHelper', [form.port]) }}
</span>
</template>
</el-alert>
<el-form-item label="IPv4" prop="listenAddressV4">
<el-checkbox
v-model="form.ipv4All"
@change="form.listenAddressV4 = form.ipv4All ? '0.0.0.0' : form.listenAddressV4"
>
{{ $t('setting.bindAll') }}
</el-checkbox>
<el-input :disabled="form.ipv4All" clearable v-model="form.listenAddressV4"></el-input>
</el-form-item>
<el-form-item label="IPv6" prop="listenAddressV6">
<el-checkbox
v-model="form.ipv6All"
@change="form.listenAddressV6 = form.ipv6All ? '::' : form.listenAddressV6"
>
{{ $t('setting.bindAll') }}
</el-checkbox>
<el-input :disabled="form.ipv6All" clearable v-model="form.listenAddressV6"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
@ -66,7 +43,6 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ElMessageBox, FormInstance } from 'element-plus';
import { updateSSH } from '@/api/modules/host';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { checkIp, checkIpV6 } from '@/utils/util';
const emit = defineEmits<{ (e: 'search'): void }>();

47
frontend/src/views/host/ssh/ssh/port/index.vue
View File

@ -1,42 +1,25 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('commons.table.port')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.port')" prop="port" :rules="Rules.port">
<el-input clearable v-model.number="form.port" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('commons.table.port')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-form-item :label="$t('commons.table.port')" prop="port" :rules="Rules.port">
<el-input clearable v-model.number="form.port" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ElMessageBox, FormInstance } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { Rules } from '@/global/form-rules';
import { updateSSH } from '@/api/modules/host';

103
frontend/src/views/host/ssh/ssh/pubkey/index.vue
View File

@ -1,65 +1,49 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('ssh.pubkey')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :rules="rules" :model="form" v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('ssh.encryptionMode')" prop="encryptionMode">
<el-select v-model="form.encryptionMode" @change="onLoadSecret">
<el-option label="ED25519" value="ed25519" />
<el-option label="ECDSA" value="ecdsa" />
<el-option label="RSA" value="rsa" />
<el-option label="DSA" value="dsa" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input v-model="form.password" type="password" show-password>
<template #append>
<el-button @click="onCopy(form.password)">
{{ $t('commons.button.copy') }}
</el-button>
<el-divider direction="vertical" />
<el-button @click="random">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
<DrawerPro v-model="drawerVisible" :header="$t('ssh.pubkey')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :rules="rules" :model="form" v-loading="loading">
<el-form-item :label="$t('ssh.encryptionMode')" prop="encryptionMode">
<el-select v-model="form.encryptionMode" @change="onLoadSecret">
<el-option label="ED25519" value="ed25519" />
<el-option label="ECDSA" value="ecdsa" />
<el-option label="RSA" value="rsa" />
<el-option label="DSA" value="dsa" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="password">
<el-input v-model="form.password" type="password" show-password>
<template #append>
<el-button @click="onCopy(form.password)">
{{ $t('commons.button.copy') }}
</el-button>
<el-divider direction="vertical" />
<el-button @click="random">
{{ $t('commons.button.random') }}
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item :label="$t('ssh.key')" prop="primaryKey" v-if="form.encryptionMode">
<el-input v-model="form.primaryKey" :rows="5" type="textarea" />
<div v-if="form.primaryKey">
<el-button icon="CopyDocument" class="marginTop" @click="onCopy(form.primaryKey)">
{{ $t('file.copy') }}
</el-button>
<el-button icon="Download" class="marginTop" @click="onDownload">
{{ $t('commons.button.download') }}
</el-button>
</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="onGenerate(formRef)" type="primary">
{{ $t('ssh.generate') }}
<el-form-item :label="$t('ssh.key')" prop="primaryKey" v-if="form.encryptionMode">
<el-input v-model="form.primaryKey" :rows="5" type="textarea" />
<div v-if="form.primaryKey">
<el-button icon="CopyDocument" class="marginTop" @click="onCopy(form.primaryKey)">
{{ $t('file.copy') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<el-button icon="Download" class="marginTop" @click="onDownload">
{{ $t('commons.button.download') }}
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="onGenerate(formRef)" type="primary">
{{ $t('ssh.generate') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { generateSecret, loadSecret } from '@/api/modules/host';
@ -68,7 +52,6 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { copyText, dateFormatForName, getRandomStr } from '@/utils/util';
import { FormInstance } from 'element-plus';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { reactive, ref } from 'vue';
const loading = ref();

57
frontend/src/views/host/ssh/ssh/root/index.vue
View File

@ -1,40 +1,24 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
@close="handleClose"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('ssh.permitRootLogin')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLogin">
<el-select v-model="form.permitRootLogin" style="width: 100%">
<el-option :label="$t('ssh.rootHelper1')" value="yes" />
<el-option :label="$t('ssh.rootHelper2')" value="no" />
<el-option :label="$t('ssh.rootHelper3')" value="without-password" />
<el-option :label="$t('ssh.rootHelper4')" value="forced-commands-only" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('ssh.permitRootLogin')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-form-item :label="$t('ssh.permitRootLogin')" prop="permitRootLogin">
<el-select v-model="form.permitRootLogin" style="width: 100%">
<el-option :label="$t('ssh.rootHelper1')" value="yes" />
<el-option :label="$t('ssh.rootHelper2')" value="no" />
<el-option :label="$t('ssh.rootHelper3')" value="without-password" />
<el-option :label="$t('ssh.rootHelper4')" value="forced-commands-only" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
@ -42,7 +26,6 @@ import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';
import { ElMessageBox, FormInstance } from 'element-plus';
import { updateSSH } from '@/api/modules/host';
import DrawerHeader from '@/components/drawer-header/index.vue';
const emit = defineEmits<{ (e: 'search'): void }>();

66
frontend/src/views/host/terminal/command/index.vue
View File

@ -61,45 +61,34 @@
</ComplexTable>
</template>
</LayoutContent>
<el-drawer
<DrawerPro
v-model="cmdVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
:header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
:back="handleClose"
size="small"
>
<template #header>
<DrawerHeader
:header="$t('commons.button.' + operate) + $t('terminal.quickCommand')"
:back="handleClose"
/>
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form
@submit.prevent
ref="commandInfoRef"
label-width="100px"
label-position="top"
:model="commandInfo"
:rules="rules"
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model="commandInfo.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.group')" prop="name">
<el-select filterable v-model="commandInfo.groupID" clearable style="width: 100%">
<div v-for="item in groupList" :key="item.id">
<el-option :label="item.name" :value="item.id" />
</div>
</el-select>
</el-form-item>
<el-form-item :label="$t('terminal.command')" prop="command">
<el-input type="textarea" clearable v-model="commandInfo.command" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-form
@submit.prevent
ref="commandInfoRef"
label-width="100px"
label-position="top"
:model="commandInfo"
:rules="rules"
>
<el-form-item :label="$t('commons.table.name')" prop="name">
<el-input clearable v-model="commandInfo.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.group')" prop="name">
<el-select filterable v-model="commandInfo.groupID" clearable style="width: 100%">
<div v-for="item in groupList" :key="item.id">
<el-option :label="item.name" :value="item.id" />
</div>
</el-select>
</el-form-item>
<el-form-item :label="$t('terminal.command')" prop="command">
<el-input type="textarea" clearable v-model="commandInfo.command" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cmdVisible = false">{{ $t('commons.button.cancel') }}</el-button>
@ -108,7 +97,7 @@
</el-button>
</span>
</template>
</el-drawer>
</DrawerPro>
<OpDialog ref="opRef" @search="search" />
<GroupDialog @search="loadGroups" ref="dialogGroupRef" />
@ -125,7 +114,6 @@ import { reactive, ref } from 'vue';
import type { ElForm } from 'element-plus';
import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { MsgSuccess } from '@/utils/message';
import { GetGroupList } from '@/api/modules/group';

59
frontend/src/views/host/terminal/host/change-group/index.vue
View File

@ -1,38 +1,30 @@
<template>
<div v-loading="loading">
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
<DrawerPro v-model="drawerVisible" :header="$t('terminal.groupChange')" :back="handleClose" size="small">
<el-form
@submit.prevent
ref="hostInfoRef"
label-position="top"
:model="dialogData"
:rules="rules"
v-loading="loading"
>
<template #header>
<DrawerHeader :header="$t('terminal.groupChange')" :back="handleClose" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form @submit.prevent ref="hostInfoRef" label-position="top" :model="dialogData" :rules="rules">
<el-form-item :label="$t('commons.table.group')" prop="group">
<el-select filterable v-model="dialogData.groupID" clearable style="width: 100%">
<div v-for="item in groupList" :key="item.id">
<el-option :label="item.name" :value="item.id" />
</div>
</el-select>
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit(hostInfoRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<el-form-item :label="$t('commons.table.group')" prop="group">
<el-select filterable v-model="dialogData.groupID" clearable class="w-full">
<div v-for="item in groupList" :key="item.id">
<el-option :label="item.name" :value="item.id" />
</div>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button type="primary" @click="onSubmit(hostInfoRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -41,7 +33,6 @@ import type { ElForm } from 'element-plus';
import { Rules } from '@/global/form-rules';
import { editHostGroup } from '@/api/modules/host';
import { GetGroupList } from '@/api/modules/group';
import DrawerHeader from '@/components/drawer-header/index.vue';
import i18n from '@/lang';
import { MsgSuccess } from '@/utils/message';

182
frontend/src/views/host/terminal/host/operate/index.vue
View File

@ -1,109 +1,80 @@
<template>
<div v-loading="loading">
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('terminal.host')" :back="handleClose" />
</template>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form ref="hostInfoRef" label-position="top" :model="dialogData.rowData" :rules="rules">
<el-form-item :label="$t('terminal.ip')" prop="addr">
<el-tag v-if="dialogData.rowData!.addr === '127.0.0.1' && dialogData.title === 'edit'">
{{ dialogData.rowData!.addr }}
</el-tag>
<el-input @change="isOK = false" v-else clearable v-model.trim="dialogData.rowData!.addr" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="user">
<el-input @change="isOK = false" clearable v-model="dialogData.rowData!.user" />
</el-form-item>
<el-form-item :label="$t('terminal.authMode')" prop="authMode">
<el-radio-group @change="isOK = false" v-model="dialogData.rowData!.authMode">
<el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
<el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
v-if="dialogData.rowData!.authMode === 'password'"
prop="password"
>
<el-input
@change="isOK = false"
clearable
show-password
type="password"
v-model="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item
:label="$t('terminal.key')"
v-if="dialogData.rowData!.authMode === 'key'"
prop="privateKey"
>
<el-input
@change="isOK = false"
clearable
type="textarea"
v-model="dialogData.rowData!.privateKey"
/>
</el-form-item>
<el-form-item
:label="$t('terminal.keyPassword')"
v-if="dialogData.rowData!.authMode === 'key'"
prop="passPhrase"
>
<el-input
@change="isOK = false"
type="password"
show-password
clearable
v-model="dialogData.rowData!.passPhrase"
/>
</el-form-item>
<el-checkbox clearable v-model.number="dialogData.rowData!.rememberPassword">
{{ $t('terminal.rememberPassword') }}
</el-checkbox>
<el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.table.group')" prop="groupID">
<el-select filterable v-model="dialogData.rowData!.groupID" clearable style="width: 100%">
<el-option
v-for="item in groupList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.title')" prop="name">
<el-input clearable v-model="dialogData.rowData!.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable type="textarea" v-model="dialogData.rowData!.description" />
</el-form-item>
</el-form>
</el-col>
</el-row>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="submitAddHost(hostInfoRef, 'testconn')">
{{ $t('terminal.testConn') }}
</el-button>
<el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostInfoRef, dialogData.title)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('terminal.host')" :back="handleClose" size="large">
<el-form ref="hostInfoRef" label-position="top" :model="dialogData.rowData" :rules="rules" v-loading="loading">
<el-form-item :label="$t('terminal.ip')" prop="addr">
<el-tag v-if="dialogData.rowData!.addr === '127.0.0.1' && dialogData.title === 'edit'">
{{ dialogData.rowData!.addr }}
</el-tag>
<el-input @change="isOK = false" v-else clearable v-model.trim="dialogData.rowData!.addr" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="user">
<el-input @change="isOK = false" clearable v-model="dialogData.rowData!.user" />
</el-form-item>
<el-form-item :label="$t('terminal.authMode')" prop="authMode">
<el-radio-group @change="isOK = false" v-model="dialogData.rowData!.authMode">
<el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
<el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
v-if="dialogData.rowData!.authMode === 'password'"
prop="password"
>
<el-input
@change="isOK = false"
clearable
show-password
type="password"
v-model="dialogData.rowData!.password"
/>
</el-form-item>
<el-form-item :label="$t('terminal.key')" v-if="dialogData.rowData!.authMode === 'key'" prop="privateKey">
<el-input @change="isOK = false" clearable type="textarea" v-model="dialogData.rowData!.privateKey" />
</el-form-item>
<el-form-item
:label="$t('terminal.keyPassword')"
v-if="dialogData.rowData!.authMode === 'key'"
prop="passPhrase"
>
<el-input
@change="isOK = false"
type="password"
show-password
clearable
v-model="dialogData.rowData!.passPhrase"
/>
</el-form-item>
<el-checkbox clearable v-model.number="dialogData.rowData!.rememberPassword">
{{ $t('terminal.rememberPassword') }}
</el-checkbox>
<el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="dialogData.rowData!.port" />
</el-form-item>
<el-form-item :label="$t('commons.table.group')" prop="groupID">
<el-select filterable v-model="dialogData.rowData!.groupID" clearable style="width: 100%">
<el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('commons.table.title')" prop="name">
<el-input clearable v-model="dialogData.rowData!.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable type="textarea" v-model="dialogData.rowData!.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="submitAddHost(hostInfoRef, 'testconn')">
{{ $t('terminal.testConn') }}
</el-button>
<el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostInfoRef, dialogData.title)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -111,7 +82,6 @@ import { ref, reactive } from 'vue';
import type { ElForm } from 'element-plus';
import { Rules } from '@/global/form-rules';
import { addHost, editHost, testByInfo } from '@/api/modules/host';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { GetGroupList } from '@/api/modules/group';
import i18n from '@/lang';
import { MsgError, MsgSuccess } from '@/utils/message';

156
frontend/src/views/host/terminal/terminal/host-create.vue
View File

@ -1,96 +1,67 @@
<template>
<div>
<el-drawer
v-model="dialogVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="$t('terminal.addHost')" :back="handleClose" />
</template>
<el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-alert
v-if="isLocal"
class="common-prompt"
center
:title="$t('terminal.connLocalErr')"
:closable="false"
type="warning"
/>
<el-form-item :label="$t('terminal.ip')" prop="addr">
<el-input @change="isOK = false" v-if="!isLocal" clearable v-model.trim="hostInfo.addr" />
<el-tag v-if="isLocal">{{ hostInfo.addr }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="user">
<el-input @change="isOK = false" clearable v-model="hostInfo.user" />
</el-form-item>
<el-form-item :label="$t('terminal.authMode')" prop="authMode">
<el-radio-group @change="isOK = false" v-model="hostInfo.authMode">
<el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
<el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
v-if="hostInfo.authMode === 'password'"
prop="password"
>
<el-input
@change="isOK = false"
clearable
show-password
type="password"
v-model="hostInfo.password"
/>
</el-form-item>
<el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
<el-input @change="isOK = false" clearable type="textarea" v-model="hostInfo.privateKey" />
</el-form-item>
<el-form-item
:label="$t('terminal.keyPassword')"
v-if="hostInfo.authMode === 'key'"
prop="passPhrase"
>
<el-input
@change="isOK = false"
type="password"
show-password
clearable
v-model="hostInfo.passPhrase"
/>
</el-form-item>
<el-checkbox clearable v-model.number="hostInfo.rememberPassword">
{{ $t('terminal.rememberPassword') }}
</el-checkbox>
<el-form-item style="margin-top: 10px" :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="hostInfo.port" />
</el-form-item>
<el-form-item :label="$t('commons.table.title')" prop="name">
<el-input clearable v-model="hostInfo.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model="hostInfo.description" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="submitAddHost(hostRef, 'testConn')">
{{ $t('terminal.testConn') }}
</el-button>
<el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostRef, 'saveAndConn')">
{{ $t('terminal.saveAndConn') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="dialogVisible" :header="$t('terminal.addHost')" :back="handleClose" size="large">
<el-form ref="hostRef" label-width="100px" label-position="top" :model="hostInfo" :rules="rules">
<el-alert
v-if="isLocal"
class="common-prompt"
center
:title="$t('terminal.connLocalErr')"
:closable="false"
type="warning"
/>
<el-form-item :label="$t('terminal.ip')" prop="addr">
<el-input @change="isOK = false" v-if="!isLocal" clearable v-model.trim="hostInfo.addr" />
<el-tag v-if="isLocal">{{ hostInfo.addr }}</el-tag>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="user">
<el-input @change="isOK = false" clearable v-model="hostInfo.user" />
</el-form-item>
<el-form-item :label="$t('terminal.authMode')" prop="authMode">
<el-radio-group @change="isOK = false" v-model="hostInfo.authMode">
<el-radio value="password">{{ $t('terminal.passwordMode') }}</el-radio>
<el-radio value="key">{{ $t('terminal.keyMode') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('commons.login.password')" v-if="hostInfo.authMode === 'password'" prop="password">
<el-input @change="isOK = false" clearable show-password type="password" v-model="hostInfo.password" />
</el-form-item>
<el-form-item :label="$t('terminal.key')" v-if="hostInfo.authMode === 'key'" prop="privateKey">
<el-input @change="isOK = false" clearable type="textarea" v-model="hostInfo.privateKey" />
</el-form-item>
<el-form-item :label="$t('terminal.keyPassword')" v-if="hostInfo.authMode === 'key'" prop="passPhrase">
<el-input
@change="isOK = false"
type="password"
show-password
clearable
v-model="hostInfo.passPhrase"
/>
</el-form-item>
<el-checkbox clearable v-model.number="hostInfo.rememberPassword">
{{ $t('terminal.rememberPassword') }}
</el-checkbox>
<el-form-item class="mt-2.5" :label="$t('commons.table.port')" prop="port">
<el-input @change="isOK = false" clearable v-model.number="hostInfo.port" />
</el-form-item>
<el-form-item :label="$t('commons.table.title')" prop="name">
<el-input clearable v-model="hostInfo.name" />
</el-form-item>
<el-form-item :label="$t('commons.table.description')" prop="description">
<el-input clearable v-model="hostInfo.description" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button @click="submitAddHost(hostRef, 'testConn')">
{{ $t('terminal.testConn') }}
</el-button>
<el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostRef, 'saveAndConn')">
{{ $t('terminal.saveAndConn') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script setup lang="ts">
@ -98,7 +69,6 @@ import { ElForm } from 'element-plus';
import { Host } from '@/api/interface/host';
import { Rules } from '@/global/form-rules';
import { addHost, testByInfo } from '@/api/modules/host';
import DrawerHeader from '@/components/drawer-header/index.vue';
import i18n from '@/lang';
import { reactive, ref } from 'vue';
import { MsgError, MsgSuccess } from '@/utils/message';

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

@ -1,109 +1,74 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="cosData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + cosData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="cosData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="cosData.rowData!.credential" />
</el-form-item>
<el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
<el-checkbox v-model="regionInput" :label="$t('container.input')" />
<el-select
v-if="!regionInput"
v-model="cosData.rowData!.varsJson['region']"
filterable
clearable
>
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">{{ item.label }}</span>
<span class="option-help">
{{ item.value }}
</span>
</el-option>
</el-select>
<el-input v-else v-model.trim="cosData.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model.trim="cosData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select
@change="errBuckets = false"
style="width: 80%"
v-model="cosData.rowData!.bucket"
>
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button style="width: 20%" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="cosData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="Standard_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="Deep_Archive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="cosData.rowData!.varsJson['scType'] === 'Archive' || cosData.rowData!.varsJson['scType'] === 'Deep_Archive'"
style="margin-top: 10px"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="cosData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="cosData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + cosData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="cosData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="cosData.rowData!.credential" />
</el-form-item>
<el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
<el-checkbox v-model="regionInput" :label="$t('container.input')" />
<el-select v-if="!regionInput" v-model="cosData.rowData!.varsJson['region']" filterable clearable>
<el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
<span class="float-left">{{ item.label }}</span>
<span class="option-help">
{{ item.value }}
</span>
</el-option>
</el-select>
<el-input v-else v-model.trim="cosData.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model.trim="cosData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" class="p-w-100">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" class="!w-4/5" v-model="cosData.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
<el-select v-model="cosData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="Standard_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="Deep_Archive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="cosData.rowData!.varsJson['scType'] === 'Archive' || cosData.rowData!.varsJson['scType'] === 'Deep_Archive'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="cosData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -112,7 +77,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';

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

@ -1,83 +1,56 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="kodoData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + kodoData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="kodoData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="kodoData.rowData!.credential" />
</el-form-item>
<el-form-item
:label="$t('setting.domain')"
prop="varsJson.domainItem"
:rules="Rules.requiredInput"
>
<el-input v-model="kodoData.rowData!.varsJson['domainItem']">
<template #prepend>
<el-select v-model.trim="domainProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select
@change="errBuckets = false"
style="width: 80%"
v-model="kodoData.rowData!.bucket"
>
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button style="width: 20%" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
<el-input-number
style="width: 200px"
:min="1"
step-strictly
:step="1"
v-model.number="kodoData.rowData!.varsJson['timeout']"
></el-input-number>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="kodoData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="kodoData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + kodoData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="kodoData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="kodoData.rowData!.credential" />
</el-form-item>
<el-form-item :label="$t('setting.domain')" prop="varsJson.domainItem" :rules="Rules.requiredInput">
<el-input v-model="kodoData.rowData!.varsJson['domainItem']">
<template #prepend>
<el-select v-model.trim="domainProto" class="p-w-100">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" class="!w-4/5" v-model="kodoData.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('cronjob.requestExpirationTime')" prop="varsJson.timeout">
<el-input-number
style="width: 200px"
:min="1"
step-strictly
:step="1"
v-model.number="kodoData.rowData!.varsJson['timeout']"
></el-input-number>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="kodoData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -86,7 +59,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';

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

@ -1,47 +1,26 @@
<template>
<div v-loading="loading">
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item
:label="$t('setting.backupDir')"
prop="varsJson['dir']"
:rules="Rules.requiredInput"
>
<el-input v-model="dialogData.rowData!.varsJson['dir']">
<template #prepend>
<FileList @choose="loadDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="dialogData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + dialogData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="varsJson['dir']" :rules="Rules.requiredInput">
<el-input v-model="dialogData.rowData!.varsJson['dir']">
<template #prepend>
<FileList @choose="loadDir" :dir="true"></FileList>
</template>
</el-input>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -51,7 +30,6 @@ import FileList from '@/components/file-list/index.vue';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup } from '@/api/modules/setting';
import { MsgSuccess } from '@/utils/message';

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

@ -1,68 +1,47 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="minioData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + minioData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="minioData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="minioData.rowData!.credential" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="minioData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select
style="width: 80%"
@change="errBuckets = false"
v-model="minioData.rowData!.bucket"
>
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button style="width: 20%" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="minioData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + minioData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="minioData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="minioData.rowData!.credential" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="minioData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select class="!w-4/5" @change="errBuckets = false" v-model="minioData.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="minioData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -71,7 +50,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
import { deepCopy, splitHttp, spliceHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';

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

@ -1,108 +1,77 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form
@submit.prevent
ref="formRef"
v-loading="loading"
label-position="top"
:model="oneDriveData.rowData"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type">
<el-tag>{{ $t('setting.' + oneDriveData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item>
<el-radio-group v-model="oneDriveData.rowData!.varsJson['isCN']" @change="changeFrom">
<el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
<el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
</el-radio-group>
<span class="input-help">
{{ $t('setting.onedrive_helper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(true)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item
:label="$t('setting.client_id')"
prop="varsJson.client_id"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="oneDriveData.rowData!.varsJson['client_id']" />
</el-form-item>
<el-form-item
:label="$t('setting.client_secret')"
prop="varsJson.client_secret"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="oneDriveData.rowData!.varsJson['client_secret']" />
</el-form-item>
<el-form-item
:label="$t('setting.redirect_uri')"
prop="varsJson.redirect_uri"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="oneDriveData.rowData!.varsJson['redirect_uri']" />
</el-form-item>
<el-form-item :label="$t('setting.code')" prop="varsJson.code" :rules="rules.driveCode">
<div style="width: 100%">
<el-input
style="width: calc(100% - 80px)"
:rows="3"
type="textarea"
clearable
v-model.trim="oneDriveData.rowData!.varsJson['code']"
/>
<el-button class="append-button" @click="jumpAzure(formRef)">
{{ $t('setting.loadCode') }}
</el-button>
</div>
<span class="input-help">
{{ $t('setting.codeHelper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(false)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="oneDriveData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="oneDriveData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type">
<el-tag>{{ $t('setting.' + oneDriveData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item>
<el-radio-group v-model="oneDriveData.rowData!.varsJson['isCN']" @change="changeFrom">
<el-radio-button :value="false">{{ $t('setting.isNotCN') }}</el-radio-button>
<el-radio-button :value="true">{{ $t('setting.isCN') }}</el-radio-button>
</el-radio-group>
<span class="input-help">
{{ $t('setting.onedrive_helper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(true)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</template>
</el-drawer>
</div>
</el-form-item>
<el-form-item :label="$t('setting.client_id')" prop="varsJson.client_id" :rules="Rules.requiredInput">
<el-input v-model.trim="oneDriveData.rowData!.varsJson['client_id']" />
</el-form-item>
<el-form-item
:label="$t('setting.client_secret')"
prop="varsJson.client_secret"
:rules="Rules.requiredInput"
>
<el-input v-model.trim="oneDriveData.rowData!.varsJson['client_secret']" />
</el-form-item>
<el-form-item :label="$t('setting.redirect_uri')" prop="varsJson.redirect_uri" :rules="Rules.requiredInput">
<el-input v-model.trim="oneDriveData.rowData!.varsJson['redirect_uri']" />
</el-form-item>
<el-form-item :label="$t('setting.code')" prop="varsJson.code" :rules="rules.driveCode">
<div class="!w-full">
<el-input
style="width: calc(100% - 80px)"
:rows="3"
type="textarea"
clearable
v-model.trim="oneDriveData.rowData!.varsJson['code']"
/>
<el-button class="append-button" @click="jumpAzure(formRef)">
{{ $t('setting.loadCode') }}
</el-button>
</div>
<span class="input-help">
{{ $t('setting.codeHelper') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc(false)"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="oneDriveData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -111,7 +80,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, getOneDriveInfo } from '@/api/modules/setting';
import { MsgSuccess } from '@/utils/message';

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

@ -1,87 +1,62 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="ossData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + ossData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="ossData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="ossData.rowData!.credential" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="ossData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select
@change="errBuckets = false"
style="width: 80%"
v-model="ossData.rowData!.bucket"
>
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button style="width: 20%" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="ossData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="ColdArchive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="ossData.rowData!.varsJson['scType'] === 'Archive' || ossData.rowData!.varsJson['scType'] === 'ColdArchive'"
style="margin-top: 10px"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="ossData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="ossData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + ossData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="ossData.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="ossData.rowData!.credential" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="ossData.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" class="!w-full">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" class="!w-4/5" v-model="ossData.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
<el-select v-model="ossData.rowData!.varsJson['scType']">
<el-option value="Standard" :label="$t('setting.scStandard')" />
<el-option value="IA" :label="$t('setting.scStandard_IA')" />
<el-option value="Archive" :label="$t('setting.scArchive')" />
<el-option value="ColdArchive" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="ossData.rowData!.varsJson['scType'] === 'Archive' || ossData.rowData!.varsJson['scType'] === 'ColdArchive'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="ossData.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -90,7 +65,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';

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

@ -1,86 +1,65 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="s3Data.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + s3Data.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="s3Data.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="s3Data.rowData!.credential" />
</el-form-item>
<el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
<el-input pro v-model.trim="s3Data.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="s3Data.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" style="width: 100px">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" style="width: 80%" v-model="s3Data.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button style="width: 20%" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item
:label="$t('setting.scType')"
prop="varsJson.scType"
:rules="[Rules.requiredSelect]"
>
<el-select v-model="s3Data.rowData!.varsJson['scType']">
<el-option value="STANDARD" :label="$t('setting.scStandard')" />
<el-option value="STANDARD_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="GLACIER" :label="$t('setting.scArchive')" />
<el-option value="DEEP_ARCHIVE" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="s3Data.rowData!.varsJson['scType'] === 'Archive' || s3Data.rowData!.varsJson['scType'] === 'ColdArchive'"
style="margin-top: 10px"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="s3Data.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="s3Data.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + s3Data.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item label="Access Key ID" prop="accessKey" :rules="Rules.requiredInput">
<el-input v-model.trim="s3Data.rowData!.accessKey" />
</el-form-item>
<el-form-item label="Secret Key" prop="credential" :rules="Rules.requiredInput">
<el-input show-password clearable v-model.trim="s3Data.rowData!.credential" />
</el-form-item>
<el-form-item label="Region" prop="varsJson.region" :rules="Rules.requiredInput">
<el-input pro v-model.trim="s3Data.rowData!.varsJson['region']" />
</el-form-item>
<el-form-item label="Endpoint" prop="varsJson.endpointItem" :rules="Rules.requiredInput">
<el-input v-model="s3Data.rowData!.varsJson['endpointItem']">
<template #prepend>
<el-select v-model.trim="endpointProto" class="p-w-100">
<el-option label="http" value="http" />
<el-option label="https" value="https" />
</el-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="Bucket" prop="bucket">
<el-select @change="errBuckets = false" class="!w-4/5" v-model="s3Data.rowData!.bucket">
<el-option v-for="item in buckets" :key="item" :value="item" />
</el-select>
<el-button class="!w-1/5" plain @click="getBuckets(formRef)">
{{ $t('setting.loadBucket') }}
</el-button>
<span v-if="errBuckets" class="input-error">{{ $t('commons.rule.requiredSelect') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.scType')" prop="varsJson.scType" :rules="[Rules.requiredSelect]">
<el-select v-model="s3Data.rowData!.varsJson['scType']">
<el-option value="STANDARD" :label="$t('setting.scStandard')" />
<el-option value="STANDARD_IA" :label="$t('setting.scStandard_IA')" />
<el-option value="GLACIER" :label="$t('setting.scArchive')" />
<el-option value="DEEP_ARCHIVE" :label="$t('setting.scDeep_Archive')" />
</el-select>
<el-alert
v-if="s3Data.rowData!.varsJson['scType'] === 'Archive' || s3Data.rowData!.varsJson['scType'] === 'ColdArchive'"
class="mt-2.5"
:closable="false"
type="warning"
:title="$t('setting.archiveHelper')"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="backupPath">
<el-input clearable v-model.trim="s3Data.rowData!.backupPath" placeholder="/1panel" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -89,7 +68,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup, listBucket } from '@/api/modules/setting';
import { deepCopy, spliceHttp, splitHttp } from '@/utils/util';
import { MsgSuccess } from '@/utils/message';

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

@ -1,68 +1,34 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="sftpData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + sftpData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.host">
<el-input v-model.trim="sftpData.rowData!.varsJson['address']" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
<el-input-number
:min="0"
:max="65535"
v-model.number="sftpData.rowData!.varsJson['port']"
/>
</el-form-item>
<el-form-item
:label="$t('commons.login.username')"
prop="accessKey"
:rules="[Rules.requiredInput]"
>
<el-input v-model.trim="sftpData.rowData!.accessKey" />
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
prop="credential"
:rules="[Rules.requiredInput]"
>
<el-input
type="password"
clearable
show-password
v-model.trim="sftpData.rowData!.credential"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
<el-input v-model.trim="sftpData.rowData!.bucket" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="sftpData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + sftpData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.host">
<el-input v-model.trim="sftpData.rowData!.varsJson['address']" />
</el-form-item>
<el-form-item :label="$t('commons.table.port')" prop="varsJson.port" :rules="[Rules.port]">
<el-input-number :min="0" :max="65535" v-model.number="sftpData.rowData!.varsJson['port']" />
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="accessKey" :rules="[Rules.requiredInput]">
<el-input v-model.trim="sftpData.rowData!.accessKey" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="credential" :rules="[Rules.requiredInput]">
<el-input type="password" clearable show-password v-model.trim="sftpData.rowData!.credential" />
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
<el-input v-model.trim="sftpData.rowData!.bucket" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -71,7 +37,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup } from '@/api/modules/setting';
import { MsgSuccess } from '@/utils/message';

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

@ -1,76 +1,37 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="50%"
>
<template #header>
<DrawerHeader :header="title + $t('setting.backupAccount')" :back="handleClose" />
</template>
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="webdavData.rowData">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + webdavData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item
:label="$t('setting.address')"
prop="varsJson.address"
:rules="Rules.requiredInput"
>
<el-input v-model="webdavData.rowData!.varsJson['address']" />
<span class="input-help">
{{ $t('setting.WebDAVAlist') }}
<el-link
style="font-size: 12px; margin-left: 5px"
icon="Position"
@click="toDoc()"
type="primary"
>
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</el-form-item>
<el-form-item
:label="$t('commons.login.username')"
prop="accessKey"
:rules="[Rules.requiredInput]"
>
<el-input v-model.trim="webdavData.rowData!.accessKey" />
</el-form-item>
<el-form-item
:label="$t('commons.login.password')"
prop="credential"
:rules="[Rules.requiredInput]"
>
<el-input
type="password"
clearable
show-password
v-model.trim="webdavData.rowData!.credential"
/>
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
<el-input v-model.trim="webdavData.rowData!.bucket" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
<DrawerPro v-model="drawerVisible" :header="title + $t('setting.backupAccount')" :back="handleClose" size="large">
<el-form @submit.prevent ref="formRef" v-loading="loading" label-position="top" :model="webdavData.rowData">
<el-form-item :label="$t('commons.table.type')" prop="type" :rules="Rules.requiredSelect">
<el-tag>{{ $t('setting.' + webdavData.rowData!.type) }}</el-tag>
</el-form-item>
<el-form-item :label="$t('setting.address')" prop="varsJson.address" :rules="Rules.requiredInput">
<el-input v-model="webdavData.rowData!.varsJson['address']" />
<span class="input-help">
{{ $t('setting.WebDAVAlist') }}
<el-link style="font-size: 12px; margin-left: 5px" icon="Position" @click="toDoc()" type="primary">
{{ $t('firewall.quickJump') }}
</el-link>
</span>
</template>
</el-drawer>
</div>
</el-form-item>
<el-form-item :label="$t('commons.login.username')" prop="accessKey" :rules="[Rules.requiredInput]">
<el-input v-model.trim="webdavData.rowData!.accessKey" />
</el-form-item>
<el-form-item :label="$t('commons.login.password')" prop="credential" :rules="[Rules.requiredInput]">
<el-input type="password" clearable show-password v-model.trim="webdavData.rowData!.credential" />
</el-form-item>
<el-form-item :label="$t('setting.backupDir')" prop="bucket" :rules="[Rules.requiredInput]">
<el-input v-model.trim="webdavData.rowData!.bucket" />
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="loading" @click="handleClose">
{{ $t('commons.button.cancel') }}
</el-button>
<el-button :disabled="loading" type="primary" @click="onSubmit(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
@ -79,7 +40,6 @@ import { Rules } from '@/global/form-rules';
import i18n from '@/lang';
import { ElForm } from 'element-plus';
import { Backup } from '@/api/interface/backup';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { addBackup, editBackup } from '@/api/modules/setting';
import { MsgSuccess } from '@/utils/message';

64
frontend/src/views/setting/panel/default-network/index.vue
View File

@ -1,45 +1,26 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('setting.defaultNetwork')" :back="handleClose" />
</template>
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item
:label="$t('setting.defaultNetwork')"
prop="defaultNetwork"
:rules="Rules.requiredSelect"
>
<el-select v-model="form.defaultNetwork" filterable>
<el-option
v-for="item in netOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('setting.defaultNetwork')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" @submit.prevent v-loading="loading">
<el-form-item :label="$t('setting.defaultNetwork')" prop="defaultNetwork" :rules="Rules.requiredSelect">
<el-select v-model="form.defaultNetwork" filterable>
<el-option
v-for="item in netOptions"
:key="item"
:label="item == 'all' ? $t('commons.table.all') : item"
:value="item"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSave(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
@ -48,7 +29,6 @@ import { MsgSuccess } from '@/utils/message';
import { updateSetting } from '@/api/modules/setting';
import { FormInstance } from 'element-plus';
import { Rules } from '@/global/form-rules';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { getNetworkOptions } from '@/api/modules/host';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();

38
frontend/src/views/setting/panel/hidemenu/index.vue
View File

@ -1,20 +1,10 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('setting.advancedMenuHide')" :back="handleClose" />
</template>
<DrawerPro v-model="drawerVisible" :header="$t('setting.advancedMenuHide')" :back="handleClose" size="small">
<template #content>
<ComplexTable
class="mb-5 w-full"
:data="treeData.hideMenu"
:show-header="false"
style="width: 100%; margin-bottom: 20px"
row-key="id"
default-expand-all
>
@ -29,22 +19,20 @@
</template>
</el-table-column>
</ComplexTable>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="saveHideMenus">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
</template>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="saveHideMenus">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</DrawerPro>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import DrawerHeader from '@/components/drawer-header/index.vue';
import { ElMessageBox } from 'element-plus';
import i18n from '@/lang';
import { updateMenu } from '@/api/modules/setting';

51
frontend/src/views/setting/panel/name/index.vue
View File

@ -1,41 +1,17 @@
<template>
<div>
<el-drawer
v-model="drawerVisible"
:destroy-on-close="true"
:close-on-click-modal="false"
:close-on-press-escape="false"
size="30%"
>
<template #header>
<DrawerHeader :header="$t('setting.title')" :back="handleClose" />
</template>
<el-form
ref="formRef"
label-position="top"
:model="form"
:rules="rules"
@submit.prevent
v-loading="loading"
>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item :label="$t('setting.title')" prop="panelName">
<el-input clearable v-model="form.panelName" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</span>
</template>
</el-drawer>
</div>
<DrawerPro v-model="drawerVisible" :header="$t('setting.title')" :back="handleClose" size="small">
<el-form ref="formRef" label-position="top" :model="form" :rules="rules" @submit.prevent v-loading="loading">
<el-form-item :label="$t('setting.title')" prop="panelName">
<el-input clearable v-model="form.panelName" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="drawerVisible = false">{{ $t('commons.button.cancel') }}</el-button>
<el-button :disabled="loading" type="primary" @click="onSavePanelName(formRef)">
{{ $t('commons.button.confirm') }}
</el-button>
</template>
</DrawerPro>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
@ -44,7 +20,6 @@ import { MsgSuccess } from '@/utils/message';
import { updateSetting } from '@/api/modules/setting';
import { FormInstance } from 'element-plus';
import { GlobalStore } from '@/store';
import DrawerHeader from '@/components/drawer-header/index.vue';
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);

Some files were not shown because too many files have changed in this diff Show More