refactor: 重构 Mock 简化目录

src/layout/default-layout.vue → src/layout/index.vue

@@ -14,10 +14,18 @@
     >
       <Menu />
     </a-layout-sider>
+
     <a-layout class="layout-content" :style="paddingStyle">
       <TabBar v-if="appStore.tabBar" />
       <a-layout-content>
-        <PageLayout />
+        <router-view v-slot="{ Component, route }">
+          <transition name="fade" mode="out-in" appear>
+            <component :is="Component" v-if="route.meta.ignoreCache" :key="route.fullPath" />
+            <keep-alive v-else :include="cacheList">
+              <component :is="Component" :key="route.fullPath" />
+            </keep-alive>
+          </transition>
+        </router-view>
       </a-layout-content>
       <Footer v-if="footer" />
     </a-layout>
@@ -27,10 +35,9 @@
 <script lang="ts" setup>
 import { ref, computed, watch, provide, onMounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useAppStore, useUserStore } from '@/store';
+import { useAppStore, useUserStore, useTabBarStore } from '@/store';
 import usePermission from '@/hooks/usePermission';
 import useResponsive from '@/hooks/useResponsive';
-import PageLayout from './page-layout.vue';
 
 const isInit = ref(false);
 const appStore = useAppStore();
@@ -39,6 +46,8 @@ const router = useRouter();
 const route = useRoute();
 const permission = usePermission();
 useResponsive(true);
+const tabBarStore = useTabBarStore();
+const cacheList = computed(() => tabBarStore.getCacheList);
 const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
 const hideMenu = computed(() => appStore.hideMenu);
 const footer = computed(() => appStore.footer);

src/views/dashboard/workplace/mock.ts → src/mock/dashboard.ts

@@ -2,7 +2,7 @@ import Mock from 'mockjs';
 import qs from 'query-string';
 import dayjs from 'dayjs';
 import type { GetParams } from '@/types/global';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+import setupMock, { successResponseWrap } from './setup-mock';
 
 const textList = [
   {
@@ -127,3 +127,23 @@ setupMock({
     });
   }
 });
+
+setupMock({
+  setup() {
+    Mock.mock(new RegExp('/api/chat/list'), () => {
+      // return failResponseWrap(null, '重新登陆', 50008);
+      const data = Mock.mock({
+        'data|4-6': [
+          {
+            'id|+1': 1,
+            'username': '用户7352772',
+            'content': '马上就开始了，好激动！',
+            'time': '13:09:12',
+            'isCollect|2': true
+          }
+        ]
+      });
+      return successResponseWrap(data.data);
+    });
+  }
+});

src/views/form/step/mock.ts → src/mock/form.ts

@@ -1,9 +1,8 @@
 import Mock from 'mockjs';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+import setupMock, { successResponseWrap } from './setup-mock';
 
 setupMock({
   setup() {
-    // submit
     Mock.mock(new RegExp('/api/channel-form/submit'), () => {
       return successResponseWrap('ok');
     });

src/mock/index.ts

@@ -3,20 +3,10 @@ import Mock from 'mockjs';
 import './user';
 import './message-box';
 import './login';
-
-import '@/views/dashboard/workplace/mock';
-
-import '@/views/dashboard/monitor/mock';
-
-import '@/views/list/card/mock';
-import '@/views/list/search-table/mock';
-
-import '@/views/form/step/mock';
-
-import '@/views/profile/basic/mock';
-
-import '@/views/user/info/mock';
-import '@/views/user/setting/mock';
+import './dashboard';
+import './list';
+import './form';
+import './profile';
 
 Mock.setup({
   timeout: '200-900'

src/views/list/card/mock.ts → src/mock/list.ts

@@ -1,6 +1,8 @@
 import Mock from 'mockjs';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+import qs from 'query-string';
+import setupMock, { successResponseWrap } from './setup-mock';
 import type { ServiceRecord } from '@/api/list';
+import type { GetParams } from '@/types/global';
 
 const qualityInspectionList: ServiceRecord[] = [
   {
@@ -179,3 +181,34 @@ setupMock({
     });
   }
 });
+
+const { Random } = Mock;
+
+const data = Mock.mock({
+  'list|55': [
+    {
+      'id|8': /[A-Z][a-z][-][0-9]/,
+      'number|2-3': /[0-9]/,
+      'name|4-8': /[A-Z]/,
+      'contentType|1': ['img', 'horizontalVideo', 'verticalVideo'],
+      'count|2-3': /[0-9]/,
+      'status|1': ['online', 'offline'],
+      'filterType|1': ['artificial', 'rules'],
+      'createdTime': Random.datetime()
+    }
+  ]
+});
+
+setupMock({
+  setup() {
+    Mock.mock(new RegExp('/api/list/policy'), (params: GetParams) => {
+      const { current = 1, pageSize = 10 } = qs.parseUrl(params.url).query;
+      const p = current as number;
+      const ps = pageSize as number;
+      return successResponseWrap({
+        list: data.list.slice((p - 1) * ps, p * ps),
+        total: 55
+      });
+    });
+  }
+});

src/mock/login.ts

@@ -1,5 +1,5 @@
 import Mock from 'mockjs';
-import setupMock, { successResponseWrap, failResponseWrap } from '@/utils/setup-mock';
+import setupMock, { successResponseWrap, failResponseWrap } from './setup-mock';
 import type { MockParams } from '@/types/mock';
 
 setupMock({

src/mock/message-box.ts

@@ -1,5 +1,5 @@
 import Mock from 'mockjs';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+import setupMock, { successResponseWrap } from './setup-mock';
 
 const haveReadIds: number[] = [];
 const getMessageList = () => {

src/views/profile/basic/mock.ts → src/mock/profile.ts

@@ -1,5 +1,5 @@
 import Mock from 'mockjs';
-import setupMock, { successResponseWrap } from '@/utils/setup-mock';
+import setupMock, { successResponseWrap } from './setup-mock';
 
 setupMock({
   setup() {