v0.5

2021-05-23 08:38:08 +08:00 · 2021-05-23 08:38:08 +08:00 · 2cbcd087ce
commit 2cbcd087ce
parent cb8edc7b75
684 changed files with 15405 additions and 39426 deletions
--- a/.dumi/theme/builtins/Previewer.less
+++ b/.dumi/theme/builtins/Previewer.less
@ -4,6 +4,7 @@
  background-color: #fff;
  border: 1px solid @c-border;
  border-radius: 1px;
+  margin-bottom: 24px;

  &[data-debug] {
    margin-top: 32px;
--- a/.dumi/theme/builtins/Previewer.tsx
+++ b/.dumi/theme/builtins/Previewer.tsx
@ -76,7 +76,7 @@ const Previewer: React.FC<IPreviewerProps> = oProps => {
  const isActive = history?.location.hash === `#${props.identifier}`;
  const isSingleFile = Object.keys(props.sources).length === 1;
  const openCSB = useCodeSandbox(props.hideActions?.includes('CSB') ? null : props);
-  const openRiddle = useRiddle(props.hideActions?.includes('RIDDLE') ? null : props);
+  // const openRiddle = useRiddle(props.hideActions?.includes('RIDDLE') ? null : props);
  const [execMotions, isMotionRunning] = useMotions(props.motions || [], demoRef.current);
  const [copyCode, copyStatus] = useCopy();
  const [currentFile, setCurrentFile] = useState('_');
@ -158,14 +158,14 @@ const Previewer: React.FC<IPreviewerProps> = oProps => {
            onClick={openCSB}
          />
        )}
-        {openRiddle && (
+        {/* {openRiddle && (
          <button
            title="Open demo on Riddle"
            className="__dumi-default-icon"
            role="riddle"
            onClick={openRiddle}
          />
-        )}
+        )} */}
        {props.motions && (
          <button
            title="Execute motions"
--- a/.dumi/theme/layout.tsx
+++ b/.dumi/theme/layout.tsx
@ -100,7 +100,7 @@ const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
                {isCN ? `在 ${repoPlatform} 上编辑此页` : `Edit this doc on ${repoPlatform}`}
              </Link>
            )}
-            <span data-updated-text={isCN ? '最后更新时间：' : 'Last update: '}>{updatedTime}</span>
+            {/* <span data-updated-text={isCN ? '最后更新时间：' : 'Last update: '}>{updatedTime}</span> */}
          </div>
        )}
        {(showHero || showFeatures) && meta.footer && (
--- a/.editorconfig
+++ b/.editorconfig
@ -1,10 +1,14 @@
 # EditorConfig is awesome: http://EditorConfig.org

+# top-most EditorConfig file
 root = true

+# Unix-style newlines with a newline ending every file
 [*]
-charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 indent_style = space
 indent_size = 2
+
+[*.gradle]
+indent_size = 4
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,10 @@
+node_modules
+lib
+dist
+build
+coverage
+expected
+website
+gh-pages
+weex
+build.ts
--- a/.eslintrc
+++ b/.eslintrc
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@ -1,47 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: Node.js CI
-
-on: [push]
-
-jobs:
-  test:
-    strategy:
-      matrix:
-        node_version: ['12']
-        db_dialect: ['postgres']
-        pg_version: ['12']
-
-    runs-on: ubuntu-latest
-    container: node:${{ matrix.node_version }}
-    services:
-      # Label used to access the service container
-      postgres:
-        # Docker Hub image
-        image: postgres:${{ matrix.pg_version }}
-        # Provide the password for postgres
-        env:
-          POSTGRES_USER: nocobase
-          POSTGRES_PASSWORD: password
-        # Set health checks to wait until postgres has started
-        options: >-
-          --health-cmd pg_isready
-          --health-interval 10s
-          --health-timeout 5s
-          --health-retries 5
-
-    steps:
-    - uses: actions/checkout@v2
-    - run: npm i
-    - run: npm run bootstrap
-    - run: npm run build
-    - name: Test
-      run: npm test
-      env:
-        DB_DIALECT: ${{ matrix.db_dialect }}
-        DB_HOST: ${{ matrix.db_dialect }}
-        DB_PORT: 5432
-        DB_USER: nocobase
-        DB_PASSWORD: password
-        DB_DATABASE: nocobase
--- a/.github/workflows/vercel.yml
+++ b/.github/workflows/vercel.yml
@ -1,9 +1,6 @@
 name: vercel

-on:
-  push:
-    branches:
-      - master
+on: [push]

 jobs:
  deploy:
--- a/.umirc.ts
+++ b/.umirc.ts
@ -3,8 +3,8 @@ import { defineConfig } from 'dumi';
 export default defineConfig({
  title: ' ',
  hash: true,
-  ssr: {},
-  exportStatic: {},
+  // ssr: {},
+  // exportStatic: {},
  mode: 'site',
  logo: 'https://www.nocobase.com/dist/images/logo.png',
  navs: {
--- a/jest.config.js
+++ b/jest.config.js
@ -3,13 +3,23 @@ const path = require('path');
 module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
-  setupFilesAfterEnv: [path.resolve(__dirname, 'dotenv.js')],
+  setupFilesAfterEnv: [
+    path.resolve(__dirname, 'dotenv.js'),
+  ],
  testMatch: [
    // '**/__tests__/**/*.[jt]s?(x)',
    '**/?(*.)+(spec|test).[jt]s?(x)'
  ],
  modulePathIgnorePatterns: [
    "<rootDir>/.dumi/",
-    "<rootDir>/packages/father-build/"
+    "<rootDir>/packages/father-build/",
+    "<rootDir>/packages/client/lib/"
  ],
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+      tsconfig: 'tsconfig.jest.json',
+      diagnostics: false,
+    },
+  },
 };
--- a/lerna.json
+++ b/lerna.json
@ -3,14 +3,13 @@
    "packages/*"
  ],
  "version": "independent",
-  "command": {
-    "bootstrap": {
+  "npmClient": "yarn",
+  "useWorkspaces": true,
  "npmClientArgs": [
-        "--no-package-lock"
-      ]
-    },
+    "--ignore-engines"
+  ],
+  "command": {
    "publish": {
-      "allowBranch": "master",
      "ignoreChanges": [
        "*.md"
      ]
--- a/packages/create-nocobase-app/src/fixtures/.gitkeep
+++ b/packages/create-nocobase-app/src/fixtures/.gitkeep
--- a/mock/api.ts
+++ b/mock/api.ts
@ -0,0 +1,17 @@
+import Mock from 'mockjs';
+import * as resources from './resources';
+
+export default {
+  '/api/:resource::action': (req: any, res: any) => {
+    const action = resources[req.params.resource][req.params.action];
+    if (action) {
+      return action(req, res);
+    }
+  },
+  '/api/:resource::action/:resourceIndex': (req: any, res: any) => {
+    const action = resources[req.params.resource][req.params.action];
+    if (action) {
+      return action(req, res);
+    }
+  },
+}
--- a/mock/resources/blocks.ts
+++ b/mock/resources/blocks.ts
@ -0,0 +1,37 @@
+import Mock from 'mockjs';
+
+export async function getOptions(req: any, res: any) {
+  res.json({
+    data: {
+      name:  'grid1',
+      'x-component': 'GridBlock',
+      blocks: [
+        {
+          name: 'form1',
+          resource: {
+            resourceName: 'users',
+            resourceKey: 1,
+          },
+          fields: [
+            {
+              interface: 'string',
+              type: 'string',
+              title: `单行文本`,
+              name: 'username',
+              required: true,
+              component: {
+                type: 'string',
+                default: 'abcdefg',
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                'x-component-props': {
+                  placeholder: 'please enter',
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+  });
+}
--- a/mock/resources/examples.ts
+++ b/mock/resources/examples.ts
@ -0,0 +1,8 @@
+import Mock from 'mockjs';
+
+export async function list(req: any, res: any) {
+  res.json({
+    data: [],
+    meta: {},
+  });
+}
--- a/mock/resources/index.ts
+++ b/mock/resources/index.ts
@ -0,0 +1,7 @@
+
+import * as blocks from './blocks';
+import * as routes from './routes';
+import * as users from './users';
+import * as examples from './examples';
+
+export { blocks, routes, users, examples };
--- a/mock/resources/routes.ts
+++ b/mock/resources/routes.ts
@ -0,0 +1,184 @@
+import Mock from 'mockjs';
+
+export async function getAccessible(req: any, res: any) {
+  res.json({
+    data: [
+      {
+        type: 'redirect',
+        from: '/admin',
+        to: '/admin/welcome',
+        exact: true,
+      },
+      {
+        type: 'redirect',
+        from: '/',
+        to: '/admin',
+        exact: true,
+      },
+      {
+        path: '/admin/:name(.+)?',
+        component: 'AdminLayout',
+        title: `后台 - ${Mock.mock('@string')}`,
+        // providers: ['CurrentUserProvider', 'MenuProvider'],
+      },
+      {
+        component: 'AuthLayout',
+        routes: [
+          {
+            name: 'login',
+            path: '/login',
+            component: 'PageTemplate',
+            title: `登录 - ${Mock.mock('@string')}`,
+          },
+          {
+            name: 'register',
+            path: '/register',
+            component: 'PageTemplate',
+            title: `注册 - ${Mock.mock('@string')}`,
+          },
+        ],
+      },
+    ],
+  });
+}
+
+export async function getMenu(req: any, res: any) {
+  res.json({
+    data: [
+      {
+        name: 'welcome',
+        title: `欢迎 - ${Mock.mock('@string')}`,
+        children: [
+          {
+            name: 'page2',
+            title: '页面2',
+          },
+        ],
+      },
+      {
+        name: 'users',
+        title: `用户 - ${Mock.mock('@string')}`,
+      },
+    ],
+  });
+}
+
+export async function getPage(req: any, res: any) {
+  const fields = [
+    {
+      interface: 'string',
+      type: 'string',
+      title: `单行文本 - ${Mock.mock('@string')}`,
+      name: 'input',
+      required: true,
+      component: {
+        type: 'string',
+        default: 'aa',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {},
+      },
+    },
+    {
+      interface: 'textarea',
+      type: 'text',
+      title: `多行文本框 - ${Mock.mock('@string')}`,
+      name: 'textarea',
+      required: true,
+      component: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {},
+      },
+    },
+  ];
+  res.json({
+    data: {
+      title: `page - ${req.query.slug} - ${Mock.mock('@string')}`,
+      blocks: [
+        {
+          interface: 'form',
+          type: 'form',
+          component: {
+            'x-component': 'Form',
+          },
+          fields,
+        },
+        {
+          interface: 'table',
+          type: 'table',
+          component: {
+            'x-component': 'Table',
+          },
+          fields,
+        },
+        {
+          interface: 'calendar',
+          type: 'calendar',
+          component: {
+            'x-component': 'Calendar',
+          },
+        },
+        {
+          interface: 'kanban',
+          type: 'kanban',
+          component: {
+            'x-component': 'Kanban',
+          },
+        },
+        {
+          interface: 'grid',
+          type: 'grid',
+          component: {
+            'x-component': 'Grid',
+          },
+          rowProps: {
+            gutter: 16,
+          },
+          colsProps: [12, 12],
+          blocks: [
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 1`,
+              rowOrder: 1,
+              columnOrder: 1,
+            },
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 2`,
+              rowOrder: 2,
+              columnOrder: 2,
+            },
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 1`,
+              rowOrder: 1,
+              columnOrder: 2,
+            },
+          ],
+        },
+        {
+          interface: 'markdown',
+          type: 'markdown',
+          component: {
+            'x-component': 'Markdown',
+          },
+          content: `# Markdown Content`,
+        },
+      ],
+    },
+  });
+}
--- a/mock/resources/users.ts
+++ b/mock/resources/users.ts
@ -0,0 +1,19 @@
+import Mock from 'mockjs';
+
+export async function check(req: any, res: any) {
+  res.json({
+    data: {
+      username: `username - ${Mock.mock('@string')}`,
+      token: Mock.mock('@string'),
+    },
+  });
+}
+
+export async function get(req: any, res: any) {
+  res.json({
+    data: {
+      username: `username - ${Mock.mock('@string')}`,
+      token: Mock.mock('@string'),
+    },
+  });
+}
--- a/nodemon.json
+++ b/nodemon.json
@ -1,6 +0,0 @@
-{
-  "watch": ["packages/", ".env"],
-  "ignore": ["packages/app"],
-  "ext": "ts",
-  "exec": "ts-node -r dotenv/config ./packages/api/src/index.ts"
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,74 +1,59 @@
 {
-  "name": "root",
+  "name": "nocobase",
  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
  "scripts": {
-    "start": "cd packages/app && npm start",
-    "start-server": "nodemon",
-    "start-client": "cd packages/app && npx umi dev",
+    "bootstrap": "lerna bootstrap",
+    "clean": "lerna clean",
    "start-docs": "dumi dev",
    "build-docs": "dumi build",
-    "pm2-start": "npx pm2 start packages/api/lib/index.js",
-    "build-app": "cd packages/app && npm run build",
-    "bootstrap": "lerna bootstrap --no-ci",
-    "build": "father-build",
-    "clean": "lerna clean",
-    "db-migrate": "ts-node -r dotenv/config ./packages/api/src/migrate.ts",
+    "build2": "lerna run build",
+    "build": "npm run build-father-build && node packages/father-build/bin/father-build.js",
+    "build-father-build": "cd packages/father-build && npm run build",
    "lint": "eslint --ext .ts,.tsx,.js \"packages/*/src/**.@(ts|tsx|js)\" --fix",
-    "test": "npm run lint && jest",
-    "debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
-    "version:alpha": "lerna version prerelease --preid alpha --force-publish=* --no-git-tag-version -m \"chore(versions): publish packages %s\"",
-    "release:force": "lerna publish from-package --yes",
-    "release": "lerna publish"
+    "test": "npm run lint && jest"
  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/nocobase/nocobase.git",
-    "branch": "master",
-    "platform": "github"
+  "resolutions": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0"
  },
  "devDependencies": {
-    "@koa/router": "^9.3.1",
-    "@types/bcrypt": "^3.0.0",
-    "@types/jest": "^26.0.4",
-    "@types/koa": "^2.11.6",
-    "@types/koa-bodyparser": "^4.3.0",
-    "@types/koa-mount": "^4.0.0",
-    "@types/koa__router": "^8.0.2",
-    "@types/lodash": "^4.14.158",
-    "@types/node": "^14.0.23",
-    "@types/react": "^17.0.3",
+    "@types/jest": "^24.0.18",
+    "@types/koa": "^2.13.1",
+    "@types/lodash": "^4.14.169",
+    "@types/mockjs": "^1.0.3",
+    "@types/node": "^12.6.8",
+    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.3",
-    "@types/supertest": "^2.0.10",
-    "@typescript-eslint/eslint-plugin": "^3.6.1",
-    "@typescript-eslint/parser": "^3.6.1",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.8.2",
    "@umijs/plugin-antd": "^0.9.1",
-    "antd": "^4.15.0",
-    "cross-env": "^7.0.2",
+    "antd": "^4.15.4",
    "dotenv": "^8.2.0",
-    "dumi": "^1.0.12",
+    "dumi": "^1.1.16",
    "eslint": "^7.4.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-standard": "^4.0.1",
-    "father-build": "^1.19.2",
-    "jest": "^26.1.0",
-    "koa": "^2.13.0",
+    "jest": "^26.6.3",
    "koa-bodyparser": "^4.3.0",
    "lerna": "^3.22.0",
-    "lint-staged": "^10.0.7",
-    "mysql2": "^2.1.0",
-    "nodemon": "^2.0.4",
-    "path-to-regexp": "^6.1.0",
-    "pg": "^8.3.0",
+    "mockjs": "^1.1.0",
+    "pg": "^8.6.0",
    "pg-hstore": "^2.3.3",
-    "pm2": "^4.5.6",
-    "prettier": "^1.19.1",
-    "sequelize": "^6.3.4",
-    "supertest": "^4.0.2",
-    "ts-jest": "^26.1.2",
-    "ts-node": "^8.10.2",
-    "typescript": "^3.9.6",
-    "yorkie": "^2.0.0"
+    "prettier": "^2.3.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "supertest": "^6.1.3",
+    "ts-jest": "^26.5.6",
+    "ts-node": "^9.1.1",
+    "typescript": "4.1.5"
  }
 }
--- a/packages/actions/package.json
+++ b/packages/actions/package.json
@ -12,8 +12,7 @@
  },
  "devDependencies": {
    "koa": "^2.13.0",
-    "sequelize": "^6.3.4",
-    "typescript": "^3.9.6"
+    "sequelize": "^6.3.4"
  },
  "repository": {
    "type": "git",
--- a/packages/api/bin/nocobase.js
+++ b/packages/api/bin/nocobase.js
--- a/packages/api/package.json
+++ b/packages/api/package.json
@ -16,7 +16,6 @@
    "@nocobase/plugin-automations": "^0.4.0-alpha.7",
    "@nocobase/plugin-china-region": "^0.4.0-alpha.7",
    "@nocobase/plugin-collections": "^0.4.0-alpha.7",
-    "@nocobase/plugin-export": "^0.4.0-alpha.7",
    "@nocobase/plugin-file-manager": "^0.4.0-alpha.7",
    "@nocobase/plugin-pages": "^0.4.0-alpha.7",
    "@nocobase/plugin-permissions": "^0.4.0-alpha.7",
--- a/packages/api/src/app.ts
+++ b/packages/api/src/app.ts
@ -46,7 +46,6 @@ const plugins = [
  '@nocobase/plugin-permissions',
  '@nocobase/plugin-automations',
  '@nocobase/plugin-china-region',
-  '@nocobase/plugin-export',
 ];

 for (const plugin of plugins) {
--- a/packages/app/.fatherrc.ts
+++ b/packages/app/.fatherrc.ts
@ -1,10 +0,0 @@
-export default {
-  entry: 'src/api',
-  target: 'node',
-  cjs: { type: 'babel', lazy: true },
-  include: 'api/*',
-  disableTypeCheck: true,
-  // pkgs: [
-  //   'api',
-  // ],
-};
--- a/packages/app/.gitignore
+++ b/packages/app/.gitignore
@ -9,7 +9,7 @@

 # production
 /dist
-.env
+
 # misc
 .DS_Store

@ -18,4 +18,3 @@
 /src/.umi-production
 /src/.umi-test
 /.env.local
-report.*.json
--- a/packages/app/.npmignore
+++ b/packages/app/.npmignore
@ -1,12 +0,0 @@
-lib
-mock
-node_modules
-*.log
-docs
-__tests__
-jest.config.js
-tsconfig.json
-src
-.fatherrc.ts
-.umirc.ts
-nodemon.json
--- a/packages/app/.prettierignore
+++ b/packages/app/.prettierignore
--- a/packages/app/.prettierrc
+++ b/packages/app/.prettierrc
--- a/packages/app/.umirc.ts
+++ b/packages/app/.umirc.ts
@ -1,41 +1,11 @@
 import { defineConfig } from 'umi';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({
-  path: path.resolve(__dirname, '../../.env'),
-});
-
-console.log('process.env.API_PORT', process.env.API_PORT);

 export default defineConfig({
-  title: false,
  nodeModulesTransform: {
    type: 'none',
  },
-  define: {
-    'process.env.API': `/api`,
-    // 'process.env.API': `http://localhost:${process.env.API_PORT}/api`,
-  },
-  proxy: {
-    '/api': {
-      'target': `http://localhost:${process.env.API_PORT}/`,
-      'changeOrigin': true,
-      'pathRewrite': { '^/api' : '/api' },
-    },
-  },
-  locale: {
-    default: 'zh-CN',
-    // antd: false,
-    // title: false,
-    baseNavigator: false,
-    baseSeparator: '-',
-  },
  routes: [
-    {
-      exact: false,
-      path: '/:path(.*)',
-      component: '@/pages/index',
-    },
+    { path: '/', exact: false, component: '@/pages/index' },
  ],
+  fastRefresh: {},
 });
--- a/packages/app/README.md
+++ b/packages/app/README.md
@ -1,11 +1,11 @@
-# NocoBase Application
+# umi project

 ## Getting Started

 Install dependencies,

 ```bash
-$ yarn install
+$ yarn
 ```

 Start the dev server,
--- a/packages/app/mock/.gitkeep
+++ b/packages/app/mock/.gitkeep
--- a/packages/app/mock/api.ts
+++ b/packages/app/mock/api.ts
@ -0,0 +1,11 @@
+import Mock from 'mockjs';
+import * as resources from './resources';
+
+export default {
+  '/api/:resource::action': (req: any, res: any) => {
+    const action = resources[req.params.resource][req.params.action];
+    if (action) {
+      return action(req, res);
+    }
+  },
+}
--- a/packages/app/mock/resources/examples.ts
+++ b/packages/app/mock/resources/examples.ts
@ -0,0 +1,8 @@
+import Mock from 'mockjs';
+
+export async function list(req: any, res: any) {
+  res.json({
+    data: [],
+    meta: {},
+  });
+}
--- a/packages/app/mock/resources/index.ts
+++ b/packages/app/mock/resources/index.ts
@ -0,0 +1,6 @@
+
+import * as routes from './routes';
+import * as users from './users';
+import * as examples from './examples';
+
+export { routes, users, examples };
--- a/packages/app/mock/resources/routes.ts
+++ b/packages/app/mock/resources/routes.ts
@ -0,0 +1,184 @@
+import Mock from 'mockjs';
+
+export async function getAccessible(req: any, res: any) {
+  res.json({
+    data: [
+      {
+        type: 'redirect',
+        from: '/admin',
+        to: '/admin/welcome',
+        exact: true,
+      },
+      {
+        type: 'redirect',
+        from: '/',
+        to: '/admin',
+        exact: true,
+      },
+      {
+        path: '/admin/:name(.+)?',
+        component: 'AdminLayout',
+        title: `后台 - ${Mock.mock('@string')}`,
+        // providers: ['CurrentUserProvider', 'MenuProvider'],
+      },
+      {
+        component: 'AuthLayout',
+        routes: [
+          {
+            name: 'login',
+            path: '/login',
+            component: 'PageTemplate',
+            title: `登录 - ${Mock.mock('@string')}`,
+          },
+          {
+            name: 'register',
+            path: '/register',
+            component: 'PageTemplate',
+            title: `注册 - ${Mock.mock('@string')}`,
+          },
+        ],
+      },
+    ],
+  });
+}
+
+export async function getMenu(req: any, res: any) {
+  res.json({
+    data: [
+      {
+        name: 'welcome',
+        title: `欢迎 - ${Mock.mock('@string')}`,
+        children: [
+          {
+            name: 'page2',
+            title: '页面2',
+          },
+        ],
+      },
+      {
+        name: 'users',
+        title: `用户 - ${Mock.mock('@string')}`,
+      },
+    ],
+  });
+}
+
+export async function getPage(req: any, res: any) {
+  const fields = [
+    {
+      interface: 'string',
+      type: 'string',
+      title: `单行文本 - ${Mock.mock('@string')}`,
+      name: 'input',
+      required: true,
+      component: {
+        type: 'string',
+        default: 'aa',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input',
+        'x-component-props': {},
+      },
+    },
+    {
+      interface: 'textarea',
+      type: 'text',
+      title: `多行文本框 - ${Mock.mock('@string')}`,
+      name: 'textarea',
+      required: true,
+      component: {
+        type: 'string',
+        'x-decorator': 'FormItem',
+        'x-component': 'Input.TextArea',
+        'x-component-props': {},
+      },
+    },
+  ];
+  res.json({
+    data: {
+      title: `page - ${req.query.slug} - ${Mock.mock('@string')}`,
+      blocks: [
+        {
+          interface: 'form',
+          type: 'form',
+          component: {
+            'x-component': 'Form',
+          },
+          fields,
+        },
+        {
+          interface: 'table',
+          type: 'table',
+          component: {
+            'x-component': 'Table',
+          },
+          fields,
+        },
+        {
+          interface: 'calendar',
+          type: 'calendar',
+          component: {
+            'x-component': 'Calendar',
+          },
+        },
+        {
+          interface: 'kanban',
+          type: 'kanban',
+          component: {
+            'x-component': 'Kanban',
+          },
+        },
+        {
+          interface: 'grid',
+          type: 'grid',
+          component: {
+            'x-component': 'Grid',
+          },
+          rowProps: {
+            gutter: 16,
+          },
+          colsProps: [12, 12],
+          blocks: [
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 1`,
+              rowOrder: 1,
+              columnOrder: 1,
+            },
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 2`,
+              rowOrder: 2,
+              columnOrder: 2,
+            },
+            {
+              interface: 'markdown',
+              type: 'markdown',
+              component: {
+                'x-component': 'Markdown',
+              },
+              content: `# Markdown Content 1`,
+              rowOrder: 1,
+              columnOrder: 2,
+            },
+          ],
+        },
+        {
+          interface: 'markdown',
+          type: 'markdown',
+          component: {
+            'x-component': 'Markdown',
+          },
+          content: `# Markdown Content`,
+        },
+      ],
+    },
+  });
+}
--- a/packages/app/mock/resources/users.ts
+++ b/packages/app/mock/resources/users.ts
@ -0,0 +1,10 @@
+import Mock from 'mockjs';
+
+export async function check(req: any, res: any) {
+  res.json({
+    data: {
+      username: `username - ${Mock.mock('@string')}`,
+      token: Mock.mock('@string'),
+    },
+  });
+}
--- a/packages/app/package.json
+++ b/packages/app/package.json
@ -2,10 +2,9 @@
  "name": "@nocobase/app",
  "version": "0.4.0-alpha.7",
  "scripts": {
-    "start": "concurrently \"cd ../../ && nodemon\" \"umi dev\"",
-    "dev": "umi dev",
+    "start": "umi dev",
    "build": "umi build",
-    "postinstall": "node ./umi.js generate tmp",
+    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
@ -21,34 +20,19 @@
      "prettier --parser=typescript --write"
    ]
  },
-  "devDependencies": {
-    "@ant-design/pro-layout": "^5.0.12",
-    "@formily/antd-components": "^1.3.6",
-    "@lourenci/react-kanban": "^2.1.0",
+  "dependencies": {
    "@nocobase/client": "^0.4.0-alpha.7",
-    "@types/react-big-calendar": "^0.24.8",
    "@umijs/preset-react": "1.x",
-    "@umijs/test": "^3.2.23",
-    "ahooks": "^2.9.3",
-    "antd": "^4.13.0",
-    "array-move": "^3.0.1",
-    "attr-accept": "^2.2.2",
-    "clean-deep": "^3.4.0",
-    "concurrently": "^5.3.0",
-    "lint-staged": "^10.0.7",
-    "marked": "^2.0.0",
-    "nodemon": "^2.0.6",
-    "prettier": "^1.19.1",
-    "react": "16.14.0",
-    "react-big-calendar": "^0.30.0",
-    "react-dom": "16.14.0",
-    "react-drag-listview": "^0.1.8",
-    "react-image-lightbox": "^5.1.1",
-    "react-sortable-hoc": "^1.11.0",
-    "react-to-print": "^2.12.3",
-    "styled-components": "^4.1.1",
-    "umi": "^3.2.23",
-    "yorkie": "^2.0.0"
+    "umi": "^3.0.0"
  },
-  "gitHead": "f0b335ac30f29f25c95d7d137655fa64d8d67f1e"
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@umijs/test": "^3.4.15",
+    "mockjs": "^1.1.0",
+    "prettier": "^2.2.0",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "yorkie": "^2.0.0"
+  }
 }
--- a/packages/app/src/api-client.ts
+++ b/packages/app/src/api-client.ts
@ -1,90 +0,0 @@
-import { request } from 'umi';
-
-interface ActionParams {
-  resourceKey?: string | number;
-  // resourceName?: string;
-  // associatedName?: string;
-  associatedKey?: string | number;
-  fields?: any;
-  filter?: any;
-  values?: any;
-  page?: any;
-  perPage?: any;
-  [key: string]: any;
-}
-
-interface Resource {
-  get: (params?: ActionParams, options?: any) => Promise<any>;
-  list: (params?: ActionParams, options?: any) => Promise<any>;
-  create: (params?: ActionParams, options?: any) => Promise<any>;
-  update: (params?: ActionParams, options?: any) => Promise<any>;
-  destroy: (params?: ActionParams, options?: any) => Promise<any>;
-  [name: string]: (params?: ActionParams, options?: any) => Promise<any>;
-}
-
-// TODO 待改进，提供一个封装度更完整的 SDK，request 可以自由替换
-class ApiClient {
-  resource(name: string): Resource {
-    const proxy: any = new Proxy(
-      {},
-      {
-        get(target, method, receiver) {
-          return (params: ActionParams = {}, options: any = {}) => {
-            let {
-              associatedKey,
-              resourceKey,
-              filter,
-              sorter,
-              sort = [],
-              values,
-              ...restParams
-            } = params;
-            let url = `/${name}`;
-            sort = sort || [];
-            options.params = restParams;
-            if (['list', 'get', 'export'].indexOf(method as string) !== -1) {
-              options.method = 'get';
-            } else {
-              options.method = 'post';
-              options.data = values;
-            }
-            if (associatedKey) {
-              url = `/${name.split('.').join(`/${associatedKey}/`)}`;
-            }
-            url += `:${method as string}`;
-            // console.log(name, name.split('.'), associatedKey, name.split('.').join(`/${associatedKey}/`));
-            if (resourceKey) {
-              url += `/${resourceKey}`;
-            }
-            if (filter) {
-              options.params['filter'] = JSON.stringify(filter);
-            }
-            if (sorter) {
-              sort = [];
-              const arr = Array.isArray(sorter) ? sorter : [sorter];
-              arr.forEach(({ order, field }) => {
-                if (order === 'descend') {
-                  sort.push(`-${field}`);
-                } else if (order === 'ascend') {
-                  sort.push(field);
-                }
-              });
-            }
-            if (sort.length === 0) {
-              delete options.params['sort'];
-            } else {
-              options.params['sort'] = sort.join(',');
-            }
-            console.log({ url, params });
-            return request(url, options);
-          };
-        },
-      },
-    );
-    return proxy;
-  }
-}
-
-const api = new ApiClient();
-
-export default api;
--- a/packages/app/src/app.ts
+++ b/packages/app/src/app.ts
@ -1,77 +0,0 @@
-import './css_browser_selector';
-import { RequestConfig, request as umiRequest, history } from 'umi';
-
-import { configResponsive } from 'ahooks';
-
-configResponsive({
-  small: 0,
-  middle: 800,
-  large: 1200,
-});
-
-export const request: RequestConfig = {
-  prefix: process.env.API,
-  errorConfig: {
-    adaptor: resData => {
-      return {
-        ...resData,
-        success: true,
-        showType: 0,
-      };
-    },
-  },
-  middlewares: [
-    async (ctx, next) => {
-      const { headers } = ctx.req.options as any;
-      const token = localStorage.getItem('NOCOBASE_TOKEN');
-      if (token) {
-        headers['Authorization'] = `Bearer ${token}`;
-      }
-      await next();
-    },
-  ],
-};
-
-// TODO：目前这块是写在代码里的，待改进
-const pathnames = ['/login', '/register', '/lostpassword', '/resetpassword'];
-
-export async function getInitialState() {
-  const { pathname, search } = location;
-  console.log(location);
-  const { data: systemSettings = {} } = await umiRequest(
-    '/system_settings:get?fields[appends]=logo,logo.storage',
-    {
-      method: 'get',
-    },
-  );
-  let redirect = `?redirect=${pathname}${search}`;
-
-  if (!pathnames.includes(pathname)) {
-    try {
-      const { data = {} } = await umiRequest('/users:check', {
-        method: 'post',
-      });
-
-      if (!data.id) {
-        history.push('/login' + redirect);
-        return {
-          systemSettings,
-          currentUser: {},
-        };
-      }
-
-      return {
-        systemSettings,
-        currentUser: data,
-      };
-    } catch (error) {
-      console.log(error);
-      history.push('/login' + redirect);
-    }
-  }
-
-  return {
-    systemSettings,
-    currentUser: {},
-  };
-}
--- a/packages/app/src/components/actions/index.tsx
+++ b/packages/app/src/components/actions/index.tsx
@ -1,379 +0,0 @@
-import React, { useState } from 'react';
-import { Space, Button, Popconfirm, Popover } from 'antd';
-import {
-  FilterOutlined,
-  PlusOutlined,
-  SelectOutlined,
-  DeleteOutlined,
-  PrinterOutlined,
-  ExportOutlined,
-} from '@ant-design/icons';
-import Drawer from '@/components/drawer';
-import View from '@/components/views';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import ReactToPrint from 'react-to-print';
-import api from '@/api-client';
-import './style.less';
-
-const ACTIONS = new Map<string, any>();
-
-export function Create(props) {
-  const { size, onFinish, schema = {}, associatedKey, ...restProps } = props;
-  const { title, pageTitle, viewName, transform, componentProps = {} } = schema;
-  return (
-    <>
-      <Button
-        size={size}
-        onClick={() => {
-          Drawer.open({
-            title: pageTitle || title,
-            content: ({ resolve, closeWithConfirm }) => (
-              <div>
-                <View
-                  {...restProps}
-                  onValueChange={() => {
-                    closeWithConfirm && closeWithConfirm(true);
-                  }}
-                  associatedKey={associatedKey}
-                  viewName={viewName}
-                  onReset={resolve}
-                  onDraft={async item => {
-                    const values = transform ? {} : item;
-                    for (const [sourceKey, targetKey] of Object.entries<string>(
-                      transform || {},
-                    )) {
-                      const value = get({ data: item }, sourceKey);
-                      set(values, targetKey, value);
-                    }
-                    await resolve();
-                    console.log('onFinish', values);
-                    onFinish && (await onFinish(values));
-                  }}
-                  onFinish={async item => {
-                    const values = transform ? {} : item;
-                    for (const [sourceKey, targetKey] of Object.entries<string>(
-                      transform || {},
-                    )) {
-                      const value = get({ data: item }, sourceKey);
-                      set(values, targetKey, value);
-                    }
-                    await resolve();
-                    console.log('onFinish', values);
-                    onFinish && (await onFinish(values));
-                  }}
-                />
-              </div>
-            ),
-          });
-        }}
-        icon={<PlusOutlined />}
-        type={'primary'}
-        {...componentProps}
-      >
-        {title}
-      </Button>
-    </>
-  );
-}
-
-export function Update(props) {
-  const { onFinish, data, schema = {}, associatedKey, ...restProps } = props;
-  const { title, viewName } = schema;
-  return (
-    <>
-      <Button
-        onClick={() => {
-          Drawer.open({
-            title: title,
-            content: ({ resolve, closeWithConfirm }) => (
-              <div>
-                <View
-                  {...restProps}
-                  associatedKey={associatedKey}
-                  data={data}
-                  viewName={viewName}
-                  onReset={resolve}
-                  onDraft={async values => {
-                    await resolve();
-                    onFinish && (await onFinish(values));
-                  }}
-                  onValueChange={() => {
-                    closeWithConfirm && closeWithConfirm(true);
-                  }}
-                  onFinish={async values => {
-                    await resolve();
-                    onFinish && (await onFinish(values));
-                  }}
-                />
-              </div>
-            ),
-          });
-        }}
-        icon={<PlusOutlined />}
-        type={'primary'}
-      >
-        {title}
-      </Button>
-    </>
-  );
-}
-
-export function Add(props) {
-  const { size, onFinish, schema = {}, associatedKey, ...restProps } = props;
-  console.log({ associatedKey }, 'add');
-  const { filter, title, viewName, transform, componentProps = {} } = schema;
-  return (
-    <>
-      <Button
-        size={size}
-        onClick={() => {
-          Drawer.open({
-            title: title,
-            content: ({ resolve }) => {
-              const [selectedRows, setSelectedRows] = useState([]);
-              return (
-                <div>
-                  <View
-                    {...restProps}
-                    defaultFilter={filter}
-                    viewName={viewName}
-                    associatedKey={associatedKey}
-                    onSelected={values => {
-                      console.log(values);
-                      setSelectedRows(
-                        values.map(item => {
-                          if (!transform) {
-                            return;
-                          }
-                          const data = {};
-                          for (const [sourceKey, targetKey] of Object.entries<
-                            string
-                          >(transform)) {
-                            const value = get({ data: item }, sourceKey);
-                            set(data, targetKey, value);
-                          }
-                          return data;
-                        }),
-                      );
-                    }}
-                  />
-                  <Drawer.Footer>
-                    <Space>
-                      <Button onClick={resolve}>取消</Button>
-                      <Button
-                        type={'primary'}
-                        onClick={async () => {
-                          console.log({ schema, onFinish });
-                          onFinish && (await onFinish(selectedRows));
-                          resolve();
-                        }}
-                      >
-                        确定
-                      </Button>
-                    </Space>
-                  </Drawer.Footer>
-                </div>
-              );
-            },
-          });
-        }}
-        icon={<SelectOutlined />}
-        {...componentProps}
-      >
-        {title}
-      </Button>
-    </>
-  );
-}
-
-export function Destroy(props) {
-  const { size, schema = {}, onFinish } = props;
-  const { title, componentProps = {} } = schema;
-  return (
-    <Popconfirm
-      title="确认删除吗？"
-      onConfirm={async e => {
-        onFinish && (await onFinish());
-      }}
-    >
-      <Button
-        size={size}
-        danger
-        type={'ghost'}
-        icon={<DeleteOutlined />}
-        {...componentProps}
-      >
-        {title}
-      </Button>
-    </Popconfirm>
-  );
-}
-
-export function Filter(props) {
-  const { schema = {}, onFinish } = props;
-  const { title, fields = [] } = schema;
-  const [visible, setVisible] = useState(false);
-  const [data, setData] = useState({});
-  const [filterCount, setFilterCount] = useState(0);
-  console.log('Filter', { visible, data });
-
-  return (
-    <>
-      {visible && (
-        <div
-          style={{
-            height: '100vh',
-            width: '100vw',
-            zIndex: 1000,
-            position: 'fixed',
-            background: 'rgba(0, 0, 0, 0)',
-            top: 0,
-            left: 0,
-          }}
-          onClick={() => setVisible(false)}
-        ></div>
-      )}
-      <Popover
-        // title="设置筛选"
-        trigger="click"
-        visible={visible}
-        defaultVisible={visible}
-        placement={'bottomLeft'}
-        destroyTooltipOnHide
-        onVisibleChange={visible => {
-          setVisible(visible);
-        }}
-        className={'filters-popover'}
-        style={{}}
-        overlayStyle={{
-          minWidth: 500,
-        }}
-        content={
-          <>
-            <View
-              data={data}
-              onFinish={async values => {
-                if (values) {
-                  const items = values.filter.and || values.filter.or;
-                  setFilterCount(Array.isArray(items) ? items.length : 0);
-                  setData(values);
-                  onFinish && (await onFinish(values));
-                }
-                setVisible(false);
-              }}
-              schema={{
-                type: 'filterForm',
-                fields: [
-                  {
-                    dataIndex: ['filter'],
-                    name: 'filter',
-                    interface: 'json',
-                    type: 'json',
-                    component: {
-                      type: 'filter',
-                      'x-component-props': {
-                        fields,
-                      },
-                    },
-                  },
-                ],
-              }}
-            />
-          </>
-        }
-      >
-        <Button icon={<FilterOutlined />}>
-          {filterCount ? `${filterCount} 个${title}项` : title}
-        </Button>
-      </Popover>
-    </>
-  );
-}
-
-export function Print(props) {
-  const { schema = {}, contentRef } = props;
-  const { title, buttonProps = {} } = schema;
-  return (
-    <ReactToPrint
-      trigger={() => (
-        <Button {...buttonProps} icon={<PrinterOutlined />}>
-          {title}
-        </Button>
-      )}
-      content={() => contentRef.current}
-      pageStyle={`
-        @page {
-          margin: 1cm;
-        }
-        table { page-break-inside:auto }
-        tr { page-break-inside:avoid; page-break-after:auto }
-      `}
-      documentTitle={' '}
-    />
-  );
-}
-
-export function Export(props) {
-  const { schema = {}, onFinish } = props;
-  const { title, buttonProps = {} } = schema;
-  return (
-    <Button
-      {...buttonProps}
-      icon={<ExportOutlined />}
-      onClick={async () => {
-        onFinish && (await onFinish({ fields: [] }));
-      }}
-    >
-      {title}
-    </Button>
-  );
-}
-
-export function Actions(props) {
-  const { onTrigger = {}, actions = [], style, ...restProps } = props;
-  return (
-    actions.length > 0 && (
-      <div className={'action-buttons'} style={style}>
-        {actions.map(
-          action =>
-            ACTIONS.has(action.type) && (
-              <div key={action.__index} className={`${action.type}-action-button action-button`}>
-                <Action
-                  {...restProps}
-                  onFinish={onTrigger[action.type]}
-                  schema={action}
-                />
-              </div>
-            ),
-        )}
-      </div>
-    )
-  );
-}
-
-export default Actions;
-
-export function registerAction(type: string, Action: any) {
-  ACTIONS.set(type, Action);
-}
-
-export function getAction(type: string) {
-  return ACTIONS.get(type);
-}
-
-export function Action(props) {
-  const { schema = {} } = props;
-  // cnsole.log(schema);
-  const { type } = schema;
-  const Component = getAction(type);
-  return Component && <Component {...props} />;
-}
-
-registerAction('add', Add);
-registerAction('update', Update);
-registerAction('create', Create);
-registerAction('destroy', Destroy);
-registerAction('filter', Filter);
-registerAction('print', Print);
-registerAction('export', Export);
--- a/packages/app/src/components/actions/style.less
+++ b/packages/app/src/components/actions/style.less
@ -1,15 +0,0 @@
-.action-buttons {
-  display: flex;
-  // justify-content: flex-end;
-  min-height: 32px;
-  flex-direction: row-reverse;
-  align-items: flex-start;
-  .action-button {
-    margin-left: 8px;
-  }
-  .filter-action-button {
-    position: absolute;
-    left: 24px;
-    margin-left: 0;
-  }
-}
--- a/packages/app/src/components/fields/array-cards/index.tsx
+++ b/packages/app/src/components/fields/array-cards/index.tsx
@ -1,200 +0,0 @@
-import React, { Fragment } from 'react';
-import {
-  ISchemaFieldComponentProps,
-  SchemaField,
-} from '@formily/react-schema-renderer';
-import { toArr, isFn, FormPath } from '@formily/shared';
-import { ArrayList } from '@formily/react-shared-components';
-import { CircleButton } from '../circle-button';
-import { TextButton } from '../text-button';
-import { Card } from 'antd';
-import {
-  PlusOutlined,
-  DeleteOutlined,
-  DownOutlined,
-  UpOutlined,
-} from '@ant-design/icons';
-import styled from 'styled-components';
-
-const ArrayComponents = {
-  CircleButton,
-  TextButton,
-  AdditionIcon: () => <PlusOutlined />,
-  RemoveIcon: () => <DeleteOutlined />,
-  MoveDownIcon: () => <DownOutlined />,
-  MoveUpIcon: () => <UpOutlined />,
-};
-
-export const ArrayCards: any = styled(
-  (props: ISchemaFieldComponentProps & { className: string }) => {
-    const { value, schema, className, editable, path, mutators } = props;
-    const {
-      renderAddition,
-      renderRemove,
-      renderMoveDown,
-      renderMoveUp,
-      renderEmpty,
-      renderExtraOperations,
-      ...componentProps
-    } = schema.getExtendsComponentProps() || {};
-
-    const schemaItems = Array.isArray(schema.items)
-      ? schema.items[schema.items.length - 1]
-      : schema.items;
-
-    const onAdd = () => {
-      if (schemaItems) {
-        mutators.push(schemaItems.getEmptyValue());
-      }
-    };
-    return (
-      <div className={className}>
-        <ArrayList
-          value={value}
-          minItems={schema.minItems}
-          maxItems={schema.maxItems}
-          editable={editable}
-          components={ArrayComponents}
-          renders={{
-            renderAddition,
-            renderRemove,
-            renderMoveDown,
-            renderMoveUp,
-            renderEmpty,
-          }}
-        >
-          {toArr(value).map((item, index) => {
-            return (
-              <Card
-                {...componentProps}
-                size="small"
-                className={`card-list-item`}
-                key={index}
-                title={
-                  <span>
-                    {index + 1}
-                    <span>.</span> {componentProps.title || schema.title}
-                  </span>
-                }
-                extra={
-                  <Fragment>
-                    <ArrayList.Remove
-                      index={index}
-                      onClick={() => mutators.remove(index)}
-                    />
-                    <ArrayList.MoveDown
-                      index={index}
-                      onClick={() => mutators.moveDown(index)}
-                    />
-                    <ArrayList.MoveUp
-                      index={index}
-                      onClick={() => mutators.moveUp(index)}
-                    />
-                    {isFn(renderExtraOperations)
-                      ? renderExtraOperations(index)
-                      : renderExtraOperations}
-                  </Fragment>
-                }
-              >
-                {schemaItems && (
-                  <SchemaField
-                    path={FormPath.parse(path).concat(index)}
-                    schema={schemaItems}
-                  />
-                )}
-              </Card>
-            );
-          })}
-          <ArrayList.Empty>
-            {({ children, allowAddition }) => {
-              return (
-                <Card
-                  {...componentProps}
-                  size="small"
-                  className={`card-list-item card-list-empty ${
-                    allowAddition ? 'add-pointer' : ''
-                  }`}
-                  onClick={allowAddition ? onAdd : undefined}
-                >
-                  <div className="empty-wrapper">{children}</div>
-                </Card>
-              );
-            }}
-          </ArrayList.Empty>
-          <ArrayList.Addition>
-            {({ children, isEmpty }) => {
-              if (!isEmpty) {
-                return (
-                  <div className="array-cards-addition" onClick={onAdd}>
-                    {children}
-                  </div>
-                );
-              }
-            }}
-          </ArrayList.Addition>
-        </ArrayList>
-      </div>
-    );
-  },
-)<ISchemaFieldComponentProps>`
-  width: 100%;
-  .ant-card {
-    .ant-card {
-      box-shadow: none;
-    }
-    .ant-card-body {
-      padding: 20px 10px 0 10px;
-    }
-    .array-cards-addition {
-      box-shadow: none;
-      border: 1px solid #eee;
-      transition: all 0.35s ease-in-out;
-      &:hover {
-        border: 1px solid #ccc;
-      }
-    }
-    .empty-wrapper {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 10px;
-      img {
-        height: 85px;
-      }
-      .ant-btn {
-        color: #888;
-      }
-    }
-  }
-  .card-list-empty.card-list-item.add-pointer {
-    cursor: pointer;
-  }
-
-  .array-cards-addition {
-    margin-top: 10px;
-    margin-bottom: 3px;
-    background: #fff;
-    display: flex;
-    cursor: pointer;
-    padding: 5px 0;
-    justify-content: center;
-    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.1);
-  }
-  .card-list-item {
-    margin-top: 10px;
-    border: 1px solid #eee;
-  }
-  .card-list-item:first-child {
-    margin-top: 0 !important;
-  }
-  .ant-card-extra {
-    display: flex;
-    button {
-      margin-right: 8px;
-    }
-  }
-`;
-
-ArrayCards.isFieldComponent = true;
-
-export default ArrayCards;
--- a/packages/app/src/components/fields/array-cards/style.ts
+++ b/packages/app/src/components/fields/array-cards/style.ts
@ -1 +0,0 @@
-import 'antd/lib/card/style/index';
--- a/packages/app/src/components/fields/array-table/index.tsx
+++ b/packages/app/src/components/fields/array-table/index.tsx
@ -1,238 +0,0 @@
-import React, { useContext } from 'react';
-import {
-  ISchemaFieldComponentProps,
-  SchemaField,
-  Schema,
-  complieExpression,
-  FormExpressionScopeContext,
-} from '@formily/react-schema-renderer';
-import { toArr, isFn, isArr, FormPath } from '@formily/shared';
-import { ArrayList, DragListView } from '@formily/react-shared-components';
-import { CircleButton } from '../circle-button';
-import { TextButton } from '../text-button';
-import { Table, Form, Button } from 'antd';
-import { FormItemShallowProvider } from '@formily/antd';
-import {
-  PlusOutlined,
-  DeleteOutlined,
-  DownOutlined,
-  UpOutlined,
-} from '@ant-design/icons';
-import styled from 'styled-components';
-
-const ArrayComponents = {
-  CircleButton,
-  TextButton,
-  AdditionIcon: () => (
-    <>
-      <PlusOutlined /> 新增
-    </>
-  ),
-  RemoveIcon: () => <DeleteOutlined />,
-  MoveDownIcon: () => <DownOutlined />,
-  MoveUpIcon: () => <UpOutlined />,
-};
-
-const DragHandler = styled.span`
-  width: 7px;
-  display: inline-block;
-  height: 14px;
-  border: 2px dotted #c5c5c5;
-  border-top: 0;
-  border-bottom: 0;
-  cursor: move;
-  margin-bottom: 24px;
-`;
-
-export const ArrayTable: any = styled(
-  (props: ISchemaFieldComponentProps & { className: string }) => {
-    const expressionScope = useContext(FormExpressionScopeContext);
-    const { value, schema, className, editable, path, mutators } = props;
-    const {
-      renderAddition,
-      renderRemove,
-      renderMoveDown,
-      renderMoveUp,
-      renderEmpty,
-      renderExtraOperations,
-      operationsWidth,
-      operations,
-      draggable,
-      ...componentProps
-    } = schema.getExtendsComponentProps() || {};
-    const schemaItems = Array.isArray(schema.items)
-      ? schema.items[schema.items.length - 1]
-      : schema.items;
-    const onAdd = () => {
-      if (schemaItems) {
-        mutators.push(schemaItems.getEmptyValue());
-      }
-    };
-    const onMove = (dragIndex, dropIndex) => {
-      mutators.move(dragIndex, dropIndex);
-    };
-    const renderColumns = (items: Schema) => {
-      return items.mapProperties((props, key) => {
-        const itemProps = {
-          ...props.getExtendsItemProps(),
-          ...props.getExtendsProps(),
-        };
-        return {
-          title: complieExpression(props.title, expressionScope),
-          ...itemProps,
-          key,
-          dataIndex: key,
-          render: (value: any, record: any, index: number) => {
-            const newPath = FormPath.parse(path).concat(index, key);
-            return (
-              <FormItemShallowProvider
-                key={newPath.toString()}
-                label={undefined}
-                labelCol={undefined}
-                wrapperCol={undefined}
-              >
-                <SchemaField path={newPath} schema={props} />
-              </FormItemShallowProvider>
-            );
-          },
-        };
-      });
-    };
-    // 兼容异步items schema传入
-    let columns = [];
-    if (schema.items) {
-      columns = isArr(schema.items)
-        ? schema.items.reduce((buf, items) => {
-            return buf.concat(renderColumns(items));
-          }, [])
-        : renderColumns(schema.items);
-    }
-    if (editable && operations !== false) {
-      columns.push({
-        ...operations,
-        key: 'operations',
-        dataIndex: 'operations',
-        width: operationsWidth || 200,
-        render: (value: any, record: any, index: number) => {
-          return (
-            <Form.Item>
-              <div className="array-item-operator">
-                <ArrayList.Remove
-                  index={index}
-                  onClick={() => mutators.remove(index)}
-                />
-                <ArrayList.MoveDown
-                  index={index}
-                  onClick={() => mutators.moveDown(index)}
-                />
-                <ArrayList.MoveUp
-                  index={index}
-                  onClick={() => mutators.moveUp(index)}
-                />
-                {isFn(renderExtraOperations)
-                  ? renderExtraOperations(index)
-                  : renderExtraOperations}
-              </div>
-            </Form.Item>
-          );
-        },
-      });
-    }
-    if (draggable) {
-      columns.unshift({
-        width: 20,
-        key: 'dragHandler',
-        render: () => {
-          return <DragHandler className="drag-handler" />;
-        },
-      });
-    }
-    const renderTable = () => {
-      return (
-        <Table
-          {...componentProps}
-          rowKey={record => {
-            return toArr(value).indexOf(record);
-          }}
-          pagination={false}
-          columns={columns}
-          dataSource={toArr(value)}
-        ></Table>
-      );
-    };
-    return (
-      <div className={className}>
-        <ArrayList
-          value={value}
-          minItems={schema.minItems}
-          maxItems={schema.maxItems}
-          editable={editable}
-          components={ArrayComponents}
-          renders={{
-            renderAddition,
-            renderRemove,
-            renderMoveDown,
-            renderMoveUp,
-            renderEmpty,
-          }}
-        >
-          {draggable ? (
-            <DragListView
-              onDragEnd={onMove}
-              nodeSelector="tr.ant-table-row"
-              ignoreSelector="tr.ant-table-expanded-row"
-            >
-              {renderTable()}
-            </DragListView>
-          ) : (
-            renderTable()
-          )}
-          <ArrayList.Addition>
-            {({ children }) => {
-              return (
-                children && (
-                  <div className="array-table-addition" onClick={onAdd}>
-                    {children}
-                  </div>
-                )
-              );
-            }}
-          </ArrayList.Addition>
-        </ArrayList>
-      </div>
-    );
-  },
-)`
-  width: 100%;
-  margin-bottom: 10px;
-  table {
-    margin-bottom: 0 !important;
-  }
-  .array-table-addition {
-    background: #fbfbfb;
-    cursor: pointer;
-    margin-top: 3px;
-    border-radius: 3px;
-    .next-btn-text {
-      color: #888;
-    }
-    .next-icon:before {
-      width: 16px !important;
-      font-size: 16px !important;
-      margin-right: 5px;
-    }
-  }
-  .ant-btn {
-    color: #888;
-  }
-  .array-item-operator {
-    display: flex;
-    button {
-      margin-right: 8px;
-    }
-  }
-`;
-
-ArrayTable.isFieldComponent = true;
-
-export default ArrayTable;
--- a/packages/app/src/components/fields/array-table/style.ts
+++ b/packages/app/src/components/fields/array-table/style.ts
@ -1 +0,0 @@
-import 'antd/lib/table/style/index';
--- a/packages/app/src/components/fields/automations/index.tsx
+++ b/packages/app/src/components/fields/automations/index.tsx
@ -1,361 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import {
-  Button,
-  Select,
-  DatePicker,
-  Tag,
-  InputNumber,
-  TimePicker,
-  Input,
-} from 'antd';
-import {
-  Select as AntdSelect,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-import moment from 'moment';
-import './style.less';
-import api from '@/api-client';
-import { useRequest } from 'umi';
-
-export const DateTime = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(props => {
-  const { associatedKey, automationType, filter, onChange } = props;
-  const [aKey, setaKey] = useState(associatedKey);
-  const [aType, setaType] = useState(automationType);
-  console.log('Automations.DateTime', aKey, associatedKey);
-  const [value, setValue] = useState(props.value || {});
-  const [offsetType, setOffsetType] = useState(() => {
-    if (!value.offset) {
-      return 'current';
-    }
-    if (value.offset > 0) {
-      return 'after';
-    }
-    if (value.offset < 0) {
-      return 'before';
-    }
-    return 'current';
-  });
-
-  useEffect(() => {
-    if (associatedKey !== aKey || automationType !== aType) {
-      setOffsetType('current');
-      setValue({
-        value: null,
-        byField: null,
-        offset: 0,
-        unit: undefined,
-      });
-      onChange({
-        value: null,
-        byField: null,
-        offset: 0,
-        unit: undefined,
-      });
-      setaKey(associatedKey);
-    }
-  }, [associatedKey, automationType, aKey, aType]);
-  const { data = [], loading = true } = useRequest(
-    () => {
-      return associatedKey && automationType !== 'schedule'
-        ? api.resource('collections.fields').list({
-            associatedKey,
-            filter: filter || {
-              type: 'date',
-            },
-          })
-        : Promise.resolve({ data: [] });
-    },
-    {
-      refreshDeps: [associatedKey, automationType, filter],
-    },
-  );
-  console.log({ data });
-  return (
-    <div>
-      <div>
-        {automationType === 'schedule' ? (
-          <DatePicker
-            showTime
-            onChange={(m, dateString) => {
-              onChange({ value: m.toISOString() });
-              setValue({ value: m.toISOString() });
-              // console.log('Automations.DateTime', m.toISOString(), {m, dateString})
-            }}
-            defaultValue={(() => {
-              if (!value.value) {
-                return undefined;
-              }
-              const m = moment(value.value);
-              return m.isValid() ? m : undefined;
-            })()}
-          />
-        ) : (
-          <Input.Group compact>
-            <Select
-              style={{ width: 120 }}
-              value={value.byField}
-              onChange={v => {
-                setValue({ ...value, byField: v });
-                onChange({ ...value, byField: v });
-              }}
-              loading={loading}
-              options={data.map(item => ({
-                value: item.name,
-                label: item.title || item.name,
-              }))}
-              placeholder={'选择日期字段'}
-            ></Select>
-            <Select
-              onChange={offsetType => {
-                let values = { ...value };
-                switch (offsetType) {
-                  case 'current':
-                    values = { byField: values.byField, offset: 0 };
-                    break;
-                  case 'before':
-                    if (values.offset) {
-                      values.offset = -1 * Math.abs(values.offset);
-                    }
-                    break;
-                  case 'after':
-                    if (values.offset) {
-                      values.offset = Math.abs(values.offset);
-                    }
-                    break;
-                }
-                setOffsetType(offsetType);
-                setValue(values);
-                onChange(values);
-              }}
-              value={offsetType}
-              placeholder={'选择日期字段'}
-            >
-              <Select.Option value={'current'}>当天</Select.Option>
-              <Select.Option value={'before'}>之前</Select.Option>
-              <Select.Option value={'after'}>之后</Select.Option>
-            </Select>
-            {offsetType !== 'current' && (
-              <InputNumber
-                step={1}
-                min={1}
-                value={Math.abs(value.offset) || undefined}
-                onChange={(offset: number) => {
-                  const values = {
-                    unit: 'day',
-                    ...value,
-                  };
-                  if (offsetType === 'before') {
-                    values.offset = -1 * Math.abs(offset);
-                  } else if (offsetType === 'after') {
-                    values.offset = Math.abs(offset);
-                  }
-                  setValue(values);
-                  onChange(values);
-                  console.log('Automations.DateTime', values);
-                  // console.log(offsetType);
-                }}
-                placeholder={'数字'}
-              />
-            )}
-            {offsetType !== 'current' && (
-              <Select
-                onChange={v => {
-                  setValue({ ...value, unit: v });
-                  onChange({ ...value, unit: v });
-                }}
-                value={value.unit}
-                placeholder={'选择单位'}
-              >
-                <Select.Option value={'second'}>秒</Select.Option>
-                <Select.Option value={'minute'}>分钟</Select.Option>
-                <Select.Option value={'hour'}>小时</Select.Option>
-                <Select.Option value={'day'}>天</Select.Option>
-                <Select.Option value={'week'}>周</Select.Option>
-                <Select.Option value={'month'}>月</Select.Option>
-              </Select>
-            )}
-            {offsetType !== 'current' &&
-              value.unit &&
-              ['day', 'week', 'month'].indexOf(value.unit) !== -1 && (
-                <TimePicker
-                  value={(() => {
-                    const m = moment(value.time, 'HH:mm:ss');
-                    return m.isValid() ? m : undefined;
-                  })()}
-                  onChange={(m, dateString) => {
-                    console.log('Automations.DateTime', m, dateString);
-                    setValue({ ...value, time: dateString });
-                    onChange({ ...value, time: dateString });
-                  }}
-                />
-              )}
-          </Input.Group>
-        )}
-      </div>
-    </div>
-  );
-});
-
-const cronmap = {
-  none: '不重复',
-  everysecond: '每秒',
-  everyminute: '每分钟',
-  everyhour: '每小时',
-  everyday: '每天',
-  everyweek: '每周',
-  everymonth: '每月',
-  custom: '自定义',
-};
-
-export const Cron = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(props => {
-  const { value, onChange } = props;
-
-  console.log('Automations.DateTime', { value });
-
-  const re = /every_(\d+)_(.+)/i;
-
-  const match = cronmap[value] ? null : re.exec(value);
-
-  const [unit, setUnit] = useState(match ? match[2] : 'days');
-  const [num, setNum] = useState<any>(match ? parseInt(match[1]) : undefined);
-  const [cron, setCron] = useState(() => {
-    if (!value) {
-      return 'none';
-    }
-    return match ? 'custom' : cronmap[value];
-  });
-
-  return (
-    <div>
-      <Input.Group compact>
-        <Select
-          value={cron}
-          onChange={v => {
-            setCron(v);
-            onChange(v);
-          }}
-        >
-          {Object.keys(cronmap).map(key => {
-            return <Select.Option value={key}>{cronmap[key]}</Select.Option>;
-          })}
-        </Select>
-        {cron === 'custom' && (
-          <Input
-            type={'number'}
-            onChange={e => {
-              const v = parseInt(e.target.value);
-              setNum(v);
-              onChange(`every_${v}_${unit}`);
-            }}
-            defaultValue={num}
-            addonBefore={'每'}
-          />
-        )}
-        {cron === 'custom' && (
-          <Select
-            onChange={v => {
-              setUnit(v);
-              onChange(`every_${num}_${v}`);
-            }}
-            defaultValue={unit}
-          >
-            <Select.Option value={'seconds'}>秒</Select.Option>
-            <Select.Option value={'minutes'}>分钟</Select.Option>
-            <Select.Option value={'hours'}>小时</Select.Option>
-            <Select.Option value={'days'}>天</Select.Option>
-            <Select.Option value={'weeks'}>周</Select.Option>
-            <Select.Option value={'months'}>月</Select.Option>
-          </Select>
-        )}
-      </Input.Group>
-    </div>
-  );
-});
-
-export const EndMode = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(props => {
-  const { value = 'none', onChange, automationType } = props;
-  const re = /after_(\d+)_times/i;
-  const match = re.exec(value);
-
-  const [mode, setMode] = useState(() => {
-    if (automationType === 'schedule' && value === 'byField') {
-      return 'none';
-    } else if (
-      automationType === 'collections:schedule' &&
-      value === 'customTime'
-    ) {
-      return 'none';
-    }
-
-    return match ? 'times' : value;
-  });
-
-  const [num, setNum] = useState(match ? parseInt(match[1]) : undefined);
-
-  useEffect(() => {
-    if (automationType === 'schedule' && value === 'byField') {
-      setMode('none');
-      onChange('none');
-    } else if (
-      automationType === 'collections:schedule' &&
-      value === 'customTime'
-    ) {
-      setMode('none');
-      onChange('none');
-    }
-  }, [automationType]);
-  console.log('Automations.DateTime', { value, automationType, mode });
-
-  return (
-    <div>
-      <Input.Group compact>
-        <Select
-          style={{ width: 150 }}
-          value={mode}
-          onChange={v => {
-            setMode(v);
-            onChange(v);
-          }}
-        >
-          <Select.Option value={'none'}>永不结束</Select.Option>
-          <Select.Option value={'times'}>指定重复次数</Select.Option>
-          {automationType === 'schedule' && (
-            <Select.Option value={'customTime'}>自定义时间</Select.Option>
-          )}
-          {automationType === 'collections:schedule' && (
-            <Select.Option value={'byField'}>根据日期字段</Select.Option>
-          )}
-        </Select>
-        {mode === 'times' && (
-          <Input
-            type={'number'}
-            onChange={e => {
-              const v = parseInt(e.target.value);
-              setNum(v);
-              onChange(`after_${v}_times`);
-            }}
-            defaultValue={num}
-            addonAfter={'次'}
-          />
-        )}
-      </Input.Group>
-    </div>
-  );
-});
-
-export const Automations = {
-  DateTime,
-  Cron,
-  EndMode,
-};
--- a/packages/app/src/components/fields/automations/style.less
+++ b/packages/app/src/components/fields/automations/style.less
@ -1,5 +0,0 @@
-.ant-input-group.ant-input-group-compact {
-  .ant-input-group-wrapper {
-    width: 120px;
-  }
-}
--- a/packages/app/src/components/fields/cascader/index.tsx
+++ b/packages/app/src/components/fields/cascader/index.tsx
@ -1,161 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import { Cascader as AntdCascader } from 'antd';
-import { useRequest } from 'umi';
-import api from '@/api-client';
-import {
-  transformDataSourceKey,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-
-function findTreeNode(
-  tree,
-  values,
-  { value = 'value', children = 'children' },
-) {
-  let node, i;
-  for (node = tree, i = 0; node && values[i]; i++) {
-    node = (node[children] || []).find(
-      item => item[value] === values[i][value],
-    );
-  }
-
-  return node;
-}
-
-export const Cascader = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(function(props) {
-  const {
-    disabled,
-    // target,
-    // labelField,
-    // valueField = 'id',
-    // parentField,
-    // maxLevel,
-    // changeOnSelect,
-    value = [],
-    onChange,
-    schema = {},
-    placeholder,
-    // TODO(feature): 增加静态数据支持
-    // dataSource: []
-  } = props;
-  const {
-    target,
-    targetKey: valueField,
-    // 值字段
-    // valueField: 'code',
-    // 名称字段
-    labelField,
-    // TODO(refactor): 等 toWhere 重构完成后要改成 parent
-    // 上级字段名
-    parentField,
-    maxLevel,
-    // valueField = 'id',
-    // 深度限制，默认：-1（代表不控制，即如果是数据表，则无限加载）
-    // limit: -1,
-    // 可选层级，默认：-1（代表可选的最深层级）
-    // maxLevel: null,
-    // 是否可以不选择到最深一级
-    // 'x-component-props': { changeOnSelect: true }
-    incompletely: changeOnSelect,
-  } = schema;
-
-  const fieldNames = {
-    label: labelField,
-    value: valueField,
-    children: 'children',
-  };
-  const [options, setOptions] = useState([]);
-
-  const { loading, run } = useRequest(
-    async (selectedOptions = []) => {
-      if (maxLevel != null && selectedOptions.length >= maxLevel) {
-        return;
-      }
-
-      const last = selectedOptions[selectedOptions.length - 1] || null;
-      if (last) {
-        if (last.isLeaf) {
-          return;
-        }
-        last.loading = true;
-      }
-
-      return api.resource(target).list({
-        filter: {
-          [parentField]: last && last[valueField],
-        },
-        perPage: -1,
-        sort: [valueField],
-      });
-      // TODO(bug): 关联资源加载问题较多，暂时先用 filter 解决
-      // return api.resource(`${target}.${target}`).list({
-      //   associatedKey: last,
-      //   perPage: -1
-      // });
-    },
-    {
-      manual: true,
-      onSuccess(result, [selectedOptions = []]) {
-        if (!result) {
-          return;
-        }
-
-        const data = result.map(item => ({
-          ...item,
-          isLeaf: maxLevel != null && item.level >= maxLevel,
-        }));
-        // 找到已有值指向的 options 节点
-        const root = { [fieldNames.children]: options };
-        const node = findTreeNode(root, selectedOptions, fieldNames);
-
-        if (node && node !== root) {
-          node.children = data;
-          node.loading = false;
-          // use spread array to avoid popup to be collapsed
-          setOptions([...options]);
-        } else {
-          setOptions(data);
-        }
-      },
-    },
-  );
-
-  // 根据 value 的值，按需预加载相应的数据
-  useEffect(() => {
-    if (value.length) {
-      value.reduce(
-        (promise, option, i) => promise.then(() => run(value.slice(0, i))),
-        Promise.resolve(),
-      );
-    } else {
-      run([]);
-    }
-  }, []);
-
-  return (
-    <AntdCascader
-      placeholder={placeholder}
-      disabled={disabled}
-      options={options}
-      value={value.map(item => item[valueField])}
-      onChange={(v, selected) => {
-        if (maxLevel != null && v.length < maxLevel) {
-          run(selected);
-        }
-        if (changeOnSelect || !v.length || v.length >= maxLevel) {
-          onChange(selected);
-        }
-      }}
-      loadData={run}
-      changeOnSelect={changeOnSelect}
-      fieldNames={fieldNames}
-    />
-  );
-});
-
-export default Cascader;
--- a/packages/app/src/components/fields/cascader/style.ts
+++ b/packages/app/src/components/fields/cascader/style.ts
@ -1 +0,0 @@
-import 'antd/lib/cascader/style/index';
--- a/packages/app/src/components/fields/checkbox/index.tsx
+++ b/packages/app/src/components/fields/checkbox/index.tsx
@ -1,19 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import { Checkbox as AntdCheckbox } from 'antd';
-import {
-  transformDataSourceKey,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-
-export const Checkbox = connect<'Group'>({
-  valueName: 'checked',
-  getProps: mapStyledProps,
-})(AntdCheckbox);
-
-Checkbox.Group = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(transformDataSourceKey(AntdCheckbox.Group, 'options'));
-
-export default Checkbox;
--- a/packages/app/src/components/fields/checkbox/style.ts
+++ b/packages/app/src/components/fields/checkbox/style.ts
@ -1 +0,0 @@
-import 'antd/lib/checkbox/style/index';
--- a/packages/app/src/components/fields/circle-button/index.tsx
+++ b/packages/app/src/components/fields/circle-button/index.tsx
@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from 'antd';
-import { ButtonProps } from 'antd/lib/button';
-
-export const CircleButton: React.FC<ButtonProps> = props => {
-  const hasText = String(props.className || '').indexOf('has-text') > -1;
-  return (
-    <Button
-      type={hasText ? 'link' : undefined}
-      shape={hasText ? undefined : 'circle'}
-      {...props}
-    />
-  );
-};
-
-export default CircleButton;
--- a/packages/app/src/components/fields/circle-button/style.ts
+++ b/packages/app/src/components/fields/circle-button/style.ts
@ -1 +0,0 @@
-import 'antd/lib/button/style/index';
--- a/packages/app/src/components/fields/color-select/index.tsx
+++ b/packages/app/src/components/fields/color-select/index.tsx
@ -1,40 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import React from 'react';
-import { Select, Tag } from 'antd';
-import {
-  Select as AntdSelect,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-
-export const ColorSelect = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(props => {
-  const colors = {
-    red: '薄暮',
-    magenta: '法式洋红',
-    volcano: '火山',
-    orange: '日暮',
-    gold: '金盏花',
-    lime: '青柠',
-    green: '极光绿',
-    cyan: '明青',
-    blue: '拂晓蓝',
-    geekblue: '极客蓝',
-    purple: '酱紫',
-    default: '默认',
-  };
-
-  return (
-    <Select {...props}>
-      {Object.keys(colors).map(color => (
-        <Select.Option value={color}>
-          <Tag color={color}>{colors[color]}</Tag>
-        </Select.Option>
-      ))}
-    </Select>
-  );
-});
-
-export default ColorSelect;
--- a/packages/app/src/components/fields/date-picker/index.tsx
+++ b/packages/app/src/components/fields/date-picker/index.tsx
@ -1,105 +0,0 @@
-import React from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import moment from 'moment';
-import { DatePicker as AntdDatePicker } from 'antd';
-import {
-  mapStyledProps,
-  mapTextComponent,
-  compose,
-  isStr,
-  isArr,
-} from '../shared';
-
-class YearPicker extends React.Component {
-  public render() {
-    return <AntdDatePicker {...this.props} picker={'year'} />;
-  }
-}
-
-const transformMoment = (value, format = 'YYYY-MM-DD HH:mm:ss') => {
-  if (value === '') return undefined;
-  return value && value.format ? value.format(format) : value;
-};
-
-const mapMomentValue = (props: any, fieldProps: any) => {
-  const { value, showTime = false } = props;
-  if (!fieldProps.editable) return props;
-  try {
-    if (isStr(value) && value) {
-      props.value = moment(
-        value,
-        showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD',
-      );
-    } else if (isArr(value) && value.length) {
-      props.value = value.map(
-        item =>
-          (item &&
-            moment(item, showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD')) ||
-          '',
-      );
-    }
-  } catch (e) {
-    throw new Error(e);
-  }
-  return props;
-};
-
-export const DatePicker = connect<
-  'RangePicker' | 'MonthPicker' | 'YearPicker' | 'WeekPicker'
->({
-  getValueFromEvent(_, value) {
-    const props = this.props || {};
-    return transformMoment(
-      value,
-      props.format || (props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'),
-    );
-  },
-  getProps: compose(mapStyledProps, mapMomentValue),
-  getComponent: mapTextComponent,
-})(AntdDatePicker);
-
-DatePicker.RangePicker = connect({
-  getValueFromEvent(_, [startDate, endDate]) {
-    const props = this.props || {};
-    const format =
-      props.format || (props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
-    return [
-      transformMoment(startDate, format),
-      transformMoment(endDate, format),
-    ];
-  },
-  getProps: compose(mapStyledProps, mapMomentValue),
-  getComponent: mapTextComponent,
-})(AntdDatePicker.RangePicker);
-
-DatePicker.MonthPicker = connect({
-  getValueFromEvent(_, value) {
-    return transformMoment(value);
-  },
-  getProps: compose(mapStyledProps, mapMomentValue),
-  getComponent: mapTextComponent,
-})(AntdDatePicker.MonthPicker);
-
-DatePicker.WeekPicker = connect({
-  getValueFromEvent(_, value) {
-    return transformMoment(value, 'gggg-wo');
-  },
-  getProps: compose(mapStyledProps, props => {
-    if (isStr(props.value) && props.value) {
-      const parsed = props.value.match(/\D*(\d+)\D*(\d+)\D*/) || ['', '', ''];
-      props.value = moment(parsed[1], 'YYYY').add(parsed[2] - 1, 'weeks');
-    }
-    return props;
-  }),
-  getComponent: mapTextComponent,
-})(AntdDatePicker.WeekPicker);
-
-DatePicker.YearPicker = connect({
-  getValueFromEvent(_, value) {
-    return transformMoment(value, 'YYYY');
-  },
-  getProps: compose(mapStyledProps, mapMomentValue),
-  getComponent: mapTextComponent,
-})(YearPicker);
-
-export default DatePicker;
--- a/packages/app/src/components/fields/date-picker/style.ts
+++ b/packages/app/src/components/fields/date-picker/style.ts
@ -1 +0,0 @@
-import 'antd/lib/date-picker/style/index';
--- a/packages/app/src/components/fields/drawer-select/index.tsx
+++ b/packages/app/src/components/fields/drawer-select/index.tsx
@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import { Select, Button, Space } from 'antd';
-import {
-  mapStyledProps,
-  mapTextComponent,
-  compose,
-  isStr,
-  isArr,
-} from '../shared';
-import Drawer from '@/components/drawer';
-import View from '@/components/views';
-
-function transform({ value, multiple, labelField, valueField = 'id' }) {
-  let selectedKeys = [];
-  let selectedValue = [];
-  const values = Array.isArray(value) ? value : [value];
-  selectedKeys = values.filter(item => item).map(item => item[valueField]);
-  selectedValue = values
-    .filter(item => item)
-    .map(item => {
-      return {
-        value: item[valueField],
-        label: item[labelField],
-      };
-    });
-  if (!multiple) {
-    return [selectedKeys.shift(), selectedValue.shift()];
-  }
-  return [selectedKeys, selectedValue];
-}
-
-export function DrawerSelectComponent(props) {
-  const {
-    __parent,
-    size,
-    schema = {},
-    disabled,
-    viewName,
-    target,
-    multiple,
-    filter,
-    resourceName,
-    associatedKey,
-    valueField = 'id',
-    value,
-    onChange,
-  } = props;
-  const labelField = props.labelField || schema.labelField;
-  const [selectedKeys, selectedValue] = transform({
-    value,
-    multiple,
-    labelField,
-    valueField,
-  });
-  const [selectedRowKeys, setSelectedRowKeys] = useState(
-    multiple ? selectedKeys : [selectedKeys],
-  );
-  const [selectedRows, setSelectedRows] = useState(selectedValue);
-  const [options, setOptions] = useState(selectedValue);
-  const { title = '' } = schema;
-  console.log({ schema });
-  return (
-    <>
-      <Select
-        disabled={disabled}
-        open={false}
-        mode={multiple ? 'tags' : undefined}
-        labelInValue
-        size={size}
-        allowClear={true}
-        value={options}
-        notFoundContent={''}
-        onChange={data => {
-          setOptions(data);
-          if (Array.isArray(data)) {
-            const srks = data.map(item => item.value);
-            onChange(srks);
-            setSelectedRowKeys(srks);
-            console.log('datadatadatadata', { data, srks });
-          } else if (data && typeof data === 'object') {
-            onChange(data.value);
-            setSelectedRowKeys([data.value]);
-          } else {
-            console.log(data);
-            onChange(null);
-            setSelectedRowKeys([]);
-          }
-        }}
-        onClick={() => {
-          if (!disabled) {
-            Drawer.open({
-              title: `选择要关联的${title}数据`,
-              content: ({ resolve }) => {
-                console.log(
-                  'valuevaluevaluevaluevaluevalue',
-                  selectedRowKeys,
-                  selectedRows,
-                  options,
-                );
-                const [rows, setRows] = useState(selectedRows);
-                const [rowKeys, setRowKeys] = useState(selectedRowKeys);
-                const [selected, setSelected] = useState(
-                  Array.isArray(value) ? value : [value],
-                );
-                console.log({ selectedRowKeys });
-                return (
-                  <>
-                    <View
-                      isFieldComponent={true}
-                      __parent={__parent}
-                      associatedKey={associatedKey}
-                      multiple={multiple}
-                      defaultFilter={filter}
-                      defaultSelectedRowKeys={selectedRowKeys}
-                      onSelected={values => {
-                        setSelected(values);
-                        const [selectedKeys, selectedValue] = transform({
-                          value: values,
-                          multiple: true,
-                          labelField,
-                          valueField,
-                        });
-                        setSelectedRows(selectedValue);
-                        setRows(selectedValue);
-                        setSelectedRowKeys(selectedKeys);
-                        setRowKeys(selectedKeys);
-                        console.log({ values, selectedValue, selectedKeys });
-                        console.log({ selectedRows, selectedRowKeys });
-                      }}
-                      viewName={viewName || `${target}.table`}
-                    />
-                    <Drawer.Footer>
-                      <Space>
-                        <Button onClick={resolve}>取消</Button>
-                        <Button
-                          onClick={() => {
-                            setOptions(rows);
-                            // console.log('valuevaluevaluevaluevaluevalue', {selectedRowKeys});
-                            onChange(multiple ? selected : selected.shift());
-                            // console.log({rows, rowKeys});
-                            resolve();
-                          }}
-                          type={'primary'}
-                        >
-                          确定
-                        </Button>
-                      </Space>
-                    </Drawer.Footer>
-                  </>
-                );
-              },
-            });
-            // setVisible(true);
-          }
-        }}
-      ></Select>
-    </>
-  );
-}
-
-export const DrawerSelect = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(DrawerSelectComponent);
-
-export default DrawerSelect;
--- a/packages/app/src/components/fields/filter/index.tsx
+++ b/packages/app/src/components/fields/filter/index.tsx
@ -1,646 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import {
-  Button,
-  Select,
-  Input,
-  Space,
-  Form,
-  InputNumber,
-  DatePicker,
-  TimePicker,
-  Radio,
-} from 'antd';
-import { PlusCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
-import useDynamicList from './useDynamicList';
-import { connect } from '@formily/react-schema-renderer';
-import { mapStyledProps } from '../shared';
-import get from 'lodash/get';
-import moment from 'moment';
-import './style.less';
-import api from '@/api-client';
-import { useRequest } from 'umi';
-
-export function FilterGroup(props: any) {
-  const {
-    showDeleteButton = true,
-    fields = [],
-    sourceFields = [],
-    onDelete,
-    onChange,
-    onAdd,
-    dataSource = {},
-  } = props;
-  const { list, getKey, push, remove, replace } = useDynamicList<any>(
-    dataSource.list || [
-      {
-        type: 'item',
-      },
-    ],
-  );
-  let style: any = {
-    position: 'relative',
-  };
-  if (showDeleteButton) {
-    style = {
-      ...style,
-      marginBottom: 14,
-      padding: 14,
-      border: '1px dashed #dedede',
-    };
-  }
-  return (
-    <div style={style}>
-      <div style={{ marginBottom: 14 }}>
-        满足组内{' '}
-        <Select
-          style={{ width: 80 }}
-          onChange={value => {
-            onChange({ type: 'group', list, andor: value });
-          }}
-          defaultValue={dataSource.andor || 'and'}
-        >
-          <Select.Option value={'and'}>全部</Select.Option>
-          <Select.Option value={'or'}>任意</Select.Option>
-        </Select>{' '}
-        条件
-      </div>
-      <div>
-        {list.map((item, index) => {
-          // console.log(item);
-          const Component = item.type === 'group' ? FilterGroup : FilterItem;
-          return (
-            <div style={{ marginBottom: 8 }}>
-              {
-                <Component
-                  fields={fields}
-                  sourceFields={sourceFields}
-                  dataSource={item}
-                  // showDeleteButton={list.length > 1}
-                  onChange={value => {
-                    replace(index, value);
-                    const newList = [...list];
-                    newList[index] = value;
-                    onChange({ ...dataSource, list: newList });
-                    // console.log(list, value, index);
-                  }}
-                  onDelete={() => {
-                    remove(index);
-                    const newList = [...list];
-                    newList.splice(index, 1);
-                    onChange({ ...dataSource, list: newList });
-                    // console.log(list, index);
-                  }}
-                />
-              }
-            </div>
-          );
-        })}
-      </div>
-      <div>
-        <Space>
-          <Button
-            style={{ padding: 0 }}
-            type={'link'}
-            onClick={() => {
-              const data = {
-                type: 'item',
-              };
-              push(data);
-              const newList = [...list];
-              newList.push(data);
-              onChange({ ...dataSource, list: newList });
-            }}
-          >
-            <PlusCircleOutlined /> 添加条件
-          </Button>{' '}
-          <Button
-            style={{ padding: 0 }}
-            type={'link'}
-            onClick={() => {
-              const data = {
-                type: 'group',
-                list: [
-                  {
-                    type: 'item',
-                  },
-                ],
-              };
-              push(data);
-              const newList = [...list];
-              newList.push(data);
-              onChange({ ...dataSource, list: newList });
-            }}
-          >
-            <PlusCircleOutlined /> 添加条件组
-          </Button>
-          {showDeleteButton && (
-            <Button
-              className={'filter-remove-link filter-group'}
-              style={{
-                padding: 0,
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                width: 32,
-              }}
-              type={'link'}
-              onClick={e => {
-                onDelete && onDelete(e);
-              }}
-            >
-              <CloseCircleOutlined />
-            </Button>
-          )}
-        </Space>
-      </div>
-    </div>
-  );
-}
-
-interface FieldOptions {
-  name: string;
-  title: string;
-  interface: string;
-  [key: string]: any;
-}
-
-interface FilterItemProps {
-  fields: FieldOptions[];
-  [key: string]: any;
-}
-
-const OP_MAP = {
-  string: [
-    { label: '包含', value: '$includes', selected: true },
-    { label: '不包含', value: '$notIncludes' },
-    { label: '等于', value: 'eq' },
-    { label: '不等于', value: 'ne' },
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-  ],
-  number: [
-    { label: '等于', value: 'eq', selected: true },
-    { label: '不等于', value: 'ne' },
-    { label: '大于', value: 'gt' },
-    { label: '大于等于', value: 'gte' },
-    { label: '小于', value: 'lt' },
-    { label: '小于等于', value: 'lte' },
-    // {label: '介于', value: 'between'},
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-  ],
-  file: [
-    { label: '存在', value: 'id.gt' },
-    { label: '不存在', value: 'id.$null' },
-  ],
-  boolean: [
-    { label: '是', value: '$isTruly', selected: true },
-    { label: '否', value: '$isFalsy' },
-  ],
-  select: [
-    { label: '等于', value: 'eq', selected: true },
-    { label: '不等于', value: 'ne' },
-    { label: '包含', value: 'in' },
-    { label: '不包含', value: 'notIn' },
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-  ],
-  multipleSelect: [
-    { label: '等于', value: '$match', selected: true },
-    { label: '不等于', value: '$notMatch' },
-    { label: '包含', value: '$anyOf' },
-    { label: '不包含', value: '$noneOf' },
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-  ],
-  datetime: [
-    { label: '等于', value: '$dateOn', selected: true },
-    { label: '不等于', value: '$dateNotOn' },
-    { label: '早于', value: '$dateBefore' },
-    { label: '晚于', value: '$dateAfter' },
-    { label: '不早于', value: '$dateNotBefore' },
-    { label: '不晚于', value: '$dateNotAfter' },
-    // {label: '介于', value: 'between'},
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-    // {label: '是今天', value: 'now'},
-    // {label: '在今天之前', value: 'before_today'},
-    // {label: '在今天之后', value: 'after_today'},
-  ],
-  time: [
-    { label: '等于', value: 'eq', selected: true },
-    { label: '不等于', value: 'neq' },
-    { label: '大于', value: 'gt' },
-    { label: '大于等于', value: 'gte' },
-    { label: '小于', value: 'lt' },
-    { label: '小于等于', value: 'lte' },
-    // {label: '介于', value: 'between'},
-    { label: '非空', value: '$notNull' },
-    { label: '为空', value: '$null' },
-    // {label: '是今天', value: 'now'},
-    // {label: '在今天之前', value: 'before_today'},
-    // {label: '在今天之后', value: 'after_today'},
-  ],
-  // linkTo: [
-  //   {label: '包含', value: 'cont'},
-  //   {label: '不包含', value: 'ncont'},
-  //   {label: '非空', value: '$notNull'},
-  //   {label: '为空', value: '$null'},
-  // ],
-};
-
-const op = {
-  string: OP_MAP.string,
-  textarea: OP_MAP.string,
-  number: OP_MAP.number,
-  percent: OP_MAP.number,
-  datetime: OP_MAP.datetime,
-  date: OP_MAP.datetime,
-  time: OP_MAP.time,
-  checkbox: OP_MAP.boolean,
-  boolean: OP_MAP.boolean,
-  select: OP_MAP.select,
-  multipleSelect: OP_MAP.multipleSelect,
-  checkboxes: OP_MAP.multipleSelect,
-  radio: OP_MAP.select,
-  upload: OP_MAP.file,
-  attachment: OP_MAP.file,
-};
-
-const StringInput = props => {
-  const { value, onChange, ...restProps } = props;
-  return (
-    <Input
-      {...restProps}
-      defaultValue={value}
-      onChange={e => {
-        onChange(e.target.value);
-      }}
-    />
-  );
-};
-
-const controls = {
-  string: StringInput,
-  textarea: StringInput,
-  number: InputNumber,
-  percent: props => (
-    <InputNumber
-      formatter={value => (value ? `${value}%` : '')}
-      parser={value => value.replace('%', '')}
-      {...props}
-    />
-  ),
-  boolean: BooleanControl,
-  checkbox: BooleanControl,
-  select: OptionControl,
-  radio: OptionControl,
-  checkboxes: OptionControl,
-  multipleSelect: OptionControl,
-  time: TimeControl,
-  date: DateControl,
-};
-
-function DateControl(props: any) {
-  const { field, value, onChange, ...restProps } = props;
-  let format = field.dateFormat;
-  // if (field.showTime) {
-  //   format += ` ${field.timeFormat}`;
-  // }
-  const m = moment(value, format);
-  return (
-    <DatePicker
-      format={format}
-      value={m.isValid() ? m : null}
-      onChange={value => {
-        onChange(value ? value.format('YYYY-MM-DD') : null);
-      }}
-    />
-  );
-  // return (
-  //   <DatePicker format={format} showTime={field.showTime} value={m.isValid() ? m : null} onChange={(value) => {
-  //     onChange(value ? value.format(field.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD') : null)
-  //   }}/>
-  // );
-}
-
-function TimeControl(props: any) {
-  const { field, value, onChange, ...restProps } = props;
-  let format = field.timeFormat;
-  const m = moment(value, format);
-  return (
-    <TimePicker
-      value={m.isValid() ? m : null}
-      format={field.timeFormat}
-      onChange={value => {
-        onChange(value ? value.format('HH:mm:ss') : null);
-      }}
-    />
-  );
-}
-
-function OptionControl(props) {
-  const { multiple = true, op, options, value, onChange, ...restProps } = props;
-  let mode: any = 'multiple';
-  if (!multiple && ['eq', 'ne'].indexOf(op) !== -1) {
-    mode = undefined;
-  }
-  return (
-    <Select
-      style={{ minWidth: 120 }}
-      mode={mode}
-      value={value}
-      onChange={value => {
-        onChange(value);
-      }}
-      options={options}
-    ></Select>
-  );
-}
-
-function BooleanControl(props) {
-  const { value, onChange, ...restProps } = props;
-  return (
-    <Radio.Group
-      value={value}
-      onChange={e => {
-        onChange(e.target.value);
-      }}
-    >
-      <Radio value={true}>是</Radio>
-      <Radio value={false}>否</Radio>
-    </Radio.Group>
-  );
-}
-
-function NullControl(props) {
-  return null;
-}
-
-function getComponentTypeByField(field) {
-  if (!field.component) {
-    return 'string';
-  }
-  let componentType = field.component.type;
-  if (field.component.type === 'select' && field.multiple) {
-    componentType = 'multipleSelect';
-  }
-  return componentType;
-}
-
-export function FilterItem(props: FilterItemProps) {
-  const {
-    index,
-    fields = [],
-    sourceFields = [],
-    showDeleteButton = true,
-    onDelete,
-    onChange,
-  } = props;
-  const defaultField: any =
-    fields.find(field => field.name === props.dataSource.column) || {};
-  const componentType = getComponentTypeByField(defaultField);
-  // const [type, setType] = useState(defaultField.interface || 'string');
-  const [field, setField] = useState<any>({});
-  const [dataSource, setDataSource] = useState(props.dataSource || {});
-  const [valueType, setValueType] = useState('custom');
-  useEffect(() => {
-    const field = fields.find(field => field.name === props.dataSource.column);
-    if (field) {
-      setField(field);
-      // let componentType = getComponentTypeByField(field);
-      // setType(componentType);
-    }
-    setDataSource({ ...props.dataSource });
-    if (/^{{.+}}$/.test(props.dataSource.value)) {
-      setValueType('ref');
-    }
-  }, [props.dataSource]);
-  let ValueControl = controls[componentType] || controls.string;
-  if (
-    ['$null', '$notNull', '$isTruly', '$isFalsy'].indexOf(dataSource.op) !== -1
-  ) {
-    ValueControl = NullControl;
-  }
-  if (['boolean', 'checkbox'].indexOf(componentType) !== -1) {
-    ValueControl = NullControl;
-  }
-  // let multiple = true;
-  // if ()
-  const opOptions = op[componentType || 'string'] || op.string;
-  console.log({ componentType, defaultField, field, valueType, opOptions });
-  return (
-    <Space>
-      <Select
-        value={dataSource.column}
-        onChange={value => {
-          const field = fields.find(field => field.name === value);
-          let componentType = getComponentTypeByField(field);
-          // setType(componentType);
-          setValueType('custom');
-          onChange({
-            ...dataSource,
-            column: value,
-            op: get(op, [componentType, 0, 'value']),
-            value: undefined,
-          });
-        }}
-        style={{ width: 120 }}
-        placeholder={'选择字段'}
-      >
-        {fields.map(field => (
-          <Select.Option value={field.name}>{field.title}</Select.Option>
-        ))}
-      </Select>
-      <Select
-        value={dataSource.column ? dataSource.op : null}
-        style={{ minWidth: 100 }}
-        onChange={value => {
-          onChange({ ...dataSource, op: value });
-        }}
-        // value={get(opOptions, [0, 'value'])}
-        options={opOptions}
-      >
-        {/* {(op[type]||op.string).map(option => (
-          <Select.Option value={option.value}>{option.label}</Select.Option>
-        ))} */}
-      </Select>
-      {sourceFields.length > 0 && (
-        <Select
-          style={{ minWidth: 100 }}
-          onChange={value => {
-            setDataSource({ ...dataSource, value: undefined });
-            onChange({ ...dataSource, value: undefined });
-            setValueType(value);
-          }}
-          defaultValue={valueType}
-        >
-          <Select.Option value={'custom'}>自定义</Select.Option>
-          <Select.Option value={'ref'}>触发表字段</Select.Option>
-        </Select>
-      )}
-      {valueType !== 'ref' ? (
-        <ValueControl
-          field={defaultField}
-          multiple={componentType === 'checkboxes' || !!defaultField.multiple}
-          op={dataSource.op}
-          options={defaultField.dataSource}
-          value={dataSource.value}
-          onChange={value => {
-            onChange({ ...dataSource, value: value });
-          }}
-          style={{ width: 180 }}
-        />
-      ) : sourceFields.length > 0 ? (
-        <Select
-          value={dataSource.value}
-          onChange={value => {
-            onChange({ ...dataSource, value: value });
-          }}
-          style={{ width: 120 }}
-          placeholder={'选择字段'}
-        >
-          {sourceFields.map(field => (
-            <Select.Option value={`{{ ${field.name} }}`}>
-              {field.title}
-            </Select.Option>
-          ))}
-        </Select>
-      ) : null}
-      {showDeleteButton && (
-        <Button
-          className={'filter-remove-link filter-item'}
-          type={'link'}
-          style={{ padding: 0 }}
-          onClick={e => {
-            onDelete && onDelete(e);
-          }}
-        >
-          <CloseCircleOutlined />
-        </Button>
-      )}
-    </Space>
-  );
-}
-
-function toFilter(values: any) {
-  let filter: any;
-  let { type, andor = 'and', list = [], column, op, value } = values;
-  if (type === 'group') {
-    filter = {
-      [andor]: list.map(value => toFilter(value)).filter(Boolean),
-    };
-  } else if (type === 'item' && column && op) {
-    if (
-      [
-        'id.$null',
-        'id.$notNull',
-        '$null',
-        '$notNull',
-        '$isTruly',
-        '$isFalsy',
-      ].indexOf(op) !== -1
-    ) {
-      value = true;
-    }
-    // if (op === 'id.gt') {
-    //   value = 0;
-    // }
-    filter = {
-      [`${column}`]: { [op]: value },
-    };
-  }
-  return filter;
-}
-
-function toValues(filter: any = {}) {
-  let values: any = {};
-  Object.keys(filter).forEach(key => {
-    const value = filter[key];
-    if (Array.isArray(value)) {
-      values['andor'] = key;
-      values['type'] = 'group';
-      values['list'] = value.map(v => toValues(v));
-    } else if (typeof value === 'object') {
-      values['type'] = 'item';
-      values['column'] = key;
-      values['op'] = Object.keys(value).shift();
-      values['value'] = Object.values(value).shift();
-    }
-  });
-  return values;
-}
-
-export const Filter = connect({
-  getProps: mapStyledProps,
-})(props => {
-  const dataSource = {
-    type: 'group',
-    list: [
-      {
-        type: 'item',
-      },
-    ],
-  };
-  const {
-    value,
-    onChange,
-    associatedKey,
-    filter = {},
-    sourceName,
-    sourceFilter = {},
-    fields = [],
-    ...restProps
-  } = props;
-  console.log('filter', { associatedKey });
-  const { data = [], loading = true } = useRequest(
-    () => {
-      return associatedKey
-        ? api.resource(`collections.fields`).list({
-            associatedKey,
-            filter,
-            perPage: -1,
-          })
-        : Promise.resolve({
-            data: fields,
-          });
-    },
-    {
-      refreshDeps: [associatedKey],
-    },
-  );
-
-  const { data: sourceFields = [] } = useRequest(
-    () => {
-      return sourceName
-        ? api.resource(`collections.fields`).list({
-            associatedKey: sourceName,
-            filter: sourceFilter,
-            perPage: -1,
-          })
-        : Promise.resolve({
-            data: [],
-          });
-    },
-    {
-      refreshDeps: [sourceName],
-    },
-  );
-  console.log({ sourceName, sourceFields });
-
-  return (
-    <FilterGroup
-      showDeleteButton={false}
-      dataSource={value ? toValues(value) : dataSource}
-      onChange={values => {
-        console.log(values);
-        onChange(toFilter(values));
-      }}
-      {...restProps}
-      sourceFields={sourceFields}
-      fields={data.filter(item => item.filterable)}
-    />
-  );
-});
-
-export default Filter;
--- a/packages/app/src/components/fields/filter/style.less
+++ b/packages/app/src/components/fields/filter/style.less
@ -1,3 +0,0 @@
-.filter-remove-link {
-  color: #d9d9d9;
-}
--- a/packages/app/src/components/fields/filter/useDynamicList.ts
+++ b/packages/app/src/components/fields/filter/useDynamicList.ts
@ -1,163 +0,0 @@
-import { useCallback, useRef, useState } from 'react';
-
-export default <T>(initialValue: T[]) => {
-  const counterRef = useRef(-1);
-  // key 存储器
-  const keyList = useRef<number[]>([]);
-
-  // 内部方法
-  const setKey = useCallback((index: number) => {
-    counterRef.current += 1;
-    keyList.current.splice(index, 0, counterRef.current);
-  }, []);
-
-  const [list, setList] = useState(() => {
-    (initialValue || []).forEach((_, index) => {
-      setKey(index);
-    });
-    return initialValue || [];
-  });
-
-  const resetList = (newList: T[] = []) => {
-    keyList.current = [];
-    counterRef.current = -1;
-    setList(() => {
-      (newList || []).forEach((_, index) => {
-        setKey(index);
-      });
-      return newList || [];
-    });
-  };
-
-  const insert = (index: number, obj: T) => {
-    setList(l => {
-      const temp = [...l];
-      temp.splice(index, 0, obj);
-      setKey(index);
-      return temp;
-    });
-  };
-
-  const getAll = () => list;
-  const getKey = (index: number) => keyList.current[index];
-  const getIndex = (index: number) =>
-    keyList.current.findIndex(ele => ele === index);
-
-  const merge = (index: number, obj: T[]) => {
-    setList(l => {
-      const temp = [...l];
-      obj.forEach((_, i) => {
-        setKey(index + i);
-      });
-      temp.splice(index, 0, ...obj);
-      return temp;
-    });
-  };
-
-  const replace = (index: number, obj: T) => {
-    setList(l => {
-      const temp = [...l];
-      temp[index] = obj;
-      return temp;
-    });
-  };
-
-  const remove = (index: number) => {
-    setList(l => {
-      const temp = [...l];
-      temp.splice(index, 1);
-
-      // remove keys if necessary
-      try {
-        keyList.current.splice(index, 1);
-      } catch (e) {
-        console.error(e);
-      }
-      return temp;
-    });
-  };
-
-  const move = (oldIndex: number, newIndex: number) => {
-    if (oldIndex === newIndex) {
-      return;
-    }
-    setList(l => {
-      const newList = [...l];
-      const temp = newList.filter((_: {}, index: number) => index !== oldIndex);
-      temp.splice(newIndex, 0, newList[oldIndex]);
-
-      // move keys if necessary
-      try {
-        const keyTemp = keyList.current.filter(
-          (_: {}, index: number) => index !== oldIndex,
-        );
-        keyTemp.splice(newIndex, 0, keyList.current[oldIndex]);
-        keyList.current = keyTemp;
-      } catch (e) {
-        console.error(e);
-      }
-
-      return temp;
-    });
-  };
-
-  const push = (obj: T) => {
-    setList(l => {
-      setKey(l.length);
-      return l.concat([obj]);
-    });
-  };
-
-  const pop = () => {
-    // remove keys if necessary
-    try {
-      keyList.current = keyList.current.slice(0, keyList.current.length - 1);
-    } catch (e) {
-      console.error(e);
-    }
-
-    setList(l => l.slice(0, l.length - 1));
-  };
-
-  const unshift = (obj: T) => {
-    setList(l => {
-      setKey(0);
-      return [obj].concat(l);
-    });
-  };
-
-  const sortForm = (result: unknown[]) =>
-    result
-      .map((item, index) => ({ key: index, item })) // add index into obj
-      .sort((a, b) => getIndex(a.key) - getIndex(b.key)) // sort based on the index of table
-      .filter(item => !!item.item) // remove undefined(s)
-      .map(item => item.item); // retrive the data
-
-  const shift = () => {
-    // remove keys if necessary
-    try {
-      keyList.current = keyList.current.slice(1, keyList.current.length);
-    } catch (e) {
-      console.error(e);
-    }
-    setList(l => l.slice(1, l.length));
-  };
-
-  return {
-    list,
-    insert,
-    merge,
-    replace,
-    remove,
-    getAll,
-    getKey,
-    getIndex,
-    move,
-    push,
-    pop,
-    unshift,
-    shift,
-    sortForm,
-    resetList,
-  };
-};
--- a/packages/app/src/components/fields/form-block/index.tsx
+++ b/packages/app/src/components/fields/form-block/index.tsx
@ -1,24 +0,0 @@
-import React from 'react';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { Card } from 'antd';
-import { CardProps } from 'antd/lib/card';
-import styled from 'styled-components';
-
-export const FormBlock = createVirtualBox<CardProps>(
-  'block',
-  styled(({ children, className, ...props }) => {
-    return (
-      <Card className={className} size="small" {...props}>
-        {children}
-      </Card>
-    );
-  })`
-    margin-bottom: 10px !important;
-    &.ant-card {
-      border: none;
-      box-shadow: none;
-    }
-  `,
-);
-
-export default FormBlock;
--- a/packages/app/src/components/fields/form-block/style.ts
+++ b/packages/app/src/components/fields/form-block/style.ts
@ -1 +0,0 @@
-import 'antd/lib/card/style/index';
--- a/packages/app/src/components/fields/form-card/index.tsx
+++ b/packages/app/src/components/fields/form-card/index.tsx
@ -1,20 +0,0 @@
-import React from 'react';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { Card } from 'antd';
-import { CardProps } from 'antd/lib/card';
-import styled from 'styled-components';
-
-export const FormCard = createVirtualBox<CardProps>(
-  'card',
-  styled(({ children, className, ...props }) => {
-    return (
-      <Card className={className} size="small" {...props}>
-        {children}
-      </Card>
-    );
-  })`
-    margin-bottom: 10px !important;
-  `,
-);
-
-export default FormCard;
--- a/packages/app/src/components/fields/form-card/style.ts
+++ b/packages/app/src/components/fields/form-card/style.ts
@ -1 +0,0 @@
-import 'antd/lib/card/style/index';
--- a/packages/app/src/components/fields/form-description/index.tsx
+++ b/packages/app/src/components/fields/form-description/index.tsx
@ -1,50 +0,0 @@
-import React from 'react';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { Card } from 'antd';
-import styled from 'styled-components';
-import { markdown } from '@/components/views/Field';
-
-export const FormDescription = createVirtualBox(
-  'description',
-  styled(({ schema = {}, children, className, ...props }) => {
-    const { title, tooltip } = schema as any;
-    console.log({ schema });
-    return (
-      <Card
-        title={title}
-        size={'small'}
-        headStyle={{ padding: 0 }}
-        bodyStyle={{
-          padding: 0,
-        }}
-        className={className}
-        {...props}
-      >
-        {typeof tooltip === 'string' && tooltip && (
-          <div dangerouslySetInnerHTML={{ __html: markdown(tooltip) }}></div>
-        )}
-      </Card>
-    );
-  })`
-    margin-bottom: 24px !important;
-    &.ant-card {
-      border: none;
-      box-shadow: none;
-      .ant-card-head {
-        font-size: 16px;
-        background: #fafafa;
-        margin: 0 -24px;
-        padding: 4px 24px !important;
-        border-top: 1px solid #f0f0f0;
-      }
-      p:first-child {
-        margin-top: 14px;
-      }
-      p:last-child {
-        margin-bottom: 0;
-      }
-    }
-  `,
-);
-
-export default FormDescription;
--- a/packages/app/src/components/fields/form-grid-col/index.tsx
+++ b/packages/app/src/components/fields/form-grid-col/index.tsx
@ -1,10 +0,0 @@
-import React from 'react';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { Col } from 'antd';
-import { ColProps } from 'antd/lib/grid';
-
-export const FormGridCol = createVirtualBox<ColProps>('grid-col', props => {
-  return <Col {...props}>{props.children}</Col>;
-});
-
-export default FormGridCol;
--- a/packages/app/src/components/fields/form-grid-col/style.ts
+++ b/packages/app/src/components/fields/form-grid-col/style.ts
@ -1 +0,0 @@
-import 'antd/lib/col/style/index';
--- a/packages/app/src/components/fields/form-grid-row/index.tsx
+++ b/packages/app/src/components/fields/form-grid-row/index.tsx
@ -1,25 +0,0 @@
-import React from 'react';
-import { AntdSchemaFieldAdaptor, pickFormItemProps } from '@formily/antd';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { Row } from 'antd';
-import { RowProps } from 'antd/lib/grid';
-import { FormItemProps as ItemProps } from 'antd/lib/form';
-import { IItemProps } from '../types';
-
-export const FormGridRow = createVirtualBox<RowProps & ItemProps & IItemProps>(
-  'grid-row',
-  props => {
-    const { title, label } = props;
-    const grids = <Row {...props}>{props.children}</Row>;
-    if (title || label) {
-      return (
-        <AntdSchemaFieldAdaptor {...pickFormItemProps(props)}>
-          {grids}
-        </AntdSchemaFieldAdaptor>
-      );
-    }
-    return grids;
-  },
-);
-
-export default FormGridRow;
--- a/packages/app/src/components/fields/form-grid-row/style.ts
+++ b/packages/app/src/components/fields/form-grid-row/style.ts
@ -1 +0,0 @@
-import 'antd/lib/row/style/index';
--- a/packages/app/src/components/fields/form-item-grid/index.tsx
+++ b/packages/app/src/components/fields/form-item-grid/index.tsx
@ -1,68 +0,0 @@
-import React, { Fragment } from 'react';
-import {
-  AntdSchemaFieldAdaptor,
-  pickFormItemProps,
-  pickNotFormItemProps,
-} from '@formily/antd';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import { toArr } from '@formily/shared';
-import { Row, Col } from 'antd';
-import { FormItemProps as ItemProps } from 'antd/lib/form';
-import { IFormItemGridProps, IItemProps } from '../types';
-import { normalizeCol } from '../shared';
-
-export const FormItemGrid = createVirtualBox<
-  React.PropsWithChildren<IFormItemGridProps & ItemProps & IItemProps>
->('grid', props => {
-  const {
-    cols: rawCols,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    title,
-    label,
-  } = props;
-  const formItemProps = pickFormItemProps(props);
-  const gridProps = pickNotFormItemProps(props);
-  const children = toArr(props.children);
-  const cols = toArr(rawCols).map(col => normalizeCol(col));
-  const childNum = children.length;
-
-  if (cols.length < childNum) {
-    let offset: number = childNum - cols.length;
-    let lastSpan: number =
-      24 -
-      cols.reduce((buf, col) => {
-        return (
-          buf +
-          Number(col.span ? col.span : 0) +
-          Number(col.offset ? col.offset : 0)
-        );
-      }, 0);
-    for (let i = 0; i < offset; i++) {
-      cols.push({ span: Math.floor(lastSpan / offset) });
-    }
-  }
-  const grids = (
-    <Row {...gridProps}>
-      {children.reduce((buf, child, key) => {
-        return child
-          ? buf.concat(
-              <Col key={key} {...cols[key]}>
-                {child}
-              </Col>,
-            )
-          : buf;
-      }, [])}
-    </Row>
-  );
-
-  if (title || label) {
-    return (
-      <AntdSchemaFieldAdaptor {...formItemProps}>
-        {grids}
-      </AntdSchemaFieldAdaptor>
-    );
-  }
-  return <Fragment>{grids}</Fragment>;
-});
-
-export default FormItemGrid;
--- a/packages/app/src/components/fields/form-item-grid/style.ts
+++ b/packages/app/src/components/fields/form-item-grid/style.ts
@ -1,2 +0,0 @@
-import 'antd/lib/row/style/index';
-import 'antd/lib/col/style/index';
--- a/packages/app/src/components/fields/form-layout/index.tsx
+++ b/packages/app/src/components/fields/form-layout/index.tsx
@ -1,29 +0,0 @@
-import React from 'react';
-import { FormItemDeepProvider, useDeepFormItem } from '@formily/antd';
-import { createVirtualBox } from '@formily/react-schema-renderer';
-import cls from 'classnames';
-import { IFormItemTopProps } from '../types';
-
-export const FormLayout = createVirtualBox<IFormItemTopProps>(
-  'layout',
-  props => {
-    const { inline } = useDeepFormItem();
-    const isInline = props.inline || inline;
-    const children =
-      isInline || props.className || props.style ? (
-        <div
-          className={cls(props.className, {
-            'ant-form ant-form-inline': isInline,
-          })}
-          style={props.style}
-        >
-          {props.children}
-        </div>
-      ) : (
-        props.children
-      );
-    return <FormItemDeepProvider {...props}>{children}</FormItemDeepProvider>;
-  },
-);
-
-export default FormLayout;
--- a/packages/app/src/components/fields/form-mega-layout/index.tsx
+++ b/packages/app/src/components/fields/form-mega-layout/index.tsx
@ -1,3 +0,0 @@
-import { MegaLayout, FormMegaLayout } from '@formily/antd';
-
-export { MegaLayout, FormMegaLayout };
--- a/packages/app/src/components/fields/form-slot/index.ts
+++ b/packages/app/src/components/fields/form-slot/index.ts
@ -1,5 +0,0 @@
-import { FormSlot } from '@formily/react-schema-renderer';
-
-export { FormSlot };
-
-export default FormSlot;
--- a/packages/app/src/components/fields/form-step/index.tsx
+++ b/packages/app/src/components/fields/form-step/index.tsx
@ -1,157 +0,0 @@
-import React, { useRef, Fragment, useEffect } from 'react';
-import {
-  createControllerBox,
-  ISchemaVirtualFieldComponentProps,
-  createEffectHook,
-  useFormEffects,
-  useFieldState,
-  IVirtualBoxProps,
-} from '@formily/react-schema-renderer';
-import { toArr } from '@formily/shared';
-import { Steps } from 'antd';
-import { createMatchUpdate } from '../shared';
-import { IFormStep } from '../types';
-
-enum StateMap {
-  ON_FORM_STEP_NEXT = 'onFormStepNext',
-  ON_FORM_STEP_PREVIOUS = 'onFormStepPrevious',
-  ON_FORM_STEP_GO_TO = 'onFormStepGoto',
-  ON_FORM_STEP_CURRENT_CHANGE = 'onFormStepCurrentChange',
-  ON_FORM_STEP_DATA_SOURCE_CHANGED = 'onFormStepDataSourceChanged',
-}
-const EffectHooks = {
-  onStepNext$: createEffectHook<void>(StateMap.ON_FORM_STEP_NEXT),
-  onStepPrevious$: createEffectHook<void>(StateMap.ON_FORM_STEP_PREVIOUS),
-  onStepGoto$: createEffectHook<void>(StateMap.ON_FORM_STEP_GO_TO),
-  onStepCurrentChange$: createEffectHook<{
-    value: number;
-    preValue: number;
-  }>(StateMap.ON_FORM_STEP_CURRENT_CHANGE),
-};
-
-type ExtendsProps = StateMap & typeof EffectHooks;
-
-export const FormStep: React.FC<IVirtualBoxProps<IFormStep>> &
-  ExtendsProps = createControllerBox<IFormStep>(
-  'step',
-  ({
-    form,
-    schema,
-    path,
-    name,
-    children,
-  }: ISchemaVirtualFieldComponentProps) => {
-    const { dataSource, ...stepProps } = schema.getExtendsComponentProps();
-    const [{ current }, setFieldState] = useFieldState({
-      current: stepProps.current || 0,
-    });
-    const ref = useRef(current);
-    const itemsRef = useRef([]);
-    itemsRef.current = toArr(dataSource);
-
-    const matchUpdate = createMatchUpdate(name, path);
-
-    const update = (cur: number) => {
-      form.notify(StateMap.ON_FORM_STEP_CURRENT_CHANGE, {
-        path,
-        name,
-        value: cur,
-        preValue: current,
-      });
-      setFieldState({
-        current: cur,
-      });
-    };
-
-    useEffect(() => {
-      form.notify(StateMap.ON_FORM_STEP_DATA_SOURCE_CHANGED, {
-        path,
-        name,
-        value: itemsRef.current,
-      });
-    }, [itemsRef.current.length]);
-
-    useFormEffects(($, { setFieldState }) => {
-      const updateFields = () => {
-        itemsRef.current.forEach(({ name }, index) => {
-          setFieldState(name, (state: any) => {
-            state.display = index === current;
-          });
-        });
-      };
-      updateFields();
-      $(StateMap.ON_FORM_STEP_DATA_SOURCE_CHANGED).subscribe(
-        ({ name, path }) => {
-          matchUpdate(name, path, () => {
-            updateFields();
-          });
-        },
-      );
-
-      $(StateMap.ON_FORM_STEP_CURRENT_CHANGE).subscribe(
-        ({ value, name, path }: any = {}) => {
-          matchUpdate(name, path, () => {
-            form.hostUpdate(() => {
-              itemsRef.current.forEach(({ name }, index) => {
-                if (!name)
-                  throw new Error(
-                    'FormStep dataSource must include `name` property',
-                  );
-                setFieldState(name, (state: any) => {
-                  state.display = index === value;
-                });
-              });
-            });
-          });
-        },
-      );
-
-      $(StateMap.ON_FORM_STEP_NEXT).subscribe(({ name, path }: any = {}) => {
-        matchUpdate(name, path, () => {
-          form.validate().then(({ errors }) => {
-            if (errors.length === 0) {
-              update(
-                ref.current + 1 > itemsRef.current.length - 1
-                  ? ref.current
-                  : ref.current + 1,
-              );
-            }
-          });
-        });
-      });
-
-      $(StateMap.ON_FORM_STEP_PREVIOUS).subscribe(
-        ({ name, path }: any = {}) => {
-          matchUpdate(name, path, () => {
-            update(ref.current - 1 < 0 ? ref.current : ref.current - 1);
-          });
-        },
-      );
-
-      $(StateMap.ON_FORM_STEP_GO_TO).subscribe(
-        ({ name, path, value }: any = {}) => {
-          matchUpdate(name, path, () => {
-            if (!(value < 0 || value > itemsRef.current.length)) {
-              update(value);
-            }
-          });
-        },
-      );
-    });
-    ref.current = current;
-    return (
-      <Fragment>
-        <Steps {...stepProps} current={current}>
-          {itemsRef.current.map((props, key) => {
-            return <Steps.Step {...props} key={key} />;
-          })}
-        </Steps>{' '}
-        {children}
-      </Fragment>
-    );
-  },
-) as any;
-
-Object.assign(FormStep, StateMap, EffectHooks);
-
-export default FormStep;
--- a/packages/app/src/components/fields/form-step/style.ts
+++ b/packages/app/src/components/fields/form-step/style.ts
@ -1 +0,0 @@
-import 'antd/lib/steps/style/index';
--- a/packages/app/src/components/fields/form-tab/index.tsx
+++ b/packages/app/src/components/fields/form-tab/index.tsx
@ -1,194 +0,0 @@
-import React, { Fragment, useEffect, useRef } from 'react';
-import {
-  createControllerBox,
-  ISchemaVirtualFieldComponentProps,
-  createEffectHook,
-  useFormEffects,
-  useFieldState,
-  FormEffectHooks,
-  SchemaField,
-  FormPath,
-  IVirtualBoxProps,
-} from '@formily/react-schema-renderer';
-import { Tabs, Badge } from 'antd';
-import { TabPaneProps } from 'antd/lib/tabs';
-import { IFormTab } from '../types';
-import { createMatchUpdate } from '../shared';
-
-enum StateMap {
-  ON_FORM_TAB_ACTIVE_KEY_CHANGE = 'onFormTabActiveKeyChange',
-}
-
-const { onFormChange$ } = FormEffectHooks;
-
-const EffectHooks = {
-  onTabActiveKeyChange$: createEffectHook<{
-    name?: string;
-    path?: string;
-    value?: any;
-  }>(StateMap.ON_FORM_TAB_ACTIVE_KEY_CHANGE),
-};
-
-const parseTabItems = (items: any, hiddenKeys?: string[]) => {
-  return items.reduce((buf: any, { schema, key }) => {
-    if (Array.isArray(hiddenKeys)) {
-      if (hiddenKeys.includes(key)) {
-        return buf;
-      }
-    }
-    if (schema.getExtendsComponent() === 'tabpane') {
-      return buf.concat({
-        props: schema.getExtendsComponentProps(),
-        schema,
-        key,
-      });
-    }
-    return buf;
-  }, []);
-};
-
-const parseDefaultActiveKey = (
-  hiddenKeys: Array<string> = [],
-  items: any,
-  defaultActiveKey,
-) => {
-  if (!hiddenKeys.includes(defaultActiveKey)) return defaultActiveKey;
-
-  const index = items.findIndex(item => !hiddenKeys.includes(item.key));
-  return index >= 0 ? items[index].key : '';
-};
-
-const parseChildrenErrors = (errors: any, target: string) => {
-  return errors.filter(({ path }) => {
-    return FormPath.parse(path).includes(target);
-  });
-};
-
-const addErrorBadge = (
-  tab: React.ReactNode,
-  currentPath: FormPath,
-  childrenErrors: any[],
-) => {
-  const currentErrors = childrenErrors.filter(({ path }) => {
-    return FormPath.parse(path).includes(currentPath);
-  });
-  if (currentErrors.length > 0) {
-    return (
-      <Badge offset={[12, 0]} count={currentErrors.length}>
-        {tab}
-      </Badge>
-    );
-  }
-  return tab;
-};
-
-type ExtendsProps = StateMap &
-  typeof EffectHooks & {
-    TabPane: React.FC<IVirtualBoxProps<TabPaneProps>>;
-  };
-
-type ExtendsState = {
-  activeKey?: string;
-  childrenErrors?: any;
-};
-
-export const FormTab: React.FC<IVirtualBoxProps<IFormTab>> &
-  ExtendsProps = createControllerBox<IFormTab>(
-  'tab',
-  ({ form, schema, name, path }: ISchemaVirtualFieldComponentProps) => {
-    const orderProperties = schema.getOrderProperties();
-    let {
-      hiddenKeys,
-      defaultActiveKey,
-      ...componentProps
-    } = schema.getExtendsComponentProps();
-    hiddenKeys = hiddenKeys || [];
-    const [{ activeKey, childrenErrors }, setFieldState] = useFieldState<
-      ExtendsState
-    >({
-      activeKey: parseDefaultActiveKey(
-        hiddenKeys,
-        orderProperties,
-        defaultActiveKey,
-      ),
-      childrenErrors: [],
-    });
-    const itemsRef = useRef([]);
-    itemsRef.current = parseTabItems(orderProperties, hiddenKeys);
-    const update = (cur: string) => {
-      form.notify(StateMap.ON_FORM_TAB_ACTIVE_KEY_CHANGE, {
-        name,
-        path,
-        value: cur,
-      });
-    };
-    const matchUpdate = createMatchUpdate(name, path);
-    useEffect(() => {
-      if (Array.isArray(hiddenKeys)) {
-        setFieldState({
-          activeKey: parseDefaultActiveKey(
-            hiddenKeys,
-            orderProperties,
-            defaultActiveKey,
-          ),
-        });
-      }
-    }, [hiddenKeys.length]);
-    useFormEffects(({ hasChanged }) => {
-      onFormChange$().subscribe(formState => {
-        const errorsChanged = hasChanged(formState, 'errors');
-        if (errorsChanged) {
-          setFieldState({
-            childrenErrors: parseChildrenErrors(formState.errors, path),
-          });
-        }
-      });
-      EffectHooks.onTabActiveKeyChange$().subscribe(
-        ({ value, name, path }: any = {}) => {
-          if (!itemsRef.current.map(item => item.key).includes(value)) return;
-          matchUpdate(name, path, () => {
-            setFieldState({
-              activeKey: value,
-            });
-          });
-        },
-      );
-    });
-    return (
-      <Tabs {...componentProps} activeKey={activeKey} onChange={update}>
-        {itemsRef.current.map(({ props, schema, key }) => {
-          const currentPath = FormPath.parse(path).concat(key);
-          return (
-            <Tabs.TabPane
-              {...props}
-              tab={
-                activeKey === key
-                  ? props.tab
-                  : addErrorBadge(props.tab, currentPath, childrenErrors)
-              }
-              key={key}
-              forceRender
-            >
-              <SchemaField
-                path={currentPath}
-                schema={schema}
-                onlyRenderProperties
-              />
-            </Tabs.TabPane>
-          );
-        })}
-      </Tabs>
-    );
-  },
-) as any;
-
-FormTab.TabPane = createControllerBox<TabPaneProps>(
-  'tabpane',
-  ({ children }) => {
-    return <Fragment>{children}</Fragment>;
-  },
-);
-
-Object.assign(FormTab, StateMap, EffectHooks);
-
-export default FormTab;
--- a/packages/app/src/components/fields/form-tab/style.ts
+++ b/packages/app/src/components/fields/form-tab/style.ts
@ -1,2 +0,0 @@
-import 'antd/lib/tabs/style/index';
-import 'antd/lib/badge/style/index';
--- a/packages/app/src/components/fields/form-text-box/index.tsx
+++ b/packages/app/src/components/fields/form-text-box/index.tsx
@ -1,128 +0,0 @@
-import React, { useRef, useLayoutEffect } from 'react';
-import { createControllerBox, Schema } from '@formily/react-schema-renderer';
-import { IFormTextBox } from '../types';
-import { toArr } from '@formily/shared';
-import { FormItemProps as ItemProps } from 'antd/lib/form';
-import { version } from 'antd';
-import { AntdSchemaFieldAdaptor, pickFormItemProps } from '@formily/antd';
-import styled from 'styled-components';
-
-const isV4 = /^4\./.test(version);
-
-export const FormTextBox = createControllerBox<IFormTextBox & ItemProps>(
-  'text-box',
-  styled(({ props, form, className, children }) => {
-    const schema = new Schema(props);
-    const mergeProps = schema.getExtendsComponentProps();
-    const { title, label, text, gutter, style } = Object.assign(
-      {
-        gutter: 5,
-      },
-      mergeProps,
-    );
-    const formItemProps = pickFormItemProps(mergeProps);
-    const ref: React.RefObject<HTMLDivElement> = useRef();
-    const arrChildren = toArr(children);
-    const split = text.split('%s');
-    let index = 0;
-    useLayoutEffect(() => {
-      if (ref.current) {
-        const elements = ref.current.querySelectorAll('.text-box-field');
-        const syncLayouts = Array.prototype.map.call(
-          elements,
-          (el: HTMLElement) => {
-            return [
-              el,
-              () => {
-                const ctrl = el.querySelector('.ant-form-item-children');
-                setTimeout(() => {
-                  if (ctrl) {
-                    const editable = form.getFormState(state => state.editable);
-                    el.style.width = editable
-                      ? ctrl.getBoundingClientRect().width + 'px'
-                      : 'auto';
-                  }
-                });
-              },
-            ];
-          },
-        );
-        syncLayouts.forEach(([el, handler]) => {
-          handler();
-          el.addEventListener('DOMSubtreeModified', handler);
-        });
-
-        return () => {
-          syncLayouts.forEach(([el, handler]) => {
-            el.removeEventListener('DOMSubtreeModified', handler);
-          });
-        };
-      }
-    }, []);
-    const newChildren = split.reduce((buf, item, key) => {
-      return buf.concat(
-        item ? (
-          <p
-            key={index++}
-            className="text-box-words"
-            style={{
-              marginRight: gutter / 2,
-              marginLeft: gutter / 2,
-              ...style,
-            }}
-          >
-            {item}
-          </p>
-        ) : null,
-        arrChildren[key] ? (
-          <div key={index++} className="text-box-field">
-            {arrChildren[key]}
-          </div>
-        ) : null,
-      );
-    }, []);
-
-    const textChildren = (
-      <div
-        className={`${className} ${mergeProps.className}`}
-        style={{
-          marginRight: -gutter / 2,
-          marginLeft: -gutter / 2,
-        }}
-        ref={ref}
-      >
-        {newChildren}
-      </div>
-    );
-
-    if (!title && !label) return textChildren;
-    return (
-      <AntdSchemaFieldAdaptor {...formItemProps}>
-        {textChildren}
-      </AntdSchemaFieldAdaptor>
-    );
-  })`
-    display: flex;
-    .text-box-words:nth-child(1) {
-      margin-left: 0;
-    }
-    .text-box-words {
-      margin-bottom: 0 !important;
-      ${isV4 ? 'line-height:32px' : ''}
-    }
-    .text-box-field {
-      display: inline-block;
-      .ant-form-item {
-        margin-bottom: 0 !important;
-      }
-    }
-    .next-form-item {
-      margin-bottom: 0 !important;
-    }
-    .preview-text {
-      text-align: center !important;
-    }
-  `,
-);
-
-export default FormTextBox;
--- a/packages/app/src/components/fields/icons/index.tsx
+++ b/packages/app/src/components/fields/icons/index.tsx
@ -1,55 +0,0 @@
-import React, { useState } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import { Popover, Button, Input } from 'antd';
-import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
-import { icons, hasIcon, Icon as IconComponent } from '@/components/icons';
-import { CloseOutlined } from '@ant-design/icons';
-
-function IconField(props: any) {
-  const { value, onChange } = props;
-  const [visible, setVisible] = useState(false);
-  return (
-    <div>
-      <Input.Group compact>
-        <Popover
-          placement={'bottom'}
-          visible={visible}
-          onVisibleChange={val => {
-            setVisible(val);
-          }}
-          content={
-            <div>
-              {[...icons.keys()].map(key => (
-                <span
-                  style={{ fontSize: 18, marginRight: 10, cursor: 'pointer' }}
-                  onClick={() => {
-                    onChange(key);
-                    setVisible(false);
-                  }}
-                >
-                  <IconComponent type={key} />
-                </span>
-              ))}
-            </div>
-          }
-          title="图标"
-          trigger="click"
-        >
-          <Button>
-            {hasIcon(value) ? <IconComponent type={value} /> : '选择图标'}
-          </Button>
-        </Popover>
-        {value && <Button icon={<CloseOutlined/>} onClick={e => {
-          onChange(null);
-        }}></Button>}
-      </Input.Group>
-    </div>
-  );
-}
-
-export const Icon = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(IconField);
-
-export default Icon;
--- a/packages/app/src/components/fields/index.tsx
+++ b/packages/app/src/components/fields/index.tsx
@ -1,30 +0,0 @@
-export * from './text-button';
-export * from './time-picker';
-export * from './transfer';
-export * from './switch';
-export * from './array-cards';
-export * from './array-table';
-export * from './checkbox';
-export * from './circle-button';
-export * from './date-picker';
-export * from './form-block';
-export * from './form-card';
-export * from './form-tab';
-export * from './form-grid-col';
-export * from './form-grid-row';
-export * from './form-item-grid';
-export * from './form-layout';
-export * from './form-mega-layout';
-export * from './form-description';
-export * from './form-step';
-export * from './form-text-box';
-export * from './form-slot';
-export * from './input';
-export * from './select';
-export * from './number-picker';
-export * from './password';
-export * from './radio';
-export * from './range';
-export * from './rating';
-export * from './upload';
-export * from './registry';
--- a/packages/app/src/components/fields/input/index.tsx
+++ b/packages/app/src/components/fields/input/index.tsx
@ -1,31 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import React from 'react';
-import { Input as AntdInput } from 'antd';
-import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
-
-export const Input = connect<'TextArea'>({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(
-  acceptEnum(({ onChange, ...restProps }) => (
-    <AntdInput
-      autoComplete={'off'}
-      {...restProps}
-      onChange={e => {
-        // 文本字段，如果空要 null 处理
-        onChange(e.target.value ? e : null);
-      }}
-    />
-  )),
-);
-
-Input.TextArea = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(
-  acceptEnum(props => (
-    <AntdInput.TextArea autoSize={{ minRows: 2, maxRows: 12 }} {...props} />
-  )),
-);
-
-export default Input;
--- a/packages/app/src/components/fields/input/style.ts
+++ b/packages/app/src/components/fields/input/style.ts
@ -1 +0,0 @@
-import 'antd/lib/input/style/index';
--- a/packages/app/src/components/fields/markdown/index.tsx
+++ b/packages/app/src/components/fields/markdown/index.tsx
@ -1,15 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import React from 'react';
-import { Input as AntdInput } from 'antd';
-import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
-
-export const Markdown = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(
-  acceptEnum(props => (
-    <AntdInput.TextArea autoSize={{ minRows: 2, maxRows: 12 }} {...props} />
-  )),
-);
-
-export default Markdown;
--- a/packages/app/src/components/fields/number-picker/index.tsx
+++ b/packages/app/src/components/fields/number-picker/index.tsx
@ -1,24 +0,0 @@
-import React from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import { InputNumber } from 'antd';
-import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
-
-export const NumberPicker = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(acceptEnum(InputNumber));
-
-export const Percent = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(
-  acceptEnum(props => (
-    <InputNumber
-      formatter={value => (value ? `${value}%` : '')}
-      parser={value => value.replace('%', '')}
-      {...props}
-    />
-  )),
-);
-
-export default NumberPicker;
--- a/packages/app/src/components/fields/number-picker/style.ts
+++ b/packages/app/src/components/fields/number-picker/style.ts
@ -1 +0,0 @@
-import 'antd/lib/input-number/style/index';
--- a/packages/app/src/components/fields/password/index.tsx
+++ b/packages/app/src/components/fields/password/index.tsx
@ -1,88 +0,0 @@
-import React, { useState } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import { Input } from 'antd';
-import { PasswordProps } from 'antd/lib/input';
-import { PasswordStrength } from '@formily/react-shared-components';
-import styled from 'styled-components';
-import { mapStyledProps } from '../shared';
-
-export interface IPasswordProps extends PasswordProps {
-  checkStrength: boolean;
-}
-
-export const Password = connect({
-  getProps: mapStyledProps,
-})(styled((props: IPasswordProps) => {
-  const { value, className, checkStrength, onChange, ...others } = props;
-
-  return (
-    <span className={className}>
-      <Input.Password
-        autoComplete={'new-password'}
-        {...others}
-        value={value}
-        onChange={e => {
-          // 密码字段，如果没有设置不处理
-          onChange(e.target.value ? e : undefined);
-        }}
-      />
-      {checkStrength && (
-        <PasswordStrength value={String(value)}>
-          {score => {
-            return (
-              <div className="password-strength-wrapper">
-                <div className="div-1 div" />
-                <div className="div-2 div" />
-                <div className="div-3 div" />
-                <div className="div-4 div" />
-                <div
-                  className="password-strength-bar"
-                  style={{
-                    clipPath: `polygon(0 0,${score}% 0,${score}% 100%,0 100%)`,
-                  }}
-                />
-              </div>
-            );
-          }}
-        </PasswordStrength>
-      )}
-    </span>
-  );
-})`
-  .password-strength-wrapper {
-    background: #e0e0e0;
-    margin-bottom: 3px;
-    position: relative;
-    .div {
-      position: absolute;
-      z-index: 1;
-      height: 8px;
-      top: 0;
-      background: #fff;
-      width: 1px;
-      transform: translate(-50%, 0);
-    }
-    .div-1 {
-      left: 20%;
-    }
-    .div-2 {
-      left: 40%;
-    }
-    .div-3 {
-      left: 60%;
-    }
-    .div-4 {
-      left: 80%;
-    }
-    .password-strength-bar {
-      position: relative;
-      background-image: -webkit-linear-gradient(left, #ff5500, #ff9300);
-      transition: all 0.35s ease-in-out;
-      height: 8px;
-      width: 100%;
-      margin-top: 5px;
-    }
-  }
-`);
-
-export default Password;
--- a/packages/app/src/components/fields/password/style.ts
+++ b/packages/app/src/components/fields/password/style.ts
@ -1 +0,0 @@
-import 'antd/lib/input/style/index';
--- a/packages/app/src/components/fields/permissions/index.tsx
+++ b/packages/app/src/components/fields/permissions/index.tsx
@ -1,376 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import React, { useEffect, useState } from 'react';
-import { Input as AntdInput, Table, Checkbox, Select, Tag } from 'antd';
-import { acceptEnum, mapStyledProps, mapTextComponent } from '../shared';
-import api from '@/api-client';
-import { useRequest } from 'umi';
-import { useDynamicList } from 'ahooks';
-import findIndex from 'lodash/findIndex';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { DrawerSelectComponent } from '../drawer-select';
-
-export const Permissions = {} as { Actions: any; Fields: any; Tabs: any };
-
-Permissions.Actions = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(({ onChange, value = [], resourceKey, ...restProps }) => {
-  const { data = [], loading = true } = useRequest(
-    () => {
-      return api.resource('collections.actions').list({
-        associatedKey: resourceKey,
-        perPage: -1,
-      });
-    },
-    {
-      refreshDeps: [resourceKey],
-    },
-  );
-
-  return (
-    <Table
-      size={'small'}
-      pagination={false}
-      dataSource={data}
-      columns={[
-        {
-          title: '操作',
-          dataIndex: ['title'],
-        },
-        {
-          title: '类型',
-          dataIndex: ['type'],
-          render: type => {
-            return type === 'create' ? (
-              <Tag color={'green'}>对新数据操作</Tag>
-            ) : (
-              <Tag color={'blue'}>对已有数据操作</Tag>
-            );
-          },
-        },
-        {
-          title: '允许操作',
-          dataIndex: ['name'],
-          render: (val, record) => {
-            const values = [...(value || [])];
-            const index = findIndex(
-              values,
-              (item: any) =>
-                item && item.name === `${resourceKey}:${record.name}`,
-            );
-            console.log(values);
-            return (
-              <Checkbox
-                defaultChecked={index >= 0}
-                onChange={e => {
-                  // const index = findIndex(values, (item: any) => item && item.name === `${resourceKey}:${record.name}`);
-                  if (index >= 0) {
-                    if (!e.target.checked) {
-                      values.splice(index, 1);
-                    }
-                  } else {
-                    values.push({
-                      name: `${resourceKey}:${record.name}`,
-                    });
-                  }
-                  onChange(values);
-                }}
-              />
-            );
-          },
-        },
-        {
-          title: '可操作的数据范围',
-          dataIndex: ['scope'],
-          render: (scope, record) => {
-            if (['filter', 'create'].indexOf(record.type) !== -1) {
-              return null;
-            }
-            const values = [...(value || [])];
-            const index = findIndex(
-              values,
-              (item: any) =>
-                item && item.name === `${resourceKey}:${record.name}`,
-            );
-            console.log(
-              values,
-              index,
-              `${resourceKey}:${record.name}`,
-              get(values, [index, 'scope']),
-            );
-            return (
-              <DrawerSelectComponent
-                schema={{
-                  title: '选择可操作的数据范围',
-                }}
-                size={'small'}
-                associatedKey={resourceKey}
-                viewName={'collections.scopes.table'}
-                target={'scopes'}
-                multiple={false}
-                labelField={'title'}
-                valueField={'id'}
-                value={get(values, [index, 'scope'])}
-                onChange={data => {
-                  const values = [...(value || [])];
-                  const index = findIndex(
-                    values,
-                    (item: any) =>
-                      item && item.name === `${resourceKey}:${record.name}`,
-                  );
-                  if (index === -1) {
-                    values.push({
-                      name: `${resourceKey}:${record.name}`,
-                      scope_id: data.id,
-                    });
-                  } else {
-                    set(values, [index, 'scope_id'], data.id);
-                  }
-                  console.log('valvalvalvalval', { values });
-                  onChange(values);
-                  console.log('valvalvalvalval', data);
-                }}
-              />
-              // <Scope
-              //   resourceTarget={'scopes'}
-              //   associatedName={'collections'}
-              //   associatedKey={resourceKey}
-              //   target={'scopes'}
-              //   multiple={false}
-              //   labelField={'title'}
-              //   valueField={'id'}
-              //   value={get(values, [index, 'scope'])}
-              //   onChange={(data) => {
-              //     const values = [...value||[]];
-              //     const index = findIndex(values, (item: any) => item && item.name === `${resourceKey}:${record.name}`);
-              //     if (index === -1) {
-              //       values.push({
-              //         name: `${resourceKey}:${record.name}`,
-              //         scope_id: data,
-              //       });
-              //     } else {
-              //       set(values, [index, 'scope_id'], data);
-              //     }
-              //     console.log('valvalvalvalval', {values})
-              //     onChange(values);
-              //     console.log('valvalvalvalval', data);
-              //   }}
-              // />
-            );
-          },
-        },
-      ]}
-      loading={loading}
-    />
-  );
-});
-
-Permissions.Fields = connect<'TextArea'>({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(({ onChange, value = [], resourceKey, ...restProps }) => {
-  const actions = {};
-  value.forEach(item => {
-    actions[item.field_id] = item.actions;
-  });
-
-  // console.log(actions);
-
-  const [fields, setFields] = useState(value || []);
-
-  const { data = [], loading = true } = useRequest(
-    () => {
-      return api.resource('collections.fields').list({
-        associatedKey: resourceKey,
-        perPage: -1,
-      });
-    },
-    {
-      refreshDeps: [resourceKey],
-    },
-  );
-  console.log({ resourceKey, data });
-
-  const columns = [
-    {
-      title: '字段名称',
-      dataIndex: ['title'],
-    },
-  ].concat(
-    [
-      {
-        title: '查看',
-        action: `${resourceKey}:list`,
-      },
-      {
-        title: '编辑',
-        action: `${resourceKey}:update`,
-      },
-      {
-        title: '新增',
-        action: `${resourceKey}:create`,
-      },
-    ].map(({ title, action }) => {
-      let checked =
-        value.filter(({ actions = [] }) => actions.indexOf(action) !== -1)
-          .length === data.length;
-      return {
-        title: (
-          <>
-            <Checkbox
-              checked={checked}
-              onChange={e => {
-                const values = data.map(field => {
-                  const items = actions[field.id] || [];
-                  const index = items.indexOf(action);
-                  if (index > -1) {
-                    if (!e.target.checked) {
-                      items.splice(index, 1);
-                    }
-                  } else {
-                    if (e.target.checked) {
-                      items.push(action);
-                    }
-                  }
-                  return {
-                    field_id: field.id,
-                    actions: items,
-                  };
-                });
-                // console.log(values);
-                setFields([...values]);
-                onChange([...values]);
-              }}
-            />{' '}
-            {title}
-          </>
-        ),
-        dataIndex: ['id'],
-        render: (val, record) => {
-          const items = actions[record.id] || [];
-          // console.log({items}, items.indexOf(action));
-          return (
-            <Checkbox
-              checked={items.indexOf(action) !== -1}
-              onChange={e => {
-                const values = [...value];
-                const index = findIndex(
-                  values,
-                  ({ field_id, actions = [] }) => {
-                    return field_id === record.id;
-                  },
-                );
-                if (e.target.checked && index === -1) {
-                  values.push({
-                    field_id: record.id,
-                    actions: [action],
-                  });
-                } else {
-                  const items = values[index].actions || [];
-                  const actionIndex = items.indexOf(action);
-                  if (!e.target.checked && actionIndex > -1) {
-                    items.splice(actionIndex, 1);
-                    // values[index].actions = items;
-                  } else if (e.target.checked && actionIndex === -1) {
-                    items.push(action);
-                  }
-                }
-                onChange(values);
-                setFields(values);
-              }}
-            />
-          );
-        },
-      };
-    }) as any,
-  );
-
-  return (
-    <Table
-      size={'small'}
-      loading={loading}
-      pagination={false}
-      dataSource={data}
-      columns={columns}
-    />
-  );
-});
-
-Permissions.Tabs = connect<'TextArea'>({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(({ onChange, value = [], resourceKey, ...restProps }) => {
-  const { data = [], loading = true, mutate } = useRequest(
-    () => {
-      return api.resource('collections.tabs').list({
-        associatedKey: resourceKey,
-        perPage: -1,
-      });
-    },
-    {
-      refreshDeps: [resourceKey],
-    },
-  );
-
-  // const [checked, setChecked] = useState(false);
-
-  // console.log(checked);
-
-  // useEffect(() => {
-  //   setChecked(data.length === value.length);
-  //   console.log({resourceKey, data, value}, data.length === value.lengh);
-  // }, [
-  //   data,
-  // ]);
-
-  return (
-    <Table
-      size={'small'}
-      pagination={false}
-      dataSource={data}
-      columns={[
-        {
-          title: '标签页',
-          dataIndex: ['title'],
-        },
-        {
-          title: (
-            <>
-              <Checkbox
-                checked={data.length === value.length}
-                onChange={e => {
-                  onChange(
-                    e.target.checked ? data.map(record => record.id) : [],
-                  );
-                }}
-              />{' '}
-              查看
-            </>
-          ),
-          dataIndex: ['id'],
-          render: (val, record) => {
-            const values = [...value];
-            return (
-              <Checkbox
-                checked={values.indexOf(record.id) !== -1}
-                onChange={e => {
-                  const index = values.indexOf(record.id);
-                  if (index !== -1) {
-                    if (!e.target.checked) {
-                      values.splice(index, 1);
-                    }
-                  } else {
-                    values.push(record.id);
-                  }
-                  onChange(values);
-                }}
-              />
-            );
-          },
-        },
-      ]}
-      loading={loading}
-    />
-  );
-});
--- a/packages/app/src/components/fields/radio/index.tsx
+++ b/packages/app/src/components/fields/radio/index.tsx
@ -1,19 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import { Radio as AntdRadio } from 'antd';
-import {
-  transformDataSourceKey,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-
-export const Radio = connect<'Group'>({
-  valueName: 'checked',
-  getProps: mapStyledProps,
-})(AntdRadio);
-
-Radio.Group = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(transformDataSourceKey(AntdRadio.Group, 'options'));
-
-export default Radio;
--- a/packages/app/src/components/fields/radio/style.ts
+++ b/packages/app/src/components/fields/radio/style.ts
@ -1 +0,0 @@
-import 'antd/lib/radio/style/index';
--- a/packages/app/src/components/fields/range/index.tsx
+++ b/packages/app/src/components/fields/range/index.tsx
@ -1,60 +0,0 @@
-import React from 'react';
-import { Slider } from 'antd';
-import { connect } from '@formily/react-schema-renderer';
-import { mapStyledProps } from '../shared';
-
-export interface ISliderMarks {
-  [key: number]:
-    | React.ReactNode
-    | {
-        style: React.CSSProperties;
-        label: React.ReactNode;
-      };
-}
-
-export declare type SliderValue = number | [number, number];
-
-// TODO 并不是方法，最好能引用组件的 typescript 接口定义
-export interface ISliderProps {
-  min?: number;
-  max?: number;
-  marks?: ISliderMarks;
-  value?: SliderValue;
-  defaultValue?: SliderValue;
-  onChange?: (value: SliderValue) => void;
-}
-
-export const Range = connect({
-  defaultProps: {
-    style: {
-      width: 320,
-    },
-  },
-  getProps: mapStyledProps,
-})(
-  class Component extends React.Component<ISliderProps> {
-    public render() {
-      const { onChange, value, min, max, marks, ...rest } = this.props;
-      let newMarks = {};
-      if (Array.isArray(marks)) {
-        marks.forEach(mark => {
-          newMarks[mark] = mark;
-        });
-      } else {
-        newMarks = marks;
-      }
-      return (
-        <Slider
-          {...rest}
-          onChange={onChange}
-          value={value}
-          min={min}
-          max={max}
-          marks={newMarks}
-        />
-      );
-    }
-  },
-);
-
-export default Range;
--- a/packages/app/src/components/fields/range/style.ts
+++ b/packages/app/src/components/fields/range/style.ts
@ -1 +0,0 @@
-import 'antd/lib/slider/style/index';
--- a/packages/app/src/components/fields/rating/index.tsx
+++ b/packages/app/src/components/fields/rating/index.tsx
@ -1,9 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import { Rate } from 'antd';
-import { mapStyledProps } from '../shared';
-
-export const Rating = connect({
-  getProps: mapStyledProps,
-})(Rate);
-
-export default Rating;
--- a/packages/app/src/components/fields/rating/style.ts
+++ b/packages/app/src/components/fields/rating/style.ts
@ -1 +0,0 @@
-import 'antd/lib/rate/style/index';
--- a/packages/app/src/components/fields/registry.ts
+++ b/packages/app/src/components/fields/registry.ts
@ -1,73 +0,0 @@
-import { registerFormFields } from '@formily/antd';
-import { TimePicker } from './time-picker';
-import { Transfer } from './transfer';
-import { Switch } from './switch';
-import { ArrayCards } from './array-cards';
-import { ArrayTable } from './array-table';
-import { Checkbox } from './checkbox';
-import { DatePicker } from './date-picker';
-import { Input } from './input';
-import { NumberPicker, Percent } from './number-picker';
-import { Password } from './password';
-import { Radio } from './radio';
-import { Range } from './range';
-import { Rating } from './rating';
-import { Upload } from './upload';
-import { Filter } from './filter';
-import { RemoteSelect } from './remote-select';
-import { DrawerSelect } from './drawer-select';
-import { SubTable } from './sub-table';
-import { Cascader } from './cascader';
-import { Icon } from './icons';
-import { ColorSelect } from './color-select';
-import { Permissions } from './permissions';
-import { Values } from './values';
-import { Automations } from './automations';
-import { Wysiwyg } from './wysiwyg';
-import { Markdown } from './markdown';
-
-export const setup = () => {
-  registerFormFields({
-    time: TimePicker,
-    timerange: TimePicker.RangePicker,
-    transfer: Transfer,
-    cascader: Cascader,
-    boolean: Checkbox,
-    switch: Switch,
-    checkbox: Checkbox,
-    array: ArrayCards,
-    cards: ArrayCards,
-    table: ArrayTable,
-    checkboxes: Checkbox.Group,
-    date: DatePicker,
-    daterange: DatePicker.RangePicker,
-    year: DatePicker.YearPicker,
-    month: DatePicker.MonthPicker,
-    week: DatePicker.WeekPicker,
-    string: Input,
-    select: Input,
-    icon: Icon,
-    textarea: Input.TextArea,
-    number: NumberPicker,
-    percent: Percent,
-    password: Password,
-    radio: Radio.Group,
-    range: Range,
-    rating: Rating,
-    upload: Upload,
-    filter: Filter,
-    remoteSelect: RemoteSelect,
-    drawerSelect: DrawerSelect,
-    colorSelect: ColorSelect,
-    subTable: SubTable,
-    values: Values,
-    wysiwyg: Wysiwyg,
-    markdown: Markdown,
-    'permissions.actions': Permissions.Actions,
-    'permissions.fields': Permissions.Fields,
-    'permissions.tabs': Permissions.Tabs,
-    'automations.datetime': Automations.DateTime,
-    'automations.endmode': Automations.EndMode,
-    'automations.cron': Automations.Cron,
-  });
-};
--- a/packages/app/src/components/fields/remote-select/index.tsx
+++ b/packages/app/src/components/fields/remote-select/index.tsx
@ -1,100 +0,0 @@
-import React, { useEffect } from 'react';
-import { connect } from '@formily/react-schema-renderer';
-import moment from 'moment';
-import { Select } from 'antd';
-import {
-  mapStyledProps,
-  mapTextComponent,
-  compose,
-  isStr,
-  isArr,
-} from '../shared';
-import { useRequest } from 'umi';
-import api from '@/api-client';
-import { Spin } from '@/components/spin';
-import get from 'lodash/get';
-
-function RemoteSelectComponent(props) {
-  let {
-    schema = {},
-    value,
-    onChange,
-    disabled,
-    resourceName,
-    associatedKey,
-    filter,
-    labelField,
-    valueField,
-    objectValue,
-    placeholder,
-    multiple,
-  } = props;
-  console.log({ schema });
-  if (!resourceName) {
-    resourceName = get(schema, 'component.resourceName');
-  }
-  if (!filter) {
-    filter = get(schema, 'component.filter');
-  }
-  if (!labelField) {
-    labelField = get(schema, 'component.labelField');
-  }
-  if (!valueField) {
-    valueField = get(schema, 'component.valueField');
-  }
-  if (!valueField) {
-    valueField = 'id';
-  }
-  const { data = [], loading = true } = useRequest(
-    () => {
-      return api.resource(resourceName).list({
-        associatedKey,
-        filter,
-      });
-    },
-    {
-      refreshDeps: [resourceName, associatedKey],
-    },
-  );
-  const selectProps: any = {};
-  if (multiple) {
-    selectProps.mode = 'multiple';
-  }
-  console.log({ data, props, associatedKey });
-  return (
-    <>
-      <Select
-        {...selectProps}
-        placeholder={placeholder}
-        disabled={disabled}
-        notFoundContent={loading ? <Spin /> : undefined}
-        allowClear
-        loading={loading}
-        value={value && typeof value === 'object' ? value[valueField] : value}
-        onChange={(value, option) => {
-          if (value === null || typeof value === 'undefined') {
-            onChange(undefined);
-            return;
-          }
-          // @ts-ignore
-          const item = option.item;
-          onChange(objectValue ? item : value);
-        }}
-      >
-        {!loading &&
-          data.map(item => (
-            <Select.Option item={item} value={item[valueField]}>
-              {item[labelField]}
-            </Select.Option>
-          ))}
-      </Select>
-    </>
-  );
-}
-
-export const RemoteSelect = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(RemoteSelectComponent);
-
-export default RemoteSelect;
--- a/packages/app/src/components/fields/select/index.tsx
+++ b/packages/app/src/components/fields/select/index.tsx
@ -1,13 +0,0 @@
-import { connect } from '@formily/react-schema-renderer';
-import {
-  Select as AntdSelect,
-  mapStyledProps,
-  mapTextComponent,
-} from '../shared';
-
-export const Select = connect({
-  getProps: mapStyledProps,
-  getComponent: mapTextComponent,
-})(AntdSelect);
-
-export default Select;
--- a/Show More
+++ b/Show More