Skip to content

Commit 17fbc22

Browse files
wkylinwkylin
committed
feat: item circle
1 parent 3247c4a commit 17fbc22

11 files changed

Lines changed: 478 additions & 5 deletions

File tree

‎src/components/stateless/OrbitingCircles/index.tsx‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
4+
export interface OrbitingCirclesProps extends React.HTMLAttributes<HTMLDivElement> {
5+
className?: string
6+
children?: React.ReactNode
7+
reverse?: boolean
8+
duration?: number
9+
delay?: number
10+
radius?: number
11+
path?: boolean
12+
iconSize?: number
13+
speed?: number
14+
}
15+
16+
export function OrbitingCircles({
17+
className,
18+
children,
19+
reverse,
20+
duration = 20,
21+
radius = 160,
22+
path = true,
23+
iconSize = 30,
24+
speed = 1,
25+
...props
26+
}: OrbitingCirclesProps) {
27+
const calculatedDuration = duration / speed
28+
return (
29+
<>
30+
{path && (
31+
<svg
32+
xmlns="http://www.w3.org/2000/svg"
33+
version="1.1"
34+
className="pointer-events-none absolute inset-0 size-full"
35+
>
36+
<circle className="stroke-black/10 stroke-1 dark:stroke-white/10" cx="50%" cy="50%" r={radius} fill="none" />
37+
</svg>
38+
)}
39+
{React.Children.map(children, (child, index) => {
40+
const angle = (360 / React.Children.count(children)) * index
41+
return (
42+
<div
43+
style={
44+
{
45+
'--duration': calculatedDuration,
46+
'--radius': radius,
47+
'--angle': angle,
48+
'--icon-size': `${iconSize}px`,
49+
} as React.CSSProperties
50+
}
51+
className={clsx(
52+
`animate-my-orbit absolute flex size-[var(--icon-size)] transform-gpu items-center justify-center rounded-full`,
53+
{ '[animation-direction:reverse]': reverse },
54+
className
55+
)}
56+
{...props}
57+
>
58+
{child}
59+
</div>
60+
)
61+
})}
62+
</>
63+
)
64+
}
65+
66+
const OrbitingCirclesDemo = () => {
67+
return (
68+
<div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden">
69+
<OrbitingCircles iconSize={40}>
70+
<Icons.whatsapp />
71+
<Icons.notion />
72+
<Icons.openai />
73+
<Icons.googleDrive />
74+
<Icons.whatsapp />
75+
</OrbitingCircles>
76+
<OrbitingCircles iconSize={30} radius={100} reverse speed={2}>
77+
<Icons.whatsapp />
78+
<Icons.notion />
79+
<Icons.openai />
80+
<Icons.googleDrive />
81+
</OrbitingCircles>
82+
</div>
83+
)
84+
}
85+
86+
const Icons = {
87+
gitHub: () => (
88+
<svg width="100" height="100" viewBox="0 0 438.549 438.549">
89+
<path
90+
fill="currentColor"
91+
d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
92+
/>
93+
</svg>
94+
),
95+
notion: () => (
96+
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
97+
<path
98+
d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
99+
fill="#ffffff"
100+
/>
101+
<path
102+
d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
103+
fill="#000000"
104+
fillRule="evenodd"
105+
clipRule="evenodd"
106+
/>
107+
</svg>
108+
),
109+
openai: () => (
110+
<svg
111+
width="100"
112+
height="100"
113+
viewBox="0 0 24 24"
114+
xmlns="http://www.w3.org/2000/svg"
115+
className="fill-black dark:fill-white"
116+
>
117+
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
118+
</svg>
119+
),
120+
googleDrive: () => (
121+
<svg width="100" height="100" viewBox="0 0 87.3 78" xmlns="http://www.w3.org/2000/svg">
122+
<path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da" />
123+
<path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z" fill="#00ac47" />
124+
<path
125+
d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
126+
fill="#ea4335"
127+
/>
128+
<path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d" />
129+
<path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc" />
130+
<path
131+
d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
132+
fill="#ffba00"
133+
/>
134+
</svg>
135+
),
136+
whatsapp: () => (
137+
<svg width="100" height="100" viewBox="0 0 175.216 175.552" xmlns="http://www.w3.org/2000/svg">
138+
<defs>
139+
<linearGradient id="b" x1="85.915" x2="86.535" y1="32.567" y2="137.092" gradientUnits="userSpaceOnUse">
140+
<stop offset="0" stopColor="#57d163" />
141+
<stop offset="1" stopColor="#23b33a" />
142+
</linearGradient>
143+
<filter id="a" width="1.115" height="1.114" x="-.057" y="-.057" colorInterpolationFilters="sRGB">
144+
<feGaussianBlur stdDeviation="3.531" />
145+
</filter>
146+
</defs>
147+
<path
148+
d="m54.532 138.45 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.523h.023c33.707 0 61.139-27.426 61.153-61.135.006-16.335-6.349-31.696-17.895-43.251A60.75 60.75 0 0 0 87.94 25.983c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.558zm-40.811 23.544L24.16 123.88c-6.438-11.154-9.825-23.808-9.821-36.772.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954zm0 0"
149+
fill="#b3b3b3"
150+
filter="url(#a)"
151+
/>
152+
<path
153+
d="m12.966 161.238 10.439-38.114a73.42 73.42 0 0 1-9.821-36.772c.017-40.556 33.021-73.55 73.578-73.55 19.681.01 38.154 7.669 52.047 21.572s21.537 32.383 21.53 52.037c-.018 40.553-33.027 73.553-73.578 73.553h-.032c-12.313-.005-24.412-3.094-35.159-8.954z"
154+
fill="#ffffff"
155+
/>
156+
<path
157+
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.312-6.179 22.559 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.518 31.126 8.524h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.929z"
158+
fill="url(#linearGradient1780)"
159+
/>
160+
<path
161+
d="M87.184 25.227c-33.733 0-61.166 27.423-61.178 61.13a60.98 60.98 0 0 0 9.349 32.535l1.455 2.313-6.179 22.558 23.146-6.069 2.235 1.324c9.387 5.571 20.15 8.517 31.126 8.523h.023c33.707 0 61.14-27.426 61.153-61.135a60.75 60.75 0 0 0-17.895-43.251 60.75 60.75 0 0 0-43.235-17.928z"
162+
fill="url(#b)"
163+
/>
164+
<path
165+
d="M68.772 55.603c-1.378-3.061-2.828-3.123-4.137-3.176l-3.524-.043c-1.226 0-3.218.46-4.902 2.3s-6.435 6.287-6.435 15.332 6.588 17.785 7.506 19.013 12.718 20.381 31.405 27.75c15.529 6.124 18.689 4.906 22.061 4.6s10.877-4.447 12.408-8.74 1.532-7.971 1.073-8.74-1.685-1.226-3.525-2.146-10.877-5.367-12.562-5.981-2.91-.919-4.137.921-4.746 5.979-5.819 7.206-2.144 1.381-3.984.462-7.76-2.861-14.784-9.124c-5.465-4.873-9.154-10.891-10.228-12.73s-.114-2.835.808-3.751c.825-.824 1.838-2.147 2.759-3.22s1.224-1.84 1.836-3.065.307-2.301-.153-3.22-4.032-10.011-5.666-13.647"
166+
fill="#ffffff"
167+
fillRule="evenodd"
168+
/>
169+
</svg>
170+
),
171+
}
172+
173+
export default OrbitingCirclesDemo

‎src/pages/business/index.jsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import React, { useState, useEffect } from 'react'
2+
import { Table } from 'antd'
3+
import FixTabPanel from '@stateless/FixTabPanel'
4+
import { postFetch, getFetch } from '@src/service/'
5+
6+
const fixColumns = [
7+
// {
8+
// title: '序号',
9+
// dataIndex: 'index',
10+
// render: (_text, _record, index) => index +1 ,
11+
// },
12+
{
13+
title: '资质名称',
14+
dataIndex: 'certificateName',
15+
render: (text, _record, index) => text || '-',
16+
},
17+
{
18+
title: '证书编号',
19+
dataIndex: 'certificateNo',
20+
render: (text, _record, index) => text || '-',
21+
},
22+
{
23+
title: '发证机构',
24+
dataIndex: 'certifyOrgName',
25+
render: (text, _record, index) => text || '-',
26+
},
27+
{
28+
title: '发证日期',
29+
dataIndex: 'issueDate',
30+
render: (text, _record, index) => text || '-',
31+
},
32+
{
33+
title: '有效期至',
34+
dataIndex: 'endDate',
35+
render: (text, _record, index) => text || '-',
36+
},
37+
{
38+
title: '证书状态',
39+
dataIndex: 'status',
40+
render: (text, _record, index) => text || '-',
41+
},
42+
]
43+
44+
const initialFetchData = [
45+
{
46+
grid: '1634270012',
47+
name: '中化学土木工程有限公司',
48+
list: [],
49+
},
50+
// {
51+
// grid: '304300699',
52+
// name: '上海市建筑装饰工程集团有限公司',
53+
// list: [],
54+
// },
55+
// {
56+
// grid: '325253024',
57+
// name: '上海市工程建设咨询监理有限公司',
58+
// list: [],
59+
// },
60+
// {
61+
// grid: '307886242',
62+
// name: '上海市住安建设发展股份有限公司',
63+
// list: [],
64+
// },
65+
// {
66+
// grid: '828163972',
67+
// name: '中石化上海工程有限公司',
68+
// list: [],
69+
// },
70+
// {
71+
// grid: '2350706740',
72+
// name: '上海璞奥电子科技有限公司',
73+
// list: [],
74+
// },
75+
// {
76+
// grid: '804448386',
77+
// name: '上海江崎格力高南奉食品有限公司',
78+
// list: [],
79+
// },
80+
// {
81+
// grid: '787672126',
82+
// name: '清水建设（中国）有限公司',
83+
// list: [],
84+
// },
85+
// {
86+
// grid: '137331760',
87+
// name: '信息产业电子第十一设计研究院科技工程股份有限公司',
88+
// list: [],
89+
// },
90+
// {
91+
// grid: '2416780932',
92+
// name: '上海子绵置业有限公司',
93+
// list: [],
94+
// },
95+
]
96+
97+
const Business = () => {
98+
const [fetchData, setFetchData] = useState(initialFetchData)
99+
100+
useEffect(() => {
101+
const fetchAllData = async () => {
102+
const newFetchData = [...fetchData]
103+
for (let i = 0; i < newFetchData.length; i++) {
104+
const item = newFetchData[i]
105+
try {
106+
const res = await postFetch(
107+
'https://capi.tianyancha.com/cloud-business-state/company/certificate/detail/list',
108+
{
109+
payload: {
110+
companyGid: item.grid,
111+
pageSize: 1000,
112+
pageNum: 1,
113+
certificateName: '-100',
114+
status: '-100',
115+
issueYear: '-100',
116+
searchKey: '',
117+
sortType: '',
118+
},
119+
}
120+
)
121+
newFetchData[i] = {
122+
...item,
123+
list: res.data?.list || [],
124+
}
125+
} catch (error) {
126+
console.error('数据请求失败:', error)
127+
}
128+
}
129+
setFetchData(newFetchData)
130+
}
131+
fetchAllData()
132+
}, [])
133+
134+
return (
135+
<FixTabPanel>
136+
{fetchData.map((item, index) => (
137+
<section className="my-4" key={item.grid}>
138+
<section className="my-4 text-lg">
139+
{index + 1}
140+
<span>.</span> {item.name} : {item.list.length}
141+
</section>
142+
<Table columns={fixColumns} dataSource={item.list} pagination={false} />
143+
</section>
144+
))}
145+
</FixTabPanel>
146+
)
147+
}
148+
149+
export default Business

‎src/pages/demo/index.jsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import { Table } from 'antd'
33
import FixTabPanel from '@stateless/FixTabPanel'
44
import AnimationTabs from '@stateless/AnimationTabs'
@@ -7,6 +7,7 @@ import FloatingIcon, { SocialIcon } from '@stateless/FloatingIcon'
77
import GradientTracing from '@stateless/GradientTracing'
88
import Footer from '@stateless/Footer'
99
import StarBack from '@stateless/StarBackground'
10+
import OrbitingCirclesDemo from '@stateless/OrbitingCircles'
1011

1112
import StickyCard from '@stateless/StickyCard'
1213
import SpringPng from '@assets/images/spring.png'
@@ -97,6 +98,14 @@ const customCommandMap = {
9798
bun: 'bun x shadcn@latest add button',
9899
}
99100

101+
const dateDifference = (date1, date2) => {
102+
const d1 = new Date(date1)
103+
const d2 = new Date(date2)
104+
const diffTime = Math.abs(d2 - d1)
105+
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
106+
return diffDays
107+
}
108+
100109
const ProDemo = () => {
101110
const [items, setItems] = useState([
102111
{ id: '1', content: <DraggableItem>First Item</DraggableItem> },
@@ -106,8 +115,10 @@ const ProDemo = () => {
106115
const handleReorder = (newItems) => {
107116
setItems(newItems)
108117
}
118+
109119
return (
110120
<FixTabPanel>
121+
<OrbitingCirclesDemo />
111122
<ScriptView showMultiplePackageOptions={true} codeLanguage="shell" commandMap={customCommandMap} />
112123
{/* <section style={{ height: 240, overflow: 'hidden', margin: 20 }}>
113124
<AnimatedList>

0 commit comments

Comments
 (0)