From 480728c3c1b96d94a2053c1e418c173006d4ff68 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期二, 21 五月 2024 10:40:08 +0800 Subject: [PATCH] json --- src/views/home.vue | 2353 +++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 1,566 insertions(+), 787 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 61293b0..b4ac3ad 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -13,17 +13,17 @@ <!-- 鑿滃崟 --> <div class="menuBox"> <div - :class="['menuItem', activeMenu == index ? 'active' : '']" + :class="['menuItem', activeMenu == item.name ? 'active' : '']" v-for="(item, index) in menuData" :key="index" - @click="menuItemClick(index)" + @click="menuItemClick(item.name)" > <div class="menuIcon imgBox"> <img :src="item.icon" /> </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 +49,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 +91,15 @@ <!-- 鑿滃崟鍐呭 --> <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 class="hover"><Search /></el-icon> </template> </el-input> </div> @@ -111,17 +116,30 @@ </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" :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-if="catalogueData.length == 0"> + <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')"> @@ -139,52 +157,60 @@ ></div> </div> </div> - <div class="list-box" v-loading="scribeData.loading"> - <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 class="list-box"> + <div v-if="scribeData.noteList.length > 0"> + <div v-for="(noteItem, index) in scribeData.noteList" :key="noteItem"> + <div class="chapterName">{{ noteItem.chapterName }}</div> + <div v-for="(item, index) in noteItem.noteList" :key="item.key" class="listItem"> + <div class="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" - @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">{{ 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" @@ -208,9 +234,14 @@ </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> </el-input> </div> @@ -221,10 +252,18 @@ <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> <div class="resourceItem hover" @click="goResourceDetail(item)"> <div class="resourceImg"> - <img :src="video" mode="" /> + <img :src="item.icon" mode="" v-if="item.icon" /> + <el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon> + <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> + <el-icon v-else-if="activeClassify == 'video'" size="30" + ><VideoCamera + /></el-icon> + <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> - <div class="rName" v-if="searchText !=''" v-html="item.name"></div> - <div class="rName" v-else>{{ item.name }}</div> + <div class="rName" :title="item.resourceName">{{ item.resourceName }}</div> </div> </el-col> </el-row> @@ -235,7 +274,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="鏆傛棤鏁版嵁" /> @@ -243,19 +282,23 @@ </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" - @click="getCapture(item)" - > - <div class="imgBox"> - <img :src="item.imgUrl" class="capture" mode="aspectFill" /> + <div v-for="(item, index) in screenshotList" :key="item" class="captureItem"> + <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">{{ item.name }}</div> + <div class="captureName" :title="item.name">{{ item.name }}</div> </div> </div> <div v-else> @@ -264,9 +307,17 @@ </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">{{ item.chapterName }} 绗瑊{ item.page }}椤�</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> @@ -280,13 +331,16 @@ <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">瀛﹀墠鍎跨鍗敓涓庝繚鍋ワ紙绗笁鐗堬級</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"> @@ -294,19 +348,21 @@ <div>{{ headerData.pageSize }}%</div> <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> </div> - <div class="brushImgBox"> - <div><img :src="huabi2" class="brushImg" />鐢荤瑪</div> - </div> + <!-- <div class="brushImgBox"> + <div @click="jumpContent('note' + index)"> + <img :src="huabi2" class="brushImg" />鐢荤瑪 + </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" - @mouseup="handleMouseUp" + :style="{ background: settingForm.bgColorActive }" ></div> <!-- 鐢荤瑪鐢诲竷 --> <div class="canvas-box" v-show="canvasShow"> @@ -318,7 +374,7 @@ <!-- 鏁欏缁勪欢 --> <div class="toolBox"> <div class="toolTitle"> - <span>{{ toolState.open ? '鏁欏缁勪欢' : '缁勪欢' }}</span> + <span>{{ toolState.open ? '瀛︿範缁勪欢' : '缁勪欢' }}</span> <div class="text"></div> </div> <div class="menuList"> @@ -339,7 +395,7 @@ <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" /> <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" /> </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"> @@ -390,127 +446,12 @@ > <el-popover placement="right" - :width=" - floatingToolData.activeToolData == '鏍囨敞' - ? 120 - : floatingToolData.activeToolData == '娓呴櫎' - ? 200 - : 250 - " + width="120" trigger="click" - v-if=" - floatingToolData.activeToolData == '鐢荤瑪' || - floatingToolData.activeToolData == '娓呴櫎' || - floatingToolData.activeToolData == '鏂囧瓧' || - floatingToolData.activeToolData == '鏍囨敞' - " + v-if="floatingToolData.activeToolData == '鏍囪'" > <div class="popinnerBox"> - <div class="brush" v-if="floatingToolData.activeToolData == '鐢荤瑪'"> - <div class="thickness"> - <div - :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'" - @click="selectThickness('1')" - ></div> - <div - :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'" - @click="selectThickness('3')" - ></div> - <div - :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'" - @click="selectThickness('5')" - ></div> - </div> - <div class="lineStyle"> - <div class="lineTypeBox"> - <div - :class=" - floatingToolData.lineTypeActive == 'solid' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectLineType('solid')" - > - <div class="solid"></div> - <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'"> - <img :src="xuanzhong" /> - </div> - </div> - <div - :class=" - floatingToolData.lineTypeActive == 'dashed' - ? 'typeItem lineTypeActive' - : 'typeItem' - " - @click="selectLineType('dashed')" - > - <div class="dashed"></div> - <div class="activeIcon" v-if="floatingToolData.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 == floatingToolData.lineColorActive" /> - </div> - </div> - </div> - </div> - </div> - <div class="cleanup" v-if="floatingToolData.activeToolData == '娓呴櫎'"> - <div class="cleanupItem hover" @click="cleanUpSelect('prev')"> - <img :src="clearPrevious" /> - <div>娓呴櫎涓婁竴姝�</div> - </div> - <div class="cleanupItem hover" @click="cleanUpSelect('all')"> - <img :src="clear" /> - <div>娓呴櫎鍏ㄩ儴</div> - </div> - </div> - <div class="write" v-if="floatingToolData.activeToolData == '鏂囧瓧'"> - <div class="characters"> - <div - :class="floatingToolData.fontSizeActive == '14' ? 'small active' : 'small'" - @click="selectfontSize('14')" - > - 灏� - </div> - <div - :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'" - @click="selectfontSize('16')" - > - 涓� - </div> - <div - :class="floatingToolData.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 == floatingToolData.lineColorActive" /> - </div> - </div> - </div> - </div> - </div> - <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'"> + <div class="label" v-if="floatingToolData.activeToolData == '鏍囪'"> <div class="labelItem hover" @click="labelShow('hide')"> <img :src="hide" /> <div>闅愯棌</div> @@ -522,15 +463,247 @@ </div> </div> <template #reference> - <div class="floatToolItem"> - <img :src="item.icon" alt="" /> + <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="floatToolItem" v-else @click="floatItemHandle(item)"> - <img :src="item.icon" alt="" /> + <div + :class=" + floatingToolData.activeToolData == item.name + ? 'floatToolActive floatToolItem' + : 'floatToolItem' + " + v-else + > + <img + :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" + alt="" + /> <div class="text">{{ item.name }}</div> + </div> + </div> + </div> + <div + class="brushBox" + :style="{ left: brushBoxLeft + 'px' }" + v-if="floatingToolData.activeToolData == '鐢荤瑪'" + > + <div class="toolList"> + <el-popover placement="top" width="250" trigger="click"> + <div class="popinnerBox"> + <div class="brush"> + <div class="thickness"> + <div + :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" + @click="selectThickness('1')" + ></div> + <div + :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" + @click="selectThickness('3')" + ></div> + <div + :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" + @click="selectThickness('5')" + ></div> + </div> + <div class="lineStyle"> + <div class="lineTypeBox"> + <div + :class=" + toolSelectData.lineTypeActive == 'solid' + ? 'typeItem lineTypeActive' + : 'typeItem' + " + @click="selectLineType('solid')" + > + <div class="solid"></div> + <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'"> + <img :src="xuanzhong" /> + </div> + </div> + <div + :class=" + toolSelectData.lineTypeActive == 'dashed' + ? 'typeItem lineTypeActive' + : 'typeItem' + " + @click="selectLineType('dashed')" + > + <div class="dashed"></div> + <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'"> + <img :src="xuanzhong" /> + </div> + </div> + </div> + <div class="colorSelectBox"> + <div + v-for="item in colorSelectList" + :key="item.key" + class="flex1 hover" + @click="lineColorSelect(item)" + > + <div :style="{ background: item.key }" class="scribeItem"> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> + </div> + </div> + </div> + </div> + </div> + </div> + <template #reference> + <div class="floatToolItem hover" @click="toolSelectHandle('huabi')"> + <div class="imgBox"> + <img :src="huabi2" alt="" /> + </div> + <div class="text">鐢荤瑪</div> + </div> + </template> + </el-popover> + <el-popover placement="top" width="250" trigger="click"> + <div class="popinnerBox"> + <div class="lineStyle"> + <div class="lineTypeBox"> + <div + :class=" + toolSelectData.fontSizeActive == '14' ? 'typeItem lineTypeActive' : 'typeItem' + " + @click="selectfontSize('14')" + > + 灏� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '14'"> + <img :src="xuanzhong" /> + </div> + </div> + <div + :class=" + toolSelectData.fontSizeActive == '16' ? 'typeItem lineTypeActive' : 'typeItem' + " + @click="selectfontSize('16')" + > + 涓� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '16'"> + <img :src="xuanzhong" /> + </div> + </div> + <div + :class=" + toolSelectData.fontSizeActive == '18' ? 'typeItem lineTypeActive' : 'typeItem' + " + @click="selectfontSize('18')" + > + 澶� + <div class="activeIcon" v-if="toolSelectData.fontSizeActive == '18'"> + <img :src="xuanzhong" /> + </div> + </div> + </div> + <div class="lineStyle"> + <div class="colorSelectBox"> + <div + v-for="item in colorSelectList" + :key="item.key" + class="flex1 hover" + @click="lineColorSelect(item)" + > + <div :style="{ background: item.key }" class="scribeItem"> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> + </div> + </div> + </div> + </div> + </div> + </div> + <template #reference> + <div class="floatToolItem hover" @click="toolSelectHandle('wenzi')"> + <div class="imgBox"> + <img :src="wenzi2" alt="" /> + </div> + <div class="text">鏂囧瓧</div> + </div> + </template> + </el-popover> + <el-popover placement="top" width="250" trigger="click"> + <div class="popinnerBox"> + <div class="graphBox"> + <div class="graphSelect"> + <div class="flex1"> + <div class="square hover" @click="graphSelect('square')"></div> + </div> + <div class="flex1"> + <div class="rotundity hover" @click="graphSelect('rotundity')"></div> + </div> + <div class="flex1"> + <div class="triangle hover" @click="graphSelect('triangle')"></div> + </div> + <div class="flex1"> + <div class="lineSegment hover" @click="graphSelect('lineSegment')">/</div> + </div> + </div> + <div class="lineStyle"> + <div class="colorSelectBox"> + <div + v-for="item in colorSelectList" + :key="item.key" + class="flex1 hover" + @click="lineColorSelect(item)" + > + <div :style="{ background: item.key }" class="scribeItem"> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> + </div> + </div> + </div> + </div> + </div> + </div> + <template #reference> + <div class="floatToolItem hover" @click="toolSelectHandle('tuxing')"> + <div class="imgBox"> + <img :src="tuxing" alt="" /> + </div> + <div class="text">鍥惧舰</div> + </div> + </template> + </el-popover> + <!-- <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> + <div class="imgBox"> + <img :src="clear" alt="" /> + </div> + <div class="text">姗$毊鎿�</div> + </div> --> + <div class="floatToolItem hover" @click="toolSelectHandle('chexiao')"> + <div class="imgBox"> + <img :src="clearPrevious" alt="" /> + </div> + <div class="text">鎾ら攢</div> + </div> + <!-- <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> + <div class="imgBox"> + <img :src="chongzuo" alt="" /> + </div> + <div class="text">閲嶅仛</div> + </div> --> + <div class="floatToolItem hover" @click="toolSelectHandle('qingchu')"> + <div class="imgBox"> + <img :src="qingchu2" alt="" /> + </div> + <div class="text">娓呴櫎</div> + </div> + <div class="floatToolItem layOutTool hover" @click="toolSelectHandle('tuichu')"> + <div class="imgBox"> + <img :src="tuichu" alt="" /> + </div> + <div class="text">閫�鍑�</div> </div> </div> </div> @@ -569,14 +742,31 @@ </div> </div> </div> + <!-- 鍒掔嚎锛岄珮浜垹闄� --> + <div + class="lineDeleteBox" + v-show="lineDelete.showLineDelete" + :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" + > + <el-button @click="delUserKey">鍒犻櫎</el-button> + </div> + <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog"> - <div class="videoBox" v-if="resourType == 'video'"> - <video controls object-fit="fill" :src="testVideo"></video> + <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> </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 @@ -597,31 +787,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="淇濆瓨鎴浘" @@ -629,7 +808,7 @@ v-model="screenshotVisble" :before-close="screenshotClose" width="400" - class="resourDialog" + class="resourDialog screenshotDialog" > <div class="formBox"> <el-input v-model="nameData" placeholder="璇疯緭鍏ユ埅鍥惧悕绉�"></el-input> @@ -637,16 +816,18 @@ <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="myDialogs"> <div class="wendabox"> <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe> </div> @@ -654,14 +835,14 @@ <el-dialog title="璇嶅吀" align-center v-model="cidianVisible" width="60%" class="myDialogs"> <div class="wendabox"> <!-- <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> --> - <dictionary :searchCon="selectText" /> + <dictionary :searchCon="dialogToolData.txt" /> </div> </el-dialog> <el-dialog title="GGB鍑芥暟宸ュ叿" align-center v-model="functionVisible" - width="60%" + width="80%" class="myDialogs" > <div class="wendabox"> @@ -681,19 +862,21 @@ </template> <script setup lang="ts"> -import { ref, reactive, watch, onMounted, inject } from 'vue' +import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' import { ctxUrl } from '@/assets/js/config' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() const request = inject('request') +const toolClass = inject('toolClass') +const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() //鑾峰彇褰撳墠璺敱鐨勪俊鎭� let route = useRoute() import moment from 'moment' import dictionary from '@/views/components/dictionary.vue' -import { ElMessage, ElMessageBox } from 'element-plus' +import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import logo from '@/assets/images/header/logo.png' import mulu from '@/assets/images/menu/mulu.png' import biji from '@/assets/images/menu/biji.png' @@ -732,6 +915,7 @@ import qingchu1 from '../assets/images/operation/Clearaway-b.png' import wenzi from '../assets/images/operation/wenzi-w.png' import wenzi1 from '../assets/images/operation/wenzi-b.png' +import wenzi2 from '../assets/images/operation/wenzi.png' import biaoqianw from '../assets/images/operation/biaoqian-w.png' import biaoqian1 from '../assets/images/operation/biaoqian-b.png' import baiban from '../assets/images/operation/baiban-w.png' @@ -744,6 +928,10 @@ 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' @@ -782,34 +970,86 @@ import { start } from 'qiankun' import axios from 'axios' import { fabric } from 'fabric' + +import { loadMicroApp } from 'qiankun' +import { microApps } from '@/child.ts' const canvasWith = ref(1000) const canvasheight = ref(3000) const screenWidth = ref( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ) +const brushBoxLeft = ref(500) +let microApp = null // 寰簲鐢ㄥ疄渚� +const bookConfig = ref({}) +const activeCatalog = ref() onMounted(() => { - // canvasWith.value = window.innerWidth - 540 - // canvasheight.value = window.innerHeight - 110 - getNotesList() // 鑾峰彇楂樹寒 - getlineHeightList() //鑾峰彇楂樹寒 - getScribeList() //鑾峰彇鍒掔嚎 - getCatalogueData() - getResourceData() - getScreenshotList() - // setTimeout(() => { - // canvasWith.value = document.getElementById('container').offsetWidth - // canvasheight.value = document.getElementById('container').offsetHeight - // }, 5000) + setTimeout(() => { + canvasWith.value = document.querySelector('.content-box').offsetWidth + canvasheight.value = document.querySelector('.content-box').offsetHeight + }, 5000) if (screenWidth.value < 1180) { menuState.open = false toolState.open = false } + brushBoxLeft.value = (screenWidth.value - 450) / 2 window.onresize = () => { return (() => { screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth })() } + + // 鍔犺浇寰簲鐢� + microApp = loadMicroApp(microApps.book1, { + sandbox: { + strictStyleIsolation: true + // experimentalStyleIsolation: true + }, + singular: true + }) + + window.qiankunActions.onGlobalStateChange((state, prev) => { + console.log('鐖跺眰state鍙樺寲', state) + window.qiankunState = state + }) + + // 瀹氫箟鐖跺眰鏂规硶 + console.log(window.qiankunActions) + window.qiankunActions.setGlobalState({ + state: 1, // 鍔犺浇瀛愬簲鐢� + windowSelection: (data) => { + // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 + console.log(data, '瀛愬簲鐢ㄩ�夋嫨') + if (data.txt) { + getSelection(data) + } else { + showToolBox.value = false + lineDelete.showLineDelete = false + toolActive.value = '' + lineDelete.top = data.y + 20 + lineDelete.left = data.x + } + }, + getBookConfig: (data) => { + console.log(data, '鍥句功閰嶇疆') + bookConfig.value = data.bookConfig + getCatalogueData() + getResourceData() + getTextbookComponents() + }, + catalogChange: (data) => { + activeCatalog.value = data.showCatalogList + getSignData() + console.log(data, '绔犺妭鍒囨崲锛氱洰鍓嶆樉绀虹殑涓変釜绔犺妭') + }, + pageChange: (data) => { + headerData.process = Number(data.page) + currentChapter.value = data.catalog + console.log(data, '椤甸潰鍒囨崲锛氱洰鍓嶆樉绀洪〉闈㈠拰瀵瑰簲鐨勭珷鑺備俊鎭�') + } + }) + // 璋冪敤瀛愬眰鏂规硶 + // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) }) watch( @@ -819,18 +1059,26 @@ if (screenWidth.value < 1180) { menuState.open = false toolState.open = false + floatingToolData.elLeft = 100 + } else { + floatingToolData.elLeft = 300 } } ) +//鑾峰彇褰撳墠涔︾睄鎵�闇�缁勪欢 +const getTextbookComponents = () => {} + //鑾峰彇鐩綍 const catalogueData = ref([]) const getCatalogueData = () => { axios - .get(ctxUrl + '/books/test/information.json') + .get(bookConfig.value.resourceUrl + '/1/information.json') .then(function (response) { + console.log(response.data, '鐩綍') var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 - catalogueData.value = json + catalogueData.value = json.data + headerData.totlePage = json.data[json.data.length - 1].end }) .catch(function (error) { console.log(error) @@ -838,58 +1086,219 @@ } const defaultProps = { children: 'children', - label: 'label' + label: 'label', + page: 'page' } +const filterNode = (value, data) => { + if (!value) return true + return data.label.indexOf(value) !== -1 +} + const handleNodeClick = (data) => { - console.log(data.id, 12) - 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 resourVisble = ref(false) -const resourType = ref('') +const resourType = ref('') //璧勬簮绫诲瀷鍥剧墖/闊抽 const testVideo = ref('') //瑙嗛閾炬帴 const testWord = ref('') //word閾炬帴 + const getResourceData = () => { axios - .get(ctxUrl + '/books/test/resource.json') + .get(bookConfig.value.resourceUrl + '/1/resource.json?t=12') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 - console.log(json, '璧勬簮') - resourceData.value = json - resourceDataList.value = json.imgList - classifySelectList[0].count = json.imgList.length - classifySelectList[1].count = json.audioList.length - classifySelectList[2].count = json.videoList.length - classifySelectList[3].count = json.attachmentList.length + if (json.length > 0) { + defaultResourceList.value = [] + teacherResourceList.value = [] + // 鑾峰彇鏁扮粍涓墍鏈夊璞$殑age灞炴�х殑鏁伴噺 + json.forEach((item) => { + if (resourceType.value == 'default') { + if (item.isTeacherResource == '鍚�') { + defaultResourceList.value.push(item) + } + } else { + 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 (activeClassify.value == 'image') { + resourceDataList.value.push(resItem) + } + imgCount++ + } else if (resItem.resourceType == '闊抽') { + if (activeClassify.value == 'audio') { + resourceDataList.value.push(resItem) + } + 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) + } + }) + } + } 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 (activeClassify.value == 'image') { + resourceDataList.value.push(resItem) + } + imgCount++ + } else if (resItem.resourceType == '闊抽') { + if (activeClassify.value == 'audio') { + resourceDataList.value.push(resItem) + } + 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) + } + }) + } + } + } }) .catch(function (error) { console.log(error) @@ -897,34 +1306,32 @@ } const goResourceDetail = (data) => { - resourVisble.value = true - resourType.value = data.type - if (data.type == 'video') { - testVideo.value = ctxUrl + '/books/test/resourceData/' + data.name - } else if (data.type == 'word') { - testWord.value = ctxUrl + '/books/test/resourceData/' + data.name + console.log(data) + resourType.value = data.resourceType + if (data.resourceType == '瑙嗛') { + resourVisble.value = true + testVideo.value = bookConfig.value.requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + } else if (data.resourceType == 'word') { + testWord.value = bookConfig.value.resourceUrl + '/resourceData/' + data.name + } else { + if (window.qiankunState && window.qiankunState.gotoPage) { + window.qiankunState.gotoPage(Number(data.chapterNum), Number(data.pagination)) + } } } +//璧勬簮绫诲瀷閫夋嫨榛樿/鏁欏笀 +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 = resourceData.value.imgList - break - case 'audio': - resourceDataList.value = resourceData.value.audioList - break - case 'video': - resourceDataList.value = resourceData.value.videoList - break - case 'other': - resourceDataList.value = resourceData.value.attachmentList - break - } - console.log(resourceDataList.value) + getResourceData() } const searchBtn = () => { if (searchShow.value) { @@ -956,43 +1363,52 @@ icon: jietu }, { - name: '鏍囩', + name: '涔︾', icon: biaoqian } ]) // 閫変腑鑿滃崟 -const activeMenu = ref(0) -//璧勬簮绫诲瀷 +const activeMenu = ref('鐩綍') -const resourceType = ref('default') // 鑿滃崟鐐瑰嚮 -const menuItemClick = (index) => { - activeMenu.value = index +const menuItemClick = (name) => { + activeMenu.value = name + searchText.value = '' menuState.open = true - switch (index) { - case '0': + switch (name) { + case '鐩綍': break - case '1': + case '绗旇': getNotesList() break - case '2': + case '璧勬簮': break - case '3': + case '鐭ヨ瘑鍥捐氨': break - case '4': + case '鎴浘': + getScreenshotList() break - case '5': + case '涔︾': + getReMarkList() break } } //鍒锋柊褰撳墠椤甸潰 const reload = () => { location.reload() + // if (microApp) { + // microApp.unmount() // 鍗歌浇寰簲鐢� + // microApp = loadMicroApp(microApps.book1, { + // sandbox: { + // strictStyleIsolation: true, + // experimentalStyleIsolation: true + // } + // }) + // } else { + // location.reload() + // } } -const selectResourceType = (type) => { - resourceType.value = type -} const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, @@ -1003,19 +1419,19 @@ fontSizeList: [ { lable: '灏�', - key: '14' + key: 14 }, { lable: '涓�', - key: '16' + key: 16 }, { lable: '澶�', - key: '20' + key: 18 } ], - fontSizeActive: '16', + fontSizeActive: 16, acoustics: false, animation: false, bgColorList: [ @@ -1040,6 +1456,9 @@ }) const fontSizeSelect = (item) => { settingForm.fontSizeActive = item.key + window.qiankunActions.setGlobalState({ + fontSize: item.key + }) } const bgColorSelect = (item) => { settingForm.bgColorActive = item.key @@ -1053,25 +1472,38 @@ } getNotesList() } +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 } } @@ -1182,44 +1614,37 @@ const floatingToolBox = reactive([ { icon: huabi, + activeIcon: huabi1, name: '鐢荤瑪' }, { - icon: qingchu, - name: '娓呴櫎' - }, - { - icon: wenzi, - name: '鏂囧瓧' - }, - { - icon: biaozhu, - name: '鏍囨敞' - }, - { - icon: biaoqianw, - name: '鏍囩' - }, - { + activeIcon: baiban1, icon: baiban, name: '鐧芥澘' }, { + activeIcon: biaozhu1, + icon: biaozhu, + name: '鏍囪' + }, + { + activeIcon: biaoqian1, + icon: biaoqianw, + name: '涔︾' + }, + { + activeIcon: jieping1, icon: jieping, name: '鎴睆' } ]) -const canvas = ref(null) +let canvas = null const floatingToolData = reactive({ activeToolData: '', //閫変腑宸ュ叿 elLeft: 400, elTop: 300, startclientx: 0, - startclienty: 0, - fontSizeActive: '16', - thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏 - lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨� - lineColorActive: '#333' //鐢荤瑪閫変腑绾块鑹� + startclienty: 0 }) //鐢诲竷 @@ -1232,22 +1657,16 @@ floatingToolBox[0].icon = huabi1 break case 1: - floatingToolBox[1].icon = qingchu1 + floatingToolBox[1].icon = baiban1 break case 2: - floatingToolBox[2].icon = wenzi1 + floatingToolBox[2].icon = biaozhu1 break case 3: - floatingToolBox[3].icon = biaozhu1 + floatingToolBox[3].icon = biaoqian1 break case 4: - floatingToolBox[4].icon = biaoqian1 - break - case 5: - floatingToolBox[5].icon = baiban1 - break - case 6: - floatingToolBox[6].icon = jieping1 + floatingToolBox[4].icon = jieping1 break } } @@ -1258,22 +1677,16 @@ floatingToolBox[0].icon = huabi break case 1: - floatingToolBox[1].icon = qingchu + floatingToolBox[1].icon = baiban break case 2: - floatingToolBox[2].icon = wenzi + floatingToolBox[2].icon = biaozhu break case 3: - floatingToolBox[3].icon = biaozhu + floatingToolBox[3].icon = biaoqianw break case 4: - floatingToolBox[4].icon = biaoqianw - break - case 5: - floatingToolBox[5].icon = baiban - break - case 6: - floatingToolBox[6].icon = jieping + floatingToolBox[4].icon = jieping break } } @@ -1284,16 +1697,29 @@ 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) { + canvasShow.value = false + switch (floatingToolData.activeToolData) { case '鐢荤瑪': canvasShow.value = true - init() + toolSelectData.activeTool = 'huabi' + break + case '鏍囪': + break + case '涔︾': + reMark() break case '鎴睆': jitT() @@ -1309,49 +1735,176 @@ } } const dragstart = (e) => { - console.log(e) floatingToolData.startclientx = e.clientX floatingToolData.startclienty = e.clientY +} +//鐢荤瑪鎿嶄綔鏍忎簨浠� +const toolSelectData = reactive({ + activeTool: '', + fontSizeActive: '16', // 鏂囧瓧鎿嶄綔鏂囧瓧澶у皬 + thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏 + lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨� + lineColorActive: '#333', //鐢荤瑪閫変腑绾块鑹� + graphType: '' //鍥惧舰绫诲瀷锛屾柟褰紝鍦嗗舰... +}) +const toolSelectHandle = (title) => { + toolSelectData.activeTool = title + toolSelectData.lineColorActive = '' + switch (title) { + case 'huabi': + init() + break + case 'wenzi': + break + case 'tuichu': + canvasShow.value = false + floatingToolData.activeToolData = '' + break + case 'qingchu': + canvas.clear() + break + } } //閫変腑鐢荤瑪绮楃粏 const selectThickness = (str) => { - floatingToolData.thicknessActive = str - init() + toolSelectData.thicknessActive = str + canvas.freeDrawingBrush.color = toolSelectData.thicknessActive } const selectLineType = (str) => { - floatingToolData.lineTypeActive = str + toolSelectData.lineTypeActive = str init() } //鐢荤瑪棰滆壊閫夋嫨 const lineColorSelect = (item) => { - floatingToolData.lineColorActive = item.key - init() + toolSelectData.lineColorActive = item.key + canvas.freeDrawingBrush.color = item.key } //鐢诲竷灞炴�� +const isDrawing = ref(true) // 鏄惁寮�鍚粯鍥撅紝true 寮�鍚紱false 鍏抽棴 const init = () => { - canvas.value = new fabric.Canvas('canvasRef', { - isDrawingMode: true // 鍚敤缁樼敾妯″紡 + canvas = new fabric.Canvas('canvasRef', { + isDrawingMode: isDrawing.value // 鍚敤缁樼敾妯″紡 }) - canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive - canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive + canvas.freeDrawingBrush.color = toolSelectData.lineColorActive + canvas.freeDrawingBrush.width = toolSelectData.thicknessActive } - -//娓呴櫎涓婁竴姝�/鍏ㄩ儴 -const cleanUpSelect = (str) => { - if (str == 'all') { - canvasShow.value = false - } else { - console.log(history.value) - } -} -//鏍囩鏄剧ず闅愯棌 -const labelShow = (str) => {} //鏂囧瓧澶у皬 const selectfontSize = (str) => { - floatingToolData.fontSizeActive = str + toolSelectData.fontSizeActive = 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(0) +const reMarkList = ref([]) +const reMarkData = ref([]) +const reMarkId = ref([]) + +const reMark = () => { + let chapterData = catalogueData.value.find((item) => item.chapter == Number(currentChapter.value)) + console.log(chapterData) + reMarkData.value.push({ + id: toolClass.uuid(8), + createDate: new Date(), + page: headerData.process, + chapterNum: currentChapter.value, + chapterName: chapterData.label + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'reMark', + key: bookConfig.value.bookId, + value: JSON.stringify(reMarkData.value) + } + ] + } + }) + .then((res) => { + floatingToolData.activeToolData = '' + getReMarkList() + }) + .catch(function (error) {}) +} +const getReMarkList = () => { + reMarkList.value = [] + reMarkData.value = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + 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) + } + }) + console.log(reMarkList.value, '124') + } + }) +} +//鍒犻櫎涔︾ +const deleteReMark = (item) => { + let list = reMarkList.value.filter((itemData) => itemData.id !== item.id) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'reMark', + key: bookConfig.value.bookId, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎涔︾鎴愬姛!', + type: 'success' + }) + getReMarkList() + }) } //鎴浘 @@ -1367,19 +1920,35 @@ //纭鍥炶皟 const callback = (val: any) => { screenshotVisble.value = true + nameData.value = moment(new Date()).format('YYYY-MM-DD HH:mm:ss') urlData.value = val.base64 } //鍙栨秷鍥炶皟 const closeFn = (base64: any) => { console.log(base64) + floatingToolData.activeToolData = '' } +//淇濆瓨鎴浘 const addScreenshot = () => { if (nameData.value) { - screenshotList.value.push({ - createDate: new Date(), - imgUrl: urlData.value, - name: nameData.value - }) + 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 request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', @@ -1387,15 +1956,24 @@ setKeyRequests: [ { domain: 'screenshot', - key: '2358', - value: JSON.stringify(screenshotList.value) + key: bookConfig.value.bookId, + value: JSON.stringify(screenshotData.value) } ] } - }).then((res) => { - getScreenshotList() - 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('鎴浘鍚嶇О涓嶈兘涓虹┖!') } @@ -1405,79 +1983,114 @@ } const getScreenshotList = () => { + screenshotData.value = [] + screenshotList.value = [] request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { domain: 'screenshot', - keys: ['2358'] + keys: [bookConfig.value.bookId] } }).then((res) => { if (res && res.length > 0 && res[0].value) { - screenshotList.value = JSON.parse(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(() => { + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'screenshot', + key: bookConfig.value.bookId, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎鎴浘鎴愬姛!', + type: 'success' + }) + getScreenshotList() + }) + }) + .catch(() => {}) } //閫変腑鏂囧瓧宸ュ叿鏍� -const selectText = ref('') //閫変腑鏂囧瓧 -const selectNode = ref(null) const showToolBox = ref(false) const dialogToolData = reactive({ left: 500, top: 300, + txt: '', + page: '', chapter: '', //閫変腑鏂囧瓧鎵�鍦ㄧ珷鑺� - parentNode: null, lineHeight: [], //楂樹寒 scribeList: [], //鍒掔嚎 notesList: [] //绗旇 }) ///鍐呭閫変腑 -const isMouseDown = ref(false) -const move = ref(false) -const handleMouseDown = () => { - isMouseDown.value = true - showToolBox.value = false - colorActive.value = '' - toolActive.value = '' -} -const handleMousemove = () => { - if (isMouseDown.value) { - move.value = true +const getSelection = (data) => { + if (data.txt) { + toolActive.value = '' + dialogToolData.txt = data.txt + dialogToolData.page = data.page + dialogToolData.chapter = data.chapterNum + dialogToolData.left = data.x + dialogToolData.top = data.y + showToolBox.value = true } -} - -const handleMouseUp = (e) => { - if (move.value) { - const txt = window.getSelection()?.toString() - selectText.value = txt - const node = window.getSelection() - let html = node.anchorNode.parentNode.parentNode - dialogToolData.chapter = html.firstChild.innerHTML - if (txt) { - showToolBox.value = true - dialogToolData.top = e.y - dialogToolData.left = e.x - } - isMouseDown.value = false - } - move.value = false -} - -const pageScroll = (e) => { - showToolBox.value = 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 noteColorActive = ref('') const dialogToolList = reactive([ { icon: gaoliang, activeIcon: gaoliang1, name: '楂樹寒' }, { icon: huaxian, activeIcon: huaxian1, name: '鍒掔嚎' }, @@ -1486,7 +2099,7 @@ { icon: fuzhi, activeIcon: fuzhi1, name: '澶嶅埗' }, { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI闃呰' }, { icon: cidian2, activeIcon: cidian1, name: '璇嶅吀' }, - { icon: baidu, activeIcon: cidian1, name: '鐧剧' } + { icon: baidu, activeIcon: baidu, name: '鐧剧' } // { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '璇煶闃呰' } // { icon: cidian2, activeIcon: cidian1, name: '缈昏瘧' } ]) @@ -1515,7 +2128,9 @@ //绗旇寮圭獥 const addNoteVisble = ref(false) +const isUpdate = ref(false) const formData = reactive({ + id: '', desc: '' }) //绗旇寮圭獥鍏抽棴 @@ -1601,9 +2216,10 @@ colorActive.value = '' switch (item.name) { case 'AI闃呰': - const utterance = new SpeechSynthesisUtterance(selectText.value) + const utterance = new SpeechSynthesisUtterance(dialogToolData.txt) utterance.lang = 'zh-CN' // 璁剧疆璇█涓轰腑鏂� synth.speak(utterance) + showToolBox.value = false break case '鍒掔嚎': break @@ -1619,7 +2235,7 @@ case '澶嶅埗': try { //澶嶅埗 - await toClipboard(selectText.value) + await toClipboard(dialogToolData.txt) //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣� ElMessage({ message: '澶嶅埗鎴愬姛', @@ -1635,6 +2251,7 @@ cidianVisible.value = true break case '鐧剧': + console.log('https://baike.baidu.com/item/' + dialogToolData.txt) baiduVisible.value = true break } @@ -1642,318 +2259,367 @@ const clickSelect = (item) => { colorActive.value = item.key - if (toolActive.value == '楂樹寒') { - dialogToolData.lineHeight.push({ - selectNode: selectNode.value, - selectText: selectText.value, - color: colorActive.value, - chapter: dialogToolData.chapter, - createDate: new Date() - }) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'highLight', - key: '2358', - value: JSON.stringify(dialogToolData.lineHeight) - } - ] - } - }).then((res) => { - showToolBox.value = false - colorActive.value = '' - toolActive.value = '' - getlineHeightList() - }) - } - if (toolActive.value == '鍒掔嚎') { - dialogToolData.scribeList.push({ - selectNode: selectNode.value, - selectText: selectText.value, - color: colorActive.value, - chapter: dialogToolData.chapter, - createDate: new Date() - }) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'underline', - key: '2358', - value: JSON.stringify(dialogToolData.scribeList) - } - ] - } - }).then((res) => { - colorActive.value = '' - showToolBox.value = false - toolActive.value = '' - getScribeList() - }) - } + addUserKey() +} +//绗旇閫夐鑹� +const clickSelectColor = (item) => { + noteColorActive.value = item.key } -const lock = ref(false) -const addNote = () => { - const obj = { - desc: formData.desc - } - if (!lock.value) { - lock.value = true - if (formData.desc.replace(/^\s*|\s*$/g, '')) { - dialogToolData.notesList.push({ - selectText: selectText.value, - color: colorActive.value, - chapter: dialogToolData.chapter, +const addUserKey = () => { + let dom = '' + let data = null + switch (toolActive.value) { + case '楂樹寒': + 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-' + 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: { + setKeyRequests: [ + { + domain: dom, + key: dialogToolData.chapter, + value: JSON.stringify(data) + } + ] + } + }).then((res) => { + showToolBox.value = false + addNoteVisble.value = false + colorActive.value = '' + noteColorActive.value = '' + toolActive.value = '' + getSignData() + getNotesList() + }) +} + +const getSignData = () => { + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + 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-' + 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 + + // 娓叉煋 + 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: 'notes-' + bookConfig.value.bookId, + keys: activeCatalog.value.map((item) => item + '') + } + }).then((res) => { + if (res && res.length > 0) { + for (let i = 0; i < res.length; i++) { + const item = res[i] + const data = JSON.parse(item.value) + // 鍌ㄥ�� + dialogToolData.notesList[item.key] = data + // 娓叉煋 + for (let j = 0; j < data.length; j++) { + const citem = data[j] + if (window.qiankunState && window.qiankunState.renderSign) + window.qiankunState.renderSign(citem.type, citem) + } + } + } + }) +} + +//鑿滃崟绗旇鍒楄〃 +const getNotesList = () => { + let chapterList = [] + catalogueData.value.forEach((item) => { + chapterList.push(item.chapter + '') + }) + scribeData.noteList = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'notes-' + bookConfig.value.bookId, + keys: chapterList + } + }).then((res) => { + if (res && res.length > 0) { + for (let i = 0; i < res.length; i++) { + const item = res[i] + // 鍌ㄥ�� + let data = catalogueData.value.find((item1) => item1.chapter == Number(item.key)) + let list = JSON.parse(item.value) + let itemList = [] + if (list.length > 0) { + list.forEach((item) => { + if (searchText.value) { + let text = searchText.value.replace(/^\s*|\s*$/g, '') + if (item.note.indexOf(text) > -1 || item.txt.indexOf(text) > -1) { + 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 (data.chapter == Number(item.key) && itemList.length > 0) { + scribeData.noteList.push({ + chapter: data.chapter, + chapterName: data.label, + noteList: itemList + }) + } + } + console.log(scribeData.noteList, 'scribeData.noteList') + } + }) +} + +//姝f枃涓垹闄ら珮浜紝鍒掔嚎锛岀瑪璁版搷浣滄 +const lineDelete = reactive({ + showLineDelete: false, + top: 0, + left: 0, + deleteType: '', + id: '' +}) + +// 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� +window.signClick = (type, id, chapterNum) => { + console.log('signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�', type, id, chapterNum) + dialogToolData.chapter = chapterNum + if (type == 'Note') { + let list = dialogToolData.notesList[chapterNum] + let data = list.find((item) => item.id == id) + console.log(data, 123) + formData.id = id + formData.desc = data.note + noteColorActive.value = data.color + addNoteVisble.value = true + isUpdate.value = true + } else { + lineDelete.showLineDelete = true + lineDelete.deleteType = type + lineDelete.id = id + dialogToolData.chapter = chapterNum + } +} + +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 + } + let list = data[dialogToolData.chapter].filter((item) => item.id != ids) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: dom, + key: dialogToolData.chapter, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + lineDelete.showLineDelete = false + if (window.qiankunState && window.qiankunState.delSign) + window.qiankunState.delSign({ ids: [ids] }) + getSignData() + }) +} + +//绗旇璺宠浆 +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 + } + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + 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(() => { request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', data: { setKeyRequests: [ { - domain: 'notes', - key: '2358', - value: JSON.stringify(dialogToolData.notesList) + domain: 'notes-' + bookConfig.value.bookId, + key: item.chapterNum, + value: JSON.stringify(list) } ] } }).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: ['2358'] - } - }).then((res) => { - if (res && res.length > 0 && res[0].value) { - scribeData.loading = false - dialogToolData.notesList = JSON.parse(res[0].value) - let list = JSON.parse(res[0].value) - let textDom1 = document.getElementById('container') - 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) - } - } - //椤甸潰娣诲姞绗旇 - let containerElement = document.createElement('span') - containerElement.style.textDecoration = 'underline' - containerElement.innerText = item.selectText - let rReg1 = new RegExp(`${item.selectText}`, 'ig') - let text1 = textDom1.innerHTML - let rHtml1 = '' - rHtml1 = text1.replace( - rReg1, - `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>` - ) - textDom1.innerHTML = rHtml1 + ElMessage({ + message: '鍒犻櫎绗旇鎴愬姛!', + type: 'success' }) - } - } - - }) -} -//鍒掔嚎 -const getScribeList = () => { - scribeData.scribeDataList = [] - request({ - url: '/identity/api/ApiGetAppUserKey', - method: 'post', - data: { - domain: 'underline', - keys: ['2358'] - } - }).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.getElementById('container') - console.log(scribeData.scribeDataList, '鍒掔嚎') - if (scribeData.scribeDataList.length > 0) { - for (let i = 0; i < scribeData.scribeDataList.length; i++) { - let item = scribeData.scribeDataList[i] - let containerElement = document.createElement('span') - containerElement.style.textDecoration = 'underline' - containerElement.innerText = item.selectText - let rReg1 = new RegExp(`${item.selectText}`, 'ig') - let text1 = textDom1.innerHTML - let rHtml1 = '' - rHtml1 = text1.replace( - rReg1, - `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer">${item.selectText}</span>` - ) - textDom1.innerHTML = rHtml1 + getNotesList() + if (window.qiankunState && window.qiankunState.delSign) { + window.qiankunState.delSign({ ids: [item.id] }) } - } - } - }) -} -//楂樹寒 -const getlineHeightList = () => { - scribeData.lineHeightList = [] - request({ - url: '/identity/api/ApiGetAppUserKey', - method: 'post', - data: { - domain: 'highLight', - keys: ['2358'] - } - }).then((res) => { - if (res && res.length > 0 && res[0].value) { - dialogToolData.lineHeight = JSON.parse(res[0].value) - scribeData.lineHeightList = JSON.parse(res[0].value) - console.log(scribeData.lineHeightList, '楂樹寒') - let textDom = document.getElementById('container') - if (scribeData.lineHeightList.length > 0) { - for (let i = 0; i < scribeData.lineHeightList.length; i++) { - let item = scribeData.lineHeightList[i] - let heightLightElement = document.createElement('i') - heightLightElement.style.backgroundColor = item.color - heightLightElement.innerText = item.selectText - let rReg = new RegExp(`${item.selectText}`, 'ig') - let text = textDom.innerHTML - let rHtml = '' - rHtml = text.replace( - rReg, - `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>` - ) - textDom.innerHTML = rHtml - } - } - } - }) -} - -//姝f枃涓垹闄ら珮浜紝鍒掔嚎锛岀瑪璁版搷浣滄 -window.notesVisbleShow = function (txt) { - addNoteVisble.value = true - let notes = dialogToolData.notesList.find((item) => item.selectText == txt) - formData.desc = notes.note -} -window.deleteScribeShow = function (txt) { - console.log(txt, 2) - let list = scribeData.scribeDataList.filter((item) => item.selectText != txt) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'underline', - key: '2358', - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - getScribeList() - }) -} - -window.deletelineHeightShow = function (txt) { - console.log(txt, 1) - let list = scribeData.lineHeightList.filter((item) => item.selectText != txt) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'highLight', - key: '2358', - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - getlineHeightList() - }) -} - -const jumpContent = (id) => { - document.getElementById(id).scrollIntoView() -} - -const update = (item, type) => { - dialogToolData.notesList.splice( - dialogToolData.notesList.findIndex((itemData) => itemData.selectText == item.selectText), - 1 - ) - selectText.value = item.selectText - colorActive.value = item.color - dialogToolData.chapter = item.chapter - formData.desc = item.note - addNoteVisble.value = true -} - -//鍒犻櫎 -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: '2358', - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - ElMessage({ - message: '鍒犻櫎绗旇鎴愬姛!', - type: 'success' }) - getNotesList() }) - } + .catch(() => {}) } //鍐呭鍖哄煙椤堕儴鏄剧ず @@ -1964,6 +2630,7 @@ minutes: 0, hours: 0, process: 0, + totlePage: 0, pageSize: 100 }) //涓婅鏃堕暱璁℃椂鍣� @@ -1995,16 +2662,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> @@ -2114,7 +2786,7 @@ align-items: center; } .resourceBox { - padding: 15px 0; + padding: 10px 0; margin: 0 20px; border-bottom: 1px solid rgba(204, 204, 204, 0.32); .classification { @@ -2131,10 +2803,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 { @@ -2161,6 +2836,7 @@ } .inputBox { margin-top: 10px; + width: 100% !important; } } .resourceTab { @@ -2194,11 +2870,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 { @@ -2274,11 +2952,14 @@ padding: 10px 0; align-items: center; .resourceImg { - width: 130px; + // width: 130px; height: 80px; background: #fff; border-radius: 5px; overflow: hidden; + display: flex; + align-items: center; + justify-content: center; img { height: 100%; width: 100%; @@ -2288,14 +2969,7 @@ .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; } } } @@ -2307,11 +2981,32 @@ .captureItem { margin-bottom: 10px; width: 46%; + position: relative; .imgBox { border: 1px solid #d8d8d8; width: 100%; height: 80px; margin-bottom: 5px; + } + .deleteBox { + 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; + } + } } // .capture { // width: 100%; @@ -2319,9 +3014,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; @@ -2381,15 +3075,34 @@ margin: 10px 10px 10px 15px; border-radius: 3px; padding: 2px 5px; - // opacity: 0.1; .con { - all: initial; max-height: 65px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } + } + } + .chapterName { + margin: 15px; + } + .reMarkItem { + margin: 15px; + background: #fff; + border-radius: 10px; + padding: 10px; + display: flex; + .reMarkCon { + width: 240px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-right: 8px; + } + .deleteReMarkImg { + display: flex; + align-items: center; } } } @@ -2403,9 +3116,10 @@ position: fixed; line-height: 22px; top: 50%; - left: 370px; + left: 395px; text-align: center; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); + z-index: 2; img { height: 10px; width: 18px; @@ -2420,6 +3134,7 @@ padding: 0 20px; background: #fff; display: flex; + z-index: 99; align-items: center; justify-content: space-between; .classTime { @@ -2440,8 +3155,9 @@ .progress { text-align: center; .bookName { - font-weight: bold; - margin-bottom: 3px; + font-weight: 800; + margin-bottom: 5px; + color: #333; } } .rightBox { @@ -2450,14 +3166,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; @@ -2473,14 +3194,18 @@ } .pageBox-content { height: calc(100% - 57px); - overflow-y: auto; background: #fbf9f4; + padding: 10px 0; .content-box { + height: 100%; position: relative; - } - #container { - background: #fbf9f4; - // height: 100%; + #container { + background: #fbf9f4; + height: 100%; + #__qiankun_microapp_wrapper_for_app_content__ { + height: 100%; + } + } } .canvas-box { height: 100%; @@ -2538,18 +3263,20 @@ border-radius: 3px 0px 0px 3px; border: 1px solid #bce3ff; position: absolute; - line-height: 22px; top: 50%; - right: 50px; - text-align: center; + right: 67px; box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16); + display: flex; + align-items: center; + justify-content: center; + img { height: 10px; width: 18px; } } .right { - right: 184px !important; + right: 215px !important; border-radius: 0px 3px 3px 0px !important; } .classRoomBox { @@ -2616,10 +3343,10 @@ width: 85px; background-image: linear-gradient(to bottom, #0093ff, #005dff); position: fixed; - height: 430px; + height: 310px; top: 300px; left: 450px; - z-index: 99; + z-index: 2000; border-radius: 10px; padding: 5px; overflow: hidden; @@ -2630,6 +3357,7 @@ align-items: center; border-radius: 5px; color: #fff; + cursor: pointer; img { margin-right: 8px; } @@ -2637,17 +3365,52 @@ margin-right: 5px; } } + .floatToolItem:hover, + .floatToolActive { + background-color: #fff; + color: #0093ff; + } } - .floatToolItem:hover { - background-color: #fff; - color: #0093ff; + .brushBox { + position: fixed; + // left: 40%; + bottom: 20px; + z-index: 99; + border-radius: 5px; + background: #fff; + // padding: 10px; + overflow: hidden; + border: 1px solid #0093ff; + .toolList { + display: flex; + justify-content: center; + align-items: center; + .floatToolItem { + margin: 6px; + width: 46px; + border-radius: 5px; + text-align: center; + flex: 1; + font-size: 14px; + .imgBox { + height: 18px; + width: 18px; + text-align: center; + margin: 0 auto; + margin-bottom: 5px; + } + } + .layOutTool { + padding-left: 15px; + border-left: 1px solid #e0e0e0; + } + } } .dialogToolBox { position: fixed; z-index: 2; - .toolSelectBox { height: 57px; display: flex; @@ -2708,6 +3471,14 @@ } } } +.lineDeleteBox { + position: fixed; + z-index: 2; + border: 1px solid #0093ff; + padding: 20px 8px; + background: #fff; + border-radius: 5px; +} .wendabox { width: 100%; height: 700px; @@ -2719,7 +3490,8 @@ .myDialogs, .myNoteDialogs, -.resourDialog { +.resourDialog, +.baiduDialog { padding: 0 !important; border-radius: 10px !important; overflow: hidden; @@ -2754,6 +3526,13 @@ .myNoteDialogs { width: 500px !important; } +.screenshotDialog { + width: 400px !important; +} +.baiduDialog { + width: 90vw; + height: 90vh; +} .noteColorSelectBox { margin-top: 10px; width: 190px; -- Gitblit v1.9.1