优化用户列表和卡片样式，提升响应式布局和用户体验

src/layouts/components/Footer.vue

@@ -29,7 +29,7 @@ const currentPath = computed(() => route.path)
 </script>
 
 <template>
-  <div v-if="appMode" class="w-100">
+  <div class="w-100">
     <VBottomNavigation
       grow
       horizontal

src/plugins/vuetify/defaults.ts

@@ -30,13 +30,20 @@ export default {
     color: 'primary',
   },
   VCard: {
-    elevation: 1,
+    elevation: 0,
+  },
+  VMenu: {
+    elevation: 0,
   },
   VChip: {
     elevation: 0,
   },
+  VBottomSheet: {
+    elevation: 0,
+  },
   VList: {
     color: 'primary',
+    elevation: 1,
   },
   VPagination: {
     activeColor: 'primary',

src/styles/styles.scss

@@ -218,10 +218,35 @@ html.v-overlay-scroll-blocked body {
 }
 
 .grid-user-card {
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   padding-block-end: 1rem;
 }
 
+@media (max-width: 600px) {
+  .user-list-container {
+    padding: 12px;
+  }
+
+  .grid-user-card {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 960px) {
+  .grid-user-card{
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1rem;
+  }
+}
+
+@media (min-width: 961px) {
+  .grid-user-card {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+}
+
 .grid-app-card {
   grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
   padding-block-end: 1rem;
@@ -269,3 +294,35 @@ html.v-overlay-scroll-blocked body {
   content: '';
   inset: 0;
 }
+
+
+.card-list-container {
+  padding: 20px;
+  margin: 0 auto;
+}
+
+@media (max-width: 600px) {
+  .card-list-container {
+    padding: 12px;
+  }
+}
+
+.page-content-header {
+  margin-bottom: 24px;
+}
+
+.page-content-header-title {
+  display: flex;
+  align-items: center;
+}
+
+.page-content-header-title-icon {
+  margin-right: 12px;
+}
+
+.page-content-header-title-text {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: rgba(var(--v-theme-on-surface), 0.87);
+  margin: 0;
+}

src/views/site/SiteCardListView.vue

@@ -87,8 +87,15 @@ onActivated(() => {
 </script>
 
 <template>
-  <LoadingBanner v-if="!isRefreshed" class="mt-12" />
+  <div class="card-list-container">
-  <div>
+    <!-- 页面标题 -->
+    <div class="page-content-header">
+      <div class="page-content-header-title">
+        <VIcon icon="mdi-web" size="large" color="primary" class="page-content-header-title-icon" />
+        <h1 class="page-content-header-title-text">站点管理</h1>
+      </div>
+    </div>
+    <LoadingBanner v-if="!isRefreshed" class="mt-12" />
     <draggable
       v-if="siteList.length > 0"
       v-model="siteList"

src/views/user/UserListView.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
 import api from '@/api'
 import type { User } from '@/api/types'
-import { useDisplay } from 'vuetify'
 import NoDataFound from '@/components/NoDataFound.vue'
 import UserCard from '@/components/cards/UserCard.vue'
 import UserAddEditDialog from '@/components/dialog/UserAddEditDialog.vue'
 
-// APP
-const display = useDisplay()
-const appMode = inject('pwaMode') && display.mdAndDown.value
-const isMobile = computed(() => display.mobile.value)
-
 // 是否刷新过
 const isRefreshed = ref(false)
 
@@ -20,9 +14,6 @@ const loading = ref(false)
 // 新增用户窗口
 const addUserDialog = ref(false)
 
-// 要编辑的用户
-const userToEdit = ref<User | null>(null)
-
 // 所有用户信息
 const allUsers = ref<User[]>([])
 
@@ -63,20 +54,20 @@ onActivated(() => {
 </script>
 
 <template>
-  <div class="user-list-container">
+  <div class="card-list-container">
     <!-- 页面标题 -->
-    <div class="page-header">
+    <div class="page-content-header">
-      <div class="page-title">
+      <div class="page-content-header-title">
-        <VIcon icon="mdi-account-group" size="large" color="primary" class="title-icon" />
+        <VIcon icon="mdi-account-group" size="large" color="primary" class="page-content-header-title-icon" />
-        <h1 class="title-text">用户管理</h1>
+        <h1 class="page-content-header-title-text">用户管理</h1>
       </div>
     </div>
-    
+
     <!-- 加载中提示 -->
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
-    
+
     <!-- 用户卡片网格 -->
-    <div v-if="allUsers.length > 0 && isRefreshed" class="users-grid">
+    <div v-if="allUsers.length > 0 && isRefreshed" class="grid gap-3 grid-user-card">
       <!-- 普通用户卡片 -->
       <UserCard
         v-for="user in allUsers"
@@ -86,31 +77,27 @@ onActivated(() => {
         @remove="loadAllUsers"
         @save="loadAllUsers"
       />
-      
+
       <!-- 添加用户卡片 -->
-      <div class="add-user-card" @click="openAddUserDialog">
+      <VCard class="add-user-card" @click="openAddUserDialog">
         <div class="add-user-content">
           <VIcon icon="mdi-account-plus" size="large" color="primary" />
           <span class="add-user-text">添加用户</span>
         </div>
-      </div>
+      </VCard>
     </div>
-    
+
     <!-- 无数据提示 -->
     <div v-if="allUsers.length === 0 && isRefreshed">
-      <NoDataFound
+      <NoDataFound error-code="404" error-title="没有用户" error-description="点击添加用户卡片添加用户" />
-        error-code="404"
-        error-title="没有用户"
-        error-description="点击添加用户卡片添加用户"
-      />
     </div>
-    
+
     <!-- 用户添加弹窗 -->
     <UserAddEditDialog
       v-if="addUserDialog"
       v-model="addUserDialog"
       oper="add"
-      max-width="50rem"
+      max-width="45rem"
       persistent
       z-index="1010"
       @save="onUserAdd"
@@ -120,40 +107,7 @@ onActivated(() => {
 </template>
 
 <style scoped>
-.user-list-container {
-  padding: 20px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.page-header {
-  margin-bottom: 24px;
-}
-
-.page-title {
-  display: flex;
-  align-items: center;
-}
-
-.title-icon {
-  margin-right: 12px;
-}
-
-.title-text {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: rgba(var(--v-theme-on-surface), 0.87);
-  margin: 0;
-}
-
-.users-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 20px;
-}
-
 .add-user-card {
-  border-radius: 16px;
   height: 100%;
   min-height: 160px;
   background-color: rgba(var(--v-theme-surface), 1);
@@ -163,20 +117,18 @@ onActivated(() => {
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(var(--v-theme-on-surface), 0.05);
 }
 
 .add-user-card:hover {
   background-color: rgba(var(--v-theme-primary), 0.05);
-  transform: translateY(-5px);
+  transform: translateY(-4px);
-  box-shadow: 0 8px 20px rgba(var(--v-theme-on-surface), 0.1);
 }
 
 .add-user-content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
+  gap: 0.75rem;
 }
 
 .add-user-text {
@@ -184,30 +136,4 @@ onActivated(() => {
   color: rgba(var(--v-theme-primary), 0.8);
   font-weight: 500;
 }
-
-/* 响应式调整 */
-@media (max-width: 600px) {
-  .user-list-container {
-    padding: 12px;
-  }
-  
-  .users-grid {
-    grid-template-columns: 1fr;
-    gap: 16px;
-  }
-}
-
-@media (min-width: 601px) and (max-width: 960px) {
-  .users-grid {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 16px;
-  }
-}
-
-@media (min-width: 961px) {
-  .users-grid {
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 24px;
-  }
-}
 </style>

src/views/workflow/WorkflowListView.vue

@@ -45,7 +45,14 @@ onActivated(() => {
 </script>
 
 <template>
-  <div>
+  <div class="card-list-container">
+    <!-- 页面标题 -->
+    <div class="page-content-header">
+      <div class="page-content-header-title">
+        <VIcon icon="mdi-state-machine" size="large" color="primary" class="page-content-header-title-icon" />
+        <h1 class="page-content-header-title-text">工作流</h1>
+      </div>
+    </div>
     <LoadingBanner v-if="!isRefreshed" class="mt-12" />
     <VRow v-if="workflowList.length > 0" class="match-height">
       <VCol cols="12" md="6" lg="4" v-for="item in workflowList" :key="item.id">