feat: add support for DeepL free

Author: geekdada

src/common/api.ts

@@ -17,7 +17,7 @@ class Client {
         if (error.response) {
           const { data, status } = error.response
 
-          if (data.message) {
+          if (data?.message) {
             error.message = `${data.message} (${status})`
           }
         }
@@ -49,6 +49,8 @@ class Client {
 
   private getAPI(): string {
     switch (this.region) {
+      case 'free':
+        return 'https://api-free.deepl.com'
       default:
         return 'https://api.deepl.com'
     }

src/common/constant.ts

@@ -13,3 +13,8 @@ export const supportedLanguages = {
   PL: 'Polish',
   RU: 'Russian',
 }
+
+export const supportedRegions = {
+  default: 'DeepL Pro',
+  free: '免费',
+}

src/common/types.ts

@@ -1,4 +1,4 @@
-import { supportedLanguages } from './constant'
+import { supportedLanguages, supportedRegions } from './constant'
 
 export interface Config {
   token: string
@@ -10,8 +10,9 @@ export interface Config {
 }
 
 export type SupportLanguageKeys = keyof typeof supportedLanguages
+export type SupportRegionKeys = keyof typeof supportedRegions
 
-export type APIRegions = 'default'
+export type APIRegions = 'default' | 'free'
 
 export type TranslateResult = {
   translations: Array<{

src/pages/Options/Options.tsx

@@ -10,8 +10,13 @@ import cc from 'chrome-call'
 import { useSnackbar } from 'notistack'
 
 import Client from '../../common/api'
-import { supportedLanguages } from '../../common/constant'
-import { APIRegions, Config, SupportLanguageKeys } from '../../common/types'
+import { supportedLanguages, supportedRegions } from '../../common/constant'
+import {
+  APIRegions,
+  Config,
+  SupportLanguageKeys,
+  SupportRegionKeys,
+} from '../../common/types'
 import OptionSection from './components/OptionSection'
 
 const InputGroup = styled('div')`
@@ -110,7 +115,10 @@ const Options: React.FC = () => {
           <div tw="space-y-6 p-5 overflow-auto">
             <OptionSection title={'目标语言'}>
               <select
-                tw="px-4 py-3 rounded-md"
+                tw="px-4 pl-3 pr-8 rounded-md"
+                css={css`
+                  background-position: right 0.3rem center;
+                `}
                 name="target-lang"
                 value={targetLang}
                 onChange={(e) => setTargetLang(e.target.value)}>
@@ -122,7 +130,26 @@ const Options: React.FC = () => {
               </select>
             </OptionSection>
 
-            <OptionSection title={'API Token'}>
+            <OptionSection title={'API 类型'}>
+              <select
+                tw="px-4 pl-3 pr-8 rounded-md"
+                css={css`
+                  background-position: right 0.3rem center;
+                `}
+                name="region"
+                value={region}
+                onChange={(e) =>
+                  setRegion(e.target.value as SupportRegionKeys)
+                }>
+                {Object.keys(supportedRegions).map((region, index) => (
+                  <option value={region} key={index}>
+                    {supportedRegions[region as SupportRegionKeys]}
+                  </option>
+                ))}
+              </select>
+            </OptionSection>
+
+            <OptionSection title={'API 秘钥'}>
               <input
                 tw="rounded-md w-full"
                 type="text"