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

style: 更新 AgentMessageComponent 组件的加载指示器样式

Browse Source
This commit is contained in:
Wenjie Zhang 2025-06-27 01:53:45 +08:00
parent 105ade5273
commit dbd394843b
1 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
web/src/components/AgentMessageComponent.vue
View File

@ -33,12 +33,12 @@
<div v-if="toolCall" class="tool-call-display" :class="{ 'is-collapsed': !expandedToolCalls.has(toolCall.id) }"> <div v-if="toolCall" class="tool-call-display" :class="{ 'is-collapsed': !expandedToolCalls.has(toolCall.id) }">
<div class="tool-header" @click="toggleToolCall(toolCall.id)"> <div class="tool-header" @click="toggleToolCall(toolCall.id)">
<span v-if="!toolCall.tool_call_result"> <span v-if="!toolCall.tool_call_result">
<LoadingOutlined /> &nbsp; <span><Loader size="16" class="tool-loader rotate" /></span> &nbsp;
<span>正在调用工具: </span> <span>正在调用工具: </span>
<span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span>
</span> </span>
<span v-else> <span v-else>
<ThunderboltOutlined /> &nbsp; 工具 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> 执行完成 <span><CircleCheckBig size="16" class="tool-loader" /></span> &nbsp; 工具 <span class="tool-name">{{ toolCall.name || toolCall.function.name }}</span> 执行完成
</span> </span>
</div> </div>
<div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)"> <div class="tool-content" v-show="expandedToolCalls.has(toolCall.id)">
@ -83,6 +83,7 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { CaretRightOutlined, ThunderboltOutlined, LoadingOutlined } from '@ant-design/icons-vue'; import { CaretRightOutlined, ThunderboltOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import RefsComponent from '@/components/RefsComponent.vue' import RefsComponent from '@/components/RefsComponent.vue'
import { Loader, CircleCheckBig } from 'lucide-vue-next';
import { ToolResultRenderer } from '@/components/ToolCallingResult' import { ToolResultRenderer } from '@/components/ToolCallingResult'
@ -343,6 +344,7 @@ const toggleToolCall = (toolCallId) => {
user-select: none; user-select: none;
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
align-items: center;
&:hover { &:hover {
background-color: var(--gray-150); background-color: var(--gray-150);
@ -358,14 +360,19 @@ const toggleToolCall = (toolCallId) => {
color: var(--main-700); color: var(--main-700);
} }
.step-badge { span {
margin-left: auto; display: flex;
background-color: var(--gray-200); align-items: center;
color: var(--gray-700); gap: 4px;
padding: 2px 8px; }
border-radius: 12px;
font-size: 12px; .tool-loader {
font-weight: 500; margin-top: 2px;
color: var(--main-700);
}
.tool-loader.rotate {
animation: rotate 2s linear infinite;
} }
} }
@ -471,6 +478,15 @@ const toggleToolCall = (toolCallId) => {
transform: translateY(0); transform: translateY(0);
} }
} }
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style> </style>
<style lang="less"> <style lang="less">