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

package/src/client/utils/changeAlgorithmFromStringToFunction.tsx

@@ -0,0 +1,24 @@
+import { isString } from '@nocobase/utils';
+import { theme } from 'antd';
+import _ from 'lodash';
+import { ThemeItem } from '../../types';
+
+/**
+ * 把算法函数由字符串转换为函数
+ * 注: 之所以要保存为字符串, 是因为 JSON 无法保存函数
+ */
+export function changeAlgorithmFromStringToFunction(themeConfig: ThemeItem) {
+  themeConfig = _.cloneDeep(themeConfig);
+  if (isString(themeConfig.config.algorithm)) {
+    themeConfig.config.algorithm = theme[themeConfig.config.algorithm];
+  }
+  if (Array.isArray(themeConfig.config.algorithm)) {
+    themeConfig.config.algorithm = themeConfig.config.algorithm.map((item) => {
+      if (isString(item)) {
+        return theme[item];
+      }
+      return item;
+    });
+  }
+  return themeConfig;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './server';

package/src/server/builtinThemes.ts

@@ -0,0 +1,41 @@
+import { ThemeItem } from '../types';
+
+/** antd 默认主题 */
+export const antd: Omit<ThemeItem, 'id'> = {
+  config: {
+    name: 'Default theme of antd',
+  },
+  optional: true,
+  isBuiltIn: true,
+};
+
+export const dark: Omit<ThemeItem, 'id'> = {
+  config: {
+    name: 'Dark',
+    // @ts-ignore
+    algorithm: 'darkAlgorithm',
+  },
+  optional: true,
+  isBuiltIn: true,
+};
+
+export const compact: Omit<ThemeItem, 'id'> = {
+  config: {
+    name: 'Compact',
+    // @ts-ignore
+    algorithm: 'compactAlgorithm',
+  },
+  optional: true,
+  isBuiltIn: true,
+};
+
+/** 同时包含 `紧凑` 和 `暗黑` 两种模式 */
+export const compactDark: Omit<ThemeItem, 'id'> = {
+  config: {
+    name: 'Compact dark',
+    // @ts-ignore
+    algorithm: ['compactAlgorithm', 'darkAlgorithm'],
+  },
+  optional: true,
+  isBuiltIn: true,
+};

package/src/server/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

package/src/server/plugin.ts

@@ -0,0 +1,49 @@
+import { Collection } from '@nocobase/database';
+import { InstallOptions, Plugin } from '@nocobase/server';
+import { antd, compact, compactDark, dark } from './builtinThemes';
+
+export class ThemeEditorPlugin extends Plugin {
+  theme: Collection<any, any>;
+
+  afterAdd() {}
+
+  beforeLoad() {}
+
+  async load() {
+    this.theme = this.db.collection({
+      name: 'themeConfig',
+      fields: [
+        // 主题配置内容，一个 JSON 字符串
+        {
+          type: 'json',
+          name: 'config',
+        },
+        // 主题是否可选
+        {
+          type: 'boolean',
+          name: 'optional',
+        },
+        {
+          type: 'boolean',
+          name: 'isBuiltIn',
+        },
+      ],
+    });
+  }
+
+  async install(options?: InstallOptions) {
+    if ((await this.theme.repository.count()) === 0) {
+      await this.theme.repository.create({
+        values: [antd, dark, compact, compactDark],
+      });
+    }
+  }
+
+  async afterEnable() {}
+
+  async afterDisable() {}
+
+  async remove() {}
+}
+
+export default ThemeEditorPlugin;

package/src/types.ts

@@ -0,0 +1,48 @@
+import type { ThemeConfig as Config } from '@nocobase/client';
+import type { ReactElement } from 'react';
+export type ThemeConfig = Config & { name?: string };
+
+export interface ThemeItem {
+  id: number;
+  /** 主题配置内容，一个 JSON 字符串 */
+  config: ThemeConfig;
+  /** 主题是否可选 */
+  optional: boolean;
+  isBuiltIn?: boolean;
+}
+
+export type Theme = {
+  name: string;
+  key: string;
+  config: ThemeConfig;
+};
+
+export type AliasToken = Exclude<ThemeConfig['token'], undefined>;
+export type TokenValue = string | number | string[] | number[] | boolean;
+export type TokenName = keyof AliasToken;
+
+export interface ComponentDemo {
+  tokens?: TokenName[];
+  demo: ReactElement;
+  key: string;
+}
+
+export interface MutableTheme extends Theme {
+  onThemeChange?: (newTheme: ThemeConfig, path: string[]) => void;
+  onReset?: (path: string[]) => void;
+  onAbort?: (path: string[]) => void;
+  getCanReset?: (path: string[]) => boolean;
+}
+
+export type PreviewerProps = {
+  onSave?: (themeConfig: ThemeConfig) => void;
+  showTheme?: boolean;
+  theme?: Theme;
+  onThemeChange?: (config: ThemeConfig) => void;
+};
+
+export type SelectedToken = {
+  seed?: string[];
+  map?: string[];
+  alias?: string[];
+};