From e7b9e2f0885390bf0d54c0da16847b3579757c63 Mon Sep 17 00:00:00 2001
From: rockbenben <qingwhat@gmail.com>
Date: Tue, 12 Mar 2024 20:02:14 +0800
Subject: [PATCH] feat(IMGPrompt): add JSON generation tool for data
 transformation

---
 src/app/data-parser/img-prompt/client.tsx | 54 +++++++++++++++++++++++
 src/app/data-parser/img-prompt/page.tsx   | 13 ++++++
 src/app/ui/Navigation.tsx                 | 17 +++++--
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 src/app/data-parser/img-prompt/client.tsx
 create mode 100644 src/app/data-parser/img-prompt/page.tsx

diff --git a/src/app/data-parser/img-prompt/client.tsx b/src/app/data-parser/img-prompt/client.tsx
new file mode 100644
index 0000000..93db000
--- /dev/null
+++ b/src/app/data-parser/img-prompt/client.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import React, { useState } from "react";
+import { Flex, Typography, Input, Button, message } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+
+const { Title, Paragraph } = Typography;
+const IMGPromptJsonCreator = () => {
+  const [input, setInput] = useState("");
+  const [attribute, setAttribute] = useState("");
+  const [object, setObject] = useState("");
+  const [jsonOutput, setJsonOutput] = useState([]);
+
+  const handleInputChange = (e) => setInput(e.target.value);
+  const handleAttributeChange = (e) => setAttribute(e.target.value);
+  const handleObjectChange = (e) => setObject(e.target.value);
+
+  const generateJson = () => {
+    const lines = input.split("\n");
+    const json = lines.map((line) => {
+      const [langName, displayName] = line.split("\t");
+      return { displayName, langName, object, attribute };
+    });
+    setJsonOutput(json);
+  };
+
+  return (
+    <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "24px" }}>
+      <Flex gap="small" vertical>
+        <Title level={2}>IMGPrompt 数据转换器</Title>
+        <Paragraph>
+          本工具用于批量生成 IMGPrompt 数据。用户可以通过输入特定格式的文本（例如：显示名称与语言名称，用制表符分隔，即「displayName langName」）以及指定的对象和属性， 来快速生成 JSON 格式的数据。
+        </Paragraph>
+        <Flex gap="small">
+          <Input placeholder="对象 object" value={object} onChange={handleObjectChange} />
+          <Input placeholder="属性 attribute" value={attribute} onChange={handleAttributeChange} />
+        </Flex>
+        <Input.TextArea rows={10} value={input} onChange={handleInputChange} placeholder="请输入内容，格式为：显示名称\t语言名称" />
+        <Flex wrap="wrap" gap="small">
+          <Button type="primary" onClick={generateJson}>
+            生成 JSON
+          </Button>
+          <CopyToClipboard text={JSON.stringify(jsonOutput, null, 2)} onCopy={() => message.success("结果已复制到剪贴板")}>
+            <Button icon={<CopyOutlined />}>复制结果</Button>
+          </CopyToClipboard>
+        </Flex>
+        <pre>{JSON.stringify(jsonOutput, null, 2)}</pre>
+      </Flex>
+    </div>
+  );
+};
+
+export default IMGPromptJsonCreator;
diff --git a/src/app/data-parser/img-prompt/page.tsx b/src/app/data-parser/img-prompt/page.tsx
new file mode 100644
index 0000000..c17db45
--- /dev/null
+++ b/src/app/data-parser/img-prompt/page.tsx
@@ -0,0 +1,13 @@
+import ClientPage from "./client";
+
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "IMGPrompt 数据生成器",
+  description: "这款数据生成器专为 Img-Prompt 数据处理设计，支持用户通过自定义对象与属性批量生成 JSON 数据。简化数据格式转换过程，实现快速生成、编辑与复制操作。",
+  keywords: "IMGPrompt, JSON 数据生成器, 在线 JSON 编辑器, 数据格式转换, 批量数据处理, 自定义对象属性, 编程辅助工具, 数据管理",
+};
+
+export default function Page() {
+  return <ClientPage />;
+}
diff --git a/src/app/ui/Navigation.tsx b/src/app/ui/Navigation.tsx
index 2cc016f..c928bf3 100644
--- a/src/app/ui/Navigation.tsx
+++ b/src/app/ui/Navigation.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import type { MenuProps } from "antd";
 import { Menu, Row, Col } from "antd";
 import { usePathname } from "next/navigation";
-import { BgColorsOutlined, ExperimentOutlined, ThunderboltOutlined, GithubOutlined } from "@ant-design/icons";
+import { BgColorsOutlined, DatabaseOutlined, ExperimentOutlined, ThunderboltOutlined, GithubOutlined } from "@ant-design/icons";
 
 const items: MenuProps["items"] = [
   {
@@ -17,8 +17,19 @@ const items: MenuProps["items"] = [
     key: "/",
   },
   {
-    label: <Link href="/data-parser/flare">文本解析器</Link>,
-    key: "/data-parser/flare",
+    label: "数据解析工具",
+    key: "dataParser",
+    icon: <DatabaseOutlined />,
+    children: [
+      {
+        label: <Link href="/data-parser/img-prompt">IMGPrompt 数据转换器</Link>,
+        key: "/data-parser/img-prompt",
+      },
+      {
+        label: <Link href="/data-parser/flare">Flare 书签解析工具</Link>,
+        key: "/data-parser/flare",
+      },
+    ],
   },
   {
     label: <Link href="/text-splitter">文本分割</Link>,