feat: refine roles management

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/system/roles/RoleDetail.vue

@@ -10,27 +10,92 @@ import {
   VTag,
 } from "@halo-dev/components";
 import { useRoute, useRouter } from "vue-router";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { axiosInstance } from "@halo-dev/admin-shared";
 import type { Role, User } from "@/types/extension";
 
+interface RoleTemplateGroup {
+  name: string | null | undefined;
+  roles: Role[];
+}
+
+interface FormState {
+  role: Role;
+  selectedRoleTemplates: string[];
+  saving: boolean;
+}
+
 const route = useRoute();
 
 const users = ref<User[]>([]);
-const role = ref<Role>();
+const roles = ref<Role[]>([]);
 const roleActiveId = ref("detail");
+const formState = ref<FormState>({
+  role: {
+    apiVersion: "v1alpha1",
+    kind: "Role",
+    metadata: {
+      name: "",
+      labels: {},
+      annotations: {
+        "plugin.halo.run/dependencies": "",
+        "plugin.halo.run/display-name": "",
+      },
+    },
+  },
+  selectedRoleTemplates: [],
+  saving: false,
+});
+
+const roleTemplates = computed<Role[]>(() => {
+  return roles.value.filter(
+    (role) => role.metadata.labels?.["plugin.halo.run/role-template"] === "true"
+  );
+});
+
+const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
+  const groups: RoleTemplateGroup[] = [];
+  roleTemplates.value.forEach((role) => {
+    const group = groups.find(
+      (group) =>
+        group.name === role.metadata.annotations?.["plugin.halo.run/module"]
+    );
+    if (group) {
+      group.roles.push(role);
+    } else {
+      groups.push({
+        name: role.metadata.annotations?.["plugin.halo.run/module"],
+        roles: [role],
+      });
+    }
+  });
+  return groups;
+});
 
 const handleFetchRole = async () => {
   try {
-    const response = await axiosInstance.get(
+    const response = await axiosInstance.get<Role>(
       `/api/v1alpha1/roles/${route.params.name}`
     );
-    role.value = response.data;
+    formState.value.role = response.data;
+    formState.value.selectedRoleTemplates = JSON.parse(
+      response.data.metadata.annotations?.["plugin.halo.run/dependencies"] ||
+        "[]"
+    );
   } catch (error) {
     console.error(error);
   }
 };
 
+const handleFetchRoles = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    roles.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
 const handleFetchUsers = async () => {
   try {
     const { data } = await axiosInstance.get("/api/v1alpha1/users");
@@ -40,6 +105,26 @@ const handleFetchUsers = async () => {
   }
 };
 
+const handleUpdateRole = async () => {
+  try {
+    formState.value.saving = true;
+    if (formState.value.role.metadata.annotations) {
+      formState.value.role.metadata.annotations[
+        "plugin.halo.run/dependencies"
+      ] = JSON.stringify(formState.value.selectedRoleTemplates);
+    }
+    await axiosInstance.put<Role>(
+      `/api/v1alpha1/roles/${route.params.name}`,
+      formState.value.role
+    );
+  } catch (e) {
+    console.error(e);
+  } finally {
+    formState.value.saving = false;
+    await handleFetchRole();
+  }
+};
+
 const router = useRouter();
 
 const handleRouteToUser = (name: string) => {
@@ -48,11 +133,17 @@ const handleRouteToUser = (name: string) => {
 
 onMounted(() => {
   handleFetchRole();
+  handleFetchRoles();
   handleFetchUsers();
 });
 </script>
 <template>
-  <VPageHeader :title="`角色：${role?.metadata?.name}`">
+  <VPageHeader
+    :title="`角色：${
+      formState.role?.metadata?.annotations?.['plugin.halo.run/display-name'] ||
+      formState.role?.metadata?.name
+    }`"
+  >
     <template #icon>
       <IconShieldUser class="mr-2 self-center" />
     </template>
@@ -84,7 +175,7 @@ onMounted(() => {
           <p
             class="mt-1 flex max-w-2xl items-center gap-2 text-sm text-gray-500"
           >
-            <span>包含 {{ role?.rules?.length }} 个权限</span>
+            <span>包含 {{ formState.role?.rules?.length }} 个权限</span>
           </p>
         </div>
         <div class="border-t border-gray-200">
@@ -94,7 +185,11 @@ onMounted(() => {
             >
               <dt class="text-sm font-medium text-gray-900">名称</dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ role?.metadata?.name }}
+                {{
+                  formState.role?.metadata?.annotations?.[
+                    "plugin.halo.run/display-name"
+                  ] || formState.role?.metadata?.name
+                }}
               </dd>
             </div>
             <div
@@ -102,7 +197,7 @@ onMounted(() => {
             >
               <dt class="text-sm font-medium text-gray-900">别名</dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ role?.metadata?.name }}
+                {{ formState.role?.metadata?.name }}
               </dd>
             </div>
             <div
@@ -126,7 +221,7 @@ onMounted(() => {
             >
               <dt class="text-sm font-medium text-gray-900">创建时间</dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                {{ role?.metadata?.creationTimestamp }}
+                {{ formState.role?.metadata?.creationTimestamp }}
               </dd>
             </div>
             <div
@@ -193,220 +288,49 @@ onMounted(() => {
         <div>
           <dl class="divide-y divide-gray-100">
             <div
+              v-for="(group, groupIndex) in roleTemplateGroups"
+              :key="groupIndex"
               class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
             >
               <dt class="text-sm font-medium text-gray-900">
-                Posts Management
+                {{ group.name }}
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <ul class="space-y-2">
-                  <li>
+                  <li v-for="(role, index) in group.roles" :key="index">
                     <div
                       class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
                     >
                       <input
+                        v-model="formState.selectedRoleTemplates"
+                        :value="role.metadata.name"
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
                       />
                       <div class="inline-flex flex-col gap-y-3">
                         <span class="font-medium text-gray-900">
-                          Posts Management
+                          {{
+                            role.metadata.annotations?.[
+                              "plugin.halo.run/display-name"
+                            ]
+                          }}
                         </span>
-                        <span class="text-xs text-gray-400">
+                        <span
-                          依赖于 Posts View
+                          v-if="
-                        </span>
+                            role.metadata.annotations?.[
-                      </div>
+                              'plugin.halo.run/dependencies'
-                    </div>
+                            ]
-                  </li>
+                          "
-                  <li>
+                          class="text-xs text-gray-400"
-                    <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
                         >
-                      <input
+                          依赖于
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                          {{
-                        type="checkbox"
+                            JSON.parse(
-                      />
+                              role.metadata.annotations?.[
-                      <div class="inline-flex flex-col gap-y-3">
+                                "plugin.halo.run/dependencies"
-                        <span class="font-medium text-gray-900">
+                              ]
-                          Posts View
+                            ).join(", ")
-                        </span>
+                          }}
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                Categories Management
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="space-y-2">
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Categories Management
-                        </span>
-                        <span class="text-xs text-gray-400">
-                          依赖于 Categories View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Categories View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">Tags Management</dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="space-y-2">
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Tags Management
-                        </span>
-                        <span class="text-xs text-gray-400">
-                          依赖于 Tags View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Tags View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt class="text-sm font-medium text-gray-900">
-                Plugins Management
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="space-y-2">
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Plugins Management
-                        </span>
-                        <span class="text-xs text-gray-400">
-                          依赖于 Plugins View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Plugins View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </dd>
-            </div>
-            <div
-              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-            >
-              <dt
-                class="flex flex-col gap-y-3 text-sm font-medium text-gray-900"
-              >
-                <span> Discussions Management </span>
-                <span class="text-xs text-gray-400"> 由社区插件提供 </span>
-              </dt>
-              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                <ul class="space-y-2">
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Discussions Management
-                        </span>
-                        <span class="text-xs text-gray-400">
-                          依赖于 Discussions View
-                        </span>
-                      </div>
-                    </div>
-                  </li>
-                  <li>
-                    <div
-                      class="inline-flex w-72 cursor-pointer items-center gap-4 rounded border p-5 hover:border-themeable-primary"
-                    >
-                      <input
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
-                        type="checkbox"
-                      />
-                      <div class="inline-flex flex-col gap-y-3">
-                        <span class="font-medium text-gray-900">
-                          Discussions View
                         </span>
                       </div>
                     </div>
@@ -416,7 +340,12 @@ onMounted(() => {
             </div>
           </dl>
           <div class="p-4">
-            <VButton type="secondary">保存</VButton>
+            <VButton
+              :loading="formState.saving"
+              type="secondary"
+              @click="handleUpdateRole"
+              >保存
+            </VButton>
           </div>
         </div>
       </div>

src/modules/system/roles/RoleList.vue

@@ -7,19 +7,26 @@ import {
   VButton,
   VCard,
   VInput,
-  VModal,
   VPageHeader,
   VSpace,
   VTag,
 } from "@halo-dev/components";
+import RoleCreationModal from "./components/RoleCreationModal.vue";
 import { useRouter } from "vue-router";
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import type { Role } from "@/types/extension";
 import { axiosInstance } from "@halo-dev/admin-shared";
 
 const createVisible = ref(false);
 const roles = ref<Role[]>([]);
 
+const basicRoles = computed(() => {
+  return roles.value.filter(
+    (role) =>
+      role.metadata?.labels?.["plugin.halo.run/role-template"] !== "true"
+  );
+});
+
 const router = useRouter();
 
 const handleFetchRoles = async () => {
@@ -30,6 +37,7 @@ const handleFetchRoles = async () => {
     console.error(e);
   }
 };
+
 const handleRouteToDetail = (name: string) => {
   router.push({ name: "RoleDetail", params: { name } });
 };
@@ -39,7 +47,10 @@ onMounted(() => {
 });
 </script>
 <template>
-  <VModal v-model:visible="createVisible" title="新建角色"></VModal>
+  <RoleCreationModal
+    v-model:visible="createVisible"
+    @close="handleFetchRoles"
+  />
 
   <VPageHeader title="角色">
     <template #icon>
@@ -152,7 +163,7 @@ onMounted(() => {
       </template>
       <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
         <li
-          v-for="(role, index) in roles"
+          v-for="(role, index) in basicRoles"
           :key="index"
           @click="handleRouteToDetail(role.metadata.name)"
         >
@@ -163,13 +174,15 @@ onMounted(() => {
               <div class="flex-1">
                 <div class="flex flex-row items-center">
                   <span class="mr-2 truncate text-sm font-medium text-gray-900">
-                    {{ role.metadata.name }}
+                    {{
+                      role.metadata.annotations?.[
+                        "plugin.halo.run/display-name"
+                      ] || role.metadata.name
+                    }}
                   </span>
                 </div>
                 <div class="mt-2 flex">
-                  <span class="text-xs text-gray-500">
+                  <span class="text-xs text-gray-500"> 包含 0 个权限 </span>
-                    包含 {{ role.rules?.length }} 个权限
-                  </span>
                 </div>
               </div>
               <div class="flex">

src/modules/system/roles/components/RoleCreationModal.vue

@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import { VButton, VInput, VModal, VTabItem, VTabs } from "@halo-dev/components";
+import { computed, ref, watch } from "vue";
+import type { Role } from "@/types/extension";
+import { axiosInstance } from "@halo-dev/admin-shared";
+
+interface RoleTemplateGroup {
+  name: string | null | undefined;
+  roles: Role[];
+}
+
+interface CreationFormState {
+  role: Role;
+  selectedRoleTemplates: string[];
+  saving: boolean;
+}
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:visible", "close"]);
+
+const creationActiveId = ref("general");
+const roles = ref<Role[]>([]);
+const creationFormState = ref<CreationFormState>({
+  role: {
+    apiVersion: "v1alpha1",
+    kind: "Role",
+    metadata: {
+      name: "",
+      labels: {},
+      annotations: {
+        "plugin.halo.run/dependencies": "",
+        "plugin.halo.run/display-name": "",
+      }!,
+    },
+  },
+  selectedRoleTemplates: [],
+  saving: false,
+});
+
+const roleTemplates = computed<Role[]>(() => {
+  return roles.value.filter(
+    (role) => role.metadata.labels?.["plugin.halo.run/role-template"] === "true"
+  );
+});
+
+const roleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
+  const groups: RoleTemplateGroup[] = [];
+  roleTemplates.value.forEach((role) => {
+    const group = groups.find(
+      (group) =>
+        group.name === role.metadata.annotations?.["plugin.halo.run/module"]
+    );
+    if (group) {
+      group.roles.push(role);
+    } else {
+      groups.push({
+        name: role.metadata.annotations?.["plugin.halo.run/module"],
+        roles: [role],
+      });
+    }
+  });
+  return groups;
+});
+
+const handleFetchRoles = async () => {
+  try {
+    const { data } = await axiosInstance.get("/api/v1alpha1/roles");
+    roles.value = data;
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const handleCreateRole = async () => {
+  try {
+    creationFormState.value.saving = true;
+    if (creationFormState.value.role.metadata.annotations) {
+      creationFormState.value.role.metadata.annotations[
+        "plugin.halo.run/dependencies"
+      ] = JSON.stringify(creationFormState.value.selectedRoleTemplates);
+    }
+    await axiosInstance.post<Role>(
+      "/api/v1alpha1/roles",
+      creationFormState.value.role
+    );
+    handleVisibleChange(false);
+  } catch (e) {
+    console.error(e);
+  } finally {
+    creationFormState.value.saving = false;
+  }
+};
+
+const handleVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      handleFetchRoles();
+    }
+  }
+);
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="650"
+    title="创建角色"
+    @update:visible="handleVisibleChange"
+  >
+    <VTabs v-model:active-id="creationActiveId" type="outline">
+      <VTabItem id="general" label="基础信息">
+        <form>
+          <div class="space-y-6 divide-y-0 sm:divide-y sm:divide-gray-200">
+            <div
+              v-if="creationFormState.role.metadata.annotations"
+              class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5"
+            >
+              <label
+                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+              >
+                名称
+              </label>
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
+                <VInput
+                  v-model="
+                    creationFormState.role.metadata.annotations[
+                      'plugin.halo.run/display-name'
+                    ]
+                  "
+                ></VInput>
+              </div>
+            </div>
+            <div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:pt-5">
+              <label
+                class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2"
+              >
+                别名
+              </label>
+              <div class="mt-1 sm:col-span-2 sm:mt-0">
+                <VInput v-model="creationFormState.role.metadata.name"></VInput>
+              </div>
+            </div>
+          </div>
+        </form>
+      </VTabItem>
+      <VTabItem id="permissions" label="权限">
+        <div>
+          <dl class="divide-y divide-gray-100">
+            <div
+              v-for="(group, groupIndex) in roleTemplateGroups"
+              :key="groupIndex"
+              class="bg-white px-4 py-5 hover:bg-gray-50 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
+            >
+              <dt class="text-sm font-medium text-gray-900">
+                {{ group.name }}
+              </dt>
+              <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                <ul class="space-y-2">
+                  <li v-for="(role, index) in group.roles" :key="index">
+                    <div
+                      class="inline-flex w-72 cursor-pointer flex-row items-center gap-4 rounded border p-5 hover:border-themeable-primary"
+                    >
+                      <input
+                        v-model="creationFormState.selectedRoleTemplates"
+                        :value="role.metadata.name"
+                        class="h-4 w-4 rounded border-gray-300 text-indigo-600"
+                        type="checkbox"
+                      />
+                      <div class="inline-flex flex-col gap-y-3">
+                        <span class="font-medium text-gray-900">
+                          {{
+                            role.metadata.annotations?.[
+                              "plugin.halo.run/display-name"
+                            ]
+                          }}
+                        </span>
+                        <span
+                          v-if="
+                            role.metadata.annotations?.[
+                              'plugin.halo.run/dependencies'
+                            ]
+                          "
+                          class="text-xs text-gray-400"
+                        >
+                          依赖于
+                          {{
+                            JSON.parse(
+                              role.metadata.annotations?.[
+                                "plugin.halo.run/dependencies"
+                              ]
+                            ).join(", ")
+                          }}
+                        </span>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </VTabItem>
+    </VTabs>
+    <template #footer>
+      <VButton
+        :loading="creationFormState.saving"
+        type="secondary"
+        @click="handleCreateRole"
+        >创建
+      </VButton>
+    </template>
+  </VModal>
+</template>