From c4a189b86db7328d537a7218d5c5a8cb0c95a320 Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期三, 15 五月 2024 21:24:52 +0800 Subject: [PATCH] 目录与搜索 --- src/views/home.vue | 302 +++++++++++++++----------------------------------- 1 files changed, 90 insertions(+), 212 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 6d0bb4a..00fc423 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -92,9 +92,9 @@ <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><Search /></el-icon> </template> </el-input> </div> @@ -113,12 +113,14 @@ <!-- 鐩綍 --> <div class="menuList" v-if="activeMenu == 0"> <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" /> <div v-if="catalogueData.length == 0"> <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> @@ -328,7 +330,7 @@ </div> </div> <!-- 寰簲鐢ㄧ洅瀛� --> - <div class="pageBox-content" @scroll="pageScroll"> + <div class="pageBox-content"> <div class="content-box"> <div id="container" @@ -739,17 +741,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> @@ -779,7 +781,9 @@ <template #footer> <span class="dialog-footer"> <el-button @click="screenshotClose">鍙� 娑�</el-button> - <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading">纭� 瀹�</el-button> + <el-button type="primary" @click="addScreenshot" :loading="screenshotLoading" + >纭� 瀹�</el-button + > </span> </template> </el-dialog> @@ -1028,11 +1032,12 @@ 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) @@ -1042,8 +1047,15 @@ children: 'children', label: 'label' } +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) + if (window.qiankunState && window.qiankunState.gotoPage) + window.qiankunState.gotoPage(data.chapter, data.start) } //鑾峰彇璧勬簮 @@ -1084,7 +1096,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鏁版嵁 @@ -1280,7 +1292,11 @@ } getNotesList() } +const catalogTree = ref() const searchBook = async () => { + if (activeMenu.value == 0) { + if (catalogTree) catalogTree.value.filter(searchText.value) + } if (activeMenu.value == 1) { getNotesList() } @@ -1591,10 +1607,7 @@ const labelShow = (str) => {} //鏍囩 -const reMark =() => { - - -} +const reMark = () => {} //鎴浘 //鎴浘浜嬩欢 function jitT() { @@ -1636,16 +1649,18 @@ } ] } - }).then((res) => { - screenshotLoading.value = false - getScreenshotList() - nameData.value = '' - urlData.value = '' - floatingToolData.activeToolData = '' - screenshotVisble.value = false - }).catch(function (error) { - screenshotLoading.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('鎴浘鍚嶇О涓嶈兘涓虹┖!') } @@ -1724,22 +1739,9 @@ } } -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: '鍒掔嚎' }, @@ -1906,6 +1908,10 @@ colorActive.value = item.key addUserKey() } +//绗旇閫夐鑹� +const clickSelectColor = (item) => { + noteColorActive.value = item.key +} const addUserKey = () => { let dom = '' @@ -1933,6 +1939,29 @@ 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, '') + }) + + break } request({ url: '/identity/api/ApiAppUserSetKey', @@ -1949,6 +1978,7 @@ }).then((res) => { showToolBox.value = false colorActive.value = '' + noteColorActive.value = '' toolActive.value = '' getSignData() }) @@ -1980,7 +2010,6 @@ } }).then((res) => {}) } -const lock = ref(false) const getSignData = () => { request({ @@ -2029,180 +2058,25 @@ } } }) -} - -const addNote = () => { - const obj = { - desc: formData.desc - } - if (!colorActive.value) { - ElMessage.error('璇烽�夋嫨绗旇棰滆壊!') - return - } - if (!lock.value) { - lock.value = true - if (formData.desc.replace(/^\s*|\s*$/g, '')) { - dialogToolData.notesList.push({ - selectNode: selectNode.value, - selectText: selectText.value, - color: colorActive.value, - selectPage: selectPage.value, - chapter: dialogToolData.chapter, - createDate: new Date(), - note: formData.desc.replace(/^\s*|\s*$/g, '') - }) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'notes', - key: bookId.value, - value: JSON.stringify(dialogToolData.notesList) - } - ] - } - }).then((res) => { - showToolBox.value = false - addNoteVisble.value = false - colorActive.value = '' - toolActive.value = '' - getNotesList() - setTimeout(() => { - lock.value = false - }, 1000) - }) - } else { - ElMessage.error('绗旇鍐呭涓嶈兘涓虹┖!') - lock.value = false - } - } -} -//绗旇 -const getNotesList = () => { - scribeData.noteList = [] - scribeData.loading = true request({ url: '/identity/api/ApiGetAppUserKey', method: 'post', data: { - domain: 'notes', - keys: [bookId.value] - } - }) - .then((res) => { - if (res && res.length > 0 && res[0].value) { - dialogToolData.notesList = JSON.parse(res[0].value) - let list = JSON.parse(res[0].value) - let textDom1 = document.querySelector('.temp-book') - if (list.length > 0) { - list.forEach((item, index) => { - item.createDate = moment(item.createDate).format('YYYY-MM-DD') - if (searchText.value) { - searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') - let text = searchText.value.replace(/^\s*|\s*$/g, '') - if (item.text.indexOf(text) > -1) { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - } else { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - //椤甸潰娣诲姞绗旇 - 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 - }) - .catch((err) => { - scribeData.loading = false - }) -} -//鍒掔嚎 -const getScribeList = () => { - scribeData.scribeDataList = [] - request({ - url: '/identity/api/ApiGetAppUserKey', - method: 'post', - data: { - domain: 'underline', - keys: [bookId.value] + domain: 'note-' + bookId.value, + keys: activeCatalog.value.map((item) => item + '') } }).then((res) => { - if (res && res.length > 0 && res[0].value) { - dialogToolData.scribeList = JSON.parse(res[0].value) - scribeData.scribeDataList = JSON.parse(res[0].value) - let textDom1 = document.querySelector('.temp-book') - if (scribeData.scribeDataList.length > 0) { - for (let i = 0; i < scribeData.scribeDataList.length; i++) { - let item = scribeData.scribeDataList[i] - let rReg1 = new RegExp(`${item.selectText}`, 'ig') - let text1 = textDom1.innerHTML - let nHtmlText1 = item.selectNode - - let nHtml1 = '' - nHtml1 = nHtmlText1.replace( - rReg1, - `<span style="text-decoration:underline;text-decoration-style: wavy;text-underline-thickness:2px;text-decoration-color:${item.color};cursor: pointer" class="underline" onclick="deleteScribeShow('${item.selectText}')">${item.selectText}</span>` - ) - let rHtml1 = '' - rHtml1 = text1.replace(nHtmlText1, nHtml1) - textDom1.innerHTML = rHtml1 - } - } - } - }) -} -//楂樹寒 -const getlineHeightList = () => { - scribeData.lineHeightList = [] - request({ - url: '/identity/api/ApiGetAppUserKey', - method: 'post', - data: { - domain: 'highLight', - keys: [bookId.value] - } - }).then((res) => { - if (res && res.length > 0 && res[0].value) { - dialogToolData.lineHeight = JSON.parse(res[0].value) - scribeData.lineHeightList = JSON.parse(res[0].value) - let textDom = document.querySelector('.temp-book') - if (scribeData.lineHeightList.length > 0) { - for (let i = 0; i < scribeData.lineHeightList.length; i++) { - let item = scribeData.lineHeightList[i] - let rReg = new RegExp(`${item.selectText}`, 'ig') - let text = textDom.innerHTML - let nHtmlText = item.selectNode - let nHtml = '' - nHtml = nHtmlText.replace( - rReg, - `<span style="background: ${item.color};padding:3px;cursor: pointer" class="highLight" onclick="deletelineHeightShow('${item.selectText}')">${item.selectText}</span>` - ) - // nHtmlText = nHtml - let rHtml = '' - rHtml = text.replace(nHtmlText, nHtml) - textDom.innerHTML = rHtml + 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) } } } @@ -2217,6 +2091,11 @@ deleteType: '', deleteTxt: '' }) + +// 鍒掔嚎銆佺瑪璁般�侀珮浜偣鍑诲洖璋� +window.signClick = (type, id) => { + console.log('signClick鐐瑰嚮浜嬩欢鍥炶皟鐨勫疄渚�', type, id) +} window.notesVisbleShow = function (txt) { addNoteVisble.value = true @@ -2315,10 +2194,10 @@ 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 @@ -2359,7 +2238,6 @@ }) } } - //鍐呭鍖哄煙椤堕儴鏄剧ず -- Gitblit v1.9.1