From 3a80faf0196f8dfa1b6cdb26ece68b37842c66b1 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期三, 12 六月 2024 19:24:19 +0800 Subject: [PATCH] xiugai --- src/views/readerPages/webHome.vue | 746 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 548 insertions(+), 198 deletions(-) diff --git a/src/views/home.vue b/src/views/readerPages/webHome.vue similarity index 85% rename from src/views/home.vue rename to src/views/readerPages/webHome.vue index 515ecca..ab528dc 100644 --- a/src/views/home.vue +++ b/src/views/readerPages/webHome.vue @@ -6,13 +6,19 @@ <span></span> <div class="userInfoBox"> <div class="userName" v-if="userInfo.name">{{ userInfo.name }}</div> - <div><div class="layout hover" @click="layoutBtn">閫�鍑�</div></div> + <div v-if="token"><div class="layout hover" @click="layoutBtn">閫�鍑�</div></div> + <div v-else><div class="layout hover" @click="goLogin">鐧诲綍</div></div> </div> </div> <div class="contentBox"> <!-- 鑿滃崟 --> <div class="menuBox"> - <div v-for="(item, index) in menuData" :key="index" @click="menuItemClick(item.name)"> + <div + v-for="(item, index) in menuData" + :key="index" + @click="menuItemClick(item.name)" + :class="token ? '' : 'notClick'" + > <div :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-if="item.isShow"> <div class="menuIcon imgBox"> <img :src="item.icon" /> @@ -94,31 +100,11 @@ placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText" @keyup.enter="searchBook" + clearable + @clear="handleClear" > <template #prefix> - <el-icon><Search /></el-icon> - </template> - <template #suffix> - <svg - @click="searchBook" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="icon icon-tabler icons-tabler-outline icon-tabler-list-search hover" - > - <path stroke="none" d="M0 0h24v24H0z" fill="none" /> - <path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /> - <path d="M18.5 18.5l2.5 2.5" /> - <path d="M4 6h16" /> - <path d="M4 12h4" /> - <path d="M4 18h4" /> - </svg> + <img :src="listSearch" @click="searchBook" class="hover"/> </template> </el-input> </div> @@ -135,18 +121,19 @@ </div> </div> <!-- 鐩綍 --> - <div class="menuList" v-if="activeMenu == '鐩綍'"> + <div class="menuList" v-if="activeMenu == '鐩綍'" v-loading="listLoading"> <el-tree ref="catalogTree" default-expand-all="true" :expand-on-click-node="false" - highlight-current node-key="start" + highlight-current :data="catalogueData" :props="defaultProps" v-if="catalogueData.length > 0" @node-click="handleNodeClick" :filter-node-method="filterNode" + empty-text="鏆傛棤鏁版嵁" > <template #default="{ node, data }"> <div class="custom-tree-node"> @@ -157,6 +144,32 @@ </el-tree> <div v-else> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> + <div class="allSearch" v-if="activeMenu == '妫�绱�'"> + <div class="list-box" v-loading="listLoading"> + <div v-if="allSearchReault.length > 0" class="allSearchList"> + <div v-for="(reault, index) in allSearchReault" :key="index"> + <div class="chapterName"> + <el-icon + @click="searchClose(index)" + v-if="searchReaultData.isShow && searchReaultData.openIndex == index" + class="hover" + ><ArrowDown + /></el-icon> + <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 class="index">{{ index1 + 1 }}.</div> + <div class="searchCon hover" @click="goSearchContent(item)" v-html="item.txt1" :title="item.txt"> + </div> + </div> + </div> + </div> + <div v-else> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> </div> </div> <!-- 绗旇 --> @@ -178,7 +191,7 @@ ></div> </div> </div> - <div class="list-box"> + <div class="list-box" v-loading="listLoading"> <div v-if="scribeData.noteList.length > 0"> <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem"> <div class="chapterName"> @@ -244,8 +257,8 @@ </div> </div> <!-- 璧勬簮 --> - <div class="" v-if="activeMenu == '璧勬簮'"> - <div class="resourceBox" v-if="classifySelectList.length > 0"> + <div class="resourceBox" v-if="activeMenu == '璧勬簮'" v-loading="listLoading"> + <div class="resourceSearchBox" v-if="classifySelectList.length > 0"> <div class="classification"> <div v-for="item in classifySelectList" @@ -274,31 +287,11 @@ placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText" @keyup.enter="searchBook" + clearable + @clear="handleClear" > <template #prefix> - <el-icon><Search /></el-icon> - </template> - <template #suffix> - <svg - @click="searchBook" - xmlns="http://www.w3.org/2000/svg" - width="20" - height="20" - viewBox="0 0 20 20" - fill="none" - stroke="currentColor" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - class="icon icon-tabler icons-tabler-outline icon-tabler-list-search hover" - > - <path stroke="none" d="M0 0h24v24H0z" fill="none" /> - <path d="M15 15m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /> - <path d="M18.5 18.5l2.5 2.5" /> - <path d="M4 6h16" /> - <path d="M4 12h4" /> - <path d="M4 18h4" /> - </svg> + <img :src="listSearch" @click="searchBook" class="hover"/> </template> </el-input> </div> @@ -313,8 +306,12 @@ @mouseover="showHandle = index" @mouseleave="showHandle = null" > - <img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'"/> - <img :src="item.icon" mode="" v-else-if="item.icon && activeClassify != 'image'" /> + <img :src="item.resourcePath" mode="" v-if="activeClassify == 'image'" /> + <img + :src="item.icon" + mode="" + v-else-if="item.icon && activeClassify != 'image'" + /> <!-- <el-icon v-else-if="activeClassify == 'image'" size="30"></el-icon> --> <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> <el-icon v-else-if="activeClassify == 'video'" size="30" @@ -341,11 +338,18 @@ ><VideoPlay /></el-icon> <el-icon - @click="goPlay(item)" + @click="goPlay(item, index)" size="20" class="icon hover" - v-if="item.resourceType == '闊抽'" - ><Headset + v-if="item.resourceType == '闊抽' && playIndex != index" + ><VideoPlay + /></el-icon> + <el-icon + @click="goPause()" + size="20" + class="icon hover" + v-if="item.resourceType == '闊抽' && playIndex == index" + ><VideoPause /></el-icon> <el-icon @click="getCapture(item, index)" @@ -390,8 +394,8 @@ </div> </div> <!-- 鎴浘 --> - <div class="" v-if="activeMenu == '鎴浘'"> - <div class="list-box"> + <div class="screenshotList" v-if="activeMenu == '鎴浘'"> + <div class="list-box" v-loading="listLoading"> <div class="screenshot" v-if="screenshotList.length > 0"> <div v-for="(item, index) in screenshotList" :key="item" class="captureItem"> <div class="imgBox" @mouseover="showDelete = index" @mouseleave="showDelete = null"> @@ -414,12 +418,12 @@ </div> </div> </div> - <!-- 鏍囩 --> - <div class="" v-if="activeMenu == '涔︾'"> - <div class="list-box"> + <!-- 涔︾ --> + <div class="reMarkList" v-if="activeMenu == '涔︾'"> + <div class="list-box" v-loading="listLoading"> <div v-if="reMarkList.length > 0"> <div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem"> - <div class="reMarkCon"> + <div class="reMarkCon hover" @click="goReMark(item)"> <span class="con">{{ item.content }}</span> <span>P{{ item.page }}</span> </div> <div class="deleteReMarkImg"> @@ -474,9 +478,9 @@ </div> <div class="rightBox"> <div class="pageSizeBox"> - <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> + <div class="hover"><img :src="zoomOut" @click="changePageSize('reduce')" /></div> <div>{{ headerData.pageSize }}%</div> - <div><img :src="zoomIn" @click="changePageSize('add')" /></div> + <div class="hover"><img :src="zoomIn" @click="changePageSize('add')" /></div> </div> <!-- <div class="brushImgBox"> <div @click="jumpContent('note' + index)"> @@ -718,7 +722,7 @@ <ul class="menu" v-if="teachToolsMenuData.length > 0"> <li v-for="item in teachToolsMenuData" :key="item.key"> <div - :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'" + :class="token ? 'hover' : 'notClick'" :style="!toolState.open ? 'padding:10px 15px' : ''" v-if="item.isShow" @click="selectTeachTools(item)" @@ -817,7 +821,7 @@ v-if="floatingToolBox.length > 0" > <div - class="hover" + :class="token ? 'hover' : 'notClick'" v-for="item in floatingToolBox" :key="item.name" @click="floatItemHandle(item)" @@ -858,27 +862,28 @@ </div> </template> </el-popover> - <div class="floatToolItem mark" - v-if="floatingToolData.activeToolData == '涔︾'" - > + <div class="floatToolItem mark" v-if="floatingToolData.activeBookmark == '涔︾'"> <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> <div class="imgBox"> - <img :src="tagW" alt="" v-if="floatingToolData.activeToolData == item.name"/> - <img :src="item.icon" alt="" v-else/> + <img :src="tagW" alt="" v-if="floatingToolData.activeBookmark == item.name" /> + <img :src="item.icon" alt="" v-else /> </div> </el-tooltip> </div> - <div + <div :class=" floatingToolData.activeToolData == item.name ? 'floatToolActive floatToolItem' : 'floatToolItem' " - v-else + v-else-if=" + floatingToolData.activeToolData != '涔︾' && + floatingToolData.activeToolData != '鏍囪' + " > <el-tooltip class="box-item" effect="dark" :content="item.name" placement="right"> <div class="imgBox"> - <img :src="item.icon" alt=""/> + <img :src="item.icon" alt="" /> </div> </el-tooltip> <!-- <div class="text">{{ item.name }}</div> --> @@ -906,7 +911,7 @@ </div> </div> </div> - <div class="toolSelectBox" v-show="!(toolActive == '楂樹寒' || toolActive == '鍒掔嚎')"> + <div class="toolSelectBox" v-show="toolActive != '楂樹寒' && toolActive != '鍒掔嚎'"> <div v-for="item in dialogToolList" :key="item.icon" @click="dialogToolHandle(item)"> <div :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'" @@ -931,12 +936,12 @@ <!-- <el-button @click="delUserKey">鍒犻櫎</el-button> --> <div class="dialogToolItem"> <el-tooltip class="box-item" effect="dark" content="鍒犻櫎" placement="bottom"> - <img :src="trash" @click="delUserKey" /> + <img :src="deleteIcon" @click="delUserKey" /> </el-tooltip> </div> - <div class="dialogToolItem"> - <el-tooltip class="box-item" effect="dark" content="绗旇" placement="bottom" v-if="isUpdate"> - <img :src="noteUpdate" @click="updateNote" /> + <div class="dialogToolItem" v-if="isUpdate"> + <el-tooltip class="box-item" effect="dark" content="绗旇" placement="bottom"> + <img :src="biji2" @click="updateNote" /> </el-tooltip> </div> </div> @@ -989,18 +994,26 @@ </div> </div> - <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog"> + <el-dialog + title="璧勬簮" + align-center + v-model="resourVisble" + width="845" + class="resourDialog" + :before-close="resourVisbleClose" + > <div class="videoBox" v-if="resourType == '瑙嗛'"> <video controls controlslist="nodownload" :src="testVideo"></video> </div> - <div class="videoBox" v-if="resourType == '闊抽'"> - <!-- <video controls controlslist="nodownload" :src="testVideo"></video> --> - <audio ref="audioPlayer" :src="testVideo" controls></audio> - </div> + <!-- <div class="wordBox" v-if="resourType == 'word'"> <vue-office-docx :src="testWord" /> </div> --> </el-dialog> + <div class="audioBox" v-show="false"> + <!-- <video controls controlslist="nodownload" :src="testVideo"></video> --> + <audio ref="audioPlayer" :src="testAudio" controls @loadedmetadata="autoPlay"></audio> + </div> <!-- 鍥剧墖 --> <el-image-viewer v-if="confirmDialog" @@ -1107,11 +1120,15 @@ <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe> </div> </el-dialog> + <el-dialog title="鐢熻瘝鍗$墖" align-center v-model="shengciVisble" width="800" class="myDialogs"> + <div class="wendabox"> + <newWord :resourceUrl="resourceUrl" /> + </div> + </el-dialog> </template> <script setup lang="ts"> import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' -import { ctxUrl } from '@/assets/js/config' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() @@ -1124,6 +1141,7 @@ let route = useRoute() import moment from 'moment' import dictionary from '@/views/components/dictionary.vue' +import newWord from '@/views/components/newWord.vue' import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import logo from '@/assets/images/header/logo.png' import mulu from '@/assets/images/menu/mulu.png' @@ -1132,11 +1150,13 @@ import zhishitupu from '@/assets/images/menu/zhishitupu.png' import jietu from '@/assets/images/menu/jietu.png' import biaoqian from '@/assets/images/menu/biaoqian.png' +import allSearch from '@/assets/images/menu/allSearch.svg' import topbg from '@/assets/images/header/top-bg.png' import setting from '@/assets/images/operation/setting.png' import search from '@/assets/images/operation/search.png' import search1 from '@/assets/images/operation/search1.png' import sound from '@/assets/images/operation/sound.png' +import listSearch from '@/assets/images/operation/list-search.svg' import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png' import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png' @@ -1161,51 +1181,51 @@ import dati_charu_blue from '@/assets/images/operation/dati_charu_blue.png' import xiake from '@/assets/images/operation/xiake.png' -import huabi from '../assets/images/operation/huabi-w.png' -import wenzi2 from '../assets/images/operation/wenzi.png' -import biaoqianw from '../assets/images/operation/biaoqian-w.png' -import tagW from '../assets/images/operation/tag-w.svg' -import baiban from '../assets/images/operation/baiban-w.png' -import biaozhu from '../assets/images/operation/pencil-minus.svg' -import jieping from '../assets/images/operation/screenshot-w.png' -import clearPrevious from '../assets/images/operation/clearPrevious.png' -import hide from '../assets/images/operation/hide.png' -import show from '../assets/images/operation/show.png' -import tuichu from '../assets/images/operation/tuichu.png' -import tuxing from '../assets/images/operation/tuxing.png' -import chongzuo from '../assets/images/operation/chongzuo.png' -import qingchu2 from '../assets/images/operation/qingchu.png' +import huabi from '@/assets/images/operation/huabi-w.png' +import wenzi2 from '@/assets/images/operation/wenzi.png' +import biaoqianw from '@/assets/images/operation/biaoqian-w.png' +import tagW from '@/assets/images/operation/tag-w.svg' +import baiban from '@/assets/images/operation/baiban-w.png' +import biaozhu from '@/assets/images/operation/pencil-minus.svg' +import jieping from '@/assets/images/operation/screenshot-w.png' +import clearPrevious from '@/assets/images/operation/clearPrevious.png' +import hide from '@/assets/images/operation/hide.png' +import show from '@/assets/images/operation/show.png' +import tuichu from '@/assets/images/operation/tuichu.png' +import tuxing from '@/assets/images/operation/tuxing.png' +import chongzuo from '@/assets/images/operation/chongzuo.png' +import qingchu2 from '@/assets/images/operation/qingchu.png' -import gaoliang from '../assets/images/operation/gaoliang.png' -import gaoliang1 from '../assets/images/operation/gaoliang-b.png' -import huaxian from '../assets/images/operation/huaxian.png' -import huaxian1 from '../assets/images/operation/huaxian1.png' -import biji2 from '../assets/images/operation/biji.png' -import biji1 from '../assets/images/operation/biji-b.png' -import biaozhu2 from '../assets/images/operation/biaozhu.png' -import biaozhu3 from '../assets/images/operation/biaozhu1.png' -import fuzhi from '../assets/images/operation/fuzhi.png' -import fuzhi1 from '../assets/images/operation/fuzhi-b.png' -import AIyuedu from '../assets/images/operation/AIyuedu.png' -import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png' -import cidian2 from '../assets/images/operation/cidian.png' -import cidian1 from '../assets/images/operation/cidian-b.png' -import baidu from '../assets/images/operation/baidu.png' -import baidu1 from '../assets/images/operation/baidu-b.png' -import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png' -import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png' -import xuanzhong from '../assets/images/operation/xuanzhong.png' -import xuanzhong1 from '../assets/images/operation/xuanzhong1.png' +import gaoliang from '@/assets/images/operation/gaoliang.png' +import gaoliang1 from '@/assets/images/operation/gaoliang-b.png' +import huaxian from '@/assets/images/operation/huaxian.png' +import huaxian1 from '@/assets/images/operation/huaxian1.png' +import biji2 from '@/assets/images/operation/biji.png' +import biji1 from '@/assets/images/operation/biji-b.png' +import biaozhu2 from '@/assets/images/operation/biaozhu.png' +import biaozhu3 from '@/assets/images/operation/biaozhu1.png' +import fuzhi from '@/assets/images/operation/fuzhi.png' +import fuzhi1 from '@/assets/images/operation/fuzhi-b.png' +import AIyuedu from '@/assets/images/operation/AIyuedu.png' +import AIyuedu1 from '@/assets/images/operation/AIyuedu-b.png' +import cidian2 from '@/assets/images/operation/cidian.png' +import cidian1 from '@/assets/images/operation/cidian-b.png' +import baidu from '@/assets/images/operation/baidu.png' +import baidu1 from '@/assets/images/operation/baidu-b.png' +import yuyinyuedu from '@/assets/images/operation/yuyinyuedu.png' +import yuyinyuedu1 from '@/assets/images/operation/yuyinyuedu-b.png' +import xuanzhong from '@/assets/images/operation/xuanzhong.png' +import xuanzhong1 from '@/assets/images/operation/xuanzhong1.png' -import zoomIn from '../assets/images/operation/zoomIn.png' -import zoomOut from '../assets/images/operation/zoomOut.png' -import huabi2 from '../assets/images/operation/huabi.svg' -import trash from '../assets/images/operation/trash.svg' -import noteUpdate from '../assets/images/operation/Note-b.svg' +import zoomIn from '@/assets/images/operation/zoomIn.png' +import zoomOut from '@/assets/images/operation/zoomOut.png' +import huabi2 from '@/assets/images/operation/huabi.svg' +import deleteIcon from '@/assets/images/operation/delete1.svg' +import noteUpdate from '@/assets/images/operation/Note-b.svg' -import shanchu from '../assets/images/operation/delete.png' -import bianji from '../assets/images/operation/bianji.png' -import video from '../assets/images/content/resource.png' +import shanchu from '@/assets/images/operation/delete.png' +import bianji from '@/assets/images/operation/bianji.png' +import video from '@/assets/images/content/resource.png' //寮曞叆VueOfficeDocx缁勪欢 import VueOfficeDocx from '@vue-office/docx' //寮曞叆鐩稿叧鏍峰紡 @@ -1218,6 +1238,7 @@ import { loadMicroApp } from 'qiankun' import { microApps } from '@/child.ts' +let token = localStorage.getItem('token') const canvasWith = ref(1000) const canvasheight = ref(3000) const screenWidth = ref( @@ -1229,7 +1250,9 @@ const activeCatalog = ref() const reMarResult = ref() onMounted(() => { - getUserInfo() + if (token) { + getUserInfo() + } setTimeout(() => { canvasWith.value = document.querySelector('.content-box').offsetWidth canvasheight.value = document.querySelector('.content-box').offsetHeight @@ -1249,7 +1272,7 @@ } // 鍔犺浇寰簲鐢� - microApp = loadMicroApp(microApps.book1, { + microApp = loadMicroApp(microApps[localStorage.getItem('bookId')], { sandbox: { strictStyleIsolation: true, experimentalStyleIsolation: true @@ -1260,6 +1283,7 @@ window.qiankunActions.onGlobalStateChange((state, prev) => { console.log('鐖跺眰state鍙樺寲', state) window.qiankunState = state + if (window.qiankunState && window.qiankunState.initTestBook) { window.qiankunState.initTestBook( localStorage.getItem('bookId') + '', @@ -1270,8 +1294,8 @@ // 瀹氫箟鐖跺眰鏂规硶 window.qiankunActions.setGlobalState({ - state: 1, // 鍔犺浇瀛愬簲鐢� - + state:1, + disableSign: false, windowSelection: (data) => { // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 console.log(data, '瀛愬簲鐢ㄩ�夋嫨') @@ -1281,6 +1305,7 @@ showToolBox.value = false lineDelete.showLineDelete = false dictionaryData.showContent = false + isUpdate.value = false toolActive.value = '' lineDelete.top = data.y + 20 lineDelete.left = data.x @@ -1288,11 +1313,27 @@ }, chooseWords: (data) => { console.log(data, '鑻辫鐢熻瘝') - if (data) { - dialogToolData.txt = data.word - dialogToolData.left = data.x - dialogToolData.top = data.y + 20 - getSearchResult() + switch (data.type) { + case 'word': + if (data) { + dialogToolData.txt = data.word + dialogToolData.left = data.x + dialogToolData.top = data.y + 20 + getSearchResult() + } + break + case 'swdt': + console.log() + siweiVisble.value = true + break + case 'readText': + window.speechSynthesis.cancel() + const synth = window.speechSynthesis + const utterances = new SpeechSynthesisUtterance(data.data) + // utterances.lang = 'EN' // 璁剧疆璇█涓轰腑鏂� + synth.speak(utterances) + + break } }, getBookConfig: (data) => { @@ -1305,7 +1346,9 @@ }, catalogChange: (data) => { activeCatalog.value = data.showCatalogList - getSignData() + if (!window.qiankunState.disableSign && token) { + getSignData() + } console.log(data, '绔犺妭鍒囨崲锛氱洰鍓嶆樉绀虹殑涓変釜绔犺妭') }, pageChange: (data) => { @@ -1324,14 +1367,18 @@ return item.chapterNum == data.catalog && item.page == data.page }) if (reMarResult.value) { + floatingToolData.activeBookmark = '涔︾' floatingToolData.activeToolData = '涔︾' } else { + floatingToolData.activeBookmark = '' floatingToolData.activeToolData = '' } } }) - // 璋冪敤瀛愬眰鏂规硶 - // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) + // // 璋冪敤瀛愬眰鏂规硶 + // if (window.qiankunState && window.qiankunState.getAnswers){ + // window.qiankunState.getAnswers(localStorage.getItem("")) + // } }) // watch( @@ -1355,24 +1402,30 @@ if (res) { let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher') let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo') + let wechatInfo = res.infoList.find((item) => item.type == 'WeChat') + let studentInfo = res.infoList.find((item) => item.type == 'Default') let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone') let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword') - if (nameAndPassword) { + if (teacherRole && teacherInfos) { userInfo.value = { - name: nameAndPassword.credential - } - localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) - } else if (teacherRole && teacherInfos) { - userInfo.value = { + ...teacherInfos, name: teacherInfos.name, role: 'Teacher', roleId: teacherRole.role.id } localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) + } else if (wechatInfo) { + userInfo.value = { + ...wechatInfo, + phoneNumber: phoneInfo?.credential, + Email: emailInfo?.credential, + role: 'Student' + } } else if (phoneInfo) { userInfo.value = { name: phoneInfo.credential + } localStorage.setItem('userInfo', JSON.stringify(userInfo.value)) } @@ -1394,6 +1447,11 @@ name: '鐩綍', icon: mulu, isShow: bookConfig.value.textbookComponents.indexOf('1E16353F') > -1 + }, + { + name: '妫�绱�', + icon: allSearch, + isShow: bookConfig.value.textbookComponents.indexOf('B7C5B45D') > -1 }, { name: '绗旇', @@ -1433,7 +1491,7 @@ isShow: bookConfig.value.textbookComponents.indexOf('83FB80FD') > -1 }, { - name: '鐢熷瓧鍗$墖', + name: '鐢熻瘝鍗$墖', icon: shengzikapian, isShow: bookConfig.value.textbookComponents.indexOf('38D32EE3') > -1 }, @@ -1564,10 +1622,12 @@ ] } +const listLoading = ref(false) //鑾峰彇鐩綍 const catalogueData = ref([]) const getCatalogueData = () => { + listLoading.value = true axios .get(bookConfig.value.resourceUrl + '/information.json') .then(function (response) { @@ -1576,6 +1636,7 @@ console.log(json, '鐩綍') catalogueData.value = json.data headerData.totlePage = json.data[json.data.length - 1].end + listLoading.value = false }) .catch(function (error) { console.log(error) @@ -1594,9 +1655,22 @@ const handleNodeClick = (data) => { console.log(data) - headerData.process = data.start - if (window.qiankunState && window.qiankunState.gotoPage) - window.qiankunState.gotoPage(data.chapter, data.start) + if (localStorage.getItem('tryPageCount')) { + if (data.start < localStorage.getItem('tryPageCount')) { + headerData.process = data.start + if (window.qiankunState && window.qiankunState.gotoPage) + window.qiankunState.gotoPage(data.chapter, data.start) + } else { + ElMessage({ + message: '璇曡宸茬粨鏉�!', + type: 'warning' + }) + } + } else { + headerData.process = data.start + if (window.qiankunState && window.qiankunState.gotoPage) + window.qiankunState.gotoPage(data.chapter, data.start) + } } //鑾峰彇璧勬簮 @@ -1612,11 +1686,14 @@ const resourVisble = ref(false) const resourType = ref('') //璧勬簮绫诲瀷鍥剧墖/闊抽 const testVideo = ref('') //瑙嗛閾炬帴 +const testAudio = ref('') //闊抽閾炬帴 const testWord = ref('') //word閾炬帴 const showHandle = ref(null) - +const playIndex = ref(null) //闊抽鎾斁 +const audioPlayer = ref(null) const getResourceData = () => { imgPreviewList.value = [] + listLoading.value = true axios .get(bookConfig.value.resourceUrl + '/resource.json?t=12') .then(function (response) { @@ -1627,9 +1704,9 @@ teacherResourceList.value = [] // 鑾峰彇鏁扮粍涓墍鏈夊璞$殑age灞炴�х殑鏁伴噺 json.forEach((item) => { - if(item.iconPath){ + if (item.iconPath) { item.icon = bookConfig.value.resourceUrl + '/' + item.iconPath - }else{ + } else { item.icon = '' } if (resourceType.value == 'default') { @@ -1651,12 +1728,13 @@ resourceDataList.value = [] defaultResourceList.value.forEach((resItem) => { if (resItem.resourceType == '鍥剧墖') { - if(resItem.resourcePath){ + if (resItem.resourcePath) { resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath - }else{ - resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5 + } else { + resItem.resourcePath = + bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5 } - + imgPreviewList.value.push(resItem.resourcePath) if (activeClassify.value == 'image') { resourceDataList.value.push(resItem) @@ -1691,7 +1769,6 @@ count: imgCount, key: 'image' }) - } if (audioCount > 0) { classifySelectList.value.push({ @@ -1729,7 +1806,6 @@ } }) } - console.log(resourceDataList.value,"鍥剧墖") // if(activeClassify.value == "video"){ // resourceDataList.value.forEach((item,index)=>{ // console.log(item,"item") @@ -1758,10 +1834,11 @@ resourceDataList.value = [] teacherResourceList.value.forEach((resItem) => { if (resItem.resourceType == '鍥剧墖') { - if(resItem.resourcePath){ + if (resItem.resourcePath) { resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath - }else{ - resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5 + } else { + resItem.resourcePath = + bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5 } imgPreviewList.value.push(resItem.resourcePath) if (activeClassify.value == 'image') { @@ -1835,22 +1912,32 @@ }) } } + } + listLoading.value = false }) .catch(function (error) { console.log(error) }) } //璧勬簮鎾斁瑙嗛 -const goPlay = (data) => { +const goPlay = (data, index) => { resourType.value = data.resourceType - if (data.resourceType == '瑙嗛' || data.resourceType == '闊抽') { - resourVisble.value = true + if (data.resourceType == '瑙嗛') { if (data.md5) { testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 } else { testVideo.value = bookConfig.value.resourceUrl + '/' + data.resourcePath } + resourVisble.value = true + } else if (data.resourceType == '闊抽') { + playIndex.value = index + if (data.md5) { + testAudio.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + } else { + testAudio.value = bookConfig.value.resourceUrl + '/' + data.resourcePath + } + autoPlay() } else { if (data.md5) { window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5) @@ -1863,10 +1950,25 @@ // testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath // } } +// 鍏抽棴瑙嗛 +const resourVisbleClose = () => { + resourVisble.value = false + testVideo.value = '' +} +const autoPlay = () => { + if (audioPlayer.value) { + audioPlayer.value.play() + } +} +const goPause = () => { + playIndex.value = null + testAudio.value = '' +} +// //璧勬簮璺宠浆鍒版寚瀹氫綅缃� const JumpPosition = (data) => { - console.log(data,"璺宠浆") + console.log(data, '璺宠浆') if (window.qiankunState && window.qiankunState.gotoPage) { window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination)) } @@ -1899,6 +2001,7 @@ // 鑿滃崟鐐瑰嚮 const menuItemClick = (name) => { searchText.value = '' + allSearchReault.value =[] if (menuState.open && activeMenu.value == name) { menuState.open = false } else { @@ -1912,7 +2015,7 @@ getNotesList() break case '璧勬簮': - getResourceData() + getResourceData() break case '鐭ヨ瘑鍥捐氨': break @@ -1921,6 +2024,8 @@ break case '涔︾': getReMarkList() + break + case '妫�绱�': break } } @@ -1967,6 +2072,10 @@ animation: false, bgColorList: [ { + lable: '鐧�', + key: '#fff' + }, + { lable: '榛�', key: '#FBF9F4' }, @@ -2004,6 +2113,9 @@ }) } const bgColorSelect = (item) => { + window.qiankunActions.setGlobalState({ + bgColor: item.key + }) settingForm.bgColorActive = item.key } //绗旇棰滆壊绛涢�� @@ -2028,6 +2140,11 @@ } const catalogTree = ref() +const allSearchReault = ref([]) +const searchReaultData = reactive({ + isShow: true, + openIndex: 0, +}) const searchBook = async () => { switch (activeMenu.value) { case '鐩綍': @@ -2059,6 +2176,123 @@ case '涔︾': getReMarkList() break + case '妫�绱�': + listLoading.value = true + allSearchReault.value = [] + console.log(window.qiankunState.searchBookByKeyword) + if (window.qiankunState && window.qiankunState.searchBookByKeyword) { + let searchReault = window.qiankunState.searchBookByKeyword(searchText.value) + if (searchReault.length > 0) { + let catalogueList = sortArr(catalogueData.value, 'chapter') + if (catalogueList.length > 0) { + catalogueList.forEach((item) => { + let labels = '' + if (item.length > 1) { + labels = item.map((i) => i.label).join('/') + } + let itemList = [] + let text = searchText.value.replace(/^\s*|\s*$/g, '') + searchReault.forEach((item1) => { + if (item[0].chapter == item1.catalog) { + item1.txt1 = item1.txt + let replaceStr = "<span class='searchColor'>" + text + '</span>' + + let htmlStr = item1.txt1.split(text).join(replaceStr) + item1.txt1 = '<p>' + htmlStr + '</p>' + itemList.push(item1) + } + }) + if (itemList.length > 0) { + allSearchReault.value.push({ + chapter: item[0].chapter, + chapterName: labels ? labels : item[0].label, + itemList: itemList + }) + } + }) + } + console.log(allSearchReault.value, 444) + listLoading.value = false + } + + } + break + } +} + +function sortArr(arr, str) { + var _arr = [], + _t = [], + // 涓存椂鐨勫彉閲� + _tmp + + // 鎸夌収鐗瑰畾鐨勫弬鏁板皢鏁扮粍鎺掑簭灏嗗叿鏈夌浉鍚屽�煎緱鎺掑湪涓�璧� + arr = arr.sort(function (a, b) { + var s = a[str], + t = b[str] + + return s < t ? -1 : 1 + }) + + if (arr.length) { + _tmp = arr[0][str] + } + // console.log( arr ); + // 灏嗙浉鍚岀被鍒殑瀵硅薄娣诲姞鍒扮粺涓�涓暟缁� + for (var i in arr) { + if (arr[i][str] === _tmp) { + _t.push(arr[i]) + } else { + _tmp = arr[i][str] + _arr.push(_t) + _t = [arr[i]] + } + } + // 灏嗘渶鍚庣殑鍐呭鎺ㄥ嚭鏂版暟缁� + _arr.push(_t) + return _arr +} +//妫�绱㈢珷鑺傛敹璧� +const searchOpen = (index) => { + searchReaultData.isShow = true + searchReaultData.openIndex = index +} +//妫�绱㈢珷鑺傛墦寮� +const searchClose = (index) => { + searchReaultData.isShow = false + searchReaultData.openIndex = index +} + +//妫�绱㈣烦杞� +const goSearchContent = (item) => { + console.log(item,1111111111111111111111111111111111111111111111111111) + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.jumpSearchItem(item) + } +} + +const handleClear = () => { + switch (activeMenu.value) { + case '鐩綍': + if (catalogTree) catalogTree.value.filter(searchText.value) + break + case '绗旇': + getNotesList() + break + case '璧勬簮': + getResourceData() + break + case '鐭ヨ瘑鍥捐氨': + break + case '鎴浘': + getScreenshotList() + break + case '涔︾': + getReMarkList() + break + case '妫�绱�': + allSearchReault.value = [] + break } } @@ -2068,10 +2302,12 @@ const functionVisible = ref(false) const siweiVisble = ref(false) const modelToolVisble = ref(false) +const shengciVisble = ref(false) const activeTool = ref(0) const toolState = reactive({ open: true }) +const resourceUrl = ref('') const selectTeachTools = (item) => { activeTool.value = item.name @@ -2091,6 +2327,9 @@ case '璇嶅吀': cidianVisible.value = true break + case '鐢熻瘝鍗$墖': + resourceUrl.value = bookConfig.value.resourceUrl + shengciVisble.value = true } } @@ -2123,6 +2362,7 @@ let canvas = null const floatingToolData = reactive({ activeToolData: '', //閫変腑宸ュ叿 + activeBookmark: '', //閫変腑涔︾ elLeft: 390, startclientx: 0, startclienty: 0 @@ -2152,10 +2392,7 @@ console.log(floatingToolData.activeToolData, 'floatingToolData.activeToolData') if (floatingToolData.activeToolData == '鐢荤瑪') { floatingToolData.activeToolData = '' - } else if (floatingToolData.activeToolData == '涔︾') { - delReMark() - floatingToolData.activeToolData = '' - } else { + }else { floatingToolData.activeToolData = item.name } @@ -2168,7 +2405,11 @@ case '鏍囪': break case '涔︾': - reMark() + if(floatingToolData.activeBookmark != '涔︾' ){ + floatingToolData.activeBookmark = '涔︾' + reMark() + } + break case '鎴睆': jitT() @@ -2253,8 +2494,18 @@ console.log(str, '鏍囪') if (str == 'hide') { if (window.qiankunState && window.qiankunState.delSign) { - window.qiankunState.delSign({ ids: [] }) + window.qiankunState.delSign({ type: 'Highlight' }) + window.qiankunState.delSign({ type: 'Dashing' }) + window.qiankunState.delSign({ type: 'Note' }) } + window.qiankunActions.setGlobalState({ + disableSign: true + }) + } else { + window.qiankunActions.setGlobalState({ + disableSign: false + }) + getSignData() } } @@ -2295,7 +2546,8 @@ ] }) .then((res) => { - // floatingToolData.activeToolData = '' + floatingToolData.activeToolData = '' + ElMessage({ message: '娣诲姞涔︾鎴愬姛!', type: 'success' @@ -2308,6 +2560,7 @@ const getReMarkList = () => { reMarkList.value = [] reMarkData.value = [] + listLoading.value = true MG.identity .getUserKey({ domain: 'reMark', @@ -2320,7 +2573,7 @@ list.forEach((item) => { let text = searchText.value.replace(/^\s*|\s*$/g, '') if (searchText.value) { - if (item.name.indexOf(text) > -1) { + if (item.content.indexOf(text) > -1) { reMarkList.value.push(item) } } else { @@ -2328,7 +2581,16 @@ } }) } + listLoading.value = false }) +} + +//璺宠浆 +const goReMark = (item) => { + console.log(item) + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page)) + } } // 鍐呭椤靛垹闄や功绛� const delReMark = () => { @@ -2378,7 +2640,7 @@ function jitT() { const screenShotHandler = new ScreenShort({ enableWebRtc: false, // 鏄惁鏄剧ず閫夐」妗� - level: 99, // 灞傜骇绾у埆 + level: 999, // 灞傜骇绾у埆 completeCallback: callback, //纭鍥炶皟 closeCallback: closeFn //鍙栨秷鍥炶皟 } as any) @@ -2400,7 +2662,7 @@ if (isUpdateImg.value) { screenshotData.value = [] screenshotList.value.forEach((itemNote) => { - if ((itemNote.id == screenshotId.value)) { + if (itemNote.id == screenshotId.value) { itemNote.name = nameData.value } }) @@ -2449,6 +2711,7 @@ screenshotData.value = [] screenshotList.value = [] imgPreviewList.value = [] + listLoading.value = true MG.identity .getUserKey({ domain: 'screenshot', @@ -2471,16 +2734,16 @@ } }) } + listLoading.value = false }) } //鏌ョ湅鎴浘 const getCapture = (item, index) => { - imgUrl.value = item.imgUrl + imgUrl.value = item.imgUrl || item.resourcePath previewIndex.value = index confirmDialog.value = true } const closePreview = () => { - imgPreviewList.value = [] confirmDialog.value = false } // 缂栬緫鎴浘鍚嶇О @@ -2537,7 +2800,7 @@ ///鍐呭閫変腑 const getSelection = (data) => { - if (data.txt) { + if (data.txt && token) { toolActive.value = '' dialogToolData.txt = data.txt dialogToolData.page = data.page @@ -2545,6 +2808,9 @@ dialogToolData.left = data.x dialogToolData.top = data.y showToolBox.value = true + dictionaryData.showContent = false + lineDelete.showLineDelete = false + dictionaryData.showContent = false } } @@ -2819,6 +3085,7 @@ //鑿滃崟绗旇鍒楄〃 const getNotesList = () => { let chapterList = [] + listLoading.value = true catalogueData.value.forEach((item) => { chapterList.push(item.chapter + '') }) @@ -2855,14 +3122,14 @@ let text = searchText.value.replace(/^\s*|\s*$/g, '') if (item.note.indexOf(text) > -1 || item.txt.indexOf(text) > -1) { if (menuState.notesColor == 'all') { - itemList = list + itemList.push(item) } else if (item.color == menuState.notesColor) { itemList.push(item) } } } else { if (menuState.notesColor == 'all') { - itemList = list + itemList.push(item) } else if (item.color == menuState.notesColor) { itemList.push(item) } @@ -2879,6 +3146,7 @@ } console.log(scribeData.noteList, 'scribeData.noteList') } + listLoading.value = false }) } @@ -2924,7 +3192,6 @@ color: '' }) window.noteHover = (type, id, chapterNum) => { - console.log(type, 'typetype') let list = dialogToolData.notesList[chapterNum] let data = list.find((item) => item.id == id) noteContent.note = data.note @@ -2978,7 +3245,9 @@ if (window.qiankunState && window.qiankunState.delSign) { window.qiankunState.delSign({ ids: [ids] }) } - getSignData() + if (!window.qiankunState.disableSign) { + getSignData() + } if (type == 'Note') { getNotesList() } @@ -3006,7 +3275,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 } @@ -3025,7 +3294,9 @@ addNoteVisble.value = false isUpdate.value = false getNotesList() - getSignData() + if (!window.qiankunState.disableSign) { + getSignData() + } }) } @@ -3151,7 +3422,12 @@ } const layoutBtn = () => { - localStorage.clear() + localStorage.removeItem('token') + localStorage.removeItem("userInfo") + router.push('/login') +} +const goLogin = () => { + localStorage.removeItem("userInfo") router.push('/login') } </script> @@ -3165,6 +3441,7 @@ display: flex; flex-direction: column; padding: 0 15px; + .headerBox { height: 48px; // background-image: url('@/assets/images/header/top-bg.png'); @@ -3216,6 +3493,17 @@ box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07); background: #fff; border-radius: 16px 0px 0px 0px; + -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; @@ -3261,6 +3549,9 @@ height: calc(100vh - 48px); overflow-y: auto; background: #e0f2ff; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; .searchBox { width: 100%; height: 60px; @@ -3270,7 +3561,7 @@ align-items: center; border-bottom: 1px solid #efefef; } - .resourceBox { + .resourceSearchBox { padding: 10px 0; margin: 0 20px; border-bottom: 1px solid rgba(204, 204, 204, 0.32); @@ -3363,6 +3654,7 @@ background: #fff; height: 34px; } + .is-focus, .el-input__wrapper { box-shadow: none !important; @@ -3370,6 +3662,10 @@ border: none !important; height: 34px !important; } + } + .el-input-group__append { + padding: 0 10px !important; + background: none !important; } } .screenBox { @@ -3628,7 +3924,43 @@ align-items: center; } } + + + .allSearchList { + .searchItem { + margin: 15px; + background: #fff; + border-radius: 10px; + padding: 10px; + display: flex; + .index{ + line-height: 24px; + margin-right:10px; + + } + .searchCon { + flex:1; + width: 240px; + overflow: hidden; + margin-right: 8px; + height: 45px; + line-height: 22px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + text-overflow: ellipsis; + .searchColor{ + background:rgb(245, 225, 42, 0.5) + } + } + + } } + } + .allSearch,.notesBox,.resourceBox,.reMarkList,.screenshotList { + height: calc(100% - 60px); + overflow-y: auto; + } } .menuStateBox { width: 25px; @@ -3691,6 +4023,8 @@ div { padding: 5px; + display: flex; + align-items: center; img { width: 18px; height: 18px; @@ -3745,6 +4079,13 @@ box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07); background: #fff; border-radius: 0px 16px 0px 0px; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; + .notClick { + pointer-events: none; + color:#949494 !important; + } .toolTitle { height: 57px; line-height: 53px; @@ -3873,6 +4214,9 @@ border-radius: 10px; padding: 6px; overflow: hidden; + .notClick { + pointer-events: none; + } .floatToolItem { margin: 10px 0; height: 30px; @@ -3996,6 +4340,7 @@ width: 190px; display: flex; background: #ffffff; + box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16); border-radius: 5px; margin-bottom: 10px; @@ -4020,19 +4365,20 @@ z-index: 2; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3); padding: 5px 10px; - background: #fff; + // background: #fff; + background-color: rgba(90, 90, 90, 0.9); border-radius: 5px; display: flex; .dialogToolItem { padding: 3px; - margin: 0 10px; + margin: 0 5px; border-radius: 5px; display: flex; justify-content: center; align-items: center; } .dialogToolItem:hover { - background-color: rgba(44, 44, 44, 0.2); + background-color: rgba(255, 255, 255, 0.3); } } .noteContentBox { @@ -4054,7 +4400,6 @@ } .phone_con { .per-phone { - min-width: 150px; align-items: center; // justify-content: space-between; background: #f4f5f7; @@ -4092,7 +4437,8 @@ } .wendabox { width: 100%; - height: 700px; + height: 80vh; + iframe { width: 100%; height: 100%; @@ -4132,8 +4478,12 @@ box-sizing: border-box; } } +.myDialogs { + height: 90vh; +} .myAnserDialogs { - width: 628px; + width: 700px; + height: 90vh; } .myNoteDialogs { width: 500px !important; @@ -4168,9 +4518,9 @@ video { width: 100%; } - audio { - width: 100%; - } +} +.audioBox { + // display:none; } .wordBox { -- Gitblit v1.9.1