oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-11-07 17:29:49 +08:00
1 parent d6dd5b032d
commit 8a6d29f5d0
16 files changed
+514 -69
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-app/src/app/(tabs)/_layout.tsx
+10 -6
View File
@@ -2,19 +2,22 @@ import type { TabbarItem } from '@/components/custom/Tabbar'
import CustomTabbar from '@/components/custom/Tabbar'
import { toast } from '@/utils/toast'
export const unstable_settings = {
initialRouteName: 'money',
}
export default function TabsLayout() {
const tabbarOptions: TabbarItem[] = [
{
name: 'user',
href: '/user',
icon: 'CircleCheckBig',
},
{
name: 'money',
href: '/money',
icon: 'CircleDollarSign',
},
{
name: 'user',
href: '/user',
icon: 'CircleCheckBig',
},
{
name: 'app',
icon: 'LayoutGrid',
@@ -37,6 +40,7 @@ export default function TabsLayout() {
icon: 'Heart',
},
]
return (
<CustomTabbar data={tabbarOptions} />
)
code/base-project/base-app/src/app/(tabs)/money.tsx
+48 -4
View File
@@ -1,9 +1,53 @@
import { Text, View } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import { useState } from 'react'
import { Pressable, Text, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
export default function Money() {
const insets = useSafeAreaInsets()
const [active, setActive] = useState<'明细' | '视图'>('明细')
return (
<View>
<Text>Money</Text>
</View>
<LinearGradient
colors={['#fffaf0', '#fefefe', '#f0fff4']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={{
flex: 1,
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}
>
<View style={{ flexDirection: 'row' }}>
{['明细', '视图'].map((item) => {
const isActive = active === item
return (
<Pressable
key={item}
onPress={() => setActive(item as '明细' | '视图')}
style={{ alignItems: 'center', paddingVertical: 12 }}
>
<Text style={{ fontSize: isActive ? 22 : 16, color: isActive ? '#333' : '#888', fontWeight: isActive ? '600' : '400' }}>
{item}
</Text>
{/* 底部指示线 */}
{isActive && (
<View
style={{
marginTop: 4,
height: 2,
width: 24,
backgroundColor: '#007AFF',
borderRadius: 1,
}}
/>
)}
</Pressable>
)
})}
</View>
</LinearGradient>
)
}
code/base-project/base-app/src/app/(tabs)/user.tsx
+77 -3
View File
@@ -1,9 +1,83 @@
import { Text, View } from 'react-native'
import { router } from 'expo-router'
import { StyleSheet, Text, View } from 'react-native'
import { AButton } from '@/components/common/ao'
import { useUserStore } from '@/store/user'
export default function User() {
const userInfo = useUserStore(state => state.userInfo)
if (!userInfo) {
return (
<View style={styles.container}>
<Text style={styles.empty}>未登录</Text>
</View>
)
}
const genderText = userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置'
return (
<View>
<Text>User</Text>
<View style={styles.container}>
<Text style={styles.title}>个人信息</Text>
<View style={styles.infoBox}>
<Text style={styles.item}>
账号：
{userInfo.account}
</Text>
<Text style={styles.item}>
用户名：
{userInfo.username}
</Text>
<Text style={styles.item}>
ID：
{userInfo.id}
</Text>
<Text style={styles.item}>
序号：
{userInfo.seqNo}
</Text>
<Text style={styles.item}>
性别：
{genderText}
</Text>
{userInfo.rememberMe && <Text style={styles.item}>已开启记住我功能</Text>}
</View>
<AButton onPress={() => {
router.replace('/auth')
}}
>
跳转到登陆页面
</AButton>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
padding: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 16,
},
infoBox: {
backgroundColor: '#f8f8f8',
borderRadius: 12,
padding: 16,
},
item: {
fontSize: 16,
marginBottom: 8,
color: '#333',
},
empty: {
textAlign: 'center',
marginTop: 100,
fontSize: 18,
color: '#888',
},
})
code/base-project/base-app/src/app/_layout.tsx
+7 -3
View File
@@ -59,8 +59,8 @@ export default function RootLayout() {
screenOptions={{
headerTitleAlign: 'center',
animation: 'slide_from_right',
gestureEnabled: true, // 启用手势返回
gestureDirection: 'horizontal', // 水平手势
gestureEnabled: true,
gestureDirection: 'horizontal',
contentStyle: {
backgroundColor: '#fff',
},
@@ -68,14 +68,18 @@ export default function RootLayout() {
>
<Stack.Screen
name="(tabs)"
options={{ headerShown: false }}
options={{
headerShown: false,
}}
/>
<Stack.Screen
name="auth"
options={{
headerShown: false,
}}
/>
<Stack.Screen name="+not-found" />
</Stack>
<StatusBar style="auto" />
code/base-project/base-app/src/app/auth/_layout.tsx
-1
View File
@@ -25,6 +25,5 @@ export default function AuthLayout() {
<StepLayout steps={steps}>
<Slot />
</StepLayout>
)
}
code/base-project/base-app/src/app/auth/login.tsx
+38 -21
View File
@@ -6,10 +6,11 @@ import { IconQq, IconWeixin, IconZhiwen } from '@/components/iconfont'
import { Divider } from '@/components/ui/divider'
import useFormValidation from '@/hooks/useFormValidation'
import { loginDefaultApi } from '@/request/api/auth'
import { useUserStore } from '@/store/user'
import { toast } from '@/utils/toast'
interface LoginForm {
username: string
account: string
password: string
rememberMe: boolean
socialType?: 'qq' | 'weixin' | 'fingerprint'
@@ -17,10 +18,11 @@ interface LoginForm {
export default function AuthLogin() {
const router = useRouter()
const userStore = useUserStore()
const [loading, setLoading] = useState<boolean>(false)
const [form, setForm] = useState<LoginForm>({
username: '',
account: userStore.userInfo?.account || '',
password: '',
rememberMe: true,
})
@@ -30,7 +32,7 @@ export default function AuthLogin() {
}
const rules = {
username: { required: true, message: '账号是必填项' },
account: { required: true, message: '账号是必填项' },
password: { required: true, message: '密码是必填项' },
}
@@ -38,23 +40,38 @@ export default function AuthLogin() {
const loginDefault = () => {
setLoading(true)
// loginDefaultApi({
// account: form.username,
// password: form.password,
// }).then((res) => {
// if (res.isSuccess) {
// router.replace('/')
// }
// else {
// toast.show({
// title: res.message || '登录失败',
// })
// }
// }).catch((_err) => {
loginDefaultApi({
account: form.account,
password: form.password,
}).then((res) => {
if (res.isSuccess) {
toast.show({
title: '登录成功',
})
// }).finally(() => {
// setLoading(false)
// })
userStore.setUserInfo({
account: form.account,
id: res.data.userId,
seqNo: res.data.seqNo,
username: res.data.username,
gender: res.data.gender,
token: res.data.token,
refreshToken: res.data.refreshToken,
rememberMe: form.rememberMe,
})
router.replace('/user')
}
else {
toast.show({
title: res.message || '登录失败',
})
}
}).catch((_err) => {
}).finally(() => {
setLoading(false)
})
}
const loginQq = () => {
@@ -78,8 +95,8 @@ export default function AuthLogin() {
<AForm form={form}>
<AFormItem label="账号">
<AInput
value={form.username}
onChange={text => handleInputChange('username', text)}
value={form.account}
onChange={text => handleInputChange('account', text)}
/>
</AFormItem>
code/base-project/base-app/src/components/common/ao/Input.tsx
+11 -10
View File
@@ -1,6 +1,7 @@
import type { ComponentType } from 'react'
import type { StyleProp, ViewStyle } from 'react-native'
import { useState } from 'react'
import { Pressable } from 'react-native'
import { EyeIcon, EyeOffIcon } from '@/components/ui/icon'
import { InputField, InputIcon, InputSlot, Input as NativeInput } from '@/components/ui/input'
@@ -52,23 +53,23 @@ export default function Input({
className={className}
style={style}
>
{leftIcon
? (
<InputSlot className="pl-3">
<InputIcon as={leftIcon} />
</InputSlot>
)
: null}
{leftIcon && (
<InputSlot className="pl-3">
<InputIcon as={leftIcon} />
</InputSlot>
)}
<InputField
value={value}
onChangeText={onChange}
placeholder={placeholder}
type={isPassword ? 'password' : 'text'}
type={isPassword ? (showPassword ? 'text' : 'password') : 'text'}
{...rest}
/>
{isPassword && (
<InputSlot className="pr-3" onPress={() => setShowPassword(prev => !prev)}>
<InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
<InputSlot className="pr-3">
<Pressable onPress={() => setShowPassword(prev => !prev)}>
<InputIcon as={showPassword ? EyeIcon : EyeOffIcon} />
</Pressable>
</InputSlot>
)}
</NativeInput>
code/base-project/base-app/src/components/custom/StepLayout.tsx
+10 -1
View File
@@ -1,5 +1,6 @@
import { Ionicons } from '@expo/vector-icons'
import { usePathname, useRouter } from 'expo-router'
import { useRef } from 'react'
import { Image, Pressable, Text, View } from 'react-native'
import Animated, { SlideInLeft, SlideInRight } from 'react-native-reanimated'
import { SafeAreaView } from 'react-native-safe-area-context'
@@ -31,7 +32,15 @@ export default function StepLayout({ steps, children, showHearder = true }: Step
// 是否显示header
const headerVisible = showHearder !== false && currentStep.showHearder !== false
const enteringAnimation = canGoBack ? SlideInRight.duration(300) : SlideInLeft.duration(300)
const hasMounted = useRef(false)
const enteringAnimation = hasMounted.current
? canGoBack
? SlideInRight.duration(300)
: SlideInLeft.duration(300)
: undefined
hasMounted.current = true
return (
<SafeAreaView style={{ flex: 1 }}>
code/base-project/base-app/src/components/custom/Tabbar2.tsx
+199
View File
@@ -0,0 +1,199 @@
import { usePathname, useRouter } from 'expo-router'
import { TabList, Tabs, TabSlot, TabTrigger } from 'expo-router/ui'
import { icons } from 'lucide-react-native'
import { useEffect, useState } from 'react'
import { Pressable, View } from 'react-native'
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
import Animated, { useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
import { scheduleOnRN } from 'react-native-worklets'
interface AppTabbarProps {
data: TabbarItem[]
}
export interface TabbarItem {
icon: keyof typeof icons
iconSize?: number
activeIcon?: keyof typeof icons
name: string
href?: string
onPress?: () => void
}
function TabButton({
icon,
activeIcon,
iconSize = 24,
isFocused = false,
onPress,
}: {
icon: keyof typeof icons
activeIcon?: keyof typeof icons
iconSize?: number
isFocused?: boolean
onPress?: () => void
}) {
const scale = useSharedValue(1)
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }],
}))
useEffect(() => {
if (isFocused) {
scale.value = withSequence(
withTiming(0.9, { duration: 120 }),
withTiming(1, { duration: 160 }),
)
}
}, [isFocused])
const IconComponent = icons[isFocused && activeIcon ? activeIcon : icon]
return (
<Pressable
onPress={onPress}
style={{ flex: 1, alignItems: 'center', justifyContent: 'center', height: '100%' }}
>
<Animated.View style={animatedStyle}>
<IconComponent width={iconSize} height={iconSize} stroke={isFocused ? '#333' : '#aaa'} />
</Animated.View>
</Pressable>
)
}
export default function CustomTabbar({ data }: AppTabbarProps) {
const router = useRouter()
const pathname = usePathname()
const [activeTab, setActiveTab] = useState<string>(() => {
const match = data.find(item => item.href === pathname)
return match?.name ?? data[0]?.name
})
useEffect(() => {
console.log(`pathname：${pathname}`)
}, [pathname])
// 反转方向
const [swipeDirection, setSwipeDirection] = useState<'left' | 'right'>('left')
function updateSwipeDirection(tabName: string) {
const currentIndex = data.findIndex(d => d.name === activeTab)
const targetIndex = data.findIndex(d => d.name === tabName)
if (currentIndex === -1 || targetIndex === -1 || currentIndex === targetIndex)
return
setSwipeDirection(targetIndex > currentIndex ? 'left' : 'right')
setActiveTab(tabName)
}
// 点击调用
const handlPressTab = (item: TabbarItem) => {
updateSwipeDirection(item.name)
setActiveTab(item.name)
if (typeof item.onPress === 'function')
item.onPress()
}
// 定义 JS 线程安全函数
const handlePanTab = (tabName: string) => {
const tab = data.find(item => item.name === tabName)
if (!tab)
return
updateSwipeDirection(tabName)
setActiveTab(tab.name)
if (typeof tab.onPress === 'function') {
tab.onPress()
}
if (tab.href && tab.href !== pathname) {
router.push(tab.href)
}
}
// 手势滑动
const panGesture = Gesture.Pan()
.activeOffsetX([-20, 20])
.failOffsetY([-10, 10])
.onEnd((event) => {
const threshold = 60
const currentIndex = data.findIndex(item => item.name === activeTab)
let targetIndex: number | undefined
if (event.translationX < -threshold && currentIndex < data.length - 1) {
targetIndex = currentIndex + 1
}
else if (event.translationX > threshold && currentIndex > 0) {
targetIndex = currentIndex - 1
}
if (targetIndex !== undefined) {
const tabName = data[targetIndex].name
scheduleOnRN(handlePanTab, tabName)
}
})
return (
<GestureHandlerRootView style={{ flex: 1 }}>
<Tabs>
<GestureDetector gesture={panGesture}>
<View style={{ flex: 1 }}>
{(() => {
const currentTab = data.find(d => d.name === activeTab)
if (!currentTab)
return null
return (
<Animated.View
key={activeTab}
style={{
flex: 1,
backgroundColor: 'transparent',
}}
>
<TabSlot />
</Animated.View>
)
})()}
</View>
</GestureDetector>
<TabList asChild>
<View style={{ flexDirection: 'row', backgroundColor: 'white', height: 48, alignItems: 'center' }}>
{data.map((item) => {
if (item.href) {
return (
<TabTrigger key={item.name} name={item.name} href={item.href} asChild>
<TabButton
icon={item.icon}
activeIcon={item.activeIcon}
iconSize={item.iconSize}
isFocused={activeTab === item.name}
onPress={() => handlPressTab(item)}
/>
</TabTrigger>
)
}
return (
<TabButton
key={item.name}
icon={item.icon}
activeIcon={item.activeIcon}
iconSize={item.iconSize}
isFocused={activeTab === item.name}
onPress={() => handlPressTab(item)}
/>
)
})}
</View>
</TabList>
</Tabs>
</GestureHandlerRootView>
)
}
code/base-project/base-app/src/components/custom/tabbar.tsx
+13 -17
View File
@@ -1,10 +1,10 @@
import { usePathname, useRouter } from 'expo-router'
import { Redirect, usePathname, useRouter, useSegments } from 'expo-router'
import { TabList, Tabs, TabSlot, TabTrigger } from 'expo-router/ui'
import { icons } from 'lucide-react-native'
import { useEffect, useState } from 'react'
import { Pressable, View } from 'react-native'
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
import Animated, { SlideInLeft, SlideInRight, useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
import Animated, { useAnimatedStyle, useSharedValue, withSequence, withTiming } from 'react-native-reanimated'
import { scheduleOnRN } from 'react-native-worklets'
interface AppTabbarProps {
@@ -141,29 +141,25 @@ export default function CustomTabbar({ data }: AppTabbarProps) {
<View style={{ flex: 1 }}>
{(() => {
const currentTab = data.find(d => d.name === activeTab)
if (!currentTab)
return null
return currentTab.href
? (
<Animated.View
key={activeTab}
entering={swipeDirection === 'left' ? SlideInRight.duration(300) : SlideInLeft.duration(300)}
style={{ flex: 1 }}
>
<TabSlot />
</Animated.View>
)
: (
<TabSlot />
)
return (
<Animated.View
style={{
flex: 1,
backgroundColor: 'transparent',
}}
>
<TabSlot />
</Animated.View>
)
})()}
</View>
</GestureDetector>
<TabList asChild>
<View style={{ flexDirection: 'row', backgroundColor: 'white', height: 48, alignItems: 'center' }}>
<View style={{ flexDirection: 'row', height: 48, alignItems: 'center' }}>
{data.map((item) => {
if (item.href) {
return (
code/base-project/base-app/src/request/api/auth.ts
+9 -2
View File
@@ -15,7 +15,14 @@ interface LoginDefaultParams {
account: string
password: string
}
interface LoginDefaultResult {
token: string
refreshToken: string
userId: string
username: string
seqNo: number
gender: number
}
export function loginDefaultApi(params: LoginDefaultParams) {
return alovaInstance.Post<ResponseData<any>>(`${API_PREFIX}/login/default`, params)
return alovaInstance.Post<ResponseData<LoginDefaultResult>>(`${API_PREFIX}/login/default`, params)
}
code/base-project/base-app/src/types/global.d.ts
Vendored
+1
View File
@@ -17,5 +17,6 @@ declare global {
gender: number
token?: string
refreshToken?: string
rememberMe?: boolean
}
}