From c66e9eaa87989cd0b312fa1d8777a4bf799db0da Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期四, 25 四月 2024 14:40:34 +0800 Subject: [PATCH] 问题修改 --- src/views/home.vue | 649 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 599 insertions(+), 50 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index ec58c69..7f172d6 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -17,6 +17,7 @@ </div> <p>{{ item.name }}</p> </div> + <div class="reload hover" @click="reload()">鍒锋柊</div> <!-- 璁剧疆 --> <el-popover placement="right" :width="200" trigger="click"> <div class="settingBox"> @@ -40,16 +41,29 @@ <!-- 鑿滃崟鍐呭 --> <div class="menuContent" v-if="menuState.open"> <div class="searchBox"> - <div class="inputBox"> - <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�"> + <div class="inputBox" v-if="activeMenu !== 2"> + <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText"> <template #prefix> - <el-icon><Search /></el-icon> + <el-icon @click="searchBook"><Search /></el-icon> </template> </el-input> </div> + <div v-else class="resourceTab"> + <div class="tabItem hover" @click="selectResourceType('default')"> + <p>榛樿璧勬簮</p> + <div :class="resourceType == 'default' ? 'text' : 'line'"></div> + </div> + <hr class="hr" /> + <div class="tabItem hover" @click="selectResourceType('teacher')"> + <p>鏁欏笀璧勬簮</p> + <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div> + </div> + </div> </div> <!-- 鐩綍 --> - <div class="" v-if="activeMenu == 0"></div> + <div class="menuList" v-if="activeMenu == 0"> + <front006 /> + </div> <!-- 绗旇 --> <div class="notesBox" v-if="activeMenu == 1"> <div class="screenBox"> @@ -69,15 +83,87 @@ ></div> </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 hover" + @mouseenter="showDeleteBox(item, 'note')" + @mouseleave="handleDeleteBox(item, 'note')" + > + <div class="itemBox noteStyle"> + <!-- <div class="flex ai-c jc-sb"> + <span class="createDate">{{ item.createDate }}</span> + </div> --> + <div class="textBox"> + <div class="chapter"> + <span>{{ item.name }}</span + ><span class="chapterName">{{ item.chapter }}</span> + </div> + <!-- <div class="textConNote flex"> + <div class="border"></div> + <div class="text">{{ item.selectText }}</div> + </div> --> + <div class="noteText flex"> + <!-- <div class="label">绗旇:</div> --> + <div class="con">{{ item.note }}</div> + </div> + </div> + </div> + <div class="deleteBox" v-show="item.deleteBox" @click="deleteBtn(item, 'note')"> + <span + ><el-icon> <Delete /> </el-icon><span>鍒犻櫎</span></span + > + </div> + </div> + </div> + <div v-if="scribeData.noteList.length == 0 && !scribeData.loading"> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> </div> <!-- 璧勬簮 --> - <div class="" v-if="activeMenu == 2"></div> + <div class="" v-if="activeMenu == 2"> + <div class="resourceBox"> + <div class="inputBox"> + <el-input class="custom-input" placeholder="璇疯緭鍏ュ唴瀹�" v-model="searchText"> + <template #prefix> + <el-icon @click="searchBook"><Search /></el-icon> + </template> + </el-input> + </div> + </div> + <div class="list-box"> + <div> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> + </div> <!-- 鐭ヨ瘑鍥捐氨 --> - <div class="" v-if="activeMenu == 3"></div> + <div class="" v-if="activeMenu == 3"> + <div class="list-box"> + <div> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> + </div> <!-- 鎴浘 --> - <div class="" v-if="activeMenu == 4"></div> + <div class="" v-if="activeMenu == 4"> + <div class="list-box"> + <div> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> + </div> <!-- 鏍囩 --> - <div class="" v-if="activeMenu == 5"></div> + <div class="" v-if="activeMenu == 5"> + <div class="list-box"> + <div> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> + </div> + </div> </div> <!-- 鑿滃崟鍐呭鏀惰捣 --> <div class="menuStateBox" v-if="menuState.open"> @@ -100,13 +186,12 @@ </div> <div class="brushImgBox"> <div><img :src="huabi2" class="brushImg" />鐢荤瑪</div> - <!-- <el-switch v-model="headerData.brushToolShow" @change="brushToolShow"/> --> </div> </div> </div> <!-- 寰簲鐢ㄧ洅瀛� --> <div class="pageBox-content"> - <div id="container"></div> + <div id="container" @mouseup="handleMouseUp"></div> <!-- 鐢荤瑪鐢诲竷 --> <div class="canvas-box"> <canvas @@ -375,7 +460,13 @@ </div> </div> </div> - <el-dialog title="娣诲姞绗旇" v-model="addNoteVisble" width="400"> + <el-dialog + title="娣诲姞绗旇" + align-center + v-model="addNoteVisble" + :before-close="handleClose" + class="myNoteDialogs" + > <div class="formBox"> <el-form ref="form" :model="formData" label-width="80px"> <el-form-item label="绗旇鏍囬"> @@ -388,32 +479,38 @@ </div> <template #footer> <span class="dialog-footer"> - <el-button @click="addNoteVisble = false">鍙� 娑�</el-button> + <el-button @click="handleClose">鍙� 娑�</el-button> <el-button type="primary" @click="addNote">纭� 瀹�</el-button> </span> </template> </el-dialog> - <el-dialog title="AI鏅鸿兘闂瓟" v-model="wendaVisible" width="26%"> + <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="26%" class="myDialogs"> <div class="wendabox"> <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog title="璇嶅吀" v-model="cidianVisible" width="60%"> + <el-dialog title="璇嶅吀" align-center v-model="cidianVisible" width="60%" class="myDialogs"> <div class="wendabox"> <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog title="GGB鍑芥暟宸ュ叿" v-model="functionVisible" width="60%"> + <el-dialog + title="GGB鍑芥暟宸ュ叿" + align-center + v-model="functionVisible" + width="60%" + class="myDialogs" + > <div class="wendabox"> <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog title="鎬濈淮瀵煎浘" v-model="siweiVisble" width="80%"> + <el-dialog title="鎬濈淮瀵煎浘" align-center v-model="siweiVisble" width="80%" class="myDialogs"> <div class="wendabox"> <iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe> </div> </el-dialog> - <el-dialog title="妯″瀷宸ュ叿" v-model="modelToolVisble" width="80%"> + <el-dialog title="妯″瀷宸ュ叿" align-center v-model="modelToolVisble" width="80%" class="myDialogs"> <div class="wendabox"> <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe> </div> @@ -421,7 +518,16 @@ </template> <script setup lang="ts"> -import { ref, reactive, watch, onMounted } from 'vue' +import { ref, reactive, watch, onMounted, inject } from 'vue' +import { useRouter, useRoute } from 'vue-router' +import useClipboard from 'vue-clipboard3' +const { toClipboard } = useClipboard() +const request = inject('request') +//鑾峰彇璺敱鍣� +let $router = useRouter() +//鑾峰彇褰撳墠璺敱鐨勪俊鎭� +let $route = useRoute() +import moment from 'moment' import { ElMessage } from 'element-plus' import mulu from '@/assets/images/menu/mulu.png' import biji from '@/assets/images/menu/biji.png' @@ -492,11 +598,13 @@ import zoomIn from '../assets/images/operation/zoomIn.png' import zoomOut from '../assets/images/operation/zoomOut.png' import huabi2 from '../assets/images/operation/huabi.svg' +import front006 from '@/views/components/front006.vue' import { start } from 'qiankun' + onMounted(() => { - - start() - + getNotesList() // 鑾峰彇楂樹寒 + getlineHeightList() //鑾峰彇楂樹寒 + getScribeList() //鑾峰彇鍒掔嚎 }) // 鑿滃崟 const menuData = reactive([ @@ -527,16 +635,28 @@ ]) // 閫変腑鑿滃崟 const activeMenu = ref(0) +//璧勬簮绫诲瀷 +const resourceType = ref('default') // 鑿滃崟鐐瑰嚮 const menuItemClick = (index) => { activeMenu.value = index menuState.open = true } +//鍒锋柊褰撳墠椤甸潰 +const reload = () => { + location.reload() +} + +const selectResourceType = (type) => { + resourceType.value = type +} +const searchText = ref<string>('') //绛涢�� const menuState = reactive({ open: true, - notesColor: '' + notesColor: 'all' //绗旇棰滆壊 }) + const settingForm = reactive({ acoustics: false, animation: false @@ -547,6 +667,11 @@ menuState.notesColor = item.key } else { menuState.notesColor = 'all' + } +} +const searchBook = async () => { + if (activeMenu.value == 1) { + getNotesList() } } @@ -843,11 +968,37 @@ //閫変腑鏂囧瓧宸ュ叿鏍� const selectText = ref('') //閫変腑鏂囧瓧 +const selectNode = ref(null) const showToolBox = ref(false) const dialogToolData = reactive({ left: 500, - top: 300 + top: 300, + chapter: '', //閫変腑鏂囧瓧鎵�鍦ㄧ珷鑺� + lineHeight: [], //楂樹寒 + scribeList: [], //鍒掔嚎 + notesList: [] //绗旇 }) + +//璋冪敤瀛愬簲鐢ㄦ枃瀛楅�変腑浜嬩欢 +// const subApp = start() +// subApp.handleMouseUp() + +//閫変腑鏂囧瓧 +const handleMouseUp = (e) => { + const txt = window.getSelection()?.toString() + selectText.value = txt + const node = window.getSelection() + console.log(node, 'temp_node') + let html = node.baseNode.parentNode.parentNode + dialogToolData.chapter = html.firstChild.innerHTML + console.log(dialogToolData.chapter) + selectNode.value = node + if (txt) { + showToolBox.value = true + dialogToolData.top = e.y + dialogToolData.left = e.x + } +} const toolActive = ref('楂樹寒') const colorActive = ref('') const dialogToolList = reactive([ @@ -885,9 +1036,22 @@ //绗旇寮圭獥 const addNoteVisble = ref(false) -const formData = ref({ +const formData = reactive({ name: '', desc: '' +}) +//绗旇寮圭獥鍏抽棴 +const handleClose = () => { + addNoteVisble.value = false + showToolBox.value = false + colorActive.value = '' +} + +//绗旇锛岄珮浜紝鍒掔嚎 +const scribeData = reactive({ + scribeDataList: [], //鍒掔嚎鑿滃崟鍒楄〃 + lineHeightList: [], //楂樹寒鑿滃崟鍒楄〃 + noteList: [] //绗旇鑿滃崟鍒楄〃 }) //璇嶅吀 @@ -951,7 +1115,7 @@ break } } -const dialogToolHandle = (item) => { +const dialogToolHandle = async (item) => { toolActive.value = item.name colorActive.value = '' switch (item.name) { @@ -965,23 +1129,25 @@ case '楂樹寒': break case '绗旇': - formData.value.name = '' - formData.value.desc = '' + formData.name = '' + formData.desc = '' break case '鏍囨敞': break case '澶嶅埗': try { - var successful = document.execCommand('copy') //鎵ц澶嶅埗鍛戒护 - var msg = successful ? '鎴愬姛' : '澶辫触' - ElMessage.success({ - message: '宸插鍒舵枃鏈�', + //澶嶅埗 + await toClipboard(selectText.value) + //涓嬮潰鍙互璁剧疆澶嶅埗鎴愬姛鐨勬彁绀烘绛夋搷浣� + ElMessage({ + message: '澶嶅埗鎴愬姛', type: 'success' }) } catch (err) { ElMessage.error('鏃犳硶澶嶅埗鏂囨湰锛�' + err) } showToolBox.value = false + toolActive.value = '楂樹寒' break case '璇嶅吀': cidianVisible.value = true @@ -994,6 +1160,253 @@ if (toolActive.value == '绗旇') { addNoteVisble.value = true } + if (toolActive.value == '楂樹寒') { + let heightLightElement = document.createElement("i"); + heightLightElement.style.backgroundColor = colorActive.value; + heightLightElement.innerText = selectText.value; + let rReg = new RegExp(`${selectText.value}`, "ig"); + console.log(selectNode.value) + let textDom = selectNode.value.anchorNode.parentNode; + console.log(textDom) + let text = textDom.innerHTML; + let rHtml = ""; + rHtml = text.replace( + rReg, + `<span style="background: ${colorActive.value};">${selectText.value}</span>` + ); + textDom.innerHTML = rHtml; + dialogToolData.lineHeight.push({ + selectNode: selectNode.value, + selectText: selectText.value, + color: colorActive.value, + chapter: dialogToolData.chapter, + color: item.key, + createDate: new Date() + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'highLight', + key: '1', + value: JSON.stringify(dialogToolData.lineHeight) + } + ] + } + }).then((res) => { + showToolBox.value = false + colorActive.value = '' + toolActive.value = '楂樹寒' + getlineHeightList() + setTimeout(() => { + lock.value = false + }, 1000) + }) + } + if (toolActive.value == '鍒掔嚎') { + dialogToolData.scribeList.push({ + selectNode: selectNode.value, + selectText: selectText.value, + color: colorActive.value, + chapter: dialogToolData.chapter, + color: item.key, + createDate: new Date() + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'underline', + key: '1', + value: JSON.stringify(dialogToolData.scribeList) + } + ] + } + }).then((res) => { + colorActive.value = '' + showToolBox.value = false + toolActive.value = '楂樹寒' + getScribeList() + setTimeout(() => { + lock.value = false + }, 1000) + }) + } +} + +const lock = ref(false) +const addNote = () => { + const obj = { + name: formData.name, + desc: formData.desc + } + if (!lock.value) { + lock.value = true + if (formData.desc.replace(/^\s*|\s*$/g, '')) { + if (formData.name.replace(/^\s*|\s*$/g, '')) { + dialogToolData.notesList.push({ + selectNode: selectNode.value, + selectText: selectText.value, + color: colorActive.value, + chapter: dialogToolData.chapter, + createDate: new Date(), + name: formData.name.replace(/^\s*|\s*$/g, ''), + note: formData.desc.replace(/^\s*|\s*$/g, '') + }) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes', + key: '1', + 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 + } + } else { + ElMessage.error('绗旇鍐呭涓嶈兘涓虹┖!') + lock.value = false + } + } +} +//绗旇 +const getNotesList = () => { + scribeData.noteList = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'notes', + keys: ['1'] + } + }).then((res) => { + if (res && res.length > 0 && res[0].value) { + dialogToolData.notesList = JSON.parse(res[0].value) + let list = JSON.parse(res[0].value) + list.forEach((item) => { + 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) + } + } + }) + + console.log(scribeData.noteList) + } + }) +} +//鍒掔嚎 +const getScribeList = () => { + scribeData.scribeDataList = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'underline', + keys: ['1'] + } + }).then((res) => { + if (res && res.length > 0 && res[0].value) { + dialogToolData.scribeList = JSON.parse(res[0].value) + scribeData.scribeDataList = JSON.parse(res[0].value) + } + }) +} +//楂樹寒 +const getlineHeightList = () => { + scribeData.lineHeightList = [] + request({ + url: '/identity/api/ApiGetAppUserKey', + method: 'post', + data: { + domain: 'highLight', + keys: ['1'] + } + }).then((res) => { + if (res && res.length > 0 && res[0].value) { + dialogToolData.lineHeight = JSON.parse(res[0].value) + scribeData.lineHeightList = JSON.parse(res[0].value) + } + }) +} + +//鍒犻櫎楂樹寒/鍒掔嚎 +//榧犳爣绉诲叆鏄剧ず鍒犻櫎鎸夐挳 +const showDeleteBox = (item, type) => { + if (type == 'note') { + if (item.deleteBox == false) { + scribeData.noteList.forEach((i) => { + i.deleteBox = false + }) + item.deleteBox = true + } + } +} +//榧犳爣绉诲嚭 +const handleDeleteBox = (item) => { + item.deleteBox = false +} +//鍒犻櫎 +const deleteBtn = (item, type) => { + if (type == 'note') { + // 绉婚櫎 + let index = scribeData.noteList.findIndex((itemData) => itemData.text == item.text) + if (index > -1) { + scribeData.noteList.splice(index, 1) + request({ + url: '/identity/api/ApiAppUserSetKey', + method: 'post', + data: { + setKeyRequests: [ + { + domain: 'notes', + key: '1', + value: JSON.stringify(scribeData.noteList) + } + ] + } + }).then((res) => { + ElMessage({ + message: '鍒犻櫎绗旇鎴愬姛!', + type: 'success' + }) + getNotesList() + }) + } + } } //鍐呭鍖哄煙椤堕儴鏄剧ず @@ -1004,8 +1417,7 @@ minutes: 0, hours: 0, process: '42%', - pageSize: 100, - brushToolShow: true + pageSize: 100 }) //涓婅鏃堕暱璁℃椂鍣� const timer = ref(null) @@ -1040,13 +1452,6 @@ headerData.pageSize = Number(headerData.pageSize) + 5 } else { headerData.pageSize = Number(headerData.pageSize) - 5 - } -} - -const brushToolShow = () => { - console.log(headerData.brushToolShow, 123) - if (headerData.brushToolShow) { - ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D } } </script> @@ -1101,6 +1506,12 @@ margin-bottom: 4px; } } + .reload { + width: 80px; + position: absolute; + bottom: 100px; + text-align: center; + } .setting { width: 80px; position: absolute; @@ -1120,15 +1531,56 @@ display: flex; justify-content: center; align-items: center; - .inputBox { - .custom-input { - border: 1px solid #0093ff !important; - border-radius: 50px; - overflow: hidden; - } - .is-focus, - .el-input__wrapper { - box-shadow: none !important; + } + .resourceBox { + width: 100%; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + } + .resourceTab { + width: 100%; + height: 60px; + display: flex; + justify-content: center; + align-items: center; + font-size: 16px; + .hr { + height: 25px; + color: #dbdbdb !important; + } + .tabItem:first-child(1) { + border-right: 1px solid #707070; + } + .tabItem { + flex: 1; + text-align: center; + line-height: 57px; + } + .text { + width: 43px; + height: 3px; + margin: 0 auto; + background: #0093ff; + border-radius: 3px 3px 0px 0px; + } + .line { + height: 3px; + } + } + .inputBox { + .custom-input { + border: 1px solid #0093ff !important; + border-radius: 50px; + overflow: hidden; + } + .is-focus, + .el-input__wrapper { + box-shadow: none !important; + .el-input__inner { + border: none !important; + height: 34px !important; } } } @@ -1185,10 +1637,68 @@ border: 1px solid #0093ff; } } + .menuList { + height: calc(100% - 60px); + overflow-y: auto; + padding: 10px; + } + .list-box { + .listItem { + border-bottom: 1px solid rgba(212, 212, 212, 0.16); + position: relative; + padding: 10px; + line-height: 20px; + .textBox { + padding: 15px 10px; + .chapter { + color: #0093ff; + } + .chapterName{ + float: right; + } + } + .noteText { + text-indent: 2ch; + margin-top: 5px; + .label { + width: 40px; + flex-shrink: 0; + } + + .con { + max-height: 65px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + } + } + .deleteBox { + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 70px; + background-color: #0093ff; + color: #fff; + display: flex; + align-items: center; + + span { + margin: 0 auto; + } + + .el-icon { + margin-right: 5px; + } + } + } + } } .menuStateBox { width: 25px; height: 25px; + background: #fff; border-radius: 3px 0px 0px 3px; border: 1px solid #bce3ff; position: fixed; @@ -1259,6 +1769,7 @@ .pageBox-content { height: calc(100% - 57px); position: relative; + overflow-y: auto; #container { background: #fbf9f4; height: 100%; @@ -1339,6 +1850,7 @@ .el-tabs__item { flex: 1 !important; padding: 0 !important; + text-align: center; } .el-tabs__active-bar { width: 43px !important; @@ -1392,7 +1904,8 @@ width: 85px; background-image: linear-gradient(to bottom, #0093ff, #005dff); position: fixed; - height: 430px; + // height: 430px; + height: 130px; top: 300px; left: 400px; z-index: 999; @@ -1413,6 +1926,9 @@ margin-right: 5px; } } + } + .draggableBox:hover { + height: 430px; } .floatToolItem:hover { background-color: #fff; @@ -1491,4 +2007,37 @@ height: 100%; } } +.myNoteDialogs { + width: 400px !important; +} +.myDialogs { + width: 628px; + + .el-dialog__header { + padding: 15px; + margin-right: 0; + border-bottom: 1px solid #f4f4f4; + } + + .el-dialog__title { + font-weight: bold; + font-size: 16px; + } + + .el-dialog__headerbtn { + top: 6px; + right: 6px; + } + + .el-dialog__footer { + padding: 15px; + border-top: 1px solid #f4f4f4; + } + + .myDialogs-footer { + .el-button { + padding: 0 20px; + } + } +} </style> -- Gitblit v1.9.1