diff --git a/package.json b/package.json
index dc3bd550..d58bfb7f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "@element-plus/icons-vue": "2.3.2",
     "@highlightjs/vue-plugin": "2.1.2",
     "@vueup/vue-quill": "1.2.0",
-    "@vueuse/core": "13.9.0",
+    "@vueuse/core": "13.1.0",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "animate.css": "4.1.1",
     "await-to-js": "3.0.0",
     "axios": "1.13.1",
diff --git a/src/assets/styles/ruoyi.scss b/src/assets/styles/ruoyi.scss
index 95260178..a836e3cb 100644
--- a/src/assets/styles/ruoyi.scss
+++ b/src/assets/styles/ruoyi.scss
@@ -193,6 +193,7 @@ h6 {
 }
 
 .el-card__body {
+  height: 100%;
   padding: 15px 20px 20px 20px !important;
 }
 
diff --git a/src/components/FormTable/index.vue b/src/components/FormTable/index.vue
new file mode 100644
index 00000000..3593e920
--- /dev/null
+++ b/src/components/FormTable/index.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="table-container">
+    <el-row>
+      <slot name="topButton" />
+    </el-row>
+    <div class="table">
+      <!-- 表格组件 如需其他事件 请参考官方文档在下方添加 -->
+      <el-table
+        id="iTable"
+        ref="iTableRef"
+        v-loading="loading"
+        element-loading-text="正在加载中..."
+        element-loading-spinner="el-icon-loading"
+        :height="height"
+        :max-height="maxHeight"
+        :row-key="rowKey"
+        :data="tableData"
+        show-overflow-tooltip
+        v-bind="options"
+        @sort-change="sortChange"
+        @selection-change="handleSelectionChange"
+        :tree-props="treeProps"
+        stripe
+      >
+        <!-- 渲染所有列，包括多级表头 -->
+        <template v-for="(column, index) in processedHeaders" :key="index + (column.prop || '')">
+          <!-- 特殊列处理：selection、index 其他后续补充 -->
+          <el-table-column
+            v-if="column.type === 'selection'"
+            type="selection"
+            :width="column.width || 50"
+            :align="column.align || 'center'"
+            :fixed="column.fixed"
+          />
+          <el-table-column
+            v-else-if="column.type === 'index'"
+            type="index"
+            :label="column.label || '序号'"
+            :width="column.width || 60"
+            :align="column.align || 'center'"
+            :index="column.indexMethod"
+            :fixed="column.fixed"
+          />
+          <!-- 多级表头处理 -->
+          <el-table-column
+            v-else-if="column.children && column.children.length"
+            :label="column.label"
+            :align="column.align || 'center'"
+            :min-width="headSpanFit(column)"
+          >
+            <!-- 递归渲染子列 -->
+            <template v-for="(child, childIndex) in column.children" :key="childIndex + (child.prop || '')">
+              <el-table-column v-if="isColumnVisible(child)" :min-width="headSpanFit(child)" v-bind="child">
+                <!-- 子列的插槽和内容渲染（与普通列相同） -->
+                <template v-for="(value, key) in child.slot" #[key]="scope">
+                  <slot :name="value" v-bind="scope"></slot>
+                </template>
+                <template v-if="!child.slot" #default="scope">
+                  <template v-if="child.render">
+                    <div v-if="isString(getRenderContent(child, scope))" @click.stop="child.render(scope)">
+                      <div v-html="getRenderContent(child, scope)"></div>
+                    </div>
+                    <component v-else :is="child.render" v-bind="scope" :row="scope.row" :index="scope.$index" @click.stop />
+                  </template>
+                  <template v-else-if="child.formatter">
+                    <span v-html="child.formatter(scope.row, child)"></span>
+                  </template>
+                  <template v-else-if="child.dict">
+                    <dict-tag :options="useDict(child.dict)[child.dict]" :value="scope.row[child.prop]" />
+                  </template>
+                  <template v-else-if="!child.type">
+                    <span>{{ scope.row[child.prop] ?? '--' }}</span>
+                  </template>
+                </template>
+              </el-table-column>
+            </template>
+          </el-table-column>
+          <!-- 普通列 -->
+          <el-table-column v-else-if="isColumnVisible(column)" :min-width="headSpanFit(column)" v-bind="column">
+            <!-- 渲染插槽 -->
+            <template v-for="(value, key) in column.slot" #[key]="scope">
+              <slot :name="value" v-bind="scope"></slot>
+            </template>
+
+            <!-- 渲染默认内容 -->
+            <template v-if="!column.slot" #default="scope">
+              <!-- 渲染render -->
+              <template v-if="column.render">
+                <div v-if="isString(getRenderContent(column, scope))" @click.stop="column.render(scope)">
+                  <div v-html="getRenderContent(column, scope)"></div>
+                </div>
+                <component v-else :is="column.render" v-bind="scope" :row="scope.row" :index="scope.$index" @click.stop />
+              </template>
+
+              <!-- 渲染formatter -->
+              <template v-else-if="column.formatter">
+                <span v-html="column.formatter(scope.row, column)"></span>
+              </template>
+
+              <!-- 渲染字典内容 -->
+              <template v-else-if="column.dict">
+                <dict-tag :options="useDict(column.dict)[column.dict]" :value="scope.row[column.prop]" />
+              </template>
+
+              <!-- 渲染默认内容 -->
+              <template v-else-if="!column.type">
+                <span>{{ scope.row[column.prop] ?? '--' }}</span>
+              </template>
+            </template>
+          </el-table-column>
+        </template>
+
+        <!-- 操作列 -->
+        <el-table-column v-if="operates.list?.length" label="操作" align="left" :width="operates.width" :fixed="operates.fixed">
+          <template #default="scope">
+            <div class="operate-group">
+              <!-- 渲染外部按钮 -->
+              <template v-for="(item, idx) in getVisibleButtons(scope.row).outside" :key="idx">
+                <el-button
+                  v-bind="item"
+                  :type="item.type || 'primary'"
+                  :size="item.size || 'small'"
+                  @click.stop="item.method(scope.row, scope.$index)"
+                >
+                  {{ item.label }}
+                </el-button>
+              </template>
+
+              <!-- 渲染下拉按钮 -->
+              <el-dropdown v-if="getVisibleButtons(scope.row).inside.length" class="custom-dropdown" trigger="click">
+                <el-button link size="small" class="custom-text">
+                  <el-icon :size="18"><MoreFilled /></el-icon>
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-for="(item, idx) in getVisibleButtons(scope.row).inside"
+                      :key="idx"
+                      v-bind="item"
+                      @click="item.method(scope.row, scope.$index)"
+                    >
+                      {{ item.label }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="!hidden" class="pagination-container" :style="{ justifyContent: paginationJustify }">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :background="background"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :pager-count="pagerCount"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, useSlots, watch } from 'vue'
+  import { MoreFilled } from '@element-plus/icons-vue'
+  import { scrollTo } from '@/utils/scroll-to'
+  import { isString, isFunction } from '@/utils/index'
+  import { havePermi } from '@/plugins/auth'
+
+  defineOptions({ name: 'FormTable' })
+
+  const props = defineProps({
+    height: { type: String, default: '300px' },
+    maxHeight: { type: String, default: '100%' },
+    loading: { type: Boolean, default: false },
+    columns: { type: Array, default: () => [] },
+    tableData: { type: Array, default: () => [] },
+    total: { type: Number, default: 0 },
+    page: { type: Number, default: 1 },
+    options: {
+      type: Object,
+      default: () => ({ stripe: false, highlightCurrentRow: false, border: true })
+    },
+    limit: { type: Number, default: 20 },
+    pageSizes: { type: Array, default: () => [10, 20, 30, 50] },
+    pagerCount: {
+      type: Number,
+      default: () => (typeof document !== 'undefined' && document.body.clientWidth < 992 ? 5 : 7)
+    },
+    layout: { type: String, default: 'total, sizes, prev, pager, next, jumper' },
+    background: { type: Boolean, default: true },
+    autoScroll: { type: Boolean, default: true },
+    hidden: { type: Boolean, default: false },
+    operates: { type: Object, default: () => ({ list: [] }) },
+    paginationPosition: { type: String, default: 'right' },
+    treeProps: {
+      type: Object,
+      default: () => ({ children: 'children', hasChildren: 'hasChildren' })
+    },
+    rowKey: { type: String, default: 'id' }
+  })
+
+  const emit = defineEmits(['update:page', 'update:limit', 'pagination', 'sortChange', 'handleSelectionChange'])
+
+  const slots = useSlots()
+  const iTableRef = ref(null)
+  const processedHeaders = ref([])
+
+  /** 1. 逻辑优化：使用 watch 监听 columns 变化，避免在 onBeforeUpdate 中过度计算 **/
+  watch(
+    () => [props.columns, slots],
+    () => {
+      processedHeaders.value = props.columns.map(column => {
+        const col = { ...column }
+        if (!col.key) col.key = col.prop
+
+        // 匹配插槽逻辑保持不变
+        Object.keys(slots).forEach(key => {
+          const res = key.match(/^(\S+)-(\S+)/)
+
+          if (res && res[2] === col.key) {
+            col.slot = { ...col.slot, [res[1]]: res[0] }
+          }
+        })
+
+        return col
+      })
+    },
+    { immediate: true, deep: true }
+  )
+
+  /** 2. 工具函数 **/
+
+  // 计算表头宽度
+  const headSpanFit = column => {
+    const labelLen = column?.label?.length || 0
+    return Math.max(labelLen * 20, 100)
+  }
+
+  // 判断列是否显示
+  const isColumnVisible = column => {
+    if (isFunction(column.show)) return column.show()
+    return column.show !== false
+  }
+
+  // 获取渲染内容
+  const getRenderContent = (column, scope) => {
+    return isFunction(column.render) ? column.render(scope) : column.render
+  }
+
+  // 获取可见按钮
+  const getVisibleButtons = row => {
+    const list = (props.operates?.list || []).filter(item => {
+      if (item.permission) {
+        return havePermi(item.permission)
+      }
+      return isFunction(item.show) ? item.show(row) : item.show !== false
+    })
+    return list.length > 3
+      ? {
+          outside: list.slice(0, 2),
+          inside: list.slice(2)
+        }
+      : {
+          outside: list,
+          inside: []
+        }
+  }
+
+  /** 3. 分页计算属性 **/
+  // 当前页码
+  const currentPage = computed({
+    get: () => props.page,
+    set: val => emit('update:page', val)
+  })
+
+  // 每页条数
+  const pageSize = computed({
+    get: () => props.limit,
+    set: val => emit('update:limit', val)
+  })
+
+  // 分页对齐方式
+  const paginationJustify = computed(() => {
+    const map = { left: 'flex-start', center: 'center', right: 'flex-end' }
+    return map[props.paginationPosition] || 'flex-end'
+  })
+
+  /** 4. 事件处理 **/
+  // 改变每页条数
+  const handleSizeChange = val => {
+    if (currentPage.value * val > props.total) currentPage.value = 1
+    emit('pagination', { page: currentPage.value, limit: val })
+    if (props.autoScroll) scrollTo(0, 800)
+  }
+
+  // 改变当前页
+  const handleCurrentChange = val => {
+    emit('pagination', { page: val, limit: pageSize.value })
+    if (props.autoScroll) scrollTo(0, 800)
+  }
+
+  // 改变排序
+  const sortChange = args => emit('sortChange', args)
+
+  // 改变选择
+  const handleSelectionChange = val => emit('handleSelectionChange', val)
+
+  defineExpose({ iTableRef })
+</script>
+
+<style scoped lang="scss">
+  .table-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+
+    .table {
+      flex: 1;
+      position: relative;
+      :deep(.el-table) {
+        position: absolute;
+        height: 100%;
+      }
+    }
+  }
+
+  .pagination-container {
+    padding: 16px 0;
+    display: flex;
+  }
+
+  .operate-group {
+    display: flex;
+    align-items: center;
+
+    .el-button + .el-button,
+    .el-button + .custom-dropdown {
+      margin-left: 16px;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 12px;
+        background-color: #dcdfe6;
+      }
+    }
+
+    :deep(.custom-text) {
+      color: #606266;
+      padding: 0;
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SearchForm/exSlot.tsx b/src/components/SearchForm/exSlot.tsx
new file mode 100644
index 00000000..e5467c01
--- /dev/null
+++ b/src/components/SearchForm/exSlot.tsx
@@ -0,0 +1,34 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ex-slot',
+  props: {
+    value: [String, Number],
+    row: Object,
+    render: Function,
+    rowIndex: Number,
+    column: Object,
+    columnIndex: Number,
+    class: [String, Array, Object],
+    style: [String, Array, Object],
+    dict: [Array]
+  },
+  render() {
+    const value = this.render({
+      value: this.value,
+      row: this.row,
+      column: this.column,
+      rowIndex: this.rowIndex,
+      columnIndex: this.columnIndex,
+      dict: this.dict
+    });
+    if (this.style || this.class) {
+      return (
+        <div style={this.style} class={this.class}>
+          {value}
+        </div>
+      );
+    }
+    return value;
+  }
+});
diff --git a/src/components/SearchForm/formElem.vue b/src/components/SearchForm/formElem.vue
new file mode 100644
index 00000000..ed204408
--- /dev/null
+++ b/src/components/SearchForm/formElem.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-input
+    v-if="['text', 'number', 'textarea'].includes(config.type)"
+    v-model="value"
+    :type="config.type"
+    :clearable="config.clearable"
+    :placeholder="config.placeholder || '请输入'"
+    :readonly="config.readonly"
+    :suffix-icon="typeof config.suffixIcon == 'string' ? config.suffixIcon : ''"
+    :prefix-icon="typeof config.prefixIcon == 'string' ? config.prefixIcon : ''"
+    :disabled="config.disabled"
+    :rows="config.rows || 2"
+    :class="config.class"
+    :style="config.style"
+    @click="$event => typeof config.click == 'function' && config.click(value, $event)"
+    @mousewheel.prevent
+    @keydown.up.prevent
+    @keydown.down.prevent
+  >
+    <template #suffix>
+      <ex-slot v-if="typeof config.suffixIcon == 'function'" :render="config.suffixIcon" :value="value" />
+    </template>
+    <template #prefix>
+      <ex-slot v-if="typeof config.prefixIcon == 'function'" :render="config.prefixIcon" :value="value" />
+    </template>
+  </el-input>
+  <el-select
+    ref="select"
+    v-else-if="config.type == 'select'"
+    v-model="value"
+    :clearable="config.clearable"
+    :placeholder="config.placeholder || '请选择'"
+    :multiple="config.multiple"
+    :filterable="config.filterable"
+    :disabled="config.disabled"
+    :loading="config.loading"
+    :loading-text="config.loadingText"
+    :class="config.class"
+    :style="config.style"
+    :teleported="false"
+    :fit-input-width="config.fitInputWidth || false"
+    :collapse-tags="config.collapseTags"
+    :collapse-tags-tooltip="config.collapseTagsTooltip"
+    :max-collapse-tags="config.maxCollapseTags"
+    @change="$event => typeof config.change == 'function' && config.change($event, $refs.select)"
+    @visible-change="$event => typeof config.visibleChange == 'function' && config.visibleChange($event, $refs.select)"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="index"
+      :value="config.props?.value ? item[config.props?.value] : item"
+      :label="config.props?.label ? item[config.props?.label] : item"
+    />
+  </el-select>
+  <el-tree-select
+    v-else-if="config.type == 'treeselect'"
+    v-model="value"
+    :node-key="config.nodeKey || 'id'"
+    :data="config.options"
+    :props="config.props"
+    :clearable="config.clearable"
+    :placeholder="config.placeholder || '请选择'"
+    :multiple="config.multiple"
+    :filterable="config.filterable"
+    :disabled="config.disabled"
+    :check-strictly="config.checkStrictly"
+    :show-checkbox="config.showCheckbox"
+    :check-on-click-node="config.checkOnClickNode"
+    :loading="config.loading"
+    :loading-text="config.loadingText"
+    :highlight-current="config.highlightCurrent"
+    :class="config.class"
+    :style="config.style"
+    @change="$event => typeof config.change == 'function' && config.change($event)"
+  />
+  <el-date-picker
+    v-else-if="
+      ['year', 'month', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange'].includes(config.type)
+    "
+    v-model="value"
+    :clearable="config.clearable"
+    :editable="config.editable"
+    :type="config.type"
+    :placeholder="config.placeholder || '请选择'"
+    :range-separator="config.rangeSeparator"
+    :start-placeholder="config.startPlaceholder || '开始时间'"
+    :end-placeholder="config.endPlaceholder || '结束时间'"
+    :default-time="config.defaultTime"
+    :default-value="config.defaultValue"
+    :value-format="config.valueFormat"
+    :disabled="config.disabled"
+    :shortcuts="config.shortcuts"
+    :class="config.class"
+    :style="config.style"
+    @change="$event => typeof config.change == 'function' && config.change($event)"
+  />
+  <el-time-select
+    v-else-if="config.type == 'timeselect'"
+    v-model="value"
+    :type="config.type"
+    :start="config.start || '00:00'"
+    :step="config.step || '00:01'"
+    :end="config.start || '23:59'"
+    :placeholder="config.placeholder || '请选择'"
+    :class="config.class"
+    :style="config.style"
+  />
+  <el-time-picker
+    v-else-if="config.type == 'timepicker'"
+    v-model="value"
+    :editable="config.editable"
+    :is-range="config.isRange"
+    :placeholder="config.placeholder || '请选择'"
+    :start-placeholder="config.startPlaceholder || '开始时间'"
+    :end-placeholder="config.endPlaceholder || '结束时间'"
+    :range-separator="config.rangeSeparator"
+    :clearable="config.clearable"
+    :class="config.class"
+    :style="config.style"
+  />
+  <el-autocomplete
+    v-else-if="config.type == 'autocomplete'"
+    v-model="value"
+    :disabled="config.disabled"
+    :value-key="config.valueKey || 'value'"
+    :debounce="config.debounce || 300"
+    :placement="config.placement || 'bottom-start'"
+    :fetch-suggestions="config.fetchSuggestions"
+    :clearable="config.clearable"
+    :placeholder="config.placeholder || '请输入'"
+    @select="$event => typeof config.select == 'function' && config.select($event)"
+  />
+</template>
+
+<script>
+  import exSlot from '@/components/SearchForm/exSlot'
+  import request from '@/utils/request'
+  import { useDictStore } from '@/store/modules/dict'
+  export default {
+    name: 'form-elem',
+    components: {
+      exSlot
+    },
+    props: {
+      config: Object,
+      start: {
+        type: String,
+        default: ''
+      },
+      end: {
+        type: String,
+        default: ''
+      }
+    },
+    data() {
+      return {
+        dictOptions: []
+      }
+    },
+    computed: {
+      options() {
+        return this.config.options || this.dictOptions
+      }
+    },
+    created() {
+      this.requestApi()
+      this.loadDict()
+    },
+    methods: {
+      requestApi() {
+        if (this.config.request) {
+          request({
+            url: this.config.request.url,
+            method: this.config.request.method,
+            params: this.config.request.params
+          }).then(res => {
+            if (res.data.success) {
+              // eslint-disable-next-line vue/no-mutating-props
+              this.config.options = res.data.data
+            }
+          })
+        }
+      },
+      async loadDict() {
+        if (this.config.dict) {
+          const dictStore = useDictStore() // 获取字典存储实例
+          let dictData = dictStore.getDict(this.config.dict) // 从缓存中获取字典数据
+          if (!dictData) {
+            // 如果缓存中没有字典数据，则请求后存储
+            const response = await request({
+              url: `/system/dict/data/type/${this.config.dict}`,
+              method: 'get'
+            })
+            dictData = response.data.map(item => ({
+              label: item.dictLabel,
+              value: item.dictValue
+            }))
+            dictStore.setDict(this.config.dict, dictData) // 存储到字典缓存
+          }
+          this.dictOptions = dictData // 更新组件的字典选项
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(input::-webkit-outer-spin-button),
+  :deep(input::-webkit-inner-spin-button) {
+    -webkit-appearance: none !important;
+  }
+  :deep(input[type='number']) {
+    -moz-appearance: textfield !important;
+  }
+</style>
diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
new file mode 100644
index 00000000..ae9860df
--- /dev/null
+++ b/src/components/SearchForm/index.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="w-100" ref="wrap">
+    <el-form :model="model" @submit.prevent @keyup.enter="search" inline>
+      <el-form-item
+        v-for="(item, index) in config"
+        :key="index"
+        :ref="item.prop || `${item.start}_${item.end}`"
+        :label="`${item.label}：`"
+        label-width="auto"
+      >
+        <form-elem v-model="model[item.prop]" :config="item" />
+      </el-form-item>
+      <el-form-item ref="search" style="margin-right: 0px">
+        <template v-if="isSearch">
+          <el-button type="primary" icon="Search" @click="search">搜索</el-button>
+          <el-button type="warning" icon="Refresh" v-if="isReset" @click="reset">重置</el-button>
+        </template>
+        <slot />
+      </el-form-item>
+    </el-form>
+    <template v-if="suffixConfig.length > 0">
+      <el-form v-if="visible" :model="model" @submit.prevent @keyup.enter="search" inline>
+        <el-form-item
+          v-for="(item, index) in suffixConfig"
+          :key="index"
+          :ref="item.prop || `${item.start}_${item.end}`"
+          :label="`${item.label}：`"
+          label-width="auto"
+        >
+          <form-elem v-model="model[item.prop]" :config="item" />
+        </el-form-item>
+      </el-form>
+      <div class="cursor-pointer" @click="showMore">
+        <el-divider>
+          {{ visible ? '折叠' : '更多' }}
+          <el-icon>
+            <ArrowUp v-if="visible" />
+            <ArrowDown v-else />
+          </el-icon>
+        </el-divider>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import { validatenull } from '@/utils/validate'
+  import formElem from './formElem.vue'
+
+  export default {
+    name: 'search-form',
+    components: {
+      'form-elem': formElem
+    },
+    props: {
+      //表单值
+      model: {
+        type: Object,
+        default: () => {}
+      },
+      //表单显示配置
+      configs: {
+        type: Array,
+        default: () => []
+      },
+      //是否显示重置按钮
+      isReset: {
+        type: Boolean,
+        default: true
+      },
+      //是否显示搜索按钮
+      isSearch: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        visible: false,
+        prefixConfig: [],
+        suffixConfig: []
+      }
+    },
+    computed: {
+      config() {
+        return this.prefixConfig.length > 0 ? this.prefixConfig : this.configs
+      }
+    },
+    watch: {
+      configs: 'resize'
+    },
+    beforeMount() {
+      const dicts = []
+      this.configs.forEach(item => item.dict && !dicts.includes(item.dict) && dicts.push(item.dict))
+    },
+    mounted() {
+      this.resize()
+    },
+    methods: {
+      showMore() {
+        this.visible = !this.visible
+        this.$emit('toggle', this.visible)
+      },
+      resize() {
+        this.prefixConfig = []
+        this.suffixConfig = []
+        const wrapWidth = this.$refs.wrap.offsetWidth
+        const btnWidth = this.$refs.search?.$el.offsetWidth || 0
+        const formWidth = wrapWidth - btnWidth - 1
+        let width = 0
+        for (let index = 0; index < this.configs.length; index++) {
+          const item = this.configs[index]
+          const prop = item.prop || `${item.start}_${item.end}`
+          this.initialize(item)
+          this.$nextTick(() => {
+            if (validatenull(item.width) && this.$refs[prop]) {
+              const elem = this.$refs[prop][0].$el
+              item.width = elem.offsetWidth + 32
+            }
+            width += item.width
+            if (index == 0 && item.width > formWidth) {
+              this.prefixConfig.push(item)
+            } else {
+              width > formWidth ? this.suffixConfig.push(item) : this.prefixConfig.push(item)
+            }
+          })
+        }
+        this.$nextTick(() => this.$emit('resize'))
+      },
+      initialize(item) {
+        if (!('type' in item)) item.type = 'text'
+        if (!('clearable' in item)) item.clearable = true
+        if (!('props' in item) && item.dict) {
+          item.props = {
+            value: 'value',
+            label: 'label'
+          }
+        }
+        if (!('placeholder' in item)) {
+          if (['text', 'number', 'autocomplete'].includes(item.type)) {
+            item.placeholder = `请输入${item.label}`
+          } else if (['select', 'treeselect', 'year', 'month', 'week', 'date', 'datetime'].includes(item.type)) {
+            item.placeholder = `请选择${item.label}`
+          }
+        }
+        if (['select', 'treeselect'].includes(item.type)) {
+          if (item.loading && !('loadingText' in item)) item.loadingText = '加载中...'
+          if (item.type == 'treeselect') {
+            if (!('checkOnClickNode' in item)) item.checkOnClickNode = true
+            if (!('checkStrictly' in item)) item.checkStrictly = true
+            if (item.multiple && !('showCheckbox' in item)) item.showCheckbox = true
+          }
+        }
+        if (['datetimerange', 'daterange', 'monthrange'].includes(item.type)) {
+          if (!('startPlaceholder' in item)) {
+            item.startPlaceholder = '开始时间'
+          }
+          if (!('endPlaceholder' in item)) {
+            item.endPlaceholder = '结束时间'
+          }
+        }
+      },
+      search() {
+        this.$emit('search')
+      },
+      reset() {
+        this.$emit('reset')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-form-item--small) {
+    margin-bottom: 10px;
+  }
+  .w-100 {
+    width: 100%;
+  }
+</style>
+<style lang="scss">
+  .el-divider--horizontal {
+    margin: 10px 0;
+  }
+</style>
diff --git a/src/components/SearchPanel/index.vue b/src/components/SearchPanel/index.vue
new file mode 100644
index 00000000..e16ecded
--- /dev/null
+++ b/src/components/SearchPanel/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <div v-if="isCard" style="height: 100%">
+    <search-form
+      ref="search"
+      :configs="configs"
+      :model="model"
+      :is-reset="isReset"
+      :is-search="isSearch"
+      @search="search"
+      @reset="reset"
+      @toggle="toggle"
+      @resize="toggle"
+    >
+      <slot name="button" />
+    </search-form>
+    <div ref="wrap">
+      <slot />
+    </div>
+  </div>
+  <div v-else style="height: 100%">
+    <search-form
+      ref="search"
+      :configs="configs"
+      :model="model"
+      :is-reset="isReset"
+      :is-search="isSearch"
+      @search="search"
+      @reset="reset"
+      @toggle="toggle"
+      @resize="toggle"
+    />
+    <div ref="wrap">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+  import SearchForm from '@/components/SearchForm/index.vue'
+  export default {
+    name: 'search-panel',
+    components: {
+      'search-form': SearchForm
+    },
+    props: {
+      //表单值
+      model: {
+        type: Object,
+        default: () => {}
+      },
+      //表单显示配置
+      configs: {
+        type: Array,
+        default: () => []
+      },
+      //是否显示重置按钮
+      isReset: {
+        type: Boolean,
+        default: true
+      },
+      //是否显示搜索按钮
+      isSearch: {
+        type: Boolean,
+        default: true
+      },
+      //是否卡片展示
+      isCard: {
+        type: Boolean,
+        default: true
+      }
+    },
+    mounted() {
+      this.toggle()
+    },
+    methods: {
+      search() {
+        this.$emit('search')
+      },
+      reset() {
+        this.$emit('reset')
+      },
+      toggle() {
+        if (this.$refs.search) {
+          this.$nextTick(() => {
+            const elem = this.$refs.search.$el
+            const offsetHeight = elem.offsetHeight
+            this.$refs.wrap.style.height = `calc(100% - ${offsetHeight}px)`
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/ToolbarButton/index.vue b/src/components/ToolbarButton/index.vue
new file mode 100644
index 00000000..2969a696
--- /dev/null
+++ b/src/components/ToolbarButton/index.vue
@@ -0,0 +1,115 @@
+<template>
+  <div>
+    <slot name="prefix"></slot>
+    <el-button
+      v-if="showAdd"
+      v-hasPermi="[`${permission}:${permissionKey}:add`]"
+      type="primary"
+      :disabled="disAdd"
+      icon="Plus"
+      @click="add"
+      plain
+    >
+      {{ addName }}
+    </el-button>
+    <slot name="middle"></slot>
+    <el-button
+      v-if="showEdit"
+      v-hasPermi="[`${permission}:${permissionKey}:edit`]"
+      type="success"
+      :disabled="disEdit"
+      icon="Edit"
+      @click="edit"
+      plain
+    >
+      {{ editName }}
+    </el-button>
+    <slot name="center"></slot>
+    <el-button
+      v-if="showDel"
+      v-hasPermi="[`${permission}:${permissionKey}:remove`, `${permission}:${permissionKey}:del`]"
+      type="danger"
+      :disabled="disRemove"
+      icon="Delete"
+      @click="remove"
+      plain
+    >
+      {{ delName }}
+    </el-button>
+    <slot name="suffix"></slot>
+  </div>
+</template>
+
+<script setup>
+  // 定义 props
+  defineProps({
+    // 权限模块
+    permission: {
+      type: String,
+      default: 'device'
+    },
+    // 权限key
+    permissionKey: {
+      type: String,
+      default: ''
+    },
+    disAdd: {
+      type: Boolean,
+      default: false
+    },
+    disEdit: {
+      type: Boolean,
+      default: false
+    },
+    disRemove: {
+      type: Boolean,
+      default: false
+    },
+    showAdd: {
+      type: Boolean,
+      default: true
+    },
+    showEdit: {
+      type: Boolean,
+      default: true
+    },
+    showDel: {
+      type: Boolean,
+      default: true
+    },
+    addName: {
+      type: String,
+      default: '新增'
+    },
+    editName: {
+      type: String,
+      default: '修改'
+    },
+    delName: {
+      type: String,
+      default: '删除'
+    },
+    permissionList: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  // 定义 emits
+  const emit = defineEmits(['add', 'edit', 'remove'])
+
+  // 方法
+  const add = () => {
+    emit('add')
+  }
+
+  const edit = () => {
+    emit('edit')
+  }
+
+  const remove = () => {
+    emit('remove')
+  }
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index b6c7b61c..6fe4ff4d 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -55,9 +55,10 @@ function addIframe() {
 .app-main {
   /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
+  height: calc(100vh - 50px);
   width: 100%;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .fixed-header + .app-main {
@@ -68,6 +69,7 @@ function addIframe() {
   .app-main {
     /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
+    height: calc(100vh - 84px);
   }
 
   .fixed-header + .app-main {
diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
index a5aaef94..464d08c9 100644
--- a/src/plugins/auth.ts
+++ b/src/plugins/auth.ts
@@ -24,6 +24,11 @@ const authRole = (role: string): boolean => {
   }
 };
 
+export const havePermi = (permission: string): boolean => {
+  // 你的权限校验逻辑
+  return authPermission(permission);
+};
+
 export default {
   // 验证用户是否具备某权限
   hasPermi(permission: string): boolean {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2b0aad5f..aecc49ac 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -316,3 +316,21 @@ export const removeClass = (ele: HTMLElement, cls: string) => {
 export const isExternal = (path: string) => {
   return /^(https?:|http?:|mailto:|tel:)/.test(path);
 };
+
+/**
+ * Check if a variable is a string
+ * @param str
+ * @returns {boolean}
+ */
+export const isString = (str: any): str is string => {
+  return typeof str === 'string' || str instanceof String;
+};
+
+/**
+ * Check if a variable is a function
+ * @param func
+ * @returns {boolean}
+ */
+export const isFunction = (func: any): func is Function => {
+  return typeof func === 'function' || func instanceof Function;
+};
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index e2886e45..8f9bdb9f 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -106,3 +106,26 @@ export const isArray = (arg: string | string[]) => {
   }
   return Array.isArray(arg);
 };
+
+/**
+ * 判断是否为空
+ */
+export function validatenull(val) {
+  if (typeof val == 'boolean') {
+    return false;
+  }
+  if (typeof val == 'number') {
+    return false;
+  }
+  if (val instanceof Array) {
+    if (val.length == 0) return true;
+  } else if (val instanceof Object) {
+    if (JSON.stringify(val) === '{}') return true;
+  } else {
+    if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == ''){
+      return true;
+    }
+    return false;
+  }
+  return false;
+}
diff --git a/src/views/test/index.vue b/src/views/test/index.vue
new file mode 100644
index 00000000..57b60ccb
--- /dev/null
+++ b/src/views/test/index.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="p-2" style="height: 100%;">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <el-card shadow="hover" style="height: 100%;">
+        <search-panel ref="searchRef" :configs="search.configs" :model="search.data" @search="onSearch" @reset="reset">
+          <FormTable
+            ref="tableRef"
+            row-key="id"
+            height="100%"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            :table-data="tableData"
+            :columns="columns"
+            :operates="operates"
+            :total="total"
+            v-model:page="page"
+            v-model:limit="limit"
+            :options="{
+              border: true,
+              stripe: true,
+              highlightCurrentRow: true
+            }"
+            pagination-position="right"
+            @handleSelectionChange="handleSelectionChange"
+            @pagination="onPagination"
+          >
+            <template #topButton>
+              <toolbar-button
+                :permission="'permission'"
+                :permissionKey="'permissionKey'"
+                :disRemove="selectData.length == 0"
+                :disEdit="selectData.length != 1"
+                delName="批量删除"
+                @add="handleAdd"
+                @remove="handleRemoveAll"
+              />
+            </template>
+            <!-- 使用语法定义插槽: [类型]-[key/prop] -->
+            <!-- header-name 定义姓名列的表头 -->
+            <template #header-name="{ column }">
+              <el-tag effect="dark">自定义 {{ column.label }}</el-tag>
+            </template>
+
+            <!-- default-name 定义姓名列的内容 -->
+            <template #default-name="{ row }">
+              <span style="font-weight: bold; color: #67c23a">{{ row.name }}</span>
+            </template>
+          </FormTable>
+        </search-panel>
+      </el-card>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { h, ref, reactive, computed } from 'vue'
+  import { ElTag, ElMessage } from 'element-plus'
+  import * as iconsVue from '@element-plus/icons-vue'
+
+  // 表格引用
+  const tableRef = ref(null)
+
+  // 模拟数据
+  const tableData = ref([
+    {
+      id: 1,
+      date: '2026-05-03',
+      name: '11111',
+      gender: 1,
+      age: 35,
+      city: '北京',
+      price: 699,
+      status: 1
+    },
+    {
+      id: 2,
+      date: '2026-05-02',
+      name: '22222',
+      gender: 0,
+      age: 45,
+      city: '上海',
+      price: 999,
+      status: 0,
+      children: [
+        {
+          id: 3,
+          date: '2026-05-02',
+          name: '22222-1',
+          gender: 0,
+          age: 45,
+          city: '上海',
+          price: 999,
+          status: 0
+        },
+        {
+          id: 4,
+          date: '2026-05-02',
+          name: '22222-2',
+          gender: 0,
+          age: 45,
+          city: '上海',
+          price: 999,
+          status: 0
+        }
+      ]
+    },
+    {
+      id: 5,
+      date: '2026-05-04',
+      name: '33333',
+      gender: 1,
+      age: 25,
+      city: '杭州',
+      price: 1398,
+      status: 1
+    }
+  ])
+
+  // 分页配置
+  const page = ref(1)
+  const limit = ref(10)
+  const total = ref(100)
+
+  // 选中数据
+  const selectData = ref([])
+
+  // 搜索配置
+  const search = reactive({
+    data: {},
+    configs: [
+      /**
+       * 搜索内容，如果超过一行则只显示一行，多余搜索可折叠显示/隐藏
+       * 支持input、select、tree-select、date-picker、time-select、time-picker、autocomplete类型
+       * 例：输入框、下拉选择框、日期选择框、时间选择框、输入提示框
+       * 如有其他类型搜索，可根据实际情况对组件进行完善
+       * 具体使用请参照SearchForm组件
+       */
+      { label: '输入框', prop: 'input' },
+      // 下拉选择框,可以显示字典值或自定义选项options
+      {
+        label: '下拉选择框',
+        prop: 'select',
+        type: 'select',
+        dict: 'sys_user_sex',
+        change: ($event) => {
+
+        },
+        visibleChange: ($event) => {
+
+        },
+      },
+      {
+        label: '日期选择框',
+        prop: 'date',
+        type: 'date',
+        valueFormat: 'YYYY-MM-DD',
+        change: ($event) => {
+
+        },
+      },
+      {
+        label: '时间选择框',
+        prop: 'time',
+        type: 'daterange',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
+        change: ($event) => {
+
+        }
+      },
+      {
+        label: '输入提示框',
+        prop: 'autocomplete',
+        type: 'autocomplete',
+        fetchSuggestions: (queryString, cb) => {
+          // 具体参照el-autocomplete组件
+        },
+        select: (item) => {
+          // 处理选中项
+        }
+      }
+    ]
+  })
+
+  // 列配置
+  const columns = computed(() => [
+    // 1. 多选
+    { type: 'selection', width: 50 },
+    // 2. 序号
+    { type: 'index', label: '序号', width: 60, align: 'center' },
+    // 3. 普通列
+    { prop: 'date', label: '日期', width: 120, fixed: 'left' },
+    // 4. 插槽列 (使用语法: [type]-[prop])
+    { prop: 'name', label: '姓名', width: 120, key: 'name' },
+    // 5. 渲染函数列
+    {
+      prop: 'gender',
+      label: '性别',
+      width: 80,
+      render: ({ row }) => h(ElTag, { type: row.gender ? 'primary' : 'danger' }, () => (row.gender ? '男' : '女'))
+    },
+    // 6. 字符串渲染 (HTML)
+    {
+      prop: 'age',
+      label: '年龄',
+      width: 80,
+      render: ({ row }) => `<b style="color: #409eff">${row.age} 岁</b>`
+    },
+    // 7. 格式化列 (formatter)
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      // dict: 'sys_user_sex' // 使用字典
+      formatter: row => (row.status ? "<span style='color: green'>正常</span>" : "<span style='color: red'>禁用</span>")
+    },
+    { prop: 'city', label: '城市' },
+    // 8. 价格列
+    {
+      prop: 'price',
+      label: '价格',
+      formatter: row => `¥ ${row.price.toFixed(2)}`
+    },
+    // 9. 多级表头
+    {
+      label: '更多信息',
+      children: [
+        { prop: 'date', label: '购买日期', width: 120 },
+        { prop: 'price', label: '购买价格', formatter: row => `¥ ${row.price.toFixed(2)}` }
+      ]
+    },
+    // 10. JSX 语法
+    {
+      prop: 'city',
+      label: '城市(JSX)',
+      width: 120,
+      render: ({ row }) => {
+        return <ElTag type="info" onClick={() => console.log('点击城市:', row.city)}>{row.city}</ElTag>
+      }
+    }
+  ])
+
+  // 操作按钮配置
+  const operates = {
+    width: 260,
+    fixed: 'right',
+    list: [
+      {
+        label: '编辑',
+        type: 'primary',
+        icon: iconsVue.Edit,
+        // permission: 'xxx:xxx:xxx', // 权限字符控制
+        method: (row, index) => {
+          ElMessage.info(`编辑第 ${index + 1} 行: ${row.name}`)
+        }
+      },
+      {
+        label: '查看',
+        type: 'success',
+        icon: iconsVue.View,
+        show: row => row.status === 1, // 条件显示
+        method: row => {
+          console.log('查看详情:', row)
+        }
+      },
+      {
+        label: '删除',
+        type: 'danger',
+        icon: iconsVue.Delete,
+        method: row => {
+          ElMessage.error(`删除: ${row.name}`)
+        }
+      },
+      {
+        label: '更多选项1',
+        method: row => console.log('更多1', row)
+      },
+      {
+        label: '更多选项2',
+        method: row => console.log('更多2', row)
+      }
+    ]
+  }
+
+  // 事件处理
+  const handleSelectionChange = val => {
+    console.log('选中项变化:', val)
+    selectData.value = val
+  }
+
+  const onSearch = () => {
+    // 重置选中数据
+    selectData.value = []
+    console.log('搜索条件:', search.data)
+    ElMessage.success('搜索触发')
+  }
+
+  const onPagination = ({ page, limit }) => {
+    // 重置选中数据
+    selectData.value = []
+    ElMessage.success(`分页变化: 第${page}页, 每页${limit}条`)
+  }
+  const reset = () => {
+    ElMessage.info('重置搜索表单')
+  }
+</script>
+<style scoped>
+  :deep(.el-table) {
+    margin-top: 10px;
+  }
+</style>
diff --git a/vite/plugins/index.ts b/vite/plugins/index.ts
index 9ef8faf1..ffc93dda 100644
--- a/vite/plugins/index.ts
+++ b/vite/plugins/index.ts
@@ -1,4 +1,5 @@
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 import vueDevTools from 'vite-plugin-vue-devtools';
 
 import createUnoCss from './unocss';
@@ -11,8 +12,14 @@ import createSetupExtend from './setup-extend';
 import path from 'path';
 
 export default (viteEnv: any, isBuild = false): [] => {
-  const vitePlugins: any = [];
-  vitePlugins.push(vue());
+  const vitePlugins: any = [
+    vue({
+      script: {
+        defineModel: true
+      }
+    }),
+    vueJsx()
+  ];
   vitePlugins.push(vueDevTools());
   vitePlugins.push(createUnoCss());
   vitePlugins.push(createAutoImport(path));