@formily-design/formily-antd 1.0.0

package/playground/components/LocationPicker/LocationModal.tsx

@@ -0,0 +1,328 @@
+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

@@ -0,0 +1,163 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,77 @@
+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

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