feat(workload): add workload list

components/setting/PageSurface.tsx

@@ -9,18 +9,36 @@ import {
   type PaperProps,
   type StackProps,
 } from "@mantine/core"
-import type { PropsWithChildren, ReactNode } from "react"
 import {
   DataTable,
   type DataTableDefaultColumnProps,
   type DataTableProps,
 } from "mantine-datatable"
+import type { CSSProperties, PropsWithChildren, ReactNode } from "react"
 import classes from "./PageSurface.module.css"
 
 function mergeClassName(...classNames: Array<string | undefined>) {
   return classNames.filter(Boolean).join(" ")
 }
 
+export const settingModalClassNames = {
+  content: classes.modalContent,
+  header: classes.modalHeader,
+  title: classes.modalTitle,
+  body: classes.modalBody,
+}
+
+export const settingModalFormClassName = classes.modalForm
+export const settingModalActionsClassName = classes.modalActions
+export const settingModalMetaTextClassName = classes.modalMetaText
+export const settingSurfaceClassNames = classes
+
+type SettingTableViewportProps = PropsWithChildren<{
+  maxHeight: number | string
+  className?: string
+  style?: CSSProperties
+}>
+
 export function SettingPage({
   className,
   ...props
@@ -57,6 +75,21 @@ export function SettingPanel({
   )
 }
 
+export function SettingTableViewport({
+  maxHeight,
+  className,
+  style,
+  children,
+}: SettingTableViewportProps) {
+  return (
+    <div
+      style={{ maxHeight, ...style }}
+      className={mergeClassName(classes.tableViewport, className)}>
+      {children}
+    </div>
+  )
+}
+
 export function SettingFilterPanel({
   className,
   ...props
@@ -183,6 +216,56 @@ export function SettingFilterActions({
   )
 }
 
+export function SettingFilterStack({
+  className,
+  gap = 12,
+  ...props
+}: PropsWithChildren<StackProps>) {
+  return (
+    <Stack
+      gap={gap}
+      className={mergeClassName(classes.filterStack, className)}
+      {...props}
+    />
+  )
+}
+
+type SettingInlineFilterFieldProps = {
+  label: ReactNode
+  children: ReactNode
+  className?: string
+  labelClassName?: string
+  controlClassName?: string
+  labelWidth?: number | string
+}
+
+export function SettingInlineFilterField({
+  label,
+  children,
+  className,
+  labelClassName,
+  controlClassName,
+  labelWidth = 80,
+}: SettingInlineFilterFieldProps) {
+  const style = {
+    "--setting-inline-filter-label-width":
+      typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth,
+  } as CSSProperties
+
+  return (
+    <div
+      style={style}
+      className={mergeClassName(classes.filterField, className)}>
+      <Text className={mergeClassName(classes.filterLabel, labelClassName)}>
+        {label}
+      </Text>
+      <div className={mergeClassName(classes.filterControl, controlClassName)}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
 const settingDataTableStyles = {
   header: {
     backgroundColor: "#F7F8FA",
@@ -192,7 +275,6 @@ const settingDataTableStyles = {
     fontWeight: 500,
   },
   root: {
-    height: "100%",
     maxWidth: "100%",
     minWidth: 0,
     fontSize: "14px",
@@ -238,12 +320,15 @@ export function SettingDataTable<T = Record<string, unknown>>(
     loadingText,
     noRecordsText,
     minHeight,
+    maxHeight,
+    height,
     page,
     onPageChange,
     totalRecords,
     recordsPerPage,
     recordsPerPageLabel,
     paginationText,
+    scrollAreaProps,
     ...rest
   } = props
 
@@ -268,7 +353,7 @@ export function SettingDataTable<T = Record<string, unknown>>(
               from: number
               to: number
               totalRecords: number
-            }) => `${from}-${to} / ${totalRecords}`),
+            }) => `显示 ${from}-${to} 条，共 ${totalRecords} 条记录`),
         }
       : {}
 
@@ -283,6 +368,12 @@ export function SettingDataTable<T = Record<string, unknown>>(
     loaderBackgroundBlur: loaderBackgroundBlur ?? 0,
     noRecordsText: noRecordsText ?? "暂无数据",
     minHeight: minHeight ?? 360,
+    maxHeight,
+    height: height ?? (maxHeight !== undefined ? "auto" : undefined),
+    scrollAreaProps: {
+      type: "auto",
+      ...scrollAreaProps,
+    },
     styles: styles
       ? { ...settingDataTableStyles, ...styles }
       : settingDataTableStyles,
@@ -296,16 +387,23 @@ export function SettingDataTable<T = Record<string, unknown>>(
 export const settingTabsStyles = {
   list: {
     padding: 4,
-    backgroundColor: "#F8F9FB",
-    border: "1px solid #EEF2F6",
-    borderRadius: 10,
+    backgroundColor: "#F7F8FA",
+    border: "1px solid #E5E6EB",
+    borderRadius: 4,
     gap: 8,
   },
   tab: {
-    minHeight: 36,
-    borderRadius: 8,
-    color: "#56606A",
-    fontWeight: 600,
+    minHeight: 32,
+    borderRadius: 4,
+    padding: "0 12px",
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: "20px",
+  },
+  tabLabel: {
+    color: "inherit",
+    fontSize: 14,
+    lineHeight: "20px",
   },
   panel: {
     flex: 1,
@@ -318,5 +416,6 @@ export const settingTabsStyles = {
 export const settingTabsClassNames = {
   list: classes.settingTabsList,
   tab: classes.settingTabsTab,
+  tabLabel: classes.settingTabsTabLabel,
   panel: classes.settingTabsPanel,
 } as const