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
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>
|
|
|