mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 16:29:17 +08:00
feat: 调整证书页面样式
This commit is contained in:
zhengkunwang223
zhengkunwang223
parent
3ffda84dee
commit
daa40d237a
@ -16,6 +16,8 @@
|
||||
import { useSlots } from 'vue';
|
||||
const slots = useSlots();
|
||||
|
||||
defineOptions({ name: 'DrawerHeader' });
|
||||
|
||||
const props = defineProps({
|
||||
header: String,
|
||||
back: Function,
|
||||
|
||||
@ -7,18 +7,15 @@
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="accountForm"
|
||||
label-position="right"
|
||||
:model="account"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('website.email')" prop="email">
|
||||
<el-input v-model="account.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form ref="accountForm" label-position="top" :model="account" :rules="rules" v-loading="loading">
|
||||
<el-form-item :label="$t('website.email')" prop="email">
|
||||
<el-input v-model="account.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('website.acmeAccountManage')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-drawer v-model="open" :size="'50%'" :show-close="false">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('website.acmeAccountManage')" :back="handleClose" />
|
||||
</template>
|
||||
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" icon="Plus" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
|
||||
@ -20,7 +18,7 @@
|
||||
/>
|
||||
</ComplexTable>
|
||||
<Create ref="createRef" @close="search()"></Create>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Website } from '@/api/interface/website';
|
||||
@ -70,6 +68,10 @@ const openCreate = () => {
|
||||
createRef.value.acceptParams();
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
};
|
||||
|
||||
const deleteAccount = async (id: number) => {
|
||||
await useDeleteData(DeleteAcmeAccount, { id: id }, 'commons.msg.delete');
|
||||
search();
|
||||
|
||||
@ -1,75 +1,85 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('commons.button.create')"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="sslForm"
|
||||
label-position="right"
|
||||
:model="ssl"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
|
||||
<el-input v-model="ssl.primaryDomain"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
|
||||
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="ssl.otherDomains"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
|
||||
<el-select v-model="ssl.acmeAccountId">
|
||||
<el-option
|
||||
v-for="(acme, index) in acmeAccounts"
|
||||
:key="index"
|
||||
:label="acme.email"
|
||||
:value="acme.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.provider')" prop="provider">
|
||||
<el-radio-group v-model="ssl.provider" @change="changeProvider()">
|
||||
<el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
|
||||
<el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio>
|
||||
<el-radio label="http">HTTP</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.dnsAccount')" prop="dnsAccountId" v-if="ssl.provider === 'dnsAccount'">
|
||||
<el-select v-model="ssl.dnsAccountId">
|
||||
<el-option
|
||||
v-for="(dns, index) in dnsAccounts"
|
||||
:key="index"
|
||||
:label="dns.name + ' ( ' + dns.type + ' )'"
|
||||
:value="dns.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="ssl.provider === 'dnsManual' && dnsResolve.length > 0">
|
||||
<span>{{ $t('ssl.dnsResolveHelper') }}</span>
|
||||
<div v-for="(re, index) in dnsResolve" :key="index">
|
||||
<el-descriptions direction="vertical" :column="4" border>
|
||||
<el-descriptions-item :label="$t('website.domain')">{{ re.domain }}</el-descriptions-item>
|
||||
<div v-if="re.err != ''">
|
||||
<el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item>
|
||||
<el-drawer v-model="open" size="50%" :show-close="false">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form
|
||||
ref="sslForm"
|
||||
label-position="top"
|
||||
:model="ssl"
|
||||
label-width="100px"
|
||||
:rules="rules"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-form-item :label="$t('website.primaryDomain')" prop="primaryDomain">
|
||||
<el-input v-model="ssl.primaryDomain"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 6 }"
|
||||
v-model="ssl.otherDomains"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
|
||||
<el-select v-model="ssl.acmeAccountId">
|
||||
<el-option
|
||||
v-for="(acme, index) in acmeAccounts"
|
||||
:key="index"
|
||||
:label="acme.email"
|
||||
:value="acme.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.provider')" prop="provider">
|
||||
<el-radio-group v-model="ssl.provider" @change="changeProvider()">
|
||||
<el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
|
||||
<el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio>
|
||||
<el-radio label="http">HTTP</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('website.dnsAccount')"
|
||||
prop="dnsAccountId"
|
||||
v-if="ssl.provider === 'dnsAccount'"
|
||||
>
|
||||
<el-select v-model="ssl.dnsAccountId">
|
||||
<el-option
|
||||
v-for="(dns, index) in dnsAccounts"
|
||||
:key="index"
|
||||
:label="dns.name + ' ( ' + dns.type + ' )'"
|
||||
:value="dns.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="ssl.provider === 'dnsManual' && dnsResolve.length > 0">
|
||||
<span>{{ $t('ssl.dnsResolveHelper') }}</span>
|
||||
<div v-for="(re, index) in dnsResolve" :key="index">
|
||||
<el-descriptions direction="vertical" :column="4" border>
|
||||
<el-descriptions-item :label="$t('website.domain')">
|
||||
{{ re.domain }}
|
||||
</el-descriptions-item>
|
||||
<div v-if="re.err != ''">
|
||||
<el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-descriptions-item :label="$t('ssl.resolveDomain')">
|
||||
{{ re.resolve }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('ssl.value')">{{ re.value }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('ssl.type')">TXT</el-descriptions-item>
|
||||
</div>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-descriptions-item :label="$t('ssl.resolveDomain')">
|
||||
{{ re.resolve }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('ssl.value')">{{ re.value }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="$t('ssl.type')">TXT</el-descriptions-item>
|
||||
</div>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('ssl.autoRenew')" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
|
||||
<el-checkbox v-model="ssl.autoRenew" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-form-item>
|
||||
<el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
|
||||
<el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
|
||||
@ -78,7 +88,7 @@
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<el-dialog v-model="open" :before-close="handleClose" :title="$t('ssl.detail')" width="30%">
|
||||
<el-drawer v-model="open" size="50%" :show-close="false">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('ssl.detail')" :back="handleClose" />
|
||||
</template>
|
||||
<div>
|
||||
<el-radio-group v-model="curr">
|
||||
<el-radio-button label="detail">{{ $t('ssl.msg') }}</el-radio-button>
|
||||
@ -56,7 +59,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { GetSSL } from '@/api/modules/website';
|
||||
|
||||
@ -7,45 +7,49 @@
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="accountForm" label-position="right" :model="account" label-width="100px" :rules="rules">
|
||||
<el-form-item :label="$t('commons.table.name')" prop="name">
|
||||
<el-input v-model="account.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.type')" prop="type">
|
||||
<el-select v-model="account.type" :disabled="accountData.mode === 'edit'">
|
||||
<el-option
|
||||
v-for="(type, index) in types"
|
||||
:key="index"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="account.type === 'AliYun'">
|
||||
<el-form-item label="AccessKey" prop="authorization.accessKey">
|
||||
<el-input v-model="account.authorization['accessKey']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SecretKey" prop="authorization.secretKey">
|
||||
<el-input v-model="account.authorization['secretKey']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="account.type === 'DnsPod'">
|
||||
<el-form-item label="ID" prop="authorization.id">
|
||||
<el-input v-model="account.authorization['id']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Token" prop="authorization.token">
|
||||
<el-input v-model="account.authorization['token']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="account.type === 'CloudFlare'">
|
||||
<el-form-item label="EMAIL" prop="authorization.email">
|
||||
<el-input v-model="account.authorization['email']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="API Key" prop="authorization.apiKey">
|
||||
<el-input v-model="account.authorization['apiKey']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form ref="accountForm" label-position="top" :model="account" :rules="rules">
|
||||
<el-form-item :label="$t('commons.table.name')" prop="name">
|
||||
<el-input v-model="account.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('website.type')" prop="type">
|
||||
<el-select v-model="account.type" :disabled="accountData.mode === 'edit'">
|
||||
<el-option
|
||||
v-for="(type, index) in types"
|
||||
:key="index"
|
||||
:label="type.label"
|
||||
:value="type.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="account.type === 'AliYun'">
|
||||
<el-form-item label="AccessKey" prop="authorization.accessKey">
|
||||
<el-input v-model="account.authorization['accessKey']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="SecretKey" prop="authorization.secretKey">
|
||||
<el-input v-model="account.authorization['secretKey']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="account.type === 'DnsPod'">
|
||||
<el-form-item label="ID" prop="authorization.id">
|
||||
<el-input v-model="account.authorization['id']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="Token" prop="authorization.token">
|
||||
<el-input v-model="account.authorization['token']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="account.type === 'CloudFlare'">
|
||||
<el-form-item label="EMAIL" prop="authorization.email">
|
||||
<el-input v-model="account.authorization['email']"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="API Key" prop="authorization.apiKey">
|
||||
<el-input v-model="account.authorization['apiKey']"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:destroy-on-close="true"
|
||||
:close-on-click-modal="false"
|
||||
:title="$t('website.dnsAccountManage')"
|
||||
>
|
||||
<el-drawer v-model="open" :size="'50%'" :show-close="false">
|
||||
<template #header>
|
||||
<DrawerHeader :header="$t('website.dnsAccountManage')" :back="handleClose" />
|
||||
</template>
|
||||
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" icon="Plus" @click="openCreate">{{ $t('commons.button.create') }}</el-button>
|
||||
<el-button type="primary" icon="Plus" @click="openCreate">
|
||||
{{ $t('commons.button.create') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-table-column :label="$t('commons.table.name')" fix show-overflow-tooltip prop="name"></el-table-column>
|
||||
<el-table-column :label="$t('commons.table.type')" prop="type">
|
||||
@ -30,7 +30,7 @@
|
||||
/>
|
||||
</ComplexTable>
|
||||
<Create ref="createRef" @close="search()"></Create>
|
||||
</el-dialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -66,6 +66,10 @@ const acceptParams = () => {
|
||||
open.value = true;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
open.value = false;
|
||||
};
|
||||
|
||||
const search = () => {
|
||||
const req = {
|
||||
page: paginationConfig.currentPage,
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<RouterButton :buttons="routerButton" />
|
||||
<LayoutContent :title="$t('website.ssl')">
|
||||
<template #prompt>
|
||||
<el-alert type="info" :closable="false">
|
||||
@ -7,20 +8,20 @@
|
||||
</template>
|
||||
</el-alert>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<el-button type="primary" icon="Plus" @click="openSSL()">
|
||||
{{ $t('commons.button.create') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openAcmeAccount()">
|
||||
{{ $t('website.acmeAccountManage') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openDnsAccount()">
|
||||
{{ $t('website.dnsAccountManage') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<template #main>
|
||||
<br />
|
||||
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
|
||||
<template #toolbar>
|
||||
<el-button type="primary" icon="Plus" @click="openSSL()">
|
||||
{{ $t('commons.button.create') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openAcmeAccount()">
|
||||
{{ $t('website.acmeAccountManage') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain @click="openDnsAccount()">
|
||||
{{ $t('website.dnsAccountManage') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-table-column
|
||||
:label="$t('website.domain')"
|
||||
fix
|
||||
@ -94,6 +95,13 @@ const detailRef = ref();
|
||||
let data = ref();
|
||||
let loading = ref(false);
|
||||
|
||||
const routerButton = [
|
||||
{
|
||||
label: i18n.global.t('website.ssl'),
|
||||
path: '/websites/ssl',
|
||||
},
|
||||
];
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
label: i18n.global.t('ssl.detail'),
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-drawer v-model="open" :size="'50%'" :show-close="false">
|
||||
<el-drawer v-model="open" size="50%" :show-close="false">
|
||||
<template #header>
|
||||
<Header :header="$t('website.create')" :back="handleClose">
|
||||
<DrawerHeader :header="$t('website.create')" :back="handleClose">
|
||||
<template #buttons>
|
||||
<el-button
|
||||
type="primary"
|
||||
@ -17,7 +17,7 @@
|
||||
{{ $t('website.proxy') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</Header>
|
||||
</DrawerHeader>
|
||||
</template>
|
||||
<el-row>
|
||||
<el-col :span="22" :offset="1">
|
||||
@ -178,7 +178,6 @@ import { ElForm, FormInstance, ElMessage } from 'element-plus';
|
||||
import { reactive, ref } from 'vue';
|
||||
import Params from '@/views/app-store/detail/params/index.vue';
|
||||
import Check from '../check/index.vue';
|
||||
import Header from '@/components/drawer-header/index.vue';
|
||||
|
||||
const websiteForm = ref<FormInstance>();
|
||||
const website = ref({
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
<el-dialog
|
||||
v-model="open"
|
||||
:title="$t('website.defaulServer')"
|
||||
width="25%"
|
||||
width="35%"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :offset="5">
|
||||
<div style="text-align: center">
|
||||
<el-col :span="22" :offset="1">
|
||||
<el-form label-position="top">
|
||||
<el-form-item :label="$t('website.defaulServer')">
|
||||
<el-select v-model="defaultId">
|
||||
<el-select v-model="defaultId" style="width: 100%">
|
||||
<el-option :value="0" :key="-1" :label="$t('website.noDefaulServer')"></el-option>
|
||||
<el-option
|
||||
v-for="(website, key) in websites"
|
||||
@ -20,13 +20,13 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-alert :closable="false">
|
||||
<template #default>
|
||||
<span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-col>
|
||||
<el-alert :closable="false">
|
||||
<template #default>
|
||||
<span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-row>
|
||||
|
||||
<template #footer>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user