Feature/update home mock pinia

.eslintrc-auto-import.json

@@ -316,6 +316,23 @@
     "DropdownOption": true,
     "ConfigProviderProps": true,
     "MenuOption": true,
-    "DataTableRowKey": true
+    "DataTableRowKey": true,
+    "useCostAnalysisStore": true,
+    "useCostBudgetStore": true,
+    "useCostCollectionStore": true,
+    "useCostDistributeStore": true,
+    "useExampleComponentStore": true,
+    "useHomeFrontStore": true,
+    "useMaterialBackupStore": true,
+    "useMaterialPrepareStore": true,
+    "useMaterialReviewStore": true,
+    "useMemberAccessStore": true,
+    "useMemberTeamStore": true,
+    "useNestedLevelStore": true,
+    "useProjectStore": true,
+    "useResultStore": true,
+    "useUserAccountStore": true,
+    "useUserAccountStoreWithOut": true,
+    "StoreActions": true
   }
 }

src/modules/HomeFront/data/index.ts

@@ -6,3 +6,18 @@ export const testData = {
   isPublished: false,
   createTime: '2021.01.29'
 }
+
+/**
+ * 首页项目列表 模拟数据
+ */
+export const mockHomeProjectList = Array.from({ length: 50 }).map((item, index) => {
+  const id = index + 1
+  return {
+    id: '' + id,
+    project_code: 'ACBD' + id,
+    project_name: '项目' + id,
+    status: '进行中',
+    create_time: '2023-06-14 12:00',
+    create_by: '李华'
+  }
+})

src/modules/HomeFront/pages/index.vue

@@ -58,6 +58,10 @@ import { Search as IconSearch, Add as IconAdd } from '@vicons/carbon'
 import { PaperPlaneRegular as IconPaperPlaneRegular } from '@vicons/fa'
 import { NButton } from 'naive-ui'
 
+import type { ProjectItem } from '@/modules/HomeFront/types'
+
+
+const homeFrontStore = useHomeFrontStore()
 
 /**
  * 首页项目列表
@@ -68,14 +72,6 @@ defineOptions({
 
 const router = useRouter()
 
-type ProjectItem = {
-  id: string
-  project_code: string
-  project_name: string
-  status: string
-  create_time: string
-  create_by: string
-}
 
 const tableData = ref<Array<ProjectItem>>([])
 
@@ -152,55 +148,19 @@ const handlerPreviewDetail = (row: ProjectItem) => {
 
 
 const tableLoading = ref(true)
-setTimeout(() => {
-  // tableData.value = [
-  //   {
-  //     id: '1111',
-  //     project_code: 'ACBD',
-  //     project_name: '项目一',
-  //     status: '进行中',
-  //     create_time: '2023-06-14 12:00',
-  //     create_by: '李华'
-  //   },
-  //   {
-  //     id: '222',
-  //     project_code: 'EFGH',
-  //     project_name: '项目二',
-  //     status: '已完成',
-  //     create_time: '2023-06-14 12:00',
-  //     create_by: '李雷'
-  //   }
-  // ]
-
-  tableData.value = Array.from({ length: 50 }).map((item, index) => {
-
-    const id = index + 1
-
-    return {
-      id: '' + id,
-      project_code: 'ACBD' + id,
-      project_name: '项目' + id,
-      status: '进行中',
-      create_time: '2023-06-14 12:00',
-      create_by: '李华'
-    }
-  })
+
+const initHomeProjectList = async () => {
+  tableLoading.value = true
+  await homeFrontStore.fetchHomeProjectList()
   tableLoading.value = false
-}, 300)
+}
+initHomeProjectList()
+
 
 const searchValue = ref('')
 
-const filterTableData = ref<Array<ProjectItem>>([])
-const handleChangeTableData = _.debounce(
-  () => {
-    filterTableData.value = tableData.value.filter(({ project_name }) => {
-      return searchValue.value.includes(project_name) ||
-        project_name.includes(searchValue.value)
-    })
-  },
-  400
-)
-handleChangeTableData()
+const filterTableData = computed(() => homeFrontStore.homeProjectList)
+const handleChangeTableData = homeFrontStore.fetchSearchHomeProjectList
 
 
 </script>

src/modules/HomeFront/store/index.ts

@@ -2,11 +2,15 @@ import { defineStore } from 'pinia'
 
 import { sleep } from '@/utils/request'
 import * as HomeFrontAPI from '../api'
+import * as HomeFrontData from '../data'
+
+import type { ProjectItem } from '@/modules/HomeFront/types'
+
 
 export const useHomeFrontStore = defineStore('HomeFront', {
   state: () => {
     return {
-      demoList: {}
+      homeProjectList: []
     }
   },
   getters: {
@@ -16,6 +20,37 @@ export const useHomeFrontStore = defineStore('HomeFront', {
       await sleep(200)
       const res = await HomeFrontAPI.createProject(query)
       return this.filterResponse(res)
+    },
+    async fetchHomeProjectList() {
+      await sleep(320)
+
+      const res = {
+        msg: 'ok',
+        error: 0,
+        data: HomeFrontData.mockHomeProjectList
+      }
+
+      return this.filterResponse(res, ({ data }) => {
+        this.homeProjectList = data
+      })
+    },
+    fetchSearchHomeProjectList(searchValue = '') {
+      const res = {
+        msg: 'ok',
+        error: 0,
+        data: HomeFrontData.mockHomeProjectList
+      }
+
+      return this.filterResponse(res, ({ data }) => {
+        this.homeProjectList = data.filter(projectItem => {
+          const { project_name } = projectItem as ProjectItem
+          return searchValue.includes(project_name) ||
+            project_name.includes(searchValue)
+        })
+      })
     }
+  },
+  debounce: {
+    fetchSearchHomeProjectList: 400
   }
 })

src/modules/HomeFront/types/index.ts

@@ -0,0 +1,8 @@
+export type ProjectItem = {
+  id: string
+  project_code: string
+  project_name: string
+  status: string
+  create_time: string
+  create_by: string
+}

src/store/index.ts

@@ -1,11 +1,16 @@
 import { createPinia } from 'pinia'
-import { pluginPinia } from '@/store/plugins'
+import {
+  pluginExternalProperties,
+  pluginDebounceAction
+} from '@/store/plugins'
 
 const store = createPinia()
 
 export function setupStore(app: App<Element>) {
   app.use(store)
 }
 
-store.use(pluginPinia)
+store.use(pluginExternalProperties)
+store.use(pluginDebounceAction)
+
 export { store }

src/store/plugins/debounce.ts

@@ -0,0 +1,13 @@
+// 支持使用任意防抖库
+export const pluginDebounceAction = ({ options, store }) => {
+  if (options.debounce) {
+    // 使用新的 action 来覆盖这些 action
+    return Object.keys(options.debounce).reduce((debouncedActions, action) => {
+      debouncedActions[action] = _.debounce(
+        store[action],
+        options.debounce![action]
+      )
+      return debouncedActions
+    }, {})
+  }
+}

src/store/plugins/externalProperties.ts

@@ -0,0 +1,7 @@
+import { getFilterResponse } from '@/store/utils/mixin'
+import router from '@/router'
+
+export const pluginExternalProperties = ({ store }) => {
+  store.filterResponse = getFilterResponse
+  store.router = router
+}

src/store/plugins/index.ts

@@ -2,10 +2,5 @@
  * Plugins for Pinia
  */
 
-import { getFilterResponse } from '@/store/utils/mixin'
-import router from '@/router'
-
-export const pluginPinia = ({ store }) => {
-  store.filterResponse = getFilterResponse
-  store.router = router
-}
+export { pluginExternalProperties } from '@/store/plugins/externalProperties'
+export { pluginDebounceAction } from '@/store/plugins/debounce'

src/store/utils/mixin.ts

@@ -13,7 +13,7 @@ export function getFilterResponse(
     } else {
       errorCallback
         ? errorCallback(res)
-        : window.$message.error(res.msg!, {
+        : window.$ModalMessage.error(res.msg!, {
           closable: true
         })
     }

src/types/index.d.ts

@@ -51,6 +51,10 @@ declare module 'pinia' {
     filterResponse: typeof getFilterResponse
     router: typeof router
   }
+  export interface DefineStoreOptionsBase<S, Store> {
+    // 任意 action 都允许定义一个防抖的毫秒数
+    debounce?: Partial<Record<keyof StoreActions<Store>, number>>
+  }
 }
 
 declare module 'vue-router' {

vite.config.ts

@@ -108,14 +108,22 @@ export default defineConfig(({ mode }) => {
               'FormInst'
             ],
             type: true
+          },
+          {
+            from: 'pinia',
+            imports: [
+              'StoreActions'
+            ],
+            type: true
           }
         ],
         resolvers:
           mode === 'development'
             ? []
             : [NaiveUiResolver()],
         dirs: [
-          './src/hooks'
+          './src/hooks',
+          './src/modules/**/store'
         ],
         dts: './auto-imports.d.ts',
         eslintrc: {