Merge pull request 'add' (#13) from develop into main

.idea/workspace.xml

@@ -1,7 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
   <component name="ChangeListManager">
-    <list default="true" id="4bee2ad7-6bf7-4a48-9f02-04204a99b147" name="Changes" comment="" />
+    <list default="true" id="4bee2ad7-6bf7-4a48-9f02-04204a99b147" name="Changes" comment="">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+    </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
@@ -15,10 +20,10 @@
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
-  <component name="ProjectColorInfo"><![CDATA[{
-  "customColor": "",
-  "associatedIndex": 1
-}]]></component>
+  <component name="ProjectColorInfo">{
+  &quot;customColor&quot;: &quot;&quot;,
+  &quot;associatedIndex&quot;: 1
+}</component>
   <component name="ProjectId" id="2wPHHFebSwYCHvl09mTI9f7jYjH" />
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
@@ -28,7 +33,7 @@
   "keyToString": {
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "RunOnceActivity.git.unshallow": "true",
-    "git-widget-placeholder": "feature/lxf",
+    "git-widget-placeholder": "develop",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "D:/SC/Nursing-home-management-system",
     "node.js.detected.package.eslint": "true",
@@ -37,6 +42,7 @@
     "node.js.selected.package.tslint": "(autodetect)",
     "nodejs_package_manager_path": "npm",
     "settings.editor.selected.configurable": "MavenSettings",
+    "ts.external.directory.path": "D:\\xx\\Nursing-home-management-system\\client\\node_modules\\typescript\\lib",
     "vue.rearranger.settings.migration": "true"
   }
 }]]></component>
@@ -57,6 +63,7 @@
       <option name="presentableId" value="Default" />
       <updated>1742217574434</updated>
       <workItem from="1745936199577" duration="445000" />
+      <workItem from="1745995470593" duration="507000" />
     </task>
     <servers />
   </component>

client/src/layout/components/Grid/components/GridItem.vue

@@ -0,0 +1,109 @@
+<template>
+  <!-- 根元素 div，通过 style 绑定动态样式，v-show 根据 isShow 的值控制元素的显示与隐藏 -->
+  <div :style="style" v-show="isShow">
+    <!-- 插槽，用于在父组件中插入内容 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="GridItem">
+// 从 vue 中导入必要的函数
+import { computed, inject, Ref, ref, useAttrs, watch } from 'vue'
+// 从 '../interface/index' 导入 BreakPoint 和 Responsive 类型定义
+import { BreakPoint, Responsive } from '../interface/index'
+
+// 定义 Props 类型，包含组件的属性定义
+type Props = {
+  // 偏移量，可选，默认值为 0
+  offset?: number
+  // 跨度，可选，默认值为 1
+  span?: number
+  // 是否为后缀，可选，默认值为 false
+  suffix?: boolean
+  // 超小屏幕（xs）的响应式配置，可选，默认值为 undefined
+  xs?: Responsive
+  // 小屏幕（sm）的响应式配置，可选，默认值为 undefined
+  sm?: Responsive
+  // 中屏幕（md）的响应式配置，可选，默认值为 undefined
+  md?: Responsive
+  // 大屏幕（lg）的响应式配置，可选，默认值为 undefined
+  lg?: Responsive
+  // 超大屏幕（xl）的响应式配置，可选，默认值为 undefined
+  xl?: Responsive
+}
+
+// 使用 withDefaults 为 defineProps 定义的属性设置默认值
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+})
+
+// 获取父组件传递过来的所有属性（不包括在 props 中定义的）
+const attrs = useAttrs() as any
+// 定义一个响应式变量 isShow，用于控制元素的显示与隐藏，初始值为 true
+const isShow = ref(true)
+
+// 从父组件注入 breakPoint，类型为 Ref<BreakPoint>，默认值为 ref('xl')
+const breakPoint = inject<Ref<BreakPoint>>('breakPoint', ref('xl'))
+// 从父组件注入 shouldHiddenIndex，类型为 Ref<number>，默认值为 ref(-1)
+const shouldHiddenIndex = inject<Ref<number>>('shouldHiddenIndex', ref(-1))
+// 监听 shouldHiddenIndex 和 breakPoint 的变化
+watch(
+  // 监听的数据源，是一个数组，包含 shouldHiddenIndex.value 和 breakPoint.value
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  // 回调函数，n 是一个数组，包含变化后的 shouldHiddenIndex.value 和 breakPoint.value
+  n => {
+    // 如果 attrs 中有 index 属性
+    if (attrs.index) {
+      // 根据条件判断是否隐藏元素
+      isShow.value =!(n[0]!== -1 && parseInt(attrs.index) >= n[0])
+    }
+  },
+  // 选项对象，immediate: true 表示立即执行一次回调函数
+  { immediate: true }
+)
+
+// 从父组件注入 gap，默认值为 0
+const gap = inject('gap', 0)
+// 从父组件注入 cols，类型为 Ref<number>，默认值为 ref(4)
+const cols = inject<Ref<number>>('cols', ref(4))
+// 计算属性 style，根据 props 和注入的值计算元素的样式
+const style = computed(() => {
+  // 获取当前断点下的 span 值，如果没有则使用默认的 props.span
+  let span = props[breakPoint.value]?.span?? props.span
+  // 获取当前断点下的 offset 值，如果没有则使用默认的 props.offset
+  let offset = props[breakPoint.value]?.offset?? props.offset
+  // 如果是后缀
+  if (props.suffix) {
+    return {
+      // 计算 gridColumnStart 的值
+      gridColumnStart: cols.value - span - offset + 1,
+      // 计算 gridColumnEnd 的值
+      gridColumnEnd: `span ${span + offset}`,
+      // 计算 marginLeft 的值
+      marginLeft:
+        offset!== 0
+          ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})`
+          : 'unset'
+    }
+  } else {
+    return {
+      // 计算 gridColumn 的值
+      gridColumn: `span ${
+        span + offset > cols.value? cols.value : span + offset
+      }/span ${span + offset > cols.value? cols.value : span + offset}`,
+      // 计算 marginLeft 的值
+      marginLeft:
+        offset!== 0
+          ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})`
+          : 'unset'
+    }
+  }
+})
+</script>

client/src/layout/components/Grid/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <!-- 根元素 div，通过 style 绑定动态样式，用于包裹插槽内容 -->
+  <div :style="style">
+    <!-- 插槽，用于父组件插入内容 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+// 从 'vue' 中导入各种 Vue 相关的函数和类型
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from 'vue'
+// 导入自定义的 BreakPoint 类型
+import type { BreakPoint } from './interface/index'
+
+// 定义 Props 类型，描述组件的属性
+type Props = {
+  // 列数，可以是一个数字，也可以是一个根据不同断点设置列数的对象
+  cols?: number | Record<BreakPoint, number>
+  // 是否折叠，布尔类型，默认为 false
+  collapsed?: boolean
+  // 折叠的行数，数字类型，默认为 1
+  collapsedRows?: number
+  // 间距，可以是一个数字，也可以是一个包含两个数字的数组 [水平间距, 垂直间距]
+  gap?: [number, number] | number
+}
+
+// 使用 withDefaults 为定义的属性设置默认值
+const props = withDefaults(defineProps<Props>(), {
+  // 默认的列数设置，根据不同断点有不同的列数
+  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  // 默认不折叠
+  collapsed: false,
+  // 默认折叠行数为 1
+  collapsedRows: 1,
+  // 默认间距为 0
+  gap: 0
+})
+
+// 在组件挂载前执行的钩子函数，如果 collapsed 为 true 则调用 findIndex 函数
+onBeforeMount(() => props.collapsed && findIndex())
+// 在组件挂载后执行的钩子函数，初始化调用 resize 函数，并监听 window 的 resize 事件
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as any)
+  window.addEventListener('resize', resize)
+})
+// 当组件被激活时执行的钩子函数，调用 resize 函数并监听 window 的 resize 事件
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as any)
+  window.addEventListener('resize', resize)
+})
+// 当组件卸载时执行的钩子函数，移除 window 的 resize 事件监听
+onUnmounted(() => {
+  window.removeEventListener('resize', resize)
+})
+// 当组件失活时执行的钩子函数，移除 window 的 resize 事件监听
+onDeactivated(() => {
+  window.removeEventListener('resize', resize)
+})
+
+// 定义 resize 函数，用于监听屏幕宽度变化并更新 breakPoint
+const resize = (e: UIEvent) => {
+  // 获取当前窗口的宽度
+  let width = (e.target as Window).innerWidth
+  // 根据不同的宽度范围设置 breakPoint 的值
+  switch (!!width) {
+    case width < 768:
+      breakPoint.value = 'xs'
+      break
+    case width >= 768 && width < 992:
+      breakPoint.value ='sm'
+      break
+    case width >= 992 && width < 1200:
+      breakPoint.value ='md'
+      break
+    case width >= 1200 && width < 1920:
+      breakPoint.value = 'lg'
+      break
+    case width >= 1920:
+      breakPoint.value = 'xl'
+      break
+  }
+}
+
+// 向子组件提供 gap 间距的值，如果 gap 是数组则取第一个值，否则直接使用 gap
+provide('gap', Array.isArray(props.gap)? props.gap[0] : props.gap)
+
+// 定义响应式的 breakPoint，并向子组件提供该值
+let breakPoint = ref<BreakPoint>('xl')
+provide('breakPoint', breakPoint)
+
+// 定义要开始折叠的 index 的响应式变量，并向子组件提供该值
+const hiddenIndex = ref(-1)
+provide('shouldHiddenIndex', hiddenIndex)
+
+// 计算并提供 cols 的值，如果 cols 是对象则根据 breakPoint 取值，否则直接使用 cols
+const cols = computed(() => {
+  if (typeof props.cols === 'object')
+    return props.cols[breakPoint.value]?? props.cols
+  return props.cols
+})
+provide('cols', cols)
+
+// 获取默认插槽的内容
+const slots = useSlots().default!()
+
+// 定义 findIndex 函数，用于寻找需要开始折叠的字段 index
+const findIndex = () => {
+  // 用于存储字段的数组
+  let fields: VNodeArrayChildren = []
+  // 用于存储后缀插槽的变量
+  let suffix: any = null
+  // 遍历插槽内容
+  slots.forEach((slot: any) => {
+    // 如果插槽类型是对象且名称为 'GridItem' 并且有 suffix 属性
+    if (
+      typeof slot.type === 'object' &&
+      slot.type.name === 'GridItem' &&
+      slot.props?.suffix!== undefined
+    )
+      suffix = slot
+    // 如果插槽类型是 symbol 且有子节点数组
+    if (typeof slot.type ==='symbol' && Array.isArray(slot.children))
+      slot.children.forEach((child: any) => fields.push(child))
+  })
+
+  // 计算 suffix 所占用的列数
+  let suffixCols = 0
+  if (suffix) {
+    suffixCols =
+      (suffix.props![breakPoint.value]?.span?? suffix.props?.span?? 1) +
+      (suffix.props![breakPoint.value]?.offset?? suffix.props?.offset?? 0)
+  }
+  try {
+    // 用于标记是否找到需要折叠的字段
+    let find = false
+    // 遍历字段数组，计算累计列数并判断是否超过折叠行数
+    fields.reduce((prev = 0, current, index) => {
+      prev +=
+        ((current as VNode)!.props![breakPoint.value]?.span??
+          (current as VNode)!.props?.span??
+          1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset??
+          (current as VNode)!.props?.offset??
+          0)
+      if ((prev as number) > props.collapsedRows * cols.value - suffixCols) {
+        hiddenIndex.value = index
+        find = true
+        throw 'find it'
+      }
+      return prev
+    }, 0)
+    // 如果没有找到则将 hiddenIndex 设置为 -1
+    if (!find) hiddenIndex.value = -1
+  } catch (e) {
+    // console.warn(e);
+  }
+}
+
+// 监听 breakPoint 的变化，如果 collapsed 为 true 则调用 findIndex 函数
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex()
+  }
+)
+
+// 监听 collapsed 的变化，如果为 true 则调用 findIndex 函数，否则将 hiddenIndex 设置为 -1
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex()
+    hiddenIndex.value = -1
+  }
+)
+
+// 计算并返回间距的样式字符串
+const gap = computed(() => {
+  if (typeof props.gap === 'number') return `${props.gap}px`
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`
+  return 'unset'
+})
+
+// 计算并返回组件的样式对象
+const style = computed(() => {
+  return {
+    display: 'grid',
+    gridGap: gap.value,
+    gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`
+  }
+})
+
+// 暴露 breakPoint，以便父组件可以访问
+defineExpose({ breakPoint })
+</script>

client/src/layout/components/Grid/interface/index.ts

@@ -0,0 +1,12 @@
+// 定义一个类型别名 BreakPoint，它的值只能是 'xs'、'sm'、'md'、'lg' 或 'xl' 中的一个，
+// 通常用于表示响应式布局中的不同屏幕断点
+export type BreakPoint = 'xs' |'sm' |'md' | 'lg' | 'xl';
+
+// 定义一个类型别名 Responsive，它是一个对象类型，包含两个可选属性 span 和 offset。
+// span 用于表示在响应式布局中元素所占的列数，类型为 number 类型的可选值。
+// offset 用于表示在响应式布局中元素的偏移量，类型为 number 类型的可选值。
+// 这个类型通常用于描述在不同屏幕断点下元素的布局属性
+export type Responsive = {
+  span?: number;
+  offset?: number;
+};

client/src/layout/components/IconPark/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- Component 是 Vue 中的动态组件，:is="icon" 表示根据 icon 的值来动态渲染对应的图标组件 -->
+  <!-- :theme="theme" 绑定图标主题，如轮廓（outline）、填充（filled）等 -->
+  <!-- :size="size" 绑定图标大小，可以是数字或字符串类型 -->
+  <!-- :spin="spin" 绑定图标是否旋转的状态，布尔类型 -->
+  <!-- :fill="fill" 绑定图标的填充颜色，可以是字符串或字符串数组 -->
+  <!-- :strokeLinecap="strokeLinecap" 绑定图标描边端点的样式 -->
+  <!-- :strokeLinejoin="strokeLinejoin" 绑定图标描边连接处的样式 -->
+  <!-- :strokeWidth="strokeWidth" 绑定图标描边的宽度 -->
+  <Component
+    :is="icon"
+    :theme="theme"
+    :size="size"
+    :spin="spin"
+    :fill="fill"
+    :strokeLinecap="strokeLinecap"
+    :strokeLinejoin="strokeLinejoin"
+    :strokeWidth="strokeWidth"
+  />
+</template>
+
+<script setup lang="ts">
+// 从 '@icon-park/vue-next/lib/runtime' 导入 Icon 类型，用于定义图标相关的类型
+import type { Icon } from '@icon-park/vue-next/lib/runtime'
+
+// 使用 defineProps 定义组件的属性，明确指定属性的类型和默认值情况
+defineProps<{
+  // icon 属性，类型为 Icon，必填，用于指定要显示的图标
+  icon: Icon
+  // theme 属性，可选，类型为 'outline' | 'filled' | 'two-tone' |'multi-color'，表示图标的主题样式
+  theme?: 'outline' | 'filled' | 'two-tone' |'multi-color'
+  // size 属性，可选，类型为 number | string，用于设置图标的大小
+  size?: number | string
+  // spin 属性，可选，类型为 boolean，用于控制图标是否旋转
+  spin?: boolean
+  // fill 属性，可选，类型为 string | string[]，用于设置图标的填充颜色
+  fill?: string | string[]
+  // strokeLinecap 属性，可选，类型为 'butt' | 'round' |'square'，用于设置描边端点的样式
+  strokeLinecap?: 'butt' | 'round' |'square'
+  // strokeLinejoin 属性，可选，类型为'miter' | 'round' | 'bevel'，用于设置描边连接处的样式
+  strokeLinejoin?: 'miter' | 'round' | 'bevel'
+  // strokeWidth 属性，可选，类型为 number，用于设置描边的宽度
+  strokeWidth?: number
+}>()
+</script>

client/src/layout/components/ProTable/components/ColSetting.vue

@@ -0,0 +1,88 @@
+<template>
+  <!-- 注释说明该部分是列设置 -->
+  <!-- el-drawer 是 Element Plus 中的抽屉组件，用于展示列设置的内容 -->
+  <!-- title="列设置" 设置抽屉的标题 -->
+  <!-- v-model="drawerVisible" 双向绑定抽屉的显示隐藏状态，drawerVisible 是一个响应式变量 -->
+  <!-- size="450px" 设置抽屉的宽度为 450px -->
+  <el-drawer title="列设置" v-model="drawerVisible" size="450px">
+    <!-- 定义一个包含表格的 div 容器 -->
+    <div class="table-main">
+      <!-- el-table 是 Element Plus 中的表格组件，用于展示列设置的数据 -->
+      <!-- :data="colSetting" 绑定表格的数据，colSetting 是一个数组，包含列的设置信息 -->
+      <!-- :border="true" 设置表格有边框 -->
+      <!-- row-key="prop" 为表格的每一行设置唯一的标识，这里使用 prop 作为标识 -->
+      <!-- default-expand-all 表示默认展开所有行（对于树形表格） -->
+      <!-- :tree-props="{ children: '_children' }" 配置表格为树形表格，指定子节点的字段为 _children -->
+      <el-table
+        :data="colSetting"
+        :border="true"
+        row-key="prop"
+        default-expand-all
+        :tree-props="{ children: '_children' }"
+      >
+        <!-- el-table-column 是表格列组件，用于定义表格的列 -->
+        <!-- prop="label" 绑定列的数据字段为 label -->
+        <!-- align="center" 设置列内容居中对齐 -->
+        <!-- label="列名" 设置列的标题为列名 -->
+        <el-table-column prop="label" align="center" label="列名" />
+        <!-- 定义显示列，prop="isShow" 绑定数据字段为 isShow -->
+        <!-- v-slot="scope" 定义作用域插槽，scope 包含当前行的数据 -->
+        <el-table-column
+          prop="isShow"
+          align="center"
+          label="显示"
+          v-slot="scope"
+        >
+          <!-- el-switch 是 Element Plus 中的开关组件，v-model="scope.row.isShow" 双向绑定当前行的 isShow 字段 -->
+          <el-switch v-model="scope.row.isShow"></el-switch>
+        </el-table-column>
+        <!-- 定义排序列，prop="sortable" 绑定数据字段为 sortable -->
+        <!-- v-slot="scope" 定义作用域插槽，scope 包含当前行的数据 -->
+        <el-table-column
+          prop="sortable"
+          align="center"
+          label="排序"
+          v-slot="scope"
+        >
+          <!-- el-switch 是 Element Plus 中的开关组件，v-model="scope.row.sortable" 双向绑定当前行的 sortable 字段 -->
+          <el-switch v-model="scope.row.sortable"></el-switch>
+        </el-table-column>
+        <!-- 定义表格为空时显示的内容，#empty 是表格的 empty 插槽 -->
+        <template #empty>
+          <div class="table-empty">
+            <div>暂无可配置列</div>
+          </div>
+        </template>
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+// 导入 Vue 中的 ref 函数，用于创建响应式引用
+import { ref } from 'vue'
+// 导入自定义表格组件 ProTable 的列配置项接口 ColumnProps
+import { ColumnProps } from '@/components/ProTable/interface'
+
+// 使用 defineProps 定义组件的属性，接收一个名为 colSetting 的属性，类型为 ColumnProps 数组
+defineProps<{ colSetting: ColumnProps[] }>()
+
+// 创建一个响应式变量 drawerVisible，用于控制抽屉的显示和隐藏，初始值为 false
+const drawerVisible = ref<boolean>(false)
+// 定义打开列设置抽屉的函数 openColSetting，将 drawerVisible 设置为 true
+const openColSetting = () => {
+  drawerVisible.value = true
+}
+
+// 将 openColSetting 函数暴露出去，以便父组件可以调用
+defineExpose({
+  openColSetting
+})
+</script>
+
+<style scoped lang="scss">
+// 定义一个类 cursor-move，设置鼠标悬停时的样式为 move（通常用于可拖动元素）
+.cursor-move {
+  cursor: move;
+}
+</style>

client/src/layout/components/ProTable/components/Pagination.vue

@@ -0,0 +1,47 @@
+<template>
+  <!-- 注释说明该部分是分页组件 -->
+  <!-- el-pagination 是 Element Plus 中的分页组件 -->
+  <!-- :current-page="pageable.pageNum" 双向绑定当前页码，pageable.pageNum 是一个响应式变量，表示当前页码 -->
+  <!-- :page-size="pageable.pageSize" 双向绑定每页显示的数量，pageable.pageSize 是一个响应式变量，表示每页显示的数量 -->
+  <!-- :page-sizes="[10, 25, 50, 100]" 设置每页显示数量的可选值 -->
+  <!-- :background="true" 设置分页组件的背景颜色 -->
+  <!-- layout="total, sizes, prev, pager, next, jumper" 设置分页组件的布局，包括总数量、每页显示数量选择器、上一页、页码、下一页、跳转到指定页 -->
+  <!-- :total="pageable.total" 绑定总数量，pageable.total 是一个响应式变量，表示数据的总数量 -->
+  <!-- @size-change="handleSizeChange" 监听每页显示数量改变的事件，当用户选择不同的每页显示数量时，会调用 handleSizeChange 函数 -->
+  <!-- @current-change="handleCurrentChange" 监听当前页码改变的事件，当用户点击上一页、下一页或跳转到指定页时，会调用 handleCurrentChange 函数 -->
+  <el-pagination
+    :current-page="pageable.pageNum"
+    :page-size="pageable.pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :background="true"
+    layout="total, sizes, prev, pager, next, jumper"
+    :total="pageable.total"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+// 定义一个接口 Pageable，用于描述分页相关的属性
+// pageNum 表示当前页码，类型为 number
+// pageSize 表示每页显示的数量，类型为 number
+// total 表示数据的总数量，类型为 number
+interface Pageable {
+  pageNum: number
+  pageSize: number
+  total: number
+}
+
+// 定义一个接口 PaginationProps，用于描述分页组件的属性
+// pageable 是一个 Pageable 类型的对象，包含分页相关的属性
+// handleSizeChange 是一个函数，用于处理每页显示数量改变的事件，接收一个 number 类型的参数 size，表示新的每页显示数量
+// handleCurrentChange 是一个函数，用于处理当前页码改变的事件，接收一个 number 类型的参数 currentPage，表示新的当前页码
+interface PaginationProps {
+  pageable: Pageable
+  handleSizeChange: (size: number) => void
+  handleCurrentChange: (currentPage: number) => void
+}
+
+// 使用 defineProps 定义组件的属性，接收一个 PaginationProps 类型的对象
+defineProps<PaginationProps>()
+</script>

client/src/layout/components/ProTable/components/TableColumn.vue

@@ -0,0 +1,103 @@
+<template>
+  <!-- 使用动态组件，根据 renderLoop 函数的返回值来渲染不同的表格列 -->
+  <component :is="renderLoop(column)"></component>
+</template>
+
+<script lang="tsx" setup name="TableColumn">
+// 从 vue 中导入必要的函数
+import { inject, ref, useSlots } from 'vue'
+// 导入自定义表格组件 ProTable 的列配置项接口 ColumnProps
+import { ColumnProps } from '@/components/ProTable/interface'
+// 导入一些工具函数，用于数据处理和格式化
+import { filterEnum, formatValue, handleRowAccordingToProp } from '@/utils/util'
+
+// 使用 defineProps 定义组件的属性，接收一个名为 column 的属性，类型为 ColumnProps
+defineProps<{ column: ColumnProps }>()
+
+// 获取组件的插槽内容
+const slots = useSlots()
+
+// 从父组件注入 enumMap，类型为 Ref<Map<any, any>>，默认值为一个新的 Map 对象
+const enumMap = inject('enumMap', ref(new Map()))
+
+// 定义一个函数 renderCellData，用于渲染表格单元格的数据
+const renderCellData = (item: ColumnProps, scope: { [key: string]: any }) => {
+  // 如果当前列的 prop 在 enumMap 中有对应的值，并且该列需要进行枚举过滤
+  return enumMap.value.get(item.prop) && item.isFilterEnum
+    // 调用 filterEnum 函数进行枚举过滤，并格式化数据
+    ? filterEnum(
+      handleRowAccordingToProp(scope.row, item.prop!),
+      enumMap.value.get(item.prop)!,
+      item.fieldNames
+    )
+    // 否则直接格式化数据
+    : formatValue(handleRowAccordingToProp(scope.row, item.prop!))
+}
+
+// 定义一个函数 getTagType，用于获取标签的类型
+const getTagType = (item: ColumnProps, scope: { [key: string]: any }) => {
+  // 调用 filterEnum 函数获取标签类型
+  return filterEnum(
+    handleRowAccordingToProp(scope.row, item.prop!),
+    enumMap.value.get(item.prop),
+    item.fieldNames,
+    'tag'
+  ) as any
+}
+
+// 定义一个函数 renderLoop，用于递归渲染表格列
+const renderLoop = (item: ColumnProps) => {
+  return (
+    <>
+      // 如果当前列应该显示
+      {item.isShow && (
+        // 渲染 el-table-column 组件
+        <el-table-column
+          // 展开当前列的所有属性
+          {...item}
+          // 设置列内容的对齐方式，默认为居中
+          align={item.align?? 'center'}
+          // 设置是否显示溢出提示，默认为当 prop 不是 'operation' 时显示
+          showOverflowTooltip={
+            item.showOverflowTooltip?? item.prop!== 'operation'
+          }
+        >
+          {{
+            // 默认插槽，用于渲染单元格内容
+            default: (scope: any) => {
+              // 如果当前列有子列
+              if (item._children)
+                // 递归渲染每个子列
+                return item._children.map(child => renderLoop(child))
+              // 如果当前列有自定义的渲染函数
+              if (item.render) return item.render(scope)
+              // 如果有对应 prop 的插槽
+              if (slots[item.prop!]) return slots[item.prop!]!(scope)
+              // 如果当前列需要显示为标签
+              if (item.tag)
+                return (
+                  // 渲染 el-tag 组件，并设置标签类型和内容
+                  <el-tag type={getTagType(item, scope)}>
+                    {renderCellData(item, scope)}
+                  </el-tag>
+                )
+              // 否则直接渲染单元格数据
+              return renderCellData(item, scope)
+            },
+            // 表头插槽，用于渲染表头内容
+            header: () => {
+              // 如果当前列有自定义的表头渲染函数
+              if (item.headerRender) return item.headerRender(item)
+              // 如果有对应 propHeader 的插槽
+              if (slots[`${item.prop}Header`])
+                return slots[`${item.prop}Header`]!({ row: item })
+              // 否则显示当前列的 label
+              return item.label
+            }
+          }}
+        </el-table-column>
+      )}
+    </>
+  )
+}
+</script>

client/src/layout/components/ProTable/index.md

@@ -0,0 +1,87 @@
+## ProTable 文档 📚
+
+### 1、ProTable 属性（ProTableProps）：
+
+> 使用 `v-bind="$attrs"` 通过属性透传将 **ProTable** 组件属性全部透传到 **el-table** 上，所以我们支持 **el-table** 的所有 **Props** 属性。在此基础上，还扩展了以下 **Props：**
+
+|    属性名    |    类型     | 是否必传 |                默认值                 |                                               属性描述                                               |
+| :----------: | :---------: | :------: | :-----------------------------------: | :--------------------------------------------------------------------------------------------------: |
+|   columns    | ColumnProps |    ✅    |                   —                   |                  ProTable 组件会根据此字段渲染搜索表单与表格列，详情见 ColumnProps                   |
+|  requestApi  |  Function   |    ✅    |                   —                   |                                        获取表格数据的请求 API                                        |
+| requestAuto  |   Boolean   |    ❌    |                 true                  |                                    表格初始化是否自动执行请求 API                                    |
+| dataCallback |  Function   |    ❌    |                   —                   |                           后台返回数据的回调函数，可对后台返回数据进行处理                           |
+|    title     |   String    |    ❌    |                   —                   |                                   表格标题，目前只在打印的时候用到                                   |
+|  pagination  |   Boolean   |    ❌    |                 true                  | 是否显示分页组件：pagination 为 false 后台返回数据应该没有分页信息 和 list 字段，data 就是 list 数据 |
+|  initParam   |   Object    |    ❌    |                  {}                   |                           表格请求的初始化参数，该值变化会自动请求表格数据                           |
+|  toolButton  |   Boolean   |    ❌    |                 true                  |                                         是否显示表格功能按钮                                         |
+|    rowKey    |   String    |    ❌    |                 'id'                  |                                    当表格数据多选时，所指定的 id                                     |
+|  searchCol   |   Object    |    ❌    | { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 } |                                        表格搜索项每列占比配置                                        |
+
+### 2、Column 配置（ColumnProps）：
+
+> 使用 `v-bind="column"` 通过属性透传将每一项 **column** 属性全部透传到 **el-table-column** 上，所以我们支持 **el-table-column** 的所有 **Props** 属性。在此基础上，还扩展了以下 **Props：**
+
+|    属性名    |        类型        | 是否必传 | 默认值 |                                            属性描述                                             |
+| :----------: | :----------------: | :------: | :----: | :---------------------------------------------------------------------------------------------: |
+|     tag      |      Boolean       |    ❌    | false  |            当前单元格值是否为标签展示，可通过 enum 数据中 tagType 字段指定 tag 类型             |
+|    isShow    |      Boolean       |    ❌    |  true  |                            当前列是否显示在表格内(只对 prop 列生效)                             |
+|    search    |    SearchProps     |    ❌    |   —    |                                 搜索项配置，详情见 SearchProps                                  |
+|     enum     | Object \| Function |    ❌    |   —    | 字典，可格式化单元格内容，还可以作为搜索框的下拉选项（字典可以为 API 请求函数，内部会自动执行） |
+| isFilterEnum |      Boolean       |    ❌    |  true  |        当前单元格值是否根据 enum 格式化（例如 enum 只作为搜索项数据，不参与内容格式化）         |
+|  fieldNames  |       Object       |    ❌    |   —    |                                指定字典 label && value 的 key 值                                |
+| headerRender |      Function      |    ❌    |   —    |                             自定义表头内容渲染（tsx 语法、h 语法）                              |
+|    render    |      Function      |    ❌    |   —    |                            自定义单元格内容渲染（tsx 语法、h 语法）                             |
+|  \_children  |    ColumnProps     |    ❌    |   —    |                                            多级表头                                             |
+
+### 3、搜索项 配置（SearchProps）：
+
+> 使用 `v-bind="column.search.props“` 通过属性透传将 **search.props** 属性全部透传到每一项搜索组件上，所以我们支持 **input、select、tree-select、date-packer、time-picker、time-select、switch** 大部分属性，并在其基础上还扩展了以下 **Props：**
+
+|    属性名    |  类型  | 是否必传 | 默认值 |                                                                    属性描述                                                                    |
+| :----------: | :----: | :------: | :----: | :--------------------------------------------------------------------------------------------------------------------------------------------: |
+|      el      | String |    ✅    |   —    | 当前项搜索框的类型，支持：input、input-number、select、select-v2、tree-select、cascader、date-packer、time-picker、time-select、switch、slider |
+|    props     | Object |    ❌    |   —    |                                           根据 element plus 官方文档来传递，该属性所有值会透传到组件                                           |
+| defaultValue |  Any   |    ❌    |   —    |                                                                  搜索项默认值                                                                  |
+|     key      | String |    ❌    |   —    |                                                 当搜索项 key 不为 prop 属性时，可通过 key 指定                                                 |
+|    order     | Number |    ❌    |   —    |                                                             搜索项排序（从小到大）                                                             |
+|     span     | Number |    ❌    |   1    |                                                        搜索项所占用的列数，默认为 1 列                                                         |
+|    offset    | Number |    ❌    |   —    |                                                              搜索字段左侧偏移列数                                                              |
+
+### 4、ProTable 事件：
+
+> 根据 **ElementPlus Table** 文档在 **ProTable** 组件上绑定事件即可，组件会通过 **$attrs** 透传给 **el-table**。
+>
+> [el-table 事件文档链接](https://element-plus.org/zh-CN/component/table.html#table-%E4%BA%8B%E4%BB%B6)
+
+### 5、ProTable 方法：
+
+> **ProTable** 组件暴露了 **el-table** 实例和一些组件内部的参数和方法：
+>
+> [el-table 方法文档链接](https://element-plus.org/zh-CN/component/table.html#table-%E6%96%B9%E6%B3%95)
+
+|     方法名      |                                 描述                                  |
+| :-------------: | :-------------------------------------------------------------------: |
+|     element     | `el-table` 实例，可以通过`element.方法名`来调用 `el-table` 的所有方法 |
+|    tableData    |                         当前页面所展示的数据                          |
+|   searchParam   |                      所有的搜索参数，不包含分页                       |
+|    pageable     |                          当前表格的分页数据                           |
+|  getTableList   |               获取、刷新表格数据的方法（携带所有参数）                |
+|      reset      |               重置表格查询参数，相当于点击重置搜索按钮                |
+| clearSelection  | 清空表格所选择的数据，除此方法之外还可使用 `element.clearSelection()` |
+|     enumMap     |              当前表格使用的所有字典数据（Map 数据结构）               |
+|   isSelected    |                           表格是否选中数据                            |
+|  selectedList   |                          表格选中的数据列表                           |
+| selectedListIds |                        表格选中的数据列表的 id                        |
+
+### 6、ProTable 插槽：
+
+|          插槽名          |                                                                  描述                                                                   |
+| :----------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: |
+|            —             |                                         默认插槽，支持直接在 ProTable 中写 el-table-column 标签                                         |
+|       tableHeader        |                                         自定义表格头部左侧区域的插槽，一般情况该区域放操作按钮                                          |
+|        toolButton        |                                                  自定义表格头部左右侧侧功能区域的插槽                                                   |
+|          append          | 插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。 |
+|          empty           |                                                      当表格数据为空时自定义的内容                                                       |
+|        pagination        |                                                              分页组件插槽                                                               |
+|      `column.prop`       |                                                           单元格的作用域插槽                                                            |
+| `column.prop` + "Header" |                                                            表头的作用域插槽                                                             |

client/src/layout/components/ProTable/index.vue

@@ -0,0 +1,397 @@
+<!-- 📚📚📚 Pro-Table 文档: https://juejin.cn/post/7166068828202336263 -->
+
+<template>
+  <!-- 查询表单 card -->
+  <!-- SearchForm 是自定义的搜索表单组件 -->
+  <!-- :search="search" 绑定搜索方法 -->
+  <!-- :reset="reset" 绑定重置方法 -->
+  <!-- :searchParam="searchParam" 绑定搜索参数 -->
+  <!-- :columns="searchColumns" 绑定搜索列配置 -->
+  <!-- :searchCol="searchCol" 绑定搜索项每列占比配置 -->
+  <!-- v-show="isShowSearch" 根据 isShowSearch 的值显示或隐藏搜索表单 -->
+  <!-- ref="searchForm" 为搜索表单组件添加引用 -->
+  <SearchForm
+    :search="search"
+    :reset="reset"
+    :searchParam="searchParam"
+    :columns="searchColumns"
+    :searchCol="searchCol"
+    v-show="isShowSearch"
+    ref="searchForm"
+  />
+
+  <!-- 表格内容 card -->
+  <MyCard class="mt-2">
+    <div class="card table-main">
+      <div class="table-header">
+        <div class="flex justify-between header-button-lf mb-2">
+          <div>
+            <!-- 具名插槽 tableHeader，传递了 selectedListIds、selectedList 和 isSelected 数据 -->
+            <slot
+              name="tableHeader"
+              :selectedListIds="selectedListIds"
+              :selectedList="selectedList"
+              :isSelected="isSelected"
+            />
+          </div>
+
+          <div class="header-button-ri">
+            <!-- 具名插槽 toolButton，包含了一些功能按钮 -->
+            <slot name="toolButton">
+              <!-- 刷新按钮，点击时调用 getTableList 方法获取表格数据 -->
+              <el-button :icon="Refresh" circle @click="getTableList" />
+              <!-- <el-button :icon="Printer" circle v-if="columns.length" @click="handlePrint" /> -->
+              <!-- 列设置按钮，当 columns 存在时显示，点击时调用 openColSetting 方法打开列设置 -->
+              <el-button
+                :icon="Operation"
+                circle
+                v-if="columns.length"
+                @click="openColSetting"
+              />
+              <!-- 搜索按钮，当 searchColumns 存在时显示，点击时切换 isShowSearch 的值显示或隐藏搜索表单 -->
+              <el-button
+                :icon="Search"
+                circle
+                v-if="searchColumns.length"
+                @click="isShowSearch = !isShowSearch"
+              />
+            </slot>
+          </div>
+        </div>
+      </div>
+      <!-- 表格主体 -->
+      <!-- el-table 是 Element Plus 的表格组件 -->
+      <!-- ref="tableRef" 为表格组件添加引用 -->
+      <!-- v-bind="$attrs" 绑定父组件传递的所有属性 -->
+      <!-- :data="tableData" 绑定表格数据 -->
+      <!-- :border="border" 绑定表格是否有纵向边框 -->
+      <!-- :row-key="rowKey" 绑定行数据的唯一标识 -->
+      <!-- @selection-change="selectionChange" 监听表格行选择变化事件 -->
+      <el-table
+        ref="tableRef"
+        v-bind="$attrs"
+        :data="tableData"
+        :border="border"
+        :row-key="rowKey"
+        @selection-change="selectionChange"
+      >
+        <!-- 默认插槽 -->
+        <slot></slot>
+        <!-- 循环渲染表格列 -->
+        <template v-for="item in tableColumns" :key="item">
+          <!-- selection || index 类型的列 -->
+          <el-table-column
+            v-bind="item"
+            :align="item.align?? 'center'"
+            :reserve-selection="item.type =='selection'"
+            v-if="item.type =='selection' || item.type == 'index'"
+          >
+          </el-table-column>
+          <!-- expand 类型的列，支持 tsx 语法和作用域插槽 -->
+          <el-table-column
+            v-bind="item"
+            :align="item.align?? 'center'"
+            v-if="item.type == 'expand'"
+            v-slot="scope"
+          >
+            <!-- 如果有自定义渲染函数，则使用该函数渲染 -->
+            <component :is="item.render" :row="scope.row" v-if="item.render">
+            </component>
+            <!-- 否则使用插槽渲染 -->
+            <slot :name="item.type" :row="scope.row" v-else></slot>
+          </el-table-column>
+          <!-- 其他类型的列，通过 TableColumn 组件递归渲染 -->
+          <TableColumn
+            v-if="!item.type && item.prop && item.isShow"
+            :column="item"
+          >
+            <!-- 循环渲染插槽内容 -->
+            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+              <slot :name="slot" :row="scope.row"></slot>
+            </template>
+          </TableColumn>
+        </template>
+        <!-- 插入表格最后一行之后的插槽 -->
+        <template #append>
+          <slot name="append"> </slot>
+        </template>
+        <!-- 表格无数据情况 -->
+        <template #empty>
+          <div class="table-empty">
+            <slot name="empty">
+              <div>暂无数据</div>
+            </slot>
+          </div>
+        </template>
+      </el-table>
+      <!-- 分页组件插槽 -->
+      <slot name="pagination">
+        <div class="mt-2 flex flex-row-reverse">
+          <!-- Pagination 是自定义的分页组件，当 pagination 为 true 时显示 -->
+          <Pagination
+            v-if="pagination"
+            :pageable="pageable"
+            :handleSizeChange="handleSizeChange"
+            :handleCurrentChange="handleCurrentChange"
+          />
+        </div>
+      </slot>
+    </div>
+  </MyCard>
+
+  <!-- 列设置 -->
+  <!-- ColSetting 是自定义的列设置组件，当 toolButton 为 true 时显示 -->
+  <!-- v-model:colSetting="colSetting" 双向绑定列设置数据 -->
+  <ColSetting v-if="toolButton" ref="colRef" v-model:colSetting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+// 导入 Vue 相关的函数
+import { ref, watch, computed, provide, onMounted } from 'vue'
+// 导入自定义的表格相关 Hooks
+import { useTable } from '@/hooks/useTable'
+// 导入响应式断点类型
+import { BreakPoint } from '@/components/Grid/interface'
+// 导入表格列配置项接口
+import { ColumnProps } from '@/components/ProTable/interface'
+// 导入 Element Plus 的表格组件类型和属性接口
+import { ElTable, TableProps } from 'element-plus'
+// 导入 Element Plus 的图标组件
+import { Refresh, Printer, Operation, Search } from '@element-plus/icons-vue'
+// 导入一些工具函数
+import {
+  filterEnum,
+  formatValue,
+  handleProp,
+  handleRowAccordingToProp
+} from '@/utils/util'
+// 导入自定义的搜索表单组件
+import SearchForm from '@/components/SearchForm/index.vue'
+// 导入自定义的分页组件
+import Pagination from './components/Pagination.vue'
+// 导入自定义的列设置组件
+import ColSetting from './components/ColSetting.vue'
+// 导入自定义的表格列渲染组件
+import TableColumn from './components/TableColumn.vue'
+// 导入自定义的表格多选 Hooks
+import { useSelection } from '@/hooks/useSelection'
+// import printJS from "print-js";
+
+// 定义搜索表单组件的引用
+const searchForm = ref()
+
+// 定义 ProTable 组件的属性接口，继承自 TableProps 并去除 data 属性
+interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
+  // 列配置项数组
+  columns: ColumnProps[]
+  // 请求表格数据的 API 函数，必传
+  requestApi: (params: any) => Promise<any>
+  // 是否自动请求数据，可选
+  requestAuto?: boolean
+  // 返回数据的回调函数，可对数据进行处理，非必传
+  dataCallback?: (data: any) => any
+  // 表格标题，目前只在打印时用到，非必传
+  title?: string
+  // 是否需要分页组件，非必传，默认为 true
+  pagination?: boolean
+  // 初始化请求参数，非必传，默认为 {}
+  initParam?: any
+  // 是否带有纵向边框，非必传，默认为 true
+  border?: boolean
+  // 是否显示表格功能按钮，非必传，默认为 true
+  toolButton?: boolean
+  // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id，非必传，默认为 id
+  rowKey?: string
+  // 表格搜索项每列占比配置，非必传，如 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+  searchCol?: number | Record<BreakPoint, number>
+}
+
+// 接受父组件参数并设置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  requestAuto: true,
+  columns: () => [],
+  pagination: true,
+  initParam: {},
+  border: true,
+  toolButton: true,
+  rowKey: 'id',
+  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 })
+})
+
+// 定义是否显示搜索模块的响应式变量
+const isShowSearch = ref(true)
+
+// 定义表格 DOM 元素的引用
+const tableRef = ref<InstanceType<typeof ElTable>>()
+
+// 使用表格多选 Hooks，获取相关的函数和数据
+const { selectionChange, selectedList, selectedListIds, isSelected } =
+  useSelection(props.rowKey)
+
+// 使用表格操作 Hooks，获取相关的函数和数据
+const {
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange
+} = useTable(
+  props.requestApi,
+  props.initParam,
+  props.pagination,
+  props.dataCallback
+)
+
+// 定义清空选中数据列表的函数
+const clearSelection = () => tableRef.value!.clearSelection()
+
+// 初始化请求，当 requestAuto 为 true 时调用 getTableList 方法
+onMounted(() => props.requestAuto && getTableList())
+
+// 监听 initParam 的变化，当变化时重新获取表格数据
+watch(() => props.initParam, getTableList, { deep: true })
+
+// 定义表格列配置的响应式变量
+const tableColumns = ref<ColumnProps[]>(props.columns)
+
+// 定义 enumMap 用于存储枚举值，通过 provide 提供给子组件
+const enumMap = ref(new Map<string, { [key: string]: any }[]>())
+provide('enumMap', enumMap)
+// 定义设置 enumMap 的函数
+const setEnumMap = async (col: ColumnProps) => {
+  if (!col.enum) return
+  // 如果 enum 是静态数据，则直接设置到 enumMap
+  if (typeof col.enum!== 'function')
+    return enumMap.value.set(col.prop!, col.enum!)
+  // 如果 enum 是异步请求函数，则请求数据后设置到 enumMap
+  const { data } = await col.enum()
+  enumMap.value.set(col.prop!, data)
+}
+
+// 定义扁平化 columns 的函数
+const flatColumnsFunc = (
+  columns: ColumnProps[],
+  flatArr: ColumnProps[] = []
+) => {
+  columns.forEach(async col => {
+    // 如果有子列，则递归扁平化子列
+    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
+    flatArr.push(col)
+
+    // 给每一项 column 添加 isShow 和 isFilterEnum 默认属性
+    col.isShow = col.isShow?? true
+    col.isFilterEnum = col.isFilterEnum?? true
+
+    // 设置 enumMap
+    setEnumMap(col)
+  })
+  // 返回过滤掉有子列的列
+  return flatArr.filter(item =>!item._children?.length)
+}
+
+// 定义扁平化后的 columns 响应式变量
+const flatColumns = ref<ColumnProps[]>()
+flatColumns.value = flatColumnsFunc(tableColumns.value)
+// 过滤出需要搜索的列配置项
+const searchColumns = flatColumns.value.filter(item => item.search?.el)
+
+// 设置搜索表单排序默认值和表单项默认值
+searchColumns.forEach((column, index) => {
+  column.search!.order = column.search!.order?? index + 2
+  if (
+    column.search?.defaultValue!== undefined &&
+    column.search?.defaultValue!== null
+  ) {
+    searchInitParam.value[column.search.key?? handleProp(column.prop!)] =
+      column.search?.defaultValue
+    searchParam.value[column.search.key?? handleProp(column.prop!)] =
+      column.search?.defaultValue
+  }
+})
+
+// 对搜索表单项进行排序
+searchColumns.sort((a, b) => a.search!.order! - b.search!.order!)
+
+// 定义列设置组件的引用
+const colRef = ref()
+// 过滤掉不需要设置显隐的列，得到列设置数据
+const colSetting = tableColumns.value!.filter(
+  item =>
+    ![
+      'selection',
+      'index',
+      'expand'
+    ].includes(item.type!) && item.prop!== 'operation'
+)
+// 定义打开列设置的函数
+const openColSetting = () => colRef.value.openColSetting()
+
+//不需要打印可以把以下方法删除（目前数据处理比较复杂 201-238）
+// 定义计算属性，处理打印数据（根据 enum 转换后台返回的值）
+const printData = computed(() => {
+  const printDataList = JSON.parse(
+    JSON.stringify(
+      selectedList.value.length? selectedList.value : tableData.value
+    )
+  )
+  // 找出需要转换数据的列
+  const needTransformCol = flatColumns.value!.filter(
+    item =>
+      (item.enum || (item.prop && item.prop.split('.').length > 1)) &&
+      item.isFilterEnum
+  )
+  needTransformCol.forEach(colItem => {
+    printDataList.forEach((tableItem: { [key: string]: any }) => {
+      tableItem[handleProp(colItem.prop!)] =
+        colItem.prop!.split('.').length > 1 &&!colItem.enum
+          ? formatValue(handleRowAccordingToProp(tableItem, colItem.prop!))
+          : filterEnum(
+            handleRowAccordingToProp(tableItem, colItem.prop!),
+            enumMap.value.get(colItem.prop!),
+            colItem.fieldNames
+          )
+      for (const key in tableItem) {
+        if (tableItem[key] === null)
+          tableItem[key] = formatValue(tableItem[key])
+      }
+    })
+  })
+  return printDataList
+})
+
+// 打印表格数据（💥 多级表头数据打印时，只能扁平化成一维数组，printJs 不支持多级表头打印）
+// const handlePrint = () => {
+// 	const header = `<div style="text-align: center"><h2>${props.title}</h2></div>`;
+// 	const gridHeaderStyle = "border: 1px solid #ebeef5;height: 45px;color: #232425;text-align: center;background-color: #fafafa;";
+// 	const gridStyle = "border: 1px solid #ebeef5;height: 40px;color: #494b4e;text-align: center";
+// 	printJS({
+// 		printable: printData.value,
+// 		header: props.title && header,
+// 		properties: flatColumns
+// 			.value!.filter(item => !["selection", "index", "expand"].includes(item.type!) && item.isShow && item.prop !== "operation")
+// 			.map((item: ColumnProps) => ({ field: handleProp(item.prop!), displayName: item.label })),
+// 		type: "json",
+// 		gridHeaderStyle,
+// 		gridStyle
+// 	});
+// };
+
+// 暴露给父组件的参数和方法
+defineExpose({
+  element: tableRef,
+  tableData,
+  searchParam,
+  pageable,
+  getTableList,
+  reset,
+  clearSelection,
+  enumMap,
+  isSelected,
+  selectedList,
+  selectedListIds
+})
+</script>

client/src/layout/components/ProTable/interface/index.ts

@@ -0,0 +1,84 @@
+// 从 "element-plus/es/components/table/src/table-column/defaults" 导入 TableColumnCtx 类型
+// TableColumnCtx 可能是 Element Plus 中表格列的上下文类型，包含了表格列的一些默认属性和方法
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+// 从 "@/components/Grid/interface" 导入 BreakPoint 和 Responsive 类型
+// BreakPoint 可能表示响应式布局中的不同断点（如 xs, sm, md, lg, xl 等）
+// Responsive 可能用于描述在不同断点下的响应式配置
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+
+// 定义一个接口 EnumProps，用于描述枚举属性
+export interface EnumProps {
+  // 选项框显示的文字，类型为字符串
+  label: string;
+  // 选项框值，可以是任意类型
+  value: any;
+  // 是否禁用此选项，可选，默认为 undefined，类型为布尔值
+  disabled?: boolean;
+  // 当 tag 为 true 时，此选择会指定 tag 显示类型，可选，默认为 undefined，类型为字符串
+  tagType?: string;
+  // 为树形选择时，可以通过 children 属性指定子选项，可选，默认为 undefined，类型为 EnumProps 数组
+  children?: EnumProps[];
+  // 允许添加任意其他属性，属性名和值的类型都为任意类型
+  [key: string]: any;
+}
+
+// 定义一个类型别名 TypeProp，其值只能是 "index"、"selection" 或 "expand" 中的一个
+export type TypeProp = "index" | "selection" | "expand";
+
+// 定义一个类型别名 SearchType，用于表示搜索框的类型
+// 可以是 "input"、"input-number" 等多种 Element Plus 组件类型
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+// 定义一个接口 SearchProps，用于描述搜索项的属性
+export type SearchProps = {
+  // 当前项搜索框的类型，类型为 SearchType
+  el: SearchType;
+  // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件，可选，默认为 undefined
+  props?: any;
+  // 当搜索项 key 不为 prop 属性时，可通过 key 指定，可选，默认为 undefined，类型为字符串
+  key?: string;
+  // 搜索项排序（从大到小），可选，默认为 undefined，类型为数字
+  order?: number;
+  // 搜索项所占用的列数，默认为 1 列，可选，默认为 undefined，类型为数字
+  span?: number;
+  // 搜索字段左侧偏移列数，可选，默认为 undefined，类型为数字
+  offset?: number;
+  // 搜索项默认值，可以是字符串、数字、布尔值或任意类型的数组，可选，默认为 undefined
+  defaultValue?: string | number | boolean | any[];
+  // 扩展为包含 BreakPoint 类型的键和 Responsive 类型的值的部分记录，用于实现响应式配置
+} & Partial<Record<BreakPoint, Responsive>>;
+
+// 定义一个接口 ColumnProps，用于描述表格列的属性
+// 扩展自 Partial<Omit<TableColumnCtx<T>, "children" | "renderHeader" | "renderCell">>，表示部分继承 TableColumnCtx 类型并去除 "children"、"renderHeader" 和 "renderCell" 属性
+export interface ColumnProps<T = any>
+  extends Partial<Omit<TableColumnCtx<T>, "children" | "renderHeader" | "renderCell">> {
+  // 是否是标签展示，可选，默认为 undefined，类型为布尔值
+  tag?: boolean;
+  // 是否显示在表格当中，可选，默认为 undefined，类型为布尔值
+  isShow?: boolean;
+  // 搜索项配置，可选，默认为 undefined，类型为 SearchProps 或 undefined
+  search?: SearchProps | undefined;
+  // 枚举类型（渲染值的字典），可以是 EnumProps 数组或一个返回 Promise<any> 的函数，可选，默认为 undefined
+  enum?: EnumProps[] | ((params?: any) => Promise<any>);
+  // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据），可选，默认为 undefined，类型为布尔值
+  isFilterEnum?: boolean;
+  // 指定 label && value 的 key 值，可选，默认为 undefined，类型为包含 label 和 value 键的对象
+  fieldNames?: { label: string; value: string };
+  // 自定义表头内容渲染（tsx语法），可选，默认为 undefined，类型为一个接受 ColumnProps 类型参数并返回任意类型的函数
+  headerRender?: (row: ColumnProps) => any;
+  // 自定义单元格内容渲染（tsx语法），可选，默认为 undefined，类型为一个接受包含 row 属性且类型为 T 的对象并返回任意类型的函数
+  render?: (scope: { row: T }) => any;
+  // 多级表头，可选，默认为 undefined，类型为 ColumnProps<T> 数组
+  _children?: ColumnProps<T>[];
+}

client/src/layout/components/ReImageVerify/index.ts

@@ -0,0 +1,12 @@
+// 从当前目录下的 src 文件夹中的 index.vue 文件导入组件
+// 这里将导入的组件命名为 reImageVerify，它应该是一个 Vue 组件
+import reImageVerify from './src/index.vue'
+
+/** 图形验证码组件 */
+// 使用具名导出的方式，将导入的组件以 ReImageVerify 这个名称导出
+// 具名导出允许在导入时指定具体要导入的内容，方便在其他文件中使用
+export const ReImageVerify = reImageVerify
+
+// 使用默认导出的方式，将导入的组件作为默认导出
+// 默认导出允许在导入时可以使用任意名称来接收该组件，通常一个文件只能有一个默认导出
+export default ReImageVerify

client/src/layout/components/ReImageVerify/src/hooks.ts

@@ -0,0 +1,133 @@
+import { ref, onMounted } from 'vue'
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+// 定义一个名为 useImageVerify 的函数，用于生成和管理图形验证码，接受图形宽度和高度作为参数，有默认值
+export const useImageVerify = (width = 120, height = 40) => {
+  // 创建一个响应式引用 domRef，用于存储 <canvas> 元素的引用
+  const domRef = ref<HTMLCanvasElement>()
+  // 创建一个响应式变量 imgCode，用于存储生成的图形验证码字符串
+  const imgCode = ref('')
+
+  // 定义一个函数 setImgCode，用于设置 imgCode 的值
+  function setImgCode(code: string) {
+    imgCode.value = code
+  }
+
+  // 定义一个函数 getImgCode，用于在 <canvas> 上绘制验证码并获取生成的验证码字符串
+  function getImgCode() {
+    // 如果 domRef 没有值（即 <canvas> 元素未挂载），则直接返回
+    if (!domRef.value) return
+    // 调用 draw 函数绘制验证码，并将返回的验证码字符串赋值给 imgCode
+    imgCode.value = draw(domRef.value, width, height)
+  }
+
+  // 在组件挂载后执行的钩子函数，调用 getImgCode 函数生成验证码
+  onMounted(() => {
+    getImgCode()
+  })
+
+  // 返回一个包含 domRef、imgCode、setImgCode 和 getImgCode 的对象，以便在其他地方使用这些变量和函数
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  }
+}
+
+// 定义一个函数 randomNum，用于生成指定范围内的随机整数
+function randomNum(min: number, max: number) {
+  // 使用 Math.random() 生成一个 0 到 1 之间的随机小数，然后通过计算得到指定范围内的整数
+  const num = Math.floor(Math.random() * (max - min) + min)
+  return num
+}
+
+// 定义一个函数 randomColor，用于生成指定范围内的随机颜色（RGB 格式）
+function randomColor(min: number, max: number) {
+  // 分别生成随机的红（r）、绿（g）、蓝（b）分量值
+  const r = randomNum(min, max)
+  const g = randomNum(min, max)
+  const b = randomNum(min, max)
+  // 返回 RGB 格式的颜色字符串
+  return `rgb(${r},${g},${b})`
+}
+
+// 定义一个函数 draw，用于在 <canvas> 元素上绘制图形验证码
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  // 初始化一个空字符串 imgCode，用于存储生成的验证码
+  let imgCode = ''
+
+  // 定义一个字符串 NUMBER_STRING，包含数字 0 到 9，用于生成验证码字符
+  const NUMBER_STRING = '0123456789'
+
+  // 获取 <canvas> 元素的 2D 绘图上下文 ctx
+  const ctx = dom.getContext('2d')
+  // 如果获取上下文失败（ctx 为 null），则直接返回空的验证码字符串
+  if (!ctx) return imgCode
+
+  // 设置绘图上下文的填充样式为随机颜色（背景色）
+  ctx.fillStyle = randomColor(180, 230)
+  // 使用填充样式绘制一个矩形，覆盖整个 <canvas> 区域，作为验证码的背景
+  ctx.fillRect(0, 0, width, height)
+  // 循环 4 次，生成 4 个验证码字符
+  for (let i = 0; i < 4; i += 1) {
+    // 从 NUMBER_STRING 中随机选取一个字符作为验证码字符
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)]
+    // 将选取的字符添加到 imgCode 字符串中
+    imgCode += text
+    // 随机生成字体大小
+    const fontSize = randomNum(18, 41)
+    // 随机生成字符的旋转角度
+    const deg = randomNum(-30, 30)
+    // 设置绘图上下文的字体样式
+    ctx.font = `${fontSize}px Simhei`
+    // 设置文本基线为顶部
+    ctx.textBaseline = 'top'
+    // 设置绘图上下文的填充样式为随机颜色（字符颜色）
+    ctx.fillStyle = randomColor(80, 150)
+    // 保存当前绘图上下文的状态
+    ctx.save()
+    // 平移绘图上下文的原点到指定位置（每个字符的起始位置）
+    ctx.translate(30 * i + 15, 15)
+    // 旋转绘图上下文指定的角度
+    ctx.rotate((deg * Math.PI) / 180)
+    // 在指定位置绘制字符
+    ctx.fillText(text, -15 + 5, -15)
+    // 恢复之前保存的绘图上下文状态
+    ctx.restore()
+  }
+  // 循环 5 次，绘制 5 条随机直线
+  for (let i = 0; i < 5; i += 1) {
+    // 开始绘制路径
+    ctx.beginPath()
+    // 设置路径的起始点为随机位置
+    ctx.moveTo(randomNum(0, width), randomNum(0, height))
+    // 设置路径的终点为随机位置
+    ctx.lineTo(randomNum(0, width), randomNum(0, height))
+    // 设置绘图上下文的描边样式为随机颜色
+    ctx.strokeStyle = randomColor(180, 230)
+    // 关闭路径
+    ctx.closePath()
+    // 绘制路径（直线）
+    ctx.stroke()
+  }
+  // 循环 41 次，绘制 41 个随机圆形
+  for (let i = 0; i < 41; i += 1) {
+    // 开始绘制路径
+    ctx.beginPath()
+    // 绘制一个圆形，圆心为随机位置，半径为 1
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI)
+    // 关闭路径
+    ctx.closePath()
+    // 设置绘图上下文的填充样式为随机颜色
+    ctx.fillStyle = randomColor(150, 200)
+    // 填充圆形
+    ctx.fill()
+  }
+  // 返回生成的验证码字符串
+  return imgCode
+}

client/src/layout/components/ReImageVerify/src/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// 导入 Vue 的 watch 函数，用于监听数据的变化
+import { watch } from 'vue'
+// 导入自定义的 useImageVerify 组合式函数
+import { useImageVerify } from './hooks'
+
+// 定义 Props 接口，用于描述组件接收的属性
+interface Props {
+  code?: string // code 属性，可选，类型为字符串
+}
+
+// 定义 Emits 接口，用于描述组件触发的事件
+interface Emits {
+  (e: 'update:code', code: string): void // 定义一个名为 'update:code' 的事件，该事件接收一个字符串类型的参数 code
+}
+
+// 使用 withDefaults 函数为组件的 props 设置默认值
+const props = withDefaults(defineProps<Props>(), {
+  code: '' // code 属性的默认值为空字符串
+})
+
+// 定义 emit 函数，用于触发组件的事件
+const emit = defineEmits<Emits>()
+
+// 从 useImageVerify 组合式函数中解构出 domRef、imgCode、setImgCode 和 getImgCode
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify()
+
+// 监听 props.code 的变化，当 props.code 变化时，调用 setImgCode 函数并传入新的值
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue)
+  }
+)
+
+// 监听 imgCode 的变化，当 imgCode 变化时，触发 'update:code' 事件并传入新的值
+watch(imgCode, newValue => {
+  emit('update:code', newValue)
+})
+
+// 暴露 getImgCode 函数，以便在组件外部可以调用
+defineExpose({ getImgCode })
+</script>
+
+<template>
+  <!-- 定义一个 canvas 元素，设置其宽度为 120，高度为 40，添加类名 cursor-pointer 使其具有指针样式，
+       绑定 ref 为 domRef，以便在脚本中访问该元素，绑定 click 事件为 getImgCode 函数 -->
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>

client/src/layout/components/SearchForm/components/SearchFormItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- 根据条件渲染不同的组件 -->
+  <component
+    v-if="column.search?.el"  <!-- 如果 column.search.el 存在，则渲染该组件 -->
+  :is="`el-${column.search.el}`"  <!-- 根据 column.search.el 的值动态渲染对应的 Element Plus 组件，例如 'el-input'、'el-select' 等 -->
+  v-bind="handleSearchProps"  <!-- 绑定处理后的搜索属性 -->
+  v-model.trim="searchParam[column.search.key?? handleProp(column.prop!)]"  <!-- 双向绑定搜索参数，使用 trim 修饰符去除首尾空格 -->
+  :data="column.search?.el === 'tree-select'? columnEnum : []"  <!-- 如果是 tree-select 组件，绑定 columnEnum 数据，否则绑定空数组 -->
+  :options="
+  ['cascader','select-v2'].includes(column.search?.el)? columnEnum : []
+  "  <!-- 如果是 cascader 或 select-v2 组件，绑定 columnEnum 数据作为选项，否则绑定空数组 -->
+  :placeholder="placeholder"  <!-- 绑定占位符文本 -->
+  :clearable="clearable"  <!-- 绑定是否可清除的属性 -->
+  range-separator="至"  <!-- 日期范围选择器的分隔符 -->
+  start-placeholder="开始时间"  <!-- 日期范围选择器开始时间的占位符 -->
+  end-placeholder="结束时间"  <!-- 日期范围选择器结束时间的占位符 -->
+  >
+  <!-- 当 column.search.el 为 'cascader' 时，渲染默认插槽内容 -->
+  <template #default="{ data }" v-if="column.search.el === 'cascader'">
+    <span>{{ data[fieldNames.label] }}</span>  <!-- 显示数据的 label 字段 -->
+  </template>
+  <!-- 当 column.search.el 为'select' 时，渲染子选项 -->
+  <template v-if="column.search.el ==='select'">
+    <component
+      :is="`el-option`"  <!-- 渲染 Element Plus 的 el-option 组件 -->
+    v-for="(col, index) in columnEnum"  <!-- 遍历 columnEnum 数据 -->
+    :key="index"  <!-- 设置唯一的 key -->
+    :label="col[fieldNames.label]"  <!-- 绑定选项的 label -->
+    :value="col[fieldNames.value]"  <!-- 绑定选项的值 -->
+    ></component>
+  </template>
+  <!-- 如果以上条件都不满足，渲染插槽内容 -->
+  <slot v-else></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+// 导入 Vue 的相关函数
+import { computed, inject, onMounted, ref } from 'vue'
+// 导入工具函数 handleProp
+import { handleProp } from '@/utils/util'
+// 导入表格列配置的类型定义
+import { ColumnProps } from '@/components/ProTable/interface'
+
+// 定义 SearchFormItem 接口，描述组件的属性
+interface SearchFormItem {
+  column: ColumnProps  // 表格列配置
+  searchParam: { [key: string]: any }  // 搜索参数对象
+}
+
+// 定义组件的 props
+const props = defineProps<SearchFormItem>()
+
+// 判断 fieldNames 设置 label && value 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.column.fieldNames?.label?? 'label',  // 如果 column.fieldNames.label 存在则使用，否则使用默认值 'label'
+    value: props.column.fieldNames?.value?? 'value'  // 如果 column.fieldNames.value 存在则使用，否则使用默认值 'value'
+  }
+})
+
+// 接收注入的 enumMap
+const enumMap = inject('enumMap', ref(new Map()))
+// 计算 columnEnum，根据 props.column.prop 从 enumMap 中获取对应的数据
+const columnEnum = computed(() => {
+  let enumData = enumMap.value.get(props.column.prop)
+  if (!enumData) return []  // 如果没有获取到数据则返回空数组
+  if (props.column.search?.el ==='select-v2' && props.column.fieldNames) {
+    enumData = enumData.map((item: { [key: string]: any }) => {
+      return {
+        ...item,
+        label: item[fieldNames.value.label],  // 重新设置 label 字段
+        value: item[fieldNames.value.value]  // 重新设置 value 字段
+      }
+    })
+  }
+  return enumData
+})
+
+// 处理透传的 searchProps(el 为 tree-select、cascader 的时候需要给下默认 label 和 value)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label
+  const value = fieldNames.value.value
+  const searchEl = props.column.search?.el
+  const searchProps = props.column.search?.props?? {}
+  let handleProps = searchProps
+  if (searchEl === 'tree-select')
+    handleProps = {
+      ...searchProps,
+      props: { label,...searchProps.props },  // 为 tree-select 组件设置 props
+      nodeKey: value
+    }
+  if (searchEl === 'cascader')
+    handleProps = {
+      ...searchProps,
+      props: { label, value,...searchProps.props }  // 为 cascader 组件设置 props
+    }
+  return handleProps
+})
+
+// 判断 placeholder
+const placeholder = computed(() => {
+  const search = props.column.search
+  return (
+    search?.props?.placeholder?? (search?.el === 'input'? '请输入' : '请选择')  // 根据不同的搜索组件类型设置占位符
+  )
+})
+
+// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
+const clearable = computed(() => {
+  const search = props.column.search
+  return (
+    search?.props?.clearable??
+    (search?.defaultValue == null || search?.defaultValue == undefined)  // 根据搜索组件的 props 或默认值判断是否显示清除按钮
+  )
+})
+</script>

client/src/layout/components/SearchForm/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <!-- MyCard 组件，可能是一个自定义的卡片组件 -->
+  <MyCard>
+    <!-- 当 columns 数组长度大于 0 时显示搜索表单 -->
+    <div class="card table-search" v-if="columns.length">
+      <!-- el-form 组件，用于创建表单 -->
+      <el-form ref="formRef" :model="searchParam">
+        <!-- Grid 组件，可能是一个用于布局的网格组件 -->
+        <Grid
+          ref="gridRef"
+          :collapsed="collapsed"
+          :gap="[20, 0]"
+          :cols="searchCol"
+        >
+          <!-- 循环渲染 GridItem 组件，每个 GridItem 对应一个搜索表单字段 -->
+          <GridItem
+            v-for="(item, index) in columns"
+            :key="item.prop"
+            v-bind="getResponsive(item)"
+            :index="index"
+          >
+            <!-- el-form-item 组件，用于创建表单字段 -->
+            <el-form-item :label="`${item.label} :`">
+              <!-- SearchFormItem 组件，用于渲染具体的搜索表单字段 -->
+              <SearchFormItem :column="item" :searchParam="searchParam" />
+            </el-form-item>
+          </GridItem>
+          <!-- 带有 suffix 标志的 GridItem 组件，用于放置操作按钮 -->
+          <GridItem suffix>
+            <div class="operation">
+              <!-- 搜索按钮，点击时调用 search 方法 -->
+              <el-button
+                class="bg-blue clickSearchBtn"
+                type="primary"
+                :icon="Search"
+                @click="search"
+              >
+                搜索
+              </el-button>
+              <!-- 重置按钮，点击时调用 reset 方法 -->
+              <el-button :icon="Delete" @click="reset">重置</el-button>
+              <!-- 展开/合并按钮，根据 collapsed 的值显示不同的文本和图标 -->
+              <el-button
+                v-if="showCollapse"
+                link
+                class="search-isOpen"
+                @click="collapsed =!collapsed"
+              >
+                {{ collapsed? '展开' : '合并' }}
+                <el-icon class="el-icon--right">
+                  <component :is="collapsed? ArrowDown : ArrowUp"></component>
+                </el-icon>
+              </el-button>
+            </div>
+          </GridItem>
+        </Grid>
+      </el-form>
+    </div>
+  </MyCard>
+</template>
+
+<script setup lang="ts" name="SearchForm">
+// 导入 Vue 相关的函数
+import { computed, onMounted, ref } from 'vue'
+// 导入 ProTable 组件的列配置接口
+import { ColumnProps } from '@/components/ProTable/interface'
+// 导入 Grid 组件的响应式断点接口
+import { BreakPoint } from '@/components/Grid/interface'
+// 导入 Element Plus 的图标组件
+import { Delete, Search, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
+// 导入 SearchFormItem 组件
+import SearchFormItem from './components/SearchFormItem.vue'
+// 导入 Grid 组件
+import Grid from '@/components/Grid/index.vue'
+// 导入 GridItem 组件
+import GridItem from '@/components/Grid/components/GridItem.vue'
+// 导入 MyCard 组件
+import MyCard from '../my-card/my-card.vue'
+
+// 定义 ProTableProps 接口，描述组件的属性
+interface ProTableProps {
+  // 搜索配置列，可选，默认值为一个空数组
+  columns?: ColumnProps[]
+  // 搜索参数，可选，默认值为一个空对象
+  searchParam?: { [key: string]: any }
+  // 搜索列的布局配置，可以是一个数字或一个根据断点设置列数的对象
+  searchCol: number | Record<BreakPoint, number>
+  // 搜索方法，必传
+  search: (params: any) => void
+  // 重置方法，必传
+  reset: (params: any) => void
+}
+
+// 使用 withDefaults 为组件属性设置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  searchParam: () => ({})
+})
+
+// 定义一个函数，用于获取搜索列的响应式设置
+const getResponsive = (item: ColumnProps) => {
+  return {
+    // 搜索列的跨度，从 item.search.span 获取，可选
+    span: item.search?.span,
+    // 搜索列的偏移量，从 item.search.offset 获取，可选，默认值为 0
+    offset: item.search?.offset?? 0,
+    // 不同断点下的响应式配置，从 item.search 中对应断点的属性获取，可选
+    xs: item.search?.xs,
+    sm: item.search?.sm,
+    md: item.search?.md,
+    lg: item.search?.lg,
+    xl: item.search?.xl
+  }
+}
+
+// 定义一个响应式变量，用于控制搜索项是否默认折叠
+const collapsed = ref(true)
+
+// 定义一个 ref，用于引用 Grid 组件
+const gridRef = ref()
+// 计算属性，获取当前的响应式断点
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint)
+
+// 计算属性，判断是否显示展开/合并按钮
+const showCollapse = computed(() => {
+  let show = false
+  // 遍历 columns 数组，计算搜索列的总宽度
+  props.columns.reduce((prev, current) => {
+    prev +=
+      (current.search![breakPoint.value]?.span?? current.search?.span?? 1) +
+      (current.search![breakPoint.value]?.offset?? current.search?.offset?? 0)
+    // 根据 searchCol 的类型判断是否显示展开/合并按钮
+    if (typeof props.searchCol!== 'number') {
+      if (prev >= props.searchCol[breakPoint.value]) show = true
+    } else {
+      if (prev > props.searchCol) show = true
+    }
+    return prev
+  }, 0)
+  return show
+})
+</script>

client/src/layout/components/SvgIcon/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <!-- SVG 图标容器，添加了 svg-icon 类用于样式设置，area-hidden="true" 用于隐藏无障碍区域 -->
+  <svg class="svg-icon" area-hidden="true">
+    <!-- use 元素用于引用外部 SVG 符号，:xlink:href 绑定了动态的图标名称 -->
+    <use :xlink:href="iconName"></use>
+  </svg>
+</template>
+
+<script setup lang="ts">
+// 从 Vue 中导入 defineProps 和 computed 函数
+import { defineProps, computed } from 'vue'
+
+// 定义组件的属性
+const props = defineProps({
+  // icon 属性，类型为字符串，是必填项
+  icon: {
+    type: String,
+    required: true
+  },
+  // size 属性，类型可以是数字或字符串，默认值为 16
+  size: {
+    type: [Number, String],
+    default: 16
+  }
+})
+
+// 计算属性，根据传入的 icon 属性生成最终的图标名称，格式为 #icon-图标名称
+const iconName = computed(() => {
+  return `#icon-${props.icon}`
+})
+// 计算属性，根据传入的 size 属性生成最终的图标大小，单位为像素
+const iconSize = computed(() => {
+  return props.size + 'px'
+})
+</script>
+
+<style lang="scss" scoped>
+// 选择器.svg-icon 用于设置 SVG 图标的样式
+.svg-icon {
+  // 设置宽度为 1em
+  width: 1em;
+  // 设置高度为 1em
+  height: 1em;
+  // 设置填充颜色为当前文本颜色
+  fill: currentColor;
+  // 设置字体大小为 iconSize 计算属性的值
+  font-size: v-bind(iconSize);
+}
+</style>

client/src/layout/components/elderListDialog/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <!-- el-dialog 是 Element Plus 中的对话框组件，用于展示选择老人的界面 -->
+  <!-- style="width: 70%" 设置对话框的宽度为父容器的 70% -->
+  <!-- v-model="dialogVisible" 双向绑定对话框的显示隐藏状态，dialogVisible 是一个响应式变量 -->
+  <!-- title="选择老人" 设置对话框的标题 -->
+  <!-- destroy-on-close 表示在对话框关闭时销毁其内容 -->
+  <el-dialog
+    style="width: 70%"
+    v-model="dialogVisible"
+    title="选择老人"
+    destroy-on-close
+  >
+    <!-- 定义一个包含表格的 div 容器 -->
+    <div class="table-box">
+      <!-- ProTable 是自定义的表格组件，用于展示用户列表 -->
+      <!-- ref="proTable" 为表格组件添加引用，方便在脚本中访问 -->
+      <!-- title="用户列表" 设置表格的标题 -->
+      <!-- :columns="columns" 绑定表格的列配置项，columns 是一个数组，包含每列的信息 -->
+      <!-- :requestApi="getTableList" 绑定数据请求方法，getTableList 用于获取表格数据 -->
+      <ProTable
+        ref="proTable"
+        title="用户列表"
+        :columns="columns"
+        :requestApi="getTableList"
+      >
+        <!-- 定义表格操作列的插槽内容 -->
+        <template #operation="scope">
+          <!-- el-popconfirm 是 Element Plus 中的弹出确认框组件 -->
+          <!-- title="Are you sure to choose this?" 设置确认框的提示信息 -->
+          <!-- @confirm="checkElder(scope.row)" 当用户确认时调用 checkElder 方法，并传递当前行的数据 -->
+          <!-- confirm-button-type="warning" 设置确认按钮的类型为警告样式 -->
+          <el-popconfirm
+            title="Are you sure to choose this?"
+            @confirm="checkElder(scope.row)"
+            confirm-button-type="warning"
+          >
+            <!-- 定义确认框的触发元素 -->
+            <template #reference>
+              <!-- el-button 是 Element Plus 中的按钮组件 -->
+              <!-- size="small" 设置按钮大小为小 -->
+              <!-- link 设置按钮为链接样式 -->
+              <!-- :icon="View" 绑定图标，View 是从 @element-plus/icons-vue 导入的图标组件 -->
+              <!-- 选择 是按钮的文本内容 -->
+              <el-button size="small" link :icon="View">选择</el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </ProTable>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="useProTable">
+// 导入 Vue 中的 ref 函数，用于创建响应式引用
+import { ref } from "vue";
+// 导入自定义表格组件 ProTable 的列配置项接口 ColumnProps
+import { ColumnProps } from "@/components/ProTable/interface";
+// 导入自定义表格组件 ProTable
+import ProTable from "@/components/ProTable/index.vue";
+// 导入 Element Plus 中的 View 图标组件
+import { View } from "@element-plus/icons-vue";
+
+// 创建一个响应式变量 dialogVisible，用于控制对话框的显示和隐藏
+const dialogVisible = ref(false);
+// 创建一个响应式变量 proTable，用于引用 ProTable 组件实例
+const proTable = ref();
+// 创建一个响应式变量 drawerProps，用于存储父组件传递过来的参数，类型为 DialogProps
+const drawerProps = ref<DialogProps>();
+
+// 定义 DialogProps 接口，用于描述父组件传递过来的参数结构，包含一个 elderApi 方法
+interface DialogProps {
+  elderApi: (params: any) => Promise<any>;
+}
+
+// 定义获取表格数据的方法 getTableList，接收当前请求参数 params
+// 在请求之前对参数进行一些操作（这里是深拷贝参数）
+// 然后调用父组件传递过来的 elderApi 方法获取数据并返回
+let getTableList = async (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params));
+  return drawerProps.value?.elderApi(newParams);
+};
+
+// 定义表格的列配置项数组 columns，每个元素是一个 ColumnProps 类型的对象，描述了每列的属性
+const columns: ColumnProps<any>[] = [
+  { prop: "rank", label: "序号", width: 55 },
+  { prop: "name", label: "姓名", search: { el: "input" } },
+  { prop: "idNum", label: "身份证号" },
+  { prop: "sex", label: "性别" },
+  { prop: "age", label: "年龄" },
+  { prop: "phone", label: "电话", search: { el: "input" } },
+  { prop: "address", label: "地址" },
+  { prop: "operation", label: "操作", width: 70 }
+];
+
+// 定义接收父组件传过来参数的方法 elderAcceptParams，接收一个 DialogProps 类型的参数 params
+// 将接收到的参数赋值给 drawerProps，并显示对话框
+const elderAcceptParams = (params: DialogProps) => {
+  drawerProps.value = params;
+  dialogVisible.value = true;
+};
+// 将 elderAcceptParams 方法暴露出去，以便父组件可以调用
+defineExpose({
+  elderAcceptParams
+});
+
+// 定义一个自定义事件发射器 emit，用于向父组件发送事件
+const emit = defineEmits<{
+  (event: "getCheckElderInfo", val: any): void
+}>();
+// 定义选择老人的方法 checkElder，接收当前行数据 row
+// 向父组件发送 "getCheckElderInfo" 事件，并传递当前行数据，然后隐藏对话框
+const checkElder = (row: any) => {
+  emit("getCheckElderInfo", row);
+  dialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped></style>

client/src/layout/components/my-card/my-card.vue

@@ -0,0 +1,30 @@
+<template>
+  <!-- 根元素 div，应用了多个类名用于设置样式和布局 -->
+  <!-- class="flex flex-col rounded card-wrap p-3" 表示使用 flex 布局，方向为列，边框圆角，应用 card-wrap 类的样式，内边距为 3 -->
+  <div class="flex flex-col rounded card-wrap p-3">
+    <!-- 条件渲染的 div，如果 title 存在（即不是 undefined 或空字符串等假值），则显示该 div -->
+    <!-- class="pb-2" 表示该元素底部外边距为 2 -->
+    <!-- v-if="title" 是 Vue 的条件渲染指令 -->
+    <div class="pb-2" v-if="title">{{ title }}</div>
+    <!-- 插槽，用于父组件插入内容，会被父组件的内容替换 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 使用 defineProps 定义组件的属性
+// 这里定义了一个名为 title 的属性，类型为可选的字符串（? 表示可选）
+defineProps<{
+  title?: string
+}>()
+</script>
+
+<style lang="scss" scoped>
+// 选择器.card-wrap 用于设置具有该类名的元素的样式
+// 这里设置了背景颜色为白色，边框为 1px 实线，颜色为 #eee，字体大小为 18px
+.card-wrap {
+  background-color: #ffffff;
+  border: 1px solid #eee;
+  font-size: 18px;
+}
+</style>

client/src/layout/components/treeDialog/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <!-- Element Plus 的对话框组件 el-dialog -->
+  <!-- style="width: 70%" 设置对话框的宽度为父容器的 70% -->
+  <!-- v-model="dialogVisible" 双向绑定对话框的显示隐藏状态，dialogVisible 为一个响应式变量 -->
+  <!-- title="选择床位" 设置对话框的标题为“选择床位” -->
+  <!-- destroy-on-close 表示在对话框关闭时销毁其中的内容 -->
+  <el-dialog
+    style="width: 70%"
+    v-model="dialogVisible"
+    title="选择床位"
+    destroy-on-close
+  >
+    <!-- Element Plus 的树状组件 el-tree -->
+    <!-- :data="data" 绑定树状结构的数据，data 是一个响应式变量 -->
+    <!-- :props="defaultProps" 配置树状结构的属性，如节点的标识、显示文本、子节点的字段等 -->
+    <!-- accordion 使树状结构以手风琴模式显示，即同一时间只有一个节点可以展开 -->
+    <!-- @node-click="checkBed" 监听节点点击事件，当点击节点时调用 checkBed 函数 -->
+    <el-tree
+      :data="data"
+      :props="defaultProps"
+      accordion
+      @node-click="checkBed"
+    />
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="useProTable">
+// 从 Vue 中导入 ref 函数，用于创建响应式引用
+import { ref } from "vue";
+// 从指定路径导入获取建筑树数据的 API 函数 getBuildTree
+import { getBuildTree } from "@/apis/bookManage";
+
+// 创建一个响应式变量 data，用于存储树状结构的数据，初始值为 undefined
+const data: any = ref();
+// 创建一个响应式变量 dialogVisible，用于控制对话框的显示和隐藏，初始值为 false
+const dialogVisible = ref(false);
+// 创建一个响应式变量 drawerProps，用于存储父组件传递过来的参数，类型为 DialogProps，初始值为 undefined
+const drawerProps = ref<DialogProps>();
+
+// 定义一个接口 DialogProps，用于描述父组件传递过来的参数的类型
+// 其中 treeApi 是一个函数，接收任意类型的参数并返回一个 Promise，Promise 的解析值为任意类型
+interface DialogProps {
+  treeApi: (params: any) => Promise<any>;
+}
+
+// 定义一个对象 defaultProps，用于配置 el-tree 组件的属性
+// id: "id" 表示节点的唯一标识字段为 "id"
+// label: "name" 表示节点显示的文本字段为 "name"
+// children: "childrenList" 表示子节点的字段为 "childrenList"
+const defaultProps = {
+  id: "id",
+  label: "name",
+  children: "childrenList"
+};
+
+// 定义一个异步函数 treeAcceptParams，用于接收父组件传递过来的参数
+const treeAcceptParams = async (params: DialogProps) => {
+  // 将父组件传递过来的参数赋值给 drawerProps
+  drawerProps.value = params;
+  // 显示对话框
+  dialogVisible.value = true;
+  // 调用 getBuildTree 函数获取树状结构的数据
+  const res: any = await getBuildTree();
+  // 将获取到的数据赋值给 data
+  data.value = res.data;
+};
+// 将 treeAcceptParams 函数暴露出去，以便父组件可以调用
+defineExpose({
+  treeAcceptParams
+});
+
+// 定义组件可以触发的自定义事件，这里定义了一个名为 "getCheckBedInfo" 的事件
+// 当触发该事件时，第二个参数为任意类型
+const emit = defineEmits<{
+  (event: "getCheckBedInfo", val: any): void
+}>();
+
+// 定义一个函数 checkBed，用于处理树状结构节点的点击事件
+const checkBed = (bed: any) => {
+  // 如果点击的节点的 level 属性值为 4
+  if (bed.level === 4) {
+    // 触发 "getCheckBedInfo" 事件，并将点击的节点数据作为参数传递给父组件
+    emit("getCheckBedInfo", bed);
+    // 隐藏对话框
+    dialogVisible.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

client/src/layout/components/upload/image/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <!-- Element Plus 的上传组件 el-upload -->
+  <!-- v-model:file-list="imageList" 双向绑定上传文件列表，imageList 是一个响应式变量 -->
+  <!-- :action="requestUrl" 设置上传文件的接口地址，requestUrl 是一个变量 -->
+  <!-- :headers="{ token: token }" 设置上传请求的头部信息，包含 token -->
+  <!-- list-type="picture-card" 设置上传文件列表的展示类型为图片卡片形式 -->
+  <!-- :before-upload="uploadBefore" 在文件上传前调用 uploadBefore 函数进行处理 -->
+  <!-- :on-error="handleError" 当文件上传失败时调用 handleError 函数 -->
+  <!-- :on-success="handleSuccess" 当文件上传成功时调用 handleSuccess 函数 -->
+  <!-- :on-preview="handlePreview" 当点击预览图片时调用 handlePreview 函数 -->
+  <!-- :on-remove="handleRemove" 当移除上传文件时调用 handleRemove 函数 -->
+  <el-upload
+    v-model:file-list="imageList"
+    :action="requestUrl"
+    :headers="{ token: token }"
+    list-type="picture-card"
+    :before-upload="uploadBefore"
+    :on-error="handleError"
+    :on-success="handleSuccess"
+    :on-preview="handlePreview"
+    :on-remove="handleRemove"
+  >
+    <!-- Element Plus 的图标组件 el-icon，展示一个加号图标 -->
+    <el-icon>
+      <Plus />
+    </el-icon>
+  </el-upload>
+
+  <!-- Element Plus 的对话框组件 el-dialog，用于展示预览图片 -->
+  <!-- v-model="dialogVisible" 双向绑定对话框的显示隐藏状态，dialogVisible 是一个响应式变量 -->
+  <el-dialog v-model="dialogVisible">
+    <!-- img 标签用于显示预览图片，w-full 可能是一个自定义的类名表示宽度占满，:src="dialogImageUrl" 绑定图片的源地址，dialogImageUrl 是一个响应式变量 -->
+    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+  </el-dialog>
+</template>
+<!--
+
+TODO 上传图片（单 / 多）使用方法
+
+// 1.导入组件
+import elderListDialog from "@/components/elderListDialog/index.vue";
+
+// 2.使用组件
+<uploadImage :uploadParams="uploadParams" @setImageData='setImageData' />
+
+// 3.定义变量和方法 single / multiple 任选一个
+ref({
+  uploadType: "single",
+  imageList: ref<UploadUserFile[]>([])
+});
+const setImageData = (url: string) => {
+  formData.value.picture = url;
+};
+
+// 4.显示单张上传的图片(多张图片时循环添加)
+// 在加载上传组件之前清空图片列表
+uploadParams.value.imageList = []
+// 添加显示上传的图片
+uploadParams.value.imageList.push({
+  uid: 0,
+  name: "0.jpeg",
+  url: formData.value.image
+});
+
+-->
+<script lang="ts" setup>
+// 导入 Vuex 的 store 实例，用于获取全局状态
+import store from "@/store";
+// 导入基础 URL 配置，可能用于拼接请求地址
+import { baseUrl } from "@/utils/http";
+// 导入 Element Plus 的消息提示组件 ElMessage，用于显示提示信息
+import { ElMessage } from "element-plus";
+// 导入 Element Plus 的加号图标组件 Plus
+import { Plus } from "@element-plus/icons-vue";
+// 导入 Vue 的相关函数，用于组件的逻辑处理
+import { defineEmits, onMounted, ref, watch } from "vue";
+// 导入 Element Plus 中上传文件相关的类型定义
+import type { UploadUserFile, ElUpload } from "element-plus";
+// 定义响应式变量 dialogImageUrl，用于存储预览图片的 URL，初始值为空字符串
+const dialogImageUrl = ref("");
+// 定义响应式变量 dialogVisible，用于控制对话框的显示和隐藏，初始值为 false
+const dialogVisible = ref(false);
+// 定义响应式变量 imageList，用于存储上传文件列表，初始值为空数组
+const imageList = ref<UploadUserFile[]>([]);
+
+// 定义组件的 props，接收父组件传递的 uploadParams 对象
+const props = defineProps({
+  uploadParams: Object
+});
+// 在组件挂载后执行的生命周期钩子函数
+onMounted(() => {
+  // 遍历父组件传递的 uploadParams 中的 imageList 数组，将其中的图片添加到本地的 imageList 中
+  props.uploadParams?.["imageList"].forEach((image: any) => {
+    imageList.value.push(image);
+  });
+});
+
+// 定义上传文件的请求地址，拼接基础 URL 和具体的接口路径
+const requestUrl = baseUrl + "file/uploadImg";
+// 从 Vuex store 中获取 token，用于请求头的认证
+const token = store.state.app.token;
+
+// 定义响应式变量 imageUrlList，用于存储上传图片的 URL 列表，初始值为空数组
+const imageUrlList = ref<any[]>([]);
+// 定义组件可以触发的自定义事件，这里定义了一个名为 "setImageData" 的事件
+const emits = defineEmits(["setImageData"]);
+// 定义一个函数 updateData，用于更新数据和触发事件
+const updateData = () => {
+  // 清空 imageUrlList
+  imageUrlList.value = [];
+  // 将 imageList 中的图片 URL 提取到 imageUrlList 中
+  imageList.value.forEach(image => imageUrlList.value.push(image.url));
+  // 定义一个响应式变量 data，用于封装图片数据
+  const data = ref<any>();
+  // 如果上传类型为单张图片
+  if (props.uploadParams?.["uploadType"] === "single") {
+    // 将第一张图片的 URL 赋值给 data
+    data.value = imageUrlList.value[0];
+  } else {
+    // 如果是多张图片，将整个 imageUrlList 赋值给 data
+    data.value = imageUrlList;
+  }
+  // 触发 "setImageData" 事件，并将封装好的图片数据传递给父组件
+  emits("setImageData", data);
+};
+
+// 监听 imageList 的变化
+watch(imageList, (value, oldValue, onCleanup) => {
+  // 如果上传类型为单张图片且 imageList 中的图片数量大于 1
+  if (props.uploadParams?.["uploadType"] === "single" && imageList.value.length > 1) {
+    // 只保留第一张图片
+    imageList.value.splice(0, 1);
+    // 更新数据
+    updateData();
+  }
+});
+
+// 定义上传文件前的处理函数 uploadBefore
+const uploadBefore = (file: any) => {
+  // 判断文件类型是否为 jpeg 或 png
+  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+  // 判断文件大小是否小于 2MB
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  // 如果文件类型不是 jpeg 或 png，显示错误提示
+  if (!isJPG) {
+    ElMessage.error("只能上传jpg/png文件！");
+  }
+  // 如果文件大小超过 2MB，显示错误提示
+  if (!isLt2M) {
+    ElMessage.error("文件大小不能超过2MB！");
+  }
+
+  // 返回文件类型和大小是否符合要求的结果
+  return isJPG && isLt2M;
+};
+
+// 定义上传失败的处理函数 handleError
+const handleError = (response: any) => {
+  // 显示上传失败的错误提示，提示内容从响应数据中获取
+  ElMessage.error(response.data.msg);
+};
+
+// 定义上传成功的处理函数 handleSuccess
+const handleSuccess = (response: any, uploadFile: any) => {
+  // 将上传成功返回的图片 URL 赋值给上传文件对象的 url 属性
+  uploadFile.url = response.data.url;
+  // 更新数据
+  updateData();
+};
+
+// 定义删除图片的处理函数 handleRemove
+const handleRemove = async (uploadFile: any) => {
+  // 过滤掉要删除的图片，更新 imageList
+  imageList.value.filter((image) => image.uid!== uploadFile.uid);
+  // 更新数据
+  updateData();
+
+  // TODO 根据【imageId : uploadFile.uid】调用删除数据库图片的接口
+};
+
+// 定义查看大图的处理函数 handlePreview
+const handlePreview = (uploadFile: any) => {
+  // 将预览图片的 URL 设置为点击的上传文件的 URL
+  dialogImageUrl.value = uploadFile.url!;
+  // 显示对话框
+  dialogVisible.value = true;
+};
+</script>

client/src/layout/components/wen-test/DynamicAdditionComponent.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <!-- 定义一个 Element Plus 的按钮，点击该按钮会触发 addNew 方法 -->
+    <el-button @click="addNew">添加组件</el-button>
+    <!-- 使用 v-for 指令遍历 componentList 数组，将数组中的每个元素渲染为一个组件 -->
+    <div v-for="(item, index) in componentList" :key="index">
+      <!-- 使用 el-component 动态添加组件 -->
+      <!-- :is="item.type" 指定要渲染的组件类型，该类型从 componentList 数组元素的 type 属性获取 -->
+      <!-- :props="item.props" 传递组件所需的 props 数据，这些数据从 componentList 数组元素的 props 属性获取 -->
+      <el-component :is="item.type" :props="item.props"></el-component>
+    </div>
+  </div>
+</template>
+
+<script>
+// 从指定路径导入 HelloWorld 组件
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  // data 函数返回组件的响应式数据
+  data() {
+    return {
+      // 定义一个空数组 componentList，用于存储要动态添加的组件对象
+      componentList: []
+    }
+  },
+  // methods 对象包含组件的方法
+  methods: {
+    // addNew 方法用于向 componentList 数组中添加一个新的组件对象
+    addNew() {
+      // 向 componentList 数组中添加一个对象
+      // type 属性指定要添加的组件类型为 HelloWorld 组件
+      // props 属性指定要传递给 HelloWorld 组件的数据，这里传递了一个 msg 属性，值为 'Hello World!'
+      this.componentList.push({
+        type: HelloWorld,
+        props: {
+          msg: 'Hello World!'
+        }
+      })
+    }
+  },
+  // components 对象用于注册组件，将 HelloWorld 组件注册到当前组件中
+  components: {
+    HelloWorld
+  }
+}
+</script>

client/src/layout/hooks/interface/index.ts

@@ -0,0 +1,42 @@
+// 定义一个名为 Table 的命名空间
+export namespace Table {
+  // 在 Table 命名空间内，定义一个接口 Pageable，用于描述分页相关的属性
+  export interface Pageable {
+    // 当前页码，类型为数字
+    pageNum: number
+    // 每页显示的数量，类型为数字
+    pageSize: number
+    // 数据的总数量，类型为数字
+    total: number
+  }
+  // 在 Table 命名空间内，定义一个接口 TableStateProps，用于描述表格相关的状态属性
+  export interface TableStateProps {
+    // 表格数据，是一个任意类型的数组
+    tableData: any[]
+    // 分页相关的属性，类型为 Pageable 接口
+    pageable: Pageable
+    // 搜索参数，是一个键值对对象，键为字符串，值为任意类型
+    searchParam: {
+      [key: string]: any
+    }
+    // 初始化的搜索参数，是一个键值对对象，键为字符串，值为任意类型
+    searchInitParam: {
+      [key: string]: any
+    }
+    // 用于获取总数的参数，是一个键值对对象，键为字符串，值为任意类型
+    totalParam: {
+      [key: string]: any
+    }
+    // 可选的图标相关属性，是一个键值对对象，键为字符串，值为任意类型，默认为 undefined
+    icon?: {
+      [key: string]: any
+    }
+  }
+}
+
+// 定义一个名为 HandleData 的命名空间
+export namespace HandleData {
+  // 在 HandleData 命名空间内，定义一个类型别名 MessageType
+  // MessageType 的值可以是空字符串，或者是'success'、'warning'、'info'、'error' 中的一个
+  export type MessageType = '' |'success' | 'warning' | 'info' | 'error'
+}

client/src/layout/hooks/useHandleData.ts

@@ -0,0 +1,52 @@
+// 从 element-plus 库中导入 ElMessageBox 和 ElMessage 组件，分别用于显示确认框和提示消息
+import { ElMessageBox, ElMessage } from 'element-plus'
+// 从 './interface' 文件中导入 HandleData 命名空间，用于获取其中定义的类型
+import { HandleData } from './interface'
+
+/**
+ * @description 操作单条数据信息(二次确认【删除、禁用、启用、重置密码】)
+ * @param {Function} api 操作数据接口的api方法(必传)
+ * @param {Object} params 携带的操作数据参数 {id,params}(必传)
+ * @param {String} message 提示信息(必传)
+ * @param {String} confirmType icon类型(不必传,默认为 warning)
+ * @return Promise
+ */
+// 定义一个泛型函数 useHandleData，P 表示 api 函数参数的类型，R 表示 api 函数返回值的类型
+export const useHandleData = <P = any, R = any>(
+  // api 是一个函数，接收类型为 P 的参数并返回一个 Promise，Promise 的解析值类型为 R
+  api: (params: P) => Promise<R>,
+  // params 是 api 函数的参数，类型与 api 函数的参数类型一致
+  params: Parameters<typeof api>[0],
+  // message 是一个字符串，用于显示确认框中的提示信息
+  message: string,
+  // confirmType 是一个字符串，类型为 HandleData.MessageType，默认值为 'warning'
+  confirmType: HandleData.MessageType = 'warning'
+) => {
+  // 返回一个 Promise
+  return new Promise((resolve, reject) => {
+    // 显示一个确认框
+    ElMessageBox.confirm(`是否${message}?`, '温馨提示', {
+      // 确认按钮的文本
+      confirmButtonText: '确定',
+      // 取消按钮的文本
+      cancelButtonText: '取消',
+      // 确认框的图标类型
+      type: confirmType,
+      // 是否可拖动
+      draggable: true
+    })
+      .then(async () => {
+        // 调用 api 函数并等待其返回结果
+        const res = await api(params)
+        // 如果结果为 falsy 值，则 reject 该 Promise
+        if (!res) return reject(false)
+        // 显示一个成功提示消息
+        ElMessage({
+          type:'success',
+          message: `${message}成功!`
+        })
+        // resolve 该 Promise，表示操作成功
+        resolve(true)
+      })
+  })
+}

client/src/layout/hooks/useIcons.ts

@@ -0,0 +1,25 @@
+// 从 '@/components/SvgIcon/index.vue' 导入 SvgIcon 组件
+import SvgIcon from '@/components/SvgIcon/index.vue'
+// 从 'vue' 导入 h 函数和 defineComponent 函数
+import { h, defineComponent } from 'vue'
+
+// 定义一个名为 useRenderIcon 的函数，它接受两个参数：iconName（字符串类型）和 attrs（可选的任意类型）
+export function useRenderIcon(iconName: string, attrs?: any) {
+  // 使用 defineComponent 函数定义一个新的组件
+  return defineComponent({
+    // 新组件的名称为 'SvgIcon'
+    name: 'SvgIcon',
+    // 定义组件的渲染函数
+    render() {
+      // 使用 h 函数创建一个 SvgIcon 组件的虚拟节点
+      // 第一个参数是要创建的组件（这里是 SvgIcon）
+      // 第二个参数是一个对象，包含要传递给 SvgIcon 组件的属性
+      // 'icon' 属性的值是传入的 iconName
+      // '...attrs' 表示将 attrs 对象中的所有属性也传递给 SvgIcon 组件
+      return h(SvgIcon, {
+        icon: iconName,
+        ...attrs
+      })
+    }
+  })
+}

client/src/layout/hooks/useSelection.ts

@@ -0,0 +1,51 @@
+import { ref, computed } from 'vue'
+
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+// 定义一个名为 useSelection 的函数，用于处理表格多选数据的操作
+// 接受一个可选参数 rowKey，默认值为 'id'，表示行数据中用于唯一标识的键名
+export const useSelection = (rowKey = 'id') => {
+  // 创建一个响应式变量 isSelected，用于表示是否选中了数据
+  // 初始值为 false，类型为 boolean
+  const isSelected = ref<boolean>(false)
+  // 创建一个响应式变量 selectedList，用于存储选中的数据列表
+  // 初始值为空数组，类型为 any[]
+  const selectedList = ref([])
+
+  // 创建一个计算属性 selectedListIds，用于获取当前选中的所有数据的 id 数组
+  // 计算属性会根据依赖项（这里是 selectedList）的变化而自动更新
+  const selectedListIds = computed((): string[] => {
+    // 初始化一个空数组 ids 用于存储 id
+    const ids: string[] = []
+    // 遍历 selectedList 中的每一项数据
+    selectedList.value.forEach(item => ids.push(item[rowKey]))
+    // 返回包含所有 id 的数组
+    return ids
+  })
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+    // 定义一个函数 selectionChange，用于处理表格多选数据的变化事件
+    // 接受一个参数 rowArr，类型为 any[]，表示当前选中的所有数据
+  const selectionChange = (rowArr: any) => {
+      // 如果选中的数据列表为空，则将 isSelected 设置为 false
+      // 否则将 isSelected 设置为 true
+      rowArr.length === 0? (isSelected.value = false) : (isSelected.value = true)
+      // 更新 selectedList 为当前选中的数据列表
+      selectedList.value = rowArr
+    }
+
+  // 返回一个包含 isSelected、selectedList、selectedListIds 和 selectionChange 的对象
+  // 以便在其他地方使用这些变量和函数来处理表格多选数据
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange
+  }
+}

client/src/layout/hooks/useTabList.ts

@@ -0,0 +1,98 @@
+// import { ref } from 'vue'
+// import { useRoute, onBeforeRouteUpdate } from 'vue-router'
+// import { useCookies } from '@vueuse/integrations/useCookies'
+// import { router } from '~/router'
+
+// export function useTabList() {
+//   const route = useRoute()
+//   const cookie = useCookies()
+
+//   const activeTab = ref(route.path)
+//   const tabList = ref([
+//     {
+//       title: '后台首页',
+//       path: '/'
+//     }
+//   ])
+
+//   // 添加标签导航
+//   function addTab(tab) {
+//     let noTab = tabList.value.findIndex((t) => t.path == tab.path) == -1
+//     if (noTab) {
+//       tabList.value.push(tab)
+//     }
+
+//     cookie.set('tabList', tabList.value)
+//   }
+
+//   // 初始化标签导航列表
+//   function initTabList() {
+//     let tbs = cookie.get('tabList')
+//     if (tbs) {
+//       tabList.value = tbs
+//     }
+//   }
+
+//   initTabList()
+
+//   onBeforeRouteUpdate((to, from) => {
+//     activeTab.value = to.path
+//     addTab({
+//       title: to.meta.title,
+//       path: to.path
+//     })
+//   })
+
+//   const changeTab = (t) => {
+//     activeTab.value = t
+//     router.push(t)
+//   }
+
+//   const removeTab = (t) => {
+//     let tabs = tabList.value
+//     let a = activeTab.value
+//     if (a == t) {
+//       tabs.forEach((tab, index) => {
+//         if (tab.path == t) {
+//           const nextTab = tabs[index + 1] || tabs[index - 1]
+//           if (nextTab) {
+//             a = nextTab.path
+//           }
+//         }
+//       })
+//     }
+
+//     activeTab.value = a
+//     tabList.value = tabList.value.filter((tab) => tab.path != t)
+
+//     cookie.set('tabList', tabList.value)
+//   }
+
+//   const handleClose = (c) => {
+//     if (c == 'clearAll') {
+//       // 切换回首页
+//       activeTab.value = '/'
+//       // 过滤只剩下首页
+//       tabList.value = [
+//         {
+//           title: '后台首页',
+//           path: '/'
+//         }
+//       ]
+//     } else if (c == 'clearOther') {
+//       // 过滤只剩下首页和当前激活
+//       tabList.value = tabList.value.filter(
+//         (tab) => tab.path == '/' || tab.path == activeTab.value
+//       )
+//     }
+//     cookie.set('tabList', tabList.value)
+//   }
+
+//   return {
+//     activeTab,
+//     tabList,
+//     changeTab,
+//     removeTab,
+//     handleClose
+//   }
+// }

client/src/layout/hooks/useTable.ts

@@ -0,0 +1,210 @@
+import { Table } from './interface'
+import { reactive, computed, toRefs } from 'vue'
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法(必传)
+ * @param {Object} initParam 获取数据初始化参数(非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页(非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法(非必传)
+ * */
+// 定义一个名为 useTable 的函数，用于封装表格页面的操作方法
+// api 是获取表格数据的 API 方法，是必传参数
+// initParam 是获取数据的初始化参数，非必传，默认值为空对象
+// isPageable 表示是否有分页功能，非必传，默认值为 true
+// dataCallBack 是对后台返回的数据进行处理的方法，非必传
+export const useTable = (
+  api: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable = true,
+  dataCallBack?: (data: any) => any
+) => {
+  // 使用 reactive 创建一个响应式的 state 对象，包含表格数据、分页数据、查询参数等
+  const state = reactive<Table.TableStateProps>({
+    // 表格数据，初始值为空数组
+    tableData: [],
+    // 分页数据，包含当前页数、每页显示条数和总条数
+    pageable: {
+      // 当前页数，初始值为 1
+      pageNum: 1,
+      // 每页显示条数，初始值为 10
+      pageSize: 10,
+      // 总条数，初始值为 0
+      total: 0
+    },
+    // 查询参数，只包括查询条件，初始值为空对象
+    searchParam: {},
+    // 初始化默认的查询参数，初始值为空对象
+    searchInitParam: {},
+    // 总参数，包含分页和查询参数，初始值为空对象
+    totalParam: {}
+  })
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+    // 定义一个计算属性 pageParam，用于获取和设置分页查询参数
+  const pageParam = computed({
+      // 获取分页查询参数
+      get: () => {
+        return {
+          pageNum: state.pageable.pageNum,
+          pageSize: state.pageable.pageSize
+        }
+      },
+      // 设置分页查询参数，这里暂时为空，可根据需要实现
+      set: (newVal: any) => { // 我是分页更新之后的值
+      }
+    })
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+    // 定义一个异步函数 getTableList，用于获取表格数据
+  const getTableList = async () => {
+      try {
+        // 先把初始化参数和分页参数放到总参数里面
+        Object.assign(
+          state.totalParam,
+          initParam,
+          isPageable? pageParam.value : {}
+        )
+        // 请求前格式化数据，如果总参数中有 consultDate 字段，则进行处理
+        if (state.totalParam.consultDate) {
+          state.totalParam.startTime = state.totalParam.consultDate[0]
+          state.totalParam.endTime = state.totalParam.consultDate[1]
+          delete state.totalParam.consultDate
+        }
+        // 调用 API 方法获取数据
+        let { data } = await api({
+          ...state.searchInitParam,
+          ...state.totalParam
+        })
+        // 如果有数据处理回调函数，则对数据进行处理
+        dataCallBack && (data = dataCallBack(data))
+        // 获取当前表格数据，如果有分页，则取 data.list，否则取 data
+        state.tableData = isPageable? data.list : data
+
+        // 从返回的数据中获取分页信息
+        const { pageNum, pageSize, total } = data
+        // 如果有分页，则更新分页信息
+        isPageable && updatePageable({ pageNum, pageSize, total })
+      } catch (error) {
+        // 如果发生错误，打印错误信息
+        console.log(error)
+      }
+    }
+
+  /**
+   * @description 更新查询参数
+   * @return void
+   * */
+    // 定义一个函数 updatedTotalParam，用于更新总参数
+  const updatedTotalParam = () => {
+      state.totalParam = {}
+      // 处理查询参数，可以给查询参数加自定义前缀操作
+      const nowSearchParam: { [key: string]: any } = {}
+      // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+      for (const key in state.searchParam) {
+        // * 某些情况下参数为 false/0 也应该携带参数
+        if (
+          state.searchParam[key] ||
+          state.searchParam[key] === false ||
+          state.searchParam[key] === 0
+        ) {
+          nowSearchParam[key] = state.searchParam[key]
+        }
+      }
+      // 将处理后的查询参数和分页参数合并到总参数中
+      Object.assign(
+        state.totalParam,
+        nowSearchParam,
+        isPageable? pageParam.value : {}
+      )
+    }
+
+  /**
+   * @description 更新分页信息
+   * @param {Object} resPageable 后台返回的分页数据
+   * @return void
+   * */
+    // 定义一个函数 updatePageable，用于更新分页信息
+  const updatePageable = (resPageable: Table.Pageable) => {
+      // 使用 Object.assign 方法将后台返回的分页数据合并到 state.pageable 中
+      Object.assign(state.pageable, resPageable)
+    }
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+    // 定义一个函数 search，用于进行表格数据查询
+  const search = () => {
+      // 将当前页数设置为 1
+      state.pageable.pageNum = 1
+      // 更新总参数
+      updatedTotalParam()
+      // 获取表格数据
+      getTableList()
+    }
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+    // 定义一个函数 reset，用于重置表格数据
+  const reset = () => {
+      // 将当前页数设置为 1
+      state.pageable.pageNum = 1
+      // 清空搜索参数
+      state.searchParam = {}
+      // 重置搜索表单时，如果有默认搜索参数，则重置为默认值
+      Object.keys(state.searchInitParam).forEach(key => {
+        state.searchParam[key] = state.searchInitParam[key]
+      })
+      // 更新总参数
+      updatedTotalParam()
+      // 获取表格数据
+      getTableList()
+    }
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+    // 定义一个函数 handleSizeChange，用于处理每页条数改变的事件
+  const handleSizeChange = (val: number) => {
+      // 将当前页数设置为 1
+      state.pageable.pageNum = 1
+      // 更新每页显示条数
+      state.pageable.pageSize = val
+      // 获取表格数据
+      getTableList()
+    }
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+    // 定义一个函数 handleCurrentChange，用于处理当前页改变的事件
+  const handleCurrentChange = (val: number) => {
+      // 更新当前页数
+      state.pageable.pageNum = val
+      // 获取表格数据
+      getTableList()
+    }
+
+  // 返回一个包含 state 的响应式引用、获取表格数据的函数、查询函数、重置函数、处理每页条数改变和当前页改变的函数以及更新总参数的函数
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  }
+}