mirror of
https://github.com/blossom-editor/blossom
synced 2024-11-17 14:39:21 +08:00
feat: 页面样式设置
This commit is contained in:
xiaozzzi
parent
60caeb0920
commit
1554ec1841
@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<el-config-provider :size="'small'" :locale="zhCn">
|
||||
<div class="app">
|
||||
<div class="app-header">
|
||||
<AppHeader></AppHeader>
|
||||
</div>
|
||||
<div class="app-main">
|
||||
<RouterView />
|
||||
</div>
|
||||
@ -13,7 +10,6 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElConfigProvider } from 'element-plus'
|
||||
import AppHeader from './components/AppHeader.vue'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
</script>
|
||||
|
||||
@ -21,12 +17,9 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
.app {
|
||||
@include box(100%, 100%);
|
||||
overflow: hidden;
|
||||
.app-header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
@include box(100%, calc(100% - 30px));
|
||||
@include box(100%, 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,20 +32,21 @@
|
||||
</bl-row>
|
||||
</el-popover>
|
||||
<div
|
||||
v-if="!props.simple"
|
||||
:class="['iconbl', 'bl-caution-line', userStore.paramIsCorrect ? '' : 'warn-heightlight']"
|
||||
ref="ButtonRef"
|
||||
v-click-outside="onClickOutside"></div>
|
||||
|
||||
<el-tooltip content="主题配置" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
|
||||
<div class="iconbl bl-a-colorpalette-line" @click="themeStrore.show()"></div>
|
||||
<div v-if="!props.simple" class="iconbl bl-a-colorpalette-line" @click="themeStrore.show()"></div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="所有图标" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
|
||||
<div class="iconbl bl-a-radiochoose-line" @click="toRoute('/iconListIndex')"></div>
|
||||
<div v-if="!props.simple" class="iconbl bl-a-radiochoose-line" @click="toRoute('/iconListIndex')"></div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="网页收藏" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
|
||||
<div class="iconbl bl-folding-line" @click="isShowWebDrawer = !isShowWebDrawer"></div>
|
||||
<div v-if="!props.simple" class="iconbl bl-folding-line" @click="isShowWebDrawer = !isShowWebDrawer"></div>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip content="最佳窗口大小" popper-class="is-small" transition="none" effect="light" placement="top" :show-after="0" :hide-after="0">
|
||||
@ -100,6 +101,13 @@ onUnmounted(() => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
simple: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
|
||||
const tryuseComment = computed(() => {
|
||||
if (isTryuse()) {
|
||||
return `试用版本(${SYSTEM.SYS.VERSION})为最新的开发版本，包含当前正式版中没有的功能。`
|
||||
|
||||
@ -54,7 +54,7 @@ const props = defineProps({
|
||||
<style scoped lang="scss">
|
||||
.tag-root {
|
||||
@include flex(row, center, center);
|
||||
@include themeShadow(2px 2px 3px 0 #bbbbbb, 1px 2px 5px #0F0F0F);
|
||||
@include themeShadow(2px 2px 3px 0 #bbbbbb, 1px 2px 3px #0F0F0F);
|
||||
border-radius: 4px;
|
||||
padding: 1px 4px;
|
||||
margin: 3px;
|
||||
@ -72,7 +72,6 @@ const props = defineProps({
|
||||
}
|
||||
|
||||
.tag-content {
|
||||
// font-size: 10px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<AppHeader simple></AppHeader>
|
||||
</div>
|
||||
<div class="icon-list-root">
|
||||
<div class="icon-desc">
|
||||
<h2>Blossom 图标</h2>
|
||||
@ -30,14 +33,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="系统图片" name="sysimg">
|
||||
<div class="icon-container">
|
||||
<div v-for="img in imgs" class="icon-item" :key="img.icon_id">
|
||||
<img style="width: 40px; height: 40px; object-fit: contain" :src="img" />
|
||||
<div class="icon-name">{{ img.substring(img.lastIndexOf('/') + 1) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
@ -49,6 +44,7 @@ import blossomIcons from '@renderer/assets/iconfont/blossom/iconfont.json'
|
||||
import weblogIcons from '@renderer/assets/iconfont/weblogo/iconfont.json'
|
||||
import { isNull } from '@renderer/assets/utils/obj'
|
||||
import { writeText } from '@renderer/assets/utils/electron'
|
||||
import AppHeader from '@renderer/components/AppHeader.vue'
|
||||
|
||||
onMounted(() => {
|
||||
blossom.value = blossomIcons.glyphs
|
||||
@ -57,58 +53,9 @@ onMounted(() => {
|
||||
})
|
||||
})
|
||||
|
||||
// const getImg = (img: string) => {
|
||||
// return new URL(`../assets/imgs/${img}`, import.meta.url).href
|
||||
// }
|
||||
|
||||
const activeTab = ref('weblogo')
|
||||
|
||||
const blossom = shallowRef<any[]>([])
|
||||
const weblogo = shallowRef<any[]>([])
|
||||
// const imgs = shallowRef<any[]>([
|
||||
// getImg('plan/base-awesome.png'),
|
||||
// getImg('plan/base-cool.png'),
|
||||
// getImg('plan/base-learning.png'),
|
||||
// getImg('plan/cat-kiss.png'),
|
||||
// getImg('plan/cat-nice.png'),
|
||||
// getImg('plan/cat-smile.png'),
|
||||
// getImg('plan/cat.png'),
|
||||
// getImg('plan/coffee.png'),
|
||||
// getImg('plan/juice.png'),
|
||||
// getImg('plan/beer.png'),
|
||||
// // note
|
||||
// getImg('note/cd.png'),
|
||||
// getImg('note/dustbin.png'),
|
||||
// getImg('note/note.png'),
|
||||
// getImg('note/pin.png'),
|
||||
// getImg('note/plane.png'),
|
||||
// // pe
|
||||
// getImg('pe/headset.png'),
|
||||
// getImg('pe/phone.png'),
|
||||
// getImg('pe/sound.png'),
|
||||
// getImg('pe/watch.png'),
|
||||
// // plant
|
||||
// getImg('plant/02.png'),
|
||||
// getImg('plant/08.png'),
|
||||
// getImg('plant/cactus.png'),
|
||||
// // weather
|
||||
// getImg('weather/feng-s.png'),
|
||||
// getImg('weather/feng.png'),
|
||||
// getImg('weather/qing-s.png'),
|
||||
// getImg('weather/qing.png'),
|
||||
// getImg('weather/qing-moon.png'),
|
||||
// getImg('weather/wu-s.png'),
|
||||
// getImg('weather/wu.png'),
|
||||
// getImg('weather/xue-s.png'),
|
||||
// getImg('weather/xue.png'),
|
||||
// getImg('weather/yin-s.png'),
|
||||
// getImg('weather/yin.png'),
|
||||
// getImg('weather/yu-s.png'),
|
||||
// getImg('weather/yu.png'),
|
||||
// getImg('weather/zhongyu-s.png'),
|
||||
// getImg('weather/zhongyu.png')
|
||||
// ])
|
||||
|
||||
const iconSearch = ref('')
|
||||
|
||||
const filterWebLogo = computed(() => {
|
||||
@ -147,8 +94,12 @@ const copyIcon = (icon: string) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
|
||||
.icon-list-root {
|
||||
@include box(100%, 100%);
|
||||
@include box(100%, calc(100% - 30px));
|
||||
padding: 20px;
|
||||
color: var(--bl-text-color-light);
|
||||
|
||||
|
||||
@ -24,7 +24,6 @@ import IconListIndex from '@renderer/components/IconList.vue'
|
||||
import ArticleViewWindow from '@renderer/views/article/ArticleViewWindow.vue'
|
||||
import ArticleReference from '@renderer/views/article/ArticleReferenceChartGraph.vue'
|
||||
import ArticleHistory from '@renderer/views/article/ArticleHistory.vue'
|
||||
import ThemeSettingVue from '@renderer/views/index/setting/ThemeSetting.vue'
|
||||
|
||||
router.addRoute({
|
||||
path: '/',
|
||||
@ -53,4 +52,3 @@ router.addRoute({ path: '/articleViewWindow', name: 'ArticleViewWindow', compone
|
||||
router.addRoute({ path: '/iconListIndexWindow', name: 'IconListIndexWindow', component: IconListIndex, meta: { keepAlive: true } })
|
||||
router.addRoute({ path: '/articleReferenceWindow', name: 'ArticleReferenceWindow', component: ArticleReference, meta: { keepAlive: true } })
|
||||
router.addRoute({ path: '/articleHistory', name: 'ArticleHistory', component: ArticleHistory, meta: { keepAlive: true } })
|
||||
router.addRoute({ path: '/themeSetting', name: 'ThemeSettingVue', component: ThemeSettingVue, meta: { keepAlive: true } })
|
||||
|
||||
@ -32,6 +32,22 @@ export interface ViewStyle {
|
||||
isMenuUniqueOpened: boolean
|
||||
// 点击登录后自动进入首页
|
||||
isLoginToHomePage: boolean
|
||||
// 显示公开收藏等状态标识
|
||||
isShowArticleType: boolean
|
||||
// 显示文章图标
|
||||
isShowArticleIcon: boolean
|
||||
// 显示专题目录标签
|
||||
isShowArticleTocTag: boolean
|
||||
// 显示自定义标签
|
||||
isShowArticleCustomTag: boolean
|
||||
// 显示公开文件夹标签
|
||||
isShowFolderOpenTag: boolean
|
||||
// 显示左下角上传入口
|
||||
isShowAsideUpload: boolean
|
||||
// 显示左上角 LOGO
|
||||
isShowAsideLogo: boolean
|
||||
// 显示简易左侧菜单
|
||||
isShowAsideSimple: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
@ -112,7 +128,15 @@ export const useConfigStore = defineStore('configStore', {
|
||||
isGlobalShadow: false,
|
||||
isShowTryuseBtn: true,
|
||||
isMenuUniqueOpened: true,
|
||||
isLoginToHomePage: false
|
||||
isLoginToHomePage: false,
|
||||
isShowArticleType: true,
|
||||
isShowArticleIcon: true,
|
||||
isShowArticleTocTag: true,
|
||||
isShowArticleCustomTag: true,
|
||||
isShowFolderOpenTag: true,
|
||||
isShowAsideUpload: true,
|
||||
isShowAsideLogo: true,
|
||||
isShowAsideSimple: false
|
||||
},
|
||||
...Local.get(VIEW_STYLE_KEY)
|
||||
},
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
<template>
|
||||
<div class="index-root">
|
||||
<div class="index-aside">
|
||||
<div class="index-aside" :class="[viewStyle.isShowAsideSimple ? 'simple' : '']">
|
||||
<indexAside></indexAside>
|
||||
</div>
|
||||
<div class="index-main-container">
|
||||
<div class="index-main-container" :class="[viewStyle.isShowAsideSimple ? 'simple' : '']">
|
||||
<div class="app-header">
|
||||
<AppHeader></AppHeader>
|
||||
</div>
|
||||
<div class="index-main">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive :include="[includeRouter]">
|
||||
@ -18,8 +21,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from 'vue'
|
||||
import router from '@renderer/router'
|
||||
import indexAside from './index/IndexAside.vue'
|
||||
import { isElectron } from '@renderer/assets/utils/util'
|
||||
import indexAside from './index/IndexAside.vue'
|
||||
import AppHeader from '@renderer/components/AppHeader.vue'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
|
||||
const { viewStyle } = useConfigStore()
|
||||
|
||||
onMounted(() => {
|
||||
console.log(`blossom => 是否 Electron 容器：${isElectron()}`)
|
||||
@ -56,8 +63,12 @@ $zindex-header: 2001;
|
||||
@include box(calc(100% - 62px), 100%);
|
||||
position: relative;
|
||||
|
||||
.app-header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
|
||||
.index-main {
|
||||
@include box(100%, 100%);
|
||||
@include box(100%, calc(100% - 30px));
|
||||
}
|
||||
|
||||
.index-header {
|
||||
@ -73,5 +84,13 @@ $zindex-header: 2001;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-aside.simple {
|
||||
@include box(42px, 100%);
|
||||
}
|
||||
|
||||
.index-main-container.simple {
|
||||
@include box(calc(100% - 43px), 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<AppHeader simple></AppHeader>
|
||||
</div>
|
||||
<div class="article-history-root">
|
||||
<div class="left bl-preview-toc-block">
|
||||
<div class="desc">
|
||||
<div class="toc-subtitle">《{{ article?.name }}》</div>
|
||||
<div class="toc-subtitle">
|
||||
<span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 |
|
||||
<span class="iconbl bl-read-line"></span> {{ article?.uv }} |
|
||||
<span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article?.uv }} |
|
||||
<span class="iconbl bl-like-line"></span> {{ article?.likes }}
|
||||
</div>
|
||||
<div class="toc-subtitle">
|
||||
<span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}
|
||||
</div>
|
||||
<div class="toc-subtitle">
|
||||
<span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}
|
||||
</div>
|
||||
<div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}</div>
|
||||
<div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}</div>
|
||||
</div>
|
||||
<el-divider style="margin: 10px 0;"></el-divider>
|
||||
<el-divider style="margin: 10px 0"></el-divider>
|
||||
<div class="history-list">
|
||||
<div v-for="log in historyList" class="history-item">
|
||||
<div class="dt">{{ log.dt }}</div>
|
||||
@ -33,13 +31,12 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useRoute } from 'vue-router'
|
||||
import { storeToRefs } from "pinia"
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
import { articleLogsApi, articleLogContentApi, articleInfoApi } from '@renderer/api/blossom'
|
||||
import { CmWrapper } from './scripts/codemirror'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
|
||||
import AppHeader from '@renderer/components/AppHeader.vue'
|
||||
|
||||
const configStore = useConfigStore()
|
||||
const { editorStyle } = storeToRefs(configStore)
|
||||
@ -52,23 +49,32 @@ const HistoryEditorRef = ref()
|
||||
let cmw: CmWrapper
|
||||
|
||||
const initEditor = (_doc?: string) => {
|
||||
cmw = new CmWrapper(CmWrapper.newEditor(CmWrapper.newState(() => { }, () => { }, () => { }), HistoryEditorRef.value))
|
||||
cmw = new CmWrapper(
|
||||
CmWrapper.newEditor(
|
||||
CmWrapper.newState(
|
||||
() => {},
|
||||
() => {},
|
||||
() => {}
|
||||
),
|
||||
HistoryEditorRef.value
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const getLogs = (articleId: string | number) => {
|
||||
articleInfoApi({ id: articleId, showToc: false, showMarkdown: true, showHtml: false }).then(resp => {
|
||||
articleInfoApi({ id: articleId, showToc: false, showMarkdown: true, showHtml: false }).then((resp) => {
|
||||
article.value = resp.data
|
||||
})
|
||||
articleLogsApi({ articleId: articleId }).then(resp => {
|
||||
articleLogsApi({ articleId: articleId }).then((resp) => {
|
||||
historyList.value = resp.data
|
||||
})
|
||||
}
|
||||
|
||||
const getLogContent = (id: number, dt: string) => {
|
||||
historyDt.value = dt
|
||||
articleLogContentApi({ id: id }).then(resp => {
|
||||
articleLogContentApi({ id: id }).then((resp) => {
|
||||
let maxLen = cmw.getDocLength()
|
||||
cmw.insert(0, maxLen, resp.data, 0, 0);
|
||||
cmw.insert(0, maxLen, resp.data, 0, 0)
|
||||
})
|
||||
}
|
||||
|
||||
@ -78,12 +84,15 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang=scss>
|
||||
<style scoped lang="scss">
|
||||
@import './styles/bl-preview-toc.scss';
|
||||
@import './styles/article-index.scss';
|
||||
|
||||
.header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
.article-history-root {
|
||||
@include box(100%, 100%);
|
||||
@include box(100%, calc(100% - 30px));
|
||||
@include flex(row, flex-start, center);
|
||||
padding: 20px;
|
||||
|
||||
@ -106,7 +115,7 @@ onMounted(() => {
|
||||
margin-bottom: 10px;
|
||||
padding: 3px 5px;
|
||||
font-size: 13px;
|
||||
color: #ABABAB;
|
||||
color: #ababab;
|
||||
border-radius: 5px;
|
||||
transition: box-shadow 0.1s;
|
||||
|
||||
@ -166,4 +175,4 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<AppHeader simple></AppHeader>
|
||||
</div>
|
||||
<div class="article-reference-root">
|
||||
<div class="setting">
|
||||
<bl-row>
|
||||
@ -49,6 +52,8 @@ import { GraphChart } from 'echarts/charts'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { isNotBlank, isNotNull } from '@renderer/assets/utils/obj'
|
||||
import { getPrimaryColor } from '@renderer/scripts/global-theme'
|
||||
import AppHeader from '@renderer/components/AppHeader.vue'
|
||||
|
||||
echarts.use([TitleComponent, TooltipComponent, LegendComponent, GraphChart, CanvasRenderer])
|
||||
|
||||
const isDark = useDark()
|
||||
@ -329,8 +334,11 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
.article-reference-root {
|
||||
@include box(100%, 100%);
|
||||
@include box(100%, calc(100% - 30px));
|
||||
position: relative;
|
||||
|
||||
.setting {
|
||||
|
||||
@ -6,9 +6,14 @@
|
||||
<div class="doc-name">
|
||||
<img
|
||||
class="menu-icon-img"
|
||||
v-if="isNotBlank(props.trees.icon) && (props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https')) && !props.trees?.updn"
|
||||
v-if="
|
||||
viewStyle.isShowArticleIcon &&
|
||||
isNotBlank(props.trees.icon) &&
|
||||
(props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https')) &&
|
||||
!props.trees?.updn
|
||||
"
|
||||
:src="props.trees.icon" />
|
||||
<svg v-else-if="isNotBlank(props.trees.icon) && !props.trees?.updn" class="icon menu-icon" aria-hidden="true">
|
||||
<svg v-else-if="viewStyle.isShowArticleIcon && isNotBlank(props.trees.icon) && !props.trees?.updn" class="icon menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="'#' + props.trees.icon"></use>
|
||||
</svg>
|
||||
<el-input
|
||||
@ -21,12 +26,19 @@
|
||||
<div v-else class="name-wrapper" :style="nameWrapperStyle">
|
||||
{{ props.trees.n }}
|
||||
</div>
|
||||
<bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">{{ tag.content }}</bl-tag>
|
||||
<bl-tag v-for="tag in tags" style="margin-top: 5px" :bg-color="tag.bgColor" :icon="tag.icon">
|
||||
{{ tag.content }}
|
||||
</bl-tag>
|
||||
</div>
|
||||
<div v-if="level >= 2" class="folder-level-line" style="left: -20px"></div>
|
||||
<div v-if="level >= 3" class="folder-level-line" style="left: -30px"></div>
|
||||
<div v-if="level >= 4" class="folder-level-line" style="left: -40px"></div>
|
||||
<div v-for="(line, index) in tagLins" :key="line" :class="[line]" :style="{ left: -1 * (index + 1.5) * 4 + 'px' }"></div>
|
||||
<div
|
||||
v-if="viewStyle.isShowArticleType"
|
||||
v-for="(line, index) in tagLins"
|
||||
:key="line"
|
||||
:class="[line]"
|
||||
:style="{ left: -1 * (index + 1.5) * 4 + 'px' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -72,13 +84,18 @@ const tags = computed(() => {
|
||||
if (tag.toLocaleLowerCase() === 'subject') {
|
||||
icons.unshift({ content: '专题', bgColor: 'var(--bl-tag-color-subject)', icon: 'bl-a-lowerrightpage-line' })
|
||||
} else if (tag.toLocaleLowerCase() === 'toc') {
|
||||
if (!viewStyle.isShowArticleTocTag) {
|
||||
return
|
||||
}
|
||||
icons.push({ content: 'TOC', bgColor: 'var(--bl-tag-color-toc)' })
|
||||
} else {
|
||||
} else if (viewStyle.isShowArticleCustomTag) {
|
||||
icons.push({ content: tag })
|
||||
}
|
||||
})
|
||||
if (props.trees.o === 1 && props.trees.ty != 3) {
|
||||
icons.unshift({ bgColor: 'var(--bl-tag-color-open)', icon: 'bl-cloud-line' })
|
||||
if (viewStyle.isShowFolderOpenTag) {
|
||||
icons.unshift({ bgColor: 'var(--bl-tag-color-open)', icon: 'bl-cloud-line' })
|
||||
}
|
||||
}
|
||||
return icons
|
||||
})
|
||||
|
||||
@ -417,7 +417,6 @@ defineExpose({ handleShowBackupDialog })
|
||||
}
|
||||
|
||||
.bl-correlation-line {
|
||||
color: var(--el-color-primary) !important;
|
||||
font-size: 40px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<AppHeader simple></AppHeader>
|
||||
</div>
|
||||
<div class="article-view-window-root">
|
||||
<!-- the toc -->
|
||||
<div class="bl-preview-toc-block">
|
||||
@ -31,6 +34,7 @@ import { articleInfoApi } from '@renderer/api/blossom'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
import { parseTocAsync } from './scripts/article'
|
||||
import type { Toc } from './scripts/article'
|
||||
import AppHeader from '@renderer/components/AppHeader.vue'
|
||||
|
||||
const configStore = useConfigStore()
|
||||
const { editorStyle } = storeToRefs(configStore)
|
||||
@ -71,8 +75,12 @@ onMounted(() => {
|
||||
@import './styles/bl-preview-toc.scss';
|
||||
@import './styles/article-backtop.scss';
|
||||
|
||||
.header {
|
||||
@include box(100%, 30px);
|
||||
}
|
||||
|
||||
.article-view-window-root {
|
||||
@include box(100%, 100%);
|
||||
@include box(100%, calc(100% - 30px));
|
||||
@include flex(row, center, center);
|
||||
|
||||
.preview {
|
||||
|
||||
@ -1,7 +1,22 @@
|
||||
<template>
|
||||
<div class="index-setting-root">
|
||||
<el-switch class="setting-switch" inline-prompt size="large" v-model="isDark" :active-icon="Moon" :inactive-icon="Sunny" @change="changeTheme" />
|
||||
<el-button-group>
|
||||
<div :class="['index-setting-root', viewStyle.isShowAsideSimple ? 'simple' : '']">
|
||||
<el-switch
|
||||
:class="['setting-switch', viewStyle.isShowAsideSimple ? 'simple' : '']"
|
||||
inline-prompt
|
||||
:size="viewStyle.isShowAsideSimple ? 'default' : 'large'"
|
||||
v-model="isDark"
|
||||
:active-icon="Moon"
|
||||
:inactive-icon="Sunny"
|
||||
@change="changeTheme" />
|
||||
<div v-if="viewStyle.isShowAsideSimple" class="button-group-simple">
|
||||
<el-button type="primary" text @click="handlePrintScreenUpload()">
|
||||
<el-icon :size="18"><Crop /></el-icon>
|
||||
</el-button>
|
||||
<el-button type="primary" text @click="toSettingTab" style="margin: 0; margin-top: 3px">
|
||||
<el-icon :size="18"><Setting /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button-group v-else>
|
||||
<el-button class="setting-button" type="primary" :icon="Setting" @click="toSettingTab" />
|
||||
<el-button class="setting-button" type="primary" :icon="Crop" @click="handlePrintScreenUpload()" />
|
||||
</el-button-group>
|
||||
@ -71,6 +86,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
import { useUserStore } from '@renderer/stores/user'
|
||||
import { toLogin, toSetting } from '@renderer/router'
|
||||
import { Sunny, Moon, Setting, Crop } from '@element-plus/icons-vue'
|
||||
@ -84,6 +100,7 @@ import { isDark, changeTheme } from '@renderer/scripts/global-theme'
|
||||
import Notify from '@renderer/scripts/notify'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const { viewStyle } = useConfigStore()
|
||||
|
||||
onMounted(() => {
|
||||
printscreenAfter()
|
||||
@ -252,6 +269,26 @@ const printscreenUpload = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-setting-root.simple {
|
||||
@include flex(column, flex-end, center);
|
||||
@include box(100%, 145px);
|
||||
|
||||
.setting-switch.simple {
|
||||
transform: rotate(90deg);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.button-group-simple {
|
||||
@include flex(column, flex-end, center);
|
||||
padding: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.el-button--small {
|
||||
padding: 15px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<template>
|
||||
<div class="index-user-root">
|
||||
<img v-if="userinfo.avatar != ''" class="avatar-img" :src="userinfo.avatar" />
|
||||
<img v-else class="avatar-img" src="@renderer/assets/imgs/default_user_avatar.jpg" />
|
||||
<img
|
||||
v-if="userStore.userinfo.avatar != ''"
|
||||
:class="['avatar-img', viewStyle.isShowAsideSimple ? 'simple' : '']"
|
||||
:src="userStore.userinfo.avatar" />
|
||||
<img v-else :class="['avatar-img', viewStyle.isShowAsideSimple ? 'simple' : '']" src="@renderer/assets/imgs/default_user_avatar.jpg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useUserStore } from '@renderer/stores/user'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
const userStore = useUserStore()
|
||||
const { userinfo } = storeToRefs(userStore)
|
||||
const { viewStyle } = useConfigStore()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -18,11 +21,6 @@ const { userinfo } = storeToRefs(userStore)
|
||||
@include box(100%, 60px);
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--el-color-primary-light-9);
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
@include box(50px, 50px);
|
||||
@ -31,5 +29,9 @@ const { userinfo } = storeToRefs(userStore)
|
||||
@include themeBrightness();
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-img.simple {
|
||||
@include box(30px, 30px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,33 @@
|
||||
<template>
|
||||
<div class="index-aside-root">
|
||||
<div class="item-logo">
|
||||
<div class="item-logo" v-if="!viewStyle.isShowAsideSimple && viewStyle.isShowAsideLogo">
|
||||
<logo :name="true"></logo>
|
||||
</div>
|
||||
<div :class="['aside-item-container', viewStyle.isGlobalShadow ? 'aside-item-container-heavy' : 'aside-item-container-light']">
|
||||
<div
|
||||
:class="[
|
||||
viewStyle.isShowAsideSimple ? 'aside-item-container-simple' : 'aside-item-container',
|
||||
viewStyle.isGlobalShadow ? 'aside-item-container-heavy' : 'aside-item-container-light',
|
||||
viewStyle.isShowAsideLogo ? '' : 'no-logo'
|
||||
]">
|
||||
<!-- 模块菜单 -->
|
||||
<div class="aside-item item-menu-container">
|
||||
<div class="aside-item item-user top-user" v-if="viewStyle.isShowAsideSimple || !viewStyle.isShowAsideLogo">
|
||||
<user></user>
|
||||
</div>
|
||||
<div v-for="menu in menus" :key="menu.name" :class="['item-menu iconbl', menu.icon, isActive(menu.path)]" @click="toRoute(menu)">
|
||||
<span>{{ menu.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aside-item item-user">
|
||||
<user></user>
|
||||
</div>
|
||||
<div class="aside-item item-upload">
|
||||
<upload></upload>
|
||||
</div>
|
||||
<div class="aside-item item-setting">
|
||||
<setting></setting>
|
||||
<div>
|
||||
<div class="aside-item item-user" v-if="!viewStyle.isShowAsideSimple && viewStyle.isShowAsideLogo">
|
||||
<user></user>
|
||||
</div>
|
||||
<div class="aside-item item-upload" v-if="!viewStyle.isShowAsideSimple && viewStyle.isShowAsideUpload">
|
||||
<upload></upload>
|
||||
</div>
|
||||
<div class="aside-item item-setting">
|
||||
<setting></setting>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,36 +115,31 @@ const isLogin = () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$height-logo: 85px;
|
||||
$height-upload: 100px;
|
||||
$height-user: 65px;
|
||||
$height-setting: 68px;
|
||||
$height-menu: calc(100% - #{$height-upload} - #{$height-user} - #{$height-setting});
|
||||
|
||||
.index-aside-root {
|
||||
@include box(100%, 100%);
|
||||
@include flex(column, flex-start, center);
|
||||
@include flex(column, flex-end, center);
|
||||
|
||||
.item-logo {
|
||||
@include box(100%, $height-logo);
|
||||
@include box(100%, 85px);
|
||||
background-color: var(--bl-html-color);
|
||||
}
|
||||
|
||||
.aside-item-container {
|
||||
@include box(100%, calc(100% - #{$height-logo}));
|
||||
@include box(100%, calc(100% - 95px));
|
||||
@include flex(column, space-between, center);
|
||||
border-top-right-radius: 10px;
|
||||
background-color: var(--bl-bg-color);
|
||||
|
||||
.aside-item {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--bl-bg-color);
|
||||
}
|
||||
|
||||
.item-menu-container {
|
||||
@include box(100%, $height-menu);
|
||||
@include box(100%, calc(100% - 100px - 65px - 68px));
|
||||
@include flex(column, flex-start, center);
|
||||
@include themeColor(#909399, #a3a6ad);
|
||||
padding-top: 5px;
|
||||
padding-top: 7px;
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
.is-active {
|
||||
@ -159,7 +164,9 @@ $height-menu: calc(100% - #{$height-upload} - #{$height-user} - #{$height-settin
|
||||
padding: 5px 0;
|
||||
margin: 0 1px 5px 0;
|
||||
border-radius: 10px;
|
||||
transition: 0.3s;
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
@ -179,27 +186,95 @@ $height-menu: calc(100% - #{$height-upload} - #{$height-user} - #{$height-settin
|
||||
}
|
||||
|
||||
.item-user {
|
||||
@include box(100%, $height-user);
|
||||
@include box(100%, 65px);
|
||||
}
|
||||
|
||||
.top-user {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item-upload {
|
||||
@include box(100%, $height-upload);
|
||||
@include box(100%, 100px);
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
}
|
||||
|
||||
.item-setting {
|
||||
@include box(100%, $height-setting);
|
||||
@include box(100%, 68px);
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-item-container.no-logo {
|
||||
@include box(100%, 100%);
|
||||
border-top-right-radius: 0px;
|
||||
}
|
||||
|
||||
.aside-item-container-heavy {
|
||||
@include themeShadow(2px 3px 10px rgba(49, 49, 49, 0.3), 2px 2px 7px rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.aside-item-container-light {
|
||||
@include themeShadow(2px 0 6px rgba(49, 49, 49, 0.3), 2px 2px 5px rgb(0, 0, 0));
|
||||
@include themeShadow(2px 0 6px rgba(49, 49, 49, 0.3), 2px 2px 3px rgb(21, 21, 21));
|
||||
}
|
||||
|
||||
.aside-item-container-simple {
|
||||
@include box(100%, 100%);
|
||||
@include flex(column, space-between, center);
|
||||
background-color: var(--bl-bg-color);
|
||||
box-shadow: none !important;
|
||||
border-right: 1px solid var(--el-border-color);
|
||||
|
||||
.aside-item {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item-menu-container {
|
||||
@include box(100%, calc(100% - 65px - 68px));
|
||||
@include flex(column, flex-start, center);
|
||||
@include themeColor(#909399, #a3a6ad);
|
||||
padding-top: 5px;
|
||||
border-top-right-radius: 10px;
|
||||
|
||||
.is-active {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.item-menu {
|
||||
@include flex(column, center, center);
|
||||
font-size: 22px;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
.top-user {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.bl-a-home1-line,
|
||||
.bl-a-texteditorhighlightcolor-line {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.item-user {
|
||||
@include box(100%, 65px);
|
||||
}
|
||||
|
||||
.item-upload {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.item-setting {
|
||||
@include box(100%, 68px);
|
||||
border-top: 1px var(--el-border-color) var(--el-border-style);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-divider) {
|
||||
|
||||
@ -64,7 +64,28 @@
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示试用按钮</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowTryuseBtn" size="default" @change="changeSubjectStype" />
|
||||
<el-switch v-model="viewStyle.isShowTryuseBtn" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示左上角 LOGO</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowAsideLogo" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示左下角上传入口</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowAsideUpload" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">简约的左侧菜单</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowAsideSimple" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row v-if="isElectron()" class="prop-row" just="space-between">
|
||||
@ -123,7 +144,42 @@
|
||||
<div class="prop">
|
||||
<div class="prop-name">开启专题特殊样式</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowSubjectStyle" size="default" @change="changeSubjectStype" />
|
||||
<el-switch v-model="viewStyle.isShowSubjectStyle" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示专题目录标签</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowArticleTocTag" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示公开文件夹标签</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowFolderOpenTag" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示自定义标签</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowArticleCustomTag" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop" style="width: 200px">
|
||||
<div class="prop-name">显示文章名前的竖型状态标识</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowArticleType" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
|
||||
<bl-row class="prop-row" just="space-between">
|
||||
<div class="prop">
|
||||
<div class="prop-name">显示文章图标</div>
|
||||
</div>
|
||||
<el-switch v-model="viewStyle.isShowArticleIcon" size="default" @change="changeViewStype" />
|
||||
</bl-row>
|
||||
</el-tab-pane>
|
||||
<!--
|
||||
@ -250,7 +306,7 @@ const changeGlobalShadow = (open: boolean) => {
|
||||
config.setViewStyle(viewStyle)
|
||||
}
|
||||
|
||||
const changeSubjectStype = () => {
|
||||
const changeViewStype = () => {
|
||||
config.setViewStyle(viewStyle)
|
||||
}
|
||||
|
||||
|
||||
@ -6,9 +6,14 @@
|
||||
<span class="doc-name">
|
||||
<img
|
||||
class="menu-icon-img"
|
||||
v-if="isNotBlank(props.trees.icon) && (props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https')) && !props.trees.updn"
|
||||
v-if="
|
||||
viewStyle.isShowArticleIcon &&
|
||||
isNotBlank(props.trees.icon) &&
|
||||
(props.trees.icon.startsWith('http') || props.trees.icon.startsWith('https')) &&
|
||||
!props.trees.updn
|
||||
"
|
||||
:src="props.trees.icon" />
|
||||
<svg v-else-if="isNotBlank(props.trees.icon) && !props.trees.updn" class="icon menu-icon" aria-hidden="true">
|
||||
<svg v-else-if="viewStyle.isShowArticleIcon && isNotBlank(props.trees.icon) && !props.trees.updn" class="icon menu-icon" aria-hidden="true">
|
||||
<use :xlink:href="'#' + props.trees.icon"></use>
|
||||
</svg>
|
||||
|
||||
@ -22,7 +27,9 @@
|
||||
<div v-else class="name-wrapper" :style="nameWrapperStyle">
|
||||
{{ props.trees.n }}
|
||||
</div>
|
||||
<bl-tag v-for="tag in tags" :bg-color="tag.bgColor" style="margin-top: 5px" :icon="tag.icon">{{ tag.content }}</bl-tag>
|
||||
<bl-tag v-for="tag in tags" :bg-color="tag.bgColor" style="margin-top: 5px" :icon="tag.icon">
|
||||
{{ tag.content }}
|
||||
</bl-tag>
|
||||
</span>
|
||||
<div v-if="level >= 2" class="folder-level-line" style="left: -20px"></div>
|
||||
<div v-if="level >= 3" class="folder-level-line" style="left: -30px"></div>
|
||||
@ -35,6 +42,9 @@ import type { PropType } from 'vue'
|
||||
import { isNotBlank } from '@renderer/assets/utils/obj'
|
||||
import { computedDocTitleColor } from '@renderer/views/doc/doc'
|
||||
import { folderUpdNameApi } from '@renderer/api/blossom'
|
||||
import { useConfigStore } from '@renderer/stores/config'
|
||||
|
||||
const { viewStyle } = useConfigStore()
|
||||
|
||||
//#region ----------------------------------------< 标题信息 >--------------------------------------
|
||||
|
||||
@ -61,14 +71,19 @@ const tags = computed(() => {
|
||||
props.trees.t?.forEach((tag) => {
|
||||
if (tag === 'subject') {
|
||||
icons.unshift({ content: '专题', bgColor: 'var(--bl-tag-color-subject)', icon: 'bl-a-lowerrightpage-line' })
|
||||
} else if (tag === 'toc') {
|
||||
} else if (tag.toLocaleLowerCase() === 'toc') {
|
||||
if (!viewStyle.isShowArticleTocTag) {
|
||||
return
|
||||
}
|
||||
icons.push({ content: 'TOC', bgColor: 'var(--bl-tag-color-toc)' })
|
||||
} else {
|
||||
} else if (viewStyle.isShowArticleCustomTag) {
|
||||
icons.push({ content: tag })
|
||||
}
|
||||
})
|
||||
if (props.trees.o === 1 && props.trees.ty != 3) {
|
||||
icons.unshift({ bgColor: 'var(--bl-tag-color-open)', icon: 'bl-cloud-line' })
|
||||
if (viewStyle.isShowFolderOpenTag) {
|
||||
icons.unshift({ bgColor: 'var(--bl-tag-color-open)', icon: 'bl-cloud-line' })
|
||||
}
|
||||
}
|
||||
return icons
|
||||
})
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑器内容
|
||||
.picture-container {
|
||||
@include box(calc(100% - 250px), 100%);
|
||||
border-left: 1px solid var(--el-border-color);
|
||||
@ -72,7 +71,7 @@
|
||||
// 图片列表的控制按钮
|
||||
.picutre-workbench {
|
||||
@include flex(row, space-between, center);
|
||||
@include themeShadow(0 3px 8px #d3d3d3, 0 2px 8px 1px #000);
|
||||
@include themeShadow(0 2px 6px #d3d3d3, 0 1px 6px 1px #0e0e0e);
|
||||
width: calc(100% - 20px);
|
||||
margin: 5px 10px 10px 10px;
|
||||
padding: 0px 10px;
|
||||
@ -148,7 +147,7 @@
|
||||
overflow-y: scroll;
|
||||
|
||||
.picture-card {
|
||||
@include themeShadow(3px 3px 10px 1px #d3d3d3, 3px 3px 10px 1px #000);
|
||||
@include themeShadow(3px 3px 6px 1px #d3d3d3, 1px 3px 6px 1px #0e0e0e);
|
||||
@include flex(column, flex-start, center);
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
@ -211,6 +210,7 @@
|
||||
|
||||
img {
|
||||
@include box(100%, 100%);
|
||||
@include themeBrightness();
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user