From e8628fc49447befea29d46cfbaf35f50b4d9c7d8 Mon Sep 17 00:00:00 2001 From: litian <2804272236@qq.com> Date: 星期三, 15 五月 2024 17:16:35 +0800 Subject: [PATCH] 1 --- src/views/home.vue | 1012 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 697 insertions(+), 315 deletions(-) diff --git a/src/views/home.vue b/src/views/home.vue index 402f91a..7cf65a4 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -117,8 +117,12 @@ default-expand-all="true" :data="catalogueData" :props="defaultProps" + v-if="catalogueData.length > 0" @node-click="handleNodeClick" /> + <div v-if="catalogueData.length == 0"> + <el-empty :image-size="60" description="鏆傛棤鏁版嵁" /> + </div> </div> <!-- 绗旇 --> <div class="notesBox" v-if="activeMenu == 1"> @@ -154,8 +158,8 @@ </div> </div> <div - class="noteText hover" - @click="jumpContent('note' + index)" + class="noteText hover 123456" + @click="jumpContent(item)" :style="{ background: item.color == '#F5E12A' @@ -171,7 +175,9 @@ : item.color }" > - <div class="con">{{ item.note }}</div> + <div class="con hover"> + {{ item.note }} + </div> </div> <div class="chapter">{{ item.selectText }}</div> </div> @@ -221,10 +227,27 @@ <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item"> <div class="resourceItem hover" @click="goResourceDetail(item)"> <div class="resourceImg"> - <img :src="video" mode="" /> + <img :src="item.icon" mode="" v-if="item.icon" /> + <el-icon v-else-if="activeClassify == 'image'" size="30"><Picture /></el-icon> + <el-icon v-else-if="activeClassify == 'audio'" size="30"><Headset /></el-icon> + <el-icon v-else-if="activeClassify == 'video'" size="30" + ><VideoCamera + /></el-icon> + <el-icon + v-else-if="activeClassify == 'other' && item.fileType == 'PDF'" + size="30" + ><Files + /></el-icon> + <el-icon + v-else-if="activeClassify == 'other' && item.fileType == ''" + size="30" + ><Tickets + /></el-icon> </div> - <div class="rName" v-if="searchText !=''" v-html="item.name"></div> - <div class="rName" v-else>{{ item.name }}</div> + <div class="rName" v-if="searchText != ''" v-html="item.name"></div> + <div class="rName" v-else :title="item.resourceName"> + {{ item.resourceName }} + </div> </div> </el-col> </el-row> @@ -246,16 +269,19 @@ <div class="" v-if="activeMenu == 4"> <div class="list-box"> <div class="screenshot" v-if="screenshotList.length > 0"> - <div - v-for="(item, index) in screenshotList" - :key="item" - class="captureItem" - @click="getCapture(item)" - > + <div v-for="(item, index) in screenshotList" :key="item" class="captureItem"> <div class="imgBox"> - <img :src="item.imgUrl" class="capture" mode="aspectFill" /> + <img + :src="item.imgUrl" + class="capture" + mode="aspectFill" + @click="getCapture(item)" + /> + <div class="deleteBox hover" @click="deleteScreenshot(item, 'capture')"> + <img :src="shanchu" /> + </div> </div> - <div class="captureName">{{ item.name }}</div> + <div class="captureName" :title="item.name">{{ item.name }}</div> </div> </div> <div v-else> @@ -285,7 +311,7 @@ <div class="">宸蹭笂璇撅細{{ headerData.classTime }}</div> </div> <div class="progress"> - <div class="bookName">瀛﹀墠鍎跨鍗敓涓庝繚鍋ワ紙绗笁鐗堬級</div> + <div class="bookName">{{ bookName }}</div> <div>{{ headerData.process }}%</div> </div> <div class="rightBox"> @@ -306,7 +332,7 @@ id="container" @mousedown="handleMouseDown" @mousemove="handleMousemove" - @mouseup="handleMouseUp" + :style="{ background: settingForm.bgColorActive }" ></div> <!-- 鐢荤瑪鐢诲竷 --> <div class="canvas-box" v-show="canvasShow"> @@ -390,34 +416,71 @@ > <el-popover placement="right" - :width=" - floatingToolData.activeToolData == '鏍囨敞' - ? 120 - : floatingToolData.activeToolData == '娓呴櫎' - ? 200 - : 250 - " + width="120" trigger="click" - v-if=" - floatingToolData.activeToolData == '鐢荤瑪' || - floatingToolData.activeToolData == '娓呴櫎' || - floatingToolData.activeToolData == '鏂囧瓧' || - floatingToolData.activeToolData == '鏍囨敞' - " + v-if="floatingToolData.activeToolData == '鏍囨敞'" > <div class="popinnerBox"> - <div class="brush" v-if="floatingToolData.activeToolData == '鐢荤瑪'"> + <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'"> + <div class="labelItem hover" @click="labelShow('hide')"> + <img :src="hide" /> + <div>闅愯棌</div> + </div> + <div class="labelItem hover" @click="labelShow('show')"> + <img :src="show" /> + <div>鏄剧ず</div> + </div> + </div> + </div> + <template #reference> + <div + :class=" + floatingToolData.activeToolData == item.name + ? 'floatToolActive floatToolItem' + : 'floatToolItem' + " + > + <img + :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" + alt="" + /> + <div class="text">{{ item.name }}</div> + </div> + </template> + </el-popover> + <div + :class=" + floatingToolData.activeToolData == item.name + ? 'floatToolActive floatToolItem' + : 'floatToolItem' + " + v-else + @click="floatItemHandle(item)" + > + <img + :src="floatingToolData.activeToolData == item.name ? item.activeIcon : item.icon" + alt="" + /> + <div class="text">{{ item.name }}</div> + </div> + </div> + </div> + <div class="brushBox" v-if="floatingToolData.activeToolData == '鐢荤瑪'"> + <div class="toolList"> + <el-popover placement="top" width="250" trigger="click"> + <div class="popinnerBox"> + <div class="brush"> <div class="thickness"> <div - :class="floatingToolData.thicknessActive == '1' ? 'small active' : 'small'" + :class="toolSelectData.thicknessActive == '1' ? 'small active' : 'small'" @click="selectThickness('1')" ></div> <div - :class="floatingToolData.thicknessActive == '3' ? 'middle active' : 'middle'" + :class="toolSelectData.thicknessActive == '3' ? 'middle active' : 'middle'" @click="selectThickness('3')" ></div> <div - :class="floatingToolData.thicknessActive == '5' ? 'large active' : 'large'" + :class="toolSelectData.thicknessActive == '5' ? 'large active' : 'large'" @click="selectThickness('5')" ></div> </div> @@ -425,27 +488,27 @@ <div class="lineTypeBox"> <div :class=" - floatingToolData.lineTypeActive == 'solid' + toolSelectData.lineTypeActive == 'solid' ? 'typeItem lineTypeActive' : 'typeItem' " @click="selectLineType('solid')" > <div class="solid"></div> - <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'"> + <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'solid'"> <img :src="xuanzhong" /> </div> </div> <div :class=" - floatingToolData.lineTypeActive == 'dashed' + toolSelectData.lineTypeActive == 'dashed' ? 'typeItem lineTypeActive' : 'typeItem' " @click="selectLineType('dashed')" > <div class="dashed"></div> - <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'"> + <div class="activeIcon" v-if="toolSelectData.lineTypeActive == 'dashed'"> <img :src="xuanzhong" /> </div> </div> @@ -458,38 +521,40 @@ @click="lineColorSelect(item)" > <div :style="{ background: item.key }" class="scribeItem"> - <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" /> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> </div> </div> </div> </div> </div> - <div class="cleanup" v-if="floatingToolData.activeToolData == '娓呴櫎'"> - <div class="cleanupItem hover" @click="cleanUpSelect('prev')"> - <img :src="clearPrevious" /> - <div>娓呴櫎涓婁竴姝�</div> + </div> + <template #reference> + <div class="floatToolItem" @click="toolSelectHandle('huabi')"> + <div class="imgBox"> + <img :src="hide" alt="" /> </div> - <div class="cleanupItem hover" @click="cleanUpSelect('all')"> - <img :src="clear" /> - <div>娓呴櫎鍏ㄩ儴</div> - </div> + <div class="text">鐢荤瑪</div> </div> - <div class="write" v-if="floatingToolData.activeToolData == '鏂囧瓧'"> + </template> + </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'" + :class="toolSelectData.fontSizeActive == '14' ? 'small active' : 'small'" @click="selectfontSize('14')" > 灏� </div> <div - :class="floatingToolData.fontSizeActive == '16' ? 'middle active' : 'middle'" + :class="toolSelectData.fontSizeActive == '16' ? 'middle active' : 'middle'" @click="selectfontSize('16')" > 涓� </div> <div - :class="floatingToolData.fontSizeActive == '18' ? 'large active' : 'large'" + :class="toolSelectData.fontSizeActive == '18' ? 'large active' : 'large'" @click="selectfontSize('18')" > 澶� @@ -504,33 +569,99 @@ @click="lineColorSelect(item)" > <div :style="{ background: item.key }" class="scribeItem"> - <img :src="xuanzhong" v-if="item.key == floatingToolData.lineColorActive" /> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> </div> </div> </div> </div> </div> - <div class="label" v-if="floatingToolData.activeToolData == '鏍囨敞'"> - <div class="labelItem hover" @click="labelShow('hide')"> - <img :src="hide" /> - <div>闅愯棌</div> + </div> + <template #reference> + <div class="floatToolItem" @click="toolSelectHandle('wenzi')"> + <div class="imgBox"> + <img :src="wenzi2" alt="" /> </div> - <div class="labelItem hover" @click="labelShow('show')"> - <img :src="show" /> - <div>鏄剧ず</div> + <div class="text">鏂囧瓧</div> + </div> + </template> + </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> + <div class="lineStyle"> + <div class="colorSelectBox"> + <div + v-for="item in colorSelectList" + :key="item.key" + class="flex1 hover" + @click="lineColorSelect(item)" + > + <div :style="{ background: item.key }" class="scribeItem"> + <img :src="xuanzhong" v-if="item.key == toolSelectData.lineColorActive" /> + </div> + </div> + </div> </div> </div> </div> <template #reference> - <div class="floatToolItem"> - <img :src="item.icon" alt="" /> - <div class="text">{{ item.name }}</div> + <div class="floatToolItem" @click="toolSelectHandle('tuxing')"> + <div class="imgBox"> + <img :src="tuxing" alt="" /> + </div> + <div class="text">鍥惧舰</div> </div> </template> </el-popover> - <div class="floatToolItem" v-else @click="floatItemHandle(item)"> - <img :src="item.icon" alt="" /> - <div class="text">{{ item.name }}</div> + <div class="floatToolItem" @click="toolSelectHandle('xiangpi')"> + <div class="imgBox"> + <img :src="clearPrevious" alt="" /> + </div> + <div class="text">姗$毊鎿�</div> + </div> + <div class="floatToolItem" @click="toolSelectHandle('chexiao')"> + <div class="imgBox"> + <img :src="clear" alt="" /> + </div> + <div class="text">鎾ら攢</div> + </div> + <div class="floatToolItem" @click="toolSelectHandle('chongzuo')"> + <div class="imgBox"> + <img :src="hide" alt="" /> + </div> + <div class="text">閲嶅仛</div> + </div> + <div class="floatToolItem" @click="toolSelectHandle('qingchu')"> + <div class="imgBox"> + <img :src="hide" alt="" /> + </div> + <div class="text">娓呴櫎</div> + </div> + <div class="floatToolItem layOutTool" @click="toolSelectHandle('tuichu')"> + <div class="imgBox"> + <img :src="tuichu" alt="" /> + </div> + <div class="text">閫�鍑�</div> </div> </div> </div> @@ -569,9 +700,18 @@ </div> </div> </div> + <!-- 鍒掔嚎锛岄珮浜垹闄� --> + <div + class="lineDeleteBox" + v-show="lineDelete.showLineDelete" + :style="{ top: `${lineDelete.top}px`, left: `${lineDelete.left}px` }" + > + <el-button @click="lineDeleteBtn">鍒犻櫎</el-button> + </div> + <el-dialog title="璧勬簮" align-center v-model="resourVisble" width="845" class="resourDialog"> - <div class="videoBox" v-if="resourType == 'video'"> - <video controls object-fit="fill" :src="testVideo"></video> + <div class="videoBox" v-if="resourType == '瑙嗛'"> + <video controls controlslist="nodownload" :src="testVideo"></video> </div> <div class="wordBox" v-if="resourType == 'word'"> <vue-office-docx :src="testWord" /> @@ -629,7 +769,7 @@ v-model="screenshotVisble" :before-close="screenshotClose" width="400" - class="resourDialog" + class="resourDialog screenshotDialog" > <div class="formBox"> <el-input v-model="nameData" placeholder="璇疯緭鍏ユ埅鍥惧悕绉�"></el-input> @@ -637,13 +777,13 @@ <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/' + selectText" frameborder="0"></iframe> </div> </el-dialog> <el-dialog title="AI鏅鸿兘闂瓟" align-center v-model="wendaVisible" width="26%" class="myDialogs"> @@ -681,8 +821,8 @@ </template> <script setup lang="ts"> -import { ref, reactive, watch, onMounted, inject } from 'vue' -import { ctxUrl } from '@/assets/js/config' +import { ref, reactive, watch, onMounted, onBeforeMount, inject } from 'vue' +import { ctxUrl, resourceUrl, requestCtx } from '@/assets/js/config' import { useRouter, useRoute } from 'vue-router' import useClipboard from 'vue-clipboard3' const { toClipboard } = useClipboard() @@ -694,7 +834,7 @@ let route = useRoute() import moment from 'moment' import dictionary from '@/views/components/dictionary.vue' -import { ElMessage, ElMessageBox } from 'element-plus' +import { ElMessage, ElMessageBox, valueEquals } from 'element-plus' import logo from '@/assets/images/header/logo.png' import mulu from '@/assets/images/menu/mulu.png' import biji from '@/assets/images/menu/biji.png' @@ -733,6 +873,7 @@ import qingchu1 from '../assets/images/operation/Clearaway-b.png' import wenzi from '../assets/images/operation/wenzi-w.png' import wenzi1 from '../assets/images/operation/wenzi-b.png' +import wenzi2 from '../assets/images/operation/wenzi.png' import biaoqianw from '../assets/images/operation/biaoqian-w.png' import biaoqian1 from '../assets/images/operation/biaoqian-b.png' import baiban from '../assets/images/operation/baiban-w.png' @@ -745,6 +886,8 @@ import clearPrevious from '../assets/images/operation/clearPrevious.png' import hide from '../assets/images/operation/hide.png' import show from '../assets/images/operation/show.png' +import tuichu from '../assets/images/operation/tuichu.png' +import tuxing from '../assets/images/operation/tuxing.png' import gaoliang from '../assets/images/operation/gaoliang.png' import gaoliang1 from '../assets/images/operation/gaoliang-b.png' @@ -783,26 +926,25 @@ import { start } from 'qiankun' import axios from 'axios' import { fabric } from 'fabric' + +import { loadMicroApp } from 'qiankun' +import { microApps } from '@/child.ts' const canvasWith = ref(1000) const canvasheight = ref(3000) const screenWidth = ref( window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ) + +let microApp = null // 寰簲鐢ㄥ疄渚� +const bookName = ref('') +const bookId = ref(1) onMounted(() => { - console.log(1111); - - // canvasWith.value = window.innerWidth - 540 - // canvasheight.value = window.innerHeight - 110 - getNotesList() // 鑾峰彇楂樹寒 - getlineHeightList() //鑾峰彇楂樹寒 - getScribeList() //鑾峰彇鍒掔嚎 getCatalogueData() getResourceData() - getScreenshotList() - // setTimeout(() => { - // canvasWith.value = document.getElementById('container').offsetWidth - // canvasheight.value = document.getElementById('container').offsetHeight - // }, 5000) + setTimeout(() => { + canvasWith.value = document.querySelector('.content-box').offsetWidth + canvasheight.value = document.querySelector('.content-box').offsetHeight + }, 5000) if (screenWidth.value < 1180) { menuState.open = false toolState.open = false @@ -814,13 +956,46 @@ })() } - console.log(qiankunActions,"qiankunActions"); - - qiankunActions.setGlobalState({ - cc: (data) => { - console.log(data); + // 鍔犺浇寰簲鐢� + microApp = loadMicroApp(microApps.book1, { + sandbox: { + // strictStyleIsolation: true, + // experimentalStyleIsolation: 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) + }, + catalogChange: (data) => { + 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( @@ -833,11 +1008,20 @@ } } ) +watch( + () => bookId.value, + (val) => { + getNotesList() // 鑾峰彇绗旇 + getlineHeightList() //鑾峰彇楂樹寒 + getScribeList() //鑾峰彇鍒掔嚎 + getScreenshotList() //鎴浘 + } +) //鑾峰彇鐩綍 const catalogueData = ref([]) const getCatalogueData = () => { axios - .get(ctxUrl + '/books/test/information.json') + .get(ctxUrl + '/catalog.json') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 @@ -852,7 +1036,6 @@ label: 'label' } const handleNodeClick = (data) => { - console.log(data.id, 12) document.getElementById(data.id).scrollIntoView() } @@ -884,23 +1067,38 @@ const searchShow = ref(true) const resourceData = ref({}) const resourceDataList = ref([]) +const resourceImgList = ref([]) +const resourceVideoList = ref([]) +const resourceAudioList = ref([]) +const resourceDocList = ref([]) const resourVisble = ref(false) const resourType = ref('') const testVideo = ref('') //瑙嗛閾炬帴 const testWord = ref('') //word閾炬帴 const getResourceData = () => { axios - .get(ctxUrl + '/books/test/resource.json') + .get(ctxUrl + '/resource.json') .then(function (response) { var json = response.data // 澶勭悊鑾峰彇鍒扮殑json鏁版嵁 - console.log(json, '璧勬簮') - resourceData.value = json - resourceDataList.value = json.imgList - classifySelectList[0].count = json.imgList.length - classifySelectList[1].count = json.audioList.length - classifySelectList[2].count = json.videoList.length - classifySelectList[3].count = json.attachmentList.length + if (json.length > 0) { + json.forEach((item) => { + if (item.fileType == '鍥剧墖') { + resourceImgList.value.push(item) + } else if (item.fileType == '瑙嗛') { + resourceVideoList.value.push(item) + } else if (item.fileType == '闊抽') { + resourceAudioList.value.push(item) + } else { + resourceDocList.value.push(item) + } + }) + } + resourceDataList.value = resourceImgList.value + classifySelectList[0].count = resourceImgList.value.length + classifySelectList[1].count = resourceAudioList.value.length + classifySelectList[2].count = resourceVideoList.value.length + classifySelectList[3].count = resourceDocList.value.length }) .catch(function (error) { console.log(error) @@ -908,12 +1106,13 @@ } const goResourceDetail = (data) => { - resourVisble.value = true - resourType.value = data.type - if (data.type == 'video') { - testVideo.value = ctxUrl + '/books/test/resourceData/' + data.name - } else if (data.type == 'word') { - testWord.value = ctxUrl + '/books/test/resourceData/' + data.name + resourType.value = data.fileType + if (data.fileType == '瑙嗛') { + resourVisble.value = true + testVideo.value = requestCtx + '/file/api/ApiDownload?md5=' + data.md5 + } else if (data.fileType == 'PDF') { + window.open(requestCtx + '/file/api/ApiDownload?md5=' + data.md5) + // testWord.value = resourceUrl + '/resourceData/' + data.name } } @@ -923,19 +1122,18 @@ searchText.value = '' switch (item.key) { case 'image': - resourceDataList.value = resourceData.value.imgList + resourceDataList.value = resourceImgList.value break case 'audio': - resourceDataList.value = resourceData.value.audioList + resourceDataList.value = resourceAudioList.value break case 'video': - resourceDataList.value = resourceData.value.videoList + resourceDataList.value = resourceVideoList.value break case 'other': - resourceDataList.value = resourceData.value.attachmentList + resourceDataList.value = resourceDocList.value break } - console.log(resourceDataList.value) } const searchBtn = () => { if (searchShow.value) { @@ -974,7 +1172,6 @@ // 閫変腑鑿滃崟 const activeMenu = ref(0) //璧勬簮绫诲瀷 - const resourceType = ref('default') // 鑿滃崟鐐瑰嚮 const menuItemClick = (index) => { @@ -999,6 +1196,17 @@ //鍒锋柊褰撳墠椤甸潰 const reload = () => { location.reload() + // if (microApp) { + // microApp.unmount() // 鍗歌浇寰簲鐢� + // microApp = loadMicroApp(microApps.book1, { + // sandbox: { + // strictStyleIsolation: true, + // experimentalStyleIsolation: true + // } + // }) + // } else { + // location.reload() + // } } const selectResourceType = (type) => { @@ -1023,7 +1231,7 @@ { lable: '澶�', - key: '20' + key: '18' } ], fontSizeActive: '16', @@ -1051,6 +1259,7 @@ }) const fontSizeSelect = (item) => { settingForm.fontSizeActive = item.key + document.getElementById('app').style.fontSize = item.key + 'px' } const bgColorSelect = (item) => { settingForm.bgColorActive = item.key @@ -1193,34 +1402,31 @@ const floatingToolBox = reactive([ { icon: huabi, + activeIcon: huabi1, name: '鐢荤瑪' }, { - icon: qingchu, - name: '娓呴櫎' - }, - { - icon: wenzi, - name: '鏂囧瓧' - }, - { - icon: biaozhu, - name: '鏍囨敞' - }, - { - icon: biaoqianw, - name: '鏍囩' - }, - { + activeIcon: baiban1, icon: baiban, name: '鐧芥澘' }, { + activeIcon: biaozhu1, + icon: biaozhu, + name: '鏍囨敞' + }, + { + activeIcon: biaoqian1, + icon: biaoqianw, + name: '鏍囩' + }, + { + activeIcon: jieping1, icon: jieping, name: '鎴睆' } ]) -const canvas = ref(null) +let canvas = null const floatingToolData = reactive({ activeToolData: '', //閫変腑宸ュ叿 elLeft: 400, @@ -1243,22 +1449,16 @@ floatingToolBox[0].icon = huabi1 break case 1: - floatingToolBox[1].icon = qingchu1 + floatingToolBox[1].icon = baiban1 break case 2: - floatingToolBox[2].icon = wenzi1 + floatingToolBox[2].icon = biaozhu1 break case 3: - floatingToolBox[3].icon = biaozhu1 + floatingToolBox[3].icon = biaoqian1 break case 4: - floatingToolBox[4].icon = biaoqian1 - break - case 5: - floatingToolBox[5].icon = baiban1 - break - case 6: - floatingToolBox[6].icon = jieping1 + floatingToolBox[4].icon = jieping1 break } } @@ -1269,22 +1469,16 @@ floatingToolBox[0].icon = huabi break case 1: - floatingToolBox[1].icon = qingchu + floatingToolBox[1].icon = baiban break case 2: - floatingToolBox[2].icon = wenzi + floatingToolBox[2].icon = biaozhu break case 3: - floatingToolBox[3].icon = biaozhu + floatingToolBox[3].icon = biaoqianw break case 4: - floatingToolBox[4].icon = biaoqianw - break - case 5: - floatingToolBox[5].icon = baiban - break - case 6: - floatingToolBox[6].icon = jieping + floatingToolBox[4].icon = jieping break } } @@ -1295,8 +1489,10 @@ 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) => { @@ -1304,7 +1500,12 @@ switch (item.name) { case '鐢荤瑪': canvasShow.value = true - init() + toolSelectData.activeTool = 'huabi' + break + case '鏍囨敞': + break + case '鏍囩': + reMark() break case '鎴睆': jitT() @@ -1320,51 +1521,73 @@ } } const dragstart = (e) => { - console.log(e) floatingToolData.startclientx = e.clientX floatingToolData.startclienty = e.clientY +} +//鐢荤瑪鎿嶄綔鏍忎簨浠� +const toolSelectData = reactive({ + activeTool: '', + fontSizeActive: '16', + thicknessActive: '3', //鐢荤瑪閫変腑绮楃粏 + lineTypeActive: 'solid', //鐢荤瑪閫変腑绾跨被鍨� + lineColorActive: '#333' //鐢荤瑪閫変腑绾块鑹� +}) +const toolSelectHandle = (title) => { + toolSelectData.activeTool = title + switch (title) { + case 'huabi': + init() + break + case 'wenzi': + break + case 'tuichu': + canvasShow.value = false + floatingToolData.activeToolData = '' + break + case 'qingchu': + canvas.clear() + break + } } //閫変腑鐢荤瑪绮楃粏 const selectThickness = (str) => { - floatingToolData.thicknessActive = str - init() + toolSelectData.thicknessActive = str + canvas.freeDrawingBrush.color = toolSelectData.thicknessActive } const selectLineType = (str) => { - floatingToolData.lineTypeActive = str + toolSelectData.lineTypeActive = str init() } //鐢荤瑪棰滆壊閫夋嫨 const lineColorSelect = (item) => { - floatingToolData.lineColorActive = item.key - init() + toolSelectData.lineColorActive = item.key + canvas.freeDrawingBrush.color = item.key } //鐢诲竷灞炴�� +const isDrawing = ref(true) // 鏄惁寮�鍚粯鍥撅紝true 寮�鍚紱false 鍏抽棴 const init = () => { - canvas.value = new fabric.Canvas('canvasRef', { - isDrawingMode: true // 鍚敤缁樼敾妯″紡 + canvas = new fabric.Canvas('canvasRef', { + isDrawingMode: isDrawing.value // 鍚敤缁樼敾妯″紡 }) - canvas.value.freeDrawingBrush.color = floatingToolData.lineColorActive - canvas.value.freeDrawingBrush.width = floatingToolData.thicknessActive + canvas.freeDrawingBrush.color = toolSelectData.lineColorActive + canvas.freeDrawingBrush.width = toolSelectData.thicknessActive } - -//娓呴櫎涓婁竴姝�/鍏ㄩ儴 -const cleanUpSelect = (str) => { - if (str == 'all') { - canvasShow.value = false - } else { - console.log(history.value) - } -} -//鏍囩鏄剧ず闅愯棌 -const labelShow = (str) => {} //鏂囧瓧澶у皬 const selectfontSize = (str) => { - floatingToolData.fontSizeActive = str + toolSelectData.fontSizeActive = str } +//鏍囨敞鏄剧ず闅愯棌 +const labelShow = (str) => {} + +//鏍囩 +const reMark =() => { + + +} //鎴浘 //鎴浘浜嬩欢 function jitT() { @@ -1383,14 +1606,17 @@ //鍙栨秷鍥炶皟 const closeFn = (base64: any) => { 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', @@ -1398,14 +1624,20 @@ setKeyRequests: [ { domain: 'screenshot', - key: '2358', - value: JSON.stringify(screenshotList.value) + key: bookId.value, + value: JSON.stringify(screenshotData.value) } ] } }).then((res) => { + screenshotLoading.value = false getScreenshotList() + nameData.value = '' + urlData.value = '' + floatingToolData.activeToolData = '' screenshotVisble.value = false + }).catch(function (error) { + screenshotLoading.value = false }) } else { ElMessage.error('鎴浘鍚嶇О涓嶈兘涓虹┖!') @@ -1421,22 +1653,48 @@ method: 'post', data: { domain: 'screenshot', - keys: ['2358'] + keys: [bookId.value] } }).then((res) => { if (res && res.length > 0 && res[0].value) { screenshotList.value = JSON.parse(res[0].value) + screenshotData.value = JSON.parse(res[0].value) } }) } +//鏌ョ湅鎴浘 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, @@ -1449,42 +1707,28 @@ }) ///鍐呭閫変腑 -const isMouseDown = ref(false) -const move = ref(false) -const handleMouseDown = () => { - isMouseDown.value = true - showToolBox.value = false - colorActive.value = '' - toolActive.value = '' -} -const handleMousemove = () => { - if (isMouseDown.value) { - move.value = true +const getSelection = (data) => { + if (data.txt) { + console.log(data.node, 'data') + showToolBox.value = true + selectText.value = data.txt + selectNode.value = data.node.innerHTML + selectPage.value = data.page } -} - -const handleMouseUp = (e) => { - if (move.value) { - const txt = window.getSelection()?.toString() - selectText.value = txt - const node = window.getSelection() - let html = node.anchorNode.parentNode.parentNode - dialogToolData.chapter = html.firstChild.innerHTML - if (txt) { - showToolBox.value = true - dialogToolData.top = e.y - dialogToolData.left = e.x - } - isMouseDown.value = false - } - move.value = false } const pageScroll = (e) => { + // window.qiankunActions.setGlobalState({ + // gotoPage: (t, s) => { + // // 缁戝畾瀛愬簲鐢ㄩ�夋嫨鐩戝惉浜嬩欢 + // console.log(t, s, '瀛愬簲鐢ㄦ粴鍔�') + // } + // }) showToolBox.value = false - let scroll = e.target.scrollTop - let offsetHeight = document.getElementById('container').offsetHeight - headerData.process = Math.round((scroll / offsetHeight) * 100) + lineDelete.showLineDelete = false + // let scroll = e.target.scrollTop + // let offsetHeight = document.getElementById('container').offsetHeight + // headerData.process = Math.round((scroll / offsetHeight) * 100) } const toolActive = ref('') @@ -1654,13 +1898,16 @@ const clickSelect = (item) => { colorActive.value = item.key if (toolActive.value == '楂樹寒') { - dialogToolData.lineHeight.push({ + 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', @@ -1668,7 +1915,7 @@ setKeyRequests: [ { domain: 'highLight', - key: '2358', + key: bookId.value, value: JSON.stringify(dialogToolData.lineHeight) } ] @@ -1684,6 +1931,7 @@ dialogToolData.scribeList.push({ selectNode: selectNode.value, selectText: selectText.value, + selectPage: selectPage.value, color: colorActive.value, chapter: dialogToolData.chapter, createDate: new Date() @@ -1695,7 +1943,7 @@ setKeyRequests: [ { domain: 'underline', - key: '2358', + key: bookId.value, value: JSON.stringify(dialogToolData.scribeList) } ] @@ -1714,12 +1962,18 @@ 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, '') @@ -1731,7 +1985,7 @@ setKeyRequests: [ { domain: 'notes', - key: '2358', + key: bookId.value, value: JSON.stringify(dialogToolData.notesList) } ] @@ -1761,50 +2015,55 @@ method: 'post', data: { domain: 'notes', - keys: ['2358'] + 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.getElementById('container') - if (list.length > 0) { - list.forEach((item, index) => { - item.createDate = moment(item.createDate).format('YYYY-MM-DD') - if (searchText.value) { - searchText.value = searchText.value.replace(/^\s*|\s*$/g, '') - let text = searchText.value.replace(/^\s*|\s*$/g, '') - if (item.text.indexOf(text) > -1) { + }) + .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) } } - } else { - if (menuState.notesColor == 'all') { - scribeData.noteList.push(item) - } else if (menuState.notesColor == item.color) { - scribeData.noteList.push(item) - } - } - //椤甸潰娣诲姞绗旇 - let containerElement = document.createElement('span') - containerElement.style.textDecoration = 'underline' - containerElement.innerText = item.selectText - let rReg1 = new RegExp(`${item.selectText}`, 'ig') - let text1 = textDom1.innerHTML - let rHtml1 = '' - rHtml1 = text1.replace( - rReg1, - `<span style="padding-bottom:2px; border-bottom: 2px solid;border-bottom-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>` - ) - textDom1.innerHTML = rHtml1 - }) + //椤甸潰娣诲姞绗旇 + 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 - }) + scribeData.loading = false + }) + .catch((err) => { + scribeData.loading = false + }) } //鍒掔嚎 const getScribeList = () => { @@ -1814,27 +2073,27 @@ method: 'post', data: { domain: 'underline', - keys: ['2358'] + 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.getElementById('container') - console.log(scribeData.scribeDataList, '鍒掔嚎') + 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 containerElement = document.createElement('span') - containerElement.style.textDecoration = 'underline' - containerElement.innerText = item.selectText let rReg1 = new RegExp(`${item.selectText}`, 'ig') let text1 = textDom1.innerHTML - let rHtml1 = '' - rHtml1 = text1.replace( + 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">${item.selectText}</span>` + `<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 } } @@ -1849,27 +2108,27 @@ method: 'post', data: { domain: 'highLight', - keys: ['2358'] + 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) - console.log(scribeData.lineHeightList, '楂樹寒') - let textDom = document.getElementById('container') + 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 heightLightElement = document.createElement('i') - heightLightElement.style.backgroundColor = item.color - heightLightElement.innerText = item.selectText let rReg = new RegExp(`${item.selectText}`, 'ig') let text = textDom.innerHTML - let rHtml = '' - rHtml = text.replace( + let nHtmlText = item.selectNode + let nHtml = '' + nHtml = nHtmlText.replace( rReg, - `<span style="background: ${item.color};padding: 2px;cursor: pointer">${item.selectText}</span>` + `<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 } } @@ -1878,61 +2137,114 @@ } //姝f枃涓垹闄ら珮浜紝鍒掔嚎锛岀瑪璁版搷浣滄 +const lineDelete = reactive({ + showLineDelete: false, + top: 0, + left: 0, + deleteType: '', + deleteTxt: '' +}) + 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) { - console.log(txt, 2) - let list = scribeData.scribeDataList.filter((item) => item.selectText != txt) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'underline', - key: '2358', - value: JSON.stringify(list) - } - ] - } - }).then((res) => { - getScribeList() - }) + 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) { - console.log(txt, 1) - let list = scribeData.lineHeightList.filter((item) => item.selectText != txt) - request({ - url: '/identity/api/ApiAppUserSetKey', - method: 'post', - data: { - setKeyRequests: [ - { - domain: 'highLight', - key: '2358', - value: JSON.stringify(list) + 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') } - ] - } - }).then((res) => { - getlineHeightList() - }) + }) + 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() + }) + } } -const jumpContent = (id) => { - document.getElementById(id).scrollIntoView() +//绗旇璺宠浆 +const jumpContent = (item) => { + console.log(item) + if (window.qiankunState && window.qiankunState.gotoPage) window.qiankunState.gotoPage(5, 100) } +//绗旇缂栬緫 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 @@ -1951,7 +2263,7 @@ setKeyRequests: [ { domain: 'notes', - key: '2358', + key: bookId.value, value: JSON.stringify(list) } ] @@ -1961,10 +2273,20 @@ 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() }) } } + //鍐呭鍖哄煙椤堕儴鏄剧ず @@ -2284,11 +2606,14 @@ padding: 10px 0; align-items: center; .resourceImg { - width: 130px; + // width: 130px; height: 80px; background: #fff; border-radius: 5px; overflow: hidden; + display: flex; + align-items: center; + justify-content: center; img { height: 100%; width: 100%; @@ -2317,11 +2642,22 @@ .captureItem { margin-bottom: 10px; width: 46%; + position: relative; .imgBox { border: 1px solid #d8d8d8; width: 100%; height: 80px; margin-bottom: 5px; + } + .deleteBox { + position: absolute; + top: 2px; + right: 2px; + width: 20px; + height: 20px; + background: rgba(44, 44, 44, 0.3); + text-align: center; + padding: 2px; } // .capture { // width: 100%; @@ -2391,9 +2727,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; @@ -2483,14 +2817,17 @@ } .pageBox-content { height: calc(100% - 57px); - overflow-y: auto; background: #fbf9f4; .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%; @@ -2626,7 +2963,7 @@ width: 85px; background-image: linear-gradient(to bottom, #0093ff, #005dff); position: fixed; - height: 430px; + height: 310px; top: 300px; left: 450px; z-index: 99; @@ -2647,17 +2984,51 @@ margin-right: 5px; } } + .floatToolItem:hover, + .floatToolActive { + background-color: #fff; + color: #0093ff; + } } - .floatToolItem:hover { - background-color: #fff; - color: #0093ff; + .brushBox { + position: fixed; + left: 500px; + bottom: 20px; + z-index: 99; + border-radius: 5px; + background: #fff; + // padding: 10px; + overflow: hidden; + border: 1px solid #0093ff; + .toolList { + display: flex; + justify-content: center; + align-items: center; + .floatToolItem { + margin: 10px; + width: 48px; + border-radius: 5px; + text-align: center; + flex: 1; + .imgBox { + height: 22px; + width: 22px; + text-align: center; + margin: 0 auto; + margin-bottom: 5px; + } + } + .layOutTool { + padding-left: 15px; + border-left: 1px solid #e0e0e0; + } + } } .dialogToolBox { position: fixed; z-index: 2; - .toolSelectBox { height: 57px; display: flex; @@ -2718,6 +3089,14 @@ } } } +.lineDeleteBox { + position: fixed; + z-index: 2; + border: 1px solid #0093ff; + padding: 20px 8px; + background: #fff; + border-radius: 5px; +} .wendabox { width: 100%; height: 700px; @@ -2764,6 +3143,9 @@ .myNoteDialogs { width: 500px !important; } +.screenshotDialog { + width: 400px !important; +} .noteColorSelectBox { margin-top: 10px; width: 190px; -- Gitblit v1.9.1