{finded?.title}
+ {themeConfig.name}
+ {locale.description}
+ -
+ {group.children.map((component) => (
+
+ 
+
+ );
+};
diff --git a/site/.dumi/pages/index/components/Introduce.tsx b/site/.dumi/pages/index/components/Introduce.tsx
new file mode 100644
index 000000000..9cafe523f
--- /dev/null
+++ b/site/.dumi/pages/index/components/Introduce.tsx
@@ -0,0 +1,58 @@
+import { useLocale, useSiteToken } from '.dumi/hooks';
+import { css } from '@emotion/react';
+import * as React from 'react';
+import { Navigation } from './Navigation';
+
+const useStyle = () => {
+ const { token } = useSiteToken();
+ return {
+ introduce: css`
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ display: flex;
+ `,
+ title: css`
+ font-size: 64px;
+ font-weight: bold;
+ line-height: 1;
+ span {
+ color: #00bc70;
+ }
+ `,
+ description: css`
+ font-size: 20px;
+ line-height: 1.5;
+ margin-top: 30px;
+ `,
+ };
+};
+
+const locales = {
+ cn: {
+ description: '追求极致的用户体验，做有温度的组件库',
+ start: '开始使用',
+ scanCode: '扫码体验',
+ },
+ en: {
+ description: 'Pursue the ultimate user experience and build a component library with warmth',
+ start: 'Getting Started',
+ scanCode: 'Scan QR Code',
+ },
+};
+
+export const Introduce: React.FC = () => {
+ const { introduce, title, description } = useStyle();
+ const [locale] = useLocale(locales);
+
+ return (
+
+
+
+ );
+};
diff --git a/site/.dumi/pages/index/components/Navigation.tsx b/site/.dumi/pages/index/components/Navigation.tsx
new file mode 100644
index 000000000..480621e52
--- /dev/null
+++ b/site/.dumi/pages/index/components/Navigation.tsx
@@ -0,0 +1,83 @@
+import { useLocale, useLocation, useSiteToken } from '.dumi/hooks';
+import { getLocalizedPathname } from '.dumi/theme/utils';
+import { css } from '@emotion/react';
+import { useClickAway } from 'ahooks';
+import { Button, Popover, QRCode, Space } from 'antd';
+import { Link } from 'dumi';
+import * as React from 'react';
+
+const useStyle = () => {
+ const { token } = useSiteToken();
+
+ return {
+ navigation: css`
+ margin-top: 100px;
+ margin-bottom: 60px;
+ flex-wrap: wrap;
+ display: flex;
+ `,
+ button: css`
+ &${token.antCls}-btn {
+ height: 48px;
+ }
+ `,
+ };
+};
+
+const locales = {
+ cn: {
+ start: '开始使用',
+ scanCode: '扫码体验',
+ },
+ en: {
+ start: 'Getting Started',
+ scanCode: 'Scan QR Code',
+ },
+};
+
+export const Navigation: React.FC = () => {
+ const { navigation, button } = useStyle();
+ const [locale, lang] = useLocale(locales);
+ const { pathname, search, getLink } = useLocation();
+ const [open, setOpen] = React.useState(false);
+ const ref = React.useRef
+ Zarm Design
+
+ {locale.description}
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/site/.dumi/pages/index/components/index.ts b/site/.dumi/pages/index/components/index.ts
new file mode 100644
index 000000000..818bc18b3
--- /dev/null
+++ b/site/.dumi/pages/index/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Banner';
+export * from './Introduce';
diff --git a/site/.dumi/pages/index/components/util.ts b/site/.dumi/pages/index/components/util.ts
new file mode 100644
index 000000000..ac9aefb25
--- /dev/null
+++ b/site/.dumi/pages/index/components/util.ts
@@ -0,0 +1,125 @@
+import { css } from '@emotion/react';
+import * as React from 'react';
+
+export interface Author {
+ avatar: string;
+ href: string;
+ type: 'design' | 'develop';
+ name: string;
+}
+
+export interface Article {
+ title: string;
+ href: string;
+ date: string;
+ type: 'design' | 'develop';
+ author: Author['name'];
+}
+
+export interface Recommendation {
+ title?: string;
+ img?: string;
+ href?: string;
+ popularize?: boolean;
+ description?: string;
+}
+
+type SourceType = 'zhihu' | 'yuque';
+export interface Extra {
+ title: string;
+ description: string;
+ date: string;
+ img: string;
+ source: SourceType;
+ href: string;
+}
+
+export interface Icon {
+ name: string;
+ href: string;
+}
+
+export type Articles = {
+ cn: Article[];
+ en: Article[];
+};
+
+export type Authors = Author[];
+
+export type Recommendations = {
+ cn: Recommendation[];
+ en: Recommendation[];
+};
+
+export type Extras = {
+ cn: Extra[];
+ en: Extra[];
+};
+
+export type Icons = Icon[];
+
+export type SiteData = {
+ articles: Articles;
+ authors: Authors;
+ recommendations: Recommendations;
+ extras: Extras;
+ icons: Icons;
+};
+
+export function preLoad(list: string[]) {
+ if (typeof window !== 'undefined') {
+ // 图处预加载；
+ const div = document.createElement('div');
+ div.style.display = 'none';
+ document.body.appendChild(div);
+ list.forEach((src) => {
+ const img = new Image();
+ img.src = src;
+ div.appendChild(img);
+ });
+ }
+}
+
+export function useSiteData(): [Partial
+
+
+
+
+
+ );
+};
+
+export default Homepage;
diff --git a/site/.dumi/rehype.ts b/site/.dumi/rehype.ts
new file mode 100644
index 000000000..2dbc52701
--- /dev/null
+++ b/site/.dumi/rehype.ts
@@ -0,0 +1,72 @@
+import assert from 'assert';
+import { unistUtilVisit, type HastRoot, type UnifiedTransformer } from 'dumi';
+
+/**
+ * plugin for modify hast tree when docs compiling
+ */
+function rehype(): UnifiedTransformer
+ {
+ setSearch(e.target.value);
+ }}
+ onKeyDown={onKeyDown}
+ bordered={false}
+ suffix={
+
+ {groups
+ .filter((i) => i?.title)
+ .map((group) => {
+ const components = group?.children?.filter(
+ (component) =>
+ !search.trim() ||
+ component?.title?.toLowerCase()?.includes(search.trim().toLowerCase()) ||
+ (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
+ );
+ return components?.length ? (
+
+ ) : null;
+ })}
+
+
+
+ <Space align="center">
+ <span style={{ fontSize: 24 }}>{group?.title}</span>
+ <Tag style={{ display: 'block' }}>{components.length}</Tag>
+ </Space>
+
+
+ {components.map((component) => {
+ /** 是否是外链 */
+ const isExternalLink = component.link.startsWith('http');
+ let url = `${component.link}`;
+
+ if (!isExternalLink) {
+ url += urlSearch;
+ }
+
+ /** Link 不能跳转到外链 */
+ const ComponentLink = isExternalLink ? 'a' : Link;
+
+ return (
+
+
+ {component?.title} {component.subtitle}
+
+ }
+ >
+
+ 
+
+
+
+
+ );
+ })}
+
+
+
+ record.name}
+ />
+
+ )}
+
+ );
+};
+
+export interface ComponentTokenTableProps {
+ component: string;
+}
+
+const ComponentTokenTable: React.FC
setOpen(!open)}>
+
+ {open && (
+