fix: use flex box for search-row

packages/base/data/search-row.vue

@@ -4,17 +4,17 @@
       <span class="title" v-if="title">{{ title }}</span>
       <NoobButton v-if="fresh" type="info" icon="Refresh" @click="emit('query')"> </NoobButton>
       <NoobButton v-if="add" type="primary" icon="Plus" @click="emit('add')">
-                {{ t('base.add') }}
+        {{ t("base.add") }}
       </NoobButton>
       <NoobButton v-if="del" type="danger" icon="Delete" @click="emit('delete')">
-                {{ t('base.delete') }}
+        {{ t("base.delete") }}
       </NoobButton>
       <slot name="left"></slot>
     </div>
     <div class="query">
       <slot></slot>
       <NoobButton v-if="query" type="primary" icon="Search" @click="emit('query')">
-                {{ t('base.select') }}
+        {{ t("base.select") }}
       </NoobButton>
     </div>
   </div>
@@ -23,14 +23,14 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { useStore } from "vuex";
-import { useI18n } from 'vue3-i18n';
+import { useI18n } from "vue3-i18n";
-import { NoobButton } from 'noob-mengyxu';
+import { NoobButton } from "noob-mengyxu";
 const { t } = useI18n();
 const { state } = useStore();
 const prop = defineProps({
   title: {
     type: String,
-        default: null
+    default: null,
   },
   fresh: {
     type: Boolean,
@@ -52,40 +52,51 @@ const prop = defineProps({
 
 const emit = defineEmits(["query", "add", "delete"]);
 
-onMounted(() => { });
+onMounted(() => {});
 </script>
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .search-row {
-    padding: v-bind('state.size.searchRowPad');
+  display: flex;
-    background-color: v-bind('state.style.searchRowBg');
+  flex-direction: row;
+  justify-content: space-between;
+  padding: v-bind("state.size.searchRowPad");
+  background-color: v-bind("state.style.searchRowBg");
+}
+
+.left,
+.query {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  height: fit-content;
 }
 
 .query {
   // align-items: right;
+  justify-content: flex-end;
   text-align: right;
-    float: right;
   // width: 50%;
 }
 
-.left {
+.left .el-button,
-    float: left;
+.query .el-button {
-    // width: 50%;
+  margin-left: 0 !important;
 }
 
 .search-row,
 .query,
 .title,
 .left {
-    height: v-bind('state.size.searchRowHeight');
+  min-height: v-bind("state.size.searchRowHeight");
-    line-height: v-bind('state.size.searchRowHeight');
+  line-height: v-bind("state.size.searchRowHeight");
 }
 
 .title {
   font-weight: bold;
   padding-right: 15px;
-    font-size: v-bind('state.size.titleSize');
+  font-size: v-bind("state.size.titleSize");
   min-width: 20px;
-    color: v-bind('state.style.subTitleColor')
+  color: v-bind("state.style.subTitleColor");
 }
 </style>