添加点击复制到 Clipboard 的能力 #897
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
概述演练此拉取请求引入了一个新的剪贴板功能，允许用户在多个视图（禁止列表、数据视图的禁止日志和种子列表）中通过点击轻松复制信息哈希值。为实现此功能，添加了 变更
建议的审阅者
可能相关的 PR
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
webui/src/views/data-view/banlog/components/banlogTable.vue (1)
Line range hint
128-144: 建议提取共享函数并改进错误处理！
copyToClipboard函数在多个组件中重复，建议提取到共享工具文件中- 当复制失败时，应该向用户显示错误消息
建议创建
utils/clipboard.ts文件：import { Message } from '@arco-design/web-vue' import useClipboard from 'vue-clipboard3' export const copyToClipboard = async (text: string, successMessage: string) => { const { toClipboard } = useClipboard() try { await toClipboard(text) Message.success({ content: successMessage, resetOnHover: true }) } catch (e) { console.error(e) Message.error({ content: '复制到剪贴板失败', resetOnHover: true }) } }
🧹 Nitpick comments (4)
webui/src/views/data-view/banlog/locale/en-US.ts (1)
15-15: 建议统一中英文消息格式英文消息中的格式与中文版本不一致：
- 中文版本：
InfoHash: {hash} 已复制到剪贴板- 英文版本：
InfoHash: {hash} has been copied to the clipboard建议修改英文版本以保持一致的风格：
- 'page.banlog.hashCopiedToClipboard': 'InfoHash: {hash} has been copied to the clipboard' + 'page.banlog.hashCopiedToClipboard': 'InfoHash:{hash} copied to clipboard'webui/src/views/data-view/banlog/components/banlogTable.vue (1)
68-74: 代码实现正确，建议改进用户体验！点击复制功能的实现正确。建议添加视觉反馈（如鼠标指针变化）来提示用户该文本是可点击的。
<template #torrentName="{ record }"> <a-tooltip :content="record.torrentInfoHash"> <a-typography-text ellipsis @click="copyToClipboard(record.torrentInfoHash)" + style="cursor: pointer" >{{ record.torrentName }}</a-typography-text>webui/src/views/data-view/torrentList/components/torrentTable.vue (1)
37-42: 实现正确，建议保持一致性！点击复制功能实现正确。
code属性提供了良好的视觉反馈，建议在其他使用复制功能的组件中也采用相同的样式。webui/src/views/banlist/components/banListItem.vue (1)
140-144: 建议添加视觉反馈！点击复制功能实现正确，但缺少视觉反馈来提示用户该文本是可点击的。
<a-typography-text style="margin-bottom: 0" :ellipsis="{ showTooltip: true }" + style="cursor: pointer" @click="copyToClipboard(item.banMetadata.torrent.hash)" >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
webui/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
webui/package.json(1 hunks)webui/src/views/banlist/components/banListItem.vue(3 hunks)webui/src/views/banlist/locale/en-US.ts(1 hunks)webui/src/views/banlist/locale/zh-CN.ts(1 hunks)webui/src/views/data-view/banlog/components/banlogTable.vue(5 hunks)webui/src/views/data-view/banlog/locale/en-US.ts(1 hunks)webui/src/views/data-view/banlog/locale/zh-CN.ts(1 hunks)webui/src/views/data-view/torrentList/components/torrentTable.vue(2 hunks)webui/src/views/data-view/torrentList/locale/en-US.ts(1 hunks)webui/src/views/data-view/torrentList/locale/zh-CN.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- webui/src/views/data-view/torrentList/locale/en-US.ts
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Analyze (java-kotlin)
- GitHub Check: Build_Installers / install4jc
- GitHub Check: Build_SPK / pkgcreate
- GitHub Check: Build_PKG / pkg (14.1)
- GitHub Check: Build_PKG / pkg (13.4)
- GitHub Check: Build_Docker
- GitHub Check: Cloudflare Pages
🔇 Additional comments (5)
webui/src/views/data-view/banlog/locale/zh-CN.ts (1)
14-15: 消息格式和翻译正确！消息格式保持一致，使用了正确的中文标点符号，翻译准确清晰。
webui/src/views/banlist/locale/zh-CN.ts (1)
23-24: 翻译和格式保持一致！与 banlog 模块的中文翻译保持一致，使用了统一的消息格式。
webui/src/views/data-view/torrentList/locale/zh-CN.ts (1)
26-27: 代码变更正确！添加了剪贴板复制成功的本地化消息，并修复了缺失的逗号。
webui/package.json (2)
40-40: 验证 vue-clipboard3 的版本兼容性当前使用的是
^2.0.0版本约束。请确保此版本与项目中的 Vue 3.5.13 完全兼容。✅ Verification successful
vue-clipboard3 与 Vue 3.5.13 完全兼容
vue-clipboard3 是专门为 Vue 3 开发的库，且目前在项目中的使用方式完全符合其设计意图（Composition API）。经检查，当前版本 ^2.0.0 可以安全使用。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查 vue-clipboard3 的版本兼容性信息 npm info vue-clipboard3 peerDependencies # 检查是否有已知的安全问题 npm audit [email protected]Length of output: 427
Script:
#!/bin/bash # Check Vue version in package.json echo "Vue version in package.json:" cat webui/package.json | grep '"vue":' # Look for vue-clipboard3 usage in the codebase echo -e "\nUsage patterns:" rg "vue-clipboard3" -A 2 -B 2 # Check package documentation echo -e "\nREADME content:" curl -s https://raw.githubusercontent.com/JamieCurnow/vue-clipboard3/master/README.md | head -n 20Length of output: 3412
40-40: 请检查剪贴板依赖项的重复性项目中已经存在
copy-to-clipboard包，现在又添加了vue-clipboard3。建议评估是否可以统一使用其中一个依赖项，以减少包大小和维护成本。让我们验证这两个包的大小和功能重叠：
Comment on lines
+187
to
+198
| const copyToClipboard = async (toCopyText: string) => { | ||
| try { | ||
| await toClipboard(toCopyText) | ||
| console.log('Copied to clipboard: ' + toCopyText) | ||
| Message.success({ | ||
| content: t('page.banlist.banlist.listItem.hashCopiedToClipboard', { hash: toCopyText }), | ||
| resetOnHover: true | ||
| }) | ||
| } catch (e) { | ||
| console.error(e) | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议复用共享的复制函数！
这个复制功能的实现与其他组件重复。建议使用共享的 utils/clipboard.ts 中的函数。
-const copyToClipboard = async (toCopyText: string) => {
- try {
- await toClipboard(toCopyText)
- console.log('Copied to clipboard: ' + toCopyText)
- Message.success({
- content: t('page.banlist.banlist.listItem.hashCopiedToClipboard', { hash: toCopyText }),
- resetOnHover: true
- })
- } catch (e) {
- console.error(e)
- }
-}
+import { copyToClipboard } from '@/utils/clipboard'
+
+const handleCopy = (text: string) => {
+ copyToClipboard(
+ text,
+ t('page.banlist.banlist.listItem.hashCopiedToClipboard', { hash: text })
+ )
+}Committable suggestion skipped: line range outside the PR's diff.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Deploying pbh-fe with
|
| Latest commit: |
b4ee73d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7a9903f0.peerbanhelper.pages.dev |
| Branch Preview URL: | https://clipboard.peerbanhelper.pages.dev |
|
驳回，请使用 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
新增组件 vue-clipboard3
Summary by CodeRabbit
新功能
依赖项
vue-clipboard3库，用于实现剪贴板功能本地化
用户体验