drawing-board-service/example/fuse/views/header/header.vue

<template>
  <div class="header">
    <div class="nav">
      <el-button type="primary" plain>返回</el-button>
    </div>
    <div class="draw-operate">
      <div v-for="group in groups">
        <el-icon class="operate" v-for="fn in group" @click="fn()">
          {{ funds.describes.get(fn)?.name }}
        </el-icon>
      </div>
    </div>
    <div class="saves">
      <el-button type="primary" plain>保存</el-button>
      <el-button type="primary" plain>导出</el-button>
      <el-button>图纸</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElButton, ElIcon } from "element-plus";
import { useHeaderFunds } from "./funds.ts";
const funds = useHeaderFunds();
const groups = [
  [funds.revoke, funds.recover],
  [funds.clear, funds.rotate, funds.full],
  [funds.aiImport, funds.setBGImage, funds.gotoVR],
];
if (import.meta.env.DEV) {
  groups.push([funds.toggleHit]);
}
</script>

<style lang="scss" scoped>
@use 'element-plus/theme-chalk/src/common/var';

.header {
  background-color: var.$color-primary;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
}

.draw-operate {
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;

  > div:not(:last-child) {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #fff;
  }

  i {
    width: auto;
    margin: 0 5px;
  }
}
</style>
/