eep_page/src/views/book/courseware/preview/common/utils/coursewareStyle.js

/**
 * 构建课件背景样式
 * @param {object} background 背景信息
 * @param {string} type 预览类型，commonPreview: 公共预览，courseware: 课件预览
 * @returns {object} 样式对象
 */
export function buildCoursewareStyle(background, type) {
  const { background_image_url: bcImgUrl = '', background_position: pos = {}, background: back } = background || {};

  if (type === 'commonPreview' && !back?.is_global) {
    return {};
  }
  if (type === 'courseware' && back?.is_global) {
    return {};
  }

  const canvasStyle = {
    backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
    backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
    backgroundImage: bcImgUrl ? `url(${bcImgUrl})` : '',
  };

  if (!back) {
    return canvasStyle;
  }

  if (!back.has_image) {
    canvasStyle.backgroundBlendMode = '';
    canvasStyle.backgroundImage = '';
    canvasStyle.backgroundRepeat = '';
    canvasStyle.backgroundPosition = '';
    canvasStyle.backgroundSize = '';
  }

  if (back.imageMode === 'fill') {
    canvasStyle.backgroundRepeat = 'repeat';
    canvasStyle.backgroundSize = '';
    canvasStyle.backgroundPosition = '';
  } else {
    canvasStyle.backgroundRepeat = 'no-repeat';
  }

  if (back.imageMode === 'stretch') {
    canvasStyle.backgroundSize = '100% 100%';
  }

  if (back.imageMode === 'adapt') {
    canvasStyle.backgroundSize = 'contain';
  }

  if (back.imageMode === 'auto') {
    canvasStyle.backgroundPosition = `${pos.imgX}% ${pos.imgY}%`;
  }

  if (back.has_color) {
    canvasStyle.backgroundColor = back.color;
  } else {
    canvasStyle.backgroundColor = '#fff';
  }

  if (back.enable_border) {
    canvasStyle.border = `${back.border_width}px ${back.border_style} ${back.border_color}`;
  } else {
    canvasStyle.border = 'none';
  }

  if (back.enable_radius) {
    canvasStyle['border-top-left-radius'] = `${back.top_left_radius}px`;
    canvasStyle['border-top-right-radius'] = `${back.top_right_radius}px`;
    canvasStyle['border-bottom-left-radius'] = `${back.bottom_left_radius}px`;
    canvasStyle['border-bottom-right-radius'] = `${back.bottom_right_radius}px`;
  } else {
    canvasStyle.borderRadius = '0';
  }

  return canvasStyle;
}