{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\Settings.vue?vue&type=style&index=0&id=963be860&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\Settings.vue","mtime":1787323035069},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\css-loader\\dist\\cjs.js","mtime":1787309792478},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1787309794547},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\postcss-loader\\src\\index.js","mtime":1787309793084},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\sass-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgouc2V0dGluZy1kcmF3ZXItaW5kZXggewogIHBhZGRpbmc6IDAgMjBweDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwoKICAmX190aXRsZSB7CiAgICBtYXJnaW4tdG9wOiAyNnB4OwogICAgbWFyZ2luLWJvdHRvbTogMTJweDsKICAgIGZvbnQtd2VpZ2h0OiA3MDA7CiAgICBjb2xvcjogIzMzMzsKICB9CgogICZfX21haW4tY29sb3IgewogICAgYm9yZGVyLXJhZGl1czogNHB4OwogIH0KCiAgLnRoZW1lLWNvbG9yIHsKICAgIC51bC1jb2xvciB7CiAgICAgIG1hcmdpbjogMDsKICAgICAgcGFkZGluZzogMDsKCiAgICAgIC5saS10aGVtZSB7CiAgICAgICAgbGlzdC1zdHlsZTogbm9uZTsKICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgaGVpZ2h0OiAzMHB4OwogICAgICAgIG1hcmdpbi1yaWdodDogNnB4OwogICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICBjdXJzb3I6IHBvaW50ZXI7CiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7CgogICAgICAgICYuYWN0aXZlIHsKICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDJweCAjZmZmLCAwIDAgMCA0cHggY3VycmVudENvbG9yOwogICAgICAgIH0KCiAgICAgICAgLmljb24tY2hlY2sgewogICAgICAgICAgY29sb3I6ICNmZmY7CiAgICAgICAgICBmb250LXNpemU6IDE0cHg7CiAgICAgICAgICBsaW5lLWhlaWdodDogMzBweDsKICAgICAgICB9CiAgICAgIH0KICAgIH0KICB9CgogIC5zZXR0aW5nLWl0ZW0gewogICAgZGlzcGxheTogZmxleDsKICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47CiAgICBwYWRkaW5nOiAxMHB4IDA7CiAgICBmb250LXNpemU6IDE0cHg7CiAgICBjb2xvcjogIzYwNjI2NjsKCiAgICAmX192YWx1ZSB7CiAgICAgIGRpc3BsYXk6IGlubGluZS1mbGV4OwogICAgICBhbGlnbi1pdGVtczogY2VudGVyOwogICAgICBnYXA6IDRweDsKICAgICAgcGFkZGluZzogMCAxMnB4OwogICAgICBoZWlnaHQ6IDMwcHg7CiAgICAgIGxpbmUtaGVpZ2h0OiAzMHB4OwogICAgICBib3JkZXItcmFkaXVzOiA0cHg7CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNkY2RmZTY7CiAgICAgIGN1cnNvcjogcG9pbnRlcjsKICAgICAgZm9udC1zaXplOiAxM3B4OwogICAgfQogIH0KfQo="},{"version":3,"sources":["Settings.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Settings.vue","sourceRoot":"src/layout/components","sourcesContent":["<template>\n  <el-drawer\n    :visible.sync=\"visible\"\n    direction=\"rtl\"\n    size=\"280px\"\n    :title=\"'布局设置'\"\n    class=\"drawer-setting\"\n    :with-header=\"false\"\n    :modal-append-to-body=\"false\"\n  >\n    <div class=\"setting-drawer-index\">\n      <div class=\"setting-drawer-index__title\">主题色</div>\n      <div class=\"setting-drawer-index__main-color theme-color\">\n        <ul class=\"ul-color\">\n          <li\n            v-for=\"item in colorList\"\n            :key=\"item.color\"\n            class=\"li-theme\"\n            :class=\"{ active: item.color === theme }\"\n            :style=\"{ background: item.color }\"\n            @click=\"changeTheme(item.color)\"\n          >\n            <i v-show=\"item.color === theme\" class=\"icon-check el-icon-check\" />\n          </li>\n        </ul>\n      </div>\n\n      <div class=\"setting-drawer-index__title\">界面功能</div>\n      <div class=\"setting-item\">\n        <span class=\"setting-item__label\">侧边栏颜色</span>\n        <el-dropdown trigger=\"click\" @command=\"handleSideTheme\">\n          <span class=\"setting-item__value\">\n            {{ sideThemeLabel }}\n            <i class=\"el-icon-arrow-down\" />\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item command=\"theme-dark\">深色主题</el-dropdown-item>\n            <el-dropdown-item command=\"theme-light\">浅色主题</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      </div>\n\n      <div class=\"setting-item\">\n        <span class=\"setting-item__label\">导航栏模式</span>\n        <el-dropdown trigger=\"click\" @command=\"handleNavType\">\n          <span class=\"setting-item__value\">\n            {{ navTypeLabel }}\n            <i class=\"el-icon-arrow-down\" />\n          </span>\n          <el-dropdown-menu slot=\"dropdown\">\n            <el-dropdown-item command=\"1\">侧边栏模式</el-dropdown-item>\n            <el-dropdown-item command=\"2\">顶部导航模式</el-dropdown-item>\n            <el-dropdown-item command=\"3\">侧栏+顶栏</el-dropdown-item>\n          </el-dropdown-menu>\n        </el-dropdown>\n      </div>\n\n      <div class=\"setting-item\">\n        <span class=\"setting-item__label\"> TagsView 标签栏</span>\n        <el-switch\n          :value=\"tagsView\"\n          @change=\"changeSetting({ key: 'tagsView', value: !tagsView })\"\n        />\n      </div>\n\n      <div class=\"setting-item\">\n        <span class=\"setting-item__label\"> 侧边栏 Logo</span>\n        <el-switch\n          :value=\"sidebarLogo\"\n          @change=\"changeSetting({ key: 'sidebarLogo', value: !sidebarLogo })\"\n        />\n      </div>\n\n      <div class=\"setting-item\">\n        <span class=\"setting-item__label\"> 固定 Header</span>\n        <el-switch\n          :value=\"fixedHeader\"\n          @change=\"changeSetting({ key: 'fixedHeader', value: !fixedHeader })\"\n        />\n      </div>\n    </div>\n  </el-drawer>\n</template>\n\n<script>\nimport { mapState } from 'vuex'\n\nexport default {\n  name: 'Settings',\n  data() {\n    return {\n      visible: false,\n      /**\n       * 主题色列表\n       */\n      colorList: [\n        { color: '#00875A', title: '教育绿' },\n        { color: '#304156', title: '深蓝' },\n        { color: '#409EFF', title: '亮蓝' },\n        { color: '#626AEF', title: '亮紫' },\n        { color: '#EB2F96', title: '粉红' },\n        { color: '#F8721F', title: '橙色' },\n        { color: '#CD201F', title: '红色' }\n      ]\n    }\n  },\n  computed: {\n    ...mapState({\n      theme: state => state.settings.theme,\n      sideTheme: state => state.settings.sideTheme,\n      navType: state => state.settings.navType,\n      tagsView: state => state.settings.tagsView,\n      sidebarLogo: state => state.settings.sidebarLogo,\n      fixedHeader: state => state.settings.fixedHeader\n    }),\n    sideThemeLabel() {\n      return this.sideTheme === 'theme-dark' ? '深色主题' : '浅色主题'\n    },\n    navTypeLabel() {\n      const map = { 1: '侧边栏模式', 2: '顶部导航模式', 3: '侧栏+顶栏' }\n      return map[this.navType] || '侧边栏模式'\n    }\n  },\n  methods: {\n    openSetting() {\n      this.visible = true\n    },\n    closeSetting() {\n      this.visible = false\n    },\n    // 修改主题色\n    changeTheme(color) {\n      this.$store.dispatch('settings/changeSetting', { key: 'theme', value: color })\n    },\n    handleSideTheme(command) {\n      this.changeSetting({ key: 'sideTheme', value: command })\n    },\n    handleNavType(command) {\n      this.changeSetting({ key: 'navType', value: Number(command) })\n    },\n    // 修改布局设置，并持久化到本地存储\n    changeSetting(data) {\n      this.$store.dispatch('settings/changeSetting', data)\n      const setting = JSON.parse(localStorage.getItem('layout-setting') || '{}')\n      setting[data.key] = data.value\n      localStorage.setItem('layout-setting', JSON.stringify(setting))\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.setting-drawer-index {\n  padding: 0 20px;\n  box-sizing: border-box;\n\n  &__title {\n    margin-top: 26px;\n    margin-bottom: 12px;\n    font-weight: 700;\n    color: #333;\n  }\n\n  &__main-color {\n    border-radius: 4px;\n  }\n\n  .theme-color {\n    .ul-color {\n      margin: 0;\n      padding: 0;\n\n      .li-theme {\n        list-style: none;\n        display: inline-block;\n        width: 30px;\n        height: 30px;\n        margin-right: 6px;\n        border-radius: 50%;\n        cursor: pointer;\n        text-align: center;\n        vertical-align: middle;\n\n        &.active {\n          box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;\n        }\n\n        .icon-check {\n          color: #fff;\n          font-size: 14px;\n          line-height: 30px;\n        }\n      }\n    }\n  }\n\n  .setting-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 0;\n    font-size: 14px;\n    color: #606266;\n\n    &__value {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 0 12px;\n      height: 30px;\n      line-height: 30px;\n      border-radius: 4px;\n      border: 1px solid #dcdfe6;\n      cursor: pointer;\n      font-size: 13px;\n    }\n  }\n}\n</style>"]}]}