diff --git a/src/views/workflow/task/TaskForm.vue b/src/views/workflow/task/TaskForm.vue
index 35b47f9..aea5619 100644
--- a/src/views/workflow/task/TaskForm.vue
+++ b/src/views/workflow/task/TaskForm.vue
@@ -592,7 +592,7 @@
     .workflow-form {
       &__footer{
         height: 66px;
-        background: #fff;
+        background: @component-background;
         display: flex;
         gap: 11px;
         flex-flow: row nowrap;
diff --git a/src/views/workflow/task/popups/UserPicker/index.vue b/src/views/workflow/task/popups/UserPicker/index.vue
index 6f6a256..2c6ceb0 100644
--- a/src/views/workflow/task/popups/UserPicker/index.vue
+++ b/src/views/workflow/task/popups/UserPicker/index.vue
@@ -11,9 +11,9 @@
   import { listUser } from '/@/api/platform/system/controller/user';
   import { columns, searchFormSchema } from './userPicker.data';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-  import { PageWrapper } from '/@/components/Page';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { ScrollContainer } from '/@/components/Container';
+  import { useAppStore } from '/@/store/modules/app';
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
@@ -25,6 +25,8 @@
   }
 
   /** 通用变量统一声明区域 */
+  const appStore = useAppStore();
+  const darkMode = appStore.getDarkMode;
   const { prefixCls } = useDesign('user-picker');
   const state = reactive<TableState>({
     // 选中数组
@@ -141,25 +143,28 @@
       @ok="handleSubmit"
       @register="registerModal"
     >
-      <PageWrapper
-        contentClass="flex"
-        contentFullHeight
-        dense
-      >
-        <DeptTree class="sidebar w-1/6 xl:w-1/7" @select="handleSelect"/>
-        <BasicTable
-          class="w-3/6 xl:w-5/7"
-          @register="registerTable"
-          @selection-change="handleSelectionChange"
-        />
-        <ScrollContainer class="w-1/6 xl:w-1/7">
-          <div ref="spinRef">
-            <a-tag color="pink">pink</a-tag>
-            <a-tag color="pink">pink</a-tag>
-            <a-tag color="pink">pink</a-tag>
-          </div>
-        </ScrollContainer>
-      </PageWrapper>
+      <a-layout>
+        <a-layout-sider :width="250" :theme="darkMode">
+          <DeptTree class="sidebar" @select="handleSelect"/>
+        </a-layout-sider>
+        <a-layout-content>
+          <BasicTable @register="registerTable" @selection-change="handleSelectionChange"/>
+        </a-layout-content>
+        <a-layout-sider :theme="darkMode">
+          <ScrollContainer class="pl-2">
+            <div v-loading="true">
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+              <a-tag color="pink">pink</a-tag>
+            </div>
+          </ScrollContainer>
+        </a-layout-sider>
+      </a-layout>
     </BasicModal>
   </div>
 </template>
@@ -169,7 +174,7 @@
 
   .@{prefix-cls} {
     .sidebar {
-      max-height: 650px;
+      max-height: 720px;
     }
 
     :deep(.ant-modal) {
@@ -177,8 +182,7 @@
     }
 
     .scroll-container {
-      width: auto;
-      height: 650px;
+      max-height: 720px;
     }
   }