feat(main): add favorite count, share button, refreshing transition

- ArticleCard: show favoriteCount, commentCount, share button
- ArticleCard: Web Share API fallback to clipboard copy
- ArticleActions: add share button with antdMessage feedback
- ArticleList: refreshing opacity transition on sort switch
- detail page: show commentCount and favoriteCount in meta

Author: juwenzhang

apps/main/src/components/ArticleActions/index.tsx

@@ -3,12 +3,14 @@ import {
   EditOutlined,
   HeartFilled,
   HeartOutlined,
+  ShareAltOutlined,
   StarFilled,
   StarOutlined,
 } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { antdMessage } from '@/lib/antdStatic';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { useSocialStore } from '@/stores/useSocialStore';
 import styles from './articleActions.module.less';
@@ -89,6 +91,25 @@ export default function ArticleActions({ articleId, isAuthor }: ArticleActionsPr
         </Tooltip>
       )}
 
+      <Tooltip title="分享" placement="right">
+        <button
+          type="button"
+          className={styles.actionBtn}
+          onClick={() => {
+            const url = `${window.location.origin}/post/${articleId}`;
+            if (navigator.share) {
+              navigator.share({ title: document.title, url });
+            } else {
+              navigator.clipboard.writeText(url).then(() => {
+                antdMessage.success('链接已复制到剪贴板');
+              });
+            }
+          }}
+        >
+          <ShareAltOutlined />
+        </button>
+      </Tooltip>
+
       <div className={styles.divider} />
 
       <Tooltip title="返回首页" placement="right">

apps/main/src/components/ArticleCard/articleCard.module.less

@@ -99,11 +99,23 @@
       .date,
       .views,
       .likes,
-      .favorites {
+      .favorites,
+      .comments {
         display: flex;
         align-items: center;
         gap: 4px;
       }
+
+      .share {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        transition: color 0.2s;
+
+        &:hover {
+          color: var(--color-primary);
+        }
+      }
     }
   }
 

apps/main/src/components/ArticleCard/index.tsx

@@ -1,7 +1,10 @@
 import {
   ClockCircleOutlined,
+  CommentOutlined,
   EyeOutlined,
   HeartOutlined,
+  ShareAltOutlined,
+  StarOutlined,
   TagOutlined,
   UserOutlined,
 } from '@ant-design/icons';
@@ -10,6 +13,7 @@ import { ArticleStatus } from '@luhanxin/shared-types';
 import { Avatar } from 'antd';
 import { useNavigate } from 'react-router-dom';
 
+import { antdMessage } from '@/lib/antdStatic';
 import styles from './articleCard.module.less';
 
 /** 去除 Markdown 标记，返回纯文本（用于摘要预览） */
@@ -108,6 +112,48 @@ export default function ArticleCard({ article }: ArticleCardProps) {
               {article.likeCount}
             </span>
           )}
+
+          {article.commentCount > 0 && (
+            <span className={styles.comments}>
+              <CommentOutlined />
+              {article.commentCount}
+            </span>
+          )}
+
+          {article.favoriteCount > 0 && (
+            <span className={styles.favorites}>
+              <StarOutlined />
+              {article.favoriteCount}
+            </span>
+          )}
+
+          <span
+            className={styles.share}
+            onClick={(e) => {
+              e.stopPropagation();
+              const url = `${window.location.origin}/post/${article.id}`;
+              if (navigator.share) {
+                navigator.share({ title: article.title, url });
+              } else {
+                navigator.clipboard.writeText(url).then(() => {
+                  antdMessage.success('链接已复制到剪贴板');
+                });
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.stopPropagation();
+                const url = `${window.location.origin}/post/${article.id}`;
+                navigator.clipboard.writeText(url).then(() => {
+                  antdMessage.success('链接已复制到剪贴板');
+                });
+              }
+            }}
+          >
+            <ShareAltOutlined />
+          </span>
         </div>
       </div>
 

apps/main/src/components/ArticleList/articleList.module.less

@@ -5,6 +5,12 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
+  transition: opacity 0.2s ease;
+
+  &.refreshing {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 
 .skeleton {

apps/main/src/components/ArticleList/index.tsx

@@ -34,6 +34,7 @@ export default function ArticleList({
 }: ArticleListProps) {
   const [articles, setArticles] = useState<Article[]>([]);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [totalCount, setTotalCount] = useState(0);
   const [nextPageToken, setNextPageToken] = useState('');
@@ -49,15 +50,20 @@ export default function ArticleList({
   paramsRef.current = { tag, authorId, query, categories, sort, pageSize };
 
   // 初始加载 + 参数变化时重新加载
-  // const categoriesKey = JSON.stringify(categories);
+  const hasDataRef = useRef(false);
 
   const fetchList = useCallback(async () => {
-    // 取消上一次请求
     abortRef.current?.abort();
     const ctrl = new AbortController();
     abortRef.current = ctrl;
 
-    setLoading(true);
+    // 有旧数据时用 refreshing（保留旧内容），无数据时用 loading（骨架屏）
+    if (hasDataRef.current) {
+      setRefreshing(true);
+    } else {
+      setLoading(true);
+    }
+
     try {
       const res = await articleClient.listArticles(
         {
@@ -74,16 +80,19 @@ export default function ArticleList({
 
       const nextToken = res.pagination?.nextPageToken ?? '';
       setArticles(res.articles);
+      hasDataRef.current = res.articles.length > 0;
       setTotalCount(res.pagination?.totalCount ?? res.articles.length);
       setNextPageToken(nextToken);
       setHasMore(nextToken !== '');
     } catch {
       if (!ctrl.signal.aborted) {
         setArticles([]);
+        hasDataRef.current = false;
       }
     } finally {
       if (!ctrl.signal.aborted) {
         setLoading(false);
+        setRefreshing(false);
       }
     }
   }, [authorId, query, tag, sort, pageSize, categories]);
@@ -165,7 +174,7 @@ export default function ArticleList({
   }
 
   return (
-    <div className={styles.list}>
+    <div className={`${styles.list} ${refreshing ? styles.refreshing : ''}`}>
       {visible.map((article) => (
         <ArticleCard key={article.id} article={article} />
       ))}

apps/main/src/pages/post/pages/detail/index.tsx

@@ -1,4 +1,11 @@
-import { ClockCircleOutlined, EyeOutlined, TagOutlined, UserOutlined } from '@ant-design/icons';
+import {
+  ClockCircleOutlined,
+  CommentOutlined,
+  EyeOutlined,
+  StarOutlined,
+  TagOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import { Avatar, Button, Skeleton } from 'antd';
 import { useEffect, useRef } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -105,6 +112,18 @@ export default function ArticleDetailPage() {
               <EyeOutlined />
               {article.viewCount} 阅读
             </span>
+            {article.commentCount > 0 && (
+              <span className={styles.views}>
+                <CommentOutlined />
+                {article.commentCount} 评论
+              </span>
+            )}
+            {article.favoriteCount > 0 && (
+              <span className={styles.views}>
+                <StarOutlined />
+                {article.favoriteCount} 收藏
+              </span>
+            )}
           </div>
 
           {article.tags.length > 0 && (