yuque · xudafeng · Nov 1, 2023 · Nov 1, 2023
diff --git a/src/background/core/configManager/wordMark.ts b/src/background/core/configManager/wordMark.ts
@@ -1,5 +1,4 @@
 import {
-  WordMarkConfigKey,
   IWordMarkConfig,
   defaultWordMarkConfig,
 } from '@/isomorphic/constant/wordMark';
@@ -11,30 +10,22 @@ import Storage from '../storage';
 
 class WordMarkConfigManager {
   async get() {
-    const config: IWordMarkConfig =
-      (await Storage.get(STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG)) || {};
-
-    // 做一次 config 的合并，保证获取时一定包含 config 中的每一个元素
-    for (const _key of Object.keys(defaultWordMarkConfig)) {
-      const key = _key as keyof IWordMarkConfig;
-      const value = config[key];
-      if (typeof value === 'undefined') {
-        config[key] = defaultWordMarkConfig[key] as never;
-      }
-    }
-
-    return config;
+    const config = await this.getStorageConfig();
+    return this.transformConfig(config);
   }
 
-  async update(key: string, value: any, option?: IConfigManagerOption) {
-    const config = await this.get();
+  async update(
+    key: keyof IWordMarkConfig,
+    value: any,
+    option?: IConfigManagerOption,
+  ) {
+    const config = await this.getStorageConfig();
     const result: IWordMarkConfig = {
       ...config,
       [key]: value,
     };
-
     // enable 改变时，将 disable url 全部清空
-    if (key === WordMarkConfigKey.enable) {
+    if (key === 'enable') {
       result.disableUrl = [];
     }
     await Chrome.storage.local.set({
@@ -58,12 +49,42 @@ class WordMarkConfigManager {
         if (tab.id) {
           Chrome.tabs.sendMessage(tab.id, {
             action: ContentScriptEvents.WordMarkConfigChange,
-            data: config,
+            data: this.transformConfig(config),
           });
         }
       }
     });
   }
+
+  private async getStorageConfig() {
+    const config: IWordMarkConfig =
+      (await Storage.get(STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG)) || {};
+
+    // 做一次 config 的合并，保证获取时一定包含 config 中的每一个元素
+    for (const _key of Object.keys(defaultWordMarkConfig)) {
+      const key = _key as keyof IWordMarkConfig;
+      const value = config[key];
+      if (typeof value === 'undefined') {
+        config[key] = defaultWordMarkConfig[key] as never;
+      }
+    }
+    return config;
+  }
+
+  private transformConfig(config: IWordMarkConfig) {
+    const disableFunction = config.disableFunction;
+
+    const result = {
+      ...config,
+      filterInnerPinList: config.innerPinList.filter(
+        item => !disableFunction.includes(item),
+      ),
+      filterToolbars: config.toolbars.filter(
+        item => !disableFunction.includes(item),
+      ),
+    };
+    return result;
+  }
 }
 
 export const wordMarkConfigManager = new WordMarkConfigManager();
diff --git a/src/components/WordMarkLayout/context.ts b/src/components/WordMarkLayout/context.ts
@@ -1,5 +1,11 @@
 import { createContext } from 'react';
 import { IWordMarkConfig } from '@/isomorphic/constant/wordMark';
+import { WordMarkOptionTypeEnum } from '@/isomorphic/constants';
 
-export type IWordMarkContext = IWordMarkConfig;
-export const WordMarkContext = createContext<IWordMarkContext>({} as IWordMarkContext);
+export type IWordMarkContext = IWordMarkConfig & {
+  filterInnerPinList: Array<WordMarkOptionTypeEnum>;
+  filterToolbars: Array<WordMarkOptionTypeEnum>;
+};
+export const WordMarkContext = createContext<IWordMarkContext>(
+  {} as IWordMarkContext,
+);
diff --git a/src/core/bridge/background/configManager.ts b/src/core/bridge/background/configManager.ts
@@ -2,17 +2,16 @@ import { BackgroundEvents } from '@/isomorphic/background';
 import {
   OperateConfigManagerEnum,
   IConfigManagerOption,
-  ManagerType,
   ManagerKey,
 } from '@/isomorphic/background/configManager';
 import type { ICallBridgeImpl } from './index';
 
 export function createConfigManagerBridge(impl: ICallBridgeImpl) {
   return {
     configManager: {
-      async update(
-        managerType: ManagerType,
-        key: ManagerKey,
+      async update<T extends keyof ManagerKey>(
+        managerType: T,
+        key: ManagerKey[T],
         value: any,
         option?: IConfigManagerOption,
       ): Promise<boolean> {
@@ -33,7 +32,7 @@ export function createConfigManagerBridge(impl: ICallBridgeImpl) {
         });
       },
 
-      async get(managerType: ManagerType): Promise<any> {
+      async get<T extends keyof ManagerKey>(managerType: T): Promise<any> {
         return new Promise(resolve => {
           impl(
             BackgroundEvents.OperateManagerConfig,

diff --git a/src/isomorphic/background/configManager.ts b/src/isomorphic/background/configManager.ts
@@ -6,8 +6,12 @@ export enum OperateConfigManagerEnum {
   update = 'update',
 }
 
-export type ManagerType = 'wordMark' | 'levitate';
-export type ManagerKey = WordMarkConfigKey | LevitateConfigKey;
+export type ManagerKey = {
+  wordMark: WordMarkConfigKey,
+  levitate: LevitateConfigKey
+};
+
+export type ManagerType = keyof ManagerKey;
 
 export interface IConfigManagerOption {
   notice?: boolean;

diff --git a/src/isomorphic/constant/levitate.ts b/src/isomorphic/constant/levitate.ts
@@ -1,6 +1,4 @@
-export type LevitateConfigKey = 'enable' | 'disableUrl' | 'position';
-
-export interface ILevitateConfig {
+export type ILevitateConfig = {
   disableUrl: Array<{
     origin: string;
     icon: string;
@@ -9,6 +7,8 @@ export interface ILevitateConfig {
   enable: boolean;
 }
 
+export type LevitateConfigKey = keyof ILevitateConfig;
+
 export const defaultLevitateConfig: ILevitateConfig = {
   enable: true,
   disableUrl: [],

diff --git a/src/isomorphic/constant/wordMark.ts b/src/isomorphic/constant/wordMark.ts
@@ -1,39 +1,34 @@
 import { ISavePosition } from '@/core/bridge/background/request/mine';
 import { WordMarkOptionTypeEnum } from '../constants';
 
-export enum WordMarkConfigKey {
+export type IWordMarkConfig = {
   // 是否开启
-  enable = 'enable',
+  enable: boolean;
 
   // 剪藏默认存储地址
-  defaultSavePosition = 'defaultSavePosition',
+  defaultSavePosition: ISavePosition;
 
   // 划词置顶的操作
-  innerPinList = 'innerPinList',
+  innerPinList: Array<WordMarkOptionTypeEnum>;
 
   // 禁用页面的 url
-  disableUrl = 'disableUrl',
+  disableUrl: Array<string>;
 
   // 剪藏时唤起面板
-  evokePanelWhenClip = 'evokePanelWhenClip',
+  evokePanelWhenClip: boolean;
 
   // 剪藏面板的排序规则
-  toolbars = 'toolbars',
+  toolbars: Array<WordMarkOptionTypeEnum>;
 
   // 换次面板快捷键
-  evokeWordMarkShortKey = 'evokeWordMarkShortKey',
-}
+  evokeWordMarkShortKey: string;
 
-export interface IWordMarkConfig {
-  [WordMarkConfigKey.enable]: boolean;
-  [WordMarkConfigKey.defaultSavePosition]: ISavePosition;
-  [WordMarkConfigKey.innerPinList]: Array<WordMarkOptionTypeEnum>;
-  [WordMarkConfigKey.disableUrl]: Array<string>;
-  [WordMarkConfigKey.evokePanelWhenClip]: boolean;
-  [WordMarkConfigKey.toolbars]: Array<WordMarkOptionTypeEnum>;
-  [WordMarkConfigKey.evokeWordMarkShortKey]: string;
+  // 用户关闭的划词的某个功能
+  disableFunction: Array<WordMarkOptionTypeEnum>;
 }
 
+export type WordMarkConfigKey = keyof IWordMarkConfig;
+
 export const defaultWordMarkConfig: IWordMarkConfig = {
   enable: false,
   defaultSavePosition: {
@@ -49,4 +44,5 @@ export const defaultWordMarkConfig: IWordMarkConfig = {
   evokePanelWhenClip: false,
   toolbars: [WordMarkOptionTypeEnum.clipping, WordMarkOptionTypeEnum.translate],
   evokeWordMarkShortKey: '',
+  disableFunction: [],
 };
diff --git a/src/isomorphic/link-helper.ts b/src/isomorphic/link-helper.ts
@@ -18,9 +18,9 @@ const LinkHelper = {
   joinGroup:
     'https://www.yuque.com/yuque/yuque-browser-extension/welcome#BQrrd',
   settingPage: chrome.runtime.getURL('setting.html'),
-  wordMarkSettingPage: `${chrome.runtime.getURL('setting.html')}?page=wordMark`,
-  shortcutSettingPage: `${chrome.runtime.getURL('setting.html')}?page=shortcut`,
-  sidePanelSettingPage: `${chrome.runtime.getURL('setting.html')}?page=sidePanel`,
+  wordMarkSettingPage: `${chrome.runtime.getURL('setting.html')}#wordMark`,
+  shortcutSettingPage: `${chrome.runtime.getURL('setting.html')}#shortcut`,
+  sidePanelSettingPage: `${chrome.runtime.getURL('setting.html')}#sidePanel`,
 };
 
 export default LinkHelper;
diff --git a/src/pages/inject/LevitateBall/app.tsx b/src/pages/inject/LevitateBall/app.tsx
@@ -69,7 +69,8 @@ function App() {
 
   const onCloseLevitateBall = () => {
     let disableType: DisableType = 'disableOnce';
-    Modal.confirm({
+    const modal = Modal.confirm({});
+    modal.update({
       content: (
         <AntdLayout>
           <Radio.Group
@@ -108,13 +109,16 @@ function App() {
       footer: (
         <AntdLayout>
           <div className={styles.disableModalFooter}>
-            <Button className={styles.button} onClick={Modal.destroyAll}>
+            <Button className={styles.button} onClick={modal.destroy}>
               {__i18n('取消')}
             </Button>
             <Button
               className={classnames(styles.button, styles.sure)}
               type="primary"
-              onClick={() => disableLevitateBall(disableType)}
+              onClick={() => {
+                disableLevitateBall(disableType);
+                modal.destroy();
+              }}
             >
               {__i18n('确定')}
             </Button>

diff --git a/src/pages/inject/WordMark/Inner/DisableMenu.tsx b/src/pages/inject/WordMark/Inner/DisableMenu.tsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import { __i18n } from '@/isomorphic/i18n';
 import LinkHelper from '@/isomorphic/link-helper';
-import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark';
 import { backgroundBridge } from '@/core/bridge/background';
 import styles from './DisableMenu.module.less';
 
 function DisableMenu() {
   const disableForever = () => {
-    backgroundBridge.configManager.update(
-      'wordMark',
-      WordMarkConfigKey.enable,
-      false,
-      {
-        notice: true,
-      },
-    );
+    backgroundBridge.configManager.update('wordMark', 'enable', false, {
+      notice: true,
+    });
   };
 
   const disableForPage = () => {
     backgroundBridge.configManager.update(
       'wordMark',
-      WordMarkConfigKey.disableUrl,
+      'disableUrl',
       `${window.location.origin}${window.location.pathname}`,
       {
         notice: true,

diff --git a/src/pages/inject/WordMark/Inner/OperateMenu.tsx b/src/pages/inject/WordMark/Inner/OperateMenu.tsx
@@ -4,7 +4,6 @@ import { PushpinOutlined, PushpinFilled } from '@ant-design/icons';
 import classnames from 'classnames';
 import { backgroundBridge } from '@/core/bridge/background';
 import { WordMarkOptionTypeEnum } from '@/isomorphic/constants';
-import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark';
 import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext';
 import DragList from '@/components/DragList';
 import { ToolbarItem, toolbars as defaultToolbars } from '../constants';
@@ -26,11 +25,7 @@ function OperateMenu(props: IOperateMenuProps) {
   const updateToolbar = (list: ToolbarItem[]) => {
     const result = list.map(item => item.id) as WordMarkOptionTypeEnum[];
     setToolbarKeys(result);
-    backgroundBridge.configManager.update(
-      'wordMark',
-      WordMarkConfigKey.toolbars,
-      result,
-    );
+    backgroundBridge.configManager.update('wordMark', 'toolbars', result);
   };
 
   const toolbars = useMemo(() => {
@@ -47,7 +42,9 @@ function OperateMenu(props: IOperateMenuProps) {
   return (
     <div className={styles.menus}>
       <DragList
-        dataSource={toolbars}
+        dataSource={toolbars.filter(
+          item => !wordMarkContext.disableFunction.includes(item.id as any),
+        )}
         renderItem={item => {
           const { type, name, icon } = item;
           const pinned = pinList.includes(type);

diff --git a/src/pages/inject/WordMark/Inner/index.tsx b/src/pages/inject/WordMark/Inner/index.tsx
@@ -1,8 +1,7 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Popover } from 'antd';
 import Icon, { CloseOutlined } from '@ant-design/icons';
 import { WordMarkOptionTypeEnum } from '@/isomorphic/constants';
-import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark';
 import { backgroundBridge } from '@/core/bridge/background';
 import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext';
 import YuqueLogo from '@/assets/svg/yuque-logo.svg';
@@ -20,23 +19,23 @@ function InnerWordMark(props: InnerWordMarkProps) {
   const { executeCommand } = props;
   const wordMarkContext = useWordMarkContext();
   const [pinedTools, setPinedTools] = useState<WordMarkOptionTypeEnum[]>(
-    wordMarkContext.innerPinList,
+    wordMarkContext.filterInnerPinList,
   );
 
   const handlePin = useCallback((type: WordMarkOptionTypeEnum) => {
     setPinedTools(tools => {
       const result = tools.includes(type)
         ? tools.filter(t => t !== type)
         : [type, ...tools];
-      backgroundBridge.configManager.update(
-        'wordMark',
-        WordMarkConfigKey.innerPinList,
-        result,
-      );
+      backgroundBridge.configManager.update('wordMark', 'innerPinList', result);
       return result;
     });
   }, []);
 
+  useEffect(() => {
+    setPinedTools(wordMarkContext.filterInnerPinList);
+  }, [wordMarkContext]);
+
   return (
     <div
       className={styles.innerWordMarkWrapper}

diff --git a/src/pages/inject/WordMark/Panel/index.tsx b/src/pages/inject/WordMark/Panel/index.tsx
@@ -8,6 +8,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import NoteLogoSvg from '@/assets/svg/note-logo.svg';
 import CopySvg from '@/assets/svg/copy.svg';
 import { backgroundBridge } from '@/core/bridge/background';
+import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext';
 import { toolbars } from '../constants';
 import { IEditorRef } from '../Editor';
 import styles from './index.module.less';
@@ -32,6 +33,7 @@ function WordMarkPanel(props: WordMarkPanelProps) {
     save,
     editorRef,
   } = props;
+  const wordMarkContext = useWordMarkContext();
   const [result, setResult] = useState<string>(StepMessage.onStart);
   const [type, setType] = useState(defaultType);
   const [loading, setLoading] = useState(true);
@@ -89,7 +91,10 @@ function WordMarkPanel(props: WordMarkPanelProps) {
     <div className={styles.panelWrapper}>
       <div className={styles.execCommandWrapper}>
         {toolbars.map(item => {
-          if ([WordMarkOptionTypeEnum.clipping].includes(item.type)) {
+          if (
+            [WordMarkOptionTypeEnum.clipping].includes(item.type) ||
+            wordMarkContext.disableFunction.includes(item.id as any)
+          ) {
             return null;
           }
           return (