u
This commit is contained in:
oneao committed
1 parent
1903861354
commit
1b1a54f7dd
35 files changed
+1185
-535
No files matched your search
@@ -56,8 +56,11 @@
|
||||
"react-native-screens": "~4.16.0",
|
||||
"react-native-sortables": "^1.9.3",
|
||||
"react-native-svg": "15.12.1",
|
||||
"react-native-toast-message": "^2.3.3",
|
||||
"react-native-web": "^0.21.0",
|
||||
"react-native-worklets": "0.5.1",
|
||||
"react-native-z-view": "^0.2.4",
|
||||
"sonner-native": "^0.23.1",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"victory-native": "^37.3.6",
|
||||
"zustand": "^5.0.8"
|
||||
|
||||
Generated
+62
@@ -146,12 +146,21 @@ importers:
|
||||
react-native-svg:
|
||||
specifier: 15.12.1
|
||||
version: 15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-toast-message:
|
||||
specifier: ^2.3.3
|
||||
version: 2.3.3(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-web:
|
||||
specifier: ^0.21.0
|
||||
version: 0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react-native-worklets:
|
||||
specifier: 0.5.1
|
||||
version: 0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-z-view:
|
||||
specifier: ^0.2.4
|
||||
version: 0.2.4(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
sonner-native:
|
||||
specifier: ^0.23.1
|
||||
version: 0.23.1(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.5(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
tailwind-merge:
|
||||
specifier: ^3.4.0
|
||||
version: 3.4.0
|
||||
@@ -4126,48 +4135,56 @@ packages:
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
lightningcss-linux-arm64-gnu@1.30.2:
|
||||
resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
lightningcss-linux-arm64-musl@1.27.0:
|
||||
resolution: {integrity: sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
lightningcss-linux-arm64-musl@1.30.2:
|
||||
resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
lightningcss-linux-x64-gnu@1.27.0:
|
||||
resolution: {integrity: sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
lightningcss-linux-x64-gnu@1.30.2:
|
||||
resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
|
||||
lightningcss-linux-x64-musl@1.27.0:
|
||||
resolution: {integrity: sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
lightningcss-linux-x64-musl@1.30.2:
|
||||
resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
|
||||
engines: {node: '>= 12.0.0'}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
|
||||
lightningcss-win32-arm64-msvc@1.27.0:
|
||||
resolution: {integrity: sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==}
|
||||
@@ -5106,6 +5123,12 @@ packages:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
|
||||
react-native-toast-message@2.3.3:
|
||||
resolution: {integrity: sha512-4IIUHwUPvKHu4gjD0Vj2aGQzqPATiblL1ey8tOqsxOWRPGGu52iIbL8M/mCz4uyqecvPdIcMY38AfwRuUADfQQ==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
|
||||
react-native-web@0.21.2:
|
||||
resolution: {integrity: sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg==}
|
||||
peerDependencies:
|
||||
@@ -5119,6 +5142,13 @@ packages:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
|
||||
react-native-z-view@0.2.4:
|
||||
resolution: {integrity: sha512-K/z6GhHmDsyEZAy6ib8DEmITSyPb0rCJ95IZjilZbAarx8xB6prdvHvtgmCg67nFKO/l/ldBuYhvxQmClda+pQ==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
react-native-screens: '*'
|
||||
|
||||
react-native@0.81.5:
|
||||
resolution: {integrity: sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==}
|
||||
engines: {node: '>= 20.19.4'}
|
||||
@@ -5387,6 +5417,17 @@ packages:
|
||||
snake-case@3.0.4:
|
||||
resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
|
||||
|
||||
sonner-native@0.23.1:
|
||||
resolution: {integrity: sha512-p4WRxVoTjLTeuLcvuyMNzgd81tEUS0ayoqXEFhi5GNU1okbvBpqU5GiUjv14DgiLUYXPUQ0qq+OdrFJM2j4j+w==}
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
react-native: '*'
|
||||
react-native-gesture-handler: '>=2.16.1'
|
||||
react-native-reanimated: '>=3.10.1'
|
||||
react-native-safe-area-context: '>=4.10.5'
|
||||
react-native-screens: '>=3.31.1'
|
||||
react-native-svg: '>=15.6.0'
|
||||
|
||||
source-map-js@1.2.1:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -12324,6 +12365,11 @@ snapshots:
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
warn-once: 0.1.1
|
||||
|
||||
react-native-toast-message@2.3.3(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
|
||||
react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
@@ -12358,6 +12404,12 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
react-native-z-view@0.2.4(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
react-native-screens: 4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
|
||||
react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0):
|
||||
dependencies:
|
||||
'@jest/create-cache-key-function': 29.7.0
|
||||
@@ -12675,6 +12727,16 @@ snapshots:
|
||||
dot-case: 3.0.4
|
||||
tslib: 2.8.1
|
||||
|
||||
sonner-native@0.23.1(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.5(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
react-native: 0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)
|
||||
react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-reanimated: 4.1.5(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-screens: 4.16.0(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
react-native-svg: 15.12.1(react-native@0.81.5(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
source-map-support@0.5.21:
|
||||
|
||||
@@ -1,34 +1,64 @@
|
||||
import { useRouter } from 'expo-router'
|
||||
import { Text, View } from 'react-native'
|
||||
import { ScrollView } from 'react-native-gesture-handler'
|
||||
import { AButton, ACell, ACellGroup } from '@/components/common/ao'
|
||||
import EmptyState from '@/components/common/EmptyStatus'
|
||||
import { Grid, GridItem } from '@/components/ui/grid'
|
||||
import { useMoneyCategoryStore } from '@/store/moneyCategory'
|
||||
import { useSpaceStore } from '@/store/space'
|
||||
import { useCallback } from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import Sortable from 'react-native-sortables'
|
||||
|
||||
export default function Demo() {
|
||||
const router = useRouter()
|
||||
const spaceStore = useSpaceStore()
|
||||
const DATA = Array.from({ length: 10 }, (_, index) => `Item ${index + 1}`)
|
||||
|
||||
function NoSpaceTip() {
|
||||
return (
|
||||
<EmptyState
|
||||
description="还没有加入空间，选择一个加入或自己创建一个，开始聊天！"
|
||||
footer={
|
||||
<AButton size="sm">创建 / 加入 空间</AButton>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
export default function CustomHandleExample() {
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: string }) => (
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.text}>{item}</Text>
|
||||
<Sortable.Handle>
|
||||
<View style={styles.handle}>
|
||||
<Text style={styles.handleText}>::</Text>
|
||||
</View>
|
||||
</Sortable.Handle>
|
||||
</View>
|
||||
),
|
||||
[],
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="flex-1">
|
||||
{
|
||||
spaceStore.inSpace()
|
||||
? (<View></View>)
|
||||
: <NoSpaceTip />
|
||||
}
|
||||
<View style={styles.container}>
|
||||
<Sortable.Grid
|
||||
activeItemScale={1.05}
|
||||
columns={1}
|
||||
data={DATA}
|
||||
overDrag="vertical"
|
||||
renderItem={renderItem}
|
||||
rowGap={10}
|
||||
highlight-next-line
|
||||
customHandle // must be set to use a custom handle
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#2e8555',
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
padding: 24,
|
||||
},
|
||||
container: {
|
||||
padding: 16,
|
||||
},
|
||||
handle: {
|
||||
backgroundColor: 'rgba(0,0,0,0.2)',
|
||||
borderRadius: 5,
|
||||
padding: 10,
|
||||
},
|
||||
handleText: {
|
||||
color: 'white',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
text: {
|
||||
color: 'white',
|
||||
flex: 1,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
})
|
||||
@@ -1,19 +1,19 @@
|
||||
import type { ErrorBoundaryProps } from 'expo-router'
|
||||
import { ToastProvider } from '@gluestack-ui/core/toast/creator'
|
||||
import { useFonts } from 'expo-font'
|
||||
import { Stack, usePathname } from 'expo-router'
|
||||
import * as SplashScreen from 'expo-splash-screen'
|
||||
import { StatusBar } from 'expo-status-bar'
|
||||
import { useEffect } from 'react'
|
||||
import { Modal, View } from 'react-native'
|
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler'
|
||||
import { KeyboardProvider } from 'react-native-keyboard-controller'
|
||||
import { MenuProvider } from 'react-native-popup-menu'
|
||||
import { Toaster } from 'sonner-native'
|
||||
import { AButton } from '@/components/common/ao'
|
||||
import EmptyState from '@/components/common/EmptyStatus'
|
||||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { useNavStore } from '@/store/navigation'
|
||||
import { ToastProviderWrapper } from '@/utils/toast'
|
||||
import '@/styles/global.css'
|
||||
import 'react-native-reanimated'
|
||||
|
||||
@@ -64,36 +64,31 @@ export default function RootLayout() {
|
||||
}, [fontsLoaded])
|
||||
|
||||
return (
|
||||
<MenuProvider>
|
||||
<KeyboardProvider>
|
||||
<GluestackUIProvider>
|
||||
<ToastProvider>
|
||||
<ToastProviderWrapper>
|
||||
<GestureHandlerRootView>
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerTitleAlign: 'center',
|
||||
animation: 'slide_from_right',
|
||||
contentStyle: {
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="(tabs)"
|
||||
options={{
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<MenuProvider>
|
||||
<KeyboardProvider>
|
||||
<GluestackUIProvider>
|
||||
<Stack
|
||||
screenOptions={{
|
||||
headerTitleAlign: 'center',
|
||||
animation: 'slide_from_right',
|
||||
contentStyle: {
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="(tabs)"
|
||||
options={{ headerShown: false }}
|
||||
/>
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
|
||||
<Stack.Screen name="+not-found" />
|
||||
</Stack>
|
||||
<StatusBar style="auto" />
|
||||
</GestureHandlerRootView>
|
||||
</ToastProviderWrapper>
|
||||
</ToastProvider>
|
||||
</GluestackUIProvider>
|
||||
</KeyboardProvider>
|
||||
</MenuProvider>
|
||||
<StatusBar style="auto" />
|
||||
</GluestackUIProvider>
|
||||
</KeyboardProvider>
|
||||
</MenuProvider>
|
||||
<Toaster />
|
||||
</GestureHandlerRootView>
|
||||
)
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEvent } from 'expo'
|
||||
import ExpoQQ from 'expo-qq'
|
||||
// import ExpoQQ from 'expo-qq'
|
||||
import { useRouter } from 'expo-router'
|
||||
import ExpoWeChat from 'expo-wechat'
|
||||
// import ExpoWeChat from 'expo-wechat'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Image, Text, View } from 'react-native'
|
||||
import { AButton, ACheckbox } from '@/components/common/ao'
|
||||
@@ -25,174 +25,174 @@ export default function Auth() {
|
||||
const userStore = useUserStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
|
||||
const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
|
||||
const authResult = useEvent(ExpoWeChat, 'onAuthResult')
|
||||
// const onLoginFinished = useEvent(ExpoQQ, 'onLoginFinished')
|
||||
// const onGetUserInfo = useEvent(ExpoQQ, 'onGetUserInfo')
|
||||
// const authResult = useEvent(ExpoWeChat, 'onAuthResult')
|
||||
|
||||
async function onQQLogin() {
|
||||
setLoading(true)
|
||||
setForm(val => ({
|
||||
...val,
|
||||
type: 1,
|
||||
}))
|
||||
await ExpoQQ.login(['get_user_info'])
|
||||
}
|
||||
|
||||
async function onWeChatLogin() {
|
||||
setLoading(true)
|
||||
|
||||
// 检查微信是否安装
|
||||
const isInstalled = await ExpoWeChat.isWXAppInstalled()
|
||||
if (!isInstalled) {
|
||||
toast.show({
|
||||
title: onLoginFinished?.errorMessage || '请先安装微信',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
setForm(val => ({
|
||||
...val,
|
||||
type: 0,
|
||||
}))
|
||||
|
||||
ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
ExpoQQ.init('102826474', '')
|
||||
ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!onLoginFinished) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!onLoginFinished.success) {
|
||||
toast.show({
|
||||
title: onLoginFinished?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const tokenInfo = await ExpoQQ.getLoginTokenInfo()
|
||||
if (!tokenInfo.openId) {
|
||||
toast.show({
|
||||
title: tokenInfo?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
|
||||
})
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
setForm(val => ({
|
||||
...val,
|
||||
openid: String(tokenInfo.openId),
|
||||
}))
|
||||
|
||||
await ExpoQQ.sendGetUserInfoReq()
|
||||
}
|
||||
catch (e) {
|
||||
console.error('QQ 登录未完成', e)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
fetchUserInfo()
|
||||
}, [onLoginFinished])
|
||||
|
||||
// QQ登录
|
||||
useEffect(() => {
|
||||
const handleLogin = async () => {
|
||||
if (!onGetUserInfo)
|
||||
return
|
||||
|
||||
try {
|
||||
const loginRes = await loginQqApi({
|
||||
openid: form.openid,
|
||||
nickname: onGetUserInfo.nickname || '',
|
||||
avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
|
||||
})
|
||||
|
||||
if (loginRes.isSuccess) {
|
||||
userStore.setUserInfo({
|
||||
token: loginRes.data.token,
|
||||
id: loginRes.data.userId,
|
||||
nickname: loginRes.data.nickname,
|
||||
avatar: loginRes.data.avatar,
|
||||
})
|
||||
|
||||
router.push('/auth/space')
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error('登录接口出错', err)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
handleLogin()
|
||||
}, [onGetUserInfo])
|
||||
|
||||
// 微信登录
|
||||
useEffect(() => {
|
||||
if (!authResult)
|
||||
return
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (authResult.errorCode === 0) {
|
||||
try {
|
||||
const loginRes = await loginWxApi({
|
||||
code: authResult.code,
|
||||
})
|
||||
|
||||
if (loginRes.isSuccess) {
|
||||
userStore.setUserInfo({
|
||||
token: loginRes.data.token,
|
||||
id: loginRes.data.userId,
|
||||
nickname: loginRes.data.nickname,
|
||||
avatar: loginRes.data.avatar,
|
||||
})
|
||||
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
catch (err) {
|
||||
console.error('登录接口出错', err)
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.log('授权失败:', authResult.errorMessage)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
handleLogin()
|
||||
}, [authResult])
|
||||
|
||||
// function testLogin() {
|
||||
// // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NjY3ODU5ODIxNjUwNjEsImlhdCI6MTc2OTM0ODI0Nn0.17ZNaHD3HSLM8dVn_JQK-gvsG9MKj47IRYV9D4xZkzs
|
||||
|
||||
// userStore.setUserInfo({
|
||||
// token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NzgxMTUwMzIxMDA5MzMsImlhdCI6MTc3MjExMDQ5N30.Ab7_YNwftJigktnPt8f-FwwcLeS45CkrH0jT2jLjRtA',
|
||||
// id: 778115032100933,
|
||||
// nickname: 'Zhang',
|
||||
// avatar: 'http://thirdqq.qlogo.cn/ek_qqapp/AQHVialeUibE42oV8RvTTVZ4tyRlPYeJrUibWTwtCPfV68E4rSzn9cw00GkXQ3QDTiawwhjoqQb7/100',
|
||||
// })
|
||||
|
||||
// appStore.init()
|
||||
|
||||
// router.push('/')
|
||||
// async function onQQLogin() {
|
||||
// setLoading(true)
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// type: 1,
|
||||
// }))
|
||||
// await ExpoQQ.login(['get_user_info'])
|
||||
// }
|
||||
|
||||
// async function onWeChatLogin() {
|
||||
// setLoading(true)
|
||||
|
||||
// // 检查微信是否安装
|
||||
// const isInstalled = await ExpoWeChat.isWXAppInstalled()
|
||||
// if (!isInstalled) {
|
||||
// toast.show({
|
||||
// title: onLoginFinished?.errorMessage || '请先安装微信',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// type: 0,
|
||||
// }))
|
||||
|
||||
// ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// ExpoQQ.init('102826474', '')
|
||||
// ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
|
||||
// }, [])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!onLoginFinished) {
|
||||
// return
|
||||
// }
|
||||
|
||||
// if (!onLoginFinished.success) {
|
||||
// toast.show({
|
||||
// title: onLoginFinished?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
// const fetchUserInfo = async () => {
|
||||
// try {
|
||||
// const tokenInfo = await ExpoQQ.getLoginTokenInfo()
|
||||
// if (!tokenInfo.openId) {
|
||||
// toast.show({
|
||||
// title: tokenInfo?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
|
||||
// })
|
||||
// setLoading(false)
|
||||
// return
|
||||
// }
|
||||
|
||||
// setForm(val => ({
|
||||
// ...val,
|
||||
// openid: String(tokenInfo.openId),
|
||||
// }))
|
||||
|
||||
// await ExpoQQ.sendGetUserInfoReq()
|
||||
// }
|
||||
// catch (e) {
|
||||
// console.error('QQ 登录未完成', e)
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
// fetchUserInfo()
|
||||
// }, [onLoginFinished])
|
||||
|
||||
// // QQ登录
|
||||
// useEffect(() => {
|
||||
// const handleLogin = async () => {
|
||||
// if (!onGetUserInfo)
|
||||
// return
|
||||
|
||||
// try {
|
||||
// const loginRes = await loginQqApi({
|
||||
// openid: form.openid,
|
||||
// nickname: onGetUserInfo.nickname || '',
|
||||
// avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
|
||||
// })
|
||||
|
||||
// if (loginRes.isSuccess) {
|
||||
// userStore.setUserInfo({
|
||||
// token: loginRes.data.token,
|
||||
// id: loginRes.data.userId,
|
||||
// nickname: loginRes.data.nickname,
|
||||
// avatar: loginRes.data.avatar,
|
||||
// })
|
||||
|
||||
// router.push('/auth/space')
|
||||
// }
|
||||
// }
|
||||
// catch (err) {
|
||||
// console.error('登录接口出错', err)
|
||||
// }
|
||||
// finally {
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
// handleLogin()
|
||||
// }, [onGetUserInfo])
|
||||
|
||||
// // 微信登录
|
||||
// useEffect(() => {
|
||||
// if (!authResult)
|
||||
// return
|
||||
|
||||
// const handleLogin = async () => {
|
||||
// if (authResult.errorCode === 0) {
|
||||
// try {
|
||||
// const loginRes = await loginWxApi({
|
||||
// code: authResult.code,
|
||||
// })
|
||||
|
||||
// if (loginRes.isSuccess) {
|
||||
// userStore.setUserInfo({
|
||||
// token: loginRes.data.token,
|
||||
// id: loginRes.data.userId,
|
||||
// nickname: loginRes.data.nickname,
|
||||
// avatar: loginRes.data.avatar,
|
||||
// })
|
||||
|
||||
// router.push('/')
|
||||
// }
|
||||
// }
|
||||
// catch (err) {
|
||||
// console.error('登录接口出错', err)
|
||||
// }
|
||||
// finally {
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// console.log('授权失败:', authResult.errorMessage)
|
||||
// setLoading(false)
|
||||
// }
|
||||
// }
|
||||
|
||||
// handleLogin()
|
||||
// }, [authResult])
|
||||
|
||||
function testLogin() {
|
||||
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NjY3ODU5ODIxNjUwNjEsImlhdCI6MTc2OTM0ODI0Nn0.17ZNaHD3HSLM8dVn_JQK-gvsG9MKj47IRYV9D4xZkzs
|
||||
|
||||
userStore.setUserInfo({
|
||||
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NzgxMTUwMzIxMDA5MzMsImlhdCI6MTc3MjExMDQ5N30.Ab7_YNwftJigktnPt8f-FwwcLeS45CkrH0jT2jLjRtA',
|
||||
id: 778115032100933,
|
||||
nickname: 'Zhang',
|
||||
avatar: 'http://thirdqq.qlogo.cn/ek_qqapp/AQHVialeUibE42oV8RvTTVZ4tyRlPYeJrUibWTwtCPfV68E4rSzn9cw00GkXQ3QDTiawwhjoqQb7/100',
|
||||
})
|
||||
|
||||
appStore.init()
|
||||
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-white px-6 justify-center">
|
||||
<CustomHeader
|
||||
@@ -210,7 +210,7 @@ export default function Auth() {
|
||||
</View>
|
||||
|
||||
<View className="flex flex-col gap-4">
|
||||
<AButton
|
||||
{/* <AButton
|
||||
leftIcon={
|
||||
<IconWeixin color="#fff" />
|
||||
}
|
||||
@@ -229,7 +229,7 @@ export default function Auth() {
|
||||
onPress={onQQLogin}
|
||||
>
|
||||
QQ
|
||||
</AButton>
|
||||
</AButton> */}
|
||||
|
||||
<AButton
|
||||
variant="outline"
|
||||
@@ -237,7 +237,7 @@ export default function Auth() {
|
||||
<IconQq />
|
||||
}
|
||||
loading={loading}
|
||||
// onPress={testLogin}
|
||||
onPress={testLogin}
|
||||
>
|
||||
模拟登录
|
||||
</AButton>
|
||||
|
||||
@@ -1,61 +1,278 @@
|
||||
import { Text, View } from 'react-native'
|
||||
import { AButton, LucideIcon } from '@/components/common/ao'
|
||||
import type { Space } from '@/types/space/space'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { Pressable, Text, View } from 'react-native'
|
||||
import Animated, { useAnimatedRef } from 'react-native-reanimated'
|
||||
import Sortable from 'react-native-sortables'
|
||||
import { toast } from 'sonner-native'
|
||||
import { AButton, ADivider, AInput, LucideIcon } from '@/components/common/ao'
|
||||
import { AModal } from '@/components/common/ao/index'
|
||||
import EmptyState from '@/components/common/EmptyStatus'
|
||||
import CustomHeader from '@/components/custom/Header'
|
||||
|
||||
// name renshu
|
||||
import { Badge, BadgeText } from '@/components/ui/badge'
|
||||
import { createSpaceApi } from '@/request/api/space/space'
|
||||
|
||||
export default function AuthSpace() {
|
||||
return (
|
||||
<View className="flex-1">
|
||||
<CustomHeader title="空间列表" />
|
||||
<View className="flex-1 px-4 pt-2 pb-8">
|
||||
<View>
|
||||
<Text className="text-lg font-semibold">你的空间</Text>
|
||||
<Text className="text-sm text-gray-600">选择要进入的空间</Text>
|
||||
</View>
|
||||
const scrollableRef = useAnimatedRef<Animated.ScrollView>()
|
||||
|
||||
<View className="flex-1 my-4">
|
||||
{/* <View className="items-center justify-center">
|
||||
<EmptyState title="暂无空间" description="请选择 创建 或 加入 空间" />
|
||||
</View> */}
|
||||
const [selectedId, setSelectedId] = useState<number | null>(null)
|
||||
|
||||
// 新建
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [createForm, setCreateForm] = useState({
|
||||
name: '',
|
||||
})
|
||||
|
||||
const spaces: Space[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'A 的空间',
|
||||
role: 1,
|
||||
member_count: 8,
|
||||
is_default: 1,
|
||||
sort_number: 1,
|
||||
user_name: '张三',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'B 的空间',
|
||||
role: 2,
|
||||
member_count: 5,
|
||||
is_default: 0,
|
||||
sort_number: 2,
|
||||
user_name: '李四',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'C 的空间',
|
||||
role: 3,
|
||||
member_count: 12,
|
||||
is_default: 0,
|
||||
sort_number: 3,
|
||||
user_name: '王五',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'D 的空间',
|
||||
role: 2,
|
||||
member_count: 6,
|
||||
is_default: 0,
|
||||
sort_number: 4,
|
||||
user_name: '赵六',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'E 的空间',
|
||||
role: 1,
|
||||
member_count: 3,
|
||||
is_default: 0,
|
||||
sort_number: 5,
|
||||
user_name: '钱七',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'F 的空间',
|
||||
role: 2,
|
||||
member_count: 9,
|
||||
is_default: 0,
|
||||
sort_number: 6,
|
||||
user_name: '孙八',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'G 的空间',
|
||||
role: 3,
|
||||
member_count: 4,
|
||||
is_default: 0,
|
||||
sort_number: 7,
|
||||
user_name: '周九',
|
||||
},
|
||||
]
|
||||
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: Space }) => (
|
||||
<Pressable
|
||||
key={item.id}
|
||||
onPress={() => setSelectedId(item.id)}
|
||||
className={`rounded-md flex-row items-center justify-between px-4 py-3 border
|
||||
${item.id === selectedId ? 'border-gray-700' : 'border-gray-300'}`}
|
||||
>
|
||||
<View className="flex-row items-center">
|
||||
<Sortable.Handle>
|
||||
<LucideIcon
|
||||
icon="Grip"
|
||||
size={20}
|
||||
className="mr-4"
|
||||
/>
|
||||
</Sortable.Handle>
|
||||
<View>
|
||||
<View className="rounded-lg p-3 flex flex-row items-center justify-between bg-gray-100">
|
||||
<View className="flex-row items-center">
|
||||
<View className="mr-4">
|
||||
<LucideIcon
|
||||
icon="Grip"
|
||||
size={20}
|
||||
color="#666"
|
||||
/>
|
||||
</View>
|
||||
<View className="flex-row items-center gap-2">
|
||||
<Text
|
||||
className="font-semibold text-gray-900"
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
|
||||
<View className="">
|
||||
<View>
|
||||
<Text className="font-semibold">A 的空间</Text>
|
||||
</View>
|
||||
<Text className="text-sm text-gray-500 mt-1">张三 · 8 名成员</Text>
|
||||
</View>
|
||||
<Badge size="sm" variant="solid" action="muted">
|
||||
<BadgeText>创建者</BadgeText>
|
||||
</Badge>
|
||||
|
||||
<Badge size="sm" variant="solid" action="info">
|
||||
<BadgeText>默认</BadgeText>
|
||||
</Badge>
|
||||
</View>
|
||||
|
||||
<View className="flex-row items-center gap-3 mt-2">
|
||||
<View className="flex-row gap-1">
|
||||
<LucideIcon icon="UserRound" size={12} />
|
||||
<Text
|
||||
className={`text-xs `}
|
||||
>
|
||||
用户A
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View>
|
||||
<LucideIcon
|
||||
icon="Bolt"
|
||||
size={20}
|
||||
color="#aaa"
|
||||
style={{ padding: 6 }}
|
||||
/>
|
||||
<View className="flex-row gap-1">
|
||||
<LucideIcon icon="UsersRound" size={12} />
|
||||
<Text
|
||||
className={`text-xs `}
|
||||
>
|
||||
0
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex gap-3">
|
||||
<AButton>创建新空间</AButton>
|
||||
<AButton variant="outline">加入其他空间</AButton>
|
||||
<LucideIcon
|
||||
icon="Bolt"
|
||||
size={20}
|
||||
className="p-1"
|
||||
/>
|
||||
</Pressable>
|
||||
),
|
||||
[],
|
||||
)
|
||||
|
||||
return (
|
||||
<View className="flex-1 bg-white">
|
||||
{/* Header */}
|
||||
<CustomHeader title="空间列表" />
|
||||
|
||||
<View className="flex-1 px-4">
|
||||
|
||||
<View className="">
|
||||
<Text className="text-sm text-gray-500 mb-2">
|
||||
选择或创建空间
|
||||
</Text>
|
||||
<View className="flex-row gap-3">
|
||||
<AButton
|
||||
className="flex-1 rounded-full"
|
||||
size="sm"
|
||||
leftIcon={<LucideIcon icon="Plus" color="#fff" />}
|
||||
onPress={() => setCreateOpen(true)}
|
||||
>
|
||||
创建新空间
|
||||
</AButton>
|
||||
<AButton
|
||||
variant="outline"
|
||||
className="flex-1 rounded-full"
|
||||
size="sm"
|
||||
leftIcon={<LucideIcon icon="HousePlus" />}
|
||||
>
|
||||
加入其他空间
|
||||
</AButton>
|
||||
</View>
|
||||
</View>
|
||||
<ADivider text="我的空间" className="py-2" />
|
||||
|
||||
<Animated.ScrollView
|
||||
className="flex-1"
|
||||
ref={scrollableRef}
|
||||
>
|
||||
{spaces.length === 0
|
||||
? (
|
||||
<View className="flex-1 items-center justify-center mt-12">
|
||||
<EmptyState
|
||||
title="暂无空间"
|
||||
description="请选择 创建 或 加入 空间"
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
: (
|
||||
<Sortable.Grid
|
||||
scrollableRef={scrollableRef}
|
||||
activeItemScale={1}
|
||||
columns={1}
|
||||
data={spaces}
|
||||
overDrag="vertical"
|
||||
renderItem={renderItem}
|
||||
rowGap={10}
|
||||
highlight-next-line
|
||||
customHandle
|
||||
autoScrollActivationOffset={200}
|
||||
/>
|
||||
)}
|
||||
</Animated.ScrollView>
|
||||
|
||||
<View className="py-2">
|
||||
<AButton size="sm" leftIcon={<LucideIcon icon="CircleArrowRight" color="#fff" />}>进入空间</AButton>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<AModal
|
||||
title="创建新空间"
|
||||
showCloseIcon
|
||||
body={
|
||||
(
|
||||
<View className="gap-2">
|
||||
<Text>空间名称</Text>
|
||||
<AInput
|
||||
className="flex-1"
|
||||
value={createForm.name}
|
||||
onChangeText={(val) => {
|
||||
setCreateForm(prev => ({
|
||||
...prev,
|
||||
name: val,
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
isOpen={createOpen}
|
||||
onCancel={() => {
|
||||
setCreateOpen(false)
|
||||
setCreateForm({
|
||||
name: '',
|
||||
})
|
||||
}}
|
||||
onClose={() => {
|
||||
setCreateOpen(false)
|
||||
setCreateForm({
|
||||
name: '',
|
||||
})
|
||||
}}
|
||||
onConfirm={async () => {
|
||||
if (!createForm.name) {
|
||||
toast.warning('请输入空间名称')
|
||||
return
|
||||
}
|
||||
await createSpaceApi({
|
||||
name: createForm.name,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
if (res.isSuccess) {
|
||||
toast.success('创建成功')
|
||||
setCreateOpen(false)
|
||||
setCreateForm({
|
||||
name: '',
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
}}
|
||||
>
|
||||
</AModal>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -39,14 +39,9 @@ const Button: React.FC<CustomButtonProps> = ({
|
||||
const isDisabled = disabled || loading
|
||||
const hasChildren = !!children
|
||||
|
||||
const renderIcon = (
|
||||
icon?: IconProp,
|
||||
position: 'left' | 'right' = 'left',
|
||||
) => {
|
||||
if (!icon)
|
||||
return null
|
||||
|
||||
if (loading && position === 'left') {
|
||||
const renderLeftIcon = () => {
|
||||
// 左侧 loading
|
||||
if (loading) {
|
||||
const spinnerColor = variant === 'outline'
|
||||
? 'rgba(0,0,0,0.6)'
|
||||
: 'rgba(255,255,255,0.9)'
|
||||
@@ -57,17 +52,25 @@ const Button: React.FC<CustomButtonProps> = ({
|
||||
)
|
||||
}
|
||||
|
||||
const node = typeof icon === 'function'
|
||||
? icon()
|
||||
: icon
|
||||
// 左侧 icon
|
||||
if (!leftIcon)
|
||||
return null
|
||||
|
||||
const node = typeof leftIcon === 'function' ? leftIcon() : leftIcon
|
||||
|
||||
return (
|
||||
<View className={hasChildren
|
||||
? position === 'left'
|
||||
? 'mr-2'
|
||||
: 'ml-2'
|
||||
: undefined}
|
||||
>
|
||||
<View className={hasChildren ? 'mr-1' : undefined}>
|
||||
{node}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const renderRightIcon = () => {
|
||||
if (!rightIcon)
|
||||
return null
|
||||
const node = typeof rightIcon === 'function' ? rightIcon() : rightIcon
|
||||
return (
|
||||
<View className={hasChildren ? 'ml-1' : undefined}>
|
||||
{node}
|
||||
</View>
|
||||
)
|
||||
@@ -83,9 +86,9 @@ const Button: React.FC<CustomButtonProps> = ({
|
||||
variant={variant}
|
||||
size={size}
|
||||
>
|
||||
{renderIcon(leftIcon, 'left')}
|
||||
{renderLeftIcon()}
|
||||
{children && <ButtonText>{children}</ButtonText>}
|
||||
{renderIcon(rightIcon, 'right')}
|
||||
{renderRightIcon()}
|
||||
</NativeButton>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { ViewStyle } from 'react-native'
|
||||
import { useState } from 'react'
|
||||
import { Text } from 'react-native'
|
||||
import { Heading } from '@/components/ui/heading'
|
||||
import { CloseIcon, Icon } from '@/components/ui/icon'
|
||||
|
||||
import {
|
||||
Modal,
|
||||
ModalBackdrop,
|
||||
@@ -19,7 +20,7 @@ interface AModalProps {
|
||||
body?: string | React.ReactNode
|
||||
footer?: React.ReactNode
|
||||
onClose?: () => void
|
||||
onConfirm?: () => void
|
||||
onConfirm?: () => Promise<void> | void
|
||||
onCancel?: () => void
|
||||
showBackdrop?: boolean
|
||||
showCloseIcon?: boolean
|
||||
@@ -41,6 +42,29 @@ export default function AModal({
|
||||
className,
|
||||
style,
|
||||
}: AModalProps) {
|
||||
const [innerLoading, setInnerLoading] = useState(false)
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (!onConfirm || innerLoading)
|
||||
return
|
||||
|
||||
try {
|
||||
const result = onConfirm()
|
||||
|
||||
// 只有当返回的是 Promise 才开启 loading
|
||||
if (result && typeof (result as Promise<void>).then === 'function') {
|
||||
setInnerLoading(true)
|
||||
|
||||
result.finally(() => {
|
||||
setInnerLoading(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
@@ -55,7 +79,7 @@ export default function AModal({
|
||||
}}
|
||||
>
|
||||
<ModalHeader>
|
||||
{title && (typeof title === 'string' ? <Text>{title}</Text> : title)}
|
||||
{title && (typeof title === 'string' ? <Heading>{title}</Heading> : title)}
|
||||
{
|
||||
showCloseIcon && (
|
||||
<ModalCloseButton>
|
||||
@@ -76,11 +100,14 @@ export default function AModal({
|
||||
action="secondary"
|
||||
className="mr-3"
|
||||
onPress={onClose}
|
||||
size="sm"
|
||||
>
|
||||
取消
|
||||
</AButton>
|
||||
<AButton
|
||||
onPress={onConfirm}
|
||||
onPress={handleConfirm}
|
||||
size="sm"
|
||||
loading={innerLoading}
|
||||
>
|
||||
确认
|
||||
</AButton>
|
||||
|
||||
@@ -1,26 +1,28 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { config } from './config';
|
||||
import { View, ViewProps } from 'react-native';
|
||||
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator';
|
||||
import { ToastProvider } from '@gluestack-ui/core/toast/creator';
|
||||
import { useColorScheme } from 'nativewind';
|
||||
import type { ViewProps } from 'react-native'
|
||||
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'
|
||||
import { ToastProvider } from '@gluestack-ui/core/toast/creator'
|
||||
import { useColorScheme } from 'nativewind'
|
||||
import React, { useEffect } from 'react'
|
||||
import { View } from 'react-native'
|
||||
import { Toaster } from 'sonner-native'
|
||||
import { config } from './config'
|
||||
|
||||
export type ModeType = 'light' | 'dark' | 'system';
|
||||
export type ModeType = 'light' | 'dark' | 'system'
|
||||
|
||||
export function GluestackUIProvider({
|
||||
mode = 'light',
|
||||
...props
|
||||
}: {
|
||||
mode?: ModeType;
|
||||
children?: React.ReactNode;
|
||||
style?: ViewProps['style'];
|
||||
mode?: ModeType
|
||||
children?: React.ReactNode
|
||||
style?: ViewProps['style']
|
||||
}) {
|
||||
const { colorScheme, setColorScheme } = useColorScheme();
|
||||
const { colorScheme, setColorScheme } = useColorScheme()
|
||||
|
||||
useEffect(() => {
|
||||
setColorScheme(mode);
|
||||
setColorScheme(mode)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode]);
|
||||
}, [mode])
|
||||
|
||||
return (
|
||||
<View
|
||||
@@ -34,5 +36,5 @@ export function GluestackUIProvider({
|
||||
<ToastProvider>{props.children}</ToastProvider>
|
||||
</OverlayProvider>
|
||||
</View>
|
||||
);
|
||||
)
|
||||
}
|
||||
@@ -28,8 +28,8 @@ function isWhiteListed(url: string) {
|
||||
}
|
||||
|
||||
const alovaInstance = createAlova({
|
||||
baseURL: 'http://192.168.5.6:8086/app',
|
||||
// baseURL: 'http://192.168.1.137:8086/app',
|
||||
// baseURL: 'http://192.168.5.6:8086/app',
|
||||
baseURL: 'http://192.168.1.137:8086/app',
|
||||
requestAdapter: axiosRequestAdapter(),
|
||||
timeout: 5000,
|
||||
cacheFor: null,
|
||||
@@ -54,9 +54,7 @@ const alovaInstance = createAlova({
|
||||
|
||||
onError: (error: AxiosError) => {
|
||||
const status = error.status
|
||||
const config = error.config
|
||||
|
||||
console.warn(`[HTTP ${status}] ${config?.method?.toUpperCase()} ${config?.url}`)
|
||||
console.log(error)
|
||||
|
||||
switch (status) {
|
||||
case 400:
|
||||
|
||||
@@ -1,3 +1,14 @@
|
||||
export interface Space {
|
||||
id: number
|
||||
name: string
|
||||
role: number
|
||||
member_count: number
|
||||
is_default: number
|
||||
|
||||
user_name: string
|
||||
sort_number: number
|
||||
}
|
||||
|
||||
// 创建空间
|
||||
export interface CreateSpaceParams {
|
||||
name: string
|
||||
|
||||
+62
-202
@@ -1,207 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>记账列表</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
import { useCallback } from 'react';
|
||||
import { StyleSheet, Text, View } from 'react-native';
|
||||
import Sortable from 'react-native-sortables';
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
const DATA = Array.from({ length: 4 }, (_, index) => `Item ${index + 1}`);
|
||||
|
||||
export default function CustomHandleExample() {
|
||||
const renderItem = useCallback(
|
||||
({ item }: { item: string }) => (
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.text}>{item}</Text>
|
||||
{/* Wraps the handle component */}
|
||||
{/* highlight-next-line */}
|
||||
<Sortable.Handle>
|
||||
<View style={styles.handle}>
|
||||
<Text style={styles.handleText}>::</Text>
|
||||
</View>
|
||||
{/* highlight-next-line */}
|
||||
</Sortable.Handle>
|
||||
</View>
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Sortable.Grid
|
||||
activeItemScale={1.05}
|
||||
columns={1}
|
||||
data={DATA}
|
||||
overDrag='vertical'
|
||||
renderItem={renderItem}
|
||||
rowGap={10}
|
||||
// highlight-next-line
|
||||
customHandle // must be set to use a custom handle
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
|
||||
background: #f5f6f8;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
background: #f5f6f8;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部统计 */
|
||||
.summary {
|
||||
background: #ffffff;
|
||||
padding: 20px 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.summary-item span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.summary-item strong {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 日期分组 */
|
||||
.date-group {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.date-header {
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 账单项 */
|
||||
.record {
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.record-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.record-type {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.record-desc {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.income {
|
||||
color: #2bb673;
|
||||
}
|
||||
|
||||
.expense {
|
||||
color: #e74c3c;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" class="app">
|
||||
|
||||
<!-- 顶部统计 -->
|
||||
<div class="summary">
|
||||
<div class="summary-title">本月统计</div>
|
||||
<div class="summary-row">
|
||||
<div class="summary-item">
|
||||
<span>收入</span>
|
||||
<strong class="income">{{ totalIncome }}</strong>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span>支出</span>
|
||||
<strong class="expense">{{ totalExpense }}</strong>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span>结余</span>
|
||||
<strong>{{ balance }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 列表 -->
|
||||
<div v-for="group in groupedRecords" :key="group.date" class="date-group">
|
||||
<div class="date-header">{{ group.date }}</div>
|
||||
|
||||
<div
|
||||
v-for="item in group.list"
|
||||
:key="item.id"
|
||||
class="record"
|
||||
>
|
||||
<div class="record-left">
|
||||
<div class="record-type">{{ item.category }}</div>
|
||||
<div class="record-desc">{{ item.remark }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="record-amount"
|
||||
:class="item.type === 'income' ? 'income' : 'expense'"
|
||||
>
|
||||
{{ item.type === 'income' ? '+' : '-' }}{{ item.amount }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
records: [
|
||||
{ id: 1, date: '2026-02-11', category: '餐饮', remark: '午餐', amount: 35, type: 'expense' },
|
||||
{ id: 2, date: '2026-02-11', category: '工资', remark: '2月工资', amount: 8000, type: 'income' },
|
||||
{ id: 3, date: '2026-02-10', category: '交通', remark: '地铁', amount: 6, type: 'expense' },
|
||||
{ id: 4, date: '2026-02-10', category: '购物', remark: '日用品', amount: 120, type: 'expense' }
|
||||
]
|
||||
}
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#2e8555',
|
||||
borderRadius: 12,
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
padding: 24
|
||||
},
|
||||
computed: {
|
||||
totalIncome() {
|
||||
return this.records
|
||||
.filter(r => r.type === 'income')
|
||||
.reduce((sum, r) => sum + r.amount, 0)
|
||||
},
|
||||
totalExpense() {
|
||||
return this.records
|
||||
.filter(r => r.type === 'expense')
|
||||
.reduce((sum, r) => sum + r.amount, 0)
|
||||
},
|
||||
balance() {
|
||||
return this.totalIncome - this.totalExpense
|
||||
},
|
||||
groupedRecords() {
|
||||
const groups = {}
|
||||
this.records.forEach(item => {
|
||||
if (!groups[item.date]) {
|
||||
groups[item.date] = []
|
||||
}
|
||||
groups[item.date].push(item)
|
||||
})
|
||||
return Object.keys(groups).map(date => ({
|
||||
date,
|
||||
list: groups[date]
|
||||
}))
|
||||
}
|
||||
container: {
|
||||
padding: 16
|
||||
},
|
||||
handle: {
|
||||
backgroundColor: 'rgba(0,0,0,0.2)',
|
||||
borderRadius: 5,
|
||||
padding: 10
|
||||
},
|
||||
handleText: {
|
||||
color: 'white',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
text: {
|
||||
color: 'white',
|
||||
flex: 1,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
});
|
||||
Reference in new issue
Block a user