shuzi

litian

2024-04-24 300c9e790fd04de30c982a05f8d7cd157f442b45

shuzi

 electron/config.ts

@@ -1,4 +1,4 @@
// 测试
export const ctx = "http://182.92.203.7:5001";
export const ctx = "http://182.92.203.7:3001";
export const downloaderFileCtx = "http://182.92.203.7:3007/DigitalTextbookReader";


 src/App.vue

@@ -99,18 +99,18 @@
})

const token = localStorage.getItem('token')
if (token) {
  request({
    url: '/identity/User/GetCurrentUser',
    method: 'post'
  }).then((res) => {
    // console.log(res)
  })
} else {
  router.replace({
    path: '/login'
  })
}
// if (token) {
//   request({
//     url: '/identity/User/GetCurrentUser',
//     method: 'post'
//   }).then((res) => {
//     // console.log(res)
//   })
// } else {
//   router.replace({
//     path: '/login'
//   })
// }
</script>

<style>

 src/assets/images/menu/AIyuyinyuedu.png

 src/assets/images/menu/AIzhinengwenda.png

 src/assets/images/menu/C++.png

 src/assets/images/menu/GGB.png

 src/assets/images/menu/Javascript.png

 src/assets/images/menu/cidian.png

 src/assets/images/menu/hudongwenda.png

 src/assets/images/menu/jihe.png

 src/assets/images/menu/moxinggongju.png

 src/assets/images/menu/python.png

 src/assets/images/menu/shengzikapian.png

 src/assets/images/menu/shouqi-L.png

 src/assets/images/menu/shouqi-R.png

 src/assets/images/menu/siweidaotu.png

 src/assets/images/operation/AIyuedu-b.png

 src/assets/images/operation/AIyuedu.png

 src/assets/images/operation/Clearaway-b.png

 src/assets/images/operation/Clearaway-w.png

 src/assets/images/operation/baiban-b.png

 src/assets/images/operation/baiban-w.png

 src/assets/images/operation/biaoqian-b.png

 src/assets/images/operation/biaoqian-w.png

 src/assets/images/operation/biaozhu-b.png

 src/assets/images/operation/biaozhu-w.png

 src/assets/images/operation/biaozhu.png

 src/assets/images/operation/biaozhu1.png

 src/assets/images/operation/biji-b.png

 src/assets/images/operation/biji.png

 src/assets/images/operation/charuziyuan.png

 src/assets/images/operation/charuziyuan_blue.png

 src/assets/images/operation/cidian-b.png

 src/assets/images/operation/cidian.png

 src/assets/images/operation/clear.png

 src/assets/images/operation/clearPrevious.png

 src/assets/images/operation/dati_charu.png

 src/assets/images/operation/dati_charu_blue.png

 src/assets/images/operation/fuzhi-b.png

 src/assets/images/operation/fuzhi.png

 src/assets/images/operation/gaoliang-b.png

 src/assets/images/operation/gaoliang.png

 src/assets/images/operation/hide.png

 src/assets/images/operation/huabi-b.png

 src/assets/images/operation/huabi-w.png

 src/assets/images/operation/huabi.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710296600030" class="icon" viewBox="0 0 1185 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15508" xmlns:xlink="http://www.w3.org/1999/xlink" width="231.4453125" height="200"><path d="M269.473684 1024c-38.804211 0-80.842105-6.575158-116.412631-19.779368-80.788211-29.642105-122.772211-89.034105-126.005895-164.864-3.233684-115.388632 84.021895-154.947368 151.875368-184.643369 64.673684-29.642105 100.244211-46.133895 100.244211-95.609263 0-59.338105-100.244211-108.813474-142.282105-115.388632a42.846316 42.846316 0 0 1-25.869474-39.558736c3.233684-16.491789 19.402105-29.642105 35.570526-26.408421 58.206316 9.916632 197.146947 72.542316 197.146948 181.355789 0 95.609263-77.554526 128.592842-138.940632 154.947368-71.141053 32.983579-116.358737 56.050526-113.125053 125.305264 0 49.475368 29.103158 85.692632 80.842106 105.525894 83.968 32.983579 210.027789 9.862737 242.364631-29.642105 12.934737-13.258105 32.336842-16.545684 45.271579-3.341474s16.168421 32.983579 3.233684 46.133895c-32.336842 39.612632-113.178947 65.967158-193.967158 65.967158zM473.734737 820.816842c-6.736842 6.359579 3.341474 22.258526 16.815158 31.797895 13.473684 9.593263 30.288842 12.773053 37.025684 6.413474l141.365895-101.861053-134.629053-92.16L473.734737 820.816842zM1123.328 28.725895c-37.025684-25.438316-90.866526-19.078737-117.813895 19.078737l-434.176 566.272 134.629053 92.213894L1143.538526 140.126316c26.947368-35.031579 16.815158-85.854316-20.210526-111.346527z" fill="#2c2c2c" p-id="15509"></path></svg>

 src/assets/images/operation/huaxian.png

 src/assets/images/operation/huaxian1.png

 src/assets/images/operation/logo-wenli.png

 src/assets/images/operation/screenshot-b.png

 src/assets/images/operation/screenshot-w.png

 src/assets/images/operation/setting.png

 src/assets/images/operation/shangkezujian.png

 src/assets/images/operation/show.png

 src/assets/images/operation/wenzi-b.png

 src/assets/images/operation/wenzi-w.png

 src/assets/images/operation/xiake.png

 src/assets/images/operation/xuanzhong.png

 src/assets/images/operation/yuyinyuedu-b.png

 src/assets/images/operation/yuyinyuedu.png

 src/assets/images/operation/zoomIn.png

 src/assets/images/operation/zoomOut.png

 src/assets/main.css

@@ -25,3 +25,118 @@
  max-height: 100%;
  margin: auto;
}
ul {
  list-style: none;
  padding:0;
}
.hover{
  cursor: pointer;
}

/* 画笔工具 */
.popinnerBox .brush,.popinnerBox .write{
  display: flex;
  padding: 10px 0;
}
.popinnerBox  .thickness {
  border-right: 1px solid #f3f3f3;
  width: 40px;
  padding-right:10px;
  text-align: center;
  
}
.popinnerBox .thickness .small {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cccccc;
  margin:0 auto;
}
.popinnerBox .thickness .middle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cccccc;
  margin:0 auto;
  margin-top:15px;
}
.popinnerBox .thickness .large {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #cccccc;
  margin:0 auto;
  margin-top:15px;
}
.popinnerBox .thickness .active {
  background: #0093ff;
}
.popinnerBox .lineStyle .lineTypeBox{
  display: flex;
  justify-content: space-between;
  padding:0 10px;
}
.popinnerBox .lineStyle .lineTypeBox .typeItem{
  flex:1;
  padding:5px 20px;
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  margin:0 5px;
  position: relative;
}
.popinnerBox .lineStyle .lineTypeBox .typeItem .solid{
  border: 1px solid #707070;
  margin: 7px auto;
}
.popinnerBox .lineStyle .lineTypeBox .typeItem .dashed{
  border: 1px dashed #707070;
  margin: 7px auto;
}
.popinnerBox .lineStyle .lineTypeBox .lineTypeActive {
  border: 1px solid #0093ff;
}
.popinnerBox .lineStyle .lineTypeBox .lineTypeActive .activeIcon{
  width:12px;
  height:11px;
  background:#0093ff;
  border-radius: 5px 0 5px 0;
  position: absolute;
  right:0;
  bottom: 0;
  display: flex;
  justify-content:center;
  align-items: center;
}


.popinnerBox .colorSelectBox {
  padding: 0 10px;
  width: 190px;
  display: flex;
  background: #ffffff;
  border-radius: 5px;
}
.popinnerBox .colorSelectBox .flex1 {
  flex: 1;
  
}
.popinnerBox .colorSelectBox .scribeItem {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  margin: 15px auto 0 auto;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popinnerBox .cleanup,.popinnerBox .label{
  display: flex;
  justify-content: space-between;
  padding:10px 0
}
.popinnerBox .cleanup .cleanupItem,.popinnerBox .label .labelItem{
  flex:1;
  text-align: center;
}

 src/child.ts

New file
@@ -0,0 +1,47 @@
import { registerMicroApps,setDefaultMountApp} from "qiankun";
const microApps = [
  {
    // - 必选，微应用的名称，微应用之间必须确保唯一
    name: "vue-app", 
    // - 必选，微应用的入口
    entry: 'http://192.168.3.196:8080/',
    // - 必选，微应用的容器节点的选择器或者 Element 实例
    container: "#container",
    // - 必选，微应用的激活规则
    //支持直接配置字符串或字符串数组，如 activeRule: '/app1' 或 activeRule: ['/app1', '/app2']，当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。
    //支持配置一个 active function 函数或一组 active function。函数会传入当前 location 作为参数，函数返回 true 时表明当前微应用会被激活。如 location => location.pathname.startsWith('/app1')。
    activeRule: "#/app-content",   //匹配所有以/subPath开头的为子应用
    //loader - (loading: boolean) => void - 可选，loading 状态发生变化时会调用的方法。
    //可选，主应用需要传递给微应用的数据。
    props: {
      _parent_base: '/app-content/',
      msg:'这是主应用传给子应用的消息'
    },
  },
];
// 乾坤提供的子应用生命周期钩子  可用于加载loading
const mount={
    beforeLoad: () => {
      //开始加载loading
      console.log('子应用加载前')
    },
    beforeMount: () => {
      console.log('子应用挂载前')
    },
    afterMount: () => {
      //结束加载loading
      console.log('子应用挂载后')
    },
    beforeUnmount: () => {
      console.log('子应用卸载前')
    },
    afterUnmount: () => {
      console.log('子应用卸载后')
    },
  }
//注册子应用
registerMicroApps(microApps,mount);
//设置默认启动子应用
setDefaultMountApp('/subPath');
//启动qiankun | 不可重复启动 | 如果子应用入口在app.vue里可以在这启动否则会报错找不到子应用结点
//start()

 src/main.ts

@@ -8,7 +8,9 @@
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import toolClass from '@/assets/js/toolClass'
import request from "@/plugin/axios/index.ts";
import request from "@/plugin/axios/index.ts"
import "./child.ts" 


const handleGetToken = () => {
  return localStorage.getItem("token");

 src/router/index.ts

@@ -27,6 +27,7 @@
        }
      ]
    }
  
  ]
})


 src/views/child.vue

New file
@@ -0,0 +1,15 @@

<template>
    <div>
        <div id="child1" class="child1"></div>
    </div>
</template>
<script>

</script>  

<style lang="less" setup lang="ts">
.child1{
  width: 100%;
  height: 500px;
}

 src/views/home.vue

@@ -4,6 +4,7 @@
      <p>数字教材平台</p>
    </div>
    <div class="contentBox">
      <!-- 菜单 -->
      <div class="menuBox">
        <div
          :class="['menuItem', activeMenu == index ? 'active' : '']"
@@ -16,48 +17,412 @@
          </div>
          <p>{{ item.name }}</p>
        </div>
        <!-- 设置 -->
        <el-popover placement="right" :width="200" trigger="click">
          <div class="settingBox">
            <el-form :model="settingForm" label-width="auto" style="max-width: 400px">
              <el-form-item label="答题音效">
                <el-switch v-model="settingForm.acoustics" />
              </el-form-item>
              <el-form-item label="答题动画">
                <el-switch v-model="settingForm.animation" />
              </el-form-item>
            </el-form>
          </div>
          <template #reference>
            <div class="setting hover">
              <img :src="setting" />
              <div>设置</div>
            </div>
          </template>
        </el-popover>
      </div>
      <div class="pageBox"></div>
      <!-- 菜单内容 -->
      <div class="menuContent" v-if="menuState.open">
        <div class="searchBox">
          <div class="inputBox">
            <el-input class="custom-input" placeholder="请输入内容">
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
        <!-- 目录 -->
        <div class="" v-if="activeMenu == 0"></div>
        <!-- 笔记 -->
        <div class="notesBox" v-if="activeMenu == 1">
          <div class="screenBox">
            <div class="title">筛选</div>
            <div class="flex1 hover" @click="searchClick('all')">
              <div :class="menuState.notesColor == 'all' ? ' allActive' : 'all'">全部</div>
            </div>
            <div
              v-for="item in colorSelectList"
              :key="item.key"
              class="flex1 hover"
              @click="searchClick(item)"
            >
              <div
                :style="{ background: item.key }"
                :class="item.key == menuState.notesColor ? 'activeScribe scribeItem' : 'scribeItem'"
              ></div>
            </div>
          </div>
        </div>
        <!-- 资源 -->
        <div class="" v-if="activeMenu == 2"></div>
        <!-- 知识图谱 -->
        <div class="" v-if="activeMenu == 3"></div>
        <!-- 截图 -->
        <div class="" v-if="activeMenu == 4"></div>
        <!-- 标签 -->
        <div class="" v-if="activeMenu == 5"></div>
      </div>
      <!-- 菜单内容收起 -->
      <div class="menuStateBox" v-if="menuState.open">
        <img :src="shouqiL" @click="menuState.open = false" />
      </div>
      <!-- 中间内容 -->
      <div class="pageBox">
        <!-- 头部显示 -->
        <div class="pageBox-header">
          <div class="classTime">
            <div class="qureIcon"></div>
            <div class="">已上课：{{ headerData.classTime }}</div>
          </div>
          <div class="progress">{{ headerData.process }}</div>
          <div class="rightBox">
            <div class="pageSizeBox">
              <div><img :src="zoomIn" @click="changePageSize('add')" /></div>
              <div>{{ headerData.pageSize }}%</div>
              <div><img :src="zoomOut" @click="changePageSize('reduce')" /></div>
            </div>
            <div class="brushImgBox">
              <div><img :src="huabi2" class="brushImg" />画笔</div>
              <!-- <el-switch v-model="headerData.brushToolShow"  @change="brushToolShow"/> -->
            </div>
          </div>
        </div>
        <!-- 微应用盒子 -->
        <div class="pageBox-content">
          <div id="container"></div>
          <!-- 画笔画布 -->
          <div class="canvas-box">
            <canvas
              @mousedown="mousedown"
              @mousemove.stop.prevent="mousemove"
              @mouseup="mouseup"
              ref="canvas"
              width="100%"
              height="100%"
            ></canvas>
          </div>
        </div>
      </div>
      <!-- 教学组件 -->
      <div class="toolBox">
        <el-menu default-active="2" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>Navigator One</span>
        <div class="toolTitle">
          教学组件
          <div class="text"></div>
        </div>
        <div class="menuList">
          <ul class="menu">
            <li
              v-for="item in teachToolsMenuData"
              :key="item.key"
              :class="item.name === activeTool ? 'activeItem hover' : 'menuItem hover'"
              :style="!toolState.open ? 'padding:10px 15px' : ''"
              @click="selectTeachTools(item)"
            >
              <img :src="item.icon" alt="" />
              <span v-if="toolState.open">{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div :class="['openBox', toolState.open ? 'right' : '']">
          <img :src="shouqiR" v-if="toolState.open" @click="toolState.open = false" />
          <img :src="shouqiL" v-if="!toolState.open" @click="toolState.open = true" />
        </div>
        <div class="classRoomBox" v-if="toolState.open">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="备课组件" name="first">
              <div class="tabBox">
                <div class="insertSelect">
                  <div
                    :class="selectType == 'resource' ? 'typeActive' : 'selectItem hover'"
                    @click="selectTypeClick('resource')"
                  >
                    <img :src="selectType == 'resource' ? charuziyuan_blue : charuziyuan" />
                    <div>插入资源</div>
                  </div>
                  <div
                    :class="selectType == 'answer' ? 'typeActive' : 'selectItem hover'"
                    @click="selectTypeClick('answer')"
                  >
                    <img :src="selectType == 'answer' ? dati_charu_blue : dati_charu" />
                    <div>插入答题</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="上课组件" name="second">
              <div class="tabBox">
                <div class="giveLessons hover" @click="giveLessonsClick()">
                  <img :src="xiake" />
                  <span>{{ classStart ? '上课' : '下课' }}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 画笔工具栏 -->
      <div
        draggable="true"
        class="draggableBox"
        @dragstart="dragstart($event)"
        @dragend="dragend($event)"
        :style="`left:${floatingToolData.elLeft}px;top:${floatingToolData.elTop}px`"
      >
        <div
          class="hover"
          v-for="item in floatingToolBox"
          :key="item.name"
          @click="floatItemHandle(item)"
          @mouseover="floatOverHander(item)"
          @mouseout="floatOutHander(item)"
        >
          <el-popover
            placement="right"
            :width="
              floatingToolData.activeToolData == '标注'
                ? 120
                : floatingToolData.activeToolData == '清除'
                  ? 200
                  : 250
            "
            trigger="click"
            v-if="
              floatingToolData.activeToolData == '画笔' ||
              floatingToolData.activeToolData == '清除' ||
              floatingToolData.activeToolData == '文字' ||
              floatingToolData.activeToolData == '标注'
            "
          >
            <div class="popinnerBox">
              <div class="brush" v-if="floatingToolData.activeToolData == '画笔'">
                <div class="thickness">
                  <div
                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
                    @click="selectThickness('small')"
                  ></div>
                  <div
                    :class="
                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
                    "
                    @click="selectThickness('middle')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
                    @click="selectThickness('large')"
                  ></div>
                </div>
                <div class="lineStyle">
                  <div class="lineTypeBox">
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'solid'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('solid')"
                    >
                      <div class="solid"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'solid'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
                    <div
                      :class="
                        floatingToolData.lineTypeActive == 'dashed'
                          ? 'typeItem lineTypeActive'
                          : 'typeItem'
                      "
                      @click="selectLineType('dashed')"
                    >
                      <div class="dashed"></div>
                      <div class="activeIcon" v-if="floatingToolData.lineTypeActive == 'dashed'">
                        <img :src="xuanzhong" />
                      </div>
                    </div>
                  </div>
                  <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 == floatingToolData.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>
                <div class="cleanupItem hover" @click="cleanUpSelect('all')">
                  <img :src="clear" />
                  <div>清除全部</div>
                </div>
              </div>
              <div class="write" v-if="floatingToolData.activeToolData == '文字'">
                <div class="thickness">
                  <div
                    :class="floatingToolData.thicknessActive == 'small' ? 'small active' : 'small'"
                    @click="selectThickness('small')"
                  ></div>
                  <div
                    :class="
                      floatingToolData.thicknessActive == 'middle' ? 'middle active' : 'middle'
                    "
                    @click="selectThickness('middle')"
                  ></div>
                  <div
                    :class="floatingToolData.thicknessActive == 'large' ? 'large active' : 'large'"
                    @click="selectThickness('large')"
                  ></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 == floatingToolData.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>
                <div class="labelItem hover" @click="labelShow('show')">
                  <img :src="show" />
                  <div>显示</div>
                </div>
              </div>
            </div>
            <template #reference>
              <div class="floatToolItem">
                <img :src="item.icon" alt="" />
                <div class="text">{{ item.name }}</div>
              </div>
            </template>
            <el-menu-item-group>
              <template #title><span>Group One</span></template>
              <el-menu-item index="1-1">item one</el-menu-item>
              <el-menu-item index="1-2">item two</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group Two">
              <el-menu-item index="1-3">item three</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title><span>item four</span></template>
              <el-menu-item index="1-4-1">item one</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-menu-item index="2">
            <el-icon><icon-menu /></el-icon>
            <template #title>Navigator Two</template>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <template #title>Navigator Three</template>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <template #title>Navigator Four</template>
          </el-menu-item>
        </el-menu>
          </el-popover>
          <div class="floatToolItem" v-else>
            <img :src="item.icon" alt="" />
            <div class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 选中工具栏 -->
      <div
        class="dialogToolBox"
        id="dialogToolBox"
        v-show="showToolBox"
        :style="{ top: `${dialogToolData.top}px`, left: `${dialogToolData.left}px` }"
      >
        <div
          class="colorSelectBox"
          v-if="toolActive == '高亮' || toolActive == '划线' || toolActive == '笔记'"
        >
          <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>
        <div class="toolSelectBox">
          <div
            :class="item.name == toolActive ? 'dialogToolItem active' : 'dialogToolItem'"
            v-for="item in dialogToolList"
            :key="item.icon"
            @click="dialogToolHandle(item)"
            @mouseover="dialogOverHander(item)"
            @mouseout="dialogOutHander(item)"
          >
            <img :src="item.name == toolActive ? item.activeIcon : item.icon" alt="" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog title="添加笔记" v-model="addNoteVisble" width="400">
    <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>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addNoteVisble = false">取 消</el-button>
        <el-button type="primary" @click="addNote">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="AI智能问答" v-model="wendaVisible" width="26%">
    <div class="wendabox">
      <iframe src="https://yiyan.baidu.com/" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="词典" v-model="cidianVisible" width="60%">
    <div class="wendabox">
      <iframe src="https://www.vocabulary.com/" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="GGB函数工具" v-model="functionVisible" width="60%">
    <div class="wendabox">
      <iframe src="https://www.geogebra.org/calculator" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="思维导图" v-model="siweiVisble" width="80%">
    <div class="wendabox">
      <iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe>
    </div>
  </el-dialog>
  <el-dialog title="模型工具" v-model="modelToolVisble" width="80%">
    <div class="wendabox">
      <iframe src="https://adjam93.github.io/threejs-model-viewer/#" frameborder="0"></iframe>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import mulu from '@/assets/images/menu/mulu.png'
import biji from '@/assets/images/menu/biji.png'
import ziyuan from '@/assets/images/menu/ziyuan.png'
@@ -65,7 +430,74 @@
import jietu from '@/assets/images/menu/jietu.png'
import biaoqian from '@/assets/images/menu/biaoqian.png'
import topbg from '@/assets/images/header/top-bg.png'
import setting from '@/assets/images/operation/setting.png'

import aIzhinengwenda from '@/assets/images/menu/AIzhinengwenda.png'
import aIyuyinyuedu from '@/assets/images/menu/AIyuyinyuedu.png'
import cidian from '@/assets/images/menu/cidian.png'
import shengzikapian from '@/assets/images/menu/shengzikapian.png'
import hudongwenda from '@/assets/images/menu/hudongwenda.png'
import siweidaotu from '@/assets/images/menu/siweidaotu.png'
import GGB from '@/assets/images/menu/GGB.png'
import jihe from '@/assets/images/menu/jihe.png'
import python from '@/assets/images/menu/python.png'
import cjiajia from '@/assets/images/menu/C++.png'
import javascript from '@/assets/images/menu/Javascript.png'
import moxinggongju from '@/assets/images/menu/moxinggongju.png'
import shouqiR from '@/assets/images/menu/shouqi-R.png'
import shouqiL from '@/assets/images/menu/shouqi-L.png'
import charuziyuan from '../assets/images/operation/charuziyuan.png'
import charuziyuan_blue from '../assets/images/operation/charuziyuan_blue.png'
import dati_charu from '../assets/images/operation/dati_charu.png'
import dati_charu_blue from '../assets/images/operation/dati_charu_blue.png'
import xiake from '../assets/images/operation/xiake.png'

import huabi from '../assets/images/operation/huabi-w.png'
import huabi1 from '../assets/images/operation/huabi-b.png'
import qingchu from '../assets/images/operation/Clearaway-w.png'
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 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'
import baiban1 from '../assets/images/operation/baiban-b.png'
import biaozhu from '../assets/images/operation/biaozhu-w.png'
import biaozhu1 from '../assets/images/operation/biaozhu-b.png'
import jieping from '../assets/images/operation/screenshot-w.png'
import jieping1 from '../assets/images/operation/screenshot-b.png'
import clear from '../assets/images/operation/clear.png'
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 gaoliang from '../assets/images/operation/gaoliang.png'
import gaoliang1 from '../assets/images/operation/gaoliang-b.png'
import huaxian from '../assets/images/operation/huaxian.png'
import huaxian1 from '../assets/images/operation/huaxian1.png'
import biji2 from '../assets/images/operation/biji.png'
import biji1 from '../assets/images/operation/biji-b.png'
import biaozhu2 from '../assets/images/operation/biaozhu.png'
import biaozhu3 from '../assets/images/operation/biaozhu1.png'
import fuzhi from '../assets/images/operation/fuzhi.png'
import fuzhi1 from '../assets/images/operation/fuzhi-b.png'
import AIyuedu from '../assets/images/operation/AIyuedu.png'
import AIyuedu1 from '../assets/images/operation/AIyuedu-b.png'
import cidian2 from '../assets/images/operation/cidian.png'
import cidian1 from '../assets/images/operation/cidian-b.png'
import yuyinyuedu from '../assets/images/operation/yuyinyuedu.png'
import yuyinyuedu1 from '../assets/images/operation/yuyinyuedu-b.png'
import xuanzhong from '../assets/images/operation/xuanzhong.png'

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 { start } from 'qiankun'
onMounted(() => {
  
  start()
 
})
// 菜单
const menuData = reactive([
  {
@@ -93,28 +525,530 @@
    icon: biaoqian
  }
])

// 选中菜单
const activeMenu = ref(0)

// // 监听路由变化，默认选中菜单
// watch(
//   () => router.currentRoute.value,
//   (newRoute) => {
//     console.log(newRoute.path)

//     const index = menuData.findIndex((item) => item.router == newRoute.path)
//     activeMenu.value = index > -1 ? index : 0
//   }
// )

// 菜单点击
const menuItemClick = (index) => {
  activeMenu.value = index
  menuState.open = true
}
const menuState = reactive({
  open: true,
  notesColor: ''
})
const settingForm = reactive({
  acoustics: false,
  animation: false
})
//笔记颜色筛选
const searchClick = (item) => {
  if (item != 'all') {
    menuState.notesColor = item.key
  } else {
    menuState.notesColor = 'all'
  }
}

// 右侧工具
const isCollapse = ref(false)
const teachToolsMenuData = reactive([
  {
    name: 'AI智能问答',
    icon: aIzhinengwenda
  },
  {
    name: 'AI语音阅读',
    icon: aIyuyinyuedu
  },
  {
    name: '词典',
    icon: cidian
  },
  {
    name: '生字卡片',
    icon: shengzikapian
  },
  {
    name: '互动问答',
    icon: hudongwenda
  },
  {
    name: '思维导图',
    icon: siweidaotu
  },
  {
    name: 'GGB函数工具',
    icon: GGB
  },
  {
    name: '几何工具',
    icon: jihe
  },
  {
    name: 'Python',
    icon: python
  },
  {
    name: 'C++',
    icon: cjiajia
  },
  {
    name: 'Javascript',
    icon: javascript
  },
  {
    name: '模型工具',
    icon: moxinggongju
  }
])
const wendaVisible = ref(false)
const cidianVisible = ref(false)
const functionVisible = ref(false)
const siweiVisble = ref(false)
const modelToolVisble = ref(false)
const activeTool = ref(0)
const toolState = reactive({
  open: true
})

const selectTeachTools = (item) => {
  activeTool.value = item.name
  switch (item.name) {
    case 'AI智能问答':
      wendaVisible.value = true
      break
    case 'GGB函数工具':
      functionVisible.value = true
      break
    case '思维导图':
      siweiVisble.value = true
      break
    case '模型工具':
      modelToolVisble.value = true
      break
    case '词典':
      cidianVisible.value = true
      break
  }
}

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const selectType = ref('')
const selectTypeClick = (type) => {
  if (selectType.value == 'resource' || selectType.value == 'answer') {
    selectType.value = ''
  } else {
    selectType.value = type
  }
}
const classStart = ref(true)
const giveLessonsClick = () => {
  if (classStart.value) {
    classStart.value = false
    // 启动计时器
    updateTimer()
  } else {
    classStart.value = true
    stopTimer()
  }
}

//画布悬浮操作
const floatingToolBox = reactive([
  {
    icon: huabi,
    name: '画笔'
  },
  {
    icon: qingchu,
    name: '清除'
  },
  {
    icon: wenzi,
    name: '文字'
  },
  {
    icon: biaozhu,
    name: '标注'
  },
  {
    icon: biaoqianw,
    name: '标签'
  },
  {
    icon: baiban,
    name: '白板'
  },
  {
    icon: jieping,
    name: '截屏'
  }
])

const floatingToolData = reactive({
  activeToolData: '', //选中工具
  elLeft: 380,
  elTop: 300,
  startclientx: 0,
  startclienty: 0,
  thicknessActive: 'middle', //画笔选中粗细
  lineTypeActive: 'solid', //画笔选中线类型
  lineColorActive: '' //画笔选中线颜色
})

//画布
const canvas = ref<any>() //获取画布
let ctx: CanvasRenderingContext2D //获取canvas操作api的入口的类型
let painting = false
let key = 1

const floatOverHander = (item) => {
  const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      floatingToolBox[0].icon = huabi1
      break
    case 1:
      floatingToolBox[1].icon = qingchu1
      break
    case 2:
      floatingToolBox[2].icon = wenzi1
      break
    case 3:
      floatingToolBox[3].icon = biaozhu1
      break
    case 4:
      floatingToolBox[4].icon = biaoqian1
      break
    case 5:
      floatingToolBox[5].icon = baiban1
      break
    case 6:
      floatingToolBox[6].icon = jieping1
      break
  }
}
const floatOutHander = (item) => {
  const curIndex = floatingToolBox.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      floatingToolBox[0].icon = huabi
      break
    case 1:
      floatingToolBox[1].icon = qingchu
      break
    case 2:
      floatingToolBox[2].icon = wenzi
      break
    case 3:
      floatingToolBox[3].icon = biaozhu
      break
    case 4:
      floatingToolBox[4].icon = biaoqianw
      break
    case 5:
      floatingToolBox[5].icon = baiban
      break
    case 6:
      floatingToolBox[6].icon = jieping
      break
  }
}
//浮窗工具栏点击事件
const floatItemHandle = (item) => {
  floatingToolData.activeToolData = item.name
  // switch (item.name) {
  //   case '画笔':
  //     break
  // }
}
const dragend = (e) => {
  let x = e.clientX - floatingToolData.startclientx
  let y = e.clientY - floatingToolData.startclienty
  if (floatingToolData.elLeft + x > 0 || floatingToolData.elTop + y > 0) {
    floatingToolData.elLeft = e.x - 40
    floatingToolData.elTop = e.y - 60
  }
}
const dragstart = (e) => {
  console.log(e)
  floatingToolData.startclientx = e.clientX
  floatingToolData.startclienty = e.clientY
}

//选中画笔粗细
const selectThickness = (str) => {
  floatingToolData.thicknessActive = str
}

const selectLineType = (str) => {
  floatingToolData.lineTypeActive = str
}
//画笔颜色选择
const lineColorSelect = (item) => {
  floatingToolData.lineColorActive = item.key
}
// 画线段
const paint = (
  startX: number,
  startY: number,
  endX: number,
  endY: number,
  ctx: CanvasRenderingContext2D
) => {
  ctx.beginPath()
  ctx.globalAlpha = 1
  ctx.lineWidth = 2
  ctx.strokeStyle = '#000'
  ctx.moveTo(startX, startY) // 画线起点
  ctx.lineTo(endX, endY) // 画线终点
  ctx.closePath()
  ctx.stroke() // 描绘线条
}
// 定义鼠标初始点击的位置
let startX = 0
let startY = 0

// 鼠标按下
const mousedown = (event: MouseEvent) => {
  ;[startX, startY] = getOffset(event)
  painting = true // 将绘画状态改成true
}

// 鼠标移动
const mousemove = (event: MouseEvent) => {
  if (painting) {
    // 在鼠标移动的期间，获取鼠标的位置
    const [endX, endY] = getOffset(event)
    paint(startX, startY, endX, endY, ctx)
    // 下面两行代码是更新线条的起点
    startX = endX
    startY = endY
  }
}

// 鼠标松开
const mouseup = (event: MouseEvent) => {
  // 松开鼠标后 禁止画线条
  if (painting) painting = false
}

//清除上一步/全部
const cleanUpSelect = (str) => {}
//标签显示隐藏
const labelShow = (str) => {}

//选中文字工具栏
const selectText = ref('') //选中文字
const showToolBox = ref(false)
const dialogToolData = reactive({
  left: 500,
  top: 300
})
const toolActive = ref('高亮')
const colorActive = ref('')
const dialogToolList = reactive([
  { icon: gaoliang, activeIcon: gaoliang1, name: '高亮' },
  { icon: huaxian, activeIcon: huaxian1, name: '划线' },
  { icon: biji2, activeIcon: biji1, name: '笔记' },
  { icon: biaozhu2, activeIcon: biaozhu3, name: '标注' },
  { icon: fuzhi, activeIcon: fuzhi1, name: '复制' },
  { icon: AIyuedu, activeIcon: AIyuedu1, name: 'AI阅读' },
  { icon: cidian2, activeIcon: cidian1, name: '词典' },
  { icon: yuyinyuedu, activeIcon: yuyinyuedu1, name: '语音阅读' }
])
const colorSelectList = reactive([
  {
    label: '红色',
    key: '#FF0000'
  },
  {
    label: '蓝色',
    key: '#004DFF'
  },
  {
    label: '绿色',
    key: '#01BA51'
  },
  {
    label: '黄色',
    key: '#FFF700'
  },
  {
    label: '澄色',
    key: '#FF8800'
  }
])

//笔记弹窗
const addNoteVisble = ref(false)
const formData = ref({
  name: '',
  desc: ''
})
//词典

const synth = window.speechSynthesis
//工具栏方法
const dialogOverHander = (item) => {
  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      dialogToolList[0].icon = gaoliang1
      break
    case 1:
      dialogToolList[1].icon = huaxian1
      break
    case 2:
      dialogToolList[2].icon = biji1
      break
    case 3:
      dialogToolList[3].icon = biaozhu3
      break
    case 4:
      dialogToolList[4].icon = fuzhi1
      break
    case 5:
      dialogToolList[5].icon = AIyuedu1
      break
    case 6:
      dialogToolList[6].icon = cidian1
      break
    case 7:
      dialogToolList[7].icon = yuyinyuedu1
      break
  }
}
const dialogOutHander = (item) => {
  const curIndex = dialogToolList.findIndex((f) => f.name == item.name)
  switch (curIndex) {
    case 0:
      dialogToolList[0].icon = gaoliang
      break
    case 1:
      dialogToolList[1].icon = huaxian
      break
    case 2:
      dialogToolList[2].icon = biji2
      break
    case 3:
      dialogToolList[3].icon = biaozhu2
      break
    case 4:
      dialogToolList[4].icon = fuzhi
      break
    case 5:
      dialogToolList[5].icon = AIyuedu
      break
    case 6:
      dialogToolList[6].icon = cidian2
      break
    case 7:
      dialogToolList[7].icon = yuyinyuedu
      break
  }
}
const dialogToolHandle = (item) => {
  toolActive.value = item.name
  colorActive.value = ''
  switch (item.name) {
    case 'AI阅读':
      const utterance = new SpeechSynthesisUtterance(selectText.value)
      utterance.lang = 'zh-CN' // 设置语言为中文
      synth.speak(utterance)
      break
    case '划线':
      break
    case '高亮':
      break
    case '笔记':
      formData.value.name = ''
      formData.value.desc = ''
      break
    case '标注':
      break
    case '复制':
      try {
        var successful = document.execCommand('copy') //执行复制命令
        var msg = successful ? '成功' : '失败'
        ElMessage.success({
          message: '已复制文本',
          type: 'success'
        })
      } catch (err) {
        ElMessage.error('无法复制文本：' + err)
      }
      showToolBox.value = false
      break
    case '词典':
      cidianVisible.value = true
      break
  }
}

const clickSelect = (item) => {
  colorActive.value = item.key
  if (toolActive.value == '笔记') {
    addNoteVisble.value = true
  }
}

//内容区域顶部显示

const headerData = reactive({
  classTime: '00:00:00',
  seconds: 0,
  minutes: 0,
  hours: 0,
  process: '42%',
  pageSize: 100,
  brushToolShow: true
})
//上课时长计时器
const timer = ref(null)
const updateTimer = () => {
  // 清除之前的定时器，防止多个定时器同时运行
  stopTimer()
  timer.value = setInterval(() => {
    headerData.seconds++
    if (headerData.seconds === 60) {
      headerData.seconds = 0
      headerData.minutes++
    }
    if (headerData.minutes === 60) {
      headerData.minutes = 0
      headerData.hours++
    }
    // 格式化时间
    const formattedTime = `${headerData.hours.toString().padStart(2, '0')}:${headerData.minutes.toString().padStart(2, '0')}:${headerData.seconds.toString().padStart(2, '0')}`
    headerData.classTime = formattedTime
  }, 1000) // 间隔1秒
}
const stopTimer = () => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
    headerData.classTime = '00:00:00'
  }
}

const changePageSize = (str) => {
  if (str == 'add') {
    headerData.pageSize = Number(headerData.pageSize) + 5
  } else {
    headerData.pageSize = Number(headerData.pageSize) - 5
  }
}

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

<style lang="less">
@@ -146,6 +1080,8 @@
      border-right: 1px solid #e6e7e8;
      padding-bottom: 20px;
      box-sizing: border-box;
      position: relative;
      box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.07);
      .menuItem {
        text-align: center;
        line-height: 1;
@@ -165,12 +1101,394 @@
          margin-bottom: 4px;
        }
      }
      .setting {
        width: 80px;
        position: absolute;
        bottom: 30px;
        text-align: center;
      }
    }
    .menuContent {
      width: 270px;
      height: calc(100vh - 48px);
      overflow-y: auto;
      background: #e0f2ff;
      .searchBox {
        width: 100%;
        height: 60px;
        background: #ffffff;
        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;
          }
        }
      }
      .screenBox {
        display: flex;
        padding: 0 10px;
        .title {
          margin: 10px 0;
          line-height: 40px;
          padding: 0 10px;
          border: none;
        }

        .flex1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

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

        .allActive {
          width: 50px;
          height: 20px;
          border-radius: 17px;
          margin: 10px 10px 10px 0;
          text-align: center;
          line-height: 17px;
          color: #fff;
          background: #0093ff;
          border: 1px solid #0093ff;
          font-size: 12px;
        }

        .scribeItem {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          margin: 10px auto;
          border: none;
        }

        .activeScribe {
          border: 1px solid #0093ff;
        }
      }
    }
    .menuStateBox {
      width: 25px;
      height: 25px;
      border-radius: 3px 0px 0px 3px;
      border: 1px solid #bce3ff;
      position: fixed;
      line-height: 22px;
      top: 50%;
      left: 325px;
      text-align: center;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
      img {
        height: 10px;
        width: 18px;
      }
    }

    .pageBox {
      flex: 1;
      overflow: auto;
      font-size: 16px;
      .pageBox-header {
        height: 57px;
        padding: 0 20px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .classTime {
          display: flex;
          align-items: center;
          background: rgba(0, 147, 255, 0.1);
          border-radius: 20px 20px 20px 20px;
          color: #0093ff;
          padding: 8px;
          .qureIcon {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #0093ff;
            margin: 0 5px;
          }
        }
        .rightBox {
          display: flex;
          .pageSizeBox {
            display: flex;
            align-items: center;
            padding: 0 20px;
            border-right: 1px solid #d8d8d8;
            div {
              padding: 5px;
            }
          }
          .brushImgBox {
            display: flex;
            align-items: center;
            div {
              padding: 5px;
              display: flex;
              align-items: center;
            }
            .brushImg {
              width: 22px;
              margin-left: 20px;
              margin-right: 5px;
            }
          }
        }
      }
      .pageBox-content {
        height: calc(100% - 57px);
        position: relative;
        #container {
          background: #fbf9f4;
          height: 100%;
        }
        .canvas-box {
          height: 100%;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .toolBox {
      position: relative;
      box-shadow: -3px 0px 6px 1px rgba(0, 0, 0, 0.07);
      .toolTitle {
        height: 57px;
        line-height: 53px;
        text-align: center;
        border-bottom: 1px solid #efefef;
        .text {
          width: 43px;
          height: 3px;
          margin: 0 auto;
          background: #0093ff;
          border-radius: 3px 3px 0px 0px;
        }
      }
      .menu {
        padding-top: 20px;
        li {
          height: 50px;
          padding: 10px 36px;
          font-size: 16px;
          display: flex;
          align-items: center;
          color: #333;

          img {
            width: 29px;
            height: 29px;
          }

          span {
            margin-left: 10px;
          }
        }
      }
      .openBox {
        width: 25px;
        height: 25px;
        background: #fff;
        border-radius: 3px 0px 0px 3px;
        border: 1px solid #bce3ff;
        position: fixed;
        line-height: 22px;
        top: 50%;
        right: 50px;
        text-align: center;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
        img {
          height: 10px;
          width: 18px;
        }
      }
      .right {
        right: 183px !important;
        border-radius: 0px 3px 3px 0px !important;
      }
      .classRoomBox {
        position: absolute;
        bottom: 0;
        width: 100%;
        .el-tabs__nav {
          width: 100% !important;
        }
        .el-tabs__item {
          flex: 1 !important;
          padding: 0 !important;
        }
        .el-tabs__active-bar {
          width: 43px !important;
          left: 30px !important;
          height: 3px;
          bottom: 1px;
          border-radius: 3px 3px 0px 0px;
        }
        .tabBox {
          height: 100px;
          padding: 10px 17px;
          text-align: center;
          .insertSelect {
            display: flex;
            justify-content: space-between;
            .selectItem {
              text-align: center;
              background: rgba(207, 207, 207, 0.13);
              padding: 10px;
              border-radius: 5px;
              border: 2px solid #cfcfcf;
            }
            .typeActive {
              text-align: center;
              color: #0093ff;
              border: 2px solid #0093ff;
              padding: 10px;
              border-radius: 5px;
              background: rgba(0, 147, 255, 0.13);
            }
          }
          .giveLessons {
            color: #0093ff;
            width: 90px;
            margin: 10px auto;
            padding: 5px;
            border-radius: 20px;
            border: 1px solid #0093ff;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
              margin-left: 10px;
            }
          }
        }
      }
    }

    .draggableBox {
      width: 85px;
      background-image: linear-gradient(to bottom, #0093ff, #005dff);
      position: fixed;
      height: 430px;
      top: 300px;
      left: 400px;
      z-index: 999;
      border-radius: 10px;
      padding: 5px;
      overflow: hidden;
      .floatToolItem {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        color: #fff;
        img {
          margin-right: 8px;
        }
        .text {
          margin-right: 5px;
        }
      }
    }
    .floatToolItem:hover {
      background-color: #fff;
      color: #0093ff;
    }

    .dialogToolBox {
      position: fixed;
      z-index: 2;

      .toolSelectBox {
        height: 57px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 12px;
        overflow: hidden;
        padding: 5px;
        background-image: linear-gradient(to right, #0093ff, #005dff);
        .dialogToolItem {
          user-select: none;
          width: 60px;
          font-size: 12px;
          border-radius: 5px;
          padding: 5px 0;
          cursor: pointer;
          text-align: center;
          img {
            margin: 0 auto;
            display: block;
            margin-bottom: 5px;
            height: 16px;
          }
          span {
            color: #fff;
          }
        }
        .dialogToolItem:hover,
        .active {
          background-color: #fff;
          span {
            color: #0093ff;
          }
        }
      }
    }
    .colorSelectBox {
      padding: 5px 10px;
      width: 190px;
      display: flex;
      background: #ffffff;
      box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.16);
      border-radius: 5px;
      margin-bottom: 10px;
      .flex1 {
        flex: 1;
        .scribeItem {
          width: 18px;
          height: 18px;
          border-radius: 3px;
          margin: 10px auto;
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
.wendabox {
  width: 100%;
  height: 700px;
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>

 src/views/login.vue

@@ -53,13 +53,13 @@
    if (valid) {
      loading.value = true
      request({
        url: '/identity/Login/LoginByLoginNameAndPassword',
        url: '/identity/api/LoginByPassword',
        method: 'post',
        data: {
          appRefCode: "jingshieke",
          loginName: loginData.value.username,
          password: loginData.value.password,
          platform: 'textbookReader',
          appId: '-1'
          platform: 'string',
        }
      })
        .then((res) => {

 vite.config.ts

@@ -22,7 +22,11 @@
    host: true,
    port: 8005,
    strictPort: true,
    hmr: true
    cors: true, // 允许跨域
    hmr: true,
    headers: {
      "Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面
    },
  },
  define: {
    'process.env': process.env