Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-05-22 c1b786ae25a96af534ee773ddeb8970f5956a4d9

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 package-lock.json

@@ -1,12 +1,12 @@
{
  "name": "temp-book",
  "version": "0.1.0",
  "name": "testbook",
  "version": "1.0.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "temp-book",
      "version": "0.1.0",
      "name": "testbook",
      "version": "1.0.0",
      "dependencies": {
        "axios": "^1.6.8",
        "core-js": "^3.8.3",

 src/App.vue

@@ -27,7 +27,7 @@
    };
  },
  async created() {
    this.activeBook = await this.config.getBookConfig();
    this.activeBook = this.thisBookConfig;
    console.log('图书',this.activeBook);
    if (this.$store.state.qiankun,this.$store.state.qiankun.getBookConfig) {
      this.$store.state.qiankun.getBookConfig({

 src/books/childHealth/view/content/index.vue

@@ -1,8 +1,6 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div
      class="page-content"
    >
    <div class="page-content">
      <pageHeader v-if="showCatalogList.indexOf(0) > -1"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(1) > -1"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(2) > -1"></chapterTwo>
@@ -67,6 +65,7 @@
        // 启动页码观察
        setTimeout(() => {
          this.initObservation();
          this.initThemeColor();
        }, 500);
      }
    }
@@ -109,6 +108,7 @@
    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
      this.initThemeColor();
    }, 500);

    // 测试页面跳转
@@ -206,6 +206,7 @@
        console.log("章节错误！");
      }
    },

    // 渲染标记
    renderSign(type, data) {
      const existence = (
@@ -273,8 +274,8 @@
      const sections = (
        this.container ? this.container : document
      ).querySelectorAll(".page-box");
      //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
      sections.forEach((section) => {
        //observer 观察每个元素，以便在它们进入或离开视窗时触发回调函数。
        const isObserver = section.getAttribute("observer");
        if (!isObserver) {
          this.observer.observe(section);
@@ -282,6 +283,93 @@
        }
      });
    },
    initThemeColor() {
      // 获取各种需要主题色的节点
      const colorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-color");
      const backgroundColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-back");
      const borderColorDom = (
        this.container ? this.container : document
      ).querySelectorAll(".theme-border");
      // 获取配置的主题色
      const bookThemeColor =
        this.thisBookConfig && this.thisBookConfig.bookThemeColor
          ? this.thisBookConfig.bookThemeColor
          : null;
      const chapterThemeColor =
        this.thisBookConfig && this.thisBookConfig.chapterThemeColor
          ? this.thisBookConfig.chapterThemeColor
          : null;
      const pageThemeColor =
        this.thisBookConfig && this.thisBookConfig.pageThemeColor
          ? this.thisBookConfig.pageThemeColor
          : null;
      colorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageHtml.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
      });
      backgroundColorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageHtml.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
      });
      borderColorDom.forEach((domItem) => {
        // 获取章节、页码
        let pageDom = this.getParentWithClass(domItem, "page-box");
        let chapterDom = this.getParentWithClass(domItem, "chapter");
        let page, chapterNum;
        if (pageDom) page = pageHtml.getAttribute("page");
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        // 向上匹配主题色
        const themeColor =
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
      });
    },
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    pageChangeCallback(entries, observer) {
      //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
      entries.forEach((entry) => {

 src/main.js

@@ -10,6 +10,7 @@
// 自定义配置
import config from "@/assets/js/config";
Vue.prototype.config = config;
Vue.prototype.thisBookConfig = await config.getBookConfig();

// 请求处理
import MG from "@/assets/js/middleGround/WebMiddleGroundApi";