diff --git a/CHANGELOG.md b/CHANGELOG.md index 9690bf48d35e8493717706679b4d1dfd47e157cd..453cb23ac4c9882da690061c769ed556b9e520a2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ ### Changed +- 更新markdown全屏时始终打开目录,缩小时回复原样,优化markdown内部主题变更时顶部工具栏的样式,以及暗黑主题下编辑器边框的样式 - 更新markdown行内AI聊天上下文菜单样式 - 优化markdown全屏时ESC关闭全屏逻辑,优化markdown插入文本逻辑 - 优化代码编辑器插入文本方法,将文本以段落的格式插入到光标位置 diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss index 9fbfb795c5fcb61e2fc4852ed05cfdbe4b23488e..6e79553201297b9078d0c1f7ab3c0eb867e72aca 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.scss @@ -4,6 +4,12 @@ $markdown: ( color-manual-toolbar-text-save: getCssVar(color, primary-active-text), color-manual-toolbar-text-cancel: getCssVar(color,text,1), color-manual-toolbar-text-cancel-hover: getCssVar(color,primary), + color-dark-scrollbar-thumb-dark: rgb(var(#{getCssVarName(grey,4)})), + color-light-scrollbar-thumb-dark:rgb(var(#{getCssVarName(grey,4)})), + color-scrollbar-thumb-dark-hover: rgba(var(#{getCssVarName(grey,4)}),.5), + color-dark-toc-text: getCssVar(color, fill, 0), + color-toc-header-text: getCssVar(color, text, 0), + color-dark-mardown-border: rgb(var(#{getCssVarName(grey,2)})), spacing-manual-toolbar-height: 32px, spacing-manual-toolbar-gap: getCssVar('spacing',base), spacing-manual-toolbar-item-padding: 0 getCssVar('spacing',base), @@ -140,7 +146,6 @@ $markdown: ( box-shadow: none; .cherry-toolbar { - background-color: #{getCssVar(color, bg, 0)}; box-shadow: none; } @@ -223,4 +228,59 @@ $markdown: ( .cherry.fullscreen{ z-index: 999; } + + @include m('light'){ + .theme__light, + .theme__green, + .theme__violet{ + .cherry-toolbar{ + background-color: getCssVar(color, bg, 0); + } + } + + .theme__dark.cherry{ + .cherry-flex-toc{ + color: getCssVar(markdown,color-toc-header-text); + } + + & *::-webkit-scrollbar-thumb{ + background: getCssVar(markdown,color-light-scrollbar-thumb-dark); + + &:hover{ + background: getCssVar(markdown,color-scrollbar-thumb-dark-hover); + } + } + } + } + + @include m('dark'){ + &.#{bem(markdown-cherry)} { + .cherry { + border: 1px solid getCssVar(markdown, color-dark-mardown-border); + } + } + + + .theme__green, + .theme__violet, + .theme__light{ + .cherry-toolbar{ + background-color: getCssVar(color, shadow); + } + } + + .theme__dark.cherry{ + .cherry-toc-head{ + color: getCssVar(markdown,color-dark-toc-text); + } + + & *::-webkit-scrollbar-thumb{ + background: getCssVar(markdown,color-dark-scrollbar-thumb-dark); + + &:hover{ + background: getCssVar(markdown,color-scrollbar-thumb-dark-hover); + } + } + } + } } \ No newline at end of file diff --git a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx index 582426833f439a008d9041b951ea4f57c86f77cf..80cb55ae8751a198e2717868f06a1d6455617237 100644 --- a/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx +++ b/src/editor/markdown/ibiz-markdown-editor/ibiz-markdown-editor.tsx @@ -96,6 +96,9 @@ const IBizMarkDown: any = defineComponent({ // 样式变量 const cssVars = ref({}); + // 正常大小时目录状态 + const lastDirectoryState: Ref<'full' | 'pure'> = ref('full'); + // 是否忽略改变 let isIgnoreChange: boolean = false; @@ -308,9 +311,12 @@ const IBizMarkDown: any = defineComponent({ if (editor && markDownBox.value) { if (isFullscreen()) { closeFullscreen(); + editor.toggleToc(lastDirectoryState.value); isFullScreen.value = false; } else { openFullscreen(); + lastDirectoryState.value = editor.toc.model; + editor.toggleToc('full'); isFullScreen.value = true; } } @@ -324,6 +330,7 @@ const IBizMarkDown: any = defineComponent({ // 关闭全屏 if (isFullscreen()) { closeFullscreen(); + editor.toggleToc(lastDirectoryState.value); isFullScreen.value = false; } } @@ -700,7 +707,10 @@ const IBizMarkDown: any = defineComponent({ tabindex='-1' // 0 允许聚焦,-1 允许但不参数浏览器tab切换 id={this.id} style={this.cssVars} - class={this.ns.b('cherry')} + class={[ + this.ns.b('cherry'), + this.ns.m(this.theme === 'dark' ? 'dark' : 'light'), + ]} > );