@nocobase/plugin-charts 0.10.1-alpha.1 → 0.11.0-alpha.1

package/client.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/client';
-export { default } from './lib/client';
+export * from './src/client';
+export { default } from './src/client';
 

package/client.js

@@ -1,30 +1 @@
-"use strict";
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _index = _interopRequireWildcard(require("./lib/client"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/client/index.js');

package/lib/client/ChartBlockEngineDesigner.js

@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.jsonConfigDesc = exports.ChartBlockEngineDesignerInitializer = exports.ChartBlockEngineDesigner = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -32,9 +25,9 @@ function _client() {
   };
   return data;
 }
-function _antd2() {
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -145,12 +138,12 @@ const ChartBlockEngineDesignerInitializer = props => {
   return _react2().default.createElement(_client().SchemaSettings.Item, {
     onClick: function () {
       var _onClick = _asyncToGenerator(function* () {
-        (0, _antd().FormDialog)({
+        (0, _antdV().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Edit chart block'),
           width: 1200,
           bodyStyle: {
-            background: '#f0f2f5',
+            background: 'var(--nb-box-bg)',
             maxHeight: '65vh',
             overflow: 'auto'
           }
@@ -176,18 +169,18 @@ const ChartBlockEngineDesignerInitializer = props => {
             scope: options.scope,
             components: _objectSpread({}, options.components)
           }, _react2().default.createElement("section", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                       display: flex;
                       gap: 24px;
                     `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             bordered: false,
             title: _client().i18n.t('Chart config'),
             size: 'default',
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                       `
-          }, _react2().default.createElement(_antd().FormLayout, {
+          }, _react2().default.createElement(_antdV().FormLayout, {
             layout: 'vertical'
           }, _react2().default.createElement(_client().SchemaComponent, {
             scope: {
@@ -227,11 +220,11 @@ const ChartBlockEngineDesignerInitializer = props => {
               }
             }
           }))), _react2().default.createElement("div", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                         min-width: 600px;
                       `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Chart preview')
           }, chartBlockEngineMetaData && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement(_client().SchemaComponent, {
@@ -247,10 +240,10 @@ const ChartBlockEngineDesignerInitializer = props => {
                 }
               }
             }
-          }))), _react2().default.createElement(_antd2().Card, {
+          }))), _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Data preview'),
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                           margin-top: 24px;
                           overflow: scroll;
                         `

package/lib/client/ChartBlockInitializer.js

@@ -4,16 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Options = exports.ChartBlockInitializer = void 0;
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -32,9 +25,9 @@ function _client() {
   };
   return data;
 }
-function _antd2() {
+function _antd() {
   const data = require("antd");
-  _antd2 = function _antd2() {
+  _antd = function _antd() {
     return data;
   };
   return data;
@@ -123,12 +116,12 @@ const ChartBlockInitializer = props => {
             value: field.name
           };
         });
-        const values = yield (0, _antd().FormDialog)({
+        const values = yield (0, _antdV().FormDialog)({
           okText: compile('{{t("Submit")}}'),
           title: (0, _locale.lang)('Create chart block'),
           width: 1200,
           bodyStyle: {
-            background: '#f0f2f5',
+            background: 'var(--nb-box-bg)',
             maxHeight: '65vh',
             overflow: 'auto'
           }
@@ -155,19 +148,19 @@ const ChartBlockInitializer = props => {
             scope: options.scope,
             components: _objectSpread({}, options.components)
           }, _react2().default.createElement("section", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                       display: flex;
                       gap: 24px;
                     `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             title: (0, _locale.lang)('Chart config'),
             size: 'default',
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                       `
           }, _react2().default.createElement(_client().FormProvider, {
             form: form
-          }, _react2().default.createElement(_antd().FormLayout, {
+          }, _react2().default.createElement(_antdV().FormLayout, {
             layout: 'vertical'
           }, _react2().default.createElement(_client().SchemaComponent, {
             scope: {
@@ -207,11 +200,11 @@ const ChartBlockInitializer = props => {
               }
             }
           })))), _react2().default.createElement("div", {
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                         flex: 1;
                         min-width: 600px;
                       `
-          }, _react2().default.createElement(_antd2().Card, {
+          }, _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Chart preview')
           }, chartBlockEngineMetaData && _react2().default.createElement(_react2().default.Fragment, null, _react2().default.createElement(_client().SchemaComponent, {
@@ -227,10 +220,10 @@ const ChartBlockInitializer = props => {
                 }
               }
             }
-          }))), _react2().default.createElement(_antd2().Card, {
+          }))), _react2().default.createElement(_antd().Card, {
             size: 'default',
             title: (0, _locale.lang)('Data preview'),
-            className: (0, _css().css)`
+            className: (0, _client().css)`
                           margin-top: 24px;
                           overflow: scroll;
                         `

package/lib/client/ChartQueryBlockInitializer.js

@@ -11,9 +11,9 @@ function _icons() {
   };
   return data;
 }
-function _antd() {
-  const data = require("@formily/antd");
-  _antd = function _antd() {
+function _antdV() {
+  const data = require("@formily/antd-v5");
+  _antdV = function _antdV() {
     return data;
   };
   return data;
@@ -74,14 +74,14 @@ const ChartQueryBlockInitializer = props => {
   const ctx = (0, _ChartQueryMetadataProvider.useChartQueryMetadataContext)();
   const options = (0, _react2().useContext)(_react().SchemaOptionsContext);
   const onAddQuery = (0, _react2().useCallback)(info => {
-    (0, _antd().FormDialog)({
+    (0, _antdV().FormDialog)({
       sql: (0, _locale.lang)('Add SQL query'),
       json: (0, _locale.lang)('Add JSON query')
     }[info.key], () => {
       return _react2().default.createElement("div", null, _react2().default.createElement(_client().SchemaComponentOptions, {
         scope: options.scope,
         components: _objectSpread({}, options.components)
-      }, _react2().default.createElement(_antd().FormLayout, {
+      }, _react2().default.createElement(_antdV().FormLayout, {
         layout: 'vertical'
       }, _react2().default.createElement(_client().SchemaComponent, {
         schema: {
@@ -105,7 +105,7 @@ const ChartQueryBlockInitializer = props => {
       var _ref = _asyncToGenerator(function* (values) {
         try {
           var _apiClient$resource;
-          if ((_apiClient$resource = apiClient.resource('chartsQueries')) === null || _apiClient$resource === void 0 ? void 0 : _apiClient$resource.create) {
+          if ((_apiClient$resource = apiClient.resource('chartsQueries')) !== null && _apiClient$resource !== void 0 && _apiClient$resource.create) {
             const _yield$apiClient$reso = yield apiClient.resource('chartsQueries').create({
                 values
               }),

package/lib/client/DataSetPreviewTable.js

@@ -106,8 +106,8 @@ var _default = ({
       Input: _client().Input,
       FormItem: _client().FormItem
     }
-  }, _react().default.createElement(_client().BlockSchemaComponentProvider, null, _react().default.createElement(_client().SchemaComponent, {
+  }, _react().default.createElement(_client().SchemaComponent, {
     schema: schema
-  })));
+  }));
 };
 exports.default = _default;

package/lib/client/index.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
+import { Plugin } from '@nocobase/client';
 import './Icons';
-declare const Charts: React.NamedExoticComponent<object>;
-export default Charts;
+export declare class ChartsPlugin extends Plugin {
+    load(): Promise<void>;
+}
+export default ChartsPlugin;

package/lib/client/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ChartsPlugin = void 0;
 function _core() {
   const data = require("@formily/core");
   _core = function _core() {
@@ -42,6 +42,8 @@ var _QueriesTable = require("./settings/QueriesTable");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 (0, _core().registerValidateRules)({
   json5: (value, rule) => {
     if (!value) {
@@ -65,7 +67,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
     }
   }
 });
-const Charts = _react().default.memo(props => {
+const ChartsProvider = _react().default.memo(props => {
   const api = (0, _client().useAPIClient)();
   const items = (0, _react().useContext)(_client().SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -125,6 +127,17 @@ const Charts = _react().default.memo(props => {
     value: items
   }, props.children))));
 });
-Charts.displayName = 'Charts';
-var _default = Charts;
+ChartsProvider.displayName = 'ChartsProvider';
+class ChartsPlugin extends _client().Plugin {
+  load() {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      _this.app.use(ChartsProvider);
+      // TODO: 主应用应该会有这个插件，按道理不需要再注册
+      _this.app.pm.add(_client().BlockSchemaComponentPlugin);
+    })();
+  }
+}
+exports.ChartsPlugin = ChartsPlugin;
+var _default = ChartsPlugin;
 exports.default = _default;

package/lib/client/select/CustomSelect.js

@@ -11,13 +11,6 @@ function _icons() {
   };
   return data;
 }
-function _css() {
-  const data = require("@emotion/css");
-  _css = function _css() {
-    return data;
-  };
-  return data;
-}
 function _react() {
   const data = require("@formily/react");
   _react = function _react() {
@@ -105,7 +98,7 @@ const InternalSelect = (0, _react().connect)(props => {
     },
     trigger: "hover"
   }, _react2().default.createElement("div", {
-    className: (0, _css().css)`
+    className: (0, _client().css)`
                     display: flex;
                     gap: 4px;
                     align-items: center;
@@ -129,7 +122,7 @@ const InternalSelect = (0, _react().connect)(props => {
     },
     trigger: "hover"
   }, _react2().default.createElement("div", {
-    className: (0, _css().css)`
+    className: (0, _client().css)`
                     display: flex;
                     gap: 4px;
                     align-items: center;
@@ -145,7 +138,7 @@ const InternalSelect = (0, _react().connect)(props => {
   loading: true
 }, (props, field) => {
   return _objectSpread(_objectSpread({}, props), {}, {
-    suffixIcon: (field === null || field === void 0 ? void 0 : field['loading']) || (field === null || field === void 0 ? void 0 : field['validating']) ? _react2().default.createElement(_icons().LoadingOutlined, null) : props === null || props === void 0 ? void 0 : props.suffixIcon
+    suffixIcon: field !== null && field !== void 0 && field['loading'] || field !== null && field !== void 0 && field['validating'] ? _react2().default.createElement(_icons().LoadingOutlined, null) : props === null || props === void 0 ? void 0 : props.suffixIcon
   });
 }), (0, _react().mapReadPretty)(_ReadPretty.ReadPretty));
 const CustomSelect = InternalSelect;

package/lib/client/select/ReadPretty.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const ReadPretty: React.MemoExoticComponent<import("@formily/react").ReactFC<Pick<any, string | number | symbol>>>;
+export declare const ReadPretty: React.MemoExoticComponent<import("@formily/react").ReactFC<Omit<any, "ref">>>;

package/lib/client/select/shared.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCurrentOptions = exports.defaultFieldNames = void 0;
-function _lodash() {
-  const data = require("lodash");
-  _lodash = function _lodash() {
+function _client() {
+  const data = require("@nocobase/utils/client");
+  _client = function _client() {
     return data;
   };
   return data;
@@ -39,7 +39,7 @@ const getCurrentOptions = (values, dataSource, fieldNames) => {
     return newArr;
   }
   const result = flatData(dataSource);
-  values = (0, _lodash().castArray)(values).filter(item => item != null).map(val => typeof val === 'object' ? val[fieldNames.value] : val);
+  values = _client().lodash.castArray(values).filter(item => item != null).map(val => typeof val === 'object' ? val[fieldNames.value] : val);
   const findOptions = options => {
     if (!options) return [];
     const current = [];

package/lib/client/settings/queryTypes.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.sql = exports.json = exports.getQueryTypeSchema = exports.api = void 0;
-function _cloneDeep() {
-  const data = _interopRequireDefault(require("lodash/cloneDeep"));
-  _cloneDeep = function _cloneDeep() {
+function _client() {
+  const data = require("@nocobase/utils/client");
+  _client = function _client() {
     return data;
   };
   return data;
 }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const json = {
   type: 'object',
   properties: {
@@ -73,6 +72,6 @@ const types = {
   api
 };
 const getQueryTypeSchema = type => {
-  return (0, _cloneDeep().default)(types[type]);
+  return _client().lodash.cloneDeep(types[type]);
 };
 exports.getQueryTypeSchema = getQueryTypeSchema;

package/lib/client/utils.js

@@ -39,7 +39,7 @@ const parseDataSetString = str => {
     if (dataSetDataArray.every(item => {
       return typeof item === 'object' && Object.keys(item).length > 1;
     })) dataSetDataArray.map(item => {
-      if (!(item === null || item === void 0 ? void 0 : item.id)) {
+      if (!(item !== null && item !== void 0 && item.id)) {
         item.id = (0, _shared().uid)();
       }
       return item;

package/lib/server/actions/index.d.ts

@@ -1 +0,0 @@
-

package/package.json

@@ -4,15 +4,37 @@
   "displayName.zh-CN": "图表",
   "description": "Out-of-the-box, feature-rich chart plugins.",
   "description.zh-CN": "开箱即用、丰富的报表。",
-  "version": "0.10.1-alpha.1",
-  "main": "lib/server/index.js",
-  "devDependencies": {
-    "@nocobase/client": "0.10.1-alpha.1",
-    "@nocobase/server": "0.10.1-alpha.1",
-    "@nocobase/test": "0.10.1-alpha.1"
-  },
+  "version": "0.11.0-alpha.1",
+  "main": "./lib/server/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "README.zh-CN.md",
+    "CHANGELOG.md",
+    "server.js",
+    "server.d.ts",
+    "client.js",
+    "client.d.ts"
+  ],
   "dependencies": {
     "json5": "^2.2.3"
   },
-  "gitHead": "8f415f5e0ee2e72d681f9ab16af5911b52c374a9"
+  "devDependencies": {
+    "@ant-design/icons": "^5.1.4",
+    "@formily/antd-v5": "1.1.0-beta.4",
+    "@formily/core": "2.2.26",
+    "@formily/react": "2.2.26",
+    "@formily/shared": "2.2.26",
+    "@nocobase/client": "0.11.0-alpha.1",
+    "@nocobase/database": "0.11.0-alpha.1",
+    "@nocobase/server": "0.11.0-alpha.1",
+    "@nocobase/test": "0.11.0-alpha.1",
+    "@nocobase/utils": "0.11.0-alpha.1",
+    "antd": "^5.6.4",
+    "react": "^18.2.0",
+    "react-i18next": "^11.15.1",
+    "react-router-dom": "^6.11.2"
+  },
+  "gitHead": "7581b6d3a3a54f09f06a9effb7e3e65328281b2b"
 }

package/server.d.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
-export * from './lib/server';
-export { default } from './lib/server';
+export * from './src/server';
+export { default } from './src/server';
 

package/server.js

@@ -1,30 +1 @@
-"use strict";
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var _index = _interopRequireWildcard(require("./lib/server"));
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _index.default;
-  }
-});
-
-Object.keys(_index).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index[key];
-    }
-  });
-});
+module.exports = require('./lib/server/index.js');

package/src/client/ChartBlockEngineDesigner.tsx

@@ -1,13 +1,13 @@
-import { css } from '@emotion/css';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormDialog, FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
 import {
   APIClientProvider,
   GeneralSchemaDesigner,
-  i18n,
   SchemaComponent,
   SchemaComponentOptions,
   SchemaSettings,
+  css,
+  i18n,
   useAPIClient,
   useCompile,
   useDesignable,
@@ -95,7 +95,7 @@ export const ChartBlockEngineDesignerInitializer = (props) => {
             okText: compile('{{t("Submit")}}'),
             title: lang('Edit chart block'),
             width: 1200,
-            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+            bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
           (form) => {
             const [chartBlockEngineMetaData, setChartBlockEngineMetaData] = useState<ChartBlockEngineMetaData>(null);

package/src/client/ChartBlockInitializer.tsx

@@ -1,12 +1,12 @@
-import { css } from '@emotion/css';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormDialog, FormLayout } from '@formily/antd-v5';
 import { Field } from '@formily/core';
-import { observer, RecursionField, Schema, SchemaOptionsContext, useField, useForm } from '@formily/react';
+import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useForm } from '@formily/react';
 import {
   APIClientProvider,
   FormProvider,
   SchemaComponent,
   SchemaComponentOptions,
+  css,
   useAPIClient,
   useCompile,
 } from '@nocobase/client';
@@ -74,7 +74,7 @@ export const ChartBlockInitializer = (props) => {
             okText: compile('{{t("Submit")}}'),
             title: lang('Create chart block'),
             width: 1200,
-            bodyStyle: { background: '#f0f2f5', maxHeight: '65vh', overflow: 'auto' },
+            bodyStyle: { background: 'var(--nb-box-bg)', maxHeight: '65vh', overflow: 'auto' },
           },
           () => {
             const form = useForm<ChartFormInterface>();

package/src/client/ChartQueryBlockInitializer.tsx

@@ -1,5 +1,5 @@
 import { TableOutlined } from '@ant-design/icons';
-import { FormDialog, FormLayout } from '@formily/antd';
+import { FormDialog, FormLayout } from '@formily/antd-v5';
 import { SchemaOptionsContext } from '@formily/react';
 import {
   SchemaComponent,

package/src/client/DataSetPreviewTable.tsx

@@ -1,12 +1,5 @@
 import { ISchema } from '@formily/react';
-import {
-  BlockSchemaComponentProvider,
-  FormItem,
-  Input,
-  SchemaComponent,
-  SchemaComponentProvider,
-  TableV2,
-} from '@nocobase/client';
+import { FormItem, Input, SchemaComponent, SchemaComponentProvider, TableV2 } from '@nocobase/client';
 import { Empty, Spin } from 'antd';
 import React from 'react';
 import { useGetDataSet } from './ChartBlockEngine';
@@ -72,9 +65,7 @@ export default ({ queryId, fields }: { queryId: number; fields }) => {
   });
   return (
     <SchemaComponentProvider scope={{ dataSet }} components={{ TableV2, Input, FormItem }}>
-      <BlockSchemaComponentProvider>
-        <SchemaComponent schema={schema} />
-      </BlockSchemaComponentProvider>
+      <SchemaComponent schema={schema} />
     </SchemaComponentProvider>
   );
 };

package/src/client/index.tsx

@@ -1,5 +1,7 @@
 import { registerValidateRules } from '@formily/core';
 import {
+  BlockSchemaComponentPlugin,
+  Plugin,
   SchemaComponentOptions,
   SchemaInitializerContext,
   SettingsCenterProvider,
@@ -39,7 +41,7 @@ registerValidateRules({
   },
 });
 
-const Charts = React.memo((props) => {
+const ChartsProvider = React.memo((props) => {
   const api = useAPIClient();
   const items = useContext<any>(SchemaInitializerContext);
   const children = items.BlockInitializers.items[0].children;
@@ -99,6 +101,15 @@ const Charts = React.memo((props) => {
     </ChartQueryMetadataProvider>
   );
 });
-Charts.displayName = 'Charts';
+ChartsProvider.displayName = 'ChartsProvider';
 
-export default Charts;
+export class ChartsPlugin extends Plugin {
+  async load() {
+    this.app.use(ChartsProvider);
+
+    // TODO: 主应用应该会有这个插件，按道理不需要再注册
+    this.app.pm.add(BlockSchemaComponentPlugin);
+  }
+}
+
+export default ChartsPlugin;

package/src/client/select/CustomSelect.tsx

@@ -1,8 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
-import { css } from '@emotion/css';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { isValid } from '@formily/shared';
-import { Icon } from '@nocobase/client';
+import { css, Icon } from '@nocobase/client';
 import type { SelectProps } from 'antd';
 import { Popover, Select as AntdSelect } from 'antd';
 import React from 'react';

package/src/client/select/shared.ts

@@ -1,4 +1,4 @@
-import { castArray } from 'lodash';
+import { lodash } from '@nocobase/utils/client';
 
 export const defaultFieldNames = {
   label: 'label',
@@ -20,7 +20,8 @@ export const getCurrentOptions = (values, dataSource, fieldNames) => {
     return newArr;
   }
   const result = flatData(dataSource);
-  values = castArray(values)
+  values = lodash
+    .castArray(values)
     .filter((item) => item != null)
     .map((val) => (typeof val === 'object' ? val[fieldNames.value] : val));
   const findOptions = (options: any[]) => {

package/src/client/settings/queryTypes.ts

@@ -1,5 +1,6 @@
 import { ISchema } from '@formily/react';
-import cloneDeep from 'lodash/cloneDeep';
+import { lodash } from '@nocobase/utils/client';
+
 export const json: ISchema = {
   type: 'object',
   properties: {
@@ -60,5 +61,5 @@ const types = {
 };
 
 export const getQueryTypeSchema = (type) => {
-  return cloneDeep(types[type]);
+  return lodash.cloneDeep(types[type]);
 };