<!-- 设置面板 -->
|
<template>
|
<div class="layout-settings">
|
<SettingDrawer v-model="showDrawer" @open="handleOpen" @close="handleClose">
|
<!-- 头部关闭按钮 -->
|
<SettingHeader @close="closeDrawer" />
|
<!-- 主题风格 -->
|
<ThemeSettings />
|
<!-- 菜单布局 -->
|
<MenuLayoutSettings />
|
<!-- 菜单风格 -->
|
<MenuStyleSettings />
|
<!-- 系统主题色 -->
|
<ColorSettings />
|
<!-- 盒子样式 -->
|
<BoxStyleSettings />
|
<!-- 容器宽度 -->
|
<ContainerSettings />
|
<!-- 基础配置 -->
|
<BasicSettings />
|
<!-- 操作按钮 -->
|
<SettingActions />
|
</SettingDrawer>
|
</div>
|
</template>
|
|
<script setup>
|
import SettingHeader from './widget/SettingHeader.vue'
|
|
import MenuLayoutSettings from './widget/MenuLayoutSettings.vue'
|
|
import ColorSettings from './widget/ColorSettings.vue'
|
|
import ContainerSettings from './widget/ContainerSettings.vue'
|
|
import SettingActions from './widget/SettingActions.vue'
|
|
import { useSettingsPanel } from './composables/useSettingsPanel'
|
defineOptions({ name: 'ArtSettingsPanel' })
|
const props = defineProps({
|
open: { required: false }
|
})
|
const settingsPanel = useSettingsPanel()
|
const { showDrawer } = settingsPanel
|
const { handleOpen, handleClose, closeDrawer } = settingsPanel.useDrawerControl()
|
const { initializeSettings, cleanupSettings } = settingsPanel.useSettingsInitializer()
|
settingsPanel.usePropsWatcher(props)
|
onMounted(() => {
|
initializeSettings()
|
})
|
onUnmounted(() => {
|
cleanupSettings()
|
})
|
</script>
|
|
<style lang="scss">
|
@use './style';
|
</style>
|
