Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：加了用户自定义昵称

Browse Source
This commit is contained in:
jinhhanhan
2025-12-10 09:23:04 +08:00
parent 57a0bb9b5a
commit 179a9089b7
1 changed files with 862 additions and 715 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
components/ai-chat-message/ai-chat-message.vue
View File

@@ -27,6 +27,8 @@
<image :src="localUserAvatar" mode="aspectFill" />
</view>
<view class="message-content">
<!-- 新增：显示用户昵称 -->
<view class="message-nickname" v-if="localUserNickname">{{ localUserNickname }}</view>
<view class="message-bubble">
<text class="message-text">{{ message.content }}</text>
</view>
@@ -41,6 +43,8 @@
<image :src="aiAvatar" mode="aspectFill" />
</view>
<view class="message-content">
<!-- AI昵称固定，不可修改 -->
<view class="message-nickname">智能助手</view>
<view class="message-bubble">
<!-- 文本消息 -->
<view v-if="message.type === 'text'" class="text-content">
@@ -189,6 +193,10 @@
<button class="tool-btn" @click="openAvatarSelector">
<text class="iconfont icon-user">📷</text>
</button>
<!-- 新增：更换用户昵称按钮 -->
<button class="tool-btn" @click="openNicknameEditor">
<text class="iconfont icon-edit">✏️</text>
</button>
</view>
<view class="input-container">
@@ -311,6 +319,42 @@
</view>
</view>
</view>
<!-- 新增：昵称编辑弹窗 -->
<view v-if="showNicknameEditor" class="nickname-editor-popup">
<view class="nickname-editor-mask" @click="closeNicknameEditor"></view>
<view class="nickname-editor-panel">
<view class="nickname-editor-header">
<text>修改昵称</text>
<button class="close-btn" @click="closeNicknameEditor">
<text class="iconfont icon-close"></text>
</button>
</view>
<view class="nickname-editor-content">
<view class="nickname-input-container">
<input
v-model="tempNickname"
class="nickname-input"
placeholder="请输入您的新昵称"
:maxlength="12"
type="text" />
</view>
<view class="nickname-tip">昵称长度限制1-12个字符，仅自己可见</view>
<view class="nickname-editor-actions">
<button class="nickname-action-btn cancel" @click="closeNicknameEditor">
<text>取消</text>
</button>
<button
class="nickname-action-btn confirm"
:class="{ disabled: !tempNickname.trim() }"
:disabled="!tempNickname.trim()"
@click="saveNickname">
<text>保存</text>
</button>
</view>
</view>
</view>
</view>
</view>
</template>
@@ -334,6 +378,11 @@ export default {
type: String,
default: ''
},
// 初始用户昵称（外部传入，可选）
initUserNickname: {
type: String,
default: ''
},
// 是否显示加载更多
showLoadMore: {
type: Boolean,
@@ -380,6 +429,11 @@ export default {
defaultAvatar: '/static/images/default-avatar.png',
// 头像选择弹窗控制
showAvatarSelector: false,
// 新增：用户昵称相关
localUserNickname: '', // 当前用户昵称
defaultNickname: '我', // 默认昵称
showNicknameEditor: false, // 昵称编辑弹窗控制
tempNickname: '', // 昵称编辑临时值
// Dify API相关
currentConversationId: null,
isAIServiceAvailable: true,
@@ -392,6 +446,8 @@ export default {
this.initAudioContext()
// 初始化用户头像（缓存优先）
this.initUserAvatarData()
// 初始化用户昵称（缓存优先）
this.initUserNicknameData()
},
mounted() {
this.scrollToBottom()
@@ -436,6 +492,26 @@ export default {
}
},
// 新增：初始化用户昵称（支持缓存持久化）
initUserNicknameData() {
// 1. 优先读取本地缓存的昵称
const cachedNickname = uni.getStorageSync('user_nickname')
if (cachedNickname) {
this.localUserNickname = cachedNickname
}
// 2. 无缓存时，使用外部传入的初始昵称
else if (this.initUserNickname) {
this.localUserNickname = this.initUserNickname
// 缓存初始昵称
uni.setStorageSync('user_nickname', this.initUserNickname)
}
// 3. 最后使用默认昵称
else {
this.localUserNickname = this.defaultNickname
}
},
// 打开头像选择弹窗
openAvatarSelector() {
this.showAvatarSelector = true
@@ -504,6 +580,44 @@ export default {
})
},
// 新增：打开昵称编辑弹窗
openNicknameEditor() {
// 初始化临时昵称值为当前昵称
this.tempNickname = this.localUserNickname
this.showNicknameEditor = true
},
// 新增：关闭昵称编辑弹窗
closeNicknameEditor() {
this.showNicknameEditor = false
// 清空临时值
this.tempNickname = ''
},
// 新增：保存用户昵称
saveNickname() {
if (!this.tempNickname.trim()) return
// 1. 更新本地昵称
this.localUserNickname = this.tempNickname.trim()
// 2. 持久化缓存（支持页面刷新后保留）
uni.setStorageSync('user_nickname', this.localUserNickname)
// 3. 通知父组件（可选，用于同步到服务器等场景）
this.$emit('nickname-changed', this.localUserNickname)
// 4. 关闭弹窗
this.closeNicknameEditor()
// 5. 提示成功
uni.showToast({
title: '昵称修改成功',
icon: 'success',
duration: 1500
})
},
// 发送消息
async sendMessage() {
if (!this.inputText.trim()) return
@@ -1194,8 +1308,11 @@ $radius-lg: 36rpx;
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
text-align: right; // 与用户消息右对齐
letter-spacing: 0.5rpx;
// 用户昵称右对齐，AI昵称左对齐
&:not(.ai-message .message-nickname) {
text-align: right;
}
}
.message-bubble {
@@ -1836,17 +1953,21 @@ $radius-lg: 36rpx;
}
}
// 昵称编辑弹窗样式
.nickname-editor-popup {
// 昵称编辑弹窗样式（修复右侧溢出问题）
.nickname-editor-popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
}
}
.nickname-editor-mask {
.nickname-editor-mask {
position: absolute;
top: 0;
left: 0;
@@ -1854,26 +1975,28 @@ $radius-lg: 36rpx;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(6rpx);
}
}
.nickname-editor-panel {
.nickname-editor-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $bg-card;
border-radius: $radius-lg;
padding: 32rpx;
width: 580rpx;
padding: 24rpx 32rpx; // 统一内边距
width: calc(100% - 80rpx); // 限制弹窗宽度（避免超出屏幕）
max-width: 520rpx; // 最大宽度（适配不同设备）
box-shadow: 0 8rpx 36rpx rgba(0, 0, 0, 0.15);
box-sizing: border-box; // 确保内边距不影响宽度
.nickname-editor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32rpx;
margin-bottom: 24rpx;
border-bottom: 2rpx solid #f0f4f8;
padding-bottom: 24rpx;
padding-bottom: 16rpx;
text {
font-size: 34rpx;
@@ -1882,8 +2005,8 @@ $radius-lg: 36rpx;
}
.close-btn {
width: 64rpx;
height: 64rpx;
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: $bg-main;
display: flex;
@@ -1897,7 +2020,7 @@ $radius-lg: 36rpx;
}
.iconfont {
font-size: 34rpx;
font-size: 28rpx;
color: $color-text-light;
}
}
@@ -1906,6 +2029,8 @@ $radius-lg: 36rpx;
.nickname-editor-content {
.nickname-input-container {
margin-bottom: 24rpx;
width: 100%; // 输入框容器占满弹窗宽度
box-sizing: border-box;
.nickname-input {
width: 100%;
@@ -1917,6 +2042,8 @@ $radius-lg: 36rpx;
color: $color-text;
background-color: $bg-main;
transition: all 0.2s ease;
box-shadow: none;
box-sizing: border-box; // 确保输入框不超出容器
&:focus {
border-color: $color-primary;
@@ -1935,27 +2062,48 @@ $radius-lg: 36rpx;
color: $color-text-light;
margin-bottom: 32rpx;
text-align: center;
width: 100%;
box-sizing: border-box;
}
.nickname-editor-actions {
display: flex;
gap: 24rpx;
width: 100%;
box-sizing: border-box;
justify-content: center;
padding: 0 20rpx;
.nickname-action-btn {
flex: 1;
flex: none;
width: 160rpx;
height: 96rpx;
border-radius: $radius-lg;
font-size: 28rpx;
font-weight: 500;
transition: all 0.2s ease;
box-sizing: border-box;
// 核心：文字下移 + 垂直居中
padding-top: 12rpx; // 顶部内边距增加，文字下移
padding-bottom: 0;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
// hover动效：文字轻微上移
&:hover {
padding-top: 8rpx;
}
&.cancel {
background-color: $bg-card;
border: 2rpx solid #f0f4f8;
color: $color-text-light;
// 修复：替换未定义的 $f8fafc 为已定义的 $bg-main
&:hover {
background-color: #f8fafc;
background-color: $bg-main;
}
}
@@ -1980,7 +2128,6 @@ $radius-lg: 36rpx;
}
}
}
/* 弹窗样式基础 */
.tools-popup, .voice-popup, .avatar-selector-popup {
position: fixed;
@@ -2568,4 +2715,4 @@ $radius-lg: 36rpx;
}
}
}
</style>
</style>