From 9c6266cdf85ad44c80fb52ca47dd015da8f59a6a Mon Sep 17 00:00:00 2001
From: shay7sev <shay7sev@gmail.com>
Date: Thu, 19 Mar 2026 17:23:55 +0800
Subject: [PATCH] fix(context): right context

---
 .../label/components/PaperContainer.tsx       | 216 +++++++++++-------
 1 file changed, 136 insertions(+), 80 deletions(-)

diff --git a/components/label/components/PaperContainer.tsx b/components/label/components/PaperContainer.tsx
index 3efc9ab..1626aa4 100644
--- a/components/label/components/PaperContainer.tsx
+++ b/components/label/components/PaperContainer.tsx
@@ -54,8 +54,8 @@ import useRenderTag from "../useRenderTag"
 import { useRightToolsStore } from "../useRightToolsStore"
 import { useTopToolsStore } from "../useTopToolsStore"
 import { checkCommentsIsSame } from "../util"
-import { labelTypeMap } from "../utils/constants"
 import { safeClone } from "../utils/clone"
+import { labelTypeMap } from "../utils/constants"
 import { adjustPoints } from "../utils/paperjs"
 import CrosshairComponent from "./CrosshairComponent"
 import { renderOperationIcon } from "./RightObjectTools"
@@ -1539,8 +1539,8 @@ const PaperContainer = (
 
   const form = useForm<any>({
     initialValues: {
-      id: undefined,
-      operation: undefined,
+      id: null,
+      operation: null,
       sub_attributes: {},
       check_box_comments: [],
       text_comments: "",
@@ -1587,7 +1587,7 @@ const PaperContainer = (
         ?.get(operationId)
         ?.find((item) => item[0] === id)
 
-      form.setFieldValue("id", id)
+      form.setFieldValue("id", id.toString())
       form.setFieldValue("operation", operationId)
       if (currentPath?.[2].sub_attributes) {
         let operationSchema = getOperationSchema(operationId)
@@ -1665,7 +1665,9 @@ const PaperContainer = (
           .getState()
           .pathIds.reduce((a, b) => Math.max(a, b), 0) + 1
       )
-      let selectIds = ids.filter((id) => !existIds.includes(id))
+      let selectIds = ids.filter(
+        (candidateId) => candidateId === id || !existIds.includes(candidateId)
+      )
 
       setIds(Array.from(new Set(selectIds)))
     } else {
@@ -1893,6 +1895,21 @@ const PaperContainer = (
     [activeImage, id, newDetail, operationId, pathItem, setOperation]
   )
 
+  const renderSubAttrLabel = useCallback((name: string, required?: boolean) => {
+    return (
+      <Text component="span" size="xs" fw={500}>
+        {name}
+        <Text
+          component="span"
+          size="10px"
+          fw={700}
+          c={required ? "red" : "dimmed"}>
+          {required ? "（必填）" : "（选填）"}
+        </Text>
+      </Text>
+    )
+  }, [])
+
   const contextMenu = useMemo(() => {
     let operationSchema = getOperationSchema(operationId)
     const currentType = useTopToolsStore.getState().currentTimeKey
@@ -2005,96 +2022,134 @@ const PaperContainer = (
                   : "block",
               }}>
               {operationSchema?.sub_attributes?.length ? (
-                <Text c="blue" fw={600} mx="xs">
-                  子属性
-                </Text>
+                <Group justify="space-between" align="center" mx="xs" mb="xs">
+                  <Text c="blue" fw={600}>
+                    子属性
+                  </Text>
+                  <Text size="10px" c="dimmed">
+                    <Text component="span" c="red" fw={700}>
+                      必填
+                    </Text>
+                    项需填写
+                  </Text>
+                </Group>
               ) : null}
               <ScrollArea.Autosize mah={280}>
                 {operationSchema?.sub_attributes_describe.map((item) => {
+                  const label = renderSubAttrLabel(
+                    item.chinese_name,
+                    !!item.isrequired
+                  )
+                  const fieldWrapperStyle = {
+                    borderRadius: "6px",
+                    border: item.isrequired
+                      ? "1px solid rgba(250, 82, 82, 0.24)"
+                      : "1px solid rgba(34, 139, 230, 0.14)",
+                    background: item.isrequired
+                      ? "rgba(250, 82, 82, 0.04)"
+                      : "rgba(34, 139, 230, 0.03)",
+                  }
+
                   if (item.select_mode === 0) {
                     return (
-                      <TextInput
+                      <Box
                         key={item.chinese_name}
-                        label={item.chinese_name}
-                        size="xs"
-                        placeholder={`请输入${item.chinese_name}`}
-                        // required={item.isrequired}
-                        {...form.getInputProps(
-                          `sub_attributes.${item.chinese_name}`
-                        )}
-                        onChange={(e) => {
-                          form
-                            .getInputProps(
-                              `sub_attributes.${item.chinese_name}`
-                            )
-                            .onChange(e)
-                          handleChangeContextMenuSubAttr(
-                            item.chinese_name,
-                            e.target.value
-                          )
-                        }}
+                        p="xs"
                         mb="xs"
-                      />
+                        style={fieldWrapperStyle}>
+                        <TextInput
+                          label={label}
+                          size="xs"
+                          placeholder={`请输入${item.chinese_name}`}
+                          required={!!item.isrequired}
+                          {...form.getInputProps(
+                            `sub_attributes.${item.chinese_name}`
+                          )}
+                          onChange={(e) => {
+                            form
+                              .getInputProps(
+                                `sub_attributes.${item.chinese_name}`
+                              )
+                              .onChange(e)
+                            handleChangeContextMenuSubAttr(
+                              item.chinese_name,
+                              e.target.value
+                            )
+                          }}
+                        />
+                      </Box>
                     )
                   } else if (item.select_mode === 1) {
                     return (
-                      <Radio.Group
+                      <Box
                         key={item.chinese_name}
-                        label={item.chinese_name}
-                        size="xs"
-                        // required={item.isrequired}
-                        {...form.getInputProps(
-                          `sub_attributes.${item.chinese_name}`
-                        )}
-                        onChange={(value) => {
-                          form.setFieldValue(
-                            `sub_attributes.${item.chinese_name}`,
-                            value
-                          )
-                          handleChangeContextMenuSubAttr(
-                            item.chinese_name,
-                            value
-                          )
-                        }}
-                        mb="xs">
-                        <Stack gap="xs">
-                          {item.optional_item.map((option) => (
-                            <Radio key={option} value={option} label={option} />
-                          ))}
-                        </Stack>
-                      </Radio.Group>
+                        p="xs"
+                        mb="xs"
+                        style={fieldWrapperStyle}>
+                        <Radio.Group
+                          label={label}
+                          size="xs"
+                          required={!!item.isrequired}
+                          {...form.getInputProps(
+                            `sub_attributes.${item.chinese_name}`
+                          )}
+                          onChange={(value) => {
+                            form.setFieldValue(
+                              `sub_attributes.${item.chinese_name}`,
+                              value
+                            )
+                            handleChangeContextMenuSubAttr(
+                              item.chinese_name,
+                              value
+                            )
+                          }}>
+                          <Stack gap={6} mt={6}>
+                            {item.optional_item.map((option) => (
+                              <Radio
+                                key={option}
+                                value={option}
+                                label={option}
+                              />
+                            ))}
+                          </Stack>
+                        </Radio.Group>
+                      </Box>
                     )
                   } else if (item.select_mode === 2) {
                     return (
-                      <Checkbox.Group
+                      <Box
                         key={item.chinese_name}
-                        label={item.chinese_name}
-                        size="xs"
-                        // required={item.isrequired}
-                        {...form.getInputProps(
-                          `sub_attributes.${item.chinese_name}`
-                        )}
-                        onChange={(value) => {
-                          form.setFieldValue(
-                            `sub_attributes.${item.chinese_name}`,
-                            value
-                          )
-                          handleChangeContextMenuSubAttr(
-                            item.chinese_name,
-                            value.toString()
-                          )
-                        }}
-                        mb="xs">
-                        <Stack gap="xs">
-                          {item.optional_item.map((option) => (
-                            <Checkbox
-                              key={option}
-                              value={option}
-                              label={option}
-                            />
-                          ))}
-                        </Stack>
-                      </Checkbox.Group>
+                        p="xs"
+                        mb="xs"
+                        style={fieldWrapperStyle}>
+                        <Checkbox.Group
+                          label={label}
+                          size="xs"
+                          required={!!item.isrequired}
+                          {...form.getInputProps(
+                            `sub_attributes.${item.chinese_name}`
+                          )}
+                          onChange={(value) => {
+                            form.setFieldValue(
+                              `sub_attributes.${item.chinese_name}`,
+                              value
+                            )
+                            handleChangeContextMenuSubAttr(
+                              item.chinese_name,
+                              value.toString()
+                            )
+                          }}>
+                          <Stack gap={6} mt={6}>
+                            {item.optional_item.map((option) => (
+                              <Checkbox
+                                key={option}
+                                value={option}
+                                label={option}
+                              />
+                            ))}
+                          </Stack>
+                        </Checkbox.Group>
+                      </Box>
                     )
                   }
                   return null
@@ -2118,6 +2173,7 @@ const PaperContainer = (
     operationId,
     position.left,
     position.top,
+    renderSubAttrLabel,
     showContextMenu,
   ])