diff --git a/README.md b/README.md
index 2a3b5a8..f7d1689 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 
-
-
 ### 特性
-💎 简单易用 - 基于 Element-plus 进行面向常见业务的封装
-📦 场景丰富 - 提供一些列面向常见业务场景基础组件
-💡 TypeScript - 提供完整 TypeScript 类型定义
-🎨 更少的代码 - 多种配置减少代码的书写
+-💎 简单易用 - 基于 Element-plus 进行面向常见业务的封装
+-📦 场景丰富 - 提供一些列面向常见业务场景基础组件
+-💡 TypeScript - 提供完整 TypeScript 类型定义
+-🎨 更少的代码 - 多种配置减少代码的书写
 
+### 发布到githubio
+- 提交代码后，登录到github 点Actions查看流水线是否构建成功
 ```js
 // 需要在使用的项目的tsconfig.json文件中添加以下
 compilerOptions：{
diff --git a/global.d.ts b/global.d.ts
index 120c661..5cd63ba 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -13,6 +13,10 @@ import TTimerBtn from './lib/timer-btn/src/index.vue'
 import TModuleForm from './lib/module-form/src/index.vue'
 import TAdaptivePage from './lib/adaptive-page/src/index.vue'
 import TDatePicker from './lib/date-picker/src/index.vue'
+import ProSearch from "./lib/proSearch/src/index.vue"
+import ProTable from "./lib/proTable/index.vue"
+import ProLayout from "./lib/proLayout/index.vue"
+import ProLoading from "./lib/proLoading/index.vue"
 // GlobalComponents for Volar
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
@@ -121,6 +125,10 @@ declare module '@vue/runtime-core' {
     TModuleForm: typeof TModuleForm
     TAdaptivePage: typeof TAdaptivePage
     TDatePicker: typeof TDatePicker
+    ProSearch: typeof ProSearch
+    ProTable: typeof ProTable
+    ProLoading: typeof ProLoading
+    ProLayout: typeof ProLayout
   }
 
   interface ComponentCustomProperties {
@@ -131,8 +139,7 @@ declare module '@vue/runtime-core' {
     $alert: typeof import('element-plus')['ElMessageBox']['alert']
     $confirm: typeof import('element-plus')['ElMessageBox']['confirm']
     $prompt: typeof import('element-plus')['ElMessageBox']['prompt']
-    $loading: typeof import('element-plus')['ElLoadingService']
+    // $loading: typeof import('element-plus')['ElLoadingService']
   }
 }
-
 export {}
diff --git a/package.json b/package.json
index 077f3b7..bb58349 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "lighting-pro",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Vue3 中基于Element-plus二次封装基础组件文档",
   "author": "lantingBoy",
   "license": "ISC",
   "private": false,
-  "main": "lib/lamp-pro.umd.cjs",
-  "module": "lib/lamp-pro.umd.cjs",
+  "main": "lib/lighting-pro.umd.cjs",
+  "module": "lib/lighting-pro.umd.cjs",
   "types": "lib/index.d.ts",
   "type": "module",
   "files": [
@@ -61,13 +61,14 @@
     "unplugin-auto-import": "^0.11.2",
     "vite": "^3.1.0",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-dts": "^1.7.3",
+    "vite-plugin-dts": "3.6.3",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vitepress": "1.0.0-alpha.75",
     "vue": "3.2.44",
     "vue-hooks-plus": "^1.8.5",
     "vue-router": "^4.1.5",
     "vue-tsc": "^0.40.4",
+    "vue3-print-nb": "^0.1.4",
     "vuedraggable": "^4.1.0"
   },
   "repository": {
@@ -87,5 +88,8 @@
     "二次封装组件",
     "封装组件",
     "components"
-  ]
+  ],
+  "dependencies": {
+    "vue-loading-overlay": "^6.0.3"
+  }
 }
diff --git a/packages/SearchForm/components/SearchFormItem.vue b/packages/SearchForm/components/SearchFormItem.vue
new file mode 100644
index 0000000..1588583
--- /dev/null
+++ b/packages/SearchForm/components/SearchFormItem.vue
@@ -0,0 +1,92 @@
+<template>
+  <component
+    :is="column.search?.render ?? `el-${column.search?.el}`"
+    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
+    v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :data="column.search?.el === 'tree-select' ? columnEnum : []"
+    :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []"
+  >
+    <template v-if="column.search?.el === 'cascader'" #default="{ data }">
+      <span>{{ data[fieldNames.label] }}</span>
+    </template>
+    <template v-if="column.search?.el === 'select'">
+      <component
+        :is="`el-option`"
+        v-for="(col, index) in columnEnum"
+        :key="index"
+        :label="col[fieldNames.label]"
+        :value="col[fieldNames.value]"
+      ></component>
+    </template>
+    <slot v-else></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+import { computed, inject, ref } from "vue";
+import { handleProp } from "@/assets/js";
+import { ColumnProps } from "@/proTable/interface";
+
+interface SearchFormItem {
+  column: ColumnProps;
+  searchParam: { [key: string]: any };
+}
+const props = defineProps<SearchFormItem>();
+
+// Re receive SearchParam
+const _searchParam = computed(() => props.searchParam);
+
+// 判断 fieldNames 设置 label && value && children 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.column.fieldNames?.label ?? "label",
+    value: props.column.fieldNames?.value ?? "value",
+    children: props.column.fieldNames?.children ?? "children"
+  };
+});
+
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject("enumMap", ref(new Map()));
+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], value: item[fieldNames.value.value] };
+    });
+  }
+  return enumData;
+});
+
+// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label;
+  const value = fieldNames.value.value;
+  const children = fieldNames.value.children;
+  const searchEl = props.column.search?.el;
+  let searchProps = props.column.search?.props ?? {};
+  if (searchEl === "tree-select") {
+    searchProps = { ...searchProps, props: { ...searchProps.props, label, children }, nodeKey: value };
+  }
+  if (searchEl === "cascader") {
+    searchProps = { ...searchProps, props: { ...searchProps.props, label, value, children } };
+  }
+  return searchProps;
+});
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.column.search;
+  if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
+    return { rangeSeparator: "至", startPlaceholder: "开始时间", endPlaceholder: "结束时间" };
+  }
+  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择");
+  return { placeholder };
+});
+
+// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
+const clearable = computed(() => {
+  const search = props.column.search;
+  return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
+});
+</script>
diff --git a/packages/SearchForm/index.vue b/packages/SearchForm/index.vue
new file mode 100644
index 0000000..129b29d
--- /dev/null
+++ b/packages/SearchForm/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div v-if="columns.length" class="card table-search">
+    <el-form ref="formRef" :model="searchParam">
+      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
+        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
+          <el-form-item>
+            <template #label>
+              <el-space :size="4">
+                <span>{{ `${item.search?.label ?? item.label}` }}</span>
+                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
+                  <i :class="'iconfont icon-yiwen'"></i>
+                </el-tooltip>
+              </el-space>
+              <span>:</span>
+            </template>
+            <SearchFormItem :column="item" :search-param="searchParam" />
+          </el-form-item>
+        </GridItem>
+        <GridItem suffix>
+          <div class="operation">
+            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
+            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
+            <el-button v-if="showCollapse" type="primary" 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>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref } from "vue";
+import { ColumnProps } from "@/proTable/interface";
+import { BreakPoint } from "@/grid/interface";
+import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import SearchFormItem from "./components/SearchFormItem.vue";
+import Grid from "@/grid/index.vue";
+import GridItem from "@/grid/components/GridItem.vue";
+
+interface ProTableProps {
+  columns?: ColumnProps[]; // 搜索配置列
+  searchParam?: { [key: string]: any }; // 搜索参数
+  searchCol: number | Record<BreakPoint, number>;
+  search: (params: any) => void; // 搜索方法
+  reset: (params: any) => void; // 重置方法
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  searchParam: () => ({})
+});
+
+// 获取响应式设置
+const getResponsive = (item: ColumnProps) => {
+  return {
+    span: item.search?.span,
+    offset: item.search?.offset ?? 0,
+    xs: item.search?.xs,
+    sm: item.search?.sm,
+    md: item.search?.md,
+    lg: item.search?.lg,
+    xl: item.search?.xl
+  };
+};
+
+// 是否默认折叠搜索项
+const collapsed = ref(true);
+
+// 获取响应式断点
+const gridRef = ref();
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+
+// 判断是否显示 展开/合并 按钮
+const showCollapse = computed(() => {
+  let show = false;
+  props.columns.reduce((prev, current) => {
+    prev +=
+      (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
+      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
+    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>
diff --git a/packages/assets/iconfont/iconfont.scss b/packages/assets/iconfont/iconfont.scss
new file mode 100644
index 0000000..4fb5acd
--- /dev/null
+++ b/packages/assets/iconfont/iconfont.scss
@@ -0,0 +1,82 @@
+@font-face {
+  font-family: "hdzkIcon"; /* Project id 4053247 */
+  src: url('iconfont.ttf?t=1683597555982') format('truetype');
+}
+
+.hdzkIcon {
+  font-family: "hdzkIcon" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow_down:before {
+  content: "\e634";
+}
+
+.icon-user:before {
+  content: "\e633";
+}
+
+.icon-org_tree:before {
+  content: "\e632";
+}
+
+.icon-org_extend:before {
+  content: "\e631";
+}
+
+.icon-anquan:before {
+  content: "\e630";
+}
+
+.icon-fenzu:before {
+  content: "\e68f";
+}
+
+.icon-daochu:before {
+  content: "\e690";
+}
+
+.icon-dongzuo:before {
+  content: "\e691";
+}
+
+.icon-kapianshitu:before {
+  content: "\e692";
+}
+
+.icon-riqi:before {
+  content: "\e693";
+}
+
+.icon-search:before {
+  content: "\e694";
+}
+
+.icon-shaixuan:before {
+  content: "\e695";
+}
+
+.icon-dayinji:before {
+  content: "\e696";
+}
+
+.icon-chongzhi:before {
+  content: "\e697";
+}
+
+.icon-shoucang:before {
+  content: "\e698";
+}
+
+.icon-liebiaoshitu:before {
+  content: "\e699";
+}
+
+.icon-weishoucang:before {
+  content: "\e69a";
+}
+
+
diff --git a/packages/assets/iconfont/iconfont.ttf b/packages/assets/iconfont/iconfont.ttf
new file mode 100644
index 0000000..cd94eef
Binary files /dev/null and b/packages/assets/iconfont/iconfont.ttf differ
diff --git a/packages/assets/iconfont/iconfont.woff b/packages/assets/iconfont/iconfont.woff
new file mode 100644
index 0000000..7fe3a0b
Binary files /dev/null and b/packages/assets/iconfont/iconfont.woff differ
diff --git a/packages/assets/iconfont/iconfont.woff2 b/packages/assets/iconfont/iconfont.woff2
new file mode 100644
index 0000000..cf50cb2
Binary files /dev/null and b/packages/assets/iconfont/iconfont.woff2 differ
diff --git a/packages/assets/images/close.png b/packages/assets/images/close.png
new file mode 100644
index 0000000..02e0c6d
Binary files /dev/null and b/packages/assets/images/close.png differ
diff --git a/packages/assets/images/notData.png b/packages/assets/images/notData.png
new file mode 100644
index 0000000..c579a78
Binary files /dev/null and b/packages/assets/images/notData.png differ
diff --git a/packages/assets/js/index.ts b/packages/assets/js/index.ts
new file mode 100644
index 0000000..b750481
--- /dev/null
+++ b/packages/assets/js/index.ts
@@ -0,0 +1,89 @@
+import { FieldNamesProps } from "@/proTable/interface";
+
+/**
+ * @description:  是否为数组
+ */
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+/**
+ * @description 格式化表格单元格默认值 (el-table-column)
+ * @param {Number} row 行
+ * @param {Number} col 列
+ * @param {*} callValue 当前单元格值
+ * @returns {String}
+ * */
+export function formatTableColumn(row: number, col: number, callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 ProTable 值为数组 || 无数据
+ * @param {*} callValue 需要处理的值
+ * @returns {String}
+ * */
+export function formatValue(callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 prop 为多级嵌套的情况，返回的数据 (列如: prop: user.name)
+ * @param {Object} row 当前行数据
+ * @param {String} prop 当前 prop
+ * @returns {*}
+ * */
+export function handleRowAccordingToProp(row: { [key: string]: any }, prop: string) {
+  if (!prop.includes(".")) return row[prop] ?? "--";
+  prop.split(".").forEach(item => (row = row[item] ?? "--"));
+  return row;
+}
+
+/**
+ * @description 处理 prop，当 prop 为多级嵌套时 ==> 返回最后一级 prop
+ * @param {String} prop 当前 prop
+ * @returns {String}
+ * */
+export function handleProp(prop: string) {
+  const propArr = prop.split(".");
+  if (propArr.length == 1) return prop;
+  return propArr[propArr.length - 1];
+}
+
+/**
+ * @description 根据枚举列表查询当需要的数据（如果指定了 label 和 value 的 key值，会自动识别格式化）
+ * @param {String} callValue 当前单元格值
+ * @param {Array} enumData 字典列表
+ * @param {Array} fieldNames label && value && children 的 key 值
+ * @param {String} type 过滤类型（目前只有 tag）
+ * @returns {String}
+ * */
+export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNamesProps, type?: "tag") {
+  const value = fieldNames?.value ?? "value";
+  const label = fieldNames?.label ?? "label";
+  const children = fieldNames?.children ?? "children";
+  let filterData: { [key: string]: any } = {};
+  // 判断 enumData 是否为数组
+  if (Array.isArray(enumData)) filterData = findItemNested(enumData, callValue, value, children);
+  // 判断是否输出的结果为 tag 类型
+  if (type == "tag") {
+    return filterData?.tagType ? filterData.tagType : "";
+  } else {
+    return filterData ? filterData[label] : "--";
+  }
+}
+
+/**
+ * @description 递归查找 callValue 对应的 enum 值
+ * */
+export function findItemNested(enumData: any, callValue: any, value: string, children: string) {
+  return enumData.reduce((accumulator: any, current: any) => {
+    if (accumulator) return accumulator;
+    if (current[value] === callValue) return current;
+    if (current[children]) return findItemNested(current[children], callValue, value, children);
+  }, null);
+}
diff --git a/packages/assets/logo.png b/packages/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/packages/assets/logo.png differ
diff --git a/packages/components.d.ts b/packages/components.d.ts
index 614f8c5..8a9fa8d 100644
--- a/packages/components.d.ts
+++ b/packages/components.d.ts
@@ -13,7 +13,10 @@ import TTimerBtn from './timer-btn/src/index.vue'
 import TModuleForm from './module-form/src/index.vue'
 import TAdaptivePage from './adaptive-page/src/index.vue'
 import TDatePicker from './date-picker/src/index.vue'
-
+import ProSearch from './proSearch/src/index.vue'
+import ProTable from './proTable/index.vue'
+import proLoading from './proLoading/index.vue'
+import proLayout from './proLayout/index.vue'
 declare module 'vue' {
   export interface GlobalComponents {
     TLayoutPage: typeof TLayoutPage
@@ -29,6 +32,10 @@ declare module 'vue' {
     TTimerBtn: typeof TTimerBtn
     TModuleForm: typeof TModuleForm
     TAdaptivePage: typeof TAdaptivePage
-    TDatePicker: typeof TDatePicker
+    TDatePicker: typeof TDatePicker,
+    ProSearch: typeof ProSearch
+    ProTable: typeof ProTable
+    ProLoading: typeof proLoading
+    proLayout: typeof proLayout
   }
 }
\ No newline at end of file
diff --git a/packages/grid/components/GridItem.vue b/packages/grid/components/GridItem.vue
new file mode 100644
index 0000000..c506cce
--- /dev/null
+++ b/packages/grid/components/GridItem.vue
@@ -0,0 +1,68 @@
+<template>
+  <div v-show="isShow" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
+import { BreakPoint, Responsive } from "../interface/index";
+
+type Props = {
+  offset?: number;
+  span?: number;
+  suffix?: boolean;
+  xs?: Responsive;
+  sm?: Responsive;
+  md?: Responsive;
+  lg?: Responsive;
+  xl?: Responsive;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+});
+
+const attrs = useAttrs() as { index: string };
+const isShow = ref(true);
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
+const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+watch(
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
+    }
+  },
+  { immediate: true }
+);
+
+const gap = inject("gap", 0);
+const cols = inject("cols", ref(4));
+const style = computed(() => {
+  let span = props[breakPoint.value]?.span ?? props.span;
+  let offset = props[breakPoint.value]?.offset ?? props.offset;
+  if (props.suffix) {
+    return {
+      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnEnd: `span ${span + offset}`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  } else {
+    return {
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
+      }`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  }
+});
+</script>
diff --git a/packages/grid/index.vue b/packages/grid/index.vue
new file mode 100644
index 0000000..38200f4
--- /dev/null
+++ b/packages/grid/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from "vue";
+import type { BreakPoint } from "./interface/index";
+
+type Props = {
+  cols?: number | Record<BreakPoint, number>;
+  collapsed?: boolean;
+  collapsedRows?: number;
+  gap?: [number, number] | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  collapsed: false,
+  collapsedRows: 1,
+  gap: 0
+});
+
+onBeforeMount(() => props.collapsed && findIndex());
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", resize);
+});
+onDeactivated(() => {
+  window.removeEventListener("resize", resize);
+});
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+  let width = (e.target as Window).innerWidth;
+  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 间距
+provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>("xl");
+provide("breakPoint", breakPoint);
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1);
+provide("shouldHiddenIndex", hiddenIndex);
+
+// 注入 cols
+const gridCols = computed(() => {
+  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
+  return props.cols;
+});
+provide("cols", gridCols);
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!();
+
+const findIndex = () => {
+  let fields: VNodeArrayChildren = [];
+  let suffix: VNode | null = null;
+  slots.forEach((slot: any) => {
+    // suffix
+    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+    // slot children
+    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
+  });
+
+  // 计算 suffix 所占用的列
+  let suffixCols = 0;
+  if (suffix) {
+    suffixCols =
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).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 (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+        hiddenIndex.value = index;
+        find = true;
+        throw "find it";
+      }
+      return prev;
+    }, 0);
+    if (!find) hiddenIndex.value = -1;
+  } catch (e) {
+    // console.warn(e);
+  }
+};
+
+// 断点变化时执行 findIndex
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex();
+  }
+);
+
+// 监听 collapsed
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex();
+    hiddenIndex.value = -1;
+  }
+);
+
+// 设置间距
+const gridGap = 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";
+});
+
+// 设置 style
+const style = computed(() => {
+  return {
+    display: "grid",
+    gridGap: gridGap.value,
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+  };
+});
+
+defineExpose({ breakPoint });
+</script>
diff --git a/packages/grid/interface/index.ts b/packages/grid/interface/index.ts
new file mode 100644
index 0000000..a0beff2
--- /dev/null
+++ b/packages/grid/interface/index.ts
@@ -0,0 +1,6 @@
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Responsive = {
+  span?: number;
+  offset?: number;
+};
diff --git a/packages/hooks/os/index.ts b/packages/hooks/os/index.ts
index 5e9808e..8742793 100644
--- a/packages/hooks/os/index.ts
+++ b/packages/hooks/os/index.ts
@@ -1,13 +1,13 @@
-const ua = navigator.userAgent;
-const isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;
-const isIos = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-const isFs = !!navigator.userAgent.toLocaleLowerCase().includes('lark');
+const ua = typeof navigator !== 'undefined'? navigator.userAgent : null;
+const isAndroid = ua?ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1:false;
+const isIos = ua? !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/):false;
+const isFs = ua?!!navigator.userAgent.toLocaleLowerCase().includes('lark'):false;
 
 const isPc = (): boolean => {
 	const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
 	let flag = true;
 	for (let v = 0; v < Agents.length; v++) {
-		if (ua.indexOf(Agents[v]) > 0) {
+		if (ua&&ua.indexOf(Agents[v]) > 0) {
 			flag = false;
 			break;
 		}
diff --git a/packages/hooks/useSelection/index.ts b/packages/hooks/useSelection/index.ts
new file mode 100644
index 0000000..5cdce57
--- /dev/null
+++ b/packages/hooks/useSelection/index.ts
@@ -0,0 +1,34 @@
+import { ref, computed } from "vue";
+
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useSelection = (rowKey: string = "id") => {
+  const isSelected = ref<boolean>(false);
+  const selectedList = ref<{ [key: string]: any }[]>([]);
+
+  // 当前选中的所有 ids 数组
+  const selectedListIds = computed((): string[] => {
+    let ids: string[] = [];
+    selectedList.value.forEach(item => ids.push(item[rowKey]));
+    return ids;
+  });
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+  const selectionChange = (rowArr: { [key: string]: any }[]) => {
+    rowArr.length ? (isSelected.value = true) : (isSelected.value = false);
+    selectedList.value = rowArr;
+  };
+
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange
+  };
+};
diff --git a/packages/hooks/useTable/index.ts b/packages/hooks/useTable/index.ts
new file mode 100644
index 0000000..6fb3412
--- /dev/null
+++ b/packages/hooks/useTable/index.ts
@@ -0,0 +1,178 @@
+import { reactive, computed, toRefs } from "vue";
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+
+export namespace Table {
+    export interface Pageable {
+      current: number;
+      size: number;
+      total: number;
+    }
+    export interface StateProps {
+      tableData: any[];
+      pageable: Pageable;
+      searchParam: {
+        [key: string]: any;
+      };
+      searchInitParam: {
+        [key: string]: any;
+      };
+      totalParam: {
+        [key: string]: any;
+      };
+      icon?: {
+        [key: string]: any;
+      };
+    }
+  }
+  
+export const useTable = (
+  api?: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable: boolean = true,
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      current: 1,
+      // 每页显示条数
+      size: 10,
+      // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    // 总参数(包含分页和查询参数)
+    totalParam: {}
+  });
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        current: state.pageable.current,
+        size: state.pageable.size
+      };
+    },
+    set: (newVal: any) => {
+      console.log("我是分页更新之后的值", newVal);
+    }
+  });
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    if (!api) return;
+    try {
+      // 先把初始化参数和分页参数放到总参数里面
+      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
+      let { data } = await api({ ...state.searchInitParam, ...state.totalParam });
+      dataCallBack && (data = dataCallBack(data));
+      state.tableData = isPageable ? data.records : data;
+      // 解构后台返回的分页数据 (如果有分页更新分页信息)
+      if (isPageable) {
+        const { current, size, total } = data;
+        updatePageable({  current,  size, total });
+      }
+    } catch (error) {
+      requestError && requestError(error);
+    }
+  };
+
+  /**
+   * @description 更新查询参数
+   * @return void
+   * */
+  const updatedTotalParam = () => {
+    state.totalParam = {};
+    // 处理查询参数，可以给查询参数加自定义前缀操作
+    let nowSearchParam: Table.StateProps["searchParam"] = {};
+    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+    for (let 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} pageable 后台返回的分页数据
+   * @return void
+   * */
+  const updatePageable = (pageable: Table.Pageable) => {
+    Object.assign(state.pageable, pageable);
+  };
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = () => {
+    state.pageable.current = 1;
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = () => {
+    state.pageable.current = 1;
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    state.searchParam = { ...state.searchInitParam };
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = (val: number) => {
+    state.pageable.current = 1;
+    state.pageable.size = val;
+    getTableList();
+  };
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = (val: number) => {
+    state.pageable.current = val;
+    getTableList();
+  };
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  };
+};
diff --git a/packages/index.ts b/packages/index.ts
index 7201ccc..2e6f6ef 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -16,8 +16,15 @@ import TTimerBtn from './timer-btn'
 import TModuleForm from './module-form'
 import TAdaptivePage from './adaptive-page'
 import TDatePicker from './date-picker'
+
+import ProSearch from "./proSearch"
+import ProLayout from './proLayout'
+import ProTable from './proTable'
+import ProLoading from './proLoading'
 import rs from './hooks/rs/index'
 import os from './hooks/os/index'
+
+
 // 存储组件列表
 const components: {
   [propName: string]: Component
@@ -36,6 +43,11 @@ const components: {
   TModuleForm,
   TAdaptivePage,
   TDatePicker,
+  ProSearch,
+  ProLayout,
+  ProLoading,
+  ProTable
+
 }
 // 插件声明：声明所有插件
 // 插件注册：在 Vue 项目的入口文件中，通过 ( app.use(插件) ) 进行注册
@@ -75,9 +87,23 @@ export {
   TModuleForm,
   TAdaptivePage,
   TDatePicker,
+  ProSearch,
+  ProLayout,
+  ProLoading,
+  ProTable,
   rs,
-  os
+  os,
 }
+
+export type { ColumnProps, ProTableRefProps, EnumProps } from './proTable/interface';
+export type {
+	DateList,
+	LayoutType,
+	TriggerType,
+	SearchCandidateProperties,
+	Config,
+	ColFilterConfig
+} from './proSearch/src/types';
 export default {
   // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
   install,
diff --git a/packages/proLayout/index.ts b/packages/proLayout/index.ts
new file mode 100644
index 0000000..c862be3
--- /dev/null
+++ b/packages/proLayout/index.ts
@@ -0,0 +1,5 @@
+import proLayoutC from './index.vue'
+import { withInstall } from '../withInstall'
+
+const proLayout = withInstall(proLayoutC)
+export default proLayout
diff --git a/packages/proLayout/index.vue b/packages/proLayout/index.vue
new file mode 100644
index 0000000..d9ec848
--- /dev/null
+++ b/packages/proLayout/index.vue
@@ -0,0 +1,27 @@
+<template>
+	<div class="s_page_layout">
+		<Loading :loading="props.loading" :fullpage="props.fullPage"></Loading>
+		<slot></slot>
+	</div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import Loading from '../proLoading/index.vue';
+const data = defineProps<{ loading?: boolean; fullPage?: boolean }>();
+const props = computed(() => data);
+</script>
+<script lang="ts">
+export default {
+	name: 'PageLayout'
+};
+</script>
+
+<style lang="scss" >
+.s_page_layout {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+</style>
diff --git a/packages/proLoading/index.ts b/packages/proLoading/index.ts
new file mode 100644
index 0000000..e932896
--- /dev/null
+++ b/packages/proLoading/index.ts
@@ -0,0 +1,5 @@
+import proLoadingC from './index.vue'
+import { withInstall } from '../withInstall'
+
+const proLoading = withInstall(proLoadingC)
+export default proLoading
diff --git a/packages/proLoading/index.vue b/packages/proLoading/index.vue
new file mode 100644
index 0000000..1077e4b
--- /dev/null
+++ b/packages/proLoading/index.vue
@@ -0,0 +1,29 @@
+<template>
+	<loadingComp
+		v-model:active="props.loading"
+		loader="spinner"
+		:is-full-page="props.fullpage"
+		color="rgb(30,143,160)"
+		background="rgb(75,75,75)"
+		:width="50"
+		:height="50"
+	/>
+</template>
+
+<script setup lang="ts" name="ProLoading">
+import { computed } from 'vue';
+import loadingComp from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/css/index.css';
+
+interface LoadingProps {
+	loading: boolean;
+	fullpage: boolean;
+}
+const data = withDefaults(defineProps<LoadingProps>(), {
+	loading: false,
+	fullpage: true
+});
+
+const props = computed(() => data);
+</script>
+
diff --git a/packages/proSearch/index.ts b/packages/proSearch/index.ts
new file mode 100644
index 0000000..4c3e175
--- /dev/null
+++ b/packages/proSearch/index.ts
@@ -0,0 +1,5 @@
+import Index from './src/index.vue'
+import { withInstall } from '../withInstall'
+
+const ProSearch = withInstall(Index)
+export default ProSearch
diff --git a/packages/proSearch/src/ActionCandidate/index.vue b/packages/proSearch/src/ActionCandidate/index.vue
new file mode 100644
index 0000000..1b53227
--- /dev/null
+++ b/packages/proSearch/src/ActionCandidate/index.vue
@@ -0,0 +1,257 @@
+<template>
+	<div class="s_candidate" style="margin-right: 10px">
+		<el-popover
+			placement="bottom-start"
+			:width="100"
+			:popper-style="{ padding: '5px 0' }"
+			trigger="click"
+			:show-arrow="false"
+			ref="parentPopRef"
+			:disabled="candidateList.length === 0"
+		>
+			<template #reference>
+				<div class="collect s_item" @click="defaultEmit">
+					<i class="hdzkIcon" :class="icon"></i>
+					<span>{{ props.title }}</span>
+				</div>
+			</template>
+			<div
+				v-for="(candidate, i) in transFormData(candidateList)"
+				:key="candidate.label"
+				class="s_itemList"
+				:class="{
+					tree_border: mode !== 'flat',
+					flat_border: mode === 'flat' && candidate.genre !== calculateGenre(transFormData(candidateList), i)
+				}"
+			>
+				<p
+					v-if="
+						mode === 'flat' && candidate.genre && (candidate.genre !== calculateGenre(transFormData(candidateList), i) || i === 0)
+					"
+					class="title"
+				>
+					{{ getCandidateTitle(candidate.genre) }}
+				</p>
+				<el-popover
+					:popper-style="{ padding: '5px 0' }"
+					trigger="click"
+					placement="right-start"
+					:disabled="!candidate?.children?.length"
+					ref="subPopRef"
+					:show-arrow="false"
+				>
+					<template #reference>
+						<div :class="['menu', 'flx-align-center', mode === 'flat' && 'flat-menu']" @click.stop="selectFilter(candidate)">
+							<div class="flx-align-center">
+								<div class="selectText">
+									<span :class="{ selected_text: candidate.selected }">
+										{{ candidate.label }}{{ candidate?.children?.length ? `(${candidate?.children?.length})` : '' }}</span
+									>
+
+									<span v-if="candidate.selected">
+										<el-icon class="selectIcon"><Select /></el-icon>
+									</span>
+								</div>
+							</div>
+							<el-icon v-if="candidate?.children?.length">
+								<ArrowRight />
+							</el-icon>
+						</div>
+					</template>
+
+					<div class="menu flx-align-center" v-for="(sub, k) in candidate.children" :key="k" @click.stop="selectFilter(sub)">
+						<span :class="{ selected_text: sub.selected }"> {{ sub.label }}</span>
+						<span v-if="sub.selected">
+							<el-icon class="selectIcon"><Select /></el-icon>
+						</span>
+					</div>
+				</el-popover>
+			</div>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts" name="ActionCandidate">
+import { DataStructure, SearchCandidateProperties } from '../types';
+import { ref } from 'vue';
+
+import { PopoverInstance } from 'element-plus';
+const props = withDefaults(
+	defineProps<{ candidateList?: SearchCandidateProperties[]; title?: string; icon?: string; mode?: DataStructure }>(),
+	{
+		candidateList: () => [],
+		icon: 'icon-shaixuan',
+		title: '筛选',
+		mode: 'flat'
+	}
+);
+
+const emits = defineEmits(['change-filter', 'remove-filter', 'default-emit', 'trigger-condition']);
+const parentPopRef = ref<PopoverInstance | null>(null);
+const subPopRef = ref<PopoverInstance | null>(null);
+// 递归实现树形结构扁平化;
+const transFormData = (source: SearchCandidateProperties[]): SearchCandidateProperties[] => {
+	if (props.mode === 'flat') {
+		let res: SearchCandidateProperties[] = [];
+		source?.forEach(el => {
+			if (el.genre && el.children) {
+				el.children.forEach((element: SearchCandidateProperties) => {
+					element.genre = el.genre;
+				});
+			}
+			res.push(el);
+			el.children && res.push(...transFormData(el.children));
+		});
+		return res.filter(item => !item.hasOwnProperty('children'));
+	}
+	return source;
+};
+function calculateGenre(source: any, index: number) {
+	return index > 0 ? source[index - 1].genre : source[0].genre;
+}
+
+/** 获取筛选项对应label */
+const getCandidateTitle = (genre: string) => {
+	return props.candidateList?.find(item => item.genre === genre)?.label;
+};
+
+function defaultEmit():void {
+	if (!props.candidateList?.length) {
+		emits('default-emit');
+	}
+}
+function selectFilter(sub: SearchCandidateProperties):void {
+	if (sub.type === 'trigger') {
+		emits('trigger-condition');
+		parentPopRef.value?.hide();
+		return;
+	}
+	if (sub.children?.length) {
+		return;
+	}
+	if (parentPopRef.value) {
+		parentPopRef.value?.hide();
+	}
+	if (sub.selected) {
+		// sub.selected = false;
+
+		// invertSelection(sub);
+		emits('remove-filter', sub);
+		return;
+	}
+	const parentCandidate = props.candidateList?.find(item => item.children?.includes(sub));
+	if (parentCandidate?.children) {
+		parentCandidate?.children.forEach((item: any) => (item.selected = false));
+	}
+	// props.candidateList.forEach(item => {
+	// 	if (item.genre === sub.genre) {
+	// 		item.selected = false;
+	// 	}
+	// });
+	emits('change-filter', {
+		icon: props.icon,
+		query: sub.genre ?? parentCandidate?.genre,
+		label: sub.label,
+		value: sub.value,
+		selected: false
+	});
+	if (subPopRef.value) {
+		for (let valueKey in subPopRef.value) {
+			subPopRef.value[valueKey as keyof typeof subPopRef.value].hide();
+		}
+	}
+	sub.selected = true;
+}
+// 反选已移除查询条件
+function invertSelection(condition: SearchCandidateProperties):void {
+	props.candidateList?.forEach(item => {
+		if (item.label === condition.label) {
+			item.selected = !item.selected;
+		} else {
+			item.children?.forEach((child: SearchCandidateProperties) => {
+				if (child.label === condition.label) {
+					child.selected = !child.selected;
+				} else {
+					if (child.genre === (condition.genre ?? condition.query)) {
+						child.selected = false;
+					}
+				}
+			});
+			// const existItem = item.children?.find(child => child.label === condition.label);
+			// if (existItem) {
+			// 	// existItem.selected = !existItem.selected;
+			// }
+		}
+	});
+}
+
+// 反选所有查询条件
+function resetAllRules():void {
+	if (props.candidateList.length > 0) {
+		props.candidateList.forEach(item => {
+			if (item.hasOwnProperty('children')) {
+				item.children?.forEach(el => (el.selected = false));
+			} else {
+				item.selected = false;
+			}
+		});
+	}
+}
+
+const init = () => {
+	// 初始化将所有children的selected置为false
+	props.candidateList.forEach(item => {
+		item.children?.forEach(el => (el.selected = false));
+	});
+};
+
+init();
+
+defineExpose({
+	invertSelection,
+	selectFilter,
+	resetAllRules
+});
+</script>
+
+<style lang="scss">
+.s_itemList {
+	position: relative;
+	padding-top: 2px;
+	cursor: pointer;
+	.title {
+		cursor: default;
+		padding: 2px 5px;
+		font-weight: 600;
+	}
+	.flat-menu {
+		padding-left: 10px;
+	}
+}
+.flx-align-center {
+	justify-content: space-between;
+	padding: 5px 0;
+	cursor: pointer;
+	&:hover {
+		background: #e9ecef;
+	}
+}
+.menu {
+	padding: 2px 5px;
+}
+.flat_border {
+	border-top: 1px solid #cccccc;
+}
+.selected_text,
+.selectIcon {
+	font-weight: 700;
+	color: #089390;
+}
+.tree_border {
+	border-bottom: 1px solid #cccccc;
+	&:last-child {
+		border-bottom: none;
+	}
+}
+</style>
+../../types../types
\ No newline at end of file
diff --git a/packages/proSearch/src/Colfilter/index.vue b/packages/proSearch/src/Colfilter/index.vue
new file mode 100644
index 0000000..f431b60
--- /dev/null
+++ b/packages/proSearch/src/Colfilter/index.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type Node from 'element-plus/es/components/tree/src/model/node';
+import type { AllowDropType } from 'element-plus/es/components/tree/src/tree.type';
+
+import { ColFilterConfig } from '../types';
+
+const props = withDefaults(
+	defineProps<{
+		config?: ColFilterConfig;
+	}>(),
+	{}
+);
+
+const emits = defineEmits<{
+	(e: 'confirm'): void;
+}>();
+
+const finalConfig = computed(() => props.config || {});
+
+const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType):any => {
+	if (!draggingNode || !draggingNode.id || !dropNode || !draggingNode.nextSibling || !dropNode.id || !draggingNode.nextSibling.id)
+		return;
+	if (draggingNode.data.disabled || dropNode.data.disabled) return;
+	if (type === 'inner') return;
+	if (draggingNode.nextSibling === undefined) {
+		return type === 'prev';
+	} else if (dropNode.nextSibling === undefined) {
+		return type === 'next';
+	} else if (draggingNode.nextSibling.id !== dropNode.id) {
+		return type === 'prev';
+	} else {
+		return type === 'next';
+	}
+
+	return true;
+};
+const allowDrag = ():boolean => {
+	return true;
+};
+
+const confirm = () => {
+	emits('confirm');
+};
+</script>
+
+<template>
+	<div class="viewSwitcher tableFilter">
+		<el-popover placement="bottom" title="列设置(可拖拽)" :width="260" trigger="click">
+			<template #reference>
+				<div class="hoverScale tableFilter-icon">
+					<i class="iconfont icon-shaixuan1" title="表格筛选"></i>
+				</div>
+			</template>
+			<div class="tableFilter-list">
+				<el-tree
+					class="tableFilter-list-tree"
+					:allow-drop="allowDrop"
+					:allow-drag="allowDrag"
+					:data="finalConfig.columns"
+					draggable
+					default-expand-all
+					node-key="prop"
+				>
+					<template #default="{ node, data }">
+						<div class="list-tree-default">
+							<el-checkbox style="margin-right: 5px" :disabled="data.disabled" v-model="data._checked"></el-checkbox>
+							<span>{{ node.label }}</span>
+						</div>
+					</template>
+				</el-tree>
+			</div>
+			<div class="tableFilter-btn">
+				<el-button type="primary" @click="confirm">确定</el-button>
+			</div>
+			<!-- <el-table :data="finalConfig.columns" height="360px">
+				<el-table-column width="40">
+					<template #default="scope">
+						<el-checkbox
+							@change="finalConfig && finalConfig.tableFilterColChange && finalConfig.tableFilterColChange(finalConfig.columns)"
+							v-model="scope.row._checked"
+						/>
+					</template>
+				</el-table-column>
+				<el-table-column prop="label" />
+			</el-table> -->
+		</el-popover>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.tableFilter-list {
+	height: 360px;
+	overflow-y: auto;
+
+	// :deep(.el-tree.is-dragging .el-tree-node__content) {
+	// 	cursor: context-menu;
+	// }
+	.tableFilter-list-tree {
+		:deep(.el-tree-node__expand-icon) {
+			display: none;
+		}
+		.list-tree-default {
+			display: flex;
+			align-items: center;
+			padding: 0 5px;
+		}
+	}
+}
+.tableFilter-btn {
+	display: flex;
+	justify-content: center;
+	padding-top: 10px;
+	margin-top: 10px;
+	border-top: 1px solid #eeeeee;
+	:deep(.el-button) {
+		width: 100%;
+		height: 28px;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/packages/proSearch/src/Crumbs/index.vue b/packages/proSearch/src/Crumbs/index.vue
new file mode 100644
index 0000000..4091170
--- /dev/null
+++ b/packages/proSearch/src/Crumbs/index.vue
@@ -0,0 +1,107 @@
+<template>
+	<div class="s_crumbs">
+		<el-breadcrumb separator="/">
+			<template v-for="(crumb, i) in crumbs" :key="i">
+				<el-breadcrumb-item :to="crumbs.length === 1 || i === crumbs.length - 1 ? '' : { path: crumb.pathname }">
+					<template #default>
+						<div
+							style="cursor: pointer"
+							class="crumb_title"
+							:class="{
+								disabled: crumbs.length === 1 || i === crumbs.length - 1,
+								hoverColor: crumbs.length > 1 && i !== crumbs.length - 1
+							}"
+						>
+							{{ crumb.title }}
+						</div>
+					</template>
+				</el-breadcrumb-item>
+			</template>
+		</el-breadcrumb>
+	</div>
+</template>
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+const props = defineProps<{ title?: string }>();
+
+type RouteInfo = {
+	path: string;
+	title: string | undefined;
+	pathname: string;
+};
+const crumbs = ref<RouteInfo[]>([]);
+function getCrumbs() {
+	crumbs.value = JSON.parse((sessionStorage.getItem('CRUMB_LIST') as any) || '[]');
+}
+getCrumbs();
+function setCrumbs() {
+	sessionStorage.setItem('CRUMB_LIST', JSON.stringify(crumbs.value));
+}
+
+watch(
+	() => window.location.href,
+	() => {
+		if (
+			(crumbs.value && !window.location.href.startsWith(crumbs.value[0]?.path)) ||
+			window.location.href === crumbs.value[0].path ||
+			// 同一个路由地址，携带参数的情况
+			(crumbs.value &&
+				window.location.href.startsWith(crumbs.value[0]?.path) &&
+				window.location.pathname === crumbs.value[0]?.pathname)
+		) {
+			crumbs.value = [];
+		}
+		crumbs.value.forEach(item => {
+			if (item.path.startsWith(window.location.href)) {
+				return;
+			}
+		});
+
+		crumbs.value.push({ title: props.title, path: window.location.href, pathname: window.location.pathname });
+		setCrumbs();
+	},
+	{ deep: true, immediate: true }
+);
+const existIndex = crumbs.value.findIndex(
+	crumb => crumb.path === window.location.href || crumb.title === window.location.pathname
+);
+
+if (existIndex > -1 && existIndex !== 0) {
+	crumbs.value.splice(existIndex + 1);
+}
+</script>
+<script lang="ts">
+export default {
+	name: 'crumbs'
+};
+</script>
+<style lang="scss" scoped>
+.s_crumbs {
+	.hoverColor {
+		&:hover {
+			font-size: 16px !important;
+			color: #008794;
+		}
+	}
+	.el-breadcrumb {
+		.el-breadcrumb__separator {
+			margin: 0 2px;
+		}
+
+		display: flex;
+		align-items: center;
+		font-size: 16px;
+	}
+
+	display: flex;
+	.disabled {
+		font-size: 16px !important;
+		color: #8b8f8f !important;
+	}
+	.crumb_tittle {
+		margin: 0 2px;
+		font-size: 16px !important;
+		color: #333333;
+	}
+}
+</style>
diff --git a/packages/proSearch/src/DatePicker/index.vue b/packages/proSearch/src/DatePicker/index.vue
new file mode 100644
index 0000000..42585da
--- /dev/null
+++ b/packages/proSearch/src/DatePicker/index.vue
@@ -0,0 +1,171 @@
+<template>
+	<el-popover
+		class="s_date_picker"
+		:visible="parentVisible"
+		placement="bottom"
+		:width="width"
+		:popper-style="{ padding: '0', visibility: 'hidden' }"
+		trigger="click"
+		:show-arrow="false"
+	>
+		<template #reference>
+			<div class="collect s_item" @click="showPopover" v-click-outside="onClickOutside">
+				<i class="hdzkIcon icon-riqi"></i>
+				<span>{{ searchTitle }}</span>
+			</div>
+		</template>
+		<el-date-picker
+			@change="dateChange"
+			v-model="dateValue"
+			:show-arrow="false"
+			:default-value="defaultDate"
+			@calendar-change="panelChange"
+			:visible="subVisible"
+			:type="type"
+			unlink-panels
+			:offset="-50"
+			:value-format="dateFormat"
+			range-separator="至"
+			start-placeholder="起始时间"
+			end-placeholder="结束时间"
+		>
+		</el-date-picker>
+	</el-popover>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { ClickOutside as vClickOutside } from 'element-plus';
+import { DateType } from '../types';
+import dayjs from 'dayjs';
+const parentVisible = ref(false);
+const subVisible = ref(false);
+const startTime = ref('');
+const endTime = ref('');
+const date = ref('');
+const dateList = ref<any[]>([]);
+const props = withDefaults(defineProps<{ type?: DateType; dateFormat?: string; searchTitle?: string; period?: number }>(), {
+	type: 'daterange',
+	dateFormat: 'YYYY-MM-DD',
+	searchTitle: '日期'
+});
+const width:any = computed(() => (props.type === 'date' || props.type === 'datetime' ? null : 400));
+const emits = defineEmits(['change-date', 'change-filter']);
+
+const dateValue = ref<any[] | any>();
+const onClickOutside = () => {
+	parentVisible.value = false;
+
+	subVisible.value = false;
+};
+const defaultDate = ref<any | any[]>();
+function panelChange(date: any):void {
+	if (date[0] && props.period && props.period > 0) {
+		dateValue.value = ['', ''];
+		defaultDate.value = [];
+		defaultDate.value.push(date[0]);
+		defaultDate.value.push(new Date(dayjs(date[0]).add(props.period, 'day').locale('zh-cn').format()));
+
+		dateValue.value[0] = dayjs(date[0]).format(props.dateFormat);
+		dateValue.value![1] = dayjs(date[0]).add(props.period, 'day').format(props.dateFormat);
+		onClickOutside();
+	}
+}
+let flag = watch(
+	() => dateValue.value,
+	() => {
+		if (dateValue.value) {
+			const isRange = props.type.includes('range');
+			if (isRange) {
+				startTime.value = dateValue.value![0].toString();
+				endTime.value = dateValue.value![1].toString();
+			} else {
+				date.value = dateValue.value;
+			}
+			dateList.value = isRange
+				? [
+						{ query: 'startTime', value: startTime.value },
+						{ query: 'endTime', value: endTime.value }
+				  ]
+				: [{ query: 'date', value: date.value }];
+			emits('change-filter', {
+				icon: 'hdzkIcon icon-riqi',
+				label: isRange ? `${props.searchTitle}: ${startTime.value} 至 ${endTime.value}` : `${props.searchTitle}: ${date.value}`,
+				type: 'date'
+			});
+			emits('change-date');
+			onClickOutside();
+		}
+	}
+);
+function dateChange():void {
+	flag();
+	if (props.type === 'datetime') {
+		date.value = dateValue.value;
+		emits('change-date', { date: date.value });
+		onClickOutside();
+	}
+}
+function showPopover():void {
+	subVisible.value = !subVisible.value;
+	parentVisible.value = !parentVisible.value;
+}
+function addDate(date: any):void {
+	if (date.endTime && props.type.includes('range')) {
+		dateValue.value = ['', ''];
+		dateValue.value[0] = date.startTime;
+		dateValue.value![1] = date.endTime;
+	} else {
+		dateValue.value = date.startTime || date.date;
+	}
+}
+
+/** 重置value */
+function resetValue() {
+	dateValue.value = undefined;
+}
+
+defineExpose({ dateList, addDate, resetValue });
+</script>
+
+<style lang="scss" scoped>
+.s_date_picker {
+	.menu {
+		padding: 0 5px;
+	}
+	.flat_border {
+		border-top: 1px solid #cccccc;
+	}
+	.selected_text,
+	.selectIcon {
+		font-weight: 700;
+		color: #089390;
+	}
+	:deep(.el-date-editor) {
+		visibility: hidden !important;
+	}
+	:deep(.el-input__wrapper) {
+		visibility: hidden !important;
+	}
+	.timeDate {
+		position: relative;
+	}
+	.date.el-date-editor {
+		position: absolute;
+		top: 0;
+		left: 0;
+		opacity: 0;
+	}
+	.el-divider {
+		margin: 0;
+	}
+	.el-space {
+		width: 100%;
+	}
+	:deep(.dateTime) {
+		width: 170px;
+		margin-top: 5px;
+	}
+}
+</style>
+../../types../types
\ No newline at end of file
diff --git a/packages/proSearch/src/InputSearch/index.vue b/packages/proSearch/src/InputSearch/index.vue
new file mode 100644
index 0000000..48fcca1
--- /dev/null
+++ b/packages/proSearch/src/InputSearch/index.vue
@@ -0,0 +1,251 @@
+<template>
+	<div class="search_input" v-if="searchCandidates.length">
+		<div class="searchList" :class="{ showBorder: selectedQueryConditions?.length }">
+			<el-space nowrap>
+				<div class="searchItem" v-for="condition in selectedQueryConditions.slice(0, 2)" :key="condition.value">
+					<div class="typeIcon">
+						<i class="hdzkIcon" :class="condition.icon"></i>
+					</div>
+					<span class="itemText">{{ condition.label }}</span>
+					<el-icon @click="deleteCondition(condition)">
+						<Close />
+					</el-icon>
+				</div>
+				<div class="searchItem" v-if="selectedQueryConditions.length > 2">
+					<el-popover placement="bottom" width="auto" trigger="click">
+						<template #reference>
+							<div style="display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center">
+								<div class="typeIcon" style="display: flex; align-items: center; justify-content: center; height: 100%">
+									<el-icon><Plus /></el-icon>
+								</div>
+								<span class="itemText" style="text-align: center">{{ selectedQueryConditions.length - 2 }}</span>
+							</div>
+						</template>
+						<div class="search_candidate_hideItem" v-for="condition in selectedQueryConditions.slice(2)" :key="condition.value">
+							<div class="typeIcon">
+								<i class="hdzkIcon" :class="condition.icon"></i>
+							</div>
+							<div class="search_hide_item">
+								<span class="itemText">{{ condition.label }}</span>
+								<el-icon @click="deleteCondition(condition)">
+									<Close />
+								</el-icon>
+							</div>
+						</div>
+					</el-popover>
+				</div>
+			</el-space>
+		</div>
+		<el-popover placement="bottom" :visible="showPopover" :width="popoverWidth">
+			<template #reference>
+				<div>
+					<el-input
+						ref="inputEl"
+						class="searchInp"
+						:class="{ notShowShadow: searchCandidates?.length }"
+						v-model.trim="searchVal"
+						clearable
+						placeholder="搜索..."
+						:suffix-icon="Search"
+					/>
+				</div>
+			</template>
+			<div v-if="searchCandidates">
+				<div v-for="(item, i) in searchCandidates" :key="i">
+					<div class="search-results" @click="selectCondition(item)">
+						<span> {{ item.label }}</span>
+						<span class="searchVal">{{ searchVal }}</span>
+					</div>
+				</div>
+			</div>
+		</el-popover>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
+import { Search } from '@element-plus/icons-vue';
+import type { SearchCandidateProperties } from '../types';
+
+defineProps<{ searchCandidates: SearchCandidateProperties[] }>();
+const showPopover = ref(false);
+const El = document.querySelector('#app');
+const searchVal = ref('');
+const inputEl = ref<any>();
+const popoverWidth = ref(0);
+const selectedQueryConditions = ref<SearchCandidateProperties[]>([]);
+watch(searchVal, n => {
+	showPopover.value = !!n;
+	const inputWidth = inputEl.value?.ref?.clientWidth + 44;
+	if (popoverWidth.value != inputWidth) {
+		popoverWidth.value = inputWidth;
+	}
+});
+
+function closePopover() {
+	showPopover.value = false;
+}
+onMounted(() => {
+	nextTick(() => {
+		popoverWidth.value = inputEl.value?.ref?.clientWidth + 44;
+	});
+	El?.addEventListener('click', closePopover);
+});
+
+onUnmounted(() => {
+	El?.removeEventListener('click', closePopover);
+});
+
+const emits = defineEmits(['change-condition', 'invert-selection', 'reset-date', 'change-range']);
+
+// 添加查询条件
+function selectCondition(condition: SearchCandidateProperties):void {
+	const index = selectedQueryConditions.value.findIndex(item => item.query === condition.value);
+	if (index > -1) {
+		selectedQueryConditions.value.splice(index, 1);
+	}
+
+	selectedQueryConditions.value.push({
+		icon: 'icon-search',
+		query: condition.value,
+		label: condition.label + searchVal.value,
+		value: searchVal.value
+	});
+	searchVal.value = '';
+	showPopover.value = false;
+
+	emits('change-condition');
+}
+
+// 添加条件
+function addCondition(condition: SearchCandidateProperties):void {
+	if (condition.type === 'date') {
+		selectedQueryConditions.value = selectedQueryConditions.value.filter(item => item.type !== 'date');
+		selectedQueryConditions.value.push(condition);
+		return;
+	} else if (condition.type === 'dateList') {
+		selectedQueryConditions.value.push(condition);
+		return;
+	}
+	selectedQueryConditions.value.forEach((item, i) => {
+		if (item.query === condition.query) {
+			selectedQueryConditions.value.splice(i, 1);
+		}
+	});
+	selectedQueryConditions.value.push(condition);
+	emits('change-condition');
+}
+// 导出方法供其他组件使用
+function exportAddCondition(condition: SearchCandidateProperties):void {
+	if (condition.type === 'date') {
+		selectedQueryConditions.value = selectedQueryConditions.value.filter(item => item.type !== 'date');
+		selectedQueryConditions.value.push(condition);
+		return;
+	}
+	const index = selectedQueryConditions.value.findIndex(item => item.label === condition.label);
+	if (index > -1) {
+		selectedQueryConditions.value.splice(index, 1);
+	} else {
+		selectedQueryConditions.value.forEach((item, i) => {
+			if (item.query === condition.query) {
+				selectedQueryConditions.value.splice(i, 1);
+			}
+		});
+		selectedQueryConditions.value.push(condition);
+	}
+	emits('invert-selection', condition);
+	emits('change-condition');
+}
+// 删除查询条件
+// executeEmits 是否调用emits   true 不调用  false 调用
+function deleteCondition(condition: SearchCandidateProperties, executeEmits?: boolean):void {
+	if (condition.type === 'date') {
+		selectedQueryConditions.value.splice(
+			selectedQueryConditions.value.findIndex(item => item.type === 'date'),
+			1
+		);
+		// emits("reset-date", "resetDate");
+		emits('change-condition', true);
+		return;
+	}
+	if (condition.type === 'range') {
+		selectedQueryConditions.value.splice(
+			selectedQueryConditions.value.findIndex(item => item.query === condition.query),
+			1
+		);
+		// emits("reset-date", "resetDate");
+		emits('change-range', condition.query);
+		return;
+	}
+	const index = selectedQueryConditions.value.findIndex(item => item.label === condition.label);
+	index >= 0 && selectedQueryConditions.value.splice(index, 1);
+	if (executeEmits) return;
+	emits('invert-selection', condition);
+	emits('change-condition');
+}
+function resetFilterRules() :void{
+	selectedQueryConditions.value = [];
+	// emits("change-condition", selectedQueryConditions);
+	emits('change-condition', true);
+}
+defineExpose({ addCondition, deleteCondition, exportAddCondition, resetFilterRules, selectedQueryConditions });
+</script>
+<script lang="ts">
+export default {
+	name: 'InputSearch'
+};
+</script>
+<style lang="scss" scoped>
+.search-results {
+	display: flex;
+	flex-wrap: nowrap;
+	padding: 5px;
+	overflow: hidden;
+	font-weight: 500;
+	color: #1e8fa0;
+	cursor: pointer;
+	.searchVal {
+		color: #606266;
+	}
+	&:hover {
+		background-color: #eaecef;
+		border-radius: 5px;
+	}
+}
+.search_candidate_hideItem {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 20px;
+	margin: 10px 0;
+	overflow: hidden;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	color: #8f8f8f;
+	text-overflow: clip;
+	white-space: nowrap;
+	cursor: pointer;
+	background: #f8f9fa;
+	border: 1px solid #8f8f8f;
+	.itemText {
+		padding: 0 3px;
+	}
+	.search_hide_item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+	}
+	.typeIcon {
+		padding: 0 2px;
+		color: #ffffff;
+		background: #1e8fa0;
+		.hdzkIcon {
+			font-size: 14px !important;
+			color: #ffffff;
+		}
+	}
+}
+</style>
+../../types../types
\ No newline at end of file
diff --git a/packages/proSearch/src/TableActions/index.vue b/packages/proSearch/src/TableActions/index.vue
new file mode 100644
index 0000000..44b6d61
--- /dev/null
+++ b/packages/proSearch/src/TableActions/index.vue
@@ -0,0 +1,124 @@
+<template>
+	<div class="btnGroup">
+		<slot name="leftButton"></slot>
+		<el-button text bg color="#E7F2F7" v-show="tableLength">
+			<div style="font-size: 14px; color: #666666; background: #e7f2f7">
+				<span style="margin-right: 5px">{{ tableLength }}条</span>
+				<span>已选取</span>
+			</div>
+		</el-button>
+	</div>
+	<div class="table_actions">
+		<div class="config-header" v-if="tableLength || showAll">
+			<div class="tools-bar">
+				<el-button link v-print="printInfo" v-if="printAreaId">
+					<template #icon>
+						<i class="hdzkIcon icon-dayin"></i>
+					</template>
+					打印
+				</el-button>
+				<el-dropdown trigger="click" style="margin-left: 20px" v-if="showActions.actions">
+					<span class="dropdown-link">
+						<i class="hdzkIcon icon-dongzuo" style="vertical-align: middle"></i>
+						动作</span
+					>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<slot name="actions"></slot>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+				<slot name="fullActions"></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts"  name="TableActions">
+import { ref } from 'vue';
+import { OptionsIsShow } from '../types';
+import print from 'vue3-print-nb';
+
+const vPrint = print;
+const props = defineProps<{ printAreaId?: string; tableLength: number; showActions: OptionsIsShow; showAll: boolean }>();
+//打印
+const printInfo = ref({
+	id: props.printAreaId, //这里的id就是上面我们的打印区域id，实现指哪打哪
+	popTitle: '', // 打印配置页上方的标题
+	extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
+	preview: false, // 是否启动预览模式，默认是false
+
+	previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
+	zIndex: 20003, // 预览窗口的z-index，默认是20002，最好比默认值更高
+	previewBeforeOpenCallback() {
+		console.log('正在加载预览窗口！');
+	}, // 预览窗口打开之前的callback
+	previewOpenCallback() {
+		console.log('已经加载完预览窗口，预览打开了！');
+	}, // 预览窗口打开时的callback
+	beforeOpenCallback() {
+		console.log('开始打印之前！');
+	}, // 开始打印之前的callback
+	openCallback() {
+		console.log('执行打印了！');
+	}, // 调用打印时的callback
+	closeCallback() {
+		console.log('关闭了打印工具！');
+	}, // 关闭打印的callback(无法区分确认or取消)
+	clickMounted() {
+		console.log('点击v-print绑定的按钮了！');
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.table_actions {
+	box-sizing: border-box;
+	display: flex;
+	justify-content: flex-end;
+	width: 38%;
+	padding-right: 100px;
+	.config-header {
+		:deep(.el-space__item) {
+			width: 100%;
+		}
+
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 32px;
+		background: #ffffff;
+		.tools-bar {
+			display: flex;
+			flex: 1;
+			align-items: center;
+			justify-content: flex-end;
+
+			// padding-right: 30px;
+			color: #666666 !important;
+			:deep(.el-button--text) {
+				color: #666666;
+			}
+			.dropdown-link {
+				color: #666666 !important;
+				cursor: pointer;
+			}
+		}
+	}
+	:deep(.el-space__item) {
+		width: 100%;
+		margin-top: 4px !important;
+		margin-bottom: 4px !important;
+	}
+	:deep(.el-dropdown) {
+		display: flex;
+		align-items: center;
+	}
+	:deep(.el-button) {
+		&:hover {
+			background-color: #026d6b;
+		}
+	}
+}
+</style>
+../../types../types
\ No newline at end of file
diff --git a/packages/proSearch/src/index.scss b/packages/proSearch/src/index.scss
new file mode 100644
index 0000000..4c034fa
--- /dev/null
+++ b/packages/proSearch/src/index.scss
@@ -0,0 +1,376 @@
+.s_page_search {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 0 20px 10px;
+	background: #ffffff;
+	border-bottom: 1px solid #c7c7c7;
+	.hoverBack {
+		:deep(.el-button.is-link) {
+			color: #008794 !important;
+		}
+	}
+	.s_page_search_con {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		height: 33px;
+		margin-top: 8px;
+		.crumbs {
+			.hoverColor {
+				&:hover {
+					color: #008794;
+				}
+			}
+
+			display: flex;
+			.el-button.is-link {
+				margin: 0;
+				font-size: 18px;
+			}
+		}
+		.disabled {
+			font-size: 16px;
+			color: #8f8f8f;
+			.el-button.is-link {
+				color: #008794;
+
+				// font-size: 20px;
+			}
+		}
+		.search_input {
+			display: flex;
+			align-items: center;
+			width: 47%;
+			.el-tooltip__trigger {
+				flex: 1;
+			}
+		}
+	}
+	.viewSwitcher {
+		height: 100%;
+		.hdzkIcon {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 26px;
+			height: 26px;
+			font-size: 14px;
+		}
+	}
+	.hoverScale {
+		cursor: pointer;
+		transition: 0.5s;
+		&:hover {
+			background-color: #ebebeb;
+		}
+	}
+	.content {
+		position: absolute;
+
+		// top: v-bind("subMenu.top");
+		// left: v-bind("subMenu.left");
+		z-index: 9;
+		min-width: 160px;
+		padding: 10px;
+		font-size: 14px;
+		cursor: pointer;
+		background: #ffffff;
+		border: 1px solid #dee2e6;
+		box-shadow: 0 1px 4px 0 rgb(219 219 219 / 55%);
+		.contentList:hover {
+			background: #eaecef;
+		}
+		.time-btn {
+			display: flex;
+			justify-content: flex-end;
+			margin-top: 5px;
+		}
+	}
+	.notShowShadow {
+		:deep(.el-input__wrapper) {
+			border-bottom: 1px solid #cccccc;
+			border-radius: 0;
+			box-shadow: none !important;
+		}
+	}
+	.searchItem {
+		border-bottom: 1px solid #cccccc;
+	}
+	.showBorder {
+		height: 32px;
+		padding-left: 5px;
+		border-bottom: 1px solid #cccccc;
+	}
+	.selectText {
+		width: 100%;
+		font-size: 14px;
+		line-height: 20px;
+		color: #666666;
+	}
+	.showTopBorder {
+		border-top: 1px solid #cccccc;
+		:deep(.el-space__item) {
+			padding-top: 5px;
+		}
+	}
+	.backEBEBEB {
+		background: #ebebeb;
+	}
+	.el-button {
+		border-radius: 0;
+	}
+	.action {
+		display: flex;
+		align-items: center;
+		margin-top: 10px;
+		.btnGroup {
+			display: flex;
+			align-items: center;
+			width: 15%;
+			height: 32px;
+			line-height: 32px;
+			.el-button {
+				height: 28px;
+				padding: 8px;
+			}
+			.el-button.is-text {
+				width: auto !important;
+			}
+		}
+		.table_actions {
+			box-sizing: border-box;
+			display: flex;
+			justify-content: flex-end;
+			width: 38%;
+			padding-right: 100px;
+			.config-header {
+				:deep(.el-space__item) {
+					width: 100%;
+				}
+
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				height: 32px;
+				background: #ffffff;
+				.tools-bar {
+					display: flex;
+					flex: 1;
+					align-items: center;
+					justify-content: flex-end;
+
+					// padding-right: 30px;
+					color: #666666 !important;
+					:deep(.el-button.is-link) {
+						color: #666666;
+						&:hover {
+							color: #909399;
+							background: #ffffff !important;
+							.hdzkIcon {
+								color: #909399;
+							}
+						}
+					}
+					.dropdown-link {
+						color: #666666 !important;
+						cursor: pointer;
+						&:hover {
+							color: #909399 !important;
+							.hdzkIcon {
+								color: #909399;
+							}
+						}
+					}
+				}
+			}
+			:deep(.el-space__item) {
+				width: 100%;
+				margin-top: 4px !important;
+				margin-bottom: 4px !important;
+			}
+			:deep(.el-dropdown) {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+	.el-input__wrapper {
+		border-bottom: 1px solid #cccccc;
+		border-left: none;
+		border-radius: 0;
+		box-shadow: none !important;
+	}
+	.searchOperation {
+		position: relative;
+		display: flex;
+		flex: 1;
+		height: 100%;
+		font-size: 14px;
+		.s_item {
+			position: relative;
+			box-sizing: border-box;
+			border: 1px solid transparent;
+			transition: 0.1s ease-in-out;
+			&:active {
+				box-sizing: border-box;
+				background-color: #ebebeb;
+			}
+			&:hover {
+				border: 1px solid #e6e5e5;
+			}
+		}
+		.groups {
+			cursor: pointer;
+			span {
+				font-size: 14px !important;
+				color: #666666;
+			}
+			.hdzkIcon {
+				margin-right: 3px;
+				font-size: 14px !important;
+			}
+		}
+		.collect {
+			cursor: pointer;
+			span {
+				font-size: 14px !important;
+				color: #666666;
+			}
+			.hdzkIcon {
+				margin-right: 3px;
+				font-size: 14px !important;
+			}
+		}
+		.filter {
+			.hdzkIcon {
+				margin-right: 3px;
+				font-size: 14px !important;
+				color: #666666;
+			}
+			span {
+				font-size: 14px !important;
+				color: #666666;
+			}
+
+			position: relative;
+			margin-right: 10px;
+			.item {
+				cursor: pointer;
+			}
+			.allItem {
+				position: absolute;
+				z-index: 99;
+				min-width: 160px;
+				padding: 6px 0;
+				margin-top: 10px;
+				background: #ffffff;
+				border: 1px solid #dee2e6;
+				box-shadow: 0 1px 4px 0 rgb(219 219 219 / 55%);
+				.itemList {
+					&:hover {
+						background: #e9ecef;
+					}
+
+					position: relative;
+					padding: 0 16px;
+					padding-top: 2px;
+					cursor: pointer;
+				}
+				.menu {
+					justify-content: space-between;
+					padding: 2px 0;
+					font-size: 14px;
+					.selectIcon {
+						margin-right: 4px;
+						color: #14a1b3 !important;
+					}
+				}
+			}
+		}
+	}
+	.hdzkIcon {
+		font-weight: normal;
+		color: #666666;
+	}
+	.cardView {
+		font-weight: normal;
+	}
+	.isSelect {
+		color: #1e8fa0;
+	}
+	.timeDate {
+		position: relative;
+	}
+	:deep(.date.el-date-editor) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		opacity: 0;
+	}
+	.search-results {
+		display: flex;
+		flex-wrap: nowrap;
+		padding: 5px;
+		overflow: hidden;
+		font-weight: 500;
+		color: #1e8fa0;
+		cursor: pointer;
+		&:hover {
+			background-color: #eaecef;
+			border-radius: 5px;
+		}
+	}
+	.searchList {
+		display: flex;
+		cursor: pointer;
+		.searchItem {
+			display: flex;
+			align-items: center;
+			height: 20px;
+			overflow: hidden;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			color: #8f8f8f;
+			text-overflow: clip;
+			white-space: nowrap;
+			background: #f8f9fa;
+			border: 1px solid #8f8f8f;
+			.itemText {
+				padding: 0 3px;
+			}
+			.typeIcon {
+				padding: 0 2px;
+				color: #ffffff;
+				background: #1e8fa0;
+				.hdzkIcon {
+					font-size: 14px !important;
+					color: #ffffff;
+				}
+			}
+		}
+	}
+	.el-divider {
+		margin: 0;
+	}
+	.el-space {
+		width: 100%;
+	}
+	:deep(.dateTime) {
+		width: 170px;
+		margin-top: 5px;
+	}
+	.isSelected {
+		font-weight: 600;
+		color: #1e8fa0;
+	}
+	.serachVal {
+		margin-left: 5px;
+	}
+	:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
+		background-color: #c7c7c7 !important;
+	}
+}
diff --git a/packages/proSearch/src/index.vue b/packages/proSearch/src/index.vue
new file mode 100644
index 0000000..78f38a2
--- /dev/null
+++ b/packages/proSearch/src/index.vue
@@ -0,0 +1,536 @@
+<template>
+	<div class="s_page_search">
+		<div class="s_page_search_con">
+			<Crumbs :title="title" />
+			<InputSearch
+				@invert-selection="invertSelection"
+				ref="inputSearch"
+				@reset-date="changeDate"
+				@change-range="changeRange"
+				@change-condition="changeDate"
+				:search-candidates="props.options"
+			></InputSearch>
+		</div>
+		<div class="action">
+			<TableActions
+				:show-all="showAllActions"
+				:show-actions="showActions"
+				:print-area-id="printNodeId"
+				:table-length="tableLength"
+			>
+				<template #actions>
+					<slot name="actionGroup"></slot>
+				</template>
+				<template #fullActions>
+					<slot name="actionGroups"></slot>
+				</template>
+				<template #leftButton>
+					<slot name="buttonGroup"></slot>
+				</template>
+			</TableActions>
+
+			<div class="searchOperation" v-show="showAllOperations">
+				<el-space>
+					<ActionCandidate
+						ref="actionRef"
+						@trigger-condition="defaultEmit('trigger')"
+						v-if="config.filter"
+						:mode="mode ? mode : filterMode"
+						@remove-filter="removeFilter"
+						@default-emit="defaultEmit('filter')"
+						@change-filter="changeFilter"
+						:candidate-list="filterList"
+					></ActionCandidate>
+					<ActionCandidate
+						ref="groupingRef"
+						title="分组"
+						@trigger-condition="defaultEmit('trigger')"
+						v-if="config.grouper"
+						:mode="mode ? mode : groupingMode"
+						icon="icon-fenzu"
+						@remove-filter="removeFilter"
+						@default-emit="defaultEmit('grouper')"
+						@change-filter="changeFilter"
+						:candidate-list="grouperList"
+					></ActionCandidate>
+					<ActionCandidate
+						title="收藏"
+						@trigger-condition="defaultEmit('trigger')"
+						v-if="config.gather"
+						icon="icon-shoucang"
+						:candidate-list="gatherList"
+						@default-emit="defaultEmit('gather')"
+						ref="collectionRef"
+						@remove-filter="removeFilter"
+						@change-filter="changeFilter"
+					></ActionCandidate>
+					<ActionCandidate
+						v-if="config.exporter"
+						title="导出"
+						v-loading="!!config.exporter && !!config.exporterLoading"
+						:candidate-list="exporterList"
+						@trigger-condition="defaultEmit('trigger')"
+						icon="icon-daochu"
+						@default-emit="defaultEmit('exporter')"
+						ref="collectionRef"
+						@remove-filter="removeFilter"
+						@change-filter="changeFilter"
+					></ActionCandidate>
+					<ActionCandidate title="重置" v-if="config.resetter" icon="icon-chongzhi" @click="reset"></ActionCandidate>
+
+					<DatePicker
+						:period="config.picker.period"
+						:search-title="config.picker.title"
+						v-if="config.picker?.show"
+						:date-format="config.picker.dateFormat ?? getDefaultDateFormat(config.picker.dateType)"
+						:type="config.picker.dateType"
+						ref="dateRef"
+						@change-filter="changeFilter"
+						@change-date="changeDate"
+						icon="icon-daochu"
+					></DatePicker>
+					<div v-if="config.picker?.show" style="margin-left: 4px"></div>
+					<!-- 多个日期选择器 -->
+					<template v-if="dateList.length">
+						<div class="custom_date_picker_container" style="position: relative" v-for="(item, i) in dateList" :key="i">
+							<ActionCandidate
+								:title="item.title || '时间'"
+								@click="showPicker(i)"
+								:icon="item.icon || 'icon-riqi'"
+							></ActionCandidate>
+
+							<el-date-picker
+								v-model="item.data"
+								@change="(val: any) => changeTime(item, val)"
+								:ref="(el: any) => (dateRefs[i] = el)"
+								:style="{ marginTop: item.dateType?.includes('range') ? '30px' : 0 }"
+								style="position: absolute; top: 1%; left: 15%; z-index: 0; width: 0; opacity: 0"
+								:value-format="item.dateType === 'week' ? 'YYYY-MM-DD' : item.dateFormat ?? getDefaultDateFormat(item.dateType)"
+								:type="item.dateType || 'date'"
+							/>
+						</div>
+					</template>
+				</el-space>
+			</div>
+			<div class="viewSwitcher" v-if="showAllSwitchers">
+				<el-space wrap>
+					<div
+						class="hoverScale"
+						@click="changeList"
+						v-if="showSwitcher.table"
+						:class="{ backEBEBEB: currentIndex ? Number(currentIndex) === 0 : index === 0 }"
+					>
+						<i class="hdzkIcon icon-liebiaoshitu" title="列表视图"></i>
+					</div>
+					<div
+						class="hoverScale"
+						@click="changeCard"
+						v-if="showSwitcher.card"
+						:class="{ backEBEBEB: currentIndex ? Number(currentIndex) === 1 : index === 1 }"
+					>
+						<i class="hdzkIcon icon-kapianshitu cardView" title="卡片视图"></i>
+					</div>
+					<div class="hoverScale" @click="changeProgress" v-if="showSwitcher.progress" :class="{ backEBEBEB: index === 2 }">
+						<i class="hdzkIcon icon-jindushitu" title="进度视图"></i>
+					</div>
+				</el-space>
+			</div>
+			<ColFilter v-if="colFilterConfig && colFilterConfig.show" :config="colFilterConfig" @confirm="colFilterConfirm" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="ProSearch">
+import '@/assets/iconfont/iconfont.scss';
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+import weekOfYear from 'dayjs/plugin/weekOfYear';
+import Crumbs from './Crumbs/index.vue';
+import InputSearch from './InputSearch/index.vue';
+import TableActions from './TableActions/index.vue';
+import ActionCandidate from './ActionCandidate/index.vue';
+import DatePicker from './DatePicker/index.vue';
+import ColFilter from './Colfilter/index.vue';
+import {
+	SearchCandidateProperties,
+	DataStructure,
+	OptionsIsShow,
+	TriggerType,
+	LayoutType,
+	DateType,
+	Config,
+	DateList,
+	ColFilterConfig,
+	SearchCandidateType,
+	SearchCandidateDateList
+} from './types';
+
+dayjs.extend(weekOfYear);
+const dateRefs = ref<any[]>([]);
+function showPicker(index: number) {
+	if (dateRefs.value) {
+		dateRefs.value![index].focus();
+	}
+}
+const dateRangeList = ref<any[]>([]);
+function changeTime(item: any, time: any):void {
+	const isRange = item?.dateType.includes('range');
+	const isWeek = item?.dateType === 'week';
+	if (item) {
+		if (!isRange) {
+			inputSearch.value.exportAddCondition({
+				icon: item?.icon || 'icon-riqi',
+				query: item!.genre,
+				label: `${item?.title || '日期'}: ${
+					isWeek ? dayjs(item.data).format('YYYY') + '-' + dayjs(item.data).week() : item?.data
+				}`,
+				value: time
+			});
+
+			item.data = time;
+		} else {
+			const startTime = time[0].toString();
+			const endTime = time[1].toString();
+			dateRangeList.value = [
+				...dateRangeList.value,
+				{
+					query: item?.genre[0],
+					value: startTime
+				},
+				{
+					query: item?.genre[1],
+					value: endTime
+				}
+			];
+			inputSearch.value.addCondition({
+				icon: item?.icon || 'icon-riqi',
+				query: item!.genre,
+				label: `${item?.title || '日期'}: ${startTime} 至 ${endTime}`,
+				value: time,
+				type: 'range'
+			});
+		}
+	}
+}
+
+type ObjProps = {
+	[key: string]: any;
+};
+
+/**
+ * @description 传参说明
+ * @searchList 查询条件
+ * @tableLength 已选择的列表个数
+ * @isShow 展示类型
+ * @mode 数据结构类型
+ * @showSwitcher 是否显示切换
+ */
+type SearchProps = {
+	showAllOperations?: boolean;
+	showAllSwitchers?: boolean;
+	showAllActions?: boolean;
+	searchList?: any;
+	dateType?: DateType;
+	tableLength?: number;
+	showInput?: boolean;
+	isShow?: OptionsIsShow;
+	mode?: DataStructure;
+	filterMode?: DataStructure;
+	groupingMode?: DataStructure;
+	showSwitcher?: Pick<OptionsIsShow, 'card' | 'gant' | 'table' | 'progress'>;
+	config?: Config;
+	currentIndex?: number;
+	showActions?: Pick<OptionsIsShow, 'print' | 'actions'>;
+	options?: SearchCandidateProperties[];
+	printNodeId?: string;
+	filterList?: any[];
+	grouperList?: any[];
+	gatherList?: any[];
+	exporterList?: any[];
+	title?: string;
+	dateFormat?: string;
+	disabledDate?: Date;
+	dateList?: DateList[];
+	colFilterConfig?: ColFilterConfig;
+};
+
+const props:any = withDefaults(defineProps<SearchProps>(), {
+	searchList: {},
+	currentIndex: 0,
+	tableLength: 0,
+	showAllOperations: true,
+	showAllSwitchers: true,
+	showAllActions: false,
+	mode: '',
+	printNodeId: '',
+	filterMode: 'flat',
+	groupingMode: 'tree',
+	dateList: () => [],
+
+	showSwitcher: () => {
+		return {
+			table: true,
+			card: true,
+			progress: false
+		};
+	},
+	config: () => {
+		return {
+			filter: true,
+			grouper: true,
+			gather: true,
+			exporter: true,
+			resetter: true,
+			picker: {
+				show: true,
+				dateFormat: '',
+				dateType: 'datetimerange',
+				title: '查询时间',
+				period: 0
+			}
+		};
+	},
+	showActions: () => {
+		return {
+			print: true,
+			actions: true
+		};
+	},
+	filterList: () => [],
+	grouperList: () => [],
+	gatherList: () => [],
+	exporterList: () => [],
+	options: () => []
+});
+
+type EmitProps = {
+	(e: 'search', data: ObjProps): void;
+	(e: 'change-gather'): void;
+	(e: 'change-grouping'): void;
+	(e: 'change-filter'): void;
+
+	(e: 'switch', type: LayoutType): void;
+
+	(e: 'trigger', param: TriggerType): void;
+};
+const emits = defineEmits<EmitProps>();
+const index = ref(0);
+
+const inputSearch = ref();
+const actionRef = ref();
+const groupingRef = ref();
+const collectionRef = ref();
+const dateRef = ref();
+// 删除查询条件
+// executeEmits 是否调用emits   true 不调用  false 调用
+function removeFilter(condition: SearchCandidateProperties, executeEmits?: boolean):void {
+	inputSearch.value.deleteCondition(condition, executeEmits);
+}
+// 添加查询条件
+function changeFilter(condition: SearchCandidateProperties):void {
+	inputSearch.value.addCondition(condition);
+	// actionRef.value.selectFilter(condition);
+}
+// 其他组件添加查询条件
+function addCondition(conditions: SearchCandidateType | SearchCandidateType[]):void {
+	if (Array.isArray(conditions)) {
+		conditions.forEach(condition => {
+			addSingleCondition(condition);
+		});
+	} else {
+		addSingleCondition(conditions);
+	}
+
+	// 添加查询条件后，更改入参触发搜索
+	if (
+		(Array.isArray(conditions) && conditions.find(condition => condition.type === 'dateList')) ||
+		(!Array.isArray(conditions) && conditions.type === 'dateList')
+	) {
+		changeDate();
+	}
+}
+
+/** 添加单条查询条件 */
+const addSingleCondition = (condition: SearchCandidateType):void => {
+	if (condition.type === 'date') {
+		dateRef.value?.addDate(condition);
+	} else if (condition.type === 'dateList') {
+		// dateList 默认值按照类型 SearchCandidateDateList 处理
+		const dateCondition = condition as SearchCandidateDateList;
+		const findCondition = props.dateList.find(item =>
+			Array.isArray(item.genre) && Array.isArray(condition.genre)
+				? item.genre.join() === condition.genre.join()
+				: item.genre === condition.genre
+		);
+		if (findCondition) {
+			const isRange = Array.isArray(findCondition.genre);
+			const index = props.dateList.findIndex(item =>
+				Array.isArray(item.genre) && Array.isArray(condition.genre)
+					? item.genre.join() === condition.genre.join()
+					: item.genre === condition.genre
+			);
+			props.dateList[index].data = isRange ? [dateCondition.startTime, dateCondition.endTime as string] : dateCondition.startTime;
+			const c = {
+				icon: 'hdzkIcon icon-riqi',
+				label: isRange
+					? `${findCondition.title}: ${dateCondition.startTime} 至 ${dateCondition.endTime}`
+					: `${findCondition.title}: ${dateCondition.startTime}`,
+				type: 'dateList',
+				query: findCondition.genre,
+				value: isRange ? [dateCondition.startTime, dateCondition.endTime as string] : dateCondition.startTime
+			};
+			inputSearch.value?.addCondition(c);
+		}
+	} else {
+		inputSearch.value?.exportAddCondition(condition);
+	}
+};
+
+// 是否展示筛选列表项
+
+// 切换不同视图 0: 列表视图 1: 卡片视图 2:流程视图
+function changeList():void {
+	index.value = 0;
+
+	emits('switch', 'table');
+}
+function defaultEmit(param: TriggerType):void {
+	emits('trigger', param);
+}
+function changeCard():void {
+	index.value = 1;
+
+	emits('switch', 'card');
+}
+
+function changeProgress():void {
+	index.value = 2;
+
+	emits('switch', 'gant');
+}
+function reset():void {
+	inputSearch.value?.resetFilterRules();
+	actionRef.value?.resetAllRules();
+	groupingRef.value?.resetAllRules();
+	dateRef.value?.resetValue();
+	dateRangeList.value = [];
+	props.dateList.forEach(item => (item.data = ''));
+	defaultEmit('reset');
+}
+// 反选
+function invertSelection(condition: SearchCandidateProperties):void {
+	actionRef.value?.invertSelection(condition);
+	groupingRef.value?.invertSelection(condition);
+}
+
+const changeRange = (query: string[]):void => {
+	query.forEach(element => {
+		dateRangeList.value = dateRangeList.value.filter(item => item.query !== element);
+	});
+	changeDate();
+};
+const colFilterConfirm = ():void => {
+	let config = props.colFilterConfig;
+	config && config.tableFilterColChange && config.tableFilterColChange(config.columns);
+};
+function changeDate(isDeleteDate?: boolean):void {
+	if (inputSearch.value && inputSearch.value.selectedQueryConditions) {
+		let list: any = [];
+		const res = inputSearch.value.selectedQueryConditions.filter(
+			(item: any) => item.type !== 'date' && item.type !== 'range' && item.type !== 'dateList'
+		);
+
+		// 处理dateList类型的入参
+		const dateListTypeData = inputSearch.value.selectedQueryConditions.filter((itemL: any) => itemL.type === 'dateList');
+		let dateListArgs: any[] = [];
+		if (dateListTypeData.length) {
+			dateListTypeData.forEach((item: any) => {
+				if (Array.isArray(item.value)) {
+					item.value.forEach((_item2: any, index: number) => {
+						dateListArgs.push({
+							query: item.query[index],
+							value: item.value[index]
+						});
+					});
+				} else {
+					dateListArgs.push({
+						query: item.query,
+						value: item.value
+					});
+				}
+			});
+		}
+		if ((dateRef.value && dateRef.value?.dateList.length > 0) || dateRangeList.value.length > 0) {
+			let args: any = [];
+
+			if (dateRef.value) {
+				if (isDeleteDate) {
+					args = [...dateRangeList.value];
+					dateRef.value.dateList = [];
+					dateRef.value.resetValue();
+				} else {
+					args = [...dateRef.value?.dateList, ...dateRangeList.value];
+				}
+			} else {
+				args = [...dateRangeList.value];
+			}
+
+			list = [...res, ...args];
+		} else {
+			list = [...res];
+		}
+		// 将dateList类型的入参合并到list中
+		list = [...dateListArgs, ...list];
+
+		const search: ObjProps = {};
+		list.forEach((i: any) => {
+			if (i.query) {
+				search[i.query] = i.value;
+			}
+		});
+		emits('search', search);
+	}
+}
+/** 获取显示在输入框中的默认格式 */
+const getDefaultDateFormat = (type?: DateType): string => {
+	/** 不同日期类型默认格式映射 */
+	const formatMap: {
+		[x in DateType]: string;
+	} = {
+		date: 'YYYY-MM-DD',
+		dates: 'YYYY-MM-DD',
+		daterange: 'YYYY-MM-DD',
+		week: 'YYYY-MM-DD',
+		month: 'YYYY-MM',
+		monthrange: 'YYYY-MM',
+		year: 'YYYY',
+		datetime: 'YYYY-MM-DD HH:mm:ss',
+		datetimerange: 'YYYY-MM-DD HH:mm:ss'
+	};
+	return type && formatMap[type] ? formatMap[type] : 'YYYY-MM-DD';
+};
+
+function resetRules():void {
+	reset();
+}
+defineExpose({
+	addCondition,
+	removeFilter,
+	resetRules
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+.custom_date_picker_container {
+	.el-input__wrapper {
+		width: 0;
+		height: 0;
+		padding: 0;
+	}
+	.el-input__prefix {
+		height: 0;
+	}
+}
+</style>
+../types./types
\ No newline at end of file
diff --git a/packages/proSearch/src/types.ts b/packages/proSearch/src/types.ts
new file mode 100644
index 0000000..6ba1fc6
--- /dev/null
+++ b/packages/proSearch/src/types.ts
@@ -0,0 +1,100 @@
+export type DataStructure = 'tree' | 'flat' | '';
+/**
+ * 操作显示
+ */
+
+export type OptionsIsShow = {
+	add?: boolean; // 创建按钮
+	filter?: boolean; // 筛选
+	grouper?: boolean; // 分组
+	gather?: boolean; // 收藏
+	table?: boolean; // 列表展示
+	card?: boolean; // 卡片展示
+	progress?: boolean; // 流程展示
+	input?: boolean; // 输入框展示
+	gant?: boolean; // 甘特图
+	print?: boolean;
+	all?: boolean;
+	actions?: boolean;
+	exporter?: boolean;
+	dater?: boolean;
+};
+
+/**
+ * @description 传参说明
+ * @searchList 查询条件
+ * @tableLength 已选择的列表个数
+ * @isShow 展示类型
+ * @mode 数据结构类型
+ * @showSwitcher 是否显示切换
+ */
+export interface SearchProps {
+	searchList?: any;
+	tableLength?: number;
+	isShow?: OptionsIsShow;
+	showActions?: OptionsIsShow;
+	mode?: DataStructure;
+	showSwitcher?: OptionsIsShow;
+	showOperations?: boolean;
+	currentIndex?: number;
+	searchCandidates?: SearchCandidateProperties[];
+}
+
+// 搜索候选项
+export interface SearchCandidateProperties {
+	label: string;
+	query?: string | string[];
+	selected?: boolean;
+	type?: string;
+	genre?: string;
+	value?: string;
+	title?: string;
+	data?: string;
+	icon?: string;
+	children?: SearchCandidateProperties[];
+}
+
+export interface SearchCandidateDateList {
+	type: 'dateList';
+	genre: string | [string, string];
+	startTime: string;
+	endTime?: string;
+}
+
+export type SearchCandidateType = SearchCandidateProperties | SearchCandidateDateList;
+
+export type Config = {
+	filter?: boolean; // 筛选
+	grouper?: boolean; // 分组
+	gather?: boolean; // 收藏
+	resetter?: boolean;
+	exporterLoading?: boolean;
+	picker?: {
+		show?: boolean;
+		dateFormat?: string;
+		dateType?: DateType;
+		title?: string;
+		period?: number;
+	};
+	exporter?: boolean;
+};
+export type DateList = {
+	// 标题
+	title?: string;
+	// 图标
+	icon?: string;
+	// 数据 填空字符串即可
+	data: string | [string, string];
+	// 查询参数 即请求载荷参数
+	genre: string | [string, string];
+	dateFormat?: string;
+	dateType?: DateType;
+};
+export type LayoutType = 'card' | 'gant' | 'table';
+export type TriggerType = 'filter' | 'grouper' | 'gather' | 'exporter' | 'trigger' | 'reset';
+export type DateType = 'date' | 'datetime' | 'datetimerange' | 'daterange' | 'week' | 'month' | 'monthrange' | 'year' | 'dates';
+export interface ColFilterConfig {
+	show?: boolean;
+	tableFilterColChange?: (val?: any) => void;
+	columns?: any[];
+}
diff --git a/packages/proTable/components/ColSetting.vue b/packages/proTable/components/ColSetting.vue
new file mode 100644
index 0000000..4d3d5ab
--- /dev/null
+++ b/packages/proTable/components/ColSetting.vue
@@ -0,0 +1,45 @@
+<template>
+  <!-- 列设置 -->
+  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+    <div class="table-main">
+      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+        <el-table-column prop="label" align="center" label="列名" />
+        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+          <el-switch v-model="scope.row.isShow"></el-switch>
+        </el-table-column>
+        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+          <el-switch v-model="scope.row.sortable"></el-switch>
+        </el-table-column>
+        <template #empty>
+          <div class="table-empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无可配置列</div>
+          </div>
+        </template>
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "../interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+  drawerVisible.value = true;
+};
+
+defineExpose({
+  openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+  cursor: move;
+}
+</style>
diff --git a/packages/proTable/components/Pagination.vue b/packages/proTable/components/Pagination.vue
new file mode 100644
index 0000000..f127938
--- /dev/null
+++ b/packages/proTable/components/Pagination.vue
@@ -0,0 +1,74 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    :background="true"
+    :current-page="pageable.pageNum"
+    :page-size="pageable.pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageable.total"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+  pageNum: number;
+  pageSize: number;
+  total: number;
+}
+
+interface PaginationProps {
+  pageable: Pageable;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (currentPage: number) => void;
+}
+
+defineProps<PaginationProps>();
+</script>
+
+<style lang="scss" scoped>
+.el-pagination {
+	display: flex;
+	justify-content: flex-end;
+	padding: 12px 20px;
+	// margin-top: 10px;
+	background-color: #ffffff;
+	:deep(.el-pager li) {
+		min-width: 29px;
+		height: 29px;
+		font-size: 12px;
+		color: #3d5266;
+		border-radius: 3px;
+		border: 1px solid #a3b8cc;
+		background-color: #fff !important;
+	}
+	:deep(.el-pager li.is-active) {
+		background-color: #1e8fa0 !important;
+	}
+
+	:deep(.el-pager li:hover) {
+		background-color: #1e8fa0 !important;
+		color: #ffffff;
+	}
+	:deep(.el-input__wrapper) {
+		border-radius: 6px;
+		box-shadow: 0 0 0 1px #a3b8cc inset;
+		height: 29px;
+		padding: 0px 5px;
+		line-height: 29px;
+	}
+	:deep(.el-select .el-input) {
+		width: 105px;
+	}
+	:deep(.el-pagination__editor.el-input) {
+		width: 42px;
+	}
+	:deep(button) {
+		min-width: 28px;
+		height: 28px;
+		border: 1px solid #a3b8cc !important;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/packages/proTable/components/TableColumn.vue b/packages/proTable/components/TableColumn.vue
new file mode 100644
index 0000000..95250e6
--- /dev/null
+++ b/packages/proTable/components/TableColumn.vue
@@ -0,0 +1,56 @@
+<template>
+  <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from "vue";
+import { ColumnProps, RenderScope, HeaderRenderScope } from "../interface";
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from "@/assets/js";
+
+defineProps<{ column: ColumnProps }>();
+
+const slots = useSlots();
+
+const enumMap = inject("enumMap", ref(new Map()));
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+  return enumMap.value.get(item.prop) && item.isFilterEnum
+    ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+    : formatValue(handleRowAccordingToProp(scope.row, item.prop!));
+};
+
+// 获取 tag 类型
+const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+  return filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, "tag");
+};
+
+const RenderTableColumn = (item: ColumnProps) => {
+  return (
+    <>
+      {item.isShow && (
+        <el-table-column
+          {...item}
+          align={item.align ?? "center"}
+          showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== "operation"}
+        >
+          {{
+            default: (scope: RenderScope<any>) => {
+              if (item._children) return item._children.map(child => RenderTableColumn(child));
+              if (item.render) return item.render(scope);
+              if (slots[handleProp(item.prop!)]) return slots[handleProp(item.prop!)]!(scope);
+              if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>;
+              return renderCellData(item, scope);
+            },
+            header: (scope: HeaderRenderScope<any>) => {
+              if (item.headerRender) return item.headerRender(scope);
+              if (slots[`${handleProp(item.prop!)}Header`]) return slots[`${handleProp(item.prop!)}Header`]!(scope);
+              return item.label;
+            }
+          }}
+        </el-table-column>
+      )}
+    </>
+  );
+};
+</script>
diff --git a/packages/proTable/helper/table.ts b/packages/proTable/helper/table.ts
new file mode 100644
index 0000000..b750481
--- /dev/null
+++ b/packages/proTable/helper/table.ts
@@ -0,0 +1,89 @@
+import { FieldNamesProps } from "@/proTable/interface";
+
+/**
+ * @description:  是否为数组
+ */
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val);
+}
+
+/**
+ * @description 格式化表格单元格默认值 (el-table-column)
+ * @param {Number} row 行
+ * @param {Number} col 列
+ * @param {*} callValue 当前单元格值
+ * @returns {String}
+ * */
+export function formatTableColumn(row: number, col: number, callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 ProTable 值为数组 || 无数据
+ * @param {*} callValue 需要处理的值
+ * @returns {String}
+ * */
+export function formatValue(callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 prop 为多级嵌套的情况，返回的数据 (列如: prop: user.name)
+ * @param {Object} row 当前行数据
+ * @param {String} prop 当前 prop
+ * @returns {*}
+ * */
+export function handleRowAccordingToProp(row: { [key: string]: any }, prop: string) {
+  if (!prop.includes(".")) return row[prop] ?? "--";
+  prop.split(".").forEach(item => (row = row[item] ?? "--"));
+  return row;
+}
+
+/**
+ * @description 处理 prop，当 prop 为多级嵌套时 ==> 返回最后一级 prop
+ * @param {String} prop 当前 prop
+ * @returns {String}
+ * */
+export function handleProp(prop: string) {
+  const propArr = prop.split(".");
+  if (propArr.length == 1) return prop;
+  return propArr[propArr.length - 1];
+}
+
+/**
+ * @description 根据枚举列表查询当需要的数据（如果指定了 label 和 value 的 key值，会自动识别格式化）
+ * @param {String} callValue 当前单元格值
+ * @param {Array} enumData 字典列表
+ * @param {Array} fieldNames label && value && children 的 key 值
+ * @param {String} type 过滤类型（目前只有 tag）
+ * @returns {String}
+ * */
+export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNamesProps, type?: "tag") {
+  const value = fieldNames?.value ?? "value";
+  const label = fieldNames?.label ?? "label";
+  const children = fieldNames?.children ?? "children";
+  let filterData: { [key: string]: any } = {};
+  // 判断 enumData 是否为数组
+  if (Array.isArray(enumData)) filterData = findItemNested(enumData, callValue, value, children);
+  // 判断是否输出的结果为 tag 类型
+  if (type == "tag") {
+    return filterData?.tagType ? filterData.tagType : "";
+  } else {
+    return filterData ? filterData[label] : "--";
+  }
+}
+
+/**
+ * @description 递归查找 callValue 对应的 enum 值
+ * */
+export function findItemNested(enumData: any, callValue: any, value: string, children: string) {
+  return enumData.reduce((accumulator: any, current: any) => {
+    if (accumulator) return accumulator;
+    if (current[value] === callValue) return current;
+    if (current[children]) return findItemNested(current[children], callValue, value, children);
+  }, null);
+}
diff --git a/packages/proTable/helper/useSelection.ts b/packages/proTable/helper/useSelection.ts
new file mode 100644
index 0000000..5cdce57
--- /dev/null
+++ b/packages/proTable/helper/useSelection.ts
@@ -0,0 +1,34 @@
+import { ref, computed } from "vue";
+
+/**
+ * @description 表格多选数据操作
+ * @param {String} rowKey 当表格可以多选时，所指定的 id
+ * */
+export const useSelection = (rowKey: string = "id") => {
+  const isSelected = ref<boolean>(false);
+  const selectedList = ref<{ [key: string]: any }[]>([]);
+
+  // 当前选中的所有 ids 数组
+  const selectedListIds = computed((): string[] => {
+    let ids: string[] = [];
+    selectedList.value.forEach(item => ids.push(item[rowKey]));
+    return ids;
+  });
+
+  /**
+   * @description 多选操作
+   * @param {Array} rowArr 当前选择的所有数据
+   * @return void
+   */
+  const selectionChange = (rowArr: { [key: string]: any }[]) => {
+    rowArr.length ? (isSelected.value = true) : (isSelected.value = false);
+    selectedList.value = rowArr;
+  };
+
+  return {
+    isSelected,
+    selectedList,
+    selectedListIds,
+    selectionChange
+  };
+};
diff --git a/packages/proTable/helper/useTable.ts b/packages/proTable/helper/useTable.ts
new file mode 100644
index 0000000..6fb3412
--- /dev/null
+++ b/packages/proTable/helper/useTable.ts
@@ -0,0 +1,178 @@
+import { reactive, computed, toRefs } from "vue";
+
+/**
+ * @description table 页面操作方法封装
+ * @param {Function} api 获取表格数据 api 方法 (必传)
+ * @param {Object} initParam 获取数据初始化参数 (非必传，默认为{})
+ * @param {Boolean} isPageable 是否有分页 (非必传，默认为true)
+ * @param {Function} dataCallBack 对后台返回的数据进行处理的方法 (非必传)
+ * */
+
+export namespace Table {
+    export interface Pageable {
+      current: number;
+      size: number;
+      total: number;
+    }
+    export interface StateProps {
+      tableData: any[];
+      pageable: Pageable;
+      searchParam: {
+        [key: string]: any;
+      };
+      searchInitParam: {
+        [key: string]: any;
+      };
+      totalParam: {
+        [key: string]: any;
+      };
+      icon?: {
+        [key: string]: any;
+      };
+    }
+  }
+  
+export const useTable = (
+  api?: (params: any) => Promise<any>,
+  initParam: object = {},
+  isPageable: boolean = true,
+  dataCallBack?: (data: any) => any,
+  requestError?: (error: any) => void
+) => {
+  const state = reactive<Table.StateProps>({
+    // 表格数据
+    tableData: [],
+    // 分页数据
+    pageable: {
+      // 当前页数
+      current: 1,
+      // 每页显示条数
+      size: 10,
+      // 总条数
+      total: 0
+    },
+    // 查询参数(只包括查询)
+    searchParam: {},
+    // 初始化默认的查询参数
+    searchInitParam: {},
+    // 总参数(包含分页和查询参数)
+    totalParam: {}
+  });
+
+  /**
+   * @description 分页查询参数(只包括分页和表格字段排序,其他排序方式可自行配置)
+   * */
+  const pageParam = computed({
+    get: () => {
+      return {
+        current: state.pageable.current,
+        size: state.pageable.size
+      };
+    },
+    set: (newVal: any) => {
+      console.log("我是分页更新之后的值", newVal);
+    }
+  });
+
+  /**
+   * @description 获取表格数据
+   * @return void
+   * */
+  const getTableList = async () => {
+    if (!api) return;
+    try {
+      // 先把初始化参数和分页参数放到总参数里面
+      Object.assign(state.totalParam, initParam, isPageable ? pageParam.value : {});
+      let { data } = await api({ ...state.searchInitParam, ...state.totalParam });
+      dataCallBack && (data = dataCallBack(data));
+      state.tableData = isPageable ? data.records : data;
+      // 解构后台返回的分页数据 (如果有分页更新分页信息)
+      if (isPageable) {
+        const { current, size, total } = data;
+        updatePageable({  current,  size, total });
+      }
+    } catch (error) {
+      requestError && requestError(error);
+    }
+  };
+
+  /**
+   * @description 更新查询参数
+   * @return void
+   * */
+  const updatedTotalParam = () => {
+    state.totalParam = {};
+    // 处理查询参数，可以给查询参数加自定义前缀操作
+    let nowSearchParam: Table.StateProps["searchParam"] = {};
+    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
+    for (let 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} pageable 后台返回的分页数据
+   * @return void
+   * */
+  const updatePageable = (pageable: Table.Pageable) => {
+    Object.assign(state.pageable, pageable);
+  };
+
+  /**
+   * @description 表格数据查询
+   * @return void
+   * */
+  const search = () => {
+    state.pageable.current = 1;
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 表格数据重置
+   * @return void
+   * */
+  const reset = () => {
+    state.pageable.current = 1;
+    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
+    state.searchParam = { ...state.searchInitParam };
+    updatedTotalParam();
+    getTableList();
+  };
+
+  /**
+   * @description 每页条数改变
+   * @param {Number} val 当前条数
+   * @return void
+   * */
+  const handleSizeChange = (val: number) => {
+    state.pageable.current = 1;
+    state.pageable.size = val;
+    getTableList();
+  };
+
+  /**
+   * @description 当前页改变
+   * @param {Number} val 当前页
+   * @return void
+   * */
+  const handleCurrentChange = (val: number) => {
+    state.pageable.current = val;
+    getTableList();
+  };
+
+  return {
+    ...toRefs(state),
+    getTableList,
+    search,
+    reset,
+    handleSizeChange,
+    handleCurrentChange,
+    updatedTotalParam
+  };
+};
diff --git a/packages/proTable/index.ts b/packages/proTable/index.ts
new file mode 100644
index 0000000..e3743f1
--- /dev/null
+++ b/packages/proTable/index.ts
@@ -0,0 +1,5 @@
+import Index from './index.vue'
+import { withInstall } from '../withInstall'
+
+const ProTable = withInstall(Index)
+export default ProTable
diff --git a/packages/proTable/index.vue b/packages/proTable/index.vue
new file mode 100644
index 0000000..cd77f1b
--- /dev/null
+++ b/packages/proTable/index.vue
@@ -0,0 +1,477 @@
+<template>
+  <!-- 表格主体 -->
+  <div class="s_protable-wrap">
+    <!-- 表格头部 操作按钮 -->
+    <div class="table-header">
+      <div class="header-button-lf">
+        <slot
+          name="tableHeader"
+          :selected-list="selectedList"
+          :selected-list-ids="selectedListIds"
+          :is-selected="isSelected"
+        />
+      </div>
+      <div v-if="toolButton" class="header-button-ri">
+        <slot name="toolButton">
+          <el-button
+            v-if="showToolButton('refresh')"
+            :icon="Refresh"
+            circle
+            @click="getTableList"
+          />
+          <el-button
+            v-if="showToolButton('setting') && columns.length"
+            :icon="Operation"
+            circle
+            @click="openColSetting"
+          />
+        </slot>
+      </div>
+    </div>
+    <!-- 表格主体 -->
+    <el-table
+      ref="tableRef"
+      v-bind="$attrs"
+      :data="processTableData"
+      :border="border"
+      :row-key="rowKey"
+      @selection-change="selectionChange"
+    >
+      <!-- 默认插槽 -->
+      <slot />
+      <template v-for="item in tableColumns" :key="item">
+        <!-- selection || radio || index || expand || sort -->
+        <el-table-column
+          v-if="item.type && columnTypes.includes(item.type)"
+          v-bind="item"
+          :align="item.align ?? 'center'"
+          :reserve-selection="item.type == 'selection'"
+        >
+          <template #default="scope">
+            <!-- expand -->
+            <template v-if="item.type == 'expand'">
+              <component :is="item.render" v-bind="scope" v-if="item.render" />
+              <slot v-else :name="item.type" v-bind="scope" />
+            </template>
+            <!-- radio -->
+            <el-radio
+              v-if="item.type == 'radio'"
+              v-model="radio"
+              :label="scope.row[rowKey]"
+            >
+              <i></i>
+            </el-radio>
+            <!-- sort -->
+            <el-tag v-if="item.type == 'sort'" class="move">
+              <el-icon> <DCaret /></el-icon>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <!-- other -->
+        <TableColumn
+          v-if="!item.type && item.prop && item.isShow"
+          :column="item"
+        >
+          <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+            <slot :name="slot" v-bind="scope" />
+          </template>
+        </TableColumn>
+      </template>
+      <!-- 插入表格最后一行之后的插槽 -->
+      <template #append>
+        <slot name="append" />
+      </template>
+      <!-- 无数据 -->
+      <template #empty>
+        <div class="table-empty">
+          <slot name="empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无数据</div>
+          </slot>
+        </div>
+      </template>
+    </el-table>
+    <!-- 分页组件 -->
+    <slot name="pagination">
+      <Pagination
+        v-if="pagination"
+        :pageable="{
+          pageSize: pageable.size,
+          pageNum: pageable.current,
+          total: pageable.total,
+        }"
+        :handle-size-change="handleSizeChange"
+        :handle-current-change="handleCurrentChange"
+      />
+    </slot>
+  </div>
+  <!-- 列设置 -->
+  <ColSetting v-if="toolButton" ref="colRef" v-model:col-setting="colSetting" />
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { ref, watch, provide, onMounted, unref, computed, reactive } from 'vue'
+import { Refresh, Operation } from '@element-plus/icons-vue'
+import { ElTable } from 'element-plus'
+import { BreakPoint } from '@/grid/interface'
+import { ColumnProps, TypeProps } from '@/proTable/interface'
+import { useTable } from './helper/useTable'
+import { useSelection } from './helper/useSelection'
+import Pagination from './components/Pagination.vue'
+import ColSetting from './components/ColSetting.vue'
+import TableColumn from './components/TableColumn.vue'
+import Sortable from 'sortablejs'
+
+export interface ProTableProps {
+  columns: ColumnProps[] // 列配置项  ==> 必传
+  data?: any[] // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  requestApi?: (params: any) => Promise<any> // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  title?: string // 表格标题 ==> 非必传
+  pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
+  initParam?: any // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: ('refresh' | 'setting' | 'search')[] | boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number> // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  initParam: {},
+  border: false,
+  toolButton: true,
+  rowKey: 'id',
+  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+})
+
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>()
+
+// column 列类型
+const columnTypes: TypeProps[] = [
+  'selection',
+  'radio',
+  'index',
+  'expand',
+  'sort',
+]
+
+// 控制 ToolButton 显示
+const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
+  return Array.isArray(props.toolButton)
+    ? props.toolButton.includes(key)
+    : props.toolButton
+}
+
+// 单选值
+const radio = ref('')
+
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } =
+  useSelection(props.rowKey)
+
+// 表格操作 Hooks
+const {
+  tableData,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  handleSizeChange,
+  handleCurrentChange,
+} = useTable(
+  props.requestApi,
+  props.initParam,
+  props.pagination,
+  props.dataCallback,
+  props.requestError
+)
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection()
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  dragSort()
+  props.requestAuto && getTableList()
+  props.data && (pageable.value.total = props.data.length)
+})
+
+// 处理表格数据
+const processTableData = computed(() => {
+  if (!props.data) return tableData.value
+  if (!props.pagination) return props.data
+  return props.data.slice(
+    (pageable.value.current - 1) * pageable.value.size,
+    pageable.value.size * pageable.value.current
+  )
+})
+
+// 监听页面 initParam 改化，重新获取表格数据
+watch(() => props.initParam, getTableList, { deep: true })
+
+// 接收 columns 并设置为响应式
+const tableColumns = reactive<ColumnProps[]>(props.columns)
+
+
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>())
+const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
+  if (!enumValue) return
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (
+    enumMap.value.has(prop!) &&
+    (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)
+  )
+    return
+
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  if (typeof enumValue !== 'function')
+    return enumMap.value.set(prop!, unref(enumValue!))
+
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  enumMap.value.set(prop!, [])
+
+  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  const { data } = await enumValue()
+  enumMap.value.set(prop!, data)
+}
+
+// 注入 enumMap
+provide('enumMap', enumMap)
+
+// 扁平化 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
+    await setEnumMap(col)
+  })
+  return flatArr.filter((item) => !item._children?.length)
+}
+
+
+
+
+// 列设置 ==> 需要过滤掉不需要设置的列
+const colRef = ref()
+const colSetting = tableColumns!.filter((item) => {
+  const { type, prop, isShow } = item
+  return !columnTypes.includes(type!) && prop !== 'operation' && isShow
+})
+const openColSetting = () => colRef.value.openColSetting()
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  (e: 'dargSort', data: { newIndex?: number; oldIndex?: number }): void
+}>()
+
+
+
+// 拖拽排序
+const dragSort = () => {
+  const tbody = document.querySelector(
+    '.el-table__body-wrapper tbody'
+  ) as HTMLElement
+  Sortable.create(tbody, {
+    handle: '.move',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      const [removedItem] = processTableData.value.splice(oldIndex!, 1)
+      processTableData.value.splice(newIndex!, 0, removedItem)
+      emit('dargSort', { newIndex, oldIndex })
+    },
+  })
+}
+
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData: processTableData,
+  radio,
+  pageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  handleSizeChange,
+  handleCurrentChange,
+  clearSelection,
+  enumMap,
+  isSelected,
+  selectedList,
+  selectedListIds,
+})
+</script>
+
+<style lang="scss" scoped>
+
+
+
+
+.el-table--small {
+	.el-table__header th {
+		height: 40px;
+		font-size: 14px;
+	}
+	.el-table__row {
+		height: 40px;
+		font-size: 13px;
+	}
+}
+.el-table--large {
+	.el-table__header th {
+		height: 50px;
+		font-size: 16px;
+	}
+	.el-table__row {
+		height: 50px;
+		font-size: 15px;
+	}
+}
+.s_protable-wrap {
+	position: relative;
+	box-sizing: border-box;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	padding-top: 0;
+	overflow-x: hidden;
+	background-color: var(--el-fill-color-blank);
+	:deep(.el-scrollbar__view) {
+		height: 100%;
+	}
+	:deep(.el-table__header) {
+		.cell {
+			font-family: AliPuHuiBold;
+			font-size: 14px;
+			color: #475059;
+		}
+	}
+	:deep(.el-button) {
+		font-size: 13px;
+		letter-spacing: 0.5px;
+	}
+	:deep(.el-table__empty-text) {
+		line-height: 30px;
+	}
+
+	// table-search 表格搜索样式
+  .table-search {
+    padding: 18px 18px 0;
+    margin-bottom: 10px;
+    .el-form {
+      .el-form-item__content > * {
+        width: 100%;
+      }
+
+      // 去除时间选择器上下 padding
+      .el-range-editor.el-input__wrapper {
+        padding: 0 10px;
+      }
+    }
+    .operation {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 18px;
+    }
+  }
+
+
+	// 表格 header 样式
+	.table-header {
+		.header-button-lf {
+			float: left;
+		}
+		.header-button-ri {
+			float: right;
+		}
+		.el-button {
+			margin-bottom: 15px;
+		}
+	}
+
+	// el-table 表格样式
+	:deep(.el-table__inner-wrapper) .el-table__body-wrapper .el-scrollbar .el-scrollbar__bar.is-horizontal {
+		height: 10px;
+	}
+	.el-table__inner-wrapper::before {
+		background: none;
+	}
+	.el-table {
+		flex: 1;
+		font-size: 12px;
+		.el-table__header th {
+			height: 45px;
+			font-size: 14px;
+
+			// font-weight: bold;
+			color: #333333 !important;
+		}
+		.el-table__row {
+			height: 36px;
+			font-size: 13px;
+		}
+
+		// 小于1200px时，表格字体变小
+		@media screen and (max-width: 1200px) {
+			.el-table__row {
+				font-size: 12px;
+			}
+		}
+
+		// table 中 image 图片样式
+		.table-image {
+			width: 50px;
+			height: 50px;
+			border-radius: 50%;
+		}
+	}
+
+	:deep(.el-table__row .el-table__cell) {
+		// background-color: rgba(0, 0, 0, 0.01);
+		// background-color: #f7f8fa;
+		color: #3d5266;
+		border: 1px solid transparent;
+		padding: 7.5px 0;
+	}
+	:deep(.el-table__row .el-table__cell:hover) {
+		border: 1px solid #4e80f5;
+		border-radius: 4px;
+	}
+	:deep(.el-table .el-table__row:first-child) {
+		box-shadow: inset 0px 5px 10px -4px rgba(0, 0, 0, 0.1);
+	}
+  :deep(.el-table__body .el-table__row:nth-child(even) .el-table__cell ){
+    background-color:#fff ;
+  }
+  :deep(.el-table__body .el-table__row:nth-child(odd) .el-table__cell){
+    background-color:#f7f8fa ;
+  }
+	:deep(.el-table__row--striped td.el-table__cell) {
+		background: #fff !important;
+	}
+	:deep(.el-table__body tr:hover > td.el-table__cell) {
+		background: #edf0f2 !important;
+	}
+}
+</style>
diff --git a/packages/proTable/interface/index.ts b/packages/proTable/interface/index.ts
new file mode 100644
index 0000000..f1bde87
--- /dev/null
+++ b/packages/proTable/interface/index.ts
@@ -0,0 +1,94 @@
+import { VNode, ComponentPublicInstance, Ref } from "vue";
+import { BreakPoint, Responsive } from "@/grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/proTable/index.vue";
+import ProTable from "@/proTable/index.vue";
+import { ElTable } from 'element-plus';
+
+export interface EnumProps {
+  label?: string; // 选项框显示的文字
+  value?: string | number | boolean | any[]; // 选项框值
+  disabled?: boolean; // 是否禁用此选项
+  tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any;
+}
+export interface ProTableRefProps {
+	getTableList?: (params?: {
+		manualParam?: Record<string, any>;
+		manualApi?: (...params: [any, any] | (Record<string, any> | undefined)[]) => Promise<unknown>;
+	}) => void;
+	element?: InstanceType<typeof ElTable>;
+	tableData?: any[];
+}
+
+export type TypeProps = "index" | "selection" | "radio" | "expand" | "sort";
+
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  label?: string; // 当前项搜索框的 label
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string; // 搜索提示
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为 1 列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+export type RenderScope<T> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export interface ColumnProps<T = any>
+  extends Partial<Omit<TableColumnCtx<T>, "type" | "children" | "renderCell" | "renderHeader">> {
+  type?: TypeProps; // 列类型
+  tag?: boolean | Ref<boolean>; // 是否是标签展示
+  isShow?: boolean | Ref<boolean>; // 是否显示在表格当中
+  search?: SearchProps | undefined; // 搜索项配置
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>); // 枚举字典
+  isFilterEnum?: boolean | Ref<boolean>; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;
diff --git a/typings/plugins.ts b/typings/plugins.ts
new file mode 100644
index 0000000..8c883d6
--- /dev/null
+++ b/typings/plugins.ts
@@ -0,0 +1 @@
+declare module "vue3-print-nb";
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 252698d..560c59f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -57,6 +57,7 @@ export default defineConfig({
     alias: {
       // '@': resolve(__dirname, 'examples'),
       '@': resolve(__dirname, 'packages'),
+      "@packages": resolve(__dirname, "./packages"),
     },
     // 类型： string[] 导入时想要省略的扩展名列表。
     extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.mjs'],
@@ -66,7 +67,7 @@ export default defineConfig({
     // cssCodeSplit: true, // 强制内联CSS
     rollupOptions: {
       // 请确保外部化那些你的库中不需要的依赖
-      external: ['vue'],
+      external: ['vue',"element-plus","vue-hooks-plus"],
       output: {
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
@@ -77,9 +78,9 @@ export default defineConfig({
     lib: {
       // entry: resolve(__dirname, 'packages/index.ts'),
       entry: './packages/index.ts',
-      name: 'lamp-pro',
+      name: 'lighting-pro',
       // formats: ['es', 'cjs'],
-      fileName: 'lamp-pro',
+      fileName: 'lighting-pro',
     },
   }
 })
diff --git a/yarn.lock b/yarn.lock
index 4cf4234..82063e6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -701,17 +701,17 @@
     "@microsoft/tsdoc-config" "~0.16.1"
     "@rushstack/node-core-library" "3.61.0"
 
-"@microsoft/api-extractor@^7.33.5":
-  version "7.38.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.38.0.tgz#e72546d6766b3866578a462b040f71b17779e1c5"
-  integrity sha512-e1LhZYnfw+JEebuY2bzhw0imDCl1nwjSThTrQqBXl40hrVo6xm3j/1EpUr89QyzgjqmAwek2ZkIVZbrhaR+cqg==
+"@microsoft/api-extractor@^7.38.0":
+  version "7.38.2"
+  resolved "https://registry.npmmirror.com/@microsoft/api-extractor/-/api-extractor-7.38.2.tgz#fbc329fbec2b27a160507d08d02b78018fd142ac"
+  integrity sha512-JOARuhTwOcOMIU0O2czscoJy3ddVzIRhSA9/7T1ALuZSNphgWsPk+Bv4E7AnBDmTV4pP4lBNLtCxEHjjpWaytQ==
   dependencies:
     "@microsoft/api-extractor-model" "7.28.2"
     "@microsoft/tsdoc" "0.14.2"
     "@microsoft/tsdoc-config" "~0.16.1"
     "@rushstack/node-core-library" "3.61.0"
     "@rushstack/rig-package" "0.5.1"
-    "@rushstack/ts-command-line" "4.16.1"
+    "@rushstack/ts-command-line" "4.17.1"
     colors "~1.2.1"
     lodash "~4.17.15"
     resolve "~1.22.1"
@@ -765,7 +765,7 @@
   resolved "https://registry.yarnpkg.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
   integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
 
-"@rollup/pluginutils@^5.0.2":
+"@rollup/pluginutils@^5.0.2", "@rollup/pluginutils@^5.0.5":
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.5.tgz#bbb4c175e19ebfeeb8c132c2eea0ecb89941a66c"
   integrity sha512-6aEYR910NyP73oHiJglti74iRyOwgFU4x3meH/H8OJx6Ry0j6cOVZ5X/wTvub7G7Ao6qaHBEaNsV3GLJkSsF+Q==
@@ -774,9 +774,9 @@
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rushstack/node-core-library@3.61.0", "@rushstack/node-core-library@^3.53.2":
+"@rushstack/node-core-library@3.61.0":
   version "3.61.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.61.0.tgz#7441a0d2ae5268b758a7a49588a78cd55af57e66"
+  resolved "https://registry.npmmirror.com/@rushstack/node-core-library/-/node-core-library-3.61.0.tgz#7441a0d2ae5268b758a7a49588a78cd55af57e66"
   integrity sha512-tdOjdErme+/YOu4gPed3sFS72GhtWCgNV9oDsHDnoLY5oDfwjKUc9Z+JOZZ37uAxcm/OCahDHfuu2ugqrfWAVQ==
   dependencies:
     colors "~1.2.1"
@@ -795,26 +795,16 @@
     resolve "~1.22.1"
     strip-json-comments "~3.1.1"
 
-"@rushstack/ts-command-line@4.16.1":
-  version "4.16.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.16.1.tgz#3537bbc323f77c8646646465c579b992d39feb16"
-  integrity sha512-+OCsD553GYVLEmz12yiFjMOzuPeCiZ3f8wTiFHL30ZVXexTyPmgjwXEhg2K2P0a2lVf+8YBy7WtPoflB2Fp8/A==
+"@rushstack/ts-command-line@4.17.1":
+  version "4.17.1"
+  resolved "https://registry.npmmirror.com/@rushstack/ts-command-line/-/ts-command-line-4.17.1.tgz#c78db928ce5b93f2e98fd9e14c24f3f3876e57f1"
+  integrity sha512-2jweO1O57BYP5qdBGl6apJLB+aRIn5ccIRTPDyULh0KMwVzFqWtw6IZWt1qtUoZD/pD2RNkIOosH6Cq45rIYeg==
   dependencies:
     "@types/argparse" "1.0.38"
     argparse "~1.0.9"
     colors "~1.2.1"
     string-argv "~0.3.1"
 
-"@ts-morph/common@~0.18.0":
-  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/@ts-morph/common/-/common-0.18.1.tgz#ca40c3a62c3f9e17142e0af42633ad63efbae0ec"
-  integrity sha512-RVE+zSRICWRsfrkAw5qCAK+4ZH9kwEFv5h0+/YeHTLieWP7F4wWq4JsKFuNWG+fYh/KF+8rAtgdj5zb2mm+DVA==
-  dependencies:
-    fast-glob "^3.2.12"
-    minimatch "^5.1.0"
-    mkdirp "^1.0.4"
-    path-browserify "^1.0.1"
-
 "@types/argparse@1.0.38":
   version "1.0.38"
   resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
@@ -1181,6 +1171,13 @@
   dependencies:
     "@volar/source-map" "0.40.13"
 
+"@volar/language-core@1.10.10", "@volar/language-core@~1.10.5":
+  version "1.10.10"
+  resolved "https://registry.npmmirror.com/@volar/language-core/-/language-core-1.10.10.tgz#9c240a36dd4007b9c4f00739f6cecb81da54a49e"
+  integrity sha512-nsV1o3AZ5n5jaEAObrS3MWLBWaGwUj/vAsc15FVNIv+DbpizQRISg9wzygsHBr56ELRH8r4K75vkYNMtsSNNWw==
+  dependencies:
+    "@volar/source-map" "1.10.10"
+
 "@volar/source-map@0.40.13":
   version "0.40.13"
   resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.40.13.tgz#9acbc47614bbd8fa710d233d10fff1b18cb78a80"
@@ -1188,6 +1185,13 @@
   dependencies:
     "@vue/reactivity" "3.2.38"
 
+"@volar/source-map@1.10.10", "@volar/source-map@~1.10.5":
+  version "1.10.10"
+  resolved "https://registry.npmmirror.com/@volar/source-map/-/source-map-1.10.10.tgz#ec807fe60b8afe29e19bf6d1c90d2e76502df541"
+  integrity sha512-GVKjLnifV4voJ9F0vhP56p4+F3WGf+gXlRtjFZsv6v3WxBTWU3ZVeaRaEHJmWrcv5LXmoYYpk/SC25BKemPRkg==
+  dependencies:
+    muggle-string "^0.3.1"
+
 "@volar/typescript-faster@0.40.13":
   version "0.40.13"
   resolved "https://registry.yarnpkg.com/@volar/typescript-faster/-/typescript-faster-0.40.13.tgz#5d9600333cc250ad53e8604ff6a2a32e4acfbc86"
@@ -1195,6 +1199,14 @@
   dependencies:
     semver "^7.3.7"
 
+"@volar/typescript@~1.10.5":
+  version "1.10.10"
+  resolved "https://registry.npmmirror.com/@volar/typescript/-/typescript-1.10.10.tgz#1f88202c63988ddfcee154a93050312041b83329"
+  integrity sha512-4a2r5bdUub2m+mYVnLu2wt59fuoYWe7nf0uXtGHU8QQ5LDNfzAR0wK7NgDiQ9rcl2WT3fxT2AA9AylAwFtj50A==
+  dependencies:
+    "@volar/language-core" "1.10.10"
+    path-browserify "^1.0.1"
+
 "@volar/vue-language-core@0.40.13":
   version "0.40.13"
   resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-0.40.13.tgz#13a79c29ef63d66a40afd1b29166404703b240c4"
@@ -1257,6 +1269,16 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
+"@vue/compiler-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.3.8.tgz#301bb60d0245265a88ed5b30e200fbf223acb313"
+  integrity sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.44.tgz#0fac337a8a6b3cae586aa8cac62e418aa4c79a83"
@@ -1273,6 +1295,14 @@
     "@vue/compiler-core" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/compiler-dom@3.3.8", "@vue/compiler-dom@^3.3.0":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz#09d832514b9b8d9415a3816b065d69dbefcc7e9b"
+  integrity sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==
+  dependencies:
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/compiler-sfc@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.44.tgz#3cc87afdd39d1d9294b45bdd3402ef405d2b0938"
@@ -1305,6 +1335,22 @@
     postcss "^8.1.10"
     source-map-js "^1.0.2"
 
+"@vue/compiler-sfc@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz#40b18e48aa00260950964d1d72157668521be0e1"
+  integrity sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/reactivity-transform" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+    postcss "^8.4.31"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-ssr@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.44.tgz#efba77f4df4ea1727752637764f9d10498daa7df"
@@ -1321,11 +1367,33 @@
     "@vue/compiler-dom" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/compiler-ssr@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz#136eed54411e4694815d961048a237191063fbce"
+  integrity sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
 
+"@vue/language-core@1.8.22", "@vue/language-core@^1.8.20":
+  version "1.8.22"
+  resolved "https://registry.npmmirror.com/@vue/language-core/-/language-core-1.8.22.tgz#1ef62645fb9b1f830c6c84a5586e49e74727b1e3"
+  integrity sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==
+  dependencies:
+    "@volar/language-core" "~1.10.5"
+    "@volar/source-map" "~1.10.5"
+    "@vue/compiler-dom" "^3.3.0"
+    "@vue/shared" "^3.3.0"
+    computeds "^0.0.1"
+    minimatch "^9.0.3"
+    muggle-string "^0.3.1"
+    vue-template-compiler "^2.7.14"
+
 "@vue/reactivity-transform@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.44.tgz#dab1175ee8ef1fa7e9d3d9ffe177ed03f70d4021"
@@ -1348,6 +1416,17 @@
     estree-walker "^2.0.2"
     magic-string "^0.30.0"
 
+"@vue/reactivity-transform@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz#6d07649013b0be5c670f0ab6cc7ddd3150ad03f2"
+  integrity sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==
+  dependencies:
+    "@babel/parser" "^7.23.0"
+    "@vue/compiler-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+
 "@vue/reactivity@3.2.38":
   version "3.2.38"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.38.tgz#d576fdcea98eefb96a1f1ad456e289263e87292e"
@@ -1369,6 +1448,13 @@
   dependencies:
     "@vue/shared" "3.3.4"
 
+"@vue/reactivity@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.3.8.tgz#cce8a03a3fd3539c3eeda53e277ba365d160dd4d"
+  integrity sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==
+  dependencies:
+    "@vue/shared" "3.3.8"
+
 "@vue/runtime-core@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.44.tgz#14abcb1c005873a2d506eaa0bd41726997a82ea1"
@@ -1385,6 +1471,14 @@
     "@vue/reactivity" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/runtime-core@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.3.8.tgz#fba5a632cbf2b5d29e171489570149cb6975dcdb"
+  integrity sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==
+  dependencies:
+    "@vue/reactivity" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/runtime-dom@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.44.tgz#0618b3bc99e220c25e1134d4c0da97028458e3af"
@@ -1403,6 +1497,15 @@
     "@vue/shared" "3.3.4"
     csstype "^3.1.1"
 
+"@vue/runtime-dom@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz#e2d7aa795cf50914dda9a951887765a594b38af4"
+  integrity sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==
+  dependencies:
+    "@vue/runtime-core" "3.3.8"
+    "@vue/shared" "3.3.8"
+    csstype "^3.1.2"
+
 "@vue/server-renderer@3.2.44":
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.44.tgz#efeb4d99e2ff2f71b6ddb512009e6b31bedc8ed5"
@@ -1419,6 +1522,14 @@
     "@vue/compiler-ssr" "3.3.4"
     "@vue/shared" "3.3.4"
 
+"@vue/server-renderer@3.3.8":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.3.8.tgz#9b1779010e75783edeed8fcfb97d9c95fc3ac5d2"
+  integrity sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==
+  dependencies:
+    "@vue/compiler-ssr" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 "@vue/shared@3.2.38":
   version "3.2.38"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.38.tgz#e823f0cb2e85b6bf43430c0d6811b1441c300f3c"
@@ -1434,6 +1545,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.3.4.tgz#06e83c5027f464eef861c329be81454bc8b70780"
   integrity sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==
 
+"@vue/shared@3.3.8", "@vue/shared@^3.3.0":
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.3.8.tgz#f044942142e1d3a395f24132e6203a784838542d"
+  integrity sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==
+
 "@vueuse/core@^10.1.0":
   version "10.5.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.5.0.tgz#04d1e6d26592bb997bb755a4830ea7583c3e8612"
@@ -1713,11 +1829,6 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
-code-block-writer@^11.0.3:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-11.0.3.tgz#9eec2993edfb79bfae845fbc093758c0a0b73b76"
-  integrity sha512-NiujjUFB4SwScJq2bwbYUtXbZhBSlY6vYzm++3Q6oC+U+injTqfPYFK8wS9COOmb2lueqp0ZRB4nK1VYeHgNyw==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -1764,6 +1875,11 @@ commander@^10.0.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
   integrity sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==
 
+computeds@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmmirror.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
+  integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -1806,7 +1922,7 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
-csstype@^3.1.1:
+csstype@^3.1.1, csstype@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -1816,6 +1932,11 @@ dayjs@^1.11.3:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
 
+de-indent@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
+
 debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -2338,7 +2459,7 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-fs-extra@^10.0.0, fs-extra@^10.1.0:
+fs-extra@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
   integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
@@ -2509,6 +2630,11 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+he@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
+
 html-tags@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
@@ -2708,7 +2834,7 @@ keyv@^4.5.3:
   dependencies:
     json-buffer "3.0.1"
 
-kolorist@^1.6.0, kolorist@^1.8.0:
+kolorist@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
@@ -2812,6 +2938,13 @@ magic-string@^0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+magic-string@^0.30.5:
+  version "0.30.5"
+  resolved "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 mark.js@8.11.1:
   version "8.11.1"
   resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
@@ -2890,10 +3023,10 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^5.1.0:
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
-  integrity sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==
+minimatch@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
   dependencies:
     brace-expansion "^2.0.1"
 
@@ -2902,11 +3035,6 @@ minisearch@^6.0.1:
   resolved "https://registry.yarnpkg.com/minisearch/-/minisearch-6.1.0.tgz#6e74e743dbd0e88fa5ca52fef2391e0aa7055252"
   integrity sha512-PNxA/X8pWk+TiqPbsoIYH0GQ5Di7m6326/lwU/S4mlo4wGQddIcf/V//1f9TB0V4j59b57b+HZxt8h3iMROGvg==
 
-mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
 mlly@^1.1.0, mlly@^1.2.0, mlly@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/mlly/-/mlly-1.4.2.tgz#7cf406aa319ff6563d25da6b36610a93f2a8007e"
@@ -2927,6 +3055,11 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+muggle-string@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.npmmirror.com/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
+  integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
+
 nanoid@^3.3.6:
   version "3.3.6"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
@@ -3141,7 +3274,7 @@ postcss-selector-parser@^6.0.13:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss@^8.1.10, postcss@^8.4.18, postcss@^8.4.23, postcss@^8.4.27:
+postcss@^8.1.10, postcss@^8.4.18, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.31:
   version "8.4.31"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -3513,14 +3646,6 @@ totalist@^3.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
   integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
-ts-morph@17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/ts-morph/-/ts-morph-17.0.1.tgz#d85df4fcf9a1fcda1b331d52c00655f381c932d1"
-  integrity sha512-10PkHyXmrtsTvZSL+cqtJLTgFXkU43Gd0JCc0Rw6GchWbqKe0Rwgt1v3ouobTZwQzF1mGhDeAlWYBMGRV7y+3g==
-  dependencies:
-    "@ts-morph/common" "~0.18.0"
-    code-block-writer "^11.0.3"
-
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -3547,7 +3672,7 @@ type-fest@^0.20.2:
 
 typescript@^4.6.4:
   version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  resolved "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
   integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
 
 typescript@~5.0.4:
@@ -3684,19 +3809,17 @@ vite-plugin-compression@^0.5.1:
     debug "^4.3.3"
     fs-extra "^10.0.0"
 
-vite-plugin-dts@^1.7.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/vite-plugin-dts/-/vite-plugin-dts-1.7.3.tgz#cf0c243fff9ae3fc1f103987b97439b3bf813f15"
-  integrity sha512-u3t45p6fTbzUPMkwYe0ESwuUeiRMlwdPfD3dRyDKUwLe2WmEYcFyVp2o9/ke2EMrM51lQcmNWdV9eLcgjD1/ng==
+vite-plugin-dts@3.6.3:
+  version "3.6.3"
+  resolved "https://registry.npmmirror.com/vite-plugin-dts/-/vite-plugin-dts-3.6.3.tgz#7d79f2fe9352841f3b76cc38e8c16be957c9cdcb"
+  integrity sha512-NyRvgobl15rYj65coi/gH7UAEH+CpSjh539DbGb40DfOTZSvDLNYTzc8CK4460W+LqXuMK7+U3JAxRB3ksrNPw==
   dependencies:
-    "@microsoft/api-extractor" "^7.33.5"
-    "@rollup/pluginutils" "^5.0.2"
-    "@rushstack/node-core-library" "^3.53.2"
+    "@microsoft/api-extractor" "^7.38.0"
+    "@rollup/pluginutils" "^5.0.5"
+    "@vue/language-core" "^1.8.20"
     debug "^4.3.4"
-    fast-glob "^3.2.12"
-    fs-extra "^10.1.0"
-    kolorist "^1.6.0"
-    ts-morph "17.0.1"
+    kolorist "^1.8.0"
+    vue-tsc "^1.8.20"
 
 vite-plugin-vue-setup-extend@^0.4.0:
   version "0.4.0"
@@ -3787,6 +3910,11 @@ vue-hooks-plus@^1.8.5:
     query-string "^7.1.1"
     screenfull "^5.0.0"
 
+vue-loading-overlay@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.npmmirror.com/vue-loading-overlay/-/vue-loading-overlay-6.0.3.tgz#37b2e45d5a5e207fda69c01dac0dba059cc05173"
+  integrity sha512-Ab0hqnVKasVS2mNUo8Wkm95mSbk5fXp/karZmMou5yP0hTUOox/kZuBLNwgzJ4kFP829wFJl7O7FN1Dr0kRaVQ==
+
 vue-router@^4.1.5:
   version "4.2.5"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.2.5.tgz#b9e3e08f1bd9ea363fdd173032620bc50cf0e98a"
@@ -3794,6 +3922,14 @@ vue-router@^4.1.5:
   dependencies:
     "@vue/devtools-api" "^6.5.0"
 
+vue-template-compiler@^2.7.14:
+  version "2.7.15"
+  resolved "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.15.tgz#ec88ba8ceafe0f17a528b89c57e01e02da92b0de"
+  integrity sha512-yQxjxMptBL7UAog00O8sANud99C6wJF+7kgbcwqkvA38vCGF7HWE66w0ZFnS/kX5gSoJr/PQ4/oS3Ne2pW37Og==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-tsc@^0.40.4:
   version "0.40.13"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.40.13.tgz#0a193014f7cadb47459cf0809ce3953b74a1348c"
@@ -3802,6 +3938,22 @@ vue-tsc@^0.40.4:
     "@volar/vue-language-core" "0.40.13"
     "@volar/vue-typescript" "0.40.13"
 
+vue-tsc@^1.8.20:
+  version "1.8.22"
+  resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-1.8.22.tgz#421e73c38b50802a6716ca32ed87b5970c867323"
+  integrity sha512-j9P4kHtW6eEE08aS5McFZE/ivmipXy0JzrnTgbomfABMaVKx37kNBw//irL3+LlE3kOo63XpnRigyPC3w7+z+A==
+  dependencies:
+    "@volar/typescript" "~1.10.5"
+    "@vue/language-core" "1.8.22"
+    semver "^7.5.4"
+
+vue3-print-nb@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmmirror.com/vue3-print-nb/-/vue3-print-nb-0.1.4.tgz#11ee3ef8857c34b403fb782da722e82ab7e20952"
+  integrity sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==
+  dependencies:
+    vue "^3.0.5"
+
 vue@3.2.44:
   version "3.2.44"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.44.tgz#57581fcc753b8187aae9cf90254f9fa88f7b8ffd"
@@ -3813,6 +3965,17 @@ vue@3.2.44:
     "@vue/server-renderer" "3.2.44"
     "@vue/shared" "3.2.44"
 
+vue@^3.0.5:
+  version "3.3.8"
+  resolved "https://registry.npmmirror.com/vue/-/vue-3.3.8.tgz#532ff071af24f6a69e5ecc53a66858a9ee874ffc"
+  integrity sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==
+  dependencies:
+    "@vue/compiler-dom" "3.3.8"
+    "@vue/compiler-sfc" "3.3.8"
+    "@vue/runtime-dom" "3.3.8"
+    "@vue/server-renderer" "3.3.8"
+    "@vue/shared" "3.3.8"
+
 vue@^3.2.47:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.3.4.tgz#8ed945d3873667df1d0fcf3b2463ada028f88bd6"