feat：支持管理我的 OAUTH #10995

src/frontend/devops-nav/src/components/User/index.vue

@@ -90,6 +90,10 @@
                         to: '/console/permission',
                         label: this.$t('accessCenter')
                     },
+                    {
+                        to: '/console/permission/auth/oauth',
+                        label: this.$t('oauthManage')
+                    },
                     {
                         cb: this.logout,
                         label: this.$t('logout')

src/frontend/devops-permission/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "dev": "nx exec -- bk-cli-service-webpack dev",
+    "dev": "bk-cli-service-webpack dev",
     "build": "bk-cli-service-webpack build",
     "server": "node ./paas-server/index.js",
     "lint:style": "stylelint **/*.{html,vue,css,sass,scss,less} --fix",

src/frontend/devops-permission/src/css/fonts.css

@@ -77,3 +77,24 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .permission-icon-warning-circle-fill:before {
 	content: "\e112";
 }
+.permission-icon-down-shape:before {
+	content: "\e113";
+}
+.permission-icon-yonghuzu:before {
+	content: "\e114";
+}
+.permission-icon-yonghu-2:before {
+	content: "\e115";
+}
+.permission-icon-oauth:before {
+	content: "\e116";
+}
+.permission-icon-codelib:before {
+	content: "\e117";
+}
+.permission-icon-user:before {
+	content: "\e118";
+}
+.permission-icon-tishi:before {
+	content: "\e119";
+}

src/frontend/devops-permission/src/http/api.ts

@@ -1,8 +1,6 @@
 import fetch from './fetch';
 
-const apiPerfix = '/api';
-const applyFix = 'ms/auth/api/user/auth/apply';
-const IAM_PERFIX = '/ms/auth/api/user/auth/resource';
+const apiPerfix = '/ms/auth/api/user';
 const projectPerfix = 'ms/project/api/user'
 export default {
   getUser() {
@@ -13,16 +11,16 @@ export default {
   },
   // 获取资源类型列表
   getResourceTypesList() {
-    return fetch.get(`${applyFix}/listResourceTypes`);
+    return fetch.get(`${apiPerfix}/auth/apply/listResourceTypes`);
   },
   // 获取动作列表
   getActionsList(resourceType: any) {
-    return fetch.get(`${applyFix}/listActions?resourceType=${resourceType}`);
+    return fetch.get(`${apiPerfix}/auth/apply/listActions?resourceType=${resourceType}`);
   },
   // 获取资源列表
   getResourceList(params: any, pageInfo: any) {
     const { projectId, resourceType, resourceName } = params;
-    return fetch.get(`${IAM_PERFIX}/${projectId}/${resourceType}/listResources`, {
+    return fetch.get(`${apiPerfix}/auth/resource/${projectId}/${resourceType}/listResources`, {
       ...pageInfo,
       resourceName
     })
@@ -31,14 +29,28 @@ export default {
   getUserGroupList(params: any) {
     const { projectId } = params;
     delete params.projectId;
-    return fetch.post(`${applyFix}/${projectId}/listGroups`, params);
+    return fetch.post(`${apiPerfix}/auth/apply/${projectId}/listGroups`, params);
   },
   // 申请加入用户组实体
   applyToJoinGroup(params: any) {
-    return fetch.post(`${applyFix}/applyToJoinGroup`, params);
+    return fetch.post(`${apiPerfix}/auth/apply/applyToJoinGroup`, params);
   },
   // 查询用户组权限详情
   getGroupPermissionDetail(groupId: any) {
-    return fetch.get(`${applyFix}/${groupId}/getGroupPermissionDetail`)
+    return fetch.get(`${apiPerfix}/auth/apply/${groupId}/getGroupPermissionDetail`)
+  },
+  // 获取oauth授权列表
+  getOauthResource() {
+    return fetch.get(`${apiPerfix}/oauth/resource`)
+  },
+  // 删除oauth授权
+  deleteOauth(type: any) {
+    return fetch.delete(`${apiPerfix}/oauth/resource/delete?oauthType=${type}`)
+  },
+  getOauthRelSource(type: any, page: Number, pageSize: Number) {
+    return fetch.get(`${apiPerfix}/oauth/resource/relSource?oauthType=${type}&page=${page}&pageSize=${pageSize}`)
+  },
+  refreshOauth(oauthType: any, redirectUrl: any) {
+    return fetch.post(`${apiPerfix}/oauth/resource/reOauth?oauthType=${oauthType}&redirectUrl=${redirectUrl}`)
   }
 }

src/frontend/devops-permission/src/router/index.ts

@@ -11,6 +11,8 @@ const MyApproval = () => import(/* webpackChunkName: "Permission" */ '../views/m
 const MyPermission = () => import(/* webpackChunkName: "Permission" */ '../views/my-permission/my-permission.vue');
 const MyProject = () => import(/* webpackChunkName: "Permission" */ '../views/my-permission/my-project.vue');
 const GroupDetail = () => import(/* webpackChunkName: "Permission" */ '../components/itsm-group-detail.vue');
+const AuthEntry = () => import(/* webpackChunkName: "Permission" */ '../views/auth/auth-entry.vue');
+const OauthHome = () => import(/* webpackChunkName: "Permission" */ '../views/auth/oauth/oauth-home.vue');
 const router = createRouter({
   history: createWebHistory('permission'),
   routes: [
@@ -50,6 +52,17 @@ const router = createRouter({
             },
           ],
         },
+        {
+          path: '/auth',
+          component: AuthEntry,
+          children: [
+            {
+              path: 'oauth',
+              name: 'oauth',
+              component: OauthHome,
+            }
+          ]
+        }
       ],
     },
     {

src/frontend/devops-permission/src/views/auth/auth-aside.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+</script>
+
+<template>
+  <aside class="auth-aside">
+    <div class="menu-item active">
+      <i class="permission-icon permission-icon-oauth" />
+      <span>{{ t('我的OAUTH') }}</span>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss" scoped>
+.auth-aside {
+  width: 240px;
+  color: #63656E;
+  padding-top: 5px;
+  background-color: #fff;
+  box-shadow: 1px 0 0 0 #DCDEE5;
+}
+.menu-item {
+  display: flex;
+  align-items: center;
+  width: 240px;
+  height: 40px;
+  font-size: 14px;
+  padding-left: 25px;
+  line-height: 40px;
+  background: #E1ECFF;
+  &.active {
+    color: #3A84FF;
+  }
+  .permission-icon {
+    margin-right: 10px;
+  }
+}
+</style>

src/frontend/devops-permission/src/views/auth/auth-entry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import PermissionHeader from '@/components/permission-header.vue';
+import AuthAside from './auth-aside.vue';
+import { useI18n } from 'vue-i18n';
+import {
+  ref,
+} from 'vue';
+const { t } = useI18n();
+
+const navs = ref([
+  { name: t('我的授权'), url: '' },
+]);
+</script>
+
+<template>
+  <permission-header :navs="navs"></permission-header>
+  <section class="permission-home">
+    <!-- 菜单栏 -->
+    <auth-aside></auth-aside>
+    <router-view class="permission-main"></router-view>
+  </section>
+</template>
+
+<style lang="postcss" scoped>
+  .permission-home {
+    display: flex;
+    flex: 1;
+    overflow: auto;
+  }
+  .permission-main {
+    flex: 1;
+    overflow: hidden;
+  }
+</style>