feat: 添加键盘滚动视图支持，优化确认模态框布局；移除调试日志；更新生成记录加载逻辑

2026-01-27 16:17:15 +08:00 · 2026-01-27 16:17:15 +08:00 · e720969d2e
parent 8e313705c5
commit e720969d2e
5 changed files with 62 additions and 53 deletions
--- a/@share/components/ConfirmModal.tsx
+++ b/@share/components/ConfirmModal.tsx
@ -1,5 +1,6 @@
 import { Ionicons } from '@expo/vector-icons'
 import React, { type ReactNode } from 'react'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'

 import Block from './Block'
 import Text from './Text'
@ -49,50 +50,50 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
  }

  return (
-    <Block className="fixed inset-0 z-[60] items-center justify-center p-[24px]">
-      <Block className="relative w-full max-w-[320px] -skew-x-3 border-4 border-black bg-white p-[24px] shadow-[10px_10px_0px_#e61e25]">
-        <Block className="absolute left-[-12px] top-[-12px] skew-x-3 border-[3px] border-black bg-accent px-[8px] py-[4px] shadow-[2px_2px_0px_rgba(0,0,0,0.2)]">
-          <Text className="text-[12px] font-black tracking-wider">{badge}</Text>
-        </Block>
-
-        <Text className="mb-[8px] mt-[4px] text-[24px] font-black tracking-tight text-black">{title}</Text>
-        <Block className="mb-[20px] h-[4px] w-full bg-black" />
-
-        <Block className="mb-[24px]">
-          {typeof content === 'string' ? (
-            <Text className="text-[14px] font-bold leading-relaxed text-gray-800">{content}</Text>
-          ) : (
-            content
-          )}
-        </Block>
-
-        <Block className="w-full flex-row gap-x-[12px]">
-          <Block className="flex flex-1 border-[3px] border-black py-[12px]" onClick={handleCancel}>
-            <Text className="text-center text-black">{cancelText}</Text>
+    <KeyboardAwareScrollView bottomOffset={100}>
+      <Block className="fixed inset-0 z-[60] items-center justify-center p-[24px]">
+        <Block className="relative w-full max-w-[320px] -skew-x-3 border-4 border-black bg-white p-[24px] shadow-[10px_10px_0px_#e61e25]">
+          <Block className="absolute left-[-12px] top-[-12px] skew-x-3 border-[3px] border-black bg-accent px-[8px] py-[4px] shadow-[2px_2px_0px_rgba(0,0,0,0.2)]">
+            <Text className="text-[12px] font-black tracking-wider">{badge}</Text>
          </Block>

-          <Block
-            className="flex flex-1 flex-row items-center justify-center border-[3px] border-black bg-accent py-[12px] shadow-[4px_4px_0px_#000]"
-            onClick={handleConfirm}
-            style={{ opacity: confirmLoading ? 0.6 : 1 }}
-          >
-            {confirmLoading ? (
-              <>
-                <Ionicons color="#000" name="sync" size={16} style={{ marginRight: 4 }} />
-                <Text className="text-black">{confirmText}</Text>
-              </>
+          <Text className="mb-[8px] mt-[4px] text-[24px] font-black tracking-tight text-black">{title}</Text>
+          <Block className="mb-[20px] h-[4px] w-full bg-black" />
+
+          <Block className="mb-[24px]">
+            {typeof content === 'string' ? (
+              <Text className="text-[14px] font-bold leading-relaxed text-gray-800">{content}</Text>
            ) : (
-              <>
-                <Text className="text-black">{confirmText}</Text>
-                {title==='确认支付?' && (
-                  <Ionicons color="#000" name="flash" size={16} style={{ marginLeft: 4 }} /> 
-                )}
-              </>
+              content
            )}
          </Block>
+
+          <Block className="w-full flex-row gap-x-[12px]">
+            <Block className="flex flex-1 border-[3px] border-black py-[12px]" onClick={handleCancel}>
+              <Text className="text-center text-black">{cancelText}</Text>
+            </Block>
+
+            <Block
+              className="flex flex-1 flex-row items-center justify-center border-[3px] border-black bg-accent py-[12px] shadow-[4px_4px_0px_#000]"
+              onClick={handleConfirm}
+              style={{ opacity: confirmLoading ? 0.6 : 1 }}
+            >
+              {confirmLoading ? (
+                <>
+                  <Ionicons color="#000" name="sync" size={16} style={{ marginRight: 4 }} />
+                  <Text className="text-black">{confirmText}</Text>
+                </>
+              ) : (
+                <>
+                  <Text className="text-black">{confirmText}</Text>
+                  {title === '确认支付?' && <Ionicons color="#000" name="flash" size={16} style={{ marginLeft: 4 }} />}
+                </>
+              )}
+            </Block>
+          </Block>
        </Block>
      </Block>
-    </Block>
+    </KeyboardAwareScrollView>
  )
 }

--- a/app/(tabs)/explore.tsx
+++ b/app/(tabs)/explore.tsx
@ -37,7 +37,7 @@ export default observer(function TabTwoScreen() {

  const isConnected = bleStore.state.isConnected

-  console.log('isConnected----------', isConnected)
+  // console.log('isConnected----------', isConnected)

  const { galleryList: contents } = bleStore

--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@ -582,11 +582,6 @@ const GooActions = observer<GooActionsProps>(function GooActions({ gooPoints, on
            {isDev && isPolling && <Block className="ml-[4px] size-[6px] rounded-full bg-green-500" />}
          </Block>
        )}
-        {!!isLogin && (
-          <Block onClick={() => router.push('/settings')}>
-            <Ionicons color="white" name="settings-outline" size={22} />
-          </Block>
-        )}
        <Block
          className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
          onClick={onOpenSearch}
--- a/app/(tabs)/sync.tsx
+++ b/app/(tabs)/sync.tsx
@ -72,7 +72,7 @@ const Sync = observer(() => {
  // 加载生成记录
  useEffect(() => {
    if (isFocused) {
-      loadGenerations()
+      // loadGenerations()
    }
  }, [isFocused])

@ -423,7 +423,7 @@ const Sync = observer(() => {
        <FlashList
          contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: 200 }}
          data={posts}
-          drawDistance={300}
+          // drawDistance={300}
          maxItemsInRecyclePool={0}
          removeClippedSubviews={true}
          ItemSeparatorComponent={() => <Block style={{ height: 6 }} />}
@ -499,6 +499,9 @@ const DeviceItem = observer(({ device }: { device: any }) => {

  const canEdit = !!bindDevice && isConnected

+  // 绑定过的设备
+  const hasBind = !!bleStore.bindDeviceList?.find((d) => d?.id === id)
+
  const { id: userId } = userStore.user || {}
  const onConnectToggle = async (device: any) => {
    if (device.connected) {
@ -623,6 +626,16 @@ const DeviceItem = observer(({ device }: { device: any }) => {
                  {isConnected ? '已连接' : '未连接'}
                </Text>
              </Block>
+
+              {hasBind && (
+                <Block className="">
+                  <Text
+                    className={`border-2 border-black px-[6px] text-[10px] font-[900] ${isConnected ? 'bg-black text-accent' : 'bg-gray-200 text-gray-500'}`}
+                  >
+                    绑定过
+                  </Text>
+                </Block>
+              )}
            </Block>
          </Block>
        </Block>
@ -856,13 +869,10 @@ const HeaderBanner = observer(({ connectedDevice, onPick }: { connectedDevice: a

  const handleLogout = () => {
    if (isLogin) {
-      signOut().then(() => {
-        Toast.show({ title: '已登出' })
-        router.replace('/auth')
-      })
+      router.push('/settings')
    }
  }
-  const loginText = isLogin ? '登出' : '登录'
+  const loginText = isLogin ? '设置' : '登录'

  return (
    <Block className="relative z-40 flex-row items-center justify-between py-[12px]">
--- a/hooks/data/use-template-generations.ts
+++ b/hooks/data/use-template-generations.ts
@ -1,6 +1,6 @@
 import { root } from '@repo/core'
 import { type ListTemplateGenerationsInput, type TemplateGeneration, TemplateGenerationController } from '@repo/sdk'
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'

 import { type ApiError } from '@/lib/types'

@ -19,14 +19,13 @@ export const useTemplateGenerations = () => {
  const load = useCallback(async (params?: ListTemplateGenerationsInput) => {
    setLoading(true)
    setError(null)
-
    currentPageRef.current = 1
    const templateGeneration = root.get(TemplateGenerationController)

    const { data, error } = await handleError(
      async () =>
        await templateGeneration.list({
-          page: currentPageRef.current,
+          page: 1,
          limit: params?.limit || pageSize,
          ...params,
        }),
@ -93,6 +92,10 @@ export const useTemplateGenerations = () => {
    [load],
  )

+  useEffect(() => {
+    load()
+  }, [])
+
  return {
    data,
    loading,