feat: update save to

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 (
+    <div>
+      <img src={svg} width="200" height="200" />
+      <Svg width="200" height="200" viewBox="0 0 3500 3500" />
+    </div>
+  )
+}
+```

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",

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;

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<TabName>('save-to');
+
+  const handleTabChange = (e: RadioChangeEvent) => {
+    setTab(e.target.value as unknown as TabName);
+  };
+
   return (
     <EditorValueContext.Provider
       value={{ editorValue, currentType, setEditorValue, setCurrentType }}
@@ -211,26 +219,24 @@ const App = () => {
             }
           </div>
         </div> */}
+        {
+          account?.id
+            ? <div className={styles.header}>{__i18n('语雀剪藏')}</div>
+            : null
+        }
         <CloseOutlined className={styles.close} onClick={onClose} />
         <div className={styles.items}>
           {account?.id ? (
             <>
-              <Tabs defaultActiveKey="save-to" size="small" type="card">
-                <TabPane tab={__i18n('剪藏')} key="save-to">
-                  <SaveTo onLogout={onLogout} />
-                </TabPane>
-                <TabPane
-                  tab={
-                    <span>
-                      <ExperimentOutlined />
-                      {__i18n('其他')}
-                    </span>
-                  }
-                  key="others"
-                >
-                  {__i18n('即将上新')}
-                </TabPane>
-              </Tabs>
+              <Radio.Group value={tab} onChange={handleTabChange} style={{ marginBottom: 16 }}>
+                <Radio.Button value="save-to">{__i18n('剪藏')}</Radio.Button>
+                <Radio.Button value="other">{__i18n('其他')}</Radio.Button>
+              </Radio.Group>
+              {
+                tab === 'save-to'
+                  ? <SaveTo onLogout={onLogout} />
+                  : <div>{__i18n('即将上新')}</div>
+              }
             </>
           ) : (
             renderUnLogin()

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: <Icon component={ClipperSvg} />,
   },
   {
     key: 'bookmark',
     enabled: true,
     get text() {
-      return __i18n('链接剪藏');
+      return __i18n('剪藏网址');
     },
+    icon: <LinkOutlined />,
   },
 ];
 
@@ -351,27 +355,28 @@ const SaveTo = props => {
   } = useViewModel(props);
   return (
     <div className={styles.wrapper}>
-      <Radio.Group
-        buttonStyle="solid"
-        size="small"
-        value={currentType}
-        onChange={e => onSelectType(e.target.value)}
-      >
-        <Space direction="vertical">
-          {SELECT_TYPES.map(item => (
-            <Radio disabled={!item.enabled} value={item.key}>
-              {item.text}
-            </Radio>
-          ))}
-        </Space>
-      </Radio.Group>
+      {__i18n('选择剪藏方式')}
+      <Menu
+        mode="inline"
+        openKeys={[ currentType ]}
+        onOpenChange={(openKeys: string[]) => {
+          onSelectType(openKeys[0]);
+        }}
+        style={{ width: 256 }}
+        items={SELECT_TYPES.map(item => ({
+          key: item.key,
+          icon: item.icon,
+          label: item.text,
+        }))}
+      />
+      {__i18n('剪藏到')}
       <Select<number>
         className={styles.list}
         onChange={(value: number) => onSelectBookId(Number(value))}
         defaultValue={currentBookId}
         options={books.map(book => ({
           value: book.id,
-          label: <BookWithIcon book={book} />
+          label: <BookWithIcon book={book} />,
         }))}
       />
       <Button className={styles.button} type="primary" block onClick={onSave}>

src/typings.d.ts

@@ -9,5 +9,9 @@ declare module '*.less' {
 }
 
 declare module '*.png'
+declare module '*.svg' {
+  export default string;
+  export const ReactComponent = React.Component;
+}
 
 declare function __i18n(text: string, params?: any): string;

webpack.config.js

@@ -94,11 +94,6 @@ const rules = [
     ],
     exclude: /node_modules/,
   },
-  {
-    test: /\.(js|jsx)$/,
-    loader: 'babel-loader',
-    exclude: /node_modules/,
-  },
   {
     test: /\.less$/,
     exclude(filePath) {
@@ -158,6 +153,17 @@ const rules = [
       filename: '[name][ext]',
     },
   },
+  {
+    test: /\.svg$/i,
+    issuer: /\.tsx?$/,
+    resourceQuery: { not: [ /url/ ] }, // exclude react component if *.svg?url
+    use: [ '@svgr/webpack' ],
+  },
+  {
+    test: /\.svg$/i,
+    resourceQuery: /url/, // *.svg?url
+    type: 'asset',
+  },
 ];
 
 /**