TextbookReader.git

			@@ -1,27 +1,24 @@
			<template>
			<div class="homeBox">
			<div class="headerBox">
			<!-- <span class="logoTxt">北京师范大学出版集团</span> -->
			<img :src="logo" />
			<img :src="logo" v-if="bookConfig.textbookOwnership == '北京师范大学出版集团'" />
			<!-- <span class="logoTxt" v-else>铁道出版社</span> -->
			<span></span>
			<div class="userInfoBox">
			<div></div>
			<div></div>
			<div class="userName" v-if="userInfo.name">{{ userInfo.name }}</div>
			<div><div class="layout hover" @click="layoutBtn">退出</div></div>
			</div>
			</div>
			<div class="contentBox">
			<!-- 菜单 -->
			<div class="menuBox">
			<div
			:class="['menuItem', activeMenu == item.name ? 'active' : '']"
			v-for="(item, index) in menuData"
			:key="index"
			@click="menuItemClick(item.name)"
			>
			<div class="menuIcon imgBox">
			<img :src="item.icon" />
			<div v-for="(item, index) in menuData" :key="index" @click="menuItemClick(item.name)">
			<div :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-if="item.isShow">
			<div class="menuIcon imgBox">
			<img :src="item.icon" />
			</div>
			<div class="name">{{ item.name }}</div>
			</div>
			<div class="name">{{ item.name }}</div>
			</div>
			<!-- <div class="reload hover" @click="reload()">刷新</div> -->
			<!-- 设置 -->
			@@ -99,7 +96,29 @@
			@keyup.enter="searchBook"
			>
			<template #prefix>
			<el-icon class="hover"><Search /></el-icon>
			<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>
			</template>
			</el-input>
			</div>
			@@ -120,7 +139,9 @@
			<el-tree
			ref="catalogTree"
			default-expand-all="true"
			expand-on-click-node="false"
			:expand-on-click-node="false"
			highlight-current
			node-key="start"
			:data="catalogueData"
			:props="defaultProps"
			v-if="catalogueData.length > 0"
			@@ -134,7 +155,7 @@
			</div>
			</template>
			</el-tree>
			<div v-if="catalogueData.length == 0">
			<div v-else>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			@@ -160,8 +181,22 @@
			<div class="list-box">
			<div v-if="scribeData.noteList.length > 0">
			<div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem">
			<div class="chapterName">{{ noteItem.chapterName }}</div>
			<div v-for="(item, index) in noteItem.noteList" :key="item.key" class="listItem">
			<div class="chapterName">
			<el-icon
			@click="noteClose(index)"
			v-if="scribeData.isShow && scribeData.openIndex == index"
			class="hover"
			><ArrowDown
			/></el-icon>
			<el-icon @click="noteOpen(index)" v-else class="hover"><ArrowRight /></el-icon>
			<span>{{ noteItem.chapterName }}</span>
			</div>
			<div
			v-for="(item, index1) in noteItem.noteList"
			:key="item.key"
			class="listItem"
			v-show="scribeData.isShow && scribeData.openIndex == index"
			>
			<div class="textBox">
			<div class="title">
			<div class="title-con">
			@@ -243,6 +278,28 @@
			<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>
			</template>
			</el-input>
			</div>
			</div>
			@@ -250,8 +307,12 @@
			<div v-if="resourceDataList.length > 0" class="resourceList">
			<el-row :gutter="20">
			<el-col :span="12" v-for="(item, index) in resourceDataList" :key="item">
			<div class="resourceItem hover" @click="goResourceDetail(item)">
			<div class="resourceImg">
			<div class="resourceItem">
			<div
			class="resourceImg"
			@mouseover="showHandle = index"
			@mouseleave="showHandle = null"
			>
			<img :src="item.icon" mode="" v-if="item.icon" />
			<el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon>
			<el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon>
			@@ -262,6 +323,52 @@
			<el-icon v-else-if="activeClassify == 'exercises'" size="30"
			><Tickets
			/></el-icon>
			<div class="handleBox" v-if="showHandle == index">
			<div class="delImg">
			<el-icon
			class="icon hover"
			size="20"
			@click="JumpPosition(item)"
			v-if="resourceType == 'default'"
			><LocationInformation
			/></el-icon>
			<el-icon
			@click="goPlay(item)"
			size="20"
			class="icon hover"
			v-if="item.resourceType == '视频'"
			><VideoPlay
			/></el-icon>
			<el-icon
			@click="goPlay(item)"
			size="20"
			class="icon hover"
			v-if="item.resourceType == '音频'"
			><Headset
			/></el-icon>
			<el-icon
			@click="getCapture(item, index)"
			size="20"
			class="icon hover"
			v-if="item.resourceType == '图片'"
			><View
			/></el-icon>
			<el-icon
			size="20"
			class="icon hover"
			@click="goPlay(item)"
			v-if="
			!(
			item.resourceType == '视频' \|\|
			item.resourceType == '音频' \|\|
			item.resourceType == '习题' \|\|
			item.resourceType == '图片'
			)
			"
			><Download
			/></el-icon>
			</div>
			</div>
			</div>
			<div class="rName" :title="item.resourceName">{{ item.resourceName }}</div>
			</div>
			@@ -311,7 +418,7 @@
			<div class="list-box">
			<div v-if="reMarkList.length > 0">
			<div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem">
			<div class="reMarkCon">{{ item.chapterName }} 第{{ item.page }}页</div>
			<div class="reMarkCon">{{ item.chapterName }} P{{ item.page }}</div>
			<div class="deleteReMarkImg">
			<img :src="shanchu" class="icon hover" @click="deleteReMark(item)" />
			</div>
			@@ -322,11 +429,31 @@
			</div>
			</div>
			</div>
			<!-- 菜单内容收起 -->
			<div class="menuStateBox" v-if="menuState.open">
			<svg
			@click="menuState.open = false"
			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-arrow-bar-to-left"
			>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path d="M10 12l10 0" />
			<path d="M10 12l4 4" />
			<path d="M10 12l4 -4" />
			<path d="M4 4l0 16" />
			</svg>
			<!-- <img :src="shouqiL" @click="menuState.open = false" /> -->
			</div>
			</div>
			<!-- 菜单内容收起 -->
			<div class="menuStateBox" v-if="menuState.open">
			<img :src="shouqiL" @click="menuState.open = false" />
			</div>

			<!-- 中间内容 -->
			<div class="pageBox">
			<!-- 头部显示 -->
			@@ -344,9 +471,9 @@
			</div>
			<div class="rightBox">
			<div class="pageSizeBox">
			<div><img :src="zoomIn" @click="changePageSize('add')" /></div>
			<div>{{ headerData.pageSize }}%</div>
			<div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
			<div>{{ headerData.pageSize }}%</div>
			<div><img :src="zoomIn" @click="changePageSize('add')" /></div>
			</div>
			<!-- <div class="brushImgBox">
			<div @click="jumpContent('note' + index)">
			@@ -358,15 +485,222 @@
			<!-- 微应用盒子 -->
			<div class="pageBox-content">
			<div class="content-box">
			<div
			id="container"
			@mousedown="handleMouseDown"
			@mousemove="handleMousemove"
			:style="{ background: settingForm.bgColorActive }"
			></div>
			<div id="container" :style="{ background: settingForm.bgColorActive }"></div>
			<!-- 画笔画布 -->
			<div class="canvas-box" v-show="canvasShow">
			<canvas id="canvasRef" :width="canvasWith" :height="canvasheight"></canvas>
			</div>
			</div>
			</div>
			<!-- 画笔组件 -->
			<div class="brushBox" v-if="floatingToolData.activeToolData == '画笔'">
			<div class="toolList">
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="brush">
			<div class="thickness">
			<div
			:class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'"
			@click="selectThickness('1')"
			></div>
			<div
			:class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'"
			@click="selectThickness('3')"
			></div>
			<div
			:class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'"
			@click="selectThickness('5')"
			></div>
			</div>
			<div class="lineStyle">
			<div class="lineTypeBox">
			<div
			:class="
			toolSelectData.lineTypeActive == 'solid'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('solid')"
			>
			<div class="solid"></div>
			<div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.lineTypeActive == 'dashed'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('dashed')"
			>
			<div class="dashed"></div>
			<div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('huabi')">
			<el-tooltip class="box-item" effect="dark" content="画笔" placement="bottom">
			<img :src="huabi2" alt="" class="imgBox" />
			</el-tooltip>
			<!-- <div class="text">画笔</div> -->
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="lineStyle">
			<div class="lineTypeBox">
			<div
			:class="
			toolSelectData.fontSizeActive == '14'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectfontSize('14')"
			>
			小
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '14'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.fontSizeActive == '16'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectfontSize('16')"
			>
			中
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '16'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.fontSizeActive == '18'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectfontSize('18')"
			>
			大
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('wenzi')">
			<el-tooltip class="box-item" effect="dark" content="文字" placement="bottom">
			<img :src="wenzi2" alt="" class="imgBox" />
			</el-tooltip>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="graphBox">
			<div class="graphSelect">
			<div class="flex1">
			<div class="square hover" @click="graphSelect('square')"></div>
			</div>
			<div class="flex1">
			<div class="rotundity hover" @click="graphSelect('rotundity')"></div>
			</div>
			<div class="flex1">
			<div class="triangle hover" @click="graphSelect('triangle')"></div>
			</div>
			<div class="flex1">
			<div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div>
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('tuxing')">
			<el-tooltip class="box-item" effect="dark" content="图形" placement="bottom">
			<img :src="tuxing" alt="" class="imgBox" />
			</el-tooltip>
			</div>
			</template>
			</el-popover>
			<!-- <div class="floatToolItem" @click="toolSelectHandle('xiangpi')">
			<div class="imgBox">
			<img :src="clear" alt="" />
			</div>
			<div class="text">橡皮擦</div>
			</div> -->
			<div class="floatToolItem hover" @click="toolSelectHandle('chexiao')">
			<el-tooltip class="box-item" effect="dark" content="撤销" placement="bottom">
			<img :src="clearPrevious" alt="" class="imgBox" />
			</el-tooltip>
			</div>
			<!-- <div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
			<div class="imgBox">
			<img :src="chongzuo" alt="" />
			</div>
			<div class="text">重做</div>
			</div> -->
			<div class="floatToolItem hover" @click="toolSelectHandle('qingchu')">
			<el-tooltip class="box-item" effect="dark" content="清除" placement="bottom">
			<img :src="qingchu2" alt="" class="imgBox" />
			</el-tooltip>
			</div>
			<div class="layOutTool"></div>
			<div class="floatToolItem hover" @click="toolSelectHandle('tuichu')">
			<el-tooltip class="box-item" effect="dark" content="退出" placement="bottom">
			<img :src="tuichu" alt="" class="imgBox" />
			</el-tooltip>
			</div>
			</div>
			</div>
			@@ -378,22 +712,63 @@
			<div class="text"></div>
			</div>
			<div class="menuList">
			<ul class="menu">
			<li
			v-for="item in teachToolsMenuData"
			:key="item.key"
			:class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'"
			:style="!toolState.open ? 'padding:10px 15px' : ''"
			@click="selectTeachTools(item)"
			>
			<img :src="item.icon" alt="" />
			<span v-if="toolState.open">{{ item.name }}</span>
			<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'"
			:style="!toolState.open ? 'padding:10px 15px' : ''"
			v-if="item.isShow"
			@click="selectTeachTools(item)"
			>
			<img :src="item.icon" alt="" />
			<span v-if="toolState.open">{{ item.name }}</span>
			</div>
			</li>
			</ul>
			</div>
			<div :class="['openBox', toolState.open ? 'right' : '']">
			<img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" />
			<img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" />
			<!-- <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> -->
			<!-- <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> -->
			<svg
			v-if="!toolState.open"
			@click="toolState.open = true"
			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-arrow-bar-to-left"
			>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path d="M10 12l10 0" />
			<path d="M10 12l4 4" />
			<path d="M10 12l4 -4" />
			<path d="M4 4l0 16" />
			</svg>
			<svg
			v-if="toolState.open"
			@click="toolState.open = false"
			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-arrow-bar-to-right"
			>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path d="M14 12l-10 0" />
			<path d="M14 12l-4 4" />
			<path d="M14 12l-4 -4" />
			<path d="M20 4l0 16" />
			</svg>
			</div>
			<div class="classRoomBox" v-if="false">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			@@ -432,281 +807,70 @@
			<div
			draggable="true"
			class="draggableBox"
			@dragstart="dragstart($event)"
			@dragend="dragend($event)"
			:style="`left:${floatingToolData.elLeft}px;top:${floatingToolData.elTop}px`"
			:style="`left:${floatingToolData.elLeft}px`"
			v-if="floatingToolBox.length > 0"
			>
			<div
			class="hover"
			v-for="item in floatingToolBox"
			:key="item.name"
			@click="floatItemHandle(item)"
			@mouseover="floatOverHander(item)"
			@mouseout="floatOutHander(item)"
			>
			<el-popover
			placement="right"
			width="120"
			trigger="click"
			v-if="floatingToolData.activeToolData == '标记'"
			>
			<div class="popinnerBox">
			<div class="label" v-if="floatingToolData.activeToolData == '标记'">
			<div class="labelItem hover" @click="labelShow('hide')">
			<img :src="hide" />
			<div>隐藏</div>
			</div>
			<div class="labelItem hover" @click="labelShow('show')">
			<img :src="show" />
			<div>显示</div>
			<div v-if="item.isShow">
			<el-popover
			placement="right"
			width="120"
			trigger="click"
			v-if="floatingToolData.activeToolData == '标记'"
			>
			<div class="popinnerBox">
			<div class="label" v-if="floatingToolData.activeToolData == '标记'">
			<div class="labelItem hover" @click="labelShow('hide')">
			<img :src="hide" />
			<div>隐藏</div>
			</div>
			<div class="labelItem hover" @click="labelShow('show')">
			<img :src="show" />
			<div>显示</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			>
			<el-tooltip class="box-item" effect="dark" :content="item.name" placement="right">
			<div class="imgBox">
			<img :src="item.icon" alt="" />
			</div>
			</el-tooltip>
			<!-- <div class="text">{{ item.name }}</div> -->
			</div>
			</template>
			</el-popover>
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			v-else
			>
			<el-tooltip class="box-item" effect="dark" :content="item.name" placement="right">
			<div class="imgBox">
			<img :src="item.icon" alt="" />
			</div>
			</el-tooltip>
			<!-- <div class="text">{{ item.name }}</div> -->
			</div>
			<template #reference>
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			>
			<img
			:src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
			alt=""
			/>
			<div class="text">{{ item.name }}</div>
			</div>
			</template>
			</el-popover>
			<div
			:class="
			floatingToolData.activeToolData == item.name
			? 'floatToolActive floatToolItem'
			: 'floatToolItem'
			"
			v-else
			>
			<img
			:src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
			alt=""
			/>
			<div class="text">{{ item.name }}</div>
			</div>
			</div>
			</div>
			<div
			class="brushBox"
			:style="{ left: brushBoxLeft + 'px' }"
			v-if="floatingToolData.activeToolData == '画笔'"
			>
			<div class="toolList">
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="brush">
			<div class="thickness">
			<div
			:class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'"
			@click="selectThickness('1')"
			></div>
			<div
			:class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'"
			@click="selectThickness('3')"
			></div>
			<div
			:class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'"
			@click="selectThickness('5')"
			></div>
			</div>
			<div class="lineStyle">
			<div class="lineTypeBox">
			<div
			:class="
			toolSelectData.lineTypeActive == 'solid'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('solid')"
			>
			<div class="solid"></div>
			<div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.lineTypeActive == 'dashed'
			? 'typeItem lineTypeActive'
			: 'typeItem'
			"
			@click="selectLineType('dashed')"
			>
			<div class="dashed"></div>
			<div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('huabi')">
			<div class="imgBox">
			<img :src="huabi2" alt="" />
			</div>
			<div class="text">画笔</div>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="lineStyle">
			<div class="lineTypeBox">
			<div
			:class="
			toolSelectData.fontSizeActive == '14' ? 'typeItem lineTypeActive' : 'typeItem'
			"
			@click="selectfontSize('14')"
			>
			小
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '14'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.fontSizeActive == '16' ? 'typeItem lineTypeActive' : 'typeItem'
			"
			@click="selectfontSize('16')"
			>
			中
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '16'">
			<img :src="xuanzhong" />
			</div>
			</div>
			<div
			:class="
			toolSelectData.fontSizeActive == '18' ? 'typeItem lineTypeActive' : 'typeItem'
			"
			@click="selectfontSize('18')"
			>
			大
			<div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'">
			<img :src="xuanzhong" />
			</div>
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('wenzi')">
			<div class="imgBox">
			<img :src="wenzi2" alt="" />
			</div>
			<div class="text">文字</div>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="graphBox">
			<div class="graphSelect">
			<div class="flex1">
			<div class="square hover" @click="graphSelect('square')"></div>
			</div>
			<div class="flex1">
			<div class="rotundity hover" @click="graphSelect('rotundity')"></div>
			</div>
			<div class="flex1">
			<div class="triangle hover" @click="graphSelect('triangle')"></div>
			</div>
			<div class="flex1">
			<div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div>
			</div>
			</div>
			<div class="lineStyle">
			<div class="colorSelectBox">
			<div
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="lineColorSelect(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" />
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<template #reference>
			<div class="floatToolItem hover" @click="toolSelectHandle('tuxing')">
			<div class="imgBox">
			<img :src="tuxing" alt="" />
			</div>
			<div class="text">图形</div>
			</div>
			</template>
			</el-popover>
			<!-- <div class="floatToolItem" @click="toolSelectHandle('xiangpi')">
			<div class="imgBox">
			<img :src="clear" alt="" />
			</div>
			<div class="text">橡皮擦</div>
			</div> -->
			<div class="floatToolItem hover" @click="toolSelectHandle('chexiao')">
			<div class="imgBox">
			<img :src="clearPrevious" alt="" />
			</div>
			<div class="text">撤销</div>
			</div>
			<!-- <div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
			<div class="imgBox">
			<img :src="chongzuo" alt="" />
			</div>
			<div class="text">重做</div>
			</div> -->
			<div class="floatToolItem hover" @click="toolSelectHandle('qingchu')">
			<div class="imgBox">
			<img :src="qingchu2" alt="" />
			</div>
			<div class="text">清除</div>
			</div>
			<div class="floatToolItem layOutTool hover" @click="toolSelectHandle('tuichu')">
			<div class="imgBox">
			<img :src="tuichu" alt="" />
			</div>
			<div class="text">退出</div>
			</div>
			</div>
			</div>

			<!-- 选中工具栏 -->
			<div
			class="dialogToolBox"
			@@ -727,16 +891,16 @@
			</div>
			</div>
			<div class="toolSelectBox" v-show="!(toolActive == '高亮' \|\| toolActive == '划线')">
			<div
			:class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
			v-for="item in dialogToolList"
			:key="item.icon"
			@click="dialogToolHandle(item)"
			@mouseover="dialogOverHander(item)"
			@mouseout="dialogOutHander(item)"
			>
			<img :src="item.name == toolActive ? item.activeIcon : item.icon" alt="" />
			<span>{{ item.name }}</span>
			<div v-for="item in dialogToolList" :key="item.icon" @click="dialogToolHandle(item)">
			<div
			:class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
			v-if="item.isShow"
			>
			<el-tooltip class="box-item" effect="dark" :content="item.name" placement="bottom">
			<img :src="item.icon" alt="" />
			</el-tooltip>
			</div>
			<!-- <span>{{ item.name }}</span> -->
			</div>
			</div>
			</div>
			@@ -748,16 +912,69 @@
			v-show="lineDelete.showLineDelete"
			:style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }"
			>
			<el-button @click="delUserKey">删除</el-button>
			<!-- <el-button @click="delUserKey">删除</el-button> -->
			<div class="dialogToolItem">
			<el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
			<img :src="trash" @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" />
			</el-tooltip>
			</div>
			</div>
			<!-- 笔记悬浮框 -->
			<div
			class="noteContentBox"
			v-show="noteContent.show"
			:style="{
			top: `${noteContent.top}px`,
			left: `${noteContent.left}px`,
			background: noteContent.color
			}"
			>
			<div>{{ noteContent.note }}</div>
			</div>
			<!-- 英文书选中单词词典内容 -->
			<div
			class="dictionaryDataBox"
			v-if="dictionaryData.showContent"
			:style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
			>
			<div class="content">
			<div class="phone_con">
			<div class="per-phone">
			英 /<span>{{ dictionaryData.data.ukPhone }}</span
			>/
			</div>
			<div class="per-phone">
			美 /<span>{{ dictionaryData.data.usPhone }}</span
			>/
			</div>
			</div>
			<div class="trans">
			<div v-for="item in dictionaryData.data.trans" :key="item">
			<div class="itemList">
			<div class="pos">{{ item.pos }}.</div>
			<div class="tranCn">{{ item.tranCn }}</div>
			</div>
			</div>
			</div>
			</div>
			</div>

			<el-dialog title="资源" align-center v-model="resourVisble" width="845" class="resourDialog">
			<div class="videoBox" v-if="resourType == '视频'">
			<video controls controlslist="nodownload" :src="testVideo"></video>
			</div>
			<div class="wordBox" v-if="resourType == 'word'">
			<vue-office-docx :src="testWord" />
			<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>
			<!-- 图片 -->
			<el-image-viewer
			@@ -827,15 +1044,21 @@
			<iframe :src="'https://baike.baidu.com/item/' + dialogToolData.txt" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="AI智能问答" align-center v-model="wendaVisible" width="60%" class="myDialogs">
			<el-dialog
			title="AI智能问答"
			align-center
			v-model="wendaVisible"
			width="60%"
			class="myAnserDialogs"
			>
			<div class="wendabox">
			<iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe>
			</div>
			</el-dialog>
			<el-dialog title="词典" align-center v-model="cidianVisible" width="60%" class="myDialogs">
			<el-dialog title="词典" align-center v-model="cidianVisible" width="60%" class="myAnserDialogs">
			<div class="wendabox">
			<!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> -->
			<dictionary :searchCon="dialogToolData.txt" />
			<dictionary />
			</div>
			</el-dialog>
			<el-dialog
			@@ -867,7 +1090,7 @@
			import { useRouter, useRoute } from 'vue-router'
			import useClipboard from 'vue-clipboard3'
			const { toClipboard } = useClipboard()
			const request = inject('request')
			const MG: any = inject('MG')
			const toolClass = inject('toolClass')
			const qiankunActions = inject('qiankunActions')
			//获取路由器
			@@ -901,6 +1124,9 @@
			import cjiajia from '@/assets/images/menu/C++.png'
			import javascript from '@/assets/images/menu/Javascript.png'
			import moxinggongju from '@/assets/images/menu/moxinggongju.png'
			import jisuanqi from '@/assets/images/menu/jisuanqi.png'
			import fanqiezhong from '@/assets/images/menu/fanqiezhong.png'
			import daiban from '@/assets/images/menu/daiban.png'
			import shouqiR from '@/assets/images/menu/shouqi-R.png'
			import shouqiL from '@/assets/images/menu/shouqi-L.png'
			import charuziyuan from '../assets/images/operation/charuziyuan.png'
			@@ -910,21 +1136,11 @@
			import xiake from '../assets/images/operation/xiake.png'

			import huabi from '../assets/images/operation/huabi-w.png'
			import huabi1 from '../assets/images/operation/huabi-b.png'
			import qingchu from '../assets/images/operation/Clearaway-w.png'
			import qingchu1 from '../assets/images/operation/Clearaway-b.png'
			import wenzi from '../assets/images/operation/wenzi-w.png'
			import wenzi1 from '../assets/images/operation/wenzi-b.png'
			import wenzi2 from '../assets/images/operation/wenzi.png'
			import biaoqianw from '../assets/images/operation/biaoqian-w.png'
			import biaoqian1 from '../assets/images/operation/biaoqian-b.png'
			import baiban from '../assets/images/operation/baiban-w.png'
			import baiban1 from '../assets/images/operation/baiban-b.png'
			import biaozhu from '../assets/images/operation/biaozhu-w.png'
			import biaozhu1 from '../assets/images/operation/biaozhu-b.png'
			import biaozhu from '../assets/images/operation/pencil-minus.svg'
			import jieping from '../assets/images/operation/screenshot-w.png'
			import jieping1 from '../assets/images/operation/screenshot-b.png'
			import clear from '../assets/images/operation/clear.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'
			@@ -957,6 +1173,8 @@
			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 shanchu from '../assets/images/operation/delete.png'
			import bianji from '../assets/images/operation/bianji.png'
			@@ -978,11 +1196,13 @@
			const screenWidth = ref(
			window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth
			)
			const brushBoxLeft = ref(500)
			let userInfo = ref({})
			let microApp = null // 微应用实例
			const bookConfig = ref({})
			const activeCatalog = ref()
			const reMarResult = ref()
			onMounted(() => {
			getUserInfo()
			setTimeout(() => {
			canvasWith.value = document.querySelector('.content-box').offsetWidth
			canvasheight.value = document.querySelector('.content-box').offsetHeight
			@@ -990,8 +1210,10 @@
			if (screenWidth.value < 1180) {
			menuState.open = false
			toolState.open = false
			if (!menuState.open) {
			floatingToolData.elLeft = 90
			}
			}
			brushBoxLeft.value = (screenWidth.value - 450) / 2
			window.onresize = () => {
			return (() => {
			screenWidth.value =
			@@ -1002,8 +1224,8 @@
			// 加载微应用
			microApp = loadMicroApp(microApps.book1, {
			sandbox: {
			strictStyleIsolation: true
			// experimentalStyleIsolation: true
			strictStyleIsolation: true,
			experimentalStyleIsolation: true
			},
			singular: true
			})
			@@ -1011,10 +1233,15 @@
			window.qiankunActions.onGlobalStateChange((state, prev) => {
			console.log('父层state变化', state)
			window.qiankunState = state
			if (window.qiankunState && window.qiankunState.initTestBook) {
			window.qiankunState.initTestBook(
			localStorage.getItem('bookId') + '',
			localStorage.getItem('tryPageCount')
			)
			}
			})

			// 定义父层方法
			console.log(window.qiankunActions)
			window.qiankunActions.setGlobalState({
			state: 1, // 加载子应用
			windowSelection: (data) => {
			@@ -1025,17 +1252,28 @@
			} else {
			showToolBox.value = false
			lineDelete.showLineDelete = false
			dictionaryData.showContent = false
			toolActive.value = ''
			lineDelete.top = data.y + 20
			lineDelete.left = data.x
			}
			},
			chooseWords: (data) => {
			console.log(data, '英语生词')
			if (data) {
			dialogToolData.txt = data.word
			dialogToolData.left = data.x
			dialogToolData.top = data.y + 20
			getSearchResult()
			}
			},
			getBookConfig: (data) => {
			console.log(data, '图书配置')
			console.log(data.bookConfig, '图书配置')
			bookConfig.value = data.bookConfig
			getCatalogueData()
			getResourceData()
			getTextbookComponents()
			getReMarkList()
			},
			catalogChange: (data) => {
			activeCatalog.value = data.showCatalogList
			@@ -1045,38 +1283,268 @@
			pageChange: (data) => {
			headerData.process = Number(data.page)
			currentChapter.value = data.catalog
			// catalogTree.value.filter(Number(data.start))
			console.log(data, '页面切换：目前显示页面和对应的章节信息')
			if (catalogTree.value) {
			catalogTree.value.setCurrentKey(Number(data.page))
			}
			showToolBox.value = false
			lineDelete.showLineDelete = false
			dictionaryData.showContent = false
			reMarResult.value = reMarkData.value.find((item) => {
			return item.chapterNum == data.catalog && item.page == data.page
			})
			if (reMarResult.value) {
			floatingToolData.activeToolData = '书签'
			} else {
			floatingToolData.activeToolData = ''
			}
			}
			})
			// 调用子层方法
			// if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1)
			})

			watch(
			() => screenWidth.value,
			(val) => {
			screenWidth.value = val
			if (screenWidth.value < 1180) {
			menuState.open = false
			toolState.open = false
			floatingToolData.elLeft = 100
			} else {
			floatingToolData.elLeft = 300
			// watch(
			// () => screenWidth.value,
			// (val) => {
			// screenWidth.value = val
			// if (screenWidth.value < 1180) {
			// menuState.open = false
			// toolState.open = false
			// if (!menuState.open) {
			// floatingToolData.elLeft = 90
			// }
			// } else {
			// }
			// }
			// )

			const getUserInfo = () => {
			MG.identity.getCurrentAppUser().then((res) => {
			console.log(res, '用户信息')
			if (res) {
			let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher')
			let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo')
			let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone')
			let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword')

			if (nameAndPassword) {
			userInfo.value = {
			name: nameAndPassword.credential
			}
			localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
			} else if (teacherRole && teacherInfos) {
			userInfo.value = {
			name: teacherInfos.name,
			role: 'Teacher',
			roleId: teacherRole.role.id
			}
			localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
			} else if (phoneInfo) {
			userInfo.value = {
			name: phoneInfo.credential
			}
			localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
			}
			}
			}
			)
			})
			}

			let menuData = [] //菜单
			let teachToolsMenuData = [] //右侧学习组件
			let floatingToolBox = [] //中间悬浮组件
			let dialogToolList = [] //选中文字操作
			//获取当前书籍所需组件
			const getTextbookComponents = () => {}
			const getTextbookComponents = () => {
			menuData = []
			teachToolsMenuData = []
			floatingToolBox = []
			menuData = [
			{
			name: '目录',
			icon: mulu,
			isShow: bookConfig.value.textbookComponents.indexOf('1E16353F') > -1
			},
			{
			name: '笔记',
			icon: biji,
			isShow: bookConfig.value.textbookComponents.indexOf('A3298FCF') > -1
			},
			{
			name: '资源',
			icon: ziyuan,
			isShow: bookConfig.value.textbookComponents.indexOf('A04689E6') > -1
			},
			{
			name: '知识图谱',
			icon: zhishitupu,
			isShow: bookConfig.value.textbookComponents.indexOf('6BE6A3DC') > -1
			},
			{
			name: '截图',
			icon: jietu,
			isShow: bookConfig.value.textbookComponents.indexOf('CB0EACEC') > -1
			},
			{
			name: '书签',
			icon: biaoqian,
			isShow: bookConfig.value.textbookComponents.indexOf('CF2E1400') > -1
			}
			]
			teachToolsMenuData = [
			{
			name: 'AI智能问答',
			icon: aIzhinengwenda,
			isShow: bookConfig.value.textbookComponents.indexOf('E30C0843') > -1
			},
			{
			name: '词典',
			icon: cidian,
			isShow: bookConfig.value.textbookComponents.indexOf('83FB80FD') > -1
			},
			{
			name: '生字卡片',
			icon: shengzikapian,
			isShow: bookConfig.value.textbookComponents.indexOf('38D32EE3') > -1
			},
			{
			name: '互动问答',
			icon: hudongwenda,
			isShow: bookConfig.value.textbookComponents.indexOf('31F123A4') > -1
			},
			{
			name: '思维导图',
			icon: siweidaotu,
			isShow: bookConfig.value.textbookComponents.indexOf('94FF5E48') > -1
			},
			{
			name: 'GGB函数工具',
			icon: GGB,
			isShow: bookConfig.value.textbookComponents.indexOf('43C805B2') > -1
			},
			{
			name: '几何工具',
			icon: jihe,
			isShow: bookConfig.value.textbookComponents.indexOf('FFFED2EF') > -1
			},
			{
			name: 'Python',
			icon: python,
			isShow: bookConfig.value.textbookComponents.indexOf('1D48E00E') > -1
			},
			{
			name: 'C++',
			icon: cjiajia,
			isShow: bookConfig.value.textbookComponents.indexOf('8E953BF7') > -1
			},
			{
			name: 'Javascript',
			icon: javascript,
			isShow: bookConfig.value.textbookComponents.indexOf('25AC6CC2') > -1
			},
			{
			name: '模型工具',
			icon: moxinggongju,
			isShow: bookConfig.value.textbookComponents.indexOf('366F6CF3') > -1
			},
			{
			name: '计算器',
			icon: jisuanqi,
			isShow: bookConfig.value.textbookComponents.indexOf('E9202857') > -1
			},
			{
			name: '待办事项',
			icon: daiban,
			isShow: bookConfig.value.textbookComponents.indexOf('FA3A4284') > -1
			},
			{
			name: '番茄闹钟',
			icon: fanqiezhong,
			isShow: bookConfig.value.textbookComponents.indexOf('E4DC9777') > -1
			}
			]
			floatingToolBox = [
			{
			icon: huabi,
			name: '画笔',
			isShow: bookConfig.value.textbookComponents.indexOf('800109C0') > -1
			},
			{
			icon: baiban,
			name: '白板',
			isShow: bookConfig.value.textbookComponents.indexOf('029DB3E0') > -1
			},
			{
			icon: biaozhu,
			name: '标记',
			isShow: bookConfig.value.textbookComponents.indexOf('2E613A8F') > -1
			},
			{
			icon: biaoqianw,
			name: '书签',
			isShow: bookConfig.value.textbookComponents.indexOf('D2D30448') > -1
			},
			{
			icon: jieping,
			name: '截屏',
			isShow: bookConfig.value.textbookComponents.indexOf('86F0A1B8') > -1
			}
			]
			dialogToolList = [
			{
			icon: gaoliang,
			name: '高亮',
			isShow: bookConfig.value.textbookComponents.indexOf('395B91FC') > -1
			},
			{
			icon: huaxian,
			name: '划线',
			isShow: bookConfig.value.textbookComponents.indexOf('229EC161') > -1
			},
			{
			icon: biji2,
			name: '笔记',
			isShow: bookConfig.value.textbookComponents.indexOf('BC9B0CBD') > -1
			},
			{
			icon: biaozhu2,
			name: '标注',
			isShow: bookConfig.value.textbookComponents.indexOf('A63EE24F') > -1
			},
			{
			icon: fuzhi,
			name: '复制',
			isShow: bookConfig.value.textbookComponents.indexOf('7D5594B3') > -1
			},
			{
			icon: AIyuedu,
			name: 'AI阅读',
			isShow: bookConfig.value.textbookComponents.indexOf('C05AA457') > -1
			},
			{
			icon: cidian2,
			name: '词典',
			isShow: bookConfig.value.textbookComponents.indexOf('83FB80FD') > -1
			},
			{
			icon: baidu,
			name: '百科',
			isShow: bookConfig.value.textbookComponents.indexOf('65F95274') > -1
			}
			]
			}

			//获取目录
			const catalogueData = ref([])

			const getCatalogueData = () => {
			axios
			.get(bookConfig.value.resourceUrl + '/1/information.json')
			.get(bookConfig.value.resourceUrl + '/information.json')
			.then(function (response) {
			console.log(response.data, '目录')
			var json = response.data
			// 处理获取到的json数据
			console.log(json, '目录')
			catalogueData.value = json.data
			headerData.totlePage = json.data[json.data.length - 1].end
			})
			@@ -1089,6 +1557,7 @@
			label: 'label',
			page: 'page'
			}

			const filterNode = (value, data) => {
			if (!value) return true
			return data.label.indexOf(value) !== -1
			@@ -1103,7 +1572,7 @@

			//获取资源
			//资源分类
			const classifySelectList = ref()
			const classifySelectList = ref([])
			//资源类型
			const resourceType = ref('default') //默认/教师
			const activeClassify = ref('')
			@@ -1115,10 +1584,12 @@
			const resourType = ref('') //资源类型图片/音频
			const testVideo = ref('') //视频链接
			const testWord = ref('') //word链接
			const showHandle = ref(null)

			const getResourceData = () => {
			imgPreviewList.value = []
			axios
			.get(bookConfig.value.resourceUrl + '/1/resource.json?t=12')
			.get(bookConfig.value.resourceUrl + '/resource.json?t=12')
			.then(function (response) {
			var json = response.data
			// 处理获取到的json数据
			@@ -1154,7 +1625,6 @@
			if (activeClassify.value == 'audio') {
			resourceDataList.value.push(resItem)
			}
			resourceDataList.value.push(resItem)
			audioCount++
			} else if (resItem.resourceType == '视频') {
			if (activeClassify.value == 'video') {
			@@ -1180,6 +1650,7 @@
			count: imgCount,
			key: 'image'
			})
			imgPreviewList.value = resourceDataList.value
			}
			if (audioCount > 0) {
			classifySelectList.value.push({
			@@ -1234,7 +1705,6 @@
			if (activeClassify.value == 'audio') {
			resourceDataList.value.push(resItem)
			}
			resourceDataList.value.push(resItem)
			audioCount++
			} else if (resItem.resourceType == '视频') {
			if (activeClassify.value == 'video') {
			@@ -1260,6 +1730,7 @@
			count: imgCount,
			key: 'image'
			})
			imgPreviewList.value = resourceDataList.value
			}
			if (audioCount > 0) {
			classifySelectList.value.push({
			@@ -1304,19 +1775,33 @@
			console.log(error)
			})
			}

			const goResourceDetail = (data) => {
			console.log(data)
			//资源播放视频
			const goPlay = (data) => {
			resourType.value = data.resourceType
			if (data.resourceType == '视频') {
			if (data.resourceType == '视频' \|\| data.resourceType == '音频') {
			resourVisble.value = true
			testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5
			} else if (data.resourceType == 'word') {
			testWord.value = bookConfig.value.resourceUrl + '/resourceData/' + data.name
			} else {
			if (window.qiankunState && window.qiankunState.gotoPage) {
			window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
			if (data.md5) {
			testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5
			} else {
			testVideo.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
			}
			} else {
			if (data.md5) {
			window.open(bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5)
			} else if (data.resourcePath) {
			window.open(bookConfig.value.resourceUrl + '/' + data.resourcePath)
			}
			}

			// else if (data.resourceType == 'word') {
			// testWord.value = bookConfig.value.resourceUrl + '/' + data.resourcePath
			// }
			}

			//资源跳转到指定位置
			const JumpPosition = (data) => {
			if (window.qiankunState && window.qiankunState.gotoPage) {
			window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
			}
			}

			@@ -1340,41 +1825,19 @@
			searchShow.value = true
			}
			}
			// 菜单
			const menuData = reactive([
			{
			name: '目录',
			icon: mulu
			},
			{
			name: '笔记',
			icon: biji
			},
			{
			name: '资源',
			icon: ziyuan
			},
			{
			name: '知识图谱',
			icon: zhishitupu
			},
			{
			name: '截图',
			icon: jietu
			},
			{
			name: '书签',
			icon: biaoqian
			}
			])

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

			// 菜单点击
			const menuItemClick = (name) => {
			activeMenu.value = name
			searchText.value = ''
			menuState.open = true
			if (menuState.open && activeMenu.value == name) {
			menuState.open = false
			} else {
			activeMenu.value = name
			menuState.open = true
			}
			switch (name) {
			case '目录':
			break
			@@ -1454,6 +1917,18 @@
			],
			bgColorActive: '#FBF9F4'
			})

			watch(
			() => menuState.open,
			(val) => {
			if (menuState.open == false) {
			floatingToolData.elLeft = 90
			} else {
			floatingToolData.elLeft = 390
			}
			}
			)

			const fontSizeSelect = (item) => {
			settingForm.fontSizeActive = item.key
			window.qiankunActions.setGlobalState({
			@@ -1472,6 +1947,18 @@
			}
			getNotesList()
			}
			//笔记章节收起
			const noteOpen = (index) => {
			console.log(scribeData.isShow, index)
			scribeData.isShow = true
			scribeData.openIndex = index
			}
			//笔记章节打开
			const noteClose = (index) => {
			scribeData.isShow = false
			scribeData.openIndex = index
			}

			const catalogTree = ref()
			const searchBook = async () => {
			switch (activeMenu.value) {
			@@ -1507,53 +1994,6 @@
			}
			}

			// 右侧工具
			const teachToolsMenuData = reactive([
			{
			name: 'AI智能问答',
			icon: aIzhinengwenda
			},
			{
			name: '词典',
			icon: cidian
			},
			{
			name: '生字卡片',
			icon: shengzikapian
			},
			{
			name: '互动问答',
			icon: hudongwenda
			},
			{
			name: '思维导图',
			icon: siweidaotu
			},
			{
			name: 'GGB函数工具',
			icon: GGB
			},
			{
			name: '几何工具',
			icon: jihe
			},
			{
			name: 'Python',
			icon: python
			},
			{
			name: 'C++',
			icon: cjiajia
			},
			{
			name: 'Javascript',
			icon: javascript
			},
			{
			name: '模型工具',
			icon: moxinggongju
			}
			])
			const baiduVisible = ref(false)
			const wendaVisible = ref(false)
			const cidianVisible = ref(false)
			@@ -1611,85 +2051,17 @@
			}

			//画布悬浮操作
			const floatingToolBox = reactive([
			{
			icon: huabi,
			activeIcon: huabi1,
			name: '画笔'
			},
			{
			activeIcon: baiban1,
			icon: baiban,
			name: '白板'
			},
			{
			activeIcon: biaozhu1,
			icon: biaozhu,
			name: '标记'
			},
			{
			activeIcon: biaoqian1,
			icon: biaoqianw,
			name: '书签'
			},
			{
			activeIcon: jieping1,
			icon: jieping,
			name: '截屏'
			}
			])

			let canvas = null
			const floatingToolData = reactive({
			activeToolData: '', //选中工具
			elLeft: 400,
			elTop: 300,
			elLeft: 390,
			startclientx: 0,
			startclienty: 0
			})

			//画布
			const canvasShow = ref(false)

			const floatOverHander = (item) => {
			const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
			switch (curIndex) {
			case 0:
			floatingToolBox[0].icon = huabi1
			break
			case 1:
			floatingToolBox[1].icon = baiban1
			break
			case 2:
			floatingToolBox[2].icon = biaozhu1
			break
			case 3:
			floatingToolBox[3].icon = biaoqian1
			break
			case 4:
			floatingToolBox[4].icon = jieping1
			break
			}
			}
			const floatOutHander = (item) => {
			const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
			switch (curIndex) {
			case 0:
			floatingToolBox[0].icon = huabi
			break
			case 1:
			floatingToolBox[1].icon = baiban
			break
			case 2:
			floatingToolBox[2].icon = biaozhu
			break
			case 3:
			floatingToolBox[3].icon = biaoqianw
			break
			case 4:
			floatingToolBox[4].icon = jieping
			break
			}
			}

			//截图事件
			const nameRef = ref()
			@@ -1709,7 +2081,16 @@

			//浮窗工具栏点击事件
			const floatItemHandle = (item) => {
			floatingToolData.activeToolData = item.name
			console.log(floatingToolData.activeToolData, 'floatingToolData.activeToolData')
			if (floatingToolData.activeToolData == '画笔') {
			floatingToolData.activeToolData = ''
			} else if (floatingToolData.activeToolData == '书签') {
			delReMark()
			floatingToolData.activeToolData = ''
			} else {
			floatingToolData.activeToolData = item.name
			}

			canvasShow.value = false
			switch (floatingToolData.activeToolData) {
			case '画笔':
			@@ -1726,18 +2107,7 @@
			break
			}
			}
			const dragend = (e) => {
			let x = e.clientX - floatingToolData.startclientx
			let y = e.clientY - floatingToolData.startclienty
			if (floatingToolData.elLeft + x > 0 \|\| floatingToolData.elTop + y > 0) {
			floatingToolData.elLeft = e.x - 40
			floatingToolData.elTop = e.y - 60
			}
			}
			const dragstart = (e) => {
			floatingToolData.startclientx = e.clientX
			floatingToolData.startclienty = e.clientY
			}

			//画笔操作栏事件
			const toolSelectData = reactive({
			activeTool: '',
			@@ -1821,7 +2191,7 @@
			}

			//书签
			const currentChapter = ref(0)
			const currentChapter = ref(1)
			const reMarkList = ref([])
			const reMarkData = ref([])
			const reMarkId = ref([])
			@@ -1829,67 +2199,65 @@
			const reMark = () => {
			let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value))
			console.log(chapterData)
			reMarkData.value.push({
			id: toolClass.uuid(8),
			createDate: new Date(),
			page: headerData.process,
			chapterNum: currentChapter.value,
			chapterName: chapterData.label
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'reMark',
			key: bookConfig.value.bookId,
			value: JSON.stringify(reMarkData.value)
			}
			]
			}
			})
			.then((res) => {
			floatingToolData.activeToolData = ''
			getReMarkList()
			if (chapterData) {
			reMarkData.value.push({
			id: toolClass.uuid(8),
			createDate: new Date(),
			page: headerData.process,
			chapterNum: currentChapter.value,
			chapterName: chapterData.label
			})
			.catch(function (error) {})
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'reMark',
			key: bookConfig.value.bookId,
			value: JSON.stringify(reMarkData.value)
			}
			]
			})
			.then((res) => {
			floatingToolData.activeToolData = ''
			ElMessage({
			message: '添加书签成功!',
			type: 'success'
			})
			getReMarkList()
			})
			.catch(function (error) {})
			}
			}
			const getReMarkList = () => {
			reMarkList.value = []
			reMarkData.value = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			MG.identity
			.getUserKey({
			domain: 'reMark',
			keys: [bookConfig.value.bookId]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			reMarkData.value = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			list.forEach((item) => {
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (searchText.value) {
			if (item.name.indexOf(text) > -1) {
			})
			.then((res) => {
			if (res && res.length > 0 && res[0].value) {
			reMarkData.value = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			list.forEach((item) => {
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (searchText.value) {
			if (item.name.indexOf(text) > -1) {
			reMarkList.value.push(item)
			}
			} else {
			reMarkList.value.push(item)
			}
			} else {
			reMarkList.value.push(item)
			}
			})
			console.log(reMarkList.value, '124')
			}
			})
			})
			}
			})
			}
			//删除书签
			const deleteReMark = (item) => {
			let list = reMarkList.value.filter((itemData) => itemData.id !== item.id)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			// 内容页删除书签
			const delReMark = () => {
			let list = reMarkList.value.filter((itemData) => itemData.id !== reMarResult.value.id)
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'reMark',
			@@ -1897,14 +2265,35 @@
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除书签成功!',
			type: 'success'
			})
			getReMarkList()
			})
			.then((res) => {
			ElMessage({
			message: '删除书签成功!',
			type: 'success'
			})
			getReMarkList()
			})
			}
			//书签列表删除书签
			const deleteReMark = (item) => {
			let list = reMarkList.value.filter((itemData) => itemData.id !== item.id)
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'reMark',
			key: bookConfig.value.bookId,
			value: JSON.stringify(list)
			}
			]
			})
			.then((res) => {
			ElMessage({
			message: '删除书签成功!',
			type: 'success'
			})
			getReMarkList()
			})
			}

			//截图
			@@ -1949,10 +2338,8 @@
			}

			screenshotLoading.value = true
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'screenshot',
			@@ -1960,8 +2347,7 @@
			value: JSON.stringify(screenshotData.value)
			}
			]
			}
			})
			})
			.then((res) => {
			screenshotLoading.value = false
			getScreenshotList()
			@@ -1985,31 +2371,30 @@
			const getScreenshotList = () => {
			screenshotData.value = []
			screenshotList.value = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			imgPreviewList.value = []
			MG.identity
			.getUserKey({
			domain: 'screenshot',
			keys: [bookConfig.value.bookId]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			screenshotData.value = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			list.forEach((item) => {
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (searchText.value) {
			if (item.name.indexOf(text) > -1) {
			})
			.then((res) => {
			if (res && res.length > 0 && res[0].value) {
			screenshotData.value = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			list.forEach((item) => {
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (searchText.value) {
			if (item.name.indexOf(text) > -1) {
			screenshotList.value.push(item)
			imgPreviewList.value.push(item.imgUrl)
			}
			} else {
			screenshotList.value.push(item)
			imgPreviewList.value.push(item.imgUrl)
			}
			} else {
			screenshotList.value.push(item)
			imgPreviewList.value.push(item.imgUrl)
			}
			})
			}
			})
			})
			}
			})
			}
			//查看截图
			const getCapture = (item, index) => {
			@@ -2039,10 +2424,8 @@
			type: 'warning'
			})
			.then(() => {
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'screenshot',
			@@ -2050,14 +2433,14 @@
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除截图成功!',
			type: 'success'
			})
			getScreenshotList()
			})
			.then((res) => {
			ElMessage({
			message: '删除截图成功!',
			type: 'success'
			})
			getScreenshotList()
			})
			})
			.catch(() => {})
			}
			@@ -2091,18 +2474,7 @@
			const toolActive = ref('')
			const colorActive = ref('')
			const noteColorActive = ref('')
			const dialogToolList = reactive([
			{ icon: gaoliang, activeIcon: gaoliang1, name: '高亮' },
			{ icon: huaxian, activeIcon: huaxian1, name: '划线' },
			{ icon: biji2, activeIcon: biji1, name: '笔记' },
			{ icon: biaozhu2, activeIcon: biaozhu3, name: '标注' },
			{ icon: fuzhi, activeIcon: fuzhi1, name: '复制' },
			{ icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' },
			{ icon: cidian2, activeIcon: cidian1, name: '词典' },
			{ icon: baidu, activeIcon: baidu, name: '百科' }
			// { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
			// { icon: cidian2, activeIcon: cidian1, name: '翻译' }
			])

			const colorSelectList = reactive([
			{
			label: '黄色',
			@@ -2142,75 +2514,21 @@

			//笔记，高亮，划线
			const scribeData = reactive({
			isShow: true,
			openIndex: 0,
			loading: false,
			scribeDataList: [], //划线菜单列表
			lineHeightList: [], //高亮菜单列表
			noteList: [] //笔记菜单列表
			})
			//词典
			const dictionaryData = reactive({
			showContent: false,
			data: null,
			id: ''
			})

			const synth = window.speechSynthesis
			//工具栏方法
			const dialogOverHander = (item) => {
			// toolActive.value = item.name
			const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
			switch (curIndex) {
			case 0:
			dialogToolList[0].icon = gaoliang1
			break
			case 1:
			dialogToolList[1].icon = huaxian1
			break
			case 2:
			dialogToolList[2].icon = biji1
			break
			case 3:
			dialogToolList[3].icon = biaozhu3
			break
			case 4:
			dialogToolList[4].icon = fuzhi1
			break
			case 5:
			dialogToolList[5].icon = AIyuedu1
			break
			case 6:
			dialogToolList[6].icon = cidian1
			break
			case 7:
			dialogToolList[7].icon = baidu1
			break
			}
			}
			const dialogOutHander = (item) => {
			const curIndex = dialogToolList.findIndex((f) => f.name == item.name)

			switch (curIndex) {
			case 0:
			dialogToolList[0].icon = gaoliang
			break
			case 1:
			dialogToolList[1].icon = huaxian
			break
			case 2:
			dialogToolList[2].icon = biji2
			break
			case 3:
			dialogToolList[3].icon = biaozhu2
			break
			case 4:
			dialogToolList[4].icon = fuzhi
			break
			case 5:
			dialogToolList[5].icon = AIyuedu
			break
			case 6:
			dialogToolList[6].icon = cidian2
			break
			case 7:
			dialogToolList[7].icon = baidu
			break
			}
			}
			const dialogToolHandle = async (item) => {
			toolActive.value = item.name
			colorActive.value = ''
			@@ -2227,6 +2545,7 @@
			break
			case '笔记':
			formData.desc = ''
			noteColorActive.value = '#F5E12A'
			addNoteVisble.value = true
			showToolBox.value = false
			break
			@@ -2248,7 +2567,11 @@
			toolActive.value = ''
			break
			case '词典':
			cidianVisible.value = true
			getSearchResult()

			showToolBox.value = false
			// cidianVisible.value = true
			console.log(dialogToolData.txt)
			break
			case '百科':
			console.log('https://baike.baidu.com/item/' + dialogToolData.txt)
			@@ -2321,10 +2644,8 @@

			break
			}
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: dom,
			@@ -2332,89 +2653,84 @@
			value: JSON.stringify(data)
			}
			]
			}
			}).then((res) => {
			showToolBox.value = false
			addNoteVisble.value = false
			colorActive.value = ''
			noteColorActive.value = ''
			toolActive.value = ''
			getSignData()
			getNotesList()
			})
			})
			.then((res) => {
			showToolBox.value = false
			addNoteVisble.value = false
			colorActive.value = ''
			noteColorActive.value = ''
			toolActive.value = ''
			getSignData()
			getNotesList()
			})
			}

			const getSignData = () => {
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			MG.identity
			.getUserKey({
			domain: 'highLightData-' + bookConfig.value.bookId,
			keys: activeCatalog.value.map((item) => item + '')
			}
			}).then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.lineHeight[item.key] = data
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			})
			.then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.lineHeight[item.key] = data
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			console.log(citem.type, citem)
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			}
			})
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			})
			MG.identity
			.getUserKey({
			domain: 'underline-' + bookConfig.value.bookId,
			keys: activeCatalog.value.map((item) => item + '')
			}
			}).then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.scribeList[item.key] = data
			})
			.then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.scribeList[item.key] = data

			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			}
			})
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			})
			MG.identity
			.getUserKey({
			domain: 'notes-' + bookConfig.value.bookId,
			keys: activeCatalog.value.map((item) => item + '')
			}
			}).then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.notesList[item.key] = data
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			})
			.then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			const data = JSON.parse(item.value)
			// 储值
			dialogToolData.notesList[item.key] = data
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			}
			})
			})
			}

			//菜单笔记列表
			@@ -2423,53 +2739,64 @@
			catalogueData.value.forEach((item) => {
			chapterList.push(item.chapter + '')
			})
			let uniqueArray = [...new Set(chapterList)]
			scribeData.noteList = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			MG.identity
			.getUserKey({
			domain: 'notes-' + bookConfig.value.bookId,
			keys: chapterList
			}
			}).then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			// 储值
			let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key))
			let list = JSON.parse(item.value)
			let itemList = []
			if (list.length > 0) {
			list.forEach((item) => {
			if (searchText.value) {
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (item.note.indexOf(text) > -1 \|\| item.txt.indexOf(text) > -1) {
			keys: uniqueArray
			})
			.then((res) => {
			if (res && res.length > 0) {
			for (let i = 0; i < res.length; i++) {
			const item = res[i]
			// 储值
			let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key))
			// console.log(data,'666')
			let dataList = []
			if (catalogueData.value.length > 0) {
			catalogueData.value.forEach((item1) => {
			if (item1.chapter == Number(item.key)) {
			dataList.push(item1)
			}
			})
			}
			let labels = ''
			if (dataList.length > 1) labels = dataList.map((item) => item.label).join('/')

			let list = JSON.parse(item.value)
			let itemList = []
			if (list.length > 0) {
			list.forEach((item) => {
			if (searchText.value) {
			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
			} else if (item.color == menuState.notesColor) {
			itemList.push(item)
			}
			}
			} else {
			if (menuState.notesColor == 'all') {
			itemList = list
			} else if (item.color == menuState.notesColor) {
			itemList.push(item)
			}
			}
			} else {
			if (menuState.notesColor == 'all') {
			itemList = list
			} else if (item.color == menuState.notesColor) {
			itemList.push(item)
			}
			}
			})
			})
			}
			if (dataList[0].chapter == Number(item.key) && itemList.length > 0) {
			scribeData.noteList.push({
			chapter: dataList[0].chapter,
			chapterName: labels ? labels : dataList[0].label,
			noteList: itemList
			})
			}
			}
			if (data.chapter == Number(item.key) && itemList.length > 0) {
			scribeData.noteList.push({
			chapter: data.chapter,
			chapterName: data.label,
			noteList: itemList
			})
			}
			console.log(scribeData.noteList, 'scribeData.noteList')
			}
			console.log(scribeData.noteList, 'scribeData.noteList')
			}
			})
			})
			}

			//正文中删除高亮，划线，笔记操作框
			@@ -2485,21 +2812,51 @@
			window.signClick = (type, id, chapterNum) => {
			console.log('signClick点击事件回调的实例', type, id, chapterNum)
			dialogToolData.chapter = chapterNum
			lineDelete.deleteType = type
			lineDelete.id = id
			lineDelete.showLineDelete = true
			if (type == 'Note') {
			let list = dialogToolData.notesList[chapterNum]
			let data = list.find((item) => item.id == id)
			console.log(data, 123)
			formData.id = id
			formData.desc = data.note
			noteColorActive.value = data.color
			addNoteVisble.value = true
			// addNoteVisble.value = true
			isUpdate.value = true
			} else {
			lineDelete.showLineDelete = true
			lineDelete.deleteType = type
			lineDelete.id = id
			dialogToolData.chapter = chapterNum
			}
			}

			const updateNote = () => {
			addNoteVisble.value = true
			lineDelete.showLineDelete = false
			}

			// 笔记鼠标移入
			const noteContent = reactive({
			show: false,
			top: 0,
			left: 0,
			note: '',
			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
			noteContent.color = data.color
			document.addEventListener('mousemove', function (event) {
			var x = event.offsetX
			var y = event.offsetY
			// console.log('鼠标坐标位置：', x, y)
			noteContent.top = event.clientY + 10
			noteContent.left = event.clientX
			noteContent.show = true
			})
			}
			window.noteOut = () => {
			console.log(123)
			noteContent.show = false
			}

			const delUserKey = () => {
			@@ -2516,12 +2873,14 @@
			dom = 'underline-' + bookConfig.value.bookId
			data = dialogToolData.scribeList
			break
			case 'Note':
			dom = 'notes-' + bookConfig.value.bookId
			data = dialogToolData.notesList
			break
			}
			let list = data[dialogToolData.chapter].filter((item) => item.id != ids)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: dom,
			@@ -2529,13 +2888,17 @@
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			lineDelete.showLineDelete = false
			if (window.qiankunState && window.qiankunState.delSign)
			window.qiankunState.delSign({ ids: [ids] })
			getSignData()
			})
			})
			.then((res) => {
			lineDelete.showLineDelete = false
			if (window.qiankunState && window.qiankunState.delSign) {
			window.qiankunState.delSign({ ids: [ids] })
			}
			getSignData()
			if (type == 'Note') {
			getNotesList()
			}
			})
			}

			//笔记跳转
			@@ -2564,10 +2927,8 @@
			itemNote.color = noteColorActive.value
			}
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'notes-' + bookConfig.value.bookId,
			@@ -2575,13 +2936,13 @@
			value: JSON.stringify(data.noteList)
			}
			]
			}
			}).then((res) => {
			addNoteVisble.value = false
			isUpdate.value = false
			getNotesList()
			getSignData()
			})
			})
			.then((res) => {
			addNoteVisble.value = false
			isUpdate.value = false
			getNotesList()
			getSignData()
			})
			}

			//菜单删除笔记
			@@ -2596,10 +2957,8 @@
			type: 'warning'
			})
			.then(() => {
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'notes-' + bookConfig.value.bookId,
			@@ -2607,21 +2966,44 @@
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除笔记成功!',
			type: 'success'
			})
			getNotesList()
			if (window.qiankunState && window.qiankunState.delSign) {
			window.qiankunState.delSign({ ids: [item.id] })
			}
			})
			.then((res) => {
			ElMessage({
			message: '删除笔记成功!',
			type: 'success'
			})
			getNotesList()
			if (window.qiankunState && window.qiankunState.delSign) {
			window.qiankunState.delSign({ ids: [item.id] })
			}
			})
			})
			.catch(() => {})
			}

			//获取选中英文词典
			const getSearchResult = () => {
			if (dialogToolData.txt) {
			MG.edu
			.findWords([
			{
			word: dialogToolData.txt,
			isFull: false
			}
			])
			.then((res) => {
			console.log(res[0][0], 'cid')
			if (res.length > 0 && res[0].length > 0) {
			res[0].map((item) => {
			item.trans = JSON.parse(item.trans)
			})
			dictionaryData.data = res[0][0]
			console.log(dictionaryData.data, '14')
			dictionaryData.showContent = true
			}
			})
			}
			}
			//内容区域顶部显示

			const headerData = reactive({
			@@ -2708,6 +3090,13 @@
			.userInfoBox {
			display: flex;
			align-items: center;
			.userName {
			font-size: 18px;
			margin-right: 15px;
			padding-right: 15px;
			border-right: 1px solid #e0e0e0;
			color: #2c2c2c;
			}
			.layout {
			width: 69px;
			height: 30px;
			@@ -2723,6 +3112,7 @@
			overflow: hidden;
			flex: 1;
			display: flex;
			position: relative;
			.menuBox {
			width: 80px;
			flex-shrink: 0;
			@@ -2755,6 +3145,7 @@
			.name {
			text-align: center;
			line-height: 1;
			color: #2c3e50;
			}
			}
			}
			@@ -2784,6 +3175,7 @@
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #efefef;
			}
			.resourceBox {
			padding: 10px 0;
			@@ -2951,6 +3343,7 @@
			.resourceItem {
			padding: 10px 0;
			align-items: center;

			.resourceImg {
			// width: 130px;
			height: 80px;
			@@ -2960,10 +3353,32 @@
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			img {
			height: 100%;
			width: 100%;
			object-fit: contain;
			}
			.handleBox {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(44, 44, 44, 0.6);
			text-align: center;
			padding: 2px;
			.delImg {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.icon {
			position: static;
			margin: 5px;
			color: #fff;
			}
			}
			}
			}

			@@ -3005,6 +3420,7 @@
			.icon {
			position: static;
			margin: 5px;
			color: #fff;
			}
			}
			}
			@@ -3086,6 +3502,11 @@
			}
			.chapterName {
			margin: 15px;
			display: flex;
			align-items: center;
			span {
			margin-left: 5px;
			}
			}
			.reMarkItem {
			margin: 15px;
			@@ -3095,9 +3516,9 @@
			display: flex;
			.reMarkCon {
			width: 240px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			margin-right: 8px;
			}
			.deleteReMarkImg {
			@@ -3110,15 +3531,13 @@
			.menuStateBox {
			width: 25px;
			height: 25px;
			background: #fff;
			border-radius: 3px 0px 0px 3px;
			border: 1px solid #bce3ff;
			position: fixed;
			position: absolute;
			line-height: 22px;
			top: 50%;
			left: 395px;
			left: 380px;
			text-align: center;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			z-index: 2;
			img {
			height: 10px;
			@@ -3129,6 +3548,7 @@
			.pageBox {
			flex: 1;
			font-size: 16px;
			position: relative;
			.pageBox-header {
			height: 57px;
			padding: 0 20px;
			@@ -3238,7 +3658,7 @@
			}
			.menu {
			padding-top: 20px;
			li {
			li > div {
			// height: 50px;
			padding: 10px 36px;
			font-size: 16px;
			@@ -3252,6 +3672,7 @@
			}

			span {
			width: 80px;
			margin-left: 10px;
			}
			}
			@@ -3261,11 +3682,10 @@
			height: 25px;
			background: #fff;
			border-radius: 3px 0px 0px 3px;
			border: 1px solid #bce3ff;
			position: absolute;
			top: 50%;
			right: 67px;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			@@ -3276,7 +3696,7 @@
			}
			}
			.right {
			right: 215px !important;
			right: 198px !important;
			border-radius: 0px 3px 3px 0px !important;
			}
			.classRoomBox {
			@@ -3340,26 +3760,45 @@
			}

			.draggableBox {
			width: 85px;
			background-image: linear-gradient(to bottom, #0093ff, #005dff);
			position: fixed;
			height: 310px;
			top: 300px;
			left: 450px;
			width: 40px;
			background-image: linear-gradient(to bottom, #65bbf9, #1299fb);
			// background-color: rgba(44, 44, 44, 0.5);
			position: absolute;
			// height: 310px;
			top: 70px;
			left: 380px;
			z-index: 2000;
			border-radius: 10px;
			padding: 5px;
			padding: 6px;
			overflow: hidden;
			.floatToolItem {
			height: 60px;
			margin: 10px 0;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
			img {
			margin-right: 8px;
			.imgBox {
			width: 24px;
			height: 24px;
			margin: 0 auto;
			position: relative;
			img {
			width: 100%;
			height: 100%;
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			}
			}
			.text {
			margin-right: 5px;
			@@ -3367,42 +3806,49 @@
			}
			.floatToolItem:hover,
			.floatToolActive {
			background-color: #fff;
			color: #0093ff;
			background-color: rgba(255, 255, 255, 0.3);
			}
			}

			.brushBox {
			position: fixed;
			// left: 40%;
			bottom: 20px;
			position: absolute;
			width: 290px;
			bottom: 40px;
			left: 0;
			right: 0;
			z-index: 99;
			margin: auto;
			border-radius: 5px;
			background: #fff;
			// padding: 10px;
			overflow: hidden;
			border: 1px solid #0093ff;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			.toolList {
			display: flex;
			justify-content: center;
			align-items: center;
			.floatToolItem {
			margin: 6px;
			width: 46px;
			margin: 6px 8px;
			padding: 5px;
			width: 30px;
			border-radius: 5px;
			text-align: center;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			// flex: 1;
			font-size: 14px;
			.imgBox {
			height: 18px;
			width: 18px;
			text-align: center;
			margin: 0 auto;
			margin-bottom: 5px;
			}
			}
			.floatToolItem:hover {
			background-color: rgba(44, 44, 44, 0.2);
			}
			.layOutTool {
			padding-left: 15px;
			height: 20px;
			margin-right: 5px;
			border-left: 1px solid #e0e0e0;
			}
			}
			@@ -3412,38 +3858,34 @@
			position: fixed;
			z-index: 2;
			.toolSelectBox {
			height: 57px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 12px;
			overflow: hidden;
			padding: 5px;
			background-image: linear-gradient(to right, #0093ff, #005dff);
			background-color: rgba(90, 90, 90, 0.9);
			// background-image: linear-gradient(to right, #0093ff, #005dff);
			.dialogToolItem {
			user-select: none;
			width: 60px;
			width: 26px;
			font-size: 12px;
			border-radius: 5px;
			padding: 5px 0;
			padding: 3px;
			margin: 0 5px;
			cursor: pointer;
			text-align: center;
			img {
			margin: 0 auto;
			display: block;
			margin-bottom: 5px;
			height: 16px;
			}
			span {
			color: #fff;
			}
			}
			.dialogToolItem:hover,
			.active {
			background-color: #fff;
			span {
			color: #0093ff;
			}
			background-color: rgba(255, 255, 255, 0.2);
			// span {
			// color: #0093ff;
			// }
			}
			}
			}
			@@ -3474,10 +3916,67 @@
			.lineDeleteBox {
			position: fixed;
			z-index: 2;
			border: 1px solid #0093ff;
			padding: 20px 8px;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			padding: 5px 10px;
			background: #fff;
			border-radius: 5px;
			display: flex;
			.dialogToolItem {
			padding: 3px;
			margin: 0 10px;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			}
			.dialogToolItem:hover {
			background-color: rgba(44, 44, 44, 0.2);
			}
			}
			.noteContentBox {
			position: fixed;
			z-index: 2;
			padding: 10px;
			border-radius: 5px;
			}
			.dictionaryDataBox {
			position: fixed;
			z-index: 2;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			padding: 5px 20px;
			background: #fff;
			border-radius: 5px;
			.phone_con {
			.per-phone {
			width: 150px;
			align-items: center;
			background: #f4f5f7;
			border-radius: 15px;
			box-sizing: border-box;
			color: #666;
			display: flex;
			font-weight: 500;
			margin-right: 10px;
			margin-top: 10px;
			padding: 8px 10px;
			span {
			margin: 0 10px;
			}
			}
			}
			.trans {
			padding: 20px 0;
			.itemList {
			display: flex;
			padding: 10px 0;
			.index {
			margin-right: 15px;
			}
			.pos {
			margin-right: 30px;
			}
			}
			}
			}
			.wendabox {
			width: 100%;
			@@ -3491,7 +3990,8 @@
			.myDialogs,
			.myNoteDialogs,
			.resourDialog,
			.baiduDialog {
			.baiduDialog,
			.myAnserDialogs {
			padding: 0 !important;
			border-radius: 10px !important;
			overflow: hidden;
			@@ -3520,7 +4020,7 @@
			box-sizing: border-box;
			}
			}
			.myDialogs {
			.myAnserDialogs {
			width: 628px;
			}
			.myNoteDialogs {
			@@ -3551,9 +4051,16 @@
			}
			}
			}
			.videoBox video {
			width: 100%;
			.videoBox {
			text-align: center;
			video {
			width: 100%;
			}
			audio {
			width: 100%;
			}
			}

			.wordBox {
			height: 600px;
			}