PinyinConvert

README.md

@@ -23,16 +23,15 @@ RC4 加密 / 解密
 3DES 加密 / 解密   
 Base58 编码 / 解码
 PBKDF2 值计算 
-Base64 图片
-图片主题色    
+Base64 图片  
 GPS坐标转换   
 人民币大写   
 字节转换
+中文拼音
    
 -- 待开发 ------------------
-
-繁简汉字转换
-中文转拼音
+图片主题色 ( 还需要做近似颜色合并处理 )
+繁简汉字转换   
 TEA 加密 / 解密    
 XTEA 加密 / 解密    
 XXTEA 加密 / 解密    
@@ -76,8 +75,9 @@ WebSocket 调试
 <a target="_blank" href="https://github.com/dankogai/js-base64">js-base64</a>   
 <a target="_blank" href="https://github.com/Qix-/color-convert">color-convert</a>   
 <a target="_blank" href="https://github.com/sql-formatter-org/sql-formatter">SQL Formatter</a>   
-<a target="_blank" href="https://highlightjs.org/">highlight.js</a>   
-<a target="_blank" href="https://github.com/cryptocoinjs/base-x">base-x</a>
+<a target="_blank" href="https://highlightjs.org/">highlight.js</a>    
+<a target="_blank" href="https://github.com/cryptocoinjs/base-x">base-x</a>   
+<a target="_blank" href="https://pinyin-pro.cn/">pinyin-pro</a>   
 
 
 ## 应用截图

package.json

@@ -93,6 +93,7 @@
     "electron-updater": "^5.3.0",
     "highlight.js": "^11.8.0",
     "js-base64": "^3.7.5",
+    "pinyin-pro": "^3.15.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.1",

src/renderer/App/Help/data.tsx

@@ -10,6 +10,7 @@ export const compomentList = [
   { name: "SQL Formatter", url: "https://github.com/sql-formatter-org/sql-formatter" },
   { name: "highlight.js", url: "https://highlightjs.org/" },
   { name: "base-x", url: "https://github.com/cryptocoinjs/base-x" },
+  { name: "pinyin-pro", url: "https://pinyin-pro.cn/" },
 ];
 
 
@@ -24,10 +25,10 @@ export const eventList = [
     color: "green",
     children: (
       <>
-        <p>2023-07-01 V1.2.0 Release</p>
+        <p>2023-06-30 V1.2.0 Release</p>
         <ul style={ {listStyle: "none" }}>
           <li>Base64 图片</li>
-          <li>图片主题色</li>
+          <li>中文拼音</li>
           <li>GPS坐标转换</li>
           <li>人民币大写</li>
           <li>字节转换</li>

src/renderer/App/PinyinConvert/define.tsx

@@ -0,0 +1,9 @@
+const AppName = '中文拼音';
+const Icon = '';
+const Type = 'convert';
+
+export {
+  AppName,
+  Icon,
+  Type,
+}

src/renderer/App/PinyinConvert/index.tsx

@@ -0,0 +1,69 @@
+import { Divider, Button,Input, message } from "antd";
+import { useState } from "react";
+const { TextArea } = Input;
+import { copyTextToClipboard } from "./../../lib"
+import { InputStatus } from "antd/es/_util/statusUtils";
+import { pinyin } from 'pinyin-pro';
+
+const PinyinConvert = () => {
+
+  const [ status, setStatus ] = useState('');
+  const [ value, setValue ] = useState('');
+  const [ result, setResult ] = useState('');
+  const [ notice, contextHolder ] = message.useMessage(); // 消息提醒
+
+  const textareaDoubleClick = (e :React.MouseEvent<HTMLTextAreaElement>) => {
+    const txt = (e.target as HTMLInputElement).value.trim();
+    if(txt !== '') {
+      copyTextToClipboard(txt);
+      notice.success("复制到粘贴板成功！！！");
+    }
+  };
+
+  const encode = (value :string) => {
+    setValue(value);
+    if ( value.trim() != "") {
+      setResult(pinyin(value));
+    } else {
+      setResult('');
+    }
+  }
+
+  return (
+    <div>
+
+      {contextHolder}
+
+      <Button 
+        onClick={ () => { setValue(''); setResult(''); setStatus(''); } }
+        style={ {"backgroundColor" : "#dc3545","color": "#fff" }} 
+      >清除</Button>
+
+      <TextArea
+        status= { status as InputStatus }
+        style={ { margin: "5px 0 5px 0" }}
+        onDoubleClick={ textareaDoubleClick }
+        onChange={ (e) => { encode(e.target.value); } }
+        title="双击复制内容到粘贴板"
+        value= { value }
+        placeholder="请输入中文"
+        autoSize={{ minRows: 5, maxRows: 10 }}
+      />
+
+      <Divider dashed plain>转换的结果</Divider>
+
+      <TextArea
+        style={ { margin: "5px 0 5px 0" }}
+        title="点击复制内容到粘贴板"
+        onClick={ textareaDoubleClick }
+        value= { result }
+        onChange={ (e) => { setResult(e.target.value); } }
+        placeholder="点击复制内容到粘贴板"
+        autoSize={{ minRows: 10, maxRows: 10 }}
+      />
+
+    </div>
+  );
+}
+
+export default PinyinConvert;

src/renderer/App/RMBConvert/index.tsx

@@ -62,7 +62,7 @@ const RMBConvert = () => {
         maxLength={ 30 }
       />
 
-      <Divider>转换的结果</Divider>
+      <Divider dashed plain>转换的结果</Divider>
 
       <TextArea
         readOnly 

src/renderer/App/index.tsx

@@ -20,10 +20,11 @@ const list = [
   'PBKDF2Calc',
   //'BaseXCodec',
   'Base64Image',
-  'ImageColor',
+  //'ImageColor',
   'GPSConvert',
   'RMBConvert',
   'ByteConvert',
+  'PinyinConvert',
 ];
 
 // 加载 App 的定义 名称 / icon