|
|
@@ -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>
|
丸子