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

package/src/settings-app/useSettingsThemeConfig.ts

@@ -0,0 +1,100 @@
+/**
+ * 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 { theme as antdTheme, type ThemeConfig } from 'antd';
+import { useEffect, useState } from 'react';
+import { useApp } from '../hooks/useApp';
+
+/** 简约主题在 `themeConfig` 表里的固定标识，见 plugin-theme-editor 的 builtinThemes */
+export const MINIMAL_THEME_UID = 'minimal';
+
+const ALGORITHMS = {
+  defaultAlgorithm: antdTheme.defaultAlgorithm,
+  darkAlgorithm: antdTheme.darkAlgorithm,
+  compactAlgorithm: antdTheme.compactAlgorithm,
+};
+
+/**
+ * 把库里存的 algorithm 名字换成 antd 的算法函数。
+ *
+ * 主题记录里存的是字符串（JSON 存不下函数），可能是单个也可能是数组。
+ *
+ * @param {unknown} value 库里存的 algorithm 字段
+ * @returns {ThemeConfig['algorithm'] | undefined} antd 算法
+ */
+function toAlgorithm(value: unknown): ThemeConfig['algorithm'] | undefined {
+  const names = (Array.isArray(value) ? value : [value]).filter((name): name is keyof typeof ALGORITHMS =>
+    Boolean(name && typeof name === 'string' && ALGORITHMS[name]),
+  );
+
+  if (!names.length) {
+    return undefined;
+  }
+
+  return names.length === 1 ? ALGORITHMS[names[0]] : names.map((name) => ALGORITHMS[name]);
+}
+
+/**
+ * 读取设置中心主题。
+ *
+ * 设置中心的外观由 `themeConfig` 里那条「简约」记录约束，在主题编辑器里就能改；
+ * 它本身是一条普通的可选主题，别的应用要同一套观感直接选它即可。
+ * 读不到（主题编辑器插件没启、老实例还没迁移、请求失败）时返回 `null`，
+ * 由调用方回落到代码里的默认中性配色，避免设置中心突然变回一片蓝。
+ *
+ * @returns {ThemeConfig | null | undefined} 主题配置；`undefined` 表示还没读完
+ */
+export function useSettingsThemeConfig(): ThemeConfig | null | undefined {
+  const app = useApp();
+  const [themeConfig, setThemeConfig] = useState<ThemeConfig | null | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const load = async () => {
+      try {
+        const response = await app.apiClient.request({
+          resource: 'themeConfig',
+          action: 'list',
+          params: { paginate: false },
+        });
+        const items: any[] = response?.data?.data || [];
+        const matched = items.find((item) => item?.uid === MINIMAL_THEME_UID);
+        const config = matched?.config;
+
+        if (cancelled) {
+          return;
+        }
+
+        if (!config) {
+          setThemeConfig(null);
+          return;
+        }
+
+        setThemeConfig({
+          token: config.token,
+          components: config.components,
+          algorithm: toAlgorithm(config.algorithm),
+        });
+      } catch (error) {
+        if (!cancelled) {
+          setThemeConfig(null);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [app.apiClient]);
+
+  return themeConfig;
+}

package/src/settings-center/AdminSettingsLayout.tsx

@@ -7,29 +7,25 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { ApiOutlined } from '@ant-design/icons';
 import { PageHeader } from '@ant-design/pro-layout';
 import { css } from '@emotion/css';
 import { FlowModelRenderer, useFlowEngine } from '@nocobase/flow-engine';
-import { Layout, Menu, Result, theme } from 'antd';
+import { Layout, Menu, Result, Tabs, theme } from 'antd';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Navigate, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
-import { useACLRoleContext } from '../acl';
-import { ADMIN_SETTINGS_PATH, type PluginSettingsPageType } from '../PluginSettingsManager';
+import { Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
+import type { PluginSettingsPageType } from '../PluginSettingsManager';
 import { useApp } from '../hooks/useApp';
 import { AdminSettingsLayoutModel } from './AdminSettingsLayoutModel';
+import { useSettingsGroups } from './useSettingsGroups';
 import {
   ADMIN_SETTINGS_LAYOUT_MODEL_UID,
   createSettingsPathMap,
-  filterRenderableSettings,
-  filterVisibleSettings,
+  findSettingsByName,
   getDefaultSettingsPath,
-  getMenuItems,
+  getSidebarMenuItems,
+  getSidebarSelectedKey,
   matchSettingsRoute,
-  PLUGIN_MANAGER_SETTING_NAME,
-  replaceRouteParams,
-  sortTopLevelSettings,
 } from './utils';
 
 function SettingsEmpty(props: { type: 'home' | 'route' }) {
@@ -60,57 +56,27 @@ function SettingsEmpty(props: { type: 'home' | 'route' }) {
 /**
  * `client-v2` 的 settings 页面壳实现。
  *
- * 该组件负责左侧菜单、顶部 tabs、默认落点和两类空态，
- * 页面内容本身继续由各个 settings route 的 `<Outlet />` 渲染。
+ * 一级分组铺在顶栏（见 `SettingsGroupNav`），这里负责当前分组下的二三级嵌套菜单、
+ * 默认落点和两类空态，页面内容本身继续由各个 settings route 的 `<Outlet />` 渲染。
  */
 export const InternalAdminSettingsLayout = () => {
   const app = useApp();
   const navigate = useNavigate();
   const location = useLocation();
-  const params = useParams();
   const { token } = theme.useToken();
-  const { t } = useTranslation();
-  const { snippets = [] } = useACLRoleContext();
+  const {
+    activeGroupSettings,
+    allSettings,
+    currentSetting,
+    currentTopLevelSetting,
+    visibleSettings: allVisibleSettings,
+  } = useSettingsGroups();
 
-  const allSettings = useMemo(
-    () => filterRenderableSettings(app.pluginSettingsManager.getList(false) as PluginSettingsPageType[]),
-    [app.pluginSettingsManager],
-  );
-  const visibleSettings = useMemo(
-    () =>
-      filterVisibleSettings(
-        filterRenderableSettings(app.pluginSettingsManager.getList(true) as PluginSettingsPageType[]),
-      ),
-    [app.pluginSettingsManager],
-  );
-  const pluginManagerSetting = useMemo(
-    () => visibleSettings.find((item) => item.name === PLUGIN_MANAGER_SETTING_NAME) || null,
-    [visibleSettings],
-  );
-  const normalSettings = useMemo(
-    () => sortTopLevelSettings(visibleSettings.filter((item) => item.name !== PLUGIN_MANAGER_SETTING_NAME)),
-    [visibleSettings],
-  );
-  const allVisibleSettings = useMemo(
-    () => (pluginManagerSetting ? [pluginManagerSetting, ...normalSettings] : normalSettings),
-    [normalSettings, pluginManagerSetting],
-  );
-  const registeredSettingsMapByPath = useMemo(() => createSettingsPathMap(allSettings), [allSettings]);
   const visibleSettingsMapByPath = useMemo(() => createSettingsPathMap(allVisibleSettings), [allVisibleSettings]);
-  const currentSetting = useMemo(
-    () => matchSettingsRoute(registeredSettingsMapByPath, location.pathname),
-    [location.pathname, registeredSettingsMapByPath],
-  );
   const currentVisibleSetting = useMemo(
     () => matchSettingsRoute(visibleSettingsMapByPath, location.pathname),
     [location.pathname, visibleSettingsMapByPath],
   );
-  const currentTopLevelSetting = useMemo(() => {
-    if (!currentSetting) {
-      return null;
-    }
-    return allSettings.find((item) => item.name === currentSetting.topLevelName) || currentSetting;
-  }, [allSettings, currentSetting]);
   const currentVisibleTopLevelSetting = useMemo(() => {
     if (!currentSetting) {
       return null;
@@ -118,10 +84,42 @@ export const InternalAdminSettingsLayout = () => {
     return allVisibleSettings.find((item) => item.name === currentSetting.topLevelName) || null;
   }, [allVisibleSettings, currentSetting]);
   const defaultSettingsPath = useMemo(() => getDefaultSettingsPath(allVisibleSettings), [allVisibleSettings]);
-  const currentVisibleTabs = useMemo(() => {
-    return (currentVisibleTopLevelSetting?.children || []).filter((item) => !item.hidden) as PluginSettingsPageType[];
-  }, [currentVisibleTopLevelSetting?.children]);
-  const shouldShowTabs = currentVisibleTabs.length > 1 && currentVisibleTopLevelSetting?.showTabs !== false;
+  const settingsRootPath = app.pluginSettingsManager.getRoutePath('');
+  const settingsRootPathWithoutTrailingSlash = settingsRootPath.replace(/\/$/, '');
+
+  const sidebarMenus = useMemo(() => getSidebarMenuItems(activeGroupSettings), [activeGroupSettings]);
+  // 分组里只有一个顶级配置项时不铺左栏：那样整条侧栏只是把顶栏那一项重复一遍。
+  // 它自己的下级（用户和权限的 用户 / 角色和权限 / 同步，AI 员工的几个页面）改用页头下的 Tab。
+  const shouldShowSidebar = activeGroupSettings.length > 1;
+  // 子页面一律走页头下的 Tab：左栏只表达「哪个模块」，模块内部的分页交给 Tab，
+  // 和 v1 设置中心保持一致。
+  const pageTabs = useMemo(() => {
+    const children = (currentVisibleTopLevelSetting?.children || []).filter(
+      (item) => !item.hidden && !item.link && item.path,
+    );
+    return children.length > 1 ? children.map((item) => ({ key: item.path, label: item.label ?? item.title })) : [];
+  }, [currentVisibleTopLevelSetting]);
+  const activeTabKey = useMemo(() => {
+    if (!pageTabs.length) {
+      return undefined;
+    }
+    const matched = pageTabs.find(
+      (tab) => location.pathname === tab.key || location.pathname.startsWith(`${tab.key}/`),
+    );
+    return matched?.key ?? pageTabs[0]?.key;
+  }, [location.pathname, pageTabs]);
+  // 命中的可能是被折叠掉的子项，要换算成左栏里真实存在的那一级，否则整个左栏都不高亮。
+  const selectedMenuKey = useMemo(
+    () =>
+      getSidebarSelectedKey(activeGroupSettings, currentVisibleSetting?.name) ||
+      getSidebarSelectedKey(activeGroupSettings, currentVisibleTopLevelSetting?.name),
+    [activeGroupSettings, currentVisibleSetting?.name, currentVisibleTopLevelSetting?.name],
+  );
+  // 页头只需要补一句「当前在哪个子页」。
+  const pageSubTitle =
+    currentVisibleSetting && currentVisibleSetting.title !== currentTopLevelSetting?.title
+      ? currentVisibleSetting.title
+      : undefined;
 
   useEffect(() => {
     const nextTitle =
@@ -134,33 +132,10 @@ export const InternalAdminSettingsLayout = () => {
     }
   }, [currentTopLevelSetting]);
 
-  const sidebarMenus = useMemo(() => {
-    const items: any[] = [];
-
-    if (pluginManagerSetting && snippets.includes('pm')) {
-      items.push({
-        key: pluginManagerSetting.name,
-        icon: pluginManagerSetting.icon || <ApiOutlined />,
-        label: pluginManagerSetting.label || t('Plugin manager'),
-      });
-    }
-
-    if (items.length && normalSettings.length) {
-      items.push({ type: 'divider' });
-    }
-
-    const normalMenuItems =
-      getMenuItems(normalSettings.map((item) => ({ ...item, children: undefined }) as PluginSettingsPageType)) || [];
-
-    items.push(...normalMenuItems);
-
-    return items;
-  }, [normalSettings, pluginManagerSetting, snippets, t]);
-
   const shouldRedirectToDefault =
-    location.pathname === ADMIN_SETTINGS_PATH ||
-    location.pathname === ADMIN_SETTINGS_PATH.replace(/\/$/, '') ||
-    location.pathname === `${ADMIN_SETTINGS_PATH}index`;
+    location.pathname === settingsRootPath ||
+    location.pathname === settingsRootPathWithoutTrailingSlash ||
+    location.pathname === `${settingsRootPath}index`;
 
   if (shouldRedirectToDefault && defaultSettingsPath) {
     return <Navigate replace to={defaultSettingsPath} />;
@@ -204,41 +179,43 @@ export const InternalAdminSettingsLayout = () => {
         overflow: 'hidden',
       }}
     >
-      <Layout.Sider
-        width={200}
-        style={{
-          background: token.colorBgContainer,
-          borderInlineEnd: `${token.lineWidth}px solid ${token.colorBorderSecondary}`,
-          minHeight: 0,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-        }}
-      >
-        <Menu
-          selectedKeys={currentVisibleTopLevelSetting?.name ? [currentVisibleTopLevelSetting.name] : []}
-          style={{ height: '100%', borderInlineEnd: 'none' }}
-          onClick={({ key }) => {
-            const topLevelSetting = allVisibleSettings.find((item) => item.name === key);
-            if (!topLevelSetting) {
-              return;
-            }
-
-            if (topLevelSetting.link) {
-              window.open(topLevelSetting.link, '_blank', 'noopener,noreferrer');
-              return;
-            }
-
-            const firstPath = topLevelSetting.children?.length
-              ? getDefaultSettingsPath(topLevelSetting.children)
-              : topLevelSetting.path;
-
-            if (firstPath) {
-              navigate(firstPath);
-            }
+      {shouldShowSidebar ? (
+        <Layout.Sider
+          width={200}
+          style={{
+            background: token.colorBgContainer,
+            borderInlineEnd: `${token.lineWidth}px solid ${token.colorBorderSecondary}`,
+            minHeight: 0,
+            overflowY: 'auto',
+            overflowX: 'hidden',
           }}
-          items={sidebarMenus}
-        />
-      </Layout.Sider>
+        >
+          <Menu
+            mode="inline"
+            inlineIndent={16}
+            selectedKeys={selectedMenuKey ? [selectedMenuKey] : []}
+            style={{ height: '100%', borderInlineEnd: 'none' }}
+            onClick={({ key }) => {
+              const setting = findSettingsByName(activeGroupSettings, String(key));
+              if (!setting) {
+                return;
+              }
+
+              if (setting.link) {
+                window.open(setting.link, '_blank', 'noopener,noreferrer');
+                return;
+              }
+
+              const targetPath = setting.children?.length ? getDefaultSettingsPath(setting.children) : setting.path;
+
+              if (targetPath && targetPath !== location.pathname) {
+                navigate(targetPath);
+              }
+            }}
+            items={sidebarMenus}
+          />
+        </Layout.Sider>
+      ) : null}
       <Layout.Content
         style={{
           background: token.colorBgLayout,
@@ -250,41 +227,45 @@ export const InternalAdminSettingsLayout = () => {
           overflow: 'hidden',
         }}
       >
-        <PageHeader
-          ghost={false}
-          title={currentTopLevelSetting?.title}
-          style={{
-            background: token.colorBgContainer,
-            borderBlockEnd: `${token.lineWidth}px solid ${token.colorBorderSecondary}`,
-            paddingBottom: shouldShowTabs ? 0 : token.padding,
-          }}
-          footer={
-            shouldShowTabs ? (
-              <Menu
-                mode="horizontal"
-                selectedKeys={[currentVisibleSetting?.name || currentSetting?.name]}
-                items={getMenuItems(currentVisibleTabs)}
-                onClick={({ key }) => {
-                  const targetPath = replaceRouteParams(app.pluginSettingsManager.getRoutePath(String(key)), params);
-                  if (location.pathname !== targetPath) {
-                    navigate(targetPath);
-                  }
-                }}
-                style={{ marginLeft: -token.marginSM, borderBottom: 'none' }}
-              />
-            ) : null
-          }
-        />
+        {/*
+          页头放在滚动容器**内部**：钉在外面会让页面出现嵌套滚动（窗口一条、内容区一条），
+          插件页面自己再带滚动区时会套成两三层，而且长页面白白少掉一条页头的高度。
+        */}
         <div
           style={{
             flex: 1,
             minHeight: 0,
             boxSizing: 'border-box',
             overflow: 'auto',
-            padding: token.paddingLG,
           }}
         >
-          <Outlet />
+          <PageHeader
+            ghost={false}
+            title={currentTopLevelSetting?.title}
+            subTitle={pageTabs.length ? undefined : pageSubTitle}
+            footer={
+              pageTabs.length ? (
+                <Tabs
+                  activeKey={activeTabKey}
+                  items={pageTabs}
+                  tabBarStyle={{ marginBottom: 0 }}
+                  onChange={(key) => {
+                    if (key !== location.pathname) {
+                      navigate(key);
+                    }
+                  }}
+                />
+              ) : undefined
+            }
+            style={{
+              background: token.colorBgContainer,
+              borderBlockEnd: `${token.lineWidth}px solid ${token.colorBorderSecondary}`,
+              paddingBottom: pageTabs.length ? 0 : token.padding,
+            }}
+          />
+          <div style={{ padding: token.paddingLG }}>
+            <Outlet />
+          </div>
         </div>
       </Layout.Content>
     </Layout>

package/src/settings-center/SystemSettingsPage.tsx

@@ -7,29 +7,14 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { UploadOutlined } from '@ant-design/icons';
-import { Alert, Button, Form, Input, Select, Space, Upload, message, theme } from 'antd';
-import type { RcFile, UploadRequestOption } from 'rc-upload/lib/interface';
-import mime from 'mime';
-import match from 'mime-match';
+import { Alert, App, Button, Form, Input, Select, theme } from 'antd';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { AttachmentUpload } from '../components/AttachmentUpload';
 import languageCodes from '../locale/languageCodes';
 import { useApp } from '../hooks/useApp';
 import { useSystemSettings } from '../flow/system-settings';
 
-type UploadedAttachment = {
-  id?: number;
-  title?: string;
-  filename?: string;
-  url?: string;
-};
-
-type AttachmentStorageRules = {
-  size?: number;
-  mimetype?: string | string[];
-};
-
 /**
  * `System settings` 的最小 v2 表单页面。
  *
@@ -39,14 +24,11 @@ type AttachmentStorageRules = {
 export const SystemSettingsPage = () => {
   const app = useApp();
   const { token } = theme.useToken();
+  const { message } = App.useApp();
   const { t } = useTranslation();
   const { data, loading, error, mutate } = useSystemSettings();
   const [form] = Form.useForm();
   const [submitting, setSubmitting] = useState(false);
-  const [uploading, setUploading] = useState(false);
-  const [storageRules, setStorageRules] = useState<AttachmentStorageRules | null>(null);
-  const logo = Form.useWatch<UploadedAttachment>('logo', form);
-
   useEffect(() => {
     const settings = data?.data;
     if (!settings) {
@@ -60,45 +42,6 @@ export const SystemSettingsPage = () => {
     });
   }, [data?.data, form]);
 
-  useEffect(() => {
-    let mounted = true;
-
-    const loadStorageRules = async () => {
-      try {
-        const attachmentsCollection = app.dataSourceManager?.getCollection?.('main', 'attachments');
-        const storageName = attachmentsCollection?.getOption?.('storage');
-
-        if (!storageName) {
-          if (mounted) {
-            setStorageRules(null);
-          }
-          return;
-        }
-
-        const response = await app.apiClient.request({
-          url: `storages:getBasicInfo/${storageName}`,
-          skipNotify: true,
-        });
-
-        if (!mounted) {
-          return;
-        }
-
-        setStorageRules(response?.data?.data?.rules || null);
-      } catch (error) {
-        if (mounted) {
-          setStorageRules(null);
-        }
-      }
-    };
-
-    void loadStorageRules();
-
-    return () => {
-      mounted = false;
-    };
-  }, [app]);
-
   const languageOptions = useMemo(() => {
     const currentValues = form.getFieldValue('enabledLanguages') || data?.data?.enabledLanguages || [];
     const supported = Array.from(new Set([...Object.keys(languageCodes), ...currentValues]));
@@ -109,78 +52,6 @@ export const SystemSettingsPage = () => {
     }));
   }, [data?.data?.enabledLanguages, form]);
 
-  const accept = useMemo(() => {
-    const value = storageRules?.mimetype;
-    if (!value) {
-      return undefined;
-    }
-    return Array.isArray(value) ? value.join(',') : value;
-  }, [storageRules?.mimetype]);
-
-  const beforeUpload = async (file: RcFile) => {
-    const sizeLimit = storageRules?.size;
-
-    if (typeof sizeLimit === 'number' && sizeLimit > 0 && file.size > sizeLimit) {
-      message.error(t('File size exceeds the limit'));
-      return Upload.LIST_IGNORE;
-    }
-
-    const mimetypeRule = storageRules?.mimetype;
-    const normalizedRule = Array.isArray(mimetypeRule) ? mimetypeRule.join(',').trim() : `${mimetypeRule || ''}`.trim();
-
-    if (!normalizedRule || normalizedRule === '*') {
-      return file;
-    }
-
-    let targetFile = file;
-    if (!targetFile.type) {
-      const extname = targetFile.name?.match(/\.[^.]+$/)?.[0];
-      if (extname) {
-        targetFile = new File([targetFile], targetFile.name, {
-          type: mime.getType(extname) || 'application/octet-stream',
-          lastModified: targetFile.lastModified,
-        }) as RcFile;
-      }
-    }
-
-    const isAllowed = normalizedRule
-      .split(',')
-      .filter(Boolean)
-      .some((rule) => match(targetFile.type)(rule));
-
-    if (!isAllowed) {
-      message.error(t('File type is not allowed'));
-      return Upload.LIST_IGNORE;
-    }
-
-    return targetFile;
-  };
-
-  const handleLogoUpload = async (options: UploadRequestOption) => {
-    const { file, onError, onSuccess } = options;
-    setUploading(true);
-
-    try {
-      const formData = new FormData();
-      formData.append('file', file as RcFile);
-
-      const response = await app.apiClient.request({
-        url: 'attachments:create',
-        method: 'post',
-        data: formData,
-      });
-
-      const nextLogo = response?.data?.data;
-
-      form.setFieldValue('logo', nextLogo);
-      onSuccess?.(response?.data, file as RcFile);
-    } catch (error) {
-      onError?.(error);
-    } finally {
-      setUploading(false);
-    }
-  };
-
   const handleSubmit = async () => {
     const values = await form.validateFields();
     const payload = {
@@ -244,44 +115,7 @@ export const SystemSettingsPage = () => {
           <Input.TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
         </Form.Item>
         <Form.Item name="logo" label={t('Logo')}>
-          <Space direction="vertical" size={token.marginSM}>
-            {logo?.url ? (
-              <img
-                alt="system-logo"
-                src={logo.url}
-                style={{
-                  width: 96,
-                  height: 96,
-                  objectFit: 'contain',
-                  borderRadius: token.borderRadius,
-                  border: `${token.lineWidth}px solid ${token.colorBorder}`,
-                  background: token.colorBgLayout,
-                  padding: token.paddingXS,
-                }}
-              />
-            ) : null}
-            <Space>
-              <Upload
-                showUploadList={false}
-                customRequest={handleLogoUpload}
-                beforeUpload={beforeUpload}
-                accept={accept}
-              >
-                <Button loading={uploading} icon={<UploadOutlined />}>
-                  {t('Upload')}
-                </Button>
-              </Upload>
-              {logo ? (
-                <Button
-                  onClick={() => {
-                    form.setFieldValue('logo', null);
-                  }}
-                >
-                  {t('Delete')}
-                </Button>
-              ) : null}
-            </Space>
-          </Space>
+          <AttachmentUpload preview={{ width: 96, height: 96, fit: 'contain' }} />
         </Form.Item>
         <Form.Item name="enabledLanguages" label={t('Enabled languages')} rules={[{ type: 'array', min: 1 }]}>
           <Select mode="multiple" options={languageOptions} />