1.3.9.06

【优化】
- 文件列表项的渲染逻辑
- 文本类型文件预览性能
- 文本类型文件预览响应式设计

Author: UE-DND

CONTRIBUTING.md

@@ -115,8 +115,6 @@ npm run lint
 
 > 推荐保持与历史 issue 一致的标题格式
 
----
-
 ### 许可证
 
 通过贡献，您同意您的贡献将按照与项目相同的许可证 [AGPL-3.0](LICENSE) 进行许可。

README.md

@@ -22,6 +22,14 @@
   <tr>
 </table>
 
+## 为 Repo Viewer 贡献代码
+
+此项目已进入稳定阶段，本人将不再花过多精力维护。若发现已知的问题，欢迎任何形式的贡献！无论是修复错误、改进功能，还是提升代码质量，我们都非常欢迎您的参与。
+
+> 此组织的所有成员均有管理员权限，若不想提交 Pull Request，直接推送代码是被允许的。
+> 
+> 但在提交贡献前，推荐阅读 [CONTRIBUTING.md](CONTRIBUTING.md) 以了解建议的代码规范和提交流程。
+
 ## 主要功能
 
 - 📁 **仓库浏览**：直观的文件结构导航，同时提供首页文件与文件夹排除选项.

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "repo-viewer",
   "private": true,
-  "version": "1.3.9",
+  "version": "1.4.0",
   "type": "module",
   "engines": {
     "node": "24.x"

package.json

@@ -5,7 +5,7 @@ import { AutoSizer } from "react-virtualized-auto-sizer";
 import AlphabetIndex from "./AlphabetIndex";
 import { RowComponent } from "./FileListRow";
 import { FILE_ITEM_CONFIG, LIST_HEIGHT_CONFIG } from "./utils/fileListConfig";
-import { calculateLayoutMetrics } from "./utils/fileListLayout";
+import { calculateLayoutMetrics, getListPadding, getRowMetrics } from "./utils/fileListLayout";
 import type { VirtualListItemData, FileListLayoutMetrics } from "./utils/types";
 import type { GitHubContent } from "@/types";
 import { theme } from "@/utils";
@@ -70,17 +70,8 @@ const FileList = React.memo<FileListProps>(
 
     // 计算每个文件项的高度（包括间距）
     // 这个计算需要与 FileListItem 的实际高度保持一致
-    const rowHeight = useMemo(() => {
-      // 基础高度
-      const baseHeight = isSmallScreen
-        ? FILE_ITEM_CONFIG.baseHeight.xs
-        : FILE_ITEM_CONFIG.baseHeight.sm;
-
-      // 行间距（上下各分一半）
-      const rowGap = FILE_ITEM_CONFIG.spacing.marginBottom;
-
-      // 计算总高度：基础高度 + 行间距
-      return baseHeight + rowGap;
+    const { rowHeight, rowPaddingBottom } = useMemo(() => {
+      return getRowMetrics(isSmallScreen);
     }, [isSmallScreen]);
 
     /**
@@ -200,6 +191,7 @@ const FileList = React.memo<FileListProps>(
         isScrolling,
         scrollSpeed,
         highlightedIndex,
+        rowPaddingBottom,
       }),
       [
         contents,
@@ -214,26 +206,17 @@ const FileList = React.memo<FileListProps>(
         isScrolling,
         scrollSpeed,
         highlightedIndex,
+        rowPaddingBottom,
       ],
     );
 
     // 简化的列表内边距计算
-    const listPadding = useMemo((): { paddingTop: number; paddingBottom: number } => {
-      // 非滚动模式：使用固定的对称内边距，稍微增加一点
-      if (!needsScrolling) {
-        const padding = isSmallScreen ? 16 : 20;
-        return {
-          paddingTop: padding - 4,
-          paddingBottom: padding,
-        };
-      }
-
-      // 滚动模式：使用较小的内边距
-      return {
-        paddingTop: 0,
-        paddingBottom: 8,
-      };
-    }, [needsScrolling, isSmallScreen]);
+    // 列表内边距规则集中管理，区分滚动与非滚动模式。
+    const listPadding = useMemo(
+      (): { paddingTop: number; paddingBottom: number } =>
+        getListPadding(needsScrolling, isSmallScreen),
+      [needsScrolling, isSmallScreen],
+    );
 
     // 处理滚动事件（监听列表容器）
     React.useEffect(() => {

src/components/file/FileList.tsx

@@ -5,7 +5,6 @@ import type { MotionStyle } from "framer-motion";
 import type { RowComponentProps } from "react-window";
 
 import FileListItem from "./FileListItem";
-import { FILE_ITEM_CONFIG } from "./utils/fileListConfig";
 import { getDynamicItemVariants, optimizedAnimationStyle } from "./utils/fileListAnimations";
 import type { VirtualListItemData } from "./utils/types";
 
@@ -30,6 +29,7 @@ const RowComponent = ({
     isScrolling,
     scrollSpeed,
     highlightedIndex,
+    rowPaddingBottom,
   } = rowData;
 
   const item = contents[index];
@@ -85,7 +85,7 @@ const RowComponent = ({
     height: "100%",
     width: "100%",
     paddingTop: 0,
-    paddingBottom: FILE_ITEM_CONFIG.spacing.marginBottom,
+    paddingBottom: rowPaddingBottom,
     paddingRight: "12px",
     boxSizing: "border-box",
     ...optimizedAnimationStyle,

src/components/file/FileListRow.tsx

@@ -1,4 +1,5 @@
 import {
+  FILE_ITEM_CONFIG,
   LIST_HEIGHT_CONFIG,
   TOP_ELEMENTS_ESTIMATE,
   BOTTOM_RESERVED_SPACE,
@@ -15,6 +16,42 @@ interface LayoutMetricsParams {
   viewportHeight: number | null;
 }
 
+export const getRowMetrics = (isSmallScreen: boolean): {
+  rowHeight: number;
+  rowPaddingBottom: number;
+} => {
+  const baseHeight = isSmallScreen
+    ? FILE_ITEM_CONFIG.baseHeight.xs
+    : FILE_ITEM_CONFIG.baseHeight.sm;
+
+  const rowGap = FILE_ITEM_CONFIG.spacing.marginBottom;
+
+  return {
+    rowHeight: baseHeight + rowGap,
+    rowPaddingBottom: rowGap,
+  };
+};
+
+export const getListPadding = (needsScrolling: boolean, isSmallScreen: boolean): {
+  paddingTop: number;
+  paddingBottom: number;
+} => {
+  // 非滚动模式使用对称内边距，让短列表更居中
+  if (!needsScrolling) {
+    const padding = isSmallScreen ? 16 : 20;
+    return {
+      paddingTop: padding - 4,
+      paddingBottom: padding,
+    };
+  }
+
+  // 滚动模式收紧内边距，尽可能展示更多行
+  return {
+    paddingTop: 0,
+    paddingBottom: 8,
+  };
+};
+
 export const calculateLayoutMetrics = ({
   fileCount,
   rowHeight,
@@ -93,4 +130,3 @@ export const calculateLayoutMetrics = ({
     needsScrolling: true,
   };
 };
-

src/components/file/utils/fileListLayout.ts

@@ -14,10 +14,10 @@ export interface VirtualListItemData {
   isScrolling: boolean;
   scrollSpeed: number;
   highlightedIndex: number | null;
+  rowPaddingBottom: number;
 }
 
 export interface FileListLayoutMetrics {
   height: number;
   needsScrolling: boolean;
 }
-