diff --git a/app/components/Icons/StringIcon.tsx b/app/components/Icons/StringIcon.tsx index bfbc73588..e199a9849 100644 --- a/app/components/Icons/StringIcon.tsx +++ b/app/components/Icons/StringIcon.tsx @@ -1,16 +1,19 @@ -export function StringIcon(props: React.SVGProps) { +import React from "react"; + +export function StringIcon({ className }: { className?: string }) { return ( ); diff --git a/app/components/JsonStringView.tsx b/app/components/JsonStringView.tsx new file mode 100644 index 000000000..732cee427 --- /dev/null +++ b/app/components/JsonStringView.tsx @@ -0,0 +1,223 @@ +import { useJson } from "~/hooks/useJson"; +import { useJsonDoc } from "~/hooks/useJsonDoc"; +import { CopyTextButton } from "./CopyTextButton"; +import { Body } from "./Primitives/Body"; +import { Mono } from "./Primitives/Mono"; +import { SmallTitle } from "./Primitives/SmallTitle"; +import { useState } from "react"; + +export function JsonStringView() { + const [json] = useJson(); + const { minimal } = useJsonDoc(); + const [formatType, setFormatType] = useState<"java" | "csharp" | "javascript" | "python" | "go" | "c" | "cpp" | "rust">("java"); + + // 智能转义函数，避免重复转义 + const smartEscape = (str: string): string => { + // 检查是否包含已经转义的JSON字符串（包含 \\" 模式） + const hasEscapedJson = /\\"/.test(str); + + if (hasEscapedJson) { + // 如果包含已转义的JSON，我们需要特殊处理 + // 将 \\" 替换为 \"，然后进行正常转义 + return str + .replace(/\\\\"/g, '\\"') // 将 \\" 替换为 \" + .replace(/\\/g, '\\\\') // 转义反斜杠 + .replace(/"/g, '\\"'); // 转义双引号 + } + + // 否则进行正常转义 + return str + .replace(/\\/g, '\\\\') + .replace(/"/g, '\\"'); + }; + + // 将JSON转换为Java String格式（压缩成一行） + const convertToJavaString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + console.log('Java conversion - original JSON string:', jsonString); + const result = `String jsonString = "${smartEscape(jsonString)}";`; + console.log('Java conversion - final result:', result); + return result; + }; + + // 将JSON转换为C# String格式（压缩成一行） + const convertToCSharpString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `string jsonString = "${smartEscape(jsonString)}";`; + }; + + // 将JSON转换为JavaScript String格式（压缩成一行） + const convertToJavaScriptString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `const jsonString = "${smartEscape(jsonString)}";`; + }; + + // 将JSON转换为Python String格式（压缩成一行） + const convertToPythonString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `json_string = "${smartEscape(jsonString)}"`; + }; + + // 将JSON转换为Go String格式（压缩成一行） + const convertToGoString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `jsonString := "${smartEscape(jsonString)}"`; + }; + + // 将JSON转换为C String格式（压缩成一行） + const convertToCString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `char* jsonString = "${smartEscape(jsonString)}";`; + }; + + // 将JSON转换为C++ String格式（压缩成一行） + const convertToCppString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `std::string jsonString = "${smartEscape(jsonString)}";`; + }; + + // 将JSON转换为Rust String格式（压缩成一行） + const convertToRustString = (obj: any): string => { + const jsonString = JSON.stringify(obj); // 压缩成一行 + return `let json_string = "${smartEscape(jsonString)}";`; + }; + + // 根据选择的格式生成对应的字符串 + const getFormattedString = () => { + switch (formatType) { + case "java": + return convertToJavaString(json); + case "csharp": + return convertToCSharpString(json); + case "javascript": + return convertToJavaScriptString(json); + case "python": + return convertToPythonString(json); + case "go": + return convertToGoString(json); + case "c": + return convertToCString(json); + case "cpp": + return convertToCppString(json); + case "rust": + return convertToRustString(json); + default: + return convertToJavaString(json); + } + }; + + const formattedString = getFormattedString(); + const containerHeight = minimal ? "calc(100vh - 66px)" : "calc(100vh - 106px)"; + + return ( +
+ {/* 控制栏 */} +
+
+ Code String Format +
+ + + + + + + + +
+
+ +
+ + {formattedString.length} characters + + +
+
+ + {/* 代码字符串显示区域 */} +
+
+ + {formattedString} + +
+
+
+ ); +} diff --git a/app/components/SideBar.tsx b/app/components/SideBar.tsx index 2566763f8..58849be23 100644 --- a/app/components/SideBar.tsx +++ b/app/components/SideBar.tsx @@ -1,5 +1,6 @@ import { TemplateIcon, CodeIcon, DownloadIcon } from "@heroicons/react/outline"; import { TreeIcon } from "~/components/Icons/TreeIcon"; +import { StringIcon } from "~/components/Icons/StringIcon"; import { useHotkeys } from "react-hotkeys-hook"; import { Link, useLocation, useNavigate } from "remix"; import { useJsonDoc } from "~/hooks/useJsonDoc"; @@ -50,6 +51,18 @@ export function SideBar() { + + + Code String + + ⌥ + + + 4 + + + +
    diff --git a/app/components/UrlForm.tsx b/app/components/UrlForm.tsx index 2cce1200c..110be7c2d 100644 --- a/app/components/UrlForm.tsx +++ b/app/components/UrlForm.tsx @@ -18,26 +18,28 @@ export function UrlForm({ className }: UrlFormProps) { action="/actions/createFromUrl" className={`${className}`} > -
    - +