From 83de387e2a0124804a9c99080ac841a9d6676fca Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Mon, 25 Dec 2023 17:25:33 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E8=BF=98=E5=8E=9Fmock.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- README.zh-CN.md | 2 +- mock/department/index.mock.ts | 89 ++++++----- mock/menu/index.mock.ts | 36 ++--- mock/role/index.mock.ts | 84 +++++------ mock/table/index.mock.ts | 227 ++++++++++++----------------- package.json | 3 +- src/views/Components/Waterfall.vue | 20 +-- 8 files changed, 217 insertions(+), 246 deletions(-) diff --git a/README.md b/README.md index 383d508bb..3db6283fe 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ Online examples do not apply to menu filtering by default, but directly use Stat - [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax - [Vue-Router-Next](https://next.router.vuejs.org/) - Familiar with the basic use of vue-router - [Element-Plus](https://element-plus.org/) - Familiar with the basic use of element-plus -- [Faker.js](https://github.com/faker-js/faker#readme) - Generate massive amounts of fake contextual data +- [Mock.js](https://github.com/nuysoft/Mock) - mockjs basic syntax ## Install and use diff --git a/README.zh-CN.md b/README.zh-CN.md index e03a23269..1caf7b663 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -50,7 +50,7 @@ vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模 - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 - [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用 - [Element-Plus](https://element-plus.org/) - element-plus 基本使用 -- [Faker.js](https://github.com/faker-js/faker#readme) - 生成大量伪造的上下文数据 +- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法 ## 安装和使用 diff --git a/mock/department/index.mock.ts b/mock/department/index.mock.ts index 891300a1e..443907ec0 100644 --- a/mock/department/index.mock.ts +++ b/mock/department/index.mock.ts @@ -1,5 +1,5 @@ import { toAnyString } from '@/utils' -import { faker } from '@faker-js/faker' +import Mock from 'mockjs' import { SUCCESS_CODE } from '@/constants' const departmentList: any = [] @@ -11,64 +11,71 @@ for (let i = 0; i < 5; i++) { // 部门名称 departmentName: citys[i], id: toAnyString(), - createTime: faker.date.anytime(), - status: faker.number.int({ min: 0, max: 1 }), + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), // 备注 - remark: faker.lorem.sentence(), + remark: '@cword(10, 15)', children: [ { // 部门名称 departmentName: '研发部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' }, { // 部门名称 departmentName: '产品部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' }, { // 部门名称 departmentName: '运营部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' }, { // 部门名称 departmentName: '市场部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' }, { // 部门名称 departmentName: '销售部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' }, { // 部门名称 departmentName: '客服部', - createTime: faker.date.anytime(), - // 状态 - status: faker.number.int({ min: 0, max: 1 }), id: toAnyString(), - remark: faker.lorem.sentence() + createTime: '@datetime', + // 状态 + status: Mock.Random.integer(0, 1), + // 备注 + remark: '@cword(10, 15)' } ] }) @@ -110,18 +117,20 @@ export default [ // 根据pageSize来创建数据 const mockList: any = [] for (let i = 0; i < pageSize; i++) { - mockList.push({ - // 用户名 - username: faker.person.firstName(), - // 账号 - account: faker.person.lastName(), - // 邮箱 - email: faker.internet.email(), - // 创建时间 - createTime: faker.date.anytime(), - // 用户id - id: toAnyString() - }) + mockList.push( + Mock.mock({ + // 用户名 + username: '@cname', + // 账号 + account: '@first', + // 邮箱 + email: '@EMAIL', + // 创建时间 + createTime: '@datetime', + // 用户id + id: toAnyString() + }) + ) } return { code: SUCCESS_CODE, diff --git a/mock/menu/index.mock.ts b/mock/menu/index.mock.ts index 5eca3a06d..fd3f732f9 100644 --- a/mock/menu/index.mock.ts +++ b/mock/menu/index.mock.ts @@ -1,4 +1,4 @@ -import { faker } from '@faker-js/faker' +import Mock from 'mockjs' import { SUCCESS_CODE } from '@/constants' const timeout = 1000 @@ -19,7 +19,7 @@ export default [ component: '#', redirect: '/dashboard/analysis', name: 'Dashboard', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 1, type: 0, parentId: undefined, @@ -34,7 +34,7 @@ export default [ path: 'analysis', component: 'views/Dashboard/Analysis', name: 'Analysis', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 2, type: 1, parentId: 1, @@ -59,7 +59,7 @@ export default [ path: 'workplace', component: 'views/Dashboard/Workplace', name: 'Workplace', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 3, type: 1, parentId: 1, @@ -93,7 +93,7 @@ export default [ icon: 'clarity:document-solid' }, name: 'ExternalLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 4, type: 0, parentId: undefined, @@ -102,7 +102,7 @@ export default [ { path: 'https://element-plus-admin-doc.cn/', name: 'DocumentLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 5, type: 1, parentId: 4, @@ -118,7 +118,7 @@ export default [ component: '#', redirect: '/level/menu1/menu1-1/menu1-1-1', name: 'Level', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 6, type: 0, parentId: undefined, @@ -132,7 +132,7 @@ export default [ path: 'menu1', name: 'Menu1', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 7, type: 0, parentId: 6, @@ -146,7 +146,7 @@ export default [ path: 'menu1-1', name: 'Menu11', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 8, type: 0, parentId: 7, @@ -161,7 +161,7 @@ export default [ path: 'menu1-1-1', name: 'Menu111', component: 'views/Level/Menu111', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 9, type: 1, parentId: 8, @@ -176,7 +176,7 @@ export default [ path: 'menu1-2', name: 'Menu12', component: 'views/Level/Menu12', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 10, type: 1, parentId: 7, @@ -191,7 +191,7 @@ export default [ path: 'menu2', name: 'Menu2Demo', component: 'views/Level/Menu2', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 11, type: 1, parentId: 6, @@ -207,7 +207,7 @@ export default [ component: '#', redirect: '/example/example-dialog', name: 'Example', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 12, type: 0, parentId: undefined, @@ -222,7 +222,7 @@ export default [ path: 'example-dialog', component: 'views/Example/Dialog/ExampleDialog', name: 'ExampleDialog', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 13, type: 1, parentId: 12, @@ -253,7 +253,7 @@ export default [ path: 'example-page', component: 'views/Example/Page/ExamplePage', name: 'ExamplePage', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 14, type: 1, parentId: 12, @@ -284,7 +284,7 @@ export default [ path: 'example-add', component: 'views/Example/Page/ExampleAdd', name: 'ExampleAdd', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 15, type: 1, parentId: 12, @@ -302,7 +302,7 @@ export default [ path: 'example-edit', component: 'views/Example/Page/ExampleEdit', name: 'ExampleEdit', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 16, type: 1, parentId: 12, @@ -320,7 +320,7 @@ export default [ path: 'example-detail', component: 'views/Example/Page/ExampleDetail', name: 'ExampleDetail', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 17, type: 1, parentId: 12, diff --git a/mock/role/index.mock.ts b/mock/role/index.mock.ts index 5449d793a..0a14b60aa 100644 --- a/mock/role/index.mock.ts +++ b/mock/role/index.mock.ts @@ -1,4 +1,4 @@ -import { faker } from '@faker-js/faker' +import Mock from 'mockjs' import { SUCCESS_CODE } from '@/constants' import { toAnyString } from '@/utils' @@ -731,7 +731,7 @@ const menus = [ component: '#', redirect: '/dashboard/analysis', name: 'Dashboard', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 1, meta: { title: '首页', @@ -743,7 +743,7 @@ const menus = [ path: 'analysis', component: 'views/Dashboard/Analysis', name: 'Analysis', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 2, meta: { title: '分析页', @@ -754,7 +754,7 @@ const menus = [ path: 'workplace', component: 'views/Dashboard/Workplace', name: 'Workplace', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 3, meta: { title: '工作台', @@ -771,13 +771,13 @@ const menus = [ icon: 'clarity:document-solid' }, name: 'ExternalLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 4, children: [ { path: 'https://element-plus-admin-doc.cn/', name: 'DocumentLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 5, meta: { title: '文档' @@ -790,7 +790,7 @@ const menus = [ component: '#', redirect: '/level/menu1/menu1-1/menu1-1-1', name: 'Level', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 6, meta: { title: '菜单', @@ -801,7 +801,7 @@ const menus = [ path: 'menu1', name: 'Menu1', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 7, redirect: '/level/menu1/menu1-1/menu1-1-1', meta: { @@ -812,7 +812,7 @@ const menus = [ path: 'menu1-1', name: 'Menu11', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 8, redirect: '/level/menu1/menu1-1/menu1-1-1', meta: { @@ -824,7 +824,7 @@ const menus = [ path: 'menu1-1-1', name: 'Menu111', component: 'views/Level/Menu111', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 9, permission: ['edit', 'add', 'delete'], meta: { @@ -838,7 +838,7 @@ const menus = [ path: 'menu1-2', name: 'Menu12', component: 'views/Level/Menu12', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 10, permission: ['edit', 'add', 'delete'], meta: { @@ -852,7 +852,7 @@ const menus = [ path: 'menu2', name: 'Menu2Demo', component: 'views/Level/Menu2', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 11, permission: ['edit', 'add', 'delete'], meta: { @@ -867,7 +867,7 @@ const menus = [ component: '#', redirect: '/example/example-dialog', name: 'Example', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 12, meta: { title: '综合示例', @@ -879,7 +879,7 @@ const menus = [ path: 'example-dialog', component: 'views/Example/Dialog/ExampleDialog', name: 'ExampleDialog', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 13, permission: ['edit', 'add', 'delete'], meta: { @@ -891,7 +891,7 @@ const menus = [ path: 'example-page', component: 'views/Example/Page/ExamplePage', name: 'ExamplePage', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 14, permission: ['edit', 'add', 'delete'], meta: { @@ -903,7 +903,7 @@ const menus = [ path: 'example-add', component: 'views/Example/Page/ExampleAdd', name: 'ExampleAdd', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 15, permission: ['edit', 'add', 'delete'], meta: { @@ -920,7 +920,7 @@ const menus = [ path: 'example-edit', component: 'views/Example/Page/ExampleEdit', name: 'ExampleEdit', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 16, permission: ['edit', 'add', 'delete'], meta: { @@ -937,7 +937,7 @@ const menus = [ path: 'example-detail', component: 'views/Example/Page/ExampleDetail', name: 'ExampleDetail', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 17, permission: ['edit', 'add', 'delete'], meta: { @@ -959,7 +959,7 @@ const menus = [ component: '#', redirect: '/dashboard/analysis', name: 'Dashboard', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 1, meta: { title: '首页', @@ -971,7 +971,7 @@ const menus = [ path: 'analysis', component: 'views/Dashboard/Analysis', name: 'Analysis', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 2, meta: { title: '分析页', @@ -982,7 +982,7 @@ const menus = [ path: 'workplace', component: 'views/Dashboard/Workplace', name: 'Workplace', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 3, meta: { title: '工作台', @@ -1001,13 +1001,13 @@ const menus = [ icon: 'clarity:document-solid' }, name: 'ExternalLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 4, children: [ { path: 'https://element-plus-admin-doc.cn/', name: 'DocumentLink', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 5, meta: { title: '文档' @@ -1020,7 +1020,7 @@ const menus = [ component: '#', redirect: '/level/menu1/menu1-1/menu1-1-1', name: 'Level', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 6, meta: { title: '菜单', @@ -1031,7 +1031,7 @@ const menus = [ path: 'menu1', name: 'Menu1', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 7, redirect: '/level/menu1/menu1-1/menu1-1-1', meta: { @@ -1042,7 +1042,7 @@ const menus = [ path: 'menu1-1', name: 'Menu11', component: '##', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 8, redirect: '/level/menu1/menu1-1/menu1-1-1', meta: { @@ -1054,7 +1054,7 @@ const menus = [ path: 'menu1-1-1', name: 'Menu111', component: 'views/Level/Menu111', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 9, permission: ['edit', 'add', 'delete'], meta: { @@ -1068,7 +1068,7 @@ const menus = [ path: 'menu1-2', name: 'Menu12', component: 'views/Level/Menu12', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 10, permission: ['edit', 'add', 'delete'], meta: { @@ -1082,7 +1082,7 @@ const menus = [ path: 'menu2', name: 'Menu2Demo', component: 'views/Level/Menu2', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 11, permission: ['edit', 'add', 'delete'], meta: { @@ -1099,7 +1099,7 @@ const menus = [ component: '#', redirect: '/example/example-dialog', name: 'Example', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 12, meta: { title: '综合示例', @@ -1111,7 +1111,7 @@ const menus = [ path: 'example-detail', component: 'views/Example/Page/ExampleDetail', name: 'ExampleDetail', - status: faker.number.int({ min: 0, max: 1 }), + status: Mock.Random.integer(0, 1), id: 17, permission: ['edit', 'add', 'delete'], meta: { @@ -1130,16 +1130,18 @@ const menus = [ ] for (let i = 0; i < 4; i++) { - List.push({ - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - roleName: roleNames[i], - role: faker.lorem.sentence(1), - status: faker.number.int({ min: 0, max: 1 }), - createTime: faker.date.anytime(), - remark: faker.lorem.sentence(), - menu: menus[i] - }) + List.push( + Mock.mock({ + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + roleName: roleNames[i], + role: '@first', + status: Mock.Random.integer(0, 1), + createTime: '@datetime', + remark: '@cword(10, 15)', + menu: menus[i] + }) + ) } export default [ diff --git a/mock/table/index.mock.ts b/mock/table/index.mock.ts index 13d77787b..80520b800 100644 --- a/mock/table/index.mock.ts +++ b/mock/table/index.mock.ts @@ -1,4 +1,4 @@ -import { faker } from '@faker-js/faker' +import Mock from 'mockjs' import { SUCCESS_CODE } from '@/constants' import { toAnyString } from '@/utils' @@ -36,144 +36,103 @@ interface TreeListProps { let List: ListProps[] = [] for (let i = 0; i < count; i++) { - List.push({ - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - }) + List.push( + Mock.mock({ + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(100, 500)', + image_uri: Mock.Random.image('@integer(100, 500)x@integer(100, 500)'), + video_uri: + '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' + }) + ) } const treeList: TreeListProps[] = [] for (let i = 0; i < count; i++) { - treeList.push({ - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4', - children: [ - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4', - children: [ - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - }, - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - } - ] - }, - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - }, - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - }, - { - id: toAnyString(), - // timestamp: +Mock.Random.date('T'), - author: faker.person.firstName(), - title: faker.lorem.sentence(), - content: baseContent, - importance: faker.number.int({ min: 1, max: 3 }), - display_time: faker.date.anytime(), - pageviews: faker.number.int({ min: 300, max: 5000 }), - image_uri: faker.image.url({ - width: faker.number.int({ min: 200, max: 400 }), - height: faker.number.int({ min: 200, max: 400 }) - }), - video_uri: - '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' - } - ] - // image_uri - }) + treeList.push( + Mock.mock({ + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)', + children: [ + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)', + children: [ + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + }, + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + } + ] + }, + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + }, + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + }, + { + id: toAnyString(), + // timestamp: +Mock.Random.date('T'), + author: '@first', + title: '@title(5, 10)', + content: baseContent, + importance: '@integer(1, 3)', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + } + ] + // image_uri + }) + ) } const cardList = [ diff --git a/package.json b/package.json index 0f2b4d7cb..945013fe2 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "icon": "esno ./scripts/icon.ts" }, "dependencies": { - "@faker-js/faker": "^8.3.1", "@iconify/iconify": "^3.1.1", "@iconify/vue": "^4.1.1", "@vueuse/core": "^10.7.0", @@ -66,6 +65,7 @@ "@types/fs-extra": "^11.0.4", "@types/inquirer": "^9.0.7", "@types/lodash-es": "^4.17.12", + "@types/mockjs": "^1.0.10", "@types/node": "^20.10.5", "@types/nprogress": "^0.2.3", "@types/qrcode": "^1.5.5", @@ -91,6 +91,7 @@ "inquirer": "^9.2.12", "less": "^4.2.0", "lint-staged": "^15.2.0", + "mockjs": "^1.1.0", "plop": "^4.0.0", "postcss": "^8.4.32", "postcss-html": "^1.5.0", diff --git a/src/views/Components/Waterfall.vue b/src/views/Components/Waterfall.vue index d55687044..c56f8f85b 100644 --- a/src/views/Components/Waterfall.vue +++ b/src/views/Components/Waterfall.vue @@ -2,7 +2,7 @@ import { Waterfall } from '@/components/Waterfall' import { ContentWrap } from '@/components/ContentWrap' import { useI18n } from '@/hooks/web/useI18n' -import { faker } from '@faker-js/faker' +import Mock from 'mockjs' import { ref, unref } from 'vue' import { toAnyString } from '@/utils' @@ -12,17 +12,17 @@ const getList = () => { const list: any = [] for (let i = 0; i < 20; i++) { // 随机 100, 500 之间的整数 - const height = faker.number.int({ min: 100, max: 500 }) - const width = faker.number.int({ min: 100, max: 500 }) - list.push({ - width, - height, - id: toAnyString(), - image_uri: faker.image.url({ + const height = Mock.Random.integer(100, 500) + const width = Mock.Random.integer(100, 500) + list.push( + Mock.mock({ width, - height + height, + id: toAnyString(), + // http更换为https + image_uri: Mock.Random.image(`${width}x${height}`).replace('http://', 'https://') }) - }) + ) } data.value = [...unref(data), ...list] if (unref(data).length >= 60) {