style(AI): 优化聊天组件样式并添加全局样式类

- 在 chat.vue 中添加 .input-icon 和 .wh25 全局样式类
- 在 message.vue 中添加 .wh15 全局样式类
- 调整 sticky.vue 中工具箱模块的宽度
This commit is contained in:
陈昱达
2025-06-11 13:21:49 +08:00
parent bcfb90a4c7
commit 9769036058
3 changed files with 16 additions and 4 deletions

View File

@@ -44,8 +44,8 @@
</div>
<!-- 语音按钮按住说话 -->
<button @click="isVoiceMode = !isVoiceMode" class="mic-button ml10 mr10">
<svg-icon v-if="!isVoiceMode" icon-class="voice" class-name="chat-icon ml10" style="width: 25px; height: 25px"></svg-icon>
<span v-else style="font-size: 20px; color: #707070" class="ml15 mr5"></span>
<svg-icon v-if="!isVoiceMode" icon-class="voice" class-name="chat-icon ml10 wh25"></svg-icon>
<span v-else class="ml15 mr5 input-icon"></span>
</button>
<!-- 发送按钮 -->
<button @click="sendMessage" :disabled="messageStatus === 'send'" :class="{ disabled: messageStatus === 'send' }" class="mr10 fs16">发送</button>
@@ -332,6 +332,14 @@ export default {
$primary-color: #2e5ca9;
$primary-text-color: #f6aa21;
$primary-trans-color: rgba(135, 162, 208, 0.5);
.input-icon {
font-size: 20px;
color: #707070;
}
.wh25 {
width: 25px;
height: 25px;
}
.isVoiceModeText {
display: flex;
textarea {

View File

@@ -35,7 +35,7 @@
<svg-icon :icon-class="message.isLike ? 'fillLike' : 'like'" class-name="chat-icon"></svg-icon> 有用
</button>
<button @click="handleReaction(message, 'dislike')" class="dislike">
<svg-icon :icon-class="message.isDisLike ? 'fillDislike' : 'dislike'" style="width: 15px; height: 15px"></svg-icon>无用
<svg-icon :icon-class="message.isDisLike ? 'fillDislike' : 'dislike'" class-name="wh15"></svg-icon>无用
</button>
</div>
</div>
@@ -107,6 +107,10 @@ $primary-color: #2e5ca9; // 修复了 SCSS 变量的定义方式
$primary-text-color: #f6aa21; // 修复了 SCSS 变量的定义方式
$primary-trans-color: rgba(135, 162, 208, 0.5); // 使用rgba定义颜色透明度为0.8
.wh15 {
width: 15px;
height: 15px;
}
.message-item {
all: initial;
margin-bottom: 10px;

View File

@@ -22,7 +22,7 @@
</van-dropdown-item>
</van-dropdown-menu>
<!--工具箱或其他模块-->
<van-dropdown-menu active-color="#2e5ca9" :disabled="isDisabled" style="width: 50px">
<van-dropdown-menu active-color="#2e5ca9" :disabled="isDisabled" style="width: 12vw">
<template> </template>
<van-dropdown-item v-model="value2" :options="treasureList" @change="changeTreasureBox" :disabled="isDisabled" title-class="more-drown">
<template #title>