icrypto/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2025-05-11 16:26:44 +08:00
parent efed9c541e
commit 1a70447b53
1 changed files with 82 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/AIAgentView.vue
View File

@ -387,6 +387,12 @@ const getIconPath = (agent: Agent) => {
return '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line"/>'
}
}
// 在 script 部分修改获取首字母的函数
const getInitial = (nickname: string) => {
if (!nickname) return '?'
return nickname.trim()[0].toUpperCase()
}
</script>
<template>
@ -427,6 +433,25 @@ const getIconPath = (agent: Agent) => {
: 'ai-message',
]"
>
<div v-if="message.role === 'assistant'" class="avatar">
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
></path>
<polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
<line x1="12" y1="22.08" x2="12" y2="12"></line>
</svg>
</div>
<div v-if="message.role === 'user'" class="avatar user-avatar">
{{ getInitial(userStore.userInfo?.nickname || '') }}
</div>
<div
class="message-content"
:class="{
@ -690,6 +715,7 @@ const getIconPath = (agent: Agent) => {
justify-content: flex-end;
width: 100%;
display: flex;
gap: 12px;
}
.ai-message,
@ -697,6 +723,35 @@ const getIconPath = (agent: Agent) => {
justify-content: flex-start;
width: 100%;
display: flex;
gap: 12px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
}
.user-message .avatar {
order: 1;
background-color: var(--color-accent);
border: none;
}
.user-message .avatar svg {
color: white;
}
.avatar svg {
width: 24px;
height: 24px;
color: var(--color-accent);
}
.message {
@ -739,14 +794,14 @@ const getIconPath = (agent: Agent) => {
.user-message .message-content {
background-color: var(--color-accent);
color: white;
border-radius: 1rem 1rem 0 1rem;
border-radius: 1rem 0 1rem 1rem;
padding: 1.25rem;
}
.ai-message .message-content {
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border-radius: 1rem 1rem 1rem 0;
border-radius: 0 1rem 1rem 1rem;
border: 1px solid var(--color-border);
padding: 1.25rem;
margin-top: 0.5rem;
@ -779,6 +834,16 @@ const getIconPath = (agent: Agent) => {
max-width: 90%;
}
.avatar {
width: 32px;
height: 32px;
}
.avatar svg {
width: 20px;
height: 20px;
}
.thought-message .message-content {
max-width: 85%;
font-size: 0.9rem;
@ -1240,4 +1305,19 @@ const getIconPath = (agent: Agent) => {
opacity: 0;
}
}
/* 调整用户头像样式以更好地显示中文字符 */
.user-avatar {
font-size: 1.1rem;
font-weight: 500;
color: white;
background-color: var(--color-accent);
border: none;
}
@media (max-width: 768px) {
.user-avatar {
font-size: 1rem;
}
}
</style>