Skip to content

Commit c243327

Browse files
AarebeccaAarebecca
committed
refactor(site): wip
1 parent 0949f73 commit c243327

3 files changed

Lines changed: 169 additions & 31 deletions

File tree

‎packages/site/docs/examples/index.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22

33
> Coming soon...
44
5-
import Infographic from '@site/src/components/Infographic';
5+
import Gallery from '@site/src/components/Gallery';
66

7-
<Infographic options={{
8-
template: 'sequence-horizontal-zigzag-simple'
9-
}}
10-
data="list"
11-
/>
7+
<Gallery />

‎packages/site/src/components/Gallery.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { getTemplates } from '@antv/infographic';
2+
import Infographic from './Infographic';
3+
4+
// registerResourceLoader(async (config) => {
5+
// const { data } = config;
6+
// const [type, id] = data.split(':');
7+
8+
// if (type === 'icon') {
9+
// const res = await fetch(`https://api.iconify.design/${id}.svg`).then(
10+
// (res) => res.text(),
11+
// );
12+
// return loadSVGResource(res);
13+
// } else if (type === 'illus') {
14+
// // from: https://github.com/balazser/undraw-svg-collection
15+
// const rest = await fetch(
16+
// `https://raw.githubusercontent.com/balazser/undraw-svg-collection/refs/heads/main/svgs/${id}.svg`,
17+
// ).then((res) => res.text());
18+
// return loadSVGResource(rest);
19+
// }
20+
// });
21+
22+
const containerStyle: React.CSSProperties = {
23+
display: 'grid',
24+
gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
25+
gap: '24px',
26+
padding: '20px 0',
27+
};
28+
29+
const cardStyle: React.CSSProperties = {
30+
position: 'relative',
31+
backgroundColor: '#ffffff',
32+
borderRadius: '12px',
33+
border: '1px solid #e8e8e8',
34+
overflow: 'hidden',
35+
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
36+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
37+
cursor: 'pointer',
38+
};
39+
40+
const cardHoverStyle = {
41+
transform: 'translateY(-4px)',
42+
boxShadow: '0 12px 24px rgba(0, 0, 0, 0.12)',
43+
borderColor: '#d0d0d0',
44+
};
45+
46+
const contentStyle: React.CSSProperties = {
47+
height: '300px',
48+
padding: '16px',
49+
display: 'flex',
50+
alignItems: 'center',
51+
justifyContent: 'center',
52+
backgroundColor: '#fafafa',
53+
overflow: 'hidden',
54+
};
55+
56+
const infographicWrapperStyle: React.CSSProperties = {
57+
width: '100%',
58+
height: '100%',
59+
display: 'flex',
60+
alignItems: 'center',
61+
justifyContent: 'center',
62+
};
63+
64+
const labelStyle: React.CSSProperties = {
65+
padding: '12px 16px',
66+
fontSize: '14px',
67+
fontWeight: 500,
68+
color: '#262626',
69+
backgroundColor: '#ffffff',
70+
borderTop: '1px solid #f0f0f0',
71+
textAlign: 'center',
72+
letterSpacing: '0.3px',
73+
};
74+
75+
export default () => {
76+
const templates = getTemplates();
77+
const dataKeys = ['list', 'hierarchy', 'compare', 'swot'];
78+
const dataFallbackMap = {
79+
sequence: 'list',
80+
};
81+
82+
return (
83+
<div style={containerStyle}>
84+
{templates.map((key) => {
85+
const d = key.split('-')[0];
86+
return (
87+
<div
88+
key={key}
89+
style={cardStyle}
90+
onMouseEnter={(e) => {
91+
Object.assign(e.currentTarget.style, cardHoverStyle);
92+
}}
93+
onMouseLeave={(e) => {
94+
e.currentTarget.style.transform = '';
95+
e.currentTarget.style.boxShadow = cardStyle.boxShadow || '';
96+
e.currentTarget.style.borderColor = cardStyle.borderColor || '';
97+
}}
98+
>
99+
<div style={contentStyle}>
100+
<div style={infographicWrapperStyle}>
101+
<Infographic
102+
options={{ template: key }}
103+
data={
104+
dataKeys.includes(d)
105+
? d
106+
: dataFallbackMap[d] || dataFallbackMap[key] || 'list'
107+
}
108+
/>
109+
</div>
110+
</div>
111+
<div style={labelStyle}>{key}</div>
112+
</div>
113+
);
114+
})}
115+
</div>
116+
);
117+
};

‎packages/site/src/components/Infographic.tsx‎

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,32 @@ export default ({
2424
instanceRef.current = instance;
2525
}, [options]);
2626

27-
return <div ref={ref} style={{ width: '100%', height: '100%' }} />;
27+
return (
28+
<>
29+
<style>
30+
{`
31+
.infographic-container svg {
32+
max-width: 100%;
33+
max-height: 100%;
34+
width: auto;
35+
height: auto;
36+
object-fit: contain;
37+
}
38+
`}
39+
</style>
40+
<div
41+
ref={ref}
42+
className="infographic-container"
43+
style={{
44+
width: '100%',
45+
height: '100%',
46+
display: 'flex',
47+
alignItems: 'center',
48+
justifyContent: 'center',
49+
}}
50+
/>
51+
</>
52+
);
2853
};
2954

3055
const DATA: Record<string, Data> = {
@@ -33,60 +58,60 @@ const DATA: Record<string, Data> = {
3358
desc: '整合数据资产，构建标签画像体系，赋能数字化运营之路',
3459
items: [
3560
{
36-
icon: 'company-021_v1_lineal',
61+
icon: 'icon:mingcute/apple-fill',
3762
label: '企业形象优势',
3863
desc: '产品优势详细说明产品优势详细说明',
3964
value: 80,
4065
time: '2018',
41-
illus: 'illus:english-teacher-bro-8693',
66+
illus: 'illus:beer',
4267
},
4368
{
44-
icon: 'antenna-bars-5_v1_lineal',
69+
icon: 'icon:mingcute/bear-fill',
4570
label: '综合实力优势',
4671
desc: '产品优势详细说明产品优势详细说明',
4772
value: 70,
4873
time: '2019',
49-
illus: 'illus:teacher-student-rafiki-9049',
74+
illus: 'illus:best-place',
5075
},
5176
{
52-
icon: 'achievment-050_v1_lineal',
77+
icon: 'icon:mingcute/bell-ringing-fill',
5378
label: '企业营销优势',
5479
desc: '产品优势详细说明产品优势详细说明',
5580
value: 90,
5681
time: '2020',
57-
illus: 'illus:mathematics-cuate-7503',
82+
illus: 'illus:blank-canvas',
5883
},
5984
{
60-
icon: '3d-file-015_v1_lineal',
85+
icon: 'icon:mingcute/bowknot-fill',
6186
label: '产品定位优势',
6287
desc: '产品优势详细说明产品优势详细说明',
6388
value: 60,
6489
time: '2021',
65-
illus: 'illus:teacher-student-rafiki-9049',
90+
illus: 'illus:breakfast',
6691
},
6792
{
68-
icon: 'activities-037_v1_lineal',
93+
icon: 'icon:mingcute/camera-2-ai-fill',
6994
label: '产品体验优势',
7095
desc: '产品优势详细说明产品优势详细说明',
7196
value: 80,
7297
time: '2022',
73-
illus: 'illus:english-teacher-bro-8693',
98+
illus: 'illus:building-websites',
7499
},
75100
{
76-
icon: 'account-book-025_v1_lineal',
101+
icon: 'icon:mingcute/car-fill',
77102
label: '制造成本优势',
78103
desc: '产品优势详细说明产品优势详细说明',
79104
value: 90,
80105
time: '2023',
81-
illus: 'illus:mathematics-cuate-7503',
106+
illus: 'illus:bus-stop',
82107
},
83108
{
84-
icon: 'account-book-025_v1_lineal',
109+
icon: 'icon:mingcute/compass-fill',
85110
label: '制造成本优势',
86111
desc: '产品优势详细说明产品优势详细说明',
87112
value: 97,
88113
time: '2024',
89-
illus: 'illus:english-teacher-bro-8693',
114+
illus: 'illus:by-the-road',
90115
},
91116
],
92117
},
@@ -97,50 +122,50 @@ const DATA: Record<string, Data> = {
97122
{
98123
label: '用户调研',
99124
// desc: '通过用户调研，了解用户需求和痛点，指导产品设计和优化',
100-
icon: '3d-file-015_v1_lineal',
125+
icon: 'icon:mingcute/diamond-2-fill',
101126
children: [
102127
{
103128
label: '用户为什么要使用某个音乐平台',
104129
desc: '用户为什么要使用某个音乐平台',
105-
icon: 'company-021_v1_lineal',
130+
icon: 'icon:mingcute/apple-fill',
106131
children: [
107132
{
108133
label: '用户从哪些渠道了解到这个平台',
109-
icon: 'activities-037_v1_lineal',
134+
icon: 'icon:mingcute/camera-2-ai-fill',
110135
},
111136
{
112137
label: '这个平台是哪些方面吸引了用户',
113-
icon: 'activities-037_v1_lineal',
138+
icon: 'icon:mingcute/camera-2-ai-fill',
114139
},
115140
],
116141
},
117142
{
118143
label: '用户在什么场景下使用这个平台',
119144
desc: '用户在什么场景下使用这个平台',
120-
icon: 'antenna-bars-5_v1_lineal',
145+
icon: 'icon:mingcute/bear-fill',
121146
children: [
122147
{
123148
label: '用户从什么事件什么场景下使用',
124-
icon: 'account-book-025_v1_lineal',
149+
icon: 'icon:mingcute/car-fill',
125150
},
126151
{
127152
label: '用户在某个场景下用到哪些功能',
128-
icon: 'account-book-025_v1_lineal',
153+
icon: 'icon:mingcute/car-fill',
129154
},
130155
],
131156
},
132157
{
133158
label: '用户什么原因下会离开这个平台',
134159
desc: '用户什么原因下会离开这个平台',
135-
icon: 'achievment-050_v1_lineal',
160+
icon: 'icon:mingcute/bell-ringing-fill',
136161
children: [
137162
{
138163
label: '用户无法接受这个平台的原因',
139-
icon: 'account-book-025_v1_lineal',
164+
icon: 'icon:mingcute/car-fill',
140165
},
141166
{
142167
label: '用户觉得这个平台有哪些不足',
143-
icon: 'account-book-025_v1_lineal',
168+
icon: 'icon:mingcute/car-fill',
144169
},
145170
],
146171
},

0 commit comments

Comments
 (0)