♻️ Refactored translation extension
This commit is contained in:
852
frontend/package-lock.json
generated
852
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -22,7 +22,7 @@
|
||||
"app:generate": "cd .. && wails3 generate bindings -ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.19.1",
|
||||
"@codemirror/autocomplete": "^6.20.0",
|
||||
"@codemirror/commands": "^6.10.0",
|
||||
"@codemirror/lang-angular": "^0.1.4",
|
||||
"@codemirror/lang-cpp": "^6.0.3",
|
||||
@@ -50,7 +50,7 @@
|
||||
"@codemirror/lint": "^6.9.2",
|
||||
"@codemirror/search": "^6.5.11",
|
||||
"@codemirror/state": "^6.5.2",
|
||||
"@codemirror/view": "^6.38.6",
|
||||
"@codemirror/view": "^6.38.8",
|
||||
"@cospaia/prettier-plugin-clojure": "^0.0.2",
|
||||
"@lezer/highlight": "^1.2.3",
|
||||
"@lezer/lr": "^1.4.3",
|
||||
@@ -72,37 +72,37 @@
|
||||
"linguist-languages": "^9.1.0",
|
||||
"markdown-it": "^14.1.0",
|
||||
"mermaid": "^11.12.1",
|
||||
"npm": "^11.6.2",
|
||||
"npm": "^11.6.3",
|
||||
"php-parser": "^3.2.5",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia-plugin-persistedstate": "^4.7.1",
|
||||
"prettier": "^3.6.2",
|
||||
"sass": "^1.94.0",
|
||||
"sass": "^1.94.2",
|
||||
"vue": "^3.5.24",
|
||||
"vue-i18n": "^11.1.12",
|
||||
"vue-i18n": "^11.2.1",
|
||||
"vue-pick-colors": "^1.8.0",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@lezer/generator": "^1.8.0",
|
||||
"@types/node": "^24.9.2",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
"@wailsio/runtime": "latest",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-vue": "^10.5.1",
|
||||
"eslint-plugin-vue": "^10.6.0",
|
||||
"globals": "^16.5.0",
|
||||
"happy-dom": "^20.0.10",
|
||||
"typescript": "^5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"typescript-eslint": "^8.47.0",
|
||||
"unplugin-vue-components": "^30.0.0",
|
||||
"vite": "npm:rolldown-vite@latest",
|
||||
"vite-plugin-node-polyfills": "^0.24.0",
|
||||
"vitepress": "^2.0.0-alpha.12",
|
||||
"vitest": "^4.0.8",
|
||||
"vitest": "^4.0.13",
|
||||
"vue-eslint-parser": "^10.2.0",
|
||||
"vue-tsc": "^3.1.3"
|
||||
"vue-tsc": "^3.1.4"
|
||||
},
|
||||
"overrides": {
|
||||
"vite": "npm:rolldown-vite@latest"
|
||||
|
||||
@@ -1,45 +1,3 @@
|
||||
/**
|
||||
* 默认翻译配置
|
||||
*/
|
||||
export const DEFAULT_TRANSLATION_CONFIG = {
|
||||
minSelectionLength: 2,
|
||||
maxTranslationLength: 5000,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* 翻译相关的错误消息
|
||||
*/
|
||||
export const TRANSLATION_ERRORS = {
|
||||
NO_TEXT: 'no text to translate',
|
||||
TRANSLATION_FAILED: 'translation failed',
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* 翻译结果接口
|
||||
*/
|
||||
export interface TranslationResult {
|
||||
translatedText: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 语言信息接口
|
||||
*/
|
||||
export interface LanguageInfo {
|
||||
Code: string; // 语言代码
|
||||
Name: string; // 语言名称
|
||||
}
|
||||
|
||||
/**
|
||||
* 翻译器扩展配置
|
||||
*/
|
||||
export interface TranslatorConfig {
|
||||
/** 最小选择字符数才显示翻译按钮 */
|
||||
minSelectionLength: number;
|
||||
/** 最大翻译字符数 */
|
||||
maxTranslationLength: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 翻译图标SVG
|
||||
*/
|
||||
|
||||
@@ -1,7 +1,28 @@
|
||||
import {defineStore} from 'pinia';
|
||||
import {ref} from 'vue';
|
||||
import {TranslationService} from '@/../bindings/voidraft/internal/services';
|
||||
import {LanguageInfo, TRANSLATION_ERRORS, TranslationResult} from '@/common/constant/translation';
|
||||
/**
|
||||
* 翻译结果接口
|
||||
*/
|
||||
export interface TranslationResult {
|
||||
translatedText: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 语言信息接口
|
||||
*/
|
||||
export interface LanguageInfo {
|
||||
Code: string; // 语言代码
|
||||
Name: string; // 语言名称
|
||||
}
|
||||
/**
|
||||
* 翻译相关的错误消息
|
||||
*/
|
||||
export const TRANSLATION_ERRORS = {
|
||||
NO_TEXT: 'no text to translate',
|
||||
TRANSLATION_FAILED: 'translation failed',
|
||||
} as const;
|
||||
|
||||
export const useTranslationStore = defineStore('translation', () => {
|
||||
// 基础状态
|
||||
|
||||
@@ -9,6 +9,8 @@ import LoadingScreen from '@/components/loading/LoadingScreen.vue';
|
||||
import { useTabStore } from '@/stores/tabStore';
|
||||
import ContextMenu from './contextMenu/ContextMenu.vue';
|
||||
import { contextMenuManager } from './contextMenu/manager';
|
||||
import TranslatorDialog from './extensions/translator/TranslatorDialog.vue';
|
||||
import { translatorManager } from './extensions/translator/manager';
|
||||
|
||||
const editorStore = useEditorStore();
|
||||
const documentStore = useDocumentStore();
|
||||
@@ -34,17 +36,24 @@ onMounted(async () => {
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
contextMenuManager.destroy();
|
||||
translatorManager.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="editor-container">
|
||||
<!-- 加载动画 -->
|
||||
<transition name="loading-fade">
|
||||
<LoadingScreen v-if="editorStore.isLoading && enableLoadingAnimation" text="VOIDRAFT" />
|
||||
</transition>
|
||||
<!-- 编辑器区域 -->
|
||||
<div ref="editorElement" class="editor"></div>
|
||||
<!-- 工具栏 -->
|
||||
<Toolbar />
|
||||
<!-- 右键菜单 -->
|
||||
<ContextMenu :portal-target="editorElement" />
|
||||
<!-- 翻译器弹窗 -->
|
||||
<TranslatorDialog :portal-target="editorElement" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, nextTick, ref, watch } from 'vue';
|
||||
import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
|
||||
import { contextMenuManager } from './manager';
|
||||
import type { RenderMenuItem } from './menuSchema';
|
||||
|
||||
@@ -30,9 +30,19 @@ watch(
|
||||
watch(isVisible, (visible) => {
|
||||
if (visible) {
|
||||
nextTick(adjustMenuWithinViewport);
|
||||
// 显示时添加 outside 点击监听
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
} else {
|
||||
// 隐藏时移除监听
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
});
|
||||
|
||||
// 清理
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
});
|
||||
|
||||
const menuStyle = computed(() => ({
|
||||
left: `${adjustedPosition.value.x}px`,
|
||||
top: `${adjustedPosition.value.y}px`
|
||||
@@ -65,26 +75,24 @@ function handleItemClick(item: RenderMenuItem) {
|
||||
contextMenuManager.runCommand(item);
|
||||
}
|
||||
|
||||
function handleOverlayMouseDown() {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
// 如果点击在菜单内部，不关闭
|
||||
if (menuRef.value?.contains(event.target as Node)) {
|
||||
return;
|
||||
}
|
||||
contextMenuManager.hide();
|
||||
}
|
||||
|
||||
function stopPropagation(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport :to="teleportTarget">
|
||||
<template v-if="isVisible">
|
||||
<div class="cm-context-overlay" @mousedown="handleOverlayMouseDown" />
|
||||
<div
|
||||
ref="menuRef"
|
||||
class="cm-context-menu show"
|
||||
:style="menuStyle"
|
||||
role="menu"
|
||||
@contextmenu.prevent
|
||||
@mousedown="stopPropagation"
|
||||
>
|
||||
<template v-for="item in items" :key="item.id">
|
||||
<div v-if="item.type === 'separator'" class="cm-context-menu-divider" />
|
||||
@@ -110,13 +118,6 @@ function stopPropagation(event: MouseEvent) {
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cm-context-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 9000;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cm-context-menu {
|
||||
position: fixed;
|
||||
min-width: 180px;
|
||||
|
||||
@@ -27,6 +27,26 @@ class ContextMenuManager {
|
||||
}
|
||||
|
||||
show(view: EditorView, clientX: number, clientY: number, items: RenderMenuItem[]): void {
|
||||
const currentState = this.state.value;
|
||||
|
||||
// 如果菜单已经显示，且位置很接近（20px范围内），则只更新内容，避免闪烁
|
||||
if (currentState.visible) {
|
||||
const dx = Math.abs(currentState.position.x - clientX);
|
||||
const dy = Math.abs(currentState.position.y - clientY);
|
||||
const isSamePosition = dx < 20 && dy < 20;
|
||||
|
||||
if (isSamePosition) {
|
||||
// 只更新items和view，保持visible状态和位置
|
||||
this.state.value = {
|
||||
...currentState,
|
||||
items,
|
||||
view
|
||||
};
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 否则正常显示菜单
|
||||
this.state.value = {
|
||||
visible: true,
|
||||
position: { x: clientX, y: clientY },
|
||||
|
||||
@@ -0,0 +1,481 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, nextTick, onUnmounted, ref, watch} from 'vue';
|
||||
import {translatorManager} from './manager';
|
||||
import {useTranslationStore} from '@/stores/translationStore';
|
||||
|
||||
const props = defineProps<{
|
||||
portalTarget?: HTMLElement | null;
|
||||
}>();
|
||||
|
||||
const state = translatorManager.useState();
|
||||
const translationStore = useTranslationStore();
|
||||
|
||||
const dialogRef = ref<HTMLDivElement | null>(null);
|
||||
const adjustedPosition = ref({ x: 0, y: 0 });
|
||||
|
||||
const isVisible = computed(() => state.value.visible);
|
||||
const sourceText = computed(() => state.value.sourceText);
|
||||
const position = computed(() => state.value.position);
|
||||
const teleportTarget = computed<HTMLElement | string>(() => props.portalTarget ?? 'body');
|
||||
|
||||
const sourceLangSelector = ref('');
|
||||
const targetLangSelector = ref('');
|
||||
const translatorSelector = ref('');
|
||||
const translatedText = ref('');
|
||||
const isLoading = ref(false);
|
||||
|
||||
const isDragging = ref(false);
|
||||
const dragStart = ref({ x: 0, y: 0 });
|
||||
|
||||
// 监听可见性变化
|
||||
watch(isVisible, async (visible) => {
|
||||
if (visible) {
|
||||
adjustedPosition.value = { ...position.value };
|
||||
await nextTick();
|
||||
adjustDialogPosition();
|
||||
await initializeTranslation();
|
||||
await nextTick();
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
} else {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
isDragging.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 清理
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
});
|
||||
|
||||
const dialogStyle = computed(() => ({
|
||||
left: `${adjustedPosition.value.x}px`,
|
||||
top: `${adjustedPosition.value.y}px`
|
||||
}));
|
||||
|
||||
const availableLanguages = computed(() => {
|
||||
const languageMap = translationStore.translatorLanguages[translatorSelector.value];
|
||||
if (!languageMap) return [];
|
||||
return Object.entries(languageMap).map(([code, info]: [string, any]) => ({
|
||||
code,
|
||||
name: info.Name || info.name || code
|
||||
}));
|
||||
});
|
||||
|
||||
const availableTranslators = computed(() => translationStore.translators);
|
||||
|
||||
function adjustDialogPosition() {
|
||||
const dialogEl = dialogRef.value;
|
||||
const container = props.portalTarget;
|
||||
if (!dialogEl || !container) return;
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const dialogRect = dialogEl.getBoundingClientRect();
|
||||
|
||||
let x = adjustedPosition.value.x;
|
||||
let y = adjustedPosition.value.y;
|
||||
|
||||
// 限制在容器范围内
|
||||
x = Math.max(containerRect.left, Math.min(x, containerRect.right - dialogRect.width - 8));
|
||||
y = Math.max(containerRect.top, Math.min(y, containerRect.bottom - dialogRect.height - 8));
|
||||
|
||||
adjustedPosition.value = { x, y };
|
||||
}
|
||||
|
||||
function clampPosition(x: number, y: number) {
|
||||
const container = props.portalTarget;
|
||||
const dialogEl = dialogRef.value;
|
||||
if (!container || !dialogEl) return { x, y };
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const dialogRect = dialogEl.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
x: Math.max(containerRect.left, Math.min(x, containerRect.right - dialogRect.width)),
|
||||
y: Math.max(containerRect.top, Math.min(y, containerRect.bottom - dialogRect.height))
|
||||
};
|
||||
}
|
||||
|
||||
async function initializeTranslation() {
|
||||
isLoading.value = true;
|
||||
translatedText.value = '';
|
||||
|
||||
try {
|
||||
await loadTranslators();
|
||||
await translate();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize translation:', error);
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTranslators() {
|
||||
const translators = translationStore.translators;
|
||||
if (translators.length > 0) {
|
||||
translatorSelector.value = translators[0];
|
||||
}
|
||||
resetLanguageSelectors();
|
||||
}
|
||||
|
||||
function resetLanguageSelectors() {
|
||||
const languageMap = translationStore.translatorLanguages[translatorSelector.value];
|
||||
if (!languageMap) return;
|
||||
|
||||
const languages = Object.keys(languageMap);
|
||||
if (languages.length > 0) {
|
||||
sourceLangSelector.value = languages[0];
|
||||
targetLangSelector.value = languages[0];
|
||||
}
|
||||
}
|
||||
|
||||
function handleTranslatorChange() {
|
||||
resetLanguageSelectors();
|
||||
translate();
|
||||
}
|
||||
|
||||
function swapLanguages() {
|
||||
const temp = sourceLangSelector.value;
|
||||
sourceLangSelector.value = targetLangSelector.value;
|
||||
targetLangSelector.value = temp;
|
||||
translate();
|
||||
}
|
||||
|
||||
async function translate() {
|
||||
const sourceLang = sourceLangSelector.value;
|
||||
const targetLang = targetLangSelector.value;
|
||||
const translatorType = translatorSelector.value;
|
||||
|
||||
if (!sourceLang || !targetLang || !translatorType) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
translatedText.value = '';
|
||||
|
||||
try {
|
||||
const result = await translationStore.translateText(
|
||||
sourceText.value,
|
||||
sourceLang,
|
||||
targetLang,
|
||||
translatorType
|
||||
);
|
||||
|
||||
translatedText.value = result.translatedText || result.error || '';
|
||||
} catch (err) {
|
||||
console.error('Translation failed:', err);
|
||||
translatedText.value = 'Translation failed';
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startDrag(e: MouseEvent) {
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.closest('select, button')) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const rect = dialogRef.value!.getBoundingClientRect();
|
||||
dragStart.value = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
};
|
||||
|
||||
isDragging.value = true;
|
||||
document.addEventListener('mousemove', onDrag);
|
||||
document.addEventListener('mouseup', endDrag);
|
||||
}
|
||||
|
||||
function onDrag(e: MouseEvent) {
|
||||
adjustedPosition.value = clampPosition(
|
||||
e.clientX - dragStart.value.x,
|
||||
e.clientY - dragStart.value.y
|
||||
);
|
||||
}
|
||||
|
||||
function endDrag(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
isDragging.value = false;
|
||||
document.removeEventListener('mousemove', onDrag);
|
||||
document.removeEventListener('mouseup', endDrag);
|
||||
}
|
||||
|
||||
async function copyToClipboard() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(translatedText.value);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy text:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (isDragging.value) return;
|
||||
if (dialogRef.value?.contains(e.target as Node)) return;
|
||||
translatorManager.hide();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport :to="teleportTarget">
|
||||
<template v-if="isVisible">
|
||||
<div
|
||||
ref="dialogRef"
|
||||
class="cm-translation-tooltip"
|
||||
:class="{ 'cm-translation-dragging': isDragging }"
|
||||
:style="dialogStyle"
|
||||
@mousedown="startDrag"
|
||||
@keydown.esc="translatorManager.hide"
|
||||
@contextmenu.prevent
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="cm-translation-header">
|
||||
<div class="cm-translation-controls">
|
||||
<select
|
||||
v-model="sourceLangSelector"
|
||||
class="cm-translation-select"
|
||||
@change="translate"
|
||||
@mousedown.stop
|
||||
>
|
||||
<option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<button class="cm-translation-swap" @click="swapLanguages" @mousedown.stop title="交换语言">
|
||||
<svg viewBox="0 0 24 24" width="11" height="11">
|
||||
<path fill="currentColor" d="M7.5 21L3 16.5L7.5 12L9 13.5L7 15.5H15V13H17V17.5H7L9 19.5L7.5 21M16.5 3L21 7.5L16.5 12L15 10.5L17 8.5H9V11H7V6.5H17L15 4.5L16.5 3Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<select
|
||||
v-model="targetLangSelector"
|
||||
class="cm-translation-select"
|
||||
@change="translate"
|
||||
@mousedown.stop
|
||||
>
|
||||
<option v-for="lang in availableLanguages" :key="lang.code" :value="lang.code">
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
v-model="translatorSelector"
|
||||
class="cm-translation-select"
|
||||
@change="handleTranslatorChange"
|
||||
@mousedown.stop
|
||||
>
|
||||
<option v-for="translator in availableTranslators" :key="translator" :value="translator">
|
||||
{{ translator }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-translation-scroll-container">
|
||||
<div v-if="isLoading" class="cm-translation-loading">
|
||||
Translation...
|
||||
</div>
|
||||
|
||||
<div v-else class="cm-translation-result">
|
||||
<div class="cm-translation-result-wrapper">
|
||||
<button
|
||||
v-if="translatedText"
|
||||
class="cm-translation-copy-btn"
|
||||
@click="copyToClipboard"
|
||||
@mousedown.stop
|
||||
title="复制"
|
||||
>
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="cm-translation-target">{{ translatedText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cm-translation-tooltip {
|
||||
position: fixed;
|
||||
background: var(--settings-card-bg, #fff);
|
||||
color: var(--text-primary, #333);
|
||||
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
padding: 6px;
|
||||
max-width: 240px;
|
||||
max-height: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-family: var(--voidraft-font-mono, system-ui, -apple-system, sans-serif), serif;
|
||||
font-size: 10px;
|
||||
user-select: none;
|
||||
cursor: grab;
|
||||
z-index: 10000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cm-translation-dragging {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
z-index: 10001;
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
.cm-translation-header {
|
||||
margin-bottom: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cm-translation-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.cm-translation-select {
|
||||
padding: 2px 3px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
|
||||
background: var(--bg-primary, #f8f8f8);
|
||||
font-size: 10px;
|
||||
color: var(--text-primary, #333);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 65px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cm-translation-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-color, rgba(66, 133, 244, 0.5));
|
||||
}
|
||||
|
||||
.cm-translation-swap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
|
||||
background: var(--bg-primary, transparent);
|
||||
color: var(--text-muted, #666);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.cm-translation-swap:hover {
|
||||
background: var(--bg-hover, rgba(66, 133, 244, 0.08));
|
||||
border-color: var(--border-color, rgba(66, 133, 244, 0.3));
|
||||
}
|
||||
|
||||
.cm-translation-scroll-container {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.cm-translation-scroll-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.cm-translation-scroll-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.cm-translation-scroll-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.cm-translation-result {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cm-translation-result-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cm-translation-copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
|
||||
background: var(--bg-primary, rgba(255, 255, 255, 0.9));
|
||||
color: var(--text-muted, #666);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
z-index: 2;
|
||||
opacity: 0.6;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.cm-translation-copy-btn:hover {
|
||||
background: var(--bg-hover, rgba(66, 133, 244, 0.1));
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.cm-translation-copy-btn svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.cm-translation-target {
|
||||
padding: 5px;
|
||||
padding-right: 24px;
|
||||
background: var(--bg-primary, rgba(66, 133, 244, 0.03));
|
||||
color: var(--text-primary, #333);
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.cm-translation-loading {
|
||||
padding: 6px;
|
||||
text-align: center;
|
||||
color: var(--text-muted, #666);
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.cm-translation-loading::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--text-muted, rgba(0, 0, 0, 0.2));
|
||||
border-top-color: var(--text-muted, #666);
|
||||
animation: cm-translation-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes cm-translation-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,355 +1,84 @@
|
||||
import { Extension, StateField, StateEffect, StateEffectType } from '@codemirror/state';
|
||||
import { Extension, StateField } from '@codemirror/state';
|
||||
import { EditorView, showTooltip, Tooltip } from '@codemirror/view';
|
||||
import { createTranslationTooltip } from './tooltip';
|
||||
import {
|
||||
TranslatorConfig,
|
||||
DEFAULT_TRANSLATION_CONFIG,
|
||||
TRANSLATION_ICON_SVG
|
||||
} from '@/common/constant/translation';
|
||||
import { translatorManager } from './manager';
|
||||
import { TRANSLATION_ICON_SVG } from '@/common/constant/translation';
|
||||
|
||||
function TranslationTooltips(state: any): readonly Tooltip[] {
|
||||
const selection = state.selection.main;
|
||||
if (selection.empty) return [];
|
||||
|
||||
const selectedText = state.sliceDoc(selection.from, selection.to);
|
||||
if (!selectedText.trim()) return [];
|
||||
|
||||
return [{
|
||||
pos: selection.to,
|
||||
above: false,
|
||||
strictSide: true,
|
||||
arrow: false,
|
||||
create: (view) => {
|
||||
const dom = document.createElement('div');
|
||||
dom.className = 'cm-translator-button';
|
||||
dom.innerHTML = TRANSLATION_ICON_SVG;
|
||||
|
||||
class TranslatorExtension {
|
||||
private config: TranslatorConfig;
|
||||
private setTranslationTooltip: StateEffectType<Tooltip | null>;
|
||||
private translationTooltipField: StateField<readonly Tooltip[]>;
|
||||
private translationButtonField: StateField<readonly Tooltip[]>;
|
||||
dom.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
showTranslatorDialog(view);
|
||||
});
|
||||
|
||||
constructor(config?: Partial<TranslatorConfig>) {
|
||||
// 初始化配置
|
||||
this.config = {
|
||||
minSelectionLength: DEFAULT_TRANSLATION_CONFIG.minSelectionLength,
|
||||
maxTranslationLength: DEFAULT_TRANSLATION_CONFIG.maxTranslationLength,
|
||||
...config
|
||||
};
|
||||
|
||||
// 初始化状态效果
|
||||
this.setTranslationTooltip = StateEffect.define<Tooltip | null>();
|
||||
|
||||
// 初始化翻译气泡状态字段
|
||||
this.translationTooltipField = StateField.define<readonly Tooltip[]>({
|
||||
create: () => [],
|
||||
update: (tooltips, tr) => {
|
||||
// 检查是否有特定的状态效果来更新tooltips
|
||||
for (const effect of tr.effects) {
|
||||
if (effect.is(this.setTranslationTooltip)) {
|
||||
return effect.value ? [effect.value] : [];
|
||||
}
|
||||
}
|
||||
|
||||
// 如果文档或选择变化，隐藏气泡
|
||||
if (tr.docChanged || tr.selection) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return tooltips;
|
||||
},
|
||||
provide: field => showTooltip.computeN([field], state => state.field(field))
|
||||
});
|
||||
|
||||
// 初始化翻译按钮状态字段
|
||||
this.translationButtonField = StateField.define<readonly Tooltip[]>({
|
||||
create: (state) => this.getTranslationButtonTooltips(state),
|
||||
update: (tooltips, tr) => {
|
||||
// 如果文档或选择变化，重新计算tooltip
|
||||
if (tr.docChanged || tr.selection) {
|
||||
return this.getTranslationButtonTooltips(tr.state);
|
||||
}
|
||||
|
||||
// 检查是否有翻译气泡显示，如果有则不显示按钮
|
||||
if (tr.state.field(this.translationTooltipField).length > 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return tooltips;
|
||||
},
|
||||
provide: field => showTooltip.computeN([field], state => state.field(field))
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据当前选择获取翻译按钮tooltip
|
||||
*/
|
||||
private getTranslationButtonTooltips(state: any): readonly Tooltip[] {
|
||||
// 如果气泡已显示，则不显示按钮
|
||||
if (state.field(this.translationTooltipField).length > 0) return [];
|
||||
|
||||
const selection = state.selection.main;
|
||||
|
||||
// 如果没有选中文本，不显示按钮
|
||||
if (selection.empty) return [];
|
||||
|
||||
// 获取选中的文本
|
||||
const selectedText = state.sliceDoc(selection.from, selection.to);
|
||||
|
||||
// 检查文本是否只包含空格
|
||||
if (!selectedText.trim()) {
|
||||
return [];
|
||||
return { dom };
|
||||
}
|
||||
|
||||
// 检查文本长度条件
|
||||
if (selectedText.length < this.config.minSelectionLength ||
|
||||
selectedText.length > this.config.maxTranslationLength) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// 返回翻译按钮tooltip配置
|
||||
return [{
|
||||
pos: selection.to,
|
||||
above: false,
|
||||
strictSide: true,
|
||||
arrow: false,
|
||||
create: (view) => {
|
||||
// 创建按钮DOM
|
||||
const dom = document.createElement('div');
|
||||
dom.className = 'cm-translator-button';
|
||||
dom.innerHTML = TRANSLATION_ICON_SVG;
|
||||
|
||||
// 点击事件
|
||||
dom.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 显示翻译气泡
|
||||
this.showTranslationTooltip(view);
|
||||
});
|
||||
|
||||
return { dom };
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示翻译气泡
|
||||
*/
|
||||
private showTranslationTooltip(view: EditorView) {
|
||||
// 直接从当前选择获取文本
|
||||
const selection = view.state.selection.main;
|
||||
if (selection.empty) return;
|
||||
|
||||
const selectedText = view.state.sliceDoc(selection.from, selection.to);
|
||||
if (!selectedText.trim()) return;
|
||||
|
||||
// 创建翻译气泡
|
||||
const tooltip = createTranslationTooltip(view, selectedText);
|
||||
|
||||
// 更新状态以显示气泡
|
||||
view.dispatch({
|
||||
effects: this.setTranslationTooltip.of(tooltip)
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建扩展
|
||||
*/
|
||||
createExtension(): Extension {
|
||||
return [
|
||||
// 翻译按钮tooltip
|
||||
this.translationButtonField,
|
||||
// 翻译气泡tooltip
|
||||
this.translationTooltipField,
|
||||
|
||||
// 添加基础样式
|
||||
EditorView.baseTheme({
|
||||
".cm-translator-button": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
background: "var(--bg-secondary, transparent)",
|
||||
color: "var(--text-muted, #4285f4)",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
borderRadius: "3px",
|
||||
padding: "2px",
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
|
||||
userSelect: "none",
|
||||
"&:hover": {
|
||||
background: "var(--bg-hover, rgba(66, 133, 244, 0.1))"
|
||||
}
|
||||
},
|
||||
|
||||
// 翻译气泡样式
|
||||
".cm-translation-tooltip": {
|
||||
background: "var(--bg-secondary, #fff)",
|
||||
color: "var(--text-primary, #333)",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
borderRadius: "3px",
|
||||
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
|
||||
padding: "8px",
|
||||
maxWidth: "300px",
|
||||
maxHeight: "200px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
overflow: "hidden",
|
||||
fontFamily: "var(--font-family, system-ui, -apple-system, sans-serif)",
|
||||
fontSize: "11px",
|
||||
userSelect: "none",
|
||||
cursor: "grab"
|
||||
},
|
||||
|
||||
// 拖拽状态样式
|
||||
".cm-translation-dragging": {
|
||||
boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
|
||||
zIndex: "1000",
|
||||
cursor: "grabbing !important"
|
||||
},
|
||||
|
||||
".cm-translation-header": {
|
||||
marginBottom: "8px",
|
||||
flexShrink: "0"
|
||||
},
|
||||
|
||||
".cm-translation-controls": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
flexWrap: "nowrap"
|
||||
},
|
||||
|
||||
".cm-translation-select": {
|
||||
padding: "2px 4px",
|
||||
borderRadius: "3px",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
background: "var(--bg-primary, #f5f5f5)",
|
||||
fontSize: "11px",
|
||||
color: "var(--text-primary, #333)",
|
||||
flex: "1",
|
||||
minWidth: "0",
|
||||
maxWidth: "80px"
|
||||
},
|
||||
|
||||
".cm-translation-swap": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
borderRadius: "3px",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
background: "var(--bg-primary, transparent)",
|
||||
color: "var(--text-muted, #666)",
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
flexShrink: "0",
|
||||
"&:hover": {
|
||||
background: "var(--bg-hover, rgba(66, 133, 244, 0.1))"
|
||||
}
|
||||
},
|
||||
|
||||
// 滚动容器
|
||||
".cm-translation-scroll-container": {
|
||||
overflowY: "auto",
|
||||
flex: "1",
|
||||
minHeight: "0"
|
||||
},
|
||||
|
||||
".cm-translation-result": {
|
||||
display: "flex",
|
||||
flexDirection: "column"
|
||||
},
|
||||
|
||||
".cm-translation-result-header": {
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
marginBottom: "4px"
|
||||
},
|
||||
|
||||
".cm-translation-result-wrapper": {
|
||||
position: "relative",
|
||||
width: "100%"
|
||||
},
|
||||
|
||||
".cm-translation-copy-btn": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
borderRadius: "3px",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
background: "var(--bg-primary, transparent)",
|
||||
color: "var(--text-muted, #666)",
|
||||
cursor: "pointer",
|
||||
padding: "0",
|
||||
position: "absolute",
|
||||
top: "4px",
|
||||
right: "4px",
|
||||
zIndex: "2",
|
||||
opacity: "0.7",
|
||||
"&:hover": {
|
||||
background: "var(--bg-hover, rgba(66, 133, 244, 0.1))",
|
||||
opacity: "1"
|
||||
},
|
||||
"&.copied": {
|
||||
background: "var(--bg-success, #4caf50)",
|
||||
color: "white",
|
||||
border: "1px solid var(--bg-success, #4caf50)",
|
||||
opacity: "1"
|
||||
}
|
||||
},
|
||||
|
||||
".cm-translation-target": {
|
||||
padding: "6px",
|
||||
paddingRight: "28px", // 为复制按钮留出空间
|
||||
background: "var(--bg-primary, rgba(66, 133, 244, 0.05))",
|
||||
color: "var(--text-primary, #333)",
|
||||
borderRadius: "3px",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-word"
|
||||
},
|
||||
|
||||
".cm-translation-notice": {
|
||||
fontSize: "10px",
|
||||
color: "var(--text-muted, #888)",
|
||||
padding: "2px 0",
|
||||
fontStyle: "italic",
|
||||
textAlign: "center",
|
||||
marginBottom: "2px"
|
||||
},
|
||||
|
||||
".cm-translation-error": {
|
||||
color: "var(--text-danger, #d32f2f)",
|
||||
fontStyle: "italic"
|
||||
},
|
||||
|
||||
".cm-translation-loading": {
|
||||
padding: "8px",
|
||||
textAlign: "center",
|
||||
color: "var(--text-muted, #666)",
|
||||
fontSize: "11px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: "6px"
|
||||
},
|
||||
|
||||
".cm-translation-loading::before": {
|
||||
content: "''",
|
||||
display: "inline-block",
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
borderRadius: "50%",
|
||||
border: "2px solid var(--text-muted, #666)",
|
||||
borderTopColor: "transparent",
|
||||
animation: "cm-translation-spin 1s linear infinite"
|
||||
},
|
||||
|
||||
"@keyframes cm-translation-spin": {
|
||||
"0%": { transform: "rotate(0deg)" },
|
||||
"100%": { transform: "rotate(360deg)" }
|
||||
}
|
||||
})
|
||||
];
|
||||
}
|
||||
}];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建翻译扩展
|
||||
*/
|
||||
export function createTranslatorExtension(config?: Partial<TranslatorConfig>): Extension {
|
||||
const translatorExtension = new TranslatorExtension(config);
|
||||
return translatorExtension.createExtension();
|
||||
function showTranslatorDialog(view: EditorView) {
|
||||
const selection = view.state.selection.main;
|
||||
if (selection.empty) return;
|
||||
|
||||
const selectedText = view.state.sliceDoc(selection.from, selection.to);
|
||||
if (!selectedText.trim()) return;
|
||||
|
||||
const coords = view.coordsAtPos(selection.to);
|
||||
if (!coords) return;
|
||||
|
||||
translatorManager.show(view, coords.left, coords.bottom + 5, selectedText);
|
||||
}
|
||||
|
||||
const translationButtonField = StateField.define<readonly Tooltip[]>({
|
||||
create: (state) => TranslationTooltips(state),
|
||||
update: (tooltips, tr) => {
|
||||
if (tr.docChanged || tr.selection) {
|
||||
return TranslationTooltips(tr.state);
|
||||
}
|
||||
return tooltips;
|
||||
},
|
||||
provide: field => showTooltip.computeN([field], state => state.field(field))
|
||||
});
|
||||
|
||||
export function createTranslatorExtension(): Extension {
|
||||
return [
|
||||
translationButtonField,
|
||||
EditorView.baseTheme({
|
||||
".cm-translator-button": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
background: "var(--bg-secondary, transparent)",
|
||||
color: "var(--text-muted, #4285f4)",
|
||||
border: "1px solid var(--border-color, #dadce0)",
|
||||
borderRadius: "3px",
|
||||
padding: "2px",
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
|
||||
userSelect: "none",
|
||||
"&:hover": {
|
||||
background: "var(--bg-hover, rgba(66, 133, 244, 0.1))"
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
}
|
||||
|
||||
export default createTranslatorExtension;
|
||||
66
frontend/src/views/editor/extensions/translator/manager.ts
Normal file
66
frontend/src/views/editor/extensions/translator/manager.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import type { EditorView } from '@codemirror/view';
|
||||
import { readonly, shallowRef, type ShallowRef } from 'vue';
|
||||
|
||||
interface TranslatorPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
interface TranslatorState {
|
||||
visible: boolean;
|
||||
position: TranslatorPosition;
|
||||
sourceText: string;
|
||||
view: EditorView | null;
|
||||
}
|
||||
|
||||
class TranslatorManager {
|
||||
private state: ShallowRef<TranslatorState> = shallowRef({
|
||||
visible: false,
|
||||
position: { x: 0, y: 0 },
|
||||
sourceText: '',
|
||||
view: null
|
||||
});
|
||||
|
||||
useState() {
|
||||
return readonly(this.state);
|
||||
}
|
||||
|
||||
show(view: EditorView, clientX: number, clientY: number, text: string): void {
|
||||
this.state.value = {
|
||||
visible: true,
|
||||
position: { x: clientX, y: clientY },
|
||||
sourceText: text,
|
||||
view
|
||||
};
|
||||
}
|
||||
|
||||
hide(): void {
|
||||
if (!this.state.value.visible) {
|
||||
return;
|
||||
}
|
||||
|
||||
const view = this.state.value.view;
|
||||
this.state.value = {
|
||||
visible: false,
|
||||
position: { x: 0, y: 0 },
|
||||
sourceText: '',
|
||||
view: null
|
||||
};
|
||||
|
||||
if (view) {
|
||||
view.focus();
|
||||
}
|
||||
}
|
||||
|
||||
destroy(): void {
|
||||
this.state.value = {
|
||||
visible: false,
|
||||
position: { x: 0, y: 0 },
|
||||
sourceText: '',
|
||||
view: null
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const translatorManager = new TranslatorManager();
|
||||
|
||||
@@ -1,598 +0,0 @@
|
||||
import {EditorView, Tooltip, TooltipView} from '@codemirror/view';
|
||||
import {useTranslationStore} from '@/stores/translationStore';
|
||||
|
||||
/**
|
||||
* 翻译气泡弹窗类
|
||||
* 提供文本翻译功能的交互式界面
|
||||
*/
|
||||
export class TranslationTooltip implements TooltipView {
|
||||
// ===== 核心属性 =====
|
||||
dom!: HTMLElement;
|
||||
sourceText: string;
|
||||
translationStore: ReturnType<typeof useTranslationStore>;
|
||||
|
||||
// ===== UI 元素 =====
|
||||
private translatorSelector!: HTMLSelectElement;
|
||||
private sourceLangSelector!: HTMLSelectElement;
|
||||
private targetLangSelector!: HTMLSelectElement;
|
||||
private resultContainer!: HTMLDivElement;
|
||||
private loadingIndicator!: HTMLDivElement;
|
||||
private swapButton!: HTMLButtonElement;
|
||||
|
||||
// ===== 状态管理 =====
|
||||
private translatedText: string = '';
|
||||
private eventListeners: Array<{element: HTMLElement | Document, event: string, handler: EventListener}> = [];
|
||||
|
||||
// ===== 拖拽状态 =====
|
||||
private isDragging: boolean = false;
|
||||
private dragOffset: { x: number; y: number } = { x: 0, y: 0 };
|
||||
|
||||
constructor(_view: EditorView, text: string) {
|
||||
this.sourceText = text;
|
||||
this.translationStore = useTranslationStore();
|
||||
|
||||
this.initializeDOM();
|
||||
this.setupEventListeners();
|
||||
this.initializeTranslation();
|
||||
}
|
||||
|
||||
// ===== DOM 初始化 =====
|
||||
|
||||
/**
|
||||
* 初始化DOM结构
|
||||
*/
|
||||
private initializeDOM(): void {
|
||||
this.dom = this.createElement('div', 'cm-translation-tooltip');
|
||||
// 设置为绝对定位，允许拖拽移动
|
||||
this.dom.style.position = 'absolute';
|
||||
|
||||
const header = this.createHeader();
|
||||
const scrollContainer = this.createScrollContainer();
|
||||
|
||||
this.dom.appendChild(header);
|
||||
this.dom.appendChild(scrollContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建头部控制区域
|
||||
*/
|
||||
private createHeader(): HTMLElement {
|
||||
const header = this.createElement('div', 'cm-translation-header');
|
||||
|
||||
const controlsContainer = this.createElement('div', 'cm-translation-controls');
|
||||
|
||||
// 创建所有控制元素
|
||||
this.sourceLangSelector = this.createSelector('cm-translation-select');
|
||||
this.swapButton = this.createSwapButton();
|
||||
this.targetLangSelector = this.createSelector('cm-translation-select');
|
||||
this.translatorSelector = this.createTranslatorSelector();
|
||||
|
||||
// 添加到控制容器
|
||||
controlsContainer.appendChild(this.sourceLangSelector);
|
||||
controlsContainer.appendChild(this.swapButton);
|
||||
controlsContainer.appendChild(this.targetLangSelector);
|
||||
controlsContainer.appendChild(this.translatorSelector);
|
||||
|
||||
header.appendChild(controlsContainer);
|
||||
return header;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建滚动容器
|
||||
*/
|
||||
private createScrollContainer(): HTMLElement {
|
||||
const scrollContainer = this.createElement('div', 'cm-translation-scroll-container');
|
||||
|
||||
this.loadingIndicator = this.createElement('div', 'cm-translation-loading') as HTMLDivElement;
|
||||
this.loadingIndicator.textContent = 'Translation...';
|
||||
this.loadingIndicator.style.display = 'none';
|
||||
|
||||
this.resultContainer = this.createElement('div', 'cm-translation-result') as HTMLDivElement;
|
||||
|
||||
scrollContainer.appendChild(this.loadingIndicator);
|
||||
scrollContainer.appendChild(this.resultContainer);
|
||||
|
||||
return scrollContainer;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建选择器元素
|
||||
*/
|
||||
private createSelector(className: string): HTMLSelectElement {
|
||||
const select = this.createElement('select', className) as HTMLSelectElement;
|
||||
return select;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建语言交换按钮
|
||||
*/
|
||||
private createSwapButton(): HTMLButtonElement {
|
||||
const button = this.createElement('button', 'cm-translation-swap') as HTMLButtonElement;
|
||||
button.innerHTML = `<svg viewBox="0 0 24 24" width="12" height="12"><path fill="currentColor" d="M7.5 21L3 16.5L7.5 12L9 13.5L7 15.5H15V13H17V17.5H7L9 19.5L7.5 21M16.5 3L21 7.5L16.5 12L15 10.5L17 8.5H9V11H7V6.5H17L15 4.5L16.5 3Z"/></svg>`;
|
||||
return button;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建翻译器选择器
|
||||
*/
|
||||
private createTranslatorSelector(): HTMLSelectElement {
|
||||
const select = this.createSelector('cm-translation-select');
|
||||
const tempOption = this.createElement('option') as HTMLOptionElement;
|
||||
tempOption.textContent = 'Loading...';
|
||||
select.appendChild(tempOption);
|
||||
return select;
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用DOM元素创建方法
|
||||
*/
|
||||
private createElement(tag: string, className?: string): HTMLElement {
|
||||
const element = document.createElement(tag);
|
||||
if (className) {
|
||||
element.className = className;
|
||||
}
|
||||
return element;
|
||||
}
|
||||
|
||||
// ===== 事件管理 =====
|
||||
|
||||
/**
|
||||
* 设置事件监听器
|
||||
*/
|
||||
private setupEventListeners(): void {
|
||||
this.addEventListenerWithCleanup(this.sourceLangSelector, 'change', () => {
|
||||
this.handleLanguageChange();
|
||||
});
|
||||
|
||||
this.addEventListenerWithCleanup(this.targetLangSelector, 'change', () => {
|
||||
this.handleLanguageChange();
|
||||
});
|
||||
|
||||
this.addEventListenerWithCleanup(this.swapButton, 'click', () => {
|
||||
this.swapLanguages();
|
||||
});
|
||||
|
||||
// 添加拖拽事件监听器
|
||||
this.setupDragListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加事件监听器并记录以便清理
|
||||
*/
|
||||
private addEventListenerWithCleanup(element: HTMLElement | Document, event: string, handler: EventListener): void {
|
||||
element.addEventListener(event, handler);
|
||||
this.eventListeners.push({ element, event, handler });
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理所有事件监听器
|
||||
*/
|
||||
private cleanupEventListeners(): void {
|
||||
this.eventListeners.forEach(({ element, event, handler }) => {
|
||||
element.removeEventListener(event, handler);
|
||||
});
|
||||
this.eventListeners = [];
|
||||
}
|
||||
|
||||
// ===== 初始化和生命周期 =====
|
||||
|
||||
/**
|
||||
* 初始化翻译功能
|
||||
*/
|
||||
private async initializeTranslation(): Promise<void> {
|
||||
this.showLoading();
|
||||
this.resultContainer.innerHTML = '<div class="cm-translation-loading">Loading...</div>';
|
||||
|
||||
try {
|
||||
await this.loadTranslators();
|
||||
await this.translate();
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize translation:', error);
|
||||
this.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 语言管理 =====
|
||||
|
||||
/**
|
||||
* 设置拖拽事件监听器
|
||||
*/
|
||||
private setupDragListeners(): void {
|
||||
// 在整个翻译框上监听鼠标按下事件
|
||||
this.addEventListenerWithCleanup(this.dom, 'mousedown', (e: Event) => {
|
||||
const mouseEvent = e as MouseEvent;
|
||||
const target = mouseEvent.target as HTMLElement;
|
||||
|
||||
// 如果点击的是交互元素（按钮、选择框等），不启动拖拽
|
||||
if (target.tagName === 'SELECT' || target.tagName === 'BUTTON' ||
|
||||
target.tagName === 'OPTION' || target.closest('select') || target.closest('button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.startDrag(mouseEvent);
|
||||
});
|
||||
|
||||
// 鼠标移动
|
||||
this.addEventListenerWithCleanup(document, 'mousemove', (e: Event) => {
|
||||
const mouseEvent = e as MouseEvent;
|
||||
this.onDrag(mouseEvent);
|
||||
});
|
||||
|
||||
// 鼠标释放结束拖拽
|
||||
this.addEventListenerWithCleanup(document, 'mouseup', () => {
|
||||
this.endDrag();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始拖拽
|
||||
*/
|
||||
private startDrag(e: MouseEvent): void {
|
||||
e.preventDefault();
|
||||
this.isDragging = true;
|
||||
|
||||
const rect = this.dom.getBoundingClientRect();
|
||||
this.dragOffset = {
|
||||
x: e.clientX - rect.left,
|
||||
y: e.clientY - rect.top
|
||||
};
|
||||
|
||||
// 添加拖拽状态样式
|
||||
this.dom.classList.add('cm-translation-dragging');
|
||||
this.dom.style.cursor = 'grabbing';
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖拽过程中
|
||||
*/
|
||||
private onDrag(e: MouseEvent): void {
|
||||
if (!this.isDragging) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
const newX = e.clientX - this.dragOffset.x;
|
||||
const newY = e.clientY - this.dragOffset.y;
|
||||
|
||||
// 确保不会拖拽到视窗外
|
||||
const maxX = window.innerWidth - this.dom.offsetWidth;
|
||||
const maxY = window.innerHeight - this.dom.offsetHeight;
|
||||
|
||||
const clampedX = Math.max(0, Math.min(newX, maxX));
|
||||
const clampedY = Math.max(0, Math.min(newY, maxY));
|
||||
|
||||
this.dom.style.left = `${clampedX}px`;
|
||||
this.dom.style.top = `${clampedY}px`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束拖拽
|
||||
*/
|
||||
private endDrag(): void {
|
||||
if (!this.isDragging) return;
|
||||
|
||||
this.isDragging = false;
|
||||
|
||||
// 移除拖拽状态样式
|
||||
this.dom.classList.remove('cm-translation-dragging');
|
||||
this.dom.style.cursor = 'default';
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理语言变更
|
||||
*/
|
||||
private handleLanguageChange(): void {
|
||||
// 语言变更后重新翻译，具体的语言限制逻辑在store中处理
|
||||
this.translate();
|
||||
}
|
||||
|
||||
/**
|
||||
* 交换源语言和目标语言
|
||||
*/
|
||||
private swapLanguages(): void {
|
||||
const temp = this.sourceLangSelector.value;
|
||||
this.sourceLangSelector.value = this.targetLangSelector.value;
|
||||
this.targetLangSelector.value = temp;
|
||||
this.translate();
|
||||
}
|
||||
|
||||
// ===== 翻译器管理 =====
|
||||
|
||||
/**
|
||||
* 加载翻译器选项
|
||||
*/
|
||||
private async loadTranslators(): Promise<boolean> {
|
||||
try {
|
||||
this.clearSelectOptions(this.translatorSelector);
|
||||
|
||||
const translators = this.translationStore.translators;
|
||||
this.populateTranslatorOptions(translators);
|
||||
|
||||
// 添加翻译器变更事件监听
|
||||
this.addEventListenerWithCleanup(this.translatorSelector, 'change', () => {
|
||||
this.handleTranslatorChange();
|
||||
});
|
||||
|
||||
await this.updateLanguageSelectors();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Failed to load translators:', error);
|
||||
this.loadDefaultTranslators();
|
||||
await this.updateLanguageSelectors();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 填充翻译器选项
|
||||
*/
|
||||
private populateTranslatorOptions(translators: string[]): void {
|
||||
translators.forEach((translator, index) => {
|
||||
const option = this.createElement('option') as HTMLOptionElement;
|
||||
option.value = translator;
|
||||
option.textContent = translator;
|
||||
option.selected = index === 0; // 选择第一个翻译器
|
||||
this.translatorSelector.appendChild(option);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载默认翻译器
|
||||
*/
|
||||
private loadDefaultTranslators(): void {
|
||||
this.clearSelectOptions(this.translatorSelector);
|
||||
|
||||
// 使用从后端获取的翻译器列表
|
||||
const translators = this.translationStore.translators;
|
||||
this.populateTranslatorOptions(translators);
|
||||
|
||||
this.addEventListenerWithCleanup(this.translatorSelector, 'change', () => {
|
||||
this.handleTranslatorChange();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理翻译器选择变化
|
||||
*/
|
||||
private async handleTranslatorChange(): Promise<void> {
|
||||
await this.updateLanguageSelectors();
|
||||
this.translate();
|
||||
}
|
||||
|
||||
// ===== 语言选择器管理 =====
|
||||
|
||||
/**
|
||||
* 更新语言选择器
|
||||
*/
|
||||
private async updateLanguageSelectors(): Promise<void> {
|
||||
const currentTranslator = this.translatorSelector.value;
|
||||
|
||||
// 保存当前选中的语言
|
||||
const currentSourceLang = this.sourceLangSelector.value || '';
|
||||
const currentTargetLang = this.targetLangSelector.value;
|
||||
|
||||
// 清空选择器
|
||||
this.clearSelectOptions(this.sourceLangSelector);
|
||||
this.clearSelectOptions(this.targetLangSelector);
|
||||
|
||||
// 直接使用预加载的语言映射
|
||||
const languageMap = this.translationStore.translatorLanguages[currentTranslator];
|
||||
|
||||
if (!languageMap || Object.keys(languageMap).length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加语言选项
|
||||
Object.entries(languageMap).forEach(([code, langInfo]) => {
|
||||
this.addLanguageOption(code, langInfo);
|
||||
});
|
||||
|
||||
// 恢复之前的语言选择
|
||||
this.restoreLanguageSelection(currentSourceLang, currentTargetLang);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空选择器选项
|
||||
*/
|
||||
private clearSelectOptions(selector: HTMLSelectElement): void {
|
||||
while (selector.firstChild) {
|
||||
selector.removeChild(selector.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加语言选项到选择器
|
||||
*/
|
||||
private addLanguageOption(code: string, langInfo: any): void {
|
||||
const displayName = langInfo.Name || langInfo.name || code;
|
||||
|
||||
// 添加源语言选项
|
||||
const sourceOption = this.createElement('option') as HTMLOptionElement;
|
||||
sourceOption.value = code;
|
||||
sourceOption.textContent = displayName;
|
||||
this.sourceLangSelector.appendChild(sourceOption);
|
||||
|
||||
// 添加目标语言选项
|
||||
const targetOption = this.createElement('option') as HTMLOptionElement;
|
||||
targetOption.value = code;
|
||||
targetOption.textContent = displayName;
|
||||
this.targetLangSelector.appendChild(targetOption);
|
||||
}
|
||||
|
||||
/**
|
||||
* 恢复语言选择
|
||||
*/
|
||||
private restoreLanguageSelection(sourceLang: string, targetLang: string): void {
|
||||
// 设置源语言
|
||||
if (sourceLang && this.hasLanguageOption(this.sourceLangSelector, sourceLang)) {
|
||||
this.sourceLangSelector.value = sourceLang;
|
||||
} else if (this.sourceLangSelector.options.length > 0) {
|
||||
this.sourceLangSelector.selectedIndex = 0;
|
||||
}
|
||||
|
||||
// 设置目标语言
|
||||
if (targetLang && this.hasLanguageOption(this.targetLangSelector, targetLang)) {
|
||||
this.targetLangSelector.value = targetLang;
|
||||
} else if (this.targetLangSelector.options.length > 0) {
|
||||
this.targetLangSelector.selectedIndex = 0;
|
||||
}
|
||||
|
||||
// 确保源语言和目标语言不同
|
||||
this.handleLanguageChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查选择器是否有指定语言选项
|
||||
*/
|
||||
private hasLanguageOption(selector: HTMLSelectElement, langCode: string): boolean {
|
||||
return Array.from(selector.options).some(option => option.value === langCode);
|
||||
}
|
||||
|
||||
// ===== 翻译功能 =====
|
||||
|
||||
|
||||
/**
|
||||
* 执行翻译
|
||||
*/
|
||||
private async translate(): Promise<void> {
|
||||
const sourceLang = this.sourceLangSelector.value;
|
||||
const targetLang = this.targetLangSelector.value;
|
||||
const translatorType = this.translatorSelector.value;
|
||||
|
||||
this.showLoading();
|
||||
this.resultContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const result = await this.translationStore.translateText(
|
||||
this.sourceText,
|
||||
sourceLang,
|
||||
targetLang,
|
||||
translatorType
|
||||
);
|
||||
|
||||
this.displayTranslationResult(result);
|
||||
} catch (err) {
|
||||
console.error('Translation failed:', err);
|
||||
this.displayError('Translation failed');
|
||||
} finally {
|
||||
this.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
// ===== UI 状态管理 =====
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
*/
|
||||
private showLoading(): void {
|
||||
this.loadingIndicator.style.display = 'block';
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏加载状态
|
||||
*/
|
||||
private hideLoading(): void {
|
||||
this.loadingIndicator.style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示错误信息
|
||||
*/
|
||||
private displayError(message: string): void {
|
||||
this.resultContainer.innerHTML = '';
|
||||
this.translatedText = '';
|
||||
|
||||
const errorElement = this.createElement('div', 'cm-translation-error');
|
||||
errorElement.textContent = message;
|
||||
this.resultContainer.appendChild(errorElement);
|
||||
}
|
||||
|
||||
// ===== 结果显示 =====
|
||||
|
||||
/**
|
||||
* 显示翻译结果
|
||||
*/
|
||||
private displayTranslationResult(result: any): void {
|
||||
this.resultContainer.innerHTML = '';
|
||||
|
||||
const resultWrapper = this.createElement('div', 'cm-translation-result-wrapper');
|
||||
const translatedTextElem = this.createElement('div', 'cm-translation-target');
|
||||
|
||||
if (result.error) {
|
||||
translatedTextElem.classList.add('cm-translation-error');
|
||||
translatedTextElem.textContent = result.error;
|
||||
this.translatedText = '';
|
||||
} else {
|
||||
this.translatedText = result.translatedText || '';
|
||||
translatedTextElem.textContent = this.translatedText;
|
||||
}
|
||||
|
||||
// 添加复制按钮
|
||||
if (this.translatedText) {
|
||||
const copyButton = this.createCopyButton();
|
||||
resultWrapper.appendChild(copyButton);
|
||||
}
|
||||
|
||||
resultWrapper.appendChild(translatedTextElem);
|
||||
this.resultContainer.appendChild(resultWrapper);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建复制按钮
|
||||
*/
|
||||
private createCopyButton(): HTMLButtonElement {
|
||||
const copyButton = this.createElement('button', 'cm-translation-copy-btn') as HTMLButtonElement;
|
||||
copyButton.innerHTML = `<svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
|
||||
|
||||
this.addEventListenerWithCleanup(copyButton, 'click', () => {
|
||||
this.copyToClipboard(copyButton);
|
||||
});
|
||||
|
||||
return copyButton;
|
||||
}
|
||||
|
||||
/**
|
||||
* 复制文本到剪贴板
|
||||
*/
|
||||
private async copyToClipboard(button: HTMLButtonElement): Promise<void> {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.translatedText);
|
||||
this.showCopySuccess(button);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy text:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示复制成功状态
|
||||
*/
|
||||
private showCopySuccess(button: HTMLButtonElement): void {
|
||||
const originalHTML = button.innerHTML;
|
||||
button.innerHTML = `<svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`;
|
||||
button.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalHTML;
|
||||
button.classList.remove('copied');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// ===== 生命周期管理 =====
|
||||
|
||||
/**
|
||||
* 销毁组件时的清理工作
|
||||
*/
|
||||
destroy(): void {
|
||||
this.cleanupEventListeners();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建翻译气泡
|
||||
export function createTranslationTooltip(view: EditorView, text: string): Tooltip {
|
||||
return {
|
||||
pos: view.state.selection.main.to, // 紧贴文本末尾
|
||||
above: false,
|
||||
strictSide: false,
|
||||
arrow: true,
|
||||
create: () => new TranslationTooltip(view, text)
|
||||
};
|
||||
}
|
||||
@@ -26,7 +26,7 @@ import {deleteLineCommand} from '../extensions/codeblock/deleteLine';
|
||||
import {moveLineDown, moveLineUp} from '../extensions/codeblock/moveLines';
|
||||
import {transposeChars} from '../extensions/codeblock';
|
||||
import {copyCommand, cutCommand, pasteCommand} from '../extensions/codeblock/copyPaste';
|
||||
import {textHighlightToggleCommand} from '../extensions/textHighlight/textHighlightExtension';
|
||||
import {textHighlightToggleCommand} from '../extensions/textHighlight';
|
||||
import {
|
||||
copyLineDown,
|
||||
copyLineUp,
|
||||
|
||||
@@ -4,7 +4,7 @@ import i18n from '@/i18n';
|
||||
import {ExtensionDefinition} from './types';
|
||||
|
||||
import rainbowBracketsExtension from '../extensions/rainbowBracket/rainbowBracketsExtension';
|
||||
import {createTextHighlighter} from '../extensions/textHighlight/textHighlightExtension';
|
||||
import {createTextHighlighter} from '../extensions/textHighlight';
|
||||
import {color} from '../extensions/colorSelector';
|
||||
import {hyperLink} from '../extensions/hyperlink';
|
||||
import {minimap} from '../extensions/minimap';
|
||||
@@ -43,13 +43,7 @@ const EXTENSION_REGISTRY: Record<RegisteredExtensionID, ExtensionEntry> = {
|
||||
descriptionKey: 'extensions.colorSelector.description'
|
||||
},
|
||||
[ExtensionID.ExtensionTranslator]: {
|
||||
definition: defineExtension((config: any) => createTranslatorExtension({
|
||||
minSelectionLength: config?.minSelectionLength ?? 2,
|
||||
maxTranslationLength: config?.maxTranslationLength ?? 5000
|
||||
}), {
|
||||
minSelectionLength: 2,
|
||||
maxTranslationLength: 5000
|
||||
}),
|
||||
definition: defineExtension(() => createTranslatorExtension()),
|
||||
displayNameKey: 'extensions.translator.name',
|
||||
descriptionKey: 'extensions.translator.description'
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user