Merge pull request #16 from juwenzhang/feat/comment-system-upgrade

Feat/comment system upgrade

Author: juwenzhang

.dev-registry.json

@@ -1 +1,22 @@
-{ "version": 1, "apps": {}, "updatedAt": 0 }
+{
+  "version": 1,
+  "apps": {
+    "feed": {
+      "name": "feed",
+      "url": "http://localhost:5174",
+      "preferredPort": 5174,
+      "resolvedPort": 5174,
+      "startedAt": 1775478613170,
+      "pid": 30090
+    },
+    "user-profile": {
+      "name": "user-profile",
+      "url": "http://localhost:5175",
+      "preferredPort": 5175,
+      "resolvedPort": 5175,
+      "startedAt": 1775478613306,
+      "pid": 30112
+    }
+  },
+  "updatedAt": 1775478613306
+}

Makefile

@@ -164,8 +164,8 @@ dev-frontend-main: ## 只启动主应用 (main)
 dev-frontend-feed: ## 只启动 feed 子应用
 	pnpm dev:feed
 
-build-frontend: ## 构建前端所有包和应用
-	pnpm -r build
+build-frontend: ## 构建前端所有包和应用 (排除 demo)
+	pnpm -r --filter '!./demo/**' build
 
 build-preview: ## 构建前端并组装 preview 目录 (子应用 → main/dist/apps/)
 	@bash scripts/build-preview.sh
@@ -244,10 +244,10 @@ clean: ## 清理构建产物 (保留 node_modules)
 	@echo "✅ Clean complete"
 
 clean-all: clean ## 深度清理 (含 node_modules + 杀端口进程, 需要重新 install)
-	@echo "🧹 Killing processes on project ports (8000,50051,50052,50053,5173,5174,4173)..."
-	@-lsof -ti:8000,50051,50052,50053,5173,5174,4173 2>/dev/null | xargs kill 2>/dev/null; true
+	@echo "🧹 Killing processes on project ports (8000,50051-50053,5173-5175,4173)..."
+	@-lsof -ti:8000,50051,50052,50053,5173,5174,5175,4173 2>/dev/null | xargs kill 2>/dev/null; true
 	@echo "🧹 Deep cleaning..."
-	rm -rf node_modules apps/*/node_modules packages/*/node_modules
+	rm -rf node_modules apps/*/node_modules packages/*/node_modules demo/*/node_modules
 	@echo "✅ Deep clean complete. Run 'make install' to reinstall."
 
 # ------------------------------------------------------------

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/components/CommentSection/CommentSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from 'antd';
+
+interface CommentSkeletonProps {
+  count?: number;
+}
+
+export default function CommentSkeleton({ count = 3 }: CommentSkeletonProps) {
+  return (
+    <>
+      {Array.from({ length: count }, (_, i) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton 顺序固定
+        <div key={i} style={{ display: 'flex', gap: 12, padding: '14px 0' }}>
+          <Skeleton.Avatar active size={36} />
+          <div style={{ flex: 1 }}>
+            <Skeleton
+              active
+              title={{ width: '30%' }}
+              paragraph={{ rows: 2, width: ['80%', '50%'] }}
+            />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

apps/main/src/components/CommentSection/commentSection.module.less

@@ -5,11 +5,43 @@
   padding-top: 24px;
   border-top: 1px solid var(--color-border);
 
-  .sectionTitle {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-1);
+  .sectionHeader {
+    @apply flex items-center justify-between;
     margin-bottom: 20px;
+
+    .sectionTitle {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text-1);
+      margin: 0;
+    }
+
+    .sortTabs {
+      @apply flex items-center gap-1;
+
+      .sortTab {
+        @apply flex items-center gap-1;
+        padding: 4px 12px;
+        border: none;
+        border-radius: var(--radius-sm);
+        background: none;
+        font-size: 13px;
+        color: var(--color-text-3);
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          color: var(--color-text-1);
+          background: var(--color-bg-hover);
+        }
+
+        &.active {
+          color: var(--color-primary);
+          background: var(--color-primary-light, rgba(30, 128, 255, 0.08));
+          font-weight: 500;
+        }
+      }
+    }
   }
 }
 
@@ -164,6 +196,13 @@
 
 // 评论列表
 .commentList {
+  transition: opacity 0.2s ease;
+
+  &.refreshing {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   .commentThread {
     &:not(:last-child) {
       margin-bottom: 4px;
@@ -319,6 +358,30 @@
   margin-left: 48px;
   padding-left: 16px;
   border-left: 2px solid var(--color-border);
+
+  .repliesInner {
+    overflow: hidden;
+    transition: max-height 0.3s ease, opacity 0.3s ease;
+
+    &.expanded {
+      max-height: none;
+    }
+  }
+
+  .toggleRepliesBtn {
+    @apply flex items-center gap-1;
+    border: none;
+    background: none;
+    font-size: 12px;
+    color: var(--color-primary);
+    cursor: pointer;
+    padding: 8px 0 4px;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--color-primary-hover, #4d9fff);
+    }
+  }
 }
 
 .loading,
@@ -328,3 +391,14 @@
   color: var(--color-text-4);
   font-size: 14px;
 }
+
+.sentinel {
+  min-height: 1px;
+}
+
+.loadingMore {
+  @apply flex items-center justify-center gap-2;
+  padding: 16px 0;
+  color: var(--color-text-4);
+  font-size: 13px;
+}