a8d7183d7c
T40 小程序 UI 审计全部 60 页面，发现 28 项问题（HIGH×3 MEDIUM×10 LOW×15）， 全部修复并通过静态验证（0 硬编码 border-radius/font-size 残留）。 主要修复： - border-radius: 12 个文件硬编码值 → $r-xs/$r-lg/$r-pill 设计 token - touch target: 5 个交互元素添加 min-height: 48px（action-inbox/mall/family/medication） - elder-mode 页面接入 useElderClass()，预览字号改用 var(--tk-font-body) - consultation 页面增加加载失败 toast 提示 - app.tsx 新增 forceSetAuth bridge 解决 MCP auth 注入兼容问题 - FAB 按钮和开关控件尺寸规范化 审计结果：PASS 41 / PASS_WITH_ISSUES 19 → 修复后全量 PASS
61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { View, Text } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
import { useUIStore } from '../../../stores/ui';
|
||
import { useElderClass } from '../../../hooks/useElderClass';
|
||
import './index.scss';
|
||
|
||
export default function ElderMode() {
|
||
const mode = useUIStore((s) => s.mode);
|
||
const setMode = useUIStore((s) => s.setMode);
|
||
const isElder = mode === 'elder';
|
||
const modeClass = useElderClass();
|
||
|
||
const handleToggle = () => {
|
||
const next = isElder ? 'normal' : 'elder';
|
||
setMode(next);
|
||
Taro.showToast({
|
||
title: next === 'elder' ? '已开启长辈模式' : '已关闭长辈模式',
|
||
icon: 'none',
|
||
duration: 1500,
|
||
});
|
||
};
|
||
|
||
return (
|
||
<View className={`elder-mode-page ${modeClass}`}>
|
||
<View className='elder-mode-card'>
|
||
<View className='elder-mode-header'>
|
||
<Text className='elder-mode-icon'>老</Text>
|
||
<View className='elder-mode-info'>
|
||
<Text className='elder-mode-title'>长辈模式</Text>
|
||
<Text className='elder-mode-desc'>放大字体和按钮，更易阅读和操作</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='elder-mode-status'>
|
||
<Text className='elder-mode-status-text'>
|
||
当前状态：{isElder ? '已开启' : '已关闭'}
|
||
</Text>
|
||
<View
|
||
className={`elder-mode-switch ${isElder ? 'elder-mode-switch--on' : ''}`}
|
||
onClick={handleToggle}
|
||
>
|
||
<View className='elder-mode-switch-thumb' />
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='elder-mode-preview'>
|
||
<Text className='elder-mode-preview-title'>效果预览</Text>
|
||
<View className='elder-mode-preview-card'>
|
||
<Text className={`elder-mode-preview-sample ${isElder ? 'elder-mode-preview-sample--large' : ''}`}>
|
||
{isElder ? '长辈模式字体示例' : '标准模式字体示例'}
|
||
</Text>
|
||
<Text className='elder-mode-preview-note'>
|
||
{isElder ? '字号放大 1.3 倍，间距放大 1.2 倍' : '正常字号和间距'}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|