perf: 还原mock.js

2023-12-25 17:25:33 +08:00 · 2023-12-25 17:25:33 +08:00 · 83de387e2a
parent a18bc641e8
commit 83de387e2a
8 changed files with 217 additions and 246 deletions
--- 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

--- 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 基本语法

 ## 安装和使用

--- 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,
--- 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,
--- 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 [
--- 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 = [
--- 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",
--- 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) {