Skip to content

Commit 102da26

Browse files
author
chenbin92
committed
feat: adjust preview page
1 parent 8ed39ab commit 102da26

File tree

11 files changed

+236
-42
lines changed

11 files changed

+236
-42
lines changed

‎tools/ice-devtools/lib/server/controllers/block.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ const path = require('path');
22
const { existsSync } = require('fs');
33
const MultiEntryPlugin = require('webpack/lib/MultiEntryPlugin');
44
const { getMaterials } = require('../utils');
5+
const getMaterialLists = require('../getMaterialLists');
6+
const { getMaterialList } = require('../utils')
57
const cwd = process.cwd();
68
const webpackHotClient = require.resolve('webpack-hot-client/client');
79
const cachedChunks = {};
@@ -74,12 +76,16 @@ module.exports = async (ctx) => {
7476
ctx.compiler.running = true;
7577
}
7678

79+
const materialList = getMaterialList(material);
80+
7781
const state = {
7882
layoutJS: '/DEMOLAYOUT.js',
7983
blockJS: `/${chunkName}.js`,
8084
blockName: `${chunkName}`,
8185
isReact: type === 'react',
8286
isVue: type === 'vue',
87+
blocks: materialList.blocks,
88+
layouts: materialList.layouts
8389
};
8490
return ctx.render('block.hbs', state);
8591
};

‎tools/ice-devtools/lib/server/controllers/home.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const getMaterialLists = require('../getMaterialLists');
2+
3+
module.exports = async (ctx) => {
4+
const currentMaterial = ctx.params.material;
5+
6+
const materialsAll = await getMaterialLists(process.cwd());
7+
const materials = materialsAll[currentMaterial];
8+
9+
return ctx.render('home.hbs', {
10+
currentMaterial,
11+
materials,
12+
});
13+
};

‎tools/ice-devtools/lib/server/controllers/materialList.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
const getMaterialLists = require('../getMaterialLists');
1+
const { getMaterialList } = require('../utils')
22

33
module.exports = async (ctx) => {
44
const currentMaterial = ctx.params.material;
55

6-
const materialsAll = await getMaterialLists(process.cwd());
7-
const materials = materialsAll[currentMaterial];
6+
const result = getMaterialList(currentMaterial);
87

98
return ctx.render('blocks.hbs', {
109
currentMaterial,
11-
materials,
10+
blocks: result.blocks,
11+
layouts: result.layouts
1212
});
1313
};

‎tools/ice-devtools/lib/server/getMaterialLists.js‎

Lines changed: 28 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,47 @@
11
const path = require('path');
22
const fs = require('fs');
3+
const upperCamelCase = require('uppercamelcase');
34

45
function getBlockEntries(dir, material) {
5-
const result = {};
6+
let result = {};
67
const blockDirs = fs.readdirSync(path.join(dir, material, 'blocks'));
78
const layoutDirs = fs.readdirSync(path.join(dir, material, 'layouts'));
89

910
blockDirs.forEach((dirName) => {
1011
const fullPath = path.join(dir, material, 'blocks', dirName);
1112
if (fs.existsSync(fullPath) && isDirectory(fullPath)) {
12-
result[`${material}/blocks/${dirName}`] = path.join(
13-
fullPath,
14-
'src/index.js'
15-
);
13+
const pkgData = require(path.join(fullPath, 'package.json'));
14+
result[pkgData.blockConfig.name] = {
15+
type: 'block',
16+
material: material,
17+
className: upperCamelCase(pkgData.blockConfig.name),
18+
name: pkgData.blockConfig.name,
19+
title: pkgData.blockConfig.title,
20+
categories: pkgData.blockConfig.categories,
21+
snapshot: pkgData.blockConfig.snapshot,
22+
description: pkgData.description,
23+
author: pkgData.author,
24+
[`${material}/blocks/${dirName}`]: path.join(fullPath, 'src/index.js'),
25+
};
1626
}
1727
});
1828

1929
layoutDirs.forEach((dirName) => {
2030
const fullPath = path.join(dir, material, 'layouts', dirName);
2131
if (fs.existsSync(fullPath) && isDirectory(fullPath)) {
22-
result[`${material}/layouts/${dirName}`] = path.join(
23-
fullPath,
24-
'src/index.js'
25-
);
32+
const pkgData = require(path.join(fullPath, 'package.json'));
33+
result[pkgData.layoutConfig.name] = {
34+
type: 'layout',
35+
material: material,
36+
className: upperCamelCase(pkgData.layoutConfig.name),
37+
name: pkgData.layoutConfig.name,
38+
title: pkgData.layoutConfig.title,
39+
categories: pkgData.layoutConfig.categories,
40+
snapshot: pkgData.layoutConfig.snapshot,
41+
description: pkgData.description,
42+
author: pkgData.author,
43+
[`${material}/layouts/${dirName}`]: path.join(fullPath, 'src/index.js'),
44+
};
2645
}
2746
});
2847
return result;

‎tools/ice-devtools/lib/server/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ module.exports = function startServer(opts) {
6565
partials: {
6666
initReact: './init-react',
6767
initVue: './init-vue',
68+
sideBar: './sidebar'
6869
},
6970
},
7071
})

‎tools/ice-devtools/lib/server/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ const Router = require('koa-router');
22
const materialsListCtrl = require('./controllers/materialList');
33
const blockCtrl = require('./controllers/block');
44
const layoutCtrl = require('./controllers/layout');
5+
const homeCtrl = require('./controllers/home');
56

67
const router = new Router();
78

9+
router.get('/', homeCtrl);
810
router.get('/:material', materialsListCtrl);
911
router.get('/:material/block/:blockName', blockCtrl);
1012
router.get('/:material/layout/:layoutName', layoutCtrl);

‎tools/ice-devtools/lib/server/utils.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const { resolve } = require('path');
22
const { readdirSync, readFileSync } = require('fs');
33
const glob = require('glob-promise');
4+
const getMaterialLists = require('./getMaterialLists');
45

56
exports.getBlockList = function getBlockList(space) {
67
return glob('blocks/*', { cwd: space }).then((files) => {
@@ -16,3 +17,26 @@ exports.getMaterials = function getMaterials(space) {
1617
throw new Error('material 字段不存在 package.json 中');
1718
}
1819
};
20+
21+
exports.getMaterialList = function getMaterialList(currentMaterial) {
22+
const materialsAll = getMaterialLists(process.cwd());
23+
const materials = materialsAll[currentMaterial];
24+
25+
let blocks = [];
26+
let layouts = [];
27+
28+
if (materials) {
29+
Object.keys(materials).forEach((key) => {
30+
if (materials[key]['type'] === 'block') {
31+
blocks.push(materials[key]);
32+
} else if (materials[key]['type'] === 'layout') {
33+
layouts.push(materials[key]);
34+
}
35+
});
36+
}
37+
38+
return {
39+
blocks,
40+
layouts
41+
}
42+
}

‎tools/ice-devtools/lib/template/block.hbs‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en-US">
33

44
<head>
5+
<title>区块</title>
56
<meta charset="UTF-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@@ -10,7 +11,11 @@
1011
</head>
1112

1213
<body>
13-
<div id="mountNode"></div>
14+
<div class="preview-container">
15+
<div class="preview-content">
16+
<div id="mountNode"></div>
17+
</div>
18+
</div>
1419
{{#if isReact}}
1520
<script src="https://g.alicdn.com/code/npm/??react/16.2.0/umd/react.development.js,react-dom/16.2.0/umd/react-dom.development.js"></script>
1621
{{/if}}

‎tools/ice-devtools/lib/template/blocks.hbs‎

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,20 @@
22
<html lang="en-US">
33

44
<head>
5+
<title>区块列表</title>
56
<meta charset="UTF-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<meta http-equiv="X-UA-Compatible" content="ie=edge">
89
</head>
910

1011
<body>
11-
<div id="mountNode"></div>
12-
<script src="https://g.alicdn.com/code/npm/??react/16.2.0/umd/react.development.js,react-dom/16.2.0/umd/react-dom.development.js"></script>
12+
<div class="container">
13+
{{> sideBar }}
1314

14-
<pre>{{toJSON materials}}</pre>
15-
<h2>区块列表</h2>
16-
<ul>
17-
{{#each blocks as |blockName|}}
18-
<ol>
19-
<a href="./block/{{ blockName }}">{{ blockName }}</a>
20-
</ol>
21-
{{/each}}
22-
</ul>
15+
<div class="preview-content">
16+
<p class="tips">点击左侧的区块或者布局进行预览，支持实时刷新预览效果图</p>
17+
</div>
2318

24-
<h2>布局列表</h2>
25-
<ul>
26-
{{#each layouts as |layoutName|}}
27-
<ol>
28-
<a href="./layout/{{ layoutName }}">{{ layoutName }}</a>
29-
</ol>
30-
{{/each}}
31-
</ul>
19+
</div>
3220
</body>
33-
<script>
34-
// init block
35-
var mountNode = document.querySelector('#mountNode');
36-
ReactDOM.render(
37-
null,
38-
mountNode
39-
);
40-
</script>
41-
4221
</html>

‎tools/ice-devtools/lib/template/home.hbs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>首页</title>
9+
<style>
10+
.home {
11+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
text-align: center;
15+
color: #2c3e50;
16+
margin-top: 60px;
17+
}
18+
19+
h1,
20+
h2 {
21+
font-weight: normal;
22+
}
23+
24+
ul {
25+
list-style-type: none;
26+
padding: 0;
27+
}
28+
29+
p {
30+
line-height: 28px;
31+
font-size: 14px;
32+
}
33+
34+
li {
35+
display: inline-block;
36+
margin: 0 10px;
37+
}
38+
39+
a {
40+
color: #42b983;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<div class="home">
47+
<img src="https://img.alicdn.com/tfs/TB1MtD3lAOWBuNjSsppXXXPgpXa-242-134.png" width="100">
48+
<div class="hello">
49+
<h1>欢迎使用飞冰</h1>
50+
<p>
51+
赋能中后台建设
52+
<br>海量可复用物料，通过 GUI 工具极速构建中后台应用
53+
</p>
54+
<h3>文档 & 工具</h3>
55+
<ul>
56+
<li>
57+
<a href="https://alibaba.github.io/ice/#/" target="_blank">关于飞冰</a>.
58+
</li>
59+
<li>
60+
<a href="https://alibaba.github.io/ice/#/iceworks" target="_blank">下载 Iceworks</a>
61+
</li>
62+
</ul>
63+
<h3>物料类型</h3>
64+
<ul>
65+
<li>
66+
<a href="/vue-materials">vue-materials</a>
67+
</li>
68+
<li>
69+
<a href="/react-materials">react-materials</a>
70+
</li>
71+
</ul>
72+
</div>
73+
</div>
74+
</body>
75+
76+
</html>

0 commit comments

Comments
 (0)