React-AI打印机气泡弹窗分组展示

原创

已于 2024-12-25 10:30:22 修改 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #人工智能 #css

于 2024-12-25 09:25:02 首次发布

// AI组件： css
.AIItem {
   
   
  width: 444px;
  .AIItemTitle {
   
   
    margin-bottom: 10px;
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .AIlogo {
   
   
      img, svg {
   
   
        width: 22px;
        height: 22px;
        vertical-align: middle;
      }
      span {
   
   
        background: -webkit-linear-gradient(81.7deg, #3D78F9 -17.88%, #FF81F2 166.84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        vertical-align: middle;
      }
    }

    .changeGroup {
   
   
      cursor: pointer;
      transition: .3s;
      img {
   
   
        width: 14px;
        height: 14px;
        vertical-align: middle;
      }
      span {
   
   
        margin-left: 4px;
        color: #1869F5;
        vertical-align: middle;
      }
      &:hover {
   
   
        opacity: .7;
      }
    }
  }
  .AITopicPopover {
   
   
    padding: 0 12px;
    min-height: 140px;
    max-height: 200px;
    font-size: 12px;
    overflow-y: auto;
    .AINode, .NotAINode {
   
   
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      text-align: justify;
      &.grey {
   
   
        opacity: .3;
      }
      .AISpot {
   
   
        flex-shrink: 0;
        margin: 7px 5px 0 0;
        width: 5px;
        height: 5px;
        background: #000;
        border-radius: 50%;
      }
      .AIText {
   
   
        .AITextBtn {
   
   
          margin-left: 5px;
          padding: 0 10px;
          display: inline-block;
          height: 15px;
          border-radius: 4px;
          font-size: 10px;
          color: #FFF;
          background: linear-gradient(81.7deg, #3D78F9 -17.88%, #FF81F2 166.84%);
          cursor: default;
          transition: .3s;
          &.pointer {
   
   
            cursor: pointer;
            &:hover {
   
   
              opacity: .9;
            }
          }
        }
      }
    }
  }

  .spinner {
   
   
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }
  @keyframes spin {
   
   
    0% {
   
    transform: rotate(0deg); }
    100% {
   
    transform: rotate(360deg); }
  }
}

// AI组件： html + js
import React, {
   
    useState, useEffect, useRef } from "react";
import styles from "./index.module.less";
import classNames from "classnames";
import _ from "lodash";

interface RecInterviewAiQuestionDto {
   
   
  id: number;
  aiQuestionId: string;
  questionDesc: string;
  status?: number;
  talentResumeNo?: string;
  resumePoolId?: number;
  interviewRecordId?: number;
  interviewProcess?: number;
  roomId?: number;
  type?: string;
  bizId?: string;
  md5Key?: string;
  createTime?: string;
  createPin?: string;
  updateTime?: string;
  updatePin?: string;
  yn?: number;
  isView?: boolean;
}

interface InterviewAiQuestionVo {
   
   
  status?: number;
  questionMap?: {
   
   
    [key: string]: RecInterviewAiQuestionDto[];
  };
  questionDtoList?: RecInterviewAiQuestionDto[];
}

interface IProps {
   
   
  nodeList: RecInterviewAiQuestionDto[];
  classNameNode?: string;
  visible?: boolean;
  speed?: number;
  fieldNames?: {
   
    btnType?: string; text?: string };
  isGroup?: boolean