mirror of
https://gitee.com/blossom-editor/blossom.git
synced 2025-12-08 01:38:27 +08:00
perf: 删除无用代码
This commit is contained in:
xiaozzzi
parent
1d9b3f66ca
commit
9d5776f1b4
@ -1,235 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="[viewStyle.isShowSubjectStyle ? (isSubject ? 'subject-title' : 'doc-title') : 'doc-title']">
|
|
||||||
<bl-tag class="sort" v-show="props.trees.showSort">
|
|
||||||
{{ props.trees.s }}
|
|
||||||
</bl-tag>
|
|
||||||
<div class="doc-name">
|
|
||||||
<img
|
|
||||||
class="menu-icon-img"
|
|
||||||
v-if="
|
|
||||||
viewStyle.isShowArticleIcon &&
|
|
||||||
isNotBlank(props.trees.icon) &&
|
|
||||||
(props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https')) &&
|
|
||||||
!props.trees?.updn
|
|
||||||
"
|
|
||||||
:src="props.trees.icon" />
|
|
||||||
<svg v-else-if="viewStyle.isShowArticleIcon && isNotBlank(props.trees.icon) && !props.trees?.updn" class="icon menu-icon" aria-hidden="true">
|
|
||||||
<use :xlink:href="'#' + props.trees.icon"></use>
|
|
||||||
</svg>
|
|
||||||
<el-input
|
|
||||||
v-if="props.trees?.updn"
|
|
||||||
v-model="props.trees.n"
|
|
||||||
:id="'article-doc-name-' + props.trees.i"
|
|
||||||
@blur="blurArticleNameInput"
|
|
||||||
@keyup.enter="blurArticleNameInput"
|
|
||||||
style="width: 95%"></el-input>
|
|
||||||
<div v-else class="name-wrapper" :style="nameWrapperStyle">
|
|
||||||
{{ props.trees.n }}
|
|
||||||
</div>
|
|
||||||
<bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">
|
|
||||||
{{ tag.content }}
|
|
||||||
</bl-tag>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="viewStyle.isShowArticleType"
|
|
||||||
v-for="(line, index) in tagLins"
|
|
||||||
:key="line"
|
|
||||||
:class="[line]"
|
|
||||||
:style="{ left: -1 * (index + 1.5) * 4 + 'px' }"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import { useConfigStore } from '@renderer/stores/config'
|
|
||||||
import { isNotBlank } from '@renderer/assets/utils/obj'
|
|
||||||
import { articleUpdNameApi, folderUpdNameApi } from '@renderer/api/blossom'
|
|
||||||
|
|
||||||
const { viewStyle } = useConfigStore()
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
trees: { type: Object as PropType<DocTree>, default: {} },
|
|
||||||
size: { type: Number, default: 14 }
|
|
||||||
})
|
|
||||||
|
|
||||||
const nameWrapperStyle = computed(() => {
|
|
||||||
return {
|
|
||||||
maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 是否是专题
|
|
||||||
*/
|
|
||||||
const isSubject = computed(() => {
|
|
||||||
return props.trees.t?.includes('subject')
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 计算标签, 并返回便签对象集合
|
|
||||||
*/
|
|
||||||
const tags = computed(() => {
|
|
||||||
let icons: any = []
|
|
||||||
props.trees.t?.forEach((tag) => {
|
|
||||||
if (tag.toLocaleLowerCase() === 'subject') {
|
|
||||||
icons.unshift({ content: '专题', bgColor: 'var(--bl-tag-color-subject)', icon: 'bl-a-lowerrightpage-line' })
|
|
||||||
} else if (tag.toLocaleLowerCase() === 'toc') {
|
|
||||||
if (!viewStyle.isShowArticleTocTag) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
icons.push({ content: 'TOC', bgColor: 'var(--bl-tag-color-toc)' })
|
|
||||||
} else if (viewStyle.isShowArticleCustomTag) {
|
|
||||||
icons.push({ content: tag })
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (props.trees.o === 1 && props.trees.ty != 3) {
|
|
||||||
if (viewStyle.isShowFolderOpenTag) {
|
|
||||||
icons.unshift({ bgColor: 'var(--bl-tag-color-open)', icon: 'bl-cloud-line' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return icons
|
|
||||||
})
|
|
||||||
|
|
||||||
// 竖条状态标识
|
|
||||||
const tagLins = computed(() => {
|
|
||||||
let lines: string[] = []
|
|
||||||
if (props.trees.star === 1) {
|
|
||||||
lines.push('star-line')
|
|
||||||
}
|
|
||||||
if (props.trees.o === 1 && props.trees.ty === 3) {
|
|
||||||
lines.push('open-line')
|
|
||||||
}
|
|
||||||
if (props.trees.vd === 1) {
|
|
||||||
lines.push('sync-line')
|
|
||||||
}
|
|
||||||
return lines
|
|
||||||
})
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 重命名文章
|
|
||||||
*/
|
|
||||||
const blurArticleNameInput = () => {
|
|
||||||
if (props.trees.ty === 3) {
|
|
||||||
articleUpdNameApi({ id: props.trees.i, name: props.trees.n }).then((_resp) => {
|
|
||||||
props.trees.updn = false
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
folderUpdNameApi({ id: props.trees.i, name: props.trees.n }).then((_resp) => {
|
|
||||||
props.trees.updn = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
$icon-size: 17px;
|
|
||||||
|
|
||||||
.doc-title {
|
|
||||||
@include flex(row, flex-start, flex-start);
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
padding: 1px 0;
|
|
||||||
|
|
||||||
.doc-name {
|
|
||||||
@include flex(row, flex-start, flex-start);
|
|
||||||
@include themeBrightness(100%, 90%);
|
|
||||||
@include ellipsis();
|
|
||||||
font-size: inherit;
|
|
||||||
align-content: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.menu-icon,
|
|
||||||
.menu-icon-img {
|
|
||||||
@include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
|
|
||||||
margin-top: 4px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
.menu-icon-img {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-wrapper {
|
|
||||||
min-height: 23px;
|
|
||||||
line-height: 23px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort {
|
|
||||||
position: absolute;
|
|
||||||
padding: 0 2px;
|
|
||||||
right: 0px;
|
|
||||||
top: 2px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 专题样式, 包括边框和文字样式
|
|
||||||
.subject-title {
|
|
||||||
@include flex(row, flex-start, flex-start);
|
|
||||||
@include themeShadow(2px 2px 8px 1px var(--el-color-primary-light-8), 2px 2px 10px 1px #131313);
|
|
||||||
background: linear-gradient(135deg, var(--el-color-primary-light-7), var(--el-color-primary-light-8), var(--bl-html-color));
|
|
||||||
min-height: 44px;
|
|
||||||
max-width: 300px;
|
|
||||||
width: calc(100% - 10px);
|
|
||||||
padding: 4px 5px;
|
|
||||||
margin: 5px 0 5px 0;
|
|
||||||
border-radius: 7px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.doc-name {
|
|
||||||
@include flex(row, flex-start, flex-start);
|
|
||||||
@include themeBrightness(100%, 100%);
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
align-content: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.menu-icon,
|
|
||||||
.menu-icon-img {
|
|
||||||
@include box($icon-size, $icon-size, $icon-size, $icon-size, $icon-size, $icon-size);
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon-img {
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-wrapper {
|
|
||||||
max-width: calc(100% - 25px);
|
|
||||||
min-width: calc(100% - 25px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort {
|
|
||||||
position: absolute;
|
|
||||||
right: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 在左侧显示
|
|
||||||
.open-line,
|
|
||||||
.star-line,
|
|
||||||
.sync-line {
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 70%;
|
|
||||||
top: 15%;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.star-line {
|
|
||||||
@include themeBg(rgb(237, 204, 11), rgba(228, 195, 5, 0.724));
|
|
||||||
}
|
|
||||||
|
|
||||||
.open-line {
|
|
||||||
background: #79c20c71;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sync-line {
|
|
||||||
background: #e8122479;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +1,4 @@
|
|||||||
import { isNull } from '@renderer/assets/utils/obj'
|
import { isNull } from '@renderer/assets/utils/obj'
|
||||||
import Notify from '@renderer/scripts/notify'
|
|
||||||
import { isEmpty } from 'lodash'
|
import { isEmpty } from 'lodash'
|
||||||
import { Ref } from 'vue'
|
import { Ref } from 'vue'
|
||||||
import type { InjectionKey } from 'vue'
|
import type { InjectionKey } from 'vue'
|
||||||
@ -77,12 +76,7 @@ export const computedDocTitleColor = (level: number) => {
|
|||||||
* @returns
|
* @returns
|
||||||
* @deprecated 1.14.0 支持无限菜单后不需要控制层级
|
* @deprecated 1.14.0 支持无限菜单后不需要控制层级
|
||||||
*/
|
*/
|
||||||
export const checkLevel = (pid: string, trees: DocTree[]): boolean => {
|
export const checkLevel = (_pid: string, _trees: DocTree[]): boolean => {
|
||||||
// let parents = getPDocsByPid(pid, trees)
|
|
||||||
// if (parents.length >= 4) {
|
|
||||||
// Notify.error('最多仅支持4级层级关系', '菜单层级错误')
|
|
||||||
// return false
|
|
||||||
// }
|
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -5,13 +5,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, nextTick } from 'vue'
|
|
||||||
|
|
||||||
// ---------- 新增修改按钮 ----------
|
|
||||||
const refreshDocTree = () => {
|
|
||||||
emits('refreshDocTree')
|
|
||||||
}
|
|
||||||
//#endregion
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user