From 47810a4ccd4e18123241837720358123468c07b1 Mon Sep 17 00:00:00 2001 From: moshangqi <2509678669@qq.com> Date: Tue, 31 Oct 2023 10:21:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E5=88=92=E8=AF=8D?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SelectSavePosition/index.tsx | 2 +- src/core/system-info.ts | 4 ++ src/pages/inject/WordMark/app.tsx | 49 +++++++------- src/pages/setting/shortcut/index.module.less | 1 + src/pages/setting/wordMark/index.module.less | 1 + src/pages/setting/wordMark/index.tsx | 68 +++++++++++++++----- src/styles/global.less | 4 -- 7 files changed, 86 insertions(+), 43 deletions(-) create mode 100644 src/core/system-info.ts diff --git a/src/components/SelectSavePosition/index.tsx b/src/components/SelectSavePosition/index.tsx index 358bbd02..f3661424 100644 --- a/src/components/SelectSavePosition/index.tsx +++ b/src/components/SelectSavePosition/index.tsx @@ -75,7 +75,7 @@ function SelectSavePosition(props: ISelectSavePositionProps) { const positionList = useMemo(() => { return [ - { value: 'note', label: __i18n('保存小记') }, + { value: 'note', label: __i18n('存为小记') }, { value: 'book', label: __i18n('存为文档') }, ]; }, []); diff --git a/src/core/system-info.ts b/src/core/system-info.ts new file mode 100644 index 00000000..7b4e9321 --- /dev/null +++ b/src/core/system-info.ts @@ -0,0 +1,4 @@ +import bowser from 'bowser'; + +const info = bowser.getParser(navigator.userAgent); +export const isMacOs = info.getOSName() === 'macOS'; diff --git a/src/pages/inject/WordMark/app.tsx b/src/pages/inject/WordMark/app.tsx index 5981800f..0952df1d 100644 --- a/src/pages/inject/WordMark/app.tsx +++ b/src/pages/inject/WordMark/app.tsx @@ -5,7 +5,6 @@ import React, { useState, useLayoutEffect, } from 'react'; -import keymaster from 'keymaster'; import { message } from 'antd'; import classnames from 'classnames'; import LinkHelper from '@/isomorphic/link-helper'; @@ -24,10 +23,10 @@ import Inner from './Inner'; import styles from './app.module.less'; function WordMarkApp() { - const [showWordMark, setShowWordMark] = useState(false); const [type, setType] = useState(null); const [selectText, setSelectText] = useState(''); const { forceUpdate } = useForceUpdate(); + const showWordMarkRef = useRef(false); const editorRef = useRef(null); const wrapperRef = useRef(null); const wordMarkPositionRef = useRef({ @@ -49,7 +48,8 @@ function WordMarkApp() { ClipAssistantMessageActions.addContent, text, ); - setShowWordMark(false); + showWordMarkRef.current = false; + forceUpdate(); return; } if (isSaving.current) { @@ -96,7 +96,8 @@ function WordMarkApp() { , ); } - setShowWordMark(false); + showWordMarkRef.current = false; + forceUpdate(); } catch (e) { message.error(__i18n('保存失败，请重试！')); } @@ -108,7 +109,7 @@ function WordMarkApp() { const executeCommand = useCallback( async (t: WordMarkOptionTypeEnum) => { if (t === WordMarkOptionTypeEnum.clipping) { - const selection = document.getSelection(); + const selection = window.getSelection(); let html = ''; if (selection) { html = Array.from(selection.getRangeAt(0).cloneContents().childNodes) @@ -142,7 +143,8 @@ function WordMarkApp() { }, []); const closeWordMark = useCallback(() => { - setShowWordMark(false); + showWordMarkRef.current = false; + forceUpdate(); }, []); useEffect(() => { @@ -163,23 +165,30 @@ function WordMarkApp() { const selection = window.getSelection(); // 如果选中区域可编辑，那么不展示划词 if (isEdit || !selection) { - setShowWordMark(false); + showWordMarkRef.current = false; + setVisible(false); + forceUpdate(); return; } const selectionText = selection.toString(); if (selection.rangeCount <= 0) { - setShowWordMark(false); + showWordMarkRef.current = false; + setVisible(false); + forceUpdate(); return; } if (!selectionText.trim().length) { - setShowWordMark(false); + showWordMarkRef.current = false; + setVisible(false); + forceUpdate(); return; } const range = selection.getRangeAt(0); const rect = range.getBoundingClientRect(); const x = (rect.left + rect.right) / 2; const y = rect.bottom; - setShowWordMark(true); + showWordMarkRef.current = true; + forceUpdate(); setSelectText(selectionText); mouseupPositionRef.current = { x, @@ -196,7 +205,7 @@ function WordMarkApp() { useEffect(() => { setType(null); - }, [selectText, showWordMark]); + }, [selectText, showWordMarkRef.current]); useLayoutEffect(() => { if (!selectText) { @@ -207,20 +216,14 @@ function WordMarkApp() { useEffect(() => { const onkeydown = (e: KeyboardEvent) => { - e.preventDefault(); - setVisible(v => { - message.success( - !v - ? __i18n('本次访问已开启划词工具栏') - : __i18n('本次访问已关闭划词工具栏'), - ); - return !v; - }); + if (e.key === wordMarkContext.evokeWordMarkShortKey && showWordMarkRef.current) { + setVisible(v => !v); + } }; - keymaster(wordMarkContext.evokeWordMarkShortKey, onkeydown); + window.addEventListener('keydown', onkeydown); return () => { - keymaster.unbind(wordMarkContext.evokeWordMarkShortKey); + window.removeEventListener('keydown', onkeydown); }; }, [wordMarkContext]); @@ -232,7 +235,7 @@ function WordMarkApp() { top: `${wordMarkPositionRef.current.top}px`, }} className={classnames(styles.wordMarkWrapper, { - [styles.hidden]: !showWordMark, + [styles.hidden]: !showWordMarkRef.current, })} onMouseUp={e => { // 内部面板阻止冒泡，避免触发 mouseup 事件 diff --git a/src/pages/setting/shortcut/index.module.less b/src/pages/setting/shortcut/index.module.less index 50af3dd0..defc600c 100644 --- a/src/pages/setting/shortcut/index.module.less +++ b/src/pages/setting/shortcut/index.module.less @@ -32,6 +32,7 @@ font-size: @font-size-lg; line-height: 24px; margin-bottom: 16px; + font-weight: 500; } .body { diff --git a/src/pages/setting/wordMark/index.module.less b/src/pages/setting/wordMark/index.module.less index e0bac1dc..d0850e9c 100644 --- a/src/pages/setting/wordMark/index.module.less +++ b/src/pages/setting/wordMark/index.module.less @@ -12,6 +12,7 @@ font-size: @font-size-lg; line-height: 24px; margin-bottom: 16px; + font-weight: 500; } .body { diff --git a/src/pages/setting/wordMark/index.tsx b/src/pages/setting/wordMark/index.tsx index c4ad0ad9..33ae08c0 100644 --- a/src/pages/setting/wordMark/index.tsx +++ b/src/pages/setting/wordMark/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Switch } from 'antd'; +import { Select, Switch } from 'antd'; import { __i18n } from '@/isomorphic//i18n'; import { IWordMarkConfig, @@ -7,10 +7,52 @@ import { } from '@/isomorphic/constant/wordMark'; import SelectSavePosition from '@/components/SelectSavePosition'; import LinkHelper from '@/isomorphic/link-helper'; -import ShortItem from '@/components/ShortItem'; import { backgroundBridge } from '@/core/bridge/background'; +import { isMacOs } from '@/core/system-info'; import styles from './index.module.less'; +const mac = [ + { + value: '', + label: '无', + }, + { + value: 'Meta', + label: 'Command', + }, + { + value: 'Alt', + label: 'Alt', + }, + { + value: 'Shift', + label: 'Shift', + }, + { + value: 'Control', + label: 'Ctrl', + }, +]; + +const windows = [ + { + value: '', + label: '无', + }, + { + value: 'Alt', + label: 'Alt', + }, + { + value: 'Shift', + label: 'Shift', + }, + { + value: 'Control', + label: 'Ctrl', + }, +]; + function WordMark() { const [config, setConfig] = useState(null); @@ -48,19 +90,15 @@ function WordMark() { {!config.enable && (
-
{__i18n('快捷键唤起工具栏')}
- { - onConfigChange(WordMarkConfigKey.evokeWordMarkShortKey, ''); - }} - onChangeShortCut={shortcut => { - onConfigChange( - WordMarkConfigKey.evokeWordMarkShortKey, - shortcut, - ); +
+ {__i18n('选中文本+按指定修饰键唤起')} +
+