feat: 调整证书页面样式

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

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,

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"
label-width="100px"
:rules="rules"
v-loading="loading"
>
<el-form-item :label="$t('website.email')" prop="email"> <el-form-item :label="$t('website.email')" prop="email">
<el-input v-model="account.email"></el-input> <el-input v-model="account.email"></el-input>
</el-form-item> </el-form-item>
</el-form> </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>

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();

View file

@ -1,15 +1,13 @@
<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 <el-form
ref="sslForm" ref="sslForm"
label-position="right" label-position="top"
:model="ssl" :model="ssl"
label-width="100px" label-width="100px"
:rules="rules" :rules="rules"
@ -19,7 +17,11 @@
<el-input v-model="ssl.primaryDomain"></el-input> <el-input v-model="ssl.primaryDomain"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('website.otherDomains')" prop="otherDomains"> <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-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 6 }"
v-model="ssl.otherDomains"
></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId"> <el-form-item :label="$t('website.acmeAccount')" prop="acmeAccountId">
<el-select v-model="ssl.acmeAccountId"> <el-select v-model="ssl.acmeAccountId">
@ -38,7 +40,11 @@
<el-radio label="http">HTTP</el-radio> <el-radio label="http">HTTP</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item :label="$t('website.dnsAccount')" prop="dnsAccountId" v-if="ssl.provider === 'dnsAccount'"> <el-form-item
:label="$t('website.dnsAccount')"
prop="dnsAccountId"
v-if="ssl.provider === 'dnsAccount'"
>
<el-select v-model="ssl.dnsAccountId"> <el-select v-model="ssl.dnsAccountId">
<el-option <el-option
v-for="(dns, index) in dnsAccounts" v-for="(dns, index) in dnsAccounts"
@ -52,7 +58,9 @@
<span>{{ $t('ssl.dnsResolveHelper') }}</span> <span>{{ $t('ssl.dnsResolveHelper') }}</span>
<div v-for="(re, index) in dnsResolve" :key="index"> <div v-for="(re, index) in dnsResolve" :key="index">
<el-descriptions direction="vertical" :column="4" border> <el-descriptions direction="vertical" :column="4" border>
<el-descriptions-item :label="$t('website.domain')">{{ re.domain }}</el-descriptions-item> <el-descriptions-item :label="$t('website.domain')">
{{ re.domain }}
</el-descriptions-item>
<div v-if="re.err != ''"> <div v-if="re.err != ''">
<el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item> <el-descriptions-item :label="$t('ssl.err')">{{ re.err }}</el-descriptions-item>
</div> </div>
@ -66,10 +74,12 @@
</el-descriptions> </el-descriptions>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('ssl.autoRenew')" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'"> <el-form-item :label="''" prop="autoRenew" v-if="ssl.provider !== 'dnsManual'">
<el-checkbox v-model="ssl.autoRenew" /> <el-checkbox v-model="ssl.autoRenew" :label="$t('ssl.autoRenew')" />
</el-form-item> </el-form-item>
</el-form> </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>
@ -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>

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';

View file

@ -7,7 +7,9 @@
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-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-form-item :label="$t('commons.table.name')" prop="name">
<el-input v-model="account.name"></el-input> <el-input v-model="account.name"></el-input>
</el-form-item> </el-form-item>
@ -46,6 +48,8 @@
</el-form-item> </el-form-item>
</div> </div>
</el-form> </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>

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,

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,9 +8,6 @@
</template> </template>
</el-alert> </el-alert>
</template> </template>
<template #main>
<br />
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
<template #toolbar> <template #toolbar>
<el-button type="primary" icon="Plus" @click="openSSL()"> <el-button type="primary" icon="Plus" @click="openSSL()">
{{ $t('commons.button.create') }} {{ $t('commons.button.create') }}
@ -21,6 +19,9 @@
{{ $t('website.dnsAccountManage') }} {{ $t('website.dnsAccountManage') }}
</el-button> </el-button>
</template> </template>
<template #main>
<br />
<ComplexTable :data="data" :pagination-config="paginationConfig" @search="search()">
<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'),

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({

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-col>
<el-alert :closable="false"> <el-alert :closable="false">
<template #default> <template #default>
<span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span> <span style="white-space: pre-line">{{ $t('website.defaulServerHelper') }}</span>
</template> </template>
</el-alert> </el-alert>
</el-col>
</el-row> </el-row>
<template #footer> <template #footer>