feat: Tabs组件activeKey支持上下文变量 (#4432)

docs/zh-CN/components/table.md

@@ -1826,7 +1826,7 @@ popOver 的其它配置请参考 [popover](./popover)
 | source           | `string`                                 | `${items}`                | 数据源, 绑定当前环境变量                                                  |
 | affixHeader      | `boolean`                                | `true`                    | 是否固定表头                                                              |
 | columnsTogglable | `auto` 或者 `boolean`                    | `auto`                    | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启                   |
-| placeholder      | `string` 或者 `SchemaTpl`                 | `暂无数据`                | 当没数据的时候的文字提示                                                  |
+| placeholder      | `string` 或者 `SchemaTpl`                | `暂无数据`                | 当没数据的时候的文字提示                                                  |
 | className        | `string`                                 | `panel-default`           | 外层 CSS 类名                                                             |
 | tableClassName   | `string`                                 | `table-db table-striped`  | 表格 CSS 类名                                                             |
 | headerClassName  | `string`                                 | `Action.md-table-header`  | 顶部外层 CSS 类名                                                         |

docs/zh-CN/components/tabs.md

@@ -497,6 +497,36 @@ order: 68
 }
 ```
 
+### 动态设置选项卡
+
+```schema
+{
+    "type": "page",
+    "data": {
+        "key": "tab2"
+    },
+    "body": [
+        {
+            "type": "tabs",
+            "activeKey": "${key}",
+            "tabs": [
+                {
+                    "title": "Tab 1",
+                    "hash": "tab1",
+                    "tab": "Content 1"
+                },
+
+                {
+                    "title": "Tab 2",
+                    "hash": "tab2",
+                    "tab": "Content 2"
+                }
+            ]
+        }
+    ]
+}
+```
+
 ## 图标
 
 通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。

src/renderers/Tabs.tsx

@@ -18,7 +18,8 @@ import {
   BaseSchema,
   SchemaClassName,
   SchemaCollection,
-  SchemaIcon
+  SchemaIcon,
+  SchemaExpression
 } from '../Schema';
 import {ActionSchema} from './Action';
 import {filter} from '../utils/tpl';
@@ -194,11 +195,16 @@ export interface TabsSchema extends BaseSchema {
    * 自定义增加按钮文案
    */
   addBtnText?: string;
+
+  /**
+   * 默认激活的选项卡，hash值或索引值，支持使用表达式
+   */
+  activeKey?: SchemaExpression;
 }
 
 export interface TabsProps
   extends RendererProps,
-    Omit<TabsSchema, 'className' | 'contentClassName'> {
+    Omit<TabsSchema, 'className' | 'contentClassName' | 'activeKey'> {
   activeKey?: string | number;
   location?: any;
   tabRender?: (tab: TabSchema, props: TabsProps, index: number) => JSX.Element;
@@ -327,6 +333,8 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
   componentDidUpdate(preProps: TabsProps, prevState: any) {
     const props = this.props;
     let localTabs = this.state.localTabs;
+    const prevActiveKey = tokenize(preProps.defaultActiveKey, preProps.data);
+    const activeKey = tokenize(props.defaultActiveKey, props.data);
 
     // 响应外部修改 tabs
     const isTabsModified = isObjectShallowModified(
@@ -409,6 +417,26 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
         prevKey: undefined,
         activeKey: (this.activeKey = activeKey)
       });
+    } else if (prevActiveKey !== activeKey) {
+      if (activeKey == null) {
+        return;
+      }
+
+      let newActivedKey = null;
+      const tab = find(localTabs, item => item.hash === activeKey);
+
+      if (tab) {
+        newActivedKey = tab.hash;
+      } else if (typeof activeKey === 'number' && localTabs[activeKey]) {
+        newActivedKey = activeKey;
+      }
+
+      if (newActivedKey) {
+        this.setState({
+          prevKey: prevActiveKey,
+          activeKey: (this.activeKey = newActivedKey)
+        });
+      }
     }
 
     this.autoJumpToNeighbour(this.activeKey);
@@ -578,7 +606,9 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
       }
     });
     // 获取激活元素项
-    const tab = localTabs?.find((item, index) => key === (item.hash ? item.hash : index));
+    const tab = localTabs?.find(
+      (item, index) => key === (item.hash ? item.hash : index)
+    );
 
     const rendererEvent = await dispatchEvent(
       'change',