From 06bd60aba6d019a03f17e85fb7236f335dea3699 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Jan 2026 11:38:38 +0800 Subject: [PATCH] refactor: remove -inner div element to simplify DOM structure Co-Authored-By: Claude (GLM-4.7) --- assets/index.less | 157 +++++++++--------------- src/index.tsx | 1 - tests/__snapshots__/index.test.tsx.snap | 12 -- 3 files changed, 57 insertions(+), 113 deletions(-) diff --git a/assets/index.less b/assets/index.less index 6e40abb..47a78e4 100644 --- a/assets/index.less +++ b/assets/index.less @@ -1,140 +1,97 @@ @checkboxPrefixCls: rc-checkbox; -@checkboxInnerPrefixCls: ~"@{checkboxPrefixCls}-inner"; /* Default state */ .@{checkboxPrefixCls} { - white-space: nowrap; - cursor: pointer; - outline: none; - display: inline-block; position: relative; + display: inline-block; + width: 14px; + height: 14px; line-height: 1; + white-space: nowrap; vertical-align: middle; + background-color: #ffffff; + border-color: #d9d9d9; + border-style: solid; + border-width: 1px; + border-radius: 3px; + outline: none; + cursor: pointer; + transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), + background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); - &:hover .@{checkboxInnerPrefixCls}, - &-input:focus + .@{checkboxInnerPrefixCls} { + &:hover, + &-input:focus + & { border-color: #3dbcf6; } - &-inner { - &:after { - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - position: absolute; - left: 4px; - top: 1px; - display: table; - width: 5px; - height: 8px; - border: 2px solid #ffffff; - border-top: 0; - border-left: 0; - content: ' '; - animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); - animation-duration: 0.3s; - animation-name: amCheckboxOut; - } - - position: relative; - top: 0; - left: 0; - display: inline-block; - width: 14px; - height: 14px; - border-width: 1px; - border-style: solid; - border-radius: 3px; - border-color: #d9d9d9; - background-color: #ffffff; - transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); + &:after { + position: absolute; + top: 1px; + left: 4px; + display: table; + width: 5px; + height: 8px; + border: 2px solid #ffffff; + border-top: 0; + border-left: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + animation-name: amCheckboxOut; + animation-duration: 0.3s; + animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); + content: ' '; } &-input { position: absolute; + top: 0; + right: 0; + bottom: 0; left: 0; z-index: 9999; cursor: pointer; opacity: 0; - top: 0; - bottom: 0; - right: 0; } } /* Checked state */ .@{checkboxPrefixCls}-checked { + background-color: #3dbcf6; + border-color: #3dbcf6; &:hover { - .@{checkboxInnerPrefixCls} { - border-color: #3dbcf6; - } - } - - .@{checkboxInnerPrefixCls} { border-color: #3dbcf6; - background-color: #3dbcf6; - - &:after { - transform: rotate(45deg); - position: absolute; - left: 4px; - top: 1px; - display: table; - width: 5px; - height: 8px; - border: 2px solid #ffffff; - border-top: 0; - border-left: 0; - content: ' '; - animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); - animation-duration: 0.3s; - animation-name: amCheckboxOut; - } + } - @media print { - box-shadow: inset 0 0 0 16px #3dbcf6; - } + @media print { + box-shadow: inset 0 0 0 16px #3dbcf6; } } .@{checkboxPrefixCls}-disabled { + background-color: #f3f3f3; + border-color: #d9d9d9; - &.@{checkboxPrefixCls}-checked { + &:after { + border-color: #f3f3f3; + animation-name: none; + } - &:hover { - .@{checkboxInnerPrefixCls} { - border-color: #d9d9d9; - } + &.@{checkboxPrefixCls}-checked { + background-color: #f3f3f3; + border-color: #d9d9d9; + &:after { + border-color: #cccccc; + animation-name: none; } - .@{checkboxInnerPrefixCls} { - background-color: #f3f3f3; - border-color: #d9d9d9; - - &:after { - animation-name: none; - border-color: #cccccc; - } - - @media print { - box-shadow: inset 0 0 0 16px #f3f3f3; - } + @media print { + box-shadow: inset 0 0 0 16px #f3f3f3; } } &:hover { - .@{checkboxInnerPrefixCls} { - border-color: #d9d9d9; - } - } - - .@{checkboxInnerPrefixCls} { border-color: #d9d9d9; - background-color: #f3f3f3; - &:after { - animation-name: none; - border-color: #f3f3f3; - } } .@{checkboxPrefixCls}-input { @@ -144,14 +101,14 @@ @keyframes amCheckboxIn { 0% { - opacity: 0; - transform-origin: 50% 50%; transform: scale(0, 0) rotate(45deg); + transform-origin: 50% 50%; + opacity: 0; } 100% { - opacity: 1; - transform-origin: 50% 50%; transform: scale(1, 1) rotate(45deg); + transform-origin: 50% 50%; + opacity: 1; } } diff --git a/src/index.tsx b/src/index.tsx index d70945d..6a42d61 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -98,7 +98,6 @@ export const Checkbox = forwardRef((props, ref) => { checked={!!rawValue} type={type} /> - ); }); diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap index 07c12b0..f1ca43c 100644 --- a/tests/__snapshots__/index.test.tsx.snap +++ b/tests/__snapshots__/index.test.tsx.snap @@ -8,9 +8,6 @@ exports[`rc-checkbox click checkbox 1`] = ` class="rc-checkbox-input" type="checkbox" /> - `; @@ -22,9 +19,6 @@ exports[`rc-checkbox click radio 1`] = ` class="rc-checkbox-input" type="radio" /> - `; @@ -37,9 +31,6 @@ exports[`rc-checkbox control mode 1`] = ` class="rc-checkbox-input" type="checkbox" /> - `; @@ -51,8 +42,5 @@ exports[`rc-checkbox works 1`] = ` class="rc-checkbox-input" type="checkbox" /> - `;