upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
139
subpackages/settings/font-size/font-size.js
Normal file
139
subpackages/settings/font-size/font-size.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
Page({
|
||||
data: {
|
||||
// 系统信息
|
||||
statusBarHeight: 0,
|
||||
navbarHeight: 0,
|
||||
menuButtonInfo: { height: 32, width: 32, top: 0 },
|
||||
// 字体大小相关
|
||||
fontSizeValue: 16, // 默认字体大小
|
||||
previewFontSize: 16, // 预览区域字体大小
|
||||
currentFontSize: 'small', // 当前字体大小
|
||||
activeDotIndex: 1 // 默认字体为第二个位置
|
||||
},
|
||||
|
||||
/* 监听页面加载 */
|
||||
onLoad: function (options) {
|
||||
// 获取系统信息
|
||||
this.getSystemInfo();
|
||||
// 加载字体设置
|
||||
this.loadCurrentFontSize();
|
||||
},
|
||||
|
||||
/* 获取系统信息 */
|
||||
getSystemInfo: function() {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
|
||||
|
||||
this.setData({
|
||||
statusBarHeight: systemInfo.statusBarHeight,
|
||||
navbarHeight: menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2,
|
||||
menuButtonInfo: menuButtonInfo
|
||||
});
|
||||
},
|
||||
|
||||
/* 加载用字体设置 */
|
||||
loadCurrentFontSize: function() {
|
||||
try {
|
||||
// 获取聊天设置
|
||||
const chatSettings = wx.getStorageSync('chatSettings') || {};
|
||||
const fontSizeValue = chatSettings.fontSizeValue || 16;
|
||||
|
||||
// 字体大小选项
|
||||
let currentFontSize = 'medium';
|
||||
if (fontSizeValue <= 16) {
|
||||
currentFontSize = 'small';
|
||||
} else if (fontSizeValue >= 20) {
|
||||
currentFontSize = 'large';
|
||||
}
|
||||
|
||||
// 当前字体所在的位置
|
||||
const activeDotIndex = Math.min(Math.round((fontSizeValue - 14) / 2), 5);
|
||||
|
||||
// 设置滑块值和预览字体大小
|
||||
this.setData({
|
||||
currentFontSize: currentFontSize,
|
||||
fontSizeValue: fontSizeValue,
|
||||
previewFontSize: fontSizeValue,
|
||||
activeDotIndex: activeDotIndex
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('加载字体设置失败:', error);
|
||||
}
|
||||
},
|
||||
|
||||
/* 滑块值变化 */
|
||||
onSliderChange: function(e) {
|
||||
// 不处理滑块之间的点击
|
||||
},
|
||||
|
||||
/* 点击字体大小位置 */
|
||||
onDotClick: function(e) {
|
||||
const value = parseInt(e.currentTarget.dataset.value);
|
||||
|
||||
// 当前字体所在的位置
|
||||
const activeDotIndex = Math.min(Math.round((value - 14) / 2), 5);
|
||||
|
||||
// 更新预览字体大小和字体所在位置
|
||||
this.setData({
|
||||
previewFontSize: value,
|
||||
activeDotIndex: activeDotIndex,
|
||||
fontSizeValue: value
|
||||
});
|
||||
|
||||
// 保存设置
|
||||
this.saveFontSizeSetting(value);
|
||||
},
|
||||
|
||||
/* 阻止滑块之间的点击 */
|
||||
onSliderTap: function(e) {
|
||||
e.stopPropagation();
|
||||
},
|
||||
|
||||
/* 保存字体大小设置 */
|
||||
saveFontSizeSetting: function(value) {
|
||||
try {
|
||||
// 字体大小选项
|
||||
let fontSizeOption = 'medium';
|
||||
if (value <= 16) {
|
||||
fontSizeOption = 'small';
|
||||
} else if (value >= 20) {
|
||||
fontSizeOption = 'large';
|
||||
}
|
||||
|
||||
// 获取聊天设置
|
||||
const chatSettings = wx.getStorageSync('chatSettings') || {};
|
||||
// 更新字体大小设置
|
||||
const updatedSettings = { ...chatSettings, fontSize: fontSizeOption, fontSizeValue: value };
|
||||
// 保存到本地
|
||||
wx.setStorageSync('chatSettings', updatedSettings);
|
||||
|
||||
// 更新数据
|
||||
this.setData({
|
||||
currentFontSize: fontSizeOption,
|
||||
fontSizeValue: value
|
||||
});
|
||||
|
||||
// 更新通知
|
||||
getApp().globalData.fontSize = fontSizeOption;
|
||||
|
||||
} catch (error) {
|
||||
console.error('保存字体设置失败:', error);
|
||||
wx.showToast({
|
||||
title: '设置保存失败',
|
||||
icon: 'none',
|
||||
duration: 1500
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/* 返回上一页 */
|
||||
navigateBack: function() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
|
||||
/* 监听页面显示 */
|
||||
onShow: function () {
|
||||
// 重新加载字体设置
|
||||
this.loadCurrentFontSize();
|
||||
}
|
||||
});
|
||||
9
subpackages/settings/font-size/font-size.json
Normal file
9
subpackages/settings/font-size/font-size.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"navigationBarTitleText": "",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"enablePullDownRefresh": false,
|
||||
"disableScroll": false,
|
||||
"usingComponents": {}
|
||||
}
|
||||
73
subpackages/settings/font-size/font-size.wxml
Normal file
73
subpackages/settings/font-size/font-size.wxml
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<view class="font-size-container">
|
||||
<view class="content" style="padding-top: {{statusBarHeight + menuButtonInfo.height}}px;">
|
||||
<!-- 预览区域 -->
|
||||
<view class="preview-section">
|
||||
<view class="chat-preview" style="font-size: {{previewFontSize}}px;">
|
||||
<view class="message-bubble right">
|
||||
<view class="bubble-content">
|
||||
<text class="message-text">Preview text size</text>
|
||||
</view>
|
||||
<view class="avatar right">
|
||||
<image src="/images/avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="message-bubble left">
|
||||
<view class="avatar left">
|
||||
<image src="/images/Findme avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||||
</view>
|
||||
<view class="bubble-content">
|
||||
<text class="message-text">Adjust the slider below to change text size</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="message-bubble left">
|
||||
<view class="avatar left">
|
||||
<image src="/images/Findme avatar.png" mode="aspectFill" style="width: 100%; height: 100%; border-radius: 50%;"></image>
|
||||
</view>
|
||||
<view class="bubble-content">
|
||||
<text class="message-text">接下来，你可以试着用滑块调整字体大小。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部空间 -->
|
||||
<view style="height: 150rpx;"></view>
|
||||
|
||||
<!-- 滑块组件 -->
|
||||
<view class="slider-section" style="position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx; box-sizing: border-box;">
|
||||
<view class="text-container">
|
||||
<text class="size-label">A</text>
|
||||
<text class="size-label large">A</text>
|
||||
</view>
|
||||
|
||||
<view class="slider-wrapper">
|
||||
<view class="custom-track"></view>
|
||||
<view class="dots-container-overlay">
|
||||
<view class="dot {{activeDotIndex === 0 ? 'active' : ''}}" bindtap="onDotClick" data-value="14"></view>
|
||||
<view class="dot-container">
|
||||
<text class="dot-label">Default</text>
|
||||
<view class="dot {{activeDotIndex === 1 ? 'active' : ''}}" bindtap="onDotClick" data-value="16"></view>
|
||||
</view>
|
||||
<view class="dot {{activeDotIndex === 2 ? 'active' : ''}}" bindtap="onDotClick" data-value="18"></view>
|
||||
<view class="dot {{activeDotIndex === 3 ? 'active' : ''}}" bindtap="onDotClick" data-value="20"></view>
|
||||
<view class="dot {{activeDotIndex === 4 ? 'active' : ''}}" bindtap="onDotClick" data-value="22"></view>
|
||||
<view class="dot {{activeDotIndex === 5 ? 'active' : ''}}" bindtap="onDotClick" data-value="24"></view>
|
||||
</view>
|
||||
<slider
|
||||
min="14"
|
||||
max="24"
|
||||
value="{{fontSizeValue}}"
|
||||
activeColor="transparent"
|
||||
backgroundColor="transparent"
|
||||
block-size="22"
|
||||
block-color="transparent"
|
||||
block-border-radius="50%"
|
||||
track-height="6"
|
||||
disabled="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
321
subpackages/settings/font-size/font-size.wxss
Normal file
321
subpackages/settings/font-size/font-size.wxss
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
/* 页面样式 */
|
||||
.font-size-container {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
background-color: #202529;
|
||||
}
|
||||
|
||||
/* 顶部导航栏样式 */
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #cc0000;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid #a00000;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 44px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn .icon {
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 内容样式 */
|
||||
.content {
|
||||
padding-bottom: 40rpx;
|
||||
padding-top: 50rpx !important;
|
||||
}
|
||||
|
||||
/* 预览区域样式 */
|
||||
.preview-section {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background-color: #202529;
|
||||
}
|
||||
|
||||
.chat-preview {
|
||||
padding: 0rpx 0rpx 20rpx 0rpx;
|
||||
background-color: #202529;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.message-bubble:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-bubble.left {
|
||||
flex-direction: row;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.message-bubble.right {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.avatar.left {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 50rpx 15rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.avatar.right {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 45rpx 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bubble-content {
|
||||
max-width: 600rpx;
|
||||
padding: 15rpx 15rpx;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
word-break: break-word;
|
||||
margin-bottom: 45rpx;
|
||||
}
|
||||
|
||||
.message-bubble.left .bubble-content {
|
||||
background-color: #f0f0f0;
|
||||
color: #333333;
|
||||
border: none;
|
||||
border-bottom-left-radius: 5rpx;
|
||||
}
|
||||
|
||||
.message-bubble.left .bubble-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-style: solid;
|
||||
border-width: 8rpx 12rpx 8rpx 0;
|
||||
border-color: transparent #f0f0f0 transparent transparent;
|
||||
}
|
||||
|
||||
.message-bubble.right .bubble-content {
|
||||
background-color: #4DD1A1;
|
||||
color: black;
|
||||
border: none;
|
||||
border-bottom-right-radius: 5rpx;
|
||||
width: 350rpx;
|
||||
}
|
||||
|
||||
.message-bubble.right .bubble-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-style: solid;
|
||||
border-width: 8rpx 0 8rpx 12rpx;
|
||||
border-color: transparent transparent transparent #4DD1A1;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
line-height: 1.4;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 滑块样式 */
|
||||
.slider-section {
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.custom-track {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 4rpx;
|
||||
background-color: #E5E5E5;
|
||||
top: 50%;
|
||||
left: 5%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 指示器样式 */
|
||||
.dots-container-overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 5%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #E5E5E5;
|
||||
border: 2rpx solid #333333;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: #ffffff;
|
||||
border: 2rpx solid #E5E5E5;
|
||||
transform: scale(1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.size-label {
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.size-label.large {
|
||||
font-size: 60rpx;
|
||||
color: #ffffff;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.default-text {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.dot-container {
|
||||
width: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dot-label {
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
margin-bottom: 10rpx;
|
||||
position: absolute;
|
||||
top: -70rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider-wrapper {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.slider-wrapper slider {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
margin: 0;
|
||||
clip-path: inset(0 5% 0 5%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.slider-wrapper slider text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 适配深色模式 */
|
||||
.theme-dark .font-size-container {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.theme-dark .navbar {
|
||||
background-color: #2c2c2c;
|
||||
border-bottom-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.theme-dark .back-btn .icon,
|
||||
.theme-dark .title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-dark .preview-section {
|
||||
background-color: #2c2c2c;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.theme-dark .message-bubble.left .bubble-content {
|
||||
background-color: #3a3a3a;
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.theme-dark .message-bubble.left .message-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-dark .hint,
|
||||
.theme-dark .size-label,
|
||||
.theme-dark .size-label.large,
|
||||
.theme-dark .default-hint {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.theme-dark .reset-button {
|
||||
color: #1aad19;
|
||||
border-color: #1aad19;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue