perf(style): use skill

app/globals.css

@@ -25,3 +25,12 @@ body {
 :-webkit-full-screen::backdrop {
   background: var(--mantine-color-body);
 }
+
+.mantine-datatable-page-size-selector-active {
+  background: var(--mantine-primary-color-filled) !important;
+  color: var(--mantine-color-white) !important;
+}
+
+.mantine-datatable-page-size-selector-active .mantine-Text-root {
+  color: inherit !important;
+}

app/layout.tsx

@@ -19,9 +19,19 @@ import { ModalsProvider } from "@mantine/modals"
 import { Notifications } from "@mantine/notifications"
 import { Suspense } from "react"
 import "./globals.css"
+import settingClasses from "@/components/setting/PageSurface.module.css"
 import { theme } from "./theme"
 
 const GLOBAL_NOTICE_Z_INDEX = 4000
+const sharedModalProps = {
+  centered: true,
+  classNames: {
+    content: settingClasses.modalContent,
+    header: settingClasses.modalHeader,
+    title: settingClasses.modalTitle,
+    body: settingClasses.modalBody,
+  },
+}
 
 export default function RootLayout({
   children,
@@ -61,7 +71,7 @@ export default function RootLayout({
           <Notifications zIndex={GLOBAL_NOTICE_Z_INDEX} withinPortal />
           <InfoCheck />
           <OptStore />
-          <ModalsProvider>
+          <ModalsProvider modalProps={sharedModalProps}>
             <Suspense fallback={<></>}>{children}</Suspense>
           </ModalsProvider>
         </MantineProvider>

app/person/report/page.module.css

@@ -96,7 +96,7 @@
   padding: 0;
   background: transparent;
   color: #1874ff;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 20px;
   cursor: pointer;
   transition:

app/theme.ts

@@ -1,5 +1,5 @@
 // theme.ts
-import { Button, createTheme, MantineColorsTuple } from "@mantine/core"
+import { Button, Menu, createTheme, MantineColorsTuple } from "@mantine/core"
 
 /* --------  1. 自定义颜色（可删/可改） -------- */
 const brandColors: MantineColorsTuple = [
@@ -151,5 +151,34 @@ export const theme = createTheme({
         }
       },
     }),
+    Menu: Menu.extend({
+      defaultProps: {
+        radius: "sm",
+        shadow: "sm",
+      },
+      styles() {
+        return {
+          dropdown: {
+            border: "1px solid #E5E6EB",
+            borderRadius: "4px",
+            background: "#FFFFFF",
+            boxShadow: "0 8px 20px rgba(15, 23, 42, 0.08)",
+            padding: "4px",
+          },
+          item: {
+            minHeight: "28px",
+            borderRadius: "4px",
+            padding: "4px 8px",
+            fontSize: "12px",
+            lineHeight: "20px",
+            color: "#4E5969",
+          },
+          arrow: {
+            borderColor: "#E5E6EB",
+            background: "#FFFFFF",
+          },
+        }
+      },
+    }),
   },
 })