Просмотр исходного кода

♻️ refactor(ui): 优化残疾人选择器对话框布局与表格结构

- 简化对话框内容容器样式,移除不必要的 flex 布局和高度约束,使用 `overflow-y-auto` 控制滚动
- 重构表格区域结构,移除外层 `flex-1 flex flex-col min-h-0` 容器,将加载状态、表格和分页直接置于条件渲染中
- 调整表格容器样式,使用 `overflow-auto max-h-[60vh]` 替代嵌套滚动容器,简化布局层级
- 保持原有功能与响应式行为不变
yourname 2 недель назад
Родитель
Сommit
64cd6c7504

+ 99 - 103
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-[90vh] overflow-hidden flex flex-col w-[95vw] sm:w-full h-[90vh] sm:h-auto">
+        <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
           <DialogHeader>
             <DialogTitle>选择残疾人</DialogTitle>
           </DialogHeader>
@@ -349,110 +349,106 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
             </div>
           </div>
 
-          {/* 表格区域 - 响应式设计 */}
-          <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>
+          {/* 表格区域 */}
+          {isLoadingData ? (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">加载中...</div>
+            </div>
+          ) : personsData?.data && personsData.data.length > 0 ? (
+            <>
+              {/* 移动端提示 */}
+              <div className="lg:hidden mb-2 text-sm text-muted-foreground">
+                <p>提示:表格可以左右滑动查看所有列</p>
               </div>
-            ) : personsData?.data && personsData.data.length > 0 ? (
-              <>
-                {/* 移动端提示 */}
-                <div className="lg:hidden mb-2 text-sm text-muted-foreground">
-                  <p>提示:表格可以左右滑动查看所有列</p>
-                </div>
-
-                {/* 表格容器 - 支持水平和垂直滚动 */}
-                <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' && (
-                            <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}`}
-                          >
-                            {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}
-                  pageSize={searchParams.pageSize || 10}
-                  totalCount={personsData.total || 0}
-                  onPageChange={handlePageChange}
-                  data-testid="pagination"
-                />
-              </>
-            ) : (
-              <div className="flex items-center justify-center h-64">
-                <div className="text-center">暂无数据</div>
+
+              {/* 表格容器 - 支持水平和垂直滚动 */}
+              <div className="border rounded-md overflow-auto max-h-[60vh]">
+                <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}`}
+                      >
+                        {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}
+                pageSize={searchParams.pageSize || 10}
+                totalCount={personsData.total || 0}
+                onPageChange={handlePageChange}
+                data-testid="pagination"
+              />
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-64">
+              <div className="text-center">暂无数据</div>
+            </div>
+          )}
 
           {/* 底部操作区域 */}
           <DialogFooter className="flex justify-between">