@nocobase/client-v2 2.3.0-beta.6 → 2.4.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 { useACLCheckReady } from '../acl/aclCheckReadiness';
+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',
+};
+
+/**
+ * 设置中心顶栏的一级导航。
+ *
+ * Applications and the plugin manager have a single page each and act as top-level
+ * entries; everything else sits under "other settings" and expands on hover — that
+ * group has no sidebar, so the dropdown is the only way into its pages.
+ */
+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 isACLReady = useACLCheckReady(app);
+  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,
+          };
+        }
+
+        // The dropdown still opens while standing inside the group: with the sidebar
+        // gone, this is the only way to reach the other pages in it.
+        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,
+            })),
+          // The group title only expands the dropdown and is not clickable: it is not a
+          // page, so clicking it has no well-defined destination. Pick a page instead.
+        };
+      }),
+    [groups, handleClick, t],
+  );
+
+  // 子菜单标题只有在它的某个子项被选中时才会高亮，所以两个 key 都要给。
+  const selectedKeys = useMemo(() => {
+    if (!activeGroupKey) {
+      return [];
+    }
+    return currentTopLevelSetting?.name
+      ? [activeGroupKey, `${activeGroupKey}::${currentTopLevelSetting.name}`]
+      : [activeGroupKey];
+  }, [activeGroupKey, currentTopLevelSetting?.name]);
+
+  if (isAuthRoute || !isACLReady || 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,
+    );
+  }
+}