@formily-design/formily-antd 1.0.0

package/playground/components/ClickEventSetter/RequestPanel.tsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import { Form, Input, Select, Tabs, Button } from 'antd'
+import { MonacoInput } from '@formily-design/react-settings-form'
+import { TextWidget } from '@formily-design/react'
+import './styles.less'
+
+export interface IRequestPanelProps {
+  form?: any
+}
+
+export const RequestPanel: React.FC<IRequestPanelProps> = () => {
+  const tabsItems = [
+    {
+      key: 'basic',
+      label: <TextWidget token="SettingComponents.RemoteDataSource.basic" />,
+      children: (
+        <div className="request-panel-section">
+          <Form.Item
+            label={
+              <TextWidget token="SettingComponents.RemoteDataSource.url" />
+            }
+            name="url"
+            rules={[{ required: true, message: '请输入请求地址' }]}
+          >
+            <Input placeholder="https://api.example.com/data" />
+          </Form.Item>
+          <Form.Item
+            label={
+              <TextWidget token="SettingComponents.RemoteDataSource.method" />
+            }
+            name="method"
+            initialValue="POST"
+          >
+            <Select
+              options={[
+                { label: 'GET', value: 'GET' },
+                { label: 'POST', value: 'POST' },
+                { label: 'PUT', value: 'PUT' },
+                { label: 'DELETE', value: 'DELETE' },
+                { label: 'PATCH', value: 'PATCH' },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item
+            label={
+              <TextWidget token="SettingComponents.ClickEventSetter.successMessage" />
+            }
+            name="successMessage"
+          >
+            <Input placeholder="请输入成功提示文案（可选）" />
+          </Form.Item>
+        </div>
+      ),
+    },
+    {
+      key: 'headers',
+      label: <TextWidget token="SettingComponents.RemoteDataSource.headers" />,
+      children: (
+        <div className="request-panel-section">
+          <Form.List name="headers">
+            {(fields, { add, remove }) => (
+              <>
+                {fields.map((field) => (
+                  <div key={field.key} className="request-panel-row">
+                    <Form.Item
+                      {...field}
+                      label=""
+                      style={{ marginBottom: 0 }}
+                      name={[field.name, 'key']}
+                    >
+                      <Input placeholder="Key" style={{ width: '45%' }} />
+                    </Form.Item>
+                    <span style={{ margin: '0 8px' }}>-</span>
+                    <Form.Item
+                      style={{ marginBottom: 0 }}
+                      name={[field.name, 'value']}
+                    >
+                      <Input placeholder="Value" style={{ width: '45%' }} />
+                    </Form.Item>
+                    <Button
+                      type="text"
+                      danger
+                      onClick={() => remove(field.name)}
+                      style={{ marginLeft: 8 }}
+                    >
+                      X
+                    </Button>
+                  </div>
+                ))}
+                <Button
+                  type="dashed"
+                  onClick={() => add({ key: '', value: '' })}
+                  block
+                >
+                  <TextWidget token="SettingComponents.RemoteDataSource.addHeader" />
+                </Button>
+              </>
+            )}
+          </Form.List>
+        </div>
+      ),
+    },
+    {
+      key: 'params',
+      label: <TextWidget token="SettingComponents.RemoteDataSource.params" />,
+      children: (
+        <div className="request-panel-section">
+          <Form.List name="params">
+            {(fields, { add, remove }) => (
+              <>
+                {fields.map((field) => (
+                  <div key={field.key} className="request-panel-row">
+                    <Form.Item
+                      {...field}
+                      label=""
+                      style={{ marginBottom: 0 }}
+                      name={[field.name, 'key']}
+                    >
+                      <Input placeholder="参数名" style={{ width: '45%' }} />
+                    </Form.Item>
+                    <span style={{ margin: '0 8px' }}>-</span>
+                    <Form.Item
+                      style={{ marginBottom: 0 }}
+                      name={[field.name, 'value']}
+                    >
+                      <Input placeholder="表单字段" style={{ width: '45%' }} />
+                    </Form.Item>
+                    <Button
+                      type="text"
+                      danger
+                      onClick={() => remove(field.name)}
+                      style={{ marginLeft: 8 }}
+                    >
+                      X
+                    </Button>
+                  </div>
+                ))}
+                <Button
+                  type="dashed"
+                  onClick={() => add({ key: '', field: '' })}
+                  block
+                >
+                  <TextWidget token="SettingComponents.RemoteDataSource.addParam" />
+                </Button>
+              </>
+            )}
+          </Form.List>
+        </div>
+      ),
+    },
+    {
+      key: 'handlers',
+      label: <TextWidget token="SettingComponents.RemoteDataSource.handlers" />,
+      children: (
+        <div className="request-panel-section">
+          <Form.Item
+            label={
+              <TextWidget token="SettingComponents.RemoteDataSource.beforeRequest" />
+            }
+            name="beforeRequest"
+          >
+            <MonacoInput
+              language="javascript.expression"
+              height={120}
+              helpLink={false}
+            />
+          </Form.Item>
+          <Form.Item
+            label={
+              <TextWidget token="SettingComponents.RemoteDataSource.dataHandler" />
+            }
+            name="dataHandler"
+          >
+            <MonacoInput
+              language="javascript.expression"
+              height={120}
+              helpLink={false}
+            />
+          </Form.Item>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="request-panel">
+      <Tabs items={tabsItems} defaultActiveKey="basic" size="small" />
+    </div>
+  )
+}

package/playground/components/ClickEventSetter/index.tsx

@@ -0,0 +1,90 @@
+import React, { Fragment, useState, useMemo } from 'react'
+import { Modal, Button } from 'antd'
+import { usePrefix, TextWidget } from '@formily-design/react'
+import { IEventAction, IEventConfig } from './types'
+import { ActionList } from './ActionList'
+import { ActionConfigModal } from './ActionConfigModal'
+import './styles.less'
+
+export interface IClickEventSetterProps {
+  className?: string
+  style?: React.CSSProperties
+  onChange: (value: IEventConfig) => void
+  value?: IEventConfig
+}
+
+export const ClickEventSetter: React.FC<IClickEventSetterProps> = (props) => {
+  const { value, onChange } = props
+  const prefix = usePrefix('click-event-setter')
+  const [modalVisible, setModalVisible] = useState(false)
+  const [editingAction, setEditingAction] = useState<IEventAction | null>(null)
+  const [editingIndex, setEditingIndex] = useState<number>(-1)
+
+  const actions = useMemo(() => value?.actions || [], [value])
+
+  const openModal = () => setModalVisible(true)
+  const closeModal = () => {
+    setModalVisible(false)
+    setEditingAction(null)
+    setEditingIndex(-1)
+  }
+
+  const handleEditAction = (action: IEventAction, index: number) => {
+    setEditingAction(action)
+    setEditingIndex(index)
+    setModalVisible(true)
+  }
+
+  const handleDeleteAction = (index: number) => {
+    const newActions = [...actions]
+    newActions.splice(index, 1)
+    onChange({ actions: newActions })
+  }
+
+  const handleSaveAction = (action: IEventAction) => {
+    const newActions = [...actions]
+    if (editingIndex >= 0) {
+      newActions[editingIndex] = action
+    } else {
+      newActions.push(action)
+    }
+    onChange({ actions: newActions })
+    closeModal()
+  }
+
+  return (
+    <Fragment>
+      <div className={`${prefix}-container`}>
+        <Button block onClick={openModal} className={`${prefix}-trigger`}>
+          <TextWidget token="SettingComponents.ClickEventSetter.configureEvents" />
+        </Button>
+        {actions.length > 0 && (
+          <ActionList
+            actions={actions}
+            onEdit={handleEditAction}
+            onDelete={handleDeleteAction}
+          />
+        )}
+      </div>
+      <Modal
+        title={
+          <TextWidget token="SettingComponents.ClickEventSetter.configureEvents" />
+        }
+        width={700}
+        styles={{ body: { padding: 10 } }}
+        transitionName=""
+        maskTransitionName=""
+        open={modalVisible}
+        onCancel={closeModal}
+        footer={null}
+        destroyOnClose
+      >
+        <ActionConfigModal
+          editingAction={editingAction}
+          onSave={handleSaveAction}
+          onCancel={closeModal}
+        />
+      </Modal>
+    </Fragment>
+  )
+}

package/playground/components/ClickEventSetter/styles.less

@@ -0,0 +1,89 @@
+// @click-event-setter-prefix: ~'click-event-setter';
+@click-event-setter-prefix: 'dn-click-event-setter';
+
+.dn-click-event-setter-container {
+  width: 100%;
+}
+
+.dn-click-event-setter-trigger {
+  margin-bottom: 8px;
+}
+
+/* Action List Styles */
+.click-event-action-list {
+  width: 100%;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+
+  .click-event-action-item {
+    padding: 4px;
+    border-bottom: 1px solid #f0f0f0;
+    word-break: break-all;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .ant-list-item-action {
+      margin-inline-start: 0;
+    }
+
+    .click-event-action-title {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+
+      .click-event-action-description {
+        color: #666;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 300px;
+      }
+    }
+  }
+}
+
+/* Action Config Modal Styles */
+.action-config-modal {
+  .action-config-basic {
+    padding: 8px 0;
+  }
+
+  .action-config-panel {
+    padding: 8px 0;
+  }
+
+  .action-config-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+/* Request Panel Styles */
+.request-panel {
+  &-section {
+    padding: 8px 0;
+  }
+
+  &-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+}
+
+/* Navigation Panel Styles */
+.navigation-panel {
+  padding: 8px 0;
+}
+
+/* Download Panel Styles */
+.download-panel {
+  padding: 8px 0;
+}

package/playground/components/ClickEventSetter/types.ts

@@ -0,0 +1,43 @@
+// 事件动作类型
+export type EventActionType = 'navigation' | 'request' | 'download'
+
+// 事件配置结构
+export interface IEventConfig {
+  actions: IEventAction[]
+}
+
+// 单个事件动作基础接口
+export interface IEventActionBase {
+  id: string
+  type: EventActionType
+  description?: string
+}
+
+// 页面跳转动作
+export interface INavigationAction extends IEventActionBase {
+  type: 'navigation'
+  url: string
+  target?: '_blank' | '_self'
+}
+
+// 服务请求动作
+export interface IRequestAction extends IEventActionBase {
+  type: 'request'
+  url: string
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+  headers?: Record<string, string>
+  params?: Record<string, string>
+  beforeRequest?: string
+  dataHandler?: string
+  successMessage?: string
+  dataKey?: string
+}
+
+// 下载文件动作
+export interface IDownloadAction extends IEventActionBase {
+  type: 'download'
+  url: string
+}
+
+// 联合类型
+export type IEventAction = INavigationAction | IRequestAction | IDownloadAction

package/playground/components/FormButton/FormButton.tsx

@@ -0,0 +1,189 @@
+import React from 'react'
+import { DnFC } from '@formily-design/react'
+import { Button as AntButton, ButtonProps } from 'antd'
+import { Reset, Submit } from '@formily/antd-v5'
+import { useForm, observer, useExpressionScope } from '@formily/react'
+import { IEventAction } from '../ClickEventSetter/types'
+import {
+  useEventActionExecutor,
+  hasActionOfType,
+} from './hooks/useEventActionExecutor'
+
+interface IFormButtonSetterProps {
+  /** 是否禁用表单验证 */
+  noValidate?: boolean
+  /** 事件配置 */
+  onEvent?: {
+    /** 点击事件配置 */
+    click?: {
+      /** 点击事件动作列表 */
+      actions: IEventAction[]
+    }
+  }
+}
+
+export interface IFormButtonProps extends IFormButtonSetterProps, ButtonProps {
+  onClick?: (e: React.MouseEvent<Element, MouseEvent>) => void
+  title?: string
+}
+
+export const FormButton: DnFC<IFormButtonProps> = (props: IFormButtonProps) => {
+  const { htmlType } = props
+
+  if (htmlType === 'reset')
+    return <ResetButton {...props}>{props.title}</ResetButton>
+  if (htmlType === 'submit')
+    return <SubmitButton {...props}>{props.title}</SubmitButton>
+  return <Button {...props}>{props.title}</Button>
+}
+
+/**
+ * 获取点击事件动作列表
+ */
+function getClickActions(
+  onEvent?: IFormButtonSetterProps['onEvent']
+): IEventAction[] | undefined {
+  return onEvent?.click?.actions
+}
+
+/**
+ * 重置
+ * 为什么使用 observer 包裹？
+ * 因为 useForm() 获取的 form 实例是响应式的，observer 可以确保组件在 form 状态变化时重新渲染。使用 connect 或 observer 都可以达到这个目的。
+ * https://react.formilyjs.org/zh-CN/api/shared/observer
+ */
+const ResetButton = observer(
+  ({
+    children,
+    onEvent,
+    ...props
+  }: React.ComponentProps<typeof Reset> & IFormButtonSetterProps) => {
+    const form = useForm()
+    const actions = getClickActions(onEvent)
+    const { execute: executeEvents, executing } = useEventActionExecutor(
+      actions,
+      form
+    )
+
+    const handleClick = async () => {
+      if (actions && actions.length > 0) {
+        await executeEvents()
+      }
+      // 执行表单重置
+      form.reset()
+    }
+
+    return (
+      <Reset
+        {...props}
+        htmlType="button"
+        loading={executing}
+        onClick={handleClick}
+      >
+        {children}
+      </Reset>
+    )
+  }
+)
+
+/** 提交 */
+const SubmitButton = observer(
+  ({
+    children,
+    noValidate,
+    onEvent,
+    ...props
+  }: React.ComponentProps<typeof Submit> & IFormButtonSetterProps) => {
+    const form = useForm()
+    const actions = getClickActions(onEvent)
+    const hasRequestAction = hasActionOfType(actions, 'request')
+    const { execute: executeEvents, executing } = useEventActionExecutor(
+      actions,
+      form
+    )
+    // useExpressionScope 读取表达式作用域，获取表单配置的提交 API submitFormApi
+    const { submitFormApi, apiParams } = useExpressionScope()
+    const handleClick = async () => {
+      if (noValidate) {
+        // 获取表单值
+        const values = form.values
+        // 手动更新表单状态为提交中
+        form.setSubmitting(true)
+        try {
+          if (hasRequestAction) {
+            // 有 request 动作时，仅执行事件动作，不执行表单提交
+            await executeEvents(values, apiParams)
+          } else if (actions && actions.length > 0) {
+            // 有事件但无 request 动作时，先执行事件再提交
+            await executeEvents(values, apiParams)
+            await doSubmit(values)
+          } else {
+            // 无事件配置时，直接提交
+            await doSubmit(values)
+          }
+        } finally {
+          form.setSubmitting(false)
+        }
+      } else {
+        form.submit(async (values) => {
+          if (hasRequestAction) {
+            // 有 request 动作时，仅执行事件动作，不执行表单提交
+            await executeEvents(values, apiParams)
+          } else if (actions && actions.length > 0) {
+            // 有事件但无 request 动作时，先执行事件再提交
+            await executeEvents(values, apiParams)
+            await doSubmit(values)
+          } else {
+            // 无事件配置时，直接提交
+            await doSubmit(values)
+          }
+        })
+      }
+    }
+
+    /** 表单提交 - 执行 form 配置的 API */
+    const doSubmit = async (values: Record<string, any>) => {
+      await submitFormApi?.(values)
+    }
+    return (
+      <Submit
+        {...props}
+        htmlType="button"
+        loading={executing || form.submitting}
+        onClick={handleClick}
+      >
+        {children}
+      </Submit>
+    )
+  }
+)
+
+/** 按钮 */
+const Button = observer(
+  ({
+    children,
+    onEvent,
+    ...props
+  }: React.ComponentProps<typeof AntButton> & IFormButtonSetterProps) => {
+    const form = useForm()
+    const actions = getClickActions(onEvent)
+    // useExpressionScope 读取表达式作用域
+    const { apiParams } = useExpressionScope()
+    const { execute: executeEvents, executing } = useEventActionExecutor(
+      actions,
+      form
+    )
+
+    const handleClick = async () => {
+      if (actions && actions.length > 0) {
+        await executeEvents(form.values, apiParams)
+      }
+    }
+
+    return (
+      <AntButton {...props} loading={executing} onClick={handleClick}>
+        {children}
+      </AntButton>
+    )
+  }
+)

package/playground/components/FormButton/hooks/useEventActionExecutor.ts

@@ -0,0 +1,65 @@
+import { useState, useCallback } from 'react'
+import { IEventAction } from '../../ClickEventSetter/types'
+import { executeActions } from '../utils/actionExecutors'
+import { Form } from '@formily/core'
+
+interface UseEventActionExecutorOptions {
+  onComplete?: () => void
+  onError?: (error: Error) => void
+}
+
+interface UseEventActionExecutorReturn {
+  executing: boolean
+  execute: (
+    formValues?: Record<string, any>,
+    apiParams?: Record<string, any>
+  ) => Promise<void>
+}
+
+export function useEventActionExecutor(
+  actions: IEventAction[] | undefined,
+  form: Form,
+  options?: UseEventActionExecutorOptions
+): UseEventActionExecutorReturn {
+  const [executing, setExecuting] = useState(false)
+
+  const execute = useCallback(
+    async (
+      formValues?: Record<string, any>,
+      apiParams?: Record<string, any>
+    ) => {
+      if (!actions || actions.length === 0) {
+        return
+      }
+      setExecuting(true)
+      try {
+        await executeActions(actions, formValues, apiParams, (error, index) => {
+          console.error(`动作 ${index + 1} 执行失败:`, error)
+        })
+        options?.onComplete?.()
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error))
+        options?.onError?.(err)
+      } finally {
+        setExecuting(false)
+      }
+    },
+    [actions, form, options]
+  )
+
+  return {
+    executing,
+    execute,
+  }
+}
+
+/**
+ * 检查动作配置中是否包含指定类型的动作
+ */
+export function hasActionOfType(
+  actions: IEventAction[] | undefined,
+  type: string
+): boolean {
+  if (!actions) return false
+  return actions.some((action) => action.type === type)
+}

package/playground/components/FormButton/index.ts

@@ -0,0 +1 @@
+export * from './preview'