feat: 增加 message 提示 && 修复走查问题

yuque · Oct 26, 2023 · ebd5510 · ebd5510
1 parent ce5d1fb
commit ebd5510
Show file tree

Hide file tree

Showing 14 changed files with 233 additions and 33 deletions.
diff --git a/src/components/AntdLayout/index.tsx b/src/components/AntdLayout/index.tsx
@@ -8,13 +8,18 @@ interface IAntdLayoutProps {
 function AntdLayout(props: IAntdLayoutProps) {
   return (
     <ConfigProvider
-      prefixCls='yuque-chrome-extension'
+      prefixCls="yuque-chrome-extension"
       theme={{
         token: {
           colorPrimary: '#00B96B',
           colorBorder: '#EFEFEF',
           colorText: '#585A5A',
         },
+        components: {
+          Select: {
+            optionSelectedBg: '#EFF0F0',
+          },
+        },
       }}
     >
       {props.children}

diff --git a/src/components/SuperSideBar/container/Header/index.module.less b/src/components/SuperSideBar/container/Header/index.module.less
@@ -34,11 +34,13 @@
 
     .infoWrapper {
       display: flex;
-      gap: 12px;
+      gap: 4px;
 
       .itemWrapper {
-        width: 16px;
-        height: 16px;
+        width: 24px;
+        height: 24px;
+        padding: 4px;
+        border-radius: 4px;
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -50,6 +52,10 @@
           height: 100%;
           border-radius: 50%;
         }
+
+        &:hover {
+          background-color: @bg-primary-hover;
+        }
       }
     }
 
@@ -88,6 +94,7 @@
 
   :global {
     .yuque-chrome-extension-tooltip-arrow {
+      display: block !important;
       transform: translateY(-2px);
       &::before {
         background-color: @blue-5;

diff --git a/src/components/SuperSideBar/container/Header/index.tsx b/src/components/SuperSideBar/container/Header/index.tsx
@@ -70,7 +70,7 @@ function SuperSidebarHeader() {
             placement="bottomRight"
             open={showTip}
             overlayClassName={styles.tooltipWrapper}
-            getPopupContainer={node => node as HTMLElement}
+            getPopupContainer={node => node.parentElement as HTMLElement}
             arrow={{ pointAtCenter: true }}
           >
             {showTip ? (
@@ -85,7 +85,9 @@ function SuperSidebarHeader() {
               </Tooltip>
             )}
           </Tooltip>
-          <UserAvatar />
+          <div className={styles.itemWrapper}>
+            <UserAvatar />
+          </div>
         </div>
         {isRunningInjectPage && (
           <div onClick={closeSidePanel} className={styles.closeWrapper}>

diff --git a/src/components/SuperSideBar/impl/ClipAssistant/index.module.less b/src/components/SuperSideBar/impl/ClipAssistant/index.module.less
@@ -34,6 +34,7 @@
       color: @text-primary;
       padding: 3px 6px;
       border-radius: 6px;
+      white-space: nowrap;
 
       .icon {
         font-size: @font-size-lg;
@@ -52,7 +53,7 @@
     .title {
       padding: 0 16px;
       color: @text-primary;
-      font-weight: 600;
+      font-weight: 500;
       font-size: @font-size-lg;
       outline: none;
       border: none;

diff --git a/src/components/SuperSideBar/impl/ClipAssistant/index.tsx b/src/components/SuperSideBar/impl/ClipAssistant/index.tsx
@@ -27,14 +27,18 @@ import {
   ClipAssistantMessageKey,
   ClipAssistantMessageActions,
 } from '@/isomorphic/event/clipAssistant';
+import {
+  ContentScriptMessageActions,
+  ContentScriptMessageKey,
+} from '@/isomorphic/event/contentScript';
+import { isRunningInjectPage } from '@/core/uitl';
 import OcrSvg from '@/assets/svg/ocr-icon.svg';
 import ClipperSvg from '@/assets/svg/clipper.svg';
 import CollectLinkSvg from '@/assets/svg/collect-link.svg';
 import { superSidebar } from '@/components/SuperSideBar/index';
 import AddTagButton from './component/AddTagButton';
 import TagList from './component/TagList';
 import styles from './index.module.less';
-import { isRunningInjectPage } from '@/core/uitl';
 
 function ClipContent() {
   const editorRef = useRef<IEditorRef>(null);
@@ -75,6 +79,37 @@ function ClipContent() {
       message.warning(__i18n('内容不能为空'));
       return;
     }
+
+    const showSuccessMessage = (
+      text: string,
+      link: { text: string; href: string },
+    ) => {
+      if (isRunningInjectPage) {
+        window.parent.postMessage(
+          {
+            key: ContentScriptMessageKey,
+            action: ContentScriptMessageActions.ShowMessage,
+            data: {
+              text,
+              type: 'success',
+              link,
+            },
+          },
+          '*',
+        );
+        return;
+      }
+      message.success(
+        <span>
+          {text}
+          &nbsp;&nbsp;
+          <a target="_blank" href={link.href}>
+            {link.text}
+          </a>
+        </span>,
+      );
+    };
+
     setLoading({ loading: true });
     try {
       // 保存到小记
@@ -85,15 +120,10 @@ function ClipContent() {
         };
         await backgroundBridge.request.note.create(noteParams);
         const url = LinkHelper.goMyNote();
-        message.success(
-          <span>
-            {__i18n('保存成功！')}
-            &nbsp;&nbsp;
-            <a target="_blank" href={url}>
-              {__i18n('去小记查看')}
-            </a>
-          </span>,
-        );
+        showSuccessMessage(__i18n('保存成功！'), {
+          href: url,
+          text: __i18n('去小记查看'),
+        });
       } else {
         const docParams = {
           ...(await buildParamsForDoc(editor)),
@@ -102,15 +132,10 @@ function ClipContent() {
         };
         const doc = await backgroundBridge.request.doc.create(docParams);
         const url = LinkHelper.goDoc(doc);
-        message.success(
-          <span>
-            {__i18n('保存成功！')}
-            &nbsp;&nbsp;
-            <a target="_blank" href={url}>
-              {__i18n('立即查看')}
-            </a>
-          </span>,
-        );
+        showSuccessMessage(__i18n('保存成功！'), {
+          href: url,
+          text: __i18n('立即查看'),
+        });
       }
       if (isRunningInjectPage) {
         backgroundBridge.sidePanel.close();
@@ -321,7 +346,7 @@ function ClipContent() {
       >
         <Input.TextArea
           className={styles.title}
-          placeholder={__i18n('请输入标题')}
+          placeholder={__i18n('输入标题')}
           value={title}
           autoSize={{ minRows: 1, maxRows: 100 }}
           onChange={onTitleChange}

diff --git a/src/components/lake-editor/editor.tsx b/src/components/lake-editor/editor.tsx
@@ -170,7 +170,7 @@ export default forwardRef<IEditorRef, EditorProps>((props, ref) => {
               },
             ],
           },
-          placeholder: __i18n('记你想记'),
+          placeholder: __i18n('输入正文'),
           defaultFontsize: 14,
         });
         newEditor.on('visitLink', (url: string) => {

diff --git a/src/core/bridge/background/user.ts b/src/core/bridge/background/user.ts
@@ -25,7 +25,11 @@ export function createUserBridge(impl: ICallBridgeImpl) {
             res => {
               const map: IShortcutMap = {};
               for (const item of res) {
-                map[item.name as keyof IShortcutMap] = item.shortcut;
+                if (item.name === '_execute_action') {
+                  map.openSidePanel = item.shortcut;
+                } else {
+                  map[item.name as keyof IShortcutMap] = item.shortcut;
+                }
               }
               resolve(map);
             },

diff --git a/src/isomorphic/event/contentScript.ts b/src/isomorphic/event/contentScript.ts
@@ -8,3 +8,18 @@ export enum ContentScriptEvents {
   ForceUpgradeVersion = 'contentScript/forceUpgradeVersion',
   LoginOut = 'contentScript/LoginOut',
 }
+
+export const ContentScriptMessageKey = 'ContentScriptMessageKey';
+
+export enum ContentScriptMessageActions {
+  ShowMessage = 'showMessage',
+}
+
+export interface IShowMessageData {
+  type: 'error' | 'success';
+  text: string;
+  link?: {
+    text: string;
+    href: string;
+  };
+}
diff --git a/src/pages/inject/action-listener.ts → src/pages/inject/action-listener.tsx b/src/pages/inject/action-listener.ts → src/pages/inject/action-listener.tsx
@@ -1,5 +1,12 @@
+import React from 'react';
+import { message } from 'antd';
 import Chrome from '@/background/core/chrome';
-import { ContentScriptEvents } from '@/isomorphic/event/contentScript';
+import {
+  ContentScriptEvents,
+  ContentScriptMessageKey,
+  ContentScriptMessageActions,
+  IShowMessageData,
+} from '@/isomorphic/event/contentScript';
 import { ClipAssistantMessageActions } from '@/isomorphic/event/clipAssistant';
 import { WordMarkMessageActions } from '@/isomorphic/event/wordMark';
 import { AccountLayoutMessageActions } from '@/isomorphic/event/accountLayout';
@@ -142,3 +149,47 @@ export const initContentScriptActionListener = (context: App) => {
     },
   );
 };
+
+export const initContentScriptMessageListener = () => {
+  window.addEventListener('message', (e: MessageEvent<any>) => {
+    const { action, key, data } = e.data || {};
+    if (key !== ContentScriptMessageKey) {
+      return;
+    }
+    switch (action) {
+      case ContentScriptMessageActions.ShowMessage: {
+        const { type, text, link } = (data || {}) as IShowMessageData;
+        const content = (
+          <span className="yuque-chrome-extension-message">
+            <span className="yuque-chrome-extension-message-text">{text}</span>
+            {!!link && (
+              <a
+                target="_blank"
+                href={link.href}
+                className="yuque-chrome-extension-message-href"
+              >
+                {link.text}
+              </a>
+            )}
+          </span>
+        );
+        if (type === 'success') {
+          message.success({
+            content,
+            className: 'yuque-chrome-extension-message-wrapper',
+          });
+        }
+        if (type === 'error') {
+          message.error({
+            content,
+            className: 'yuque-chrome-extension-message-wrapper',
+          });
+        }
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  });
+};
diff --git a/src/pages/inject/content-scripts.ts b/src/pages/inject/content-scripts.ts
@@ -16,8 +16,12 @@ import {
   AccountLayoutMessageActions,
   AccountLayoutMessageKey,
 } from '@/isomorphic/event/accountLayout';
-import { initContentScriptActionListener } from './action-listener';
+import {
+  initContentScriptActionListener,
+  initContentScriptMessageListener,
+} from './action-listener';
 import { createWordMark } from './WordMark';
+import '@/styles/inject.less';
 
 enum SidePanelStatus {
   // 还没有初始化
@@ -98,6 +102,7 @@ export class App {
           dom: this.rootContainer,
         });
         initContentScriptActionListener(this);
+        initContentScriptMessageListener();
         this.initSidePanel();
       });
   }

diff --git a/src/pages/sidePanel/app.module.less b/src/pages/sidePanel/app.module.less
@@ -1,12 +1,35 @@
+@import '~@/styles/parameters.less';
+
 .appWrapper {
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: flex-end;
-  min-width: 390px;
+  overflow: hidden;
 }
 
 .sidePanelWrapper {
   width: 100%;
   height: 100%;
 }
+
+.disableWrapper {
+  position: absolute;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, .4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .disableModal {
+    width: 90%;
+
+    img {
+      width: 100%;
+    }
+  }
+}