web

litian

2024-06-13 2887cde644b586ceff61201705a5c4bdfe7e2b31

web

 src/child.ts

@@ -46,6 +46,18 @@
    entry: '//jsek.bnuic.com/books/book/sportsAndHealth',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  mathBook: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/mathBook',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  },
  artAndDrama: {
    name: 'app-content',
    entry: '//jsek.bnuic.com/books/book/artAndDrama',
    container: '#container',
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
  }
}


 src/views/login.vue

@@ -82,7 +82,10 @@
            if (route.query.redirect) {
              router.push(route.query.redirect)
            } else {
              router.push('/home')
              router.replace({
                path: '/home',
                query: { bookId: localStorage.getItem('bookId') }
              })
            }
          } else if (res.data.isError) {
            ElMessage.error(res.data.errorDescription)

 src/views/readerPages/webHome.vue

@@ -13,13 +13,12 @@
    <div class="contentBox">
      <!-- 菜单 -->
      <div class="menuBox">
        <div v-for="(item, index) in menuData" :key="index">
        <div
          v-for="(item, index) in menuData"
          :key="index"
            :class="['menuItem', activeMenu == item.name ? 'active' : '']"
          @click="menuItemClick(item.name)"
          :class="token ? '' : 'notClick'"
            v-if="item.isShow"
        >
          <div :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-if="item.isShow">
            <div class="menuIcon imgBox">
              <img :src="item.icon" />
            </div>
@@ -94,7 +93,7 @@
      <!-- 菜单内容 -->
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox" v-if="activeMenu !== '资源'">
          <div class="inputBox" v-if="activeMenu !== '资源' && activeMenu !== '习题'">
            <el-input
              class="custom-input"
              placeholder="请输入内容"
@@ -108,7 +107,7 @@
              </template>
            </el-input>
          </div>
          <div v-else class="resourceTab">
          <div v-if="activeMenu == '资源'" class="resourceTab">
            <div class="tabItem hover" @click="selectResourceType('default')">
              <div>默认资源</div>
              <div :class="resourceType == 'default' ? 'text' : 'line'"></div>
@@ -117,6 +116,17 @@
            <div class="tabItem hover" @click="selectResourceType('teacher')">
              <div>教师资源</div>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
            </div>
          </div>
          <div v-if="activeMenu == '习题'" class="resourceTab">
            <div class="tabItem hover" @click="selectExercisesType('exercises')">
              <div>习题</div>
              <div :class="exercisesType == 'exercises' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectExercisesType('wrong')">
              <div>错题本</div>
              <div :class="exercisesType == 'wrong' ? 'text' : 'line'"></div>
            </div>
          </div>
        </div>
@@ -133,7 +143,6 @@
            v-if="catalogueData.length > 0"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            empty-text="暂无数据"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
@@ -141,10 +150,11 @@
                <span class="pageNum">{{ data.page }}</span>
              </div>
            </template>
          </el-tree>
          <div v-else>
            <template #empty>
            <el-empty :image-size="60" description="暂无数据" />
          </div>
            </template>
          </el-tree>
          <div v-else></div>
        </div>
        <div class="allSearch" v-if="activeMenu == '检索'">
          <div class="list-box" v-loading="listLoading">
@@ -160,10 +170,19 @@
                  <el-icon @click="searchOpen(index)" v-else class="hover"><ArrowRight /></el-icon>
                  <span>{{ reault.chapterName }} （{{ reault.itemList.length }}）</span>
                </div>
                <div v-for="(item, index1) in reault.itemList" :key="index1" class="searchItem" v-show="searchReaultData.isShow && searchReaultData.openIndex == index">
                <div
                  v-for="(item, index1) in reault.itemList"
                  :key="index1"
                  class="searchItem"
                  v-show="searchReaultData.isShow && searchReaultData.openIndex == index"
                >
                  <div class="index">{{ index1 + 1 }}.</div>
                  <div class="searchCon hover" @click="goSearchContent(item)" v-html="item.txt1" :title="item.txt">
                  </div>
                  <div
                    class="searchCon hover"
                    @click="goSearchContent(item)"
                    v-html="item.txt1"
                    :title="item.txt"
                  ></div>
                </div>
              </div>
            </div>
@@ -368,7 +387,7 @@
                                item.resourceType == '音频' ||
                                item.resourceType == '习题' ||
                                item.resourceType == '图片'
                              )
                              ) && item.isDownload == '是'
                            "
                            ><Download
                          /></el-icon>
@@ -428,6 +447,40 @@
                </div>
                <div class="deleteReMarkImg">
                  <img :src="shanchu" class="icon hover" @click="deleteReMark(item)" />
                </div>
              </div>
            </div>
            <div v-else>
              <el-empty :image-size="60" description="暂无数据" />
            </div>
          </div>
        </div>
        <div class="questionList" v-if="activeMenu == '习题'">
          <div class="resourceSearchBox">
            <div class="inputBox">
              <el-input
                class="custom-input"
                placeholder="请输入内容"
                v-model="searchText"
                @keyup.enter="searchBook"
                clearable
                @clear="handleClear"
              >
                <template #prefix>
                  <img :src="listSearch" @click="searchBook" class="hover" />
                </template>
              </el-input>
            </div>
          </div>
          <div class="list-box" v-loading="listLoading">
            <div v-if="questionList.length > 0">
              <div v-for="(item, index) in questionList" :key="index" class="reMarkItem">
                <div
                  class="questionCon hover"
                  @click="JumpPosition(item)"
                  :title="item.resourceName"
                >
                  {{ item.resourceName }}
                </div>
              </div>
            </div>
@@ -720,9 +773,8 @@
        </div>
        <div class="menuList">
          <ul class="menu" v-if="teachToolsMenuData.length > 0">
            <li v-for="item in teachToolsMenuData" :key="item.key">
            <li v-for="item in teachToolsMenuData" :key="item.key" class="hover">
              <div
                :class="token ? 'hover' : 'notClick'"
                :style="!toolState.open ? 'padding:10px 15px' : ''"
                v-if="item.isShow"
                @click="selectTeachTools(item)"
@@ -820,12 +872,7 @@
        :style="`left:${floatingToolData.elLeft}px`"
        v-if="floatingToolBox.length > 0"
      >
        <div
          :class="token ? 'hover' : 'notClick'"
          v-for="item in floatingToolBox"
          :key="item.name"
          @click="floatItemHandle(item)"
        >
        <div v-for="item in floatingToolBox" :key="item.name" @click="floatItemHandle(item)">
          <div v-if="item.isShow">
            <el-popover
              placement="right"
@@ -1128,7 +1175,7 @@
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue'
import { ref, reactive, watch, onMounted, onBeforeMount, onBeforeUnmount, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()
@@ -1270,7 +1317,6 @@
        window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    })()
  }

  // 加载微应用
  microApp = loadMicroApp(microApps[localStorage.getItem('bookId')], {
    sandbox: {
@@ -1381,6 +1427,11 @@
  // }
})

onBeforeUnmount(() => {
  if (microApp) {
    microApp.unmount() // 卸载微应用
  }
})
// watch(
//   () => screenWidth.value,
//   (val) => {
@@ -1425,7 +1476,6 @@
      } else if (phoneInfo) {
        userInfo.value = {
          name: phoneInfo.credential

        }
        localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
      }
@@ -1477,6 +1527,11 @@
      name: '书签',
      icon: biaoqian,
      isShow: bookConfig.value.textbookComponents.indexOf('CF2E1400') > -1
    },
    {
      name: '习题',
      icon: zhishitupu,
      isShow: true
    }
  ]
  teachToolsMenuData = [
@@ -1692,6 +1747,7 @@
const playIndex = ref(null) //音频播放
const audioPlayer = ref(null)
const getResourceData = () => {
  if (token) {
  imgPreviewList.value = []
  listLoading.value = true
  axios
@@ -1750,11 +1806,6 @@
                resourceDataList.value.push(resItem)
              }
              videoCount++
            } else if (resItem.resourceType == '习题') {
              if (activeClassify.value == 'exercises') {
                resourceDataList.value.push(resItem)
              }
              exercisesCount++
            } else {
              if (activeClassify.value == 'other') {
                resourceDataList.value.push(resItem)
@@ -1784,13 +1835,6 @@
              key: 'video'
            })
          }
          if (exercisesCount > 0) {
            classifySelectList.value.push({
              title: '习题',
              count: exercisesCount,
              key: 'exercises'
            })
          }
          if (otherCount > 0) {
            classifySelectList.value.push({
              title: '其他',
@@ -1806,25 +1850,6 @@
              }
            })
          }
          // if(activeClassify.value == "video"){
          //   resourceDataList.value.forEach((item,index)=>{
          //     console.log(item,"item")
          //     let video = document.createElement("video");
          //     video.src = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + item.md5;
          //     const canvas = document.createElement('canvas')
          //     canvas.width = 130
          //     canvas.height = 80
          //     const ctx:any = canvas.getContext('2d');
          //     video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
          //     video.currentTime = 1 // 第一帧

          //     video.oncanplay = () => {  //视频准备播放
          //       ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
          //       item.icon = canvas.toDataURL("image/png");  //获取base64格式的图片
          //     }
          //   })

          // }
        } else {
          let imgCount = 0
          let audioCount = 0
@@ -1855,11 +1880,6 @@
                resourceDataList.value.push(resItem)
              }
              videoCount++
            } else if (resItem.resourceType == '习题') {
              if (activeClassify.value == 'exercises') {
                resourceDataList.value.push(resItem)
              }
              exercisesCount++
            } else {
              if (activeClassify.value == 'other') {
                resourceDataList.value.push(resItem)
@@ -1889,13 +1909,6 @@
              key: 'video'
            })
          }
          if (exercisesCount > 0) {
            classifySelectList.value.push({
              title: '习题',
              count: exercisesCount,
              key: 'exercises'
            })
          }
          if (otherCount > 0) {
            classifySelectList.value.push({
              title: '其他',
@@ -1912,13 +1925,24 @@
            })
          }
        }

      }
      listLoading.value = false
    })
    .catch(function (error) {
      console.log(error)
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}
//资源播放视频
const goPlay = (data, index) => {
@@ -1995,6 +2019,56 @@
  }
}

//习题
const exercisesType = ref('exercises') //习题类型
const questionList = ref([])
const getExercisesList = () => {
  if (token) {
    listLoading.value = true
    questionList.value = []
    axios.get(bookConfig.value.resourceUrl + '/resource.json').then(function (response) {
      var json = response.data
      // 处理获取到的json数据
      if (json.length > 0) {
        json.forEach((item) => {
          if (item.resourceType == '习题') {
            let text = searchText.value.replace(/^\s*|\s*$/g, '')
            if (searchText.value) {
              if (item.resourceName.indexOf(text) > -1) {
                questionList.value.push(item)
              }
            } else {
              questionList.value.push(item)
            }
          }
        })
      }
      listLoading.value = false
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}
const selectExercisesType = (type) => {
  exercisesType.value = type
  searchText.value = ''

  if (type == 'exercises') {
    getExercisesList()
  } else {
    questionList.value = []
  }
}

// 选中菜单
const activeMenu = ref('目录')

@@ -2026,6 +2100,9 @@
      getReMarkList()
      break
    case '检索':
      break
    case '习题':
      getExercisesList()
      break
  }
}
@@ -2143,7 +2220,7 @@
const allSearchReault = ref([])
const searchReaultData = reactive({
  isShow: true,
  openIndex: 0,
  openIndex: 0
})
const searchBook = async () => {
  switch (activeMenu.value) {
@@ -2175,6 +2252,9 @@
      break
    case '书签':
      getReMarkList()
      break
    case '习题':
      getExercisesList()
      break
    case '检索':
      listLoading.value = true
@@ -2214,7 +2294,6 @@
          console.log(allSearchReault.value, 444)
          listLoading.value = false
        }
        
      }
      break
  }
@@ -2265,7 +2344,6 @@

//检索跳转
const goSearchContent = (item) => {
  console.log(item,1111111111111111111111111111111111111111111111111111)
  if (window.qiankunState && window.qiankunState.gotoPage) {
    window.qiankunState.jumpSearchItem(item)
  }
@@ -2293,6 +2371,9 @@
    case '检索':
      allSearchReault.value = []
      break
    case '习题':
      getExercisesList()
      break
  }
}

@@ -2310,6 +2391,7 @@
const resourceUrl = ref('')

const selectTeachTools = (item) => {
  if (token) {
  activeTool.value = item.name
  switch (item.name) {
    case 'AI智能问答':
@@ -2330,6 +2412,18 @@
    case '生词卡片':
      resourceUrl.value = bookConfig.value.resourceUrl
      shengciVisble.value = true
    }
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

@@ -2409,7 +2503,6 @@
        floatingToolData.activeBookmark = '书签'
        reMark()
      }
      
      break
    case '截屏':
      jitT()
@@ -2517,7 +2610,10 @@
const reMarkCon = ref('')

const reMark = () => {
  let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value))
  if (token) {
    let chapterData = catalogueData.value.find(
      (item) => item.chapter == Number(currentChapter.value)
    )
  if (catalogueData.value.length > 0) {
    catalogueData.value.forEach((item1) => {
      if (item1.chapter == Number(currentChapter.value) && item1.start == headerData.process) {
@@ -2556,8 +2652,21 @@
      })
      .catch(function (error) {})
  }
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}
const getReMarkList = () => {
  if (token) {
  reMarkList.value = []
  reMarkData.value = []
  listLoading.value = true
@@ -2583,6 +2692,18 @@
      }
      listLoading.value = false
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

//跳转
@@ -2638,12 +2759,25 @@
//截图
//截图事件
function jitT() {
  if (token) {
  const screenShotHandler = new ScreenShort({
    enableWebRtc: false, // 是否显示选项框
    level: 999, // 层级级别
    completeCallback: callback, //确认回调
    closeCallback: closeFn //取消回调
  } as any)
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}
//确认回调
const callback = (val: any) => {
@@ -2708,6 +2842,7 @@
}

const getScreenshotList = () => {
  if (token) {
  screenshotData.value = []
  screenshotList.value = []
  imgPreviewList.value = []
@@ -2736,6 +2871,18 @@
      }
      listLoading.value = false
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}
//查看截图
const getCapture = (item, index) => {
@@ -2800,7 +2947,7 @@

///内容选中
const getSelection = (data) => {
  if (data.txt && token) {
  if (data.txt) {
    toolActive.value = ''
    dialogToolData.txt = data.txt
    dialogToolData.page = data.page
@@ -2873,6 +3020,7 @@

const synth = window.speechSynthesis
const dialogToolHandle = async (item) => {
  if (token) {
  toolActive.value = item.name
  colorActive.value = ''
  switch (item.name) {
@@ -2924,6 +3072,20 @@
      baiduVisible.value = true
      break
  }
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {
        showToolBox.value = false
      })
  }
}

const clickSelect = (item) => {
@@ -2936,6 +3098,7 @@
}

const addUserKey = () => {
  if (token) {
  let dom = ''
  let data = null
  switch (toolActive.value) {
@@ -3009,9 +3172,22 @@
      getSignData()
      getNotesList()
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

const getSignData = () => {
  if (token) {
  MG.identity
    .getUserKey({
      domain: 'highLightData-' + bookConfig.value.bookId,
@@ -3080,10 +3256,23 @@
        }
      }
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

//菜单笔记列表
const getNotesList = () => {
  if (token) {
  let chapterList = []
  listLoading.value = true
  catalogueData.value.forEach((item) => {
@@ -3148,6 +3337,18 @@
      }
      listLoading.value = false
    })
  } else {
    ElMessageBox.confirm('请先登录！', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      autofocus: false,
      type: 'warning'
    })
      .then(() => {
        router.push('/login')
      })
      .catch(() => {})
  }
}

//正文中删除高亮，划线，笔记操作框
@@ -3275,7 +3476,7 @@
const updateUserKey = () => {
  let data = scribeData.noteList.find((item1) => item1.chapter == dialogToolData.chapter)
  data.noteList.forEach((itemNote) => {
    if ((itemNote.id == formData.id)) {
    if (itemNote.id == formData.id) {
      itemNote.note = formData.desc
      itemNote.color = noteColorActive.value
    }
@@ -3423,11 +3624,11 @@

const layoutBtn = () => {
  localStorage.removeItem('token')
  localStorage.removeItem("userInfo")
  localStorage.removeItem('userInfo')
  router.push('/login')
}
const goLogin = () => {
  localStorage.removeItem("userInfo")
  localStorage.removeItem('userInfo')
  router.push('/login')
}
</script>
@@ -3496,14 +3697,7 @@
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      .notClick {
        
        pointer-events: none;
        .name{
          color:#949494 !important;
        }
        
      }
      .menuItem {
        text-align: center;
        line-height: 1;
@@ -3905,11 +4099,6 @@
          display: flex;
          justify-content: space-between;
          .reMarkCon {
            // width: 240px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // margin-right: 8px;
            display: flex;
            .con {
              width: 200px;
@@ -3923,8 +4112,13 @@
            display: flex;
            align-items: center;
          }
          .questionCon {
            width: 240px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
       
        }
        
        .allSearchList {
          .searchItem {
@@ -3936,7 +4130,6 @@
            .index{
              line-height: 24px;
              margin-right:10px;

            }
            .searchCon {
              flex:1;
@@ -3950,14 +4143,18 @@
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              .searchColor{
                background:rgb(245, 225, 42, 0.5)
              }
            }
            
                background: rgb(245, 225, 42, 0.5);
          }
      }
      }
      .allSearch,.notesBox,.resourceBox,.reMarkList,.screenshotList {
        }
      }
      .allSearch,
      .notesBox,
      .resourceBox,
      .reMarkList,
      .questionList,
      .screenshotList {
          height: calc(100% - 60px);
          overflow-y: auto;
        }
@@ -4082,10 +4279,6 @@
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      .notClick {
        pointer-events: none;
        color:#949494 !important;
      }
      .toolTitle {
        height: 57px;
        line-height: 53px;
@@ -4214,9 +4407,6 @@
      border-radius: 10px;
      padding: 6px;
      overflow: hidden;
      .notClick {
        pointer-events: none;
      }
      .floatToolItem {
        margin: 10px 0;
        height: 30px;