init: docs
This commit is contained in:
Emil Zhai
parent
f735dd0c88
commit
3e1ddcd16e
|
|
@ -0,0 +1,170 @@
|
|||
import path from 'path';
|
||||
import { IConfig } from '@umijs/core';
|
||||
import { defineConfig } from 'dumi';
|
||||
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
|
||||
|
||||
const config: IConfig = {
|
||||
title: ' ',
|
||||
favicon: 'https://img13.360buyimg.com/imagetools/jfs/t1/204416/31/13736/8631/617f8334E9ae79a1c/5b96dfdce922e5fb.png',
|
||||
logo: 'https://img11.360buyimg.com/imagetools/jfs/t1/156025/11/22552/175523/617fb164E678b9642/6b8c55c5079b9819.jpg',
|
||||
outputPath: 'docs-dist',
|
||||
hash: true,
|
||||
dynamicImport: {
|
||||
loading: '/docs/Loading.js',
|
||||
},
|
||||
locales: [['zh-CN', '中文']],
|
||||
ignoreMomentLocale: false,
|
||||
navs: [
|
||||
{
|
||||
title: '渲染器',
|
||||
path: '/drip-table',
|
||||
children: [
|
||||
{ title: '使用指南', path: '/drip-table' },
|
||||
{ title: '常见问题', path: '/drip-table/faq' },
|
||||
{ title: '案例展示', path: '/drip-table/sample' },
|
||||
{ title: '更新日志', path: '/drip-table/changelog' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '生成器',
|
||||
path: '/drip-table-generator',
|
||||
children: [
|
||||
{ title: '使用指南', path: '/drip-table-generator' },
|
||||
{ title: '常见问题', path: '/drip-table-generator/faq' },
|
||||
{ title: '案例展示', path: '/drip-table-generator/preview' },
|
||||
{ title: '更新日志', path: '/drip-table-generator/changelog' },
|
||||
],
|
||||
},
|
||||
],
|
||||
menus: {
|
||||
'/drip-table': [
|
||||
{
|
||||
title: '指南',
|
||||
path: '/drip-table/guide',
|
||||
children: [
|
||||
'/drip-table/guide/index.md',
|
||||
'/drip-table/guide/fast-start.md',
|
||||
'/drip-table/guide/basic-demo.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '功能',
|
||||
path: '/drip-table/functions',
|
||||
children: [
|
||||
'/drip-table/functions/index.md',
|
||||
'/drip-table/functions/refs.md',
|
||||
'/drip-table/functions/event',
|
||||
'/drip-table/functions/api.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '常见问题',
|
||||
path: '/drip-table/faq',
|
||||
},
|
||||
{
|
||||
title: '案例展示',
|
||||
path: '/drip-table/sample',
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
path: '/drip-table/changelog',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
'/drip-table-generator': [
|
||||
{
|
||||
title: '使用指南',
|
||||
path: '/drip-table-generator/guide',
|
||||
children: [
|
||||
'/drip-table-generator/guide/index.md',
|
||||
'/drip-table-generator/guide/fast-start.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '使用教程',
|
||||
path: '/drip-table-generator/functions',
|
||||
children: [
|
||||
'/drip-table-generator/functions/index.md',
|
||||
'/drip-table-generator/functions/usage-pro.md',
|
||||
'/drip-table-generator/functions/api.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '常见问题',
|
||||
path: '/drip-table-generator/faq',
|
||||
},
|
||||
{
|
||||
title: '案例展示',
|
||||
path: '/drip-table-generator/preview',
|
||||
},
|
||||
{
|
||||
title: '更新日志',
|
||||
path: '/drip-table-generator/changelog',
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
mode: 'site',
|
||||
esbuild: {},
|
||||
publicPath: '/',
|
||||
exportStatic: {},
|
||||
extraBabelPlugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'antd',
|
||||
libraryDirectory: 'lib',
|
||||
style: true,
|
||||
},
|
||||
'antd',
|
||||
],
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: '@alifd/next',
|
||||
libraryDirectory: 'lib',
|
||||
},
|
||||
'@alifd/next',
|
||||
],
|
||||
],
|
||||
chainWebpack(config, { webpack }) {
|
||||
config.plugin('monaco-editor').use(MonacoWebpackPlugin);
|
||||
},
|
||||
alias: {
|
||||
'drip-table': path.resolve(__dirname, './packages/drip-table/dist'),
|
||||
'drip-table-driver-antd': path.resolve(__dirname, './packages/drip-table-driver-antd/dist'),
|
||||
'drip-table-generator': path.resolve(__dirname, './packages/drip-table-generator/dist'),
|
||||
},
|
||||
// more config: https://d.umijs.org/config
|
||||
styles: [
|
||||
`.__dumi-default-navbar-logo {width:146px !important;}
|
||||
.__dumi-default-layout-hero,
|
||||
.__dumi-default-layout-toc li a.active::before,
|
||||
.__dumi-default-menu-inner ul li a::before,
|
||||
.__dumi-default-menu-inner ul li > span::before,
|
||||
.__dumi-default-navbar nav > span > a.active::after,
|
||||
.__dumi-default-menu-list > li > a::after
|
||||
{ background-image: linear-gradient( 90deg, #00C6FF 0%, #0072FF 100% );}`,
|
||||
'.__dumi-default-layout-hero h1 { color: #fff !important; }',
|
||||
'.__dumi-default-layout-hero h1 + div .markdown { color: #fff !important; }',
|
||||
'.__dumi-default-layout-hero button { border: 1px solid #fff !important; color: #fff !important; }',
|
||||
'.__dumi-default-layout-hero a:last-child button { background: #fff !important; color: #2b64ff !important; }',
|
||||
`.__dumi-default-navbar nav a:hover,
|
||||
.__dumi-default-navbar a.active,
|
||||
.__dumi-default-menu-inner ul li,
|
||||
.__dumi-default-layout-toc li a:hover,
|
||||
ul[role='slug-list'] li > a.active,
|
||||
.__dumi-default-menu-inner ul li a:hover,
|
||||
.__dumi-default-menu-inner ul li > span:hover,
|
||||
.__dumi-default-menu-inner ul li a.active,
|
||||
.__dumi-default-menu-inner ul li > span.active,
|
||||
.__dumi-default-layout-footer-meta > span:last-child::before
|
||||
{ color: #2b64ff !important; }`,
|
||||
'.__dumi-default-menu-list > li > a.active { background: linear-gradient(to left, #f8faff, rgb(248 255 253 / 0%)); !important; }',
|
||||
'.__dumi-default-layout-content { max-width:100% !important; }',
|
||||
'.__dumi-default-layout[data-route="/"] .__dumi-default-layout-footer-meta { display: none; }',
|
||||
],
|
||||
};
|
||||
|
||||
export default defineConfig(config);
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# ✨ 贡献者
|
||||
|
||||
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
|
||||
<!-- prettier-ignore-start -->
|
||||
<!-- markdownlint-disable -->
|
||||
<table>
|
||||
<tr>
|
||||
<td align="center"><a href="https://zhaiyiming.com/"><img src="https://avatars.githubusercontent.com/u/1808990?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Emil Zhai</b></sub></a><br /><a href="https://github.com/JDFED/drip-form/issues?q=author%3Atinymins" title="Bug reports">🐛</a> <a href="https://github.com/JDFED/drip-form/commits?author=tinymins" title="Code">💻</a></td>
|
||||
<td align="center"><a href="https://github.com/helloqian12138"><img src="https://avatars.githubusercontent.com/u/13211910?v=4?s=100" width="100px;" alt=""/><br /><sub><b>helloqian12138</b></sub></a><br /><a href="https://github.com/JDFED/drip-form/issues?q=author%3Ahelloqian12138" title="Bug reports">🐛</a> <a href="https://github.com/JDFED/drip-form/commits?author=helloqian12138" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- markdownlint-restore -->
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
||||
|
||||
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
# DripTable Development Guide
|
||||
|
||||
## Before Development
|
||||
|
||||
**Knowledge points that you need to master before developing**
|
||||
|
||||
### What is JSON Schema?
|
||||
|
||||
1. `JSON Schema` is a vocabulary that allows you to annotate and validate JSON documents.
|
||||
2. [JSON Schema official document](http://json-schema.org/)
|
||||
3. [JSON Schema guide](https://www.jianshu.com/p/1711f2f24dcf?utm_campaign=hugo)
|
||||
|
||||
### What is Lerna?
|
||||
|
||||
1. `Lerna` is a tool for managing JavaScript projects with multiple packages.
|
||||
2. [Lerna official document](https://lerna.js.org/)
|
||||
3. [Lerna guide](https://www.jianshu.com/p/09fd41cdbbc4)
|
||||
|
||||
## Environment
|
||||
|
||||
- install `git`, `node`, `yarn`. version requirement: `node` >=13.14.0, `yarn` >= 1.0.0
|
||||
- configure [NPM](https://registry.npmjs.com/) source if needed.
|
||||
|
||||
> configure NPM source
|
||||
```sh
|
||||
npm config set registry https://registry.npmjs.com/
|
||||
```
|
||||
|
||||
> login
|
||||
```shell
|
||||
npm adduser (--registry=https://registry.npmjs.com/)
|
||||
```
|
||||
|
||||
- Download codes
|
||||
|
||||
## Start
|
||||
|
||||
> install dependencies
|
||||
|
||||
```sh
|
||||
lerna bootstrap
|
||||
```
|
||||
|
||||
> run
|
||||
```
|
||||
yarn start
|
||||
```
|
||||
|
||||
> visit `http://localhost:8000` in browser.
|
||||
|
||||
## Directory
|
||||
|
||||
- update continually
|
||||
|
||||
```
|
||||
├── docs // official website
|
||||
│ ├── drip-table // drip-table sub page
|
||||
│ │ ├── changelog
|
||||
│ │ │ └── index.md // log markdown
|
||||
| | ├── functions // drip-table functions
|
||||
| | ├── guide // drip-table guide
|
||||
| | ├── sample // drip-table samples
|
||||
| | ├── faq.md // drip-table faq
|
||||
| | └── index.md // drip-table document entry
|
||||
│ ├── drip-table-generator // drip-table-generator sub page
|
||||
│ │ ├── changelog
|
||||
│ │ │ └── index.md // log markdown
|
||||
| | ├── preview // drip-table-generator demos
|
||||
| | ├── faq.md // drip-table-generator faq
|
||||
| | └── index.md // drip-table-generator document entry
|
||||
│ ├── global-configs.ts // global configs for demos
|
||||
│ ├── index.css // official website CSS
|
||||
│ ├── index.md // official website markdown
|
||||
│ ├── index.tsx // official website entry
|
||||
│ └── Loading.js // official website loading component
|
||||
└── packages // codes menu
|
||||
├── drip-table // drip-table codes
|
||||
├── drip-table-driver-antd // drip-table antd theme package
|
||||
└── drip-table-generator // drip-table visual tool
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
1. Fork.
|
||||
2. Create a new branch that names to express the features simply.
|
||||
3. Coding.
|
||||
4. Create a pull request.
|
||||
|
||||
- For more details of `drip-table`, see [README](./packages/drip-table/README.md);
|
||||
- For more details of `drip-table-generator`, see [README](./packages/drip-table-generator/README.md);
|
||||
|
||||
## Release official website
|
||||
|
||||
```
|
||||
yarn run build:docs
|
||||
```
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
# DripTable 开发指南
|
||||
|
||||
## 开发前
|
||||
|
||||
**在开发前你需要掌握的知识点**
|
||||
|
||||
### 什么是JSON Schema
|
||||
|
||||
1. `JSON Schema` 本身就是一种数据结构，可以清晰的描述 `JSON` 数据的结构。是一种描述 `JSON` 数据的 `JSON` 数据。
|
||||
2. [JSON Schema 官方文档](http://json-schema.org/)
|
||||
3. [JSON Schema 入门](https://www.jianshu.com/p/1711f2f24dcf?utm_campaign=hugo)
|
||||
|
||||
### 什么是 Lerna
|
||||
|
||||
1. `Lerna` 是一个用来优化托管在 `git` / `npm` 上的多 `package` 代码库的工作流的一个管理工具，可以让你在主项目下管理多个子项目，从而解决了多个包互相依赖，且发布时需要手动维护多个包的问题。
|
||||
2. [Lerna 官方文档](https://lerna.js.org/)
|
||||
3. [Lerna 入门](https://www.jianshu.com/p/09fd41cdbbc4)
|
||||
|
||||
## 环境准备
|
||||
|
||||
- 安装 `git`, `node`, `yarn`, 其中 `node` 版本 >=13.14.0，`yarn` 版本 >=1.0.0
|
||||
- 配置 [NPM](https://registry.npmjs.com/) 源, 如果有必要的话。
|
||||
|
||||
> 配置NPM源
|
||||
```sh
|
||||
npm config set registry https://registry.npmjs.com/
|
||||
```
|
||||
|
||||
> NPM 登录
|
||||
```shell
|
||||
npm adduser (--registry=https://registry.npmjs.com/)
|
||||
```
|
||||
> 按照提示输入用户名密码即可
|
||||
|
||||
- 源码下载
|
||||
|
||||
## 启动
|
||||
|
||||
1. 安装依赖
|
||||
|
||||
```sh
|
||||
lerna bootstrap
|
||||
```
|
||||
|
||||
2. 启动项目
|
||||
|
||||
```
|
||||
yarn start
|
||||
```
|
||||
|
||||
3. 浏览器访问: `http://localhost:8000` 即可。
|
||||
|
||||
## 目录结构
|
||||
|
||||
- 持续更新
|
||||
|
||||
```
|
||||
├── docs // 文档官网
|
||||
│ ├── drip-table // drip-table 子页面
|
||||
│ │ ├── changelog // 日志更新
|
||||
│ │ │ └── index.md // 日志markdown
|
||||
│ | ├── functions // drip-table 文档功能子页面
|
||||
│ | ├── guide // drip-table 文档指南子页面
|
||||
│ | ├── sample // drip-table 案例展示子页面
|
||||
│ | ├── faq.md // drip-table 常见问题页 markdown
|
||||
│ | └── index.md // drip-table 文档介绍页 markdown
|
||||
│ ├── drip-table-generator // drip-table-generator 子页面
|
||||
│ │ ├── changelog // 日志更新
|
||||
│ │ │ └── index.md // 日志 markdown
|
||||
│ | ├── preview // drip-table-generator 案例展示子页面
|
||||
│ | ├── faq.md // drip-table-generator 常见问题页 markdown
|
||||
│ | └── index.md // drip-table-generator 文档介绍页 markdown
|
||||
│ ├── global-configs.ts // 案例展示页面所用全局配置项
|
||||
│ ├── index.css // 文档官网首页 CSS
|
||||
│ ├── index.md // 文档官网首页入口 markdown
|
||||
│ ├── index.tsx // 文档官网首页
|
||||
│ └── Loading.js // 文档官网 Loading 组件
|
||||
└── packages // 源代码入口
|
||||
├── drip-table // drip-table 代码
|
||||
├── drip-table-driver-antd // drip-table antd 主题包
|
||||
└── drip-table-generator // drip-table 可视化生成器
|
||||
```
|
||||
|
||||
## 开发
|
||||
|
||||
1. Fork。
|
||||
2. 创建一个新分支，分支名表达改动内容即可。
|
||||
3. 改动，并提交。
|
||||
4. 创建 PR 请求。
|
||||
|
||||
- `drip-table` 开发详情见 [README](./packages/drip-table/README.zh-CN.md) 。
|
||||
- `drip-table-generator` 开发详情见 [README](./packages/drip-table-generator/README.zh-CN.md) 。
|
||||
|
||||
## 官网发布
|
||||
|
||||
> 构建打包
|
||||
```
|
||||
yarn run build:docs
|
||||
```
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<a href='http://drip-table.jd.com/'>
|
||||
<h1 style="display: flex; align-items: center; justify-content: center">
|
||||
<img src='https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg'/>
|
||||
<span style="margin-left: 10px">Drip Table</span>
|
||||
</h1>
|
||||
</a>
|
||||
|
||||
English | [简体中文](./README.zh-CN.md)
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
||||
[contributors]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square 'Number of contributors on All-Contributors'
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
||||
|
||||
[](./LICENSE)
|
||||
[](https://www.npmjs.com/package/drip-table)
|
||||
|
||||
|
||||
|
||||
|
||||
[![All Contributors][contributors]](./CONTRIBUTORS.md)
|
||||
|
||||
## Introduction
|
||||
|
||||
`DripTable` is a solution, launched by JD Retail, for building dynamic tables in mid-and-back end webapp. This project based on React and JSON Schema standard, and is aimed to reduce the difficulty of developing dynamic tables in `CMS` and improve working efficiency by means of quickly generating dynamic tables in data-driven way.
|
||||
|
||||
`DripTable` contains serval sub projects: `drip-table`, `drip-table-generator`, `drip-table-driver-antd`.
|
||||
|
||||
The introduction of each sub-project are as follows:
|
||||
|
||||
- `drip-table`: the core library of the solution for building dynamic tables. It's main ability is to render a dynamic table automatically when received data which conforms to the `JSON Schema` standard.
|
||||
|
||||
- `drip-table-generator`: a visual tool for producing configuration data that meets the `JSON Schema` standard in order to sent to `DripTable` for rendering a table and columns.
|
||||
|
||||
- `drip-table-driver-antd`: a theme package which is composed of `antd` components and icons.
|
||||
|
||||
## Problems can be solved
|
||||
|
||||
1. Solve the problem that complicated tables are difficult to add new features and manage existed codes.
|
||||
2. Optimize the process of development that there's no need to involve development and release for each change.
|
||||
3. Lower the barriers to communication between developers and product managers who built and previewed table to meet requirements by using the visual tool.
|
||||
4. Solve the problem that the existing visual tools cannot set columns and customize contents of cells of a table.
|
||||
|
||||
## Advantages
|
||||
|
||||
1. **Efficient**: Simplify the process of developing a table and develop columns of a table in a `LowCode` way;
|
||||
2. **Configurable**: Change tables in simple way by modifying the configuration data that meets the `JSON Schema` standard;
|
||||
3. **Visualization**: Produce configurations that meet the `JSON Schema` standard by dragging and dropping components simply with the visual tool.
|
||||
4. **Free UI framework**: Serval theme packages can be used, and custom theme packages are also supported.
|
||||
|
||||
## Getting Start
|
||||
|
||||
DripTable can be divided into two scenes: configuration side and application side. The configuration side is mainly responsible for producing data that meet the `JSON Schema` standard in visual and `LowCode` ways. The application side is used to render a table from data configurations.
|
||||
|
||||
### The application side
|
||||
|
||||
1. Install dependencies
|
||||
|
||||
Install the drip-table and a drip-table theme package at the same time:
|
||||
|
||||
> yarn
|
||||
```sh
|
||||
yarn add drip-table drip-table-driver-{drivername}
|
||||
```
|
||||
|
||||
> npm
|
||||
```sh
|
||||
npm install --save drip-table drip-table-driver-{drivername}
|
||||
```
|
||||
|
||||
Theme packages below are available:
|
||||
|
||||
* drip-table-driver-antd
|
||||
|
||||
2. Import at the entrance of a file
|
||||
|
||||
```js
|
||||
// import drip-table
|
||||
import DripTable from 'drip-table';
|
||||
// import a theme package, take antd as an example
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
// import ant-design css
|
||||
import 'antd/dist/antd.css';
|
||||
// import drip-table css
|
||||
import 'drip-table/index.css';
|
||||
```
|
||||
|
||||
3. Use components in pages
|
||||
```js
|
||||
const schema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
configs: {
|
||||
size: 'middle',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
"$id": "id",
|
||||
title: 'My Title',
|
||||
'ui:type': 'text',
|
||||
'ui:props': { mode: 'single' },
|
||||
type: 'string',
|
||||
dataIndex: 'dataIndexName',
|
||||
}
|
||||
]
|
||||
};
|
||||
return (
|
||||
<DripTable driver={DripTableDriverAntDesign} schema={schema} dataSource={[]} />
|
||||
);
|
||||
```
|
||||
|
||||
Then the application side can be rendered normally, as the sample screenshot below:
|
||||
|
||||
|
||||
|
||||
### The configuration side
|
||||
|
||||
1. Install dependencies
|
||||
|
||||
The configuration side depend on the application side, please make sure that `drip-table` and `drip-table-driver-{drivername}` are installed before installing dependencies.
|
||||
|
||||
> yarn
|
||||
|
||||
```sh
|
||||
yarn add drip-table-generator
|
||||
```
|
||||
|
||||
> npm
|
||||
|
||||
```sh
|
||||
npm install --save drip-table-generator
|
||||
```
|
||||
|
||||
2. Import at the entrance of a file
|
||||
|
||||
```js
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
import 'drip-table-generator/index.css';
|
||||
```
|
||||
|
||||
3. Use components in pages
|
||||
|
||||
```js
|
||||
return <DripTableGenerator />
|
||||
```
|
||||
|
||||
Then the configuration side can be rendered normally, as the sample screenshot below:
|
||||
|
||||
|
||||
|
||||
## Contribution
|
||||
|
||||
If you're interested in this project, you're welcome to create pull requests. We are appreciated for your star.
|
||||
|
||||
### development
|
||||
|
||||
1. Clone
|
||||
|
||||
2. Install dependencies
|
||||
|
||||
```sh
|
||||
lerna bootstrap
|
||||
```
|
||||
|
||||
3. Run project
|
||||
|
||||
```sh
|
||||
yarn start
|
||||
```
|
||||
|
||||
* visit http://localhost:8000
|
||||
* `drip-table` demo page: /drip-table/guide/basic-demo
|
||||
* `drip-table-generator` demo page: /drip-table-generator/preview
|
||||
|
||||
For more commands, see [DEVELOP](./DEVELOP.md) .
|
||||
|
||||
## License
|
||||
[MIT License](./LICENSE)
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<a href='http://drip-table.jd.com/'>
|
||||
<h1 style="display: flex; align-items: center; justify-content: center">
|
||||
<img src='https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg'/>
|
||||
<span style="margin-left: 10px">Drip Table</span>
|
||||
</h1>
|
||||
</a>
|
||||
|
||||
[English](./README.md) | 简体中文
|
||||
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
||||
[contributors]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square 'Number of contributors on All-Contributors'
|
||||
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
||||
|
||||
[](./LICENSE)
|
||||
[](https://www.npmjs.com/package/drip-table)
|
||||
|
||||
|
||||
|
||||
|
||||
[![All Contributors][contributors]](./CONTRIBUTORS.md)
|
||||
|
||||
## 介绍
|
||||
|
||||
`DripTable` 是京东零售推出的一款用于企业级中后台的动态列表解决方案，项目基于 `React` 和 `JSON Schema`，旨在通过简单配置快速生成页面动态列表来降低 CMS 页面列表开发难度、提高工作效率。
|
||||
|
||||
`DripTable` 目前包含以下子项目：`drip-table`、`drip-table-generator`、`drip-table-driver-antd`。
|
||||
|
||||
各个子项目具体介绍如下：
|
||||
|
||||
- `drip-table`：动态列表解决方案的核心库，其主要能力是支持符合 `JSON Schema` 标准的数据自动渲染列表内容。
|
||||
|
||||
- `drip-table-generator`：一个可视化的用于 `DripTable` 配置 `JSON Schema` 标准的配置数据的生成工具。
|
||||
|
||||
- `drip-table-driver-antd`： `DripTable` 的 `Ant Design` UI组件库主题包。
|
||||
|
||||
## 可解决问题
|
||||
|
||||
1. 解决复杂列表页开发困难和代码难以维护的问题。
|
||||
2. 优化现有前端列表页开发流程和效率，无需每次功能变更均涉及冗长的开发和上线流程。
|
||||
3. 利用可视化搭建工具，产品人员实现需求的快速搭建和预览，降低开发人员和产品人员沟通门槛。
|
||||
4. 解决现有可视化方案无法配置单元格，自定义单元格内容的问题。
|
||||
|
||||
## 有何优势
|
||||
|
||||
1. **高效开发**：提高前端列表开发效率，实现 `LowCode` 方式快速开发列表页；
|
||||
2. **实现配置化**：每次只需修改 `JSON Schema` 数据即可自动渲染处所需要的列表，降低用户使用成本；
|
||||
3. **配置可视化**：通过专用可视化配置工具，实现简单拖拽即可生成 `JSON Schema` 数据；
|
||||
4. **界面框架自由**：可自由选择多种界面框架主题，另外还支持自定义主题包；
|
||||
|
||||
## 开始使用
|
||||
|
||||
`DripTable` 分为两种应用场景：配置端和应用端。配置端主要负责通过可视化方式和 `LowCode` 方式进行 `JSON Schema` 标准数据的生成。应用端的职能则是将 `JSON Schema` 标准配置数据渲染成动态列表。
|
||||
|
||||
### 应用端
|
||||
|
||||
1. 安装依赖
|
||||
|
||||
同时安装 `drip-table` 和 `drip-table` 主题包：
|
||||
|
||||
```sh
|
||||
# yarn
|
||||
yarn add drip-table drip-table-driver-{drivername}
|
||||
# npm
|
||||
npm install drip-table drip-table-driver-{drivername}
|
||||
```
|
||||
|
||||
目前可选列表如下：
|
||||
|
||||
* drip-table-driver-antd
|
||||
|
||||
2. 在文件开头引入依赖
|
||||
|
||||
```js
|
||||
// 引入 drip-table
|
||||
import DripTable from 'drip-table';
|
||||
// 引入主题包，以 antd 为例
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
// 引入 ant-design 样式
|
||||
import 'antd/dist/antd.css';
|
||||
// 引入 drip-table 样式
|
||||
import 'drip-table/index.css';
|
||||
```
|
||||
|
||||
3. 引用
|
||||
|
||||
```js
|
||||
const schema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
configs: {
|
||||
size: 'middle',
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
"$id": "id",
|
||||
title: '名称',
|
||||
'ui:type': 'text',
|
||||
'ui:props': { mode: 'single' },
|
||||
type: 'string',
|
||||
dataIndex: 'dataIndexName',
|
||||
}
|
||||
]
|
||||
};
|
||||
return (
|
||||
<DripTable driver={DripTableDriverAntDesign} schema={schema} dataSource={[]} />
|
||||
);
|
||||
```
|
||||
|
||||
应用端正常渲染效果如下：
|
||||
|
||||
|
||||
|
||||
### 配置端
|
||||
|
||||
1. 安装依赖
|
||||
|
||||
配置端依赖应用端，安装前先确保已安装 `drip-table` 和 `drip-table-driver-{drivername}`。
|
||||
|
||||
```sh
|
||||
# yarn
|
||||
yarn add drip-table-generator
|
||||
# npm
|
||||
npm install drip-table-generator
|
||||
```
|
||||
|
||||
2. 在文件开头引入依赖
|
||||
|
||||
```js
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
import 'drip-table-generator/index.css';
|
||||
```
|
||||
|
||||
3. 在页面中引用
|
||||
|
||||
```js
|
||||
return <DripTableGenerator />
|
||||
```
|
||||
|
||||
配置端正常渲染效果如下：
|
||||
|
||||
|
||||
|
||||
## 开发手册
|
||||
|
||||
如果您对这个项目感兴趣，欢迎提 issue ，也欢迎 star 支持一下。
|
||||
|
||||
### 本地运行
|
||||
|
||||
1. 克隆项目
|
||||
|
||||
2. 安装依赖
|
||||
|
||||
```sh
|
||||
lerna bootstrap
|
||||
```
|
||||
|
||||
3. 运行项目
|
||||
|
||||
```sh
|
||||
yarn start
|
||||
```
|
||||
|
||||
* 访问 http://localhost:8000
|
||||
* `drip-table` 示例路由：/drip-table/guide/basic-demo
|
||||
* `drip-table-generator` 示例路由：/drip-table-generator/preview
|
||||
|
||||
更多命令请查看 [DEVELOP 文档](./DEVELOP.zh-CN.md) 。
|
||||
|
||||
## License
|
||||
[MIT License](./LICENSE)
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { Spin } from 'antd';
|
||||
|
||||
export default () => <Spin />;
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
order: 4
|
||||
title: 更新日志
|
||||
---
|
||||
|
||||
# 更新日志
|
||||
|
||||
### 2021.11.26 `v0.4.0`
|
||||
|
||||
* 🆕 修改页面交互
|
||||
* 🆕 添加标签内置组件
|
||||
* 🆕 优化数据录入流程以及添加默认字段录入方式
|
||||
|
||||
### 2021.11.03 `v0.3.3`
|
||||
|
||||
* 🆕 generator的配置面板支持外部传入自定义组件
|
||||
* 🆕 修改官网部分文档以及更换LOGO
|
||||
|
||||
### 2021.10.18 `v0.3.2`
|
||||
|
||||
* 支持透传DripTable的`driver`参数， `driver`详情参考[快速开始](/drip-table/guide/fast-start#安装)以及[基础示例](/drip-table/guide/basic-demo)引用界面驱动包。
|
||||
* 🐞 修复切换schema时无法更新的问题。
|
||||
* 修改界面样式，支持组件栏样式的自定义以及样式支持BEM规范。
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
order: 2
|
||||
title: 常见问题
|
||||
---
|
||||
|
||||
# 常见问题
|
||||
|
||||
### 1、是否支持自定义组件面板？
|
||||
|
||||
可以，`<DripTableGenerator />` 添加 `customComponentPanel` 和 `customComponent` 属性即可。
|
||||
其中，`customComponentPanel` 传入自定义组件的属性配置等配置信息，`customComponent` 属性传入自定义组。
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
---
|
||||
order: 2
|
||||
title: API
|
||||
---
|
||||
|
||||
## API
|
||||
|
||||
### `<DripTableGenerator>` 参数
|
||||
|
||||
**DripTable 本质就是一个 React Component，将对应的 `<DripTable>` 包裹起来，利用页面组件将 `DripTable` 的 `schema` 进行可视化加工和生产**
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------- | -------------------------------------- | ------- | ---- |
|
||||
| style | 组件的表单样式 | `React.CSSProperties` | - | 否 |
|
||||
| showComponentLayout | 是否展示组件栏 | `true` | - | 否 |
|
||||
| showToolLayout | 是否展示工具栏 | `true` | - | 否 |
|
||||
| schema | 初始化载入的schema配置数据 | [DripTableSchema](/drip-table/functions/api#driptableschema-参数) | - | 否 |
|
||||
| dataSource | 初始化载入的表格示例数据 | `Record<string, unknown>[]` | - | 否 |
|
||||
| dataFields | 后端API默认的字段名 | `string[]` | - | 否 |
|
||||
| onExportSchema | 导出配置回调 | `(schema: DripTableSchema): void` | - | 否 |
|
||||
| customComponents | 自定义组件，透传至render | [DripTableProps['components']](/drip-table/functions/api) | - | 否 |
|
||||
| customComponentPanel | 自定义组件面板 | `{ mode: 'add' \| 'replace', components: DripTableComponentConfig[] }` | - | 否 |
|
||||
|
||||
### `DripTableComponentConfig` 参数
|
||||
**当自定义表单后，需要通过该参数配置相应的配置信息展示在页面的组件栏中**
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------- | -------------------------------------- | ------- | ---- |
|
||||
| $id | 唯一标识 | `string` | - | 否 |
|
||||
| ui:type | 组件类型 | `string` | - | 否 |
|
||||
| type | 数据类型 | `string` | - | 否 |
|
||||
| group | 组名称 | `string` | - | 否 |
|
||||
| title | 组件名称 | `string` | - | 否 |
|
||||
| attrSchema | 属性配置 | `AttrSchema[]` | - | 否 |
|
||||
| `[...props]` | 其他属性 | `unknown` | - |
|
||||
|
||||
#### `DripTableComponentConfig` 中 `AttrSchema` 参数
|
||||
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------- | -------------------------------------- | ------- | ---- |
|
||||
| name | 属性名 | `string` | - | 否 |
|
||||
| required | 属性是否必填 | `boolean` | `false` | 否 |
|
||||
| ui:title | 属性标题 | `string` | - | 是 |
|
||||
| ui:type | 属性组件类型, 默认属性组件类型包括：`input`、 `text`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `render-html`、 `custom::ArrayComponent`。当组件类型为 `custom::` 开头时可以通过`ui:externalComponent` 属性传入外部组件。 | `string` | - | 是 |
|
||||
| ui:externalComponent | 外部组件 | `React.ComponentClass \| React.FunctionComponent` | - | 否 |
|
||||
| ui:props | 属性组件的属性 | `Record` | - | 否 |
|
||||
| type | 属性数据类型 | `string` | - | 否 |
|
||||
| `[...props]` | 其他属性 | `unknown` | - |
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
---
|
||||
order: 1
|
||||
title: 基本用法
|
||||
---
|
||||
|
||||
# 基本用法
|
||||
|
||||
> 本篇主要介绍 `drip-table-generator` 的基本能力以及常规情况下如何使用
|
||||
|
||||
## 一、初始化配置
|
||||
|
||||
`drip-table-generator` 提供了 `schema` 属性，允许用户在一开始就传入配置。
|
||||
|
||||
### 代码演示
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
import React from 'react';
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
|
||||
const initialSchema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
"configs": {
|
||||
"pagination": false
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"$id": "mock_1",
|
||||
"dataIndex": "",
|
||||
"title": "自定义111",
|
||||
"description": "",
|
||||
"ui:type": "render-html",
|
||||
"width": '200px',
|
||||
"ui:props": {
|
||||
"render": "if (rec.id == 1) {\r\n return '<span style=\\\"padding: 2px 4px; border: 1px solid #2baa55; border-radius: 2px; background: #99ffad99\\\">壹</span>';\r\n}\r\nreturn '';"
|
||||
},
|
||||
"type": "string"
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<DripTableGenerator schema={initialSchema} />
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
||||
## 二、自定义样式
|
||||
|
||||
`drip-table-generator` 支持通过修改 `CSS 变量`、传入 `style` 以及手动覆盖样式这三种方式修改样式。
|
||||
|
||||
CSS变量目前包括以下三个：
|
||||
|
||||
```css
|
||||
* {
|
||||
--drip-table-primary-color: #FFFFFF;
|
||||
--drip-table-background-color: #FFFFFF;
|
||||
--drip-table-border-color: #FFFFFF;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 代码演示
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
import React from 'react';
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<DripTableGenerator style={{ height: 500, background: '#EEFFEE6A', border: '1px solid #dedede' }} />
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
---
|
||||
order: 2
|
||||
title: 高级教程
|
||||
---
|
||||
|
||||
# 高级教程
|
||||
|
||||
> 本篇主要介绍 `drip-table-generator` 的高级使用能力介绍
|
||||
|
||||
## 一、在线 `LowCode` 组件
|
||||
|
||||
**Generator 提供了可在线编写简单代码的自定义组件，方便用户生成自己所想要的渲染HTML**
|
||||
|
||||
自定义代码编写时返回一段字符串或者带 `HTML` 的字符串，`drip-table` 会将其渲染成 `HTML`。
|
||||
|
||||
效果图如下所示：
|
||||
|
||||
|
||||
|
||||
#### 参数 `rec`
|
||||
|
||||
- 描述: `模板字段`
|
||||
- 类型: `Record`
|
||||
- 默认值: `null`
|
||||
用于获取表格数据的一条记录，数据格式取决于用户传入的数据格式。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
return `<a href="http://ace.jd.com/#/launch?config=${rec.price}" target="_blank">${rec.name}</a>`;
|
||||
```
|
||||
|
||||
## 二、Refs 引用
|
||||
|
||||
利用 `React.useRef` 获取 `<DripTableGenerator>` 实例，可以直接在外部操作生成器动作胡哦哦这获取生成器状态。
|
||||
|
||||
**开放方法**
|
||||
|
||||
#### getSchemaValue
|
||||
|
||||
- 描述: `获取表格schema配置数据`
|
||||
- 参数: `无`
|
||||
- 返回类型: `DripTableSchema`
|
||||
从生成器外部主动获取当前配置信息并做后续操作。
|
||||
|
||||
示例如下：
|
||||
|
||||
```js
|
||||
// 初始化实例
|
||||
const generator = React.useRef(null);
|
||||
|
||||
// 调用实例内部函数或者获取内部属性
|
||||
generator.current.getSchemaValue();
|
||||
|
||||
// 引用
|
||||
<DripTableGenerator ref={generator} />
|
||||
```
|
||||
|
||||
## 三、自定义组件及属性面板
|
||||
|
||||
用户可以根据业务需要自定义表格组件，当传入自定义组件给 `DripTableGenerator` 时，需要自定义属性面板。
|
||||
|
||||
效果图如下所示：
|
||||
|
||||
|
||||
|
||||
字段说明：
|
||||
|
||||
#### mode
|
||||
- 描述: `模式`
|
||||
- 类型: `add | replace`
|
||||
- 默认值: `add`
|
||||
|
||||
自定义组件加载模式，当为 `add` 时往默认内建组件库内添加新组件，当为 `replace` 时替换组件库全部使用传入的组件。
|
||||
|
||||
#### components
|
||||
- 描述: `组件列表`
|
||||
- 类型: `array`
|
||||
- 默认值: `[]`
|
||||
|
||||
传入的自定义组件配置列表。
|
||||
|
||||
自定义组件配置的字段如下：
|
||||
|
||||
#### $id
|
||||
- 描述: `唯一标识`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
#### ui:type
|
||||
- 描述: `组件类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
组件类型，用于区分组件的唯一标识。
|
||||
|
||||
#### type
|
||||
- 描述: `数据类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
数据类型，用于描述组件所对应字段的数据类型。
|
||||
|
||||
#### group
|
||||
- 描述: `组名称`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
组件所属组类型。
|
||||
|
||||
#### title
|
||||
- 描述: `组件名称`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
组件中文名称。
|
||||
|
||||
#### attrSchema
|
||||
- 描述: `属性配置`
|
||||
- 类型: `array`
|
||||
- 默认值: `[]`
|
||||
|
||||
组件属性配置。
|
||||
|
||||
`attrSchema`配置如下：
|
||||
#### attrSchema.name
|
||||
- 描述: `属性名`
|
||||
- 类型: `string`
|
||||
- 默认值: ``
|
||||
|
||||
#### attrSchema.required
|
||||
- 描述: `属性是否必填`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
|
||||
#### attrSchema["ui:title"]
|
||||
- 描述: `属性标题`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
#### attrSchema["ui:type"]
|
||||
- 描述: `属性组件类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `custom::ArrayComponent`。
|
||||
|
||||
当组件类型为 `custom::` 开头时可以通过 `ui:externalComponent` 属性传入外部组件。
|
||||
|
||||
#### attrSchema["ui:externalComponent"]
|
||||
- 描述: `外部组件`
|
||||
- 类型: `React.ComponentClass | function`
|
||||
- 默认值: `无`
|
||||
|
||||
用来传入外部组件使用。
|
||||
|
||||
#### attrSchema["ui:props"]
|
||||
- 描述: `属性组件的属性`
|
||||
- 类型: `Record`
|
||||
- 默认值: `{}`
|
||||
|
||||
* 具体属性同 `antd` 组件，具体详见 `antd` 官网。
|
||||
* `code-editor` 暂无属性。
|
||||
* `custom::ArrayComponent` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
|
||||
|
||||
#### attrSchema.type
|
||||
- 描述: `属性数据类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `无`
|
||||
|
||||
属性数据类型，用于描述组件所对应字段的数据类型。
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
<DripTableGenerator
|
||||
customComponents={{ custom: { CustomComponentName } }}
|
||||
customComponentPanel={
|
||||
{
|
||||
mode: 'add',
|
||||
components: [
|
||||
{
|
||||
$id: '$custom_id',
|
||||
'ui:type': 'custom::CustomComponentName',
|
||||
type: 'string',
|
||||
group: '组名称',
|
||||
fieldKey: 'custom_[hash]_id',
|
||||
title: '组件名称',
|
||||
attrSchema: [
|
||||
{
|
||||
name: 'propertyName',
|
||||
required: true,
|
||||
'ui:title': '属性标题',
|
||||
'ui:type': 'select',
|
||||
'ui:props': {},
|
||||
type: 'string',
|
||||
...(otherProps),
|
||||
},
|
||||
...(otherAttributes),
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
/>
|
||||
```
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
order: 1
|
||||
title: 快速开始
|
||||
---
|
||||
|
||||
# 快速开始
|
||||
|
||||
> 本篇主要介绍 `drip-table-generator` 的最基本的能力
|
||||
|
||||
## 如何使用
|
||||
|
||||
### 安装依赖
|
||||
|
||||
drip-table-generator 依赖 `antd`、`drip-table` 和 `react`，单独使用不要忘记安装～
|
||||
|
||||
> yarn
|
||||
|
||||
```sh
|
||||
yarn add drip-table-generator
|
||||
```
|
||||
|
||||
> npm
|
||||
```sh
|
||||
npm install --save drip-table-generator
|
||||
```
|
||||
|
||||
### 依赖引入
|
||||
|
||||
```js
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
import 'drip-table-generator/index.css';
|
||||
```
|
||||
|
||||
### 页面引入
|
||||
|
||||
```js
|
||||
<DripTableGenerator />
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
import React from 'react';
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<DripTableGenerator />
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
order: 1
|
||||
title: 介绍
|
||||
---
|
||||
|
||||
<div style="display:flex;align-items:center;margin-bottom:24px">
|
||||
<img src="https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg" alt="logo" width="48px"/>
|
||||
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">DripTableGenerator</span>
|
||||
</div>
|
||||
|
||||
> 可视化的 `DripTable` `JSON Schema` 配置数据的生成工具，简单易用。
|
||||
|
||||
|
||||
## 优势
|
||||
|
||||
1. **使用简单**：简单的拖拽即可添加列表配置。
|
||||
2. **Drip 生态**：使用 `DripForm` 快速生成业务组件和组件面板。
|
||||
3. **自定义组件**：通过在线代码编辑器，实现 `LowCode` 生成自定义组件。
|
||||
4. **配置可视化**：通过专用可视化配置工具，实现简单拖拽即可生成 `JSON Schema` 数据结构数据。
|
||||
|
||||
## 何时使用
|
||||
|
||||
1. 用于产品人员通过简单拖拽方式快速搭建列表页。
|
||||
2. 用于开发人员通过 `LowCode` 方式快速生成自定义组件。
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
order: 1
|
||||
title: 介绍
|
||||
---
|
||||
|
||||
<div style="display:flex;align-items:center;margin-bottom:24px">
|
||||
<img src="https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg" alt="logo" width="48px"/>
|
||||
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">DripTableGenerator</span>
|
||||
</div>
|
||||
|
||||
> 可视化的 `DripTable` `JSON Schema` 配置数据的生成工具，简单易用。
|
||||
|
||||
|
||||
## 优势
|
||||
|
||||
1. **使用简单**：简单的拖拽即可添加列表配置。
|
||||
2. **Drip 生态**：使用 `DripForm` 和 `DripDesign` 快速生成业务组件和组件面板。
|
||||
3. **自定义组件**：通过在线代码编辑器，实现 LowCode 生成自定义组件。
|
||||
4. **配置可视化**：通过专用可视化配置工具，实现简单拖拽即可生成 `JSON Schema` 数据结构数据。
|
||||
|
||||
## 何时使用
|
||||
|
||||
1. 用于产品人员通过简单拖拽方式快速搭建列表页。
|
||||
2. 用于开发人员通过 LowCode 方式快速生成自定义组件。
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/**
|
||||
* This file is part of the drip-table project.
|
||||
* @link : https://ace.jd.com/
|
||||
* @author : Emil Zhai (root@derzh.com)
|
||||
* @modifier : Emil Zhai (root@derzh.com)
|
||||
* @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { indexValue, DripTableComponentProps, DripTableComponentSchema, DripTableRecordTypeBase } from 'drip-table';
|
||||
export interface TextSchema extends DripTableComponentSchema {
|
||||
/** 字体大小 */
|
||||
fontSize?: string;
|
||||
/** 兜底文案 */
|
||||
noDataValue?: string;
|
||||
}
|
||||
|
||||
interface TextProps<RecordType> extends DripTableComponentProps<RecordType, TextSchema> { }
|
||||
|
||||
interface TextState {}
|
||||
|
||||
export default class TextComponent<RecordType extends DripTableRecordTypeBase> extends React.PureComponent<TextProps<RecordType>, TextState> {
|
||||
|
||||
private get fontSize() {
|
||||
let fontSize = String(this.props.schema.fontSize || '').trim();
|
||||
if ((/^[0-9]+$/uig).test(fontSize)) {
|
||||
fontSize += 'px';
|
||||
}
|
||||
return fontSize;
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const { schema, data } = this.props;
|
||||
const {
|
||||
dataIndex,
|
||||
noDataValue } = schema;
|
||||
const value = indexValue(data, dataIndex, '');
|
||||
const contentStr = `${ value || noDataValue }`
|
||||
return (
|
||||
<div style={{ fontSize: this.fontSize, color: '#6d0fff' }}>
|
||||
{ contentStr }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
import { DripTableComponentConfig } from 'drip-table-generator';
|
||||
|
||||
export default {
|
||||
mode: 'add' as 'add' | 'replace',
|
||||
components: [
|
||||
{
|
||||
$id: '$display_text_1',
|
||||
'ui:type': 'custom::TextComponent',
|
||||
type: 'string',
|
||||
group: '业务组件',
|
||||
fieldKey: 'text_qywxDIIO',
|
||||
title: '业务文本',
|
||||
attrSchema: [
|
||||
{
|
||||
name: 'dataIndex',
|
||||
required: true,
|
||||
'ui:title': '字段选择',
|
||||
'ui:type': 'select',
|
||||
'ui:props': {
|
||||
from: 'dataFields'
|
||||
},
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
name: 'fontSize',
|
||||
'ui:title': '字体大小',
|
||||
'ui:type': 'number',
|
||||
'ui:description': {
|
||||
trigger: 'hover',
|
||||
type: 'icon',
|
||||
title: '控制表格该列默认字体大小，默认单位为“px”，支持手动指定单位后缀。',
|
||||
},
|
||||
default: 12,
|
||||
min: 12,
|
||||
},
|
||||
{
|
||||
name: 'noDataValue',
|
||||
'ui:title': '兜底文案',
|
||||
'ui:type': 'input',
|
||||
'ui:description': {
|
||||
trigger: 'hover',
|
||||
type: 'icon',
|
||||
title: '当数据不下发时展示的兜底文案',
|
||||
},
|
||||
default: '',
|
||||
visible: 'return formData.dataIndex',
|
||||
},
|
||||
],
|
||||
}
|
||||
] as DripTableComponentConfig[],
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Row } from 'antd';
|
||||
import { DripTableSchema } from 'drip-table';
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
|
||||
import { mockData } from '../../global-configs';
|
||||
|
||||
const initialSchema: DripTableSchema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
"configs": {
|
||||
"pagination": false
|
||||
},
|
||||
"columns": [
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
const Demo = () => {
|
||||
const generator = React.useRef(null);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Row>
|
||||
<Button type="primary" onClick={() => { console.log(generator.current?.getSchemaValue()); }}>获取schema</Button>
|
||||
</Row>
|
||||
<DripTableGenerator
|
||||
ref={generator}
|
||||
style={{ height: 720 }}
|
||||
schema={initialSchema}
|
||||
dataSource={mockData}
|
||||
onExportSchema={(schema) => { console.log(schema); }}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
order: 3
|
||||
title: 案例展示
|
||||
sidemenu: false
|
||||
---
|
||||
|
||||
<code src='./sample.tsx' />
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.__dumi-default-layout[data-route="/drip-table-generator/preview"] {
|
||||
padding-top: 64px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
.__dumi-default-previewer-demo {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sample-header-extra-container {
|
||||
margin: 12px 0 0 0;
|
||||
padding: 16px 16px;
|
||||
border-bottom: 1px solid #e6e6ee;
|
||||
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, .05);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Row } from 'antd';
|
||||
import { DripTableSchema } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import DripTableGenerator from 'drip-table-generator';
|
||||
import 'antd/dist/antd.css';
|
||||
import 'drip-table-generator/index.css';
|
||||
|
||||
import { mockData } from '../../global-configs';
|
||||
import components from './component-settings';
|
||||
import TextComponent from './TextComponent';
|
||||
|
||||
import './sample.module.less';
|
||||
|
||||
const initialSchema: DripTableSchema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
"configs": {
|
||||
"pagination": false
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"$id": "mock_2",
|
||||
title: '商品名称',
|
||||
width: '96px',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
maxRow: 2,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
"$id": "mock_1",
|
||||
"dataIndex": "",
|
||||
"title": "自定义",
|
||||
"description": "",
|
||||
"ui:type": "render-html",
|
||||
"width": '200px',
|
||||
"ui:props": {
|
||||
"render": "if (rec.id == 1) {\n return '<span style=\\\"padding: 2px 4px;color:#52c41a; border: 1px solid #b7eb8f; border-radius: 10px; background: #f6ffed\\\">进行中</span>';\n}\nif (rec.id == 2) {\n return '<span style=\\\"padding: 2px 4px;color:#000; border: 1px solid #000; border-radius: 10px; background: #f6ffed\\\">已完成</span>';\n}\nreturn '';"
|
||||
},
|
||||
"type": "string"
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
const Demo = (props: { showHeader: boolean }) => {
|
||||
const generator: React.MutableRefObject<null | {
|
||||
getSchemaValue: () => void;
|
||||
}> = React.useRef(null);
|
||||
|
||||
const views = {
|
||||
demoHeader: props.showHeader !== false,
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{ views.demoHeader && (
|
||||
<Row className="sample-header-extra-container">
|
||||
<Button type="primary" onClick={() => { console.log(generator.current?.getSchemaValue()); }}>获取schema</Button>
|
||||
</Row>
|
||||
)}
|
||||
<DripTableGenerator
|
||||
ref={generator}
|
||||
style={{ height: 720 }}
|
||||
driver={DripTableDriverAntDesign}
|
||||
schema={initialSchema}
|
||||
dataSource={mockData.slice(0, 4)}
|
||||
dataFields={['id', 'name', 'status', 'description', 'ext.state']}
|
||||
onExportSchema={(schema) => { console.log(schema); }}
|
||||
customComponents={{ custom: { TextComponent } }}
|
||||
customComponentPanel={components}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
order: 4
|
||||
title: 更新日志
|
||||
---
|
||||
|
||||
# 更新日志
|
||||
|
||||
### 2021.11.26 `v0.6.13`
|
||||
|
||||
* 🆕 添加标签内置组件
|
||||
|
||||
### 2021.11.8 `v0.6.12`
|
||||
|
||||
* 🐞 修复文本组件文字省略样式问题。
|
||||
|
||||
### 2021.11.4 `v0.6.11`
|
||||
|
||||
* 🆕 支持虚拟列表及其固定列
|
||||
|
||||
### 2021.11.03 `v0.6.10`
|
||||
|
||||
* 🆕 支持“文字”类型列配置column.ellipsis
|
||||
|
||||
### 2021.10.18 `v0.6.9`
|
||||
|
||||
* 🐞 修复header类型错误。
|
||||
* 🆕 header添加DripForm表单，支持复杂查询表单。
|
||||
|
||||
### 2021.10.14 `v0.6.8`
|
||||
|
||||
* 修复 `Header` 组件参数类型部分传入为空时出错的问题。
|
||||
|
||||
### 2021.10.14 `v0.6.7`
|
||||
|
||||
* 修复 `Header` 组件参数类型声明问题。
|
||||
|
||||
### 2021.10.12 `v0.6.6`
|
||||
|
||||
* 不再独立引入底层界面库，DripTable 使用处需手动传入 `driver` 参数，参考[快速开始](/drip-table/guide/fast-start#安装)以及[基础示例](/drip-table/guide/basic-demo)引用界面驱动包。
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
order: 3
|
||||
title: 常见问题
|
||||
---
|
||||
|
||||
# 常见问题
|
||||
|
||||
### 1、能否不渲染表头表单？
|
||||
|
||||
可以，在 `JSON Schema` 标准配置数据的 `configs` 字段中设置 `title: false` 即可。
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
order: 2
|
||||
title: API
|
||||
---
|
||||
|
||||
# API
|
||||
|
||||
## `<DripTable>` 参数
|
||||
|
||||
**DripTable 本质就是一个 React Context，将对应的 `<Table>` 包裹起来，可以很方便在里面插入一些其他东西**
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 | 必填 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------- | -------------------------------------- | ------- | ---- |
|
||||
| driver | 用于渲染列表的主题包 | `DripTableDriver` | - | 是 |
|
||||
| schema | 用于渲染列表的 schema | `DripTableSchema` | - | 是 |
|
||||
| dataSource | 数据列表 | `Array` | - | 是 |
|
||||
| loading | 是否加载 | `boolean` | - | 否 |
|
||||
| totalPage | 总页数，配置了分页需要 | `number` | - | 否 |
|
||||
| components | 组件库 | `Record<string, Record<string, React.Component>>` | - | 否 |
|
||||
| onEvent | 通用事件回调 | `(event: { type: string; payload: unknown }, record: RecordType; index: number }) => void` | - | 否 |
|
||||
| onPageChange | 页面改变回调函数 | `(page, pageSize) => void` | - | 否 |
|
||||
|
||||
## `DripTableDriver` 参数
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| --------------------- | ------------------------------------------------------------------------- | ------------------- | ----------- |
|
||||
| components | 组件库 | `Record<string, React.ComponentClass \| React.FunctionComponent \| React.ForwardRefExoticComponent>` | - | 是 |
|
||||
| icons | 图标库 | `Record<string, React.ComponentClass \| React.FunctionComponent \| React.ForwardRefExoticComponent>` | - | 是 |
|
||||
| locale | 国际化设置 | [Locale](https://ant.design/docs/react/i18n-cn) | - | 是 |
|
||||
|
||||
## `DripTableSchema` 参数
|
||||
|
||||
**设置 drip-table 的 props，其中 `configs` 是表格的全局设置，另外最基本的使用需要填写 `columns`**
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| --------------------- | ------------------------------------------------------------------------- | ------------------- | ----------- |
|
||||
| configs | 全局定义 | `object` | `false` |
|
||||
| columns | 列定义 | `object` | `false` |
|
||||
|
||||
### `DripTableSchema` 参数 中 Configs 全局定义
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| --------------------- | ------------------------------------------------------------------------- | ------------------- | ----------- |
|
||||
| bordered | 是否展示表格边框 | `boolean` | `false` |
|
||||
| header | 是否展示标题栏以及配置 | `详见schema配置页说明` \| `boolean` | `false` |
|
||||
| pagination | 是否展示分页以及配置 | `{ pageSize?: number; position?: "topLeft" | "topCenter" | "topRight" | "bottomLeft" | "bottomCenter" | "bottomRight"; }` \| `false` | `false` |
|
||||
| size | 表格尺寸 | `small` \| `middle` \| `large` \| `undefined` | - |
|
||||
| sticky | 粘性头部 | `boolean` | `false` |
|
||||
| rowSelection | 是否支持选择栏 | `boolean` | `false` |
|
||||
| ellipsis | 是否平均列宽 | `boolean` | `false` |
|
||||
| sticky | 粘性头部 | `boolean` | `false` |
|
||||
| nodata | 无数据提示 | `{ image: string; text: string; }` | - |
|
||||
|
||||
### `DripTableSchema` 参数 中 Columns 列定义
|
||||
|
||||
**columns 为 antd 已有的 props，所以支持 antd 所有的支持的 [columns](https://ant.design/components/table-cn/#Column) 的配置，同时也提供了一些更方便的 api，加快书写**
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
| --------- | --------------------------------------------------- | ----------------------------------------------------- | ------ |
|
||||
| $id | 键值 | string | - |
|
||||
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | `string | string[]` | - |
|
||||
| title | 表头， 组件名 | string | - |
|
||||
| width | 表格列宽 | number | - |
|
||||
| description | 表头说明 | string | - |
|
||||
| ui:type | 组件名，若自定义开发的业务组件以`命名空间::组件名称`格式填写；通过 components 属性传入组件库实现 | string | - |
|
||||
| ui:props | 组件属性 | `object` | - |
|
||||
| type | 数据格式 | `string` \| `number` \| `boolean` \| `null` \| `array` \| `object` | - |
|
||||
| `[...props]` | 其他属性 | `unknown` | - |
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { DripTableCustomEvent } from 'drip-table';
|
||||
|
||||
export interface CustomComponentSampleEvent extends DripTableCustomEvent<'sample-event'> { }
|
||||
|
||||
export type CustomComponentEvent =
|
||||
| CustomComponentSampleEvent
|
||||
| never;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import CustomComponentSample from './sample';
|
||||
|
||||
export const CustomComponents = {
|
||||
CustomComponentSample,
|
||||
}
|
||||
|
||||
export type { CustomComponentEvent } from './event';
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* This file is part of the drip-table project.
|
||||
* @link : https://ace.jd.com/
|
||||
* @author : helloqian12138 (johnhello12138@163.com)
|
||||
* @modifier : helloqian12138 (johnhello12138@163.com)
|
||||
* @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { DripTableComponentProps, DripTableComponentSchema } from 'drip-table';
|
||||
|
||||
import { SampleRecordType } from '../../../../global-configs';
|
||||
import { CustomComponentEvent } from '.';
|
||||
|
||||
export interface CustomComponentSampleSchema extends DripTableComponentSchema {
|
||||
customSchema?: string;
|
||||
}
|
||||
|
||||
|
||||
export interface CustomComponentSampleProps extends DripTableComponentProps<SampleRecordType, CustomComponentSampleSchema, CustomComponentEvent> { }
|
||||
|
||||
interface CustomComponentSampleState { }
|
||||
|
||||
export default class CustomComponentSample extends React.PureComponent<CustomComponentSampleProps, CustomComponentSampleState> {
|
||||
public constructor(props: CustomComponentSampleProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
自定义: {this.props.data?.status}
|
||||
<Button type="link" onClick={() => { this.props.fireEvent({ type: 'custom', name: 'sample-event' }); }}>发起事件</Button>
|
||||
{this.props.schema.customSchema}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
---
|
||||
order: 3
|
||||
title: 事件机制
|
||||
# sidemenu: false
|
||||
---
|
||||
|
||||
# 事件机制
|
||||
|
||||
## 事件监听
|
||||
|
||||
> 事件机制回调函数，支持内置事件、自定义事件。
|
||||
|
||||
```js
|
||||
<DripTable onEvent={onEvent}/>
|
||||
```
|
||||
|
||||
`function onEvent(event: DripTableEvent, record: Record, index: number): void`
|
||||
|
||||
### event: DripTableEvent
|
||||
|
||||
> 事件对象。
|
||||
|
||||
```ts
|
||||
interface DripTableEvent {
|
||||
type: DripTableBuiltInComponentEvent | 'custom';
|
||||
payload: unknown;
|
||||
}
|
||||
```
|
||||
|
||||
### record: Record
|
||||
|
||||
> 触发事件表格行数据。
|
||||
|
||||
### index: number
|
||||
|
||||
> 触发事件表格行在当前页的下标。
|
||||
|
||||
|
||||
## 事件触发
|
||||
|
||||
在自定义组件中，调用 `this.props.fireEvent(event: DripTableEvent)` 即可。
|
||||
|
||||
|
||||
# 示例
|
||||
|
||||
## 事件监听
|
||||
|
||||
```js
|
||||
<DripTable<SampleRecordType, CustomComponentEvent>
|
||||
onEvent={(event, record, index) => {
|
||||
if (event.type === 'drip-link-click') {
|
||||
const name = event.payload;
|
||||
message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的"${name}"事件按钮。`);
|
||||
console.log(name, record, index);
|
||||
} else if (event.type === 'custom') {
|
||||
message.info(`自定义事件“${event.name}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
|
||||
console.log(event, record, index);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
## 事件触发
|
||||
|
||||
```ts
|
||||
export default class CustomComponentSample extends React.PureComponent<CustomComponentSampleProps, CustomComponentSampleState> {
|
||||
public constructor(props: CustomComponentSampleProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
自定义: {this.props.data?.status}
|
||||
<Button type="link" onClick={() => { this.props.fireEvent({ type: 'custom', name: 'sample-event' }); }}>发起事件</Button>
|
||||
{this.props.schema.customSchema}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 示例展示
|
||||
|
||||
<code src='./sample.tsx' />
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* transform: true
|
||||
* inline: true
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { message } from 'antd';
|
||||
import DripTable, { DripTableProvider } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
|
||||
import { mockData, initSchema, SampleRecordType } from '../../../global-configs';
|
||||
import { CustomComponentEvent, CustomComponents } from './custom-components';
|
||||
|
||||
const Demo = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNum, setPageNum] = useState(1);
|
||||
const [pageSize] = useState(10);
|
||||
const [dataSource] = useState(mockData);
|
||||
const [pageDataSource, setPageDataSource] = useState(dataSource);
|
||||
const [schema] = useState(initSchema);
|
||||
const dripTable = useRef(null);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
setPageDataSource(dataSource.slice((pageNum - 1) * pageSize, Math.min(pageNum * pageSize, dataSource.length)));
|
||||
},
|
||||
[dataSource, pageSize, pageNum]
|
||||
);
|
||||
|
||||
const fetchPageData = (nextPageNum: number) => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
setTimeout(
|
||||
() => {
|
||||
setLoading(false);
|
||||
setPageNum(nextPageNum);
|
||||
},
|
||||
500
|
||||
);
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<DripTableProvider ref={dripTable}>
|
||||
<DripTable<SampleRecordType, CustomComponentEvent>
|
||||
driver={DripTableDriverAntDesign}
|
||||
schema={schema}
|
||||
loading={loading}
|
||||
total={mockData.length}
|
||||
dataSource={pageDataSource}
|
||||
components={{ custom: CustomComponents }}
|
||||
onEvent={(event, record, index) => {
|
||||
if (event.type === 'drip-link-click') {
|
||||
const name = event.payload;
|
||||
message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的"${name}"事件按钮。`);
|
||||
console.log(name, record, index);
|
||||
} else if (event.type === 'custom') {
|
||||
message.info(`自定义事件“${event.name}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
|
||||
console.log(event, record, index);
|
||||
}
|
||||
}}
|
||||
onPageChange={(page, pageSize) => { fetchPageData(page); }}
|
||||
/>
|
||||
</DripTableProvider>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
---
|
||||
order: 2
|
||||
title: schema配置项
|
||||
---
|
||||
|
||||
# schema配置项
|
||||
|
||||
> 通过配置项，我们可以决定开启或关闭某些功能，或者设置表格样式等等。
|
||||
|
||||
## configs
|
||||
表格全局配置
|
||||
|
||||
### bordered
|
||||
- 描述: `表格边框`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
添加表格外部边框线。
|
||||
|
||||
### ellipsis
|
||||
- 描述: `平均列宽`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
设置是否平均列宽展示。
|
||||
|
||||
### innerBordered
|
||||
- 描述: `表格边框`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
是否展示表格内部边框线。
|
||||
|
||||
### nodata
|
||||
- 描述: `空提示`
|
||||
- 类型: `{ image: string; text: string; }`
|
||||
- 默认值: `undefined`
|
||||
设置当无数据时展示的兜底图案和提示文本。
|
||||
|
||||
### pagination
|
||||
- 描述: `分页器配置`
|
||||
- 类型:
|
||||
```js
|
||||
false | {
|
||||
size?: 'small' | 'default';
|
||||
pageSize?: number;
|
||||
position?: "bottomLeft" | "bottomCenter" | "bottomRight";
|
||||
showLessItems?: boolean;
|
||||
showQuickJumper?: boolean;
|
||||
showSizeChanger?: boolean;
|
||||
}
|
||||
```
|
||||
- 默认值: `false`
|
||||
是否展示分页器以及配置分页器的样式和位置。
|
||||
|
||||
### rowSelection
|
||||
- 描述: `选择栏`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
设置是否支持选择栏。
|
||||
|
||||
### isVirtualList
|
||||
- 描述: `虚拟列表`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
设置是否开启虚拟列表。
|
||||
|
||||
### scrollY
|
||||
- 描述: `虚拟列表高度`
|
||||
- 类型: `number`
|
||||
- 默认值: `300`
|
||||
设置开启虚拟列表后的表格高度。
|
||||
|
||||
### header
|
||||
- 描述: `标题栏配置`
|
||||
- 类型:
|
||||
```js
|
||||
boolean | {
|
||||
title?: {
|
||||
type: 'title';
|
||||
title: string;
|
||||
html?: boolean;
|
||||
width: string | number;
|
||||
position: 'topLeft' | 'topCenter' | 'topRight';
|
||||
};
|
||||
search?: {
|
||||
type: 'search';
|
||||
placeholder?: string;
|
||||
allowClear?: boolean;
|
||||
searchBtnText?: string;
|
||||
searchStyle?: React.CSSProperties;
|
||||
searchClassName?: string;
|
||||
size?: 'large' | 'middle' | 'small';
|
||||
typeOptions?: { label: string; value: number | string }[];
|
||||
defaultSelectedKey?: number | string;
|
||||
width: string | number;
|
||||
position: 'topLeft' | 'topCenter' | 'topRight';
|
||||
};
|
||||
addButton?: {
|
||||
type: 'addButton';
|
||||
showIcon?: boolean;
|
||||
addBtnText?: string;
|
||||
addBtnStyle?: React.CSSProperties;
|
||||
addBtnClassName?: string;
|
||||
width: string | number;
|
||||
position: 'topLeft' | 'topCenter' | 'topRight';
|
||||
};
|
||||
}
|
||||
```
|
||||
- 默认值: `false`
|
||||
是否展示标题栏以及配置标题栏的样式、位置等基本属性。
|
||||
|
||||
### size
|
||||
- 描述: `表格尺寸`
|
||||
- 类型: `'small' | 'middle' | 'large' | 'default'`
|
||||
- 默认值: `'default'`
|
||||
设置表格尺寸，其中`'small' | 'middle'`为紧凑型表格，适用于小页面或者对话框内。
|
||||
|
||||
### sticky
|
||||
- 描述: `粘性头部`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。
|
||||
|
||||
|
||||
## columns
|
||||
表格列配置
|
||||
|
||||
### $id
|
||||
- 描述: `唯一标识`
|
||||
- 类型: `string`
|
||||
- 默认值: `必填`
|
||||
每一列的唯一标识。
|
||||
|
||||
### ui:type
|
||||
- 描述: `组件类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `必填`
|
||||
是该列对应的单元格内容所需要的组件类型名称，除内置的几个类型外，自定义类型需要使用`命名空间::组件名称`格式，并通过 components 属性传进来。
|
||||
目前所包含的内置类型有：纯文本`text`, 富文本`render-html`, 带事件的链接`links`, 图片`picture`, 代码自定义渲染组件`code`。
|
||||
|
||||
### ui:props
|
||||
- 描述: `组件属性`
|
||||
- 类型: `Record<string, unknown>`
|
||||
- 默认值: `{}`
|
||||
是该列对应的单元格内容所对应的组件的属性。
|
||||
|
||||
### title
|
||||
- 描述: `表头`
|
||||
- 类型: `string`
|
||||
- 默认值: `必填`
|
||||
每一列的标题名称。
|
||||
|
||||
### width
|
||||
- 描述: `列宽`
|
||||
- 类型: `string`
|
||||
- 默认值: `undefined`
|
||||
每一列的宽度，支持数字和带单位的字符串，内容同CSS写法。
|
||||
|
||||
### dataIndex
|
||||
- 描述: `数据索引`
|
||||
- 类型: `string | string[]`
|
||||
- 默认值: `undefined`
|
||||
列数据在数据项中对应的路径，支持通过数组查询嵌套路径。
|
||||
|
||||
### description
|
||||
- 描述: `表头说明`
|
||||
- 类型: `string | string[]`
|
||||
- 默认值: ` `
|
||||
表头的提示说明，如果设置了值，则会在该列的表头标题后添加?图标，鼠标悬浮可查看表头说明内容。
|
||||
|
||||
### type
|
||||
- 描述: `数据类型`
|
||||
- 类型: `string`
|
||||
- 默认值: `string`
|
||||
表示该列每个单元格内所展示的数据的数据格式。
|
||||
|
||||
### default
|
||||
- 描述: `默认值`
|
||||
- 类型: `string`
|
||||
- 默认值: ` `
|
||||
表示该列每个单元格内所展示的数据的默认值，如果数据不下发，则展示该兜底数据。
|
||||
|
||||
### [...props]
|
||||
- 描述: `其他属性`
|
||||
- 类型: `unknown`
|
||||
- 默认值: ` `
|
||||
表示该列的其他属性。
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Button, message } from 'antd';
|
||||
import DripTable, { DripTableContainerHandle, DripTableProps, DripTableProvider } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import 'antd/dist/antd.css';
|
||||
|
||||
import { mockData, initSchema, SampleRecordType } from '../../global-configs';
|
||||
|
||||
const schema = {
|
||||
...initSchema,
|
||||
columns: [...initSchema.columns].filter(cfg => !cfg['ui:type'].startsWith('custom::') && cfg['ui:type'] !== 'render-html')
|
||||
}
|
||||
|
||||
const simpleData = mockData.filter(item => item.id < 10);
|
||||
|
||||
const Demo = () => {
|
||||
const [allSelected, setAllSelected] = useState(false);
|
||||
const dripTable: React.MutableRefObject<DripTableContainerHandle | null> = useRef(null);
|
||||
|
||||
function selectAllRecord() {
|
||||
const tableInstance = dripTable.current;
|
||||
const allKeys = simpleData.map((rec, idx) => idx);
|
||||
if (tableInstance) {
|
||||
const selectedKeys = tableInstance.selectedRowKeys;
|
||||
if (selectedKeys.length < allKeys.length) {
|
||||
tableInstance.select(allKeys);
|
||||
setAllSelected(true);
|
||||
} else {
|
||||
tableInstance.select([]);
|
||||
setAllSelected(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ padding: '0 30px 30px', textAlign: 'left' }}>
|
||||
<Button style={{ marginRight: '5px' }} type="primary" onClick={selectAllRecord}>{allSelected && '取消'}全选</Button>
|
||||
</div>
|
||||
<DripTableProvider ref={dripTable}>
|
||||
<DripTable<SampleRecordType>
|
||||
driver={DripTableDriverAntDesign as DripTableProps<SampleRecordType>['driver']}
|
||||
schema={schema}
|
||||
total={simpleData.length}
|
||||
dataSource={simpleData}
|
||||
onEvent={(event, record, index) => {
|
||||
if (event.type === 'drip-link-click') {
|
||||
const name = event.payload;
|
||||
message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的"${name}"事件按钮。`);
|
||||
console.log(name, record, index);
|
||||
} else if (event.type) {
|
||||
message.info(`自定义事件“${event.type}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
|
||||
console.log(event, record, index);
|
||||
}
|
||||
}}
|
||||
onSelectionChange={(selectedKeys, selectedRows) => {
|
||||
setAllSelected(selectedRows.length >= simpleData.length);
|
||||
}}
|
||||
/>
|
||||
</DripTableProvider>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
---
|
||||
order: 2
|
||||
title: Refs引用
|
||||
---
|
||||
|
||||
# Refs引用
|
||||
|
||||
> 引用实例，利用refs引用可以在外部主动改变 `drip-table` 的状态。
|
||||
|
||||
## 获取表格实例
|
||||
|
||||
利用 `react` 的 `refs` 属性可以获取表格内部开放的状态和函数从而改变 `drip-table` 实例
|
||||
|
||||
> hook写法
|
||||
|
||||
```js
|
||||
const table = useRef(null);
|
||||
```
|
||||
|
||||
> component 写法:
|
||||
```js
|
||||
const table = React.createRef();
|
||||
|
||||
<DripTable refs={table}>
|
||||
```
|
||||
|
||||
## 开放属性
|
||||
|
||||
### selectedRowKeys
|
||||
- 描述: `选中行的键`
|
||||
- 类型: `Array<number | string>`
|
||||
- 默认值: `[]`
|
||||
如果 `<DripTable />` 组件设置了属性 `rowKey`，则存储每条记录 `record` 的 `rowKey` 的值，否则存储每条记录对应的整数序号(从0开始记)。
|
||||
|
||||
### pagination
|
||||
- 描述: `分页配置`
|
||||
- 类型: `Pagination`
|
||||
- 默认值: `{current: 1, pageSize: 10, total: 0}`
|
||||
`<DripTable />` 内部的分页器的基本配置，默认情况包含当前页 `current`，页面大小 `pageSize`，总记录数 `total` 三个属性。
|
||||
|
||||
### loading
|
||||
- 描述: `是否加载`
|
||||
- 类型: `boolean`
|
||||
- 默认值: `false`
|
||||
用于判断 `<DripTable />` 当前是否处在加载状态。
|
||||
|
||||
## 开放函数
|
||||
|
||||
### select
|
||||
- 描述: `选中列`
|
||||
- 类型: `function(keys: Array<number | string>): void`
|
||||
- 返回值: `void`
|
||||
主动调用 `drip-table` 实例的 `select` 函数可以从组件外部手动触发选中某些列、全选和全不选的状态。
|
||||
|
||||
|
||||
## 代码示例
|
||||
<code src='./refs-sample.tsx' />
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
---
|
||||
order: 1
|
||||
title: 基础实例
|
||||
---
|
||||
|
||||
# 基础实例
|
||||
|
||||
> 本篇主要通过一个基础的 Demo 实例来展示如何使用drip-table
|
||||
|
||||
## 代码演示
|
||||
|
||||
```jsx
|
||||
/**
|
||||
* transform: true
|
||||
* defaultShowCode: true
|
||||
* hideActions: ["CSB"]
|
||||
*/
|
||||
import React from 'react';
|
||||
import { DripTable } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import 'antd/dist/antd.css';
|
||||
import 'drip-table/index.css';
|
||||
|
||||
const schema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
configs: {
|
||||
size: 'middle',
|
||||
search: {
|
||||
placeholder: '请输入',
|
||||
searchText: '搜索',
|
||||
position: 'topRight',
|
||||
},
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
position: 'bottomRight',
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
$id: 'mock_1',
|
||||
title: '商品名称',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
maxRow: 1,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
$id: 'mock_2',
|
||||
title: '商品详情',
|
||||
align: 'center',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
tooltip: true,
|
||||
ellipsis: true,
|
||||
maxRow: 1,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
{
|
||||
$id: 'mock_3',
|
||||
title: '库存状态',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
},
|
||||
type: 'string',
|
||||
enumValue: ['onSale', 'soldOut'],
|
||||
enumLabel: ['售卖中', '已售罄'],
|
||||
description: '这是一条提示信息',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
$id: 'mock_4',
|
||||
title: '商品价格',
|
||||
width: 80,
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
prefix: '￥',
|
||||
},
|
||||
type: 'number',
|
||||
dataIndex: 'price',
|
||||
},
|
||||
{
|
||||
"$id": "mock_5",
|
||||
title: '操作',
|
||||
'ui:type': 'links',
|
||||
"ui:props": {
|
||||
mode: 'multiple',
|
||||
operates: [
|
||||
{ name: 'order', label: '预定', href: './#order', target: '_blank' },
|
||||
{ name: 'view', label: '查看', href: './#view' },
|
||||
{ name: 'remove', label: '删除', href: './#remove' },
|
||||
]
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'operate',
|
||||
width: 118
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const dataSource = [
|
||||
{ id: 1, name: 'Apple iPhone 13 Pro', description: 'Apple iPhone 13 Pro (A2639) 128GB 远峰蓝色 支持移动联通电信5G 双卡双待手机', status: 'onSale', price: 7999 },
|
||||
{ id: 2, name: 'HUAWEI P50 Pro', description: 'HUAWEI P50 Pro 4G全网通 原色双影像单元 麒麟9000芯片 万象双环设计 8GB+256GB曜金黑华为手机', status: 'onSale', price: 6488 },
|
||||
{ id: 3, name: 'Redmi Note 11 Pro+', description: 'Redmi Note 11 Pro+ 5G 三星AMOLED高刷屏 1亿像素 120W快充 VC液冷散热 8GB+128GB 神秘黑境 手机 小米 红米', status: 'onSale', price: 2099 },
|
||||
{ id: 4, name: 'vivo X70 Pro+', description: 'vivo X70 Pro+ 12GB+256GB 至黑 5G手机 蔡司光学镜头 全四摄光学防抖 大底微云台主摄 高通骁龙888Plus', status: 'onSale', price: 5999 },
|
||||
{ id: 5, name: '馋小贝 休闲零食大礼包', description: '馋小贝 休闲零食大礼包一整箱送女友女生儿童网红礼盒美食品超市好吃的组合装礼物2000g', status: 'onSale', price: 109.90 },
|
||||
{ id: 6, name: '电动开瓶器', description: '电动开瓶器红酒开瓶器红酒塞倒酒醒酒器家用开瓶器4合1套装', status: 'soldOut', price: 178 },
|
||||
{ id: 7, name: 'Apple MacBook Pro 13.3', description: '新款八核M1芯片 8G 256G SSD 深空灰 笔记本电脑', status: 'soldOut', price: 9999 },
|
||||
];
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<DripTable driver={DripTableDriverAntDesign} schema={schema} dataSource={dataSource} />
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
```
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
order: 1
|
||||
title: 快速开始
|
||||
---
|
||||
|
||||
# 快速开始
|
||||
|
||||
> 本篇主要介绍 `drip-table` 的基本使用能力介绍
|
||||
|
||||
## 如何使用
|
||||
|
||||
### 环境要求
|
||||
|
||||
- `Node.js` 版本大于 10.14.0
|
||||
- `React` 版本大于 16.9.0
|
||||
- `antd` 版本 4.X
|
||||
|
||||
### 设置 `npm` 源
|
||||
|
||||
`drip-table` 发布在 `npm` 上。可以设置 `npm` 源，如果需要镜像的话。
|
||||
|
||||
> 配置NPM源
|
||||
```sh
|
||||
npm config set registry https://registry.npmjs.com/
|
||||
```
|
||||
|
||||
> NPM 登录
|
||||
```sh
|
||||
npm adduser (--registry=https://registry.npmjs.com/)
|
||||
```
|
||||
> 按照提示输入用户名密码即可
|
||||
|
||||
### 安装
|
||||
|
||||
> 安装前确保 `drip-table` 所依赖 `react` 已经安装完毕。
|
||||
|
||||
1. 安装 `DripTable` 渲染引擎
|
||||
|
||||
```shell
|
||||
npm install --save drip-table
|
||||
```
|
||||
|
||||
2. 选择安装主题包
|
||||
|
||||
`drip-table` 目前支持 `antd` 主题，支持组件覆盖绝大多数使用场景。
|
||||
|
||||
antd
|
||||
|
||||
```shell
|
||||
npm install --save drip-table-driver-antd
|
||||
```
|
||||
|
||||
或使用项目中的界面库构建符合 `drip-table` 所约定的自定义的主题包。
|
||||
|
||||
### 快速上手
|
||||
|
||||
1. 引入依赖
|
||||
|
||||
```js
|
||||
import React from 'react';
|
||||
import DripTable from 'drip-table';
|
||||
import 'drip-table/index.css';
|
||||
```
|
||||
|
||||
2. 选择主题包并引入
|
||||
|
||||
引入主题包 `drip-table-driver-${driverName}`，或根据要求传入自定义的主题包。
|
||||
|
||||
目前可选列表如下：
|
||||
|
||||
* drip-table-driver-antd
|
||||
|
||||
引入antd主题包：
|
||||
|
||||
```js
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import 'antd/dist/antd.css';
|
||||
```
|
||||
|
||||
3. 创建组件实例
|
||||
|
||||
```js
|
||||
export default Demo = () => {
|
||||
return (
|
||||
<DripTable
|
||||
driver={DripTableDriverAntDesign}
|
||||
schema={schema}
|
||||
dataSource={dataSource}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
order: 1
|
||||
title: 介绍
|
||||
---
|
||||
|
||||
<div style="display:flex;align-items:center;margin-bottom:24px">
|
||||
<img src="https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg" alt="logo" width="48px"/>
|
||||
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">DripTable</span>
|
||||
</div>
|
||||
|
||||
> 轻量简单的企业级中后台**动态列表生成解决方案**，通过简单配置快速生成页面动态列表。
|
||||
|
||||
## 优势
|
||||
|
||||
1. **高效开发**：提高前端列表开发效率，实现 `LowCode` 方式快速开发列表页。
|
||||
2. **配置化渲染**：以简单的 `JSON Schema` 配置字段，自动渲染处所需要的列表，降低用户使用成本。
|
||||
3. **动态可扩展**：支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件。
|
||||
4. **UI框架自由**：表格UI框架支持 `Ant Design` 主题包，另外还支持自定义主题包。
|
||||
|
||||
## 何时使用
|
||||
|
||||
1. 用于中后台 CMS 列表页的快速搭建，通过简单 `JSON Schema` 数据即可生成列表，无需硬编码。
|
||||
2. 用于 LowCode 列表搭建的前端 Table 预览以及实现，无需复杂前端代码，便可实现自定义的列表。
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
order: 1
|
||||
title: 介绍
|
||||
---
|
||||
|
||||
<div style="display:flex;align-items:center;margin-bottom:24px">
|
||||
<img src="https://storage.360buyimg.com/imgtools/7e0e546a96-d962c880-f9a2-11eb-bf08-d585041b7c80.svg" alt="logo" width="48px"/>
|
||||
<span style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">DripTable</span>
|
||||
</div>
|
||||
|
||||
> 轻量简单的企业级中后台**动态列表生成解决方案**，通过简单配置快速生成页面动态列表。
|
||||
|
||||
## 优势
|
||||
|
||||
1. **高效开发**：提高前端列表开发效率，实现LowCode方式快速开发列表页。
|
||||
2. **配置化渲染**：以简单的 `JSON Schema` 配置字段，自动渲染处所需要的列表，降低用户使用成本。
|
||||
3. **动态可扩展**：支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件。
|
||||
4. **界面框架自由**：表格界面框架支持多种主题包，另外还支持自定义主题包。
|
||||
|
||||
## 何时使用
|
||||
|
||||
1. 用于中后台 `CMS` 列表页的快速搭建，通过简单 `JSON Schema` 数据即可生成列表，无需硬编码。
|
||||
2. 用于 `LowCode` 列表搭建的前端 `Table` 预览以及实现，无需复杂前端代码，便可实现自定义的列表。
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { DripTableCustomEvent } from 'drip-table';
|
||||
|
||||
export interface CustomComponentSampleEvent extends DripTableCustomEvent<'sample-event'> { }
|
||||
|
||||
export type CustomComponentEvent =
|
||||
| CustomComponentSampleEvent
|
||||
| never;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import CustomComponentSample from './sample';
|
||||
|
||||
export const CustomComponents = {
|
||||
CustomComponentSample,
|
||||
}
|
||||
|
||||
export type { CustomComponentEvent } from './event';
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* This file is part of the drip-table project.
|
||||
* @link : https://ace.jd.com/
|
||||
* @author : helloqian12138 (johnhello12138@163.com)
|
||||
* @modifier : helloqian12138 (johnhello12138@163.com)
|
||||
* @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { DripTableComponentProps, DripTableComponentSchema } from 'drip-table';
|
||||
|
||||
import { SampleRecordType } from '../../../global-configs';
|
||||
import { CustomComponentEvent } from '.';
|
||||
|
||||
export interface CustomComponentSampleSchema extends DripTableComponentSchema {
|
||||
customSchema?: string;
|
||||
}
|
||||
|
||||
|
||||
export interface CustomComponentSampleProps extends DripTableComponentProps<SampleRecordType, CustomComponentSampleSchema, CustomComponentEvent> { }
|
||||
|
||||
interface CustomComponentSampleState { }
|
||||
|
||||
export default class CustomComponentSample extends React.PureComponent<CustomComponentSampleProps, CustomComponentSampleState> {
|
||||
public constructor(props: CustomComponentSampleProps) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
自定义: {this.props.data?.status}
|
||||
<Button type="link" onClick={() => { this.props.fireEvent({ type: 'custom', name: 'sample-event' }); }}>发起事件</Button>
|
||||
{this.props.schema.customSchema}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
order: 3
|
||||
title: 案例展示
|
||||
sidemenu: false
|
||||
---
|
||||
|
||||
<code src='./sample.tsx' />
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
.popup-wrapper {
|
||||
transition: height 300ms ease-in-out;
|
||||
}
|
||||
|
||||
.popup-layer {
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: height 300ms ease-in-out;
|
||||
border-top: 1px solid #1890ff;
|
||||
}
|
||||
|
||||
.popup-button {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popup-main {
|
||||
flex: 1 1 auto;
|
||||
background: #ffffff;
|
||||
padding: 0 0 10px;
|
||||
overflow-y: auto;
|
||||
|
||||
:global(.ant-tabs-nav) {
|
||||
padding: 0 20px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-tabs {
|
||||
height: 100%;
|
||||
|
||||
:global(.ant-tabs-content) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.json-edit-tab {
|
||||
height: 100%;
|
||||
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
/**
|
||||
* transform: true
|
||||
* inline: true
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { Button, message, Tabs } from 'antd';
|
||||
import { CloseCircleTwoTone } from '@ant-design/icons';
|
||||
import DripTable, { DripTableProvider, DripTableContainerHandle } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import { JsonEditor } from 'jsoneditor-react';
|
||||
import 'antd/dist/antd.css';
|
||||
import 'jsoneditor-react/es/editor.min.css';
|
||||
import 'drip-table/index.css';
|
||||
|
||||
import { mockData, initSchema, SampleRecordType } from '../../global-configs';
|
||||
import { CustomComponentEvent, CustomComponents } from './custom-components';
|
||||
|
||||
import styles from './sample.module.less';
|
||||
|
||||
const Demo = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pageNum, setPageNum] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [dataSource, setDataSource] = useState(mockData);
|
||||
const [pageDataSource, setPageDataSource] = useState(dataSource);
|
||||
const [schema, setSchema] = useState(initSchema);
|
||||
const [editVisible, setEditVisible] = useState(false);
|
||||
const [allSelected, setAllSelected] = useState(false);
|
||||
const dripTable: React.MutableRefObject<DripTableContainerHandle | null> = useRef(null);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
setPageDataSource(dataSource.slice((pageNum - 1) * pageSize, Math.min(pageNum * pageSize, dataSource.length)));
|
||||
},
|
||||
[dataSource, pageSize, pageNum],
|
||||
);
|
||||
|
||||
const fetchPageData = (nextPageNum: number) => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
setTimeout(
|
||||
() => {
|
||||
setLoading(false);
|
||||
setPageNum(nextPageNum);
|
||||
},
|
||||
500,
|
||||
);
|
||||
setLoading(true);
|
||||
};
|
||||
|
||||
function selectAllRecord() {
|
||||
const tableInstance = dripTable.current;
|
||||
const allKeys = pageDataSource.map((rec, idx) => idx);
|
||||
if (tableInstance) {
|
||||
const selectedKeys = tableInstance.selectedRowKeys;
|
||||
if (selectedKeys.length < allKeys.length) {
|
||||
tableInstance.select(allKeys);
|
||||
setAllSelected(true);
|
||||
} else {
|
||||
tableInstance.select([]);
|
||||
setAllSelected(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div style={{ padding: '0 30px 30px', textAlign: 'left' }}>
|
||||
<Button style={{ marginRight: '5px' }} type="primary" onClick={() => { setEditVisible(!editVisible); }}>编辑</Button>
|
||||
<Button style={{ marginRight: '5px' }} type="primary" onClick={selectAllRecord}>
|
||||
{ allSelected && '取消' }
|
||||
全选
|
||||
</Button>
|
||||
</div>
|
||||
<DripTableProvider ref={dripTable}>
|
||||
<DripTable<SampleRecordType, CustomComponentEvent>
|
||||
driver={DripTableDriverAntDesign}
|
||||
schema={schema}
|
||||
loading={loading}
|
||||
total={mockData.length}
|
||||
dataSource={pageDataSource}
|
||||
components={{ custom: CustomComponents }}
|
||||
onEvent={(event, record, index) => {
|
||||
if (event.type === 'drip-link-click') {
|
||||
const name = event.payload;
|
||||
message.info(`你点击了第${index + 1}行“${record.name} (ID: ${record.id})”的"${name}"事件按钮。`);
|
||||
console.log(name, record, index);
|
||||
} else if (event.type === 'custom') {
|
||||
message.info(`自定义事件“${event.name}”触发于行“${record.name} (ID: ${record.id})”的自定义组件。`);
|
||||
console.log(event, record, index);
|
||||
}
|
||||
}}
|
||||
onPageChange={(page, pageSize) => { fetchPageData(page); }}
|
||||
onSelectionChange={(selectedKeys, selectedRows) => {
|
||||
setAllSelected(selectedRows.length >= pageDataSource.length);
|
||||
}}
|
||||
onSearch={(searchParams) => console.log(searchParams)}
|
||||
onAddButtonClick={event => console.log(event)}
|
||||
/>
|
||||
</DripTableProvider>
|
||||
<div className={styles['popup-wrapper']} style={{ height: editVisible ? '70vh' : '0' }} />
|
||||
<div className={styles['popup-layer']} style={{ height: editVisible ? '70%' : '0' }}>
|
||||
<div style={{ position: 'absolute', right: '10px', top: '8px', zIndex: 1 }}>
|
||||
<CloseCircleTwoTone style={{ fontSize: '24px' }} onClick={() => { setEditVisible(!editVisible); }} />
|
||||
</div>
|
||||
<div className={styles['popup-main']}>
|
||||
<Tabs className={styles['popup-tabs']} size="small">
|
||||
<Tabs.TabPane key="SCHEMA" tab="SCHEMA" className={styles['json-edit-tab']}>
|
||||
<JsonEditor
|
||||
value={schema}
|
||||
onChange={(d: typeof schema) => {
|
||||
setSchema(d);
|
||||
setPageSize(d.configs.pagination ? d.configs.pagination.pageSize || 0 : 10);
|
||||
}}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane key="DATA" tab="DATA" className={styles['json-edit-tab']}>
|
||||
<JsonEditor
|
||||
value={dataSource}
|
||||
onChange={(d: typeof dataSource) => { setDataSource(d); }}
|
||||
/>
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
.dynamic {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce-in-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateX(2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateX(-30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateX(10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce-in-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounce-in-right {
|
||||
-webkit-animation-name: bounce-in-right;
|
||||
animation-name: bounce-in-right;
|
||||
}
|
||||
|
||||
@keyframes bounce-in-left {
|
||||
from,
|
||||
60%,
|
||||
75%,
|
||||
90%,
|
||||
to {
|
||||
-webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
animation-timing-function: cubic-bezier(.215, .61, .355, 1);
|
||||
}
|
||||
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-3000px, 0, 0);
|
||||
transform: translate3d(-3000px, 0, 0);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(25px, 0, 0);
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: translate3d(-10px, 0, 0);
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
|
||||
90% {
|
||||
-webkit-transform: translate3d(5px, 0, 0);
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounce-in-left {
|
||||
-webkit-animation-name: bounce-in-left;
|
||||
animation-name: bounce-in-left;
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
import { ColumnConfig, DripTableSchema } from 'drip-table';
|
||||
|
||||
export const initSchema: DripTableSchema = {
|
||||
$schema: 'http://json-schema.org/draft/2019-09/schema#',
|
||||
configs: {
|
||||
size: 'middle',
|
||||
bordered: true,
|
||||
innerBordered: false,
|
||||
ellipsis: false,
|
||||
sticky: true,
|
||||
rowSelection: true,
|
||||
isVirtualList: false,
|
||||
scrollY: 400,
|
||||
header: {
|
||||
title: {
|
||||
type: 'title',
|
||||
title: '商品列表',
|
||||
span: 8,
|
||||
html: false,
|
||||
position: 'topLeft',
|
||||
},
|
||||
search: {
|
||||
type: 'search',
|
||||
placeholder: '请输入关键字',
|
||||
allowClear: true,
|
||||
searchBtnText: '搜索',
|
||||
span: 16,
|
||||
searchStyle: { float: 'right', width: '360px' },
|
||||
position: 'topCenter',
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
size: 'small',
|
||||
position: 'bottomRight',
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
$id: 'mock_1',
|
||||
title: '商品名称',
|
||||
width: 80,
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
maxRow: 1,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
$id: 'mock_2',
|
||||
title: '商品详情',
|
||||
align: 'center',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
tooltip: true,
|
||||
ellipsis: true,
|
||||
maxRow: 3,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
{
|
||||
$id: 'mock_3',
|
||||
title: '库存状态',
|
||||
width: 150,
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
},
|
||||
type: 'string',
|
||||
enumValue: ['onSale', 'soldOut'],
|
||||
enumLabel: ['售卖中', '已售罄'],
|
||||
description: '这是一条提示信息',
|
||||
dataIndex: 'status',
|
||||
},
|
||||
{
|
||||
$id: 'mock_4',
|
||||
title: '商品价格',
|
||||
width: 150,
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
prefix: '￥',
|
||||
},
|
||||
type: 'number',
|
||||
dataIndex: 'price',
|
||||
},
|
||||
{
|
||||
$id: 'mock_5',
|
||||
title: '渲染组件',
|
||||
width: 150,
|
||||
'ui:type': 'render-html',
|
||||
render: "if (rec.id == 1) {\n return '<button onclick=\"alert(\\'123\\');\" style=\\\"padding: 2px 4px;color:#52c41a; border: 1px solid #b7eb8f; border-radius: 10px; background: #f6ffed\\\">进行中</button>';\n}\nif (rec.id == 2) {\n return '<span style=\\\"padding: 2px 4px;color:#000; border: 1px solid #000; border-radius: 10px; background: #f6ffed\\\">已完成</span>';\n}\nreturn '';",
|
||||
type: 'number',
|
||||
dataIndex: 'render',
|
||||
},
|
||||
{
|
||||
$id: 'mock_6',
|
||||
title: '自定义组件',
|
||||
'ui:type': 'custom::CustomComponentSample',
|
||||
'ui:props': {},
|
||||
type: 'string',
|
||||
dataIndex: 'custom',
|
||||
},
|
||||
{
|
||||
$id: 'mock_7',
|
||||
title: '操作',
|
||||
'ui:type': 'links',
|
||||
'ui:props': {
|
||||
mode: 'multiple',
|
||||
operates: [
|
||||
{ name: 'order', label: '订购', href: './#order', target: '_blank' },
|
||||
{ name: 'view', label: '查看', href: './#view' },
|
||||
{ name: 'edit', label: '编辑', event: 'edit' },
|
||||
{ name: 'remove', label: '删除', event: 'remove' },
|
||||
],
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'operate',
|
||||
},
|
||||
] as unknown as ColumnConfig[],
|
||||
};
|
||||
|
||||
export interface SampleRecordType extends Record<string, unknown> {
|
||||
name: string;
|
||||
id: number;
|
||||
description: string;
|
||||
status: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
export const mockData: SampleRecordType[] = [
|
||||
{ id: 1, name: '商品一', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 7999 },
|
||||
{ id: 2, name: '商品二', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 3, name: '商品三', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 4, name: '商品四', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 5999 },
|
||||
{ id: 5, name: '商品五', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 109.90 },
|
||||
{ id: 6, name: '商品六', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 178 },
|
||||
{ id: 7, name: '商品七', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
{ id: 8, name: '商品八', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 7999 },
|
||||
{ id: 9, name: '商品九', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 10, name: '商品十', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 11, name: '商品一', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 5999 },
|
||||
{ id: 12, name: '商品二', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 109.90 },
|
||||
{ id: 13, name: '商品三', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 178 },
|
||||
{ id: 14, name: '商品四', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
{ id: 15, name: '商品五', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 7999 },
|
||||
{ id: 16, name: '商品六', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 17, name: '商品七', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 18, name: '商品八', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 5999 },
|
||||
{ id: 19, name: '商品九', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 109.90 },
|
||||
{ id: 20, name: '商品十', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 178 },
|
||||
{ id: 21, name: '商品一', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
{ id: 22, name: '商品二', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 7999 },
|
||||
{ id: 23, name: '商品三', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 24, name: '商品四', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 25, name: '商品五', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 5999 },
|
||||
{ id: 26, name: '商品六', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 109.90 },
|
||||
{ id: 27, name: '商品七', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 178 },
|
||||
{ id: 28, name: '商品八', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
{ id: 29, name: '商品九', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 7999 },
|
||||
{ id: 30, name: '商品十', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 31, name: '商品一', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 32, name: '商品二', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 5999 },
|
||||
{ id: 33, name: '商品三', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 109.90 },
|
||||
{ id: 34, name: '商品四', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 178 },
|
||||
{ id: 35, name: '商品五', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
{ id: 36, name: '商品六', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 7999 },
|
||||
{ id: 37, name: '商品七', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 6488 },
|
||||
{ id: 38, name: '商品八', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 2099 },
|
||||
{ id: 39, name: '商品一', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 5999 },
|
||||
{ id: 40, name: '商品二', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 109.90 },
|
||||
{ id: 41, name: '商品三', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'onSale', price: 178 },
|
||||
{ id: 42, name: '商品四', description: '商品是为了出售而生产的劳动成果，是人类社会生产力发展到一定历史阶段的产物，是用于交换的劳动产品。', status: 'soldOut', price: 9999 },
|
||||
|
||||
];
|
||||
|
|
@ -0,0 +1,400 @@
|
|||
/**
|
||||
* This file is part of the jd-mkt5 launch.
|
||||
* @link : https://ace.jd.com/
|
||||
* @author : helloqian12138 (johnhello12138@163.com)
|
||||
* @modifier : helloqian12138 (johnhello12138@163.com)
|
||||
* @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
|
||||
*/
|
||||
|
||||
.__dumi-default-layout[data-route="/"] .__dumi-default-layout-footer-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.__dumi-index-root + .__dumi-default-layout-footer-meta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.__dumi-default-layout[data-route="/"] {
|
||||
padding: 72px 0 32px 0;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-container svg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
z-index: 5;
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-container svg g {
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.home-container svg g > use { animation: move-forever 12s linear infinite; }
|
||||
.home-container svg g > use:nth-child(1) { animation-delay: -1s; }
|
||||
.home-container svg g > use:nth-child(2) { animation-delay: -2s; animation-duration: 5s; }
|
||||
.home-container svg g > use:nth-child(3) { animation-delay: -4s; animation-duration: 4s; }
|
||||
|
||||
@keyframes move-forever {
|
||||
0% { transform: translate(-90px, 0); }
|
||||
100% { transform: translate(85px, 0); }
|
||||
}
|
||||
|
||||
.home-container-banner {
|
||||
height: 700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.home-container-banner-text {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.home-container-banner-text h1,
|
||||
.home-container-feature-text h1,
|
||||
.home-container-features h1 {
|
||||
margin: 0 0 16px;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
line-height: 56px;
|
||||
text-transform: uppercase;
|
||||
background: -webkit-linear-gradient(left, #6a83ff, #01e6f8);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.home-container-banner-text p,
|
||||
.home-container-feature-text p {
|
||||
color: #7cbbff;
|
||||
}
|
||||
|
||||
.home-container-banner-text a:last-child button,
|
||||
.home-container-feature-text a:last-child button {
|
||||
background: #007bff !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.home-container-banner-text button,
|
||||
.home-container-feature-text button {
|
||||
margin-right: 16px;
|
||||
padding: 0 32px;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
border: 1px solid #007bff !important;
|
||||
color: #007bff !important;
|
||||
border-radius: 22px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0; /* 初始状态 透明度为0 */
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0; /* 中间状态 透明度为0 */
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1; /* 结尾状态 透明度为1 */
|
||||
}
|
||||
}
|
||||
|
||||
.home-container-banner-table {
|
||||
margin-top: -195px;
|
||||
width: 600px;
|
||||
height: 350px;
|
||||
border-radius: 10px;
|
||||
background-image: url('https://storage.360buyimg.com/imgtools/eec125447e-e24fa9a0-41f4-11ec-bf12-d7e468206312.png');
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-image {
|
||||
background-color: #00beb9;
|
||||
width: 231px;
|
||||
height: 140px;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: 260px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.table-image div {
|
||||
width: 210px;
|
||||
height: 120px;
|
||||
margin: 10px 10px;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.table-image div ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 30px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.table-image div ul li {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.table-image div ul:first-child {
|
||||
width: 50px;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.table-image div ul:first-child li {
|
||||
width: 100%;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.table-image div ul li:first-child {
|
||||
background-color: rgb(61, 61, 61);
|
||||
}
|
||||
|
||||
.home-container-banner-table::after {
|
||||
background-image: linear-gradient(-220deg, #1d3ede, #01e6f8);
|
||||
border-radius: 50% 0 50% 50%;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 600px;
|
||||
width: 1000px;
|
||||
z-index: -2;
|
||||
margin-top: -6%;
|
||||
margin-left: -100%;
|
||||
}
|
||||
|
||||
.home-container-banner-table::before {
|
||||
background-image: linear-gradient(to right, #e8eefc, #e6fafe);
|
||||
border-radius: 50% 0 50% 50%;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 600px;
|
||||
width: 1000px;
|
||||
z-index: -2;
|
||||
margin-top: -5%;
|
||||
margin-left: -12%;
|
||||
}
|
||||
|
||||
.home-container-banner-table-title {
|
||||
height: 17%;
|
||||
width: 96%;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
margin: 3% auto;
|
||||
border-radius: 6px;
|
||||
animation-name: fadeIn; /* 动画名称 */
|
||||
animation-duration: 1s; /* 动画持续时间 */
|
||||
animation-iteration-count: 1; /* 动画次数 */
|
||||
animation-delay: 0s; /* 延迟时间 */
|
||||
}
|
||||
|
||||
.home-container-banner-table-content {
|
||||
height: 17%;
|
||||
width: 96%;
|
||||
background-image: linear-gradient(302deg, #94a6ec 0%, #f4f6ff 100%);
|
||||
margin: 3% auto;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.home-container-feature {
|
||||
height: 700px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.home-container-feature-table {
|
||||
background-image: url('https://storage.360buyimg.com/imgtools/5e1a6d77c3-9499ed10-5801-11ec-9296-d7123996e7ed.gif');
|
||||
width: 650px;
|
||||
height: 350px;
|
||||
background-size: 650px 350px;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 10px;
|
||||
margin-top: -10%;
|
||||
}
|
||||
|
||||
.home-container-feature-table::after {
|
||||
background-image: linear-gradient(to right, #e8eefc, #e6fafe);
|
||||
border-radius: 20% 20% 40% 40%;
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 600px;
|
||||
width: 800px;
|
||||
z-index: -1;
|
||||
margin-top: -5%;
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.home-container-feature-text {
|
||||
width: 586px;
|
||||
margin-top: -200px;
|
||||
}
|
||||
|
||||
.home-container-features h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-container-features-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 188px;
|
||||
}
|
||||
|
||||
.home-container-features-drip-table {
|
||||
width: 500px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-container-features-drip-table > h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.container-table-content1 {
|
||||
animation-name: fadeIn; /* 动画名称 */
|
||||
animation-duration: 1.5s; /* 动画持续时间 */
|
||||
animation-iteration-count: 1; /* 动画次数 */
|
||||
animation-delay: 0s; /* 延迟时间 */
|
||||
}
|
||||
|
||||
.container-table-content2 {
|
||||
animation-name: fadeIn; /* 动画名称 */
|
||||
animation-duration: 2s; /* 动画持续时间 */
|
||||
animation-iteration-count: 1; /* 动画次数 */
|
||||
animation-delay: 0s; /* 延迟时间 */
|
||||
}
|
||||
|
||||
.container-table-content3 {
|
||||
animation-name: fadeIn; /* 动画名称 */
|
||||
animation-duration: 2.5s; /* 动画持续时间 */
|
||||
animation-iteration-count: 1; /* 动画次数 */
|
||||
animation-delay: 0s; /* 延迟时间 */
|
||||
}
|
||||
|
||||
.home-content {
|
||||
height: 680px;
|
||||
background-image: url('https://img13.360buyimg.com/imagetools/jfs/t1/199878/17/16005/504968/61834c87E3f2e93bf/76bb26ebe6106862.png');
|
||||
}
|
||||
|
||||
.__dumi-default-layout-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.__dumi-default-layout-footer {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-color: #1f232d;
|
||||
}
|
||||
|
||||
.home-carousel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-carousel-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.home-carousel-title h1 {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.home-carousel-title p {
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
.home-carousel .carousel-button {
|
||||
width: 300px;
|
||||
background-color: #ededed;
|
||||
border-radius: 48px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.carousel-button div {
|
||||
z-index: 99;
|
||||
border-radius: 48px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
width: 100%;
|
||||
height: 792px;
|
||||
border-radius: 10px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.carousel-content .drip-table-generator {
|
||||
width: 1200px;
|
||||
box-shadow: 0 4px 30px 0 rgb(0 0 0 / 10%);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
margin-left: -600px;
|
||||
}
|
||||
|
||||
.carousel-button i {
|
||||
transition: 1s;
|
||||
position: absolute;
|
||||
border-radius: 48px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
background-color: #ffffff;
|
||||
width: 150px;
|
||||
height: 48px;
|
||||
box-shadow: 0 2px 8px #0000001a;
|
||||
}
|
||||
|
||||
.carousel-button .carousel-checked {
|
||||
left: 150px;
|
||||
}
|
||||
|
||||
.home-footer {
|
||||
width: 960px;
|
||||
margin: 72px auto 32px auto;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #ebedf1;
|
||||
text-align: center;
|
||||
color: #b0b1ba;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: DripTable
|
||||
transform: true
|
||||
inline: true
|
||||
sidemenu: false
|
||||
footer: Copyright © 2021 JDFED
|
||||
---
|
||||
|
||||
<code src="./index.tsx" />
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
/**
|
||||
* transform: true
|
||||
* inline: true
|
||||
* sidemenu: false
|
||||
*/
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import DripTable, { DripTableSchema } from 'drip-table';
|
||||
import DripTableDriverAntDesign from 'drip-table-driver-antd';
|
||||
import 'antd/dist/antd.css';
|
||||
|
||||
import DripTableGeneratorDemo from './drip-table-generator/preview/sample';
|
||||
import { mockData, SampleRecordType } from './global-configs';
|
||||
|
||||
import './dynamic.css';
|
||||
import './index.css';
|
||||
|
||||
const schema: DripTableSchema = {
|
||||
"$schema": "http://json-schema.org/draft/2019-09/schema#",
|
||||
configs: {
|
||||
size: 'middle',
|
||||
pagination: {
|
||||
pageSize: 10,
|
||||
position: 'bottomRight',
|
||||
},
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
"$id": "mock_1",
|
||||
title: '商品名称',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
"$id": "mock_2",
|
||||
title: '商品描述',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
tooltip: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'description',
|
||||
},
|
||||
{
|
||||
"$id": "mock_3",
|
||||
title: '商品状态',
|
||||
'ui:type': 'text',
|
||||
'ui:props': {
|
||||
mode: 'single',
|
||||
},
|
||||
type: 'string',
|
||||
enumValue: ['onSale', 'soldOut'],
|
||||
enumLabel: ['售卖中', '已售罄'],
|
||||
description: '这是一个tooltip',
|
||||
dataIndex: 'status',
|
||||
width: 92
|
||||
},
|
||||
{
|
||||
"$id": "mock_4",
|
||||
title: '商品价格',
|
||||
'ui:type': 'text',
|
||||
"ui:props": {
|
||||
mode: 'single',
|
||||
prefix: '￥',
|
||||
},
|
||||
type: 'number',
|
||||
dataIndex: 'price',
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
"$id": "mock_5",
|
||||
title: '操作',
|
||||
'ui:type': 'links',
|
||||
"ui:props": {
|
||||
mode: 'multiple',
|
||||
operates: [
|
||||
{ name: 'order', label: '预定', href: './#order', target: '_blank' },
|
||||
{ name: 'view', label: '查看', href: './#view' },
|
||||
{ name: 'remove', label: '删除', href: './#remove' },
|
||||
]
|
||||
},
|
||||
type: 'string',
|
||||
dataIndex: 'operate',
|
||||
width: 118
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
const [checked, setChecked] = useState(false)
|
||||
const [bodyFlag, setBodyFlag] = useState(false)
|
||||
const [footerFlag, setFooterFlag] = useState(false)
|
||||
useEffect(() => {
|
||||
window.addEventListener('scroll', setAllFlag)
|
||||
}, [])
|
||||
|
||||
function setAllFlag() {
|
||||
if (window.pageYOffset + window.innerHeight > 1200) {
|
||||
setBodyFlag(true)
|
||||
}
|
||||
if (window.pageYOffset + window.innerHeight > 2800) {
|
||||
setFooterFlag(true)
|
||||
}
|
||||
}
|
||||
|
||||
function setAllChecked() {
|
||||
if (checked) {
|
||||
setChecked(false)
|
||||
} else {
|
||||
setChecked(true)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className="__dumi-index-root">
|
||||
<div className='home-container'>
|
||||
<div className='home-container-banner'>
|
||||
<div className='home-container-banner-text'>
|
||||
<h1 className='dynamic bounce-in-left'>DripTable</h1>
|
||||
<div className='home-container-banner-markdown'>
|
||||
<p className='dynamic bounce-in-left'>JD - 中后台「表格」开箱即用解决方案</p>
|
||||
<p className='dynamic bounce-in-left'><b>高效开发: </b> 提高前端列表开发效率，实现 LowCode 方式快速开发列表页</p>
|
||||
<p className='dynamic bounce-in-left'><b>配置化渲染: </b> 以简单的 JSON Schema 配置字段，自动渲染处所需要的列表，降低用户使用成本</p>
|
||||
<p className='dynamic bounce-in-left'><b>动态可扩展: </b> 支持自定义组件开发，通过API快速生成自定义的或者实现业务功能的单元格组件</p>
|
||||
<p className='dynamic bounce-in-left'><b>UI框架自由: </b> 表格界面框架支持 antd 主题包，另外还支持自定义主题包</p>
|
||||
</div>
|
||||
<div className='dynamic bounce-in-left'>
|
||||
<a href="/drip-table/sample">
|
||||
<button type='button'>
|
||||
使用示例
|
||||
</button>
|
||||
</a>
|
||||
<a href="/drip-table">
|
||||
<button type='button'>
|
||||
起步
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className='home-container-banner-table'>
|
||||
<img src="https://storage.360buyimg.com/imgtools/eec125447e-e24fa9a0-41f4-11ec-bf12-d7e468206312.png" alt="" />
|
||||
<div className='table-image'>
|
||||
<div>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='home-container-feature'>
|
||||
<div className='home-container-feature-table'>
|
||||
</div>
|
||||
<div className='home-container-feature-text'>
|
||||
{
|
||||
bodyFlag && <div>
|
||||
<h1 className='dynamic bounce-in-right'>DripTableGenerator</h1>
|
||||
<div className='home-container-feature-markdown'>
|
||||
<p className='dynamic bounce-in-right'>可视化的 DripTable JSON Schema 配置数据的生成工具</p>
|
||||
<p className='dynamic bounce-in-right'><b>使用简单</b>：简单的拖拽即可添加列表配置。</p>
|
||||
<p className='dynamic bounce-in-right'><b>Drip 生态</b>：使用 DripForm 和 DripDesign 快速生成业务组件和组件面板。</p>
|
||||
<p className='dynamic bounce-in-right'><b>自定义组件</b>：通过在线代码编辑器，实现 LowCode 生成自定义组件。</p>
|
||||
<p className='dynamic bounce-in-right'><b>配置可视化</b>：通过专用可视化配置工具，实现简单拖拽即可生成 JSON Schema 数据结构数据。</p>
|
||||
</div>
|
||||
<div className='dynamic bounce-in-right'>
|
||||
<a href="/drip-table-generator/preview">
|
||||
<button type='button'>
|
||||
使用示例
|
||||
</button>
|
||||
</a>
|
||||
<a href="/drip-table-generator">
|
||||
<button type='button'>
|
||||
起步
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='home-carousel'>
|
||||
<div className='home-carousel-title'>
|
||||
<div><h1>预览</h1></div>
|
||||
</div>
|
||||
<div className='carousel-button'>
|
||||
<i className={checked ? 'carousel-checked' : ''}></i>
|
||||
<div onClick={setAllChecked}>DripTable</div>
|
||||
<div onClick={setAllChecked}>DripTableGenerator</div>
|
||||
</div>
|
||||
{!checked && <div className='carousel-content'> <div className='drip-table-generator'>
|
||||
<DripTable<SampleRecordType>
|
||||
driver={DripTableDriverAntDesign}
|
||||
schema={schema}
|
||||
dataSource={mockData}
|
||||
/>
|
||||
</div>
|
||||
</div>}
|
||||
{checked && <div className='carousel-content'><div className='drip-table-generator' style={{ paddingTop: '16px', background: '#FFF' }}><DripTableGeneratorDemo showHeader={false} /></div>
|
||||
</div>}
|
||||
</div>
|
||||
<div className='home-container-features' style={{ marginTop: '16px' }}>
|
||||
<h1>何时使用</h1>
|
||||
<div className='home-container-features-content'>
|
||||
{
|
||||
footerFlag && <div className='home-container-features-drip-table'>
|
||||
<h1 className={'dynamic bounce-in-left'}>DripTable</h1>
|
||||
<p className={'dynamic bounce-in-left'}>用于中后台 CMS 列表页的快速搭建，通过简单 JSON Schema 数据即可生成列表，无需硬编码。</p>
|
||||
<p className={'dynamic bounce-in-left'}>用于 LowCode 列表搭建的前端 Table 预览以及实现，无需复杂前端代码，便可实现自定义的列表。</p>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
footerFlag && <div className='home-container-features-drip-table'>
|
||||
<h1 className={'dynamic bounce-in-right'}>DripTableGenerator</h1>
|
||||
<p className={'dynamic bounce-in-right'}>用于产品人员通过简单拖拽方式快速搭建列表页。</p>
|
||||
<p className={'dynamic bounce-in-right'}>用于开发人员通过LowCode方式快速生成自定义组件。</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='home-footer'>
|
||||
Copyright © 2021 JDFED
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
|
@ -5,11 +5,13 @@
|
|||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "dumi dev",
|
||||
"build": "yarn run build:drip-table && yarn run build:drip-table-driver-antd && yarn run build:drip-table-generator",
|
||||
"build:drip-table": "lerna run build --stream --scope=drip-table",
|
||||
"build:drip-table-driver-antd": "lerna run build --stream --scope=drip-table-driver-antd",
|
||||
"build:drip-table-generator": "lerna run build --stream --scope=drip-table-generator",
|
||||
"changelog": "lerna-changelog",
|
||||
"size": "ANALYZE=1 dumi build",
|
||||
"clean": "lerna clean -y",
|
||||
"lint": "yarn run lint:git && yarn run lint:drip-table && yarn run lint:drip-table-driver-antd && yarn run lint:drip-table-generator",
|
||||
"lint:git": "sh ./bin/gitlint.sh || exit 1",
|
||||
|
|
@ -23,8 +25,11 @@
|
|||
"@types/react-window": "^1.8.5",
|
||||
"@typescript-eslint/eslint-plugin": "4.33.0",
|
||||
"@typescript-eslint/parser": "4.33.0",
|
||||
"@umijs/plugin-esbuild": "^1.4.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-import": "^1.13.3",
|
||||
"drip-table": "link:packages/drip-table",
|
||||
"dumi": "^1.1.35",
|
||||
"eslint-config-lvmcn": "0.0.30",
|
||||
"eslint-formatter-pretty": "4.0.0",
|
||||
"eslint-import-resolver-alias": "^1.1.2",
|
||||
|
|
@ -35,10 +40,14 @@
|
|||
"eslint-plugin-unicorn": "^38.0.1",
|
||||
"eslint-plugin-unused-imports": "^1.1.1",
|
||||
"father-build": "^1.20.4",
|
||||
"jsoneditor": "^9.5.7",
|
||||
"jsoneditor-react": "^3.1.1",
|
||||
"lerna": "3.22.1",
|
||||
"lerna-changelog": "1.0.1",
|
||||
"lint-staged": "10.0.7",
|
||||
"monaco-editor-webpack-plugin": "^4.0.0",
|
||||
"react": "17.0.2",
|
||||
"react-monaco-editor": "0.43.0",
|
||||
"stylelint": "13.8.0",
|
||||
"stylelint-config-standard": "20.0.0",
|
||||
"stylelint-formatter-pretty": "2.1.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue