diff --git a/package.json b/package.json index 4ba24940..4d1f8bbd 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "react-dom": "^18.3.1" }, "devDependencies": { - "@antv/astro-theme-antv": "^0.1.0-beta.1", + "@antv/astro-theme-antv": "^0.1.0-beta.3", "astro": "7.2.0", "@astrojs/react": "6.0.5", "@astrojs/mdx": "7.0.8", diff --git a/src/Content.astro b/src/Content.astro index 6e64a89d..d2f1c2a4 100644 --- a/src/Content.astro +++ b/src/Content.astro @@ -1,6 +1,7 @@ --- import type { HomeSlotProps } from '@antv/astro-theme-antv'; -import ThemeIsland from './components/ThemeCharts/Island'; +import { Loading } from '@antv/astro-theme-antv/components'; +import ThemeCharts from './components/ThemeCharts'; import HomeSections from './components/HomeSections'; type Props = HomeSlotProps; @@ -8,15 +9,14 @@ const { locale } = Astro.props; ---
-
- -

{locale === 'zh' ? '正在加载主题图表…' : 'Loading theme charts…'}

- -
+ +
+ +
+
diff --git a/src/components/LinkCharts/index.tsx b/src/components/LinkCharts/index.tsx index c2f6c5f3..e4f1f52b 100644 --- a/src/components/LinkCharts/index.tsx +++ b/src/components/LinkCharts/index.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames'; import { useTranslation } from '../../lib/i18n'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import CHARTS_DATAS from '../../data/link-charts.json'; import { transformUrl } from '../../lib/urls'; import { OverflowedText, ModuleTitle as Title } from '../common'; @@ -9,31 +9,27 @@ import { OverflowedText, ModuleTitle as Title } from '../common'; export function LinkCharts() { const timer = useRef>(); useEffect(() => () => clearTimeout(timer.current), []); - const [position, setPosition] = useState('center'); - const [loading, setLoading] = useState(false); + const [position, setPosition] = useState<'left' | 'right' | 'center'>( + 'center', + ); + const loading = position !== 'center'; const [data, setData] = useState(CHARTS_DATAS); const { locale: language, t: useT } = useTranslation(); // 滑动 - const onClick = useCallback( - (position: 'left' | 'right') => { - if (loading) return; - setPosition(position); - setLoading(true); - const length = data.length; - timer.current = setTimeout(() => { - setData((data) => { - return position === 'left' - ? [...data.slice(length - 3), ...data.slice(0, length - 3)] - : [...data.slice(3), ...data.slice(0, 3)]; - }); - setPosition('center'); - setLoading(false); - }, 1000); - }, - [loading, data.length], - ); + const onClick = (position: 'left' | 'right') => { + if (loading) return; + setPosition(position); + timer.current = setTimeout(() => { + setData((data) => + position === 'left' + ? [...data.slice(-3), ...data.slice(0, -3)] + : [...data.slice(3), ...data.slice(0, 3)], + ); + setPosition('center'); + }, 1000); + }; return (
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx index 6897c059..f1b884df 100644 --- a/src/components/ProjectCard/index.tsx +++ b/src/components/ProjectCard/index.tsx @@ -1,16 +1,13 @@ import { ConfigProvider, Popover } from 'antd'; import classNames from 'classnames'; import { useTranslation } from '../../lib/i18n'; -import React, { useCallback, useState } from 'react'; +import { useEffect, useState } from 'react'; import ANTV_LINKS from '../../data/project-card-popover.json'; import { ActiveIcon, ModuleTitle as Title } from '../common'; import { type ProductType, getProducts } from '../../lib/products'; import { transformUrl } from '../../lib/urls'; -// 锚点, 用于 banner 中的 开始使用跳转 -export const ANCHORNAME = 'linkChartsAnchorName'; - -type PrejectData = { +type ProductCardData = { // 标题 title: string; // 二级表图 @@ -27,19 +24,13 @@ type PrejectData = { icon?: string; // 跳转链接 url?: string; - hash?: { - // 弹出框 图表示例跳转链接 - examples: string; - // 弹出框 使用文档 跳转到 api - manual: string; - }; -}[][]; +}; // 产品布局和样式由组件维护。 const chartCardClasses = '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]'; -const PROJECT_DATAS: PrejectData = [ +const PROJECT_DATAS: ProductCardData[][] = [ [ { title: 'AVA', @@ -196,7 +187,7 @@ export function ProjectCard() { const { locale: language, t: useT } = useTranslation(); // 旧的跳转 json 获取 - React.useEffect(() => { + useEffect(() => { let active = true; getProducts({ language }) .then((data) => { @@ -212,66 +203,63 @@ export function ProjectCard() { }, [language]); // 弹出框内容 - const getContent = useCallback( - ({ title, subTitle, img, links, url }) => { - return ( -
-
-
- {title} -
-
{subTitle}
+ const getContent = ({ title, subTitle, img, links, url }) => { + return ( +
+
+
+ {title}
-
-
- {ANTV_LINKS.map((link) => { - let href = links[link.href]?.url?.replace( - /https:\/\/.+?\//, - `${url}/`, - ); +
{subTitle}
+
+
+
+ {ANTV_LINKS.map((link) => { + let href = links[link.href]?.url?.replace( + /https:\/\/.+?\//, + `${url}/`, + ); - // Ant Design Charts 本身跳转 https://charts.ant.design/example 为 404, 修改为 https://ant-design-charts.antgroup.com/examples - if (title === 'Ant Design Charts') { - href = - link.href === 'home' - ? url - : `${url}/${language}/${ - { - example: 'examples', - api: 'options/plots/overview', - }[link.href] - }`; - } - if (href && title === 'F6' && link.href === 'api') { - href = href + '/Graph'; - } + // Ant Design Charts 本身跳转 https://charts.ant.design/example 为 404, 修改为 https://ant-design-charts.antgroup.com/examples + if (title === 'Ant Design Charts') { + href = + link.href === 'home' + ? url + : `${url}/${language}/${ + { + example: 'examples', + api: 'options/plots/overview', + }[link.href] + }`; + } + if (href && title === 'F6' && link.href === 'api') { + href = href + '/Graph'; + } - return ( - - ); - })} -
+ return ( + + ); + })}
- ); - }, - [language], - ); +
+ ); + }; return (
- <ThemeCharts /> - </LocaleProvider> - ); -} diff --git a/src/components/ThemeCharts/index.tsx b/src/components/ThemeCharts/index.tsx index e043ecf7..7f3f9e1b 100644 --- a/src/components/ThemeCharts/index.tsx +++ b/src/components/ThemeCharts/index.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { useTranslation } from '../../lib/i18n'; +import { LocaleProvider, useTranslation, type Locale } from '../../lib/i18n'; import { useCallback, useState } from 'react'; import THEME_DATAS from '../../data/theme-charts.json'; import THEME_COLORS1 from '../../data/theme-colors1.json'; @@ -45,7 +45,7 @@ const CHARTS = [ ]; // 定制主题，一键生成 -export function ThemeCharts() { +function ThemeCharts() { const { t: useT } = useTranslation(); const [selectedIndex, setSelectedIndex] = useState(0); @@ -215,3 +215,11 @@ export function ThemeCharts() { </div> ); } + +export default function ThemeIsland({ locale }: { locale: Locale }) { + return ( + <LocaleProvider locale={locale}> + <ThemeCharts /> + </LocaleProvider> + ); +} diff --git a/src/components/common/OverflowedText/index.tsx b/src/components/common/OverflowedText/index.tsx index 2eacca1a..5e4ce556 100644 --- a/src/components/common/OverflowedText/index.tsx +++ b/src/components/common/OverflowedText/index.tsx @@ -1,9 +1,5 @@ import { ConfigProvider, Tooltip } from 'antd'; import cx from 'classnames'; -import isNumber from 'lodash/isNumber.js'; -import isString from 'lodash/isString.js'; -import omit from 'lodash/omit.js'; -import toNumber from 'lodash/toNumber.js'; import { PureComponent } from 'react'; type Props = { @@ -15,23 +11,18 @@ type Props = { }; const getPixel = (value: string | number) => { - if (isNumber(value)) return `${value}px`; + if (typeof value === 'number') return `${value}px`; return value; }; const getNumber = (value: string | number) => { - if (isString(value)) return toNumber(value.replace(/[^0-9]+/, '')); + if (typeof value === 'string') return Number(value.replace(/[^0-9]+/, '')); return value; }; // 自动省略并提示组件 export class OverflowedText extends PureComponent<Props> { - static defaultProps = { - className: '', - text: 'overflowed text', - maxWidth: '100px', - style: {}, - }; + private textElement: HTMLDivElement | null = null; state = { isOverflow: false, @@ -44,14 +35,12 @@ export class OverflowedText extends PureComponent<Props> { prevProps.maxHeight !== this.props.maxHeight || prevProps.style !== this.props.style ) { - // @ts-ignore - this.init(this.$text); + this.init(this.textElement); } } - init = (node: HTMLDivElement) => { - // @ts-ignore - this.$text = node; + init = (node: HTMLDivElement | null) => { + this.textElement = node; if (!node) return; const { maxHeight } = this.props; this.setState({ @@ -64,14 +53,6 @@ export class OverflowedText extends PureComponent<Props> { render() { const { text, className, maxWidth, maxHeight, style = {} } = this.props; const { fontSize, lineHeight } = style; - const props = omit(this.props, [ - 'className', - 'text', - 'maxWidth', - 'maxHeight', - 'style', - 'width', - ]); const cls = cx( 'overflow-hidden text-ellipsis', className, @@ -104,7 +85,6 @@ export class OverflowedText extends PureComponent<Props> { title={text} placement="topLeft" overlayStyle={{ maxWidth: '50vw' }} - {...props} > {text} </Tooltip>