diff --git a/packages/gi-assets-basic/package.json b/packages/gi-assets-basic/package.json
index 9961e6543..3b08925aa 100644
--- a/packages/gi-assets-basic/package.json
+++ b/packages/gi-assets-basic/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/gi-assets-basic",
-  "version": "2.4.20",
+  "version": "2.4.23",
   "description": "G6VP 基础资产包",
   "main": "lib/index.js",
   "module": "es/index.js",
diff --git a/packages/gi-assets-basic/src/components/RichContainer/Component.tsx b/packages/gi-assets-basic/src/components/RichContainer/Component.tsx
index 5da747404..21285eed7 100644
--- a/packages/gi-assets-basic/src/components/RichContainer/Component.tsx
+++ b/packages/gi-assets-basic/src/components/RichContainer/Component.tsx
@@ -1,5 +1,5 @@
 import { Handler } from '@antv/gi-common-components';
-import { Icon, useContainer, useContext, utils } from '@antv/gi-sdk';
+import { Icon, useContainer, useContext } from '@antv/gi-sdk';
 import { Button, Divider, Segmented, Select, Space } from 'antd';
 import { Resizable } from 're-resizable';
 import React, { memo, useEffect, useState } from 'react';
@@ -7,6 +7,7 @@ import $i18n from '../../i18n';
 import Header from './Header';
 import Toolbar from './Toolbar';
 import './index.less';
+
 const URL_SEARCH_KEY = 'ActiveAssetID';
 const visibleStyle: React.CSSProperties = {
   visibility: 'visible',
@@ -34,7 +35,7 @@ const RichContainer = props => {
   const { HAS_GRAPH, GISDK_ID } = context;
   const Containers = useContainer(context);
   const [state, setState] = React.useState<RichContainerState>({
-    activeKey: utils.searchParamOf(URL_SEARCH_KEY) || 'LanguageQuery',
+    activeKey: localStorage.getItem(URL_SEARCH_KEY) || 'LanguageQuery',
     viewMode: 'GISDK_CANVAS',
   });
   const { activeKey, viewMode } = state;
@@ -60,15 +61,24 @@ const RichContainer = props => {
     } else setWidth(0);
   }, [isExpanded]);
 
+  useEffect(()=>{
+    if (localStorage.getItem(URL_SEARCH_KEY)) {
+      setState(preState => {
+        return {
+          ...preState,
+          activeKey: localStorage.getItem(URL_SEARCH_KEY) as string,
+        };
+      });
+    }
+  },[localStorage.getItem(URL_SEARCH_KEY)])
+
   const toggleClick = () => {
     setIsExpanded(prev => !prev);
   };
-  const [NavbarLeftArea, NavbarRightArea, ViewArea, DataArea, FilterArea, StylingArea, CanvasArea] = Containers;
+  const [ NavbarLeftArea, NavbarRightArea, ViewArea, DataArea, FilterArea, StylingArea, CanvasArea, ConditionArea, TimeBarArea] = Containers;
 
   const handleChange = id => {
-    const { searchParams, path } = utils.getSearchParams(window.location);
-    searchParams.set(URL_SEARCH_KEY, id);
-    // window.location.hash = `${path}?${searchParams.toString()}`;
+    localStorage.setItem(URL_SEARCH_KEY, id)
 
     setState(preState => {
       return {
@@ -90,6 +100,7 @@ const RichContainer = props => {
       };
     });
   };
+
   const DATA_QUERY_ID = DataArea.components.map(item => item.id);
   const DATA_FILTER_ID = FilterArea.components.map(item => item.id);
   const DATA_QUERY_OPTIONS = DataArea.components.map(item => {
@@ -102,6 +113,7 @@ const RichContainer = props => {
   });
   const HAS_QUERY_VIEW = DATA_QUERY_ID.indexOf(activeKey) !== -1;
   const HAS_FILTER_VIEW = DATA_FILTER_ID.indexOf(activeKey) !== -1;
+  
 
   const onResizeStart = () => {
     setIsResizing(true);
@@ -180,6 +192,7 @@ const RichContainer = props => {
             <Button
               type={HAS_QUERY_VIEW ? 'primary' : 'text'}
               icon={<Icon type={DataArea.icon} />}
+              className='gi-richcontainer-query-button'
               style={{
                 display: 'flex',
                 justifyContent: 'center',
@@ -200,6 +213,7 @@ const RichContainer = props => {
             <Button
               type={HAS_FILTER_VIEW ? 'primary' : 'text'}
               icon={<Icon type={FilterArea.icon} />}
+              className='gi-richcontainer-filter-button'
               style={{
                 display: 'flex',
                 justifyContent: 'center',
@@ -253,6 +267,7 @@ const RichContainer = props => {
               enable={enable}
               onResizeStart={onResizeStart}
               onResizeStop={onResizeStop}
+              className='gi-richcontainer-side'
             >
               <div style={{ overflow: 'hidden' }}>
                 {HAS_QUERY_VIEW && (
@@ -263,7 +278,7 @@ const RichContainer = props => {
                   <Segmented block value={activeKey} options={DATA_FILTER_OPTIONS} onChange={handleChange} />
                 )}
 
-                {[...DataArea.components, ...FilterArea.components, ...StylingArea.components].map(item => {
+                {[...DataArea.components, ...FilterArea.components, ...StylingArea.components, ...ConditionArea.components].map(item => {
                   const isActive = activeKey === item.id;
                   return (
                     <div key={item.id} style={{ display: isActive ? 'block' : 'none' }}>
@@ -290,6 +305,13 @@ const RichContainer = props => {
             }}
           >
             {children}
+            <div className='gi-rich-container-timebar' style={{ position: 'absolute', bottom: 0, width: `calc(100vw - ${width}px)` }}>  
+              {TimeBarArea.components.map(item => {
+                return (
+                  <item.component key={item.id} {...item.props} />
+                );
+              })}
+            </div>
           </div>
         </div>
         {ViewArea.components.map(item => {
diff --git a/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx b/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx
index 05dcb8975..67860df9b 100644
--- a/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx
+++ b/packages/gi-assets-basic/src/components/RichContainer/Toolbar.tsx
@@ -28,7 +28,7 @@ const Toolbar = (props: ToolbarProps) => {
       <span style={{ padding: '0px 8px 0px 6px', color: '#98989D' }}>{title}</span>
       {options.map(item => {
         const isActive = value === item.id;
-        const { id, props: itemProps, component: ItemComponent } = item;
+        const { id, props: itemProps, component: ItemComponent, info } = item;
         const { GIAC_CONTENT } = itemProps;
         const title = GIAC_CONTENT ? GIAC_CONTENT.title : 'EMPTY';
         const buttonType = isActive ? 'primary' : 'text';
@@ -48,6 +48,7 @@ const Toolbar = (props: ToolbarProps) => {
               type={buttonType}
               icon={<Icon type={icon} />}
               key={id}
+              className={info.className}
               style={{
                 display: 'flex',
                 justifyContent: 'center',
diff --git a/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts b/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts
index cddea5c15..ef56fa9e8 100644
--- a/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts
+++ b/packages/gi-assets-basic/src/components/RichContainer/registerMeta.ts
@@ -136,6 +136,50 @@ const registerMeta = context => {
           default: [],
         },
       },
+      {
+        id: 'condition-content',
+        name:'条件展示容器',
+        required: true,
+        GI_CONTAINER: {
+          title: $i18n.get({ id: 'basic.components.RichContainer.registerMeta.IntegratedComponents', dm: '集成组件' }),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {
+            mode: 'multiple',
+          },
+          enum: GIAC_CONTENT_ITEMS,
+          default: [],
+        },
+      },
+      {
+        id: 'timebar-container-bottom',
+        name: $i18n.get({ id: 'basic.components.RichContainer.registerMeta.BottomContainer', dm: '底部时序容器' }),
+        required: true,
+        GI_CONTAINER: {
+          title: $i18n.get({ id: 'basic.components.RichContainer.registerMeta.BottomAssembly', dm: '顶部时序组件' }),
+          type: 'string',
+          'x-decorator': 'FormItem',
+          'x-component': 'Select',
+          'x-component-props': {},
+          enum: GIAC_CONTENT_ITEMS,
+          default: [],
+        },
+        height: {
+          type: 'number',
+          title: $i18n.get({ id: 'basic.components.RichContainer.registerMeta.BottomHeight', dm: '容器高度' }),
+          'x-component': 'NumberPicker',
+          'x-decorator': 'FormItem',
+          default: 150,
+        },
+        padding: {
+          type: 'string',
+          title: $i18n.get({ id: 'basic.components.RichContainer.registerMeta.InternalSpacing', dm: '内部间距' }),
+          'x-component': 'Input',
+          'x-decorator': 'FormItem',
+          default: '0px 0px',
+        },
+      },
     ],
     isSheet: {
       title: '多页签',