Merge pull request #191 from yuque/fix/style-for-extesion

feat: 增加悬浮气泡

src/background/actionListener/configManager.ts

@@ -0,0 +1,35 @@
+import { levitateConfigManager } from '@/background/core/configManager/levitate';
+import {
+  IOperateConfigManagerData,
+  OperateConfigManagerEnum,
+} from '@/isomorphic/background/configManager';
+import { wordMarkConfigManager } from '../core/configManager/wordMark';
+import { RequestMessage } from './index';
+
+const managerMap = {
+  wordMark: wordMarkConfigManager,
+  levitate: levitateConfigManager,
+};
+
+export async function createManagerConfigActionListener(
+  request: RequestMessage<IOperateConfigManagerData>,
+  callback: (params: any) => void,
+) {
+  const { type, value, key, managerType, option = {} } = request.data;
+  const manage = managerMap[managerType];
+  switch (type) {
+    case OperateConfigManagerEnum.get: {
+      const result = await manage.get();
+      callback(result);
+      break;
+    }
+    case OperateConfigManagerEnum.update: {
+      const res = await manage.update(key, value, option);
+      callback(res);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}

src/background/actionListener/index.ts

@@ -6,7 +6,7 @@ import { createClipActionListener } from './clip';
 import { createTabActionListener } from './tab';
 import { createSidePanelActionListener } from './sidePanel';
 import { createRequestActionListener } from './request';
-import { createWordMarkConfigActionListener } from './wordMarkConfig';
+import { createManagerConfigActionListener } from './configManager';
 
 type MessageSender = chrome.runtime.MessageSender;
 
@@ -49,8 +49,8 @@ export const initBackGroundActionListener = () => {
           createRequestActionListener(request, sendResponse);
           break;
         }
-        case BackgroundEvents.OperateWordMarkConfig: {
-          createWordMarkConfigActionListener(request, sendResponse);
+        case BackgroundEvents.OperateManagerConfig: {
+          createManagerConfigActionListener(request, sendResponse);
           break;
         }
         default: {

src/background/core/configManager/levitate.ts

@@ -0,0 +1,57 @@
+import Chrome from '@/background/core/chrome';
+import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
+import {
+  defaultLevitateConfig,
+  ILevitateConfig,
+  LevitateConfigKey,
+} from '@/isomorphic/constant/levitate';
+import { IConfigManagerOption } from '@/isomorphic/background/configManager';
+import { STORAGE_KEYS } from '@/config';
+import Storage from '../storage';
+
+class LevitateConfigManager {
+  async get() {
+    const config: ILevitateConfig =
+      (await Storage.get(STORAGE_KEYS.SETTINGS.LEVITATE_BALL_CONFIG)) || {};
+
+    // 做一次 config 的合并，保证获取时一定包含 config 中的每一个元素
+    for (const _key of Object.keys(defaultLevitateConfig)) {
+      const key = _key as LevitateConfigKey;
+      const value = config[key];
+      if (typeof value === 'undefined') {
+        config[key] = defaultLevitateConfig[key] as never;
+      }
+    }
+
+    return config;
+  }
+
+  async update(key: string, value: any, option?: IConfigManagerOption) {
+    const config = await this.get();
+    const result: ILevitateConfig = {
+      ...config,
+      [key]: value,
+    };
+    await Chrome.storage.local.set({
+      [STORAGE_KEYS.SETTINGS.LEVITATE_BALL_CONFIG]: result,
+    });
+    this.noticeWebPage(result);
+    return result;
+  }
+
+  private noticeWebPage(config: ILevitateConfig) {
+    // 异步通知页面 config 发生了改变
+    Chrome.tabs.query({ status: 'complete' }, tabs => {
+      for (const tab of tabs) {
+        if (tab.id) {
+          Chrome.tabs.sendMessage(tab.id, {
+            action: ContentScriptEvents.LevitateConfigChange,
+            data: config,
+          });
+        }
+      }
+    });
+  }
+}
+
+export const levitateConfigManager = new LevitateConfigManager();

src/background/core/wordMarkConfig.ts → src/background/core/configManager/wordMark.ts

@@ -4,10 +4,10 @@ import {
   defaultWordMarkConfig,
 } from '@/isomorphic/constant/wordMark';
 import Chrome from '@/background/core/chrome';
-import { IWordMarkConfigOption } from '@/isomorphic/background/wordMarkConfig';
+import { IConfigManagerOption } from '@/isomorphic/background/configManager';
 import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
 import { STORAGE_KEYS } from '@/config';
-import Storage from './storage';
+import Storage from '../storage';
 
 class WordMarkConfigManager {
   async get() {
@@ -19,18 +19,14 @@ class WordMarkConfigManager {
       const key = _key as keyof IWordMarkConfig;
       const value = config[key];
       if (typeof value === 'undefined') {
-        config[key] = defaultWordMarkConfig[key] as any;
+        config[key] = defaultWordMarkConfig[key] as never;
       }
     }
 
     return config;
   }
 
-  async update(
-    key: WordMarkConfigKey,
-    value: any,
-    option?: IWordMarkConfigOption,
-  ) {
+  async update(key: string, value: any, option?: IConfigManagerOption) {
     const config = await this.get();
     const result: IWordMarkConfig = {
       ...config,
@@ -50,7 +46,7 @@ class WordMarkConfigManager {
 
   private noticeWebPage(
     config: IWordMarkConfig,
-    option?: IWordMarkConfigOption,
+    option?: IConfigManagerOption,
   ) {
     const { notice = false } = option || {};
     if (!notice) {

src/components/DisableUrlCard/index.module.less

@@ -0,0 +1,50 @@
+@import '~@/styles/parameters.less';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  box-shadow: @panel-default-box-shadow;
+  padding: 12px;
+  border: 1px solid @border-light-color;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  .cardItemWrapper {
+    display: flex;
+    gap: 12px;
+    padding: 6px 12px;
+    align-items: center;
+    background-color: @grey-2;
+    border-radius: 8px;
+    width: calc(50% - 8px);
+    border: 1px solid @border-color-primary;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      flex: 0 0 auto;
+    }
+
+    .name {
+      overflow: hidden;
+      flex: 1 1 auto;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .deleteWrapper {
+      padding: 4px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      flex: 0 0 auto;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: @bg-primary-hover;
+      }
+    }
+  }
+}

src/components/DisableUrlCard/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+import styles from './index.module.less';
+
+export interface IDisableUrlItem {
+  icon: string;
+  origin: string;
+}
+
+interface IDisableUrlCardProps {
+  options: Array<IDisableUrlItem>;
+  onDelete: (item: IDisableUrlItem, index: number) => void;
+}
+
+function DisableUrlCard(props: IDisableUrlCardProps) {
+  const { options = [] } = props;
+  if (!options.length) {
+    return null;
+  }
+  return (
+    <div className={styles.wrapper}>
+      {options.map((item, index) => {
+        return (
+          <div key={item.origin} className={styles.cardItemWrapper}>
+            <img src={item.icon} className={styles.icon} />
+            <span className={styles.name}>{item.origin}</span>
+            <div
+              className={styles.deleteWrapper}
+              onClick={() => props.onDelete(item, index)}
+            >
+              <DeleteOutlined />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default React.memo(DisableUrlCard);

src/components/SelectSavePosition/index.tsx

@@ -52,8 +52,7 @@ function SelectSavePosition(props: ISelectSavePositionProps) {
       return;
     }
     const defaultSavePosition = await backgroundBridge.storage.get(rememberKey);
-    const positionItem = (defaultSavePosition ||
-      DefaultSavePosition) as ISavePosition;
+    const positionItem = (defaultSavePosition || DefaultSavePosition) as ISavePosition;
     initPositionState(positionItem);
   };
 

src/components/WordMarkLayout/index.tsx

@@ -28,7 +28,7 @@ function WordMarkLayout(props: IWordMarkLayoutProps) {
   };
 
   useEffect(() => {
-    backgroundBridge.wordMarkConfig.get().then(res => {
+    backgroundBridge.configManager.get('wordMark').then(res => {
       setWordMarkConfig(res);
     });
   }, []);

src/config.ts

@@ -15,6 +15,7 @@ export const STORAGE_KEYS = {
   },
   SETTINGS: {
     WORD_MARK_CONFIG: 'settings/word-mark-config',
+    LEVITATE_BALL_CONFIG: 'settings/levitate-ball-config',
   },
   NOTE: {
     SELECT_TAGS: 'note/select-tags',

src/core/bridge/background/configManager.ts

@@ -0,0 +1,49 @@
+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,
+        value: any,
+        option?: IConfigManagerOption,
+      ): Promise<boolean> {
+        return new Promise(resolve => {
+          impl(
+            BackgroundEvents.OperateManagerConfig,
+            {
+              type: OperateConfigManagerEnum.update,
+              key,
+              value,
+              option,
+              managerType,
+            },
+            () => {
+              resolve(true);
+            },
+          );
+        });
+      },
+
+      async get(managerType: ManagerType): Promise<any> {
+        return new Promise(resolve => {
+          impl(
+            BackgroundEvents.OperateManagerConfig,
+            { type: OperateConfigManagerEnum.get, managerType },
+            res => {
+              resolve(res);
+            },
+          );
+        });
+      },
+    },
+  };
+}

src/core/bridge/background/index.ts

@@ -6,7 +6,7 @@ import { createClipBridge } from './clip';
 import { createTabBridge } from './tab';
 import { createSidePanelBridge } from './sidePanel';
 import { createRequestBridge } from './request';
-import { createWordMarkConfigBridge } from './wordMarkConfig';
+import { createConfigManagerBridge } from './configManager';
 
 export interface IBridgeParams {
   [key: string]: any;
@@ -53,7 +53,7 @@ export function createBridges(impl: ICallBridgeImpl) {
     ...createTabBridge(impl),
     ...createSidePanelBridge(impl),
     ...createRequestBridge(impl),
-    ...createWordMarkConfigBridge(impl),
+    ...createConfigManagerBridge(impl),
   };
 }
 

src/core/bridge/background/stroge.ts

@@ -1,12 +1,11 @@
 import { BackgroundEvents } from '@/isomorphic/background';
 import { OperateStorageEnum } from '@/isomorphic/background/storage';
-import { IUser } from '@/isomorphic/interface';
 import { ICallBridgeImpl } from './index';
 
 export function createStorageBridge(impl: ICallBridgeImpl) {
   return {
     storage: {
-      async get(key: string): Promise<IUser> {
+      async get(key: string): Promise<any> {
         return new Promise(resolve => {
           impl(
             BackgroundEvents.OperateStorage,