education/frontend/node_modules/.cache/vue-loader/bad711c3d479c64af913a22581f2f4e8.json

{"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=script&lang=js","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\layout\\components\\Settings.vue","mtime":1787323035069},{"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\\babel-loader\\lib\\index.js","mtime":1787309793142},{"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:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCB7IG1hcFN0YXRlIH0gZnJvbSAndnVleCcKCmV4cG9ydCBkZWZhdWx0IHsKICBuYW1lOiAnU2V0dGluZ3MnLAogIGRhdGEoKSB7CiAgICByZXR1cm4gewogICAgICB2aXNpYmxlOiBmYWxzZSwKICAgICAgLyoqCiAgICAgICAqIOS4u+mimOiJsuWIl+ihqAogICAgICAgKi8KICAgICAgY29sb3JMaXN0OiBbCiAgICAgICAgeyBjb2xvcjogJyMwMDg3NUEnLCB0aXRsZTogJ+aVmeiCsue7vycgfSwKICAgICAgICB7IGNvbG9yOiAnIzMwNDE1NicsIHRpdGxlOiAn5rex6JOdJyB9LAogICAgICAgIHsgY29sb3I6ICcjNDA5RUZGJywgdGl0bGU6ICfkuq7ok50nIH0sCiAgICAgICAgeyBjb2xvcjogJyM2MjZBRUYnLCB0aXRsZTogJ+S6rue0qycgfSwKICAgICAgICB7IGNvbG9yOiAnI0VCMkY5NicsIHRpdGxlOiAn57KJ57qiJyB9LAogICAgICAgIHsgY29sb3I6ICcjRjg3MjFGJywgdGl0bGU6ICfmqZnoibInIH0sCiAgICAgICAgeyBjb2xvcjogJyNDRDIwMUYnLCB0aXRsZTogJ+e6ouiJsicgfQogICAgICBdCiAgICB9CiAgfSwKICBjb21wdXRlZDogewogICAgLi4ubWFwU3RhdGUoewogICAgICB0aGVtZTogc3RhdGUgPT4gc3RhdGUuc2V0dGluZ3MudGhlbWUsCiAgICAgIHNpZGVUaGVtZTogc3RhdGUgPT4gc3RhdGUuc2V0dGluZ3Muc2lkZVRoZW1lLAogICAgICBuYXZUeXBlOiBzdGF0ZSA9PiBzdGF0ZS5zZXR0aW5ncy5uYXZUeXBlLAogICAgICB0YWdzVmlldzogc3RhdGUgPT4gc3RhdGUuc2V0dGluZ3MudGFnc1ZpZXcsCiAgICAgIHNpZGViYXJMb2dvOiBzdGF0ZSA9PiBzdGF0ZS5zZXR0aW5ncy5zaWRlYmFyTG9nbywKICAgICAgZml4ZWRIZWFkZXI6IHN0YXRlID0+IHN0YXRlLnNldHRpbmdzLmZpeGVkSGVhZGVyCiAgICB9KSwKICAgIHNpZGVUaGVtZUxhYmVsKCkgewogICAgICByZXR1cm4gdGhpcy5zaWRlVGhlbWUgPT09ICd0aGVtZS1kYXJrJyA/ICfmt7HoibLkuLvpopgnIDogJ+a1heiJsuS4u+mimCcKICAgIH0sCiAgICBuYXZUeXBlTGFiZWwoKSB7CiAgICAgIGNvbnN0IG1hcCA9IHsgMTogJ+S+p+i+ueagj+aooeW8jycsIDI6ICfpobbpg6jlr7zoiKrmqKHlvI8nLCAzOiAn5L6n5qCPK+mhtuagjycgfQogICAgICByZXR1cm4gbWFwW3RoaXMubmF2VHlwZV0gfHwgJ+S+p+i+ueagj+aooeW8jycKICAgIH0KICB9LAogIG1ldGhvZHM6IHsKICAgIG9wZW5TZXR0aW5nKCkgewogICAgICB0aGlzLnZpc2libGUgPSB0cnVlCiAgICB9LAogICAgY2xvc2VTZXR0aW5nKCkgewogICAgICB0aGlzLnZpc2libGUgPSBmYWxzZQogICAgfSwKICAgIC8vIOS/ruaUueS4u+mimOiJsgogICAgY2hhbmdlVGhlbWUoY29sb3IpIHsKICAgICAgdGhpcy4kc3RvcmUuZGlzcGF0Y2goJ3NldHRpbmdzL2NoYW5nZVNldHRpbmcnLCB7IGtleTogJ3RoZW1lJywgdmFsdWU6IGNvbG9yIH0pCiAgICB9LAogICAgaGFuZGxlU2lkZVRoZW1lKGNvbW1hbmQpIHsKICAgICAgdGhpcy5jaGFuZ2VTZXR0aW5nKHsga2V5OiAnc2lkZVRoZW1lJywgdmFsdWU6IGNvbW1hbmQgfSkKICAgIH0sCiAgICBoYW5kbGVOYXZUeXBlKGNvbW1hbmQpIHsKICAgICAgdGhpcy5jaGFuZ2VTZXR0aW5nKHsga2V5OiAnbmF2VHlwZScsIHZhbHVlOiBOdW1iZXIoY29tbWFuZCkgfSkKICAgIH0sCiAgICAvLyDkv67mlLnluIPlsYDorr7nva7vvIzlubbmjIHkuYXljJbliLDmnKzlnLDlrZjlgqgKICAgIGNoYW5nZVNldHRpbmcoZGF0YSkgewogICAgICB0aGlzLiRzdG9yZS5kaXNwYXRjaCgnc2V0dGluZ3MvY2hhbmdlU2V0dGluZycsIGRhdGEpCiAgICAgIGNvbnN0IHNldHRpbmcgPSBKU09OLnBhcnNlKGxvY2FsU3RvcmFnZS5nZXRJdGVtKCdsYXlvdXQtc2V0dGluZycpIHx8ICd7fScpCiAgICAgIHNldHRpbmdbZGF0YS5rZXldID0gZGF0YS52YWx1ZQogICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnbGF5b3V0LXNldHRpbmcnLCBKU09OLnN0cmluZ2lmeShzZXR0aW5nKSkKICAgIH0KICB9Cn0K"},{"version":3,"sources":["Settings.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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>"]}]}