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

首页样式优化

Browse Source
This commit is contained in:
xiaozzzi 2023-10-04 17:20:23 +08:00
parent 7127145dd9
commit 9cca65a6e4
5 changed files with 292 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
blossom-editor/src/renderer/components.d.ts vendored
View File

@ -41,6 +41,7 @@ declare module 'vue' {
ElProgress: typeof import('element-plus/es')['ElProgress']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']

229
blossom-editor/src/renderer/src/views/home/ArticleStars.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="article-stars-root">
<el-scrollbar :onresize="false">
<!-- <div class="article-stars-root"> -->
<div v-if="isEmpty(articles)" class="placeholder">
无收藏的文章
</div>
@ -17,7 +18,9 @@
</div>
</div>
</div>
</div>
<div style="width: 100%;height: 10px;"></div>
<!-- </div> -->
</el-scrollbar>
</template>
<!--
@ -61,123 +64,143 @@ defineExpose({ reload })
</script>
<style scoped lang="scss">
.article-stars-root {
@include box(100%, 100%);
@include flex(row, flex-start, flex-start);
flex-wrap: wrap;
align-content: flex-start;
overflow: auto;
overflow-y: overlay;
.el-scrollbar {
--el-scrollbar-opacity: 1;
--el-scrollbar-hover-opacity: 1;
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
.placeholder {
padding: 20px 0 0 20px;
color: var(--bl-text-color-light);
:deep(.el-scrollbar__bar) {
width: 5px;
right: 0px;
}
.star-item {
@include box(210px, 70px, 210px, 210px);
position: relative;
margin: 10px 15px;
filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
:deep(.el-scrollbar__view) {
@include box(100%, 100%);
@include flex(row, flex-start, flex-start);
flex-wrap: wrap;
align-content: flex-start;
}
}
[class="dark"] & {
filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
// .article-stars-root {
// @include box(100%, 100%);
// @include flex(row, flex-start, flex-start);
// flex-wrap: wrap;
// align-content: flex-start;
// overflow: auto;
// overflow-y: overlay;
// }
.placeholder {
padding: 20px 0 0 20px;
color: var(--bl-text-color-light);
}
.star-item {
@include box(210px, 70px, 210px, 210px);
position: relative;
margin: 10px 15px;
filter: drop-shadow(2px 2px 2px rgb(180, 180, 180));
[class="dark"] & {
filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
}
&:hover {
.counterfoil {
transform: translateX(-5px);
}
.content {
transform: translateX(5px);
}
}
.counterfoil,
.content {
@include flex(row, center, center);
@include absolute(0);
color: #fff;
transition: 0.3s;
cursor: pointer;
z-index: 2;
&::before {
@include box(100%, 100%);
@include absolute('', 0, '', 0);
content: '';
background: var(--el-color-primary-light-3);
border-radius: 10px;
-webkit-mask-composite: source-in;
mask-composite: source-in;
z-index: -1;
}
}
// 左侧存根
.counterfoil {
@include box(53px, 100%);
padding: 5px;
&::before {
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
}
&:hover {
.counterfoil {
transform: translateX(-5px);
}
.content {
transform: translateX(5px);
}
transform: rotate(-10deg);
transform-origin: 100% 100%;
}
.counterfoil,
.content {
@include flex(row, center, center);
@include absolute(0);
color: #fff;
transition: 0.3s;
cursor: pointer;
z-index: 2;
&::before {
@include box(100%, 100%);
@include absolute('', 0, '', 0);
content: '';
background: var(--el-color-primary-light-3);
border-radius: 10px;
-webkit-mask-composite: source-in;
mask-composite: source-in;
z-index: -1;
}
.iconbl {
font-size: 30px;
}
// 左侧存根
.counterfoil {
@include box(53px, 100%);
padding: 5px;
&::before {
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) 43px -10px / 120%,
radial-gradient(circle at 1px 1px, transparent 2px, #fff 0) 51px 0px / 110% 8%;
}
&:hover {
transform: rotate(-10deg);
transform-origin: 100% 100%;
}
.iconbl {
font-size: 30px;
}
.bl-shuxingtiaoma {
@include absolute('', '', -3px, 14px);
font-size: 22px;
transform: rotate(90deg)
}
.bl-tiaoxingma {
position: absolute;
bottom: -15px;
left: 8px;
font-size: 40px;
}
.open-barcode {
@include absolute('', '', 0px, 17px);
font-size: 15px;
}
.bl-shuxingtiaoma {
@include absolute('', '', -3px, 14px);
font-size: 22px;
transform: rotate(90deg)
}
//
.content {
@include box(157px, 100%);
right: 0;
padding: 5px 5px 5px 10px;
font-size: 12px;
.bl-tiaoxingma {
position: absolute;
bottom: -15px;
left: 8px;
font-size: 40px;
}
&::before {
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
// radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
}
.open-barcode {
@include absolute('', '', 0px, 17px);
font-size: 15px;
}
}
.name {
@include box(100%, calc(100% - 12px));
}
//
.content {
@include box(157px, 100%);
right: 0;
padding: 5px 5px 5px 10px;
font-size: 12px;
.infos {
@include box(140px, 12px);
@include flex(row, space-between, center);
@include font(10px, 300);
@include absolute('', '', 2px, 12px);
border-top: 1px dashed #f1f1f1;
padding-top: 4px;
}
&::before {
-webkit-mask: radial-gradient(circle at 10px 10px, transparent 10px, #000 0) -10px -10px / 120%,
// radial-gradient(circle at 10px 10px, transparent 10px, #fff 0) -10px -10px,
radial-gradient(circle at 1px 1px, transparent 2px, #000 0) -1px 0px / 110% 8%;
}
.name {
@include box(100%, calc(100% - 12px));
}
.infos {
@include box(140px, 12px);
@include flex(row, space-between, center);
@include font(10px, 300);
@include absolute('', '', 2px, 12px);
border-top: 1px dashed #f1f1f1;
padding-top: 4px;
}
}
}

197
blossom-editor/src/renderer/src/views/home/ArticleSubjects.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="home-subject-root">
<el-scrollbar>
<div v-if="isEmpty(subjects)" class="placeholder">
无专题内容
</div>
@ -35,9 +35,10 @@
<span class="iconbl bl-a-clock3-line"></span>{{ subject.subjectUpdTime }}
</div>
</bl-row>
</div>
</div>
<div style="width: 100%;height: 5px;"></div>
</el-scrollbar>
</template>
<script setup lang="ts">
@ -77,107 +78,125 @@ const toToc = (articleId: number) => {
</script>
<style scoped lang="scss">
.home-subject-root {
// @include box(900px, 100%);
@include box(100%, 100%);
@include flex(row, flex-start, flex-start);
flex-wrap: wrap;
align-content: flex-start;
overflow: auto;
overflow-y: overlay;
.el-scrollbar {
--el-scrollbar-opacity: 1;
--el-scrollbar-hover-opacity: 1;
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
.placeholder {
padding: 20px 0 0 20px;
color: var(--bl-text-color-light);
:deep(.el-scrollbar__bar) {
width: 5px;
right: 0px;
}
$width-item: 210px;
:deep(.el-scrollbar__view) {
@include box(100%, 100%);
@include flex(row, flex-start, flex-start);
flex-wrap: wrap;
align-content: flex-start;
}
}
.subject-item {
@include flex(column, flex-start, flex-start);
@include box($width-item, 90px, $width-item, $width-item);
@include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
@include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
border-radius: 5px;
margin: 15px;
transition: 0.3s;
position: relative;
overflow: hidden;
cursor: pointer;
z-index: 1;
// .home-subject-root {
// @include box(100%, 100%);
// @include flex(row, flex-start, flex-start);
// flex-wrap: wrap;
// align-content: flex-start;
// overflow: auto;
// overflow-y: overlay;
// }
&:hover {
transform: translateY(-5px);
@include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
.placeholder {
padding: 20px 0 0 20px;
color: var(--bl-text-color-light);
}
.seal {
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
transform: translateY(-30px);
@include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
$width-item: 210px;
[class="dark"] & {
text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
}
}
.subject-item {
@include flex(column, flex-start, flex-start);
@include box($width-item, 90px, $width-item, $width-item);
@include themeShadow(3px 3px 5px 1px rgba(88, 88, 88, 0.3), 3px 3px 5px 1px rgba(0, 0, 0, 1));
@include themeBg(linear-gradient(155deg, #ffffff00 0%, #F0F0F0 60%, var(--bl-subject-color1) 100%),
linear-gradient(155deg, var(--bl-html-color) 0%, var(--el-color-primary-light-9) 60%, var(--bl-subject-color1) 100%));
border-radius: 5px;
margin: 15px;
transition: 0.3s;
position: relative;
overflow: hidden;
cursor: pointer;
z-index: 1;
.inner {
opacity: 1;
}
}
.progress {
@include box($width-item, 2px);
@include absolute(0, '', '', 0);
z-index: 3;
}
&:hover {
transform: translateY(-5px);
@include themeShadow(3px 3px 5px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
.seal {
@include flex(row, space-between, center);
@include box($width-item, 40px);
@include font(14px, 500);
@include themeColor(#636363, #CDCDCD);
@include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
padding: 5px 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
text-shadow: 2px 2px 5px rgb(54, 54, 54);
backdrop-filter: blur(5px);
transition: 0.3s;
z-index: 2;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
transform: translateY(-30px);
@include themeShadow(0 3px 15px 1px rgb(116, 116, 116), 3px 3px 5px 1px rgba(0, 0, 0, 1));
[class="dark"] & {
text-shadow: 5px 5px 15px #000, -3px -3px 10px rgba(255, 255, 255, .5);
}
}
.inner {
@include box(calc(#{$width-item} - 30px), 25px);
@include absolute(1px, '', '', 15px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
@include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
transition: 1.5s;
opacity: 0;
opacity: 1;
}
}
.progress {
@include box($width-item, 2px);
@include absolute(0, '', '', 0);
z-index: 3;
}
.seal {
@include flex(row, space-between, center);
@include box($width-item, 40px);
@include font(14px, 500);
@include themeColor(#636363, #CDCDCD);
@include themeShadow(0 3px 10px rgb(144, 144, 144), 0 3px 5px rgb(37, 37, 37));
padding: 5px 10px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
text-shadow: 2px 2px 5px rgb(54, 54, 54);
backdrop-filter: blur(5px);
transition: 0.3s;
z-index: 2;
}
.inner {
@include box(calc(#{$width-item} - 30px), 25px);
@include absolute(1px, '', '', 15px);
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
@include themeShadow(inset 0 3px 10px rgb(84, 84, 84), inset 0 3px 10px rgb(0, 0, 0));
transition: 1.5s;
opacity: 0;
}
.subject-icon {
@include box(55px, 55px);
@include absolute('', 2px, 8px, '');
@include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
}
.infos {
@include box(100%, 25px);
@include font(11px, 300);
@include themeColor(#595959, #8D8D8D);
padding: 5px 10px;
.iconbl {
font-size: 12px;
margin-right: 5px;
transition: 0.3s;
}
.subject-icon {
@include box(55px, 55px);
@include absolute('', 2px, 8px, '');
@include themeFilter(drop-shadow(0 0 3px rgb(62, 62, 62)), drop-shadow(0 0 3px #000000));
}
.infos {
@include box(100%, 25px);
@include font(11px, 300);
@include themeColor(#595959, #8D8D8D);
padding: 5px 10px;
.iconbl {
font-size: 12px;
margin-right: 5px;
transition: 0.3s;
}
.bl-sendmail-fill {
font-size: 15px;
}
.bl-sendmail-fill {
font-size: 15px;
}
}
}

112
blossom-editor/src/renderer/src/views/home/Home.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="global-home-root">
<div class="main">
<bl-row class="greetings">
<bl-row class="greetings" height="65px">
Good {{ now }}.
</bl-row>
<!-- -->
@ -20,45 +20,46 @@
</bl-row>
<!-- 统计 -->
<bl-row class="container-name">字数统计</bl-row>
<bl-row width="100%" height="270px">
<!-- 字数图表 -->
<bl-col width="calc(100% - 200px)">
<bl-row class="container-sub-name">
Article Words
<span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
</bl-row>
<ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
</bl-col>
<!-- 统计卡片 -->
<bl-col width="200px" style="margin-left: 20px;">
<bl-row class="container-sub-name">Blossom Statistic</bl-row>
<StatisticCard></StatisticCard>
</bl-col>
</bl-row>
<el-scrollbar height="calc(100% - 315px)" wrap-style="padding-right:20px">
<bl-row class="container-name">字数统计</bl-row>
<bl-row width="100%" height="270px">
<!-- 字数图表 -->
<bl-col width="calc(100% - 200px)">
<bl-row class="container-sub-name">
Article Words
<span class="iconbl bl-refresh-smile container-refresh" @click="loadWordLine"></span>
</bl-row>
<ChartLineWords ref="ChartLineWordsRef"></ChartLineWords>
</bl-col>
<!-- 统计卡片 -->
<bl-col width="200px" style="margin-left: 20px;">
<bl-row class="container-sub-name">Blossom Statistic</bl-row>
<StatisticCard></StatisticCard>
</bl-col>
</bl-row>
<!-- 流量统计 -->
<bl-row class="container-name">请求流量</bl-row>
<bl-row class="container-sub-name">
Flow Statistic / Requests & Average Response Time(ms)
<span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
</bl-row>
<bl-row width="880px" height="250px">
<SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
</bl-row>
<!-- 热力图 -->
<bl-col class="heatmap-container" width="100%" style="height: 330px;">
<bl-row class="container-name">编辑热力图</bl-row>
<!-- 流量统计 -->
<bl-row class="container-name">请求流量</bl-row>
<bl-row class="container-sub-name">
每日编辑文章数 (每5分钟更新)
<span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
Flow Statistic / Requests & Average Response Time(ms)
<span class="iconbl bl-refresh-smile container-refresh" @click="loadSentinlLine"></span>
</bl-row>
<bl-row style="height: calc(100% - 60px - 20px);">
<ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
<bl-row width="880px" height="250px">
<SentinelChartLine ref="SentinelChartLineRef"></SentinelChartLine>
</bl-row>
</bl-col>
<!-- 热力图 -->
<bl-col class="heatmap-container" width="100%" style="height: 360px;">
<bl-row class="container-name">编辑热力图</bl-row>
<bl-row class="container-sub-name">
每日编辑文章数 (每5分钟更新)
<span class="iconbl bl-refresh-smile container-refresh" @click="loadArticleHeapmap"></span>
</bl-row>
<bl-row style="height: calc(100% - 60px - 20px);">
<ChartHeatmap ref="ChartHeatmapRef"></ChartHeatmap>
</bl-row>
</bl-col>
</el-scrollbar>
</div>
<!--
@ -195,8 +196,8 @@ let now: string = nowWhen()
cursor: pointer;
&:hover {
animation: rotation 4s linear infinite;
text-shadow: var(--bl-text-shadow);
animation: rotation 10s linear infinite;
text-shadow: none;
}
}
@ -205,7 +206,7 @@ let now: string = nowWhen()
$margin-web: 30px 0 50px 0px;
$margin-middle: 10px;
$width-main: 900px;
$width-main: 910px;
$width-web: 420px;
$width-middle: calc(100% -
/* border */
@ -219,8 +220,7 @@ let now: string = nowWhen()
.main {
@include box($width-main, 100%, $width-main, $width-main);
padding: 0 10px 10px 20px;
$height-greetings: 65px;
padding: 0 0 10px 20px;
z-index: 2;
// 笔记本图片等
@ -240,21 +240,28 @@ let now: string = nowWhen()
}
.greetings {
height: $height-greetings;
@include font(50px, 700);
@include themeColor(#5C5C5C, var(--el-color-primary));
text-shadow: var(--bl-text-shadow);
}
.now-time {
height: 20px;
@include themeColor(#5C5C5C, var(--el-color-primary));
height: 20px;
text-shadow: var(--bl-text-shadow);
font-size: 12px;
}
.heatmap-container {
opacity: 0;
.el-scrollbar {
--el-scrollbar-opacity: 1;
--el-scrollbar-hover-opacity: 1;
--el-scrollbar-bg-color: var(--el-color-primary-light-8);
--el-scrollbar-hover-bg-color: var(--el-color-primary-light-6);
:deep(.el-scrollbar__bar) {
width: 5px;
right: 3px;
}
}
}
@ -263,7 +270,8 @@ let now: string = nowWhen()
@include box($width-middle, 100%, $width-middle, $width-middle);
position: relative;
transition: 0.2s;
opacity: 0;
// opacity: 0;
display: none;
z-index: 2;
}
@ -287,21 +295,13 @@ let now: string = nowWhen()
}
}
@media screen and (min-height: 1120px) {
.main {
.heatmap-container {
opacity: 1 !important;
}
}
}
// 大于1600时使用以下样式
@media screen and (min-width: 1600px) {
.middle {
@include themeBorder(1px, #E6E6E6, #171717, 'left');
opacity: 1 !important;
margin-left: $margin-middle;
// opacity: 1 !important;
display: block;
// margin-left: $margin-middle;
padding: 0 10px 10px 20px;
}
}

2
blossom-editor/src/renderer/src/views/home/StatisticCard.vue
View File

@ -67,7 +67,7 @@ onActivated(() => {
transition: 0.3s;
&:hover {
box-shadow: var(--bl-box-shadow-dialog);
@include themeShadow(2px 3px 7px 0 rgba(58, 47, 47, 0.5), 3px 3px 10px 0 rgba(0, 0, 0, 1));
.icon-shadow {
@include font(150px, 500);