feat: 实现 Content Script 原位轻量提示 UI

- 新增 uiPopover.ts 实现原位弹窗组件(深色主题、自动定位、自动隐藏)
- 新增 contextMenuHandler.ts 处理右键菜单消息
- 时间戳转换:在点击位置显示转换结果
- 文本统计:显示字符/单词/行数/字节统计
- 更新 messageHandler.ts 挂载右键菜单消息监听
This commit is contained in:
雨霖铃
2026-05-20 20:44:00 +08:00
parent 3fb99ea49f
commit 471e17eedf
3 changed files with 314 additions and 1 deletions
+62
View File
@@ -0,0 +1,62 @@
import { MessageAction, onMessage } from '@/utils/messages';
import { getTextStats } from '@/utils/textStatistics';
import { showTimestampResult, showTextStatsResult, hidePopover } from './uiPopover';
import type { ContextMenuClickedPayload } from '@/utils/messages';
function convertTimestamp(input: string): string {
const num = Number(input.trim());
if (isNaN(num)) {
return '无效时间戳';
}
const d = num > 1e12 ? new Date(num) : new Date(num * 1000);
if (isNaN(d.getTime())) {
return '无效时间戳';
}
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}
let lastClickX = 0;
let lastClickY = 0;
document.addEventListener(
'contextmenu',
(e) => {
lastClickX = e.clientX;
lastClickY = e.clientY;
},
true,
);
export function initContextMenuHandler(): void {
onMessage(MessageAction.CONTEXT_MENU_CLICKED, (message) => {
const { featureKey, payload } = message.data as ContextMenuClickedPayload;
switch (featureKey) {
case 'timestamp': {
const result = convertTimestamp(payload);
showTimestampResult(lastClickX, lastClickY, payload, result);
break;
}
case 'textStatistics': {
const stats = getTextStats(payload);
showTextStatsResult(lastClickX, lastClickY, payload, stats);
break;
}
default:
hidePopover();
break;
}
});
}