ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-09-09 20:57:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(system/config): 重构系统配置页面

Browse Source
This commit is contained in:
Charles7c
2024-11-21 22:52:24 +08:00
parent 61ef692c83
commit 930227ea0c
4 changed files with 267 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/views/system/config/components/BasicSetting.vue
View File

@@ -1,6 +1,14 @@
<template> <template>
<a-form ref="formRef" :model="form" :rules="rules" size="large" layout="vertical" :disabled="!isUpdate" class="form"> <a-spin :loading="loading">
<a-list class="list-layout" :bordered="false" :loading="loading"> <a-form
ref="formRef"
:model="form"
:rules="rules"
size="large"
layout="vertical"
:disabled="!isUpdate"
class="form"
>
<a-form-item class="image-item" field="SITE_LOGO" hide-label> <a-form-item class="image-item" field="SITE_LOGO" hide-label>
{{ siteConfig.SITE_LOGO.name }} {{ siteConfig.SITE_LOGO.name }}
<template #extra> <template #extra>
@@ -65,52 +73,51 @@
</template> </template>
</a-form-item> </a-form-item>
<a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name"> <a-form-item class="input-item" field="SITE_TITLE" :label="siteConfig.SITE_TITLE.name">
<a-input v-model.trim="form.SITE_TITLE" placeholder="请输入系统标题" :max-length="18" show-word-limit /> <a-input v-model.trim="form.SITE_TITLE" class="input-width" placeholder="请输入系统标题" :max-length="18" show-word-limit />
</a-form-item> </a-form-item>
<a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name"> <a-form-item class="input-item" field="SITE_DESCRIPTION" :label="siteConfig.SITE_DESCRIPTION.name">
<a-textarea <a-textarea
v-model.trim="form.SITE_DESCRIPTION" v-model.trim="form.SITE_DESCRIPTION"
class="input-width"
placeholder="请输入系统描述" placeholder="请输入系统描述"
:auto-size="{ minRows: 1, maxRows: 3 }" :auto-size="{ minRows: 1, maxRows: 3 }"
/> />
</a-form-item> </a-form-item>
<a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name"> <a-form-item class="input-item" field="SITE_COPYRIGHT" :label="siteConfig.SITE_COPYRIGHT.name">
<a-input v-model.trim="form.SITE_COPYRIGHT" placeholder="请输入版权信息" /> <a-input v-model.trim="form.SITE_COPYRIGHT" class="input-width" placeholder="请输入版权信息" />
</a-form-item> </a-form-item>
<a-form-item class="input-item" field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name"> <a-form-item field="SITE_BEIAN" :label="siteConfig.SITE_BEIAN.name">
<a-input v-model.trim="form.SITE_BEIAN" placeholder="请输入备案号" :max-length="30" show-word-limit style="width: 100%;" /> <a-input v-model.trim="form.SITE_BEIAN" class="input-width" placeholder="请输入备案号" :max-length="30" show-word-limit />
</a-form-item> </a-form-item>
<div style="margin-top: 20px"> <a-space style="margin-bottom: 16px">
<a-space> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> <template #icon>
<template #icon> <icon-edit />
<icon-edit /> </template>修改
</template>修改 </a-button>
</a-button> <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue"> <template #icon>
<template #icon> <icon-undo />
<icon-undo /> </template>恢复默认
</template>恢复默认 </a-button>
</a-button> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<a-button v-if="isUpdate" type="primary" @click="handleSave"> <template #icon>
<template #icon> <icon-save />
<icon-save /> </template>保存
</template>保存 </a-button>
</a-button> <a-button v-if="isUpdate" @click="reset">
<a-button v-if="isUpdate" @click="reset"> <template #icon>
<template #icon> <icon-refresh />
<icon-refresh /> </template>重置
</template>重置 </a-button>
</a-button> <a-button v-if="isUpdate" @click="handleCancel">
<a-button v-if="isUpdate" @click="handleCancel"> <template #icon>
<template #icon> <icon-undo />
<icon-undo /> </template>取消
</template>取消 </a-button>
</a-button> </a-space>
</a-space> </a-form>
</div> </a-spin>
</a-list>
</a-form>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -306,18 +313,23 @@ onMounted(() => {
line-height: 46px; line-height: 46px;
} }
.input-width {
width: 500px;
}
.arco-form .image-item, .arco-form .image-item,
.input-item { .input-item {
margin-bottom: 5px;
}
:deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
margin-bottom: 0; margin-bottom: 0;
} }
:deep(.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item) { // responsive
padding: 13px; .mobile {
border-bottom: 1px solid var(--color-fill-3); .input-width {
} width: 100%;
}
:deep(.arco-form-item-wrapper-col) {
width: 100%;
max-width: 500px;
} }
</style> </style>

111
src/views/system/config/components/MailSetting.vue
View File

@@ -1,59 +1,62 @@
<template> <template>
<a-space wrap :size="30"> <a-spin :loading="loading">
<a-form <a-form
ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left" ref="formRef"
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error :model="form"
:rules="rules"
auto-label-width
label-align="left"
:layout="width >= 500 ? 'horizontal' : 'vertical'"
:disabled="!isUpdate" scroll-to-first-error
> >
<a-list :bordered="false" :loading="loading"> <a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk>
<a-form-item field="MAIL_PROTOCOL" :label="mailConfig.MAIL_PROTOCOL.name" hide-asterisk> <a-select v-model.trim="form.MAIL_PROTOCOL">
<a-select v-model.trim="form.MAIL_PROTOCOL"> <a-option label="SMTP" value="smtp" />
<a-option label="SMTP" value="smtp" /> </a-select>
</a-select> </a-form-item>
</a-form-item> <a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk>
<a-form-item field="MAIL_HOST" :label="mailConfig.MAIL_HOST.name" hide-asterisk> <a-input v-model.trim="form.MAIL_HOST" class="input-width" />
<a-input v-model.trim="form.MAIL_HOST" /> </a-form-item>
</a-form-item> <a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk>
<a-form-item field="MAIL_PORT" :label="mailConfig.MAIL_PORT.name" hide-asterisk> <a-input-number v-model="form.MAIL_PORT" class="input-width" :min="0" />
<a-input-number v-model="form.MAIL_PORT" :min="0" /> </a-form-item>
</a-form-item> <a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk>
<a-form-item field="MAIL_USERNAME" :label="mailConfig.MAIL_USERNAME.name" hide-asterisk> <a-input v-model.trim="form.MAIL_USERNAME" class="input-width" />
<a-input v-model.trim="form.MAIL_USERNAME" /> </a-form-item>
</a-form-item> <a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk>
<a-form-item field="MAIL_PASSWORD" :label="mailConfig.MAIL_PASSWORD?.name" hide-asterisk> <a-input-password v-model.trim="form.MAIL_PASSWORD" class="input-width" />
<a-input-password v-model.trim="form.MAIL_PASSWORD" /> </a-form-item>
</a-form-item> <a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk>
<a-form-item field="MAIL_SSL_ENABLED" :label="mailConfig.MAIL_SSL_ENABLED?.name" hide-asterisk> <a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED">
<a-radio-group v-model:model-value="form.MAIL_SSL_ENABLED"> <a-radio value="1">启用</a-radio>
<a-radio value="1">启用</a-radio> <a-radio value="0">禁用</a-radio>
<a-radio value="0">禁用</a-radio> </a-radio-group>
</a-radio-group> </a-form-item>
</a-form-item> <a-form-item
<a-form-item v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name"
v-if="form.MAIL_SSL_ENABLED === '1'" field="MAIL_SSL_PORT" :label="mailConfig.MAIL_SSL_PORT.name" hide-asterisk
hide-asterisk >
> <a-input-number v-model="form.MAIL_SSL_PORT" class="input-width" :min="0" />
<a-input-number v-model="form.MAIL_SSL_PORT" :min="0" /> </a-form-item>
</a-form-item> <a-space style="margin-bottom: 16px">
<a-space> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> <template #icon><icon-edit /></template>修改
<template #icon><icon-edit /></template>修改 </a-button>
</a-button> <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue"> <template #icon><icon-undo /></template>恢复默认
<template #icon><icon-undo /></template>恢复默认 </a-button>
</a-button> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<a-button v-if="isUpdate" type="primary" @click="handleSave"> <template #icon><icon-save /></template>保存
<template #icon><icon-save /></template>保存 </a-button>
</a-button> <a-button v-if="isUpdate" @click="reset">
<a-button v-if="isUpdate" @click="reset"> <template #icon><icon-refresh /></template>重置
<template #icon><icon-refresh /></template>重置 </a-button>
</a-button> <a-button v-if="isUpdate" @click="handleCancel">
<a-button v-if="isUpdate" @click="handleCancel"> <template #icon><icon-undo /></template>取消
<template #icon><icon-undo /></template>取消 </a-button>
</a-button> </a-space>
</a-space>
</a-list>
</a-form> </a-form>
</a-space> </a-spin>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -176,4 +179,8 @@ onMounted(() => {
:deep(.arco-form-item.arco-form-item-has-help) { :deep(.arco-form-item.arco-form-item-has-help) {
margin-bottom: 5px; margin-bottom: 5px;
} }
.input-width, :deep(.arco-select-view-single) {
width: 220px;
}
</style> </style>

202
src/views/system/config/components/SecuritySetting.vue
View File

@@ -1,107 +1,111 @@
<template> <template>
<a-space wrap :size="30"> <a-spin :loading="loading">
<a-form <a-form
ref="formRef" :model="form" :rules="rules" auto-label-width label-align="left" ref="formRef"
:layout="width >= 500 ? 'horizontal' : 'vertical'" :disabled="!isUpdate" scroll-to-first-error :model="form"
:rules="rules"
auto-label-width
label-align="left"
:layout="width >= 500 ? 'horizontal' : 'vertical'"
:disabled="!isUpdate"
scroll-to-first-error
> >
<a-list :bordered="false" :loading="loading"> <a-form-item
<a-form-item field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name"
field="PASSWORD_ERROR_LOCK_COUNT" :label="securityConfig.PASSWORD_ERROR_LOCK_COUNT.name" :help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk
:help="securityConfig.PASSWORD_ERROR_LOCK_COUNT.description" hide-asterisk >
<a-input-number
v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0"
:min="0" :max="10"
> >
<a-input-number <template #append>次</template>
v-model="form.PASSWORD_ERROR_LOCK_COUNT" class="input-width" :default-value="0" :precision="0" </a-input-number>
:min="0" :max="10" </a-form-item>
> <a-form-item
<template #append>次</template> field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name"
</a-input-number> :help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk
</a-form-item> >
<a-form-item <a-input-number
field="PASSWORD_ERROR_LOCK_MINUTES" :label="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.name" v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1"
:help="securityConfig.PASSWORD_ERROR_LOCK_MINUTES.description" hide-asterisk :max="1440"
> >
<a-input-number <template #append>分钟</template>
v-model="form.PASSWORD_ERROR_LOCK_MINUTES" class="input-width" :precision="0" :min="1" </a-input-number>
:max="1440" </a-form-item>
> <a-form-item
<template #append>分钟</template> field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name"
</a-input-number> :help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk
</a-form-item> >
<a-form-item <a-input-number
field="PASSWORD_EXPIRATION_DAYS" :label="securityConfig.PASSWORD_EXPIRATION_DAYS.name" v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0"
:help="securityConfig.PASSWORD_EXPIRATION_DAYS.description" hide-asterisk :max="999"
> >
<a-input-number <template #append>天</template>
v-model="form.PASSWORD_EXPIRATION_DAYS" class="input-width" :precision="0" :min="0" </a-input-number>
:max="999" </a-form-item>
> <a-form-item
<template #append>天</template> :label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name"
</a-input-number> field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description"
</a-form-item> hide-asterisk
<a-form-item >
:label="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.name" <a-input-number
field="PASSWORD_EXPIRATION_WARNING_DAYS" :help="securityConfig.PASSWORD_EXPIRATION_WARNING_DAYS.description" v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0"
hide-asterisk :max="998"
> >
<a-input-number <template #append>天</template>
v-model="form.PASSWORD_EXPIRATION_WARNING_DAYS" class="input-width" :precision="0" :min="0" </a-input-number>
:max="998" </a-form-item>
> <a-form-item
<template #append>天</template> field="PASSWORD_REPETITION_TIMES" :label="securityConfig.PASSWORD_REPETITION_TIMES.name"
</a-input-number> :help="securityConfig.PASSWORD_REPETITION_TIMES.description" hide-asterisk
</a-form-item> >
<a-form-item <a-input-number
field="PASSWORD_REPETITION_TIMES" :label="securityConfig.PASSWORD_REPETITION_TIMES.name" v-model="form.PASSWORD_REPETITION_TIMES" class="input-width" :precision="0" :min="3"
:help="securityConfig.PASSWORD_REPETITION_TIMES.description" hide-asterisk :max="32"
> >
<a-input-number <template #append>次</template>
v-model="form.PASSWORD_REPETITION_TIMES" class="input-width" :precision="0" :min="3" </a-input-number>
:max="32" </a-form-item>
> <a-form-item
<template #append>次</template> field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name"
</a-input-number> :help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk
</a-form-item> >
<a-form-item <a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" />
field="PASSWORD_MIN_LENGTH" :label="securityConfig.PASSWORD_MIN_LENGTH.name" </a-form-item>
:help="securityConfig.PASSWORD_MIN_LENGTH.description" hide-asterisk <a-form-item
> field="PASSWORD_ALLOW_CONTAIN_USERNAME"
<a-input-number v-model="form.PASSWORD_MIN_LENGTH" class="input-width" :precision="0" :min="8" :max="32" /> :label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name"
</a-form-item> >
<a-form-item <a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0">
field="PASSWORD_ALLOW_CONTAIN_USERNAME" <template #checked>是</template>
:label="securityConfig.PASSWORD_ALLOW_CONTAIN_USERNAME.name" <template #unchecked>否</template>
> </a-switch>
<a-switch v-model="form.PASSWORD_ALLOW_CONTAIN_USERNAME" type="round" :checked-value="1" :unchecked-value="0"> </a-form-item>
<template #checked>是</template> <a-form-item field="PASSWORD_REQUIRE_SYMBOLS" :label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name">
<template #unchecked>否</template> <a-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0">
</a-switch> <template #checked>是</template>
</a-form-item> <template #unchecked>否</template>
<a-form-item field="PASSWORD_REQUIRE_SYMBOLS" :label="securityConfig.PASSWORD_REQUIRE_SYMBOLS.name"> </a-switch>
<a-switch v-model="form.PASSWORD_REQUIRE_SYMBOLS" type="round" :checked-value="1" :unchecked-value="0"> </a-form-item>
<template #checked>是</template> <a-space style="margin-bottom: 16px">
<template #unchecked>否</template> <a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate">
</a-switch> <template #icon><icon-edit /></template>修改
</a-form-item> </a-button>
<a-space> <a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue">
<a-button v-if="!isUpdate" v-permission="['system:config:update']" type="primary" @click="onUpdate"> <template #icon><icon-undo /></template>恢复默认
<template #icon><icon-edit /></template>修改 </a-button>
</a-button> <a-button v-if="isUpdate" type="primary" @click="handleSave">
<a-button v-if="!isUpdate" v-permission="['system:config:reset']" @click="onResetValue"> <template #icon><icon-save /></template>保存
<template #icon><icon-undo /></template>恢复默认 </a-button>
</a-button> <a-button v-if="isUpdate" @click="reset">
<a-button v-if="isUpdate" type="primary" @click="handleSave"> <template #icon><icon-refresh /></template>重置
<template #icon><icon-save /></template>保存 </a-button>
</a-button> <a-button v-if="isUpdate" @click="handleCancel">
<a-button v-if="isUpdate" @click="reset"> <template #icon><icon-undo /></template>取消
<template #icon><icon-refresh /></template>重置 </a-button>
</a-button> </a-space>
<a-button v-if="isUpdate" @click="handleCancel">
<template #icon><icon-undo /></template>取消
</a-button>
</a-space>
</a-list>
</a-form> </a-form>
</a-space> </a-spin>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -230,11 +234,11 @@ onMounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.input-width {
width: 196px;
}
:deep(.arco-form-item.arco-form-item-has-help) { :deep(.arco-form-item.arco-form-item-has-help) {
margin-bottom: 5px; margin-bottom: 5px;
} }
.input-width {
width: 200px;
}
</style> </style>

75
src/views/system/config/index.vue
View File

@@ -1,21 +1,18 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card class="general-card" title="系统配置"> <a-row justify="space-between" align="center" class="header page_header">
<a-tabs v-model:active-key="activeKey" position="right" @change="change"> <a-space wrap>
<a-tab-pane key="1" title="基础配置"> <div class="title">系统配置</div>
<BasicSetting /> </a-space>
</a-tab-pane> </a-row>
<a-tab-pane key="2" title="邮件配置"> <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
<MailSetting /> <a-tab-pane key="1" title="基础配置" />
</a-tab-pane> <a-tab-pane key="2" title="邮件配置" />
<a-tab-pane key="3" title="安全配置"> <a-tab-pane key="3" title="安全配置" />
<SecuritySetting /> </a-tabs>
</a-tab-pane> <keep-alive>
</a-tabs> <component :is="PanMap[activeKey]" />
<!-- <keep-alive> </keep-alive>
<component :is="PanMap[activeKey]" />
</keep-alive> -->
</a-card>
</div> </div>
</template> </template>
@@ -26,11 +23,13 @@ import MailSetting from './components/MailSetting.vue'
import SecuritySetting from './components/SecuritySetting.vue' import SecuritySetting from './components/SecuritySetting.vue'
defineOptions({ name: 'SystemConfig' }) defineOptions({ name: 'SystemConfig' })
// const PanMap: Record<string, Component> = {
// 1: BasicSetting, const PanMap: Record<string, Component> = {
// 2: MailSetting, 1: BasicSetting,
// 3: SecuritySetting 2: MailSetting,
// } 3: SecuritySetting,
}
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const activeKey = ref('1') const activeKey = ref('1')
@@ -49,12 +48,34 @@ const change = (key: string | number) => {
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="scss">
:deep(.arco-tabs-content) { .table-page {
padding-top: 5px; overflow-y: auto;
}
:deep(.arco-tabs .arco-tabs-nav-type-card-gutter .arco-tabs-tab-active) {
box-shadow: inset 0 2px 0 rgb(var(--primary-6)), inset -1px 0 0 var(--color-border-2),
inset 1px 0 0 var(--color-border-2);
position: relative;
} }
:deep(.arco-tabs-tab) { :deep(.arco-tabs-nav-type-card-gutter .arco-tabs-tab) {
background-color: var(--color-fill-2); border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
:deep(.arco-tabs-type-card-gutter > .arco-tabs-content) {
border: none;
}
:deep(.arco-tabs-nav::before) {
left: -20px;
right: -20px;
}
:deep(.arco-tabs) {
overflow: visible;
}
:deep(.arco-tabs-nav) {
overflow: visible;
} }
</style> </style>