feat: parent child retrieval (#12106)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/base/checkbox/assets/mixed.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check">
+<path id="Vector 1" d="M2.5 6H9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</svg>

web/app/components/base/checkbox/index.module.css

@@ -0,0 +1,10 @@
+.mixed {
+  background: var(--color-components-checkbox-bg) url(./assets/mixed.svg) center center no-repeat;
+  background-size: 12px 12px;
+  border: none;
+}
+
+.checked.disabled {
+  background-color: #d0d5dd;
+  border-color: #d0d5dd;
+}

web/app/components/base/checkbox/index.tsx

@@ -1,4 +1,5 @@
 import { RiCheckLine } from '@remixicon/react'
+import s from './index.module.css'
 import cn from '@/utils/classnames'
 
 type CheckboxProps = {
@@ -6,15 +7,17 @@ type CheckboxProps = {
   onCheck?: () => void
   className?: string
   disabled?: boolean
+  mixed?: boolean
 }
 
-const Checkbox = ({ checked, onCheck, className, disabled }: CheckboxProps) => {
+const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
   if (!checked) {
     return (
       <div
         className={cn(
           'w-4 h-4 rounded-[4px] bg-components-checkbox-bg-unchecked border border-components-checkbox-border hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover shadow-xs cursor-pointer',
           disabled && 'border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled cursor-not-allowed',
+          mixed && s.mixed,
           className,
         )}
         onClick={() => {