1- import React , { useState } from "react" ;
2- import { Row , Col , Button , Form , Input , message , Typography , Card , Space , Checkbox } from "antd" ;
1+ "use client" ;
2+
3+ import React , { useState , useCallback } from "react" ;
4+ import { Row , Col , Button , Form , Input , message , Typography , Card , Space , Checkbox , Tooltip } from "antd" ;
5+ import { CopyOutlined } from "@ant-design/icons" ;
36import { JSONPath } from "jsonpath-plus" ;
47import { preprocessJson } from "@/app/components/preprocessJson" ;
58import { copyToClipboard } from "@/app/components/copyToClipboard" ;
69
7- const JsonEdit = ( ) => {
8- const [ jsonInput , setJsonInput ] = useState < string > ( "" ) ;
9- const [ jsonOutput , setJsonOutput ] = useState < any > ( { } ) ;
10- const [ prefix , setPrefix ] = useState < string > ( "" ) ;
11- const [ suffix , setSuffix ] = useState < string > ( "" ) ;
12- const [ findText , setFindText ] = useState < string > ( "" ) ;
13- const [ replaceText , setReplaceText ] = useState < string > ( "" ) ;
10+ const { Title, Paragraph } = Typography ;
11+
12+ const languages = {
13+ zh : "Chinese" ,
14+ en : "English" ,
15+ ja : "Japanese" ,
16+ ko : "Korean" ,
17+ es : "Spanish" ,
18+ fr : "French" ,
19+ de : "German" ,
20+ it : "Italian" ,
21+ ru : "Russian" ,
22+ pt : "Portuguese" ,
23+ hi : "Hindi" ,
24+ ar : "Arabic" ,
25+ bn : "Bengali" ,
26+ } ;
1427
15- const [ jsonPath , setJsonPath ] = useState < string > ( "" ) ;
28+ const ClientPage = ( ) => {
29+ const [ jsonInput , setJsonInput ] = useState ( "" ) ;
30+ const [ jsonOutput , setJsonOutput ] = useState ( "" ) ;
31+ const [ prefix , setPrefix ] = useState ( "" ) ;
32+ const [ suffix , setSuffix ] = useState ( "" ) ;
33+ const [ findText , setFindText ] = useState ( "" ) ;
34+ const [ replaceText , setReplaceText ] = useState ( "" ) ;
35+ const [ jsonPath , setJsonPath ] = useState ( "" ) ;
1636 const [ isVariableReplace , setIsVariableReplace ] = useState ( false ) ;
1737
18- const languages = {
19- zh : "Chinese" ,
20- en : "English" ,
21- ja : "Japanese" ,
22- ko : "Korean" ,
23- es : "Spanish" ,
24- fr : "French" ,
25- de : "German" ,
26- it : "Italian" ,
27- ru : "Russian" ,
28- pt : "Portuguese" ,
29- hi : "Hindi" ,
30- ar : "Arabic" ,
31- bn : "Bengali" ,
32- } ;
38+ const handleInputChange = useCallback ( ( setter ) => ( e ) => setter ( e . target . value ) , [ ] ) ;
3339
3440 const applyPrefixSuffix = ( value , path ) => {
3541 let newValue = value ;
@@ -49,7 +55,7 @@ const JsonEdit = () => {
4955 return newValue ;
5056 } ;
5157
52- const handleEdit = ( ) => {
58+ const handleEdit = useCallback ( ( ) => {
5359 if ( ! jsonInput ) {
5460 message . error ( "JSON Input 不能为空" ) ;
5561 return ;
@@ -79,61 +85,61 @@ const JsonEdit = () => {
7985 let nodePathArray = JSONPath . toPathArray ( node . path ) ;
8086 if ( nodePathArray && nodePathArray . length > 0 ) {
8187 let currentNode = jsonObject ;
82- // 遍历路径数组，直到到达倒数第二个元素
8388 for ( let i = 1 ; i < nodePathArray . length - 1 ; i ++ ) {
8489 currentNode = currentNode [ nodePathArray [ i ] ] ;
8590 }
86- // 应用 applyPrefixSuffix 函数并更新值
8791 currentNode [ nodePathArray [ nodePathArray . length - 1 ] ] = applyPrefixSuffix ( node . value , nodePathArray . join ( "." ) ) ;
8892 }
8993 } ) ;
9094 } ) ;
9195
9296 setJsonOutput ( JSON . stringify ( jsonObject , null , 2 ) ) ;
93- } ;
97+ } , [ jsonInput , jsonPath , findText , replaceText , prefix , suffix , isVariableReplace ] ) ;
9498
9599 return (
96100 < >
97- < Typography . Paragraph type = "secondary" style = { { fontSize : "14px" } } >
98- 在 JSON 中查找节点并编辑它们的值，你可以为找到的节点的值添加前缀、后缀或进行替换操作。节点的查找支持批量操作，可以使用逗号来分割节点。
99- </ Typography . Paragraph >
101+ < Title level = { 2 } > JSON 节点批量编辑</ Title >
102+ < Paragraph type = "secondary" >
103+ 在 JSON
104+ 中查找节点并编辑它们的值，你可以为找到的节点的值添加前缀、后缀或进行替换操作。节点的查找支持批量操作，可以使用逗号来分割节点。请注意，本工具只支持第一层的子键，不支持嵌套子键内的键名互换。
105+ </ Paragraph >
100106 < Row gutter = { 16 } >
101107 < Col xs = { 24 } lg = { 12 } >
102108 < Card title = "输入区" >
103109 < Form . Item label = "🔍JSON节点" >
104- < Input value = { jsonPath } onChange = { ( e ) => setJsonPath ( e . target . value ) } placeholder = "Enter the JSONPaths, separated by commas" />
110+ < Input value = { jsonPath } onChange = { handleInputChange ( setJsonPath ) } placeholder = "Enter the JSONPaths, separated by commas" />
105111 </ Form . Item >
106112 < Form . Item label = "添加前缀" >
107- < Input value = { prefix } onChange = { ( e ) => setPrefix ( e . target . value ) } placeholder = "Enter a prefix to add to all output keys" />
113+ < Input value = { prefix } onChange = { handleInputChange ( setPrefix ) } placeholder = "Enter a prefix to add to all output keys" />
108114 </ Form . Item >
109115 < Form . Item label = "添加后缀" >
110- < Input value = { suffix } onChange = { ( e ) => setSuffix ( e . target . value ) } placeholder = "Enter a suffix to add to all output keys" />
116+ < Input value = { suffix } onChange = { handleInputChange ( setSuffix ) } placeholder = "Enter a suffix to add to all output keys" />
111117 </ Form . Item >
112- < Space style = { { display : "flex" , marginBottom : 8 } } align = "baseline" >
118+ < Space >
113119 < Form . Item label = "查找文本" >
114- < Input value = { findText } onChange = { ( e ) => setFindText ( e . target . value ) } placeholder = "Find in the JSON node" />
120+ < Input value = { findText } onChange = { handleInputChange ( setFindText ) } placeholder = "Find in the JSON node" />
115121 </ Form . Item >
116122 < Form . Item label = "替换文本" >
117- < Input value = { replaceText } onChange = { ( e ) => setReplaceText ( e . target . value ) } placeholder = "Replace the found text" />
123+ < Input value = { replaceText } onChange = { handleInputChange ( setReplaceText ) } placeholder = "Replace the found text" />
118124 </ Form . Item >
119- < Form . Item >
125+ < Tooltip title = "根据当前节点的语言代码（如 zh、en、ja 等），将找到的文本替换为对应语言的名称。例如，en 节点会将指定文本替换为 English，zh 节点则替换为 Chinese。" >
120126 < Checkbox checked = { isVariableReplace } onChange = { ( e ) => setIsVariableReplace ( e . target . checked ) } >
121- 变量替换
127+ 多语言变量替换
122128 </ Checkbox >
123- </ Form . Item >
129+ </ Tooltip >
124130 </ Space >
125131 < Form . Item >
126- < Input . TextArea placeholder = "JSON Input" value = { jsonInput } onChange = { ( e ) => setJsonInput ( e . target . value ) } rows = { 10 } />
132+ < Input . TextArea placeholder = "JSON Input" value = { jsonInput } onChange = { handleInputChange ( setJsonInput ) } rows = { 10 } />
127133 </ Form . Item >
128134 </ Card >
129135 </ Col >
130136 < Col xs = { 24 } lg = { 12 } >
131137 < Card title = "结果区" >
132138 < Button onClick = { handleEdit } style = { { marginBottom : "16px" } } >
133- Edit JSON
139+ 编辑 JSON
134140 </ Button >
135- < Button onClick = { ( ) => copyToClipboard ( jsonOutput ) } style = { { marginLeft : "16px" , marginBottom : "16px" } } >
136- Copy Result
141+ < Button icon = { < CopyOutlined /> } onClick = { ( ) => copyToClipboard ( jsonOutput ) } style = { { marginLeft : "16px" , marginBottom : "16px" } } >
142+ 复制结果
137143 </ Button >
138144 < Form . Item >
139145 < Input . TextArea placeholder = "JSON Output" value = { jsonOutput } rows = { 10 } readOnly />
@@ -145,4 +151,4 @@ const JsonEdit = () => {
145151 ) ;
146152} ;
147153
148- export default JsonEdit ;
154+ export default ClientPage ;
0 commit comments