refactor: layouts of role editing form (#795)

#### What type of PR is this?

/kind improvement
/milestone 2.1.x

#### What this PR does / why we need it:

重构角色编辑的表单，取消多选项卡的设计。

#### Which issue(s) this PR fixes:

Fixes https://github.com/halo-dev/halo/issues/3033

#### Screenshots:

![2022-12-23 12 09 52](https://user-images.githubusercontent.com/21301288/209269275-6cb4f729-1549-423f-bd45-74e3241e68a7.gif)

#### Special notes for your reviewer:

测试方式：

1. 测试新建和编辑角色。
2. 检查功能是否符合预期。

#### Does this PR introduce a user-facing change?

```release-note
重构 Console 端角色编辑的表单，取消多选项卡的设计。
```

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { VButton, VModal, VSpace, VTabbar } from "@halo-dev/components";
+import { VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import { rbacAnnotations } from "@/constants/annotations";
 import type { Role } from "@halo-dev/api-client";
 import {
@@ -11,6 +11,7 @@ import {
 import cloneDeep from "lodash.clonedeep";
 import { reset } from "@formkit/core";
 import { setFocus } from "@/formkit/utils/focus";
+import { pluginLabels } from "@/constants/labels";
 
 const props = withDefaults(
   defineProps<{
@@ -76,8 +77,6 @@ watch(
   }
 );
 
-const tabActiveId = ref("general");
-
 const editingModalTitle = computed(() => {
   return isUpdateMode.value ? "编辑角色" : "创建角色";
 });
@@ -100,6 +99,7 @@ const onVisibleChange = (visible: boolean) => {
 
 const handleResetForm = () => {
   formState.value = cloneDeep(initialFormState);
+  selectedRoleTemplates.value.clear();
   reset("role-form");
 };
 </script>
@@ -110,22 +110,14 @@ const handleResetForm = () => {
     :width="700"
     @update:visible="onVisibleChange"
   >
-    <VTabbar
+    <div>
-      v-model:active-id="tabActiveId"
+      <div class="md:grid md:grid-cols-4 md:gap-6">
-      :items="[
+        <div class="md:col-span-1">
-        {
+          <div class="sticky top-0">
-          id: 'general',
+            <span class="text-base font-medium text-gray-900"> 基本信息 </span>
-          label: '基本信息',
+          </div>
-        },
+        </div>
-        {
+        <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
-          id: 'permissions',
-          label: '权限',
-        },
-      ]"
-      type="outline"
-    />
-    <div class="mt-2">
-      <div v-show="tabActiveId === 'general'">
           <FormKit
             v-if="formState.metadata.annotations"
             id="role-form"
@@ -146,18 +138,50 @@ const handleResetForm = () => {
             ></FormKit>
           </FormKit>
         </div>
-
+      </div>
-      <div v-show="tabActiveId === 'permissions'">
+      <div class="py-5">
+        <div class="border-t border-gray-200"></div>
+      </div>
+      <div class="md:grid md:grid-cols-4 md:gap-6">
+        <div class="md:col-span-1">
+          <div class="sticky top-0">
+            <span class="text-base font-medium text-gray-900"> 权限 </span>
+          </div>
+        </div>
+        <div class="mt-5 divide-y divide-gray-100 md:col-span-3 md:mt-0">
           <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"
+              class="flex flex-col gap-3 bg-white py-5 first:pt-0"
             >
               <dt class="text-sm font-medium text-gray-900">
-              {{ group.module }}
+                <div>{{ group.module }}</div>
+                <div
+                  v-if="
+                    group.roles.length &&
+                    group.roles[0].metadata.labels?.[pluginLabels.NAME]
+                  "
+                  class="mt-3 text-xs text-gray-500"
+                >
+                  由
+                  <RouterLink
+                    :to="{
+                      name: 'PluginDetail',
+                      params: {
+                        name: group.roles[0].metadata.labels?.[
+                          pluginLabels.NAME
+                        ],
+                      },
+                    }"
+                    class="hover:text-blue-600"
+                  >
+                    {{ group.roles[0].metadata.labels?.[pluginLabels.NAME] }}
+                  </RouterLink>
+                  插件提供
+                </div>
               </dt>
-            <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+              <dd class="text-sm text-gray-900">
                 <ul class="space-y-2">
                   <li v-for="(roleTemplate, index) in group.roles" :key="index">
                     <label
@@ -204,6 +228,7 @@ const handleResetForm = () => {
           </dl>
         </div>
       </div>
+    </div>
     <template #footer>
       <VSpace>
         <SubmitButton