perf(style): codex-skills/cowa-admin-list-ui

components/setting/PageSurface.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import {
-  Badge,
   Group,
   Paper,
   Stack,
@@ -29,7 +28,7 @@ export function SettingPage({
   return (
     <Stack
       w="100%"
-      h="calc(100vh - 56px)"
+      h="calc(100vh - 60px)"
       p="md"
       gap="md"
       className={mergeClassName(classes.page, className)}
@@ -41,9 +40,9 @@ export function SettingPage({
 export function SettingPanel({
   className,
   withBorder = true,
-  radius = "lg",
+  radius = "sm",
   p = "md",
-  shadow = "xs",
+  shadow,
   ...props
 }: PropsWithChildren<PaperProps>) {
   return (
@@ -140,11 +139,9 @@ export function SettingListHeader({
       gap="sm"
       className={mergeClassName(classes.listHeader, className)}>
       <Group gap="xs">
-        <Text fw={700}>{title}</Text>
+        <Text className={classes.listHeaderTitle}>{title}</Text>
         {count !== undefined ? (
-          <Badge variant="light" color="gray">
-            {count}
-          </Badge>
+          <Text className={classes.listHeaderCount}>{count}</Text>
         ) : null}
       </Group>
       {actions}
@@ -188,25 +185,33 @@ export function SettingFilterActions({
 
 const settingDataTableStyles = {
   header: {
-    backgroundColor: "#F8F9FB",
-    borderBottom: "1px solid #EEF2F6",
-    color: "#56606A",
+    backgroundColor: "#F7F8FA",
+    borderBottom: "1px solid #E5E6EB",
+    color: "#4E5969",
     fontSize: "14px",
+    fontWeight: 500,
   },
   root: {
     height: "100%",
     maxWidth: "100%",
     minWidth: 0,
     fontSize: "14px",
-    color: "#31373D",
-    borderBottom: "1px solid #E8EDF3",
-    borderRadius: 10,
+    color: "#1D2129",
+    borderBottom: "1px solid #E5E6EB",
+    borderRadius: 4,
     overflow: "hidden",
     boxSizing: "border-box",
     backgroundColor: "#FFFFFF",
   },
+  table: {
+    backgroundColor: "#FFFFFF",
+  },
+  footer: {
+    backgroundColor: "#FFFFFF",
+  },
   pagination: {
-    padding: "14px 16px 18px",
+    padding: "12px 16px",
+    borderTop: "1px solid #E5E6EB",
   },
 } as const
 
@@ -215,7 +220,7 @@ const settingDataTableDefaultColumnProps: DataTableDefaultColumnProps<
 > = {
   titleStyle: {
     whiteSpace: "nowrap",
-    fontWeight: 600,
+    fontWeight: 500,
   },
 }
 
@@ -270,12 +275,12 @@ export function SettingDataTable<T = Record<string, unknown>>(
   const tableProps = {
     withTableBorder: withTableBorder ?? true,
     withRowBorders: withRowBorders ?? true,
-    striped: striped ?? true,
-    highlightOnHover: highlightOnHover ?? true,
+    striped: striped ?? false,
+    highlightOnHover: highlightOnHover ?? false,
     defaultColumnProps:
       defaultColumnProps ??
       (settingDataTableDefaultColumnProps as DataTableDefaultColumnProps<T>),
-    loaderBackgroundBlur: loaderBackgroundBlur ?? 1,
+    loaderBackgroundBlur: loaderBackgroundBlur ?? 0,
     noRecordsText: noRecordsText ?? "暂无数据",
     minHeight: minHeight ?? 360,
     styles: styles
@@ -301,11 +306,6 @@ export const settingTabsStyles = {
     borderRadius: 8,
     color: "#56606A",
     fontWeight: 600,
-    "&[data-active]": {
-      backgroundColor: "#FFFFFF",
-      color: "#1F2329",
-      boxShadow: "0 6px 18px rgba(15, 23, 42, 0.08)",
-    },
   },
   panel: {
     flex: 1,
@@ -314,3 +314,9 @@ export const settingTabsStyles = {
     paddingTop: 16,
   },
 } as const
+
+export const settingTabsClassNames = {
+  list: classes.settingTabsList,
+  tab: classes.settingTabsTab,
+  panel: classes.settingTabsPanel,
+} as const