diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index ecc1a6f..89cca00 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     CustomIconSelect: typeof import('./../components/custom/custom-icon-select.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
diff --git a/src/views/alova/user/index.vue b/src/views/alova/user/index.vue
index 338a1ae..059326b 100644
--- a/src/views/alova/user/index.vue
+++ b/src/views/alova/user/index.vue
@@ -142,16 +142,19 @@ const { columnChecks, columns } = useCheckedColumns<typeof fetchGetUserList>(()
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <UserSearch v-model:model="searchParams" @search="getDataByPage" />
-    <ElCard :header="$t('page.manage.user.title')" class="sm:flex-1-hidden card-wrapper" body-class="ht50">
+    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
       <template #header>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="refresh"
-        />
+        <div class="flex items-center justify-between">
+          <p>{{ $t('page.manage.user.title') }}</p>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            @add="handleAdd"
+            @delete="handleBatchDelete"
+            @refresh="refresh"
+          />
+        </div>
       </template>
       <div class="h-[calc(100%-50px)]">
         <ElTable
diff --git a/src/views/manage/role/index.vue b/src/views/manage/role/index.vue
index a1c31fe..ca9c3e1 100644
--- a/src/views/manage/role/index.vue
+++ b/src/views/manage/role/index.vue
@@ -112,16 +112,19 @@ function edit(id: number) {
 <template>
   <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
     <RoleSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
-    <ElCard :header="$t('page.manage.role.title')" class="sm:flex-1-hidden card-wrapper" body-class="ht50">
+    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
       <template #header>
-        <TableHeaderOperation
-          v-model:columns="columnChecks"
-          :disabled-delete="checkedRowKeys.length === 0"
-          :loading="loading"
-          @add="handleAdd"
-          @delete="handleBatchDelete"
-          @refresh="getData"
-        />
+        <div class="flex items-center justify-between">
+          <p>{{ $t('page.manage.role.title') }}</p>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :disabled-delete="checkedRowKeys.length === 0"
+            :loading="loading"
+            @add="handleAdd"
+            @delete="handleBatchDelete"
+            @refresh="getData"
+          />
+        </div>
       </template>
       <div class="h-[calc(100%-50px)]">
         <ElTable