zero/blossom
1
0
Fork 0
mirror of https://github.com/blossom-editor/blossom synced 2024-11-17 14:39:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xiaozzzi 2024-04-05 11:49:23 +08:00
parent dee2794f86
commit df901c1294
8 changed files with 74 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
blossom-editor/src/renderer/src/assets/styles/bl-resize-divider.scss Normal file
View File

@ -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);
}
}
}

24
blossom-editor/src/renderer/src/views/article/scripts/editor-preview-resize.ts → blossom-editor/src/renderer/src/scripts/resize-devider-vertical.ts
View File

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

11
blossom-editor/src/renderer/src/views/article/ArticleIndex.vue
View File

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

3
blossom-editor/src/renderer/src/views/article/ArticleIndexNew.vue
View File

@ -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 ----------------------------------------< 图片管理 >--------------------------------------

3
blossom-editor/src/renderer/src/views/article/ArticleIndexOld.vue
View File

@ -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 ----------------------------------------< 图片管理 >--------------------------------------

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

@ -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;
}
// 文档

26
blossom-editor/src/renderer/src/views/picture/PictureIndex.vue
View File

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

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

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