♻️ refactor(area-select): 重构区域选择组件为组合式架构

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

@@ -854,7 +854,6 @@ const DisabilityPersonManagement: React.FC = () => {
                           districtName="district"
                           label=""
                           required={true}
-                          control={createForm.control}
                         />
 
                         <FormField
@@ -1218,7 +1217,6 @@ const DisabilityPersonManagement: React.FC = () => {
                         districtName="district"
                         label=""
                         required={true}
-                        control={updateForm.control}
                       />
 
                       <FormField

packages/area-management-ui/src/components/AreaTreeAsync.tsx

@@ -4,7 +4,7 @@ import { Button } from '@d8d/shared-ui-components/components/ui/button';
 import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
 import { cn } from '@d8d/shared-ui-components/utils';
 import { useQuery } from '@tanstack/react-query';
-import { areaClient, areaClientManager } from '../api/areaClient';
+import { areaClientManager } from '../api/areaClient';
 import type { AreaNode } from '../types/area';
 
 interface AreaTreeAsyncProps {

packages/area-management-ui/src/components/areas/example-usage.tsx

@@ -1,164 +0,0 @@
-// 示例文件，展示新组件架构的使用方式
-// 这个文件不需要导出，仅用于演示
-
-import React, { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Form } from '@d8d/shared-ui-components/components/ui/form';
-import { Button } from '@d8d/shared-ui-components/components/ui/button';
-
-// 导入新的组件
-import { AreaProvider } from './AreaProvider';
-import { ProvinceSelect } from './base/ProvinceSelect';
-import { CitySelect } from './base/CitySelect';
-import { DistrictSelect } from './base/DistrictSelect';
-import { TownSelect } from './base/TownSelect';
-import { AreaSelect } from './composite/AreaSelect';
-import { AreaSelectForm } from './composite/AreaSelectForm';
-import { AreaSelect4Level } from './composite/AreaSelect4Level';
-
-// 示例1: 使用AreaProvider包装应用
-export const AppWithAreaProvider = () => {
-  return (
-    <AreaProvider>
-      <YourComponent />
-    </AreaProvider>
-  );
-};
-
-// 示例2: 单独使用基础组件
-export const IndividualComponentsExample = () => {
-  const [provinceId, setProvinceId] = useState<string>('');
-  const [cityId, setCityId] = useState<string>('');
-  const [districtId, setDistrictId] = useState<string>('');
-  const [townId, setTownId] = useState<string>('');
-
-  return (
-    <div className="space-y-4 p-4">
-      <h2 className="text-lg font-bold">单独使用基础组件</h2>
-
-      <ProvinceSelect
-        value={provinceId}
-        onChange={setProvinceId}
-        labelText="选择省份"
-        required={true}
-      />
-
-      <CitySelect
-        provinceId={provinceId}
-        value={cityId}
-        onChange={setCityId}
-        labelText="选择城市"
-        required={true}
-      />
-
-      <DistrictSelect
-        cityId={cityId}
-        value={districtId}
-        onChange={setDistrictId}
-        labelText="选择区县"
-      />
-
-      <TownSelect
-        districtId={districtId}
-        value={townId}
-        onChange={setTownId}
-        labelText="选择街道"
-      />
-
-      <div className="mt-4 p-2 bg-gray-100 rounded">
-        <p>当前选择:</p>
-        <p>省份: {provinceId}</p>
-        <p>城市: {cityId}</p>
-        <p>区县: {districtId}</p>
-        <p>街道: {townId}</p>
-      </div>
-    </div>
-  );
-};
-
-// 示例3: 使用组合组件
-export const CompositeComponentsExample = () => {
-  const [areaValue, setAreaValue] = useState({
-    provinceId: '',
-    cityId: '',
-    districtId: ''
-  });
-
-  return (
-    <div className="space-y-4 p-4">
-      <h2 className="text-lg font-bold">使用3级组合组件</h2>
-
-      <AreaSelect
-        value={areaValue}
-        onChange={setAreaValue}
-        required={true}
-      />
-
-      <h2 className="text-lg font-bold mt-8">使用4级组合组件</h2>
-
-      <AreaSelect4Level
-        provinceValue={areaValue.provinceId}
-        cityValue={areaValue.cityId}
-        districtValue={areaValue.districtId}
-        townValue=""
-        onProvinceChange={(id) => setAreaValue({...areaValue, provinceId: id.toString()})}
-        onCityChange={(id) => setAreaValue({...areaValue, cityId: id.toString()})}
-        onDistrictChange={(id) => setAreaValue({...areaValue, districtId: id.toString()})}
-        onTownChange={() => {}}
-      />
-    </div>
-  );
-};
-
-// 示例4: 使用表单组件
-export const FormComponentsExample = () => {
-  const form = useForm({
-    defaultValues: {
-      province: '',
-      city: '',
-      district: '',
-      town: ''
-    }
-  });
-
-  const onSubmit = (data: any) => {
-    console.log('表单提交:', data);
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 p-4">
-        <h2 className="text-lg font-bold">使用表单组件</h2>
-
-        {/* 使用AreaSelectForm组合组件 */}
-        <AreaSelectForm
-          provinceName="province"
-          cityName="city"
-          districtName="district"
-          label="地区选择"
-          required={true}
-        />
-
-        <Button type="submit">提交表单</Button>
-      </form>
-    </Form>
-  );
-};
-
-// 主示例组件
-const YourComponent = () => {
-  return (
-    <div className="p-4">
-      <h1 className="text-2xl font-bold mb-6">地区选择组件示例</h1>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <IndividualComponentsExample />
-        <CompositeComponentsExample />
-      </div>
-
-      <div className="mt-8">
-        <FormComponentsExample />
-      </div>
-    </div>
-  );
-};