打包问题修复

package.json

@@ -29,7 +29,6 @@
     "cnchar": "^3.2.6",
     "core-js": "^3.47.0",
     "dompurify": "^3.1.5",
-    "eep-ui": "file:eep-ui-0.0.3.tgz",
     "element-ui": "^2.15.14",
     "hanzi-writer": "^3.7.0",
     "js-audio-recorder": "^1.0.7",

packages/BookEep.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="common-preview">
-    <div class="audit-content" >
+    <div class="audit-content">
       <div ref="previewMain" class="main-container" :style="{ paddingLeft: '0', paddingRight: '0' }">
         <main :class="['preview-main', 'no-audit']" :style="computedCommonPreviewStyle">
           <div class="preview-left" :style="{ backgroundColor: background.background?.is_global ? '' : '#fff' }"></div>
@@ -8,10 +8,10 @@
             ref="courseware"
             :is-show-group="false"
             :group-show-all="true"
-            :group-row-list="contentGroupRowList"
+            :group-row-list="groupRowList"
             :data="data"
             :courseware-id="curSelectId"
-            :component-list="componentList"
+            :component-list="cList"
             :background="background"
             :can-remark="false"
             :show-remark="false"
@@ -35,7 +35,7 @@ import { isTrue } from '@/utils/validate';
 import { buildCoursewareStyle } from '@/views/book/courseware/preview/common/utils/coursewareStyle';
 
 export default {
-  name: 'CommonPreview',
+  name: 'BookEep',
   components: {
     CoursewarePreview,
   },
@@ -55,10 +55,15 @@ export default {
       type: String,
       default: '',
     },
+    // 组件内容
+    content: {
+      type: String,
+      default: '',
+    },
     // 内容分组行列表
     contentGroupRowList: {
-      type: Array,
-      default: () => [],
+      type: String,
+      default: '',
     },
     // 组件列表
     componentList: {
@@ -66,14 +71,59 @@ export default {
       default: () => [],
     },
     // 教材背景
-    background: {
-      type: Object,
-      default: () => ({}),
+    bookBackground: {
+      type: String,
+      default: '',
     },
   },
   data() {
+    const processHtmlString = this.processHtmlString;
+    const cList = this.componentList || [];
+    cList.forEach((x) => {
+      if (x.component_type === 'audio') {
+        let _c = JSON.parse(x.content);
+        let p = _c.property || {};
+        if (!p.file_name_display_mode) p.file_name_display_mode = 'true';
+        if (p.view_method === 'independent' && !p.style_mode) {
+          p.style_mode = 'middle';
+        }
+        if (!p.style_mode) p.style_mode = 'big';
+        if (p.view_method === 'icon') {
+          p.file_name_display_mode = 'false';
+          p.view_method = 'independent';
+          p.style_mode = 'small';
+        }
+
+        x.content = JSON.stringify(_c);
+      } else if (x.component_type === 'richtext') {
+        if (!processHtmlString) return;
+        let _c = JSON.parse(x.content);
+        let p = _c.property || {};
+        let lev = Number(p.title_style_level);
+        if (p.is_title !== 'true' || lev < 1 || !_c.content) return;
+
+        let style = this.title_list.find((y) => y.level === lev) || {};
+        if (style && style.style) {
+          style = JSON.parse(style.style);
+          let c_text = _c.content;
+
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(c_text, 'text/html');
+          const body = doc.body;
+          const pElements = body.querySelectorAll('p');
+          processHtmlString(pElements, style);
+          _c.content = body.innerHTML;
+
+          x.content = JSON.stringify(_c);
+        }
+      }
+    });
+
     return {
-      data: { row_list: [] },
+      background: this.bookBackground.length > 0 ? JSON.parse(this.bookBackground) : {},
+      groupRowList: this.contentGroupRowList.length > 0 ? JSON.parse(this.contentGroupRowList) : [],
+      data: this.content.length > 0 ? JSON.parse(this.content) : { row_list: [] },
+      cList,
       curSelectId: this.id,
       isTrue,
       sidebarShow: true,
@@ -112,6 +162,29 @@ export default {
     convertText(text) {
       return text;
     },
+
+    processHtmlString(pElements, styleConfig, isClear = false) {
+      const _pElements = pElements || [];
+      _pElements.forEach((pElement) => {
+        if (pElement.innerHTML !== '<br data-mce-bogus="1">') {
+          pElement.innerHTML = pElement.innerText;
+        }
+        if (isClear) {
+          pElement.removeAttribute('style');
+          pElement.removeAttribute('data-mce-style');
+        } else {
+          const style = pElement.style;
+
+          if (styleConfig.font) style.fontFamily = styleConfig.font;
+          if (styleConfig.font_size) style.fontSize = styleConfig.font_size;
+          if (styleConfig.text_color) style.color = styleConfig.text_color;
+
+          style.fontWeight = styleConfig.bold === 'true' ? 'bold' : 'normal';
+          style.fontStyle = styleConfig.italic === 'true' ? 'italic' : 'normal';
+          if (styleConfig.indent || styleConfig.indent === 0) style.marginLeft = `${styleConfig.indent}px`;
+        }
+      });
+    },
   },
 };
 </script>

packages/index.js

@@ -39,6 +39,3 @@ if (typeof window !== 'undefined' && window.Vue) {
 export default {
   install,
 };
-
-// 用户可以通过按需引入的方式来使用组件
-export { BookEep };

packages/package.json

@@ -1,10 +1,10 @@
 {
   "name": "eep-ui",
   "version": "0.0.3",
-  "main": "eep/eep-ui.common.js",
+  "main": "eep/eep-ui.umd.js",
   "style": "eep/eep-ui.css",
   "exports": {
-    ".": "./eep/eep-ui.common.js",
+    ".": "./eep/eep-ui.umd.js",
     "./style.css": "./style.css"
   },
   "files": [

src/main.js

@@ -20,11 +20,6 @@ import VueSignaturePad from 'vue-signature-pad';
 
 import { setupRouterGuard } from '@/router/guard';
 
-import EepUi from 'eep-ui';
-import 'eep-ui/style.css';
-
-Vue.use(EepUi);
-
 Vue.use(ElementUI, {
   size: 'small',
 });

vue.config.js

@@ -69,6 +69,12 @@ module.exports = defineConfig({
   },
   configureWebpack: {
     name,
+    externals: isLibBuild
+      ? {
+          vue: 'vue',
+          'vue-router': 'vue-router',
+        }
+      : {},
     // 在库模式下，入口输出文件名是固定的（例如 eep-ui.umd.js）。
     // 使用唯一的区块文件名以防止异步区块发生冲突。
     output: isLibBuild ? { chunkFilename: 'eep-ui.[name].[contenthash:8].js' } : {},