Raju/miniprogramme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Commit

Browse source
This commit is contained in:
Rajuahamedkst 2025-09-12 16:08:17 +08:00
commit 1d71a02738
237 changed files with 64293 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

469
pages/chat-settings/chat-settings.js Normal file
View file

@ -0,0 +1,469 @@
// 🎨 聊天设置页面逻辑
const app = getApp();
Page({
data: {
// 系统信息
statusBarHeight: 44,
navBarHeight: 88,
// 当前设置
currentBackground: 'default',
fontSize: 'medium',
showTimestamp: true,
showReadStatus: true,
bubbleStyle: 'classic',
bubbleStyleName: '经典样式',
enableReactions: true,
burnAfterReading: false,
endToEndEncryption: false,
// 预设背景
presetBackgrounds: [
{
id: 'gradient1',
name: '渐变蓝',
thumbnail: '/images/backgrounds/gradient1-thumb.jpg',
url: '/images/backgrounds/gradient1.jpg'
},
{
id: 'gradient2',
name: '渐变紫',
thumbnail: '/images/backgrounds/gradient2-thumb.jpg',
url: '/images/backgrounds/gradient2.jpg'
},
{
id: 'nature1',
name: '自然风光',
thumbnail: '/images/backgrounds/nature1-thumb.jpg',
url: '/images/backgrounds/nature1.jpg'
},
{
id: 'abstract1',
name: '抽象艺术',
thumbnail: '/images/backgrounds/abstract1-thumb.jpg',
url: '/images/backgrounds/abstract1.jpg'
}
],
// 气泡样式选项
bubbleStyles: [
{
id: 'classic',
name: '经典样式',
class: 'classic'
},
{
id: 'modern',
name: '现代样式',
class: 'modern'
},
{
id: 'minimal',
name: '简约样式',
class: 'minimal'
}
],
// 弹窗状态
showBubbleModal: false
},
onLoad(options) {
console.log('🎨 聊天设置页面加载');
// 获取系统信息
this.getSystemInfo();
// 加载用户设置
this.loadUserSettings();
},
onShow() {
console.log('🎨 聊天设置页面显示');
},
// 获取系统信息
getSystemInfo() {
const systemInfo = wx.getSystemInfoSync();
this.setData({
statusBarHeight: systemInfo.statusBarHeight || 44,
navBarHeight: 88
});
},
// 加载用户设置
loadUserSettings() {
try {
const settings = wx.getStorageSync('chatSettings') || {};
this.setData({
currentBackground: settings.background || 'default',
fontSize: settings.fontSize || 'medium',
showTimestamp: settings.showTimestamp !== false,
showReadStatus: settings.showReadStatus !== false,
bubbleStyle: settings.bubbleStyle || 'classic',
enableReactions: settings.enableReactions !== false,
burnAfterReading: settings.burnAfterReading || false,
endToEndEncryption: settings.endToEndEncryption || false
});
// 更新气泡样式名称
this.updateBubbleStyleName();
console.log('✅ 用户设置加载完成');
} catch (error) {
console.error('❌ 加载用户设置失败:', error);
}
},
// 🎨 ===== 背景设置 =====
// 选择背景
selectBackground(e) {
const type = e.currentTarget.dataset.type;
const id = e.currentTarget.dataset.id;
console.log('🎨 选择背景:', type, id);
let backgroundId = type;
if (type === 'preset') {
backgroundId = id;
}
this.setData({
currentBackground: backgroundId
});
// 立即应用背景
this.applyBackground(backgroundId);
},
// 选择自定义背景
selectCustomBackground() {
console.log('🎨 选择自定义背景');
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
// 保存自定义背景
this.saveCustomBackground(tempFilePath);
},
fail: (error) => {
console.error('❌ 选择图片失败:', error);
wx.showToast({
title: '选择图片失败',
icon: 'none'
});
}
});
},
// 保存自定义背景
async saveCustomBackground(tempFilePath) {
try {
wx.showLoading({
title: '设置背景中...'
});
// 保存图片到本地
const savedFilePath = await new Promise((resolve, reject) => {
wx.saveFile({
tempFilePath: tempFilePath,
success: (res) => resolve(res.savedFilePath),
fail: reject
});
});
// 更新设置
this.setData({
currentBackground: 'custom'
});
// 保存自定义背景路径
wx.setStorageSync('customBackground', savedFilePath);
// 应用背景
this.applyBackground('custom');
wx.hideLoading();
wx.showToast({
title: '背景设置成功',
icon: 'success'
});
} catch (error) {
wx.hideLoading();
console.error('❌ 保存自定义背景失败:', error);
wx.showToast({
title: '设置背景失败',
icon: 'none'
});
}
},
// 应用背景
applyBackground(backgroundId) {
try {
let backgroundUrl = '';
if (backgroundId === 'default') {
backgroundUrl = '';
} else if (backgroundId === 'custom') {
backgroundUrl = wx.getStorageSync('customBackground') || '';
} else {
// 预设背景
const preset = this.data.presetBackgrounds.find(bg => bg.id === backgroundId);
if (preset) {
backgroundUrl = preset.url;
}
}
// 保存到全局状态
app.globalData.chatBackground = {
id: backgroundId,
url: backgroundUrl
};
console.log('✅ 背景应用成功:', backgroundId);
} catch (error) {
console.error('❌ 应用背景失败:', error);
}
},
// 🔤 ===== 字体设置 =====
// 选择字体大小
selectFontSize(e) {
const size = e.currentTarget.dataset.size;
console.log('🔤 选择字体大小:', size);
this.setData({
fontSize: size
});
// 立即应用字体大小
this.applyFontSize(size);
},
// 应用字体大小
applyFontSize(size) {
try {
// 保存到全局状态
app.globalData.fontSize = size;
console.log('✅ 字体大小应用成功:', size);
} catch (error) {
console.error('❌ 应用字体大小失败:', error);
}
},
// ⚙️ ===== 消息设置 =====
// 时间戳设置变化
onTimestampChange(e) {
const checked = e.detail.value;
console.log('⚙️ 时间戳设置变化:', checked);
this.setData({
showTimestamp: checked
});
},
// 已读状态设置变化
onReadStatusChange(e) {
const checked = e.detail.value;
console.log('⚙️ 已读状态设置变化:', checked);
this.setData({
showReadStatus: checked
});
},
// 显示气泡样式选项
showBubbleStyleOptions() {
console.log('🎨 显示气泡样式选项');
this.setData({
showBubbleModal: true
});
},
// 关闭气泡样式弹窗
closeBubbleModal() {
this.setData({
showBubbleModal: false
});
},
// 选择气泡样式
selectBubbleStyle(e) {
const styleId = e.currentTarget.dataset.id;
console.log('🎨 选择气泡样式:', styleId);
this.setData({
bubbleStyle: styleId
});
this.updateBubbleStyleName();
this.closeBubbleModal();
},
// 更新气泡样式名称
updateBubbleStyleName() {
const style = this.data.bubbleStyles.find(s => s.id === this.data.bubbleStyle);
if (style) {
this.setData({
bubbleStyleName: style.name
});
}
},
// 表情回应设置变化
onReactionsChange(e) {
const checked = e.detail.value;
console.log('⚙️ 表情回应设置变化:', checked);
this.setData({
enableReactions: checked
});
},
// 🔒 ===== 隐私设置 =====
// 阅后即焚设置变化
onBurnAfterReadingChange(e) {
const checked = e.detail.value;
console.log('🔒 阅后即焚设置变化:', checked);
this.setData({
burnAfterReading: checked
});
},
// 加密设置变化
onEncryptionChange(e) {
const checked = e.detail.value;
console.log('🔒 加密设置变化:', checked);
this.setData({
endToEndEncryption: checked
});
},
// 💾 ===== 设置保存 =====
// 保存设置
saveSettings() {
console.log('💾 保存设置');
try {
const settings = {
background: this.data.currentBackground,
fontSize: this.data.fontSize,
showTimestamp: this.data.showTimestamp,
showReadStatus: this.data.showReadStatus,
bubbleStyle: this.data.bubbleStyle,
enableReactions: this.data.enableReactions,
burnAfterReading: this.data.burnAfterReading,
endToEndEncryption: this.data.endToEndEncryption
};
// 保存到本地存储
wx.setStorageSync('chatSettings', settings);
// 应用到全局状态
app.globalData.chatSettings = settings;
wx.showToast({
title: '设置保存成功',
icon: 'success'
});
console.log('✅ 设置保存成功');
} catch (error) {
console.error('❌ 保存设置失败:', error);
wx.showToast({
title: '保存失败',
icon: 'none'
});
}
},
// 恢复默认设置
resetSettings() {
console.log('🔄 恢复默认设置');
wx.showModal({
title: '恢复默认设置',
content: '确定要恢复所有设置到默认值吗？',
success: (res) => {
if (res.confirm) {
this.performReset();
}
}
});
},
// 执行重置
performReset() {
try {
// 重置所有设置
this.setData({
currentBackground: 'default',
fontSize: 'medium',
showTimestamp: true,
showReadStatus: true,
bubbleStyle: 'classic',
enableReactions: true,
burnAfterReading: false,
endToEndEncryption: false
});
this.updateBubbleStyleName();
// 清除本地存储
wx.removeStorageSync('chatSettings');
wx.removeStorageSync('customBackground');
// 重置全局状态
app.globalData.chatSettings = {};
app.globalData.chatBackground = {};
app.globalData.fontSize = 'medium';
wx.showToast({
title: '已恢复默认设置',
icon: 'success'
});
console.log('✅ 默认设置恢复成功');
} catch (error) {
console.error('❌ 恢复默认设置失败:', error);
wx.showToast({
title: '恢复失败',
icon: 'none'
});
}
},
// 🧭 ===== 页面导航 =====
// 返回上一页
goBack() {
wx.navigateBack();
},
// 阻止事件冒泡
stopPropagation() {
// 阻止点击事件冒泡
}
});

7
pages/chat-settings/chat-settings.json Normal file
View file

@ -0,0 +1,7 @@
{
"navigationStyle": "custom",
"backgroundColor": "#F2F2F7",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": false,
"onReachBottomDistance": 50
}

217
pages/chat-settings/chat-settings.wxml Normal file
View file

@ -0,0 +1,217 @@
<!-- 🎨 聊天设置页面 -->
<view class="chat-settings-container">
<!-- 自定义导航栏 -->
<view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
<view class="navbar-content" style="height: {{navBarHeight}}px;">
<view class="navbar-left" bindtap="goBack">
<text class="back-icon">‹</text>
</view>
<view class="navbar-title">
<text class="title-text">聊天设置</text>
</view>
<view class="navbar-right"></view>
</view>
</view>
<!-- 设置内容 -->
<scroll-view class="settings-content" scroll-y="true">
<!-- 聊天背景设置 -->
<view class="settings-section">
<view class="section-title">
<text class="title-text">聊天背景</text>
</view>
<view class="background-options">
<!-- 默认背景 -->
<view class="background-item {{currentBackground === 'default' ? 'active' : ''}}"
bindtap="selectBackground"
data-type="default">
<view class="background-preview default-bg">
<text class="preview-text">默认</text>
</view>
<text class="background-name">默认背景</text>
</view>
<!-- 预设背景 -->
<view class="background-item {{currentBackground === item.id ? 'active' : ''}}"
wx:for="{{presetBackgrounds}}"
wx:key="id"
bindtap="selectBackground"
data-type="preset"
data-id="{{item.id}}">
<view class="background-preview" style="background-image: url({{item.thumbnail}});">
</view>
<text class="background-name">{{item.name}}</text>
</view>
<!-- 自定义背景 -->
<view class="background-item"
bindtap="selectCustomBackground">
<view class="background-preview custom-bg">
<text class="custom-icon">📷</text>
</view>
<text class="background-name">自定义</text>
</view>
</view>
</view>
<!-- 字体大小设置 -->
<view class="settings-section">
<view class="section-title">
<text class="title-text">字体大小</text>
</view>
<view class="font-size-setting">
<view class="font-size-options">
<view class="font-size-item {{fontSize === 'small' ? 'active' : ''}}"
bindtap="selectFontSize"
data-size="small">
<text class="size-text small-text">小</text>
</view>
<view class="font-size-item {{fontSize === 'medium' ? 'active' : ''}}"
bindtap="selectFontSize"
data-size="medium">
<text class="size-text medium-text">中</text>
</view>
<view class="font-size-item {{fontSize === 'large' ? 'active' : ''}}"
bindtap="selectFontSize"
data-size="large">
<text class="size-text large-text">大</text>
</view>
<view class="font-size-item {{fontSize === 'xlarge' ? 'active' : ''}}"
bindtap="selectFontSize"
data-size="xlarge">
<text class="size-text xlarge-text">特大</text>
</view>
</view>
<!-- 字体预览 -->
<view class="font-preview">
<view class="preview-message">
<text class="preview-text {{fontSize}}-font">这是字体大小预览效果</text>
</view>
</view>
</view>
</view>
<!-- 消息设置 -->
<view class="settings-section">
<view class="section-title">
<text class="title-text">消息设置</text>
</view>
<view class="setting-items">
<!-- 显示时间戳 -->
<view class="setting-item">
<view class="item-info">
<text class="item-title">显示时间戳</text>
<text class="item-desc">在消息旁显示发送时间</text>
</view>
<switch class="setting-switch"
checked="{{showTimestamp}}"
bindchange="onTimestampChange" />
</view>
<!-- 显示已读状态 -->
<view class="setting-item">
<view class="item-info">
<text class="item-title">显示已读状态</text>
<text class="item-desc">显示消息的已读/未读状态</text>
</view>
<switch class="setting-switch"
checked="{{showReadStatus}}"
bindchange="onReadStatusChange" />
</view>
<!-- 消息气泡样式 -->
<view class="setting-item" bindtap="showBubbleStyleOptions">
<view class="item-info">
<text class="item-title">消息气泡样式</text>
<text class="item-desc">{{bubbleStyleName}}</text>
</view>
<text class="item-arrow">›</text>
</view>
<!-- 表情回应 -->
<view class="setting-item">
<view class="item-info">
<text class="item-title">表情回应</text>
<text class="item-desc">允许对消息添加表情回应</text>
</view>
<switch class="setting-switch"
checked="{{enableReactions}}"
bindchange="onReactionsChange" />
</view>
</view>
</view>
<!-- 隐私设置 -->
<view class="settings-section">
<view class="section-title">
<text class="title-text">隐私设置</text>
</view>
<view class="setting-items">
<!-- 阅后即焚 -->
<view class="setting-item">
<view class="item-info">
<text class="item-title">阅后即焚</text>
<text class="item-desc">消息阅读后自动删除</text>
</view>
<switch class="setting-switch"
checked="{{burnAfterReading}}"
bindchange="onBurnAfterReadingChange" />
</view>
<!-- 消息加密 -->
<view class="setting-item">
<view class="item-info">
<text class="item-title">端到端加密</text>
<text class="item-desc">使用端到端加密保护消息</text>
</view>
<switch class="setting-switch"
checked="{{endToEndEncryption}}"
bindchange="onEncryptionChange" />
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<view class="action-btn primary" bindtap="saveSettings">
<text class="btn-text">保存设置</text>
</view>
<view class="action-btn secondary" bindtap="resetSettings">
<text class="btn-text">恢复默认</text>
</view>
</view>
</scroll-view>
</view>
<!-- 气泡样式选择弹窗 -->
<view class="bubble-style-modal" wx:if="{{showBubbleModal}}" bindtap="closeBubbleModal">
<view class="modal-content" catchtap="stopPropagation">
<view class="modal-header">
<text class="modal-title">选择气泡样式</text>
<view class="close-btn" bindtap="closeBubbleModal">
<text class="close-icon">✕</text>
</view>
</view>
<view class="bubble-options">
<view class="bubble-option {{bubbleStyle === item.id ? 'active' : ''}}"
wx:for="{{bubbleStyles}}"
wx:key="id"
bindtap="selectBubbleStyle"
data-id="{{item.id}}">
<view class="bubble-preview {{item.class}}">
<text class="bubble-text">示例消息</text>
</view>
<text class="bubble-name">{{item.name}}</text>
</view>
</view>
</view>
</view>

529
pages/chat-settings/chat-settings.wxss Normal file
View file

@ -0,0 +1,529 @@
/* 🎨 聊天设置页面样式 */
/* CSS变量定义 */
page {
--primary-color: #007AFF;
--primary-light: #5AC8FA;
--primary-dark: #0051D5;
--background-color: #F2F2F7;
--surface-color: #FFFFFF;
--text-primary: #000000;
--text-secondary: #8E8E93;
--text-tertiary: #C7C7CC;
--border-color: #E5E5EA;
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
--radius-small: 8rpx;
--radius-medium: 12rpx;
--radius-large: 20rpx;
}
/* 🌙 深色模式支持 */
@media (prefers-color-scheme: dark) {
page {
--primary-color: #0A84FF;
--primary-light: #64D2FF;
--primary-dark: #0056CC;
--background-color: #000000;
--surface-color: #1C1C1E;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;
--text-tertiary: #48484A;
--border-color: #38383A;
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
}
}
.chat-settings-container {
height: 100vh;
background: var(--background-color);
display: flex;
flex-direction: column;
}
/* 🎨 自定义导航栏 */
.custom-navbar {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
box-shadow: var(--shadow-medium);
z-index: 1000;
}
.navbar-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
}
.navbar-left, .navbar-right {
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-medium);
transition: all 0.3s ease;
}
.navbar-left:active {
background: rgba(255, 255, 255, 0.2);
transform: scale(0.95);
}
.back-icon {
font-size: 48rpx;
color: white;
font-weight: 300;
}
.navbar-title {
flex: 1;
text-align: center;
}
.title-text {
font-size: 36rpx;
font-weight: 600;
color: white;
}
/* 🎨 设置内容 */
.settings-content {
flex: 1;
padding: 32rpx;
}
.settings-section {
margin-bottom: 48rpx;
}
.section-title {
margin-bottom: 24rpx;
}
.section-title .title-text {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
}
/* 🎨 聊天背景设置 */
.background-options {
display: flex;
flex-wrap: wrap;
gap: 24rpx;
}
.background-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
transition: all 0.3s ease;
}
.background-item:active {
transform: scale(0.95);
}
.background-item.active .background-preview {
border: 4rpx solid var(--primary-color);
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2);
}
.background-preview {
width: 160rpx;
height: 120rpx;
border-radius: var(--radius-medium);
border: 2rpx solid var(--border-color);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
overflow: hidden;
}
.default-bg {
background: linear-gradient(135deg, #F2F2F7 0%, #E5E5EA 100%);
}
.custom-bg {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
}
.preview-text {
font-size: 24rpx;
color: var(--text-secondary);
font-weight: 500;
}
.custom-icon {
font-size: 48rpx;
color: white;
}
.background-name {
font-size: 26rpx;
color: var(--text-secondary);
text-align: center;
}
/* 🎨 字体大小设置 */
.font-size-setting {
background: var(--surface-color);
border-radius: var(--radius-medium);
padding: 32rpx;
border: 1rpx solid var(--border-color);
}
.font-size-options {
display: flex;
gap: 16rpx;
margin-bottom: 32rpx;
}
.font-size-item {
flex: 1;
height: 80rpx;
border-radius: var(--radius-medium);
border: 2rpx solid var(--border-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: var(--background-color);
}
.font-size-item:active {
transform: scale(0.95);
}
.font-size-item.active {
border-color: var(--primary-color);
background: rgba(0, 122, 255, 0.1);
}
.size-text {
font-weight: 600;
color: var(--text-primary);
}
.small-text { font-size: 24rpx; }
.medium-text { font-size: 28rpx; }
.large-text { font-size: 32rpx; }
.xlarge-text { font-size: 36rpx; }
.font-preview {
padding: 24rpx;
background: var(--background-color);
border-radius: var(--radius-small);
border: 1rpx solid var(--border-color);
}
.preview-message {
background: var(--primary-color);
border-radius: var(--radius-medium);
padding: 20rpx 24rpx;
max-width: 400rpx;
}
.preview-text {
color: white;
line-height: 1.4;
}
.small-font { font-size: 26rpx; }
.medium-font { font-size: 30rpx; }
.large-font { font-size: 34rpx; }
.xlarge-font { font-size: 38rpx; }
/* 🎨 设置项 */
.setting-items {
background: var(--surface-color);
border-radius: var(--radius-medium);
border: 1rpx solid var(--border-color);
overflow: hidden;
}
.setting-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
transition: all 0.2s ease;
}
.setting-item:last-child {
border-bottom: none;
}
.setting-item:active {
background: var(--background-color);
}
.item-info {
flex: 1;
min-width: 0;
}
.item-title {
font-size: 32rpx;
font-weight: 500;
color: var(--text-primary);
display: block;
margin-bottom: 8rpx;
}
.item-desc {
font-size: 26rpx;
color: var(--text-secondary);
line-height: 1.4;
}
.setting-switch {
transform: scale(0.8);
}
.item-arrow {
font-size: 32rpx;
color: var(--text-tertiary);
font-weight: 300;
}
/* 🎨 操作按钮 */
.action-buttons {
display: flex;
flex-direction: column;
gap: 24rpx;
margin-top: 48rpx;
}
.action-btn {
height: 96rpx;
border-radius: var(--radius-medium);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 2rpx solid transparent;
}
.action-btn:active {
transform: scale(0.98);
}
.action-btn.primary {
background: var(--primary-color);
box-shadow: var(--shadow-medium);
}
.action-btn.primary:active {
background: var(--primary-dark);
}
.action-btn.secondary {
background: var(--surface-color);
border-color: var(--border-color);
}
.action-btn.secondary:active {
background: var(--background-color);
}
.btn-text {
font-size: 32rpx;
font-weight: 600;
}
.action-btn.primary .btn-text {
color: white;
}
.action-btn.secondary .btn-text {
color: var(--text-primary);
}
/* 🎨 气泡样式选择弹窗 */
.bubble-style-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.modal-content {
width: 90%;
max-width: 600rpx;
background: var(--surface-color);
border-radius: var(--radius-large);
box-shadow: var(--shadow-medium);
animation: scaleIn 0.3s ease-out;
overflow: hidden;
}
@keyframes scaleIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32rpx;
border-bottom: 1rpx solid var(--border-color);
}
.modal-title {
font-size: 36rpx;
font-weight: 600;
color: var(--text-primary);
}
.close-btn {
width: 64rpx;
height: 64rpx;
border-radius: 32rpx;
background: var(--background-color);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.close-btn:active {
background: var(--border-color);
transform: scale(0.9);
}
.close-icon {
font-size: 28rpx;
color: var(--text-secondary);
}
.bubble-options {
padding: 32rpx;
display: flex;
flex-wrap: wrap;
gap: 24rpx;
}
.bubble-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
transition: all 0.3s ease;
}
.bubble-option:active {
transform: scale(0.95);
}
.bubble-option.active .bubble-preview {
border: 4rpx solid var(--primary-color);
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2);
}
.bubble-preview {
padding: 16rpx 24rpx;
border-radius: var(--radius-medium);
border: 2rpx solid var(--border-color);
transition: all 0.3s ease;
}
.bubble-preview.classic {
background: var(--primary-color);
border-radius: 24rpx 24rpx 24rpx 8rpx;
}
.bubble-preview.modern {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
border-radius: var(--radius-medium);
}
.bubble-preview.minimal {
background: var(--surface-color);
border: 2rpx solid var(--primary-color);
border-radius: var(--radius-small);
}
.bubble-text {
font-size: 28rpx;
color: white;
}
.bubble-preview.minimal .bubble-text {
color: var(--primary-color);
}
.bubble-name {
font-size: 26rpx;
color: var(--text-secondary);
text-align: center;
}
/* 📱 响应式设计 */
@media screen and (max-width: 375px) {
.settings-content {
padding: 24rpx;
}
.background-preview {
width: 120rpx;
height: 90rpx;
}
.font-size-options {
gap: 12rpx;
}
.font-size-item {
height: 64rpx;
}
.setting-item {
padding: 24rpx;
}
}
@media screen and (min-width: 414px) {
.settings-content {
padding: 40rpx;
}
.background-preview {
width: 180rpx;
height: 135rpx;
}
.font-size-item {
height: 96rpx;
}
.setting-item {
padding: 40rpx;
}
}