pbl-student-table/src/components/classRoomHelper/index.vue

<template>
  <div class="ch_box" ref="ch_box">
    <div class="ch_content_box" v-show="type == 1">
      <searchArea
        :courseDetail="courseDetail"
        ref="searchAreaRef"
        :navList="navList"
        :tcid="tcid"
        :openMegaphone="openMegaphone"
        :fileId="fileId"
        :recordType="recordType"
        v-if="itemType == 1"
				:canShowTips="canShowTips"
				:showTipsLoading="showTipsLoading"
				:tipsList="tipsList"
      />
      <taskArea
        :courseDetail="courseDetail"
        :navList="navList"
        :courseType="courseType"
        :taskCount="taskCount"
        :worksStudent="worksStudent"
        :openMegaphone="openMegaphone"
        ref="taskAreaRef"
        :fileId="fileId"
        v-show="itemType == 2"
      />
      <countdown
        ref="countdownRef"
        :fileId="fileId"
        :courseDetail="courseDetail"
        v-show="itemType == 3"
      />

      <languageAssistant ref="languageAssistantRef" v-if="itemType == 4" />

			<reviewArea ref="reviewAreaRef" v-if="itemType==5" :courseType="courseType" :taskCount="taskCount"/>
      <!-- <dialogArea
        :courseDetail="courseDetail"
				:openMegaphone="openMegaphone"
        ref="dialogAreaRef"
        :fileId="fileId"
        v-if="itemType == 3"
      /> -->
    </div>
    <div class="ch_nav_box">
      <div class="ch_nav_box_top">
        <div @click.stop="changeFold(!fold)" ref="foldBtnRef">
          <el-tooltip
            class="item"
            effect="dark"
            :content="fold ? '折叠' : '展开'"
            placement="top"
          >
            <img
              :src="require('../../assets/icon/course/foldIcon.svg')"
              alt=""
							:class="[!fold?'':'foldActive']"
            />
          </el-tooltip>
        </div>

        <div @click="changeItemType(5)" v-if="tType == 1">
          <el-tooltip class="item" effect="dark" content="评论" placement="top">
            <img
              :src="require('../../assets/icon/course/comment2.svg')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>

        <div
          @click="startRecording()"
          v-if="!videoStart && (tType == 1 || tType == 4)"
        >
          <el-tooltip class="item" effect="dark" content="录制" placement="top">
            <img
              :src="require('../../assets/icon/course/record3.svg')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>

        <div
          @click="$emit('stopRecording')"
          v-else-if="tType == 1 || tType == 4"
          style="background:#f63564"
        >
          <el-tooltip class="item" effect="dark" content="下载" placement="top">
            <img
              :src="require('../../assets/icon/course/record4.svg')"
              alt=""
              style="width: 22px;height: 22px;"
            />
          </el-tooltip>
        </div>
      </div>
      <div class="ch_nav_box_middle">
        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 2 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(2)"
        >
          <img
            v-if="itemType == 2"
            :src="require('../../assets/icon/course/task_active.png')"
          />
          <img
            v-if="itemType != 2"
            :src="require('../../assets/icon/course/task.png')"
          />
          <!-- <span :style="`background:url(${itemType==2?require('../../assets/icon/course/task_active.png'):require('../../assets/icon/course/task.png')});`"></span> -->
          <div>测验</div>
        </div>

        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 1 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(1)"
        >
          <img
            v-if="itemType == 1"
            :src="require('../../assets/icon/course/up_active.png')"
          />
          <img
            v-if="itemType != 1"
            :src="require('../../assets/icon/course/up.png')"
          />
          <!-- <span :style="`background:url(${itemType==1?require('../../assets/icon/course/up_active.png'):require('../../assets/icon/course/up.png')});`"></span> -->
          <div>对话</div>
        </div>

        <div
          :class="[
            'ch_nav_box_middle_item',
            itemType == 3 ? 'ch_nav_box_middle_item_active' : ''
          ]"
          @click.stop="changeItemType(3)"
        >
          <img
            v-if="itemType == 3"
            :src="require('../../assets/icon/course/Countdown2.svg')"
          />
          <img
            v-if="itemType != 3"
            :src="require('../../assets/icon/course/Countdown.svg')"
          />
          <div>倒计时</div>
        </div>
      </div>
      <div class="ch_nav_box_bottom">
        <div @click.stop="commentAndAnnotate()" style="z-index: 9999;">
          <el-tooltip class="item" effect="dark" content="批注" placement="top">
            <img
              :src="require('../../assets/icon/course/edit2.svg')"
              v-if="!AnnotationCanvasShow"
            />
            <img :src="require('../../assets/icon/course/edit3.svg')" v-else />
          </el-tooltip>
        </div>

        <!-- <div @click.stop="changeItemType(4)" :class="[itemType == 4?'ch_nav_box_middle_item_active':'']">
					<el-tooltip
            class="item"
            effect="dark"
            :content="itemType != 4?'开启语音助手':'关闭语音助手'"
            placement="top"
          >
            <img v-if="itemType != 4" :src="require('../../assets/icon/course/robot.svg')" />
						<img v-else :src="require('../../assets/icon/course/robot2.svg')" />
          </el-tooltip>
				</div> -->

        <div
          @click.stop="startAssistant()"
          :class="[recordType == 1 ? 'ch_nav_box_middle_item_active' : '']"
        >
          <el-tooltip
            class="item"
            effect="dark"
            :content="recordType == 0 ? '开启语音助手' : '关闭语音助手'"
            placement="top"
          >
            <img
              v-if="recordType != 1"
              :src="require('../../assets/icon/course/robot3.svg')"
            />
            <img v-else :src="require('../../assets/icon/course/robot3.svg')" />
          </el-tooltip>
        </div>

        <div @click.stop="$emit('goStep', 0)">
          <el-tooltip
            class="item"
            effect="dark"
            content="上一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/last.png')" />
          </el-tooltip>
        </div>

        <div @click.stop="$emit('goStep', 1)">
          <el-tooltip
            class="item"
            effect="dark"
            content="下一步"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/next.png')" />
          </el-tooltip>
        </div>

        <div @click="openSetting">
          <el-tooltip
            class="item"
            effect="dark"
            :content="type == 0 ? '展开' : '折叠'"
            placement="top"
          >
            <img :src="require('../../assets/icon/course/menu.png')" />
          </el-tooltip>
        </div>
      </div>
    </div>
    <div v-if="fold" class="itemFold" ref="itemFoldRef"  v-click-outside="handleBlur">
      <div @click="$emit('backPage')">
          <img :src="require('../../assets/icon/course/return.png')" alt="" />
				<span>返回</span>
      </div>

      <div @click="$emit('refresh')">
          <img :src="require('../../assets/icon/course/refresh.png')" alt="" />
					<span>刷新</span>
      </div>

      <div @click="$emit('authority')" v-if="tType == 1 || tType == 4">
          <img :src="require('../../assets/icon/course/setting2.svg')" alt="" />
					<span>权限</span>
      </div>
    </div>
    <levitatedSphere ref="levitatedSphereRef" @startTime="startTime" />
    <timepiece ref="timepieceRef" />
    <AnnotationCanvas
      ref="AnnotationCanvasRef"
      @close="endCommentAndAnnotate"
      @changeStatus="changeAnnotationCanvasShow"
    />
  </div>
</template>

<script>
import searchArea from "./component/searchArea.vue";
import taskArea from "./component/taskArea.vue";
// import dialogArea from "./component/dialogArea.vue";
import levitatedSphere from "./component/levitatedSphere.vue";
import timepiece from "./component/timepiece.vue";
import countdown from "./component/countdown.vue";
import AnnotationCanvas from "./component/AnnotationCanvas.vue";
import languageAssistant from "./component/languageAssistant.vue";
import reviewArea from "./component/reviewArea.vue";
import { v4 as uuidv4 } from "uuid";
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
export default {
  emits: [
    "refresh",
    "goStep",
    "backPage",
    "authority",
    "review",
    "stopRecording",
    "startRecording"
  ],
	directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
  components: {
    searchArea,
    taskArea,
    // dialogArea,
    levitatedSphere,
    timepiece,
    countdown,
    AnnotationCanvas,
    languageAssistant,
		reviewArea
  },
  props: {
    courseDetail: {
      type: Object,
      default: () => {}
    },
    tType: {
      type:String,
      default: 0
    },
    navList: {
      type: Array,
      default: () => []
    },
    tcid: {
      type: String,
      default: ""
    },
    courseType: {
      type: Number,
      default: 0
    },
    taskCount: {
      type: Number,
      default: 0
    },
    worksStudent: {
      type: Array,
      default: () => []
    },
    fileList: {
      type: Array,
      default: () => []
    },
    videoStart: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      userid: this.$route.query.userid,
      courseId: this.$route.query.courseId,
			tcid2: this.$route.query.tcid,
      type: 0,
      itemType: 0, //0--无  1-搜索  2-任务 3-对话
      fileId: [],
      recordType: 0,
      recordLoading: false,
      fold: false,
      openMegaphone: false, //是否打开喇叭
      getFileIdLoading: false,
      AnnotationCanvasShow: false,
			canShowTips:false,
			showTipsLoading:false,
			tipsList:[],
			firstEnterTime:null,
			canGetTips:true,
			getTipsTimer:null,
			getWangLoading:false,
			canUseWangData:false,
			wangData:"",
			languageSetting:0,
    };
  },
  mounted() {
		let setting = this.courseDetail.setting;
		if(setting){
			setting = JSON.parse(setting);
			if(setting.languageSetting){
				this.languageSetting = setting.languageSetting;
			}
		}
    this.setWidth();
    this.getFileId();
		this.firstEnterTime = new Date().getTime();
		this.getWantSearch();
		
		setTimeout(()=>{
			this.canGetTips = true;
			this.getTipsList()
		},3000)
  },
  methods: {
		getTipsListTime(time = 5000){
			if(this.getTipsTimer)clearTimeout(this.getTipsListTime)
			this.getTipsTimer = setTimeout(()=>{
				this.canGetTips = true;
				this.getTipsList();
				this.getTipsTimer = null;
			},time)
		},
		getTipsList(){
			return new Promise((resolve)=>{
				if(!this.canGetTips)return;
			this.showTipsLoading = true;
			let nowTaskObj = this.navList[this.courseType].task[this.taskCount]
			let nowTask = `【任务${this.taskCount+1}：${nowTaskObj.taskName}】`
			let _textData = `课程名称：${this.courseDetail.title}\n分类：${this.courseDetail.name}\n\n`;
      let _chapters = JSON.parse(this.courseDetail.chapters);
      _chapters.forEach((i1, index1) => {
        if (i1.dyName) {
          _textData += `阶段${index1 + 1}：${i1.dyName}\n`;
        }
        i1.chapterInfo[0].taskJson.forEach((i2, index2) => {
          if (i2.task) {
            _textData += `任务${index2 + 1}：${i2.task}\n`;
            _textData += `${i2.taskDetail}\n`;
          }
        });
        _textData += "\n";
      });
			let _msg = `Language: ${this.getLang()}
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

#Context
## 任务
你是专业的教学评估员，擅长分析课堂动态和学生的认知状态，能够根据教师的当前思路提供有效的教学建议。
你需要根据我提供的信息，推测分析，之后给出3个具体的操作步骤的建议。

##工作流程
1. 仔细阅读并分析我提供的课堂信息或课堂实录内容。
2. 观察课堂上学生的行为和反应，推测他们的认知状态。
3. 通过教师的言行和教学安排，推测教师当前的思路和教学目标。
4. 根据教师的思路和学生的认知状态，提出一个教学建议，并给出3个具体的操作步骤。只需要描述对应的动作，不需要指出该动作的目标和作用。

##输出
###输出要求
1. 最终输出仅包含具体操作步骤。
2. 具体操作步骤以数组形式输出，包含3个步骤。
3. 每个步骤用一句话描述，详细一些

##课堂内容
当前进行到：${nowTask}

##Format example
["步骤的描述","步骤的描述","步骤的描述"]
${_textData}
`
let params = {
        // assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        // userId: this.userid,
        // message: [{ type: "text", text: _msg }],
        // session_name: uuidv4(),
        // // uid: _uuid,
        // file_ids: this.fileId,
				// model: "gpt-4o-mini",
					model: "gpt-4o-mini",
					temperature: 0,
					max_tokens: 4096,
					top_p: 1,
					frequency_penalty: 0,
					presence_penalty: 0,
					messages: [{ role: "user", content: _msg }],
					uid: uuidv4(),
					mind_map_question: "",
					stream: false,
      };
      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
        .post("https://gpt4.cocorobo.cn/chat", params)
        .then(res => {
          let _data = res.data.FunctionResponse.choices[0].message.content;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
					console.log(_data)
          const match = _data.match(/\[\s*[^]*\s*\]/);
          let _result = JSON.parse(match[0]) || [];
					
					this.tipsList.push(_result)
					
          this.showTipsLoading = false;
					this.canShowTips = true;
					this.canGetTips = false;
					resolve()
        })
        .catch(e => {
          this.showTipsLoading = false;
          this.$message.error("获取课堂小贴士失败");
          console.log(e);
        });
			})
		},
		handleBlur(){
			// console.log(this.fold)
			this.fold = !this.fold;
		},
    changeAnnotationCanvasShow(newValue) {
      this.AnnotationCanvasShow = newValue;
    },
    startRecording() {
      this.$emit("startRecording");
      this.insertMemorandum(`使用<span class="btn">录制</span>功能，录制课堂`);
    },
    insertMemorandum(_html) {
      //保存行为操作
      //variable
      //btn
      let params = [
        {
          uid: this.userid,
          courseId: this.courseId+(this.tcid2?this.tcid2:""),
          content: _html
        }
      ];

      this.ajax
        .post(
          this.$store.state.api + "insert_systemOperation_countdownBehavior",
          params
        )
        .then(res => {
          if (res.data == 1) {
            console.log("保存操作成功");
          } else {
            console.log("保存操作失败");
          }
        })
        .catch(e => {
          console.log("保存操作失败");
          console.log(e);
        });
    },
    setWidth() {
      let w = this.$refs.ch_box;
      let w2 = w.offsetWidth + 30 + "px";
      this.$emit("setWidth", w2);
    },
    openSetting() {
      this.type = this.type == 1 ? 0 : 1;
      this.$nextTick(() => {
				if(this.type==1){
					this.$parent.mlDialog = false
				}
        this.setWidth();
      });
    },
    changeItemType(type) {
      this.type = 0;
			
      
			if(this.itemType==type){
				this.itemType = 0;
				this.type = 1;
				this.openSetting();
				return;
			}
			this.openSetting();
      // this.$message.info("切换到"+type)
      this.$nextTick(() => {
        // if (this.itemType == 1 && type != 1) {
        //   this.$refs.searchAreaRef.scrollBottom();
        //   this.$refs.searchAreaRef.getWantSearch();
        // } else if (this.itemType == 2) {
        //   this.$refs.taskAreaRef.scrollBottom();
        // } else if (this.itemType == 3) {
        //   this.$refs.dialogAreaRef.scrollBottom();
        // }
        this.itemType = type;
        if (this.itemType == 4 && this.recordType == 1) {
          //关闭悬浮语音助手
          this.$refs.levitatedSphereRef.stopRecord();
        }

        if (this.itemType == 3) {
          this.insertMemorandum(`打开<span class="btn">倒计时</span>面板`);
        }
      });
    },
    //计时
    startTime(time) {
      this.$refs.timepieceRef.startTime(time);
    },
    getFileId() {
      if (this.getFileIdLoading) return;
      this.getFileIdLoading = true;
      this.fileId = [];
      let _this = this;
      let _successFileUrl = [];
      if (this.fileList.length <= 0) return;
      let addType = ["DOCX", "DOC", "PPT", "PPTX", "MD", "TXT", "PDF"];
      this.fileList.forEach(i => {
        if (
          addType.includes(
            i.url.split(".")[i.url.split(".").length - 1].toLocaleUpperCase()
          )
        ) {
          _successFileUrl.push(i.url);
        }
      });
      let promiseList = [];
      _successFileUrl.forEach(i => {
        promiseList.push(
          new Promise((resolve, reject) => {
            _this.ajax
              .put("https://gpt4.cocorobo.cn/upload_file_knowledge", {
                url: i
              })
              .then(res => {
                let _data = res.data.FunctionResponse;
                if (_data.result && _data.result.id) {
                  this.fileId.push(_data.result.id);
                }
                resolve();
              });
          })
        );
      });
      Promise.all(promiseList).then(res => {
        this.getFileIdLoading = false;
      });
    },
    startAssistant() {
      if (this.recordLoading) return this.$message.info("请稍等...");
      this.recordLoading = true;
      if (this.recordType == 0) {
        if (this.itemType == 4) {
          this.itemType = 0;
          this.type = 0;
        }
        // this.$message.info("开启")
        // this.changeRecordType(1)
        this.$refs.levitatedSphereRef.recordStart();
      } else if (this.recordType == 1) {
        // this.$message.info("关闭")
        this.$refs.levitatedSphereRef.stopTwo();
				// this.changeRecordType(0)
      }
    },
    changeMegaphone() {
      this.openMegaphone = !this.openMegaphone;
      if (this.openMegaphone) {
        this.$message.success("已开启AI语音");
      } else {
        this.$message.success("已关闭AI语音");
      }
    },
    // 展开
    changeFold(newValue) {
      // this.$message.info("展开");
      this.fold = newValue;
			this.$nextTick(()=>{
				let e1 = this.$refs.foldBtnRef.getBoundingClientRect();
			let e2 = this.$refs.ch_box.getBoundingClientRect();
			
			console.log('👇👇')
			console.log(e1.top - e2.top)
			this.$refs.itemFoldRef.style.top = e1.top - e2.top + "px";
			})
    },
    // 收起
    changeUnfold(newValue) {
      // this.$message.info("收起");
      this.fold = newValue;
    },
    // 语音识别
    startRecord() {
      this.$refs.levitatedSphereRef.startRecord();
    },
    stopRecord() {
      this.$refs.levitatedSphereRef.stopTwo();
    },
    // 语音合成
    startSpeak() {
    },
    changeRecordType(type) {
      this.recordLoading = false;
      this.recordType = type;
    },
    commentAndAnnotate() {
			if(this.AnnotationCanvasShow){
				this.$refs.AnnotationCanvasRef.close()
			}else{
				this.$refs.AnnotationCanvasRef.open();
      	this.insertMemorandum(`开始使用<span class="btn">批注</span>功能`);
			}
      
    },
    endCommentAndAnnotate() {
      this.insertMemorandum(`结束使用<span class="btn">批注</span>功能`);
    },
		getWantSearch() {
			console.log("获取猜你想搜")
      let _uuid = uuidv4();
			this.getWangLoading = true
			this.canUseWangData = false
			this.wangData=""
      let _msg = `
Language: ${this.getLang()}
ATTENTION: Use '##' to SPLIT SECTIONS, not '#'. Output format carefully referenced "Format example".
Instruction: Based on the context, follow "Format example", write content

## 任务
你的任务是根据“课程信息”，提供用户需要的搜索建议，将搜索建议的结果以有序列表的形式返回给用户。
## 课程信息
#### 课程标题：${this.courseDetail.title ? this.courseDetail.title : ""}
#### 分类：${this.courseDetail.name ? this.courseDetail.name : "无"}
#### 学生年级：${
        this.courseDetail.classname ? this.courseDetail.classname : "无"
      }

## 规则
输出结果基于“课程信息”，避免提供无关的信息。
搜索建议的结果符合伦理规范。
## 输出
输出应包括6个相关的搜索建议，每个搜索建议需要以问号的方式结束。
请一步步思考如何根据现有信息推送搜索建议，但是不需要输出搜索建议以外的内

## 输出格式
搜索建议应以有序列表形式呈现，每个建议包括关键词和简短描述。输出JSON格式的

## Format example
[{"index": 1,"title": "垃圾分类标准","label": "不同国家的垃圾分类标准和方法？"},{"index": 2,"title":"可回收垃圾处理","label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 3,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"},{  "index": 4,  "title": "垃圾分类标准",  "label": "不同国家的垃圾分类标准和方法？"},{  "index": 5,  "title": "可回收垃圾处理",  "label": "可回收垃圾的处理流程和再利用方法？"},{  "index": 6,  "title": "有害垃圾的影响",  "label": "有害垃圾对环境和人体健康的潜在影响？"}]
`;

      // let params = {
      //   model: "gpt-3.5-turbo",
      //   temperature: 0,
      //   max_tokens: 4096,
      //   top_p: 1,
      //   frequency_penalty: 0,
      //   presence_penalty: 0,
      //   messages: [{ role: "user", content: _msg }],
      //   uid: _uuid,
      //   mind_map_question: ""
      // };
      let params = {
        assistant_id: "6063369f-289a-11ef-8bf4-12e77c4cb76b",
        userId: this.userid,
        message: [{ type: "text", text: _msg }],
        session_name: _uuid,
        // uid: _uuid,
        file_ids: this.fileId,
        model: "gpt-4o-mini"
      };
      // let params = {
      //   message: {
      //     anthropic_version: "bedrock-2023-05-31",
      //     max_tokens: 4096,
      //     temperature: 0,
      //     top_p: 1,
      //     messages: [{ role: "user", content: _msg }]
      //   },
      //   uid: _uuid,
      //   model: "Claude 3 Sonnet" // Claude 3 Sonnet或者Claude 3 Haiku
      // };
      this.text = "";

      this.ajax
        // .post("https://gpt4.cocorobo.cn/chat", params)
        // .post("https://claude3.cocorobo.cn/chat", params)
        .post("https://gpt4.cocorobo.cn/ai_agent_park_chat", params)
        .then(res => {
          // console.log(res);
          let _data = res.data.FunctionResponse.message;
          _data = _data.replaceAll("```json", "").replaceAll("```", "");
          const match = _data.match(/\[\s*{[^]*}\s*\]/);
					this.wangData = match[0];
					this.canUseWangData = true;
					this.getWangLoading = false;
          // console.log(_data);
          // console.log(match);
          // this.chatList.find(i => i.uid == _uuid).aiContent = JSON.parse(
          //   match[0]
          // );
          // this.chatList.find(i => i.uid == _uuid).isalltext = true;
          // this.chatList.find(i => i.uid == _uuid).isShowSynchronization = true;
          // this.chatList.find(i => i.uid == _uuid).loading = false;
          // this.scrollBottom();
          // this.chatLoading = false;
        })
        .catch(e => {
          this.chatLoading = false;
					this.canUseWangData = false;
					this.getWangLoading = false;
					console.log(e);
        });
      // this.getWAntSearchContent(_uuid);
    },
		getLang(){
      let lang = ''
      if(this.languageSetting == 0){
        lang = 'Chinese.'
      }else if(this.languageSetting == 1){
        lang = 'Traditional Chinese.'
      }else if(this.languageSetting == 2){
        lang = 'English.'
      }
      return lang
    },
		getWanData(){
			if(this.wangData && this.canUseWangData){
				const _result = this.wangData;
				this.wangData = "";
				this.canUseWangData = false;
				this.getWantSearch();
				return _result;
			}
		}
  }
};
</script>

<style scoped>
.ch_box {
  width: auto;
  background: rgb(255, 255, 255);
  position: fixed;
  height: calc(100% - 40px);
  border-radius: 10px;
  box-sizing: border-box;
  right: 20px;
  display: flex;
  top: 20px;
  z-index: 1000;
}

.ch_nav_box {
  height: 100%;
  width: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto !important; /* 上下溢出显示滚动条 */
  overflow-x: hidden !important; /* 左右溢出正常溢出 */
  position: relative;
}

.ch_content_box {
  width: 400px;
  height: 100%;
  border-right: 2px solid #e7e7e7;
}

.ch_nav_box_bottom {
  width: 100%;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  display: flex;
  flex-direction: column;
}

.ch_nav_box_middle {
  width: 100%;
  box-sizing: border-box;
  border-top: solid 1px #eaeaea;
  flex-direction: column;
  justify-content: space-between;
}

.ch_nav_box_middle_item {
  width: 100%;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 14px;
}

.ch_nav_box_middle_item_active {
  background-color: #3681fc;
  color: white;
}

.ch_nav_box_middle_item > img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}

.ch_nav_box_bottom > div {
  width: 100%;
  height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ch_nav_box_bottom > div > img {
  width: 24px;
  height: 24px;
}

.ch_nav_box_top {
  width: 100%;
  height: auto;
  margin-top: auto;
}

.ch_nav_box_top > div {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.ch_nav_box_top > div > img {
  width: 24px;
  height: 24px;
  transition: 0.3s;
}

.itemFold {
  position: absolute;
  width: 130px;
  right: 65px;
  top: 0;
  background: rgb(255, 255, 255);
  box-sizing: border-box;
  border: solid 1px #eaeaea;
  /* border-top: solid 1px #eaeaea; */
  z-index: 1000; /* 确保二级菜单在主菜单上层 */
  border-radius: 10px;
	box-sizing: border-box;
	padding:10px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.itemFold > div {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
	margin: 5px 0;
	border-radius: 10px;
}

.itemFold > div:hover{
	background:#F3F7FD;
}

.itemFold > div > img {
  width: 24px;
  height: 24px;
}

.itemFold > div > span{
	margin-left:10px;
}

@media screen and (max-height: 820px) {
	.ch_nav_box_bottom > div {
		height: auto;
		padding: 8px 0;
	}

	.ch_nav_box_middle_item{
		height: auto;
		padding: 8px 0;
	}

	.ch_nav_box_top > div{
		height: auto;
		padding: 8px 0;
	}
}

.foldActive{
	background-color: #F0F2F5;
	padding: 10px;
	border-radius: 10px;
}
</style>