diff --git a/package.json b/package.json
index 4f88228..a9aca5f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne-components/components-admin",
-  "version": "1.1.40",
+  "version": "1.1.41",
   "description": "用于实现一个后台管理系统的必要组件",
   "scripts": {
     "init": "husky",
@@ -93,10 +93,12 @@
     "@kne/react-icon": "^0.1.4",
     "@kne/react-intl": "^0.1.9",
     "@kne/react-org-chart": "^0.1.6",
+    "@kne/timeline": "^1.0.2",
     "@kne/token-storage": "^1.0.0",
     "@kne/use-control-value": "^0.1.9",
     "@kne/use-ref-callback": "^0.1.2",
     "@kne/use-refer-navigate": "^1.0.0",
-    "md5": "^2.3.0"
+    "md5": "^2.3.0",
+    "xlsx": "^0.18.5"
   }
 }
diff --git a/src/components/Apis/getApis.js b/src/components/Apis/getApis.js
index 652e811..12a9244 100644
--- a/src/components/Apis/getApis.js
+++ b/src/components/Apis/getApis.js
@@ -235,6 +235,10 @@ const getApis = options => {
         url: `${prefix}/tenant/admin/org-remove`,
         method: 'POST'
       },
+      orgBatchImport: {
+        url: `${prefix}/tenant/admin/org-batch-import`,
+        method: 'POST'
+      },
       userList: {
         url: `${prefix}/tenant/admin/user-list`,
         method: 'GET'
@@ -321,6 +325,28 @@ const getApis = options => {
           method: 'POST'
         }
       },
+      sharedGroup: {
+        list: {
+          url: `${prefix}/tenant/admin/shared-group/list`,
+          method: 'GET'
+        },
+        create: {
+          url: `${prefix}/tenant/admin/shared-group/create`,
+          method: 'POST'
+        },
+        save: {
+          url: `${prefix}/tenant/admin/shared-group/save`,
+          method: 'POST'
+        },
+        setStatus: {
+          url: `${prefix}/tenant/admin/shared-group/set-status`,
+          method: 'POST'
+        },
+        remove: {
+          url: `${prefix}/tenant/admin/shared-group/remove`,
+          method: 'POST'
+        }
+      },
       permission: {
         list: {
           url: `${prefix}/tenant/admin/permission/list`,
@@ -377,6 +403,10 @@ const getApis = options => {
         url: `${prefix}/tenant/org-remove`,
         method: 'POST'
       },
+      orgBatchImport: {
+        url: `${prefix}/tenant/org-batch-import`,
+        method: 'POST'
+      },
       userList: {
         url: `${prefix}/tenant/user-list`,
         method: 'GET'
@@ -439,6 +469,28 @@ const getApis = options => {
           method: 'POST'
         }
       },
+      sharedGroup: {
+        list: {
+          url: `${prefix}/tenant/shared-group/list`,
+          method: 'GET'
+        },
+        create: {
+          url: `${prefix}/tenant/shared-group/create`,
+          method: 'POST'
+        },
+        save: {
+          url: `${prefix}/tenant/shared-group/save`,
+          method: 'POST'
+        },
+        setStatus: {
+          url: `${prefix}/tenant/shared-group/set-status`,
+          method: 'POST'
+        },
+        remove: {
+          url: `${prefix}/tenant/shared-group/remove`,
+          method: 'POST'
+        }
+      },
       permission: {
         list: {
           url: `${prefix}/tenant/permission/list`,
diff --git a/src/components/BizUnit/index.js b/src/components/BizUnit/index.js
index 8af6e96..17f3382 100644
--- a/src/components/BizUnit/index.js
+++ b/src/components/BizUnit/index.js
@@ -1,5 +1,5 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState, useEffect, useMemo } from 'react';
 import { Flex } from 'antd';
 import useRefCallback from '@kne/use-ref-callback';
 import merge from 'lodash/merge';
@@ -41,6 +41,7 @@ const BizUnit = createWithRemoteLoader({
           },
           keywordFilterName: 'keyword',
           keywordFilterLabel: formatMessage({ id: 'Keyword' }),
+          mapFilterValue: null,
           getFilterValue: filterValue => ({
             params: {
               filter: filterValue
@@ -53,7 +54,9 @@ const BizUnit = createWithRemoteLoader({
       const ref = useRef();
       const { SearchInput, getFilterValue } = Filter;
       const [filter, setFilter] = useState([]);
-      const filterValue = getFilterValue(filter);
+      const filterValue = options.mapFilterValue ? options.mapFilterValue(filter, getFilterValue) : getFilterValue(filter);
+      const filterParamsKey = useMemo(() => JSON.stringify(filterValue), [filterValue]);
+      const isFirstFilterEffect = useRef(true);
       const topOptions = (
         <Flex gap={8}>
           {allowKeywordSearch && <SearchInput size={topOptionsSize} name={options.keywordFilterName} label={options.keywordFilterLabel} />}
@@ -104,12 +107,26 @@ const BizUnit = createWithRemoteLoader({
       });
 
       const handlerMount = useRefCallback(() => {
-        onMount && onMount({ filter: { value: filter, onChange: setFilter }, topOptions, tableOptions });
+        onMount &&
+          onMount({
+            filter: { value: filter, onChange: setFilter },
+            filterList,
+            topOptions,
+            tableOptions
+          });
       });
 
       useEffect(() => {
         handlerMount();
-      }, [handlerMount]);
+      }, [handlerMount, filter]);
+
+      useEffect(() => {
+        if (isFirstFilterEffect.current) {
+          isFirstFilterEffect.current = false;
+          return;
+        }
+        ref.current?.reload?.();
+      }, [filterParamsKey]);
       if (typeof children === 'function') {
         return children({
           filter: { value: filter, onChange: setFilter, list: filterList },
diff --git a/src/components/Signature/index.js b/src/components/Signature/index.js
index 321c1b4..454eb54 100644
--- a/src/components/Signature/index.js
+++ b/src/components/Signature/index.js
@@ -6,6 +6,7 @@ import withLocale from './withLocale';
 import { useIntl } from '@kne/react-intl';
 import BizUnit from '@components/BizUnit';
 import { useRef } from 'react';
+import TablePageRender from '../BizUnit/TablePageRender';
 
 const VerifyAction = createWithRemoteLoader({
   modules: ['components-core:FormInfo', 'components-core:FormInfo@useFormModal', 'components-core:Global@usePreset']
@@ -68,8 +69,7 @@ const VerifyAction = createWithRemoteLoader({
             />
           )
         });
-      }}
-    >
+      }}>
       {formatMessage({ id: 'Verify' })}
     </a>
   );
@@ -82,98 +82,99 @@ const CreateButton = createWithRemoteLoader({
     'components-core:Global@usePreset',
     'components-core:InfoPage@CentralContent'
   ]
-})(({ remoteModules, onSuccess }) => {
-  const [FormInfo, useFormModal, usePreset, CentralContent] = remoteModules;
-  const { formatMessage } = useIntl();
-  const { ajax, apis } = usePreset();
-  const { TextArea } = FormInfo.fields;
-  const formModal = useFormModal();
-  const { modal } = App.useApp();
+})(
+  withLocale(({ remoteModules, onSuccess }) => {
+    const [FormInfo, useFormModal, usePreset, CentralContent] = remoteModules;
+    const { formatMessage } = useIntl();
+    const { ajax, apis } = usePreset();
+    const { TextArea } = FormInfo.fields;
+    const formModal = useFormModal();
+    const { modal } = App.useApp();
 
-  return (
-    <Button
-      type="primary"
-      onClick={() => {
-        const formModalApi = formModal({
-          title: formatMessage({ id: 'AddSecretKey' }),
-          size: 'small',
-          formProps: {
-            onSubmit: async data => {
-              const { data: resData } = await ajax(
-                Object.assign({}, apis.signature.create, {
-                  data
-                })
-              );
-              if (resData.code !== 0) {
-                return;
+    return (
+      <Button
+        type="primary"
+        onClick={() => {
+          const formModalApi = formModal({
+            title: formatMessage({ id: 'AddSecretKey' }),
+            size: 'small',
+            formProps: {
+              onSubmit: async data => {
+                const { data: resData } = await ajax(
+                  Object.assign({}, apis.signature.create, {
+                    data
+                  })
+                );
+                if (resData.code !== 0) {
+                  return;
+                }
+                onSuccess && onSuccess();
+                formModalApi.close();
+                modal.info({
+                  icon: null,
+                  size: 'large',
+                  width: '800px',
+                  title: formatMessage({ id: 'SecretKeyGenerated' }),
+                  content: (
+                    <Flex vertical gap={10}>
+                      <Alert type="error" message={formatMessage({ id: 'SaveSecretKeyWarning' })} />
+                      <CentralContent
+                        dataSource={resData.data}
+                        col={1}
+                        columns={[
+                          {
+                            name: 'appId',
+                            title: 'AppId'
+                          },
+                          {
+                            name: 'secretKey',
+                            title: 'SecretKey'
+                          }
+                        ]}
+                      />
+                    </Flex>
+                  )
+                });
               }
-              onSuccess && onSuccess();
-              formModalApi.close();
-              modal.info({
-                icon: null,
-                size: 'large',
-                width: '800px',
-                title: formatMessage({ id: 'SecretKeyGenerated' }),
-                content: (
-                  <Flex vertical gap={10}>
-                    <Alert type="error" message={formatMessage({ id: 'SaveSecretKeyWarning' })} />
-                    <CentralContent
-                      dataSource={resData.data}
-                      col={1}
-                      columns={[
-                        {
-                          name: 'appId',
-                          title: 'AppId'
-                        },
-                        {
-                          name: 'secretKey',
-                          title: 'SecretKey'
-                        }
-                      ]}
-                    />
-                  </Flex>
-                )
-              });
-            }
-          },
-          children: (
-            <FormInfo
-              column={1}
-              list={[
-                <UserSelect name="userId" label={formatMessage({ id: 'BelongUser' })} single interceptor="object-output-value" />,
-                <TextArea name="description" label={formatMessage({ id: 'Description' })} maxLength={100} />
-              ]}
-            />
-          )
-        });
-      }}
-    >
-      {formatMessage({ id: 'AddSecretKey' })}
-    </Button>
-  );
-});
+            },
+            children: (
+              <FormInfo
+                column={1}
+                list={[
+                  <UserSelect name="userId" label={formatMessage({ id: 'BelongUser' })} single interceptor="object-output-value" />,
+                  <TextArea name="description" label={formatMessage({ id: 'Description' })} maxLength={100} />
+                ]}
+              />
+            )
+          });
+        }}>
+        {formatMessage({ id: 'AddSecretKey' })}
+      </Button>
+    );
+  })
+);
 
 const Signature = createWithRemoteLoader({
   modules: ['components-core:Global@usePreset']
-})(withLocale(({ remoteModules }) => {
-  const [usePreset] = remoteModules;
-  const { apis: presetApis } = usePreset();
-  const { formatMessage } = useIntl();
-  const tableRef = useRef(null);
+})(
+  withLocale(({ remoteModules }) => {
+    const [usePreset] = remoteModules;
+    const { apis: presetApis } = usePreset();
+    const { formatMessage } = useIntl();
+    const tableRef = useRef(null);
 
-  const apis = {
-    list: presetApis.signature.list,
-    remove: presetApis.signature.remove,
-    setStatus: presetApis.signature.update
-  };
+    const apis = {
+      list: presetApis.signature.list,
+      remove: presetApis.signature.remove,
+      setStatus: presetApis.signature.update
+    };
 
-  const columnsGetColumns = () => getColumns({ formatMessage });
+    const columnsGetColumns = () => getColumns({ formatMessage });
 
-  const getActionList = ({ data, ...props }) => {
-    const baseActions = ['setStatusOpen', 'setStatusClose', 'remove']
-      .map(name => ({
+    const getActionList = ({ data, ...props }) => {
+      const baseActions = ['setStatusOpen', 'setStatusClose', 'remove'].map(name => ({
         name,
-        reset: (config) => {
+        reset: config => {
           if (name === 'remove') {
             return { ...config, hidden: data.status === 0 };
           }
@@ -187,47 +188,47 @@ const Signature = createWithRemoteLoader({
         }
       }));
 
-    return [
-      {
-        ...props,
-        buttonComponent: VerifyAction,
-        data
-      },
-      ...baseActions
-    ];
-  };
+      return [
+        {
+          ...props,
+          buttonComponent: VerifyAction,
+          data
+        },
+        ...baseActions
+      ];
+    };
 
-  const options = {
-    bizName: '密钥',
-    openStatus: 0,
-    closedStatus: 1,
-    openButtonProps: {
-      children: formatMessage({ id: 'Enabled' })
-    },
-    closeButtonProps: {
-      children: formatMessage({ id: 'Disabled' })
-    },
-    closeMessage: formatMessage({ id: 'DisableSecretKeyMessage' }),
-    removeMessage: formatMessage({ id: 'ConfirmDelete' }, { bizName: '密钥' })
-  };
+    const options = {
+      bizName: '密钥',
+      openStatus: 0,
+      closedStatus: 1,
+      openButtonProps: {
+        children: formatMessage({ id: 'Enabled' })
+      },
+      closeButtonProps: {
+        children: formatMessage({ id: 'Disabled' })
+      },
+      closeMessage: formatMessage({ id: 'DisableSecretKeyMessage' }),
+      removeMessage: formatMessage({ id: 'ConfirmDelete' }, { bizName: '密钥' })
+    };
 
-  return (
-    <BizUnit
-      name="signature-list"
-      apis={apis}
-      getColumns={columnsGetColumns}
-      getActionList={getActionList}
-      options={options}
-      allowKeywordSearch={false}
-      onMount={({ tableOptions }) => {
-        tableRef.current = tableOptions.ref.current;
-      }}
-      titleExtra={
-        <CreateButton onSuccess={() => tableRef.current?.reload()} />
-      }
-    />
-  );
-}));
+    return (
+      <BizUnit
+        name="signature-list"
+        apis={apis}
+        getColumns={columnsGetColumns}
+        getActionList={getActionList}
+        options={options}
+        allowKeywordSearch={false}
+        onMount={({ tableOptions }) => {
+          tableRef.current = tableOptions.ref.current;
+        }}
+        titleExtra={<CreateButton onSuccess={() => tableRef.current?.reload()} />}>
+        {props => <TablePageRender {...props} />}
+      </BizUnit>
+    );
+  })
+);
 
 export default Signature;
 export { getColumns };
diff --git a/src/components/Signature/locale/en-US.js b/src/components/Signature/locale/en-US.js
index 7ea2125..21b2fe6 100644
--- a/src/components/Signature/locale/en-US.js
+++ b/src/components/Signature/locale/en-US.js
@@ -35,6 +35,7 @@ const locale = {
   DisableSecretKeyTitle: 'Friendly Reminder',
   DisableSecretKeyMessage: 'After disabling this secret key, all requests using this key will be rejected. Are you sure you want to disable this secret key?',
   EnableSecretKeyMessage: 'After enabling this secret key, it will be allowed to access requests. Are you sure you want to enable this secret key?',
+  ConfirmDelete: 'Are you sure you want to delete {bizName}?',
 
   // Form rules
   InputNumber: 'Please enter a number'
diff --git a/src/components/Signature/locale/zh-CN.js b/src/components/Signature/locale/zh-CN.js
index 31abaf5..9a304af 100644
--- a/src/components/Signature/locale/zh-CN.js
+++ b/src/components/Signature/locale/zh-CN.js
@@ -35,6 +35,7 @@ const locale = {
   DisableSecretKeyTitle: '温馨提示',
   DisableSecretKeyMessage: '禁用此密钥后，将拒绝此密钥的所有请求。是否确定要禁用此密钥？',
   EnableSecretKeyMessage: '启用此密钥后，将允许此密钥访问请求。是否确定要启用此密钥？',
+  ConfirmDelete: '确定要删除{bizName}吗？',
 
   // Form rules
   InputNumber: '请输入数字'
diff --git a/src/components/Tenant/CompanyInfo/Banner/FormInner.js b/src/components/Tenant/CompanyInfo/Banner/FormInner.js
index d6fc424..6994142 100644
--- a/src/components/Tenant/CompanyInfo/Banner/FormInner.js
+++ b/src/components/Tenant/CompanyInfo/Banner/FormInner.js
@@ -10,7 +10,8 @@ const FormInner = createWithRemoteLoader({
   const { formatMessage } = useIntl();
   const { Upload } = FormInfo.fields;
   return (
-    <FormInfo
+    <FormInfo bordered
+      title={formatMessage({ id: 'Banner' })}
       className={style['form-section']}
       list={[
         <Upload
diff --git a/src/components/Tenant/CompanyInfo/Banner/index.js b/src/components/Tenant/CompanyInfo/Banner/index.js
index 796ffca..b38e0dc 100644
--- a/src/components/Tenant/CompanyInfo/Banner/index.js
+++ b/src/components/Tenant/CompanyInfo/Banner/index.js
@@ -10,17 +10,15 @@ const Banner = createWithRemoteLoader({
     return null;
   }
   return (
-    <div className={style['section']}>
-      <Carousel arrows autoplay className={style['images']}>
-        {data.banners.map((image, index) => {
-          return (
-            <div key={index}>
-              <Image id={image} className={style['image-item']} />
-            </div>
-          );
-        })}
-      </Carousel>
-    </div>
+    <Carousel arrows autoplay className={style.images}>
+      {data.banners.map((image, index) => {
+        return (
+          <div key={index}>
+            <Image id={image} className={style['image-item']} />
+          </div>
+        );
+      })}
+    </Carousel>
   );
 });
 
diff --git a/src/components/Tenant/CompanyInfo/Basic/FormInner.js b/src/components/Tenant/CompanyInfo/Basic/FormInner.js
index a0bd696..fe59984 100644
--- a/src/components/Tenant/CompanyInfo/Basic/FormInner.js
+++ b/src/components/Tenant/CompanyInfo/Basic/FormInner.js
@@ -1,4 +1,5 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Flex } from 'antd';
 import { useIntl } from '@kne/react-intl';
 import withLocale from '../../withLocale';
 import style from '../style.module.scss';
@@ -8,18 +9,43 @@ const FormInner = createWithRemoteLoader({
 })(withLocale(({ remoteModules }) => {
   const [FormInfo] = remoteModules;
   const { formatMessage } = useIntl();
-  const { Input, TextArea } = FormInfo.fields;
+  const { Input, TextArea, Upload, Avatar, DatePicker } = FormInfo.fields;
+  const { TableList } = FormInfo;
 
   return (
-    <FormInfo
-      className={style['form-section']}
-      list={[
-        <Input name="name" label={formatMessage({ id: 'CompanyName' })} rule="REQ LEN-0-100" />,
-        <Input name="fullName" label={formatMessage({ id: 'CompanyFullName' })} rule="LEN-0-100" />,
-        <Input name="website" label={formatMessage({ id: 'CompanyWebsite' })} rule="LEN-0-500" block />,
-        <TextArea name="description" label={formatMessage({ id: 'CompanyDescription' })} rule="LEN-0-5000" block />
-      ]}
-    />
+    <Flex vertical gap={24} className={style['form-section']}>
+      <FormInfo bordered
+        title={formatMessage({ id: 'CompanyBasicSection' })}
+        list={[
+          <Upload
+            name="banners"
+            label={formatMessage({ id: 'BannerBackground' })}
+            interceptor="photo-string-list"
+            block
+            getPermission={type => {
+              return ['preview', 'delete'].indexOf(type) > -1;
+            }}
+          />,
+          <Avatar name="logo" label={formatMessage({ id: 'CompanyLogo' })} interceptor="photo-string" block />,
+          <Input name="name" label={formatMessage({ id: 'CompanyName' })} rule="REQ LEN-0-100" />,
+          <Input name="fullName" label={formatMessage({ id: 'CompanyFullName' })} rule="LEN-0-100" />,
+          <Input name="industry" label={formatMessage({ id: 'CompanyIndustry' })} rule="LEN-0-100" />,
+          <Input name="scale" label={formatMessage({ id: 'CompanyScale' })} rule="LEN-0-100" />,
+          <Input name="website" label={formatMessage({ id: 'CompanyWebsite' })} rule="LEN-0-500" block />,
+          <Input name="address" label={formatMessage({ id: 'CompanyAddress' })} rule="LEN-0-200" block />,
+          <Input name="phone" label={formatMessage({ id: 'PhoneTitle' })} rule="LEN-0-50" />,
+          <Input name="email" label={formatMessage({ id: 'Email' })} rule="LEN-0-100" />,
+          <DatePicker name="foundedDate" label={formatMessage({ id: 'CompanyFounded' })} />,
+          <TextArea name="description" label={formatMessage({ id: 'CompanyDescription' })} rule="LEN-0-5000" block />,
+          <TableList block
+                     name="companyTags"
+                     title={formatMessage({ id: 'CompanyTags' })}
+                     maxLength={12}
+                     list={[<Input name="label" label={formatMessage({ id: 'CompanyTagLabel' })} rule="LEN-0-40" />]}
+          />
+        ]}
+      />
+    </Flex>
   );
 }));
 
diff --git a/src/components/Tenant/CompanyInfo/Basic/index.js b/src/components/Tenant/CompanyInfo/Basic/index.js
index 606636c..e93a8a4 100644
--- a/src/components/Tenant/CompanyInfo/Basic/index.js
+++ b/src/components/Tenant/CompanyInfo/Basic/index.js
@@ -1,45 +1,195 @@
+import dayjs from 'dayjs';
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Typography } from 'antd';
+import { Carousel, Row, Col, Tag, Space, Typography } from 'antd';
+import { GlobalOutlined, EnvironmentOutlined, PhoneOutlined, MailOutlined, CalendarOutlined, BankOutlined, TeamOutlined } from '@ant-design/icons';
 import withLocale from '../../withLocale';
-import style from '../style.module.scss';
 import { useIntl } from '@kne/react-intl';
+import style from '../style.module.scss';
+
+const { Title, Paragraph, Text, Link } = Typography;
+
+const formatFounded = value => {
+  if (!value) return '';
+  const d = dayjs(value);
+  return d.isValid() ? d.format('YYYY-MM-DD') : String(value);
+};
+
+const normalizeCompanyTags = raw => {
+  if (!raw || !Array.isArray(raw)) return [];
+  return raw
+    .map(item => {
+      if (typeof item === 'string') return item.trim();
+      const v = item?.label ?? item?.name;
+      return typeof v === 'string' ? v.trim() : '';
+    })
+    .filter(Boolean);
+};
 
 const Basic = createWithRemoteLoader({
-  modules: ['components-core:InfoPage@Content']
+  modules: ['components-core:Image']
 })(
-  withLocale(({ remoteModules, data }) => {
-    const [Content] = remoteModules;
+  withLocale(({ remoteModules, data: raw }) => {
+    const [Image] = remoteModules;
     const { formatMessage } = useIntl();
+    const data = raw || {};
+
+    const banners = data.banners;
+    const hasBanners = Array.isArray(banners) && banners.length > 0;
+
+    const name = data.name;
+    const fullName = data.fullName;
+    const website = data.website;
+    const description = data.description;
+    const logo = data.logo;
+    const industry = data.industry;
+    const scale = data.scale;
+    const address = data.address;
+    const phone = data.phone;
+    const email = data.email;
+    const foundedDate = data.foundedDate;
+
+    const companyTags = normalizeCompanyTags(data.companyTags);
+    const hasHeroTags = companyTags.length > 0;
+
+    const metaItems = [
+      website && {
+        key: 'website',
+        icon: <GlobalOutlined />,
+        label: formatMessage({ id: 'CompanyWebsite' }),
+        node: (
+          <Link href={website} target="_blank" rel="noopener noreferrer">
+            {website}
+          </Link>
+        )
+      },
+      industry && {
+        key: 'industry',
+        icon: <BankOutlined />,
+        label: formatMessage({ id: 'CompanyIndustry' }),
+        node: <Text className={style.basicMetaText}>{industry}</Text>
+      },
+      scale && {
+        key: 'scale',
+        icon: <TeamOutlined />,
+        label: formatMessage({ id: 'CompanyScale' }),
+        node: <Text className={style.basicMetaText}>{scale}</Text>
+      },
+      address && {
+        key: 'address',
+        icon: <EnvironmentOutlined />,
+        label: formatMessage({ id: 'CompanyAddress' }),
+        node: <Text className={style.basicMetaText}>{address}</Text>
+      },
+      phone && {
+        key: 'phone',
+        icon: <PhoneOutlined />,
+        label: formatMessage({ id: 'PhoneTitle' }),
+        node: (
+          <Link href={`tel:${String(phone).replace(/\s/g, '')}`} className={style.basicMetaText}>
+            {phone}
+          </Link>
+        )
+      },
+      email && {
+        key: 'email',
+        icon: <MailOutlined />,
+        label: formatMessage({ id: 'Email' }),
+        node: (
+          <Link href={`mailto:${email}`} className={style.basicMetaText}>
+            {email}
+          </Link>
+        )
+      },
+      foundedDate && {
+        key: 'founded',
+        icon: <CalendarOutlined />,
+        label: formatMessage({ id: 'CompanyFounded' }),
+        node: <Text className={style.basicMetaText}>{formatFounded(foundedDate)}</Text>
+      }
+    ].filter(Boolean);
+
+    const nameInitial = (name || '?').trim().charAt(0) || '?';
+
+    const hasBodyContent = Boolean(description || metaItems.length > 0);
+
     return (
-      <div className={style['section']}>
-        <Content
-          col={2}
-          list={[
-            {
-              label: formatMessage({ id: 'CompanyName' }),
-              content: data.name || '-'
-            },
-            {
-              label: formatMessage({ id: 'CompanyFullName' }),
-              content: data.fullName || '-'
-            },
-            {
-              label: formatMessage({ id: 'CompanyWebsite' }),
-              content: data.website ? (
-                <Typography.Link href={data.website} target="_blank">
-                  {data.website}
-                </Typography.Link>
-              ) : (
-                '-'
-              )
-            },
-            {
-              label: formatMessage({ id: 'CompanyDescription' }),
-              content: data.description || '-',
-              block: true
-            }
-          ]}
-        />
+      <div className={style.basicPanel}>
+        <div className={`${style.basicHeroBanner} ${!hasBanners ? style.basicHeroBannerDefault : ''}`}>
+          {hasBanners ? (
+            <div className={style.basicHeroBg}>
+              <Carousel autoplay effect="fade" dots className={style.basicHeroCarousel}>
+                {banners.map((imageId, index) => (
+                  <div key={`${imageId}-${index}`} className={style.basicHeroSlide}>
+                    <div className={style.basicHeroSlideInner}>
+                      <Image id={imageId} className={style.basicHeroBgImage} />
+                    </div>
+                  </div>
+                ))}
+              </Carousel>
+            </div>
+          ) : null}
+          <div className={style.basicHeroContent}>
+            <div className={style.basicHeroInner}>
+              <div className={style.basicLogo}>
+                {logo ? (
+                  <Image.Avatar size={80} id={logo} shape="square" />
+                ) : (
+                  <div className={style.basicLogoPlaceholder} aria-hidden>
+                    {nameInitial}
+                  </div>
+                )}
+              </div>
+              <div className={style.basicTitleBlock}>
+                <Title level={3} className={style.basicNameOnBanner}>
+                  {name || '-'}
+                </Title>
+                {fullName ? (
+                  <Text className={style.basicFullNameOnBanner}>{fullName}</Text>
+                ) : null}
+                {hasHeroTags ? (
+                  <Space size={[8, 8]} wrap className={style.basicTagsOnBanner}>
+                    {companyTags.map((text, i) => (
+                      <Tag key={`${text}-${i}`} bordered={false} className={style.basicTagOnBanner}>
+                        {text}
+                      </Tag>
+                    ))}
+                  </Space>
+                ) : null}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {hasBodyContent ? (
+          <div className={style.basicBody}>
+            {description ? (
+              <div className={style.basicDescWrap}>
+                <Text type="secondary" className={style.basicDescLabel}>
+                  {formatMessage({ id: 'CompanyDescription' })}
+                </Text>
+                <Paragraph className={style.basicDesc}>{description}</Paragraph>
+              </div>
+            ) : null}
+
+            {metaItems.length > 0 ? (
+              <div className={style.basicMetaGrid}>
+                <Row gutter={[20, 20]}>
+                  {metaItems.map(item => (
+                    <Col xs={24} sm={12} key={item.key}>
+                      <div className={style.basicMetaRow}>
+                        <span className={style.basicMetaIcon}>{item.icon}</span>
+                        <div className={style.basicMetaBody}>
+                          <div className={style.basicMetaLabel}>{item.label}</div>
+                          <div className={style.basicMetaValue}>{item.node}</div>
+                        </div>
+                      </div>
+                    </Col>
+                  ))}
+                </Row>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     );
   })
diff --git a/src/components/Tenant/CompanyInfo/DevelopmentHistory/FormInner.js b/src/components/Tenant/CompanyInfo/DevelopmentHistory/FormInner.js
index ce501be..896753a 100644
--- a/src/components/Tenant/CompanyInfo/DevelopmentHistory/FormInner.js
+++ b/src/components/Tenant/CompanyInfo/DevelopmentHistory/FormInner.js
@@ -8,10 +8,30 @@ const FormInner = createWithRemoteLoader({
 })(withLocale(({ remoteModules }) => {
   const [FormInfo] = remoteModules;
   const { formatMessage } = useIntl();
-  const { TableList } = FormInfo;
-  const { DatePicker, Input } = FormInfo.fields;
+  const { List } = FormInfo;
+  const { DatePicker, TextArea, Upload } = FormInfo.fields;
 
-  return <TableList className={style['form-section']} name="developmentHistory" list={[<DatePicker name="time" label={formatMessage({ id: 'Time' })} rule="REQ" />, <Input name="event" label={formatMessage({ id: 'Event' })} rule="REQ LEN-0-500" />]} />;
+  return (
+    <List bordered
+      className={style['form-section']}
+      title={formatMessage({ id: 'DevelopmentHistory' })}
+      name="developmentHistory"
+      list={[
+        <DatePicker name="time" label={formatMessage({ id: 'Time' })} rule="REQ" />,
+        <TextArea name="event" label={formatMessage({ id: 'Event' })} rule="REQ LEN-0-500" block />,
+        <Upload
+          name="images"
+          label={formatMessage({ id: 'HistoryImages' })}
+          interceptor="photo-string-list"
+          block
+          getPermission={type => {
+            return ['preview', 'delete'].indexOf(type) > -1;
+          }}
+        />,
+        <TextArea name="extra" label={formatMessage({ id: 'HistoryExtra' })} rule="LEN-0-500" block />
+      ]}
+    />
+  );
 }));
 
 export default FormInner;
diff --git a/src/components/Tenant/CompanyInfo/DevelopmentHistory/index.js b/src/components/Tenant/CompanyInfo/DevelopmentHistory/index.js
index 6b554cf..79549e0 100644
--- a/src/components/Tenant/CompanyInfo/DevelopmentHistory/index.js
+++ b/src/components/Tenant/CompanyInfo/DevelopmentHistory/index.js
@@ -1,27 +1,62 @@
-import { Timeline, Empty } from 'antd';
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { Empty } from 'antd';
 import dayjs from 'dayjs';
+import Timeline from '@kne/timeline';
+import withLocale from '../../withLocale';
 import style from '../style.module.scss';
 
-const DevelopmentHistory = ({ data }) => {
-  if (!(data.developmentHistory && data.developmentHistory.length > 0)) {
-    return <Empty />;
+const formatTime = time => {
+  if (!time) return '';
+  const d = dayjs(time);
+  if (!d.isValid()) return String(time);
+  return d.format('YYYY.MM');
+};
+
+const resolveImageSrc = (id, origin) => {
+  if (typeof id === 'string' && /^https?:\/\//i.test(id)) {
+    return id;
   }
-  return (
-    <div className={style['section']}>
-      <Timeline
-        mode="left"
-        className={style['timeline']}
-        items={data.developmentHistory.map(item => {
-          return {
-            label: dayjs(item.time).format('YYYY-MM-DD'),
-            children: item.event
-          };
-        })}
-      />
-    </div>
-  );
+  return `${origin}/api/v1/static/file-id/${id}`;
 };
 
+const DevelopmentHistory = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset']
+})(
+  withLocale(({ remoteModules, data }) => {
+    const [usePreset] = remoteModules;
+    const { staticUrl } = usePreset();
+    const list = data.developmentHistory;
+
+    if (!(list && list.length > 0)) {
+      return <Empty />;
+    }
+
+    const origin = (typeof staticUrl === 'string' && staticUrl) || (typeof window !== 'undefined' ? window.location.origin : '');
+
+    const timelineData = list.map(item => {
+      const row = {
+        title: formatTime(item.time),
+        content: item.event
+      };
+      if (item.images && item.images.length > 0) {
+        row.images = item.images.map(id => ({
+          src: resolveImageSrc(id, origin)
+        }));
+      }
+      if (item.extra) {
+        row.extra = item.extra;
+      }
+      return row;
+    });
+
+    return (
+      <div className={style.timelinePanel}>
+        <Timeline data={timelineData} />
+      </div>
+    );
+  })
+);
+
 export default DevelopmentHistory;
 
 export { default as FormInner } from './FormInner';
diff --git a/src/components/Tenant/CompanyInfo/TeamDescription/FormInner.js b/src/components/Tenant/CompanyInfo/TeamDescription/FormInner.js
index 75cb108..fd5afdb 100644
--- a/src/components/Tenant/CompanyInfo/TeamDescription/FormInner.js
+++ b/src/components/Tenant/CompanyInfo/TeamDescription/FormInner.js
@@ -5,25 +5,29 @@ import style from '../style.module.scss';
 
 const FormInner = createWithRemoteLoader({
   modules: ['components-core:FormInfo']
-})(withLocale(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  const { formatMessage } = useIntl();
+})(
+  withLocale(({ remoteModules }) => {
+    const [FormInfo] = remoteModules;
+    const { formatMessage } = useIntl();
 
-  const { List } = FormInfo;
-  const { Avatar, Input, TextArea } = FormInfo.fields;
+    const { List } = FormInfo;
+    const { Avatar, Input, TextArea } = FormInfo.fields;
 
-  return (
-    <List
-      className={style['form-section']}
-      name="teamDescription"
-      list={[
-        <Avatar name="avatar" label={formatMessage({ id: 'TeamAvatar' })} interceptor="photo-string" block />,
-        <Input name="name" label={formatMessage({ id: 'TeamName' })} rule="REQ LEN-0-100" />,
-        <Input name="role" label={formatMessage({ id: 'TeamRole' })} rule="REQ LEN-0-100" />,
-        <TextArea name="description" label={formatMessage({ id: 'TeamIntroduction' })} rule="LEN-0-500" block />
-      ]}
-    />
-  );
-}));
+    return (
+      <List
+        bordered
+        className={style['form-section']}
+        title={formatMessage({ id: 'TeamDescription' })}
+        name="teamDescription"
+        list={[
+          <Avatar name="avatar" label={formatMessage({ id: 'TeamAvatar' })} interceptor="photo-string" block />,
+          <Input name="name" label={formatMessage({ id: 'TeamName' })} rule="REQ LEN-0-100" />,
+          <Input name="role" label={formatMessage({ id: 'TeamRole' })} rule="REQ LEN-0-100" />,
+          <TextArea name="description" label={formatMessage({ id: 'TeamIntroduction' })} rule="LEN-0-500" block />
+        ]}
+      />
+    );
+  })
+);
 
 export default FormInner;
diff --git a/src/components/Tenant/CompanyInfo/TeamDescription/index.js b/src/components/Tenant/CompanyInfo/TeamDescription/index.js
index c5d1dd0..3de791c 100644
--- a/src/components/Tenant/CompanyInfo/TeamDescription/index.js
+++ b/src/components/Tenant/CompanyInfo/TeamDescription/index.js
@@ -1,46 +1,33 @@
+import '@kne/react-box/dist/index.css';
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Card, Empty, Typography, Row, Col } from 'antd';
-import style from '../style.module.scss';
+import { Empty, Row, Col } from 'antd';
+import { PersonalCard } from '@kne/react-box';
 
-const { Title, Paragraph } = Typography;
-
-const TeamMember = createWithRemoteLoader({
+const TeamDescription = createWithRemoteLoader({
   modules: ['components-core:Image']
-})(({ remoteModules, avatar, name, role, description }) => {
+})(({ remoteModules, data }) => {
   const [Image] = remoteModules;
-  return (
-    <Card className={style['team-card']}>
-      <div className={style['member-avatar']}>
-        <Image.Avatar size={100} id={avatar} />
-      </div>
-      <Title level={4}>{name}</Title>
-      <Title level={5} type="secondary">
-        {role}
-      </Title>
-      <Paragraph>{description}</Paragraph>
-    </Card>
-  );
-});
-
-const TeamDescription = ({ data }) => {
   if (!(data.teamDescription && data.teamDescription.length > 0)) {
     return <Empty />;
   }
 
   return (
-    <div className={style['section']}>
-      <Row gutter={[24, 24]} justify="center">
-        {data.teamDescription.map((item, index) => {
-          return (
-            <Col xs={24} sm={12} lg={8} key={index}>
-              <TeamMember avatar={item.avatar} name={item.name} role={item.role} description={item.description} />
-            </Col>
-          );
-        })}
-      </Row>
-    </div>
+    <Row gutter={[16, 16]} justify="center">
+      {data.teamDescription.map((item, index) => (
+        <Col xs={24} sm={12} lg={8} key={index}>
+          <PersonalCard
+            avatar={({ className }) => <Image.Avatar className={className} size={'100%'} id={item.avatar} />}
+            name={item.name}
+            title={item.role}
+            description={item.description}
+            status="online"
+            mode="vertical"
+          />
+        </Col>
+      ))}
+    </Row>
   );
-};
+});
 
 export default TeamDescription;
 export { default as FormInner } from './FormInner';
diff --git a/src/components/Tenant/CompanyInfo/index.js b/src/components/Tenant/CompanyInfo/index.js
index 1efd606..45e8cab 100644
--- a/src/components/Tenant/CompanyInfo/index.js
+++ b/src/components/Tenant/CompanyInfo/index.js
@@ -1,10 +1,11 @@
+import '@kne/timeline/dist/index.css';
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { Button, Flex } from 'antd';
 import { FormOutlined } from '@ant-design/icons';
 import { useState } from 'react';
 import DevelopmentHistory, { FormInner as DevelopmentHistoryFormInner } from './DevelopmentHistory';
 import Basic, { FormInner as BasicFormInner } from './Basic';
-import Banner, { FormInner as BannerFormInner } from './Banner';
+import Banner from './Banner';
 import TeamDescription, { FormInner as TeamDescriptionFormInner } from './TeamDescription';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
@@ -15,10 +16,8 @@ const CompanyDetail = createWithRemoteLoader({
 })(({ remoteModules, data }) => {
   const [InfoPage] = remoteModules;
   const { formatMessage } = useIntl();
-
   return (
-    <>
-      <Banner data={data} />
+    <Flex vertical gap={24}>
       <InfoPage.Part>
         <Basic data={data} />
       </InfoPage.Part>
@@ -28,45 +27,36 @@ const CompanyDetail = createWithRemoteLoader({
       <InfoPage.Part title={formatMessage({ id: 'TeamDescription' })}>
         <TeamDescription data={data} />
       </InfoPage.Part>
-    </>
+    </Flex>
   );
 });
 
 const CompanyInfo = createWithRemoteLoader({
   modules: ['components-core:InfoPage', 'components-core:FormInfo']
-})(withLocale(({ remoteModules, data, onSubmit, hasEdit = true, apis }) => {
-  const [InfoPage, FormInfo] = remoteModules;
-  const [isEdit, setIsEdit] = useState(false);
-  const { formatMessage } = useIntl();
+})(
+  withLocale(({ remoteModules, data, onSubmit, hasEdit = true, apis }) => {
+    const [InfoPage, FormInfo] = remoteModules;
+    const [isEdit, setIsEdit] = useState(false);
+    const { formatMessage } = useIntl();
 
-  const { Form, SubmitButton, CancelButton } = FormInfo;
+    const { Form, SubmitButton, CancelButton } = FormInfo;
 
-  if (isEdit) {
-    return (
-      <Form
-        className={style['company-info']}
-        type="default"
-        data={data}
-        onSubmit={async formData => {
-          if ((await onSubmit(formData)) === false) {
-            return;
-          }
-          setIsEdit(false);
-        }}>
-        <InfoPage.Part bordered title={formatMessage({ id: 'CompanyInfo' })} className={style['section']}>
-          <Flex gap={24} vertical>
-            <InfoPage.Part>
-              <BannerFormInner />
-            </InfoPage.Part>
-            <InfoPage.Part>
-              <BasicFormInner />
-            </InfoPage.Part>
-            <InfoPage.Part title={formatMessage({ id: 'DevelopmentHistory' })}>
-              <DevelopmentHistoryFormInner />
-            </InfoPage.Part>
-            <InfoPage.Part title={formatMessage({ id: 'TeamDescription' })}>
-              <TeamDescriptionFormInner />
-            </InfoPage.Part>
+    if (isEdit) {
+      return (
+        <Form
+          className={style['company-info']}
+          type="inner"
+          data={data}
+          onSubmit={async formData => {
+            if ((await onSubmit(formData)) === false) {
+              return;
+            }
+            setIsEdit(false);
+          }}>
+          <Flex vertical gap={24}>
+            <BasicFormInner />
+            <DevelopmentHistoryFormInner />
+            <TeamDescriptionFormInner />
             <Flex justify="center" gap={12}>
               <SubmitButton>{formatMessage({ id: 'Save' })}</SubmitButton>
               <CancelButton
@@ -77,34 +67,33 @@ const CompanyInfo = createWithRemoteLoader({
               </CancelButton>
             </Flex>
           </Flex>
+        </Form>
+      );
+    }
+
+    return (
+      <InfoPage className={style['company-info']}>
+        <InfoPage.Part
+          title={formatMessage({ id: 'CompanyInfo' })}
+          bordered
+          extra={
+            hasEdit && (
+              <Button
+                type="link"
+                icon={<FormOutlined />}
+                onClick={() => {
+                  setIsEdit(true);
+                }}>
+                {formatMessage({ id: 'Edit' })}
+              </Button>
+            )
+          }>
+          <CompanyDetail data={data} />
         </InfoPage.Part>
-      </Form>
+      </InfoPage>
     );
-  }
-
-  return (
-    <InfoPage className={style['company-info']}>
-      <InfoPage.Part
-        className={style['section']}
-        title={formatMessage({ id: 'CompanyInfo' })}
-        bordered
-        extra={
-          hasEdit && (
-            <Button
-              type="link"
-              icon={<FormOutlined />}
-              onClick={() => {
-                setIsEdit(true);
-              }}>
-              {formatMessage({ id: 'Edit' })}
-            </Button>
-          )
-        }>
-        <CompanyDetail data={data} />
-      </InfoPage.Part>
-    </InfoPage>
-  );
-}));
+  })
+);
 
 CompanyInfo.Detail = CompanyDetail;
 CompanyInfo.Banner = Banner;
diff --git a/src/components/Tenant/CompanyInfo/style.module.scss b/src/components/Tenant/CompanyInfo/style.module.scss
index 92af11e..d3cb849 100644
--- a/src/components/Tenant/CompanyInfo/style.module.scss
+++ b/src/components/Tenant/CompanyInfo/style.module.scss
@@ -1,9 +1,330 @@
 .company-info {
-  max-width: 900px;
+  max-width: 960px;
   margin: 0 auto;
   width: 100%;
 }
 
+.basicPanel {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #e8edf3;
+  border-radius: 18px;
+  background: #fff;
+}
+
+.basicHeroBanner {
+  position: relative;
+  min-height: 220px;
+  overflow: hidden;
+  background: #0f172a;
+}
+
+.basicHeroBg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.basicHeroCarousel {
+  width: 100%;
+  height: 100% !important;
+
+  :global(.slick-slider),
+  :global(.slick-list),
+  :global(.slick-track),
+  :global(.slick-slide),
+  :global(.slick-slide > div) {
+    height: 100%;
+  }
+
+  :global(.slick-dots) {
+    z-index: 3;
+    bottom: 12px !important;
+  }
+
+  :global(.slick-dots li button) {
+    background: rgba(255, 255, 255, 0.45) !important;
+  }
+
+  :global(.slick-dots li.slick-active button) {
+    background: #fff !important;
+  }
+}
+
+.basicHeroSlide {
+  height: 100%;
+  overflow: hidden;
+}
+
+.basicHeroSlideInner {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  & > *,
+  :global(.ant-image) {
+    display: block !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  :global(.ant-image-img) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+  }
+}
+
+.basicHeroBgImage,
+.basicHeroSlideInner :global(img) {
+  display: block !important;
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  object-fit: cover;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform;
+}
+
+.basicHeroBanner:hover .basicHeroBgImage,
+.basicHeroBanner:hover .basicHeroSlideInner :global(img) {
+  transform: scale(1.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .basicHeroBgImage,
+  .basicHeroSlideInner :global(img) {
+    transition: none;
+    will-change: auto;
+  }
+
+  .basicHeroBanner:hover .basicHeroBgImage,
+  .basicHeroBanner:hover .basicHeroSlideInner :global(img) {
+    transform: scale(1);
+  }
+}
+
+.basicHeroBannerDefault {
+  background: linear-gradient(125deg, #eef2ff 0%, #e0e7ff 32%, #c7d2fe 68%, #a5b4fc 100%) !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -30%;
+    right: -10%;
+    width: 50%;
+    height: 100%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 68%);
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -20%;
+    left: -8%;
+    width: 40%;
+    height: 70%;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
+    pointer-events: none;
+  }
+}
+
+.basicHeroContent {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: flex-end;
+  min-height: 220px;
+  padding: 22px 24px 24px;
+}
+
+.basicHeroInner {
+  display: flex;
+  gap: 20px;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.basicLogo {
+  flex-shrink: 0;
+
+  :global(.ant-avatar) {
+    border-radius: 16px !important;
+    border: 3px solid rgba(255, 255, 255, 0.92);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  }
+}
+
+.basicLogoPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
+  border: 3px solid rgba(255, 255, 255, 0.92);
+  background: rgba(255, 255, 255, 0.22);
+  backdrop-filter: blur(6px);
+  color: #fff;
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.basicTitleBlock {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 2px;
+}
+
+.basicNameOnBanner {
+  margin: 0 0 4px !important;
+  font-size: 24px !important;
+  font-weight: 700 !important;
+  line-height: 1.25 !important;
+  color: #FFF !important;
+  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.65);
+}
+
+.basicFullNameOnBanner {
+  display: block;
+  margin-bottom: 10px !important;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #334155 !important;
+  text-shadow: 0 0 1px #fff,
+  0 0 1px #fff,
+  0 1px 1px rgba(15, 23, 42, 0.2);
+}
+
+.basicTagsOnBanner {
+  margin-top: 2px;
+}
+
+.basicTagOnBanner {
+  margin: 0 !important;
+  padding: 4px 12px !important;
+  color: #1e1b4b !important;
+  background: rgba(255, 255, 255, 0.92) !important;
+  border-radius: 999px !important;
+  font-size: 13px;
+  font-weight: 500;
+  border: none !important;
+}
+
+.basicBody {
+  border-top: 1px solid #f1f5f9;
+}
+
+.basicDescWrap {
+  padding: 22px 24px 0;
+}
+
+.basicDescLabel {
+  display: block;
+  margin-bottom: 8px !important;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+}
+
+.basicDesc {
+  margin: 0 !important;
+  padding-bottom: 22px;
+  color: #475569;
+  font-size: 15px;
+  line-height: 1.85;
+}
+
+.basicMetaGrid {
+  padding: 4px 24px 24px;
+}
+
+.basicMetaRow {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  height: 100%;
+}
+
+.basicMetaIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: #fff;
+  color: var(--primary-color);
+  font-size: 17px;
+  border: 1px solid #e8edf3;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+}
+
+.basicMetaBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.basicMetaLabel {
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+}
+
+.basicMetaValue {
+  font-size: 14px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.basicMetaText {
+  color: #334155 !important;
+}
+
+@media (max-width: 480px) {
+  .basicHeroInner {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .basicTitleBlock {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .basicTagsOnBanner {
+    justify-content: center;
+  }
+}
+
+.timelinePanel {
+  padding: 40px 20px 20px;
+  border: 1px solid #e8edf3;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: none;
+}
+
+.timelineText {
+  color: #475569;
+  line-height: 1.8;
+}
+
 .section {
   width: 100%;
   line-height: 2;
@@ -24,17 +345,9 @@
   }
 }
 
-.timeline {
-  margin: 0 auto;
-  padding: 40px 20px;
-
-  :global(.ant-timeline-item-content) {
-    font-size: 16px;
-  }
-}
-
 .form-section {
   margin: 0 auto;
+  width: 100%;
 }
 
 .images {
@@ -52,31 +365,3 @@
     object-fit: cover;
   }
 }
-
-.team-card {
-  height: 100%;
-  text-align: center;
-  padding: 32px 24px;
-  transition: all 0.3s;
-
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
-  }
-
-  .member-avatar {
-    margin-bottom: 24px;
-
-    :global(.ant-avatar) {
-      border: 4px solid #f0f0f0;
-    }
-  }
-
-  h4 {
-    margin-bottom: 8px;
-  }
-
-  h5 {
-    margin-bottom: 16px;
-  }
-}
diff --git a/src/components/Tenant/JoinInvitation/index.js b/src/components/Tenant/JoinInvitation/index.js
index 3811593..8dcff3e 100644
--- a/src/components/Tenant/JoinInvitation/index.js
+++ b/src/components/Tenant/JoinInvitation/index.js
@@ -1,19 +1,33 @@
+import '@kne/react-box/dist/index.css';
+import classnames from 'classnames';
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { useState } from 'react';
-import { Card, Button, Flex, Steps, Result } from 'antd';
+import { Button, Steps, Result, Typography } from 'antd';
+import { CheckCircleFilled } from '@ant-design/icons';
 import Fetch from '@kne/react-fetch';
 import CountDown from '@kne/count-down';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import CompanyInfo from '../CompanyInfo';
-import { UserCard } from '../UserList';
+import TenantUserPersonalCard from '../UserList/TenantUserPersonalCard';
+import normalizeTenantUserForPersonalCard from '../UserList/normalizeTenantUserForPersonalCard';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
 import style from './style.module.scss';
 
+const companyInitial = name => {
+  const text = String(name || '').trim();
+  return text ? text.charAt(0).toUpperCase() : '?';
+};
+
 const JoinInvitation = createWithRemoteLoader({
-  modules: ['components-core:Layout@Page', 'components-core:Global@usePreset', 'components-core:InfoPage', 'components-core:LoadingButton']
+  modules: [
+    'components-core:Layout@Page',
+    'components-core:Global@usePreset',
+    'components-core:LoadingButton',
+    'components-core:Image'
+  ]
 })(({ remoteModules, baseUrl = '', token: propsToken, children }) => {
-  const [Page, usePreset, InfoPage, LoadingButton] = remoteModules;
+  const [Page, usePreset, LoadingButton, Image] = remoteModules;
   const [current, setCurrent] = useState(0);
   const { formatMessage } = useIntl();
   const { apis, ajax } = usePreset();
@@ -22,88 +36,157 @@ const JoinInvitation = createWithRemoteLoader({
 
   const token = propsToken || searchParams.get('token');
 
+  const renderError = (title, subTitle) => (
+    <div className={style.page}>
+      <div className={classnames(style.shell, style.shellError)}>
+        <Result status="error" title={title} subTitle={subTitle} />
+      </div>
+    </div>
+  );
+
+  const renderHeader = company => (
+    <header className={style.header}>
+      {company?.logo ? (
+        <div className={style.headerLogo}>
+          <Image.Avatar id={company.logo} size={56} alt={company.name} />
+        </div>
+      ) : (
+        <div className={style.headerLogoFallback} aria-hidden>
+          {companyInitial(company?.name)}
+        </div>
+      )}
+      <div className={style.headerText}>
+        <Typography.Title level={4} className={style.headerTitle}>
+          {formatMessage({ id: 'InviteYouJoin' }, { name: company?.name || '' })}
+        </Typography.Title>
+        <Typography.Paragraph className={style.headerSubtitle}>
+          {formatMessage({ id: 'InviteJoinSubtitle' })}
+        </Typography.Paragraph>
+      </div>
+    </header>
+  );
+
   const pageProps = {
     children: (
       <Fetch
         {...Object.assign({}, apis.tenant.parseJoinToken, {
           data: { token }
         })}
-        error={error => {
-          return <Result status="error" title={error || formatMessage({ id: 'InviteLinkExpired' })} subTitle={formatMessage({ id: 'ContactAdmin' })} />;
-        }}
+        error={error =>
+          renderError(error || formatMessage({ id: 'InviteLinkExpired' }), formatMessage({ id: 'ContactAdmin' }))
+        }
         render={({ data }) => {
           const { tenant, tenantUser } = data;
           if (!(tenant && tenant.status === 'open' && tenantUser && tenantUser.status === 'open')) {
-            return <Result status="error" title={formatMessage({ id: 'InviteLinkExpired' })} subTitle={formatMessage({ id: 'ContactAdmin' })} />;
+            return renderError(formatMessage({ id: 'InviteLinkExpired' }), formatMessage({ id: 'ContactAdmin' }));
           }
-          return (
-            <Card className={style['card']} title={formatMessage({ id: 'InviteYouJoin' }, { name: data.company.name })}>
-              <Flex vertical gap={40}>
-                <Steps
-                  className={style['steps']}
-                  current={current}
-                  items={[
-                    {
-                      title: formatMessage({ id: 'ConfirmCompanyInfo' })
-                    },
-                    {
-                      title: formatMessage({ id: 'ConfirmEmployeeInfo' })
-                    },
-                    {
-                      title: formatMessage({ id: 'Complete' })
+
+          const stepItems = [
+            { title: formatMessage({ id: 'ConfirmCompanyInfo' }) },
+            { title: formatMessage({ id: 'ConfirmEmployeeInfo' }) },
+            { title: formatMessage({ id: 'Complete' }) }
+          ];
+
+          let footerClassName = style.footer;
+          let footerNode = null;
+
+          if (current === 0) {
+            footerNode = (
+              <Button
+                type="primary"
+                size="large"
+                className={style.footerBtn}
+                onClick={() => {
+                  setCurrent(1);
+                }}>
+                {formatMessage({ id: 'ConfirmCompanyInfo' })}
+              </Button>
+            );
+          } else if (current === 1) {
+            footerNode = (
+              <>
+                <Button
+                  size="large"
+                  className={style.footerBtn}
+                  onClick={() => {
+                    setCurrent(0);
+                  }}>
+                  {formatMessage({ id: 'StepBack' })}
+                </Button>
+                <LoadingButton
+                  type="primary"
+                  size="large"
+                  className={style.footerBtn}
+                  onClick={async () => {
+                    const { data: resData } = await ajax(
+                      Object.assign({}, apis.tenant.join, {
+                        data: { token }
+                      })
+                    );
+                    if (resData.code !== 0) {
+                      navigate(`${baseUrl}/login-tenant`);
+                      return;
                     }
-                  ]}
-                />
-                {current === 0 && (
-                  <InfoPage>
-                    <InfoPage.Part title={formatMessage({ id: 'CompanyInfo' })}>
+                    setCurrent(2);
+                  }}>
+                  {formatMessage({ id: 'ConfirmEmployeeInfo' })}
+                </LoadingButton>
+              </>
+            );
+          } else if (current === 2) {
+            footerNode = (
+              <Button
+                type="primary"
+                size="large"
+                className={style.footerBtn}
+                onClick={() => {
+                  window.location.href = `${baseUrl}/tenant`;
+                }}>
+                {formatMessage({ id: 'EnterDirectly' })}
+              </Button>
+            );
+          }
+
+          return (
+            <div className={style.page}>
+              <div className={style.shell}>
+                {renderHeader(data.company)}
+                <div className={style.content}>
+                  <div className={style.stepsWrap}>
+                    <Steps
+                      current={current}
+                      size="small"
+                      orientation="horizontal"
+                      titlePlacement="vertical"
+                      responsive={false}
+                      items={stepItems}
+                    />
+                  </div>
+                  <main className={style.main}>
+                    {current === 0 && (
+                    <div className={classnames(style.stepPanel, style.stepPanelCompany)}>
                       <CompanyInfo.Detail data={data.company} />
-                    </InfoPage.Part>
-                    <Flex justify="center">
-                      <Button
-                        type="primary"
-                        size="large"
-                        onClick={() => {
-                          setCurrent(1);
-                        }}>
-                        {formatMessage({ id: 'ConfirmCompanyInfo' })}
-                      </Button>
-                    </Flex>
-                  </InfoPage>
-                )}
-                {current === 1 && (
-                  <Flex vertical gap={60}>
-                    <UserCard data={data.tenantUser} />
-                    <Flex justify="center">
-                      <LoadingButton
-                        type="primary"
-                        size="large"
-                        onClick={async () => {
-                          const { data: resData } = await ajax(
-                            Object.assign({}, apis.tenant.join, {
-                              data: {
-                                token
-                              }
-                            })
-                          );
-                          if (resData.code !== 0) {
-                            navigate(`${baseUrl}/login-tenant`);
-                            return;
-                          }
-                          setCurrent(2);
-                        }}>
-                        {formatMessage({ id: 'ConfirmEmployeeInfo' })}
-                      </LoadingButton>
-                    </Flex>
-                  </Flex>
-                )}
-                {current === 2 && (
-                  <Flex vertical gap={60}>
-                    <Result
-                      status="success"
-                      title={formatMessage({ id: 'WelcomeJoin' }, { name: data.company.name })}
-                      subTitle={
-                        <>
+                    </div>
+                  )}
+                  {current === 1 && (
+                    <div className={classnames(style.stepPanel, style.stepPanelEmployee)}>
+                      <Typography.Paragraph className={style.stepHint}>
+                        {formatMessage({ id: 'ConfirmEmployeeInfoHint' })}
+                      </Typography.Paragraph>
+                      <TenantUserPersonalCard
+                        data={normalizeTenantUserForPersonalCard(tenantUser)}
+                        positionList={data.positionList}
+                      />
+                    </div>
+                  )}
+                  {current === 2 && (
+                    <div className={classnames(style.stepPanel, style.stepPanelSuccess)}>
+                      <CheckCircleFilled className={style.successIcon} />
+                      <Typography.Title level={4} className={style.successTitle}>
+                        {formatMessage({ id: 'WelcomeJoin' }, { name: data.company.name })}
+                      </Typography.Title>
+                      <Typography.Paragraph className={style.successSub}>
+                        <span className={style.countdownNum}>
                           <CountDown
                             duration={5}
                             format="s"
@@ -111,24 +194,16 @@ const JoinInvitation = createWithRemoteLoader({
                               window.location.href = `${baseUrl}/tenant`;
                             }}
                           />
-                          {formatMessage({ id: 'AutoJump' })}
-                        </>
-                      }
-                      extra={
-                        <Button
-                          type="primary"
-                          size="large"
-                          onClick={() => {
-                            window.location.href = `${baseUrl}/tenant`;
-                          }}>
-                          {formatMessage({ id: 'EnterDirectly' })}
-                        </Button>
-                      }
-                    />
-                  </Flex>
-                )}
-              </Flex>
-            </Card>
+                        </span>
+                        {formatMessage({ id: 'AutoJump' })}
+                      </Typography.Paragraph>
+                    </div>
+                  )}
+                  </main>
+                </div>
+                {footerNode ? <footer className={footerClassName}>{footerNode}</footer> : null}
+              </div>
+            </div>
           );
         }}
       />
diff --git a/src/components/Tenant/JoinInvitation/style.module.scss b/src/components/Tenant/JoinInvitation/style.module.scss
index cd6b2d1..a19942b 100644
--- a/src/components/Tenant/JoinInvitation/style.module.scss
+++ b/src/components/Tenant/JoinInvitation/style.module.scss
@@ -1,9 +1,360 @@
-.card {
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 24px 16px 40px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.shell {
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
+  max-width: 900px;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow:
+    0 4px 24px rgba(15, 23, 42, 0.06),
+    0 1px 2px rgba(15, 23, 42, 0.04);
+  overflow: hidden;
+}
+
+.shellError {
+  padding: 32px 24px;
+}
+
+.header {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  flex-shrink: 0;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+  background: linear-gradient(180deg, rgba(238, 242, 255, 0.65) 0%, #fff 100%);
+}
+
+.headerLogo {
+  flex-shrink: 0;
+
+  :global(.ant-avatar) {
+    border-radius: 12px !important;
+    border: 2px solid rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+  }
+}
+
+.headerLogoFallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--primary-color, #4f46e5) 0%, #6366f1 100%);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  flex-shrink: 0;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+}
+
+.headerText {
+  flex: 1;
+  min-width: 0;
+  padding-top: 2px;
+}
+
+.headerTitle {
+  margin: 0 0 4px !important;
+  font-size: 20px !important;
+  font-weight: 650 !important;
+  line-height: 1.35 !important;
+  color: rgba(15, 23, 42, 0.92) !important;
+  letter-spacing: -0.02em;
+}
+
+.headerSubtitle {
+  margin: 0 !important;
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgba(15, 23, 42, 0.55);
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  padding: 20px 24px 0;
+}
+
+.stepsWrap {
+  flex-shrink: 0;
+  margin-bottom: 24px;
+  padding: 20px 16px 22px;
+  border-radius: 12px;
+  background: #fafbff;
+  border: 1px solid #e8ecf4;
+
+  // antd 6：横向步骤 + 标题在序号下方（titlePlacement="vertical"）
+  :global {
+    .ant-steps.ant-steps-horizontal.ant-steps-title-vertical {
+      width: 100%;
+
+      > .ant-steps-item {
+        flex: 1 1 0;
+        min-width: 0;
+        overflow: visible;
+      }
+
+      .ant-steps-item-wrapper {
+        flex-direction: column;
+        align-items: center;
+        row-gap: 8px;
+      }
+
+      .ant-steps-item-icon {
+        margin-inline-end: 0 !important;
+      }
+
+      .ant-steps-item-section {
+        width: 100%;
+        min-width: 0;
+      }
+
+      .ant-steps-item-header {
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+        min-height: auto !important;
+      }
+
+      .ant-steps-item-title {
+        margin: 0 !important;
+        padding: 0 !important;
+        font-size: 13px;
+        line-height: 1.45;
+        text-align: center;
+        white-space: normal;
+        word-break: break-word;
+      }
+
+      .ant-steps-item-subtitle {
+        margin: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  padding-bottom: 8px;
+}
+
+.stepPanel {
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.stepPanelCompany {
+  padding: 0;
+  background: transparent;
+  border: none;
+
+  :global(.ant-flex) {
+    gap: 16px !important;
+  }
+}
+
+.stepPanelEmployee {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
 }
 
-.steps {
-  padding: 20px 80px;
+.stepHint {
+  margin: 0 !important;
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgba(15, 23, 42, 0.55);
+}
+
+.stepPanelSuccess {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 28px 20px;
+  text-align: center;
+  background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 100%);
+  border-color: #bbf7d0;
+}
+
+.successIcon {
+  margin-bottom: 12px;
+  font-size: 44px;
+  line-height: 1;
+  color: #22c55e;
+}
+
+.successTitle {
+  margin: 0 0 8px !important;
+  font-size: 18px !important;
+  font-weight: 650 !important;
+  color: rgba(15, 23, 42, 0.92) !important;
+}
+
+.successSub {
+  margin: 0 !important;
+  font-size: 14px;
+  line-height: 1.55;
+  color: rgba(15, 23, 42, 0.55);
+}
+
+.countdownNum {
+  display: inline-block;
+  min-width: 1.25em;
+  margin-right: 4px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--primary-color, #4f46e5);
+}
+
+.footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin: 20px 24px 24px;
+  padding: 20px 0 0;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+  background: #fff;
+}
+
+.footerBtn {
+  min-width: 140px;
+}
+
+@media (max-width: 575px) {
+  .page {
+    padding: 0;
+  }
+
+  .shell {
+    border-radius: 12px;
+  }
+
+  .shellError {
+    padding: 24px 16px;
+  }
+
+  .header {
+    gap: 10px;
+    padding: 16px 14px 14px;
+  }
+
+  .headerLogo {
+    :global(.ant-avatar) {
+      width: 48px !important;
+      height: 48px !important;
+      line-height: 48px !important;
+    }
+  }
+
+  .headerLogoFallback {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+  }
+
+  .headerTitle {
+    font-size: 16px !important;
+    line-height: 1.4 !important;
+    word-break: break-word;
+  }
+
+  .headerSubtitle {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .content {
+    padding: 14px 14px 0;
+  }
+
+  .stepsWrap {
+    margin-bottom: 16px;
+    padding: 14px 12px 16px;
+
+    :global {
+      .ant-steps.ant-steps-horizontal.ant-steps-title-vertical {
+        .ant-steps-item-wrapper {
+          row-gap: 6px;
+        }
+
+        .ant-steps-item-title {
+          font-size: 11px;
+          line-height: 1.35;
+        }
+      }
+    }
+  }
+
+  .main {
+    padding-bottom: 4px;
+  }
+
+  .stepPanel {
+    border-radius: 10px;
+  }
+
+  .stepPanelCompany {
+    :global(.ant-flex) {
+      gap: 12px !important;
+    }
+  }
+
+  .stepPanelEmployee {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .stepHint {
+    font-size: 12px;
+  }
+
+  .stepPanelSuccess {
+    padding: 20px 14px;
+  }
+
+  .successIcon {
+    font-size: 36px;
+  }
+
+  .successTitle {
+    font-size: 16px !important;
+  }
+
+  .successSub {
+    font-size: 13px;
+  }
+
+  .footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+    margin: 12px 14px max(16px, env(safe-area-inset-bottom, 0px));
+    padding: 14px 0 0;
+  }
+
+  .footerBtn {
+    width: 100%;
+    min-width: 0;
+  }
 }
diff --git a/src/components/Tenant/LoginTenant/SelectTenant.js b/src/components/Tenant/LoginTenant/SelectTenant.js
index b4a1f32..971f71f 100644
--- a/src/components/Tenant/LoginTenant/SelectTenant.js
+++ b/src/components/Tenant/LoginTenant/SelectTenant.js
@@ -1,5 +1,6 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Card, List, Flex, Button, App, Badge } from 'antd';
+import { Button, App, Tag, Typography, Empty, Spin } from 'antd';
+import { CheckOutlined, RightOutlined, UserOutlined, TeamOutlined } from '@ant-design/icons';
 import Fetch from '@kne/react-fetch';
 import { useState } from 'react';
 import classnames from 'classnames';
@@ -7,109 +8,175 @@ import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
 import style from './style.module.scss';
 
+const tenantInitial = name => {
+  const text = String(name || '').trim();
+  return text ? text.charAt(0).toUpperCase() : '?';
+};
+
+const getTenantDisplay = item => {
+  const tenant = item?.tenant || {};
+  const company = tenant.tenantCompany || {};
+
+  return {
+    logo: company.logo || tenant.logo,
+    companyName: company.name || tenant.name || '',
+    userName: item?.name || '',
+    orgName: item?.tenantOrg?.name || ''
+  };
+};
+
 const SelectTenant = createWithRemoteLoader({
-  modules: ['components-core:Global@usePreset', 'components-core:Image', 'components-core:InfoPage@SplitLine', 'components-core:Icon']
+  modules: ['components-core:Global@usePreset', 'components-core:Image']
 })(({ remoteModules, tenantPath }) => {
-  const [usePreset, Image, SplitLine, Icon] = remoteModules;
+  const [usePreset, Image] = remoteModules;
   const { formatMessage } = useIntl();
   const { apis, ajax } = usePreset();
   const { message } = App.useApp();
-  const [loading, setLoading] = useState(false);
+  const [switchingId, setSwitchingId] = useState(null);
+
   return (
-    <Card title={formatMessage({ id: 'SelectLoginTenant' })}>
-      <Fetch
-        {...Object.assign({}, apis.tenant.availableList)}
-        render={({ data, reload }) => {
-          const currentTenantUser = data.list.find(item => item.tenantId === data.defaultTenantId);
-          return (
-            <Flex vertical gap={60}>
-              <List
-                loading={loading}
-                dataSource={data.list}
-                renderItem={item => {
-                  const itemInner = (
-                    <List.Item.Meta
-                      avatar={<Image id={item.tenant?.tenantCompany?.logo || item.tenant?.logo} className={style['tenant-avatar']} />}
-                      title={item.tenant?.tenantCompany?.name}
-                      description={
-                        <SplitLine
-                          dataSource={item}
-                          columns={[
-                            {
-                              name: 'name',
-                              title: formatMessage({ id: 'Name' })
-                            },
-                            {
-                              name: 'tenantOrg.name',
-                              title: formatMessage({ id: 'Department' })
-                            }
-                          ]}
-                        />
-                      }
-                    />
-                  );
-                  const isSelected = item.tenantId === data.defaultTenantId;
-                  return (
-                    <List.Item
-                      key={item.id}
-                      onClick={async () => {
-                        if (isSelected || item.status !== 'open') {
-                          return;
-                        }
-                        setLoading(true);
-                        const { data: resData } = await ajax(
-                          Object.assign({}, apis.tenant.switchDefaultTenant, {
-                            data: { tenantId: item.tenantId }
-                          })
-                        );
-                        if (resData.code !== 0) {
-                          setLoading(false);
-                          return;
-                        }
-                        message.success(formatMessage({ id: 'SwitchDefaultTenantSuccess' }));
-                        reload();
-                        setLoading(false);
-                      }}
-                      className={classnames(style['tenant-item'], {
-                        [style['is-selected']]: isSelected,
-                        [style['is-disabled']]: item.status !== 'open'
-                      })}>
-                      {(() => {
-                        if (item.status !== 'open') {
+    <div className={style.page}>
+      <div className={style.shell}>
+        <header className={style.header}>
+          <Typography.Title level={4} className={style.headerTitle}>
+            {formatMessage({ id: 'SelectLoginTenant' })}
+          </Typography.Title>
+          <Typography.Paragraph className={style.headerSubtitle}>
+            {formatMessage({ id: 'SelectLoginTenantSubtitle' })}
+          </Typography.Paragraph>
+        </header>
+
+        <Fetch
+          {...Object.assign({}, apis.tenant.availableList)}
+          render={({ data, reload }) => {
+            const list = data?.list || [];
+            const defaultTenantId = data?.defaultTenantId;
+            const currentTenantUser = list.find(item => item.tenantId === defaultTenantId);
+            const canEnter = currentTenantUser && currentTenantUser.status === 'open';
+
+            return (
+              <>
+                <main className={style.main}>
+                  {list.length === 0 ? (
+                    <Empty className={style.empty} description={formatMessage({ id: 'NoAvailableTenant' })} />
+                  ) : (
+                    <Spin spinning={!!switchingId}>
+                      <div className={style.tenantList} role="listbox" aria-label={formatMessage({ id: 'SelectLoginTenant' })}>
+                        {list.map(item => {
+                          const display = getTenantDisplay(item);
+                          const isSelected = item.tenantId === defaultTenantId;
+                          const isDisabled = item.status !== 'open';
+
                           return (
-                            <Badge.Ribbon text={formatMessage({ id: 'TenantUserCannotUse' })} color="#CCCCCC">
-                              {itemInner}
-                            </Badge.Ribbon>
+                            <div
+                              key={item.id}
+                              role="option"
+                              aria-selected={isSelected}
+                              aria-disabled={isDisabled}
+                              className={classnames(style.tenantCard, {
+                                [style.tenantCardSelected]: isSelected,
+                                [style.tenantCardDisabled]: isDisabled
+                              })}
+                              onClick={async () => {
+                                if (isSelected || isDisabled || switchingId) {
+                                  return;
+                                }
+                                setSwitchingId(item.tenantId);
+                                const { data: resData } = await ajax(
+                                  Object.assign({}, apis.tenant.switchDefaultTenant, {
+                                    data: { tenantId: item.tenantId }
+                                  })
+                                );
+                                setSwitchingId(null);
+                                if (resData.code !== 0) {
+                                  return;
+                                }
+                                message.success(formatMessage({ id: 'SwitchDefaultTenantSuccess' }));
+                                reload();
+                              }}>
+                              {isSelected ? (
+                                <span className={style.cardSelectedMark} aria-hidden>
+                                  <CheckOutlined />
+                                </span>
+                              ) : null}
+
+                              <div className={style.cardAvatarWrap}>
+                                {display.logo ? (
+                                  <span className={style.cardAvatar}>
+                                    <Image.Avatar id={display.logo} size={52} />
+                                  </span>
+                                ) : (
+                                  <span className={style.cardAvatarFallback} aria-hidden>
+                                    {tenantInitial(display.companyName)}
+                                  </span>
+                                )}
+                              </div>
+
+                              <div className={style.cardBody}>
+                                <div className={style.cardTitleRow}>
+                                  <span className={style.cardCompany}>{display.companyName}</span>
+                                  {isDisabled ? (
+                                    <Tag bordered={false} className={style.cardTagMuted}>
+                                      {formatMessage({ id: 'TenantUserCannotUse' })}
+                                    </Tag>
+                                  ) : isSelected ? (
+                                    <Tag bordered={false} color="processing" className={style.cardTag}>
+                                      {formatMessage({ id: 'CurrentTenant' })}
+                                    </Tag>
+                                  ) : null}
+                                </div>
+                                {(display.userName || display.orgName) && (
+                                  <div className={style.cardMeta}>
+                                    {display.userName ? (
+                                      <span className={style.cardMetaItem}>
+                                        <UserOutlined className={style.cardMetaIcon} />
+                                        <span>{display.userName}</span>
+                                      </span>
+                                    ) : null}
+                                    {display.userName && display.orgName ? (
+                                      <span className={style.cardMetaDivider} aria-hidden>
+                                        ·
+                                      </span>
+                                    ) : null}
+                                    {display.orgName ? (
+                                      <span className={style.cardMetaItem}>
+                                        <TeamOutlined className={style.cardMetaIcon} />
+                                        <span>{display.orgName}</span>
+                                      </span>
+                                    ) : null}
+                                  </div>
+                                )}
+                              </div>
+                            </div>
                           );
-                        }
-                        if (isSelected) {
-                          return <Badge.Ribbon text={formatMessage({ id: 'CurrentTenant' })}>{itemInner}</Badge.Ribbon>;
-                        }
-                        return itemInner;
-                      })()}
-                    </List.Item>
-                  );
-                }}
-              />
-              {data.list.length > 0 && (
-                <Flex justify="center">
-                  <Button
-                    disabled={!(currentTenantUser && currentTenantUser.status === 'open')}
-                    type="primary"
-                    size="large"
-                    onClick={() => {
-                      window.location.href = tenantPath;
-                    }}>
-                    {formatMessage({ id: 'EnterTenant' })}
-                    <Icon type="fasongduihua" />
-                  </Button>
-                </Flex>
-              )}
-            </Flex>
-          );
-        }}
-      />
-    </Card>
+                        })}
+                      </div>
+                    </Spin>
+                  )}
+                </main>
+
+                {list.length > 0 ? (
+                  <footer className={style.footer}>
+                    <Button
+                      type="primary"
+                      size="large"
+                      block
+                      disabled={!canEnter}
+                      icon={<RightOutlined />}
+                      iconPosition="end"
+                      onClick={() => {
+                        window.location.href = tenantPath;
+                      }}>
+                      {formatMessage({ id: 'EnterTenant' })}
+                    </Button>
+                  </footer>
+                ) : null}
+              </>
+            );
+          }}
+        />
+      </div>
+    </div>
   );
 });
 
diff --git a/src/components/Tenant/LoginTenant/index.js b/src/components/Tenant/LoginTenant/index.js
index cc66a3b..38a242d 100644
--- a/src/components/Tenant/LoginTenant/index.js
+++ b/src/components/Tenant/LoginTenant/index.js
@@ -1,17 +1,15 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import SelectTenant from './SelectTenant';
-import style from './style.module.scss';
+// 与 SelectTenant 共用样式；入口显式引用，确保 RemoteLoader 加载 Tenant@LoginTenant 时注入 CSS
+import './style.module.scss';
 
 const LoginTenant = createWithRemoteLoader({
   modules: ['components-core:Layout@Page']
 })(({ remoteModules, children, ...props }) => {
   const [Page] = remoteModules;
   const pageProps = {
-    children: (
-      <div className={style['card']}>
-        <SelectTenant {...props} />
-      </div>
-    )
+    backgroundColor: 'transparent',
+    children: <SelectTenant {...props} />
   };
   if (typeof children === 'function') {
     return children(pageProps);
diff --git a/src/components/Tenant/LoginTenant/style.module.scss b/src/components/Tenant/LoginTenant/style.module.scss
index 2af8ba1..5fcd758 100644
--- a/src/components/Tenant/LoginTenant/style.module.scss
+++ b/src/components/Tenant/LoginTenant/style.module.scss
@@ -1,45 +1,400 @@
-.card {
+.page {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 24px 16px 40px;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.shell {
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
+  max-width: 900px;
+  background: #fff;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow:
+    0 4px 24px rgba(15, 23, 42, 0.06),
+    0 1px 2px rgba(15, 23, 42, 0.04);
+  overflow: hidden;
+}
+
+.header {
+  flex-shrink: 0;
+  padding: 24px 24px 20px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+  background: linear-gradient(180deg, rgba(238, 242, 255, 0.65) 0%, #fff 100%);
 }
 
-.tenant-item {
+.headerTitle {
+  margin: 0 0 6px !important;
+  font-size: 20px !important;
+  font-weight: 650 !important;
+  line-height: 1.35 !important;
+  letter-spacing: -0.02em;
+  color: rgba(15, 23, 42, 0.92) !important;
+}
+
+.headerSubtitle {
+  margin: 0 !important;
+  font-size: 13px;
+  line-height: 1.55;
+  color: rgba(15, 23, 42, 0.55);
+}
+
+.main {
+  flex: 1;
+  min-height: 0;
+  padding: 20px 24px 8px;
+}
+
+.tenantList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tenantCard {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 20px 18px 22px;
+  border-radius: 14px;
+  border: 1.5px solid #e2e8f0;
+  background: #fff;
   cursor: pointer;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    background 0.2s ease;
+
+  &:hover:not(.tenantCardDisabled) {
+    border-color: rgba(79, 70, 229, 0.45);
+    box-shadow:
+      0 4px 16px rgba(79, 70, 229, 0.1),
+      0 1px 3px rgba(15, 23, 42, 0.06);
+    transform: translateY(-1px);
+  }
+}
 
-  &:global(.ant-list-item) {
-    padding: 12px;
-    border-radius: 4px;
+.tenantCardSelected {
+  border-color: var(--primary-color, #4f46e5);
+  background: linear-gradient(135deg, rgba(238, 242, 255, 0.9) 0%, #fff 55%);
+  box-shadow:
+    0 0 0 3px rgba(79, 70, 229, 0.12),
+    0 4px 16px rgba(79, 70, 229, 0.1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 14px;
+    bottom: 14px;
+    width: 4px;
+    border-radius: 0 3px 3px 0;
+    background: var(--primary-color, #4f46e5);
   }
 
-  :global(.ant-ribbon-wrapper) {
-    flex: 1;
+  &:hover {
+    border-color: var(--primary-color, #4f46e5);
+    transform: none;
+  }
+}
+
+.tenantCardDisabled {
+  cursor: not-allowed;
+  background: #f8fafc;
+  border-color: #e8ecf0;
+  box-shadow: none;
+
+  &:hover {
+    transform: none;
+    border-color: #e8ecf0;
+    box-shadow: none;
   }
 
-  :global(.ant-ribbon) {
-    transform: translate(12px, -12px);
+  .cardCompany,
+  .cardMetaItem {
+    color: rgba(15, 23, 42, 0.38);
   }
 
-  &.is-selected {
-    background: var(--primary-color-1);
+  .cardMetaIcon {
+    color: rgba(15, 23, 42, 0.25);
   }
 
-  &.is-disabled {
-    background: var(--bg-color-grey-1);
+  .cardAvatarFallback {
+    opacity: 0.55;
+  }
+
+  :global(.ant-avatar) {
+    filter: grayscale(100%);
+    opacity: 0.65;
+  }
+}
+
+.cardSelectedMark {
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--primary-color, #4f46e5);
+  color: #fff;
+  font-size: 11px;
+  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
+}
 
-    img {
-      filter: grayscale(100%);
+.cardAvatarWrap {
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.cardAvatar {
+  display: inline-block;
+
+  :global(.ant-avatar) {
+    border-radius: 12px !important;
+    border: 2px solid rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
+  }
+}
+
+.cardAvatarFallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--primary-color, #4f46e5) 0%, #6366f1 100%);
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+}
+
+.cardBody {
+  flex: 1;
+  min-width: 0;
+  padding-top: 2px;
+  padding-right: 28px;
+}
+
+.cardTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.cardCompany {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  color: rgba(15, 23, 42, 0.92);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cardTag,
+.cardTagMuted {
+  flex-shrink: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+.cardTagMuted {
+  color: rgba(15, 23, 42, 0.45);
+  background: #f1f5f9;
+}
+
+.cardMeta {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 4px;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.cardMetaDivider {
+  flex: 0 0 auto;
+  padding: 0 2px;
+  font-size: 13px;
+  line-height: 1;
+  color: rgba(15, 23, 42, 0.28);
+}
+
+.cardMetaItem {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: rgba(15, 23, 42, 0.55);
+
+  > span:last-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.cardMetaIcon {
+  flex-shrink: 0;
+  font-size: 13px;
+  color: rgba(79, 70, 229, 0.65);
+}
+
+.footer {
+  flex-shrink: 0;
+  margin-top: 8px;
+  padding: 20px 24px 24px;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.empty {
+  padding: 48px 16px;
+}
+
+@media (max-width: 575px) {
+  .page {
+    padding: 0;
+  }
+
+  .shell {
+    border-radius: 12px;
+  }
+
+  .header {
+    padding: 16px 14px 14px;
+  }
+
+  .headerTitle {
+    font-size: 17px !important;
+    line-height: 1.4 !important;
+  }
+
+  .headerSubtitle {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .main {
+    padding: 14px 14px 4px;
+  }
+
+  .tenantList {
+    gap: 10px;
+  }
+
+  .tenantCard {
+    gap: 10px;
+    padding: 12px 12px 12px 14px;
+    border-radius: 12px;
+
+    &:hover:not(.tenantCardDisabled) {
+      transform: none;
     }
+  }
 
-    :global {
-      .ant-list-item-meta-title {
-        color: var(--font-color-grey-1) !important;
-      }
+  .tenantCardSelected {
+    &::before {
+      top: 10px;
+      bottom: 10px;
+    }
+  }
+
+  .cardSelectedMark {
+    top: 10px;
+    right: 10px;
+    width: 20px;
+    height: 20px;
+    font-size: 10px;
+  }
+
+  .cardAvatar {
+    :global(.ant-avatar) {
+      width: 44px !important;
+      height: 44px !important;
+      line-height: 44px !important;
     }
   }
-}
 
-.tenant-avatar {
-  border-radius: 4px;
-  max-height: 60px;
+  .cardAvatarFallback {
+    width: 44px;
+    height: 44px;
+    font-size: 17px;
+  }
+
+  .cardBody {
+    padding-top: 0;
+    padding-right: 22px;
+  }
+
+  .cardTitleRow {
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 6px;
+  }
+
+  .cardCompany {
+    flex: 1 1 auto;
+    font-size: 15px;
+  }
+
+  .cardTag,
+  .cardTagMuted {
+    max-width: 100%;
+    font-size: 11px;
+    line-height: 18px;
+  }
+
+  .cardMeta {
+    flex-wrap: wrap;
+    row-gap: 4px;
+    column-gap: 4px;
+  }
+
+  .cardMetaItem {
+    flex: 0 1 auto;
+    max-width: 100%;
+    font-size: 12px;
+    gap: 3px;
+  }
+
+  .cardMetaIcon {
+    font-size: 12px;
+  }
+
+  .cardMetaDivider {
+    font-size: 12px;
+  }
+
+  .footer {
+    margin-top: 4px;
+    padding: 14px 14px max(16px, env(safe-area-inset-bottom, 0px));
+  }
+
+  .empty {
+    padding: 32px 12px;
+  }
 }
diff --git a/src/components/Tenant/OrgInfo/FormInner.js b/src/components/Tenant/OrgInfo/FormInner.js
index e5cedd9..0f75c54 100644
--- a/src/components/Tenant/OrgInfo/FormInner.js
+++ b/src/components/Tenant/OrgInfo/FormInner.js
@@ -1,19 +1,45 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { useIntl } from '@kne/react-intl';
+import merge from 'lodash/merge';
 import withLocale from '../withLocale';
 
-const FormInner = createWithRemoteLoader({
+const FormInnerCore = createWithRemoteLoader({
   modules: ['components-core:FormInfo']
-})(withLocale(({ remoteModules }) => {
+})(({ remoteModules, apis, orgId }) => {
   const [FormInfo] = remoteModules;
   const { formatMessage } = useIntl();
-  const { Input, TextArea } = FormInfo.fields;
-  return (
-    <FormInfo
-      column={1}
-      list={[<Input name="name" label={formatMessage({ id: 'OrgName' })} rule="REQ LEN-0-100" />, <TextArea name="description" label={formatMessage({ id: 'OrgDescription' })} rule="LEN-0-500" />]}
-    />
-  );
-}));
+  const { Input, TextArea, SuperSelect } = FormInfo.fields;
+  const list = [
+    <Input name="name" label={formatMessage({ id: 'OrgName' })} rule="REQ LEN-0-100" />,
+    <TextArea name="description" label={formatMessage({ id: 'OrgDescription' })} rule="LEN-0-500" />
+  ];
+  if (apis?.userList) {
+    list.push(
+      <SuperSelect
+        name="leaderUserId"
+        label={formatMessage({ id: 'OrgLeader' })}
+        api={merge({}, apis.userList, {
+          params: merge(
+            { perPage: 100, currentPage: 1 },
+            apis.userList.params || {},
+            orgId ? { filter: { tenantOrgId: orgId } } : {}
+          )
+        })}
+        description={
+          orgId
+            ? formatMessage({ id: 'OrgLeaderMustBeMember' })
+            : formatMessage({ id: 'OrgLeaderCreateHint' })
+        }
+        interceptor="object-output-value"
+        valueKey="id"
+        labelKey="name"
+        single
+        allowClear
+      />
+    );
+  }
+  return <FormInfo column={1} list={list} />;
+});
 
-export default FormInner;
+/** withLocale 在外层：弹窗/Portal 内仍能加载 Tenant 命名空间文案，且正常转发 apis 等 props */
+export default withLocale(FormInnerCore);
diff --git a/src/components/Tenant/OrgInfo/ImportAnchorOrgSelect.js b/src/components/Tenant/OrgInfo/ImportAnchorOrgSelect.js
new file mode 100644
index 0000000..97ed10f
--- /dev/null
+++ b/src/components/Tenant/OrgInfo/ImportAnchorOrgSelect.js
@@ -0,0 +1,60 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { useMemo } from 'react';
+import merge from 'lodash/merge';
+import style from './style.module.scss';
+
+const toSelectValue = (orgId, data) => {
+  if (orgId == null || orgId === '') {
+    return null;
+  }
+  const org = (data || []).find(item => String(item.id) === String(orgId));
+  if (org) {
+    return { id: org.id, name: org.name };
+  }
+  return { id: orgId };
+};
+
+const ImportAnchorOrgSelect = createWithRemoteLoader({
+  modules: ['components-core:Common@SuperSelectTreeField']
+})(({ remoteModules, data, orgListApi, value, onChange, placeholder }) => {
+  const [SuperSelectTreeField] = remoteModules;
+
+  const api = useMemo(() => {
+    if (orgListApi?.url) {
+      return merge({}, orgListApi);
+    }
+    return {
+      loader: () =>
+        Promise.resolve({
+          pageData: Array.isArray(data) ? data : []
+        })
+    };
+  }, [data, orgListApi]);
+
+  const selectValue = useMemo(() => toSelectValue(value, data), [value, data]);
+
+  return (
+    <SuperSelectTreeField
+      className={style.importAnchorSelect}
+      single
+      allowClear
+      isPopup
+      valueKey="id"
+      labelKey="name"
+      parentKey="parentId"
+      placeholder={placeholder}
+      api={api}
+      value={selectValue}
+      onChange={selected => {
+        if (!selected) {
+          onChange(undefined);
+          return;
+        }
+        const item = Array.isArray(selected) ? selected[0] : selected;
+        onChange(item?.id ?? item?.value ?? undefined);
+      }}
+    />
+  );
+});
+
+export default ImportAnchorOrgSelect;
diff --git a/src/components/Tenant/OrgInfo/OrgNodeUserCount.js b/src/components/Tenant/OrgInfo/OrgNodeUserCount.js
new file mode 100644
index 0000000..33a9655
--- /dev/null
+++ b/src/components/Tenant/OrgInfo/OrgNodeUserCount.js
@@ -0,0 +1,18 @@
+import { Tag } from 'antd';
+import { TeamOutlined } from '@ant-design/icons';
+import { useIntl } from '@kne/react-intl';
+import style from './style.module.scss';
+
+const OrgNodeUserCount = ({ count }) => {
+  const { formatMessage } = useIntl();
+  if (count == null || Number.isNaN(Number(count))) {
+    return null;
+  }
+  return (
+    <Tag className={style['org-user-count']} icon={<TeamOutlined />}>
+      {formatMessage({ id: 'OrgUserCount' }, { count: Number(count) })}
+    </Tag>
+  );
+};
+
+export default OrgNodeUserCount;
diff --git a/src/components/Tenant/OrgInfo/index.js b/src/components/Tenant/OrgInfo/index.js
index 18490f8..ec8df71 100644
--- a/src/components/Tenant/OrgInfo/index.js
+++ b/src/components/Tenant/OrgInfo/index.js
@@ -1,18 +1,46 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Flex, Tree, App, Card, Button, Space } from 'antd';
-import { useEffect, useMemo, useState, useRef } from 'react';
+import { Flex, Tree, App, Card, Button, Space, Modal, Upload, Typography, Table, Avatar, Divider, Checkbox, Tag, Badge } from 'antd';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import OrgChart from '@kne/react-org-chart';
 import merge from 'lodash/merge';
-import { PlusCircleOutlined, MinusCircleOutlined, ExpandOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons';
+import {
+  PlusCircleOutlined,
+  MinusCircleOutlined,
+  ExpandOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  InboxOutlined,
+  DownloadOutlined,
+  TeamOutlined,
+  UserOutlined
+} from '@ant-design/icons';
 import FormInner from './FormInner';
+import { normalizeLeaderUserIdForSubmit } from './normalizeLeaderUserIdForSubmit';
+import OrgNodeUserCount from './OrgNodeUserCount';
+import { buildImportPreviewGroups, downloadOrgImportTemplate, parseOrgImportExcelFile, prepareImportRowsForSubmit } from './orgImportTemplate';
+import ImportAnchorOrgSelect from './ImportAnchorOrgSelect';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
 import style from './style.module.scss';
 import '@kne/react-org-chart/dist/index.css';
 
+/** SuperSelect object-output-value 回显需 { id, name }，不能只传 id 字符串 */
+const mapOrgToFormData = org => {
+  let leaderUserId = null;
+  if (org.leader?.id != null) {
+    leaderUserId = { id: org.leader.id, name: org.leader.name };
+  } else if (org.leaderUserId != null) {
+    leaderUserId = {
+      id: org.leaderUserId,
+      ...(org.leaderName ? { name: org.leaderName } : {})
+    };
+  }
+  return Object.assign({}, org, { leaderUserId });
+};
+
 const OrgOptions = createWithRemoteLoader({
   modules: ['components-core:Global@usePreset', 'components-core:ButtonGroup', 'components-core:Icon', 'components-core:FormInfo@useFormModal']
-})(({ remoteModules, showLength = 3, data, apis, onSuccess }) => {
+})(({ remoteModules, showLength = 3, data, apis, onSuccess, onViewUsers }) => {
   const [usePreset, ButtonGroup, Icon, useFormModal] = remoteModules;
   const { ajax } = usePreset();
   const formModal = useFormModal();
@@ -23,6 +51,15 @@ const OrgOptions = createWithRemoteLoader({
       itemClassName="btn-no-padding"
       moreType="link"
       list={[
+        {
+          icon: <UserOutlined />,
+          type: 'link',
+          children: formatMessage({ id: 'ViewUsers' }),
+          hidden: !(data.id && data.id !== 'root') || typeof onViewUsers !== 'function',
+          onClick: () => {
+            onViewUsers(data);
+          }
+        },
         {
           icon: <Icon type="tianjia" />,
           type: 'link',
@@ -39,6 +76,9 @@ const OrgOptions = createWithRemoteLoader({
                       data: Object.assign(
                         {},
                         formData,
+                        {
+                          leaderUserId: normalizeLeaderUserIdForSubmit(formData.leaderUserId)
+                        },
                         data.id && data.id !== 'root'
                           ? {
                               parentId: data.id
@@ -54,7 +94,7 @@ const OrgOptions = createWithRemoteLoader({
                   onSuccess && onSuccess();
                 }
               },
-              children: <FormInner />
+              children: <FormInner apis={apis} />
             });
           }
         },
@@ -68,13 +108,14 @@ const OrgOptions = createWithRemoteLoader({
               title: formatMessage({ id: 'EditOrgNode' }),
               size: 'small',
               formProps: {
-                data: Object.assign({}, data),
+                data: mapOrgToFormData(data),
                 onSubmit: async formData => {
                   const { data: resData } = await ajax(
                     merge({}, apis.save, {
                       data: Object.assign({}, formData, {
                         parentId: data.parentId,
-                        id: data.id
+                        id: data.id,
+                        leaderUserId: normalizeLeaderUserIdForSubmit(formData.leaderUserId)
                       })
                     })
                   );
@@ -85,7 +126,7 @@ const OrgOptions = createWithRemoteLoader({
                   onSuccess && onSuccess();
                 }
               },
-              children: <FormInner />
+              children: <FormInner apis={apis} orgId={data.id} />
             });
           }
         },
@@ -116,6 +157,138 @@ const OrgOptions = createWithRemoteLoader({
   );
 });
 
+const OrgLeaderMeta = createWithRemoteLoader({
+  modules: ['components-core:Image']
+})(({ remoteModules, leader, variant = 'tree' }) => {
+  const [Image] = remoteModules;
+  if (!leader?.name) {
+    return null;
+  }
+
+  const name = String(leader.name);
+  const initial = name.trim().charAt(0);
+  const avatarSrc = leader.avatar || leader.avatarUrl || leader.leaderAvatar;
+
+  return (
+    <div className={`${style['org-leader-meta']} ${style[`org-leader-meta-${variant}`]}`}>
+      <Flex align="center" gap={8} className={style['org-leader-row']}>
+        <Image.Avatar size={22} className={style['org-leader-avatar']} id={leader.avatar}>
+          {!leader.avatar ? initial : null}
+        </Image.Avatar>
+        <span className={style['org-leader-name']} title={name}>
+          {name}
+        </span>
+      </Flex>
+    </div>
+  );
+});
+
+const DRAG_SCROLL_SKIP_SELECTOR = 'button, a, input, textarea, select, [role="button"], .ant-card, .ant-btn, .ant-dropdown-trigger';
+
+const useDragToScroll = () => {
+  const scrollRef = useRef(null);
+  const dragRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const endDrag = useCallback(() => {
+    if (!dragRef.current?.active) {
+      return;
+    }
+    dragRef.current.active = false;
+    setIsDragging(false);
+  }, []);
+
+  const startDrag = useCallback((clientX, clientY, target) => {
+    if (target?.closest?.(DRAG_SCROLL_SKIP_SELECTOR)) {
+      return;
+    }
+    const el = scrollRef.current;
+    if (!el) {
+      return;
+    }
+    dragRef.current = {
+      active: true,
+      startX: clientX,
+      startY: clientY,
+      scrollLeft: el.scrollLeft,
+      scrollTop: el.scrollTop
+    };
+    setIsDragging(true);
+  }, []);
+
+  const onMouseDown = useCallback(
+    e => {
+      if (e.button !== 0) {
+        return;
+      }
+      startDrag(e.clientX, e.clientY, e.target);
+    },
+    [startDrag]
+  );
+
+  const onTouchStart = useCallback(
+    e => {
+      if (e.touches.length !== 1) {
+        return;
+      }
+      const touch = e.touches[0];
+      startDrag(touch.clientX, touch.clientY, e.target);
+    },
+    [startDrag]
+  );
+
+  useEffect(() => {
+    const onMove = (clientX, clientY) => {
+      if (!dragRef.current?.active) {
+        return;
+      }
+      const el = scrollRef.current;
+      if (!el) {
+        return;
+      }
+      const { startX, startY, scrollLeft, scrollTop } = dragRef.current;
+      el.scrollLeft = scrollLeft - (clientX - startX);
+      el.scrollTop = scrollTop - (clientY - startY);
+    };
+
+    const onMouseMove = e => {
+      if (!dragRef.current?.active) {
+        return;
+      }
+      e.preventDefault();
+      onMove(e.clientX, e.clientY);
+    };
+
+    const onTouchMove = e => {
+      if (!dragRef.current?.active) {
+        return;
+      }
+      if (e.touches.length !== 1) {
+        return;
+      }
+      e.preventDefault();
+      const touch = e.touches[0];
+      onMove(touch.clientX, touch.clientY);
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', endDrag);
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend', endDrag);
+    document.addEventListener('touchcancel', endDrag);
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', endDrag);
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend', endDrag);
+      document.removeEventListener('touchcancel', endDrag);
+    };
+  }, [endDrag]);
+
+  return { scrollRef, isDragging, onMouseDown, onTouchStart };
+};
+
 const ControlPanel = ({ value, onChange }) => {
   return (
     <Space.Compact className={style['control-panel']}>
@@ -143,10 +316,10 @@ const ControlPanel = ({ value, onChange }) => {
 
 const GraphOrg = createWithRemoteLoader({
   modules: ['components-core:Common@SimpleBar']
-})(({ remoteModules, data, apis, onSuccess }) => {
-  const ref = useRef(null);
+})(({ remoteModules, data, apis, onSuccess, onViewUsers }) => {
   const [expandIds, setExpandIds] = useState([]);
   const [scale, setScale] = useState(1);
+  const { scrollRef, isDragging, onMouseDown, onTouchStart } = useDragToScroll();
   const renderNode = data => {
     return data.map(node => {
       const card = (
@@ -155,9 +328,18 @@ const GraphOrg = createWithRemoteLoader({
           hoverable
           size="small"
           className={style['org-card']}
-          extra={<OrgOptions data={node} apis={apis} onSuccess={onSuccess} showLength={0} />}>
-          <div className={style['tree-node-title']}>{node.name}</div>
+          extra={<OrgOptions data={node} apis={apis} onSuccess={onSuccess} onViewUsers={onViewUsers} showLength={0} />}>
+          <Flex align="center" gap={8} wrap="wrap" className={style['tree-node-title-row']}>
+            <div className={style['tree-node-title']}>{node.name}</div>
+            <OrgNodeUserCount count={node.userCount} />
+          </Flex>
           {node.description && <div className={style['tree-node-description']}>{node.description}</div>}
+          {node.leader && (
+            <>
+              <Divider style={{ marginBottom: 0 }} />
+              <OrgLeaderMeta leader={node.leader} variant="graph" />
+            </>
+          )}
           {node.children && node.children.length > 0 && (
             <Button
               icon={expandIds.indexOf(node.id) === -1 ? <MinusCircleOutlined /> : <PlusCircleOutlined />}
@@ -196,9 +378,13 @@ const GraphOrg = createWithRemoteLoader({
     });
   };
   return (
-    <div className={style['org-chart-outer']} ref={ref}>
+    <div className={style['org-chart-outer']}>
       <ControlPanel value={scale} onChange={setScale} />
-      <div className={style['org-chart-inner']}>
+      <div
+        ref={scrollRef}
+        className={`${style['org-chart-inner']} ${isDragging ? style['org-chart-inner-dragging'] : ''}`}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}>
         <div
           style={{
             transform: `scale(${scale})`,
@@ -211,14 +397,17 @@ const GraphOrg = createWithRemoteLoader({
   );
 });
 
-const TreeOrg = ({ data, ids, apis, onSuccess }) => {
+const TreeOrg = ({ data, ids, apis, onSuccess, onViewUsers }) => {
   const [expandedKeys, setExpandedKeys] = useState(['root']);
+
   useEffect(() => {
     ids && ids.length > 0 && setExpandedKeys(['root', ...ids]);
   }, [ids]);
+
   return (
     <Tree
-      showLine
+      blockNode
+      showLine={{ showLeafIcon: false }}
       showIcon
       selectable={false}
       expandedKeys={expandedKeys}
@@ -227,16 +416,25 @@ const TreeOrg = ({ data, ids, apis, onSuccess }) => {
       onExpand={expandedKeys => {
         setExpandedKeys(expandedKeys);
       }}
+      className={style['org-tree']}
       titleRender={nodeData => {
         return (
           <Flex vertical className={style['tree-node']}>
-            <Flex gap={36}>
-              <span className={style['tree-node-title']}>{nodeData.name}</span>
+            <Flex className={style['tree-node-main']} align="center" wrap="nowrap">
+              <Flex align="center" gap={8} wrap="wrap" className={style['tree-node-title-row']}>
+                <span className={style['tree-node-title']}>{nodeData.name}</span>
+                <OrgNodeUserCount count={nodeData.userCount} />
+              </Flex>
               <span className={style['tree-node-options']}>
-                <OrgOptions data={nodeData} apis={apis} onSuccess={onSuccess} />
+                <OrgOptions data={nodeData} apis={apis} onSuccess={onSuccess} onViewUsers={onViewUsers} />
               </span>
             </Flex>
-            <div className={style['tree-node-description']}>{nodeData.description}</div>
+            {(nodeData.description || nodeData.leader?.name) && (
+              <div className={style['tree-node-extra']}>
+                {nodeData.description ? <div className={style['tree-node-description']}>{nodeData.description}</div> : null}
+                <OrgLeaderMeta leader={nodeData.leader} variant="tree" />
+              </div>
+            )}
           </Flex>
         );
       }}
@@ -245,11 +443,163 @@ const TreeOrg = ({ data, ids, apis, onSuccess }) => {
 };
 
 const OrgInfo = createWithRemoteLoader({
-  modules: ['components-core:StateBar']
-})(({ remoteModules, data, companyName, apis, onSuccess }) => {
-  const [StateBar] = remoteModules;
+  modules: ['components-core:StateBar', 'components-core:Global@usePreset']
+})(({ remoteModules, data, companyName, apis, onSuccess, tenantId, onViewUsers }) => {
+  const [StateBar, usePreset] = remoteModules;
+  const { ajax } = usePreset();
   const [activeKey, setActiveKey] = useState('tree');
+  const [importOpen, setImportOpen] = useState(false);
+  const [importLoading, setImportLoading] = useState(false);
+  const [anchorOrgId, setAnchorOrgId] = useState(undefined);
+  const [importFile, setImportFile] = useState(null);
+  const [parsedRows, setParsedRows] = useState(null);
+  const [importSelectedRowKeys, setImportSelectedRowKeys] = useState([]);
+  const [uploadKey, setUploadKey] = useState(0);
   const { formatMessage } = useIntl();
+  const { message } = App.useApp();
+  const importPreviewGroups = useMemo(() => buildImportPreviewGroups(parsedRows || []), [parsedRows]);
+
+  const importSelectedKeySet = useMemo(() => new Set(importSelectedRowKeys.map(String)), [importSelectedRowKeys]);
+
+  const renderImportEmpty = useCallback(v => (v ? v : <span className={style.importPreviewEmpty}>—</span>), []);
+
+  const toggleImportRowIndices = useCallback((indices, checked) => {
+    setImportSelectedRowKeys(prev => {
+      const next = new Set(prev.map(String));
+      indices.forEach(i => {
+        const k = String(i);
+        if (checked) {
+          next.add(k);
+        } else {
+          next.delete(k);
+        }
+      });
+      return Array.from(next);
+    });
+  }, []);
+
+  const previewOrgColumns = useMemo(
+    () => [
+      {
+        title: '',
+        width: 48,
+        fixed: 'left',
+        className: style.importPreviewCheckboxCell,
+        render: (_, record) => {
+          const indices = record.rowIndices;
+          const allSelected = indices.length > 0 && indices.every(i => importSelectedKeySet.has(String(i)));
+          const someSelected = indices.some(i => importSelectedKeySet.has(String(i)));
+          return (
+            <Checkbox
+              checked={allSelected}
+              indeterminate={someSelected && !allSelected}
+              onChange={e => toggleImportRowIndices(indices, e.target.checked)}
+            />
+          );
+        }
+      },
+      {
+        title: formatMessage({ id: 'OrgName' }),
+        dataIndex: 'orgName',
+        ellipsis: true,
+        render: (v, record) => (
+          <Space size={8} wrap className={style.importPreviewOrgCell}>
+            <TeamOutlined className={style.importPreviewOrgIcon} />
+            <span className={style.importPreviewOrgName}>{v || '—'}</span>
+            {!record.orgInSheet ? (
+              <Tag bordered={false} className={style.importPreviewRefTag}>
+                {formatMessage({ id: 'ImportOrgRefOnly' })}
+              </Tag>
+            ) : null}
+          </Space>
+        )
+      },
+      {
+        title: formatMessage({ id: 'ImportColParentOrg' }),
+        dataIndex: 'parentOrgName',
+        ellipsis: true,
+        render: renderImportEmpty
+      },
+      {
+        title: formatMessage({ id: 'ImportColUserCount' }),
+        width: 96,
+        align: 'center',
+        render: (_, record) => (
+          <Badge
+            count={record.users.length}
+            showZero
+            overflowCount={99}
+            className={style.importPreviewUserBadge}
+            color={record.users.length ? 'var(--primary-color)' : 'var(--font-color-grey-3)'}
+          />
+        )
+      },
+      {
+        title: formatMessage({ id: 'Description' }),
+        dataIndex: 'description',
+        ellipsis: true,
+        render: renderImportEmpty
+      }
+    ],
+    [formatMessage, importSelectedKeySet, toggleImportRowIndices, renderImportEmpty]
+  );
+
+  const previewUserColumns = useMemo(
+    () => [
+      {
+        title: '',
+        width: 48,
+        className: style.importPreviewCheckboxCell,
+        render: (_, record) => (
+          <Checkbox
+            checked={importSelectedKeySet.has(String(record.rowIndex))}
+            onChange={e => toggleImportRowIndices([record.rowIndex], e.target.checked)}
+          />
+        )
+      },
+      {
+        title: formatMessage({ id: 'ImportColUserName' }),
+        dataIndex: 'userName',
+        ellipsis: true,
+        render: v =>
+          v ? (
+            <div className={style.importPreviewUserCell}>
+              <span className={style.importPreviewUserAvatar}>{String(v).trim().charAt(0) || '?'}</span>
+              <span className={style.importPreviewUserName}>{v}</span>
+            </div>
+          ) : (
+            renderImportEmpty(v)
+          )
+      },
+      {
+        title: formatMessage({ id: 'ImportColEmail' }),
+        dataIndex: 'email',
+        ellipsis: true,
+        render: renderImportEmpty
+      },
+      {
+        title: formatMessage({ id: 'ImportColPhone' }),
+        dataIndex: 'phone',
+        ellipsis: true,
+        render: renderImportEmpty
+      },
+      {
+        title: formatMessage({ id: 'ImportColIsLeader' }),
+        dataIndex: 'isLeader',
+        width: 96,
+        align: 'center',
+        render: v =>
+          v ? (
+            <Tag color="gold" bordered={false} className={style.importPreviewLeaderTag}>
+              {formatMessage({ id: 'Yes' })}
+            </Tag>
+          ) : (
+            renderImportEmpty(v)
+          )
+      }
+    ],
+    [formatMessage, importSelectedKeySet, toggleImportRowIndices, renderImportEmpty]
+  );
   const { treeData, ids } = useMemo(() => {
     const output = [
       {
@@ -270,25 +620,284 @@ const OrgInfo = createWithRemoteLoader({
       });
     };
 
+    const tree = parseTree(output);
+    const treeData = tree.map(root => {
+      if (root.id !== 'root') {
+        return root;
+      }
+      const children = root.children || [];
+      return Object.assign({}, root, {
+        userCount: children.reduce((sum, child) => sum + (Number(child.userCount) || 0), 0),
+        children
+      });
+    });
+
     return {
-      treeData: parseTree(output),
+      treeData,
       ids: data.map(item => item.id)
     };
   }, [data, companyName, formatMessage]);
+
+  const anchorOrgListApi = useMemo(() => {
+    if (!apis?.orgList) {
+      return null;
+    }
+    return merge({}, apis.orgList, tenantId ? { params: Object.assign({ tenantId }, apis.orgList.params || {}) } : {});
+  }, [apis?.orgList, tenantId]);
+
+  const handleImportSubmit = async () => {
+    if (!parsedRows || !parsedRows.length) {
+      message.warning(formatMessage({ id: 'ImportFileRequired' }));
+      return;
+    }
+    if (!importSelectedRowKeys.length) {
+      message.warning(formatMessage({ id: 'ImportNoRowsSelected' }));
+      return;
+    }
+    const keySet = new Set(importSelectedRowKeys.map(k => String(k)));
+    let rowsToSubmit;
+    try {
+      const selected = parsedRows.map((row, i) => ({ row, i })).filter(({ i }) => keySet.has(String(i)));
+      rowsToSubmit = selected.map(({ row, i }) => prepareImportRowsForSubmit([row], { rowIndexOffset: i })[0]);
+    } catch (e) {
+      message.error(e?.message || String(e));
+      return;
+    }
+    const importUrl = apis.import?.url || '';
+    const isAdminBatchImport = importUrl.indexOf('/admin/') >= 0;
+    if (isAdminBatchImport && !tenantId) {
+      message.error(formatMessage({ id: 'ImportTenantIdMissing' }));
+      return;
+    }
+    setImportLoading(true);
+    try {
+      const body = { rows: rowsToSubmit };
+      if (anchorOrgId) {
+        body.parentOrgId = anchorOrgId;
+      }
+      if (isAdminBatchImport && tenantId) {
+        body.tenantId = tenantId;
+      }
+      const { data: resData } = await ajax(
+        merge({}, apis.import, {
+          data: body
+        })
+      );
+      if (resData.code !== 0) {
+        return;
+      }
+      const { createdOrgs, createdUsers, reusedUsers, rowCount } = resData.data;
+      message.success(
+        formatMessage(
+          { id: 'ImportSuccess' },
+          {
+            createdOrgs,
+            createdUsers,
+            reusedUsers,
+            rowCount
+          }
+        )
+      );
+      setImportOpen(false);
+      setImportFile(null);
+      setParsedRows(null);
+      setImportSelectedRowKeys([]);
+      setUploadKey(k => k + 1);
+      setAnchorOrgId(undefined);
+      onSuccess && onSuccess();
+    } finally {
+      setImportLoading(false);
+    }
+  };
+
   return (
     <Flex vertical>
-      <StateBar
-        activeKey={activeKey}
-        onChange={setActiveKey}
-        type="radio"
-        stateOption={[
-          { tab: formatMessage({ id: 'Tree' }), key: 'tree' },
-          { tab: formatMessage({ id: 'Graph' }), key: 'graph' }
-        ]}
-      />
+      <Flex justify="space-between" align="center" wrap="wrap" gap={8}>
+        <StateBar
+          activeKey={activeKey}
+          onChange={setActiveKey}
+          type="radio"
+          stateOption={[
+            { tab: formatMessage({ id: 'Tree' }), key: 'tree' },
+            { tab: formatMessage({ id: 'Graph' }), key: 'graph' }
+          ]}
+        />
+        {apis.import ? (
+          <Button
+            type="primary"
+            onClick={() => {
+              setImportFile(null);
+              setParsedRows(null);
+              setImportSelectedRowKeys([]);
+              setUploadKey(k => k + 1);
+              setAnchorOrgId(undefined);
+              setImportOpen(true);
+            }}>
+            {formatMessage({ id: 'OrgExcelImport' })}
+          </Button>
+        ) : null}
+      </Flex>
+      <Modal
+        title={formatMessage({ id: 'OrgExcelImport' })}
+        open={importOpen}
+        onCancel={() => {
+          setImportOpen(false);
+          setImportFile(null);
+          setParsedRows(null);
+          setImportSelectedRowKeys([]);
+          setUploadKey(k => k + 1);
+          setAnchorOrgId(undefined);
+        }}
+        onOk={handleImportSubmit}
+        okText={formatMessage({ id: 'ImportConfirmSubmit' })}
+        okButtonProps={{
+          disabled: !parsedRows || !parsedRows.length || !importSelectedRowKeys.length
+        }}
+        confirmLoading={importLoading}
+        destroyOnClose
+        width={parsedRows && parsedRows.length ? 1080 : 560}>
+        <Flex vertical gap={20} className={style.importModal}>
+          <div className={style.importModalSection}>
+            <Typography.Paragraph type="secondary" className={style.importModalHint}>
+              {formatMessage({ id: 'ImportExcelHint' })}
+            </Typography.Paragraph>
+            <Button
+              type="default"
+              icon={<DownloadOutlined />}
+              className={style.importModalDownload}
+              onClick={() => {
+                downloadOrgImportTemplate();
+              }}>
+              {formatMessage({ id: 'DownloadImportTemplate' })}
+            </Button>
+          </div>
+          <div className={style.importModalSection}>
+            <div className={style.importModalFieldLabel}>{formatMessage({ id: 'ImportAnchorLabel' })}</div>
+            <ImportAnchorOrgSelect
+              data={data}
+              orgListApi={anchorOrgListApi}
+              value={anchorOrgId}
+              onChange={setAnchorOrgId}
+              placeholder={formatMessage({ id: 'ImportAnchorPlaceholder' })}
+            />
+          </div>
+          <div className={style.importModalSection}>
+            <div className={style.importModalFieldLabel}>{formatMessage({ id: 'ImportUploadLabel' })}</div>
+            <Upload.Dragger
+              key={uploadKey}
+              maxCount={1}
+              accept=".xlsx,.xls"
+              beforeUpload={file => {
+                (async () => {
+                  try {
+                    const rows = await parseOrgImportExcelFile(file);
+                    setImportFile(file);
+                    setParsedRows(rows);
+                    setImportSelectedRowKeys(rows.map((_, i) => String(i)));
+                  } catch (e) {
+                    setImportFile(null);
+                    setParsedRows(null);
+                    setImportSelectedRowKeys([]);
+                    message.error(e?.message || String(e));
+                  }
+                })();
+                return false;
+              }}
+              onRemove={() => {
+                setImportFile(null);
+                setParsedRows(null);
+                setImportSelectedRowKeys([]);
+                return true;
+              }}
+              fileList={
+                importFile
+                  ? [
+                      {
+                        uid: '-1',
+                        name: importFile.name,
+                        status: 'done'
+                      }
+                    ]
+                  : []
+              }>
+              <p className="ant-upload-drag-icon">
+                <InboxOutlined />
+              </p>
+              <p className="ant-upload-text">{formatMessage({ id: 'ImportDragText' })}</p>
+            </Upload.Dragger>
+            {importFile ? (
+              <Button
+                type="link"
+                onClick={() => {
+                  setImportFile(null);
+                  setParsedRows(null);
+                  setImportSelectedRowKeys([]);
+                  setUploadKey(k => k + 1);
+                }}>
+                {formatMessage({ id: 'ImportRechooseFile' })}
+              </Button>
+            ) : null}
+          </div>
+          {parsedRows !== null ? (
+            <div className={style.importModalSection}>
+              <Divider style={{ margin: '0 0 4px' }} />
+              <div className={style.importModalFieldLabel}>{formatMessage({ id: 'ImportPreviewLabel' })}</div>
+              <Typography.Paragraph type="secondary" style={{ marginBottom: 0 }}>
+                {formatMessage({ id: 'ImportPreviewCount' }, { count: parsedRows.length })}
+              </Typography.Paragraph>
+              <Typography.Paragraph type="secondary" style={{ marginBottom: 8 }}>
+                {formatMessage({ id: 'ImportSelectedCount' }, { selected: importSelectedRowKeys.length, total: parsedRows.length })}
+              </Typography.Paragraph>
+                <div className={style.importPreviewPanel}>
+                  <Table
+                    className={style.importPreviewTable}
+                    size="small"
+                    bordered
+                    rowKey="key"
+                    columns={previewOrgColumns}
+                    dataSource={importPreviewGroups}
+                    pagination={false}
+                    scroll={{ x: 'max-content', y: 320 }}
+                    defaultExpandAllRows
+                    expandable={{
+                      rowExpandable: record => record.users.length > 0,
+                      expandedRowRender: record =>
+                        record.users.length ? (
+                          <div className={style.importPreviewExpand}>
+                            <Flex align="center" gap={12} className={style.importPreviewExpandHeader}>
+                              <Flex align="center" gap={8} className={style.importPreviewExpandHeaderLabel}>
+                                <UserOutlined className={style.importPreviewExpandIcon} />
+                                <span>{formatMessage({ id: 'ImportNestedUsers' })}</span>
+                              </Flex>
+                              <Badge
+                                count={record.users.length}
+                                overflowCount={99}
+                                color="var(--primary-color)"
+                                className={style.importPreviewExpandBadge}
+                              />
+                            </Flex>
+                            <Table
+                              className={style.importPreviewNestedTable}
+                              size="small"
+                              bordered
+                              rowKey="key"
+                              columns={previewUserColumns}
+                              dataSource={record.users}
+                              pagination={false}
+                              showHeader
+                            />
+                          </div>
+                        ) : null
+                    }}
+                  />
+                </div>
+            </div>
+          ) : null}
+        </Flex>
+      </Modal>
       <div className={style['org']}>
-        {activeKey === 'tree' && <TreeOrg ids={ids} data={treeData} apis={apis} onSuccess={onSuccess} />}
-        {activeKey === 'graph' && <GraphOrg ids={ids} data={treeData} apis={apis} onSuccess={onSuccess} />}
+        {activeKey === 'tree' && <TreeOrg ids={ids} data={treeData} apis={apis} onSuccess={onSuccess} onViewUsers={onViewUsers} />}
+        {activeKey === 'graph' && <GraphOrg ids={ids} data={treeData} apis={apis} onSuccess={onSuccess} onViewUsers={onViewUsers} />}
       </div>
     </Flex>
   );
diff --git a/src/components/Tenant/OrgInfo/normalizeLeaderUserIdForSubmit.js b/src/components/Tenant/OrgInfo/normalizeLeaderUserIdForSubmit.js
new file mode 100644
index 0000000..1e14662
--- /dev/null
+++ b/src/components/Tenant/OrgInfo/normalizeLeaderUserIdForSubmit.js
@@ -0,0 +1,19 @@
+/**
+ * 组织负责人表单项提交值：清空时显式返回 null，避免字段被省略导致无法清除。
+ *
+ * @param {unknown} value
+ * @returns {string | null}
+ */
+export function normalizeLeaderUserIdForSubmit(value) {
+  if (value == null || value === '') {
+    return null;
+  }
+  if (typeof value === 'object') {
+    const id = value.id ?? value.value;
+    if (id == null || id === '') {
+      return null;
+    }
+    return String(id);
+  }
+  return String(value);
+}
diff --git a/src/components/Tenant/OrgInfo/orgImportTemplate.js b/src/components/Tenant/OrgInfo/orgImportTemplate.js
new file mode 100644
index 0000000..c583760
--- /dev/null
+++ b/src/components/Tenant/OrgInfo/orgImportTemplate.js
@@ -0,0 +1,439 @@
+/**
+ * 与后端 fastify-tenant `libs/utils/orgImportRows.js` 约定一致
+ */
+import { read, utils, write } from 'xlsx';
+
+/** 与后端 normalizePhone 规则一致，便于预览与提交一致 */
+export function normalizeImportPhone(raw) {
+  if (raw == null || String(raw).trim() === '') {
+    return null;
+  }
+  let s = String(raw).trim().replace(/[\s-]/g, '');
+  if (!s) {
+    return null;
+  }
+  if (s.startsWith('+')) {
+    const digits = s.slice(1).replace(/\D/g, '');
+    if (digits.startsWith('86')) {
+      return `+86 ${digits.slice(2)}`;
+    }
+    return s.startsWith('+') ? s.replace(/^\+(\d{1,4})(\d+)$/, (_, cc, rest) => `+${cc} ${rest}`) : s;
+  }
+  let digits = s.replace(/\D/g, '');
+  if (digits.startsWith('0086')) {
+    digits = digits.slice(4);
+  } else if (digits.startsWith('86') && digits.length > 11) {
+    digits = digits.slice(2);
+  }
+  if (digits.startsWith('0') && digits.length > 10) {
+    digits = digits.slice(1);
+  }
+  return `+86 ${digits}`;
+}
+
+const FILE_NAME = '组织导入示例模板.xlsx';
+const SHEET_ORG = '组织';
+const SHEET_USER = '用户';
+
+const SHEET_ORG_ALIASES = ['组织', '组织导入', 'org', 'orgs', 'organization', '部门'];
+const SHEET_USER_ALIASES = ['用户', '用户导入', 'user', 'users', 'member', '成员'];
+
+const ROW_TYPE_KEYS = ['行类型', 'rowType', '类型', 'type'];
+const NAME_KEYS = ['组织名称', '部门名称', 'orgName', 'name', '名称'];
+const PARENT_KEYS = ['上级组织名称', '上级部门', 'parentOrgName', 'parentName', '上级'];
+const USER_NAME_KEYS = ['用户姓名', 'userName', '姓名', '负责人姓名', 'leaderName'];
+const EMAIL_KEYS = ['邮箱', 'email', 'Email'];
+const PHONE_KEYS = ['手机', '手机号', 'phone', 'Phone'];
+const DESC_KEYS = ['描述', '组织描述', 'description'];
+const IS_LEADER_KEYS = ['是否负责人', 'isLeader', '负责人'];
+
+function normalizeCell(row) {
+  const out = {};
+  for (const [k, v] of Object.entries(row)) {
+    const key = String(k || '')
+      .trim()
+      .replace(/\s+/g, '');
+    out[key] = typeof v === 'string' ? v.trim() : v;
+  }
+  return out;
+}
+
+function pickCell(row, keys) {
+  for (const k of keys) {
+    if (row[k] !== undefined && row[k] !== null && String(row[k]).trim() !== '') {
+      return String(row[k]).trim();
+    }
+  }
+  return '';
+}
+
+function normalizeSheetKey(name) {
+  return String(name || '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '');
+}
+
+function matchSheetName(name, aliases) {
+  const key = normalizeSheetKey(name);
+  return aliases.some(alias => {
+    const a = normalizeSheetKey(alias);
+    return key === a || key.includes(a) || a.includes(key);
+  });
+}
+
+function findSheetName(sheetNames, aliases) {
+  return sheetNames.find(n => matchSheetName(n, aliases)) || null;
+}
+
+function isRowEmpty(row, fields) {
+  return fields.every(f => !f);
+}
+
+export function normalizeRowType(raw) {
+  const s = String(raw || '')
+    .trim()
+    .toLowerCase();
+  if (!s) {
+    return null;
+  }
+  if (['组织', 'org', 'organization', '部门', 'o'].includes(s) || s.startsWith('组织')) {
+    return 'org';
+  }
+  if (['用户', 'user', 'member', '成员', 'u'].includes(s) || s.startsWith('用户')) {
+    return 'user';
+  }
+  return null;
+}
+
+export function parseIsLeader(raw) {
+  if (raw == null || raw === '') {
+    return false;
+  }
+  const s = String(raw)
+    .trim()
+    .toLowerCase();
+  return ['是', 'yes', 'y', 'true', '1', '负责人'].includes(s);
+}
+
+function parseOrgSheetRow(raw) {
+  const row = normalizeCell(raw);
+  const orgName = pickCell(row, NAME_KEYS);
+  const parentOrgName = pickCell(row, PARENT_KEYS) || null;
+  const description = pickCell(row, DESC_KEYS) || null;
+  if (isRowEmpty(row, [orgName, parentOrgName, description])) {
+    return null;
+  }
+  return {
+    rowType: 'org',
+    orgName,
+    parentOrgName,
+    userName: null,
+    email: null,
+    phone: null,
+    description,
+    isLeader: false
+  };
+}
+
+function parseUserSheetRow(raw) {
+  const row = normalizeCell(raw);
+  const orgName = pickCell(row, NAME_KEYS);
+  const userName = pickCell(row, USER_NAME_KEYS) || null;
+  const email = pickCell(row, EMAIL_KEYS) || null;
+  let phone = pickCell(row, PHONE_KEYS) || null;
+  if (phone) {
+    phone = normalizeImportPhone(phone);
+  }
+  const description = pickCell(row, DESC_KEYS) || null;
+  const isLeader = parseIsLeader(pickCell(row, IS_LEADER_KEYS));
+  if (isRowEmpty(row, [orgName, userName, email, phone, description])) {
+    return null;
+  }
+  return {
+    rowType: 'user',
+    orgName,
+    parentOrgName: null,
+    userName,
+    email,
+    phone,
+    description,
+    isLeader
+  };
+}
+
+function parseLegacySingleSheetRow(raw) {
+  const row = normalizeCell(raw);
+  const rowTypeRaw = pickCell(row, ROW_TYPE_KEYS);
+  const rowType = normalizeRowType(rowTypeRaw);
+  const userName = pickCell(row, USER_NAME_KEYS) || null;
+  const orgName = pickCell(row, NAME_KEYS) || '';
+  const parentOrgName = pickCell(row, PARENT_KEYS) || null;
+  const email = pickCell(row, EMAIL_KEYS) || null;
+  const phone = pickCell(row, PHONE_KEYS) || null;
+  const description = pickCell(row, DESC_KEYS) || null;
+  const isLeader = parseIsLeader(pickCell(row, IS_LEADER_KEYS));
+  if (isRowEmpty(row, [rowTypeRaw, orgName, parentOrgName, userName, email, phone, description])) {
+    return null;
+  }
+  return {
+    rowType: rowType || rowTypeRaw || '',
+    orgName,
+    parentOrgName,
+    userName,
+    email,
+    phone,
+    description,
+    isLeader
+  };
+}
+
+function sheetHasRowTypeColumn(sheet) {
+  const rawRows = utils.sheet_to_json(sheet, { defval: '', header: 1 });
+  if (!rawRows.length) {
+    return false;
+  }
+  const headerRow = rawRows[0];
+  return headerRow.some(cell => {
+    const key = normalizeSheetKey(cell);
+    return ROW_TYPE_KEYS.some(alias => normalizeSheetKey(alias) === key || key.includes(normalizeSheetKey(alias)));
+  });
+}
+
+function resolveWorkbookSheets(workbook) {
+  const names = workbook.SheetNames || [];
+  if (!names.length) {
+    return { mode: 'none' };
+  }
+
+  const orgName = findSheetName(names, SHEET_ORG_ALIASES);
+  const userName = findSheetName(names, SHEET_USER_ALIASES);
+
+  if (orgName || userName) {
+    return {
+      mode: 'multi',
+      orgName: orgName || (names.length >= 2 && userName && names[0] !== userName ? names[0] : null),
+      userName: userName || (names.length >= 2 && orgName && names[1] !== orgName ? names[1] : null)
+    };
+  }
+
+  if (names.length >= 2) {
+    return { mode: 'multi', orgName: names[0], userName: names[1] };
+  }
+
+  const only = names[0];
+  if (sheetHasRowTypeColumn(workbook.Sheets[only])) {
+    return { mode: 'legacy', sheetName: only };
+  }
+
+  return { mode: 'multi', orgName: only, userName: null };
+}
+
+function parseWorkbook(workbook) {
+  const resolved = resolveWorkbookSheets(workbook);
+  const rows = [];
+
+  if (resolved.mode === 'none') {
+    throw new Error('Excel 中没有任何工作表');
+  }
+
+  if (resolved.mode === 'legacy') {
+    const rawRows = utils.sheet_to_json(workbook.Sheets[resolved.sheetName], { defval: '' });
+    rawRows.forEach(raw => {
+      const parsed = parseLegacySingleSheetRow(raw);
+      if (parsed) {
+        rows.push(parsed);
+      }
+    });
+    return rows;
+  }
+
+  if (resolved.orgName) {
+    const rawRows = utils.sheet_to_json(workbook.Sheets[resolved.orgName], { defval: '' });
+    rawRows.forEach(raw => {
+      const parsed = parseOrgSheetRow(raw);
+      if (parsed) {
+        rows.push(parsed);
+      }
+    });
+  }
+
+  if (resolved.userName) {
+    const rawRows = utils.sheet_to_json(workbook.Sheets[resolved.userName], { defval: '' });
+    rawRows.forEach(raw => {
+      const parsed = parseUserSheetRow(raw);
+      if (parsed) {
+        rows.push(parsed);
+      }
+    });
+  }
+
+  return rows;
+}
+
+/**
+ * @param {File} file
+ * @returns {Promise<Array<{ rowType: 'org'|'user', orgName: string, parentOrgName: string|null, userName: string|null, email: string|null, phone: string|null, description: string|null, isLeader: boolean }>>}
+ */
+export function parseOrgImportExcelFile(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = e => {
+      try {
+        const data = new Uint8Array(e.target.result);
+        const workbook = read(data, { type: 'array' });
+        const rows = parseWorkbook(workbook);
+        if (!rows.length) {
+          reject(new Error('Excel 中没有可导入的数据行（请填写「组织」或「用户」工作表）'));
+          return;
+        }
+        resolve(rows);
+      } catch (err) {
+        reject(err instanceof Error ? err : new Error(String(err)));
+      }
+    };
+    reader.onerror = () => reject(new Error('文件读取失败'));
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+export function buildOrgImportTemplateBuffer() {
+  const orgRows = [
+    ['组织名称', '上级组织名称', '描述'],
+    ['示例研发中心', '', '挂到导入时所选锚点下的第一行示例'],
+    ['示例前端组', '示例研发中心', '']
+  ];
+  const userRows = [
+    ['组织名称', '用户姓名', '邮箱', '手机', '是否负责人'],
+    ['示例前端组', '张三', 'zhangsan@example.com', '13800000001', '是'],
+    ['示例前端组', '李四', 'lisi@example.com', '', '']
+  ];
+
+  const wsOrg = utils.aoa_to_sheet(orgRows);
+  wsOrg['!cols'] = [{ wch: 18 }, { wch: 18 }, { wch: 36 }];
+
+  const wsUser = utils.aoa_to_sheet(userRows);
+  wsUser['!cols'] = [{ wch: 18 }, { wch: 12 }, { wch: 26 }, { wch: 14 }, { wch: 12 }];
+
+  const wb = utils.book_new();
+  utils.book_append_sheet(wb, wsOrg, SHEET_ORG);
+  utils.book_append_sheet(wb, wsUser, SHEET_USER);
+  return write(wb, { type: 'array', bookType: 'xlsx' });
+}
+
+function resolveRowType(row) {
+  if (row.rowType === 'org' || row.rowType === 'user') {
+    return row.rowType;
+  }
+  return normalizeRowType(row.rowType);
+}
+
+/** 将扁平导入行按组织聚合，供预览主表 + 用户子表展示 */
+export function buildImportPreviewGroups(rows) {
+  if (!rows?.length) {
+    return [];
+  }
+  const groups = [];
+  const orgNameToGroup = new Map();
+
+  rows.forEach((row, index) => {
+    if (resolveRowType(row) !== 'org') {
+      return;
+    }
+    const group = {
+      key: `org-row-${index}`,
+      orgName: row.orgName || '',
+      parentOrgName: row.parentOrgName || null,
+      description: row.description || null,
+      orgRowIndex: index,
+      rowIndices: [index],
+      users: [],
+      orgInSheet: true
+    };
+    groups.push(group);
+    if (row.orgName) {
+      orgNameToGroup.set(row.orgName, group);
+    }
+  });
+
+  rows.forEach((row, index) => {
+    if (resolveRowType(row) !== 'user') {
+      return;
+    }
+    const userEntry = {
+      key: `user-row-${index}`,
+      rowIndex: index,
+      userName: row.userName,
+      email: row.email,
+      phone: row.phone,
+      isLeader: row.isLeader,
+      description: row.description
+    };
+    const group = row.orgName ? orgNameToGroup.get(row.orgName) : null;
+    if (group) {
+      group.users.push(userEntry);
+      group.rowIndices.push(index);
+      return;
+    }
+    const orphanKey = `__ref__${row.orgName || ''}`;
+    let refGroup = orgNameToGroup.get(orphanKey);
+    if (!refGroup) {
+      refGroup = {
+        key: `org-ref-${orphanKey}`,
+        orgName: row.orgName || '—',
+        parentOrgName: null,
+        description: null,
+        orgRowIndex: null,
+        rowIndices: [],
+        users: [],
+        orgInSheet: false
+      };
+      groups.push(refGroup);
+      orgNameToGroup.set(orphanKey, refGroup);
+    }
+    refGroup.users.push(userEntry);
+    refGroup.rowIndices.push(index);
+  });
+
+  return groups;
+}
+
+export function prepareImportRowsForSubmit(rows, { rowIndexOffset = 0 } = {}) {
+  return rows.map((row, index) => {
+    const rowType =
+      row.rowType === 'org' || row.rowType === 'user' ? row.rowType : normalizeRowType(row.rowType);
+    if (!rowType) {
+      throw new Error(`第 ${rowIndexOffset + index + 1} 行：无效行类型「${row.rowType || ''}」，请使用「组织」「用户」两个工作表`);
+    }
+    const userName = row.userName ? String(row.userName).trim() : null;
+    let phone = row.phone ? String(row.phone).trim() : null;
+    if (phone) {
+      phone = normalizeImportPhone(phone);
+    }
+    return {
+      rowType,
+      orgName: row.orgName ? String(row.orgName).trim() : null,
+      parentOrgName: row.parentOrgName ? String(row.parentOrgName).trim() : null,
+      userName,
+      leaderName: userName,
+      email: row.email ? String(row.email).trim() : null,
+      phone,
+      description: row.description ? String(row.description).trim() : null,
+      isLeader: Boolean(row.isLeader)
+    };
+  });
+}
+
+export function downloadOrgImportTemplate() {
+  const buf = buildOrgImportTemplateBuffer();
+  const blob = new Blob([buf], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = FILE_NAME;
+  a.rel = 'noopener';
+  a.click();
+  URL.revokeObjectURL(url);
+}
diff --git a/src/components/Tenant/OrgInfo/style.module.scss b/src/components/Tenant/OrgInfo/style.module.scss
index 7fe22a8..4669f34 100644
--- a/src/components/Tenant/OrgInfo/style.module.scss
+++ b/src/components/Tenant/OrgInfo/style.module.scss
@@ -1,11 +1,311 @@
+.import-modal {
+  width: 100%;
+}
+
+.import-modal-section {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.import-modal-hint {
+  margin-bottom: 0 !important;
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.import-modal-download {
+  align-self: flex-start;
+}
+
+.import-modal-field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+}
+
+.import-anchor-select {
+  width: 100%;
+}
+
+.import-preview-panel {
+  border: 1px solid var(--font-color-grey-3, #e8e8e8);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.import-preview-table {
+  :global(.ant-table) {
+    background: transparent;
+  }
+
+  :global(.ant-table-container) {
+    border-inline: none;
+    border-radius: 0;
+  }
+
+  :global(.ant-table-thead > tr > th),
+  :global(.ant-table-tbody > tr > td) {
+    border-color: var(--font-color-grey-3, #f0f0f0) !important;
+  }
+
+  :global(.ant-table-thead > tr > th) {
+    background: var(--primary-color-1, #f5f7ff);
+    color: rgba(0, 0, 0, 0.65);
+    font-weight: 600;
+    font-size: 13px;
+  }
+
+  :global(.ant-table-tbody > tr > td) {
+    vertical-align: middle;
+    font-size: 13px;
+    transition: background 0.2s ease;
+  }
+
+  :global(.ant-table-tbody > tr:not(.ant-table-expanded-row):hover > td) {
+    background: var(--primary-color-1, #fafbff) !important;
+  }
+
+  :global(.ant-table-expanded-row > .ant-table-cell) {
+    padding: 0 !important;
+    background: #f8f9fc;
+    border-bottom: none;
+  }
+
+  :global(.ant-table-row-expand-icon-cell) {
+    padding-inline: 12px !important;
+  }
+
+  :global(.ant-table-row-expand-icon) {
+    border-radius: 4px;
+  }
+}
+
+.import-preview-expand {
+  padding: 12px 16px 14px 44px;
+  border-top: 1px dashed var(--font-color-grey-3, #e8e8e8);
+  background: linear-gradient(180deg, #f8f9fc 0%, #f5f6fa 100%);
+}
+
+.import-preview-expand-header {
+  gap: 12px;
+  margin-bottom: 12px;
+  min-height: 28px;
+}
+
+.import-preview-expand-header-label {
+  flex: none;
+  min-height: 28px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--font-color-grey, rgba(0, 0, 0, 0.55));
+  line-height: 1;
+}
+
+.import-preview-expand-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary-color);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.import-preview-expand-header-label span {
+  display: inline-flex;
+  align-items: center;
+  line-height: 22px;
+}
+
+.import-preview-expand-badge {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  line-height: 1;
+
+  :global(.ant-badge-count) {
+    box-shadow: none;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.import-preview-nested-table {
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+
+  :global(.ant-table) {
+    margin: 0;
+  }
+
+  :global(.ant-table-thead > tr > th),
+  :global(.ant-table-tbody > tr > td) {
+    border-color: var(--font-color-grey-3, #ebebeb) !important;
+  }
+
+  :global(.ant-table-thead > tr > th) {
+    background: #fafafa;
+    font-weight: 600;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.55);
+    padding-block: 8px;
+  }
+
+  :global(.ant-table-tbody > tr > td) {
+    padding-block: 10px;
+    font-size: 13px;
+  }
+
+  :global(.ant-table-tbody > tr:last-child > td) {
+    border-bottom: none;
+  }
+
+  :global(.ant-table-tbody > tr:hover > td) {
+    background: var(--primary-color-1, #fafbff) !important;
+  }
+}
+
+.import-preview-checkbox-cell {
+  text-align: center;
+}
+
+.import-preview-org-cell {
+  align-items: center;
+}
+
+.import-preview-org-icon {
+  flex-shrink: 0;
+  color: var(--primary-color);
+  font-size: 15px;
+}
+
+.import-preview-org-name {
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.import-preview-ref-tag {
+  margin: 0;
+  font-size: 12px;
+  background: var(--primary-color-1, #f0f2ff);
+  color: var(--primary-color);
+}
+
+.import-preview-user-badge {
+  :global(.ant-badge-count) {
+    min-width: 22px;
+    height: 22px;
+    line-height: 22px;
+    box-shadow: none;
+    font-weight: 600;
+  }
+}
+
+.import-preview-user-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.import-preview-user-avatar {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(99, 102, 241, 0.12);
+  color: var(--primary-color);
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.import-preview-user-name {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.import-preview-leader-tag {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.import-preview-empty {
+  color: var(--font-color-grey-3, #bfbfbf);
+  font-size: 12px;
+}
+
 .org {
-  padding: 12px;
+  padding: 12px 0;
 
   :global(.ant-tree-node-content-wrapper):hover {
     background: var(--primary-color-1);
   }
 }
 
+.org-tree {
+  :global {
+    .ant-tree-treenode {
+      width: fit-content;
+      max-width: 100%;
+    }
+
+    .ant-tree-node-content-wrapper {
+      flex: 0 1 auto;
+      width: auto;
+      max-width: 100%;
+    }
+
+    .ant-tree-switcher {
+      &:before {
+        top: 5px;
+      }
+
+      .ant-tree-switcher-leaf-line:after {
+        top: 6px;
+      }
+
+      .ant-tree-switcher-line-icon {
+        transform: translateY(5px);
+      }
+    }
+
+    .ant-tree-treenode-leaf-last .ant-tree-switcher-leaf-line:before {
+      height: calc(var(--ant-tree-title-height) / 2 + 6px) !important;
+    }
+  }
+}
+
+.tree-node-main {
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  min-height: 24px;
+  align-items: center;
+  gap: 8px;
+}
+
+.tree-node-extra {
+  width: fit-content;
+  max-width: 100%;
+  margin-top: 4px;
+  padding-bottom: 2px;
+}
+
 .tree-node-options {
   opacity: 0;
   visibility: hidden;
@@ -13,6 +313,10 @@
 }
 
 .tree-node {
+  display: inline-flex;
+  flex-direction: column;
+  width: fit-content;
+  max-width: 100%;
   padding: 4px;
 
   &:hover {
@@ -23,6 +327,22 @@
   }
 }
 
+.tree-node-title-row {
+  flex: none;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.org-user-count {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.65);
+  background: var(--primary-color-1, #f5f7ff);
+  border-color: transparent;
+}
+
 .tree-node-title {
   font-weight: bold;
 }
@@ -32,6 +352,56 @@
   max-width: 400px;
 }
 
+.org-leader-meta {
+  margin-top: 6px;
+  max-width: 400px;
+}
+
+.org-leader-meta-tree {
+  margin-top: 4px;
+  padding: 0;
+}
+
+.org-leader-meta-graph {
+  margin-top: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+}
+
+.org-leader-row {
+  align-items: center;
+  gap: 8px;
+}
+
+.org-leader-avatar {
+  flex-shrink: 0;
+  min-height: unset !important;
+  min-width: unset !important;
+
+  :global {
+    .ant-avatar {
+      background: rgba(99, 102, 241, 0.12);
+      color: var(--primary-color);
+      font-weight: 700;
+    }
+  }
+}
+
+.org-leader-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--font-color-grey);
+  font-size: 13px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.org-card .org-leader-meta-graph {
+  max-width: 100%;
+}
+
 .org-chart-outer {
   box-sizing: border-box;
   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNjY2MiPjwvcmVjdD4KPC9zdmc+');
@@ -45,6 +415,17 @@
   max-width: 100%;
   overflow: auto;
   padding: 24px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.org-chart-inner-dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.org-chart-inner :global(.ant-card) {
+  cursor: default;
 }
 
 .control-panel {
@@ -64,7 +445,7 @@
 
   :global {
     .ant-card-body {
-      background: #FFFFFF;
+      background: #ffffff;
     }
   }
 
@@ -88,7 +469,7 @@
       background-color: var(--primary-color);
 
       .ant-btn-color-link {
-        color: #FFFFFF;
+        color: #ffffff;
       }
     }
   }
diff --git a/src/components/Tenant/Permission/index.js b/src/components/Tenant/Permission/index.js
index a22d403..5e07cdb 100644
--- a/src/components/Tenant/Permission/index.js
+++ b/src/components/Tenant/Permission/index.js
@@ -1,6 +1,8 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { useState } from 'react';
+import merge from 'lodash/merge';
 import Role from '../Role';
+import SharedGroup from '../SharedGroup';
 import TenantPermission from '../TenantPermission';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
@@ -52,7 +54,22 @@ const Permission = createWithRemoteLoader({
             : null}
         </Role>
       )}
-      {activeKey === 'sharedGroup' && formatMessage({ id: 'SharedGroup' })}
+      {activeKey === 'sharedGroup' && (
+        <SharedGroup
+          apis={merge({}, apis.sharedGroup, {
+            permissionList: apis.permission?.list,
+            userList: apis.userList
+          })}>
+          {typeof children === 'function'
+            ? props =>
+                children(
+                  Object.assign({}, props, {
+                    stateBar
+                  })
+                )
+            : null}
+        </SharedGroup>
+      )}
     </>
   );
 });
diff --git a/src/components/Tenant/README.md b/src/components/Tenant/README.md
index e39c35e..c825e45 100644
--- a/src/components/Tenant/README.md
+++ b/src/components/Tenant/README.md
@@ -2,7 +2,7 @@
 
 ### 概述
 
-租户管理系统组件，提供公司信息管理、组织架构管理、用户管理、角色权限管理等完整的租户管理功能。
+租户管理系统组件，提供公司信息管理、组织架构管理、用户管理、角色权限管理等完整的租户管理功能。子组件 `TenantUserSelect` 支持按组织树筛选并选择租户成员，适用于负责人指定、协作成员选择等表单场景。
 
 
 ### 示例(全屏)
@@ -45,13 +45,56 @@ render(<CompanyInfoExample />);
 ```
 
 - 组织架构
-- OrgInfo 组件用于管理组织架构，支持树形和图形两种展示模式，可添加、编辑、删除组织节点
-- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader)
+- OrgInfo 组件用于管理组织架构；示例与 TenantAdmin 详情内「组织架构」Tab 一致（Fetch + tenantAdmin orgList 与完整 apis）
+- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactFetch(@kne/react-fetch)
 
 ```jsx
 const { OrgInfo } = _Tenant;
-const { default: mockPreset, tenantData } = _mockPreset;
+const { default: mockPreset, tenantAdminData } = _mockPreset;
 const { createWithRemoteLoader } = remoteLoader;
+const Fetch = reactFetch.default;
+
+const OrgInfoInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset']
+})(({ remoteModules }) => {
+  const [usePreset] = remoteModules;
+  const { apis } = usePreset();
+  const tenant = tenantAdminData.tenantDetail;
+  return (
+    <Fetch
+      {...Object.assign({}, apis.tenantAdmin.orgList, {
+        params: {
+          tenantId: tenant.id
+        }
+      })}
+      render={({ data, reload }) => {
+        return (
+          <OrgInfo
+            data={data}
+            tenantId={tenant.id}
+            companyName={tenant?.tenantCompany?.name}
+            onSuccess={reload}
+            apis={{
+              create: Object.assign({}, apis.tenantAdmin.orgCreate, {
+                data: { tenantId: tenant.id }
+              }),
+              save: Object.assign({}, apis.tenantAdmin.orgSave, {
+                data: { tenantId: tenant.id }
+              }),
+              remove: Object.assign({}, apis.tenantAdmin.orgRemove, {
+                data: { tenantId: tenant.id }
+              }),
+              userList: Object.assign({}, apis.tenantAdmin.userList, {
+                params: { tenantId: tenant.id }
+              }),
+              import: apis.tenantAdmin.orgBatchImport
+            }}
+          />
+        );
+      }}
+    />
+  );
+});
 
 const OrgInfoExample = createWithRemoteLoader({
   modules: ['components-core:Global@PureGlobal', 'components-core:Layout']
@@ -60,18 +103,7 @@ const OrgInfoExample = createWithRemoteLoader({
   return (
     <PureGlobal preset={mockPreset}>
       <Layout navigation={{ isFixed: false }}>
-        <OrgInfo
-          data={tenantData.orgList}
-          companyName={tenantData.company.name}
-          apis={{
-            create: { loader: () => ({ id: &#96;dept-${Date.now()}&#96; }) },
-            save: { loader: () => ({ code: 0 }) },
-            remove: { loader: () => ({ code: 0 }) }
-          }}
-          onSuccess={() => {
-            console.log('操作成功');
-          }}
-        />
+        <OrgInfoInner />
       </Layout>
     </PureGlobal>
   );
@@ -178,7 +210,9 @@ const PermissionExample = createWithRemoteLoader({
               remove: mockPreset.apis.tenant.removeRole,
               permissionSave: mockPreset.apis.tenant.savePermission,
               permissionList: mockPreset.apis.tenant.getPermissionList
-            }
+            },
+            userList: mockPreset.apis.tenant.userList,
+            sharedGroup: mockPreset.apis.tenant.sharedGroup
           }}
         />
       </Layout>
@@ -250,6 +284,186 @@ render(<JoinInvitationExample />);
 
 ```
 
+- 按组织选择成员
+- TenantUserSelect 先选组织再选租户成员，适用于指定项目负责人等场景
+- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactFetch(@kne/react-fetch)
+
+```jsx
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectBaseExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton, CancelButton } = FormInfo;
+  const { Input } = FormInfo.fields;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        onSubmit={data => {
+          console.log('提交数据:', data);
+        }}>
+        <FormInfo
+          title="按组织选择负责人"
+          column={1}
+          list={[<Input name="projectName" label="项目名称" rule="REQ" placeholder="例如：Q2 产品迭代" />]}
+        />
+        <TenantUserSelect
+          name="owner"
+          label="项目负责人"
+          rule="REQ"
+          placeholder="请选择负责人"
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <CancelButton style={{ marginRight: 8 }}>取消</CancelButton>
+          <SubmitButton type="primary">提交</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectBaseExample />);
+
+```
+
+- 按组织多选成员
+- TenantUserSelect 多选模式，用于选择多个协作成员
+- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactFetch(@kne/react-fetch)
+
+```jsx
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectMultipleExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+  const { Input } = FormInfo.fields;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        onSubmit={data => {
+          console.log('协作成员:', data);
+        }}>
+        <FormInfo
+          title="跨部门协作"
+          column={1}
+          list={[<Input name="taskName" label="任务名称" rule="REQ" placeholder="例如：官网改版评审" />]}
+        />
+        <TenantUserSelect
+          name="collaborators"
+          label="协作成员"
+          rule="REQ"
+          single={false}
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <SubmitButton type="primary">保存</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectMultipleExample />);
+
+```
+
+- 按组织选择成员（初始值）
+- 编辑场景为 TenantUserSelect 设置默认成员，值为 { id, name }
+- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactFetch(@kne/react-fetch)
+
+```jsx
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectInitialExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        defaultValues={{
+          approver: { id: 'user-2', name: '李娜' }
+        }}
+        onSubmit={data => {
+          console.log('审批人:', data);
+        }}>
+        <TenantUserSelect
+          name="approver"
+          label="审批人"
+          rule="REQ"
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <SubmitButton type="primary">保存</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectInitialExample />);
+
+```
+
+- 按组织选择成员（状态筛选）
+- 通过 userStatus 仅加载在职成员
+- _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactFetch(@kne/react-fetch),antd(antd)
+
+```jsx
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+const { Flex, Typography } = antd;
+
+const TenantUserSelectStatusExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+  const { Text } = Typography;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Flex vertical gap={16}>
+        <Text type="secondary">仅展示状态为「开启」的成员（userStatus=&quot;open&quot;，亦兼容 active）</Text>
+        <Form
+          onSubmit={data => {
+            console.log('交接人:', data);
+          }}>
+          <TenantUserSelect
+            name="handoverUser"
+            label="工作交接人"
+            rule="REQ"
+            userStatus="open"
+            companyName="科技创新有限公司"
+          />
+          <div style={{ marginTop: 24, textAlign: 'center' }}>
+            <SubmitButton type="primary">确认</SubmitButton>
+          </div>
+        </Form>
+      </Flex>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectStatusExample />);
+
+```
+
 - 系统设置
 - Setting 组件是系统设置的入口，包含公司信息、组织架构、权限管理、用户管理四个设置模块
 - _Tenant(@components/Tenant),_mockPreset(@root/mockPreset),remoteLoader(@kne/remote-loader),reactRouterDom(react-router-dom)
@@ -258,8 +472,30 @@ render(<JoinInvitationExample />);
 const { Setting } = _Tenant;
 const { default: mockPreset } = _mockPreset;
 const { createWithRemoteLoader } = remoteLoader;
-const { useNavigate, Navigate } = reactRouterDom;
-const { Route, Routes } = reactRouterDom;
+const { MemoryRouter, Navigate, Route, Routes } = reactRouterDom;
+
+const settingApis = {
+  user: {
+    list: mockPreset.apis.tenant.getUserList,
+    create: mockPreset.apis.tenant.createUser,
+    save: mockPreset.apis.tenant.saveUser,
+    remove: mockPreset.apis.tenant.removeUser
+  },
+  permission: {
+    list: mockPreset.apis.tenant.getPermissionList,
+    save: mockPreset.apis.tenant.savePermission
+  },
+  role: {
+    list: mockPreset.apis.tenant.getRoleList,
+    create: mockPreset.apis.tenant.createRole,
+    save: mockPreset.apis.tenant.saveRole,
+    remove: mockPreset.apis.tenant.removeRole,
+    permissionSave: mockPreset.apis.tenant.savePermission,
+    permissionList: mockPreset.apis.tenant.getPermissionList
+  },
+  userList: mockPreset.apis.tenant.userList,
+  sharedGroup: mockPreset.apis.tenant.sharedGroup
+};
 
 const SettingExample = createWithRemoteLoader({
   modules: ['components-core:Global@PureGlobal', 'components-core:Layout']
@@ -268,40 +504,24 @@ const SettingExample = createWithRemoteLoader({
   return (
     <PureGlobal preset={mockPreset}>
       <Layout navigation={{ isFixed: false }}>
-        <Routes>
-          <Route
-            path="/Tenant/setting/*"
-            element={
-              <Setting
-                pageProps={{
-                  menuFixed: false
-                }}
-                baseUrl="/Tenant"
-                apis={{
-                  user: {
-                    list: mockPreset.apis.tenant.getUserList,
-                    create: mockPreset.apis.tenant.createUser,
-                    save: mockPreset.apis.tenant.saveUser,
-                    remove: mockPreset.apis.tenant.removeUser
-                  },
-                  permission: {
-                    list: mockPreset.apis.tenant.getPermissionList,
-                    save: mockPreset.apis.tenant.savePermission
-                  },
-                  role: {
-                    list: mockPreset.apis.tenant.getRoleList,
-                    create: mockPreset.apis.tenant.createRole,
-                    save: mockPreset.apis.tenant.saveRole,
-                    remove: mockPreset.apis.tenant.removeRole,
-                    permissionSave: mockPreset.apis.tenant.savePermission,
-                    permissionList: mockPreset.apis.tenant.getPermissionList
-                  }
-                }}
-              />
-            }
-          />
-          <Route path="/Tenant/*" element={<Navigate to="/Tenant/setting" replace />} />
-        </Routes>
+        <MemoryRouter initialEntries={['/Tenant/setting/company']}>
+          <Routes>
+            <Route
+              path="/Tenant/setting/*"
+              element={
+                <Setting
+                  pageProps={{
+                    menuFixed: false
+                  }}
+                  baseUrl="/Tenant"
+                  apis={settingApis}
+                />
+              }
+            />
+            <Route path="/Tenant" element={<Navigate to="/Tenant/setting/company" replace />} />
+            <Route path="*" element={<Navigate to="/Tenant/setting/company" replace />} />
+          </Routes>
+        </MemoryRouter>
       </Layout>
     </PureGlobal>
   );
@@ -343,7 +563,8 @@ render(<SettingExample />);
 | --- | --- | --- | --- |
 | data | 组织列表数据 | array | [] |
 | companyName | 公司名称 | string | - |
-| apis | API 配置 | object | - |
+| tenantId | 租户 ID（管理端 `tenantAdmin` 场景传入，用于批量导入等接口 body） | string | - |
+| apis | API 配置（含 create、save、remove、userList、import 等） | object | - |
 | onSuccess | 操作成功回调 | function | - |
 
 ### UserList 用户列表
@@ -361,6 +582,14 @@ render(<SettingExample />);
 | --- | --- | --- | --- |
 | apis | API 配置 | object | - |
 
+角色列表 `apis.list` 支持 `params.filter`：
+
+| 字段 | 说明 |
+| --- | --- |
+| keyword | 名称/编码/描述模糊搜索 |
+| type | 角色类型：`system` / `custom` |
+| status | 状态：`open` / `closed` |
+
 ### Permission 权限管理
 
 | 属性名 | 说明 | 类型 | 默认值 |
@@ -389,6 +618,24 @@ render(<SettingExample />);
 | apis | API 配置 | object | - |
 | baseUrl | 基础路径 | string | - |
 
+### TenantUserSelect 按组织选择租户用户
+
+参考 `UserSelect`，用于在表单中先选组织、再选租户成员。左侧为组织树，右侧为成员选择器（`SuperSelect`），成员列表按所选组织及其子组织过滤（`filter.tenantOrgId`）。
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 表单字段名称 | string | - |
+| label | 表单标签 | string | - |
+| rule | 校验规则，如 `REQ` | string | - |
+| placeholder | 成员选择占位文本 | string | - |
+| single | 是否单选 | boolean | true |
+| disabled | 是否禁用 | boolean | false |
+| userStatus | 成员状态筛选：`open` / `closed`（兼容 `active` → `open`、`inactive` → `closed`） | string | - |
+| companyName | 组织树根节点（公司）名称 | string | - |
+| showOrgRoot | 是否展示公司根节点 | boolean | true |
+| orgApi | 自定义组织列表 API，默认 `apis.tenant.orgList` | object | - |
+| userApi | 自定义成员列表 API，默认 `apis.tenant.userList` | object | - |
+
 ## API 配置说明
 
 ```javascript
diff --git a/src/components/Tenant/Role/getFilterList.js b/src/components/Tenant/Role/getFilterList.js
new file mode 100644
index 0000000..a20a6c5
--- /dev/null
+++ b/src/components/Tenant/Role/getFilterList.js
@@ -0,0 +1,16 @@
+const getFilterList = ({ formatMessage, SuperSelectFilterItem }) => [
+  [
+    <SuperSelectFilterItem
+      key="type"
+      label={formatMessage({ id: 'SettingType' })}
+      name="type"
+      single
+      options={[
+        { label: formatMessage({ id: 'SystemType' }), value: 'system' },
+        { label: formatMessage({ id: 'CustomType' }), value: 'custom' }
+      ]}
+    />
+  ]
+];
+
+export default getFilterList;
diff --git a/src/components/Tenant/Role/getRoleListFilterValue.js b/src/components/Tenant/Role/getRoleListFilterValue.js
new file mode 100644
index 0000000..48fa49d
--- /dev/null
+++ b/src/components/Tenant/Role/getRoleListFilterValue.js
@@ -0,0 +1,52 @@
+const pickSelectValues = value => {
+  if (value == null || value === '') {
+    return [];
+  }
+  const list = Array.isArray(value) ? value : [value];
+  return list
+    .map(item => {
+      if (item == null) {
+        return null;
+      }
+      if (typeof item !== 'object') {
+        return String(item);
+      }
+      if (item.value != null && item.value !== '') {
+        return String(item.value);
+      }
+      if (item.id != null && item.id !== '') {
+        return String(item.id);
+      }
+      return null;
+    })
+    .filter(Boolean);
+};
+
+/**
+ * AdvancedSelectFilterItem 筛选项为 { label, value }，
+ * Filter.getFilterValue 可能无法正确写入 filter.type，需在此补全。
+ */
+const getRoleListFilterValue = (filter, getFilterValue) => {
+  const value = getFilterValue(filter);
+
+  const typeEntry = filter.find(item => item.name === 'type');
+  if (typeEntry) {
+    const types = pickSelectValues(typeEntry.value);
+    if (types.length) {
+      value.type = types[0];
+    } else {
+      delete value.type;
+    }
+  } else if (value.type != null && typeof value.type === 'object') {
+    const types = pickSelectValues(value.type);
+    if (types.length) {
+      value.type = types[0];
+    } else {
+      delete value.type;
+    }
+  }
+
+  return value;
+};
+
+export default getRoleListFilterValue;
diff --git a/src/components/Tenant/Role/index.js b/src/components/Tenant/Role/index.js
index 5251981..8376fe6 100644
--- a/src/components/Tenant/Role/index.js
+++ b/src/components/Tenant/Role/index.js
@@ -1,17 +1,30 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { useMemo } from 'react';
 import BizUnit from '@components/BizUnit';
 import getColumns from './getColumns';
+import getFilterList from './getFilterList';
+import getRoleListFilterValue from './getRoleListFilterValue';
 import FormInner from './FormInner';
 import SetRolePermission from './Actions/SetRolePermission';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
 
-const Role = ({ apis, ...props }) => {
+const Role = createWithRemoteLoader({
+  modules: ['components-core:Filter']
+})(({ remoteModules, apis, ...props }) => {
   const { formatMessage } = useIntl();
+  const [Filter] = remoteModules;
+  const { SuperSelectFilterItem } = Filter.fields;
   const columns = getColumns({ formatMessage });
+  const filterList = useMemo(
+    () => getFilterList({ formatMessage, SuperSelectFilterItem }),
+    [formatMessage, SuperSelectFilterItem]
+  );
   return (
     <BizUnit
       {...props}
       apis={apis}
+      filterList={filterList}
       getColumns={() => columns}
       getFormInner={props => {
         return <FormInner {...props} />;
@@ -36,10 +49,11 @@ const Role = ({ apis, ...props }) => {
       }}
       name="role-list"
       options={{
-        bizName: formatMessage({ id: 'Role' })
+        bizName: formatMessage({ id: 'Role' }),
+        mapFilterValue: getRoleListFilterValue
       }}
     />
   );
-};
+});
 
 export default withLocale(Role);
diff --git a/src/components/Tenant/Setting/Org.js b/src/components/Tenant/Setting/Org.js
index 7c02b49..093aba7 100644
--- a/src/components/Tenant/Setting/Org.js
+++ b/src/components/Tenant/Setting/Org.js
@@ -3,6 +3,7 @@ import OrgInfo from '../OrgInfo';
 import Fetch from '@kne/react-fetch';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
+import { useNavigate } from 'react-router-dom';
 
 const OrgInner = createWithRemoteLoader({
   modules: [
@@ -20,6 +21,9 @@ const OrgInner = createWithRemoteLoader({
   const allowCreate = usePermissionsPass({ request: ['setting:org:create'] });
   const allowSave = usePermissionsPass({ request: ['setting:org:edit'] });
   const allowRemove = usePermissionsPass({ request: ['setting:org:remove'] });
+  const allowImport = usePermissionsPass({ request: ['setting:org:create'] }) || usePermissionsPass({ request: ['setting:org:edit'] });
+  const allowViewUsers = usePermissionsPass({ request: ['setting:user-manager:view'] });
+  const navigate = useNavigate();
 
   const pageProps = Object.assign({}, originPageProps, {
     menu,
@@ -32,12 +36,26 @@ const OrgInner = createWithRemoteLoader({
             return (
               <OrgInfo
                 data={data}
+                tenantId={global.tenant?.id}
                 companyName={global.tenant?.tenantCompany?.name || global.tenant.name}
                 onSuccess={reload}
+                onViewUsers={
+                  allowViewUsers
+                    ? org => {
+                        const query = new URLSearchParams({
+                          tenantOrgId: String(org.id),
+                          orgName: org.name || ''
+                        });
+                        navigate(`../user?${query.toString()}`);
+                      }
+                    : undefined
+                }
                 apis={{
                   create: allowCreate && Object.assign({}, apis.tenant.orgCreate),
                   save: allowSave && Object.assign({}, apis.tenant.orgSave),
-                  remove: allowRemove && Object.assign({}, apis.tenant.orgRemove)
+                  remove: allowRemove && Object.assign({}, apis.tenant.orgRemove),
+                  userList: Object.assign({}, apis.tenant.userList),
+                  import: allowImport && Object.assign({}, apis.tenant.orgBatchImport)
                 }}
               />
             );
diff --git a/src/components/Tenant/Setting/Permission.js b/src/components/Tenant/Setting/Permission.js
index 67b61b7..e92a9b0 100644
--- a/src/components/Tenant/Setting/Permission.js
+++ b/src/components/Tenant/Setting/Permission.js
@@ -1,5 +1,6 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import Role from '../Role';
+import SharedGroup from '../SharedGroup';
 import { useState } from 'react';
 import transform from 'lodash/transform';
 import withLocale from '../withLocale';
@@ -11,24 +12,20 @@ const PermissionInner = createWithRemoteLoader({
     'components-core:Global@usePreset',
     'components-core:Permissions',
     'components-core:Permissions@usePermissionsPass',
-    'components-core:Filter@FilterProvider',
-    'components-core:Table@TablePage',
     'components-core:StateBar'
   ]
 })(({ remoteModules, menu, pageProps: originPageProps, children }) => {
-  const [Page, usePreset, Permissions, usePermissionsPass, FilterProvider, TablePage, StateBar] = remoteModules;
+  const [Page, usePreset, Permissions, usePermissionsPass, StateBar] = remoteModules;
   const { formatMessage } = useIntl();
   const { apis } = usePreset();
-  const [target, setTarget] = useState({});
-  const filter = Object.assign({}, { value: [] }, target.filter);
   const allowRole = usePermissionsPass({ request: ['setting:permission:role'] });
   const allowSharedGroup = usePermissionsPass({ request: ['setting:permission:shared-group'] });
   const allowRoleCreate = usePermissionsPass({ request: ['setting:permission:role:create'] });
   const allowRoleEdit = usePermissionsPass({ request: ['setting:permission:role:edit'] });
   const allowRoleRemove = usePermissionsPass({ request: ['setting:permission:role:remove'] });
-  /*const allowSharedGroupCreate = usePermissionsPass({ request: ['setting:permission:shared-group:create'] });
+  const allowSharedGroupCreate = usePermissionsPass({ request: ['setting:permission:shared-group:create'] });
   const allowSharedGroupEdit = usePermissionsPass({ request: ['setting:permission:shared-group:edit'] });
-  const allowSharedGroupRemove = usePermissionsPass({ request: ['setting:permission:shared-group:remove'] });*/
+  const allowSharedGroupRemove = usePermissionsPass({ request: ['setting:permission:shared-group:remove'] });
   const [activeKey, setActiveKey] = useState(allowRole ? 'role' : 'sharedGroup');
   const rolePermissions = {
     create: allowRoleCreate,
@@ -37,11 +34,18 @@ const PermissionInner = createWithRemoteLoader({
     permissionSave: allowRoleEdit,
     remove: allowRoleRemove
   };
+  const sharedGroupPermissions = {
+    list: true,
+    create: allowSharedGroupCreate,
+    save: allowSharedGroupEdit,
+    setStatus: allowSharedGroupEdit,
+    remove: allowSharedGroupRemove,
+    permissionList: true,
+    userList: true
+  };
   const pageProps = Object.assign({}, originPageProps, {
     menu,
     title: formatMessage({ id: 'PermissionManagement' }),
-    filter,
-    titleExtra: <FilterProvider {...filter}>{target.topOptions}</FilterProvider>,
     children: (
       <>
         <Permissions request={['setting:permission:role', 'setting:permission:shared-group']}>
@@ -71,9 +75,25 @@ const PermissionInner = createWithRemoteLoader({
                 },
                 {}
               )}
-              onMount={setTarget}>
-              {({ tableOptions }) => <TablePage {...tableOptions} />}
-            </Role>
+            />
+          </Permissions>
+        )}
+        {activeKey === 'sharedGroup' && (
+          <Permissions request={['setting:permission:shared-group:view']} type="error">
+            <SharedGroup
+              apis={transform(
+                Object.assign({}, apis.tenant.sharedGroup, {
+                  permissionList: apis.tenant.permission.list,
+                  userList: apis.tenant.userList
+                }),
+                (result, value, key) => {
+                  if (sharedGroupPermissions[key] !== false) {
+                    result[key] = value;
+                  }
+                },
+                {}
+              )}
+            />
           </Permissions>
         )}
       </>
diff --git a/src/components/Tenant/Setting/User.js b/src/components/Tenant/Setting/User.js
index 518dc08..65019a7 100644
--- a/src/components/Tenant/Setting/User.js
+++ b/src/components/Tenant/Setting/User.js
@@ -27,11 +27,12 @@ const User = createWithRemoteLoader({
   const pageProps = Object.assign({}, originPageProps, {
     menu,
     title: formatMessage({ id: 'UserManagement' }),
-    filter,
+    filter: Object.assign({}, filter, { list: target.filterList || [] }),
     titleExtra: <FilterProvider {...filter}>{target.topOptions}</FilterProvider>,
     children: (
       <Permissions request={['setting:user-manager:view']} type="error">
         <UserList
+          allowQueryIdForUserFilter
           onMount={setTarget}
           apis={Object.assign(
             {},
diff --git a/src/components/Tenant/SharedGroup/FormInner.js b/src/components/Tenant/SharedGroup/FormInner.js
index ab93434..28bbe58 100644
--- a/src/components/Tenant/SharedGroup/FormInner.js
+++ b/src/components/Tenant/SharedGroup/FormInner.js
@@ -1,15 +1,73 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
+import Fetch from '@kne/react-fetch';
+import { Flex, Spin } from 'antd';
+import get from 'lodash/get';
+import merge from 'lodash/merge';
 import { useIntl } from '@kne/react-intl';
 import withLocale from '../withLocale';
+import SharedGroupModulesFormField from './SharedGroupModulesFormField';
 
 const FormInner = createWithRemoteLoader({
   modules: ['components-core:FormInfo']
-})(withLocale(({ remoteModules }) => {
-  const [FormInfo] = remoteModules;
-  const { formatMessage } = useIntl();
-  const { Input } = FormInfo.fields;
+})(
+  withLocale(({ remoteModules, apis, action: _action }) => {
+    const [FormInfo] = remoteModules;
+    const { formatMessage } = useIntl();
+    const { Input, TextArea, SuperSelect } = FormInfo.fields;
 
-  return <FormInfo column={1} list={[<Input name="name" label={formatMessage({ id: 'SharedGroupName' })} rule="REQ LEN-2-100" />]} />;
-}));
+    return (
+      <Fetch
+        {...merge({}, apis.permissionList)}
+        render={({ data }) => {
+          const permissions = get(data, 'permissions', { modules: [] });
+          return (
+            <FormInfo
+              column={1}
+              list={[
+                <Input name="name" label={formatMessage({ id: 'SharedGroupName' })} rule="REQ LEN-2-100" />,
+                <TextArea name="description" label={formatMessage({ id: 'Description' })} block />,
+                <SharedGroupModulesFormField
+                  key="shared-modules"
+                  name="sharedModules"
+                  label={formatMessage({ id: 'SharedGroupModulesLabel' })}
+                  description={formatMessage({ id: 'SharedGroupModulesHint' })}
+                  permissions={permissions}
+                  rule="REQ"
+                  block
+                />,
+                <SuperSelect
+                  name="dataSourceTenantUserIds"
+                  label={formatMessage({ id: 'SharedGroupDataSources' })}
+                  description={formatMessage({ id: 'SharedGroupDataSourcesDesc' })}
+                  api={merge({}, apis.userList, {
+                    params: {
+                      filter: { status: 'open' }
+                    }
+                  })}
+                  valueKey="id"
+                  labelKey="name"
+                  interceptor="array-output-value"
+                />,
+                <SuperSelect
+                  name="memberTenantUserIds"
+                  label={formatMessage({ id: 'SharedGroupMembers' })}
+                  description={formatMessage({ id: 'SharedGroupMembersDesc' })}
+                  api={merge({}, apis.userList, {
+                    params: {
+                      filter: { status: 'open' }
+                    }
+                  })}
+                  valueKey="id"
+                  labelKey="name"
+                  interceptor="array-output-value"
+                />
+              ]}
+            />
+          );
+        }}
+      />
+    );
+  })
+);
 
 export default FormInner;
diff --git a/src/components/Tenant/SharedGroup/SharedGroupModulesField.js b/src/components/Tenant/SharedGroup/SharedGroupModulesField.js
new file mode 100644
index 0000000..ec73dcd
--- /dev/null
+++ b/src/components/Tenant/SharedGroup/SharedGroupModulesField.js
@@ -0,0 +1,197 @@
+import React, { useEffect, useMemo } from 'react';
+import { Card, Checkbox, Radio, Tag } from 'antd';
+import { useIntl } from '@kne/react-intl';
+import { collectDataScopeModules } from './collectDataScopeModules';
+import styles from './SharedGroupModulesField.module.scss';
+
+/** 在 dataScope.list 允许的 access 中取值；非法或缺省时用 list 第一项（与权限配置顺序一致） */
+const pickAccess = (raw, allowedAccess) => {
+  if (!Array.isArray(allowedAccess) || !allowedAccess.length) {
+    return 'read';
+  }
+  const acc = raw === 'write' || raw === 'read' ? raw : null;
+  if (acc && allowedAccess.includes(acc)) {
+    return acc;
+  }
+  return allowedAccess[0];
+};
+
+const accessLabels = {
+  read: 'SharedGroupAccessRead',
+  write: 'SharedGroupAccessWrite'
+};
+
+const dataScopeTypeLabels = {
+  owner: 'DataScopeTypeOwner',
+  org: 'DataScopeTypeOrg',
+  orgSubtree: 'DataScopeTypeOrgSubtree',
+  self: 'DataScopeTypeSelf'
+};
+
+/**
+ * 共享组「共享模块」：仅展示 dataScope.open 的模块；每项只读/读写受 dataScope.list 约束。
+ * layout=field 时供 SharedGroupModulesFormField 使用（标题由 FormInfo 字段 label/description 承担）。
+ * 受控 value：[{ moduleCode, access: 'read' | 'write' }]。可直接点击「只读/读写」以选中该模块。
+ */
+const SharedGroupModulesField = ({ permissions, value = [], onChange, disabled, layout = 'card' }) => {
+  const { formatMessage } = useIntl();
+  const options = useMemo(() => collectDataScopeModules(permissions || { modules: [] }), [permissions]);
+
+  const byCode = useMemo(() => {
+    const m = new Map();
+    const optBy = new Map(options.map(o => [o.moduleCode, o]));
+    for (const v of Array.isArray(value) ? value : []) {
+      if (!v || !v.moduleCode) {
+        continue;
+      }
+      const opt = optBy.get(v.moduleCode);
+      const allowed = opt?.allowedAccess || ['read', 'write'];
+      m.set(v.moduleCode, pickAccess(v.access, allowed));
+    }
+    return m;
+  }, [value, options]);
+
+  useEffect(() => {
+    if (!onChange || !options.length) {
+      return;
+    }
+    const list = Array.isArray(value) ? value : [];
+    const optBy = new Map(options.map(o => [o.moduleCode, o]));
+    let changed = false;
+    const out = list.map(v => {
+      if (!v?.moduleCode) {
+        return v;
+      }
+      const opt = optBy.get(v.moduleCode);
+      if (!opt) {
+        return v;
+      }
+      const next = pickAccess(v.access, opt.allowedAccess);
+      if (next !== v.access) {
+        changed = true;
+      }
+      return { moduleCode: v.moduleCode, access: next };
+    });
+    if (changed) {
+      onChange(out);
+    }
+  }, [value, options, onChange]);
+
+  const emit = nextMap => {
+    const optBy = new Map(options.map(o => [o.moduleCode, o]));
+    onChange(
+      [...nextMap.entries()].map(([code, acc]) => ({
+        moduleCode: code,
+        access: pickAccess(acc, optBy.get(code)?.allowedAccess || ['read', 'write'])
+      }))
+    );
+  };
+
+  const setAccess = (moduleCode, access, allowedAccess) => {
+    if (!allowedAccess.includes(access)) {
+      return;
+    }
+    const next = new Map(byCode);
+    next.set(moduleCode, access);
+    emit(next);
+  };
+
+  const toggleModule = (item, checked) => {
+    const next = new Map(byCode);
+    if (checked) {
+      next.set(item.moduleCode, pickAccess(undefined, item.allowedAccess));
+    } else {
+      next.delete(item.moduleCode);
+    }
+    emit(next);
+  };
+
+  const rowsWithSections = useMemo(() => {
+    const rows = [];
+    let lastSection = null;
+    for (const item of options) {
+      if (item.section !== lastSection) {
+        rows.push({ type: 'section', key: `s-${item.section}`, label: item.section });
+        lastSection = item.section;
+      }
+      rows.push({ type: 'item', key: item.moduleCode, item });
+    }
+    return rows;
+  }, [options]);
+
+  const body = (
+    <>
+      {layout === 'card' && (
+        <div className={styles.hint}>{formatMessage({ id: 'SharedGroupModulesHint' })}</div>
+      )}
+      {options.length === 0 ? (
+        <div className={styles.empty}>{formatMessage({ id: 'SharedGroupModulesEmpty' })}</div>
+      ) : (
+        <div className={styles.scroller}>
+          {rowsWithSections.map(row => {
+            if (row.type === 'section') {
+              return (
+                <div key={row.key} className={styles.section}>
+                  {row.label}
+                </div>
+              );
+            }
+            const item = row.item;
+            const checked = byCode.has(item.moduleCode);
+            const current = checked ? byCode.get(item.moduleCode) : undefined;
+            const indent = Math.max(0, item.depth - 1) * 16;
+            return (
+              <div key={row.key} className={styles.row} style={{ paddingLeft: 12 + indent }}>
+                <div className={styles.rowMain}>
+                  <Checkbox checked={checked} disabled={disabled} onChange={e => toggleModule(item, e.target.checked)}>
+                    <span className={styles.moduleTitle}>
+                      <strong>{item.name}</strong>
+                      <Tag className={styles.scopeTag} color="processing">
+                        {formatMessage({
+                          id:
+                            dataScopeTypeLabels[item.dataScopeType] ||
+                            dataScopeTypeLabels.self
+                        })}
+                      </Tag>
+                    </span>
+                  </Checkbox>
+                  <Radio.Group
+                    className={styles.access}
+                    size="small"
+                    optionType="button"
+                    buttonStyle="solid"
+                    value={current}
+                    disabled={disabled}
+                    onChange={e => setAccess(item.moduleCode, e.target.value, item.allowedAccess)}>
+                    {item.allowedAccess.map(acc => (
+                      <Radio key={acc} value={acc}>
+                        {formatMessage({ id: accessLabels[acc] || 'SharedGroupAccessRead' })}
+                      </Radio>
+                    ))}
+                  </Radio.Group>
+                </div>
+                {item.namePath.length > 1 && (
+                  <div className={styles.rowMeta}>
+                    {item.breadcrumb ? `${item.breadcrumb} → ${item.name}` : item.namePath.join(' / ')}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+
+  if (layout === 'field') {
+    return <div className={styles.panel}>{body}</div>;
+  }
+
+  return (
+    <Card size="small" className={styles.card} title={formatMessage({ id: 'SharedGroupModulesLabel' })}>
+      {body}
+    </Card>
+  );
+};
+
+export default SharedGroupModulesField;
diff --git a/src/components/Tenant/SharedGroup/SharedGroupModulesField.module.scss b/src/components/Tenant/SharedGroup/SharedGroupModulesField.module.scss
new file mode 100644
index 0000000..ef60a97
--- /dev/null
+++ b/src/components/Tenant/SharedGroup/SharedGroupModulesField.module.scss
@@ -0,0 +1,110 @@
+.panel {
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  padding: 0;
+}
+
+.card {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+  background: #fff;
+  padding: 0;
+
+  :global(.ant-card-head) {
+    min-height: 0;
+    padding: 0;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  :global(.ant-card-head-title) {
+    padding: 10px 12px;
+    font-weight: 600;
+  }
+
+  :global(.ant-card-body) {
+    padding: 0;
+    background: #fff;
+  }
+}
+
+.hint {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.scroller {
+  max-height: 360px;
+  overflow: auto;
+  padding: 0;
+  background: #fff;
+}
+
+.section {
+  padding: 8px 12px 4px;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.65);
+  background: #fafafa;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.row {
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.15s;
+  background: #fff;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.rowMain {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.moduleTitle {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.scopeTag {
+  margin: 0;
+  font-weight: normal;
+  line-height: 18px;
+}
+
+.rowMeta {
+  margin-top: 4px;
+  padding-left: 24px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.access {
+  flex-shrink: 0;
+}
+
+.empty {
+  padding: 16px 12px;
+  font-size: 13px;
+  color: rgba(0, 0, 0, 0.45);
+  background: #fff;
+}
diff --git a/src/components/Tenant/SharedGroup/SharedGroupModulesFormField.js b/src/components/Tenant/SharedGroup/SharedGroupModulesFormField.js
new file mode 100644
index 0000000..c5ba628
--- /dev/null
+++ b/src/components/Tenant/SharedGroup/SharedGroupModulesFormField.js
@@ -0,0 +1,30 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import omit from 'lodash/omit';
+import SharedGroupModulesField from './SharedGroupModulesField';
+
+/**
+ * FormInfo 正式字段：通过 FormInfo.hooks.useDecorator 接入表单布局与校验，
+ * 避免自定义区域被表单项透明层拦截导致 Checkbox 无法点击。
+ */
+const SharedGroupModulesFormField = createWithRemoteLoader({
+  modules: ['components-core:FormInfo']
+})(({ remoteModules, permissions, ...props }) => {
+  const [FormInfo] = remoteModules;
+  const { useDecorator } = FormInfo.hooks;
+  const fieldProps = omit(props, ['remoteModules', 'permissions']);
+  const render = useDecorator(fieldProps);
+
+  const InnerControl = ({ value, onChange, disabled }) => (
+    <SharedGroupModulesField
+      layout="field"
+      permissions={permissions}
+      value={Array.isArray(value) ? value : []}
+      onChange={onChange}
+      disabled={disabled}
+    />
+  );
+
+  return render(InnerControl);
+});
+
+export default SharedGroupModulesFormField;
diff --git a/src/components/Tenant/SharedGroup/collectDataScopeModules.js b/src/components/Tenant/SharedGroup/collectDataScopeModules.js
new file mode 100644
index 0000000..26dd0d3
--- /dev/null
+++ b/src/components/Tenant/SharedGroup/collectDataScopeModules.js
@@ -0,0 +1,53 @@
+import { normalizeDataScopeList } from './normalizeDataScopeList';
+
+/**
+ * 从权限树中收集已开启数据权限（dataScope.open）的模块，供共享组「共享模块」勾选。
+ * 与后端 fastify-tenant 中 permissions 模块节点上的 dataScope 约定一致。
+ *
+ * @param {{ modules?: Array<Record<string, unknown>> }} permissions
+ * @returns {Array<{ moduleCode: string, name: string, namePath: string[], allowedAccess: string[], dataScopeType: 'owner' | 'org' | 'orgSubtree' | 'self', depth: number, section: string, breadcrumb: string }>}
+ */
+export function collectDataScopeModules(permissions) {
+  const out = [];
+  const root = permissions && Array.isArray(permissions.modules) ? permissions.modules : [];
+
+  const walk = (modules, parentCode, namePath) => {
+    for (const mod of modules) {
+      if (!mod || typeof mod.code !== 'string') {
+        continue;
+      }
+      const currentCode = parentCode ? `${parentCode}:${mod.code}` : mod.code;
+      const path = [...namePath, mod.name || mod.code];
+      const ds = mod.dataScope;
+      if (ds && ds.open === true) {
+        const allowedAccess = normalizeDataScopeList(ds.list);
+        if (allowedAccess.length) {
+          const depth = Math.max(0, path.length - 1);
+          const section = path[0] || mod.name || mod.code;
+          const breadcrumb = path.length > 1 ? path.slice(0, -1).join(' / ') : '';
+          const dataScopeType =
+            ds.type === 'owner' || ds.type === 'org' || ds.type === 'orgSubtree' || ds.type === 'self'
+              ? ds.type
+              : 'self';
+          out.push({
+            moduleCode: currentCode,
+            name: mod.name || mod.code,
+            namePath: path,
+            allowedAccess,
+            dataScopeType,
+            depth,
+            section,
+            breadcrumb
+          });
+        }
+      }
+      if (Array.isArray(mod.modules) && mod.modules.length) {
+        walk(mod.modules, currentCode, path);
+      }
+    }
+  };
+
+  walk(root, '', []);
+  out.sort((a, b) => a.moduleCode.localeCompare(b.moduleCode));
+  return out;
+}
diff --git a/src/components/Tenant/SharedGroup/index.js b/src/components/Tenant/SharedGroup/index.js
index e69de29..75038be 100644
--- a/src/components/Tenant/SharedGroup/index.js
+++ b/src/components/Tenant/SharedGroup/index.js
@@ -0,0 +1,64 @@
+import BizUnit from '@components/BizUnit';
+import getColumns from './getColumns';
+import FormInner from './FormInner';
+import withLocale from '../withLocale';
+import { useIntl } from '@kne/react-intl';
+import merge from 'lodash/merge';
+
+/** SuperSelect array-output-value 回显需 [{ id, name }]，不能只传 id 字符串 */
+const mapRelationUsersToSelectValue = items => {
+  if (!Array.isArray(items)) {
+    return [];
+  }
+  return items
+    .map(item => {
+      const id = item.tenantUserId ?? item.tenantUser?.id;
+      if (id == null || id === '') {
+        return null;
+      }
+      const name = item.tenantUser?.name;
+      return name != null && String(name).trim() !== '' ? { id, name: String(name) } : { id };
+    })
+    .filter(Boolean);
+};
+
+const mapRowToForm = data => {
+  const row = data && typeof data.toJSON === 'function' ? data.toJSON() : data;
+  return merge({}, row, {
+    dataSourceTenantUserIds: mapRelationUsersToSelectValue(row.dataSources),
+    memberTenantUserIds: mapRelationUsersToSelectValue(row.members),
+    sharedModules: Array.isArray(row.sharedModules) ? row.sharedModules : []
+  });
+};
+
+const SharedGroup = ({ apis, ...props }) => {
+  const { formatMessage } = useIntl();
+  const columns = getColumns({ formatMessage });
+  return (
+    <BizUnit
+      {...props}
+      apis={apis}
+      getColumns={() => columns}
+      getFormInner={formProps => {
+        return <FormInner {...formProps} />;
+      }}
+      getActionList={() => ['remove', 'setStatusOpen', 'setStatusClose', 'save'].map(name => ({ name }))}
+      name="shared-group-list"
+      options={{
+        bizName: formatMessage({ id: 'SharedGroup' }),
+        saveData: data => mapRowToForm(data),
+        formProps: ({ action, formData, ...rest }) => {
+          const base =
+            action === 'create'
+              ? { sharedModules: [], dataSourceTenantUserIds: [], memberTenantUserIds: [] }
+              : {};
+          return merge({}, rest, {
+            data: merge({}, base, formData)
+          });
+        }
+      }}
+    />
+  );
+};
+
+export default withLocale(SharedGroup);
diff --git a/src/components/Tenant/SharedGroup/normalizeDataScopeList.js b/src/components/Tenant/SharedGroup/normalizeDataScopeList.js
new file mode 100644
index 0000000..1900131
--- /dev/null
+++ b/src/components/Tenant/SharedGroup/normalizeDataScopeList.js
@@ -0,0 +1,22 @@
+const DEFAULT_DATA_SCOPE_LIST = ['read', 'write'];
+
+/**
+ * dataScope.list 未配置或为空时默认为 ['read', 'write']。
+ *
+ * @param {unknown} list
+ * @returns {('read' | 'write')[]}
+ */
+export function normalizeDataScopeList(list) {
+  if (!Array.isArray(list) || !list.length) {
+    return [...DEFAULT_DATA_SCOPE_LIST];
+  }
+  const out = [];
+  const seen = new Set();
+  for (const item of list) {
+    if ((item === 'read' || item === 'write') && !seen.has(item)) {
+      seen.add(item);
+      out.push(item);
+    }
+  }
+  return out.length ? out : [...DEFAULT_DATA_SCOPE_LIST];
+}
diff --git a/src/components/Tenant/TenantUserSelect/OrgTenantUserField.js b/src/components/Tenant/TenantUserSelect/OrgTenantUserField.js
new file mode 100644
index 0000000..6df52da
--- /dev/null
+++ b/src/components/Tenant/TenantUserSelect/OrgTenantUserField.js
@@ -0,0 +1,117 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import Fetch from '@kne/react-fetch';
+import { Empty, Tree } from 'antd';
+import merge from 'lodash/merge';
+import omit from 'lodash/omit';
+import { useMemo, useState } from 'react';
+import { useIntl } from '@kne/react-intl';
+import buildOrgTreeData from './buildOrgTreeData';
+import { normalizeTenantUserStatus } from '../UserList/normalizeTenantUserStatus';
+import style from './style.module.scss';
+
+const normalizeOrgList = data => {
+  if (Array.isArray(data)) {
+    return data;
+  }
+  if (data?.pageData) {
+    return data.pageData;
+  }
+  return [];
+};
+
+const OrgTenantUserField = createWithRemoteLoader({
+  modules: ['components-core:FormInfo']
+})(({ remoteModules, orgApi, userApi, userStatus, companyName, showOrgRoot = true, single = true, ...props }) => {
+  const [FormInfo] = remoteModules;
+  const { useDecorator, fields } = FormInfo;
+  const { SuperSelect } = fields;
+  const { formatMessage } = useIntl();
+  const fieldProps = omit(props, ['remoteModules', 'orgApi', 'userApi', 'userStatus', 'companyName', 'showOrgRoot', 'single']);
+  const render = useDecorator(fieldProps);
+  const [orgId, setOrgId] = useState(null);
+
+  const InnerControl = ({ value, onChange, disabled }) => {
+    const userSelectApi = useMemo(() => {
+      const statusFilter = normalizeTenantUserStatus(userStatus);
+      return merge({}, userApi, {
+        params: merge({}, userApi?.params || {}, {
+          perPage: 100,
+          currentPage: 1,
+          filter: merge(
+            {},
+            userApi?.params?.filter || {},
+            statusFilter ? { status: statusFilter } : {},
+            orgId ? { tenantOrgId: orgId } : {}
+          )
+        }),
+        ready: !!orgId
+      });
+    }, [orgId, userApi, userStatus]);
+
+    return (
+      <div className={style.container}>
+        <div className={style['org-panel']}>
+          <div className={style['org-title']}>{formatMessage({ id: 'TenantUserSelectOrgTitle' })}
+          </div>
+          <Fetch
+            {...orgApi}
+            render={({ data }) => {
+              const list = normalizeOrgList(data);
+              const treeData = buildOrgTreeData(
+                list,
+                showOrgRoot ? { rootId: 'root', rootName: companyName || formatMessage({ id: 'UnnamedCompany' }) } : {}
+              );
+              if (!treeData.length) {
+                return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={formatMessage({ id: 'TenantUserSelectEmptyOrg' })} />;
+              }
+              return (
+                <Tree
+                  className={style['org-tree']}
+                  blockNode
+                  defaultExpandAll
+                  selectedKeys={orgId ? [orgId] : []}
+                  fieldNames={{ title: 'name', key: 'id', children: 'children' }}
+                  treeData={treeData}
+                  onSelect={keys => {
+                    const next = keys[0] != null ? String(keys[0]) : null;
+                    if (!next || next === 'root') {
+                      return;
+                    }
+                    setOrgId(next);
+                    onChange(single ? null : []);
+                  }}
+                />
+              );
+            }}
+          />
+        </div>
+        <div className={style['user-panel']}>
+          <div className={style['user-title']}>{formatMessage({ id: 'TenantUserSelectUserTitle' })}</div>
+          <SuperSelect
+            key={orgId || 'no-org'}
+            className={style['user-select']}
+            labelHidden
+            block
+            disabled={disabled || !orgId}
+            single={single}
+            value={value}
+            onChange={onChange}
+            placeholder={
+              orgId
+                ? fieldProps.placeholder || formatMessage({ id: 'TenantUserSelectPlaceholder' })
+                : formatMessage({ id: 'TenantUserSelectSelectOrgFirst' })
+            }
+            api={userSelectApi}
+            interceptor={single ? 'object-output-value' : 'array-output-value'}
+            valueKey="id"
+            labelKey="name"
+          />
+        </div>
+      </div>
+    );
+  };
+
+  return render(InnerControl);
+});
+
+export default OrgTenantUserField;
diff --git a/src/components/Tenant/TenantUserSelect/buildOrgTreeData.js b/src/components/Tenant/TenantUserSelect/buildOrgTreeData.js
new file mode 100644
index 0000000..76b427a
--- /dev/null
+++ b/src/components/Tenant/TenantUserSelect/buildOrgTreeData.js
@@ -0,0 +1,47 @@
+/**
+ * 将扁平组织列表转为 antd Tree 所需的树形结构。
+ * @param {Array} list
+ * @param {{ rootId?: string, rootName?: string }} options
+ */
+const buildOrgTreeData = (list, { rootId, rootName } = {}) => {
+  if (!Array.isArray(list) || !list.length) {
+    return [];
+  }
+
+  const parseChildren = parentId => {
+    return list
+      .filter(item => {
+        if (parentId == null) {
+          return item.parentId == null || item.parentId === '';
+        }
+        return String(item.parentId) === String(parentId);
+      })
+      .map(item =>
+        Object.assign({}, item, {
+          children: parseChildren(item.id)
+        })
+      )
+      .map(item => {
+        if (!item.children?.length) {
+          const { children, ...rest } = item;
+          return rest;
+        }
+        return item;
+      });
+  };
+
+  if (rootId != null) {
+    return [
+      {
+        id: rootId,
+        name: rootName || '',
+        selectable: false,
+        children: parseChildren(null)
+      }
+    ];
+  }
+
+  return parseChildren(null);
+};
+
+export default buildOrgTreeData;
diff --git a/src/components/Tenant/TenantUserSelect/index.js b/src/components/Tenant/TenantUserSelect/index.js
new file mode 100644
index 0000000..fdaba85
--- /dev/null
+++ b/src/components/Tenant/TenantUserSelect/index.js
@@ -0,0 +1,33 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import merge from 'lodash/merge';
+import OrgTenantUserField from './OrgTenantUserField';
+import withLocale from '../withLocale';
+
+const createComponent = (callback = item => item) => {
+  return createWithRemoteLoader({
+    modules: ['components-core:Global@usePreset']
+  })(
+    withLocale(({ remoteModules, orgApi, userApi, userStatus, companyName, showOrgRoot, single, ...props }) => {
+      const [usePreset] = remoteModules;
+      const { apis } = usePreset();
+      const Component = callback(OrgTenantUserField);
+      return (
+        <Component
+          {...props}
+          single={single}
+          showOrgRoot={showOrgRoot}
+          companyName={companyName}
+          userStatus={userStatus}
+          orgApi={merge({}, apis.tenant?.orgList, orgApi)}
+          userApi={merge({}, apis.tenant?.userList, userApi)}
+        />
+      );
+    })
+  );
+};
+
+const TenantUserSelect = createComponent();
+
+TenantUserSelect.Field = createComponent(item => item.Field);
+
+export default TenantUserSelect;
diff --git a/src/components/Tenant/TenantUserSelect/style.module.scss b/src/components/Tenant/TenantUserSelect/style.module.scss
new file mode 100644
index 0000000..8dfa6f0
--- /dev/null
+++ b/src/components/Tenant/TenantUserSelect/style.module.scss
@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  gap: 12px;
+  min-height: 280px;
+  width: 100%;
+}
+
+.org-panel {
+  flex: 0 0 220px;
+  max-width: 40%;
+  padding: 8px;
+  border: 1px solid var(--font-color-grey-3, #f0f0f0);
+  border-radius: 8px;
+  background: #fafafa;
+  overflow: auto;
+}
+
+.org-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.user-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-title {
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+}
+
+.user-select {
+  flex: 1;
+  min-height: 0;
+}
+
+.org-tree {
+  :global {
+    .ant-tree-node-content-wrapper {
+      border-radius: 4px;
+    }
+  }
+}
diff --git a/src/components/Tenant/UserList/Actions/Create.js b/src/components/Tenant/UserList/Actions/Create.js
index ab87ba8..f055edc 100644
--- a/src/components/Tenant/UserList/Actions/Create.js
+++ b/src/components/Tenant/UserList/Actions/Create.js
@@ -4,6 +4,7 @@ import merge from 'lodash/merge';
 import FormInner from '../FormInner';
 import withLocale from '../../withLocale';
 import { useIntl } from '@kne/react-intl';
+import { pickTenantOrgIdsFromForm } from '../pickTenantOrgIdsFromForm';
 
 const Create = createWithRemoteLoader({
   modules: ['components-core:FormInfo@useFormModal', 'components-core:Global@usePreset']
@@ -22,9 +23,17 @@ const Create = createWithRemoteLoader({
           size: 'small',
           formProps: {
             onSubmit: async formData => {
+              const tenantOrgIds = pickTenantOrgIdsFromForm(formData.tenantOrgIds);
+              const position = formData.options?.position;
               const { data: resData } = await ajax(
                 merge({}, apis.create, {
-                  data: formData
+                  data: Object.assign({}, formData, {
+                    tenantOrgIds,
+                    tenantOrgId: tenantOrgIds[0] || null,
+                    options: Object.assign({}, formData.options, {
+                      position: position && typeof position === 'object' ? position.id : position
+                    })
+                  })
                 })
               );
               if (resData.code !== 0) {
diff --git a/src/components/Tenant/UserList/Actions/Edit.js b/src/components/Tenant/UserList/Actions/Edit.js
index 9d12f23..0fb9e24 100644
--- a/src/components/Tenant/UserList/Actions/Edit.js
+++ b/src/components/Tenant/UserList/Actions/Edit.js
@@ -4,6 +4,20 @@ import FormInner from '../FormInner';
 import merge from 'lodash/merge';
 import withLocale from '../../withLocale';
 import { useIntl } from '@kne/react-intl';
+import { mapUserOrgIdsToFormValue, pickTenantOrgIdsFromForm } from '../pickTenantOrgIdsFromForm';
+import { extractPositionPageData, mapUserOptionsToFormValue } from '../mapUserOptionsToFormValue';
+
+const loadPositionList = async (ajax, positionListApi) => {
+  if (!positionListApi?.url) {
+    return [];
+  }
+  try {
+    const response = await ajax(merge({}, positionListApi));
+    return extractPositionPageData(response);
+  } catch {
+    return [];
+  }
+};
 
 const Edit = createWithRemoteLoader({
   modules: ['components-core:FormInfo@useFormModal', 'components-core:Global@usePreset']
@@ -17,23 +31,29 @@ const Edit = createWithRemoteLoader({
   return (
     <Button
       {...props}
-      onClick={() => {
+      onClick={async () => {
+        const positionList = await loadPositionList(ajax, apis.positionList);
         formModal({
           title: formatMessage({ id: 'EditUser' }),
           size: 'small',
           formProps: {
             data: Object.assign({}, data, {
-              tenantOrgId: data.tenantOrg
-                ? {
-                    id: data.tenantOrg.id,
-                    name: data.tenantOrg.name
-                  }
-                : null
+              tenantOrgIds: mapUserOrgIdsToFormValue(data),
+              options: mapUserOptionsToFormValue(data.options, { positionList })
             }),
             onSubmit: async formData => {
+              const tenantOrgIds = pickTenantOrgIdsFromForm(formData.tenantOrgIds);
+              const position = formData.options?.position;
               const { data: resData } = await ajax(
                 merge({}, apis.save, {
-                  data: Object.assign({}, formData, { id: data.id })
+                  data: Object.assign({}, formData, {
+                    id: data.id,
+                    tenantOrgIds,
+                    tenantOrgId: tenantOrgIds[0] || null,
+                    options: Object.assign({}, formData.options, {
+                      position: position && typeof position === 'object' ? position.id : position
+                    })
+                  })
                 })
               );
 
diff --git a/src/components/Tenant/UserList/Actions/Invite.js b/src/components/Tenant/UserList/Actions/Invite.js
index 3aa646e..d6ae52a 100644
--- a/src/components/Tenant/UserList/Actions/Invite.js
+++ b/src/components/Tenant/UserList/Actions/Invite.js
@@ -1,17 +1,29 @@
+import '@kne/react-box/dist/index.css';
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import merge from 'lodash/merge';
-import { Flex, App } from 'antd';
+import { App, Button, Flex, Input, Space, Typography } from 'antd';
+import { CopyOutlined, MailOutlined } from '@ant-design/icons';
 import withLocale from '../../withLocale';
 import { useIntl } from '@kne/react-intl';
+import TenantUserPersonalCard from '../TenantUserPersonalCard';
+import style from './inviteModal.module.scss';
+
+const buildInviteUrl = token => `${window.location.origin}/join-tenant?token=${token}`;
 
 const InviteInner = createWithRemoteLoader({
-  modules: ['components-core:LoadingButton', 'components-core:Modal@useModal', 'components-core:Global@usePreset', 'components-core:InfoPage@CentralContent']
-})(({ remoteModules, data, apis, onSuccess, ...props }) => {
-  const [LoadingButton, useModal, usePreset, CentralContent] = remoteModules;
+  modules: ['components-core:LoadingButton', 'components-core:Modal@useModal', 'components-core:Global@usePreset']
+})(({ remoteModules, data, apis, onSuccess, positionList, ...props }) => {
+  const [LoadingButton, useModal, usePreset] = remoteModules;
   const { ajax } = usePreset();
   const modal = useModal();
   const { formatMessage } = useIntl();
   const { message } = App.useApp();
+
+  const copyInviteLink = async url => {
+    await navigator.clipboard.writeText(url);
+    message.success(formatMessage({ id: 'CopySuccess' }));
+  };
+
   return (
     <LoadingButton
       {...props}
@@ -24,61 +36,58 @@ const InviteInner = createWithRemoteLoader({
         if (resData.code !== 0) {
           return;
         }
+        const token = resData.data?.token;
+        if (!token) {
+          return;
+        }
+        const inviteUrl = buildInviteUrl(token);
         modal({
           title: formatMessage({ id: 'InviteUser' }),
+          size: 'small',
+          width: 560,
           footer: null,
           children: (
-            <Flex vertical gap={40}>
-              <Flex flex={1}>
-                <CentralContent
-                  dataSource={Object.assign({}, data, {
-                    token: resData.data.token
-                  })}
-                  columns={[
-                    {
-                      name: 'id',
-                      title: 'ID'
-                    },
-                    {
-                      name: 'name',
-                      title: formatMessage({ id: 'Name' })
-                    },
-                    {
-                      name: 'token',
-                      title: formatMessage({ id: 'InviteLink' }),
-                      block: true,
-                      render: value => {
-                        return `${window.location.origin}/join-tenant?token=${value}`;
+            <Flex vertical gap={20} className={style.inviteModal}>
+              <Typography.Paragraph type="secondary" className={style.hint}>
+                {formatMessage({ id: 'InviteUserHint' })}
+              </Typography.Paragraph>
+
+              <TenantUserPersonalCard data={data} positionList={positionList} />
+
+              <div className={style.section}>
+                <div className={style.fieldLabel}>{formatMessage({ id: 'InviteLink' })}</div>
+                <Space.Compact className={style.linkRow}>
+                  <Input readOnly value={inviteUrl} />
+                  <Button
+                    icon={<CopyOutlined />}
+                    onClick={() => {
+                      copyInviteLink(inviteUrl);
+                    }}>
+                    {formatMessage({ id: 'CopyInviteLink' })}
+                  </Button>
+                </Space.Compact>
+              </div>
+
+              <Flex gap={8} justify="flex-end" wrap="wrap" className={style.actions}>
+                {apis.userInviteMessage ? (
+                  <LoadingButton
+                    type="primary"
+                    icon={<MailOutlined />}
+                    onClick={async () => {
+                      const { data: sendRes } = await ajax(
+                        merge({}, apis.userInviteMessage, {
+                          data: { id: data.id }
+                        })
+                      );
+                      if (sendRes.code !== 0) {
+                        return;
                       }
-                    }
-                  ]}
-                />
-              </Flex>
-              <Flex gap={8} justify="center">
-                <LoadingButton
-                  type="primary"
-                  onClick={async () => {
-                    const { data: resData } = await ajax(
-                      merge({}, apis.userInviteMessage, {
-                        data: { id: data.id }
-                      })
-                    );
-                    if (resData.code !== 0) {
-                      return;
-                    }
-                    message.success(formatMessage({ id: 'SendSuccess' }));
-                  }}
-                >
-                  {formatMessage({ id: 'SendInviteEmail' })}
-                </LoadingButton>
-                <LoadingButton
-                  onClick={async () => {
-                    await navigator.clipboard.writeText(`${window.location.origin}/join-tenant?token=${resData.data.token}`);
-                    message.success(formatMessage({ id: 'CopySuccess' }));
-                  }}
-                >
-                  {formatMessage({ id: 'CopyInviteLink' })}
-                </LoadingButton>
+                      message.success(formatMessage({ id: 'SendSuccess' }));
+                      onSuccess && onSuccess();
+                    }}>
+                    {formatMessage({ id: 'SendInviteEmail' })}
+                  </LoadingButton>
+                ) : null}
               </Flex>
             </Flex>
           )
diff --git a/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.js b/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.js
new file mode 100644
index 0000000..f0d670b
--- /dev/null
+++ b/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.js
@@ -0,0 +1,134 @@
+import get from 'lodash/get';
+import { Typography } from 'antd';
+import getUserOrgDisplayItems from '../getUserOrgDisplayItems';
+import normalizeTenantUserForPersonalCard from '../normalizeTenantUserForPersonalCard';
+import { resolvePositionDisplayName } from '../buildUserListWithPositionList';
+import style from './personalCard.module.scss';
+
+/** 副标题单行省略，悬停展示完整内容 */
+export const renderPersonalCardEllipsisTitle = text => {
+  if (!text) {
+    return undefined;
+  }
+  return (
+    <Typography.Text ellipsis={{ tooltip: text }} className={style.personalCardTitle}>
+      {text}
+    </Typography.Text>
+  );
+};
+
+const buildRolesTitle = data => {
+  const roles = Array.isArray(data?.roles) && data.roles.length ? data.roles : data?.roleDetails;
+  if (!Array.isArray(roles) || !roles.length) {
+    return '';
+  }
+  return roles
+    .map(item => (typeof item === 'string' ? item : item?.name))
+    .filter(Boolean)
+    .join('、');
+};
+
+const buildOrgMoreInfo = data =>
+  getUserOrgDisplayItems(data).map(org => {
+    const path = org.fullPath || org.label;
+    const showPath = path && org.label && path !== org.label;
+    return {
+      key: `org-${org.id}`,
+      label: org.label,
+      content: showPath ? path : org.label
+    };
+  });
+
+const insertAfterKey = (items, key, entry) => {
+  const index = items.findIndex(item => item.key === key);
+  const next = items.slice();
+  next.splice(index >= 0 ? index + 1 : 0, 0, entry);
+  return next;
+};
+
+const appendPositionMoreInfo = (moreInfo, data, { formatMessage, positionList }) => {
+  if (moreInfo.some(item => item.key === 'position')) {
+    return moreInfo;
+  }
+  const positionName = resolvePositionDisplayName(data, positionList);
+  if (!positionName) {
+    return moreInfo;
+  }
+  return insertAfterKey(moreInfo, 'roles', {
+    key: 'position',
+    label: formatMessage?.({ id: 'Position' }) || '岗位',
+    content: renderPersonalCardEllipsisTitle(positionName)
+  });
+};
+
+const buildRolesAndOrgMoreInfo = (data, { formatMessage }) => {
+  const roles = buildRolesTitle(data);
+  const roleContent =
+    roles || formatMessage?.({ id: 'DefaultRole' }) || '默认角色';
+
+  const items = [
+    {
+      key: 'roles',
+      label: formatMessage?.({ id: 'UserRole' }) || '角色',
+      content: renderPersonalCardEllipsisTitle(roleContent)
+    }
+  ];
+
+  const orgMoreInfo = buildOrgMoreInfo(data);
+  if (orgMoreInfo.length > 1) {
+    return items.concat(orgMoreInfo);
+  }
+  if (orgMoreInfo.length === 1) {
+    const org = getUserOrgDisplayItems(data)[0];
+    const path = org?.fullPath || org?.label;
+    if (path && org?.label && path !== org.label) {
+      return items.concat([
+        {
+          key: 'org-primary',
+          label: formatMessage?.({ id: 'Department' }) || '部门',
+          content: renderPersonalCardEllipsisTitle(path)
+        }
+      ]);
+    }
+    return items.concat(orgMoreInfo);
+  }
+  return items;
+};
+
+const applyPersonalCardPlugins = (moreInfo, data, context) => {
+  let next = moreInfo;
+  const enhancer = get(context.plugins, 'tenantAdmin.personalCard');
+  if (typeof enhancer === 'function') {
+    next = enhancer({ moreInfo: next, data, ...context }) ?? next;
+  }
+  return appendPositionMoreInfo(next, data, context);
+};
+
+/** 将用户列表行 / 邀请数据映射为 PersonalCard 属性 */
+const buildInvitePersonalCardProps = (data, context = {}) => {
+  const { Image, formatMessage, positionList, plugins } = context;
+  const normalized = normalizeTenantUserForPersonalCard(data);
+
+  let moreInfo = buildRolesAndOrgMoreInfo(normalized, { formatMessage });
+  moreInfo = applyPersonalCardPlugins(moreInfo, normalized, {
+    formatMessage,
+    positionList,
+    plugins
+  });
+
+  const positionName = resolvePositionDisplayName(normalized, positionList);
+  const titleText = positionName || undefined;
+
+  return {
+    mode: 'horizontal',
+    name: normalized?.name,
+    title: renderPersonalCardEllipsisTitle(titleText),
+    email: normalized?.email,
+    phone: normalized?.phone,
+    description: normalized?.description,
+    moreInfo,
+    avatar: ({ className }) => <Image.Avatar className={className} id={normalized?.avatar} size={56} gender="M" />
+  };
+};
+
+export default buildInvitePersonalCardProps;
diff --git a/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.test.js b/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.test.js
new file mode 100644
index 0000000..c399390
--- /dev/null
+++ b/src/components/Tenant/UserList/Actions/buildInvitePersonalCardProps.test.js
@@ -0,0 +1,104 @@
+jest.mock('antd', () => ({
+  Typography: {
+    Text: ({ children }) => children
+  }
+}));
+
+import buildInvitePersonalCardProps from './buildInvitePersonalCardProps';
+
+const formatMessage = ({ id }) => id;
+const Image = { Avatar: () => null };
+
+const sampleUser = {
+  name: '张三',
+  email: 'zhang@example.com',
+  phone: '13800000000',
+  roles: [{ name: '管理员' }, { name: 'HR' }],
+  options: { position: '产品经理' },
+  tenantOrg: { name: '研发部', path: '公司/研发部' }
+};
+
+describe('buildInvitePersonalCardProps without plugin', () => {
+  it('builds role and position moreInfo when plugins is undefined', () => {
+    const props = buildInvitePersonalCardProps(sampleUser, {
+      Image,
+      formatMessage,
+      positionList: []
+    });
+
+    expect(props.name).toBe('张三');
+    expect(props.email).toBe('zhang@example.com');
+    const keys = props.moreInfo.map(item => item.key);
+    expect(keys).toContain('roles');
+    expect(keys).toContain('position');
+  });
+
+  it('builds role and position when plugins is empty object', () => {
+    const props = buildInvitePersonalCardProps(sampleUser, {
+      Image,
+      formatMessage,
+      plugins: {},
+      positionList: []
+    });
+
+    const keys = props.moreInfo.map(item => item.key);
+    expect(keys).toContain('roles');
+    expect(keys).toContain('position');
+  });
+
+  it('ignores non-function tenantAdmin.personalCard', () => {
+    const props = buildInvitePersonalCardProps(sampleUser, {
+      Image,
+      formatMessage,
+      plugins: { tenantAdmin: { personalCard: 'not-a-function' } },
+      positionList: []
+    });
+
+    expect(props.moreInfo.some(item => item.key === 'position')).toBe(true);
+  });
+
+  it('still appends position after plugin enhancer when plugin omits position', () => {
+    const props = buildInvitePersonalCardProps(sampleUser, {
+      Image,
+      formatMessage,
+      plugins: {
+        tenantAdmin: {
+          personalCard: ({ moreInfo }) => moreInfo.filter(item => item.key !== 'position')
+        }
+      },
+      positionList: []
+    });
+
+    expect(props.moreInfo.some(item => item.key === 'position')).toBe(true);
+  });
+
+  it('resolves position name from positionList by id', () => {
+    const props = buildInvitePersonalCardProps(
+      {
+        ...sampleUser,
+        options: { position: 'pos-1' }
+      },
+      {
+        Image,
+        formatMessage,
+        positionList: [{ id: 'pos-1', name: '高级产品经理' }]
+      }
+    );
+
+    const positionItem = props.moreInfo.find(item => item.key === 'position');
+    expect(positionItem).toBeDefined();
+  });
+
+  it('maps roleDetails to roles via normalize', () => {
+    const props = buildInvitePersonalCardProps(
+      {
+        name: '李四',
+        roleDetails: [{ name: '财务' }]
+      },
+      { Image, formatMessage }
+    );
+
+    const rolesItem = props.moreInfo.find(item => item.key === 'roles');
+    expect(rolesItem).toBeDefined();
+  });
+});
diff --git a/src/components/Tenant/UserList/Actions/inviteModal.module.scss b/src/components/Tenant/UserList/Actions/inviteModal.module.scss
new file mode 100644
index 0000000..6ee5889
--- /dev/null
+++ b/src/components/Tenant/UserList/Actions/inviteModal.module.scss
@@ -0,0 +1,30 @@
+.invite-modal {
+  width: 100%;
+}
+
+.hint {
+  margin-bottom: 0 !important;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+}
+
+.link-row {
+  width: 100%;
+}
+
+.actions {
+  padding-top: 4px;
+}
diff --git a/src/components/Tenant/UserList/Actions/personalCard.module.scss b/src/components/Tenant/UserList/Actions/personalCard.module.scss
new file mode 100644
index 0000000..1bfb70d
--- /dev/null
+++ b/src/components/Tenant/UserList/Actions/personalCard.module.scss
@@ -0,0 +1,8 @@
+.personal-card-title {
+  display: block !important;
+  max-width: 100%;
+  margin-bottom: 0 !important;
+  color: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+}
diff --git a/src/components/Tenant/UserList/Actions/personalCardWrap.module.scss b/src/components/Tenant/UserList/Actions/personalCardWrap.module.scss
new file mode 100644
index 0000000..0f66197
--- /dev/null
+++ b/src/components/Tenant/UserList/Actions/personalCardWrap.module.scss
@@ -0,0 +1,9 @@
+.user-card-wrap {
+  width: 100%;
+  min-width: 0;
+
+  :global(.kne-react-box) {
+    width: 100%;
+    min-width: 0;
+  }
+}
diff --git a/src/components/Tenant/UserList/DepartmentTreeFilterItem.js b/src/components/Tenant/UserList/DepartmentTreeFilterItem.js
new file mode 100644
index 0000000..9b67c93
--- /dev/null
+++ b/src/components/Tenant/UserList/DepartmentTreeFilterItem.js
@@ -0,0 +1,48 @@
+import { createWithRemoteLoader } from '@kne/remote-loader';
+
+const orgFilterInterceptor = {
+  input: value => {
+    if (!value) {
+      return value;
+    }
+    if (value.id != null) {
+      return value;
+    }
+    if (value.value != null) {
+      return { id: value.value, name: value.label };
+    }
+    return value;
+  },
+  output: selected => {
+    if (!selected) {
+      return selected;
+    }
+    const item = Array.isArray(selected) ? selected[0] : selected;
+    if (!item) {
+      return null;
+    }
+    return {
+      label: item.name ?? item.label,
+      value: item.id ?? item.value
+    };
+  }
+};
+
+const DepartmentTreeFilterItem = createWithRemoteLoader({
+  modules: ['components-core:Filter@withFieldItem', 'components-core:Common@SuperSelectTreeField']
+})(({ remoteModules, ...props }) => {
+  const [withFieldItem, SuperSelectTreeField] = remoteModules;
+  const Item = withFieldItem(SuperSelectTreeField);
+  return (
+    <Item
+      {...props}
+      single
+      valueKey="id"
+      labelKey="name"
+      parentKey="parentId"
+      interceptor={orgFilterInterceptor}
+    />
+  );
+});
+
+export default DepartmentTreeFilterItem;
diff --git a/src/components/Tenant/UserList/FormInner.js b/src/components/Tenant/UserList/FormInner.js
index 98798d9..83fb480 100644
--- a/src/components/Tenant/UserList/FormInner.js
+++ b/src/components/Tenant/UserList/FormInner.js
@@ -21,13 +21,12 @@ const FormInnerInner = createWithRemoteLoader({
       </Flex>,
       <Input name="name" label={formatMessage({ id: 'UserName' })} rule="REQ LEN-0-100" />,
       <SuperSelectTree
-        name="tenantOrgId"
-        label={formatMessage({ id: 'Department' })}
+        name="tenantOrgIds"
+        label={formatMessage({ id: 'Departments' })}
         api={apis.orgList}
         valueKey="id"
         labelKey="name"
-        single
-        interceptor="object-output-value"
+        interceptor="array-output-value"
       />,
       <SuperSelect
         name="roles"
diff --git a/src/components/Tenant/UserList/OrgTooltipContent.js b/src/components/Tenant/UserList/OrgTooltipContent.js
new file mode 100644
index 0000000..4af1750
--- /dev/null
+++ b/src/components/Tenant/UserList/OrgTooltipContent.js
@@ -0,0 +1,42 @@
+import style from './UserOrgTags.module.scss';
+
+export const tooltipOverlayProps = {
+  overlayClassName: style.tooltipOverlay,
+  mouseEnterDelay: 0.2
+};
+
+/** 单部门：名称 + 完整路径（有差异时分行展示） */
+export const OrgPathTooltip = ({ org }) => {
+  const path = org.fullPath || org.label;
+  if (!path) {
+    return null;
+  }
+  if (!org.label || path === org.label) {
+    return <div className={style.tooltipSingle}>{path}</div>;
+  }
+  return (
+    <div className={style.tooltipSingle}>
+      <div className={style.tooltipPrimary}>{org.label}</div>
+      <div className={style.tooltipSecondary}>{path}</div>
+    </div>
+  );
+};
+
+/** 多部门列表（+N 悬停） */
+export const OrgListTooltip = ({ orgs, title }) => (
+  <div className={style.tooltipPanel}>
+    <div className={style.tooltipHeader}>{title}</div>
+    <ul className={style.tooltipList}>
+      {orgs.map(org => {
+        const path = org.fullPath || org.label;
+        const showPath = path && org.label && path !== org.label;
+        return (
+          <li key={org.id} className={style.tooltipListItem}>
+            <span className={style.tooltipItemLabel}>{org.label || path}</span>
+            {showPath ? <span className={style.tooltipItemPath}>{path}</span> : null}
+          </li>
+        );
+      })}
+    </ul>
+  </div>
+);
diff --git a/src/components/Tenant/UserList/TenantUserPersonalCard.js b/src/components/Tenant/UserList/TenantUserPersonalCard.js
new file mode 100644
index 0000000..b72b9bd
--- /dev/null
+++ b/src/components/Tenant/UserList/TenantUserPersonalCard.js
@@ -0,0 +1,36 @@
+import '@kne/react-box/dist/index.css';
+import classnames from 'classnames';
+import { createWithRemoteLoader } from '@kne/remote-loader';
+import { PersonalCard } from '@kne/react-box';
+import { useIntl } from '@kne/react-intl';
+import buildInvitePersonalCardProps from './Actions/buildInvitePersonalCardProps';
+import withLocale from '../withLocale';
+import style from './Actions/personalCardWrap.module.scss';
+
+/** 租户用户 PersonalCard（邀请弹窗、加入确认等场景共用） */
+const TenantUserPersonalCard = createWithRemoteLoader({
+  modules: ['components-core:Image', 'components-core:Global@usePreset']
+})(({ remoteModules, data, positionList, className }) => {
+  const [Image, usePreset] = remoteModules;
+  const { plugins } = usePreset();
+  const { formatMessage } = useIntl();
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div className={classnames(style.userCardWrap, className)}>
+      <PersonalCard
+        {...buildInvitePersonalCardProps(data, {
+          Image,
+          formatMessage,
+          plugins,
+          positionList
+        })}
+      />
+    </div>
+  );
+});
+
+export default withLocale(TenantUserPersonalCard);
diff --git a/src/components/Tenant/UserList/UserCard/index.js b/src/components/Tenant/UserList/UserCard/index.js
index fb890d1..15c994d 100644
--- a/src/components/Tenant/UserList/UserCard/index.js
+++ b/src/components/Tenant/UserList/UserCard/index.js
@@ -1,5 +1,7 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
-import { Card, Typography } from 'antd';
+import { Card, Typography, Flex } from 'antd';
+import UserOrgTags from '../UserOrgTags';
+import getUserOrgDisplayItems from '../getUserOrgDisplayItems';
 import style from './style.module.scss';
 
 const { Title, Paragraph } = Typography;
@@ -15,10 +17,10 @@ const UserCard = createWithRemoteLoader({
         <Image.Avatar size={100} id={data.avatar} />
       </div>
       <Title level={4}>{data.name}</Title>
-      {data.tenantOrg && (
-        <Title level={5} type="secondary">
-          {data.tenantOrg.name}
-        </Title>
+      {getUserOrgDisplayItems(data).length > 0 && (
+        <Flex justify="center" className={style.orgs}>
+          <UserOrgTags item={data} maxVisible={4} />
+        </Flex>
       )}
       <SplitLine
         dataSource={data}
diff --git a/src/components/Tenant/UserList/UserCard/style.module.scss b/src/components/Tenant/UserList/UserCard/style.module.scss
index 9b29fc5..67485ac 100644
--- a/src/components/Tenant/UserList/UserCard/style.module.scss
+++ b/src/components/Tenant/UserList/UserCard/style.module.scss
@@ -3,6 +3,11 @@
   background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjZmFmYWZhIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNlZWVlZWUiPjwvcGF0aD4KPC9zdmc+');
 }
 
+.orgs {
+  margin: 8px 0 16px;
+  max-width: 100%;
+}
+
 .avatar {
   margin-bottom: 24px;
 
diff --git a/src/components/Tenant/UserList/UserOrgTags.js b/src/components/Tenant/UserList/UserOrgTags.js
new file mode 100644
index 0000000..c290e69
--- /dev/null
+++ b/src/components/Tenant/UserList/UserOrgTags.js
@@ -0,0 +1,62 @@
+import { Flex, Tag, Tooltip } from 'antd';
+import classnames from 'classnames';
+import { useIntl } from '@kne/react-intl';
+import getUserOrgDisplayItems from './getUserOrgDisplayItems';
+import { OrgListTooltip, OrgPathTooltip, tooltipOverlayProps } from './OrgTooltipContent';
+import withLocale from '../withLocale';
+import style from './UserOrgTags.module.scss';
+
+const MAX_VISIBLE = 2;
+
+const UserOrgTags = ({ item, maxVisible = MAX_VISIBLE }) => {
+  const { formatMessage } = useIntl();
+  const orgs = getUserOrgDisplayItems(item);
+  if (!orgs.length) {
+    return null;
+  }
+
+  const visible = orgs.slice(0, maxVisible);
+  const rest = orgs.slice(maxVisible);
+  const listTooltipTitle = formatMessage({ id: 'OrgTooltipListTitle' }, { count: orgs.length });
+
+  const renderTag = org => {
+    const path = org.fullPath || org.label;
+    const showTooltip = path && org.label && path !== org.label;
+    const tag = (
+      <Tag bordered={false} className={style.tag}>
+        {org.label}
+      </Tag>
+    );
+
+    if (!showTooltip) {
+      return (
+        <span key={org.id} className={style.tagWrap}>
+          {tag}
+        </span>
+      );
+    }
+
+    return (
+      <Tooltip key={org.id} title={<OrgPathTooltip org={org} />} {...tooltipOverlayProps}>
+        <span className={style.tagWrap}>{tag}</span>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <Flex wrap gap={4} align="center" className={style.wrap}>
+      {visible.map(renderTag)}
+      {rest.length > 0 ? (
+        <Tooltip title={<OrgListTooltip orgs={orgs} title={listTooltipTitle} />} {...tooltipOverlayProps}>
+          <span className={style.tagWrap}>
+            <Tag bordered={false} className={classnames(style.tag, style.tagMore)}>
+              +{rest.length}
+            </Tag>
+          </span>
+        </Tooltip>
+      ) : null}
+    </Flex>
+  );
+};
+
+export default withLocale(UserOrgTags);
diff --git a/src/components/Tenant/UserList/UserOrgTags.module.scss b/src/components/Tenant/UserList/UserOrgTags.module.scss
new file mode 100644
index 0000000..31fe237
--- /dev/null
+++ b/src/components/Tenant/UserList/UserOrgTags.module.scss
@@ -0,0 +1,121 @@
+/* 与 OrgInfo import-preview-ref-tag / org-user-count 保持一致 */
+.tag {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border: none;
+  background: var(--primary-color-1, #f5f7ff);
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.tagWrap {
+  display: inline-flex;
+  max-width: 100%;
+}
+
+.tagMore {
+  cursor: pointer;
+  color: var(--primary-color);
+}
+
+.wrap {
+  max-width: 100%;
+  line-height: 1.5;
+}
+
+/* Tooltip：使用 inherit 适配 Ant Design 深浅色气泡 */
+.tooltipOverlay {
+  :global(.ant-tooltip-inner) {
+    min-width: 120px;
+    max-width: 360px;
+    padding: 10px 12px;
+    text-align: left;
+  }
+}
+
+.tooltipSingle {
+  color: inherit;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.tooltipPrimary {
+  color: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.tooltipSecondary {
+  margin-top: 4px;
+  color: inherit;
+  opacity: 0.75;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.tooltipPanel {
+  color: inherit;
+}
+
+.tooltipHeader {
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: inherit;
+  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+}
+
+.tooltipList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tooltipListItem {
+  position: relative;
+  padding-left: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 7px;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0.45;
+  }
+}
+
+.tooltipItemLabel {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: inherit;
+  word-break: break-word;
+}
+
+.tooltipItemPath {
+  font-size: 12px;
+  line-height: 1.45;
+  color: inherit;
+  opacity: 0.72;
+  word-break: break-word;
+}
diff --git a/src/components/Tenant/UserList/buildOrgDisplayPath.js b/src/components/Tenant/UserList/buildOrgDisplayPath.js
new file mode 100644
index 0000000..989d454
--- /dev/null
+++ b/src/components/Tenant/UserList/buildOrgDisplayPath.js
@@ -0,0 +1,11 @@
+import getUserOrgDisplayItems from './getUserOrgDisplayItems';
+
+const buildOrgDisplayPath = item => {
+  const items = getUserOrgDisplayItems(item);
+  if (items.length) {
+    return items.map(org => org.fullPath || org.label).join('；');
+  }
+  return '';
+};
+
+export default buildOrgDisplayPath;
diff --git a/src/components/Tenant/UserList/buildTenantUserPersonalCardProps.js b/src/components/Tenant/UserList/buildTenantUserPersonalCardProps.js
new file mode 100644
index 0000000..1234400
--- /dev/null
+++ b/src/components/Tenant/UserList/buildTenantUserPersonalCardProps.js
@@ -0,0 +1 @@
+export { default, renderPersonalCardEllipsisTitle } from './Actions/buildInvitePersonalCardProps';
diff --git a/src/components/Tenant/UserList/buildUserListFilterFromSearch.js b/src/components/Tenant/UserList/buildUserListFilterFromSearch.js
new file mode 100644
index 0000000..b946f88
--- /dev/null
+++ b/src/components/Tenant/UserList/buildUserListFilterFromSearch.js
@@ -0,0 +1,39 @@
+/**
+ * 从 URL 或外部参数构建用户列表初始筛选项（含默认「开启」状态）。
+ */
+const buildUserListFilterFromSearch = ({ formatMessage, tenantOrgId, orgName, userId }) => {
+  const items = [
+    {
+      name: 'status',
+      label: formatMessage({ id: 'FilterStatus' }),
+      value: { label: formatMessage({ id: 'Open' }), value: 'open' }
+    }
+  ];
+
+  const filterUserId = userId != null ? String(userId).trim() : '';
+  if (filterUserId) {
+    items.push({
+      name: 'id',
+      label: formatMessage({ id: 'FilterUserId' }),
+      value: { label: filterUserId, value: filterUserId }
+    });
+  }
+
+  const orgId = tenantOrgId != null ? String(tenantOrgId).trim() : '';
+  if (orgId) {
+    const name = orgName != null ? String(orgName) : orgId;
+    items.push({
+      name: 'tenantOrgId',
+      label: formatMessage({ id: 'Department' }),
+      value: {
+        label: name,
+        value: orgId,
+        id: orgId,
+        name
+      }
+    });
+  }
+  return items;
+};
+
+export default buildUserListFilterFromSearch;
diff --git a/src/components/Tenant/UserList/buildUserListWithPositionList.js b/src/components/Tenant/UserList/buildUserListWithPositionList.js
new file mode 100644
index 0000000..6c7a3e9
--- /dev/null
+++ b/src/components/Tenant/UserList/buildUserListWithPositionList.js
@@ -0,0 +1,79 @@
+import merge from 'lodash/merge';
+import { extractPositionPageData } from './mapUserOptionsToFormValue';
+
+export function extractListBody(response) {
+  return response?.data?.results ?? response?.data?.data ?? response?.data;
+}
+
+const collectPositionIds = pageData => {
+  const ids = new Set();
+  (pageData || []).forEach(item => {
+    const raw = item?.options?.position;
+    if (raw == null || raw === '') {
+      return;
+    }
+    if (typeof raw === 'object' && raw.id != null) {
+      ids.add(String(raw.id));
+      return;
+    }
+    ids.add(String(raw));
+  });
+  return [...ids];
+};
+
+/** 列表接口响应是否已附带 positionList（如 tenant-extra/user-list） */
+export function listResponseHasPositionList(listApi) {
+  const url = listApi?.url || '';
+  return url.includes('tenant-extra') && url.includes('user-list');
+}
+
+/**
+ * 为租户用户列表附加 positionList，供岗位列展示。
+ * 若 list 已是 tenant-extra 富集接口则不再包装。
+ */
+export function buildUserListWithPositionList(listApi, positionListApi, ajax) {
+  if (!listApi || !ajax || !positionListApi?.url || listResponseHasPositionList(listApi)) {
+    return listApi;
+  }
+
+  return Object.assign({}, listApi, {
+    loader: async () => {
+      const userRes = await ajax(merge({}, listApi));
+      const userBody = extractListBody(userRes) || {};
+      const ids = collectPositionIds(userBody.pageData);
+
+      let positionList = [];
+      if (ids.length) {
+        const posRes = await ajax(
+          merge({}, positionListApi, {
+            params: merge({}, positionListApi.params || {}, {
+              filter: Object.assign({}, positionListApi.params?.filter || {}, { ids }),
+              perPage: Math.max(ids.length, 1),
+              currentPage: 1
+            })
+          })
+        );
+        positionList = extractPositionPageData(posRes);
+      }
+
+      return Object.assign({}, userBody, { positionList });
+    }
+  });
+}
+
+/** 根据 positionList 解析岗位展示名称（支持 options.position、顶层 position 字段） */
+export function resolvePositionDisplayName(item, positionList) {
+  const raw = item?.options?.position ?? item?.position;
+  if (raw == null || raw === '') {
+    return '';
+  }
+  if (typeof raw === 'object' && raw.name) {
+    return String(raw.name).trim();
+  }
+  if (typeof raw === 'string' && Number.isNaN(Number(raw))) {
+    return raw.trim();
+  }
+  const id = String(typeof raw === 'object' ? raw.id : raw);
+  const hit = (positionList || []).find(p => String(p.id) === id);
+  return hit?.name ? String(hit.name) : '';
+}
diff --git a/src/components/Tenant/UserList/getColumns.js b/src/components/Tenant/UserList/getColumns.js
index 84b22c9..f7222cb 100644
--- a/src/components/Tenant/UserList/getColumns.js
+++ b/src/components/Tenant/UserList/getColumns.js
@@ -1,4 +1,6 @@
-const getColumns = ({formatMessage}) => {
+import UserOrgTags from './UserOrgTags';
+
+const getColumns = ({ formatMessage }) => {
   return [
     {
       name: 'id',
@@ -40,9 +42,19 @@ const getColumns = ({formatMessage}) => {
     {
       name: 'tenantOrg',
       title: formatMessage({ id: 'Department' }),
-      valueOf: item => {
-        return item.tenantOrg?.name;
-      }
+      type: 'other',
+      width: 260,
+      disableColItem: true,
+      valueOf: item => <UserOrgTags item={item} />
+    },
+    {
+      name: 'status',
+      title: formatMessage({ id: 'FilterStatus' }),
+      type: 'tag',
+      valueOf: item => ({
+        type: item.status === 'open' ? 'success' : 'default',
+        text: item.status === 'open' ? formatMessage({ id: 'Open' }) : formatMessage({ id: 'Close' })
+      })
     },
     {
       name: 'description',
diff --git a/src/components/Tenant/UserList/getUserListFilterValue.js b/src/components/Tenant/UserList/getUserListFilterValue.js
new file mode 100644
index 0000000..efa4243
--- /dev/null
+++ b/src/components/Tenant/UserList/getUserListFilterValue.js
@@ -0,0 +1,72 @@
+import { normalizeTenantUserStatus } from './normalizeTenantUserStatus';
+
+const pickSelectValues = value => {
+  if (value == null || value === '') {
+    return [];
+  }
+  const list = Array.isArray(value) ? value : [value];
+  return list
+    .map(item => {
+      if (item == null) {
+        return null;
+      }
+      if (typeof item !== 'object') {
+        return String(item);
+      }
+      if (item.value != null && item.value !== '') {
+        return String(item.value);
+      }
+      if (item.id != null && item.id !== '') {
+        return String(item.id);
+      }
+      return null;
+    })
+    .filter(Boolean);
+};
+
+/**
+ * SuperSelectFilterItem 使用 valueKey=id 时筛选项为 { id, name }，
+ * Filter.getFilterValue 默认只读取 { value }，需在此补全 roles 等字段。
+ */
+const getUserListFilterValue = (filter, getFilterValue) => {
+  const value = getFilterValue(filter);
+
+  if (value.id != null && value.id !== '') {
+    value.id = String(value.id);
+  }
+
+  const rolesEntry = filter.find(item => item.name === 'roles');
+  if (rolesEntry) {
+    const roles = pickSelectValues(rolesEntry.value);
+    if (roles.length) {
+      value.roles = roles;
+    } else {
+      delete value.roles;
+    }
+  }
+
+  const orgEntry = filter.find(item => item.name === 'tenantOrgId');
+  if (orgEntry?.value != null && orgEntry.value !== '') {
+    const orgValues = pickSelectValues(orgEntry.value);
+    if (orgValues[0]) {
+      value.tenantOrgId = orgValues[0];
+    }
+  }
+
+  if (value.status != null && value.status !== '') {
+    const raw =
+      typeof value.status === 'object' && value.status !== null && 'value' in value.status
+        ? value.status.value
+        : value.status;
+    const normalized = normalizeTenantUserStatus(raw);
+    if (normalized) {
+      value.status = normalized;
+    } else {
+      delete value.status;
+    }
+  }
+
+  return value;
+};
+
+export default getUserListFilterValue;
diff --git a/src/components/Tenant/UserList/getUserOrgDisplayItems.js b/src/components/Tenant/UserList/getUserOrgDisplayItems.js
new file mode 100644
index 0000000..5377033
--- /dev/null
+++ b/src/components/Tenant/UserList/getUserOrgDisplayItems.js
@@ -0,0 +1,73 @@
+const getOrgLabel = org => {
+  if (org?.name) {
+    return String(org.name).trim();
+  }
+  if (org?.path) {
+    const parts = String(org.path)
+      .split(/[/／>＞]/)
+      .map(s => s.trim())
+      .filter(Boolean);
+    return parts[parts.length - 1] || String(org.path).trim();
+  }
+  return '';
+};
+
+const getOrgFullPath = org => {
+  if (org?.path) {
+    return String(org.path).trim();
+  }
+  return getOrgLabel(org);
+};
+
+/** @returns {{ id: string, label: string, fullPath: string }[]} */
+const getUserOrgDisplayItems = item => {
+  if (Array.isArray(item?.tenantOrgs) && item.tenantOrgs.length) {
+    return item.tenantOrgs
+      .map((org, index) => {
+        const id = org.id != null ? String(org.id) : `org-${index}`;
+        const label = getOrgLabel(org);
+        if (!label) {
+          return null;
+        }
+        return {
+          id,
+          label,
+          fullPath: getOrgFullPath(org)
+        };
+      })
+      .filter(Boolean);
+  }
+
+  if (item?.tenantOrgPath) {
+    const path = String(item.tenantOrgPath).trim();
+    const segments = path.split(/[；;]/).map(s => s.trim()).filter(Boolean);
+    if (segments.length > 1) {
+      return segments.map((segment, index) => ({
+        id: `path-${index}`,
+        label: getOrgLabel({ path: segment }),
+        fullPath: segment
+      }));
+    }
+    return [
+      {
+        id: item.tenantOrg?.id != null ? String(item.tenantOrg.id) : 'primary',
+        label: item.tenantOrg?.name || getOrgLabel({ path }),
+        fullPath: path
+      }
+    ];
+  }
+
+  if (item?.tenantOrg?.name) {
+    return [
+      {
+        id: String(item.tenantOrg.id ?? 'primary'),
+        label: String(item.tenantOrg.name).trim(),
+        fullPath: getOrgFullPath(item.tenantOrg)
+      }
+    ];
+  }
+
+  return [];
+};
+
+export default getUserOrgDisplayItems;
diff --git a/src/components/Tenant/UserList/index.js b/src/components/Tenant/UserList/index.js
index 1426c27..b378cc0 100644
--- a/src/components/Tenant/UserList/index.js
+++ b/src/components/Tenant/UserList/index.js
@@ -1,5 +1,6 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { useState, useRef, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import merge from 'lodash/merge';
 import get from 'lodash/get';
 import { Flex } from 'antd';
@@ -9,113 +10,241 @@ import Create from './Actions/Create';
 import withLocale from '../withLocale';
 import { useIntl } from '@kne/react-intl';
 import useRefCallback from '@kne/use-ref-callback';
+import DepartmentTreeFilterItem from './DepartmentTreeFilterItem';
+import getUserListFilterValue from './getUserListFilterValue';
+import buildUserListFilterFromSearch from './buildUserListFilterFromSearch';
+import { readUserListUrlFilters, stripUserListUrlFilterKeys } from './userListUrlFilters';
+import { buildUserListWithPositionList, extractListBody } from './buildUserListWithPositionList';
 
 const UserList = createWithRemoteLoader({
   modules: ['components-core:Table@TablePage', 'components-core:Filter', 'components-core:Global@usePreset']
 })(
-  withLocale(({ remoteModules, apis, topOptionsSize, onMount, children }) => {
-    const [TablePage, Filter, usePreset] = remoteModules;
-    const ref = useRef();
-    const { formatMessage } = useIntl();
-    const { SearchInput, FilterProvider, getFilterValue } = Filter;
-    const [filter, setFilter] = useState([]);
-    const filterValue = getFilterValue(filter);
-    const { plugins } = usePreset();
-    const topOptions = (
-      <Flex gap={8}>
-        <SearchInput size={topOptionsSize} name="keyword" label={formatMessage({ id: 'Keyword' })} />
-        {apis.create && (
-          <Create
-            type="primary"
-            size={topOptionsSize}
-            apis={apis}
-            onSuccess={() => {
-              ref.current.reload();
-            }}>
-            {formatMessage({ id: 'Add' })}
-          </Create>
-        )}
-      </Flex>
-    );
-
-    const columns = useMemo(() => {
-      const getUserListColumns = get(plugins, 'tenantAdmin.getUserListColumns');
-      const columns = getColumns({ formatMessage });
-      if (typeof getUserListColumns === 'function') {
-        return getUserListColumns({ columns, apis });
+  withLocale(
+    ({
+      remoteModules,
+      apis,
+      topOptionsSize,
+      onMount,
+      children,
+      initialTenantOrgId,
+      initialOrgName,
+      initialUserId,
+      allowQueryIdForUserFilter
+    }) => {
+      const [TablePage, Filter, usePreset] = remoteModules;
+      const { ajax } = usePreset();
+      const ref = useRef();
+      const { formatMessage } = useIntl();
+      const { SearchInput, FilterProvider, getFilterValue, fields: filterFields } = Filter;
+      const { InputFilterItem, AdvancedSelectFilterItem, SuperSelectFilterItem } = filterFields;
+      const { plugins } = usePreset();
+      const [positionList, setPositionList] = useState([]);
+
+      const [searchParams, setSearchParams] = useSearchParams();
+      const urlFilterSnapshotRef = useRef(null);
+      if (urlFilterSnapshotRef.current === null) {
+        urlFilterSnapshotRef.current = readUserListUrlFilters(searchParams, {
+          initialTenantOrgId,
+          initialOrgName,
+          initialUserId,
+          allowQueryIdForUserFilter
+        });
       }
-      return columns;
-    }, [plugins, formatMessage, apis]);
-
-    const tableOptions = {
-      ...merge(
-        {},
-        apis.list,
-        {
-          params: {
-            filter: filterValue
-          }
+
+      const [filter, setFilter] = useState(() =>
+        buildUserListFilterFromSearch({
+          formatMessage,
+          ...urlFilterSnapshotRef.current
+        })
+      );
+
+      const urlStrippedRef = useRef(false);
+      useEffect(() => {
+        if (urlStrippedRef.current) {
+          return;
         }
-      ),
-      ref,
-      columns: [
-        ...columns,
-        {
-          name: 'options',
-          type: 'options',
-          title: formatMessage({ id: 'Operation' }),
-          fixed: 'right',
-          valueOf: item => {
-            return {
-              children: (
-                <Actions
-                  itemClassName="btn-no-padding"
-                  moreType="link"
-                  data={item}
-                  apis={apis}
-                  onSuccess={() => {
-                    ref.current.reload();
-                  }}
-                />
-              )
-            };
-          }
+        urlStrippedRef.current = true;
+        const nextParams = stripUserListUrlFilterKeys(searchParams, urlFilterSnapshotRef.current?.consumedKeys);
+        if (nextParams) {
+          setSearchParams(nextParams, { replace: true });
+        }
+      }, [searchParams, setSearchParams]);
+
+      const filterValue = useMemo(() => getUserListFilterValue(filter, getFilterValue), [filter, getFilterValue]);
+
+      const filterList = useMemo(
+        () => [
+          [
+            <InputFilterItem key="id" label={formatMessage({ id: 'FilterUserId' })} name="id" />,
+            <SuperSelectFilterItem
+              key="roles"
+              label={formatMessage({ id: 'UserRole' })}
+              name="roles"
+              valueKey="id"
+              labelKey="name"
+              api={merge({}, apis.roleList, {
+                params: {
+                  filter: { status: 'open' },
+                  ...(apis.roleList?.params || {})
+                },
+                transformData: data =>
+                  Object.assign({}, data, {
+                    pageData: (data.pageData || []).filter(
+                      item => !(item.type === 'system' && item.code === 'default')
+                    )
+                  })
+              })}
+            />,
+            <DepartmentTreeFilterItem
+              key="tenantOrgId"
+              label={formatMessage({ id: 'Department' })}
+              name="tenantOrgId"
+              api={merge({}, apis.orgList, { params: apis.orgList?.params || {} })}
+            />,
+            <AdvancedSelectFilterItem
+              key="status"
+              label={formatMessage({ id: 'FilterStatus' })}
+              name="status"
+              single
+              api={{
+                loader: () => ({
+                  pageData: [
+                    { label: formatMessage({ id: 'Open' }), value: 'open' },
+                    { label: formatMessage({ id: 'Close' }), value: 'closed' }
+                  ]
+                })
+              }}
+            />
+          ]
+        ],
+        [
+          formatMessage,
+          apis.roleList,
+          apis.orgList,
+          InputFilterItem,
+          AdvancedSelectFilterItem,
+          SuperSelectFilterItem,
+          DepartmentTreeFilterItem
+        ]
+      );
+
+      const topOptions = (
+        <Flex gap={8}>
+          <SearchInput size={topOptionsSize} name="keyword" label={formatMessage({ id: 'Keyword' })} />
+          {apis.create && (
+            <Create
+              type="primary"
+              size={topOptionsSize}
+              apis={apis}
+              onSuccess={() => {
+                ref.current.reload();
+              }}>
+              {formatMessage({ id: 'Add' })}
+            </Create>
+          )}
+        </Flex>
+      );
+
+      const columns = useMemo(() => {
+        const getUserListColumns = get(plugins, 'tenantAdmin.getUserListColumns');
+        const cols = getColumns({ formatMessage });
+        if (typeof getUserListColumns === 'function') {
+          return getUserListColumns({ columns: cols, apis });
         }
-      ],
-      name: 'tenant-user-list',
-      pagination: { paramsType: 'params' }
-    };
-
-    const handlerMount = useRefCallback(() => {
-      onMount && onMount({ filter: { value: filter, onChange: setFilter }, topOptions, tableOptions });
-    });
-
-    useEffect(() => {
-      handlerMount();
-    }, [handlerMount]);
-
-    if (typeof children === 'function') {
-      return children({
-        filter: { value: filter, onChange: setFilter },
-        topOptions,
-        tableOptions
+        return cols;
+      }, [plugins, formatMessage, apis]);
+
+      const listApi = useMemo(() => {
+        const baseApi = buildUserListWithPositionList(
+          merge({}, apis.list, {
+            params: {
+              filter: filterValue,
+              ...(apis.list?.params || {})
+            }
+          }),
+          apis.positionList,
+          ajax
+        );
+        const loadList = baseApi.loader
+          ? (...args) => baseApi.loader(...args)
+          : async () => extractListBody(await ajax(merge({}, baseApi)));
+        return Object.assign({}, baseApi, {
+          loader: async (...args) => {
+            const body = (await loadList(...args)) || {};
+            setPositionList(body.positionList || []);
+            return body;
+          }
+        });
+      }, [apis.list, apis.positionList, filterValue, ajax]);
+
+      const tableOptions = {
+        ...listApi,
+        ref,
+        columns: [
+          ...columns,
+          {
+            name: 'options',
+            type: 'options',
+            title: formatMessage({ id: 'Operation' }),
+            fixed: 'right',
+            valueOf: item => {
+              return {
+                children: (
+                  <Actions
+                    itemClassName="btn-no-padding"
+                    moreType="link"
+                    data={item}
+                    apis={apis}
+                    positionList={positionList}
+                    onSuccess={() => {
+                      ref.current.reload();
+                    }}
+                  />
+                )
+              };
+            }
+          }
+        ],
+        name: 'tenant-user-list',
+        pagination: { paramsType: 'params' }
+      };
+
+      const handlerMount = useRefCallback(() => {
+        onMount &&
+          onMount({
+            filter: { value: filter, onChange: setFilter },
+            filterList,
+            topOptions,
+            tableOptions
+          });
       });
-    }
 
-    return (
-      <Flex vertical gap={8} flex={1}>
-        <Flex justify="space-between">
-          <div></div>
-          <FilterProvider value={filter} onChange={setFilter}>
-            {topOptions}
-          </FilterProvider>
+      useEffect(() => {
+        handlerMount();
+      }, [handlerMount]);
+
+      if (typeof children === 'function') {
+        return children({
+          filter: { value: filter, onChange: setFilter },
+          filterList,
+          topOptions,
+          tableOptions
+        });
+      }
+
+      return (
+        <Flex vertical gap={8} flex={1}>
+          <Filter value={filter} onChange={setFilter} extra={topOptions} list={filterList} />
+          <TablePage {...tableOptions} />
         </Flex>
-        <TablePage {...tableOptions} />
-      </Flex>
-    );
-  })
+      );
+    }
+  )
 );
 
 export default UserList;
 
 export { default as UserCard } from './UserCard';
+export { default as TenantUserPersonalCard } from './TenantUserPersonalCard';
+export { default as buildTenantUserPersonalCardProps } from './buildTenantUserPersonalCardProps';
+export { default as buildInvitePersonalCardProps } from './Actions/buildInvitePersonalCardProps';
diff --git a/src/components/Tenant/UserList/mapUserOptionsToFormValue.js b/src/components/Tenant/UserList/mapUserOptionsToFormValue.js
new file mode 100644
index 0000000..88ea7c6
--- /dev/null
+++ b/src/components/Tenant/UserList/mapUserOptionsToFormValue.js
@@ -0,0 +1,60 @@
+/** 从岗位列表接口响应中取出 pageData */
+export function extractPositionPageData(response) {
+  const body = response?.data?.results ?? response?.data?.data ?? response?.data;
+  if (Array.isArray(body?.pageData)) {
+    return body.pageData;
+  }
+  if (Array.isArray(body)) {
+    return body;
+  }
+  return [];
+}
+
+/** SuperSelect object-output-value 回显需 { id, name } */
+export function resolvePositionSelectValue(position, positionList = []) {
+  if (position == null || position === '') {
+    return null;
+  }
+  if (typeof position === 'object' && position.id != null) {
+    const id = String(position.id);
+    const name = position.name != null ? String(position.name).trim() : '';
+    if (name) {
+      return { id: position.id, name };
+    }
+    const hit = positionList.find(item => String(item.id) === id);
+    return hit ? { id: hit.id, name: hit.name } : { id: position.id };
+  }
+  const id = String(position);
+  const hit = positionList.find(item => String(item.id) === id);
+  return hit ? { id: hit.id, name: hit.name } : { id: position };
+}
+
+/**
+ * @param {Record<string, unknown> | null | undefined} options
+ * @param {{ positionList?: { id: string, name: string }[] }} [context]
+ */
+const normalizeOptions = options => {
+  if (options == null) {
+    return options;
+  }
+  if (typeof options === 'string') {
+    try {
+      return JSON.parse(options);
+    } catch {
+      return options;
+    }
+  }
+  return options;
+};
+
+export function mapUserOptionsToFormValue(options, { positionList = [] } = {}) {
+  const normalized = normalizeOptions(options);
+  if (!normalized || normalized.position == null) {
+    return normalized;
+  }
+  const resolved = resolvePositionSelectValue(normalized.position, positionList);
+  if (!resolved) {
+    return normalized;
+  }
+  return Object.assign({}, normalized, { position: resolved });
+}
diff --git a/src/components/Tenant/UserList/normalizeTenantUserForPersonalCard.js b/src/components/Tenant/UserList/normalizeTenantUserForPersonalCard.js
new file mode 100644
index 0000000..102fecb
--- /dev/null
+++ b/src/components/Tenant/UserList/normalizeTenantUserForPersonalCard.js
@@ -0,0 +1,23 @@
+/** 统一租户用户结构，供 PersonalCard 映射（含 parseJoinToken / 列表行） */
+const normalizeTenantUserForPersonalCard = tenantUser => {
+  if (!tenantUser) {
+    return tenantUser;
+  }
+  const data = typeof tenantUser.toJSON === 'function' ? tenantUser.toJSON() : Object.assign({}, tenantUser);
+
+  if (Array.isArray(data.roleDetails) && data.roleDetails.length) {
+    data.roles = data.roleDetails;
+  }
+
+  if (data.options == null && (data.position != null || data.joinDate != null)) {
+    data.options = Object.assign(
+      {},
+      data.position != null ? { position: data.position } : null,
+      data.joinDate != null ? { joinDate: data.joinDate } : null
+    );
+  }
+
+  return data;
+};
+
+export default normalizeTenantUserForPersonalCard;
diff --git a/src/components/Tenant/UserList/normalizeTenantUserStatus.js b/src/components/Tenant/UserList/normalizeTenantUserStatus.js
new file mode 100644
index 0000000..81f348f
--- /dev/null
+++ b/src/components/Tenant/UserList/normalizeTenantUserStatus.js
@@ -0,0 +1,22 @@
+/**
+ * 租户用户 status 为 open / closed；兼容 active / inactive 别名。
+ *
+ * @param {unknown} status
+ * @returns {'open' | 'closed' | undefined}
+ */
+export function normalizeTenantUserStatus(status) {
+  if (status == null || status === '') {
+    return undefined;
+  }
+  const s = String(status).trim();
+  if (s === 'active') {
+    return 'open';
+  }
+  if (s === 'inactive') {
+    return 'closed';
+  }
+  if (s === 'open' || s === 'closed') {
+    return s;
+  }
+  return undefined;
+}
diff --git a/src/components/Tenant/UserList/pickTenantOrgIdsFromForm.js b/src/components/Tenant/UserList/pickTenantOrgIdsFromForm.js
new file mode 100644
index 0000000..d8d758a
--- /dev/null
+++ b/src/components/Tenant/UserList/pickTenantOrgIdsFromForm.js
@@ -0,0 +1,43 @@
+/**
+ * 表单中的组织多选转为 API 所需的 id 数组。
+ *
+ * @param {unknown} tenantOrgIds
+ * @returns {string[]}
+ */
+export function pickTenantOrgIdsFromForm(tenantOrgIds) {
+  if (tenantOrgIds == null) {
+    return [];
+  }
+  const list = Array.isArray(tenantOrgIds) ? tenantOrgIds : [tenantOrgIds];
+  const ids = [];
+  for (const item of list) {
+    if (item == null || item === '') {
+      continue;
+    }
+    if (typeof item === 'object' && item.id != null && item.id !== '') {
+      ids.push(String(item.id));
+    } else {
+      ids.push(String(item));
+    }
+  }
+  return [...new Set(ids)];
+}
+
+export function mapUserOrgIdsToFormValue(data) {
+  if (Array.isArray(data?.tenantOrgs) && data.tenantOrgs.length) {
+    return data.tenantOrgs.map(org => ({
+      id: org.id,
+      name: org.name || org.id
+    }));
+  }
+  if (Array.isArray(data?.tenantOrgIds) && data.tenantOrgIds.length) {
+    return data.tenantOrgIds.map(id => ({
+      id,
+      name: data.tenantOrg?.id === id ? data.tenantOrg.name : id
+    }));
+  }
+  if (data?.tenantOrg?.id) {
+    return [{ id: data.tenantOrg.id, name: data.tenantOrg.name }];
+  }
+  return [];
+}
diff --git a/src/components/Tenant/UserList/userListUrlFilters.js b/src/components/Tenant/UserList/userListUrlFilters.js
new file mode 100644
index 0000000..e1eec2c
--- /dev/null
+++ b/src/components/Tenant/UserList/userListUrlFilters.js
@@ -0,0 +1,61 @@
+const decodeQueryValue = value => {
+  if (value == null || value === '') {
+    return '';
+  }
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return value;
+  }
+};
+
+/**
+ * 读取用户列表 URL 筛参（仅应在首屏调用一次），并记录需从地址栏移除的 query key。
+ */
+export const readUserListUrlFilters = (
+  searchParams,
+  { initialTenantOrgId, initialOrgName, initialUserId, allowQueryIdForUserFilter } = {}
+) => {
+  const consumedKeys = [];
+
+  const take = key => {
+    if (!searchParams.has(key)) {
+      return null;
+    }
+    consumedKeys.push(key);
+    return searchParams.get(key);
+  };
+
+  let tenantOrgId = take('tenantOrgId') || initialTenantOrgId || null;
+  let orgName = take('orgName') || initialOrgName || '';
+  let userId = take('userId') || take('filterUserId') || initialUserId || null;
+
+  if (!userId && allowQueryIdForUserFilter) {
+    const idFromQuery = take('id');
+    if (idFromQuery) {
+      userId = idFromQuery;
+    }
+  }
+
+  return {
+    tenantOrgId,
+    orgName: decodeQueryValue(orgName),
+    userId,
+    consumedKeys
+  };
+};
+
+export const stripUserListUrlFilterKeys = (searchParams, consumedKeys) => {
+  if (!consumedKeys?.length) {
+    return null;
+  }
+  const next = new URLSearchParams(searchParams);
+  let changed = false;
+  consumedKeys.forEach(key => {
+    if (next.has(key)) {
+      next.delete(key);
+      changed = true;
+    }
+  });
+  return changed ? next : null;
+};
diff --git a/src/components/Tenant/doc/api.md b/src/components/Tenant/doc/api.md
index 807550e..7696e6a 100644
--- a/src/components/Tenant/doc/api.md
+++ b/src/components/Tenant/doc/api.md
@@ -28,7 +28,8 @@
 | --- | --- | --- | --- |
 | data | 组织列表数据 | array | [] |
 | companyName | 公司名称 | string | - |
-| apis | API 配置 | object | - |
+| tenantId | 租户 ID（管理端 `tenantAdmin` 场景传入，用于批量导入等接口 body） | string | - |
+| apis | API 配置（含 create、save、remove、userList、import 等） | object | - |
 | onSuccess | 操作成功回调 | function | - |
 
 ### UserList 用户列表
@@ -46,6 +47,14 @@
 | --- | --- | --- | --- |
 | apis | API 配置 | object | - |
 
+角色列表 `apis.list` 支持 `params.filter`：
+
+| 字段 | 说明 |
+| --- | --- |
+| keyword | 名称/编码/描述模糊搜索 |
+| type | 角色类型：`system` / `custom` |
+| status | 状态：`open` / `closed` |
+
 ### Permission 权限管理
 
 | 属性名 | 说明 | 类型 | 默认值 |
@@ -74,6 +83,24 @@
 | apis | API 配置 | object | - |
 | baseUrl | 基础路径 | string | - |
 
+### TenantUserSelect 按组织选择租户用户
+
+参考 `UserSelect`，用于在表单中先选组织、再选租户成员。左侧为组织树，右侧为成员选择器（`SuperSelect`），成员列表按所选组织及其子组织过滤（`filter.tenantOrgId`）。
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| name | 表单字段名称 | string | - |
+| label | 表单标签 | string | - |
+| rule | 校验规则，如 `REQ` | string | - |
+| placeholder | 成员选择占位文本 | string | - |
+| single | 是否单选 | boolean | true |
+| disabled | 是否禁用 | boolean | false |
+| userStatus | 成员状态筛选：`open` / `closed`（兼容 `active` → `open`、`inactive` → `closed`） | string | - |
+| companyName | 组织树根节点（公司）名称 | string | - |
+| showOrgRoot | 是否展示公司根节点 | boolean | true |
+| orgApi | 自定义组织列表 API，默认 `apis.tenant.orgList` | object | - |
+| userApi | 自定义成员列表 API，默认 `apis.tenant.userList` | object | - |
+
 ## API 配置说明
 
 ```javascript
diff --git a/src/components/Tenant/doc/example.json b/src/components/Tenant/doc/example.json
index 9e5bdf8..34d6912 100644
--- a/src/components/Tenant/doc/example.json
+++ b/src/components/Tenant/doc/example.json
@@ -22,7 +22,7 @@
     },
     {
       "title": "组织架构",
-      "description": "OrgInfo 组件用于管理组织架构，支持树形和图形两种展示模式，可添加、编辑、删除组织节点",
+      "description": "OrgInfo 组件用于管理组织架构；示例与 TenantAdmin 详情内「组织架构」Tab 一致（Fetch + tenantAdmin orgList 与完整 apis）",
       "code": "./org-info.js",
       "scope": [
         {
@@ -36,6 +36,10 @@
         {
           "name": "remoteLoader",
           "packageName": "@kne/remote-loader"
+        },
+        {
+          "name": "reactFetch",
+          "packageName": "@kne/react-fetch"
         }
       ]
     },
@@ -138,6 +142,102 @@
         }
       ]
     },
+    {
+      "title": "按组织选择成员",
+      "description": "TenantUserSelect 先选组织再选租户成员，适用于指定项目负责人等场景",
+      "code": "./tenant-user-select-base.js",
+      "scope": [
+        {
+          "name": "_Tenant",
+          "packageName": "@components/Tenant"
+        },
+        {
+          "name": "_mockPreset",
+          "packageName": "@root/mockPreset"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        },
+        {
+          "name": "reactFetch",
+          "packageName": "@kne/react-fetch"
+        }
+      ]
+    },
+    {
+      "title": "按组织多选成员",
+      "description": "TenantUserSelect 多选模式，用于选择多个协作成员",
+      "code": "./tenant-user-select-multiple.js",
+      "scope": [
+        {
+          "name": "_Tenant",
+          "packageName": "@components/Tenant"
+        },
+        {
+          "name": "_mockPreset",
+          "packageName": "@root/mockPreset"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        },
+        {
+          "name": "reactFetch",
+          "packageName": "@kne/react-fetch"
+        }
+      ]
+    },
+    {
+      "title": "按组织选择成员（初始值）",
+      "description": "编辑场景为 TenantUserSelect 设置默认成员，值为 { id, name }",
+      "code": "./tenant-user-select-initial.js",
+      "scope": [
+        {
+          "name": "_Tenant",
+          "packageName": "@components/Tenant"
+        },
+        {
+          "name": "_mockPreset",
+          "packageName": "@root/mockPreset"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        },
+        {
+          "name": "reactFetch",
+          "packageName": "@kne/react-fetch"
+        }
+      ]
+    },
+    {
+      "title": "按组织选择成员（状态筛选）",
+      "description": "通过 userStatus 仅加载在职成员",
+      "code": "./tenant-user-select-status.js",
+      "scope": [
+        {
+          "name": "_Tenant",
+          "packageName": "@components/Tenant"
+        },
+        {
+          "name": "_mockPreset",
+          "packageName": "@root/mockPreset"
+        },
+        {
+          "name": "remoteLoader",
+          "packageName": "@kne/remote-loader"
+        },
+        {
+          "name": "reactFetch",
+          "packageName": "@kne/react-fetch"
+        },
+        {
+          "name": "antd",
+          "packageName": "antd"
+        }
+      ]
+    },
     {
       "title": "系统设置",
       "description": "Setting 组件是系统设置的入口，包含公司信息、组织架构、权限管理、用户管理四个设置模块",
diff --git a/src/components/Tenant/doc/org-info.js b/src/components/Tenant/doc/org-info.js
index e27bfdb..b77b1e7 100644
--- a/src/components/Tenant/doc/org-info.js
+++ b/src/components/Tenant/doc/org-info.js
@@ -1,6 +1,49 @@
 const { OrgInfo } = _Tenant;
-const { default: mockPreset, tenantData } = _mockPreset;
+const { default: mockPreset, tenantAdminData } = _mockPreset;
 const { createWithRemoteLoader } = remoteLoader;
+const Fetch = reactFetch.default;
+
+const OrgInfoInner = createWithRemoteLoader({
+  modules: ['components-core:Global@usePreset']
+})(({ remoteModules }) => {
+  const [usePreset] = remoteModules;
+  const { apis } = usePreset();
+  const tenant = tenantAdminData.tenantDetail;
+  return (
+    <Fetch
+      {...Object.assign({}, apis.tenantAdmin.orgList, {
+        params: {
+          tenantId: tenant.id
+        }
+      })}
+      render={({ data, reload }) => {
+        return (
+          <OrgInfo
+            data={data}
+            tenantId={tenant.id}
+            companyName={tenant?.tenantCompany?.name}
+            onSuccess={reload}
+            apis={{
+              create: Object.assign({}, apis.tenantAdmin.orgCreate, {
+                data: { tenantId: tenant.id }
+              }),
+              save: Object.assign({}, apis.tenantAdmin.orgSave, {
+                data: { tenantId: tenant.id }
+              }),
+              remove: Object.assign({}, apis.tenantAdmin.orgRemove, {
+                data: { tenantId: tenant.id }
+              }),
+              userList: Object.assign({}, apis.tenantAdmin.userList, {
+                params: { tenantId: tenant.id }
+              }),
+              import: apis.tenantAdmin.orgBatchImport
+            }}
+          />
+        );
+      }}
+    />
+  );
+});
 
 const OrgInfoExample = createWithRemoteLoader({
   modules: ['components-core:Global@PureGlobal', 'components-core:Layout']
@@ -9,18 +52,7 @@ const OrgInfoExample = createWithRemoteLoader({
   return (
     <PureGlobal preset={mockPreset}>
       <Layout navigation={{ isFixed: false }}>
-        <OrgInfo
-          data={tenantData.orgList}
-          companyName={tenantData.company.name}
-          apis={{
-            create: { loader: () => ({ id: `dept-${Date.now()}` }) },
-            save: { loader: () => ({ code: 0 }) },
-            remove: { loader: () => ({ code: 0 }) }
-          }}
-          onSuccess={() => {
-            console.log('操作成功');
-          }}
-        />
+        <OrgInfoInner />
       </Layout>
     </PureGlobal>
   );
diff --git a/src/components/Tenant/doc/permission.js b/src/components/Tenant/doc/permission.js
index 84aa174..c7d135f 100644
--- a/src/components/Tenant/doc/permission.js
+++ b/src/components/Tenant/doc/permission.js
@@ -22,7 +22,9 @@ const PermissionExample = createWithRemoteLoader({
               remove: mockPreset.apis.tenant.removeRole,
               permissionSave: mockPreset.apis.tenant.savePermission,
               permissionList: mockPreset.apis.tenant.getPermissionList
-            }
+            },
+            userList: mockPreset.apis.tenant.userList,
+            sharedGroup: mockPreset.apis.tenant.sharedGroup
           }}
         />
       </Layout>
diff --git a/src/components/Tenant/doc/setting.js b/src/components/Tenant/doc/setting.js
index 0d9792c..bebfc0b 100644
--- a/src/components/Tenant/doc/setting.js
+++ b/src/components/Tenant/doc/setting.js
@@ -1,8 +1,30 @@
 const { Setting } = _Tenant;
 const { default: mockPreset } = _mockPreset;
 const { createWithRemoteLoader } = remoteLoader;
-const { useNavigate, Navigate } = reactRouterDom;
-const { Route, Routes } = reactRouterDom;
+const { MemoryRouter, Navigate, Route, Routes } = reactRouterDom;
+
+const settingApis = {
+  user: {
+    list: mockPreset.apis.tenant.getUserList,
+    create: mockPreset.apis.tenant.createUser,
+    save: mockPreset.apis.tenant.saveUser,
+    remove: mockPreset.apis.tenant.removeUser
+  },
+  permission: {
+    list: mockPreset.apis.tenant.getPermissionList,
+    save: mockPreset.apis.tenant.savePermission
+  },
+  role: {
+    list: mockPreset.apis.tenant.getRoleList,
+    create: mockPreset.apis.tenant.createRole,
+    save: mockPreset.apis.tenant.saveRole,
+    remove: mockPreset.apis.tenant.removeRole,
+    permissionSave: mockPreset.apis.tenant.savePermission,
+    permissionList: mockPreset.apis.tenant.getPermissionList
+  },
+  userList: mockPreset.apis.tenant.userList,
+  sharedGroup: mockPreset.apis.tenant.sharedGroup
+};
 
 const SettingExample = createWithRemoteLoader({
   modules: ['components-core:Global@PureGlobal', 'components-core:Layout']
@@ -11,40 +33,24 @@ const SettingExample = createWithRemoteLoader({
   return (
     <PureGlobal preset={mockPreset}>
       <Layout navigation={{ isFixed: false }}>
-        <Routes>
-          <Route
-            path="/Tenant/setting/*"
-            element={
-              <Setting
-                pageProps={{
-                  menuFixed: false
-                }}
-                baseUrl="/Tenant"
-                apis={{
-                  user: {
-                    list: mockPreset.apis.tenant.getUserList,
-                    create: mockPreset.apis.tenant.createUser,
-                    save: mockPreset.apis.tenant.saveUser,
-                    remove: mockPreset.apis.tenant.removeUser
-                  },
-                  permission: {
-                    list: mockPreset.apis.tenant.getPermissionList,
-                    save: mockPreset.apis.tenant.savePermission
-                  },
-                  role: {
-                    list: mockPreset.apis.tenant.getRoleList,
-                    create: mockPreset.apis.tenant.createRole,
-                    save: mockPreset.apis.tenant.saveRole,
-                    remove: mockPreset.apis.tenant.removeRole,
-                    permissionSave: mockPreset.apis.tenant.savePermission,
-                    permissionList: mockPreset.apis.tenant.getPermissionList
-                  }
-                }}
-              />
-            }
-          />
-          <Route path="/Tenant/*" element={<Navigate to="/Tenant/setting" replace />} />
-        </Routes>
+        <MemoryRouter initialEntries={['/Tenant/setting/company']}>
+          <Routes>
+            <Route
+              path="/Tenant/setting/*"
+              element={
+                <Setting
+                  pageProps={{
+                    menuFixed: false
+                  }}
+                  baseUrl="/Tenant"
+                  apis={settingApis}
+                />
+              }
+            />
+            <Route path="/Tenant" element={<Navigate to="/Tenant/setting/company" replace />} />
+            <Route path="*" element={<Navigate to="/Tenant/setting/company" replace />} />
+          </Routes>
+        </MemoryRouter>
       </Layout>
     </PureGlobal>
   );
diff --git a/src/components/Tenant/doc/summary.md b/src/components/Tenant/doc/summary.md
index cc1e67c..b519516 100644
--- a/src/components/Tenant/doc/summary.md
+++ b/src/components/Tenant/doc/summary.md
@@ -1 +1 @@
-租户管理系统组件，提供公司信息管理、组织架构管理、用户管理、角色权限管理等完整的租户管理功能。
+租户管理系统组件，提供公司信息管理、组织架构管理、用户管理、角色权限管理等完整的租户管理功能。子组件 `TenantUserSelect` 支持按组织树筛选并选择租户成员，适用于负责人指定、协作成员选择等表单场景。
diff --git a/src/components/Tenant/doc/tenant-user-select-base.js b/src/components/Tenant/doc/tenant-user-select-base.js
new file mode 100644
index 0000000..f6c5baf
--- /dev/null
+++ b/src/components/Tenant/doc/tenant-user-select-base.js
@@ -0,0 +1,39 @@
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectBaseExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton, CancelButton } = FormInfo;
+  const { Input } = FormInfo.fields;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        onSubmit={data => {
+          console.log('提交数据:', data);
+        }}>
+        <FormInfo
+          title="按组织选择负责人"
+          column={1}
+          list={[<Input name="projectName" label="项目名称" rule="REQ" placeholder="例如：Q2 产品迭代" />]}
+        />
+        <TenantUserSelect
+          name="owner"
+          label="项目负责人"
+          rule="REQ"
+          placeholder="请选择负责人"
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <CancelButton style={{ marginRight: 8 }}>取消</CancelButton>
+          <SubmitButton type="primary">提交</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectBaseExample />);
diff --git a/src/components/Tenant/doc/tenant-user-select-initial.js b/src/components/Tenant/doc/tenant-user-select-initial.js
new file mode 100644
index 0000000..f5113ca
--- /dev/null
+++ b/src/components/Tenant/doc/tenant-user-select-initial.js
@@ -0,0 +1,34 @@
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectInitialExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        defaultValues={{
+          approver: { id: 'user-2', name: '李娜' }
+        }}
+        onSubmit={data => {
+          console.log('审批人:', data);
+        }}>
+        <TenantUserSelect
+          name="approver"
+          label="审批人"
+          rule="REQ"
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <SubmitButton type="primary">保存</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectInitialExample />);
diff --git a/src/components/Tenant/doc/tenant-user-select-multiple.js b/src/components/Tenant/doc/tenant-user-select-multiple.js
new file mode 100644
index 0000000..f063955
--- /dev/null
+++ b/src/components/Tenant/doc/tenant-user-select-multiple.js
@@ -0,0 +1,38 @@
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+
+const TenantUserSelectMultipleExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+  const { Input } = FormInfo.fields;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Form
+        onSubmit={data => {
+          console.log('协作成员:', data);
+        }}>
+        <FormInfo
+          title="跨部门协作"
+          column={1}
+          list={[<Input name="taskName" label="任务名称" rule="REQ" placeholder="例如：官网改版评审" />]}
+        />
+        <TenantUserSelect
+          name="collaborators"
+          label="协作成员"
+          rule="REQ"
+          single={false}
+          companyName="科技创新有限公司"
+        />
+        <div style={{ marginTop: 24, textAlign: 'center' }}>
+          <SubmitButton type="primary">保存</SubmitButton>
+        </div>
+      </Form>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectMultipleExample />);
diff --git a/src/components/Tenant/doc/tenant-user-select-status.js b/src/components/Tenant/doc/tenant-user-select-status.js
new file mode 100644
index 0000000..d489568
--- /dev/null
+++ b/src/components/Tenant/doc/tenant-user-select-status.js
@@ -0,0 +1,37 @@
+const { TenantUserSelect } = _Tenant;
+const { default: mockPreset } = _mockPreset;
+const { createWithRemoteLoader } = remoteLoader;
+const { Flex, Typography } = antd;
+
+const TenantUserSelectStatusExample = createWithRemoteLoader({
+  modules: ['components-core:FormInfo', 'components-core:Global@PureGlobal']
+})(({ remoteModules }) => {
+  const [FormInfo, PureGlobal] = remoteModules;
+  const { Form, SubmitButton } = FormInfo;
+  const { Text } = Typography;
+
+  return (
+    <PureGlobal preset={mockPreset}>
+      <Flex vertical gap={16}>
+        <Text type="secondary">仅展示状态为「开启」的成员（userStatus=&quot;open&quot;，亦兼容 active）</Text>
+        <Form
+          onSubmit={data => {
+            console.log('交接人:', data);
+          }}>
+          <TenantUserSelect
+            name="handoverUser"
+            label="工作交接人"
+            rule="REQ"
+            userStatus="open"
+            companyName="科技创新有限公司"
+          />
+          <div style={{ marginTop: 24, textAlign: 'center' }}>
+            <SubmitButton type="primary">确认</SubmitButton>
+          </div>
+        </Form>
+      </Flex>
+    </PureGlobal>
+  );
+});
+
+render(<TenantUserSelectStatusExample />);
diff --git a/src/components/Tenant/index.js b/src/components/Tenant/index.js
index f1de161..aeade81 100644
--- a/src/components/Tenant/index.js
+++ b/src/components/Tenant/index.js
@@ -2,10 +2,12 @@ export { default as CompanyInfo } from './CompanyInfo';
 export { default as OrgInfo } from './OrgInfo';
 export { default as UserList } from './UserList';
 export { default as Role } from './Role';
+export { default as SharedGroup } from './SharedGroup';
 export { default as Permission } from './Permission';
 export { default as JoinInvitation } from './JoinInvitation';
 export { default as LoginTenant } from './LoginTenant';
 export { default as Authenticate } from './Authenticate';
 export { default as AfterTenantLoginLayout } from './AfterTenantLoginLayout';
 export { default as Setting } from './Setting';
+export { default as TenantUserSelect } from './TenantUserSelect';
 export { default } from './Tenant';
diff --git a/src/components/Tenant/locale/en-US.js b/src/components/Tenant/locale/en-US.js
index 20a1396..bc0cb3d 100644
--- a/src/components/Tenant/locale/en-US.js
+++ b/src/components/Tenant/locale/en-US.js
@@ -1,6 +1,7 @@
 const locale = {
   // CompanyInfo
   CompanyInfo: 'Company Info',
+  CompanyBasicSection: 'Basic information',
   DevelopmentHistory: 'Development History',
   TeamDescription: 'Team Description',
   Save: 'Save',
@@ -8,6 +9,8 @@ const locale = {
   Edit: 'Edit',
 
   // OrgInfo
+  ViewUsers: 'View users',
+  OrgUserCount: '{count}',
   AddSubOrg: 'Add Sub Organization',
   Delete: 'Delete',
   DeleteConfirm: 'Are you sure you want to delete?',
@@ -20,6 +23,8 @@ const locale = {
   UnnamedCompany: 'Unnamed Company',
 
   // UserList
+  FilterUserId: 'ID',
+  FilterStatus: 'Status',
   Keyword: 'Keyword',
   Add: 'Add',
   Operation: 'Operation',
@@ -27,7 +32,10 @@ const locale = {
   Name: 'Name',
   UserName: 'Name',
   Department: 'Department',
+  Departments: 'Departments',
+  OrgTooltipListTitle: 'Departments ({count})',
   UserRole: 'Role',
+  Position: 'Position',
   Phone: 'Phone',
   Email: 'Email',
   UserDescription: 'Description',
@@ -55,8 +63,11 @@ const locale = {
   InviteLinkExpired: 'Invitation link has expired',
   ContactAdmin: 'Please contact the administrator to resolve this issue',
   InviteYouJoin: 'You are invited to join 【{name}】',
+  InviteJoinSubtitle: 'Complete the steps below to join this organization',
+  StepBack: 'Back',
   ConfirmCompanyInfo: 'Confirm Company Info',
   ConfirmEmployeeInfo: 'Confirm Employee Info',
+  ConfirmEmployeeInfoHint: 'Please review your profile in this tenant. Confirm to complete joining.',
   Complete: 'Complete',
   WelcomeJoin: 'Welcome to join 【{name}】！',
   AutoJump: 'Auto jump to system homepage in',
@@ -64,6 +75,8 @@ const locale = {
 
   // SelectTenant
   SelectLoginTenant: 'Select Login Tenant',
+  SelectLoginTenantSubtitle: 'Choose a tenant to enter. Click a card to set it as your default.',
+  NoAvailableTenant: 'No tenants available',
   TenantUserCannotUse: 'Tenant user cannot be used',
   CurrentTenant: 'Current Tenant',
   SwitchDefaultTenantSuccess: 'Switch default tenant successfully',
@@ -99,24 +112,86 @@ const locale = {
   CompanyFullName: 'Company Full Name',
   CompanyWebsite: 'Company Website',
   CompanyDescription: 'Company Description',
+  CompanyIndustry: 'Industry',
+  CompanyScale: 'Company size',
+  CompanyAddress: 'Address',
+  CompanyFounded: 'Founded',
+  CompanyBasicEmpty: 'No basic information yet',
+  BannerBackground: 'Background (carousel)',
+  CompanyLogo: 'Company logo',
+  CompanyTags: 'Company tags',
+  CompanyTagLabel: 'Tag',
   Banner: 'Banner',
   Time: 'Time',
   Event: 'Event',
+  HistoryImages: 'Images',
+  HistoryExtra: 'Additional notes',
   TeamAvatar: 'Avatar',
   TeamName: 'Name',
   TeamRole: 'Role',
   TeamIntroduction: 'Introduction',
   OrgName: 'Name',
   OrgDescription: 'Organization Description',
+  OrgLeader: 'Department head',
+  OrgLeaderMustBeMember: 'Only members of this department can be selected as head',
+  OrgLeaderCreateHint: 'When creating a department, the selected head will be added to this department automatically',
+  OrgExcelImport: 'Import orgs from Excel',
+  ImportUploadLabel: 'Upload file',
+  ImportPreviewLabel: 'Parsed preview',
+  ImportAnchorLabel: 'Anchor organization (imported orgs will be direct children of this node)',
+  ImportAnchorPlaceholder: 'Leave empty to attach under tenant root',
+  ImportExcelHint:
+    'Download the template with two sheets: "组织" (org name, parent, description) and "用户" (org name, user name, email/phone, optional leader=yes). The file is parsed locally and previewed; the raw Excel is not uploaded. Orgs are imported before users from the workbook.',
+  ImportFileRequired: 'Please select an Excel file and wait for parsing to finish',
+  ImportConfirmSubmit: 'Confirm batch import',
+  ImportPreviewCount: 'Parsed {count} row(s) (including blanks; all-blank rows are ignored on submit)',
+  ImportSelectedCount: '{selected} of {total} row(s) selected; only selected rows will be imported',
+  ImportNoRowsSelected: 'Select at least one row before submitting',
+  ImportRechooseFile: 'Choose another file',
+  ImportColRowType: 'Row type',
+  ImportRowTypeOrg: 'Org',
+  ImportRowTypeUser: 'User',
+  ImportColParentOrg: 'Parent org',
+  ImportNestedUsers: 'Members',
+  ImportColUserCount: 'Users',
+  ImportOrgRefOnly: 'Users only',
+  ImportColUserName: 'User name',
+  ImportColIsLeader: 'Leader',
+  Yes: 'Yes',
+  No: 'No',
+  ImportColEmail: 'Email',
+  ImportColPhone: 'Phone',
+  ImportTenantIdMissing: 'Tenant information is missing, import aborted',
+  ImportDragText: 'Click or drag .xlsx / .xls file here',
+  ImportSuccess: 'Import finished: {createdOrgs} org(s) created, {createdUsers} user(s) created, {reusedUsers} user(s) reused, {rowCount} row(s)',
+  DownloadImportTemplate: 'Download sample Excel template',
   RoleName: 'Role Name',
   RoleCode: 'Role Code',
   RoleDescription: 'Role Description',
   SharedGroupName: 'Shared Group Name',
+  SharedGroupModulesLabel: 'Shared modules',
+  SharedGroupModulesHint:
+    'Only modules with data scope enabled in permission config are listed; modules without data scope are not shown.',
+  SharedGroupDataSources: 'Data sources',
+  SharedGroupDataSourcesDesc: 'Select multiple tenant users whose data is included in this shared group (matches backend data-source links).',
+  SharedGroupMembers: 'Members',
+  SharedGroupMembersDesc: 'Tenant users who participate in this shared group.',
+  SharedGroupModulesEmpty:
+    'No modules with data scope enabled. Enable data scope on the corresponding modules in permission config.',
+  SharedGroupAccessRead: 'Read-only',
+  SharedGroupAccessWrite: 'Read/Write',
+  SharedGroupDataScopeRange: 'Data scope',
+  DataScopeTypeOwner: 'Self & subordinates',
+  DataScopeTypeOrg: 'Current department',
+  DataScopeTypeOrgSubtree: 'Department & sub-departments',
+  DataScopeTypeSelf: 'Self only',
 
   // UserList Actions
   AddUser: 'Add User',
   EditUser: 'Edit User',
   InviteUser: 'Invite User',
+  InviteUserHint:
+    'Share the invite link below so the user can join this tenant, or send an invite email directly (requires a valid email on the user profile).',
   InviteLink: 'Invite Link',
   SendInviteEmail: 'Send Invite Email',
   CopyInviteLink: 'Copy Invite Link',
@@ -126,6 +201,13 @@ const locale = {
   CloseUserConfirm: 'Are you sure you want to close this user? He will not be able to use the current tenant after closing',
   DeleteUserConfirm: 'Are you sure you want to delete this user? He will not be able to use the current tenant after deletion',
 
+  // TenantUserSelect
+  TenantUserSelectOrgTitle: 'Organization',
+  TenantUserSelectUserTitle: 'Select member',
+  TenantUserSelectPlaceholder: 'Select a member',
+  TenantUserSelectSelectOrgFirst: 'Select an organization on the left first',
+  TenantUserSelectEmptyOrg: 'No organization data',
+
   // Role
   SystemType: 'System',
   CustomType: 'Custom',
diff --git a/src/components/Tenant/locale/zh-CN.js b/src/components/Tenant/locale/zh-CN.js
index 1779a17..7fd4591 100644
--- a/src/components/Tenant/locale/zh-CN.js
+++ b/src/components/Tenant/locale/zh-CN.js
@@ -1,6 +1,7 @@
 const locale = {
   // CompanyInfo
   CompanyInfo: '公司信息',
+  CompanyBasicSection: '基本信息',
   DevelopmentHistory: '发展历程',
   TeamDescription: '团队介绍',
   Save: '保存',
@@ -8,6 +9,8 @@ const locale = {
   Edit: '编辑',
 
   // OrgInfo
+  ViewUsers: '查看用户',
+  OrgUserCount: '{count} 人',
   AddSubOrg: '新增子级组织',
   Delete: '删除',
   DeleteConfirm: '确定要删除吗？',
@@ -20,6 +23,8 @@ const locale = {
   UnnamedCompany: '未命名公司',
 
   // UserList
+  FilterUserId: 'ID',
+  FilterStatus: '状态',
   Keyword: '关键字',
   Add: '添加',
   Operation: '操作',
@@ -27,7 +32,10 @@ const locale = {
   Name: '姓名',
   UserName: '姓名',
   Department: '部门',
+  Departments: '所属部门',
+  OrgTooltipListTitle: '所属部门（{count}）',
   UserRole: '角色',
+  Position: '岗位',
   Phone: '手机',
   Email: '邮箱',
   UserDescription: '描述',
@@ -55,8 +63,11 @@ const locale = {
   InviteLinkExpired: '邀请链接已失效',
   ContactAdmin: '请联系管理员解决此问题',
   InviteYouJoin: '邀请您加入【{name}】',
+  InviteJoinSubtitle: '请按以下步骤核对信息并完成加入',
+  StepBack: '上一步',
   ConfirmCompanyInfo: '确认公司信息',
   ConfirmEmployeeInfo: '确认员工信息',
+  ConfirmEmployeeInfoHint: '请核对您在当前租户下的个人信息，确认无误后完成加入。',
   Complete: '完成',
   WelcomeJoin: '欢迎您加入【{name}】！',
   AutoJump: '秒后自动跳转到系统首页',
@@ -64,6 +75,8 @@ const locale = {
 
   // SelectTenant
   SelectLoginTenant: '选择登录租户',
+  SelectLoginTenantSubtitle: '请选择要进入的租户，点击卡片可切换默认租户',
+  NoAvailableTenant: '暂无可登录的租户',
   TenantUserCannotUse: '租户用户不能使用',
   CurrentTenant: '当前租户',
   SwitchDefaultTenantSuccess: '切换默认租户成功',
@@ -91,31 +104,90 @@ const locale = {
   // Role
   SetPermission: '设置权限',
   SetRolePermission: '设置角色权限',
-  Description:"描述",
+  Description: '描述',
 
   // FormInner labels
   CompanyName: '公司名称',
   CompanyFullName: '公司全称',
   CompanyWebsite: '公司主页',
   CompanyDescription: '公司简介',
+  CompanyIndustry: '行业',
+  CompanyScale: '规模',
+  CompanyAddress: '办公地址',
+  CompanyFounded: '成立日期',
+  CompanyBasicEmpty: '暂无基本信息',
+  BannerBackground: '背景图（多图轮播）',
+  CompanyLogo: '公司 Logo',
+  CompanyTags: '公司标签',
+  CompanyTagLabel: '标签',
   Banner: 'Banner',
   Time: '时间',
   Event: '事件',
+  HistoryImages: '配图',
+  HistoryExtra: '补充说明',
   TeamAvatar: '头像',
   TeamName: '姓名',
   TeamRole: '角色',
   TeamIntroduction: '简介',
   OrgName: '名称',
   OrgDescription: '组织描述',
+  OrgLeader: '部门负责人',
+  OrgLeaderMustBeMember: '仅可选择已属于本部门的成员作为负责人',
+  OrgLeaderCreateHint: '新建部门时指定负责人将自动加入该部门',
+  OrgExcelImport: 'Excel 导入组织',
+  ImportUploadLabel: '上传文件',
+  ImportPreviewLabel: '解析预览',
+  ImportAnchorLabel: '锚点组织（导入的新组织将作为该节点的直属子级）',
+  ImportAnchorPlaceholder: '不选则挂到租户根下（与 Excel 内「上级」列配合使用）',
+  ImportExcelHint:
+    '请下载模板填写。模板含「组织」「用户」两个工作表：组织表填组织名称、上级组织名称、描述；用户表填所属组织名称、用户姓名、邮箱/手机，可选「是否负责人」填「是」。选择文件后本地解析预览，确认后提交（不上传原始 Excel）。解析顺序为先组织表、后用户表。',
+  ImportFileRequired: '请先选择 Excel 文件并完成解析',
+  ImportConfirmSubmit: '确认批量导入',
+  ImportPreviewCount: '已解析 {count} 行（含空行；完全空行提交时会被忽略）',
+  ImportSelectedCount: '已勾选 {selected} / {total} 行，仅勾选行会提交导入',
+  ImportNoRowsSelected: '请至少勾选一行后再提交',
+  ImportRechooseFile: '重新选择文件',
+  ImportColRowType: '行类型',
+  ImportRowTypeOrg: '组织',
+  ImportRowTypeUser: '用户',
+  ImportColParentOrg: '上级组织',
+  ImportNestedUsers: '下属用户',
+  ImportColUserCount: '用户数',
+  ImportOrgRefOnly: '仅用户',
+  ImportColUserName: '用户姓名',
+  ImportColIsLeader: '负责人',
+  Yes: '是',
+  No: '否',
+  ImportColEmail: '邮箱',
+  ImportColPhone: '手机',
+  ImportTenantIdMissing: '缺少租户信息，无法导入',
+  ImportDragText: '点击或拖拽 .xlsx / .xls 文件到此',
+  ImportSuccess: '导入完成：新建组织 {createdOrgs} 个，新建用户 {createdUsers} 人，复用用户 {reusedUsers} 人，共 {rowCount} 行',
+  DownloadImportTemplate: '下载示例 Excel 模板',
   RoleName: '角色名称',
   RoleCode: '角色编码',
   RoleDescription: '角色描述',
   SharedGroupName: '共享组名称',
+  SharedGroupModulesLabel: '共享模块',
+  SharedGroupModulesHint: '仅展示权限配置中已开启数据权限的模块；未配置数据权限的模块不会出现在此列表。',
+  SharedGroupDataSources: '数据来源',
+  SharedGroupDataSourcesDesc: '可选择多个租户用户，共享其产生的数据范围（与后端数据来源关联表一致）。',
+  SharedGroupMembers: '共享组成员',
+  SharedGroupMembersDesc: '可访问本共享组配置的成员（租户用户）。',
+  SharedGroupModulesEmpty: '暂无开启数据权限的模块，请在权限配置中为对应模块开启数据权限。',
+  SharedGroupAccessRead: '只读',
+  SharedGroupAccessWrite: '读写',
+  SharedGroupDataScopeRange: '权限范围',
+  DataScopeTypeOwner: '本人及下属',
+  DataScopeTypeOrg: '本部门',
+  DataScopeTypeOrgSubtree: '本部门及子部门',
+  DataScopeTypeSelf: '仅本人',
 
   // UserList Actions
   AddUser: '添加用户',
   EditUser: '编辑用户',
   InviteUser: '邀请用户',
+  InviteUserHint: '将下方邀请链接发送给用户，对方打开链接即可加入当前租户；也可一键发送邀请邮件（需用户已填写邮箱）。',
   InviteLink: '邀请链接',
   SendInviteEmail: '发送邀请邮件',
   CopyInviteLink: '复制邀请链接',
@@ -125,6 +197,13 @@ const locale = {
   CloseUserConfirm: '确定要关闭用户吗？关闭后他将不能使用当前租户',
   DeleteUserConfirm: '确定要删除用户吗？删除后他将不能使用当前租户',
 
+  // TenantUserSelect
+  TenantUserSelectOrgTitle: '组织架构',
+  TenantUserSelectUserTitle: '选择成员',
+  TenantUserSelectPlaceholder: '请选择成员',
+  TenantUserSelectSelectOrgFirst: '请先在左侧选择组织',
+  TenantUserSelectEmptyOrg: '暂无组织数据',
+
   // Role
   SystemType: '系统',
   CustomType: '自定义',
diff --git a/src/components/TenantAdmin/List/getColumns.js b/src/components/TenantAdmin/List/getColumns.js
index ba0087b..a7feca8 100644
--- a/src/components/TenantAdmin/List/getColumns.js
+++ b/src/components/TenantAdmin/List/getColumns.js
@@ -1,3 +1,19 @@
+const resolveTenantRowId = item => {
+  const id = item?.id ?? item?.tenantId;
+  if (id == null || id === '') {
+    return null;
+  }
+  return String(id);
+};
+
+const goTenantDetail = (navigate, colItem) => {
+  const id = resolveTenantRowId(colItem);
+  if (!id || !navigate) {
+    return;
+  }
+  navigate(`detail?id=${encodeURIComponent(id)}`);
+};
+
 const getColumns = ({ navigate, formatMessage }) => {
   return [
     {
@@ -7,7 +23,7 @@ const getColumns = ({ navigate, formatMessage }) => {
       primary: true,
       hover: true,
       onClick: ({ colItem }) => {
-        navigate(`detail?id=${colItem.id}`);
+        goTenantDetail(navigate, colItem);
       }
     },
     {
@@ -15,7 +31,7 @@ const getColumns = ({ navigate, formatMessage }) => {
       title: formatMessage({ id: 'Name' }),
       type: 'mainInfo',
       onClick: ({ colItem }) => {
-        navigate(`detail?id=${colItem.id}`);
+        goTenantDetail(navigate, colItem);
       }
     },
     {
diff --git a/src/components/TenantAdmin/List/index.js b/src/components/TenantAdmin/List/index.js
index fe7b76b..e02aa5a 100644
--- a/src/components/TenantAdmin/List/index.js
+++ b/src/components/TenantAdmin/List/index.js
@@ -84,7 +84,7 @@ const ListInner = createWithRemoteLoader({
         )
       }}
       columns={[
-        ...getColumns({ navigate: path => navigate(`${baseUrl}/${path}`), formatMessage }),
+        ...getColumns({ navigate, formatMessage }),
         {
           name: 'options',
           title: formatMessage({ id: 'Operation' }),
diff --git a/src/components/TenantAdmin/TabDetail/Org/index.js b/src/components/TenantAdmin/TabDetail/Org/index.js
index 4753fbc..2ff1a0a 100644
--- a/src/components/TenantAdmin/TabDetail/Org/index.js
+++ b/src/components/TenantAdmin/TabDetail/Org/index.js
@@ -1,12 +1,14 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { OrgInfo } from '@components/Tenant';
 import Fetch from '@kne/react-fetch';
+import { useSearchParams } from 'react-router-dom';
 
 const Org = createWithRemoteLoader({
   modules: ['components-core:Global@usePreset']
 })(({ remoteModules, tenant }) => {
   const [usePreset] = remoteModules;
   const { apis } = usePreset();
+  const [searchParams, setSearchParams] = useSearchParams();
   return (
     <Fetch
       {...Object.assign({}, apis.tenantAdmin.orgList, {
@@ -18,8 +20,20 @@ const Org = createWithRemoteLoader({
         return (
           <OrgInfo
             data={data}
+            tenantId={tenant.id}
             companyName={tenant?.tenantCompany?.name}
             onSuccess={reload}
+            onViewUsers={org => {
+              const next = new URLSearchParams(searchParams);
+              next.set('tab', 'user');
+              next.set('tenantOrgId', String(org.id));
+              if (org.name) {
+                next.set('orgName', org.name);
+              } else {
+                next.delete('orgName');
+              }
+              setSearchParams(next);
+            }}
             apis={{
               create: Object.assign({}, apis.tenantAdmin.orgCreate, {
                 data: { tenantId: tenant.id }
@@ -29,7 +43,11 @@ const Org = createWithRemoteLoader({
               }),
               remove: Object.assign({}, apis.tenantAdmin.orgRemove, {
                 data: { tenantId: tenant.id }
-              })
+              }),
+              userList: Object.assign({}, apis.tenantAdmin.userList, {
+                params: { tenantId: tenant.id }
+              }),
+              import: apis.tenantAdmin.orgBatchImport
             }}
           />
         );
diff --git a/src/components/TenantAdmin/TabDetail/Permission/index.js b/src/components/TenantAdmin/TabDetail/Permission/index.js
index 9940151..b840081 100644
--- a/src/components/TenantAdmin/TabDetail/Permission/index.js
+++ b/src/components/TenantAdmin/TabDetail/Permission/index.js
@@ -58,6 +58,38 @@ const Permission = createWithRemoteLoader({
               tenantId: tenant.id
             }
           })
+        },
+        userList: merge({}, apis.tenantAdmin.userList, {
+          params: {
+            tenantId: tenant.id
+          }
+        }),
+        sharedGroup: {
+          list: merge({}, apis.tenantAdmin.sharedGroup.list, {
+            params: {
+              tenantId: tenant.id
+            }
+          }),
+          create: merge({}, apis.tenantAdmin.sharedGroup.create, {
+            data: {
+              tenantId: tenant.id
+            }
+          }),
+          save: merge({}, apis.tenantAdmin.sharedGroup.save, {
+            data: {
+              tenantId: tenant.id
+            }
+          }),
+          remove: merge({}, apis.tenantAdmin.sharedGroup.remove, {
+            data: {
+              tenantId: tenant.id
+            }
+          }),
+          setStatus: merge({}, apis.tenantAdmin.sharedGroup.setStatus, {
+            data: {
+              tenantId: tenant.id
+            }
+          })
         }
       }}
     />
diff --git a/src/components/TenantAdmin/TabDetail/User/index.js b/src/components/TenantAdmin/TabDetail/User/index.js
index 9481750..47e1ae2 100644
--- a/src/components/TenantAdmin/TabDetail/User/index.js
+++ b/src/components/TenantAdmin/TabDetail/User/index.js
@@ -1,25 +1,31 @@
 import { createWithRemoteLoader } from '@kne/remote-loader';
 import { UserList } from '@components/Tenant';
+import get from 'lodash/get';
 
 const User = createWithRemoteLoader({
   modules: ['components-core:Global@usePreset']
 })(({ remoteModules, tenant }) => {
   const [usePreset] = remoteModules;
-  const { apis } = usePreset();
+  const { apis, plugins } = usePreset();
+  const getUserApis = get(plugins, 'tenantAdmin.getUserApis');
+  const pluginApis = typeof getUserApis === 'function' ? getUserApis({ tenantId: tenant.id, tenant, apis }) : {};
 
   return (
     <UserList
-      apis={{
-        list: Object.assign({}, apis.tenantAdmin.userList, { params: { tenantId: tenant.id } }),
-        orgList: Object.assign({}, apis.tenantAdmin.orgList, { params: { tenantId: tenant.id } }),
-        roleList: Object.assign({}, apis.tenantAdmin.role.list, { params: { tenantId: tenant.id } }),
-        create: Object.assign({}, apis.tenantAdmin.userCreate, { data: { tenantId: tenant.id } }),
-        save: Object.assign({}, apis.tenantAdmin.userSave, { data: { tenantId: tenant.id } }),
-        remove: Object.assign({}, apis.tenant.userRemove, { data: { tenantId: tenant.id } }),
-        setStatus: Object.assign({}, apis.tenantAdmin.userSetStatus, { data: { tenantId: tenant.id } }),
-        inviteToken: Object.assign({}, apis.tenantAdmin.userInviteToken, { params: { tenantId: tenant.id } }),
-        userInviteMessage: Object.assign({}, apis.tenantAdmin.userInviteMessage, { data: { tenantId: tenant.id } })
-      }}
+      apis={Object.assign(
+        {
+          list: Object.assign({}, apis.tenantAdmin.userList, { params: { tenantId: tenant.id } }),
+          orgList: Object.assign({}, apis.tenantAdmin.orgList, { params: { tenantId: tenant.id } }),
+          roleList: Object.assign({}, apis.tenantAdmin.role.list, { params: { tenantId: tenant.id } }),
+          create: Object.assign({}, apis.tenantAdmin.userCreate, { data: { tenantId: tenant.id } }),
+          save: Object.assign({}, apis.tenantAdmin.userSave, { data: { tenantId: tenant.id } }),
+          remove: Object.assign({}, apis.tenantAdmin.userRemove, { data: { tenantId: tenant.id } }),
+          setStatus: Object.assign({}, apis.tenantAdmin.userSetStatus, { data: { tenantId: tenant.id } }),
+          inviteToken: Object.assign({}, apis.tenantAdmin.userInviteToken, { params: { tenantId: tenant.id } }),
+          userInviteMessage: Object.assign({}, apis.tenantAdmin.userInviteMessage, { data: { tenantId: tenant.id } })
+        },
+        pluginApis
+      )}
     />
   );
 });
diff --git a/src/components/TenantAdmin/TabDetail/index.js b/src/components/TenantAdmin/TabDetail/index.js
index eca8948..f2b8ecc 100644
--- a/src/components/TenantAdmin/TabDetail/index.js
+++ b/src/components/TenantAdmin/TabDetail/index.js
@@ -91,8 +91,9 @@ const TabDetailInner = createWithRemoteLoader({
             stateBar={{
               activeKey,
               onChange: key => {
-                searchParams.set('tab', key);
-                setSearchParams(searchParams.toString());
+                const next = new URLSearchParams(searchParams);
+                next.set('tab', key);
+                setSearchParams(next);
               },
               stateOption
             }}>
diff --git a/src/mockPreset/index.js b/src/mockPreset/index.js
index 6926e56..5c3691c 100644
--- a/src/mockPreset/index.js
+++ b/src/mockPreset/index.js
@@ -22,6 +22,81 @@ import messageMangerData from './message-manger-data.json';
 
 export { taskList, signatureList, intlAdminData, adminUserList, userInfo, superAdminInfo, groupList, tenantData, tenantAdminData, messageQueueList, deadLetterList, traceList, messageMangerData };
 
+const collectOrgSubtreeIds = (orgs, rootId) => {
+  const ids = new Set([String(rootId)]);
+  let changed = true;
+  while (changed) {
+    changed = false;
+    for (const org of orgs) {
+      const id = String(org.id);
+      const parentId = org.parentId != null && org.parentId !== '' ? String(org.parentId) : null;
+      if (parentId && ids.has(parentId) && !ids.has(id)) {
+        ids.add(id);
+        changed = true;
+      }
+    }
+  }
+  return [...ids];
+};
+
+const normalizeTenantUserStatusFilter = status => {
+  const s = status != null ? String(status).trim() : '';
+  if (s === 'active') return 'open';
+  if (s === 'inactive') return 'closed';
+  if (s === 'open' || s === 'closed') return s;
+  return '';
+};
+
+const loadFilteredTenantUserList = ({ params } = {}) =>
+  import('./tenant-data.json').then(({ default: data }) => {
+    const filter = params?.filter || {};
+    let pageData = data.userList?.pageData || [];
+    if (filter.tenantOrgId) {
+      const orgIds = collectOrgSubtreeIds(data.orgList || [], filter.tenantOrgId);
+      pageData = pageData.filter(item => {
+        const ids = new Set();
+        if (Array.isArray(item.tenantOrgIds)) {
+          item.tenantOrgIds.forEach(id => ids.add(String(id)));
+        }
+        if (item.tenantOrg?.id) {
+          ids.add(String(item.tenantOrg.id));
+        }
+        return [...ids].some(id => orgIds.includes(id));
+      });
+    }
+    const statusFilter = normalizeTenantUserStatusFilter(filter.status);
+    if (statusFilter) {
+      pageData = pageData.filter(item => item.status === statusFilter);
+    }
+    if (filter.keyword) {
+      const keyword = String(filter.keyword).toLowerCase();
+      pageData = pageData.filter(item =>
+        [item.name, item.email, item.phone].filter(Boolean).join(' ').toLowerCase().includes(keyword)
+      );
+    }
+    return { pageData, totalCount: pageData.length };
+  });
+
+const loadFilteredRoleList = ({ params } = {}) =>
+  import('./tenant-data.json').then(({ default: data }) => {
+    const filter = params?.filter || {};
+    let pageData = data.roleList.pageData || [];
+    if (filter.type) {
+      pageData = pageData.filter(item => item.type === filter.type);
+    }
+    if (filter.keyword) {
+      const keyword = String(filter.keyword).toLowerCase();
+      pageData = pageData.filter(
+        item =>
+          [item.name, item.code, item.description].filter(Boolean).join(' ').toLowerCase().indexOf(keyword) >= 0
+      );
+    }
+    if (filter.status) {
+      pageData = pageData.filter(item => item.status === filter.status);
+    }
+    return { pageData, totalCount: pageData.length };
+  });
+
 const apis = merge({}, getApis(), {
   task: {
     list: {
@@ -414,10 +489,14 @@ const apis = merge({}, getApis(), {
     orgRemove: {
       loader: () => ({ code: 0 })
     },
+    orgBatchImport: {
+      loader: () => ({
+        code: 0,
+        data: { createdOrgs: 2, createdUsers: 1, reusedUsers: 0, rowCount: 2 }
+      })
+    },
     userList: {
-      loader: () => {
-        return import('./tenant-data.json').then(({ default: data }) => data.userList);
-      }
+      loader: loadFilteredTenantUserList
     },
     userCreate: {
       loader: () => ({ id: `user-${Date.now()}` })
@@ -439,9 +518,7 @@ const apis = merge({}, getApis(), {
     },
     role: {
       list: {
-        loader: () => {
-          return import('./tenant-data.json').then(({ default: data }) => data.roleList);
-        }
+        loader: loadFilteredRoleList
       },
       create: {
         loader: () => ({ id: `role-${Date.now()}` })
@@ -464,6 +541,25 @@ const apis = merge({}, getApis(), {
         loader: () => ({ code: 0 })
       }
     },
+    sharedGroup: {
+      list: {
+        loader: () => {
+          return import('./tenant-data.json').then(({ default: data }) => data.sharedGroupList);
+        }
+      },
+      create: {
+        loader: () => ({ id: `sg-${Date.now()}` })
+      },
+      save: {
+        loader: () => ({ code: 0 })
+      },
+      setStatus: {
+        loader: () => ({ code: 0 })
+      },
+      remove: {
+        loader: () => ({ code: 0 })
+      }
+    },
     permission: {
       list: {
         loader: () => {
@@ -473,9 +569,7 @@ const apis = merge({}, getApis(), {
     },
     // 旧名称别名，兼容示例文件
     getUserList: {
-      loader: () => {
-        return import('./tenant-data.json').then(({ default: data }) => data.userList);
-      }
+      loader: loadFilteredTenantUserList
     },
     createUser: {
       loader: () => ({ id: `user-${Date.now()}` })
@@ -487,9 +581,7 @@ const apis = merge({}, getApis(), {
       loader: () => ({ code: 0 })
     },
     getRoleList: {
-      loader: () => {
-        return import('./tenant-data.json').then(({ default: data }) => data.roleList);
-      }
+      loader: loadFilteredRoleList
     },
     createRole: {
       loader: () => ({ id: `role-${Date.now()}` })
@@ -508,16 +600,44 @@ const apis = merge({}, getApis(), {
     savePermission: {
       loader: () => ({ code: 0 })
     },
+    getSharedGroupList: {
+      loader: () => {
+        return import('./tenant-data.json').then(({ default: data }) => data.sharedGroupList);
+      }
+    },
+    createSharedGroup: {
+      loader: () => ({ id: `sg-${Date.now()}` })
+    },
+    saveSharedGroup: {
+      loader: () => ({ code: 0 })
+    },
+    removeSharedGroup: {
+      loader: () => ({ code: 0 })
+    },
+    setSharedGroupStatus: {
+      loader: () => ({ code: 0 })
+    },
     parseJoinToken: {
       loader: ({ data }) => {
         if (!data || !data.token || data.token === 'invalid') {
           return null;
         }
-        return import('./tenant-data.json').then(({ default: data }) => ({
-          tenant: data.tenantList.pageData[0],
-          tenantUser: data.tenantUserInfo,
-          company: data.company
-        }));
+        return import('./tenant-data.json').then(({ default: data }) => {
+          const sampleUser = data.userList.pageData[0];
+          const positionName = sampleUser?.position;
+          return {
+            tenant: data.tenantList.pageData[0],
+            tenantUser: Object.assign({}, data.tenantUserInfo, {
+              roles: sampleUser?.roles,
+              position: positionName,
+              options: positionName ? { position: positionName } : {},
+              tenantOrg: sampleUser?.tenantOrg,
+              tenantOrgs: sampleUser?.tenantOrgs
+            }),
+            company: data.company,
+            positionList: positionName ? [{ id: 'mock-position', name: positionName }] : []
+          };
+        });
       }
     },
     join: {
@@ -579,10 +699,14 @@ const apis = merge({}, getApis(), {
     orgRemove: {
       loader: () => ({ code: 0 })
     },
+    orgBatchImport: {
+      loader: () => ({
+        code: 0,
+        data: { createdOrgs: 2, createdUsers: 1, reusedUsers: 0, rowCount: 2 }
+      })
+    },
     userList: {
-      loader: () => {
-        return import('./tenant-data.json').then(({ default: data }) => data.userList);
-      }
+      loader: loadFilteredTenantUserList
     },
     userCreate: {
       loader: () => ({ id: `user-${Date.now()}` })
@@ -601,9 +725,7 @@ const apis = merge({}, getApis(), {
     },
     role: {
       list: {
-        loader: () => {
-          return import('./tenant-data.json').then(({ default: data }) => data.roleList);
-        }
+        loader: loadFilteredRoleList
       },
       create: {
         loader: () => ({ id: `role-${Date.now()}` })
@@ -626,6 +748,25 @@ const apis = merge({}, getApis(), {
         loader: () => ({ code: 0 })
       }
     },
+    sharedGroup: {
+      list: {
+        loader: () => {
+          return import('./tenant-data.json').then(({ default: data }) => data.sharedGroupList);
+        }
+      },
+      create: {
+        loader: () => ({ id: `sg-${Date.now()}` })
+      },
+      save: {
+        loader: () => ({ code: 0 })
+      },
+      setStatus: {
+        loader: () => ({ code: 0 })
+      },
+      remove: {
+        loader: () => ({ code: 0 })
+      }
+    },
     permission: {
       list: {
         loader: () => {
diff --git a/src/mockPreset/tenant-data.json b/src/mockPreset/tenant-data.json
index d84f3b8..45cb503 100644
--- a/src/mockPreset/tenant-data.json
+++ b/src/mockPreset/tenant-data.json
@@ -2,7 +2,9 @@
   "company": {
     "id": 1,
     "name": "科技创新有限公司",
+    "fullName": "北京科技创新有限公司",
     "logo": "https://api.dicebear.com/7.x/identicon/svg?seed=company",
+    "companyTags": [{ "label": "高新技术企业" }, { "label": "双软认证" }, { "label": "专精特新" }],
     "description": "一家专注于人工智能和云计算技术研发的高新技术企业",
     "industry": "信息技术",
     "scale": "100-500人",
@@ -14,15 +16,25 @@
     "developmentHistory": [
       {
         "time": "2018-06-15",
-        "event": "成立于北京中关村，专注于企业级软件解决方案"
+        "event": "成立于北京中关村，专注于企业级软件解决方案",
+        "images": [
+          "https://images.unsplash.com/photo-1497366216548-37526070297c?w=960&q=80"
+        ]
       },
       {
         "time": "2020-06-01",
-        "event": "获得A轮融资"
+        "event": "获得A轮融资",
+        "images": [
+          "https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=960&q=80",
+          "https://images.unsplash.com/photo-1552664730-d307ca884978?w=960&q=80"
+        ]
       },
       {
         "time": "2022-01-01",
-        "event": "业务扩展至全国20个城市"
+        "event": "业务扩展至全国20个城市",
+        "images": [
+          "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=960&q=80"
+        ]
       }
     ],
     "teamDescription": [
@@ -45,14 +57,27 @@
         "description": "前知名企业产品负责人，10年产品管理经验，擅长企业级产品规划"
       }
     ],
-    "banner": "https://images.unsplash.com/photo-1497366216548-37526070297c?w=800"
+    "banners": [
+      "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&q=80",
+      "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1200&q=80",
+      "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&q=80"
+    ]
   },
   "orgList": [
     {
       "id": "dept-1",
       "name": "技术研发中心",
       "description": "负责公司核心产品的技术研发",
-      "parentId": null
+      "parentId": null,
+      "leaderUserId": "user-1",
+      "leader": {
+        "id": "user-1",
+        "name": "张伟",
+        "email": "zhangwei@tech-innovation.com",
+        "phone": "13800138001",
+        "avatar": "https://api.dicebear.com/7.x/avataaars/svg?seed=zhangwei",
+        "status": "open"
+      }
     },
     {
       "id": "dept-2",
@@ -122,7 +147,7 @@
         "position": "技术总监",
         "roles": [{ "id": "role-1", "name": "管理员" }],
         "tenantOrg": { "id": "dept-1", "name": "技术研发中心" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2018-07-01"
       },
       {
@@ -135,7 +160,7 @@
         "position": "前端架构师",
         "roles": [{ "id": "role-3", "name": "普通员工" }],
         "tenantOrg": { "id": "dept-2", "name": "前端开发部" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2019-03-15"
       },
       {
@@ -148,7 +173,7 @@
         "position": "后端开发工程师",
         "roles": [{ "id": "role-3", "name": "普通员工" }],
         "tenantOrg": { "id": "dept-3", "name": "后端开发部" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2020-06-01"
       },
       {
@@ -161,7 +186,7 @@
         "position": "产品经理",
         "roles": [{ "id": "role-2", "name": "部门经理" }],
         "tenantOrg": { "id": "dept-5", "name": "产品设计中心" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2020-08-15"
       },
       {
@@ -174,7 +199,7 @@
         "position": "算法工程师",
         "roles": [{ "id": "role-3", "name": "普通员工" }],
         "tenantOrg": { "id": "dept-4", "name": "AI算法部" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2021-01-10"
       },
       {
@@ -187,7 +212,7 @@
         "position": "UI设计师",
         "roles": [{ "id": "role-3", "name": "普通员工" }],
         "tenantOrg": { "id": "dept-7", "name": "设计部" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2021-05-20"
       },
       {
@@ -200,7 +225,7 @@
         "position": "市场专员",
         "roles": [{ "id": "role-3", "name": "普通员工" }],
         "tenantOrg": { "id": "dept-9", "name": "市场部" },
-        "status": "inactive",
+        "status": "closed",
         "joinDate": "2022-02-01"
       },
       {
@@ -213,7 +238,7 @@
         "position": "客服主管",
         "roles": [{ "id": "role-2", "name": "部门经理" }],
         "tenantOrg": { "id": "dept-10", "name": "客服部" },
-        "status": "active",
+        "status": "open",
         "joinDate": "2022-09-15"
       }
     ]
@@ -227,7 +252,7 @@
         "name": "管理员",
         "description": "拥有系统全部权限",
         "type": "system",
-        "status": "active",
+        "status": "open",
         "userCount": 1
       },
       {
@@ -236,7 +261,7 @@
         "name": "部门经理",
         "description": "管理部门内部事务和人员",
         "type": "custom",
-        "status": "active",
+        "status": "open",
         "userCount": 3
       },
       {
@@ -245,7 +270,7 @@
         "name": "普通员工",
         "description": "基础员工权限",
         "type": "system",
-        "status": "active",
+        "status": "open",
         "userCount": 15
       },
       {
@@ -254,7 +279,7 @@
         "name": "访客",
         "description": "仅可查看公开信息",
         "type": "custom",
-        "status": "inactive",
+        "status": "closed",
         "userCount": 0
       }
     ]
@@ -336,6 +361,18 @@
         {
           "code": "user",
           "name": "用户管理",
+          "modules": [
+            {
+              "code": "ops",
+              "name": "运营数据",
+              "permissions": [{ "code": "view", "name": "查看" }],
+              "dataScope": {
+                "open": true,
+                "list": ["read", "write"],
+                "type": "owner"
+              }
+            }
+          ],
           "permissions": [
             { "code": "view", "name": "查看用户" },
             { "code": "create", "name": "创建用户" },
@@ -356,6 +393,79 @@
         {
           "code": "setting",
           "name": "系统设置",
+          "modules": [
+            {
+              "code": "biz-center",
+              "name": "业务中心",
+              "modules": [
+                {
+                  "code": "order",
+                  "name": "订单",
+                  "permissions": [{ "code": "view", "name": "查看" }],
+                  "dataScope": {
+                    "open": true,
+                    "list": ["read", "write"],
+                    "type": "owner"
+                  }
+                },
+                {
+                  "code": "crm",
+                  "name": "客户",
+                  "modules": [
+                    {
+                      "code": "lead",
+                      "name": "线索",
+                      "permissions": [{ "code": "view", "name": "查看" }],
+                      "dataScope": {
+                        "open": true,
+                        "list": ["read"],
+                        "type": "org"
+                      }
+                    }
+                  ],
+                  "permissions": [{ "code": "view", "name": "查看" }]
+                }
+              ],
+              "permissions": []
+            },
+            {
+              "code": "biz-data",
+              "name": "业务数据",
+              "modules": [
+                {
+                  "code": "order",
+                  "name": "订单",
+                  "permissions": [{ "code": "view", "name": "查看" }],
+                  "dataScope": {
+                    "open": true,
+                    "list": ["read", "write"],
+                    "type": "owner"
+                  }
+                },
+                {
+                  "code": "report",
+                  "name": "报表",
+                  "permissions": [{ "code": "view", "name": "查看" }],
+                  "dataScope": {
+                    "open": true,
+                    "list": ["read"],
+                    "type": "orgSubtree"
+                  }
+                }
+              ],
+              "permissions": []
+            },
+            {
+              "code": "finance",
+              "name": "财务",
+              "permissions": [{ "code": "view", "name": "查看" }],
+              "dataScope": {
+                "open": true,
+                "list": ["read", "write"],
+                "type": "org"
+              }
+            }
+          ],
           "permissions": [
             { "code": "company-setting", "name": "公司设置" },
             { "code": "org", "name": "组织架构" },
@@ -384,6 +494,36 @@
       { "id": "perm-12", "code": "setting:user-manager", "name": "用户管理", "module": "系统设置", "description": "管理系统用户" }
     ]
   },
+  "sharedGroupList": {
+    "totalCount": 1,
+    "pageData": [
+      {
+        "id": "sg-1",
+        "name": "研发数据共享",
+        "description": "演示用共享组：含数据权限模块与数据来源、成员",
+        "status": "open",
+        "sharedModules": [
+          { "moduleCode": "setting:biz-center:order", "access": "read" },
+          { "moduleCode": "setting:biz-data:report", "access": "read" },
+          { "moduleCode": "user:ops", "access": "write" }
+        ],
+        "dataSources": [
+          {
+            "id": "ds-1",
+            "tenantUserId": "user-2",
+            "tenantUser": { "id": "user-2", "name": "李娜" }
+          }
+        ],
+        "members": [
+          {
+            "id": "m-1",
+            "tenantUserId": "user-1",
+            "tenantUser": { "id": "user-1", "name": "张伟" }
+          }
+        ]
+      }
+    ]
+  },
   "tenantUserInfo": {
     "id": "tu-1",
     "name": "张伟",