✨ feat(salary-management): 重构薪资管理组件以使用新的区域选择表单组件

- 引入 `AreaSelectForm` 组件替换原有的手动区域选择逻辑
- 将创建和编辑表单中的区域选择器统一为 `AreaSelectForm` 组件，简化代码结构
- 移除冗余的 `areaValue` 状态，将区域数据直接绑定到表单字段
- 重命名搜索区域状态变量为 `searchAreaValue` 以明确其用途
- 优化表单初始化逻辑，确保区域字段有明确的默认值
- 更新表单提交处理，移除手动组装区域数据的步骤
- 为表单组件添加测试ID前缀以支持自动化测试

allin-packages/salary-management-ui/src/components/SalaryManagement.tsx

@@ -13,7 +13,7 @@ import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
 import { DataTablePagination } from '@d8d/shared-ui-components/components/admin/DataTablePagination';
-import { AreaSelect } from '@d8d/area-management-ui/components';
+import { AreaSelect, AreaSelectForm } from '@d8d/area-management-ui/components';
 import { salaryClientManager } from '../api/salaryClient';
 import { CreateSalarySchema, UpdateSalarySchema } from '@d8d/allin-salary-module/schemas';
 import type {
@@ -36,7 +36,7 @@ const SalaryManagement: React.FC = () => {
   const [isCreateForm, setIsCreateForm] = useState(true);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [salaryToDelete, setSalaryToDelete] = useState<number | null>(null);
-  const [areaValue, setAreaValue] = useState<{ provinceId?: number; cityId?: number; districtId?: number }>({});
+  const [searchAreaValue, setSearchAreaValue] = useState<{ provinceId?: number; cityId?: number; districtId?: number }>({});
 
   // 搜索表单
   const searchForm = useForm<{ provinceId?: number; cityId?: number; districtId?: number }>({
@@ -47,6 +47,9 @@ const SalaryManagement: React.FC = () => {
   const createForm = useForm<CreateSalaryRequest>({
     resolver: zodResolver(CreateSalarySchema),
     defaultValues: {
+      provinceId: undefined,
+      cityId: undefined,
+      districtId: undefined,
       basicSalary: 0,
       allowance: 0,
       insurance: 0,
@@ -101,7 +104,6 @@ const SalaryManagement: React.FC = () => {
       toast.success('薪资创建成功');
       setIsModalOpen(false);
       createForm.reset();
-      setAreaValue({});
       refetch();
     },
     onError: (error) => {
@@ -173,12 +175,14 @@ const SalaryManagement: React.FC = () => {
   const showCreateModal = () => {
     setIsCreateForm(true);
     createForm.reset({
+      provinceId: undefined,
+      cityId: undefined,
+      districtId: undefined,
       basicSalary: 0,
       allowance: 0,
       insurance: 0,
       housingFund: 0
     });
-    setAreaValue({});
     setIsModalOpen(true);
   };
 
@@ -195,11 +199,6 @@ const SalaryManagement: React.FC = () => {
       insurance: salary.insurance,
       housingFund: salary.housingFund
     });
-    setAreaValue({
-      provinceId: salary.provinceId,
-      cityId: salary.cityId,
-      districtId: salary.districtId || undefined
-    });
     setIsModalOpen(true);
   };
 
@@ -211,13 +210,7 @@ const SalaryManagement: React.FC = () => {
 
   // 处理创建表单提交
   const handleCreateSubmit = (data: CreateSalaryRequest) => {
-    const submitData = {
-      ...data,
-      provinceId: areaValue.provinceId!,
-      cityId: areaValue.cityId!,
-      districtId: areaValue.districtId
-    };
-    createMutation.mutate(submitData);
+    createMutation.mutate(data);
   };
 
   // 处理更新表单提交
@@ -225,29 +218,24 @@ const SalaryManagement: React.FC = () => {
     updateMutation.mutate(data);
   };
 
-  // 处理区域选择变化
-  const handleAreaChange = (value: { provinceId?: number | string; cityId?: number | string; districtId?: number | string }) => {
+
+  // 处理数值变化，实时计算总薪资
+  const handleValueChange = (_field: keyof CreateSalaryRequest, _value: number) => {
+    // 实时计算功能已集成在表单显示中
+  };
+
+  // 处理搜索区域选择变化
+  const handleSearchAreaChange = (value: { provinceId?: number | string; cityId?: number | string; districtId?: number | string }) => {
     // 将字符串转换为数字
     const provinceId = value.provinceId ? Number(value.provinceId) : undefined;
     const cityId = value.cityId ? Number(value.cityId) : undefined;
     const districtId = value.districtId ? Number(value.districtId) : undefined;
 
     const numericValue = { provinceId, cityId, districtId };
-    setAreaValue(numericValue);
+    setSearchAreaValue(numericValue);
     searchForm.setValue('provinceId', provinceId);
     searchForm.setValue('cityId', cityId);
     searchForm.setValue('districtId', districtId);
-
-    if (isCreateForm) {
-      createForm.setValue('provinceId', provinceId!);
-      createForm.setValue('cityId', cityId!);
-      createForm.setValue('districtId', districtId);
-    }
-  };
-
-  // 处理数值变化，实时计算总薪资
-  const handleValueChange = (_field: keyof CreateSalaryRequest, _value: number) => {
-    // 实时计算功能已集成在表单显示中
   };
 
   return (
@@ -273,8 +261,8 @@ const SalaryManagement: React.FC = () => {
                   <FormItem>
                     <FormControl>
                       <AreaSelect
-                        value={areaValue}
-                        onChange={handleAreaChange}
+                        value={searchAreaValue}
+                        onChange={handleSearchAreaChange}
                         disabled={false}
                         required={false}
                         data-testid="search-area-select"
@@ -393,23 +381,13 @@ const SalaryManagement: React.FC = () => {
               <Form {...createForm}>
                 <form onSubmit={createForm.handleSubmit(handleCreateSubmit)} className="space-y-4">
                   {/* 区域选择器 */}
-                  <FormField
-                    control={createForm.control}
-                    name="provinceId"
-                    render={({ field: _field }) => (
-                      <FormItem>
-                        <FormLabel>区域选择</FormLabel>
-                        <FormControl>
-                          <AreaSelect
-                            value={areaValue}
-                            onChange={handleAreaChange}
-                            required={true}
-                            data-testid="add-form-area-select"
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
+                  <AreaSelectForm<CreateSalaryRequest>
+                    provinceName="provinceId"
+                    cityName="cityId"
+                    districtName="districtId"
+                    label="区域选择"
+                    required={true}
+                    testIdPrefix="add-form-area-select"
                   />
 
                   {/* 基本工资 */}
@@ -547,27 +525,15 @@ const SalaryManagement: React.FC = () => {
             ) : (
               <Form {...updateForm}>
                 <form onSubmit={updateForm.handleSubmit(handleUpdateSubmit)} className="space-y-4">
-                  {/* 显示当前区域信息 */}
-                  <div className="grid grid-cols-3 gap-4">
-                    <div>
-                      <div className="text-sm font-medium mb-1">省份</div>
-                      <div className="p-2 border rounded-md bg-muted">
-                        {updateForm.watch('provinceId')}
-                      </div>
-                    </div>
-                    <div>
-                      <div className="text-sm font-medium mb-1">城市</div>
-                      <div className="p-2 border rounded-md bg-muted">
-                        {updateForm.watch('cityId')}
-                      </div>
-                    </div>
-                    <div>
-                      <div className="text-sm font-medium mb-1">区县</div>
-                      <div className="p-2 border rounded-md bg-muted">
-                        {updateForm.watch('districtId') || '-'}
-                      </div>
-                    </div>
-                  </div>
+                  {/* 区域选择器 */}
+                  <AreaSelectForm<UpdateSalaryRequest>
+                    provinceName="provinceId"
+                    cityName="cityId"
+                    districtName="districtId"
+                    label="区域选择"
+                    required={true}
+                    testIdPrefix="edit-form-area-select"
+                  />
 
                   {/* 基本工资 */}
                   <FormField

packages/area-management-ui/src/components/areas/composite/AreaSelectForm.tsx

@@ -41,7 +41,7 @@ export const AreaSelectForm = <T extends FieldValues = FieldValues>({
   // 城市变化时会自动清空区县字段
 
   return (
-    <div className={className}>
+    <div className={className} data-testid={testIdPrefix}>
       {label && (
         <FormLabel>
           {label}{required && <span className="text-destructive">*</span>}