Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: 重构home-拆分组件 #530

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+388 −347
Open

refactor: 重构home-拆分组件 #530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions src/components/homeHeader.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template>
<Header class="home-header">
<div class="home-header_left">
<logo></logo>
<Divider type="vertical" />

<!-- 导入 -->
<import-Json></import-Json>
<Divider type="vertical" />
<import-file></import-file>
<Divider type="vertical" />
<Button type="text" to="/template" target="_blank">全部模板</Button>
<Divider type="vertical" />

<myTemplName></myTemplName>
<!-- 标尺开关 -->
<Tooltip :content="$t('grid')">
<iSwitch
v-model="ruler"
@on-change="(val: boolean) => emits('rulerSwitch', val)"
size="small"
class="switch"
></iSwitch>
</Tooltip>
<Divider type="vertical" />
<history></history>
</div>

<div class="home-header_right">
<a href="https://github.com/nihaojob/vue-fabric-editor" target="_blank">
<img
src="https://camo.githubusercontent.com/f440bed74efe64ce92599748090837ec92cc33ead4bf29d115d9745af1415c19/68747470733a2f2f62616467656e2e6e65742f6769746875622f73746172732f6e6968616f6a6f622f7675652d6661627269632d656469746f72"
alt="vue-fabric-editor"
class="home-header_right_img"
/>
</a>
<!-- 管理员模式 -->
<admin />
<!-- 预览 -->
<previewCurrent />
<waterMark />
<save></save>
<login></login>
<lang></lang>
</div>
</Header>
</template>

<script name="homeHeader" setup lang="ts">
// 导入元素
import importJson from '@/components/importJSON.vue';
import importFile from '@/components/importFile.vue';

import logo from '@/components/logo.vue';
import myTemplName from '@/components/myTemplName.vue';
import previewCurrent from '@/components/previewCurrent.vue';
import save from '@/components/save.vue';
import lang from '@/components/lang.vue';
import waterMark from '@/components/waterMark.vue';
import login from '@/components/login.vue';
import admin from '@/components/admin.vue';

defineProps({
canvasEditor: {
type: Object,
default: () => ({}),
},
});

const emits = defineEmits(['rulerSwitch']);

const ruler = defineModel<boolean>('ruler', {
type: Boolean,
default: false,
});
</script>

<style lang="less" scoped>
.home-header {
--height: 45px;
padding: 0 20px;
border-bottom: 1px solid #eef2f8;
background: #fff;
height: var(--height);
line-height: var(--height);
display: flex;
justify-content: space-between;
}
.home-header_left,
.home-header_right {
display: flex;
align-items: center;
}
.home-header_right_img {
display: block;
margin-right: 10px;
}
</style>
147 changes: 147 additions & 0 deletions src/components/homeLeft.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<template>
<div :class="`left-bar ${toolsBarShow && 'show-tools-bar'}`">
<!-- 左侧菜单 -->
<Menu :active-name="menuActive" accordion @on-select="toolsBarShow = true" width="65px">
<MenuItem v-for="item in leftBar" :key="item.key" :name="item.key" class="menu-item">
<Icon :type="item.icon" size="24" />
<div>{{ item.name }}</div>
</MenuItem>
</Menu>
<!-- 左侧组件 -->
<div class="content" v-show="toolsBarShow">
<div class="left-panel">
<KeepAlive>
<component :is="leftBarComponent[menuActive]"></component>
</KeepAlive>
</div>
</div>
<!-- 关闭按钮 -->
<div
:class="`close-btn left-btn ${toolsBarShow && 'left-btn-open'}`"
@click="toolsBarShow = !toolsBarShow"
></div>
</div>
</template>

<script name="homeLeft" setup lang="ts">
import importTmpl from '@/components/importTmpl.vue';
import fontStyle from '@/components/fontStyle.vue';
import myMaterial from '@/components/myMaterial/index.vue';
import tools from '@/components/tools.vue';
import material from '@/components/material.vue';
import layer from '@/components/layer.vue';
import { useI18n } from 'vue-i18n';
// 路由
import { useRoute } from 'vue-router';
const { t } = useI18n();
// 左侧菜单渲染
const menuActive = ref('importTmpl');
const leftBarComponent = {
importTmpl,
tools,
material,
fontStyle,
layer,
myMaterial,
};
const toolsBarShow = defineModel('toolsBarShow', { type: Boolean });
const leftBar = reactive([
{
//模板
key: 'importTmpl',
name: computed(() => t('templates')),
icon: 'md-book',
},
{
//基础元素
key: 'tools',
name: computed(() => t('elements')),
icon: 'md-images',
},
{
//字体样式
key: 'fontStyle',
name: computed(() => t('font_style')),
icon: 'ios-pulse',
},
{
// 图片元素
key: 'material',
name: computed(() => t('material.cartoon')),
icon: 'ios-leaf-outline',
},
{
// 图层
key: 'layer',
name: computed(() => t('layers')),
icon: 'md-reorder',
},
{
// 用户素材
key: 'myMaterial',
name: computed(() => t('mine')),
icon: 'ios-contact-outline',
},
]);
onMounted(() => {
// 有ID时，打开作品面板
const route = useRoute();
if (route?.query?.id) {
menuActive.value = 'myMaterial';
}
});
</script>

<style lang="less" scoped>
// 左侧容器
.left-bar {
width: 65px;
height: 100%;
background: #fff;
display: flex;
position: relative;
&.show-tools-bar {
width: 380px;
}
}
// 关闭按钮
.close-btn {
width: 20px;
height: 64px;
cursor: pointer;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
position: absolute;
right: -20px;
z-index: 1;
top: 50%;
margin-top: -10px;
&.left-btn {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
}
&.left-btn-open {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
transform: rotateY(360deg);
}
&.right-btn {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里会导致右侧的折叠和展开按钮无法正常显示

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAYAAAB5sSvuAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKKADAAQAAAABAAAAgAAAAAAobJzlAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAADf0lEQVR4Ae2cvYsTQRjGE7FQkICFB1pZRyzEJkUKmzOpBEHwX9DCQkmChf4JahewsLpWFOQUzwMRPEgEy0PLpPADvEISDrVyfZ6cK0tIZrI7u7MPMi+8mb35uPnlmXczyeXmrURRdKyibAB8Dz8pywg42if4OUnIGd7Bww8Ut+GHpEATgPEll/y8DGRMtaB8hrryl30B2HzVW1Rcgx8vQ9UqaVac+Cf67cC34C+q1erHFcc5dUsDOD/RGBWv4M/hrwG8jzJ3cwFMwlDdd/BN+BZgd5ONLtd5Ac4zfEYFld0ALMMisxUFmAQa44dHdMB+TTasdM2bxJNxI7gDP7ISWNzJE1xymhF+uBzPbyvL2NZOA+oJIO/BrfP7iEGTSNtovIrY/L6sU9mA5PoAby6DtEq87JnlWF/H7+K+v/DmUQDkc23CNxbFpAogIa/Ab/IiaQoxmOThlnkG8TiKK5UUJNNR+MMYjqUaIJnWEYuXeEFTBCTXv1hUi0HCxXYWsbirqiAhb/BBWcE9KLimDEgB68pLTMAL6oBNdcBT6oBr6oAn1O9i2a2Od/DM1Jc4KBivVOYyLHFm6f4ODAoGBV0VcB0fYjAo6KqA6/gQg0FBVwVcx4cYDAq6KuA6/v+Mwel0Wmm325XhcOgqkH08/h6cyiaTSdRoNPhvBFGtVosGg0Gq8Wk7V9IO6Pf7MzgC+oBMDcgn1Ov1vEFmAvQJmRmQkN1ut3AlnQB9QDoDErLT6RSmZC6ARULmBlgUpPxWl5uCRcVhLoBFwTFsnAGLfi10AiwazklBX/txJgV9wWVSUP7tlvwbVspOyFarVfi7ac4Vvquzfyoy95DfiwOgeQHtrUFBu0bmHkFBsz721qCgXSNzj6CgWR97a1DQrpG5R1DQrI+9NSho18jcIyho1sfauqeuoDzgN3UFv6gD7qh/cK8rA84OGygv8VO+CCkrKH3g5Q1P41BB1SV+QDia4hJvQ72LB3h6gPIH/+5CvVGsntoSPwYQzxr/VgRkJoF1wP1KwvFa4SaRPgDNI+RLT2dTwTJfB+9j/jaWden5dgIe5oNnG2O+WwCb7bXWuflliSfLlAjCh4JULHMqjaIAc0tGkhdgnM6FyXI2EV+5pXNxAeTSMSHOSzg3+H2UuVsaQKq0A/eaUmiVb9yZlOk6vJSkTCZA2bRWsonBpFOrySan+wNoJmOM0LyBGwAAAABJRU5ErkJggg==);
transform: rotateY(180deg);
right: 0px;
}
&.right-btn-open {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAACACAMAAABOb9vcAAAAhFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AAADHx8cODg50dHTx8fF2dnZ1dXWWlpZHR0c4ODhQpkZ5AAAAIXRSTlMA9t+/upkRAnPq5NXDfDEsKQjMeGlRThkMsquljTwzIWhBHpjgAAABJElEQVRYw+3YyW7CQBCEYbxig8ELGJyQkJRJyPb+75dj3zy/lD7kMH3+ZEuzSFO1mlZwhjOE2uwhVHJYMygNVwilhz2EUvNaMigledUFoE1anKYAtA9nVRuANpviOQBt0t2ZQSnZ9QxK6Qih9LSGUHkJobYlhGp6CPW4hlAVhckLhMop1InCjEK1FBYU1hSqo/BI4YXCjMIthTWFijDCCB3g7fuO4O1t/rkvQXPz/LUIzX0oAM0tQHOfCkBzC9DcuwLQXACao9Dv1yb9lsek2xaaxMcMH1x6Ff79dY0wwgj/DGv3p2tG4cX9wd55h4rCO/hk3uEs9w6QlXPIbXrfIJ6XrmVBOtJCA1YkXqVLkh1aUgyNk1fV1BxLxzpsuNLKzrME/AWr0ywwvyj83AAAAABJRU5ErkJggg==);
right: 304px;
}
}
</style>
128 changes: 128 additions & 0 deletions src/components/homeRight.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<template>
<!-- 属性区域 380-->
<div class="right-bar">
<div v-if="show" style="padding-top: 10px">
<!-- 未选择元素时 展示背景设置 -->
<div v-show="!mixinState.mSelectMode">
<set-size></set-size>
<bg-bar></bg-bar>
</div>

<!-- 多选时展示 -->
<div v-show="mixinState.mSelectMode === 'multiple'">
<!-- 分组 -->
<group></group>
<!-- <Divider plain></Divider> -->
<!-- 组对齐方式 -->
<align></align>
<!-- 居中对齐 -->
<center-align></center-align>
</div>

<div v-show="mixinState.mSelectMode === 'one'" class="attr-item-box">
<!-- <h3>快捷操作</h3> -->
<!-- 分组 -->
<group></group>
<!-- <Divider plain></Divider> -->
<Divider plain orientation="left">
<h4>快捷操作</h4>
</Divider>
<div class="bg-item" v-show="mixinState.mSelectMode">
<lock></lock>
<dele></dele>
<clone></clone>
<hide></hide>
<edit></edit>
</div>
<!-- <Divider plain></Divider> -->
<!-- 居中对齐 -->
<center-align></center-align>
<!-- 替换图片 -->
<replaceImg></replaceImg>
<!-- 图片裁切 -->
<clip-image></clip-image>
<!-- 翻转 -->
<flip></flip>
<!-- 条形码属性 -->
<attributeBarcode></attributeBarcode>
<!-- 二维码 -->
<attributeQrCode></attributeQrCode>
<!-- 图片滤镜 -->
<filters></filters>
<!-- 图片描边 -->
<imgStroke />
<!-- 颜色 -->
<attributeColor></attributeColor>
<!-- 字体属性 -->
<attributeFont></attributeFont>
<!-- 字体小数点 -->
<attributeTextFloat></attributeTextFloat>
<!-- 文字内容 -->
<attribute-text-content></attribute-text-content>
<!-- 位置信息 -->
<attributePostion></attributePostion>
<!-- 阴影 -->
<attributeShadow></attributeShadow>
<!-- 边框 -->
<attributeBorder></attributeBorder>
<!-- 圆角 -->
<attributeRounded></attributeRounded>
<!-- 关联数据 -->
<attributeId></attributeId>

<!-- 新增字体样式使用 -->
<Button @click="canvasEditor.getFontJson()" size="small">获取元素数据</Button>
</div>
</div>
<!-- <attribute v-if="state.show"></attribute> -->
</div>
<!-- 右侧关闭按钮 -->
<div
:class="`close-btn right-btn ${attrBarShow && 'right-btn-open'}`"
@click="attrBarShow = !attrBarShow"
></div>
</template>

<script setup lang="ts">
import align from '@/components/align.vue';
import centerAlign from '@/components/centerAlign.vue';
import flip from '@/components/flip.vue';
import clone from '@/components/clone.vue';
import hide from '@/components/hide.vue';
import group from '@/components/group.vue';
import bgBar from '@/components/bgBar.vue';
import setSize from '@/components/setSize.vue';
import replaceImg from '@/components/replaceImg.vue';
import filters from '@/components/filters.vue';
import imgStroke from '@/components/imgStroke.vue';
import attributePostion from '@/components/attributePostion.vue';
import attributeId from '@/components/attributeId.vue';
import attributeShadow from '@/components/attributeShadow.vue';
import attributeBorder from '@/components/attributeBorder.vue';
import attributeRounded from '@/components/attributeRounded.vue';
import attributeFont from '@/components/attributeFont.vue';
import attributeTextFloat from '@/components/attributeTextFloat.vue';
import attributeColor from '@/components/attributeColor.vue';
import attributeBarcode from '@/components/attributeBarcode.vue';
import attributeQrCode from '@/components/attributeQrCode.vue';
import lock from '@/components/lock.vue';
import dele from '@/components/del.vue';
import { inject } from 'vue';

const mixinState = inject('mixinState');
const canvasEditor = inject('canvasEditor');

const show = defineModel('show', { type: Boolean });
const attrBarShow = defineModel('attrBarShow', { type: Boolean });
</script>

<style lang="less" scoped>
// 右侧容器
.right-bar {
width: 304px;
height: 100%;
padding: 10px;
overflow-y: auto;
background: #fff;
}
</style>
Loading