You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

121 lines
3.8 KiB

<template>
<el-row type="flex" class="header">
<!-- 左侧logo start-->
<el-col :span="6" class="flex items-center">
<div class="logo"></div>
<h3 class="font-semibold">H5低代码</h3>
</el-col>
<!-- 左侧logo end-->
<!-- 中间操作页面部分 start-->
<el-col class="flex items-center" :span="12">
<template v-for="(toolItem, toolIndex) in tools" :key="toolIndex">
<div :class="[`w-1/${tools.length}`]" class="w-1/9">
<div
class="tool-item flex flex-col items-center cursor-pointer"
@click="toolItem.onClick"
>
<el-icon>
<component :is="toolItem.icon" />
</el-icon>
<div class="title">{{ toolItem.title }}</div>
</div>
</div>
</template>
</el-col>
<!-- 中间操作页面部分 end-->
<!-- 右侧工具栏 start-->
<el-col :span="6" class="right-tools flex flex-row-reverse items-center">
<el-tooltip class="item" effect="dark" content="运行" placement="bottom">
<el-button
type="primary"
:icon="VideoPlay"
size="large"
circle
class="flex-shrink-0 !p-6px"
@click="runPreview"
/>
</el-tooltip>
<!-- <el-tooltip class="item" effect="dark" content="github" placement="bottom">-->
<!-- <a href="https://github.com/buqiyuan/vite-vue3-lowcode" target="_blank">-->
<!-- <img :src="`${BASE_URL}github.svg`" width="40" height="40" alt="" />-->
<!-- </a>-->
<!-- </el-tooltip>-->
<el-popover placement="bottom" :width="140" trigger="hover">
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6">
<el-tooltip class="item" effect="dark" content="github" placement="bottom">
<a href="https://github.com/buqiyuan/vite-vue3-lowcode" target="_blank">
<img :src="`${BASE_URL}github.svg`" width="40" height="40" alt="" />
</a>
</el-tooltip>
</el-col>
<el-col :span="6">
<el-tooltip class="item" effect="dark" content="gitee" placement="bottom">
<a href="https://gitee.com/buqiyuan/vite-vue3-lowcode" target="_blank">
<img :src="`${BASE_URL}gitee.svg`" width="40" height="40" alt="" />
</a>
</el-tooltip>
</el-col>
</el-row>
<template #reference>
<img :src="`${BASE_URL}github.svg`" width="40" height="40" alt="" />
</template>
</el-popover>
</el-col>
<!-- 右侧工具栏 end-->
</el-row>
<preview v-model:visible="isShowH5Preview" />
</template>
<script lang="ts" setup>
import { VideoPlay } from '@element-plus/icons-vue';
import Preview from './preview.vue';
import { useTools } from './useTools';
import { useVisualData, localKey } from '@/visual-editor/hooks/useVisualData';
import { BASE_URL } from '@/visual-editor/utils';
defineOptions({
name: 'PageHeader',
});
const isShowH5Preview = ref(false);
const tools = useTools();
const { jsonData } = useVisualData();
const runPreview = () => {
sessionStorage.setItem(localKey, JSON.stringify(jsonData));
localStorage.setItem(localKey, JSON.stringify(jsonData));
isShowH5Preview.value = true;
};
</script>
<style lang="scss" scoped>
.header {
width: 100%;
.logo {
width: 60px;
height: 60px;
background-image: url('@/assets/logo.png');
background-repeat: no-repeat;
background-size: contain;
}
.tool-item {
.title {
margin-top: 4px;
font-size: 12px;
}
}
.el-button {
font-size: 22px;
}
.right-tools > * {
margin-left: 8px;
}
}
</style>