@nocobase/client-v2 2.2.0-beta.9 → 3.0.0-alpha.1

package/src/flow/actions/linkageRules.tsx

@@ -68,6 +68,12 @@ interface LinkageRule {
   }[];
 }
 
+export function updateLinkageRules<T>(rules: T[], updater: (nextRules: T[]) => void): T[] {
+  const nextRules = _.cloneDeep(rules);
+  updater(nextRules);
+  return nextRules;
+}
+
 const previewValueForLog = (value: any) => {
   if (value == null) return value;
   const t = typeof value;
@@ -731,6 +737,41 @@ export const linkageSetMenuItemProps = defineAction({
   },
 });
 
+export const linkageSetTabProps = defineAction({
+  name: 'linkageSetTabProps',
+  title: tExpr('Set tab state'),
+  scene: ActionScene.TAB_LINKAGE_RULES,
+  sort: 100,
+  uiSchema: {
+    value: {
+      type: 'string',
+      'x-component': (props) => {
+        const { value, onChange } = props;
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const ctx = useFlowContext();
+        const t = ctx.model.translate.bind(ctx.model);
+
+        return (
+          <Select
+            value={value}
+            onChange={onChange}
+            placeholder={t('Please select state')}
+            style={{ width: '100%' }}
+            options={[
+              { label: t('Visible'), value: 'visible' },
+              { label: t('Hidden'), value: 'hidden' },
+            ]}
+            allowClear
+          />
+        );
+      },
+    },
+  },
+  handler(ctx, { value, setProps }) {
+    setProps(ctx.model, { hiddenModel: value === 'hidden' });
+  },
+});
+
 export const linkageSetFieldProps = defineAction({
   name: 'linkageSetFieldProps',
   title: tExpr('Set field state'),
@@ -1339,6 +1380,7 @@ export const linkageRunjs = defineAction({
     ActionScene.FIELD_LINKAGE_RULES,
     ActionScene.ACTION_LINKAGE_RULES,
     ActionScene.MENU_LINKAGE_RULES,
+    ActionScene.TAB_LINKAGE_RULES,
     ActionScene.DETAILS_FIELD_LINKAGE_RULES,
     ActionScene.SUB_FORM_FIELD_LINKAGE_RULES,
   ],
@@ -1464,13 +1506,26 @@ async function resolveLinkageRulesParamsPreservingRunJsScripts(ctx: FlowContext,
 }
 
 const LinkageRulesUI = observer(
-  (props: { readonly value: LinkageRule[]; supportedActions: string[]; title?: string }) => {
-    const { value: rules, supportedActions } = props;
+  (props: {
+    readonly value: LinkageRule[];
+    onChange?: (value: LinkageRule[]) => void;
+    supportedActions: string[];
+    title?: string;
+  }) => {
+    const { value: rules = [], onChange, supportedActions } = props;
     const ctx = useFlowContext();
     const flowEngine = useFlowEngine();
     const t = ctx.model.translate.bind(ctx.model);
     const assignPriorityTip = t('Assignment takes precedence over form field assignment');
 
+    const replaceRules = (updater: (nextRules: LinkageRule[]) => void) => {
+      if (onChange) {
+        onChange(updateLinkageRules(rules, updater));
+      } else {
+        updater(rules);
+      }
+    };
+
     // 创建新规则的默认值
     const createNewRule = (): LinkageRule => ({
       key: uid(),
@@ -1487,7 +1542,7 @@ const LinkageRulesUI = observer(
 
     // 删除规则
     const handleDeleteRule = (index: number) => {
-      rules.splice(index, 1);
+      replaceRules((nextRules) => nextRules.splice(index, 1));
     };
 
     // 上移规则
@@ -1526,7 +1581,9 @@ const LinkageRulesUI = observer(
 
     // 切换规则启用状态
     const handleToggleEnable = (index: number, enable: boolean) => {
-      rules[index].enable = enable;
+      replaceRules((nextRules) => {
+        nextRules[index].enable = enable;
+      });
     };
 
     // 获取可用的动作类型
@@ -2169,17 +2226,30 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
               }
             : props;
 
-        // 存储原始值，用于恢复
-        if (!model.__originalProps) {
-          model.__originalProps = {
-            hiddenModel: model.hidden,
-            hiddenText: undefined,
-            disabled: undefined,
-            required: undefined,
-            hidden: undefined,
-            ...model.props,
-          };
-        }
+        // 只记录联动实际控制的属性，避免之后恢复状态时把标题、路由等无关的新配置回滚到旧快照。
+        const originalProps = model.__originalProps || (model.__originalProps = {});
+        const rememberOriginalProp = (key: string, value: unknown) => {
+          if (!Object.prototype.hasOwnProperty.call(originalProps, key)) {
+            originalProps[key] = value;
+          }
+        };
+        Object.keys(normalizedProps || {}).forEach((key) => {
+          if (key === 'hiddenModel') {
+            rememberOriginalProp(
+              key,
+              Object.prototype.hasOwnProperty.call(model.props || {}, key) ? model.props?.[key] : model.hidden,
+            );
+            return;
+          }
+
+          rememberOriginalProp(key, model.props?.[key]);
+          if (key === 'hiddenText' && normalizedProps[key]) {
+            rememberOriginalProp('title', model.props?.title);
+          }
+          if (key === 'required') {
+            rememberOriginalProp('rules', model.props?.rules);
+          }
+        });
 
         // 临时存起来，遍历完所有规则后，再统一处理
         patchPropsByModel.set(model, {
@@ -2237,7 +2307,6 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     const newProps = { ...model.__originalProps, ...patchProps };
     const prevHidden = !!model.hidden;
     const nextHidden = !!newProps.hiddenModel;
-
     model.setProps(_.omit(newProps, ['hiddenModel', 'value', 'hiddenText', LINKAGE_ASSIGN_MODE_PROP]));
     syncFieldOptionsToForks(model, patchProps);
     if (typeof model.setHidden === 'function') {
@@ -2463,6 +2532,32 @@ export const menuLinkageRules = defineAction({
   },
 });
 
+export const tabLinkageRules = defineAction({
+  name: 'tabLinkageRules',
+  title: tExpr('Tab linkage rules'),
+  uiMode: 'embed',
+  uiSchema(ctx) {
+    return {
+      value: {
+        type: 'array',
+        'x-component': LinkageRulesUI,
+        'x-component-props': {
+          supportedActions: getSupportedActions(ctx, ActionScene.TAB_LINKAGE_RULES),
+          title: tExpr('Tab linkage rules'),
+        },
+      },
+    };
+  },
+  defaultParams: {
+    value: [],
+  },
+  useRawParams: true,
+  handler: async (ctx, params) => {
+    const resolved = await resolveLinkageRulesParamsPreservingRunJsScripts(ctx, params);
+    return commonLinkageRulesHandler(ctx, resolved);
+  },
+});
+
 export const fieldLinkageRules = defineAction({
   name: 'fieldLinkageRules',
   title: tExpr('Field linkage rules'),

package/src/flow/actions/linkageRulesRefresh.tsx

@@ -35,12 +35,8 @@ export const linkageRulesRefresh = defineAction({
     // Prefer running on the current model; fallback to blockModel when the current model doesn't own the flow.
     if (!hasFlow) return;
 
-    // In runtime, only skip master when there are mounted forks that can handle the same flow.
+    // Skip master when unmounted forks can handle the same flow.
     // Otherwise master is likely the rendered model and still needs refresh.
-    // In design mode, always refresh master so the currently edited model state stays in sync.
-    const flowSettingsEnabled = Boolean(
-      (ctx as any)?.flowSettingsEnabled || (model as any)?.context?.flowSettingsEnabled,
-    );
     const hasForkWithFlow =
       !model?.isFork &&
       !!model?.forks?.size &&
@@ -49,7 +45,7 @@ export const linkageRulesRefresh = defineAction({
         return !!fork?.getFlow?.(flowKey);
       });
     const isMasterMounted = Boolean((model as any)?.context?.ref?.current);
-    if (hasForkWithFlow && !isMasterMounted && !flowSettingsEnabled) {
+    if (hasForkWithFlow && !isMasterMounted) {
       return;
     }
 

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

@@ -18,7 +18,6 @@ import { theme as antdTheme, ConfigProvider, Grid, Popover } from 'antd';
 import { createStyles, createGlobalStyle } from 'antd-style';
 import React, { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import {
   AdminLayoutMenuModelRenderer,
@@ -35,7 +34,6 @@ import { ResetThemeTokenAndKeepAlgorithm } from './ResetThemeTokenAndKeepAlgorit
 import { PinnedPluginListLite } from './PinnedPluginListLite';
 import { useApplications } from './useApplications';
 import { useGlobalTheme, type CustomToken } from '../../../theme';
-import { useSystemSettings } from '../../system-settings';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 import {
   FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT,
@@ -44,60 +42,7 @@ import {
 } from './flowSettingsPreference';
 import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
-
-const className1 = css`
-  height: var(--nb-header-height);
-  margin-right: 4px;
-  display: inline-flex;
-  flex-shrink: 0;
-  color: #fff;
-  padding: 0;
-  align-items: center;
-`;
-const className1WithFixedWidth = css`
-  ${className1}
-  width: 168px;
-`;
-const className1WithAutoWidth = css`
-  ${className1}
-  width: auto;
-  min-width: 168px;
-`;
-const className2 = css`
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-`;
-const className3 = css`
-  width: 100%;
-  height: 100%;
-  font-weight: 500;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const NocoBaseLogo = observer(() => {
-  const { token } = antdTheme.useToken();
-  const customToken = token as CustomToken;
-  const result = useSystemSettings();
-  const { t } = useTranslation('lm-collections');
-  const fontSizeStyle = useMemo(() => ({ fontSize: customToken.fontSizeHeading3 }), [customToken.fontSizeHeading3]);
-
-  const hasLogo = result?.data?.data?.logo?.url;
-  const logo = hasLogo ? (
-    <img className={className2} src={result?.data?.data?.logo?.url} />
-  ) : (
-    <span style={fontSizeStyle} className={className3}>
-      {t(result?.data?.data?.title)}
-    </span>
-  );
-
-  return (
-    <div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
-  );
-});
+import { NocoBaseLogo } from './NocoBaseLogo';
 
 const resetStyle = css`
   .ant-layout-sider-children {
@@ -712,7 +657,6 @@ export const AdminLayoutComponent = observer((props: any) => {
         <MobileMenuControlContext.Provider value={{ closeMobileMenu }}>
           <DndProvider collisionDetection={menuCollisionDetection} onDragEnd={handleMenuDragEnd}>
             <ProLayout
-              key={`admin-layout-menu-${menuRouteRefreshVersion}`}
               {...props}
               contentStyle={contentStyle}
               siderWidth={customToken.siderWidth || 200}

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>
   );
 });