feat(ui): add ShareSheet component for multi-channel post sharing
Add ShareSheet component that provides native sharing options (WeChat, Moments, copy link, etc.) replacing the previous clipboard-only approach. Also change like icon from heart to thumb-up to better match the share functionality.
This commit is contained in:
@@ -29,7 +29,7 @@ import { Post } from '../../types';
|
||||
import { useUserStore, useHomeTabBarVisibilityStore, useHomeTabPressStore } from '../../stores';
|
||||
import { useCurrentUser } from '../../stores/auth';
|
||||
import { channelService, postService } from '../../services';
|
||||
import { PostCard, TabBar, SearchBar } from '../../components/business';
|
||||
import { PostCard, TabBar, SearchBar, ShareSheet } from '../../components/business';
|
||||
import type { PostCardAction } from '../../components/business/PostCard';
|
||||
import { Loading, EmptyState, Text, ImageGallery, ImageGridItem, ResponsiveGrid } from '../../components/common';
|
||||
import { useResponsive, useResponsiveSpacing } from '../../hooks/useResponsive';
|
||||
@@ -203,6 +203,10 @@ export const HomeScreen: React.FC = () => {
|
||||
// 发帖弹窗状态
|
||||
const [showCreatePost, setShowCreatePost] = useState(false);
|
||||
|
||||
// 分享面板状态
|
||||
const [showShareSheet, setShowShareSheet] = useState(false);
|
||||
const [sharePost, setSharePost] = useState<Post | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (showCreatePost) {
|
||||
blurActiveElement();
|
||||
@@ -576,20 +580,10 @@ export const HomeScreen: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 分享帖子
|
||||
const handleShare = async (post: Post) => {
|
||||
if (!post?.id) return;
|
||||
try {
|
||||
const res = await postService.sharePost(post.id, { channel: 'copy_link' });
|
||||
if (res.ok && res.shares_count != null) {
|
||||
postSyncService.applyShareCountUpdate(post.id, res.shares_count);
|
||||
}
|
||||
} catch (shareError) {
|
||||
console.error('上报分享次数失败:', shareError);
|
||||
}
|
||||
const postUrl = `https://browser.littlelan.cn/post/${encodeURIComponent(post.id)}`;
|
||||
Clipboard.setString(postUrl);
|
||||
Alert.alert('已复制', '帖子链接已复制到剪贴板');
|
||||
// 分享帖子 - 打开分享面板
|
||||
const handleShare = (post: Post) => {
|
||||
setSharePost(post);
|
||||
setShowShareSheet(true);
|
||||
};
|
||||
|
||||
// 删除帖子 - 删除后刷新列表
|
||||
@@ -1081,6 +1075,31 @@ export const HomeScreen: React.FC = () => {
|
||||
onClose={() => setShowCreatePost(false)}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
{/* 分享面板 */}
|
||||
<ShareSheet
|
||||
visible={showShareSheet}
|
||||
postUrl={sharePost ? `https://browser.littlelan.cn/post/${encodeURIComponent(sharePost.id)}` : undefined}
|
||||
postTitle={sharePost?.title}
|
||||
onClose={() => {
|
||||
setShowShareSheet(false);
|
||||
setSharePost(null);
|
||||
}}
|
||||
onShareAction={(actionKey) => {
|
||||
if (sharePost) {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await postService.sharePost(sharePost.id, { channel: actionKey });
|
||||
if (res.ok && res.shares_count != null) {
|
||||
postSyncService.applyShareCountUpdate(sharePost.id, res.shares_count);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('上报分享次数失败:', e);
|
||||
}
|
||||
})();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user