From aa1823cd7390a64f6eb22f32c18f30560e6bbe00 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Mon, 18 Mar 2024 13:22:18 +0800 Subject: [PATCH] chore: adapt to plugin-custom-brand (#3740) * chore: adapt to plugin-custom-brand * chore: add parseHTML * chore: adapt to plugin-custom-brand --- packages/core/client/src/powered-by/index.tsx | 41 +++--- packages/core/client/src/user/Help.tsx | 118 +++++++++++------- packages/core/utils/src/client.ts | 1 + packages/core/utils/src/parseHTML.ts | 11 ++ 4 files changed, 112 insertions(+), 59 deletions(-) create mode 100644 packages/core/utils/src/parseHTML.ts diff --git a/packages/core/client/src/powered-by/index.tsx b/packages/core/client/src/powered-by/index.tsx index dd5546884..949762aae 100644 --- a/packages/core/client/src/powered-by/index.tsx +++ b/packages/core/client/src/powered-by/index.tsx @@ -1,29 +1,42 @@ -import { css } from '@emotion/css'; +import { css, cx } from '@emotion/css'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { useToken } from '../style'; +import { usePlugin } from '../application'; +import { parseHTML } from '@nocobase/utils/client'; +import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider'; export const PoweredBy = () => { const { i18n } = useTranslation(); const { token } = useToken(); + const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand'); + const data = useCurrentAppInfo(); const urls = { 'en-US': 'https://www.nocobase.com', 'zh-CN': 'https://cn.nocobase.com', }; + const style = css` + text-align: center; + color: ${token.colorTextDescription}; + a { + color: ${token.colorTextDescription}; + &:hover { + color: ${token.colorText}; + } + } + `; + const appVersion = `v${data?.data?.version}`; + return (
- Powered by NocoBase -
+ className={cx(style, 'nb-brand')} + dangerouslySetInnerHTML={{ + __html: parseHTML( + customBrandPlugin?.options?.options?.brand || + `Powered by NocoBase`, + { appVersion }, + ), + }} + > ); }; diff --git a/packages/core/client/src/user/Help.tsx b/packages/core/client/src/user/Help.tsx index 45b55a126..893060805 100644 --- a/packages/core/client/src/user/Help.tsx +++ b/packages/core/client/src/user/Help.tsx @@ -1,10 +1,12 @@ import { QuestionCircleOutlined } from '@ant-design/icons'; import { css } from '@emotion/css'; -import { Dropdown, Menu } from 'antd'; +import { Dropdown, Menu, Popover } from 'antd'; import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { DropdownVisibleContext, useToken } from '..'; +import { DropdownVisibleContext, usePlugin, useToken } from '..'; import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider'; +import { observer } from '@formily/reactive-react'; +import { parseHTML } from '@nocobase/utils/client'; /** * @note If you want to change here, Note the Setting block on the mobile side @@ -66,48 +68,74 @@ const SettingsMenu: React.FC<{ return ; }; -export const Help = () => { - const [visible, setVisible] = useState(false); - const { token } = useToken(); +const helpClassName = css` + display: inline-block; + vertical-align: top; + width: 46px; + height: 46px; + &:hover { + background: rgba(255, 255, 255, 0.1) !important; + } +`; - return ( -
- - { - setVisible(visible); - }} - dropdownRender={() => { - return ; - }} - > - { + const [visible, setVisible] = useState(false); + const { token } = useToken(); + const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand'); + const data = useCurrentAppInfo(); + + const icon = ( + + + + ); + + if (customBrandPlugin?.options?.options?.about) { + const appVersion = `v${data?.data?.version}`; + const content = parseHTML(customBrandPlugin.options.options.about, { appVersion }); + + return ( +
+
} > - -
-
-
-
- ); -}; + {icon} + + + ); + } + + return ( +
+ + { + setVisible(visible); + }} + dropdownRender={() => { + return ; + }} + > + {icon} + + +
+ ); + }, + { displayName: 'Help' }, +); diff --git a/packages/core/utils/src/client.ts b/packages/core/utils/src/client.ts index 08502cb20..2cb72b915 100644 --- a/packages/core/utils/src/client.ts +++ b/packages/core/utils/src/client.ts @@ -18,3 +18,4 @@ export * from './isPortalInBody'; export * from './uid'; export * from './url'; export { dayjs, lodash }; +export * from './parseHTML'; diff --git a/packages/core/utils/src/parseHTML.ts b/packages/core/utils/src/parseHTML.ts new file mode 100644 index 000000000..53c100ffe --- /dev/null +++ b/packages/core/utils/src/parseHTML.ts @@ -0,0 +1,11 @@ +/** + * parseHTML('{{version}}', { version: '1.0.0' }) -> '1.0.0' + * @param html + * @param variables + * @returns + */ +export function parseHTML(html: string, variables: Record) { + return html.replace(/\{\{(\w+)\}\}/g, function (match, key) { + return typeof variables[key] !== 'undefined' ? variables[key] : match; + }); +}