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 2026-01-26 17:29:24 +08:00
1 parent 8f3f6982db
commit 5a79414319
10 files changed
+355 -293
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/allapp/allapp-rn/src/app/(tabs)/_layout.tsx
+121 -7
View File
@@ -1,11 +1,80 @@
import { TabSlot } from 'expo-router/ui'
import { Text, View } from 'react-native'
import type { icons } from 'lucide-react-native'
import type { SortableGridRenderItem } from 'react-native-sortables'
import { Slot, usePathname, useRouter } from 'expo-router'
import { useCallback, useEffect, useState } from 'react'
import { Pressable, Text, TouchableOpacity, Vibration, View } from 'react-native'
import Animated, { useAnimatedRef } from 'react-native-reanimated'
import Sortable from 'react-native-sortables'
import { ADrawer, LucideIcon } from '@/components/common/ao'
interface NavItem {
label: string
path: string
icon: keyof typeof icons
}
const NAV_MENUS: NavItem[] = [
{ label: '记账', path: '/money', icon: 'CircleDollarSign' },
{ label: '恋爱记', path: '/love', icon: 'Heart' },
{ label: '聊天', path: '/chat', icon: 'MessageCircle' },
{ label: '个人中心', path: '/user', icon: 'CircleUserRound' },
]
export default function TabsLayout() {
const scrollableRef = useAnimatedRef<Animated.ScrollView>()
const router = useRouter()
const pathname = usePathname()
const [showNavDrawer, setShowNavDrawer] = useState(false)
const [draggingId, setDraggingId] = useState<string>('')
const [currentNav, setCurrentNav] = useState<NavItem>({
label: '',
path: '',
icon: 'AArrowDown',
})
useEffect(() => {
const current = NAV_MENUS.find(item => item.path === pathname)
if (current) {
setCurrentNav(current)
}
}, [pathname])
const refreshPage = () => {
router.replace(pathname)
}
const renderNavItem = useCallback<SortableGridRenderItem<NavItem>>(
({ item }) => (
<Pressable
className="
flex
flex-col
items-center
justify-center
bg-[white]
rounded-md
shadow-md
p-3
"
onPress={() => {
setShowNavDrawer(false)
router.push(item.path)
}}
>
<LucideIcon icon={item.icon} size={24} strokeWidth={2} clickable={false} />
<Text className="text-sm mt-2">
{item.label}
</Text>
</Pressable>
),
[],
)
return (
<View className="flex-1 bg-gray-100">
<View className="flex-1 px-4 pt-4 pb-24">
<TabSlot />
<View className="flex-1 bg-white">
<Slot />
</View>
<View
@@ -18,10 +87,55 @@ export default function TabsLayout() {
gap-4
"
>
<View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
<View className="flex-1 bg-white rounded-md shadow-lg h-12"></View>
<View className="bg-white rounded-md shadow-lg h-12 w-12"></View>
<View className="bg-white rounded-md shadow-lg h-12 w-12">
<TouchableOpacity className="w-full h-full items-center justify-center">
<LucideIcon icon="Bot" size={26} clickable={false} strokeWidth={2} />
</TouchableOpacity>
</View>
<View className="flex-1 bg-white rounded-md shadow-lg h-12">
<TouchableOpacity
className="w-full h-full items-center justify-center flex flex-row"
onPress={() => {
setShowNavDrawer(true)
}}
>
<LucideIcon icon={currentNav.icon} size={20} strokeWidth={2} />
<Text className="font-semibold text-lg ml-2">{currentNav.label}</Text>
</TouchableOpacity>
</View>
<View className="bg-white rounded-md shadow-lg h-12 w-12">
<TouchableOpacity className="w-full h-full items-center justify-center" onPress={refreshPage}>
<LucideIcon icon="RefreshCcw" size={26} clickable={false} strokeWidth={2} />
</TouchableOpacity>
</View>
</View>
<ADrawer
visible={showNavDrawer}
height="60%"
title="菜单导航"
isCircle
hideModal={() => {
setShowNavDrawer(false)
}}
>
<Animated.ScrollView
ref={scrollableRef}
className="px-4 py-2 flex-1"
>
<Sortable.Grid
columnGap={16}
rowGap={16}
columns={3}
data={NAV_MENUS}
keyExtractor={item => item.path}
renderItem={renderNavItem}
scrollableRef={scrollableRef}
autoScrollActivationOffset={200}
/>
</Animated.ScrollView>
</ADrawer>
</View>
)
}
code/allapp/allapp-rn/src/app/(tabs)/index.tsx
+15 -4
View File
@@ -1,11 +1,22 @@
import { useRouter } from 'expo-router'
import { Text, View } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { AButton } from '@/components/common/ao'
// 这个页面的作用是作为占位页，避免进入 (tabs) layout 时出现 404 页面。
// 如果想指定默认页面，可以通过 router.replace 或 TabTrigger 指向具体子页面。
export default function Index() {
const router = useRouter()
return (
<View>
<Text>Index</Text>
</View>
<SafeAreaView>
<View>
<AButton onPress={() => {
router.push('/money')
}}
>
测试
</AButton>
</View>
</SafeAreaView>
)
}
code/allapp/allapp-rn/src/app/+not-found.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export default function NotFound() {
title="(´･ω･`) 页面走丢了～"
description="回首页看看吧！"
footer={(
<AButton onPress={() => router.replace('/')} leftIcon={{ icon: 'ArrowLeft', size: 18, color: '#fff' }}>
<AButton onPress={() => router.replace('/')}>
返回应用首页
</AButton>
)}
code/allapp/allapp-rn/src/app/_layout.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
title="(´･ω･`) 出错啦～"
description={`发生了一点小问题：\n${error?.message || '请稍后再试'}`}
footer={(
<AButton onPress={retry} leftIcon={{ icon: 'RotateCcw', size: 18, color: '#fff' }}>
<AButton onPress={retry}>
再试一下
</AButton>
)}
code/allapp/allapp-rn/src/app/auth/index.tsx
+136 -136
View File
@@ -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'
@@ -11,7 +11,7 @@ import { loginQqApi, loginWxApi } from '@/request/api/auth'
import { useUserStore } from '@/store/user'
import { toast } from '@/utils/toast'
export default function LoginScreen() {
export default function Auth() {
const [loading, setLoading] = useState(false)
const [isAgree, setIsAgree] = useState(true)
const [form, setForm] = useState({
@@ -23,160 +23,160 @@ export default function LoginScreen() {
const router = useRouter()
const userStore = useUserStore()
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 onQQLogin() {
// setLoading(true)
// setForm(val => ({
// ...val,
// type: 1,
// }))
// await ExpoQQ.login(['get_user_info'])
// }
async function onWeChatLogin() {
setLoading(true)
// async function onWeChatLogin() {
// setLoading(true)
// 检查微信是否安装
const isInstalled = await ExpoWeChat.isWXAppInstalled()
if (!isInstalled) {
toast.show({
title: onLoginFinished?.errorMessage || '请先安装微信',
})
setLoading(false)
return
}
// // 检查微信是否安装
// const isInstalled = await ExpoWeChat.isWXAppInstalled()
// if (!isInstalled) {
// toast.show({
// title: onLoginFinished?.errorMessage || '请先安装微信',
// })
// setLoading(false)
// return
// }
setForm(val => ({
...val,
type: 0,
}))
// setForm(val => ({
// ...val,
// type: 0,
// }))
ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
}
// ExpoWeChat.sendAuthRequest('snsapi_userinfo', 'state123')
// }
useEffect(() => {
ExpoQQ.init('102826474', '')
ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
}, [])
// useEffect(() => {
// ExpoQQ.init('102826474', '')
// ExpoWeChat.registerApp('wxdab3e21a1f7e392f', '')
// }, [])
useEffect(() => {
if (!onLoginFinished) {
return
}
// useEffect(() => {
// if (!onLoginFinished) {
// return
// }
if (!onLoginFinished.success) {
toast.show({
title: onLoginFinished?.errorMessage || '授权失败，请检查手机是否安装 QQ 或确认授权',
})
setLoading(false)
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
}
// 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),
}))
// setForm(val => ({
// ...val,
// openid: String(tokenInfo.openId),
// }))
await ExpoQQ.sendGetUserInfoReq()
}
catch (e) {
console.error('QQ 登录未完成', e)
setLoading(false)
}
}
// await ExpoQQ.sendGetUserInfoReq()
// }
// catch (e) {
// console.error('QQ 登录未完成', e)
// setLoading(false)
// }
// }
fetchUserInfo()
}, [onLoginFinished])
// fetchUserInfo()
// }, [onLoginFinished])
// QQ登录
useEffect(() => {
const handleLogin = async () => {
if (!onGetUserInfo)
return
// // QQ登录
// useEffect(() => {
// const handleLogin = async () => {
// if (!onGetUserInfo)
// return
try {
const loginRes = await loginQqApi({
openid: form.openid,
username: onGetUserInfo.nickname || '',
avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
})
// try {
// const loginRes = await loginQqApi({
// openid: form.openid,
// username: onGetUserInfo.nickname || '',
// avatar: onGetUserInfo.figureurlQq_2 || onGetUserInfo.figureurl_2,
// })
if (loginRes.isSuccess) {
userStore.setUserInfo({
token: loginRes.data.token,
id: loginRes.data.userId,
username: loginRes.data.username,
avatar: loginRes.data.avatar,
})
// if (loginRes.isSuccess) {
// userStore.setUserInfo({
// token: loginRes.data.token,
// id: loginRes.data.userId,
// username: loginRes.data.username,
// avatar: loginRes.data.avatar,
// })
console.log(loginRes.data.token)
// console.log(loginRes.data.token)
router.push('/')
}
}
catch (err) {
console.error('登录接口出错', err)
}
finally {
setLoading(false)
}
}
// router.push('/')
// }
// }
// catch (err) {
// console.error('登录接口出错', err)
// }
// finally {
// setLoading(false)
// }
// }
handleLogin()
}, [onGetUserInfo])
// handleLogin()
// }, [onGetUserInfo])
// 微信登录
useEffect(() => {
if (!authResult)
return
// // 微信登录
// useEffect(() => {
// if (!authResult)
// return
const handleLogin = async () => {
if (authResult.errorCode === 0) {
try {
const loginRes = await loginWxApi({
code: authResult.code,
})
// 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,
username: loginRes.data.username,
avatar: loginRes.data.avatar,
})
// if (loginRes.isSuccess) {
// userStore.setUserInfo({
// token: loginRes.data.token,
// id: loginRes.data.userId,
// username: loginRes.data.username,
// avatar: loginRes.data.avatar,
// })
router.push('/')
}
}
catch (err) {
console.error('登录接口出错', err)
}
finally {
setLoading(false)
}
}
else {
console.log('授权失败:', authResult.errorMessage)
setLoading(false)
}
}
// router.push('/')
// }
// }
// catch (err) {
// console.error('登录接口出错', err)
// }
// finally {
// setLoading(false)
// }
// }
// else {
// console.log('授权失败:', authResult.errorMessage)
// setLoading(false)
// }
// }
handleLogin()
}, [authResult])
// handleLogin()
// }, [authResult])
function testLogin() {
// eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjo3NjY3ODU5ODIxNjUwNjEsImlhdCI6MTc2OTM0ODI0Nn0.17ZNaHD3HSLM8dVn_JQK-gvsG9MKj47IRYV9D4xZkzs
@@ -208,7 +208,7 @@ export default function LoginScreen() {
</View>
<View className="flex flex-col gap-4">
<AButton
{/* <AButton
leftIcon={
<IconWeixin color="#fff" />
}
@@ -227,7 +227,7 @@ export default function LoginScreen() {
onPress={onQQLogin}
>
QQ
</AButton>
</AButton> */}
<AButton
variant="outline"
code/allapp/allapp-rn/src/app/money/category/setting/index.tsx
-5
View File
@@ -149,11 +149,6 @@ export default function MoneyCategorySetting() {
<AButton
className="rounded-full"
size="sm"
leftIcon={{
icon: 'Plus',
color: '#fff',
clickable: false,
}}
onPress={(() =>
setshowEditCategory(true)
)}
code/allapp/allapp-rn/src/components/common/ao/Drawer.tsx
+3 -4
View File
@@ -37,7 +37,7 @@ export default function Drawer({
isCircle,
menuPosition = 'bottom',
children,
CircleNum,
CircleNum = 8,
isShadowHideModal = true,
header,
title,
@@ -48,7 +48,6 @@ export default function Drawer({
const anim = useRef(new Animated.Value(0)).current
/* ================== 同步外部 visible ================== */
useEffect(() => {
if (visible) {
setInnerVisible(true)
@@ -59,7 +58,6 @@ export default function Drawer({
}
}, [visible])
/* ================== 布局样式 ================== */
useEffect(() => {
switch (menuPosition) {
case 'left':
@@ -207,8 +205,9 @@ export default function Drawer({
</TouchableWithoutFeedback>
{/* Drawer */}
<View style={drawerMenuBox}>
<View style={drawerMenuBox} pointerEvents="box-none">
<Animated.View
pointerEvents="box-none"
style={[
styles.container,
{
code/allapp/allapp-rn/src/components/common/ao/LucideIcon.tsx
-1
View File
@@ -33,7 +33,6 @@ export default function LucideIcon({
return <IconComponent size={size} color={color} strokeWidth={strokeWidth} style={style} className={className} />
}
// clickable 为 true，包 Pressable
return (
<Pressable onPress={onPress} style={style} className={className}>
<IconComponent size={size} color={color} strokeWidth={strokeWidth} />
code/allapp/allapp-rn/src/request/index.ts
+2 -2
View File
@@ -30,8 +30,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,
code/allapp/allapp-rn/test.html
+76 -132
View File
@@ -1,147 +1,91 @@
<!DOCTYPE html>
<html lang="zh-CN">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bottom Nav Demo</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局底部导航 Demo</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont;
}
body {
margin: 0;
font-family: sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
body {
background: #f6f7f9;
height: 100vh;
}
/* 弹出面板 */
.bottom-panel {
width: 100%;
max-width: 400px;
background: white;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 16px;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.content {
padding: 16px;
padding-bottom: 80px;
color: #555;
}
/* 每个导航 item */
.nav-item {
background: #f9f9f9;
border-radius: 16px;
padding: 16px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
text-align: center;
}
/* 底部栏 */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 56px;
background: #fff;
border-top: 1px solid #e5e5e5;
.nav-item:hover {
background: #e0e0ff;
transform: translateY(-3px) scale(1.05);
}
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
}
/* 左右按钮 */
.nav-btn {
width: 40px;
height: 40px;
border: none;
background: none;
font-size: 18px;
color: #333;
}
/* 中间区域 */
.nav-center {
flex: 1;
text-align: center;
font-size: 14px;
font-weight: 500;
color: #222;
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
}
.nav-center .arrow {
font-size: 12px;
color: #999;
}
/* 扩展菜单 */
.extension {
position: fixed;
bottom: 56px;
left: 12px;
right: 12px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: all 0.2s ease;
}
.extension.show {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.extension-item {
padding: 14px 16px;
font-size: 14px;
color: #333;
border-bottom: 1px solid #eee;
}
.extension-item:last-child {
border-bottom: none;
}
.extension-item.danger {
color: #d93026;
}
.nav-icon {
font-size: 28px;
margin-bottom: 6px;
}
.nav-name {
font-size: 14px;
font-weight: 600;
}
</style>
</head>
<body>
<main class="content">
<p>当前工具内容区域</p>
</main>
<!-- 扩展菜单 -->
<div class="extension" id="extension">
<div class="extension-item">视图切换</div>
<div class="extension-item">工具设置</div>
<div class="extension-item">导出数据</div>
<div class="extension-item danger">清空记录</div>
<div class="bottom-panel">
<div class="nav-item" onclick="alert('跳转到首页')">
<div class="nav-icon">🏠</div>
<div class="nav-name">首页</div>
</div>
<div class="nav-item" onclick="alert('跳转到记账')">
<div class="nav-icon">📝</div>
<div class="nav-name">记账</div>
</div>
<div class="nav-item" onclick="alert('跳转到分类')">
<div class="nav-icon">📂</div>
<div class="nav-name">分类</div>
</div>
<div class="nav-item" onclick="alert('跳转到分析')">
<div class="nav-icon">📊</div>
<div class="nav-name">分析</div>
</div>
<div class="nav-item" onclick="alert('跳转到设置')">
<div class="nav-icon">⚙️</div>
<div class="nav-name">设置</div>
</div>
</div>
<!-- 底部导航 -->
<nav class="bottom-bar">
<button class="nav-btn">←</button>
<div class="nav-center">
<span class="title">记账 · 本月</span>
<span class="arrow">▾</span>
</div>
<button class="nav-btn" onclick="toggleExt()">⋯</button>
</nav>
<script>
function toggleExt() {
document.getElementById('extension')
.classList.toggle('show')
}
</script>
</body>
</html>
</html>