<template>
    <el-form>
    <!-- 布局设置表单标题 -->
    <h2>布局设置</h2>
    
    <!-- 导航条类型设置项 -->
    <el-form-item label="导航条类型">
    <!-- 导航条类型选择框，使用 radio 按钮选择 'default' 或 'inverse' -->
    <el-radio-group v-model="navbarLayoutType">
    <el-radio label="default" border>default</el-radio>
    <el-radio label="inverse" border>inverse</el-radio>
    </el-radio-group>
    </el-form-item>
    
    <!-- 侧边栏皮肤设置项 -->
    <el-form-item label="侧边栏皮肤">
    <!-- 侧边栏皮肤选择框，使用 radio 按钮选择 'light' 或 'dark' -->
    <el-radio-group v-model="sidebarLayoutSkin">
    <el-radio label="light" border>light</el-radio>
    <el-radio label="dark" border>dark</el-radio>
    </el-radio-group>
    </el-form-item>
    </el-form>
    </template>
<script>
export default {
computed: {
// 计算属性：获取并设置导航条类型
navbarLayoutType: {
// getter：从 Vuex 中获取 navbarLayoutType 的当前值
get() { 
return this.$store.state.common.navbarLayoutType 
},
// setter：将新的值提交到 Vuex 中，更新 navbarLayoutType
set(val) { 
this.$store.commit('common/updateNavbarLayoutType', val) 
}
},
// 计算属性：获取并设置侧边栏皮肤
sidebarLayoutSkin: {
// getter：从 Vuex 中获取 sidebarLayoutSkin 的当前值
get() { 
return this.$store.state.common.sidebarLayoutSkin 
},
// setter：将新的值提交到 Vuex 中，更新 sidebarLayoutSkin
set(val) { 
this.$store.commit('common/updateSidebarLayoutSkin', val) 
}
}
}
}
</script>
    