@formily-design/formily-antd 1.0.0 → 1.0.2

package/playground/components/LocationPicker/LocationModal.tsx

@@ -1,328 +0,0 @@
-import React, { useState, useCallback, useContext, useEffect } from 'react'
-import { Modal, Button, message } from 'antd'
-import { EnvironmentOutlined } from '@ant-design/icons'
-import { TMap, MapContext, MultiMarker } from 'tlbs-map-react'
-import { LocationValue, SearchResult } from './types'
-import { SearchBox } from './SearchBox'
-import { fetchAddressInfo, fetchMapLocationInfo } from './api'
-import { parseAdcode } from './utils'
-
-interface LocationModalProps {
-  visible: boolean
-  value?: LocationValue
-  onConfirm: (value: LocationValue) => void
-  onCancel: () => void
-  mapId?: string
-  readOnly?: boolean
-  mapKey: string
-}
-
-interface PointGeometry {
-  styleId: string
-  position: {
-    lat: number
-    lng: number
-  }
-}
-
-// 默认中心点（北京）
-const DEFAULT_CENTER = {
-  lat: 39.9042,
-  lng: 116.4074,
-}
-
-// 标记样式
-interface MarkerStyle {
-  width: number
-  height: number
-  anchor: { x: number; y: number }
-  src?: string
-}
-
-const MARKER_STYLES: Record<string, MarkerStyle> = {
-  marker: {
-    width: 30,
-    height: 40,
-    anchor: { x: 15, y: 40 },
-  },
-}
-
-// 地图点击处理组件
-const MapClickHandler: React.FC<{
-  onMapClick: (lat: number, lng: number) => void
-}> = ({ onMapClick }) => {
-  const mapInstance = useContext(MapContext)
-
-  useEffect(() => {
-    if (!mapInstance) return
-
-    const handleClick = (event: any) => {
-      const { lat, lng } = event.latLng
-      onMapClick(lat, lng)
-    }
-
-    // 监听地图点击事件
-    mapInstance.on('click', handleClick)
-
-    return () => {
-      mapInstance.off('click', handleClick)
-    }
-  }, [mapInstance, onMapClick])
-
-  return null
-}
-
-// 标记点管理组件
-const MarkerController: React.FC<{
-  location: LocationValue | null
-}> = ({ location }) => {
-  const [geometries, setGeometries] = useState<PointGeometry[]>([])
-
-  useEffect(() => {
-    if (location) {
-      setGeometries([
-        {
-          styleId: 'marker',
-          position: {
-            lat: location.lat,
-            lng: location.lng,
-          },
-        },
-      ])
-    } else {
-      setGeometries([])
-    }
-  }, [location])
-
-  return <MultiMarker styles={MARKER_STYLES} geometries={geometries} />
-}
-
-export const LocationModal: React.FC<LocationModalProps> = (props) => {
-  const { visible, value, onConfirm, onCancel, readOnly, mapKey } = props
-
-  const [selectedLocation, setSelectedLocation] =
-    useState<LocationValue | null>(null)
-  const [center, setCenter] = useState(DEFAULT_CENTER)
-
-  /** 处理地图点击 */
-  const handleMapClick = useCallback(
-    async (lat: number, lng: number) => {
-      if (readOnly) return
-      const { address, ...addressInfo } = await fetchAddressInfo(lat, lng, {
-        mapKey,
-      })
-      const locationData: LocationValue = {
-        ...addressInfo,
-        address,
-        lat,
-        lng,
-        name: address ? address.split(',')[0] : '',
-      }
-      setSelectedLocation(locationData)
-    },
-    [readOnly, mapKey]
-  )
-
-  /** 处理搜索结果选择 */
-  const handleSelectSearchResult = useCallback((result: SearchResult) => {
-    /** 省市区编码 */
-    const adCodeInfo = parseAdcode(String(result.adcode))
-    const locationData: LocationValue = {
-      ...adCodeInfo,
-      address: result.address || result.title,
-      lat: result.lat,
-      lng: result.lng,
-      name: result.title,
-      provinceName: result.province,
-      cityName: result.city,
-      districtName: result.district,
-    }
-    setSelectedLocation(locationData)
-    setCenter({ lat: result.lat, lng: result.lng })
-  }, [])
-
-  /** 定位当前位置 */
-  const handleLocateCurrent = useCallback(() => {
-    if (!navigator.geolocation) {
-      message.warning('您的浏览器不支持定位功能')
-      return
-    }
-
-    message.loading('正在定位...', 0)
-
-    // 设备 api 获取位置
-    navigator.geolocation.getCurrentPosition(
-      (position) => {
-        message.destroy()
-        const { latitude, longitude } = position.coords
-        fetchAddressInfo(latitude, longitude, { mapKey }).then(
-          ({ address, ...addressInfo }) => {
-            const locationData: LocationValue = {
-              ...addressInfo,
-              address,
-              lat: latitude,
-              lng: longitude,
-              name: '当前位置',
-            }
-            setSelectedLocation(locationData)
-            setCenter({ lat: latitude, lng: longitude })
-          }
-        )
-      },
-      (error) => {
-        message.destroy()
-        console.error('定位失败:', error)
-        switch (error.code) {
-          case error.PERMISSION_DENIED:
-            message.warning('定位权限被拒绝，请手动选择位置')
-            break
-          case error.POSITION_UNAVAILABLE:
-            message.error('位置信息不可用')
-            break
-          case error.TIMEOUT:
-            message.error('定位超时')
-            break
-          default:
-            message.error('定位失败')
-        }
-      },
-      {
-        enableHighAccuracy: true,
-        timeout: 10000,
-        maximumAge: 0,
-      }
-    )
-  }, [mapKey])
-
-  /** 确认选择 */
-  const handleConfirm = useCallback(async () => {
-    if (selectedLocation) {
-      // 如果没有地址，尝试获取
-      if (!selectedLocation.address) {
-        const { address, ...addressInfo } = await fetchAddressInfo(
-          selectedLocation.lat,
-          selectedLocation.lng,
-          {
-            mapKey,
-          }
-        )
-        onConfirm({ ...selectedLocation, ...addressInfo, address })
-      } else {
-        onConfirm(selectedLocation)
-      }
-    } else if (value) {
-      onConfirm(value)
-    } else {
-      message.warning('请先选择位置')
-    }
-  }, [selectedLocation, value, onConfirm, mapKey])
-
-  /** 取消 */
-  const handleCancel = useCallback(() => {
-    setSelectedLocation(null)
-    onCancel()
-  }, [onCancel])
-
-  /** 地图加载完成回调 */
-  const onMapInited = () => {
-    if (visible && !value) {
-      fetchMapLocationInfo(mapKey).then(({ lat, lng }) => {
-        setCenter({ lat, lng })
-      })
-    }
-  }
-
-  /** 弹窗打开时重置地图 key 以重新初始化 */
-  useEffect(() => {
-    if (visible) {
-      if (value) {
-        setSelectedLocation(value)
-        setCenter({ lat: value.lat, lng: value.lng })
-      } else {
-        setCenter(DEFAULT_CENTER)
-        setSelectedLocation(null)
-      }
-    }
-  }, [visible, value])
-
-  return (
-    <Modal
-      title={readOnly ? '查看位置' : '选择位置'}
-      open={visible}
-      onCancel={handleCancel}
-      footer={
-        readOnly
-          ? [
-              <Button key="cancel" onClick={handleCancel}>
-                取消
-              </Button>,
-            ]
-          : [
-              <Button
-                key="locate"
-                icon={<EnvironmentOutlined />}
-                onClick={handleLocateCurrent}
-              >
-                定位当前
-              </Button>,
-              <Button key="cancel" onClick={handleCancel}>
-                取消
-              </Button>,
-              <Button key="confirm" type="primary" onClick={handleConfirm}>
-                确认选择
-              </Button>,
-            ]
-      }
-      width={700}
-      centered
-      destroyOnClose
-    >
-      <div className="location-modal-content">
-        {!readOnly && (
-          <SearchBox onSelect={handleSelectSearchResult} mapKey={mapKey} />
-        )}
-        {mapKey ? (
-          <div
-            style={{
-              width: '100%',
-              height: 400,
-              marginTop: 16,
-              borderRadius: 8,
-              overflow: 'hidden',
-            }}
-          >
-            <TMap
-              apiKey={mapKey}
-              options={{ center }}
-              style={{ width: '100%', height: '100%' }}
-              onMapInited={onMapInited}
-            >
-              <MapClickHandler onMapClick={handleMapClick} />
-              <MarkerController location={selectedLocation} />
-            </TMap>
-          </div>
-        ) : (
-          <div style={{ height: 60, display: 'flex', alignItems: 'center' }}>
-            地图加载失败，请配置地图 key
-          </div>
-        )}
-        {selectedLocation?.address && (
-          <div
-            style={{
-              marginTop: 12,
-              padding: 8,
-              background: '#f0f9ff',
-              borderRadius: 4,
-              fontSize: 14,
-            }}
-          >
-            <EnvironmentOutlined style={{ marginRight: 8, color: '#1890ff' }} />
-            {selectedLocation.address}
-          </div>
-        )}
-      </div>
-    </Modal>
-  )
-}
-
-export default LocationModal

package/playground/components/LocationPicker/LocationPicker.tsx

@@ -1,163 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react'
-import { Input, Space } from 'antd'
-import { EnvironmentOutlined } from '@ant-design/icons'
-import { LocationPickerProps, LocationValue } from './types'
-import { LocationModal } from './LocationModal'
-import { PreviewText } from '@formily/antd-v5'
-import { connect, mapReadPretty } from '@formily/react'
-
-/** 业务字段和组件值的映射默认配置 */
-const VALUE_MAP = {
-  /** 完整地址 */
-  address: 'address',
-  /** 纬度 */
-  lat: 'lat',
-  /** 经度 */
-  lng: 'lng',
-  /** 省级编码 */
-  provinceCode: 'provinceCode',
-  /** 省级名称 */
-  provinceName: 'provinceName',
-  /** 市级编码 */
-  cityCode: 'cityCode',
-  /** 市级名称 */
-  cityName: 'cityName',
-  /** 区级编码 */
-  districtCode: 'districtCode',
-  /** 区级名称 */
-  districtName: 'districtName',
-  /** 名称 */
-  name: 'name',
-}
-
-/** 将组件值映射为业务字段 */
-const mapToBusinessFields = (
-  location: LocationValue,
-  fieldNames: Record<string, string>
-): Record<string, unknown> => {
-  const result: Record<string, unknown> = {}
-  Object.entries(fieldNames).forEach(([key, fieldKey]) => {
-    const v = location[key as keyof LocationValue]
-    if (v !== undefined && v !== null) {
-      result[fieldKey] = v
-    }
-  })
-  return result
-}
-
-/** 将业务字段映射为组件值 */
-const mapToComponentValue = (
-  value: Record<string, unknown>,
-  fieldNames: Record<string, string>
-): LocationValue => {
-  const result: LocationValue = {
-    address: '',
-    lat: 0,
-    lng: 0,
-    provinceCode: '',
-    provinceName: '',
-    cityCode: '',
-    cityName: '',
-    districtCode: '',
-    districtName: '',
-    name: '',
-  }
-  Object.entries(fieldNames).forEach(([key, fieldKey]) => {
-    const v = value[fieldKey]
-    if (v !== undefined && v !== null) {
-      result[key as keyof LocationValue] = v as never
-    }
-  })
-  return result
-}
-
-function LocationPickerComp(props: LocationPickerProps) {
-  const {
-    value,
-    onChange,
-    placeholder = '请选择位置',
-    disabled,
-    mapId,
-    readOnly,
-    fieldNames: propsFieldNames,
-    mapApiKey,
-    ...restProps
-  } = props
-  const fieldNames = useMemo(
-    () => ({ ...VALUE_MAP, ...propsFieldNames }),
-    [propsFieldNames]
-  )
-  const [modalVisible, setModalVisible] = useState(false)
-
-  const handleOpenModal = useCallback(() => {
-    if (!disabled) {
-      setModalVisible(true)
-    }
-  }, [disabled])
-
-  const handleConfirm = useCallback(
-    (location: LocationValue) => {
-      onChange?.(mapToBusinessFields(location, fieldNames))
-      setModalVisible(false)
-    },
-    [onChange, fieldNames]
-  )
-
-  const handleCancel = useCallback(() => {
-    setModalVisible(false)
-  }, [])
-
-  // 将业务字段映射为组件值
-  const fieldValue = value ? mapToComponentValue(value, fieldNames) : undefined
-  // 显示值
-  const displayValue = fieldValue?.address ?? ''
-
-  return (
-    <>
-      <Input
-        {...restProps}
-        value={displayValue}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly
-        prefix={
-          <Space>
-            <EnvironmentOutlined style={{ color: '#1890ff' }} />
-          </Space>
-        }
-        onClick={handleOpenModal}
-        style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
-      />
-      <LocationModal
-        visible={modalVisible}
-        value={fieldValue}
-        onConfirm={handleConfirm}
-        onCancel={handleCancel}
-        mapId={mapId}
-        mapKey={mapApiKey}
-        readOnly={readOnly}
-      />
-    </>
-  )
-}
-
-/** 位置选择器阅读模式组件 */
-function PockerPreviewText(props: LocationPickerProps) {
-  const { value, fieldNames: propsFieldNames } = props
-  const fieldNames = useMemo(
-    () => ({ ...VALUE_MAP, ...propsFieldNames }),
-    [propsFieldNames]
-  )
-  // 将业务字段映射为组件值
-  const fieldValue = value ? mapToComponentValue(value, fieldNames) : undefined
-  // 显示值
-  const displayValue = fieldValue?.address ?? ''
-  return <PreviewText.Input value={displayValue} />
-}
-
-export const LocationPicker = connect(
-  LocationPickerComp,
-  mapReadPretty(PockerPreviewText)
-)
-
-export default LocationPicker

package/playground/components/LocationPicker/SearchBox.tsx

@@ -1,122 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import { Input, Button, List, message } from 'antd'
-import { SearchOutlined } from '@ant-design/icons'
-import { SearchResult } from './types'
-import { fetchPlaceSuggestion } from './api'
-
-interface SearchBoxProps {
-  onSearch?: () => void
-  onSelect: (result: SearchResult) => void
-  mapKey: string
-}
-
-export const SearchBox: React.FC<SearchBoxProps> = (props) => {
-  const { onSearch, onSelect, mapKey } = props
-
-  const [keyword, setKeyword] = useState('')
-  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
-  const [searching, setSearching] = useState(false)
-
-  const handleSearch = useCallback(async () => {
-    if (!keyword.trim()) {
-      message.warning('请输入地址关键字')
-      return
-    }
-
-    setSearching(true)
-    try {
-      const data = await fetchPlaceSuggestion(keyword, { mapKey })
-      if (data && data.length > 0) {
-        // 模糊搜索结果
-        const results: SearchResult[] = data.map((item) => ({
-          title: item.title || '',
-          address: item.address || '',
-          lat: item.location?.lat || 0,
-          lng: item.location?.lng || 0,
-          category: item.category,
-          adcode: item.adcode,
-          province: item.province,
-          city: item.city,
-          district: item.district,
-        }))
-        setSearchResults(results)
-        onSearch?.()
-      } else {
-        message.warning('未找到相关地址')
-        setSearchResults([])
-        onSearch?.()
-      }
-    } catch (error) {
-      console.error('搜索地址失败:', error)
-      message.error('搜索地址失败，请稍后重试')
-    } finally {
-      setSearching(false)
-    }
-  }, [keyword, onSearch, mapKey])
-
-  const handleSelect = useCallback(
-    (result: SearchResult) => {
-      setSearchResults([])
-      setKeyword('')
-      onSelect(result)
-    },
-    [onSelect]
-  )
-
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setKeyword(e.target.value)
-  }, [])
-
-  const handleKeyPress = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        handleSearch()
-      }
-    },
-    [handleSearch]
-  )
-
-  return (
-    <div>
-      <Input
-        placeholder="输入地址搜索..."
-        value={keyword}
-        onChange={handleChange}
-        onKeyDown={handleKeyPress}
-        suffix={
-          <Button
-            type="primary"
-            icon={<SearchOutlined />}
-            loading={searching}
-            onClick={handleSearch}
-            style={{ marginRight: -8 }}
-          />
-        }
-        style={{ width: '100%' }}
-      />
-      {searchResults.length > 0 && (
-        <List
-          size="small"
-          dataSource={searchResults}
-          renderItem={(item) => (
-            <List.Item
-              onClick={() => handleSelect(item)}
-              style={{ cursor: 'pointer' }}
-            >
-              <List.Item.Meta title={item.title} description={item.address} />
-            </List.Item>
-          )}
-          style={{
-            maxHeight: 150,
-            overflow: 'auto',
-            border: '1px solid #d9d9d9',
-            borderTop: 'none',
-            borderRadius: '0 0 8px 8px',
-          }}
-        />
-      )}
-    </div>
-  )
-}
-
-export default SearchBox

package/playground/components/LocationPicker/api.ts

@@ -1,77 +0,0 @@
-import {
-  GeocoderResponse,
-  MapLocationResponse,
-  SuggestionResponse,
-} from './types'
-import { fetchMapService, parseAdcode } from './utils'
-
-/** 地址解析函数 */
-export function fetchAddressInfo(
-  lat: number,
-  lng: number,
-  options: {
-    mapKey: string
-  }
-): Promise<{
-  address: string
-  provinceCode: string
-  cityCode: string
-  districtCode: string
-  provinceName: string
-  cityName: string
-  districtName: string
-}> {
-  const TENCENT_MAP_KEY = options.mapKey
-  const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&output=jsonp&key=${TENCENT_MAP_KEY}`
-  return fetchMapService<GeocoderResponse>(url).then((res) => {
-    if (!res.result) {
-      throw new Error('获取地址失败')
-    }
-    /** 省市区编码 */
-    const adCodeInfo = parseAdcode(res.result.ad_info.adcode)
-    return {
-      address: res.result.address || '',
-      ...adCodeInfo,
-      provinceName: res.result.address_component.province,
-      cityName: res.result.address_component.city,
-      districtName: res.result.address_component.district,
-    }
-  })
-}
-
-/** 请求地图定位 */
-export function fetchMapLocationInfo(
-  mapKey: string
-): Promise<{ lat: number; lng: number }> {
-  const url = `https://apis.map.qq.com/ws/location/v1/ip?key=${mapKey}&output=jsonp`
-  return fetchMapService<MapLocationResponse>(url).then((res) => {
-    if (res.result) {
-      return {
-        lat: res.result.location.lat,
-        lng: res.result.location.lng,
-      }
-    } else {
-      // 提示错误
-      throw new Error('获取定位失败')
-    }
-  })
-}
-
-/** 关键词输入提示 */
-export function fetchPlaceSuggestion(
-  keyword: string,
-  options: {
-    mapKey: string
-  }
-): Promise<SuggestionResponse['data']> {
-  const TENCENT_MAP_KEY = options.mapKey
-  const encodedKeyword = keyword.trim()
-  const url = `https://apis.map.qq.com/ws/place/v1/suggestion?keyword=${encodedKeyword}&key=${TENCENT_MAP_KEY}&output=jsonp`
-  return fetchMapService<SuggestionResponse>(url).then((res) => {
-    if (res.data) {
-      return res.data
-    } else {
-      return []
-    }
-  })
-}

package/playground/components/LocationPicker/constants.ts

@@ -1,2 +0,0 @@
-/** 腾讯地图 key */
-export const MAP_KEY = '4NNBZ-6WLWU-6DWVM-2RYMV-WBZ3V-7MFJS'