AIClass/src/views/AIPainting.vue

<template>
  <!-- 智能绘画 -->
  <div class="home-container">
    <!-- 左侧折叠面板 -->
    <div class="left-group">
      <div class="title-box">
        <div class="box-icon" @click="goBack">
          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
          智能绘画
        </div>
      </div>
    </div>
    <!-- 右侧AI问答 -->
    <div class="number-people">
      <div class="content-box">
        <!-- AI对话框 -->
        <div class="chat-dialog">
          <!-- 对话消息列表 -->
          <div class="message-list">
            <div v-for="(item, index) in imageAllList" :key="index">

              <!-- 用户消息 -->
              <div class="user-message" v-if="item.type === 'user'">
                {{ item.content }}
              </div>

              <!-- AI生成图片对话框 -->
              <div class="ai-message" v-if="item.type !== 'user'">

                {{ item.content }}

                <div class="image-list" v-if="item.imageList">
                  <el-image
                      v-for="(image, index) in item.imageList"
                      :key="index"
                      style=" width: fit-content; height: 150px; margin: 10px;"
                      :src="image"
                      :preview-src-list="item.imageList"
                      fit="cover"
                      show-progress
                  >
                    <template
                        #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
                    >
                      <el-icon @click="prev"><Back /></el-icon>
                      <el-icon @click="next"><Right /></el-icon>
                      <el-icon @click="setActiveItem(item.imageList.length - 1)">
                        <DArrowRight />
                      </el-icon>
                      <el-icon @click="actions('zoomOut')"><ZoomOut /></el-icon>
                      <el-icon
                          @click="actions('zoomIn', { enableTransition: false, zoomRate: 2 })">
                        <ZoomIn />
                      </el-icon>
                      <el-icon
                          @click="actions('clockwise', { rotateDeg: 180, enableTransition: false })">
                        <RefreshRight />
                      </el-icon>
                      <el-icon @click="actions('anticlockwise')"><RefreshLeft /></el-icon>
                      <el-icon @click="reset"><Refresh /></el-icon>
                      <el-icon @click="download(activeIndex)"><Download /></el-icon>
                    </template>
                  </el-image>
                </div>
              </div>

            </div>
          </div>
          <!-- 输入框和发送按钮 -->
          <div class="input-section">
            <input
              type="text"
              v-model="inputMessage"
              placeholder="说说你的灵感..."
            />
            <button @click="sendMessage">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,onUnmounted} from 'vue'
import {AiImageStatusEnum, CreatePainting, PaintingGetMys} from '@/api/questions.js'
import { useRouter, useRoute } from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  ArrowLeftBold
} from '@element-plus/icons-vue'

// 返回上一页
const goBack = () => {
  router.go(-1)
}
const router = useRouter()
const route = useRoute()

// AI生成图片
// CreatePainting({
//   modelId: 56,
//   prompt:''
// }).then(res=>{
//   console.log(res);
// })

// 获取绘图记录
// CreatePaintingGetMy().then(res=>{
//   console.log(res);
// })

// 消息列表和输入内容的响应式变量
const messages = ref([])

const inputMessage = ref('')
// 发送消息函数
const sendMessage = () => {
  console.log(inputMessage.value)
  if (inputMessage.value.trim()) {
    // messages.value.push(inputMessage.value.trim())
    // inputMessage.value = ''

    let content = inputMessage.value;
    inputMessage.value = ''

    imageAllList.value.push({
      type: 'user',
      content: content,
    })
    imageAllList.value.push({
      type: 'ai',
      content: "正在为您生成图片，请稍等...",
    })

    CreatePainting({
      "modelId": 56,
      "prompt":content,
      "width":1024,
      "height":1024
    }).then(res=>{
      console.log("生成图片",res)
      //目前写死调用已生成的图片，全部通了后再改
      inProgressImageMap.value[res.data] = {id:res.data,status:AiImageStatusEnum.IN_PROGRESS}
      // inProgressImageMap.value[260] = {id:260,status:AiImageStatusEnum.IN_PROGRESS}
    })
  }
}

// 生成图片
import { ElIcon } from 'element-plus'
import {
  Back,
  DArrowRight,
  Download,
  Refresh,
  RefreshLeft,
  RefreshRight,
  Right,
  ZoomIn,
  ZoomOut,
} from '@element-plus/icons-vue'


const imageAllList = ref([]) // 对话的消息列表
const imageList = ref([]) // image 列表
// 图片轮询相关的参数（正在生成中的）
const inProgressImageMap = ref({}) // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
const inProgressTimer = ref() // 生成中的 image 定时器，轮询生成进展


/** 轮询生成中的 image 列表 */
const refreshWatchImages = async () => {
  const imageIds = Object.keys(inProgressImageMap.value).map(Number)
  if (imageIds.length === 0) {
    return
  }
  console.log("轮询生成中的 image 列表",imageIds,imageIds.join(','))
  const list = await PaintingGetMys(imageIds)
  console.log("轮询生成中的 image 列表",list)
  const newWatchImages = {}
  list.data.forEach((image) => {
    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
      newWatchImages[image.id] = image
    } else {

      imageAllList.value.pop();
      imageAllList.value.push({
        type: 'ai',
        content: "已为您生成图片：",
        imageList: [image.picUrl],
      })
    }
  })
  inProgressImageMap.value = newWatchImages
  if (newWatchImages.size === 0) {
    inProgressTimerFun()
  }
}


/** 组件挂在的时候 */
onMounted(async () => {
  refreshWatchImagesFun()
})

/** 组件取消挂在的时候 */
onUnmounted(async () => {
  inProgressTimerFun()
})

// 自动刷新 image 列表
const refreshWatchImagesFun = () => {
  inProgressTimer.value = setInterval(async () => {
    await refreshWatchImages()
  }, 1000 * 3)
}

// 停止刷新image列表
const inProgressTimerFun = () => {
  if (inProgressTimer.value) {
    clearInterval(inProgressTimer.value)
  }
}
</script>

<style scoped lang="scss">
@use 'sass:math';
// 定义rpx转换函数
@function rpx($px) {
  @return math.div($px, 750) * 100vw;
}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: rpx(0);
}

// 侧边栏
.left-group {
  width: rpx(150);
  height: 100%;
  background-color: #ece9fd;
}
.left-group img {
  width: rpx(120);
  height: auto;
  margin-top: rpx(30);
}
.title-box {
  height: rpx(50);
}
.box-icon {
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex; // 添加 flex 布局
  align-items: center; // 垂直居中
  color: black; // 设置图标颜色为白色
  padding-left: rpx(15);
  font-size: rpx(10); // 设置图标大小，可按需调整
  cursor: pointer; // 添加鼠标指针样式
}
.box-icon .left-icon {
  margin-left: rpx(10);
  margin-right: rpx(5); // 设置图标和文字之间的间距 ;
}

.number-people {
  flex: 1;
  height: 100%;
  display: flex;
  background-color: #ece9fd;
}
.content-box {
  flex: 1;
  margin-top: rpx(10);
  margin-bottom: rpx(10);
  margin-right: rpx(10);
  border-radius: rpx(15);
  background: rgba($color: #ffffff, $alpha: 0.5);
}

// 对话框
.chat-dialog {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.message-list {
  flex: 1;
  overflow-y: auto;
  padding: rpx(15);
}

.message-list .user-message {
  background-color: #ffffff;
  margin-left: auto; // 消息靠右显示
  margin-right: 0; // 重置右边距
  max-width: rpx(400);
  font-size: rpx(8);
  width: fit-content; // 宽度随文字内容变化
  border-radius: rpx(5);
  padding: rpx(5);
  text-align: left; // 文字左对齐
}

.message-list .ai-message {
  background-color: #ffdd55;
  margin-left: 0; // 消息靠左显示
  margin-right: auto; // 重置右边距
  margin-bottom: rpx(10);
  width: fit-content;
  max-width: rpx(400);
  padding: rpx(5);
  font-size: rpx(8);
  border-radius: rpx(5);
  text-align: left; // 文字左对齐
}
.input-section {
  display: flex;
  padding: rpx(10);
  gap: rpx(10);
}
.input-section input {
  flex: 1;
  padding: rpx(5);
  font-size: rpx(7);
  border: 1px solid #ccc;
  border-radius: rpx(5);
}
.input-section button {
  padding: rpx(5) rpx(15);
  background: linear-gradient(
    to bottom,
    #fee78a,
    #ffce1b
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  color: black;
  border: none;
  font-size: rpx(7);
  border-radius: rpx(5);
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(202, 52, 52, 0.3);
}
.image-list {
  display: flex;
  flex-wrap: wrap;
}
</style>