feat: 剪藏主页面 popup 视觉细节还原

yuque · Jul 28, 2023 · bbcaf87 · bbcaf87
1 parent c52150c
commit bbcaf87
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 175 deletions.
diff --git a/src/pages/sandbox/App.module.less b/src/pages/sandbox/App.module.less
@@ -20,33 +20,6 @@
     font-weight: bold;
   }
 
-  .header {
-    .versionHit {
-      display: flex;
-      align-items: center;
-    }
-
-    .version {
-      color: @grey-4;
-      font-size: @font-size-sm;
-      transition: color 0.8s ease-in;
-      cursor: pointer;
-
-      .buildtime {
-        opacity: 0;
-        transition: opacity 0.8s ease-in;
-      }
-
-      &:hover {
-        color: @grey-8;
-
-        .buildtime {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
   .close {
     position: absolute;
     right: @base-padding * 3;
@@ -55,6 +28,7 @@
   }
 
   .items {
+    margin-top: @base-padding;
     // flex: 1 1 auto;
     // min-height: 226px;
 
@@ -80,65 +54,4 @@
     flex: 0 0 auto;
     margin-top: @base-padding * 2;
   }
-
-  :global {
-    .ant-tabs-card {
-      &.ant-tabs-small > .ant-tabs-nav .ant-tabs-tab {
-        padding: 4px 8px;
-        margin-right: 4px;
-      }
-    }
-
-    .ant-tabs-tab {
-      .anticon {
-        margin-right: 2px !important;
-      }
-    }
-
-    .ant-btn {
-      line-height: 1.15;
-      padding: 0 12px;
-      box-shadow: none;
-      text-shadow: none;
-
-      &.ant-dropdown-trigger .anticon {
-        height: 1em;
-      }
-
-      &.ant-dropdown-trigger {
-        vertical-align: bottom;
-      }
-
-      &,
-      &:hover,
-      &:focus {
-        background-image: linear-gradient(0deg, @grey-3, #fff);
-      }
-
-      &.ant-btn-primary {
-        color: #fff !important;
-        background: @primary-color !important;
-        border-color: @primary-color !important;
-      }
-
-      &.ant-btn-primary,
-      &.ant-btn-dashed {
-        &,
-        &:hover,
-        &:focus {
-          background-image: none;
-        }
-
-        box-shadow: none;
-      }
-
-      > .larkicon {
-        margin-right: 8px;
-
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-    }
-  }
 }
diff --git a/src/pages/sandbox/App.tsx b/src/pages/sandbox/App.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Radio, RadioChangeEvent, Tabs, message } from 'antd';
+import { ConfigProvider, Radio, RadioChangeEvent, Tabs, message } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
-import SemverCompare from 'semver-compare';
 
 import Chrome from '@/core/chrome';
 import formatHTML from '@/components/editor/format-html';
@@ -15,15 +14,13 @@ import {
   setCurrentAccount,
   clearCurrentAccount,
 } from '@/core/account';
-import { VERSION } from '@/config';
 
 import UserInfo, { IYuqueAccount } from './UserInfo';
 import FeedBack from './FeedBack';
 import SaveTo from './SaveTo';
 import Login from './Login';
 import styles from './App.module.less';
 import { EditorValueContext } from './EditorValueContext';
-import { useCheckVersion } from './CheckVersion';
 
 type MessageSender = chrome.runtime.MessageSender;
 
@@ -182,11 +179,6 @@ const App = () => {
     };
   }, [ editorValue ]);
 
-  const newVersion = useCheckVersion();
-  const needUpgrade = React.useMemo(() => {
-    return SemverCompare(newVersion || '', VERSION) === 1;
-  }, [ newVersion ]);
-
   const [ tab, setTab ] = React.useState<TabName>('save-to');
 
   const handleTabChange = (e: RadioChangeEvent) => {
@@ -198,27 +190,6 @@ const App = () => {
       value={{ editorValue, currentType, setEditorValue, setCurrentType }}
     >
       <div className={styles.wrapper}>
-        {/* <div className={styles.header}>
-          <div className={styles.versionHit}>
-            <span className={styles.version}>
-              v{VERSION}
-              <span className={styles.buildtime}>/{process.env.BUILD_TIME}</span>
-            </span>
-            {
-              needUpgrade
-                ? (
-                  <a
-                    href="https://www.yuque.com/yuque/yuque-browser-extension/welcome#G8HaG"
-                    target='_blank'
-                    style={{ marginLeft: 8 }}
-                  >
-                    {__i18n('升级新版本')}
-                    &nbsp;v{newVersion}
-                  </a>
-                ) : null
-            }
-          </div>
-        </div> */}
         {
           account?.id
             ? <div className={styles.header}>{__i18n('语雀剪藏')}</div>
@@ -253,4 +224,18 @@ const App = () => {
   );
 };
 
-export default App;
+const ThemedApp: React.FC = () => {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#00B96B',
+        },
+      }}
+    >
+      <App />
+    </ConfigProvider>
+  );
+};
+
+export default ThemedApp;
diff --git a/src/pages/sandbox/FeedBack.module.less b/src/pages/sandbox/FeedBack.module.less
@@ -6,6 +6,7 @@
   cursor: pointer;
   justify-content: center;
   color: rgba(0, 0, 0, .45);
+  text-decoration: none;
 
   .icon {
     font-size: @font-size;

diff --git a/src/pages/sandbox/FeedBack.tsx b/src/pages/sandbox/FeedBack.tsx
@@ -12,9 +12,7 @@ const FeedBack: React.FC<React.HTMLAttributes<HTMLAnchorElement>> = props => (
     rel="noopener noreferrer"
     href={pkg.issues}
   >
-    <span className={styles.icon}>
-      <QuestionCircleOutlined />
-    </span>
+    <QuestionCircleOutlined className={styles.icon} />
     {__i18n('问题反馈')}
   </a>
 );

diff --git a/src/pages/sandbox/SaveTo.module.less b/src/pages/sandbox/SaveTo.module.less
@@ -15,7 +15,6 @@
 
   .list {
     width: 100%;
-    margin-top: @base-padding * 2;
   }
 
   .editor {

diff --git a/src/pages/sandbox/SaveTo.tsx b/src/pages/sandbox/SaveTo.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { ConfigProvider, Button, Radio, Select, message, Space, Menu } from 'antd';
+import { ConfigProvider, Button, Select, message, Menu } from 'antd';
 import classnames from 'classnames';
 import { get as safeGet, isEmpty } from 'lodash';
 import Icon, { LinkOutlined, EditFilled, BookFilled } from '@ant-design/icons';
@@ -18,6 +18,8 @@ import styles from './SaveTo.module.less';
 import { EditorValueContext } from './EditorValueContext';
 
 import ClipperSvg from '@/assets/svg/clipper.svg';
+import BookLogoSvg from '@/assets/svg/book-logo.svg';
+import NoteLogoSvg from '@/assets/svg/note-logo.svg';
 
 type MessageSender = chrome.runtime.MessageSender;
 
@@ -128,19 +130,19 @@ const SELECT_TYPES = [
 ];
 
 function BookWithIcon({ book }) {
-  const icon = book.type === 'note' ? <EditFilled /> : <BookFilled />;
+  const iconSvg = book.type === 'note' ? NoteLogoSvg : BookLogoSvg;
   return (
     <>
-      <span style={{ marginRight: 4, color: '#888' }}>{icon}</span>
+      <Icon style={{ marginRight: 4, color: '#888' }} component={iconSvg} />
       {book.name}
     </>
   );
 }
 
 const useViewModel = props => {
-  const [books, setBooks] = useState([NOTE_DATA]);
-  const [currentBookId, setCurrentBookId] = useState(NOTE_DATA.id);
-  const [showContinueButton, setShowContinueButton] = useState(false);
+  const [ books, setBooks ] = useState([ NOTE_DATA ]);
+  const [ currentBookId, setCurrentBookId ] = useState(NOTE_DATA.id);
+  const [ showContinueButton, setShowContinueButton ] = useState(false);
   const { editorValue, currentType, setEditorValue, setCurrentType } =
     useContext(EditorValueContext);
   const onSelectType = setCurrentType;
@@ -160,7 +162,7 @@ const useViewModel = props => {
   useEffect(() => {
     proxy.book.getBooks()
       .then(bookList => {
-        setBooks([NOTE_DATA, ...bookList]);
+        setBooks([ NOTE_DATA, ...bookList ]);
       })
       .catch(e => {
         props.onLogout(e);
@@ -183,7 +185,7 @@ const useViewModel = props => {
           'text/html',
         );
         const value = deserialize(document.body);
-        setEditorValue([...editorValue, ...formatMD(value)]);
+        setEditorValue([ ...editorValue, ...formatMD(value) ]);
         sendResponse(true);
         return;
       }
@@ -196,7 +198,7 @@ const useViewModel = props => {
         );
 
         const value = deserialize(document.body);
-        setEditorValue([...editorValue, ...formatMD(value)]);
+        setEditorValue([ ...editorValue, ...formatMD(value) ]);
         setCurrentType('selection');
         sendResponse(true);
         return;
@@ -211,7 +213,7 @@ const useViewModel = props => {
     return () => {
       Chrome.runtime.onMessage.removeListener(onReceiveMessage);
     };
-  }, [editorValue]);
+  }, [ editorValue ]);
 
   useEffect(() => {
     if (currentType === SELECT_TYPES[0].key) {
@@ -238,13 +240,13 @@ const useViewModel = props => {
         setEditorValue(editorValue.concat(citation));
       });
     }
-  }, [currentType]);
+  }, [ currentType ]);
 
   useEffect(() => {
     setShowContinueButton(
       currentType === SELECT_TYPES[0].key && !isEmpty(editorValue),
     );
-  }, [editorValue, currentType]);
+  }, [ editorValue, currentType ]);
 
   const onSave = () => {
     if (!editorInstance) return;
@@ -382,7 +384,7 @@ const SaveTo = props => {
             label: item.text,
           }))}
         />
-        <div className={classnames(styles.actionTip, styles.clipTarger)}>
+        <div className={classnames(styles.actionTip, styles.clipTarget)}>
           {__i18n('剪藏到')}
         </div>
         <Select<number>