feat: 分离前端列表

resources/admin/components/admin/paginate/index.vue

@@ -0,0 +1,29 @@
+<template>
+<div class="pt-2 pb-2 flex justify-end">
+    <el-pagination
+        background
+        :layout="layout"
+        :current-page="page"
+        :page-size="limit"
+        @current-change="changePage"
+        @size-change="changeLimit"
+        :total="total"
+        :page-sizes="pageSizes"
+    />
+</div>
+</template>
+
+<script lang="ts" setup>
+
+import {inject} from "vue";
+
+const layout = 'total,sizes,prev, pager,next'
+
+const pageSizes = [10, 20, 30, 50]
+
+const {page, limit, total, changePage, changeLimit} = inject('paginate')
+</script>
+
+<style scoped>
+
+</style>

resources/admin/components/admin/table/operate.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="pt-5 pl-2">
+        <Add @click="show(showParams)" />
+        <slot name="operate"/>
+    </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+    show: {
+        type: Function,
+        required: true,
+    },
+
+    showParams: null
+})
+</script>
+
+<style scoped>
+
+</style>

resources/admin/components/admin/table/search.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="w-full min-h-0 bg-white dark:bg-regal-dark pl-5 pt-5 pr-5 rounded-lg">
+    <el-form :inline="true">
+      <slot name="body" />
+      <el-form-item>
+        <el-button type="primary" @click="search()">
+          <Icon name="magnifying-glass" class="w-4 mr-1 -ml-1" />
+          搜索
+        </el-button>
+        <el-button @click="reset()">
+          <Icon name="arrow-path" class="w-4 mr-1 -ml-1" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  search: {
+    type: Function,
+    required: true,
+  },
+
+  reset: {
+    type: Function,
+    required: true,
+  },
+})
+</script>
+
+<style scoped></style>