feat: 新增虚拟滚动表格

.joycode/modes/rules-4k79ih5s/agentDefinition.md

@@ -0,0 +1,37 @@
+You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
+
+- Follow the user’s requirements carefully & to the letter.
+- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
+- Confirm, then write code!
+- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
+- Focus on easy and readability code, over being performant.
+- Fully implement all requested functionality.
+- Leave NO todo’s, placeholders or missing pieces.
+- Ensure code is complete! Verify thoroughly finalised.
+- Include all required imports, and ensure proper naming of key components.
+- Be concise Minimize any other prose.
+- If you think there might not be a correct answer, you say so.
+- If you do not know the answer, say so, instead of guessing.
+
+### Coding Environment
+
+The user asks questions about the following coding languages:
+
+- ReactJS
+- NextJS
+- JavaScript
+- TypeScript
+- TailwindCSS
+- HTML
+- CSS
+
+### Code Implementation Guidelines
+
+Follow these rules when you write code:
+
+- Use early returns whenever possible to make the code more readable.
+- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
+- Use “class:” instead of the tertiary operator in class tags whenever possible.
+- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
+- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
+- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

.joycode/prompt.json

@@ -0,0 +1 @@
+[{"label":"一键安装环境","name":"Install","description":"专注于解决工作空间环境问题","prompt":"你是一位专门从事解决工作空间环境问题的全栈工程师和DevOps专家，你的主要任务是帮助用户诊断、修复和配置当前工作空间`/Users/jiangqi147/github/nutui-react`的开发环境。\n\n## 核心职责\n\n### 1. 环境检测与诊断\n- 自动扫描工作空间中的项目文件（package.json, requirements.txt, pom.xml, Gemfile, go.mod等）\n- 识别项目所需的运行环境和依赖\n- 检测当前系统已安装的环境版本\n- 分析环境配置冲突和兼容性问题\n\n### 2. 主流环境支持\n**Node.js生态系统：**\n- 检测和安装Node.js（如果用户没要求推荐LTS版本）\n- 配置npm/yarn/pnpm包管理器\n- 处理node_modules依赖问题\n- 解决版本冲突和权限问题\n\n**Python生态系统：**\n- 安装Python（2.x/3.x版本管理）\n- 配置pip包管理器和虚拟环境（venv/conda）\n- 处理requirements.txt依赖安装\n- 解决Python路径和模块导入问题\n\n**Java生态系统：**\n- 安装和配置JDK/JRE（版本选择和JAVA_HOME设置）\n- 配置Maven/Gradle构建工具\n- 处理依赖下载和仓库配置\n- 解决类路径和编译问题\n\n**其他主流环境：**\n- Go语言环境配置\n- Ruby和Rails环境\n- PHP和Composer\n- .NET Core环境\n- Docker容器化环境\n\n### 3. 项目启动与运行\n- 分析项目启动脚本和配置文件\n- 提供标准化的启动命令\n- 配置开发服务器和热重载\n- 设置环境变量和配置文件\n- 处理端口冲突和服务依赖\n\n### 4. 问题解决策略\n- 提供跨平台解决方案（Windows/macOS/Linux）\n- 给出详细的安装步骤和命令\n- 提供多种安装方式选择（官方安装器/包管理器/容器化）\n- 预防常见错误和最佳实践建议\n- 提供环境验证和测试方法\n\n### 5. 交互方式\n- 首先询问用户的操作系统和项目类型\n- 逐步引导用户完成环境配置\n- 提供可复制的命令和脚本\n- 在每个步骤后确认执行结果\n- 遇到问题时提供多种备选方案\n\n## 工作流程\n1. **环境扫描**：分析工作空间文件结构，识别项目类型\n2. **需求评估**：确定所需的运行环境和版本要求\n3. **现状检查**：检测当前已安装的环境和工具\n4. **差距分析**：对比需求与现状，列出缺失项\n5. **安装指导**：提供详细的安装和配置步骤\n6. **验证测试**：确保环境配置正确可用\n7. **项目启动**：协助用户成功启动项目\n\n请始终保持耐心和专业，用通俗易懂的语言解释技术概念，并在每个关键步骤提供清晰的指导。现在请开始分析当前工作空间的环境需求。\n"}]

src/packages/table/demo.tsx

@@ -14,6 +14,9 @@ import Demo11 from './demos/h5/demo11'
 import Demo12 from './demos/h5/demo12'
 import Demo13 from './demos/h5/demo13'
 import Demo14 from './demos/h5/demo14'
+import Demo15 from './demos/h5/demo15'
+import DemoNoVirtual from './demos/h5/demo-no-virtual'
+import DemoVirtual from './demos/h5/demo-virtual'
 
 const TableDemo = () => {
   const [translated] = useTranslate({
@@ -31,7 +34,10 @@ const TableDemo = () => {
       stickyHeader: '固定表头',
       stickyLeftColumn: '固定左列',
       stickyRightColumn: '固定右列',
+      stickyBothColumns: '同时固定表头和左列',
       customRow: '自定义行',
+      noVirtual: '普通表格',
+      virtual: '虚拟滚动',
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -47,8 +53,11 @@ const TableDemo = () => {
       sorterIcon: 'Supports Replacing Sorting ICON',
       stickyHeader: 'Sticky Header',
       stickyLeftColumn: 'Sticky Left Column',
-      stickyRightColumn: 'Sticky Rright Column',
+      stickyRightColumn: 'Sticky Right Column',
+      stickyBothColumns: 'Sticky Both Header And Left Column',
       customRow: 'Custom Row',
+      noVirtual: 'no virtual scroll',
+      virtual: 'virtual scroll',
     },
   })
 
@@ -80,8 +89,14 @@ const TableDemo = () => {
       <Demo12 />
       <h2>{translated.stickyRightColumn}</h2>
       <Demo13 />
+      <h2>{translated.stickyBothColumns}</h2>
+      <Demo15 />
       <h2>{translated.customRow}</h2>
       <Demo14 />
+      <h2>{translated.noVirtual}</h2>
+      <DemoNoVirtual />
+      <h2>{translated.virtual}</h2>
+      <DemoVirtual />
     </div>
   )
 }

src/packages/table/demos/h5/demo-no-virtual.tsx

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import TableVirtual, { TableColumnProps } from '../../index.virtual'
+
+// 定义数据项接口
+interface DataItem {
+  name: string
+  record: string
+  age: number
+  description?: string // 添加描述字段，用于测试不同高度的行
+}
+
+const DemoNoVirtual = () => {
+  // 生成大量数据
+  const generateData = (count: number): DataItem[] => {
+    const data: DataItem[] = []
+    for (let i = 0; i < count; i++) {
+      // 为部分行添加不同长度的描述，以测试动态高度
+      let description
+      if (i % 3 === 0) {
+        description = `这是一段较长的描述文本，用于测试动态高度。行号: ${i}. 这段文字会导致行高增加。`
+      } else if (i % 5 === 0) {
+        description = `这是一段非常非常长的描述文本，它会占用多行空间。这是为了测试虚拟滚动表格在处理不同高度的行时的表现。行号: ${i}. 我们希望表格能够正确计算每行的实际高度，并且在滚动时保持良好的性能和用户体验。`
+      } else {
+        description = undefined
+      }
+
+      data.push({
+        name: `Name ${i}`,
+        record: ['小学', '初中', '高中', '大专', '本科'][i % 5],
+        age: Math.floor(Math.random() * 50) + 10,
+        description,
+      })
+    }
+    return data
+  }
+
+  // 定义列配置
+  const [columns] = useState<TableColumnProps[]>([
+    {
+      title: 'ID',
+      key: 'id',
+      width: 50,
+      fixed: 'left',
+      render: (_record: any, index: number) => {
+        return index + 1
+      },
+    },
+    {
+      title: '姓名',
+      key: 'name',
+      width: 80,
+    },
+    {
+      title: '学历',
+      key: 'record',
+      width: 60,
+    },
+    {
+      title: '年龄',
+      key: 'age',
+      width: 70,
+      sorter: (a: DataItem, b: DataItem) => a.age - b.age,
+    },
+    {
+      title: '描述',
+      key: 'description',
+      width: 100,
+      fixed: 'right',
+      render: (record: DataItem) => {
+        return record.description ? (
+          <div
+            style={{
+              padding: '5px 0',
+              lineHeight: '1.5',
+              whiteSpace: 'normal',
+              wordBreak: 'break-word',
+            }}
+          >
+            {record.description}
+          </div>
+        ) : (
+          '-'
+        )
+      },
+    },
+  ])
+
+  // 使用状态管理数据
+  const [data] = useState(generateData(10))
+
+  return <TableVirtual columns={columns} data={data} height={400} bordered />
+}
+
+export default DemoNoVirtual

src/packages/table/demos/h5/demo-virtual.tsx

@@ -0,0 +1,123 @@
+import React, { useState, useRef } from 'react'
+import TableVirtual, {
+  TableColumnProps,
+  VirtualTableRef,
+} from '../../index.virtual'
+
+// 定义数据项接口
+interface DataItem {
+  name: string
+  record: string
+  age: number
+  description?: string // 添加描述字段，用于测试不同高度的行
+}
+
+const DemoVirtual = () => {
+  // 创建表格引用
+  const tableRef = useRef<VirtualTableRef>(null)
+
+  // 生成大量数据
+  const generateData = (count: number): DataItem[] => {
+    const data: DataItem[] = []
+    for (let i = 0; i < count; i++) {
+      // 为部分行添加不同长度的描述，以测试动态高度
+      let description
+      if (i % 3 === 0) {
+        description = `这是一段较长的描述文本，用于测试动态高度。行号: ${i}. 这段文字会导致行高增加。`
+      } else if (i % 5 === 0) {
+        description = `这是一段非常非常长的描述文本，它会占用多行空间。这是为了测试虚拟滚动表格在处理不同高度的行时的表现。行号: ${i}. 我们希望表格能够正确计算每行的实际高度，并且在滚动时保持良好的性能和用户体验。`
+      } else {
+        description = undefined
+      }
+
+      data.push({
+        name: `Name ${i}`,
+        record: ['小学', '初中', '高中', '大专', '本科'][i % 5],
+        age: Math.floor(Math.random() * 50) + 10,
+        description,
+      })
+    }
+    return data
+  }
+
+  // 定义列配置
+  const [columns] = useState<TableColumnProps[]>([
+    {
+      title: 'ID',
+      key: 'id',
+      width: 50,
+      fixed: 'left',
+      render: (_record: any, index: number) => {
+        return index + 1
+      },
+    },
+    {
+      title: '姓名',
+      key: 'name',
+      width: 80,
+    },
+    {
+      title: '学历',
+      key: 'record',
+      width: 60,
+    },
+    {
+      title: '年龄',
+      key: 'age',
+      width: 70,
+      sorter: (a: DataItem, b: DataItem) => a.age - b.age,
+    },
+    {
+      title: '描述',
+      key: 'description',
+      width: 100,
+      fixed: 'right',
+      render: (record: DataItem) => {
+        return record.description ? (
+          <div
+            style={{
+              padding: '5px 0',
+              lineHeight: '1.5',
+              whiteSpace: 'normal',
+              wordBreak: 'break-word',
+            }}
+          >
+            {record.description}
+          </div>
+        ) : (
+          '-'
+        )
+      },
+    },
+  ])
+
+  // 使用状态管理数据
+  const [data, setData] = useState(generateData(1000))
+
+  // 更新数据的方法
+  const updateData = (count: number) => {
+    setData(generateData(count))
+  }
+
+  // 滚动到指定行的方法
+  const handleScrollToRow = (index: number) => {
+    if (tableRef.current) {
+      tableRef.current.scrollToIndex(index)
+    }
+  }
+
+  return (
+    <TableVirtual
+      columns={columns}
+      data={data}
+      virtual
+      height={400}
+      rowHeight={40} // 默认行高，实际会根据内容动态调整
+      overscan={10}
+      bordered
+      dynamicHeight // 启用动态高度
+    />
+  )
+}
+
+export default DemoVirtual

src/packages/table/demos/h5/demo15.tsx

@@ -0,0 +1,77 @@
+import { Table, TableColumnProps } from '@nutui/nutui-react'
+import React, { useState } from 'react'
+
+const Demo15 = () => {
+  const [data] = useState([
+    {
+      name: 'Tom',
+      gender: '男',
+      record: '小学',
+      birthday: '2010-01-01',
+      age: 10,
+    },
+    {
+      name: 'Lucy',
+      gender: '女',
+      record: '本科',
+      birthday: '2000-01-01',
+      age: 30,
+    },
+    {
+      name: 'Jack',
+      gender: '男',
+      record: '高中',
+      birthday: '2020-01-01',
+      age: 4,
+    },
+    {
+      name: 'Sara',
+      gender: '女',
+      record: '高中',
+      birthday: '2020-01-01',
+      age: 6,
+    },
+    {
+      name: 'Frank',
+      gender: '男',
+      record: '幼儿园',
+      birthday: '2020-01-01',
+      age: 3,
+    },
+  ])
+
+  const [columnsStickHeaderLeft] = useState<Array<TableColumnProps>>([
+    {
+      title: '姓名',
+      key: 'name',
+      align: 'center',
+      fixed: 'left',
+      width: 100,
+    },
+    {
+      title: '性别',
+      key: 'gender',
+    },
+    {
+      title: '学历',
+      key: 'record',
+    },
+    {
+      title: '生日',
+      key: 'birthday',
+    },
+    {
+      title: '年龄',
+      key: 'age',
+    },
+  ])
+
+  return (
+    <Table
+      columns={columnsStickHeaderLeft}
+      data={data}
+      style={{ height: 150 }}
+    />
+  )
+}
+export default Demo15