bowong
/
expo-duooomi-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://gitea.bowongai.com/bowong/expo-duooomi-app

This commit is contained in:
康猛 2025-12-26 17:59:00 +08:00
parent 08e99a8581 935b1e92a3
commit 167ae2f138
4 changed files with 121 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
app/(tabs)/generate.tsx
View File

@ -1,19 +1,20 @@
import React, { memo, useCallback, useMemo, useState, useEffect } from 'react'
import { Block, Text, Img, Input, VideoBox } from '@/@share/components'
import { imgPicker } from '@/@share/apis/imgPicker'
import Svg, { Defs, Pattern, Rect, Circle } from 'react-native-svg'
import { FontAwesome, Fontisto, Ionicons } from '@expo/vector-icons'
import { useRouter } from 'expo-router'
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { ActivityIndicator } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'
import { useAnimatedStyle } from 'react-native-reanimated'
import { FontAwesome, Fontisto, Ionicons } from '@expo/vector-icons'
import { screenHeight, screenWidth } from '@/utils'
import { useRouter } from 'expo-router'
import { useRecommendedTemplates } from '@/hooks/data/use-recommended-templates'
import { useCategories } from '@/hooks/data/use-categories'
import { useTemplates } from '@/hooks/data/use-templates'
import { ActivityIndicator } from 'react-native'
import { ApiError } from '@/lib/types'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import Svg, { Circle, Defs, Pattern, Rect } from 'react-native-svg'
import { imgPicker } from '@/@share/apis/imgPicker'
import { Block, Img, Input, Text, VideoBox } from '@/@share/components'
import BannerSection from '@/components/BannerSection'
import { useCategories } from '@/hooks/data/use-categories'
import { useRecommendedTemplates } from '@/hooks/data/use-recommended-templates'
import { useTemplates } from '@/hooks/data/use-templates'
import { type ApiError } from '@/lib/types'
import { screenHeight, screenWidth } from '@/utils'
export default function Index() {
const router = useRouter()
@ -43,7 +44,9 @@ export default function Index() {
const recommended = recommendedTemplates.data?.templates || []
const regular = templates.data?.templates || []
const all = selectedCategoryId ? regular : [...recommended.map((r: RecommendedTemplate) => r.template).filter(Boolean), ...regular]
const all = selectedCategoryId
? regular
: [...recommended.map((r: RecommendedTemplate) => r.template).filter(Boolean), ...regular]
return all.map(
(t: any): Template => ({
@ -128,17 +131,23 @@ export default function Index() {
<Header onSearch={handleSearch} />
<Block className="px-16px relative z-10 flex-1">
<UploadSection meImg={meImg} friendImg={friendImg} onPickMe={onPickMe} onPickFriend={onPickFriend} />
<UploadSection friendImg={friendImg} meImg={meImg} onPickFriend={onPickFriend} onPickMe={onPickMe} />
<PromptSection prompt={prompt} onChangePrompt={setPrompt} />
{categoryList.length > 0 && <CategoryFilter categories={categoryList} selectedId={selectedCategoryId} onSelect={handleSelectCategory} />}
{categoryList.length > 0 && (
<CategoryFilter
categories={categoryList}
selectedId={selectedCategoryId}
onSelect={handleSelectCategory}
/>
)}
<TemplateSection
templates={displayTemplates}
selectedTemplateId={selectedTemplateId}
onSelectTemplate={handleSelectTemplate}
onRandom={handleRandom}
loading={isLoading}
error={hasError}
loading={isLoading}
selectedTemplateId={selectedTemplateId}
templates={displayTemplates}
onRandom={handleRandom}
onRetry={handleRetry}
onSelectTemplate={handleSelectTemplate}
/>
</Block>
</Block>
@ -158,17 +167,17 @@ export default function Index() {
type BannerProps = { bgVideo: string }
const Banner = memo<BannerProps>(function Banner({ bgVideo }) {
return (
<Block className="absolute inset-0 bottom-0 left-0 right-0 top-0 z-0 overflow-hidden">
<VideoBox url={bgVideo} style={{ width: screenWidth, height: screenHeight }} />
<Block className="absolute inset-0 z-0 overflow-hidden">
<VideoBox style={{ width: screenWidth, height: screenHeight }} url={bgVideo} />
<Block className="absolute inset-0">
<Svg width="100%" height="100%" viewBox="0 0 400 800" preserveAspectRatio="none">
<Svg height="100%" preserveAspectRatio="none" viewBox="0 0 400 800" width="100%">
<Defs>
<Pattern id="dots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
<Circle cx="2" cy="2" r="2" fill="#ffff00" opacity="0.05" />
<Pattern height="15" id="dots" patternUnits="userSpaceOnUse" width="15" x="0" y="0">
<Circle cx="2" cy="2" fill="#ffff00" opacity="0.05" r="2" />
</Pattern>
</Defs>
<Rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
<Rect fill="url(#dots)" height="100%" width="100%" x="0" y="0" />
</Svg>
</Block>
@ -183,17 +192,17 @@ type HeaderProps = { onSearch: () => void }
const Header = memo<HeaderProps>(function Header({ onSearch }) {
return (
<Block className="z-20 flex-row items-center justify-between py-[12px]">
<Block className="skew-x-[-12deg] flex-row items-center gap-[8px] border-[1px] border-white/20 bg-black px-[12px] py-[4px]">
<Block className="h-[8px] w-[8px] bg-[#FFE500]" />
<Text className="font-700 skew-x-[12deg] text-[12px] tracking-wider text-white">创造终端</Text>
<Block className="-skew-x-12 flex-row items-center gap-[8px] border border-white/20 bg-black px-[12px] py-[4px]">
<Block className="size-[8px] bg-accent" />
<Text className="font-700 skew-x-12 text-[12px] tracking-wider text-white">创造终端</Text>
</Block>
<Block className="items-center">
<Text className="font-700 text-[24px] italic tracking-tighter text-white">GEN_STUDIO</Text>
</Block>
<Block className="h-[32px] w-[32px] items-center justify-center" onClick={onSearch}>
<Ionicons name="search" size={20} color="white" />
<Block className="size-[32px] items-center justify-center" onClick={onSearch}>
<Ionicons color="white" name="search" size={20} />
</Block>
</Block>
)
@ -210,26 +219,26 @@ const UploadCard = memo<UploadCardProps>(function UploadCard({ variant, img, onP
return (
<Block className="flex-1 overflow-hidden border-[3px] border-black bg-white" onClick={onPick}>
{isMe ? (
<Block className="absolute left-[0px] top-[0px] z-10 border-b-[2px] border-r-[2px] border-black bg-[#FFE500] px-[8px] py-[2px]">
<Block className="absolute left-0 top-0 z-10 border-b-2 border-r-2 border-black bg-accent px-[8px] py-[2px]">
<Text className="text-[10px] font-[900] italic text-black">我</Text>
</Block>
) : (
<Block className="absolute right-[0px] top-[0px] z-10 border-b-[2px] border-l-[2px] border-white bg-black px-[8px] py-[2px]">
<Block className="absolute right-0 top-0 z-10 border-b-2 border-l-2 border-white bg-black px-[8px] py-[2px]">
<Text className="text-[10px] font-[900] italic text-white">朋友</Text>
</Block>
)}
<Block className="h-full w-full items-center justify-center bg-[#F3F4F6]">
<Block className="size-full items-center justify-center bg-[#F3F4F6]">
{img ? (
<Img src={img} className="h-full w-full" contentFit="cover" />
<Img className="size-full" contentFit="cover" src={img} />
) : (
<Block className="items-center">
{isMe ? (
<Block className="mb-[4px] h-[40px] w-[40px] items-center justify-center rounded-[20px] border-[2px] border-black bg-white">
<Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] border-2 border-black bg-white">
<Text className="font-700 text-[16px] text-black">+</Text>
</Block>
) : (
<Block className="mb-[4px] h-[40px] w-[40px] items-center justify-center rounded-[20px] bg-black">
<Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] bg-black">
<Text className="font-700 text-[16px] text-white">+</Text>
</Block>
)}
@ -251,8 +260,8 @@ type UploadSectionProps = {
const UploadSection = memo<UploadSectionProps>(function UploadSection({ meImg, friendImg, onPickMe, onPickFriend }) {
return (
<Block className="z-10 flex h-[160px] w-full flex-row gap-x-[12px]">
<UploadCard variant="me" img={meImg} onPick={onPickMe} />
<UploadCard variant="friend" img={friendImg} onPick={onPickFriend} />
<UploadCard img={meImg} variant="me" onPick={onPickMe} />
<UploadCard img={friendImg} variant="friend" onPick={onPickFriend} />
</Block>
)
})
@ -263,21 +272,21 @@ type PromptSectionProps = {
}
const PromptSection = memo<PromptSectionProps>(function PromptSection({ prompt, onChangePrompt }) {
return (
<Block className="mt-[24px] skew-x-[-6deg]">
<Block className="mt-[24px] -skew-x-6">
<Block className="mb-[4px] flex-row items-center px-[4px]">
<Block className="border-[1px] border-white/20 bg-black px-[8px] py-[2px]">
<Text className="text-[12px] font-[900] italic text-[#FFE500]">提示词</Text>
<Block className="border border-white/20 bg-black px-[8px] py-[2px]">
<Text className="text-[12px] font-[900] italic text-accent">提示词</Text>
</Block>
</Block>
<Block className="border-[3px] border-black bg-white p-[4px]">
<Input
multiline
className="font-700 min-h-[50px] w-full bg-transparent p-[8px] text-[14px] leading-[18px] text-black"
numberOfLines={2}
placeholder="描述画面细节..."
value={prompt}
onChangeText={onChangePrompt}
placeholder="描述画面细节..."
multiline
numberOfLines={2}
className="font-700 min-h-[50px] w-full bg-transparent px-[8px] py-[8px] text-[14px] leading-[18px] text-black"
/>
</Block>
</Block>
@ -301,7 +310,7 @@ type TemplateItemProps = {
const TemplateItem = memo<TemplateItemProps>(function TemplateItem({ item, itemWidth, isSelected, onSelect }) {
return (
<Block
className={`relative border-[2px] ${isSelected ? 'border-accent' : 'border-black'}`}
className={`relative border-2 ${isSelected ? 'border-accent' : 'border-black'}`}
style={{
transform: [{ skewX: '-6deg' }],
height: itemWidth,
@ -311,18 +320,18 @@ const TemplateItem = memo<TemplateItemProps>(function TemplateItem({ item, itemW
}}
onClick={onSelect}
>
<Img src={item.image} className="h-full w-full" contentFit="cover" />
<Img className="size-full" contentFit="cover" src={item.image} />
{isSelected && <Block className="absolute inset-0 bg-black/60" />}
{isSelected && <Block className="absolute inset-[-5px] border-[3px] border-accent" />}
<Block className="absolute inset-x-0 bottom-0 items-center bg-black/90 px-[4px] py-[4px]">
<Block className="absolute inset-x-0 bottom-0 items-center bg-black/90 p-[4px]">
<Text className={`text-[8px] font-[700] italic ${isSelected ? 'text-accent' : 'text-white'}`}>{item.name}</Text>
</Block>
{item.type === 'video' && (
<Block className="rounded-4px absolute right-[4px] top-[4px] rounded-[4px] border-[1px] border-white/50 bg-black p-[4px]">
<Fontisto name="youtube-play" size={8} color="white" />
<Block className="rounded-4px absolute right-[4px] top-[4px] rounded-[4px] border border-white/50 bg-black p-[4px]">
<Fontisto color="white" name="youtube-play" size={8} />
</Block>
)}
</Block>
@ -337,7 +346,7 @@ type CategoryChipProps = {
const CategoryChip = memo<CategoryChipProps>(function CategoryChip({ name, isSelected, onSelect }) {
return (
<Block
className={`skew-x-[-6deg] border-[2px] px-[12px] py-[4px] ${isSelected ? 'border-accent bg-accent' : 'border-black bg-white'}`}
className={`-skew-x-6 border-2 px-[12px] py-[4px] ${isSelected ? 'border-accent bg-accent' : 'border-black bg-white'}`}
onClick={onSelect}
>
<Text className={`text-[10px] font-[900] italic ${isSelected ? 'text-black' : 'text-black/60'}`}>{name}</Text>
@ -346,17 +355,22 @@ const CategoryChip = memo<CategoryChipProps>(function CategoryChip({ name, isSel
})
type CategoryFilterProps = {
categories: Array<{ id: string; name: string }>
categories: { id: string; name: string }[]
selectedId: string
onSelect: (id: string) => void
}
const CategoryFilter = memo<CategoryFilterProps>(function CategoryFilter({ categories, selectedId, onSelect }) {
return (
<Block className="mt-[16px]">
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
<CategoryChip name="全部" isSelected={selectedId === ''} onSelect={() => onSelect('')} />
<ScrollView horizontal contentContainerStyle={{ gap: 8 }} showsHorizontalScrollIndicator={false}>
<CategoryChip isSelected={selectedId === ''} name="全部" onSelect={() => onSelect('')} />
{categories.map((cat) => (
<CategoryChip key={cat.id} name={cat.name} isSelected={selectedId === cat.id} onSelect={() => onSelect(cat.id)} />
<CategoryChip
key={cat.id}
isSelected={selectedId === cat.id}
name={cat.name}
onSelect={() => onSelect(cat.id)}
/>
))}
</ScrollView>
</Block>
@ -393,25 +407,32 @@ const TemplateSection = memo<TemplateSectionProps>(function TemplateSection({
return (
<Block className="mt-[16px]">
<Block className="flex-row items-center justify-between">
<Block animated style={style} className="flex-row items-center gap-[8px] border-[2px] border-black bg-[#FFE500] px-[12px] py-[4px]">
<FontAwesome name="film" size={16} color="black" />
<Block
animated
className="flex-row items-center gap-[8px] border-2 border-black bg-accent px-[12px] py-[4px]"
style={style}
>
<FontAwesome color="black" name="film" size={16} />
<Text className="text-[10px] font-[900] italic text-black">视频模版</Text>
</Block>
<Block className="skew-x-[-6deg] items-center justify-center border-[2px] border-black bg-white px-[8px] py-[4px]" onClick={onRandom}>
<Block
className="-skew-x-6 items-center justify-center border-2 border-black bg-white px-[8px] py-[4px]"
onClick={onRandom}
>
<Text className="text-[10px] font-[900] italic text-black">换一波</Text>
</Block>
</Block>
{loading ? (
<Block className="mt-[32px] items-center justify-center py-[40px]">
<ActivityIndicator size="large" color="#FFE500" />
<ActivityIndicator color="#FFE500" size="large" />
</Block>
) : error ? (
<Block className="mt-[32px] items-center justify-center py-[40px]">
<Text className="mb-[8px] text-[14px] text-white/60">加载失败</Text>
{onRetry && (
<Block className="skew-x-[-6deg] border-[2px] border-white bg-white px-[16px] py-[6px]" onClick={onRetry}>
<Block className="-skew-x-6 border-2 border-white bg-white px-[16px] py-[6px]" onClick={onRetry}>
<Text className="text-[12px] font-[900] italic text-black">重试</Text>
</Block>
)}
@ -424,7 +445,15 @@ const TemplateSection = memo<TemplateSectionProps>(function TemplateSection({
<Block className="mt-[16px] flex-row flex-wrap gap-[12px]">
{templates.map((item) => {
const isSelected = selectedTemplateId === item.id
return <TemplateItem key={item.id} item={item} itemWidth={itemWidth} isSelected={isSelected} onSelect={() => onSelectTemplate(item)} />
return (
<TemplateItem
key={item.id}
isSelected={isSelected}
item={item}
itemWidth={itemWidth}
onSelect={() => onSelectTemplate(item)}
/>
)
})}
</Block>
)}
@ -436,12 +465,12 @@ type GenerateSectionProps = { onGenerate: () => void }
const GenerateSection = memo<GenerateSectionProps>(function GenerateSection({ onGenerate }) {
const insets = useSafeAreaInsets()
return (
<Block className="absolute bottom-[96px] left-[16px] right-[16px] z-40" style={{ paddingBottom: insets.bottom }}>
<Block className="absolute inset-x-[16px] bottom-[96px] z-40" style={{ paddingBottom: insets.bottom }}>
<Block style={{ transform: [{ skewX: '-6deg' }] }}>
<Block
onClick={onGenerate}
className={`relative flex-row items-center justify-between border-[3px] border-black bg-[#FFE500] py-[8px]`}
className={`relative flex-row items-center justify-between border-[3px] border-black bg-accent py-[8px]`}
style={{ paddingHorizontal: 24 }}
onClick={onGenerate}
>
{/* 左侧文字 */}
<Block className="z-10 flex-col">
@ -450,9 +479,9 @@ const GenerateSection = memo<GenerateSectionProps>(function GenerateSection({ on
</Block>
{/* 右侧 Goo 标签 */}
<Block className="z-10 flex-row items-center gap-[8px] border-[2px] border-black bg-black px-[12px] py-[4px]">
<Ionicons name="flash" size={14} color="#FFE500" />
<Text className="text-[14px] font-black italic text-[#FFE500]">3 Goo</Text>
<Block className="z-10 flex-row items-center gap-[8px] border-2 border-black bg-black px-[12px] py-[4px]">
<Ionicons color="#FFE500" name="flash" size={14} />
<Text className="text-[14px] font-black italic text-accent">3 Goo</Text>
</Block>
</Block>
</Block>

48
app/(tabs)/index.tsx
View File

@ -9,15 +9,21 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
import { ActivityIndicator, RefreshControl, TextInput } from 'react-native'
import BannerSection from '@/components/BannerSection'
import { useAigcTask } from '@/hooks/actions/use-aigc-task'
import { useTemplateActions } from '@/hooks/actions/use-template-actions'
import { useAuth } from '@/hooks/core/use-auth'
import { useUserBalance } from '@/hooks/core/use-user-balance'
import { useTemplates } from '@/hooks/data'
import { useFavoriteTemplates } from '@/hooks/data/use-favorite-templates'
import { usePublicTemplates } from '@/hooks/data/use-public-templates'
import { useTemplates } from '@/hooks/data/use-templates'
import { screenWidth } from '@/utils'
import { cn } from '@/utils/cn'
const BACKGROUND_VIDEOS = [
'https://cdn.roasmax.cn/material/b46f380532e14cf58dd350dbacc7c34a.mp4',
'https://cdn.roasmax.cn/material/992e6c5d940c42feb71c27e556b754c0.mp4',
'https://cdn.roasmax.cn/material/e4947477843f4067be7c37569a33d17b.mp4',
]
type MediaItem = {
id: string
type: 'image' | 'video'
@ -324,7 +330,7 @@ export default function Sync() {
execute: loadPublicTemplates,
} = usePublicTemplates()
const { data: favoritesData, loading: favoritesLoading, execute: loadFavorites } = useFavoriteTemplates()
const { submitTask, startPolling } = useAigcTask()
const { runTemplate } = useTemplateActions()
const [searchText, setSearchText] = useState('')
@ -365,7 +371,7 @@ export default function Sync() {
useEffect(() => {
if (isAuthenticated && user?.id) {
loadBalance(user.id)
loadBalance()
}
}, [isAuthenticated, user?.id])
@ -604,39 +610,25 @@ export default function Sync() {
onCancel={() => Toast.hideModal()}
onConfirm={async () => {
Toast.hideModal()
const { taskId, error } = await submitTask({
model_name: 'default',
prompt: `生成与 ${selectedItem.id} 相似的内容`,
img_url: selectedItem.url,
// 要传 扣费返回的凭证
const { generationId, error } = await runTemplate({
templateId: selectedItem.id,
data: {},
originalUrl: selectedItem.url,
})
if (error) {
Toast.show({ title: `提交失败: ${error.message}` })
if (error || !generationId) {
Toast.show({ title: error?.message || '生成失败' })
return
}
if (taskId) {
Toast.show({
title: '任务提交成功，正在生成中...',
duration: 30e3,
})
startPolling(
taskId,
(result) => {
Toast.show({ title: '生成成功！' })
if (user?.id) loadBalance(user.id)
},
(error) => {
Toast.show({ title: `生成失败: ${error.message}` })
},
)
}
Toast.show({ title: '生成成功！' })
if (user?.id) loadBalance()
}}
/>,
{},
)
}, [isAuthenticated, balance, selectedItem, submitTask, startPolling, user?.id, loadBalance])
}, [isAuthenticated, balance, selectedItem, runTemplate, user?.id, loadBalance])
const openSearch = useCallback(() => setIsSearchOpen(true), [])
const closeSearch = useCallback(() => {

2
app/generateVideo.tsx
View File

@ -176,7 +176,7 @@ export default function GenerateVideoScreen() {
])
if (user?.id) {
loadBalance(user.id)
loadBalance()
}
}

6
app/generationRecord.tsx
View File

@ -49,7 +49,7 @@ export default function GenerationRecordScreen() {
useEffect(() => {
if (user?.id) {
loadBalance(user.id)
loadBalance()
}
}, [user?.id])
@ -110,7 +110,7 @@ export default function GenerationRecordScreen() {
} else {
Alert.alert('生成成功', '视频已生成完成')
if (user?.id) {
loadBalance(user.id)
loadBalance()
}
if (newGeneration?.id) {
router.replace({
@ -315,7 +315,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingHorizontal: 16,
marginBottom: 8,
gap:4,
gap: 4,
},
categoryIcon: {
width: 16,