From 6ab97f511fd2b7ff6747bc9bbe99bb9138cf2b60 Mon Sep 17 00:00:00 2001
From: DeveloperLXC <18867762063@163.com>
Date: Wed, 10 Jul 2024 15:05:36 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(crud):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/me/crud/index.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/me/crud/index.vue b/src/components/me/crud/index.vue
index 93e8407..ae2e60a 100644
--- a/src/components/me/crud/index.vue
+++ b/src/components/me/crud/index.vue
@@ -9,10 +9,12 @@
 <template>
   <AppCard v-if="$slots.default" bordered bg="#fafafc dark:black" class="mb-30 min-h-60 rounded-4">
     <form class="flex justify-between p-16" @submit.prevent="handleSearch()">
-      <n-space wrap :size="[32, 16]">
-        <slot />
-      </n-space>
-      <div class="flex-shrink-0">
+      <n-scrollbar x-scrollable>
+        <n-space :wrap="!expand || isExpanded" :size="[32, 16]" class="p-10">
+          <slot />
+        </n-space>
+      </n-scrollbar>
+      <div class="flex-shrink-0 p-10">
         <n-button ghost type="primary" @click="handleReset">
           <i class="i-fe:rotate-ccw mr-4" />
           重置
@@ -21,6 +23,17 @@
           <i class="i-fe:search mr-4" />
           搜索
         </n-button>
+
+        <template v-if="expand">
+          <n-button v-if="!isExpanded" type="primary" text @click="toggleExpand">
+            <i class="i-fe:chevrons-down ml-4" />
+            展开
+          </n-button>
+          <n-button v-else text type="primary" @click="toggleExpand">
+            <i class="i-fe:chevrons-up ml-4" />
+            收起
+          </n-button>
+        </template>
       </div>
     </form>
   </AppCard>
@@ -89,6 +102,8 @@ const props = defineProps({
     type: Function,
     required: true,
   },
+  /** 是否支持展开 */
+  expand: Boolean,
 })
 
 const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
@@ -103,6 +118,13 @@ const pagination = reactive({
   },
 })
 
+// 是否展开
+const isExpanded = ref(false)
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value
+}
+
 async function handleQuery() {
   try {
     loading.value = true