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-03-02 17:29:51 +08:00
1 parent ab3eaed7ce
commit cf23acdabc
28 files changed
+1292 -486
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/allapp/allapp-rn/src/app/space/manage/components/SettingActions.tsx
-175
View File
@@ -1,175 +0,0 @@
import type { UserSpace } from '@/types/space'
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 { AButton, LucideIcon } from '@/components/common/ao'
import { AInput, AModal } from '@/components/common/ao/index'
import {
Actionsheet,
ActionsheetBackdrop,
ActionsheetContent,
ActionsheetDragIndicator,
ActionsheetDragIndicatorWrapper,
ActionsheetIcon,
ActionsheetItem,
ActionsheetItemText,
} from '@/components/ui/actionsheet'
import { dissolveSpaceApi, updateSpaceNameApi } from '@/request/api/space'
import { useUserStore } from '@/store/user'
interface SettingActionsProps {
isOpen: boolean
onClose: () => void
space: UserSpace | null
onActionSuccess?: () => void
}
export default function SettingActions(
{
isOpen,
onClose,
space,
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
isOpen={isOpen}
onClose={() => {
onClose()
}}
>
<ActionsheetBackdrop />
<ActionsheetContent
style={{
paddingBottom: 6,
}}
>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
{
space?.role === 0 && (
<ActionsheetItem>
<ActionsheetIcon
as={() => <LucideIcon icon="UserCog" />}
/>
<ActionsheetItemText>成员管理</ActionsheetItemText>
</ActionsheetItem>
)
}
{
space?.owner_id === userStore.userInfo.id && (
<ActionsheetItem onPress={() => {
setShowNameModal(true)
}}
>
<ActionsheetIcon
as={() => <LucideIcon icon="Pencil" />}
/>
<ActionsheetItemText>修改空间名称</ActionsheetItemText>
</ActionsheetItem>
)
}
<ActionsheetItem>
<ActionsheetIcon
as={() => <LucideIcon icon="Pencil" />}
/>
<ActionsheetItemText>修改我的空间昵称</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem>
<ActionsheetIcon
as={() => <LucideIcon icon="Star" />}
/>
<ActionsheetItemText>
{space?.is_default === 1 ? '取消' : '设置'}
默认
</ActionsheetItemText>
</ActionsheetItem>
<ActionsheetItem onPress={() => {
if (space?.owner_id === userStore.userInfo.id) {
// 解散空间
dissolveSpaceApi({
space_id: space.space_id,
}).then((res) => {
if (res.isSuccess) {
toast.success('空间已解散')
onActionSuccess?.()
}
},
)
}
else {
// 退出空间
}
}}
>
<ActionsheetIcon
as={() => <LucideIcon icon="LogOut" />}
/>
<ActionsheetItemText>
{space?.owner_id === userStore.userInfo.id ? '解散' : '退出'}
空间
</ActionsheetItemText>
</ActionsheetItem>
</ActionsheetContent>
</Actionsheet>
<Actionsheet
isOpen={showNameModal}
onClose={() => {
setShowNameModal(false)
}}
>
<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
+140 -119
View File
@@ -1,20 +1,28 @@
import type { UserSpace } from '@/types/space'
import { useEffect, useState } from 'react'
import { useFocusEffect, useRouter } from 'expo-router'
import { useCallback, useEffect, useRef, useState } from 'react'
import { Pressable, Text, View } from 'react-native'
import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
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'
import {
Actionsheet,
ActionsheetBackdrop,
ActionsheetContent,
ActionsheetDragIndicator,
ActionsheetDragIndicatorWrapper,
} from '@/components/ui/actionsheet'
import { Badge, BadgeText } from '@/components/ui/badge'
import { createSpaceApi, listUserSpacesApi } from '@/request/api/space/index'
import { createSpaceApi, listUserSpacesApi, updateSpaceSortNumberApi } from '@/request/api/space/index'
import { useUserStore } from '@/store/user'
import SettingActions from './components/SettingActions'
export default function AuthSpace() {
const userStore = useUserStore()
const router = useRouter()
// scrollView 相关
const scrollableRef = useAnimatedRef<Animated.ScrollView>()
@@ -23,23 +31,30 @@ export default function AuthSpace() {
// 空间列表
const [spaces, setSpaces] = useState<UserSpace[]>([])
const [selectedId, setSelectedId] = useState<number | null>(null)
// 新建
const [createOpen, setCreateOpen] = useState(false)
const [createForm, setCreateForm] = useState({
name: '',
})
const [createLoading, setCreateLoading] = useState(false)
// 设置
const [showSettings, setShowSettings] = useState(false)
const [settingCurrentSpace, setSettingCurrentSpace] = useState<UserSpace | null>(null)
const createInputRef = useRef<any>(null)
useEffect(() => {
if (createOpen) {
const timer = setTimeout(() => {
createInputRef.current?.focus()
}, 300)
return () => clearTimeout(timer)
}
}, [createOpen])
// 获取空间列表
function listUserSpaces() {
listUserSpacesApi().then((res) => {
if (res.isSuccess) {
console.log(res.data)
setSpaces(res.data.spaces)
}
})
@@ -50,23 +65,22 @@ export default function AuthSpace() {
<Pressable
key={item.space_id}
onPress={() => {
setSelectedId(item.space_id)
scrollToCenter(index)
router.push({
pathname: '/space/manage/sub-page/settings',
params: {
spaceId: item.space_id,
},
})
}}
style={{
height: ITEM_HEIGHT,
}}
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'}`}
className={`rounded-xl flex-row items-center px-4 py-3 bg-[#fff] ${
index === spaces.length - 1 ? 'mb-4' : ''
}`}
>
<View className="flex-row items-center">
<Sortable.Handle>
<LucideIcon
icon="Grip"
size={20}
className="mr-4"
/>
</Sortable.Handle>
<View className="w-full flex-row items-center justify-between">
<View>
<View className="flex-row items-center gap-2">
<Text
@@ -77,16 +91,16 @@ export default function AuthSpace() {
{
item.owner_id === userStore.userInfo.id && (
<Badge size="sm" variant="solid" action="muted">
<BadgeText>创建者</BadgeText>
<Badge size="sm" className="bg-[#333] rounded-full">
<BadgeText className="text-white">创建者</BadgeText>
</Badge>
)
}
{
item.is_default === 1 && (
<Badge size="sm" variant="solid" action="info">
<BadgeText>默认</BadgeText>
<Badge size="sm" className="bg-[#333] rounded-full">
<BadgeText className="text-white">默认</BadgeText>
</Badge>
)
}
@@ -112,33 +126,15 @@ export default function AuthSpace() {
</View>
</View>
</View>
<Sortable.Handle>
<LucideIcon
icon="Grip"
size={20}
/>
</Sortable.Handle>
</View>
<View className="flex flex-row items-center gap-3">
<View className="w-8 h-8 rounded-full items-center justify-center bg-[#333333]">
<LucideIcon
icon="UserPlus"
size={18}
color="#fff"
/>
</View>
<Pressable
className="w-8 h-8 rounded-full items-center justify-center bg-[#333333]"
onPress={(e) => {
e.stopPropagation()
setSettingCurrentSpace(item)
setShowSettings(true)
}}
>
<LucideIcon
icon="Bolt"
size={18}
color="#fff"
clickable={false}
/>
</Pressable>
</View>
</Pressable>
)
@@ -157,16 +153,17 @@ export default function AuthSpace() {
})
}
useEffect(() => {
listUserSpaces()
}, [])
useFocusEffect(
useCallback(() => {
listUserSpaces()
}, []),
)
return (
<View className="flex-1 bg-white">
<View className="flex-1 bg-[#f5f6f8]">
<CustomHeader title="空间列表" />
<View className="flex-1 px-4">
<View className="flex-1 p-4">
<View className="">
<Text className="text-sm text-gray-500 mb-2">
选择或创建空间
@@ -224,84 +221,108 @@ export default function AuthSpace() {
highlight-next-line
customHandle
autoScrollActivationOffset={200}
onDragEnd={(dragData) => {
const newData = dragData.data
if (JSON.stringify(spaces) !== JSON.stringify(newData)) {
const updateData = newData.map((item, index) => {
return {
space_id: item.space_id,
sort_number: index,
}
})
updateSpaceSortNumberApi({
spaces: updateData,
}).then((res) => {
if (res.isSuccess) {
// 更新成功
}
})
}
}}
/>
)}
</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>
)
}
<Actionsheet
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,
member_name: userStore.userInfo.nickname,
sort_number: 0,
}).then((res) => {
if (res.isSuccess) {
toast.success('创建成功')
setCreateOpen(false)
setCreateForm({
name: '',
})
listUserSpaces()
}
})
}}
>
</AModal>
<KeyboardAvoidingView
behavior="position"
>
<ActionsheetBackdrop />
<SettingActions
isOpen={showSettings}
onClose={() => {
setShowSettings(false)
<ActionsheetContent>
<ActionsheetDragIndicatorWrapper>
<ActionsheetDragIndicator />
</ActionsheetDragIndicatorWrapper>
setTimeout(() => {
setSettingCurrentSpace(null)
}, 300)
}}
space={settingCurrentSpace}
/>
<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={createInputRef}
value={createForm.name}
onChangeText={(val) => {
setCreateForm(prev => ({
...prev,
name: val,
}))
}}
className="w-full"
placeholder="请输入空间名称"
/>
</View>
<AButton
className="rounded-full"
loading={createLoading}
onPress={() => {
if (!createForm.name) {
toast.warning('请输入空间名称')
return
}
setCreateLoading(true)
try {
createSpaceApi({
name: createForm.name,
member_name: userStore.userInfo.nickname,
sort_number: spaces.length,
}).then((res) => {
if (res.isSuccess) {
toast.success('创建成功')
setCreateOpen(false)
setCreateForm({
name: '',
})
listUserSpaces()
}
})
}
finally {
setCreateLoading(false)
}
}}
>
创建
</AButton>
</View>
</ActionsheetContent>
</KeyboardAvoidingView>
</Actionsheet>
</View>
)
}
code/allapp/allapp-rn/src/app/space/manage/sub-page/settings.tsx
-13
View File
@@ -1,13 +0,0 @@
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>
)
}
code/allapp/allapp-rn/src/app/space/manage/sub-page/settings/index.tsx
+430
View File
@@ -0,0 +1,430 @@
import type { UserSpace } from '@/types/space'
import { router, useLocalSearchParams } from 'expo-router'
import { useEffect, useRef, useState } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import { KeyboardAvoidingView } from 'react-native-keyboard-controller'
import { toast } from 'sonner-native'
import { AButton, AInput, AModal, ASwitch, LucideIcon } from '@/components/common/ao'
import EmptyState from '@/components/common/EmptyStatus'
import CustomHeader from '@/components/custom/Header'
import {
Actionsheet,
ActionsheetBackdrop,
ActionsheetContent,
ActionsheetDragIndicator,
ActionsheetDragIndicatorWrapper,
} from '@/components/ui/actionsheet'
import { dissolveSpaceApi, getSpaceSettingsApi, updateSpaceDefaultApi, updateSpaceMemberNameApi, updateSpaceNameApi } from '@/request/api/space'
import { useUserStore } from '@/store/user'
interface ItemProps {
icon: any
title: string
right?: React.ReactNode
isLast?: boolean
showRightIcon?: boolean
onPress?: () => void
}
function Item({
icon,
title,
right,
isLast,
showRightIcon = true,
onPress,
}: ItemProps) {
return (
<>
<TouchableOpacity
className="flex-row items-center justify-between px-4 h-12"
onPress={onPress}
>
<View className="flex-row items-center gap-3">
<LucideIcon icon={icon} size={18} strokeWidth={1.5} />
<Text className="text-sm text-gray-900">{title}</Text>
</View>
<View className="flex-row items-center gap-1">
{right}
{showRightIcon && (
<LucideIcon icon="ChevronRight" size={16} color="#9ca3af" />
)}
</View>
</TouchableOpacity>
{!isLast && <View className="h-px bg-gray-100 ml-14" />}
</>
)
}
export default function Settings() {
const userStore = useUserStore()
const params = useLocalSearchParams<{ spaceId: string }>()
const { spaceId } = params
const [space, setSpace] = useState<UserSpace | null>(null)
// 空间名称
const [showName, setShowName] = useState(false)
const [nameForm, setNameForm] = useState({
name: '',
})
const [nameLoading, setNameLoading] = useState(false)
const nameInputRef = useRef<any>(null)
// 空间昵称
const [showMemberName, setShowMemberName] = useState(false)
const [memberNameForm, setMemberNameForm] = useState({
name: '',
})
const [memberNameLoading, setMemberNameLoading] = useState(false)
const memberNameInputRef = useRef<any>(null)
// 默认
const [defaultLoading, setDefaultLoading] = useState(false)
// 解散
const [showDissolve, setShowDissolve] = useState(false)
useEffect(() => {
if (showName) {
const timer = setTimeout(() => {
nameInputRef.current?.focus()
}, 300)
return () => clearTimeout(timer)
}
}, [showName])
useEffect(() => {
if (!spaceId) {
toast.warning('空间无效')
router.back()
}
else {
getSpaceSettingsApi({
space_id: Number(spaceId),
}).then((res) => {
if (res.isSuccess) {
setSpace(res.data)
}
})
}
}, [spaceId])
return (
<View className="flex-1 bg-[#f5f6f8]">
<CustomHeader title="空间设置" />
{
!space
? (
<EmptyState title="正在加载空间中 . . ." />
)
: (
<View className="flex-1 px-4 pt-4">
<Text className="text-sm font-semibold text-gray-400 mb-2 tracking-wider">
常用设置
</Text>
<View className="bg-white rounded-xl overflow-hidden mb-6">
{
space?.owner_id === userStore.userInfo.id && (
<Item
icon="Earth"
title="空间名称"
right={(
<Text className="text-sm text-gray-400">{space.name}</Text>
)}
onPress={() => {
setNameForm({
name: space.name,
})
setShowName(true)
}}
/>
)
}
<Item
icon="User"
title="我的空间昵称"
right={(
<Text className="text-sm text-gray-400">{space.member_name}</Text>
)}
onPress={() => {
setMemberNameForm({
name: space.member_name,
})
setShowMemberName(true)
}}
/>
<Item
icon="Star"
title="设为默认空间"
isLast
showRightIcon={false}
right={(
<ASwitch
value={space.is_default}
trueValue={1}
falseValue={0}
disabled={defaultLoading}
onChange={(val) => {
if (!space) {
toast.error('空间信息异常')
return
}
try {
setDefaultLoading(true)
updateSpaceDefaultApi({
space_id: space.space_id,
is_default: val,
}).then((res) => {
if (res.isSuccess) {
toast.success('更新默认空间成功')
setSpace(prev => prev
? ({
...prev,
is_default: val,
})
: null)
}
})
}
finally {
setDefaultLoading(false)
}
}}
/>
)}
/>
</View>
<Text className="text-sm font-semibold text-gray-400 mb-2 tracking-wider">
其它操作
</Text>
<View className="bg-white rounded-xl overflow-hidden">
<Item
icon="Users"
title="成员管理"
/>
<Item
icon="LogOut"
title={userStore.userInfo.id === space.owner_id ? '解散空间' : '退出空间'}
isLast
onPress={() => {
setShowDissolve(true)
}}
/>
</View>
</View>
)
}
{/* 空间名称 */}
<Actionsheet
isOpen={showName}
onClose={() => {
setShowName(false)
setNameForm(prev => ({
...prev,
name: '',
}))
}}
>
<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={nameInputRef}
value={nameForm.name}
onChangeText={text => setNameForm(prev => prev
? {
...prev,
name: text,
}
: null)}
className="w-full"
placeholder="请输入空间名称"
/>
</View>
<AButton
className="rounded-full"
loading={nameLoading}
onPress={() => {
if (!space) {
toast.error('空间信息异常')
return
}
try {
setNameLoading(true)
updateSpaceNameApi({
space_id: space.space_id,
space_name: nameForm.name,
}).then((res) => {
if (res.isSuccess) {
toast.success('空间名称已更新')
setShowName(false)
setSpace(prev => prev
? ({
...prev,
name: nameForm.name,
})
: null)
}
},
)
}
finally {
setNameLoading(false)
}
}}
>
保存
</AButton>
</View>
</ActionsheetContent>
</KeyboardAvoidingView>
</Actionsheet>
{/* 空间昵称 */}
<Actionsheet
isOpen={showMemberName}
onClose={() => {
setShowMemberName(false)
setMemberNameForm(prev => ({
...prev,
name: '',
}))
}}
>
<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={memberNameInputRef}
value={memberNameForm.name}
onChangeText={text => setMemberNameForm(prev => prev
? {
...prev,
name: text,
}
: null)}
className="w-full"
placeholder="请输入空间昵称"
/>
</View>
<AButton
className="rounded-full"
loading={memberNameLoading}
onPress={() => {
if (!space) {
toast.error('空间信息异常')
return
}
try {
setMemberNameLoading(true)
updateSpaceMemberNameApi({
space_id: space.space_id,
member_name: memberNameForm.name,
}).then((res) => {
if (res.isSuccess) {
toast.success('空间昵称已更新')
setShowMemberName(false)
setSpace(prev => prev
? ({
...prev,
member_name: memberNameForm.name,
})
: null)
}
},
)
}
finally {
setMemberNameLoading(false)
}
}}
>
保存
</AButton>
</View>
</ActionsheetContent>
</KeyboardAvoidingView>
</Actionsheet>
{/* 解散 */}
<AModal
title="提示"
body="确认解散该空间么？"
isOpen={showDissolve}
onClose={() => {
setShowDissolve(false)
}}
onCancel={() => {
setShowDissolve(false)
}}
onConfirm={async () => {
if (!space) {
toast.error('空间信息异常')
return
}
await dissolveSpaceApi({
space_id: space.space_id,
}).then((res) => {
if (res.isSuccess) {
setShowDissolve(false)
toast.success('解散成功')
setTimeout(() => {
router.back()
}, 300)
}
})
}}
/>
</View>
)
}