提交

src/router/index.js

@@ -15,6 +15,11 @@ const routes = [
     path: '/ai-laboratory',
     component: () => import('../views/AILaboratory.vue')
   },
+  // 智能绘画
+  {
+    path: '/ai-painting',
+    component: () => import('../views/AIPainting.vue')
+  },
   // 智能问答
    {
     path: '/ai-questions',

src/views/AIInitialExperience.vue

@@ -300,8 +300,8 @@ const classTitles = [
   align-content: center; // 顶部对齐;
   cursor: pointer; // 添加鼠标指针样式
   video.full-box-video {
-    width: 90%;
-    height: 90%;
+    width: 100%;
+    height: 100%;
     margin: auto;
     border-radius: rpx(12);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

src/views/AILaboratory.vue

@@ -11,7 +11,7 @@
             @open="handleOpen"
             @close="handleClose"
           >
-            <el-menu-item v-for="(item, index) in groupList" :key="index">
+            <el-menu-item @click="handleMenuItemClick(item)" v-for="(item, index) in groupList" :key="index">
               <el-icon><component :is="item.icon" /></el-icon>
               <span>{{ item.title }}</span>
             </el-menu-item>
@@ -52,7 +52,6 @@ import { useRouter } from 'vue-router'
 import {
   Document,
   Menu as IconMenu,
-  Location,
   Setting,
   ArrowLeftBold
 } from '@element-plus/icons-vue'
@@ -68,6 +67,7 @@ import NumberPeople02 from '@/assets/images/number-people02.png'
 import NumberPeople03 from '@/assets/images/number-people03.png'
 import NumberPeople04 from '@/assets/images/number-people04.png'
 import NumberPeople05 from '@/assets/images/number-people05.png'
+
 // 渲染数字人老师及图片
 const peopleList = ref([
   { id: 10, name: '小智', image: NumberPeople01 },
@@ -85,7 +85,14 @@ const navigateToAIQuestions = person => {
     path: '/ai-questions',
     query: { id: person.id, name: person.name, image: person.image }
   })
-  console.log(person.id)
+  // console.log(person.id)
+}
+
+// 处理菜单项点击事件
+const handleMenuItemClick = (item) => {
+  if (item.title === '智能绘图') {
+    router.push('/ai-painting')
+  }
 }
 
 // 渲染侧边栏
@@ -96,7 +103,7 @@ const groupList = ref([
   },
   {
     icon: Document,
-    title: '智能绘图'
+    title: '智能绘图',
   },
   {
     icon: Setting,

src/views/AIPainting.vue

@@ -0,0 +1,262 @@
+<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 { 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()
+
+// 消息列表和输入内容的响应式变量
+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>

src/views/AIQuestions.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- AI实验室 -->
+  <!-- 数字人智能问答 -->
   <div class="home-container">
     <!-- 左侧折叠面板 -->
     <div class="left-group">
@@ -60,7 +60,8 @@ const goBack = () => {
 const router = useRouter()
 const route = useRoute()
 
-
+const personId = ref(route.query.id)
+const personName = ref(route.query.name)
 
 // 智能问答
 CreateDialogue({ id: personId.value }).then(res => {