1、样式调整自动生成辅助色 2、课件背景图优化 3、课件路径显示优化

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -113,21 +113,6 @@
       :row-list="data.row_list"
       @computedMoveData="computedMoveData"
     />
-
-    <FullTextSettings
-      :book-id="project_id"
-      :visible.sync="visibleFullTextSettings"
-      :settings="data.unified_attrib"
-      @fullTextSettings="fullTextSettings"
-    />
-
-    <SetBackground
-      :visible.sync="visibleBackground"
-      :url="data.background_image_url"
-      :position="data.background_position"
-      :background-data="data.background"
-      @setBackground="setBackground"
-    />
   </main>
 </template>
 
@@ -144,15 +129,11 @@ import _ from 'lodash';
 import { unified_attrib } from '@/common/data';
 
 import PreviewEdit from './PreviewEdit.vue';
-import FullTextSettings from '../components/FullTextSettings.vue';
-import SetBackground from '../components/SetBackground.vue';
 
 export default {
   name: 'CreateCanvas',
   components: {
     PreviewEdit,
-    FullTextSettings,
-    SetBackground,
   },
   inject: ['getCurSettingId'],
   provide() {
@@ -395,9 +376,6 @@ export default {
     changeData() {
       this.$emit('changeData');
     },
-    showFullTextSettings() {
-      this.visibleFullTextSettings = true;
-    },
     fullTextSettings(data) {
       this.$refs.component.forEach((item) => {
         item.updateProperty('view_pinyin', data.view_pinyin);
@@ -543,9 +521,6 @@ export default {
 
       this.$message.success('设置背景图成功');
     },
-    showSetBackground() {
-      this.visibleBackground = true;
-    },
     /**
      * 显示设置
      * @param {object} setting 组件设置数据
@@ -1662,54 +1637,47 @@ export default {
       const { background_image_url, background_position, background } = this.data;
 
       let canvasStyle = {
-        backgroundSize: background_image_url ? `${background_position.width}% ${background_position.height}%` : '',
-        backgroundPosition: background_image_url ? `${background_position.left}% ${background_position.top}%` : '',
-        backgroundImage: background_image_url ? `url(${background_image_url})` : '',
-        backgroundColor: background_image_url ? `rgba(255, 255, 255, ${1 - background.image_opacity / 100})` : '',
+        '--bg-size': background_image_url ? `${background_position.width}% ${background_position.height}%` : '',
+        '--bg-position': background_image_url ? `${background_position.left}% ${background_position.top}%` : '',
+        '--bg-image': background_image_url ? `url(${background_image_url})` : '',
+        '--bg-opacity': background_image_url && background.mode === 'image' ? background.image_opacity / 100 : 1,
       };
 
       if (background) {
-        if (background.mode === 'image') {
-          canvasStyle['backgroundBlendMode'] = 'lighten';
-        } else {
-          canvasStyle['backgroundBlendMode'] = '';
-        }
-
         if (background.imageMode === 'fill') {
-          canvasStyle['backgroundRepeat'] = 'repeat';
+          canvasStyle['--bg-repeat'] = 'repeat';
         } else {
-          canvasStyle['backgroundRepeat'] = 'no-repeat';
+          canvasStyle['--bg-repeat'] = 'no-repeat';
         }
 
         if (background.imageMode === 'stretch') {
-          canvasStyle['backgroundSize'] = '100% 100%';
+          canvasStyle['--bg-size'] = '100% 100%';
         }
 
         if (background.imageMode === 'adapt') {
-          canvasStyle['backgroundSize'] = 'contain';
+          canvasStyle['--bg-size'] = 'contain';
         }
 
         if (background.mode === 'color') {
-          canvasStyle['backgroundColor'] = background.color;
-          canvasStyle['backgroundImage'] = '';
-          canvasStyle['backgroundRepeat'] = '';
-          canvasStyle['backgroundPosition'] = '';
-          canvasStyle['backgroundSize'] = '';
+          canvasStyle['--bg-color'] = background.color;
+          canvasStyle['--bg-image'] = '';
+          canvasStyle['--bg-repeat'] = '';
+          canvasStyle['--bg-position'] = '';
+          canvasStyle['--bg-size'] = '';
         }
 
         if (background.enable_border) {
-          canvasStyle['border'] = `${background.border_width}px ${background.border_style} ${background.border_color}`;
+          canvasStyle['--bg-border'] =
+            `${background.border_width}px ${background.border_style} ${background.border_color}`;
         } else {
-          canvasStyle['border'] = 'none';
+          canvasStyle['--bg-border'] = 'none';
         }
 
         if (background.enable_radius) {
-          canvasStyle['border-top-left-radius'] = `${background.top_left_radius}px`;
-          canvasStyle['border-top-right-radius'] = `${background.top_right_radius}px`;
-          canvasStyle['border-bottom-left-radius'] = `${background.bottom_left_radius}px`;
-          canvasStyle['border-bottom-right-radius'] = `${background.bottom_right_radius}px`;
-        } else {
-          canvasStyle['border-radius'] = '0';
+          canvasStyle['--bg-border-radius-top-left'] = `${background.top_left_radius}px`;
+          canvasStyle['--bg-border-radius-top-right'] = `${background.top_right_radius}px`;
+          canvasStyle['--bg-border-radius-bottom-left'] = `${background.bottom_left_radius}px`;
+          canvasStyle['--bg-border-radius-bottom-right'] = `${background.bottom_right_radius}px`;
         }
       }
 
@@ -1722,6 +1690,7 @@ export default {
 <style lang="scss" scoped>
 .canvas {
   position: relative;
+  z-index: 0;
   display: flex;
   flex-direction: column;
   row-gap: 8px;
@@ -1732,6 +1701,26 @@ export default {
   background-color: #fff;
   background-repeat: no-repeat;
 
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1; // 背景在最底层
+    width: 100%;
+    height: 100%;
+    pointer-events: none; // 背景不接受鼠标事件
+    content: '';
+    background-color: #fff;
+    background-image: var(--bg-image);
+    background-repeat: var(--bg-repeat);
+    background-position: var(--bg-position);
+    background-size: var(--bg-size);
+    border: var(--bg-border);
+    border-radius: var(--bg-border-radius-top-left) var(--bg-border-radius-top-right)
+      var(--bg-border-radius-bottom-right) var(--bg-border-radius-bottom-left);
+    opacity: var(--bg-opacity);
+  }
+
   .group-line {
     position: absolute;
     left: 11px;

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

@@ -13,6 +13,7 @@
           <el-color-picker v-model="unified_attrib.topic_color" />
           <span>辅助色</span>
           <el-color-picker v-model="unified_attrib.assist_color" />
+          <span class="link" @click="generateAssistColor">自动生成辅助色</span>
         </div>
       </el-form-item>
       <el-form-item label="字体">
@@ -69,9 +70,9 @@
 
 <script>
 import { pinyinPositionList, 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',
@@ -131,6 +132,19 @@ export default {
         }
       });
     },
+    /* 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);
     },

src/views/book/courseware/create/components/SetBackground.vue

@@ -32,6 +32,7 @@
         <div class="setup-item">
           <div class="setup-top">
             <el-radio v-model="background.mode" label="image">图片</el-radio>
+            <SvgIcon v-if="file_url" icon-class="delete" style="cursor: pointer" size="14" @click="file_url = ''" />
           </div>
           <div class="setup-content">
             <div class="image-set">

src/views/book/courseware/create/index.vue

@@ -150,14 +150,6 @@ export default {
       }
       this.isChange = false;
     },
-    showSetBackground() {
-      this.$refs.createCanvas.showSetBackground();
-    },
-    showFullTextSettings() {
-      if (this.isEdit) {
-        this.$refs.createCanvas.showFullTextSettings();
-      }
-    },
     /**
      * @description 粘贴组件
      * @param {String} position 放入位置类型

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -546,7 +546,7 @@ export default {
         backgroundSize: bcImgUrl ? `${pos.width}% ${pos.height}%` : '',
         backgroundPosition: bcImgUrl ? `${pos.left}% ${pos.top}%` : '',
         backgroundImage: bcImgUrl ? `url(${bcImgUrl})` : '',
-        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back.image_opacity / 100})` : '',
+        backgroundColor: bcImgUrl ? `rgba(255, 255, 255, ${1 - back?.image_opacity / 100})` : '',
       };
 
       if (back) {

src/views/personal_workbench/edit_task/edit/index.vue

@@ -7,10 +7,12 @@
 
     <div class="edit-task__header" :style="{ top: type && type !== 'personal' ? '0' : '' }">
       <div class="menu-container">
-        <span class="name">{{ courseware_info.book_name }}</span>
+        <span class="name nowrap-ellipsis" :title="courseware_info.book_name">{{ courseware_info.book_name }}</span>
       </div>
       <div class="courseware">
-        <span class="name-path">{{ courseware_info.name_path }}</span>
+        <span class="name-path nowrap-ellipsis" :title="courseware_info.name_path">
+          {{ courseware_info.name_path }}
+        </span>
         <div class="switch">
           <span :class="['link', { active: isEdit }]" @click="toggleEditMode(true)">内容编辑</span>
           <span :class="['link', { active: !isEdit }]" @click="toggleEditMode(false)">位置调整</span>
@@ -63,6 +65,20 @@
       @useTemplate="handleUseTemplate"
       @insertTemplate="handleInsertTemplate"
     />
+    <FullTextSettings
+      :book-id="project_id"
+      :visible.sync="visibleFullTextSettings"
+      :settings="data.unified_attrib"
+      @fullTextSettings="fullTextSettings"
+    />
+
+    <SetBackground
+      :visible.sync="visibleBackground"
+      :url="data.background_image_url"
+      :position="data.background_position"
+      :background-data="data.background"
+      @setBackground="setBackground"
+    />
   </div>
 </template>
 
@@ -70,6 +86,8 @@
 import CreatePage from '@/views/book/courseware/create/index.vue';
 import MenuPage from '@/views/personal_workbench/common/menu.vue';
 import UseTemplate from './UseTemplate.vue';
+import FullTextSettings from '@/views/book/courseware/create/components/FullTextSettings.vue';
+import SetBackground from '@/views/book/courseware/create/components/SetBackground.vue';
 
 import tinymce from 'tinymce';
 import * as OpenCC from 'opencc-js';
@@ -82,6 +100,8 @@ export default {
     CreatePage,
     MenuPage,
     UseTemplate,
+    FullTextSettings,
+    SetBackground,
   },
   provide() {
     return {
@@ -116,6 +136,15 @@ export default {
         font_style: 'normal', // 字体样式
         backgroundColor: 'transparent', // 背景颜色
       },
+      // 用于复制 create 组件data数据
+      data: {
+        unified_attrib: {},
+        background_image_url: '',
+        background_position: {},
+        background: {},
+      },
+      visibleFullTextSettings: false, // 是否显示样式调整弹窗
+      visibleBackground: false, // 是否显示背景设置弹窗
     };
   },
   created() {
@@ -214,7 +243,15 @@ export default {
       this.$router.push({ path: '/personal_workbench/edit_task', query: { book_id: this.courseware_info.book_id } });
     },
     showSetBackground() {
-      this.$refs.create.showSetBackground();
+      const createData = this.$refs.create.$refs.createCanvas.data;
+
+      this.data.background_image_url = createData.background_image_url;
+      this.data.background_position = createData.background_position;
+      this.data.background = createData.background;
+      this.visibleBackground = true;
+    },
+    setBackground(url, position, background) {
+      this.$refs.create.$refs.createCanvas.setBackground(url, position, background);
     },
     toggleEditMode(isEdit) {
       if (this.isEdit !== isEdit) {
@@ -226,7 +263,11 @@ export default {
       this.$refs.create.saveCoursewareContent(type);
     },
     showFullTextSettings() {
-      this.$refs.create.showFullTextSettings();
+      this.data.unified_attrib = { ...this.$refs.create.$refs.createCanvas.data.unified_attrib };
+      this.visibleFullTextSettings = true;
+    },
+    fullTextSettings(data) {
+      this.$refs.create.$refs.createCanvas.fullTextSettings(data);
     },
     goBackPreview() {
       if (this.$route.query.template_type) {
@@ -362,10 +403,12 @@ export default {
 
     .courseware {
       .name-path {
+        min-width: 100px;
         font-size: 14px;
       }
 
       .switch {
+        min-width: 200px;
         padding: 4px 16px 4px 0;
         margin-right: 300px;
         border-right: $border;