Skip to content

R
risk-monitor
提交 d4b8b274 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

智能问答界面优化

上级 c61d294d
隐藏空白字符变更
内嵌 并排
正在显示 包含 148 行增加 和 59 行删除
src/views/comprehensiveSearch/chat/index.vue
浏览文件 @ d4b8b274
......@@ -20,12 +20,8 @@
<div class="left-main">
<div class="left-main-title">{{ "历史对话" }}</div>
<div class="left-list">
<div
class="left-list-item"
:class="{ itemActive: currentChatId === item.id }"
v-for="(item, index) in chatList"
:key="index"
>
<div class="left-list-item" :class="{ itemActive: currentChatId === item.id }"
v-for="(item, index) in chatList" :key="index">
{{ item.title }}
</div>
</div>
......@@ -53,31 +49,34 @@
class="content think-content"
v-html="renderMarkdown(message.think)"
></div> -->
<div v-if="message.source" class="source-title">知识库检索结果:</div>
<div v-if="message.source" class="content source-content">
<div
class="source-item"
v-for="(item, index) in message.source"
:key="index"
v-html="renderMarkdown(item)"
></div>
<div v-if="message.source" class="source-title">
<div class="text">知识库检索结果:</div>
<div class="tool" @click="handleShowThinking">
<div class="tool-item" v-if="!isShowThinking">
<div class="text">展开</div>
<div class="img">
<img src="@/assets/icons/chat/down.png" alt="">
</div>
</div>
<div class="tool-item" v-else>
<div class="text">折叠</div>
<div class="img">
<img src="@/assets/icons/chat/up.png" alt="">
</div>
</div>
</div>
</div>
<div v-if="message.source" class="content source-content" :class="{hiddenThinkContent: !isShowThinking}">
<div class="source-item" v-for="(item, index) in message.source" :key="index"
v-html="renderMarkdown(item)"></div>
</div>
<div v-if="message.content" class="answer-title">正文内容</div>
<div
v-if="message.content"
class="content ai-content"
v-html="renderMarkdown(message.content)"
></div>
<div
v-if="message.raw_data?.length || message.raw_data?.rows?.length"
class="answer-title"
>
<div v-if="message.content" class="content ai-content" v-html="renderMarkdown(message.content)">
</div>
<div v-if="message.raw_data?.length || message.raw_data?.rows?.length" class="answer-title">
完整实体列表
</div>
<div
v-if="message.raw_data?.length || message.raw_data?.rows?.length"
class="content row-content"
>
<div v-if="message.raw_data?.length || message.raw_data?.rows?.length" class="content row-content">
<div class="row-header">
<div class="row-header-item1">{{ message.raw_data.columns?.name_zhs }}</div>
<div class="row-header-item">{{ message.raw_data.columns?.date }}</div>
......@@ -88,17 +87,8 @@
</div>
</div>
<div class="row-main">
<div
class="row-main-item"
v-for="(item, index) in message.raw_data.rows"
:key="index"
>
<el-popover
effect="dark"
:width="500"
:content="item.name_zhs"
placement="top-start"
>
<div class="row-main-item" v-for="(item, index) in message.raw_data.rows" :key="index">
<el-popover effect="dark" :width="500" :content="item.name_zhs" placement="top-start">
<template #reference>
<div class="item-item1">{{ item.name_zhs }}</div>
</template>
......@@ -107,12 +97,7 @@
<div class="item-item">{{ item.date }}</div>
<div class="item-item">{{ item.industry }}</div>
<div class="item-item">{{ item.category }}</div>
<el-popover
effect="dark"
:width="400"
:content="item.sanction_reason"
placement="top-start"
>
<el-popover effect="dark" :width="400" :content="item.sanction_reason" placement="top-start">
<template #reference>
<div class="item-item2">{{ item.sanction_reason }}</div>
</template>
......@@ -148,13 +133,7 @@
</div>
</div>
<div class="right-main-footer">
<el-input
@keyup.enter="sendMessage"
type="textarea"
placeholder="发送消息"
:rows="4"
v-model="userInput"
/>
<el-input @keyup.enter="sendMessage" type="textarea" placeholder="发送消息" :rows="4" v-model="userInput" />
<div class="input-footer">
<div class="icon1">
<el-tooltip effect="dark" content="录音" placement="top">
......@@ -198,6 +177,11 @@ import { getChat, getChecklistChat } from "@/api/chat";
import router from "@/router/index";
import json5 from "json5";
const isShowThinking = ref(false)
const handleShowThinking = () => {
isShowThinking.value = !isShowThinking.value
}
const curArea = ref("法案");
const areaList = ref([
......@@ -990,6 +974,7 @@ onUnmounted(() => {
box-shadow: none;
height: 44px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -997,12 +982,14 @@ onUnmounted(() => {
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-input ::placeholder) {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
:deep(.el-input__inner) {
color: #333;
font-family: Microsoft YaHei;
......@@ -1015,6 +1002,7 @@ onUnmounted(() => {
border-radius: 20px;
resize: none;
}
:deep(.el-textarea__inner:hover) {
box-shadow: none !important;
}
......@@ -1022,22 +1010,26 @@ onUnmounted(() => {
:deep(.el-textarea__inner.is-focus) {
box-shadow: none !important;
}
:deep(.el-textarea ::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
:deep(.el-textarea__inner) {
color: #333;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.header {
position: sticky;
top: 0;
......@@ -1056,29 +1048,35 @@ onUnmounted(() => {
width: 1600px;
margin: 0 auto;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
}
}
}
.main {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 10px;
.left {
width: 300px;
height: 880px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.left-header {
width: 268px;
height: 48px;
......@@ -1089,19 +1087,23 @@ onUnmounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
display: flex;
.icon {
width: 20px;
height: 13px;
margin-top: 13px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left-main {
margin-top: 24px;
.left-main-title {
margin-left: 29px;
width: 64px;
......@@ -1114,11 +1116,13 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.left-list {
margin-top: 12px;
margin-left: 16px;
width: 268px;
height: 720px;
.left-list-item {
width: 268px;
height: 48px;
......@@ -1134,10 +1138,12 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
background: rgba(246, 250, 255, 1);
}
}
.itemActive {
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
......@@ -1146,12 +1152,14 @@ onUnmounted(() => {
}
}
}
.right {
width: 1284px;
height: 880px;
border-radius: 4px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.right-header {
height: 64px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
......@@ -1163,12 +1171,14 @@ onUnmounted(() => {
font-size: 18px;
font-weight: 700;
}
.right-main {
.right-main-content {
width: 926px;
margin-left: 166px;
height: 630px;
}
.right-main-footer {
margin: 10px auto;
width: 900px;
......@@ -1177,40 +1187,48 @@ onUnmounted(() => {
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 20px;
background: rgba(255, 255, 255, 1);
.input-footer {
display: flex;
justify-content: flex-end;
.icon1 {
margin-top: 15px;
width: 24px;
height: 24px;
margin-right: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.icon2 {
margin-top: 15px;
width: 24px;
height: 24px;
margin-right: 20px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.select-box {
margin-top: 10px;
margin-right: 14px;
:deep(.el-select__wrapper) {
height: 36px;
border-radius: 18px;
border: 1px solid var(--color-main-active);
box-shadow: none;
}
:deep(.el-select__selected-item) {
color: var(--color-main-active);
font-family: Microsoft YaHei;
......@@ -1222,6 +1240,7 @@ onUnmounted(() => {
color: var(--color-main-active);
}
}
.submit {
margin-top: 7px;
margin-right: 12px;
......@@ -1230,9 +1249,11 @@ onUnmounted(() => {
border-radius: 20px;
background: #b4cfed;
cursor: pointer;
&:hover {
background: rgba(5, 95, 194, 1);
}
img {
width: 24px;
height: 24px;
......@@ -1256,6 +1277,7 @@ onUnmounted(() => {
padding-right: 192px;
box-sizing: border-box;
height: 620px;
.chat-content::-webkit-scrollbar {
width: 30px;
}
......@@ -1272,20 +1294,25 @@ onUnmounted(() => {
.message-list {
padding-bottom: 20px;
}
.ai-item {
width: 926px;
overflow: hidden;
.ai-header {
height: 22px;
display: flex;
.icon {
width: 10px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 16px;
height: 22px;
......@@ -1298,6 +1325,7 @@ onUnmounted(() => {
text-align: left;
}
}
.think-title {
margin-left: 26px;
height: 22px;
......@@ -1309,6 +1337,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.answer-title {
margin-top: 10px;
margin-left: 26px;
......@@ -1321,6 +1350,7 @@ onUnmounted(() => {
letter-spacing: 0px;
text-align: left;
}
.think-content {
background: rgba(245, 245, 245, 0.5);
width: 900px;
......@@ -1328,23 +1358,65 @@ onUnmounted(() => {
padding: 1px 10px;
border-radius: 5px;
}
.source-title {
margin-left: 26px;
height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
.text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.tool-item {
display: flex;
gap: 10px;
cursor: pointer;
.text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.img {
width: 17px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
}
}
.hiddenThinkContent {
height: 0px;
overflow: hidden;
}
.source-content {
background: rgba(245, 245, 245, 0.5);
width: 900px;
margin-left: 26px;
padding: 1px 10px;
border-radius: 5px;
// max-height: 300px;
// overflow-y: auto;
.source-item {
......@@ -1353,6 +1425,7 @@ onUnmounted(() => {
color: #333;
}
}
.ai-content {
margin-top: 10px;
width: 900px;
......@@ -1361,6 +1434,7 @@ onUnmounted(() => {
padding: 1px 10px;
border-radius: 5px;
}
.row-content {
margin-top: 10px;
width: 900px;
......@@ -1368,6 +1442,7 @@ onUnmounted(() => {
background: rgba(246, 250, 255, 1);
padding: 1px 10px;
border-radius: 5px;
.row-header {
height: 40px;
line-height: 40px;
......@@ -1377,23 +1452,28 @@ onUnmounted(() => {
font-weight: bold;
display: flex;
border-bottom: 1px solid #999;
.row-header-item {
text-align: center;
width: 150px;
border-right: 1px solid #999;
}
.row-header-item1 {
text-align: center;
width: 250px;
border-right: 1px solid #999;
}
.row-header-item2 {
text-align: center;
width: 200px;
}
}
.row-main {
padding-bottom: 10px;
.row-main-item {
height: 35px;
line-height: 35px;
......@@ -1402,11 +1482,13 @@ onUnmounted(() => {
color: #555;
display: flex;
border-bottom: 1px solid #ccc;
.item-item {
width: 150px;
text-align: center;
border-right: 1px solid #ccc;
}
.item-item1 {
width: 250px;
text-align: center;
......@@ -1415,10 +1497,12 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
}
.item-item2 {
width: 200px;
text-align: center;
......@@ -1426,6 +1510,7 @@ onUnmounted(() => {
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
......@@ -1434,11 +1519,13 @@ onUnmounted(() => {
}
}
}
.user-item {
margin-top: 32px;
height: 42px;
display: flex;
justify-content: flex-end;
.user-bubble {
line-height: 42px;
border-radius: 21px 0px 21px 21px;
......@@ -1447,6 +1534,7 @@ onUnmounted(() => {
padding: 0 20px;
text-align: right;
word-wrap: break-word;
.user-content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -1480,6 +1568,7 @@ onUnmounted(() => {
.dot:nth-child(1) {
animation-delay: -0.32s;
}
.dot:nth-child(2) {
animation-delay: -0.16s;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论