gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 22:18:07 +08:00
Code

feat: 调整证书页面样式

Browse Source
This commit is contained in:
zhengkunwang223 2023-01-19 16:40:21 +08:00 committed by zhengkunwang223
parent 3ffda84dee
commit daa40d237a
10 changed files with 193 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/drawer-header/index.vue
View File

@ -16,6 +16,8 @@
import { useSlots } from 'vue'; import { useSlots } from 'vue';
const slots = useSlots(); const slots = useSlots();
defineOptions({ name: 'DrawerHeader' });
const props = defineProps({ const props = defineProps({
header: String, header: String,
back: Function, back: Function,

21
frontend/src/views/website/ssl/acme-account/create/index.vue
View File

@ -7,18 +7,15 @@
width="30%" width="30%"
:before-close="handleClose" :before-close="handleClose"
> >
<el-form <el-row>
ref="accountForm" <el-col :span="22" :offset="1">
label-position="right" <el-form ref="accountForm" label-position="top" :model="account" :rules="rules" v-loading="loading">
:model="account" <el-form-item :label="$t('website.email')" prop="email">
label-width="100px" <el-input v-model="account.email"></el-input>
:rules="rules" </el-form-item>
v-loading="loading" </el-form>
> </el-col>
<el-form-item :label="$t('website.email')" prop="email"> </el-row>
<el-input v-model="account.email"></el-input>
</el-form-item>
</el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>

16
frontend/src/views/website/ssl/acme-account/index.vue
View File

@ -1,10 +1,8 @@
<template> <template>
<el-dialog <el-drawer v-model="open" :size="'50%'" :show-close="false">
v-model="open" <template #header>
:title="$t('website.acmeAccountManage')" <DrawerHeader :header="$t('website.acmeAccountManage')" :back="handleClose" />
:destroy-on-close="true" </template>
:close-on-click-modal="false"
>
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading"> <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()" v-loading="loading">
<template #toolbar> <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>
@ -20,7 +18,7 @@
/> />
</ComplexTable> </ComplexTable>
<Create ref="createRef" @close="search()"></Create> <Create ref="createRef" @close="search()"></Create>
</el-dialog> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Website } from '@/api/interface/website'; import { Website } from '@/api/interface/website';
@ -70,6 +68,10 @@ const openCreate = () => {
createRef.value.acceptParams(); createRef.value.acceptParams();
}; };
const handleClose = () => {
open.value = false;
};
const deleteAccount = async (id: number) => { const deleteAccount = async (id: number) => {
await useDeleteData(DeleteAcmeAccount, { id: id }, 'commons.msg.delete'); await useDeleteData(DeleteAcmeAccount, { id: id }, 'commons.msg.delete');
search(); search();

152
frontend/src/views/website/ssl/create/index.vue
View File

@ -1,75 +1,85 @@
<template> <template>
<el-dialog <el-drawer v-model="open" size="50%" :show-close="false">
v-model="open" <template #header>
:title="$t('commons.button.create')" <DrawerHeader :header="$t('commons.button.create')" :back="handleClose" />
:destroy-on-close="true" </template>
:close-on-click-modal="false" <el-row>
width="50%" <el-col :span="22" :offset="1">
:before-close="handleClose" <el-form
> ref="sslForm"
<el-form label-position="top"
ref="sslForm" :model="ssl"
label-position="right" label-width="100px"
:model="ssl" :rules="rules"
label-width="100px" v-loading="loading"
: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 :label="$t('website.primaryDomain')" prop="primaryDomain"> </el-form-item>
<el-input v-model="ssl.primaryDomain"></el-input> <el-form-item :label="$t('website.otherDomains')" prop="otherDomains">
</el-form-item> <el-input
<el-form-item :label="$t('website.otherDomains')" prop="otherDomains"> type="textarea"
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="ssl.otherDomains"></el-input> :autosize="{ minRows: 2, maxRows: 6 }"
</el-form-item> v-model="ssl.otherDomains"
<el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId"> ></el-input>
<el-select v-model="ssl.acmeAccountId"> </el-form-item>
<el-option <el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
v-for="(acme, index) in acmeAccounts" <el-select v-model="ssl.acmeAccountId">
:key="index" <el-option
:label="acme.email" v-for="(acme, index) in acmeAccounts"
:value="acme.id" :key="index"
></el-option> :label="acme.email"
</el-select> :value="acme.id"
</el-form-item> ></el-option>
<el-form-item :label="$t('website.provider')" prop="provider"> </el-select>
<el-radio-group v-model="ssl.provider" @change="changeProvider()"> </el-form-item>
<el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio> <el-form-item :label="$t('website.provider')" prop="provider">
<el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio> <el-radio-group v-model="ssl.provider" @change="changeProvider()">
<el-radio label="http">HTTP</el-radio> <el-radio label="dnsAccount">{{ $t('website.dnsAccount') }}</el-radio>
</el-radio-group> <el-radio label="dnsManual">{{ $t('website.dnsCommon') }}</el-radio>
</el-form-item> <el-radio label="http">HTTP</el-radio>
<el-form-item :label="$t('website.dnsAccount')" prop="dnsAccountId" v-if="ssl.provider === 'dnsAccount'"> </el-radio-group>
<el-select v-model="ssl.dnsAccountId"> </el-form-item>
<el-option <el-form-item
v-for="(dns, index) in dnsAccounts" :label="$t('website.dnsAccount')"
:key="index" prop="dnsAccountId"
:label="dns.name + ' ( ' + dns.type + ' )'" v-if="ssl.provider === 'dnsAccount'"
:value="dns.id" >
></el-option> <el-select v-model="ssl.dnsAccountId">
</el-select> <el-option
</el-form-item> v-for="(dns, index) in dnsAccounts"
<el-form-item v-if="ssl.provider === 'dnsManual' && dnsResolve.length > 0"> :key="index"
<span>{{ $t('ssl.dnsResolveHelper') }}</span> :label="dns.name + ' ( ' + dns.type + ' )'"
<div v-for="(re, index) in dnsResolve" :key="index"> :value="dns.id"
<el-descriptions direction="vertical" :column="4" border> ></el-option>
<el-descriptions-item :label="$t('website.domain')">{{ re.domain }}</el-descriptions-item> </el-select>
<div v-if="re.err != ''"> </el-form-item>
<el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-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>
<div v-else> </el-form-item>
<el-descriptions-item :label="$t('ssl.resolveDomain')"> <el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
{{ re.resolve }} <el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
</el-descriptions-item> </el-form-item>
<el-descriptions-item :label="$t('ssl.value')">{{ re.value }}</el-descriptions-item> </el-form>
<el-descriptions-item :label="$t('ssl.type')">TXT</el-descriptions-item> </el-col>
</div> </el-row>
</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>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>
@ -78,7 +88,7 @@
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

7
frontend/src/views/website/ssl/detail/index.vue
View File

@ -1,5 +1,8 @@
<template> <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> <div>
<el-radio-group v-model="curr"> <el-radio-group v-model="curr">
<el-radio-button label="detail">{{ $t('ssl.msg') }}</el-radio-button> <el-radio-button label="detail">{{ $t('ssl.msg') }}</el-radio-button>
@ -56,7 +59,7 @@
</div> </div>
</div> </div>
</div> </div>
</el-dialog> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { GetSSL } from '@/api/modules/website'; import { GetSSL } from '@/api/modules/website';

82
frontend/src/views/website/ssl/dns-account/create/index.vue
View File

@ -7,45 +7,49 @@
width="40%" width="40%"
:before-close="handleClose" :before-close="handleClose"
> >
<el-form ref="accountForm" label-position="right" :model="account" label-width="100px" :rules="rules"> <el-row>
<el-form-item :label="$t('commons.table.name')" prop="name"> <el-col :span="22" :offset="1">
<el-input v-model="account.name"></el-input> <el-form ref="accountForm" label-position="top" :model="account" :rules="rules">
</el-form-item> <el-form-item :label="$t('commons.table.name')" prop="name">
<el-form-item :label="$t('website.type')" prop="type"> <el-input v-model="account.name"></el-input>
<el-select v-model="account.type" :disabled="accountData.mode === 'edit'"> </el-form-item>
<el-option <el-form-item :label="$t('website.type')" prop="type">
v-for="(type, index) in types" <el-select v-model="account.type" :disabled="accountData.mode === 'edit'">
:key="index" <el-option
:label="type.label" v-for="(type, index) in types"
:value="type.value" :key="index"
></el-option> :label="type.label"
</el-select> :value="type.value"
</el-form-item> ></el-option>
<div v-if="account.type === 'AliYun'"> </el-select>
<el-form-item label="AccessKey" prop="authorization.accessKey"> </el-form-item>
<el-input v-model="account.authorization['accessKey']"></el-input> <div v-if="account.type === 'AliYun'">
</el-form-item> <el-form-item label="AccessKey" prop="authorization.accessKey">
<el-form-item label="SecretKey" prop="authorization.secretKey"> <el-input v-model="account.authorization['accessKey']"></el-input>
<el-input v-model="account.authorization['secretKey']"></el-input> </el-form-item>
</el-form-item> <el-form-item label="SecretKey" prop="authorization.secretKey">
</div> <el-input v-model="account.authorization['secretKey']"></el-input>
<div v-if="account.type === 'DnsPod'"> </el-form-item>
<el-form-item label="ID" prop="authorization.id"> </div>
<el-input v-model="account.authorization['id']"></el-input> <div v-if="account.type === 'DnsPod'">
</el-form-item> <el-form-item label="ID" prop="authorization.id">
<el-form-item label="Token" prop="authorization.token"> <el-input v-model="account.authorization['id']"></el-input>
<el-input v-model="account.authorization['token']"></el-input> </el-form-item>
</el-form-item> <el-form-item label="Token" prop="authorization.token">
</div> <el-input v-model="account.authorization['token']"></el-input>
<div v-if="account.type === 'CloudFlare'"> </el-form-item>
<el-form-item label="EMAIL" prop="authorization.email"> </div>
<el-input v-model="account.authorization['email']"></el-input> <div v-if="account.type === 'CloudFlare'">
</el-form-item> <el-form-item label="EMAIL" prop="authorization.email">
<el-form-item label="API Key" prop="authorization.apiKey"> <el-input v-model="account.authorization['email']"></el-input>
<el-input v-model="account.authorization['apiKey']"></el-input> </el-form-item>
</el-form-item> <el-form-item label="API Key" prop="authorization.apiKey">
</div> <el-input v-model="account.authorization['apiKey']"></el-input>
</el-form> </el-form-item>
</div>
</el-form>
</el-col>
</el-row>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button> <el-button @click="handleClose" :disabled="loading">{{ $t('commons.button.cancel') }}</el-button>

20
frontend/src/views/website/ssl/dns-account/index.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<el-dialog <el-drawer v-model="open" :size="'50%'" :show-close="false">
v-model="open" <template #header>
:destroy-on-close="true" <DrawerHeader :header="$t('website.dnsAccountManage')" :back="handleClose" />
:close-on-click-modal="false" </template>
:title="$t('website.dnsAccountManage')"
>
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()"> <ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
<template #toolbar> <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> </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.name')" fix show-overflow-tooltip prop="name"></el-table-column>
<el-table-column :label="$t('commons.table.type')" prop="type"> <el-table-column :label="$t('commons.table.type')" prop="type">
@ -30,7 +30,7 @@
/> />
</ComplexTable> </ComplexTable>
<Create ref="createRef" @close="search()"></Create> <Create ref="createRef" @close="search()"></Create>
</el-dialog> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -66,6 +66,10 @@ const acceptParams = () => {
open.value = true; open.value = true;
}; };
const handleClose = () => {
open.value = false;
};
const search = () => { const search = () => {
const req = { const req = {
page: paginationConfig.currentPage, page: paginationConfig.currentPage,

30
frontend/src/views/website/ssl/index.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<RouterButton :buttons="routerButton" />
<LayoutContent :title="$t('website.ssl')"> <LayoutContent :title="$t('website.ssl')">
<template #prompt> <template #prompt>
<el-alert type="info" :closable="false"> <el-alert type="info" :closable="false">
@ -7,20 +8,20 @@
</template> </template>
</el-alert> </el-alert>
</template> </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> <template #main>
<br /> <br />
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()"> <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 <el-table-column
:label="$t('website.domain')" :label="$t('website.domain')"
fix fix
@ -94,6 +95,13 @@ const detailRef = ref();
let data = ref(); let data = ref();
let loading = ref(false); let loading = ref(false);
const routerButton = [
{
label: i18n.global.t('website.ssl'),
path: '/websites/ssl',
},
];
const buttons = [ const buttons = [
{ {
label: i18n.global.t('ssl.detail'), label: i18n.global.t('ssl.detail'),

7
frontend/src/views/website/website/create/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-drawer v-model="open" :size="'50%'" :show-close="false"> <el-drawer v-model="open" size="50%" :show-close="false">
<template #header> <template #header>
<Header :header="$t('website.create')" :back="handleClose"> <DrawerHeader :header="$t('website.create')" :back="handleClose">
<template #buttons> <template #buttons>
<el-button <el-button
type="primary" type="primary"
@ -17,7 +17,7 @@
{{ $t('website.proxy') }} {{ $t('website.proxy') }}
</el-button> </el-button>
</template> </template>
</Header> </DrawerHeader>
</template> </template>
<el-row> <el-row>
<el-col :span="22" :offset="1"> <el-col :span="22" :offset="1">
@ -178,7 +178,6 @@ import { ElForm, FormInstance, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
import Params from '@/views/app-store/detail/params/index.vue'; import Params from '@/views/app-store/detail/params/index.vue';
import Check from '../check/index.vue'; import Check from '../check/index.vue';
import Header from '@/components/drawer-header/index.vue';
const websiteForm = ref<FormInstance>(); const websiteForm = ref<FormInstance>();
const website = ref({ const website = ref({

20
frontend/src/views/website/website/default/index.vue
View File

@ -2,15 +2,15 @@
<el-dialog <el-dialog
v-model="open" v-model="open"
:title="$t('website.defaulServer')" :title="$t('website.defaulServer')"
width="25%" width="35%"
@close="handleClose" @close="handleClose"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-row> <el-row>
<el-col :offset="5"> <el-col :span="22" :offset="1">
<div style="text-align: center"> <el-form label-position="top">
<el-form-item :label="$t('website.defaulServer')"> <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 :value="0" :key="-1" :label="$t('website.noDefaulServer')"></el-option>
<el-option <el-option
v-for="(website, key) in websites" v-for="(website, key) in websites"
@ -20,13 +20,13 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </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-col>
<el-alert :closable="false">
<template #default>
<span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
</template>
</el-alert>
</el-row> </el-row>
<template #footer> <template #footer>