From df901c129473b776f75f8dffd12570d271ed1fcf Mon Sep 17 00:00:00 2001
From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com>
Date: Fri, 5 Apr 2024 11:49:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=B9=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6=E6=8B=96=E6=8B=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/styles/bl-resize-divider.scss  | 27 ++++++++++++++++
 .../resize-devider-vertical.ts}               | 24 ++++++++------
 .../src/views/article/ArticleIndex.vue        | 11 ++++---
 .../src/views/article/ArticleIndexNew.vue     |  3 --
 .../src/views/article/ArticleIndexOld.vue     |  3 --
 .../views/article/styles/article-index.scss   | 32 +------------------
 .../src/views/picture/PictureIndex.vue        | 26 ++++++++++++---
 .../views/picture/styles/picture-index.scss   |  6 ++--
 8 files changed, 74 insertions(+), 58 deletions(-)
 create mode 100644 blossom-editor/src/renderer/src/assets/styles/bl-resize-divider.scss
 rename blossom-editor/src/renderer/src/{views/article/scripts/editor-preview-resize.ts => scripts/resize-devider-vertical.ts} (88%)

diff --git a/blossom-editor/src/renderer/src/assets/styles/bl-resize-divider.scss b/blossom-editor/src/renderer/src/assets/styles/bl-resize-divider.scss
new file mode 100644
index 0000000..a542725
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-resize.ts b/blossom-editor/src/renderer/src/scripts/resize-devider-vertical.ts
similarity index 88%
rename from blossom-editor/src/renderer/src/views/article/scripts/editor-preview-resize.ts
rename to blossom-editor/src/renderer/src/scripts/resize-devider-vertical.ts
index 5c1456f..db309cf 100644
--- a/blossom-editor/src/renderer/src/views/article/scripts/editor-preview-resize.ts
+++ b/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 twoRef 拓展影响到的另一个组件
- * @param resizeDividerRef 拖动条
+ * @param oneRef 拖动影响到组件1
+ * @param twoRef 拖动影响到组件2
+ * @param resizeDividerRef 拖动条对象
  * @param twoPendantRef 另一个组件可能存在的挂件
- * @param options 拖转是否持久化 {
- *  persistent: 是否持久化
- *
- * }
+ * @param options 拖动配置
  */
-export const useResize = (
+export const useResizeVertical = (
   oneRef: Ref<HTMLElement | undefined>,
   twoRef: Ref<HTMLElement | undefined>,
   resizeDividerRef: Ref<HTMLElement | undefined>,
diff --git a/blossom-editor/src/renderer/src/views/article/ArticleIndex.vue b/blossom-editor/src/renderer/src/views/article/ArticleIndex.vue
index d8b83c1..42e879b 100644
--- a/blossom-editor/src/renderer/src/views/article/ArticleIndex.vue
+++ b/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';
diff --git a/blossom-editor/src/renderer/src/views/article/ArticleIndexNew.vue b/blossom-editor/src/renderer/src/views/article/ArticleIndexNew.vue
index 69494ae..f2fa48e 100644
--- a/blossom-editor/src/renderer/src/views/article/ArticleIndexNew.vue
+++ b/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 ----------------------------------------< 图片管理 >--------------------------------------
diff --git a/blossom-editor/src/renderer/src/views/article/ArticleIndexOld.vue b/blossom-editor/src/renderer/src/views/article/ArticleIndexOld.vue
index eccc2bd..3f33709 100644
--- a/blossom-editor/src/renderer/src/views/article/ArticleIndexOld.vue
+++ b/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 ----------------------------------------< 图片管理 >--------------------------------------
diff --git a/blossom-editor/src/renderer/src/views/article/styles/article-index.scss b/blossom-editor/src/renderer/src/views/article/styles/article-index.scss
index 81e7e79..3f016ea 100644
--- a/blossom-editor/src/renderer/src/views/article/styles/article-index.scss
+++ b/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,
-  .resize-docs-divider {
+  .editor-resize-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;
   }
 
   // 文档
diff --git a/blossom-editor/src/renderer/src/views/picture/PictureIndex.vue b/blossom-editor/src/renderer/src/views/picture/PictureIndex.vue
index 6adb0a4..d67cf9e 100644
--- a/blossom-editor/src/renderer/src/views/picture/PictureIndex.vue
+++ b/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="picture-container">
+    <div class="resize-divider-vertical" ref="ResizeDividerRef"></div>
+
+    <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 {
diff --git a/blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss b/blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss
index 10478f9..2848dc3 100644
--- a/blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss
+++ b/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;