diff --git a/frontend/src/components/TableFilterForm.vue b/frontend/src/components/TableFilterForm.vue
index 47467e2..9011a41 100644
--- a/frontend/src/components/TableFilterForm.vue
+++ b/frontend/src/components/TableFilterForm.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 gap-y-3 sm:gap-y-0">
-    <form class="w-full min-w-[200px] sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
+    <form
+      class="grid grid-cols-2 sm:grid-cols-1 w-full min-w-[200px] sm:w-auto gap-2 xs:gap-3 items-stretch xs:items-center">
       <template v-for="(filter, index) in filters" :key="index">
         <!-- 输入框类型 -->
         <div v-if="filter.type === 'input'" class="flex-grow">
@@ -32,7 +33,6 @@
           </select>
         </div>
       </template>
-
       <button type="submit"
         class="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-3 py-2 min-w-[70px] flex items-center justify-center"
         @click.prevent="handleSearch">
@@ -45,7 +45,7 @@
     </form>
 
     <!-- 额外操作按钮插槽 -->
-    <div class="w-full sm:w-auto">
+    <div class="flex justify-end">
       <slot name="actions"></slot>
     </div>
   </div>
diff --git a/frontend/src/views/BindRoleView.vue b/frontend/src/views/BindRoleView.vue
index 9d87ba7..5dfdbdd 100644
--- a/frontend/src/views/BindRoleView.vue
+++ b/frontend/src/views/BindRoleView.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
-    <div class="mb-4 sm:mb-6 col-span-full">
-      <Breadcrumbs :names="['用户管理', '角色分配']" :routes="[{ name: RouteName.USERVIEW }]" />
-      <h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1>
-    </div>
+	<div class="px-2 sm:px-4 pt-6 sm:rounded-lg">
+		<div class="mb-4 sm:mb-6 col-span-full">
+			<Breadcrumbs :names="['用户管理', '角色分配']" :routes="[{ name: RouteName.USERVIEW }]" />
+			<h1 class="text-xl sm:text-2xl mb-4 sm:mb-6 font-semibold text-gray-900">角色分配</h1>
+		</div>
 
-    <TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
-      @update:values="updateFilterValues">
-      <template #actions>
-        <div class="flex gap-x-2">
-          <TableButton variant="primary" @click="() => {
+		<TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
+			@update:values="updateFilterValues">
+			<template #actions>
+				<div class="flex gap-x-2">
+					<TableButton variant="primary" @click="() => {
               if (checkedRoleIds.length === 0) {
                 alertStore.showAlert({
                   content: '没有选择角色',
@@ -19,9 +19,9 @@
                 roleBindModal?.show();
               }
             }">
-            绑定
-          </TableButton>
-          <TableButton variant="danger" @click="() => {
+						绑定
+					</TableButton>
+					<TableButton variant="danger" @click="() => {
               if (checkedRoleIds.length === 0) {
                 alertStore.showAlert({
                   content: '没有选择角色',
@@ -31,60 +31,60 @@
                 roleUnbindModal?.show();
               }
             }">
-            解绑
-          </TableButton>
-        </div>
-      </template>
-    </TableFilterForm>
+						解绑
+					</TableButton>
+				</div>
+			</template>
+		</TableFilterForm>
 
-    <!-- 移动端卡片布局 -->
-    <div class="md:hidden space-y-4">
-      <MobileCardListWithCheckbox :items="roles" v-model="checkedRoleIds">
-        <template #title="{ item }">
-          {{ item.name }}
-        </template>
-        <template #status="{ item }">
-          <div class="flex items-center">
-            <div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
-            <span class="text-sm">{{ item.isBound === true ? "已绑定" : "未绑定" }}</span>
-          </div>
-        </template>
-        <template #content="{ item }">
-          <div>
-            <p class="text-xs font-medium text-gray-600">角色编码</p>
-            <p class="text-sm text-gray-900 mt-0.5">{{ item.code }}</p>
-          </div>
-        </template>
-      </MobileCardListWithCheckbox>
-    </div>
+		<!-- 移动端卡片布局 -->
+		<div class="md:hidden space-y-4">
+			<MobileCardListWithCheckbox :items="roles" v-model="checkedRoleIds">
+				<template #title="{ item }">
+					{{ item.name }}
+				</template>
+				<template #status="{ item }">
+					<div class="flex items-center">
+						<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
+						<span class="text-sm">{{ item.isBound === true ? "已绑定" : "未绑定" }}</span>
+					</div>
+				</template>
+				<template #content="{ item }">
+					<div>
+						<p class="text-xs font-medium text-gray-600">角色编码</p>
+						<p class="text-sm text-gray-900 mt-0.5">{{ item.code }}</p>
+					</div>
+				</template>
+			</MobileCardListWithCheckbox>
+		</div>
 
-    <!-- PC端表格布局 -->
-    <div class="hidden md:block">
-      <TableFormLayout :items="roles || []" :columns="columns" :hasCheckbox="true" v-model="checkedRoleIds"
-        @all-checked-change="allChecked = $event">
-        <template #code="{ item }">
-          {{ item.code }}
-        </template>
-        <template #name="{ item }">
-          {{ item.name }}
-        </template>
-        <template #bindState="{ item }">
-          <div class="flex items-center">
-            <div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'">
-            </div>
-            {{ item.isBound === true ? "已绑定" : "未绑定" }}
-          </div>
-        </template>
-      </TableFormLayout>
-    </div>
+		<!-- PC端表格布局 -->
+		<div class="hidden md:block">
+			<TableFormLayout :items="roles || []" :columns="columns" :hasCheckbox="true" v-model="checkedRoleIds"
+				@all-checked-change="allChecked = $event">
+				<template #code="{ item }">
+					{{ item.code }}
+				</template>
+				<template #name="{ item }">
+					{{ item.name }}
+				</template>
+				<template #bindState="{ item }">
+					<div class="flex items-center">
+						<div class="h-2.5 w-2.5 rounded-full me-2" :class="item.isBound ? 'bg-green-500' : 'bg-red-500'">
+						</div>
+						{{ item.isBound === true ? "已绑定" : "未绑定" }}
+					</div>
+				</template>
+			</TableFormLayout>
+		</div>
 
-    <TablePagination :pageChange="handlePageChange" :total="total" />
-  </div>
+		<TablePagination :pageChange="handlePageChange" :total="total" />
+	</div>
 
-  <BindModal :id="'role-bind-modal'" :closeModal="() => {
+	<BindModal :id="'role-bind-modal'" :closeModal="() => {
     roleBindModal!.hide();
   }" :onSubmit="handleBindRoleSubmit" title="确定绑定选中的角色吗"></BindModal>
-  <UnModal :id="'role-unbind-modal'" :closeModal="() => {
+	<UnModal :id="'role-unbind-modal'" :closeModal="() => {
     roleUnbindModal!.hide();
   }" :onSubmit="handleUnbindRoleSubmit" title="确定解绑选中的角色吗"></UnModal>
 </template>
diff --git a/frontend/src/views/UserView.vue b/frontend/src/views/UserView.vue
index ca8288c..43b4417 100644
--- a/frontend/src/views/UserView.vue
+++ b/frontend/src/views/UserView.vue
@@ -8,12 +8,12 @@
     <TableFilterForm :filters="filterConfig" :initialValues="filterValues" @search="handleSearch"
       @update:values="updateFilterValues">
       <template #actions>
-        <Button :handleClick="() => handleUpsertUserClick(undefined)" :isLoading="false" :abortable="false"
-          submitContent="新增用户" class="w-full sm:w-auto">
+        <TableButton variant="primary" @click="() => handleUpsertUserClick(undefined)">
           <template #icon>
             <PlusIcon class="w-4 h-4 me-2" />
           </template>
-        </Button>
+          新增用户
+        </TableButton>
       </template>
     </TableFilterForm>
 
@@ -185,6 +185,7 @@ import { useRouter } from "vue-router";
 import type { components } from "../api/types/schema";
 import useAlertStore from "../composables/store/useAlertStore";
 import { useUserUpsert } from "../composables/user/useUserUpsert";
+import TableButton from "@/components/TableButton.vue";
 
 const filterConfig: FilterItem[] = [
 	{