From 0941c7ec0e7428ed91987bb5bee723536c780f3d Mon Sep 17 00:00:00 2001 From: rd <1344903914@qq.com> Date: Wed, 24 Sep 2025 17:01:44 +0800 Subject: [PATCH] =?UTF-8?q?refactor(styles):=20=E7=A7=BB=E9=99=A4=E6=97=A7?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=B9=B6=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E5=88=86=E9=A1=B5=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 删除了多个已弃用的组件样式文件,包括按钮、复选框、日期选择器等- 移除了旧的样式导入路径,统一使用新的 Ant Design 组件样式 - 新增了 ant-pagination.scss 文件用于分页组件样式定义 - 更新了样式入口文件 index.scss,确保正确引入新样式- 清理了冗余的样式代码,优化了整体样式结构 --- src/styles/components/ant-pagination.scss | 7 + src/styles/components/button.scss | 187 ---------------------- src/styles/components/checkbox.scss | 31 ---- src/styles/components/date-picker.scss | 18 --- src/styles/components/form.scss | 25 --- src/styles/components/index.scss | 13 +- src/styles/components/input.scss | 22 --- src/styles/components/modal.scss | 28 ---- src/styles/components/pagination.scss | 57 ------- src/styles/components/select.scss | 18 --- src/styles/components/steps.scss | 47 ------ src/styles/components/table.scss | 66 -------- src/styles/components/tabs.scss | 29 ---- src/styles/components/textarea.scss | 18 --- 14 files changed, 8 insertions(+), 558 deletions(-) create mode 100644 src/styles/components/ant-pagination.scss delete mode 100644 src/styles/components/button.scss delete mode 100644 src/styles/components/checkbox.scss delete mode 100644 src/styles/components/date-picker.scss delete mode 100644 src/styles/components/form.scss delete mode 100644 src/styles/components/input.scss delete mode 100644 src/styles/components/modal.scss delete mode 100644 src/styles/components/pagination.scss delete mode 100644 src/styles/components/select.scss delete mode 100644 src/styles/components/steps.scss delete mode 100644 src/styles/components/table.scss delete mode 100644 src/styles/components/tabs.scss delete mode 100644 src/styles/components/textarea.scss diff --git a/src/styles/components/ant-pagination.scss b/src/styles/components/ant-pagination.scss new file mode 100644 index 0000000..90757bc --- /dev/null +++ b/src/styles/components/ant-pagination.scss @@ -0,0 +1,7 @@ +.pagination-row { + display: flex; + width: 100%; + padding: 12px 24px 0; + justify-content: flex-end; + align-items: center; +} diff --git a/src/styles/components/button.scss b/src/styles/components/button.scss deleted file mode 100644 index eb2c9cf..0000000 --- a/src/styles/components/button.scss +++ /dev/null @@ -1,187 +0,0 @@ -.arco-btn { - border-radius: 2px; - 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; - &.arco-btn-disabled { - border-color: #f2f3f5 !important; - color: #b1b2b5 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - border-color: #e6e6e8 !important; - color: #737478 !important; - } - } -} - -.arco-btn-primary { - background-color: $color-primary !important; - border-color: transparent !important; - color: #fff !important; - &.arco-btn-disabled { - color: #fff !important; - border-color: transparent !important; - background-color: $color-primary-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - color: #fff !important; - border-color: transparent !important; - background-color: $color-primary-5 !important; - } - } - - //success - &.arco-btn-status-success { - background-color: $color-success !important; - &.arco-btn-disabled { - background-color: $color-success-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - background-color: $color-success-5 !important; - } - } - } - - // danger - &.arco-btn-status-danger { - background-color: $color-error !important; - &.arco-btn-disabled { - background-color: $color-error-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - background-color: $color-error-5 !important; - } - } - } - - // warning - &.arco-btn-status-warning { - background-color: $color-warning !important; - &.arco-btn-disabled { - background-color: $color-warning-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - background-color: $color-warning-5 !important; - } - } - } -} - -.arco-btn-outline { - border: 1px solid $color-primary !important; - color: $color-primary !important; - &.arco-btn-disabled { - border-color: $color-primary-3 !important; - color: $color-primary-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - border-color: $color-primary-5 !important; - color: $color-primary-5 !important; - } - } - - &.arco-btn-status-success { - border: 1px solid $color-success !important; - color: $color-success !important; - &.arco-btn-disabled { - border-color: $color-success-3 !important; - color: $color-success-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - border-color: $color-success-5 !important; - color: $color-success-5 !important; - } - } - } - &.arco-btn-status-danger { - border: 1px solid $color-error !important; - color: $color-error !important; - &.arco-btn-disabled { - border-color: $color-error-3 !important; - color: $color-error-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - border-color: $color-error-5 !important; - color: $color-error-5 !important; - } - } - } - &.arco-btn-status-warning { - border: 1px solid $color-warning !important; - color: $color-warning !important; - &.arco-btn-disabled { - border-color: $color-warning-3 !important; - color: $color-warning-3 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - border-color: $color-warning-5 !important; - color: $color-warning-5 !important; - } - } - } -} - -.arco-btn-text { - background-color: transparent !important; - border-color: transparent !important; - color: $color-primary !important; - &.arco-btn-disabled { - color: $color-primary-2 !important; - border-color: transparent !important; - } - &:not(.arco-btn-disabled) { - &:hover { - color: $color-primary-5 !important; - border-color: transparent !important; - } - } - - &.arco-btn-status-success { - color: $color-success !important; - &.arco-btn-disabled { - color: $color-success-2 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - color: $color-success-5 !important; - } - } - } - - &.arco-btn-status-danger { - color: $color-error !important; - &.arco-btn-disabled { - color: $color-error-2 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - color: $color-error-5 !important; - } - } - } - - &.arco-btn-status-warning { - color: $color-warning !important; - &.arco-btn-disabled { - color: $color-warning-2 !important; - } - &:not(.arco-btn-disabled) { - &:hover { - color: $color-warning-5 !important; - } - } - } -} diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss deleted file mode 100644 index b988e77..0000000 --- a/src/styles/components/checkbox.scss +++ /dev/null @@ -1,31 +0,0 @@ -.arco-checkbox { - .arco-checkbox-icon { - width: 16px; - height: 16px; - border-color: #d7d7d9; - } - &.arco-checkbox-disabled { - .arco-checkbox-icon { - background-color: #f2f3f5; - border-color: #d7d7d9; - } - &.arco-checkbox-checked { - .arco-checkbox-icon { - background-color: #a794fe !important; - } - } - &.arco-checkbox-indeterminate { - .arco-checkbox-icon { - border: none; - background-color: #a794fe !important; - } - } - } - &.arco-checkbox-checked, - &.arco-checkbox-indeterminate { - .arco-checkbox-icon { - background-color: #6D4CFE !important; - border: none; - } - } -} diff --git a/src/styles/components/date-picker.scss b/src/styles/components/date-picker.scss deleted file mode 100644 index 568a2ce..0000000 --- a/src/styles/components/date-picker.scss +++ /dev/null @@ -1,18 +0,0 @@ -.arco-picker { - border-radius: 4px !important; - border-color: #d7d7d9 !important; - background-color: #fff !important; - &:hover { - background-color: #fff !important; - } - &:focus-within, - &.arco-input-focus, - &.arco-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; - } - &.arco-picker-disabled { - background-color: var(--BG-200, #F2F3F5) !important; - } -} diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss deleted file mode 100644 index 0457555..0000000 --- a/src/styles/components/form.scss +++ /dev/null @@ -1,25 +0,0 @@ -.arco-form { - .arco-form-item { - margin-bottom: 0; - &:not(:last-child) { - margin-bottom: 16px !important; - } - .arco-form-item-label-col { - padding-right: 12px !important; - .arco-form-item-label { - color: #211f24; - font-family: $font-family-regular; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - .arco-form-item-label-required-symbol { - color: #f64b31; - margin-right: 4px; - font-size: 14px; - font-family: $font-family-regular; - } - } - } - } -} diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss index 7ad1b65..8a3420a 100644 --- a/src/styles/components/index.scss +++ b/src/styles/components/index.scss @@ -1,15 +1,3 @@ -@import './input.scss'; -@import './table.scss'; -@import './checkbox.scss'; -@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'; @import './ant-modal.scss'; @@ -28,3 +16,4 @@ @import "./ant-step.scss"; @import "./ant-spin.scss"; @import "./ant-drawer.scss"; +@import "./ant-pagination.scss"; diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss deleted file mode 100644 index 4e81891..0000000 --- a/src/styles/components/input.scss +++ /dev/null @@ -1,22 +0,0 @@ -.arco-input-wrapper { - border-radius: 4px !important; - border-color: #d7d7d9 !important; - background-color: #fff !important; - &:hover { - background-color: #fff !important; - } - &:focus-within, - &.arco-input-focus, - &.arco-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; - } - &.arco-input-disabled { - background-color: var(--BG-200, #F2F3F5) !important; - } - .arco-input-prefix { - padding-right: 0 !important; - margin-right: 4px; - } -} diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss deleted file mode 100644 index 1e63dc4..0000000 --- a/src/styles/components/modal.scss +++ /dev/null @@ -1,28 +0,0 @@ -.ant-modal { - .ant-modal-header { - border-bottom: 1px solid var(--Border-1, #d7d7d9); - height: 56px; - padding: 0 20px; - .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 { - display: flex; - height: 64px; - padding: 0px 20px; - justify-content: flex-end; - align-items: center; - border-top: 1px solid var(--Border-1, #d7d7d9); - } -} diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss deleted file mode 100644 index 44ecf3d..0000000 --- a/src/styles/components/pagination.scss +++ /dev/null @@ -1,57 +0,0 @@ -.arco-pagination { - .arco-pagination-list { - .arco-pagination-item { - border-radius: 4px; - border: 1px solid var(--BG-300, #e6e6e8); - font-family: $font-family-manrope-regular; - &-ellipsis { - border: none; - } - - &-active { - background-color: transparent; - border: 1px solid var(--Brand-Brand-6, #6d4cfe); - } - } - } - .arco-pagination-options { - .arco-select { - background-color: transparent !important; - border-radius: 4px; - border: 1px solid var(--BG-300, #e6e6e8); - } - } - .arco-pagination-jumper { - &-input { - border-radius: 4px; - border: 1px solid var(--BG-300, #e6e6e8); - } - &-prepend { - color: var(--Text-2, #55585f); - text-align: right; - font-family: $font-family-regular; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - } - .arco-input-wrapper { - background-color: transparent !important; - } - } - .arco-pagination-total { - color: var(--Text-2, #55585f); - font-family: $font-family-regular; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 22px; - } -} -.pagination-row { - display: flex; - width: 100%; - padding: 12px 24px 0; - justify-content: flex-end; - align-items: center; -} diff --git a/src/styles/components/select.scss b/src/styles/components/select.scss deleted file mode 100644 index 81f20c1..0000000 --- a/src/styles/components/select.scss +++ /dev/null @@ -1,18 +0,0 @@ -.arco-select { - border-radius: 4px !important; - border-color: #d7d7d9 !important; - background-color: #fff !important; - &:hover { - background-color: #fff !important; - } - &:focus-within, - &.arco-input-focus, - &.arco-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; - } - &.arco-select-view-disabled { - background-color: var(--BG-200, #F2F3F5) !important; - } -} diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss deleted file mode 100644 index 7c6cb9a..0000000 --- a/src/styles/components/steps.scss +++ /dev/null @@ -1,47 +0,0 @@ -.arco-steps { - .arco-steps-item { - .arco-steps-item-node { - .arco-steps-icon { - width: 28px; - height: 28px; - border-radius: 32px; - color: #55585F; - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 24px; - font-family: $font-family-manrope-medium; - background-color: #f2f3f5; - } - } - .arco-steps-item-content { - .arco-steps-item-title { - color: #55585F; - font-family: $font-family-regular; - font-size: 16px; - font-style: normal; - font-weight: 400; - &::after { - background-color: #e6e6e8 !important; - } - } - } - &-active, - &-finish { - .arco-steps-item-node { - .arco-steps-icon { - color: #fff; - background-color: #6d4cfe; - } - } - .arco-steps-item-content { - .arco-steps-item-title { - font-family: $font-family-medium; - &::after { - background-color: #6d4cfe !important; - } - } - } - } - } -} diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss deleted file mode 100644 index e027362..0000000 --- a/src/styles/components/table.scss +++ /dev/null @@ -1,66 +0,0 @@ -.arco-table { - @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; - } - .arco-table-container { - border: none !important; - height: 100%; - .arco-table-element { - thead { - .arco-table-tr { - .arco-table-th { - border-bottom: 1px solid var(--Border-1, #d7d7d9); - background: var(--BG-100, #f7f8fa); - .arco-table-cell { - padding: 13px 16px; - .arco-table-th-title { - @include table-cell-text; - font-family: 'PingFangSC-Medium'; - } - .arco-table-sorter { - .arco-table-sorter-icon { - .arco-icon { - color: #939499; - } - &-active { - .arco-icon { - color: $color-primary; - } - } - } - } - } - } - } - } - tbody { - .arco-table-tr { - .arco-table-td { - .arco-table-cell { - padding: 13px 16px; - .arco-table-cell-content, - .arco-table-td-content { - @include table-cell-text; - } - } - } - } - } - } - .arco-scrollbar { - display: flex; - flex-direction: column; - .arco-table-element { - height: 100%; - } - .arco-scrollbar-container{ - flex: 1; - } - } - } -} diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss deleted file mode 100644 index 1e15683..0000000 --- a/src/styles/components/tabs.scss +++ /dev/null @@ -1,29 +0,0 @@ -.arco-tabs { - .arco-tabs-nav-tab { - &-list { - .arco-tabs-tab { - .arco-tabs-tab-title { - color: var(--Text-2, #3c4043); - font-family: $font-family-medium; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: 24px; - } - &-active { - .arco-tabs-tab-title { - color: #6d4cfe; - } - } - &:hover { - .arco-tabs-tab-title::before { - display: none; - } - } - } - .arco-tabs-nav-ink { - background-color: #6d4cfe; - } - } - } -} diff --git a/src/styles/components/textarea.scss b/src/styles/components/textarea.scss deleted file mode 100644 index 7b8408a..0000000 --- a/src/styles/components/textarea.scss +++ /dev/null @@ -1,18 +0,0 @@ -.arco-textarea-wrapper { - border-radius: 4px !important; - border-color: #d7d7d9 !important; - background-color: #fff !important; - &:hover { - background-color: #fff !important; - } - &:focus-within, - &.arco-input-focus, - &.arco-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; - } - &.arco-textarea-disabled { - background-color: var(--BG-200, #F2F3F5) !important; - } -}