通过npm run build命令检查代码，修改部分欠缺（如，类型定义不明确等）

修改store/collapse/index.ts后发现，
Menu.vue,MenuLogo.vue,Collapse.vue三个文件对应功能出现bug
将这三个文件中的getCollapse方法直接改为collapse
(store/collapse/index.ts修改后collapse为ref值可直接获取)

创建api和compositions模块，抽离表格相关的业务

在api模块下定义列表查询数据类型
在compositions模块下传递参数，并将列表查询的方法返回出去（封装方法）

在views/user/Index.vue文件中从ELement-plus中导入el-main（主要区域容器）
导入useUserTable,获取表格相关业务
通过el-form搭建搜索栏

order-system/src/api/user/userModel.ts

@@ -0,0 +1,7 @@
+// 定义列表查询的数据类型
+export type ListUserParm = {
+  currentPage: number;
+  pageSize: number;
+  name: string;
+  phone: string;
+}

order-system/src/components/SysDialog.vue

@@ -25,15 +25,14 @@
  
  <script setup lang="ts">
 //  定义参数类型
-//  定义为可选参数
 interface DialogProps{
   // 弹框标题
-  title?: string;
+  title: string;
   // 弹框显示&隐藏
   visible: boolean;
   // 弹框宽高
-  width?: number;
-  height?: number;
+  width: number;
+  height: number;
 }
 
 // 子组件接收父组件传递的参数

order-system/src/compositions/user/useUserTable.ts

@@ -0,0 +1,20 @@
+// 抽离表格相关业务
+
+import type { ListUserParm } from "../../api/user/userModel";
+import { reactive } from "vue";
+
+export default function useUserTable(){
+  // 列表查询的参数
+  const listParm = reactive<ListUserParm>({
+    currentPage: 1,
+    pageSize: 10,
+    name: '',
+    phone: ''
+
+  })
+
+  // 将表格查询的方法返回出去
+  return{
+    listParm
+  }
+}

order-system/src/hooks/useDialog.ts

@@ -6,10 +6,10 @@ export default function useDialog(){
   // reactive： 定义复杂数据类型的响应式数据
 
   const dialog = reactive({
-    // title: '新增',
+    title: '新增',
     visible: false,
-    // width: 600,
-    // height: 100
+    width: 600,
+    height: 100
   })
 
   // 弹框关闭

order-system/src/http/index.ts

@@ -1,4 +1,5 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosRequestHeaders, InternalAxiosRequestConfig } from "axios"
+import axios from "axios"
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosRequestHeaders, InternalAxiosRequestConfig } from "axios"
 import { ElMessage } from 'element-plus'
 
 // axios请求配置

order-system/src/layout/Menu.vue

@@ -107,7 +107,7 @@
 
   // 获取菜单状态
   const collapse = computed(()=>{
-    return store.getCollapse
+    return store.collapse
   })
 
 </script>

order-system/src/layout/MenuLogo.vue

@@ -25,7 +25,7 @@
 
   // 通过watch监听
   watch(
-    ()=> store.getCollapse,
+    ()=> store.collapse,
     (collapsed: boolean) => {
       if (!collapsed){
         setTimeout(() =>{

order-system/src/layout/header/BreadCrumb.vue

@@ -16,10 +16,12 @@
 
 <script setup lang="ts">
 
-  import { onMounted, ref, Ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
+  import type { Ref } from 'vue';
 
   // 引入当前路由，实现通过路由地址控制面包屑导航
-  import { useRoute, RouteLocationMatched } from 'vue-router'
+  import { useRoute } from 'vue-router'
+  import type { RouteLocationMatched } from 'vue-router'
 
   // 获取当前路由
   const route = useRoute()

order-system/src/layout/header/Collapse.vue

@@ -27,7 +27,7 @@
 
   // 获取状态
   const status = computed(()=>{
-    return store.getCollapse
+    return store.collapse
   })
 
   // 给图标添加点击事件

order-system/src/store/collapse/index.ts

@@ -1,25 +1,18 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-export const useCollapseStore = defineStore('collapseStore', {
-  state: () => {
-    return {
-      collapse: false
-    }
-  },
-
-  // getter
-  getters:{
-    // 数据放在state里面，需要传递state
-    getCollapse(state){
-      return state.collapse
-    }
-  },
-
-  // action
-  actions:{
-    // 设置state里面的数据
-    setCollapse(collapse:boolean){
-      this.collapse = collapse
-    }
+export const useCollapseStore = defineStore('collapseStore', () => {
+  const collapse = ref(false)
+  
+  const getCollapse = () => collapse.value
+  
+  const setCollapse = (value: boolean) => {
+    collapse.value = value
+  }
+  
+  return { 
+    collapse, 
+    getCollapse, 
+    setCollapse 
   }
 })

order-system/src/store/test/index.ts

@@ -1,31 +1,21 @@
 import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
 
-//  `defineStore()` 的返回值的命名是自由的
-// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
-// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
-// 第一个参数是你的应用中 Store 的唯一 ID。
-export const useTestStore = defineStore('testStore', {
-  // state可以理解为一个共享的内存
-  state: () => {
-    return {
-      count: 0
-    }
-  },
+export const useTestStore = defineStore('testStore', () => {
+  // State
+  const count = ref(0)
 
-  // getter
-  getters:{
-    // 数据放在state里面，需要传递state
-    doubleCount(state){
-      return state.count
-    }
-  },
+  // Getter
+  const doubleCount = computed(() => count.value * 2)
 
-  // action
-  actions:{
-    // 设置state里面的数据
-    // count:number表示传递进去的count应该是一个number类型
-    setCount(count:number){
-      this.count = count
-    }
+  // Action
+  function setCount(value: number) {
+    count.value = value
+  }
+
+  return {
+    count,
+    doubleCount,
+    setCount
   }
 })

order-system/src/views/user/Index.vue

@@ -1,11 +1,33 @@
 <template>
-  <div>
-    用户管理
-  </div>
+  <el-main>
+    <!-- 搜索栏 -->
+    <el-form :model="listParm" label-width="80px" :inline="true" size="default">
+      <el-form-item>
+        <el-input v-model="listParm.name" placeholder="请输入姓名："></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="listParm.phone" placeholder="请输入电话："></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button :icon="Search">搜索</el-button>
+        <el-button :icon="Close">重置</el-button>
+        <el-button type="primary" :icon="Plus">新增</el-button>
+        
+      </el-form-item>
+    </el-form>
+    
+  </el-main>
 </template>
 
 <script setup lang="ts">
 
+  import { Search, Close, Plus } from '@element-plus/icons-vue'
+  // 导入useUserTable,获取表格相关业务
+  // 第一次导入在vite-env.d.ts中添加路径别名支持
+  import useUserTable from '@/compositions/user/useUserTable';
+
+  // 获取表格相关业务
+  const { listParm } = useUserTable()
 </script>
 
 <style scoped>

order-system/src/vite-env.d.ts

@@ -39,9 +39,7 @@ declare module '@/components/*' {
 declare module 'pinia';
 declare module '@/store/*' {
   import { StoreDefinition } from 'pinia';
-  // 允许导出任意具名成员
-  export const useTestStore: StoreDefinition;
-  // 或者更通用的声明方式
+
   export function useTestStore(): any;
 
   // useCollapseStore导出
@@ -49,8 +47,23 @@ declare module '@/store/*' {
 }
 
 // 添加hooks路径别名支持
-declare module '@/hooks/useDialog' {
-  // 我们可以根据实际情况导出具体的类型，如果暂时不想写具体类型，可以导出any
+declare module '@/hooks/*' {
   const content: any;
   export default content;
-}
+}
+
+// 添加compositions路径别名支持
+declare module '@/compositions/*' {
+  const compositions: any;
+  export default compositions;
+}
+
+// 添加api路径别名支持
+// declare module '@/api/user/userModel' {
+//   export type ListUserParm = {
+//     currentPage: number;
+//     pageSize: number;
+//     name: string;
+//     phone: string;
+//   }
+// }

order-system/tsconfig.app.json

@@ -8,7 +8,8 @@
     "paths": {
       "@/*": [
         "src/*"
-      ]
+      ],
+      "@/api/*": ["src/api/*"]
     },
     // 添加必要的库支持
     "lib": ["ES2015", "ES2015.Promise", "DOM", "DOM.Iterable", "ESNext"],
@@ -29,6 +30,7 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "vite-env.d.ts" // 确保包含类型声明文件
+    "vite-env.d.ts", // 确保包含类型声明文件
+    "src/api/**/*.ts"
   ]
 }