diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembersNnt.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembers.tsx
similarity index 62%
rename from packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembersNnt.tsx
rename to packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembers.tsx
index 9065035a2..141ed4653 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembersNnt.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/AddMembers.tsx
@@ -1,11 +1,10 @@
 import React, { useContext, useRef } from 'react';
 import { SchemaComponent, useAPIClient, useResourceActionContext } from '@tachybase/client';
 
-import { contextK } from '../context/contextK';
-import { k } from '../others/k';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 import { schemaAddMembers } from '../schema/addMembers.schema';
 
-export const AddMembersNnt = () => {
+export const AddMembers = () => {
   const { department, useAddMembersAction, handleSelect } = useAction();
   return (
     <SchemaComponent
@@ -20,28 +19,15 @@ export const AddMembersNnt = () => {
 };
 
 function useAction() {
-  const { department } = useContext(contextK);
+  const { department } = useContext(DepartmentsContext);
   const { refresh } = useResourceActionContext();
   const ref = useRef([]);
   const api = useAPIClient();
   const useAddMembersAction = () => ({
-    run() {
-      return k(this, null, function* () {
-        const x = ref.current;
-
-        x != null &&
-          x.length &&
-          (yield api.resource('departments.members', department.id).add({ values: x }), (ref.current = []), refresh());
-      });
-    },
-  });
-
-  const useAddMembersAction2 = () => ({
     async run() {
       const x = ref.current;
-      if (x?.length > 0) {
-        await api.resource('departments.members', department.id).add({ values: x });
-        ref.current = [];
+      if (x?.length) {
+        await api.resource('departments.members', department.id).add({ values: x }), (ref.current = []);
         refresh();
       }
     },
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentEEE.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentEEE.tsx
index d36e43983..1d0985e40 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentEEE.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentEEE.tsx
@@ -5,15 +5,15 @@ import { UserOutlined } from '@ant-design/icons';
 import { Button, Divider, Row, theme } from 'antd';
 
 import { useTranslation } from '../../../locale';
-import { contextK } from '../context/contextK';
-import { ContextNProvider } from '../context/contextN';
+import { DepartmentsContext } from '../context/DepartmentsContext';
+import { DepartmentsExpandedContextProvider } from '../context/DepartmentsExpandedContext';
 import { useCreateDepartment } from '../hooks/useCreateDepartment';
-import { useHooksG } from '../hooks/useHooksG';
-import { useUpdateDepartmentLe } from '../hooks/useUpdateDepartmentLe';
+import { useDepTree2 } from '../hooks/useDepTree2';
+import { useUpdateDepartment } from '../hooks/useUpdateDepartment';
 import { ComponentSe } from './ComponentSe';
 import { ComponentX } from './ComponentX';
-import { ComponentXxe } from './ComponentXxe';
 import { DepartmentOwnersField } from './DepartmentOwnersField';
+import { NewDepartment } from './NewDepartment';
 
 interface drawerState {
   node?: object;
@@ -21,14 +21,14 @@ interface drawerState {
 }
 
 export const ComponentEEE = () => {
-  const { t: tval } = useTranslation();
+  const { t } = useTranslation();
 
   const [visible, setVisible] = useState(false);
   const [drawer, setDrawer] = useState<drawerState>({});
 
-  const { department, setDepartment } = useContext(contextK);
+  const { department, setDepartment } = useContext(DepartmentsContext);
   const { token } = theme.useToken();
-  const m = useHooksG({
+  const m = useDepTree2({
     label: ({ node }) => <ComponentX.Item node={node} setVisible={setVisible} setDrawer={setDrawer} />,
   });
 
@@ -36,10 +36,10 @@ export const ComponentEEE = () => {
     <SchemaComponentOptions
       scope={{
         useCreateDepartment,
-        useUpdateDepartment: useUpdateDepartmentLe,
+        useUpdateDepartment,
       }}
     >
-      <ContextNProvider value={m}>
+      <DepartmentsExpandedContextProvider value={m}>
         <Row>
           <ComponentSe />
           <Button
@@ -55,9 +55,9 @@ export const ComponentEEE = () => {
             }}
             block={true}
           >
-            {tval('All users')}
+            {t('All users')}
           </Button>
-          <ComponentXxe />
+          <NewDepartment />
         </Row>
         <Divider style={{ margin: '12px 0' }} />
         <ComponentX />
@@ -70,7 +70,7 @@ export const ComponentEEE = () => {
           <RecordProvider record={drawer.node || {}}>
             <SchemaComponent
               scope={{
-                t: tval,
+                t,
               }}
               components={{
                 DepartmentOwnersField,
@@ -79,48 +79,7 @@ export const ComponentEEE = () => {
             />
           </RecordProvider>
         </ActionContextProvider>
-      </ContextNProvider>
+      </DepartmentsExpandedContextProvider>
     </SchemaComponentOptions>
   );
-
-  // return jsx(SchemaComponentOptions, {
-  //   scope: {
-  //     useCreateDepartment: useCreateDepartment,
-  //     useUpdateDepartment: useUpdateDepartmentLe,
-  //   },
-  //   children: jsxs(contextN.Provider, {
-  //     value: m,
-  //     children: [
-  //       jsxs(Row, {
-  //         children: [
-  //           jsx(ComponentSe, {}),
-  //           jsx(Button, {
-  //             type: 'text',
-  //             icon: jsx(UserOutlined, {}),
-  //             style: { textAlign: 'left', marginBottom: '5px', background: c ? '' : x.colorBgTextHover },
-  //             onClick: () => {
-  //               i(null);
-  //             },
-  //             block: true,
-  //             children: e('All users'),
-  //           }),
-  //           jsx(ComponentXxe, {}),
-  //         ],
-  //       }),
-  //       jsx(Divider, { style: { margin: '12px 0' } }),
-  //       jsx(ComponentX, {}),
-  //       jsx(ActionContextProvider, {
-  //         value: { visible: t, setVisible: o },
-  //         children: jsx(RecordProvider, {
-  //           record: a.node || {},
-  //           children: jsx(SchemaComponent, {
-  //             scope: { t: e },
-  //             components: { DepartmentOwnersField: DepartmentOwnersField },
-  //             schema: a.schema || {},
-  //           }),
-  //         }),
-  //       }),
-  //     ],
-  //   }),
-  // });
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentIit.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentIit.tsx
index 3c9aca4c2..87e7773d5 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentIit.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentIit.tsx
@@ -4,7 +4,7 @@ import { SchemaComponent, useResourceActionContext } from '@tachybase/client';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 import { useTranslation } from '../../../locale';
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 import { useBulkRemoveMembersAction } from '../hooks/useBulkRemoveMembersAction';
 import { useMembersDataSource } from '../hooks/useMembersDataSource';
 import { useRemoveMemberAction } from '../hooks/useRemoveMemberAction';
@@ -13,14 +13,14 @@ import { getSchemaHe } from '../schema/getSchemaHe';
 import { schemaWe } from '../schema/schemaWe';
 import { schemaZe } from '../schema/schemaZe';
 import { useFilterActionPropsZ } from '../scopes/useFilterActionPropsZ';
-import { AddMembersNnt } from './AddMembersNnt';
+import { AddMembers } from './AddMembers';
 import { DepartmentFieldYe } from './DepartmentFieldYe';
 import { IsOwnerFieldQe } from './IsOwnerFieldQe';
 import { UserDepartmentsFieldOot } from './UserDepartmentsFieldOot';
 
 export const ComponentIit = () => {
   const { t: tval } = useTranslation();
-  const { department, user } = useContext(contextK);
+  const { department, user } = useContext(DepartmentsContext);
   const { data, setState } = useResourceActionContext();
 
   const MemberActions = () => (department ? <SchemaComponent schema={schemaZe} /> : null);
@@ -55,7 +55,7 @@ export const ComponentIit = () => {
         }}
         components={{
           MemberActions: MemberActions,
-          AddMembers: AddMembersNnt,
+          AddMembers: AddMembers,
           RowRemoveAction: RowRemoveAction,
           DepartmentField: DepartmentFieldYe,
           IsOwnerField: IsOwnerFieldQe,
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentSe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentSe.tsx
index c9a3201d9..6ec905205 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentSe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentSe.tsx
@@ -1,13 +1,13 @@
-import { useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { createStyles, useAPIClient, useRequest } from '@tachybase/client';
 
 import { Button, Dropdown, Empty, Input, theme } from 'antd';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 import { useTranslation } from '../../../locale';
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 
-const createStyleAe = createStyles(({ css }) => ({
+const useStyles = createStyles(({ css }) => ({
   searchDropdown: css`
     .ant-dropdown-menu {
       max-height: 500px;
@@ -17,72 +17,88 @@ const createStyleAe = createStyles(({ css }) => ({
 }));
 
 export const ComponentSe = () => {
-  const { t: e } = useTranslation();
-  const { token: t } = theme.useToken();
-  const { setDepartment: setDepartment, setUser: setUser } = useContext(contextK);
-  const [r, c] = useState(false);
-  const [i, x] = useState('');
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { setDepartment, setUser } = useContext(DepartmentsContext);
+  const [open, setOpen] = useState(false);
+  const [keyword, x] = useState('');
   const [m, g] = useState([]);
   const [d, A] = useState([]);
   const [b, h] = useState(true);
   const [F, C] = useState(true);
-  const { styles } = createStyleAe();
-  const l = 10;
+  const { styles } = useStyles();
+  const limit = 10;
   const api = useAPIClient();
   const data = useRequest(
-    (M) =>
+    (params) =>
       api
         .resource('departments')
-        .aggregateSearch(M)
-        .then((P) => {
-          var q;
-          return (q = P == null ? void 0 : P.data) == null ? void 0 : q.data;
-        }),
+        .aggregateSearch(params)
+        .then((result) => result?.data?.data),
     {
       manual: true,
-      onSuccess: (M, P) => {
+      onSuccess: (data, params) => {
         const {
           values: { type: q },
-        } = P[0] || {};
-        M &&
-          ((!q || q === 'user') && M.users.length < l && h(false),
-          (!q || q === 'department') && M.departments.length < l && C(false),
-          g((se) => [...se, ...M.users]),
-          A((se) => [...se, ...M.departments]));
+        } = params[0] || {};
+        if (data) {
+          if (!q || (q === 'user' && data.users.length < limit)) {
+            h(false);
+          }
+          if (!q || (q === 'department' && data.departments.length < limit)) {
+            C(false);
+          }
+          g((se) => [...se, ...data.users]);
+          A((se) => [...se, ...data.departments]);
+        }
       },
     },
   );
-  const { run: S } = data;
-  const O = (M) => {
-    x(M), g([]), A([]), h(true), C(true), M && (S({ values: { keyword: M, limit: l } }), c(true));
+  const { run } = data;
+  const onSearch = (keyword) => {
+    x(keyword);
+    g([]);
+    A([]);
+    h(true);
+    C(true);
+    if (keyword) {
+      run({ values: { keyword, limit } });
+      setOpen(true);
+    }
   };
-  const $ = (M) => {
-    M.target.value || (setUser(null), x(''), c(false), data.mutate({}), g([]), A([]));
+  const onChange = (event) => {
+    if (!event.target.value) {
+      setUser(null);
+      x('');
+      setOpen(false);
+      data.mutate({});
+      g([]);
+      A([]);
+    }
   };
-  const W = (M) => {
-    const P = M.title,
-      q = M.parent;
-    return q ? W(q) + ' / ' + P : P;
+  const NodeLabel = (node) => {
+    const title = node.title;
+    const parent = node.parent;
+    return parent ? NodeLabel(parent) + ' / ' + title : title;
   };
-  const H = (M) =>
-    jsx(Button, {
-      type: 'link',
-      style: { padding: '0 8px' },
-      onClick: (P) => {
-        c(true), S({ values: { keyword: i, limit: l, ...M } });
-      },
-      children: e('Load more'),
-    });
+  const LinkButton = (params) => (
+    <Button
+      type="link"
+      style={{ padding: '0 8px' }}
+      onClick={(P) => {
+        setOpen(true), run({ values: { keyword, limit, ...params } });
+      }}
+    >
+      {t('Load more')}
+    </Button>
+  );
   const J = () => {
     const M = [];
     return !m.length && !d.length
       ? [
           {
             key: '0',
-            label: jsx(Empty, {
-              description: e('No results'),
-              image: Empty.PRESENTED_IMAGE_SIMPLE,
-            }),
+            label: <Empty description={t('No results')} image={Empty.PRESENTED_IMAGE_SIMPLE} />,
             disabled: true,
           },
         ]
@@ -90,7 +106,7 @@ export const ComponentSe = () => {
           (M.push({
             key: '0',
             type: 'group',
-            label: e('Users'),
+            label: t('Users'),
             children: m.map((P) => ({
               key: P.username,
               label: jsxs('div', {
@@ -98,7 +114,7 @@ export const ComponentSe = () => {
                 children: [
                   jsx('div', { children: P.nickname || P.username }),
                   jsx('div', {
-                    style: { fontSize: t.fontSizeSM, color: t.colorTextDescription },
+                    style: { fontSize: token.fontSizeSM, color: token.colorTextDescription },
                     children: `${P.username}${P.phone ? ' | ' + P.phone : ''}${P.email ? ' | ' + P.email : ''}`,
                   }),
                 ],
@@ -109,42 +125,45 @@ export const ComponentSe = () => {
             M.push({
               type: 'group',
               key: '0-loadMore',
-              label: jsx(H, { type: 'user', last: m[m.length - 1].id }),
+              label: jsx(LinkButton, { type: 'user', last: m[m.length - 1].id }),
             })),
         d.length &&
           (M.push({
             key: '1',
             type: 'group',
-            label: e('Departments'),
+            label: t('Departments'),
             children: d.map((P) => ({
               key: P.id,
-              label: jsx('div', { onClick: () => setDepartment(P), children: W(P) }),
+              label: jsx('div', { onClick: () => setDepartment(P), children: NodeLabel(P) }),
             })),
           }),
           F &&
             M.push({
               type: 'group',
               key: '1-loadMore',
-              label: jsx(H, { type: 'department', last: d[d.length - 1].id }),
+              label: <LinkButton type="department" last={d[d.length - 1].id} />,
             })),
         M);
   };
-  return jsx(Dropdown, {
-    menu: { items: J() },
-    overlayClassName: styles.searchDropdown,
-    trigger: ['click'],
-    open: r,
-    onOpenChange: (M) => c(M),
-    children: jsx(Input.Search, {
-      allowClear: true,
-      onClick: () => {
-        i || c(false);
-      },
-      onFocus: () => setDepartment(null),
-      onSearch: O,
-      onChange: $,
-      placeholder: e('Search for departments, users'),
-      style: { marginBottom: '20px' },
-    }),
-  });
+  return (
+    <Dropdown
+      menu={{ items: J() }}
+      overlayClassName={styles.searchDropdown}
+      trigger={['click']}
+      open={open}
+      onOpenChange={(open) => setOpen(open)}
+    >
+      <Input.Search
+        allowClear
+        onClick={() => {
+          keyword || setOpen(false);
+        }}
+        onFocus={() => setDepartment(null)}
+        onSearch={onSearch}
+        onChange={onChange}
+        placeholder={t('Search for departments, users')}
+        style={{ marginBottom: '20px' }}
+      />
+    </Dropdown>
+  );
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentX.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentX.tsx
index 5f0d6ff2a..b83fcfa37 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentX.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentX.tsx
@@ -6,17 +6,17 @@ import { App, Dropdown, Empty, Tree } from 'antd';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 import { useTranslation } from '../../../locale';
-import { contextK } from '../context/contextK';
-import { contextN } from '../context/contextN';
+import { DepartmentsContext } from '../context/DepartmentsContext';
+import { DepartmentsExpandedContext } from '../context/DepartmentsExpandedContext';
 import { k } from '../others/k';
 import { schemaHhe } from '../schema/schemaHhe';
 import { schemaYye } from '../schema/schemaYye';
 
 export const ComponentX = () => {
   const { data: e, loading: t } = useResourceActionContext();
-  const { department, setDepartment, setUser } = useContext(contextK);
+  const { department, setDepartment, setUser } = useContext(DepartmentsContext);
   const { treeData, nodeMap, loadData, loadedKeys, setLoadedKeys, initData, expandedKeys, setExpandedKeys } =
-    useContext(contextN);
+    useContext(DepartmentsExpandedContext);
 
   const h = (v) => {
     if (!v.length) return;
@@ -105,7 +105,7 @@ export const ComponentX = () => {
 ComponentX.Item = function ({ node: t, setVisible: o, setDrawer: a }) {
   const { t: r } = useTranslation(),
     { refreshAsync: c } = useResourceActionContext(),
-    { setLoadedKeys: i, expandedKeys: x, setExpandedKeys: m } = useContext(contextN),
+    { setLoadedKeys: i, expandedKeys: x, setExpandedKeys: m } = useContext(DepartmentsExpandedContext),
     { modal: g, message: d } = App.useApp(),
     A = useAPIClient(),
     b = () => {
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentXxe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentXxe.tsx
deleted file mode 100644
index 0047bc360..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentXxe.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { SchemaComponent } from '@tachybase/client';
-
-import { jsx } from 'react/jsx-runtime';
-
-import { useTranslation } from '../../../locale';
-
-export const ComponentXxe = () => {
-  const { t: e } = useTranslation();
-  return jsx(SchemaComponent, {
-    scope: { t: e },
-    schema: {
-      type: 'void',
-      properties: {
-        newDepartment: {
-          type: 'void',
-          title: e('New department'),
-          'x-component': 'Action',
-          'x-component-props': { type: 'text', icon: 'PlusOutlined', style: { width: '100%', textAlign: 'left' } },
-          properties: {
-            drawer: {
-              type: 'void',
-              'x-component': 'Action.Drawer',
-              'x-decorator': 'Form',
-              title: e('New department'),
-              properties: {
-                title: { 'x-component': 'CollectionField', 'x-decorator': 'FormItem', required: true },
-                parent: {
-                  'x-component': 'CollectionField',
-                  'x-decorator': 'FormItem',
-                  'x-collection-field': 'departments.parent',
-                  'x-component-props': { component: 'DepartmentSelect' },
-                },
-                roles: {
-                  'x-component': 'CollectionField',
-                  'x-decorator': 'FormItem',
-                  'x-collection-field': 'departments.roles',
-                },
-                footer: {
-                  type: 'void',
-                  'x-component': 'Action.Drawer.Footer',
-                  properties: {
-                    cancel: {
-                      title: '{{t("Cancel")}}',
-                      'x-component': 'Action',
-                      'x-component-props': { useAction: '{{ cm.useCancelAction }}' },
-                    },
-                    submit: {
-                      title: '{{t("Submit")}}',
-                      'x-component': 'Action',
-                      'x-component-props': { type: 'primary', useAction: '{{ useCreateDepartment }}' },
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  });
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentFieldYe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentFieldYe.tsx
index a7b2e82b4..5fa92d6b4 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentFieldYe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentFieldYe.tsx
@@ -3,11 +3,11 @@ import { EllipsisWithTooltip } from '@tachybase/client';
 import { useField } from '@tachybase/schema';
 
 // import { jsx, jsxs } from 'react/jsx-runtime';
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 import { getDepartmentStr } from '../utils/getDepartmentStr';
 
 export const DepartmentFieldYe = () => {
-  const { setDepartment } = useContext(contextK);
+  const { setDepartment } = useContext(DepartmentsContext);
   const field = useField<{ value: Array<any> }>();
   const fieldValues = field.value || [];
 
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentManagement.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentManagement.tsx
index 9688dd93a..85160bff9 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentManagement.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentManagement.tsx
@@ -5,12 +5,12 @@ import { SchemaComponentOptions } from '@tachybase/client';
 import { Col, Row } from 'antd';
 
 import { useFilterActionPropsZ } from '../scopes/useFilterActionPropsZ';
-import { CeComponent } from './CeComponent';
-import { BeComponent } from './ComponentBe';
 import { ComponentEEE } from './ComponentEEE';
 import { ComponentIit } from './ComponentIit';
 import { DepartmentSelect } from './DepartmentSelect';
+import { DepartmentsResourceProvider } from './DepartmentsResourceProvider';
 import { SuperiorDepartmentSelect } from './SuperiorDepartmentSelect';
+import { UserResourceProvider } from './UserResourceProvider';
 
 export const DepartmentManagement = () => {
   return (
@@ -20,14 +20,14 @@ export const DepartmentManagement = () => {
     >
       <Row gutter={48} style={{ flexWrap: 'nowrap' }}>
         <Col span={6} style={{ borderRight: '1px solid #eee', minWidth: '300px' }}>
-          <CeComponent>
+          <DepartmentsResourceProvider>
             <ComponentEEE />
-          </CeComponent>
+          </DepartmentsResourceProvider>
         </Col>
         <Col flex="auto" style={{ overflow: 'hidden' }}>
-          <BeComponent>
+          <UserResourceProvider>
             <ComponentIit />
-          </BeComponent>
+          </UserResourceProvider>
         </Col>
       </Row>
     </SchemaComponentOptions>
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentSelect.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentSelect.tsx
index c552cf499..b5f951471 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentSelect.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentSelect.tsx
@@ -2,15 +2,15 @@ import { useContext } from 'react';
 
 import { jsx } from 'react/jsx-runtime';
 
-import { contextK } from '../context/contextK';
-import { useHooksG } from '../hooks/useHooksG';
+import { DepartmentsContext } from '../context/DepartmentsContext';
+import { useDepTree2 } from '../hooks/useDepTree2';
 import { T } from '../others/T';
 import { y } from '../others/y';
 import { ComponentLle } from './ComponentLle';
 
 export const DepartmentSelect = () => {
-  const e = useHooksG(),
-    { departmentsResource: t } = useContext(contextK),
+  const e = useDepTree2(),
+    { departmentsResource: t } = useContext(DepartmentsContext),
     {
       service: { data: o },
     } = t || {};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentTablePpe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentTablePpe.tsx
index 263044d08..2abe0ff92 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentTablePpe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentTablePpe.tsx
@@ -5,7 +5,7 @@ import { jsx } from 'react/jsx-runtime';
 
 import { useFilterActionPropsXe } from '../scopes/useFilterActionPropsXe';
 import { InternalDepartmentTableRe } from './InternalDepartmentTableRe';
-import { RequestProviderEet } from './RequestProviderEet';
+import { RequestProvider } from './RequestProvider';
 
 export const DepartmentTablePpe = ({ useDataSource: e, useDisabled: t }) =>
   jsx(SchemaComponent, {
@@ -15,7 +15,7 @@ export const DepartmentTablePpe = ({ useDataSource: e, useDisabled: t }) =>
     },
     components: {
       InternalDepartmentTable: InternalDepartmentTableRe,
-      RequestProvider: RequestProviderEet,
+      RequestProvider: RequestProvider,
     },
     schema: {
       type: 'void',
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsProvider.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsProvider.tsx
index 10b349d4e..87455241c 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsProvider.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsProvider.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useRequest } from '@tachybase/client';
 
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 
 export const DepartmentsProvider = ({ children }) => {
   const [user, setUser] = useState(null);
@@ -27,7 +27,7 @@ export const DepartmentsProvider = ({ children }) => {
     params: { pagination: false, filter: { parentId: null } },
   });
   return (
-    <contextK.Provider
+    <DepartmentsContext.Provider
       value={{
         user,
         setUser,
@@ -38,6 +38,6 @@ export const DepartmentsProvider = ({ children }) => {
       }}
     >
       {children}
-    </contextK.Provider>
+    </DepartmentsContext.Provider>
   );
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/CeComponent.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsResourceProvider.tsx
similarity index 76%
rename from packages/plugins/@hera/plugin-core/src/client/features/departments/components/CeComponent.tsx
rename to packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsResourceProvider.tsx
index 6de8f64a7..5de0d4c3d 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/CeComponent.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/DepartmentsResourceProvider.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { CollectionProvider_deprecated, ResourceActionContext } from '@tachybase/client';
 
 import { collectionDepartments } from '../collections/departments.collection';
-import { useContextK } from '../context/contextK';
+import { useDepartments } from '../context/DepartmentsContext';
 
-export const CeComponent = ({ children }) => {
-  const context = useContextK();
+export const DepartmentsResourceProvider = ({ children }) => {
+  const context = useDepartments();
   const { departmentsResource } = context;
   const { service } = departmentsResource || {};
 
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/InternalDepartmentTableRe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/InternalDepartmentTableRe.tsx
index 711cfa0ef..953754b0e 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/InternalDepartmentTableRe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/InternalDepartmentTableRe.tsx
@@ -6,7 +6,7 @@ import { Table } from 'antd';
 import { jsx } from 'react/jsx-runtime';
 
 import { useTranslation } from '../../../locale';
-import { useHooksG } from '../hooks/useHooksG';
+import { useDepTree2 } from '../hooks/useDepTree2';
 import { T } from '../others/T';
 import { y } from '../others/y';
 import { getDepartmentStr } from '../utils/getDepartmentStr';
@@ -19,7 +19,7 @@ export const InternalDepartmentTableRe = ({ useDisabled: e = Ze }) => {
   console.log(o);
   const { run: a, data: r, loading: c, defaultRequest: i } = o,
     { resource: x, resourceOf: m, params: g } = i || {},
-    { treeData: d, initData: A, loadData: b } = useHooksG({ resource: x, resourceOf: m, params: g }),
+    { treeData: d, initData: A, loadData: b } = useDepTree2({ resource: x, resourceOf: m, params: g }),
     h = useField(),
     { disabled: F } = e(),
     { hasFilter: C, expandedKeys: v, setExpandedKeys: l } = useContext(ContextR);
@@ -37,14 +37,14 @@ export const InternalDepartmentTableRe = ({ useDisabled: e = Ze }) => {
     rowSelection: {
       selectedRowKeys: ((h == null ? void 0 : h.value) || []).map((f) => f.id),
       onChange: (f, S) => {
-        var O;
+        let O;
         return (O = h == null ? void 0 : h.setValue) == null ? void 0 : O.call(h, S);
       },
       getCheckboxProps: (f) => ({ disabled: F(f) }),
     },
     pagination: T(y({ showSizeChanger: true }, u), {
       onChange(f, S) {
-        var O;
+        let O;
         a(T(y({}, ((O = o == null ? void 0 : o.params) == null ? void 0 : O[0]) || {}), { page: f, pageSize: S }));
       },
     }),
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/IsOwnerFieldQe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/IsOwnerFieldQe.tsx
index d1cc472b8..4af081171 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/IsOwnerFieldQe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/IsOwnerFieldQe.tsx
@@ -3,10 +3,10 @@ import { Checkbox, useRecord } from '@tachybase/client';
 
 import { jsx } from 'react/jsx-runtime';
 
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 
 export const IsOwnerFieldQe = () => {
-  const { department: e } = useContext(contextK),
+  const { department: e } = useContext(DepartmentsContext),
     o = (useRecord().departments || []).find((a) => (a == null ? void 0 : a.id) === (e == null ? void 0 : e.id));
   return jsx(Checkbox.ReadPretty, { value: o == null ? void 0 : o.departmentsUsers.isOwner });
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/NewDepartment.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/NewDepartment.tsx
new file mode 100644
index 000000000..935214897
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/NewDepartment.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { SchemaComponent } from '@tachybase/client';
+
+import { useTranslation } from '../../../locale';
+
+export const NewDepartment = () => {
+  const { t } = useTranslation();
+  return (
+    <SchemaComponent
+      scope={{ t }}
+      schema={{
+        type: 'void',
+        properties: {
+          newDepartment: {
+            type: 'void',
+            title: t('New department'),
+            'x-component': 'Action',
+            'x-component-props': { type: 'text', icon: 'PlusOutlined', style: { width: '100%', textAlign: 'left' } },
+            properties: {
+              drawer: {
+                type: 'void',
+                'x-component': 'Action.Drawer',
+                'x-decorator': 'Form',
+                title: t('New department'),
+                properties: {
+                  title: { 'x-component': 'CollectionField', 'x-decorator': 'FormItem', required: true },
+                  parent: {
+                    'x-component': 'CollectionField',
+                    'x-decorator': 'FormItem',
+                    'x-collection-field': 'departments.parent',
+                    'x-component-props': { component: 'DepartmentSelect' },
+                  },
+                  roles: {
+                    'x-component': 'CollectionField',
+                    'x-decorator': 'FormItem',
+                    'x-collection-field': 'departments.roles',
+                  },
+                  footer: {
+                    type: 'void',
+                    'x-component': 'Action.Drawer.Footer',
+                    properties: {
+                      cancel: {
+                        title: '{{t("Cancel")}}',
+                        'x-component': 'Action',
+                        'x-component-props': { useAction: '{{ cm.useCancelAction }}' },
+                      },
+                      submit: {
+                        title: '{{t("Submit")}}',
+                        'x-component': 'Action',
+                        'x-component-props': { type: 'primary', useAction: '{{ useCreateDepartment }}' },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }}
+    ></SchemaComponent>
+  );
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProvider.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProvider.tsx
new file mode 100644
index 000000000..341d31497
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProvider.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { CollectionProvider_deprecated, ResourceActionContext } from '@tachybase/client';
+
+import { collectionDepartments } from '../collections/departments.collection';
+import { ContextR } from './ContextR';
+
+export const RequestProvider = (prop) => {
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [hasFilter, setHasFilter] = useState(false);
+  const { useDataSource } = prop;
+  const service = useDataSource({ manual: true });
+  useEffect(() => {
+    service.run({ filter: { parentId: null }, pageSize: 10 });
+  }, []);
+  return (
+    <ResourceActionContext.Provider value={service}>
+      <CollectionProvider_deprecated collection={collectionDepartments}>
+        <ContextR.Provider value={{ expandedKeys, setExpandedKeys, hasFilter, setHasFilter }}>
+          {prop.children}
+        </ContextR.Provider>
+      </CollectionProvider_deprecated>
+    </ResourceActionContext.Provider>
+  );
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProviderEet.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProviderEet.tsx
deleted file mode 100644
index 7a9ac09b8..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/RequestProviderEet.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-import { CollectionProvider_deprecated, ResourceActionContext } from '@tachybase/client';
-
-import { jsx } from 'react/jsx-runtime';
-
-import { collectionDepartments } from '../collections/departments.collection';
-import { y } from '../others/y';
-import { ContextR } from './ContextR';
-
-export const RequestProviderEet = (e) => {
-  const [t, o] = useState([]),
-    [a, r] = useState(false),
-    { useDataSource: c } = e,
-    i = c({ manual: true });
-  return (
-    useEffect(() => {
-      i.run({ filter: { parentId: null }, pageSize: 10 });
-    }, []),
-    jsx(ResourceActionContext.Provider, {
-      value: y({}, i),
-      children: jsx(CollectionProvider_deprecated, {
-        collection: collectionDepartments,
-        children: jsx(ContextR.Provider, {
-          value: { expandedKeys: t, setExpandedKeys: o, hasFilter: a, setHasFilter: r },
-          children: e.children,
-        }),
-      }),
-    })
-  );
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/SuperiorDepartmentSelect.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/SuperiorDepartmentSelect.tsx
index 141d347f2..eb4b68c0c 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/SuperiorDepartmentSelect.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/SuperiorDepartmentSelect.tsx
@@ -3,17 +3,17 @@ import { useRecord } from '@tachybase/client';
 
 import { jsx } from 'react/jsx-runtime';
 
-import { contextK } from '../context/contextK';
-import { useHooksG } from '../hooks/useHooksG';
+import { DepartmentsContext } from '../context/DepartmentsContext';
+import { useDepTree2 } from '../hooks/useDepTree2';
 import { T } from '../others/T';
 import { y } from '../others/y';
 import { ComponentLle } from './ComponentLle';
 
 export const SuperiorDepartmentSelect = () => {
-  const e = useHooksG(),
+  const e = useDepTree2(),
     { setTreeData: t, getChildrenIds: o } = e,
     a = useRecord(),
-    { departmentsResource: r } = useContext(contextK),
+    { departmentsResource: r } = useContext(DepartmentsContext),
     {
       service: { data: c },
     } = r || {};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentBe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/UserResourceProvider.tsx
similarity index 55%
rename from packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentBe.tsx
rename to packages/plugins/@hera/plugin-core/src/client/features/departments/components/UserResourceProvider.tsx
index 476937830..06e090a56 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/components/ComponentBe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/components/UserResourceProvider.tsx
@@ -1,12 +1,11 @@
 import React, { useContext } from 'react';
 import { CollectionProvider_deprecated, ResourceActionContext } from '@tachybase/client';
 
-// import { jsx } from 'react/jsx-runtime';
 import { collectionUsers } from '../collections/users.collection';
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 
-export const BeComponent = ({ children }) => {
-  const { usersResource } = useContext(contextK);
+export const UserResourceProvider = ({ children }) => {
+  const { usersResource } = useContext(DepartmentsContext);
   const { service } = usersResource || {};
 
   return (
@@ -14,9 +13,4 @@ export const BeComponent = ({ children }) => {
       <CollectionProvider_deprecated collection={collectionUsers}>{children}</CollectionProvider_deprecated>
     </ResourceActionContext.Provider>
   );
-
-  // return jsx(ResourceActionContext.Provider, {
-  //   value: { ...o },
-  //   children: jsx(CollectionProvider_deprecated, { collection: collectionUsers, children: e.children }),
-  // });
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextK.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsContext.tsx
similarity index 64%
rename from packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextK.tsx
rename to packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsContext.tsx
index 34ad3fd2e..700ea5a38 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextK.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsContext.tsx
@@ -20,14 +20,13 @@ interface contextType {
   };
 }
 
-// XXX: 等待所有引用重置为以下两个函数后, 删除导出声明
-export const contextK = React.createContext<contextType>({
+export const DepartmentsContext = React.createContext<contextType>({
   user: {},
   department: {},
 });
 
-export const ContextKProvider = contextK.Provider;
+export const DepartmentsContextProvider = DepartmentsContext.Provider;
 
-export function useContextK() {
-  return useContext(contextK);
+export function useDepartments() {
+  return useContext(DepartmentsContext);
 }
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsExpandedContext.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsExpandedContext.tsx
new file mode 100644
index 000000000..94e9e7415
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/context/DepartmentsExpandedContext.tsx
@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+
+export interface DepartmentsExpandedProps {
+  initData: (C: any) => void;
+  treeData: any[];
+  setTreeData: React.Dispatch<React.SetStateAction<any[]>>;
+  nodeMap: {};
+  updateTreeData: (C: any, v: any) => any;
+  constructTreeData: (C: any, v: any) => any;
+  getChildrenIds: (node: any) => any[];
+  loadedKeys: any[];
+  setLoadedKeys: React.Dispatch<React.SetStateAction<any[]>>;
+  expandedKeys: any[];
+  setExpandedKeys: React.Dispatch<React.SetStateAction<any[]>>;
+}
+
+export const DepartmentsExpandedContext = React.createContext<Partial<DepartmentsExpandedProps>>({});
+
+export const DepartmentsExpandedContextProvider = DepartmentsExpandedContext.Provider;
+
+export function useDepartmentsExpanded() {
+  return useContext(DepartmentsExpandedContext);
+}
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextN.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextN.tsx
deleted file mode 100644
index 220a3940b..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/context/contextN.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React, { useContext } from 'react';
-
-export const contextN = React.createContext<any>({});
-
-export const ContextNProvider = contextN.Provider;
-
-export function useContextN() {
-  return useContext(contextN);
-}
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useBulkRemoveMembersAction.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useBulkRemoveMembersAction.tsx
index 8eea6b8ef..37ba3f373 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useBulkRemoveMembersAction.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useBulkRemoveMembersAction.tsx
@@ -4,7 +4,7 @@ import { useAPIClient, useResourceActionContext } from '@tachybase/client';
 import { App } from 'antd';
 
 import { useTranslation } from '../../../locale';
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 import { k } from '../others/k';
 
 export const useBulkRemoveMembersAction = () => {
@@ -12,7 +12,7 @@ export const useBulkRemoveMembersAction = () => {
     { message: t } = App.useApp(),
     o = useAPIClient(),
     { state: a, setState: r, refresh: c } = useResourceActionContext(),
-    { department: i } = useContext(contextK);
+    { department: i } = useContext(DepartmentsContext);
   return {
     run() {
       return k(this, null, function* () {
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useCreateDepartment.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useCreateDepartment.tsx
index 36eb99295..df2bc96c3 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useCreateDepartment.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useCreateDepartment.tsx
@@ -2,33 +2,35 @@ import { useContext } from 'react';
 import { useActionContext, useAPIClient, useResourceActionContext } from '@tachybase/client';
 import { useField, useForm } from '@tachybase/schema';
 
-import { contextN } from '../context/contextN';
-import { k } from '../others/k';
+import { DepartmentsExpandedContext } from '../context/DepartmentsExpandedContext';
 
 export const useCreateDepartment = () => {
-  const e = useForm(),
-    t = useField(),
-    o = useActionContext(),
-    { refreshAsync: a } = useResourceActionContext(),
-    r = useAPIClient(),
-    { expandedKeys: c, setLoadedKeys: i, setExpandedKeys: x } = useContext(contextN);
+  const form = useForm();
+  const field = useField();
+  const { setVisible } = useActionContext();
+  const { refreshAsync } = useResourceActionContext();
+  const api = useAPIClient();
+  const { expandedKeys, setLoadedKeys, setExpandedKeys } = useContext(DepartmentsExpandedContext);
   return {
-    run() {
-      return k(this, null, function* () {
-        try {
-          yield e.submit(),
-            (t.data = t.data || {}),
-            (t.data.loading = true),
-            yield r.resource('departments').create({ values: e.values }),
-            o.setVisible(false),
-            yield e.reset(),
-            (t.data.loading = false);
-          const g = [...c];
-          i([]), x([]), yield a(), x(g);
-        } catch (g) {
-          t.data && (t.data.loading = false);
+    async run() {
+      try {
+        await form.submit();
+        field.data = field.data || {};
+        field.data.loading = true;
+        await api.resource('departments').create({ values: form.values });
+        setVisible(false);
+        await form.reset();
+        field.data.loading = false;
+        const keys = [...expandedKeys];
+        setLoadedKeys([]);
+        setExpandedKeys([]);
+        await refreshAsync();
+        setExpandedKeys(keys);
+      } catch (error) {
+        if (field.data) {
+          field.data.loading = false;
         }
-      });
+      }
     },
   };
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useDepTree2.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useDepTree2.tsx
new file mode 100644
index 000000000..49f9e699e
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useDepTree2.tsx
@@ -0,0 +1,35 @@
+import { useAPIClient } from '@tachybase/client';
+
+import { useDepTree } from './useHooksDe';
+
+export const useDepTree2 = (props?) => {
+  const { resource = 'departments', resourceOf, params = {} } = props || {};
+  const service = useAPIClient().resource(resource, resourceOf);
+  const depTree = useDepTree(props);
+  const { setTreeData, updateTreeData, initData } = depTree;
+  const loadData =
+    (_) =>
+    async ({ key, children }) => {
+      if (children != null && children.length) return;
+      const { data } = await service.list({
+        ...params,
+        pagination: false,
+        appends: ['parent(recursively=true)'],
+        filter: { parentId: key },
+      });
+      if (data?.data?.length) {
+        setTreeData(updateTreeData(key, data?.data));
+      }
+    };
+  const getByKeyword = async (keyword) => {
+    const { data } = await service.list({
+      ...params,
+      pagination: false,
+      filter: { title: { $includes: keyword } },
+      appends: ['parent(recursively=true)'],
+      pageSize: 100,
+    });
+    initData(data?.data);
+  };
+  return { ...depTree, loadData, getByKeyword };
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksDe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksDe.tsx
index 97f167f21..5b1a58a61 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksDe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksDe.tsx
@@ -1,99 +1,100 @@
 import React, { useCallback, useState } from 'react';
 
-import { T } from '../others/T';
-
-export const useHooksDe = (e) => {
-  const { label: t } = e || {},
-    [o, a] = useState([]),
-    [r, c] = useState({}),
-    [i, x] = useState([]),
-    [m, g] = useState([]),
-    d = useCallback((C) => {
-      const v = {},
-        l = (f) => {
-          let S = f ? { ...f } : null;
-          for (; S; ) {
-            const O = S.parentId || 'root';
-            v[O]
-              ? (v[O].childrenMap[S.id] = S)
-              : (v[O] = T({ ...(S.parent || { id: O }) }, { childrenMap: { [S.id]: S } })),
-              (S = S.parent);
-          }
-        },
-        u = (f) => {
-          const S = {};
-          f.children &&
-            f.children.length &&
-            f.children.forEach((O) => {
-              (S[O.id] = O), u(O);
-            }),
-            (v[f.id] = T({ ...f }, { childrenMap: S }));
-        };
-      return (
-        C &&
-          C.length &&
-          C.forEach((f) => {
-            l(f), u(f);
-          }),
-        v
-      );
-    }, []),
-    A = useCallback((C) => {
-      const v = (l) => {
-        var u;
-        return !C[l] || C[l].isLeaf
-          ? null
-          : Object.values(((u = C[l]) == null ? void 0 : u.childrenMap) || {}).map((f: object) =>
-              T({ ...f }, { title: t ? React.createElement(t, { node: f }) : f.title, children: v(f.id) }),
-            );
-      };
-      return v('root');
-    }, []),
-    b = useCallback(
-      (C) => {
-        const v = d(C);
-        c(v);
-        const l = A(v) || [];
-        a(l);
-      },
-      [a, d, A],
-    ),
-    h = (C, v) => {
-      const l = d(v),
-        u = { ...l, ...r };
-      return (
-        v.forEach((f) => {
-          u[C].childrenMap[f.id] = f;
+export const useDepTree = (options) => {
+  const { label } = options || {};
+  const [treeData, setTreeData] = useState([]);
+  const [nodeMap, setNodeMap] = useState({});
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [loadedKeys, setLoadedKeys] = useState([]);
+  const d = useCallback((C) => {
+    const v = {};
+    const l = (f) => {
+      let S = f ? { ...f } : null;
+      for (; S; ) {
+        const O = S.parentId || 'root';
+        if (v[0]) {
+          v[O].childrenMap[S.id] = S;
+        } else {
+          v[O] = { ...(S.parent || { id: O }), childrenMap: { [S.id]: S } };
+        }
+        S = S.parent;
+      }
+    };
+    const u = (f) => {
+      const childrenMap = {};
+      f.children &&
+        f.children.length &&
+        f.children.forEach((O) => {
+          (childrenMap[O.id] = O), u(O);
+        });
+      v[f.id] = { ...f, childrenMap };
+    };
+    return (
+      C &&
+        C.length &&
+        C.forEach((f) => {
+          l(f), u(f);
         }),
-        c(u),
-        A(u)
+      v
+    );
+  }, []);
+  const constructTreeData = useCallback((C) => {
+    const v = (l) => {
+      return !C[l] || C[l].isLeaf
+        ? null
+        : Object.values(C[l]?.childrenMap || {}).map((f: any) => ({
+            ...f,
+            title: label ? React.createElement(label, { node: f }) : f.title,
+            children: v(f.id),
+          }));
+    };
+    return v('root');
+  }, []);
+  const initData = useCallback(
+    (C) => {
+      const v = d(C);
+      setNodeMap(v);
+      const l = constructTreeData(v) || [];
+      setTreeData(l);
+    },
+    [setTreeData, d, constructTreeData],
+  );
+  const updateTreeData = (C, v) => {
+    const l = d(v);
+    const u = { ...l, ...nodeMap };
+    return (
+      v.forEach((f) => {
+        u[C].childrenMap[f.id] = f;
+      }),
+      setNodeMap(u),
+      constructTreeData(u)
+    );
+  };
+  const getChildrenIds = useCallback(
+    (node) => {
+      if (!nodeMap[node]) return [];
+      const ids = [];
+      return (
+        ids.push(...Object.keys(nodeMap[node].childrenMap).map((id) => Number(id))),
+        Object.keys(nodeMap[node].childrenMap).forEach((subNode) => {
+          ids.push(...getChildrenIds(subNode));
+        }),
+        ids
       );
     },
-    F = useCallback(
-      (C) => {
-        if (!r[C]) return [];
-        const v = [];
-        return (
-          v.push(...Object.keys(r[C].childrenMap).map((l) => Number(l))),
-          Object.keys(r[C].childrenMap).forEach((l) => {
-            v.push(...F(l));
-          }),
-          v
-        );
-      },
-      [r],
-    );
+    [nodeMap],
+  );
   return {
-    initData: b,
-    treeData: o,
-    setTreeData: a,
-    nodeMap: r,
-    updateTreeData: h,
-    constructTreeData: A,
-    getChildrenIds: F,
-    loadedKeys: m,
-    setLoadedKeys: g,
-    expandedKeys: i,
-    setExpandedKeys: x,
+    initData,
+    treeData,
+    setTreeData,
+    nodeMap,
+    updateTreeData,
+    constructTreeData,
+    getChildrenIds,
+    loadedKeys,
+    setLoadedKeys,
+    expandedKeys,
+    setExpandedKeys,
   };
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksG.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksG.tsx
deleted file mode 100644
index ab7efc8f7..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksG.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useAPIClient } from '@tachybase/client';
-
-import { k } from '../others/k';
-import { T } from '../others/T';
-import { B } from '../utils/B';
-import { useHooksDe } from './useHooksDe';
-
-function we(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, 'default') ? e.default : e;
-}
-
-const je = B;
-const Ue = je;
-
-const ie = we(Ue);
-
-export const useHooksG = (props) => {
-  const { resource: t = 'departments', resourceOf: o, params: a = {} } = props || {},
-    c = useAPIClient().resource(t, o),
-    i = useHooksDe(props),
-    { setTreeData: x, updateTreeData: m, setLoadedKeys: g, initData: d } = i,
-    A = (C) =>
-      k(this, [C], function* ({ key: h, children: F }) {
-        var l;
-        if (F != null && F.length) return;
-        const { data: v } = yield c.list(
-          ie(a, { pagination: false, appends: ['parent(recursively=true)'], filter: { parentId: h } }),
-        );
-        (l = v == null ? void 0 : v.data) != null && l.length && x(m(h, v == null ? void 0 : v.data));
-      }),
-    b = (h) =>
-      k(this, null, function* () {
-        const { data: F } = yield c.list(
-          ie(a, {
-            pagination: false,
-            filter: { title: { $includes: h } },
-            appends: ['parent(recursively=true)'],
-            pageSize: 100,
-          }),
-        );
-        d(F == null ? void 0 : F.data);
-      });
-  return T({ ...i }, { loadData: A, getByKeyword: b });
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksOoe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksOoe.tsx
deleted file mode 100644
index 122063619..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useHooksOoe.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useCollection_deprecated, useCollectionManager_deprecated, useCompile } from '@tachybase/client';
-import { useFieldSchema } from '@tachybase/schema';
-
-const bt = (e) => e['x-component'] === 'CollectionField';
-
-export const useHooksOoe = () => {
-  const { getField: e } = useCollection_deprecated(),
-    t = useCompile(),
-    o = useFieldSchema(),
-    { getCollectionJoinField: a } = useCollectionManager_deprecated(),
-    r = o.reduceProperties((i, x) => (bt(x) ? x : i), null);
-  if (!r) return {};
-  const c = e(r.name) || a(r == null ? void 0 : r['x-collection-field']);
-  return { columnSchema: o, fieldSchema: r, collectionField: c, uiSchema: t(c == null ? void 0 : c.uiSchema) };
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useMembersDataSource.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useMembersDataSource.tsx
index b093c8f6c..be445032a 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useMembersDataSource.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useMembersDataSource.tsx
@@ -1,10 +1,10 @@
 import { useContext, useEffect } from 'react';
 import { useResourceActionContext } from '@tachybase/client';
 
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 
 export const useMembersDataSource = (e) => {
-  const { user: t } = useContext(contextK),
+  const { user: t } = useContext(DepartmentsContext),
     o = useResourceActionContext();
   return (
     useEffect(() => {
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useRemoveMemberAction.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useRemoveMemberAction.tsx
index 267ab27e1..f2a79881c 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useRemoveMemberAction.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useRemoveMemberAction.tsx
@@ -1,12 +1,12 @@
 import { useContext } from 'react';
 import { useAPIClient, useRecord, useResourceActionContext } from '@tachybase/client';
 
-import { contextK } from '../context/contextK';
+import { DepartmentsContext } from '../context/DepartmentsContext';
 import { k } from '../others/k';
 
 export const useRemoveMemberAction = () => {
   const e = useAPIClient(),
-    { department: t } = useContext(contextK),
+    { department: t } = useContext(DepartmentsContext),
     { id: o } = useRecord(),
     { refresh: a } = useResourceActionContext();
   return {
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartment.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartment.tsx
new file mode 100644
index 000000000..16c923cce
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartment.tsx
@@ -0,0 +1,39 @@
+import { useContext } from 'react';
+import { useActionContext, useAPIClient, useRecord, useResourceActionContext } from '@tachybase/client';
+import { useField, useForm } from '@tachybase/schema';
+
+import { DepartmentsContext } from '../context/DepartmentsContext';
+import { DepartmentsExpandedContext } from '../context/DepartmentsExpandedContext';
+
+export const useUpdateDepartment = () => {
+  const field = useField();
+  const form = useForm();
+  const { setVisible } = useActionContext();
+  const { refreshAsync } = useResourceActionContext();
+  const api = useAPIClient();
+  const { id } = useRecord();
+  const { expandedKeys, setLoadedKeys, setExpandedKeys } = useContext(DepartmentsExpandedContext);
+  const { department, setDepartment } = useContext(DepartmentsContext);
+  return {
+    async run() {
+      await form.submit();
+      field.data = field.data || {};
+      field.data.loading = true;
+      try {
+        await api.resource('departments').update({ filterByTk: id, values: form.values });
+        setDepartment({ department, ...form.values });
+        setVisible(false);
+        await form.reset();
+        const keys = [...expandedKeys];
+        setLoadedKeys([]);
+        setExpandedKeys([]);
+        await refreshAsync();
+        setExpandedKeys(keys);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        field.data.loading = false;
+      }
+    },
+  };
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartmentLe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartmentLe.tsx
deleted file mode 100644
index 412a467ff..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/hooks/useUpdateDepartmentLe.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useContext } from 'react';
-import { useActionContext, useAPIClient, useRecord, useResourceActionContext } from '@tachybase/client';
-import { useField, useForm } from '@tachybase/schema';
-
-import { contextK } from '../context/contextK';
-import { contextN } from '../context/contextN';
-import { k } from '../others/k';
-
-export const useUpdateDepartmentLe = () => {
-  const e = useField(),
-    t = useForm(),
-    o = useActionContext(),
-    { refreshAsync: a } = useResourceActionContext(),
-    r = useAPIClient(),
-    { id: c } = useRecord(),
-    { expandedKeys: i, setLoadedKeys: x, setExpandedKeys: m } = useContext(contextN),
-    { department: g, setDepartment: d } = useContext(contextK);
-  return {
-    run() {
-      return k(this, null, function* () {
-        yield t.submit(), (e.data = e.data || {}), (e.data.loading = true);
-        try {
-          yield r.resource('departments').update({ filterByTk: c, values: t.values }),
-            d({ department: g, ...t.values }),
-            o.setVisible(false),
-            yield t.reset();
-          const b = [...i];
-          x([]), m([]), yield a(), m(b);
-        } catch (b) {
-          console.log(b);
-        } finally {
-          e.data.loading = false;
-        }
-      });
-    },
-  };
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/neItems.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/items/neItems.tsx
deleted file mode 100644
index 48e51c62a..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/neItems.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useDesignable } from '@tachybase/client';
-import { useField, useFieldSchema } from '@tachybase/schema';
-
-import { useTranslation } from '../../../locale';
-import { useHooksOoe } from '../hooks/useHooksOoe';
-
-export const neItems = {
-  name: 'enableLink',
-  type: 'switch',
-  useVisible() {
-    return useField().readPretty;
-  },
-  useComponentProps() {
-    var i;
-    const { t: e } = useTranslation();
-    const field = useField();
-    const { fieldSchema: newFieldSchema } = useHooksOoe();
-    const oldFieldSchema = useFieldSchema();
-    const fieldSchema = newFieldSchema || oldFieldSchema;
-    const { dn: c } = useDesignable();
-    return {
-      title: e('Enable link'),
-      checked: ((i = fieldSchema['x-component-props']) == null ? void 0 : i.enableLink) !== false,
-      onChange(x) {
-        // fieldSchema['x-component-props'] = T(
-        //   y({}, fieldSchema == null ? void 0 : fieldSchema['x-component-props']),
-        //   {
-        //   enableLink: x,
-        // });
-        fieldSchema['x-component-props'] = {
-          ...fieldSchema?.['x-component-props'],
-          enableLink: x,
-        };
-        field.componentProps.enableLink = x;
-        c.emit('patch', {
-          schema: {
-            'x-uid': fieldSchema['x-uid'],
-            // 'x-component-props': y({}, fieldSchema == null ? void 0 : fieldSchema['x-component-props']),
-            'x-component-props': {
-              ...fieldSchema?.['x-component-props'],
-            },
-          },
-        });
-        c.refresh();
-      },
-    };
-  },
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/reItems.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/items/reItems.tsx
deleted file mode 100644
index ae7b46171..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/reItems.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useDesignable, useFieldModeOptions } from '@tachybase/client';
-import { useField, useFieldSchema } from '@tachybase/schema';
-
-import { useTranslation } from '../../../locale';
-import { useHooksOoe } from '../hooks/useHooksOoe';
-
-export const reItems = {
-  name: 'fieldComponent',
-  type: 'select',
-  useComponentProps() {
-    const { t: e } = useTranslation(),
-      t = useField(),
-      { fieldSchema: o, collectionField: a } = useHooksOoe(),
-      r = useFieldSchema(),
-      c = o || r,
-      i = useFieldModeOptions({ fieldSchema: o, collectionField: a }),
-      { dn: x } = useDesignable();
-    return {
-      title: e('Field component'),
-      options: i,
-      value: 'Select',
-      onChange(m) {
-        const g = { 'x-uid': c['x-uid'] };
-        (c['x-component-props'] = c['x-component-props'] || {}),
-          (c['x-component-props'].mode = m),
-          (g['x-component-props'] = c['x-component-props']),
-          (t.componentProps = t.componentProps || {}),
-          (t.componentProps.mode = m),
-          x.emit('patch', { schema: g }),
-          x.refresh();
-      },
-    };
-  },
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/teItems.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/items/teItems.tsx
deleted file mode 100644
index 011d23b6a..000000000
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/items/teItems.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useCollectionField, useDesignable, useTitleFieldOptions } from '@tachybase/client';
-import { useField, useFieldSchema } from '@tachybase/schema';
-
-import { useTranslation } from '../../../locale';
-import { useHooksOoe } from '../hooks/useHooksOoe';
-import { T } from '../others/T';
-import { y } from '../others/y';
-
-export const teItems = {
-  name: 'titleField',
-  type: 'select',
-  useComponentProps() {
-    var b, h, F, C;
-    const { t: e } = useTranslation(),
-      t = useField(),
-      { dn: o } = useDesignable(),
-      a = useTitleFieldOptions(),
-      { uiSchema: r, fieldSchema: c, collectionField: i } = useHooksOoe(),
-      x = useFieldSchema(),
-      m = c || x,
-      g = useCollectionField(),
-      d = i || g,
-      A = y(
-        y(
-          y(
-            {},
-            (h = (b = d == null ? void 0 : d.uiSchema) == null ? void 0 : b['x-component-props']) == null
-              ? void 0
-              : h.fieldNames,
-          ),
-          (F = t == null ? void 0 : t.componentProps) == null ? void 0 : F.fieldNames,
-        ),
-        (C = m == null ? void 0 : m['x-component-props']) == null ? void 0 : C.fieldNames,
-      );
-    return {
-      title: e('Title field'),
-      options: a,
-      value: A == null ? void 0 : A.label,
-      onChange(v) {
-        var S, O, $, W, H, J;
-        const l = { 'x-uid': m['x-uid'] },
-          u = T(
-            y(
-              y(
-                {},
-                (O = (S = d == null ? void 0 : d.uiSchema) == null ? void 0 : S['x-component-props']) == null
-                  ? void 0
-                  : O.fieldNames,
-              ),
-              ($ = m['x-component-props']) == null ? void 0 : $.fieldNames,
-            ),
-            { label: v },
-          );
-        (m['x-component-props'] = m['x-component-props'] || {}),
-          (m['x-component-props'].fieldNames = u),
-          (l['x-component-props'] = m['x-component-props']),
-          (t.componentProps.fieldNames = (W = m['x-component-props']) == null ? void 0 : W.fieldNames);
-        const f = (J = t.path) == null ? void 0 : J.splice(((H = t.path) == null ? void 0 : H.length) - 1, 1);
-        t.form.query(`${f.concat('*.' + m.name)}`).forEach((M) => {
-          M.componentProps.fieldNames = A;
-        }),
-          o.emit('patch', { schema: l }),
-          o.refresh();
-      },
-    };
-  },
-};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsXe.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsXe.tsx
index 86219198e..bdff44d71 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsXe.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsXe.tsx
@@ -10,42 +10,41 @@ import { useField } from '@tachybase/schema';
 
 import { useTranslation } from '../../../locale';
 import { ContextR } from '../components/ContextR';
-import { k } from '../others/k';
-import { T } from '../others/T';
-import { y } from '../others/y';
 
 export const useFilterActionPropsXe = () => {
-  const { setHasFilter: e, setExpandedKeys: t } = useContext(ContextR),
-    { t: o } = useTranslation(),
-    a = useContext(CollectionContext),
-    r = useFilterFieldOptions(a.fields),
-    c = useResourceActionContext(),
-    { run: i, defaultRequest: x } = c,
-    m = useField(),
-    { params: g } = x || {};
+  const { setHasFilter, setExpandedKeys } = useContext(ContextR);
+  const { t } = useTranslation();
+  const collection = useContext(CollectionContext);
+  const options = useFilterFieldOptions(collection.fields);
+  const service = useResourceActionContext();
+  const { run, defaultRequest } = service;
+  const field = useField();
+  const { params } = defaultRequest || {};
   return {
-    options: r,
-    onSubmit: (d) =>
-      k(this, null, function* () {
-        const A = g.filter,
-          b = removeNullCondition(d == null ? void 0 : d.filter);
-        i(T(y({}, g), { page: 1, pageSize: 10, filter: mergeFilter([b, A]) }));
-        const h = (b == null ? void 0 : b.$and) || (b == null ? void 0 : b.$or);
-        h != null && h.length
-          ? ((m.title = o('{{count}} filter items', { count: (h == null ? void 0 : h.length) || 0 })), e(true))
-          : ((m.title = o('Filter')), e(false));
-      }),
+    options: options,
+    onSubmit: async (args) => {
+      const filter = params.filter;
+      const defaultFilter = removeNullCondition(args?.filter) as any;
+      run({ ...params, page: 1, pageSize: 10, filter: mergeFilter([defaultFilter, filter]) });
+      const filters = defaultFilter?.$and || defaultFilter?.$or;
+      if (filters?.length) {
+        field.title = t('{{count}} filter items', { count: filters?.length || 0 });
+        setHasFilter(true);
+      } else {
+        field.title = t('Filter');
+        setHasFilter(false);
+      }
+    },
     onReset() {
-      i(
-        T(y({}, g || {}), {
-          filter: T(y({}, (g == null ? void 0 : g.filter) || {}), { parentId: null }),
-          page: 1,
-          pageSize: 10,
-        }),
-      ),
-        (m.title = o('Filter')),
-        e(false),
-        t([]);
+      run({
+        ...params,
+        filter: { ...(params?.filter || {}), parentId: null },
+        page: 1,
+        pageSize: 10,
+      });
+      field.title = t('Filter');
+      setHasFilter(false);
+      setExpandedKeys([]);
     },
   };
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsZ.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsZ.tsx
index a3fa743a0..b14007093 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsZ.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/scopes/useFilterActionPropsZ.tsx
@@ -1,19 +1,12 @@
-import { useContext } from 'react';
-import {
-  CollectionContext,
-  useFilterFieldOptions,
-  useFilterFieldProps,
-  useResourceActionContext,
-} from '@tachybase/client';
+import { useCollection, useFilterFieldOptions, useFilterFieldProps, useResourceActionContext } from '@tachybase/client';
 
 export const useFilterActionPropsZ = () => {
-  var a, r;
-  const e = useContext(CollectionContext),
-    t = useFilterFieldOptions(e.fields),
-    o = useResourceActionContext();
+  const collection = useCollection();
+  const options = useFilterFieldOptions(collection.fields);
+  const service = useResourceActionContext();
   return useFilterFieldProps({
-    options: t,
-    params: ((r = (a = o.state) == null ? void 0 : a.params) == null ? void 0 : r[0]) || o.params,
-    service: o,
+    options,
+    params: service.state?.params?.[0] || service.params,
+    service,
   });
 };
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/DepartmentOwnersFieldSetting.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/DepartmentOwnersFieldSetting.tsx
index ffa103c65..502c5281f 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/DepartmentOwnersFieldSetting.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/DepartmentOwnersFieldSetting.tsx
@@ -1,20 +1,10 @@
 import { SchemaSettings } from '@tachybase/client';
 
-import { neItems } from '../items/neItems';
-import { reItems } from '../items/reItems';
-import { teItems } from '../items/teItems';
+import { enableLinkItem } from './items/enableLinkItem';
+import { modeSelectItem } from './items/modeSelectItem';
+import { titleFieldItem } from './items/titleFieldItem';
 
 export const DepartmentOwnersFieldSetting = new SchemaSettings({
   name: 'fieldSettings:component:DepartmentOwnersField',
-  items: [
-    {
-      ...reItems,
-    },
-    {
-      ...teItems,
-    },
-    {
-      ...neItems,
-    },
-  ],
+  items: [modeSelectItem, titleFieldItem, enableLinkItem],
 });
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserDepartmentsFieldSetting.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserDepartmentsFieldSetting.tsx
index f273e7589..1e23bee72 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserDepartmentsFieldSetting.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserDepartmentsFieldSetting.tsx
@@ -1,20 +1,10 @@
 import { SchemaSettings } from '@tachybase/client';
 
-import { neItems } from '../items/neItems';
-import { reItems } from '../items/reItems';
-import { teItems } from '../items/teItems';
+import { enableLinkItem } from './items/enableLinkItem';
+import { modeSelectItem } from './items/modeSelectItem';
+import { titleFieldItem } from './items/titleFieldItem';
 
 export const UserDepartmentsFieldSetting = new SchemaSettings({
   name: 'fieldSettings:component:UserDepartmentsField',
-  items: [
-    {
-      ...reItems,
-    },
-    {
-      ...teItems,
-    },
-    {
-      ...neItems,
-    },
-  ],
+  items: [modeSelectItem, titleFieldItem, enableLinkItem],
 });
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserMainDepartmentFieldSetting.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserMainDepartmentFieldSetting.tsx
index 4ceac0f73..ac1f45a4c 100644
--- a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserMainDepartmentFieldSetting.tsx
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/UserMainDepartmentFieldSetting.tsx
@@ -1,20 +1,10 @@
 import { SchemaSettings } from '@tachybase/client';
 
-import { neItems } from '../items/neItems';
-import { reItems } from '../items/reItems';
-import { teItems } from '../items/teItems';
+import { enableLinkItem } from './items/enableLinkItem';
+import { modeSelectItem } from './items/modeSelectItem';
+import { titleFieldItem } from './items/titleFieldItem';
 
 export const UserMainDepartmentFieldSetting = new SchemaSettings({
   name: 'fieldSettings:component:UserMainDepartmentField',
-  items: [
-    {
-      ...reItems,
-    },
-    {
-      ...teItems,
-    },
-    {
-      ...neItems,
-    },
-  ],
+  items: [modeSelectItem, titleFieldItem, enableLinkItem],
 });
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/enableLinkItem.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/enableLinkItem.tsx
new file mode 100644
index 000000000..15c9fb025
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/enableLinkItem.tsx
@@ -0,0 +1,40 @@
+import { SchemaSettingsItemType, useColumnSchema, useDesignable } from '@tachybase/client';
+import { useField, useFieldSchema } from '@tachybase/schema';
+
+import { useTranslation } from '../../../../locale';
+
+export const enableLinkItem: SchemaSettingsItemType = {
+  name: 'enableLink',
+  type: 'switch',
+  useVisible() {
+    return useField().readPretty;
+  },
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField();
+    const { fieldSchema: fieldSchema } = useColumnSchema();
+    const columnSchema = useFieldSchema();
+    const schema = fieldSchema || columnSchema;
+    const { dn } = useDesignable();
+    return {
+      title: t('Enable link'),
+      checked: schema['x-component-props']?.enableLink !== false,
+      onChange(x) {
+        schema['x-component-props'] = {
+          ...schema?.['x-component-props'],
+          enableLink: x,
+        };
+        field.componentProps.enableLink = x;
+        dn.emit('patch', {
+          schema: {
+            'x-uid': schema['x-uid'],
+            'x-component-props': {
+              ...schema?.['x-component-props'],
+            },
+          },
+        });
+        dn.refresh();
+      },
+    };
+  },
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/modeSelectItem.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/modeSelectItem.tsx
new file mode 100644
index 000000000..84520a1a1
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/modeSelectItem.tsx
@@ -0,0 +1,32 @@
+import { SchemaSettingsItemType, useColumnSchema, useDesignable, useFieldModeOptions } from '@tachybase/client';
+import { useField, useFieldSchema } from '@tachybase/schema';
+
+import { useTranslation } from '../../../../locale';
+
+export const modeSelectItem: SchemaSettingsItemType = {
+  name: 'fieldComponent',
+  type: 'select',
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField();
+    const { fieldSchema, collectionField } = useColumnSchema();
+    const columnSchema = useFieldSchema();
+    const schema = fieldSchema || columnSchema;
+    const options = useFieldModeOptions({ fieldSchema, collectionField });
+    const { dn } = useDesignable();
+    return {
+      title: t('Field component'),
+      options,
+      value: 'Select',
+      onChange(mode) {
+        const newSchema = { 'x-uid': schema['x-uid'] };
+        schema['x-component-props'] = schema['x-component-props'] || {};
+        schema['x-component-props'].mode = mode;
+        newSchema['x-component-props'] = schema['x-component-props'];
+        field.componentProps = field.componentProps || {};
+        field.componentProps.mode = mode;
+        dn.emit('patch', { schema: newSchema }), dn.refresh();
+      },
+    };
+  },
+};
diff --git a/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/titleFieldItem.tsx b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/titleFieldItem.tsx
new file mode 100644
index 000000000..815911e03
--- /dev/null
+++ b/packages/plugins/@hera/plugin-core/src/client/features/departments/settings/items/titleFieldItem.tsx
@@ -0,0 +1,54 @@
+import {
+  SchemaSettingsItemType,
+  useCollectionField,
+  useColumnSchema,
+  useDesignable,
+  useTitleFieldOptions,
+} from '@tachybase/client';
+import { useField, useFieldSchema } from '@tachybase/schema';
+
+import { useTranslation } from '../../../../locale';
+
+export const titleFieldItem: SchemaSettingsItemType = {
+  name: 'titleField',
+  type: 'select',
+  useComponentProps() {
+    const { t } = useTranslation();
+    const field = useField();
+    const { dn } = useDesignable();
+    const options = useTitleFieldOptions();
+    const { fieldSchema: fieldSchema, collectionField: collectionField } = useColumnSchema();
+    const columnFieldSchema = useFieldSchema();
+    const schema = fieldSchema || columnFieldSchema;
+    const columnCollectionField = useCollectionField();
+    const currentCollectionField = collectionField || columnCollectionField;
+    const fieldNames =
+      field?.componentProps?.fieldNames ||
+      schema?.['x-component-props']?.['fieldNames'] ||
+      currentCollectionField?.uiSchema?.['x-component-props']?.['fieldNames'];
+    return {
+      title: t('Title field'),
+      options: options,
+      value: fieldNames?.label,
+      onChange(label) {
+        const newSchema = { 'x-uid': schema['x-uid'] };
+
+        const fieldNames = {
+          ...currentCollectionField?.uiSchema?.['x-component-props']?.['fieldNames'],
+          ...schema?.['x-component-props']?.fieldNames,
+          label,
+        };
+        schema['x-component-props'] = schema['x-component-props'] || {};
+        schema['x-component-props'].fieldNames = fieldNames;
+        newSchema['x-component-props'] = schema['x-component-props'];
+        field.componentProps.fieldNames = schema['x-component-props']?.fieldNames;
+        const f = field.path?.splice(field.path?.length - 1, 1);
+        field.form.query(`${f.concat('*.' + schema.name)}`).forEach((field) => {
+          field.componentProps.fieldNames = fieldNames.label;
+        });
+        dn.emit('patch', { schema: newSchema });
+        dn.refresh();
+      },
+    };
+  },
+};