eee280d9b3
## 主要修复 - 修复 FullscreenMediaModal 和 FullscreenVideoModal 中的 useEffect 循环依赖 - 重构 VideoPlayer 组件的视频属性管理逻辑 - 优化 useVideoPlayer 的初始化回调机制 ## 新增功能 - 新增标签 API 支持 (lib/api/tags.ts) - 新增内容骨架屏组件 (components/profile/content-skeleton.tsx) - 新增返回按钮组件 (components/ui/back-button.tsx) ## 改进优化 - 优化视频播放器的性能，避免重复初始化 - 修复 useEffect 依赖项导致的无限循环更新 - 完善类型定义和 API 接口 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
105 lines
2.3 KiB
TypeScript
105 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
export function ContentSkeleton() {
|
|
const colorScheme = useColorScheme();
|
|
const palette = colorScheme === 'dark' ? darkPalette : lightPalette;
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: palette.background }]}>
|
|
<View style={styles.skeletonGrid}>
|
|
<View style={styles.column}>
|
|
{[...Array(4)].map((_, i) => (
|
|
<SkeletonItem key={`left-${i}`} palette={palette} />
|
|
))}
|
|
</View>
|
|
<View style={styles.column}>
|
|
{[...Array(4)].map((_, i) => (
|
|
<SkeletonItem key={`right-${i}`} palette={palette} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function SkeletonItem({ palette }: { palette: any }) {
|
|
return (
|
|
<View style={[styles.skeletonItem, { backgroundColor: palette.skeletonBackground }]}>
|
|
<View
|
|
style={[
|
|
styles.skeletonImage,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
},
|
|
]}
|
|
/>
|
|
<View style={styles.skeletonContent}>
|
|
<View
|
|
style={[
|
|
styles.skeletonLine,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
width: '80%',
|
|
},
|
|
]}
|
|
/>
|
|
<View
|
|
style={[
|
|
styles.skeletonLine,
|
|
{
|
|
backgroundColor: palette.skeletonHighlight,
|
|
width: '60%',
|
|
marginTop: 8,
|
|
},
|
|
]}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const darkPalette = {
|
|
background: '#050505',
|
|
skeletonBackground: '#0D0E12',
|
|
skeletonHighlight: '#1A1B20',
|
|
};
|
|
|
|
const lightPalette = {
|
|
background: '#F7F8FB',
|
|
skeletonBackground: '#FFFFFF',
|
|
skeletonHighlight: '#F0F2F8',
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
skeletonGrid: {
|
|
flexDirection: 'row',
|
|
paddingHorizontal: 12,
|
|
paddingTop: 8,
|
|
},
|
|
column: {
|
|
flex: 1,
|
|
paddingHorizontal: 6,
|
|
},
|
|
skeletonItem: {
|
|
borderRadius: 16,
|
|
marginBottom: 12,
|
|
overflow: 'hidden',
|
|
},
|
|
skeletonImage: {
|
|
width: '100%',
|
|
aspectRatio: 1,
|
|
},
|
|
skeletonContent: {
|
|
padding: 12,
|
|
},
|
|
skeletonLine: {
|
|
height: 12,
|
|
borderRadius: 4,
|
|
},
|
|
});
|