From 46e9d791ac02b80b3dd8b1a09d155d7114d42981 Mon Sep 17 00:00:00 2001 From: the1812 Date: Sat, 29 Jul 2023 18:16:39 +0800 Subject: [PATCH] Add switch options for simplifyComments (#2381) --- .../style/simplify/comments/comments-v2.scss | 133 ++++++++++-------- .../style/simplify/comments/index.md | 19 +-- .../style/simplify/comments/index.ts | 35 ++++- 3 files changed, 116 insertions(+), 71 deletions(-) diff --git a/registry/lib/components/style/simplify/comments/comments-v2.scss b/registry/lib/components/style/simplify/comments/comments-v2.scss index 5ad5143c4..985a18606 100644 --- a/registry/lib/components/style/simplify/comments/comments-v2.scss +++ b/registry/lib/components/style/simplify/comments/comments-v2.scss @@ -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; + } } - // } } diff --git a/registry/lib/components/style/simplify/comments/index.md b/registry/lib/components/style/simplify/comments/index.md index 9397c398a..97c9f3647 100644 --- a/registry/lib/components/style/simplify/comments/index.md +++ b/registry/lib/components/style/simplify/comments/index.md @@ -1,10 +1,11 @@ -- 删除热评头像下方的关注按钮 -- 删除用户的等级标识 -- 删除发送源信息(\`来自安卓客户端\` 这种) -- 删除用户名右边的勋章 -- 删除评论区顶部的横幅 -- 发送时间移动到右上角 -- 位图图标全部换用矢量图标, 高分屏不会模糊 -- 投票仅显示链接, 隐藏下面的大框. +去除或优化评论区内的元素, 可配置以下选项 (描述的是勾选时的效果): -> 注: 关注和等级可以通过鼠标停留在头像上, 在弹出的资料卡小窗中查看. +> 配置项仅对新版评论区有效 + +- `用户等级`: 隐藏用户等级标识. (隐藏后, 可以通过鼠标停留在头像上, 在弹出的资料卡小窗中查看) +- `装扮 & 时间`: 隐藏装扮图片, 并把发送时间移动到装扮的位置. +- `头像框`: 隐藏头像框. +- `回复换行`: + - 楼中楼回复也另起一行显示, 和一级回复保持一致. + - `热评`, `UP 主点赞` 等标记和点赞栏放在同一行. +- `编辑框`: 将提示文本居上, 符合用户实际输入文字的位置, 并将发布按钮的字号略微调小. diff --git a/registry/lib/components/style/simplify/comments/index.ts b/registry/lib/components/style/simplify/comments/index.ts index 2f49e04d5..13d323d90 100644 --- a/registry/lib/components/style/simplify/comments/index.ts +++ b/registry/lib/components/style/simplify/comments/index.ts @@ -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], })