chore: upgrade theme

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",

src/Content.astro

@@ -1,22 +1,22 @@
 ---
 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;
 const { locale } = Astro.props;
 ---
 
 <div class="home-content">
-  <div class="theme-island">
-    <ThemeIsland locale={locale} client:only="react">
-      <p slot="fallback" class="chart-placeholder">{locale === 'zh' ? '正在加载主题图表…' : 'Loading theme charts…'}</p>
-    </ThemeIsland>
-  </div>
+  <ThemeCharts locale={locale} client:only="react">
+    <div slot="fallback" class="grid min-h-120 place-items-center">
+      <Loading locale={locale} label={locale === 'zh' ? '正在加载主题图表…' : 'Loading theme charts…'} />
+    </div>
+  </ThemeCharts>
   <HomeSections locale={locale} client:visible />
 </div>
 
 <style>
   .home-content { overflow: hidden; background: linear-gradient(180deg, #fff 85%, #f7f8fd); }
-  .chart-placeholder { display: grid; min-height: 480px; margin: 0; color: var(--text-muted); place-items: center; }
 </style>

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<ReturnType<typeof setTimeout>>();
   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 (
     <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

@@ -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 (
-        <div className="font-sans px-2">
-          <div className="flex items-center tracking-normal">
-            <div className="font-semibold text-[20px] text-[#1d2129] mr-[6px]">
-              {title}
-            </div>
-            <div className="text-[14px] text-[#86909c]">{subTitle}</div>
+  const getContent = ({ title, subTitle, img, links, url }) => {
+    return (
+      <div className="font-sans px-2">
+        <div className="flex items-center tracking-normal">
+          <div className="font-semibold text-[20px] text-[#1d2129] mr-[6px]">
+            {title}
           </div>
-          <div
-            className="h-[125px] w-[274px] border border-solid border-[#d8d8d8] bg-white rounded-sm my-3 bg-center bg-no-repeat bg-contain"
-            style={{ backgroundImage: `url(${img})` }}
-          />
-          <div className="flex items-center justify-between w-[274px]">
-            {ANTV_LINKS.map((link) => {
-              let href = links[link.href]?.url?.replace(
-                /https:\/\/.+?\//,
-                `${url}/`,
-              );
+          <div className="text-[14px] text-[#86909c]">{subTitle}</div>
+        </div>
+        <div
+          className="h-[125px] w-[274px] border border-solid border-[#d8d8d8] bg-white rounded-sm my-3 bg-center bg-no-repeat bg-contain"
+          style={{ backgroundImage: `url(${img})` }}
+        />
+        <div className="flex items-center justify-between w-[274px]">
+          {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 (
-                <ActiveIcon
-                  key={link.href}
-                  href={href || transformUrl({ url, language })}
-                  target="_blank"
-                  className="text-[14px] text-[#1d2129] [&>img]:w-4 [&>img]:h-4 hover:text-[#691eff]"
-                  img={link.img}
-                  text={useT(link.text)}
-                  activeImg={link.activeImg}
-                />
-              );
-            })}
-          </div>
+            return (
+              <ActiveIcon
+                key={link.href}
+                href={href || transformUrl({ url, language })}
+                target="_blank"
+                className="text-[14px] text-[#1d2129] [&>img]:w-4 [&>img]:h-4 hover:text-[#691eff]"
+                img={link.img}
+                text={useT(link.text)}
+                activeImg={link.activeImg}
+              />
+            );
+          })}
         </div>
-      );
-    },
-    [language],
-  );
+      </div>
+    );
+  };
 
   return (
     <div
       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"
-      id={ANCHORNAME}
+      id="linkChartsAnchorName"
     >
       <Title
         title={useT('设计语言与研发框架')}

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>
+  );
+}

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>