docs: init alita-docs

alitajs · Apr 6, 2022 · ec8db9f · ec8db9f
2 parents f2523f4 + a82f4e9
commit ec8db9f
Show file tree

Hide file tree

Showing 35 changed files with 2,567 additions and 129 deletions.
diff --git a/.changeset/brown-brooms-matter.md b/.changeset/brown-brooms-matter.md
@@ -0,0 +1,8 @@
+---
+'alita': patch
+'@alita/create-alita': patch
+'@alita/native': patch
+'@alita/plugins': patch
+---
+
+docs: init alita-docs
diff --git a/.umirc.ts b/.umirc.ts
@@ -0,0 +1,4 @@
+export default {
+  mfsu: false,
+  plugins: ['@umijs/plugin-docs'],
+};
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,8 @@
+import { Hero, Features, FeatureItem } from 'umi';
+
+<Hero 
+title="A React framework based on umi."
+  description="File-system Routing、Zero Config、Novice friendly、Focus on business、continuously optimized delivery 'Best practices'"
+  buttons={[{label: "Get Started", href: "docs/tutorials/getting-started"}]} 
+  githubRepo="alitajs/alita"
+/>
diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md
@@ -0,0 +1,8 @@
+import { Hero, Features, FeatureItem } from 'umi';
+
+<Hero 
+  title="一个基于 Umi 的 React 前端框架"
+  description="文件即路由，配置内收，零基础入门，专注业务交付,不断优化的交付“最佳实践”"
+  buttons={[{label: "快速开始", href: "docs/tutorials/getting-started"}]} 
+  githubRepo="alitajs/alita"
+/>
diff --git a/docs/blog/README.md b/docs/blog/README.md
@@ -0,0 +1 @@
+# Blog Home
diff --git a/docs/components/alita-layout.md b/docs/components/alita-layout.md
@@ -0,0 +1,129 @@
+---
+nav:
+  title: 组件
+  order: 4
+title: '移动端全局布局'
+---
+
+# alita-layout
+
+The generic h5 layout in umi uses antd-mobile.
+
+> umi@2 和 alita@1 请使用 1.x 版本
+> 2.x 版本只支持 umi@3 和 alita@2
+
+**在 `alita` 里使用可以参考[mobileLayout](/config/config#mobilelayout)**
+
+## 使用
+
+```bash
+npm i @alitajs/alita-layout --save
+// or
+yarn add @alitajs/alita-layout
+```
+
+```jsx
+import BasicLayout from '@alitajs/alita-layout';
+
+render(<BasicLayout />, document.getElementById('root'));
+```
+
+## API
+
+### 所有参数说明
+
+| 属性          | 类型            | 必填 | 默认值 | 描述                                   |
+| ------------- | --------------- | ---- | ------ | -------------------------------------- |
+| tabBar        | TabBarProps     | 否   | 无     | 定义页面切换页信息，api 参考微信小程序 |
+| documentTitle | string          | 否   | 无     | 定义项目的默认 title                   |
+| titleList     | TitleListItem[] | 否   | 无     | 定义所有页面的 title                   |
+| navBar        | NavBarProps     | 否   | 无     | 定义头部导航信息                       |
+
+### tabBar 参数说明
+
+| 属性            | 类型       | 必填 | 默认值 | 描述                                                     |
+| --------------- | ---------- | ---- | ------ | -------------------------------------------------------- |
+| color           | HexColor   | 是   |        | tab 上的文字默认颜色，仅支持十六进制颜色                 |
+| selectedColor   | HexColor   | 是   |        | tab 上的文字选中时的颜色，仅支持十六进制颜色             |
+| backgroundColor | HexColor   | 是   |        | tab 的背景色，仅支持十六进制颜色                         |
+| list            | Array      | 是   |        | tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab |
+| position        | string     | 否   | bottom | tabBar 的位置，仅支持 bottom / top                       |
+| tabsGroup       | string[][] | 否   |        | 当一个项目需要多个 TabBar 时配置                         |
+
+> tabsGroup 仅仅标记 tab 分组，是否是 tab 页面，和其他参数依旧在 list 中配置
+
+比如有四个页面是 tab 页面，你先不管他们如何分组，全部按照 list 的配置，写到 list 里
+
+```ts
+const tabList: TabBarListItem[] = [
+  {
+    pagePath: '/',
+    title: '首页',
+    ...
+  },
+  {
+    pagePath: '/list',
+    title: '列表',
+    ...
+  },
+  {
+    pagePath: '/settings',
+    title: '设置',
+    ...
+  },
+  {
+    pagePath: '/show',
+    title: '展示',
+    ...
+  },
+];
+```
+
+然后再将他们进行分组，比如将首页和列表分为一组，当访问首页的时候，底部 TabBar 会有首页和列表两个切换项。
+
+```ts
+const tabBar: TarBarProp
+  list: tabList,
+  tabsGroup: [['/','/list'],['/setting','/show']]
+};
+```
+
+### list 参数说明
+
+| 属性             | 类型      | 必填 | 说明                                                   |
+| ---------------- | --------- | ---- | ------------------------------------------------------ |
+| pagePath         | string    | 是   | 页面路径，必须在 pages 中先定义                        |
+| text             | string    | 否   | tab 上按钮文字                                         |
+| iconPath         | string    | 否   | 图片路径，当 position 为 top 时，不显示 icon。         |
+| selectedIconPath | string    | 否   | 选中时的图片路径，当 position 为 top 时，不显示 icon。 |
+| iconSize         | string    | 否   | 0.44rem                                                |
+| badge            | string    | 否   | badge                                                  |
+| onPress          | function  | 否   | 点击事件                                               |
+| title            | string    | 否   | 定义页面标题                                           |
+| icon             | ReactNode | 否   | 自定义 tab 样式                                        |
+| selectedIcon     | ReactNode | 否   | 自定义选中 tab 样式                                    |
+
+> 关于页面标题，声明权重如下：
+> titleList > list.title > list.text > documentTitle > ''
+
+### navBar 参数说明
+
+| 属性           | 说明                       | 类型              | 默认值                                    |
+| -------------- | -------------------------- | ----------------- | ----------------------------------------- |
+| mode           | 模式                       | string            | 'dark' enum{'dark', 'light'}              |
+| icon           | 出现在最左边的图标占位符   | ReactNode         | 不在 tabsBar 的页面，会有默认左侧回退图标 |
+| leftContent    | 导航左边内容               | any               | 无                                        |
+| rightContent   | 导航右边内容               | any               | 无                                        |
+| onLeftClick    | 导航左边点击回调           | (e: Object): void | 有左侧回退图标的默认事件是返回上一页      |
+| navList        | 单独设置某些页面的 navbar  | NarBarListItem    | 无                                        |
+| hideNavBar     | 隐藏 NavBar，默认有 NarBar | boolean           | false                                     |
+| fixed          | NavBar 固定在页面头部      | boolean           | false                                     |
+| pageBackground | 页面的背景颜色             | string            | '#FFF'                                    |
+| pageTitle      | 页面标题                   | string            | 无，优先级最高                            |
+
+### navList 参数说明
+
+| 属性     | 说明              | 类型        | 默认值 |
+| -------- | ----------------- | ----------- | ------ |
+| pagePath | 路由名称          | string      | 无     |
+| navBar   | 当前路由的 navBar | NavBarProps | 无     |
diff --git a/docs/components/d-a-d.md b/docs/components/d-a-d.md
@@ -0,0 +1,92 @@
+---
+title: '移动端拖拽实现'
+---
+
+# DragAndDrop
+
+一个 react 的 dnd 封装，兼容手机端，简化用法。
+
+## 用法
+
+```bash
+yarn add @alitajs/dnd
+```
+
+使用 `DndProvider` 包裹你的上下文，不一定是根节点上，也可以是任意的不容易发生变动的页面根节点都可以。
+
+> 可以直接安装插件 `umi-plugin-dnd`
+
+## API
+
+### Drag
+
+将允许被拖动的节点，用 `Drag` 包裹
+
+#### data
+
+- 参数类型：`any`
+- 描述：在拖动事件响应的时候可以取到它,你可以写满足你判断的任意数据
+- 是否必须: 是
+- 默认值：无
+
+#### type
+
+- 参数类型：`String`
+- 描述：描述拖放组件的类型，只有同类型的组件才会互相响应
+- 是否必须: 是
+- 默认值：'dragBox'
+
+#### icon
+
+- 参数类型：`image`
+- 描述：添加被拖动时的预览图片，在移动端无效
+- 是否必须: 否
+- 默认值：无
+
+### Drop
+
+将允许被放置的节点，用 `Drop` 包裹
+
+#### onDrop
+
+- 参数类型：`func`
+- 描述：被放置时响应的函数
+- 是否必须: 是
+- 默认值：无
+
+#### data
+
+- 参数类型：`any`
+- 描述：在拖动事件响应的时候可以取到它,你可以写满足你判断的任意数据
+- 是否必须: 是
+- 默认值：无
+
+#### type
+
+- 参数类型：`String`
+- 描述：描述拖放组件的类型，只有同类型的组件才会互相响应
+- 是否必须: 是
+- 默认值：'dragBox'
+
+#### style
+
+- 参数类型：`Style`
+- 描述：组件的默认样式
+- 是否必须: 否
+- 默认值：无
+
+#### canDropStyle
+
+- 参数类型：`Style`
+- 描述：组件的允许被放置时的样式，是一个中间状态
+- 是否必须: 否
+- 默认值：无
+
+#### onOverStyle
+
+- 参数类型：`Style`
+- 描述：组件的允许将被放置时的样式，是一个 hover 状态
+- 是否必须: 否
+- 默认值：`{ border: '1px dashed black',}`
+
+> 有想过使用高阶组件或者 hooks 实现，实际使用中，发现标签包裹最好用
diff --git a/docs/components/d-d.md b/docs/components/d-d.md
@@ -0,0 +1,91 @@
+---
+---
+
+# 移动端的表单方案
+
+```bash
+yarn add @alitajs/dform
+```
+
+## 表单组件
+
+封装常用的表单组件，将 antd-mobile 的组件，改成受控组件。
+
+官方用法
+
+```ts
+<InputItem
+  {...getFieldProps('autofocus')}
+  clear
+  placeholder="auto focus"
+  ref={el => (this.autoFocusInst = el)}
+>
+  标题
+</InputItem>
+```
+
+使用@alitajs/dform
+
+```ts
+<NomarInput name="autofocus" placeholder="auto focus" title="标题" />
+```
+
+## 动态表单
+
+```ts
+<List renderHeader={() => 'Customize to focus'}>
+  <InputItem
+    {...getFieldProps('autofocus')}
+    clear
+    placeholder="auto focus"
+    ref={el => (this.autoFocusInst = el)}
+  >
+    标题
+  </InputItem>
+  <Picker
+    extra="请选择(可选)"
+    data={district}
+    title="Areas"
+    {...getFieldProps('district', {
+      initialValue: ['340000', '341500', '341502'],
+      rules: [{ required: true, message: `请输入${title}` }],
+    })}
+    onOk={e => console.log('ok', e)}
+    onDismiss={e => console.log('dismiss', e)}
+  >
+    <List.Item arrow="horizontal">Multiple & cascader</List.Item>
+  </Picker>
+</List>
+```
+
+使用@alitajs/dform
+
+```ts
+const formData = [
+  {
+    type: 'input',
+    fieldProps: 'autofocus',
+    required: true,
+    placeholder: 'auto focus',
+    title: '标题',
+    inputType: 'text',
+  },
+  {
+    type: 'select',
+    fieldProps: 'district',
+    required: true,
+    placeholder: '请选择(可选)',
+    title: 'Multiple & cascader',
+    data: district,
+  },
+];
+<DynamicForm data={formData} />;
+```
+
+## 可视化编辑方案
+
+方案灵感来源于 [ava](https://github.com/antvis/ava) 的 `autoChart`，用法和触发条件一致，都是 data 为空且在开发状态的时候，显示编辑表单按钮。用户可以强制设定 `isDev` 来在任意环境中使用。
+
+![2020-01-20 17 16 23](https://user-images.githubusercontent.com/11746742/72713840-b37bc900-3ba8-11ea-8a94-d19cdd39be53.gif)
+
+更多详情，请点击[dform 官网](https://dform.alitajs.com/) 欢迎交流。感谢！
diff --git a/docs/components/gesture-password.md b/docs/components/gesture-password.md
@@ -0,0 +1,34 @@
+---
+title: '手势密码'
+---
+
+# Gesture Password (手势密码)
+
+<img height="300" src="https://user-images.githubusercontent.com/11746742/68995608-735b4a00-08ca-11ea-8402-2d5229beaceb.png"></img>
+
+## install
+
+```bash
+// npm
+npm install @alitajs/gesture-password-react --save
+
+// yarn
+yarn add @alitajs/gesture-password-react
+```
+
+## usage
+
+```ts
+import React from 'react';
+import GesturePassword from '@alitajs/gesture-password-react';
+
+export default () => {
+  const config = {
+    width: 375,
+    height: 300,
+    onChange: (data: any) => console.log(data), // get gesture password
+  };
+
+  return <GesturePassword {...config} />;
+};
+```