p85126437
/
amis
forked from p96170835/amis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Card 样式优化

This commit is contained in:
2betop 2019-12-24 11:25:55 +08:00
parent 2c8c0cb2e3
commit 3788089c08
12 changed files with 902 additions and 862 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
__tests__/renderers/Carousel.test.tsx
View File

@ -1,44 +1,48 @@
import React = require('react');
import {render, fireEvent} from 'react-testing-library';
import '../../src/themes/default';
import {
render as amisRender
} from '../../src/index';
import { makeEnv } from '../helper';
import React = require("react");
import { render, fireEvent } from "react-testing-library";
import "../../src/themes/default";
import { render as amisRender } from "../../src/index";
import { makeEnv } from "../helper";
test('Renderer:carousel', async () => {
const {
container
} = render(amisRender({
type: 'carousel',
controlsTheme: 'light',
width: '500',
height: '300',
test("Renderer:carousel", async () => {
const { container } = render(
amisRender(
{
type: "carousel",
controlsTheme: "light",
width: "500",
height: "300",
options: [
{
image: 'https://video-react.js.org/assets/poster.png',
title: '标题',
titleClassName: 'block',
description: '描述',
descriptionClassName: 'block'
},
{
html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
},
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
}
{
image:
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
title: "标题",
titleClassName: "block",
description: "描述",
descriptionClassName: "block"
},
{
html:
'<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
},
{
image:
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
],
className: 'show'
}, {}, makeEnv({
})));
className: "show"
},
{},
makeEnv({})
)
);
const image = document.querySelector('div.a-Carousel-item');
fireEvent.mouseEnter(image as HTMLDivElement);
const leftArrow = document.querySelector('div.a-Carousel-leftArrow')
fireEvent.click(leftArrow as HTMLDivElement);
const rightArrow = document.querySelector('div.a-Carousel-rightArrow')
fireEvent.click(rightArrow as HTMLDivElement);
const image = document.querySelector("div.a-Carousel-item");
fireEvent.mouseEnter(image as HTMLDivElement);
const leftArrow = document.querySelector("div.a-Carousel-leftArrow");
fireEvent.click(leftArrow as HTMLDivElement);
const rightArrow = document.querySelector("div.a-Carousel-rightArrow");
fireEvent.click(rightArrow as HTMLDivElement);
expect(container).toMatchSnapshot();
expect(container).toMatchSnapshot();
});

2
__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
View File

@ -20,7 +20,7 @@ exports[`Renderer:carousel 1`] = `
<div
class="image "
style="background-image: url(https://video-react.js.org/assets/poster.png); background-size: contain; background-repeat: no-repeat; background-position: center center;"
style="background-image: url(https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png); background-size: contain; background-repeat: no-repeat; background-position: center center;"
/>

42
docs/renderers/Carousel.md
View File

@ -2,26 +2,26 @@
轮播图
- `type` 请设置成 `carousel`
- `className` 外层 Dom 的类名
- `options` 轮播面板数据，默认`[]`，支持以下模式
- 图片
- `image` 图片链接
- `imageClassName` 图片类名
- `title` 图片标题
- `titleClassName` 图片标题类名
- `description` 图片描述
- `descriptionClassName` 图片描述类名
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
- `itemSchema` 自定义`schema`来展示数据
- `auto` 是否自动轮播，默认`true`
- `interval` 切换动画间隔，默认`5s`
- `duration` 切换动画时长，默认`0.5s`
- `width` 宽度，默认`auto`
- `height` 高度，默认`200px`
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
- `type` 请设置成 `carousel`
- `className` 外层 Dom 的类名
- `options` 轮播面板数据，默认`[]`，支持以下模式
- 图片
- `image` 图片链接
- `imageClassName` 图片类名
- `title` 图片标题
- `titleClassName` 图片标题类名
- `description` 图片描述
- `descriptionClassName` 图片描述类名
- `html` HTML 自定义，同[Tpl](./Tpl.md)一致
- `itemSchema` 自定义`schema`来展示数据
- `auto` 是否自动轮播，默认`true`
- `interval` 切换动画间隔，默认`5s`
- `duration` 切换动画时长，默认`0.5s`
- `width` 宽度，默认`auto`
- `height` 高度，默认`200px`
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
```schema:height="350" scope="body"
{
@ -31,7 +31,7 @@
"animation": "slide",
"options": [
{
"image": "https://video-react.js.org/assets/poster.png"
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"

6
docs/renderers/Video.md
View File

@ -3,7 +3,7 @@
视频播放器。
| 属性名 | 类型 | 默认值 | 说明 |
|-----------|-----------|-----------|------------------------------------|
| --------- | --------- | --------- | ---------------------------------- |
| type | `string` | `"video"` | 指定为 video 渲染器 |
| className | `string` | | 外层 Dom 的类名 |
| src | `string` | | 视频地址 |
@ -17,7 +17,7 @@
{
"type": "video",
"autoPlay": false,
"src": "raw:https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
"poster": "raw:https://video-react.js.org/assets/poster.png"
"src": "raw:https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
"poster": "raw:https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
}
```

206
examples/components/CRUD/Grid.jsx
View File

@ -1,219 +1,219 @@
export default {
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
title: '增删改查示例',
remark: 'bla bla bla',
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
title: "增删改查示例",
remark: "bla bla bla",
body: {
type: 'crud',
api: '/api/sample',
type: "crud",
api: "/api/sample",
// api: "/api/mock2/crud/table?waitSeconds=100000",
mode: 'cards',
mode: "cards",
defaultParams: {
perPage: 12
},
// fixAlignment: true,
// masonryLayout: true,
filter: {
title: '条件搜索',
submitText: '',
title: "条件搜索",
submitText: "",
controls: [
{
type: 'text',
name: 'keywords',
placeholder: '通过关键字搜索',
type: "text",
name: "keywords",
placeholder: "通过关键字搜索",
addOn: {
label: '搜索',
type: 'submit'
label: "搜索",
type: "submit"
}
},
{
type: 'plain',
text: '这只是个示例, 目前搜索对查询结果无效.'
type: "plain",
text: "这只是个示例, 目前搜索对查询结果无效."
}
]
},
bulkActions: [
{
label: '批量删除',
actionType: 'ajax',
api: 'delete:/api/sample/${ids|raw}',
confirmText: '确定要批量删除?'
label: "批量删除",
actionType: "ajax",
api: "delete:/api/sample/${ids|raw}",
confirmText: "确定要批量删除?"
},
{
label: '批量修改',
actionType: 'dialog',
label: "批量修改",
actionType: "dialog",
dialog: {
title: '批量编辑',
name: 'sample-bulk-edit',
title: "批量编辑",
name: "sample-bulk-edit",
body: {
type: 'form',
api: '/api/sample/bulkUpdate2',
type: "form",
api: "/api/sample/bulkUpdate2",
controls: [
{
type: 'hidden',
name: 'ids'
type: "hidden",
name: "ids"
},
{
type: 'text',
name: 'engine',
label: 'Engine'
type: "text",
name: "engine",
label: "Engine"
}
]
}
}
}
],
quickSaveApi: '/api/sample/bulkUpdate',
quickSaveItemApi: '/api/sample/$id',
quickSaveApi: "/api/sample/bulkUpdate",
quickSaveItemApi: "/api/sample/$id",
draggable: true,
card: {
header: {
title: '$engine',
subTitle: '$platform',
subTitlePlaceholder: '暂无说明',
title: "$engine",
subTitle: "$platform",
subTitlePlaceholder: "暂无说明",
avatar:
'<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
avatarClassName: 'pull-left thumb b-3x m-r'
'<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',
avatarClassName: "pull-left thumb b-3x m-r"
},
actions: [
{
type: 'button',
label: '查看',
actionType: 'dialog',
type: "button",
label: "查看",
actionType: "dialog",
dialog: {
title: '查看',
title: "查看",
body: {
type: 'form',
type: "form",
controls: [
{
type: 'static',
name: 'engine',
label: 'Engine'
type: "static",
name: "engine",
label: "Engine"
},
{
type: 'divider'
type: "divider"
},
{
type: 'static',
name: 'browser',
label: 'Browser'
type: "static",
name: "browser",
label: "Browser"
},
{
type: 'divider'
type: "divider"
},
{
type: 'static',
name: 'platform',
label: 'Platform(s)'
type: "static",
name: "platform",
label: "Platform(s)"
},
{
type: 'divider'
type: "divider"
},
{
type: 'static',
name: 'version',
label: 'Engine version'
type: "static",
name: "version",
label: "Engine version"
},
{
type: 'divider'
type: "divider"
},
{
type: 'static',
name: 'grade',
label: 'CSS grade'
type: "static",
name: "grade",
label: "CSS grade"
},
{
type: 'divider'
type: "divider"
},
{
type: 'html',
type: "html",
html:
'<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
"<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
}
]
}
}
},
{
type: 'button',
label: '编辑',
actionType: 'dialog',
type: "button",
label: "编辑",
actionType: "dialog",
dialog: {
title: '编辑',
title: "编辑",
body: {
type: 'form',
name: 'sample-edit-form',
api: '/api/sample/$id',
type: "form",
name: "sample-edit-form",
api: "/api/sample/$id",
controls: [
{
type: 'text',
name: 'engine',
label: 'Engine',
type: "text",
name: "engine",
label: "Engine",
required: true
},
{
type: 'divider'
type: "divider"
},
{
type: 'text',
name: 'browser',
label: 'Browser',
type: "text",
name: "browser",
label: "Browser",
required: true
},
{
type: 'divider'
type: "divider"
},
{
type: 'text',
name: 'platform',
label: 'Platform(s)',
type: "text",
name: "platform",
label: "Platform(s)",
required: true
},
{
type: 'divider'
type: "divider"
},
{
type: 'text',
name: 'version',
label: 'Engine version'
type: "text",
name: "version",
label: "Engine version"
},
{
type: 'divider'
type: "divider"
},
{
type: 'text',
name: 'grade',
label: 'CSS grade'
type: "text",
name: "grade",
label: "CSS grade"
}
]
}
}
},
{
type: 'button',
label: '删除',
actionType: 'ajax',
confirmText: '您确认要删除?',
api: 'delete:/api/sample/$id'
type: "button",
label: "删除",
actionType: "ajax",
confirmText: "您确认要删除?",
api: "delete:/api/sample/$id"
}
],
body: [
{
name: 'engine',
label: 'engine',
name: "engine",
label: "engine",
sortable: true,
quickEdit: true
},
{
name: 'browser',
label: 'Browser'
name: "browser",
label: "Browser"
},
{
name: 'platform',
label: 'Platform'
name: "platform",
label: "Platform"
},
{
name: 'version',
label: 'version'
name: "version",
label: "version"
}
]
}

63
examples/components/Carousel.jsx
View File

@ -1,11 +1,11 @@
export default {
type: 'page',
title: '轮播图',
type: "page",
title: "轮播图",
data: {
carousel0: [
'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg',
'https://video-react.js.org/assets/poster.png',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
"https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg",
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
],
carousel1: [
{
@ -14,28 +14,29 @@ export default {
},
{
image:
'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg'
"https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg"
},
{
image:
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
},
body: [
{
type: 'grid',
type: "grid",
columns: [
{
type: 'panel',
title: '直接页面配置',
type: "panel",
title: "直接页面配置",
body: {
type: 'carousel',
controlsTheme: 'light',
height: '300',
type: "carousel",
controlsTheme: "light",
height: "300",
options: [
{
image: 'https://video-react.js.org/assets/poster.png'
image:
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
html:
@ -43,21 +44,21 @@ export default {
},
{
image:
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
},
{
type: 'panel',
title: '使用itemSchema配置',
type: "panel",
title: "使用itemSchema配置",
body: {
type: 'carousel',
name: 'carousel0',
controlsTheme: 'dark',
height: '300',
type: "carousel",
name: "carousel0",
controlsTheme: "dark",
height: "300",
itemSchema: {
type: 'tpl',
type: "tpl",
tpl:
'<div style="height: 100%; background-image: url(<%=data.item%>); background-position: center center; background-size: cover;"></div>'
}
@ -66,20 +67,20 @@ export default {
]
},
{
type: 'grid',
type: "grid",
columns: [
{
type: 'form',
title: '表单内展示',
type: "form",
title: "表单内展示",
sm: 6,
controls: [
{
type: 'carousel',
controlsTheme: 'dark',
name: 'carousel1',
label: 'carousel',
animation: 'slide',
height: '300'
type: "carousel",
controlsTheme: "dark",
name: "carousel1",
label: "carousel",
animation: "slide",
height: "300"
}
]
}

1216
examples/components/Form/Picker.jsx
View File

File diff suppressed because it is too large Load Diff

12
examples/components/Video.jsx
View File

@ -1,14 +1,16 @@
export default {
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
title: '视频播放器',
$schema: "https://houtai.baidu.com/v2/schemas/page.json#",
title: "视频播放器",
body: [
'<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
{
type: 'video',
type: "video",
autoPlay: false,
rates: [1.0, 1.5, 2.0],
src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
poster: 'https://video-react.js.org/assets/poster.png'
src:
"https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
poster:
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
}
]
};

110
mock/crud/list.js
View File

@ -1,58 +1,68 @@
const faker = require('faker');
const faker = require("faker");
function repeat(fn, times = 10) {
let arr = [];
while (times--) {
arr.push(fn());
}
let arr = [];
while (times--) {
arr.push(fn());
}
return arr;
return arr;
}
module.exports = function(req, res) {
res.json({
status: 0,
msg: '',
data: repeat(() => ({
id: '{{random.number}}',
text: '{{address.city}}',
progress: Math.round(Math.random() * 100),
type: Math.round(Math.random() * 5),
boolean: Math.random() > 0.5 ? true : false,
// boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)],
list: repeat(() => ({
title: '{{name.title}}',
description: '{{lorem.words}}'
}), Math.round(Math.random() * 10)),
audio: 'https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac',
carousel: [
{
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
},
{
html: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
},
{
image: 'https://video-react.js.org/assets/poster.png'
}
],
date: Math.round(Date.now() / 1000),
// image: '{{image.imageUrl}}',
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg',
}), parseInt(req.query.perPage, 10) || 10)
.map(item => {
try {
const str = JSON.stringify(item);
item = JSON.parse(faker.fake(str));
} catch (e) {
// continue regardless of error
}
res.json({
status: 0,
msg: "",
data: repeat(
() => ({
id: "{{random.number}}",
text: "{{address.city}}",
progress: Math.round(Math.random() * 100),
type: Math.round(Math.random() * 5),
boolean: Math.random() > 0.5 ? true : false,
// boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)],
list: repeat(
() => ({
title: "{{name.title}}",
description: "{{lorem.words}}"
}),
Math.round(Math.random() * 10)
),
audio:
"https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac",
carousel: [
{
image:
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
},
{
html:
'<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
},
{
image:
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
}
],
date: Math.round(Date.now() / 1000),
// image: '{{image.imageUrl}}',
image:
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}),
parseInt(req.query.perPage, 10) || 10
).map(item => {
try {
const str = JSON.stringify(item);
item = JSON.parse(faker.fake(str));
} catch (e) {
// continue regardless of error
}
item.json = {
id: 1,
text: 'text'
};
return item;
})
item.json = {
id: 1,
text: "text"
};
return item;
})
}
});
};

18
scss/components/_card.scss
View File

@ -4,6 +4,9 @@
border-radius: $Card-borderRadius;
margin-bottom: $gap-base;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
&-title {
color: $text--loud-color;
@ -14,10 +17,19 @@
}
&-subTitle {
white-space: nowrap;
// white-space: nowrap;
max-height: $fontSizeBase * $lineHeightBase * 2;
overflow: hidden;
text-overflow: ellipsis;
color: $text--muted-color;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
}
&-title + &-subTitle {
margin-top: $gap-xs;
}
&-checkBtn {
@ -41,6 +53,7 @@
&-heading {
overflow: hidden;
padding: $gap-sm $gap-base;
flex: 1 0 auto;
}
&-avtar {
@ -74,6 +87,7 @@
&-body {
padding: $gap-base;
flex: 1 0 auto;
}
&-heading + &-body {
@ -91,6 +105,8 @@
flex-basis: 0;
flex-grow: 1;
width: 0;
text-overflow: ellipsis;
overflow: hidden;
}
&-fieldLabel {

4
scss/components/_cards.scss
View File

@ -78,6 +78,10 @@
border-radius: $Card-borderRadius;
}
&-body > div {
display: flex;
}
&--masonry {
display: block;

3
scss/components/_list.scss
View File

@ -135,6 +135,9 @@
flex-basis: 0;
flex-grow: 1;
max-width: 100%;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
&-fieldLabel {