Merge pull request #73 from funnyzak/upgrade/antd5

funnyzak · Dec 9, 2022 · a1c5ca2 · a1c5ca2
2 parents e644336 + a5057ff
commit a1c5ca2
Show file tree

Hide file tree

Showing 16 changed files with 274 additions and 333 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -83,6 +83,7 @@ module.exports = {
     'no-duplicate-case': 2, // switch中的case标签不能重复
     'no-else-return': 2, // 如果if语句里面有return,后面不能跟else语句
     'quote-props': ['warn', 'consistent'],
+    'react/no-unstable-nested-components': 'off',
     // 定义未使用
     'no-unused-vars': 'off',
     // 禁止标识符下划线

diff --git a/package.json b/package.json
@@ -38,8 +38,7 @@
   },
   "homepage": "https://github.com/funnyzak/tts-now#readme",
   "engines": {
-    "node": ">= 14.7.5",
-    "npm": ">= 6.14.14"
+    "node": ">= 16.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -55,7 +54,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
-    "electron": "^21.2.0",
+    "electron": "22.0.0",
     "electron-builder": "^23.6.0",
     "eslint": "^8.26.0",
     "eslint-config-airbnb": "^19.0.4",

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,3 @@
+.border-radius-base {
+  border-radius: 3px;
+}
diff --git a/src/App.less b/src/App.less
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { ConfigProvider } from 'antd'
-import zhCN from 'antd/lib/locale/zh_CN'
+import zhCN from 'antd/locale/zh_CN'
 import Index from './layout'
 import {
   AppContext, appSetting, appSettingCacheKey, store
@@ -31,7 +31,18 @@ export default () => {
   )
 
   return (
-    <ConfigProvider direction="ltr" locale={zhCN}>
+    <ConfigProvider
+      direction="ltr"
+      locale={zhCN}
+      theme={{
+        token: {
+          'colorPrimary': '#414e62',
+          'colorLink': '#1890ff',
+          'borderRadius': 5,
+          'wireframe': true
+        }
+      }}
+    >
       <AppContext.Provider value={appConextValue}>
         <Index />
       </AppContext.Provider>

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,7 +5,10 @@ import App from './App'
 // 引入normalize.css
 import 'normalize.css'
 
-import './App.less'
+// 引入antd样式
+import 'antd/dist/reset.css'
+
+import './App.css'
 
 const container = document.getElementById('root')
 const root = createRoot(container!)

diff --git a/src/layout/AppMain/Batch.tsx b/src/layout/AppMain/Batch.tsx
@@ -425,11 +425,11 @@ const Index = () => {
     if (!core.ttsRunCheck(appSetting)) return
 
     if (core.isNullOrEmpty(appSetting.customSetting.savePath)) {
-      message.warn('请选择输出文件夹')
+      message.warning('请选择输出文件夹')
       return
     }
     if (!fileList || fileList.length === 0) {
-      message.warn('请选择要转换的文件')
+      message.warning('请选择要转换的文件')
       return
     }
 

diff --git a/src/layout/AppMain/Single.tsx b/src/layout/AppMain/Single.tsx
@@ -1,21 +1,17 @@
-import styled from '@emotion/styled'
 import { css } from '@emotion/react'
-import { useState, useEffect, useRef } from 'react'
-import { shell } from 'electron'
-import path from 'path'
+import styled from '@emotion/styled'
+import { useEffect, useRef, useState } from 'react'
 // https://github.com/justinmc/react-audio-player
-import ReactAudioPlayer from 'react-audio-player'
-import {
-  Input, Button, Form, Space, message
-} from 'antd'
 import {
   ExportOutlined,
-  PlayCircleOutlined,
-  LoadingOutlined
+  LoadingOutlined,
+  PlayCircleOutlined
 } from '@ant-design/icons'
+import { Button, Form, Input, message, Space } from 'antd'
+import ReactAudioPlayer from 'react-audio-player'
 import useAppSetting from '@/hook/app'
-import * as core from '@/utils/core'
 import { TtsFileStatus } from '@/type/enums'
+import * as core from '@/utils/core'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -45,12 +41,13 @@ const singleTxtStyle = {
 const Index = () => {
   const { appSetting, setAppSetting } = useAppSetting()
 
-  const getSingleTxt = () => (appSetting.customSetting.singleTxt
-    && appSetting.customSetting.singleTxt !== null
-    && appSetting.customSetting.singleTxt.length > 0
-    && core.currentSpeaker(appSetting).text !== appSetting.customSetting.singleTxt
-    ? appSetting.customSetting.singleTxt
-    : core.currentSpeaker(appSetting).text)
+  const getSingleTxt = () =>
+    appSetting.customSetting.singleTxt &&
+    appSetting.customSetting.singleTxt !== null &&
+    appSetting.customSetting.singleTxt.length > 0 &&
+    core.currentSpeaker(appSetting).text !== appSetting.customSetting.singleTxt
+      ? appSetting.customSetting.singleTxt
+      : core.currentSpeaker(appSetting).text
 
   const [singleTxt] = useState(getSingleTxt())
   const singleFormRef: any = useRef(null)
@@ -87,10 +84,10 @@ const Index = () => {
       message.error('请设置合成内容')
     }
     if (
-      singleTtsFile?.status
-      && singleTtsFile?.status === TtsFileStatus.PROCESS
+      singleTtsFile?.status &&
+      singleTtsFile?.status === TtsFileStatus.PROCESS
     ) {
-      message.warn('正在准备播放..')
+      message.warning('正在准备播放..')
     }
 
     setProcessing(true)
@@ -112,9 +109,9 @@ const Index = () => {
 
   const exportHandle = () => {
     if (
-      !singleTtsFile
-      || core.isNullOrEmpty(singleTtsFile)
-      || core.isNullOrEmpty(singleTtsFile.audioUrl)
+      !singleTtsFile ||
+      core.isNullOrEmpty(singleTtsFile) ||
+      core.isNullOrEmpty(singleTtsFile.audioUrl)
     ) {
       message.error('没有可导出的内容')
       return
@@ -133,9 +130,9 @@ const Index = () => {
 
   useEffect(() => {
     if (
-      singleFormRef
-      && singleFormRef.current !== null
-      && singleFormRef.current !== undefined
+      singleFormRef &&
+      singleFormRef.current !== null &&
+      singleFormRef.current !== undefined
     ) {
       singleFormRef.current.setFieldsValue({ singleTxt: getSingleTxt() })
       setSingleTtsFile({
@@ -160,20 +157,18 @@ const Index = () => {
               }}
               size="large"
               icon={processing ? <LoadingOutlined /> : <PlayCircleOutlined />}
-              onClick={playHandle}
-            >
+              onClick={playHandle}>
               立即播放
             </Button>
-            {!singleTtsFile
-            || core.isNullOrEmpty(singleTtsFile)
-            || core.isNullOrEmpty(singleTtsFile.audioUrl) ? null : (
+            {!singleTtsFile ||
+            core.isNullOrEmpty(singleTtsFile) ||
+            core.isNullOrEmpty(singleTtsFile.audioUrl) ? null : (
               <>
                 <Button
                   type="primary"
                   size="large"
                   icon={<ExportOutlined />}
-                  onClick={exportHandle}
-                >
+                  onClick={exportHandle}>
                   导出
                 </Button>
                 <ReactAudioPlayer
@@ -185,7 +180,7 @@ const Index = () => {
                   ref={(el) => setAudioPlayer(el)}
                 />
               </>
-              )}
+            )}
           </Space>
         </div>
       </div>

diff --git a/src/layout/AppMain/index.scss b/src/layout/AppMain/index.scss
@@ -3,6 +3,7 @@
   height: 100vh;
   overflow: hidden;
   background-color: #f4f6fa;
+  box-sizing: border-box;
   padding-top: 28px;
 
   .ant-tabs-nav {

diff --git a/src/layout/Dialog/SetttingDialog.tsx b/src/layout/Dialog/SetttingDialog.tsx
@@ -109,7 +109,7 @@ const Index: React.FC<IDialogProp> = ({ closeCallBack }) => {
       centered
       okText="保存配置"
       cancelText="取消"
-      visible
+      open
       width={500}
       onCancel={closeCallBack}
       footer={[
@@ -155,66 +155,73 @@ const Index: React.FC<IDialogProp> = ({ closeCallBack }) => {
             defaultActiveKey={engine}
             activeKey={engine}
             tabPosition="top"
-          >
-            <Tabs.TabPane
-              tab={<span>阿里云</span>}
-              key={TtsEngine.ALIYUN.toString()}
-            >
-              <Form.Item
-                name={`${TtsEngine.ALIYUN.toString()}_appKey`}
-                label="AppKey"
-                required
-                tooltip="需要阿里云后台创建项目获取"
-              >
-                <Input placeholder="请输入AppKey" />
-              </Form.Item>
-              <Form.Item
-                required
-                name={`${TtsEngine.ALIYUN.toString()}_accessKeyId`}
-                label="AccessKeyId"
-                tooltip={{ title: '阿里云账号API密钥' }}
-              >
-                <Input.Password placeholder="请输入AccessKeyId" />
-              </Form.Item>
-              <Form.Item
-                name={`${TtsEngine.ALIYUN.toString()}_accessKeySecret`}
-                required
-                label="AccessKeySecret"
-                tooltip={{ title: '阿里云账号API密钥' }}
-              >
-                <Input.Password placeholder="请输入AccessKeySecret" />
-              </Form.Item>
-            </Tabs.TabPane>
-            <Tabs.TabPane
-              tab={<span>讯飞语音</span>}
-              key={TtsEngine.XUNFEI.toString()}
-            >
-              <Form.Item
-                name={`${TtsEngine.XUNFEI.toString()}_appId`}
-                label="APPID"
-                required
-                tooltip="需要讯飞后台创建项目获取"
-              >
-                <Input placeholder="请输入APPID" />
-              </Form.Item>
-              <Form.Item
-                name={`${TtsEngine.XUNFEI.toString()}_apiKey`}
-                required
-                label="APIKey"
-                tooltip={{ title: '讯飞账号API Key' }}
-              >
-                <Input.Password placeholder="请输入APIKey" />
-              </Form.Item>
-              <Form.Item
-                required
-                name={`${TtsEngine.XUNFEI.toString()}_apiSecret`}
-                label="APISecret"
-                tooltip={{ title: '讯飞账号API密钥' }}
-              >
-                <Input.Password placeholder="请输入APISecret" />
-              </Form.Item>
-            </Tabs.TabPane>
-          </Tabs>
+            items={[
+              {
+                label: '阿里云',
+                key: TtsEngine.ALIYUN.toString(),
+                children: (
+                  <>
+                    <Form.Item
+                      name={`${TtsEngine.ALIYUN.toString()}_appKey`}
+                      label="AppKey"
+                      required
+                      tooltip="需要阿里云后台创建项目获取"
+                    >
+                      <Input placeholder="请输入AppKey" />
+                    </Form.Item>
+                    <Form.Item
+                      required
+                      name={`${TtsEngine.ALIYUN.toString()}_accessKeyId`}
+                      label="AccessKeyId"
+                      tooltip={{ title: '阿里云账号API密钥' }}
+                    >
+                      <Input.Password placeholder="请输入AccessKeyId" />
+                    </Form.Item>
+                    <Form.Item
+                      name={`${TtsEngine.ALIYUN.toString()}_accessKeySecret`}
+                      required
+                      label="AccessKeySecret"
+                      tooltip={{ title: '阿里云账号API密钥' }}
+                    >
+                      <Input.Password placeholder="请输入AccessKeySecret" />
+                    </Form.Item>
+                  </>
+                )
+              },
+              {
+                label: '讯飞语音',
+                key: TtsEngine.XUNFEI.toString(),
+                children: (
+                  <>
+                    <Form.Item
+                      name={`${TtsEngine.XUNFEI.toString()}_appId`}
+                      label="APPID"
+                      required
+                      tooltip="需要讯飞后台创建项目获取"
+                    >
+                      <Input placeholder="请输入APPID" />
+                    </Form.Item>
+                    <Form.Item
+                      name={`${TtsEngine.XUNFEI.toString()}_apiKey`}
+                      required
+                      label="APIKey"
+                      tooltip={{ title: '讯飞账号API Key' }}
+                    >
+                      <Input.Password placeholder="请输入APIKey" />
+                    </Form.Item>
+                    <Form.Item
+                      required
+                      name={`${TtsEngine.XUNFEI.toString()}_apiSecret`}
+                      label="APISecret"
+                      tooltip={{ title: '讯飞账号API密钥' }}
+                    >
+                      <Input.Password placeholder="请输入APISecret" />
+                    </Form.Item>
+                  </>
+                )
+              }
+            ]}
+          />
         </Form>
       </Spin>
     </Modal>