浏览代码

♿ fix(disability-person): 为残疾人选择器添加垂直滚动控制,优化表格显示

- **表格区域滚动优化**:
  - 添加垂直滚动控制(overflow-y-auto)
  - 重构表格容器为flex布局,支持水平和垂直滚动
  - 使用 `min-h-0` 确保flex容器正确收缩
  - 表格内容区域同时支持 `overflow-x-auto` 和 `overflow-y-auto`

- **对话框高度优化**:
  - 移动端高度:90vh(充分利用屏幕空间)
  - 桌面端高度:自适应(h-auto)
  - 最大高度保持90vh,防止溢出

- **布局结构调整**:
  - 表格区域使用 `flex-1 flex flex-col min-h-0` 确保正确的高度计算
  - 表格容器使用 `flex-1 border rounded-md overflow-hidden flex flex-col min-h-0`
  - 表格内容区域使用 `overflow-x-auto overflow-y-auto flex-1`

- **保持现有功能**:
  - 所有测试ID保持不变
  - 响应式设计继续有效
  - 移动端提示和隐藏列功能正常

测试验证:订单管理UI包19个测试全部通过(100%通过率)

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 21 小时之前
父节点
当前提交
7d8c1cf274
共有 1 个文件被更改,包括 68 次插入65 次删除
  1. 68 65
      allin-packages/disability-person-management-ui/src/components/DisabledPersonSelector.tsx

+ 68 - 65
allin-packages/disability-person-management-ui/src/components/DisabledPersonSelector.tsx

@@ -210,7 +210,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden flex flex-col w-[95vw] sm:w-full">
+        <DialogContent className="max-w-6xl max-h-[90vh] overflow-hidden flex flex-col w-[95vw] sm:w-full h-[90vh] sm:h-auto">
           <DialogHeader>
             <DialogTitle>选择残疾人</DialogTitle>
           </DialogHeader>
@@ -350,7 +350,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
           </div>
 
           {/* 表格区域 - 响应式设计 */}
-          <div className="flex-1 overflow-auto">
+          <div className="flex-1 flex flex-col min-h-0">
             {isLoadingData ? (
               <div className="flex items-center justify-center h-64">
                 <div className="text-center">加载中...</div>
@@ -362,79 +362,82 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                   <p>提示:表格可以左右滑动查看所有列</p>
                 </div>
 
-                <div className="border rounded-md overflow-x-auto">
-                  <Table data-testid="disabled-persons-table" className="min-w-full">
-                    <TableHeader>
-                      <TableRow>
-                        {mode === 'multiple' && (
-                          <TableHead className="w-12 sticky left-0 bg-background z-10">
-                            <Checkbox
-                              checked={selectedPersons.length === personsData.data.length}
-                              onCheckedChange={(checked) => {
-                                if (checked) {
-                                  const selectablePersons = personsData.data.filter(
-                                    (person: DisabledPersonData) => !disabledIds.includes(person.id)
-                                  );
-                                  setSelectedPersons(selectablePersons);
-                                } else {
-                                  setSelectedPersons([]);
-                                }
-                              }}
-                              aria-label="全选"
-                            />
-                          </TableHead>
-                        )}
-                        {columns.map((column, index) => (
-                          <TableHead
-                            key={column.key}
-                            className={`
-                              ${index === 0 ? 'sticky left-0 bg-background z-10' : ''}
-                              ${['province', 'city', 'disabilityType', 'disabilityLevel', 'blacklist'].includes(column.key) ? 'hidden lg:table-cell' : ''}
-                            `}
-                          >
-                            {column.label}
-                          </TableHead>
-                        ))}
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {personsData.data.map((person: DisabledPersonData) => (
-                        <TableRow
-                          key={person.id}
-                          onClick={() => mode === 'single' && handleSelectPerson(person)}
-                          className={mode === 'single' ? 'cursor-pointer hover:bg-muted' : ''}
-                          data-testid={`table-row-${person.id}`}
-                        >
+                {/* 表格容器 - 支持水平和垂直滚动 */}
+                <div className="flex-1 border rounded-md overflow-hidden flex flex-col min-h-0">
+                  <div className="overflow-x-auto overflow-y-auto flex-1">
+                    <Table data-testid="disabled-persons-table" className="min-w-full">
+                      <TableHeader>
+                        <TableRow>
                           {mode === 'multiple' && (
-                            <TableCell className="sticky left-0 bg-background z-10">
+                            <TableHead className="w-12 sticky left-0 bg-background z-10">
                               <Checkbox
-                                checked={selectedPersons.some(p => p.id === person.id)}
+                                checked={selectedPersons.length === personsData.data.length}
                                 onCheckedChange={(checked) => {
                                   if (checked) {
-                                    setSelectedPersons([...selectedPersons, person]);
+                                    const selectablePersons = personsData.data.filter(
+                                      (person: DisabledPersonData) => !disabledIds.includes(person.id)
+                                    );
+                                    setSelectedPersons(selectablePersons);
                                   } else {
-                                    setSelectedPersons(selectedPersons.filter(p => p.id !== person.id));
+                                    setSelectedPersons([]);
                                   }
                                 }}
-                                disabled={disabledIds.includes(person.id)}
-                                aria-label="选择"
+                                aria-label="全选"
                               />
-                            </TableCell>
+                            </TableHead>
                           )}
-                          <TableCell className="sticky left-0 bg-background z-10">{person.name}</TableCell>
-                          <TableCell>{person.gender}</TableCell>
-                          <TableCell>{person.idCard}</TableCell>
-                          <TableCell>{person.disabilityId}</TableCell>
-                          <TableCell>{person.phone}</TableCell>
-                          <TableCell className="hidden lg:table-cell">{person.province}</TableCell>
-                          <TableCell className="hidden lg:table-cell">{person.city}</TableCell>
-                          <TableCell className="hidden lg:table-cell">{person.disabilityType}</TableCell>
-                          <TableCell className="hidden lg:table-cell">{person.disabilityLevel}</TableCell>
-                          <TableCell className="hidden lg:table-cell">{person.isInBlackList === 1 ? '是' : '否'}</TableCell>
+                          {columns.map((column, index) => (
+                            <TableHead
+                              key={column.key}
+                              className={`
+                                ${index === 0 ? 'sticky left-0 bg-background z-10' : ''}
+                                ${['province', 'city', 'disabilityType', 'disabilityLevel', 'blacklist'].includes(column.key) ? 'hidden lg:table-cell' : ''}
+                              `}
+                            >
+                              {column.label}
+                            </TableHead>
+                          ))}
                         </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
+                      </TableHeader>
+                      <TableBody>
+                        {personsData.data.map((person: DisabledPersonData) => (
+                          <TableRow
+                            key={person.id}
+                            onClick={() => mode === 'single' && handleSelectPerson(person)}
+                            className={mode === 'single' ? 'cursor-pointer hover:bg-muted' : ''}
+                            data-testid={`table-row-${person.id}`}
+                          >
+                            {mode === 'multiple' && (
+                              <TableCell className="sticky left-0 bg-background z-10">
+                                <Checkbox
+                                  checked={selectedPersons.some(p => p.id === person.id)}
+                                  onCheckedChange={(checked) => {
+                                    if (checked) {
+                                      setSelectedPersons([...selectedPersons, person]);
+                                    } else {
+                                      setSelectedPersons(selectedPersons.filter(p => p.id !== person.id));
+                                    }
+                                  }}
+                                  disabled={disabledIds.includes(person.id)}
+                                  aria-label="选择"
+                                />
+                              </TableCell>
+                            )}
+                            <TableCell className="sticky left-0 bg-background z-10">{person.name}</TableCell>
+                            <TableCell>{person.gender}</TableCell>
+                            <TableCell>{person.idCard}</TableCell>
+                            <TableCell>{person.disabilityId}</TableCell>
+                            <TableCell>{person.phone}</TableCell>
+                            <TableCell className="hidden lg:table-cell">{person.province}</TableCell>
+                            <TableCell className="hidden lg:table-cell">{person.city}</TableCell>
+                            <TableCell className="hidden lg:table-cell">{person.disabilityType}</TableCell>
+                            <TableCell className="hidden lg:table-cell">{person.disabilityLevel}</TableCell>
+                            <TableCell className="hidden lg:table-cell">{person.isInBlackList === 1 ? '是' : '否'}</TableCell>
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </div>
                 </div>
                 <DataTablePagination
                   currentPage={searchParams.page || 1}