@nocobase/client-v2 2.3.0-alpha.1 → 3.0.0-alpha.1

package/src/settings-app/SettingsBrand.tsx

@@ -0,0 +1,108 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { observer } from '@nocobase/flow-engine';
+import { theme as antdTheme } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSystemSettings } from '../flow/system-settings';
+import { getSettingsHeaderColors } from './settingsTheme';
+
+const brandClassName = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  flex-shrink: 0;
+  min-width: 0;
+`;
+
+const logoImageClassName = css`
+  height: 24px;
+  width: auto;
+  max-width: 140px;
+  object-fit: contain;
+  display: block;
+`;
+
+const titleClassName = css`
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const suffixClassName = css`
+  line-height: 1;
+  white-space: nowrap;
+  font-weight: 400;
+`;
+
+/**
+ * 设置中心顶栏品牌区。
+ *
+ * 沿用系统设置里的站点 logo / 标题，并在其后补一个弱化的「设置中心」副标题，
+ * 用于区分设置中心和业务端。
+ */
+export const SettingsBrand = observer(() => {
+  const { token } = antdTheme.useToken();
+  const headerColors = getSettingsHeaderColors(token);
+  const result = useSystemSettings();
+  const { t } = useTranslation();
+  const { t: tCollections } = useTranslation('lm-collections');
+  const title = tCollections(result?.data?.data?.title || 'NocoBase');
+  const logoUrl = result?.data?.data?.logo?.url;
+
+  if (result?.loading) {
+    return <div className={brandClassName} />;
+  }
+
+  return (
+    <div className={brandClassName}>
+      {logoUrl ? (
+        // 站点 logo 通常是为深色顶栏画的浅色图；设置中心顶栏是灰白的，
+        // 统一压成单色，避免浅色 logo 直接消失在白底上。
+        <img
+          alt={title}
+          className={logoImageClassName}
+          src={logoUrl}
+          style={{ filter: headerColors.dark ? 'brightness(0) invert(1)' : 'brightness(0)' }}
+        />
+      ) : (
+        <span className={titleClassName} style={{ color: headerColors.text, fontSize: token.fontSizeHeading4 }}>
+          {title}
+        </span>
+      )}
+      <span
+        aria-hidden
+        style={{
+          alignSelf: 'center',
+          background: headerColors.text,
+          height: 16,
+          opacity: 0.3,
+          width: 1,
+        }}
+      />
+      <span
+        className={suffixClassName}
+        style={{
+          color: headerColors.text,
+          fontSize: token.fontSize,
+          opacity: 0.75,
+        }}
+      >
+        {t('Settings center')}
+      </span>
+    </div>
+  );
+});
+
+SettingsBrand.displayName = 'SettingsBrand';

package/src/settings-app/SettingsBuildInPlugin.ts

@@ -0,0 +1,10 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+export { SettingsBuildInPlugin } from '../nocobase-buildin-plugin';

package/src/settings-app/SettingsDocumentRedirect.tsx

@@ -0,0 +1,26 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useApp } from '../hooks/useApp';
+import { resolveStandaloneSettingsPath } from './runtimePaths';
+
+export function SettingsDocumentRedirect() {
+  const app = useApp();
+  const location = useLocation();
+  const sourcePath = `${location.pathname}${location.search}${location.hash}`;
+  const targetPath = resolveStandaloneSettingsPath(app, sourcePath, location.pathname);
+
+  useEffect(() => {
+    window.location.replace(targetPath);
+  }, [targetPath]);
+
+  return app.renderComponent('AppSpin');
+}

package/src/settings-app/SettingsGroupNav.tsx

@@ -0,0 +1,124 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { observer } from '@nocobase/flow-engine';
+import { ConfigProvider, Menu, theme as antdTheme } from 'antd';
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useApp } from '../hooks/useApp';
+import { useSettingsGroups } from '../settings-center/useSettingsGroups';
+import { buildSettingsHeaderMenuTheme } from './settingsTheme';
+
+const navStyle: React.CSSProperties = {
+  background: 'transparent',
+  borderBottom: 'none',
+  flex: 'auto',
+  minWidth: 0,
+  lineHeight: '46px',
+};
+
+/**
+ * 设置中心顶栏的一级导航。
+ *
+ * 应用、插件管理各自只有一个页面，直接当一级入口；其余全部收在「系统设置」下，
+ * 鼠标移上去展开下拉，也可以点进去从左栏走。
+ */
+export const SettingsGroupNav: React.FC = observer(() => {
+  const { t } = useTranslation();
+  const app = useApp();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { token } = antdTheme.useToken();
+  const { groups, activeGroupKey, currentTopLevelSetting, getGroupEntryPath } = useSettingsGroups();
+  const headerMenuTheme = useMemo(() => buildSettingsHeaderMenuTheme(token), [token]);
+  // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上不该出现设置导航。
+  const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
+
+  const handleClick = useCallback(
+    ({ key }: { key: string }) => {
+      const [groupKey, settingName] = key.split('::');
+      const targetPath = settingName
+        ? groups.find((group) => group.key === groupKey)?.settings.find((item) => item.name === settingName)?.path
+        : getGroupEntryPath(groupKey);
+
+      if (targetPath && targetPath !== location.pathname) {
+        navigate(targetPath);
+      }
+    },
+    [getGroupEntryPath, groups, location.pathname, navigate],
+  );
+
+  // 单入口分组直接当一级项，标题取配置项自己的名字（顺带继承插件的翻译）；
+  // 系统设置这种大分组挂上子项，鼠标移上去展开。
+  const items = useMemo(
+    () =>
+      groups.map((group) => {
+        if (group.settings.length <= 1) {
+          return {
+            key: group.key,
+            label: group.settings[0]?.label ?? t(group.title),
+            icon: group.settings[0]?.icon,
+          };
+        }
+
+        // 已经站在这个分组里时不再弹下拉：左栏已经把同一份内容铺开了，再浮一层纯属打扰。
+        if (group.key === activeGroupKey) {
+          return { key: group.key, label: t(group.title) };
+        }
+
+        return {
+          key: group.key,
+          label: t(group.title),
+          children: group.settings
+            .filter((setting) => !setting.hidden)
+            .map((setting) => ({
+              key: `${group.key}::${setting.name}`,
+              label: setting.label ?? setting.title,
+              icon: setting.icon,
+            })),
+          // 点标题本身也要能进去，而不是只能从下拉里挑。
+          onTitleClick: handleClick,
+        };
+      }),
+    [activeGroupKey, groups, handleClick, t],
+  );
+
+  // 子菜单标题只有在它的某个子项被选中时才会高亮，所以两个 key 都要给。
+  const selectedKeys = useMemo(() => {
+    if (!activeGroupKey) {
+      return [];
+    }
+    return currentTopLevelSetting?.name
+      ? [activeGroupKey, `${activeGroupKey}::${currentTopLevelSetting.name}`]
+      : [activeGroupKey];
+  }, [activeGroupKey, currentTopLevelSetting?.name]);
+
+  if (isAuthRoute || items.length <= 1) {
+    return <div style={{ flex: 'auto' }} />;
+  }
+
+  return (
+    <ConfigProvider theme={headerMenuTheme}>
+      <Menu
+        mode="horizontal"
+        disabledOverflow={false}
+        selectedKeys={selectedKeys}
+        items={items}
+        style={navStyle}
+        triggerSubMenuAction="hover"
+        onClick={handleClick}
+      />
+    </ConfigProvider>
+  );
+});
+
+SettingsGroupNav.displayName = 'SettingsGroupNav';
+
+export default SettingsGroupNav;

package/src/settings-app/SettingsPluginSettingsManager.ts

@@ -0,0 +1,38 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { BaseApplication } from '../BaseApplication';
+import { PluginSettingsManager } from '../PluginSettingsManager';
+import { resolveSettingsAppScopeWithinPublicPath } from './settingsDocumentPath';
+
+const SETTINGS_ROUTE_PREFIX = 'settings.';
+const MAIN_SETTINGS_PATH_PREFIX = '/settings/';
+
+export class SettingsPluginSettingsManager<
+  TApp extends BaseApplication<any> = BaseApplication<any>,
+> extends PluginSettingsManager<TApp> {
+  getRouteName(name: string) {
+    return `${SETTINGS_ROUTE_PREFIX}${name}`;
+  }
+
+  getRoutePath(name: string) {
+    const appScope = resolveSettingsAppScopeWithinPublicPath(this.app.getPublicPath(), this.app.router.getBasename?.());
+    const pathPrefix = appScope ? '/' : MAIN_SETTINGS_PATH_PREFIX;
+    const separatorIndex = name.indexOf('.');
+    const menuName = separatorIndex < 0 ? name : name.slice(0, separatorIndex);
+    const pageName = separatorIndex < 0 ? undefined : name.slice(separatorIndex + 1);
+    const menuPath = `${pathPrefix}${menuName}`;
+
+    if (!pageName || pageName === 'index') {
+      return menuPath;
+    }
+
+    return `${menuPath}/${pageName}`;
+  }
+}

package/src/settings-app/SettingsRouterManager.ts

@@ -0,0 +1,92 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { BaseApplication } from '../BaseApplication';
+import { RouterManager, type RouteType } from '../RouterManager';
+import { resolveSettingsAppScopeWithinPublicPath } from './settingsDocumentPath';
+
+function isSettingsOwnedRoute(name: string) {
+  return (
+    name === 'not-found' ||
+    name === 'settings' ||
+    name.startsWith('settings.') ||
+    name === 'settingsDetails' ||
+    name.startsWith('settingsDetails.') ||
+    name === 'auth' ||
+    name.startsWith('auth.') ||
+    name === '2fa' ||
+    name.startsWith('2fa.')
+  );
+}
+
+function isSettingsAuthenticationRoute(name: string) {
+  return name === 'auth' || name.startsWith('auth.') || name === '2fa' || name.startsWith('2fa.');
+}
+
+export class SettingsRouterManager<
+  TApp extends BaseApplication<any> = BaseApplication<any>,
+> extends RouterManager<TApp> {
+  private rebaseScopedSettingsRoute(route: RouteType) {
+    const appScope = resolveSettingsAppScopeWithinPublicPath(this.app.getPublicPath(), this.getBasename());
+    if (!route.path?.startsWith('/') || !appScope) {
+      return route;
+    }
+    if (route.path === '/settings') {
+      return {
+        ...route,
+        path: '/',
+      };
+    }
+    if (!route.path.startsWith('/settings/')) {
+      return route;
+    }
+    return {
+      ...route,
+      path: route.path.slice('/settings'.length),
+    };
+  }
+
+  private rebaseAuthenticationRoute(route: RouteType) {
+    if (!route.path?.startsWith('/')) {
+      return route;
+    }
+
+    const settingsRoot = this.app.pluginSettingsManager.getRoutePath('').replace(/\/+$/, '');
+    if (!settingsRoot) {
+      return route;
+    }
+    if (route.path === settingsRoot || route.path.startsWith(`${settingsRoot}/`)) {
+      return route;
+    }
+
+    return {
+      ...route,
+      path: `${settingsRoot}/${route.path.replace(/^\/+/, '')}`,
+    };
+  }
+
+  add(name: string, route: RouteType) {
+    if (!isSettingsOwnedRoute(name)) {
+      return;
+    }
+
+    const scopedRoute = this.rebaseScopedSettingsRoute(route);
+    const ownedRoute = isSettingsAuthenticationRoute(name) ? this.rebaseAuthenticationRoute(scopedRoute) : scopedRoute;
+
+    super.add(
+      name,
+      name === 'settingsDetails' || name.startsWith('settingsDetails.')
+        ? {
+            ...ownedRoute,
+            authCheck: true,
+          }
+        : ownedRoute,
+    );
+  }
+}

package/src/settings-app/SettingsSearch.tsx

@@ -0,0 +1,238 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { SearchOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { observer } from '@nocobase/flow-engine';
+import { Empty, Input, Modal, theme as antdTheme } from 'antd';
+import type { InputRef } from 'antd';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useApp } from '../hooks/useApp';
+import { useSettingsSearch, type SettingsSearchItem } from '../settings-center/useSettingsSearch';
+import { getSettingsHeaderColors } from './settingsTheme';
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || '');
+const SHORTCUT_LABEL = isMac ? '⌘K' : 'Ctrl K';
+
+const triggerClassName = css`
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+  display: inline-flex;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  transition: background 0.2s;
+  white-space: nowrap;
+`;
+
+const resultListClassName = css`
+  max-height: 320px;
+  overflow-y: auto;
+  margin: 0 -24px -12px;
+  padding: 0 12px 12px;
+`;
+
+const resultItemClassName = css`
+  align-items: baseline;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+`;
+
+/**
+ * 设置中心的搜索入口。
+ *
+ * 顶栏放一个轻量触发器，真正的搜索在弹层里进行；关键词为空时展示最近访问，
+ * 这样分组化之后被收进左侧栏的深层页面仍然一步可达。支持 `Cmd/Ctrl + K` 唤起。
+ */
+export const SettingsSearch: React.FC = observer(() => {
+  const { t } = useTranslation();
+  const app = useApp();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { token } = antdTheme.useToken();
+  const headerColors = getSettingsHeaderColors(token);
+  const { recentItems, search } = useSettingsSearch();
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<InputRef>(null);
+
+  // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上没有可搜索的配置项。
+  const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
+
+  const results = useMemo(() => (keyword.trim() ? search(keyword) : recentItems), [keyword, recentItems, search]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [keyword]);
+
+  const openPalette = useCallback(() => {
+    setKeyword('');
+    setOpen(true);
+  }, []);
+
+  const go = useCallback(
+    (item?: SettingsSearchItem) => {
+      if (!item) {
+        return;
+      }
+
+      setOpen(false);
+
+      if (item.link) {
+        window.open(item.link, '_blank', 'noopener,noreferrer');
+        return;
+      }
+
+      if (item.path !== location.pathname) {
+        navigate(item.path);
+      }
+    },
+    [location.pathname, navigate],
+  );
+
+  useEffect(() => {
+    if (isAuthRoute) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      // 页面内组件（代码编辑器之类）可能自己就用 Cmd/Ctrl+K；它们 preventDefault 之后
+      // 这个 window 级监听器不该再抢一次。
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        openPalette();
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isAuthRoute, openPalette]);
+
+  const onInputKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setActiveIndex((index) => (results.length ? (index + 1) % results.length : 0));
+        return;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setActiveIndex((index) => (results.length ? (index - 1 + results.length) % results.length : 0));
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        go(results[activeIndex]);
+      }
+    },
+    [activeIndex, go, results],
+  );
+
+  if (isAuthRoute) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={triggerClassName}
+        role="button"
+        tabIndex={0}
+        title={t('Search settings')}
+        style={{ color: headerColors.text }}
+        onClick={openPalette}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openPalette();
+          }
+        }}
+        onMouseEnter={(event) => {
+          event.currentTarget.style.background = headerColors.bgHover;
+        }}
+        onMouseLeave={(event) => {
+          event.currentTarget.style.background = 'transparent';
+        }}
+      >
+        <SearchOutlined />
+        <span style={{ fontSize: token.fontSizeSM, opacity: 0.75 }}>{SHORTCUT_LABEL}</span>
+      </div>
+
+      <Modal
+        open={open}
+        footer={null}
+        closable={false}
+        destroyOnClose
+        width={520}
+        styles={{ body: { paddingTop: 4 } }}
+        afterOpenChange={(opened) => opened && inputRef.current?.focus()}
+        onCancel={() => setOpen(false)}
+      >
+        <Input
+          ref={inputRef}
+          allowClear
+          bordered={false}
+          placeholder={t('Search settings')}
+          prefix={<SearchOutlined style={{ color: token.colorTextDescription }} />}
+          size="large"
+          value={keyword}
+          onChange={(event) => setKeyword(event.target.value)}
+          onKeyDown={onInputKeyDown}
+        />
+        <div style={{ borderTop: `${token.lineWidth}px solid ${token.colorSplit}`, margin: '8px -24px 0' }} />
+
+        {!keyword.trim() && recentItems.length ? (
+          <div style={{ color: token.colorTextDescription, fontSize: token.fontSizeSM, padding: '12px 12px 4px' }}>
+            {t('Recently visited')}
+          </div>
+        ) : null}
+
+        <div className={resultListClassName}>
+          {results.length ? (
+            results.map((item, index) => (
+              <div
+                key={item.name}
+                className={resultItemClassName}
+                style={{ background: index === activeIndex ? token.colorFillQuaternary : 'transparent' }}
+                onClick={() => go(item)}
+                onMouseEnter={() => setActiveIndex(index)}
+              >
+                <span style={{ color: token.colorText }}>{item.title}</span>
+                <span style={{ color: token.colorTextDescription, fontSize: token.fontSizeSM }}>{item.breadcrumb}</span>
+              </div>
+            ))
+          ) : (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={keyword.trim() ? t('No matching settings') : t('Search settings')}
+              style={{ margin: '24px 0' }}
+            />
+          )}
+        </div>
+      </Modal>
+    </>
+  );
+});
+
+SettingsSearch.displayName = 'SettingsSearch';
+
+export default SettingsSearch;