diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6d06e0ec3244a106e95d7bd16eca757c012f5720..289fe4a48cfc00d6e782eab7e22f2a7871af73da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,8 @@
 - 卡片部件支持项样式表配置
 - 向导面板支持步骤样式表
 - 日历新增支持默认选中天与月度日历
+- 数据关系分页支持onTabChange事件，并添加setActive能力
+- 数据关系分页栏支持侧边显示
 
 ### Change
 
@@ -54,6 +56,9 @@
 - 编辑表单样式变量抽取
 - 优化门户部件头部的呈现样式
 - 优化多数据部件及排序设置及设置容器等组件样式，不直接用基础css变量，各组件定义专属变量
+- 数据关系分页栏样式变量抽取
+- 日历部件样式变量抽取，并支持暗色主题
+- 视图消息添加padding
 
 ### Fixed
 
diff --git a/src/common/view-message/view-message.scss b/src/common/view-message/view-message.scss
index 8605fe98f2486effa0d99b5049b925886898f74e..c5b78a9c345c1efc449c04a82aaf799cc6ea0a18 100644
--- a/src/common/view-message/view-message.scss
+++ b/src/common/view-message/view-message.scss
@@ -5,6 +5,7 @@ $view-message: (
     warn-color: getCssVar(color, warning),
     error-bg: getCssVar(color, danger, light, default),
     error-color: getCssVar(color, danger),
+    margin: getCssVar(spacing, tight) getCssVar(spacing, base),
 );
 
 @include b(view-message) {
@@ -21,4 +22,7 @@ $view-message: (
         background-color: getCssVar(view-message, error-bg);
         color: getCssVar(view-message, error-color);
     }
+    .van-notice-bar {
+        margin: getCssVar(view-message, margin);
+    }
 }
\ No newline at end of file
diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss
index 4d08d02fb9f47866d970e645680f90348d8253ef..d68c942b4bdc2b69feac138b692e58bc1174192d 100644
--- a/src/control/calendar/calendar.scss
+++ b/src/control/calendar/calendar.scss
@@ -1,42 +1,30 @@
 $control-calendar: (
   text-color: getCssVar(color-text-0),
-  hover-bg-color: getCssVar(color, fill, 0),
-  active-bg-color: getCssVar(color, fill, 0),
-  border-color: getCssVar(color, primary, active),
   font-size: getCssVar(font-size, small),
-  item-padding: getCssVar(spacing, tight),
-  border-radius: getCssVar(border-radius, small),
-  margin: getCssVar(spacing, extra-tight),
-  item-margin: getCssVar(spacing, tight) 0,
+  item-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
+  mark-height: getCssVar(spacing, tight),
+  mark-width: getCssVar(spacing, tight),
+  mark-color: getCssVar(color, danger),
+  item-border-gap: getCssVar(spacing, tight),
+  item-border: 1px solid getCssVar(color, border),
+  header-caption-padding: getCssVar(spacing, base) getCssVar(spacing, tight),
+  header-caption-bg: getCssVar(color, bg, 1),
+  toolbar-color: getCssVar(color, primary),
+  toolbar-bg: getCssVar(color, bg, 0),
+  toolbar-gap: getCssVar(spacing, base),
+  calendar-bg: getCssVar(color, bg, 1),
+  calendar-main-color: getCssVar(color, primary),
+  calendar-color: getCssVar(color, text, 0),
+  calendar-disabled-color: getCssVar(color, disabled, text),
+  calendar-active-color: getCssVar(color, primary),
+  calendar-active-bg: getCssVar(color, primary, light, default),
 );
 
 @include b(control-calendar) {
   @include set-component-css-var(control-calendar, $control-calendar);
 
-  --van-cell-right-icon-color: var(--van-gray-6);
-  --van-padding-md: #{getCssVar(spacing, tight)};
-
   display: flex;
   flex-direction: column;
-  width: 100%;
-  height: 100%;
-
-  .calendar_day {
-    padding: getCssVar('spacing', 'extra-tight') 0;
-  }
-
-  @include e(calendar-item) {
-    display: flex;
-    gap: getCssVar(spacing, tight);
-    align-items: center;
-    padding: getCssVar(control-calendar, item-padding);
-  }
-
-  @include e(icon) {
-    width: rem(10px);
-    height: rem(10px);
-    border-radius: 50%;
-  }
 
   @include e(day) {
     position: relative;
@@ -51,73 +39,80 @@ $control-calendar: (
     @include flex(row);
 
     position: absolute;
-    bottom: rem(-4px);
+    bottom: 0;
     left: 0;
-    flex-grow: 1;
     justify-content: space-around;
     width: 100%;
 
     @include m((item)) {
-      width: rem(4px);
-      height: rem(4px);
-      background-color: red;
-      border-radius: rem(50px);
+      width: getCssVar(control-calendar, mark-width);
+      height: getCssVar(control-calendar, mark-height);
+      background-color: getCssVar(control-calendar, mark-color);
+      border-radius: 50%;
     }
   }
 
   @include b(control-calendar-item) {
-    @include set-component-css-var(control-calendar, $control-calendar);
-
-    // width: calc(100% - getCssVar(control-calendar, item-margin) * 2);
     height: auto;
+    padding: getCssVar(control-calendar, item-padding);
 
     // 默认项样式 不渗透到布局面板
     @include m(default) {
-      padding: getCssVar(control-calendar, item-padding);
       overflow: hidden;
       font-size: getCssVar(control-calendar, font-size);
-      line-height: 25px;
       color: getCssVar(control-calendar, text-color);
       text-overflow: ellipsis;
       white-space: nowrap;
-      cursor: pointer;
+    }
+    @include m(panel) {
+      position: relative;
+      &::after {
+        position: absolute;
+        content: " ";
+        pointer-events: none;
+        right: getCssVar(control-calendar, item-border-gap);
+        bottom: 0;
+        left: getCssVar(control-calendar, item-border-gap);
+        border-bottom: getCssVar(control-calendar, item-border);
+      }
     }
   }
-}
-
-@include b(control-calendar-content) {
-  width: 100%;
-}
-
-@include b(control-calendar-date-text) {
-  @include set-component-css-var(control-calendar, $control-calendar);
-
-  padding: getCssVar(control-calendar, item-padding);
-  margin-top: 0;
-}
-
-@include b(control-calendar-day) {
-  height: fit-content;
-}
 
-@include b(control-calendar-content-header) {
-  @include set-component-css-var(control-calendar, $control-calendar);
 
-  display: flex;
-  gap: getCssVar(control-calendar, item-padding);
-  align-items: center;
+  // 日历插件样式
+  .hash-calendar {
+    --hash-calendar-main-font-color: #{getCssVar(control-calendar, calendar-color)};
+    --hash-calendar-main-color: #{getCssVar(control-calendar, calendar-main-color)};
+    --hash-calendar-disabled-font-color: #{getCssVar(control-calendar, calendar-disabled-color)};
+    .calendar_content {
+      background-color: getCssVar(control-calendar, calendar-bg);
+    }
+    .calendar_week,.calendar_group_li {
+      background-color: getCssVar(control-calendar, calendar-bg);
+    }
+    .calendar_day_checked {
+      color: getCssVar(control-calendar, calendar-active-color);
+      background-color: getCssVar(control-calendar, calendar-active-bg);
+    }
+  }
 }
 
 @include b(control-calendar-footer) {
-  flex-grow: 1;
+  flex: auto;
   min-height: 0;
 
   .van-tabs {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .van-tabs__wrap {
+    flex: none;
   }
 
   .van-tabs__content {
-    height: calc(100% - var(--van-tabs-line-height));
+    flex: auto;
     overflow-y: auto;
   }
 
@@ -127,45 +122,21 @@ $control-calendar: (
   }
 }
 
-@include b(control-calendar-title) {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .van-field {
-    width: 50%;
-  }
-
-  input {
-    font-weight: 100;
-    text-align: inherit;
-    background-color: transparent;
-    border: rem(1px) getCssVar(color, border) solid;
-    box-shadow: none;
-  }
-  span {
-    top: 0;
-    left: 0;
-  }
-}
-
 @include b(control-calendar-header-toolbar) {
   width: 100%;
   display: flex;
   @include e('select-day') {
-    padding: getCssVar(spacing, base) getCssVar(spacing, tight);
-    background-color: getCssVar(color, bg, 1);
-    border-radius: 2px;
-    font-weight: getCssVar(font-weight, bold);
+    padding: getCssVar(control-calendar, header-caption-padding);
+    background-color: getCssVar(control-calendar, header-caption-bg);
   }
   @include e('switch-toolbar') {
-    flex: 1;
+    flex: auto;
     align-items: center;
     display: flex;
     justify-content: end;
-    color: getCssVar(color, primary);
-    gap: getCssVar(spacing, base);
-    padding-right: getCssVar(spacing, base);
+    color: getCssVar(control-calendar, toolbar-color);
+    gap: getCssVar(control-calendar, toolbar-gap);
+    padding-right: getCssVar(control-calendar, toolbar-gap);
+    background-color: getCssVar(control-calendar, toolbar-bg);
   }
 }
diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx
index 162e7cee5bb7c2fdf164e24eccd76913a6d72fb8..3a489a5cbd9d717eed746bacb6ee7439adf0921e 100644
--- a/src/control/calendar/calendar.tsx
+++ b/src/control/calendar/calendar.tsx
@@ -265,6 +265,7 @@ export const CalendarControl = defineComponent({
       });
       const itemClass = [
         this.ns.b('item'),
+        this.ns.bm('item', 'panel'),
         this.ns.is('active', findIndex !== -1),
       ];
       return (
diff --git a/src/control/drtab/drtab.controller.ts b/src/control/drtab/drtab.controller.ts
index 9624d0fa8fc2df9814c6b12258bd35841af7a8fd..03ed2135ba7d7cc5542dcf89981fd32aa3fd8def 100644
--- a/src/control/drtab/drtab.controller.ts
+++ b/src/control/drtab/drtab.controller.ts
@@ -31,8 +31,9 @@ export class DRTabController
   extends ControlController<IDEDRTab, IDRTabState, IDRTabEvent>
   implements IDRTabController
 {
-  setActive(_name: string): void {
-    throw new Error('Method not implemented.');
+  setActive(name: string): void {
+    this.state.activeName = name;
+    this.handleTabChange();
   }
 
   /**
diff --git a/src/control/drtab/drtab.scss b/src/control/drtab/drtab.scss
index 6cff5fc80120a4bc0165e9670582c1033c59871f..7bb408de6be264e1d950a79cdcf6bc798c1d72da 100644
--- a/src/control/drtab/drtab.scss
+++ b/src/control/drtab/drtab.scss
@@ -1,112 +1,56 @@
 $control-drtab: (
   'active-color': getCssVar('color', 'primary'),
+  'side-padding': getCssVar(spacing, base),
+  bg: getCssVar(color, bg, 1),
+  font-size: getCssVar(font-size, header-4),
+  popover-item-gap: getCssVar(spacing, extra, tight),
+  popover-padding: getCssVar(spacing, extra, loose),
 );
 
 @include b(control-drtab) {
   @include set-component-css-var('control-drtab', $control-drtab);
-  padding: getCssVar(spacing, tight);
-  background-color: getCssVar(view, bg-color);
+  background-color: getCssVar(control-drtab, bg);
 
-  .van-button {
-    border: none;
-    height: 100%;
-    background-color: transparent;
-
-    .van-button__text {
-      display: flex;
-      align-items: center;
-      line-height: getCssVar(font-size, header-4);
-      font-size: getCssVar(font-size, header-4);
-      gap: getCssVar(spacing, extra-tight);
-    }
-  }
-
-  @include e(tab-item) {
-    @include m(title) {
-      display: flex;
-      align-items: center;
-      gap: getCssVar(spacing, extra-tight);
-      .#{bem(icon)} {
-        @include flex(row, center, center);
-
-        width: getCssVar(width-icon, medium);
-        height: getCssVar(width-icon, medium);
-        font-size: getCssVar(width-icon, medium);
-      }
-    }
+  @include m(top_dropdownlist) {
+    @include flex(row, center, center);
   }
 
-  @include e(tabs) {
-    .van-tab--active {
-      color: getCssVar(control-drtab, active-color);
-    }
-    .van-tabs__line {
-      background-color: getCssVar(control-drtab, active-color);
+  @include e(dropdown-list) {
+    border: none;
+    font-size: getCssVar(control-drtab, font-size);
+    @include m(caption) {
+      font-size: getCssVar(control-drtab, font-size);
     }
   }
 
   @include e(popover) {
+    @include set-component-css-var('control-drtab', $control-drtab);
+    display: flex;
+    flex-direction: column;
+    padding-right: getCssVar(control-drtab, popover-padding);
     @include m(item) {
-      display: flex;
-      cursor: pointer;
-      position: relative;
-      align-items: center;
-      box-sizing: border-box;
-      height: var(--van-popover-action-height);
-      padding: 0 getCssVar(spacing, base-loose);
-      font-size: getCssVar(font-size, header-5);
-      gap: getCssVar(spacing, tight);
-
-      .#{bem(icon)} {
+      border: none;
+      .van-button__text {
         @include flex(row, center, center);
-
-        width: getCssVar(width-icon, medium);
-        height: getCssVar(width-icon, medium);
-        font-size: getCssVar(width-icon, medium);
-      }
-
-      .caption {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        gap: getCssVar(spacing, tight);
+        gap: getCssVar(control-drtab, popover-item-gap);
       }
-
-      ion-icon {
-        color: getCssVar(color, primary);
+      .van-button__content {
+        justify-content: left;
       }
-
-      @include when(disabled) {
-        pointer-events: none;
-        cursor: not-allowed;
-        color: getCssVar(color, disabled-text);
-        background-color: getCssVar(color, disabled-bg);
+      .van-button__icon {
+        color: getCssVar(control-drtab, active-color);
+        position: absolute;
+        right: calc(-0.5 * getCssVar(control-drtab, popover-padding));
       }
     }
   }
 
-  @include e(tabs) {
-    & > .van-tabs__wrap {
-      .van-tab--line.van-tab--active {
-        .van-tab__text {
-          position: relative;
-          line-height: var(--van-tabs-line-height);
-          color: getCssVar(color, primary);
-          &::after {
-            content: '';
-            display: block;
-            width: 100%;
-            height: rem(2px);
-            background-color: getCssVar(color, primary);
-            position: absolute;
-            bottom: 0;
-            border-radius: var(--van-tabs-bottom-bar-height);
-          }
-        }
-      }
-      .van-tabs__line {
-        display: none;
-      }
+  @include e(sidebar) {
+    @include m(left) {
+      margin-left: getCssVar(control-drtab, side-padding);
+    }
+    @include m(right) {
+      margin-right: getCssVar(control-drtab, side-padding);
     }
   }
 }
diff --git a/src/control/drtab/drtab.tsx b/src/control/drtab/drtab.tsx
index 829c60ab0626debf0019b8a21f6f090a3fc9a42e..9b7e7c56248e100dc43d5a1f0d9a41bffe155f40 100644
--- a/src/control/drtab/drtab.tsx
+++ b/src/control/drtab/drtab.tsx
@@ -58,6 +58,9 @@ export const DRTabControl = defineComponent({
       return c.state.drTabPages.find(tab => tab.tag === c.state.activeName);
     });
 
+    // 激活下标，侧边栏使用
+    const activeIndex = ref(0);
+
     const fn = (counter: IData) => {
       counterData.value = counter;
     };
@@ -68,6 +71,18 @@ export const DRTabControl = defineComponent({
       }
     });
 
+    const emitChange = () => {
+      const { activeName } = c.state;
+      const drTabItem = c.state.drTabPages.find(
+        item => item.tag === activeName,
+      );
+      if (drTabItem) {
+        c.evt.emit('onTabChange', {
+          data: drTabItem,
+        });
+      }
+    };
+
     /**
      * 分页改变
      * @param name
@@ -76,6 +91,7 @@ export const DRTabControl = defineComponent({
       c.state.activeName = name;
       showPopover.value = false;
       c.handleTabChange();
+      emitChange();
     };
 
     /**
@@ -91,10 +107,17 @@ export const DRTabControl = defineComponent({
       c.counter?.offChange(fn);
     });
 
+    const onSidebarChange = (index: number) => {
+      activeIndex.value = index;
+      const value = c.state.drTabPages[index].tag;
+      c.state.activeName = value;
+      c.handleTabChange();
+      emitChange();
+    };
+
     const renderDropdownList = () => {
       return (
         <van-popover
-          class={ns.e('dropdown-list')}
           placement={'bottom-start'}
           v-model:show={showPopover.value}
         >
@@ -105,12 +128,14 @@ export const DRTabControl = defineComponent({
                   {c.state.drTabPages.map(tab => {
                     if (!tab.hidden) {
                       return (
-                        <div
+                        <van-button
                           class={[
                             ns.em('popover', 'item'),
                             ns.is('disabled', tab.disabled),
                           ]}
                           onClick={() => onTabChange(tab.tag)}
+                          icon={tab.tag === c.state.activeName ? 'success' : ''}
+                          icon-position='right'
                         >
                           {tab.sysImage && <iBizIcon icon={tab.sysImage} />}
                           <div class={'caption'}>
@@ -122,10 +147,7 @@ export const DRTabControl = defineComponent({
                               />
                             )}
                           </div>
-                          {tab.tag === c.state.activeName && (
-                            <ion-icon name='checkmark-outline'></ion-icon>
-                          )}
-                        </div>
+                        </van-button>
                       );
                     }
                     return null;
@@ -135,7 +157,12 @@ export const DRTabControl = defineComponent({
             },
             reference: () => {
               return (
-                <van-button onClick={onChangePopover}>
+                <van-button
+                  onClick={onChangePopover}
+                  class={ns.e('dropdown-list')}
+                  icon='arrow-down'
+                  icon-position='right'
+                >
                   {activeTab.value?.sysImage && (
                     <iBizIcon
                       class={ns.em('dropdown-list', 'icon')}
@@ -151,7 +178,6 @@ export const DRTabControl = defineComponent({
                       />
                     )}
                   </span>
-                  <ion-icon name='chevron-down-outline'></ion-icon>
                 </van-button>
               );
             },
@@ -161,6 +187,32 @@ export const DRTabControl = defineComponent({
     };
 
     const renderDefault = () => {
+      const { drTabPages } = c.state;
+      if (['left', 'right'].includes(tabPosition)) {
+        return (
+          <van-sidebar
+            class={[ns.b(), ns.e('sidebar'), ns.em('sidebar', tabPosition)]}
+            v-model={activeIndex.value}
+            onChange={onSidebarChange}
+          >
+            {drTabPages.map(tab => {
+              if (!tab.hidden) {
+                return (
+                  <van-sidebar-item
+                    title={tab.caption}
+                    badge={
+                      tab.counterId
+                        ? counterData.value[tab.counterId]
+                        : undefined
+                    }
+                  ></van-sidebar-item>
+                );
+              }
+              return null;
+            })}
+          </van-sidebar>
+        );
+      }
       return (
         <van-tabs
           class={ns.e('tabs')}
@@ -213,7 +265,10 @@ export const DRTabControl = defineComponent({
   render() {
     const { isCreated, isCalculatedPermission } = this.c.state;
     return (
-      <iBizControlBase controller={this.c} class={this.ns.b()}>
+      <iBizControlBase
+        controller={this.c}
+        class={[this.ns.b(), this.ns.m(this.tabPosition)]}
+      >
         {isCreated &&
         isCalculatedPermission &&
         this.tabPosition === 'top_dropdownlist'