AIClass/src/views/AIPainting.vue

<template>
  <!-- 智能绘画 -->
  <div class="home-container">

     <!-- 展开收起侧边栏 -->
    <div
      class="icon-expand"
      :style="{
        backgroundColor: drawerVisible ? '#44449c' : '#7F70C840',
        left: drawerVisible ? '18%' : '0'
      }"
      @click="toggleDrawer"
    >
      <span
        class="vertical-lines"
        :style="{
          color: drawerVisible ? '#8a78d0' : 'white'
        }"
        >||</span
      >
    </div>

    <!-- 左侧折叠面板 -->
    <transition name="drawer-slide">
      <div class="left-group1" v-if="drawerVisible">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item
                v-for="(item, index) in groupList"
                :key="index"
                @click="navigateToAI(item)"
              >
                <img :src="item.icon" alt="" class="menu-icon" />
                {{ item.title }}
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </transition>

    <div class="left-group2">
      <div class="title-box">
        <div class="box-icon" @click="goBack">
          <el-icon class="left-icon"><ArrowLeftBold /></el-icon>
          智能绘画
        </div>
      </div>
      <div class="img-box">
        <p>
          <img
              style=" width: fit-content; height: 180px; margin: 10px;"
              src="@/assets/images/color.png"
              class="avatar user"
          />
        </p>
        <p>期待你的画作喔~</p>
      </div>
    </div>

    <!-- 右侧AI问答 -->
    <div class="number-people">
      <div class="content-box">
        <!-- AI对话框 -->
        <div class="chat-dialog">
          <!-- 对话消息列表 -->
          <div class="message-list">
            <div v-if="imageAllList.length > 0" 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: 220px; 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 v-else class="content-demo">
              <h3>请参考示例：</h3>
              <!-- 用户消息 -->
              <div class="user-message">
                生成粉色的会飞的猪
              </div>
              <!-- AI生成图片对话框 -->
              <div class="ai-message" >
                为您生成图片：
                <div class="image-list" v-if="demoImageList">
                  <el-image
                      v-for="(image, index) in demoImageList"
                      :key="index"
                      style=" width: fit-content; height: 180px; margin: 10px;"
                      :src="image"
                      :preview-src-list="demoImageList"
                      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(demoImageList.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="描述任何画面..."
              @keyup.enter="sendMessage"
            />
            <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 demo1 from '@/assets/images/ai-demo/ai-image-demo1.png'
import demo2 from '@/assets/images/ai-demo/ai-image-demo2.png'
import demo3 from '@/assets/images/ai-demo/ai-image-demo3.png'
import demo4 from '@/assets/images/ai-demo/ai-image-demo4.png'
import NumberPeople00 from '@/assets/images/xiaozhi.png'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  ArrowLeftBold,
  Fold,
  Expand,
  ChatLineRound,
  Picture,
  MagicStick,
  Tickets,
  User
} from '@element-plus/icons-vue'


// 返回上一页
const goBack = () => {
  router.push('/ai-laboratory')
}
const router = useRouter()
const route = useRoute()

// 导入图片
import question from '@/assets/icon/question.png'
import painting from '@/assets/icon/painting.png'
import human from '@/assets/icon/human.png'

// 添加抽屉显示状态
const drawerVisible = ref(true)
// 添加切换抽屉显示状态的函数
const toggleDrawer = () => {
  drawerVisible.value = !drawerVisible.value
}

// 跳转智能问答
const navigateToAI = (group) => {
  if (group.title === "智能问答") {
    let person = { id: 10, name: '小智', image: NumberPeople00, message: '您好，我是您的AI智能助手小智，我会尽力回答您的问题或提供有用的建议！！！！'  };
    router.push({
      // 跳转问答页面
      path: '/ai-questions',
      query: {  id: person.id, name: person.name, image: person.image, message: person.message }
    });
  }
  if (group.title === "智能绘画") {
    router.push('/ai-painting')
  }
  if (group.title === '数字人老师') {
    router.push('/ai-laboratory') // 添加跳转到AI实验室的逻辑
  }
}

// 渲染侧边栏
const groupList = ref([
  {
    icon: question,
    title: '智能问答'
  },
  {
    icon: painting,
    title: '智能绘画'
  },
  {
    icon: human,
    title: '数字人老师'
  }
])

// 处理菜单展开和关闭事件
const handleOpen = () => {}
const handleClose = () => {}


const demoImageList = [demo1, demo2, demo3, demo4]

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

const inputMessage = ref('')
// 发送消息函数
const sendMessage = () => {
  console.log(inputMessage.value)
  if (inputMessage.value.trim()) {
    // messages.value.push(inputMessage.value.trim())
    // 先保存内容 再置空输入框
    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
  }
  const list = await PaintingGetMys(imageIds)
  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;
}
/* 添加过渡样式 */
.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.3s ease;
}
.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.icon-expand {
  width: rpx(8);
  height: rpx(35);
  border-top-right-radius: rpx(5);
  border-bottom-right-radius: rpx(5);
  z-index: 9999;
  position: absolute;
  top: 50%;
  left: 18%;
  transform: translateY(-50%);
  background-color: #44449c;
  cursor: pointer; // 添加鼠标指针样式
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.icon-expand .vertical-lines {
  color: #8a78d0;
  font-size: rpx(10);
}
.menu-icon {
  width:rpx(11);
  height: rpx(11);
  margin-right: rpx(2);
}
// 侧边栏
.left-group1 {
  width: rpx(135);
  height: 100%;
    background: linear-gradient(to bottom, #001169, #8a78d0);

}
.home-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: rpx(0);
   background: linear-gradient(
    to bottom,
    #e2ddfc,
    #f1effd
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
}

// 侧边栏
.left-group {
  width: rpx(135);
  height: 100%;
  background: linear-gradient(to bottom, #001169, #b4a8e1);
}
.mb-2 {
  color: black;
  margin-top: rpx(1);
}
.tac ::v-deep(.el-menu) {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-top: rpx(55);
  margin-left: rpx(10);
}
.el-menu-item {
  width: rpx(115);
  height: rpx(25);
  margin-bottom: rpx(5);
  border-radius: rpx(6);
  color: white;
  font-size: rpx(8);
}
.el-menu-item .el-icon svg {
  font-size: rpx(15);
  color: white;
}

.el-menu ::v-deep(.el-menu-item:hover),
.el-menu ::v-deep(.el-menu-item:focus),
.el-menu ::v-deep(.el-menu-item:active) {
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
  font-size: rpx(8);
}
.el-menu-vertical-demo .el-menu-item.is-active {
  /* 可根据需求修改选中样式 */
  background: linear-gradient(
    to bottom,
    #ffefb0,
    #ffcc00
  ); /* 设置悬停、聚焦、点击状态下的背景色 */
  box-shadow: 0 8px 8px rgb(0, 0, 0, 0.3);
  color: black;
  font-size: rpx(8);
}

// 侧边栏
.left-group2 {
  width: rpx(150);
  height: 100%;
  background-color: #ece9fd;
}
.left-group2 img {
  width: rpx(110);
  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);
}

//左侧展览区图标
.img-box {
  margin-top: rpx(50);
  color: #a39dce;
}
// 对话框
.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;
}


.content-demo {
  background-color: #f4f2fa;
  border-radius: 15px;
  padding: 30px 10px;
}
</style>