fix(context): right context

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,
+      id: null,
-      operation: undefined,
+      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,20 +2022,46 @@ const PaperContainer = (
                   : "block",
               }}>
               {operationSchema?.sub_attributes?.length ? (
-                <Text c="blue" fw={600} mx="xs">
+                <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}
+                        p="xs"
+                        mb="xs"
+                        style={fieldWrapperStyle}>
+                        <TextInput
+                          label={label}
                           size="xs"
                           placeholder={`请输入${item.chinese_name}`}
-                        // required={item.isrequired}
+                          required={!!item.isrequired}
                           {...form.getInputProps(
                             `sub_attributes.${item.chinese_name}`
                           )}
@@ -2033,16 +2076,20 @@ const PaperContainer = (
                               e.target.value
                             )
                           }}
-                        mb="xs"
                         />
+                      </Box>
                     )
                   } else if (item.select_mode === 1) {
                     return (
-                      <Radio.Group
+                      <Box
                         key={item.chinese_name}
-                        label={item.chinese_name}
+                        p="xs"
+                        mb="xs"
+                        style={fieldWrapperStyle}>
+                        <Radio.Group
+                          label={label}
                           size="xs"
-                        // required={item.isrequired}
+                          required={!!item.isrequired}
                           {...form.getInputProps(
                             `sub_attributes.${item.chinese_name}`
                           )}
@@ -2055,22 +2102,30 @@ const PaperContainer = (
                               item.chinese_name,
                               value
                             )
-                        }}
+                          }}>
-                        mb="xs">
+                          <Stack gap={6} mt={6}>
-                        <Stack gap="xs">
                             {item.optional_item.map((option) => (
-                            <Radio key={option} value={option} label={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}
+                        p="xs"
+                        mb="xs"
+                        style={fieldWrapperStyle}>
+                        <Checkbox.Group
+                          label={label}
                           size="xs"
-                        // required={item.isrequired}
+                          required={!!item.isrequired}
                           {...form.getInputProps(
                             `sub_attributes.${item.chinese_name}`
                           )}
@@ -2083,9 +2138,8 @@ const PaperContainer = (
                               item.chinese_name,
                               value.toString()
                             )
-                        }}
+                          }}>
-                        mb="xs">
+                          <Stack gap={6} mt={6}>
-                        <Stack gap="xs">
                             {item.optional_item.map((option) => (
                               <Checkbox
                                 key={option}
@@ -2095,6 +2149,7 @@ const PaperContainer = (
                             ))}
                           </Stack>
                         </Checkbox.Group>
+                      </Box>
                     )
                   }
                   return null
@@ -2118,6 +2173,7 @@ const PaperContainer = (
     operationId,
     position.left,
     position.top,
+    renderSubAttrLabel,
     showContextMenu,
   ])