feat(miniprogram): 访客模式 + 长辈模式 + MCP 自动化脚本
访客模式： - 未登录用户可见首页（轮播图+健康资讯+登录引导）和"我的"页面 - 健康和消息 tab 显示 GuestGuard 登录拦截 - 登录页增加"暂不登录，先看看"跳过入口 - 401 拦截器增加 hasToken 检查，避免访客被重定向到登录页 - 退出登录后 reLaunch 到首页而非登录页 长辈模式： - 新增 stores/ui.ts 管理显示模式（标准/长辈） - 长辈模式放大字体 ×1.3、间距 ×1.2、按钮加大 - "我的 → 账号 → 长辈模式"切换页 - 设置持久化到 Storage 修复： - Health/Messages 页面 Hooks 顺序违规（条件 return 在 hooks 之间） 导致访客模式下页面白屏，所有 hooks 移到条件判断之前 工程： - scripts/mpsync.sh/ps1 自动清理残留 DevTools 进程 - project.config.json 默认关闭域名校验
This commit is contained in:
iven
132
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
Normal file
132
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.scss
Normal file
@@ -0,0 +1,132 @@
|
||||
@import '../../../styles/variables.scss';
|
||||
@import '../../../styles/mixins.scss';
|
||||
|
||||
.elder-mode-page {
|
||||
min-height: 100vh;
|
||||
background: $bg;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.elder-mode-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 24px;
|
||||
box-shadow: $shadow-md;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.elder-mode-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.elder-mode-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: $r-sm;
|
||||
background: $acc-l;
|
||||
@include flex-center;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $acc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.elder-mode-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.elder-mode-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.elder-mode-desc {
|
||||
font-size: 13px;
|
||||
color: $tx3;
|
||||
}
|
||||
|
||||
.elder-mode-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0 0;
|
||||
border-top: 1px solid $bd-l;
|
||||
}
|
||||
|
||||
.elder-mode-status-text {
|
||||
font-size: 15px;
|
||||
color: $tx2;
|
||||
}
|
||||
|
||||
.elder-mode-switch {
|
||||
width: 52px;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
background: $bd;
|
||||
position: relative;
|
||||
transition: background 0.25s;
|
||||
|
||||
&--on {
|
||||
background: $acc;
|
||||
}
|
||||
}
|
||||
|
||||
.elder-mode-switch-thumb {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: transform 0.25s;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.elder-mode-switch--on & {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 效果预览 ─── */
|
||||
.elder-mode-preview {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.elder-mode-preview-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $tx2;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.elder-mode-preview-card {
|
||||
background: $card;
|
||||
border-radius: $r;
|
||||
padding: 20px;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.elder-mode-preview-sample {
|
||||
font-size: 16px;
|
||||
color: $tx;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
transition: font-size 0.25s;
|
||||
|
||||
&--large {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
.elder-mode-preview-note {
|
||||
font-size: 13px;
|
||||
color: $tx3;
|
||||
}
|
||||
58
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.tsx
Normal file
58
apps/miniprogram/src/pages/pkg-profile/elder-mode/index.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { View, Text } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
import { useUIStore } from '../../../stores/ui';
|
||||
import './index.scss';
|
||||
|
||||
export default function ElderMode() {
|
||||
const mode = useUIStore((s) => s.mode);
|
||||
const setMode = useUIStore((s) => s.setMode);
|
||||
const isElder = mode === 'elder';
|
||||
|
||||
const handleToggle = () => {
|
||||
const next = isElder ? 'normal' : 'elder';
|
||||
setMode(next);
|
||||
Taro.showToast({
|
||||
title: next === 'elder' ? '已开启长辈模式' : '已关闭长辈模式',
|
||||
icon: 'none',
|
||||
duration: 1500,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View className='elder-mode-page'>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user