15308555518/ MaxKB
1
0
Fork 0
mirror of https://github.com/1Panel-dev/MaxKB.git synced 2025-12-26 01:33:05 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

style: Optimize chat page style

This commit is contained in:
wangdan-fit2cloud 2025-02-26 19:38:48 +08:00
parent 32b7aa99c5
commit dc0ae4dc42
8 changed files with 74 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/components/ai-chat/component/answer-content/index.vue
View File

@ -6,7 +6,7 @@
<LogoIcon v-else height="32px" width="32px" />
</div>
<div class="content" @mouseup="openControl">
<el-card shadow="always" class="dialog-card mb-8">
<el-card shadow="always" class="mb-8 border-r-8">
<MdRenderer
v-if="
(chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&
@ -27,10 +27,10 @@
:send-message="chatMessage"
></MdRenderer>
</template>
<span v-else-if="chatRecord.is_stop" shadow="always" class="dialog-card">
<span v-else-if="chatRecord.is_stop" shadow="always">
{{ $t('chat.tip.stopAnswer') }}
</span>
<span v-else shadow="always" class="dialog-card">
<span v-else shadow="always">
{{ $t('chat.tip.answerLoading') }} <span class="dotting"></span>
</span>
<!-- 知识来源 -->

2
ui/src/components/ai-chat/component/prologue-content/index.vue
View File

@ -6,7 +6,7 @@
<LogoIcon v-else height="32px" width="32px" />
</div>
<div class="content" v-if="prologue">
<el-card shadow="always" class="dialog-card" style="--el-card-padding: 10px 16px 12px">
<el-card shadow="always" class="border-r-8" style="--el-card-padding: 10px 16px 12px">
<MdRenderer
:source="prologue"
:send-message="sendMessage"

90
ui/src/components/ai-chat/component/question-content/index.vue
View File

@ -1,20 +1,14 @@
<template>
<!-- 问题内容 -->
<div class="question-content item-content mb-16 lighter">
<div class="content mr-16">
<div
class="content mr-12 p-12-16 border-r-8"
:class="document_list.length >= 2 ? 'media_2' : `media_${document_list.length}`"
>
<div class="text break-all pre-wrap">
<div class="mb-8" v-if="document_list.length">
<el-row :gutter="10">
<el-col
v-for="(item, index) in document_list"
:key="index"
:xs="24"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8 w-full"
>
<el-space wrap class="w-full media-file-width">
<template v-for="(item, index) in document_list" :key="index">
<el-card shadow="never" style="--el-card-padding: 8px" class="download-file cursor">
<div class="download-button flex align-center" @click="downloadFile(item)">
<el-icon class="mr-4">
@ -29,8 +23,8 @@
</div>
</div>
</el-card>
</el-col>
</el-row>
</template>
</el-space>
</div>
<div class="mb-8" v-if="image_list.length">
<el-space wrap>
@ -53,17 +47,8 @@
</el-space>
</div>
<div class="mb-8" v-if="audio_list.length">
<el-row :gutter="10">
<el-col
v-for="(item, index) in audio_list"
:key="index"
:xs="24"
:sm="props.type === 'debug-ai-chat' ? 24 : 12"
:md="props.type === 'debug-ai-chat' ? 24 : 12"
:lg="props.type === 'debug-ai-chat' ? 24 : 12"
:xl="props.type === 'debug-ai-chat' ? 24 : 12"
class="mb-8"
>
<el-space wrap>
<template v-for="(item, index) in audio_list" :key="index">
<div class="file cursor border-r-4" v-if="item.url">
<audio
:src="item.url"
@ -72,10 +57,10 @@
class="border-r-4"
/>
</div>
</el-col>
</el-row>
</template>
</el-space>
</div>
{{ chatRecord.problem_text }}
<span> {{ chatRecord.problem_text }}</span>
</div>
</div>
<div class="avatar">
@ -140,6 +125,16 @@ onMounted(() => {})
.question-content {
display: flex;
justify-content: flex-end;
padding-left: var(--padding-left);
width: 100%;
box-sizing: border-box;
.content {
background: #d6e2ff;
padding-left: 16px;
padding-right: 16px;
}
.download-file {
height: 43px;
@ -163,5 +158,44 @@ onMounted(() => {})
display: none;
}
}
.media-file-width {
:deep(.el-space__item) {
min-width: 40% !important;
flex-grow: 1;
}
}
.media_2 {
flex: 1;
}
.media_0 {
flex: inherit;
}
.media_1 {
width: 50%;
}
}
@media only screen and (max-width: 768px) {
.question-content {
.media-file-width {
:deep(.el-space__item) {
min-width: 100% !important;
}
}
.media_1 {
width: 100%;
}
}
}
.debug-ai-chat {
.question-content {
.media-file-width {
:deep(.el-space__item) {
min-width: 100% !important;
}
}
.media_1 {
width: 100%;
}
}
}
</style>

2
ui/src/components/ai-chat/component/user-form/index.vue
View File

@ -7,7 +7,7 @@
class="mb-16"
style="padding: 0 24px"
>
<el-card shadow="always" class="dialog-card" style="--el-card-padding: 16px 8px">
<el-card shadow="always" class="border-r-8" style="--el-card-padding: 16px 8px">
<div
class="flex align-center cursor w-full"
style="padding: 0 8px"

5
ui/src/components/ai-chat/index.scss
View File

@ -17,15 +17,12 @@
.content {
padding-left: var(--padding-left);
padding-right: var(--padding-left);
:deep(ol) {
margin-left: 16px !important;
}
}
.text {
padding: 6px 0;
}
}
&__operate {
background: #f3f7f9;

2
ui/src/components/ai-chat/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="aiChatRef" class="ai-chat" :class="type == 'log' ? 'chart-log' : ''">
<div ref="aiChatRef" class="ai-chat" :class="type">
<UserForm
v-model:api_form_data="api_form_data"
v-model:form_data="form_data"

5
ui/src/styles/app.scss
View File

@ -311,6 +311,9 @@ h5 {
.border-r-4 {
border-radius: 4px;
}
.border-r-8 {
border-radius: 8px;
}
.border-t-dashed {
border-top: 1px dashed var(--el-border-color);
@ -761,4 +764,4 @@ h5 {
.responsive-dialog {
width: 90% !important;
}
}
}

2
ui/src/views/chat/pc/index.vue
View File

@ -101,7 +101,7 @@
</div>
<div class="chat-pc__right">
<div class="right-header border-b mb-24 p-16-24 flex-between">
<h4 class="ellipsis-1" style="width: 70%">
<h4 class="ellipsis-1" style="width: 66%">
{{ currentChatName }}
</h4>