From f1cbdcaef4b62352fd836b1c1bfc5a1951d22649 Mon Sep 17 00:00:00 2001
From: v_yutyi <a670003190@qq.com>
Date: Mon, 29 Apr 2024 11:03:51 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=A8=E7=A7=9F=E6=88=B7=E5=8D=8F?=
 =?UTF-8?q?=E5=90=8C=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2=20#1684=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=206986?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layouts/MainBreadcrumbs.vue    |   9 +-
 src/pages/src/components/layouts/MainView.vue |  26 +-
 src/pages/src/router/index.ts                 |   1 +
 src/pages/src/router/router.d.ts              |   1 +
 src/pages/src/store/user.ts                   |   4 +
 src/pages/src/views/Header.vue                |  14 +-
 src/pages/src/views/setting/FieldSetting.vue  |   4 +-
 src/pages/src/views/setting/LoginSetting.vue  |   1 -
 .../src/views/setting/auth-config/Local.vue   |   2 +-
 .../cross-tenant-collaboration/index.vue      | 284 ++--------
 .../{ => my-share}/OperationDetails.vue       |  48 +-
 .../{ => my-share}/ViewDetails.vue            |  27 +-
 .../my-share/index.vue                        | 268 ++++++++++
 .../other-share/OperationDetails.vue          | 343 ++++++++++++
 .../other-share/index.vue                     | 489 ++++++++++++++++++
 .../views/setting/data-source/ConfigList.vue  |  18 +-
 .../setting/data-source/NewDataSource.vue     |  17 +-
 src/pages/src/views/setting/index.vue         |   2 +-
 .../src/views/tenant/OperationDetails.vue     |   5 +-
 src/pages/src/views/tenant/index.vue          |  27 +-
 .../src/views/virtual-account/EditDetails.vue |   2 +-
 src/pages/src/views/virtual-account/index.vue |  10 +-
 22 files changed, 1242 insertions(+), 360 deletions(-)
 rename src/pages/src/views/setting/cross-tenant-collaboration/{ => my-share}/OperationDetails.vue (84%)
 rename src/pages/src/views/setting/cross-tenant-collaboration/{ => my-share}/ViewDetails.vue (82%)
 create mode 100644 src/pages/src/views/setting/cross-tenant-collaboration/my-share/index.vue
 create mode 100644 src/pages/src/views/setting/cross-tenant-collaboration/other-share/OperationDetails.vue
 create mode 100644 src/pages/src/views/setting/cross-tenant-collaboration/other-share/index.vue

diff --git a/src/pages/src/components/layouts/MainBreadcrumbs.vue b/src/pages/src/components/layouts/MainBreadcrumbs.vue
index bea78e23b..00c00409c 100644
--- a/src/pages/src/components/layouts/MainBreadcrumbs.vue
+++ b/src/pages/src/components/layouts/MainBreadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-breadcrumbs">
+  <div :class="['main-breadcrumbs', { 'hidden-box-shadow': hiddenBoxShadow }]">
     <slot>
       <i
         v-if="showBack"
@@ -31,6 +31,9 @@ const current = computed(() => store.breadCrumbsTitle || route.meta.navName);
  * back control
  */
 const showBack = computed(() => route.meta.showBack);
+
+const hiddenBoxShadow = computed(() => route.meta.hiddenBoxShadow);
+
 const handleBack = () => {
   const { back } = window.history.state;
   if (back) {
@@ -75,4 +78,8 @@ const handleBack = () => {
       margin-right: 4px;
     }
   }
+
+  .hidden-box-shadow {
+    box-shadow: none !important;
+  }
 </style>
diff --git a/src/pages/src/components/layouts/MainView.vue b/src/pages/src/components/layouts/MainView.vue
index 7fa5dda16..cbde19237 100644
--- a/src/pages/src/components/layouts/MainView.vue
+++ b/src/pages/src/components/layouts/MainView.vue
@@ -14,7 +14,9 @@
           class="main-container__view user-scroll-y user-scroll-x"
           :class="[{
             'pd-24': mainViewStore.hasPadding,
-            'has-breadcrumbs': !mainViewStore.customBreadcrumbs
+            'has-breadcrumbs': !mainViewStore.customBreadcrumbs,
+            'has-alert': userStore.showAlert,
+            'overflow-hidden': hiddenBoxShadow,
           }]">
           <RouterView />
         </div>
@@ -23,18 +25,22 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="ts"> import { computed } from 'vue';
 import MainBreadcrumbs from './MainBreadcrumbs.vue';
 
-import { useMainViewStore, useMenu } from '@/store';
+import { useRoute } from 'vue-router';
+import { useMainViewStore, useMenu, useUser } from '@/store';
 const menuStore = useMenu();
 const mainViewStore = useMainViewStore();
+const userStore = useUser();
+const route = useRoute();
+
+const hiddenBoxShadow = computed(() => route.meta.hiddenBoxShadow);
 </script>
 
 <style lang="less">
 .main-container {
   display: flex;
-  height: calc(100vh - 52px);
 }
 
 .main-container-content {
@@ -50,10 +56,20 @@ const mainViewStore = useMainViewStore();
   background-color: #f5f7fa;
 
   &.has-breadcrumbs {
-    height: calc(100% - 52px);
+    height: calc(100vh - 104px);
   }
 }
 
+.has-alert {
+  &.has-breadcrumbs {
+    height: calc(100vh - 144px);
+  }
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .main-menu {
   position: relative;
   z-index: 101;
diff --git a/src/pages/src/router/index.ts b/src/pages/src/router/index.ts
index 8c8be7951..ee12b989c 100644
--- a/src/pages/src/router/index.ts
+++ b/src/pages/src/router/index.ts
@@ -68,6 +68,7 @@ export default createRouter({
             routeParentName: 'setting',
             navName: t('跨租户协同'),
             isMenu: true,
+            hiddenBoxShadow: true,
           },
           component: () => import('@/views/setting/cross-tenant-collaboration/index.vue'),
         },
diff --git a/src/pages/src/router/router.d.ts b/src/pages/src/router/router.d.ts
index cecf56e1e..573100631 100644
--- a/src/pages/src/router/router.d.ts
+++ b/src/pages/src/router/router.d.ts
@@ -8,6 +8,7 @@ declare module 'vue-router' {
     navName?: string, // 设置面包屑 name
     isMenu?: boolean, // 判断是否为 bk-menu 导航，若是则不显示返回按钮
     showBack?: boolean, // 用于判断是否显示面包屑返回按钮
+    hiddenBoxShadow?: boolean, // 是否隐藏 box-shadow
   }
 }
 
diff --git a/src/pages/src/store/user.ts b/src/pages/src/store/user.ts
index bbfea6458..4edc524d6 100644
--- a/src/pages/src/store/user.ts
+++ b/src/pages/src/store/user.ts
@@ -7,10 +7,14 @@ export const useUser = defineStore('user', {
       username: '',
       avatar_url: '',
     },
+    showAlert: false, // 消息通知显示状态
   }),
   actions: {
     setUser(user: IUser) {
       this.user = user;
     },
+    setShowAlert(status: boolean) {
+      this.showAlert = status;
+    },
   },
 });
diff --git a/src/pages/src/views/Header.vue b/src/pages/src/views/Header.vue
index 01967f63e..f3176f271 100644
--- a/src/pages/src/views/Header.vue
+++ b/src/pages/src/views/Header.vue
@@ -3,7 +3,7 @@
     <!-- 消息通知 -->
     <NoticeComponent :api-url="apiUrl" @show-alert-change="showAlertChange" />
     <bk-navigation
-      :class="['main-navigation', { 'has-alert': showAlert}]"
+      :class="['main-navigation', { 'has-alert': userStore.showAlert }]"
       :hover-width="240"
       navigation-type="top-bottom"
       :need-menu="false"
@@ -137,7 +137,7 @@ import '@blueking/release-note/dist/vue3-light.css';
 import { logout } from '@/common/auth';
 import I18n, { t } from '@/language/index';
 import router from '@/router';
-import { useUser } from '@/store/user';
+import { useUser } from '@/store';
 import { logoConvert } from '@/utils';
 import { getVersionLogs } from '@/http';
 
@@ -227,12 +227,9 @@ const feedbackUrl = window.BK_USER_FEEDBACK_URL;
 // 消息通知配置信息
 const apiUrl = `${window.AJAX_BASE_URL}/api/v1/web/notices/announcements/`;
 
-// 是否含有跑马灯类型公告
-const showAlert = ref(false);
-
 // 公告列表change事件回调
 const showAlertChange = (isShow: boolean) => {
-  showAlert.value = isShow;
+  userStore.setShowAlert(isShow);
 };
 
 // 版本日志配置信息
@@ -260,10 +257,6 @@ const openVersionLog = async () => {
 <style lang="less" scoped>
 .has-alert {
   height: calc(100vh - 40px);
-
-  :deep(.bk-navigation-wrapper) {
-    height: calc(100vh - 92px) !important;
-  }
 }
 
 .main-navigation {
@@ -339,6 +332,7 @@ const openVersionLog = async () => {
 
     .container-content {
       padding: 0 !important;
+      overflow-y: hidden !important;
     }
   }
 
diff --git a/src/pages/src/views/setting/FieldSetting.vue b/src/pages/src/views/setting/FieldSetting.vue
index 52ff5058d..72c2ff2dd 100644
--- a/src/pages/src/views/setting/FieldSetting.vue
+++ b/src/pages/src/views/setting/FieldSetting.vue
@@ -89,8 +89,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
+<script setup lang="ts"> import { bkTooltips as vBkTooltips, Message } from 'bkui-vue';
 import InfoBox from 'bkui-vue/lib/info-box';
 import { inject, onMounted, reactive, ref } from 'vue';
 
@@ -248,7 +247,6 @@ const fetchFieldList = () => {
 
 <style lang="less" scoped>
 .field-setting-content {
-  height: calc(100vh - 104px);
   padding: 24px;
 
   .add-field {
diff --git a/src/pages/src/views/setting/LoginSetting.vue b/src/pages/src/views/setting/LoginSetting.vue
index b39d9fb3f..ece5b9370 100644
--- a/src/pages/src/views/setting/LoginSetting.vue
+++ b/src/pages/src/views/setting/LoginSetting.vue
@@ -330,7 +330,6 @@ const handleDataSource = () => {
 
 <style lang="less" scoped>
 .login-setting-wrapper {
-  height: calc(100vh - 104px);
   padding: 24px;
 
   .login-setting-content {
diff --git a/src/pages/src/views/setting/auth-config/Local.vue b/src/pages/src/views/setting/auth-config/Local.vue
index a7041724a..d7dceb87f 100644
--- a/src/pages/src/views/setting/auth-config/Local.vue
+++ b/src/pages/src/views/setting/auth-config/Local.vue
@@ -423,7 +423,7 @@ const handleSubmit = async () => {
       emit('success', formData.config?.enable_password);
     } else {
       await postLocalIdps(params);
-      emit('success', false);
+      emit('success', formData.config?.enable_password);
     }
   } catch (e) {
     console.warn(e);
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/index.vue b/src/pages/src/views/setting/cross-tenant-collaboration/index.vue
index 10edf71fa..5921eb52f 100644
--- a/src/pages/src/views/setting/cross-tenant-collaboration/index.vue
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/index.vue
@@ -1,273 +1,53 @@
 <template>
-  <div v-bkloading="{ loading: isLoading, zIndex: 9 }" class="collaboration-wrapper">
-    <bk-button class="add" theme="primary" @click="handleClick('add')">
-      <i class="user-icon icon-add-2 mr8" />
-      {{ $t('新建') }}
-    </bk-button>
-    <bk-table
-      :data="tableData"
-      :border="['outer']"
-      :max-height="tableMaxHeight"
-      show-overflow-tooltip>
-      <template #empty>
-        <Empty
-          :is-data-empty="isDataEmpty"
-          :is-data-error="isDataError"
-          @handleUpdate="handleUpdate"
-        />
-      </template>
-      <bk-table-column prop="name" :label="$t('策略名称')">
-        <template #default="{ row }">
-          <bk-button text theme="primary" @click="handleClick('view', row)">
-            {{ row.name }}
-          </bk-button>
-        </template>
-      </bk-table-column>
-      <bk-table-column prop="target" :label="$t('目标租户')">
-        <template #default="{ row }">
-          <span>{{ row.target?.map(item => item.name).join(', ') || '--' }}</span>
-        </template>
-      </bk-table-column>
-      <bk-table-column prop="operator" :label="$t('创建人')"></bk-table-column>
-      <bk-table-column prop="created_at" :label="$t('创建时间')"></bk-table-column>
-      <bk-table-column prop="enable" :label="$t('启/停')" :filter="{ list: statusFilters }">
-        <template #default="{ row }">
-          <bk-switcher
-            theme="primary"
-            size="small"
-            v-model="row.enable"
-            @change="handleChange(row)"
-          />
-        </template>
-      </bk-table-column>
-      <bk-table-column :label="$t('操作')">
-        <template #default="{ row }">
-          <bk-button text theme="primary" class="mr8" @click="handleClick('edit', row)">
-            {{ $t('编辑') }}
-          </bk-button>
-          <span v-bk-tooltips="{ content: $t('删除前必须停用该策略'), disabled: !row.enable }">
-            <bk-button text theme="primary" :disabled="row.enable" @click="handleDelete(row)">
-              {{ $t('删除') }}
-            </bk-button>
-          </span>
-        </template>
-      </bk-table-column>
-    </bk-table>
-    <bk-sideslider
-      :ext-cls="['details-wrapper', { 'details-edit-wrapper': !isView }]"
-      :width="960"
-      :is-show="detailsConfig.isShow"
-      :title="detailsConfig.title"
-      :before-close="handleBeforeClose"
-      quick-close>
-      <template #header>
-        <span>{{ detailsConfig.title }}</span>
-        <div v-if="isView">
-          <bk-button
-            outline
-            theme="primary"
-            @click="handleClick('edit', detailsConfig.data)"
-          >{{ $t('编辑') }}</bk-button
-          >
-        </div>
-      </template>
-      <template #default>
-        <ViewDetails v-if="isView" :data="detailsConfig.data" />
-        <OperationDetails
-          v-else
-          :config="detailsConfig"
-          @handleCancelEdit="handleCancelEdit"
-        />
-      </template>
-    </bk-sideslider>
-  </div>
+  <bk-tab
+    class="tab-wrapper"
+    v-model:active="active"
+    type="unborder-card"
+  >
+    <bk-tab-panel
+      v-for="(item, index) in panels"
+      :key="index"
+      :name="item.name"
+      :label="item.label"
+    >
+      <MyShare v-if="active === 'local'" />
+      <OtherShare v-else />
+    </bk-tab-panel>
+  </bk-tab>
 </template>
 
 <script setup lang="ts">
-import { bkTooltips as vBkTooltips, InfoBox } from 'bkui-vue';
-import { computed, inject, onMounted, reactive, ref } from 'vue';
+import { ref } from 'vue';
 
-import OperationDetails from './OperationDetails.vue';
-import ViewDetails from './ViewDetails.vue';
+import MyShare from './my-share/index.vue';
+import OtherShare from './other-share/index.vue';
 
-import Empty from '@/components/Empty.vue';
-import { useTableMaxHeight } from '@/hooks';
 import { t } from '@/language/index';
 import { useMainViewStore } from '@/store';
 
 const store = useMainViewStore();
 store.customBreadcrumbs = false;
-const tableMaxHeight = useTableMaxHeight(202);
-const editLeaveBefore = inject('editLeaveBefore');
-const isLoading = ref(false);
-const tableData = ref([]);
-const isDataEmpty = ref(false);
-const isDataError = ref(false);
 
-onMounted(() => {
-  isLoading.value = true;
-  isDataEmpty.value = false;
-  isDataError.value = false;
-  setTimeout(() => {
-    tableData.value = getTableData();
-    if (tableData.value.length === 0) {
-      isDataEmpty.value = true;
-    }
-    isLoading.value = false;
-  }, 3000);
-});
-
-const getTableData = () => [
-  {
-    name: '腾讯公司协同1',
-    target: [
-      { id: 141456745634, name: '腾讯科技深圳总公司' },
-      { id: 24546732, name: '嘉为科技' },
-      { id: 234645753873, name: '联通总公司' },
-      { id: 23468888, name: '移动苏州分公司' },
-    ],
-    operator: 'admin',
-    created_at: '2021-01-01',
-    enable: false,
-  },
-  {
-    name: '腾讯公司协同2',
-    target: [
-      { id: 141456745634, name: '腾讯科技深圳总公司' },
-      { id: 24546732, name: '嘉为科技' },
-      { id: 234645753873, name: '联通总公司' },
-    ],
-    operator: 'admin',
-    created_at: '2021-01-01',
-    enable: true,
-  },
-  {
-    name: '腾讯公司协同3',
-    target: [
-      { id: 141456745634, name: '腾讯科技深圳总公司' },
-      { id: 24546732, name: '嘉为科技' },
-    ],
-    operator: 'admin',
-    created_at: '2021-01-01',
-    enable: true,
-  },
-];
-
-const statusFilters = [
-  { text: t('启用'), value: true },
-  { text: t('停用'), value: false },
+const panels = [
+  { name: 'local', label: t('我分享的') },
+  { name: 'other', label: t('其他租户分享的') },
 ];
-
-const handleDelete = (row) => {
-  InfoBox({
-    title: t('是否删除当前协同？'),
-    subTitle: t('删除后，目标租户的用户数据也会同步删除'),
-    onConfirm() {
-      console.log('删除成功', row);
-    },
-  });
-};
-
-const detailsConfig = reactive({
-  isShow: false,
-  title: '',
-  type: '',
-  data: {
-    name: 'name',
-    tenant_id: '',
-    tenant_name: '',
-    methods: 'organization',
-    sync_type: 'all',
-  },
-});
-
-const enumData = {
-  view: {
-    title: t('协同策略详情'),
-    type: 'view',
-  },
-  add: {
-    title: t('新建协同策略'),
-    type: 'add',
-  },
-  edit: {
-    title: t('编辑协同策略'),
-    type: 'edit',
-  },
-};
-
-const isView = computed(() => detailsConfig.type === 'view');
-
-const handleClick = (type: string, item?: any) => {
-  if (type !== 'add') {
-    detailsConfig.data = item;
-  }
-  detailsConfig.title = enumData[type].title;
-  detailsConfig.type = enumData[type].type;
-  detailsConfig.isShow = true;
-};
-
-const handleCancelEdit = () => {
-  window.changeInput = false;
-  if (detailsConfig.type === 'add') {
-    detailsConfig.isShow = false;
-  } else {
-    detailsConfig.type = 'view';
-    detailsConfig.title = t('协同策略详情');
-  }
-};
-
-const handleBeforeClose = async () => {
-  let enableLeave = true;
-  if (window.changeInput) {
-    enableLeave = await editLeaveBefore();
-    detailsConfig.isShow = false;
-  } else {
-    detailsConfig.isShow = false;
-  }
-  if (!enableLeave) {
-    return Promise.resolve(enableLeave);
-  }
-};
+const active = ref('local');
 </script>
 
 <style lang="less" scoped>
-.collaboration-wrapper {
-  height: calc(100vh - 104px);
-  padding: 24px;
-
-  .add {
-    margin-bottom: 16px;
+.tab-wrapper {
+  :deep(.bk-tab-header) {
+    padding-left: 24px;
+    font-size: 14px;
+    line-height: 36px !important;
+    background: #fff;
+    border-bottom: none;
+    box-shadow: 0 3px 4px 0 rgb(0 0 0 / 4%);
   }
-}
-
-.details-wrapper {
-  :deep(.bk-sideslider-title) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 24px 0 50px !important;
-
-    .bk-button {
-      padding: 5px 17px !important;
-    }
-  }
-}
-
-.details-edit-wrapper {
-  :deep(.bk-modal-content) {
-    height: calc(100vh - 52px);
-    background: #f5f7fa;
-
-    &::-webkit-scrollbar {
-      width: 4px;
-      background-color: transparent;
-    }
 
-    &::-webkit-scrollbar-thumb {
-      background-color: #dcdee5;
-      border-radius: 4px;
-    }
+  :deep(.bk-tab-content) {
+    padding: 0;
   }
 }
 </style>
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/OperationDetails.vue b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/OperationDetails.vue
similarity index 84%
rename from src/pages/src/views/setting/cross-tenant-collaboration/OperationDetails.vue
rename to src/pages/src/views/setting/cross-tenant-collaboration/my-share/OperationDetails.vue
index 322f4b8f7..12bd71d32 100644
--- a/src/pages/src/views/setting/cross-tenant-collaboration/OperationDetails.vue
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/OperationDetails.vue
@@ -12,22 +12,8 @@
           <bk-form-item class="w-[590px]" :label="$t('策略名称')" property="name" required>
             <bk-input v-model="formData.name" :placeholder="validate.name.message" @focus="handleChange" />
           </bk-form-item>
-        </div>
-      </div>
-      <div class="operation-card">
-        <div class="operation-content-title">{{ $t('目标租户1') }}</div>
-        <div class="operation-content-info flex">
-          <bk-form-item class="w-[340px]" :label="$t('租户ID')" property="tenant_id" required>
-            <bk-input
-              v-model="formData.tenant_id"
-              type="textarea"
-              autosize
-              :resize="false"
-              @focus="handleChange" />
-          </bk-form-item>
-          <i class="user-icon icon-arrow-right"></i>
-          <bk-form-item class="w-[340px]" :label="$t('租户名称')" required>
-            <div class="tenant-name"></div>
+          <bk-form-item class="w-[590px]" :label="$t('目标公司')" property="name" required>
+            <bk-input v-model="formData.name" :placeholder="validate.name.message" @focus="handleChange" />
           </bk-form-item>
         </div>
       </div>
@@ -52,8 +38,8 @@
               v-model="formData.sync_type"
             >
               <bk-radio label="all">{{ $t('所有字段') }}</bk-radio>
-              <bk-radio label="appoint">{{ $t('指定字段') }}</bk-radio>
-              <bk-radio label="basics">{{ $t('仅基础字段') }}</bk-radio>
+              <!-- <bk-radio label="appoint">{{ $t('指定字段') }}</bk-radio>
+              <bk-radio label="basics">{{ $t('仅基础字段') }}</bk-radio> -->
             </bk-radio-group>
           </bk-form-item>
           <bk-form-item
@@ -112,7 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { defineEmits, defineProps, onMounted, reactive, ref } from 'vue';
 
 import Empty from '@/components/Empty.vue';
 import { useValidate } from '@/hooks';
@@ -133,29 +119,7 @@ const formData = reactive({
   ...props.config.data,
 });
 
-const dataSourceList = ref([
-  {
-    value: 'climbing',
-    label: '爬山',
-  },
-  {
-    value: 'fitness',
-    label: '健身',
-  },
-  {
-    value: 'bike',
-    label: '骑车',
-  },
-  {
-    value: 'dancing',
-    label: '跳舞',
-  },
-  {
-    value: 'sleep',
-    label: '睡觉',
-    disabled: true,
-  },
-]);
+const dataSourceList = ref([]);
 
 const rulesBasicInfo = {
   name: [validate.required, validate.name],
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/ViewDetails.vue b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/ViewDetails.vue
similarity index 82%
rename from src/pages/src/views/setting/cross-tenant-collaboration/ViewDetails.vue
rename to src/pages/src/views/setting/cross-tenant-collaboration/my-share/ViewDetails.vue
index 41d5e8e01..7d8075cd8 100644
--- a/src/pages/src/views/setting/cross-tenant-collaboration/ViewDetails.vue
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/ViewDetails.vue
@@ -1,18 +1,8 @@
 <template>
   <div class="view-details-wrapper">
     <div class="view-details-content">
-      <div class="content-item">
-        <span class="item-key">{{ $t('策略名称') }}：</span>
-        <span class="item-value">{{ data.name }}</span>
-      </div>
-      <div class="content-item">
-        <span class="item-key">{{ $t('目标租户') }}：</span>
-        <div class="item-list min-w-[400px]">
-          <p v-for="(item, index) in data.target" :key="index">
-            {{ item.name }} <span>( {{ item.id }} )</span>
-          </p>
-        </div>
-      </div>
+      <LabelContent :label="$t('策略名称')"></LabelContent>
+      <LabelContent :label="$t('目标公司')"></LabelContent>
       <!-- 一期不做 -->
       <!-- <div class="content-item">
         <span class="item-key">{{ $t('协同范围') }}：</span>
@@ -26,12 +16,8 @@
           </div>
         </div>
       </div> -->
-      <div class="content-item">
-        <span class="item-key">{{ $t('同步范围') }}：</span>
-        <span class="item-value">指定字段（字段1，字段2，字段3）</span>
-      </div>
-      <div class="content-item">
-        <span class="item-key">{{ $t('字段预览') }}：</span>
+      <LabelContent :label="$t('同步范围')"></LabelContent>
+      <LabelContent :label="$t('字段预览')">
         <bk-table
           class="mt-[8px]"
           :data="tableData"
@@ -50,15 +36,16 @@
           <bk-table-column prop="phone" :label="$t('手机号')" />
           <bk-table-column prop="organization" :label="$t('组织')" />
         </bk-table>
-      </div>
+      </LabelContent>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { defineProps, onMounted, ref } from 'vue';
 
 import Empty from '@/components/Empty.vue';
+import LabelContent from '@/components/layouts/LabelContent.vue';
 
 defineProps({
   data: {
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/my-share/index.vue b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/index.vue
new file mode 100644
index 000000000..4aad1601a
--- /dev/null
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/my-share/index.vue
@@ -0,0 +1,268 @@
+<template>
+  <div
+    v-bkloading="{ loading: isLoading, zIndex: 9 }"
+    :class="['collaboration-wrapper user-scroll-y', { 'has-alert': userStore.showAlert }]">
+    <header>
+      <bk-button theme="primary" @click="handleClick('add')">
+        <i class="user-icon icon-add-2 mr8" />
+        {{ $t('新建') }}
+      </bk-button>
+      <bk-input
+        class="header-right"
+        v-model="searchVal"
+        type="search"
+        clearable
+        @enter="handleEnter"
+        @clear="handleClear"
+      />
+    </header>
+    <bk-table
+      :data="tableData"
+      :border="['outer']"
+      :max-height="tableMaxHeight"
+      show-overflow-tooltip>
+      <template #empty>
+        <Empty
+          :is-data-empty="isDataEmpty"
+          :is-data-error="isDataError"
+          @handleUpdate="handleUpdate"
+        />
+      </template>
+      <bk-table-column prop="name" :label="$t('策略名称')">
+        <template #default="{ row }">
+          <bk-button text theme="primary" @click="handleClick('view', row)">
+            {{ row.name }}
+          </bk-button>
+        </template>
+      </bk-table-column>
+      <bk-table-column prop="target" :label="$t('目标租户')">
+        <template #default="{ row }">
+          <span>{{ row.target?.map(item => item.name).join(', ') || '--' }}</span>
+        </template>
+      </bk-table-column>
+      <bk-table-column prop="operator" :label="$t('创建人')"></bk-table-column>
+      <bk-table-column prop="created_at" :label="$t('创建时间')"></bk-table-column>
+      <bk-table-column prop="enable" :label="$t('启/停')" :filter="{ list: statusFilters }">
+        <template #default="{ row }">
+          <bk-switcher
+            theme="primary"
+            size="small"
+            v-model="row.enable"
+            @change="handleChange(row)"
+          />
+        </template>
+      </bk-table-column>
+      <bk-table-column :label="$t('操作')">
+        <template #default="{ row }">
+          <bk-button text theme="primary" class="mr8" @click="handleClick('edit', row)">
+            {{ $t('编辑') }}
+          </bk-button>
+          <span v-bk-tooltips="{ content: $t('删除前必须停用该策略'), disabled: !row.enable }">
+            <bk-button text theme="primary" :disabled="row.enable" @click="handleDelete(row)">
+              {{ $t('删除') }}
+            </bk-button>
+          </span>
+        </template>
+      </bk-table-column>
+    </bk-table>
+    <bk-sideslider
+      :ext-cls="['details-wrapper', { 'details-edit-wrapper': !isView }]"
+      :width="960"
+      :is-show="detailsConfig.isShow"
+      :title="detailsConfig.title"
+      :before-close="handleBeforeClose"
+      quick-close>
+      <template #header>
+        <span>{{ detailsConfig.title }}</span>
+        <div v-if="isView">
+          <bk-button
+            outline
+            theme="primary"
+            @click="handleClick('edit', detailsConfig.data)"
+          >{{ $t('编辑') }}</bk-button
+          >
+        </div>
+      </template>
+      <template #default>
+        <ViewDetails v-if="isView" :data="detailsConfig.data" />
+        <OperationDetails
+          v-else
+          :config="detailsConfig"
+          @handleCancelEdit="handleCancelEdit"
+        />
+      </template>
+    </bk-sideslider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { bkTooltips as vBkTooltips, InfoBox } from 'bkui-vue';
+import { computed, inject, onMounted, reactive, ref } from 'vue';
+
+import OperationDetails from './OperationDetails.vue';
+import ViewDetails from './ViewDetails.vue';
+
+import Empty from '@/components/Empty.vue';
+import { useTableMaxHeight } from '@/hooks';
+import { t } from '@/language/index';
+import { useMainViewStore, useUser } from '@/store';
+
+const store = useMainViewStore();
+store.customBreadcrumbs = false;
+const userStore = useUser();
+
+const tableMaxHeight = useTableMaxHeight(202);
+const editLeaveBefore = inject('editLeaveBefore');
+const isLoading = ref(false);
+const tableData = ref([]);
+const isDataEmpty = ref(false);
+const isDataError = ref(false);
+const searchVal = ref('');
+
+onMounted(() => {
+  try {
+    isLoading.value = true;
+    isDataEmpty.value = false;
+    isDataError.value = false;
+    setTimeout(() => {
+      tableData.value = [];
+      if (tableData.value.length === 0) {
+        isDataEmpty.value = true;
+      }
+    }, 1000);
+  } catch (error) {
+    isDataError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+});
+
+const statusFilters = [
+  { text: t('启用'), value: true },
+  { text: t('停用'), value: false },
+];
+
+const handleDelete = (row) => {
+  InfoBox({
+    title: t('是否删除当前协同？'),
+    subTitle: t('删除后，目标租户的用户数据也会同步删除'),
+    onConfirm() {
+      console.log('删除成功', row);
+    },
+  });
+};
+
+const detailsConfig = reactive({
+  isShow: false,
+  title: '',
+  type: '',
+  data: {
+    name: '',
+    tenant_id: '',
+    tenant_name: '',
+    methods: 'organization',
+    sync_type: 'all',
+  },
+});
+
+const enumData = {
+  view: {
+    title: t('协同策略详情'),
+    type: 'view',
+  },
+  add: {
+    title: t('新建协同策略'),
+    type: 'add',
+  },
+  edit: {
+    title: t('编辑协同策略'),
+    type: 'edit',
+  },
+};
+
+const isView = computed(() => detailsConfig.type === 'view');
+
+const handleClick = (type: string, item?: any) => {
+  if (type !== 'add') {
+    detailsConfig.data = item;
+  }
+  detailsConfig.title = enumData[type].title;
+  detailsConfig.type = enumData[type].type;
+  detailsConfig.isShow = true;
+};
+
+const handleCancelEdit = () => {
+  window.changeInput = false;
+  if (detailsConfig.type === 'add') {
+    detailsConfig.isShow = false;
+  } else {
+    detailsConfig.type = 'view';
+    detailsConfig.title = t('协同策略详情');
+  }
+};
+
+const handleBeforeClose = async () => {
+  let enableLeave = true;
+  if (window.changeInput) {
+    enableLeave = await editLeaveBefore();
+    detailsConfig.isShow = false;
+  } else {
+    detailsConfig.isShow = false;
+  }
+  if (!enableLeave) {
+    return Promise.resolve(enableLeave);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 180px) !important;
+}
+
+.collaboration-wrapper {
+  height: calc(100vh - 140px);
+  padding: 24px;
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    .header-right {
+      width: 400px;
+    }
+  }
+}
+
+.details-wrapper {
+  :deep(.bk-sideslider-title) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 24px 0 50px !important;
+
+    .bk-button {
+      padding: 5px 17px !important;
+    }
+  }
+}
+
+.details-edit-wrapper {
+  :deep(.bk-modal-content) {
+    height: calc(100vh - 52px);
+    background: #f5f7fa;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #dcdee5;
+      border-radius: 4px;
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/other-share/OperationDetails.vue b/src/pages/src/views/setting/cross-tenant-collaboration/other-share/OperationDetails.vue
new file mode 100644
index 000000000..bb6f9c3ea
--- /dev/null
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/other-share/OperationDetails.vue
@@ -0,0 +1,343 @@
+<template>
+  <div class="operation-wrapper user-scroll-y">
+    <div class="operation-content">
+      <div class="operation-card">
+        <p class="operation-content-title">{{ $t('源租户信息') }}</p>
+        <ul class="operation-content-info flex">
+          <li>
+            <span class="key">{{ $t('租户名称') }}：</span>
+            <span class="value">{{ detailsConfig.data.name }}</span>
+          </li>
+          <li>
+            <span class="key">{{ $t('租户ID') }}：</span>
+            <span class="value">{{ detailsConfig.data.id }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="operation-card">
+        <div class="operation-content-header">
+          <p class="operation-content-title">{{ $t('字段映射') }}</p>
+          <bk-button
+            v-if="detailsConfig.type === 'edit' && !isEdit"
+            class="min-w-[48px] mr-[24px]"
+            theme="primary"
+            outline
+            @click="isEdit = true"
+          >
+            {{ $t('编辑') }}
+          </bk-button>
+        </div>
+        <bk-form
+          v-if="isEdit"
+          form-type="vertical"
+          ref="formRef2"
+          :model="fieldSettingData"
+          :rules="rulesFieldSetting">
+          <FieldMapping
+            :field-setting-data="fieldSettingData"
+            :api-fields="apiFields"
+            :rules="rulesFieldSetting"
+            @changeApiFields="changeApiFields"
+            @handleAddField="handleAddField"
+            @handleDeleteField="handleDeleteField"
+            @changeCustomField="changeCustomField" />
+          <div class="ml-[64px]">
+            <bk-button
+              class="min-w-[64px] mr-[8px]"
+              theme="primary">
+              {{ $t('保存') }}
+            </bk-button>
+            <bk-button
+              class="min-w-[64px]"
+              @click="isEdit = false">
+              {{ $t('取消') }}
+            </bk-button>
+          </div>
+        </bk-form>
+        <div v-else class="field-mapping-content">
+          <ul
+            v-for="(item, index) in fieldSettingData.field_mapping.builtin_fields"
+            :key="index">
+            <li>{{ item.display_name }}</li>
+            <li>{{ getCustomCondition(item.mapping_operation) }}</li>
+            <li>{{ item.source_field }}</li>
+          </ul>
+          <ul
+            v-for="(item, index) in fieldSettingData.addFieldList"
+            :key="index">
+            <li>{{ getDisplayName(item.target_field) }}</li>
+            <li>{{ getCustomCondition(item.mapping_operation) }}</li>
+            <li>{{ item.source_field }}</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="footer fixed" v-if="isEdit">
+      <bk-button theme="primary" @click="handleSave">
+        {{ $t('确认') }}
+      </bk-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">import { defineProps, onMounted, reactive, ref } from 'vue';
+
+import FieldMapping from '@/components/field-mapping/FieldMapping.vue';
+import { useValidate } from '@/hooks';
+import {
+  getDataSourceDetails,
+  getFields,
+} from '@/http';
+
+const validate = useValidate();
+
+defineProps({
+  detailsConfig: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const isEdit = ref(false);
+
+const rulesFieldSetting = {
+  target_field: [validate.required],
+  source_field: [validate.required],
+};
+
+const apiFields = ref([]);
+const fieldMappingList = ref([]);
+const fieldSettingData = reactive({
+  field_mapping: {
+    // 内置字段
+    builtin_fields: [],
+    // 自定义字段
+    custom_fields: [],
+  },
+  addFieldList: [],
+});
+
+onMounted(async () => {
+  const res = await getDataSourceDetails(6);
+  fieldMappingList.value = res.data?.field_mapping;
+  const fieldsRes = await getFields();
+
+  const list = [];
+  const customList = [];
+  const mapFields = (fields, item, isDisabled, fieldMappingType) => {
+    if (fields.name !== item.target_field) return;
+
+    list.push(item.source_field);
+    customList.push(fields.name);
+    Object.assign(fields, {
+      mapping_operation: item.mapping_operation,
+      source_field: item.source_field,
+      disabled: isDisabled,
+    });
+    apiFields.value.push({ key: item.source_field, disabled: isDisabled });
+
+    if (fieldMappingType === 'builtin_fields' && fields.required) {
+      fieldSettingData.field_mapping.builtin_fields.push(fields);
+    } else {
+      fieldSettingData.addFieldList.push(item);
+      fieldSettingData.field_mapping.custom_fields.push(fields);
+    }
+  };
+
+  fieldMappingList.value.forEach((item) => {
+    fieldsRes.data?.builtin_fields?.forEach(fields => mapFields(fields, item, true, 'builtin_fields'));
+    fieldsRes.data?.custom_fields?.forEach(fields => mapFields(fields, item, true, 'custom_fields'));
+  });
+
+
+  fieldsRes.data?.custom_fields?.concat(fieldsRes.data?.builtin_fields || []).forEach((fields) => {
+    if (!customList.includes(fields.name)) {
+      fieldSettingData.field_mapping.custom_fields.push(fields);
+    }
+  });
+});
+
+const getDisplayName = (item) => {
+  const name = ref('');
+  fieldSettingData.field_mapping.custom_fields.forEach((field) => {
+    if (field.name === item) {
+      name.value = field?.display_name;
+    }
+  });
+  return name.value;
+};
+
+const getCustomCondition = (mappingOperation) => {
+  switch (mappingOperation) {
+    case 'direct':
+      return '=';
+    default:
+      return '自定义';
+  }
+};
+
+const changeApiFields = (newValue, oldValue) => {
+  apiFields.value.forEach((item) => {
+    if (item.key === newValue) {
+      item.disabled = true;
+    } else if (item.key === oldValue) {
+      item.disabled = false;
+    }
+  });
+  handleChange();
+};
+
+// 新增自定义字段
+const handleAddField = () => {
+  fieldSettingData.addFieldList.push({ target_field: '', mapping_operation: 'direct', source_field: '' });
+  handleChange();
+};
+
+// 删除自定义字段
+const handleDeleteField = (item, index) => {
+  fieldSettingData.addFieldList.splice(index, 1);
+
+  const enableField = (fields, fieldKey, fieldName) => {
+    const field = fields.find(element => element[fieldKey] === fieldName);
+    if (field) field.disabled = false;
+  };
+
+  enableField(fieldSettingData.field_mapping.custom_fields, 'name', item.target_field);
+  enableField(apiFields.value, 'key', item.source_field);
+  handleChange();
+};
+
+// 更改自定义字段
+const changeCustomField = (newValue, oldValue) => {
+  fieldSettingData.field_mapping.custom_fields.forEach((element) => {
+    if (element.name === newValue) {
+      element.disabled = true;
+    } else if (element.name === oldValue) {
+      element.disabled = false;
+    }
+  });
+  handleChange();
+};
+
+const handleChange = () => {
+  window.changeInput = true;
+};
+</script>
+
+<style lang="less" scoped>
+.operation-wrapper {
+  position: relative;
+  height: calc(100vh - 52px);
+  background: #f5f7fa;
+
+  .operation-content {
+    padding: 0 24px 48px;
+
+    .operation-card {
+      padding-bottom: 24px;
+      margin: 16px 0;
+      list-style: none;
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 2px 4px 0 #1919290d;
+
+      .operation-content-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .operation-content-title {
+        padding: 16px 24px;
+        font-size: 14px;
+        font-weight: 700;
+        color: #63656e;
+      }
+
+      .operation-content-info {
+        padding-left: 64px;
+      }
+
+      .flex {
+        display: flex;
+        align-items: center;
+
+        li {
+          width: 50%;
+          margin-right: 24px;
+        }
+      }
+
+      .key {
+        font-size: 14px;
+        color: #63656e;
+      }
+
+      .value {
+        font-size: 14px;
+        color: #313238;
+      }
+
+      .field-mapping-content {
+        margin-left: 70px;
+
+        ul {
+          display: flex;
+          width: 528px;
+          height: 32px;
+          margin-bottom: 8px;
+          line-height: 32px;
+          color: #63656e;
+          background: #F5F7FA;
+          border: 1px solid #EAEBF0;
+
+          li:nth-child(1) {
+            width: 247px;
+            padding-left: 12px;
+          }
+
+          li:nth-child(2) {
+            width: 32px;
+            font-family: MicrosoftYaHei-Bold;
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 0;
+            color: #FF9C01;
+            text-align: center;
+            background: #FAFBFD;
+            border-right: 1px solid #EAEBF0;
+            border-left: 1px solid #EAEBF0;
+          }
+
+          li:nth-child(3) {
+            width: 249px;
+            padding-left: 18px;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    position: absolute;
+    padding: 0 24px;
+
+    .bk-button {
+      min-width: 88px;
+      margin-right: 8px;
+    }
+  }
+
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    z-index: 9;
+    width: 100%;
+    height: 48px;
+    margin-bottom: 0;
+    line-height: 48px;
+    background: #FAFBFD;
+    box-shadow: 0 -1px 0 0 #DCDEE5;
+  }
+}
+</style>
diff --git a/src/pages/src/views/setting/cross-tenant-collaboration/other-share/index.vue b/src/pages/src/views/setting/cross-tenant-collaboration/other-share/index.vue
new file mode 100644
index 000000000..b4414b0bc
--- /dev/null
+++ b/src/pages/src/views/setting/cross-tenant-collaboration/other-share/index.vue
@@ -0,0 +1,489 @@
+<template>
+  <div v-bkloading="{ loading: isLoading, zIndex: 9 }" class="user-info-wrapper user-scroll-y">
+    <!-- 一期不做 -->
+    <!-- <header>
+      <bk-button text theme="primary" @click="handleUpdateRecord">
+        <i class="user-icon icon-lishijilu" />
+        {{ $t('数据更新记录') }}
+      </bk-button>
+    </header> -->
+    <bk-table
+      class="user-info-table"
+      :data="tableData"
+      :border="['outer']"
+      :max-height="tableMaxHeight"
+      show-overflow-tooltip
+      @column-filter="handleFilter"
+    >
+      <template #empty>
+        <Empty
+          :is-data-empty="isDataEmpty"
+          :is-data-error="isDataError"
+          @handle-update="fetchCollaborationData"
+        />
+      </template>
+      <bk-table-column prop="name" :label="$t('源租户')">
+        <template #default="{ row }">
+          <span>
+            {{ row.name }}
+          </span>
+        </template>
+      </bk-table-column>
+      <bk-table-column prop="status" :label="$t('状态')" :filter="{ list: statusFilters }">
+        <template #default="{ row }">
+          <div>
+            <img :src="dataSourceStatus[row.status]?.icon" class="account-status-icon" />
+            <span>{{ dataSourceStatus[row.status]?.text }}</span>
+          </div>
+        </template>
+      </bk-table-column>
+      <bk-table-column prop="updated_at" :label="$t('更新时间')"></bk-table-column>
+      <bk-table-column prop="enable" :label="$t('启/停')" :filter="{ list: enableFilters }">
+        <template #default="{ row }">
+          <bk-switcher
+            theme="primary"
+            size="small"
+            v-model="row.enable"
+            :disabled="row.status === 'confirmed'"
+          />
+        </template>
+      </bk-table-column>
+      <bk-table-column :label="$t('操作')">
+        <template #default="{ row }">
+          <bk-button
+            v-if="row.status === 'confirmed'"
+            text
+            theme="primary"
+            @click="handleDetails(row, 'edit')"
+          >
+            {{ $t('去确认') }}
+          </bk-button>
+          <bk-button
+            v-else
+            text
+            theme="primary"
+            @click="handleDetails(row, 'view')"
+          >
+            {{ $t('查看详情') }}
+          </bk-button>
+        </template>
+      </bk-table-column>
+    </bk-table>
+    <!-- 侧边栏 -->
+    <bk-sideslider
+      :width="960"
+      quick-close
+      v-model:isShow="detailsConfig.isShow"
+      :title="detailsConfig.title"
+    >
+      <OperationDetails :details-config="detailsConfig" />
+    </bk-sideslider>
+    <!-- 数据更新记录 -->
+    <bk-dialog
+      width="960"
+      class="update-record-dialog"
+      dialog-type="show"
+      :title="$t('数据更新记录')"
+      :is-show="dialogConfig.isShow"
+      @closed="dialogConfig.isShow = false">
+      <bk-table
+        class="update-record-table"
+        :data="dialogConfig.list"
+        :border="['outer']"
+        show-overflow-tooltip
+      >
+        <template #empty>
+          <Empty
+            :is-data-empty="dialogConfig.isDataEmpty"
+            :is-data-error="dialogConfig.isDataError"
+            @handle-update="fetchDataUpdateRecord"
+          />
+        </template>
+        <bk-table-column type="expand" width="60"></bk-table-column>
+        <template #expandRow="row">
+          <div class="expand-wrapper">
+            <div class="expand-item">
+              <span class="w-[60px] text-[#EA3636]">{{ $t('删除') }}:</span>
+              <div class="expand-item-content">
+                <div class="content-users">
+                  <i class="bk-sq-icon icon-personal-user" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.delete.users" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+                <div class="content-departments">
+                  <i class="bk-sq-icon icon-file-close" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.delete.departments" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="expand-item">
+              <p class="w-[60px] text-[#FF9C01]">{{ $t('变更') }}:</p>
+              <div class="expand-item-content">
+                <div class="content-users">
+                  <i class="bk-sq-icon icon-personal-user" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.change.users" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+                <div class="content-departments">
+                  <i class="bk-sq-icon icon-file-close" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.change.departments" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="expand-item">
+              <span class="w-[60px] text-[#2DCB56]">{{ $t('新增') }}:</span>
+              <div class="expand-item-content">
+                <div class="content-users">
+                  <i class="bk-sq-icon icon-personal-user" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.add.users" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+                <div class="content-departments">
+                  <i class="bk-sq-icon icon-file-close" />
+                  <div class="flex">
+                    <span v-for="(item, index) in row.add.departments" :key="index">
+                      {{ item }}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <bk-table-column prop="updated_at" :label="$t('时间')" width="160">
+          <template #default="{ row }">
+            <span>{{ row.updated_at }}</span>
+          </template>
+        </bk-table-column>
+        <bk-table-column prop="source_tenant" :label="$t('源租户')"></bk-table-column>
+        <bk-table-column :label="$t('更新内容')" width="480">
+          <template #default="{ row }">
+            <bk-tag theme="danger">
+              {{ $t('删除') }}：
+              <i class="bk-sq-icon icon-personal-user" />
+              <span>{{ row.delete?.users?.length }}</span>
+              <i class="bk-sq-icon icon-file-close" />
+              <span>{{ row.delete?.departments?.length }}</span>
+            </bk-tag>
+            <bk-tag theme="warning">
+              {{ $t('变更') }}：
+              <i class="bk-sq-icon icon-personal-user" />
+              <span>{{ row.change?.users?.length }}</span>
+              <i class="bk-sq-icon icon-file-close" />
+              <span>{{ row.change?.departments?.length }}</span>
+            </bk-tag>
+            <bk-tag theme="success">
+              {{ $t('新增') }}：
+              <i class="bk-sq-icon icon-personal-user" />
+              <span>{{ row.add?.users?.length }}</span>
+              <i class="bk-sq-icon icon-file-close" />
+              <span>{{ row.add?.departments?.length }}</span>
+            </bk-tag>
+          </template>
+        </bk-table-column>
+      </bk-table>
+    </bk-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+
+import OperationDetails from './OperationDetails.vue';
+
+import Empty from '@/components/Empty.vue';
+import { useTableMaxHeight } from '@/hooks';
+import { t } from '@/language/index';
+import { useMainViewStore } from '@/store';
+import { dataSourceStatus } from '@/utils';
+
+const store = useMainViewStore();
+store.customBreadcrumbs = false;
+
+const tableMaxHeight = useTableMaxHeight(238);
+const isLoading = ref(false);
+const tableData = ref([]);
+const isDataEmpty = ref(false);
+const isDataError = ref(false);
+
+const statusFilters = [
+  { text: t('正常'), value: 'enabled' },
+  { text: t('未启用'), value: 'disabled' },
+  { text: t('待确认'), value: 'confirmed' },
+];
+
+const enableFilters = [
+  { text: t('启用'), value: true },
+  { text: t('停用'), value: false },
+];
+
+const detailsConfig = reactive({
+  isShow: false,
+  title: '',
+  data: {},
+  type: '',
+});
+
+onMounted(() => {
+  fetchCollaborationData();
+});
+
+const fetchCollaborationData = async () => {
+  try {
+    isLoading.value = true;
+    isDataEmpty.value = false;
+    isDataError.value = false;
+    setTimeout(() => {
+      tableData.value = [];
+      if (tableData.value.length === 0) {
+        isDataEmpty.value = true;
+      }
+    }, 1000);
+  } catch (error) {
+    isDataError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const handleFilter = ({ checked }) => {
+  if (checked.length === 0) return isDataEmpty.value = false;
+  isDataEmpty.value = !tableData.value.some(item => checked.includes(item.status));
+};
+
+const dialogConfig = reactive({
+  isShow: false,
+  list: [],
+  isDataEmpty: false,
+  isDataError: false,
+});
+
+// 一期不做
+// const handleUpdateRecord = async () => {
+//   try {
+//     dialogConfig.isShow = true;
+//     dialogConfig.isDataEmpty = false;
+//     dialogConfig.isDataError = false;
+//     setTimeout(() => {
+//       dialogConfig.list = [];
+//     }, 1000);
+//   } catch (error) {
+//     dialogConfig.isDataError = true;
+//   } finally {
+//     dialogConfig.isShow = false;
+//   }
+// };
+
+const handleDetails = (item, type) => {
+  detailsConfig.isShow = true;
+  detailsConfig.type = type;
+  detailsConfig.title = type === 'view' ? t('协同数据详情') : t('确认协同数据');
+  detailsConfig.data = item;
+};
+</script>
+
+<style lang="less" scoped>
+.user-info-wrapper {
+  width: 100%;
+  height: calc(100vh - 140px);
+  padding: 24px;
+
+  header {
+    float: right;
+    margin-bottom: 16px;
+
+    .bk-button {
+      margin-left: 20px;
+      font-size: 14px;
+
+      .icon-lishijilu {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  :deep(.user-info-table) {
+    .bk-table-head {
+      table thead th {
+        text-align: center;
+      }
+
+      .table-head-settings {
+        border-right: none;
+      }
+    }
+
+    .bk-table-footer {
+      padding: 0 15px;
+      background: #fff;
+    }
+
+    .type-icon {
+      margin-right: 8px;
+      font-size: 14px;
+      color: #979BA5;
+    }
+
+    .account-status-icon {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+
+    .data-source-type {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 14px;
+        height: 14px;
+      }
+
+      span {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.dropdown-menu-ul {
+  width: 380px;
+
+  .dropdown-title {
+    padding: 12px 16px;
+    color: #63656e;
+  }
+
+  .bk-dropdown-item {
+    display: flex;
+    height: 100%;
+    padding: 10px 16px;
+    line-height: 32px;
+    align-items: center;
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    .user-icon {
+      font-size: 24px;
+      color: #979ba5;
+    }
+
+    .dropdown-item {
+      margin-left: 15px;
+
+      span {
+        display: block;
+      }
+
+      .dropdown-item-title {
+        font-size: 14px;
+        font-weight: 700;
+      }
+
+      .dropdown-item-subtitle {
+        width: 300px;
+        line-height: 20px;
+        color: #979ba5;
+        white-space: break-spaces;
+      }
+    }
+  }
+}
+
+.update-record-dialog {
+  .bk-tag {
+    i {
+      font-size: 14px;
+      color: #C4C6CC;
+    }
+
+    .icon-file-close {
+      margin-left: 12px;
+    }
+
+    span {
+      color: #63656E;
+    }
+  }
+
+  .update-record-table {
+    .expand-wrapper {
+      max-height: 300px;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #dcdee5;
+        border-radius: 4px;
+      }
+    }
+
+    .row_expend {
+      .expand-item:first-child {
+        border-top: none;
+      }
+    }
+
+    .row_expend:last-child {
+      .expand-item:first-child {
+        border-top: 1px solid #DCDEE5;
+      }
+    }
+
+    .expand-item {
+      display: flex;
+      padding: 16px 24px;
+      background: #F5F7FA;
+      border-top: 1px solid #DCDEE5;
+
+      .expand-item-content {
+        i {
+          margin: 0 16px 0 8px;
+          font-size: 16px;
+          color: #C4C6CC;
+        }
+
+        span {
+          padding: 0 24px 8px 0;
+        }
+
+        .content-users, .content-departments {
+          display: flex;
+          align-items: baseline;
+        }
+
+        .flex {
+          display: flex;
+          flex-wrap: wrap;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/src/views/setting/data-source/ConfigList.vue b/src/pages/src/views/setting/data-source/ConfigList.vue
index e976c6728..61c1d56ff 100644
--- a/src/pages/src/views/setting/data-source/ConfigList.vue
+++ b/src/pages/src/views/setting/data-source/ConfigList.vue
@@ -18,7 +18,10 @@
         </bk-button>
       </template>
     </MainBreadcrumbsDetails>
-    <div class="data-source-card" v-if="dataSource?.id">
+    <div
+      :class="['data-source-card user-scroll-y', { 'has-alert': userStore.showAlert }]"
+      v-if="dataSource?.id"
+    >
       <DataSourceCard
         :plugins="dataSourcePlugins"
         :data-source="dataSource"
@@ -69,7 +72,7 @@
         </template>
       </DataSourceCard>
     </div>
-    <div class="data-source-card" v-else>
+    <div :class="['data-source-card user-scroll-y', { 'has-alert': userStore.showAlert }]" v-else>
       <div class="info" v-if="!dataSource?.id">
         <i class="user-icon icon-info-i" />
         <span>当前还没有数据源，需要先选择数据源类型并进行配置</span>
@@ -170,8 +173,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import axios from 'axios';
+<script setup lang="ts"> import axios from 'axios';
 import { InfoBox, Message } from 'bkui-vue';
 import { InfoLine, Upload } from 'bkui-vue/lib/icon';
 import Cookies from 'js-cookie';
@@ -187,6 +189,9 @@ import { deleteDataSources, getRelatedResource } from '@/http';
 import { t } from '@/language/index';
 import router from '@/router';
 import { dataRecordStatus } from '@/utils';
+import { useUser } from '@/store';
+
+const userStore = useUser();
 
 const {
   dataSourcePlugins,
@@ -358,7 +363,12 @@ const handleSync = (e) => {
 </script>
 
 <style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 144px) !important;
+}
+
 .data-source-card {
+  height: calc(100vh - 92px);
   padding: 16px 24px;
 
   .info {
diff --git a/src/pages/src/views/setting/data-source/NewDataSource.vue b/src/pages/src/views/setting/data-source/NewDataSource.vue
index 0bf7a56fe..de0df31b5 100644
--- a/src/pages/src/views/setting/data-source/NewDataSource.vue
+++ b/src/pages/src/views/setting/data-source/NewDataSource.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="data-source-card" v-bkloading="{ loading: isLoading, zIndex: 9 }">
+  <div
+    :class="['data-source-card user-scroll-y', { 'has-alert': userStore.showAlert }]"
+    v-bkloading="{ loading: isLoading, zIndex: 9 }"
+  >
     <DataSourceCard
       v-if="!isSuccess"
       :plugins="currentPlugins"
@@ -36,8 +39,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { onMounted, reactive, ref, watch } from 'vue';
+<script setup lang="ts"> import { onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import Http from './Http.vue';
@@ -48,13 +50,15 @@ import {
   getDataSourcePlugins,
 } from '@/http';
 import { t } from '@/language/index';
-import { useMainViewStore } from '@/store';
+import { useMainViewStore, useUser } from '@/store';
 
 const store = useMainViewStore();
 store.customBreadcrumbs = false;
 
 const route = useRoute();
 
+const userStore = useUser();
+
 const currentType = ref('');
 // 获取数据源类型
 watch(() => route.query.type, (val: string) => {
@@ -134,7 +138,12 @@ const handleReset = (e) => {
 </script>
 
 <style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 144px) !important;
+}
+
 .data-source-card {
+  height: calc(100vh - 92px);
   padding: 16px 24px;
 
   .steps-wrapper {
diff --git a/src/pages/src/views/setting/index.vue b/src/pages/src/views/setting/index.vue
index 976c1a74e..43f7d9b5b 100644
--- a/src/pages/src/views/setting/index.vue
+++ b/src/pages/src/views/setting/index.vue
@@ -64,7 +64,7 @@ const menuData = reactive([
     key: 'collaboration',
     children: [
       {
-        name: t('跨公司协同'),
+        name: t('跨租户协同'),
         key: 'collaboration',
       },
     ],
diff --git a/src/pages/src/views/tenant/OperationDetails.vue b/src/pages/src/views/tenant/OperationDetails.vue
index 55cf89dab..054c87090 100644
--- a/src/pages/src/views/tenant/OperationDetails.vue
+++ b/src/pages/src/views/tenant/OperationDetails.vue
@@ -104,8 +104,7 @@
   </div>
 </template>
 
-<script setup lang="tsx">
-import { Message } from 'bkui-vue';
+<script setup lang="ts"> import { Message } from 'bkui-vue';
 import { computed, defineEmits, defineProps, reactive, ref } from 'vue';
 
 import Row from '@/components/layouts/row.vue';
@@ -113,7 +112,7 @@ import PhoneInput from '@/components/phoneInput.vue';
 import { useAdminPassword, useValidate } from '@/hooks';
 import { createTenants, putTenants } from '@/http';
 import { t } from '@/language/index';
-import { useUser } from '@/store/user';
+import { useUser } from '@/store';
 import { getBase64 } from '@/utils';
 
 const userStore = useUser();
diff --git a/src/pages/src/views/tenant/index.vue b/src/pages/src/views/tenant/index.vue
index 01dbeee68..0c4fe25cf 100644
--- a/src/pages/src/views/tenant/index.vue
+++ b/src/pages/src/views/tenant/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <div v-bkloading="{ loading: state.tableLoading, zIndex: 9 }" class="group-details-wrapper user-scroll-y">
+  <div
+    v-bkloading="{ loading: state.tableLoading, zIndex: 9 }"
+    :class="['group-details-wrapper user-scroll-y', { 'has-alert': userStore.showAlert }]">
     <div class="main-content">
       <div class="content-search">
         <div class="content-search-left">
@@ -66,11 +68,12 @@
         <bk-table-column :label="$t('操作')">
           <template #default="{ row }">
             <div class="flex items-center">
-              <span v-bk-tooltips="{
-                content: $t('admin只能进入默认租户'),
-                distance: 20,
-                disabled: userStore.user?.tenant_id === row.id,
-              }">
+              <span
+                v-bk-tooltips="{
+                  content: $t('admin只能进入默认租户'),
+                  distance: 20,
+                  disabled: userStore.user?.tenant_id === row.id,
+                }">
                 <bk-button
                   text
                   theme="primary"
@@ -223,8 +226,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { bkTooltips as vBkTooltips, InfoBox, Message } from 'bkui-vue';
+<script setup lang="ts"> import { bkTooltips as vBkTooltips, InfoBox, Message } from 'bkui-vue';
 import { computed, inject, nextTick, onMounted, reactive, ref, watch } from 'vue';
 
 import OperationDetails from './OperationDetails.vue';
@@ -245,8 +247,7 @@ import {
 } from '@/http';
 import { t } from '@/language/index';
 import router from '@/router';
-import { useMainViewStore } from '@/store';
-import { useUser } from '@/store/user';
+import { useMainViewStore, useUser } from '@/store';
 import { LOGO_COLOR, logoConvert, tenantStatus } from '@/utils';
 
 const userStore = useUser();
@@ -608,9 +609,13 @@ const {
 </script>
 
 <style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 92px) !important;
+}
+
 .group-details-wrapper {
   width: 100%;
-  height: calc(100vh - 104px);
+  height: calc(100vh - 52px);
   padding: 24px 144px;
 
   .main-content {
diff --git a/src/pages/src/views/virtual-account/EditDetails.vue b/src/pages/src/views/virtual-account/EditDetails.vue
index 85f1157d8..3fe1260cf 100644
--- a/src/pages/src/views/virtual-account/EditDetails.vue
+++ b/src/pages/src/views/virtual-account/EditDetails.vue
@@ -123,7 +123,7 @@ const handleChange = () => {
 };
 </script>
 
-<style>
+<style lang="less" scoped>
 .operation-wrapper {
   padding: 28px 40px;
 
diff --git a/src/pages/src/views/virtual-account/index.vue b/src/pages/src/views/virtual-account/index.vue
index aa5f37c91..6ea4fefb9 100644
--- a/src/pages/src/views/virtual-account/index.vue
+++ b/src/pages/src/views/virtual-account/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="virtual-account-wrapper">
+  <div :class="['virtual-account-wrapper user-scroll-y', { 'has-alert': userStore.showAlert }]">
     <header>
       <bk-button theme="primary" @click="handleClick('add')">
         <i class="user-icon icon-add-2 mr8" />
@@ -100,6 +100,9 @@ import Empty from '@/components/Empty.vue';
 import { deleteVirtualUsers, getVirtualUsers, getVirtualUsersDetail } from '@/http';
 import { t } from '@/language/index';
 import { copy } from '@/utils';
+import { useUser } from '@/store';
+
+const userStore = useUser();
 
 const editLeaveBefore = inject('editLeaveBefore');
 
@@ -269,7 +272,12 @@ const pageCurrentChange = (current: number) => {
 </script>
 
 <style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 92px) !important;
+}
+
 .virtual-account-wrapper {
+  height: calc(100vh - 52px);
   padding: 24px 160px;
 
   header {