@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/src/client/components/ThemeListProvider.tsx

@@ -0,0 +1,60 @@
+import { ReturnTypeOfUseRequest, useRequest } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import React, { createContext, useMemo } from 'react';
+import { ThemeItem } from '../../types';
+import { changeAlgorithmFromStringToFunction } from '../utils/changeAlgorithmFromStringToFunction';
+
+interface TData extends Pick<ReturnTypeOfUseRequest, 'data' | 'error' | 'run' | 'refresh' | 'loading'> {
+  data?: ThemeItem[];
+}
+
+const ThemeListContext = createContext<TData>(null);
+
+export const useThemeListContext = () => {
+  return React.useContext(ThemeListContext);
+};
+
+export const ThemeListProvider = ({ children }) => {
+  const {
+    data,
+    error: err,
+    run,
+    refresh,
+    loading,
+  } = useRequest(
+    {
+      url: 'themeConfig:list',
+      params: {
+        sort: 'id',
+        paginate: false,
+      },
+    },
+    {
+      manual: true,
+    },
+  );
+
+  const items = useMemo(() => {
+    return ((data as any)?.data as ThemeItem[])?.map((item) => changeAlgorithmFromStringToFunction(item));
+  }, [data]);
+
+  if (err) {
+    error(err);
+  }
+
+  return (
+    <ThemeListContext.Provider
+      value={{
+        data: items,
+        error: err,
+        run,
+        refresh,
+        loading,
+      }}
+    >
+      {children}
+    </ThemeListContext.Provider>
+  );
+};
+
+ThemeListProvider.displayName = 'ThemeListProvider';

package/src/client/components/ToEditTheme.tsx

@@ -0,0 +1,69 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { compatOldTheme, defaultTheme, useGlobalTheme, useToken } from '@nocobase/client';
+import { App, Button, Space } from 'antd';
+import React, { useCallback } from 'react';
+import { useTranslation } from '../locale';
+import { useThemeEditorContext } from './ThemeEditorProvider';
+
+const ToEditTheme = () => {
+  const { theme, setTheme, setCurrentSettingTheme } = useGlobalTheme();
+  const { token } = useToken();
+  const { setOpen } = useThemeEditorContext();
+  const { t } = useTranslation();
+  const { modal } = App.useApp();
+
+  const handleClick = useCallback(() => {
+    const m = modal.confirm({
+      title: t('Add new theme'),
+      closable: true,
+      maskClosable: true,
+      width: 'fit-content',
+      footer: (
+        <Space style={{ float: 'right', marginTop: token.margin, justifyContent: 'flex-end' }} wrap>
+          <Button
+            onClick={() => {
+              setCurrentSettingTheme(theme);
+              setTheme(compatOldTheme(theme));
+              setOpen(true);
+              m.destroy();
+            }}
+          >
+            {t('Edit based on current theme')}
+          </Button>
+          <Button
+            type={'primary'}
+            onClick={() => {
+              setCurrentSettingTheme(theme);
+              setTheme(compatOldTheme(defaultTheme));
+              setOpen(true);
+              m.destroy();
+            }}
+          >
+            {t('Create a brand new theme')}
+          </Button>
+        </Space>
+      ),
+    });
+  }, [modal, setCurrentSettingTheme, setOpen, setTheme, t, theme, token.margin]);
+
+  return (
+    <Button
+      type={'dashed'}
+      style={{
+        width: 240,
+        height: 240,
+        borderRadius: token.borderRadiusLG,
+        borderColor: 'var(--colorSettings)',
+        color: 'var(--colorSettings)',
+      }}
+      icon={<PlusOutlined />}
+      onClick={handleClick}
+    >
+      {t('Add new theme')}
+    </Button>
+  );
+};
+
+ToEditTheme.displayName = 'ToEditTheme';
+
+export default ToEditTheme;

package/src/client/components/theme-editor/index.tsx

@@ -0,0 +1,170 @@
+import { css, cx } from '@emotion/css';
+import { createStyles, useAPIClient, useGlobalTheme } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { Button, ConfigProvider, Input, Space, message } from 'antd';
+import antdEnUs from 'antd/locale/en_US';
+import antdZhCN from 'antd/locale/zh_CN';
+import React, { useEffect } from 'react';
+import { ThemeConfig } from '../../../types';
+import { ThemeEditor, enUS, zhCN } from '../../antd-token-previewer';
+import { useUpdateThemeSettings } from '../../hooks/useUpdateThemeSettings';
+import { useTranslation } from '../../locale';
+import { changeAlgorithmFromFunctionToString } from '../../utils/changeAlgorithmFromFunctionToString';
+import { useThemeEditorContext } from '../ThemeEditorProvider';
+import { useThemeListContext } from '../ThemeListProvider';
+
+const useStyle = createStyles(({ token }) => ({
+  editor: css({
+    '& > div:nth-child(2)': {
+      display: 'none',
+    },
+  }),
+  header: css({
+    width: '100%',
+    height: 56,
+    padding: '0 16px',
+    borderBottom: '1px solid #F0F0F0',
+    backgroundColor: '#fff',
+
+    '> .ant-space-item:first-child': {
+      flex: 1,
+    },
+  }),
+
+  errorPlaceholder: css({
+    '&::placeholder': {
+      color: token.colorErrorText,
+    },
+  }),
+}));
+
+const CustomTheme = ({ onThemeChange }: { onThemeChange?: (theme: ThemeConfig) => void }) => {
+  const { styles } = useStyle();
+  const {
+    theme: globalTheme,
+    setTheme: setGlobalTheme,
+    getCurrentSettingTheme,
+    setCurrentEditingTheme,
+    getCurrentEditingTheme,
+  } = useGlobalTheme();
+  const [theme, setTheme] = React.useState<ThemeConfig>(globalTheme);
+  const { setOpen } = useThemeEditorContext();
+  const { t, i18n } = useTranslation();
+  const { refresh } = useThemeListContext();
+  const api = useAPIClient();
+  const [themeName, setThemeName] = React.useState<string>(globalTheme.name);
+  const [loading, setLoading] = React.useState(false);
+  const { updateUserThemeSettings } = useUpdateThemeSettings();
+  const [themeNameStatus, setThemeNameStatus] = React.useState<'' | 'error' | 'warning'>();
+
+  useEffect(() => {
+    setTheme(globalTheme);
+  }, [globalTheme]);
+
+  const lang = i18n.language;
+
+  const handleSave = async () => {
+    if (!themeName) {
+      setThemeNameStatus('error');
+      return;
+    }
+
+    setLoading(true);
+
+    // 编辑主题
+    if (getCurrentEditingTheme()) {
+      const editingItem = getCurrentEditingTheme();
+      editingItem.config = changeAlgorithmFromFunctionToString(theme) as any;
+      editingItem.config.name = themeName;
+      try {
+        await api.request({
+          url: `themeConfig:update/${editingItem.id}`,
+          method: 'POST',
+          data: editingItem,
+        });
+        refresh?.();
+        message.success(t('Saved successfully'));
+      } catch (err) {
+        error(err);
+      }
+      setLoading(false);
+      setOpen(false);
+      setCurrentEditingTheme(null);
+      setTheme(getCurrentSettingTheme());
+      return;
+    }
+
+    // 新增主题
+    try {
+      const data = await api.request({
+        url: 'themeConfig:create',
+        method: 'POST',
+        data: {
+          config: {
+            ...changeAlgorithmFromFunctionToString(theme),
+            name: themeName,
+          },
+          optional: true,
+          isBuiltIn: false,
+        },
+      });
+      await updateUserThemeSettings(data.data.data.id);
+      refresh?.();
+      message.success(t('Saved successfully'));
+    } catch (err) {
+      error(err);
+    }
+    setLoading(false);
+    setOpen(false);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setGlobalTheme(getCurrentSettingTheme());
+    setCurrentEditingTheme(null);
+  };
+
+  const handleThemeNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) {
+      setThemeNameStatus('error');
+    } else {
+      setThemeNameStatus('');
+    }
+    setThemeName(e.target.value);
+  };
+
+  return (
+    <>
+      <ConfigProvider theme={{ inherit: false }} locale={lang === 'zh-CN' ? antdZhCN : antdEnUs}>
+        <Space className={styles.header}>
+          <Input
+            className={cx({ [styles.errorPlaceholder]: themeNameStatus === 'error' })}
+            status={themeNameStatus}
+            placeholder={t('Please set a name for this theme')}
+            value={themeName}
+            onChange={handleThemeNameChange}
+            onPressEnter={handleSave}
+          />
+          <Button type="default" onClick={handleClose}>
+            {t('Close')}
+          </Button>
+          <Button loading={loading} type="primary" onClick={handleSave}>
+            {t('Save')}
+          </Button>
+        </Space>
+        <ThemeEditor
+          className={styles.editor}
+          theme={{ name: 'Custom Theme', key: 'test', config: theme }}
+          style={{ height: 'calc(100vh - 56px)', width: 540 }}
+          onThemeChange={(newTheme) => {
+            setTheme(newTheme.config);
+            onThemeChange?.(newTheme.config);
+          }}
+          locale={lang === 'zh-CN' ? zhCN : enUS}
+        />
+      </ConfigProvider>
+    </>
+  );
+};
+
+export default CustomTheme;

package/src/client/hooks/useThemeSettings.tsx

@@ -0,0 +1,102 @@
+import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { MenuProps, Select } from 'antd';
+import React, { useEffect, useMemo } from 'react';
+import { useCurrentThemeId } from '../components/InitializeTheme';
+import { useThemeListContext } from '../components/ThemeListProvider';
+import { useTranslation } from '../locale';
+import { useUpdateThemeSettings } from './useUpdateThemeSettings';
+
+export const useThemeSettings = () => {
+  return useMemo<MenuProps['items'][0]>(() => {
+    return {
+      key: 'theme',
+      eventKey: 'theme',
+      label: <Label />,
+    };
+  }, []);
+};
+
+function Label() {
+  const { t } = useTranslation();
+  const currentUser = useCurrentUserContext();
+  const systemSettings = useSystemSettings();
+  const { run, error: err, data, refresh } = useThemeListContext();
+  const { updateUserThemeSettings, updateSystemThemeSettings } = useUpdateThemeSettings();
+  const currentThemeId = useCurrentThemeId();
+  const themeId = useCurrentThemeId();
+  const api = useAPIClient();
+
+  const options = useMemo(() => {
+    return data
+      ?.filter((item) => item.optional)
+      .map((item) => {
+        return {
+          label: t(item.config.name),
+          value: item.id,
+        };
+      });
+  }, [data, t]);
+
+  useEffect(() => {
+    if (!data) {
+      run();
+    }
+  }, []);
+
+  useEffect(() => {
+    const init = async () => {
+      // 当 themeId 为空时表示插件是第一次被启用
+      if (themeId == null && data) {
+        const firstTheme = data[0];
+
+        try {
+          // 避免并发请求，在本地存储中容易出问题
+          await updateSystemThemeSettings(firstTheme.id);
+          await updateUserThemeSettings(firstTheme.id);
+        } catch (err) {
+          error(err);
+        }
+      }
+    };
+
+    init();
+  }, [themeId, updateSystemThemeSettings, updateUserThemeSettings, data, api, refresh]);
+
+  if (err) {
+    error(err);
+    return null;
+  }
+
+  if (!currentUser?.data?.data?.systemSettings) {
+    error('Please check if provide `CurrentUserProvider` in your app.');
+    throw new Error('Please check if provide `CurrentUserProvider` in your app.');
+  }
+
+  if (!systemSettings?.data?.data?.options) {
+    error('Please check if provide `SystemSettingsProvider` in your app.');
+    throw new Error('Please check if provide `SystemSettingsProvider` in your app.');
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      {t('Theme')}
+      <Select
+        style={{ minWidth: 100 }}
+        bordered={false}
+        popupMatchSelectWidth={false}
+        value={currentThemeId}
+        options={options}
+        onChange={(value) => {
+          updateUserThemeSettings(value);
+        }}
+      />
+    </div>
+  );
+}

package/src/client/hooks/useUpdateThemeSettings.tsx

@@ -0,0 +1,69 @@
+import { useAPIClient, useCurrentUserContext, useSystemSettings } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { useCallback } from 'react';
+
+export function useUpdateThemeSettings() {
+  const api = useAPIClient();
+  const currentUser = useCurrentUserContext();
+  const systemSettings = useSystemSettings();
+
+  const updateUserThemeSettings = useCallback(
+    async (themeId: number | null) => {
+      if (themeId === currentUser.data.data.systemSettings.themeId) {
+        return;
+      }
+      try {
+        await api.resource('users').updateProfile({
+          values: {
+            systemSettings: {
+              ...currentUser.data.data.systemSettings,
+              themeId,
+            },
+          },
+        });
+        currentUser.mutate({
+          data: {
+            ...currentUser.data.data,
+            systemSettings: {
+              ...currentUser.data.data.systemSettings,
+              themeId,
+            },
+          },
+        });
+      } catch (err) {
+        error(err);
+      }
+    },
+    [api, currentUser],
+  );
+
+  const updateSystemThemeSettings = useCallback(
+    async (themeId: number | null) => {
+      if (themeId === systemSettings.data.data.options.themeId) {
+        return;
+      }
+      await api.request({
+        url: 'systemSettings:update/1',
+        method: 'post',
+        data: {
+          options: {
+            ...systemSettings.data.data.options,
+            themeId,
+          },
+        },
+      });
+      systemSettings.mutate({
+        data: {
+          ...systemSettings.data.data,
+          options: {
+            ...systemSettings.data.data.options,
+            themeId,
+          },
+        },
+      });
+    },
+    [api, systemSettings],
+  );
+
+  return { updateUserThemeSettings, updateSystemThemeSettings };
+}

package/src/client/index.tsx

@@ -0,0 +1,99 @@
+import {
+  Plugin,
+  SettingsCenterProvider,
+  createStyles,
+  useCurrentUserSettingsMenu,
+  useGlobalTheme,
+} from '@nocobase/client';
+import { ConfigProvider } from 'antd';
+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 { useTranslation } 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 { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const { theme, setTheme } = useGlobalTheme();
+  const { styles } = useStyles();
+
+  useEffect(() => {
+    // 在页面右上角中添加一个 Theme 菜单项
+    addMenuItem(themeItem, { before: 'divider_3' });
+  }, [addMenuItem, themeItem]);
+
+  const settings = useMemo(() => {
+    return {
+      'theme-editor': {
+        title: t('Theme editor'),
+        icon: 'BgColorsOutlined',
+        tabs: {
+          themes: {
+            title: t('Themes'),
+            component: ThemeList,
+          },
+        },
+      },
+    };
+  }, []);
+
+  const contentStyle = useMemo(() => {
+    return open ? { transform: 'rotate(0)', flexGrow: 1, width: 0 } : { flexGrow: 1, width: 0 };
+  }, [open]);
+
+  const editor = (
+    <div style={{ display: 'flex', overflow: 'hidden' }}>
+      <div style={contentStyle}>{props.children}</div>
+      {open ? (
+        <div className={styles.editor}>
+          <CustomTheme onThemeChange={setTheme} />
+        </div>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <ConfigProvider theme={theme}>
+      <ThemeListProvider>
+        <InitializeTheme>
+          <ThemeEditorProvider open={open} setOpen={setOpen}>
+            <SettingsCenterProvider settings={settings}>{editor}</SettingsCenterProvider>
+          </ThemeEditorProvider>
+        </InitializeTheme>
+      </ThemeListProvider>
+    </ConfigProvider>
+  );
+});
+CustomThemeProvider.displayName = 'CustomThemeProvider';
+
+export class ThemeEditorPlugin extends Plugin {
+  async load() {
+    this.app.use(CustomThemeProvider);
+  }
+}
+
+export default ThemeEditorPlugin;

package/src/client/locale/en-US.ts

@@ -0,0 +1,26 @@
+const locale = {
+  Theme: 'Theme',
+  Local: 'Local',
+  'Dark theme': 'Dark theme',
+  Optional: 'Optional',
+  'Non-optional': 'Non-optional',
+  Current: 'Current',
+  Default: 'Default',
+
+  // 主题编辑器
+  'Theme Editor': 'Theme Editor',
+  Save: 'Save',
+  Close: 'Close',
+  Edit: 'Edit',
+  Export: 'Export',
+  'edit Theme Config': 'edit Theme Config',
+  'The theme of the JSON format is incorrect': 'The theme of the JSON format is incorrect',
+  'Edited successfully': 'Edited successfully',
+  'Saved successfully': 'Saved successfully',
+  'Initializing Editor...': 'Initializing Editor...',
+  'Save theme': 'Save theme',
+  'Please set a name for this theme': 'Please set a name for this theme',
+  'Please input the theme name': 'Please input the theme name',
+};
+
+export default locale;

package/src/client/locale/index.ts

@@ -0,0 +1,9 @@
+import { useTranslation as useT } from 'react-i18next';
+
+export const NAMESPACE = 'theme-editor';
+
+export function useTranslation() {
+  return useT([NAMESPACE, 'client'], {
+    nsMode: 'fallback',
+  });
+}

package/src/client/locale/zh-CN.ts

@@ -0,0 +1,41 @@
+const locale = {
+  'Theme editor': '主题编辑器',
+  Themes: '主题',
+  'Dark theme': '暗黑主题',
+  Optional: '可选',
+  'Non-optional': '不可选',
+  Current: '当前主题',
+  Default: '默认',
+  'Delete theme': '删除主题',
+  'Deletion is unrecoverable. Confirm deletion?': '删除后不可恢复，确认删除？',
+  'Deleted successfully': '删除成功',
+  'Updated successfully': '更新成功',
+  'User selectable': '可被用户选择',
+  'Default theme': '默认主题',
+  'Add new theme': '添加新主题',
+  'Edit based on current theme': '基于当前主题进行编辑',
+  'Create a brand new theme': '创建一个全新的主题',
+
+  // 内置主题的名字
+  'Default theme of antd': 'antd 默认主题',
+  Dark: '暗黑',
+  Compact: '紧凑',
+  'Compact dark': '紧凑暗黑',
+
+  // 主题编辑器
+  'Theme Editor': '主题编辑器',
+  Save: '保存',
+  Close: '关闭',
+  Edit: '编辑',
+  Export: '导出',
+  'edit Theme Config': '编辑主题配置',
+  'The theme of the JSON format is incorrect': '主题 JSON 格式错误',
+  'Edited successfully': '编辑成功',
+  'Saved successfully': '保存成功',
+  'Initializing Editor...': '正在初始化编辑器...',
+  'Save theme': '保存主题',
+  'Please set a name for this theme': '请为该主题设置一个名字',
+  'Please input the theme name': '请输入主题名字',
+};
+
+export default locale;

package/src/client/utils/changeAlgorithmFromFunctionToString.tsx

@@ -0,0 +1,30 @@
+import { theme as antdTheme } from 'antd';
+import _ from 'lodash';
+import { ThemeConfig } from '../../types';
+
+export function changeAlgorithmFromFunctionToString(themeConfig: any) {
+  themeConfig = _.cloneDeep(themeConfig);
+
+  if (!themeConfig.algorithm) {
+    return themeConfig;
+  }
+  if (Array.isArray(themeConfig.algorithm)) {
+    themeConfig.algorithm = themeConfig.algorithm.map((algorithm) => parseAlgorithm(algorithm));
+  } else {
+    themeConfig.algorithm = parseAlgorithm(themeConfig.algorithm);
+  }
+  return themeConfig;
+}
+
+function parseAlgorithm(algorithm: ThemeConfig['algorithm']): string {
+  if (typeof algorithm === 'string') {
+    return algorithm;
+  }
+  if (algorithm.toString() === antdTheme.darkAlgorithm.toString()) {
+    return 'darkAlgorithm';
+  }
+  if (algorithm.toString() === antdTheme.compactAlgorithm.toString()) {
+    return 'compactAlgorithm';
+  }
+  return algorithm.toString();
+}