diff --git a/open-isle-cli/src/assets/global.css b/open-isle-cli/src/assets/global.css index eb2de8e73..3e5317ec5 100644 --- a/open-isle-cli/src/assets/global.css +++ b/open-isle-cli/src/assets/global.css @@ -17,4 +17,39 @@ body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; +} + + +/************************* + * Vditor 自定义皮肤覆写 + *************************/ +/* + 思路: + 1. 用 CSS 变量快速改大色块; + 2. 再用选择器去掉边框 / 阴影。 + 注意顺序:一定写在官方 index.css 之后才能生效。 +*/ + +.comment-editor-container .vditor { + /* 去掉整体背景与边框,让它融入父容器 */ + --panel-background-color: transparent; + --border-color: transparent; + --textarea-background-color: transparent; + border: none !important; + box-shadow: none !important; +} + +/* 工具栏彻底无边框、透明背景 */ +.comment-editor-container .vditor-toolbar { + background: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* 编辑区(wysiwyg / ir / sv)背景透明 */ +.comment-editor-container .vditor-content, +.comment-editor-container .vditor-wysiwyg, +.comment-editor-container .vditor-ir, +.comment-editor-container .vditor-textarea { + background: transparent !important; } \ No newline at end of file diff --git a/open-isle-cli/src/views/PostPageView.vue b/open-isle-cli/src/views/PostPageView.vue index 5f09e66e3..07ef266a5 100644 --- a/open-isle-cli/src/views/PostPageView.vue +++ b/open-isle-cli/src/views/PostPageView.vue @@ -81,18 +81,15 @@ -
- -
- +
+
发布评论
+
+
+ +
+
@@ -241,8 +238,43 @@ export default { onMounted(() => { vditorInstance.value = new Vditor('vditor', { - placeholder: '写点什么...', - height: 200 + placeholder: '说点什么...', + height: 120, + + /* ===================== 主题相关 ===================== */ + // 编辑区主题(classic|dark|light)。classic = 很淡、和浅色页面更搭 + theme: 'classic', + // 预览区主题:light / dark / wechat / ant-design + preview: { + theme: { + current: 'light', + }, + actions: [], + markdown: { toc: false }, + }, + + /* ===================== 功能裁剪 ===================== */ + toolbar: [ + 'emoji', + 'bold', + 'italic', + 'strike', + '|', + 'list', + 'line', + 'quote', + 'code', + 'inline-code', + '|', + 'undo', + 'redo', + '|', + 'link', + 'image', + ], + toolbarConfig: { + pin: true, + }, }) updateCurrentIndex() }) @@ -511,4 +543,31 @@ export default { .copy-link:hover { background-color: #e2e2e2; } + +.comment-editor-container { + margin-top: 20px; + margin-bottom: 50px; + border: 1px solid #e2e2e2; +} + +.comment-bottom-container { + display: flex; + flex-direction: row; + justify-content: flex-end; + padding: 10px; +} + +.comment-submit { + background-color: var(--primary-color); + color: #fff; + padding: 10px 20px; + border-radius: 10px; + font-size: 14px; + cursor: pointer; +} + +.comment-submit:hover { + background-color: var(--primary-color-hover); +} +