damer/mindfulness
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Ipad适配问题

Browse Source
This commit is contained in:
吕新雨
2026-03-03 19:55:53 +08:00
parent 0ad21da246
commit d37262876b
20 changed files with 692 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
client/app/(app)/home.tsx
View File

@@ -2,13 +2,13 @@ import { useEffect, useLayoutEffect, useMemo, useState, useCallback, useRef } fr
import {
StyleSheet,
View,
Dimensions,
Text,
Pressable,
PanResponder,
Animated as RNAnimated,
ImageBackground,
Platform,
useWindowDimensions,
} from 'react-native';
import { useTranslation } from 'react-i18next';
import { useFocusEffect } from 'expo-router';
@@ -57,8 +57,6 @@ import { wrapText } from '@/src/features/textWrap';
import { defaultMeasureWidthImpl } from '@/src/features/textWrap/measure';
import { ensureDailyWidgetRecoUpToDate } from '@/src/modules/dailyWidgetReco';
const { height: SCREEN_HEIGHT } = Dimensions.get('window');
// 预定义风景图列表
const NATURE_IMAGES = [
require('@/assets/theme/nature/1.png'),
@@ -97,7 +95,9 @@ type FeedItem = { content_id: string; text: string };
export default function HomeScreen() {
const { t, i18n } = useTranslation();
const { width: windowWidth, height: windowHeight } = useWindowDimensions();
const isEnglish = i18n.language?.startsWith('en');
const isTablet = Platform.OS === 'ios' && Math.min(windowWidth, windowHeight) >= 768;
const recoLang: 'en' | 'tc' = toBackendLocaleFromLanguageTag(i18n.language);
const insets = useSafeAreaInsets();
const [index, setIndex] = useState(0);
@@ -248,8 +248,8 @@ export default function HomeScreen() {
});
const fontSpec = {
fontSize: 22,
fontWeight: lang === 'EN' ? '600' : '700',
fontSize: 24,
fontWeight: lang === 'EN' ? '700' : '800',
fontFamily: String(fontFamily ?? 'System'),
};
@@ -659,6 +659,10 @@ export default function HomeScreen() {
}
}
const actionsBottom = isTablet
? Math.max(insets.bottom + 36, Math.min(windowHeight * 0.12, 140))
: windowHeight * 0.16;
return (
<View style={[styles.container, { backgroundColor }]} {...panResponder.panHandlers}>
{themeMode === 'scenery' && (
@@ -670,7 +674,15 @@ export default function HomeScreen() {
)}
{/* 自绘顶部按钮：不使用系统 Header，彻底避免 iOS 导航栏的毛玻璃/液玻璃材质 */}
<View style={[styles.topRight, { top: insets.top + 8 }]}>
<View
style={[
styles.topRight,
{
top: insets.top + (isTablet ? 16 : 8),
right: isTablet ? 26 : 20,
},
]}
>
<CircleIconButton
onPress={() => setThemeOpen(true)}
accessibilityLabel={t('home.theme')}
@@ -685,19 +697,21 @@ export default function HomeScreen() {
</CircleIconButton>
</View>
<Animated.View
style={[styles.card, textAnimatedStyle, themeMode === 'scenery' && styles.sceneryCard]}
onLayout={(e) => {
const w = e.nativeEvent.layout.width;
if (Number.isFinite(w) && w > 0) setCardWidth(w);
}}
>
<Text style={[styles.text, isEnglish && styles.textEnglish, themeMode === 'scenery' && styles.sceneryText]}>
{wrappedText || item.text}
</Text>
<Animated.View style={[styles.card, textAnimatedStyle, themeMode === 'scenery' && styles.sceneryCard]}>
<View
style={[styles.textMeasureBox, isTablet && styles.textMeasureBoxTablet]}
onLayout={(e) => {
const w = e.nativeEvent.layout.width;
if (Number.isFinite(w) && w > 0) setCardWidth(w);
}}
>
<Text style={[styles.text, isEnglish && styles.textEnglish, themeMode === 'scenery' && styles.sceneryText]}>
{wrappedText || item.text}
</Text>
</View>
</Animated.View>
<View style={styles.actions}>
<View style={[styles.actions, { bottom: actionsBottom }]}>
<Animated.View style={[styles.reactionButton, likeAnimatedStyle]}>
<Pressable
onPress={onPressLike}
@@ -762,7 +776,6 @@ const styles = StyleSheet.create({
},
topRight: {
position: 'absolute',
right: 20,
flexDirection: 'row',
gap: 10,
zIndex: 30,
@@ -787,16 +800,23 @@ const styles = StyleSheet.create({
zIndex: 5, // 降低层级，防止遮挡底部按钮
},
text: {
fontSize: 22,
lineHeight: 32,
fontSize: 24,
lineHeight: 34,
color: '#5E2A28',
fontWeight: '700',
fontWeight: '800',
textAlign: 'center',
},
textMeasureBox: {
width: '100%',
alignItems: 'center',
},
textMeasureBoxTablet: {
maxWidth: 760,
},
textEnglish: {
fontFamily: 'STIXTwoText',
// 英文字体观感更细一点，避免过粗
fontWeight: '600',
// 英文字体保持较粗但避免过度发黑
fontWeight: '700',
},
sceneryCard: {
// 风景模式下稍微收窄文案宽度，增加呼吸感
@@ -810,7 +830,6 @@ const styles = StyleSheet.create({
},
actions: {
position: 'absolute',
bottom: SCREEN_HEIGHT * 0.16,
left: 0,
right: 0,
flexDirection: 'row',

22
client/app/(app)/settings.tsx
View File

@@ -1,9 +1,13 @@
import Constants from 'expo-constants';
import { StyleSheet, Text, View } from 'react-native';
import { Platform, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import { useTranslation } from 'react-i18next';
import { clampContentWidth, isIPadLike } from '@/src/utils/device';
export default function SettingsScreen() {
const { t } = useTranslation();
const { width, height } = useWindowDimensions();
const isTablet = isIPadLike(width, height);
const contentWidth = isTablet ? clampContentWidth(width, 720, 24) : undefined;
const version =
Constants.expoConfig?.version ??
@@ -12,6 +16,7 @@ export default function SettingsScreen() {
return (
<View style={styles.container}>
<View style={[styles.contentWrap, contentWidth ? { width: contentWidth } : null]}>
<View style={styles.section}>
<Text style={styles.label}>{t('settings.version')}</Text>
<Text style={styles.value}>{version}</Text>
@@ -21,12 +26,18 @@ export default function SettingsScreen() {
<Text style={styles.cardTitle}>{t('settings.widgetTitle')}</Text>
<Text style={styles.cardText}>{t('settings.widgetDesc')}</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, gap: 16 },
container: { flex: 1, width: '100%', alignSelf: 'stretch', padding: 16 },
contentWrap: {
width: '100%',
alignSelf: 'center',
gap: 16,
},
section: {
borderRadius: 14,
padding: 16,
@@ -38,7 +49,12 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
label: { color: '#374151', fontSize: 16 },
value: { color: '#111827', fontSize: 16, fontWeight: '600' },
value: {
color: '#111827',
fontSize: 16,
fontWeight: '600',
fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : undefined,
},
card: {
borderRadius: 16,
padding: 16,

58
client/app/(splash)/splash.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Platform, Alert, Image } from 'react-native';
import { View, Text, StyleSheet, TouchableOpacity, Platform, Alert, Image, useWindowDimensions } from 'react-native';
import { useRouter } from 'expo-router';
import * as WebBrowser from 'expo-web-browser';
import { Trans, useTranslation } from 'react-i18next';
@@ -14,8 +14,6 @@ import { isTraditionalChineseLocaleTag } from '@/src/i18n/locale';
import FlowersBg from '../../assets/images/index/flowers_endbg.svg';
import WelcomeBtn from '../../assets/images/index/welcome_btn.svg';
const { width, height } = Dimensions.get('window');
// 繁中開屏 consent 文案：寫死在元件內，避免 Metro/iOS bundle 快取導致永遠顯示舊文案。
// 若需修改，請改這裡並同步 client/src/i18n/locales/zh-TW.json 的 consent 區塊。
const ZH_TW_CONSENT = {
@@ -27,7 +25,9 @@ const ZH_TW_CONSENT = {
export default function SplashScreen() {
const router = useRouter();
const { t, i18n } = useTranslation();
const { width, height } = useWindowDimensions();
const [showConsent, setShowConsent] = useState(false);
const isTablet = Platform.OS === 'ios' && Math.min(width, height) >= 768;
// 繁中時強制使用上方常數（含 zh-TW / zh-Hant / zh-Hant-TW），其餘用 i18n
const isZhTW = isTraditionalChineseLocaleTag(i18n.language || '');
@@ -127,52 +127,67 @@ export default function SplashScreen() {
void refreshLegalLinks();
}, []);
const bgDecorationTop = 363;
const bgDecorationHeight = height * 0.6;
const bgDecorationHeight = isTablet ? Math.round(height * 0.55) : height * 0.6;
const bgDecorationTop = height - bgDecorationHeight;
const contentTop = bgDecorationTop + (bgDecorationHeight * 0.25);
const contentWidth = isTablet ? Math.min(640, Math.floor(width * 0.76)) : width;
const topImageWidth = isTablet ? Math.min(430, Math.floor(width * 0.48)) : 308;
const topImageHeight = isTablet ? Math.min(460, Math.floor(height * 0.45)) : 354;
const topImageMarginTop = isTablet ? 148 : 60;
const bgWidth = width + 10;
const bgLeft = -3;
const buttonSize = isTablet ? { width: 108, height: 70 } : { width: 87, height: 57 };
const bottomOffset = isTablet ? 28 : 60;
const buttonBottomGap = isTablet ? 28 : 40;
const noticeStyle = isTablet
? { fontSize: 14, lineHeight: 20, paddingHorizontal: 32, maxWidth: contentWidth }
: null;
const noticeLinkStyle = isTablet ? { fontSize: 14 } : null;
const titleStyle = isTablet ? { fontSize: 50, lineHeight: 60 } : null;
const subtitleStyle = isTablet ? { marginTop: 10, fontSize: 18, lineHeight: 24 } : null;
return (
<View style={styles.container}>
{/* 中间的背景装饰 SVG (现在放在上面，作为上层) */}
<View style={[styles.bgDecorationContainer, { top: bgDecorationTop }]}>
<FlowersBg width={width + 10} height={bgDecorationHeight} />
<View style={[styles.bgDecorationContainer, { bottom: 0, left: bgLeft }]}>
<FlowersBg width={bgWidth} height={bgDecorationHeight} preserveAspectRatio="none" />
</View>
{/* 顶部的花图片 (现在放在下面，作为下层) */}
<View style={styles.topImageContainer}>
<View style={[styles.topImageContainer, { marginTop: topImageMarginTop }]}>
<Image
source={require('../../assets/images/index/index_flowers.png')}
style={styles.topImage}
style={[styles.topImage, { width: topImageWidth, height: topImageHeight }]}
resizeMode="contain"
/>
</View>
{/* 文案内容：主標題兩行 + 可選二級標題（字號更小、顏色更淺）；繁中為元件內常數，其餘用 i18n */}
<View style={[styles.contentContainer, { position: 'absolute', top: contentTop }]}>
<Text style={styles.titleText}>
<View style={[styles.contentContainer, { position: 'absolute', top: contentTop, width: contentWidth }]}>
<Text style={[styles.titleText, titleStyle]}>
{title}
{'\n'}
{subtitle}
</Text>
{subtitleSecondary ? (
<Text style={styles.consentSubtitleSecondary}>{subtitleSecondary}</Text>
<Text style={[styles.consentSubtitleSecondary, subtitleStyle]}>{subtitleSecondary}</Text>
) : null}
</View>
<SafeAreaView style={styles.bottomContainer} edges={['bottom']}>
<SafeAreaView style={[styles.bottomContainer, { bottom: bottomOffset, width: contentWidth }]} edges={['bottom']}>
{showConsent && (
<>
<TouchableOpacity
onPress={handleAgree}
activeOpacity={0.8}
style={styles.buttonWrapper}
style={[styles.buttonWrapper, { marginBottom: buttonBottomGap }]}
accessibilityRole="button"
accessibilityLabel={t('consent.agree')}
>
<WelcomeBtn width={87} height={57} />
<WelcomeBtn width={buttonSize.width} height={buttonSize.height} />
</TouchableOpacity>
<Text style={styles.noticeText}>
<Text style={[styles.noticeText, noticeStyle]}>
<Trans
i18nKey="consent.noticeRich"
values={{
@@ -184,14 +199,14 @@ export default function SplashScreen() {
components={{
privacy: (
<Text
style={[styles.noticeLinkText, !links.privacy && styles.noticeLinkTextDisabled]}
style={[styles.noticeLinkText, noticeLinkStyle, !links.privacy && styles.noticeLinkTextDisabled]}
onPress={() => void handleOpenLegal('privacy')}
suppressHighlighting
/>
),
terms: (
<Text
style={[styles.noticeLinkText, !links.terms && styles.noticeLinkTextDisabled]}
style={[styles.noticeLinkText, noticeLinkStyle, !links.terms && styles.noticeLinkTextDisabled]}
onPress={() => void handleOpenLegal('terms')}
suppressHighlighting
/>
@@ -209,11 +224,13 @@ export default function SplashScreen() {
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
alignSelf: 'stretch',
backgroundColor: '#F5D3B5', // 匹配 Figma 背景色
alignItems: 'center',
},
topImageContainer: {
marginTop: 60,
zIndex: 1, // 降低层级
},
topImage: {
@@ -222,7 +239,6 @@ const styles = StyleSheet.create({
},
bgDecorationContainer: {
position: 'absolute',
left: -3,
zIndex: 2, // 提高层级，使其覆盖在图片之上
},
contentContainer: {
@@ -247,8 +263,6 @@ const styles = StyleSheet.create({
},
bottomContainer: {
position: 'absolute',
bottom: 60,
width: '100%',
alignItems: 'center',
zIndex: 4,
},

23
client/app/+not-found.tsx
View File

@@ -1,18 +1,25 @@
import { Link, Stack } from 'expo-router';
import { StyleSheet } from 'react-native';
import { StyleSheet, useWindowDimensions } from 'react-native';
import { Text, View } from '@/components/Themed';
import { clampContentWidth, isIPadLike } from '@/src/utils/device';
export default function NotFoundScreen() {
const { width, height } = useWindowDimensions();
const isTablet = isIPadLike(width, height);
const contentWidth = isTablet ? clampContentWidth(width, 680, 24) : undefined;
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<View style={styles.container}>
<Text style={styles.title}>This screen doesn't exist.</Text>
<View style={[styles.contentWrap, contentWidth ? { width: contentWidth } : null]}>
<Text style={styles.title}>This screen doesn't exist.</Text>
<Link href="/" style={styles.link}>
<Text style={styles.linkText}>Go to home screen!</Text>
</Link>
<Link href="/" style={styles.link}>
<Text style={styles.linkText}>Go to home screen!</Text>
</Link>
</View>
</View>
</>
);
@@ -24,6 +31,12 @@ const styles = StyleSheet.create({
alignItems: 'center',
justifyContent: 'center',
padding: 20,
width: '100%',
alignSelf: 'stretch',
},
contentWrap: {
width: '100%',
alignItems: 'center',
},
title: {
fontSize: 20,

23
client/app/index.tsx
View File

@@ -1,14 +1,18 @@
import { useEffect } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { ActivityIndicator, StyleSheet, View, useWindowDimensions } from 'react-native';
import { useRouter } from 'expo-router';
import { getOnboardingCompleted, getConsentAccepted } from '@/src/storage/appStorage';
import { clampContentWidth, isIPadLike } from '@/src/utils/device';
/**
* 启动分发：根据 consent 和 onboarding 状态跳转
*/
export default function Index() {
const router = useRouter();
const { width, height } = useWindowDimensions();
const isTablet = isIPadLike(width, height);
const loaderWidth = isTablet ? clampContentWidth(width, 680, 24) : undefined;
useEffect(() => {
let cancelled = false;
@@ -41,11 +45,24 @@ export default function Index() {
return (
<View style={styles.container}>
<ActivityIndicator />
<View style={[styles.loaderWrap, loaderWidth ? { width: loaderWidth } : null]}>
<ActivityIndicator />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
container: {
flex: 1,
width: '100%',
height: '100%',
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
},
loaderWrap: {
alignItems: 'center',
justifyContent: 'center',
},
});

21
client/app/modal.tsx
View File

@@ -1,15 +1,22 @@
import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet } from 'react-native';
import { Platform, StyleSheet, useWindowDimensions } from 'react-native';
import EditScreenInfo from '@/components/EditScreenInfo';
import { Text, View } from '@/components/Themed';
import { clampContentWidth, isIPadLike } from '@/src/utils/device';
export default function ModalScreen() {
const { width, height } = useWindowDimensions();
const isTablet = isIPadLike(width, height);
const contentWidth = isTablet ? clampContentWidth(width, 700, 24) : undefined;
return (
<View style={styles.container}>
<Text style={styles.title}>Modal</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="app/modal.tsx" />
<View style={[styles.contentWrap, contentWidth ? { width: contentWidth } : null]}>
<Text style={styles.title}>Modal</Text>
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
<EditScreenInfo path="app/modal.tsx" />
</View>
{/* Use a light status bar on iOS to account for the black space above the modal */}
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
@@ -22,6 +29,12 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
alignSelf: 'stretch',
},
contentWrap: {
width: '100%',
alignItems: 'center',
},
title: {
fontSize: 20,