drawing-board-service/src/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 { 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],
]
</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>/