style: 修改公共组件样式

react-ui/src/components/KFIcon/index.tsx

@@ -17,15 +17,16 @@ interface KFIconProps extends IconFontProps {
   font?: number;
   color?: string;
   style?: React.CSSProperties;
+  className?: string;
 }
 
-function KFIcon({ type, font = 15, color = '', style = {} }: KFIconProps) {
+function KFIcon({ type, font = 15, color = '', style = {}, className }: KFIconProps) {
   const iconStyle = {
     ...style,
     fontSize: font,
     color,
   };
-  return <Icon type={type} style={iconStyle} />;
+  return <Icon type={type} className={className} style={iconStyle} />;
 }
 
 export default KFIcon;

react-ui/src/components/KFModal/index.less

@@ -2,10 +2,9 @@
   .ant-modal-content {
     padding: 20px 67px;
     background-image: url(/assets/images/modal-back.png);
-background-repeat:no-repeat;
-background-size:100%;
-background-position: top center;
-    // background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%);
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: 100%;
     border-radius: 21px;
   }
   .ant-modal-header {

react-ui/src/components/KFModal/index.tsx

@@ -5,31 +5,22 @@
  */
 
 import ModalTitle from '@/components/ModalTitle';
-import { ConfigProvider, Modal, theme, type ModalProps } from 'antd';
+import { Modal, type ModalProps } from 'antd';
 import classNames from 'classnames';
-import { useAntdConfig } from 'umi';
 import './index.less';
 
-const { useToken } = theme;
-
 export interface KFModalProps extends ModalProps {
   image: string;
 }
 function KFModal({ title, image, children, className = '', ...rest }: KFModalProps) {
-  const { token } = useToken();
-  console.log('token', token);
-  const antdConfig = useAntdConfig();
-  console.log('antdConfig', antdConfig);
   return (
-    <ConfigProvider {...antdConfig}>
-      <Modal
-        className={classNames(['kf-modal', className])}
-        {...rest}
-        title={<ModalTitle title={title} image={image}></ModalTitle>}
-      >
-        {children}
-      </Modal>
-    </ConfigProvider>
+    <Modal
+      className={classNames(['kf-modal', className])}
+      {...rest}
+      title={<ModalTitle title={title} image={image}></ModalTitle>}
+    >
+      {children}
+    </Modal>
   );
 }
 

react-ui/src/components/KFRadio/index.tsx

@@ -16,12 +16,14 @@ export type KFRadioItem = {
 type KFRadioProps = {
   items: KFRadioItem[];
   value?: string;
+  style?: React.CSSProperties;
+  className?: string;
   onChange?: (value: string) => void;
 };
 
-function KFRadio({ items, value, onChange }: KFRadioProps) {
+function KFRadio({ items, value, style, className, onChange }: KFRadioProps) {
   return (
-    <span className={'kf-radio'}>
+    <span className={classNames('kf-radio', className)} style={style}>
       {items.map((item) => {
         return (
           <span

react-ui/src/components/KFTabs/index.less

@@ -1,2 +0,0 @@
-.tabs-container {
-}

react-ui/src/components/KFTabs/index.tsx

@@ -1,16 +0,0 @@
-// import { Tabs } from 'antd';
-// import { useEffect, useState } from 'react';
-// import styles from './index.less';
-
-// function KFTabs() {
-//   const [iframeUrl, setIframeUrl] = useState('');
-//   useEffect(() => {}, []);
-
-//   return (
-//     <div className={styles}>
-//       <Tabs></Tabs>
-//     </div>
-//   );
-// }
-
-// export default KFTabs;

react-ui/src/components/ModalTitle/index.less

@@ -1,11 +1,11 @@
-.modal_title {
+.modal-title {
   display: flex;
   align-items: center;
   color: @primary-color;
   font-weight: 400;
   font-size: 20px;
 
-  &_image {
+  &__image {
     width: 22px;
     margin-right: 10px;
   }

react-ui/src/components/ModalTitle/index.tsx

@@ -1,15 +1,18 @@
+import classNames from 'classnames';
 import React from 'react';
 import styles from './index.less';
 
 type ModalTitleProps = {
   title: React.ReactNode;
   image?: string;
+  style?: React.CSSProperties;
+  className?: string;
 };
 
-function ModalTitle({ title, image }: ModalTitleProps) {
+function ModalTitle({ title, image, style, className }: ModalTitleProps) {
   return (
-    <div className={styles.modal_title}>
-      <img className={styles.modal_title_image} src={image} alt="" />
+    <div className={classNames(styles['modal-title'], className)} style={style}>
+      <img className={styles['modal-title__image']} src={image} alt="" />
       {title}
     </div>
   );

react-ui/src/components/SubAreaTitle/index.tsx

@@ -4,17 +4,19 @@
  * @Description: 分区标题
  */
 
+import classNames from 'classnames';
 import './index.less';
 
 type SubAreaTitleProps = {
   title: string;
   image: string;
   style?: React.CSSProperties;
+  className?: string;
 };
 
-function SubAreaTitle({ title, image, style }: SubAreaTitleProps) {
+function SubAreaTitle({ title, image, style, className }: SubAreaTitleProps) {
   return (
-    <div className={'kf-subarea-title'} style={style}>
+    <div className={classNames('kf-subarea-title', className)} style={style}>
       <img src={image} width={14} />
       <span style={{ marginLeft: '8px' }}>{title}</span>
     </div>

react-ui/src/global.less

@@ -151,7 +151,7 @@ body {
   height: 46px;
   padding: 1px 11px;
 }
-.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper{
+.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
   padding: 0;
 }
 .ant-modal .ant-select-single {
@@ -160,15 +160,26 @@ body {
 .ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
   line-height: 46px;
 }
-.ant-menu-light.ant-menu-inline .ant-menu-item{
-  color:#575757;
+.ant-menu-light.ant-menu-inline .ant-menu-item {
+  color: #575757;
 }
 .ant-modal .ant-modal-close-x {
   width: 26px;
   height: 26px;
-  color: #272536;
-  border: 2px solid #272536;
+  color: @text-color-secondary;
+  border: 2px solid @text-color-secondary;
   border-radius: 50%;
+
+  &:hover {
+    color: #272536;
+    border: 2px solid #272536;
+  }
+}
+.ant-modal .ant-modal-close:hover {
+  background-color: transparent;
+}
+.ant-modal .ant-modal-close:active {
+  background-color: transparent;
 }
 .ant-modal-content {
   margin-top: 50px;
@@ -188,9 +199,6 @@ body {
 .ant-modal .ant-modal-content {
   border-radius: 20px;
 }
-.ant-modal .ant-modal-close:hover {
-  background-color: transparent;
-}
 .ant-modal .ant-modal-footer > .ant-btn + .ant-btn {
   margin-left: 20px;
 }
@@ -211,22 +219,18 @@ body {
   border: 1px solid #e6e6e6;
 }
 
-// ::-webkit-scrollbar-button {
-//   background: #97a1bd;
-// }
 ::-webkit-scrollbar {
-  width: 9px;
-  border-radius: 2px;
+  width: 8px;
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  // background-color: #9aa3bc!important;
-  width: 7px;
-  background: rgba(77, 87, 123, 0.5) !important;
+  width: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 99px;
 }
 ::-webkit-scrollbar-track {
-  // background-color: #eaf1ff!important;
-  width: 9px;
-  background: rgba(22, 100, 255, 0.06) !important;
+  width: 8px;
+  background: transparent;
 }
 ul,
 ol {