yanshi

litian

2024-05-09 5994c7315c31d79c3d9102eee00eb8317c066425

yanshi

 src/child.ts

@@ -21,7 +21,7 @@
    name: 'app-content',
    // - 必选，微应用的入口
    entry: '//182.92.203.7:3007/books/test/',
    // entry: '//192.168.3.196:8080/',
    // entry: '//192.168.3.10:8080',
    // - 必选，微应用的容器节点的选择器或者 Element 实例
    container: '#container',
    // - 必选，微应用的激活规则

 src/views/home.vue

@@ -1,11 +1,11 @@
<template>
  <div class="homeBox">
    <div class="headerBox">
      <div><img :src="logo" /></div>
      <img :src="logo" />
      <div class="userInfoBox">
        <div></div>
        <div></div>
        <div><div class="layout">退出</div></div>
        <div><div class="layout hover" @click="layoutBtn">退出</div></div>
      </div>
    </div>
    <div class="contentBox">
@@ -97,29 +97,38 @@
          <div class="list-box" v-loading="scribeData.loading">
            <div v-if="scribeData.noteList.length > 0 && !scribeData.loading">
              <div v-for="(item, index) in scribeData.noteList" :key="item.key" class="listItem">
                <div class="itemBox noteStyle">
                  <div class="textBox">
                    <div class="title">
                      <div class="title-con">
                        <div class="round" :style="{ background: item.color }"></div>
                        <span>{{ item.name }}</span>
                      <div class="border-left" :style="{ 'border-right-color': item.color }"></div>
                      <span>{{ item.createDate }}{{item.color}}</span>
                      </div>
                      <div>
                        <el-icon size="18" color="#0093ff" @click="jumpContent('note' + index)"
                          ><LocationInformation
                        /></el-icon>
                        <img :src="bianji" @click="update(item, 'note')" />
                        <img :src="shanchu" @click="deleteBtn(item, 'note')" />
                      </div>
                    </div>
                    <div class="noteText">
                  <div
                    class="noteText hover"
                    @click="jumpContent('note' + index)"
                    :style="{
                      'background':
                        item.color == '#F5E12A'
                          ? 'rgba(255,234,41,0.1)'
                          : item.color == '#76F0AE'
                            ? 'rgba(83,255,162,0.1)'
                            : item.color == '#59CFF5'
                              ? 'rgba(93,216,255,0.1)'
                              : item.color == '#CAA5FC'
                                ? 'rgba(205,167,255,0.1)'
                                : item.color == '#F5A0B9'
                                  ? 'rgba(255,167,193,0.1)'
                                  : item.color
                    }"
                  >
                      <div class="con">{{ item.note }}</div>
                    </div>
                    <div class="chapter">
                      <span class="createDate">{{ item.createDate }}</span>
                      <span class="chapterName">{{ item.chapter }}</span>
                    </div>
                  </div>
                  <div class="chapter">{{ item.selectText }}</div>
                </div>
              </div>
            </div>
@@ -162,9 +171,9 @@
            </div>
          </div>
          <div class="list-box">
            <div v-if="resourceData.length > 0" class="resourceList">
            <div v-if="resourceDataList.length > 0" class="resourceList">
              <el-row :gutter="20">
                <el-col :span="12" v-for="(item, index) in resourceData" :key="item">
                <el-col :span="12" v-for="(item, index) in resourceDataList" :key="item">
                  <div class="resourceItem hover">
                    <div class="resourceImg">
                      <img :src="video" mode="" />
@@ -339,7 +348,7 @@
                  ? 200
                  : 250
            "
            trigger="click"
            trigger="hover"
            v-if="
              floatingToolData.activeToolData == '画笔' ||
              floatingToolData.activeToolData == '清除' ||
@@ -483,10 +492,7 @@
        v-show="showToolBox"
        :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
      >
        <div
          class="colorSelectBox"
          v-show="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'"
        >
        <div class="colorSelectBox" v-show="toolActive == '高亮' || toolActive == '划线'">
          <div
            v-for="item in colorSelectList"
            :key="item.key"
@@ -498,7 +504,7 @@
            </div>
          </div>
        </div>
        <div class="toolSelectBox">
        <div class="toolSelectBox" v-show="!(toolActive == '高亮' || toolActive == '划线')">
          <div
            :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
            v-for="item in dialogToolList"
@@ -530,14 +536,24 @@
    class="myNoteDialogs"
  >
    <div class="formBox">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="笔记标题">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="笔记内容">
          <el-input type="textarea" v-model="formData.desc"></el-input>
        </el-form-item>
      </el-form>
      <el-input
        type="textarea"
        :rows="4"
        v-model="formData.desc"
        placeholder="请输入笔记内容"
      ></el-input>
    </div>
    <div class="noteColorSelectBox">
      <div
        v-for="item in colorSelectList"
        :key="item.key"
        class="flex1 hover"
        @click="clickSelect(item)"
      >
        <div :style="{ background: item.key }" class="scribeItem">
          <img :src="xuanzhong" v-if="item.key == colorActive" />
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
@@ -597,9 +613,9 @@
const { toClipboard } = useClipboard()
const request = inject('request')
//获取路由器
let $router = useRouter()
let router = useRouter()
//获取当前路由的信息
let $route = useRoute()
let route = useRoute()
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import logo from '@/assets/images/header/logo.png'
@@ -752,8 +768,9 @@
  }
])
const activeClassify = ref('image')
const searchShow = ref(false)
const resourceData = ref([])
const searchShow = ref(true)
const resourceData = ref({})
const resourceDataList = ref([])
const resourVisble = ref(false)
const resourType = ref('')
const testVideo = ref('') //视频链接
@@ -766,6 +783,11 @@
      // 处理获取到的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
    })
    .catch(function (error) {
      console.log(error)
@@ -785,6 +807,23 @@

const classifyClick = (item) => {
  activeClassify.value = item.key
  resourceDataList.value = []

  switch (item.key) {
    case 'image':
      resourceDataList.value = resourceData.value.imgList
      break
    case 'audio':
      resourceDataList.value = resourceData.value.audioList
      break
    case 'video':
      resourceDataList.value = resourceData.value.videoList
      break
    case 'other':
      resourceDataList.value = resourceData.value.attachmentList
      break
  }
  console.log(resourceDataList.value)
}
const searchBtn = () => {
  if (searchShow.value) {
@@ -1182,7 +1221,7 @@
          setKeyRequests: [
            {
              domain: 'screenshot',
              key: '1',
              key: '2358',
              value: JSON.stringify(screenshotList.value)
            }
          ]
@@ -1204,7 +1243,7 @@
    method: 'post',
    data: {
      domain: 'screenshot',
      keys: ['1']
      keys: ['2358']
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
@@ -1310,7 +1349,6 @@
//笔记弹窗
const addNoteVisble = ref(false)
const formData = reactive({
  name: '',
  desc: ''
})
//笔记弹窗关闭
@@ -1405,8 +1443,9 @@
    case '高亮':
      break
    case '笔记':
      formData.name = ''
      formData.desc = ''
      addNoteVisble.value = true
      showToolBox.value = false
      break
    case '标注':
      break
@@ -1433,9 +1472,6 @@

const clickSelect = (item) => {
  colorActive.value = item.key
  if (toolActive.value == '笔记') {
    addNoteVisble.value = true
  }
  if (toolActive.value == '高亮') {
    dialogToolData.lineHeight.push({
      selectNode: selectNode.value,
@@ -1452,8 +1488,8 @@
        setKeyRequests: [
          {
            domain: 'highLight',
            key: '1',
            value: JSON.stringify([dialogToolData.lineHeight])
            key: '2358',
            value: JSON.stringify(dialogToolData.lineHeight)
          }
        ]
      }
@@ -1480,7 +1516,7 @@
        setKeyRequests: [
          {
            domain: 'underline',
            key: '1',
            key: '2358',
            value: JSON.stringify(dialogToolData.scribeList)
          }
        ]
@@ -1497,19 +1533,16 @@
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({
          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({
@@ -1519,7 +1552,7 @@
            setKeyRequests: [
              {
                domain: 'notes',
                key: '1',
              key: '2358',
                value: JSON.stringify(dialogToolData.notesList)
              }
            ]
@@ -1529,15 +1562,11 @@
          addNoteVisble.value = false
          colorActive.value = ''
          toolActive.value = ''
          // getNotesList()
        getNotesList()
          setTimeout(() => {
            lock.value = false
          }, 1000)
        })
      } else {
        ElMessage.error('笔记标题不能为空!')
        lock.value = false
      }
    } else {
      ElMessage.error('笔记内容不能为空!')
      lock.value = false
@@ -1553,14 +1582,13 @@
    method: 'post',
    data: {
      domain: 'notes',
      keys: ['1']
      keys: ['2358']
    }
  }).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')
      console.log(list, '笔记')
      if (list.length > 0) {
        list.forEach((item, index) => {
          item.createDate = moment(item.createDate).format('YYYY-MM-DD')
@@ -1590,7 +1618,7 @@
          let rHtml1 = ''
          rHtml1 = text1.replace(
            rReg1,
            `<span style="text-decoration:underline;text-underline-thickness:2px;text-underline-offset:4px;text-decoration-color:${item.color}" class="underline">${item.selectText}</span><img src="${biji1}" style="cursor: pointer" onclick="notesVisbleShow('${item.selectText}')"/>`
            `<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
        })
@@ -1607,7 +1635,7 @@
    method: 'post',
    data: {
      domain: 'underline',
      keys: ['1']
      keys: ['2358']
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
@@ -1642,7 +1670,7 @@
    method: 'post',
    data: {
      domain: 'highLight',
      keys: ['1']
      keys: ['2358']
    }
  }).then((res) => {
    if (res && res.length > 0 && res[0].value) {
@@ -1674,7 +1702,6 @@
window.notesVisbleShow = function (txt) {
  addNoteVisble.value = true
  let notes = dialogToolData.notesList.find((item) => item.selectText == txt)
  formData.name = notes.name
  formData.desc = notes.note
}
window.deleteScribeShow = function (txt) {
@@ -1687,7 +1714,7 @@
      setKeyRequests: [
        {
          domain: 'underline',
          key: '1',
          key: '2358',
          value: JSON.stringify(list)
        }
      ]
@@ -1707,7 +1734,7 @@
      setKeyRequests: [
        {
          domain: 'highLight',
          key: '1',
          key: '2358',
          value: JSON.stringify(list)
        }
      ]
@@ -1729,7 +1756,6 @@
  selectText.value = item.selectText
  colorActive.value = item.color
  dialogToolData.chapter = item.chapter
  formData.name = item.name
  formData.desc = item.note
  addNoteVisble.value = true
}
@@ -1746,7 +1772,7 @@
        setKeyRequests: [
          {
            domain: 'notes',
            key: '1',
            key: '2358',
            value: JSON.stringify(list)
          }
        ]
@@ -1806,13 +1832,18 @@
    headerData.pageSize = Number(headerData.pageSize) - 5
  }
}

const layoutBtn =() =>{
  localStorage.clear()
  router.push('/')
}
</script>

<style lang="less">
.homeBox {
  width: 100%;
  height: 100%;
  background:#C6C6C6;
  background: #8cabeb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
@@ -1838,12 +1869,11 @@
      .layout{
        width: 69px;
        height: 30px;
        background: #0093FF;
        background: #0093ff;
        border-radius: 15px;
        color:#fff;
        text-align:center;
        line-height:30px;

      }
    }
  }
@@ -2028,22 +2058,22 @@

        .all {
          width: 50px;
          height: 20px;
          height: 22px;
          border-radius: 17px;
          margin: 10px 10px 10px 0;
          border: 1px solid #d8d8d8;
          text-align: center;
          line-height: 17px;
          line-height: 20px;
          font-size: 12px;
        }

        .allActive {
          width: 50px;
          height: 20px;
          height: 22px;
          border-radius: 17px;
          margin: 10px 10px 10px 0;
          text-align: center;
          line-height: 17px;
          line-height: 20px;
          color: #fff;
          background: #0093ff;
          border: 1px solid #0093ff;
@@ -2053,7 +2083,7 @@
        .scribeItem {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border-radius: 3px;
          margin: 10px auto;
          border: none;
        }
@@ -2120,15 +2150,25 @@
          position: relative;
          margin: 10px;
          line-height: 20px;
          background: #fff;
          border-radius: 5px;
          padding: 10px 0;
          .textBox {
            padding: 0 5px 10px 5px;
            .title {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-right: 10px;
              .border-left {
                height: 25px;
                border-right: 4px solid;
                border-radius: 0 5px 5px 0;
                margin-right: 10px;
              }
              .title-con {
                display: flex;
                align-items: center;
                color: #949494;
                .round {
                  width: 10px;
                  height: 10px;
@@ -2143,50 +2183,28 @@
            }
            .chapter {
              color: #b7b7b7;
              margin-top: 5px;
            }
            .chapterName {
              float: right;
              width: 150px;
              margin: 5px 5px 5px 14px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              text-align: right;
              border-left: 3px solid #b7b7b7;
              border-left-radius: 20px;
              padding: 0 5px;
            }
          }
          .noteText {
            text-indent: 2ch;
            margin-top: 5px;
            .label {
              width: 40px;
              flex-shrink: 0;
            }

            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;
              -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;
            }
          }
        }
@@ -2241,7 +2259,6 @@
            font-weight:bold;
            margin-bottom:3px;
          }

        }
        .rightBox {
          display: flex;
@@ -2548,6 +2565,41 @@
    }
  }
}
.myNoteDialogs {
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  .el-dialog__header {
    padding: 10px;
    text-align: center;
    background: #f4f5f9;
  }
  .el-dialog__headerbtn {
    top: 0px !important;
    right: 0px !important;
  }
  .el-dialog__body {
    padding: 20px !important;
  }
}
.noteColorSelectBox {
  margin-top: 10px;
  width: 190px;
  display: flex;
  .flex1 {
    flex: 1;
    .scribeItem {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      margin: 10px auto;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.videoBox video {
  width: 100%;
}