照片墙优化

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

@@ -148,8 +148,8 @@ const cardClass = computed(() => {
 })
 
 //#region ----------------------------------------< 当前文件当前文件 >----------------------------
-const curFolder = ref<DocInfo>() // 当前选中的文档, 包含文件夹和文章, 如果选中是文件夹, 则不会重置编辑器中的文章
 type PageParam = { pageNum: number; pageSize: number; pid: number; name: string; starStatus: number | undefined } // 分页对象类型
+const curFolder = ref<DocInfo>() // 当前选中的文档, 包含文件夹和文章, 如果选中是文件夹, 则不会重置编辑器中的文章
 // 列表参数
 const picuturePageParam = ref<PageParam>({
   pageNum: 1,

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

@@ -4,15 +4,15 @@
     <Workbench @refresh-doc-tree="getDocTree" @show-sort="handleShowSort"></Workbench>
   </div>
 
-  <div class="doc-trees-container" v-loading="docTreeLoading" element-loading-text="正在读取文档..."
+  <div
+    class="doc-trees-container"
+    v-loading="docTreeLoading"
+    element-loading-text="正在读取文档..."
     :style="{ fontSize: configStore.viewStyle.treeDocsFontSize }">
     <!-- 文件夹 -->
     <el-menu v-if="!isEmpty(docTreeData)" class="doc-trees" :unique-opened="true">
-
       <!-- ================================================ L1 ================================================ -->
       <div v-for="L1 in docTreeData" :key="L1.i">
-
-
         <div v-if="L1.ty == 11" class="menu-divider" />
 
         <!-- L1无下级 -->
@@ -75,8 +75,7 @@
                     <!-- L4 不允许有下级, 只允许4级 -->
                     <el-menu-item v-if="isEmpty(L4.children)" :index="L4.i">
                       <template #title>
-                        <div class="menu-item-wrapper" @click="clickCurDoc(L4)" style="width: 100%;"
-                          @click.right="handleClickRight(L4, $event)">
+                        <div class="menu-item-wrapper" @click="clickCurDoc(L4)" style="width: 100%" @click.right="handleClickRight(L4, $event)">
                           <PictureTitle :trees="L4" :level="4" />
                         </div>
                       </template>
@@ -114,24 +113,31 @@
   </Teleport>
 
   <!-- 详情的弹框 -->
-  <el-dialog v-model="isShowDocInfoDialog" width="535" top="100px" style="margin-left: 320px;" :append-to-body="true"
-    :destroy-on-close="true" :close-on-click-modal="false" draggable>
-    <PictureInfo ref="PictureInfoRef"></PictureInfo>
+  <el-dialog
+    v-model="isShowDocInfoDialog"
+    width="535"
+    top="100px"
+    style="margin-left: 320px"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    draggable>
+    <PictureInfo ref="PictureInfoRef" @saved="savedCallback"></PictureInfo>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
 import { useConfigStore } from '@renderer/stores/config'
-import { ref, provide, onActivated, nextTick } from "vue"
+import { ref, provide, onActivated, nextTick } from 'vue'
 import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
-import Workbench from "./PictureTreeWorkbench.vue"
+import Workbench from './PictureTreeWorkbench.vue'
 import { docTreeApi, folderDelApi } from '@renderer/api/blossom'
 import { provideKeyDocTree } from '@renderer/views/doc/doc'
 import { isEmpty } from 'lodash'
 import PictureTitle from './PictureTreeTitle.vue'
 import PictureInfo from '@renderer/views/picture/PictureInfo.vue'
-import Notify from "@renderer/scripts/notify"
-import { ElMessageBox } from "element-plus"
+import Notify from '@renderer/scripts/notify'
+import { ElMessageBox } from 'element-plus'
 
 const configStore = useConfigStore()
 
@@ -139,8 +145,8 @@ onActivated(() => {
   getDocTree()
 })
 
-const docTreeLoading = ref(true)       // 文档菜单的加载动画
-const showSort = ref(false)            // 是否显示文档排序    
+const docTreeLoading = ref(true) // 文档菜单的加载动画
+const showSort = ref(false) // 是否显示文档排序
 const docTreeData = ref<DocTree[]>([]) // 文档菜单
 
 // 依赖注入
@@ -152,43 +158,45 @@ provide(provideKeyDocTree, docTreeData)
  * 2. 在 workbench 中点击按钮调用, 每个按钮是单选的
  */
 const getDocTree = () => {
-  docTreeLoading.value = true;
-  docTreeApi({ onlyPicture: true }).then(resp => {
-    const docTree: DocTree[] = resp.data
-    // 两种类型的交界位置
-    let lastPicIndex: number = docTree.length - 1
-    // 循环一级文件夹，第一个文章文件夹即是最后一个图片文件夹的位置
-    for (let i = 0; i < docTree.length; i++) {
-      let doc = docTree[i]
-      if (doc.ty === 1) {
-        lastPicIndex = i
-        break
+  docTreeLoading.value = true
+  docTreeApi({ onlyPicture: true })
+    .then((resp) => {
+      const docTree: DocTree[] = resp.data
+      // 两种类型的交界位置
+      let lastPicIndex: number = docTree.length - 1
+      // 循环一级文件夹，第一个文章文件夹即是最后一个图片文件夹的位置
+      for (let i = 0; i < docTree.length; i++) {
+        let doc = docTree[i]
+        if (doc.ty === 1) {
+          lastPicIndex = i
+          break
+        }
       }
-    }
 
-    // 插入分割符
-    docTree.splice(Math.max(lastPicIndex, 1), 0, {
-      i: docTree[0].i - 100000,
-      p: 0,
-      n: '',
-      o: 0,
-      t: [],
-      s: 0,
-      icon: '',
-      ty: 11,
-      star: 0
+      // 插入分割符
+      docTree.splice(Math.max(lastPicIndex, 1), 0, {
+        i: docTree[0].i - 100000,
+        p: 0,
+        n: '',
+        o: 0,
+        t: [],
+        s: 0,
+        icon: '',
+        ty: 11,
+        star: 0
+      })
+
+      docTreeData.value = docTree
+      concatSort(docTreeData.value)
+    })
+    .finally(() => {
+      docTreeLoading.value = false
     })
-
-    docTreeData.value = docTree
-    concatSort(docTreeData.value)
-  }).finally(() => {
-    docTreeLoading.value = false
-  })
 }
 
 /**
  * 在名称中显式排序
- * @param trees 
+ * @param trees
  */
 const concatSort = (trees: DocTree[]) => {
   for (let i = 0; i < trees.length; i++) {
@@ -244,17 +252,18 @@ const removeListenerTreeDocsRightMenu = () => {
 //#endregion
 
 //#region 右键菜单功能
-
 /**
  * 删除文档
  */
 const delDoc = () => {
-  ElMessageBox.confirm(
-    `是否确定删除文件夹: <span style="color:#C02B2B;text-decoration: underline;">${curDoc.value.n}</span>？删除后将不可恢复！`, {
-    confirmButtonText: '确定删除', cancelButtonText: '我再想想', type: 'info', draggable: true, dangerouslyUseHTMLString: true,
-  }
-  ).then(() => {
-    folderDelApi({ id: curDoc.value.i }).then(_resp => {
+  ElMessageBox.confirm(`是否确定删除文件夹: <span style="color:#C02B2B;text-decoration: underline;">${curDoc.value.n}</span>？删除后将不可恢复！`, {
+    confirmButtonText: '确定删除',
+    cancelButtonText: '我再想想',
+    type: 'info',
+    draggable: true,
+    dangerouslyUseHTMLString: true
+  }).then(() => {
+    folderDelApi({ id: curDoc.value.i }).then((_resp) => {
       Notify.success(`删除文件夹成功`)
       getDocTree()
     })
@@ -262,9 +271,8 @@ const delDoc = () => {
 }
 
 //#region ----------------------------------------< 新增修改详情弹框 >--------------------------------------
-
 const PictureInfoRef = ref()
-const isShowDocInfoDialog = ref<boolean>(false);
+const isShowDocInfoDialog = ref<boolean>(false)
 
 /**
  * 显示弹框
@@ -283,7 +291,9 @@ const handleShowDocInfoDialog = (dialogType: DocDialogType, pid?: number) => {
   }
   isShowDocInfoDialog.value = true
   if (dialogType === 'add') {
-    nextTick(() => { PictureInfoRef.value.reload(dialogType, undefined, pid) })
+    nextTick(() => {
+      PictureInfoRef.value.reload(dialogType, undefined, pid)
+    })
   }
   if (dialogType === 'upd') {
     nextTick(() => {
@@ -292,6 +302,11 @@ const handleShowDocInfoDialog = (dialogType: DocDialogType, pid?: number) => {
   }
 }
 
+const savedCallback = () => {
+  isShowDocInfoDialog.value = false
+  getDocTree()
+}
+
 //#endregion 右键菜单
 
 const clickCurDoc = (tree: DocTree) => {
@@ -299,10 +314,9 @@ const clickCurDoc = (tree: DocTree) => {
 }
 
 const emits = defineEmits(['clickDoc'])
-
 </script>
 
 <style scoped lang="scss">
 @import '../doc/tree-docs.scss';
 @import '../doc/tree-docs-right-menu.scss';
-</style>
+</style>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="doc-workbench-root">
     <bl-row just="flex-end" align="flex-end">
-      <div v-show="curFolder !== undefined" style="font-size:12px;text-align: right;color: var(--bl-text-color-light);">
+      <div v-show="curFolder !== undefined" style="font-size: 12px; text-align: right; color: var(--bl-text-color-light)">
         <span>《{{ curFolder?.name }}》</span>
         <br />
-        <span style="font-size: 9px;padding-right: 5px;">{{ curFolder?.id }}</span>
+        <span style="font-size: 9px; padding-right: 5px">{{ curFolder?.id }}</span>
       </div>
     </bl-row>
 
@@ -12,7 +12,8 @@
     <bl-row just="flex-end" align="flex-end">
       <el-tooltip content="显示排序" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
         <div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div>
-        <template #content> 显示排序<br />
+        <template #content>
+          显示排序<br />
           <bl-row>
             <bl-tag :bgColor="TitleColor.ONE">一级</bl-tag>
             <bl-tag :bgColor="TitleColor.TWO">二级</bl-tag>
@@ -26,31 +27,36 @@
       <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="blossomt" placement="top" :show-after="1000" :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>
     </bl-row>
   </div>
-  <el-dialog v-model="isShowDocInfoDialog" width="535" top="100px" style="margin-left: 320px;" :append-to-body="true"
-    :destroy-on-close="true" :close-on-click-modal="false" draggable>
+  <el-dialog
+    v-model="isShowDocInfoDialog"
+    width="535"
+    top="100px"
+    style="margin-left: 320px"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    :close-on-click-modal="false"
+    draggable>
     <PictureInfo ref="PictureInfoRef" @saved="savedCallback"></PictureInfo>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, inject } from "vue"
+import { ref, nextTick, inject } from 'vue'
 import { provideKeyDocInfo, TitleColor } from '@renderer/views/doc/doc'
 import PictureInfo from '@renderer/views/picture/PictureInfo.vue'
 
 // 当前菜单中选择的文档
 const curFolder = inject(provideKeyDocInfo)
 
-
 // ---------- 新增修改按钮 ----------
 const PictureInfoRef = ref()
 // 显示编辑 dialog
-const isShowDocInfoDialog = ref<boolean>(false);
+const isShowDocInfoDialog = ref<boolean>(false)
 const handleShowAddDocInfoDialog = () => {
   isShowDocInfoDialog.value = true
   nextTick(() => {
@@ -68,14 +74,14 @@ const refreshDocTree = () => {
  * 2. 关闭 dialog 页面
  */
 const savedCallback = () => {
-  isShowDocInfoDialog.value = false;
+  isShowDocInfoDialog.value = false
+  refreshDocTree()
 }
 //#endregion
 
 const emits = defineEmits(['refreshDocTree', 'show-sort'])
-
 </script>
 
 <style scoped lang="scss">
 @import '../doc/tree-workbench.scss';
-</style>
+</style>