@formily-design/formily-antd 1.0.0

package/playground/components/LocationPicker/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { createBehavior, createResource } from '@formily-design/core'
+import { DnFC } from '@formily-design/react'
+import { LocationPicker as LocationPickerComponent } from './LocationPicker'
+import { createFieldSchema } from '@formily-design/formily-antd'
+import { CustomLocales } from '../../locales'
+import { CustomSchemas } from '../../schemas'
+import { EnvironmentOutlined } from '@ant-design/icons'
+import { ResourceIcon } from '../ResourceIcon'
+
+export const LocationPicker: DnFC<
+  React.ComponentProps<typeof LocationPickerComponent>
+> = LocationPickerComponent
+
+LocationPicker.Behavior = createBehavior({
+  name: 'LocationPicker',
+  extends: ['Field'],
+  selector: (node) => node.props?.['x-component'] === 'LocationPicker',
+  designerProps: {
+    propsSchema: createFieldSchema(CustomSchemas.LocationPicker),
+  },
+  designerLocales: CustomLocales.LocationPicker,
+})
+
+LocationPicker.Resource = createResource({
+  icon: (
+    <ResourceIcon>
+      <EnvironmentOutlined />
+    </ResourceIcon>
+  ),
+  elements: [
+    {
+      componentName: 'Field',
+      props: {
+        title: 'LocationPicker',
+        'x-decorator': 'FormItem',
+        'x-component': 'LocationPicker',
+        'x-component-props': {
+          placeholder: '请选择位置',
+        },
+      },
+    },
+  ],
+})

package/playground/components/LocationPicker/types.ts

@@ -0,0 +1,160 @@
+import { InputProps } from 'antd'
+
+/**
+ * 位置值类型
+ */
+export interface LocationValue {
+  /** 完整地址 */
+  address: string
+  /** 纬度 */
+  lat: number
+  /** 经度 */
+  lng: number
+  /** 地名（可选） */
+  name?: string
+  /** 省级编码（可选） */
+  provinceCode: string
+  /** 省级名称（可选） */
+  provinceName: string
+  /** 市级编码（可选） */
+  cityCode: string
+  /** 市级名称（可选） */
+  cityName: string
+  /** 区级编码（可选） */
+  districtCode: string
+  /** 区级名称（可选） */
+  districtName: string
+}
+
+/**
+ * 位置选择器属性类型
+ */
+export interface LocationPickerProps
+  extends Omit<InputProps, 'value' | 'onChange'> {
+  /** 值-具体数据类型会根据 fieldNames 进行转换 */
+  value?: Record<string, any>
+  /** 值变化回调-具体数据类型会根据 fieldNames 进行转换 */
+  onChange?: (value: Record<string, any>) => void
+  /** 地图容器 ID 前缀（用于支持多个地图实例） */
+  mapId?: string
+  /** 是否只读 */
+  readOnly?: boolean
+  /** 业务字段和组件值的映射 */
+  fieldNames?: {
+    address?: string
+    lat?: string
+    lng?: string
+    provinceCode?: string
+    provinceName?: string
+    cityCode?: string
+    cityName?: string
+    districtCode?: string
+    districtName?: string
+    name?: string
+  }
+  /** 地图 API Key */
+  mapApiKey: string
+}
+
+/**
+ * 搜索结果类型
+ */
+export interface SearchResult {
+  /** 标题 */
+  title: string
+  /** 地址 */
+  address: string
+  /** 纬度 */
+  lat: number
+  /** 经度 */
+  lng: number
+  /** 类别 */
+  category?: string
+  /** 行政区划编码 */
+  adcode: number
+  /** 省份名称 */
+  province: string
+  /** 城市名称 */
+  city: string
+  /** 区县名称 */
+  district: string
+}
+
+/**
+ * 地图实例类型（腾讯地图）
+ */
+export interface TencentMap {
+  center: new (point: { lat: number; lng: number }) => void
+  setCenter: (point: { lat: number; lng: number }) => void
+  addEventListener: (event: string, callback: (e: any) => void) => void
+  removeEventListener: (event: string, callback: (e: any) => void) => void
+  clearOverlays: () => void
+  addOverlay: (overlay: any) => void
+  getCenter: () => { lat: number; lng: number }
+}
+
+/**
+ * 标记点类型
+ */
+export interface MapMarker {
+  setPosition: (point: { lat: number; lng: number }) => void
+  setTitle: (title: string) => void
+  addEventListener: (event: string, callback: (e: any) => void) => void
+  remove: () => void
+}
+
+/** 地图服务响应类型 */
+export interface MapServiceResponse {
+  status: number
+  message?: string
+  request_id?: string
+}
+
+/** 地址解析结果 */
+export interface GeocoderResponse extends MapServiceResponse {
+  result: {
+    location: Record<string, any>
+    address: string
+    address_component: Record<string, any>
+    ad_info: Record<string, any>
+    address_reference: Record<string, any>
+  }
+}
+
+/** 地图定位结果 */
+export interface MapLocationResponse extends MapServiceResponse {
+  result: {
+    ip: string
+    location: {
+      lat: number
+      lng: number
+    }
+    ad_info: {
+      province: string
+      city: string
+      district: string
+      adcode: number
+      nation: string
+      nation_code: number
+    }
+  }
+}
+
+/** 关键词输入提示结果数据 */
+export interface SuggestionResponse {
+  count: number
+  request_id: string
+  data: {
+    adcode: number
+    address: string
+    category: string
+    city: string
+    district: string
+    id: string
+    location: { lat: number; lng: number }
+    province: string
+    title: string
+    type: number
+  }[]
+  status: number
+}

package/playground/components/LocationPicker/utils.ts

@@ -0,0 +1,46 @@
+import jsonp from 'jsonp'
+import { MapServiceResponse } from './types'
+
+/** 地图服务请求方法 */
+export function fetchMapService<T extends MapServiceResponse>(
+  url: string
+): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    try {
+      // 使用jsonp请求
+      jsonp(url, {}, (err, data: T) => {
+        if (err) {
+          console.error('获取地址失败:', err)
+          reject(err)
+        }
+        if (data.status === 0) {
+          resolve(data)
+        }
+      })
+    } catch (error) {
+      reject(error)
+      console.error('获取地址失败:', error)
+    }
+  })
+}
+
+/**
+ * 通过 adcode 解析省市区编码
+ * adcode 编码结构：
+ * 省代码：前两位。
+ * 市/地区代码：前4位。
+ * 区县代码：6位全有值
+ */
+export function parseAdcode(adcode: string): {
+  provinceCode: string
+  cityCode: string
+  districtCode: string
+} {
+  if (!adcode || adcode.length !== 6) {
+    return { provinceCode: '', cityCode: '', districtCode: '' }
+  }
+  const province = adcode.slice(0, 2) + '0000'
+  const city = adcode.slice(0, 4) + '00'
+  const district = adcode
+  return { provinceCode: province, cityCode: city, districtCode: district }
+}

package/playground/components/ResourceIcon/index.module.less

@@ -0,0 +1,10 @@
+.resourceIcon {
+  display: flex;
+  justify-content: center;
+  width: 150px;
+  height: 40px;
+  margin: 12px 0;
+  font-size: 32px;
+  // color: var(--dn-brand-color);
+  color: rgb(153, 153, 153);
+}

package/playground/components/ResourceIcon/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './index.module.less'
+interface ResourceIconProps {
+  children: React.ReactNode
+}
+
+/** 资源图标容器组件 */
+export function ResourceIcon({ children }: ResourceIconProps) {
+  return <div className={styles.resourceIcon}>{children}</div>
+}

package/playground/designerLocales/en-US.ts

@@ -0,0 +1,38 @@
+export default {
+  'en-US': {
+    sources: {
+      Inputs: 'Inputs',
+      Layouts: 'Layouts',
+      Arrays: 'Arrays',
+      Displays: 'Displays',
+    },
+    SettingComponents: {
+      ClickEventSetter: {
+        configureEvents: 'Configure Click Event',
+        edit: 'Edit',
+        delete: 'Delete',
+        basicConfig: 'Basic Config',
+        actionType: 'Action Type',
+        description: 'Description',
+        descriptionPlaceholder: 'Please enter action description (optional)',
+        actionConfig: 'Action Config',
+        request: 'Request',
+        navigation: 'Navigation',
+        download: 'Download',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+        url: 'URL',
+        openMode: 'Open Mode',
+        currentWindow: 'Current Window',
+        newWindow: 'New Window',
+        downloadUrl: 'Download URL',
+        successMessage: 'Success Message',
+        successMessagePlaceholder: 'Please enter success message (optional)',
+        fieldMapping: 'Field Mapping',
+        paramKey: 'Parameter Key',
+        formField: 'Form Field',
+        addMapping: 'Add Mapping',
+      },
+    },
+  },
+}

package/playground/designerLocales/index.ts

@@ -0,0 +1,6 @@
+import { GlobalRegistry } from '@formily-design/core'
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import koKR from './ko-KR'
+
+GlobalRegistry.registerDesignerLocales(zhCN, enUS, koKR)

package/playground/designerLocales/ko-KR.ts

@@ -0,0 +1,10 @@
+export default {
+  'ko-KR': {
+    sources: {
+      Inputs: '입력',
+      Layouts: '레이아웃',
+      Arrays: '배열',
+      Displays: '디스플레이',
+    },
+  },
+}

package/playground/designerLocales/zh-CN.ts

@@ -0,0 +1,38 @@
+export default {
+  'zh-CN': {
+    sources: {
+      Inputs: '输入控件',
+      Layouts: '布局组件',
+      Arrays: '自增组件',
+      Displays: '展示组件',
+    },
+    SettingComponents: {
+      ClickEventSetter: {
+        configureEvents: '配置点击事件',
+        edit: '编辑',
+        delete: '删除',
+        basicConfig: '基本配置',
+        actionType: '动作类型',
+        description: '动作描述',
+        descriptionPlaceholder: '请输入动作描述（可选）',
+        actionConfig: '动作配置',
+        request: '服务请求',
+        navigation: '页面跳转',
+        download: '下载文件',
+        cancel: '取消',
+        confirm: '确定',
+        url: '跳转地址',
+        openMode: '打开方式',
+        currentWindow: '当前窗口',
+        newWindow: '新窗口',
+        downloadUrl: '下载地址',
+        successMessage: '成功提示',
+        successMessagePlaceholder: '请输入成功提示文案（可选）',
+        fieldMapping: '字段映射',
+        paramKey: '参数名',
+        formField: '表单字段',
+        addMapping: '添加映射',
+      },
+    },
+  },
+}

package/playground/locales/FormButton.ts

@@ -0,0 +1,38 @@
+export const FormButton = {
+  'zh-CN': {
+    title: '表单按钮',
+    settings: {
+      'x-component-props': {
+        title: '按钮标题',
+        type: '按钮类型',
+        htmlType: '原生类型',
+        noValidate: '不校验',
+      },
+      'event-group': '事件',
+    },
+  },
+  'en-US': {
+    title: 'Form Button',
+    settings: {
+      'x-component-props': {
+        title: 'Button Title',
+        type: 'Button Type',
+        htmlType: 'Native Type',
+        noValidate: 'No Validate',
+      },
+      'event-group': 'Event',
+    },
+  },
+  'ko-KR': {
+    title: '폼 버튼',
+    settings: {
+      'x-component-props': {
+        title: '버튼 제목',
+        type: '버튼 타입',
+        htmlType: '기본 타입',
+        noValidate: '불 검사',
+      },
+      'event-group': '이벤트',
+    },
+  },
+}

package/playground/locales/FormButtonGroup.ts

@@ -0,0 +1,29 @@
+export const FormButtonGroup = {
+  'zh-CN': {
+    title: '表单按钮组',
+    settings: {
+      'x-component-props': {
+        gutter: '间距大小',
+        align: '对齐方式',
+      },
+    },
+  },
+  'en-US': {
+    title: 'Form Button Group',
+    settings: {
+      'x-component-props': {
+        gutter: 'Gutter',
+        align: 'Align',
+      },
+    },
+  },
+  'ko-KR': {
+    title: '폼 버튼 그룹',
+    settings: {
+      'x-component-props': {
+        gutter: '간격',
+        align: '정렬',
+      },
+    },
+  },
+}

package/playground/locales/LocationPicker.ts

@@ -0,0 +1,30 @@
+import { createLocales } from '@formily-design/core'
+import { AllLocales } from '@formily-design/formily-antd'
+
+export const LocationPicker = createLocales(AllLocales.Input, {
+  'zh-CN': {
+    title: '位置选择器',
+    settings: {
+      'x-component-props': {
+        mapApiKey: '地图API Key',
+      },
+    },
+  },
+  'en-US': {
+    title: 'Location Picker',
+    settings: {
+      'x-component-props': {
+        mapApiKey: 'Map API Key',
+      },
+    },
+  },
+
+  'ko-KR': {
+    title: '위치 선택기',
+    settings: {
+      'x-component-props': {
+        mapApiKey: 'Map API Key',
+      },
+    },
+  },
+})

package/playground/locales/all.ts

@@ -0,0 +1,3 @@
+export * from './FormButtonGroup'
+export * from './FormButton'
+export * from './LocationPicker'

package/playground/locales/index.ts

@@ -0,0 +1,3 @@
+import * as CustomLocales from './all'
+
+export { CustomLocales }