From 17200ec6d108293a5b8baf037820658563173534 Mon Sep 17 00:00:00 2001
From: Chuck1sn <chuck1inzl@gmail.com>
Date: Tue, 10 Jun 2025 13:58:55 +0800
Subject: [PATCH] mobile style v2.1

---
 .../mocks/{userHandlers.ts => iamHandlers.ts} |  4 +-
 frontend/src/api/mocks/setup.ts               |  2 +-
 frontend/src/components/Breadcrumbs.vue       |  3 +-
 frontend/src/components/MobileCardList.vue    |  7 +-
 frontend/src/composables/useMobileStyles.ts   | 16 ++--
 frontend/src/router/index.ts                  |  9 +-
 frontend/src/router/modules/dashboard.ts      |  1 -
 frontend/src/views/BindDepartmentView.vue     | 60 ++++++++-----
 frontend/src/views/BindPermissionView.vue     | 70 +++++++++++++++
 frontend/src/views/BindPositionView.vue       | 34 ++++++--
 frontend/src/views/BindRoleView.vue           |  6 +-
 frontend/src/views/DepartmentView.vue         | 73 ++++++++++++----
 frontend/src/views/LlmConfigView.vue          | 24 ++---
 frontend/src/views/PermissionView.vue         |  6 +-
 frontend/src/views/PositionView.vue           | 63 +++++++++++---
 frontend/src/views/RoleView.vue               | 87 ++++++++++++++-----
 frontend/src/views/SchedulerView.vue          | 64 +++++++++++++-
 17 files changed, 417 insertions(+), 112 deletions(-)
 rename frontend/src/api/mocks/{userHandlers.ts => iamHandlers.ts} (98%)

diff --git a/frontend/src/api/mocks/userHandlers.ts b/frontend/src/api/mocks/iamHandlers.ts
similarity index 98%
rename from frontend/src/api/mocks/userHandlers.ts
rename to frontend/src/api/mocks/iamHandlers.ts
index e4e5c92..8d3566e 100644
--- a/frontend/src/api/mocks/userHandlers.ts
+++ b/frontend/src/api/mocks/iamHandlers.ts
@@ -169,11 +169,11 @@ export default [
 		const mockData = generateUser();
 		return HttpResponse.json(mockData);
 	}),
-	http.post("/department/unbind", () => {
+	http.post("/iam/department/unbind", () => {
 		console.log("Captured a 'POST /department/unbind' request");
 		return HttpResponse.json();
 	}),
-	http.post("/department/bind", () => {
+	http.post("/iam/department/bind", () => {
 		console.log("Captured a 'POST /department/bind' request");
 		return HttpResponse.json();
 	}),
diff --git a/frontend/src/api/mocks/setup.ts b/frontend/src/api/mocks/setup.ts
index 4a5881f..6d477ec 100644
--- a/frontend/src/api/mocks/setup.ts
+++ b/frontend/src/api/mocks/setup.ts
@@ -3,7 +3,7 @@ import authHandlers from "./authHandlers";
 import jobHandlers from "./schedulerHandlers";
 import permissionHandlers from "./permissionHandlers";
 import roleHandlers from "./roleHandlers";
-import userHandlers from "./userHandlers";
+import userHandlers from "./iamHandlers";
 import departmentHandlers from "./departmentHandlers";
 import positionHandlers from "./positionHandlers";
 import aiHandlers from "./aiHandlers";
diff --git a/frontend/src/components/Breadcrumbs.vue b/frontend/src/components/Breadcrumbs.vue
index 0bc79ec..8b55273 100644
--- a/frontend/src/components/Breadcrumbs.vue
+++ b/frontend/src/components/Breadcrumbs.vue
@@ -2,7 +2,8 @@
   <nav class="flex mb-4" aria-label="Breadcrumb">
     <ol class="inline-flex items-center space-x-1 sm:space-x-2 text-sm">
       <li class="inline-flex items-center">
-        <RouterLink to="/" class="inline-flex items-center font-medium text-gray-500 hover:text-blue-600">
+        <RouterLink :to="{ name: RouteName.HOME }"
+          class="inline-flex items-center font-medium text-gray-500 hover:text-blue-600">
           <svg class="w-3.5 h-3.5 mr-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
             viewBox="0 0 20 20">
             <path
diff --git a/frontend/src/components/MobileCardList.vue b/frontend/src/components/MobileCardList.vue
index a6d8f4f..2aaa6b7 100644
--- a/frontend/src/components/MobileCardList.vue
+++ b/frontend/src/components/MobileCardList.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="space-y-4">
-    <slot name="empty" v-if="items.length === 0"></slot>
-    <div v-else v-for="(item, index) in items" :key="index"
+    <div v-for="(item, index) in items ?? []" :key="index"
       class="p-4 bg-white rounded-lg shadow relative border border-gray-100">
       <div class="flex justify-between items-start mb-3">
         <!-- 标题区域 -->
@@ -37,7 +36,7 @@
 
 <script setup generic="T" lang="ts">
 defineProps<{
-  items: T[];
-  hasCheckbox?: boolean;
+	items: T[] | undefined;
+	hasCheckbox?: boolean;
 }>();
 </script>
diff --git a/frontend/src/composables/useMobileStyles.ts b/frontend/src/composables/useMobileStyles.ts
index c60fc65..f1678d8 100644
--- a/frontend/src/composables/useMobileStyles.ts
+++ b/frontend/src/composables/useMobileStyles.ts
@@ -15,14 +15,14 @@ export function useMobileStyles() {
 	// 卡片内容容器样式
 	const cardContentClass = "text-sm text-gray-600 mb-3 space-y-2";
 
-	// 标签名称样式
-	const labelClass = "text-xs text-gray-500";
+	// 标签名称样式 - 更深的灰色以增强区分度
+	const labelClass = "text-xs font-medium text-gray-600";
 
-	// 标签值样式
-	const valueClass = "text-sm";
+	// 标签值样式 - 更深的颜色以突出显示值
+	const valueClass = "text-sm text-gray-900 mt-0.5";
 
 	// 卡片网格布局
-	const gridContainerClass = "grid grid-cols-2 gap-2";
+	const gridContainerClass = "grid grid-cols-2 gap-3";
 
 	// 按钮容器样式
 	const actionContainerClass = "flex justify-between items-center mt-4";
@@ -48,6 +48,9 @@ export function useMobileStyles() {
 	// 状态指示点样式
 	const statusDotClass = "h-2.5 w-2.5 rounded-full me-2";
 
+	// 卡片分组标题
+	const sectionTitleClass = "text-sm font-medium text-gray-700 mb-2";
+
 	return {
 		cardContainerClass,
 		cardHeaderClass,
@@ -63,5 +66,6 @@ export function useMobileStyles() {
 		secondaryButtonClass,
 		statusIndicatorClass,
 		statusDotClass,
+		sectionTitleClass,
 	};
-} 
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 998b4ad..a48a973 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,12 +5,19 @@ import { setupGuards } from "./guards";
 import authRoutes from "./modules/auth";
 import dashboardRoutes from "./modules/dashboard";
 import errorRoutes from "./modules/error";
-import { RouteName } from "./constants";
+import { RouteName, RoutePath } from "./constants";
 
 const routes: RouteRecordRaw[] = [
 	dashboardRoutes,
 	...authRoutes,
 	...errorRoutes,
+	{
+		path: RoutePath.HOME,
+		name: RouteName.HOME,
+		redirect: {
+			path: `${RoutePath.DASHBOARD}/${RoutePath.USERVIEW}`,
+		},
+	},
 ];
 
 const router = createRouter({
diff --git a/frontend/src/router/modules/dashboard.ts b/frontend/src/router/modules/dashboard.ts
index 9bd2331..d74aed9 100644
--- a/frontend/src/router/modules/dashboard.ts
+++ b/frontend/src/router/modules/dashboard.ts
@@ -1,6 +1,5 @@
 import type { RouteRecordRaw } from "vue-router";
 import Dashboard from "../../components/Dashboard.vue";
-import OverView from "../../views/OverView.vue";
 import { EPermission, ERole, RouteName, RoutePath } from "../constants";
 import userManagementRoutes from "./user";
 import aiRoutes from "./ai";
diff --git a/frontend/src/views/BindDepartmentView.vue b/frontend/src/views/BindDepartmentView.vue
index 4d7d2c0..af0ed2a 100644
--- a/frontend/src/views/BindDepartmentView.vue
+++ b/frontend/src/views/BindDepartmentView.vue
@@ -6,7 +6,7 @@
     </div>
     <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 sm:w-auto flex flex-col xs:flex-row gap-2 xs:gap-3 items-stretch xs:items-center">
-        <div class="flex-grow"> 
+        <div class="flex-grow">
           <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
           <div class="relative">
             <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -62,27 +62,51 @@
         </button>
       </div>
     </div>
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden space-y-4">
+      <div v-for="department in departments" :key="department.id" class="p-4 bg-white rounded-lg shadow">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center">
+            <input :id="'mobile-checkbox-' + department.id" :value="department.id" type="checkbox"
+              v-model="checkedDepartmentIds"
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 mr-3">
+            <div class="font-medium text-gray-900">{{ department.name }}</div>
+          </div>
+          <div class="flex items-center">
+            <div class="h-2.5 w-2.5 rounded-full me-2" :class="department.isBound ? 'bg-green-500' : 'bg-red-500'">
+            </div>
+            <span class="text-sm">{{ department.isBound === true ? "已绑定" : "未绑定" }}</span>
+          </div>
+        </div>
 
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+        <div>
+          <p class="text-xs font-medium text-gray-600">上级部门</p>
+          <p class="text-sm text-gray-900 mt-0.5">{{ !department.parentName ? '无' : department.parentName }}</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
-            <th scope="col" class="p-2 sm:p-4 w-4">
+            <th scope="col" class="p-4 w-4">
               <div class="flex items-center">
                 <input id="checkbox-all-search" type="checkbox" v-model="allChecked"
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label for="checkbox-all-search" class="sr-only">checkbox</label>
               </div>
             </th>
-            <th scope="col" class="px-3 py-2 md:px-4 md:py-3">上级部门</th>
-            <th scope="col" class="px-3 py-2 md:px-4 md:py-3">部门名称</th>
-            <th scope="col" class="px-3 py-2 md:px-4 md:py-3">绑定状态</th>
+            <th scope="col" class="px-4 py-3">上级部门</th>
+            <th scope="col" class="px-4 py-3">部门名称</th>
+            <th scope="col" class="px-4 py-3">绑定状态</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="department in departments" :key="department.id"
             class="bg-white border-b border-gray-200 hover:bg-gray-50">
-            <td class="w-4 p-2 sm:p-4">
+            <td class="w-4 p-4">
               <div class="flex items-center">
                 <input :id="'checkbox-table-search-' + department.id" :value="department.id" type="checkbox"
                   v-model="checkedDepartmentIds"
@@ -90,13 +114,13 @@
                 <label :for="'checkbox-table-search-' + department.id" class="sr-only">checkbox</label>
               </div>
             </td>
-            <td scope="row" class="px-3 py-2 md:px-4 md:py-3 whitespace-nowrap">
+            <td scope="row" class="px-4 py-3 whitespace-nowrap">
               {{ !department.parentName ? '无' : department.parentName }}
             </td>
-            <td scope="row" class="px-3 py-2 md:px-4 md:py-3 whitespace-nowrap font-medium text-gray-900">
+            <td scope="row" class="px-4 py-3 whitespace-nowrap font-medium text-gray-900">
               {{ department.name }}
             </td>
-            <td class="px-3 py-2 md:px-4 md:py-3 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
+            <td class="px-4 py-3 max-w-sm overflow-hidden text-ellipsis">
               <div class="flex items-center">
                 <div class="h-2.5 w-2.5 rounded-full me-2" :class="department.isBound ? 'bg-green-500' : 'bg-red-500'">
                 </div> {{
@@ -107,16 +131,15 @@
         </tbody>
       </table>
     </div>
-
     <TablePagination :pageChange="handlePageChange" :total="total" />
-  </div>
-
-  <BindModal :id="'department-bind-modal'" :closeModal="() => {
+    <BindModal :id="'department-bind-modal'" :closeModal="() => {
     departmentBindModal!.hide();
   }" :onSubmit="handleBindDepartmentSubmit" title="绑定选中的部门吗"></BindModal>
-  <UnModal :id="'department-unbind-modal'" :closeModal="() => {
+    <UnModal :id="'department-unbind-modal'" :closeModal="() => {
     departmentUnbindModal!.hide();
   }" :onSubmit="handleUnbindDepartmentSubmit" title="解绑选中的部门吗"></UnModal>
+  </div>
+
 </template>
 
 <script setup lang="ts">
@@ -125,7 +148,6 @@ import BindModal from "@/components/PopupModal.vue";
 import UnModal from "@/components/PopupModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import { useDepartmentQuery } from "@/composables/department/useDepartmentQuery";
-import { RouteName } from "@/router/constants";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { onMounted, ref, watch } from "vue";
 import { useRoute } from "vue-router";
@@ -200,11 +222,7 @@ onMounted(async () => {
 	const $unbindModalElement: HTMLElement | null = document.querySelector(
 		"#department-unbind-modal",
 	);
-	departmentUnbindModal.value = new Modal(
-		$unbindModalElement,
-		{},
-		{ id: "department-unbind-modal" },
-	);
+	departmentUnbindModal.value = new Modal($unbindModalElement, {});
 });
 
 const handleSearch = async () => {
diff --git a/frontend/src/views/BindPermissionView.vue b/frontend/src/views/BindPermissionView.vue
index e325855..2ac633f 100644
--- a/frontend/src/views/BindPermissionView.vue
+++ b/frontend/src/views/BindPermissionView.vue
@@ -119,6 +119,75 @@
   <UnModal :id="'permission-unbind-modal'" :closeModal="() => {
     permissionUnbindModal!.hide();
   }" :onSubmit="handleUnbindPermissionSubmit" title="确定解绑选中的权限吗"></UnModal>
+
+  <!-- 移动端卡片布局 -->
+  <div class="md:hidden space-y-4">
+    <div v-for="permission in permissions" :key="permission.id" class="p-4 bg-white rounded-lg shadow">
+      <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center">
+          <input :id="'mobile-checkbox-' + permission.id" :value="permission.id" type="checkbox"
+            v-model="checkedPermissionIds"
+            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 mr-3">
+          <div class="font-medium text-gray-900">{{ permission.name }}</div>
+        </div>
+        <div class="flex items-center">
+          <div class="h-2.5 w-2.5 rounded-full me-2" :class="permission.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
+          <span class="text-sm">{{ permission.isBound === true ? "已绑定" : "未绑定" }}</span>
+        </div>
+      </div>
+
+      <div>
+        <p class="text-xs font-medium text-gray-600">权限编码</p>
+        <p class="text-sm text-gray-900 mt-0.5">{{ permission.code }}</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- PC端表格布局 -->
+  <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
+    <table class="w-full text-sm text-left rtl:text-right text-gray-500">
+      <thead class="text-xs text-gray-700 uppercase bg-gray-50">
+        <tr>
+          <th scope="col" class="p-4 w-4">
+            <div class="flex items-center">
+              <input id="checkbox-all-search" type="checkbox" v-model="allChecked"
+                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
+              <label for="checkbox-all-search" class="sr-only">checkbox</label>
+            </div>
+          </th>
+          <th scope="col" class="px-4 py-3">权限编码</th>
+          <th scope="col" class="px-4 py-3">权限名称</th>
+          <th scope="col" class="px-4 py-3">绑定状态</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="permission in permissions" :key="permission.id"
+          class="bg-white border-b border-gray-200 hover:bg-gray-50">
+          <td class="w-4 p-4">
+            <div class="flex items-center">
+              <input :id="'checkbox-table-search-' + permission.id" :value="permission.id" type="checkbox"
+                v-model="checkedPermissionIds"
+                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
+              <label :for="'checkbox-table-search-' + permission.id" class="sr-only">checkbox</label>
+            </div>
+          </td>
+          <td scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">
+            {{ permission.code }}
+          </td>
+          <td scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">
+            {{ permission.name }}
+          </td>
+          <td class="px-4 py-3 max-w-sm overflow-hidden text-ellipsis">
+            <div class="flex items-center">
+              <div class="h-2.5 w-2.5 rounded-full me-2" :class="permission.isBound ? 'bg-green-500' : 'bg-red-500'">
+              </div> {{
+              permission.isBound === true ? "已绑定" : "未绑定" }}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -126,6 +195,7 @@ import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import BindModal from "@/components/PopupModal.vue";
 import UnModal from "@/components/PopupModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
+import { useMobileStyles } from "@/composables/useMobileStyles";
 import { RouteName } from "@/router/constants";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { onMounted, ref, watch } from "vue";
diff --git a/frontend/src/views/BindPositionView.vue b/frontend/src/views/BindPositionView.vue
index 77522bc..b682545 100644
--- a/frontend/src/views/BindPositionView.vue
+++ b/frontend/src/views/BindPositionView.vue
@@ -63,25 +63,44 @@
       </div>
     </div>
 
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden space-y-4">
+      <div v-for="position in positions" :key="position.id" class="p-4 bg-white rounded-lg shadow">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center">
+            <input :id="'mobile-checkbox-' + position.id" :value="position.id" type="checkbox"
+              v-model="checkedPositionIds"
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2 mr-3">
+            <div class="font-medium text-gray-900">{{ position.name }}</div>
+          </div>
+          <div class="flex items-center">
+            <div class="h-2.5 w-2.5 rounded-full me-2" :class="position.isBound ? 'bg-green-500' : 'bg-red-500'"></div>
+            <span class="text-sm">{{ position.isBound === true ? "已绑定" : "未绑定" }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
-            <th scope="col" class="p-2 sm:p-4 w-4">
+            <th scope="col" class="p-4 w-4">
               <div class="flex items-center">
                 <input id="checkbox-all-search" type="checkbox" v-model="allChecked"
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label for="checkbox-all-search" class="sr-only">checkbox</label>
               </div>
             </th>
-            <th scope="col" class="px-3 py-2 md:px-4 md:py-3">岗位名称</th>
-            <th scope="col" class="px-3 py-2 md:px-4 md:py-3">绑定状态</th>
+            <th scope="col" class="px-4 py-3">岗位名称</th>
+            <th scope="col" class="px-4 py-3">绑定状态</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="position in positions" :key="position.id"
             class="bg-white border-b border-gray-200 hover:bg-gray-50">
-            <td class="w-4 p-2 sm:p-4">
+            <td class="w-4 p-4">
               <div class="flex items-center">
                 <input :id="'checkbox-table-search-' + position.id" :value="position.id" type="checkbox"
                   v-model="checkedPositionIds"
@@ -89,10 +108,10 @@
                 <label :for="'checkbox-table-search-' + position.id" class="sr-only">checkbox</label>
               </div>
             </td>
-            <td scope="row" class="px-3 py-2 md:px-4 md:py-3 font-medium text-gray-900 whitespace-nowrap">
+            <td scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">
               {{ position.name }}
             </td>
-            <td class="px-3 py-2 md:px-4 md:py-3 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
+            <td class="px-4 py-3 max-w-sm overflow-hidden text-ellipsis">
               <div class="flex items-center">
                 <div class="h-2.5 w-2.5 rounded-full me-2" :class="position.isBound ? 'bg-green-500' : 'bg-red-500'">
                 </div> {{
@@ -122,6 +141,7 @@ import UnModal from "@/components/PopupModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import { usePositionBind } from "@/composables/position/usePositionBind";
 import { usePositionQuery } from "@/composables/position/usePositionQuery";
+import { useMobileStyles } from "@/composables/useMobileStyles";
 import { RouteName } from "@/router/constants";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { onMounted, ref, watch } from "vue";
diff --git a/frontend/src/views/BindRoleView.vue b/frontend/src/views/BindRoleView.vue
index fb0dd92..8745d87 100644
--- a/frontend/src/views/BindRoleView.vue
+++ b/frontend/src/views/BindRoleView.vue
@@ -78,8 +78,9 @@
           </div>
         </div>
 
-        <div class="text-xs text-gray-500">
-          角色编码: {{ role.code }}
+        <div>
+          <p class="text-xs font-medium text-gray-600">角色编码</p>
+          <p class="text-sm text-gray-900 mt-0.5">{{ role.code }}</p>
         </div>
       </div>
     </div>
@@ -146,6 +147,7 @@ import BindModal from "@/components/PopupModal.vue";
 import UnModal from "@/components/PopupModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import { useRolesQuery } from "@/composables/role/useRolesQuery";
+import { useMobileStyles } from "@/composables/useMobileStyles";
 import { RouteName } from "@/router/constants";
 import { tr } from "@faker-js/faker";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
diff --git a/frontend/src/views/DepartmentView.vue b/frontend/src/views/DepartmentView.vue
index 6469f07..d09453e 100644
--- a/frontend/src/views/DepartmentView.vue
+++ b/frontend/src/views/DepartmentView.vue
@@ -33,45 +33,86 @@
         </template>
       </Button>
     </div>
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden">
+      <MobileCardList :items="departments">
+        <template #title="{ item }">
+          {{ item.name }}
+        </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.parentName ? '无' : item.parentName }}</p>
+          </div>
+        </template>
+        <template #actions="{ item }">
+          <div class="flex gap-x-2">
+            <button @click="handleUpsertDepartmentClick(item)"
+              class="flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5"
+              type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                <path fill-rule="evenodd"
+                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>编辑</span>
+            </button>
+            <button
+              class="flex items-center justify-center gap-x-1 bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-xs px-3 py-1.5"
+              @click="handleDeleteDepartmentClick(item)" type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>删除</span>
+            </button>
+          </div>
+        </template>
+      </MobileCardList>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
-            <th scope="col" class="p-2 sm:p-4 hidden sm:table-cell">
+            <th scope="col" class="p-4">
               <div class="flex items-center">
                 <input id="checkbox-all-search" disabled type="checkbox"
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label for="checkbox-all-search" class="sr-only">checkbox</label>
               </div>
             </th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">上级部门</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">部门名称</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">操作</th>
+            <th scope="col" class="px-6 py-3">上级部门</th>
+            <th scope="col" class="px-6 py-3">部门名称</th>
+            <th scope="col" class="px-6 py-3">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="department in departments" :key="department.id"
             class="bg-white border-b border-gray-200 hover:bg-gray-50">
-            <td class="w-4 p-2 sm:p-4 hidden sm:table-cell">
+            <td class="w-4 p-4">
               <div class="flex items-center">
                 <input :id="'checkbox-table-search-' + department.id" type="checkbox" disabled
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label :for="'checkbox-table-search-' + department.id" class="sr-only">checkbox</label>
               </div>
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
               {{ !department.parentName ? '无' : department.parentName }}
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 font-medium text-gray-900">
+            <td class="px-6 py-4 font-medium text-gray-900">
               {{ department.name }}
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
-              <div class="flex flex-col sm:flex-row items-start sm:items-center gap-y-2 sm:gap-y-0 sm:gap-x-2">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
+              <div class="flex items-center gap-x-2">
                 <button @click="handleUpsertDepartmentClick(department)"
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 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-4 py-2.5"
                   type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
                     <path fill-rule="evenodd"
                       d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
@@ -80,10 +121,9 @@
                   <span>编辑</span>
                 </button>
                 <button
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-sm px-4 py-2.5"
                   @click="handleDeleteDepartmentClick(department)" type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
                       d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                       clip-rule="evenodd"></path>
@@ -114,6 +154,7 @@
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Button from "@/components/Button.vue";
 import DepartmentUpsertModal from "@/components/DepartmentUpsertModal.vue";
+import MobileCardList from "@/components/MobileCardList.vue";
 import DepartmentDeleteModal from "@/components/PopupModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import type { DepartmentUpsertModel } from "@/types/department";
diff --git a/frontend/src/views/LlmConfigView.vue b/frontend/src/views/LlmConfigView.vue
index c5cc2d6..c3defc0 100644
--- a/frontend/src/views/LlmConfigView.vue
+++ b/frontend/src/views/LlmConfigView.vue
@@ -27,7 +27,7 @@
 
     <!-- 移动端卡片布局 -->
     <div class="md:hidden">
-      <MobileCardList :items="llms as Array<components['schemas']['LlmVm']>">
+      <MobileCardList :items="llms">
         <template #title="{ item }">
           {{ item.name }}
         </template>
@@ -38,26 +38,26 @@
           </div>
         </template>
         <template #content="{ item }">
-          <div class="grid grid-cols-2 gap-2">
+          <div class="grid grid-cols-2 gap-3">
             <div>
-              <p class="text-xs text-gray-500">模型名称</p>
-              <p>{{ item.modelName }}</p>
+              <p class="text-xs font-medium text-gray-600">模型名称</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.modelName }}</p>
             </div>
             <div>
-              <p class="text-xs text-gray-500">类型</p>
-              <p>{{ item.type === 'CHAT' ? '聊天' : '嵌入' }}</p>
+              <p class="text-xs font-medium text-gray-600">类型</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.type === 'CHAT' ? '聊天' : '嵌入' }}</p>
             </div>
             <div>
-              <p class="text-xs text-gray-500">优先级</p>
-              <p>{{ item.priority }}</p>
+              <p class="text-xs font-medium text-gray-600">优先级</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.priority }}</p>
             </div>
             <div class="col-span-2">
-              <p class="text-xs text-gray-500">API Key</p>
-              <p class="truncate">{{ item.apiKey }}</p>
+              <p class="text-xs font-medium text-gray-600">API Key</p>
+              <p class="text-sm text-gray-900 mt-0.5 truncate">{{ item.apiKey }}</p>
             </div>
             <div class="col-span-2">
-              <p class="text-xs text-gray-500">URL</p>
-              <p class="truncate">{{ item.url }}</p>
+              <p class="text-xs font-medium text-gray-600">URL</p>
+              <p class="text-sm text-gray-900 mt-0.5 truncate">{{ item.url }}</p>
             </div>
           </div>
         </template>
diff --git a/frontend/src/views/PermissionView.vue b/frontend/src/views/PermissionView.vue
index 88b4688..5cf4359 100644
--- a/frontend/src/views/PermissionView.vue
+++ b/frontend/src/views/PermissionView.vue
@@ -37,14 +37,14 @@
 
     <!-- 移动端卡片布局 -->
     <div class="md:hidden">
-      <MobileCardList :items="permissions as Array<components['schemas']['PermissionRespDto']>">
+      <MobileCardList :items="permissions">
         <template #title="{ item }">
           {{ item.name }}
         </template>
         <template #content="{ item }">
           <div>
-            <p class="text-xs text-gray-500">权限编码</p>
-            <p>{{ item.code }}</p>
+            <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>
         <template #actions="{ item }">
diff --git a/frontend/src/views/PositionView.vue b/frontend/src/views/PositionView.vue
index 326d28f..632afd1 100644
--- a/frontend/src/views/PositionView.vue
+++ b/frontend/src/views/PositionView.vue
@@ -35,41 +35,75 @@
       </Button>
     </div>
 
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden">
+      <MobileCardList :items="positions">
+        <template #title="{ item }">
+          {{ item.name }}
+        </template>
+        <template #actions="{ item }">
+          <div class="flex gap-x-2">
+            <button @click="handleUpsertPositionClick(item)"
+              class="flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5"
+              type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                <path fill-rule="evenodd"
+                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>编辑</span>
+            </button>
+            <button
+              class="flex items-center justify-center gap-x-1 bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-xs px-3 py-1.5"
+              @click="handleDeletePositionClick(item)" type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>删除</span>
+            </button>
+          </div>
+        </template>
+      </MobileCardList>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
-            <th scope="col" class="p-2 sm:p-4 hidden sm:table-cell">
+            <th scope="col" class="p-4">
               <div class="flex items-center">
                 <input id="checkbox-all-search" disabled type="checkbox"
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label for="checkbox-all-search" class="sr-only">checkbox</label>
               </div>
             </th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">岗位名称</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">操作</th>
+            <th scope="col" class="px-6 py-3">岗位名称</th>
+            <th scope="col" class="px-6 py-3">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="position in positions" :key="position.id"
             class="bg-white border-b border-gray-200 hover:bg-gray-50">
-            <td class="w-4 p-2 sm:p-4 hidden sm:table-cell">
+            <td class="w-4 p-4">
               <div class="flex items-center">
                 <input :id="'checkbox-table-search-' + position.id" type="checkbox" disabled
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label :for="'checkbox-table-search-' + position.id" class="sr-only">checkbox</label>
               </div>
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 font-medium text-gray-900">
+            <td class="px-6 py-4 font-medium text-gray-900">
               {{ position.name }}
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
-              <div class="flex flex-col sm:flex-row items-start sm:items-center gap-y-2 sm:gap-y-0 sm:gap-x-2">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
+              <div class="flex items-center gap-x-2">
                 <button @click="handleUpsertPositionClick(position)"
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 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-4 py-2.5"
                   type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
                     <path fill-rule="evenodd"
                       d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
@@ -78,10 +112,9 @@
                   <span>编辑</span>
                 </button>
                 <button
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5 text-center"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-sm px-4 py-2.5"
                   @click="handleDeletePositionClick(position)" type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
                       d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                       clip-rule="evenodd"></path>
@@ -110,12 +143,14 @@
 <script setup lang="ts">
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Button from "@/components/Button.vue";
+import MobileCardList from "@/components/MobileCardList.vue";
 import PositionDeleteModal from "@/components/PopupModal.vue";
 import PositionUpsertModal from "@/components/PositionUpsertModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
 import usePositionDelete from "@/composables/position/usePositionDelete";
 import { usePositionQuery } from "@/composables/position/usePositionQuery";
 import { usePositionUpsert } from "@/composables/position/usePositionUpsert";
+import { useMobileStyles } from "@/composables/useMobileStyles";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { nextTick, onMounted, ref } from "vue";
 import type { components } from "../api/types/schema";
diff --git a/frontend/src/views/RoleView.vue b/frontend/src/views/RoleView.vue
index a2b03cc..6020a7a 100644
--- a/frontend/src/views/RoleView.vue
+++ b/frontend/src/views/RoleView.vue
@@ -34,54 +34,101 @@
         </template>
       </Button>
     </div>
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden">
+      <MobileCardList :items="roles">
+        <template #title="{ item }">
+          {{ item.name }}
+        </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>
+        <template #tags="{ item }">
+          <button
+            class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-xs px-3 py-1.5"
+            @click="handleBindPermissionClick(item)" type="button">
+            分配权限
+          </button>
+        </template>
+        <template #actions="{ item }">
+          <div class="flex gap-x-2">
+            <button @click="handleUpsertRoleClick(item)"
+              class="flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5"
+              type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                <path fill-rule="evenodd"
+                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>编辑</span>
+            </button>
+            <button
+              class="flex items-center justify-center gap-x-1 bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-xs px-3 py-1.5"
+              @click="handleDeleteRoleClick(item)" type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                  d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>删除</span>
+            </button>
+          </div>
+        </template>
+      </MobileCardList>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
-            <th scope="col" class="p-2 sm:p-4 hidden sm:table-cell">
+            <th scope="col" class="p-4">
               <div class="flex items-center">
                 <input id="checkbox-all-search" disabled type="checkbox"
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label for="checkbox-all-search" class="sr-only">checkbox</label>
               </div>
             </th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">角色名称</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3 hidden md:table-cell">角色编码</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">分配</th>
-            <th scope="col" class="px-3 py-2 sm:px-6 sm:py-3">操作</th>
+            <th scope="col" class="px-6 py-3">角色名称</th>
+            <th scope="col" class="px-6 py-3">角色编码</th>
+            <th scope="col" class="px-6 py-3">分配</th>
+            <th scope="col" class="px-6 py-3">操作</th>
           </tr>
         </thead>
         <tbody>
           <tr v-for="role in roles" :key="role.id" class="bg-white border-b border-gray-200 hover:bg-gray-50">
-            <td class="w-4 p-2 sm:p-4 hidden sm:table-cell">
+            <td class="w-4 p-4">
               <div class="flex items-center">
                 <input :id="'checkbox-table-search-' + role.id" type="checkbox" disabled
                   class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 focus:ring-2">
                 <label :for="'checkbox-table-search-' + role.id" class="sr-only">checkbox</label>
               </div>
             </td>
-            <td scope="row" class="px-3 py-2 sm:px-6 sm:py-4 font-medium text-gray-900 whitespace-nowrap">
+            <td scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
               {{ role.name }}
             </td>
-            <td
-              class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis hidden md:table-cell">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
               {{ role.code }}</td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
               <div>
                 <button
-                  class="flex items-center justify-center min-w-min text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5 whitespace-nowrap"
+                  class="flex items-center justify-center min-w-min text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-4 py-2.5 whitespace-nowrap"
                   @click="handleBindPermissionClick(role)" type="button">
                   <span>分配权限</span>
                 </button>
               </div>
             </td>
-            <td class="px-3 py-2 sm:px-6 sm:py-4 max-w-xs sm:max-w-sm overflow-hidden text-ellipsis">
-              <div class="flex flex-col sm:flex-row items-start sm:items-center gap-y-2 sm:gap-y-0 sm:gap-x-2">
+            <td class="px-6 py-4 max-w-sm overflow-hidden text-ellipsis">
+              <div class="flex items-center gap-x-2">
                 <button @click="handleUpsertRoleClick(role)"
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 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-4 py-2.5"
                   type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
                     <path fill-rule="evenodd"
                       d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
@@ -90,10 +137,9 @@
                   <span>编辑</span>
                 </button>
                 <button
-                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-xs sm:text-sm px-3 py-1.5 sm:px-4 sm:py-2.5"
+                  class="flex items-center justify-center whitespace-nowrap gap-x-1 bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-red-300 text-white focus:ring-4 font-medium rounded-lg text-sm px-4 py-2.5"
                   @click="handleDeleteRoleClick(role)" type="button">
-                  <svg class="w-3 h-3 sm:w-4 sm:h-4" fill="currentColor" viewBox="0 0 20 20"
-                    xmlns="http://www.w3.org/2000/svg">
+                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd"
                       d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
                       clip-rule="evenodd"></path>
@@ -121,6 +167,7 @@
 <script setup lang="ts">
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Button from "@/components/Button.vue";
+import MobileCardList from "@/components/MobileCardList.vue";
 import RoleDeleteModal from "@/components/PopupModal.vue";
 import RoleUpsertModal from "@/components/RoleUpsertModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
diff --git a/frontend/src/views/SchedulerView.vue b/frontend/src/views/SchedulerView.vue
index f7ed303..c496746 100644
--- a/frontend/src/views/SchedulerView.vue
+++ b/frontend/src/views/SchedulerView.vue
@@ -25,7 +25,67 @@
       </form>
     </div>
 
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+    <!-- 移动端卡片布局 -->
+    <div class="md:hidden">
+      <MobileCardList :items="jobs as Array<components['schemas']['JobTriggerDto']>">
+        <template #title="{ item }">
+          {{ `${item.name}:${item.group}` }}
+        </template>
+        <template #status="{ item }">
+          <div class="flex items-center">
+            <div class="h-2.5 w-2.5 rounded-full me-2"
+              :class="item.triggerState === 'NORMAL' ? 'bg-green-500' : item.triggerState === 'PAUSED' ? 'bg-red-500' : 'bg-yellow-500'">
+            </div>
+            <span class="text-sm">{{ item.triggerState }}</span>
+          </div>
+        </template>
+        <template #content="{ item }">
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <p class="text-xs font-medium text-gray-600">类型</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.schedulerType }}</p>
+            </div>
+            <div v-if="item.schedulerType === 'CRON'">
+              <p class="text-xs font-medium text-gray-600">Cron表达式</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.cronExpression }}</p>
+            </div>
+            <div class="col-span-2">
+              <p class="text-xs font-medium text-gray-600">下次执行</p>
+              <p class="text-sm text-gray-900 mt-0.5">{{ item.nextFireTime ? dayjs(item.nextFireTime).format("llll") :
+                '无' }}</p>
+            </div>
+          </div>
+        </template>
+        <template #actions="{ item }">
+          <div class="flex gap-x-2">
+            <button @click="handleCronUpdateClick(item)" :disabled="item.schedulerType !== 'CRON'"
+              :class="['flex items-center justify-center gap-x-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5' , { 'opacity-50 cursor-not-allowed': item.schedulerType !== 'CRON' }]"
+              type="button">
+              <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                <path fill-rule="evenodd"
+                  d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                  clip-rule="evenodd"></path>
+              </svg>
+              <span>编辑</span>
+            </button>
+            <button
+              class="text-white bg-green-700 hover:bg-green-800 focus:ring-green-300 focus:ring-4 focus:outline-none font-medium rounded-lg text-xs px-3 py-1.5"
+              @click="handleResumeJobClick(item)" type="button">
+              <span>恢复</span>
+            </button>
+            <button
+              class="bg-red-700 hover:bg-red-800 focus:ring-red-300 text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-xs px-3 py-1.5"
+              @click="handlePauseJobClick(item)" type="button">
+              <span>暂停</span>
+            </button>
+          </div>
+        </template>
+      </MobileCardList>
+    </div>
+
+    <!-- PC端表格布局 -->
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg hidden md:block">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500">
         <thead class="text-xs text-gray-700 uppercase bg-gray-50">
           <tr>
@@ -148,6 +208,7 @@
 
 <script setup lang="ts">
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
+import MobileCardList from "@/components/MobileCardList.vue";
 import PopupModal from "@/components/PopupModal.vue";
 import SchedulerUpdateModal from "@/components/SchedulerUpdateModal.vue";
 import TablePagination from "@/components/TablePagination.vue";
@@ -155,6 +216,7 @@ import { useJobControl } from "@/composables/job/useJobControl";
 import { useJobsPaginationQuery } from "@/composables/job/useJobQuery";
 import { useJobUpdate } from "@/composables/job/useJobUpdate";
 import useAlertStore from "@/composables/store/useAlertStore";
+import { useMobileStyles } from "@/composables/useMobileStyles";
 import dayjs from "@/utils/dateUtil";
 import { Modal, type ModalInterface, initFlowbite } from "flowbite";
 import { nextTick, onMounted, ref } from "vue";