Skip to content

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

修改样式

上级 5981ec64
显示空白字符变更
内嵌 并排
正在显示 包含 210 行增加 和 267 行删除
src/views/writtingAsstaint/index.vue
浏览文件 @ 210cd251
...@@ -2,74 +2,133 @@ ...@@ -2,74 +2,133 @@
<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"
:class="{ tabActive: item.active }"
v-for="(item, index) in tabList"
:key="index">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<div class="edit-box"></div> <div class="edit-box"></div>
<div class="btn-box"> <div class="btn-box">
<div class="btn" @click="exportContent"> <div class="btn"
@click="exportContent">
<div class="icon"> <div class="icon">
<img src="./assets/images/export-icon.png" alt="" /> <img src="./assets/images/export-icon.png"
alt="" />
</div> </div>
<div class="text">{{ "导出" }}</div> <div class="text">{{ "导出" }}</div>
</div> </div>
<div class="btn" @click="handleSwitchMode"> <div class="btn"
@click="handleSwitchMode">
<div class="icon"> <div class="icon">
<img v-if="isEditMode" src="./assets/images/preview-icon.png" alt="" /> <img v-if="isEditMode"
<img v-else src="./assets/images/edit.png" alt="" /> src="./assets/images/preview-icon.png"
alt="" />
<img v-else
src="./assets/images/edit.png"
alt="" />
</div> </div>
<div class="text">{{ isEditMode ? "预览" : "编辑" }}</div> <div class="text">{{ isEditMode ? "预览" : "编辑" }}</div>
</div> </div>
<div class="btn btn1"> <div class="btn btn1">
<div class="icon"> <div class="icon">
<img src="./assets/images/save-icon.png" alt="" /> <img src="./assets/images/save-icon.png"
alt="" />
</div> </div>
<div class="text text1">{{ "保存" }}</div> <div class="text text1">{{ "保存" }}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="writting-main"> <div class="writting-main">
<div class="sider"> <div class="left-box">
<div class="sider-box" v-if="false"> <div class="process-box"
v-if="isShowProcess">
<div class="back"
@click="handleBack">{{ "< 返回" }} </div>
<div class="process-main-box">
<div class="steps-box">
<div class="steps-header">
<div class="icon">
<img src="./assets/images/right-arrow.png"
alt="" />
</div>
<div class="text">{{ "执行步骤：" }}</div>
</div>
<div class="steps-content"
ref="scrollProcessContainer"
v-html="renderedProcess"></div>
</div>
<div class="tool-box">
<div class="tool-header">{{ "工具调用" }}</div>
<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
</div>
</div>
</div>
<div class="sider"
v-else>
<div class="sider-box"
v-if="false">
<div class="header">报文主题</div> <div class="header">报文主题</div>
<div class="title-box"> <div class="title-box">
<div class="title">主题名称</div> <div class="title">主题名称</div>
<el-input :disabled="true" style="width: 476px; height: 32px" class="title-input" <el-input :disabled="true"
placeholder="输入主题名称，如：大而美法案" v-model="writtingTitle" /> style="width: 476px; height: 32px"
class="title-input"
placeholder="输入主题名称，如：大而美法案"
v-model="writtingTitle" />
</div> </div>
<div class="description-box"> <div class="description-box">
<div class="title">主题描述</div> <div class="title">主题描述</div>
<el-input :disabled="true" class="description-input" type="textarea" style="width: 476px" <el-input :disabled="true"
:rows="8" placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响" v-model="descText" /> class="description-input"
type="textarea"
style="width: 476px"
:rows="8"
placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
v-model="descText" />
</div> </div>
</div> </div>
<div class="sider-box"> <div class="sider-box">
<div class="header">报文模板</div> <div class="header">报文模板</div>
<div class="template-box"> <div class="template-box">
<div class="template" :class="{ tempActive: tempActiveIndex === index }" <div class="template"
v-for="(temp, index) in tempList" :key="index" @click="handleClickTemp(temp, index)"> :class="{ tempActive: tempActiveIndex === index }"
v-for="(temp, index) in tempList"
:key="index"
@click="handleClickTemp(temp, index)">
<div class="header"> <div class="header">
<div class="title">{{ temp.title }}</div> <div class="title">{{ temp.title }}</div>
<div class="icon"> <div class="icon">
<img src="./assets/images/template-icon.png" alt="" /> <img src="./assets/images/template-icon.png"
alt="" />
</div> </div>
</div> </div>
<div class="content">{{ temp.desc }}</div> <div class="content">{{ temp.desc }}</div>
<div class="active-icon" v-if="tempActiveIndex === index"> <div class="active-icon"
<img src="./assets/images/active-icon.png" alt="" /> v-if="tempActiveIndex === index">
<img src="./assets/images/active-icon.png"
alt="" />
</div> </div>
<div class="selected-icon" v-if="tempActiveIndex === index"> <div class="selected-icon"
<img src="./assets/images/selected-icon.png" alt="" /> v-if="tempActiveIndex === index">
<img src="./assets/images/selected-icon.png"
alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="sider-box"> <div class="sider-box">
<div class="header">加载本地文件</div> <div class="header">加载本地文件</div>
<el-upload action="" :auto-upload="false" accept=".pdf" limit="1" :on-exceed="handleExceed" <el-upload action=""
ref="upload" :on-change="handleFileChange"> :auto-upload="false"
<el-button class="sider-upload-btn" type="primary"> accept=".pdf"
limit="1"
:on-exceed="handleExceed"
ref="upload"
:on-change="handleFileChange">
<el-button class="sider-upload-btn"
type="primary">
<el-icon class="sider-upload-btn-text"> <el-icon class="sider-upload-btn-text">
<Upload /> <Upload />
</el-icon> </el-icon>
...@@ -82,78 +141,52 @@ ...@@ -82,78 +141,52 @@
</template> </template>
</el-upload> </el-upload>
</div> </div>
<div class="submit-btn" @click="getStreamChat">
<div class="tips">
<div class="tips-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
</div>
<div class="submit-icon">
<img src="./assets/images/ai.png" alt="" />
</div>
<div class="submit-text">生成报文</div>
</div>
</div>
<div class="process-box" v-if="isShowProcess">
<div class="back" @click="handleBack">
{{ "< 返回" }} </div>
<div class="process-main-box">
<!-- <div class="analysis-box">
<div class="analysis-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "任务分析：" }}</div>
</div>
<div class="analysis-content">
{{
"用户需求属于态势要图制图任务，需要围绕“伊以冲突”主题生成关键词、搜索相关新闻、抽取并聚类事件、获取地理位置信息，最终完成事件和地点的可视化标绘"
}}
</div>
</div> -->
<div class="steps-box">
<div class="steps-header">
<div class="icon">
<img src="./assets/images/right-arrow.png" alt="" />
</div>
<div class="text">{{ "执行步骤：" }}</div>
</div>
<div class="steps-content" ref="scrollProcessContainer" v-html="renderedProcess"></div>
</div>
<!-- <div class="doing-box">
{{ "正在执行步骤1/7:根据制图主题生成关键词" }}
</div> -->
<div class="tool-box">
<div class="tool-header">{{ "工具调用" }}</div>
<div class="tool-main">当前智能体工具：{{ curAgentTool ? curAgentTool : "无" }}</div>
</div>
</div> </div>
<div class="process-tips-box"> <div class="submit-area">
<div class="tips">
<div class="tips-icon"> <div class="tips-icon">
<img src="./assets/images/tips-icon.png" alt="" /> <img src="./assets/images/tips-icon.png"
alt="" />
</div> </div>
<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div> <div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
</div> </div>
<div class="process-footer-box"> <div class="process-footer-box"
v-if="isShowProcess">
<div class="footer-left"> <div class="footer-left">
{{ isGenerating ? "报文生成中..." : "报文已生成" }} {{ isGenerating ? "报文生成中..." : "报文已生成" }}
</div> </div>
<div class="footer-right"> <div class="footer-right">
<div class="icon"></div> <div class="icon"></div>
<div class="text" @click="handleGenerate">{{ "停止" }}</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>
</div> </div>
<div class="main-box"> <div class="main-box">
<div v-if="isEditMode" class="edit-panel"> <div v-if="isEditMode"
<v-md-editor v-model="reportContent" height="calc(100% - 40px)" :disabled-menus="[]" class="edit-panel">
@upload-image="handleUploadImage" @save="handleSave" <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" 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" /> right-toolbar="preview toc sync-scroll fullscreen" />
</div> </div>
<div v-else class="content-box" ref="scrollContainer" v-html="renderedContent"></div> <div v-else
class="content-box"
ref="scrollContainer"
v-html="renderedContent"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -207,37 +240,6 @@ const handleBack = () => { ...@@ -207,37 +240,6 @@ 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;
...@@ -327,12 +329,12 @@ const callSseWithPdf = async (selectedFile) => { ...@@ -327,12 +329,12 @@ const callSseWithPdf = async (selectedFile) => {
// 禁用自动重连（可选，根据后端配置） // 禁用自动重连（可选，根据后端配置）
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) {
...@@ -352,7 +354,7 @@ const callSseWithPdf = async (selectedFile) => { ...@@ -352,7 +354,7 @@ const callSseWithPdf = async (selectedFile) => {
} }
}, },
onerror(error) { onerror (error) {
ElMessage({ ElMessage({
message: "写报生成报错!", message: "写报生成报错!",
type: "warning" type: "warning"
...@@ -380,12 +382,12 @@ const callSseWithAi = async (params) => { ...@@ -380,12 +382,12 @@ const callSseWithAi = async (params) => {
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);
...@@ -416,7 +418,7 @@ const callSseWithAi = async (params) => { ...@@ -416,7 +418,7 @@ const callSseWithAi = async (params) => {
updateProcess(processContent.value, scrollProcessContainer.value); updateProcess(processContent.value, scrollProcessContainer.value);
} }
}, },
onerror(error) { onerror (error) {
ElMessage({ ElMessage({
message: "写报生成报错!", message: "写报生成报错!",
type: "warning" type: "warning"
...@@ -604,20 +606,24 @@ onUnmounted(() => { ...@@ -604,20 +606,24 @@ 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);
background: rgba(255, 255, 255, 1);
.process-box {
display: flex;
flex-direction: column;
gap: 20px;
.back { .back {
margin-top: 21px;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
margin-left: 22px;
color: var(--color-main-active); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -627,12 +633,8 @@ onUnmounted(() => { ...@@ -627,12 +633,8 @@ onUnmounted(() => {
} }
.process-main-box { .process-main-box {
margin-top: 20px;
margin-left: 22px;
width: 476px; width: 476px;
height: 900px;
// background: orange;
.analysis-box { .analysis-box {
.analysis-header { .analysis-header {
display: flex; display: flex;
...@@ -671,8 +673,6 @@ onUnmounted(() => { ...@@ -671,8 +673,6 @@ onUnmounted(() => {
} }
.steps-box { .steps-box {
margin-top: 20px;
.steps-header { .steps-header {
display: flex; display: flex;
...@@ -699,31 +699,11 @@ onUnmounted(() => { ...@@ -699,31 +699,11 @@ onUnmounted(() => {
} }
.steps-content { .steps-content {
height: 560px;
width: 100%; width: 100%;
min-height: 20px;
max-height: 480px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; 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;
// }
// }
} }
} }
...@@ -764,100 +744,14 @@ onUnmounted(() => { ...@@ -764,100 +744,14 @@ onUnmounted(() => {
} }
} }
} }
.process-tips-box {
position: absolute;
left: 22px;
bottom: 81px;
height: 22px;
display: flex;
.tips-icon {
width: 14px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.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 {
height: 36px;
display: flex;
position: absolute;
left: 22px;
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 {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
} }
.sider { .sider {
width: 520px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(255, 255, 255, 1);
position: relative;
padding: 21px 21px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 23px; gap: 23px;
.sider-box { .sider-box {
.header { .header {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -1031,31 +925,17 @@ onUnmounted(() => { ...@@ -1031,31 +925,17 @@ onUnmounted(() => {
margin-top: 8px; margin-top: 8px;
} }
} }
.submit-btn {
position: absolute;
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);
} }
.submit-area {
margin-top: auto;
width: 100%;
min-height: 74px;
.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,6 +958,68 @@ onUnmounted(() => { ...@@ -1078,6 +958,68 @@ onUnmounted(() => {
} }
} }
.process-footer-box {
height: 36px;
display: flex;
position: absolute;
.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 {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.submit-btn {
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);
}
.submit-icon { .submit-icon {
/* AI-logo */ /* AI-logo */
width: 21px; width: 21px;
...@@ -1102,6 +1044,7 @@ onUnmounted(() => { ...@@ -1102,6 +1044,7 @@ onUnmounted(() => {
} }
} }
} }
}
.main-box { .main-box {
flex: 1; flex: 1;
...@@ -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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论