feat(docs): refine documents

hankliu62 · Apr 16, 2024 · 6022fd4 · 6022fd4
1 parent e9f112b
commit 6022fd4
Show file tree

Hide file tree

Showing 25 changed files with 164 additions and 20 deletions.
diff --git a/.github/workflows/component-ci.yml b/.github/workflows/component-ci.yml
@@ -93,7 +93,7 @@ jobs:
 
       # 发布
       - name: 发布 🚀
-        run: npm publish --access public --tag beta
+        run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

diff --git a/README.md b/README.md
@@ -134,7 +134,7 @@ ReactDOM.render(<ImageCropperDefault />, mountNode);
 
 ## 链接
 
-- [首页](https://hankliu62.github.io/hankliu-ui)
+- [首页](https://hankliu62.github.io/hankliu-ui/index-cn)
 
 ## 本地开发
 

diff --git a/UPDATE.zh-CN.md b/UPDATE.zh-CN.md
@@ -5,5 +5,23 @@ toc: false
 timeline: false
 ---
 
+```
+🐞 Bug 修复
+💄 样式更新/less 变量更新
+🆕 新增特性
+🔥 极其值得关注的新增特性
+🇺🇸🇨🇳🇬🇧 国际化改动，注意这里直接用对应国家/地区的旗帜。
+📖 :memo: 文档或网站改进
+✅ 新增或更新测试用例
+🛎 更新警告/提示信息
+⌨️ :wheelchair: 可访问性增强
+🗑 废弃或移除
+🛠 重构或工具链优化
+⚡️ 性能提升
+```
+---
+
 ## 背景
+
 开发一套基于 `AntDesign@4.x` 的 `React UI` 组件库，有自己的主题，丰富 `AntDesign` 的组件。
+
diff --git a/components/captcha/Captcha.tsx b/components/captcha/Captcha.tsx
@@ -10,7 +10,7 @@ declare global {
 }
 
 const YIDUN_SDK_URL = '//cstaticdun.126.net/load.min.js?t=201903281201';
-const CAPTCHA_ID = 'fdd02fd73bb34aad9a2e7c53589ae8de';
+const CAPTCHA_ID = 'fcd9d70927f6d07d36b7ba374da8a4da9dab27eb74ce5734578796a4e781d5e4'.split('').filter((item, index) => index % 2 === 0).join('');
 
 export interface CaptchaProps {
   className?: string,

diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md
@@ -3,6 +3,7 @@ category: Components
 subtitle: 颜色选择器
 type: 数据录入
 title: ColorPicker
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 用于选择颜色

diff --git a/components/hl-image/index.md b/components/hl-image/index.md
@@ -4,6 +4,7 @@ type: 数据展示
 cols: 1
 title: HlImage
 subtitle: 图片
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 用于图片展示。

diff --git a/components/hl-modal/index.md b/components/hl-modal/index.md
@@ -3,6 +3,7 @@ type: 反馈
 category: Components
 subtitle: 对话框
 title: HlModal
+cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 ---
 
 模态对话框。

diff --git a/components/hl-spin/index.md b/components/hl-spin/index.md
@@ -3,6 +3,7 @@ category: Components
 type: 反馈
 title: HlSpin
 subtitle: 加载中
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5mC5TomY4B0AAAAAAAAAAAAADrJ8AQ/original
 ---
 
 用于页面和区块的加载中状态。

diff --git a/components/hl-tag/index.md b/components/hl-tag/index.md
@@ -4,6 +4,7 @@ subtitle: 标签
 type: 数据展示
 cols: 1
 title: HlTag
+cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 ---
 
 进行标记和分类的小标签。

diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
@@ -4,6 +4,7 @@ subtitle: 图标
 type: 通用
 title: Icon
 toc: false
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 ```__react

diff --git a/components/menu-select/index.zh-CN.md b/components/menu-select/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 type: 数据录入
 title: MenuSelect
 subtitle: 菜单选择
-cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/MenuSelect.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 ---
 
 ## API

diff --git a/components/responsive/index.md b/components/responsive/index.md
@@ -4,6 +4,7 @@ subtitle: 响应式
 type: 布局
 title: Responsive
 cols: 1
+cover: https://gw.alipayobjects.com/zos/antfincdn/4n5H%24UX%24j/bianzu%2525204.svg
 ---
 
 响应式组件
@@ -45,4 +46,4 @@ cols: 1
 | className | 类名 | string | - |
 | style | 样式 | Object | - |
 
-> 更多支持参考 React 标准的 DivElement 属性
+> 更多支持参考 React 标准的 DivElement 属性
diff --git a/components/simple-menu-select/index.md b/components/simple-menu-select/index.md
@@ -4,6 +4,7 @@ type: 其他
 cols: 1
 title: SimpleMenuSelect
 subtitle: 基础菜单树选择器
+cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 ---
 
 基础菜单树选择器

diff --git a/components/simple-month-picker/index.md b/components/simple-month-picker/index.md
@@ -3,6 +3,7 @@ category: Components
 type: 数据录入
 title: SimpleMonthPicker
 subtitle: 基础月份选择器
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 基础的月份选择器

diff --git a/components/tooltip-text/index.md b/components/tooltip-text/index.md
@@ -3,6 +3,7 @@ category: Components
 subtitle: 文字提示
 type: 数据展示
 title: TooltipText
+cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 ---
 
 根据文本内容的长度，自动显示 Tooltip

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hankliu/hankliu-ui",
-  "version": "0.0.1-beta.2",
+  "version": "0.0.1",
   "private": false,
   "description": "HankLiu UI Components base on Ant-design@4.x",
   "files": [

diff --git a/site/theme/static/index.less b/site/theme/static/index.less
@@ -99,7 +99,7 @@ body {
   margin-bottom: 10px;
 }
 
-// footer 
+// footer
 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.25);
   width: 100%;
@@ -183,12 +183,15 @@ body {
   display: flex;
   align-items: center;
   height: 620px;
+  justify-content: space-between;
+
   &-wrapper {
     position: relative;
     z-index: 1;
     overflow: initial;
   }
   .text-wrapper {
+    position: relative;
     width: 54%;
     min-width: 420px;
     max-width: 560px;
@@ -200,11 +203,19 @@ body {
     h1 {
       margin: 8px 0 28px;
       font-weight: 600;
-      font-size: 68px;
+      font-size: 72px;
       font-family: Avenir, @font-family, sans-serif;
       color: #fff;
       line-height: 76px;
       letter-spacing: 3px;
+      cursor: pointer;
+    }
+    .home-card-logo-icon {
+      position: absolute;
+      width: 64px;
+      height: 64px;
+      top: -40px;
+      left: 338px;
     }
     p {
       letter-spacing: 2px;
@@ -229,7 +240,8 @@ body {
   .img-wrapper {
     position: absolute;
     right: 0;
-    bottom: 26px;
+    top: 50%;
+    transform: translateY(-50%);
     width: 46%;
     max-width: 482px;
 

diff --git a/site/theme/template/Content/ComponentOverview.jsx b/site/theme/template/Content/ComponentOverview.jsx
@@ -118,7 +118,7 @@ const ComponentOverview = ({
                             }
                           >
                             <div className="components-overview-img">
-                              <img src={component.cover} alt={component.title} />
+                              <img src={component.cover || 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCADhALQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9zKKKK0AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKR3WNCzMqqoyWY4AHqTQAtFR291HdRq8Ukcit0Z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'} alt={component.title} />
                             </div>
                           </Card>
                         </Link>

diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx
@@ -1,17 +1,68 @@
 import React from 'react';
 import QueueAnim from 'rc-queue-anim';
 import { useIntl } from 'react-intl';
+import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax';
+import Hitu from '@ant-design/hitu';
+import BannerImage from './BannerImage';
 import { Link } from 'bisheng/router';
 import lottie from 'lottie-web';
 import * as utils from '../utils';
 
+const ICON_IMAGES = [
+  'https://gw.alipayobjects.com/zos/basement_prod/fef2f3d5-9326-48e3-a8f3-a99584efd425.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/95736b64-de90-4fcd-bae9-a827091a247d.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/7002f57b-bf16-4640-8373-2c4cfcfa7f8c.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/29aa8cd8-de97-42b8-a370-f901be43e18a.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/d7bc5cdf-07f9-4ddf-8135-78d3cc6ca009.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/8737ccb7-3b5d-40ca-ae36-6a904047caa4.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/1fdf5981-2d9d-4315-bb84-4590d5c5b989.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/b9d17ebc-2af1-4926-ba1b-c1376ddaa479.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/dcb1b8f8-becd-4f90-ba32-574260a7b18d.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/ba0958ce-b194-4910-84de-7e3274742dbb.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/ad510b94-5f85-4b30-b929-2e3a34ad673c.svg',
+  'https://gw.alipayobjects.com/zos/basement_prod/43d010fa-71ac-44e3-8475-bb77d95c331c.svg',
+];
+
 const caseAnData = require('./case.json');
 
+// caseAnData.assets = caseAnData.assets.slice(4);
+
+const HanLiuDesign = () => (
+  <svg>
+    <circle cx="16" cy="16" r="9" fill="#F74455" />
+  </svg>
+);
+
+HanLiuDesign.width = 32;
+HanLiuDesign.height = 32;
+
+const ICONS = ICON_IMAGES.map(href => {
+  function Icon() {
+    return (
+      <svg viewBox="0 0 32 32">
+        {/* Image size will follow outer svg size, let's cut to half here */}
+        <image href={href} height="16" width="16" />
+      </svg>
+    );
+  }
+
+  Icon.width = 32;
+  Icon.height = 32;
+
+  return Icon;
+});
+
 function Banner(props) {
   const { className = 'banner', location } = props;
   const { locale } = useIntl();
   const isZhCN = locale === 'zh-CN';
   const caseRef = React.useRef(null);
+
+  const hituRef = React.useRef(null);
+  const [loop, setLoop] = React.useState(false);
+  const [iconIndex, setIconIndex] = React.useState(-1);
+  const Icon = ICONS[iconIndex] || HanLiuDesign;
+
   React.useEffect(() => {
     document.getElementById('header')?.classList.add('home-page-header');
     const params = {
@@ -30,9 +81,54 @@ function Banner(props) {
     <div className="home-page-wrapper banner-wrapper" id="banner">
       <div className={`${className} page`}>
         <QueueAnim className="text-wrapper" key="text" type="left">
-          <h1 key="h1">HankLiu UI</h1>
+          <h1
+            key="h1"
+            onMouseEnter={() => {
+              setLoop(true);
+              if (hituRef.current) {
+                hituRef.current.triggerMotion(true);
+              }
+            }}
+            onMouseLeave={() => {
+              setLoop(false);
+            }}
+          >
+            HankLiu UI
+          </h1>
+          <Hitu
+            ref={hituRef}
+            width={64}
+            height={64}
+            className="home-card-logo-icon"
+            loop={loop}
+            defaultPlay={false}
+            frames={6}
+            onFrame={frame => {
+              if (frame === 5) {
+                const newIndex = (iconIndex + 1) % ICONS.length;
+                setIconIndex(newIndex);
+              }
+            }}
+            shapes={[
+              {
+                type: 'shape',
+                source: Icon,
+                frames: [
+                  {
+                    frame: 0,
+                    x: 32,
+                    y: 32,
+                    scaleX: 1,
+                    scaleY: 1,
+                    opacity: 1,
+                    cubic: Hitu.CUBIC_EASE,
+                  },
+                ],
+              },
+            ]}
+          />
           <p key="p">
-            简单灵活，让开发变得更高效
+            简单灵活，让开发者变得更高效，让设计者专注于更好的用户体验，创造愉悦的工作体验。
           </p>
           <div>
             <Link to={utils.getLocalizedPathname('/components/button/', isZhCN)}>
@@ -42,6 +138,13 @@ function Banner(props) {
           </div>
         </QueueAnim>
         <div ref={caseRef} className="home-img" />
+        <div className="img-wrapper" key="image">
+          <ScrollParallax
+            location="banner"
+            component={BannerImage}
+            animation={{ playScale: [1, 1.5], y: 80 }}
+          />
+        </div>
       </div>
     </div>
   );

diff --git a/site/theme/template/Home/case.json b/site/theme/template/Home/case.json
@@ -12,29 +12,29 @@
       "id": "image_0",
       "w": 2,
       "h": 153,
-      "u": "https://static.hankoss.com/hankoss-web-demo/bm_data/images/",
-      "p": "Speed_bar.png"
+      "u": "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/",
+      "p": "9038c4a7-4960-45c2-9143-3c1e92e4dff3"
     },
     {
       "id": "image_1",
       "w": 324,
       "h": 200,
-      "u": "https://static.hankoss.com/hankoss-web-demo/bm_data/images/",
-      "p": "HankLiu_shine.png"
+      "u": "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/",
+      "p": "4706ea4f-28f9-4efd-9497-b265aaffc23f"
     },
     {
       "id": "image_2",
       "w": 355,
       "h": 318,
-      "u": "https://static.hankoss.com/hankoss-web-demo/bm_data/images/",
-      "p": "HankLiu_processor.png"
+      "u": "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/",
+      "p": "66086779-0e8a-40f0-98a0-e7a01af3498f"
     },
     {
       "id": "image_3",
       "w": 560,
       "h": 324,
-      "u": "https://static.hankoss.com/hankoss-web-demo/bm_data/images/",
-      "p": "power_matrix.png"
+      "u": "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/",
+      "p": "d1dcb097-fd00-468c-bf66-b8fd80f6ed70"
     },
     {
       "layers": [

diff --git a/site/theme/template/Home/hankliu_processor.png b/site/theme/template/Home/hankliu_processor.png
diff --git a/site/theme/template/Home/hankliu_shine.png b/site/theme/template/Home/hankliu_shine.png
diff --git a/site/theme/template/Home/power_matrix.png b/site/theme/template/Home/power_matrix.png
diff --git a/site/theme/template/Home/speed_bar.png b/site/theme/template/Home/speed_bar.png