@formily-design/formily-antd 1.0.0

package/playground/main.tsx

@@ -0,0 +1,222 @@
+import React, { useMemo } from 'react'
+import ReactDOM from 'react-dom/client'
+import {
+  Designer,
+  DesignerToolsWidget,
+  ViewToolsWidget,
+  Workspace,
+  OutlineTreeWidget,
+  ResourceWidget,
+  HistoryWidget,
+  StudioPanel,
+  CompositePanel,
+  WorkspacePanel,
+  ToolbarPanel,
+  ViewportPanel,
+  ViewPanel,
+  SettingsPanel,
+  ComponentTreeWidget,
+} from '@formily-design/react'
+import {
+  SettingsForm,
+  setNpmCDNRegistry,
+} from '@formily-design/react-settings-form'
+import { createDesigner, Shortcut, KeyCode } from '@formily-design/core'
+import {
+  LogoWidget,
+  ActionsWidget,
+  PreviewWidget,
+  SchemaEditorWidget,
+  MarkupSchemaWidget,
+} from './widgets'
+import { saveSchema } from './service'
+import {
+  Form,
+  Field,
+  Input,
+  Select,
+  TreeSelect,
+  Cascader,
+  Radio,
+  Checkbox,
+  Slider,
+  Rate,
+  NumberPicker,
+  Transfer,
+  Password,
+  DatePicker,
+  TimePicker,
+  Upload,
+  Switch,
+  Text,
+  Card,
+  ArrayCards,
+  ObjectContainer,
+  ArrayTable,
+  Space,
+  FormTab,
+  FormCollapse,
+  FormLayout,
+  FormGrid,
+  // FormButtonGroup,
+  // FormButton,
+} from '../src'
+import { AsyncSelect } from './components/AsyncSelect'
+import { FormButtonGroup } from './components/FormButtonGroup'
+import { FormButton } from './components/FormButton'
+import { LocationPicker } from './components/LocationPicker'
+import { FormList } from './components/FormList'
+import './designerLocales'
+
+setNpmCDNRegistry('//unpkg.com')
+
+const App = () => {
+  const engine = useMemo(
+    () =>
+      createDesigner({
+        shortcuts: [
+          new Shortcut({
+            codes: [
+              [KeyCode.Meta, KeyCode.S],
+              [KeyCode.Control, KeyCode.S],
+            ],
+            handler(ctx) {
+              saveSchema(ctx.engine)
+            },
+          }),
+        ],
+        rootComponentName: 'Form',
+      }),
+    []
+  )
+  return (
+    <Designer engine={engine} position="fixed" style={{ height: '100%' }}>
+      <StudioPanel
+        logo={<LogoWidget />}
+        actions={<ActionsWidget />}
+        style={{ height: '100%' }}
+      >
+        <CompositePanel>
+          <CompositePanel.Item title="panels.Component" icon="Component">
+            <ResourceWidget
+              title="sources.Inputs"
+              sources={[
+                Input,
+                Password,
+                NumberPicker,
+                Rate,
+                Slider,
+                Select,
+                TreeSelect,
+                Cascader,
+                Transfer,
+                Checkbox,
+                Radio,
+                DatePicker,
+                TimePicker,
+                Upload,
+                Switch,
+                ObjectContainer,
+                AsyncSelect,
+                FormButtonGroup,
+                FormButton,
+                LocationPicker,
+                FormList,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Layouts"
+              sources={[
+                Card,
+                FormGrid,
+                FormTab,
+                FormLayout,
+                FormCollapse,
+                Space,
+              ]}
+            />
+            <ResourceWidget
+              title="sources.Arrays"
+              sources={[ArrayCards, ArrayTable]}
+            />
+            <ResourceWidget title="sources.Displays" sources={[Text]} />
+          </CompositePanel.Item>
+          <CompositePanel.Item title="panels.OutlinedTree" icon="Outline">
+            <OutlineTreeWidget />
+          </CompositePanel.Item>
+          <CompositePanel.Item title="panels.History" icon="History">
+            <HistoryWidget />
+          </CompositePanel.Item>
+        </CompositePanel>
+        <Workspace id="form">
+          <WorkspacePanel>
+            <ToolbarPanel>
+              <DesignerToolsWidget />
+              <ViewToolsWidget
+                use={['DESIGNABLE', 'JSONTREE', 'MARKUP', 'PREVIEW']}
+              />
+            </ToolbarPanel>
+            <ViewportPanel style={{ height: '100%' }}>
+              <ViewPanel type="DESIGNABLE">
+                {() => (
+                  <ComponentTreeWidget
+                    components={{
+                      Form,
+                      Field,
+                      Input,
+                      Select,
+                      TreeSelect,
+                      Cascader,
+                      Radio,
+                      Checkbox,
+                      Slider,
+                      Rate,
+                      NumberPicker,
+                      Transfer,
+                      Password,
+                      DatePicker,
+                      TimePicker,
+                      Upload,
+                      Switch,
+                      Text,
+                      Card,
+                      ArrayCards,
+                      ArrayTable,
+                      Space,
+                      FormTab,
+                      FormCollapse,
+                      FormGrid,
+                      FormLayout,
+                      ObjectContainer,
+                      AsyncSelect,
+                      FormButtonGroup,
+                      FormButton,
+                      LocationPicker,
+                      FormList,
+                    }}
+                  />
+                )}
+              </ViewPanel>
+              <ViewPanel type="JSONTREE" scrollable={false}>
+                {(tree, onChange) => (
+                  <SchemaEditorWidget tree={tree} onChange={onChange} />
+                )}
+              </ViewPanel>
+              <ViewPanel type="MARKUP" scrollable={false}>
+                {(tree) => <MarkupSchemaWidget tree={tree} />}
+              </ViewPanel>
+              <ViewPanel type="PREVIEW">
+                {(tree) => <PreviewWidget tree={tree} />}
+              </ViewPanel>
+            </ViewportPanel>
+          </WorkspacePanel>
+        </Workspace>
+        <SettingsPanel title="panels.PropertySettings">
+          <SettingsForm uploadAction="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
+        </SettingsPanel>
+      </StudioPanel>
+    </Designer>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

package/playground/react-app-env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

package/playground/request.ts

@@ -0,0 +1,123 @@
+/**
+ * 公共请求方法封装
+ */
+
+interface RequestOptions extends RequestInit {
+  /** 请求基础路径 */
+  baseUrl?: string
+  /** 请求路径 */
+  url: string
+  /** URL 参数 */
+  params?: Record<string, string | number | boolean | undefined | null>
+  /** 请求体数据 */
+  data?: unknown
+}
+
+export interface ResponseResult<T = unknown> {
+  code: number
+  data: T
+  message?: string
+}
+
+/**
+ * 构建 URL 查询参数
+ */
+function buildQueryString(
+  params: Record<string, string | number | boolean | undefined | null>
+): string {
+  const searchParams = new URLSearchParams()
+  Object.entries(params).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      searchParams.append(key, String(value))
+    }
+  })
+  return searchParams.toString()
+}
+
+/**
+ * 公共请求方法
+ * @param options 请求配置
+ * @returns Promise< ResponseResult<T> >
+ */
+export async function request<T = unknown>(
+  options: RequestOptions
+): Promise<ResponseResult<T>> {
+  const { baseUrl = '', url, params, data, headers, ...init } = options
+
+  // 构建完整 URL
+  let fullUrl = `${baseUrl}${url}`
+  if (params) {
+    const queryString = buildQueryString(params)
+    fullUrl += `?${queryString}`
+  }
+
+  // 设置默认请求头
+  const defaultHeaders: HeadersInit = {
+    'Content-Type': 'application/json',
+    ...headers,
+  }
+
+  // 构建请求配置
+  const requestOptions: RequestInit = {
+    ...init,
+    headers: defaultHeaders,
+  }
+
+  // 处理请求体
+  if (data) {
+    // 处理 FormData
+    if (data instanceof FormData) {
+      requestOptions.body = data
+      const headers = requestOptions.headers as
+        | Record<string, string>
+        | undefined
+      // 移除 Content-Type，避免 FormData 数据错误
+      if (headers?.['Content-Type']) {
+        delete headers['Content-Type']
+        requestOptions.headers = headers
+      }
+    } else {
+      requestOptions.body = JSON.stringify(data)
+    }
+  }
+
+  // 发起请求
+  const response = await fetch(fullUrl, requestOptions)
+
+  // 解析响应
+  const result: ResponseResult<T> = await response.json()
+
+  // 处理业务错误
+  // if (!response.ok || result.code !== 0) {
+  //   throw new Error(result.message || '请求失败')
+  // }
+
+  return result
+}
+
+/**
+ * GET 请求
+ */
+export function get<T = unknown>(
+  url: string,
+  params?: RequestOptions['params'],
+  options?: Omit<RequestOptions, 'url' | 'params' | 'method'>
+): Promise<ResponseResult<T>> {
+  return request<T>({ ...options, url, params, method: 'GET' })
+}
+
+/**
+ * POST 请求
+ */
+export function post<T = unknown>(
+  url: string,
+  data?: RequestOptions['data'],
+  options?: Omit<RequestOptions, 'url' | 'data'>
+): Promise<ResponseResult<T>> {
+  return request<T>({
+    ...options,
+    url,
+    data,
+    method: options?.method || 'POST',
+  })
+}

package/playground/schemas/FormButton.ts

@@ -0,0 +1,42 @@
+import { ISchema } from '@formily/react'
+
+export const FormButton: ISchema = {
+  type: 'object',
+  properties: {
+    title: {
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+      'x-component-props': {
+        defaultValue: '按钮',
+      },
+    },
+    type: {
+      type: 'string',
+      enum: ['primary', 'default', 'dashed', 'link', 'text'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        defaultValue: 'default',
+      },
+    },
+    htmlType: {
+      type: 'string',
+      enum: ['submit', 'reset', 'button'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Radio.Group',
+      'x-component-props': {
+        defaultValue: 'button',
+        optionType: 'button',
+      },
+    },
+    noValidate: {
+      type: 'boolean',
+      'x-decorator': 'FormItem',
+      'x-component': 'Switch',
+      'x-component-props': {
+        defaultValue: false,
+      },
+    },
+  },
+}

package/playground/schemas/FormButtonGroup.ts

@@ -0,0 +1,24 @@
+import { ISchema } from '@formily/react'
+
+export const FormButtonGroup: ISchema = {
+  type: 'object',
+  properties: {
+    gutter: {
+      type: 'number',
+      'x-decorator': 'FormItem',
+      'x-component': 'NumberPicker',
+      'x-component-props': {
+        defaultValue: 8,
+      },
+    },
+    align: {
+      type: 'string',
+      enum: ['left', 'center', 'right'],
+      'x-decorator': 'FormItem',
+      'x-component': 'Select',
+      'x-component-props': {
+        defaultValue: 'left',
+      },
+    },
+  },
+}

package/playground/schemas/LocationPicker.ts

@@ -0,0 +1,14 @@
+import { ISchema } from '@formily/react'
+import { AllSchemas } from '@formily-design/formily-antd'
+
+export const LocationPicker: ISchema = {
+  type: 'object',
+  properties: {
+    ...(AllSchemas.Input.properties as any),
+    mapApiKey: {
+      type: 'string',
+      'x-decorator': 'FormItem',
+      'x-component': 'Input',
+    },
+  },
+}

package/playground/schemas/all.ts

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

package/playground/schemas/index.ts

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

package/playground/service/index.ts

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

package/playground/service/schema.ts

@@ -0,0 +1,22 @@
+import { Engine } from '@formily-design/core'
+import {
+  transformToSchema,
+  transformToTreeNode,
+} from '@formily-design/formily-transformer'
+import { message } from 'antd'
+
+export const saveSchema = (designer: Engine) => {
+  localStorage.setItem(
+    'formily-schema',
+    JSON.stringify(transformToSchema(designer.getCurrentTree()))
+  )
+  message.success('Save Success')
+}
+
+export const loadInitialSchema = (designer: Engine) => {
+  try {
+    designer.setCurrentTree(
+      transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')))
+    )
+  } catch {}
+}

package/playground/template.ejs

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<head>
+  <title>
+    Designable Playground
+  </title>
+  <style>
+    html,body{
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  </style>
+</head>
+<body>
+  <div id="root">
+  </div>
+<!--  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>-->
+<!--  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>-->
+<!--  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>-->
+<!--  <script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>-->
+</body>