mirror of
https://gitee.com/blossom-editor/blossom.git
synced 2025-12-06 16:58:26 +08:00
样式优化
This commit is contained in:
xiaozzzi
parent
6ad59d2a9a
commit
0405fc3f3b
@ -1,5 +1,4 @@
|
||||
:root {
|
||||
|
||||
/* 数字越大, 颜色越淡 */
|
||||
--el-color-primary: #ad8cf2;
|
||||
--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-regular: #a8a8a8;
|
||||
--el-text-color-secondary: #A3A6AD;
|
||||
--el-text-color-secondary: #a3a6ad;
|
||||
--el-text-color-placeholder: #535353;
|
||||
|
||||
/* ================================= 背景颜色 =================================*/
|
||||
@ -125,6 +124,7 @@ html.dark {
|
||||
/* background color */
|
||||
--bl-bg-color: #f1f1f1;
|
||||
/* ================================= text styles =================================*/
|
||||
--bl-text-doctree-color: #909399;
|
||||
/* primary color */
|
||||
--bl-text-color: #606266;
|
||||
/* lighter than primary color */
|
||||
@ -143,10 +143,10 @@ html.dark {
|
||||
/* ================================= iconbl ================================== */
|
||||
--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);
|
||||
}
|
||||
|
||||
@ -156,6 +156,7 @@ html.dark {
|
||||
/* background color */
|
||||
--bl-bg-color: #333434;
|
||||
/* ================================= text styles =================================*/
|
||||
--bl-text-doctree-color: #a8a8a8;
|
||||
/* primary color */
|
||||
--bl-text-color: #a8a8a8;
|
||||
/* lighter than primary color */
|
||||
@ -178,15 +179,14 @@ html.dark {
|
||||
--bl-dialog-box-shadow: 3px 3px 10px 2px rgba(0, 0, 0);
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
/* */
|
||||
--bl-editor-color: #707070;
|
||||
--bl-editor-bg-color: #FFFFFF;
|
||||
--bl-editor-bg-color: #ffffff;
|
||||
|
||||
/* gutter */
|
||||
--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-color: #000000;
|
||||
|
||||
@ -206,16 +206,15 @@ html.dark {
|
||||
--bl-editor-ci-color: #ba7300;
|
||||
--bl-editor-cg-color: #9876aa;
|
||||
|
||||
--bl-editor-c5-color: #7843E9;
|
||||
--bl-editor-c7-color: #7843E9;
|
||||
--bl-editor-c5-color: #7843e9;
|
||||
--bl-editor-c7-color: #7843e9;
|
||||
--bl-editor-c7-bg-color: #00000000;
|
||||
|
||||
|
||||
/* ======================================= */
|
||||
|
||||
/* 预览的字体颜色 */
|
||||
--bl-preview-color: #2b2b2b;
|
||||
--bl-preview-bg-color: #FFFFFF;
|
||||
--bl-preview-bg-color: #ffffff;
|
||||
--bl-preview-border-radius: 4px;
|
||||
|
||||
/* 目录 */
|
||||
@ -321,4 +320,4 @@ html.dark {
|
||||
--bl-preview-code-bg-color: #414141;
|
||||
--bl-preview-pre-bg-color: #131313;
|
||||
--bl-preview-pre-box-shadow: inset 0 0 5px 3px #000;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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 }}
|
||||
</bl-tag>
|
||||
<div class="doc-name">
|
||||
@ -16,8 +16,7 @@
|
||||
<bl-tag v-else :bg-color="tag.bgColor" :icon="tag.icon" />
|
||||
</div>
|
||||
|
||||
<div v-for="line, index in tagLins" :key="line" :class="[line]" :style="{ left: (-1 * (index + 1) * 5) + 'px' }">
|
||||
</div>
|
||||
<div v-for="(line, index) in tagLins" :key="line" :class="[line]" :style="{ left: -1 * (index + 1) * 5 + 'px' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -30,7 +29,7 @@ import { computedDocTitleColor } from '@renderer/views/doc/doc'
|
||||
const props = defineProps({
|
||||
trees: { type: Object as PropType<DocTree>, default: {} },
|
||||
size: { type: Number, default: 14 },
|
||||
level: { type: Number, required: true },
|
||||
level: { type: Number, required: true }
|
||||
})
|
||||
|
||||
const levelColor = computed(() => {
|
||||
@ -42,7 +41,7 @@ const levelColor = computed(() => {
|
||||
*/
|
||||
const tags = computed(() => {
|
||||
let icons: any = []
|
||||
props.trees.t?.forEach(tag => {
|
||||
props.trees.t?.forEach((tag) => {
|
||||
if (tag === 'subject') {
|
||||
icons.unshift({ content: '专题', bgColor: 'salmon', icon: 'bl-a-lowerrightpage-line' })
|
||||
} else if (tag === 'toc') {
|
||||
@ -50,8 +49,8 @@ const tags = computed(() => {
|
||||
} else {
|
||||
icons.push({ content: tag })
|
||||
}
|
||||
});
|
||||
return icons;
|
||||
})
|
||||
return icons
|
||||
})
|
||||
|
||||
const tagLins = computed(() => {
|
||||
@ -67,7 +66,6 @@ const tagLins = computed(() => {
|
||||
}
|
||||
return lines
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -89,11 +87,10 @@ $icon-size: 17px;
|
||||
position: relative;
|
||||
|
||||
.doc-name {
|
||||
font-size: inherit;
|
||||
font-weight: 300;
|
||||
// @include flex(row, flex-start, center);
|
||||
@include themeBrightness(100%, 80%);
|
||||
@include ellipsis();
|
||||
font-size: inherit;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.sort {
|
||||
@ -104,17 +101,15 @@ $icon-size: 17px;
|
||||
|
||||
// 专题样式, 包括边框和文字样式
|
||||
.subject-title {
|
||||
@include themeShadow(2px 2px 10px 1px #fad7d7, 1px 2px 10px 1px #0A0A0A);
|
||||
@include themeBg(linear-gradient(135deg, #fad7d7, #fae7e7, #ffffff),
|
||||
linear-gradient(135deg, #594A23, #453D28, #33302B));
|
||||
@include themeShadow(2px 2px 10px 1px #fad7d7, 1px 2px 10px 1px #0a0a0a);
|
||||
@include themeBg(linear-gradient(135deg, #fad7d7, #fae7e7, #ffffff), linear-gradient(135deg, #594a23, #453d28, #33302b));
|
||||
padding: 2px 5px;
|
||||
margin: 5px 0 10px 0;
|
||||
border-radius: 7px;
|
||||
position: relative;
|
||||
|
||||
|
||||
.doc-name {
|
||||
@include themeText(2px 2px 2px #D8D8D8, 2px 2px 2px #0A0A0A);
|
||||
@include themeText(2px 2px 2px #d8d8d8, 2px 2px 2px #0a0a0a);
|
||||
@include ellipsis();
|
||||
color: var(--el-color-primary);
|
||||
min-width: 180px;
|
||||
@ -138,10 +133,10 @@ $icon-size: 17px;
|
||||
}
|
||||
|
||||
.open-line {
|
||||
background: #79C20C71;
|
||||
background: #79c20c71;
|
||||
}
|
||||
|
||||
.sync-line {
|
||||
background: #E8122479;
|
||||
background: #e8122479;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="doc-workbench-root">
|
||||
<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>
|
||||
<br />
|
||||
<span style="font-size: 9px;padding-right: 5px;">{{ curDoc?.id }}</span>
|
||||
<span style="font-size: 9px; padding-right: 5px">{{ curDoc?.id }}</span>
|
||||
</div>
|
||||
</bl-row>
|
||||
<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">
|
||||
<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>
|
||||
<template #content> 显示排序<br />
|
||||
<template #content>
|
||||
显示排序<br />
|
||||
<bl-row>
|
||||
<bl-tag :bgColor="TitleColor.ONE">一级</bl-tag>
|
||||
<bl-tag :bgColor="TitleColor.TWO">二级</bl-tag>
|
||||
@ -23,37 +24,31 @@
|
||||
</bl-row>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="只显示公开" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="只显示公开" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div v-if="props.showOpen">
|
||||
<div v-if="onlyOpen" class="iconbl bl-cloud-fill" @click="changeOnlyOpen()"></div>
|
||||
<div v-else class="iconbl bl-cloud-line" @click="changeOnlyOpen()"></div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="只显示专题" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="只显示专题" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div v-if="props.showSubject">
|
||||
<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>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="只显示 Star 文章" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div v-if="props.showStar">
|
||||
<div v-if="onlyStars" class="iconbl bl-star-fill" @click="changeOnlyStar()"></div>
|
||||
<div v-else class="iconbl bl-star-line" @click="changeOnlyStar()"></div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="刷新列表" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="刷新列表" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div class="iconbl bl-a-cloudrefresh-line" @click="refreshDocTree()"></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="新增文件夹或文档" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="新增文件夹或文档" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div class="iconbl bl-a-fileadd-line" @click="handleShowAddDocInfoDialog()"></div>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="文章引用网络" effect="blossomt" placement="top" :show-after="1000" :hide-after="0"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="文章引用网络" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div class="iconbl bl-correlation-line" @click="openArticleReferenceWindow()"></div>
|
||||
</el-tooltip>
|
||||
</bl-row>
|
||||
@ -61,14 +56,13 @@
|
||||
|
||||
<Transition name="wbpage-two">
|
||||
<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"
|
||||
:auto-close="2000">
|
||||
<el-tooltip content="查看备份记录" effect="blossomt" placement="top" :show-after="1000" :hide-after="0" :auto-close="2000">
|
||||
<div class="iconbl bl-a-cloudstorage-line" @click="handleShowBackupDialog"></div>
|
||||
</el-tooltip>
|
||||
</bl-row>
|
||||
</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)">
|
||||
<ArrowUp />
|
||||
</el-icon>
|
||||
@ -76,26 +70,40 @@
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</bl-col>
|
||||
|
||||
</bl-row>
|
||||
</div>
|
||||
|
||||
<el-dialog 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>
|
||||
<el-dialog
|
||||
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>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog 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>
|
||||
<el-dialog
|
||||
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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<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 { 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 ArticleBackup from './ArticleBackup.vue'
|
||||
|
||||
@ -124,13 +132,12 @@ const toWorkbenchPage = (page: number) => {
|
||||
|
||||
//#endregion
|
||||
|
||||
|
||||
//#region 查询
|
||||
const curDoc = inject(provideKeyDocInfo)
|
||||
|
||||
const onlyOpen = ref<boolean>(false)// 只显示公开
|
||||
const onlySubject = ref<boolean>(false)// 只显示专题
|
||||
const onlyStars = ref<boolean>(false)// 只显示 star
|
||||
const onlyOpen = ref<boolean>(false) // 只显示公开
|
||||
const onlySubject = ref<boolean>(false) // 只显示专题
|
||||
const onlyStars = ref<boolean>(false) // 只显示 star
|
||||
|
||||
const changeOnlyOpen = () => {
|
||||
onlyOpen.value = !onlyOpen.value
|
||||
@ -157,11 +164,13 @@ const changeOnlyStar = () => {
|
||||
|
||||
//#region 新增窗口
|
||||
const ArticleInfoRef = ref()
|
||||
const isShowDocInfoDialog = ref<boolean>(false);
|
||||
const isShowDocInfoDialog = ref<boolean>(false)
|
||||
|
||||
const handleShowAddDocInfoDialog = () => {
|
||||
isShowDocInfoDialog.value = true
|
||||
nextTick(() => { ArticleInfoRef.value.reload('add') })
|
||||
nextTick(() => {
|
||||
ArticleInfoRef.value.reload('add')
|
||||
})
|
||||
}
|
||||
|
||||
const openArticleReferenceWindow = () => {
|
||||
@ -219,7 +228,6 @@ defineExpose({ handleShowBackupDialog })
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
|
||||
.wbpage-two-enter-from,
|
||||
.wbpage-two-leave-to {
|
||||
opacity: 0;
|
||||
@ -236,9 +244,8 @@ defineExpose({ handleShowBackupDialog })
|
||||
|
||||
<style lang="scss">
|
||||
.backup-dialog {
|
||||
|
||||
.el-dialog__body {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -39,7 +39,6 @@
|
||||
<div class="iconbl bl-list-unordered" @click="emits('unordered')"></div>
|
||||
<div class="iconbl bl-list-ordered" @click="emits('ordered')"></div>
|
||||
|
||||
|
||||
<!-- 表格及其他 -->
|
||||
<div class="divider"></div>
|
||||
<div class="iconbl bl-table-" @click="emits('table')"></div>
|
||||
@ -144,18 +143,18 @@
|
||||
<bl-row>
|
||||
<div class="iconbl bl-list-unordered"></div>
|
||||
<div class="label">无序列表</div>
|
||||
<div class="keyboard">- </div>
|
||||
<div class="keyboard">-</div>
|
||||
</bl-row>
|
||||
<bl-row>
|
||||
<div class="iconbl bl-list-ordered"></div>
|
||||
<div class="label">有序列表</div>
|
||||
<div class="keyboard">1. </div>
|
||||
<div class="keyboard">1.</div>
|
||||
</bl-row>
|
||||
</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>
|
||||
<div class="iconbl bl-table-"></div>
|
||||
<div class="label">插入表格</div>
|
||||
@ -184,7 +183,7 @@
|
||||
</bl-col>
|
||||
</bl-row>
|
||||
|
||||
<el-divider style="margin:5px 0;border: 0;"></el-divider>
|
||||
<el-divider style="margin: 5px 0; border: 0"></el-divider>
|
||||
<bl-row>
|
||||
<div class="info-title">编辑器快捷键</div>
|
||||
</bl-row>
|
||||
@ -284,26 +283,24 @@
|
||||
<div class="iconbl bl-fanqiezhong"></div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div
|
||||
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>番茄时钟
|
||||
<div 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>番茄时钟
|
||||
</div>
|
||||
<bl-row style="padding: 0 10px;">
|
||||
<bl-row style="padding: 0 10px">
|
||||
<span>时长分钟：</span>
|
||||
<el-input-number v-model="duration"></el-input-number>
|
||||
</bl-row>
|
||||
<bl-row style="padding: 0 10px;margin-top: 15px;">
|
||||
<bl-row style="padding: 0 10px; margin-top: 15px">
|
||||
<span>结束时间：</span>
|
||||
<span style="font-size: 11px;">{{ endTime }}</span>
|
||||
<span style="font-size: 11px">{{ endTime }}</span>
|
||||
</bl-row>
|
||||
<bl-row just="space-between"
|
||||
style="padding: 8px 10px;margin-top: 15px;border-top: 1px solid var(--el-border-color);">
|
||||
<bl-row just="space-between" style="padding: 8px 10px; margin-top: 15px; border-top: 1px solid var(--el-border-color)">
|
||||
<el-button @click="stop">停止番茄钟</el-button>
|
||||
<el-button @click="start" type="primary">开始</el-button>
|
||||
</bl-row>
|
||||
</template>
|
||||
</el-popover>
|
||||
<div style="font-size: 12px;padding: 4px 5px;">{{ remainStr }}</div>
|
||||
<div style="font-size: 12px; padding: 4px 5px">{{ remainStr }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -314,39 +311,56 @@ import { secondsToDatetime, formateMs, platform } from '@renderer/assets/utils/u
|
||||
import { ElNotification } from 'element-plus'
|
||||
|
||||
const emits = defineEmits([
|
||||
'save', 'editorFullScreen', 'previewFullScreen',
|
||||
'bold', 'italic', 'strike', 'sup', 'sub',
|
||||
'separator', 'blockquote', 'blockquoteBlock', 'blockquoteGreen', 'blockquoteYellow', 'blockquoteRed', 'blockquoteBlue', 'blockquotePurple',
|
||||
'code', 'pre', 'unordered', 'ordered', 'checkbox',
|
||||
'table', 'image', 'link'
|
||||
'save',
|
||||
'editorFullScreen',
|
||||
'previewFullScreen',
|
||||
'bold',
|
||||
'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 keymaps = {
|
||||
save : isMac ? 'Cmd + S' : 'Ctrl + S',
|
||||
hideDocs : isMac ? 'Cmd + 1' : 'Alt + 1',
|
||||
hideToc : isMac ? 'Cmd + 2' : 'Alt + 2',
|
||||
fullViewer : isMac ? 'Cmd + 3' : 'Alt + 3',
|
||||
fullEditor : isMac ? 'Cmd + 4' : 'Alt + 4',
|
||||
formatAll : isMac ? 'Slift + Cmd + F' : 'Slift + Alt + F',
|
||||
|
||||
blod : isMac ? 'Cmd + B' : 'Alt + B',
|
||||
italic : isMac ? 'Cmd + I' : 'Alt + I',
|
||||
striket : isMac ? 'Cmd + S' : 'Alt + S',
|
||||
sup : isMac ? 'Ctrl + Cmd + P' : 'Ctrl + Alt + P',
|
||||
sub : isMac ? 'Ctrl + Cmd + B' : 'Ctrl + Alt + B',
|
||||
separator : isMac ? 'Ctrl + Cmd + S' : 'Ctrl + Alt + S',
|
||||
save: isMac ? 'Cmd + S' : 'Ctrl + S',
|
||||
hideDocs: isMac ? 'Cmd + 1' : 'Alt + 1',
|
||||
hideToc: isMac ? 'Cmd + 2' : 'Alt + 2',
|
||||
fullViewer: isMac ? 'Cmd + 3' : 'Alt + 3',
|
||||
fullEditor: isMac ? 'Cmd + 4' : 'Alt + 4',
|
||||
formatAll: isMac ? 'Slift + Cmd + F' : 'Slift + Alt + F',
|
||||
|
||||
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',
|
||||
blod: isMac ? 'Cmd + B' : 'Alt + B',
|
||||
italic: isMac ? 'Cmd + I' : 'Alt + I',
|
||||
striket: isMac ? 'Cmd + S' : 'Alt + S',
|
||||
sup: isMac ? 'Ctrl + Cmd + P' : 'Ctrl + Alt + P',
|
||||
sub: isMac ? 'Ctrl + Cmd + B' : 'Ctrl + Alt + B',
|
||||
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'
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
@ -357,13 +371,13 @@ onUnmounted(() => {
|
||||
* 预览番茄钟到期时间
|
||||
*/
|
||||
const endTime = computed(() => {
|
||||
return secondsToDatetime((Date.now() / 1000) + (duration.value * 60))
|
||||
return secondsToDatetime(Date.now() / 1000 + duration.value * 60)
|
||||
})
|
||||
|
||||
const TomatoBellRef = ref()
|
||||
// 番茄钟时长(分钟)
|
||||
const duration = ref(30)
|
||||
// 番茄钟的展示信息,
|
||||
// 番茄钟的展示信息,
|
||||
const remainStr = ref('00:00:00')
|
||||
// 番茄钟参数, 开始时间, 时长(毫秒)
|
||||
let param = { start: 0, duration: 0 }
|
||||
@ -380,7 +394,7 @@ const start = () => {
|
||||
const now = Date.now()
|
||||
const remain = param.start + param.duration - now
|
||||
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) {
|
||||
stop()
|
||||
ElNotification.success({
|
||||
@ -405,7 +419,6 @@ const stop = () => {
|
||||
TomatoBellRef.value.style.transform = `translateX(100%)`
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -419,7 +432,7 @@ const stop = () => {
|
||||
|
||||
.tomato-bell {
|
||||
@include box(100%, 100%);
|
||||
@include themeBg(#B593FDC7, #354F00);
|
||||
@include themeBg(#b593fdc7, #354f00);
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -431,15 +444,15 @@ const stop = () => {
|
||||
.tools-container {
|
||||
@include box(100%, 100%);
|
||||
@include flex(row, flex-start, center);
|
||||
@include themeBg(#EFEFEF80, #8A8A8A4A);
|
||||
@include themeBg(#efefef80, #8a8a8a4a);
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
overflow-x: overlay;
|
||||
|
||||
&>div {
|
||||
@include themeColor(#5B5B5B, #0D0D0D);
|
||||
@include themeBorder(1px, #A7A7A7, #1C1C1C);
|
||||
& > div {
|
||||
@include themeColor(#5b5b5b, #909090);
|
||||
@include themeBorder(1px, #a7a7a7, #1c1c1c);
|
||||
margin: 0 5px;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
@ -448,12 +461,13 @@ const stop = () => {
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary);
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
@include box(2px, 60%);
|
||||
@include themeBg(#ad8cf280, #1C1C1C);
|
||||
@include themeBg(#ad8cf280, #1c1c1c);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
@ -463,7 +477,7 @@ const stop = () => {
|
||||
<!--
|
||||
快捷键说明为弹出框 需要设置全局的样式
|
||||
-->
|
||||
<style lang=scss>
|
||||
<style lang="scss">
|
||||
.editor-tools-content {
|
||||
@include flex(column, flex-start, flex-start);
|
||||
color: var(--bl-text-color);
|
||||
@ -482,8 +496,8 @@ const stop = () => {
|
||||
}
|
||||
|
||||
.info-title {
|
||||
width: 100%;
|
||||
@include font(15px, 500);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
@ -497,16 +511,15 @@ const stop = () => {
|
||||
}
|
||||
|
||||
.label {
|
||||
height: 20px;
|
||||
width: 48px;
|
||||
@include box(48px, 20px);
|
||||
text-align: justify;
|
||||
margin-right: 10px;
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
content: "";
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
min-height: 25px;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
color: var(--bl-text-doctree-color);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-size: inherit;
|
||||
@ -74,6 +75,7 @@
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
--el-menu-hover-bg-color: #ffffff00 !important;
|
||||
color: var(--bl-text-doctree-color);
|
||||
height: auto;
|
||||
min-height: 25px;
|
||||
padding-right: 0;
|
||||
@ -86,9 +88,15 @@
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
@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;
|
||||
font-weight: 700;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.el-badge__content) {
|
||||
@ -101,4 +109,4 @@
|
||||
width: 5px;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
.iconbl {
|
||||
@include themeColor(#909399, #535353);
|
||||
@include themeColor(#909399, #717171);
|
||||
text-shadow: var(--bl-iconbl-text-shadow);
|
||||
font-size: 25px;
|
||||
padding: 3px 2px;
|
||||
@ -49,15 +49,15 @@
|
||||
|
||||
// 公开图标
|
||||
.bl-cloud-fill {
|
||||
color: #7AC20C;
|
||||
@include themeText(0px 5px 5px #79C20CA4, 2px 3px 5px rgba(183, 183, 183, 0.8));
|
||||
color: #7ac20c;
|
||||
@include themeText(0px 5px 5px #79c20ca4, 2px 3px 5px rgba(183, 183, 183, 0.8));
|
||||
}
|
||||
|
||||
.bl-cloud-fill,
|
||||
.bl-cloud-line {
|
||||
&:hover {
|
||||
color: #7AC20C;
|
||||
@include themeText(5px 5px 5px #79C20CA4, 2px 3px 5px rgba(183, 183, 183, 0.8));
|
||||
color: #7ac20c;
|
||||
@include themeText(5px 5px 5px #79c20ca4, 2px 3px 5px rgba(183, 183, 183, 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,11 +101,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bl-a-fileadd-line {}
|
||||
.bl-a-fileadd-line {
|
||||
}
|
||||
|
||||
.bl-correlation-line {
|
||||
color: var(--el-color-primary) !important;
|
||||
font-size: 40px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<div
|
||||
class="waiting"
|
||||
@dragenter="onDragenter(WaitDragRef, $event)"
|
||||
@drop="onDrop('WAITING', $event)"
|
||||
@drop="onDrop('WAITING')"
|
||||
@dragleave="onDragleave(WaitDragRef, $event)"
|
||||
ref="WaitRef">
|
||||
<div class="tasks-title">
|
||||
@ -86,7 +86,7 @@
|
||||
class="processing"
|
||||
ref="ProcRef"
|
||||
@dragenter="onDragenter(ProcDragRef, $event)"
|
||||
@drop="onDrop('PROCESSING', $event)"
|
||||
@drop="onDrop('PROCESSING')"
|
||||
@dragleave="onDragleave(ProcDragRef, $event)">
|
||||
<div class="tasks-title"><span>进行中</span></div>
|
||||
<div class="tasks-sub-title">
|
||||
@ -135,7 +135,7 @@
|
||||
class="completed"
|
||||
ref="CompRef"
|
||||
@dragenter="onDragenter(CompDragRef, $event)"
|
||||
@drop="onDrop('COMPLETED', $event)"
|
||||
@drop="onDrop('COMPLETED')"
|
||||
@dragleave="onDragleave(CompDragRef, $event)">
|
||||
<div class="tasks-title">完成</div>
|
||||
<div class="tasks-sub-title">
|
||||
@ -554,7 +554,7 @@ const dragendWait = (task: TaskInfo, _e: DragEvent) => {
|
||||
/**
|
||||
* processing 中的元素在拖拽完成后执行
|
||||
*/
|
||||
const dragendProc = (task: TaskInfo, e: DragEvent) => {
|
||||
const dragendProc = (task: TaskInfo, _e: DragEvent) => {
|
||||
WaitDragRef.value.style.display = 'none'
|
||||
CompDragRef.value.style.display = 'none'
|
||||
if (toStage == '' || toStage === 'PROCESSING') return
|
||||
@ -565,7 +565,7 @@ const dragendProc = (task: TaskInfo, e: DragEvent) => {
|
||||
/**
|
||||
* 从 completed 中拖出
|
||||
*/
|
||||
const dragendComp = (task: TaskInfo, e: DragEvent) => {
|
||||
const dragendComp = (task: TaskInfo, _e: DragEvent) => {
|
||||
WaitDragRef.value.style.display = 'none'
|
||||
ProcDragRef.value.style.display = 'none'
|
||||
if (toStage == '' || toStage === 'COMPLETED') return
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user