@epxing/business 0.0.0-stage → 5.3.0-beta.1

package/src/components/authorization/AiRolePlan.vue

@@ -0,0 +1,751 @@
+<template>
+  <div class="ai-role-plan">
+    <div class="ai-role-plan__overview">
+      <div class="ai-role-plan__overview-title">
+        <i class="el-icon-user-solid"></i>
+        <span>角色管理概览</span>
+      </div>
+      <div class="ai-role-plan__overview-meta">
+        <span>已有 <em>{{ reuseList.length }}</em></span>
+        <span class="ai-role-plan__dot">·</span>
+        <span>修改 <em>{{ editList.length }}</em></span>
+        <span class="ai-role-plan__dot">·</span>
+        <span>新增 <em>{{ createList.length }}</em></span>
+      </div>
+      <el-button type="primary" size="small" @click="confirmSubmit">确认提交</el-button>
+    </div>
+
+    <section
+      v-for="section in sections"
+      :key="section.key"
+      class="ai-role-plan__section"
+    >
+      <header class="ai-role-plan__section-header" @click="toggle(section.key)">
+        <div class="ai-role-plan__section-title">
+          <span class="ai-role-plan__badge" :class="'ai-role-plan__badge--' + section.key">{{ section.badge }}</span>
+          <div>
+            <div class="ai-role-plan__section-name">{{ section.label }}（{{ section.list.length }}）</div>
+            <div class="ai-role-plan__section-code">{{ section.code }}</div>
+          </div>
+        </div>
+        <i
+          class="el-icon-arrow-up ai-role-plan__chevron"
+          :class="{ 'ai-role-plan__chevron--collapsed': collapsed[section.key] }"
+        ></i>
+      </header>
+      <div v-show="!collapsed[section.key]" class="ai-role-plan__section-body">
+        <el-table v-if="section.list.length" :data="section.list" class="ai-role-plan__table" border>
+          <el-table-column type="index" label="序号" width="80" />
+          <el-table-column label="角色名称" min-width="200">
+            <template v-slot="scope">
+              <div class="ai-role-plan__role-name">{{ scope.row.roleName }}</div>
+              <div
+                v-if="section.key === 'reuse' && scope.row.mappedFrom && scope.row.mappedFrom.length"
+                class="ai-role-plan__role-sub"
+              >归并自：{{ scope.row.mappedFrom.join('、') }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色编号" min-width="180">
+            <template v-slot="scope">
+              <span class="ai-role-plan__code-tag">{{ scope.row.roleCode }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色级别" min-width="200">
+            <template v-slot="scope">
+              <template v-if="section.key === 'edit'">
+                <span class="ai-role-plan__level-tag" :class="levelClass(scope.row.currentRoleLevel)">{{ scope.row.currentRoleLevel }}</span>
+                <i class="el-icon-right ai-role-plan__arrow"></i>
+                <span class="ai-role-plan__level-tag" :class="levelClass(scope.row.targetRoleLevel)">{{ scope.row.targetRoleLevel }}</span>
+              </template>
+              <span v-else class="ai-role-plan__level-tag" :class="levelClass(scope.row.roleLevel)">{{ scope.row.roleLevel }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="section.key !== 'reuse'" :label="section.key === 'edit' ? '变更原因' : '新增原因'" min-width="280" show-overflow-tooltip>
+            <template v-slot="scope">{{ scope.row.reason }}</template>
+          </el-table-column>
+          <el-table-column label="操作" width="120" align="right">
+            <template v-slot="scope">
+              <el-button type="text" @click="viewDetail(scope.row, section.key)">查看详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div v-else class="ai-role-plan__empty">暂无数据</div>
+      </div>
+    </section>
+
+    <el-drawer
+      class="epx-drawer ai-role-plan__drawer"
+      v-model="detailDialog"
+      size="720px"
+      :title="currentRole.roleName ? currentRole.roleName + ' - 接口权限详情' : '接口权限详情'"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="ai-role-plan__drawer-body">
+      <div class="ai-role-plan__detail-info">
+        <div class="ai-role-plan__detail-row">
+          <span class="ai-role-plan__detail-label">角色编号：</span>
+          <span class="ai-role-plan__code-tag">{{ currentRole.roleCode }}</span>
+        </div>
+        <div class="ai-role-plan__detail-row" v-if="currentSection === 'edit'">
+          <span class="ai-role-plan__detail-label">级别变更：</span>
+          <span class="ai-role-plan__level-tag" :class="levelClass(currentRole.currentRoleLevel)">{{ currentRole.currentRoleLevel }}</span>
+          <i class="el-icon-right ai-role-plan__arrow"></i>
+          <span class="ai-role-plan__level-tag" :class="levelClass(currentRole.targetRoleLevel)">{{ currentRole.targetRoleLevel }}</span>
+        </div>
+        <div class="ai-role-plan__detail-row" v-else>
+          <span class="ai-role-plan__detail-label">角色级别：</span>
+          <span class="ai-role-plan__level-tag" :class="levelClass(currentRole.roleLevel)">{{ currentRole.roleLevel }}</span>
+        </div>
+        <div class="ai-role-plan__detail-row" v-if="currentRole.reason">
+          <span class="ai-role-plan__detail-label">{{ currentSection === 'edit' ? '变更原因：' : '新增原因：' }}</span>
+          <span class="ai-role-plan__detail-text">{{ currentRole.reason }}</span>
+        </div>
+        <div class="ai-role-plan__detail-row" v-if="currentSection === 'reuse' && currentRole.mappedFrom && currentRole.mappedFrom.length">
+          <span class="ai-role-plan__detail-label">归并自：</span>
+          <span class="ai-role-plan__detail-text">{{ currentRole.mappedFrom.join('、') }}</span>
+        </div>
+      </div>
+
+      <div class="ai-role-plan__detail-toolbar">
+        <span class="ai-role-plan__detail-subtitle">接口权限</span>
+        <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddPermission">添加角色权限</el-button>
+      </div>
+
+      <el-table v-if="visibleEntities.length" :data="visibleEntities" class="ai-role-plan__detail-table" border>
+        <el-table-column label="对象名称" min-width="220">
+          <template v-slot="scope">
+            <span>{{ scope.row.ENTITY_NAME }}</span>
+            <span v-if="scope.row.ENTITY_ID && scope.row.ENTITY_ID !== '待配置'" class="ai-role-plan__role-sub">（{{ scope.row.ENTITY_ID }}）</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="功能权限">
+          <template v-slot="scope">
+            <el-popover
+              v-for="p in scope.row.permissions"
+              :key="p.RIGHT"
+              placement="top-start"
+              trigger="hover"
+            >
+              <template v-slot:reference>
+                <span
+                  class="ai-role-plan__permission"
+                  :class="{ 'is-disabled': p.STATUS !== 'enable', 'is-new': p.IS_EXIT === '0' }"
+                >
+                  {{ p.RIGHT_NAME }}
+                  <i
+                    class="el-icon-close ai-role-plan__permission-del"
+                    @click.stop="removePermission(scope.row, p)"
+                  ></i>
+                </span>
+              </template>
+              <div class="ai-role-plan__permission-popover">
+                <div><strong>{{ p.RIGHT_NAME }}</strong></div>
+                <div>权限编号：{{ p.RIGHT }}</div>
+                <div>状态：{{ p.STATUS === 'enable' ? '启用' : '停用' }}</div>
+                <div>接口类型：{{ p.IS_EXIT === '0' ? '新增接口' : '已有接口' }}</div>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-else class="ai-role-plan__empty">暂无接口权限</div>
+      </div>
+    </el-drawer>
+
+    <el-dialog
+      class="ai-role-plan__add-dialog"
+      v-model="addDialog"
+      title="添加角色权限"
+      width="900px"
+      append-to-body
+      destroy-on-close
+    >
+      <div class="ai-role-plan__add-body">
+        <el-input
+          v-model="searchKey"
+          class="ai-role-plan__add-search"
+          placeholder="请输入对象名称"
+          prefix-icon="el-icon-search"
+          clearable
+          size="small"
+          @clear="onSearch"
+          @keyup.enter="onSearch"
+        />
+        <div class="ai-role-plan__add-scroll">
+          <el-table
+            v-loading="treeLoading"
+            :data="rows"
+            class="ai-role-plan__add-table"
+          >
+            <el-table-column label="对象名称" min-width="160" prop="entityName" />
+            <el-table-column label="全选" width="80">
+              <template v-slot="{ row }">
+                <el-checkbox
+                  :value="isRowAllChecked(row)"
+                  :indeterminate="isRowIndeterminate(row)"
+                  @change="toggleRow(row, $event)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="对象操作" min-width="420">
+              <template v-slot="{ row }">
+                <el-checkbox
+                  v-for="item in row.items"
+                  :key="item.ID"
+                  class="ai-role-plan__op-check"
+                  :title="itemLabel(item)"
+                  :value="!!selectedMap[item.ID] || item.disabled"
+                  :disabled="item.disabled"
+                  @change="toggleItem(item, $event)"
+                >{{ itemLabel(item) }}</el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-pagination
+          class="ai-role-plan__add-pager"
+          layout="prev, pager, next, total"
+          :total="rightTotal"
+          :page-size="rightPageSize"
+          :current-page="rightPage"
+          @current-change="onPageChange"
+        />
+      </div>
+      <template v-slot:footer>
+        <el-button type="primary" @click="confirmAddPermission">保存</el-button>
+        <el-button @click="addDialog = false">取消</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+
+export default {
+  name: 'epx-authorization-ai-role-plan',
+  mixins: [component],
+  props: {
+    value: { type: Object, default: () => ({}) }
+  },
+  data () {
+    return {
+      collapsed: { reuse: false, edit: false, create: false },
+      detailDialog: false,
+      currentRole: {},
+      currentSection: '',
+      currentEntities: [],
+      // 添加角色权限选择器
+      addDialog: false,
+      treeLoading: false,
+      rows: [],
+      rightTotal: 0,
+      rightPage: 1,
+      rightPageSize: 20,
+      searchKey: '',
+      selectedMap: {}
+    }
+  },
+  computed: {
+    planData () {
+      return this.$configs.data || this.$query.data || this.value || {}
+    },
+    operationPlan () {
+      return this.planData.roleOperationPlan || {}
+    },
+    reuseList () {
+      return this.operationPlan.reuse || []
+    },
+    editList () {
+      return this.operationPlan.edit || []
+    },
+    createList () {
+      return this.operationPlan.create || []
+    },
+    sections () {
+      return [
+        { key: 'reuse', badge: '复', label: '已有的复用角色', code: 'EXISTING_ROLES_REUSED', list: this.reuseList },
+        { key: 'edit', badge: '改', label: '修改的角色', code: 'EXISTING_ROLES_EDITED', list: this.editList },
+        { key: 'create', badge: '新', label: '新增的角色', code: 'NEW_ROLES_ADDED', list: this.createList }
+      ]
+    },
+    // 详情表格展示：过滤掉已软删除（IS_DELETE==='1'）的权限及空对象
+    visibleEntities () {
+      return this.currentEntities
+        .map(entity => ({
+          ...entity,
+          permissions: (entity.permissions || []).filter(p => p.IS_DELETE !== '1')
+        }))
+        .filter(entity => entity.permissions.length)
+    },
+    // 当前角色已有且未被软删除的权限编号集合，用于在选择器中标记禁用
+    existingRightIds () {
+      const ids = []
+      this.currentEntities.forEach(entity => {
+        ;(entity.permissions || []).forEach(p => {
+          if (p.IS_DELETE !== '1') ids.push(p.RIGHT)
+        })
+      })
+      return ids
+    }
+  },
+  methods: {
+    toggle (key) {
+      this.collapsed[key] = !this.collapsed[key]
+    },
+    levelClass (level) {
+      if (level === '平台级') return 'ai-role-plan__level-tag--high'
+      if (level === '部门级') return 'ai-role-plan__level-tag--mid'
+      if (level === '个人级') return 'ai-role-plan__level-tag--low'
+      return ''
+    },
+    viewDetail (role, sectionKey) {
+      this.currentRole = role
+      this.currentSection = sectionKey
+      // 直接引用 planData 中真实的 ENTITIES 数组，保证增删改可持久化
+      if (!this.planData.authorizationPlan) this.planData.authorizationPlan = []
+      let entry = this.planData.authorizationPlan.find(i => i.ROLE_CODE === role.roleCode)
+      if (!entry) {
+        entry = { ROLE_CODE: role.roleCode, ENTITIES: [] }
+        this.planData.authorizationPlan.push(entry)
+      }
+      this.currentEntities = entry.ENTITIES
+      this.detailDialog = true
+    },
+    removePermission (entity, permission) {
+      if (permission.IS_EXIT === '1') {
+        // 已有接口：软删除，保留数据并标记 IS_DELETE，供提交时识别
+        permission.IS_DELETE = '1'
+        return
+      }
+      // 新增接口：直接从真实数组移除
+      const real = this.currentEntities.find(e => e.ENTITY_ID === entity.ENTITY_ID)
+      if (!real) return
+      const idx = real.permissions.indexOf(permission)
+      if (idx > -1) real.permissions.splice(idx, 1)
+    },
+    // ---- 添加角色权限 ----
+    openAddPermission () {
+      this.selectedMap = {}
+      this.searchKey = ''
+      this.rightPage = 1
+      this.addDialog = true
+      this.$nextTick(() => this.loadRights())
+    },
+    onSearch () {
+      this.rightPage = 1
+      this.loadRights()
+    },
+    loadRights () {
+      this.treeLoading = true
+      const params = {
+        action: 'listTree',
+        entityId: 'FM_ENTITY_RIGHT',
+        parentField: 'ENTITY',
+        page: this.rightPage,
+        limit: this.rightPageSize,
+        transferFieldNames: 'ENTITY#'
+      }
+      const key = this.searchKey.trim()
+      if (key) params['scope.ENTITY'] = key
+      this.$http.$post(params)
+        .then(data => {
+          const list = (data && data.entitys) || []
+          this.rightTotal = (data && data.total) || list.length
+          this.rows = this.buildRows(list)
+        })
+        .finally(() => {
+          this.treeLoading = false
+        })
+    },
+    onPageChange (page) {
+      this.rightPage = page
+      this.loadRights()
+    },
+    // 把 listTree(parentField:ENTITY) 返回的「对象 - 权限项」两级结构整理成表格行
+    buildRows (list) {
+      const hasTree = list.some(node => node.children && node.children.length)
+      if (hasTree) {
+        return list.map(node => {
+          const child = (node.children && node.children[0]) || {}
+          return {
+            entityId: node.ENTITY || child.ENTITY || node.ID,
+            entityName: node['ENTITY#'] || child['ENTITY#'] || node.ENTITY || node.ID,
+            items: (node.children || []).map(item => ({
+              ...item,
+              disabled: this.existingRightIds.includes(item.ID)
+            }))
+          }
+        })
+      }
+      // 兜底：返回扁平列表时按 ENTITY 客户端分组
+      const groups = {}
+      const order = []
+      list.forEach(item => {
+        const key = item.ENTITY || '未分类'
+        if (!groups[key]) {
+          groups[key] = {
+            entityId: item.ENTITY,
+            entityName: item['ENTITY#'] || item.ENTITY,
+            items: []
+          }
+          order.push(key)
+        }
+        groups[key].items.push({
+          ...item,
+          disabled: this.existingRightIds.includes(item.ID)
+        })
+      })
+      return order.map(k => groups[k])
+    },
+    // 接口集格式化为 {api1,api2}
+    formatApis (apis) {
+      if (!apis) return ''
+      const arr = Array.isArray(apis) ? apis : String(apis).split(',')
+      return arr.map(a => (a && typeof a === 'object' ? (a.ID || a.NAME) : a)).filter(Boolean).join(',')
+    },
+    itemLabel (item) {
+      const apis = this.formatApis(item.APIS)
+      return apis ? `${item.NAME || item.ID}{${apis}}` : (item.NAME || item.ID)
+    },
+    // 行内可勾选（未禁用）的权限项
+    selectableItems (row) {
+      return row.items.filter(item => !item.disabled)
+    },
+    isRowAllChecked (row) {
+      const selectable = this.selectableItems(row)
+      return selectable.length > 0 && selectable.every(item => this.selectedMap[item.ID])
+    },
+    isRowIndeterminate (row) {
+      const selectable = this.selectableItems(row)
+      const checked = selectable.filter(item => this.selectedMap[item.ID]).length
+      return checked > 0 && checked < selectable.length
+    },
+    toggleRow (row, checked) {
+      this.selectableItems(row).forEach(item => this.toggleItem(item, checked))
+    },
+    toggleItem (item, checked) {
+      if (item.disabled) return
+      if (checked) this.selectedMap[item.ID] = item
+      else delete this.selectedMap[item.ID]
+    },
+    confirmAddPermission () {
+      Object.values(this.selectedMap).forEach(raw => {
+        let entity = this.currentEntities.find(e => e.ENTITY_ID === raw.ENTITY)
+        if (!entity) {
+          entity = { ENTITY_ID: raw.ENTITY, ENTITY_NAME: raw['ENTITY#'] || raw.ENTITY, permissions: [] }
+          this.currentEntities.push(entity)
+        }
+        const existing = entity.permissions.find(p => p.RIGHT === raw.ID)
+        if (existing) {
+          // 已存在：若之前被软删除则恢复（保持其原 IS_EXIT）
+          if (existing.IS_DELETE === '1') existing.IS_DELETE = '0'
+        } else {
+          entity.permissions.push({
+            RIGHT: raw.ID,
+            RIGHT_NAME: raw.NAME,
+            STATUS: 'enable',
+            IS_LOCAL: '1',
+            IS_EXIT: '0',
+            IS_DELETE: '0'
+          })
+        }
+      })
+      this.addDialog = false
+      this.selectedMap = {}
+    },
+    confirmSubmit () {
+      const sendMessage = this.$query?.sendMessage || this.query?.sendMessage
+      if (sendMessage) {
+        sendMessage('确认提交', null, { inputParam: { data: this.planData } })
+        this.$query?.closePage?.()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-role-plan {
+  margin: 0;
+  padding: 16px;
+  background: var(--epx-bg);
+  min-height: 100%;
+  box-sizing: border-box;
+}
+.ai-role-plan__overview {
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-l);
+  padding: 20px 24px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ai-role-plan__overview-title {
+  display: flex;
+  align-items: center;
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+  color: var(--epx-text);
+  > i {
+    margin-right: 8px;
+    font-size: 20px;
+    color: var(--epx-text-secondary);
+  }
+}
+.ai-role-plan__overview-meta {
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-s);
+  em {
+    font-style: normal;
+    font-weight: 600;
+    color: var(--epx-text);
+    margin: 0 4px;
+  }
+}
+.ai-role-plan__dot {
+  margin: 0 8px;
+  color: var(--epx-text-secondary);
+}
+.ai-role-plan__section {
+  background: var(--epx-bg-card);
+  border-radius: var(--epx-radius-l);
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.ai-role-plan__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  cursor: pointer;
+  user-select: none;
+}
+.ai-role-plan__section-title {
+  display: flex;
+  align-items: center;
+}
+.ai-role-plan__badge {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  color: #fff;
+  font-size: var(--epx-font-size-base);
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+.ai-role-plan__badge--reuse {
+  @include bg_color_primary;
+}
+.ai-role-plan__badge--edit {
+  background: #e6a23c;
+}
+.ai-role-plan__badge--create {
+  background: #67c23a;
+}
+.ai-role-plan__section-name {
+  font-size: var(--epx-font-size-l);
+  font-weight: 600;
+  color: var(--epx-text);
+  line-height: 1.4;
+}
+.ai-role-plan__section-code {
+  font-size: var(--epx-font-size-s);
+  color: var(--epx-text-secondary);
+  margin-top: 2px;
+  letter-spacing: 0.5px;
+}
+.ai-role-plan__chevron {
+  color: var(--epx-text-secondary);
+  transition: transform 0.2s ease;
+}
+.ai-role-plan__chevron--collapsed {
+  transform: rotate(180deg);
+}
+.ai-role-plan__section-body {
+  padding: 0 24px 20px;
+}
+.ai-role-plan__table {
+  :deep(th) {
+    background: var(--epx-bg);
+    color: var(--epx-text-secondary);
+    font-weight: 500;
+  }
+}
+.ai-role-plan__role-name {
+  color: var(--epx-text);
+  font-weight: 500;
+}
+.ai-role-plan__role-sub {
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-s);
+  margin-top: 4px;
+}
+.ai-role-plan__code-tag {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--epx-radius-base);
+  background: rgba(8, 116, 231, 0.08);
+  border: 1px solid rgba(8, 116, 231, 0.2);
+  font-size: 13px;
+  font-family: 'Courier New', Courier, monospace;
+  @include font_color_primary;
+}
+.ai-role-plan__level-tag {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: var(--epx-radius-base);
+  font-size: var(--epx-font-size-s);
+  line-height: 1.6;
+}
+.ai-role-plan__level-tag--high {
+  background: rgba(245, 108, 108, 0.1);
+  color: #f56c6c;
+}
+.ai-role-plan__level-tag--mid {
+  background: rgba(230, 162, 60, 0.1);
+  color: #e6a23c;
+}
+.ai-role-plan__level-tag--low {
+  background: rgba(8, 116, 231, 0.08);
+  @include font_color_primary;
+}
+.ai-role-plan__arrow {
+  margin: 0 6px;
+  color: var(--epx-text-secondary);
+}
+.ai-role-plan__empty {
+  padding: 40px 0;
+  text-align: center;
+  color: var(--epx-text-secondary);
+  font-size: var(--epx-font-size-s);
+}
+.ai-role-plan__drawer-body {
+  padding: 20px;
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.ai-role-plan__detail-info {
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--epx-border);
+  margin-bottom: 16px;
+}
+.ai-role-plan__detail-row {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.ai-role-plan__detail-label {
+  color: var(--epx-text-secondary);
+  margin-right: 4px;
+}
+.ai-role-plan__detail-text {
+  color: var(--epx-text);
+}
+.ai-role-plan__detail-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.ai-role-plan__detail-subtitle {
+  font-size: var(--epx-font-size-base);
+  font-weight: 600;
+  color: var(--epx-text);
+}
+.ai-role-plan__detail-table {
+  :deep(th) {
+    background: var(--epx-bg);
+    color: var(--epx-text-secondary);
+    font-weight: 500;
+  }
+}
+.ai-role-plan__add-body {
+  display: flex;
+  flex-direction: column;
+  height: 56vh;
+}
+.ai-role-plan__add-search {
+  width: 280px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+.ai-role-plan__add-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.ai-role-plan__add-table {
+  :deep(th) {
+    background: var(--epx-bg);
+    color: var(--epx-text-secondary);
+    font-weight: 500;
+  }
+}
+.ai-role-plan__op-check {
+  display: flex;
+  align-items: center;
+  margin: 0 0 4px 0;
+  :deep(.el-checkbox__label) {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 400;
+    color: var(--epx-text);
+  }
+}
+.ai-role-plan__add-pager {
+  margin-top: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+.ai-role-plan__permission {
+  display: inline-flex;
+  align-items: center;
+  margin: 2px 8px 2px 0;
+  padding: 2px 6px 2px 10px;
+  border-radius: var(--epx-radius-base);
+  font-size: var(--epx-font-size-s);
+  background: rgba(8, 116, 231, 0.08);
+  border: 1px solid rgba(8, 116, 231, 0.2);
+  cursor: pointer;
+  @include font_color_primary;
+  // 新增接口（IS_EXIT === '0'）用绿色区分已有接口
+  &.is-new {
+    background: rgba(103, 194, 58, 0.1);
+    border-color: rgba(103, 194, 58, 0.3);
+    color: #67c23a;
+  }
+  &.is-disabled {
+    background: #f5f5f5;
+    border-color: #ebebeb;
+    color: var(--epx-text-secondary);
+  }
+}
+.ai-role-plan__permission-del {
+  margin-left: 6px;
+  font-size: var(--epx-font-size-s);
+  color: var(--epx-text-secondary);
+  cursor: pointer;
+  &:hover {
+    color: #f56c6c;
+  }
+}
+.ai-role-plan__permission-popover {
+  font-size: 13px;
+  line-height: 1.8;
+  color: var(--epx-text);
+}
+</style>