From 090db400a489fe0a1210c681eedb728b47ff9fc8 Mon Sep 17 00:00:00 2001 From: sealday Date: Tue, 23 Apr 2024 20:30:12 +0800 Subject: [PATCH] refactor: migrate assistant/page-style/hera-version (#817) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/817 --- .../features/assistant/Assistant.provider.tsx | 17 ++ .../src/client/features/assistant/index.ts | 8 + .../hera-version/HeraVersion.provider.tsx | 24 +++ .../src/client/features/hera-version/index.ts | 8 + .../page-style/PageStyle.provider.tsx | 32 ++++ .../client/features/page-style/PageTab.tsx | 62 +++++++ .../src/client/features/page-style/index.ts | 8 + .../features/page-style/usePageStyle.tsx | 6 + .../features/page-style/useTabSettings.tsx | 73 ++++++++ .../@hera/plugin-core/src/client/index.tsx | 6 + .../src/client/pages/AdminLayout.tsx | 156 +----------------- .../plugin-core/src/client/pages/Home.tsx | 3 +- 12 files changed, 251 insertions(+), 152 deletions(-) create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/assistant/Assistant.provider.tsx create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/assistant/index.ts create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/hera-version/HeraVersion.provider.tsx create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/hera-version/index.ts create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/page-style/PageStyle.provider.tsx create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/page-style/PageTab.tsx create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/page-style/index.ts create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/page-style/usePageStyle.tsx create mode 100644 packages/plugins/@hera/plugin-core/src/client/features/page-style/useTabSettings.tsx diff --git a/packages/plugins/@hera/plugin-core/src/client/features/assistant/Assistant.provider.tsx b/packages/plugins/@hera/plugin-core/src/client/features/assistant/Assistant.provider.tsx new file mode 100644 index 000000000..c56863d75 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/assistant/Assistant.provider.tsx @@ -0,0 +1,17 @@ +import { CalculatorOutlined, CommentOutlined, HighlightOutlined, ToolOutlined } from '@ant-design/icons'; +import { useDesignable } from '@nocobase/client'; +import { FloatButton } from 'antd'; +import React from 'react'; +export const AssistantProvider = ({ children }) => { + const { designable, setDesignable } = useDesignable(); + return ( + <> + {children} + }> + } onClick={() => setDesignable(!designable)} /> + } /> + } /> + + + ); +}; diff --git a/packages/plugins/@hera/plugin-core/src/client/features/assistant/index.ts b/packages/plugins/@hera/plugin-core/src/client/features/assistant/index.ts new file mode 100644 index 000000000..2947a9a86 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/assistant/index.ts @@ -0,0 +1,8 @@ +import { Plugin } from '@nocobase/client'; +import { AssistantProvider } from './Assistant.provider'; + +export class PluginAssistant extends Plugin { + async load() { + this.app.use(AssistantProvider); + } +} diff --git a/packages/plugins/@hera/plugin-core/src/client/features/hera-version/HeraVersion.provider.tsx b/packages/plugins/@hera/plugin-core/src/client/features/hera-version/HeraVersion.provider.tsx new file mode 100644 index 000000000..1af974969 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/hera-version/HeraVersion.provider.tsx @@ -0,0 +1,24 @@ +import React, { useEffect } from 'react'; +import { useCurrentUserSettingsMenu } from '@nocobase/client'; +import { usePluginVersion } from '../../hooks/usePluginVersion'; +import { useTabSettings } from '../page-style/useTabSettings'; + +const useHeraVersion = () => { + const version = usePluginVersion(); + return { + key: 'hera-version', + eventKey: 'hera-version', + label: 赫拉系统 - {version}, + }; +}; + +export const HeraVersionProvider = ({ children }) => { + const { addMenuItem } = useCurrentUserSettingsMenu(); + const heraVersion = useHeraVersion(); + const tabItem = useTabSettings(); + useEffect(() => { + addMenuItem(heraVersion, { before: 'divider_1' }); + }, [addMenuItem, tabItem, heraVersion]); + + return <>{children}; +}; diff --git a/packages/plugins/@hera/plugin-core/src/client/features/hera-version/index.ts b/packages/plugins/@hera/plugin-core/src/client/features/hera-version/index.ts new file mode 100644 index 000000000..8dc465589 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/hera-version/index.ts @@ -0,0 +1,8 @@ +import { Plugin } from '@nocobase/client'; +import { HeraVersionProvider } from './HeraVersion.provider'; + +export class PluginHeraVersion extends Plugin { + async load() { + this.app.use(HeraVersionProvider); + } +} diff --git a/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageStyle.provider.tsx b/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageStyle.provider.tsx new file mode 100644 index 000000000..cbf0c10f4 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageStyle.provider.tsx @@ -0,0 +1,32 @@ +import { useCurrentUserContext, useCurrentUserSettingsMenu } from '@nocobase/client'; +import React, { createContext, useEffect, useState } from 'react'; +import { useTabSettings } from './useTabSettings'; +import { TabsProps } from 'antd'; + +export interface PageStyleContextValue { + style: string; + items: TabsProps['items']; + setItems: React.Dispatch>; +} + +export const PageStyleContext = createContext>({ + style: 'classical', +}); + +export const PageStyleProvider = ({ children }) => { + const currentUser = useCurrentUserContext(); + const tabItem = useTabSettings(); + const [items, setItems] = useState([]); + const { addMenuItem } = useCurrentUserSettingsMenu(); + useEffect(() => { + addMenuItem(tabItem, { before: 'divider_3' }); + }, [addMenuItem, tabItem]); + + return ( + + {children} + + ); +}; diff --git a/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageTab.tsx b/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageTab.tsx new file mode 100644 index 000000000..5759f16ba --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/page-style/PageTab.tsx @@ -0,0 +1,62 @@ +import { RemoteSchemaComponent, css, useDocumentTitle } from '@nocobase/client'; +import { Tabs } from 'antd'; +import React, { useContext, useEffect } from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { PageStyleContext } from './PageStyle.provider'; + +export const PageTab = () => { + const params = useParams<{ name?: string }>(); + const { title, setTitle } = useDocumentTitle(); + const navigate = useNavigate(); + const { items, setItems } = useContext(PageStyleContext); + + useEffect(() => { + if (params.name && title) { + const targetItem = items.find((value) => value.key === params.name); + if (!targetItem) { + // 现有tab页数组里,不存在之前浏览的tab页面,添加新的tab页进数组 + setItems([ + ...items, + { + key: params.name, + label: title, + children: , + }, + ]); + } else { + // 如果存在之前浏览的tab页面,只用更新页面标题 + setTitle(targetItem.label); + } + } + }, [params.name, title]); + + const onEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => { + if (action === 'remove') { + setItems((items) => { + return items.filter((item) => item.key !== targetKey); + }); + } + }; + return ( + { + navigate(`/admin/${key}`); + }} + activeKey={params.name} + /> + ); +}; + +export function MyRouteSchemaComponent({ name }: { name: string }) { + return ; +} diff --git a/packages/plugins/@hera/plugin-core/src/client/features/page-style/index.ts b/packages/plugins/@hera/plugin-core/src/client/features/page-style/index.ts new file mode 100644 index 000000000..ca7b3ae80 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/page-style/index.ts @@ -0,0 +1,8 @@ +import { Plugin } from '@nocobase/client'; +import { PageStyleProvider } from './PageStyle.provider'; + +export class PluginPageStyle extends Plugin { + async load() { + this.app.use(PageStyleProvider); + } +} diff --git a/packages/plugins/@hera/plugin-core/src/client/features/page-style/usePageStyle.tsx b/packages/plugins/@hera/plugin-core/src/client/features/page-style/usePageStyle.tsx new file mode 100644 index 000000000..f0a3f8a3a --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/page-style/usePageStyle.tsx @@ -0,0 +1,6 @@ +import { useContext } from 'react'; +import { PageStyleContext } from './PageStyle.provider'; + +export const usePageStyle = () => { + return useContext(PageStyleContext).style; +}; diff --git a/packages/plugins/@hera/plugin-core/src/client/features/page-style/useTabSettings.tsx b/packages/plugins/@hera/plugin-core/src/client/features/page-style/useTabSettings.tsx new file mode 100644 index 000000000..5fcfb4ea8 --- /dev/null +++ b/packages/plugins/@hera/plugin-core/src/client/features/page-style/useTabSettings.tsx @@ -0,0 +1,73 @@ +import React, { useCallback } from 'react'; +import { SelectWithTitle, useAPIClient, useCurrentUserContext } from '@nocobase/client'; +import { error } from '@nocobase/utils/client'; +import { useTranslation } from '../../locale'; + +export const useTabSettings = () => { + return { + key: 'tab', + eventKey: 'tab', + label: