问题修改

litian

2024-04-25 c66e9eaa87989cd0b312fa1d8777a4bf799db0da

 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">
@@ -99,14 +185,13 @@
              <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
            </div>
            <div class="brushImgBox">
              <div @click="loadChild"><img :src="huabi2" class="brushImg" />画笔</div>
              <!-- <el-switch v-model="headerData.brushToolShow"  @change="brushToolShow"/> -->
              <div><img :src="huabi2" class="brushImg" />画笔</div>
            </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,14 +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'
@@ -499,8 +598,14 @@
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 { loadMicroApp } from 'qiankun'
import front006 from '@/views/components/front006.vue'
import { start } from 'qiankun'

onMounted(() => {
  getNotesList() // 获取高亮
  getlineHeightList() //获取高亮
  getScribeList() //获取划线
})
// 菜单
const menuData = reactive([
  {
@@ -530,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
@@ -550,6 +667,11 @@
    menuState.notesColor = item.key
  } else {
    menuState.notesColor = 'all'
  }
}
const searchBook = async () => {
  if (activeMenu.value == 1) {
    getNotesList()
  }
}

@@ -846,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([
@@ -888,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: [] //笔记菜单列表
})
//词典

@@ -954,7 +1115,7 @@
      break
  }
}
const dialogToolHandle = (item) => {
const dialogToolHandle = async (item) => {
  toolActive.value = item.name
  colorActive.value = ''
  switch (item.name) {
@@ -968,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
@@ -997,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()
      })
    }
  }
}

//内容区域顶部显示
@@ -1007,8 +1417,7 @@
  minutes: 0,
  hours: 0,
  process: '42%',
  pageSize: 100,
  brushToolShow: true
  pageSize: 100
})
//上课时长计时器
const timer = ref(null)
@@ -1044,22 +1453,6 @@
  } else {
    headerData.pageSize = Number(headerData.pageSize) - 5
  }
}

const brushToolShow = () => {
  console.log(headerData.brushToolShow, 123)
  if (headerData.brushToolShow) {
    ctx = canvas.value.getContext('2d') as CanvasRenderingContext2D
  }
}

const loadChild = () => {
  // loadMicroApp({
  //   name: 'book',
  //   entry: '//192.168.3.196:8080/',
  //   container: document.querySelector('#container')
  // })
  // $router.push({path: "/aa"})
}
</script>

@@ -1113,6 +1506,12 @@
          margin-bottom: 4px;
        }
      }
      .reload {
        width: 80px;
        position: absolute;
        bottom: 100px;
        text-align: center;
      }
      .setting {
        width: 80px;
        position: absolute;
@@ -1132,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;
          }
        }
      }
@@ -1197,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;
@@ -1271,6 +1769,7 @@
      .pageBox-content {
        height: calc(100% - 57px);
        position: relative;
        overflow-y: auto;
        #container {
          background: #fbf9f4;
          height: 100%;
@@ -1351,6 +1850,7 @@
        .el-tabs__item {
          flex: 1 !important;
          padding: 0 !important;
          text-align: center;
        }
        .el-tabs__active-bar {
          width: 43px !important;
@@ -1404,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;
@@ -1425,6 +1926,9 @@
          margin-right: 5px;
        }
      }
    }
    .draggableBox:hover {
      height: 430px;
    }
    .floatToolItem:hover {
      background-color: #fff;
@@ -1503,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>