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 class="user-message">生成图片</div>
            <!-- AI生成图片对话框 -->
            <div class="ai-message">
              接下来我将生成四张会飞的猪的图片。画面风格是写实风，主体是一只身体肥硕、粉色皮肤、小短腿的猪，它长着两只大耳朵和一条卷曲的尾巴，正扇动着一对白色的翅膀在空中飞行。<br />
               <div class="image-list">
                <el-image
                  v-for="(image, index) in srcList"
                  :key="index"
                  style=" width: fit-content; height: 150px; margin: 10px;"
                  :src="image"
                  :preview-src-list="srcList"
                  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(srcList.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 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 } from 'vue'
import { CreatePainting,CreatePaintingGetMy} 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 = () => {
  if (inputMessage.value.trim()) {
    messages.value.push(inputMessage.value.trim())
    inputMessage.value = ''
  }
}

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

const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]


</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>