baidu · 2betop · Dec 10, 2024
diff --git a/examples/components/EventAction/update-data/SetVariable.jsx b/examples/components/EventAction/update-data/SetVariable.jsx
@@ -5,22 +5,34 @@ import update from 'lodash/update';
 import isEqual from 'lodash/isEqual';
 import {cloneObject, setVariable} from 'amis-core';
 
-const namespace = 'appVariables';
-const initData = JSON.parse(sessionStorage.getItem(namespace)) || {
-  ProductName: 'BCC',
-  Banlance: 1234.888,
-  ProductNum: 10,
-  isOnline: false,
-  ProductList: ['BCC', 'BOS', 'VPC'],
-  PROFILE: {
-    FirstName: 'Amis',
-    Age: 18,
-    Address: {
-      street: 'ShangDi',
-      postcode: 100001
-    }
+const variables = [
+  {
+    key: 'xxx',
+    defaultValue: 'yyy'
+  },
+
+  {
+    key: 'ProductName',
+    defaultValue: ''
+  },
+
+  {
+    key: 'count',
+    defaultValue: 0,
+    scope: 'page',
+    storageOn: 'client'
+  },
+
+  {
+    key: 'arr',
+    defaultValue: []
+  },
+
+  {
+    key: 'select',
+    defaultValue: ''
   }
-};
+];
 
 export default {
   /** schema配置 */
@@ -30,7 +42,7 @@ export default {
     body: [
       {
         type: 'tpl',
-        tpl: '变量的命名空间通过环境变量设置为了<code>appVariables</code>, 可以通过\\${appVariables.xxx}来取值'
+        tpl: '变量的命名空间通过环境变量设置为了<code>global</code>, 可以通过\\${global.xxx}来取值'
       },
       {
         type: 'container',
@@ -43,12 +55,12 @@ export default {
         body: [
           {
             type: 'tpl',
-            tpl: '<h2>数据域appVariables</h2>'
+            tpl: '<h2>数据域global</h2>'
           },
           {
             type: 'json',
             id: 'u:44521540e64c',
-            source: '${appVariables}',
+            source: '${global}',
             levelExpand: 10
           },
           {
@@ -59,7 +71,7 @@ export default {
           },
           {
             type: 'tpl',
-            tpl: '<h3>变量中的<code>ProductName (\\${appVariables.ProductName})</code>: <strong>${appVariables.ProductName|default:-}</strong></h3>',
+            tpl: '<h3>变量中的<code>ProductName (\\${global.ProductName})</code>: <strong>${global.ProductName|default:-}</strong></h3>',
             inline: false,
             id: 'u:98ed5c5534ef'
           }
@@ -82,7 +94,24 @@ export default {
                 actions: [
                   {
                     args: {
-                      path: 'appVariables.ProductName',
+                      path: 'global.ProductName',
+                      value: '${event.data.value}'
+                    },
+                    actionType: 'setValue'
+                  },
+
+                  {
+                    args: {
+                      path: 'global.arr',
+                      value:
+                        '${[{label: event.data.value, value: event.data.value}]}'
+                    },
+                    actionType: 'setValue'
+                  },
+
+                  {
+                    args: {
+                      path: 'global.select',
                       value: '${event.data.value}'
                     },
                     actionType: 'setValue'
@@ -95,8 +124,39 @@ export default {
             type: 'static',
             label: '产品名称描述',
             id: 'u:7bd4e2a4f95e',
-            value: '${appVariables.ProductName}',
+            value: '${global.ProductName}',
             name: 'staticName'
+          },
+
+          {
+            type: 'input-number',
+            label: 'Count (client)',
+            description: '存储自动存入客户端，刷新页面后数据还在',
+            id: 'u:7bd4e2a4f95e',
+            value: '${global.count}',
+            name: 'count',
+            onEvent: {
+              change: {
+                weight: 0,
+                actions: [
+                  {
+                    args: {
+                      path: 'global.count',
+                      value: '${event.data.value}'
+                    },
+                    actionType: 'setValue'
+                  }
+                ]
+              }
+            }
+          },
+
+          {
+            type: 'select',
+            label: 'select(${global.select})',
+            name: 'select',
+            value: '${global.select}',
+            source: '${global.arr}'
           }
         ],
         id: 'u:dc2580fa447a'
@@ -109,7 +169,7 @@ export default {
         actions: [
           {
             args: {
-              path: 'appVariables.ProductName',
+              path: 'global.ProductName',
               value: '${event.data.ProductName}'
             },
             actionType: 'setValue'
@@ -119,51 +179,6 @@ export default {
     }
   },
   props: {
-    data: {[namespace]: JSON.parse(sessionStorage.getItem(namespace))}
-  },
-  /** 环境变量 */
-  env: {
-    beforeSetData: (renderer, action, event) => {
-      const value = event?.data?.value ?? action?.args?.value;
-      const path = action?.args?.path;
-      const {session = 'global'} = renderer.props?.env ?? {};
-      const comptList = event?.context?.scoped?.getComponentsByRefPath(
-        session,
-        path
-      );
-
-      for (let component of comptList) {
-        const {$path: targetPath, $schema: targetSchema} = component?.props;
-        const {$path: triggerPath, $schema: triggerSchema} = renderer?.props;
-
-        if (
-          !component.setData &&
-          (targetPath === triggerPath || isEqual(targetSchema, triggerSchema))
-        ) {
-          continue;
-        }
-
-        if (component?.props?.onChange) {
-          const submitOnChange = !!component.props?.$schema?.submitOnChange;
-
-          component.props.onChange(value, submitOnChange, true);
-        } else if (component?.setData) {
-          const currentData = JSON.parse(
-            sessionStorage.getItem(namespace) || JSON.stringify(initData)
-          );
-          const varPath = path.replace(/^appVariables\./, '');
-
-          update(currentData, varPath, origin => {
-            return typeof value === typeof origin ? value : origin;
-          });
-
-          sessionStorage.setItem(namespace, JSON.stringify(currentData));
-          const newCtx = cloneObject(component?.props?.data ?? {});
-          setVariable(newCtx, path, value, true);
-
-          component.setData(newCtx, false);
-        }
-      }
-    }
+    globalVars: variables
   }
 };
diff --git a/examples/components/Example.jsx b/examples/components/Example.jsx
@@ -668,12 +668,7 @@ export const examples = [
               {
                 label: '更新全局变量数据',
                 path: '/examples/action/setdata/variable',
-                component: makeSchemaRenderer(
-                  SetVariable.schema,
-                  SetVariable.props ?? {},
-                  true,
-                  SetVariable.env
-                )
+                component: makeSchemaRenderer(SetVariable)
               }
             ]
           },

diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx
@@ -42,6 +42,15 @@ export default function (schema, schemaProps, showCode, envOverrides) {
     };
   }
 
+  if (!schema.type && schema.schema) {
+    schemaProps = schema.props;
+    envOverrides = schema.env;
+    showCode = schema.showCode ?? true;
+    schema = {
+      ...schema.schema
+    };
+  }
+
   return withRouter(
     class extends React.Component {
       static displayName = 'SchemaRenderer';

diff --git a/packages/amis-core/src/Root.tsx b/packages/amis-core/src/Root.tsx
@@ -16,11 +16,14 @@ import {
   StatusScopedWrapper,
   StatusScopedProps
 } from './StatusScoped';
+import {GlobalVariableItem} from './globalVar';
 
 export interface RootRenderProps {
+  globalVars?: Array<GlobalVariableItem>;
   location?: Location;
   theme?: string;
   data?: Record<string, any>;
+  context?: Record<string, any>;
   locale?: string;
   [propName: string]: any;
 }

diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx
@@ -38,6 +38,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
     this.store.updateContext(props.context);
     this.store.initData(props.data);
     this.store.updateLocation(props.location, this.props.env?.parseLocation);
+    this.store.setGlobalVars(props.globalVars);
 
     // 将数据里面的函数批量的绑定到 this 上
     bulkBindFunctions<RootRenderer /*为毛 this 的类型自动识别不出来？*/>(this, [
@@ -97,6 +98,11 @@ export class RootRenderer extends React.Component<RootRendererProps> {
   componentDidUpdate(prevProps: RootRendererProps) {
     const props = this.props;
 
+    // 更新全局变量
+    if (props.globalVars !== prevProps.globalVars) {
+      this.store.setGlobalVars(props.globalVars);
+    }
+
     if (props.location !== prevProps.location) {
       this.store.updateLocation(props.location, this.props.env?.parseLocation);
     }
@@ -521,7 +527,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
   }
 
   render() {
-    const {pathPrefix, schema, render, ...rest} = this.props;
+    const {pathPrefix, schema, render, globalVars, ...rest} = this.props;
     const store = this.store;
 
     if (store.runtimeError) {

diff --git a/packages/amis-core/src/SchemaRenderer.tsx b/packages/amis-core/src/SchemaRenderer.tsx
@@ -40,6 +40,8 @@ import {isExpression} from './utils/formula';
 import {StatusScopedProps} from './StatusScoped';
 import {evalExpression, filter} from './utils/tpl';
 import Animations from './components/Animations';
+import {cloneObject} from './utils/object';
+import {observeGlobalVars} from './globalVar';
 
 interface SchemaRendererProps
   extends Partial<Omit<RendererProps, 'statusStore'>>,
@@ -101,6 +103,8 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
   schema: any;
   path: string;
 
+  tmpData: any;
+
   toDispose: Array<() => any> = [];
   unbindEvent: (() => void) | undefined = undefined;
   unbindGlobalEvent: (() => void) | undefined = undefined;
@@ -114,13 +118,16 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     this.reRender = this.reRender.bind(this);
     this.resolveRenderer(this.props);
     this.dispatchEvent = this.dispatchEvent.bind(this);
+    this.handleGlobalVarChange = this.handleGlobalVarChange.bind(this);
+
+    const schema = props.schema;
 
     // 监听statusStore更新
     this.toDispose.push(
       reaction(
         () => {
-          const id = filter(props.schema.id, props.data);
-          const name = filter(props.schema.name, props.data);
+          const id = filter(schema.id, props.data);
+          const name = filter(schema.name, props.data);
           return `${
             props.statusStore.visibleState[id] ??
             props.statusStore.visibleState[name]
@@ -135,6 +142,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         () => this.forceUpdate()
       )
     );
+
+    this.toDispose.push(
+      observeGlobalVars(schema, props.topStore, this.handleGlobalVarChange)
+    );
   }
 
   componentWillUnmount() {
@@ -172,6 +183,21 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     return false;
   }
 
+  handleGlobalVarChange() {
+    const handler = this.renderer?.onGlobalVarChanged;
+    const newData = cloneObject(this.props.data);
+
+    // 如果渲染器自己做了实现，且返回 false，则不再继续往下执行
+    if (handler?.(this.cRef, this.props.schema, newData) === false) {
+      return;
+    }
+
+    this.tmpData = newData;
+    this.forceUpdate(() => {
+      delete this.tmpData;
+    });
+  }
+
   resolveRenderer(props: SchemaRendererProps, force = false): any {
     let schema = props.schema;
     let path = props.$path;
@@ -308,7 +334,10 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
           ? evalExpression(_.staticOn, rest.data)
           : _.static ?? rest.defaultStatic),
       ...subProps,
-      data: subProps.data || rest.data,
+      data:
+        this.tmpData && subProps.data === this.props.data
+          ? this.tmpData
+          : subProps.data || rest.data,
       env: env
     });
   }
@@ -517,6 +546,9 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       mobileUI: schema.useMobileUI === false ? false : rest.mobileUI
     };
 
+    // 用于全局变量刷新
+    props.data = this.tmpData || props.data;
+
     // style 支持公式
     if (schema.style) {
       (props as any).style = buildStyle(schema.style, detectData);

diff --git a/packages/amis-core/src/actions/CmptAction.ts b/packages/amis-core/src/actions/CmptAction.ts
@@ -42,6 +42,11 @@ export class CmptAction implements RendererAction {
 
     /** 如果args中携带path参数, 则认为是全局变量赋值, 否则认为是组件变量赋值 */
     if (action.actionType === 'setValue' && path && typeof path === 'string') {
+      if (path.startsWith('global.')) {
+        const topStore = renderer.props.topStore;
+        topStore?.updateGlobalVarValue(path.substring(7), action.args.value);
+      }
+
       const beforeSetData = event?.context?.env?.beforeSetData;
       if (beforeSetData && typeof beforeSetData === 'function') {
         const res = await beforeSetData(renderer, action, event);