chore: adapt to plugin-custom-brand (#3740)

* chore: adapt to plugin-custom-brand

* chore: add parseHTML

* chore: adapt to plugin-custom-brand
This commit is contained in:
Zeke Zhang 2024-03-18 13:22:18 +08:00 committed by GitHub
parent 3942b7cb94
commit aa1823cd73
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 112 additions and 59 deletions

View File

@ -1,29 +1,42 @@
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useToken } from '../style'; import { useToken } from '../style';
import { usePlugin } from '../application';
import { parseHTML } from '@nocobase/utils/client';
import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider';
export const PoweredBy = () => { export const PoweredBy = () => {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const { token } = useToken(); const { token } = useToken();
const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
const data = useCurrentAppInfo();
const urls = { const urls = {
'en-US': 'https://www.nocobase.com', 'en-US': 'https://www.nocobase.com',
'zh-CN': 'https://cn.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 = `<span class="nb-app-version">v${data?.data?.version}</span>`;
return ( return (
<div <div
className={css` className={cx(style, 'nb-brand')}
text-align: center; dangerouslySetInnerHTML={{
color: ${token.colorTextDescription}; __html: parseHTML(
a { customBrandPlugin?.options?.options?.brand ||
color: ${token.colorTextDescription}; `Powered by <a href="${urls[i18n.language] || urls['en-US']}">NocoBase</a>`,
&:hover { { appVersion },
color: ${token.colorText}; ),
} }}
} ></div>
`}
>
Powered by <a href={urls[i18n.language] || urls['en-US']}>NocoBase</a>
</div>
); );
}; };

View File

@ -1,10 +1,12 @@
import { QuestionCircleOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined } from '@ant-design/icons';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Dropdown, Menu } from 'antd'; import { Dropdown, Menu, Popover } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { DropdownVisibleContext, useToken } from '..'; import { DropdownVisibleContext, usePlugin, useToken } from '..';
import { useCurrentAppInfo } from '../appInfo/CurrentAppInfoProvider'; 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 * @note If you want to change here, Note the Setting block on the mobile side
@ -66,48 +68,74 @@ const SettingsMenu: React.FC<{
return <Menu items={items} />; return <Menu items={items} />;
}; };
export const Help = () => { const helpClassName = css`
const [visible, setVisible] = useState(false); display: inline-block;
const { token } = useToken(); vertical-align: top;
width: 46px;
height: 46px;
&:hover {
background: rgba(255, 255, 255, 0.1) !important;
}
`;
return ( export const Help = observer(
<div () => {
className={css` const [visible, setVisible] = useState(false);
display: inline-block; const { token } = useToken();
vertical-align: top; const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
width: 46px; const data = useCurrentAppInfo();
height: 46px;
&:hover { const icon = (
background: rgba(255, 255, 255, 0.1) !important; <span
} data-testid="help-button"
`} className={css`
> max-width: 160px;
<DropdownVisibleContext.Provider value={{ visible, setVisible }}> overflow: hidden;
<Dropdown display: inline-block;
open={visible} line-height: 12px;
onOpenChange={(visible) => { white-space: nowrap;
setVisible(visible); text-overflow: ellipsis;
}} `}
dropdownRender={() => { style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }}
return <SettingsMenu />; >
}} <QuestionCircleOutlined />
> </span>
<span );
data-testid="help-button"
className={css` if (customBrandPlugin?.options?.options?.about) {
max-width: 160px; const appVersion = `<span class="nb-app-version">v${data?.data?.version}</span>`;
overflow: hidden; const content = parseHTML(customBrandPlugin.options.options.about, { appVersion });
display: inline-block;
line-height: 12px; return (
white-space: nowrap; <div className={helpClassName}>
text-overflow: ellipsis; <Popover
`} // nb-about 的样式定义在 plugin-custom-brand 插件中
style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }} rootClassName="nb-about"
content={<div dangerouslySetInnerHTML={{ __html: content }}></div>}
> >
<QuestionCircleOutlined /> {icon}
</span> </Popover>
</Dropdown> </div>
</DropdownVisibleContext.Provider> );
</div> }
);
}; return (
<div className={helpClassName}>
<DropdownVisibleContext.Provider value={{ visible, setVisible }}>
<Dropdown
open={visible}
onOpenChange={(visible) => {
setVisible(visible);
}}
dropdownRender={() => {
return <SettingsMenu />;
}}
>
{icon}
</Dropdown>
</DropdownVisibleContext.Provider>
</div>
);
},
{ displayName: 'Help' },
);

View File

@ -18,3 +18,4 @@ export * from './isPortalInBody';
export * from './uid'; export * from './uid';
export * from './url'; export * from './url';
export { dayjs, lodash }; export { dayjs, lodash };
export * from './parseHTML';

View File

@ -0,0 +1,11 @@
/**
* parseHTML('<span>{{version}}</span>', { version: '1.0.0' }) -> '<span>1.0.0</span>'
* @param html
* @param variables
* @returns
*/
export function parseHTML(html: string, variables: Record<string, any>) {
return html.replace(/\{\{(\w+)\}\}/g, function (match, key) {
return typeof variables[key] !== 'undefined' ? variables[key] : match;
});
}