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

blossom-editor/src/renderer/src/views/article/ArticleTreeDocs.vue

@@ -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].showSort = showSort.value
-      trees[i].n = trees[i].s + '〉' + trees[i].n
-    } else {
-      trees[i].n = trees[i].n.substring(trees[i].n.indexOf('〉') + 1)
-    }
   }
 }
 

blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue

@@ -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;
+  }
 }
 
 // 专题样式, 包括边框和文字样式

blossom-editor/src/renderer/src/views/article/ArticleTreeWorkbench.vue

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

blossom-editor/src/renderer/src/views/doc/doc.ts

@@ -25,3 +25,28 @@ export const treeToInfo = (tree: DocTree): DocInfo => {
     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
+}

blossom-editor/src/renderer/src/views/doc/type.d.ts

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

blossom-editor/src/renderer/src/views/picture/PictureTreeDocs.vue

@@ -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].showSort = showSort.value
-      trees[i].n = trees[i].s + '〉' + trees[i].n
-    } else {
-      trees[i].n = trees[i].n.substring(trees[i].n.indexOf('〉') + 1)
-    }
   }
 }
 /**

blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue

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

blossom-editor/src/renderer/src/views/picture/PictureTreeWorkbench.vue

@@ -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>
+        <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'
 
 // 当前菜单中选择的文档