From 1d88745fc1d5b2a62a6f2b9bca765c76ea48427c Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期三, 15 五月 2024 21:30:53 +0800 Subject: [PATCH] sc --- src/views/home.vue | 526 ++++++++++++++++++++++++++-------------------------------- 1 files changed, 235 insertions(+), 291 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 7cf65a4..118f144 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -144,8 +144,8 @@ </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 v-if=" scribeData.noteList.length > 0"> + <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem"> <div class="textBox"> <div class="title"> <div class="title-con"> @@ -153,8 +153,8 @@ <span>{{ item.createDate }}</span> </div> <div> - <img :src="bianji" @click="update(item, 'note')" /> - <img :src="shanchu" @click="deleteBtn(item, 'note')" /> + <img :src="bianji" @click="update(item)" /> + <img :src="shanchu" @click="deleteBtn(item)" /> </div> </div> <div @@ -179,11 +179,11 @@ {{ item.note }} </div> </div> - <div class="chapter">{{ item.selectText }}</div> + <div class="chapter">{{ item.txt }}</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> @@ -321,12 +321,14 @@ <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div> </div> <div class="brushImgBox"> - <div><img :src="huabi2" class="brushImg" />鐢荤瑪</div> + <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" @@ -706,7 +708,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"> @@ -737,17 +739,17 @@ 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">纭� 瀹�</el-button> </span> </template> </el-dialog> @@ -827,6 +829,7 @@ import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() const request = inject('request') +const toolClass = inject('toolClass') const qiankunActions = inject('qiankunActions') //鑾峰彇璺敱鍣� let router = useRouter() @@ -938,6 +941,7 @@ let microApp = null // 寰簲鐢ㄥ疄渚� const bookName = ref('') const bookId = ref(1) +const activeCatalog = ref() onMounted(() => { getCatalogueData() getResourceData() @@ -959,9 +963,10 @@ // 鍔犺浇寰簲鐢� microApp = loadMicroApp(microApps.book1, { sandbox: { - // strictStyleIsolation: true, + strictStyleIsolation: true // experimentalStyleIsolation: true - } + }, + singular: true }) window.qiankunActions.onGlobalStateChange((state, prev) => { @@ -978,9 +983,15 @@ windowSelection: (data) => { // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 console.log(data, '瀛愬簲鐢ㄩ�夋嫨') - getSelection(data) + if(data.txt){ + getSelection(data) + }else{ + showToolBox.value = false + } }, catalogChange: (data) => { + activeCatalog.value = data.showCatalogList + getSignData() console.log(data, '绔犺妭鍒囨崲锛氱洰鍓嶆樉绀虹殑涓変釜绔犺妭') }, pageChange: (data) => { @@ -991,9 +1002,9 @@ // catalogName: "", // } console.log(data, '椤甸潰鍒囨崲锛氱洰鍓嶆樉绀洪〉闈㈠拰瀵瑰簲鐨勭珷鑺備俊鎭�') - } + }, + }) - // 璋冪敤瀛愬眰鏂规硶 // if (window.qiankunState && window.qiankunState.aa) window.qiankunState.aa(1) }) @@ -1011,21 +1022,22 @@ watch( () => bookId.value, (val) => { - getNotesList() // 鑾峰彇绗旇 - getlineHeightList() //鑾峰彇楂樹寒 - getScribeList() //鑾峰彇鍒掔嚎 - getScreenshotList() //鎴浘 + // getNotesList() // 鑾峰彇绗旇 + // getlineHeightList() //鑾峰彇楂樹寒 + // getScribeList() //鑾峰彇鍒掔嚎 + // getScreenshotList() //鎴浘 } ) //鑾峰彇鐩綍 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 }) .catch(function (error) { console.log(error) @@ -1077,7 +1089,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鏁版嵁 @@ -1181,7 +1193,7 @@ case '0': break case '1': - getNotesList() + // getSignData() break case '2': break @@ -1271,11 +1283,13 @@ } else { menuState.notesColor = 'all' } - getNotesList() + // getNotesList() } const searchBook = async () => { if (activeMenu.value == 1) { - getNotesList() + // getNotesList() + getSignData() + } if (activeMenu.value == 2) { let dataList = JSON.parse(JSON.stringify(resourceDataList.value)) @@ -1693,14 +1707,13 @@ //閫変腑鏂囧瓧宸ュ叿鏍� 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: [] //绗旇 @@ -1709,30 +1722,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: '鍒掔嚎' }, @@ -1897,239 +1898,154 @@ 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] + data.push({ + id: toolClass.uuid(8), + txt: dialogToolData.txt, + page: dialogToolData.page, + type: 'Highlight', + color: colorActive.value + }) + break + case '鍒掔嚎': + dom = 'underline-' + bookId.value + data = dialogToolData.scribeList[dialogToolData.chapter] + data.push({ + id: toolClass.uuid(8), + txt: dialogToolData.txt, + page: dialogToolData.page, + 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.length != 0 ? dialogToolData.notesList[dialogToolData.chapter] : [] + data.push({ + id: toolClass.uuid(8), + txt: dialogToolData.txt, + page: dialogToolData.page, + 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 } -} -//绗旇 -const getNotesList = () => { - scribeData.noteList = [] - scribeData.loading = true request({ - url: '/identity/api/ApiGetAppUserKey', + url: '/identity/api/ApiAppUserSetKey', method: 'post', data: { - domain: 'notes', - keys: [bookId.value] - } - }) - .then((res) => { - if (res && res.length > 0 && res[0].value) { - dialogToolData.notesList = JSON.parse(res[0].value) - let list = JSON.parse(res[0].value) - let textDom1 = document.querySelector('.temp-book') - if (list.length > 0) { - list.forEach((item, index) => { - item.createDate = moment(item.createDate).format('YYYY-MM-DD') - if (searchText.value) { - searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') - let text = searchText.value.replace(/^\s*|\s*$/g, '') - if (item.text.indexOf(text) > -1) { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - } else { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - //椤甸潰娣诲姞绗旇 - 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 - }) + setKeyRequests: [ + { + domain: dom, + key: dialogToolData.chapter, + value: JSON.stringify(data) } - } - scribeData.loading = false - }) - .catch((err) => { - 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 + showToolBox.value = false + addNoteVisble.value = false + colorActive.value = '' + noteColorActive.value = '' + toolActive.value = '' + getSignData() + }) +} - let nHtml1 = '' - nHtml1 = nHtmlText1.replace( - rReg1, - `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer" class="underline" onclick="deleteScribeShow('${item.selectText}')">${item.selectText}</span>` - ) - let rHtml1 = '' - rHtml1 = text1.replace(nHtmlText1, nHtml1) - textDom1.innerHTML = rHtml1 + + +const getSignData = () => { + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'highLightData-' + 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.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) } } } }) -} -//楂樹寒 -const getlineHeightList = () => { - scribeData.lineHeightList = [] request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'highLight', - keys: [bookId.value] + domain: 'underline-' + bookId.value, + keys: activeCatalog.value.map((item) => item + '') } }).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 + 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) + // 鍌ㄥ�� + scribeData.noteList = data + dialogToolData.notesList[item.key] = data + console.log(dialogToolData.notesList,"notesList") + // 娓叉煋 + for (let j = 0; j < data.length; j++) { + const citem = data[j] + if (window.qiankunState && window.qiankunState.renderSign) + window.qiankunState.renderSign(citem.type, citem) } } } @@ -2142,12 +2058,29 @@ top: 0, left: 0, deleteType: '', - deleteTxt: '' + id: '' }) + +// 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� +window.signClick = (type, id)=>{ + console.log("signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�", type, id); + // if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[id]}) + if(type == 'Note'){ + let data = dialogToolData.notesList.filter((item) => id.indexOf(item.id) == -1) + console.log(data) + formData.desc = notes.note + noteColorActive.value = notes.color + addNoteVisble.value = true + }else{ + lineDelete.showLineDelete = true + lineDelete.deleteType = type + lineDelete.id = id + } +} window.notesVisbleShow = function (txt) { addNoteVisble.value = true - let notes = dialogToolData.notesList.find((item) => item.selectText == txt) + let notes = dialogToolData.notesList.find((item) => item.id == id) formData.desc = notes.note colorActive.value = notes.color selectNode.value = notes.selectNode @@ -2155,24 +2088,43 @@ 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 +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 + } + data = data.filter((item) => ids.indexOf(item.id) == -1) + console.log(data[0]) + let list = data[0].filter((item) => item.id != ids) + console.log(list) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: dom, + key: dialogToolData.chapter, + value: JSON.stringify(list) + } + ] + } + }).then((res) => { + if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[ids]}) + getSignData() + }) } -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') { @@ -2242,20 +2194,20 @@ 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.txt = item.txt + dialogToolData.page = item.page + dialogToolData.chapter = item.chapterNum + noteColorActive.value = item.color dialogToolData.chapter = item.chapter formData.desc = item.note addNoteVisble.value = true } //鍒犻櫎 -const deleteBtn = (item, type) => { +const deleteBtn = (item) => { if (type == 'note') { // 绉婚櫎 - let list = scribeData.noteList.filter((itemData) => itemData.selectText !== item.selectText) + let list = dialogToolData.noteList.filter((itemData) => itemData.id !== item.id) request({ url: '/identity/api/ApiAppUserSetKey', method: 'post', @@ -2273,15 +2225,7 @@ 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() - } - }) + if (window.qiankunState && window.qiankunState.delSign) window.qiankunState.delSign({ids:[id]}) getNotesList() }) } -- Gitblit v1.9.1