fix: 修复修饰键和关闭逻辑的冲突问题

src/background/core/configManager/wordMark.ts

@@ -26,10 +26,6 @@ class WordMarkConfigManager {
       ...config,
       [key]: value,
     };
-    // enable 改变时，将 disable url 全部清空
-    if (key === 'enable') {
-      result.disableUrl = [];
-    }
     await Chrome.storage.local.set({
       [STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG]: result,
     });
@@ -70,6 +66,14 @@ class WordMarkConfigManager {
         config[key] = defaultWordMarkConfig[key] as never;
       }
 
+      // 由于历史数据可能被写入 string 或者 string[] 如果判断出是这种数据的，将内容置空
+      if (key === 'disableUrl') {
+        const tempValue = config[key];
+        if (typeof tempValue === 'string' || typeof tempValue?.[0] === 'string') {
+          config[key] = [];
+        }
+      }
+
       /**
        * 当缓存中的 toolbars 长度和默认不一致时，说明扩展了 toolbars
        * 然后将新增的 toolbars 扩展到缓存的最后

src/components/DisableUrlCard/index.tsx

@@ -20,7 +20,7 @@ function DisableUrlCard(props: IDisableUrlCardProps) {
     return null;
   }
   return (
-    <Row gutter={20}>
+    <Row gutter={[20, 20]}>
       {options.map((item, index) => {
         return (
           <Col span={12} key={item.origin}>

src/components/WordMarkLayout/index.tsx

@@ -18,10 +18,11 @@ function WordMarkLayout(props: IWordMarkLayoutProps) {
 
   const isEnableWordMark = (config: IWordMarkConfig | null) => {
     const url = `${window.location.origin}${window.location.pathname}`;
-    if (config?.evokeWordMarkShortKey) {
+    if (!config?.enable && config?.evokeWordMarkShortKey) {
       return true;
     }
-    if (!config?.enable || config.disableUrl?.includes(url)) {
+    const isDisableUrl = config?.disableUrl?.find?.(item => item.origin === url);
+    if (!config?.enable || !!isDisableUrl) {
       return false;
     }
     return true;

src/isomorphic/constant/wordMark.ts

@@ -24,7 +24,7 @@ export type IWordMarkConfig = {
   innerPinList: Array<WordMarkOptionTypeEnum>;
 
   // 禁用页面的 url
-  disableUrl: Array<string>;
+  disableUrl: Array<{ origin: string; icon: string }>;
 
   // 剪藏时唤起面板
   evokePanelWhenClip: boolean;

src/pages/inject/LevitateBall/app.tsx

@@ -98,7 +98,7 @@ function App() {
             >
               {__i18n('设置')}
             </div>
-            {__i18n('开启')}
+            {__i18n('中开启')}
           </div>
         </>
       ),

src/pages/inject/WordMark/Inner/DisableMenu.tsx

@@ -2,24 +2,38 @@ import React from 'react';
 import { __i18n } from '@/isomorphic/i18n';
 import LinkHelper from '@/isomorphic/link-helper';
 import { backgroundBridge } from '@/core/bridge/background';
+import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext';
 import styles from './DisableMenu.module.less';
 
 function DisableMenu() {
+  const { disableUrl } = useWordMarkContext();
   const disableForever = () => {
     backgroundBridge.configManager.update('wordMark', 'enable', false, {
       notice: true,
     });
+    window._yuque_ext_app.removeWordMark();
   };
 
   const disableForPage = () => {
+    const iconLink =
+      document.querySelector("link[rel*='icon']") ||
+      document.querySelector("link[rel*='Icon']");
+    const iconUrl = (iconLink as HTMLLinkElement)?.href;
     backgroundBridge.configManager.update(
       'wordMark',
       'disableUrl',
-      `${window.location.origin}${window.location.pathname}`,
+      [
+        ...disableUrl,
+        {
+          origin: `${window.location.origin}${window.location.pathname}`,
+          icon: iconUrl,
+        },
+      ],
       {
         notice: true,
       },
     );
+    window._yuque_ext_app.removeWordMark();
   };
 
   const disableOnce = () => {

src/pages/inject/WordMark/Inner/index.tsx

@@ -46,10 +46,7 @@ function InnerWordMark(props: InnerWordMarkProps) {
           }
           if (pinedTools.length > 3) {
             return (
-              <Tooltip
-                title={item.name}
-                key={item.type}
-              >
+              <Tooltip title={item.name} key={item.type}>
                 <Typography
                   type="iconButton"
                   ml={6}
@@ -89,16 +86,20 @@ function InnerWordMark(props: InnerWordMarkProps) {
           <LarkIcon name="more" />
         </div>
       </Popover>
-      <div className={styles.line} />
-      <Popover
-        placement="bottomRight"
-        content={<DisableMenu />}
-        overlayClassName={styles.overlayClassName}
-      >
-        <div className={styles.closeActions}>
-          <LarkIcon name="close-outline" size={14} />
-        </div>
-      </Popover>
+      {(wordMarkContext.enable || !wordMarkContext.evokeWordMarkShortKey) && (
+        <>
+          <div className={styles.line} />
+          <Popover
+            placement="bottomRight"
+            content={<DisableMenu />}
+            overlayClassName={styles.overlayClassName}
+          >
+            <div className={styles.closeActions}>
+              <LarkIcon name="close-outline" size={14} />
+            </div>
+          </Popover>
+        </>
+      )}
     </div>
   );
 }

src/pages/setting/wordMark/index.module.less

@@ -37,3 +37,7 @@
 .iconWrapper {
   font-size: @font-size-lg;
 }
+
+.disableUrlCard {
+  margin-top: 18px;
+}

src/pages/setting/wordMark/index.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Select, Switch, Row, Col } from 'antd';
+import DisableUrlCard, { IDisableUrlItem } from '@/components/DisableUrlCard';
 import { ToolbarItem, toolbars } from '@/pages/inject/WordMark/constants';
 import { WordMarkOptionTypeEnum } from '@/isomorphic/constant/wordMark';
 import { __i18n } from '@/isomorphic/i18n';
@@ -94,6 +95,16 @@ function WordMark() {
     onConfigChange('disableFunction', result);
   };
 
+  const onDelete = useCallback(
+    (item: IDisableUrlItem) => {
+      const filterArray = config?.disableUrl?.filter(
+        d => d.origin !== item.origin,
+      );
+      onConfigChange('disableUrl', filterArray);
+    },
+    [config],
+  );
+
   useEffect(() => {
     backgroundBridge.configManager.get('wordMark').then(res => {
       setConfig(res);
@@ -135,6 +146,19 @@ function WordMark() {
               />
             </div>
           )}
+          {!!config.disableUrl?.length && config.enable && (
+            <div>
+              <div className={styles.desc}>
+                {__i18n('管理不展示划词工具栏的页面')}
+              </div>
+              <div className={styles.disableUrlCard}>
+                <DisableUrlCard
+                  options={config.disableUrl}
+                  onDelete={onDelete}
+                />
+              </div>
+            </div>
+          )}
         </div>
       </div>