@nocobase/client-v2 2.3.0-beta.5 → 2.4.0-alpha.1

package/src/settings-app/SettingsSearch.tsx

@@ -0,0 +1,343 @@
+/**
+ * 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 { useACLCheckReady } from '../acl/aclCheckReadiness';
+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 ? '⌘F' : 'Ctrl F';
+
+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 + F` 唤起。
+ */
+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 isACLReady = useACLCheckReady(app);
+  const { recentItems, search } = useSettingsSearch();
+  const [open, setOpen] = useState(false);
+  const [keyword, setKeyword] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<InputRef>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const lastActiveElementRef = useRef<HTMLElement | null>(null);
+  const isPointerDownRef = useRef(false);
+
+  // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上没有可搜索的配置项。
+  const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
+
+  const results = useMemo(() => (keyword.trim() ? search(keyword) : recentItems), [keyword, recentItems, search]);
+
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [keyword]);
+
+  useEffect(() => {
+    if (isAuthRoute || !isACLReady) {
+      setOpen(false);
+      setKeyword('');
+    }
+  }, [isACLReady, isAuthRoute]);
+
+  const restoreLastActiveElement = useCallback(() => {
+    const lastActiveElement = lastActiveElementRef.current;
+    lastActiveElementRef.current = null;
+    if (lastActiveElement?.isConnected) {
+      lastActiveElement.focus({ preventScroll: true });
+    }
+  }, []);
+
+  const openPalette = useCallback(() => {
+    setKeyword('');
+
+    if (open) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    triggerRef.current?.focus();
+    setOpen(true);
+  }, [open]);
+
+  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 || !isACLReady) {
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      // 页面内组件可能自己就用 Cmd/Ctrl+F；它们 preventDefault 之后
+      // 这个 window 级监听器不该再抢一次。
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      const hasPlatformModifier = isMac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+
+      if (event.key?.toLowerCase() === 'f' && hasPlatformModifier && !event.altKey && !event.shiftKey) {
+        event.preventDefault();
+        if (!event.repeat) {
+          openPalette();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [isACLReady, isAuthRoute, openPalette]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onEscapeKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.target !== inputRef.current?.input) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+    };
+
+    const onPointerDown = () => {
+      isPointerDownRef.current = true;
+    };
+
+    const onPointerUp = () => {
+      isPointerDownRef.current = false;
+    };
+
+    window.addEventListener('keydown', onEscapeKeyDown, true);
+    window.addEventListener('pointerdown', onPointerDown, true);
+    window.addEventListener('pointerup', onPointerUp, true);
+    window.addEventListener('pointercancel', onPointerUp, true);
+    return () => {
+      isPointerDownRef.current = false;
+      window.removeEventListener('keydown', onEscapeKeyDown, true);
+      window.removeEventListener('pointerdown', onPointerDown, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+      window.removeEventListener('pointercancel', onPointerUp, true);
+    };
+  }, [open]);
+
+  const onInputKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        return;
+      }
+
+      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 || !isACLReady) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        ref={triggerRef}
+        className={triggerClassName}
+        role="button"
+        tabIndex={0}
+        title={t('Search settings')}
+        style={{ color: headerColors.text }}
+        onClick={openPalette}
+        onKeyDown={(event) => {
+          if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            restoreLastActiveElement();
+            return;
+          }
+
+          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
+        focusTriggerAfterClose={false}
+        width={520}
+        styles={{ body: { paddingTop: 4 } }}
+        afterOpenChange={(opened) => {
+          if (opened) {
+            inputRef.current?.focus();
+            return;
+          }
+
+          restoreLastActiveElement();
+        }}
+        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)}
+          onBlur={(event) => {
+            // Browser keyboard handlers may consume Escape before the page sees keydown and only blur the input.
+            const nextActiveElement = event.relatedTarget;
+            const dialog = event.currentTarget.closest('[role="dialog"]');
+            if (
+              isPointerDownRef.current ||
+              (nextActiveElement instanceof Node && dialog?.contains(nextActiveElement))
+            ) {
+              return;
+            }
+
+            setOpen(false);
+          }}
+          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;

package/src/settings-app/SettingsShell.tsx

@@ -0,0 +1,184 @@
+/**
+ * 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 { FlowModelRenderer } from '@nocobase/flow-engine';
+import { ConfigProvider, Layout, theme as antdTheme, type ThemeConfig } from 'antd';
+import React, { useMemo, type FC } from 'react';
+import { useLocation } from 'react-router-dom';
+import { HelpLite } from '../flow/admin-shell/admin-layout/HelpLite';
+import {
+  USER_CENTER_ACTION_ID,
+  type UserCenterTopbarActionModel,
+} from '../flow/models/topbar/UserCenterTopbarActionModel';
+import { useApp } from '../hooks/useApp';
+import { useCurrentUserAuthStatus } from '../nocobase-buildin-plugin/currentUserAuthStatus';
+import { addCustomAlgorithmToTheme } from '../theme/customAlgorithm';
+import { SettingsBrand } from './SettingsBrand';
+import { SettingsGroupNav } from './SettingsGroupNav';
+import { SettingsSearch } from './SettingsSearch';
+import {
+  buildSettingsGlobalCss,
+  buildSettingsNeutralTheme,
+  getSettingsHeaderColors,
+  withSettingsHeaderTheme,
+} from './settingsTheme';
+import { useSettingsThemeConfig } from './useSettingsThemeConfig';
+
+const rootStyle: React.CSSProperties = {
+  height: '100vh',
+  minWidth: 0,
+  overflow: 'hidden',
+};
+
+const headerContentStyle: React.CSSProperties = {
+  alignItems: 'center',
+  display: 'flex',
+  gap: 24,
+  height: '100%',
+  justifyContent: 'space-between',
+};
+
+const actionsStyle: React.CSSProperties = {
+  alignItems: 'center',
+  display: 'flex',
+  flexShrink: 0,
+  gap: 8,
+  height: '100%',
+};
+
+const workspaceStyle: React.CSSProperties = {
+  display: 'flex',
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: 'hidden',
+};
+
+const contentStyle: React.CSSProperties = {
+  flex: 1,
+  minWidth: 0,
+  minHeight: 0,
+  overflow: 'hidden',
+};
+
+const embedContainerStyle: React.CSSProperties = {
+  flexShrink: 0,
+  height: '100%',
+  position: 'relative',
+  width: 'fit-content',
+};
+
+export const SettingsShell: FC = ({ children }) => {
+  const app = useApp();
+  const location = useLocation();
+  const { token } = antdTheme.useToken();
+  // 设置中心的外观由主题编辑器里那条「简约」主题记录约束；读不到才用代码里的中性配色兜底。
+  const storedThemeConfig = useSettingsThemeConfig();
+  const normalizedStoredThemeConfig = useMemo(
+    () =>
+      storedThemeConfig
+        ? addCustomAlgorithmToTheme({
+            ...storedThemeConfig,
+            algorithm: Array.isArray(storedThemeConfig.algorithm)
+              ? [...storedThemeConfig.algorithm]
+              : storedThemeConfig.algorithm,
+          })
+        : storedThemeConfig,
+    [storedThemeConfig],
+  );
+  // 顶栏和补丁样式要按**设置中心自己这套主题**算色，不能直接用上面那个 `token`——
+  // 这个组件在自己的 ConfigProvider 外面，`token` 是业务端主题的。用它的话，业务端一切暗黑，
+  // 顶栏就跟着变黑，而内容区还是简约的白，一半黑一半白。
+  const settingsToken = useMemo(
+    () => (normalizedStoredThemeConfig ? antdTheme.getDesignToken(normalizedStoredThemeConfig) : token),
+    [normalizedStoredThemeConfig, token],
+  );
+  const settingsShellTheme = useMemo<ThemeConfig>(
+    () =>
+      normalizedStoredThemeConfig
+        ? withSettingsHeaderTheme(normalizedStoredThemeConfig, settingsToken)
+        : buildSettingsNeutralTheme(token),
+    [normalizedStoredThemeConfig, settingsToken, token],
+  );
+  const headerColors = useMemo(() => getSettingsHeaderColors(settingsToken), [settingsToken]);
+  const settingsGlobalCss = useMemo(() => buildSettingsGlobalCss(settingsToken), [settingsToken]);
+  const authStatus = useCurrentUserAuthStatus(app);
+  const routeMatches = app.router.matchRoutes(location.pathname) || [];
+  const isAuthenticationRoute = routeMatches.some((match) => {
+    const routeId = match.route.id;
+    return routeId === 'auth' || routeId?.startsWith('auth.') || routeId === '2fa' || routeId?.startsWith('2fa.');
+  });
+  const shouldHideHeader = routeMatches.some((match) => match.route.id === 'settingsDetails.idpOAuth.device');
+
+  if (isAuthenticationRoute) {
+    // 登录 / 二次验证页也要套设置中心自己的主题，否则它跟的是业务端主题：
+    // 业务端切暗黑之后登录页是暗的，登进去又变成浅色，中间闪一下。
+    // 外面这层用 `display: contents`，只为了让作用在 `.nb-settings-shell` 上的补丁样式
+    // 也能命中登录页，不改变任何布局。
+    return (
+      <ConfigProvider theme={settingsShellTheme}>
+        <style>{settingsGlobalCss}</style>
+        <div className="nb-settings-shell" style={{ display: 'contents' }}>
+          {children}
+        </div>
+      </ConfigProvider>
+    );
+  }
+
+  const shouldShowHeader = authStatus === 'authenticated' && !shouldHideHeader;
+  const hasUserCenterModel = Boolean(app.flowEngine.getModelClass('UserCenterTopbarActionModel'));
+  const userCenter = hasUserCenterModel
+    ? app.flowEngine.getModel<UserCenterTopbarActionModel>(`topbar-action-${USER_CENTER_ACTION_ID}`) ||
+      app.flowEngine.createModel<UserCenterTopbarActionModel>({
+        use: 'UserCenterTopbarActionModel',
+        uid: `topbar-action-${USER_CENTER_ACTION_ID}`,
+      })
+    : null;
+
+  return (
+    <ConfigProvider theme={settingsShellTheme}>
+      <style>{settingsGlobalCss}</style>
+      <Layout className="nb-settings-shell" style={rootStyle}>
+        <Layout.Header
+          style={
+            {
+              // 深色顶栏自带层次，只有浅色顶栏才需要一条分割线把它和内容区分开。
+              borderBottom: headerColors.dark
+                ? 'none'
+                : `${settingsToken.lineWidth}px solid ${settingsToken.colorBorderSecondary}`,
+              display: shouldShowHeader ? undefined : 'none',
+              height: 46,
+              lineHeight: '46px',
+              paddingInline: settingsToken.paddingLG,
+              // 顶栏子组件（动作条、pinned 插件列表）有一部分直接读 CSS 变量而不是 antd token，
+              // 而且兜底值是按深色顶栏写死的浅色，这里一并覆盖，免得白底上出现白图标。
+              '--nb-topbar-action-hover-bg': headerColors.bgHover,
+              '--colorTextHeaderMenu': headerColors.text,
+              '--nb-topbar-action-color': headerColors.text,
+            } as React.CSSProperties
+          }
+        >
+          <div style={headerContentStyle}>
+            <SettingsBrand />
+            <SettingsGroupNav />
+            <div style={actionsStyle}>
+              <SettingsSearch />
+              <HelpLite />
+              {userCenter ? <FlowModelRenderer model={userCenter} /> : null}
+            </div>
+          </div>
+        </Layout.Header>
+        <div style={workspaceStyle}>
+          <Layout.Content style={contentStyle}>{children}</Layout.Content>
+          <div id="nocobase-embed-container" style={embedContainerStyle} />
+        </div>
+      </Layout>
+    </ConfigProvider>
+  );
+};

package/src/settings-app/isSettingsApp.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 `SettingsApplication`
+ * 本身——那会让插件反向依赖壳的实现。
+ *
+ * @param {any} app 应用实例
+ * @returns {boolean} 是设置中心返回 true
+ */
+export function isSettingsApp(app?: any): boolean {
+  return Boolean(app?.isSettingsApp);
+}

package/src/settings-app/runtimePaths.ts

@@ -0,0 +1,103 @@
+/**
+ * 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 { stripModernClientPrefix } from '../authRedirect';
+import type { BaseApplication } from '../BaseApplication';
+import {
+  resolveSettingsAppScope,
+  resolveSettingsAppScopeWithinPublicPath,
+  resolveSettingsDocumentPath,
+} from './settingsDocumentPath';
+
+type SettingsRuntimeApp = Pick<BaseApplication<any>, 'name'> & {
+  getPublicPath?: () => string;
+  router?: {
+    basename?: string;
+    getBasename?: () => string | undefined;
+  };
+};
+
+const LEGACY_EMAIL_OAUTH_PATH = '/admin/settings/mail/oauth2';
+
+const ROUTE_MAPPINGS = [
+  { from: '/admin/workflow/executions', to: '/settings/workflow/executions' },
+  { from: '/admin/workflow/workflows', to: '/settings/workflow/workflows' },
+  { from: '/admin/settings', to: '/settings' },
+  { from: '/settings', to: '/settings' },
+] as const;
+
+function normalizePathname(pathname?: string) {
+  const normalized = `/${String(pathname || '/').trim()}`.replace(/\/{2,}/g, '/');
+  return normalized === '/' ? normalized : normalized.replace(/\/+$/, '');
+}
+
+function splitPathSuffix(pathLike: string) {
+  const match = String(pathLike || '').match(/^([^?#]*)(.*)$/);
+  return {
+    pathname: normalizePathname(match?.[1]),
+    suffix: match?.[2] || '',
+  };
+}
+
+function getRuntimeAppScope(app: SettingsRuntimeApp, pathname: string) {
+  const basename = app.router?.getBasename?.() || app.router?.basename;
+  const publicPath = app.getPublicPath?.() || '/';
+  return (
+    resolveSettingsAppScopeWithinPublicPath(publicPath, pathname) ||
+    resolveSettingsAppScopeWithinPublicPath(publicPath, basename) ||
+    (app.name && app.name !== 'main' ? resolveSettingsAppScope(`/apps/${app.name}`) : '')
+  );
+}
+
+function getRootPublicPath(app: SettingsRuntimeApp, appScope: string) {
+  const basename = app.router?.getBasename?.() || app.router?.basename || '';
+  const publicPath = app.getPublicPath?.();
+  if (publicPath) {
+    return normalizePathname(stripModernClientPrefix(publicPath));
+  }
+
+  const normalizedBasename = normalizePathname(basename);
+  const basenameWithoutAppScope =
+    appScope && normalizedBasename.endsWith(appScope)
+      ? normalizedBasename.slice(0, -appScope.length)
+      : normalizedBasename;
+  return normalizePathname(stripModernClientPrefix(basenameWithoutAppScope));
+}
+
+function findMappedRoute(pathname: string) {
+  for (const mapping of ROUTE_MAPPINGS) {
+    const index = pathname.indexOf(mapping.from);
+    if (index < 0) {
+      continue;
+    }
+    const tail = pathname.slice(index + mapping.from.length);
+    if (tail && !tail.startsWith('/')) {
+      continue;
+    }
+    return `${mapping.to}${tail}`;
+  }
+  return '/settings';
+}
+
+export function resolveStandaloneSettingsPath(app: SettingsRuntimeApp, pathLike: string, contextPathname?: string) {
+  const { pathname, suffix } = splitPathSuffix(pathLike);
+  const appScope = getRuntimeAppScope(app, contextPathname || pathname);
+  const rootPublicPath = getRootPublicPath(app, appScope).replace(/\/+$/, '');
+  const documentBasePath = `${rootPublicPath}${appScope}`;
+  const oauthIndex = pathname.indexOf(LEGACY_EMAIL_OAUTH_PATH);
+
+  if (oauthIndex >= 0) {
+    const oauthTail = pathname.slice(oauthIndex + LEGACY_EMAIL_OAUTH_PATH.length);
+    if (!oauthTail || oauthTail.startsWith('/')) {
+      return `${documentBasePath}${LEGACY_EMAIL_OAUTH_PATH}${oauthTail}${suffix}`;
+    }
+  }
+
+  return `${resolveSettingsDocumentPath(rootPublicPath, appScope, findMappedRoute(pathname))}${suffix}`;
+}