Skip to content

Commit 8d12b9a

Browse files
author
福晋
committed
chore: upgrade theme
1 parent 1536f76 commit 8d12b9a

7 files changed

Lines changed: 95 additions & 133 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"react-dom": "^18.3.1"
2727
},
2828
"devDependencies": {
29-
"@antv/astro-theme-antv": "^0.1.0-beta.1",
29+
"@antv/astro-theme-antv": "^0.1.0-beta.3",
3030
"astro": "7.2.0",
3131
"@astrojs/react": "6.0.5",
3232
"@astrojs/mdx": "7.0.8",

‎src/Content.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
---
22
import type { HomeSlotProps } from '@antv/astro-theme-antv';
3-
import ThemeIsland from './components/ThemeCharts/Island';
3+
import { Loading } from '@antv/astro-theme-antv/components';
4+
import ThemeCharts from './components/ThemeCharts';
45
import HomeSections from './components/HomeSections';
56
67
type Props = HomeSlotProps;
78
const { locale } = Astro.props;
89
---
910

1011
<div class="home-content">
11-
<div class="theme-island">
12-
<ThemeIsland locale={locale} client:only="react">
13-
<p slot="fallback" class="chart-placeholder">{locale === 'zh' ? '正在加载主题图表…' : 'Loading theme charts…'}</p>
14-
</ThemeIsland>
15-
</div>
12+
<ThemeCharts locale={locale} client:only="react">
13+
<div slot="fallback" class="grid min-h-120 place-items-center">
14+
<Loading locale={locale} label={locale === 'zh' ? '正在加载主题图表…' : 'Loading theme charts…'} />
15+
</div>
16+
</ThemeCharts>
1617
<HomeSections locale={locale} client:visible />
1718
</div>
1819

1920
<style>
2021
.home-content { overflow: hidden; background: linear-gradient(180deg, #fff 85%, #f7f8fd); }
21-
.chart-placeholder { display: grid; min-height: 480px; margin: 0; color: var(--text-muted); place-items: center; }
2222
</style>

‎src/components/LinkCharts/index.tsx‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import classNames from 'classnames';
22
import { useTranslation } from '../../lib/i18n';
3-
import { useCallback, useEffect, useRef, useState } from 'react';
3+
import { useEffect, useRef, useState } from 'react';
44
import CHARTS_DATAS from '../../data/link-charts.json';
55
import { transformUrl } from '../../lib/urls';
66
import { OverflowedText, ModuleTitle as Title } from '../common';
@@ -9,31 +9,27 @@ import { OverflowedText, ModuleTitle as Title } from '../common';
99
export function LinkCharts() {
1010
const timer = useRef<ReturnType<typeof setTimeout>>();
1111
useEffect(() => () => clearTimeout(timer.current), []);
12-
const [position, setPosition] = useState('center');
13-
const [loading, setLoading] = useState(false);
12+
const [position, setPosition] = useState<'left' | 'right' | 'center'>(
13+
'center',
14+
);
15+
const loading = position !== 'center';
1416
const [data, setData] = useState(CHARTS_DATAS);
1517

1618
const { locale: language, t: useT } = useTranslation();
1719

1820
// 滑动
19-
const onClick = useCallback(
20-
(position: 'left' | 'right') => {
21-
if (loading) return;
22-
setPosition(position);
23-
setLoading(true);
24-
const length = data.length;
25-
timer.current = setTimeout(() => {
26-
setData((data) => {
27-
return position === 'left'
28-
? [...data.slice(length - 3), ...data.slice(0, length - 3)]
29-
: [...data.slice(3), ...data.slice(0, 3)];
30-
});
31-
setPosition('center');
32-
setLoading(false);
33-
}, 1000);
34-
},
35-
[loading, data.length],
36-
);
21+
const onClick = (position: 'left' | 'right') => {
22+
if (loading) return;
23+
setPosition(position);
24+
timer.current = setTimeout(() => {
25+
setData((data) =>
26+
position === 'left'
27+
? [...data.slice(-3), ...data.slice(0, -3)]
28+
: [...data.slice(3), ...data.slice(0, 3)],
29+
);
30+
setPosition('center');
31+
}, 1000);
32+
};
3733

3834
return (
3935
<div className="flex items-center justify-center pt-[100px] pb-20 flex-col font-sans mobile:pt-12 mobile:pb-6">

‎src/components/ProjectCard/index.tsx‎

Lines changed: 54 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { ConfigProvider, Popover } from 'antd';
22
import classNames from 'classnames';
33
import { useTranslation } from '../../lib/i18n';
4-
import React, { useCallback, useState } from 'react';
4+
import { useEffect, useState } from 'react';
55
import ANTV_LINKS from '../../data/project-card-popover.json';
66
import { ActiveIcon, ModuleTitle as Title } from '../common';
77
import { type ProductType, getProducts } from '../../lib/products';
88
import { transformUrl } from '../../lib/urls';
99

10-
// 锚点, 用于 banner 中的 开始使用跳转
11-
export const ANCHORNAME = 'linkChartsAnchorName';
12-
13-
type PrejectData = {
10+
type ProductCardData = {
1411
// 标题
1512
title: string;
1613
// 二级表图
@@ -27,19 +24,13 @@ type PrejectData = {
2724
icon?: string;
2825
// 跳转链接
2926
url?: string;
30-
hash?: {
31-
// 弹出框 图表示例跳转链接
32-
examples: string;
33-
// 弹出框 使用文档 跳转到 api
34-
manual: string;
35-
};
36-
}[][];
27+
};
3728

3829
// 产品布局和样式由组件维护。
3930
const chartCardClasses =
4031
'h-[92px] mb-3 flex-1 flex-col bg-[rgba(245,140,88,0.15)] hover:bg-[rgba(245,140,88,0.25)] hover:border-[#f58c58]';
4132

42-
const PROJECT_DATAS: PrejectData = [
33+
const PROJECT_DATAS: ProductCardData[][] = [
4334
[
4435
{
4536
title: 'AVA',
@@ -196,7 +187,7 @@ export function ProjectCard() {
196187
const { locale: language, t: useT } = useTranslation();
197188

198189
// 旧的跳转 json 获取
199-
React.useEffect(() => {
190+
useEffect(() => {
200191
let active = true;
201192
getProducts({ language })
202193
.then((data) => {
@@ -212,66 +203,63 @@ export function ProjectCard() {
212203
}, [language]);
213204

214205
// 弹出框内容
215-
const getContent = useCallback(
216-
({ title, subTitle, img, links, url }) => {
217-
return (
218-
<div className="font-sans px-2">
219-
<div className="flex items-center tracking-normal">
220-
<div className="font-semibold text-[20px] text-[#1d2129] mr-[6px]">
221-
{title}
222-
</div>
223-
<div className="text-[14px] text-[#86909c]">{subTitle}</div>
206+
const getContent = ({ title, subTitle, img, links, url }) => {
207+
return (
208+
<div className="font-sans px-2">
209+
<div className="flex items-center tracking-normal">
210+
<div className="font-semibold text-[20px] text-[#1d2129] mr-[6px]">
211+
{title}
224212
</div>
225-
<div
226-
className="h-[125px] w-[274px] border border-solid border-[#d8d8d8] bg-white rounded-sm my-3 bg-center bg-no-repeat bg-contain"
227-
style={{ backgroundImage: `url(${img})` }}
228-
/>
229-
<div className="flex items-center justify-between w-[274px]">
230-
{ANTV_LINKS.map((link) => {
231-
let href = links[link.href]?.url?.replace(
232-
/https:\/\/.+?\//,
233-
`${url}/`,
234-
);
213+
<div className="text-[14px] text-[#86909c]">{subTitle}</div>
214+
</div>
215+
<div
216+
className="h-[125px] w-[274px] border border-solid border-[#d8d8d8] bg-white rounded-sm my-3 bg-center bg-no-repeat bg-contain"
217+
style={{ backgroundImage: `url(${img})` }}
218+
/>
219+
<div className="flex items-center justify-between w-[274px]">
220+
{ANTV_LINKS.map((link) => {
221+
let href = links[link.href]?.url?.replace(
222+
/https:\/\/.+?\//,
223+
`${url}/`,
224+
);
235225

236-
// Ant Design Charts 本身跳转 https://charts.ant.design/example 为 404, 修改为 https://ant-design-charts.antgroup.com/examples
237-
if (title === 'Ant Design Charts') {
238-
href =
239-
link.href === 'home'
240-
? url
241-
: `${url}/${language}/${
242-
{
243-
example: 'examples',
244-
api: 'options/plots/overview',
245-
}[link.href]
246-
}`;
247-
}
248-
if (href && title === 'F6' && link.href === 'api') {
249-
href = href + '/Graph';
250-
}
226+
// Ant Design Charts 本身跳转 https://charts.ant.design/example 为 404, 修改为 https://ant-design-charts.antgroup.com/examples
227+
if (title === 'Ant Design Charts') {
228+
href =
229+
link.href === 'home'
230+
? url
231+
: `${url}/${language}/${
232+
{
233+
example: 'examples',
234+
api: 'options/plots/overview',
235+
}[link.href]
236+
}`;
237+
}
238+
if (href && title === 'F6' && link.href === 'api') {
239+
href = href + '/Graph';
240+
}
251241

252-
return (
253-
<ActiveIcon
254-
key={link.href}
255-
href={href || transformUrl({ url, language })}
256-
target="_blank"
257-
className="text-[14px] text-[#1d2129] [&>img]:w-4 [&>img]:h-4 hover:text-[#691eff]"
258-
img={link.img}
259-
text={useT(link.text)}
260-
activeImg={link.activeImg}
261-
/>
262-
);
263-
})}
264-
</div>
242+
return (
243+
<ActiveIcon
244+
key={link.href}
245+
href={href || transformUrl({ url, language })}
246+
target="_blank"
247+
className="text-[14px] text-[#1d2129] [&>img]:w-4 [&>img]:h-4 hover:text-[#691eff]"
248+
img={link.img}
249+
text={useT(link.text)}
250+
activeImg={link.activeImg}
251+
/>
252+
);
253+
})}
265254
</div>
266-
);
267-
},
268-
[language],
269-
);
255+
</div>
256+
);
257+
};
270258

271259
return (
272260
<div
273261
className="flex items-center justify-center pt-20 pb-10 flex-col h-auto overflow-hidden font-sans tablet:px-6 mobile:pt-12 mobile:px-5 mobile:pb-6"
274-
id={ANCHORNAME}
262+
id="linkChartsAnchorName"
275263
>
276264
<Title
277265
title={useT('设计语言与研发框架')}

‎src/components/ThemeCharts/Island.tsx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/ThemeCharts/index.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classNames from 'classnames';
2-
import { useTranslation } from '../../lib/i18n';
2+
import { LocaleProvider, useTranslation, type Locale } from '../../lib/i18n';
33
import { useCallback, useState } from 'react';
44
import THEME_DATAS from '../../data/theme-charts.json';
55
import THEME_COLORS1 from '../../data/theme-colors1.json';
@@ -45,7 +45,7 @@ const CHARTS = [
4545
];
4646

4747
// 定制主题，一键生成
48-
export function ThemeCharts() {
48+
function ThemeCharts() {
4949
const { t: useT } = useTranslation();
5050

5151
const [selectedIndex, setSelectedIndex] = useState(0);
@@ -215,3 +215,11 @@ export function ThemeCharts() {
215215
</div>
216216
);
217217
}
218+
219+
export default function ThemeIsland({ locale }: { locale: Locale }) {
220+
return (
221+
<LocaleProvider locale={locale}>
222+
<ThemeCharts />
223+
</LocaleProvider>
224+
);
225+
}

‎src/components/common/OverflowedText/index.tsx‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { ConfigProvider, Tooltip } from 'antd';
22
import cx from 'classnames';
3-
import isNumber from 'lodash/isNumber.js';
4-
import isString from 'lodash/isString.js';
5-
import omit from 'lodash/omit.js';
6-
import toNumber from 'lodash/toNumber.js';
73
import { PureComponent } from 'react';
84

95
type Props = {
@@ -15,23 +11,18 @@ type Props = {
1511
};
1612

1713
const getPixel = (value: string | number) => {
18-
if (isNumber(value)) return `${value}px`;
14+
if (typeof value === 'number') return `${value}px`;
1915
return value;
2016
};
2117

2218
const getNumber = (value: string | number) => {
23-
if (isString(value)) return toNumber(value.replace(/[^0-9]+/, ''));
19+
if (typeof value === 'string') return Number(value.replace(/[^0-9]+/, ''));
2420
return value;
2521
};
2622

2723
// 自动省略并提示组件
2824
export class OverflowedText extends PureComponent<Props> {
29-
static defaultProps = {
30-
className: '',
31-
text: 'overflowed text',
32-
maxWidth: '100px',
33-
style: {},
34-
};
25+
private textElement: HTMLDivElement | null = null;
3526

3627
state = {
3728
isOverflow: false,
@@ -44,14 +35,12 @@ export class OverflowedText extends PureComponent<Props> {
4435
prevProps.maxHeight !== this.props.maxHeight ||
4536
prevProps.style !== this.props.style
4637
) {
47-
// @ts-ignore
48-
this.init(this.$text);
38+
this.init(this.textElement);
4939
}
5040
}
5141

52-
init = (node: HTMLDivElement) => {
53-
// @ts-ignore
54-
this.$text = node;
42+
init = (node: HTMLDivElement | null) => {
43+
this.textElement = node;
5544
if (!node) return;
5645
const { maxHeight } = this.props;
5746
this.setState({
@@ -64,14 +53,6 @@ export class OverflowedText extends PureComponent<Props> {
6453
render() {
6554
const { text, className, maxWidth, maxHeight, style = {} } = this.props;
6655
const { fontSize, lineHeight } = style;
67-
const props = omit(this.props, [
68-
'className',
69-
'text',
70-
'maxWidth',
71-
'maxHeight',
72-
'style',
73-
'width',
74-
]);
7556
const cls = cx(
7657
'overflow-hidden text-ellipsis',
7758
className,
@@ -104,7 +85,6 @@ export class OverflowedText extends PureComponent<Props> {
10485
title={text}
10586
placement="topLeft"
10687
overlayStyle={{ maxWidth: '50vw' }}
107-
{...props}
10888
>
10989
{text}
11090
</Tooltip>

0 commit comments

Comments
 (0)