Merge remote-tracking branch 'origin/master'

virgo.wzfrontend/workark/src/api/ai.js

@@ -0,0 +1,47 @@
+import request from '@/axios'
+/* 
+ * 获取dify文本数据
+ * 
+ * 
+ */
+export function getAIData(simpleUUID) {
+	return request({
+		url: `/api/ai/completion/${simpleUUID}`,
+		method: 'get',
+	})
+}
+/* 
+ * 生成dify文本数据
+ * 
+ * 
+ */
+export function createAIData(difyTypeId, data) {
+	return request({
+		url: `/api/ai/completion/run/${difyTypeId}`,
+		method: 'post',
+		data: data
+	})
+}
+/* 
+ * 获取dify文本数据状态
+ * 
+ * 
+ */
+export function getAIDataStatus(simpleUUID) {
+	return request({
+		url: `/api/ai/completion/${simpleUUID}`,
+		method: 'get'
+	})
+}
+/* 
+ * 获取dify文本数据列表
+ * 
+ * 
+ */
+export function getAIDataList(data) {
+	return request({
+		url: `/api/ai/completion`,
+		method: 'post',
+		data: data
+	})
+}

virgo.wzfrontend/workark/src/components/work/common/aiChat.vue

@@ -0,0 +1,421 @@
+<template>
+	<div class="ai-chat-container">
+		<div class="chat-body" ref="chatBody">
+			<div class="message ai-message">
+				<div class="message-header">
+					<div class="message-header-img">
+						<avatar :user="{
+							portrait:'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed'
+						}"></avatar>
+					</div>
+					<div class="message-header-label">AI网站生成助手</div>
+				</div>
+				<div class="message-content">
+					<p>您好！我是AI网站生成助手，请点击按钮生成企业官网。</p>
+					<el-button size="mini" @click="visible = true" :disabled="messageList.length > 0"
+						style="margin-top: 10px;">
+						点击生成企业官网
+					</el-button>
+				</div>
+				<div class="message-time">
+					{{ formatTime(messageList.length === 0? new Date():messageList[0].date) }}
+				</div>
+			</div>
+			<div v-for="(message, index) in messageList" :key="index">
+				<div class="message user-message">
+					<div class="message-header">
+						<div class="message-header-img">
+							<avatar :user="user"></avatar>
+						</div>
+						<div class="message-header-label">{{user.userName}}</div>
+					</div>
+					<div class="message-content" v-html="returnUserInputs(message.inputs)"></div>
+					<div class="message-time">
+						{{ formatTime(message.date) }}
+					</div>
+				</div>
+				<div class="message ai-message" v-if="!loading || message.status !== 'running'"
+					style="margin-top: 15px;">
+					<div class="message-header">
+						<div class="message-header-img">
+							<avatar :user="{
+								portrait:'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed'
+							}"></avatar>
+						</div>
+						<div class="message-header-label">AI网站生成助手</div>
+					</div>
+					<div class="message-content">
+						<div v-if="message.status === 'error'">
+							<p>服务器繁忙，请稍后重试</p>
+							<el-button size="mini" @click="reload(message)" :disabled="index !== messageList.length - 1"
+								style="margin-top: 10px;">
+								点击重试
+							</el-button>
+						</div>
+						<div class="ai-website-boxs" v-else>
+							<div class="ai-website-box" v-html="extractContentBetween(message.outputs)"></div>
+							<div class="ai-website-mask">
+								<el-button size="mini" type="primary" @click="preview(message)">
+									预览
+								</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="message-time">
+						{{ formatTime(message.endDate) }}
+					</div>
+				</div>
+			</div>
+			<div v-if="loading" class="typing-indicator">
+				<div class="typing-dot"></div>
+				<div class="typing-dot"></div>
+				<div class="typing-dot"></div>
+				<span style="margin-left: 10px;">思考中...</span>
+			</div>
+		</div>
+		<div class="input-container">
+			<el-input type="textarea" v-model="newMessage" placeholder="给AI发送消息" resize="none" rows="2"
+				:autosize="{ minRows: 2, maxRows: 6 }" :disabled="!htmlCode">
+			</el-input>
+			<div class="input-button">
+				<el-button type="primary" size="mini" @click="sendMessage"
+					:disabled="!newMessage.trim() || loading || !htmlCode">
+					发送
+				</el-button>
+			</div>
+		</div>
+		<el-dialog :close-on-click-modal="false" title="生成网站" :visible.sync="visible" width="900px"
+			:append-to-body="true">
+			<website-form v-if="visible" @callback="callback"></website-form>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import websiteForm from '@/components/work/common/websiteForm.vue'
+	import {
+		getAIDataStatus,
+		getAIDataList,
+		createAIData
+	} from '@/api/ai'
+	export default {
+		components: {
+			websiteForm
+		},
+		data() {
+			return {
+				messageList: [],
+				newMessage: '',
+				loading: false,
+				darkMode: false,
+				visible: false,
+				timer: null,
+				formData: {
+					site_name: '网站名称',
+					site_type: '网站类型',
+					color_scheme: '布局风格',
+					layout_style: '主色调',
+					sections: '主要模块',
+					logo_url: 'LOGO'
+				},
+				user: {},
+				htmlCode: ''
+			}
+		},
+		mounted() {
+			this.user = this.$store.getters.user;
+			this.scrollToBottom();
+			this.init()
+		},
+		watch: {
+			messageList: {
+				deep: true,
+				handler() {
+					this.$nextTick(() => {
+						this.scrollToBottom();
+					});
+				}
+			}
+		},
+		beforeDestroy() {
+			this.clearTimer();
+		},
+		methods: {
+			init() {
+				getAIDataList({
+					userId: this.$store.getters.user.userId
+				}).then(res => {
+					if (res.state) {
+						this.messageList = res.data;
+						if (this.messageList.length > 0) {
+							let data = this.messageList[this.messageList.length - 1];
+							if (data.status === 'running') this.initStaus(data.simpleUUID);
+						}
+					}
+				})
+			},
+			initStaus(simpleUUlD) {
+				this.loading = true;
+				this.timer = setInterval(() => {
+					getAIDataStatus(simpleUUlD).then(res => {
+						if (res.state) {
+							let data = res.data;
+							if (!data) return;
+							if (data.status === 'succeeded' || data.status === 'error') {
+								this.clearTimer();
+								this.loading = false;
+								this.messageList[this.messageList.length - 1] = data;
+							}
+						}
+					})
+				}, 10000)
+			},
+			returnUserInputs(obj) {
+				if (!obj) return '';
+				let html = '';
+				let objs = JSON.parse(obj);
+				if (objs['site_name']) {
+					for (let key in objs) {
+						html += this.formData[key] + ':' + objs[key] + "<br />";
+					}
+				} else {
+					html = objs.adjustments;
+				}
+				return html;
+			},
+			clearTimer() {
+				if (!this.timer) return;
+				clearInterval(this.timer);
+				this.timer = null;
+			},
+			formatTime(date) {
+				return new Date(date).toLocaleTimeString([], {
+					hour: '2-digit',
+					minute: '2-digit'
+				});
+			},
+			scrollToBottom() {
+				const container = this.$refs.chatBody;
+				if (container) {
+					container.scrollTop = container.scrollHeight;
+				}
+			},
+			callback(type) {
+				this.visible = false;
+				if (type === 'init') this.init();
+			},
+			sendMessage() {
+				createAIData(3, {
+					detailed_html: this.htmlCode,
+					adjustments: this.newMessage
+				}).then(this.successFunc);
+			},
+			reload(message) {
+				if (!this.htmlCode) {
+					createAIData(3, JSON.parse(message.inputs)).then(this.successFunc);
+				} else {
+					createAIData(1, JSON.parse(message.inputs)).then(this.successFunc);
+				}
+			},
+			successFunc(res) {
+				if (res.state) {
+					this.newMessage = '';
+					this.$message.success('操作成功');
+					this.init();
+				}
+			},
+			extractContentBetween(html) {
+				if (!html) return '';
+				// 使用正则表达式匹配 ```html 和 ``` 之间的内容
+				let regex = /```html([\s\S]*?)```/;
+				let match = html.match(regex);
+				let htmls = match && match[1] ? match[1].trim() : ''
+				return htmls;
+			},
+			preview(message) {
+				this.htmlCode = this.extractContentBetween(message.outputs);
+				this.$emit('previewWebSite', this.htmlCode);
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.ai-chat-container {
+		width: 100%;
+		max-width: 900px;
+		height: 100%;
+		background: white;
+		border-radius: 16px;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ai-website-boxs {
+		width: 185px;
+		height: 108px;
+		overflow: hidden;
+		cursor: pointer;
+		position: relative;
+
+		&:hover .ai-website-mask {
+			display: flex;
+		}
+	}
+
+	.ai-website-mask {
+		background: rgba(0, 0, 0, 0.1);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: none;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.ai-website-box {
+		width: 1850px;
+		height: 1080px;
+		overflow: hidden;
+		transform: scale(0.1);
+		transform-origin: 0 0;
+	}
+
+	/* 聊天内容区域 */
+	.chat-body {
+		flex: 1;
+		padding: 20px;
+		overflow-y: auto;
+		background: #f8fafc;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+
+	.message {
+		max-width: 90%;
+		padding: 12px 16px;
+		border-radius: 18px;
+		position: relative;
+		animation: fadeIn 0.3s ease;
+		line-height: 1.5;
+	}
+
+	.user-message {
+		background: $--color-primary;
+		color: white;
+		margin-left: auto;
+		border-bottom-right-radius: 4px;
+	}
+
+	.ai-message {
+		background: #ffffff;
+		border: 1px solid #e9ecef;
+		margin-right: auto;
+		border-bottom-left-radius: 4px;
+	}
+
+	.message-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 5px;
+		font-weight: 500;
+	}
+
+	.message-header-img {
+		width: 30px;
+		height: 30px;
+		border-radius: 30px;
+		overflow: hidden;
+		margin-right: 5px;
+	}
+
+	.message-header-label {
+		flex: 1;
+		width: 0;
+		overflow: hidden;
+	}
+
+	.message-time {
+		font-size: 0.7rem;
+		opacity: 0.7;
+		margin-top: 5px;
+		text-align: right;
+	}
+
+	/* 加载指示器 */
+	.typing-indicator {
+		display: flex;
+		align-items: center;
+		padding: 12px 16px;
+		background: white;
+		border: 1px solid #e9ecef;
+		border-radius: 18px;
+		width: fit-content;
+		margin-bottom: 15px;
+		border-bottom-left-radius: 4px;
+	}
+
+	.typing-dot {
+		width: 8px;
+		height: 8px;
+		background: #6c757d;
+		border-radius: 50%;
+		margin: 0 3px;
+		animation: typing 1.4s infinite;
+	}
+
+	.typing-dot:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	.typing-dot:nth-child(2) {
+		animation-delay: 0.2s;
+	}
+
+	.typing-dot:nth-child(3) {
+		animation-delay: 0.4s;
+	}
+
+	/* 输入区域 */
+	.input-container {
+		padding: 10px;
+		background: #f8f9fa;
+		border-top: 1px solid #e9ecef;
+	}
+
+	.input-button {
+		margin-top: 10px;
+		text-align: right;
+	}
+
+	/* 动画 */
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes typing {
+
+		0%,
+		60%,
+		100% {
+			transform: translateY(0);
+		}
+
+		30% {
+			transform: translateY(-5px);
+		}
+	}
+</style>

virgo.wzfrontend/workark/src/components/work/common/websiteForm.vue

@@ -0,0 +1,74 @@
+<template>
+	<div class="hui-flex hui-dialog">
+		<div class="hui-flex-box hui-dialog-content">
+			<el-form :model="form" label-position="top">
+				<el-form-item label="网站名称">
+					<el-input type="text" v-model="form.site_name" placeholder="请输入网站名称"></el-input>
+				</el-form-item>
+				<el-form-item label="网站类型">
+					<el-input type="text" v-model="form.site_type" placeholder="请输入网站类型"></el-input>
+				</el-form-item>
+				<el-form-item label="布局风格">
+					<el-input type="text" v-model="form.layout_style" placeholder="请输入布局风格"></el-input>
+				</el-form-item>
+				<el-form-item label="主色调">
+					<el-color-picker v-model="form.color_scheme"></el-color-picker>
+				</el-form-item>
+				<el-form-item label="LOGO" class="hui-textarea">
+					<upload ref="listDisplayImage" :list="listDisplayImage" type="insert" :maxLen="1"></upload>
+				</el-form-item>
+				<el-form-item label="主要模块" class="hui-textarea">
+					<el-input type="textarea" v-model="form.sections" placeholder="请输入主要模块" resize="none">
+					</el-input>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div class="hui-dialog-submit">
+			<el-button size="small" @click="$emit('callback')">取 消</el-button>
+			<el-button size="small" type="primary" @click="submit" :loading="loading">保 存</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		createAIData
+	} from '@/api/ai'
+	const upload = () => import('@/components/common/upload');
+	export default {
+		data() {
+			return {
+				form: {
+					site_name: '',
+					site_type: '',
+					color_scheme: '',
+					layout_style: '',
+					sections: ''
+				},
+				loading: false,
+				listDisplayImage: []
+			}
+		},
+		components: {
+			upload
+		},
+		methods: {
+			submit() {
+				this.loading = true;
+				let postData = JSON.parse(JSON.stringify(this.form));
+				let fileBox = this.$refs.listDisplayImage.fileList;
+				if (fileBox && fileBox.length > 0) postData['logo_url'] = fileBox[0].url;
+				createAIData(2, postData).then(this.successFunc)
+			},
+			successFunc(res) {
+				this.loading = false;
+				if (res.state) {
+					this.$message.success('操作成功');
+					this.$emit('callback', 'init');
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss"></style>

virgo.wzfrontend/workark/src/components/work/serve/content/edit.vue

@@ -23,7 +23,7 @@
 					<custom-data ref="customData" :list="customList" :option="option"></custom-data>
 				</el-form-item>
 				<el-form-item label="列表展示图" class="hui-textarea">
-					<upload ref="listDisplayImage" :list="listDisplayImage" type="insert" :maxLen="15"></upload>
+					<upload ref="listDisplayImage" :list="listDisplayImage" type="insert" :maxLen="1"></upload>
 				</el-form-item>
 				<el-form-item label="商品配图" class="hui-textarea">
 					<upload ref="rotatingImages" :list="rotatingImages" type="insert" :maxLen="15"></upload>

virgo.wzfrontend/workark/src/views/work/oa/ai/website.vue

@@ -4,51 +4,20 @@
 			<div class="website-form-title">
 				网站信息
 			</div>
-			<div class="hui-flex-box website-form-content">
-				<el-form :model="form" label-position="top">
-					<el-form-item label="企业名称" prop="company_name" :rules="[{required: true, message: '请输入企业名称'}]">
-						<el-input type="text" v-model="form.company_name" placeholder="请输入企业名称"></el-input>
-					</el-form-item>
-					<el-form-item label="企业简称">
-						<el-input type="text" v-model="form.company_sub_name" placeholder="请输入企业简称"></el-input>
-					</el-form-item>
-					<el-form-item label="企业目标">
-						<el-input type="text" v-model="form.target" placeholder="请输入企业目标"></el-input>
-					</el-form-item>
-					<el-form-item label="主营业务">
-						<el-input type="text" v-model="form.business_scope" placeholder="请输入主营业务"></el-input>
-					</el-form-item>
-					<el-form-item label="核心优势">
-						<el-input type="text" v-model="form.key_features" placeholder="请输入核心优势"></el-input>
-					</el-form-item>
-					<el-form-item label="联系方式">
-						<el-input type="text" v-model="form.contact_info" placeholder="请输入联系方式"></el-input>
-					</el-form-item>
-					<el-form-item label="行业领域">
-						<el-input type="text" v-model="form.industry_sector" placeholder="请输入行业领域"></el-input>
-					</el-form-item>
-					<el-form-item label="成立地点与时间">
-						<el-input type="text" v-model="form.time_place" placeholder="请输入成立地点与时间"></el-input>
-					</el-form-item>
-					<el-form-item label="整体风格">
-						<el-input type="text" v-model="form.all_style" placeholder="请输入整体风格"></el-input>
-					</el-form-item>
-				</el-form>
-			</div>
-			<div class="hui-drawer-submit">
-				<el-button type="primary" size="mini">立即生成</el-button>
+			<div class="hui-flex-box">
+				<ai-chat @previewWebSite="previewWebSite"></ai-chat>
 			</div>
 		</div>
 		<div class="website-show hui-flex">
 			<div class="website-form-title">
-				<span>网站展示</span>
+				<span>网站展示</span>
 				<span></span>
 			</div>
 			<div class="hui-flex-box">
 				<div class="no-empty" v-if="!websiteHtml">
-					<el-empty description="暂无AI生成网站"></el-empty>
+					<el-empty description="预览网站"></el-empty>
 				</div>
-				<div v-else v-html="websiteHtml"></div>
+				<div class="html-box" v-else v-html="websiteHtml"></div>
 			</div>
 			<div class="hui-drawer-submit">
 				<el-button type="primary" size="mini" :disabled="!websiteHtml">保存</el-button>
@@ -59,22 +28,28 @@
 </template>
 
 <script>
+	import {
+		getAIData
+	} from '@/api/ai'
+	import aiChat from '@/components/work/common/aiChat.vue'
 	export default {
+		components: {
+			aiChat
+		},
 		data() {
 			return {
-				form: {
-					company_name: '',
-					company_sub_name: '',
-					business_scope: '',
-					key_features: '',
-					contact_info: '',
-					industry_sector: '',
-					time_place: '',
-					all_style: '',
-					target: ''
-				},
 				websiteHtml: ''
 			}
+		},
+		mounted() {
+		},
+		methods: {
+			previewWebSite(html) {
+				this.websiteHtml = html;
+			},
+			handleSend() {
+
+			}
 		}
 	}
 </script>
@@ -83,6 +58,18 @@
 	.ai-website {
 		flex-direction: row;
 
+		.html-box {
+			width: 100%;
+			overflow: hidden;
+		}
+
+		.iframe-class {
+			width: 100%;
+			height: 100%;
+			border: none;
+			overflow: hidden;
+		}
+
 		.website-form-title {
 			height: 44px;
 			line-height: 44px;