feat: 完成整体内容开发

app/components/Table/CellCompare.vue

@@ -71,7 +71,7 @@ watch(
   <div
     ref="cellRef"
     class="transition-colors duration-300"
-    :class="{ 'bg-[#ECF2FF] h-full w-full p-4 -my-4': hasChanged }"
+    :class="{ 'bg-muted h-full w-full p-4 -my-4': hasChanged }"
   >
     <slot />
   </div>

app/components/Table/NewTablePagination.vue

@@ -2,6 +2,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/24/outline";
 import { MoreHorizontal } from "lucide-vue-next";
 
+import { Button } from "@/components/ui/button";
 import {
   Pagination,
   PaginationContent,
@@ -40,7 +41,7 @@ const pageCount = computed(() => Math.ceil(props.total / props.pageSize));
     @update:page="(val: number) => emits('update:page', val)"
   >
     <PaginationContent v-slot="{ items }">
-      <PaginationPrevious class="w-5.5 h-5.5 text-[#2563EB]!">
+      <PaginationPrevious class="w-5.5 h-5.5 text-primary!">
         <ChevronLeftIcon class="size-4" />
       </PaginationPrevious>
       <template v-for="(item, index) in items" :key="index">
@@ -48,27 +49,27 @@ const pageCount = computed(() => Math.ceil(props.total / props.pageSize));
           v-if="item.type === 'page'"
           :value="item.value"
           :is-active="item.value === page"
-          class="w-fit min-w-5.5 h-5.5 text-xs px-1 text-[#71717A]/80"
+          class="w-fit min-w-5.5 h-5.5 text-xs px-1 text-muted-foreground"
           :class="{
-            'text-[#2563EB]! border-[#2563EB]!': item.value === page
+            'text-primary! border-primary!': item.value === page
           }"
         >
           {{ item.value }}
         </PaginationItem>
         <PaginationEllipsis
           v-else-if="item.type === 'ellipsis'"
-          class="text-[#71717A]/80"
+          class="text-muted-foreground"
         >
           <Button
             variant="outline"
             :disabled="props.load"
-            class="w-5.5 h-5.5 p-0 text-[12px] text-[#71717A]/80 border-transparent bg-white rounded"
+            class="w-5.5 h-5.5 rounded-2xl border-transparent bg-background p-0 text-[12px] text-muted-foreground"
           >
             <MoreHorizontal class="size-4" />
           </Button>
         </PaginationEllipsis>
       </template>
-      <PaginationNext class="w-5.5 h-5.5 text-[#2563EB]!">
+      <PaginationNext class="w-5.5 h-5.5 text-primary!">
         <ChevronRightIcon class="size-4" />
       </PaginationNext>
     </PaginationContent>

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">