<template>
	<div>
		<div :class="['main-container', { 'sidebar-open': isSidebarOpen }]">
			<div class="editor-container editor-container_document-editor editor-container_include-style"
				ref="editorContainerElement">
				<div class="editor-container__menu-bar" ref="editorMenuBarElement"></div>
				<div class="editor-container__toolbar" ref="editorToolbarElement"></div>
				<div class="editor-container__editor-wrapper">
					<div class="editor-container__editor">
						<div ref="editorElement">
							<ckeditor v-if="isLayoutReady" v-model="config.initialData" :editor="editor"
								:config="config" @ready="onReady" />
						</div>
					</div>
				</div>
			</div>
			<el-button type="primary" @click="toggleSidebar()" style="display:none"
				id="toggleSidebarButton">打开/关闭侧边栏</el-button>
			<div class="sidebar" :class="{ 'active': isSidebarOpen }">
				<!-- 侧边栏内容 -->
				<el-menu class="sidebar-menu" :class="{ 'active': isNavbarOpen }" :collapse="isNavbarOpen">
					<el-sub-menu index="1" class="horizontal-sub-menu">
						<template #title>智能助手</template>
						<el-menu-item index="1-1" @click="showContent('polish')">润色</el-menu-item>
						<el-menu-item index="1-2" @click="showContent('rewrite')">改写</el-menu-item>
						<el-menu-item index="1-3" @click="showContent('summary')">摘要</el-menu-item>
						<el-menu-item index="1-4" @click="showContent('edit')">修改</el-menu-item>
						<el-menu-item index="1-5" @click="showContent('translate')">翻译</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="2" class="horizontal-sub-menu">
						<template #title>图文转换</template>
						<el-menu-item index="2-1" @click="showContent('ocr')">OCR</el-menu-item>
						<el-menu-item index="2-2" @click="showContent('mindmap')">脑图生成</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="3" class="horizontal-sub-menu">
						<template #title>样式生成</template>
						<el-menu-item index="3-1" @click="showContent('manual')">手动生成</el-menu-item>
						<el-menu-item index="3-2" @click="showContent('ai')">对话生成</el-menu-item>
					</el-sub-menu>
				</el-menu>
				<!-- Content Sections -->
				<div v-if="currentContent" class="content-section">
					<!-- Dynamic content based on navigation selection -->
					<div v-if="currentContent === 'polish'">润色内容</div>
					<div v-if="currentContent === 'rewrite'">改写内容</div>
					<div v-if="currentContent === 'summary'">摘要内容</div>
					<div v-if="currentContent === 'edit'">修改内容</div>
					<div v-if="currentContent === 'translate'">翻译内容</div>
					<div v-if="currentContent === 'ocr'">OCR内容</div>
					<div v-if="currentContent === 'mindmap'">脑图生成内容</div>
					<div v-if="currentContent === 'manual'">
						<!-- 手动输入表单 -->
						<el-form @submit.prevent="submitForm">
							<el-col :span="30">
								<el-form-item label="字体颜色:">
									<el-col :span="10">
										<el-select v-model="formData.color" @change="updatePreview">
											<el-option label="黑色" value="black"
												style="background-color: black;">黑色</el-option>
											<el-option label="红色" value="red"
												style="background-color: red;">红色</el-option>
											<el-option label="蓝色" value="blue"
												style="background-color: blue;">蓝色</el-option>
											<el-option label="绿色" value="green"
												style="background-color: green;">绿色</el-option>
											<el-option label="黄色" value="yellow"
												style="background-color: yellow;">黄色</el-option>
											<el-option label="紫色" value="purple"
												style="background-color: purple;">紫色</el-option>
											<el-option label="橙色" value="orange"
												style="background-color: orange">橙色</el-option>
										</el-select>
									</el-col>
									<el-col :span="8">
										<el-color-picker v-model="formData.color"
											@change="updatePreview"></el-color-picker>
									</el-col>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item label="字体大小:">
									<el-row :gutter="10">
										<el-col :span="12">
											<el-select v-model="formData.fontSize" @change="updatePreview">
												<el-option value="">请选择</el-option>
												<el-option value="29.3px" style="font-size: 29.3px;">二号</el-option>
												<el-option value="24px" style="font-size: 24px;">小二</el-option>
												<el-option value="21.3px" style="font-size: 21.3px;">三号</el-option>
												<el-option value="20px" style="font-size: 20px;">小三</el-option>
												<el-option value="18.6px" style="font-size: 18.6px;">四号</el-option>
												<el-option value="16px" style="font-size: 16px;">小四</el-option>
												<el-option value="14px" style="font-size: 14px;">五号</el-option>
												<el-option value="12px" style="font-size: 12px;">小五</el-option>
												<el-option value="10px" style="font-size: 10px;">六号</el-option>
												<el-option value="8.6px" style="font-size: 8.6px;">小六</el-option>
											</el-select>
										</el-col>
										<el-col :span="12">
											<el-input v-model="formData.fontSize" placeholder="例如: 16px"
												@input="updatePreview"></el-input>
										</el-col>
									</el-row>
								</el-form-item>
							</el-col>
							<!-- 字体选择 -->
							<el-row :gutter="8">
								<el-col :span="12">
									<el-form-item label="字体:">
										<el-select v-model="formData.fontFamily" @change="updatePreview">
											<!--英文字体-->
											<el-option value="">请选择</el-option>
											<el-option value="Arial" style="font-family: Arial;">Arial</el-option>
											<el-option value="Courier New" style="font-family: 'Courier New';">Courier
												New</el-option>
											<el-option value="Georgia" style="font-family: Georgia;">Georgia</el-option>
											<el-option value="Helvetica"
												style="font-family: Helvetica;">Helvetica</el-option>
											<el-option value="Times New Roman"
												style="font-family: 'Times New Roman';">Times
												New Roman</el-option>
											<el-option value="serif" style="font-family: serif;">serif</el-option>
											<el-option value="sans-serif"
												style="font-family: sans-serif;">sans-serif</el-option>
											<el-option value="monospace"
												style="font-family: monospace;">monospace</el-option>
											<el-option value="cursive" style="font-family: cursive;">cursive</el-option>
											<el-option value="fantasy" style="font-family: fantasy;">fantasy</el-option>
											<!--中文字体字体-->
											<el-option value="SimSun" style="font-family: SimSun;">宋体</el-option>
											<el-option value="SimHei" style="font-family: SimHei;">黑体</el-option>
											<el-option value="Microsoft YaHei"
												style="font-family: 'Microsoft YaHei';">微软雅黑</el-option>
											<el-option value="FangSong" style="font-family: FangSong;">仿宋</el-option>
											<el-option value="KaiTi" style="font-family: KaiTi;">楷体</el-option>
											<el-option value="LiSu" style="font-family: LiSu;">隶书</el-option>
											<el-option value="YouYuan" style="font-family: YouYuan;">幼圆</el-option>
											<el-option value="STSong" style="font-family: STSong;">华文宋体</el-option>
											<el-option value="STHeiti" style="font-family: STHeiti;">华文黑体</el-option>
											<el-option value="STKaiti" style="font-family: STKaiti;">华文楷体</el-option>
											<el-option value="STFangsong"
												style="font-family: STFangsong;">华文仿宋</el-option>
											<el-option value="STXihei" style="font-family: STXihei;">华文细黑</el-option>
											<el-option value="STCaiyun" style="font-family: STCaiyun;">华文彩云</el-option>
											<el-option value="STHupo" style="font-family: STHupo;">华文琥珀</el-option>
											<el-option value="STXinwei" style="font-family: STXinwei;">华文新魏</el-option>
											<el-option value="STXingkai"
												style="font-family: STXingkai;">华文行楷</el-option>
											<el-option value="FZShuTi" style="font-family: FZShuTi;">方正舒体</el-option>
											<el-option value="FZYaoti" style="font-family: FZYaoti;">方正姚体</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="字体样式:">
										<el-select v-model="formData.fontStyle" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="normal" style="font-style: normal;">正常</el-option>
											<el-option value="italic" style="font-style: italic;">斜体</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="字体粗细:">
										<el-select v-model="formData.fontWeight" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="normal" style="font-weight: normal;">正常</el-option>
											<el-option value="bold" style="font-weight: bold;">加粗</el-option>
											<el-option value="bolder" style="font-weight: bolder;">更粗</el-option>
											<el-option value="lighter" style="font-weight: lighter;">更细</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="文本转换:">
										<el-select v-model="formData.textTransform" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="none">无</el-option>
											<el-option value="uppercase">大写</el-option>
											<el-option value="lowercase">小写</el-option>
											<el-option value="capitalize">首字母大写</el-option>
											<el-option value="full-width">全角</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="文本装饰:">
										<el-select v-model="formData.textDecoration" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="none">无</el-option>
											<el-option value="underline">下划线</el-option>
											<el-option value="overline">上划线</el-option>
											<el-option value="line-through">删除线</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="字体阴影:">
										<el-select v-model="formData.textShadow" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="1px 1px 2px pink"
												style="text-shadow: 1px 1px 2px pink;">阴影1</el-option>
											<el-option value="#FC0 1px 0 10px"
												style="text-shadow: #FC0 1px 0 10px;">阴影2</el-option>
											<el-option value="1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue"
												style="text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;">阴影3</el-option>
											<el-option value="2px 2px #777"
												style="text-shadow: 2px 2px #777;">阴影4</el-option>
											<el-option value="-1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee"
												style="text-shadow: -1px -1px #000,-2px -2px #333,1px 1px #fff,2px 2px #eee;">阴影5</el-option>
											<el-option
												value="1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF"
												style="text-shadow: 1px 1px #BAE6EF,2px 2px #BAE6EF,3px 3px #BAE6EF,4px 4px #BAE6EF,5px 5px #BAE6EF;">阴影6</el-option>
											<el-option value="5px 5px #666,7px 7px #eee"
												style="text-shadow: 5px 5px #666,7px 7px #eee;">阴影7</el-option>
											<el-option
												value="0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50"
												style="text-shadow: 0 0 5px #FFFF66,1px 1px 1px #fff,-1px -1px 1px #fff,0 0 10px #FFFF99,0 0 20px #B9EB50;">阴影8</el-option>

										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="文本对齐:">
										<el-select v-model="formData.textAlign" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="left">左对齐</el-option>
											<el-option value="center">居中</el-option>
											<el-option value="right">右对齐</el-option>
											<el-option value="justify">两端对齐</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="行高:">
										<el-select v-model="formData.lineHeight" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="1.0">1.0</el-option>
											<el-option value="1.5">1.5</el-option>
											<el-option value="2.0">2.0</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="字母间距:">
										<el-select v-model="formData.letterSpacing" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="0">0</el-option>
											<el-option value="1px">1px</el-option>
											<el-option value="2px">2px</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="单词间距:">
										<el-select v-model="formData.wordSpacing" @change="updatePreview">
											<el-option value="">请选择</el-option>
											<el-option value="0">0</el-option>
											<el-option value="1px">1px</el-option>
											<el-option value="2px">2px</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item><el-button type="success" native-type="submit"
									class="w-100">提交</el-button></el-form-item>
						</el-form>
						<div class="preview mt-3 p-3 border rounded" :style="previewStyle">
							Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345 Aa Bb Cc 上下 左右 12345
						</div>
					</div>
					<div v-if="currentContent === 'ai'">
						<!-- AI对话框 -->
						<div class="chat-container">
							<div class="messages" id="messages"></div>
							<div class="input-area">
								<input type="text" id="userInput" placeholder="输入您的消息...">
								<button @click="sendMessage()">发送</button>
							</div>
						</div>
					</div>
				</div>


			</div>
		</div>
	</div>
</template>
<script>
import {
	DecoupledEditor,
	// ClassicEditor,
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
import '../public/sidebar.css';
import { ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker, ElSubMenu, } from 'element-plus';
// import {getUserConfigFromBackend,saveData,getPageContent,getAndApplyUserStyles} from './components/utils';
import { setConfig } from './components/plugins'
export default {
	name: 'app',
	data() {
		return {
			isLayoutReady: false,
			config: null, // CKEditor needs the DOM tree before calculating the configuration.
			editor: DecoupledEditor,
			// editor: ClassicEditor,

			isSidebarOpen: false,// 侧边栏是否打开
			isNavbarOpen: false,// 侧边栏是否打开
			currentContent: '', // 当前侧边栏显示的表单
			formData: {
				fontFamily: '',
				color: '',
				fontSize: '',
				fontStyle: '',
				fontWeight: '',
				textTransform: '',
				textDecoration: '',
				textShadow: '',
				textAlign: '',
				lineHeight: '',
				letterSpacing: '',
				wordSpacing: ''
			},
			previewStyle: {},
			aiInput: '', // AI 输入的内容
			messages: [], // 聊天记录
		};
	},
	mounted() {
		this.config = setConfig();
		this.isLayoutReady = true;
	},
	methods: {
		onReady(editor) {
			Array.from(this.$refs.editorToolbarElement.children).forEach(child => child.remove());
			Array.from(this.$refs.editorMenuBarElement.children).forEach(child => child.remove());

			this.$refs.editorToolbarElement.appendChild(editor.ui.view.toolbar.element);
			this.$refs.editorMenuBarElement.appendChild(editor.ui.view.menuBarView.element);
			// 这里向后端获取要打开文件地内容
			
			const pageContent = '<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n    You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n    capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n    <li>\n        <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n        application.\n    </li>\n    <li>\n        <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n    </li>\n    <li>\n        <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n        write your plugin!\n    </li>\n</ol>\n<p>\n    Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n    as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n    <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n    <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n    <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n    <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n    <li>🧑‍💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n    See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n    license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n    will help as soon as possible!\n</p>\n';
			// 打开已有文本就将pageContent替换
			// TODO
			editor.setData(pageContent);
		},
		// sidebar
		// 打开/关闭侧边栏
		toggleSidebar() {
			this.isSidebarOpen = !this.isSidebarOpen;
			this.isNavbarOpen = this.isSidebarOpen;
		},
		// 展示表单
		showContent(formType) {
			this.currentContent = formType;
		},
		// 保存用户定义样式
		submitForm() {
			const selectedStyles = {};
			for (const key in this.formData) {
				if (this.formData[key]) {
					selectedStyles[key] = this.formData[key];
				}
			}

			const className = prompt("请输入类名：");
			if (className) {
				let cssClass = `.ck-content p.${className} {\n`;
				for (const key in selectedStyles) {
					const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
					cssClass += `  ${cssKey}: ${selectedStyles[key]};\n`;
				}
				cssClass += `}`;
				// TODO 保存样式到后端
				alert(cssClass);
			} else {
				alert("类名不能为空！");
			}
		},
		// 更新预览
		updatePreview() {
			this.previewStyle = {};
			for (const key in this.formData) {
				if (this.formData[key]) {
					this.previewStyle[key] = this.formData[key];
				}
			}
		},
		// AI生成样式
		displayMessage(text, sender) {
			const messagesDiv = document.getElementById('messages');

			// 移除 messages 中的按钮
			const previousButtonsMessage = messagesDiv.querySelectorAll('.preview-buttons');
			previousButtonsMessage.forEach(buttons => buttons.remove());

			const messageDiv = document.createElement('div');
			messageDiv.className = 'message';
			// 使用 pre 元素来格式化显示 text
			// 可以将css html代码内容新建一个pre set language 更好地展示输出
			const preElement = document.createElement('pre');
			preElement.textContent = text;
			messageDiv.appendChild(preElement);
			messagesDiv.appendChild(messageDiv);

			if (sender === 'ai') {
				// TODO 从返回文本中提取出css部分
				preElement.textContent = `文心一言：\n` + preElement.textContent;
				messageDiv.style.backgroundColor = '#bdc3c7';

				// preview区域
				const previewWrapper = document.createElement('div');
				previewWrapper.style.border = '1px solid #ccc';
				previewWrapper.style.display = 'flow-root';
				// 添加一个标识 'preview' 的元素
				const previewLabel = document.createElement('div');
				previewLabel.textContent = 'preview';
				previewWrapper.appendChild(previewLabel);
				// 应用生成的样式到预览内容
				const previewStyle = document.createElement('style');
				// 对返回文本进行处理
				// 提取其中css代码，以css开头,但不需要’css‘,最后一个}结尾
				const cssRegex = /css([\s\S]*)\}/;
				const cssMatch = cssRegex.exec(text);
				if (cssMatch) {
					previewStyle.textContent = cssMatch[0].replace('css', '');
				}else{
					previewStyle.textContent = text;
				}
				previewStyle.textContent = previewStyle.textContent.replace(/\.ck-content/g, '');
				document.head.appendChild(previewStyle);
				
				// 预览的内容
				let previewElement;
				// 提取element tag 和 class name
				const styleRegex = /\.ck-content\s+([a-z]+)\.([a-z-]+)\s*\{/g;
				let match;
				const classNames = [];
				while ((match = styleRegex.exec(text)) !== null) {
					if (!previewElement) {
						previewElement = document.createElement(match[1]);
						previewElement.textContent = 'AaBbCcDdEeFf';
						previewWrapper.appendChild(previewElement);
					}
					classNames.push(match[2]);
				}
				if (previewElement) {
					previewElement.className = classNames.join(' ');
				}
				messagesDiv.appendChild(previewWrapper);

				// 创建按钮容器
				const buttonsMessageDiv = document.createElement('div');
				buttonsMessageDiv.className = 'preview-buttons';
				buttonsMessageDiv.style.display = 'flex';
				buttonsMessageDiv.style.justifyContent = 'flex-end';
				buttonsMessageDiv.style.marginTop = '10px';
				// 创建 save 按钮
				const saveButton = document.createElement('el-button');
				saveButton.innerHTML = '<svg t="1731509644125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6346" width="20" height="20"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m0-938.666667C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m-3.413333 611.541334a34.944 34.944 0 0 1-9.386667 16.682666 38.058667 38.058667 0 0 1-30.72 11.050667 38.954667 38.954667 0 0 1-40.106667-27.946667L308.053333 576.426667a38.4 38.4 0 0 1 54.186667-54.229334l93.013333 93.184 190.293334-337.365333a42.666667 42.666667 0 0 1 58.88-16.426667c20.608 12.714667 27.392 39.466667 15.36 60.458667l-211.2 374.826667z" fill="#000000" p-id="6347"></path></svg>';
				saveButton.style.marginLeft = '10px';
				saveButton.style.width = '40px';
				saveButton.style.height = '40px';
				saveButton.onclick = () => {
					// save 
					// TODO 将生成的样式保存到后端
					// 确认样式的名称 这是用户选择使用style时看到的
					// styleDefinition:[name: 'styleName',element: 'element',classes: [className]]
					const styleName = prompt("请输入样式名称：");
					// 构造styleDefiniton发送到后端
					const styleDefinition = {
						name: styleName,
						element: previewElement.tagName,
						classes: classNames
					};
					console.log(styleDefinition);
				};
				// 创建 clear 按钮
				const clearButton = document.createElement('el-button');
				clearButton.innerHTML = '<svg t="1731509926355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8154" width="20" height="20"><path d="M1011.43552 981.92384l-68.4032-394.40384h23.10144c18.5856 0 33.54624-14.97088 33.54624-33.55648V306.16576c0-18.5856-14.97088-33.55648-33.54624-33.55648H648.6528V37.71392c0-18.5856-14.97088-33.55648-33.55648-33.55648H408.59648c-18.5856 0-33.55648 14.97088-33.55648 33.55648v234.88512H57.5488c-18.5856 0-33.54624 14.97088-33.54624 33.55648v247.79776c0 18.5856 14.97088 33.55648 33.54624 33.55648h23.10144L12.24704 981.9136c-0.38912 1.9456-0.512 3.87072-0.512 5.6832 0 18.5856 14.97088 33.54624 33.55648 33.54624h933.10976c1.93536 0 3.88096-0.12288 5.6832-0.512 18.31936-3.08224 30.57664-20.51072 27.35104-38.7072zM114.33984 362.94656h351.03744V94.50496h92.928v268.4416h351.03744v134.22592H114.33984V362.94656zM718.336 930.816V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H387.9424V729.48736c0-5.6832-4.64896-10.33216-10.32192-10.33216h-61.952c-5.67296 0-10.32192 4.64896-10.32192 10.33216V930.816H112.78336l58.20416-335.55456h681.5744L910.76608 930.816H718.336z m0 0" fill="#2C2C2C" p-id="8155"></path></svg>';
				clearButton.style.marginLeft = '10px';
				clearButton.style.width = '40px';
				clearButton.style.height = '40px';
				clearButton.onclick = () => {
					// clear 清楚当前所有的message和按钮
					const messagesDiv = document.getElementById('messages');
					while (messagesDiv.firstChild) {
						messagesDiv.removeChild(messagesDiv.firstChild);
					}
					// 清除添加的style
					document.head.removeChild(previewStyle);
				};
				// 显示按钮
				buttonsMessageDiv.appendChild(saveButton);
				buttonsMessageDiv.appendChild(clearButton);
				messagesDiv.appendChild(buttonsMessageDiv);
			}
			// messagesDiv.scrollTop = messagesDiv.scrollHeight;
		},
		sendMessage() {
			const userInput = document.getElementById('userInput');
			const messageText = userInput.value;
			if (messageText.trim() === '') return;

			// Display user's message
			this.displayMessage(messageText, 'user');

			// 向后端调用API并接受response
			setTimeout(() => {
				// Simulate AI response
				let formatedResponse = `css
.ck-content p.marquee {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.5em;
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: marquee 10s linear infinite;
    position: relative;
}
 
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
 
.ck-content p.marquee::selection {
    background: rgba(255, 255, 255, 0.3); /* Ensure text is readable when selected */
}
 
/* Container to make sure the marquee stays within bounds */
.ck-content .marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%; /* Adjust as needed */
}
请注意，由于使用了 inline-block，文本框的长和宽会根据内容自动调整。同时，由于动画使用了 translateX 而不是 text-indent，因此可以正确地处理不同长度的文本。另外，我添加了一个 .marquee-container 类，用于确保滚动文本保持在指定区域内（例如，不超出其父容器的边界）。您需要将 p.marquee 元素放置在一个具有 .marquee-container 类的元素内，以确保动画效果正确。

示例 HTML 结构：

html
<div class="ck-content">
    <div class="marquee-container">
        <p class="marquee">这是一个带有流水灯效果的文本框，它的宽度和高度会根据内容自动调整。</p>
    </div>
</div>
`;
				this.displayMessage(formatedResponse, 'ai');
			}, 1000);

			userInput.value = '';
		},

	},
	components: {
		// 导入组件
		ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElMenu, ElMenuItem, ElColorPicker, ElSubMenu,
	}
};
</script>
