@nocobase/client-v2 2.2.0-alpha.10 → 2.2.0-alpha.12

package/src/flow/admin-shell/admin-layout/NocoBaseLogo.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSystemSettings } from '../../system-settings';
+import type { CustomToken } from '../../../theme';
+
+const logoContainerClassName = css`
+  height: var(--nb-header-height);
+  margin-right: 4px;
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0;
+  align-items: center;
+`;
+
+const fixedWidthClassName = css`
+  ${logoContainerClassName}
+  width: 168px;
+`;
+
+const autoWidthClassName = css`
+  ${logoContainerClassName}
+  width: auto;
+  min-width: 168px;
+`;
+
+const logoImageClassName = css`
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;
+
+const titleClassName = css`
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const NocoBaseLogo = observer(() => {
+  const { token } = antdTheme.useToken();
+  const customToken = token as CustomToken;
+  const result = useSystemSettings();
+  const { t } = useTranslation('lm-collections');
+  const title = t(result?.data?.data?.title || 'NocoBase');
+  const logoUrl = result?.data?.data?.logo?.url;
+  const titleStyle = useMemo<React.CSSProperties>(
+    () => ({ color: customToken.colorTextHeaderMenu, fontSize: customToken.fontSizeHeading3 }),
+    [customToken.colorTextHeaderMenu, customToken.fontSizeHeading3],
+  );
+
+  const logo = logoUrl ? (
+    <img alt={title} className={logoImageClassName} src={logoUrl} />
+  ) : (
+    <span style={titleStyle} className={titleClassName}>
+      {title}
+    </span>
+  );
+
+  return <div className={logoUrl ? fixedWidthClassName : autoWidthClassName}>{result?.loading ? null : logo}</div>;
+});
+
+NocoBaseLogo.displayName = 'NocoBaseLogo';

package/src/flow/admin-shell/admin-layout/TopbarActionsBar.tsx

@@ -24,7 +24,9 @@ const topbarActionsBarClassName = css`
   align-items: center;
   color: var(--nb-topbar-action-color);
 
-  .nb-topbar-actions-list {
+  .nb-topbar-actions-list,
+  .nb-topbar-utility-actions-list,
+  .nb-topbar-plugin-settings-action {
     display: inline-flex;
     align-items: center;
     height: 100%;
@@ -127,12 +129,18 @@ const getTopbarActionId = (action: TopbarActionModel) => {
   return action?.actionId || action?.uid || '';
 };
 
+const PLUGIN_SETTINGS_ACTION_ID = 'plugin-settings';
+
 const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[]; onActionClick?: () => void }) => {
   const { allow } = useAclSnippets();
   const { token } = theme.useToken();
   const customToken = token as CustomToken;
   const actions = useMemo(() => getVisibleTopbarActions(props.actions, allow), [allow, props.actions]);
-  const mainActions = actions.filter((action) => getTopbarActionId(action) !== USER_CENTER_ACTION_ID);
+  const mainActions = actions.filter((action) => {
+    const actionId = getTopbarActionId(action);
+    return actionId !== PLUGIN_SETTINGS_ACTION_ID && actionId !== USER_CENTER_ACTION_ID;
+  });
+  const pluginSettingsAction = actions.find((action) => getTopbarActionId(action) === PLUGIN_SETTINGS_ACTION_ID);
   const userCenterAction = actions.find((action) => getTopbarActionId(action) === USER_CENTER_ACTION_ID);
 
   return (
@@ -153,18 +161,33 @@ const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[];
       <ConfigProvider theme={dividerTheme}>
         <Divider type="vertical" />
       </ConfigProvider>
-      <HelpLite />
-      {userCenterAction ? (
-        <ErrorBoundary
-          key={userCenterAction.uid}
-          FallbackComponent={TopbarActionErrorFallback}
-          onError={(error) => {
-            console.error('[NocoBase] Topbar action render failed.', error);
-          }}
-        >
-          <FlowModelRenderer model={userCenterAction} />
-        </ErrorBoundary>
-      ) : null}
+      <div className="nb-topbar-utility-actions-list">
+        {pluginSettingsAction ? (
+          <span className="nb-topbar-plugin-settings-action" onClick={props.onActionClick}>
+            <ErrorBoundary
+              key={pluginSettingsAction.uid}
+              FallbackComponent={TopbarActionErrorFallback}
+              onError={(error) => {
+                console.error('[NocoBase] Topbar action render failed.', error);
+              }}
+            >
+              <FlowModelRenderer model={pluginSettingsAction} />
+            </ErrorBoundary>
+          </span>
+        ) : null}
+        <HelpLite />
+        {userCenterAction ? (
+          <ErrorBoundary
+            key={userCenterAction.uid}
+            FallbackComponent={TopbarActionErrorFallback}
+            onError={(error) => {
+              console.error('[NocoBase] Topbar action render failed.', error);
+            }}
+          >
+            <FlowModelRenderer model={userCenterAction} />
+          </ErrorBoundary>
+        ) : null}
+      </div>
     </div>
   );
 });

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -136,6 +136,16 @@ describe('TopbarActionsBar helpers', () => {
           title: 'Plugin manager',
           path: '/admin/settings/plugin-manager',
           icon: null,
+          sort: -200,
+          componentLoader: async () => null,
+        },
+        {
+          key: 'multi-portal',
+          name: 'multi-portal',
+          title: 'Portal manager',
+          path: '/admin/settings/multi-portal',
+          icon: null,
+          sort: -300,
           componentLoader: async () => null,
         },
         {
@@ -159,13 +169,14 @@ describe('TopbarActionsBar helpers', () => {
     });
 
     expect((items as any[]).map((item) => item.type || item.key)).toEqual([
+      'multi-portal',
       'plugin-manager',
       'divider',
       'system-settings',
       'divider',
       'security',
     ]);
-    expect((items as any[])[2]).toMatchObject({
+    expect((items as any[]).find((item) => item.key === 'system-settings')).toMatchObject({
       key: 'system-settings',
       name: 'system-settings',
       path: '/admin/settings/system-settings',
@@ -191,7 +202,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -216,7 +227,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'Plugin manager' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/plugin-manager');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/plugin-manager');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -241,13 +252,13 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/crm-amd/ekeisumx1zu');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
   });
 
-  it('should keep regular admin settings as SPA links inside admin runtime', () => {
+  it('should open regular admin settings in the standalone SPA from admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -266,11 +277,12 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
-  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
+  it('should open sub-app settings in the standalone SPA from sub-app admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -289,8 +301,9 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
   it('should not treat admin-like paths as admin runtime', () => {
@@ -312,11 +325,11 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin2/foo');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('should not duplicate the basename when building new-tab settings hrefs', () => {
+  it('should remove the modern basename when building standalone settings hrefs', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -335,7 +348,30 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
+  });
+
+  it('should preserve the new sub-app scope in standalone settings hrefs', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/admin/settings/system-settings',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/_app/a_new/admin/settings/system-settings');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/settings/_app/a_new/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
   });
 
   it('should keep external settings opening in a new tab', () => {
@@ -402,6 +438,34 @@ describe('TopbarActionsBar', () => {
     vi.restoreAllMocks();
   });
 
+  it('should group plugin settings with Help and user center', () => {
+    render(
+      <TopbarActionsBar
+        actions={[
+          createAction({ uid: 'notification', actionId: 'notification' }),
+          createAction({ uid: 'plugin-settings', actionId: 'plugin-settings' }),
+          createAction({ uid: 'user-center', actionId: 'user-center' }),
+        ]}
+      />,
+    );
+
+    const notification = screen.getByTestId('flow-model-notification');
+    const pluginSettings = screen.getByTestId('flow-model-plugin-settings');
+    const help = screen.getByTestId('help-lite');
+    const userCenter = screen.getByTestId('flow-model-user-center');
+    const mainGroup = notification.closest('.nb-topbar-actions-list');
+    const utilityGroup = pluginSettings.closest('.nb-topbar-utility-actions-list');
+
+    expect(mainGroup).toContainElement(notification);
+    expect(mainGroup).not.toContainElement(pluginSettings);
+    expect(utilityGroup).not.toBeNull();
+    expect(utilityGroup).toContainElement(pluginSettings);
+    expect(utilityGroup).toContainElement(help);
+    expect(utilityGroup).toContainElement(userCenter);
+    expect(pluginSettings.compareDocumentPosition(help) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(help.compareDocumentPosition(userCenter) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it('should keep HelpLite rendered when one action fails', () => {
     vi.spyOn(console, 'error').mockImplementation(() => {});
 

package/src/flow/models/base/ActionModelCore.tsx

@@ -7,7 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DefaultStructure, FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import { FlowModel, tExpr, useFlowModel } from '@nocobase/flow-engine';
+import type { DefaultStructure, FlowModelOptions } from '@nocobase/flow-engine';
 import { Icon } from '../../../components';
 import { Button, Tooltip } from 'antd';
 import type { ButtonProps } from 'antd/es/button';
@@ -87,8 +88,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return null;
   }
 
-  onInit(options: any): void {
+  onInit(options: FlowModelOptions<T>): void {
     super.onInit(options);
+    // Action disabled state is computed at runtime and must never be restored from persisted props.
+    delete this.props.disabled;
     this.context.defineProperty('actionName', {
       get: () => {
         return this.getAclActionName();
@@ -97,6 +100,12 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     });
   }
 
+  serialize() {
+    const data = super.serialize();
+    delete data.props.disabled;
+    return data;
+  }
+
   getInputArgs() {
     const inputArgs: Record<string, any> = {};
     const defaultKeys: string[] = [];

package/src/flow/models/base/__tests__/ActionModelCore.render.test.tsx

@@ -1,3 +1,12 @@
+/**
+ * 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 { render, screen } from '@nocobase/test/client';
 import { FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { App, ConfigProvider } from 'antd';
@@ -35,3 +44,43 @@ describe('ActionModel rendering', () => {
     expect(screen.getByRole('button', { name: 'Open details' })).toBeInTheDocument();
   });
 });
+
+describe('ActionModel disabled state persistence', () => {
+  it('drops disabled from persisted props during initialization', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: { title: 'Open details', disabled: true },
+    });
+
+    expect(model.getProps()).not.toHaveProperty('disabled');
+  });
+
+  it('keeps runtime disabled state without serializing it', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: { title: 'Open details' },
+    });
+
+    model.setProps('disabled', true);
+
+    expect(model.getProps().disabled).toBe(true);
+    expect(model.serialize().props).toEqual({ title: 'Open details' });
+  });
+
+  it('does not serialize fork-local disabled state', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ NoIconActionModel });
+    const model = engine.createModel<NoIconActionModel>({
+      use: 'NoIconActionModel',
+      props: { title: 'Open details' },
+    });
+    const fork = model.createFork({ disabled: true });
+
+    expect(fork.getProps().disabled).toBe(true);
+    expect(fork.serialize().props).toEqual({ title: 'Open details' });
+  });
+});

package/src/flow/models/fields/JsonFieldModel.tsx

@@ -13,6 +13,22 @@ import JSON5 from 'json5';
 import React, { useState, useEffect, useRef } from 'react';
 import { FieldModel } from '../base/FieldModel';
 
+const jsonValidationRuleMarker = '__jsonSyntaxValidation';
+
+interface JsonValidationRule {
+  [jsonValidationRuleMarker]: true;
+  type: 'any';
+  validator?: (_rule: unknown, value: unknown) => Promise<void>;
+}
+
+function isRuleObject(rule: unknown): rule is Record<string, unknown> {
+  return typeof rule === 'object' && rule !== null;
+}
+
+function isJsonValidationRule(rule: unknown): rule is JsonValidationRule {
+  return isRuleObject(rule) && rule[jsonValidationRuleMarker] === true;
+}
+
 const jsonCss = css`
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 14px;
@@ -40,7 +56,7 @@ export const JsonInput = observer((props: any) => {
     }
 
     internalChange.current = false;
-  }, [value]);
+  }, [_JSON, space, value]);
 
   // 用户输入时
   const handleChange = (ev) => {
@@ -91,23 +107,30 @@ JsonFieldModel.registerFlow({
   key: 'jsonInitSetting',
   steps: {
     initValidation: {
-      handler(ctx, params) {
-        const rules = ctx.model.parent.props.rules || [];
+      handler(ctx) {
+        const currentRules = Array.isArray(ctx.model.parent.props.rules) ? ctx.model.parent.props.rules : [];
+        const rules = currentRules.filter((rule: unknown) => {
+          return (!isRuleObject(rule) || Object.keys(rule).length > 0) && !isJsonValidationRule(rule);
+        });
         // 添加 JSON 语法校验规则
         rules.push({
-          validator: (_, value) => {
+          // validator 函数序列化后会被丢弃；保留 any 类型可避免持久化规则退化为默认字符串校验。
+          type: 'any',
+          [jsonValidationRuleMarker]: true,
+          validator: (_rule: unknown, value: unknown) => {
             // 允许空
             if (value === null || value === undefined || value === '') return Promise.resolve();
             // 如果已经是对象/数组，直接通过
             if (typeof value === 'object') return Promise.resolve();
             try {
-              JSON.parse(value);
+              JSON.parse(String(value));
               return Promise.resolve();
-            } catch (err) {
-              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + err.message);
+            } catch (error) {
+              const message = error instanceof Error ? error.message : String(error);
+              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + message);
             }
           },
-        });
+        } satisfies JsonValidationRule);
         ctx.model.parent.setProps({
           rules,
         });

package/src/flow/models/fields/__tests__/JsonFieldModel.test.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 { FlowEngine, FlowModel } from '@nocobase/flow-engine';
+import { describe, expect, it } from 'vitest';
+import { JsonFieldModel } from '../JsonFieldModel';
+
+interface ValidationRule {
+  required?: boolean;
+  type?: string;
+  validator?: (_rule: unknown, value: unknown) => Promise<void>;
+}
+
+function createModels(rules: ValidationRule[]) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JsonFieldModel });
+  const parent = engine.createModel<FlowModel<{ subModels: { field: JsonFieldModel } }>>({
+    use: FlowModel,
+    uid: 'json-form-item',
+    props: { rules },
+    subModels: {
+      field: {
+        use: JsonFieldModel,
+        uid: 'json-field',
+      },
+    },
+  });
+
+  return { field: parent.subModels.field, parent };
+}
+
+function initializeJsonValidation(field: JsonFieldModel) {
+  const step = field.getFlow('jsonInitSetting')?.steps.initValidation;
+  if (!step) {
+    throw new Error('JSON validation step is not registered');
+  }
+  step.handler(field.context, {});
+}
+
+describe('JsonFieldModel validation', () => {
+  it('replaces legacy empty rules with one serializable JSON validation rule', async () => {
+    const { field, parent } = createModels([{}, { required: true }]);
+
+    initializeJsonValidation(field);
+
+    const rules = parent.props.rules as ValidationRule[];
+    expect(rules).toHaveLength(2);
+    expect(rules[0]).toEqual({ required: true });
+    expect(rules[1]).toMatchObject({ type: 'any' });
+    expect(rules[1].validator).toBeTypeOf('function');
+    if (!rules[1].validator) {
+      throw new Error('JSON validator is missing');
+    }
+    await expect(rules[1].validator({}, { name: 'NocoBase' })).resolves.toBeUndefined();
+    await expect(rules[1].validator({}, '{"name":')).rejects.toContain('Invalid JSON format');
+
+    const persistedRules = JSON.parse(JSON.stringify(parent.serialize())).props.rules as ValidationRule[];
+    expect(persistedRules).toHaveLength(2);
+    expect(persistedRules[1]).toMatchObject({ type: 'any' });
+    expect(persistedRules[1].validator).toBeUndefined();
+  });
+
+  it('re-registers the runtime validator without duplicating its persisted placeholder', () => {
+    const { field, parent } = createModels([{}]);
+    initializeJsonValidation(field);
+    const persistedRules = JSON.parse(JSON.stringify(parent.serialize())).props.rules as ValidationRule[];
+    parent.setProps({ rules: persistedRules });
+
+    initializeJsonValidation(field);
+
+    const rules = parent.props.rules as ValidationRule[];
+    expect(rules).toHaveLength(1);
+    expect(rules[0]).toMatchObject({ type: 'any' });
+    expect(rules[0].validator).toBeTypeOf('function');
+  });
+});