Skip to content

Commit 4fc2524

Browse files
authored
refactor example demo (PanJiaChen#713)
* refactor: Adjust the example directory structure * perf form demo * refine editor-slide-upload css * refine demo
1 parent 6327869 commit 4fc2524

32 files changed

+376
-209
lines changed

src/api/article.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ export function fetchList(query) {
88
})
99
}
1010

11-
export function fetchArticle() {
11+
export function fetchArticle(id) {
1212
return request({
1313
url: '/article/detail',
14-
method: 'get'
14+
method: 'get',
15+
params: { id }
1516
})
1617
}
1718

src/components/Tinymce/components/editorImage.vue

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,10 @@ export default {
8787
</script>
8888

8989
<style rel="stylesheet/scss" lang="scss" scoped>
90-
.upload-container {
91-
.editor-slide-upload {
92-
margin-bottom: 20px;
90+
.editor-slide-upload {
91+
margin-bottom: 20px;
92+
/deep/ .el-upload--picture-card {
93+
width: 100%;
9394
}
9495
}
9596
</style>

src/icons/svg/edit.svg

Lines changed: 1 addition & 0 deletions
Loading

src/icons/svg/list.svg

Lines changed: 1 addition & 0 deletions
Loading

src/lang/en.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ export default {
3737
customTreeTable: 'Custom TreeTable',
3838
tab: 'Tab',
3939
form: 'Form',
40-
createForm: 'Create Form',
41-
editForm: 'Edit Form',
40+
createArticle: 'Create Article',
41+
editArticle: 'Edit Article',
42+
articleList: 'Article List',
4243
errorPages: 'Error Pages',
4344
page401: '401',
4445
page404: '404',

src/lang/zh.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ export default {
3737
customTreeTable: '自定义树表',
3838
tab: 'Tab',
3939
form: '表单',
40-
createForm: '创建表单',
41-
editForm: '编辑表单',
40+
createArticle: '创建文章',
41+
editArticle: '编辑文章',
42+
articleList: '文章列表',
4243
errorPages: '错误页面',
4344
page401: '401',
4445
page404: '404',

src/mock/article.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,27 @@ import { param2Obj } from '@/utils'
44
const List = []
55
const count = 100
66

7+
const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
8+
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
9+
710
for (let i = 0; i < count; i++) {
811
List.push(Mock.mock({
912
id: '@increment',
1013
timestamp: +Mock.Random.date('T'),
1114
author: '@first',
1215
reviewer: '@first',
1316
title: '@title(5, 10)',
17+
content_short: '我是测试数据',
18+
content: baseContent,
1419
forecast: '@float(0, 100, 2, 2)',
1520
importance: '@integer(1, 3)',
1621
'type|1': ['CN', 'US', 'JP', 'EU'],
1722
'status|1': ['published', 'draft', 'deleted'],
1823
display_time: '@datetime',
19-
pageviews: '@integer(300, 5000)'
24+
comment_disabled: true,
25+
pageviews: '@integer(300, 5000)',
26+
image_uri,
27+
platforms: ['a-platform']
2028
}))
2129
}
2230

@@ -45,22 +53,14 @@ export default {
4553
getPv: () => ({
4654
pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }]
4755
}),
48-
getArticle: () => ({
49-
id: 120000000001,
50-
author: { key: 'mockPan' },
51-
source_name: '原创作者',
52-
category_item: [{ key: 'global', name: '全球' }],
53-
comment_disabled: true,
54-
content: '<p>我是测试数据我是测试数据</p><p><img class="wscnph" src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943" data-wscntype="image" data-wscnh="300" data-wscnw="400" data-mce-src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>"',
55-
content_short: '我是测试数据',
56-
display_time: +new Date(),
57-
image_uri: 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3',
58-
platforms: ['a-platform'],
59-
source_uri: 'https://github.com/PanJiaChen/vue-element-admin',
60-
status: 'published',
61-
tags: [],
62-
title: 'vue-element-admin'
63-
}),
56+
getArticle: (config) => {
57+
const { id } = param2Obj(config.url)
58+
for (const article of List) {
59+
if (article.id === +id) {
60+
return article
61+
}
62+
}
63+
},
6464
createArticle: () => ({
6565
data: 'success'
6666
}),

src/router/index.js

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,6 @@ export const asyncRouterMap = [
127127
{ path: 'tinymce', component: _import('components-demo/tinymce'), name: 'tinymce-demo', meta: { title: 'tinymce' }},
128128
{ path: 'markdown', component: _import('components-demo/markdown'), name: 'markdown-demo', meta: { title: 'markdown' }},
129129
{ path: 'json-editor', component: _import('components-demo/jsonEditor'), name: 'jsonEditor-demo', meta: { title: 'jsonEditor' }},
130-
{ path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
131130
{ path: 'splitpane', component: _import('components-demo/splitpane'), name: 'splitpane-demo', meta: { title: 'splitPane' }},
132131
{ path: 'avatar-upload', component: _import('components-demo/avatarUpload'), name: 'avatarUpload-demo', meta: { title: 'avatarUpload' }},
133132
{ path: 'dropzone', component: _import('components-demo/dropzone'), name: 'dropzone-demo', meta: { title: 'dropzone' }},
@@ -136,6 +135,7 @@ export const asyncRouterMap = [
136135
{ path: 'mixin', component: _import('components-demo/mixin'), name: 'componentMixin-demo', meta: { title: 'componentMixin' }},
137136
{ path: 'back-to-top', component: _import('components-demo/backToTop'), name: 'backToTop-demo', meta: { title: 'backToTop' }},
138137
{ path: 'drag-dialog', component: _import('components-demo/dragDialog'), name: 'dragDialog-demo', meta: { title: 'dragDialog' }},
138+
{ path: 'dnd-list', component: _import('components-demo/dndList'), name: 'dndList-demo', meta: { title: 'dndList' }},
139139
{ path: 'drag-kanban', component: _import('components-demo/dragKanban'), name: 'dragKanban-demo', meta: { title: 'dragKanban' }}
140140
]
141141
},
@@ -157,49 +157,48 @@ export const asyncRouterMap = [
157157
},
158158

159159
{
160-
path: '/example',
160+
path: '/tab',
161161
component: Layout,
162-
redirect: '/example/table/complex-table',
163-
name: 'example',
162+
children: [{
163+
path: 'index',
164+
component: _import('tab/index'),
165+
name: 'tab',
166+
meta: { title: 'tab', icon: 'tab' }
167+
}]
168+
},
169+
170+
{
171+
path: '/table',
172+
component: Layout,
173+
redirect: '/table/complex-table',
174+
name: 'table',
164175
meta: {
165-
title: 'example',
166-
icon: 'example'
176+
title: 'Table',
177+
icon: 'table'
167178
},
168179
children: [
169-
{
170-
path: '/example/table',
171-
component: _import('example/table/index'),
172-
redirect: '/example/table/complex-table',
173-
name: 'Table',
174-
meta: {
175-
title: 'Table',
176-
icon: 'table'
177-
},
178-
children: [
179-
{ path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
180-
{ path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
181-
{ path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
182-
{ path: 'tree-table', component: _import('example/table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
183-
{ path: 'custom-tree-table', component: _import('example/table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
184-
{ path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
185-
]
186-
},
187-
{ path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'tab' }}
180+
{ path: 'dynamic-table', component: _import('table/dynamicTable/index'), name: 'dynamicTable', meta: { title: 'dynamicTable' }},
181+
{ path: 'drag-table', component: _import('table/dragTable'), name: 'dragTable', meta: { title: 'dragTable' }},
182+
{ path: 'inline-edit-table', component: _import('table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'inlineEditTable' }},
183+
{ path: 'tree-table', component: _import('table/treeTable/treeTable'), name: 'treeTableDemo', meta: { title: 'treeTable' }},
184+
{ path: 'custom-tree-table', component: _import('table/treeTable/customTreeTable'), name: 'customTreeTableDemo', meta: { title: 'customTreeTable' }},
185+
{ path: 'complex-table', component: _import('table/complexTable'), name: 'complexTable', meta: { title: 'complexTable' }}
188186
]
189187
},
190188

191189
{
192-
path: '/form',
190+
path: '/example',
193191
component: Layout,
194-
redirect: 'noredirect',
195-
name: 'form',
192+
redirect: '/example/list',
193+
name: 'example',
196194
meta: {
197-
title: 'form',
198-
icon: 'form'
195+
title: 'example',
196+
icon: 'example'
199197
},
200198
children: [
201-
{ path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: 'createForm', icon: 'table' }},
202-
{ path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: 'editForm', icon: 'table' }}
199+
{ path: 'create', component: _import('example/create'), name: 'createArticle', meta: { title: 'createArticle', icon: 'edit' }},
200+
{ path: 'edit/:id(\\d+)', component: _import('example/edit'), name: 'editArticle', meta: { title: 'editArticle', noCache: true }, hidden: true },
201+
{ path: 'list', component: _import('example/list'), name: 'articleList', meta: { title: 'articleList', icon: 'list' }}
203202
]
204203
},
205204

src/utils/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,3 +261,7 @@ export function deepClone(source) {
261261
})
262262
return targetObj
263263
}
264+
265+
export function uniqueArr(arr) {
266+
return Array.from(new Set(arr))
267+
}

0 commit comments

Comments
 (0)