✨ 整合文件选择工具栏

src/components/common/DataTable.vue

@@ -2,10 +2,16 @@
   <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]']">
+    <div
+      class="border-b px-6 py-4"
+      :class="[isDarkMode ? 'border-gray-700/80' : 'border-[#d9e4e6]']"
+    >
       <h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
         {{ title }}
       </h3>
+      <div v-if="slots.toolbar" class="mt-4">
+        <slot name="toolbar"></slot>
+      </div>
     </div>
     <div class="overflow-x-auto">
       <table
@@ -14,9 +20,12 @@
       >
         <thead>
           <tr>
-            <th v-for="header in headers" :key="header"
+            <th
+              v-for="header in headers"
+              :key="header"
               class="px-6 py-3.5 text-left text-xs font-medium uppercase tracking-wider"
-              :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
+              :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
+            >
               {{ header }}
             </th>
           </tr>
@@ -34,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, useSlots } from 'vue'
 
 interface Props {
   title: string
@@ -43,5 +52,6 @@ interface Props {
 
 defineProps<Props>()
 
+const slots = useSlots()
 const isDarkMode = inject('isDarkMode')
 </script>