From 67e8196ce99f9ca4cd77d231a96dbf7e9cfec27c Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Mon, 8 Sep 2025 09:16:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20antd=E7=BB=84=E4=BB=B6=E5=BA=93?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/components/ant-button.scss | 196 ++++++++++++++++++++ src/styles/components/ant-checkbox.scss | 68 +++++++ src/styles/components/ant-form.scss | 39 ++++ src/styles/components/ant-input.scss | 88 +++++++++ src/styles/components/ant-modal.scss | 42 +++++ src/styles/components/ant-notification.scss | 15 ++ src/styles/components/ant-radio.scss | 39 ++++ src/styles/components/ant-select.scss | 69 +++++++ src/styles/components/ant-spin.scss | 6 + src/styles/components/ant-step.scss | 56 ++++++ src/styles/components/ant-switch.scss | 10 + src/styles/components/ant-table.scss | 75 ++++++++ src/styles/components/ant-tabs.scss | 49 +++++ src/styles/components/ant-tag.scss | 4 + src/styles/components/ant-textarea.scss | 5 + src/styles/components/index.scss | 30 ++- src/styles/components/steps.scss | 4 +- 17 files changed, 786 insertions(+), 9 deletions(-) create mode 100644 src/styles/components/ant-button.scss create mode 100644 src/styles/components/ant-checkbox.scss create mode 100644 src/styles/components/ant-form.scss create mode 100644 src/styles/components/ant-input.scss create mode 100644 src/styles/components/ant-modal.scss create mode 100644 src/styles/components/ant-notification.scss create mode 100644 src/styles/components/ant-radio.scss create mode 100644 src/styles/components/ant-select.scss create mode 100644 src/styles/components/ant-spin.scss create mode 100644 src/styles/components/ant-step.scss create mode 100644 src/styles/components/ant-switch.scss create mode 100644 src/styles/components/ant-table.scss create mode 100644 src/styles/components/ant-tabs.scss create mode 100644 src/styles/components/ant-tag.scss create mode 100644 src/styles/components/ant-textarea.scss diff --git a/src/styles/components/ant-button.scss b/src/styles/components/ant-button.scss new file mode 100644 index 0000000..79571a7 --- /dev/null +++ b/src/styles/components/ant-button.scss @@ -0,0 +1,196 @@ +.ant-btn { + border-radius: 2px !important; + border: 1px solid #d7d7d9 !important; + color: #3c4043 !important; + font-family: $font-family-regular; + font-size: 14px !important; + font-style: normal; + font-weight: 400 !important; + line-height: 22px !important; + padding: 0 16px; + display: flex; + align-items: center; + justify-content: center; + &.ant-btn-lg { + height: 36px; + padding: 0 20px; + } + &.ant-btn-sm { + padding: 0 16px; + height: 28px; + } +} +.ant-btn-default { + &:disabled { + border-color: #f2f3f5 !important; + color: #b1b2b5 !important; + background-color: #fff !important; + } + &:not(:disabled) { + &:hover { + border-color: #e6e6e8 !important; + color: #737478 !important; + } + } + &.ant-btn-dangerous { + border-color: $color-error !important; + color: $color-error !important; + &:disabled { + background-color: $color-error-3 !important; + } + &:not(:disabled) { + &:hover { + border-color: $color-error-5 !important; + color: $color-error-5 !important; + } + } + } +} + +.ant-btn-primary { + background-color: $color-primary !important; + border-color: transparent !important; + color: #fff !important; + &:disabled { + color: #fff !important; + border-color: transparent !important; + background-color: $color-primary-3 !important; + } + &:not(:disabled) { + &:hover { + color: #fff !important; + border-color: transparent !important; + background-color: $color-primary-5 !important; + } + &:focus-visible { + outline: none; + outline-offset: unset; + } + } + &.ant-btn-dangerous { + background-color: $color-error !important; + &:disabled { + background-color: $color-error-3 !important; + } + &:not(:disabled) { + &:hover { + background-color: $color-error-5 !important; + } + } + } + &.ant-btn-background-ghost { + border: 1px solid $color-primary !important; + color: $color-primary !important; + background-color: #fff !important; + &:disabled { + border-color: $color-primary-3 !important; + color: $color-primary-3 !important; + background-color: #fff !important; + } + &:not(:disabled) { + &:hover { + border-color: $color-primary-5 !important; + color: $color-primary-5 !important; + background-color: #fff !important; + } + } + &.ant-btn-dangerous { + border: 1px solid $color-error !important; + color: $color-error !important; + background-color: #fff !important; + &:disabled { + border-color: $color-error-3 !important; + color: $color-error-3 !important; + } + &:not(:disabled) { + &:hover { + border-color: $color-error-5 !important; + color: $color-error-5 !important; + } + } + } + } +} + +.ant-btn-outline { + border: 1px solid $color-primary !important; + color: $color-primary !important; + &:disabled { + border-color: $color-primary-3 !important; + color: $color-primary-3 !important; + } + &:not(:disabled) { + &:hover { + border-color: $color-primary-5 !important; + color: $color-primary-5 !important; + } + } + &.ant-btn-dangerous { + border: 1px solid $color-error !important; + color: $color-error !important; + &:disabled { + border-color: $color-error-3 !important; + color: $color-error-3 !important; + } + &:not(:disabled) { + &:hover { + border-color: $color-error-5 !important; + color: $color-error-5 !important; + } + } + } +} + +.ant-btn-text { + background-color: transparent !important; + border-color: transparent !important; + color: $color-primary !important; + &:disabled { + color: $color-primary-2 !important; + border-color: transparent !important; + } + &:not(:disabled) { + &:hover { + color: $color-primary-5 !important; + border-color: transparent !important; + } + } + &.ant-btn-dangerous { + color: $color-error !important; + &:disabled { + color: $color-error-2 !important; + } + &:not(:disabled) { + &:hover { + color: $color-error-5 !important; + } + } + } +} + +.ant-btn-link { + background-color: transparent !important; + border-color: transparent !important; + color: $color-primary !important; + &:disabled { + color: $color-primary-2 !important; + border-color: transparent !important; + } + &:not(:disabled) { + &:hover { + color: $color-primary-5 !important; + border-color: transparent !important; + } + } + &.ant-btn-dangerous { + color: $color-error !important; + &:disabled { + color: $color-error-2 !important; + } + &:not(:disabled) { + &:hover { + color: $color-error-5 !important; + } + } + } +} diff --git a/src/styles/components/ant-checkbox.scss b/src/styles/components/ant-checkbox.scss new file mode 100644 index 0000000..405459b --- /dev/null +++ b/src/styles/components/ant-checkbox.scss @@ -0,0 +1,68 @@ +.ant-checkbox-group { + .ant-checkbox-wrapper { + margin-right: 24px; + } +} +.ant-checkbox-wrapper { + .ant-checkbox { + &::after { + display: none !important; + } + .ant-checkbox-inner { + border-radius: 2px; + border: 2px solid #d7d7d9; + } + &.ant-checkbox-disabled { + background: #f2f3f5; + } + &.ant-checkbox-indeterminate { + .ant-checkbox-inner { + background-color: #6d4cfe !important; + border-color: transparent !important; + &::after { + height: 2px; + width: 6px; + background-color: #fff !important; + } + } + } + &.ant-checkbox-indeterminate.ant-checkbox-disabled { + .ant-checkbox-inner { + background-color: #a794fe !important; + &::after { + transform: translate(-50%, -50%) scale(1); + } + } + } + &.ant-checkbox-checked { + .ant-checkbox-inner { + background-color: #6d4cfe !important; + border-color: transparent !important; + } + } + &.ant-checkbox-checked.ant-checkbox-disabled { + .ant-checkbox-inner { + background-color: #a794fe !important; + border-color: transparent !important; + &::after { + border-color: #fff; + } + } + } + } + .ant-checkbox + span { + padding-left: 8px; + padding-right: 0; + color: #211f24; + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + &:hover { + .ant-checkbox-inner { + border-color: #d7d7d9 !important; + } + } +} diff --git a/src/styles/components/ant-form.scss b/src/styles/components/ant-form.scss new file mode 100644 index 0000000..6ad4fad --- /dev/null +++ b/src/styles/components/ant-form.scss @@ -0,0 +1,39 @@ +.ant-form { + .ant-form-item { + margin-bottom: 0; + &:not(:last-child) { + margin-bottom: 16px !important; + } + .ant-form-item-row { + .ant-form-item-label { + margin-right: 12px; + > label { + color: #211f24; + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + &::before { + margin-inline-end: unset; + color: #f64b31; + margin-right: 4px; + font-size: 14px; + font-family: $font-family-regular; + line-height: 22px; + } + &::after { + display: none; + } + } + } + } + .ant-form-item-control { + .ant-form-item-explain-error { + color: #f64b31; + font-size: 12px; + line-height: 20px; + } + } + } +} diff --git a/src/styles/components/ant-input.scss b/src/styles/components/ant-input.scss new file mode 100644 index 0000000..aee10b0 --- /dev/null +++ b/src/styles/components/ant-input.scss @@ -0,0 +1,88 @@ +@mixin box { + display: flex; + align-items: center; + border-radius: 4px !important; + border-color: #d7d7d9 !important; + background-color: #fff !important; + padding: 0 12px; +} +.ant-input-affix-wrapper { + @include box; + &.ant-input-affix-wrapper-disabled { + background-color: var(--BG-200, #f2f3f5) !important; + } +} +.ant-input, +.ant-input-password { + @include box; + + color: var(--Text-4, #211f24); + font-family: $font-family-regular; + font-size: 14px !important; + font-style: normal; + font-weight: 400; + &::placeholder { + color: var(--Text-4, #939499); + } + + &:hover { + background-color: #fff !important; + } + &:focus-within, + &.ant-input-focus, + &.ant-textarea-focus { + background-color: var(--color-bg-2) !important; + border-color: rgb(var(--primary-6)) !important; + box-shadow: 0 0 0 0 var(--color-primary-light-2) !important; + } + &.ant-input-disabled { + background-color: var(--BG-200, #f2f3f5) !important; + } + .ant-input-prefix { + padding-right: 0 !important; + margin-right: 4px; + } + &.ant-input-status-error, + &.ant-input-affix-wrapper-status-error { + border-color: $color-error !important; + } +} +input.ant-input { + height: 32px; + &.ant-input-lg { + height: 36px; + } + &.ant-input-sm { + height: 28px; + } +} +textarea.ant-input { + padding: 8px 12px 4px 12px; +} +.ant-input-affix-wrapper { + padding-top: 0; + padding-bottom: 0; + &:focus, + &-focused { + box-shadow: none !important; + } + .ant-input { + height: 30px; + &.ant-input-lg { + height: 34px; + } + &.ant-input-sm { + height: 26px; + } + } + .ant-input-suffix { + .ant-input-show-count-suffix { + color: var(--Text-4, #939499); + font-family: font-family-manrope-regular; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; + } + } +} diff --git a/src/styles/components/ant-modal.scss b/src/styles/components/ant-modal.scss new file mode 100644 index 0000000..47fc5ee --- /dev/null +++ b/src/styles/components/ant-modal.scss @@ -0,0 +1,42 @@ +.ant-modal { + .ant-modal-content { + padding: 0; + .ant-modal-header { + border-bottom: 1px solid var(--Border-1, #d7d7d9); + height: 56px; + padding: 0 20px; + margin-bottom: 0; + color: inherit; + display: flex; + flex-shrink: 0; + align-items: center; + box-sizing: border-box; + width: 100%; + .ant-modal-title { + font-family: $font-family-medium; + color: #211f24; + font-size: 16px; + font-style: normal; + font-weight: 400; + justify-content: flex-start; + } + } + .ant-modal-body { + padding: 24px 20px; + } + .ant-modal-footer { + margin-top: 0; + display: flex; + height: 64px; + padding: 0px 20px; + justify-content: flex-end; + align-items: center; + border-top: 1px solid var(--Border-1, #d7d7d9); + .ant-btn { + &:not(:nth-child(1)) { + margin-left: 8px; + } + } + } + } +} diff --git a/src/styles/components/ant-notification.scss b/src/styles/components/ant-notification.scss new file mode 100644 index 0000000..6690660 --- /dev/null +++ b/src/styles/components/ant-notification.scss @@ -0,0 +1,15 @@ +.ant-notification-notice { + padding: 9px 16px; + .ant-notification-notice-content { + .ant-notification-notice-message { + margin: 0; + } + .ant-notification-notice-description { + margin: 0; + } + } + .ant-notification-notice-close { + top: 50%; + transform: translateY(-50%); + } +} diff --git a/src/styles/components/ant-radio.scss b/src/styles/components/ant-radio.scss new file mode 100644 index 0000000..bda6f83 --- /dev/null +++ b/src/styles/components/ant-radio.scss @@ -0,0 +1,39 @@ +.ant-radio-group { + .ant-radio-wrapper { + margin-right: 24px; + } +} +.ant-radio-wrapper { + .ant-radio { + .ant-radio-inner { + width: 14px; + height: 14px; + background-color: #fff; + border: 2px solid var(--Border-1, #d7d7d9); + &::after { + display: none !important; + } + } + &.ant-radio-checked { + .ant-radio-inner { + border: 4px solid var(--Brand-6, #6d4cfe); + background-color: #fff; + } + } + &.ant-radio-disabled { + .ant-radio-inner { + border: 2px solid var(--Border-1, #d7d7d9); + background-color: #f2f3f5; + } + } + &.ant-radio-checked.ant-radio-disabled { + .ant-radio-inner { + border: 4px solid var(--Brand-6, #a794fe); + background-color: #fff; + } + } + } + span.ant-radio + * { + padding: 0 0 0 8px; + } +} diff --git a/src/styles/components/ant-select.scss b/src/styles/components/ant-select.scss new file mode 100644 index 0000000..558fbf6 --- /dev/null +++ b/src/styles/components/ant-select.scss @@ -0,0 +1,69 @@ +.ant-select { + .ant-select-selector { + padding: 0 12px !important; + border-radius: 4px !important; + border-color: #d7d7d9 !important; + background-color: #fff !important; + align-items: center; + .ant-select-selection-search-input { + height: 100% !important; + } + .ant-select-selection-placeholder { + color: var(--Text-4, #737478); + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + .ant-select-selection-item { + color: var(--Text-4, #211f24); + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + } + } + &:focus, + &-focused { + .ant-select-selector { + background-color: var(--color-bg-2) !important; + border-color: rgb(var(--primary-6)) !important; + box-shadow: 0 0 0 0 var(--color-primary-light-2) !important; + } + } + &.ant-select-status-error { + border-color: $color-error !important; + } +} + +.ant-select.ant-select-single { + .ant-select-selector { + height: 32px !important; + } + &.ant-select-lg { + .ant-select-selector { + height: 36px !important; + } + } + &.ant-select-sm { + .ant-select-selector { + height: 28px !important; + } + } +} +.ant-select.ant-select-multiple { + .ant-select-selection-search-input { + min-height: 32px !important; + } + &.ant-select-lg { + .ant-select-selection-search-input { + min-height: 36px !important; + } + } + &.ant-select-sm { + .ant-select-selection-search-input { + min-height: 28px !important; + } + } +} diff --git a/src/styles/components/ant-spin.scss b/src/styles/components/ant-spin.scss new file mode 100644 index 0000000..6e73b26 --- /dev/null +++ b/src/styles/components/ant-spin.scss @@ -0,0 +1,6 @@ +.ant-spin-nested-loading { + height: 100%; + .ant-spin-container { + height: 100%; + } +} \ No newline at end of file diff --git a/src/styles/components/ant-step.scss b/src/styles/components/ant-step.scss new file mode 100644 index 0000000..2eab583 --- /dev/null +++ b/src/styles/components/ant-step.scss @@ -0,0 +1,56 @@ +.ant-steps { + .ant-steps-item { + padding: 0; + padding-inline-start: 0 !important; + .ant-steps-item-container { + .ant-steps-item-icon { + width: 28px; + height: 28px; + line-height: 28px; + margin-right: 12px; + border-radius: 50%; + background: var(--BG-200, #f2f3f5); + .ant-steps-icon { + color: #55585f; + font-size: 16px; + font-style: normal; + font-weight: 500; + // line-height: 24px; + font-family: $font-family-manrope-medium; + } + } + .ant-steps-item-content { + .ant-steps-item-title { + padding-right: 12px; + color: #55585f; + font-family: $font-family-regular; + font-size: 16px; + font-style: normal; + font-weight: 400; + &::after { + background-color: #e6e6e8 !important; + } + } + } + } + &:not(:last-child) { + margin-left: 12px; + } + &.ant-steps-item-active, + &.ant-steps-item-finish { + .ant-steps-item-icon { + background-color: #6d4cfe !important; + .ant-steps-icon { + color: #fff !important; + } + } + .ant-steps-item-content { + .ant-steps-item-title { + color: #211f24; + font-family: $font-family-medium; + font-weight: 500; + } + } + } + } +} diff --git a/src/styles/components/ant-switch.scss b/src/styles/components/ant-switch.scss new file mode 100644 index 0000000..5699f8c --- /dev/null +++ b/src/styles/components/ant-switch.scss @@ -0,0 +1,10 @@ +.ant-switch { + &.ant-switch-checked { + background: $color-primary; + &:not(ant-switch-disabled) { + &:hover { + background: $color-primary !important; + } + } + } +} diff --git a/src/styles/components/ant-table.scss b/src/styles/components/ant-table.scss new file mode 100644 index 0000000..a53d7a6 --- /dev/null +++ b/src/styles/components/ant-table.scss @@ -0,0 +1,75 @@ +.ant-table-wrapper { + .ant-spin-nested-loading, + .ant-spin-container, + .ant-table{ + height: 100%; + } + .ant-table { + border-radius: 0; + font-family: $font-family-regular; + @mixin table-cell-text { + color: var(--Text-1, #211f24); + font-family: $font-family-regular; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + } + .ant-table-container { + border: none !important; + height: 100%; + .ant-table-thead { + > tr { + .ant-table-cell { + padding: 13px 16px; + background: var(--BG-100, #f7f8fa); + border-start-start-radius: 0 !important; + border-start-end-radius: 0 !important; + @include table-cell-text; + font-family: 'PingFangSC-Medium'; + .ant-table-column-sorters { + justify-content: normal; + .ant-table-column-title { + flex: none; + } + .ant-table-column-sorter { + margin-left: 8px; + color: #939499; + line-height: normal; + .anticon.active { + color: $color-primary; + } + } + } + } + } + } + .ant-table-tbody { + .ant-table-row { + .ant-table-cell { + padding: 11px 16px; + @include table-cell-text; + } + } + } + } + } + .ant-table-bordered { + .ant-table-container { + .ant-table-thead { + .ant-table-cell { + border-inline-end: none !important ; + border-bottom: 1px solid var(--Border-1, #d7d7d9); + } + } + .ant-table-tbody { + .ant-table-row { + .ant-table-cell { + border-inline-end: none !important; + border-bottom: 1px solid var(--Border-1, #e6e6e8); + } + } + } + } + } +} diff --git a/src/styles/components/ant-tabs.scss b/src/styles/components/ant-tabs.scss new file mode 100644 index 0000000..5c41b64 --- /dev/null +++ b/src/styles/components/ant-tabs.scss @@ -0,0 +1,49 @@ +.ant-tabs { + .ant-tabs-nav { + margin-bottom: 0; + padding: 0 24px; + .ant-tabs-nav-wrap { + height: 40px; + .ant-tabs-nav-list { + .ant-tabs-tab { + .ant-tabs-tab-btn { + color: var(--Text-2, #55585f); + font-family: $font-family-regular; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 24px; + } + &.ant-tabs-tab-active { + .ant-tabs-tab-btn { + color: var(--Brand-6, #6d4cfe); + font-weight: 500; + font-family: $font-family-medium; + text-shadow: none; + } + } + } + .ant-tabs-ink-bar { + background: #6d4cfe; + } + } + } + } + .ant-tabs-content-holder { + display: none; + } + &.ant-tabs-small { + .ant-tabs-nav { + .ant-tabs-nav-wrap { + height: 32px; + } + } + } + &.ant-tabs-large { + .ant-tabs-nav { + .ant-tabs-nav-wrap { + height: 48px; + } + } + } +} diff --git a/src/styles/components/ant-tag.scss b/src/styles/components/ant-tag.scss new file mode 100644 index 0000000..addd554 --- /dev/null +++ b/src/styles/components/ant-tag.scss @@ -0,0 +1,4 @@ +.ant-tag{ + border-radius: 2px; + border: none; +} \ No newline at end of file diff --git a/src/styles/components/ant-textarea.scss b/src/styles/components/ant-textarea.scss new file mode 100644 index 0000000..42cd057 --- /dev/null +++ b/src/styles/components/ant-textarea.scss @@ -0,0 +1,5 @@ +.ant-input-textarea { + .ant-input { + padding: 8px 12px 4px 12px; + } +} diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss index 3f39bdf..471d603 100644 --- a/src/styles/components/index.scss +++ b/src/styles/components/index.scss @@ -4,10 +4,26 @@ @import './pagination.scss'; @import './tabs.scss'; @import './modal.scss'; -@import "./textarea.scss"; -@import "./select.scss"; -@import "./date-picker.scss"; -@import "./button.scss"; -@import "./steps.scss"; -@import "./form.scss"; -@import "./chat-sender.scss"; \ No newline at end of file +@import './textarea.scss'; +@import './select.scss'; +@import './date-picker.scss'; +@import './button.scss'; +@import './steps.scss'; +@import './form.scss'; +@import './chat-sender.scss'; + +@import './ant-modal.scss'; +@import './ant-radio.scss'; +@import './ant-form.scss'; +@import './ant-button.scss'; +@import './ant-table.scss'; +@import './ant-checkbox.scss'; +@import './ant-input.scss'; +@import './ant-textarea.scss'; +@import './ant-select.scss'; +@import './ant-tabs.scss'; +@import "./ant-notification.scss"; +@import "./ant-tag.scss"; +@import "./ant-switch.scss"; +@import "./ant-step.scss"; +@import "./ant-spin.scss"; \ No newline at end of file diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss index e112909..7c6cb9a 100644 --- a/src/styles/components/steps.scss +++ b/src/styles/components/steps.scss @@ -5,7 +5,7 @@ width: 28px; height: 28px; border-radius: 32px; - color: #3c4043; + color: #55585F; font-size: 16px; font-style: normal; font-weight: 500; @@ -16,7 +16,7 @@ } .arco-steps-item-content { .arco-steps-item-title { - color: #3c4043; + color: #55585F; font-family: $font-family-regular; font-size: 16px; font-style: normal;