照片墙优化

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%;"
+                        <div class="menu-item-wrapper" @click="clickCurDoc(L4)" style="width: 100%" @click.right="handleClickRight(L4, $event)">
-                          @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"
+  <el-dialog
-    :destroy-on-close="true" :close-on-click-modal="false" draggable>
+    v-model="isShowDocInfoDialog"
-    <PictureInfo ref="PictureInfoRef"></PictureInfo>
+    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 Notify from '@renderer/scripts/notify'
-import { ElMessageBox } from "element-plus"
+import { ElMessageBox } from 'element-plus'
 
 const configStore = useConfigStore()
 
@@ -152,8 +158,9 @@ provide(provideKeyDocTree, docTreeData)
  * 2. 在 workbench 中点击按钮调用, 每个按钮是单选的
  */
 const getDocTree = () => {
-  docTreeLoading.value = true;
+  docTreeLoading.value = true
-  docTreeApi({ onlyPicture: true }).then(resp => {
+  docTreeApi({ onlyPicture: true })
+    .then((resp) => {
       const docTree: DocTree[] = resp.data
       // 两种类型的交界位置
       let lastPicIndex: number = docTree.length - 1
@@ -181,7 +188,8 @@ const getDocTree = () => {
 
       docTreeData.value = docTree
       concatSort(docTreeData.value)
-  }).finally(() => {
+    })
+    .finally(() => {
       docTreeLoading.value = false
     })
 }
@@ -244,17 +252,18 @@ const removeListenerTreeDocsRightMenu = () => {
 //#endregion
 
 //#region 右键菜单功能
-
 /**
  * 删除文档
  */
 const delDoc = () => {
-  ElMessageBox.confirm(
+  ElMessageBox.confirm(`是否确定删除文件夹: <span style="color:#C02B2B;text-decoration: underline;">${curDoc.value.n}</span>？删除后将不可恢复！`, {
-    `是否确定删除文件夹: <span style="color:#C02B2B;text-decoration: underline;">${curDoc.value.n}</span>？删除后将不可恢复！`, {
+    confirmButtonText: '确定删除',
-    confirmButtonText: '确定删除', cancelButtonText: '我再想想', type: 'info', draggable: true, dangerouslyUseHTMLString: true,
+    cancelButtonText: '我再想想',
-  }
+    type: 'info',
-  ).then(() => {
+    draggable: true,
-    folderDelApi({ id: curDoc.value.i }).then(_resp => {
+    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,7 +314,6 @@ const clickCurDoc = (tree: DocTree) => {
 }
 
 const emits = defineEmits(['clickDoc'])
-
 </script>
 
 <style scoped lang="scss">

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"
+      <el-tooltip content="新增图片文件夹" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
-        :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"
+  <el-dialog
-    :destroy-on-close="true" :close-on-click-modal="false" draggable>
+    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,12 +74,12 @@ 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">