feat(content): add rich content rendering with @mentions and vote segments
- Add PostContentRenderer component for rendering posts/comments with segments - Add PostMentionInput component for @mention support in post/comment creation - Add VoteSegmentData and vote segment type for unified post creation API - Update post and comment services to support segments in API requests - Fix auth service to clear tokens before login/register - Improve database initialization with proper close/retry logic - Add verification check before allowing post creation - Add metro web shims for react-native-webrtc full package and requireNativeComponent - Update build config with git hash based version numbers
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
/**
|
||||
/**
|
||||
* 帖子详情页 PostDetailScreen - QQ频道风格(响应式版本)
|
||||
* 威友 - 显示完整帖子内容和评论
|
||||
* 桌面端使用双栏布局,移动端使用单栏布局
|
||||
@@ -33,13 +33,13 @@ import {
|
||||
useAppColors,
|
||||
type AppColors,
|
||||
} from '../../theme';
|
||||
import { Post, Comment, VoteResultDTO, VoteOptionDTO } from '../../types';
|
||||
import { Post, Comment, VoteResultDTO, VoteOptionDTO, MessageSegment } from '../../types';
|
||||
import { useUserStore } from '../../stores';
|
||||
import { useCurrentUser } from '../../stores/auth';
|
||||
import { postService, commentService, uploadService, authService, showPrompt, voteService } from '../../services';
|
||||
import { postSyncService } from '@/services/post';
|
||||
import { useCursorPagination } from '../../hooks/useCursorPagination';
|
||||
import { CommentItem, VoteCard, ReportDialog, ShareSheet } from '../../components/business';
|
||||
import { CommentItem, VoteCard, ReportDialog, ShareSheet, PostContentRenderer, PostMentionInput } from '../../components/business';
|
||||
import { Avatar, Button, Loading, EmptyState, Text, ImageGallery, ImageGrid, ImageGridItem, AdaptiveLayout, AppBackButton } from '../../components/common';
|
||||
import { useResponsive, useResponsiveValue, useResponsiveSpacing } from '../../hooks/useResponsive';
|
||||
import { handleError } from '@/services/core';
|
||||
@@ -191,6 +191,7 @@ export const PostDetailScreen: React.FC = () => {
|
||||
}
|
||||
}, [commentsError, postId]);
|
||||
const [commentText, setCommentText] = useState('');
|
||||
const [commentSegments, setCommentSegments] = useState<MessageSegment[]>([]);
|
||||
const [showImageModal, setShowImageModal] = useState(false);
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
|
||||
const [allImages, setAllImages] = useState<ImageGridItem[]>([]);
|
||||
@@ -741,6 +742,7 @@ export const PostDetailScreen: React.FC = () => {
|
||||
root_id: rootId,
|
||||
target_id: parentId,
|
||||
content: commentText.trim(),
|
||||
segments: commentSegments.length > 0 ? commentSegments : undefined,
|
||||
images: uploadedImageUrls.map(url => ({ url })),
|
||||
likes_count: 0,
|
||||
replies_count: 0,
|
||||
@@ -798,6 +800,7 @@ export const PostDetailScreen: React.FC = () => {
|
||||
const createdComment = await commentService.createComment({
|
||||
postId: post.id,
|
||||
content: commentText.trim(),
|
||||
segments: commentSegments.length > 0 ? commentSegments : undefined,
|
||||
parentId: parentId || undefined,
|
||||
images: uploadedImageUrls,
|
||||
});
|
||||
@@ -1097,18 +1100,17 @@ export const PostDetailScreen: React.FC = () => {
|
||||
|
||||
{/* 内容 - 增大字体 */}
|
||||
<View style={styles.contentContainer}>
|
||||
<Text
|
||||
variant="body"
|
||||
style={[
|
||||
<PostContentRenderer
|
||||
content={post.content}
|
||||
segments={post.segments}
|
||||
textStyle={[
|
||||
styles.content,
|
||||
{
|
||||
fontSize: isDesktop ? fontSizes.xl : isTablet ? fontSizes.lg : fontSizes.lg,
|
||||
lineHeight: isDesktop ? 32 : isTablet ? 30 : 28
|
||||
}
|
||||
]}
|
||||
>
|
||||
{post.content}
|
||||
</Text>
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 图片 - 详情页显示所有图片,不限制数量 */}
|
||||
@@ -1442,15 +1444,14 @@ export const PostDetailScreen: React.FC = () => {
|
||||
)}
|
||||
|
||||
{/* Text Input */}
|
||||
<TextInput
|
||||
style={styles.expandedTextInput}
|
||||
placeholder="来说点什么吧!"
|
||||
placeholderTextColor={colors.text.hint}
|
||||
<PostMentionInput
|
||||
value={commentText}
|
||||
onChangeText={setCommentText}
|
||||
multiline
|
||||
autoFocus
|
||||
onSegmentsChange={setCommentSegments}
|
||||
placeholder="来说点什么吧!"
|
||||
maxLength={500}
|
||||
minHeight={40}
|
||||
style={styles.expandedTextInput}
|
||||
/>
|
||||
|
||||
{/* Image preview */}
|
||||
|
||||
Reference in New Issue
Block a user