feat(agent): 工具栏纯图标化 + AI回复模式选项加对应图标

- 移除 InputBox/ReplyBox/AiReplyModeSwitch 工具栏内 .tb-tip 文字气泡,按钮收敛为固定正方形,hover 提示保留 title 原生属性

- AiReplyModeSwitch popover 每个模式项前加对应图标(👤/👥/⏸️),ai-reply-mode.ts 的 AiReplyModeOption 新增 icon 字段

- 纯前端改动,未触碰后端与开关逻辑
This commit is contained in:
Simon
2026-08-08 21:59:57 +08:00
parent bdc5a3be50
commit b80ebf1d7c
4 changed files with 29 additions and 67 deletions
@@ -29,13 +29,11 @@
<!-- 截图功能 - 放在最前面 -->
<button class="tb-btn" title="截图" @click="handleToolbarClick('screenshot')">
📷
<span class="tb-tip">截图</span>
</button>
<div class="emoji-wrapper">
<button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker">
😊
<span class="tb-tip">表情</span>
</button>
<!-- 自定义中文表情选择面板 -->
<div v-if="showEmojiPicker" class="emoji-picker-popup">
@@ -53,20 +51,16 @@
<button class="tb-btn" title="文件" @click="handleToolbarClick('file')">
📎
<span class="tb-tip">文件</span>
</button>
<button class="tb-btn" title="语音" @click="handleToolbarClick('voice')">
🎤
<span class="tb-tip">语音</span>
</button>
<div class="tb-sep"></div>
<button class="tb-btn" title="快速回复" @click="handleToolbarClick('quickReply')">
<span class="tb-tip">快速回复</span>
</button>
<button class="tb-btn" title="发名片" @click="handleToolbarClick('contactCard')">
👤
<span class="tb-tip">发名片</span>
</button>
</div>
@@ -846,7 +840,7 @@ function onInviteSuccess(): void {
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--radius);
@@ -862,25 +856,6 @@ function onInviteSuccess(): void {
color: var(--accent);
}
.tb-tip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;
background: var(--text-primary);
color: var(--bg-secondary);
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
}
.tb-btn:hover .tb-tip {
display: block;
}
.tb-sep {
width: 1px;
@@ -43,12 +43,10 @@
<!-- 截图按钮 -->
<button class="tb-btn" title="截图" @click="handleScreenshot">
<span class="tb-tip">截图</span>
</button>
<!-- 拍照按钮 -->
<button class="tb-btn" title="拍照" @click="handleCamera">
📷
<span class="tb-tip">拍照</span>
</button>
<div class="tb-sep"></div>
@@ -56,7 +54,6 @@
<div class="emoji-wrapper">
<button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker">
😊
<span class="tb-tip">表情</span>
</button>
<!-- 自定义中文表情选择面板8x8 网格64个常用表情 -->
<div v-if="showEmojiPicker" class="emoji-picker-popup">
@@ -75,14 +72,12 @@
<button class="tb-btn" title="文件" @click="handleToolbarClick('file')">
📎
<span class="tb-tip">文件</span>
</button>
<div class="tb-sep"></div>
<button class="tb-btn" title="邀请员工/部门" @click="showInviteDialog = true">
👥
<span class="tb-tip">邀请</span>
</button>
</div>
@@ -1420,7 +1415,7 @@ defineExpose({
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--radius);
@@ -1438,35 +1433,6 @@ defineExpose({
transform: scale(0.92);
}
/* 工具提示气泡 */
.tb-tip {
display: none;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 6px;
background: var(--text-primary);
color: var(--bg-secondary);
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
box-shadow: var(--shadow);
}
.tb-tip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--text-primary);
}
.tb-btn:hover .tb-tip {
display: block;
}
/* 工具栏分隔线 */
.tb-sep {
@@ -40,7 +40,6 @@
@click.stop
>
<span class="ai-reply-mode-icon">🤖</span>
<span class="tb-tip">{{ buttonTitle }}</span>
</button>
</template>
@@ -64,11 +63,14 @@
class="ai-reply-mode-radio"
>
<div class="ai-reply-mode-radio-row">
<span class="ai-reply-mode-radio-label">
{{ opt.label }}
<span v-if="opt.isDefault" class="ai-reply-mode-radio-default">默认</span>
</span>
<span class="ai-reply-mode-radio-desc">{{ opt.desc }}</span>
<span class="ai-reply-mode-radio-icon">{{ opt.icon }}</span>
<div class="ai-reply-mode-radio-text">
<span class="ai-reply-mode-radio-label">
{{ opt.label }}
<span v-if="opt.isDefault" class="ai-reply-mode-radio-default">默认</span>
</span>
<span class="ai-reply-mode-radio-desc">{{ opt.desc }}</span>
</div>
</div>
</el-radio>
</el-radio-group>
@@ -328,9 +330,23 @@ defineExpose({ DEFAULT: DEFAULT_AI_REPLY_MODE })
}
.ai-reply-mode-radio-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.ai-reply-mode-radio-icon {
font-size: 18px;
line-height: 1;
flex-shrink: 0;
}
.ai-reply-mode-radio-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ai-reply-mode-radio-label {
@@ -26,6 +26,8 @@ export interface AiReplyModeOption {
label: string
/** 副标题描述 */
desc: string
/** 单选项左侧显示的图标(emoji,与全站工具栏图标风格一致) */
icon: string
/** 切换成功的 ElMessage 提示 */
successMessage: string
/** 是否标记为「默认」标签 */
@@ -37,6 +39,7 @@ export const AI_REPLY_MODE_OPTIONS: readonly AiReplyModeOption[] = [
{
value: 'employee_only',
label: '仅回复员工',
icon: '👤',
desc: 'AI 只回复员工,与现状一致',
successMessage: '已切换为:AI回复-仅员工',
isDefault: true,
@@ -44,12 +47,14 @@ export const AI_REPLY_MODE_OPTIONS: readonly AiReplyModeOption[] = [
{
value: 'employee_and_agent',
label: '回复员工 + 推送坐席',
icon: '👥',
desc: 'AI 回复员工,坐席端同步可见',
successMessage: '已切换为:AI回复-员工+坐席',
},
{
value: 'off',
label: '关闭自动回复',
icon: '⏸️',
desc: 'AI 不再自动回复任何消息',
successMessage: '已切换为:AI回复-关闭',
},