Add switch options for simplifyComments (#2381)

This commit is contained in:
the1812 2023-07-29 18:16:39 +08:00
parent 3fc6b3130c
commit 46e9d791ac
3 changed files with 116 additions and 71 deletions

View File

@ -4,21 +4,8 @@ $prefix: 'simplifyComments-switch';
.bili-comment {
.reply-item {
// body.#{$prefix}-level & {
.user-level,
.sub-user-level {
display: none !important;
}
// }
// body.#{$prefix}-subReplyNewline & {
.sub-user-info {
display: flex !important;
}
// }
// body.#{$prefix}-layout & {
.reply-decorate {
display: none !important;
}
// [布局微调]
// 回复项
.sub-user-info,
.sub-user-name {
line-height: 1.5 !important;
@ -27,65 +14,93 @@ $prefix: 'simplifyComments-switch';
margin-bottom: 4px !important;
max-height: 19.5px !important;
}
.reply-content-container {
display: block !important;
flex-basis: 100% !important;
}
.root-reply:not(.reply-content-container) {
padding: 0 !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
// 笔记
.note-content {
flex-basis: 100% !important;
margin-bottom: 4px !important;
}
// 笔记图片
.image-exhibition {
flex-basis: 100% !important;
margin-bottom: 8px !important;
}
.root-reply,
.reply-info,
.sub-reply-info {
position: static !important;
}
.reply-info,
.sub-reply-info {
display: inline-flex !important;
}
.reply-time,
.sub-reply-time {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin-right: 0 !important;
line-height: 1.5 !important;
}
.sub-reply-time {
top: 8px !important;
}
// 右侧操作菜单
.reply-operation-warp,
.sub-reply-operation-warp {
right: -5px !important;
}
.reply-tag-list {
display: inline-flex !important;
margin: 2px 0 0 18px !important;
.reply-tag-item {
padding: 4px 6px !important;
body.#{$prefix}-userLevel & {
.user-level,
.sub-user-level {
display: none !important;
}
}
// }
}
// body.#{$prefix}-replyEditor & {
.reply-box-send {
.send-text {
font-size: 14px !important;
body.#{$prefix}-userPendent & {
.bili-avatar-pendent-dom {
display: none !important;
}
}
body.#{$prefix}-decorateAndTime & {
.reply-decorate {
display: none !important;
}
.reply-time,
.sub-reply-time {
position: absolute !important;
top: 0 !important;
right: 0 !important;
margin-right: 0 !important;
line-height: 1.5 !important;
}
.sub-reply-time {
top: 8px !important;
}
// .sub-user-info {
// display: flex !important;
// }
}
body.#{$prefix}-subReplyNewLine & {
.root-reply:not(.reply-content-container) {
padding: 0 !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
.reply-content-container {
display: block !important;
flex-basis: 100% !important;
}
.root-reply,
.reply-info,
.sub-reply-info {
position: static !important;
}
.reply-info,
.sub-reply-info {
display: inline-flex !important;
}
.reply-tag-list {
display: inline-flex !important;
margin: 2px 0 0 18px !important;
.reply-tag-item {
padding: 4px 6px !important;
}
}
}
}
.reply-box-textarea {
line-height: normal !important;
body.#{$prefix}-replyEditor & {
.reply-box-send {
.send-text {
font-size: 14px !important;
}
}
.reply-box-textarea {
line-height: normal !important;
}
}
// }
}

View File

@ -1,10 +1,11 @@
- 删除热评头像下方的关注按钮
- 删除用户的等级标识
- 删除发送源信息(\`来自安卓客户端\` 这种)
- 删除用户名右边的勋章
- 删除评论区顶部的横幅
- 发送时间移动到右上角
- 位图图标全部换用矢量图标, 高分屏不会模糊
- 投票仅显示链接, 隐藏下面的大框.
去除或优化评论区内的元素, 可配置以下选项 (描述的是勾选时的效果):
> 注: 关注和等级可以通过鼠标停留在头像上, 在弹出的资料卡小窗中查看.
> 配置项仅对新版评论区有效
- `用户等级`: 隐藏用户等级标识. (隐藏后, 可以通过鼠标停留在头像上, 在弹出的资料卡小窗中查看)
- `装扮 & 时间`: 隐藏装扮图片, 并把发送时间移动到装扮的位置.
- `头像框`: 隐藏头像框.
- `回复换行`:
- 楼中楼回复也另起一行显示, 和一级回复保持一致.
- `热评`, `UP 主点赞` 等标记和点赞栏放在同一行.
- `编辑框`: 将提示文本居上, 符合用户实际输入文字的位置, 并将发布按钮的字号略微调小.

View File

@ -1,8 +1,38 @@
import { defineComponentMetadata } from '@/components/define'
import { wrapSwitchOptions } from '@/components/switch-options'
const name = 'simplifyComments'
export const component = defineComponentMetadata({
export const component = wrapSwitchOptions({
name: 'simplifyOptions',
switchProps: {
checkedIcon: 'mdi-checkbox-marked-circle',
notCheckedIcon: 'mdi-checkbox-blank-circle-outline',
},
dimAt: false,
switches: {
userLevel: {
defaultValue: true,
displayName: '用户等级',
},
decorateAndTime: {
defaultValue: true,
displayName: '装扮 & 时间',
},
userPendent: {
defaultValue: false,
displayName: '头像框',
},
subReplyNewLine: {
defaultValue: true,
displayName: '回复换行',
},
replyEditor: {
defaultValue: true,
displayName: '编辑框',
},
},
})({
name,
displayName: '简化评论区',
entry: async ({ metadata }) => {
const { addComponentListener } = await import('@/core/settings')
addComponentListener(
@ -23,6 +53,5 @@ export const component = defineComponentMetadata({
style: () => import('./comments-v2.scss'),
},
],
displayName: '简化评论区',
tags: [componentsTags.style],
})