2
0
Эх сурвалжийг харах

🔧 fix(disability-person): 修复残疾人选择器区域选择器布局,脱离网格单独一行

- 将区域选择器从网格布局中移出,单独占据一行
- 区域选择器包含省市区三级联动,需要更多水平空间
- 重新组织搜索区域为三行布局:
  1. 基本信息搜索(姓名、性别、残疾证号、联系电话)- 4列网格
  2. 区域选择器单独一行,占据完整宽度
  3. 其他筛选条件和操作按钮(残疾类型、残疾等级、空列占位、搜索/重置按钮)- 4列网格
- 更新标签为"省份/城市/区县",更准确地反映三级联动
- 保持所有测试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 20 цаг өмнө
parent
commit
6f3ca31254

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

@@ -217,6 +217,7 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
 
           {/* 搜索区域 */}
           <div className="space-y-4 p-4 border rounded-lg">
+            {/* 第一行:基本信息搜索 */}
             <div className="grid grid-cols-4 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="name">姓名</Label>
@@ -272,19 +273,21 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
               </div>
             </div>
 
-            <div className="grid grid-cols-4 gap-4">
-              <div className="space-y-2">
-                <Label>省份/城市</Label>
-                {/* AreaSelect需要Form上下文,所以包装在Form中 */}
-                <Form {...form}>
-                  <AreaSelect
-                    value={areaSelection}
-                    onChange={setAreaSelection}
-                    data-testid="area-select"
-                  />
-                </Form>
-              </div>
+            {/* 第二行:区域选择器单独一行 */}
+            <div className="space-y-2">
+              <Label>省份/城市/区县</Label>
+              {/* AreaSelect需要Form上下文,所以包装在Form中 */}
+              <Form {...form}>
+                <AreaSelect
+                  value={areaSelection}
+                  onChange={setAreaSelection}
+                  data-testid="area-select"
+                />
+              </Form>
+            </div>
 
+            {/* 第三行:其他筛选条件和操作按钮 */}
+            <div className="grid grid-cols-4 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="disabilityType">残疾类型</Label>
                 <Select
@@ -332,6 +335,9 @@ const DisabledPersonSelector: React.FC<DisabledPersonSelectorProps> = ({
                 </Select>
               </div>
 
+              {/* 空列占位 */}
+              <div></div>
+
               <div className="flex items-end space-x-2">
                 <Button onClick={handleSearch} data-testid="search-button">
                   搜索