mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-11 16:57:09 +08:00
93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
<template>
|
|
<div class="table-page">
|
|
<!-- <a-row justify="space-between" align="center" class="header page_header">
|
|
<a-space wrap>
|
|
<div class="title">系统配置</div>
|
|
</a-space>
|
|
</a-row> -->
|
|
<a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
|
|
<a-tab-pane key="1">
|
|
<template #title><icon-settings /> 基础配置</template>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2">
|
|
<template #title><icon-safe /> 安全配置</template>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3">
|
|
<template #title><icon-email /> 邮件配置</template>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4">
|
|
<template #title><icon-lock /> 登录配置</template>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
<keep-alive>
|
|
<component :is="PanMap[activeKey]" />
|
|
</keep-alive>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import BasicSetting from './components/BasicSetting.vue'
|
|
import SecuritySetting from './components/SecuritySetting.vue'
|
|
import MailSetting from './components/MailSetting.vue'
|
|
import LoginSetting from './components/LoginSetting.vue'
|
|
|
|
defineOptions({ name: 'SystemConfig' })
|
|
|
|
const PanMap: Record<string, Component> = {
|
|
1: BasicSetting,
|
|
2: SecuritySetting,
|
|
3: MailSetting,
|
|
4: LoginSetting,
|
|
}
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const activeKey = ref('1')
|
|
watch(
|
|
() => route.query,
|
|
() => {
|
|
if (route.query.tabKey) {
|
|
activeKey.value = String(route.query.tabKey)
|
|
}
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
const change = (key: string | number) => {
|
|
activeKey.value = key as string
|
|
router.replace({ path: route.path, query: { tabKey: key } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.table-page {
|
|
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-nav-type-card-gutter .arco-tabs-tab) {
|
|
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>
|