* feat: add settingsCenter * fix: style bug * chore: optimized code * refactor: settingCenter Auth * feat: add aclSnippet option * refactor: all plugin's setting center api * feat: add plugin with name * docs: add settings-center doc * fix: settings center menu sort by name * fix: change setting center layout * fix: change hello sort * test: add SettingsCenter.ts test case * fix: bug * fix: acl bug * fix: bug * fix: bug and 404 page * fix: test bug * fix: test bug * fix: bug * fix: locale * fix: styling * fix: rename settingsCenter to pluginSettingsManager * fix: styling * fix: e2e bug * fix: e2e bug * fix: locale * feat: update docs * fix: update --------- Co-authored-by: chenos <chenlinxh@gmail.com>
91 lines
2.7 KiB
TypeScript
91 lines
2.7 KiB
TypeScript
import { Plugin, createStyles, defaultTheme, useCurrentUserSettingsMenu, useGlobalTheme } from '@nocobase/client';
|
|
import { ConfigProvider } from 'antd';
|
|
import _ from 'lodash';
|
|
import React, { useEffect, useMemo } from 'react';
|
|
import InitializeTheme from './components/InitializeTheme';
|
|
import { ThemeEditorProvider } from './components/ThemeEditorProvider';
|
|
import ThemeList from './components/ThemeList';
|
|
import { ThemeListProvider } from './components/ThemeListProvider';
|
|
import CustomTheme from './components/theme-editor';
|
|
import { useThemeSettings } from './hooks/useThemeSettings';
|
|
import { NAMESPACE } from './locale';
|
|
|
|
const useStyles = createStyles(({ css, token }) => {
|
|
return {
|
|
editor: css`
|
|
overflow: hidden;
|
|
border-left: 1px solid ${token.colorBorderSecondary};
|
|
animation: 0.1s ease-out 0s 1 slideInFromRight;
|
|
@keyframes slideInFromRight {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
`,
|
|
};
|
|
});
|
|
|
|
const CustomThemeProvider = React.memo((props) => {
|
|
const { addMenuItem } = useCurrentUserSettingsMenu();
|
|
const themeItem = useThemeSettings();
|
|
const [open, setOpen] = React.useState(false);
|
|
const { theme, setTheme } = useGlobalTheme();
|
|
const { styles } = useStyles();
|
|
|
|
useEffect(() => {
|
|
// 在页面右上角中添加一个 Theme 菜单项
|
|
addMenuItem(themeItem, { before: 'divider_3' });
|
|
}, [addMenuItem, themeItem]);
|
|
|
|
const contentStyle = useMemo(() => {
|
|
return open
|
|
? { transform: 'rotate(0)', flexGrow: 1, width: 0, height: '100%' }
|
|
: { flexGrow: 1, width: 0, height: '100%' };
|
|
}, [open]);
|
|
|
|
const editor = (
|
|
<div style={{ display: 'flex', overflow: 'hidden', height: '100%' }}>
|
|
<div style={contentStyle}>{props.children}</div>
|
|
{open ? (
|
|
<div className={styles.editor}>
|
|
<CustomTheme onThemeChange={setTheme} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
|
|
if (!theme?.token?.motionUnit) {
|
|
_.set(theme, 'token.motionUnit', defaultTheme.token.motionUnit);
|
|
}
|
|
|
|
return (
|
|
<ConfigProvider theme={theme}>
|
|
<ThemeListProvider>
|
|
<InitializeTheme>
|
|
<ThemeEditorProvider open={open} setOpen={setOpen}>
|
|
{editor}
|
|
</ThemeEditorProvider>
|
|
</InitializeTheme>
|
|
</ThemeListProvider>
|
|
</ConfigProvider>
|
|
);
|
|
});
|
|
CustomThemeProvider.displayName = 'CustomThemeProvider';
|
|
|
|
export class ThemeEditorPlugin extends Plugin {
|
|
async load() {
|
|
this.app.use(CustomThemeProvider);
|
|
this.app.pluginSettingsManager.add(NAMESPACE, {
|
|
title: `{{t("Theme editor", {ns:"${NAMESPACE}"})}}`,
|
|
icon: 'BgColorsOutlined',
|
|
Component: ThemeList,
|
|
aclSnippet: 'pm.theme-editor.themes',
|
|
});
|
|
}
|
|
}
|
|
|
|
export default ThemeEditorPlugin;
|