drawing-board-service/src/example/components/header/index.vue

<template>
  <div class="header">
    <div class="nav">
      <slot name="nav" v-if="$slots.nav" />
      <span v-else class="nav-back">
        <span class="back operate" v-if="!noBack">
          <Icon name="back" @click="router.back()" />
        </span>
        <span class="title">{{ title }}</span>
      </span>
    </div>
    <div class="draw-operate">
      <div v-for="group in actionGroups">
        <template v-for="action in group">
          <span
            v-if="!action.children"
            class="operate"
            @click="action.handler && action.handler(draw)"
            :class="{ disabled: action.disabled }"
          >
            <Icon :name="action.icon" :tip="action.text" />
          </span>

          <el-dropdown class="operate-dropdown" v-else>
            <span class="operate" :class="{ disabled: action.disabled }">
              <Icon :name="action.icon" />
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="cAction in action.children"
                  @click="cAction.handler"
                >
                  {{ cAction.text }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>
    <div class="saves">
      <slot name="saves" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { router } from "@/example/fuse/router";
import { ActionGroups } from "./actions";
import { ElDropdown, ElDropdownItem, ElDropdownMenu } from "element-plus";
import { Draw } from "../container/use-draw";

defineProps<{
  actionGroups: ActionGroups;
  draw: Draw;
  title?: string;
  noBack?: boolean;
}>();
</script>

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

.header {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 10px;
  justify-content: space-between;
  color: rgba(0, 0, 0, 0.85);
  border-bottom: 1px solid #e6e6e6;
  margin-top: var(--top);
  transition: margin-top 0.3s ease;
  height: global.$headerSize;
  flex: 0 0 auto;
}

.draw-operate {
  text-align: center;
  display: flex;
  align-items: center;
  font-size: 20px;

  > div:not(:last-child) {
    padding-right: 15px;
    margin-right: 15px;
    position: relative;
    &::after {
      content: "";
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
      height: 0.7em;
      width: 1px;
      background: rgba(0, 0, 0, 0.3);
    }
  }

  i {
    width: auto;
  }

  .operate {
    margin: 0 11px;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    flex-direction: row-reverse;
    border-radius: 4px;
    justify-content: center;
  }
}

.operate-dropdown {
  height: 100%;
  display: flex;
  outline: none !important;
  font-size: inherit;
}

.nav-back {
  display: flex;
  align-items: center;
  .back {
    padding: 2px;
  }
  .title {
    margin-left: 6px;
    font-size: 16px;
  }
}
</style>