feat:划词翻译跟随元素滚动

[MrWangJustToDo]

通过引入 floating-ui 实现划词翻译自动定位，自动跟随滚动

fix #143 #145

[sourcery-ai]

Reviewer's Guide

This PR replaces manual DOM measurement and style bindings for the selection indicator and tooltip with floating-ui’s computePosition and autoUpdate, enabling automatic placement and scroll-following. It refactors the template to wrap the indicator and tooltip in a positioned container, swaps out computed style logic for a watchEffect-driven update, and overhauls the CSS to use data-placement rules.

Sequence diagram for selection and tooltip positioning with floating-ui

sequenceDiagram
  actor User
  participant SelectionTranslator
  participant floating-ui
  User->>SelectionTranslator: Selects text
  SelectionTranslator->>floating-ui: computePosition(range, container)
  floating-ui-->>SelectionTranslator: Returns x, y, placement
  SelectionTranslator->>SelectionTranslator: Updates container style and data-placement
  Note over SelectionTranslator: Tooltip and indicator follow scroll automatically

Loading

File-Level Changes

Change	Details	Files
Integrate floating-ui for dynamic positioning	import computePosition, autoUpdate and middleware from @floating-ui/dom replace selectionRect and computed styles with selectRange and watchEffect-based positioning use autoUpdate(range, container, updatePosition) for scroll and resize follow-up	components/SelectionTranslator.vue
Refactor template structure to use a positioned wrapper	add a around indicator and tooltip remove inline :style bindings for indicator and tooltip move event handlers and classes into the new wrapper context	components/SelectionTranslator.vue
Overhaul CSS for placement-based styling	define .fr-selection-translator-wrapper and make indicator absolute within it add [data-placement=...] rules for indicator and tooltip offsets simplify keyframes to remove hardcoded transforms	components/SelectionTranslator.vue
Update dependencies and cleanup script imports	add @floating-ui/dom to package.json remove unused computed, indicatorStyle, tooltipStyle imports and logic adjust script imports to include useTemplateRef and watchEffect	components/SelectionTranslator.vue package.json

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#143	Ensure the translation floating panel is fully visible and not clipped when the selected text is near the bottom of the webpage.	✅

Possibly linked issues

• 划词翻译悬浮面板被遮挡显示不全 #143: The PR implements automatic positioning and scrolling for the selection translation prompt, directly addressing the issue of it not following page scroll.
• 翻译提示不跟随网页滚动 #145: The PR fixes the obscured floating panel issue by implementing floating-ui for dynamic positioning.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes and they look great!

Prompt for AI Agents

Please address the comments from this code review:
## Individual Comments

### Comment 1
<location> `components/SelectionTranslator.vue:679` </location>
<code_context>
+  top: 0;
+  left: 0;
+  z-index: 9998;
+  width: 350px;
+}
+
</code_context>

<issue_to_address>
Hardcoding the wrapper width to 350px may reduce flexibility.

A fixed width may not display well on all devices or with varying content lengths. Making the width responsive or configurable would improve adaptability.
</issue_to_address>

<suggested_fix>
<<<<<<< SEARCH
  width: 350px;
}
=======
  width: var(--translator-width, 100%);
  max-width: 350px;
}
>>>>>>> REPLACE

</suggested_fix>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Hardcoding the wrapper width to 350px may reduce flexibility.

A fixed width may not display well on all devices or with varying content lengths. Making the width responsive or configurable would improve adaptability.

Suggested change

	width: 350px;
	}
	width: var(--translator-width, 100%);
	max-width: 350px;
	}