scottpan/msh-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ai-nutritionist): emoji按钮替换为iconfont图标

Browse Source 
将消息操作按钮从emoji替换为项目iconfont图标：
- 复制：icon-fuzhi
- 重新生成：icon-shuaxin
- 语音朗读：icon-laba（播放中高亮）
- 删除：icon-shanchu

按钮样式优化：圆角方形背景、统一灰色调、hover反馈

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
msh-agent
2026-04-11 15:42:28 +08:00
parent dce899f655
commit 5b08211fa2
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
msh_single_uniapp/pages/tool/ai-nutritionist.vue
View File

@@ -88,19 +88,19 @@
>
<!-- 复制 -->
<view class="action-btn" @click="copyMessage(index)">
<text class="action-icon">📋</text>
<text class="iconfont icon-fuzhi action-icon"></text>
</view>
<!-- 重新生成（仅最后一条AI消息显示） -->
<view class="action-btn" v-if="isLastAiMessage(index)" @click="regenerateMessage(index)">
<text class="action-icon">🔄</text>
<text class="iconfont icon-shuaxin action-icon"></text>
</view>
<!-- 语音朗读 -->
<view class="action-btn" @click="ttsPlayingIndex === index ? stopTTS() : playTTS(index)">
<text class="action-icon">{{ ttsPlayingIndex === index ? '⏹' : '▶' }}</text>
<view class="action-btn" :class="{ 'action-btn-active': ttsPlayingIndex === index }" @click="ttsPlayingIndex === index ? stopTTS() : playTTS(index)">
<text class="iconfont icon-laba action-icon"></text>
</view>
<!-- 删除 -->
<view class="action-btn" @click="deleteMessage(index)">
<text class="action-icon">🗑️</text>
<text class="iconfont icon-shanchu action-icon"></text>
</view>
</view>
</view>
@@ -1137,8 +1137,8 @@ export default {
/* 消息操作按钮组 */
.msg-actions {
display: flex;
gap: 16rpx;
margin-top: 8rpx;
gap: 20rpx;
margin-top: 12rpx;
align-items: center;
}
@@ -1146,19 +1146,29 @@ export default {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48rpx;
height: 48rpx;
background: rgba(76, 175, 80, 0.12);
border-radius: 50%;
width: 52rpx;
height: 52rpx;
background: rgba(0, 0, 0, 0.04);
border-radius: 12rpx;
cursor: pointer;
transition: background 0.2s;
}
.action-btn:active {
transform: scale(0.9);
transform: scale(0.92);
background: rgba(0, 0, 0, 0.08);
}
.action-btn-active {
background: rgba(76, 175, 80, 0.15);
}
.action-icon {
font-size: 24rpx;
font-size: 28rpx;
color: #666;
}
.action-btn-active .action-icon {
color: #4caf50;
}