TextbookReader.git

			@@ -1,29 +1,26 @@
			<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 == index ? 'active' : '']"
			v-for="(item, index) in menuData"
			:key="index"
			@click="menuItemClick(index)"
			>
			<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>
			<!-- <div class="reload hover" @click="reload()">刷新</div> -->
			<!-- 设置 -->
			<el-popover placement="right" :width="300" trigger="click">
			<div class="settingBox">
			@@ -49,14 +46,14 @@
			</div>
			</div>
			</el-form-item>
			<div class="inline">
			<!-- <div class="inline">
			<el-form-item label="答题音效">
			<el-switch v-model="settingForm.acoustics" />
			</el-form-item>
			<el-form-item label="答题动画">
			<el-switch v-model="settingForm.animation" />
			</el-form-item>
			</div>
			</div> -->
			<el-form-item label="底色">
			<div class="bgColor">
			<div
			@@ -91,10 +88,37 @@
			<!-- 菜单内容 -->
			<div class="menuContent" v-if="menuState.open">
			<div class="searchBox">
			<div class="inputBox" v-if="activeMenu !== 2">
			<el-input class="custom-input" placeholder="请输入内容" v-model="searchText">
			<div class="inputBox" v-if="activeMenu !== '资源'">
			<el-input
			class="custom-input"
			placeholder="请输入内容"
			v-model="searchText"
			@keyup.enter="searchBook"
			>
			<template #prefix>
			<el-icon @click="searchBook"><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>
			@@ -111,17 +135,32 @@
			</div>
			</div>
			<!-- 目录 -->
			<div class="menuList" v-if="activeMenu == 0">
			<div class="menuList" v-if="activeMenu == '目录'">
			<el-tree
			style="max-width: 600px"
			ref="catalogTree"
			default-expand-all="true"
			:expand-on-click-node="false"
			highlight-current
			node-key="start"
			:data="catalogueData"
			:props="defaultProps"
			v-if="catalogueData.length > 0"
			@node-click="handleNodeClick"
			/>
			:filter-node-method="filterNode"
			>
			<template #default="{ node, data }">
			<div class="custom-tree-node">
			<div class="catalogueLabel" :title="node.label">{{ node.label }}</div>
			<span class="pageNum">{{ data.page }}</span>
			</div>
			</template>
			</el-tree>
			<div v-else>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			<!-- 笔记 -->
			<div class="notesBox" v-if="activeMenu == 1">
			<div class="notesBox" v-if="activeMenu == '笔记'">
			<div class="screenBox">
			<div class="title">筛选</div>
			<div class="flex1 hover" @click="searchClick('all')">
			@@ -140,53 +179,73 @@
			</div>
			</div>
			<div class="list-box">
			<div v-if="scribeData.noteList.length > 0 && !scribeData.loading">
			<div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem">
			<div class="textBox">
			<div class="title">
			<div class="title-con">
			<div class="border-left" :style="{ 'border-right-color': item.color }"></div>
			<span>{{ item.createDate }}</span>
			<div v-if="scribeData.noteList.length > 0">
			<div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem">
			<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">
			<div
			class="border-left"
			:style="{ 'border-right-color': item.color }"
			></div>
			<span>{{ moment(item.createDate).format('YYYY-MM-DD') }}</span>
			</div>
			<div>
			<img :src="bianji" @click="update(item)" class="hover" />
			<img :src="shanchu" @click="deleteBtn(item)" class="hover" />
			</div>
			</div>
			<div>
			<img :src="bianji" @click="update(item, 'note')" />
			<img :src="shanchu" @click="deleteBtn(item, 'note')" />
			<div
			class="noteText hover 123456"
			@click="jumpContent(item)"
			:style="{
			background:
			item.color == '#F5E12A'
			? 'rgba(255,234,41,0.1)'
			: item.color == '#76F0AE'
			? 'rgba(83,255,162,0.1)'
			: item.color == '#59CFF5'
			? 'rgba(93,216,255,0.1)'
			: item.color == '#CAA5FC'
			? 'rgba(205,167,255,0.1)'
			: item.color == '#F5A0B9'
			? 'rgba(255,167,193,0.1)'
			: item.color
			}"
			>
			<div class="con hover">
			{{ item.note }}
			</div>
			</div>
			<div class="chapter">{{ item.txt }}</div>
			</div>
			<div
			class="noteText hover 123456"
			@click="jumpContent('note' + index)"
			:style="{
			background:
			item.color == '#F5E12A'
			? 'rgba(255,234,41,0.1)'
			: item.color == '#76F0AE'
			? 'rgba(83,255,162,0.1)'
			: item.color == '#59CFF5'
			? 'rgba(93,216,255,0.1)'
			: item.color == '#CAA5FC'
			? 'rgba(205,167,255,0.1)'
			: item.color == '#F5A0B9'
			? 'rgba(255,167,193,0.1)'
			: item.color
			}"
			>
			<div class="con hover" @click="jumpContent('note' + index)">
			{{ item.note }}
			</div>
			</div>
			<div class="chapter">{{ item.selectText }}</div>
			</div>
			</div>
			</div>
			<div v-if="scribeData.noteList.length == 0 && !scribeData.loading">
			<div v-if="scribeData.noteList.length == 0">
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 资源 -->
			<div class="" v-if="activeMenu == 2">
			<div class="resourceBox">
			<div class="" v-if="activeMenu == '资源'">
			<div class="resourceBox" v-if="classifySelectList.length > 0">
			<div class="classification">
			<div
			v-for="item in classifySelectList"
			@@ -210,9 +269,36 @@
			</div>
			</div>
			<div class="inputBox" v-if="!searchShow">
			<el-input class="custom-input" placeholder="请输入内容" v-model="searchText">
			<el-input
			class="custom-input"
			placeholder="请输入内容"
			v-model="searchText"
			@keyup.enter="searchBook"
			>
			<template #prefix>
			<el-icon @click="searchBook" class="hover"><Search /></el-icon>
			<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>
			@@ -221,29 +307,71 @@
			<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">
			<img :src="item.icon" mode="" v-if="item.icon" />
			<el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon>
			<div class="resourceItem">
			<div
			class="resourceImg"
			@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'" />
			<!-- <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"
			><VideoCamera
			/></el-icon>
			<el-icon
			v-else-if="activeClassify == 'other' && item.fileType == 'PDF'"
			size="30"
			><Files
			/></el-icon>
			<el-icon
			v-else-if="activeClassify == 'other' && item.fileType == ''"
			size="30"
			<el-icon v-else-if="activeClassify == 'other'" size="30"><Files /></el-icon>
			<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" v-if="searchText != ''" v-html="item.name"></div>
			<div class="rName" v-else :title="item.resourceName">
			{{ item.resourceName }}
			</div>
			<div class="rName" :title="item.resourceName">{{ item.resourceName }}</div>
			</div>
			</el-col>
			</el-row>
			@@ -254,7 +382,7 @@
			</div>
			</div>
			<!-- 知识图谱 -->
			<div class="" v-if="activeMenu == 3">
			<div class="" v-if="activeMenu == '知识图谱'">
			<div class="list-box">
			<div>
			<el-empty :image-size="60" description="暂无数据" />
			@@ -262,19 +390,20 @@
			</div>
			</div>
			<!-- 截图 -->
			<div class="" v-if="activeMenu == 4">
			<div class="" v-if="activeMenu == '截图'">
			<div class="list-box">
			<div class="screenshot" v-if="screenshotList.length > 0">
			<div v-for="(item, index) in screenshotList" :key="item" class="captureItem">
			<div class="imgBox">
			<img
			:src="item.imgUrl"
			class="capture"
			mode="aspectFill"
			@click="getCapture(item)"
			/>
			<div class="deleteBox hover" @click="deleteScreenshot(item, 'capture')">
			<img :src="shanchu" />
			<div class="imgBox" @mouseover="showDelete = index" @mouseleave="showDelete = null">
			<img :src="item.imgUrl" class="capture hover" mode="aspectFill" />
			<div class="deleteBox" v-if="showDelete == index">
			<div class="delImg">
			<el-icon @click="getCapture(item, index)" size="18" class="icon hover"
			><View
			/></el-icon>
			<img :src="bianji" class="icon hover" @click="updateScreenshot(item)" />
			<img :src="shanchu" class="icon hover" @click="deleteScreenshot(item)" />
			</div>
			</div>
			</div>
			<div class="captureName" :title="item.name">{{ item.name }}</div>
			@@ -286,55 +415,295 @@
			</div>
			</div>
			<!-- 标签 -->
			<div class="" v-if="activeMenu == 5">
			<div class="" v-if="activeMenu == '书签'">
			<div class="list-box">
			<div>
			<div v-if="reMarkList.length > 0">
			<div v-for="(item, index) in reMarkList" :key="index" class="reMarkItem">
			<div class="reMarkCon">
			<span class="con">{{ item.content }}</span> <span>P{{ item.page }}</span>
			</div>
			<div class="deleteReMarkImg">
			<img :src="shanchu" class="icon hover" @click="deleteReMark(item)" />
			</div>
			</div>
			</div>
			<div v-else>
			<el-empty :image-size="60" description="暂无数据" />
			</div>
			</div>
			</div>
			<!-- 菜单内容收起 -->
			<div class="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">
			<!-- 头部显示 -->
			<div class="pageBox-header">
			<div class="classTime">
			<div class="qureIcon"></div>
			<div class="">已上课：{{ headerData.classTime }}</div>
			<!-- <div class="classTime"> -->
			<div style="width: 150px">
			<!-- <div class="qureIcon"></div>
			<div class="">已上课：{{ headerData.classTime }}</div> -->
			</div>
			<div class="progress">
			<div class="bookName">{{ bookName }}</div>
			<div>{{ headerData.process }}%</div>
			<div class="bookName">{{ bookConfig.bookName }}</div>
			<div v-if="headerData.totlePage && bookConfig.bookName">
			{{ headerData.process }}/{{ headerData.totlePage }}
			</div>
			</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 class="brushImgBox">
			<div @click="jumpContent('note' + index)">
			<img :src="huabi2" class="brushImg" />画笔
			</div>
			</div>
			</div> -->
			</div>
			</div>
			<!-- 微应用盒子 -->
			<div class="pageBox-content" @scroll="pageScroll">
			<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>
			@@ -342,28 +711,72 @@
			<!-- 教学组件 -->
			<div class="toolBox">
			<div class="toolTitle">
			<span>{{ toolState.open ? '教学组件' : '组件' }}</span>
			<span>{{ toolState.open ? '学习组件' : '组件' }}</span>
			<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" />
			<div
			:class="['openBox', toolState.open ? 'right' : '']"
			v-if="teachToolsMenuData.length > 0"
			>
			<!-- <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="toolState.open">
			<div class="classRoomBox" v-if="false">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="备课组件" name="first">
			<div class="tabBox">
			@@ -400,269 +813,80 @@
			<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="floatToolItem mark"
			v-if="floatingToolData.activeToolData == '书签'"
			>
			<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/>
			</div>
			</el-tooltip>
			</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
			@click="floatItemHandle(item)"
			>
			<img
			:src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon"
			alt=""
			/>
			<div class="text">{{ item.name }}</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>
			</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" @click="toolSelectHandle('huabi')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">画笔</div>
			</div>
			</template>
			</el-popover>
			<el-popover placement="top" width="250" trigger="click">
			<div class="popinnerBox">
			<div class="write">
			<div class="characters">
			<div
			:class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'"
			@click="selectfontSize('14')"
			>
			小
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
			@click="selectfontSize('16')"
			>
			中
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
			@click="selectfontSize('18')"
			>
			大
			</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" @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="write">
			<div class="characters">
			<div
			:class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'"
			@click="selectfontSize('14')"
			>
			小
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'"
			@click="selectfontSize('16')"
			>
			中
			</div>
			<div
			:class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'"
			@click="selectfontSize('18')"
			>
			大
			</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" @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="clearPrevious" alt="" />
			</div>
			<div class="text">橡皮擦</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('chexiao')">
			<div class="imgBox">
			<img :src="clear" alt="" />
			</div>
			<div class="text">撤销</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('chongzuo')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">重做</div>
			</div>
			<div class="floatToolItem" @click="toolSelectHandle('qingchu')">
			<div class="imgBox">
			<img :src="hide" alt="" />
			</div>
			<div class="text">清除</div>
			</div>
			<div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')">
			<div class="imgBox">
			<img :src="tuichu" alt="" />
			</div>
			<div class="text">退出</div>
			</div>
			</div>
			</div>

			<!-- 选中工具栏 -->
			<div
			class="dialogToolBox"
			@@ -683,16 +907,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>
			@@ -704,17 +928,87 @@
			v-show="lineDelete.showLineDelete"
			:style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }"
			>
			<el-button @click="lineDeleteBtn">删除</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="word">{{ dictionaryData.data.word }}</div>
			<div class="phone_con">
			<div class="per-phone">
			英 <span>/{{ dictionaryData.data.ukPhone }}/</span
			><img
			:src="sound"
			class="soundBtn hover"
			@click="soundWord(dictionaryData.data.word, 'en-UK')"
			/>
			</div>
			<div class="per-phone">
			美 <span>/{{ dictionaryData.data.usPhone }}/</span
			><img
			:src="sound"
			class="soundBtn hover"
			@click="soundWord(dictionaryData.data.word, 'en-US')"
			/>
			</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
			v-if="confirmDialog"
			:zoom-rate="1.2"
			@close="closePreview"
			:initial-index="previewIndex"
			:url-list="imgPreviewList"
			/>
			<el-dialog
			title="添加笔记"
			align-center
			@@ -735,31 +1029,20 @@
			v-for="item in colorSelectList"
			:key="item.key"
			class="flex1 hover"
			@click="clickSelect(item)"
			@click="clickSelectColor(item)"
			>
			<div :style="{ background: item.key }" class="scribeItem">
			<img :src="xuanzhong" v-if="item.key == colorActive" />
			<img :src="xuanzhong" v-if="item.key == noteColorActive" />
			</div>
			</div>
			</div>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" @click="addNote">确定</el-button>
			<el-button type="primary" @click="addUserKey" v-if="!isUpdate">确定</el-button>
			<el-button type="primary" @click="updateUserKey" v-if="isUpdate">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<el-dialog
			align-center
			v-model="confirmDialog"
			width="60%"
			:closeOnClickModal="false"
			title="图片"
			class="resourDialog"
			>
			<div class="imgUrlBox">
			<img :src="imgUrl" mode="aspectFill" />
			</div>
			</el-dialog>
			<el-dialog
			title="保存截图"
			@@ -775,31 +1058,39 @@
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="screenshotClose">取消</el-button>
			<el-button type="primary" @click="addScreenshot">确定</el-button>
			<el-button type="primary" @click="addScreenshot" :loading="screenshotLoading"
			>确定</el-button
			>
			</span>
			</template>
			</el-dialog>
			<el-dialog title="百度百科" align-center v-model="baiduVisible" width="60%" class="myDialogs">
			<el-dialog title="百度百科" align-center v-model="baiduVisible" width="80%" class="baiduDialog">
			<div class="wendabox">
			<iframe :src="'https://baike.baidu.com/item/' + selectText" frameborder="0"></iframe>
			<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="26%" 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="selectText" />
			<dictionary />
			</div>
			</el-dialog>
			<el-dialog
			title="GGB函数工具"
			align-center
			v-model="functionVisible"
			width="60%"
			width="80%"
			class="myDialogs"
			>
			<div class="wendabox">
			@@ -820,11 +1111,11 @@

			<script setup lang="ts">
			import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue'
			import { ctxUrl, resourceUrl, requestCtx } from '@/assets/js/config'
			import { ctxUrl } from '@/assets/js/config'
			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')
			//获取路由器
			@@ -845,6 +1136,7 @@
			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 aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'
			import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'
			@@ -858,35 +1150,31 @@
			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'
			import charuziyuan_blue from '../assets/images/operation/charuziyuan_blue.png'
			import dati_charu from '../assets/images/operation/dati_charu.png'
			import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png'
			import xiake from '../assets/images/operation/xiake.png'
			import charuziyuan from '@/assets/images/operation/charuziyuan.png'
			import charuziyuan_blue from '@/assets/images/operation/charuziyuan_blue.png'
			import dati_charu from '@/assets/images/operation/dati_charu.png'
			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 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 tagW from '../assets/images/operation/tag-w.svg'
			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'
			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'
			@@ -912,6 +1200,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'
			@@ -933,14 +1223,13 @@
			const screenWidth = ref(
			window.innerWidth \|\| document.documentElement.clientWidth \|\| document.body.clientWidth
			)

			let userInfo = ref({})
			let microApp = null // 微应用实例
			const bookName = ref('')
			const bookId = ref(1)
			const bookConfig = ref({})
			const activeCatalog = ref()
			const reMarResult = ref()
			onMounted(() => {
			getCatalogueData()
			getResourceData()
			getUserInfo()
			setTimeout(() => {
			canvasWith.value = document.querySelector('.content-box').offsetWidth
			canvasheight.value = document.querySelector('.content-box').offsetHeight
			@@ -948,6 +1237,9 @@
			if (screenWidth.value < 1180) {
			menuState.open = false
			toolState.open = false
			if (!menuState.open) {
			floatingToolData.elLeft = 90
			}
			}
			window.onresize = () => {
			return (() => {
			@@ -964,21 +1256,52 @@
			},
			singular: true
			})

			window.qiankunActions.onGlobalStateChange((state, prev) => {
			console.log('父层state变化', state)
			bookName.value = state.bookName
			bookId.value = state.bookId
			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) => {
			// 绑定子应用选择监听事件
			console.log(data, '子应用选择')
			getSelection(data)
			if (data.txt) {
			getSelection(data)
			} 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.bookConfig, '图书配置')
			bookConfig.value = data.bookConfig
			getCatalogueData()
			// getResourceData()
			getTextbookComponents()
			// getReMarkList()
			},
			catalogChange: (data) => {
			activeCatalog.value = data.showCatalogList
			@@ -986,49 +1309,273 @@
			console.log(data, '章节切换：目前显示的三个章节')
			},
			pageChange: (data) => {
			// {
			// page: 100,
			// catalog: 5,
			// catalogId: "",
			// catalogName: "",
			// }
			headerData.process = Number(data.page)
			currentChapter.value = data.catalog
			console.log(data, '页面切换：目前显示页面和对应的章节信息')
			if (catalogTree.value) {
			catalogTree.value.setCurrentKey(Number(data.page))
			}
			showToolBox.value = false
			lineDelete.showLineDelete = false
			dictionaryData.showContent = false

			reMarkCon.value = data.text
			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
			// 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))
			}
			}
			}
			)
			watch(
			() => bookId.value,
			(val) => {
			// getNotesList() // 获取笔记
			// getlineHeightList() //获取高亮
			// getScribeList() //获取划线
			// getScreenshotList() //截图
			}
			)
			})
			}

			let menuData = [] //菜单
			let teachToolsMenuData = [] //右侧学习组件
			let floatingToolBox = [] //中间悬浮组件
			let dialogToolList = [] //选中文字操作
			//获取当前书籍所需组件
			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(resourceUrl + '/1/information.json?t=123')
			.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
			})
			.catch(function (error) {
			console.log(error)
			@@ -1036,107 +1583,307 @@
			}
			const defaultProps = {
			children: 'children',
			label: 'label'
			label: 'label',
			start: 'start'
			}

			const filterNode = (value, data) => {
			if (!value) return true
			return data.label.indexOf(value) !== -1
			}

			const handleNodeClick = (data) => {
			document.getElementById(data.id).scrollIntoView()
			console.log(data)
			headerData.process = data.start
			if (window.qiankunState && window.qiankunState.gotoPage)
			window.qiankunState.gotoPage(data.chapter, data.start)
			}

			//获取资源
			//资源分类
			const classifySelectList = reactive([
			{
			title: '图片',
			count: 0,
			key: 'image'
			},
			{
			title: '音频',
			count: 0,
			key: 'audio'
			},
			{
			title: '视频',
			count: 0,
			key: 'video'
			},
			{
			title: '其他',
			count: 0,
			key: 'other'
			}
			])
			const activeClassify = ref('image')
			const classifySelectList = ref([])
			//资源类型
			const resourceType = ref('default') //默认/教师
			const activeClassify = ref('')
			const searchShow = ref(true)
			const resourceData = ref({})
			const defaultResourceList = ref([])
			const teacherResourceList = ref([])
			const resourceDataList = ref([])
			const resourceImgList = ref([])
			const resourceVideoList = ref([])
			const resourceAudioList = ref([])
			const resourceDocList = ref([])
			const resourVisble = ref(false)
			const resourType = ref('')
			const resourType = ref('') //资源类型图片/音频
			const testVideo = ref('') //视频链接
			const testWord = ref('') //word链接
			const showHandle = ref(null)

			const getResourceData = () => {
			imgPreviewList.value = []
			axios
			.get(resourceUrl + '/1/resource.json')
			.get(bookConfig.value.resourceUrl + '/resource.json?t=12')
			.then(function (response) {
			var json = response.data
			// 处理获取到的json数据
			if (json.length > 0) {
			defaultResourceList.value = []
			teacherResourceList.value = []
			// 获取数组中所有对象的age属性的数量
			json.forEach((item) => {
			if (item.fileType == '图片') {
			resourceImgList.value.push(item)
			} else if (item.fileType == '视频') {
			resourceVideoList.value.push(item)
			} else if (item.fileType == '音频') {
			resourceAudioList.value.push(item)
			if(item.iconPath){
			item.icon = bookConfig.value.resourceUrl + '/' + item.iconPath
			}else{
			item.icon = ''
			}
			if (resourceType.value == 'default') {
			if (item.isTeacherResource == '否') {
			defaultResourceList.value.push(item)
			}
			} else {
			resourceDocList.value.push(item)
			if (item.isTeacherResource == '是') {
			teacherResourceList.value.push(item)
			}
			}
			})
			if (defaultResourceList.value.length > 0) {
			let imgCount = 0
			let audioCount = 0
			let videoCount = 0
			let exercisesCount = 0
			let otherCount = 0
			resourceDataList.value = []
			defaultResourceList.value.forEach((resItem) => {
			if (resItem.resourceType == '图片') {
			if(resItem.resourcePath){
			resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
			}else{
			resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
			}

			imgPreviewList.value.push(resItem.resourcePath)
			if (activeClassify.value == 'image') {
			resourceDataList.value.push(resItem)
			}
			imgCount++
			} else if (resItem.resourceType == '音频') {
			if (activeClassify.value == 'audio') {
			resourceDataList.value.push(resItem)
			}
			audioCount++
			} else if (resItem.resourceType == '视频') {
			if (activeClassify.value == 'video') {
			resourceDataList.value.push(resItem)
			}
			videoCount++
			} else if (resItem.resourceType == '习题') {
			if (activeClassify.value == 'exercises') {
			resourceDataList.value.push(resItem)
			}
			exercisesCount++
			} else {
			if (activeClassify.value == 'other') {
			resourceDataList.value.push(resItem)
			}
			otherCount++
			}
			})
			classifySelectList.value = []
			if (imgCount > 0) {
			classifySelectList.value.push({
			title: '图片',
			count: imgCount,
			key: 'image'
			})

			}
			if (audioCount > 0) {
			classifySelectList.value.push({
			title: '音频',
			count: audioCount,
			key: 'audio'
			})
			}
			if (videoCount > 0) {
			classifySelectList.value.push({
			title: '视频',
			count: videoCount,
			key: 'video'
			})
			}
			if (exercisesCount > 0) {
			classifySelectList.value.push({
			title: '习题',
			count: exercisesCount,
			key: 'exercises'
			})
			}
			if (otherCount > 0) {
			classifySelectList.value.push({
			title: '其他',
			count: otherCount,
			key: 'other'
			})
			}
			if (!activeClassify.value) {
			activeClassify.value = classifySelectList.value[0].key
			defaultResourceList.value.forEach((resItem1) => {
			if (resItem1.resourceType == classifySelectList.value[0].title) {
			resourceDataList.value.push(resItem1)
			}
			})
			}
			console.log(resourceDataList.value,"图片")
			// if(activeClassify.value == "video"){
			// resourceDataList.value.forEach((item,index)=>{
			// console.log(item,"item")
			// let video = document.createElement("video");
			// video.src = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + item.md5;
			// const canvas = document.createElement('canvas')
			// canvas.width = 130
			// canvas.height = 80
			// const ctx:any = canvas.getContext('2d');
			// video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
			// video.currentTime = 1 // 第一帧

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

			// }
			} else {
			let imgCount = 0
			let audioCount = 0
			let videoCount = 0
			let exercisesCount = 0
			let otherCount = 0
			resourceDataList.value = []
			teacherResourceList.value.forEach((resItem) => {
			if (resItem.resourceType == '图片') {
			if(resItem.resourcePath){
			resItem.resourcePath = bookConfig.value.resourceUrl + '/' + resItem.resourcePath
			}else{
			resItem.resourcePath = bookConfig.value.requestCtx + '/file/GetPreViewImage?md5=' + resItem.md5
			}
			imgPreviewList.value.push(resItem.resourcePath)
			if (activeClassify.value == 'image') {
			resourceDataList.value.push(resItem)
			}
			imgCount++
			} else if (resItem.resourceType == '音频') {
			if (activeClassify.value == 'audio') {
			resourceDataList.value.push(resItem)
			}
			audioCount++
			} else if (resItem.resourceType == '视频') {
			if (activeClassify.value == 'video') {
			resourceDataList.value.push(resItem)
			}
			videoCount++
			} else if (resItem.resourceType == '习题') {
			if (activeClassify.value == 'exercises') {
			resourceDataList.value.push(resItem)
			}
			exercisesCount++
			} else {
			if (activeClassify.value == 'other') {
			resourceDataList.value.push(resItem)
			}
			otherCount++
			}
			})
			classifySelectList.value = []
			if (imgCount > 0) {
			classifySelectList.value.push({
			title: '图片',
			count: imgCount,
			key: 'image'
			})
			}
			if (audioCount > 0) {
			classifySelectList.value.push({
			title: '音频',
			count: audioCount,
			key: 'audio'
			})
			}
			if (videoCount > 0) {
			classifySelectList.value.push({
			title: '视频',
			count: videoCount,
			key: 'video'
			})
			}
			if (exercisesCount > 0) {
			classifySelectList.value.push({
			title: '习题',
			count: exercisesCount,
			key: 'exercises'
			})
			}
			if (otherCount > 0) {
			classifySelectList.value.push({
			title: '其他',
			count: otherCount,
			key: 'other'
			})
			}
			if (!activeClassify.value) {
			activeClassify.value = classifySelectList.value[0].key
			teacherResourceList.value.forEach((resItem1) => {
			if (resItem1.resourceType == classifySelectList.value[0].title) {
			resourceDataList.value.push(resItem1)
			}
			})
			}
			}
			}
			resourceDataList.value = resourceImgList.value
			classifySelectList[0].count = resourceImgList.value.length
			classifySelectList[1].count = resourceAudioList.value.length
			classifySelectList[2].count = resourceVideoList.value.length
			classifySelectList[3].count = resourceDocList.value.length
			})
			.catch(function (error) {
			console.log(error)
			})
			}

			const goResourceDetail = (data) => {
			resourType.value = data.fileType
			if (data.fileType == '视频') {
			//资源播放视频
			const goPlay = (data) => {
			resourType.value = data.resourceType
			if (data.resourceType == '视频' \|\| data.resourceType == '音频') {
			resourVisble.value = true
			testVideo.value = requestCtx + '/file/api/ApiDownload?md5=' + data.md5
			} else if (data.fileType == 'PDF') {
			window.open(requestCtx + '/file/api/ApiDownload?md5=' + data.md5)
			// testWord.value = resourceUrl + '/resourceData/' + data.name
			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) => {
			console.log(data,"跳转")
			if (window.qiankunState && window.qiankunState.gotoPage) {
			window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination))
			}
			}

			//资源类型选择默认/教师
			const selectResourceType = (type) => {
			resourceType.value = type
			searchText.value = ''
			getResourceData()
			}
			//资源类型图片/视频/音频/习题/其他
			const classifyClick = (item) => {
			activeClassify.value = item.key
			resourceDataList.value = []
			searchText.value = ''
			switch (item.key) {
			case 'image':
			resourceDataList.value = resourceImgList.value
			break
			case 'audio':
			resourceDataList.value = resourceAudioList.value
			break
			case 'video':
			resourceDataList.value = resourceVideoList.value
			break
			case 'other':
			resourceDataList.value = resourceDocList.value
			break
			}
			getResourceData()
			}
			const searchBtn = () => {
			if (searchShow.value) {
			@@ -1145,54 +1892,35 @@
			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(0)
			//资源类型
			const resourceType = ref('default')
			const activeMenu = ref('目录')

			// 菜单点击
			const menuItemClick = (index) => {
			activeMenu.value = index
			menuState.open = true
			switch (index) {
			case '0':
			const menuItemClick = (name) => {
			searchText.value = ''
			if (menuState.open && activeMenu.value == name) {
			menuState.open = false
			} else {
			activeMenu.value = name
			menuState.open = true
			}
			switch (name) {
			case '目录':
			break
			case '1':
			case '笔记':
			getNotesList()
			break
			case '2':
			case '资源':
			getResourceData()
			break
			case '3':
			case '知识图谱':
			break
			case '4':
			case '截图':
			getScreenshotList()
			break
			case '5':
			case '书签':
			getReMarkList()
			break
			}
			}
			@@ -1212,9 +1940,6 @@
			// }
			}

			const selectResourceType = (type) => {
			resourceType.value = type
			}
			const searchText = ref<string>('') //筛选
			const menuState = reactive({
			open: true,
			@@ -1225,19 +1950,19 @@
			fontSizeList: [
			{
			lable: '小',
			key: '14'
			key: 14
			},
			{
			lable: '中',
			key: '16'
			key: 16
			},

			{
			lable: '大',
			key: '18'
			key: 18
			}
			],
			fontSizeActive: '16',
			fontSizeActive: 16,
			acoustics: false,
			animation: false,
			bgColorList: [
			@@ -1260,9 +1985,23 @@
			],
			bgColorActive: '#FBF9F4'
			})

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

			const fontSizeSelect = (item) => {
			settingForm.fontSizeActive = item.key
			document.getElementById('app').style.fontSize = item.key + 'px'
			window.qiankunActions.setGlobalState({
			fontSize: item.key
			})
			}
			const bgColorSelect = (item) => {
			settingForm.bgColorActive = item.key
			@@ -1276,75 +2015,53 @@
			}
			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 () => {
			if (activeMenu.value == 1) {
			getNotesList()
			}
			if (activeMenu.value == 2) {
			let dataList = JSON.parse(JSON.stringify(resourceDataList.value))
			if (searchText.value) {
			resourceDataList.value = []
			searchText.value = searchText.value.replace(/^\s\|\s$/g, '')
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			dataList.forEach((item) => {
			if (item.name.indexOf(text) > -1) {
			let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>'
			let htmlStr = item.name.split(text).join(replaceStr)
			item.name = '<p>' + htmlStr + '</p>'
			resourceDataList.value.push(item)
			}
			})
			}
			switch (activeMenu.value) {
			case '目录':
			if (catalogTree) catalogTree.value.filter(searchText.value)
			break
			case '笔记':
			getNotesList()
			break
			case '资源':
			let dataList = JSON.parse(JSON.stringify(resourceDataList.value))
			if (searchText.value) {
			resourceDataList.value = []
			searchText.value = searchText.value.replace(/^\s\|\s$/g, '')
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			dataList.forEach((item) => {
			if (item.resourceName.indexOf(text) > -1) {
			resourceDataList.value.push(item)
			}
			})
			} else {
			getResourceData()
			}
			break
			case '知识图谱':
			break
			case '截图':
			getScreenshotList()
			break
			case '书签':
			getReMarkList()
			break
			}
			}

			// 右侧工具
			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)
			@@ -1402,89 +2119,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,
			fontSizeActive: '16',
			thicknessActive: '3', //画笔选中粗细
			lineTypeActive: 'solid', //画笔选中线类型
			lineColorActive: '#333' //画笔选中线颜色
			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()
			@@ -1492,46 +2137,57 @@
			const confirmDialog = ref<Boolean>(false)
			const screenshotVisble = ref<Boolean>(false)
			const nameData = ref('') //截图名称
			const screenshotLoading = ref(false)
			const urlData = ref('') //截图base64
			const screenshotList = ref([])
			const screenshotData = ref([])
			const imgPreviewList = ref([])
			const previewIndex = ref(0)
			const showDelete = ref(null)
			const isUpdateImg = ref(false)
			const screenshotId = ref(0)

			//浮窗工具栏点击事件
			const floatItemHandle = (item) => {
			floatingToolData.activeToolData = item.name
			switch (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 '画笔':
			canvasShow.value = true
			toolSelectData.activeTool = 'huabi'
			break
			case '标签':
			case '标记':
			break
			case '书签':
			reMark()
			break
			case '截屏':
			jitT()
			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: '',
			fontSizeActive: '16',
			fontSizeActive: '16', // 文字操作文字大小
			thicknessActive: '3', //画笔选中粗细
			lineTypeActive: 'solid', //画笔选中线类型
			lineColorActive: '#333' //画笔选中线颜色
			lineColorActive: '#333', //画笔选中线颜色
			graphType: '' //图形类型，方形，圆形...
			})
			const toolSelectHandle = (title) => {
			toolSelectData.activeTool = title
			toolSelectData.lineColorActive = ''
			switch (title) {
			case 'huabi':
			init()
			@@ -1578,8 +2234,144 @@
			toolSelectData.fontSizeActive = str
			}

			//标签显示隐藏
			const labelShow = (str) => {}
			//选择图形
			const graphSelect = (type) => {
			toolSelectData.graphType = type
			switch (type) {
			case 'square':
			break
			case 'rotundity':
			break
			case 'triangle':
			break
			case 'lineSegment':
			break
			}
			}
			//标记显示隐藏
			const labelShow = (str) => {
			console.log(str, '标记')
			if (str == 'hide') {
			if (window.qiankunState && window.qiankunState.delSign) {
			window.qiankunState.delSign({ ids: [] })
			}
			}
			}

			//书签
			const currentChapter = ref(1)
			const reMarkList = ref([])
			const reMarkData = ref([])
			const reMarkId = ref([])
			const reMarkCon = ref('')

			const reMark = () => {
			let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value))
			if (catalogueData.value.length > 0) {
			catalogueData.value.forEach((item1) => {
			if (item1.chapter == Number(currentChapter.value) && item1.start == headerData.process) {
			chapterData.label = item1.label
			}
			})
			}

			if (chapterData) {
			reMarkData.value.push({
			id: toolClass.uuid(8),
			createDate: new Date(),
			page: headerData.process,
			chapterNum: currentChapter.value,
			chapterName: chapterData.label,
			content: reMarkCon.value \|\| chapterData.label
			})
			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 = []
			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) {
			reMarkList.value.push(item)
			}
			} else {
			reMarkList.value.push(item)
			}
			})
			}
			})
			}
			// 内容页删除书签
			const delReMark = () => {
			let list = reMarkList.value.filter((itemData) => itemData.id !== reMarResult.value.id)
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'reMark',
			key: bookConfig.value.bookId,
			value: JSON.stringify(list)
			}
			]
			})
			.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()
			})
			}

			//截图
			//截图事件
			@@ -1594,6 +2386,7 @@
			//确认回调
			const callback = (val: any) => {
			screenshotVisble.value = true
			nameData.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
			urlData.value = val.base64
			}
			//取消回调
			@@ -1601,32 +2394,49 @@
			console.log(base64)
			floatingToolData.activeToolData = ''
			}
			//保存截图
			const addScreenshot = () => {
			if (nameData.value) {
			screenshotList.value.push({
			createDate: new Date(),
			imgUrl: urlData.value,
			name: nameData.value
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			if (isUpdateImg.value) {
			screenshotData.value = []
			screenshotList.value.forEach((itemNote) => {
			if ((itemNote.id == screenshotId.value)) {
			itemNote.name = nameData.value
			}
			})
			screenshotData.value = screenshotList.value
			} else {
			screenshotData.value.push({
			id: toolClass.uuid(8),
			createDate: new Date(),
			imgUrl: urlData.value,
			name: nameData.value
			})
			}

			screenshotLoading.value = true
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'screenshot',
			key: bookId.value,
			value: JSON.stringify(screenshotList.value)
			key: bookConfig.value.bookId,
			value: JSON.stringify(screenshotData.value)
			}
			]
			}
			}).then((res) => {
			getScreenshotList()
			nameData.value = ''
			urlData.value = ''
			floatingToolData.activeToolData = ''
			screenshotVisble.value = false
			})
			})
			.then((res) => {
			screenshotLoading.value = false
			getScreenshotList()
			nameData.value = ''
			urlData.value = ''
			floatingToolData.activeToolData = ''
			screenshotVisble.value = false
			isUpdateImg.value = false
			})
			.catch(function (error) {
			screenshotLoading.value = false
			})
			} else {
			ElMessage.error('截图名称不能为空!')
			}
			@@ -1636,26 +2446,83 @@
			}

			const getScreenshotList = () => {
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			screenshotData.value = []
			screenshotList.value = []
			imgPreviewList.value = []
			MG.identity
			.getUserKey({
			domain: 'screenshot',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			screenshotList.value = JSON.parse(res[0].value)
			}
			})
			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) {
			screenshotList.value.push(item)
			imgPreviewList.value.push(item.imgUrl)
			}
			} else {
			screenshotList.value.push(item)
			imgPreviewList.value.push(item.imgUrl)
			}
			})
			}
			})
			}
			const getCapture = (item) => {
			//查看截图
			const getCapture = (item, index) => {
			imgUrl.value = item.imgUrl
			previewIndex.value = index
			confirmDialog.value = true
			}
			const closePreview = () => {
			imgPreviewList.value = []
			confirmDialog.value = false
			}
			// 编辑截图名称
			const updateScreenshot = (item) => {
			nameData.value = item.name
			screenshotId.value = item.id
			isUpdateImg.value = true
			screenshotVisble.value = true
			}

			//删除截图
			const deleteScreenshot = (item) => {
			let list = screenshotList.value.filter((itemData) => itemData.id !== item.id)
			ElMessageBox.confirm('确定要删除此截图吗？', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			autofocus: false,
			type: 'warning'
			})
			.then(() => {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'screenshot',
			key: bookConfig.value.bookId,
			value: JSON.stringify(list)
			}
			]
			})
			.then((res) => {
			ElMessage({
			message: '删除截图成功!',
			type: 'success'
			})
			getScreenshotList()
			})
			})
			.catch(() => {})
			}

			//选中文字工具栏
			const selectText = ref('') //选中文字
			const showToolBox = ref(false)
			const dialogToolData = reactive({
			left: 500,
			@@ -1671,6 +2538,7 @@
			///内容选中
			const getSelection = (data) => {
			if (data.txt) {
			toolActive.value = ''
			dialogToolData.txt = data.txt
			dialogToolData.page = data.page
			dialogToolData.chapter = data.chapterNum
			@@ -1680,34 +2548,10 @@
			}
			}

			const pageScroll = (e) => {
			// window.qiankunActions.setGlobalState({
			// gotoPage: (t, s) => {
			// // 绑定子应用选择监听事件
			// console.log(t, s, '子应用滚动')
			// }
			// })
			showToolBox.value = false
			lineDelete.showLineDelete = false
			// let scroll = e.target.scrollTop
			// let offsetHeight = document.getElementById('container').offsetHeight
			// headerData.process = Math.round((scroll / offsetHeight) * 100)
			}

			const toolActive = ref('')
			const colorActive = 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: cidian1, name: '百科' }
			// { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
			// { icon: cidian2, activeIcon: cidian1, name: '翻译' }
			])
			const noteColorActive = ref('')

			const colorSelectList = reactive([
			{
			label: '黄色',
			@@ -1733,7 +2577,9 @@

			//笔记弹窗
			const addNoteVisble = ref(false)
			const isUpdate = ref(false)
			const formData = reactive({
			id: '',
			desc: ''
			})
			//笔记弹窗关闭
			@@ -1745,83 +2591,33 @@

			//笔记，高亮，划线
			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 = ''
			switch (item.name) {
			case 'AI阅读':
			const utterance = new SpeechSynthesisUtterance(selectText.value)
			window.speechSynthesis.cancel()
			const synth = window.speechSynthesis
			const utterance = new SpeechSynthesisUtterance(dialogToolData.txt)
			console.log(utterance, 1)
			utterance.lang = 'zh-CN' // 设置语言为中文
			synth.speak(utterance)
			showToolBox.value = false
			break
			case '划线':
			break
			@@ -1829,6 +2625,7 @@
			break
			case '笔记':
			formData.desc = ''
			noteColorActive.value = '#F5E12A'
			addNoteVisble.value = true
			showToolBox.value = false
			break
			@@ -1837,7 +2634,7 @@
			case '复制':
			try {
			//复制
			await toClipboard(selectText.value)
			await toClipboard(dialogToolData.txt)
			//下面可以设置复制成功的提示框等操作
			ElMessage({
			message: '复制成功',
			@@ -1850,9 +2647,14 @@
			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)
			baiduVisible.value = true
			break
			}
			@@ -1862,38 +2664,68 @@
			colorActive.value = item.key
			addUserKey()
			}
			//笔记选颜色
			const clickSelectColor = (item) => {
			noteColorActive.value = item.key
			}

			const addUserKey = () => {
			let dom = ''
			let data = null
			switch (toolActive.value) {
			case '高亮':
			dom = 'highLightData-' + bookId.value
			dom = 'highLightData-' + bookConfig.value.bookId
			data = dialogToolData.lineHeight[dialogToolData.chapter]
			if (!data) data = []
			data.push({
			id: toolClass.uuid(8),
			txt: dialogToolData.txt,
			page: dialogToolData.page,
			chapterNum: dialogToolData.chapter,
			type: 'Highlight',
			color: colorActive.value
			})
			break
			case '划线':
			dom = 'underline-' + bookId.value
			dom = 'underline-' + bookConfig.value.bookId
			data = dialogToolData.scribeList[dialogToolData.chapter]
			if (!data) data = []
			data.push({
			id: toolClass.uuid(8),
			txt: dialogToolData.txt,
			page: dialogToolData.page,
			chapterNum: dialogToolData.chapter,
			type: 'Dashing',
			color: colorActive.value
			})
			break
			case '笔记':
			if (!formData.desc.replace(/^\s\|\s$/g, '')) {
			ElMessage.error('笔记内容不能为空!')
			return
			}
			if (!noteColorActive.value) {
			ElMessage.error('请选择笔记颜色!')
			return
			}
			dom = 'notes-' + bookConfig.value.bookId
			data = dialogToolData.notesList[dialogToolData.chapter]
			if (!data) data = []
			data.push({
			id: toolClass.uuid(8),
			txt: dialogToolData.txt,
			page: dialogToolData.page,
			chapterNum: dialogToolData.chapter,
			type: 'Note',
			color: noteColorActive.value,
			createDate: new Date(),
			note: formData.desc.replace(/^\s\|\s$/g, '')
			})

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

			const delUserKey = (type, ids) => {
			switch (type) {
			case 'Highlight':
			dom = 'highLightData-' + bookId.value
			data = dialogToolData.lineHeight
			break
			case 'Dashing':
			dom = 'underline-' + bookId.value
			data = dialogToolData.scribeList
			break
			}
			data = data.filter((item) => ids.indexOf(item.id) == -1)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: dom,
			key: '',
			value: JSON.stringify(data)
			}
			]
			}
			}).then((res) => {})
			}
			const lock = ref(false)

			const getSignData = () => {
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'highLightData-' + bookId.value,
			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)
			}
			}
			}
			})
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'underline-' + bookId.value,
			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
			// 渲染
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			})
			}

			const addNote = () => {
			const obj = {
			desc: formData.desc
			}
			if (!colorActive.value) {
			ElMessage.error('请选择笔记颜色!')
			return
			}
			if (!lock.value) {
			lock.value = true
			if (formData.desc.replace(/^\s\|\s$/g, '')) {
			dialogToolData.notesList.push({
			selectNode: selectNode.value,
			selectText: selectText.value,
			color: colorActive.value,
			selectPage: selectPage.value,
			chapter: dialogToolData.chapter,
			createDate: new Date(),
			note: formData.desc.replace(/^\s\|\s$/g, '')
			})
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'notes',
			key: bookId.value,
			value: JSON.stringify(dialogToolData.notesList)
			}
			]
			}
			}).then((res) => {
			showToolBox.value = false
			addNoteVisble.value = false
			colorActive.value = ''
			toolActive.value = ''
			getNotesList()
			setTimeout(() => {
			lock.value = false
			}, 1000)
			})
			} else {
			ElMessage.error('笔记内容不能为空!')
			lock.value = false
			}
			}
			}
			//笔记
			const getNotesList = () => {
			scribeData.noteList = []
			scribeData.loading = true
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'notes',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.notesList = JSON.parse(res[0].value)
			let list = JSON.parse(res[0].value)
			let textDom1 = document.querySelector('.temp-book')
			if (list.length > 0) {
			list.forEach((item, index) => {
			item.createDate = moment(item.createDate).format('YYYY-MM-DD')
			if (searchText.value) {
			searchText.value = searchText.value.replace(/^\s\|\s$/g, '')
			let text = searchText.value.replace(/^\s\|\s$/g, '')
			if (item.text.indexOf(text) > -1) {
			if (menuState.notesColor == 'all') {
			scribeData.noteList.push(item)
			} else if (menuState.notesColor == item.color) {
			scribeData.noteList.push(item)
			}
			}
			} else {
			if (menuState.notesColor == 'all') {
			scribeData.noteList.push(item)
			} else if (menuState.notesColor == item.color) {
			scribeData.noteList.push(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
			// 渲染
			if (data.length > 0) {
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			//页面添加笔记
			let rReg1 = new RegExp(`${item.selectText}`, 'ig')
			let text1 = textDom1.innerHTML
			let nHtmlText1 = item.selectNode

			let nHtml1 = ''
			nHtml1 = nHtmlText1.replace(
			rReg1,
			`<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="notesline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
			)
			let rHtml1 = ''
			rHtml1 = text1.replace(nHtmlText1, nHtml1)
			textDom1.innerHTML = rHtml1
			})
			}
			}
			scribeData.loading = false
			})
			}
			//划线
			const getScribeList = () => {
			scribeData.scribeDataList = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'underline',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.scribeList = JSON.parse(res[0].value)
			scribeData.scribeDataList = JSON.parse(res[0].value)
			let textDom1 = document.querySelector('.temp-book')
			if (scribeData.scribeDataList.length > 0) {
			for (let i = 0; i < scribeData.scribeDataList.length; i++) {
			let item = scribeData.scribeDataList[i]
			let rReg1 = new RegExp(`${item.selectText}`, 'ig')
			let text1 = textDom1.innerHTML
			let nHtmlText1 = item.selectNode

			let nHtml1 = ''
			nHtml1 = nHtmlText1.replace(
			rReg1,
			`<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer" class="underline" onclick="deleteScribeShow('${item.selectText}')">${item.selectText}</span>`
			)
			let rHtml1 = ''
			rHtml1 = text1.replace(nHtmlText1, nHtml1)
			textDom1.innerHTML = rHtml1
			}
			}
			}
			})
			}
			//高亮
			const getlineHeightList = () => {
			scribeData.lineHeightList = []
			request({
			url: '/identity/api/ApiGetAppUserKey',
			method: 'post',
			data: {
			domain: 'highLight',
			keys: [bookId.value]
			}
			}).then((res) => {
			if (res && res.length > 0 && res[0].value) {
			dialogToolData.lineHeight = JSON.parse(res[0].value)
			scribeData.lineHeightList = JSON.parse(res[0].value)
			let textDom = document.querySelector('.temp-book')
			if (scribeData.lineHeightList.length > 0) {
			for (let i = 0; i < scribeData.lineHeightList.length; i++) {
			let item = scribeData.lineHeightList[i]
			let rReg = new RegExp(`${item.selectText}`, 'ig')
			let text = textDom.innerHTML
			let nHtmlText = item.selectNode
			let nHtml = ''
			nHtml = nHtmlText.replace(
			rReg,
			`<span style="background: ${item.color};padding:3px;cursor: pointer" class="highLight" onclick="deletelineHeightShow('${item.selectText}')">${item.selectText}</span>`
			)
			// nHtmlText = nHtml
			let rHtml = ''
			rHtml = text.replace(nHtmlText, nHtml)
			textDom.innerHTML = rHtml
			})
			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

			// 渲染
			if (data.length > 0) {
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			}
			}
			})
			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
			// 渲染
			if (data.length > 0) {
			for (let j = 0; j < data.length; j++) {
			const citem = data[j]
			if (window.qiankunState && window.qiankunState.renderSign)
			window.qiankunState.renderSign(citem.type, citem)
			}
			}
			}
			}
			})
			}

			//菜单笔记列表
			const getNotesList = () => {
			let chapterList = []
			catalogueData.value.forEach((item) => {
			chapterList.push(item.chapter + '')
			})
			let uniqueArray = [...new Set(chapterList)]
			scribeData.noteList = []
			MG.identity
			.getUserKey({
			domain: 'notes-' + bookConfig.value.bookId,
			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)
			}
			}
			})
			}
			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
			})
			}
			}
			console.log(scribeData.noteList, 'scribeData.noteList')
			}
			})
			}

			//正文中删除高亮，划线，笔记操作框
			@@ -2167,175 +2890,214 @@
			top: 0,
			left: 0,
			deleteType: '',
			deleteTxt: ''
			id: ''
			})

			// 划线、笔记、高亮点击回调
			window.signClick = (type, id)=>{
			console.log("signClick点击事件回调的实例", type, id);
			}

			window.notesVisbleShow = function (txt) {
			addNoteVisble.value = true
			let notes = dialogToolData.notesList.find((item) => item.selectText == txt)
			formData.desc = notes.note
			colorActive.value = notes.color
			selectNode.value = notes.selectNode
			selectText.value = notes.selectText
			selectPage.value = notes.selectPage
			dialogToolData.chapter = notes.chapter
			}

			window.deleteScribeShow = function (txt) {
			let lines = scribeData.scribeDataList.find((item) => item.selectText == txt)
			lineDelete.deleteType = 'underline'
			lineDelete.deleteTxt = txt
			lineDelete.top = event.screenY
			lineDelete.left = event.screenX
			window.signClick = (type, id, chapterNum) => {
			console.log('signClick点击事件回调的实例', type, id, chapterNum)
			dialogToolData.chapter = chapterNum
			lineDelete.deleteType = type
			lineDelete.id = id
			lineDelete.showLineDelete = true
			}

			window.deletelineHeightShow = function (txt) {
			let lines = scribeData.lineHeightList.find((item) => item.selectText == txt)
			lineDelete.deleteType = 'highLight'
			lineDelete.deleteTxt = txt
			lineDelete.top = event.screenY
			lineDelete.left = event.screenX
			lineDelete.showLineDelete = true
			}

			const lineDeleteBtn = () => {
			if (lineDelete.deleteType == 'underline') {
			let list = scribeData.scribeDataList.filter((item) => item.selectText != lineDelete.deleteTxt)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'underline',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			lineDelete.showLineDelete = false
			let list = document.querySelectorAll('.underline')
			list.forEach((itemNode) => {
			if (itemNode.innerText == lineDelete.deleteTxt) {
			itemNode.removeAttribute('style')
			itemNode.className = ''
			itemNode.removeAttribute('onclick')
			}
			})
			getScribeList()
			})
			} else if (lineDelete.deleteType == 'highLight') {
			let list = scribeData.lineHeightList.filter((item) => item.selectText != lineDelete.deleteTxt)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'highLight',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			lineDelete.showLineDelete = false
			let list = document.querySelectorAll('.highLight')
			list.forEach((itemNode) => {
			if (itemNode.innerText == lineDelete.deleteTxt) {
			itemNode.removeAttribute('style')
			itemNode.className = ''
			itemNode.removeAttribute('onclick')
			}
			})
			getlineHeightList()
			})
			if (type == 'Note') {
			noteContent.show = false
			let list = dialogToolData.notesList[chapterNum]
			let data = list.find((item) => item.id == id)
			formData.id = id
			formData.desc = data.note
			noteColorActive.value = data.color
			// addNoteVisble.value = true
			isUpdate.value = true
			}
			}

			const jumpContent = (id) => {
			if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(5, 100)
			}

			const update = (item, type) => {
			dialogToolData.notesList.splice(
			dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText),
			1
			)
			selectNode.value = item.selectNode
			selectText.value = item.selectText
			selectPage.value = item.selectPage
			colorActive.value = item.color
			dialogToolData.chapter = item.chapter
			formData.desc = item.note
			const updateNote = () => {
			addNoteVisble.value = true
			lineDelete.showLineDelete = false
			}

			//删除
			const deleteBtn = (item, type) => {
			if (type == 'note') {
			// 移除
			let list = scribeData.noteList.filter((itemData) => itemData.selectText !== item.selectText)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			setKeyRequests: [
			{
			domain: 'notes',
			key: bookId.value,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除笔记成功!',
			type: 'success'
			})
			console.log(document.querySelectorAll('.notesline'))
			let list = document.querySelectorAll('.notesline')
			list.forEach((itemNode) => {
			if (itemNode.innerText == item.selectText) {
			console.log(itemNode.nextSibling)
			itemNode.removeAttribute('style')
			itemNode.nextSibling?.remove()
			}
			})
			getNotesList()
			})
			// 笔记鼠标移入
			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
			noteContent.show = true
			document.addEventListener('mousemove', function (event) {
			var x = event.offsetX
			var y = event.offsetY
			// console.log('鼠标坐标位置：', x, y)
			noteContent.top = event.clientY + 20
			noteContent.left = event.clientX
			})
			}
			window.noteOut = (type) => {
			console.log(type, 123)
			noteContent.show = false
			}

			const delUserKey = () => {
			let type = lineDelete.deleteType
			let ids = lineDelete.id
			let dom = ''
			let data = null
			switch (type) {
			case 'Highlight':
			dom = 'highLightData-' + bookConfig.value.bookId
			data = dialogToolData.lineHeight
			break
			case 'Dashing':
			dom = 'underline-' + bookConfig.value.bookId
			data = dialogToolData.scribeList
			break
			case 'Note':
			dom = 'notes-' + bookConfig.value.bookId
			data = dialogToolData.notesList
			break
			}
			}

			//删除截图
			const deleteScreenshot = (item) => {
			let list = screenshotList.value.filter((itemData) => itemData.imgUrl !== item.imgUrl)
			request({
			url: '/identity/api/ApiAppUserSetKey',
			method: 'post',
			data: {
			let list = data[dialogToolData.chapter].filter((item) => item.id != ids)
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'screenshot',
			key: bookId.value,
			domain: dom,
			key: dialogToolData.chapter,
			value: JSON.stringify(list)
			}
			]
			}
			}).then((res) => {
			ElMessage({
			message: '删除截图成功!',
			type: 'success'
			})
			getScreenshotList()
			.then((res) => {
			lineDelete.showLineDelete = false
			if (window.qiankunState && window.qiankunState.delSign) {
			window.qiankunState.delSign({ ids: [ids] })
			}
			getSignData()
			if (type == 'Note') {
			getNotesList()
			}
			})
			}

			//笔记跳转
			const jumpContent = (item) => {
			console.log(item)
			if (window.qiankunState && window.qiankunState.gotoPage) {
			window.qiankunState.gotoPage(Number(item.chapterNum), Number(item.page))
			}
			}

			//菜单笔记编辑
			const update = (item) => {
			console.log(item)
			dialogToolData.chapter = item.chapterNum
			noteColorActive.value = item.color
			formData.id = item.id
			formData.desc = item.note
			addNoteVisble.value = true
			isUpdate.value = true
			}
			const updateUserKey = () => {
			let data = scribeData.noteList.find((item1) => item1.chapter == dialogToolData.chapter)
			data.noteList.forEach((itemNote) => {
			if ((itemNote.id = formData.id)) {
			itemNote.note = formData.desc
			itemNote.color = noteColorActive.value
			}
			})
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'notes-' + bookConfig.value.bookId,
			key: dialogToolData.chapter,
			value: JSON.stringify(data.noteList)
			}
			]
			})
			.then((res) => {
			addNoteVisble.value = false
			isUpdate.value = false
			getNotesList()
			getSignData()
			})
			}

			//菜单删除笔记
			const deleteBtn = (item) => {
			let data = scribeData.noteList.find((item1) => item1.chapter == Number(item.chapterNum))
			// 移除
			let list = data.noteList.filter((itemData) => itemData.id !== item.id)
			ElMessageBox.confirm('确定要删除此笔记吗？', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			autofocus: false,
			type: 'warning'
			})
			.then(() => {
			MG.identity
			.setUserKey({
			setKeyRequests: [
			{
			domain: 'notes-' + bookConfig.value.bookId,
			key: item.chapterNum,
			value: JSON.stringify(list)
			}
			]
			})
			.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 soundWord = (word, en) => {
			window.speechSynthesis.cancel()
			const synth = window.speechSynthesis
			const utterances = new SpeechSynthesisUtterance(word)
			// utterances.lang = en // 设置语言为中文
			synth.speak(utterances)
			}
			//内容区域顶部显示

			@@ -2345,6 +3107,7 @@
			minutes: 0,
			hours: 0,
			process: 0,
			totlePage: 0,
			pageSize: 100
			})
			//上课时长计时器
			@@ -2376,16 +3139,21 @@
			}

			const changePageSize = (str) => {
			if (str == 'add') {
			headerData.pageSize = Number(headerData.pageSize) + 5
			} else {
			headerData.pageSize = Number(headerData.pageSize) - 5
			if (str == 'add' && headerData.pageSize < 150) {
			headerData.pageSize = Number(headerData.pageSize) + 10
			window.qiankunActions.setGlobalState({
			scale: headerData.pageSize
			})
			} else if (str == 'reduce' && headerData.pageSize > 50) {
			headerData.pageSize = Number(headerData.pageSize) - 10
			window.qiankunActions.setGlobalState({
			scale: headerData.pageSize
			})
			}
			}

			const layoutBtn = () => {
			localStorage.clear()
			console.log(888)
			router.push('/login')
			}
			</script>
			@@ -2417,6 +3185,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;
			@@ -2432,6 +3207,7 @@
			overflow: hidden;
			flex: 1;
			display: flex;
			position: relative;
			.menuBox {
			width: 80px;
			flex-shrink: 0;
			@@ -2461,10 +3237,11 @@
			display: inline-block;
			width: 32px;
			height: 32px;
			.name {
			text-align: center;
			line-height: 1;
			}
			}
			.name {
			text-align: center;
			line-height: 1;
			color: #2c3e50;
			}
			}
			.reload {
			@@ -2493,9 +3270,10 @@
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #efefef;
			}
			.resourceBox {
			padding: 15px 0;
			padding: 10px 0;
			margin: 0 20px;
			border-bottom: 1px solid rgba(204, 204, 204, 0.32);
			.classification {
			@@ -2512,10 +3290,13 @@
			}
			.count {
			width: 35px;
			margin: 5px auto;
			margin: 0 auto;
			margin-top: 5px;
			border-radius: 10px;
			background: #fff;
			color: #c8c8c8;
			height: 18px;
			font-size: 12px;
			}
			.activeClassify,
			.classifyItem:hover {
			@@ -2542,6 +3323,7 @@
			}
			.inputBox {
			margin-top: 10px;
			width: 100% !important;
			}
			}
			.resourceTab {
			@@ -2575,11 +3357,13 @@
			}
			}
			.inputBox {
			width: 85%;
			.custom-input {
			border: 1px solid #0093ff !important;
			border-radius: 50px;
			overflow: hidden;
			background: #fff;
			height: 34px;
			}
			.is-focus,
			.el-input__wrapper {
			@@ -2654,6 +3438,7 @@
			.resourceItem {
			padding: 10px 0;
			align-items: center;

			.resourceImg {
			// width: 130px;
			height: 80px;
			@@ -2663,23 +3448,38 @@
			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;
			}
			}
			}
			}

			.rName {
			margin-top: 10px;
			height: 20px;
			line-height: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
			}
			}
			}
			@@ -2700,13 +3500,24 @@
			}
			.deleteBox {
			position: absolute;
			top: 2px;
			right: 2px;
			width: 20px;
			height: 20px;
			background: rgba(44, 44, 44, 0.3);
			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;
			}
			}
			}
			// .capture {
			// width: 100%;
			@@ -2714,9 +3525,8 @@
			.captureName {
			height: 20px;
			line-height: 20px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			width: 120px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #000;
			@@ -2785,20 +3595,54 @@
			}
			}
			}
			.chapterName {
			margin: 15px;
			display: flex;
			align-items: center;
			span {
			margin-left: 5px;
			}
			}
			.reMarkItem {
			margin: 15px;
			background: #fff;
			border-radius: 10px;
			padding: 10px;
			display: flex;
			justify-content: space-between;
			.reMarkCon {
			// width: 240px;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// margin-right: 8px;
			display: flex;
			.con {
			width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 8px;
			}
			}
			.deleteReMarkImg {
			display: flex;
			align-items: center;
			}
			}
			}
			}
			.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: 370px;
			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;
			width: 18px;
			@@ -2808,11 +3652,13 @@
			.pageBox {
			flex: 1;
			font-size: 16px;
			position: relative;
			.pageBox-header {
			height: 57px;
			padding: 0 20px;
			background: #fff;
			display: flex;
			z-index: 99;
			align-items: center;
			justify-content: space-between;
			.classTime {
			@@ -2833,8 +3679,9 @@
			.progress {
			text-align: center;
			.bookName {
			font-weight: bold;
			margin-bottom: 3px;
			font-weight: 800;
			margin-bottom: 5px;
			color: #333;
			}
			}
			.rightBox {
			@@ -2843,14 +3690,19 @@
			display: flex;
			align-items: center;
			padding: 0 20px;
			border-right: 1px solid #d8d8d8;

			div {
			padding: 5px;
			img {
			width: 18px;
			height: 18px;
			}
			}
			}
			.brushImgBox {
			display: flex;
			align-items: center;
			border-left: 1px solid #d8d8d8;
			div {
			padding: 5px;
			display: flex;
			@@ -2867,6 +3719,7 @@
			.pageBox-content {
			height: calc(100% - 57px);
			background: #fbf9f4;
			padding: 10px 0;
			.content-box {
			height: 100%;
			position: relative;
			@@ -2909,7 +3762,7 @@
			}
			.menu {
			padding-top: 20px;
			li {
			li > div {
			// height: 50px;
			padding: 10px 36px;
			font-size: 16px;
			@@ -2923,6 +3776,7 @@
			}

			span {
			width: 80px;
			margin-left: 10px;
			}
			}
			@@ -2932,20 +3786,21 @@
			height: 25px;
			background: #fff;
			border-radius: 3px 0px 0px 3px;
			border: 1px solid #bce3ff;
			position: absolute;
			line-height: 22px;
			top: 50%;
			right: 50px;
			text-align: center;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
			right: 67px;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;

			img {
			height: 10px;
			width: 18px;
			}
			}
			.right {
			right: 184px !important;
			right: 198px !important;
			border-radius: 0px 3px 3px 0px !important;
			}
			.classRoomBox {
			@@ -3009,25 +3864,45 @@
			}

			.draggableBox {
			width: 85px;
			background-image: linear-gradient(to bottom, #0093ff, #005dff);
			position: fixed;
			height: 310px;
			top: 300px;
			left: 450px;
			z-index: 99;
			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;
			img {
			margin-right: 8px;
			cursor: pointer;
			.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;
			@@ -3035,41 +3910,49 @@
			}
			.floatToolItem:hover,
			.floatToolActive {
			background-color: #fff;
			color: #0093ff;
			background-color: rgba(255, 255, 255, 0.3);
			}
			}

			.brushBox {
			position: fixed;
			left: 500px;
			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: 10px;
			width: 48px;
			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: 22px;
			width: 22px;
			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;
			}
			}
			@@ -3079,38 +3962,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;
			// }
			}
			}
			}
			@@ -3141,10 +4020,77 @@
			.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 {
			max-width: 240px;
			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;
			.word {
			font-weight: bold;
			}
			.phone_con {
			.per-phone {
			min-width: 150px;
			align-items: center;
			// justify-content: space-between;
			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;
			flex: 1;
			}
			}
			.soundBtn {
			width: 16px;
			height: 14px;
			}
			}
			.trans {
			padding: 20px 0;
			.itemList {
			display: flex;
			padding: 10px 0;
			.index {
			margin-right: 15px;
			}
			.pos {
			margin-right: 30px;
			}
			}
			}
			}
			.wendabox {
			width: 100%;
			@@ -3157,7 +4103,9 @@

			.myDialogs,
			.myNoteDialogs,
			.resourDialog {
			.resourDialog,
			.baiduDialog,
			.myAnserDialogs {
			padding: 0 !important;
			border-radius: 10px !important;
			overflow: hidden;
			@@ -3186,7 +4134,7 @@
			box-sizing: border-box;
			}
			}
			.myDialogs {
			.myAnserDialogs {
			width: 628px;
			}
			.myNoteDialogs {
			@@ -3194,6 +4142,10 @@
			}
			.screenshotDialog {
			width: 400px !important;
			}
			.baiduDialog {
			width: 90vw;
			height: 90vh;
			}
			.noteColorSelectBox {
			margin-top: 10px;
			@@ -3213,9 +4165,16 @@
			}
			}
			}
			.videoBox video {
			width: 100%;
			.videoBox {
			text-align: center;
			video {
			width: 100%;
			}
			audio {
			width: 100%;
			}
			}

			.wordBox {
			height: 600px;
			}