From bcae0edf12369115d9cf34ef4b510266f3a3b99e Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 09:31:13 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat(organization):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=9C=BA=E6=9E=84=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrganizationUnitModal.vue                 | 115 +++++++++++++++++-
 .../OrganizationUnitTree.vue                  |  18 ++-
 2 files changed, 128 insertions(+), 5 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
index 76711ad74..e9e25200e 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitModal.vue
@@ -1,11 +1,124 @@
 <script setup lang="ts">
+import type {
+  OrganizationUnitCreateDto,
+  OrganizationUnitDto,
+  OrganizationUnitUpdateDto,
+} from '../../types/organization-units';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '@abp/ui';
+
+import { createApi, getApi, updateApi } from '../../api/organization-units';
+
 defineOptions({
   name: 'OrganizationUnitModal',
 });
+const emits = defineEmits<{
+  (event: 'change', data: OrganizationUnitDto): void;
+}>();
+
+const defaultModel = {
+  displayName: '',
+} as OrganizationUnitDto;
+
+const [Form, formApi] = useVbenForm({
+  handleSubmit: onSubmit,
+  schema: [
+    {
+      component: 'Input',
+      componentProps: {
+        style: {
+          display: 'none',
+        },
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        style: {
+          display: 'none',
+        },
+      },
+      fieldName: 'parentId',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        autocomplete: 'off',
+      },
+      fieldName: 'displayName',
+      label: $t('AbpIdentity.OrganizationUnit:DisplayName'),
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.validateAndSubmitForm();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { id, parentId } = modalApi.getData<Record<string, any>>();
+      if (id) {
+        modalApi.setState({ loading: true });
+        try {
+          const dto = await getApi(id);
+          modalApi.setState({
+            title: $t('AbpIdentity.OrganizationUnit', [dto.displayName]),
+          });
+          formApi.setValues(dto);
+        } finally {
+          modalApi.setState({ loading: false });
+        }
+        return;
+      }
+      formApi.setValues({
+        ...defaultModel,
+        parentId,
+      });
+      modalApi.setState({
+        title: $t('AbpIdentity.OrganizationUnit:New'),
+      });
+    }
+  },
+  title: $t('AbpIdentity.OrganizationUnit:New'),
+});
+
+async function onSubmit(input: Record<string, any>) {
+  const api = input.id
+    ? updateApi(input.id, input as OrganizationUnitUpdateDto)
+    : createApi(input as OrganizationUnitCreateDto);
+  try {
+    modalApi.setState({
+      confirmLoading: true,
+    });
+    const dto = await api;
+    emits('change', dto);
+    modalApi.close();
+  } finally {
+    modalApi.setState({
+      confirmLoading: false,
+    });
+  }
+}
 </script>
 
 <template>
-  <div></div>
+  <Modal>
+    <Form />
+  </Modal>
 </template>
 
 <style scoped></style>
diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
index 9dd8a554c..151077d48 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
@@ -6,8 +6,9 @@ import type {
 } from 'ant-design-vue/es/tree';
 import type { Key } from 'ant-design-vue/es/vc-table/interface';
 
-import { h, onMounted, ref, watchEffect } from 'vue';
+import { defineAsyncComponent, h, onMounted, ref, watchEffect } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
@@ -36,6 +37,9 @@ const emits = defineEmits<{
 
 const MenuItem = Menu.Item;
 const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
+const OrganizationUnitModal = defineAsyncComponent(
+  () => import('./OrganizationUnitModal.vue'),
+);
 
 interface ContextMenuActionMap {
   [key: string]: (id: string) => Promise<void> | void;
@@ -52,6 +56,10 @@ const organizationUnits = ref<DataNode[]>([]);
 const loadedKeys = ref<string[]>([]);
 const selectedKey = ref<string>();
 
+const [OrganizationUnitEditModal, editModalApi] = useVbenModal({
+  connectedComponent: OrganizationUnitModal,
+});
+
 /** 刷新组织机构树 */
 async function onRefresh() {
   loadedKeys.value = [];
@@ -90,13 +98,14 @@ function onRightClick() {
 
 /** 创建组织机构树 */
 function onCreate(parentId?: string) {
-  !parentId && console.warn('create root method not implemented!');
-  parentId && console.warn('create children method not implemented!');
+  editModalApi.setData({ parentId });
+  editModalApi.open();
 }
 
 /** 编辑组织机构树 */
 function onUpdate(id: string) {
-  console.warn('update method not implemented!', id);
+  editModalApi.setData({ id });
+  editModalApi.open();
 }
 
 /** 编辑组织机构树权限 */
@@ -194,6 +203,7 @@ watchEffect(() => {
       </template>
     </Tree>
   </Card>
+  <OrganizationUnitEditModal @change="onRefresh" />
 </template>
 
 <style scoped></style>

From 2d585e9e3f67dbdaf4d00c90dd3c8d982db019b1 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 14:49:28 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat(permissions):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86=E6=A8=A1=E6=80=81=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../packages/@abp/permission/package.json     |  36 +++
 .../@abp/permission/src/api/permissions.ts    |  37 +++
 .../groups/PermissionGroupDefinitionModal.vue |   7 +
 .../groups/PermissionGroupDefinitionTable.vue |   7 +
 .../permissions/PermissionDefinitionModal.vue |   7 +
 .../permissions/PermissionDefinitionTable.vue |   7 +
 .../@abp/permission/src/components/index.ts   |   3 +
 .../permissions/PermissionModal.vue           | 301 ++++++++++++++++++
 .../packages/@abp/permission/src/index.ts     |   2 +
 .../@abp/permission/src/types/index.ts        |   1 +
 .../@abp/permission/src/types/permissions.ts  |  60 ++++
 .../@abp/permission/src/utils/index.ts        | 143 +++++++++
 .../packages/@abp/permission/tsconfig.json    |   6 +
 apps/vben5/vben-admin.code-workspace          |   4 +
 14 files changed, 621 insertions(+)
 create mode 100644 apps/vben5/packages/@abp/permission/package.json
 create mode 100644 apps/vben5/packages/@abp/permission/src/api/permissions.ts
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionModal.vue
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionTable.vue
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/index.ts
 create mode 100644 apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
 create mode 100644 apps/vben5/packages/@abp/permission/src/index.ts
 create mode 100644 apps/vben5/packages/@abp/permission/src/types/index.ts
 create mode 100644 apps/vben5/packages/@abp/permission/src/types/permissions.ts
 create mode 100644 apps/vben5/packages/@abp/permission/src/utils/index.ts
 create mode 100644 apps/vben5/packages/@abp/permission/tsconfig.json

diff --git a/apps/vben5/packages/@abp/permission/package.json b/apps/vben5/packages/@abp/permission/package.json
new file mode 100644
index 000000000..b5adfecf3
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@abp/permission",
+  "version": "8.3.2",
+  "homepage": "https://github.com/colinin/abp-next-admin",
+  "bugs": "https://github.com/colinin/abp-next-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/colinin/abp-next-admin.git",
+    "directory": "packages/@abp/permission"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@abp/core": "workspace:*",
+    "@abp/request": "workspace:*",
+    "@abp/ui": "workspace:*",
+    "@ant-design/icons-vue": "catalog:",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "ant-design-vue": "catalog:",
+    "vue": "catalog:*"
+  }
+}
diff --git a/apps/vben5/packages/@abp/permission/src/api/permissions.ts b/apps/vben5/packages/@abp/permission/src/api/permissions.ts
new file mode 100644
index 000000000..d4ad87c78
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/api/permissions.ts
@@ -0,0 +1,37 @@
+import type {
+  PermissionProvider,
+  PermissionResultDto,
+  PermissionsUpdateDto,
+} from '../types/permissions';
+
+import { requestClient } from '@abp/request';
+
+/**
+ * 查询权限
+ * @param provider
+ * @returns 权限实体数据传输对象
+ */
+export function getApi(
+  provider: PermissionProvider,
+): Promise<PermissionResultDto> {
+  return requestClient.get<PermissionResultDto>(
+    `/api/permission-management/permissions`,
+    {
+      params: provider,
+    },
+  );
+}
+
+/**
+ * 更新权限
+ * @param provider
+ * @param input
+ */
+export function updateApi(
+  provider: PermissionProvider,
+  input: PermissionsUpdateDto,
+): Promise<void> {
+  return requestClient.put(`/api/permission-management/permissions`, input, {
+    params: provider,
+  });
+}
diff --git a/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionModal.vue b/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionModal.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionTable.vue b/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionModal.vue b/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionModal.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionModal.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionTable.vue b/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionTable.vue
new file mode 100644
index 000000000..1017376d1
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/definitions/permissions/PermissionDefinitionTable.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
+
+<style scoped></style>
diff --git a/apps/vben5/packages/@abp/permission/src/components/index.ts b/apps/vben5/packages/@abp/permission/src/components/index.ts
new file mode 100644
index 000000000..8187ea421
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/index.ts
@@ -0,0 +1,3 @@
+export { default as PermissionGroupDefinitionTable } from './definitions/groups/PermissionGroupDefinitionTable.vue';
+export { default as PermissionDefinitionTable } from './definitions/permissions/PermissionDefinitionTable.vue';
+export { default as PermissionModal } from './permissions/PermissionModal.vue';
diff --git a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
new file mode 100644
index 000000000..f6c969593
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type {
+  DataNode,
+  EventDataNode,
+} from 'ant-design-vue/es/vc-tree/interface';
+import type { CheckInfo } from 'ant-design-vue/es/vc-tree/props';
+
+import type { PermissionTree } from '../../types/permissions';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { Card, Checkbox, Divider, message, Tabs, Tree } from 'ant-design-vue';
+
+import { getApi, updateApi } from '../../api/permissions';
+import {
+  generatePermissionTree,
+  getGrantedPermissionKeys,
+  getGrantPermissionCount,
+  getGrantPermissionsCount,
+  getParentList,
+  getPermissionCount,
+  getPermissionsCount,
+  toPermissionList,
+} from '../../utils';
+
+defineOptions({
+  name: 'PermissionModal',
+});
+
+const TabPane = Tabs.TabPane;
+
+interface ModalState {
+  displayName?: string;
+  providerKey?: string;
+  providerName: string;
+  readonly?: boolean;
+}
+
+const modelState = ref<ModalState>();
+const expandNodeKeys = ref<string[]>([]);
+const checkedNodeKeys = ref<string[]>([]);
+const permissionTree = ref<PermissionTree[]>([]);
+
+const getPermissionTab = computed(() => {
+  return (tree: PermissionTree) => {
+    const grantCount = getGrantPermissionCount(tree);
+    return `${tree.displayName} (${grantCount})`;
+  };
+});
+
+const getPermissionState = computed(() => {
+  const treeList = permissionTree.value;
+  const grantCount = getGrantPermissionsCount(treeList);
+  const permissionCount = getPermissionsCount(treeList);
+  return {
+    checked: grantCount === permissionCount,
+    indeterminate: grantCount > 0 && grantCount < permissionCount,
+  };
+});
+
+const getPermissionNodeState = computed(() => {
+  return (tree: PermissionTree) => {
+    const grantCount = getGrantPermissionCount(tree);
+    const permissionCount = getPermissionCount(tree);
+    return {
+      checked: grantCount === permissionCount,
+      indeterminate: grantCount > 0 && grantCount < permissionCount,
+    };
+  };
+});
+
+const [Modal, modalApi] = useVbenModal({
+  class: 'w-1/2',
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  draggable: true,
+  fullscreenButton: false,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    const permissions = toPermissionList(permissionTree.value);
+    try {
+      modalApi.setState({
+        closable: false,
+        confirmLoading: true,
+      });
+      await updateApi(
+        {
+          providerKey: modelState.value!.providerKey,
+          providerName: modelState.value!.providerName,
+        },
+        {
+          permissions,
+        },
+      );
+      message.success($t('AbpUi.SavedSuccessfully'));
+      modalApi.close();
+    } finally {
+      modalApi.setState({
+        closable: true,
+        confirmLoading: false,
+      });
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    permissionTree.value = [];
+    modelState.value = undefined;
+    if (isOpen) {
+      const state = modalApi.getData<ModalState>();
+      modelState.value = state;
+      const dto = await getApi({
+        providerKey: state.providerKey,
+        providerName: state.providerName,
+      });
+      modalApi.setState({
+        title: `${$t('AbpPermissionManagement.Permissions')} - ${state.displayName ?? dto.entityDisplayName}`,
+      });
+      permissionTree.value = generatePermissionTree(dto.groups);
+      checkedNodeKeys.value = getGrantedPermissionKeys(permissionTree.value);
+    }
+  },
+  title: $t('AbpPermissionManagement.Permissions'),
+});
+
+/** 全选所有节点权限 */
+function onCheckAll(e: CheckboxChangeEvent) {
+  checkedNodeKeys.value = [];
+  permissionTree.value.forEach((current) => {
+    const children = getChildren(current.children);
+    children.forEach((permission) => {
+      permission.isGranted = e.target.checked;
+      if (e.target.checked) {
+        checkedNodeKeys.value.push(permission.name);
+      }
+    });
+    current.isGranted = e.target.checked;
+  });
+}
+
+/** 全选当前节点权限 */
+function onCheckNodeAll(e: CheckboxChangeEvent, permission: PermissionTree) {
+  const children = getChildren(permission.children ?? []);
+  children.forEach((permission) => {
+    permission.isGranted = e.target.checked;
+  });
+  const childKeys = children.map((node) => node.name);
+  checkedNodeKeys.value = e.target.checked
+    ? [...checkedNodeKeys.value, ...childKeys]
+    : checkedNodeKeys.value.filter((key) => !childKeys.includes(key));
+  permission.isGranted = e.target.checked;
+}
+
+function onSelectNode(
+  _: any,
+  info: {
+    node: EventDataNode;
+    selectedNodes: DataNode[];
+  },
+) {
+  const nodeKey = String(info.node.key);
+  const index = expandNodeKeys.value.indexOf(nodeKey);
+  expandNodeKeys.value =
+    index === -1
+      ? [...expandNodeKeys.value, nodeKey]
+      : expandNodeKeys.value.filter((key) => key !== nodeKey);
+}
+
+function onCheckNode(permission: PermissionTree, _keys: any, info: CheckInfo) {
+  const nodeKey = String(info.node.key);
+  const index = checkedNodeKeys.value.indexOf(nodeKey);
+  checkedNodeKeys.value =
+    index === -1
+      ? [...checkedNodeKeys.value, nodeKey]
+      : checkedNodeKeys.value.filter((key) => key !== nodeKey);
+  const currentPermission = info.node.dataRef as unknown as PermissionTree;
+  // 上级权限联动
+  checkParentGrant(permission, currentPermission, info.checked);
+  // 下级权限联动
+  checkChildrenGrant(currentPermission, info.checked);
+  // 自身授权
+  currentPermission.isGranted = info.checked;
+}
+
+function checkChildrenGrant(current: PermissionTree, isGranted: boolean) {
+  const children = getChildren(current.children);
+  // 应取消子权限的所有授权
+  if (!isGranted) {
+    const childKeys: string[] = [];
+    children.forEach((node) => {
+      !isGranted && (node.isGranted = false);
+      childKeys.push(node.name);
+    });
+    checkedNodeKeys.value = checkedNodeKeys.value.filter(
+      (key) => !childKeys.includes(key),
+    );
+  }
+}
+
+function checkParentGrant(
+  root: PermissionTree,
+  current: PermissionTree,
+  isGranted: boolean,
+) {
+  if (!isGranted || !current.parentName) {
+    return;
+  }
+  const parentNodes = getParentList(root.children, current.parentName);
+  if (parentNodes) {
+    const parentKeys: string[] = [];
+    parentNodes.forEach((node) => {
+      node.isGranted = true;
+      parentKeys.push(node.name);
+      if (!checkedNodeKeys.value.includes(node.name)) {
+        parentKeys.push(node.name);
+      }
+    });
+    checkedNodeKeys.value = [...checkedNodeKeys.value, ...parentKeys];
+  }
+}
+
+function getChildren(permissions: PermissionTree[]): PermissionTree[] {
+  const children: PermissionTree[] = [];
+  permissions.forEach((permission) => {
+    children.push(permission);
+    permission.children && children.push(...getChildren(permission.children));
+  });
+  return children;
+}
+</script>
+
+<template>
+  <Modal>
+    <div class="flex flex-col content-center justify-center">
+      <div>
+        <Checkbox
+          :disabled="modelState?.readonly"
+          @change="onCheckAll"
+          v-bind="getPermissionState"
+        >
+          {{ $t('AbpPermissionManagement.SelectAllInAllTabs') }}
+        </Checkbox>
+      </div>
+      <Divider />
+      <Tabs tab-position="left" type="card">
+        <template v-for="permission in permissionTree" :key="permission.name">
+          <TabPane
+            :tab="getPermissionTab(permission)"
+            :tab-key="permission.name"
+          >
+            <Card :bordered="false" :title="permission.displayName">
+              <div class="flex flex-col">
+                <Checkbox
+                  :disabled="modelState?.readonly"
+                  v-bind="getPermissionNodeState(permission)"
+                  @change="(e) => onCheckNodeAll(e, permission)"
+                >
+                  {{ $t('AbpPermissionManagement.SelectAllInThisTab') }}
+                </Checkbox>
+                <Divider />
+                <Tree
+                  :check-strictly="true"
+                  :checkable="true"
+                  :checked-keys="checkedNodeKeys"
+                  :disabled="modelState?.readonly"
+                  :expanded-keys="expandNodeKeys"
+                  :field-names="{
+                    key: 'name',
+                    title: 'displayName',
+                    children: 'children',
+                  }"
+                  :tree-data="permission.children"
+                  @check="(keys, info) => onCheckNode(permission, keys, info)"
+                  @select="onSelectNode"
+                />
+              </div>
+            </Card>
+          </TabPane>
+        </template>
+      </Tabs>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-tabs) {
+  max-height: 34rem;
+
+  .ant-tabs-nav {
+    max-width: 14rem;
+  }
+
+  .ant-tabs-content-holder {
+    overflow: hidden auto !important;
+  }
+}
+</style>
diff --git a/apps/vben5/packages/@abp/permission/src/index.ts b/apps/vben5/packages/@abp/permission/src/index.ts
new file mode 100644
index 000000000..195d95f59
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/index.ts
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';
diff --git a/apps/vben5/packages/@abp/permission/src/types/index.ts b/apps/vben5/packages/@abp/permission/src/types/index.ts
new file mode 100644
index 000000000..c85954d3e
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/types/index.ts
@@ -0,0 +1 @@
+export * from './permissions';
diff --git a/apps/vben5/packages/@abp/permission/src/types/permissions.ts b/apps/vben5/packages/@abp/permission/src/types/permissions.ts
new file mode 100644
index 000000000..d90634a90
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/types/permissions.ts
@@ -0,0 +1,60 @@
+interface PermissionProvider {
+  providerKey?: string;
+  providerName: string;
+}
+
+interface PermissionDto {
+  allowedProviders: string[];
+  displayName: string;
+  grantedProviders: PermissionProvider[];
+  isGranted: boolean;
+  name: string;
+  parentName?: string;
+}
+
+interface PermissionGroupDto {
+  displayName: string;
+  name: string;
+  permissions: PermissionDto[];
+}
+
+interface PermissionUpdateDto {
+  /** 是否授权 */
+  isGranted: boolean;
+  /** 权限名称 */
+  name: string;
+}
+
+interface PermissionsUpdateDto {
+  permissions: PermissionUpdateDto[];
+}
+
+interface PermissionResultDto {
+  entityDisplayName: string;
+  groups: PermissionGroupDto[];
+}
+
+interface PermissionTree {
+  /** 子节点 */
+  children: PermissionTree[];
+  /** 是否禁用 */
+  disabled: boolean;
+  /** 显示名称 */
+  displayName: string;
+  /** 是否授权 */
+  isGranted?: boolean;
+  isRoot: boolean;
+  /** 权限标识 */
+  name: string;
+  /** 父节点 */
+  parentName?: string;
+}
+
+export type {
+  PermissionDto,
+  PermissionGroupDto,
+  PermissionProvider,
+  PermissionResultDto,
+  PermissionsUpdateDto,
+  PermissionTree,
+};
diff --git a/apps/vben5/packages/@abp/permission/src/utils/index.ts b/apps/vben5/packages/@abp/permission/src/utils/index.ts
new file mode 100644
index 000000000..7e30e0aab
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/src/utils/index.ts
@@ -0,0 +1,143 @@
+import type {
+  PermissionDto,
+  PermissionGroupDto,
+  PermissionTree,
+} from '../types/permissions';
+
+import { listToTree } from '@abp/core';
+
+export function generatePermissionTree(
+  permissionGroups: PermissionGroupDto[],
+): PermissionTree[] {
+  const trees: PermissionTree[] = [];
+  permissionGroups.forEach((g) => {
+    const tree: PermissionTree = {
+      disabled: false,
+      displayName: g.displayName,
+      isRoot: true,
+      name: g.name,
+      parentName: g.name,
+      children: [],
+    };
+    tree.children = listToTree(g.permissions, {
+      id: 'name',
+      pid: 'parentName',
+    });
+    trees.push(tree);
+  });
+  return trees;
+}
+
+export function findNode(
+  children: PermissionTree[],
+  key: string,
+): PermissionTree | undefined {
+  let findC: PermissionTree | undefined;
+  for (const child of children) {
+    if (child.name === key) {
+      findC = child;
+      return findC;
+    }
+    findC = findNode(child.children, key);
+    if (findC) {
+      return findC;
+    }
+  }
+  return findC;
+}
+
+export function getPermissionsCount(children: PermissionTree[]): number {
+  let count = 0;
+  children.forEach((c) => {
+    count += getPermissionCount(c);
+  });
+  return count;
+}
+
+export function getPermissionCount(tree: PermissionTree): number {
+  let count = tree.children.length;
+  tree.children.forEach((c) => {
+    count += getPermissionCount(c);
+  });
+  return count;
+}
+
+export function getGrantPermissionsCount(children: PermissionTree[]): number {
+  let count = 0;
+  children.forEach((c) => {
+    count += getGrantPermissionCount(c);
+  });
+  return count;
+}
+
+export function getGrantPermissionCount(tree: PermissionTree): number {
+  return getGrantedPermissionKeys(tree.children).length;
+}
+
+export function getGrantedPermissionKeys(children: PermissionTree[]): string[] {
+  const keys: string[] = [];
+  children.forEach((c) => {
+    if (c.isGranted === true) {
+      keys.push(c.name);
+    }
+    keys.push(...getGrantedPermissionKeys(c.children));
+  });
+  return keys;
+}
+
+export function getParentList(
+  children: PermissionTree[],
+  name: string,
+): PermissionTree[] | undefined {
+  for (const child of children) {
+    if (child.name === name) {
+      return [child];
+    }
+    if (child.children) {
+      const node = getParentList(child.children, name);
+      if (node) {
+        return [...node, child];
+      }
+    }
+  }
+}
+
+export function toPermissionList(treeList: PermissionTree[]) {
+  const permissions: PermissionDto[] = [];
+  for (const element of treeList) {
+    if (!element.isRoot && element.isGranted !== undefined) {
+      permissions.push({
+        allowedProviders: [],
+        displayName: element.displayName,
+        grantedProviders: [],
+        isGranted: element.isGranted,
+        name: element.name,
+      });
+    }
+    permissions.push(...toPermissionList(element.children));
+  }
+  return permissions;
+}
+
+export function updateParentGrant(
+  tree: PermissionTree,
+  name: string,
+  grant: boolean,
+) {
+  const parentList = getParentList(tree.children, name);
+  if (parentList && Array.isArray(parentList)) {
+    for (const element of parentList) {
+      element.isGranted = grant;
+    }
+  }
+}
+
+export function updateChildrenGrant(
+  children: PermissionTree[],
+  grant: boolean,
+) {
+  for (const child of children) {
+    child.isGranted = grant;
+    updateChildrenGrant(child.children, grant);
+  }
+}
diff --git a/apps/vben5/packages/@abp/permission/tsconfig.json b/apps/vben5/packages/@abp/permission/tsconfig.json
new file mode 100644
index 000000000..ce1a891fb
--- /dev/null
+++ b/apps/vben5/packages/@abp/permission/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/vben5/vben-admin.code-workspace b/apps/vben5/vben-admin.code-workspace
index 9b7519c1a..9bc930a45 100644
--- a/apps/vben5/vben-admin.code-workspace
+++ b/apps/vben5/vben-admin.code-workspace
@@ -192,5 +192,9 @@
       "name": "@abp/account",
       "path": "packages/@abp/account",
     },
+    {
+      "name": "@abp/permission",
+      "path": "packages/@abp/permission",
+    },
   ],
 }

From f7109b3de21fdfec9f8cb413dd55dd0386cfa7d9 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 14:53:33 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat(organizations):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E7=BB=87=E6=9C=BA=E6=9E=84=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organization-units/OrganizationUnitTree.vue  | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
index 151077d48..2ca63969c 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitTree.vue
@@ -12,6 +12,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
+import { PermissionModal } from '@abp/permission';
 import {
   DeleteOutlined,
   EditOutlined,
@@ -22,6 +23,7 @@ import { Button, Card, Dropdown, Menu, Modal, Tree } from 'ant-design-vue';
 
 import {
   deleteApi,
+  getApi,
   getChildrenApi,
   getRootListApi,
   moveTo,
@@ -59,6 +61,9 @@ const selectedKey = ref<string>();
 const [OrganizationUnitEditModal, editModalApi] = useVbenModal({
   connectedComponent: OrganizationUnitModal,
 });
+const [OrganizationUnitPermissionModal, permissionModalApi] = useVbenModal({
+  connectedComponent: PermissionModal,
+});
 
 /** 刷新组织机构树 */
 async function onRefresh() {
@@ -109,8 +114,14 @@ function onUpdate(id: string) {
 }
 
 /** 编辑组织机构树权限 */
-function onPermissions(id: string) {
-  console.warn('permissions method not implemented!', id);
+async function onPermissions(id: string) {
+  const dto = await getApi(id);
+  permissionModalApi.setData({
+    displayName: dto.displayName,
+    providerKey: id,
+    providerName: 'O',
+  });
+  permissionModalApi.open();
 }
 
 /** 删除组织机构 */
@@ -204,6 +215,7 @@ watchEffect(() => {
     </Tree>
   </Card>
   <OrganizationUnitEditModal @change="onRefresh" />
+  <OrganizationUnitPermissionModal />
 </template>
 
 <style scoped></style>

From 779518ee7d658c01f04689575afb526a4db109ca Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 15:25:25 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat(roles):=20=E5=A2=9E=E5=8A=A0=E8=A7=92?=
 =?UTF-8?q?=E8=89=B2=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../vben5/packages/@abp/identity/package.json |  1 +
 .../src/components/roles/RoleTable.vue        | 78 +++++++++++++++++--
 .../permissions/PermissionModal.vue           | 33 ++++++--
 3 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/package.json b/apps/vben5/packages/@abp/identity/package.json
index 237482ec3..0a1fad4a5 100644
--- a/apps/vben5/packages/@abp/identity/package.json
+++ b/apps/vben5/packages/@abp/identity/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@abp/core": "workspace:*",
+    "@abp/permission": "workspace:*",
     "@abp/request": "workspace:*",
     "@abp/ui": "workspace:*",
     "@ant-design/icons-vue": "catalog:",
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
index 6be353eb4..5c8eb2a96 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
@@ -1,16 +1,25 @@
 <script setup lang="ts">
 import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { IdentityRoleDto } from '../../types/roles';
 
 import { defineAsyncComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
+import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
+import { useAbpStore } from '@abp/core';
+import { PermissionModal } from '@abp/permission';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
-import { Button, Modal, Tag } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, Modal, Tag } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/roles';
 
@@ -18,8 +27,18 @@ defineOptions({
   name: 'RoleTable',
 });
 
+const MenuItem = Menu.Item;
+const MenuOutlined = createIconifyIcon('heroicons-outline:menu-alt-3');
+const ClaimOutlined = createIconifyIcon('la:id-card-solid');
+const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
 const RoleModal = defineAsyncComponent(() => import('./RoleModal.vue'));
 
+const abpStore = useAbpStore();
+const { hasAccessByCodes } = useAccess();
+const [RolePermissionModal, permissionModalApi] = useVbenModal({
+  connectedComponent: PermissionModal,
+});
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
@@ -50,7 +69,7 @@ const gridOptions: VxeGridProps<IdentityRoleDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
-      width: 180,
+      width: 220,
     },
   ],
   exportConfig: {},
@@ -113,6 +132,22 @@ const handleDelete = (row: IdentityRoleDto) => {
     title: $t('AbpUi.AreYouSure'),
   });
 };
+
+const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
+  switch (info.key) {
+    case 'permissions': {
+      const roles = abpStore.application?.currentUser.roles ?? [];
+      permissionModalApi.setData({
+        displayName: row.name,
+        providerKey: row.name,
+        providerName: 'R',
+        readonly: roles.includes(row.name),
+      });
+      permissionModalApi.open();
+      break;
+    }
+  }
+};
 </script>
 
 <template>
@@ -140,7 +175,7 @@ const handleDelete = (row: IdentityRoleDto) => {
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(EditOutlined)"
             block
@@ -151,7 +186,7 @@ const handleDelete = (row: IdentityRoleDto) => {
             {{ $t('AbpUi.Edit') }}
           </Button>
         </div>
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(DeleteOutlined)"
             block
@@ -163,10 +198,43 @@ const handleDelete = (row: IdentityRoleDto) => {
             {{ $t('AbpUi.Delete') }}
           </Button>
         </div>
+        <div class="basis-1/3">
+          <Dropdown>
+            <template #overlay>
+              <Menu @click="(info) => handleMenuClick(row, info)">
+                <MenuItem
+                  v-if="
+                    hasAccessByCodes(['AbpIdentity.Roles.ManagePermissions'])
+                  "
+                  key="permissions"
+                  :icon="h(PermissionsOutlined)"
+                >
+                  {{ $t('AbpPermissionManagement.Permissions') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['AbpIdentity.Roles.ManageClaims'])"
+                  key="claims"
+                  :icon="h(ClaimOutlined)"
+                >
+                  {{ $t('AbpIdentity.ManageClaim') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['Platform.Menu.ManageRoles'])"
+                  key="menus"
+                  :icon="h(MenuOutlined)"
+                >
+                  {{ $t('AppPlatform.Menu:Manage') }}
+                </MenuItem>
+              </Menu>
+            </template>
+            <Button :icon="h(EllipsisOutlined)" type="link" />
+          </Dropdown>
+        </div>
       </div>
     </template>
   </Grid>
   <RoleEditModal @change="() => query()" />
+  <RolePermissionModal />
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
index f6c969593..014d2cbae 100644
--- a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
+++ b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
@@ -113,15 +113,24 @@ const [Modal, modalApi] = useVbenModal({
     if (isOpen) {
       const state = modalApi.getData<ModalState>();
       modelState.value = state;
-      const dto = await getApi({
-        providerKey: state.providerKey,
-        providerName: state.providerName,
-      });
       modalApi.setState({
-        title: `${$t('AbpPermissionManagement.Permissions')} - ${state.displayName ?? dto.entityDisplayName}`,
+        loading: true,
       });
-      permissionTree.value = generatePermissionTree(dto.groups);
-      checkedNodeKeys.value = getGrantedPermissionKeys(permissionTree.value);
+      try {
+        const dto = await getApi({
+          providerKey: state.providerKey,
+          providerName: state.providerName,
+        });
+        modalApi.setState({
+          title: `${$t('AbpPermissionManagement.Permissions')} - ${state.displayName ?? dto.entityDisplayName}`,
+        });
+        permissionTree.value = generatePermissionTree(dto.groups);
+        checkedNodeKeys.value = getGrantedPermissionKeys(permissionTree.value);
+      } finally {
+        modalApi.setState({
+          loading: false,
+        });
+      }
     }
   },
   title: $t('AbpPermissionManagement.Permissions'),
@@ -155,6 +164,15 @@ function onCheckNodeAll(e: CheckboxChangeEvent, permission: PermissionTree) {
   permission.isGranted = e.target.checked;
 }
 
+function onExpandNode(_keys: any, info: { node: EventDataNode }) {
+  const nodeKey = String(info.node.key);
+  const index = expandNodeKeys.value.indexOf(nodeKey);
+  expandNodeKeys.value =
+    index === -1
+      ? [...expandNodeKeys.value, nodeKey]
+      : expandNodeKeys.value.filter((key) => key !== nodeKey);
+}
+
 function onSelectNode(
   _: any,
   info: {
@@ -275,6 +293,7 @@ function getChildren(permissions: PermissionTree[]): PermissionTree[] {
                   }"
                   :tree-data="permission.children"
                   @check="(keys, info) => onCheckNode(permission, keys, info)"
+                  @expand="onExpandNode"
                   @select="onSelectNode"
                 />
               </div>

From 22d8ec6d3337f701324a3e482352c53f555214b2 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 15:40:39 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat(users):=20=E5=A2=9E=E5=8A=A0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=9D=83=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/roles/RoleTable.vue        |  7 +-
 .../src/components/users/UserTable.vue        | 99 +++++++++++++++----
 .../permissions/PermissionModal.vue           |  5 +-
 3 files changed, 83 insertions(+), 28 deletions(-)

diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
index 5c8eb2a96..bc423174e 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
@@ -237,9 +237,4 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
   <RolePermissionModal />
 </template>
 
-<style lang="scss" scoped>
-.checkbox-box {
-  display: flex;
-  justify-content: center;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
index 0de52b423..2dba33458 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
@@ -1,18 +1,25 @@
 <script setup lang="ts">
 import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
 
 import type { IdentityUserDto } from '../../types/users';
 
 import { defineAsyncComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import { formatToDateTime } from '@abp/core';
+import { formatToDateTime, useAbpStore } from '@abp/core';
+import { PermissionModal } from '@abp/permission';
 import { useVbenVxeGrid } from '@abp/ui';
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
-import { Button, Modal } from 'ant-design-vue';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  EllipsisOutlined,
+} from '@ant-design/icons-vue';
+import { Button, Dropdown, Menu, Modal } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/users';
 
@@ -21,8 +28,19 @@ defineOptions({
 });
 
 const UserModal = defineAsyncComponent(() => import('./UserModal.vue'));
+
+const MenuItem = Menu.Item;
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
+const MenuOutlined = createIconifyIcon('heroicons-outline:menu-alt-3');
+const ClaimOutlined = createIconifyIcon('la:id-card-solid');
+const PermissionsOutlined = createIconifyIcon('icon-park-outline:permissions');
+const [UserPermissionModal, permissionModalApi] = useVbenModal({
+  connectedComponent: PermissionModal,
+});
+
+const abpStore = useAbpStore();
+const { hasAccessByCodes } = useAccess();
 
 const formOptions: VbenFormProps = {
   // 默认展开
@@ -73,7 +91,7 @@ const gridOptions: VxeGridProps<IdentityUserDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
-      width: 180,
+      width: 220,
     },
   ],
   exportConfig: {},
@@ -136,6 +154,22 @@ const handleDelete = (row: IdentityUserDto) => {
     title: $t('AbpUi.AreYouSure'),
   });
 };
+
+const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
+  switch (info.key) {
+    case 'permissions': {
+      const userId = abpStore.application?.currentUser.id;
+      permissionModalApi.setData({
+        displayName: row.userName,
+        providerKey: row.id,
+        providerName: 'U',
+        readonly: userId === row.id,
+      });
+      permissionModalApi.open();
+      break;
+    }
+  }
+};
 </script>
 
 <template>
@@ -150,14 +184,16 @@ const handleDelete = (row: IdentityUserDto) => {
       </Button>
     </template>
     <template #active="{ row }">
-      <div class="active-box">
-        <CheckIcon v-if="row.isActive" class="actived" />
-        <CloseIcon v-else />
+      <div class="flex flex-row justify-center">
+        <div :class="row.isActive ? 'text-green-600' : 'text-red-600'">
+          <CheckIcon v-if="row.isActive" />
+          <CloseIcon v-else />
+        </div>
       </div>
     </template>
     <template #action="{ row }">
       <div class="flex flex-row">
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(EditOutlined)"
             block
@@ -168,7 +204,7 @@ const handleDelete = (row: IdentityUserDto) => {
             {{ $t('AbpUi.Edit') }}
           </Button>
         </div>
-        <div class="basis-1/2">
+        <div class="basis-1/3">
           <Button
             :icon="h(DeleteOutlined)"
             block
@@ -180,20 +216,43 @@ const handleDelete = (row: IdentityUserDto) => {
             {{ $t('AbpUi.Delete') }}
           </Button>
         </div>
+        <div class="basis-1/3">
+          <Dropdown>
+            <template #overlay>
+              <Menu @click="(info) => handleMenuClick(row, info)">
+                <MenuItem
+                  v-if="
+                    hasAccessByCodes(['AbpIdentity.Users.ManagePermissions'])
+                  "
+                  key="permissions"
+                  :icon="h(PermissionsOutlined)"
+                >
+                  {{ $t('AbpPermissionManagement.Permissions') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['AbpIdentity.Users.ManageClaims'])"
+                  key="claims"
+                  :icon="h(ClaimOutlined)"
+                >
+                  {{ $t('AbpIdentity.ManageClaim') }}
+                </MenuItem>
+                <MenuItem
+                  v-if="hasAccessByCodes(['Platform.Menu.ManageUsers'])"
+                  key="menus"
+                  :icon="h(MenuOutlined)"
+                >
+                  {{ $t('AppPlatform.Menu:Manage') }}
+                </MenuItem>
+              </Menu>
+            </template>
+            <Button :icon="h(EllipsisOutlined)" type="link" />
+          </Dropdown>
+        </div>
       </div>
     </template>
   </Grid>
   <UserEditModal @change="() => query()" />
+  <UserPermissionModal />
 </template>
 
-<style lang="scss" scoped>
-.active-box {
-  display: flex;
-  justify-content: center;
-  color: red;
-
-  .actived {
-    color: green;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
index 014d2cbae..7fe29479b 100644
--- a/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
+++ b/apps/vben5/packages/@abp/permission/src/components/permissions/PermissionModal.vue
@@ -74,6 +74,7 @@ const getPermissionNodeState = computed(() => {
 });
 
 const [Modal, modalApi] = useVbenModal({
+  centered: true,
   class: 'w-1/2',
   closeOnClickModal: false,
   closeOnPressEscape: false,
@@ -307,10 +308,10 @@ function getChildren(permissions: PermissionTree[]): PermissionTree[] {
 
 <style lang="scss" scoped>
 :deep(.ant-tabs) {
-  max-height: 34rem;
+  height: 34rem;
 
   .ant-tabs-nav {
-    max-width: 14rem;
+    width: 14rem;
   }
 
   .ant-tabs-content-holder {

From eac366610a12b977ea12a7fa4ba2651228763d26 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Fri, 6 Dec 2024 15:57:33 +0800
Subject: [PATCH 6/6] =?UTF-8?q?feat(permissions):=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E5=B8=B8=E9=87=8F=E6=9D=83=E9=99=90=E4=BB=A3=E7=A0=81=E6=9B=BF?=
 =?UTF-8?q?=E4=BB=A3=E9=AD=94=E6=9C=AF=E5=AD=97=E7=AC=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/claim-types/ClaimTypeTable.vue | 14 ++++--
 .../OrganizationUnitRoleTable.vue             |  5 +-
 .../OrganizationUnitUserTable.vue             |  5 +-
 .../src/components/roles/RoleTable.vue        | 11 +++--
 .../security-logs/SecurityLogTable.vue        |  3 +-
 .../src/components/users/UserTable.vue        | 15 ++++--
 .../@abp/identity/src/constants/index.ts      |  1 +
 .../identity/src/constants/permissions.ts     | 47 +++++++++++++++++++
 .../vben5/packages/@abp/identity/src/index.ts |  1 +
 9 files changed, 84 insertions(+), 18 deletions(-)
 create mode 100644 apps/vben5/packages/@abp/identity/src/constants/index.ts
 create mode 100644 apps/vben5/packages/@abp/identity/src/constants/permissions.ts

diff --git a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
index f8a67f1f9..97d2d3689 100644
--- a/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/claim-types/ClaimTypeTable.vue
@@ -5,6 +5,7 @@ import type { IdentityClaimTypeDto } from '../../types/claim-types';
 
 import { defineAsyncComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { createIconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -14,6 +15,7 @@ import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue';
 import { Button, Modal } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/claim-types';
+import { IdentityClaimTypePermissions } from '../../constants/permissions';
 import { ValueType } from '../../types/claim-types';
 
 defineOptions({
@@ -26,6 +28,8 @@ const ClaimTypeModal = defineAsyncComponent(
 const CheckIcon = createIconifyIcon('ant-design:check-outlined');
 const CloseIcon = createIconifyIcon('ant-design:close-outlined');
 
+const { hasAccessByCodes } = useAccess();
+
 const formOptions: VbenFormProps = {
   // 默认展开
   collapsed: false,
@@ -102,6 +106,10 @@ const gridOptions: VxeGridProps<IdentityClaimTypeDto> = {
       fixed: 'right',
       slots: { default: 'action' },
       title: $t('AbpUi.Actions'),
+      visible: hasAccessByCodes([
+        IdentityClaimTypePermissions.Update,
+        IdentityClaimTypePermissions.Delete,
+      ]),
       width: 180,
     },
   ],
@@ -172,7 +180,7 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
     <template #toolbar-tools>
       <Button
         type="primary"
-        v-access:code="['AbpIdentity.IdentityClaimTypes.Create']"
+        v-access:code="[IdentityClaimTypePermissions.Create]"
         @click="handleAdd"
       >
         {{ $t('AbpIdentity.IdentityClaim:New') }}
@@ -197,7 +205,7 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
             :icon="h(EditOutlined)"
             block
             type="link"
-            v-access:code="['AbpIdentity.IdentityClaimTypes.Update']"
+            v-access:code="[IdentityClaimTypePermissions.Update]"
             @click="handleEdit(row)"
           >
             {{ $t('AbpUi.Edit') }}
@@ -209,7 +217,7 @@ const handleDelete = (row: IdentityClaimTypeDto) => {
             block
             danger
             type="link"
-            v-access:code="['AbpIdentity.IdentityClaimTypes.Delete']"
+            v-access:code="[IdentityClaimTypePermissions.Delete]"
             @click="handleDelete(row)"
           >
             {{ $t('AbpUi.Delete') }}
diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitRoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitRoleTable.vue
index 4a56ed412..426a754a9 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitRoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitRoleTable.vue
@@ -17,6 +17,7 @@ import { Button, Modal } from 'ant-design-vue';
 
 import { addRoles, getRoleListApi } from '../../api/organization-units';
 import { removeOrganizationUnit } from '../../api/roles';
+import { OrganizationUnitPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'OrganizationUnitRoleTable',
@@ -35,7 +36,7 @@ const { hasAccessByCodes } = useAccess();
 const getAddRoleEnabled = computed(() => {
   return (
     props.selectedKey &&
-    hasAccessByCodes(['AbpIdentity.OrganizationUnits.ManageRoles'])
+    hasAccessByCodes([OrganizationUnitPermissions.ManageRoles])
   );
 });
 
@@ -164,7 +165,7 @@ watch(() => props.selectedKey, onRefresh);
         :icon="h(DeleteOutlined)"
         danger
         type="link"
-        v-access:code="['AbpIdentity.OrganizationUnits.ManageRoles']"
+        v-access:code="[OrganizationUnitPermissions.ManageRoles]"
         @click="onDelete(row)"
       >
         {{ $t('AbpUi.Delete') }}
diff --git a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitUserTable.vue b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitUserTable.vue
index a172fc9bf..275a8498a 100644
--- a/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitUserTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/organization-units/OrganizationUnitUserTable.vue
@@ -15,6 +15,7 @@ import { Button, Modal } from 'ant-design-vue';
 
 import { addMembers, getUserListApi } from '../../api/organization-units';
 import { removeOrganizationUnit } from '../../api/users';
+import { OrganizationUnitPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'OrganizationUnitUserTable',
@@ -33,7 +34,7 @@ const { hasAccessByCodes } = useAccess();
 const getAddMemberEnabled = computed(() => {
   return (
     props.selectedKey &&
-    hasAccessByCodes(['AbpIdentity.OrganizationUnits.ManageUsers'])
+    hasAccessByCodes([OrganizationUnitPermissions.ManageUsers])
   );
 });
 
@@ -167,7 +168,7 @@ watch(() => props.selectedKey, onRefresh);
         :icon="h(DeleteOutlined)"
         danger
         type="link"
-        v-access:code="['AbpIdentity.OrganizationUnits.ManageUsers']"
+        v-access:code="[OrganizationUnitPermissions.ManageUsers]"
         @click="onDelete(row)"
       >
         {{ $t('AbpUi.Delete') }}
diff --git a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
index bc423174e..bab89aaa0 100644
--- a/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/roles/RoleTable.vue
@@ -22,6 +22,7 @@ import {
 import { Button, Dropdown, Menu, Modal, Tag } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/roles';
+import { IdentitRolePermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'RoleTable',
@@ -155,7 +156,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
     <template #toolbar-tools>
       <Button
         type="primary"
-        v-access:code="['AbpIdentity.Roles.Create']"
+        v-access:code="[IdentitRolePermissions.Create]"
         @click="handleAdd"
       >
         {{ $t('AbpIdentity.NewRole') }}
@@ -180,7 +181,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
             :icon="h(EditOutlined)"
             block
             type="link"
-            v-access:code="['AbpIdentity.Roles.Update']"
+            v-access:code="[IdentitRolePermissions.Update]"
             @click="handleEdit(row)"
           >
             {{ $t('AbpUi.Edit') }}
@@ -192,7 +193,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
             block
             danger
             type="link"
-            v-access:code="['AbpIdentity.Roles.Delete']"
+            v-access:code="[IdentitRolePermissions.Delete]"
             @click="handleDelete(row)"
           >
             {{ $t('AbpUi.Delete') }}
@@ -204,7 +205,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
               <Menu @click="(info) => handleMenuClick(row, info)">
                 <MenuItem
                   v-if="
-                    hasAccessByCodes(['AbpIdentity.Roles.ManagePermissions'])
+                    hasAccessByCodes([IdentitRolePermissions.ManagePermissions])
                   "
                   key="permissions"
                   :icon="h(PermissionsOutlined)"
@@ -212,7 +213,7 @@ const handleMenuClick = async (row: IdentityRoleDto, info: MenuInfo) => {
                   {{ $t('AbpPermissionManagement.Permissions') }}
                 </MenuItem>
                 <MenuItem
-                  v-if="hasAccessByCodes(['AbpIdentity.Roles.ManageClaims'])"
+                  v-if="hasAccessByCodes([IdentitRolePermissions.ManageClaims])"
                   key="claims"
                   :icon="h(ClaimOutlined)"
                 >
diff --git a/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue b/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
index 95e0ff9d2..40f260b76 100644
--- a/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/security-logs/SecurityLogTable.vue
@@ -13,6 +13,7 @@ import { DeleteOutlined } from '@ant-design/icons-vue';
 import { Button, Modal } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/security-logs';
+import { SecurityLogPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'SecurityLogTable',
@@ -196,7 +197,7 @@ const handleDelete = (row: SecurityLogDto) => {
           block
           danger
           type="link"
-          v-access:code="['AbpAuditing.SecurityLog.Delete']"
+          v-access:code="[SecurityLogPermissions.Delete]"
           @click="handleDelete(row)"
         >
           {{ $t('AbpUi.Delete') }}
diff --git a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
index 2dba33458..55939d133 100644
--- a/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
+++ b/apps/vben5/packages/@abp/identity/src/components/users/UserTable.vue
@@ -22,6 +22,7 @@ import {
 import { Button, Dropdown, Menu, Modal } from 'ant-design-vue';
 
 import { deleteApi, getPagedListApi } from '../../api/users';
+import { IdentityUserPermissions } from '../../constants/permissions';
 
 defineOptions({
   name: 'UserTable',
@@ -177,7 +178,7 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
     <template #toolbar-tools>
       <Button
         type="primary"
-        v-access:code="['AbpIdentity.Users.Create']"
+        v-access:code="[IdentityUserPermissions.Create]"
         @click="handleAdd"
       >
         {{ $t('AbpIdentity.NewUser') }}
@@ -198,7 +199,7 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
             :icon="h(EditOutlined)"
             block
             type="link"
-            v-access:code="['AbpIdentity.Users.Update']"
+            v-access:code="[IdentityUserPermissions.Update]"
             @click="handleEdit(row)"
           >
             {{ $t('AbpUi.Edit') }}
@@ -210,7 +211,7 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
             block
             danger
             type="link"
-            v-access:code="['AbpIdentity.Users.Delete']"
+            v-access:code="[IdentityUserPermissions.Delete]"
             @click="handleDelete(row)"
           >
             {{ $t('AbpUi.Delete') }}
@@ -222,7 +223,9 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
               <Menu @click="(info) => handleMenuClick(row, info)">
                 <MenuItem
                   v-if="
-                    hasAccessByCodes(['AbpIdentity.Users.ManagePermissions'])
+                    hasAccessByCodes([
+                      IdentityUserPermissions.ManagePermissions,
+                    ])
                   "
                   key="permissions"
                   :icon="h(PermissionsOutlined)"
@@ -230,7 +233,9 @@ const handleMenuClick = async (row: IdentityUserDto, info: MenuInfo) => {
                   {{ $t('AbpPermissionManagement.Permissions') }}
                 </MenuItem>
                 <MenuItem
-                  v-if="hasAccessByCodes(['AbpIdentity.Users.ManageClaims'])"
+                  v-if="
+                    hasAccessByCodes([IdentityUserPermissions.ManageClaims])
+                  "
                   key="claims"
                   :icon="h(ClaimOutlined)"
                 >
diff --git a/apps/vben5/packages/@abp/identity/src/constants/index.ts b/apps/vben5/packages/@abp/identity/src/constants/index.ts
new file mode 100644
index 000000000..c85954d3e
--- /dev/null
+++ b/apps/vben5/packages/@abp/identity/src/constants/index.ts
@@ -0,0 +1 @@
+export * from './permissions';
diff --git a/apps/vben5/packages/@abp/identity/src/constants/permissions.ts b/apps/vben5/packages/@abp/identity/src/constants/permissions.ts
new file mode 100644
index 000000000..8ba622647
--- /dev/null
+++ b/apps/vben5/packages/@abp/identity/src/constants/permissions.ts
@@ -0,0 +1,47 @@
+/** 用户权限 */
+export const IdentityUserPermissions = {
+  /** 新增 */
+  Create: 'AbpIdentity.Users.Create',
+  /** 删除 */
+  Delete: 'AbpIdentity.Users.Delete',
+  /** 管理声明 */
+  ManageClaims: 'AbpIdentity.Users.ManageClaims',
+  /** 管理权限 */
+  ManagePermissions: 'AbpIdentity.Users.ManagePermissions',
+  /** 更新 */
+  Update: 'AbpIdentity.Users.Update',
+};
+/** 角色权限 */
+export const IdentitRolePermissions = {
+  /** 新增 */
+  Create: 'AbpIdentity.Roles.Create',
+  /** 删除 */
+  Delete: 'AbpIdentity.Roles.Delete',
+  /** 管理声明 */
+  ManageClaims: 'AbpIdentity.Roles.ManageClaims',
+  /** 管理权限 */
+  ManagePermissions: 'AbpIdentity.Roles.ManagePermissions',
+  /** 更新 */
+  Update: 'AbpIdentity.Roles.Update',
+};
+/** 声明类型权限 */
+export const IdentityClaimTypePermissions = {
+  /** 新增 */
+  Create: 'AbpIdentity.IdentityClaimTypes.Create',
+  /** 删除 */
+  Delete: 'AbpIdentity.IdentityClaimTypes.Delete',
+  /** 更新 */
+  Update: 'AbpIdentity.IdentityClaimTypes.Update',
+};
+/** 组织机构权限 */
+export const OrganizationUnitPermissions = {
+  /** 管理角色 */
+  ManageRoles: 'AbpIdentity.OrganizationUnits.ManageRoles',
+  /** 管理用户 */
+  ManageUsers: 'AbpIdentity.OrganizationUnits.ManageUsers',
+};
+/** 安全日志权限 */
+export const SecurityLogPermissions = {
+  /** 删除 */
+  Delete: 'AbpAuditing.SecurityLog.Delete',
+};
diff --git a/apps/vben5/packages/@abp/identity/src/index.ts b/apps/vben5/packages/@abp/identity/src/index.ts
index 195d95f59..c688f3a89 100644
--- a/apps/vben5/packages/@abp/identity/src/index.ts
+++ b/apps/vben5/packages/@abp/identity/src/index.ts
@@ -1,2 +1,3 @@
 export * from './components';
+export * from './constants';
 export * from './types';