├── .nvmrc
├── app
    ├── favicon.ico
    ├── robots.ts
    ├── ai
    │   └── page.tsx
    ├── image
    │   └── page.tsx
    ├── globals.css
    ├── sitemap.ts
    ├── utils
    │   ├── tryParseJson.ts
    │   └── fetchToCurl.ts
    ├── components
    │   ├── FriendLinks.tsx
    │   ├── Navigation.tsx
    │   ├── GitHubLink.tsx
    │   ├── JsonLd.tsx
    │   ├── KeywordOptimization.tsx
    │   ├── RelatedTools.tsx
    │   ├── PerformanceMonitor.tsx
    │   ├── QuickTip.tsx
    │   ├── JsonParser.tsx
    │   ├── VisitorStats.tsx
    │   └── FetchToCurl.tsx
    ├── api
    │   ├── video
    │   │   └── convert
    │   │   │   └── route.ts
    │   ├── convert
    │   │   └── route.ts
    │   └── og
    │   │   └── route.tsx
    ├── metadata.ts
    ├── layout.tsx
    ├── video
    │   └── page.tsx
    └── page.tsx
├── husky
    └── pre-commit
├── public
    ├── vercel.svg
    ├── sitemap.xml
    ├── baidusitemap.xml
    ├── robots.txt
    ├── window.svg
    ├── file.svg
    ├── globe.svg
    ├── sitemap-0.xml
    └── next.svg
├── dv.md
├── urls.txt
├── postcss.config.mjs
├── .vscode
    ├── extensions.json
    ├── launch.json
    └── settings.json
├── ecosystem.config.js
├── eslint.config.mjs
├── tailwind.config.ts
├── .gitignore
├── tsconfig.json
├── next-sitemap.config.js
├── next.config.ts
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 20


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wxingheng/text-escape/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npm run version-auto 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/dv.md:
--------------------------------------------------------------------------------
1 | curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=https://text-escape.jcommon.top&token=Ce9lijsmmj0KydIb"


--------------------------------------------------------------------------------
/urls.txt:
--------------------------------------------------------------------------------
1 | https://text-escape.jcommon.top
2 | https://text-escape.jcommon.top/api/og
3 | https://text-escape.jcommon.top/en
4 | https://text-escape.jcommon.top/video 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"recommendations": [
3 | 		"dbaeumer.vscode-eslint",
4 | 		"esbenp.prettier-vscode",
5 | 		"stylelint.vscode-stylelint",
6 | 		"visualstudioexptteam.vscodeintellicode"
7 | 	]
8 | }


--------------------------------------------------------------------------------
/public/sitemap.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3 | <sitemap><loc>https://text-escape.jcommon.top/sitemap-0.xml</loc></sitemap>
4 | </sitemapindex>


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // 使用 IntelliSense 了解相关属性。
 3 |   // 悬停以查看现有属性的描述。
 4 |   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
 5 |   "version": "0.2.0",
 6 |   "configurations": [
 7 |     
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/public/baidusitemap.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3 |   <url>
4 |     <loc>https://text-escape.jcommon.top</loc>
5 |     <lastmod>2024-03-21</lastmod>
6 |     <changefreq>daily</changefreq>
7 |     <priority>1.0</priority>
8 |   </url>
9 | </urlset> 


--------------------------------------------------------------------------------
/app/robots.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from 'next';
 2 | 
 3 | export default function robots(): MetadataRoute.Robots {
 4 |   return {
 5 |     rules: {
 6 |       userAgent: '*',
 7 |       allow: '/',
 8 |       disallow: ['/api/*'],
 9 |     },
10 |     sitemap: 'https://text-escape.jcommon.top/sitemap.xml',
11 |   };
12 | } 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
 1 | # *
 2 | User-agent: *
 3 | Allow: /
 4 | Disallow: /api/
 5 | Disallow: /admin/
 6 | 
 7 | # Baiduspider
 8 | User-agent: Baiduspider
 9 | Allow: /
10 | Crawl-delay: 1
11 | 
12 | # Host
13 | Host: https://text-escape.jcommon.top
14 | 
15 | # Sitemaps
16 | Sitemap: https://text-escape.jcommon.top/sitemap.xml
17 | 


--------------------------------------------------------------------------------
/ecosystem.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   apps: [{
 3 |     name: 'text-escape',
 4 |     script: 'node_modules/next/dist/bin/next',
 5 |     args: 'start',
 6 |     instances: 1,
 7 |     autorestart: true,
 8 |     watch: false,
 9 |     max_memory_restart: '1G',
10 |     env: {
11 |       NODE_ENV: 'production',
12 |       PORT: process.env.PORT || 3005
13 |     }
14 |   }]
15 | } 


--------------------------------------------------------------------------------
/public/window.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>


--------------------------------------------------------------------------------
/public/file.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>


--------------------------------------------------------------------------------
/app/ai/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function AiPage() {
 4 |   return (
 5 |     <div className="max-w-2xl mx-auto py-12 px-4">
 6 |       <h1 className="text-3xl font-bold mb-4 dark:text-white">AI 工具</h1>
 7 |       <p className="text-gray-700 dark:text-gray-300 mb-8">
 8 |         这里将会集成各种实用的 AI 工具，敬请期待！
 9 |       </p>
10 |       {/* 你可以在这里添加更多 AI 相关的功能和内容 */}
11 |     </div>
12 |   );
13 | } 


--------------------------------------------------------------------------------
/app/image/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default function ImagePage() {
 4 |   return (
 5 |     <div className="max-w-2xl mx-auto py-12 px-4">
 6 |       <h1 className="text-3xl font-bold mb-4 dark:text-white">图片工具</h1>
 7 |       <p className="text-gray-700 dark:text-gray-300 mb-8">
 8 |         这里将会集成各种实用的图片处理工具，敬请期待！
 9 |       </p>
10 |       {/* 你可以在这里添加更多图片相关的功能和内容 */}
11 |     </div>
12 |   );
13 | } 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --background: #ffffff;
 7 |   --foreground: #171717;
 8 | }
 9 | 
10 | @media (prefers-color-scheme: dark) {
11 |   :root {
12 |     --background: #0a0a0a;
13 |     --foreground: #ededed;
14 |   }
15 | }
16 | 
17 | body {
18 |   color: var(--foreground);
19 |   background: var(--background);
20 |   font-family: Arial, Helvetica, sans-serif;
21 | }
22 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path";
 2 | import { fileURLToPath } from "url";
 3 | import { FlatCompat } from "@eslint/eslintrc";
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url);
 6 | const __dirname = dirname(__filename);
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | });
11 | 
12 | const eslintConfig = [
13 |   ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 | 
16 | export default eslintConfig;
17 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | } satisfies Config;
19 | 


--------------------------------------------------------------------------------
/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import { MetadataRoute } from 'next';
 2 | 
 3 | export default function sitemap(): MetadataRoute.Sitemap {
 4 |   const baseUrl = 'https://text-escape.jcommon.top';
 5 |   
 6 |   return [
 7 |     {
 8 |       url: baseUrl,
 9 |       lastModified: new Date(),
10 |       changeFrequency: 'daily',
11 |       priority: 1,
12 |     },
13 |     {
14 |       url: `${baseUrl}/video`,
15 |       lastModified: new Date(),
16 |       changeFrequency: 'weekly',
17 |       priority: 0.8,
18 |     },
19 |   ];
20 | } 


--------------------------------------------------------------------------------
/app/utils/tryParseJson.ts:
--------------------------------------------------------------------------------
 1 | export function tryParseJson(str: string): string {
 2 |     let result = str;
 3 |     try {
 4 |       result = JSON.parse(str);
 5 |     } catch {
 6 |       try {
 7 |         const start = str.indexOf("```json\n");
 8 |         const end = str.lastIndexOf("\n```");
 9 |         if (start !== -1 && end !== -1) {
10 |           result = JSON.parse(str.substring(start + 8, end));
11 |         }
12 |       } catch (err) {
13 |         console.warn("tryParseJson error", err);
14 |       }
15 |     }
16 |     return typeof result === "string" ? result : JSON.stringify(result, null, 2);
17 |   }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 
43 | yarn.lock
44 | 
45 | package-lock.json


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/app/components/FriendLinks.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | export default function FriendLinks() {
 4 |   const links = [
 5 |     {
 6 |       name: 'Markdown转图片工具',
 7 |       url: 'https://markdown-to-image-serve.jcommon.top',
 8 |       icon: '📝'
 9 |     },
10 |     // 可以在这里添加更多友情链接
11 |   ]
12 | 
13 |   return (
14 |     <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
15 |       <span className="font-medium">友情链接：</span>
16 |       {links.map((link) => (
17 |         <a
18 |           key={link.url}
19 |           href={link.url}
20 |           target="_blank"
21 |           rel="noopener noreferrer"
22 |           className="flex items-center space-x-1 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
23 |         >
24 |           <span>{link.icon}</span>
25 |           <span>{link.name}</span>
26 |         </a>
27 |       ))}
28 |     </div>
29 |   )
30 | } 


--------------------------------------------------------------------------------
/next-sitemap.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next-sitemap').IConfig} */
 2 | module.exports = {
 3 |   siteUrl: 'https://text-escape.jcommon.top',
 4 |   generateRobotsTxt: true,
 5 |   changefreq: 'daily',
 6 |   priority: 1.0,
 7 |   sitemapSize: 7000,
 8 |   
 9 |   transform: async (config, path) => {
10 |     // 根据路径自定义优先级
11 |     const priority = path === '/' ? 1.0 : 0.8
12 |     const changefreq = path === '/' ? 'daily' : 'weekly'
13 |     
14 |     return {
15 |       loc: path,
16 |       changefreq,
17 |       priority,
18 |       lastmod: new Date().toISOString(),
19 |     }
20 |   },
21 |   
22 |   robotsTxtOptions: {
23 |     policies: [
24 |       {
25 |         userAgent: '*',
26 |         allow: '/',
27 |         disallow: ['/api/', '/admin/'],
28 |       },
29 |       // 针对百度爬虫的特殊规则
30 |       {
31 |         userAgent: 'Baiduspider',
32 |         allow: '/',
33 |         crawlDelay: 1,
34 |       }
35 |     ],
36 |   },
37 | } 


--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>


--------------------------------------------------------------------------------
/public/sitemap-0.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3 | <url><loc>https://text-escape.jcommon.top/robots.txt</loc><lastmod>2025-05-09T03:09:32.481Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
4 | <url><loc>https://text-escape.jcommon.top</loc><lastmod>2025-05-09T03:09:32.482Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
5 | <url><loc>https://text-escape.jcommon.top/sitemap.xml</loc><lastmod>2025-05-09T03:09:32.482Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
6 | <url><loc>https://text-escape.jcommon.top/video</loc><lastmod>2025-05-09T03:09:32.482Z</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>
7 | </urlset>


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
 1 | import type { NextConfig } from "next";
 2 | // import { withContentlayer } from 'next-contentlayer'
 3 | 
 4 | const nextConfig: NextConfig = {
 5 |   /* config options here */
 6 |   headers: async () => {
 7 |     return [
 8 |       {
 9 |         source: '/:path*',
10 |         headers: [
11 |           {
12 |             key: 'X-Robots-Tag',
13 |             value: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1',
14 |           },
15 |           {
16 |             key: 'X-Content-Type-Options',
17 |             value: 'nosniff',
18 |           },
19 |           {
20 |             key: 'X-Frame-Options',
21 |             value: 'DENY',
22 |           },
23 |           {
24 |             key: 'X-XSS-Protection',
25 |             value: '1; mode=block',
26 |           }
27 |         ],
28 |       },
29 |     ]
30 |   },
31 |   poweredByHeader: false,
32 |   compress: true,
33 |   images: {
34 |     domains: ['text-escape.jcommon.top'],
35 |     formats: ['image/avif', 'image/webp'],
36 |     deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
37 |   },
38 | };
39 | 
40 | export default nextConfig
41 | 


--------------------------------------------------------------------------------
/app/components/Navigation.tsx:
--------------------------------------------------------------------------------
 1 | 'use client'
 2 | 
 3 | import Link from 'next/link'
 4 | import { usePathname } from 'next/navigation'
 5 | 
 6 | export default function Navigation() {
 7 |   const pathname = usePathname()
 8 | 
 9 |   const navItems = [
10 |     { name: '文本工具', path: '/' },
11 |     { name: 'AI 工具', path: '/ai' },
12 |     { name: '图片工具', path: '/image' },
13 |     { name: '视频工具', path: '/video' },
14 |   ]
15 | 
16 |   return (
17 |     <nav className="bg-white dark:bg-gray-800 shadow-md fixed top-0 left-0 w-full z-1000">
18 |       <div className="container mx-auto px-4">
19 |         <div className="flex space-x-8">
20 |           {navItems.map((item) => (
21 |             <Link
22 |               key={item.path}
23 |               href={item.path}
24 |               className={`py-4 px-2 ${
25 |                 pathname === item.path
26 |                   ? 'text-blue-600 border-b-2 border-blue-600'
27 |                   : 'text-gray-600 hover:text-blue-600'
28 |               }`}
29 |             >
30 |               {item.name}
31 |             </Link>
32 |           ))}
33 |         </div>
34 |       </div>
35 |     </nav>
36 |   )
37 | } 


--------------------------------------------------------------------------------
/app/components/GitHubLink.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | export default function GitHubLink() {
 4 |   return (
 5 |     <a
 6 |       href="https://github.com/wxingheng/text-escape"
 7 |       target="_blank"
 8 |       rel="noopener noreferrer"
 9 |       className="fixed top-4 right-4 text-gray-600 hover:text-gray-900 transition-colors z-[1001]"
10 |       title="查看源代码"
11 |     >
12 |       <svg
13 |         height="32"
14 |         aria-hidden="true"
15 |         viewBox="0 0 16 16"
16 |         version="1.1"
17 |         width="32"
18 |         data-view-component="true"
19 |         className="fill-current"
20 |       >
21 |         <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
22 |       </svg>
23 |     </a>
24 |   );
25 | } 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "text-escape",
 3 |   "version": "1.1.3",
 4 |   "private": true,
 5 |   "description": "一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义",
 6 |   "author": "wxingheng",
 7 |   "scripts": {
 8 |     "dev": "next dev --turbopack -p 3004",
 9 |     "build": "next build",
10 |     "start": "next start -p ${PORT:-3005}",
11 |     "lint": "next lint",
12 |     "postbuild": "next-sitemap",
13 |     "version-auto": "jcommon-node -va -t",
14 |     "pm2:start": "pm2 start ecosystem.config.js",
15 |     "pm2:stop": "pm2 stop text-escape",
16 |     "pm2:restart": "pm2 restart text-escape",
17 |     "pm2:logs": "pm2 logs text-escape",
18 |     "pm2:status": "pm2 status"
19 |   },
20 |   "dependencies": {
21 |     "next": "15.1.2",
22 |     "react": "^19.0.0",
23 |     "react-dom": "^19.0.0",
24 |     "tailwindcss": "^3.4.1"
25 |   },
26 |   "devDependencies": {
27 |     "jcommon-node": "^1.0.14",
28 |     "@eslint/eslintrc": "^3",
29 |     "@types/node": "^20",
30 |     "@types/react": "^19",
31 |     "@types/react-dom": "^19",
32 |     "eslint": "^9",
33 |     "eslint-config-next": "15.1.2",
34 |     "next-sitemap": "^4.2.3",
35 |     "postcss": "^8",
36 |     "typescript": "^5"
37 |   },
38 |   "engines": {
39 |     "node": "20"
40 |   },
41 |   "time": "250401202509"
42 | }
43 | 


--------------------------------------------------------------------------------
/app/utils/fetchToCurl.ts:
--------------------------------------------------------------------------------
 1 | interface RequestOptions extends RequestInit {
 2 |   url: string;
 3 | }
 4 | 
 5 | export function fetchToCurl(options: RequestOptions): string {
 6 |   const {
 7 |     method = 'GET',
 8 |     headers = {},
 9 |     body,
10 |     url,
11 |   } = options;
12 | 
13 |   // 开始构建 curl 命令
14 |   let curlCommand = `curl '${url}'`;
15 | 
16 |   // 添加请求方法
17 |   if (method !== 'GET') {
18 |     curlCommand += ` -X ${method}`;
19 |   }
20 | 
21 |   // 添加请求头
22 |   Object.entries(headers).forEach(([key, value]) => {
23 |     curlCommand += ` \\\n  -H '${key}: ${value}'`;
24 |   });
25 | 
26 |   // 添加请求体
27 |   if (body) {
28 |     let bodyStr = '';
29 |     if (typeof body === 'string') {
30 |       bodyStr = body;
31 |     } else if (body instanceof URLSearchParams) {
32 |       bodyStr = body.toString();
33 |     } else if (body instanceof FormData) {
34 |       const formDataObj: Record<string, string> = {};
35 |       body.forEach((value, key) => {
36 |         formDataObj[key] = value.toString();
37 |       });
38 |       bodyStr = JSON.stringify(formDataObj);
39 |     } else if (body instanceof Blob) {
40 |       bodyStr = '[Blob data]';
41 |     } else {
42 |       bodyStr = JSON.stringify(body);
43 |     }
44 |     curlCommand += ` \\\n  -d '${bodyStr}'`;
45 |   }
46 | 
47 |   return curlCommand;
48 | } 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/app/components/JsonLd.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | // import { usePathname } from 'next/navigation'; // 移除未使用的导入
 4 | 
 5 | export default function JsonLd() {
 6 |   // const pathname = usePathname(); // 移除未使用变量
 7 | 
 8 |   const jsonLd = {
 9 |     '@context': 'https://schema.org',
10 |     '@type': 'WebApplication',
11 |     name: '文本转义工具',
12 |     description: '一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义，提供实时预览和一键复制功能。',
13 |     url: 'https://text-escape.jcommon.top',
14 |     applicationCategory: 'DeveloperApplication',
15 |     operatingSystem: 'Any',
16 |     browserRequirements: 'Requires JavaScript. Requires HTML5.',
17 |     offers: {
18 |       '@type': 'Offer',
19 |       price: '0',
20 |       priceCurrency: 'CNY'
21 |     },
22 |     author: {
23 |       '@type': 'Person',
24 |       name: 'jcommon',
25 |       url: 'https://github.com/wxingheng'
26 |     },
27 |     publisher: {
28 |       '@type': 'Organization',
29 |       name: 'jcommon',
30 |       url: 'https://github.com/wxingheng'
31 |     },
32 |     mainEntityOfPage: {
33 |       '@type': 'WebPage',
34 |       '@id': 'https://text-escape.jcommon.top'
35 |     },
36 |     potentialAction: {
37 |       '@type': 'UseAction',
38 |       target: 'https://text-escape.jcommon.top'
39 |     }
40 |   };
41 | 
42 |   return (
43 |     <script
44 |       type="application/ld+json"
45 |       dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
46 |     />
47 |   );
48 | } 


--------------------------------------------------------------------------------
/app/components/KeywordOptimization.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | const keywords = [
 4 |   {
 5 |     category: '文本处理',
 6 |     terms: [
 7 |       '文本转义', '字符串转义', '文本反转义', '字符串反转义',
 8 |       '换行符转义', '双引号转义', '特殊字符转义', 'HTML转义'
 9 |     ]
10 |   },
11 |   {
12 |     category: 'JSON相关',
13 |     terms: [
14 |       'JSON转义', 'JSON字符串', 'JSON格式化', 'JSON压缩',
15 |       'JSON验证', 'JSON解析', 'JSON美化', 'JSON在线工具'
16 |     ]
17 |   },
18 |   {
19 |     category: '开发工具',
20 |     terms: [
21 |       '在线工具', '开发者工具', '编程工具', '代码工具',
22 |       '文本工具', '字符串工具', '格式转换', '在线转换'
23 |     ]
24 |   }
25 | ];
26 | 
27 | export default function KeywordOptimization() {
28 |   return (
29 |     <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mt-8">
30 |       <h2 className="text-xl font-semibold mb-4 dark:text-white">相关关键词</h2>
31 |       <div className="space-y-6">
32 |         {keywords.map((group) => (
33 |           <div key={group.category}>
34 |             <h3 className="font-medium text-gray-900 dark:text-white mb-2">{group.category}</h3>
35 |             <div className="flex flex-wrap gap-2">
36 |               {group.terms.map((term) => (
37 |                 <span
38 |                   key={term}
39 |                   className="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full text-sm"
40 |                 >
41 |                   {term}
42 |                 </span>
43 |               ))}
44 |             </div>
45 |           </div>
46 |         ))}
47 |       </div>
48 |     </div>
49 |   );
50 | } 


--------------------------------------------------------------------------------
/app/components/RelatedTools.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import Link from 'next/link';
 4 | 
 5 | const tools = [
 6 |   {
 7 |     name: 'JSON 格式化工具',
 8 |     description: '在线 JSON 格式化、压缩、验证工具',
 9 |     url: 'https://json.jcommon.top',
10 |     icon: '📝'
11 |   },
12 |   {
13 |     name: 'Markdown 转图片',
14 |     description: '将 Markdown 文档转换为图片',
15 |     url: 'https://markdown-to-image-serve.jcommon.top',
16 |     icon: '🖼️'
17 |   },
18 |   {
19 |     name: '视频格式转换',
20 |     description: '在线视频格式转换工具',
21 |     url: 'https://video-format-convert.jcommon.top',
22 |     icon: '🎥'
23 |   }
24 | ];
25 | 
26 | export default function RelatedTools() {
27 |   return (
28 |     <div className="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mt-8">
29 |       <h2 className="text-xl font-semibold mb-4 dark:text-white">相关工具</h2>
30 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
31 |         {tools.map((tool) => (
32 |           <Link
33 |             key={tool.url}
34 |             href={tool.url}
35 |             target="_blank"
36 |             className="block p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-400 transition-colors"
37 |           >
38 |             <div className="flex items-center space-x-3">
39 |               <span className="text-2xl">{tool.icon}</span>
40 |               <div>
41 |                 <h3 className="font-medium text-gray-900 dark:text-white">{tool.name}</h3>
42 |                 <p className="text-sm text-gray-500 dark:text-gray-400">{tool.description}</p>
43 |               </div>
44 |             </div>
45 |           </Link>
46 |         ))}
47 |       </div>
48 |     </div>
49 |   );
50 | } 


--------------------------------------------------------------------------------
/app/api/video/convert/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextRequest, NextResponse } from 'next/server'
 2 | import { writeFile, readFile, unlink } from 'fs/promises'
 3 | import { join } from 'path'
 4 | import { exec } from 'child_process'
 5 | import { promisify } from 'util'
 6 | 
 7 | const execAsync = promisify(exec)
 8 | 
 9 | export async function POST(request: NextRequest) {
10 |   try {
11 |     const formData = await request.formData()
12 |     const file = formData.get('file') as File
13 |     const outputFormat = formData.get('format') as string
14 | 
15 |     if (!file) {
16 |       return NextResponse.json(
17 |         { error: '未找到文件' },
18 |         { status: 400 }
19 |       )
20 |     }
21 | 
22 |     // 创建临时文件
23 |     const bytes = await file.arrayBuffer()
24 |     const buffer = Buffer.from(bytes)
25 |     const tempInputPath = join('/tmp', file.name)
26 |     const tempOutputPath = join('/tmp', `converted_${Date.now()}.${outputFormat}`)
27 | 
28 |     await writeFile(tempInputPath, buffer)
29 | 
30 |     // 使用 ffmpeg 进行转换
31 |     try {
32 |       await execAsync(`ffmpeg -i ${tempInputPath} ${tempOutputPath}`)
33 |       
34 |       // 读取转换后的文件
35 |       const convertedFile = await readFile(tempOutputPath)
36 |       
37 |       // 清理临时文件
38 |       await unlink(tempInputPath)
39 |       await unlink(tempOutputPath)
40 | 
41 |       return new NextResponse(convertedFile, {
42 |         headers: {
43 |           'Content-Type': `video/${outputFormat}`,
44 |           'Content-Disposition': `attachment; filename="converted.${outputFormat}"`,
45 |         },
46 |       })
47 |     } catch (error) {
48 |       console.error('转换失败:', error)
49 |       return NextResponse.json(
50 |         { error: '视频转换失败' },
51 |         { status: 500 }
52 |       )
53 |     }
54 |   } catch (error) {
55 |     console.error('处理请求失败:', error)
56 |     return NextResponse.json(
57 |       { error: '服务器内部错误' },
58 |       { status: 500 }
59 |     )
60 |   }
61 | } 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // "editor.codeActionsOnSave": {
 3 |   //   "source.fixAll.eslint": "explicit"
 4 |   // },
 5 |   "i18n-ally.localesPaths": ["src/i18n", "src/locales"],
 6 |   "[typescriptreact]": {
 7 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
 8 |   },
 9 |   "[json]": {
10 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
11 |   },
12 |   "editor.formatOnSave": true,
13 |   // "[javascriptreact]": {
14 |   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
15 |   // },
16 |   // "[typescript]": {
17 |   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
18 |   // },
19 |   // "[javascript]": {
20 |   //   "editor.defaultFormatter": "esbenp.prettier-vscode"
21 |   // },
22 |   // 添加一个配置，在保存时自动格式化，按照项目的 eslint的规则格式化
23 |   // "editor.codeActionsOnSave": {
24 |   // 	"source.fixAll.eslint": "explicit"
25 |   // },
26 |   // source.addMissingImports: 自动为文件添加缺失的导入语句。
27 |   // source.fixAll: 尝试自动修复所有可以被自动修复的问题。
28 |   // source.organizeImports: 整理文件中的导入语句，让它们保持有序。
29 |   "editor.codeActionsOnSave": ["source.fixAll"],
30 |   "editor.minimap.enabled": false,
31 |   "[less]": {
32 |     // "editor.defaultFormatter": "teeLang.vsprettier"
33 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
34 |   },
35 |   "i18n-ally.extract.targetPickingStrategy": "file-previous",
36 |   "i18n-ally.enabledParsers": ["json"],
37 |   "i18n-ally.frameworks.ruby-rails.scopeRoot": "",
38 |   "[jsonc]": {
39 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
40 |   },
41 |   "i18n-ally.extract.keyMaxLength": 30,
42 |   "todohighlight.isEnable": false,
43 |   "i18n-ally.displayLanguage": "zh",
44 |   "i18n-ally.extract.keygenStrategy": "empty",
45 |   "i18n-ally.extract.keygenStyle": "ALL_CAPS",
46 |   "i18n-ally.keystyle": "nested",
47 |   "i18n-ally.languageTagSystem": "legacy",
48 |   "i18n-ally.preferredDelimiter": "_",
49 |   "i18n-ally.dirStructure": "dir",
50 |   "i18n-ally.extract.autoDetect": true,
51 |   "i18n-ally.annotationInPlace": false,
52 |   "i18n-ally.sourceLanguage": "en",
53 |   "i18n-ally.enabledFrameworks": true,
54 |   "cSpell.words": ["calculagraph", "cooldown", "knowledges", "Knowledges", "seperator"]
55 | }
56 | 


--------------------------------------------------------------------------------
/app/metadata.ts:
--------------------------------------------------------------------------------
 1 | import { Metadata } from 'next'
 2 | 
 3 | export const metadata: Metadata = {
 4 |   title: {
 5 |     template: '文本转义工具 - 在线文本转义工具',
 6 |     default: '文本转义工具 - 在线文本转义工具',
 7 |   },
 8 |   description: '一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义',
 9 |   keywords: [
10 |     '文本转义', '文本转义工具', '在线文本转义工具', 
11 |     '字符串转义', 'JSON转义', '换行符转义',
12 |     '在线工具', '开发者工具', '编程工具'
13 |   ],
14 |   authors: [{ name: 'jcommon' }],
15 |   creator: 'jcommon',
16 |   publisher: 'jcommon',
17 |   robots: {
18 |     index: true,
19 |     follow: true,
20 |     googleBot: {
21 |       index: true,
22 |       follow: true,
23 |       'max-video-preview': -1,
24 |       'max-image-preview': 'large',
25 |       'max-snippet': -1,
26 |     },
27 |   },
28 |   icons: {
29 |     icon: '/favicon.ico',
30 |     shortcut: '/favicon-16x16.png',
31 |     apple: '/apple-touch-icon.png',
32 |   },
33 |   viewport: {
34 |     width: 'device-width',
35 |     initialScale: 1,
36 |   },
37 |   openGraph: {
38 |     title: '文本转义工具 - 在线文本转义工具',
39 |     description: '一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义',
40 |     url: 'https://text-escape.jcommon.top',
41 |     siteName: '文本转义工具 - 在线文本转义工具',
42 |     images: [
43 |       {
44 |         url: '/og-image.png',
45 |         width: 1200,
46 |         height: 630,
47 |       }
48 |     ],
49 |     locale: 'zh_CN',
50 |     type: 'website',
51 |     // article: {
52 |     //   publishedTime: new Date().toISOString(),
53 |     //   modifiedTime: new Date().toISOString(),
54 |     //   section: '开发工具',
55 |     //   tags: ['文本转义', '开发工具', '在线工具']
56 |     // }
57 |   },
58 |   twitter: {
59 |     card: 'summary_large_image',
60 |     title: '文本转义工具 - 在线文本转义工具',
61 |     description: '一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义',
62 |     images: ['https://text-escape.jcommon.top/og-image.png'],
63 |   },
64 |   verification: {
65 |     google: '您的 Google Search Console 验证码',
66 |     // baidu: '您的百度站长验证码',
67 |     // bing: '您的 Bing Webmaster 验证码',
68 |     yandex: '您的 Yandex 验证码'
69 |   },
70 |   alternates: {
71 |     canonical: 'https://text-escape.jcommon.top',
72 |     languages: {
73 |       'zh-CN': 'https://text-escape.jcommon.top',
74 |       'en-US': 'https://text-escape.jcommon.top/en'
75 |     }
76 |   }
77 | } 


--------------------------------------------------------------------------------
/app/components/PerformanceMonitor.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useEffect } from 'react';
 4 | 
 5 | interface PerformanceEntryWithProcessingStart extends PerformanceEntry {
 6 |   processingStart?: number;
 7 | }
 8 | 
 9 | interface PerformanceEntryWithValue extends PerformanceEntry {
10 |   value?: number;
11 | }
12 | 
13 | interface PerformanceResourceTiming extends PerformanceEntry {
14 |   initiatorType?: string;
15 | }
16 | 
17 | export default function PerformanceMonitor() {
18 |   useEffect(() => {
19 |     // 监控页面加载性能
20 |     if (typeof window !== 'undefined' && 'performance' in window) {
21 |       const observer = new PerformanceObserver((list) => {
22 |         for (const entry of list.getEntries()) {
23 |           // 记录关键性能指标
24 |           if (entry.entryType === 'largest-contentful-paint') {
25 |             console.log('LCP:', entry.startTime);
26 |           } else if (entry.entryType === 'first-input') {
27 |             const firstInputEntry = entry as PerformanceEntryWithProcessingStart;
28 |             console.log('FID:', firstInputEntry.processingStart ? firstInputEntry.processingStart - entry.startTime : 0);
29 |           } else if (entry.entryType === 'layout-shift') {
30 |             const layoutShiftEntry = entry as PerformanceEntryWithValue;
31 |             console.log('CLS:', layoutShiftEntry.value || 0);
32 |           }
33 |         }
34 |       });
35 | 
36 |       // 观察性能指标
37 |       observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
38 | 
39 |       // 监控资源加载
40 |       const resourceObserver = new PerformanceObserver((list) => {
41 |         for (const entry of list.getEntries()) {
42 |           const resourceEntry = entry as PerformanceResourceTiming;
43 |           if (resourceEntry.initiatorType === 'script' || resourceEntry.initiatorType === 'css') {
44 |             console.log(`${resourceEntry.initiatorType} load time:`, entry.duration);
45 |           }
46 |         }
47 |       });
48 | 
49 |       resourceObserver.observe({ entryTypes: ['resource'] });
50 | 
51 |       return () => {
52 |         observer.disconnect();
53 |         resourceObserver.disconnect();
54 |       };
55 |     }
56 |   }, []);
57 | 
58 |   return null;
59 | } 


--------------------------------------------------------------------------------
/app/components/QuickTip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useState, useEffect } from 'react';
 4 | 
 5 | export default function QuickTip() {
 6 |   const [show, setShow] = useState(false);
 7 | 
 8 |   useEffect(() => {
 9 |     // 延迟 2 秒显示提示
10 |     const timer = setTimeout(() => setShow(true), 2000);
11 |     return () => clearTimeout(timer);
12 |   }, []);
13 | 
14 |   const handleBookmark = () => {
15 |     const title = document.title;
16 |     const url = window.location.href;
17 |     if (navigator.userAgent.toLowerCase().indexOf('mac') !== -1) {
18 |       alert(`请按 Command (⌘) + D 将本页添加到收藏夹\n\n标题：${title}\n网址：${url}`);
19 |     } else {
20 |       alert(`请按 Ctrl + D 将本页添加到收藏夹\n\n标题：${title}\n网址：${url}`);
21 |     }
22 |   };
23 | 
24 |   if (!show) return null;
25 | 
26 |   return (
27 |     <div 
28 |       className="fixed bottom-20 right-4 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 max-w-xs z-[1100]"
29 |       style={{ 
30 |         boxShadow: '0 0 15px rgba(0,0,0,0.1), 0 0 30px rgba(59, 130, 246, 0.2)'
31 |       }}
32 |     >
33 |       <div className="flex flex-col space-y-3">
34 |         <div className="flex items-center space-x-3">
35 |           <button
36 |             onClick={handleBookmark}
37 |             className="flex items-center space-x-2 bg-blue-500 text-white px-3 py-2 rounded-lg hover:bg-blue-600 transition-colors"
38 |           >
39 |             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
40 |               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
41 |             </svg>
42 |             <span>收藏本站</span>
43 |           </button>
44 |           <span className="text-sm text-gray-500 dark:text-gray-400">
45 |             {typeof window !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('mac') !== -1 ? '⌘ + D' : 'Ctrl + D'}
46 |           </span>
47 |         </div>
48 |         <div className="text-sm text-gray-500 dark:text-gray-400">
49 |           下次使用更方便哦！
50 |         </div>
51 |       </div>
52 |       <button
53 |         onClick={() => setShow(false)}
54 |         className="absolute -top-2 -right-2 w-6 h-6 bg-gray-200 dark:bg-gray-600 rounded-full flex items-center justify-center text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
55 |       >
56 |         ×
57 |       </button>
58 |     </div>
59 |   );
60 | } 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # text-escape
 2 | 
 3 | > 一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义
 4 | 
 5 | [![SEO Friendly](https://img.shields.io/badge/SEO-Friendly-green.svg)](https://nextjs.org/)
 6 | [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
 7 | [![Performance](https://img.shields.io/badge/Performance-Optimized-orange.svg)](https://web.dev/measure/)
 8 | 
 9 | 这是一个使用 [Next.js](https://nextjs.org) 构建的高性能项目模板，基于 [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app) 脚手架创建，并集成了 SEO 优化方案。
10 | 
11 | ## 🌈 在线体验
12 | 
13 | - 预览地址：[https://jcommon.top](https://jcommon.top)
14 | 
15 | 
16 | - ![image](https://github.com/user-attachments/assets/91d4d138-4521-401e-a206-46dab72e3b28)
17 | - ![image](https://github.com/user-attachments/assets/0cc684da-e4a4-40f9-836d-99b79ea27476)
18 | 
19 | 
20 | ## ✨ 核心特性
21 | 
22 | - 🔍 SEO 优化配置
23 | - 📱 响应式设计
24 | - 🎨 使用 [Geist](https://vercel.com/font) 字体
25 | - 🚀 自动页面更新
26 | - 📦 基于 Next.js 14
27 | - 🔧 TypeScript 支持
28 | - 📊 内置性能分析
29 | - 🌐 国际化支持
30 | 
31 | ## 🚀 快速开始
32 | 
33 | 1. 安装依赖：
34 | ```bash
35 | npm install
36 | # 或
37 | yarn install
38 | # 或
39 | pnpm install
40 | ```
41 | 
42 | 2. 启动开发服务器：
43 | ```bash
44 | npm run dev
45 | # 或
46 | yarn dev
47 | # 或
48 | pnpm dev
49 | ```
50 | 
51 | 3. 访问开发环境：[http://localhost:3000](http://localhost:3000)
52 | 
53 | ## 📁 项目结构
54 | 
55 | ```
56 | ├── app/                # 应用主目录
57 | │   ├── page.tsx       # 首页组件
58 | │   ├── layout.tsx     # 布局组件
59 | │   └── metadata.ts    # SEO 元数据配置
60 | ├── public/            # 静态资源目录
61 | │   ├── robots.txt     # 搜索引擎爬虫配置
62 | │   └── sitemap.xml    # 网站地图
63 | └── package.json       # 项目配置文件
64 | ```
65 | 
66 | ## 🌐 SEO 优化
67 | 
68 | 本项目已集成以下 SEO 优化方案：
69 | 
70 | - ✅ 自动生成 sitemap.xml
71 | - ✅ 优化的 meta 标签
72 | - ✅ 结构化数据支持
73 | - ✅ 响应式图片优化
74 | - ✅ 页面预渲染
75 | - ✅ 性能优化
76 | 
77 | ## 📈 性能指标
78 | 
79 | - Lighthouse 性能得分：95+
80 | - 首次内容渲染 (FCP)：< 1s
81 | - 最大内容渲染 (LCP)：< 2.5s
82 | - 累积布局偏移 (CLS)：< 0.1
83 | 
84 | ## 🚀 部署
85 | 
86 | 推荐使用 [Vercel](https://vercel.com) 进行部署：
87 | 
88 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/vercel/next.js/tree/canary/packages/create-next-app)
89 | 
90 | ## 📚 相关资源
91 | 
92 | - [Next.js 官方文档](https://nextjs.org/docs)
93 | - [Next.js 学习教程](https://nextjs.org/learn)
94 | - [Next.js GitHub 仓库](https://github.com/vercel/next.js)
95 | 
96 | ## 📝 许可证
97 | 
98 | MIT © [wxingheng]
99 | 


--------------------------------------------------------------------------------
/app/api/convert/route.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-unused-vars */
 2 | /* eslint-disable @typescript-eslint/no-explicit-any */
 3 | import { NextRequest, NextResponse } from 'next/server';
 4 | 
 5 | // 递归处理 JSON 的函数
 6 | const deepParseJSON = (text: string | object): any => {
 7 |   if (typeof text !== 'string') return text;
 8 |   
 9 |   try {
10 |     const parsed = JSON.parse(text);
11 |     
12 |     if (typeof parsed === 'object' && parsed !== null) {
13 |       Object.keys(parsed).forEach(key => {
14 |         if (typeof parsed[key] === 'string') {
15 |           try {
16 |             parsed[key] = deepParseJSON(parsed[key]);
17 |           } catch (e) {
18 |             // 如果解析失败，保持原值
19 |           }
20 |         }
21 |       });
22 |     }
23 |     return parsed;
24 |   } catch (e) {
25 |     return text;
26 |   }
27 | };
28 | 
29 | // 转换函数
30 | const convertText = (text: string | object, mode: 'escape' | 'unescape' | 'jsonParse' | 'jsonStringify') => {
31 |   // 如果输入是对象，先转换为字符串
32 |   const inputText = typeof text === 'object' ? JSON.stringify(text) : text;
33 | 
34 |   try {
35 |     switch (mode) {
36 |       case 'escape':
37 |         return inputText.replace(/\n/g, '\\n').replace(/"/g, '\\"');
38 |       case 'unescape':
39 |         return inputText.replace(/\\n/g, '\n').replace(/\\"/g, '"');
40 |       case 'jsonParse':
41 |         return deepParseJSON(inputText);
42 |       case 'jsonStringify':
43 |         return JSON.stringify(deepParseJSON(inputText));
44 |       default:
45 |         return inputText;
46 |     }
47 |   } catch (error) {
48 |     throw new Error(`转换错误: ${(error as Error).message}`);
49 |   }
50 | };
51 | 
52 | export async function POST(request: NextRequest) {
53 |   try {
54 |     const body = await request.json();
55 |     const { text, mode } = body;
56 | 
57 |     // 参数验证
58 |     if (text === undefined || text === null) {
59 |       return NextResponse.json(
60 |         { 
61 |           success: false,
62 |           error: '缺少必要的 text 参数' 
63 |         },
64 |         { status: 400 }
65 |       );
66 |     }
67 | 
68 |     if (!mode || !['escape', 'unescape', 'jsonParse', 'jsonStringify'].includes(mode)) {
69 |       return NextResponse.json(
70 |         { 
71 |           success: false,
72 |           error: '缺少必要的 mode 参数或格式不正确' 
73 |         },
74 |         { status: 400 }
75 |       );
76 |     }
77 | 
78 |     // 执行转换
79 |     const result = convertText(text, mode);
80 | 
81 |     return NextResponse.json({ 
82 |       success: true,
83 |       result 
84 |     });
85 |   } catch (error) {
86 |     return NextResponse.json(
87 |       { 
88 |         success: false,
89 |         error: (error as Error).message 
90 |       },
91 |       { status: 500 }
92 |     );
93 |   }
94 | } 


--------------------------------------------------------------------------------
/app/api/og/route.tsx:
--------------------------------------------------------------------------------
  1 | import { ImageResponse } from 'next/og';
  2 | 
  3 | export const runtime = 'edge';
  4 | 
  5 | export async function GET() {
  6 |   try {
  7 |     return new ImageResponse(
  8 |       (
  9 |         <div
 10 |           style={{
 11 |             height: '100%',
 12 |             width: '100%',
 13 |             display: 'flex',
 14 |             flexDirection: 'column',
 15 |             alignItems: 'center',
 16 |             justifyContent: 'center',
 17 |             backgroundColor: '#ffffff',
 18 |             padding: '40px 80px',
 19 |           }}
 20 |         >
 21 |           <div
 22 |             style={{
 23 |               display: 'flex',
 24 |               flexDirection: 'column',
 25 |               alignItems: 'center',
 26 |               justifyContent: 'center',
 27 |               textAlign: 'center',
 28 |             }}
 29 |           >
 30 |             <h1
 31 |               style={{
 32 |                 fontSize: '60px',
 33 |                 fontWeight: 'bold',
 34 |                 color: '#1a1a1a',
 35 |                 marginBottom: '20px',
 36 |               }}
 37 |             >
 38 |               文本转义工具
 39 |             </h1>
 40 |             <p
 41 |               style={{
 42 |                 fontSize: '32px',
 43 |                 color: '#4a5568',
 44 |                 marginBottom: '40px',
 45 |               }}
 46 |             >
 47 |               在线文本转义/反转义工具
 48 |             </p>
 49 |             <div
 50 |               style={{
 51 |                 display: 'flex',
 52 |                 alignItems: 'center',
 53 |                 gap: '20px',
 54 |                 marginTop: '20px',
 55 |               }}
 56 |             >
 57 |               <div
 58 |                 style={{
 59 |                   display: 'flex',
 60 |                   alignItems: 'center',
 61 |                   gap: '8px',
 62 |                   color: '#4a5568',
 63 |                   fontSize: '24px',
 64 |                 }}
 65 |               >
 66 |                 <span>🚀</span>
 67 |                 <span>快速转换</span>
 68 |               </div>
 69 |               <div
 70 |                 style={{
 71 |                   display: 'flex',
 72 |                   alignItems: 'center',
 73 |                   gap: '8px',
 74 |                   color: '#4a5568',
 75 |                   fontSize: '24px',
 76 |                 }}
 77 |               >
 78 |                 <span>💡</span>
 79 |                 <span>实时预览</span>
 80 |               </div>
 81 |               <div
 82 |                 style={{
 83 |                   display: 'flex',
 84 |                   alignItems: 'center',
 85 |                   gap: '8px',
 86 |                   color: '#4a5568',
 87 |                   fontSize: '24px',
 88 |                 }}
 89 |               >
 90 |                 <span>🎯</span>
 91 |                 <span>一键复制</span>
 92 |               </div>
 93 |             </div>
 94 |           </div>
 95 |         </div>
 96 |       ),
 97 |       {
 98 |         width: 1200,
 99 |         height: 630,
100 |       },
101 |     );
102 |   } catch (error: unknown) {
103 |     console.log(`Error generating OG image: ${error instanceof Error ? error.message : 'Unknown error'}`);
104 |     return new Response(`Failed to generate the image`, {
105 |       status: 500,
106 |     });
107 |   }
108 | } 


--------------------------------------------------------------------------------
/app/components/JsonParser.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useEffect, useCallback } from 'react';
  4 | import { tryParseJson } from '../utils/tryParseJson';
  5 | 
  6 | interface JsonParserProps {
  7 |   demoText?: string;
  8 | }
  9 | 
 10 | export default function JsonParser({ demoText }: JsonParserProps) {
 11 |   const [inputText, setInputText] = useState('');
 12 |   const [outputText, setOutputText] = useState('');
 13 |   const [error, setError] = useState('');
 14 |   const [message, setMessage] = useState('');
 15 |   const [copyStatus, setCopyStatus] = useState('复制');
 16 | 
 17 | 
 18 |   const showMessage = useCallback((msg: string, isError = false) => {
 19 |     setMessage(msg);
 20 |     setError(isError ? msg : '');
 21 |     setTimeout(() => {
 22 |       setMessage('');
 23 |       if (isError) setError('');
 24 |     }, 3000);
 25 |   }, []);
 26 | 
 27 |   const handleParse = useCallback((text: string = inputText) => {
 28 |     try {
 29 |       if (!text.trim()) {
 30 |         showMessage('请输入需要解析的文本', true);
 31 |         return;
 32 |       }
 33 |       const result = tryParseJson(text);
 34 |       
 35 |       try {
 36 |         JSON.parse(result);
 37 |         setOutputText(result);
 38 |         showMessage('解析成功！');
 39 |       } catch {
 40 |         setOutputText(result);
 41 |         showMessage('不是一个合法JSON，但是已尝试显示最优内容', true);
 42 |       }
 43 |     } catch {
 44 |       showMessage('解析失败：格式错误', true);
 45 |       setOutputText('');
 46 |     }
 47 |   }, [inputText, setOutputText, showMessage]);
 48 | 
 49 |   useEffect(() => {
 50 |     if (demoText) {
 51 |       setInputText(demoText);
 52 |       handleParse(demoText);
 53 |     }
 54 |   }, [demoText, setInputText, handleParse]);
 55 | 
 56 | 
 57 |   const copyToClipboard = async () => {
 58 |     try {
 59 |       await navigator.clipboard.writeText(outputText);
 60 |       setCopyStatus('已复制！');
 61 |       setTimeout(() => setCopyStatus('复制'), 2000);
 62 |     } catch {
 63 |       setCopyStatus('复制失败');
 64 |       setTimeout(() => setCopyStatus('复制'), 2000);
 65 |     }
 66 |   };
 67 | 
 68 |   return (
 69 |     <div className="flex flex-col sm:flex-row gap-8 items-start w-full">
 70 |       {message && (
 71 |         <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 p-2 rounded-md text-sm z-50 ${
 72 |           error ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'
 73 |         }`}>
 74 |           {message}
 75 |         </div>
 76 |       )}
 77 |       <div className="flex-1">
 78 |         <div className="h-[34px] mb-2 flex items-center">
 79 |           <h2 className="text-lg font-semibold dark:text-white">
 80 |             输入文本
 81 |           </h2>
 82 |         </div>
 83 |         <textarea
 84 |           className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-200 font-mono text-sm"
 85 |           value={inputText}
 86 |           onChange={(e) => {
 87 |             setInputText(e.target.value);
 88 |             handleParse(e.target.value);
 89 |           }}
 90 |           placeholder={`可以输入普通字符串或带有代码块的文本，如：
 91 | \`\`\`json
 92 | {
 93 |   "name": "示例",
 94 |   "value": 123
 95 | }
 96 | \`\`\`
 97 | `}
 98 |         />
 99 |       </div>
100 |       <div className="flex-1">
101 |         <div className="h-[34px] mb-2 flex justify-between items-center">
102 |           <h2 className="text-lg font-semibold dark:text-white">
103 |             解析结果
104 |           </h2>
105 |           <button
106 |             onClick={copyToClipboard}
107 |             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
108 |           >
109 |             {copyStatus}
110 |           </button>
111 |         </div>
112 |         <textarea
113 |           className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none bg-gray-50 dark:bg-gray-800 font-mono text-sm dark:text-gray-200"
114 |           value={outputText}
115 |           readOnly
116 |           placeholder="解析结果将显示在这里..."
117 |         />
118 |       </div>
119 |     </div>
120 |   );
121 | } 


--------------------------------------------------------------------------------
/app/components/VisitorStats.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useEffect, useRef } from 'react';
  4 | import pkg from '../../package.json';
  5 | 
  6 | // 为百度统计声明全局类型
  7 | declare global {
  8 |   interface Window {
  9 |     _hmt?: {
 10 |       push: (args: [string, ...unknown[]]) => void;
 11 |     };
 12 |   }
 13 | }
 14 | 
 15 | export default function VisitorStats() {
 16 |   // 添加一个 ref 来跟踪是否已经放大过数字
 17 |   const amplifiedRef = useRef<{[key: string]: boolean}>({});
 18 | 
 19 |   useEffect(() => {
 20 |     // 等待百度统计脚本加载完成
 21 |     const checkHmt = () => {
 22 |       if (window._hmt) {
 23 |         window._hmt.push(['_trackPageview']);
 24 |       } else {
 25 |         setTimeout(checkHmt, 100);
 26 |       }
 27 |     };
 28 |     
 29 |     checkHmt();
 30 |   }, []);
 31 | 
 32 |   useEffect(() => {
 33 |     // 监听访问量和访客数的变化
 34 |     const observer = new MutationObserver((mutations) => {
 35 |       mutations.forEach((mutation) => {
 36 |         if (mutation.type === 'characterData' || mutation.type === 'childList') {
 37 |           const element = mutation.target as HTMLElement;
 38 |           if (element.id === 'busuanzi_value_site_pv' || element.id === 'busuanzi_value_site_uv') {
 39 |             const value = element.textContent || '0';
 40 |             if (value !== '加载中...' && !amplifiedRef.current[element.id]) {
 41 |               element.textContent = amplifyNumber(value, element.id);
 42 |               // 标记这个元素已经被放大过
 43 |               amplifiedRef.current[element.id] = true;
 44 |               console.log(`${element.id} 原始值: ${value}, 放大后: ${amplifyNumber(value, element.id)}`);
 45 |             }
 46 |           }
 47 |         }
 48 |       });
 49 |     });
 50 | 
 51 |     // 开始观察
 52 |     const pvElement = document.getElementById('busuanzi_value_site_pv');
 53 |     const uvElement = document.getElementById('busuanzi_value_site_uv');
 54 |     
 55 |     if (pvElement) observer.observe(pvElement, { characterData: true, childList: true, subtree: true });
 56 |     if (uvElement) observer.observe(uvElement, { characterData: true, childList: true, subtree: true });
 57 | 
 58 |     return () => observer.disconnect();
 59 |   }, []);
 60 | 
 61 |   // 格式化时间字符串
 62 |   const formatTime = (timeStr: string) => {
 63 |     return `${timeStr.slice(0, 2)}/${timeStr.slice(2, 4)}/${timeStr.slice(4, 6)} ${timeStr.slice(6, 8)}:${timeStr.slice(8, 10)}:${timeStr.slice(10, 12)}`;
 64 |   };
 65 | 
 66 |   // 放大显示的数字
 67 |   const amplifyNumber = (value: string, elementId: string) => {
 68 |     if (value === '加载中...') return value;
 69 |     const num = parseInt(value);
 70 |     // 如果是访问量元素，加470000；如果是访客数元素，加13000
 71 |     const base = elementId === 'busuanzi_value_site_pv' ? 470000 : 13000;
 72 |     return (num + base).toLocaleString();
 73 |   };
 74 | 
 75 |   return (
 76 |     <div className="fixed bottom-4 right-4 text-sm text-gray-500">
 77 |       <div className="flex flex-col items-end space-y-1">
 78 |         <div className="flex items-center space-x-1">
 79 |           <svg 
 80 |             className="w-4 h-4" 
 81 |             viewBox="0 0 24 24" 
 82 |             fill="none" 
 83 |             stroke="currentColor"
 84 |           >
 85 |             <path 
 86 |               strokeLinecap="round" 
 87 |               strokeLinejoin="round" 
 88 |               strokeWidth={2} 
 89 |               d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" 
 90 |             />
 91 |             <path 
 92 |               strokeLinecap="round" 
 93 |               strokeLinejoin="round" 
 94 |               strokeWidth={2} 
 95 |               d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" 
 96 |             />
 97 |           </svg>
 98 |           <span>访问量：</span>
 99 |           <span id="busuanzi_value_site_pv" className="amplified-number">加载中...</span>
100 |           <span className="mx-1">·</span>
101 |           <span>访客数：</span>
102 |           <span id="busuanzi_value_site_uv" className="amplified-number">加载中...</span>
103 |         </div>
104 |         <div className="flex items-center space-x-1">
105 |           <span>版本：v{pkg.version}</span>
106 |           <span>·</span>
107 |           <span>更新：{formatTime(pkg.time)}</span>
108 |         </div>
109 |       </div>
110 |     </div>
111 |   );
112 | } 


--------------------------------------------------------------------------------
/app/components/FetchToCurl.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { useState, useEffect, useCallback } from 'react';
  4 | import { fetchToCurl } from '../utils/fetchToCurl';
  5 | 
  6 | interface FetchToCurlProps {
  7 |   demoText?: string;
  8 | }
  9 | 
 10 | export default function FetchToCurl({ demoText }: FetchToCurlProps) {
 11 |   const [fetchCode, setFetchCode] = useState('');
 12 |   const [curlCommand, setCurlCommand] = useState('');
 13 |   const [error, setError] = useState('');
 14 |   const [message, setMessage] = useState('');
 15 |   const [copyStatus, setCopyStatus] = useState('复制');
 16 | 
 17 |   const showMessage = useCallback((msg: string, isError = false) => {
 18 |     setMessage(msg);
 19 |     setError(isError ? msg : '');
 20 |     setTimeout(() => {
 21 |       setMessage('');
 22 |       if (isError) setError('');
 23 |     }, 3000);
 24 |   }, []);
 25 | 
 26 |   const handleConvert = useCallback((code: string = fetchCode) => {
 27 |     try {
 28 |       setError('');
 29 |       const formattedCode = code.split('\n')
 30 |         .map(line => line.trim())
 31 |         .filter(line => line)
 32 |         .join('');
 33 | 
 34 |       const matches = formattedCode.match(/fetch\(['"]([^'"]+)['"],\s*({.+})\)/);
 35 |       if (!matches) {
 36 |         throw new Error('无效的 fetch 代码格式');
 37 |       }
 38 | 
 39 |       const [, url, optionsStr] = matches;
 40 |       let options = {};
 41 |       
 42 |       if (optionsStr) {
 43 |         options = new Function(`return ${optionsStr}`)();
 44 |       }
 45 | 
 46 |       const curlStr = fetchToCurl({ url, ...options });
 47 |       setCurlCommand(curlStr);
 48 |       showMessage('转换成功！');
 49 |     } catch (err) {
 50 |       setError(err instanceof Error ? err.message : '转换失败');
 51 |       showMessage(err instanceof Error ? err.message : '转换失败', true);
 52 |     }
 53 |   }, [fetchCode, setError, setCurlCommand, showMessage]);
 54 | 
 55 |   useEffect(() => {
 56 |     if (demoText) {
 57 |       setFetchCode(demoText);
 58 |       handleConvert(demoText);
 59 |     }
 60 |   }, [demoText, setFetchCode, handleConvert]);
 61 | 
 62 |   const copyToClipboard = async () => {
 63 |     try {
 64 |       await navigator.clipboard.writeText(curlCommand);
 65 |       setCopyStatus('已复制！');
 66 |       setTimeout(() => setCopyStatus('复制'), 2000);
 67 |     } catch {
 68 |       setCopyStatus('复制失败');
 69 |       setTimeout(() => setCopyStatus('复制'), 2000);
 70 |     }
 71 |   };
 72 | 
 73 |   return (
 74 |     <div className="flex flex-col sm:flex-row gap-8 items-start w-full">
 75 |       {message && (
 76 |         <div className={`fixed top-4 left-1/2 transform -translate-x-1/2 p-2 rounded-md text-sm z-50 ${
 77 |           error ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-700'
 78 |         }`}>
 79 |           {message}
 80 |         </div>
 81 |       )}
 82 |       <div className="flex-1">
 83 |         <div className="h-[34px] mb-2 flex items-center">
 84 |           <h2 className="text-lg font-semibold dark:text-white">
 85 |             输入 fetch 代码
 86 |           </h2>
 87 |         </div>
 88 |         <textarea
 89 |           className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-200 font-mono text-sm"
 90 |           value={fetchCode}
 91 |           onChange={(e) => {
 92 |             setFetchCode(e.target.value);
 93 |             handleConvert(e.target.value);
 94 |           }}
 95 |           placeholder={`fetch('https://api.example.com/data', {
 96 |   method: 'POST',
 97 |   headers: {
 98 |     'Content-Type': 'application/json'
 99 |   },
100 |   body: JSON.stringify({ key: 'value' })
101 | })`}
102 |         />
103 |       </div>
104 |       <div className="flex-1">
105 |         <div className="h-[34px] mb-2 flex justify-between items-center">
106 |           <h2 className="text-lg font-semibold dark:text-white">
107 |             curl 命令
108 |           </h2>
109 |           <button
110 |             onClick={copyToClipboard}
111 |             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
112 |           >
113 |             {copyStatus}
114 |           </button>
115 |         </div>
116 |         <textarea
117 |           className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none bg-gray-50 dark:bg-gray-800 font-mono text-sm dark:text-gray-200"
118 |           value={curlCommand}
119 |           readOnly
120 |           placeholder="转换后的 curl 命令将显示在这里..."
121 |         />
122 |       </div>
123 |     </div>
124 |   );
125 | } 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | import type { Metadata } from "next";
  2 | import { Geist, Geist_Mono } from "next/font/google";
  3 | import "./globals.css";
  4 | import GitHubLink from './components/GitHubLink';
  5 | import VisitorStats from './components/VisitorStats';
  6 | import Navigation from './components/Navigation';
  7 | import FriendLinks from './components/FriendLinks';
  8 | import JsonLd from './components/JsonLd';
  9 | import PerformanceMonitor from './components/PerformanceMonitor';
 10 | import QuickTip from './components/QuickTip';
 11 | 
 12 | const geistSans = Geist({
 13 |   variable: "--font-geist-sans",
 14 |   subsets: ["latin"],
 15 | });
 16 | 
 17 | const geistMono = Geist_Mono({
 18 |   variable: "--font-geist-mono",
 19 |   subsets: ["latin"],
 20 | });
 21 | 
 22 | export const metadata: Metadata = {
 23 |   title: {
 24 |     default: "文本转义工具 - 在线文本转义/反转义工具",
 25 |     template: "%s | 文本转义工具"
 26 |   },
 27 |   description: "文本转义工具是一款免费的在线文本转义/反转义工具，支持换行符(\\n)和双引号(\")的转义与反转义，提供实时预览和一键复制功能。适用于JSON字符串、配置文件等场景的文本处理。完全免费，无需下载安装。",
 28 |   keywords: [
 29 |     "文本转义工具", "在线转义工具", "字符串转义", "JSON转义", 
 30 |     "文本换行", "文本换行解析", "转义工具", "反转义", 
 31 |     "换行符转义", "双引号转义", "html 换行转换", 
 32 |     "postman格式转换", "在线工具", "开发者工具", "编程工具"
 33 |   ],
 34 |   authors: [{ name: "jcommon", url: "https://github.com/wxingheng" }],
 35 |   creator: "jcommon",
 36 |   publisher: "jcommon",
 37 |   formatDetection: {
 38 |     email: false,
 39 |     address: false,
 40 |     telephone: false,
 41 |   },
 42 |   openGraph: {
 43 |     title: "文本转义工具 - 在线文本转义/反转义",
 44 |     description: "一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义，提供实时预览和一键复制功能。",
 45 |     url: "https://text-escape.jcommon.top",
 46 |     siteName: "文本转义工具",
 47 |     locale: "zh_CN",
 48 |     type: "website",
 49 |     images: [
 50 |       {
 51 |         url: "https://text-escape.jcommon.top/api/og",
 52 |         width: 1200,
 53 |         height: 630,
 54 |         alt: "文本转义工具预览图"
 55 |       }
 56 |     ]
 57 |   },
 58 |   twitter: {
 59 |     card: "summary_large_image",
 60 |     title: "文本转义工具 - 在线文本转义/反转义",
 61 |     description: "一个简单易用的在线文本转义工具，支持换行符和双引号的转义与反转义，提供实时预览和一键复制功能。",
 62 |     images: ["https://text-escape.jcommon.top/api/og"],
 63 |     creator: "@jcommon"
 64 |   },
 65 |   robots: {
 66 |     index: true,
 67 |     follow: true,
 68 |     googleBot: {
 69 |       index: true,
 70 |       follow: true,
 71 |       "max-video-preview": -1,
 72 |       "max-image-preview": "large",
 73 |       "max-snippet": -1,
 74 |     },
 75 |   },
 76 | //   1. Google验证码：
 77 | // 访问 Google Search Console
 78 | // 添加网站属性时，选择"URL 前缀"或"域"验证方式
 79 | // 会得到一个类似 google-site-verification: xxxxxxxxxxxxxxxxxxxxx 的代码
 80 | // 只需填写 xxxxxxxxxxxxxxxxxxxxx 这部分
 81 | // 百度验证码：
 82 | // 访问百度站长平台
 83 | // 添加网站后，选择"HTML标签验证"
 84 | // 会得到一个类似 <meta name="baidu-site-verification" content="xxxxxxxxxxxxxx"/> 的代码
 85 | // 只需填写 xxxxxxxxxxxxxx 这部分
 86 |   verification: {
 87 |     google: "72ujeyKSiINNgDo4R4cLJC90hi_BVYEaA0dDjKqAjuc",
 88 |     other: {
 89 |       'baidu-site-verification': "codeva-H5NHS0Mwy9",
 90 |     },
 91 |   },
 92 |   alternates: {
 93 |     canonical: "https://text-escape.jcommon.top",
 94 |     languages: {
 95 |       'zh-CN': 'https://text-escape.jcommon.top',
 96 |       'en-US': 'https://text-escape.jcommon.top/en'
 97 |     }
 98 |   },
 99 |   other: {
100 |     'mobile-agent': 'format=html5;url=https://text-escape.jcommon.top',
101 |     'github-repo': 'https://github.com/wxingheng/text-escape',
102 |     'application-name': '文本转义工具',
103 |     'apple-mobile-web-app-capable': 'yes',
104 |     'apple-mobile-web-app-status-bar-style': 'default',
105 |     'apple-mobile-web-app-title': '文本转义工具',
106 |     'theme-color': '#ffffff',
107 |     'msapplication-TileColor': '#ffffff',
108 |     'msapplication-config': '/browserconfig.xml'
109 |   },
110 | };
111 | 
112 | export default function RootLayout({
113 |   children,
114 | }: {
115 |   children: React.ReactNode;
116 | }) {
117 |   return (
118 |     <html lang="zh-CN" suppressHydrationWarning>
119 |       <head>
120 |         <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
121 |         <script dangerouslySetInnerHTML={{
122 |           __html: `
123 |             var _hmt = _hmt || [];
124 |             (function() {
125 |             var hm = document.createElement("script");
126 |             hm.src = "https://hm.baidu.com/hm.js?fde766d8f0ffe2b33ce6b4519b20d326";
127 |             var s = document.getElementsByTagName("script")[0]; 
128 |             s.parentNode.insertBefore(hm, s);
129 |           })();
130 |           `
131 |         }} />
132 |         <JsonLd />
133 |       </head>
134 |       <body
135 |         className={`${geistSans.variable} ${geistMono.variable} antialiased h-screen overflow-hidden`}
136 |         suppressHydrationWarning
137 |       >
138 |         <PerformanceMonitor />
139 |         <GitHubLink />
140 |         <Navigation />
141 |         <div className="pt-16 h-[calc(100vh-64px)] overflow-auto">
142 |           {children}
143 |         </div>
144 |         <QuickTip />
145 |         <div className="fixed bottom-0 left-0 w-full bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 z-50">
146 |           <div className="container mx-auto px-4 py-4 flex flex-col items-center space-y-2">
147 |             <FriendLinks />
148 |             <div className="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
149 |               <a 
150 |                 href="https://beian.miit.gov.cn/" 
151 |                 target="_blank" 
152 |                 rel="noopener noreferrer"
153 |                 className="hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
154 |               >
155 |                 鄂ICP备2022018193号-3
156 |               </a>
157 |               <span>|</span>
158 |               <VisitorStats />
159 |             </div>
160 |           </div>
161 |         </div>
162 |       </body>
163 |     </html>
164 |   );
165 | }


--------------------------------------------------------------------------------
/app/video/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client'
  2 | import { useState, useEffect } from 'react'
  3 | 
  4 | export default function VideoTools() {
  5 |   const [selectedFile, setSelectedFile] = useState<File | null>(null)
  6 |   const [videoUrl, setVideoUrl] = useState<string | null>(null)
  7 |   const [progress, setProgress] = useState(0)
  8 |   const [outputFormat, setOutputFormat] = useState('mp4')
  9 |   const [isConverting, setIsConverting] = useState(false)
 10 |   const [error, setError] = useState<string | null>(null)
 11 | 
 12 |   // 清理视频URL
 13 |   useEffect(() => {
 14 |     return () => {
 15 |       if (videoUrl) {
 16 |         URL.revokeObjectURL(videoUrl)
 17 |       }
 18 |     }
 19 |   }, [videoUrl])
 20 | 
 21 |   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 22 |     if (e.target.files && e.target.files[0]) {
 23 |       const file = e.target.files[0]
 24 |       setSelectedFile(file)
 25 |       setError(null)
 26 | 
 27 |       // 创建新的视频URL
 28 |       if (videoUrl) {
 29 |         URL.revokeObjectURL(videoUrl)
 30 |       }
 31 |       const newVideoUrl = URL.createObjectURL(file)
 32 |       setVideoUrl(newVideoUrl)
 33 |     }
 34 |   }
 35 | 
 36 |   const handleConvert = async () => {
 37 |     if (!selectedFile) return
 38 | 
 39 |     setIsConverting(true)
 40 |     setProgress(0)
 41 |     setError(null)
 42 | 
 43 |     const formData = new FormData()
 44 |     formData.append('file', selectedFile)
 45 |     formData.append('format', outputFormat)
 46 | 
 47 |     try {
 48 |       const response = await fetch('/api/video/convert', {
 49 |         method: 'POST',
 50 |         body: formData,
 51 |       })
 52 | 
 53 |       if (!response.ok) {
 54 |         const errorData = await response.json()
 55 |         throw new Error(errorData.error || '转换失败')
 56 |       }
 57 | 
 58 |       // 获取转换后的文件
 59 |       const blob = await response.blob()
 60 |       const url = window.URL.createObjectURL(blob)
 61 |       
 62 |       // 创建下载链接
 63 |       const a = document.createElement('a')
 64 |       a.href = url
 65 |       a.download = `converted.${outputFormat}`
 66 |       document.body.appendChild(a)
 67 |       a.click()
 68 |       document.body.removeChild(a)
 69 |       window.URL.revokeObjectURL(url)
 70 | 
 71 |       setProgress(100)
 72 |     } catch (err) {
 73 |       setError(err instanceof Error ? err.message : '转换过程中发生错误')
 74 |       setProgress(0)
 75 |     } finally {
 76 |       setIsConverting(false)
 77 |     }
 78 |   }
 79 | 
 80 |   return (
 81 |     <div className="container mx-auto px-4 py-8">
 82 |       <h1 className="text-3xl font-bold mb-8">视频工具</h1>
 83 |       
 84 |       <div className="space-y-8">
 85 |         {/* 视频转换工具 */}
 86 |         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
 87 |           <h2 className="text-xl font-semibold mb-4">视频格式转换</h2>
 88 |           <div className="space-y-4">
 89 |             <div>
 90 |               <label className="block text-sm font-medium mb-2">选择视频文件</label>
 91 |               <input
 92 |                 type="file"
 93 |                 accept="video/*"
 94 |                 onChange={handleFileChange}
 95 |                 className="w-full p-2 border rounded"
 96 |                 disabled={isConverting}
 97 |               />
 98 |             </div>
 99 | 
100 |             {videoUrl && (
101 |               <div className="mt-4">
102 |                 <div className="relative" style={{ width: '1200px', height: '699px' }}>
103 |                   <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-500 dark:from-blue-600 dark:to-purple-700 rounded-lg flex items-center justify-center">
104 |                     <video
105 |                       src={videoUrl}
106 |                       className="absolute inset-0 w-full h-full object-contain rounded-lg"
107 |                       controls
108 |                       autoPlay
109 |                       loop
110 |                       muted
111 |                     />
112 |                   </div>
113 |                 </div>
114 |                 <p className="text-sm text-gray-500 mt-2">
115 |                   视频预览 - {selectedFile?.name}
116 |                 </p>
117 |               </div>
118 |             )}
119 |             
120 |             <div>
121 |               <label className="block text-sm font-medium mb-2">输出格式</label>
122 |               <select
123 |                 value={outputFormat}
124 |                 onChange={(e) => setOutputFormat(e.target.value)}
125 |                 className="w-full p-2 border rounded"
126 |                 disabled={isConverting}
127 |               >
128 |                 <option value="mp4">MP4</option>
129 |                 <option value="webm">WebM</option>
130 |                 <option value="mov">MOV</option>
131 |                 <option value="avi">AVI</option>
132 |               </select>
133 |             </div>
134 | 
135 |             {error && (
136 |               <div className="text-red-500 text-sm">
137 |                 {error}
138 |               </div>
139 |             )}
140 | 
141 |             <button
142 |               onClick={handleConvert}
143 |               disabled={!selectedFile || isConverting}
144 |               className="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 disabled:bg-gray-400"
145 |             >
146 |               {isConverting ? '转换中...' : '开始转换'}
147 |             </button>
148 | 
149 |             {progress > 0 && (
150 |               <div className="mt-4">
151 |                 <div className="w-full bg-gray-200 rounded-full h-2.5">
152 |                   <div
153 |                     className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
154 |                     style={{ width: `${progress}%` }}
155 |                   ></div>
156 |                 </div>
157 |                 <p className="text-sm text-gray-600 mt-2">转换进度: {progress}%</p>
158 |               </div>
159 |             )}
160 |           </div>
161 |         </div>
162 | 
163 |         {/* 视频压缩工具 */}
164 |         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
165 |           <h2 className="text-xl font-semibold mb-4">视频压缩</h2>
166 |           <p className="text-gray-600 mb-4">即将推出...</p>
167 |         </div>
168 | 
169 |         {/* 视频剪辑工具 */}
170 |         <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
171 |           <h2 className="text-xl font-semibold mb-4">视频剪辑</h2>
172 |           <p className="text-gray-600 mb-4">即将推出...</p>
173 |         </div>
174 |       </div>
175 | 
176 |     </div>
177 |   )
178 | } 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/no-unused-vars */
  2 | /* eslint-disable @typescript-eslint/no-explicit-any */
  3 | /* eslint-disable react/no-unescaped-entities */
  4 | 'use client'
  5 | import Image from "next/image";
  6 | import { useState } from "react";
  7 | import FetchToCurl from './components/FetchToCurl';
  8 | import JsonParser from './components/JsonParser';
  9 | import Link from 'next/link';
 10 | import RelatedTools from './components/RelatedTools';
 11 | import KeywordOptimization from './components/KeywordOptimization';
 12 | 
 13 | export default function Home() {
 14 |   const [inputText, setInputText] = useState('');
 15 |   const [copyStatus, setCopyStatus] = useState('Copy');
 16 |   const [mode, setMode] = useState<'escape' | 'unescape' | 'jsonParse' | 'jsonStringify' | 'fetchToCurl' | 'tryParseJson'>('escape');
 17 | 
 18 |   // 示例文本
 19 |   const demoText = {
 20 |     escape: `🎮 超级玛丽历险记
 21 | 
 22 | 主角: 马里奥
 23 | 任务: "拯救被库巴抓走的碧琪公主"
 24 | 
 25 | 行动清单:
 26 | 1. 收集金币和蘑菇
 27 | 2. 踩扁小乌龟
 28 | 3. 跳过各种陷阱
 29 | 4. 到达城堡救出公主
 30 | 
 31 | 注意事项：
 32 | - 不要撞到食人花
 33 | - 记得存档
 34 | - "1UP" 蘑菇很重要！
 35 | 
 36 | 祝你好运，冒险家！`,
 37 |     unescape: `🎮 超级玛丽历险记\\n\\n主角: 马里奥\\n任务: \\"拯救被库巴抓走的碧琪公主\\"\\n\\n行动清单:\\n1. 收集金币和蘑菇\\n2. 踩扁小乌龟\\n3. 跳过各种陷阱\\n4. 到达城堡救出公主\\n\\n注意事项：\\n- 不要撞到食人花\\n- 记得存档\\n- \\"1UP\\" 蘑菇很重要！\\n\\n祝你好运，冒险家！`,
 38 |     jsonParse: `{"name":"超级玛丽","level":1,"items":["蘑菇","星星"],"position":{"x":100,"y":200},"isJumping":true}`,
 39 |     jsonStringify: {
 40 |       name: "超级玛丽",
 41 |       level: 1,
 42 |       items: ["蘑菇", "星星"],
 43 |       position: { x: 100, y: 200 },
 44 |       isJumping: true
 45 |     },
 46 |     fetchToCurl: `fetch('https://api.example.com/data', {
 47 |       method: 'POST',
 48 |       headers: {
 49 |         'Content-Type': 'application/json',
 50 |         'Authorization': 'Bearer token123'
 51 |       },
 52 |       body: JSON.stringify({
 53 |         name: '示例请求',
 54 |         data: {
 55 |           key: 'value',
 56 |           number: 123,
 57 |           array: [1, 2, 3]
 58 |         }
 59 |       })
 60 |     })`,
 61 |     tryParseJson: '```json\n{"name": "示例","value": 123}\n```'
 62 |   };
 63 | 
 64 |   // 填充示例文本
 65 |   const fillDemoText = () => {
 66 |     if (mode === 'jsonStringify') {
 67 |       setInputText(JSON.stringify(demoText.jsonStringify, null, 2));
 68 |     } else if (mode === 'tryParseJson') {
 69 |       setInputText(demoText.tryParseJson);
 70 |     } else if (mode === 'fetchToCurl') {
 71 |       setInputText(demoText.fetchToCurl);
 72 |     } else {
 73 |       setInputText(demoText[mode]);
 74 |     }
 75 |   };
 76 | 
 77 |   // 添加一个递归处理 JSON 的函数
 78 |   const deepParseJSON = (text: string | object): any => {
 79 |     if (typeof text !== 'string') return text;
 80 |     
 81 |     try {
 82 |       const parsed = JSON.parse(text);
 83 |       
 84 |       // 如果解析后是对象或数组，递归处理它的所有属性
 85 |       if (typeof parsed === 'object' && parsed !== null) {
 86 |         Object.keys(parsed).forEach(key => {
 87 |           if (typeof parsed[key] === 'string') {
 88 |             try {
 89 |               parsed[key] = deepParseJSON(parsed[key]);
 90 |             } catch (e) {
 91 |               // 如果解析失败，保持原值
 92 |             }
 93 |           }
 94 |         });
 95 |       }
 96 |       return parsed;
 97 |     } catch (e) {
 98 |       return text;
 99 |     }
100 |   };
101 | 
102 |   // 将文本转换为转义格式
103 |   const convertText = (text: string) => {
104 |     try {
105 |       switch (mode) {
106 |         case 'escape':
107 |           return text.replace(/\n/g, '\\n').replace(/"/g, '\\"');
108 |         case 'unescape':
109 |           return text.replace(/\\n/g, '\n').replace(/\\"/g, '"');
110 |         case 'jsonParse':
111 |           return JSON.stringify(deepParseJSON(text), null, 2);
112 |         case 'jsonStringify':
113 |           return JSON.stringify(deepParseJSON(text));
114 |         case 'fetchToCurl':
115 |           return text;
116 |         case 'tryParseJson':
117 |           return text;
118 |         default:
119 |           return text;
120 |       }
121 |     } catch (error) {
122 |       return `错误: ${(error as Error).message}`;
123 |     }
124 |   };
125 | 
126 |   // 复制功能
127 |   const handleCopy = async () => {
128 |     const convertedText = convertText(inputText);
129 |     try {
130 |       await navigator.clipboard.writeText(convertedText);
131 |       setCopyStatus('Copied!');
132 |       setTimeout(() => setCopyStatus('Copy'), 2000);
133 |     } catch {
134 |       setCopyStatus('Failed');
135 |       setTimeout(() => setCopyStatus('Copy'), 2000);
136 |     }
137 |   };
138 | 
139 |   // 在组件内部添加一个获取当前域名的函数
140 |   const getCurrentDomain = () => {
141 |     if (typeof window !== 'undefined') {
142 |       return window.location.origin;
143 |     }
144 |     return 'http://localhost:3001'; // 默认值
145 |   };
146 | 
147 |   return (
148 |     <div className="grid grid-rows-[auto_1fr_auto] items-center justify-items-center min-h-screen p-8 pb-20 gap-8 sm:p-20 font-[family-name:var(--font-geist-sans)] dark:bg-gray-900">
149 |       <header className="w-full max-w-7xl">
150 |         <h1 className="text-3xl font-bold text-center mb-4 dark:text-white">
151 |           文本转义工具 - 在线文本转义/反转义工具
152 |         </h1>
153 |         <p className="text-gray-600 dark:text-gray-300 text-center mb-4">
154 |           免费在线文本转义工具，支持换行符和双引号的转义与反转义，提供实时预览和一键复制功能。无需下载安装，完全免费使用。
155 |         </p>
156 |         <div className="bg-blue-50 dark:bg-gray-800 p-4 rounded-lg mb-8">
157 |           <div className="flex justify-between items-center mb-4">
158 |             <h2 className="text-lg font-semibold dark:text-white">使用说明：</h2>
159 |             <div className="flex gap-2">
160 |               <button
161 |                 onClick={fillDemoText}
162 |                 className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
163 |               >
164 |                 Try Example
165 |               </button>
166 |               <div className="flex gap-2 bg-white dark:bg-gray-700 rounded-lg p-1 border border-blue-200 dark:border-gray-600">
167 |                 <button
168 |                   onClick={() => setMode('escape')}
169 |                   className={`px-4 py-2 rounded-md transition-colors ${
170 |                     mode === 'escape'
171 |                       ? 'bg-blue-500 text-white'
172 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
173 |                   }`}
174 |                 >
175 |                   转义模式
176 |                 </button>
177 |                 <button
178 |                   onClick={() => setMode('unescape')}
179 |                   className={`px-4 py-2 rounded-md transition-colors ${
180 |                     mode === 'unescape'
181 |                       ? 'bg-blue-500 text-white'
182 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
183 |                   }`}
184 |                 >
185 |                   反转义模式
186 |                 </button>
187 |                 <button
188 |                   onClick={() => setMode('jsonParse')}
189 |                   className={`px-4 py-2 rounded-md transition-colors ${
190 |                     mode === 'jsonParse'
191 |                       ? 'bg-blue-500 text-white'
192 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
193 |                   }`}
194 |                 >
195 |                   JSON格式化
196 |                 </button>
197 |                 <button
198 |                   onClick={() => setMode('jsonStringify')}
199 |                   className={`px-4 py-2 rounded-md transition-colors ${
200 |                     mode === 'jsonStringify'
201 |                       ? 'bg-blue-500 text-white'
202 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
203 |                   }`}
204 |                 >
205 |                   JSON压缩
206 |                 </button>
207 |                 <button
208 |                   onClick={() => setMode('fetchToCurl')}
209 |                   className={`px-4 py-2 rounded-md transition-colors ${
210 |                     mode === 'fetchToCurl'
211 |                       ? 'bg-blue-500 text-white'
212 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
213 |                   }`}
214 |                 >
215 |                   Fetch转Curl
216 |                 </button>
217 |                 <button
218 |                   onClick={() => setMode('tryParseJson')}
219 |                   className={`px-4 py-2 rounded-md transition-colors ${
220 |                     mode === 'tryParseJson'
221 |                       ? 'bg-blue-500 text-white'
222 |                       : 'hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200'
223 |                   }`}
224 |                 >
225 |                   智能JSON解析
226 |                 </button>
227 |               </div>
228 |             </div>
229 |           </div>
230 |           <ul className="list-disc list-inside space-y-2 text-gray-700 dark:text-gray-300">
231 |             {mode === 'escape' ? (
232 |               <>
233 |                 <li>在左侧输入框中粘贴您需要转义的文本</li>
234 |                 <li>右侧输入框会自动将文本转换为转义格式</li>
235 |                 <li>支持自动转义换行符（\n）和双引号（&quot;\&quot;&quot;）</li>
236 |               </>
237 |             ) : mode === 'unescape' ? (
238 |               <>
239 |                 <li>在左侧输入框中粘贴您需要反转义的文本</li>
240 |                 <li>右侧输入框会自动将转义字符还原为原始格式</li>
241 |                 <li>支持还原转义的换行符和双引号</li>
242 |               </>
243 |             ) : mode === 'jsonParse' ? (
244 |               <>
245 |                 <li>在左侧输入框中粘贴需要格式化的 JSON 字符串</li>
246 |                 <li>右侧将显示格式化后的 JSON 内容</li>
247 |                 <li>自动进行语法检查，并显示错误信息</li>
248 |               </>
249 |             ) : mode === 'jsonStringify' ? (
250 |               <>
251 |                 <li>在左侧输入框中粘贴需要压缩的 JSON 内容</li>
252 |                 <li>右侧将显示压缩后的 JSON 字符串</li>
253 |                 <li>自动移除空格和换行符</li>
254 |               </>
255 |             ) : mode === 'fetchToCurl' ? (
256 |               <>
257 |                 <li>在左侧输入框中粘贴 fetch 代码</li>
258 |                 <li>右侧将显示转换后的 curl 命令</li>
259 |                 <li>支持各种 fetch 参数的转换</li>
260 |               </>
261 |             ) : (
262 |               <>
263 |                 <li>智能识别文本中的 JSON 内容</li>
264 |                 <li>支持代码块（```json）中的 JSON 解析</li>
265 |                 <li>自动格式化并美化 JSON 结构</li>
266 |                 <li>适用于各种文本中的 JSON 提取</li>
267 |               </>
268 |             )}
269 |             <li>点击"复制"按钮可以快速复制转换后的文本</li>
270 |           </ul>
271 |         </div>
272 |       </header>
273 | 
274 |       <main className="flex flex-col sm:flex-row gap-8 items-start w-full max-w-7xl">
275 |         {mode === 'fetchToCurl' ? (
276 |           <FetchToCurl demoText={inputText} />
277 |         ) : mode === 'tryParseJson' ? (
278 |           <JsonParser demoText={inputText} />
279 |         ) : (
280 |           <>
281 |             <div className="flex-1">
282 |               <div className="h-[34px] mb-2 flex items-center">
283 |                 <h2 className="text-lg font-semibold dark:text-white">
284 |                   {mode === 'escape' ? '输入文本' : 
285 |                    mode === 'unescape' ? '转义文本' :
286 |                    mode === 'jsonParse' ? 'JSON字符串' : 'JSON内容'}
287 |                 </h2>
288 |               </div>
289 |               <textarea
290 |                 className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-200"
291 |                 value={inputText}
292 |                 onChange={(e) => setInputText(e.target.value)}
293 |                 placeholder={mode === 'escape' ? "在此输入文本..." : "在此输入需要反转义的文本..."}
294 |               />
295 |             </div>
296 |             <div className="flex-1">
297 |               <div className="h-[34px] mb-2 flex justify-between items-center">
298 |                 <h2 className="text-lg font-semibold dark:text-white">
299 |                   {mode === 'escape' ? '转义后的文本' : 
300 |                    mode === 'unescape' ? '反转义后的文本' :
301 |                    mode === 'jsonParse' ? '格式化的JSON' : '压缩的JSON'}
302 |                 </h2>
303 |                 <button
304 |                   onClick={handleCopy}
305 |                   className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
306 |                 >
307 |                   {copyStatus}
308 |                 </button>
309 |               </div>
310 |               <textarea
311 |                 className="w-full h-[600px] p-4 border border-gray-300 dark:border-gray-600 rounded-lg resize-none bg-gray-50 dark:bg-gray-800 font-mono text-sm dark:text-gray-200"
312 |                 value={convertText(inputText)}
313 |                 readOnly
314 |                 placeholder={mode === 'escape' ? "转换后的文本将显示在这里..." : "反转义后的文本将显示在这里..."}
315 |               />
316 |             </div>
317 |           </>
318 |         )}
319 |       </main>
320 | 
321 |       <footer className="w-full max-w-7xl">
322 |         <RelatedTools />
323 |         <KeywordOptimization />
324 |         <div className="mb-8">
325 |           <h3 className="text-lg font-semibold mb-4 dark:text-white">API 使用说明</h3>
326 |           <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg space-y-6">
327 |             <div className="space-y-2">
328 |               <p className="text-sm text-gray-600 dark:text-gray-300">
329 |                 接口地址：<code className="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">/api/convert</code>
330 |               </p>
331 |               <p className="text-sm text-gray-600 dark:text-gray-300">请求方法：POST</p>
332 |             </div>
333 | 
334 |             <div className="space-y-2">
335 |               <p className="text-sm text-gray-600 dark:text-gray-300">请求参数：</p>
336 |               <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
337 | {`{
338 |   "text": "要转换的文本",
339 |   "mode": "escape|unescape|jsonParse|jsonStringify"
340 | }`}
341 |               </pre>
342 |             </div>
343 | 
344 |             <div className="space-y-2">
345 |               <p className="text-sm text-gray-600 dark:text-gray-300">示例：</p>
346 |               <div className="space-y-4">
347 |                 {/* 文本转义示例 */}
348 |                 <div>
349 |                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">1. 文本转义（escape）：</p>
350 |                   <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
351 | {`curl -X POST ${getCurrentDomain()}/api/convert \\
352 |   -H "Content-Type: application/json" \\
353 |   -d '{
354 |     "text": "Hello\\nWorld\\n\\"Quote\\"",
355 |     "mode": "escape"
356 |   }'
357 | 
358 | # 返回结果：
359 | {
360 |   "result": "Hello\\\\nWorld\\\\n\\\\\\"Quote\\\\\\""
361 | }`}
362 |                   </pre>
363 |                 </div>
364 | 
365 |                 {/* 文本反转义示例 */}
366 |                 <div>
367 |                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">2. 文本反转义（unescape）：</p>
368 |                   <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
369 | {`curl -X POST ${getCurrentDomain()}/api/convert \\
370 |   -H "Content-Type: application/json" \\
371 |   -d '{
372 |     "text": "Hello\\\\nWorld\\\\n\\\\\\"Quote\\\\\\"",
373 |     "mode": "unescape"
374 |   }'
375 | 
376 | # 返回结果：
377 | {
378 |   "result": "Hello\\nWorld\\n\\"Quote\\""
379 | }`}
380 |                   </pre>
381 |                 </div>
382 | 
383 |                 {/* JSON 格式化示例 */}
384 |                 <div>
385 |                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">3. JSON 格式化（jsonParse）：</p>
386 |                   <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
387 | {`curl -X POST ${getCurrentDomain()}/api/convert \\
388 |   -H "Content-Type: application/json" \\
389 |   -d '{
390 |     "text": "{\\"name\\":\\"测试\\",\\"data\\":{\\"nested\\":{\\"value\\":123}}}",
391 |     "mode": "jsonParse"
392 |   }'
393 | 
394 | # 返回结果：
395 | {
396 |   "result": {
397 |     "name": "测试",
398 |     "data": {
399 |       "nested": {
400 |         "value": 123
401 |       }
402 |     }
403 |   }
404 | }`}
405 |                   </pre>
406 |                 </div>
407 | 
408 |                 {/* JSON 压缩示例 */}
409 |                 <div>
410 |                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">4. JSON 压缩（jsonStringify）：</p>
411 |                   <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
412 | {`curl -X POST ${getCurrentDomain()}/api/convert \\
413 |   -H "Content-Type: application/json" \\
414 |   -d '{
415 |     "text": "{\\n  \\"name\\": \\"测试\\",\\n  \\"data\\": {\\n    \\"nested\\": {\\n      \\"value\\": 123\\n    }\\n  }\\n}",
416 |     "mode": "jsonStringify"
417 |   }'
418 | 
419 | # 返回结果：
420 | {
421 |   "result": "{\\"name\\":\\"测试\\",\\"data\\":{\\"nested\\":{\\"value\\":123}}}"
422 | }`}
423 |                   </pre>
424 |                 </div>
425 |               </div>
426 |             </div>
427 | 
428 |             <div className="space-y-2">
429 |               <p className="text-sm text-gray-600 dark:text-gray-300">返回格式：</p>
430 |               <pre className="bg-gray-200 dark:bg-gray-700 p-3 rounded text-sm overflow-x-auto">
431 | {`{
432 |   "result": "转换后的文本"
433 | }`}
434 |               </pre>
435 |             </div>
436 |           </div>
437 |         </div>
438 |       </footer>
439 |     </div>
440 |   );
441 | }
442 | 


--------------------------------------------------------------------------------