💎 优化所有文件卡片样式

src/components/common/BaseButton.vue

@@ -3,7 +3,7 @@
     :type="type"
     :disabled="disabled || loading"
     @click="$emit('click', $event)"
-    class="inline-flex items-center justify-center px-4 py-2 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+    class="inline-flex items-center justify-center rounded-[30px] px-4 py-2 font-medium shadow-sm transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-sm"
     :class="[
       sizeClasses,
       variantClasses,

src/components/common/DataTable.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="rounded-lg shadow-sm overflow-hidden transition-all duration-300"
-    :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
-    <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
+  <div
+    class="data-table-2026 theme-2026-card theme-2026-card-hover overflow-hidden rounded-[30px] shadow-md transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+  >
+    <div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700/80' : 'border-[#d9e4e6]']">
       <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
         {{ title }}
       </h3>
     </div>
-    <div class="overflow-x-auto">
-      <table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
-        <thead :class="[isDarkMode ? 'bg-gray-900/50' : 'bg-gray-50']">
+    <div class="overflow-x-auto px-3 pb-3">
+      <table class="min-w-full border-separate border-spacing-y-3">
+        <thead>
           <tr>
             <th v-for="header in headers" :key="header"
               class="px-6 py-3.5 text-left text-xs font-medium uppercase tracking-wider"
@@ -17,11 +18,7 @@
             </th>
           </tr>
         </thead>
-        <tbody :class="[
-          isDarkMode
-            ? 'bg-gray-800/50 divide-y divide-gray-700'
-            : 'bg-white divide-y divide-gray-200'
-        ]">
+        <tbody>
           <slot name="body"></slot>
         </tbody>
       </table>
@@ -41,4 +38,4 @@ interface Props {
 defineProps<Props>()
 
 const isDarkMode = inject('isDarkMode')
-</script>
+</script>