feat(ui): add ShareSheet component for multi-channel post sharing
Some checks failed
Frontend CI / ota-android (push) Successful in 10m39s
Frontend CI / build-and-push-web (push) Failing after 1m29s
Frontend CI / build-android-apk (push) Has been cancelled

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:
lafay
2026-04-19 23:58:26 +08:00
parent 6910fdec70
commit b16759a147
8 changed files with 148 additions and 60 deletions

View File

@@ -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>
);
};