问题修改

litian

2024-04-25 c66e9eaa87989cd0b312fa1d8777a4bf799db0da

问题修改

 package.json

@@ -27,7 +27,7 @@
    "element-plus": "^2.4.3",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "moment": "^2.29.4",
    "moment": "^2.30.1",
    "node-xlsx": "^0.23.0",
    "pinia": "^2.1.7",
    "qiankun": "^2.10.16",
@@ -35,6 +35,7 @@
    "vite-plugin-electron": "^0.15.5",
    "vue": "^3.3.10",
    "vue-cli-plugin-style-resources-loader": "^0.1.5",
    "vue-clipboard3": "^2.0.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {

 src/assets/base.css

@@ -90,3 +90,25 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

 src/assets/main.css

@@ -29,6 +29,10 @@
  list-style: none;
  padding:0;
}
a {
  text-decoration: none;
  cursor: pointer;
}
.hover{
  cursor: pointer;
}
@@ -140,3 +144,10 @@
  flex:1;
  text-align: center;
}

.el-input__inner{
  border:none !important;
}
.el-button{
  padding: 8px 15px !important;
}

 src/child.ts

@@ -1,4 +1,4 @@
import { registerMicroApps, setDefaultMountApp, start } from 'qiankun'
import { registerMicroApps, setDefaultMountApp, start ,initGlobalState } from 'qiankun'
const microApps = [
  {
    // - 必选，微应用的名称，微应用之间必须确保唯一
@@ -11,13 +11,14 @@
    // - 必选，微应用的激活规则
    //支持直接配置字符串或字符串数组，如 activeRule: '/app1' 或 activeRule: ['/app1', '/app2']，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。
    //支持配置一个 active function 函数或一组 active function。函数会传入当前 location 作为参数，函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith('/app1')。
    activeRule: '/home' //匹配所有以/subPath开头的为子应用
    activeRule: '/home',//匹配所有以/subPath开头的为子应用
    //loader - (loading: boolean) => void - 可选，loading 状态发生变化时会调用的方法。
    //可选，主应用需要传递给微应用的数据。
    // props: {
    //   _parent_base: '/app-content/',
    //   msg:'这是主应用传给子应用的消息'
    // },
    sandbox:{strictStyleIsolation: true}
  }
]
// 乾坤提供的子应用生命周期钩子  可用于加载loading

 src/views/components/front006.vue

New file
@@ -0,0 +1,458 @@
<template>
  <div>
    <ul>
      <li>
        <a @click="goDetails('a007')">专题一 学前儿童生理发育特点与保健</a>
        <ul class="h2">
          <li>
            <a @click="goDetails('b001')">学习主题一 运动系统</a>
            <ul>
              <li><a @click="goDetails('c001')">一、学前儿童运动系统的特点</a></li>
              <li><a @click="goDetails('c002')">二、学前儿童运动系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b002')">学习主题二 呼吸系统</a>
            <ul>
              <li><a @click="goDetails('c003')">一、学前儿童呼吸系统的特点</a></li>
              <li><a @click="goDetails('c004')">二、学前儿童呼吸系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b003')">学习主题三 循环系统</a>
            <ul>
              <li><a @click="goDetails('c005')">一、学前儿童循环系统的特点</a></li>
              <li><a @click="goDetails('c006')">二、学前儿童循环系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b004')">学习主题四 消化系统</a>
            <ul>
              <li><a @click="goDetails('c007')">一、学前儿童消化系统的特点</a></li>
              <li><a @click="goDetails('c008')">二、学前儿童消化系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b005')">学习主题五 泌尿系统</a>
            <ul>
              <li><a @click="goDetails('c009')">一、学前儿童泌尿系统的特点</a></li>
              <li><a @click="goDetails('c010')">二、学前儿童泌尿系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b006')">学习主题六 生殖系统</a>
            <ul>
              <li><a @click="goDetails('c011')">一、学前儿童生殖系统的特点</a></li>
              <li><a @click="goDetails('c012')">二、学前儿童生殖系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b007')">学习主题七 内分泌系统</a>
            <ul>
              <li><a @click="goDetails('c013')">一、学前儿童内分泌系统的特点</a></li>
              <li><a @click="goDetails('c014')">二、学前儿童内分泌系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b008')">学习主题八 神经系统</a>
            <ul>
              <li><a @click="goDetails('c015')">一、神经系统的构成</a></li>
              <li><a @click="goDetails('c016')">二、学前儿童神经系统的特点</a></li>
              <li><a @click="goDetails('c017')">三、学前儿童神经系统的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b009')">学习主题九 感觉器官</a>
            <ul>
              <li><a @click="goDetails('c018')">一、视觉器官——眼</a></li>
              <li><a @click="goDetails('c019')">二、听觉器官——耳</a></li>
              <li><a @click="goDetails('c020')">三、本体感觉器官——皮肤</a></li>
              <li><a @click="goDetails('c021')">四、其他感觉器官</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a008')">专题二 学前儿童的生长发育</a>
        <ul>
          <li>
            <a @click="goDetails('b010')">学习主题一 认识学前儿童生长发育</a>
            <ul>
              <li>
                <a @click="goDetails('c022')">一、生长、发育与成熟</a>
              </li>
              <li>
                <a @click="goDetails('c023')">二、学前儿童年龄阶段的划分及各阶段生长发育的特点</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b011')">学习主题二 学前儿童生长发育的规律</a>
            <ul>
              <li>
                <a @click="goDetails('c024')">一、生长发育的连续性和阶段性</a>
              </li>
              <li>
                <a @click="goDetails('c025')">二、生长发育的程序性</a>
              </li>
              <li>
                <a @click="goDetails('c026')">三、生长发育的不均衡性</a>
              </li>
              <li>
                <a @click="goDetails('c027')">四、生长发育的相互关联性</a>
              </li>
              <li>
                <a @click="goDetails('c028')">五、生长发育的个体差异性</a>
              </li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b012')">学习主题三 影响学前儿童生长发育的因素</a>
            <ul>
              <li><a @click="goDetails('c029')">一、遗传因素</a></li>
              <li><a @click="goDetails('c030')">二、环境因素</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a009')">专题三 学前儿童心理发展特点与保健</a>
        <ul>
          <li>
            <a @click="goDetails('b013')">学习主题一 学前儿童心理的发展</a>
            <ul>
              <li><a @click="goDetails('c030')">一、学前儿童心理发展的特点</a></li>
              <li><a @click="goDetails('c032')">二、影响学前儿童心理发展的因素</a></li>
              <li><a @click="goDetails('c033')">三、学前儿童的心理健康</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b014')">学习主题二 学前儿童常见的心理行为问题及其引导</a>
            <ul>
              <li><a @click="goDetails('c034')">一、学前儿童产生压力的原因</a></li>
              <li><a @click="goDetails('c035')">二、儿童常见的心理行为问题及其引导</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b015')">学习主题三 学前儿童常见的心理疾病及其预防</a>
            <ul>
              <li><a @click="goDetails('c036')">一、言语和语言障碍</a></li>
              <li><a @click="goDetails('c037')">二、精神发育迟滞</a></li>
              <li><a @click="goDetails('c038')">三、孤独症</a></li>
              <li><a @click="goDetails('c039')">四、儿童多动症</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a010')">专题四 学前儿童健康评价</a>
        <ul>
          <li>
            <a @click="goDetails('b016')">学习主题一 学前儿童身体健康的评价</a>
            <ul>
              <li><a @click="goDetails('c040')">一、学前儿童生长发育的评价</a></li>
              <li><a @click="goDetails('c041')">二、学前儿童健康检查</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b017')">学习主题二 学前儿童心理健康的评价</a>
            <ul>
              <li><a @click="goDetails('c042')">一、学前儿童心理评估的概念和特点</a></li>
              <li><a @click="goDetails('c043')">二、学前儿童心理测试的方法</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a011')">专题五 学前儿童营养卫生与保健</a>
        <ul>
          <li>
            <a @click="goDetails('b018')">学习主题一 营养学基础知识</a>
            <ul>
              <li><a @click="goDetails('c044')">一、学前儿童对能量的需求</a></li>
              <li><a @click="goDetails('c045')">二、产能营养素</a></li>
              <li><a @click="goDetails('c046')">三、非产能营养素</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b019')">学习主题二 婴儿喂养</a>
            <ul>
              <li><a @click="goDetails('c047')">一、母乳喂养</a></li>
              <li><a @click="goDetails('c048')">二、人工喂养和混合喂养</a></li>
              <li><a @click="goDetails('c049')">三、辅食的添加</a></li>
              <li><a @click="goDetails('c050')">四、断奶</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b020')">学习主题三 学前儿童的膳食</a>
            <ul>
              <li><a @click="goDetails('c051')">一、学前儿童膳食的配制原则</a></li>
              <li><a @click="goDetails('c052')">二、学前儿童饮食卫生</a></li>
              <li><a @click="goDetails('c053')">三、学前儿童的饮食行为</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b021')">学习主题四 托幼机构的膳食管理</a>
            <ul>
              <li><a @click="goDetails('c054')">一、托幼机构的膳食计划</a></li>
              <li><a @click="goDetails('c055')">二、膳食调查</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a012')">专题六 学前儿童各年龄期的特点与保健</a>
        <ul>
          <li>
            <a @click="goDetails('b022')">学习主题一 胎儿期的特点与保健</a>
            <ul>
              <li><a @click="goDetails('c056')">一、胎儿期的特点</a></li>
              <li><a @click="goDetails('c057')">二、孕妇的卫生与保健</a></li>
              <li><a @click="goDetails('c058')">三、胎儿的保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b023')">学习主题二 新生儿期的特点与保健</a>
            <ul>
              <li><a @click="goDetails('c059')">一、新生儿期的特点</a></li>
              <li><a @click="goDetails('c060')">二、新生儿期的保健</a></li>
              <li><a @click="goDetails('c061')">三、未成熟儿与过熟儿</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b024')">学习主题三 婴儿期的特点与保健</a>
            <ul>
              <li><a @click="goDetails('c062')">一、婴儿期的特点</a></li>
              <li><a @click="goDetails('c063')">二、婴儿期的护理与保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b025')">学习主题四 幼儿前期的特点与保健</a>
            <ul>
              <li><a @click="goDetails('c064')">一、幼儿前期的特点</a></li>
              <li><a @click="goDetails('c065')">二、幼儿前期的护理与保健</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b026')">学习主题五 幼儿期的特点与保健</a>
            <ul>
              <li><a @click="goDetails('c066')">一、幼儿期的特点</a></li>
              <li><a @click="goDetails('c067')">二、幼儿期的护理与保健</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a013')">专题七 学前儿童疾病及其预防</a>
        <ul>
          <li>
            <a @click="goDetails('b027')">学习主题一 疾病基础</a>
            <ul>
              <li><a @click="goDetails('c068')">一、疾病的种类</a></li>
              <li><a @click="goDetails('c069')">二、疾病早发现</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b028')">学习主题二 遗传病及其预防</a>
            <ul>
              <li><a @click="goDetails('c070')">一、认识遗传病</a></li>
              <li><a @click="goDetails('c071')">二、近亲结婚与隐性遗传病</a></li>
              <li><a @click="goDetails('c072')">三、遗传病的预防——优生</a></li>
              <li><a @click="goDetails('c073')">四、优生措施</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b029')">学习主题三 新生儿常见疾病及其预防</a>
            <ul>
              <li><a @click="goDetails('c074')">一、新生儿硬肿病</a></li>
              <li><a @click="goDetails('c075')">二、新生儿脐炎</a></li>
              <li><a @click="goDetails('c076')">三、新生儿肺炎</a></li>
              <li><a @click="goDetails('c077')">四、鹅口疮</a></li>
              <li><a @click="goDetails('c078')">五、新生儿破伤风</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b030')">学习主题四 婴幼儿常见病及其预防</a>
            <ul>
              <li><a @click="goDetails('c079')">一、肥胖症</a></li>
              <li><a @click="goDetails('c080')">二、维生素D缺乏性佝偻病</a></li>
              <li><a @click="goDetails('c081')">三、缺铁性贫血</a></li>
              <li><a @click="goDetails('c082')">四、上呼吸道感染</a></li>
              <li><a @click="goDetails('c083')">五、急性扁桃体炎</a></li>
              <li><a @click="goDetails('c084')">六、肺炎</a></li>
              <li><a @click="goDetails('c085')">七、腹泻</a></li>
              <li><a @click="goDetails('c086')">八、龋齿</a></li>
              <li><a @click="goDetails('c087')">九、急性化脓性中耳炎</a></li>
              <li><a @click="goDetails('c088')">十、弱视</a></li>
              <li><a @click="goDetails('c089')">十一、痱子</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b031')">学习主题五 学前儿童常见传染病及其预防</a>
            <ul>
              <li><a @click="goDetails('c090')">一、传染病的基础知识</a></li>
              <li><a @click="goDetails('c091')">二、学前儿童常见传染病及其预防</a></li>
              <li><a @click="goDetails('c092')">三、寄生虫病防治</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a014')">专题八 学前儿童常用护理与急救技术</a>
        <ul>
          <li>
            <a @click="goDetails('b032')">学习主题一 常用护理技术</a>
            <ul>
              <li><a @click="goDetails('c093')">一、测量体温</a></li>
              <li><a @click="goDetails('c094')">二、物理降温</a></li>
              <li><a @click="goDetails('c095')">三、热敷法</a></li>
              <li><a @click="goDetails('c096')">四、测量脉搏</a></li>
              <li><a @click="goDetails('c097')">五、观察呼吸</a></li>
              <li><a @click="goDetails('c098')">六、喂药</a></li>
              <li><a @click="goDetails('c099')">七、翻转眼皮</a></li>
              <li><a @click="goDetails('c101')">八、滴眼药水、涂眼药膏</a></li>
              <li><a @click="goDetails('c101')">九、滴鼻药水</a></li>
              <li><a @click="goDetails('c102')">十、滴耳药水</a></li>
              <li><a @click="goDetails('c103')">十一、止鼻血</a></li>
              <li><a @click="goDetails('c104')">十二、简易通便法</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b033')">学习主题二 学前儿童常见的意外事故及急救</a>
            <ul>
              <li><a @click="goDetails('c105')">一、常见意外事故及其处理</a></li>
              <li><a @click="goDetails('c106')">二、常用急救术</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b034')">学习主题三 托幼机构意外事故的常见原因与安全管理</a>
            <ul>
              <li><a @click="goDetails('c107')">一、托幼机构意外事故的常见原因</a></li>
              <li><a @click="goDetails('c108')">二、托幼机构的安全管理</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a015')">专题九 学前儿童生活保健制度</a>
        <ul>
          <li>
            <a @click="goDetails('b035')">学习主题一 学前儿童生活制度</a>
            <ul>
              <li><a @click="goDetails('c109')">一、制定合理的生活制度的意义</a></li>
              <li><a @click="goDetails('c110')">二、制定一日生活制度的依据</a></li>
              <li><a @click="goDetails('c111')">三、执行一日生活制度的注意事项</a></li>
              <li><a @click="goDetails('c112')">四、学前儿童一日生活各环节的卫生要求</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b036')">学习主题二 托幼机构的卫生保健制度</a>
            <ul>
              <li><a @click="goDetails('c113')">一、体格检查制度</a></li>
              <li><a @click="goDetails('c114')">二、预防接种制度</a></li>
              <li><a @click="goDetails('c115')">三、隔离制度</a></li>
              <li><a @click="goDetails('c116')">四、消毒制度</a></li>
              <li><a @click="goDetails('c117')">五、环境卫生制度</a></li>
              <li><a @click="goDetails('c118')">六、卫生保健登记和统计制度</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a @click="goDetails('a016')">专题十 托幼机构的环境卫生</a>
        <ul>
          <li>
            <a @click="goDetails('b037')">学习主题一 托幼机构的建筑卫生</a>
            <ul>
              <li><a @click="goDetails('c119')">一、幼儿园园址的选择</a></li>
              <li><a @click="goDetails('c120')">二、园内布局的卫生要求</a></li>
              <li><a @click="goDetails('c121')">三、幼儿园各室配置的卫生要求</a></li>
              <li><a @click="goDetails('c122')">四、室内的采光和照明</a></li>
              <li><a @click="goDetails('c123')">五、室内的通风和采暖</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li>
            <a @click="goDetails('b038')">学习主题二 托幼机构的设备及教具、玩具卫生</a>
            <ul>
              <li><a @click="goDetails('c124')">一、家具的卫生</a></li>
              <li><a @click="goDetails('c125')">二、文具、教具及玩具的卫生</a></li>
              <li><a @click="goDetails('c126')">三、体育设备卫生</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a @click="goDetails('a017')">综合云测试</a></li>
      <li><a @click="goDetails('a018')">参考文献</a></li>
      <li><a @click="goDetails('a019')">附录 常见食物叶酸含量表</a></li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
const goDetails = (index) => {
  console.log(index)
  document.getElementById(index).scrollIntoView()
}
</script>

<style lang="less" scoped>
ul ul {
  margin-left: 15px;
}
</style>

 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">
@@ -41,9 +42,9 @@
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox" v-if="activeMenu !== 2">
            <el-input class="custom-input" placeholder="请输入内容">
            <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>
@@ -52,7 +53,7 @@
              <p>默认资源</p>
              <div :class="resourceType == 'default' ? 'text' : 'line'"></div>
            </div>
            <hr class="hr"/>
            <hr class="hr" />
            <div class="tabItem hover" @click="selectResourceType('teacher')">
              <p>教师资源</p>
              <div :class="resourceType == 'teacher' ? 'text' : 'line'"></div>
@@ -60,7 +61,9 @@
          </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">
@@ -80,25 +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 class="resourceBox">
            <div class="inputBox">
              <el-input class="custom-input" placeholder="请输入内容">
              <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>
          <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">
@@ -120,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
@@ -396,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="笔记标题">
@@ -409,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>
@@ -442,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'
@@ -520,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([
  {
@@ -553,21 +637,26 @@
const activeMenu = ref(0)
//资源类型

const resourceType = ref("default")
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
@@ -578,6 +667,11 @@
    menuState.notesColor = item.key
  } else {
    menuState.notesColor = 'all'
  }
}
const searchBook = async () => {
  if (activeMenu.value == 1) {
    getNotesList()
  }
}

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

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

//内容区域顶部显示
@@ -1035,8 +1417,7 @@
  minutes: 0,
  hours: 0,
  process: '42%',
  pageSize: 100,
  brushToolShow: true
  pageSize: 100
})
//上课时长计时器
const timer = ref(null)
@@ -1072,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>

@@ -1141,6 +1506,12 @@
          margin-bottom: 4px;
        }
      }
      .reload {
        width: 80px;
        position: absolute;
        bottom: 100px;
        text-align: center;
      }
      .setting {
        width: 80px;
        position: absolute;
@@ -1161,31 +1532,31 @@
        justify-content: center;
        align-items: center;
      }
      .resourceBox{
      .resourceBox {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .resourceTab{
        width:100%;
      .resourceTab {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size:16px;
        .hr{
          height:25px;
          background:#DBDBDB !important;
        font-size: 16px;
        .hr {
          height: 25px;
          color: #dbdbdb !important;
        }
        .tabItem:first-child(1){
          border-right:1px solid #707070;
        .tabItem:first-child(1) {
          border-right: 1px solid #707070;
        }
        .tabItem{
          flex:1;
        .tabItem {
          flex: 1;
          text-align: center;
          line-height:57px;
          line-height: 57px;
        }
        .text {
          width: 43px;
@@ -1194,7 +1565,7 @@
          background: #0093ff;
          border-radius: 3px 3px 0px 0px;
        }
        .line{
        .line {
          height: 3px;
        }
      }
@@ -1207,6 +1578,10 @@
        .is-focus,
        .el-input__wrapper {
          box-shadow: none !important;
          .el-input__inner {
            border: none !important;
            height: 34px !important;
          }
        }
      }
      .screenBox {
@@ -1262,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;
@@ -1336,6 +1769,7 @@
      .pageBox-content {
        height: calc(100% - 57px);
        position: relative;
        overflow-y: auto;
        #container {
          background: #fbf9f4;
          height: 100%;
@@ -1416,6 +1850,7 @@
        .el-tabs__item {
          flex: 1 !important;
          padding: 0 !important;
          text-align: center;
        }
        .el-tabs__active-bar {
          width: 43px !important;
@@ -1469,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;
@@ -1490,6 +1926,9 @@
          margin-right: 5px;
        }
      }
    }
    .draggableBox:hover {
      height: 430px;
    }
    .floatToolItem:hover {
      background-color: #fff;
@@ -1568,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>

 tsconfig.app.json

@@ -1,6 +1,6 @@
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","src/**/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,