Merge pull request #1 from charlzyx/core

feat: 🎸 v4/v5 双UI 适配
charlzyx · Jan 15, 2024 · 6177ae9 · 6177ae9
2 parents ee97e81 + 37645b5
commit 6177ae9
Show file tree

Hide file tree

Showing 40 changed files with 356 additions and 166 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 doc_build
+src/adaptor
+src/adaptor/
diff --git a/bun.lockb b/bun.lockb
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -26,111 +26,3 @@ features:
     details: Through its extension mechanism, you can easily extend theme UI and build process.
     icon: 🔥
 ---
-```tsx
-/**
- * inline: true
- */
-import React from 'react';
-import {Overview} from 'proformily';
-
-// const prefix = process.env.NODE_ENV === 'development' ? '/components' : '/fireformily/components';
-// const prefixPro = process.env.NODE_ENV === 'development' ? '/pro' : '/fireformily/pro';
-const prefix = ''
-
-const groups = [
-  // {
-  //   title: '优雅阅读态组件',
-  //   prefix,
-  //   children: [
-  //     {
-  //       title: 'Dict',
-  //       subtitle: '远程词典',
-  //       cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
-  //       link: '/dict'
-  //     },
-  //     {
-  //       title: 'ImageView',
-  //       subtitle: '图片查看',
-  //       cover: 'https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg',
-  //       link: '/image-view'
-  //     },
-  //     {
-  //       title: 'LongText',
-  //       subtitle: '长文本',
-  //       cover: 'https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg',
-  //       link: '/long-text'
-  //     },
-  //   ],
-  // },
-  {
-    title: '专业级组件',
-    prefix,
-    children: [
-      {
-        title: 'ArrayTablePro',
-        subtitle: '专业列表',
-        cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
-        link: '/pro-table'
-      },
-      // {
-      //   title: 'QueryList',
-      //   subtitle: '查询列表',
-      //   cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
-      //   link: '/query-list'
-      // },
-      // {
-      //   title: 'PopActions',
-      //   subtitle: '弹窗动作表单',
-      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg',
-      //   link: '/pop-actions'
-      // },
-      // {
-      //   title: 'Linkage',
-      //   subtitle: '级联选择',
-      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg',
-      //   link: '/linkage'
-      // },
-      // {
-      //   title: 'Suggestion',
-      //   subtitle: '搜索建议',
-      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg',
-      //   link: '/suggestion'
-      // },
-      // {
-      //   title: 'TreeNodes',
-      //   subtitle: '节点树',
-      //   cover: 'https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg',
-      //   link: '/tree-nodes'
-      // },
-    ]
-  },
-  // {
-  // title: '最佳实践',
-  // prefix: prefixPro,
-  // children: [
-  //   {
-  //     title: 'Dict',
-  //     subtitle: '远程词典',
-  //     cover: 'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
-  //     link: '/dict'
-  //   },
-  //   {
-  //     title: 'TreeBase',
-  //     subtitle: '基础树',
-  //     cover: 'https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg',
-  //     link: '/tree-base'
-  //   },
-  //   {
-  //     title: '响应式编程 in React',
-  //     subtitle: 'useLive',
-  //     cover: 'https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg',
-  //     link: '/live'
-  //   },
-    // ],
-  // },
-];
-
-export default () => {
-  return <Overview groups={groups} />
-}
-```
diff --git a/docs/pro-table/demos/ArrayTablePro.tsx b/docs/pro-table/demos/ArrayTablePro.tsx
@@ -14,6 +14,7 @@ import {
 import { FormProvider, ISchema, createSchemaField } from "@formily/react";
 import { Button, ConfigProvider, Divider, Space } from "antd";
 import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
 import zhCN from "antd/lib/locale/zh_CN";
 import moment from "moment";
 import "moment/locale/zh-cn";
@@ -23,18 +24,19 @@ import {
   ArrayTablePro,
   useArrayCompPropsOf,
   useFormArrayProps,
-} from "proformily";
+} from "@proformily/antd";
 import { useEffect } from "react";
 
 const CustomeToolbar = () => {
   const array = ArrayBase.useArray!();
-  const [, $row] = useArrayCompPropsOf(array.field, "rowSelection");
+  const [, $row] = useArrayCompPropsOf(array?.field, "rowSelection");
   return (
     <Space>
       <Button
         type="primary"
         onClick={() => {
           // ok
+          if (!array) return;
           console.log(array.field.componentProps.rowSelection.selectedRowKeys);
           if (!$row) return;
           // but quick
@@ -48,23 +50,25 @@ const CustomeToolbar = () => {
 };
 const CustomeFooter = () => {
   const array = ArrayBase.useArray!();
-  const [, $page] = useArrayCompPropsOf(array.field, "pagination");
+  const [, $page] = useArrayCompPropsOf(array?.field, "pagination");
+  console.log("🚀 ~ CustomeFooter ~ $page:", $page);
   const totalPage =
     $page === false
       ? 0
       : (($page?.total || 0)! / ($page?.pageSize || 1)).toFixed(0);
   return (
     <Space>
       自定义底部
-      {$page === false ? 0 : $page!.current}/{totalPage}, 共计
-      {array.field.value.length}条数据
+      {$page === false ? 0 : $page?.current}/{totalPage}, 共计
+      {array?.field?.value?.length}条数据
     </Space>
   );
 };
 
 const RowSummary = () => {
   const row = ArrayBase.useRecord!();
-  const summary = row.a1 + row.a2 + row.a3;
+  console.log("🚀 ~ RowSummary ~ row:", row);
+  const summary = row ? "" : row.a1 + row.a2 + row.a3;
   return (
     <div
       style={{

diff --git a/docs/pro-table/demos/QueryList.tsx b/docs/pro-table/demos/QueryList.tsx
@@ -14,12 +14,13 @@ import { createForm } from "@formily/core";
 import { FormProvider, ISchema, createSchemaField } from "@formily/react";
 import { ConfigProvider, Divider } from "antd";
 import "antd/dist/antd.css";
+// import "antd/dist/antd.css";
 import zhCN from "antd/lib/locale/zh_CN";
 import moment from "moment";
 import "moment/locale/zh-cn";
 moment.locale("zh-cn");
 
-import { QueryForm, QueryList, QueryTable } from "proformily";
+import { QueryForm, QueryList, QueryTable } from "@proformily/antd";
 
 const log = (label: string, x: any) => {
   console.log("LABEL:", label);

diff --git a/package.json b/package.json
@@ -1,35 +1,38 @@
 {
-  "name": "rspress-doc-template",
+  "name": "@proformily/antd",
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "rspress dev",
-    "build:docs": "rspress build",
+    "v4": "node scripts/switch.js antd dev && rspress dev",
+    "v5": "node scripts/switch.js antd-v5 dev && rspress dev",
+    "build:docs:v4": "node scripts/switch.js antd && rspress build",
+    "build:docs:v5": "node scripts/switch.js antd-v5 && rspress build",
     "preview": "rspress preview"
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@formily/antd": "^2.3.1",
     "@formily/core": "^2.3.1",
     "@formily/react": "^2.3.1",
     "@formily/reactive": "^2.3.1",
     "@formily/shared": "^2.3.1",
     "ahooks": "^3.7.8",
-    "antd": "^4.24.15",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-resizable": "^3.0.5"
+    "react-resizable": "^3.0.5",
+    "@formily/antd": "^2.*.*",
+    "antd": "^4.*.*"
   },
   "devDependencies": {
-    "rspress": "^1.9.3",
     "@biomejs/biome": "^1.5.0",
+    "@faker-js/faker": "^8.3.1",
     "@rsbuild/plugin-react": "^0.2.18",
     "@rspress/plugin-preview": "^1.9.3",
+    "@types/node": "^16.18.70",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@types/react-resizable": "^3.0.7",
-    "@faker-js/faker": "^8.3.1",
-    "@types/node": "^16.18.70"
+    "rimraf": "^5.0.5",
+    "rspress": "^1.9.3"
   }
 }
diff --git a/rsbuild.config.ts b/rsbuild.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
   plugins: [pluginReact()],
   source: {
     alias: {
-      proformily: path.resolve(__dirname, "./src"),
+      // proformily: path.resolve(__dirname, "./src"),
     },
   },
   tools: {

diff --git a/rspress.config.ts b/rspress.config.ts
@@ -4,7 +4,7 @@ import { defineConfig } from "rspress/config";
 import RsBuildConfig from "./rsbuild.config";
 
 export default defineConfig({
-  base: "/pro.formily/",
+  base: "/proformily-antd/",
   root: path.join(__dirname, "docs"),
   title: "ProFormily",
   description: "Pro Formily, 启动!",
@@ -17,7 +17,12 @@ export default defineConfig({
   builderConfig: {
     ...RsBuildConfig,
   },
-  plugins: [pluginPreview()],
+  plugins: [
+    pluginPreview(),
+    () => {
+      require("./scripts/patch.js");
+    },
+  ],
   themeConfig: {
     socialLinks: [
       {

diff --git a/scripts/patch.js b/scripts/patch.js
@@ -0,0 +1,26 @@
+const path = require("path");
+const fs = require("fs");
+
+const cssPath = path.resolve(
+  __dirname,
+  "../node_modules/@rspress/theme-default/dist/bundle.css",
+);
+
+if (fs.existsSync(cssPath)) {
+  const css = fs.readFileSync(cssPath, "utf-8").toString();
+  const neo = css.replace(
+    `
+[type=submit] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}`.trim(),
+    `
+[type=submit] {
+  -webkit-appearance: button;
+  background-image: none;
+}
+`,
+  );
+  fs.writeFileSync(cssPath, neo, "utf-8");
+}