From 9833bfa1699c3de44b4af0ece22dd50dda3130bb Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期五, 17 五月 2024 16:21:35 +0800 Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/TextbookReader --- src/views/home.vue | 1283 ++++++++++++++++++++++++++++++++------------------------- 1 files changed, 712 insertions(+), 571 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index a9106f2..b6975c7 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -13,10 +13,10 @@ <!-- 鑿滃崟 --> <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" /> @@ -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 @@ -92,9 +92,14 @@ <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"> + <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 + ref="catalogTree" style="max-width: 600px" default-expand-all="true" :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">{{ 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')"> @@ -140,52 +158,58 @@ </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">{{ 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)" /> + <img :src="shanchu" @click="deleteBtn(item)" /> + </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 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="" v-if="activeMenu == '璧勬簮'"> <div class="resourceBox"> <div class="classification"> <div @@ -210,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> @@ -240,10 +269,7 @@ ><Tickets /></el-icon> </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" v-html="item.resourceName"></div> </div> </el-col> </el-row> @@ -254,7 +280,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,7 +288,7 @@ </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"> @@ -286,7 +312,7 @@ </div> </div> <!-- 鏍囩 --> - <div class="" v-if="activeMenu == 5"> + <div class="" v-if="activeMenu == '鏍囩'"> <div class="list-box"> <div> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> @@ -302,13 +328,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">{{ bookName }}</div> - <div>{{ headerData.process }}%</div> + <div v-if="headerData.totlePage && bookName"> + {{ headerData.process }}/{{ headerData.totlePage }} + </div> </div> <div class="rightBox"> <div class="pageSizeBox"> @@ -316,13 +345,15 @@ <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" @@ -340,7 +371,7 @@ <!-- 鏁欏缁勪欢 --> <div class="toolBox"> <div class="toolTitle"> - <span>{{ toolState.open ? '鏁欏缁勪欢' : '缁勪欢' }}</span> + <span>{{ toolState.open ? '瀛︿範缁勪欢' : '缁勪欢' }}</span> <div class="text"></div> </div> <div class="menuList"> @@ -361,7 +392,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"> @@ -461,7 +492,11 @@ </div> </div> </div> - <div class="brushBox" v-if="floatingToolData.activeToolData == '鐢荤瑪'"> + <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"> @@ -527,7 +562,7 @@ <template #reference> <div class="floatToolItem" @click="toolSelectHandle('huabi')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="huabi2" alt="" /> </div> <div class="text">鐢荤瑪</div> </div> @@ -535,25 +570,34 @@ </el-popover> <el-popover placement="top" width="250" trigger="click"> <div class="popinnerBox"> - <div class="write"> - <div class="characters"> + <div class="lineStyle"> + <div class="lineTypeBox"> <div - :class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'" + :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' ? 'middle active' : 'middle'" + :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' ? 'large active' : 'large'" + :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"> @@ -583,26 +627,10 @@ </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 class="graphBox"> + <div class="graphSelect"> + + </div> <div class="lineStyle"> <div class="colorSelectBox"> @@ -631,25 +659,25 @@ </el-popover> <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> <div class="imgBox"> - <img :src="clearPrevious" alt="" /> + <img :src="clear" alt="" /> </div> <div class="text">姗$毊鎿�</div> </div> <div class="floatToolItem" @click="toolSelectHandle('chexiao')"> <div class="imgBox"> - <img :src="clear" alt="" /> + <img :src="clearPrevious" alt="" /> </div> <div class="text">鎾ら攢</div> </div> <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="chongzuo" alt="" /> </div> <div class="text">閲嶅仛</div> </div> <div class="floatToolItem" @click="toolSelectHandle('qingchu')"> <div class="imgBox"> - <img :src="hide" alt="" /> + <img :src="qingchu2" alt="" /> </div> <div class="text">娓呴櫎</div> </div> @@ -702,7 +730,7 @@ 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> <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog"> @@ -733,17 +761,18 @@ 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> @@ -773,13 +802,15 @@ <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"> <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"> @@ -790,7 +821,7 @@ <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 @@ -823,6 +854,7 @@ import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() const request = inject('request') +const toolClass = inject('toolClass') const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() @@ -884,6 +916,8 @@ 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' @@ -930,10 +964,11 @@ const screenWidth = ref( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ) - +const brushBoxLeft = ref(500) let microApp = null // 寰簲鐢ㄥ疄渚� const bookName = ref('') const bookId = ref(1) +const activeCatalog = ref() onMounted(() => { getCatalogueData() getResourceData() @@ -945,6 +980,7 @@ menuState.open = false toolState.open = false } + brushBoxLeft.value = (screenWidth.value - 450) / 2 window.onresize = () => { return (() => { screenWidth.value = @@ -955,25 +991,53 @@ // 鍔犺浇寰簲鐢� microApp = loadMicroApp(microApps.book1, { sandbox: { - // strictStyleIsolation: true, + strictStyleIsolation: true // experimentalStyleIsolation: true - } - }) - window.qiankunActions.onGlobalStateChange((state, prev) => { - console.log(state, '鐖跺眰') - bookName.value = state.bookName - bookId.value = state.bookId - state.gotoPage + }, + singular: true }) + window.qiankunActions.onGlobalStateChange((state, prev) => { + console.log('鐖跺眰state鍙樺寲', state) + bookName.value = state.bookName + bookId.value = state.bookId + window.qiankunState = state + }) + + // 瀹氫箟鐖跺眰鏂规硶 + 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 + toolActive.value = '' + lineDelete.top = data.y + 20 + lineDelete.left = data.x + } + }, + catalogChange: (data) => { + activeCatalog.value = data.showCatalogList + getSignData() + console.log(data, '绔犺妭鍒囨崲锛氱洰鍓嶆樉绀虹殑涓変釜绔犺妭') + }, + pageChange: (data) => { + // { + // page: 100, + // catalog: 5, + // catalogId: "", + // catalogName: "", + // } + console.log(data, '椤甸潰鍒囨崲锛氱洰鍓嶆樉绀洪〉闈㈠拰瀵瑰簲鐨勭珷鑺備俊鎭�') } }) + // 璋冪敤瀛愬眰鏂规硶 + // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) }) watch( @@ -983,15 +1047,18 @@ if (screenWidth.value < 1180) { menuState.open = false toolState.open = false + floatingToolData.elLeft = 100 + } else { + floatingToolData.elLeft = 300 } } ) watch( () => bookId.value, (val) => { - getNotesList() // 鑾峰彇绗旇 - getlineHeightList() //鑾峰彇楂樹寒 - getScribeList() //鑾峰彇鍒掔嚎 + getNotesList() // 鑾峰彇鑿滃崟绗旇 + // getlineHeightList() //鑾峰彇楂樹寒 + // getScribeList() //鑾峰彇鍒掔嚎 getScreenshotList() //鎴浘 } ) @@ -999,11 +1066,15 @@ const catalogueData = ref([]) const getCatalogueData = () => { axios - .get(ctxUrl + '/catalog.json') + .get(resourceUrl + '/1/information.json?t=123') .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 + console.log(json[json.length - 1]) }) .catch(function (error) { console.log(error) @@ -1011,10 +1082,19 @@ } 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) => { - 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) } //鑾峰彇璧勬簮 @@ -1055,7 +1135,7 @@ const testWord = ref('') //word閾炬帴 const getResourceData = () => { axios - .get(ctxUrl + '/resource.json') + .get(resourceUrl + '/1/resource.json') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 @@ -1112,6 +1192,9 @@ resourceDataList.value = resourceDocList.value break } + resourceDataList.value.forEach((item) => { + item.resourceName = '<p>' + htmlStr + '</p>' + }) } const searchBtn = () => { if (searchShow.value) { @@ -1143,31 +1226,33 @@ 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 '涔︾': break } } @@ -1189,6 +1274,13 @@ const selectResourceType = (type) => { resourceType.value = type + if (resourceType.value == 'teacher') { + activeClassify.value = 'image' + resourceDataList.value = [] + } else { + activeClassify.value = 'image' + resourceDataList.value = resourceImgList.value + } } const searchText = ref<string>('') //绛涢�� const menuState = reactive({ @@ -1200,19 +1292,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: [ @@ -1237,7 +1329,9 @@ }) 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 @@ -1251,25 +1345,57 @@ } 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) { + let replaceStr = "<span style='background:#F5E12A'>" + text + '</span>' + let htmlStr = item.resourceName.split(text).join(replaceStr) + item.resourceName = '<p>' + htmlStr + '</p>' + resourceDataList.value.push(item) + } + }) + } else { + resourceDataList.value = [] + switch (activeClassify.value) { + 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 } - }) - } + resourceDataList.value.forEach((item) => { + item.resourceName = '<p>' + htmlStr + '</p>' + }) + } + break + case '鐭ヨ瘑鍥捐氨': + break + case '鎴浘': + getScreenshotList() + break + case '涔︾': + break } } @@ -1396,7 +1522,7 @@ { activeIcon: biaoqian1, icon: biaoqianw, - name: '鏍囩' + name: '涔︾' }, { activeIcon: jieping1, @@ -1467,18 +1593,23 @@ 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 floatItemHandle = (item) => { floatingToolData.activeToolData = item.name - switch (item.name) { + switch (floatingToolData.activeToolData) { case '鐢荤瑪': canvasShow.value = true toolSelectData.activeTool = 'huabi' break - case '鏍囩': + case '鏍囨敞': + break + case '涔︾': + reMark() break case '鎴睆': jitT() @@ -1553,9 +1684,11 @@ toolSelectData.fontSizeActive = str } -//鏍囩鏄剧ず闅愯棌 +//鏍囨敞鏄剧ず闅愯棌 const labelShow = (str) => {} +//涔︾ +const reMark = () => {} //鎴浘 //鎴浘浜嬩欢 function jitT() { @@ -1576,13 +1709,15 @@ console.log(base64) floatingToolData.activeToolData = '' } +//淇濆瓨鎴浘 const addScreenshot = () => { if (nameData.value) { - screenshotList.value.push({ + screenshotData.value.push({ createDate: new Date(), imgUrl: urlData.value, name: nameData.value }) + screenshotLoading.value = true request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', @@ -1591,17 +1726,22 @@ { domain: 'screenshot', key: bookId.value, - value: JSON.stringify(screenshotList.value) + 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 + }) + .catch(function (error) { + screenshotLoading.value = false + }) } else { ElMessage.error('鎴浘鍚嶇О涓嶈兘涓虹┖!') } @@ -1620,25 +1760,60 @@ } }).then((res) => { if (res && res.length > 0 && res[0].value) { - screenshotList.value = JSON.parse(res[0].value) + screenshotList.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) + } + } else { + screenshotList.value.push(item) + } + }) + console.log(screenshotList.value,"124") } }) } +//鏌ョ湅鎴浘 const getCapture = (item) => { imgUrl.value = item.imgUrl confirmDialog.value = true } +//鍒犻櫎鎴浘 +const deleteScreenshot = (item) => { + let list = screenshotList.value.filter((itemData) => itemData.imgUrl !== item.imgUrl) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'screenshot', + key: bookId.value, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎鎴浘鎴愬姛!', + type: 'success' + }) + getScreenshotList() + }) +} //閫変腑鏂囧瓧宸ュ叿鏍� -const selectText = ref('') //閫変腑鏂囧瓧 -const selectNode = ref(null) -const selectPage = ref(1) const showToolBox = ref(false) const dialogToolData = reactive({ left: 500, top: 300, + txt: '', + page: '', chapter: '', //閫変腑鏂囧瓧鎵�鍦ㄧ珷鑺� - parentNode: null, lineHeight: [], //楂樹寒 scribeList: [], //鍒掔嚎 notesList: [] //绗旇 @@ -1647,30 +1822,18 @@ ///鍐呭閫変腑 const getSelection = (data) => { if (data.txt) { - console.log(data.node, 'data') + dialogToolData.txt = data.txt + dialogToolData.page = data.page + dialogToolData.chapter = data.chapterNum + dialogToolData.left = data.x + dialogToolData.top = data.y showToolBox.value = true - selectText.value = data.txt - selectNode.value = data.node.innerHTML - selectPage.value = data.page } -} - -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 noteColorActive = ref('') const dialogToolList = reactive([ { icon: gaoliang, activeIcon: gaoliang1, name: '楂樹寒' }, { icon: huaxian, activeIcon: huaxian1, name: '鍒掔嚎' }, @@ -1679,7 +1842,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: '缈昏瘧' } ]) @@ -1708,7 +1871,9 @@ //绗旇寮圭獥 const addNoteVisble = ref(false) +const isUpdate = ref(false) const formData = reactive({ + id: '', desc: '' }) //绗旇寮圭獥鍏抽棴 @@ -1794,9 +1959,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 @@ -1812,7 +1978,7 @@ case '澶嶅埗': try { //澶嶅埗 - await toClipboard(selectText.value) + await toClipboard(dialogToolData.txt) //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣� ElMessage({ message: '澶嶅埗鎴愬姛', @@ -1828,6 +1994,7 @@ cidianVisible.value = true break case '鐧剧': + console.log('https://baike.baidu.com/item/' + dialogToolData.txt) baiduVisible.value = true break } @@ -1835,237 +2002,215 @@ const clickSelect = (item) => { colorActive.value = item.key - if (toolActive.value == '楂樹寒') { - let lineHeightData = { - selectNode: selectNode.value, - selectText: selectText.value, - selectPage: selectPage.value, - color: colorActive.value, - chapter: dialogToolData.chapter, - createDate: new Date() - } - dialogToolData.lineHeight.push(lineHeightData) - console.log(dialogToolData.lineHeight, '鍓峮ode') - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'highLight', - key: bookId.value, - 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, - selectPage: selectPage.value, - color: colorActive.value, - chapter: dialogToolData.chapter, - createDate: new Date() - }) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'underline', - key: bookId.value, - 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 (!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, +const addUserKey = () => { + let dom = '' + let data = null + switch (toolActive.value) { + case '楂樹寒': + dom = 'highLightData-' + bookId.value + 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 + 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-' + bookId.value + 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, '') }) - 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 - } + + 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 getNotesList = () => { - scribeData.noteList = [] - scribeData.loading = true + +const getSignData = () => { request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'notes', - keys: [bookId.value] + domain: 'highLightData-' + bookId.value, + keys: activeCatalog.value.map((item) => item + '') } }).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 (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) + } + } + } + }) + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'notes-' + 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.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-' + bookId.value, + 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') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) + itemList = list + } else if (item.color == menuState.notesColor) { + itemList.push(item) } } - } else { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - //椤甸潰娣诲姞绗旇 - 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 + }) + } + if (data.chapter == Number(item.key) && itemList.length > 0) { + scribeData.noteList.push({ + chapter: data.chapter, + chapterName: data.label, + noteList: itemList + }) } } - } - }) -} -//楂樹寒 -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 - } - } + console.log(scribeData.noteList, 'scribeData.noteList') } }) } @@ -2076,171 +2221,139 @@ top: 0, left: 0, deleteType: '', - deleteTxt: '' + 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 - 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() - }) +// 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� +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 jumpContent = (id) => { - document.getElementById(id).scrollIntoView() -} - -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 - 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: 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 delUserKey = () => { + let type = lineDelete.deleteType + let ids = lineDelete.id + let dom = '' + let data = null + switch (type) { + case 'Highlight': + dom = 'highLightData-' + bookId.value + data = dialogToolData.lineHeight + break + case 'Dashing': + dom = 'underline-' + bookId.value + data = dialogToolData.scribeList + break } -} - -//鍒犻櫎鎴浘 -const deleteScreenshot = (item) => { - let list = screenshotList.value.filter((itemData) => itemData.imgUrl !== item.imgUrl) + let list = data[dialogToolData.chapter].filter((item) => item.id != ids) request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', data: { setKeyRequests: [ { - domain: 'screenshot', - key: bookId.value, + 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 + } + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookId.value, + 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) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes-' + bookId.value, + key: item.chapterNum, value: JSON.stringify(list) } ] } }).then((res) => { ElMessage({ - message: '鍒犻櫎鎴浘鎴愬姛!', + message: '鍒犻櫎绗旇鎴愬姛!', type: 'success' }) - getScreenshotList() + getNotesList() + if (window.qiankunState && window.qiankunState.delSign) { + window.qiankunState.delSign({ ids: [item.id] }) + } }) } + //鍐呭鍖哄煙椤堕儴鏄剧ず const headerData = reactive({ @@ -2249,6 +2362,7 @@ minutes: 0, hours: 0, process: 0, + totlePage: 0, pageSize: 100 }) //涓婅鏃堕暱璁℃椂鍣� @@ -2280,16 +2394,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> @@ -2399,7 +2518,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 { @@ -2416,10 +2535,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 { @@ -2446,6 +2568,7 @@ } .inputBox { margin-top: 10px; + width: 100% !important; } } .resourceTab { @@ -2479,11 +2602,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 { @@ -2680,9 +2805,7 @@ 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; @@ -2690,6 +2813,9 @@ overflow: hidden; } } + } + .chapterName { + margin: 15px; } } } @@ -2719,6 +2845,7 @@ padding: 0 20px; background: #fff; display: flex; + z-index: 99; align-items: center; justify-content: space-between; .classTime { @@ -2739,8 +2866,9 @@ .progress { text-align: center; .bookName { - font-weight: bold; - margin-bottom: 3px; + font-weight: 800; + margin-bottom: 5px; + color: #333; } } .rightBox { @@ -2749,14 +2877,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; @@ -2772,14 +2905,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%; @@ -2837,11 +2974,13 @@ 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); + display: flex; + align-items: center; + justify-content: center; + img { height: 10px; width: 18px; @@ -2918,7 +3057,7 @@ height: 310px; top: 300px; left: 450px; - z-index: 99; + z-index: 2000; border-radius: 10px; padding: 5px; overflow: hidden; @@ -2929,6 +3068,7 @@ align-items: center; border-radius: 5px; color: #fff; + cursor: pointer; img { margin-right: 8px; } @@ -2945,7 +3085,7 @@ .brushBox { position: fixed; - left: 500px; + // left: 40%; bottom: 20px; z-index: 99; border-radius: 5px; @@ -2958,14 +3098,15 @@ justify-content: center; align-items: center; .floatToolItem { - margin: 10px; - width: 48px; + margin: 6px; + width: 46px; border-radius: 5px; text-align: center; flex: 1; + font-size: 14px; .imgBox { - height: 22px; - width: 22px; + height: 18px; + width: 18px; text-align: center; margin: 0 auto; margin-bottom: 5px; -- Gitblit v1.9.1