feat(annotator): rounded highlight style for horizontal and vertical layout, closes #3208 (#3252)

2026-02-10 23:13:53 +08:00
parent c9a69a922b
commit 9444be7fcc
3 changed files with 7 additions and 3 deletions
@@ -318,7 +318,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      const { writingMode } = defaultView.getComputedStyle(el);
      draw(Overlayer.bubble, { writingMode });
    } else if (style === 'highlight') {
-      draw(Overlayer.highlight, { color: isBwEink ? einkBgColor : hexColor });
+      draw(Overlayer.highlight, {
+        color: isBwEink ? einkBgColor : hexColor,
+        vertical: viewSettings.vertical,
+      });
    } else if (['underline', 'squiggly'].includes(style as string)) {
      const { defaultView } = doc;
      const node = range.startContainer;
@@ -181,7 +181,8 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, onClick }) =
                item.note && 'content font-size-xs text-gray-500',
                (item.style === 'underline' || item.style === 'squiggly') &&
                  'underline decoration-2',
-                item.style === 'highlight' && `bg-${item.color}-500 bg-opacity-40`,
+                item.style === 'highlight' &&
+                  `bg-${item.color}-500 rounded-[4px] bg-opacity-40 px-[2px] py-[1px]`,
                item.style === 'underline' && `decoration-${item.color}-400`,
                item.style === 'squiggly' && `decoration-wavy decoration-${item.color}-400`,
              )}