admin/blossom
1
0
Fork 0
mirror of https://gitee.com/blossom-editor/blossom.git synced 2025-12-08 01:38:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

样式优化

Browse Source
This commit is contained in:
xiaozzzi 2023-10-07 23:59:54 +08:00
parent 6ad59d2a9a
commit 0405fc3f3b
7 changed files with 158 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
blossom-editor/src/renderer/src/assets/css/theme.css
View File

@ -1,5 +1,4 @@
:root { :root {
/* 数字越大, 颜色越淡 */ /* 数字越大, 颜色越淡 */
--el-color-primary: #ad8cf2; --el-color-primary: #ad8cf2;
--el-color-primary-dark-2: rgba(173, 140, 242, 0.8); --el-color-primary-dark-2: rgba(173, 140, 242, 0.8);
@ -96,7 +95,7 @@ html.dark {
/* ================================= 文本颜色 =================================*/ /* ================================= 文本颜色 =================================*/
--el-text-color-primary: #909399; --el-text-color-primary: #909399;
--el-text-color-regular: #a8a8a8; --el-text-color-regular: #a8a8a8;
--el-text-color-secondary: #A3A6AD; --el-text-color-secondary: #a3a6ad;
--el-text-color-placeholder: #535353; --el-text-color-placeholder: #535353;
/* ================================= 背景颜色 =================================*/ /* ================================= 背景颜色 =================================*/
@ -125,6 +124,7 @@ html.dark {
/* background color */ /* background color */
--bl-bg-color: #f1f1f1; --bl-bg-color: #f1f1f1;
/* ================================= text styles =================================*/ /* ================================= text styles =================================*/
--bl-text-doctree-color: #909399;
/* primary color */ /* primary color */
--bl-text-color: #606266; --bl-text-color: #606266;
/* lighter than primary color */ /* lighter than primary color */
@ -143,10 +143,10 @@ html.dark {
/* ================================= iconbl ================================== */ /* ================================= iconbl ================================== */
--bl-iconbl-text-shadow: 2px 3px 5px rgba(107, 104, 104, 0.4); --bl-iconbl-text-shadow: 2px 3px 5px rgba(107, 104, 104, 0.4);
--bl-subject-color1: #040EFF; --bl-subject-color1: #040eff;
/* ================================= 弹框样式 =================================*/ /* ================================= 弹框样式 =================================*/
--bl-dialog-bg-color: #FAFAFA; --bl-dialog-bg-color: #fafafa;
--bl-dialog-box-shadow: 3px 3px 10px 2px rgba(58, 47, 47, 0.5); --bl-dialog-box-shadow: 3px 3px 10px 2px rgba(58, 47, 47, 0.5);
} }
@ -156,6 +156,7 @@ html.dark {
/* background color */ /* background color */
--bl-bg-color: #333434; --bl-bg-color: #333434;
/* ================================= text styles =================================*/ /* ================================= text styles =================================*/
--bl-text-doctree-color: #a8a8a8;
/* primary color */ /* primary color */
--bl-text-color: #a8a8a8; --bl-text-color: #a8a8a8;
/* lighter than primary color */ /* lighter than primary color */
@ -178,15 +179,14 @@ html.dark {
--bl-dialog-box-shadow: 3px 3px 10px 2px rgba(0, 0, 0); --bl-dialog-box-shadow: 3px 3px 10px 2px rgba(0, 0, 0);
} }
:root { :root {
/* */ /* */
--bl-editor-color: #707070; --bl-editor-color: #707070;
--bl-editor-bg-color: #FFFFFF; --bl-editor-bg-color: #ffffff;
/* gutter */ /* gutter */
--bl-editor-gutters-bg-color: #f5f5f5; --bl-editor-gutters-bg-color: #f5f5f5;
--bl-editor-gutters-border-color: #DDDDDD00; --bl-editor-gutters-border-color: #dddddd00;
--bl-editor-active-line-gutter-bg-color: #d6d6d67f; --bl-editor-active-line-gutter-bg-color: #d6d6d67f;
--bl-editor-active-line-gutter-color: #000000; --bl-editor-active-line-gutter-color: #000000;
@ -206,16 +206,15 @@ html.dark {
--bl-editor-ci-color: #ba7300; --bl-editor-ci-color: #ba7300;
--bl-editor-cg-color: #9876aa; --bl-editor-cg-color: #9876aa;
--bl-editor-c5-color: #7843E9; --bl-editor-c5-color: #7843e9;
--bl-editor-c7-color: #7843E9; --bl-editor-c7-color: #7843e9;
--bl-editor-c7-bg-color: #00000000; --bl-editor-c7-bg-color: #00000000;
/* ======================================= */ /* ======================================= */
/* 预览的字体颜色 */ /* 预览的字体颜色 */
--bl-preview-color: #2b2b2b; --bl-preview-color: #2b2b2b;
--bl-preview-bg-color: #FFFFFF; --bl-preview-bg-color: #ffffff;
--bl-preview-border-radius: 4px; --bl-preview-border-radius: 4px;
/* 目录 */ /* 目录 */

31
blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="['doc-title', props.trees.t?.includes('subject') ? 'subject-title' : '']"> <div :class="['doc-title', props.trees.t?.includes('subject') ? 'subject-title' : '']">
<bl-tag class="sort" v-show="props.trees.showSort" :bgColor="levelColor" style="padding:0 2px"> <bl-tag class="sort" v-show="props.trees.showSort" :bgColor="levelColor" style="padding: 0 2px">
{{ props.trees.s }} {{ props.trees.s }}
</bl-tag> </bl-tag>
<div class="doc-name"> <div class="doc-name">
@ -16,8 +16,7 @@
<bl-tag v-else :bg-color="tag.bgColor" :icon="tag.icon" /> <bl-tag v-else :bg-color="tag.bgColor" :icon="tag.icon" />
</div> </div>
<div v-for="line, index in tagLins" :key="line" :class="[line]" :style="{ left: (-1 * (index + 1) * 5) + 'px' }"> <div v-for="(line, index) in tagLins" :key="line" :class="[line]" :style="{ left: -1 * (index + 1) * 5 + 'px' }"></div>
</div>
</div> </div>
</template> </template>
@ -30,7 +29,7 @@ import { computedDocTitleColor } from '@renderer/views/doc/doc'
const props = defineProps({ const props = defineProps({
trees: { type: Object as PropType<DocTree>, default: {} }, trees: { type: Object as PropType<DocTree>, default: {} },
size: { type: Number, default: 14 }, size: { type: Number, default: 14 },
level: { type: Number, required: true }, level: { type: Number, required: true }
}) })
const levelColor = computed(() => { const levelColor = computed(() => {
@ -42,7 +41,7 @@ const levelColor = computed(() => {
*/ */
const tags = computed(() => { const tags = computed(() => {
let icons: any = [] let icons: any = []
props.trees.t?.forEach(tag => { props.trees.t?.forEach((tag) => {
if (tag === 'subject') { if (tag === 'subject') {
icons.unshift({ content: '专题', bgColor: 'salmon', icon: 'bl-a-lowerrightpage-line' }) icons.unshift({ content: '专题', bgColor: 'salmon', icon: 'bl-a-lowerrightpage-line' })
} else if (tag === 'toc') { } else if (tag === 'toc') {
@ -50,8 +49,8 @@ const tags = computed(() => {
} else { } else {
icons.push({ content: tag }) icons.push({ content: tag })
} }
}); })
return icons; return icons
}) })
const tagLins = computed(() => { const tagLins = computed(() => {
@ -67,7 +66,6 @@ const tagLins = computed(() => {
} }
return lines return lines
}) })
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -89,11 +87,10 @@ $icon-size: 17px;
position: relative; position: relative;
.doc-name { .doc-name {
font-size: inherit;
font-weight: 300;
// @include flex(row, flex-start, center);
@include themeBrightness(100%, 80%); @include themeBrightness(100%, 80%);
@include ellipsis(); @include ellipsis();
font-size: inherit;
font-weight: 300;
} }
.sort { .sort {
@ -104,17 +101,15 @@ $icon-size: 17px;
// 专题样式, 包括边框和文字样式 // 专题样式, 包括边框和文字样式
.subject-title { .subject-title {
@include themeShadow(2px 2px 10px 1px #fad7d7, 1px 2px 10px 1px #0A0A0A); @include themeShadow(2px 2px 10px 1px #fad7d7, 1px 2px 10px 1px #0a0a0a);
@include themeBg(linear-gradient(135deg, #fad7d7, #fae7e7, #ffffff), @include themeBg(linear-gradient(135deg, #fad7d7, #fae7e7, #ffffff), linear-gradient(135deg, #594a23, #453d28, #33302b));
linear-gradient(135deg, #594A23, #453D28, #33302B));
padding: 2px 5px; padding: 2px 5px;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
border-radius: 7px; border-radius: 7px;
position: relative; position: relative;
.doc-name { .doc-name {
@include themeText(2px 2px 2px #D8D8D8, 2px 2px 2px #0A0A0A); @include themeText(2px 2px 2px #d8d8d8, 2px 2px 2px #0a0a0a);
@include ellipsis(); @include ellipsis();
color: var(--el-color-primary); color: var(--el-color-primary);
min-width: 180px; min-width: 180px;
@ -138,10 +133,10 @@ $icon-size: 17px;
} }
.open-line { .open-line {
background: #79C20C71; background: #79c20c71;
} }
.sync-line { .sync-line {
background: #E8122479; background: #e8122479;
} }
</style> </style>

73
blossom-editor/src/renderer/src/views/article/ArticleTreeWorkbench.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="doc-workbench-root"> <div class="doc-workbench-root">
<bl-row just="flex-end" align="flex-end"> <bl-row just="flex-end" align="flex-end">
<div v-show="curDoc !== undefined" style="font-size:12px;text-align: right;color: var(--bl-text-color-light);"> <div v-show="curDoc !== undefined" style="font-size: 12px; text-align: right; color: var(--bl-text-color-light)">
<span>《{{ curDoc?.name }}》</span> <span>《{{ curDoc?.name }}》</span>
<br /> <br />
<span style="font-size: 9px;padding-right: 5px;">{{ curDoc?.id }}</span> <span style="font-size: 9px; padding-right: 5px">{{ curDoc?.id }}</span>
</div> </div>
</bl-row> </bl-row>
<bl-row class="wb-page-container"> <bl-row class="wb-page-container">
@ -12,7 +12,8 @@
<bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 1"> <bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 1">
<el-tooltip effect="blossomb" :show-after="1000" :hide-after="0" :auto-close="2000"> <el-tooltip effect="blossomb" :show-after="1000" :hide-after="0" :auto-close="2000">
<div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div> <div class="iconbl bl-a-leftdirection-line" @click="emits('show-sort')"></div>
<template #content> 显示排序<br /> <template #content>
显示排序<br />
<bl-row> <bl-row>
<bl-tag :bgColor="TitleColor.ONE">一级</bl-tag> <bl-tag :bgColor="TitleColor.ONE">一级</bl-tag>
<bl-tag :bgColor="TitleColor.TWO">二级</bl-tag> <bl-tag :bgColor="TitleColor.TWO">二级</bl-tag>
@ -23,37 +24,31 @@
</bl-row> </bl-row>
</template> </template>
</el-tooltip> </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 v-if="props.showOpen"> <div v-if="props.showOpen">
<div v-if="onlyOpen" class="iconbl bl-cloud-fill" @click="changeOnlyOpen()"></div> <div v-if="onlyOpen" class="iconbl bl-cloud-fill" @click="changeOnlyOpen()"></div>
<div v-else class="iconbl bl-cloud-line" @click="changeOnlyOpen()"></div> <div v-else class="iconbl bl-cloud-line" @click="changeOnlyOpen()"></div>
</div> </div>
</el-tooltip> </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 v-if="props.showSubject"> <div v-if="props.showSubject">
<div v-if="onlySubject" class="iconbl bl-a-lowerrightpage-fill" @click="changeOnlySubject()"></div> <div v-if="onlySubject" class="iconbl bl-a-lowerrightpage-fill" @click="changeOnlySubject()"></div>
<div v-else class="iconbl bl-a-lowerrightpage-line" @click="changeOnlySubject()"></div> <div v-else class="iconbl bl-a-lowerrightpage-line" @click="changeOnlySubject()"></div>
</div> </div>
</el-tooltip> </el-tooltip>
<el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" <el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
:auto-close="2000">
<div v-if="props.showStar"> <div v-if="props.showStar">
<div v-if="onlyStars" class="iconbl bl-star-fill" @click="changeOnlyStar()"></div> <div v-if="onlyStars" class="iconbl bl-star-fill" @click="changeOnlyStar()"></div>
<div v-else class="iconbl bl-star-line" @click="changeOnlyStar()"></div> <div v-else class="iconbl bl-star-line" @click="changeOnlyStar()"></div>
</div> </div>
</el-tooltip> </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-cloudrefresh-line" @click="refreshDocTree()"></div> <div class="iconbl bl-a-cloudrefresh-line" @click="refreshDocTree()"></div>
</el-tooltip> </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> <div class="iconbl bl-a-fileadd-line" @click="handleShowAddDocInfoDialog()"></div>
</el-tooltip> </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-correlation-line" @click="openArticleReferenceWindow()"></div> <div class="iconbl bl-correlation-line" @click="openArticleReferenceWindow()"></div>
</el-tooltip> </el-tooltip>
</bl-row> </bl-row>
@ -61,14 +56,13 @@
<Transition name="wbpage-two"> <Transition name="wbpage-two">
<bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 2"> <bl-row class="wb-page-item" just="flex-end" align="flex-end" v-if="workbenchPage == 2">
<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-cloudstorage-line" @click="handleShowBackupDialog"></div> <div class="iconbl bl-a-cloudstorage-line" @click="handleShowBackupDialog"></div>
</el-tooltip> </el-tooltip>
</bl-row> </bl-row>
</Transition> </Transition>
<bl-col width="25px" just="end" class="workbench-page" style="position: absolute;right: 0;"> <bl-col width="25px" just="end" class="workbench-page" style="position: absolute; right: 0">
<el-icon size="13px" class="up" @click="toWorkbenchPage(1)"> <el-icon size="13px" class="up" @click="toWorkbenchPage(1)">
<ArrowUp /> <ArrowUp />
</el-icon> </el-icon>
@ -76,26 +70,40 @@
<ArrowDown /> <ArrowDown />
</el-icon> </el-icon>
</bl-col> </bl-col>
</bl-row> </bl-row>
</div> </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>
<ArticleInfo ref="ArticleInfoRef" @saved="savedCallback"></ArticleInfo> <ArticleInfo ref="ArticleInfoRef" @saved="savedCallback"></ArticleInfo>
</el-dialog> </el-dialog>
<el-dialog class="backup-dialog" v-model="isShowBackupDialog" width="80%" top="100px" style="height: 80%;" <el-dialog
:append-to-body="true" :destroy-on-close="true" :close-on-click-modal="false" draggable> class="backup-dialog"
v-model="isShowBackupDialog"
width="80%"
top="100px"
style="height: 80%"
:append-to-body="true"
:destroy-on-close="true"
:close-on-click-modal="false"
draggable>
<ArticleBackup ref="ArticleBackupRef"></ArticleBackup> <ArticleBackup ref="ArticleBackupRef"></ArticleBackup>
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, nextTick, inject } from "vue" import { ref, nextTick, inject } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue' import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { provideKeyDocInfo, TitleColor } from '@renderer/views/doc/doc' import { provideKeyDocInfo, TitleColor } from '@renderer/views/doc/doc'
import { openNewArticleReferenceWindow } from "@renderer/assets/utils/electron" import { openNewArticleReferenceWindow } from '@renderer/assets/utils/electron'
import ArticleInfo from './ArticleInfo.vue' import ArticleInfo from './ArticleInfo.vue'
import ArticleBackup from './ArticleBackup.vue' import ArticleBackup from './ArticleBackup.vue'
@ -124,13 +132,12 @@ const toWorkbenchPage = (page: number) => {
//#endregion //#endregion
//#region 查询 //#region 查询
const curDoc = inject(provideKeyDocInfo) const curDoc = inject(provideKeyDocInfo)
const onlyOpen = ref<boolean>(false)// 只显示公开 const onlyOpen = ref<boolean>(false) // 只显示公开
const onlySubject = ref<boolean>(false)// 只显示专题 const onlySubject = ref<boolean>(false) // 只显示专题
const onlyStars = ref<boolean>(false)// 只显示 star const onlyStars = ref<boolean>(false) // 只显示 star
const changeOnlyOpen = () => { const changeOnlyOpen = () => {
onlyOpen.value = !onlyOpen.value onlyOpen.value = !onlyOpen.value
@ -157,11 +164,13 @@ const changeOnlyStar = () => {
//#region 新增窗口 //#region 新增窗口
const ArticleInfoRef = ref() const ArticleInfoRef = ref()
const isShowDocInfoDialog = ref<boolean>(false); const isShowDocInfoDialog = ref<boolean>(false)
const handleShowAddDocInfoDialog = () => { const handleShowAddDocInfoDialog = () => {
isShowDocInfoDialog.value = true isShowDocInfoDialog.value = true
nextTick(() => { ArticleInfoRef.value.reload('add') }) nextTick(() => {
ArticleInfoRef.value.reload('add')
})
} }
const openArticleReferenceWindow = () => { const openArticleReferenceWindow = () => {
@ -219,7 +228,6 @@ defineExpose({ handleShowBackupDialog })
transform: translateY(-30%); transform: translateY(-30%);
} }
.wbpage-two-enter-from, .wbpage-two-enter-from,
.wbpage-two-leave-to { .wbpage-two-leave-to {
opacity: 0; opacity: 0;
@ -236,7 +244,6 @@ defineExpose({ handleShowBackupDialog })
<style lang="scss"> <style lang="scss">
.backup-dialog { .backup-dialog {
.el-dialog__body { .el-dialog__body {
height: calc(100% - 10px); height: calc(100% - 10px);
} }

119
blossom-editor/src/renderer/src/views/article/EditorTools.vue
View File

@ -39,7 +39,6 @@
<div class="iconbl bl-list-unordered" @click="emits('unordered')"></div> <div class="iconbl bl-list-unordered" @click="emits('unordered')"></div>
<div class="iconbl bl-list-ordered" @click="emits('ordered')"></div> <div class="iconbl bl-list-ordered" @click="emits('ordered')"></div>
<!-- 表格及其他 --> <!-- 表格及其他 -->
<div class="divider"></div> <div class="divider"></div>
<div class="iconbl bl-table-" @click="emits('table')"></div> <div class="iconbl bl-table-" @click="emits('table')"></div>
@ -144,18 +143,18 @@
<bl-row> <bl-row>
<div class="iconbl bl-list-unordered"></div> <div class="iconbl bl-list-unordered"></div>
<div class="label">无序列表</div> <div class="label">无序列表</div>
<div class="keyboard">- </div> <div class="keyboard">-</div>
</bl-row> </bl-row>
<bl-row> <bl-row>
<div class="iconbl bl-list-ordered"></div> <div class="iconbl bl-list-ordered"></div>
<div class="label">有序列表</div> <div class="label">有序列表</div>
<div class="keyboard">1. </div> <div class="keyboard">1.</div>
</bl-row> </bl-row>
</bl-col> </bl-col>
<bl-col> <bl-col>
<!-- --> <!-- -->
<el-divider style="margin:5px 0;border: 0;"></el-divider> <el-divider style="margin: 5px 0; border: 0"></el-divider>
<bl-row> <bl-row>
<div class="iconbl bl-table-"></div> <div class="iconbl bl-table-"></div>
<div class="label">插入表格</div> <div class="label">插入表格</div>
@ -184,7 +183,7 @@
</bl-col> </bl-col>
</bl-row> </bl-row>
<el-divider style="margin:5px 0;border: 0;"></el-divider> <el-divider style="margin: 5px 0; border: 0"></el-divider>
<bl-row> <bl-row>
<div class="info-title">编辑器快捷键</div> <div class="info-title">编辑器快捷键</div>
</bl-row> </bl-row>
@ -284,26 +283,24 @@
<div class="iconbl bl-fanqiezhong"></div> <div class="iconbl bl-fanqiezhong"></div>
</template> </template>
<template #default> <template #default>
<div <div style="padding: 5px 10px; font-size: 18px; margin-bottom: 15px; border-bottom: 1px solid var(--el-border-color)">
style="padding: 5px 10px;font-size: 18px;margin-bottom: 15px;border-bottom: 1px solid var(--el-border-color);"> <span class="iconbl bl-fanqiezhong" style="font-size: 18px; padding-right: 6px; color: #ec7259"></span>番茄时钟
<span class="iconbl bl-fanqiezhong" style="font-size: 18px;padding-right: 6px;color: #EC7259;"></span>番茄时钟
</div> </div>
<bl-row style="padding: 0 10px;"> <bl-row style="padding: 0 10px">
<span>时长分钟：</span> <span>时长分钟：</span>
<el-input-number v-model="duration"></el-input-number> <el-input-number v-model="duration"></el-input-number>
</bl-row> </bl-row>
<bl-row style="padding: 0 10px;margin-top: 15px;"> <bl-row style="padding: 0 10px; margin-top: 15px">
<span>结束时间：</span> <span>结束时间：</span>
<span style="font-size: 11px;">{{ endTime }}</span> <span style="font-size: 11px">{{ endTime }}</span>
</bl-row> </bl-row>
<bl-row just="space-between" <bl-row just="space-between" style="padding: 8px 10px; margin-top: 15px; border-top: 1px solid var(--el-border-color)">
style="padding: 8px 10px;margin-top: 15px;border-top: 1px solid var(--el-border-color);">
<el-button @click="stop">停止番茄钟</el-button> <el-button @click="stop">停止番茄钟</el-button>
<el-button @click="start" type="primary">开始</el-button> <el-button @click="start" type="primary">开始</el-button>
</bl-row> </bl-row>
</template> </template>
</el-popover> </el-popover>
<div style="font-size: 12px;padding: 4px 5px;">{{ remainStr }}</div> <div style="font-size: 12px; padding: 4px 5px">{{ remainStr }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -314,39 +311,56 @@ import { secondsToDatetime, formateMs, platform } from '@renderer/assets/utils/u
import { ElNotification } from 'element-plus' import { ElNotification } from 'element-plus'
const emits = defineEmits([ const emits = defineEmits([
'save', 'editorFullScreen', 'previewFullScreen', 'save',
'bold', 'italic', 'strike', 'sup', 'sub', 'editorFullScreen',
'separator', 'blockquote', 'blockquoteBlock', 'blockquoteGreen', 'blockquoteYellow', 'blockquoteRed', 'blockquoteBlue', 'blockquotePurple', 'previewFullScreen',
'code', 'pre', 'unordered', 'ordered', 'checkbox', 'bold',
'table', 'image', 'link' 'italic',
'strike',
'sup',
'sub',
'separator',
'blockquote',
'blockquoteBlock',
'blockquoteGreen',
'blockquoteYellow',
'blockquoteRed',
'blockquoteBlue',
'blockquotePurple',
'code',
'pre',
'unordered',
'ordered',
'checkbox',
'table',
'image',
'link'
]) ])
const isMac = platform() === 'darwin' const isMac = platform() === 'darwin'
const keymaps = { const keymaps = {
save : isMac ? 'Cmd + S' : 'Ctrl + S', save: isMac ? 'Cmd + S' : 'Ctrl + S',
hideDocs : isMac ? 'Cmd + 1' : 'Alt + 1', hideDocs: isMac ? 'Cmd + 1' : 'Alt + 1',
hideToc : isMac ? 'Cmd + 2' : 'Alt + 2', hideToc: isMac ? 'Cmd + 2' : 'Alt + 2',
fullViewer : isMac ? 'Cmd + 3' : 'Alt + 3', fullViewer: isMac ? 'Cmd + 3' : 'Alt + 3',
fullEditor : isMac ? 'Cmd + 4' : 'Alt + 4', fullEditor: isMac ? 'Cmd + 4' : 'Alt + 4',
formatAll : isMac ? 'Slift + Cmd + F' : 'Slift + Alt + F', formatAll: isMac ? 'Slift + Cmd + F' : 'Slift + Alt + F',
blod : isMac ? 'Cmd + B' : 'Alt + B', blod: isMac ? 'Cmd + B' : 'Alt + B',
italic : isMac ? 'Cmd + I' : 'Alt + I', italic: isMac ? 'Cmd + I' : 'Alt + I',
striket : isMac ? 'Cmd + S' : 'Alt + S', striket: isMac ? 'Cmd + S' : 'Alt + S',
sup : isMac ? 'Ctrl + Cmd + P' : 'Ctrl + Alt + P', sup: isMac ? 'Ctrl + Cmd + P' : 'Ctrl + Alt + P',
sub : isMac ? 'Ctrl + Cmd + B' : 'Ctrl + Alt + B', sub: isMac ? 'Ctrl + Cmd + B' : 'Ctrl + Alt + B',
separator : isMac ? 'Ctrl + Cmd + S' : 'Ctrl + Alt + S', separator: isMac ? 'Ctrl + Cmd + S' : 'Ctrl + Alt + S',
blockquote : isMac ? '>' : '>',
code : isMac ? 'Cmd + E' : 'Alt + E',
pre : isMac ? 'Ctrl + Cmd + S' : 'Ctrl + Alt + E',
table : isMac ? 'Cmd + T' : 'Alt + T',
image : isMac ? 'Cmd + M' : 'Alt + M',
link : isMac ? 'Cmd + K' : 'Alt + K',
blockquote: isMac ? '>' : '>',
code: isMac ? 'Cmd + E' : 'Alt + E',
pre: isMac ? 'Ctrl + Cmd + S' : 'Ctrl + Alt + E',
table: isMac ? 'Cmd + T' : 'Alt + T',
image: isMac ? 'Cmd + M' : 'Alt + M',
link: isMac ? 'Cmd + K' : 'Alt + K'
} }
onUnmounted(() => { onUnmounted(() => {
@ -357,7 +371,7 @@ onUnmounted(() => {
* 预览番茄钟到期时间 * 预览番茄钟到期时间
*/ */
const endTime = computed(() => { const endTime = computed(() => {
return secondsToDatetime((Date.now() / 1000) + (duration.value * 60)) return secondsToDatetime(Date.now() / 1000 + duration.value * 60)
}) })
const TomatoBellRef = ref() const TomatoBellRef = ref()
@ -380,7 +394,7 @@ const start = () => {
const now = Date.now() const now = Date.now()
const remain = param.start + param.duration - now const remain = param.start + param.duration - now
remainStr.value = formateMs(Math.max(remain, 0)) remainStr.value = formateMs(Math.max(remain, 0))
TomatoBellRef.value.style.transform = `translateX(${100 - ((remain / param.duration) * 100)}%)` TomatoBellRef.value.style.transform = `translateX(${100 - (remain / param.duration) * 100}%)`
if (remain <= 0) { if (remain <= 0) {
stop() stop()
ElNotification.success({ ElNotification.success({
@ -405,7 +419,6 @@ const stop = () => {
TomatoBellRef.value.style.transform = `translateX(100%)` TomatoBellRef.value.style.transform = `translateX(100%)`
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -419,7 +432,7 @@ const stop = () => {
.tomato-bell { .tomato-bell {
@include box(100%, 100%); @include box(100%, 100%);
@include themeBg(#B593FDC7, #354F00); @include themeBg(#b593fdc7, #354f00);
transform: translateX(100%); transform: translateX(100%);
position: absolute; position: absolute;
right: 0; right: 0;
@ -431,15 +444,15 @@ const stop = () => {
.tools-container { .tools-container {
@include box(100%, 100%); @include box(100%, 100%);
@include flex(row, flex-start, center); @include flex(row, flex-start, center);
@include themeBg(#EFEFEF80, #8A8A8A4A); @include themeBg(#efefef80, #8a8a8a4a);
padding: 0 5px; padding: 0 5px;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
overflow-x: overlay; overflow-x: overlay;
&>div { & > div {
@include themeColor(#5B5B5B, #0D0D0D); @include themeColor(#5b5b5b, #909090);
@include themeBorder(1px, #A7A7A7, #1C1C1C); @include themeBorder(1px, #a7a7a7, #1c1c1c);
margin: 0 5px; margin: 0 5px;
padding: 3px; padding: 3px;
border-radius: 3px; border-radius: 3px;
@ -448,12 +461,13 @@ const stop = () => {
&:hover { &:hover {
background-color: var(--el-color-primary); background-color: var(--el-color-primary);
color: #ffffff;
} }
} }
.divider { .divider {
@include box(2px, 60%); @include box(2px, 60%);
@include themeBg(#ad8cf280, #1C1C1C); @include themeBg(#ad8cf280, #1c1c1c);
padding: 0; padding: 0;
border: 0; border: 0;
} }
@ -463,7 +477,7 @@ const stop = () => {
<!-- <!--
快捷键说明为弹出框 需要设置全局的样式 快捷键说明为弹出框 需要设置全局的样式
--> -->
<style lang=scss> <style lang="scss">
.editor-tools-content { .editor-tools-content {
@include flex(column, flex-start, flex-start); @include flex(column, flex-start, flex-start);
color: var(--bl-text-color); color: var(--bl-text-color);
@ -482,8 +496,8 @@ const stop = () => {
} }
.info-title { .info-title {
width: 100%;
@include font(15px, 500); @include font(15px, 500);
width: 100%;
border-bottom: 1px solid var(--el-border-color); border-bottom: 1px solid var(--el-border-color);
padding: 5px; padding: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -497,15 +511,14 @@ const stop = () => {
} }
.label { .label {
height: 20px; @include box(48px, 20px);
width: 48px;
text-align: justify; text-align: justify;
margin-right: 10px; margin-right: 10px;
&:after { &:after {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
content: ""; content: '';
} }
} }
} }

12
blossom-editor/src/renderer/src/views/doc/tree-docs.scss
View File

@ -59,6 +59,7 @@
min-height: 25px; min-height: 25px;
padding-right: 0; padding-right: 0;
overflow: hidden; overflow: hidden;
color: var(--bl-text-doctree-color);
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: inherit; font-size: inherit;
@ -74,6 +75,7 @@
:deep(.el-menu-item) { :deep(.el-menu-item) {
--el-menu-hover-bg-color: #ffffff00 !important; --el-menu-hover-bg-color: #ffffff00 !important;
color: var(--bl-text-doctree-color);
height: auto; height: auto;
min-height: 25px; min-height: 25px;
padding-right: 0; padding-right: 0;
@ -86,9 +88,15 @@
:deep(.el-menu-item.is-active) { :deep(.el-menu-item.is-active) {
@include themeText(0px 4px 5px rgba(107, 104, 104, 1), 0px 4px 5px rgb(145, 145, 145)); @include themeText(0px 4px 5px rgba(107, 104, 104, 1), 0px 4px 5px rgb(145, 145, 145));
background: linear-gradient(90deg, var(--bl-html-color) 0%, var(--el-color-primary-light-5) 40%, var(--el-color-primary-light-5) 60%, var(--bl-html-color) 100%); background: linear-gradient(
90deg,
var(--bl-html-color) 0%,
var(--el-color-primary-light-5) 40%,
var(--el-color-primary-light-5) 60%,
var(--bl-html-color) 100%
);
color: #ffffff; color: #ffffff;
font-weight: 700; font-weight: bold;
} }
:deep(.el-badge__content) { :deep(.el-badge__content) {

13
blossom-editor/src/renderer/src/views/doc/tree-workbench.scss
View File

@ -30,7 +30,7 @@
} }
.iconbl { .iconbl {
@include themeColor(#909399, #535353); @include themeColor(#909399, #717171);
text-shadow: var(--bl-iconbl-text-shadow); text-shadow: var(--bl-iconbl-text-shadow);
font-size: 25px; font-size: 25px;
padding: 3px 2px; padding: 3px 2px;
@ -49,15 +49,15 @@
// 公开图标 // 公开图标
.bl-cloud-fill { .bl-cloud-fill {
color: #7AC20C; color: #7ac20c;
@include themeText(0px 5px 5px #79C20CA4, 2px 3px 5px rgba(183, 183, 183, 0.8)); @include themeText(0px 5px 5px #79c20ca4, 2px 3px 5px rgba(183, 183, 183, 0.8));
} }
.bl-cloud-fill, .bl-cloud-fill,
.bl-cloud-line { .bl-cloud-line {
&:hover { &:hover {
color: #7AC20C; color: #7ac20c;
@include themeText(5px 5px 5px #79C20CA4, 2px 3px 5px rgba(183, 183, 183, 0.8)); @include themeText(5px 5px 5px #79c20ca4, 2px 3px 5px rgba(183, 183, 183, 0.8));
} }
} }
@ -101,7 +101,8 @@
} }
} }
.bl-a-fileadd-line {} .bl-a-fileadd-line {
}
.bl-correlation-line { .bl-correlation-line {
color: var(--el-color-primary) !important; color: var(--el-color-primary) !important;

10
blossom-editor/src/renderer/src/views/todo/TaskProgress.vue
View File

@ -30,7 +30,7 @@
<div <div
class="waiting" class="waiting"
@dragenter="onDragenter(WaitDragRef, $event)" @dragenter="onDragenter(WaitDragRef, $event)"
@drop="onDrop('WAITING', $event)" @drop="onDrop('WAITING')"
@dragleave="onDragleave(WaitDragRef, $event)" @dragleave="onDragleave(WaitDragRef, $event)"
ref="WaitRef"> ref="WaitRef">
<div class="tasks-title"> <div class="tasks-title">
@ -86,7 +86,7 @@
class="processing" class="processing"
ref="ProcRef" ref="ProcRef"
@dragenter="onDragenter(ProcDragRef, $event)" @dragenter="onDragenter(ProcDragRef, $event)"
@drop="onDrop('PROCESSING', $event)" @drop="onDrop('PROCESSING')"
@dragleave="onDragleave(ProcDragRef, $event)"> @dragleave="onDragleave(ProcDragRef, $event)">
<div class="tasks-title"><span>进行中</span></div> <div class="tasks-title"><span>进行中</span></div>
<div class="tasks-sub-title"> <div class="tasks-sub-title">
@ -135,7 +135,7 @@
class="completed" class="completed"
ref="CompRef" ref="CompRef"
@dragenter="onDragenter(CompDragRef, $event)" @dragenter="onDragenter(CompDragRef, $event)"
@drop="onDrop('COMPLETED', $event)" @drop="onDrop('COMPLETED')"
@dragleave="onDragleave(CompDragRef, $event)"> @dragleave="onDragleave(CompDragRef, $event)">
<div class="tasks-title">完成</div> <div class="tasks-title">完成</div>
<div class="tasks-sub-title"> <div class="tasks-sub-title">
@ -554,7 +554,7 @@ const dragendWait = (task: TaskInfo, _e: DragEvent) => {
/** /**
* processing 中的元素在拖拽完成后执行 * processing 中的元素在拖拽完成后执行
*/ */
const dragendProc = (task: TaskInfo, e: DragEvent) => { const dragendProc = (task: TaskInfo, _e: DragEvent) => {
WaitDragRef.value.style.display = 'none' WaitDragRef.value.style.display = 'none'
CompDragRef.value.style.display = 'none' CompDragRef.value.style.display = 'none'
if (toStage == '' || toStage === 'PROCESSING') return if (toStage == '' || toStage === 'PROCESSING') return
@ -565,7 +565,7 @@ const dragendProc = (task: TaskInfo, e: DragEvent) => {
/** /**
* 从 completed 中拖出 * 从 completed 中拖出
*/ */
const dragendComp = (task: TaskInfo, e: DragEvent) => { const dragendComp = (task: TaskInfo, _e: DragEvent) => {
WaitDragRef.value.style.display = 'none' WaitDragRef.value.style.display = 'none'
ProcDragRef.value.style.display = 'none' ProcDragRef.value.style.display = 'none'
if (toStage == '' || toStage === 'COMPLETED') return if (toStage == '' || toStage === 'COMPLETED') return