Merge pull request #2 from formily/v1.0.0

V1.0.0
formily · Mar 21, 2024 · 6b76a9f · 6b76a9f
2 parents 73f98f3 + 57d1fcb
commit 6b76a9f
Show file tree

Hide file tree

Showing 164 changed files with 16,132 additions and 23,050 deletions.
diff --git a/formily/antd/package.json b/formily/antd/package.json
@@ -63,7 +63,9 @@
     "@designable/core": "1.0.0-beta.45",
     "@designable/formily-setters": "1.0.0-beta.45",
     "@designable/formily-transformer": "1.0.0-beta.45",
-    "@designable/react": "1.0.0-beta.45"
+    "@designable/react": "1.0.0-beta.45",
+    "axios": "^1.6.7",
+    "clean-webpack-plugin": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/formily/antd/playground/service/schema.ts b/formily/antd/playground/service/schema.ts
@@ -4,29 +4,70 @@ import {
   transformToTreeNode,
 } from '@designable/formily-transformer'
 import { message } from 'antd'
+import axios from 'axios'
 
-export const saveSchema = (designer: Engine) => {
+const isProduction = process.env.NODE_ENV === 'production'
+
+const BASE_URL = isProduction
+  ? 'https://api.formily.top'
+  : 'http://127.0.0.1:5000'
+export const saveSchema = async (designer: Engine, isPublish: boolean) => {
   let queryParams = Object.fromEntries(new URLSearchParams(location.search))
   let { bid } = queryParams
   if (!bid) {
     message.warning('url 异常，缺少 id 参数')
     return
   }
-  let formilySchema = JSON.stringify(
+  let formilySchemaConfig = JSON.stringify(
     transformToSchema(designer.getCurrentTree())
   )
-  console.log('formily-schema', formilySchema)
-  localStorage.setItem(
-    'formily-schema',
-    JSON.stringify(transformToSchema(designer.getCurrentTree()))
-  )
+  console.log('formily-schema', bid, formilySchemaConfig)
+
+  try {
+    const res = await axios.post(`${BASE_URL}/configList/update`, {
+      bid,
+      config: formilySchemaConfig,
+    })
+    console.log('res', res)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    // loading = false
+  }
+
+  // if (isPublish) {
+  //   // 发布版本
+  // } else {
+  //   // 保存到当前版本
+
+  // }
+  // localStorage.setItem(
+  //   'formily-schema',
+  //   JSON.stringify(transformToSchema(designer.getCurrentTree()))
+  // )
   message.success('Save Success')
 }
 
-export const loadInitialSchema = (designer: Engine) => {
+// 初始化低代码内容
+export const loadInitialSchema = async (designer: Engine) => {
+  const params = Object.fromEntries(new URLSearchParams(window.location.search))
+  const { bid } = params
+  if (!bid) {
+    return
+  }
   try {
-    designer.setCurrentTree(
-      transformToTreeNode(JSON.parse(localStorage.getItem('formily-schema')))
-    )
-  } catch {}
+    const res = await axios.get(`${BASE_URL}/configList/detail/${bid}`)
+    console.log('res /configList/detail/', res)
+    if (res.data.code === 0) {
+      let schemaConfig = res?.data?.data?.config
+      designer.setCurrentTree(transformToTreeNode(JSON.parse(schemaConfig)))
+      // localStorage.getItem('formily-schema')
+    } else {
+      message.warning(res?.data?.msg || '获取配置异常')
+    }
+  } catch (e) {
+    console.log(e)
+  } finally {
+    // loading = false
+  }
 }
diff --git a/formily/antd/playground/template.ejs b/formily/antd/playground/template.ejs
@@ -17,9 +17,20 @@
 </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>
   <script src="https://unpkg.com/antd@4.15.2/dist/antd.min.js"></script>
+  <script src="
+  https://cdn.jsdelivr.net/npm/@ant-design/icons@4.8.0/dist/index.umd.min.js
+  "></script>
+-->
+  <script src="http://cdn.zuo11.com/lib/moment-with-locales.js"></script>
+  <script src="http://cdn.zuo11.com/lib/react.production.min.js"></script>
+  <script src="http://cdn.zuo11.com/lib/react-dom.production.min.js"></script>
+  <script src="http://cdn.zuo11.com/lib/antd-with-locales.min.js"></script>
+  <script src="http://cdn.zuo11.com/lib/antd.min.js"></script>
+  <script src="http://cdn.zuo11.com/lib/ant-design-icons-4.8.0.index.umd.min.js"></script>
 </body>
diff --git a/formily/antd/playground/webpack.base.ts b/formily/antd/playground/webpack.base.ts
@@ -48,6 +48,9 @@ export default {
     'react-dom': 'ReactDOM',
     moment: 'moment',
     antd: 'antd',
+    // 使用 externals 配置将 Ant Design Icons 指定为外部依赖，不进行打包处理。这样，在运行时会从 CDN 加载 Ant Design Icons。
+    '@ant-design/icons': 'icons', // 这里假设从 CDN 加载的全局变量为 'icon'
+    // 'monaco-editor': 'monaco' // 这里假设从CDN加载的全局变量为'monaco'
   },
   module: {
     rules: [

diff --git a/formily/antd/playground/webpack.prod.ts b/formily/antd/playground/webpack.prod.ts
@@ -1,16 +1,19 @@
 import baseConfig from './webpack.base'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
-import MonacoPlugin from 'monaco-editor-webpack-plugin'
+// import MonacoPlugin from 'monaco-editor-webpack-plugin' // 注释后可以减少编辑器体积
 import path from 'path'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import TerserPlugin from 'terser-webpack-plugin'
 
 const createPages = (pages) => {
   return pages.map(({ filename, template, chunk }) => {
     return new HtmlWebpackPlugin({
       filename,
       template,
       inject: 'body',
-      chunks: chunk,
+      // chunks: chunk,
     })
   })
 }
@@ -19,6 +22,8 @@ export default {
   ...baseConfig,
   mode: 'production',
   plugins: [
+    new CleanWebpackPlugin(),
+    new BundleAnalyzerPlugin(),
     new MiniCssExtractPlugin({
       filename: '[name].[hash].css',
       chunkFilename: '[id].[hash].css',
@@ -30,11 +35,94 @@ export default {
         chunk: ['playground'],
       },
     ]),
-    new MonacoPlugin({
-      languages: ['json'],
-    }),
+    // new MonacoPlugin({
+    //   languages: ['json'],
+    // }),
   ],
+  externals: {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    moment: 'moment',
+    antd: 'antd',
+    // 使用 externals 配置将 Ant Design Icons 指定为外部依赖，不进行打包处理。这样，在运行时会从 CDN 加载 Ant Design Icons。
+    '@ant-design/icons': 'icons', // 这里假设从 CDN 加载的全局变量为 'icon'
+    // 'monaco-editor': 'monaco' // 这里假设从CDN加载的全局变量为'monaco'
+
+    // '@formily/reactive': 'Formily.Reactive',
+    // '@formily/path': 'Formily.Path',
+    // '@formily/shared': 'Formily.Shared',
+    // '@formily/validator': 'Formily.Validator',
+    // '@formily/core': 'Formily.Core',
+    // '@formily/json-schema': 'Formily.JSONSchema',
+    // '@formily/react': 'Formily.React',
+    // '@designable/shared': 'Designable.Shared',
+    // '@designable/core': 'Designable.Core',
+  },
   optimization: {
     minimize: true,
+    // size 2M => 400k config
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            comparisons: false,
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          keep_classnames: true,
+          keep_fnames: true,
+          output: {
+            ecma: 5,
+            comments: false,
+            ascii_only: true,
+          },
+        },
+      }),
+    ],
+    // splitChunks: {
+    //   chunks: 'all',
+    //   // }
+    //   splitChunks: {
+    //     // 表示选择哪些 chunks 进行分割，可选值有：async，initial和all
+    //     chunks: "async",
+    //     // 表示新分离出的chunk必须大于等于minSize，默认为30000，约30kb。
+    //     minSize: 30000,
+    //     maxSize: 1000000,
+    //     // 表示一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
+    //     minChunks: 1,
+    //     // 表示按需加载文件时，并行请求的最大数目。默认为5。
+    //     maxAsyncRequests: 5,
+    //     // 表示加载入口文件时，并行请求的最大数目。默认为3。
+    //     maxInitialRequests: 3,
+    //     // 表示拆分出的chunk的名称连接符。默认为~。如chunk~vendors.js
+    //     automaticNameDelimiter: '~',
+    //     // 设置chunk的文件名。默认为true。当为true时，splitChunks基于chunk和cacheGroups的key自动命名。
+    //     name: true,
+    //     // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块，就分配到该组。模块可以被多个组引用，但最终会根据priority来决定打包到哪个组中。默认将所有来自 node_modules目录的模块打包至vendors组，将两个以上的chunk所共享的模块打包至default组。
+    //     cacheGroups: {
+    //         vendors: {
+    //             test: /[\\/]node_modules[\\/]/,
+    //             priority: -10
+    //         },
+    //         //
+    //     default: {
+    //             minChunks: 2,
+    //             priority: -20,
+    //             reuseExistingChunk: true
+    //         }
+    //     }
+    // }
+
+    // // 作者：前端论道
+    // // 链接：https://juejin.cn/post/6844904103848443912
+    // // 来源：稀土掘金
+    // // 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
   },
 }
diff --git a/formily/antd/playground/widgets/ActionsWidget.tsx b/formily/antd/playground/widgets/ActionsWidget.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { Space, Button, Radio } from 'antd'
-import { GithubOutlined } from '@ant-design/icons'
+// import { GithubOutlined } from '@ant-design/icons'
 import { useDesigner, TextWidget } from '@designable/react'
 import { GlobalRegistry } from '@designable/core'
 import { observer } from '@formily/react'
@@ -38,17 +38,17 @@ export const ActionsWidget = observer(() => {
         <GithubOutlined />
         Github
       </Button> */}
-      <Button
+      {/* <Button
         onClick={() => {
-          saveSchema(designer)
+          saveSchema(designer, false)
         }}
       >
         <TextWidget>Save</TextWidget>
-      </Button>
+      </Button> */}
       <Button
         type="primary"
         onClick={() => {
-          saveSchema(designer)
+          saveSchema(designer, true)
         }}
       >
         <TextWidget>Publish</TextWidget>

diff --git a/formily/antd/playground/widgets/LogoWidget.tsx b/formily/antd/playground/widgets/LogoWidget.tsx
@@ -8,13 +8,17 @@ const logo = {
 }
 
 export const LogoWidget: React.FC = () => {
-  const url = logo[useTheme()]
+  const url = 'http://cdn.zuo11.com/imgs/avatar.jpg'
+  // logo[useTheme()]
   return (
     <div style={{ display: 'flex', alignItems: 'center', fontSize: 14 }}>
-      <img
-        src={url}
-        style={{ margin: '12px 8px', height: 18, width: 'auto' }}
-      />
+      <div>
+        <img
+          src={url}
+          style={{ margin: '12px 8px', height: 18, width: 'auto' }}
+        />
+        Formily 低代码设计器
+      </div>
     </div>
   )
 }
diff --git a/formily/next/.npmignore b/formily/next/.npmignore
diff --git a/formily/next/.umirc.js b/formily/next/.umirc.js
diff --git a/formily/next/LICENSE.md b/formily/next/LICENSE.md
diff --git a/formily/next/README.md b/formily/next/README.md