From 7d14414605a5f38647a8d26d2108e7ec0f8c8481 Mon Sep 17 00:00:00 2001 From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com> Date: Wed, 10 Apr 2024 20:44:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E5=A4=9A=E7=9A=84=E5=8D=9A?= =?UTF-8?q?=E5=AE=A2=E9=85=8D=E7=BD=AE=E9=A1=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../backend/base/paramu/UserParamEnum.java | 49 ++++- .../base/paramu/pojo/UserParamUpdReq.java | 2 + .../src/renderer/src/stores/user.ts | 9 +- .../src/renderer/src/views/home/Home.vue | 1 + .../src/views/index/SettingConfig.vue | 12 +- .../src/views/index/SettingConfigBlog.vue | 193 +++++++++++++++++- .../src/views/index/styles/config-root.scss | 27 +++ blossom-web/src/App.vue | 43 +++- blossom-web/src/stores/user.ts | 9 +- blossom-web/src/views/article/Articles.vue | 16 +- .../src/views/article/styles/doc-content.scss | 1 + .../src/views/article/styles/doc-toc.scss | 3 +- 12 files changed, 342 insertions(+), 23 deletions(-) diff --git a/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/UserParamEnum.java b/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/UserParamEnum.java index c477e61..dad5ce8 100644 --- a/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/UserParamEnum.java +++ b/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/UserParamEnum.java @@ -39,10 +39,57 @@ public enum UserParamEnum { */ WEB_BLOG_LINKS(false, 0, ""), /** - * 博客端专题特殊形式, 0:false;1:是 + * 博客端专题特殊形式 + * 0:否;1:是 + * * @since 1.13.0 */ WEB_BLOG_SUBJECT_TITLE(false, 0, "0"), + /** + * 是否在文章内容的顶部显示文章的标题 + * 0:否;1:是 + * + * @since 1.15.0 + */ + WEB_BLOG_SHOW_ARTICLE_NAME(false, 0, "1"), + /** + * 博客主题色 + * + * @since 1.15.0 + */ + WEB_BLOG_COLOR(false, 0, "rgb(104, 104, 104)"), + // ----------< 博客水印 >---------- + /** + * 启用博客水印 + * 0:否;1:是 + * + * @since 1.15.0 + */ + WEB_BLOG_WATERMARK_ENABLED(false, 0, "0"), + /** + * 水印内容 + * + * @since 1.15.0 + */ + WEB_BLOG_WATERMARK_CONTENT(false, 0, ""), + /** + * 水印字体大小 + * + * @since 1.15.0 + */ + WEB_BLOG_WATERMARK_FONTSIZE(false, 0, "15"), + /** + * 水印颜色 + * + * @since 1.15.0 + */ + WEB_BLOG_WATERMARK_COLOR(false, 0, "rgba(157, 157, 157, 0.2)"), + /** + * 水印密集度 + * + * @since 1.15.0 + */ + WEB_BLOG_WATERMARK_GAP(false, 0, "100"), ; /** diff --git a/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/pojo/UserParamUpdReq.java b/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/pojo/UserParamUpdReq.java index ab517c8..8a1d35b 100644 --- a/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/pojo/UserParamUpdReq.java +++ b/blossom-backend/backend/src/main/java/com/blossom/backend/base/paramu/pojo/UserParamUpdReq.java @@ -3,6 +3,7 @@ package com.blossom.backend.base.paramu.pojo; import lombok.Data; import javax.validation.constraints.NotBlank; +import javax.validation.constraints.NotNull; /** * 修改参数 @@ -21,6 +22,7 @@ public class UserParamUpdReq { /** * 参数值 */ + @NotNull(message = "参数值为必填项") private String paramValue; /** diff --git a/blossom-editor/src/renderer/src/stores/user.ts b/blossom-editor/src/renderer/src/stores/user.ts index c224729..42508e6 100644 --- a/blossom-editor/src/renderer/src/stores/user.ts +++ b/blossom-editor/src/renderer/src/stores/user.ts @@ -97,7 +97,14 @@ export const DEFAULT_USER_INFO = { WEB_GONG_WANG_AN_BEI: '', WEB_BLOG_URL_ERROR_TIP_SHOW: 1, WEB_BLOG_LINKS: '', - WEB_BLOG_SUBJECT_TITLE: false + WEB_BLOG_SUBJECT_TITLE: false, + WEB_BLOG_COLOR: '', + WEB_BLOG_SHOW_ARTICLE_NAME: true, + WEB_BLOG_WATERMARK_ENABLED: false, + WEB_BLOG_WATERMARK_CONTENT: '', + WEB_BLOG_WATERMARK_FONTSIZE: 15, + WEB_BLOG_WATERMARK_COLOR: '', + WEB_BLOG_WATERMARK_GAP: 100 } } diff --git a/blossom-editor/src/renderer/src/views/home/Home.vue b/blossom-editor/src/renderer/src/views/home/Home.vue index 998c5fc..350d957 100644 --- a/blossom-editor/src/renderer/src/views/home/Home.vue +++ b/blossom-editor/src/renderer/src/views/home/Home.vue @@ -220,6 +220,7 @@ const fold = () => { .chart-container { @include box(100%, calc(100% - 315px)); + height: 100%; overflow-x: hidden; overflow-y: scroll; } diff --git a/blossom-editor/src/renderer/src/views/index/SettingConfig.vue b/blossom-editor/src/renderer/src/views/index/SettingConfig.vue index 6e797d8..676aa0f 100644 --- a/blossom-editor/src/renderer/src/views/index/SettingConfig.vue +++ b/blossom-editor/src/renderer/src/views/index/SettingConfig.vue @@ -4,24 +4,24 @@
- +
- +
- +
- +
- +
- + diff --git a/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue b/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue index 318c478..76080ea 100644 --- a/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue +++ b/blossom-editor/src/renderer/src/views/index/SettingConfigBlog.vue @@ -25,6 +25,30 @@ + + + + + + +
+ +
博客主题色，主要影响专题样式颜色以及文章中的链接颜色。
+ +
博客左上角名称，以及在浏览器标签中的名称。
@@ -35,6 +59,17 @@
博客左上角 Logo 的访问地址，以及在浏览器标签中的 Logo。
 + + + + +
是否在文章内容的顶部显示文章的标题。
+ + 是否在博客文档列表中以特殊的样式显示专题。 - + + + + +
是否开启博客文章背景文字水印。
+
+ + +
水印内容
+ + + +
水印大小
+ + + + + + +
水印颜色
+ + + + + + + + + +
密集程度
+ + + +
+ + + + +
如果博客作为你的域名首页，你可能需要配置 ICP 备案号，该内容会跳转至中国大陆《ICP/IP地址/域名信息备案管理系统》。
+ + + -
自定义信息，可填写 HTML 内容。
- - - - -
如果博客作为你的域名首页，你可能需要配置 ICP 备案号，该内容会跳转至中国大陆《ICP/IP地址/域名信息备案管理系统》。
+
首页底部的自定义信息，可填写 HTML 内容，也可在此自定义备案信息即跳转地址等信息。
 @@ -98,18 +197,57 @@ const userParamForm = ref({ WEB_GONG_WANG_AN_BEI: '', WEB_BLOG_URL_ERROR_TIP_SHOW: '', WEB_BLOG_LINKS: '', - WEB_BLOG_SUBJECT_TITLE: false + WEB_BLOG_SUBJECT_TITLE: false, + WEB_BLOG_COLOR: '', + WEB_BLOG_SHOW_ARTICLE_NAME: true, + WEB_BLOG_WATERMARK_ENABLED: false, + WEB_BLOG_WATERMARK_CONTENT: '', + WEB_BLOG_WATERMARK_FONTSIZE: 15, + WEB_BLOG_WATERMARK_COLOR: '', + WEB_BLOG_WATERMARK_GAP: 100 }) +const colors = ['rgb(136, 118, 87)', 'rgb(119, 150, 73)', 'rgb(128, 164, 146)', 'rgb(110, 155, 197)', 'rgb(97, 94, 168)', 'rgb(104, 104, 104)'] + +const changeBlogColor = (color: string) => { + if (!color) { + userParamForm.value.WEB_BLOG_COLOR = 'rgb(104, 104, 104)' + } else { + userParamForm.value.WEB_BLOG_COLOR = color + } + updParam('WEB_BLOG_COLOR', userParamForm.value.WEB_BLOG_COLOR) +} + +const changeWatermarkColor = (color: string) => { + if (!color) { + userParamForm.value.WEB_BLOG_WATERMARK_COLOR = 'rgba(157, 157, 157, 0.2)' + } else { + userParamForm.value.WEB_BLOG_WATERMARK_COLOR = color + } + updParam('WEB_BLOG_WATERMARK_COLOR', userParamForm.value.WEB_BLOG_WATERMARK_COLOR) +} + /** * 获取参数列表 */ const getParamList = () => { userParamListApi().then((resp) => { - userParamForm.value = { ...resp.data, ...{ WEB_BLOG_SUBJECT_TITLE: resp.data.WEB_BLOG_SUBJECT_TITLE === '1' } } + userParamForm.value = { + ...resp.data, + ...{ + WEB_BLOG_SUBJECT_TITLE: resp.data.WEB_BLOG_SUBJECT_TITLE === '1', + WEB_BLOG_SHOW_ARTICLE_NAME: resp.data.WEB_BLOG_SHOW_ARTICLE_NAME === '1', + WEB_BLOG_WATERMARK_ENABLED: resp.data.WEB_BLOG_WATERMARK_ENABLED === '1', + WEB_BLOG_WATERMARK_FONTSIZE: Number(resp.data.WEB_BLOG_WATERMARK_FONTSIZE), + WEB_BLOG_WATERMARK_GAP: Number(resp.data.WEB_BLOG_WATERMARK_GAP) + } + } }) } +/** + * 刷新参数 + */ const refreshParam = () => { userParamRefreshApi().then((_) => { Notify.success('', '刷新成功') @@ -118,6 +256,12 @@ const refreshParam = () => { }) } +/** + * 修改参数 + * + * @param paramName 参数名 + * @param paramValue 参数值 + */ const updParam = (paramName: string, paramValue: string) => { userParamUpdApi({ paramName: paramName, paramValue: paramValue }).then((_resp) => { userStore.getUserinfo() @@ -130,6 +274,9 @@ const toBlog = () => { openExtenal(url) } +/** + * 获取连接配置模板 + */ const genWebLinksTemplate = () => { if (isNotBlank(userParamForm.value.WEB_BLOG_LINKS)) { Notify.info('你需要将内容清空后再生成模板', '提示') @@ -165,4 +312,32 @@ defineExpose({ reload }) white-space: pre; color: var(--bl-text-color-light); } + +.colors { + align-content: flex-start; + flex-wrap: wrap; + + .el-color-picker--small { + margin: 0 10px 10px 0; + } + + .color-item { + @include box(28px, 28px); + margin: 0 0 0 15px; + border-radius: 4px; + position: relative; + transition: transform 0.3s; + cursor: pointer; + text-align: center; + + &:hover { + transform: scale(1.1); + } + } +} + +.theme-color-picker { + z-index: 3001 !important; + margin: 0 10px 10px 0; +} diff --git a/blossom-editor/src/renderer/src/views/index/styles/config-root.scss b/blossom-editor/src/renderer/src/views/index/styles/config-root.scss index c151a0c..1068cf8 100644 --- a/blossom-editor/src/renderer/src/views/index/styles/config-root.scss +++ b/blossom-editor/src/renderer/src/views/index/styles/config-root.scss @@ -69,4 +69,31 @@ font-style: italic; } } + + .conf-watermark { + @include box(100%, auto); + color: var(--bl-text-color); + border: 1px solid var(--el-border-color); + background-color: var(--bl-bg-color); + border-radius: 4px; + padding: 20px; + margin-bottom: 20px; + + .label { + min-width: 50px; + margin: 0 10px; + + &:first-child { + margin-left: 0; + } + } + + .el-input { + width: calc(100% - 80px); + } + + .el-input-number { + width: 130px; + } + } } diff --git a/blossom-web/src/App.vue b/blossom-web/src/App.vue index 6a08085..648ca33 100644 --- a/blossom-web/src/App.vue +++ b/blossom-web/src/App.vue @@ -5,7 +5,7 @@ diff --git a/blossom-web/src/stores/user.ts b/blossom-web/src/stores/user.ts index 67f8504..394b411 100644 --- a/blossom-web/src/stores/user.ts +++ b/blossom-web/src/stores/user.ts @@ -46,7 +46,14 @@ const DEFAULT_USER_INFO = { WEB_GONG_WANG_AN_BEI: '', WEB_BLOG_URL_ERROR_TIP_SHOW: 1, WEB_BLOG_LINKS: '', - WEB_BLOG_SUBJECT_TITLE: '1' + WEB_BLOG_SUBJECT_TITLE: '1', + WEB_BLOG_SHOW_ARTICLE_NAME: '1', + WEB_BLOG_COLOR: 'rgb(104, 104, 104)', + WEB_BLOG_WATERMARK_ENABLED: '0', + WEB_BLOG_WATERMARK_CONTENT: '', + WEB_BLOG_WATERMARK_FONTSIZE: 15, + WEB_BLOG_WATERMARK_COLOR: '', + WEB_BLOG_WATERMARK_GAP: 100 } } diff --git a/blossom-web/src/views/article/Articles.vue b/blossom-web/src/views/article/Articles.vue index 3a31ada..246a424 100644 --- a/blossom-web/src/views/article/Articles.vue +++ b/blossom-web/src/views/article/Articles.vue @@ -50,14 +50,24 @@
-
{{ article.name }}
-
+
{{ article.name }}
+ + +
+
-
《{{ article.name }}》
+
{{ article.name }}
{{ article.words }} 字 | {{ article.uv }} | {{ article.likes }} diff --git a/blossom-web/src/views/article/styles/doc-content.scss b/blossom-web/src/views/article/styles/doc-content.scss index ab91735..9339c5f 100644 --- a/blossom-web/src/views/article/styles/doc-content.scss +++ b/blossom-web/src/views/article/styles/doc-content.scss @@ -17,6 +17,7 @@ border-bottom: 1px solid #e5e5e5; text-align: left; position: relative; + word-break: break-all; font-size: 2em; } diff --git a/blossom-web/src/views/article/styles/doc-toc.scss b/blossom-web/src/views/article/styles/doc-toc.scss index 1633650..3f11cc5 100644 --- a/blossom-web/src/views/article/styles/doc-toc.scss +++ b/blossom-web/src/views/article/styles/doc-toc.scss @@ -25,9 +25,9 @@ } .toc-subtitle { - width: 100%; @include flex(row, flex-start, center); @include font(12px); + width: 100%; color: #ababab; overflow: hidden; white-space: nowrap; @@ -53,6 +53,7 @@ &:hover { font-weight: bold; + color: var(--el-color-primary); } }