From 6022fd40adf1ed075719ee3279327de3dfa0f6ee Mon Sep 17 00:00:00 2001 From: hankliu <397694072@qq.com> Date: Tue, 16 Apr 2024 21:22:44 +0800 Subject: [PATCH] feat(docs): refine documents --- .github/workflows/component-ci.yml | 2 +- README.md | 2 +- UPDATE.zh-CN.md | 18 +++ components/captcha/Captcha.tsx | 2 +- components/color-picker/index.zh-CN.md | 1 + components/hl-image/index.md | 1 + components/hl-modal/index.md | 1 + components/hl-spin/index.md | 1 + components/hl-tag/index.md | 1 + components/icon/index.zh-CN.md | 1 + components/menu-select/index.zh-CN.md | 2 +- components/responsive/index.md | 3 +- components/simple-menu-select/index.md | 1 + components/simple-month-picker/index.md | 1 + components/tooltip-text/index.md | 1 + package.json | 2 +- site/theme/static/index.less | 18 ++- .../template/Content/ComponentOverview.jsx | 2 +- site/theme/template/Home/Banner.jsx | 107 +++++++++++++++++- site/theme/template/Home/case.json | 16 +-- .../theme/template/Home/hankliu_processor.png | Bin 0 -> 60521 bytes site/theme/template/Home/hankliu_shine.png | Bin 0 -> 35545 bytes site/theme/template/Home/power_matrix.png | Bin 0 -> 80213 bytes site/theme/template/Home/speed_bar.png | Bin 0 -> 846 bytes site/theme/template/Layout/Header/Logo.less | 1 + 25 files changed, 164 insertions(+), 20 deletions(-) create mode 100644 site/theme/template/Home/hankliu_processor.png create mode 100644 site/theme/template/Home/hankliu_shine.png create mode 100644 site/theme/template/Home/power_matrix.png create mode 100644 site/theme/template/Home/speed_bar.png diff --git a/.github/workflows/component-ci.yml b/.github/workflows/component-ci.yml index ae76099..a1fbbe5 100644 --- 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 index 4b4635e..f27f89b 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ ReactDOM.render(, 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 index de63e01..8dbd29c 100644 --- 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 index bd973ad..2c9ba42 100644 --- 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 index 7af9bc9..0297830 100644 --- 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 index 7239672..56dbc96 100644 --- 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 index d1e69b8..57018e9 100644 --- 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 index 721972f..7f1c121 100644 --- 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 index c5b7afd..e1c15a3 100644 --- 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 index 99815a5..6cfaf08 100644 --- 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 index 12b59d9..edcf971 100644 --- 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 index d85f8c4..e26f810 100644 --- 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 属性 \ No newline at end of file +> 更多支持参考 React 标准的 DivElement 属性 diff --git a/components/simple-menu-select/index.md b/components/simple-menu-select/index.md index c97e886..6c6ca78 100644 --- 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 index 2b7a6e7..6c9e375 100644 --- 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 index f7e715d..4a81653 100644 --- 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 index 89689af..a9b269d 100644 --- 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 index a1dae41..9b3364f 100644 --- 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 index efa4fdb..4f53285 100644 --- a/site/theme/template/Content/ComponentOverview.jsx +++ b/site/theme/template/Content/ComponentOverview.jsx @@ -118,7 +118,7 @@ const ComponentOverview = ({ } >
- {component.title} + ( + + + +); + +HanLiuDesign.width = 32; +HanLiuDesign.height = 32; + +const ICONS = ICON_IMAGES.map(href => { + function Icon() { + return ( + + {/* Image size will follow outer svg size, let's cut to half here */} + + + ); + } + + 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) {