From 247b5aa18bc14008e46c4099c480b276494a733c Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Wed, 19 Apr 2023 16:37:12 +0800
Subject: [PATCH] =?UTF-8?q?refactor!:=20=E9=87=8D=E6=9E=84=20`SearchBar`?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchBar/index.vue | 52 ++++++++++++++++--------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/SearchBar/index.vue b/src/components/SearchBar/index.vue
index e4906864..36250a1b 100644
--- a/src/components/SearchBar/index.vue
+++ b/src/components/SearchBar/index.vue
@@ -1,40 +1,48 @@
 <script lang="ts" setup name="SearchBar">
 const props = defineProps({
-  showMore: {
+  fold: {
     type: Boolean,
-    default: false,
+    default: true,
   },
-  unfold: {
+  showToggle: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
     type: Boolean,
     default: false,
   },
 })
 
-const emit = defineEmits(['toggle'])
+const emit = defineEmits<{
+  (event: 'update:fold', value: boolean): void
+  (event: 'toggle', value: boolean): void
+}>()
 
-const isUnfold = ref(!props.unfold)
+const isFold = ref(props.fold)
 
-watch(() => props.unfold, () => toggle(), {
-  immediate: true,
+watch(() => props.fold, (value) => {
+  isFold.value = value
+  emit('update:fold', value)
 })
 
 function toggle() {
-  isUnfold.value = !isUnfold.value
-  emit('toggle', isUnfold.value)
+  isFold.value = !isFold.value
+  emit('toggle', isFold.value)
 }
 </script>
 
 <template>
-  <div class="search-container">
-    <slot />
-    <div v-if="showMore" class="more">
+  <div class="search-container" :class="{ 'has-bg': background }">
+    <slot :fold="isFold" />
+    <div v-if="showToggle" class="toggle">
       <el-button text size="small" @click="toggle">
         <template #icon>
           <el-icon>
-            <svg-icon :name="isUnfold ? 'ep:caret-top' : 'ep:caret-bottom'" />
+            <svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
           </el-icon>
         </template>
-        {{ isUnfold ? '收起' : '展开' }}
+        {{ isFold ? '展开' : '收起' }}
       </el-button>
     </div>
   </div>
@@ -43,17 +51,11 @@ function toggle() {
 <style lang="scss" scoped>
 .search-container {
   position: relative;
-  margin: 20px 0;
-  padding: 20px;
-  background-color: var(--el-fill-color-lighter);
-  transition: background-color 0.3s;
 
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
+  &.has-bg {
+    padding: 20px;
+    background-color: var(--el-fill-color-lighter);
+    transition: background-color 0.3s;
   }
 
   :deep(.el-form) {
@@ -68,7 +70,7 @@ function toggle() {
     }
   }
 
-  .more {
+  .toggle {
     position: relative;
     text-align: center;
     margin-bottom: -10px;