feat: doc dumi use ant-style theme, home style, HashAddress Radio wri…

…te doc md
AElfProject · Mar 7, 2024 · e2a724b · e2a724b
1 parent 30fcea8
commit e2a724b
Show file tree

Hide file tree

Showing 18 changed files with 546 additions and 131 deletions.
diff --git a/.dumi/global.less b/.dumi/global.less
@@ -1,4 +1,13 @@
 #root {
+  background-color: rgb(248, 248, 250);
+  .dumi-default-header {
+    background: rgb(255, 255, 255);
+    box-shadow:
+      rgba(0, 0, 0, 0.03) 0px 1px 2px 0px,
+      rgba(0, 0, 0, 0.02) 0px 1px 6px -1px,
+      rgba(0, 0, 0, 0.02) 0px 2px 4px 0px;
+    border-bottom: 1px solid rgb(240, 240, 240);
+  }
   .dumi-default-header-left {
     width: 300px;
   }
@@ -24,6 +33,13 @@
     }
     .dumi-default-header-content {
       max-width: none;
+      height: 64px;
+    }
+    .dumi-default-logo {
+      color: rgba(42, 46, 54, 0.88);
+      font-size: 22px;
+      line-height: 1;
+      font-weight: 500;
     }
   }
 }

diff --git a/.dumi/theme/SiteThemeProvider.tsx b/.dumi/theme/SiteThemeProvider.tsx
@@ -28,12 +28,8 @@ const SiteThemeProvider: React.FC<ThemeProviderProps<any>> = ({
       prefixCls="aelf-design-doc"
       appearance={appearance}
       customToken={{
-        // customButton: {
-        //   borderRadiusDefault: '20px',
-        //   borderRadiusLarge: '30px'
-        // },
         customAddress: {
-          primaryLinkColor: appearance == 'dark' ? '#c713af' : '#53dd13',
+          primaryLinkColor: appearance == 'dark' ? '#c713af' : '#266cd3',
           primaryIconColor: appearance == 'dark' ? '#ea1818' : '#7f7777',
           addressHoverColor: appearance == 'dark' ? '#38b117' : '#149434',
           addressActiveColor: appearance == 'dark' ? '#0756BC' : '#0460D9',

diff --git a/.dumirc.ts b/.dumirc.ts
@@ -102,13 +102,7 @@ export default defineConfig({
     },
   },
   favicons: ['https://img2.imgtp.com/2024/03/01/EXKVhuMo.svg'],
-  locales: [
-    {
-      id: 'en-US',
-      name: 'English',
-    },
-    { id: 'zh-CN', name: '中文' },
-  ],
+  locales: [{ id: 'zh-CN', name: '中文' }],
   extraBabelPlugins: [
     [
       'babel-plugin-inline-react-svg-v2',

diff --git a/LEGAL.md b/LEGAL.md
diff --git a/docs/home/components/Banner/banner-logo.ts b/docs/home/components/Banner/banner-logo.ts
diff --git a/docs/home/components/Banner/index.module.less b/docs/home/components/Banner/index.module.less
@@ -9,32 +9,20 @@
     min-height: 256px;
   }
   .wrap {
-    position: absolute;
-    inset: 0;
-    width: 50%;
-    height: 100%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    row-gap: 60px;
-    background-color: #1d2a51;
-    color: #fff;
-
-    .titleImg {
-      display: block;
-      width: 660px;
-      max-width: 100%;
-      z-index: 9;
-    }
+    justify-content: center;
 
     .btn {
-      z-index: 9;
+      z-index: 11;
       display: flex;
       column-gap: 28px;
       margin-block-start: 22px;
       padding-inline-start: 14px;
-
+      position: absolute;
+      left: 50%;
+      top: 80%;
+      transform: translateX(-50%);
       a {
         width: 146px;
         min-width: 146px;
@@ -49,11 +37,11 @@
         transition: opacity 0.2s;
         &:first-child {
           color: #fff;
-          background-color: #1677ff;
+          background-color: #764df1;
         }
         &:last-child {
-          color: #1677ff;
-          border: 1px solid #1677ff;
+          color: #764df1;
+          border: 1px solid #764df1;
         }
         &:hover {
           opacity: 0.8;
@@ -96,3 +84,36 @@
     }
   }
 }
+.bannerAnimation {
+  z-index: 10;
+  transform: translateY(-10px);
+  width: 100%;
+  height: 500px;
+  opacity: 0.2;
+  filter: blur(69px);
+  will-change: transform;
+  animation-timeline: auto;
+  animation-range-start: normal;
+  animation-range-end: normal;
+  background: linear-gradient(
+      135deg,
+      rgb(114, 46, 209) 0%,
+      rgb(22, 119, 255) 30%,
+      rgb(245, 34, 45) 70%,
+      rgb(19, 194, 194) 100%
+    )
+    0% 0% / 200% 200%;
+  animation: 10s ease 0s infinite normal none running glow;
+  animation-name: identifier;
+}
+@keyframes identifier {
+  0% {
+    background-position: 0px -100%;
+  }
+  50% {
+    background-position: 200% 50%;
+  }
+  100% {
+    background-position: 0px -100%;
+  }
+}
diff --git a/docs/home/components/Banner/index.tsx b/docs/home/components/Banner/index.tsx
@@ -2,31 +2,23 @@ import React from 'react';
 // @ts-ignore
 import { Link, useIntl } from 'dumi';
 
-import bannerLogo from './banner-logo';
 import styles from './index.module.less';
 
 const Banner: React.FC = () => {
   const intl = useIntl();
 
   return (
     <div className={styles.bannerContainer}>
-      <img draggable={false} className={styles.bgImg} src={bannerLogo} alt="banner" />
       <div className={styles.wrap}>
-        <div>
-          <img
-            draggable={false}
-            className={styles.titleImg}
-            src="https://img2.imgtp.com/2024/03/01/EXKVhuMo.svg"
-            alt="title"
-          />
-          <div className={styles.btn}>
-            <Link to={`${intl.locale === 'zh-CN' ? '/zh-CN' : ''}/components/address`}>
+        <div className={styles.bannerAnimation}></div>
+        <div className={styles.btn}>
+          {/* <Link to={`${intl.locale === 'zh-CN' ? '/zh-CN' : ''}/components/address`}>
               {intl.formatMessage({ id: 'app.docs.site.index.banner.button-text' })}
-            </Link>
-            <a href="https://github.com/AElf-devops/aelf-design" target="_blank" rel="noreferrer">
-              GitHub
-            </a>
-          </div>
+            </Link> */}
+          <Link to={`/components/address`}>开始</Link>
+          <a href="https://github.com/AElf-devops/aelf-design" target="_blank" rel="noreferrer">
+            GitHub
+          </a>
         </div>
       </div>
     </div>

diff --git a/package.json b/package.json
@@ -75,7 +75,8 @@
     "babel-plugin-inline-react-svg-v2": "^2.0.2",
     "babel-plugin-react-svg": "^3.0.3",
     "classnames": "^2.3.2",
-    "dumi": "^2.2.16",
+    "dumi": "^2.2.17",
+    "dumi-theme-antd-style": "0.25.1",
     "eslint": "^8.56.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "ethers": "^6.9.1",

diff --git a/packages/component/src/Address/demos/basic.tsx b/packages/component/src/Address/demos/basic.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
-import {
-  CircleCloseIcon,
-  ClearIcon,
-  EyeInvisibleOutlinedIcon,
-  EyeTwoToneIcon,
-} from '@aelf-design/internal-icons';
 import { HashAddress } from 'aelf-design';
+import { Space } from 'antd';
 
 const App: React.FC = () => {
-  // const token = useTheme();
   return (
-    <div>
-      <HashAddress address="oxffffffsjlkewieowiewoiewopipoe" />
-      <div></div>
-      <CircleCloseIcon />
-    </div>
+    <Space direction="vertical">
+      <HashAddress address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G" />
+      <HashAddress address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G" chain="tDVV" />
+      <HashAddress address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G" chain="tDVW" />
+      <HashAddress
+        address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+        preLen={8}
+        endLen={8}
+        ignorePrefixSuffix
+      />
+      <HashAddress address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G" hasCopy={false} />
+    </Space>
   );
 };
 

diff --git a/packages/component/src/Address/demos/event.tsx b/packages/component/src/Address/demos/event.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { HashAddress } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Space direction="vertical">
+      <HashAddress
+        address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+        preLen={8}
+        endLen={8}
+        addressClickCallback={(originAdd, finalAdd, event) => {
+          console.log(originAdd, finalAdd, event);
+        }}
+        ignoreEvent={true}
+        ignorePrefixSuffix
+      />
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/component/src/Address/demos/size.tsx b/packages/component/src/Address/demos/size.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { HashAddress } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Space direction="vertical">
+      <div>
+        small:
+        <HashAddress address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G" size="small" />
+      </div>
+      <div>
+        default:
+        <HashAddress
+          address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+          preLen={8}
+          endLen={8}
+          ignorePrefixSuffix
+          size="default"
+        />
+      </div>
+      <div>
+        large:
+        <HashAddress
+          address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+          hasCopy={false}
+          size="large"
+        />
+      </div>
+      <div>
+        ultra:
+        <HashAddress
+          address="2DKgy7GafbrYWGnhSC3iSYgM9ZfudYS2KLLr1rDPLF9nZfWA6G"
+          hasCopy={false}
+          size="ultra"
+        />
+      </div>
+    </Space>
+  );
+};
+
+export default App;
diff --git a/packages/component/src/Address/index.md b/packages/component/src/Address/index.md
@@ -7,29 +7,42 @@ group:
 
 # Address
 
+Aelf 新增组件
+
 ## Basic Usage
 
 <code src="./demos/basic.tsx"></code>
 
-## Copyable
+## Size
 
-<!-- <code src="./demos/copyable.tsx"></code> -->
+<code src="./demos/size.tsx"></code>
 
-## Format
+## Event
 
-<!-- <code src="./demos/format.tsx"></code> -->
+<code src="./demos/event.tsx"></code>
 
-## Custom Tooltip
+## 组件 token
 
-<!-- <code src="./demos/customTooltip.tsx"></code> -->
+```json
+customAddress: {
+  primaryLinkColor: string   // hash地址文本的基础颜色
+  primaryIconColor: string   // hash地址文本后面的icon的基础颜色
+  addressHoverColor: string  // hash地址文本、icon的hover颜色
+  addressActiveColor: string // hash地址文本、icon的active颜色
+}
+```
 
 ## API
 
 | Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
-| copyable | Address copyable | `boolean` | `false` | - |
-| address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
-| format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
-| locale | Multilingual settings | `Locale["address"]` | - | - |
+| --- | --- | --- | --- | --- | --- |
+| address | hash地址 | string | - | - |
+| chain | 主侧链信息 | `AELF \| tDVV \| tDVW` | `AELF` | - |
+| preLen | ...之前保留多少位 | number | 0 | - |
+| endLen | ...之后保留多少位 | number | 0 | - |
+| hasCopy | 是否展示复制按钮 | boolean | true | - |
+| addressClickCallback | 点击hash地址回调函数 | `(originAddress?: string,finalAddress?: string,e?: React.MouseEvent<HTMLElement>) => void` | - | - |
+| className | 设置最外层样式 | string | - | - |
+| size | 设置元素大小 | `small \| default \| large \| ultra` <br/>small: font-size:12px <br/>default: font-size:14px <br/>large: font-size:16px <br/>ultra: font-size:20px | `default` | - | - |
+| ignorePrefixSuffix | 忽略添加前后缀 | boolean | false | - |
+| ignoreEvent | 忽略绑定点击事件 | boolean | false | - |
diff --git a/packages/component/src/Progress/demos/basic.tsx b/packages/component/src/Progress/demos/basic.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { Progress } from 'aelf-design';
+import { Space } from 'antd';
+
+function Demo() {
+  return (
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <Progress percent={10} size={[300, 8]} strokeColor="#00ff00" showInfo={true} />
+      <Progress percent={50} size={[300, 12]} showInfo={true} />
+      <Progress percent={100} size={[300, 20]} />
+    </Space>
+  );
+}
+
+export default Demo;