fix(management/project): task setting

app/management/project/detail/InfoSettingContainer.tsx

@@ -1,11 +1,31 @@
 "use client"
 
-import { projectConfig } from "@/components/label/api/project"
+import {
+  getProjectAdminList,
+  projectConfig,
+} from "@/components/label/api/project"
 import { ProjectDetail } from "@/components/label/api/project/typing"
 import { useAllUserStore } from "@/components/label/store/auth"
-import { Button, Group, Paper, Stack, Switch, Text } from "@mantine/core"
+import {
+  ActionIcon,
+  Collapse,
+  Group,
+  Paper,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Switch,
+  Text,
+} from "@mantine/core"
 import { notifications } from "@mantine/notifications"
-import { useMemo, useState } from "react"
+import {
+  IconCheck,
+  IconChevronDown,
+  IconChevronRight,
+  IconEdit,
+  IconX,
+} from "@tabler/icons-react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import AdminUserModal from "./components/AdminUserModal"
 import LabelSchemeContainer from "./components/LabelSchemeContainer"
 import NoteRulesTable from "./components/NoteRulesTable"
@@ -26,16 +46,55 @@ export default function InfoSettingContainer(props: {
   const projectId = info?.id ?? -1
 
   const { userOpts } = useAllUserStore()
-  const userOptions = useMemo(() => {
+  const fallbackUserOptions = useMemo(() => {
     return userOpts.map((o) => ({ label: o.label, value: String(o.value) }))
   }, [userOpts])
 
+  const [adminOptions, setAdminOptions] = useState<
+    Array<{ label: string; value: string }>
+  >([])
+
   const [adminModalOpen, setAdminModalOpen] = useState(false)
   const [lockingValue, setLockingValue] = useState<boolean>(
     !!info?.is_lock_object
   )
+  const [lockingEditValue, setLockingEditValue] = useState<boolean>(
+    !!info?.is_lock_object
+  )
+  const [isLockingEdit, setIsLockingEdit] = useState(false)
   const [savingLock, setSavingLock] = useState(false)
 
+  const [show, setShow] = useState({
+    process: true,
+    scheme: true,
+    sampling: true,
+    note: true,
+  })
+
+  useEffect(() => {
+    const v = !!info?.is_lock_object
+    setLockingValue(v)
+    setLockingEditValue(v)
+    setIsLockingEdit(false)
+  }, [info?.is_lock_object])
+
+  const loadAdminOptions = useCallback(async () => {
+    try {
+      const res = await getProjectAdminList()
+      const opts = (res ?? []).map((item) => ({
+        label: item.label,
+        value: String(item.value),
+      }))
+      setAdminOptions(opts)
+    } catch {
+      setAdminOptions([])
+    }
+  }, [])
+
+  useEffect(() => {
+    queueMicrotask(loadAdminOptions)
+  }, [loadAdminOptions])
+
   const adminText = useMemo(() => {
     const adminUids = info?.admin_user ?? []
     const names = adminUids.map((uid) => {
@@ -51,13 +110,15 @@ export default function InfoSettingContainer(props: {
     try {
       await projectConfig({
         project_id: projectId,
-        is_lock_object: lockingValue,
+        is_lock_object: lockingEditValue,
       })
       notifications.show({
         color: "green",
         title: "操作成功",
         message: "已保存配置",
       })
+      setLockingValue(lockingEditValue)
+      setIsLockingEdit(false)
       updateAction()
     } catch (e) {
       notifications.show({
@@ -70,9 +131,45 @@ export default function InfoSettingContainer(props: {
     }
   }
 
+  const sectionTitle = (
+    key: keyof typeof show,
+    title: string,
+    color: "blue" | "orange" | "teal" | "grape"
+  ) => {
+    const opened = show[key]
+    return (
+      <Group justify="space-between" wrap="nowrap">
+        <Group gap={8}>
+          <div
+            style={{
+              width: 3,
+              height: 14,
+              borderRadius: 2,
+              backgroundColor: `var(--mantine-color-${color}-6)`,
+            }}
+          />
+          <Text fw={700}>{title}</Text>
+        </Group>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          onClick={() => setShow((s) => ({ ...s, [key]: !opened }))}>
+          {opened ? (
+            <IconChevronDown size={16} />
+          ) : (
+            <IconChevronRight size={16} />
+          )}
+        </ActionIcon>
+      </Group>
+    )
+  }
+
+  const finalAdminOptions =
+    adminOptions.length > 0 ? adminOptions : fallbackUserOptions
+
   return (
     <>
-      <Stack gap="md" style={{ flex: 1, minHeight: 0 }}>
+      <Stack gap="md" style={{ flex: 1, minHeight: 0 }} w="100%">
         <Paper
           withBorder
           p="sm"
@@ -83,74 +180,170 @@ export default function InfoSettingContainer(props: {
           }}>
           <Stack gap="sm">
             <Group justify="space-between" wrap="wrap">
-              <Text fw={700}>基础配置</Text>
-              <Button size="xs" variant="default" onClick={updateAction}>
+              <Text fw={700}>项目配置</Text>
+              <ActionIcon variant="subtle" onClick={updateAction}>
+                <IconEdit size={16} />
+              </ActionIcon>
+            </Group>
+
+            <SimpleGrid cols={{ base: 1, md: 2 }} spacing="sm">
+              <Paper
+                withBorder
+                p="xs"
+                radius="sm"
+                style={{
+                  borderColor:
+                    "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+                }}>
+                <Group justify="space-between" wrap="nowrap" align="center">
+                  <Stack gap={2} style={{ minWidth: 0 }}>
+                    <Text size="sm" fw={600}>
+                      项目管理员
+                    </Text>
+                    <Text
+                      size="sm"
+                      c="dimmed"
+                      style={{
+                        maxWidth: 420,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                      }}>
+                      {adminText}
+                    </Text>
+                  </Stack>
+                  <ActionIcon
+                    variant="subtle"
+                    color="blue"
+                    onClick={() => {
+                      setAdminModalOpen(true)
+                      if (adminOptions.length === 0) {
+                        queueMicrotask(loadAdminOptions)
+                      }
+                    }}>
+                    <IconEdit size={16} />
+                  </ActionIcon>
+                </Group>
+              </Paper>
+
+              <Paper
+                withBorder
+                p="xs"
+                radius="sm"
+                style={{
+                  borderColor:
+                    "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+                }}>
+                <Group justify="space-between" wrap="nowrap" align="center">
+                  <Stack gap={2}>
+                    <Text size="sm" fw={600}>
+                      图片对象锁定
+                    </Text>
+                    <Text size="sm" c="dimmed">
+                      开启后对象可被锁定，避免多人同时标注冲突
+                    </Text>
+                  </Stack>
+                  {isLockingEdit ? (
+                    <Group gap={4} wrap="nowrap">
+                      <Switch
+                        checked={lockingEditValue}
+                        onChange={(e) =>
+                          setLockingEditValue(e.currentTarget.checked)
+                        }
+                      />
+                      <ActionIcon
+                        variant="subtle"
+                        color="gray"
+                        onClick={() => {
+                          setLockingEditValue(lockingValue)
+                          setIsLockingEdit(false)
+                        }}>
+                        <IconX size={16} />
+                      </ActionIcon>
+                      <ActionIcon
+                        variant="subtle"
+                        color="blue"
+                        loading={savingLock}
+                        onClick={saveLock}>
+                        <IconCheck size={16} />
+                      </ActionIcon>
+                    </Group>
+                  ) : (
+                    <Group gap={8} wrap="nowrap">
+                      <Switch checked={lockingValue} readOnly />
+                      <ActionIcon
+                        variant="subtle"
+                        color="blue"
+                        onClick={() => setIsLockingEdit(true)}>
+                        <IconEdit size={16} />
+                      </ActionIcon>
+                    </Group>
+                  )}
+                </Group>
+              </Paper>
+            </SimpleGrid>
+
+            <Group justify="flex-end">
+              <ActionIcon variant="subtle" onClick={updateAction}>
+                <IconCheck size={16} />
+              </ActionIcon>
+              <Text size="xs" c="dimmed">
                 刷新项目详情
-              </Button>
-            </Group>
-
-            <Group justify="space-between" wrap="wrap">
-              <Stack gap={2}>
-                <Text size="sm" fw={600}>
-                  项目管理员
-                </Text>
-                <Text size="sm" c="dimmed">
-                  {adminText}
-                </Text>
-              </Stack>
-              <Button
-                size="xs"
-                variant="default"
-                onClick={() => setAdminModalOpen(true)}>
-                编辑
-              </Button>
-            </Group>
-
-            <Group justify="space-between" wrap="wrap">
-              <Stack gap={2}>
-                <Text size="sm" fw={600}>
-                  图片对象锁定
-                </Text>
-                <Text size="sm" c="dimmed">
-                  开启后对象可被锁定，避免多人同时标注冲突
-                </Text>
-              </Stack>
-              <Group gap="sm">
-                <Switch
-                  checked={lockingValue}
-                  onChange={(e) => setLockingValue(e.currentTarget.checked)}
-                />
-                <Button size="xs" loading={savingLock} onClick={saveLock}>
-                  保存
-                </Button>
-              </Group>
+              </Text>
             </Group>
           </Stack>
         </Paper>
 
-        <TaskStageTabsContainer
-          projectId={projectId}
-          info={info}
-          userOptions={userOptions}
-          userEnums={userEnums}
-          onUpdatedAction={updateAction}
-        />
+        <Paper
+          withBorder
+          p="sm"
+          radius="md"
+          style={{
+            borderColor:
+              "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+            flex: 1,
+            minHeight: 0,
+          }}>
+          <ScrollArea h="100%" type="auto">
+            <Stack gap="sm">
+              {sectionTitle("process", "任务流程", "blue")}
+              <Collapse in={show.process}>
+                <TaskStageTabsContainer
+                  projectId={projectId}
+                  info={info}
+                  userOptions={fallbackUserOptions}
+                  userEnums={userEnums}
+                  onUpdatedAction={updateAction}
+                />
+              </Collapse>
 
-        <SamplingPlanContainer
-          projectId={projectId}
-          info={info}
-          onUpdated={updateAction}
-        />
+              {sectionTitle("scheme", "标注方案", "orange")}
+              <Collapse in={show.scheme}>
+                <LabelSchemeContainer info={info} />
+              </Collapse>
 
-        <LabelSchemeContainer info={info} />
+              {sectionTitle("sampling", "抽检方案", "teal")}
+              <Collapse in={show.sampling}>
+                <SamplingPlanContainer
+                  projectId={projectId}
+                  info={info}
+                  onUpdated={updateAction}
+                />
+              </Collapse>
 
-        <NoteRulesTable info={info} />
+              {sectionTitle("note", "批注规则", "grape")}
+              <Collapse in={show.note}>
+                <NoteRulesTable info={info} onUpdated={updateAction} />
+              </Collapse>
+            </Stack>
+          </ScrollArea>
+        </Paper>
       </Stack>
 
       <AdminUserModal
         opened={adminModalOpen}
         value={info?.admin_user ?? []}
-        options={userOptions}
+        options={finalAdminOptions}
         onCloseAction={async (next) => {
           setAdminModalOpen(false)
           if (!next || projectId === -1) return

app/management/project/detail/components/LabelSchemeContainer.tsx

@@ -1,97 +1,224 @@
 "use client"
 
 import { ProjectDetail } from "@/components/label/api/project/typing"
-import { Badge, Group, Paper, Stack, Text } from "@mantine/core"
+import {
+  labelTypeMap,
+  selectModeMap,
+  staticsColor,
+} from "@/components/label/utils/constants"
+import { Badge, Button, Group, Modal, Paper, Stack, Text } from "@mantine/core"
 import { DataTable, DataTableColumn } from "mantine-datatable"
-import { useMemo } from "react"
+import { useState } from "react"
+
+type DetailRow = ProjectDetail.SubAttributesDescribe
+
+function getColorIndex(color: number[] | undefined) {
+  if (!Array.isArray(color) || color.length < 3) return undefined
+  const key = color.slice(0, 3).join("_")
+  for (const item of staticsColor) {
+    const [colorKey, colorIndex] = Object.entries(item)[0] ?? []
+    if (colorKey === key && typeof colorIndex === "number") {
+      return colorIndex
+    }
+  }
+  return undefined
+}
 
 export default function LabelSchemeContainer(props: {
   info: ProjectDetail.DataProps | undefined
 }) {
   const schemas = props.info?.label_schema_list ?? []
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [detailRows, setDetailRows] = useState<DetailRow[]>([])
 
-  const columns = useMemo(() => {
-    const cols: DataTableColumn<ProjectDetail.LabelSchemaList>[] = [
-      { accessor: "category_id", title: "ID", width: 70 },
-      { accessor: "label_class", title: "类别", width: 140 },
-      {
-        accessor: "color",
-        title: "颜色",
-        width: 120,
-        render: (record) => {
-          const color = Array.isArray(record.color) ? record.color : []
-          const bg =
-            color.length >= 3
-              ? `rgb(${color[0]}, ${color[1]}, ${color[2]})`
-              : "rgba(0,0,0,0.15)"
+  const columns: DataTableColumn<ProjectDetail.LabelSchemaList>[] = [
+    {
+      accessor: "label_class",
+      title: "类别",
+      width: 120,
+    },
+    {
+      accessor: "super_category",
+      title: "属性",
+      width: 120,
+      render: (record) => record.super_category || "-",
+    },
+    {
+      accessor: "category_id",
+      title: "ID",
+      width: 90,
+    },
+    {
+      accessor: "label_type",
+      title: "标注方式",
+      width: 140,
+      render: (record) => (
+        <Badge variant="light">
+          {labelTypeMap.get(record.label_type) ??
+            String(record.label_type ?? "-")}
+        </Badge>
+      ),
+    },
+    {
+      accessor: "color",
+      title: "标签颜色",
+      width: 130,
+      render: (record) => {
+        const color = Array.isArray(record.color) ? record.color : []
+        const idx = getColorIndex(color)
+        if (color.length < 3) {
           return (
-            <Group gap={8} wrap="nowrap">
-              <div
-                style={{
-                  width: 14,
-                  height: 14,
-                  borderRadius: 4,
-                  background: bg,
-                  border: "1px solid rgba(0,0,0,0.12)",
-                }}
-              />
-              <Text size="sm">
-                {color.length >= 3
-                  ? `${color[0]},${color[1]},${color[2]}`
-                  : "-"}
-              </Text>
-            </Group>
+            <Text size="sm" c="dimmed">
+              -
+            </Text>
           )
-        },
+        }
+        return (
+          <Group gap={8} wrap="nowrap">
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 999,
+                backgroundColor: `rgb(${color.join(",")})`,
+                border:
+                  "1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+              }}
+            />
+            <Text size="sm">{idx ?? "-"}</Text>
+          </Group>
+        )
       },
-      {
-        accessor: "label_type",
-        title: "类型",
-        width: 90,
-        render: (record) => <Badge variant="light">{record.label_type}</Badge>,
-      },
-      {
-        accessor: "sub_attributes",
-        title: "子属性",
-        width: 240,
-        render: (record) => (
+    },
+    {
+      accessor: "sub_attributes",
+      title: "子属性",
+      width: 180,
+      render: (record) => {
+        const attrs = Array.isArray(record.sub_attributes)
+          ? record.sub_attributes
+          : []
+        return (
           <Text
             size="sm"
             style={{
-              maxWidth: 240,
+              maxWidth: 180,
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
             }}>
-            {(record.sub_attributes ?? []).join("、") || "-"}
+            {attrs.length ? attrs.join("、") : "-"}
           </Text>
-        ),
+        )
       },
-    ]
-    return cols
-  }, [])
+    },
+    {
+      accessor: "sub_attributes_describe",
+      title: "子属性描述",
+      width: 120,
+      textAlign: "center",
+      render: (record) => {
+        const details = Array.isArray(record.sub_attributes_describe)
+          ? record.sub_attributes_describe
+          : []
+        if (!details.length) {
+          return (
+            <Text size="sm" c="dimmed">
+              -
+            </Text>
+          )
+        }
+        return (
+          <Button
+            variant="subtle"
+            size="compact-xs"
+            onClick={() => {
+              setDetailRows(details)
+              setDetailOpen(true)
+            }}>
+            查看
+          </Button>
+        )
+      },
+    },
+  ]
+
+  const detailColumns: DataTableColumn<DetailRow>[] = [
+    {
+      accessor: "chinese_name",
+      title: "子属性",
+      width: 140,
+      render: (record) => record.chinese_name || "-",
+    },
+    {
+      accessor: "select_mode",
+      title: "输入方式",
+      width: 100,
+      render: (record) =>
+        selectModeMap.get(record.select_mode) ??
+        String(record.select_mode ?? "-"),
+    },
+    {
+      accessor: "isrequired",
+      title: "是否必填",
+      width: 90,
+      render: (record) => (record.isrequired === 1 ? "是" : "否"),
+    },
+    {
+      accessor: "optional_item",
+      title: "可选属性值",
+      render: (record) => {
+        const opts = Array.isArray(record.optional_item)
+          ? record.optional_item
+          : []
+        return opts.length ? opts.join("；") : "-"
+      },
+    },
+  ]
 
   return (
-    <Paper
-      withBorder
-      p="sm"
-      radius="md"
-      style={{
-        borderColor:
-          "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-      }}>
-      <Stack gap="sm">
-        <Text fw={700}>标注方案</Text>
-        <DataTable<ProjectDetail.LabelSchemaList>
+    <>
+      <Paper
+        withBorder
+        p="sm"
+        radius="md"
+        style={{
+          borderColor:
+            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+        }}>
+        <Stack gap="sm">
+          <Text fw={700}>标注方案</Text>
+          <DataTable<ProjectDetail.LabelSchemaList>
+            withTableBorder
+            withRowBorders
+            idAccessor="category_id"
+            records={schemas}
+            columns={columns}
+            minHeight={160}
+            noRecordsText="暂无数据"
+          />
+        </Stack>
+      </Paper>
+
+      <Modal
+        opened={detailOpen}
+        onClose={() => {
+          setDetailOpen(false)
+          setDetailRows([])
+        }}
+        title="子属性描述"
+        centered
+        size="70%">
+        <DataTable<DetailRow>
           withTableBorder
           withRowBorders
-          idAccessor="category_id"
-          records={schemas}
-          columns={columns}
-          minHeight={160}
+          records={detailRows}
+          columns={detailColumns}
           noRecordsText="暂无数据"
+          minHeight={220}
+          idAccessor="chinese_name"
         />
-      </Stack>
-    </Paper>
+      </Modal>
+    </>
   )
 }

app/management/project/detail/components/NoteRulesTable.tsx

@@ -1,61 +1,278 @@
 "use client"
 
+import { projectConfig } from "@/components/label/api/project"
 import { ProjectDetail } from "@/components/label/api/project/typing"
-import { List, Paper, Stack, Text } from "@mantine/core"
+import { usePermissionStore } from "@/components/label/store/auth"
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Group,
+  Modal,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core"
+import { modals } from "@mantine/modals"
+import { notifications } from "@mantine/notifications"
+import { IconPlus, IconTrash } from "@tabler/icons-react"
+import dayjs from "dayjs"
+import { DataTable, DataTableColumn } from "mantine-datatable"
+import { useMemo, useState } from "react"
+
+type RulePayload = {
+  text: string
+  create_user: string
+  create_date: string
+}
+
+type RuleRow = RulePayload & {
+  index: number
+}
+
+function normalizeRule(item: unknown): RulePayload {
+  if (typeof item === "string") {
+    return { text: item, create_user: "-", create_date: "-" }
+  }
+  if (item && typeof item === "object") {
+    const rule = item as {
+      text?: unknown
+      create_user?: unknown
+      create_date?: unknown
+    }
+    return {
+      text: String(rule.text ?? ""),
+      create_user: String(rule.create_user ?? "-"),
+      create_date: String(rule.create_date ?? "-"),
+    }
+  }
+  return { text: "", create_user: "-", create_date: "-" }
+}
 
 export default function NoteRulesTable(props: {
   info: ProjectDetail.DataProps | undefined
+  onUpdated: () => void
 }) {
-  const rules = props.info?.comment_rule
-  const textRules = rules?.text_rules ?? []
-  const checkBoxRules = rules?.check_box_rules ?? []
+  const { info, onUpdated } = props
+  const projectId = info?.id ?? -1
+  const userName = usePermissionStore((s) => s.user_name)
+
+  const [open, setOpen] = useState(false)
+  const [inputText, setInputText] = useState("")
+  const [saving, setSaving] = useState(false)
+
+  const textRules = useMemo(() => {
+    const rules = (info?.comment_rule as any)?.text_rules
+    return Array.isArray(rules) ? rules.map((r) => String(r ?? "")) : []
+  }, [info?.comment_rule])
+
+  const checkBoxRules = useMemo<RulePayload[]>(() => {
+    const raw = (info?.comment_rule as any)?.check_box_rules
+    const list = Array.isArray(raw) ? raw : []
+    return list.map((item) => normalizeRule(item))
+  }, [info?.comment_rule])
+
+  const rows = useMemo<RuleRow[]>(() => {
+    return checkBoxRules.map((rule, index) => ({ ...rule, index }))
+  }, [checkBoxRules])
+
+  const saveRules = async (nextRules: RulePayload[], successText: string) => {
+    if (projectId === -1) return
+    setSaving(true)
+    try {
+      await projectConfig({
+        project_id: projectId,
+        comment_rule: {
+          check_box_rules: nextRules,
+          text_rules: textRules,
+        },
+      })
+      notifications.show({
+        color: "green",
+        title: "操作成功",
+        message: successText,
+      })
+      setOpen(false)
+      setInputText("")
+      onUpdated()
+    } catch (e) {
+      notifications.show({
+        color: "red",
+        title: "操作失败",
+        message: e instanceof Error ? e.message : "请求失败",
+      })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleAdd = async () => {
+    const value = inputText.trim()
+    if (!value) {
+      notifications.show({
+        color: "red",
+        title: "新增失败",
+        message: "批注内容不能为空",
+      })
+      return
+    }
+    const exists = rows.some((row) => row.text.trim() === value)
+    if (exists) {
+      notifications.show({
+        color: "red",
+        title: "新增失败",
+        message: "批注规则重复，请重新输入",
+      })
+      return
+    }
+    const next: RulePayload[] = [
+      ...checkBoxRules,
+      {
+        text: value,
+        create_user: userName ? String(userName) : "-",
+        create_date: dayjs().format("YYYY-MM-DD"),
+      },
+    ]
+    await saveRules(next, "已添加规则")
+  }
+
+  const handleDelete = async (row: RuleRow) => {
+    const next = checkBoxRules.filter((_, index) => index !== row.index)
+    await saveRules(next, "已删除规则")
+  }
+
+  const columns: DataTableColumn<RuleRow>[] = [
+    {
+      accessor: "method",
+      title: "批注方式",
+      width: 90,
+      render: () => <Badge variant="light">勾选</Badge>,
+    },
+    {
+      accessor: "text",
+      title: "内容",
+    },
+    {
+      accessor: "create_user",
+      title: "添加者",
+      width: 120,
+    },
+    {
+      accessor: "create_date",
+      title: "添加日期",
+      width: 120,
+    },
+    {
+      accessor: "operation",
+      title: "操作",
+      width: 90,
+      textAlign: "center",
+      render: (record) => (
+        <ActionIcon
+          variant="subtle"
+          color="red"
+          onClick={() => {
+            modals.openConfirmModal({
+              title: "删除规则",
+              centered: true,
+              children: <Text size="sm">确定删除该批注规则吗？</Text>,
+              labels: { confirm: "确定", cancel: "取消" },
+              confirmProps: { color: "red" },
+              onConfirm: () => handleDelete(record),
+            })
+          }}>
+          <IconTrash size={16} />
+        </ActionIcon>
+      ),
+    },
+  ]
 
   return (
-    <Paper
-      withBorder
-      p="sm"
-      radius="md"
-      style={{
-        borderColor:
-          "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
-      }}>
-      <Stack gap="xs">
-        <Text fw={700}>批注规则</Text>
+    <>
+      <Paper
+        withBorder
+        p="sm"
+        radius="md"
+        style={{
+          borderColor:
+            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+        }}>
+        <Stack gap="sm">
+          <Group justify="space-between" wrap="wrap">
+            <Text fw={700}>批注规则</Text>
+            <Button
+              size="xs"
+              leftSection={<IconPlus size={14} />}
+              onClick={() => {
+                setInputText("")
+                setOpen(true)
+              }}>
+              添加规则
+            </Button>
+          </Group>
 
-        <Stack gap={4}>
-          <Text size="sm" fw={600}>
-            文本规则
-          </Text>
-          {textRules.length ? (
-            <List size="sm" spacing={4}>
-              {textRules.map((r, idx) => (
-                <List.Item key={idx}>{r}</List.Item>
-              ))}
-            </List>
-          ) : (
-            <Text size="sm" c="dimmed">
-              -
+          <Stack gap={4}>
+            <Text size="sm" fw={600}>
+              文本规则
             </Text>
-          )}
-        </Stack>
+            <Text size="sm" c="dimmed">
+              {textRules.length ? textRules.join("；") : "-"}
+            </Text>
+          </Stack>
 
-        <Stack gap={4}>
-          <Text size="sm" fw={600}>
-            勾选规则
-          </Text>
-          {checkBoxRules.length ? (
-            <List size="sm" spacing={4}>
-              {checkBoxRules.map((r, idx) => (
-                <List.Item key={idx}>{String(r)}</List.Item>
-              ))}
-            </List>
-          ) : (
-            <Text size="sm" c="dimmed">
-              -
-            </Text>
-          )}
+          <DataTable<RuleRow>
+            withTableBorder
+            withRowBorders
+            records={rows}
+            columns={columns}
+            noRecordsText="暂无规则"
+            minHeight={200}
+            idAccessor={(record) =>
+              `${record.index}_${record.text}_${record.create_user}_${record.create_date}`
+            }
+          />
         </Stack>
-      </Stack>
-    </Paper>
+      </Paper>
+
+      <Modal
+        opened={open}
+        onClose={() => {
+          if (saving) return
+          setOpen(false)
+          setInputText("")
+        }}
+        title="添加批注规则"
+        centered>
+        <Stack gap="sm">
+          <Group gap="sm">
+            <Text size="sm" c="dimmed">
+              批注方式
+            </Text>
+            <Badge variant="light">勾选</Badge>
+          </Group>
+          <TextInput
+            label="批注内容"
+            placeholder="请输入批注内容"
+            value={inputText}
+            onChange={(e) => setInputText(e.currentTarget.value)}
+          />
+          <Group justify="flex-end" gap="sm">
+            <Button
+              variant="default"
+              onClick={() => {
+                setOpen(false)
+                setInputText("")
+              }}
+              disabled={saving}>
+              取消
+            </Button>
+            <Button onClick={handleAdd} loading={saving}>
+              保存
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </>
   )
 }