feat: 图片文件夹左侧菜单栏宽度拖拽

blossom-editor/src/renderer/src/assets/styles/bl-resize-divider.scss

@@ -0,0 +1,27 @@
+.resize-divider-vertical {
+  width: 1px;
+  height: 100%;
+  background-color: var(--el-border-color);
+  position: relative;
+  z-index: 1001;
+  cursor: ew-resize;
+
+  &::before {
+    content: '';
+    width: 3px;
+    height: 100%;
+    background-color: transparent;
+    display: block;
+    transition: 0.3s;
+    position: absolute;
+    left: -1px;
+    z-index: 1002;
+    cursor: ew-resize;
+  }
+
+  &:hover {
+    &::before {
+      background-color: var(--el-color-primary);
+    }
+  }
+}

blossom-editor/src/renderer/src/scripts/resize-devider-vertical.ts

@@ -2,6 +2,15 @@ import { onBeforeUnmount, onMounted, watchEffect } from 'vue'
 import type { Ref } from 'vue'
 import { Local } from '@renderer/assets/utils/storage'
 
+/**
+ * persistent: 是否持久化
+ * keyOne: 组件1持久化 key,
+ * keyTwo: 组件2持久化 key,
+ * defaultOne: 组件1默认宽度,
+ * defaultTwo: 组件2默认宽度,
+ * maxOne: 组件1最大宽度,
+ * minOne: 组件1最小宽度
+ */
 type Option = {
   persistent: boolean
   keyOne: string
@@ -13,18 +22,15 @@ type Option = {
 }
 
 /**
- * 拖转改变布局的功能
+ * 左右拖动改变布局的功能
  *
- * @param oneRef 拖转影响到的一个组件
+ * @param oneRef 拖动影响到组件1
- * @param twoRef 拓展影响到的另一个组件
+ * @param twoRef 拖动影响到组件2
- * @param resizeDividerRef 拖动条
+ * @param resizeDividerRef 拖动条对象
  * @param twoPendantRef 另一个组件可能存在的挂件
- * @param options 拖转是否持久化 {
+ * @param options 拖动配置
- *  persistent: 是否持久化
- *
- * }
  */
-export const useResize = (
+export const useResizeVertical = (
   oneRef: Ref<HTMLElement | undefined>,
   twoRef: Ref<HTMLElement | undefined>,
   resizeDividerRef: Ref<HTMLElement | undefined>,

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

@@ -16,7 +16,7 @@
         </bl-row>
       </div>
     </div>
-    <div class="resize-docs-divider" ref="ResizeDocsDividerRef"></div>
+    <div class="resize-divider-vertical" ref="ResizeDocsDividerRef"></div>
     <!-- editor -->
     <div class="editor-container" ref="EditorContainerRef" v-loading="editorLoading" element-loading-text="正在读取文章内容...">
       <div class="editor-tools">
@@ -93,7 +93,7 @@
         </div>
         <div class="gutter-holder" ref="GutterHolderRef"></div>
         <div class="editor-codemirror" ref="EditorRef" @click.right="handleEditorClickRight"></div>
-        <div class="resize-divider" ref="ResizeEditorDividerRef"></div>
+        <div class="resize-divider-vertical editor-resize-divider" ref="ResizeEditorDividerRef"></div>
         <div class="preview-marked bl-preview" ref="PreviewRef" v-html="articleHtml"></div>
       </div>
 
@@ -207,7 +207,7 @@ import { treeToInfo, provideKeyDocInfo, provideKeyCurArticleInfo, isArticle } fr
 import { TempTextareaKey, ArticleReference, parseTocAsync } from './scripts/article'
 import type { Toc } from './scripts/article'
 import { beforeUpload, onError, picCacheWrapper, picCacheRefresh, uploadForm, uploadDate } from '@renderer/views/picture/scripts/picture'
-import { useResize } from './scripts/editor-preview-resize'
+import { useResizeVertical } from '@renderer/scripts/resize-devider-vertical'
 // codemirror
 import { CmWrapper } from './scripts/codemirror'
 // marked
@@ -354,7 +354,7 @@ const exitView = () => {
   autoSave()
 }
 
-const { hideOne, resotreOne } = useResize(DocsRef, EditorContainerRef, ResizeDocsDividerRef, undefined, {
+const { hideOne, resotreOne } = useResizeVertical(DocsRef, EditorContainerRef, ResizeDocsDividerRef, undefined, {
   persistent: true,
   keyOne: 'article_docs_width',
   keyTwo: 'article_editor_preview_width',
@@ -363,7 +363,7 @@ const { hideOne, resotreOne } = useResize(DocsRef, EditorContainerRef, ResizeDoc
   maxOne: 700,
   minOne: 250
 })
-useResize(EditorRef, PreviewRef, ResizeEditorDividerRef, EditorOperatorRef)
+useResizeVertical(EditorRef, PreviewRef, ResizeEditorDividerRef, EditorOperatorRef)
 //#endregion
 
 //#region ----------------------------------------< 图片管理 >--------------------------------------
@@ -939,6 +939,7 @@ const unbindKeys = () => {
 </script>
 
 <style scoped lang="scss">
+@import '@renderer/assets/styles/bl-resize-divider.scss';
 @import '@renderer/assets/styles/bl-loading-spinner.scss';
 @import './styles/article-index.scss';
 @import './styles/article-view-absolute.scss';

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

@@ -249,7 +249,6 @@ import { treeToInfo, provideKeyDocInfo, provideKeyCurArticleInfo, isArticle } fr
 import { TempTextareaKey, ArticleReference, DocsEditorStyle, parseTocAsync } from './scripts/article'
 import type { Toc } from './scripts/article'
 import { beforeUpload, onError, picCacheWrapper, picCacheRefresh, uploadForm, uploadDate } from '@renderer/views/picture/scripts/picture'
-import { useResize } from './scripts/editor-preview-resize'
 // codemirror
 import { CmWrapper } from './scripts/codemirror'
 // marked
@@ -401,8 +400,6 @@ const enterView = () => {
 const exitView = () => {
   autoSave()
 }
-
-useResize(EditorRef, PreviewRef, ResizeDividerRef, EditorOperatorRef)
 //#endregion
 
 //#region ----------------------------------------< 图片管理 >--------------------------------------

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

@@ -218,7 +218,6 @@ import { treeToInfo, provideKeyDocInfo, provideKeyCurArticleInfo, isArticle } fr
 import { TempTextareaKey, ArticleReference, DocsEditorStyle, parseTocAsync } from './scripts/article'
 import type { Toc } from './scripts/article'
 import { beforeUpload, onError, picCacheWrapper, picCacheRefresh, uploadForm, uploadDate } from '@renderer/views/picture/scripts/picture'
-import { useResize } from './scripts/editor-preview-resize'
 // codemirror
 import { CmWrapper } from './scripts/codemirror'
 // marked
@@ -367,8 +366,6 @@ const enterView = () => {
 const exitView = () => {
   autoSave()
 }
-
-useResize(EditorRef, PreviewRef, ResizeDividerRef, EditorOperatorRef)
 //#endregion
 
 //#region ----------------------------------------< 图片管理 >--------------------------------------

blossom-editor/src/renderer/src/views/article/styles/article-index.scss

@@ -2,38 +2,8 @@
   @include box(100%, 100%);
   @include flex(row, flex-start, center);
 
-  .resize-divider,
+  .editor-resize-divider {
-  .resize-docs-divider {
     width: 2px;
-    height: 100%;
-    z-index: 4;
-    background-color: var(--el-border-color);
-    z-index: 1001;
-    position: relative;
-    cursor: ew-resize;
-
-    &::before {
-      content: '';
-      width: 3px;
-      display: block;
-      height: 100%;
-      transition: 0.3s;
-      position: absolute;
-      background-color: transparent;
-      left: -1px;
-      z-index: 1002;
-      cursor: ew-resize;
-    }
-
-    &:hover {
-      &::before {
-        background-color: var(--el-color-primary);
-      }
-    }
-  }
-
-  .resize-docs-divider {
-    width: 1px;
   }
 
   // 文档

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

@@ -1,7 +1,7 @@
 <template>
   <div class="index-picture-root">
     <!-- folder menu -->
-    <div class="doc-container">
+    <div class="doc-container" ref="DocsRef">
       <div class="doc-tree-menu-container">
         <PictureTreeDocs @click-doc="clickCurFolder"></PictureTreeDocs>
       </div>
@@ -11,8 +11,9 @@
       </div>
     </div>
 
-    <!-- editor -->
+    <div class="resize-divider-vertical" ref="ResizeDividerRef"></div>
-    <div class="picture-container">
+
+    <div class="picture-container" ref="PictureContainerRef">
       <!-- 工作台 -->
       <div class="picutre-workbench" :style="workbencStyle.workbench1">
         <div class="workbenchs">
@@ -187,6 +188,7 @@ import { isNotNull, isNull } from '@renderer/assets/utils/obj'
 import { formatFileSize, getFilePrefix, getFileSuffix, isImage } from '@renderer/assets/utils/util'
 import { writeText, download } from '@renderer/assets/utils/electron'
 import { useLifecycle } from '@renderer/scripts/lifecycle'
+import { useResizeVertical } from '@renderer/scripts/resize-devider-vertical'
 
 // component
 import { articleNamesToArray, picCacheWrapper, Picture, picCacheRefresh } from './scripts/picture'
@@ -539,7 +541,7 @@ const deleted = (ids: Array<string>) => {
 
 //#endregion
 
-//#region ----------------------------------------< 移动 >----------------------------------
+//#region ----------------------------------------< 移动至其他文件夹 >----------------------------------
 
 const isShowTransferDialog = ref(false)
 
@@ -563,11 +565,27 @@ const transferred = () => {
   isShowTransferDialog.value = false
 }
 
+//#endregion
+
+//#region ----------------------------------------< 左右拖拽 >----------------------------------
+const DocsRef = ref()
+const ResizeDividerRef = ref()
+const PictureContainerRef = ref()
+useResizeVertical(DocsRef, PictureContainerRef, ResizeDividerRef, undefined, {
+  persistent: true,
+  keyOne: 'picture_docs_width',
+  keyTwo: 'picture_continer_width',
+  defaultOne: '250px',
+  defaultTwo: 'calc(100% - 250px)',
+  maxOne: 700,
+  minOne: 250
+})
 //#endregion
 </script>
 
 <style scoped lang="scss">
 @import './styles/picture-index.scss';
+@import '@renderer/assets/styles/bl-resize-divider.scss';
 @import '@renderer/assets/styles/bl-loading-spinner.scss';
 
 .replace-upload-switch {

blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss

@@ -4,10 +4,10 @@
 
   // 文档
   .doc-container {
-    @include box(250px, 100%);
     @include flex(column, flex-start, center);
+    height: 100%;
     font-weight: 200;
-    transition: 0.1s;
+    transition: height 0.1s;
     left: 0;
     top: 0;
 
@@ -22,7 +22,7 @@
   }
 
   .picture-container {
-    @include box(calc(100% - 250px), 100%);
+    height: 100%;
     border-left: 1px solid var(--el-border-color);
     background-color: #ffffff00;
     position: relative;