|
| 1 | +# JSON Formatter 应用部署指南 |
| 2 | + |
| 3 | +## 📦 包含的文件 |
| 4 | + |
| 5 | +压缩包包含以下关键内容: |
| 6 | + |
| 7 | +- **源代码**:完整的 Next.js + TypeScript 项目 |
| 8 | +- **国际化文件**:英文、简体中文、繁体中文支持 |
| 9 | +- **UI 组件**:shadcn/ui 组件库 |
| 10 | +- **配置文件**:Next.js、TypeScript、ESLint 等配置 |
| 11 | +- **依赖文件**:package.json 和 pnpm-lock.yaml |
| 12 | + |
| 13 | +## 🚀 快速部署 |
| 14 | + |
| 15 | +### 1. 解压文件 |
| 16 | + |
| 17 | +```bash |
| 18 | +tar -xzf json-formatter-app.tar.gz |
| 19 | +cd projects |
| 20 | +``` |
| 21 | + |
| 22 | +### 2. 安装依赖 |
| 23 | + |
| 24 | +```bash |
| 25 | +# 使用 pnpm 安装依赖(推荐) |
| 26 | +pnpm install |
| 27 | +``` |
| 28 | + |
| 29 | +### 3. 启动开发服务器 |
| 30 | + |
| 31 | +```bash |
| 32 | +# 使用 coze CLI 启动开发环境 |
| 33 | +coze dev |
| 34 | +``` |
| 35 | + |
| 36 | +应用将在 http://localhost:5000 上运行 |
| 37 | + |
| 38 | +### 4. 构建生产版本 |
| 39 | + |
| 40 | +```bash |
| 41 | +# 构建项目 |
| 42 | +coze build |
| 43 | + |
| 44 | +# 启动生产服务器 |
| 45 | +coze start |
| 46 | +``` |
| 47 | + |
| 48 | +## 📋 系统要求 |
| 49 | + |
| 50 | +- Node.js 24+ |
| 51 | +- pnpm 8+ |
| 52 | +- 现代浏览器(支持 Monaco Editor) |
| 53 | + |
| 54 | +## 🔧 环境变量 |
| 55 | + |
| 56 | +无需配置环境变量,应用开箱即用。 |
| 57 | + |
| 58 | +## 🌐 功能特性 |
| 59 | + |
| 60 | +- ✅ JSON 格式化和压缩 |
| 61 | +- ✅ 查找替换功能 |
| 62 | +- ✅ 转义字符处理(定向和全部) |
| 63 | +- ✅ Python Dict ↔ JSON 互转 |
| 64 | +- ✅ 单引号转双引号 |
| 65 | +- ✅ 历史记录保存和回溯 |
| 66 | +- ✅ 国际化支持(英文、简体中文、繁体中文) |
| 67 | +- ✅ 自动语言检测 |
| 68 | +- ✅ 深色模式编辑器 |
| 69 | + |
| 70 | +## 📁 项目结构 |
| 71 | + |
| 72 | +``` |
| 73 | +projects/ |
| 74 | +├── src/ |
| 75 | +│ ├── app/ # Next.js App Router 页面 |
| 76 | +│ │ ├── page.tsx # 主页面 |
| 77 | +│ │ └── layout.tsx # 根布局 |
| 78 | +│ ├── components/ # React 组件 |
| 79 | +│ │ ├── ui/ # shadcn/ui 组件 |
| 80 | +│ │ └── LanguageSelector.tsx # 语言选择器 |
| 81 | +│ ├── i18n/ # 国际化配置 |
| 82 | +│ │ ├── index.ts # i18n 工具函数 |
| 83 | +│ │ └── locales/ # 语言包 |
| 84 | +│ │ ├── en.ts |
| 85 | +│ │ ├── zh-CN.ts |
| 86 | +│ │ └── zh-TW.ts |
| 87 | +│ ├── hooks/ # React Hooks |
| 88 | +│ └── lib/ # 工具函数 |
| 89 | +├── public/ # 静态资源 |
| 90 | +├── package.json # 项目配置 |
| 91 | +├── pnpm-lock.yaml # 依赖锁定文件 |
| 92 | +├── .coze # Coze CLI 配置 |
| 93 | +└── next.config.ts # Next.js 配置 |
| 94 | +``` |
| 95 | + |
| 96 | +## 🛠️ 自定义配置 |
| 97 | + |
| 98 | +### 修改默认端口 |
| 99 | + |
| 100 | +编辑 `.coze` 文件,修改 `run` 命令中的端口: |
| 101 | + |
| 102 | +```toml |
| 103 | +[dev] |
| 104 | +run = ["pnpm", "dev", "--port", "5000", "--host"] |
| 105 | +``` |
| 106 | + |
| 107 | +### 添加新的语言支持 |
| 108 | + |
| 109 | +1. 在 `src/i18n/locales/` 创建新的语言文件 |
| 110 | +2. 在 `src/i18n/index.ts` 中注册新语言 |
| 111 | +3. 更新 `Locale` 类型定义 |
| 112 | + |
| 113 | +### 修改编辑器主题 |
| 114 | + |
| 115 | +编辑 `src/app/page.tsx`,修改 Monaco Editor 的 `theme` 属性: |
| 116 | + |
| 117 | +```typescript |
| 118 | +<Editor |
| 119 | + theme="vs-light" // 改为浅色主题 |
| 120 | + // ... |
| 121 | +/> |
| 122 | +``` |
| 123 | + |
| 124 | +## 🔒 注意事项 |
| 125 | + |
| 126 | +1. **Node.js 版本**:确保使用 Node.js 24 或更高版本 |
| 127 | +2. **包管理器**:必须使用 pnpm,不要使用 npm 或 yarn |
| 128 | +3. **端口冲突**:确保 5000 端口未被占用 |
| 129 | +4. **浏览器兼容性**:建议使用 Chrome、Firefox、Edge 等现代浏览器 |
| 130 | + |
| 131 | +## 📝 技术栈 |
| 132 | + |
| 133 | +- **框架**:Next.js 16 (App Router) |
| 134 | +- **语言**:TypeScript 5 |
| 135 | +- **UI 库**:shadcn/ui (Radix UI + Tailwind CSS) |
| 136 | +- **编辑器**:Monaco Editor |
| 137 | +- **包管理**:pnpm |
| 138 | +- **构建工具**:Coze CLI |
| 139 | + |
| 140 | +## 🤝 支持与反馈 |
| 141 | + |
| 142 | +如有问题或建议,请通过以下方式联系: |
| 143 | + |
| 144 | +- 查看项目 README.md |
| 145 | +- 检查控制台错误信息 |
| 146 | +- 确认依赖是否正确安装 |
| 147 | + |
| 148 | +## 📜 许可证 |
| 149 | + |
| 150 | +本项目基于 Coze Code 创建和使用。 |
| 151 | + |
| 152 | +--- |
| 153 | + |
| 154 | +**最后更新**:2025-01-22 |
| 155 | +**版本**:1.0.0 |
0 commit comments