From bbcaf87b6eb0743b553bb02c3fa4a8cdbfa8c7b5 Mon Sep 17 00:00:00 2001 From: vagusx Date: Fri, 28 Jul 2023 10:58:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=AA=E8=97=8F=E4=B8=BB=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=20popup=20=E8=A7=86=E8=A7=89=E7=BB=86=E8=8A=82?= =?UTF-8?q?=E8=BF=98=E5=8E=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/sandbox/App.module.less | 89 +----------------------- src/pages/sandbox/App.tsx | 47 +++++-------- src/pages/sandbox/FeedBack.module.less | 1 + src/pages/sandbox/FeedBack.tsx | 4 +- src/pages/sandbox/SaveTo.module.less | 1 - src/pages/sandbox/SaveTo.tsx | 28 ++++---- src/pages/sandbox/UserInfo.tsx | 96 +++++++++++++++----------- 7 files changed, 91 insertions(+), 175 deletions(-) diff --git a/src/pages/sandbox/App.module.less b/src/pages/sandbox/App.module.less index af85e668..e72f37d3 100644 --- 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 index 121aee3a..294982eb 100644 --- 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,7 +14,6 @@ import { setCurrentAccount, clearCurrentAccount, } from '@/core/account'; -import { VERSION } from '@/config'; import UserInfo, { IYuqueAccount } from './UserInfo'; import FeedBack from './FeedBack'; @@ -23,7 +21,6 @@ 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('save-to'); const handleTabChange = (e: RadioChangeEvent) => { @@ -198,27 +190,6 @@ const App = () => { value={{ editorValue, currentType, setEditorValue, setCurrentType }} >
- {/*
-
- - v{VERSION} - /{process.env.BUILD_TIME} - - { - needUpgrade - ? ( - - {__i18n('升级新版本')} -  v{newVersion} - - ) : null - } -
-
*/} { account?.id ?
{__i18n('语雀剪藏')}
@@ -253,4 +224,18 @@ const App = () => { ); }; -export default App; +const ThemedApp: React.FC = () => { + return ( + + + + ); +}; + +export default ThemedApp; diff --git a/src/pages/sandbox/FeedBack.module.less b/src/pages/sandbox/FeedBack.module.less index d511b947..40153fae 100644 --- 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 index 8b92beef..38573afa 100644 --- a/src/pages/sandbox/FeedBack.tsx +++ b/src/pages/sandbox/FeedBack.tsx @@ -12,9 +12,7 @@ const FeedBack: React.FC> = props => ( rel="noopener noreferrer" href={pkg.issues} > - - - + {__i18n('问题反馈')} ); diff --git a/src/pages/sandbox/SaveTo.module.less b/src/pages/sandbox/SaveTo.module.less index 5888b303..2d9ea3a2 100644 --- 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 index c10efa75..6fa11799 100644 --- 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' ? : ; + const iconSvg = book.type === 'note' ? NoteLogoSvg : BookLogoSvg; return ( <> - {icon} + {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, }))} /> -
+
{__i18n('剪藏到')}
diff --git a/src/pages/sandbox/UserInfo.tsx b/src/pages/sandbox/UserInfo.tsx index 83524ccb..1de88de8 100644 --- a/src/pages/sandbox/UserInfo.tsx +++ b/src/pages/sandbox/UserInfo.tsx @@ -31,6 +31,18 @@ interface Props { const UserInfo = (props: Props) => { const { user, onLogout } = props; + + const newVersion = useCheckVersion(); + const needUpgrade = React.useMemo(() => { + return SemverCompare(newVersion || '', VERSION) === 1; + }, [ newVersion ]); + + const [ open, setOpen ] = React.useState(false); + + const handleOpenChange = (visible: boolean) => { + setOpen(visible); + }; + const handleMenuClick = (info: MenuInfo) => { // eslint-disable-next-line default-case switch (info.key) { @@ -40,17 +52,13 @@ const UserInfo = (props: Props) => { case 'logout': onLogout?.(); break; - case 'update-version': - // todo: + case 'upgrade-version': + window.open('https://www.yuque.com/yuque/yuque-browser-extension/welcome#G8HaG', '_blank'); break; } + setOpen(false); }; - const newVersion = useCheckVersion(); - const needUpgrade = React.useMemo(() => { - return SemverCompare(newVersion || '', VERSION) === 1; - }, [ newVersion ]); - const title = (
@@ -61,42 +69,50 @@ const UserInfo = (props: Props) => {
); + const menuItems = React.useMemo(() => { + return [ + { + key: 'user-profile', + label: __i18n('访问主页'), + }, + { + key: 'upgrade-version', + label: ( + {__i18n('升级新版本')} +  v{newVersion} + + + ), + }, + { + key: 'current-version', + label: ( + {__i18n('当前版本')} +  v{VERSION} + + ), + }, + { + key: 'logout', + label: __i18n('退出账户'), + }, + ].filter(n => { + if (n.key === 'upgrade-version') { + return needUpgrade; + } + if (n.key === 'current-version') { + return !needUpgrade; + } + return true; + }); + }, [ needUpgrade ]); + const content = ( - { - needUpgrade - ? ( - <> - {__i18n('升级新版本')} -  v{newVersion} - - - ) : ( - <> - {__i18n('当前版本')} -  v{VERSION} - - ) - } - - ), - }, - { - key: 'logout', - label: __i18n('退出账户'), - }, - ]} + items={menuItems} /> ); @@ -118,8 +134,10 @@ const UserInfo = (props: Props) => { title={title} content={content} placement="bottomLeft" - open + open={open} + onOpenChange={handleOpenChange} getPopupContainer={node => node.parentElement} + destroyTooltipOnHide >