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

优化文档菜单中排序的显示方式

Browse Source
This commit is contained in:
xiaozzzi 2023-10-02 18:35:27 +08:00
parent 0d34f67288
commit ff476bafd2
8 changed files with 111 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@
<el-menu-item v-if="isEmpty(L1.children)" :index="L1.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L1)" @click.right="handleClickRightMenu(L1, $event)">
<ArticleTreeTitle :trees="L1" />
<ArticleTreeTitle :trees="L1" :level="1" />
</div>
</template>
</el-menu-item>
@ -25,7 +25,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L1.i">
<template #title>
<div class="menu-item-wrapper" @click.right="handleClickRightMenu(L1, $event)">
<ArticleTreeTitle :trees="L1" />
<ArticleTreeTitle :trees="L1" :level="1" />
</div>
</template>
@ -35,7 +35,7 @@
<el-menu-item v-if="isEmpty(L2.children)" :index="L2.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L2)" @click.right="handleClickRightMenu(L2, $event)">
<ArticleTreeTitle :trees="L2" />
<ArticleTreeTitle :trees="L2" :level="2" />
</div>
</template>
</el-menu-item>
@ -44,7 +44,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L2.i">
<template #title>
<div class="menu-item-wrapper" @click.right="handleClickRightMenu(L2, $event)">
<ArticleTreeTitle :trees="L2" />
<ArticleTreeTitle :trees="L2" :level="2" />
</div>
</template>
@ -55,7 +55,7 @@
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L3)"
@click.right="handleClickRightMenu(L3, $event)">
<ArticleTreeTitle :trees="L3" />
<ArticleTreeTitle :trees="L3" :level="3" />
</div>
</template>
</el-menu-item>
@ -64,7 +64,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L3.i">
<template #title>
<div class="menu-item-wrapper" @click.right="handleClickRightMenu(L3, $event)">
<ArticleTreeTitle :trees="L3" />
<ArticleTreeTitle :trees="L3" :level="3" />
</div>
</template>
@ -75,7 +75,7 @@
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L4)" style="width: 100%;"
@click.right="handleClickRightMenu(L4, $event)">
<ArticleTreeTitle :trees="L4" />
<ArticleTreeTitle :trees="L4" :level="4" />
</div>
</template>
</el-menu-item>
@ -262,11 +262,7 @@ const concatSort = (trees: DocTree[]) => {
if (!isEmpty(trees[i].children)) {
concatSort(trees[i].children as DocTree[])
}
if (showSort.value) {
trees[i].n = trees[i].s + '〉' + trees[i].n
} else {
trees[i].n = trees[i].n.substring(trees[i].n.indexOf('〉') + 1)
}
trees[i].showSort = showSort.value
}
}

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

@ -1,6 +1,8 @@
<template>
<div :class="['doc-title', props.trees.t?.includes('subject') ? 'subject-title' : '']">
<bl-tag class="sort" v-show="props.trees.showSort" :bgColor="levelColor">
{{ props.trees.s }}
</bl-tag>
<div class="doc-name">
<svg v-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
@ -23,10 +25,16 @@
import { computed } from 'vue'
import type { PropType } from 'vue'
import { isNotBlank } from '@renderer/assets/utils/obj'
import { computedDocTitleColor } from '@renderer/views/doc/doc'
const props = defineProps({
trees: { type: Object as PropType<DocTree>, default: {} },
size: { type: Number, default: 14 }
size: { type: Number, default: 14 },
level: { type: Number, required: true },
})
const levelColor = computed(() => {
return computedDocTitleColor(props.level)
})
/**
@ -87,6 +95,11 @@ $icon-size: 17px;
@include themeBrightness(100%, 80%);
@include ellipsis();
}
.sort {
position: absolute;
right: -15px;
}
}
// 专题样式, 包括边框和文字样式

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

@ -10,34 +10,50 @@
<bl-row class="wb-page-container">
<Transition name="wbpage-one">
<bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 1">
<el-tooltip content="显示排序" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip effect="blossomb" :show-after="1000" :hide-after="0" :auto-close="2000">
<div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div>
<template #content> 显示排序<br />
<bl-row>
<bl-tag :bgColor="TitleColor.ONE">一级</bl-tag>
<bl-tag :bgColor="TitleColor.TWO">二级</bl-tag>
</bl-row>
<bl-row>
<bl-tag :bgColor="TitleColor.THREE">三级</bl-tag>
<bl-tag :bgColor="TitleColor.FOUR">四级</bl-tag>
</bl-row>
</template>
</el-tooltip>
<el-tooltip content="只显示公开" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip content="只显示公开" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div v-if="props.showOpen">
<div v-if="onlyOpen" class="iconbl bl-cloud-fill" @click="changeOnlyOpen()"></div>
<div v-else class="iconbl bl-cloud-line" @click="changeOnlyOpen()"></div>
</div>
</el-tooltip>
<el-tooltip content="只显示专题" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip content="只显示专题" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div v-if="props.showSubject">
<div v-if="onlySubject" class="iconbl bl-a-lowerrightpage-fill" @click="changeOnlySubject()"></div>
<div v-else class="iconbl bl-a-lowerrightpage-line" @click="changeOnlySubject()"></div>
</div>
</el-tooltip>
<el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div v-if="props.showStar">
<div v-if="onlyStars" class="iconbl bl-star-fill" @click="changeOnlyStar()"></div>
<div v-else class="iconbl bl-star-line" @click="changeOnlyStar()"></div>
</div>
</el-tooltip>
<el-tooltip content="刷新列表" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip content="刷新列表" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div class="iconbl bl-a-cloudrefresh-line" @click="refreshDocTree()"></div>
</el-tooltip>
<el-tooltip content="新增文件夹或文档" effect="blossomb" :hide-after="0" :auto-close="2000">
<el-tooltip content="新增文件夹或文档" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div class="iconbl bl-a-fileadd-line" @click="handleShowAddDocInfoDialog()"></div>
</el-tooltip>
<el-tooltip content="文章引用网络" effect="blossomb" :hide-after="0" :auto-close="2000">
<el-tooltip content="文章引用网络" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div class="iconbl bl-correlation-line" @click="openArticleReferenceWindow()"></div>
</el-tooltip>
</bl-row>
@ -45,7 +61,8 @@
<Transition name="wbpage-two">
<bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 2">
<el-tooltip content="查看备份记录" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<el-tooltip content="查看备份记录" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
:auto-close="2000">
<div class="iconbl bl-a-cloudstorage-line" @click="handleShowBackupDialog"></div>
</el-tooltip>
</bl-row>
@ -77,7 +94,7 @@
<script setup lang="ts">
import { ref, nextTick, inject } from "vue"
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { provideKeyDocInfo } from '@renderer/views/doc/doc'
import { provideKeyDocInfo, TitleColor } from '@renderer/views/doc/doc'
import { openNewArticleReferenceWindow } from "@renderer/assets/utils/electron"
import ArticleInfo from './ArticleInfo.vue'
import ArticleBackup from './ArticleBackup.vue'

25
blossom-editor/src/renderer/src/views/doc/doc.ts
View File

@ -24,4 +24,29 @@ export const treeToInfo = (tree: DocTree): DocInfo => {
starStatus: 0,
type: tree.ty
}
}
export enum TitleColor {
ONE = '#C9515193',
TWO = '#E6981293',
THREE = '#127EA993',
FOUR = '#4AA40E93',
}
/**
* 通过标题等级计算颜色
* @param level 标题等级
* @returns
*/
export const computedDocTitleColor = (level: number) => {
if (level === 1) {
return TitleColor.ONE
}
if (level === 2) {
return TitleColor.TWO
}
if (level === 3) {
return TitleColor.THREE
}
return TitleColor.FOUR
}

2
blossom-editor/src/renderer/src/views/doc/type.d.ts vendored
View File

@ -22,6 +22,8 @@ declare interface DocTree {
ty: DocType,
/** 是否 star */
star: number,
/** 是否显示排序 */
showSort?: boolean,
/** 子集 */
children?: DocTree[]
}

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

@ -19,7 +19,7 @@
<el-menu-item v-else-if="isEmpty(L1.children)" :index="L1.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L1)" @click.right="handleClickRight(L1, $event)">
<PictureTitle :trees="L1" />
<PictureTitle :trees="L1" :level="1" />
</div>
</template>
</el-menu-item>
@ -28,7 +28,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L1.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L1)" @click.right="handleClickRight(L1, $event)">
<PictureTitle :trees="L1" />
<PictureTitle :trees="L1" :level="1" />
</div>
</template>
@ -38,7 +38,7 @@
<el-menu-item v-if="isEmpty(L2.children)" :index="L2.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L2)" @click.right="handleClickRight(L2, $event)">
<PictureTitle :trees="L2" />
<PictureTitle :trees="L2" :level="2" />
</div>
</template>
</el-menu-item>
@ -47,7 +47,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L2.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L2)" @click.right="handleClickRight(L2, $event)">
<PictureTitle :trees="L2" />
<PictureTitle :trees="L2" :level="2" />
</div>
</template>
@ -57,7 +57,7 @@
<el-menu-item v-if="isEmpty(L3.children)" :index="L3.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L3)" @click.right="handleClickRight(L3, $event)">
<PictureTitle :trees="L3" />
<PictureTitle :trees="L3" :level="3" />
</div>
</template>
</el-menu-item>
@ -66,7 +66,7 @@
<el-sub-menu v-else :expand-open-icon="ArrowDownBold" :expand-close-icon="ArrowRightBold" :index="L3.i">
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L3)" @click.right="handleClickRight(L3, $event)">
<PictureTitle :trees="L3" />
<PictureTitle :trees="L3" :level="3" />
</div>
</template>
@ -77,7 +77,7 @@
<template #title>
<div class="menu-item-wrapper" @click="clickCurDoc(L4)" style="width: 100%;"
@click.right="handleClickRight(L4, $event)">
<PictureTitle :trees="L4" />
<PictureTitle :trees="L4" :level="4" />
</div>
</template>
</el-menu-item>
@ -178,6 +178,7 @@ const getDocTree = () => {
})
docTreeData.value = docTree
concatSort(docTreeData.value)
}).finally(() => {
docTreeLoading.value = false
})
@ -192,11 +193,7 @@ const concatSort = (trees: DocTree[]) => {
if (!isEmpty(trees[i].children)) {
concatSort(trees[i].children as DocTree[])
}
if (showSort.value) {
trees[i].n = trees[i].s + '〉' + trees[i].n
} else {
trees[i].n = trees[i].n.substring(trees[i].n.indexOf('〉') + 1)
}
trees[i].showSort = showSort.value
}
}
/**

21
blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue
View File

@ -1,9 +1,14 @@
<template>
<div class="doc-title">
<bl-tag class="sort" v-show="props.trees.showSort" :bgColor="levelColor">
{{ props.trees.s }}
</bl-tag>
<svg v-if="isNotBlank(props.trees.icon)" class="icon menu-icon" aria-hidden="true">
<use :xlink:href="'#' + props.trees.icon"></use>
</svg>
<span class="doc-name">{{ props.trees.n }}</span>
<span class="doc-name">
{{ props.trees.n }}
</span>
<!-- 如果专题是公开的, 则单独显示公开标签 -->
<bl-tag v-if="props.trees.o === 1 && isSubjectDoc" :bg-color="'#7AC20C'" :icon="'bl-cloud-line'"></bl-tag>
<div v-for="tag in tags">
@ -18,17 +23,23 @@
import { computed } from 'vue'
import type { PropType } from 'vue'
import { isNotBlank } from '@renderer/assets/utils/obj'
import { computedDocTitleColor } from '@renderer/views/doc/doc'
//#region ----------------------------------------< 标题信息 >--------------------------------------
const props = defineProps({
trees: { type: Object as PropType<DocTree>, default: {} }
trees: { type: Object as PropType<DocTree>, default: {} },
level: { type: Number, required: true },
})
const isSubjectDoc = computed(() => {
return props.trees.t?.includes('subject')
})
const levelColor = computed(() => {
return computedDocTitleColor(props.level)
})
/**
* 计算标签, 并返回便签对象集合
*/
@ -60,11 +71,15 @@ $icon-size: 17px;
@include flex(row, flex-start, center);
align-content: flex-start;
flex-wrap: wrap;
font-size: 14px;
max-width: calc(100% - 10px);
min-width: calc(100% - 10px);
padding-bottom: 1px;
position: relative;
font-size: 14px;
.sort {
position: absolute;
right: -10px;
}
}
.open-line,

12
blossom-editor/src/renderer/src/views/picture/PictureTreeWorkbench.vue
View File

@ -11,9 +11,13 @@
<!-- -->
<bl-row just="flex-end" align="flex-end">
<el-tooltip content="显示排序" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<div>
<div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div>
</div>
<div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div>
<template #content> 显示排序<br />
<bl-tag :bgColor="TitleColor.ONE">一级</bl-tag>
<bl-tag :bgColor="TitleColor.TWO">二级</bl-tag>
<bl-tag :bgColor="TitleColor.THREE">三级</bl-tag>
<bl-tag :bgColor="TitleColor.FOUR">四级</bl-tag>
</template>
</el-tooltip>
<el-tooltip content="刷新列表" effect="blossomt" placement="top" :hide-after="0" :auto-close="2000">
<div class="iconbl bl-a-cloudrefresh-line" @click="refreshDocTree()"></div>
@ -31,7 +35,7 @@
<script setup lang="ts">
import { ref, nextTick, inject } from "vue"
import { provideKeyDocInfo } from '@renderer/views/doc/doc'
import { provideKeyDocInfo, TitleColor } from '@renderer/views/doc/doc'
import PictureInfo from '@renderer/views/picture/PictureInfo.vue'
// 当前菜单中选择的文档