diff --git a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx index 81a0fcdfcb..b6b5c796e4 100644 --- a/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx +++ b/packages/core/client/src/collection-manager/CollectionManagerProvider.tsx @@ -28,16 +28,7 @@ export const CollectionManagerProvider_deprecated: React.FC { - const api = useAPIClient(); const dm = useDataSourceManager(); const { refreshCH } = useCollectionHistory(); @@ -46,26 +37,13 @@ export const RemoteCollectionManagerProvider = (props: any) => { }>(() => { return dm.reload().then(refreshCH); }); - const result = useRequest<{ - data: any; - }>(coptions); const { render } = useAppSpin(); - const refreshCategory = useCallback(async () => { - const { data } = await api.request(coptions); - result.mutate(data); - return data?.data || []; - }, [result]); - if (service.loading) { return render(); } - return ( - - - - ); + return ; }; export const CollectionCategoriesProvider = (props) => { diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/CollectionMainProvider.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/CollectionMainProvider.tsx new file mode 100644 index 0000000000..6ced78b500 --- /dev/null +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/CollectionMainProvider.tsx @@ -0,0 +1,39 @@ +/** + * This file is part of the NocoBase (R) project. + * Copyright (c) 2020-2024 NocoBase Co., Ltd. + * Authors: NocoBase Team. + * + * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License. + * For more information, please refer to: https://www.nocobase.com/agreement. + */ + +import React, { useCallback } from 'react'; +import { CollectionCategoriesProvider, useAPIClient, useRequest } from '@nocobase/client'; +import { Outlet } from 'react-router-dom'; + +export const CollectionMainProvider = (props) => { + const api = useAPIClient(); + + const coptions = { + url: 'collectionCategories:list', + params: { + paginate: false, + sort: ['sort'], + }, + }; + + const result = useRequest<{ + data: any; + }>(coptions); + + const refreshCategory = useCallback(async () => { + const { data } = await api.request(coptions); + result.mutate(data); + return data?.data || []; + }, [result]); + return ( + + {} + + ); +}; diff --git a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/index.tsx b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/index.tsx index 50da2caef2..77112abc34 100644 --- a/packages/plugins/@nocobase/plugin-data-source-manager/src/client/index.tsx +++ b/packages/plugins/@nocobase/plugin-data-source-manager/src/client/index.tsx @@ -19,6 +19,7 @@ import { DatabaseConnectionManagerPane } from './component/DatabaseConnectionMan import { MainDataSourceManager } from './component/MainDataSourceManager'; import { DataSourcePermissionManager } from './component/PermissionManager'; import { NAMESPACE } from './locale'; +import { CollectionMainProvider } from './component/MainDataSourceManager/CollectionMainProvider'; export class PluginDataSourceManagerClient extends Plugin { types = new Map(); @@ -46,6 +47,7 @@ export class PluginDataSourceManagerClient extends Plugin { })); this.app.use(DatabaseConnectionProvider); + this.app.pluginSettingsManager.add(NAMESPACE, { title: `{{t("Data sources", { ns: "${NAMESPACE}" })}}`, icon: 'ClusterOutlined', @@ -74,6 +76,7 @@ export class PluginDataSourceManagerClient extends Plugin { sort: 100, skipAclConfigure: true, aclSnippet: 'pm.data-source-manager.data-source-main', + Component: CollectionMainProvider, }); this.app.pluginSettingsManager.add(`${NAMESPACE}/main.collections`, { title: `{{t("Collections", { ns: "${NAMESPACE}" })}}`, diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx index 22e9d40ba3..59db3761ca 100644 --- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx +++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/GraphDrawPage.tsx @@ -20,7 +20,6 @@ import { APIClientProvider, ApplicationContext, CollectionCategoriesContext, - CollectionCategoriesProvider, CurrentAppInfoContext, DataSourceApplicationProvider, SchemaComponent, @@ -38,7 +37,7 @@ import { import { App, Button, ConfigProvider, Layout, Spin, Switch, Tooltip } from 'antd'; import dagre from 'dagre'; import lodash from 'lodash'; -import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useState } from 'react'; +import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import { useAsyncDataSource, useCreateActionAndRefreshCM } from './action-hooks'; import { AddCollectionAction } from './components/AddCollectionAction'; @@ -384,13 +383,15 @@ export const GraphDrawPage = React.memo(() => { const [collectionList, setCollectionList] = useState([]); const [loading, setLoading] = useState(false); const { collections, getCollections } = useCollectionManager_deprecated(); + const categoryCtx = useContext(CollectionCategoriesContext); + const categoryCtxRef = useRef(); + categoryCtxRef.current = categoryCtx; const dm = useDataSourceManager(); const currentAppInfo = useCurrentAppInfo(); const app = useApp(); const { data: { database }, } = currentAppInfo; - const categoryCtx = useContext(CollectionCategoriesContext); const scope = { ...options?.scope }; const components = { ...options?.components }; const saveGraphPositionAction = async (data) => { @@ -442,7 +443,6 @@ export const GraphDrawPage = React.memo(() => { }; const dataSource = useDataSource(); - const initGraphCollections = () => { targetGraph = new Graph({ container: document.getElementById('container')!, @@ -520,7 +520,7 @@ export const GraphDrawPage = React.memo(() => { - + {/* TODO: 因为画布中的卡片是一次性注册进 Graph 的，这里的 theme 是存在闭包里的，因此当主题动态变更时，并不会触发卡片的重新渲染 */}
@@ -531,7 +531,7 @@ export const GraphDrawPage = React.memo(() => {
- + diff --git a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx index 6597f054d2..06c518059c 100644 --- a/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx +++ b/packages/plugins/@nocobase/plugin-graph-collection-manager/src/client/components/Entity.tsx @@ -420,7 +420,7 @@ const Entity: React.FC<{ );