feat: 部分组件重构完成

src/views/components-demo/search/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div>
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="封装 Element 的 Form 组件，实现查询、重置等功能，并提供了三种布局风格。"
+      type="info"
+      style="margin-bottom: 20px"
+    />
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="经典风格。"
+      type="info"
+      style="margin-bottom: 20px; margin-top: 20px"
+    />
+    <div class="searh">
+      <com-search :data="classicData" @search-submit="searchSubmit1" @reset-submit="resetSubmit1" />
+      <div> 查询/重置后的数据：{{ formData1 }} </div>
+    </div>
+
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="底部操作按钮风格。"
+      type="info"
+      style="margin-bottom: 20px; margin-top: 20px"
+    />
+    <div class="searh">
+      <com-search
+        layout="bottom"
+        :data="classicData"
+        @search-submit="searchSubmit2"
+        @reset-submit="resetSubmit2"
+      />
+      <div> 查询/重置后的数据：{{ formData2 }} </div>
+    </div>
+
+    <el-alert
+      effect="dark"
+      :closable="false"
+      title="右侧操作按钮风格。"
+      type="info"
+      style="margin-bottom: 20px; margin-top: 20px"
+    />
+    <div class="searh">
+      <com-search
+        layout="right"
+        :data="classicData"
+        @search-submit="searchSubmit3"
+        @reset-submit="resetSubmit3"
+      />
+      <div> 查询/重置后的数据：{{ formData3 }} </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="SearchDemo">
+import { ref } from 'vue'
+import { classicData } from './data'
+const formData1 = ref<Nullable<IObj>>(null)
+const formData2 = ref<Nullable<IObj>>(null)
+const formData3 = ref<Nullable<IObj>>(null)
+
+function searchSubmit1(data: any): void {
+  formData1.value = data
+}
+
+function resetSubmit1(data: any): void {
+  formData1.value = data
+}
+
+function searchSubmit2(data: any): void {
+  formData2.value = data
+}
+
+function resetSubmit2(data: any): void {
+  formData2.value = data
+}
+
+function searchSubmit3(data: any): void {
+  formData3.value = data
+}
+
+function resetSubmit3(data: any): void {
+  formData3.value = data
+}
+</script>
+
+<style lang="less" scoped>
+.searh {
+  background: #fff;
+  padding: 20px;
+}
+</style>