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 (
+ 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;
+ });
+}