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

package/src/client/antd-token-previewer/utils/classifyToken.ts

@@ -0,0 +1,85 @@
+import type { GlobalToken } from 'antd/es/theme/interface';
+import type { TokenValue } from '../interface';
+
+function defineTokenType<T extends string>(types: T[]) {
+  return types;
+}
+
+export const TOKEN_SORTS = defineTokenType([
+  'seed',
+  'colorCommon',
+  'colorText',
+  'colorBg',
+  'colorFill',
+  'colorSplit',
+  'font',
+  'radius',
+  'space',
+  'screen',
+  'line',
+  'motion',
+  'control',
+  'others',
+]);
+
+export type TokenType = (typeof TOKEN_SORTS)[number];
+
+export function getTypeOfToken(tokenName: string): TokenType {
+  if (tokenName.startsWith('color')) {
+    if (
+      tokenName.startsWith('colorLink') ||
+      tokenName.startsWith('colorText') ||
+      tokenName.startsWith('colorIcon') ||
+      tokenName.startsWith('colorPlaceholder') ||
+      tokenName.startsWith('colorIcon')
+    ) {
+      return 'colorText';
+    }
+    if (tokenName.startsWith('colorBg') || tokenName.startsWith('colorPopupBg')) {
+      return 'colorBg';
+    }
+    if (tokenName.startsWith('colorBorder') || tokenName.startsWith('colorSplit')) {
+      return 'colorSplit';
+    }
+    if (tokenName.startsWith('colorFill')) {
+      return 'colorFill';
+    }
+    return 'colorCommon';
+  }
+  if (tokenName.startsWith('font')) {
+    return 'font';
+  }
+  if (tokenName.startsWith('screen')) {
+    return 'screen';
+  }
+  if (tokenName.startsWith('line')) {
+    return 'line';
+  }
+  if (tokenName.startsWith('motion')) {
+    return 'motion';
+  }
+  if (tokenName.startsWith('borderRadius')) {
+    return 'radius';
+  }
+  if (tokenName.startsWith('control')) {
+    return 'control';
+  }
+  if (tokenName.startsWith('margin') || tokenName.startsWith('padding')) {
+    return 'space';
+  }
+  return 'others';
+}
+
+export const classifyToken = (token: Record<string, TokenValue>): Record<string, string[]> => {
+  const groupedToken: Record<string, string[]> = {};
+  Object.keys(token || {})
+    .sort((a, b) => a.localeCompare(b))
+    .forEach((key) => {
+      const type = getTypeOfToken(key as keyof GlobalToken);
+      if (!groupedToken[type]) {
+        groupedToken[type] = [];
+      }
+      groupedToken[type].push(key);
+    });
+  return groupedToken;
+};

package/src/client/antd-token-previewer/utils/deepUpdateObj.ts

@@ -0,0 +1,22 @@
+const deepUpdateObj = (obj: any, path: string[], value: any): any => {
+  if (path.length === 0) {
+    return obj;
+  }
+  if (path.length === 1) {
+    if (value === null || value === undefined) {
+      const newObj = { ...obj };
+      delete newObj[path[0]];
+      return newObj;
+    }
+    return {
+      ...obj,
+      [path[0]]: value,
+    };
+  }
+  return {
+    ...obj,
+    [path[0]]: deepUpdateObj(obj[path[0]] ?? {}, path.slice(1), value),
+  };
+};
+
+export default deepUpdateObj;

package/src/client/antd-token-previewer/utils/getColorBgImg.ts

@@ -0,0 +1,7 @@
+const getColorBgImg = (dark?: boolean) => {
+  return dark
+    ? 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=)'
+    : 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==)';
+};
+
+export default getColorBgImg;

package/src/client/antd-token-previewer/utils/getDesignToken.ts

@@ -0,0 +1,19 @@
+import type { ThemeConfig } from 'antd/es/config-provider/context';
+import type { GlobalToken, MapToken } from 'antd/es/theme/interface';
+import defaultMap from 'antd/es/theme/themes/default';
+import seed from 'antd/es/theme/themes/seed';
+import formatToken from 'antd/es/theme/util/alias';
+
+export default function getDesignToken(config: ThemeConfig = {}): GlobalToken {
+  const seedToken = { ...seed, ...config.token };
+  const mapFn = config.algorithm ?? defaultMap;
+  const mapToken = Array.isArray(mapFn)
+    ? mapFn.reduce<MapToken>((result, fn) => fn(seedToken, result), undefined as any)
+    : mapFn(seedToken);
+  const mergedMapToken = {
+    ...mapToken,
+    ...config.components,
+    override: config.token ?? {},
+  };
+  return formatToken(mergedMapToken);
+}

package/src/client/antd-token-previewer/utils/getValueByPath.ts

@@ -0,0 +1,11 @@
+export default function getValueByPath(obj: any, path: string[]): any {
+  if (!obj) {
+    return undefined;
+  }
+  return path.reduce((prev, key) => {
+    if (prev) {
+      return prev[key];
+    }
+    return undefined;
+  }, obj);
+}

package/src/client/antd-token-previewer/utils/isColor.ts

@@ -0,0 +1,3 @@
+export default function isColor(str: string) {
+  return str.startsWith('rgb') || str.startsWith('#');
+}

package/src/client/antd-token-previewer/utils/makeStyle.tsx

@@ -0,0 +1,28 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, theme as antdTheme } from 'antd';
+import type { GlobalToken } from 'antd/es/theme/interface';
+import type React from 'react';
+import { useContext } from 'react';
+
+const { ConfigContext } = ConfigProvider;
+
+const makeStyle =
+  (
+    path: string,
+    styleFn: (token: GlobalToken & { rootCls: string }) => CSSInterpolation,
+  ): (() => [(node: React.ReactNode) => React.ReactElement, string]) =>
+  () => {
+    const { theme, token, hashId } = antdTheme.useToken();
+    const { getPrefixCls } = useContext(ConfigContext);
+    const rootCls = getPrefixCls();
+
+    return [
+      useStyleRegister({ theme: theme as any, hashId, token, path: [path] }, () =>
+        styleFn({ ...token, rootCls: `.${rootCls}` }),
+      ) as (node: React.ReactNode) => React.ReactElement,
+      hashId,
+    ];
+  };
+
+export default makeStyle;

package/src/client/antd-token-previewer/utils/statistic.ts

@@ -0,0 +1,29 @@
+import tokenStatistic from 'antd/es/version/token.json';
+
+const tokenRelatedComponents: {
+  [key in string]?: string[];
+} = {};
+
+const getRelatedComponentsSingle = (token: string): string[] => {
+  if (!tokenRelatedComponents[token]) {
+    tokenRelatedComponents[token] = Object.entries(tokenStatistic)
+      .filter(([, tokens]) => {
+        return (tokens.global as string[]).includes(token);
+      })
+      .map(([component]) => component);
+  }
+  return tokenRelatedComponents[token] ?? [];
+};
+
+export const getRelatedComponents = (token: string | string[]): string[] => {
+  const mergedTokens = Array.isArray(token) ? token : [token];
+  return Array.from(
+    new Set(
+      mergedTokens.reduce<string[]>((result, item) => {
+        return result.concat(getRelatedComponentsSingle(item));
+      }, []),
+    ),
+  );
+};
+
+export const getComponentToken = (component: string) => (tokenStatistic as any)[component];

package/src/client/components/InitializeTheme.tsx

@@ -0,0 +1,80 @@
+import { defaultTheme, useAPIClient, useCurrentUserContext, useGlobalTheme, useSystemSettings } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { Spin } from 'antd';
+import React, { useEffect, useRef } from 'react';
+import { changeAlgorithmFromFunctionToString } from '../utils/changeAlgorithmFromFunctionToString';
+import { changeAlgorithmFromStringToFunction } from '../utils/changeAlgorithmFromStringToFunction';
+import { useThemeListContext } from './ThemeListProvider';
+
+const CurrentThemeIdContext = React.createContext<number>(null);
+
+export const useCurrentThemeId = () => {
+  return React.useContext(CurrentThemeIdContext);
+};
+
+/**
+ * 用于在页面加载时初始化主题
+ */
+const InitializeTheme: React.FC = ({ children }) => {
+  const systemSettings = useSystemSettings();
+  const currentUser = useCurrentUserContext();
+  const { setTheme } = useGlobalTheme();
+  const { run, data, loading } = useThemeListContext();
+  const themeId = useRef<number>(null);
+  const api = useAPIClient();
+
+  useEffect(() => {
+    const storageTheme = api.auth.getOption('theme');
+    if (storageTheme) {
+      try {
+        setTheme(changeAlgorithmFromStringToFunction(JSON.parse(storageTheme)).config);
+      } catch (err) {
+        error(err);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!data) {
+      return run();
+    }
+
+    themeId.current =
+      // 这里不要使用 `===` 操作符
+      currentUser?.data?.data?.systemSettings?.themeId == null
+        ? systemSettings?.data?.data?.options?.themeId
+        : currentUser?.data?.data?.systemSettings?.themeId;
+
+    // 这里不要使用 `!==` 操作符
+    if (themeId.current != null) {
+      const theme = data?.find((item) => item.id === themeId.current);
+      if (theme) {
+        setTheme(theme.config);
+        api.auth.setOption(
+          'theme',
+          JSON.stringify(Object.assign({ ...theme }, { config: changeAlgorithmFromFunctionToString(theme.config) })),
+        );
+      }
+    } else {
+      setTheme(defaultTheme);
+      api.auth.setOption('theme', null);
+    }
+  }, [
+    api.auth,
+    currentUser?.data?.data?.systemSettings?.themeId,
+    data,
+    run,
+    setTheme,
+    systemSettings?.data?.data?.options?.themeId,
+  ]);
+
+  if (loading && !data) {
+    return <Spin />;
+  }
+
+  return <CurrentThemeIdContext.Provider value={themeId.current}>{children}</CurrentThemeIdContext.Provider>;
+};
+
+InitializeTheme.displayName = 'InitializeTheme';
+
+export default InitializeTheme;

package/src/client/components/ThemeCard.tsx

@@ -0,0 +1,330 @@
+import { DeleteOutlined, EditOutlined, EllipsisOutlined } from '@ant-design/icons';
+import {
+  compatOldTheme,
+  useAPIClient,
+  useCurrentUserContext,
+  useGlobalTheme,
+  useSystemSettings,
+  useToken,
+} from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { App, Card, ConfigProvider, Dropdown, Space, Switch, Tag, message } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { ThemeConfig, ThemeItem } from '../../types';
+import { Primary } from '../antd-token-previewer';
+import { useUpdateThemeSettings } from '../hooks/useUpdateThemeSettings';
+import { useTranslation } from '../locale';
+import { useCurrentThemeId } from './InitializeTheme';
+import { useThemeEditorContext } from './ThemeEditorProvider';
+
+enum HandleTypes {
+  delete = 'delete',
+  optional = 'optional',
+}
+
+interface Props {
+  item: ThemeItem;
+  style?: React.CSSProperties;
+  onChange?: (params: { type: HandleTypes; item: ThemeItem }) => void;
+}
+
+const Overview = ({ theme }: { theme: ThemeConfig }) => {
+  const { token } = useToken();
+
+  return (
+    <ConfigProvider theme={{ ...theme, inherit: false }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          pointerEvents: 'none',
+          width: '100%',
+          height: 129,
+          borderRadius: token.borderRadiusLG,
+          overflow: 'hidden',
+        }}
+      >
+        <Space
+          style={{
+            transform: 'scale(0.7) translate(0, 0)',
+            transformOrigin: '0 0',
+          }}
+          size={0}
+          align="start"
+        >
+          <Primary />
+        </Space>
+      </div>
+    </ConfigProvider>
+  );
+};
+
+const ThemeCard = (props: Props) => {
+  const {
+    theme: currentTheme,
+    setTheme,
+    setCurrentSettingTheme,
+    setCurrentEditingTheme,
+    getCurrentEditingTheme,
+  } = useGlobalTheme();
+  const { setOpen } = useThemeEditorContext();
+  const currentUser = useCurrentUserContext();
+  const systemSettings = useSystemSettings();
+  const { item, style = {}, onChange } = props;
+  const api = useAPIClient();
+  const { updateUserThemeSettings, updateSystemThemeSettings } = useUpdateThemeSettings();
+  const { modal } = App.useApp();
+  const [loading, setLoading] = React.useState(false);
+  const currentThemeId = useCurrentThemeId();
+  const { t } = useTranslation();
+  const { token } = useToken();
+
+  const isDefault = item.id === systemSettings?.data?.data?.options?.themeId;
+
+  const handleDelete = useCallback(() => {
+    if (isDefault) {
+      return;
+    }
+
+    modal.confirm({
+      title: t('Delete theme'),
+      content: t('Deletion is unrecoverable. Confirm deletion?'),
+      onOk: async () => {
+        await api.request({
+          url: `themeConfig:destroy/${item.id}`,
+        });
+
+        if (item.id === currentUser?.data?.data?.systemSettings?.themeId) {
+          updateUserThemeSettings(null);
+        }
+        if (item.id === systemSettings?.data?.data?.options?.themeId) {
+          updateSystemThemeSettings(null);
+        }
+        message.success(t('Deleted successfully'));
+        onChange?.({ type: HandleTypes.delete, item });
+      },
+    });
+  }, [
+    api,
+    currentUser?.data?.data?.systemSettings?.themeId,
+    isDefault,
+    item,
+    modal,
+    onChange,
+    systemSettings?.data?.data?.options?.themeId,
+    t,
+    updateSystemThemeSettings,
+    updateUserThemeSettings,
+  ]);
+  const handleSwitchOptional = useCallback(
+    async (checked: boolean) => {
+      setLoading(true);
+      try {
+        if (!checked) {
+          await Promise.all([
+            api.request({
+              url: `themeConfig:update/${item.id}`,
+              method: 'post',
+              data: {
+                optional: checked,
+              },
+            }),
+            // 如果用户把当前设置的主题设置为不可选，那么就需要把当前设置的主题设置为默认主题
+            item.id === currentThemeId && updateUserThemeSettings(null),
+            // 系统默认主题应该始终是可选的，所以当用户设置为不可选时，应该也同时把系统默认主题设置为空
+            item.id === systemSettings?.data?.data?.options?.themeId && updateSystemThemeSettings(null),
+          ]);
+        } else {
+          await api.request({
+            url: `themeConfig:update/${item.id}`,
+            method: 'post',
+            data: {
+              optional: checked,
+            },
+          });
+        }
+      } catch (err) {
+        error(err);
+      }
+      setLoading(false);
+      message.success(t('Updated successfully'));
+      onChange?.({ type: HandleTypes.optional, item });
+    },
+    [
+      api,
+      currentThemeId,
+      item,
+      onChange,
+      systemSettings?.data?.data?.options?.themeId,
+      t,
+      updateSystemThemeSettings,
+      updateUserThemeSettings,
+    ],
+  );
+  const handleSwitchDefault = useCallback(
+    async (checked: boolean) => {
+      setLoading(true);
+      try {
+        if (checked) {
+          await Promise.all([
+            updateSystemThemeSettings(item.id),
+            // 用户在设置该主题为默认主题时，肯定也希望该主题可被用户选择
+            api.request({
+              url: `themeConfig:update/${item.id}`,
+              method: 'post',
+              data: {
+                optional: true,
+              },
+            }),
+          ]);
+        } else {
+          await updateSystemThemeSettings(null);
+        }
+      } catch (err) {
+        error(err);
+      }
+      setLoading(false);
+      message.success(t('Updated successfully'));
+      onChange?.({ type: HandleTypes.optional, item });
+    },
+    [api, item, onChange, t, updateSystemThemeSettings],
+  );
+
+  const handleEdit = useCallback(() => {
+    setCurrentSettingTheme(currentTheme);
+    setCurrentEditingTheme(item);
+    setTheme(compatOldTheme(item.config));
+    setOpen(true);
+  }, [item, setCurrentEditingTheme, setCurrentSettingTheme, setOpen, setTheme, currentTheme]);
+
+  const menu = useMemo(() => {
+    return {
+      items: [
+        {
+          key: 'optional',
+          label: (
+            <Space
+              style={{ width: '100%', justifyContent: 'space-between' }}
+              align="center"
+              size="middle"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <span>{t('User selectable')}</span>
+              <Switch
+                disabled={isDefault}
+                style={{ transform: 'translateY(-2px)' }}
+                checked={item.optional}
+                size={'small'}
+                loading={loading}
+                onChange={handleSwitchOptional}
+              ></Switch>
+            </Space>
+          ),
+        },
+        {
+          key: 'system',
+          label: (
+            <Space
+              style={{ width: '100%', justifyContent: 'space-between' }}
+              align="center"
+              size="middle"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <span>{t('Default theme')}</span>
+              <Switch
+                disabled={isDefault}
+                style={{ transform: 'translateY(-2px)' }}
+                checked={isDefault}
+                size={'small'}
+                loading={loading}
+                onChange={handleSwitchDefault}
+              />
+            </Space>
+          ),
+        },
+      ],
+    };
+  }, [handleSwitchDefault, handleSwitchOptional, isDefault, item.optional, loading, t]);
+
+  const actions = useMemo(() => {
+    return [
+      <EditOutlined key="edit" onClick={handleEdit} />,
+      <DeleteOutlined
+        key="delete"
+        style={
+          isDefault
+            ? {
+                color: token.colorTextDisabled,
+                cursor: 'not-allowed',
+              }
+            : null
+        }
+        disabled={isDefault}
+        onClick={handleDelete}
+      />,
+      <Dropdown key="ellipsis" menu={menu}>
+        <EllipsisOutlined />
+      </Dropdown>,
+    ];
+  }, [handleDelete, handleEdit, isDefault, menu, token.colorTextDisabled]);
+
+  const extra = useMemo(() => {
+    if (item.id !== systemSettings?.data?.data?.options?.themeId && !item.optional) {
+      return null;
+    }
+    const text =
+      item.id === currentThemeId
+        ? t('Current')
+        : item.id === systemSettings?.data?.data?.options?.themeId
+        ? t('Default')
+        : item.optional
+        ? t('Optional')
+        : t('Non-optional');
+    const color =
+      item.id === currentThemeId
+        ? 'processing'
+        : item.id === systemSettings?.data?.data?.options?.themeId
+        ? 'default'
+        : item.optional
+        ? 'success'
+        : 'error';
+
+    return (
+      <Tag style={{ marginRight: 0 }} color={color}>
+        {text}
+      </Tag>
+    );
+  }, [currentThemeId, item.id, item.optional, systemSettings?.data?.data?.options?.themeId, t]);
+
+  const cardStyle = useMemo(() => {
+    if (getCurrentEditingTheme()?.id === item.id) {
+      return {
+        cursor: 'default',
+        width: 240,
+        height: 240,
+        overflow: 'hidden',
+        outline: '1px solid var(--colorSettings)',
+        ...style,
+      };
+    }
+    return { cursor: 'default', width: 240, height: 240, overflow: 'hidden', ...style };
+  }, [getCurrentEditingTheme, item.id, style]);
+
+  return (
+    <Card
+      hoverable
+      extra={extra}
+      title={t(item.config.name)}
+      size="small"
+      style={cardStyle}
+      headStyle={{ minHeight: 38 }}
+      actions={actions}
+    >
+      <Overview theme={item.config} />
+    </Card>
+  );
+};
+
+ThemeCard.displayName = 'ThemeCard';
+
+export default ThemeCard;

package/src/client/components/ThemeEditorProvider.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ThemeEditorContext = React.createContext<{
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}>(null);
+
+export const useThemeEditorContext = () => React.useContext(ThemeEditorContext);
+
+export const ThemeEditorProvider = ({ children, open, setOpen }) => {
+  return <ThemeEditorContext.Provider value={{ open, setOpen }}>{children}</ThemeEditorContext.Provider>;
+};
+
+ThemeEditorProvider.displayName = 'ThemeEditorProvider';

package/src/client/components/ThemeList.tsx

@@ -0,0 +1,40 @@
+import { useToken } from '@nocobase/client';
+import { error } from '@nocobase/utils/client';
+import { Space } from 'antd';
+import React, { useCallback, useEffect } from 'react';
+import ThemeCard from './ThemeCard';
+import { useThemeListContext } from './ThemeListProvider';
+import ToEditTheme from './ToEditTheme';
+
+const ThemeList = () => {
+  const { run, error: err, refresh, data } = useThemeListContext();
+  const { token } = useToken();
+
+  useEffect(() => {
+    if (!data) {
+      run();
+    }
+  }, []);
+
+  const handleChange = useCallback(() => {
+    refresh();
+  }, [refresh]);
+
+  if (err) {
+    error(err);
+    return null;
+  }
+
+  return (
+    <Space size={token.sizeLG} wrap>
+      {data?.map((item) => {
+        return <ThemeCard item={item} key={item.id} onChange={handleChange} />;
+      })}
+      <ToEditTheme />
+    </Space>
+  );
+};
+
+ThemeList.displayName = 'ThemeList';
+
+export default ThemeList;