修改 SearchBar 组件示例

src/layouts/components/Topbar/Toolbar/index.vue

@@ -60,7 +60,7 @@ function pathCompile(path: string) {
   <div class="toolbar-container">
     <div class="left-box">
       <div v-if="enableSubMenuCollapseButton" class="flex-center px-2 py-1 cursor-pointer transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
-        <SvgIcon name="toolbar-collapse" class="icon" />
+        <SvgIcon name="toolbar-collapse" />
       </div>
       <Breadcrumb v-if="settingsStore.mode === 'pc' && settingsStore.settings.breadcrumb.enable && settingsStore.settings.app.routeBaseOn !== 'filesystem'" class="breadcrumb">
         <TransitionGroup name="breadcrumb">

src/views/component_extend_example/searchbar.demo.vue

@@ -301,7 +301,7 @@ function toggle(fold: boolean) {
         </template>
       </SearchBar>
     </PageMain>
-    <PageMain title="自定义切换按钮（搭配自定义 flex 布局）">
+    <PageMain title="自定义切换按钮（搭配自定义 grid 布局）">
       <SearchBar :fold="isFold2" :show-toggle="false">
         <template #default="{ fold }">
           <ElForm :model="search" size="default" label-width="120px" inline class="search-form">
@@ -426,23 +426,23 @@ function toggle(fold: boolean) {
 
 <style lang="scss" scoped>
 .search-form {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
 
   :deep(.el-form-item) {
-    flex: 1 1 300px;
-
-    &.search-form-item-name {
-      flex-basis: 450px;
-    }
+    grid-column: auto / span 1;
 
     &:last-child {
-      margin-left: auto;
+      grid-column-end: -1;
 
       .el-form-item__content {
         justify-content: flex-end;
       }
     }
+
+    &.search-form-item-name {
+      grid-column: auto / span 2;
+    }
   }
 }