From 7941078af1de1f9127c157b872e6b4fce38b2e08 Mon Sep 17 00:00:00 2001 From: vagusx Date: Thu, 27 Jul 2023 17:53:16 +0800 Subject: [PATCH] feat: update save to --- CONTRIBUTE.md | 18 +++++++++++++ package.json | 2 ++ src/assets/svg/book-logo.svg | 1 + src/assets/svg/clipper.svg | 1 + src/assets/svg/note-logo.svg | 1 + src/pages/sandbox/App.module.less | 9 ++++--- src/pages/sandbox/App.tsx | 40 ++++++++++++++++------------ src/pages/sandbox/SaveTo.tsx | 43 +++++++++++++++++-------------- src/typings.d.ts | 4 +++ webpack.config.js | 16 ++++++++---- 10 files changed, 90 insertions(+), 45 deletions(-) create mode 100644 CONTRIBUTE.md create mode 100644 src/assets/svg/book-logo.svg create mode 100644 src/assets/svg/clipper.svg create mode 100644 src/assets/svg/note-logo.svg diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md new file mode 100644 index 00000000..6f682301 --- /dev/null +++ b/CONTRIBUTE.md @@ -0,0 +1,18 @@ +# Contribute Guide + +## Use svg as asset and svgr component both way +> https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project + +```jsx +import svg from './assets/file.svg?url' +import Svg from './assets/file.svg' + +const App = () => { + return ( +
+ + +
+ ) +} +``` diff --git a/package.json b/package.json index bbd94c7c..4b600fcf 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "@babel/preset-react": "7.8.3", "@commitlint/cli": "^17.6.7", "@commitlint/config-conventional": "^17.6.7", + "@svgr/webpack": "^8.0.1", "@types/chrome": "^0.0.224", "@types/node": "^18.15.3", "@types/react": "^18.0.28", @@ -99,6 +100,7 @@ "svgo-loader": "^2.2.1", "ts-loader": "^8.4.0", "typescript": "^4.9.5", + "url-loader": "^4.1.1", "vuepress": "^1.8.2", "webpack": "^5.69.1", "webpack-cli": "^4.9.0", diff --git a/src/assets/svg/book-logo.svg b/src/assets/svg/book-logo.svg new file mode 100644 index 00000000..a5660608 --- /dev/null +++ b/src/assets/svg/book-logo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svg/clipper.svg b/src/assets/svg/clipper.svg new file mode 100644 index 00000000..829e986c --- /dev/null +++ b/src/assets/svg/clipper.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svg/note-logo.svg b/src/assets/svg/note-logo.svg new file mode 100644 index 00000000..05abfd13 --- /dev/null +++ b/src/assets/svg/note-logo.svg @@ -0,0 +1 @@ + diff --git a/src/pages/sandbox/App.module.less b/src/pages/sandbox/App.module.less index 20ffcd91..12740a21 100644 --- a/src/pages/sandbox/App.module.less +++ b/src/pages/sandbox/App.module.less @@ -15,11 +15,12 @@ padding: 20px @base-padding * 3 @base-padding * 3; .header { - padding: @base-padding @base-padding * 2; - display: flex; - justify-content: space-between; - align-items: center; + margin-bottom: @base-padding; + font-size: @font-size-lg; + font-weight: bold; + } + .header { .versionHit { display: flex; align-items: center; diff --git a/src/pages/sandbox/App.tsx b/src/pages/sandbox/App.tsx index c496db2b..c9f9699b 100644 --- a/src/pages/sandbox/App.tsx +++ b/src/pages/sandbox/App.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Tabs, message } from 'antd'; +import { Radio, RadioChangeEvent, Tabs, message } from 'antd'; import { CloseOutlined, ExperimentOutlined } from '@ant-design/icons'; import SemverCompare from 'semver-compare'; @@ -132,6 +132,8 @@ const useViewModel = () => { }; }; +type TabName = 'save-to' | 'other'; + const App = () => { const [ editorValue, setEditorValue ] = useState([]); const [ currentType, setCurrentType ] = useState(null); @@ -185,6 +187,12 @@ const App = () => { return SemverCompare(newVersion || '', VERSION) === 1; }, [ newVersion ]); + const [ tab, setTab ] = React.useState('save-to'); + + const handleTabChange = (e: RadioChangeEvent) => { + setTab(e.target.value as unknown as TabName); + }; + return ( { } */} + { + account?.id + ?
{__i18n('语雀剪藏')}
+ : null + }
{account?.id ? ( <> - - - - - - - {__i18n('其他')} - - } - key="others" - > - {__i18n('即将上新')} - - + + {__i18n('剪藏')} + {__i18n('其他')} + + { + tab === 'save-to' + ? + :
{__i18n('即将上新')}
+ } ) : ( renderUnLogin() diff --git a/src/pages/sandbox/SaveTo.tsx b/src/pages/sandbox/SaveTo.tsx index a4eb27b7..4b918afd 100644 --- a/src/pages/sandbox/SaveTo.tsx +++ b/src/pages/sandbox/SaveTo.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Button, Radio, Select, message, Space } from 'antd'; +import { Button, Radio, Select, message, Space, Menu } from 'antd'; import { get as safeGet, isEmpty } from 'lodash'; -import { EditFilled, BookFilled } from '@ant-design/icons'; +import Icon, { LinkOutlined, EditFilled, BookFilled } from '@ant-design/icons'; import Chrome from '@/core/chrome'; import proxy from '@/core/proxy'; import processHtmls from '@/core/html-parser'; @@ -16,6 +16,8 @@ import { GLOBAL_EVENTS } from '@/events'; import styles from './SaveTo.module.less'; import { EditorValueContext } from './EditorValueContext'; +import ClipperSvg from '@/assets/svg/clipper.svg'; + type MessageSender = chrome.runtime.MessageSender; type SendResponse = (response: any) => void; @@ -110,15 +112,17 @@ const SELECT_TYPES = [ key: 'area-select', enabled: true, get text() { - return __i18n('多选剪藏'); + return __i18n('剪藏选取的内容'); }, + icon: , }, { key: 'bookmark', enabled: true, get text() { - return __i18n('链接剪藏'); + return __i18n('剪藏网址'); }, + icon: , }, ]; @@ -351,27 +355,28 @@ const SaveTo = props => { } = useViewModel(props); return (
- onSelectType(e.target.value)} - > - - {SELECT_TYPES.map(item => ( - - {item.text} - - ))} - - + {__i18n('选择剪藏方式')} + { + onSelectType(openKeys[0]); + }} + style={{ width: 256 }} + items={SELECT_TYPES.map(item => ({ + key: item.key, + icon: item.icon, + label: item.text, + }))} + /> + {__i18n('剪藏到')} className={styles.list} onChange={(value: number) => onSelectBookId(Number(value))} defaultValue={currentBookId} options={books.map(book => ({ value: book.id, - label: + label: , }))} />