From 7c0340a72578c1128ed6a4c6e65326b80dab0f21 Mon Sep 17 00:00:00 2001
From: ccmjga <ccmjga@gmail.com>
Date: Mon, 2 Jun 2025 15:23:57 +0800
Subject: [PATCH] fix buttons

---
 frontend/src/components/Button.vue    |  1 +
 frontend/src/views/PermissionView.vue | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/Button.vue b/frontend/src/components/Button.vue
index afb8bea..fbfa2c1 100644
--- a/frontend/src/components/Button.vue
+++ b/frontend/src/components/Button.vue
@@ -9,6 +9,7 @@
     'text-center',
     'inline-flex',
     'items-center',
+    'justify-center',
     isLoading && !abortable ? 'bg-blue-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-800',
     sizeClasses
   ]">
diff --git a/frontend/src/views/PermissionView.vue b/frontend/src/views/PermissionView.vue
index 28feaca..39ac803 100644
--- a/frontend/src/views/PermissionView.vue
+++ b/frontend/src/views/PermissionView.vue
@@ -24,11 +24,15 @@
         </div>
       </form>
       <!-- Create Modal toggle -->
-      <button @click="handleUpsertPermissionClick(undefined)"
-        class="flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
-        type="button">
-        新增权限
-      </button>
+      <Button :handleClick="() => handleUpsertPermissionClick(undefined)" :isLoading="false" :abortable="false"
+        submitContent="新增权限" size="sm" class="w-full sm:w-auto">
+        <template #icon>
+          <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+          </svg>
+        </template>
+      </Button>
     </div>
     <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
@@ -107,6 +111,7 @@
 </template>
 
 <script setup lang="ts">
+import Button from "@/components/Button.vue";
 import PermissionUpsertModal from "@/components/PermissionUpsertModal.vue";
 import PermissionDeleteModal from "@/components/PopupModal.vue";
 import usePermissionDelete from "@/composables/permission/usePermissionDelete";