zero/blossom
1
0
Fork 0
mirror of https://github.com/blossom-editor/blossom synced 2024-11-17 14:39:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 右键菜单优化

Browse Source
This commit is contained in:
xiaozzzi 2024-02-06 14:55:22 +08:00
parent 368971db62
commit ffb6264c05
6 changed files with 55 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
blossom-editor/src/renderer/src/assets/styles/index.scss
View File

@ -11,4 +11,5 @@
@import './bl-notification.scss';
@import './bl-tip.scss';
@import './bl-tooltip.scss';
@import './bl-tree.scss';
@import './bl-tree.scss';
@import '../../views/doc/tree-docs-right-menu.scss';

17
blossom-editor/src/renderer/src/views/article/ArticleTreeDocs.vue
View File

@ -100,11 +100,7 @@
</div>
<Teleport to="body">
<div
v-show="rMenu.show"
class="doc-tree-right-menu"
:style="{ left: rMenu.clientX + 'px', top: rMenu.clientY + 'px' }"
ref="ArticleDocTreeRightMenuRef">
<div v-show="rMenu.show" class="tree-menu" :style="{ left: rMenu.clientX + 'px', top: rMenu.clientY + 'px' }" ref="ArticleDocTreeRightMenuRef">
<div class="doc-name">{{ curDoc.n }}</div>
<div class="menu-content">
<div @click="rename"><span class="iconbl bl-pen"></span>重命名</div>
@ -118,7 +114,7 @@
<div @mouseenter="handleHoverRightMenuLevel2($event, 2)" data-bl-prevet="true">
<span class="iconbl bl-a-rightsmallline-line"></span>
<span class="iconbl bl-apps-line"></span>更多
<div class="menu-content-level2" :style="rMenuLevel2">
<div class="tree-menu-level2" :style="rMenuLevel2">
<div v-if="curDoc.o === 0" @click="open(1)"><span class="iconbl bl-a-cloudupload-line"></span>公开</div>
<div v-if="curDoc.o === 1" @click="open(0)"><span class="iconbl bl-a-clouddownload-line"></span>取消公开</div>
<div v-if="curDoc.star === 0 && curDoc.ty === 3" @click="star(1)"><span class="iconbl bl-star-fill"></span>收藏</div>
@ -146,7 +142,7 @@
<div v-if="curDoc.ty === 3" @mouseenter="handleHoverRightMenuLevel2($event, 4)" data-bl-prevet="true">
<span class="iconbl bl-a-rightsmallline-line"></span>
<span class="iconbl bl-file-download-line"></span>导出文章
<div class="menu-content-level2" :style="rMenuLevel2">
<div class="tree-menu-level2" :style="rMenuLevel2">
<div @click="articleDownload"><span class="iconbl bl-file-markdown"></span>导出为 MD</div>
<div @click="articleBackup('MARKDOWN')"><span class="iconbl bl-file-markdown"></span>导出为本地 MD</div>
<div @click="articleDownloadHtml"><span class="iconbl bl-HTML"></span>导出为 HTML</div>
@ -156,7 +152,7 @@
<div v-if="curDoc.ty === 3" @mouseenter="handleHoverRightMenuLevel2($event, 2)" data-bl-prevet="true">
<span class="iconbl bl-a-rightsmallline-line"></span>
<span class="iconbl bl-a-linkspread-line"></span>创建链接
<div class="menu-content-level2" :style="rMenuLevel2">
<div class="tree-menu-level2" :style="rMenuLevel2">
<div v-if="curDoc.o === 1" @click="createUrl('copy')"><span class="iconbl bl-planet-line"></span>复制博客地址</div>
<div @click="createUrl('tempVisit')"><span class="iconbl bl-visit"></span>创建临时访问(3h)</div>
<div @click="handleShowACustomTempVisitDialog"><span class="iconbl bl-visit"></span>创建临时访问(自定义)</div>
@ -841,5 +837,8 @@ defineExpose({ getDocTreeData })
<style scoped lang="scss">
@import '../doc/tree-docs.scss';
@import '../doc/tree-docs-right-menu.scss';
</style>
<!-- <style lang="scss">
@import '../doc/tree-docs-right-menu.scss';
</style> -->

5
blossom-editor/src/renderer/src/views/article/ArticleTreeWorkbench.vue
View File

@ -176,8 +176,8 @@
</el-dialog>
<Teleport to="body">
<div v-show="moreMenu.show" class="doc-tree-right-menu" :style="{ left: moreMenu.clientX + 'px', top: moreMenu.clientY + 'px', width: '120px' }">
<div class="menu-content">
<div v-show="moreMenu.show" class="tree-menu" :style="{ left: moreMenu.clientX + 'px', top: moreMenu.clientY + 'px', width: '120px' }">
<div class="menu-content" style="border: none">
<div @click="changeOnlyOpen"><span class="iconbl bl-cloud-line"></span>查看公开</div>
<div @click="changeOnlySubject"><span class="iconbl bl-a-lowerrightpage-line"></span>查看专题</div>
<div @click="changeOnlyStar"><span class="iconbl bl-star-line"></span>查看收藏</div>
@ -369,7 +369,6 @@ defineExpose({ handleShowBackupDialog })
<style scoped lang="scss">
@import '../doc/tree-workbench.scss';
@import '../doc/tree-docs-right-menu.scss';
.wb-page-container {
position: relative;

3
blossom-editor/src/renderer/src/views/article/styles/editor-right-menu.scss
View File

@ -3,7 +3,7 @@
*/
.editor-right-menu {
@include box(170px, auto);
@include themeShadow(3px 3px 7px 2px rgba(49, 49, 49, 0.3), 2px 3px 7px 2px #0f0f0f);
@include themeShadow(2px 2px 5px 2px rgba(49, 49, 49, 0.3), 2px 3px 7px 2px #0f0f0f);
@include themeBg(#f9f9f9, #333434);
position: fixed;
z-index: 2002;
@ -24,7 +24,6 @@
.menu-item {
@include flex(row, flex-start, center);
line-height: 0.9;
// padding: 5px 5px 5px 10px;
margin: 0 5px 5px 5px;
height: 25px;
line-height: 25px;

69
blossom-editor/src/renderer/src/views/doc/tree-docs-right-menu.scss
View File

@ -1,10 +1,10 @@
/*
文档菜单右键菜单样式
*/
.doc-tree-right-menu {
.tree-menu {
@include box(170px, auto);
@include themeShadow(3px 3px 7px 2px rgba(49, 49, 49, 0.3), 2px 3px 7px 2px #0f0f0f);
@include themeBg(#f9f9f9, #333434);
@include themeShadow(2px 2px 5px 1px rgba(49, 49, 49, 0.2), 2px 3px 7px 2px #0f0f0f);
position: fixed;
z-index: 2002;
border-radius: 5px;
@ -25,8 +25,7 @@
border-top: 1px solid var(--el-border-color);
padding: 5px 0;
&>div,
& > div,
.menu-item {
@include flex(row, flex-start, center);
line-height: 0.9;
@ -54,7 +53,7 @@
&:hover {
background: var(--el-color-primary-light-8);
.menu-content-level2 {
.tree-menu-level2 {
display: block;
position: absolute;
left: 160px;
@ -65,21 +64,6 @@
&:last-child {
margin-bottom: 0;
}
// 二级菜单
.menu-content-level2 {
@extend .doc-tree-right-menu;
padding: 5px 0;
display: none;
&:hover {
display: block;
}
&>div {
@extend .menu-item;
}
}
}
.menu-item-divider {
@ -88,15 +72,44 @@
margin: 0 0 5px 0;
padding: 0;
}
}
}
.disabled {
cursor: not-allowed;
pointer-events: none;
color: var(--el-color-info-light-5);
// 二级菜单
.tree-menu-level2 {
@include box(170px, auto);
@include themeBg(#f9f9f9, #333434);
@include themeShadow(2px 2px 5px 1px rgba(49, 49, 49, 0.2), 2px 3px 7px 2px #0f0f0f);
position: fixed;
border-radius: 5px;
font-size: 12px;
padding: 5px 0;
display: none;
z-index: 2002;
&:hover {
color: var(--el-color-info-light-5);
}
&:hover {
display: block;
}
& > div {
@include flex(row, flex-start, center);
line-height: 0.9;
padding: 5px 5px 5px 10px;
margin: 0 5px 5px 5px;
border-radius: 5px;
cursor: pointer;
position: relative;
.iconbl {
margin-right: 5px;
}
&:hover {
background: var(--el-color-primary-light-8);
}
&:last-child {
margin-bottom: 0;
}
}
}
}

2
blossom-editor/src/renderer/src/views/picture/PictureTreeDocs.vue
View File

@ -92,7 +92,7 @@
<!-- 右键菜单, 添加到 body 下 -->
<Teleport to="body">
<div v-if="rMenu.show" class="doc-tree-right-menu" :style="{ left: rMenu.clientX + 'px', top: rMenu.clientY + 'px' }">
<div v-if="rMenu.show" class="tree-menu" :style="{ left: rMenu.clientX + 'px', top: rMenu.clientY + 'px' }">
<div class="doc-name">{{ curDoc.n }}</div>
<div class="menu-content">
<div :class="['menu-item', Number(curDoc.i) <= 0 ? 'disabled' : '']" @click="rename"><span class="iconbl bl-pen"></span>重命名</div>