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
GitHub
parent
3942b7cb94
commit
aa1823cd73
@ -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 = `<span class="nb-app-version">v${data?.data?.version}</span>`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={css`
|
||||
text-align: center;
|
||||
color: ${token.colorTextDescription};
|
||||
a {
|
||||
color: ${token.colorTextDescription};
|
||||
&:hover {
|
||||
color: ${token.colorText};
|
||||
}
|
||||
}
|
||||
`}
|
||||
>
|
||||
Powered by <a href={urls[i18n.language] || urls['en-US']}>NocoBase</a>
|
||||
</div>
|
||||
className={cx(style, 'nb-brand')}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: parseHTML(
|
||||
customBrandPlugin?.options?.options?.brand ||
|
||||
`Powered by <a href="${urls[i18n.language] || urls['en-US']}">NocoBase</a>`,
|
||||
{ appVersion },
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 <Menu items={items} />;
|
||||
};
|
||||
|
||||
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 (
|
||||
<div
|
||||
className={css`
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<DropdownVisibleContext.Provider value={{ visible, setVisible }}>
|
||||
<Dropdown
|
||||
open={visible}
|
||||
onOpenChange={(visible) => {
|
||||
setVisible(visible);
|
||||
}}
|
||||
dropdownRender={() => {
|
||||
return <SettingsMenu />;
|
||||
}}
|
||||
>
|
||||
<span
|
||||
data-testid="help-button"
|
||||
className={css`
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
`}
|
||||
style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }}
|
||||
export const Help = observer(
|
||||
() => {
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { token } = useToken();
|
||||
const customBrandPlugin: any = usePlugin('@nocobase/plugin-custom-brand');
|
||||
const data = useCurrentAppInfo();
|
||||
|
||||
const icon = (
|
||||
<span
|
||||
data-testid="help-button"
|
||||
className={css`
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
`}
|
||||
style={{ cursor: 'pointer', padding: '16px', color: token.colorTextHeaderMenu }}
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</span>
|
||||
);
|
||||
|
||||
if (customBrandPlugin?.options?.options?.about) {
|
||||
const appVersion = `<span class="nb-app-version">v${data?.data?.version}</span>`;
|
||||
const content = parseHTML(customBrandPlugin.options.options.about, { appVersion });
|
||||
|
||||
return (
|
||||
<div className={helpClassName}>
|
||||
<Popover
|
||||
// nb-about 的样式定义在 plugin-custom-brand 插件中
|
||||
rootClassName="nb-about"
|
||||
content={<div dangerouslySetInnerHTML={{ __html: content }}></div>}
|
||||
>
|
||||
<QuestionCircleOutlined />
|
||||
</span>
|
||||
</Dropdown>
|
||||
</DropdownVisibleContext.Provider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
{icon}
|
||||
</Popover>
|
||||
</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' },
|
||||
);
|
||||
|
||||
@ -18,3 +18,4 @@ export * from './isPortalInBody';
|
||||
export * from './uid';
|
||||
export * from './url';
|
||||
export { dayjs, lodash };
|
||||
export * from './parseHTML';
|
||||
|
||||
11
packages/core/utils/src/parseHTML.ts
Normal file
11
packages/core/utils/src/parseHTML.ts
Normal 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;
|
||||
});
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user