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

continew-admin-ui/components.d.ts

@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
     ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
+    AButtonGroup: typeof import('@arco-design/web-vue')['ButtonGroup']
     ACard: typeof import('@arco-design/web-vue')['Card']
     ACardMeta: typeof import('@arco-design/web-vue')['CardMeta']
     ACarousel: typeof import('@arco-design/web-vue')['Carousel']

continew-admin-ui/config/plugin/styleImport.ts

@@ -73,6 +73,7 @@ export default function configStyleImportPlugin() {
             'image-preview': 'image',
             'image-preview-group': 'image',
             'cascader-panel': 'cascader',
+            'button-group': 'button',
           };
           if (ignoreList.includes(name)) return '';
           // eslint-disable-next-line no-prototype-builtins

continew-admin-ui/src/assets/style/global.less

@@ -69,6 +69,13 @@ body {
     &-query {
       margin-bottom: 8px;
     }
+    &-operation {
+      &-right {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+      }
+    }
   }
 }
 

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>

continew-admin-ui/src/views/system/dept/index.vue

@@ -6,7 +6,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryRef" :model="queryParams" layout="inline" v-show="showQuery">
             <a-form-item field="deptName" hide-label>
               <a-input
                 v-model="queryParams.deptName"
@@ -56,7 +56,8 @@
                 </a-button>
               </a-space>
             </a-col>
-            <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
+            <a-col :span="12">
+              <right-toolbar v-model:show-query="showQuery" @refresh="getList"></right-toolbar>
             </a-col>
           </a-row>
         </div>
@@ -266,6 +267,7 @@
   const title = ref('');
   const single = ref(true);
   const multiple = ref(true);
+  const showQuery = ref(true);
   const loading = ref(false);
   const detailLoading = ref(false);
   const exportLoading = ref(false);
@@ -478,6 +480,13 @@
       document.body.removeChild(downloadElement);
       // 释放掉 blob 对象
       window.URL.revokeObjectURL(href);
+    }).catch(() => {
+      proxy.$notification.warning({
+        title: '警告',
+        content: "如果您正在访问演示环境，点击导出会报错。这是由于演示环境开启了 Mock.js，而 Mock.js 会将 responseType 设置为 ''，不仅会导致关键判断出错，也会导致导出的文件无法打开。",
+        duration: 10000,
+        closable: true,
+      });
     }).finally(() => {
       exportLoading.value = false;
     });