From 39b422fa374a5eee4ce96180fa1c785892e56db8 Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Fri, 6 Dec 2024 18:40:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=8D=95=E6=8D=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=BF=AD=E4=BB=A3=5F1206=20#7190=20#=20Reviewed,=20tr?=
 =?UTF-8?q?ansaction=20id:=2026103?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/services/types/permission.ts |  20 +-
 .../create-rule/components/PreviewDiff.vue    | 248 ++++++++----------
 .../components/PreviewDiff.vue                | 240 ++++++++---------
 3 files changed, 238 insertions(+), 270 deletions(-)

diff --git a/dbm-ui/frontend/src/services/types/permission.ts b/dbm-ui/frontend/src/services/types/permission.ts
index 3760f2e07e..769a278259 100644
--- a/dbm-ui/frontend/src/services/types/permission.ts
+++ b/dbm-ui/frontend/src/services/types/permission.ts
@@ -117,16 +117,6 @@ export interface PasswordPolicyIncludeRule {
   uppercase: boolean;
 }
 
-/**
- * 新增账号规则
- */
-export interface AccountRule {
-  access_db: string;
-  privilege: AccountRulePrivilege | string;
-  account_id: number | null;
-  account_type?: AccountTypesValues;
-}
-
 /**
  * 新增账号规则 - 权限信息
  */
@@ -138,6 +128,16 @@ export interface AccountRulePrivilege {
 
 export type AccountRulePrivilegeKey = keyof AccountRulePrivilege;
 
+/**
+ * 新增账号规则
+ */
+export interface AccountRule {
+  access_db: string;
+  privilege: AccountRulePrivilege;
+  account_id: number | null;
+  account_type?: AccountTypesValues;
+}
+
 /**
  * 规则授权前置检查信息
  */
diff --git a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/PreviewDiff.vue b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/PreviewDiff.vue
index d2b5ecb827..4261e2dd70 100644
--- a/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/PreviewDiff.vue
+++ b/dbm-ui/frontend/src/views/db-manage/common/permission/components/mysql/create-rule/components/PreviewDiff.vue
@@ -28,10 +28,14 @@
       :is-active="collapseActive.accessDb"
       mode="collapse"
       :title="t('访问DB')">
-      <BkTable
-        :border="['col', 'outer']"
-        :columns="accessColumns"
-        :data="accessDbData" />
+      <BkTable :data="accessDbData">
+        <BkTableColumn
+          field="oldAccessDb"
+          :label="t('变更前')" />
+        <BkTableColumn
+          field="newAccessDb"
+          :label="t('变更后')" />
+      </BkTable>
     </DbCard>
     <DbCard
       v-model:collapse="collapseActive.privilege"
@@ -48,18 +52,49 @@
         </I18nT>
       </template>
       <BkTable
-        :border="['col', 'outer']"
-        :cell-class="getCellClass"
         class="privilege-table"
-        :columns="privilegeColumns"
         :data="privilegeData"
-        row-key="diffType" />
+        :merge-cells="mergeCells">
+        <BkTableColumn
+          class-name="cell-bold"
+          field="privilegeDisplay"
+          :label="t('权限类型')" />
+        <BkTableColumn :label="t('变更前')">
+          <template #default="{ data }: { data: PrivilegeRow }">
+            <div v-if="data.beforePrivilege">
+              <span>{{ data.beforePrivilege }}</span>
+              <span
+                v-if="data.isSensitiveWord"
+                class="sensitive-tip">
+                {{ t('敏感') }}
+              </span>
+            </div>
+            <span v-else>--</span>
+          </template>
+        </BkTableColumn>
+        <BkTableColumn
+          class-name="cell-privilege"
+          :label="t('变更后')">
+          <template #default="{ data }: { data: PrivilegeRow }">
+            <div
+              v-if="data.afterPrivilege"
+              :class="[data.diffType]">
+              <span>{{ data.afterPrivilege }}</span>
+              <span
+                v-if="data.isSensitiveWord"
+                class="sensitive-tip">
+                {{ t('敏感') }}
+              </span>
+            </div>
+            <span v-else>--</span>
+          </template>
+        </BkTableColumn>
+      </BkTable>
     </DbCard>
   </div>
 </template>
 
-<script setup lang="tsx">
-  import type { Column } from 'bkui-vue/lib/table/props';
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
   import type { AccountRule, AccountRulePrivilege, AccountRulePrivilegeKey } from '@services/types';
@@ -77,13 +112,13 @@
 
   interface Props {
     ruleSettingsConfig: {
-      dbOperations: AccountRulePrivilege,
-      ddlSensitiveWords: string[],
+      dbOperations: AccountRulePrivilege;
+      ddlSensitiveWords: string[];
     };
     rulesFormData: {
       beforeChange: AccountRule;
       afterChange: AccountRule;
-    }
+    };
   }
 
   interface Exposes {
@@ -104,6 +139,8 @@
     accessDb: true,
     privilege: true,
   });
+  const privilegeData = shallowRef<PrivilegeRow[]>([]);
+  const mergeCells = shallowRef<Array<{ row: number; col: number; rowspan: number; colspan: number }>>([]);
 
   const accessDbData = computed(() => [
     {
@@ -111,138 +148,100 @@
       newAccessDb: props.rulesFormData.afterChange?.access_db || '--',
     },
   ]);
+  const addCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'add').length);
+  const deleteCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'delete').length);
+
+  const tags: {
+    type: PrivilegeRow['diffType'];
+    text: string;
+  }[] = [
+    {
+      type: 'add',
+      text: t('新增'),
+    },
+    {
+      type: 'delete',
+      text: t('删除'),
+    },
+    {
+      type: 'unchanged',
+      text: t('不变'),
+    },
+  ];
 
   const diffArray = (oldArray: string[], newArray: string[]) => {
     const diffMap: Record<string, PrivilegeRow['diffType']> = Object.fromEntries(
-      oldArray.map(item => [item, 'delete'])
+      oldArray.map((item) => [item, 'delete']),
     );
-    newArray.forEach(item => {
+    newArray.forEach((item) => {
       diffMap[item] = diffMap[item] ? 'unchanged' : 'add';
     });
     return diffMap;
-  }
+  };
 
-  const getSensitiveWordMap = () => Object.fromEntries(
-    (props.ruleSettingsConfig.ddlSensitiveWords || []).map(word => [word, true])
-  );
+  const getSensitiveWordMap = () =>
+    Object.fromEntries((props.ruleSettingsConfig.ddlSensitiveWords || []).map((word) => [word, true]));
 
   const getPrivilegeData = (key: AccountRulePrivilegeKey) => {
     const beforeList = props.rulesFormData.beforeChange?.privilege[key] || [];
     const afterList = props.rulesFormData.afterChange?.privilege[key] || [];
     const diffMap = diffArray(beforeList, afterList);
     const sensitiveWordMap = getSensitiveWordMap();
-    return Object.entries(diffMap).reduce<PrivilegeRow[]>((acc, [privilege, diffType]) => [...acc, {
-      privilegeKey: key,
-      privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
-      beforePrivilege: diffType === 'add' ? '' : privilege,
-      afterPrivilege: privilege,
-      diffType,
-      isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
-    }], [])
+    return Object.entries(diffMap).reduce<PrivilegeRow[]>(
+      (acc, [privilege, diffType]) => [
+        ...acc,
+        {
+          privilegeKey: key,
+          privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
+          beforePrivilege: diffType === 'add' ? '' : privilege,
+          afterPrivilege: privilege,
+          diffType,
+          isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
+        },
+      ],
+      [],
+    );
   };
 
-  const privilegeData = computed(() => [
-    ...getPrivilegeData('dml'),
-    ...getPrivilegeData('ddl'),
-    ...getPrivilegeData('glob'),
-  ]);
-
-  const addCount = computed(() => privilegeData.value.filter(item => item.diffType === 'add').length);
-  const deleteCount = computed(() => privilegeData.value.filter(item => item.diffType === 'delete').length);
-
-  const tags: {
-    type: PrivilegeRow['diffType'],
-    text: string
-  }[] = [
+  watchEffect(() => {
+    const dmlData = getPrivilegeData('dml');
+    const ddlData = getPrivilegeData('ddl');
+    const globData = getPrivilegeData('glob');
+    mergeCells.value = [
       {
-        type: 'add',
-        text: t('新增'),
+        row: 0,
+        col: 0,
+        rowspan: dmlData.length,
+        colspan: 1,
       },
       {
-        type: 'delete',
-        text: t('删除'),
+        row: dmlData.length,
+        col: 0,
+        rowspan: ddlData.length,
+        colspan: 1,
       },
       {
-        type: 'unchanged',
-        text: t('不变'),
+        row: dmlData.length + ddlData.length,
+        col: 0,
+        rowspan: globData.length,
+        colspan: 1,
       },
     ];
-  const accessColumns: Column[] = [
-    {
-      label: t('变更前'),
-      field: 'oldAccessDb',
-      width: 300,
-    },
-    {
-      label: t('变更后'),
-      field: 'newAccessDb',
-      width: 300,
-    },
-  ];
-  const privilegeColumns: Column[] = [
-    {
-      label: t('权限类型'),
-      field: 'privilegeDisplay',
-      width: 200,
-      rowspan: ({ row }: { row: PrivilegeRow }) => {
-        const { privilegeKey } = row;
-        const rowSpan = privilegeData.value.filter((item) => item.privilegeKey === privilegeKey).length;
-        return rowSpan > 1 ? rowSpan : 1;
-      },
-      render: ({ row }: { row: PrivilegeRow }) => <span class="cell-bold">{row.privilegeDisplay}</span>
-    },
-    {
-      label: t('变更前'),
-      field: 'beforePrivilege',
-      width: 200,
-      render: ({ row }: { row: PrivilegeRow }) => {
-        const { beforePrivilege, isSensitiveWord } = row;
-        return beforePrivilege ? (
-          <div>
-            <span>{beforePrivilege}</span>
-            {
-              isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
-            }
-          </div>
-        ) : '--'
-      }
-    },
-    {
-      label: t('变更后'),
-      field: 'afterPrivilege',
-      width: 200,
-      render: ({ row }: { row: PrivilegeRow }) => {
-        const { afterPrivilege, isSensitiveWord } = row;
-        return (
-          <div>
-            <span>{afterPrivilege}</span>
-            {
-              isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
-            }
-          </div>
-        )
-      }
-    },
-  ];
-
-  const getCellClass = (data: { field: string }) => data.field === 'afterPrivilege' ? 'cell-privilege' : '';
+    privilegeData.value = [...dmlData, ...ddlData, ...globData];
+  });
 
   defineExpose<Exposes>({
     changed: {
-      accessDb: accessDbData.value[0].newAccessDb!== accessDbData.value[0].oldAccessDb,
+      accessDb: accessDbData.value[0].newAccessDb !== accessDbData.value[0].oldAccessDb,
       privilege: {
         addCount: addCount.value,
         deleteCount: deleteCount.value,
-      }
-    }
-  })
+      },
+    },
+  });
 </script>
 
 <style lang="less" scoped>
-  :deep(.bk-scrollbar-wrapper .bk-scrollbar-content-el) {
-    display: flex;
-  }
-
   .preview-diff {
     padding: 18px 24px;
 
@@ -317,8 +316,6 @@
       }
 
       .privilege-table {
-        height: calc(100vh - 400px) !important;
-
         .cell-bold {
           font-weight: 700;
         }
@@ -335,27 +332,14 @@
           border-radius: 2px;
         }
 
-        .cell-privilege {
-          .vxe-cell {
-            padding: 0;
-
-            div {
-              padding-left: 16px;
-            }
-          }
-        }
-
-        .cell-privilege[data-id^='add_'] {
+        .cell-privilege:has(.vxe-cell .add) {
           background-color: #f2fff4;
         }
 
-        .cell-privilege[data-id^='delete_'] {
+        .cell-privilege:has(.vxe-cell .delete) {
+          color: #f8b4b4;
+          text-decoration: line-through;
           background-color: #ffeeeee6;
-
-          .vxe-cell {
-            color: #f8b4b4;
-            text-decoration: line-through;
-          }
         }
       }
     }
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-account-rule-change/components/PreviewDiff.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-account-rule-change/components/PreviewDiff.vue
index 7f587a9882..3de5a5e324 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-account-rule-change/components/PreviewDiff.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/common/mysql-account-rule-change/components/PreviewDiff.vue
@@ -26,10 +26,14 @@
       :is-active="collapseActive.accessDb"
       mode="collapse"
       :title="t('访问DB变更前后对比')">
-      <BkTable
-        :border="['col', 'outer']"
-        :columns="accessColumns"
-        :data="accessDbData" />
+      <BkTable :data="accessDbData">
+        <BkTableColumn
+          field="oldAccessDb"
+          :label="t('变更前')" />
+        <BkTableColumn
+          field="newAccessDb"
+          :label="t('变更后')" />
+      </BkTable>
     </DbCard>
     <DbCard
       v-model:collapse="collapseActive.privilege"
@@ -46,18 +50,49 @@
         </I18nT>
       </template>
       <BkTable
-        :border="['col', 'outer']"
-        :cell-class="getCellClass"
         class="privilege-table"
-        :columns="privilegeColumns"
         :data="privilegeData"
-        row-key="diffType" />
+        :merge-cells="mergeCells">
+        <BkTableColumn
+          class-name="cell-bold"
+          field="privilegeDisplay"
+          :label="t('权限类型')" />
+        <BkTableColumn :label="t('变更前')">
+          <template #default="{ data }: { data: PrivilegeRow }">
+            <div v-if="data.beforePrivilege">
+              <span>{{ data.beforePrivilege }}</span>
+              <span
+                v-if="data.isSensitiveWord"
+                class="sensitive-tip">
+                {{ t('敏感') }}
+              </span>
+            </div>
+            <span v-else>--</span>
+          </template>
+        </BkTableColumn>
+        <BkTableColumn
+          class-name="cell-privilege"
+          :label="t('变更后')">
+          <template #default="{ data }: { data: PrivilegeRow }">
+            <div
+              v-if="data.afterPrivilege"
+              :class="[data.diffType]">
+              <span>{{ data.afterPrivilege }}</span>
+              <span
+                v-if="data.isSensitiveWord"
+                class="sensitive-tip">
+                {{ t('敏感') }}
+              </span>
+            </div>
+            <span v-else>--</span>
+          </template>
+        </BkTableColumn>
+      </BkTable>
     </DbCard>
   </div>
 </template>
 
-<script setup lang="tsx">
-  import type { Column } from 'bkui-vue/lib/table/props';
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
 
   import TicketModel, { type Mysql } from '@services/model/ticket/ticket';
@@ -95,11 +130,12 @@
     accessDb: true,
     privilege: true,
   });
-
   const rulesFormData = reactive({
     beforeChange: {} as AccountRule,
     afterChange: {} as AccountRule,
   });
+  const privilegeData = shallowRef<PrivilegeRow[]>([]);
+  const mergeCells = shallowRef<Array<{ row: number; col: number; rowspan: number; colspan: number }>>([]);
 
   const accessDbData = computed(() => [
     {
@@ -107,6 +143,42 @@
       newAccessDb: rulesFormData.afterChange.access_db || '--',
     },
   ]);
+  const addCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'add').length);
+  const deleteCount = computed(() => privilegeData.value.filter((item) => item.diffType === 'delete').length);
+
+  const diffArray = (oldArray: string[], newArray: string[]) => {
+    const diffMap: Record<string, PrivilegeRow['diffType']> = Object.fromEntries(
+      oldArray.map((item) => [item, 'delete']),
+    );
+    newArray.forEach((item) => {
+      diffMap[item] = diffMap[item] ? 'unchanged' : 'add';
+    });
+    return diffMap;
+  };
+
+  const getSensitiveWordMap = () =>
+    Object.fromEntries((configMap[props.accountType]?.ddlSensitiveWords || []).map((word) => [word, true]));
+
+  const getPrivilegeData = (key: AccountRulePrivilegeKey) => {
+    const beforeList = rulesFormData.beforeChange.privilege[key] || [];
+    const afterList = rulesFormData.afterChange.privilege[key] || [];
+    const diffMap = diffArray(beforeList, afterList);
+    const sensitiveWordMap = getSensitiveWordMap();
+    return Object.entries(diffMap).reduce<PrivilegeRow[]>(
+      (acc, [privilege, diffType]) => [
+        ...acc,
+        {
+          privilegeKey: key,
+          privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
+          beforePrivilege: diffType === 'add' ? '' : privilege,
+          afterPrivilege: privilege,
+          diffType,
+          isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
+        },
+      ],
+      [],
+    );
+  };
 
   watch(
     () => props.ticketDetails,
@@ -129,110 +201,35 @@
     },
   );
 
-  const diffArray = (oldArray: string[], newArray: string[]) => {
-    const diffMap: Record<string, PrivilegeRow['diffType']> = Object.fromEntries(
-      oldArray.map(item => [item, 'delete'])
-    );
-    newArray.forEach(item => {
-      diffMap[item] = diffMap[item] ? 'unchanged' : 'add';
-    });
-    return diffMap;
-  }
-
-  const getSensitiveWordMap = () => Object.fromEntries(
-    (configMap[props.accountType]?.ddlSensitiveWords || []).map(word => [word, true])
-  );
-
-  const getPrivilegeData = (key: AccountRulePrivilegeKey) => {
-    const beforeList = (rulesFormData.beforeChange.privilege as Record<AccountRulePrivilegeKey, string[]>)[key] || [];
-    const afterList = (rulesFormData.afterChange.privilege as Record<AccountRulePrivilegeKey, string[]>)[key] || [];
-    const diffMap = diffArray(beforeList, afterList);
-    const sensitiveWordMap = getSensitiveWordMap();
-    return Object.entries(diffMap).reduce<PrivilegeRow[]>((acc, [privilege, diffType]) => [...acc, {
-      privilegeKey: key,
-      privilegeDisplay: key === 'glob' ? t('全局') : key.toUpperCase(),
-      beforePrivilege: diffType === 'add' ? '' : privilege,
-      afterPrivilege: privilege,
-      diffType,
-      isSensitiveWord: key === 'glob' || sensitiveWordMap[privilege],
-    }], [])
-  };
-
-  const privilegeData = computed(() => [
-    ...getPrivilegeData('dml'),
-    ...getPrivilegeData('ddl'),
-    ...getPrivilegeData('glob'),
-  ]);
-
-  const addCount = computed(() => privilegeData.value.filter(item => item.diffType === 'add').length);
-  const deleteCount = computed(() => privilegeData.value.filter(item => item.diffType === 'delete').length);
-
-  const accessColumns: Column[] = [
-    {
-      label: t('变更前'),
-      field: 'oldAccessDb',
-      width: 250,
-    },
-    {
-      label: t('变更后'),
-      field: 'newAccessDb',
-      width: 250,
-    },
-  ];
-  const privilegeColumns: Column[] = [
-    {
-      label: t('权限类型'),
-      field: 'privilegeDisplay',
-      width: 180,
-      rowspan: ({ row }: { row: PrivilegeRow }) => {
-        const { privilegeKey } = row;
-        const rowSpan = privilegeData.value.filter((item) => item.privilegeKey === privilegeKey).length;
-        return rowSpan > 1 ? rowSpan : 1;
+  watchEffect(() => {
+    const dmlData = getPrivilegeData('dml');
+    const ddlData = getPrivilegeData('ddl');
+    const globData = getPrivilegeData('glob');
+    mergeCells.value = [
+      {
+        row: 0,
+        col: 0,
+        rowspan: dmlData.length,
+        colspan: 1,
       },
-      render: ({ row }: { row: PrivilegeRow }) => <span class="cell-bold">{row.privilegeDisplay}</span>
-    },
-    {
-      label: t('变更前'),
-      field: 'beforePrivilege',
-      width: 180,
-      render: ({ row }: { row: PrivilegeRow }) => {
-        const { beforePrivilege, isSensitiveWord } = row;
-        return beforePrivilege ? (
-          <div>
-            <span>{beforePrivilege}</span>
-            {
-              isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
-            }
-          </div>
-        ) : '--'
-      }
-    },
-    {
-      label: t('变更后'),
-      field: 'afterPrivilege',
-      width: 180,
-      render: ({ row }: { row: PrivilegeRow }) => {
-        const { afterPrivilege, isSensitiveWord } = row;
-        return (
-          <div>
-            <span>{afterPrivilege}</span>
-            {
-              isSensitiveWord && <span class="sensitive-tip">{t('敏感')}</span>
-            }
-          </div>
-        )
-      }
-    },
-  ];
-
-  const getCellClass = (data: { field: string }) => data.field === 'afterPrivilege' ? 'cell-privilege' : '';
+      {
+        row: dmlData.length,
+        col: 0,
+        rowspan: ddlData.length,
+        colspan: 1,
+      },
+      {
+        row: dmlData.length + ddlData.length,
+        col: 0,
+        rowspan: globData.length,
+        colspan: 1,
+      },
+    ];
+    privilegeData.value = [...dmlData, ...ddlData, ...globData];
+  });
 </script>
 
 <style lang="less" scoped>
-  :deep(.bk-scrollbar-wrapper .bk-scrollbar-content-el) {
-    display: flex;
-  }
-
   .preview-diff {
     .preview-diff-title {
       font-size: 14px;
@@ -285,27 +282,14 @@
           border-radius: 2px;
         }
 
-        .cell-privilege {
-          .vxe-cell {
-            padding: 0;
-
-            div {
-              padding-left: 16px;
-            }
-          }
-        }
-
-        .cell-privilege[data-id^='add_'] {
+        .cell-privilege:has(.vxe-cell .add) {
           background-color: #f2fff4;
         }
 
-        .cell-privilege[data-id^='delete_'] {
+        .cell-privilege:has(.vxe-cell .delete) {
+          color: #f8b4b4;
+          text-decoration: line-through;
           background-color: #ffeeeee6;
-
-          .vxe-cell {
-            color: #f8b4b4;
-            text-decoration: line-through;
-          }
         }
       }
     }