feat(agent): 工具栏纯图标化 + AI回复模式选项加对应图标
- 移除 InputBox/ReplyBox/AiReplyModeSwitch 工具栏内 .tb-tip 文字气泡,按钮收敛为固定正方形,hover 提示保留 title 原生属性 - AiReplyModeSwitch popover 每个模式项前加对应图标(👤/👥/⏸️),ai-reply-mode.ts 的 AiReplyModeOption 新增 icon 字段 - 纯前端改动,未触碰后端与开关逻辑
This commit is contained in:
@@ -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,12 +63,15 @@
|
||||
class="ai-reply-mode-radio"
|
||||
>
|
||||
<div class="ai-reply-mode-radio-row">
|
||||
<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回复-关闭',
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user