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:
parent
3942b7cb94
commit
aa1823cd73
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -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' },
|
||||||
|
);
|
||||||
|
@ -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';
|
||||||
|
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