feat：用户个人视角 权限管理优化 #11138

src/frontend/devops-manage/src/components/project-user-selector.vue

@@ -3,7 +3,7 @@
     ref="tagInputRef"
     class="manage-user-selector"
     clearable
-    :placeholder="t('输入授权人，选中回车进行校验')"
+    :placeholder="t('输入交接人，选中回车进行有效性校验')"
     :search-key="searchKeyArr"
     save-key="id"
     display-key="displayName"

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/detail-group-tab.vue

@@ -0,0 +1,238 @@
+<template>
+  <bk-loading
+    :loading="detailGroupTable.isLoading"
+    :zIndex="100"
+    class="group-tab"
+  >
+    <div class="manage-content-project" v-if="projectTable.length">
+      <p class="project-group">
+        <span>{{t("资源授权")}}</span>
+      </p>
+      <div
+        class="project-group-table"
+        v-for="item in projectTable"
+        :key="item.resourceType"
+      >
+        <bk-collapse-panel
+          v-model="item.activeFlag"
+          :item-click="(type) => collapseClick(type, HandoverType.AUTHORIZATION)"
+          :name="item.resourceType"
+        >
+          <template #header>
+            <p class="group-title">
+              <i :class="getShapeIconClass(item.activeFlag)" />
+              <img
+                v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
+                :src="detailGroupTable.getServiceIcon(item.resourceType)"
+                class="service-icon"
+              >
+              {{item.resourceTypeName}} ({{ item.resourceType }})
+              <span class="group-num">{{item.count}}</span>
+            </p>
+          </template>
+          <template #content>
+            <TabTable
+              v-if="item.tableData"
+              :data="item.tableData"
+              :isAuthorizations="true"
+              :pagination="item.pagination"
+              :resource-type="item.resourceType"
+              :resource-name="item.resourceTypeName"
+              :loading="item.tableLoading"
+              :group-name="item.resourceTypeName"
+              :type="HandoverType.AUTHORIZATION"
+              @page-limit-change="pageLimitChange"
+              @page-value-change="pageValueChange"
+            />
+          </template>
+        </bk-collapse-panel>
+      </div>
+    </div>
+    <div class="manage-content-resource" v-if="sourceTable.length">
+      <p class="project-group">
+        <span>{{t("用户组")}}</span>
+      </p>
+      <div
+        class="project-group-table"
+        v-for="item in sourceTable"
+        :key="item.resourceType"
+      >
+        <bk-collapse-panel
+          v-model="item.activeFlag"
+          :item-click="(type) => collapseClick(type, HandoverType.GROUP)"
+          :name="item.resourceType"
+        >
+          <template #header>
+            <p class="group-title">
+              <i :class="getShapeIconClass(item.activeFlag)" />
+              <img
+                v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
+                :src="detailGroupTable.getServiceIcon(item.resourceType)"
+                class="service-icon"
+              >
+              {{item.resourceTypeName}} ({{ item.resourceType }})
+              <span class="group-num">{{item.count}}</span>
+            </p>
+          </template>
+          <template #content>
+            <TabTable
+              v-if="item.tableData"
+              :data="item.tableData"
+              :pagination="item.pagination"
+              :resource-type="item.resourceType"
+              :resource-name="item.resourceTypeName"
+              :loading="item.tableLoading"
+              :group-name="item.resourceTypeName"
+              :type="HandoverType.GROUP"
+              @page-limit-change="pageLimitChange"
+              @page-value-change="pageValueChange"
+            />
+          </template>
+        </bk-collapse-panel>
+      </div>
+    </div>
+  </bk-loading>
+</template>
+
+<script setup name="GroupTab">
+import { useI18n } from 'vue-i18n';
+import { defineProps, defineEmits, computed } from 'vue';
+import userDetailGroupTable, { HandoverType } from '@/store/userDetailGroupTable';
+import TabTable from './detail-tab-table.vue';
+
+const props = defineProps({
+  sourceList: {
+    type: Array,
+    default: () => [],
+  },
+  pageLimitChange: {
+    type: Function,
+    default: () => {},
+  },
+  pageValueChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+const { t } = useI18n();
+const detailGroupTable = userDetailGroupTable();
+const projectTable = computed(() => props.sourceList.filter(item => item.type === HandoverType.AUTHORIZATION));
+const sourceTable= computed(() => props.sourceList.filter(item => item.type === HandoverType.GROUP));
+
+const emit = defineEmits(['collapseClick']);
+
+function getShapeIconClass(activeFlag) {
+  return `shape-icon manage-icon manage-icon-${activeFlag ? 'down' : 'right'}-shape`
+}
+/**
+ * 折叠面板点击事件
+ * @param id 折叠面板唯一标志
+ */
+function collapseClick(resourceType, flag) {
+  emit('collapseClick', resourceType.name, flag);
+}
+</script>
+
+<style lang="less" scoped>
+.group-tab {
+  width: calc(100% - 8px);
+
+  .manage-content-common {
+    background: #FFFFFF;
+    padding: 16px 24px;
+    box-shadow: 0 2px 4px 0 #1919290d;
+  }
+  .manage-content-project {
+    margin-bottom: 15px;
+    .manage-content-common();
+  }
+
+  .manage-content-resource {
+    .manage-content-common();
+  }
+
+  .project-group {
+    display: flex;
+    font-weight: 700;
+    font-size: 14px;
+    color: #63656E;
+    margin-bottom: 16px;
+    letter-spacing: 0;
+    line-height: 22px;
+
+    .describe {
+      width: 640px;
+      margin-left: 24px;
+      font-size: 12px;
+      color: #4D4F56;
+      font-weight: 500;
+    }
+
+    .text-blue{
+      color: #699DF4;
+    }
+  }
+
+  .project-group-table {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 16px;
+
+    .permission {
+      margin-bottom: 10px;
+    }
+
+    .bk-table {
+      border: 1px solid #dcdee5;
+    }
+
+    ::v-deep .bk-collapse-content {
+      padding: 0 !important;
+    }
+
+    .group-title {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 26px;
+      line-height: 26px;
+      padding-left: 10px;
+      background: #EAEBF0;
+      border-radius: 2px;
+      font-size: 12px;
+      color: #313238;
+      cursor: pointer;
+
+      .service-icon {
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+      }
+
+      .shape-icon {
+        color: #989ca7;
+        margin-right: 10px;
+      }
+    }
+
+    .group-num {
+      display: inline-block;
+      width: 23px;
+      height: 16px;
+      line-height: 16px;
+      background: #F0F1F5;
+      border-radius: 2px;
+      font-size: 12px;
+      color: #979BA5;
+      letter-spacing: 0;
+      text-align: center;
+      margin-left: 5px;
+    }
+
+    .operation-btn {
+      display: flex;
+      justify-content: space-around;
+    }
+  }
+}
+</style>

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/detail-tab-table.vue

@@ -0,0 +1,75 @@
+<template>
+  <bk-loading :loading="loading" :zIndex="100">
+    <bk-table
+      class="detail-table"
+      ref="refTable"
+      :max-height="!isShowOperation && 464"
+      :data="data"
+      show-overflow-tooltip
+      :pagination="pagination"
+      :border="border"
+      remote-pagination
+      empty-cell-text="--"
+      @page-limit-change="pageLimitChange"
+      @page-value-change="pageValueChange"
+    >
+      <bk-table-column :label="groupName" prop="resourceName" />
+      <template v-if="!isAuthorizations">
+        <bk-table-column :label="t('用户组')" prop="groupName" />
+      </template>
+      <template v-else>
+        <bk-table-column :label="t('授权人')" prop="handoverFrom" />
+      </template>
+    </bk-table>
+  </bk-loading>
+</template>
+
+<script setup name="TabTable">
+import { useI18n } from 'vue-i18n';
+import { ref, defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+  pagination: Object,
+  resourceType: String,
+  resourceName: String,
+  loading: Boolean,
+  groupName: String,
+  isAuthorizations: {
+    type: Boolean,
+    default: false
+  },
+  type: String
+});
+const emit = defineEmits([
+  'pageLimitChange',
+  'pageValueChange',
+])
+const { t } = useI18n();
+const refTable = ref(null);
+const border = ['row', 'outer'];
+
+function pageLimitChange(limit) {
+  emit('pageLimitChange',limit, props.resourceType, props.type);
+}
+function pageValueChange(value) {
+  emit('pageValueChange',value, props.resourceType, props.type);
+}
+</script>
+
+<style lang="less" scoped>
+.detail-table {
+  margin-top: 4px;
+  border: 1px solid #DCDEE5;
+
+  .hover-link {
+    cursor: pointer;
+    &:hover {
+      color: #3a84ff;
+    }
+  }
+}
+</style>

src/frontend/devops-manage/src/components/user-group/components/children/permission-manage/group-tab.vue

@@ -57,7 +57,11 @@
                 'manage-icon manage-icon-right-shape': !item.activeFlag,
                 'shape-icon': true,
               }" />
-              <img v-if="item.resourceType" :src="getServiceIcon(item.resourceType)" class="service-icon" alt="">
+              <img
+                v-if="item.resourceType && detailGroupTable.getServiceIcon(item.resourceType)"
+                :src="detailGroupTable.getServiceIcon(item.resourceType)"
+                class="service-icon" alt=""
+              >
               {{item.resourceTypeName}} ({{ item.resourceType }})
               <span class="group-num">{{item.count}}</span>
             </p>
@@ -101,40 +105,13 @@ import { useI18n } from 'vue-i18n';
 import { defineProps, defineEmits, computed } from 'vue';
 import userGroupTable from '@/store/userGroupTable';
 import TabTable from './tab-table.vue';
-import pipelineIcon from '../../../svg/color-logo-pipeline.svg';
-import codelibIcon from '../../../svg/color-logo-codelib.svg';
-import codeccIcon from '../../../svg/color-logo-codecc.svg';
-import environmentIcon from '../../../svg/color-logo-environment.svg';
-import experienceIcon from '../../../svg/color-logo-experience.svg';
-import qualityIcon from '../../../svg/color-logo-quality.svg';
-import ticketIcon from '../../../svg/color-logo-ticket.svg';
-import turboIcon from '../../../svg/color-logo-turbo.svg';
+import userDetailGroupTable from '@/store/userDetailGroupTable';
 
 const { t } = useI18n();
 const groupTableStore = userGroupTable();
 const projectTable = computed(() => props.sourceList.find(item => item.resourceType == 'project'));
 const sourceTable= computed(() => props.sourceList.filter(item => item.resourceType != 'project'));
-
-const getServiceIcon = (type) => {
-  const iconMap = {
-    'pipeline': pipelineIcon,
-    'pipeline_group': pipelineIcon,
-    'repertory': codelibIcon,
-    'credential': ticketIcon,
-    'cert': ticketIcon,
-    'environment': environmentIcon,
-    'env_node': pipelineIcon,
-    'codecc_task': codeccIcon,
-    'codecc_rule_set': codeccIcon,
-    'codecc_ignore_type': codeccIcon,
-    'experience_task': experienceIcon,
-    'experience_group': experienceIcon,
-    'rule': qualityIcon,
-    'quality_group': qualityIcon,
-    'pipeline_template': pipelineIcon,
-  }
-  return iconMap[type]
-}
+const detailGroupTable = userDetailGroupTable();
 
 const props = defineProps({
   isShowOperation: {