spa/src/components/SettingDrawer/index.vue

<template>
  <a-drawer width="300" placement="right" @close="onClose" :closable="false" :visible="visible">
    <div :style="{ marginBottom: '24px' }">
      <h3>整体风格设置</h3>

      <div class="setting-drawer-index-blockChecbox">
        <a-tooltip>
          <template slot="title"> 暗色菜单风格 </template>
          <div class="setting-drawer-index-item" @click="handleNavTheme('dark')">
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg"
              alt="dark"
            />
            <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
              <a-icon type="check" />
            </div>
          </div>
        </a-tooltip>

        <a-tooltip>
          <template slot="title"> 亮色菜单风格 </template>
          <div class="setting-drawer-index-item" @click="handleNavTheme('light')">
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg"
              alt="light"
            />
            <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'light'">
              <a-icon type="check" />
            </div>
          </div>
        </a-tooltip>
      </div>
    </div>

    <div>
      <h3>主题色</h3>
      <div style="height: 20px">
        <a-tooltip
          class="setting-drawer-theme-color-colorBlock"
          v-for="(item, index) in colorList"
          :key="index"
        >
          <template slot="title">
            {{ item.key }}
          </template>
          <a-tag :color="item.color" @click="changeColor(item.color)">
            <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
          </a-tag>
        </a-tooltip>
      </div>
    </div>
    <a-divider style="margin-top: 24px" />
    <div :style="{ marginBottom: '24px' }">
      <h3>其他设置</h3>
      <div>
        <a-list :split="false">
          <a-list-item>
            <a-switch slot="actions" size="small" :defaultChecked="multiTab" @change="onMultiTab" />
            <a-list-item-meta>
              <div slot="title">多页签模式</div>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </div>
    </div>
    <a-divider />
    <div v-if="showTip">
      <a-button @click="doCopy" icon="copy" block>打印配置到控制台</a-button>
      <div :style="{ marginBottom: '24px' }">
        <a-alert type="warning">
          <span slot="message">
            配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件
            <a
              href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/config/defaultSettings.js"
              target="_blank"
              >src/config/defaultSettings.js</a
            >
          </span>
        </a-alert>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { mapState } from 'vuex'
import { colorList } from './settingConfig'

export default {
  name: 'SettingDrawer',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      colorList,
      showTip: process.env.NODE_ENV === 'development',
    }
  },
  computed: {
    ...mapState({
      primaryColor: state => state.app.primaryColor,
      multiTab: state => state.app.multiTab,
      navTheme: state => state.app.navTheme,
    }),
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false)
    },
    changeColor(color) {
      if (this.primaryColor !== color) this.$store.dispatch('app/toggleColor', color)
    },
    handleNavTheme(navTheme) {
      this.$store.commit('app/toggleNavTheme', navTheme)
    },
    onMultiTab(isMultiTab) {
      this.$store.commit('app/setMultiTab', isMultiTab)
    },
    doCopy() {
      const text = `export default {
        primaryColor: '${this.primaryColor}', // primary color of ant design
        navTheme: '${this.navTheme}', // theme for nav menu
        multiTab: ${this.multiTab},
        production: process.env.NODE_ENV === 'production' && process.env.VUE_APP_PREVIEW !== 'true'}`
      console.log(text)
    },
  },
}
</script>

<style lang="less" scoped>
.setting-drawer-index-blockChecbox {
  display: flex;

  .setting-drawer-index-item {
    margin-right: 16px;
    position: relative;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 48px;
    }

    .setting-drawer-index-selectIcon {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      padding-top: 15px;
      padding-left: 24px;
      height: 100%;
      color: #1890ff;
      font-size: 14px;
      font-weight: 700;
    }
  }
}

.setting-drawer-theme-color-colorBlock {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  float: left;
  cursor: pointer;
  margin-right: 8px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}
</style>