grimxcodes/GrimX-Code-Ide

# GrimX — Android 编程 IDE 一款基于 Expo 和 React Native 构建的、功能完整的类 VS Code 编程 IDE，专为 Android 打造。拥有 3D 动画死神角色、通过 WebView 嵌入的 Monaco Editor，以及黑/灰/亮红三色主题。 ## 截图 | 启动页 | 引导流程 | IDE 编辑器 | |-------|------------|------------| | 死神升起动画配合下落的代码粒子 | 3 页水平滑动引导 | 完整的 VS Code 布局，含 Monaco、终端、文件树 | ## 功能特性 - **动画启动页** — 死神升起动画配合下落代码雨粒子 - **引导流程** — 3 页可滑动引导 + 设置问题 + 权限申请 - **Monaco Editor** — 通过 WebView（CDN）嵌入完整的 VS Code Monaco 编辑器，支持语法高亮、IntelliSense、多语言 - **活动栏** — 文件资源管理器、搜索、Git、扩展面板 — 全部功能可用 - **文件树** — 创建、重命名、删除文件；通过 AsyncStorage 持久化存储 - **标签栏** — 多文件标签页，带未保存更改指示器 - **集成终端** — 模拟终端面板 - **命令面板** — `Ctrl+Shift+P` 风格的命令启动器 - **状态栏** — 语言模式、光标位置、Git 分支、编码格式 - **自动保存** — 每次按键后 1.5 秒防抖保存 - **始终深色主题** — `#0d0d0d` 背景，`#1a1a1a` 表面，`#CC0000` 亮红强调色 ## 技术栈 | 层级 | 技术 | |-------|-----------| | 框架 | Expo ~54，Expo Router v6 | | 语言 | TypeScript 5.9，React 19 | | 运行时 | React Native 0.81（启用新架构） | | 编辑器 | Monaco Editor 通过 WebView + CDN | | 存储 | `@react-native-async-storage/async-storage` | | 动画 | React Native Reanimated 4，`react-native-svg` | | 字体 | Inter，通过 `@expo-google-fonts/inter` | | 构建 | EAS Build（Expo Application Services） | | 包管理器 | npm（用于 EAS），pnmonorepo 本地开发） | ## 项目结构 ``` artifacts/mobile/ ├── app/ # Expo Router screens │ ├── _layout.tsx # Root layout — providers, fonts, splash │ ├── index.tsx # Redirect to intro or editor │ ├── intro.tsx # Animated intro (Grim Reaper + particles) │ ├── onboarding.tsx # 3-slide horizontal onboarding │ ├── questions.tsx # Setup wizard (language, theme, etc.) │ ├── permissions.tsx # Notification permissions screen │ └── editor.tsx # Main IDE screen │ ├── components/ # Reusable UI components │ ├── ActivityBar.tsx # Left sidebar icons │ ├── CommandPalette.tsx # Floating command search │ ├── EditorStatusBar.tsx # Bottom status bar │ ├── ErrorBoundary.tsx # React error boundary wrapper │ ├── ErrorFallback.tsx # Error fallback UI │ ├── FileTree.tsx # Left panel file explorer │ ├── GrimReaper.tsx # Animated SVG Grim Reaper │ ├── KeyboardAwareScrollViewCompat.tsx │ ├── MonacoEditor.tsx # Monaco WebView — generates full HTML string │ ├── SearchPanel.tsx # Global file search │ ├── TabBar.tsx # Open file tabs │ └── TerminalPanel.tsx # Integrated terminal │ ├── context/ │ ├── AppContext.tsx # Settings, onboarding state │ └── EditorContext.tsx # Files, tabs, active panel │ ├── hooks/ │ └── useColors.ts # Design token hook │ ├── constants/ │ └── colors.ts # GrimX dark color palette │ ├── assets/ │ └── images/ │ └── icon.png # App icon (used for splash + adaptive icon) │ ├── app.json # Expo app config ├── eas.json # EAS Build profiles ├── package.json # npm dependencies (standalone for EAS) ├── package-lock.json # npm lockfile (required by EAS) ├── .npmrc # legacy-peer-deps=true ├── tsconfig.json # TypeScript config ├── babel.config.js # Babel config (expo preset) └── metro.config.js # Metro bundler config ``` ## 前置条件 开始之前，请确保你的机器上已安装以下工具。 | 工具 | 版本 | 安装 | |------|---------|---------| | Node.js | 18+（推荐 20 LTS） | https://nodejs.org | | npm | 10+ | 随 Node 附带 | | Expo CLI | 最新版 | `npm install -g expo-cli` | | EAS CLI | 最新版 | `npm install -g eas-cli` | | Git | 任意版本 | https://git-scm.com | | Android Studio | 最新版 | https://developer.android.com/studio | | Java（JDK） | 17 LTS | 随 Android Studio 附带 | ## Android SDK 设置 1. 打开 **Android Studio** → **SDK Manager**（右上角齿轮图标） 2. 在 **SDK Platforms** 下，安装： - Android 14（API Level 34）✅ - Android 13（API Level 33）✅*（可选但推荐）* 3. 在 **SDK Tools** 下，确保勾选以下项： - Android SDK Build-Tools 34 ✅ - Android Emulator ✅ - Android SDK Platform-Tools ✅ - Intel x86 Emulator Accelerator（HAXM）✅*（仅 Intel CPU）* 4. 在 `~/.bashrc` 或 `~/.zshrc` 中设置环境变量： ``` export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/platform-tools export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin ``` 然后重新加载 shell： ``` source ~/.bashrc # or source ~/.zshrc ``` 5. 验证设置： ``` adb --version sdkmanager --version ``` ## 本地设置 ### 1. 克隆并进入目录 ``` git clone cd /artifacts/mobile ``` ### 2. 安装依赖 ``` npm install --legacy-peer-deps ``` ### 3. 登录 Expo 账号 使用 EAS Build 需要 Expo 账号。 ``` # 如果您还没有账户，请在 https://expo.dev 创建一个免费账户 eas login ``` ### 4. 配置 EAS 项目 ``` eas build:configure ``` 这会将你的本地项目链接到云端的 Expo 项目。如有需要，会生成/更新 `eas.json`。接受所有默认选项。 ## 在物理 Android 设备上运行（USB） ### 第 1 步 — 在手机上启用开发者模式 1. 进入 **设置 → 关于手机** 2. 连续快速点击 **版本号** 7 次 3. 返回 **设置 → 开发者选项** 4. 启用 **USB 调试** ✅ 5. *（可选）* 启用 **通过 USB 安装** ✅ ### 第 2 步 — 通过 USB 连接 ``` adb devices ``` 你应该能看到设备列出。示例输出： ``` List of devices attached RF8N123ABC45 device ``` 如果显示 `unauthorized`，请解锁手机并在 USB 调试提示中点击 **允许**。 ### 第 3 步 — 直接在设备上运行（Expo Go） ``` npx expo start --localhost ``` - 使用 **Expo Go** 应用扫描二维码（[Android](https://play.google.com/store/apps/details?id=host.exp.exponent)) - 应用通过 USB 或局域网即时加载 ## 使用 EAS 构建 APK EAS Build 在云端编译真正的 Android APK — 你的机器上无需 Android Studio 编译。 ### 预览 APK（推荐用于测试） ``` cd artifacts/mobile eas build --platform android --profile preview ``` - 构建一个**已签名的 APK**，可在任何 Android 设备上安装 - 不需要 Play Store 账号 - 构建在 Expo 的云端服务器上运行（约 5–15 分钟） - 完成后会提供下载链接 ### 开发构建（含开发工具） ``` eas build --platform android --profile development ``` - 包含 Expo dev client - 支持通过 USB/LAN 热重载 + 调试 ### 生产 APK ``` eas build --platform android --profile production ``` - 经过优化、压缩，可用于分发 ## 在设备上安装 APK ### 方法 1 — 下载链接（最简单） EAS 构建完成后，在手机浏览器中打开下载 URL。点击 `.apk` 文件直接安装。 ### 方法 2 — ADB 安装（USB） ``` # 从 EAS 下载 APK，然后： adb install -r path/to/grimx.apk ``` ### 方法 3 — 通过二维码分享 EAS 在构建完成后会在终端中显示二维码。在你的 Android 设备上扫描二维码以下载并安装。 ## 构建配置文件参考 在 `eas.json` 中定义： | 配置文件 | 输出 | 使用场景 | |---------|--------|----------| | `development` | Debug APK | 开发（含热重载） | | `preview` | Release APK | QA 测试 / 与测试人员共享 | | `production` | Release APK | 最终分发 | ## 本地运行（Web 预览） 无需物理设备，快速迭代 UI： ``` npx expo start --web ``` 在浏览器中打开应用。Monaco Editor 在 Web 模式下完全可用。 ## 环境与应用配置 | 键 | 值 | |-----|-------| | 应用名称 | GrimX - Coding IDE | | Bundle ID | `com.grimx.codingide` | | Scheme | `grimx://` | | 版本 | 1.0.0（versionCode：1） | | 最低 Android API | 24（Android 7.0） | | 目标 Android API | 34（Android 14） | | 新架构 | 已启用 | | 方向 | 仅竖屏 | ## 架构说明 ### Monaco Editor Monaco 通过 WebView 使用 CDN 加载： ``` https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/ ``` `MonacoEditor.tsx` 中的 `buildHTML()` 生成注入到 WebView 的完整 HTML 字符串。标签切换使用 `key={activeTab}` 强制 WebView 重新挂载 — 比双向 JS 桥同步更简单可靠。 ### 文件持久化 所有文件以 `@grimx_files` 为键存储在 AsyncStorage 中。首次加载时，默认文件与用户更改合并。 ### 引导流程 ``` intro → onboarding → questions → permissions → editor ``` 由 AsyncStorage 标志 `@grimx_onboarding_complete` 控制。一旦设置，每次后续启动时应用将直接重定向到编辑器。 ### GrimReaper 动画 - SVG 内部使用 `react-native-svg` 渲染 - 眼睛发光通过 `setInterval` 实现（非 Reanimated — SVG 节点无法使用 Reanimated） - 浮动动画使用 `Animated.View` 包装器 ## 常见问题与修复 ### `adb devices` 未显示任何设备 - 确保已启用 USB 调试 - 尝试更换 USB 数据线（某些线缆仅支持充电） - 运行 `adb kill-server && adb start-server` ### APK 安装后显示白屏 - 检查你的设备是否有网络连接（Monaco 从 CDN 加载） - 尝试清除应用数据：设置 → 应用 → GrimX → 清除数据 ### EAS 构建失败：`pnpm install exited with non-zero` - 此项目使用 `"packageManager": "npm@10.5.0"` — EAS 必须使用 `package-lock.json`，而非 pnpm - 确保 `package-lock.json` 存在于 `artifacts/mobile/` 中 - 重新生成：`npm install --legacy-peer-deps --ignore-scripts` ### Metro bundler 无法解析某个模块 - 运行 `npx expo start --clear` 清除 Metro 缓存 ### Web 平台上 `expo-notifications` 报错 - 属于预期行为 — Web 平台不支持推送通知；生产构建中该警告已被抑制 ## 脚本参考 ``` # 启动开发服务器（web 预览） npm run web # 启动 Expo 开发服务器 npm run start # 通过 EAS 构建预览 APK npm run build:android # 类型检查 npm run typecheck ``` ## 依赖概览 | 包 | 用途 | |---------|---------| | `expo ~54` | 核心 Expo SDK | | `expo-router ~6` | 基于文件的路由 | | `react-native 0.81` | React Native 运行时 | | `react-native-reanimated ~4.1` | 流畅动画 | | `react-native-svg 15` | Grim Reaper 的 SVG 渲染 | | `react-native-webview 13.15` | Monaco Editor 嵌入 | | `react-native-worklets 0.5.1` | Reanimated 4 worklets 运行时 | | `react-native-gesture-handler ~2.28` | 滑动手势支持 | | `react-native-screens ~4.16` | 原生屏幕容器 | | `react-native-safe-area-context ~5.6` | 安全区域内边距 | | `react-native-keyboard-controller 1.18.5` | 键盘避让行为 | | `@react-native-async-storage/async-storage 2.2` | 文件和设置持久化 | | `expo-notifications ~0.32` | 推送通知支持 | | `expo-haptics ~15` | 触觉反馈 | | `expo-linear-gradient ~15` | 渐变背景 | | `@expo-google-fonts/inter 0.4` | Inter 字体族 | | `@expo/vector-icons ^15` | 图标集 | ## 许可证 MIT — 可自由使用、修改和分发。 *使用 Expo、React Native 和 Monaco Editor 构建。*

标签：3D动画, Android开发工具, AsyncStorage, CDN, DNS解析, EAS Build, Expo, Git集成, Grim Reaper, IntelliSense, iOS开发工具, Monaco Editor, New Architecture, npm, pnpm, React 19, React Native, React Native Reanimated, SEO关键词, TypeScript, VS Code替代, WebView, 代码编写, 代码编辑器, 代码编辑器应用, 命令面板, 多语言支持, 威胁情报, 安全插件, 安全测试框架, 开发者工具, 开源编码IDE, 开源项目, 文件管理, 暗黑主题, 标签页, 状态栏, 移动开发, 移动端IDE, 移动编码, 终端集成, 编程IDE, 编程工具, 自动保存, 自动化攻击, 语法高亮, 远程代码执行