PPT/src/views/Student/components/choiceQuestionDetailDialog.vue

<template>
  <div class="choiceQuestionDetailDialog">
    <div
      class="content"
      :style="{
        width: slideWidth + 'px',
        height: slideHeight + 'px',
      }"
    >
      <span class="closeIcon" @click="closeSlideIndex()">
        <img src="../../../assets/img/close.png" />
      </span>

      <!-- 选择题 -->
      <div
        class="c_t45"
        v-if="workDetail && workDetail.type === '45' && props.showData"
      >
        <div class="c_t45_title">
          <div v-if=" props.showData.choiceQuestionListData[props.showData.workIndex]">{{
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .teststitle
          }}</div>
          <span class="c_t45_t_btn" :class="{'c_t45_t_btn_noActive': props.showData.workIndex <= 0}" @click="changeWorkIndex(0)">{{ lang.ssPrevQ }}</span>
          <span class="c_t45_t_btn" :class="{'c_t45_t_btn_noActive': props.showData.workIndex >= props.showData.choiceQuestionListData.length - 1}" @click="changeWorkIndex(1)">{{ lang.ssNextQ }}</span>
        </div>
        <img
          class="c_t45_img"
          :src="
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .timuList[0].src
          "
          v-if=" props.showData.choiceQuestionListData[props.showData.workIndex] &&
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .timuList.length > 0
          "
        />
        <span
          class="c_t45_type"
          v-if="
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .type === '1'
          "
          >{{ lang.ssSingleSel }}</span
        >
        <span
          class="c_t45_type"
          v-if="
            props.showData.choiceQuestionListData[props.showData.workIndex]
              .type === '2'
          "
          >{{ lang.ssMultiOpt }}</span
        >
        <div
          class="c_t45_echarts"
          :style="{
            width: slideWidth - 40 + 'px',
          }"
        >
          <div id="echartsArea1" ref="echartsArea1"></div>
        </div>
      </div>

      <!-- 问答题 -->
      <div
        class="c_t15"
        v-if="workDetail && workDetail.type === '15' && props.showData"
      >
        <div class="c_t15_title">{{ workDetail.json.answerQ }}</div>
        <span class="c_t15_type">{{ lang.ssQATest }}</span>
        <div class="c_t15_content" v-show="!lookWorkData">
          <div
            class="c_t15_c_item"
            v-for="item in processedWorkArray"
            :key="item.id"
            @click="lookWork(item.id)"
          >
            <div class="c_t15_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
            <div class="c_t15_c_i_bottom">
              <span v-html="item.content.answer"></span>
            </div>
          </div>
        </div>

        <div class="c_t15_workDetail" v-if="lookWorkData">
          <div class="c_t15_wd_top">
            <img
              src="../../../assets/img/arrow_left.png"
              @click="lookWork('')"
            />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t15_wd_content">
            <span v-html="lookWorkData.content.answer"></span>
            <div
              class="c_t15_wd_c_imageList"
              v-if="lookWorkData.content.fileList.length > 0"
            >
              <img
                v-for="item in lookWorkData.content.fileList"
                :src="item.url"
                :key="item.uploadTime"
                @click="lookImage(item.url)"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- AI应用 -->
      <div
        class="c_t72"
        v-if="props.showData && props.showData.toolType === 72"
      >
        <div class="c_t72_title">{{ lang.ssAiApp }}</div>
        <span class="c_t72_type">{{ lang.ssAiApp }}</span>
        <div class="c_t72_content" v-show="!lookWorkData">
          <div
            class="c_t72_c_item"
            v-for="item in processedWorkArray"
            :key="item.id"
            @click="lookWork(item.id)"
          >
            <div class="c_t72_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="c_t72_workDetail" v-if="lookWorkData">
          <div class="c_t72_wd_top">
            <img
              src="../../../assets/img/arrow_left.png"
              @click="lookWork('')"
            />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t72_wd_content">
            <template
              v-for="(item, index) in lookWorkData.content"
              :key="item.id"
            >
              <div class="messageNodeArea" v-if="item.messages || item.imageUrls">
                  <div class="messageNode">
                  <div class="mn_title">{{ lang.ssNodeTitle.replace(/\*/g, String(index + 1)) }}</div>
                  <div class="mn_content">
                    <template
                      v-for="(item2, index2) in item.messages"
                      :key="`${index}-${index2}`"
                    >
                      <div>
                        <div
                          class="na_m_item"
                          v-if="item2.role == 'user' && item2.content"
                        >
                          <div class="na_m_i_name">
                            {{ item2.sender }}
                          </div>
                          <div
                            class="na_m_i_content"
                            v-html="item2.content"
                          ></div>
                        </div>
                        <div
                          class="na_m_item"
                          v-if="item2.role == 'assistant' && item2.content"
                        >
                          <div class="na_m_i_name aiName">
                            {{ item2.sender }}
                          </div>
                          <div
                            class="na_m_i_content"
                            v-html="item2.content"
                          ></div>
                        </div>
                      </div>
                    </template>
                    <template v-if="item.imageUrls" v-for="(item3,index3) in item.imageUrls" :key="`${index}-${index3}`">
                      <div class="na_m_item">
                        <div class="na_m_i_name">
                          {{ item.type }}
                        </div>
                        <div class="na_m_i_content">
                          <img style="height: 100px;width: auto;" :src="item3" />
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- H5页面 -->
      <div
        class="c_t73"
        v-if="props.showData && props.showData.toolType === 73"
      >
        <div class="c_t73_title">{{ lang.ssPageImage }}</div>
        <span class="c_t73_type">{{ lang.ssHPage }}</span>
        <div class="c_t73_content" v-show="!lookWorkData">
          <div
            class="c_t73_c_item"
            v-for="item in processedWorkArray"
            :key="item.id"
            @click="lookWork(item.id)"
          >
            <div class="c_t73_c_i_top">
              <span>S</span>
              <div>{{ item.name }}</div>
            </div>
            <div class="c_t73_c_i_bottom">
              <img :src="item.content" />
            </div>
          </div>
        </div>

        <div class="c_t73_workDetail" v-if="lookWorkData">
          <div class="c_t73_wd_top">
            <img
              src="../../../assets/img/arrow_left.png"
              @click="lookWork('')"
            />
            <span>S</span>
            <div>{{ lookWorkData.name }}</div>
          </div>
          <div class="c_t73_wd_content">
            <img :src="lookWorkData.content" />
          </div>
        </div>
      </div>
    </div>
    <previewImageTool ref="previewImageToolRef" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'
import previewImageTool from '../../components/tool/previewImageTool.vue'
import MarkdownIt from 'markdown-it'
import useImport from '@/hooks/useImport'
import { lang } from '@/main'
const props = defineProps<{
  visible: number[];
  workIndex: number;
  slideWidth: number;
  slideHeight: number;
  slideIndex: number;
  showData: any;
  workArray: any[];
}>()

const emit = defineEmits<{
  (e: 'update:visible', v: number[]): void;
  (e: 'changeWorkIndex', v: number): void;
}>()

const visible = computed({
  get: () => props.visible,
  set: (v: number[]) => emit('update:visible', v),
})

const workDetail = computed(() => {
  if (props.showData) {
    return props.showData.workDetail
  }
  return null
})

// 预览图片组件
const previewImageToolRef = ref<any>(null)

const md = new MarkdownIt()
const { getFile } = useImport()

// 判断是否是 URL 链接
const isUrl = (str: string): boolean => {
  try {
    const url = new URL(str)
    return (url.protocol === 'http:' || url.protocol === 'https:') && str.includes('json')
  }
  catch {
    return false
  }
}

// 从链接获取文件内容
const loadContentFromUrl = async (url: string): Promise<string> => {
  try {
    const fileData = await getFile(url)
    if (fileData && fileData.data) {
      // 将 ArrayBuffer 转为字符串
      const uint8Array = new Uint8Array(fileData.data)
      const jsonStr = new TextDecoder('utf-8').decode(uint8Array)
      return jsonStr
    }
    return ''
  }
  catch (error) {
    console.error('获取文件内容失败:', error)
    return ''
  }
}

// 处理单个作业内容
const processWorkContent = async (content: string, toolType: number): Promise<any> => {
  let contentToParse = content
  
  // 如果是链接，先获取文件内容
  if (isUrl(content)) {
    contentToParse = await loadContentFromUrl(content)
  }
  
  if (!contentToParse) {
    return null
  }
  
  try {
    if ([45, 15].includes(toolType)) {
      return JSON.parse(decodeURIComponent(contentToParse))
    }
    else if (toolType === 72) {
      const parsed = JSON.parse(contentToParse)
      if (Array.isArray(parsed)) {
        parsed.forEach((item: any) => {
          if (item.messages && item.messages.length) {
            item.messages.forEach((item2: any) => {
              // 如果已经包含html标签则不再渲染
              if (
                !/^(\s*<[^>]+>.*<\/[^>]+>\s*|<[^>]+\/>\s*)$/s.test(
                  item2.content.trim()
                )
              ) {
                item2.content = item2.content.replace(/&lt;/g, '<').replace(/&quot;/g, '"').replace(/&gt;/g, '>')
                item2.content = md.render(item2.content)
              }
            })
          }
        })
      }
      return parsed
    }
    return contentToParse
  }
  catch (error) {
    console.error('解析内容失败:', error)
    return null
  }
}

const processedWorkArray = ref<any[]>([])

// 监听 workArray 和 showData 变化
watch(
  () => [props.workArray, props.showData?.toolType],
  async () => {
    if (props.workArray && props.showData) {
      const _workArray = JSON.parse(JSON.stringify(props.workArray))
      
      // 处理每个作业内容
      for (const i of _workArray) {
        if (i.content) {
          const processedContent = await processWorkContent(i.content, props.showData.toolType)
          if (processedContent !== null) {
            i.content = processedContent
          }
        }
      }
      
      processedWorkArray.value = _workArray
    }
    else {
      processedWorkArray.value = []
    }
  },
  { immediate: true, deep: true }
)

// 关闭对应的作业详细页面
const closeSlideIndex = () => {
  visible.value = visible.value.filter((v) => v !== props.slideIndex)
}

// 切换题目
const changeWorkIndex = (type:number) => {
  emit('changeWorkIndex', type)
  // console.log(props.workIndex, props.showData.choiceQuestionListData.length)
  // if (type === 0 && props.workIndex > 0) {
  //   emit('changeWorkIndex', 0)
  // }
  // else if (type === 1 && props.workIndex < props.showData.choiceQuestionListData.length) {
  //   emit('changeWorkIndex', props.workIndex + 1)
  // }
}

// 选择题图表div
const echartsArea1 = ref<any>(null)

// 查看的作业详细id
const lookWorkDetail = ref<string>('')

// 查看作业详细的数据
const lookWorkData = computed(() => {
  let _result = null

  if (lookWorkDetail.value && processedWorkArray.value.length > 0) {
    const _workFind = processedWorkArray.value.find(
      (i: any) => i.id === lookWorkDetail.value
    )

    if (_workFind) {
      _result = _workFind
    }

  }

  return _result
})

// 查看图片
const lookImage = (url: string) => {
  if (previewImageToolRef.value) {
    previewImageToolRef.value.previewImage(url)
  }
}

// 查看作业
const lookWork = (id: string) => {
  lookWorkDetail.value = id
}

// 选择题图表实例
const myChart = ref<any>(null)

// resize防抖定时器
let resizeTimer: ReturnType<typeof setTimeout> | null = null

// 处理ECharts resize
const handleChartResize = () => {
  // 清除之前的定时器
  if (resizeTimer) {
    clearTimeout(resizeTimer)
  }

  resizeTimer = setTimeout(() => {
    nextTick(() => {
      if (
        myChart.value &&
        typeof myChart.value.resize === 'function' &&
        !myChart.value.isDisposed()
      ) {
        try {
          myChart.value.resize()
        }
        catch (e) {
          // console.error('myChart resize error:', e)
          // 如果resize失败，重新初始化图表
          if (
            props.showData &&
            props.showData.workDetail &&
            props.showData.workDetail.type === '45'
          ) {
            setEchartsArea1()
          }
        }
      }
    })
  }, 200) // 防抖延迟200ms
}

// 设置选择题图表
const setEchartsArea1 = () => {
  // 如果已有实例且未销毁，先销毁
  if (myChart.value && !myChart.value.isDisposed()) {
    myChart.value.dispose()
  }

  if (echartsArea1.value) {
    myChart.value = echarts.init(echartsArea1.value)
  }
  else {
    myChart.value = null
  }

  if (myChart.value) {
    const _work =
      props.showData.choiceQuestionListData[props.showData.workIndex]
    // 修正版，处理xAxis.data内为图片对象的case，formatter始终只拿到src或自定义label，保证无[object Object]问题
    const option = {
      tooltip: {
        show: false, // 禁用鼠标移动到柱体时的内容显示
      },
      yAxis: {
        show: false, // 不显示最左边的y轴
      },
      xAxis: {
        data: [],
        axisLabel: {
          color: 'rgba(0, 0, 0, 0.9)',
          fontWeight: 600,
          fontSize: 17,
          lineHeight: 20,
          interval: 0,
          formatter: function(value: any, idx: number) {
            // 如果是字符串且格式为JSON（图片），则解析处理
            if (typeof value === 'string') {
              try {
                const obj = JSON.parse(value)
                if (obj && typeof obj === 'object' && obj.imgType && obj.src) {
                  return '{img' + idx + '|}'
                }
              }
              catch (e) {
                // 非JSON字符串，直接返回
                // 如果文本文字超过8个字，换行
                if (typeof value === 'string') {
                  let displayValue = value
                  if (value.length > 20) {
                    displayValue = value.substr(0, 20) + '...'
                  }
                  // 8个字换行
                  let output = ''
                  for (let i = 0; i < displayValue.length; i += 8) {
                    output += displayValue.substr(i, 8)
                    if (i + 8 < displayValue.length) {
                      output += '\n'
                    }
                  }
                  return output
                }
                return value
              }
              return value
            }
            // 兼容老格式(容错)：value本身是对象，并有图片信息
            if (
              value &&
              typeof value === 'object' &&
              value.imgType &&
              value.src
            ) {
              return '{img' + idx + '|}'
            }
            // 其他类型直接空
            return ''
          },
          rich: (() => {
            // 动态生成所有图片的 rich 格式
            const richObj: any = {}
            _work.choiceUser.forEach((op: any, idx: number) => {
              if (
                op.option &&
                typeof op.option === 'object' &&
                op.option.imgType &&
                op.option.src
              ) {
                richObj['img' + idx] = {
                  height: 40,
                  width: 40,
                  align: 'center',
                  backgroundColor: {
                    image: op.option.src,
                  },
                }
              }
            })
            return richObj
          })(),
        },
      },
      series: [
        {
          name: '',
          type: 'bar',
          data: [],
          barWidth: '50%', // 柱体宽度缩小40%
          itemStyle: {
            color: 'rgba(252, 207, 0, 1)',
          },
          label: {
            show: true,
            position: 'top',
            color: 'rgba(116, 139, 115, 1)',
            fontSize: 22,
            fontWeight: 500,
            lineHeight: 24,
          },
        },
      ],
    }
    _work.choiceUser.forEach((i: any, idx: number) => {
      // 如果是图片，存src对象，否则为字符串
      if (
        i.option &&
        typeof i.option === 'object' &&
        i.option.imgType &&
        i.option.src
      ) {
        (option.xAxis.data as any[]).push(
          JSON.stringify({ imgType: i.option.imgType, src: i.option.src })
        ) // 仅保留相关字段
      }
      else if (typeof i.option === 'string') {
        (option.xAxis.data as any[]).push(i.option)
      }
      else {
        (option.xAxis.data as any[]).push('')
      }
      (option.series[0].data as any[]).push(i.user.length)
    })

    console.log(option)
    // {
    //   title: {
    //     text: 'ECharts 入门示例'
    //   },
    //   tooltip: {},
    //   xAxis: {
    //     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: '销量',
    //       type: 'bar',
    //       data: [5, 20, 36, 10, 10, 20]
    //     }
    //   ]
    // }
    myChart.value.setOption(option)
  }
}

// 监听选择题数据变化
watch(
  () => props.showData,
  (newVal, oldVal) => {
    console.log('发生变化,showData')
    if (
      newVal &&
      newVal.choiceQuestionListData[newVal.workIndex] &&
      props.showData.workDetail.type === '45'
    ) {
      if (
        oldVal &&
        newVal.choiceQuestionListData[newVal.workIndex] &&
        oldVal.choiceQuestionListData[oldVal.workIndex]
      ) {
        if (
          JSON.stringify(newVal.choiceQuestionListData[newVal.workIndex]) !==
          JSON.stringify(oldVal.choiceQuestionListData[oldVal.workIndex])
        ) {
          setEchartsArea1()
        }
      }
    }
    else {
      myChart.value = null
    }
  },
  { immediate: true, deep: true }
)

// 监听作业变化
watch(
  () => props.showData?.choiceQuestionListData,
  (newVal, oldVal) => {
    console.log('choiceQuestionListData变化了')
    if (
      (newVal || newVal === 0) &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        setEchartsArea1()
      }
      else {
        console.log('choiceQuestionListData没有变化')
      }
    }
    else {
      myChart.value = null
    }
  },
  { deep: true }
)

// 监听作业变化
watch(
  () => props.showData?.workIndex,
  (newVal) => {
    if (
      (newVal || newVal === 0) &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      setEchartsArea1()
    }
    else {
      myChart.value = null
    }
  }
)

// 监听echartsArea1变化
watch(
  () => echartsArea1.value,
  (newVal) => {
    if (
      newVal &&
      props.showData &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      setEchartsArea1()
    }
    else {
      myChart.value = null
    }
  }
)

// 监听页面宽度变化
watch(
  () => props.slideWidth,
  (newVal) => {
    if (
      newVal &&
      props.showData &&
      props.showData.workDetail &&
      props.showData.workDetail.type === '45'
    ) {
      handleChartResize()
    }
  }
)

// 组件卸载时清理ECharts实例
onUnmounted(() => {
  // 清除定时器
  if (resizeTimer) {
    clearTimeout(resizeTimer)
    resizeTimer = null
  }

  // 销毁ECharts实例
  if (myChart.value && !myChart.value.isDisposed()) {
    myChart.value.dispose()
    myChart.value = null
  }
})
</script>

<style lang="scss" scoped>
.choiceQuestionDetailDialog {
  background: none;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    overflow: auto;
    .closeIcon {
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      width: 20px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .c_t45 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      .c_t45_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        &>div{
          max-width: calc(100% - 200px);

        }
        &>span{
          position: absolute;
          top: 20px;
          cursor: pointer;
          &:nth-of-type(1){
            left: 0;
          }
          &:nth-of-type(2){
            right: 0;
          }
        }
        .c_t45_t_btn_noActive{
          color: #CCCCCC;
        }
      }
      .c_t45_img {
        max-width: 200px;
        object-fit: cover;
        margin-top: 20px;
      }
      .c_t45_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }

      .c_t45_echarts {
        width: 100%;
        flex: 1;
        min-height: 400px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        & > div {
          width: 100%;
          height: 400px;
        }
      }
    }
    .c_t15 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;
      .c_t15_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }
      .c_t15_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }
      .c_t15_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t15_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;
          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }
          .c_t15_c_i_top {
            display: flex;
            align-items: center;
            gap: 10px;
            & > span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }
            & > div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }
          .c_t15_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .c_t15_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        .c_t15_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;
          & > img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }
          & > span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }
          & > div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }
        .c_t15_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;
          .c_t15_wd_c_imageList {
            width: 100%;
            gap: 20px;
            margin-top: 20px;
            & > img {
              width: 100px;
              height: auto;
              cursor: pointer;
              margin-right: 20px;
              object-fit: cover;
            }
          }
        }
      }
    }
    .c_t72 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;
      .c_t72_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }
      .c_t72_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }
      .c_t72_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t72_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;
          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }
          .c_t72_c_i_top {
            display: flex;
            align-items: center;
            gap: 10px;
            & > span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }
            & > div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }
          .c_t72_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            // height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
            }
          }
        }
      }
      .c_t72_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        .c_t72_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;
          & > img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }
          & > span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }
          & > div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }
        .c_t72_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          justify-content: center;
          .na_m_item {
            width: 100%;
            height: auto;
            margin: 10px 0;
          }

          .na_m_i_name {
            width: fit-content;
            max-width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 10px 10px;
            display: flex;
            align-items: center;
            border-radius: 10px 10px 0 0;
            background-color: #9747ff;
            color: #fff;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .aiName {
            background-color: #0560fc;
          }
          .na_m_i_content {
            padding: 10px;
            border: solid 1px #e7e7e7;
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
            border-radius: 0 0 12px 12px;
            background-color: #fff;
            :deep(img){
              max-width: 100%;
            }
          }

          .messageNode {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding: 10px 10px;
            border: 0.5px solid #e7e7e7;
            border-radius: 12px;
            gap: 10px;
            margin-top: 20px;
          }

          .messageNodeArea{
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .c_t73 {
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      height: auto;
      padding: 40px;
      .c_t73_title {
        color: rgba(0, 0, 0, 0.9);
        font-weight: 600;
        font-size: 24px;
        line-height: 24px;
      }
      .c_t73_type {
        font-weight: 400;
        font-size: 15px;
        line-height: 21px;
        letter-spacing: 0.5px;
        color: rgba(0, 0, 0, 1);
        opacity: 0.5;
        margin-top: 20px;
      }
      .c_t73_content {
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;

        .c_t73_c_item {
          width: 100%;
          height: auto;
          box-shadow: 2px 4px 20px 0px rgba(0, 0, 0, 0.2);
          box-sizing: border-box;
          border-radius: 12px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.6);
          transition: 0.3s;
          cursor: pointer;
          &:hover {
            box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
            background: rgba(255, 255, 255, 0.6);
          }
          .c_t73_c_i_top {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 10px;
            & > span {
              display: block;
              width: 25px;
              height: 25px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(252, 207, 0, 1);
              border-radius: 4px;
              color: rgba(255, 255, 255, 1);
              font-weight: bold;
              font-size: 14px;
            }
            & > div {
              color: rgba(0, 0, 0, 0.7);
              font-weight: 800;
            }
          }
          .c_t73_c_i_bottom {
            margin-top: 15px;
            font-weight: 300;
            font-size: 14px;
            // height: 40px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            img {
              width: 100%;
              max-height: 200px;
              object-fit: cover;
            }
          }
        }
      }
      .c_t73_workDetail {
        width: 100%;
        height: auto;
        margin-top: 40px;
        box-shadow: 4px 4px 14px 0px rgba(252, 207, 0, 0.5);
        box-sizing: border-box;
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        .c_t73_wd_top {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 15px;
          & > img {
            width: 25px;
            height: 25px;
            cursor: pointer;
          }
          & > span {
            display: block;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(252, 207, 0, 1);
            border-radius: 4px;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;
            font-size: 16px;
          }
          & > div {
            color: rgba(0, 0, 0, 0.7);
            font-weight: 800;
            font-size: 18px;
          }
        }
        .c_t73_wd_content {
          width: 100%;
          margin-top: 20px;
          max-height: 100%;
          overflow: auto;
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          justify-content: center;
          & > img {
            max-width: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }
}
</style>