From 0534903287425fece1b236170af0e1e0f4541c38 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Mon, 21 Mar 2022 00:08:47 +0800 Subject: [PATCH] =?UTF-8?q?:truck:=20chore:=20=E4=BC=98=E5=8C=96=E7=9B=AE?= =?UTF-8?q?=E5=BD=95=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/menu.ts | 37 ++++++++++--------- docs/biz-components.md | 11 ++++++ docs/components.md | 11 +++--- docs/guide.md | 2 +- packages/asset-gallery/src/asset-gallery.md | 2 +- .../heatmap-calendar/src/heatmap-calendar.md | 2 +- packages/journey-map/src/journey-map.md | 2 +- packages/layout-kit/src/Flexbox.tsx | 31 ++++++++-------- packages/mindflow/src/mindflow.md | 2 +- packages/user-panel/src/user-panel.md | 2 +- 10 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 docs/biz-components.md diff --git a/config/menu.ts b/config/menu.ts index e416f582..69a97746 100644 --- a/config/menu.ts +++ b/config/menu.ts @@ -2,32 +2,35 @@ export const menus = { '/components': [ { title: '说明', + children: ['components.md'], }, { - title: '通用组件', - children: [ - 'preloader', - 'page-loading', - 'float-label-input', - 'macos-traffic-light', - 'sortable-list', - ], + title: '信息展示', + children: ['preloader', 'page-loading'], }, { - title: '业务组件', - children: [ - 'asset-gallery', - 'journey-map', - 'mindflow', - 'heatmap-calendar', - 'user-panel', - ], + title: '用户操作', + children: ['macos-traffic-light', 'sortable-list'], }, { - title: 'LayoutKit 布局组件', + title: '布局 | LayoutKit', children: ['flexbox'], }, + { + title: '暂不分类', + children: ['float-label-input'], + }, + ], + '/biz-components': [ + { + title: '说明', + children: ['biz-components.md'], + }, + { + title: '业务组件', + children: ['asset-gallery', 'journey-map', 'mindflow', 'heatmap-calendar', 'user-panel'], + }, ], '/guide': [ { diff --git a/docs/biz-components.md b/docs/biz-components.md new file mode 100644 index 00000000..eaf8f2cb --- /dev/null +++ b/docs/biz-components.md @@ -0,0 +1,11 @@ +--- +title: 说明 +order: 1 +nav: + title: 高阶组件 + order: 2 +--- + +## 高阶组件 + +高阶组件基本上都是一些业务组件，具有很明确的特定领域属性。 diff --git a/docs/components.md b/docs/components.md index 71a80c2a..52a64fc3 100644 --- a/docs/components.md +++ b/docs/components.md @@ -1,14 +1,13 @@ --- -title: 组件分类 +title: 说明 order: 1 nav: - title: 组件库 + title: 基础组件 order: 2 --- -## 组件分类 +## 基础组件 -我将组件库分为两类: +一些简单的基础组件, 在特定的一些场景下做到了基本上可以直接拿来就用。 -- **通用组件**: 在大部分场景下可以通用的组件, 基本上可以直接拿来就用 -- **业务组件**: 针对某类特定场景下的组件 +通用组件的开发主要目的是为了满足自己使用的诉求，并做个组件资产沉淀。因为有些组件是 antd 肯定不会准备做的（例如 macOSTrafficLight），但是在一些特定的场景中会反复用到（例如 Electron）。 diff --git a/docs/guide.md b/docs/guide.md index 4addbe84..a6f8468f 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -15,4 +15,4 @@ nav: - 业务组件如果可以沉淀,那么未来可以给自己复用 - 终身计划的一环 -首要目的不是给外部使用,而是作为我个人设计资源的整理 +首要目的不是给外部使用,而是作为我个人设计资源的整理。 diff --git a/packages/asset-gallery/src/asset-gallery.md b/packages/asset-gallery/src/asset-gallery.md index daa2c89f..144533a2 100644 --- a/packages/asset-gallery/src/asset-gallery.md +++ b/packages/asset-gallery/src/asset-gallery.md @@ -3,7 +3,7 @@ title: AssetGallery 资产画廊 group: path: / nav: - path: /components + path: /biz-components --- # AssetGallery 资产画廊 diff --git a/packages/heatmap-calendar/src/heatmap-calendar.md b/packages/heatmap-calendar/src/heatmap-calendar.md index 85c4b5c3..df6d8ba4 100644 --- a/packages/heatmap-calendar/src/heatmap-calendar.md +++ b/packages/heatmap-calendar/src/heatmap-calendar.md @@ -3,7 +3,7 @@ title: HeatmapCalendar 活跃日历 group: path: / nav: - path: /components + path: /biz-components --- # HeatmapCalendar 活跃日历 diff --git a/packages/journey-map/src/journey-map.md b/packages/journey-map/src/journey-map.md index c82726f5..14448bc7 100644 --- a/packages/journey-map/src/journey-map.md +++ b/packages/journey-map/src/journey-map.md @@ -3,7 +3,7 @@ title: JourneyMap 用户旅程地图 group: path: / nav: - path: /components + path: /biz-components --- # Journey Map 用户旅程地图 diff --git a/packages/layout-kit/src/Flexbox.tsx b/packages/layout-kit/src/Flexbox.tsx index 7a99eb0a..b326ad48 100644 --- a/packages/layout-kit/src/Flexbox.tsx +++ b/packages/layout-kit/src/Flexbox.tsx @@ -1,22 +1,24 @@ import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react'; import styled from 'styled-components'; -import { - getCssValue, - getFlexDirection, - isHorizontal, - isVertical, -} from './utils'; -import type { - ContentDistribution, - ContentPosition, - FlexDirection, -} from './type'; +import { getCssValue, getFlexDirection, isHorizontal, isVertical } from './utils'; +import type { ContentDistribution, ContentPosition, FlexDirection } from './type'; export type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24; export interface IFlexbox { + // 语法糖 api + /** + * 是否横向 + */ horizontal?: boolean; + /** + * 横向居中 + */ + horizontalCenter?: boolean; + + // 基础 api + direction?: FlexDirection; distribution?: ContentDistribution; align?: ContentPosition; @@ -49,9 +51,7 @@ export const Flexbox: FC = styled.div.attrs(() => ({ if ( isHorizontal(props.direction, props.horizontal) && !props.width && - ['space-between', 'space-around', 'space-evenly'].includes( - props.distribution, - ) + ['space-between', 'space-around', 'space-evenly'].includes(props.distribution) ) return '100%'; @@ -63,8 +63,7 @@ export const Flexbox: FC = styled.div.attrs(() => ({ > *:not(:last-child) { margin-right: ${(props) => - isHorizontal(props.direction, props.horizontal) && - getCssValue(props.gap)}; + isHorizontal(props.direction, props.horizontal) && getCssValue(props.gap)}; margin-bottom: ${(props) => isVertical(props.direction, props.horizontal) && getCssValue(props.gap)}; } diff --git a/packages/mindflow/src/mindflow.md b/packages/mindflow/src/mindflow.md index b4de033d..689bf377 100644 --- a/packages/mindflow/src/mindflow.md +++ b/packages/mindflow/src/mindflow.md @@ -4,7 +4,7 @@ order: 1 group: path: / nav: - path: /components + path: /biz-components --- # Mindflow 思流 diff --git a/packages/user-panel/src/user-panel.md b/packages/user-panel/src/user-panel.md index cdb9a8f6..6affdde9 100644 --- a/packages/user-panel/src/user-panel.md +++ b/packages/user-panel/src/user-panel.md @@ -3,7 +3,7 @@ title: UserPanel 用户面板 group: path: / nav: - path: /components + path: /biz-components --- # UserPanel 用户面板