fix: the issue that role edit form cannot be submitted in the permission tab (#717)

#### What type of PR is this?

/kind bug
/milestone 2.0-rc.2

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

修复在角色编辑时，如果在权限勾选界面，无法提交表单的问题。

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

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

#### Special notes for your reviewer:

测试方式：

1. 编辑任意角色或者新建角色。
2. 在编辑弹框中切换到权限勾选界面。
3. 点击提交按钮，观察是否能够正常提交。

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

```release-note
修复在 Console 端角色编辑时，如果在权限勾选界面，无法提交表单的问题。
```

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VButton, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
+import { VButton, VModal, VSpace, VTabbar } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 import { computed, ref, watch } from "vue";
 import { rbacAnnotations } from "@/constants/annotations";
@@ -110,8 +110,22 @@ const handleResetForm = () => {
     :width="700"
     @update:visible="onVisibleChange"
   >
-    <VTabs v-model:active-id="tabActiveId" type="outline">
-      <VTabItem id="general" label="基础信息">
+    <VTabbar
+      v-model:active-id="tabActiveId"
+      :items="[
+        {
+          id: 'general',
+          label: '基本信息',
+        },
+        {
+          id: 'permissions',
+          label: '权限',
+        },
+      ]"
+      type="outline"
+    />
+    <div class="mt-2">
+      <div v-show="tabActiveId === 'general'">
         <FormKit
           v-if="formState.metadata.annotations"
           id="role-form"
@@ -131,9 +145,9 @@ const handleResetForm = () => {
             validation="required|length:0,50"
           ></FormKit>
         </FormKit>
-      </VTabItem>
-      <VTabItem id="permissions" label="权限">
-        <div>
+      </div>
+
+      <div v-show="tabActiveId === 'permissions'">
         <dl class="divide-y divide-gray-100">
           <div
             v-for="(group, groupIndex) in roleTemplateGroups"
@@ -189,8 +203,7 @@ const handleResetForm = () => {
           </div>
         </dl>
       </div>
-      </VTabItem>
-    </VTabs>
+    </div>
     <template #footer>
       <VSpace>
         <SubmitButton