Jelajahi Sumber

style: 统一 Ant Design 组件圆角为 8px,符合设计规范

Ryuiso 1 bulan lalu
induk
melakukan
9302c02dc2

+ 15 - 0
jk-rag-platform/src/components/common/FilterDrawer/index.scss

@@ -23,4 +23,19 @@
         flex-wrap: wrap;
         gap: $spacing-sm;  // 8px
     }
+
+    // Drawer footer buttons - follow global border radius specs
+    .ant-drawer-footer {
+        padding-top: $spacing-4;
+        padding-bottom: $spacing-4;
+
+        .ant-btn {
+            border-radius: $radius-lg;  // 8px - follow global specs
+            min-width: 64px;
+
+            &:first-child {
+                margin-right: $spacing-sm;
+            }
+        }
+    }
 }

+ 301 - 27
jk-rag-platform/src/styles/global.scss

@@ -201,43 +201,317 @@ ul li {
 }
 
 // 全局按钮样式
-.ant-btn-primary {
-    background: $primary-color;
-    border: 1px solid $primary-color;
-    color: #ffffff;
-    transition: $transition-base;
+.ant-btn {
+    border-radius: $radius-lg;  // 8px - follow global specs
+
+    &.ant-btn-primary {
+        background: $primary-color;
+        border: 1px solid $primary-color;
+        color: #ffffff;
+        transition: $transition-base;
+        box-shadow: $shadow-sm;
+
+        &:hover {
+            background: $primary-light;
+            border-color: $primary-light;
+            color: #ffffff;
+        }
+
+        &:active {
+            background: $primary-dark;
+            border-color: $primary-dark;
+            color: #ffffff;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+            transform: translateY(0);
+        }
+
+        &:focus {
+            background: $primary-color;
+            border-color: $primary-color;
+            color: #ffffff;
+            box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+        }
+
+        &:disabled {
+            background: $bg-tertiary;
+            border-color: $border-base;
+            color: $text-disabled;
+            box-shadow: none;
+            transform: none;
+        }
+    }
+}
+
+// 输入框组件
+.ant-input,
+.ant-input-affix-wrapper,
+.ant-input-number,
+.ant-input-password {
+    border-radius: $radius-lg !important;
+
+    &:hover,
+    &:focus {
+        border-color: $primary-color !important;
+    }
+}
+
+.ant-input-affix-wrapper-focused,
+.ant-input-affix-wrapper:focus {
+    border-color: $primary-color !important;
+    box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
+}
+
+// 下拉选择框
+.ant-select {
+    .ant-select-selector {
+        border-radius: $radius-lg !important;
+
+        &:hover,
+        &:focus {
+            border-color: $primary-color !important;
+        }
+    }
+
+    &.ant-select-focused .ant-select-selector {
+        border-color: $primary-color !important;
+        box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
+    }
+}
+
+// 下拉菜单
+.ant-select-dropdown,
+.ant-dropdown {
+    border-radius: $radius-lg !important;
+    box-shadow: $shadow-lg !important;
+}
+
+// 模态框
+.ant-modal {
+    border-radius: $radius-2xl !important;
+
+    .ant-modal-header {
+        border-radius: $radius-2xl $radius-2xl 0 0 !important;
+        border-bottom: 1px solid $border-base;
+    }
+
+    .ant-modal-footer {
+        border-top: 1px solid $border-base;
+
+        .ant-btn {
+            border-radius: $radius-lg;
+        }
+    }
+}
+
+// 抽屉
+.ant-drawer {
+    .ant-drawer-header {
+        border-bottom: 1px solid $border-base;
+    }
+
+    .ant-drawer-footer {
+        border-top: 1px solid $border-base;
+        border-radius: 0;
+
+        .ant-btn {
+            border-radius: $radius-lg;
+        }
+    }
+}
+
+// 表格
+.ant-table {
+    border-radius: $radius-lg !important;
+    overflow: hidden;
+
+    thead {
+        .ant-table-cell {
+            background: $bg-tertiary;
+            font-weight: $font-weight-semibold;
+            color: $text-primary;
+        }
+    }
+
+    tbody {
+        .ant-table-row {
+            &:hover {
+                background: $bg-hover !important;
+            }
+        }
+
+        .ant-table-cell {
+            border-bottom-color: $border-light;
+        }
+    }
+}
+
+// 卡片
+.ant-card {
+    border-radius: $radius-xl !important;
+    border: 1px solid $border-light !important;
     box-shadow: $shadow-sm;
-    
+
     &:hover {
-        background: $primary-light;
-        border-color: $primary-light;
-        color: #ffffff;
+        box-shadow: $shadow-md;
     }
-    
-    &:active {
-        background: $primary-dark;
-        border-color: $primary-dark;
-        color: #ffffff;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-        transform: translateY(0);
+
+    .ant-card-head {
+        border-radius: $radius-xl $radius-xl 0 0 !important;
+        font-weight: $font-weight-semibold;
     }
-    
+
+    .ant-card-body {
+        padding: $spacing-4;
+    }
+}
+
+// 标签
+.ant-tag {
+    border-radius: $radius-md !important;
+    padding: $spacing-1 $spacing-2;
+    font-size: $font-sm;
+
+    &.ant-tag-processing {
+        background: $tag-bg-blue !important;
+        color: $tag-text-blue !important;
+        border-color: transparent !important;
+    }
+
+    &.ant-tag-success {
+        background: $tag-bg-teal !important;
+        color: $tag-text-teal !important;
+        border-color: transparent !important;
+    }
+
+    &.ant-tag-warning {
+        background: $tag-bg-amber !important;
+        color: $tag-text-amber !important;
+        border-color: transparent !important;
+    }
+
+    &.ant-tag-error {
+        background: $tag-bg-rose !important;
+        color: $tag-text-rose !important;
+        border-color: transparent !important;
+    }
+}
+
+// 消息提示
+.ant-message {
+    .ant-message-notice-content {
+        border-radius: $radius-lg;
+        box-shadow: $shadow-lg;
+    }
+}
+
+// 通知
+.ant-notification-notice {
+    border-radius: $radius-lg !important;
+    box-shadow: $shadow-lg !important;
+}
+
+// 弹出框
+.ant-popover {
+    .ant-popover-inner {
+        border-radius: $radius-lg !important;
+        box-shadow: $shadow-lg !important;
+    }
+
+    .ant-popover-inner-content {
+        border-radius: $radius-lg;
+    }
+}
+
+// 工具提示
+.ant-tooltip {
+    .ant-tooltip-inner {
+        border-radius: $radius-md !important;
+        background: $text-primary;
+        padding: $spacing-2 $spacing-3;
+        font-size: $font-sm;
+    }
+}
+
+// 表单
+.ant-form-item-label > label {
+    font-weight: $font-weight-medium;
+    color: $text-primary;
+}
+
+// 单选框和复选框
+.ant-radio-wrapper,
+.ant-checkbox-wrapper {
+    font-size: $font-base;
+    color: $text-primary;
+}
+
+.ant-radio-inner,
+.ant-checkbox-inner {
+    border-radius: $radius-sm !important;
+}
+
+// 步骤条
+.ant-steps {
+    .ant-steps-item-icon {
+        border-radius: $radius-full !important;
+    }
+
+    .ant-steps-item-title {
+        font-weight: $font-weight-medium;
+    }
+}
+
+// 日期选择器
+.ant-picker {
+    border-radius: $radius-lg !important;
+
+    &:hover,
     &:focus {
-        background: $primary-color;
-        border-color: $primary-color;
-        color: #ffffff;
-        box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+        border-color: $primary-color !important;
     }
-    
-    &:disabled {
-        background: $bg-tertiary;
+
+    &.ant-picker-focused {
+        border-color: $primary-color !important;
+        box-shadow: 0 0 0 2px rgba($primary-color, 0.1) !important;
+    }
+}
+
+.ant-picker-panel-container {
+    border-radius: $radius-lg !important;
+}
+
+// 上传组件
+.ant-upload {
+    border-radius: $radius-lg !important;
+
+    &.ant-upload-drag {
+        border-radius: $radius-xl !important;
         border-color: $border-base;
-        color: $text-disabled;
-        box-shadow: none;
-        transform: none;
+
+        &:hover {
+            border-color: $primary-color !important;
+        }
+    }
+}
+
+// 列表
+.ant-list {
+    .ant-list-item {
+        border-radius: $radius-lg;
+        padding: $spacing-3 $spacing-4;
+
+        &:hover {
+            background: $bg-hover;
+        }
     }
 }
 
+// 分割线
+.ant-divider {
+    border-color: $border-light;
+    margin: $spacing-4 0;
+}
+
 // ==================== 排序按钮组 ====================
 .sort-buttons {
     border: 1px solid $border-base;