refactor!: 重构 SearchBar 组件

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;