🎨 feat(disability-person): 为残疾人选择器添加响应式设计，优化移动端体验

- **搜索区域响应式网格**：
  - 移动端：1列（垂直堆叠）
  - 平板端：2列网格
  - 桌面端：4列网格
  - 区域选择器保持单独一行，占据完整宽度

- **表格区域响应式优化**：
  - 移动端隐藏次要列（省份、城市、残疾类型、残疾等级、黑名单）
  - 添加水平滚动支持（overflow-x-auto）
  - 姓名列和选择框固定位置（sticky left-0）
  - 添加移动端提示："表格可以左右滑动查看所有列"

- **对话框响应式调整**：
  - 移动端宽度：95vw（适应屏幕）
  - 平板/桌面端：自适应宽度

- **按钮响应式优化**：
  - 移动端：按钮占满宽度（flex-1）
  - 平板/桌面端：按钮自适应宽度（flex-none）
  - 搜索/重置按钮在移动端跨2列（sm:col-span-2）

- **空列处理**：
  - 移动端隐藏空列（hidden lg:block）
  - 保持桌面端布局平衡

测试验证：订单管理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>

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

@@ -210,15 +210,15 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden flex flex-col">
+        <DialogContent className="max-w-6xl max-h-[80vh] overflow-hidden flex flex-col w-[95vw] sm:w-full">
           <DialogHeader>
             <DialogTitle>选择残疾人</DialogTitle>
           </DialogHeader>
 
-          {/* 搜索区域 */}
+          {/* 搜索区域 - 响应式设计 */}
           <div className="space-y-4 p-4 border rounded-lg">
-            {/* 第一行：基本信息搜索 */}
-            <div className="grid grid-cols-4 gap-4">
+            {/* 第一行：基本信息搜索 - 响应式网格 */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="name">姓名</Label>
                 <Input
@@ -286,8 +286,8 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
               </Form>
             </div>
 
-            {/* 第三行：其他筛选条件和操作按钮 */}
-            <div className="grid grid-cols-4 gap-4">
+            {/* 第三行：其他筛选条件和操作按钮 - 响应式网格 */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="disabilityType">残疾类型</Label>
                 <Select
@@ -335,21 +335,21 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                 </Select>
               </div>
 
-              {/* 空列占位 */}
-              <div></div>
+              {/* 在移动端隐藏空列 */}
+              <div className="hidden lg:block"></div>
 
-              <div className="flex items-end space-x-2">
-                <Button onClick={handleSearch} data-testid="search-button">
+              <div className="flex items-end space-x-2 sm:col-span-2 lg:col-span-1">
+                <Button onClick={handleSearch} data-testid="search-button" className="flex-1 sm:flex-none">
                   搜索
                 </Button>
-                <Button variant="outline" onClick={handleResetSearch} data-testid="reset-button">
+                <Button variant="outline" onClick={handleResetSearch} data-testid="reset-button" className="flex-1 sm:flex-none">
                   重置
                 </Button>
               </div>
             </div>
           </div>
 
-          {/* 表格区域 */}
+          {/* 表格区域 - 响应式设计 */}
           <div className="flex-1 overflow-auto">
             {isLoadingData ? (
               <div className="flex items-center justify-center h-64">
@@ -357,12 +357,17 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
               </div>
             ) : personsData?.data && personsData.data.length > 0 ? (
               <>
-                <div className="border rounded-md">
-                  <Table data-testid="disabled-persons-table">
+                {/* 移动端提示 */}
+                <div className="lg:hidden mb-2 text-sm text-muted-foreground">
+                  <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">
+                          <TableHead className="w-12 sticky left-0 bg-background z-10">
                             <Checkbox
                               checked={selectedPersons.length === personsData.data.length}
                               onCheckedChange={(checked) => {
@@ -379,8 +384,16 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                             />
                           </TableHead>
                         )}
-                        {columns.map((column) => (
-                          <TableHead key={column.key}>{column.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>
@@ -393,7 +406,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                           data-testid={`table-row-${person.id}`}
                         >
                           {mode === 'multiple' && (
-                            <TableCell>
+                            <TableCell className="sticky left-0 bg-background z-10">
                               <Checkbox
                                 checked={selectedPersons.some(p => p.id === person.id)}
                                 onCheckedChange={(checked) => {
@@ -408,16 +421,16 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                               />
                             </TableCell>
                           )}
-                          <TableCell>{person.name}</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>{person.province}</TableCell>
-                          <TableCell>{person.city}</TableCell>
-                          <TableCell>{person.disabilityType}</TableCell>
-                          <TableCell>{person.disabilityLevel}</TableCell>
-                          <TableCell>{person.isInBlackList === 1 ? '是' : '否'}</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>