fix: 跨租户协同交互优化 TencentBlueKing#1684

# Reviewed, transaction id: 7497

src/pages/src/views/setting/cross-tenant-collaboration/index.vue

@@ -5,32 +5,31 @@
     type="unborder-card"
   >
     <bk-tab-panel
-      v-for="(item, index) in panels"
-      :key="index"
+      v-for="item in panels"
+      :key="item.name"
       :name="item.name"
       :label="item.label"
     >
-      <MyShare v-if="active === 'local'" />
-      <OtherShare v-else />
+      <component :is="item.component" :active="active"></component>
     </bk-tab-panel>
   </bk-tab>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-import MyShare from './my-share/index.vue';
-import OtherShare from './other-share/index.vue';
+import { defineAsyncComponent, ref } from 'vue';
 
 import { t } from '@/language/index';
 import { useMainViewStore } from '@/store';
 
+const MyShare = defineAsyncComponent(() => import('./my-share/index.vue'));
+const OtherShare = defineAsyncComponent(() => import('./other-share/index.vue'));
+
 const store = useMainViewStore();
 store.customBreadcrumbs = false;
 
 const panels = [
-  { name: 'local', label: t('我分享的') },
-  { name: 'other', label: t('其他租户分享的') },
+  { name: 'local', label: t('我分享的'), component: MyShare },
+  { name: 'other', label: t('其他租户分享的'), component: OtherShare },
 ];
 const active = ref('local');
 </script>

src/pages/src/views/setting/cross-tenant-collaboration/my-share/index.vue

@@ -99,7 +99,7 @@
 
 <script setup lang="ts">
 import { bkTooltips as vBkTooltips, InfoBox, Message } from 'bkui-vue';
-import { computed, inject, onMounted, reactive, ref, watch } from 'vue';
+import { computed, defineProps, inject, reactive, ref, watch, watchEffect } from 'vue';
 
 import OperationDetails from './OperationDetails.vue';
 import ViewDetails from './ViewDetails.vue';
@@ -114,6 +114,13 @@ const store = useMainViewStore();
 store.customBreadcrumbs = false;
 const userStore = useUser();
 
+const props = defineProps({
+  active: {
+    type: String,
+    default: '',
+  },
+});
+
 const tableMaxHeight = useTableMaxHeight(202);
 const editLeaveBefore = inject('editLeaveBefore');
 const isLoading = ref(false);
@@ -123,10 +130,6 @@ const isDataError = ref(false);
 const isSearchEmpty = ref(false);
 const search = ref('');
 
-onMounted(() => {
-  fetchToStrategies();
-});
-
 // 获取协同策略列表
 const fetchToStrategies = async () => {
   try {
@@ -146,6 +149,12 @@ const fetchToStrategies = async () => {
   }
 };
 
+watchEffect(() => {
+  if (props.active === 'local') {
+    fetchToStrategies();
+  }
+});
+
 const statusFilters = [
   { text: t('启用'), value: 'enabled' },
   { text: t('停用'), value: 'disabled' },

src/pages/src/views/setting/cross-tenant-collaboration/other-share/OperationDetails.vue

@@ -271,7 +271,7 @@ const handleSave = async () => {
     },
   };
 
-  await props.config.type === 'view' ? putFromStrategies(params) : putFromStrategiesConfirm(params);
+  props.config.type === 'view' ? await putFromStrategies(params) : await putFromStrategiesConfirm(params);
   Message({ theme: 'success', message: t('更新成功') });
   emit('updateList');
 };

src/pages/src/views/setting/cross-tenant-collaboration/other-share/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <div v-bkloading="{ loading: isLoading, zIndex: 9 }" class="user-info-wrapper user-scroll-y">
+  <div
+    v-bkloading="{ loading: isLoading, zIndex: 9 }"
+    :class="['user-info-wrapper user-scroll-y', { 'has-alert': userStore.showAlert }]">
     <!-- 一期不做 -->
     <!-- <header>
       <bk-button text theme="primary" @click="handleUpdateRecord">
@@ -206,19 +208,27 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, reactive, ref } from 'vue';
+import { defineProps, inject, reactive, ref, watchEffect } from 'vue';
 
 import OperationDetails from './OperationDetails.vue';
 
 import Empty from '@/components/Empty.vue';
 import { useTableMaxHeight } from '@/hooks';
 import { getFromStrategies, putFromStrategiesStatus } from '@/http';
 import { t } from '@/language/index';
-import { useMainViewStore } from '@/store';
+import { useMainViewStore, useUser } from '@/store';
 import { dataSourceStatus } from '@/utils';
 
 const store = useMainViewStore();
 store.customBreadcrumbs = false;
+const userStore = useUser();
+
+const props = defineProps({
+  active: {
+    type: String,
+    default: '',
+  },
+});
 
 const tableMaxHeight = useTableMaxHeight(238);
 const editLeaveBefore = inject('editLeaveBefore');
@@ -245,27 +255,37 @@ const detailsConfig = reactive({
   type: '',
 });
 
-onMounted(() => {
-  fetchFromStrategies();
-});
-
 const fetchFromStrategies = async () => {
   try {
     isLoading.value = true;
     isDataEmpty.value = false;
     isDataError.value = false;
     const res = await getFromStrategies();
-    tableData.value = res?.data;
-    if (tableData.value.length === 0) {
-      isDataEmpty.value = true;
-    }
+    tableData.value = res.data?.sort(a => (a.target_status === 'unconfirmed' ? -1 : 1));
+
+    const table = document.querySelector('.user-info-table');
+    const rows = table.querySelectorAll('.hover-highlight');
+    rows.forEach((row) => {
+      const statusCell = row.cells[1];
+      if (statusCell.textContent.trim() === t('待确认')) {
+        row.classList.add('unconfirmed');
+      }
+    });
+
+    isDataEmpty.value = tableData.value.length === 0;
   } catch (error) {
     isDataError.value = true;
   } finally {
     isLoading.value = false;
   }
 };
 
+watchEffect(() => {
+  if (props.active === 'other') {
+    fetchFromStrategies();
+  }
+});
+
 const handleFilter = ({ checked }) => {
   if (checked.length === 0) return isDataEmpty.value = false;
   isDataEmpty.value = !tableData.value.some(item => checked.includes(item.status));
@@ -328,6 +348,10 @@ const updateList = () => {
 </script>
 
 <style lang="less" scoped>
+.has-alert {
+  height: calc(100vh - 180px) !important;
+}
+
 .user-info-wrapper {
   width: 100%;
   height: calc(100vh - 140px);
@@ -348,6 +372,10 @@ const updateList = () => {
   }
 
   :deep(.user-info-table) {
+    .unconfirmed td {
+      background-color: #F2FCF5;
+    }
+
     .bk-table-head {
       table thead th {
         text-align: center;

src/pages/src/views/tenant/index.vue

@@ -413,7 +413,7 @@ const fetchTenantsList = () => {
 
         const rows = getRows();
         for (const i of rows) {
-          i.style.background = '#DCFFE2';
+          i.style.background = '#F2FCF5';
         }
       } else {
         state.list = res.data.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));