eep_page/src/views/book/courseware/create/components/FullTextSettings.vue

<template>
  <el-dialog
    custom-class="full-text-settings"
    width="570px"
    :close-on-click-modal="false"
    :visible="visible"
    :before-close="handleClose"
    title="样式调整"
  >
    <el-form ref="form" :model="unified_attrib" label-width="80px" size="small">
      <el-form-item label="主题色">
        <div class="color-group">
          <ColorPicker v-model="unified_attrib.topic_color" :type="2" />
          <span>辅助色</span>
          <el-color-picker v-model="unified_attrib.assist_color" />
          <span class="link" @click="generateAssistColor">自动生成辅助色</span>
        </div>
        <el-button
          type="primary"
          class="row-button"
          @click="
            applySingleAttrToSelectedComponents('topic_color');
            applySingleAttrToSelectedComponents('assist_color');
          "
        >
          应用选中组件
        </el-button>
        <el-button
          type="primary"
          class="row-button"
          @click="
            applySingleAttrToAllComponents('topic_color');
            applySingleAttrToAllComponents('assist_color');
          "
        >
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="字体">
        <el-select v-model="unified_attrib.font" placeholder="请选择字体">
          <el-option v-for="{ label, value } in fontList" :key="value" :label="label" :value="value" />
        </el-select>
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('font')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('font')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="字号">
        <el-select v-model="unified_attrib.font_size" placeholder="请选择字号">
          <el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
        </el-select>
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('font_size')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('font_size')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="拼音字号">
        <el-select v-model="unified_attrib.pinyin_size" placeholder="请选择拼音字号">
          <el-option v-for="size in fontSizeList" :key="size" :label="size" :value="size" />
        </el-select>
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('pinyin_size')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('pinyin_size')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="行距">
        <el-input-number v-model="unified_attrib.line_height" :min="0" :max="20" :step="0.1" />
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('line_height')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('line_height')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="文字颜色">
        <ColorPicker v-model="unified_attrib.text_color" :type="1" />
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('text_color')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('text_color')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="对齐方式">
        <el-select v-model="unified_attrib.align" placeholder="请选择对齐方式">
          <el-option label="左对齐" value="LEFT" />
          <el-option label="居中" value="MIDDLE" />
          <el-option label="右对齐" value="RIGHT" />
        </el-select>
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('align')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('align')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="拼音">
        <el-switch v-model="unified_attrib.view_pinyin" active-value="true" inactive-value="false" />
        <el-button type="primary" class="row-button" @click="applySingleAttrToSelectedComponents('view_pinyin')">
          应用选中组件
        </el-button>
        <el-button type="primary" class="row-button" @click="applySingleAttrToAllComponents('view_pinyin')">
          应用整页
        </el-button>
      </el-form-item>
      <el-form-item label="拼音位置">
        <el-radio-group v-model="unified_attrib.pinyin_position" :disabled="!isEnable(unified_attrib.view_pinyin)">
          <el-radio v-for="{ value, label } in pinyinPositionList" :key="value" :label="value">
            {{ label }}
          </el-radio>
        </el-radio-group>
        <el-button
          type="primary"
          class="row-button"
          :disabled="!isEnable(unified_attrib.view_pinyin)"
          @click="applySingleAttrToSelectedComponents('pinyin_position')"
        >
          应用选中组件
        </el-button>
        <el-button
          type="primary"
          :disabled="!isEnable(unified_attrib.view_pinyin)"
          class="row-button"
          @click="applySingleAttrToAllComponents('pinyin_position')"
        >
          应用整页
        </el-button>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="applyToSelectedComponents">应用选中组件</el-button>
      <el-button type="primary" @click="confirm">应用整页</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ColorPicker from '@/components/ColorPicker.vue';

import { pinyinPositionList, fontList, fontSizeList, isEnable } from '@/views/book/courseware/data/common';
import { GetBookUnifiedAttrib } from '@/api/book';
import { unified_attrib } from '@/common/data';
import { ToAuxiliaryColor } from '@/api/app';

export default {
  name: 'FullTextSettings',
  components: {
    ColorPicker,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    settings: {
      type: Object,
      default: () => unified_attrib,
    },
    bookId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      unified_attrib,
      fontSizeList,
      pinyinPositionList,
      fontList,
      isEnable,
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.$set(this, 'unified_attrib', { ...this.unified_attrib, ...this.settings });
      }
    },
  },
  created() {
    this.getBookUnifiedAttr();
  },
  methods: {
    getBookUnifiedAttr() {
      GetBookUnifiedAttrib({ book_id: this.bookId }).then(({ content }) => {
        if (content && (this.settings === null || Object.keys(this.settings).length <= 0)) {
          this.unified_attrib = JSON.parse(content);
        }
      });
    },
    /* eslint-disable no-bitwise */
    /**
     * 根据主题色自动生成辅助色
     */
    generateAssistColor() {
      const bigint = parseInt(this.unified_attrib.topic_color.replace('#', ''), 16);
      const r = (bigint >> 16) & 255;
      const g = (bigint >> 8) & 255;
      const b = bigint & 255;
      ToAuxiliaryColor({ r, g, b }).then(({ color: { r, g, b } }) => {
        this.unified_attrib.assist_color = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
      });
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.$emit('update:visible', false);
      this.$emit('fullTextSettings', this.unified_attrib);
    },
    applyToSelectedComponents() {
      this.$emit('update:visible', false);
      this.$emit('applyToSelectedComponents', this.unified_attrib);
    },
    /**
     * 应用单个属性到选中组件
     * @param {String} attr - 属性名
     */
    applySingleAttrToSelectedComponents(attr) {
      this.$emit('update:visible', false);
      this.$emit('applySingleAttrToSelectedComponents', { attr, value: this.unified_attrib[attr] });
    },
    /**
     * 应用单个属性到所有组件
     * @param {String} attr - 属性名
     */
    applySingleAttrToAllComponents(attr) {
      this.$emit('update:visible', false);
      this.$emit('applySingleAttrToAllComponents', { attr, value: this.unified_attrib[attr] });
    },
  },
};
</script>

<style lang="scss" scoped>
.full-text-settings {
  padding: 0;

  .el-form {
    .color-group {
      display: flex;
      column-gap: 6px;
      align-items: center;

      span {
        white-space: nowrap;
      }
    }

    :deep .el-form-item__content {
      display: flex;
      align-items: center;

      > :first-child {
        flex: 1;
      }
    }

    .row-button {
      margin-left: 12px;
    }
  }
}
</style>