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')"> <button class="tb-btn" title="截图" @click="handleToolbarClick('screenshot')">
📷 📷
<span class="tb-tip">截图</span>
</button> </button>
<div class="emoji-wrapper"> <div class="emoji-wrapper">
<button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker"> <button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker">
😊 😊
<span class="tb-tip">表情</span>
</button> </button>
<!-- 自定义中文表情选择面板 --> <!-- 自定义中文表情选择面板 -->
<div v-if="showEmojiPicker" class="emoji-picker-popup"> <div v-if="showEmojiPicker" class="emoji-picker-popup">
@@ -53,20 +51,16 @@
<button class="tb-btn" title="文件" @click="handleToolbarClick('file')"> <button class="tb-btn" title="文件" @click="handleToolbarClick('file')">
📎 📎
<span class="tb-tip">文件</span>
</button> </button>
<button class="tb-btn" title="语音" @click="handleToolbarClick('voice')"> <button class="tb-btn" title="语音" @click="handleToolbarClick('voice')">
🎤 🎤
<span class="tb-tip">语音</span>
</button> </button>
<div class="tb-sep"></div> <div class="tb-sep"></div>
<button class="tb-btn" title="快速回复" @click="handleToolbarClick('quickReply')"> <button class="tb-btn" title="快速回复" @click="handleToolbarClick('quickReply')">
<span class="tb-tip">快速回复</span>
</button> </button>
<button class="tb-btn" title="发名片" @click="handleToolbarClick('contactCard')"> <button class="tb-btn" title="发名片" @click="handleToolbarClick('contactCard')">
👤 👤
<span class="tb-tip">发名片</span>
</button> </button>
</div> </div>
@@ -846,7 +840,7 @@ function onInviteSuccess(): void {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 32px;
height: 28px; height: 32px;
border: none; border: none;
background: transparent; background: transparent;
border-radius: var(--radius); border-radius: var(--radius);
@@ -862,25 +856,6 @@ function onInviteSuccess(): void {
color: var(--accent); 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 { .tb-sep {
width: 1px; width: 1px;
@@ -43,12 +43,10 @@
<!-- 截图按钮 --> <!-- 截图按钮 -->
<button class="tb-btn" title="截图" @click="handleScreenshot"> <button class="tb-btn" title="截图" @click="handleScreenshot">
<span class="tb-tip">截图</span>
</button> </button>
<!-- 拍照按钮 --> <!-- 拍照按钮 -->
<button class="tb-btn" title="拍照" @click="handleCamera"> <button class="tb-btn" title="拍照" @click="handleCamera">
📷 📷
<span class="tb-tip">拍照</span>
</button> </button>
<div class="tb-sep"></div> <div class="tb-sep"></div>
@@ -56,7 +54,6 @@
<div class="emoji-wrapper"> <div class="emoji-wrapper">
<button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker"> <button class="tb-btn" title="表情" @click="showEmojiPicker = !showEmojiPicker">
😊 😊
<span class="tb-tip">表情</span>
</button> </button>
<!-- 自定义中文表情选择面板8x8 网格64个常用表情 --> <!-- 自定义中文表情选择面板8x8 网格64个常用表情 -->
<div v-if="showEmojiPicker" class="emoji-picker-popup"> <div v-if="showEmojiPicker" class="emoji-picker-popup">
@@ -75,14 +72,12 @@
<button class="tb-btn" title="文件" @click="handleToolbarClick('file')"> <button class="tb-btn" title="文件" @click="handleToolbarClick('file')">
📎 📎
<span class="tb-tip">文件</span>
</button> </button>
<div class="tb-sep"></div> <div class="tb-sep"></div>
<button class="tb-btn" title="邀请员工/部门" @click="showInviteDialog = true"> <button class="tb-btn" title="邀请员工/部门" @click="showInviteDialog = true">
👥 👥
<span class="tb-tip">邀请</span>
</button> </button>
</div> </div>
@@ -1420,7 +1415,7 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 32px;
height: 28px; height: 32px;
border: none; border: none;
background: transparent; background: transparent;
border-radius: var(--radius); border-radius: var(--radius);
@@ -1438,35 +1433,6 @@ defineExpose({
transform: scale(0.92); 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 { .tb-sep {
@@ -40,7 +40,6 @@
@click.stop @click.stop
> >
<span class="ai-reply-mode-icon">🤖</span> <span class="ai-reply-mode-icon">🤖</span>
<span class="tb-tip">{{ buttonTitle }}</span>
</button> </button>
</template> </template>
@@ -64,11 +63,14 @@
class="ai-reply-mode-radio" class="ai-reply-mode-radio"
> >
<div class="ai-reply-mode-radio-row"> <div class="ai-reply-mode-radio-row">
<span class="ai-reply-mode-radio-label"> <span class="ai-reply-mode-radio-icon">{{ opt.icon }}</span>
{{ opt.label }} <div class="ai-reply-mode-radio-text">
<span v-if="opt.isDefault" class="ai-reply-mode-radio-default">默认</span> <span class="ai-reply-mode-radio-label">
</span> {{ opt.label }}
<span class="ai-reply-mode-radio-desc">{{ opt.desc }}</span> <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> </div>
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
@@ -328,9 +330,23 @@ defineExpose({ DEFAULT: DEFAULT_AI_REPLY_MODE })
} }
.ai-reply-mode-radio-row { .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; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
min-width: 0;
} }
.ai-reply-mode-radio-label { .ai-reply-mode-radio-label {
@@ -26,6 +26,8 @@ export interface AiReplyModeOption {
label: string label: string
/** 副标题描述 */ /** 副标题描述 */
desc: string desc: string
/** 单选项左侧显示的图标(emoji,与全站工具栏图标风格一致) */
icon: string
/** 切换成功的 ElMessage 提示 */ /** 切换成功的 ElMessage 提示 */
successMessage: string successMessage: string
/** 是否标记为「默认」标签 */ /** 是否标记为「默认」标签 */
@@ -37,6 +39,7 @@ export const AI_REPLY_MODE_OPTIONS: readonly AiReplyModeOption[] = [
{ {
value: 'employee_only', value: 'employee_only',
label: '仅回复员工', label: '仅回复员工',
icon: '👤',
desc: 'AI 只回复员工,与现状一致', desc: 'AI 只回复员工,与现状一致',
successMessage: '已切换为:AI回复-仅员工', successMessage: '已切换为:AI回复-仅员工',
isDefault: true, isDefault: true,
@@ -44,12 +47,14 @@ export const AI_REPLY_MODE_OPTIONS: readonly AiReplyModeOption[] = [
{ {
value: 'employee_and_agent', value: 'employee_and_agent',
label: '回复员工 + 推送坐席', label: '回复员工 + 推送坐席',
icon: '👥',
desc: 'AI 回复员工,坐席端同步可见', desc: 'AI 回复员工,坐席端同步可见',
successMessage: '已切换为:AI回复-员工+坐席', successMessage: '已切换为:AI回复-员工+坐席',
}, },
{ {
value: 'off', value: 'off',
label: '关闭自动回复', label: '关闭自动回复',
icon: '⏸️',
desc: 'AI 不再自动回复任何消息', desc: 'AI 不再自动回复任何消息',
successMessage: '已切换为:AI回复-关闭', successMessage: '已切换为:AI回复-关闭',
}, },