feat: 完成整体内容开发

app/components/Table/TableCom.vue

@@ -3,21 +3,22 @@
 import { PlayIcon } from "@heroicons/vue/24/solid";
 
 import { ChevronUpDownIcon } from "@/assets/Icons";
-import { cn } from "@/lib/utils";
-import { useSortableTable } from "@/utils";
-
-import type { TableColumn, TableProps } from "./type";
-
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   Table,
   TableBody,
   TableCell,
+  TableEmpty,
   TableFooter,
   TableHead,
   TableHeader,
-  TableEmpty,
   TableRow
 } from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+import { useSortableTable } from "@/utils";
+
+import NewTablePagination from "./NewTablePagination.vue";
+import type { TableColumn, TableProps } from "./type";
 
 const props = defineProps<TableProps<T>>();
 
@@ -271,12 +272,12 @@ onMounted(() => {
     :class="[
       cn(
         'before:absolute before:top-0 before:bottom-0 before:left-0 before:w-2',
-        'before:bg-linear-to-r before:from-blue-600/5 before:to-transparent',
+        'before:bg-linear-to-r before:from-border before:to-transparent',
         'before:pointer-events-none before:z-10 before:transition-opacity',
         'before:shadow-[inset_5px_0_4px_-3px_rgba(37,99,235,0.05)]',
 
         'after:absolute after:top-0 after:bottom-0 after:right-0 after:w-2',
-        'after:bg-linear-to-l after:from-blue-600/5 after:to-transparent',
+        'after:bg-linear-to-l after:from-border after:to-transparent',
         'after:pointer-events-none after:z-10 after:transition-opacity',
         'after:shadow-[inset_-5px_0_4px_-3px_rgba(37,99,235,0.05)]',
         {
@@ -294,13 +295,13 @@ onMounted(() => {
       ref="tableEl"
       :class="[
         cn(
-          'relative bg-[#FCFDFF] text-xs 2xl:text-sm rounded-lg overflow-hidden',
+          'relative bg-card text-xs 2xl:text-sm rounded-2xl overflow-hidden',
           props.class
         )
       ]"
     >
-      <TableHeader class="bg-[#F2F9FE] select-none">
-        <TableRow class="text-[#181818] font-medium">
+      <TableHeader class="bg-muted select-none">
+        <TableRow class="text-foreground font-medium">
           <TableHead
             v-for="(column, index) in visibleColumns"
             :key="getColumnKey(column, index)"
@@ -352,12 +353,12 @@ onMounted(() => {
               <!-- 排序指示器 icon -->
               <span v-if="column.sortable" class="flex items-center ml-2">
                 <ChevronUpDownIcon
-                  class="h-6! w-6! [&>.svg-top]:text-[#71717A4D] [&>.svg-bottom]:text-[#71717A4D]"
+                  class="h-6! w-6! [&>.svg-top]:text-muted-foreground/40 [&>.svg-bottom]:text-muted-foreground/40"
                   :class="{
-                    '[&>.svg-top]:text-[#2563EB]! [&>.svg-bottom]:text-[#71717A4D]!':
+                    '[&>.svg-top]:text-primary! [&>.svg-bottom]:text-muted-foreground/40!':
                       sortColumn === getColumnKey(column) &&
                       sortDirection === 'asc',
-                    '[&>.svg-bottom]:text-[#2563EB]! [&>.svg-top]:text-[#71717A4D]!':
+                    '[&>.svg-bottom]:text-primary! [&>.svg-top]:text-muted-foreground/40!':
                       sortColumn === getColumnKey(column) &&
                       sortDirection === 'desc'
                   }"
@@ -368,13 +369,13 @@ onMounted(() => {
         </TableRow>
       </TableHeader>
 
-      <TableBody class="[&_tr:last-child]:border-0! text-[#71717A]">
+      <TableBody class="[&_tr:last-child]:border-0! text-muted-foreground">
         <template
           v-for="(row, rowIndex) in finalData"
           :key="row.id || rowIndex"
         >
           <TableRow
-            class="relative group border-[#0088FE1a] hover:bg-[#ECF2FF] text-inherit"
+            class="relative group border-border hover:bg-muted/50 text-inherit"
             :class="{
               'cursor-pointer':
                 rowAppendExpandable && hasRowAppend(row as T, rowIndex)
@@ -421,7 +422,7 @@ onMounted(() => {
                   class="flex items-center justify-center transition-transform duration-250"
                   :class="{ 'rotate-90': isRowExpanded(row as T, rowIndex) }"
                 >
-                  <PlayIcon class="size-2.5! text-blue-[71717a]" />
+                  <PlayIcon class="size-2.5! text-muted-foreground" />
                 </span>
 
                 <slot
@@ -454,7 +455,7 @@ onMounted(() => {
               ) &&
               (rowAppendVisible?.(row as T, rowIndex) ?? true)
             "
-            class="border-[#0088FE1a] overflow-hidden bg-muted! hover:bg-gray-200/50! transition-colors duration-200"
+            class="border-border overflow-hidden bg-muted! hover:bg-muted/70! transition-colors duration-200"
             :class="{
               'visible [&>td>div]:max-h-0 [&>td>div]:opacity-0 border-transparent ':
                 !isRowExpanded(row as T, rowIndex)
@@ -526,7 +527,7 @@ onMounted(() => {
 
       <!-- 加载状态 -->
       <template v-if="props.load && displayData.length !== 0">
-        <div class="absolute inset-0 bg-white/40 z-10" />
+        <div class="absolute inset-0 bg-background/40 z-10" />
       </template>
 
       <TableFooter :colspan="visibleColumns?.length">