u

code/allapp/allapp-rn/src/app/space/manage/components/SettingActions.tsx

@@ -1,8 +1,10 @@
 import type { UserSpace } from '@/types/space'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Text, View } from 'react-native'
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
 import { toast } from 'sonner-native'
-import { LucideIcon } from '@/components/common/ao'
+import { AButton, LucideIcon } from '@/components/common/ao'
 import { AInput, AModal } from '@/components/common/ao/index'
 import {
   Actionsheet,
@@ -14,7 +16,7 @@ import {
   ActionsheetItem,
   ActionsheetItemText,
 } from '@/components/ui/actionsheet'
-import { dissolveSpaceApi } from '@/request/api/space'
+import { dissolveSpaceApi, updateSpaceNameApi } from '@/request/api/space'
 import { useUserStore } from '@/store/user'
 
 interface SettingActionsProps {
@@ -31,20 +33,25 @@ export default function SettingActions(
     isOpen,
     onClose,
     space,
-    onActionSuccess
+    onActionSuccess,
   }: SettingActionsProps,
 ) {
   const userStore = useUserStore()
-
+  const inputRef = useRef<any>(null)
   const [localSpace, setLocalSpace] = useState(space)
 
   const [showNameModal, setShowNameModal] = useState(false)
-
   const [showMemberNameModal, setShowMemberNameModal] = useState(false)
-
   useEffect(() => {
     setLocalSpace(space)
   }, [space])
+
+  useEffect(() => {
+    if (showNameModal) {
+      inputRef.current?.focus()
+    }
+  }, [showNameModal])
+
   return (
     <>
       <Actionsheet
@@ -112,7 +119,7 @@ export default function SettingActions(
               }).then((res) => {
                 if (res.isSuccess) {
                   toast.success('空间已解散')
-                  onActionSuccess?.
+                  onActionSuccess?.()
                 }
               },
               )
@@ -133,47 +140,36 @@ export default function SettingActions(
 
         </ActionsheetContent>
       </Actionsheet>
-
-      <AModal
-        title="修改空间名称"
-        showCloseIcon
-        body={
-          (
-            <View className="gap-2">
-              <Text>空间名称</Text>
-              <AInput
-                value={localSpace?.name || ''}
-                onChangeText={(val) => {
-                  setLocalSpace(prev => prev
-                    ? ({
-                        ...prev,
-                        name: val,
-                      })
-                    : null)
-                }}
-                className="flex-1"
-              />
-            </View>
-          )
-        }
+      <Actionsheet
         isOpen={showNameModal}
-        onCancel={() => {
-          setShowNameModal(false)
-          setLocalSpace(space)
-        }}
         onClose={() => {
           setShowNameModal(false)
-          setLocalSpace(space)
-        }}
-        onConfirm={async () => {
-          // 更新名称
-          if (!localSpace?.name) {
-            toast.warning('请输入空间名称')
-          }
         }}
       >
-      </AModal>
+        <KeyboardAvoidingView
+          behavior="position"
+        >
+          <ActionsheetBackdrop />
 
+          <ActionsheetContent>
+            <ActionsheetDragIndicatorWrapper>
+              <ActionsheetDragIndicator />
+            </ActionsheetDragIndicatorWrapper>
+
+            <View className="pb-6">
+              <View className="items-center mb-6">
+                <Text className="text-lg font-semibold">空间名称</Text>
+              </View>
+
+              <View className="w-full mb-4">
+                <AInput ref={inputRef} className="w-full" placeholder="请输入空间名称" />
+              </View>
+
+              <AButton className="rounded-full">保存</AButton>
+            </View>
+          </ActionsheetContent>
+        </KeyboardAvoidingView>
+      </Actionsheet>
     </>
   )
 }

code/allapp/allapp-rn/src/app/space/manage/index.tsx

@@ -39,6 +39,7 @@ export default function AuthSpace() {
   function listUserSpaces() {
     listUserSpacesApi().then((res) => {
       if (res.isSuccess) {
+        console.log(res.data)
         setSpaces(res.data.spaces)
       }
     })
@@ -55,8 +56,8 @@ export default function AuthSpace() {
         style={{
           height: ITEM_HEIGHT,
         }}
-        className={`rounded-md flex-row items-center justify-between px-4 py-3 border
-                          ${item.space_id === selectedId ? 'border-gray-700' : 'border-gray-300'}`}
+        className={`bg-[#f9f9f9] rounded-md flex-row items-center justify-between px-4 py-3 border
+                          ${item.space_id === selectedId ? 'border-gray-700' : 'border-gray-200'}`}
       >
         <View className="flex-row items-center">
           <Sortable.Handle>
@@ -211,6 +212,9 @@ export default function AuthSpace() {
             : (
                 <Sortable.Grid
                   scrollableRef={scrollableRef}
+                  keyExtractor={(item: UserSpace) => {
+                    return String(item.space_id)
+                  }}
                   activeItemScale={1}
                   columns={1}
                   data={spaces}

code/allapp/allapp-rn/src/app/space/manage/sub-page/settings.tsx

@@ -0,0 +1,13 @@
+import { View } from 'react-native'
+
+import CustomHeader from '@/components/custom/Header'
+
+export default function Settings() {
+  return (
+    <View className="flex-1">
+      <CustomHeader title="空间设置" />
+
+      <View></View>
+    </View>
+  )
+}