Skip to content

R
risk-monitor
提交 210cd251 authored 作者: DompPrime's avatar DompPrime
浏览文件
操作

修改样式

上级 5981ec64
隐藏空白字符变更
内嵌 并排
正在显示 包含 744 行增加 和 801 行删除
src/views/writtingAsstaint/index.vue
浏览文件 @ 210cd251
<template> <template>
<div class="writting-wrapper"> <div class="writting-wrapper">
<div class="writting-header"> <div class="writting-header">
<div class="tab-box"> <div class="tab-box">
<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in tabList" :key="index"> <div class="tab"
{{ item.name }} :class="{ tabActive: item.active }"
</div> v-for="(item, index) in tabList"
</div> :key="index">
<div class="edit-box"></div> {{ item.name }}
<div class="btn-box"> </div>
<div class="btn" @click="exportContent"> </div>
<div class="icon"> <div class="edit-box"></div>
<img src="./assets/images/export-icon.png" alt="" /> <div class="btn-box">
</div> <div class="btn"
<div class="text">{{ "导出" }}</div> @click="exportContent">
</div> <div class="icon">
<div class="btn" @click="handleSwitchMode"> <img src="./assets/images/export-icon.png"
<div class="icon"> alt="" />
<img v-if="isEditMode" src="./assets/images/preview-icon.png" alt="" /> </div>
<img v-else src="./assets/images/edit.png" alt="" /> <div class="text">{{ "导出" }}</div>
</div> </div>
<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div> <div class="btn"
</div> @click="handleSwitchMode">
<div class="btn btn1"> <div class="icon">
<div class="icon"> <img v-if="isEditMode"
<img src="./assets/images/save-icon.png" alt="" /> src="./assets/images/preview-icon.png"
</div> alt="" />
<div class="text text1">{{ "保存" }}</div> <img v-else
</div> src="./assets/images/edit.png"
</div> alt="" />
</div> </div>
<div class="writting-main"> <div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
<div class="sider"> </div>
<div class="sider-box" v-if="false"> <div class="btn btn1">
<div class="header">报文主题</div> <div class="icon">
<div class="title-box"> <img src="./assets/images/save-icon.png"
<div class="title">主题名称</div> alt="" />
<el-input :disabled="true" style="width: 476px; height: 32px" class="title-input" </div>
placeholder="输入主题名称，如：大而美法案" v-model="writtingTitle" /> <div class="text text1">{{ "保存" }}</div>
</div> </div>
<div class="description-box"> </div>
<div class="title">主题描述</div> </div>
<el-input :disabled="true" class="description-input" type="textarea" style="width: 476px" <div class="writting-main">
:rows="8" placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响" v-model="descText" /> <div class="left-box">
</div> <div class="process-box"
</div> v-if="isShowProcess">
<div class="sider-box"> <div class="back"
<div class="header">报文模板</div> @click="handleBack">{{ "< 返回" }} </div>
<div class="template-box"> <div class="process-main-box">
<div class="template" :class="{ tempActive: tempActiveIndex === index }" <div class="steps-box">
v-for="(temp, index) in tempList" :key="index" @click="handleClickTemp(temp, index)"> <div class="steps-header">
<div class="header"> <div class="icon">
<div class="title">{{ temp.title }}</div> <img src="./assets/images/right-arrow.png"
<div class="icon"> alt="" />
<img src="./assets/images/template-icon.png" alt="" /> </div>
</div> <div class="text">{{ "执行步骤：" }}</div>
</div> </div>
<div class="content">{{ temp.desc }}</div> <div class="steps-content"
<div class="active-icon" v-if="tempActiveIndex === index"> ref="scrollProcessContainer"
<img src="./assets/images/active-icon.png" alt="" /> v-html="renderedProcess"></div>
</div> </div>
<div class="selected-icon" v-if="tempActiveIndex === index"> <div class="tool-box">
<img src="./assets/images/selected-icon.png" alt="" /> <div class="tool-header">{{ "工具调用" }}</div>
</div> <div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="sider-box"> <div class="sider"
<div class="header">加载本地文件</div> v-else>
<el-upload action="" :auto-upload="false" accept=".pdf" limit="1" :on-exceed="handleExceed" <div class="sider-box"
ref="upload" :on-change="handleFileChange"> v-if="false">
<el-button class="sider-upload-btn" type="primary"> <div class="header">报文主题</div>
<el-icon class="sider-upload-btn-text"> <div class="title-box">
<Upload /> <div class="title">主题名称</div>
</el-icon> <el-input :disabled="true"
<span class="sider-upload-btn-text">上传文件</span> style="width: 476px; height: 32px"
</el-button> class="title-input"
<template #tip> placeholder="输入主题名称，如：大而美法案"
<div class="sider-upload-btn-tip"> v-model="writtingTitle" />
支持扩展名：.doc .docx .pdf </div>
</div> <div class="description-box">
</template> <div class="title">主题描述</div>
</el-upload> <el-input :disabled="true"
</div> class="description-input"
type="textarea"
<div class="submit-btn" @click="getStreamChat"> style="width: 476px"
<div class="tips"> :rows="8"
<div class="tips-icon"> placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
<img src="./assets/images/tips-icon.png" alt="" /> v-model="descText" />
</div> </div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div> </div>
</div> <div class="sider-box">
<div class="submit-icon"> <div class="header">报文模板</div>
<img src="./assets/images/ai.png" alt="" /> <div class="template-box">
</div> <div class="template"
<div class="submit-text">生成报文</div> :class="{ tempActive: tempActiveIndex === index }"
</div> v-for="(temp, index) in tempList"
</div> :key="index"
<div class="process-box" v-if="isShowProcess"> @click="handleClickTemp(temp, index)">
<div class="back" @click="handleBack"> <div class="header">
{{ "< 返回" }} </div> <div class="title">{{ temp.title }}</div>
<div class="process-main-box"> <div class="icon">
<!-- <div class="analysis-box"> <img src="./assets/images/template-icon.png"
<div class="analysis-header"> alt="" />
<div class="icon"> </div>
<img src="./assets/images/right-arrow.png" alt="" /> </div>
</div> <div class="content">{{ temp.desc }}</div>
<div class="text">{{ "任务分析：" }}</div> <div class="active-icon"
</div> v-if="tempActiveIndex === index">
<div class="analysis-content"> <img src="./assets/images/active-icon.png"
{{ alt="" />
"用户需求属于态势要图制图任务，需要围绕“伊以冲突”主题生成关键词、搜索相关新闻、抽取并聚类事件、获取地理位置信息，最终完成事件和地点的可视化标绘" </div>
}} <div class="selected-icon"
</div> v-if="tempActiveIndex === index">
</div> --> <img src="./assets/images/selected-icon.png"
<div class="steps-box"> alt="" />
<div class="steps-header"> </div>
<div class="icon"> </div>
<img src="./assets/images/right-arrow.png" alt="" /> </div>
</div> </div>
<div class="text">{{ "执行步骤：" }}</div> <div class="sider-box">
</div> <div class="header">加载本地文件</div>
<div class="steps-content" ref="scrollProcessContainer" v-html="renderedProcess"></div> <el-upload action=""
</div> :auto-upload="false"
<!-- <div class="doing-box"> accept=".pdf"
{{ "正在执行步骤1/7:根据制图主题生成关键词" }} limit="1"
</div> --> :on-exceed="handleExceed"
<div class="tool-box"> ref="upload"
<div class="tool-header">{{ "工具调用" }}</div> :on-change="handleFileChange">
<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div> <el-button class="sider-upload-btn"
</div> type="primary">
</div> <el-icon class="sider-upload-btn-text">
<div class="process-tips-box"> <Upload />
<div class="tips-icon"> </el-icon>
<img src="./assets/images/tips-icon.png" alt="" /> <span class="sider-upload-btn-text">上传文件</span>
</div> </el-button>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div> <template #tip>
</div> <div class="sider-upload-btn-tip">
<div class="process-footer-box"> 支持扩展名：.doc .docx .pdf
<div class="footer-left"> </div>
{{ isGenerating ? "报文生成中..." : "报文已生成" }} </template>
</div> </el-upload>
<div class="footer-right"> </div>
<div class="icon"></div> </div>
<div class="text" @click="handleGenerate">{{ "停止" }}</div> <div class="submit-area">
</div> <div class="tips">
</div> <div class="tips-icon">
</div> <img src="./assets/images/tips-icon.png"
<div class="main-box"> alt="" />
<div v-if="isEditMode" class="edit-panel"> </div>
<v-md-editor v-model="reportContent" height="calc(100% - 40px)" :disabled-menus="[]" <div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
@upload-image="handleUploadImage" @save="handleSave" </div>
left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save" <div class="process-footer-box"
right-toolbar="preview toc sync-scroll fullscreen" /> v-if="isShowProcess">
</div> <div class="footer-left">
<div v-else class="content-box" ref="scrollContainer" v-html="renderedContent"></div> {{ isGenerating ? "报文生成中..." : "报文已生成" }}
</div> </div>
</div> <div class="footer-right">
</div> <div class="icon"></div>
<div class="text"
@click="handleGenerate">{{ "停止" }}</div>
</div>
</div>
<div class="submit-btn"
@click="getStreamChat"
v-else>
<div class="submit-icon">
<img src="./assets/images/ai.png"
alt="" />
</div>
<div class="submit-text">生成报文</div>
</div>
</div>
</div>
<div class="main-box">
<div v-if="isEditMode"
class="edit-panel">
<v-md-editor v-model="reportContent"
height="calc(100% - 40px)"
:disabled-menus="[]"
@upload-image="handleUploadImage"
@save="handleSave"
left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save"
right-toolbar="preview toc sync-scroll fullscreen" />
</div>
<div v-else
class="content-box"
ref="scrollContainer"
v-html="renderedContent"></div>
</div>
</div>
</div>
</template> </template>
<script setup> <script setup>
...@@ -175,7 +208,7 @@ import Prism from "prismjs"; ...@@ -175,7 +208,7 @@ import Prism from "prismjs";
import { ElButton, ElIcon, ElInput, ElMessage, ElUpload, genFileId } from "element-plus"; import { ElButton, ElIcon, ElInput, ElMessage, ElUpload, genFileId } from "element-plus";
VMdEditor.use(vuepressTheme, { VMdEditor.use(vuepressTheme, {
Prism Prism
}); });
const isGenerating = ref(false); const isGenerating = ref(false);
...@@ -185,84 +218,53 @@ const upload = ref() ...@@ -185,84 +218,53 @@ const upload = ref()
//新上传文件替换 //新上传文件替换
const handleExceed = (files) => { const handleExceed = (files) => {
if (upload.value) { if (upload.value) {
upload.value.clearFiles() upload.value.clearFiles()
const file = files[0] const file = files[0]
file.uid = genFileId() file.uid = genFileId()
upload.value.handleStart(file) upload.value.handleStart(file)
} }
} }
const handleFileChange = (file, files) => { const handleFileChange = (file, files) => {
// 只保留最后选中的1个文件（覆盖原有文件） // 只保留最后选中的1个文件（覆盖原有文件）
if (files.length > 1) { if (files.length > 1) {
uploadFileList.value = [file]; uploadFileList.value = [file];
} else { } else {
uploadFileList.value = files; uploadFileList.value = files;
} }
}; };
const handleBack = () => { const handleBack = () => {
isShowProcess.value = false; isShowProcess.value = false;
}; };
const steps = [
{
id: 1,
content: "111111111111111111111111111"
},
{
id: 2,
content: "111111111111111111111111111"
},
{
id: 3,
content: "111111111111111111111111111222222222222222222222222222222222233333333333333333333333333"
},
{
id: 4,
content: "111111111111111111111111111"
},
{
id: 5,
content: "111111111111111111111111111"
},
{
id: 6,
content: "111111111111111111111111111"
},
{
id: 7,
content: "111111111111111111111111111"
}
];
const isEditMode = ref(false); const isEditMode = ref(false);
const handleSwitchMode = () => { const handleSwitchMode = () => {
isEditMode.value = !isEditMode.value; isEditMode.value = !isEditMode.value;
if (!isEditMode.value) { if (!isEditMode.value) {
console.log(reportContent.value); console.log(reportContent.value);
updateContent(reportContent.value, scrollContainer.value); updateContent(reportContent.value, scrollContainer.value);
} }
}; };
// 保存处理函数 // 保存处理函数
const handleSave = (text, html) => { const handleSave = (text, html) => {
console.log("保存内容:", { console.log("保存内容:", {
markdown: text, markdown: text,
html: html html: html
}); });
reportContent.value = text; reportContent.value = text;
// 实际保存逻辑 // 实际保存逻辑
// saveToLocalStorage(text); // saveToLocalStorage(text);
ElMessage.success("保存成功！"); ElMessage.success("保存成功！");
}; };
// 保存到本地存储 // 保存到本地存储
const saveToLocalStorage = text => { const saveToLocalStorage = text => {
localStorage.setItem("markdown-content", text); localStorage.setItem("markdown-content", text);
}; };
const abortController = ref(null); const abortController = ref(null);
...@@ -281,229 +283,229 @@ const curTempTitle = ref("法案"); ...@@ -281,229 +283,229 @@ const curTempTitle = ref("法案");
// 停止生成 // 停止生成
const handleGenerate = () => { const handleGenerate = () => {
abortController.value.abort(); abortController.value.abort();
}; };
// 当前调用工具 // 当前调用工具
const curAgentTool = ref("报告整体优化工具"); const curAgentTool = ref("报告整体优化工具");
const getStreamChat = async (search, inputValue) => { const getStreamChat = async (search, inputValue) => {
if (uploadFileList.value.length > 0) { if (uploadFileList.value.length > 0) {
const rawFile = uploadFileList.value[0].raw; const rawFile = uploadFileList.value[0].raw;
if (!rawFile) { if (!rawFile) {
ElMessage.error('文件解析失败，请重新选择'); ElMessage.error('文件解析失败，请重新选择');
return; return;
} }
callSseWithPdf(rawFile) callSseWithPdf(rawFile)
} else { } else {
const params = { const params = {
query: writtingTitle.value, // "输出一篇报文" query: writtingTitle.value, // "输出一篇报文"
desc: descText.value, desc: descText.value,
topic: curTempTitle.value // 政令、智库、法案、清单 topic: curTempTitle.value // 政令、智库、法案、清单
}; };
callSseWithAi(params) callSseWithAi(params)
} }
}; };
const callSseWithPdf = async (selectedFile) => { const callSseWithPdf = async (selectedFile) => {
abortController.value = new AbortController(); abortController.value = new AbortController();
try { try {
// 构造FormData（和后端字段名保持一致） // 构造FormData（和后端字段名保持一致）
const formData = new FormData(); const formData = new FormData();
formData.append('pdf', selectedFile); formData.append('pdf', selectedFile);
// 调用fetchEventSource（核心：支持POST+FormData+SSE） // 调用fetchEventSource（核心：支持POST+FormData+SSE）
await fetchEventSource('/pdfSse/api/v1/order/pdf/extract/report/sse', { await fetchEventSource('/pdfSse/api/v1/order/pdf/extract/report/sse', {
method: 'POST', // 关键：设置POST方法 method: 'POST', // 关键：设置POST方法
body: formData, // 关键：传递PDF文件的FormData body: formData, // 关键：传递PDF文件的FormData
signal: abortController.value.signal, // 中断信号 signal: abortController.value.signal, // 中断信号
headers: { headers: {
// 禁用默认的SSE协议头（避免和文件上传冲突） // 禁用默认的SSE协议头（避免和文件上传冲突）
'Accept': 'text/event-stream', 'Accept': 'text/event-stream',
'Cache-Control': 'no-cache', 'Cache-Control': 'no-cache',
'Connection': 'keep-alive' 'Connection': 'keep-alive'
}, },
// 禁用自动重连（可选，根据后端配置） // 禁用自动重连（可选，根据后端配置）
retry: 0, retry: 0,
// 核心：原生onmessage回调（无需手动分割/解析） // 核心：原生onmessage回调（无需手动分割/解析）
async onopen(res) { async onopen (res) {
console.log("流式回答开始", res); console.log("流式回答开始", res);
isGenerating.value = true; isGenerating.value = true;
isShowProcess.value = true; isShowProcess.value = true;
}, },
async onmessage(res) { async onmessage (res) {
const { data, event } = res const { data, event } = res
const jsonData = JSON.parse(data) const jsonData = JSON.parse(data)
switch (event) { switch (event) {
case "progress": case "progress":
processContent.value += `${getFormattedTime()}:${jsonData.message}\r\n`; processContent.value += `${getFormattedTime()}:${jsonData.message}\r\n`;
updateProcess(processContent.value, scrollProcessContainer.value); updateProcess(processContent.value, scrollProcessContainer.value);
break; break;
case "result": case "result":
callSseWithAi({ callSseWithAi({
query: writtingTitle.value, // "输出一篇报文" query: writtingTitle.value, // "输出一篇报文"
desc: descText.value, desc: descText.value,
topic: "政令", topic: "政令",
result: data // 政令、智库、法案、清单 result: data // 政令、智库、法案、清单
}) })
default: default:
break; break;
} }
}, },
onerror(error) { onerror (error) {
ElMessage({ ElMessage({
message: "写报生成报错!", message: "写报生成报错!",
type: "warning" type: "warning"
}); });
abortController.value.abort(); abortController.value.abort();
abortController.value = new AbortController(); abortController.value = new AbortController();
throw new Error(error); throw new Error(error);
} }
}); });
} catch (error) { } catch (error) {
if (error.name !== 'AbortError') { if (error.name !== 'AbortError') {
ElMessage.error(`请求失败：${error.message}`); ElMessage.error(`请求失败：${error.message}`);
isLoading.value = false; isLoading.value = false;
} }
} }
}; };
const callSseWithAi = async (params) => { const callSseWithAi = async (params) => {
abortController.value = new AbortController(); abortController.value = new AbortController();
fetchEventSource("/sseWrite/api/v1/workflow/invoke", { fetchEventSource("/sseWrite/api/v1/workflow/invoke", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json" "Content-Type": "application/json"
}, },
body: JSON.stringify(params), body: JSON.stringify(params),
signal: abortController.value.signal, signal: abortController.value.signal,
openWhenHidden: true, openWhenHidden: true,
async onopen(res) { async onopen (res) {
console.log("流式回答开始", res); console.log("流式回答开始", res);
isGenerating.value = true; isGenerating.value = true;
isShowProcess.value = true; isShowProcess.value = true;
}, },
async onmessage(res) { async onmessage (res) {
let msgData = JSON.parse(res.data); let msgData = JSON.parse(res.data);
console.log("resss", msgData.data); console.log("resss", msgData.data);
console.log("msgData", msgData); console.log("msgData", msgData);
let str = msgData.data; let str = msgData.data;
if (msgData.event_type === "stream_agent_out") { if (msgData.event_type === "stream_agent_out") {
if (str !== "[DONE]") { if (str !== "[DONE]") {
reportContent.value += str; reportContent.value += str;
if (reportContent.value.includes("./out/img")) { if (reportContent.value.includes("./out/img")) {
reportContent.value = reportContent.value.replaceAll("./out/img", "http://8.140.26.4:10017/out/img"); reportContent.value = reportContent.value.replaceAll("./out/img", "http://8.140.26.4:10017/out/img");
// console.log(111, reportContent.value); // console.log(111, reportContent.value);
} }
updateContent(reportContent.value, scrollContainer.value); updateContent(reportContent.value, scrollContainer.value);
} else { } else {
isGenerating.value = false; isGenerating.value = false;
ElMessage.success("报文生成结束"); ElMessage.success("报文生成结束");
abortController.value.abort(); abortController.value.abort();
abortController.value = new AbortController(); abortController.value = new AbortController();
} }
} else if (msgData.event_type === "workflow_complete") { } else if (msgData.event_type === "workflow_complete") {
ElMessage.success("报文生成结束"); ElMessage.success("报文生成结束");
isGenerating.value = false; isGenerating.value = false;
abortController.value.abort(); abortController.value.abort();
abortController.value = new AbortController(); abortController.value = new AbortController();
} else if (msgData.event_type.toLowerCase().includes("error")) { } else if (msgData.event_type.toLowerCase().includes("error")) {
} else { } else {
processContent.value += str; processContent.value += str;
curAgentTool.value = msgData.tool; curAgentTool.value = msgData.tool;
updateProcess(processContent.value, scrollProcessContainer.value); updateProcess(processContent.value, scrollProcessContainer.value);
} }
}, },
onerror(error) { onerror (error) {
ElMessage({ ElMessage({
message: "写报生成报错!", message: "写报生成报错!",
type: "warning" type: "warning"
}); });
abortController.value.abort(); abortController.value.abort();
abortController.value = new AbortController(); abortController.value = new AbortController();
throw new Error(error); throw new Error(error);
} }
}).catch(error => { }).catch(error => {
ElMessage({ ElMessage({
message: "写报生成报错!", message: "写报生成报错!",
type: "warning" type: "warning"
}); });
abortController.value.abort(); abortController.value.abort();
abortController.value = new AbortController(); abortController.value = new AbortController();
throw new Error(error); throw new Error(error);
}); });
} }
const getFormattedTime = () => { const getFormattedTime = () => {
const now = new Date(); const now = new Date();
// 补零函数：确保单个数字补为两位（如 1 → 01，9 → 09） // 补零函数：确保单个数字补为两位（如 1 → 01，9 → 09）
const pad = n => n.toString().padStart(2, '0'); const pad = n => n.toString().padStart(2, '0');
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`; return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
}; };
const writtingTitle = ref(""); const writtingTitle = ref("");
const descText = ref(""); const descText = ref("");
const tabList = ref([ const tabList = ref([
{ {
name: "写报", name: "写报",
active: true active: true
}, },
{ {
name: "收藏", name: "收藏",
active: false active: false
}, },
{ {
name: "问答", name: "问答",
active: false active: false
} }
]); ]);
const tempList = ref([ const tempList = ref([
{ {
title: "法案1", title: "法案1",
desc: "基于法案内容生成各维度的综合分析报告" desc: "基于法案内容生成各维度的综合分析报告"
}, },
{ {
title: "智库", title: "智库",
desc: "基于智库内容生成各维度的综合分析报告" desc: "基于智库内容生成各维度的综合分析报告"
}, },
{ {
title: "政令", title: "政令",
desc: "基于政令内容生成各维度的综合分析报告" desc: "基于政令内容生成各维度的综合分析报告"
}, },
{ {
title: "清单", title: "清单",
desc: "基于清单内容生成各维度的综合分析报告" desc: "基于清单内容生成各维度的综合分析报告"
} }
]); ]);
const tempActiveIndex = ref(0); const tempActiveIndex = ref(0);
const handleClickTemp = (item, index) => { const handleClickTemp = (item, index) => {
tempActiveIndex.value = index; tempActiveIndex.value = index;
curTempTitle.value = item.title; curTempTitle.value = item.title;
}; };
// 导出 // 导出
const exportContent = () => { const exportContent = () => {
const blob = new Blob([reportContent.value], { type: "text/markdown" }); const blob = new Blob([reportContent.value], { type: "text/markdown" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement("a"); const a = document.createElement("a");
a.href = url; a.href = url;
a.download = `markdown-${new Date().getTime()}.md`; a.download = `markdown-${new Date().getTime()}.md`;
a.click(); a.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
onMounted(() => { }); onMounted(() => { });
onUnmounted(() => { onUnmounted(() => {
if (abortController.value) { if (abortController.value) {
abortController.value.abort(); abortController.value.abort();
} }
}); });
</script> </script>
...@@ -604,458 +606,336 @@ onUnmounted(() => { ...@@ -604,458 +606,336 @@ onUnmounted(() => {
height: calc(100% - 60px); height: calc(100% - 60px);
position: relative; position: relative;
.process-box { .left-box {
position: absolute; display: flex;
left: 0; flex-direction: column;
top: 0;
width: 520px; width: 520px;
height: 100%; padding: 21px 21px 29px 22px;
z-index: 9999; box-sizing: border-box;
background: #fff; border-right: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
.back { background: rgba(255, 255, 255, 1);
margin-top: 21px;
height: 24px;
line-height: 24px;
margin-left: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.process-main-box { .process-box {
margin-top: 20px; display: flex;
margin-left: 22px; flex-direction: column;
width: 476px; gap: 20px;
height: 900px;
// background: orange; .back {
.analysis-box { height: 24px;
.analysis-header { line-height: 24px;
display: flex; color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
.icon { .process-main-box {
margin-top: 5px; width: 476px;
width: 20px;
height: 20px; .analysis-box {
.analysis-header {
display: flex;
.icon {
margin-top: 5px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
img { .text {
width: 100%; height: 30px;
height: 100%; line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
} }
} }
.text { .analysis-content {
height: 30px; height: 90px;
line-height: 30px; line-height: 30px;
color: #555;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
color: #333; font-size: 16px;
font-size: 20px; font-weight: 400;
font-weight: 700; text-indent: 32px;
margin-left: 5px;
} }
} }
.analysis-content { .steps-box {
height: 90px; .steps-header {
line-height: 30px; display: flex;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-indent: 32px;
}
}
.steps-box {
margin-top: 20px;
.steps-header { .icon {
display: flex; margin-top: 5px;
width: 20px;
height: 20px;
.icon { img {
margin-top: 5px; width: 100%;
width: 20px; height: 100%;
height: 20px; }
}
img { .text {
width: 100%; height: 30px;
height: 100%; line-height: 30px;
font-family: Microsoft YaHei;
color: #333;
font-size: 20px;
font-weight: 700;
margin-left: 5px;
} }
} }
.text { .steps-content {
height: 30px; width: 100%;
line-height: 30px; min-height: 20px;
font-family: Microsoft YaHei; max-height: 480px;
color: #333; overflow-x: hidden;
font-size: 20px; overflow-y: auto;
font-weight: 700;
margin-left: 5px;
} }
} }
.steps-content { .doing-box {
height: 560px; height: 40px;
width: 100%; line-height: 40px;
overflow-x: hidden; color: #555;
overflow-y: auto;
// .steps {
// display: flex;
// width: 410px;
// margin-left: 40px;
// color: #555;
// font-family: Microsoft YaHei;
// line-height: 35px;
// .steps-id {
// width: 20px;
// font-size: 18px;
// font-weight: 700;
// }
// .steps-content {
// font-size: 16px;
// font-weight: 400;
// width: 430px;
// word-wrap: break-word;
// }
// }
}
}
.doing-box {
height: 40px;
line-height: 40px;
color: #555;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
margin-left: 20px;
}
.tool-box {
width: 440px;
height: 160px;
margin: 10px auto;
background: #f6f9fe;
border-radius: 10px;
.tool-header {
height: 30px;
line-height: 30px;
margin-left: 20px;
color: var(--color-main-active);
}
.tool-main {
height: 110px;
width: 400px;
margin: 0 auto;
background: #fff;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 40px; margin-left: 20px;
} }
}
}
.process-tips-box { .tool-box {
position: absolute; width: 440px;
left: 22px; height: 160px;
bottom: 81px; margin: 10px auto;
height: 22px; background: #f6f9fe;
display: flex; border-radius: 10px;
.tips-icon { .tool-header {
width: 14px; height: 30px;
height: 16px; line-height: 30px;
margin-top: 3px; margin-left: 20px;
color: var(--color-main-active);
}
img { .tool-main {
width: 100%; height: 110px;
height: 100%; width: 400px;
margin: 0 auto;
background: #fff;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 40px;
}
} }
} }
.tips-text {
margin-left: 8px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
} }
.process-footer-box { .sider {
height: 36px; box-sizing: border-box;
display: flex; display: flex;
position: absolute; flex-direction: column;
left: 22px; gap: 23px;
bottom: 29px;
.footer-left {
width: 348px;
height: 36px;
border-radius: 4px;
background: rgba(234, 236, 238, 1);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 36px;
}
.footer-right {
margin-left: 8px;
display: flex;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--color-main-active);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-main-active);
}
.text { .sider-box {
color: var(--color-main-active); .header {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 700;
line-height: 24px; line-height: 24px;
} }
}
}
}
.sider { .template-box {
width: 520px; margin-top: 19px;
box-sizing: border-box; height: 260px;
border-right: 1px solid rgba(234, 236, 238, 1); display: flex;
border-top: 1px solid rgba(234, 236, 238, 1); flex-wrap: wrap;
background: rgba(255, 255, 255, 1); gap: 16px;
position: relative;
padding: 21px 21px; .template {
display: flex; width: 230px;
flex-direction: column; height: 120px;
gap: 23px; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
.sider-box { position: relative;
.header { cursor: pointer;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; .active-icon {
font-size: 16px; width: 24px;
font-weight: 700; height: 24px;
line-height: 24px; position: absolute;
} top: 0;
right: 0;
.template-box { z-index: 99;
margin-top: 19px;
height: 260px;
display: flex;
flex-wrap: wrap;
gap: 16px;
.template {
width: 230px;
height: 120px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
position: relative;
cursor: pointer;
.active-icon { img {
width: 24px; width: 100%;
height: 24px; height: 100%;
position: absolute; }
top: 0;
right: 0;
z-index: 99;
img {
width: 100%;
height: 100%;
} }
}
.selected-icon { .selected-icon {
width: 8px;
height: 6px;
position: absolute;
top: -4px;
right: 3px;
z-index: 100;
img {
width: 8px; width: 8px;
height: 6px; height: 6px;
position: absolute;
top: -4px;
right: 3px;
z-index: 100;
img {
width: 8px;
height: 6px;
}
} }
}
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 50px; height: 50px;
.title {
height: 24px;
// color: rgba(59, 65, 75, 1);
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-left: 15px;
margin-top: 16px;
}
.title { .icon {
height: 24px; margin-top: 15px;
// color: rgba(59, 65, 75, 1); margin-right: 16px;
color: #333; width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
img {
width: 17px;
height: 14px;
margin-top: 8px;
margin-left: 7px;
}
}
}
.content {
margin: 0 auto;
width: 200px;
height: 48px;
margin-top: 10px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 400;
line-height: 24px; line-height: 24px;
margin-left: 15px;
margin-top: 16px;
} }
}
.icon { .tempActive {
margin-top: 15px; border: 1px solid rgba(5, 95, 194, 1);
margin-right: 16px; background: rgba(246, 250, 255, 1);
width: 30px;
height: 30px;
border-radius: 15px;
background: rgba(231, 243, 255, 1);
img {
width: 17px;
height: 14px;
margin-top: 8px;
margin-left: 7px;
}
}
} }
}
.content { .title-box {
margin: 0 auto; margin-top: 15px;
width: 200px;
height: 48px; .title {
margin-top: 10px; color: rgba(95, 101, 108, 1);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
} }
}
.tempActive { .title-input {
border: 1px solid rgba(5, 95, 194, 1); margin-top: 15px;
background: rgba(246, 250, 255, 1); }
} }
}
.title-box { .description-box {
margin-top: 15px; margin-top: 24px;
.title { .title {
color: rgba(95, 101, 108, 1); height: 24px;
font-family: Microsoft YaHei; color: rgba(95, 101, 108, 1);
font-size: 16px; font-family: Microsoft YaHei;
font-weight: 400; font-size: 16px;
line-height: 24px; font-weight: 400;
} line-height: 24px;
}
.title-input { .description-input {
margin-top: 15px; margin-top: 12px;
height: 200px;
}
} }
}
.description-box { .sider-upload-btn {
margin-top: 24px; width: 476px;
height: 36px;
box-sizing: border-box;
border: 1px dashed rgba(234, 236, 238, 1);
border-radius: 6px;
background: rgba(247, 248, 249, 1);
margin-top: 19px;
}
.title { .sider-upload-btn-text {
height: 24px; color: rgba(59, 65, 75, 1);
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-style: Regular;
font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 22px;
letter-spacing: 0px;
text-align: left;
} }
.description-input { .sider-upload-btn-tip {
margin-top: 12px; color: rgba(95, 101, 108, 1);
height: 200px; font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
} }
} }
.sider-upload-btn {
width: 476px;
height: 36px;
box-sizing: border-box;
border: 1px dashed rgba(234, 236, 238, 1);
border-radius: 6px;
background: rgba(247, 248, 249, 1);
margin-top: 19px;
}
.sider-upload-btn-text {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.sider-upload-btn-tip {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
margin-top: 8px;
}
} }
.submit-area {
margin-top: auto;
.submit-btn { width: 100%;
position: absolute; min-height: 74px;
left: 22px;
bottom: 13px;
width: 476px;
height: 36px;
border-radius: 4px;
background: rgba(5, 95, 194, 1);
display: flex;
justify-content: center;
cursor: pointer;
&:hover {
background: rgba(5, 95, 194, 0.8);
}
.tips { .tips {
height: 22px; height: 22px;
display: flex; display: flex;
position: absolute; margin-bottom: 18px;
top: -30px;
left: 0px;
.tips-icon { .tips-icon {
width: 14px; width: 14px;
...@@ -1078,27 +958,90 @@ onUnmounted(() => { ...@@ -1078,27 +958,90 @@ onUnmounted(() => {
} }
} }
.submit-icon { .process-footer-box {
/* AI-logo */ height: 36px;
width: 21px; display: flex;
height: 15px; position: absolute;
margin-top: 10px;
img { .footer-left {
width: 100%; width: 348px;
height: 100%; height: 36px;
border-radius: 4px;
background: rgba(234, 236, 238, 1);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
text-align: center;
line-height: 36px;
}
.footer-right {
margin-left: 8px;
display: flex;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid var(--color-main-active);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
justify-content: center;
align-items: center;
gap: 8px;
cursor: pointer;
.icon {
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--color-main-active);
}
.text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
} }
} }
.submit-text { .submit-btn {
height: 24px; width: 476px;
margin-top: 5px; height: 36px;
color: rgba(255, 255, 255, 1); border-radius: 4px;
font-family: Microsoft YaHei; background: rgba(5, 95, 194, 1);
font-size: 16px; display: flex;
font-weight: 400; justify-content: center;
line-height: 24px; cursor: pointer;
margin-left: 8px;
&:hover {
background: rgba(5, 95, 194, 0.8);
}
.submit-icon {
/* AI-logo */
width: 21px;
height: 15px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.submit-text {
height: 24px;
margin-top: 5px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-left: 8px;
}
} }
} }
} }
...@@ -1114,19 +1057,19 @@ onUnmounted(() => { ...@@ -1114,19 +1057,19 @@ onUnmounted(() => {
} }
.content-box { .content-box {
width: calc(100% - 100px); width: 1069px;
height: calc(100% - 40px); height: 100%;
margin: 20px 50px;
// height: 500px;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 20px 80px;
border: 1px solid #dcdfe6;
border-radius: 8px;
background: #fafafa;
line-height: 1.7; line-height: 1.7;
// font-size: 20px;
font-size: 16px; font-size: 16px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 1);
margin: 17px auto 0 auto;
img { img {
width: 300px; width: 300px;
height: auto; height: auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论