kris/ForcePilot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

组件优化，优化前端页面展现

Browse Source
This commit is contained in:
Wenjie Zhang 2025-03-28 10:57:19 +08:00
parent 6a1fed8513
commit ba89d2fc84
4 changed files with 428 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
web/src/components/ChatComponent.vue
View File

@ -57,60 +57,31 @@
</div>
</div>
<div class="chat-box" :class="{ 'wide-screen': meta.wideScreen, 'font-smaller': meta.fontSize === 'smaller', 'font-larger': meta.fontSize === 'larger' }">
<div
<MessageComponent
v-for="message in conv.messages"
:key="message.id"
class="message-box"
:class="message.role"
:role="message.role"
:content="message.text"
:content-html="message.text.length > 0 ? renderMarkdown(message) : ''"
:reasoning-content="message.reasoning_content"
:reasoning-header="message.status=='reasoning' ? '正在思考...' : '推理过程'"
:status="message.status"
:is-processing="isStreaming"
:error-message="message.message"
@retry="retryMessage(message.id)"
>
<div v-if="message.reasoning_content" class="reasoning-msg">
<a-collapse
v-model:activeKey="message.showThinking"
:bordered="false"
style="background: rgb(255, 255, 255)"
>
<template #expandIcon="{ isActive }">
<caret-right-outlined :rotate="isActive ? 90 : 0" />
</template>
<a-collapse-panel
key="show"
:header="message.status=='reasoning' ? '正在思考...' : '推理过程'"
:style="'background: #f7f7f7; border-radius: 8px; margin-bottom: 24px; border: 0; overflow: hidden'"
>
<p style="color: var(--gray-800)">{{ message.reasoning_content }}</p>
</a-collapse-panel>
</a-collapse>
</div>
<p v-if="message.role=='sent'" style="white-space: pre-line" class="message-text">{{ message.text }}</p>
<div v-else-if="message.text.length == 0 && (message.status=='init' || message.status=='reasoning') && isStreaming" class="loading-dots">
<div></div>
<div></div>
<div></div>
</div>
<div v-else-if="message.status == 'searching' && isStreaming" class="searching-msg"><i>正在检索……</i></div>
<div v-else-if="message.status == 'generating' && isStreaming" class="searching-msg"><i>正在生成……</i></div>
<div v-else-if="message.text.length > 0"
v-html="renderMarkdown(message)"
class="message-md"
@click="consoleMsg(message)">
</div>
<div v-else
class="err-msg"
@click="retryMessage(message.id)"
>
请求错误，请重试。{{ message.message }}
</div>
<RefsComponent v-if="message.role=='received' && message.status=='finished'" :message="message" />
</div>
<template #refs v-if="message.role=='received' && message.status=='finished'">
<RefsComponent :message="message" />
</template>
</MessageComponent>
</div>
<div class="bottom">
<div class="message-input-wrapper">
<div class="message-input-wrapper" :class="{ 'wide-screen': meta.wideScreen}">
<MessageInputComponent
v-model="conv.inputText"
:is-loading="isStreaming"
:send-button-disabled="!conv.inputText && !isStreaming"
:auto-size="{ minRows: 2, maxRows: 10 }"
:custom-classes="{ 'wide-screen': meta.wideScreen }"
@send="sendMessage"
@keydown="handleKeyDown"
>
@ -192,6 +163,7 @@ import RefsComponent from '@/components/RefsComponent.vue'
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import MessageInputComponent from '@/components/MessageInputComponent.vue'
import MessageComponent from '@/components/MessageComponent.vue'
const props = defineProps({
conv: Object,
@ -790,76 +762,6 @@ watch(
font-size: 16px;
}
}
.message-box {
display: inline-block;
border-radius: 1.5rem;
margin: 0.8rem 0;
padding: 0.625rem 1.25rem;
user-select: text;
word-break: break-word;
font-size: 15px;
font-variation-settings: 'wght' 400, 'opsz' 10.5;
font-weight: 400;
box-sizing: border-box;
color: black;
/* box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16); */
/* animation: slideInUp 0.1s ease-in; */
.err-msg {
color: #eb8080;
border: 1px solid #eb8080;
padding: 0.5rem 1rem;
border-radius: 8px;
text-align: left;
background: #FFF5F5;
margin-bottom: 10px;
cursor: pointer;
}
.searching-msg {
color: var(--gray-500);
animation: colorPulse 2s infinite;
}
@keyframes colorPulse {
0% { color: var(--gray-700); }
50% { color: var(--gray-300); }
100% { color: var(--gray-700); }
}
}
.message-box.sent {
line-height: 24px;
max-width: 95%;
background: var(--main-light-4);
align-self: flex-end;
}
.message-box.received {
color: initial;
width: fit-content;
text-align: left;
word-wrap: break-word;
margin: 0;
max-width: 100%;
padding-bottom: 0;
padding-top: 16px;
padding-left: 0;
padding-right: 0;
text-align: justify;
}
p.message-text {
max-width: 100%;
word-wrap: break-word;
margin-bottom: 0;
}
p.message-md {
word-wrap: break-word;
margin-bottom: 0;
}
}
.bottom {
@ -874,6 +776,7 @@ watch(
max-width: 800px;
margin: 0 auto;
background-color: white;
animation: width 0.3s ease-in-out;
&.wide-screen {
max-width: 1200px;

394
web/src/components/MessageComponent.vue Normal file
View File

@ -0,0 +1,394 @@
<template>
<div class="message-box" :class="[role, customClasses]">
<!-- 用户消息 -->
<p v-if="role === 'user' || role === 'sent'" class="message-text">{{ content }}</p>
<!-- 助手消息 -->
<div v-else-if="role === 'assistant' || role === 'received'" class="assistant-message">
<!-- 推理过程 (ChatComponent特有) -->
<div v-if="reasoningContent" class="reasoning-box">
<a-collapse v-model:activeKey="reasoningActiveKey" :bordered="false">
<template #expandIcon="{ isActive }">
<caret-right-outlined :rotate="isActive ? 90 : 0" />
</template>
<a-collapse-panel key="show" :header="reasoningHeader" class="reasoning-header">
<p class="reasoning-content">{{ reasoningContent }}</p>
</a-collapse-panel>
</a-collapse>
</div>
<!-- 加载中状态 -->
<div v-if="isEmptyAndLoading" class="loading-dots">
<div></div>
<div></div>
<div></div>
</div>
<!-- 检索中状态 (ChatComponent特有) -->
<div v-else-if="status === 'searching' && isProcessing" class="searching-msg">
<i>正在检索……</i>
</div>
<!-- 生成中状态 (ChatComponent特有) -->
<div v-else-if="status === 'generating' && isProcessing" class="searching-msg">
<i>正在生成……</i>
</div>
<!-- 消息内容 -->
<div v-else-if="contentHtml" v-html="contentHtml" class="message-md"></div>
<!-- 工具调用 (AgentView特有) -->
<slot name="tool-calls"></slot>
<!-- 引用组件 (ChatComponent特有) -->
<slot name="refs"></slot>
</div>
<!-- 错误消息 -->
<div v-else-if="status === 'error'" class="err-msg" @click="$emit('retry')">
请求错误，请重试。{{ errorMessage }}
</div>
<!-- 自定义内容 -->
<slot></slot>
</div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue';
const props = defineProps({
// 消息角色：'user'|'assistant'|'sent'|'received'
role: {
type: String,
required: true
},
// 消息内容
content: {
type: String,
default: ''
},
// 已渲染的HTML内容
contentHtml: {
type: String,
default: ''
},
// 推理内容 (ChatComponent使用)
reasoningContent: {
type: String,
default: ''
},
// 消息状态
status: {
type: String,
default: ''
},
// 是否正在处理中
isProcessing: {
type: Boolean,
default: false
},
// 错误信息
errorMessage: {
type: String,
default: ''
},
// 自定义类
customClasses: {
type: Object,
default: () => ({})
},
// 推理框标题
reasoningHeader: {
type: String,
default: '推理过程'
}
});
const emit = defineEmits(['retry']);
// 推理面板展开状态
const reasoningActiveKey = ref(['show']);
// 计算属性：内容为空且正在加载
const isEmptyAndLoading = computed(() => {
const isEmpty = !props.content || props.content.length === 0;
const isLoading = props.status === 'init' ||
props.status === 'loading' ||
props.status === 'reasoning' ||
props.isProcessing;
return isEmpty && isLoading;
});
</script>
<style lang="less" scoped>
.message-box {
display: inline-block;
border-radius: 1.5rem;
margin: 0.8rem 0;
padding: 0.625rem 1.25rem;
user-select: text;
word-break: break-word;
font-size: 15px;
font-weight: 400;
box-sizing: border-box;
color: black;
max-width: 100%;
position: relative;
&.user, &.sent {
line-height: 24px;
max-width: 95%;
color: white;
background-color: var(--main-color);
// background: linear-gradient(90deg, var(--main-light-1) 10.79%, var(--main-color) 87.08%);
align-self: flex-end;
border-radius: 1.5rem;
padding: 0.625rem 1.25rem;
}
&.assistant, &.received {
color: initial;
width: 100%;
text-align: left;
word-wrap: break-word;
margin: 0 0 16px 0;
padding: 16px 0 0 0;
text-align: justify;
background-color: transparent;
border-radius: 0;
}
.message-text {
max-width: 100%;
word-wrap: break-word;
margin-bottom: 0;
white-space: pre-line;
}
.message-md {
word-wrap: break-word;
margin-bottom: 0;
:deep(code) {
padding: 2px 4px;
border-radius: 4px;
background-color: var(--gray-100);
}
:deep(pre) {
padding: 12px;
border-radius: 8px;
background-color: var(--gray-100);
overflow-x: auto;
code {
padding: 0;
background-color: transparent;
}
}
}
.err-msg {
color: #eb8080;
border: 1px solid #eb8080;
padding: 0.5rem 1rem;
border-radius: 8px;
text-align: left;
background: #FFF5F5;
margin-bottom: 10px;
cursor: pointer;
}
.searching-msg {
color: var(--gray-500);
animation: colorPulse 2s infinite;
}
.reasoning-box {
margin-top: 10px;
margin-bottom: 15px;
border-radius: 8px;
border: 1px solid var(--main-light-3);
overflow: hidden;
:deep(.ant-collapse) {
background: white;
border: none;
}
:deep(.ant-collapse-item) {
border: none;
}
:deep(.ant-collapse-header) {
padding: 8px 12px;
background-color: var(--main-50);
font-size: 13px;
color: var(--main-700);
border-bottom: 1px solid var(--main-light-3);
}
.reasoning-content {
padding: 10px 12px;
font-size: 13px;
color: var(--gray-700);
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
background-color: white;
margin: 0;
}
}
.assistant-message {
width: 100%;
}
.status-info {
display: block;
background-color: var(--gray-50);
color: var(--gray-700);
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
font-size: 12px;
font-family: monospace;
max-height: 200px;
overflow-y: auto;
}
:deep(.tool-calls-container) {
width: 100%;
margin-top: 10px;
.tool-call-container {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
}
:deep(.tool-call-display) {
background-color: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(60, 60, 60, 0.05);
animation: fadeInUp 0.3s ease-out;
.tool-header {
padding: 10px 12px;
background-color: var(--gray-100);
font-size: 14px;
font-weight: 500;
color: var(--gray-800);
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
position: relative;
.anticon {
color: var(--main-600);
}
.step-badge {
margin-left: auto;
background-color: var(--gray-200);
color: var(--gray-700);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
}
.tool-content {
transition: all 0.3s ease;
.tool-params {
padding: 10px 12px;
background-color: var(--gray-50);
.tool-params-header {
background-color: var(--gray-100);
font-size: 13px;
color: var(--gray-800);
}
.tool-params-content {
margin: 0;
font-size: 13px;
background-color: var(--gray-100);
border-radius: 4px;
padding: 8px;
overflow-x: auto;
}
}
}
&.is-collapsed {
.tool-header {
border-bottom: none;
}
}
}
}
.loading-dots {
display: inline-flex;
align-items: center;
justify-content: center;
div {
width: 8px;
height: 8px;
margin: 0 4px;
background-color: var(--gray-700);
border-radius: 50%;
opacity: 0.3;
animation: pulse 0.5s infinite ease-in-out both;
&:nth-child(1) {
animation-delay: -0.32s;
}
&:nth-child(2) {
animation-delay: -0.16s;
}
}
}
@keyframes colorPulse {
0% { color: var(--gray-700); }
50% { color: var(--gray-300); }
100% { color: var(--gray-700); }
}
@keyframes pulse {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.3;
}
40% {
transform: scale(1);
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

5
web/src/components/MessageInputComponent.vue
View File

@ -108,7 +108,6 @@ const handleSend = () => {
flex-direction: column;
width: 100%;
height: auto;
max-width: 800px;
margin: 0 auto;
padding: 0.4rem 0.75rem;
border: 2px solid var(--gray-200);
@ -122,10 +121,6 @@ const handleSend = () => {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
&.wide-screen {
max-width: 1200px;
}
.input-area {
display: flex;
align-items: flex-end;

152
web/src/views/AgentView.vue
View File

@ -32,15 +32,21 @@
</div>
<div class="chat-box" ref="messagesContainer" :class="{ 'is-debug': options.debug_mode }">
<div
<MessageComponent
v-for="(message, index) in messages"
:key="index"
class="message-box"
:class="message.role">
<p v-if="message.role === 'user'" class="message-text">{{ message.content.trim() }}</p>
<div v-else-if="message.role === 'assistant'" class="assistant-message" @click="handleAssistantClick(message)">
<div v-if="options.debug_mode" class="status-info">{{ message }}</div>
<div v-if="message.content" v-html="renderMarkdown(message.content)" class="message-md"></div>
:role="message.role"
:content="message.content"
:content-html="message.content ? renderMarkdown(message.content) : ''"
:status="message.status"
:is-processing="isProcessing"
:error-message="message.message"
@retry="retryMessage(index)"
>
<div v-if="options.debug_mode" class="status-info">{{ message }}</div>
<!-- 工具调用 -->
<template #tool-calls>
<div v-if="message.toolCalls && Object.keys(message.toolCalls).length > 0" class="tool-calls-container">
<div v-for="(toolCall, index) in message.toolCalls || {}"
:key="index"
@ -77,16 +83,8 @@
</div>
</div>
</div>
<div v-else-if="isProcessing && (!message.content || message.content.length === 0)" class="loading-dots">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div v-else-if="message.status === 'error'" class="err-msg" @click="retryMessage(index)">
请求错误，请重试。{{ message.message }}
</div>
</div>
</template>
</MessageComponent>
</div>
<div class="bottom">
@ -160,6 +158,7 @@ import { onClickOutside } from '@vueuse/core';
import 'highlight.js/styles/github.css';
import hljs from 'highlight.js';
import MessageInputComponent from '@/components/MessageInputComponent.vue'
import MessageComponent from '@/components/MessageComponent.vue'
// ==================== 初始化配置 ====================
@ -506,7 +505,7 @@ const handleFinished = async () => {
lastAssistantMsg.content = '已完成';
}
// 更新状态为已完成
lastAssistantMsg.status = 'complete';
lastAssistantMsg.status = 'finished';
}
// 标记处理完成
@ -1002,103 +1001,6 @@ const toggleToolCall = (toolCallId) => {
display: flex;
flex-direction: column;
.message-box {
display: inline-block;
border-radius: 1.5rem;
margin: 0.8rem 0;
padding: 0.625rem 1.25rem;
user-select: text;
word-break: break-word;
font-size: 15px;
box-sizing: border-box;
color: black;
.reasoning-box {
margin-top: 10px;
margin-bottom: 15px;
border-radius: 8px;
border: 1px solid var(--main-light-3);
overflow: hidden;
.reasoning-header {
padding: 8px 12px;
background-color: var(--main-50);
font-size: 13px;
color: var(--main-700);
border-bottom: 1px solid var(--main-light-3);
display: flex;
align-items: center;
gap: 6px;
}
.reasoning-content {
padding: 10px 12px;
font-size: 13px;
color: var(--gray-700);
white-space: pre-wrap;
max-height: 200px;
overflow-y: auto;
background-color: white;
}
}
.tool-call-box {
margin: 10px 0 15px 0;
border-radius: 8px;
border: 1px solid var(--main-light-3);
overflow: hidden;
.tool-header {
padding: 8px 12px;
background-color: var(--gray-100);
font-size: 13px;
color: var(--gray-800);
border-bottom: 1px solid var(--gray-200);
display: flex;
align-items: center;
gap: 6px;
}
.tool-params {
padding: 8px 12px;
background-color: var(--gray-50);
.tool-params-content,
.tool-result-content,
.tool-params-content pre {
margin: 0;
font-size: 12px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
}
}
}
}
.message-box.user {
line-height: 24px;
max-width: 95%;
background: var(--main-light-4);
align-self: flex-end;
}
.message-box.assistant {
color: initial;
width: 100%;
text-align: left;
word-wrap: break-word;
margin: 0 0 16px 0;
padding-bottom: 0;
padding-top: 10px;
padding-left: 0;
padding-right: 0;
text-align: justify;
background-color: white;
border-radius: 12px;
position: relative;
}
.tool-calls-container {
width: 100%;
margin-top: 10px;
@ -1178,26 +1080,6 @@ const toggleToolCall = (toolCallId) => {
}
}
}
p.message-text {
max-width: 100%;
word-wrap: break-word;
margin-bottom: 0;
}
.err-msg {
color: #ff4d4f;
padding: 8px 12px;
background-color: #fff2f0;
border: 1px solid #ffccc7;
border-radius: 8px;
margin-top: 10px;
cursor: pointer;
&:hover {
background-color: #fff0ed;
}
}
}
.chat-box.is-debug {