feat: 优化界面样式
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="chat-container">
|
||||
<view class="chat-container" :style="{ paddingTop: navBarHeight + 'px', paddingBottom: `calc(200rpx + ${keyboardHeight}px)` }">
|
||||
<!-- 夜空装饰背景 -->
|
||||
<view class="night-sky-decoration">
|
||||
<view class="star star-1"></view>
|
||||
@@ -13,19 +13,21 @@
|
||||
</view>
|
||||
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="navbar-left">
|
||||
<view v-if="showBackButton" @tap="goBack" class="left-btn">
|
||||
<text class="back-icon">←</text>
|
||||
<text class="back-text">返回</text>
|
||||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="navbar-content">
|
||||
<view class="navbar-left">
|
||||
<view v-if="showBackButton" @tap="goBack" class="left-btn">
|
||||
<text class="back-icon">←</text>
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<text class="clear-btn" @tap="clearContext">清空</text>
|
||||
</view>
|
||||
<view class="navbar-center" :class="{'centered': !showBackButton}">
|
||||
<image class="character-avatar" :src="processedAvatar" mode="aspectFill" />
|
||||
<text class="character-name">{{ currentCharacter.name }}</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
</view>
|
||||
<text class="clear-btn" @tap="clearContext">清空</text>
|
||||
</view>
|
||||
<view class="navbar-center" :class="{'centered': !showBackButton}">
|
||||
<image class="character-avatar" :src="processedAvatar" mode="aspectFill" />
|
||||
<text class="character-name">{{ currentCharacter.name }}</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -94,7 +96,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 输入区域 - 使用 Ant Design X Sender 风格 -->
|
||||
<view class="input-area">
|
||||
<view class="input-area" :style="{ bottom: keyboardHeight + 'px' }">
|
||||
<!-- 智能体选择按钮 -->
|
||||
<!-- <view class="action-bar" v-if="availableTemplates.length > 0">
|
||||
<view class="template-selector-btn" @click="showTemplateSelector">
|
||||
@@ -115,6 +117,9 @@
|
||||
@confirm="sendMessage"
|
||||
confirm-type="send"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
:adjust-position="false"
|
||||
:hold-keyboard="false"
|
||||
/>
|
||||
|
||||
<view class="input-actions">
|
||||
@@ -221,7 +226,7 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({
|
||||
modelId: 10,
|
||||
templateId: 6,
|
||||
templateId: 9999,
|
||||
ttsId: null,
|
||||
sttId: null,
|
||||
temperature: 0.7,
|
||||
@@ -253,6 +258,11 @@ const conversationId = ref(null);
|
||||
const isLoading = ref(false);
|
||||
const isLoggedIn = ref(false);
|
||||
const showBackButton = computed(() => props.uiConfig.showBackButton);
|
||||
const keyboardHeight = ref(0); // 键盘高度
|
||||
|
||||
// 状态栏高度适配
|
||||
const statusBarHeight = ref(0);
|
||||
const navBarHeight = ref(0);
|
||||
|
||||
// 录音相关
|
||||
const isRecordingMode = ref(false);
|
||||
@@ -323,9 +333,34 @@ watch(() => props.characterConfig, async (newConfig) => {
|
||||
}
|
||||
}, { immediate: true, deep: true });
|
||||
|
||||
// 获取系统状态栏高度
|
||||
const getSystemInfo = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
||||
// 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
|
||||
navBarHeight.value = statusBarHeight.value + 44;
|
||||
console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getSystemInfo(); // 获取系统信息
|
||||
checkLoginStatus(); // 检查登录状态
|
||||
initRecorder(); // 初始化录音器
|
||||
|
||||
// 监听键盘高度变化
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.onKeyboardHeightChange((res) => {
|
||||
console.log('键盘高度变化:', res.height);
|
||||
keyboardHeight.value = res.height;
|
||||
|
||||
// 键盘弹出时，延迟滚动到底部
|
||||
if (res.height > 0) {
|
||||
setTimeout(() => {
|
||||
scrollToBottom();
|
||||
}, 350); // 等待过渡动画完成
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
});
|
||||
|
||||
// 加载AI配置
|
||||
@@ -588,7 +623,7 @@ const getAIResponse = async (userMessage) => {
|
||||
characterId: currentCharacter.value.id,
|
||||
conversationId: conversationId.value,
|
||||
modelId: 10,
|
||||
templateId: 6
|
||||
templateId: 9999
|
||||
};
|
||||
|
||||
if (currentCharacter.value.roleId) {
|
||||
@@ -909,8 +944,21 @@ const selectTemplate = (template) => {
|
||||
};
|
||||
|
||||
// 处理输入框聚焦
|
||||
const handleInputFocus = () => {
|
||||
console.log('输入框获得焦点');
|
||||
const handleInputFocus = (e) => {
|
||||
console.log('输入框获得焦点', e);
|
||||
// 在小程序中，通过 detail.height 获取键盘高度
|
||||
if (e && e.detail && e.detail.height) {
|
||||
keyboardHeight.value = e.detail.height;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理输入框失焦
|
||||
const handleInputBlur = (e) => {
|
||||
console.log('输入框失去焦点', e);
|
||||
// 延迟重置键盘高度，避免闪烁
|
||||
setTimeout(() => {
|
||||
keyboardHeight.value = 0;
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 返回
|
||||
@@ -977,13 +1025,17 @@ const clearContext = async () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
<!-- 非 scoped 样式：影响页面根元素，防止键盘弹出时页面被推上去 -->
|
||||
<style>
|
||||
page {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
/* 页面容器 */
|
||||
|
||||
.chat-container {
|
||||
width: 100vw;
|
||||
@@ -995,8 +1047,8 @@ page {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-top: calc(100rpx + env(safe-area-inset-top));
|
||||
padding-bottom: 200rpx;
|
||||
transition: padding-bottom 0.3s ease;
|
||||
}
|
||||
|
||||
/* 夜空装饰 */
|
||||
@@ -1034,23 +1086,26 @@ page {
|
||||
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
|
||||
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
|
||||
|
||||
/* 导航栏 */
|
||||
/* 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(26, 11, 46, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 32rpx;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
@@ -1140,7 +1195,7 @@ page {
|
||||
|
||||
/* 聊天消息区域 */
|
||||
.chat-messages {
|
||||
height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 24rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@@ -1329,6 +1384,7 @@ page {
|
||||
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
transition: bottom 0.3s ease;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
|
||||
@@ -18,6 +18,12 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chat/chat-box",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/role-chat/role-chat",
|
||||
"style": {
|
||||
@@ -111,7 +117,7 @@
|
||||
"text": "设备"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/chat/chat",
|
||||
"pagePath": "pages/chat/chat-box",
|
||||
"text": "专属"
|
||||
},
|
||||
{
|
||||
|
||||
138
src/pages/chat/chat-box.vue
Normal file
138
src/pages/chat/chat-box.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<ChatBox
|
||||
:character-config="characterConfig"
|
||||
:ai-config="aiConfig"
|
||||
:ui-config="uiConfig"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import ChatBox from '@/components/ChatBox.vue';
|
||||
import { getCharacterById } from '@/utils/aiCharacters.js';
|
||||
|
||||
// 角色配置
|
||||
const characterConfig = ref({});
|
||||
|
||||
// AI 配置
|
||||
const aiConfig = ref({
|
||||
modelId: 10,
|
||||
templateId: 9999
|
||||
});
|
||||
|
||||
// UI 配置
|
||||
const uiConfig = ref({
|
||||
showBackButton: false // 默认不显示返回按钮
|
||||
});
|
||||
|
||||
// 初始化：解析 URL 参数
|
||||
onMounted(() => {
|
||||
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const options = currentPage.options || {};
|
||||
|
||||
// 判断是否需要显示返回按钮
|
||||
if (options.characterId || options.roleId) {
|
||||
uiConfig.value.showBackButton = true;
|
||||
}
|
||||
|
||||
// 场景1: 蔚AI（characterId === 'wei-ai' 或无参数）
|
||||
if (options.characterId === 'wei-ai' || !options.characterId) {
|
||||
characterConfig.value = {
|
||||
id: 'wei-ai',
|
||||
roleId: null,
|
||||
name: options.characterName || '蔚AI',
|
||||
avatar: options.characterAvatar || '/file/avatar/2025/11/09/ccfc630120114984b9f2d6e4990f5cd8.jpg',
|
||||
greeting: options.introMessage ? decodeURIComponent(options.introMessage) : '你好！我是你的虚拟女友！',
|
||||
roleDesc: ''
|
||||
};
|
||||
|
||||
// 蔚AI 使用固定的 AI 配置
|
||||
aiConfig.value = {
|
||||
modelId: 10,
|
||||
templateId: 9999,
|
||||
ttsId: null,
|
||||
sttId: null,
|
||||
temperature: 0.7,
|
||||
topP: 0.9
|
||||
};
|
||||
}
|
||||
// 场景2: AI角色（有 roleId 参数）
|
||||
else if (options.roleId) {
|
||||
characterConfig.value = {
|
||||
id: options.characterId || '',
|
||||
roleId: options.roleId,
|
||||
name: decodeURIComponent(options.roleName || 'AI角色'),
|
||||
avatar: decodeURIComponent(options.avatar || '/static/logo.png'),
|
||||
greeting: decodeURIComponent(options.greeting || '你好！很高兴认识你！'),
|
||||
roleDesc: decodeURIComponent(options.roleDesc || '')
|
||||
};
|
||||
debugger
|
||||
// AI角色使用自定义配置
|
||||
aiConfig.value = {
|
||||
modelId: options.modelId ? parseInt(options.modelId) : 10,
|
||||
templateId: options.templateId ? parseInt(options.templateId) : (options.roleId ? parseInt(options.roleId) : 6),
|
||||
ttsId: options.ttsId || null,
|
||||
sttId: options.sttId || null,
|
||||
temperature: options.temperature ? parseFloat(options.temperature) : 0.7,
|
||||
topP: options.topP ? parseFloat(options.topP) : 0.9
|
||||
};
|
||||
}
|
||||
// 场景3: 默认角色（从 aiCharacters.js 获取）
|
||||
else {
|
||||
const characterId = options.characterId || 5;
|
||||
const character = getCharacterById(characterId);
|
||||
|
||||
if (character) {
|
||||
characterConfig.value = {
|
||||
id: character.id,
|
||||
roleId: null,
|
||||
name: character.name,
|
||||
avatar: character.avatar,
|
||||
greeting: character.greeting,
|
||||
roleDesc: character.description || ''
|
||||
};
|
||||
|
||||
// 默认角色使用固定的 AI 配置
|
||||
aiConfig.value = {
|
||||
modelId: 10,
|
||||
templateId: 9999,
|
||||
ttsId: null,
|
||||
sttId: null,
|
||||
temperature: 0.7,
|
||||
topP: 0.9
|
||||
};
|
||||
} else {
|
||||
// 兜底：如果找不到角色，使用蔚AI
|
||||
characterConfig.value = {
|
||||
id: 'wei-ai',
|
||||
roleId: null,
|
||||
name: '蔚AI',
|
||||
avatar: '/static/avatar/icon_hushi.jpg',
|
||||
greeting: '你好！我是蔚AI，很高兴为您服务！',
|
||||
roleDesc: ''
|
||||
};
|
||||
|
||||
aiConfig.value = {
|
||||
modelId: 10,
|
||||
templateId: 9999,
|
||||
ttsId: null,
|
||||
sttId: null,
|
||||
temperature: 0.7,
|
||||
topP: 0.9
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
console.log('chat-box 页面初始化完成:', {
|
||||
characterConfig: characterConfig.value,
|
||||
aiConfig: aiConfig.value,
|
||||
uiConfig: uiConfig.value
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 无需额外样式，所有样式在 ChatBox 组件中 */
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="chat-container">
|
||||
<view class="chat-container" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<!-- 夜空装饰背景 -->
|
||||
<view class="night-sky-decoration">
|
||||
<view class="star star-1"></view>
|
||||
@@ -13,19 +13,21 @@
|
||||
</view>
|
||||
|
||||
<!-- 自定义导航栏 -->
|
||||
<view class="custom-navbar">
|
||||
<view class="navbar-left">
|
||||
<view v-if="showBackButton" @tap="goBack" class="left-btn">
|
||||
<text class="back-icon">←</text>
|
||||
<text class="back-text">返回</text>
|
||||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="navbar-content">
|
||||
<view class="navbar-left">
|
||||
<view v-if="showBackButton" @tap="goBack" class="left-btn">
|
||||
<text class="back-icon">←</text>
|
||||
<text class="back-text">返回</text>
|
||||
</view>
|
||||
<text class="clear-btn" @tap="clearContext">清空</text>
|
||||
</view>
|
||||
<view class="navbar-center" :class="{'centered': !showBackButton}">
|
||||
<image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
|
||||
<text class="character-name">{{ currentCharacter.name }}</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
</view>
|
||||
<text class="clear-btn" @tap="clearContext">清空</text>
|
||||
</view>
|
||||
<view class="navbar-center" :class="{'centered': !showBackButton}">
|
||||
<image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
|
||||
<text class="character-name">{{ currentCharacter.name }}</text>
|
||||
</view>
|
||||
<view class="navbar-right">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -216,6 +218,10 @@ const isLoading = ref(false);
|
||||
const isLoggedIn = ref(false);
|
||||
const showBackButton = ref(true);
|
||||
|
||||
// 状态栏高度适配
|
||||
const statusBarHeight = ref(0);
|
||||
const navBarHeight = ref(0);
|
||||
|
||||
// 录音相关
|
||||
const isRecordingMode = ref(false);
|
||||
const isActuallyRecording = ref(false);
|
||||
@@ -237,8 +243,18 @@ const currentTemplateName = computed(() => {
|
||||
return template?.templateName || '默认智能体';
|
||||
});
|
||||
|
||||
// 获取系统状态栏高度
|
||||
const getSystemInfo = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
||||
// 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
|
||||
navBarHeight.value = statusBarHeight.value + 44;
|
||||
console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getSystemInfo(); // 获取系统信息
|
||||
initPage();
|
||||
initRecorder();
|
||||
});
|
||||
@@ -1015,7 +1031,6 @@ page {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
padding-top: calc(100rpx + env(safe-area-inset-top));
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
@@ -1054,23 +1069,26 @@ page {
|
||||
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
|
||||
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
|
||||
|
||||
/* 导航栏 */
|
||||
/* 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(26, 11, 46, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 32rpx;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
@@ -1161,7 +1179,7 @@ page {
|
||||
|
||||
/* 聊天消息区域 */
|
||||
.chat-messages {
|
||||
height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
|
||||
height: calc(100vh - 200rpx);
|
||||
padding: 24rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -13,16 +13,18 @@
|
||||
</view>
|
||||
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view class="custom-navbar fixed-navbar">
|
||||
<view class="navbar-stars">
|
||||
<view class="navbar-star star-left"></view>
|
||||
<view class="navbar-star star-right"></view>
|
||||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="navbar-content">
|
||||
<view class="navbar-stars">
|
||||
<view class="navbar-star star-left"></view>
|
||||
<view class="navbar-star star-right"></view>
|
||||
</view>
|
||||
<view class="navbar-title">我的设备</view>
|
||||
</view>
|
||||
<text class="navbar-title">我的设备</text>
|
||||
</view>
|
||||
|
||||
<!-- 设备信息卡片 -->
|
||||
<view class="device-card">
|
||||
<view class="device-card" :style="{ marginTop: navBarHeight + 14 + 'px' }">
|
||||
<view class="device-header">
|
||||
<view class="device-icon" :class="{'connected': deviceConnected}">
|
||||
{{ deviceConnected ? '🌟' : '⭕' }}
|
||||
@@ -116,8 +118,22 @@ const deviceSN = ref('未连接');
|
||||
const deviceId = ref('30:ed:a0:12:99:60');
|
||||
const connectTime = ref('');
|
||||
|
||||
// 状态栏高度适配
|
||||
const statusBarHeight = ref(0);
|
||||
const navBarHeight = ref(0);
|
||||
|
||||
// 获取系统状态栏高度
|
||||
const getSystemInfo = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
||||
// 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
|
||||
navBarHeight.value = statusBarHeight.value + 44;
|
||||
console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
|
||||
};
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
getSystemInfo(); // 获取系统信息
|
||||
userStore.init();
|
||||
// refreshDeviceStatus(); // API已注释，不需要自动刷新
|
||||
});
|
||||
@@ -313,21 +329,25 @@ const goToLogin = () => {
|
||||
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
|
||||
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
|
||||
|
||||
/* 导航栏 */
|
||||
/* 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 88rpx;
|
||||
width: 100%;
|
||||
background: rgba(26, 11, 46, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 30rpx;
|
||||
z-index: 1000;
|
||||
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-stars {
|
||||
@@ -365,15 +385,16 @@ const goToLogin = () => {
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #f9e076;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 设备卡片 */
|
||||
.device-card {
|
||||
margin: 40rpx 30rpx;
|
||||
margin: 0 30rpx 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 40rpx;
|
||||
|
||||
@@ -163,7 +163,7 @@ const goToWeiAI = () => {
|
||||
const introMessage = '你好！我是蔚AI，很高兴为您服务！🌟\n\n我是您的专属AI智能助手，在这里您可以：\n\n✨ 了解我们最新的AI技术和产品\n💡 获取创意灵感和解决方案\n🎯 获得个性化的建议和指导\n🚀 探索AI在各个领域的应用\n\n无论您有什么问题或想法，我都会尽力帮助您。让我们一起开启这段精彩的AI之旅吧！\n\n有什么想了解的吗？';
|
||||
|
||||
uni.navigateTo({
|
||||
url: '/pages/chat/chat?characterId=wei-ai&characterName=蔚AI&characterAvatar=/static/logo.png&introMessage=' + encodeURIComponent(introMessage)
|
||||
url: '/pages/chat/chat-box?characterId=wei-ai&characterName=蔚AI&characterAvatar=/static/logo.png&introMessage=' + encodeURIComponent(introMessage)
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -1,28 +1,34 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 头部以上背景区域 -->
|
||||
<view class="top-background"></view>
|
||||
|
||||
<!-- 夜空装饰背景 -->
|
||||
<view class="night-sky-decoration">
|
||||
<view class="star star-1"></view>
|
||||
<view class="star star-2"></view>
|
||||
<view class="star star-3"></view>
|
||||
<view class="star star-4"></view>
|
||||
<view class="star star-5"></view>
|
||||
<view class="star star-6"></view>
|
||||
<view class="star star-7"></view>
|
||||
<view class="star star-8"></view>
|
||||
</view>
|
||||
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view class="custom-navbar fixed-navbar">
|
||||
<text class="navbar-title">我的</text>
|
||||
<view class="custom-navbar fixed-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="navbar-content">
|
||||
<view class="navbar-stars">
|
||||
<view class="navbar-star star-left"></view>
|
||||
<view class="navbar-star star-right"></view>
|
||||
</view>
|
||||
<text class="navbar-title">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可滚动内容区域 -->
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
scroll-y="true"
|
||||
enable-back-to-top="false"
|
||||
refresher-enabled="false"
|
||||
:refresher-triggered="false"
|
||||
:refresher-threshold="0"
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
:style="{ marginTop: navBarHeight + 'px' }"
|
||||
scroll-y="true"
|
||||
:show-scrollbar="false"
|
||||
:scroll-with-animation="false"
|
||||
:bounces="false"
|
||||
:always-bounce-vertical="false"
|
||||
:scroll-top="0"
|
||||
:upper-threshold="0"
|
||||
:lower-threshold="0"
|
||||
>
|
||||
<!-- 用户信息区域 -->
|
||||
<view class="user-info">
|
||||
@@ -122,6 +128,10 @@ const openid = ref('');
|
||||
const avatarUrl = ref('/static/default-avatar.png');
|
||||
const userBalance = ref(0.00);
|
||||
|
||||
// 状态栏高度适配
|
||||
const statusBarHeight = ref(0);
|
||||
const navBarHeight = ref(0);
|
||||
|
||||
// 登录按钮文本
|
||||
const loginButtonText = computed(() => {
|
||||
return '微信一键登录';
|
||||
@@ -161,8 +171,19 @@ const initUserInfo = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 获取系统状态栏高度
|
||||
const getSystemInfo = () => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
||||
// 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
|
||||
navBarHeight.value = statusBarHeight.value + 44;
|
||||
console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
|
||||
};
|
||||
|
||||
// 页面加载时初始化
|
||||
onMounted(() => {
|
||||
// 获取系统信息
|
||||
getSystemInfo();
|
||||
// 初始化用户store
|
||||
userStore.init();
|
||||
// 初始化本地状态
|
||||
@@ -483,92 +504,171 @@ const goToHistory = () => {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fixed-navbar {
|
||||
position: fixed;
|
||||
top: 100rpx;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
z-index: 100;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
|
||||
min-height: 100vh;
|
||||
padding-top: 200rpx;
|
||||
background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
/* 滚动容器样式 */
|
||||
.scroll-container {
|
||||
height: calc(100vh - 200rpx);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 头部以上背景区域 */
|
||||
.top-background {
|
||||
/* 夜空装饰 */
|
||||
.night-sky-decoration {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
background: #f9e076;
|
||||
border-radius: 50%;
|
||||
animation: twinkle 2s infinite;
|
||||
box-shadow: 0 0 10rpx #f9e076;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.3; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
|
||||
.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
|
||||
.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
|
||||
.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
|
||||
.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
|
||||
.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
|
||||
.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
|
||||
.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
|
||||
|
||||
/* 自定义导航栏 */
|
||||
.custom-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(26, 11, 46, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.fixed-navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
|
||||
z-index: 99;
|
||||
z-index: 1000;
|
||||
}
|
||||
.custom-navbar {
|
||||
height: 100rpx;
|
||||
|
||||
.navbar-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
|
||||
font-weight: bold;
|
||||
font-size: 38rpx;
|
||||
letter-spacing: 2rpx;
|
||||
padding: 0 30rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.navbar-star {
|
||||
position: absolute;
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
background: #f9e076;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 15rpx #f9e076;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.star-left {
|
||||
top: 50%;
|
||||
left: 30rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.star-right {
|
||||
top: 50%;
|
||||
right: 30rpx;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.navbar-title {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
|
||||
color: #f9e076;
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 滚动容器样式 */
|
||||
.scroll-container {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 用户信息区域 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 24rpx 28rpx;
|
||||
margin: 20rpx 30rpx;
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.2);
|
||||
border-radius: 25rpx;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* 余额区域 */
|
||||
.balance-section {
|
||||
padding: 0 24rpx 24rpx;
|
||||
padding: 0 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
background: linear-gradient(135deg, #8a2be2 0%, #6b2c9c 100%);
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.2);
|
||||
border-radius: 25rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.3);
|
||||
color: #f9e076;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.balance-info .balance-label {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(249, 224, 118, 0.8);
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.balance-info .balance-amount {
|
||||
font-size: 48rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #f9e076;
|
||||
}
|
||||
|
||||
.balance-actions {
|
||||
@@ -578,87 +678,110 @@ const goToHistory = () => {
|
||||
|
||||
.balance-actions .recharge-btn,
|
||||
.balance-actions .history-btn {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
|
||||
color: #1a0b2e;
|
||||
border: none;
|
||||
border-radius: 30rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
font-size: 26rpx;
|
||||
min-width: 100rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
min-width: 90rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.balance-actions .recharge-btn {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
.balance-actions .recharge-btn:active,
|
||||
.balance-actions .history-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
|
||||
}
|
||||
.avatar {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e0e0e0;
|
||||
background-color: rgba(249, 224, 118, 0.2);
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.3);
|
||||
}
|
||||
.user-details {
|
||||
margin-left: 30rpx;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.login-text {
|
||||
font-size: 40rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
color: #f9e076;
|
||||
}
|
||||
.user-id {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(249, 224, 118, 0.6);
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.login-btn {
|
||||
margin-top: 20rpx;
|
||||
background-color: #07c160;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 40rpx;
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
margin-top: 12rpx;
|
||||
background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
|
||||
color: #1a0b2e;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 30rpx;
|
||||
width: 200rpx;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
padding: 0;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.login-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
|
||||
}
|
||||
|
||||
/* 菜单卡片 */
|
||||
.menu-cards {
|
||||
padding: 0 24rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.menu-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 40rpx 30rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 2rpx solid rgba(138, 43, 226, 0.3);
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 28rpx 24rpx;
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.2);
|
||||
border-radius: 25rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.menu-card:active {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 15rpx 50rpx rgba(249, 224, 118, 0.2);
|
||||
border-color: rgba(249, 224, 118, 0.4);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 48rpx;
|
||||
color: #8a2be2;
|
||||
margin-right: 24rpx;
|
||||
filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
|
||||
font-size: 40rpx;
|
||||
margin-right: 20rpx;
|
||||
filter: drop-shadow(0 2rpx 4rpx rgba(249, 224, 118, 0.3));
|
||||
}
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #f9e076;
|
||||
}
|
||||
|
||||
/* 区块样式 */
|
||||
.section-block {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 2rpx solid rgba(138, 43, 226, 0.3);
|
||||
border-radius: 20rpx;
|
||||
margin: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.2);
|
||||
border-radius: 25rpx;
|
||||
margin: 0 30rpx 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
@@ -666,27 +789,37 @@ const goToHistory = () => {
|
||||
align-items: center;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #f9e076;
|
||||
}
|
||||
.view-all {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
color: rgba(249, 224, 118, 0.6);
|
||||
}
|
||||
|
||||
/* 退出登录按钮 */
|
||||
.logout-section {
|
||||
padding: 40rpx 24rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #8a2be2;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
|
||||
color: #f9e076;
|
||||
font-size: 30rpx;
|
||||
border: 2rpx solid rgba(138, 43, 226, 0.3);
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
font-weight: bold;
|
||||
border: 2rpx solid rgba(249, 224, 118, 0.2);
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* 底部留白 */
|
||||
|
||||
Reference in New Issue
Block a user