Skip to content

Commit 97e30a8

Browse files
wangcodewangcode
committed
add some
1 parent 91d9e9a commit 97e30a8

File tree

22 files changed

+898
-810
lines changed

22 files changed

+898
-810
lines changed

‎.editorconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
root = true
2-
2+
33
[*]
44
end_of_line = lf
55
insert_final_newline = true

‎src/components/Base/Button/index.module.scss

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
color: #fff;
4343
border-color: #74d769;
4444
}
45-
.cheese{
45+
.cheese {
4646
background-color: #feedcd;
4747
color: #ffa800;
4848
border-color: #feedcd;
@@ -53,10 +53,21 @@
5353
background-image: linear-gradient(to right, #f98b4f, #f7cd3d);
5454
}
5555

56-
.bordered{
56+
.bordered {
5757
border-width: 1px;
5858
}
5959

60-
.children{
60+
.children {
6161
flex: 1;
62-
}
62+
}
63+
64+
.loading {
65+
position: absolute;
66+
left: 0;
67+
top: 0;
68+
width: 100%;
69+
height: 100%;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
}

‎src/components/Base/Button/index.tsx

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,74 @@ import React, { CSSProperties } from "react";
66
import styles from './index.module.scss';
77

88
export interface ButtonSizeType {
9-
small: CSSProperties,
10-
middle: CSSProperties,
11-
xm: CSSProperties,
12-
large: CSSProperties
9+
small: CSSProperties,
10+
middle: CSSProperties,
11+
xm: CSSProperties,
12+
large: CSSProperties
1313
}
1414

1515
export const ButtonSize: ButtonSizeType = {
16-
small: {
17-
borderRadius: "10px",
18-
height: "22px",
19-
padding: "0px 14px",
20-
fontSize: "11px"
21-
},
22-
middle: {
23-
height: "30px",
24-
borderRadius: "15px",
25-
// padding: "0px 35px",
26-
minWidth: "100px"
27-
},
28-
xm: {
29-
height: "40px",
30-
borderRadius: "25px",
31-
// padding: "0px 35px",
32-
minWidth: "115px"
33-
},
34-
large: {
35-
height: "45px",
36-
borderRadius: "18px",
37-
fontSize: "16px",
38-
minWidth: "160px"
39-
}
16+
small: {
17+
borderRadius: "10px",
18+
height: "22px",
19+
padding: "0px 10px",
20+
fontSize: "11px"
21+
},
22+
middle: {
23+
height: "30px",
24+
borderRadius: "15px",
25+
// padding: "0px 35px",
26+
minWidth: "100px"
27+
},
28+
xm: {
29+
height: "40px",
30+
borderRadius: "25px",
31+
// padding: "0px 35px",
32+
minWidth: "115px"
33+
},
34+
large: {
35+
height: "45px",
36+
borderRadius: "18px",
37+
fontSize: "16px",
38+
minWidth: "160px"
39+
}
4040
}
4141

4242
export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
43-
icon?: React.ReactNode;
44-
size?: keyof typeof ButtonSize;
45-
loading?: boolean;
46-
theme?: "success" | "default" | "hot" | "cheese";
47-
border?: boolean;
48-
disabled?: boolean;
43+
icon?: React.ReactNode;
44+
size?: keyof typeof ButtonSize;
45+
loading?: boolean;
46+
theme?: "success" | "default" | "hot" | "cheese";
47+
border?: boolean;
48+
disabled?: boolean;
4949
}
5050

5151

5252
const Button: React.FC<ButtonProps> = ({ size = "middle", theme = "default", icon, disabled, loading, border = true, children, ...props }) => {
5353

54-
const themeClassName = styles[theme]
54+
const themeClassName = styles[theme]
5555

56-
return (
57-
<button
58-
disabled={loading || disabled}
59-
className={classNames(
60-
styles.resetButton,
61-
themeClassName,
62-
{
63-
[styles.bordered]: border,
64-
[styles.disabled]: disabled
65-
}
66-
)}
67-
style={{ ...ButtonSize[size] }}
68-
{...props}
69-
>
70-
<Space>
71-
{loading ? <LoadingOutlined spin /> : null}
72-
{icon ? <div>{icon}</div> : null}
73-
<div className={styles.children}>{children}</div>
74-
</Space>
75-
</button>
76-
)
56+
return (
57+
<button
58+
disabled={loading || disabled}
59+
className={classNames(
60+
styles.resetButton,
61+
themeClassName,
62+
{
63+
[styles.bordered]: border,
64+
[styles.disabled]: disabled
65+
}
66+
)}
67+
style={{ ...ButtonSize[size] }}
68+
{...props}
69+
>
70+
<Space>
71+
{loading ? <div className={styles.loading}><LoadingOutlined spin /></div> : null}
72+
{icon ? <div>{icon}</div> : null}
73+
<div className={styles.children}>{children}</div>
74+
</Space>
75+
</button>
76+
)
7777

7878
}
7979

‎src/components/FloatComponents/index.tsx

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,73 +9,78 @@ import { Badge, Space } from 'antd';
99
import styles from './index.module.scss';
1010
import classNames from 'classnames';
1111
import { useHistory } from 'react-router';
12+
import SelfDetailPanel from 'components/Panels/SelfDetailPanel';
13+
import { useState } from 'react';
1214

1315
interface ToggleButtonProps {
14-
value: "team"|"person";
15-
onChange: (value: "team"|"person") => void;
16-
shadow?: boolean;
16+
value: "team" | "person";
17+
onChange: (value: "team" | "person") => void;
18+
shadow?: boolean;
1719
}
1820

1921
export const ToggleButton: React.FC<ToggleButtonProps> = ({ value, onChange, shadow }) => {
2022

21-
return (
22-
<div
23-
className={classNames(
24-
styles.toggleButton,
25-
{[styles.shadow]: shadow}
26-
)}
27-
onClick={() => onChange(value==="person"?"team":"person")} >
28-
<img src={value==="person" ? PersonToggleIcon : GroupToggleIcon} alt="person_group_toggle" />
29-
<div>切换</div>
30-
</div>
31-
)
23+
return (
24+
<div
25+
className={classNames(
26+
styles.toggleButton,
27+
{ [styles.shadow]: shadow }
28+
)}
29+
onClick={() => onChange(value === "person" ? "team" : "person")} >
30+
<img src={value === "person" ? PersonToggleIcon : GroupToggleIcon} alt="person_group_toggle" />
31+
<div>切换</div>
32+
</div>
33+
)
3234

3335
}
3436

3537
interface AvatarBoxProps {
36-
avatar: string;
37-
name?: string;
38-
number?: string;
39-
score?: string;
40-
shadow?: boolean;
38+
avatar?: string;
39+
name?: string;
40+
number?: string;
41+
score?: string;
42+
shadow?: boolean;
4143
}
4244

4345
export const AvatarBox: React.FC<AvatarBoxProps> = (props) => {
4446

45-
return (
46-
<div
47-
className={classNames(
48-
styles.avatarBox,
49-
{[styles.shadow]: props.shadow}
50-
)}
51-
>
52-
<div className={styles.avatar}><Avatar src={props.avatar} >{props.name}</Avatar></div>
53-
{props.score && <div className={styles.text}>{props.score}</div>}
54-
{(props.name||props.number) && <Space>
55-
{props.name && <div className={styles.text}>{props.name}</div>}
56-
{props.number && <div className={styles.ext}>当前 <span>{props.number}</span></div>}
57-
</Space>}
58-
</div>
59-
)
47+
const [visible, setVisible] = useState(false)
48+
49+
return (
50+
<div
51+
className={classNames(
52+
styles.avatarBox,
53+
{ [styles.shadow]: props.shadow }
54+
)}
55+
>
56+
<div className={styles.avatar} onClick={() => setVisible(true)}><Avatar src={props.avatar} >{props.name}</Avatar></div>
57+
{props.score && <div className={styles.text}>{props.score}</div>}
58+
{(props.name || props.number) && <Space>
59+
{props.name && <div className={styles.text}>{props.name}</div>}
60+
{props.number && <div className={styles.ext}>当前 <span>{props.number}</span></div>}
61+
</Space>}
62+
<SelfDetailPanel height="230px" visible={visible} onClose={() => setVisible(false)} />
63+
</div>
64+
)
6065

6166
}
6267

6368
interface GetPointButtonProps {
64-
dot?: boolean;
65-
shadow?: boolean;
69+
dot?: boolean;
70+
shadow?: boolean;
6671
}
6772

6873
export const GetPointButton: React.FC<GetPointButtonProps> = (props) => {
69-
const history = useHistory()
70-
return (
71-
<div onClick={() => history.push("/points")} className={classNames(
72-
styles.getPoint,
73-
{[styles.shadow]: props.shadow}
74-
)}>
75-
<Badge dot={props.dot} className={styles.inner}>
76-
<img src={CoinIcon} alt="coin" />
77-
<div>领积分</div>
78-
</Badge>
79-
</div>
80-
)
81-
}
74+
const history = useHistory()
75+
return (
76+
<div onClick={() => history.push("/points")} className={classNames(
77+
styles.getPoint,
78+
{ [styles.shadow]: props.shadow }
79+
)}>
80+
<Badge dot={props.dot} className={styles.inner}>
81+
<img src={CoinIcon} alt="coin" />
82+
<div>领积分</div>
83+
</Badge>
84+
</div>
85+
)
86+
}

‎src/components/FollowButton/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ export const FollowTeamUserButton: React.FC<FollowTeamUserButtonProps> = ({ foll
136136
}
137137
}
138138

139-
if (!follow) return <img onClick={handleOnClick} src={FavIcon} alt="FavBtn" />
139+
if (!follow) return <div style={{ width: "74px", textAlign: "center" }}><img onClick={handleOnClick} src={FavIcon} alt="FavBtn" /></div>
140140

141141
return (
142142
<Button

0 commit comments

Comments
 (0)