新增：操作栏右侧新增工具条（显示或隐藏搜索栏按钮、刷新按钮）

continew-admin-ui/src/components/index.ts

@@ -12,6 +12,7 @@ import {
 import Chart from './chart/index.vue';
 import Breadcrumb from './breadcrumb/index.vue';
 import DateRangePicker from './date-range-picker/index.vue';
+import RightToolbar from './right-toolbar/index.vue';
 
 // Manually introduce ECharts modules to reduce packing size
 
@@ -33,5 +34,6 @@ export default {
     Vue.component('Chart', Chart);
     Vue.component('Breadcrumb', Breadcrumb);
     Vue.component('DateRangePicker', DateRangePicker);
+    Vue.component('RightToolbar', RightToolbar);
   },
 };

continew-admin-ui/src/components/right-toolbar/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="header-operation-right">
+    <a-button-group>
+      <a-tooltip :content="showQuery ? '隐藏搜索栏' : '显示搜索栏'">
+        <a-button @click="toggleSearch"><template #icon><icon-search /></template></a-button>
+      </a-tooltip>
+      <a-tooltip content="刷新">
+        <a-button @click="handleRefresh"><template #icon><icon-refresh /></template></a-button>
+      </a-tooltip>
+    </a-button-group>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    showQuery: {
+      type: Boolean,
+      default: true,
+    },
+  });
+
+  const emits = defineEmits(['update:showQuery', 'refresh']);
+
+  /**
+   * 切换搜索栏（显示或隐藏）
+   */
+  const toggleSearch = () => {
+    emits("update:showQuery", !props.showQuery);
+  };
+
+  /**
+   * 刷新
+   */
+  const handleRefresh = () => {
+    emits("refresh");
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'RightToolbar',
+  };
+</script>
+
+<style scoped lang="less"></style>