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

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

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

2
docs/renderers/Carousel.md
View File

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

63
examples/components/Carousel.jsx
View File

@ -1,11 +1,11 @@
export default { export default {
type: 'page', type: "page",
title: '轮播图', title: "轮播图",
data: { data: {
carousel0: [ carousel0: [
'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg', "https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg",
'https://video-react.js.org/assets/poster.png', "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' "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
], ],
carousel1: [ carousel1: [
{ {
@ -14,28 +14,29 @@ export default {
}, },
{ {
image: image:
'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg' "https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg"
}, },
{ {
image: 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: [ body: [
{ {
type: 'grid', type: "grid",
columns: [ columns: [
{ {
type: 'panel', type: "panel",
title: '直接页面配置', title: "直接页面配置",
body: { body: {
type: 'carousel', type: "carousel",
controlsTheme: 'light', controlsTheme: "light",
height: '300', height: "300",
options: [ 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: html:
@ -43,21 +44,21 @@ export default {
}, },
{ {
image: 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', type: "panel",
title: '使用itemSchema配置', title: "使用itemSchema配置",
body: { body: {
type: 'carousel', type: "carousel",
name: 'carousel0', name: "carousel0",
controlsTheme: 'dark', controlsTheme: "dark",
height: '300', height: "300",
itemSchema: { itemSchema: {
type: 'tpl', type: "tpl",
tpl: tpl:
'<div style="height: 100%; background-image: url(<%=data.item%>); background-position: center center; background-size: cover;"></div>' '<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: [ columns: [
{ {
type: 'form', type: "form",
title: '表单内展示', title: "表单内展示",
sm: 6, sm: 6,
controls: [ controls: [
{ {
type: 'carousel', type: "carousel",
controlsTheme: 'dark', controlsTheme: "dark",
name: 'carousel1', name: "carousel1",
label: 'carousel', label: "carousel",
animation: 'slide', animation: "slide",
height: '300' 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 { export default {
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#', $schema: "https://houtai.baidu.com/v2/schemas/page.json#",
title: '视频播放器', title: "视频播放器",
body: [ body: [
'<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>', '<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
{ {
type: 'video', type: "video",
autoPlay: false, autoPlay: false,
rates: [1.0, 1.5, 2.0], rates: [1.0, 1.5, 2.0],
src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4', src:
poster: 'https://video-react.js.org/assets/poster.png' "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"
} }
] ]
}; };

48
mock/crud/list.js
View File

@ -1,4 +1,4 @@
const faker = require('faker'); const faker = require("faker");
function repeat(fn, times = 10) { function repeat(fn, times = 10) {
let arr = []; let arr = [];
@ -12,35 +12,45 @@ function repeat(fn, times = 10) {
module.exports = function(req, res) { module.exports = function(req, res) {
res.json({ res.json({
status: 0, status: 0,
msg: '', msg: "",
data: repeat(() => ({ data: repeat(
id: '{{random.number}}', () => ({
text: '{{address.city}}', id: "{{random.number}}",
text: "{{address.city}}",
progress: Math.round(Math.random() * 100), progress: Math.round(Math.random() * 100),
type: Math.round(Math.random() * 5), type: Math.round(Math.random() * 5),
boolean: Math.random() > 0.5 ? true : false, boolean: Math.random() > 0.5 ? true : false,
// boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)], // boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)],
list: repeat(() => ({ list: repeat(
title: '{{name.title}}', () => ({
description: '{{lorem.words}}' title: "{{name.title}}",
}), Math.round(Math.random() * 10)), description: "{{lorem.words}}"
audio: 'https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac', }),
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: [ carousel: [
{ {
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg' 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>' 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' image:
"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
} }
], ],
date: Math.round(Date.now() / 1000), date: Math.round(Date.now() / 1000),
// image: '{{image.imageUrl}}', // image: '{{image.imageUrl}}',
image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg', image:
}), parseInt(req.query.perPage, 10) || 10) "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
.map(item => { }),
parseInt(req.query.perPage, 10) || 10
).map(item => {
try { try {
const str = JSON.stringify(item); const str = JSON.stringify(item);
item = JSON.parse(faker.fake(str)); item = JSON.parse(faker.fake(str));
@ -50,9 +60,9 @@ module.exports = function(req, res) {
item.json = { item.json = {
id: 1, id: 1,
text: 'text' text: "text"
}; };
return item; return item;
}) })
}) });
} };

18
scss/components/_card.scss
View File

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

4
scss/components/_cards.scss
View File

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

3
scss/components/_list.scss
View File

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