feat: implement user balance management with hooks and store

app/membership.tsx

@@ -22,6 +22,7 @@ import { CheckMarkIcon } from '@/components/icon/checkMark'
 import PointsDrawer from '@/components/drawer/PointsDrawer'
 import Dropdown from '@/components/ui/dropdown'
 import GradientText from '@/components/GradientText'
+import { useUserBalance } from '@/hooks/use-user-balance'
 
 // 使用唯一 id 的 PointsIcon，避免与其他页面的图标 id 冲突
 const MembershipPointsIcon = () => {
@@ -67,8 +68,11 @@ export default function MembershipScreen() {
     const [selectedPlan, setSelectedPlan] = useState<PlanType>('pro')
     const [agreed, setAgreed] = useState(false)
     const [pointsDrawerVisible, setPointsDrawerVisible] = useState(false)
-    
+
     const { t } = useTranslation()
+
+    // 获取积分余额
+    const { balance } = useUserBalance()
     
     // 订阅计划数据（使用国际化）
     const plans: Plan[] = [
@@ -174,7 +178,7 @@ export default function MembershipScreen() {
                     >
                         <Text style={styles.pointsLabel}>{t('membership.myPoints')}</Text>
                             <MembershipPointsIcon />
-                        <Text style={styles.pointsValue}>60</Text>
+                        <Text style={styles.pointsValue}>{balance}</Text>
                     </Pressable>
                     <View style={styles.settingsButtonContainer}>
                         <Dropdown
@@ -419,7 +423,7 @@ export default function MembershipScreen() {
             <PointsDrawer
                 visible={pointsDrawerVisible}
                 onClose={() => setPointsDrawerVisible(false)}
-                totalPoints={60}
+                totalPoints={balance}
                 subscriptionPoints={0}
                 topUpPoints={0}
             />