zsjz-ai/ai-electron/frontend/src/case/views/data/components/CaseFlowTopBar.vue

<template>
  <AppTopBar class="case-flow-topbar" :case-name="caseName">
    <template #actions>
      <!-- 模板库：与主界面顶栏一致，点开就地弹出，不打断当前上传 / 清洗流程 -->
      <Tooltip title="模板库" placement="bottom" :mouseEnterDelay="0.5">
        <Button type="text" class="case-flow-topbar-action" aria-label="模板库" @click="templateLibraryVisible = true">
          <Icon icon="i-ant-design:book-outlined" />
        </Button>
      </Tooltip>

      <!-- 下载管理：下载记录、保存位置与清空 / 刷新等操作，按主界面顶栏同款入口提供 -->
      <AppDownloadManager />
    </template>
  </AppTopBar>

  <CaseTemplateLibraryModal v-model:open="templateLibraryVisible" />
</template>

<script lang="ts" setup name="CaseFlowTopBar">
  /**
   * 清洗流程三段（文件上传 / 案件数据清洗 / 清洗导入进度）共用的顶栏。
   *
   * 这三页是不套 LAYOUT 的全屏路由，公共顶栏只能由页面自己渲染；
   * 除品牌、案件、模式切换、账号与窗口控制外，这里补齐主界面顶栏的
   * 「模板库」和「下载管理」两个入口，避免进入清洗流程后功能断档。
   */
  import { computed, ref } from 'vue';
  import { Button, Tooltip } from 'ant-design-vue';
  import { AppDownloadManager, AppTopBar } from '@/core/components/Application';
  import { Icon } from '@/core/components/Icon';
  import { useUserStore } from '@/core/store/modules/case';
  import CaseTemplateLibraryModal from './CaseTemplateLibraryModal.vue';

  const userStore = useUserStore();
  const templateLibraryVisible = ref(false);
  /** 顶栏案件胶囊：全屏流程里也保留当前案件上下文 */
  const caseName = computed(() => String(userStore.getCaseInfo?.name || '').trim());
</script>

<style lang="less">
  .case-flow-topbar {
    /*
     * 顶栏图标按钮：与主壳顶栏同规格（30×28，圆角 8）。
     * 主壳那份规则在 layouts/default/header/index.less，独立全屏路由下不会加载，
     * 这里自带一份，只作用于本组件，不影响传统壳原有外观。
     */
    .case-flow-topbar-action.ant-btn,
    .jeesite-app-download-manager-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      min-width: 30px;
      height: 28px;
      padding: 0;
      color: inherit;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      box-shadow: none;
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        color 0.2s ease;

      .jeesite-icon,
      .anticon {
        font-size: 18px;
      }

      &:hover,
      &:focus,
      &:focus-visible {
        color: inherit;
        background-color: @header-light-bg-hover-color;
        border-color: transparent;
        outline: none;
        box-shadow: none;
      }
    }
  }

  html[data-theme='dark'] {
    .case-flow-topbar {
      .case-flow-topbar-action.ant-btn,
      .jeesite-app-download-manager-trigger {
        &:hover,
        &:focus,
        &:focus-visible {
          background-color: @header-dark-bg-hover-color;
        }
      }
    }
  }
</style>