From 57fb0450162d2fe1126062b3fad217aaa0995010 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E9=A3=9E=E6=B4=8B?= <15778543+xufeiyang6017@user.noreply.gitee.com> Date: Fri, 5 Dec 2025 09:08:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E9=BB=91=E7=99=BD=E6=B5=8B?= =?UTF-8?q?=E8=AF=95=E5=8A=9F=E8=83=BD=EF=BC=9A=E6=B7=BB=E5=8A=A0=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=92=8C=E9=AB=98=E5=AF=B9=E6=AF=94?= =?UTF-8?q?=E5=BA=A6=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.js | 86 +++++++++++++- pages/test-tools/test-mode-switch.js | 139 +++++++++++++++++++++++ pages/test-tools/test-mode-switch.wxml | 50 +++++++++ pages/test-tools/test-mode-switch.wxss | 149 +++++++++++++++++++++++++ 4 files changed, 423 insertions(+), 1 deletion(-) create mode 100644 pages/test-tools/test-mode-switch.js create mode 100644 pages/test-tools/test-mode-switch.wxml create mode 100644 pages/test-tools/test-mode-switch.wxss diff --git a/app.js b/app.js index d276bc2..2b48295 100644 --- a/app.js +++ b/app.js @@ -2,6 +2,10 @@ App({ onLaunch: function () { // 初始化应用 console.log('App Launch') + + // 加载并应用黑白测试设置 + this.loadAndApplyTestModeSettings() + // 初始化本地存储的标签和用户数据 if (!wx.getStorageSync('users')) { wx.setStorageSync('users', {}) @@ -100,9 +104,89 @@ App({ return await API.uploadPhoneNumberData(phoneData) }, + /** + * 加载并应用黑白测试设置 + */ + loadAndApplyTestModeSettings() { + // 从本地存储获取设置 + const isDarkMode = wx.getStorageSync('isDarkMode') || false + const isHighContrast = wx.getStorageSync('isHighContrast') || false + + // 应用设置 + this.applyDarkMode(isDarkMode) + this.applyHighContrastMode(isHighContrast) + + console.log('应用启动时加载黑白测试设置: 深色模式=' + isDarkMode + ', 高对比度=' + isHighContrast) + }, + + /** + * 应用深色模式设置 + */ + applyDarkMode(isDarkMode) { + // 更新窗口和导航栏样式 + wx.setNavigationBarColor({ + frontColor: isDarkMode ? '#ffffff' : '#000000', + backgroundColor: isDarkMode ? '#000000' : '#ffffff', + animation: { + duration: 400, + timingFunc: 'easeInOut' + } + }) + + wx.setBackgroundColor({ + backgroundColor: isDarkMode ? '#000000' : '#ffffff', + backgroundColorTop: isDarkMode ? '#000000' : '#ffffff', + backgroundColorBottom: isDarkMode ? '#000000' : '#ffffff' + }) + }, + + /** + * 应用高对比度模式设置 + */ + applyHighContrastMode(isHighContrast) { + // 移除旧的高对比度样式 + const oldStyle = wx.createSelectorQuery().select('#highContrastStyle') + oldStyle.context((res) => { + if (res.context) { + wx.removeStyleSheet('#highContrastStyle') + } + }) + + if (isHighContrast) { + // 创建高对比度样式 + const styleContent = ` + /* 高对比度样式 */ + * { + filter: grayscale(100%) contrast(120%) !important; + } + + /* 确保文字可读性 */ + text, span, div, p { + color: #000 !important; + background-color: #fff !important; + } + + /* 按钮和交互元素 */ + button, .btn { + border: 2px solid #000 !important; + color: #000 !important; + background-color: #fff !important; + } + ` + + // 动态添加样式 + const styleSheet = document.createElement('style') + styleSheet.id = 'highContrastStyle' + styleSheet.textContent = styleContent + document.head.appendChild(styleSheet) + } + }, + globalData: { userInfo: null, currentTab: 'index', // 当前选中的tab - showTabBar: true // 控制底部tab-bar显示状态 + showTabBar: true, // 控制底部tab-bar显示状态 + isDarkMode: false, // 是否处于深色模式 + isHighContrast: false // 是否处于高对比度模式 } }) diff --git a/pages/test-tools/test-mode-switch.js b/pages/test-tools/test-mode-switch.js new file mode 100644 index 0000000..f7df78b --- /dev/null +++ b/pages/test-tools/test-mode-switch.js @@ -0,0 +1,139 @@ +// pages/test-tools/test-mode-switch.js +Page({ + + /** + * 页面的初始数据 + */ + data: { + isDarkMode: false, + isHighContrast: false + }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad(options) { + // 从本地存储获取当前模式设置 + const darkMode = wx.getStorageSync('isDarkMode') || false + const highContrast = wx.getStorageSync('isHighContrast') || false + this.setData({ + isDarkMode: darkMode, + isHighContrast: highContrast + }) + this.applyModeSettings() + }, + + /** + * 切换深色/浅色模式 + */ + toggleDarkMode(e) { + const isDarkMode = e.detail.value + this.setData({ isDarkMode }) + wx.setStorageSync('isDarkMode', isDarkMode) + this.applyModeSettings() + }, + + /** + * 切换高对比度模式 + */ + toggleHighContrast(e) { + const isHighContrast = e.detail.value + this.setData({ isHighContrast }) + wx.setStorageSync('isHighContrast', isHighContrast) + this.applyModeSettings() + }, + + /** + * 应用模式设置 + */ + applyModeSettings() { + const { isDarkMode, isHighContrast } = this.data + + // 创建或删除高对比度样式 + this.createOrRemoveHighContrastStyle(isHighContrast) + + // 更新窗口背景和导航栏样式 + this.updateWindowStyle(isDarkMode) + + console.log(`黑白测试模式设置: 深色模式=${isDarkMode}, 高对比度=${isHighContrast}`) + wx.showToast({ + title: '模式已更新', + icon: 'success' + }) + }, + + /** + * 创建或删除高对比度样式 + */ + createOrRemoveHighContrastStyle(enable) { + // 移除旧的高对比度样式 + const oldStyle = wx.createSelectorQuery().select('#highContrastStyle') + oldStyle.context((res) => { + if (res.context) { + wx.removeStyleSheet('#highContrastStyle') + } + }) + + if (enable) { + // 创建高对比度样式 + const styleContent = ` + /* 高对比度样式 */ + * { + filter: grayscale(100%) contrast(120%) !important; + } + + /* 确保文字可读性 */ + text, span, div, p { + color: #000 !important; + background-color: #fff !important; + } + + /* 按钮和交互元素 */ + button, .btn { + border: 2px solid #000 !important; + color: #000 !important; + background-color: #fff !important; + } + ` + + // 动态添加样式 + const styleSheet = document.createElement('style') + styleSheet.id = 'highContrastStyle' + styleSheet.textContent = styleContent + document.head.appendChild(styleSheet) + } + }, + + /** + * 更新窗口样式 + */ + updateWindowStyle(isDarkMode) { + wx.setNavigationBarColor({ + frontColor: isDarkMode ? '#ffffff' : '#000000', + backgroundColor: isDarkMode ? '#000000' : '#ffffff', + animation: { + duration: 400, + timingFunc: 'easeInOut' + } + }) + + wx.setBackgroundColor({ + backgroundColor: isDarkMode ? '#000000' : '#ffffff', + backgroundColorTop: isDarkMode ? '#000000' : '#ffffff', + backgroundColorBottom: isDarkMode ? '#000000' : '#ffffff' + }) + }, + + /** + * 重置所有设置 + */ + resetAllSettings() { + this.setData({ + isDarkMode: false, + isHighContrast: false + }) + wx.setStorageSync('isDarkMode', false) + wx.setStorageSync('isHighContrast', false) + this.applyModeSettings() + } +}) \ No newline at end of file diff --git a/pages/test-tools/test-mode-switch.wxml b/pages/test-tools/test-mode-switch.wxml new file mode 100644 index 0000000..1fb3963 --- /dev/null +++ b/pages/test-tools/test-mode-switch.wxml @@ -0,0 +1,50 @@ + + + + 黑白测试设置 + 调整应用的显示模式以进行黑白测试 + + + + + 深色模式 + 切换应用的明/暗主题 + + + + + + + 高对比度模式 + 启用黑白高对比度显示 + + + + + + + + + + 提示： + 1. 深色模式会改变应用的整体色调 + 2. 高对比度模式会将所有元素转为黑白并提高对比度 + 3. 这些设置会保存在本地，下次打开应用时自动应用 + + \ No newline at end of file diff --git a/pages/test-tools/test-mode-switch.wxss b/pages/test-tools/test-mode-switch.wxss new file mode 100644 index 0000000..73d1bf2 --- /dev/null +++ b/pages/test-tools/test-mode-switch.wxss @@ -0,0 +1,149 @@ +/** pages/test-tools/test-mode-switch.wxss **/ +.container { + padding: 40rpx 30rpx; + background-color: #fff; + min-height: 100vh; +} + +.header { + text-align: center; + margin-bottom: 60rpx; +} + +.title { + font-size: 36rpx; + font-weight: bold; + color: #333; + display: block; + margin-bottom: 20rpx; +} + +.subtitle { + font-size: 26rpx; + color: #666; + display: block; + line-height: 1.5; +} + +.setting-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 30rpx 0; + border-bottom: 1rpx solid #f0f0f0; +} + +.setting-label { + flex: 1; + margin-right: 30rpx; +} + +.label-text { + font-size: 30rpx; + color: #333; + display: block; + margin-bottom: 8rpx; +} + +.label-desc { + font-size: 24rpx; + color: #999; + display: block; + line-height: 1.4; +} + +.setting-switch { + transform: scale(1.2); +} + +.button-group { + margin-top: 60rpx; + padding: 0 20rpx; +} + +.reset-button { + width: 100%; + height: 90rpx; + line-height: 90rpx; + font-size: 30rpx; + border-radius: 15rpx; + border: 2rpx solid #1AAD19; + color: #1AAD19; + background-color: #fff; +} + +.reset-button:active { + background-color: #f0f0f0; +} + +.tips { + margin-top: 60rpx; + padding: 30rpx; + background-color: #f8f8f8; + border-radius: 15rpx; + border-left: 4rpx solid #1AAD19; +} + +.tip-text { + font-size: 28rpx; + font-weight: bold; + color: #333; + display: block; + margin-bottom: 15rpx; +} + +.tip-content { + font-size: 24rpx; + color: #666; + display: block; + margin-bottom: 10rpx; + line-height: 1.5; +} + +/* 深色模式适配 */ +.container.dark-mode { + background-color: #1a1a1a; +} + +.container.dark-mode .title { + color: #fff; +} + +.container.dark-mode .subtitle { + color: #ccc; +} + +.container.dark-mode .setting-item { + border-bottom-color: #333; +} + +.container.dark-mode .label-text { + color: #fff; +} + +.container.dark-mode .label-desc { + color: #999; +} + +.container.dark-mode .reset-button { + border-color: #4CAF50; + color: #4CAF50; + background-color: #1a1a1a; +} + +.container.dark-mode .reset-button:active { + background-color: #333; +} + +.container.dark-mode .tips { + background-color: #2a2a2a; + border-left-color: #4CAF50; +} + +.container.dark-mode .tip-text { + color: #fff; +} + +.container.dark-mode .tip-content { + color: #ccc; +} \ No newline at end of file