doc(README): update readme add screenshot (#86)

README.md

@@ -28,6 +28,10 @@
   <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
 </p>
 
+<p align="center">
+  English | <a href="README.zh-CN.md">简体中文</a>
+</p>
+
 ---
 
 ## Overview
@@ -36,15 +40,34 @@
 
 Whether you're automating workflows, managing AI-powered channels, or scheduling intelligent tasks, ClawX provides the interface you need to harness AI agents effectively.
 
+ClawX comes pre-configured with best-practice model providers and natively supports Windows as well as multi-language settings. Of course, you can also fine-tune advanced configurations via **Settings → Advanced → Developer Mode**.
+
 ---
+## Screenshot
 
-## Community
+<p align="center">
+  <img src="resources/screenshot/chat.png" style="width: 100%; height: auto;">
+</p>
 
-Join our community to connect with other users, get support, and share your experiences.
+<p align="center">
+  <img src="resources/screenshot/cron_task.png" style="width: 100%; height: auto;">
+</p>
 
-| Enterprise WeChat | Feishu Group | Discord |
+<p align="center">
-| :---: | :---: | :---: |
+  <img src="resources/screenshot/skills.png" style="width: 100%; height: auto;">
-| <img src="src/assets/community/wecom-qr.png" width="150" alt="WeChat QR Code" /> | <img src="src/assets/community/feishu-qr.png" width="150" alt="Feishu QR Code" /> | <img src="src/assets/community/20260212-185822.png" width="150" alt="Discord QR Code" /> |
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/channels.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/dashboard.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/settings.png" style="width: 100%; height: auto;">
+</p>
 
 ---
 
@@ -307,8 +330,15 @@ ClawX is built on the shoulders of excellent open-source projects:
 
 ---
 
+## Community
 
+Join our community to connect with other users, get support, and share your experiences.
 
+| Enterprise WeChat | Feishu Group | Discord |
+| :---: | :---: | :---: |
+| <img src="src/assets/community/wecom-qr.png" width="150" alt="WeChat QR Code" /> | <img src="src/assets/community/feishu-qr.png" width="150" alt="Feishu QR Code" /> | <img src="src/assets/community/20260212-185822.png" width="150" alt="Discord QR Code" /> |
+
+---
 
 ## License
 

README.zh-CN.md

@@ -0,0 +1,352 @@
+
+<p align="center">
+  <img src="src/assets/logo.svg" width="128" height="128" alt="ClawX Logo" />
+</p>
+
+<h1 align="center">ClawX</h1>
+
+<p align="center">
+  <strong>OpenClaw AI 智能体的桌面客户端</strong>
+</p>
+
+<p align="center">
+  <a href="#功能特性">功能特性</a> •
+  <a href="#为什么选择-clawx">为什么选择 ClawX</a> •
+  <a href="#快速上手">快速上手</a> •
+  <a href="#系统架构">系统架构</a> •
+  <a href="#开发指南">开发指南</a> •
+  <a href="#参与贡献">参与贡献</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/platform-macOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
+  <img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
+  <img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
+  <a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
+  <img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
+  </a>
+  <img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
+</p>
+
+<p align="center">
+  <a href="README.md">English</a> | 简体中文
+</p>
+
+---
+
+## 概述
+
+**ClawX** 是连接强大 AI 智能体与普通用户之间的桥梁。基于 [OpenClaw](https://github.com/OpenClaw) 构建，它将命令行式的 AI 编排转变为易用、美观的桌面体验——无需使用终端。
+
+无论是自动化工作流、连接通讯软件，还是调度智能定时任务，ClawX 都能提供高效易用的图形界面，帮助你充分发挥 AI 智能体的能力。
+
+ClawX 预置了最佳实践的模型供应商配置，原生支持 Windows 平台以及多语言设置。当然，你也可以通过 **设置 → 高级 → 开发者模式** 来进行精细的高级配置。
+
+---
+
+## 截图预览
+
+<p align="center">
+  <img src="resources/screenshot/zh/聊天.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/zh/定时任务.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/zh/技能.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/zh/频道.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/zh/仪表盘.png" style="width: 100%; height: auto;">
+</p>
+
+<p align="center">
+  <img src="resources/screenshot/zh/设置.png" style="width: 100%; height: auto;">
+</p>
+
+---
+
+## 为什么选择 ClawX
+
+构建 AI 智能体不应该需要精通命令行。ClawX 的设计理念很简单：**强大的技术值得拥有一个尊重用户时间的界面。**
+
+| 痛点 | ClawX 解决方案 |
+|------|----------------|
+| 复杂的命令行配置 | 一键安装，配合引导式设置向导 |
+| 手动编辑配置文件 | 可视化设置界面，实时校验 |
+| 进程管理繁琐 | 自动管理网关生命周期 |
+| 多 AI 供应商切换 | 统一的供应商配置面板 |
+| 技能/插件安装复杂 | 内置技能市场与管理界面 |
+
+### 内置 OpenClaw 核心
+
+ClawX 直接基于官方 **OpenClaw** 核心构建。无需单独安装，我们将运行时嵌入应用内部，提供开箱即用的无缝体验。
+
+我们致力于与上游 OpenClaw 项目保持严格同步，确保你始终可以使用官方发布的最新功能、稳定性改进和生态兼容性。
+
+---
+
+## 功能特性
+
+### 🎯 零配置门槛
+从安装到第一次 AI 对话，全程通过直观的图形界面完成。无需终端命令，无需 YAML 文件，无需到处寻找环境变量。
+
+### 💬 智能聊天界面
+通过现代化的聊天体验与 AI 智能体交互。支持多会话上下文、消息历史记录以及 Markdown 富文本渲染。
+
+### 📡 多频道管理
+同时配置和监控多个 AI 频道。每个频道独立运行，允许你为不同任务运行专门的智能体。
+
+### ⏰ 定时任务自动化
+调度 AI 任务自动执行。定义触发器、设置时间间隔，让 AI 智能体 7×24 小时不间断工作。
+
+### 🧩 可扩展技能系统
+通过预构建的技能扩展 AI 智能体的能力。在集成的技能面板中浏览、安装和管理技能——无需包管理器。
+
+### 🔐 安全的供应商集成
+连接多个 AI 供应商（OpenAI、Anthropic 等），凭证安全存储在系统原生密钥链中。
+
+### 🌙 自适应主题
+支持浅色模式、深色模式或跟随系统主题。ClawX 自动适应你的偏好设置。
+
+---
+
+## 快速上手
+
+### 系统要求
+
+- **操作系统**：macOS 11+、Windows 10+ 或 Linux（Ubuntu 20.04+）
+- **内存**：最低 4GB RAM（推荐 8GB）
+- **存储空间**：1GB 可用磁盘空间
+
+### 安装方式
+
+#### 预构建版本（推荐）
+
+从 [Releases](https://github.com/ValueCell-ai/ClawX/releases) 页面下载适用于你平台的最新版本。
+
+#### 从源码构建
+
+```bash
+# 克隆仓库
+git clone https://github.com/ValueCell-ai/ClawX.git
+cd ClawX
+
+# 初始化项目
+pnpm run init
+
+# 以开发模式启动
+pnpm dev
+```
+
+### 首次启动
+
+首次启动 ClawX 时，**设置向导** 将引导你完成以下步骤：
+
+1. **语言与区域** – 配置你的首选语言和地区
+2. **AI 供应商** – 输入所支持供应商的 API 密钥
+3. **技能包** – 选择适用于常见场景的预配置技能
+4. **验证** – 在进入主界面前测试你的配置
+
+---
+
+## 系统架构
+
+ClawX 采用 **双进程架构**，将 UI 层与 AI 运行时操作分离：
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        ClawX 桌面应用                             │
+│                                                                  │
+│  ┌────────────────────────────────────────────────────────────┐  │
+│  │              Electron 主进程                                 │  │
+│  │  • 窗口与应用生命周期管理                                      │  │
+│  │  • 网关进程监控                                               │  │
+│  │  • 系统集成（托盘、通知、密钥链）                                │  │
+│  │  • 自动更新编排                                               │  │
+│  └────────────────────────────────────────────────────────────┘  │
+│                              │                                    │
+│                              │ IPC                                │
+│                              ▼                                    │
+│  ┌────────────────────────────────────────────────────────────┐  │
+│  │              React 渲染进程                                   │  │
+│  │  • 现代组件化 UI（React 19）                                   │  │
+│  │  • Zustand 状态管理                                           │  │
+│  │  • WebSocket 实时通信                                         │  │
+│  │  • Markdown 富文本渲染                                        │  │
+│  └────────────────────────────────────────────────────────────┘  │
+└──────────────────────────────┬──────────────────────────────────┘
+                               │
+                               │ WebSocket (JSON-RPC)
+                               ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                     OpenClaw 网关                                 │
+│                                                                  │
+│  • AI 智能体运行时与编排                                          │
+│  • 消息频道管理                                                   │
+│  • 技能/插件执行环境                                              │
+│  • 供应商抽象层                                                   │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### 设计原则
+
+- **进程隔离**：AI 运行时在独立进程中运行，确保即使在高负载计算期间 UI 也能保持响应
+- **优雅恢复**：内置带指数退避的重连逻辑，自动处理瞬时故障
+- **安全存储**：API 密钥和敏感数据利用操作系统原生的安全存储机制
+- **热重载**：开发模式支持即时 UI 更新，无需重启网关
+
+---
+
+## 使用场景
+
+### 🤖 个人 AI 助手
+配置一个通用 AI 智能体，可以回答问题、撰写邮件、总结文档并协助处理日常任务——全部通过简洁的桌面界面完成。
+
+### 📊 自动化监控
+设置定时智能体来监控新闻动态、追踪价格变动或监听特定事件。结果将推送到你偏好的通知渠道。
+
+### 💻 开发者效率工具
+将 AI 融入你的开发工作流。使用智能体进行代码审查、生成文档或自动化重复性编码任务。
+
+### 🔄 工作流自动化
+将多个技能串联起来，创建复杂的自动化流水线。处理数据、转换内容、触发操作——全部通过可视化方式编排。
+
+---
+
+## 开发指南
+
+### 前置要求
+
+- **Node.js**：22+（推荐 LTS 版本）
+- **包管理器**：pnpm 9+（推荐）或 npm
+
+### 项目结构
+
+```
+ClawX/
+├── electron/              # Electron 主进程
+│   ├── main/             # 应用入口、窗口管理
+│   ├── gateway/          # OpenClaw 网关进程管理
+│   ├── preload/          # 安全 IPC 桥接脚本
+│   └── utils/            # 工具模块（存储、认证、路径）
+├── src/                   # React 渲染进程
+│   ├── components/       # 可复用 UI 组件
+│   │   ├── ui/          # 基础组件（shadcn/ui）
+│   │   ├── layout/      # 布局组件（侧边栏、顶栏）
+│   │   └── common/      # 公共组件
+│   ├── pages/           # 应用页面
+│   │   ├── Setup/       # 初始设置向导
+│   │   ├── Dashboard/   # 首页仪表盘
+│   │   ├── Chat/        # AI 聊天界面
+│   │   ├── Channels/    # 频道管理
+│   │   ├── Skills/      # 技能浏览与管理
+│   │   ├── Cron/        # 定时任务
+│   │   └── Settings/    # 配置面板
+│   ├── stores/          # Zustand 状态仓库
+│   ├── lib/             # 前端工具库
+│   └── types/           # TypeScript 类型定义
+├── resources/            # 静态资源（图标、图片）
+├── scripts/              # 构建与工具脚本
+└── tests/               # 测试套件
+```
+
+### 常用命令
+
+```bash
+# 开发
+pnpm dev                  # 以热重载模式启动
+pnpm dev:electron         # 直接启动 Electron
+
+# 代码质量
+pnpm lint                 # 运行 ESLint 检查
+pnpm lint:fix             # 自动修复问题
+pnpm typecheck            # TypeScript 类型检查
+
+# 测试
+pnpm test                 # 运行单元测试
+pnpm test:watch           # 监听模式
+pnpm test:coverage        # 生成覆盖率报告
+pnpm test:e2e             # 运行 Playwright E2E 测试
+
+# 构建与打包
+pnpm build                # 完整生产构建
+pnpm package              # 为当前平台打包
+pnpm package:mac          # 为 macOS 打包
+pnpm package:win          # 为 Windows 打包
+pnpm package:linux        # 为 Linux 打包
+```
+
+### 技术栈
+
+| 层级 | 技术 |
+|------|------|
+| 运行时 | Electron 40+ |
+| UI 框架 | React 19 + TypeScript |
+| 样式 | Tailwind CSS + shadcn/ui |
+| 状态管理 | Zustand |
+| 构建工具 | Vite + electron-builder |
+| 测试 | Vitest + Playwright |
+| 动画 | Framer Motion |
+| 图标 | Lucide React |
+
+---
+
+## 参与贡献
+
+我们欢迎社区的各种贡献！无论是修复 Bug、开发新功能、改进文档还是翻译——每一份贡献都让 ClawX 变得更好。
+
+### 如何贡献
+
+1. **Fork** 本仓库
+2. **创建** 功能分支（`git checkout -b feature/amazing-feature`）
+3. **提交** 清晰描述的变更
+4. **推送** 到你的分支
+5. **创建** Pull Request
+
+### 贡献规范
+
+- 遵循现有代码风格（ESLint + Prettier）
+- 为新功能编写测试
+- 按需更新文档
+- 保持提交原子化且描述清晰
+
+---
+
+## 致谢
+
+ClawX 构建于以下优秀的开源项目之上：
+
+- [OpenClaw](https://github.com/OpenClaw) – AI 智能体运行时
+- [Electron](https://www.electronjs.org/) – 跨平台桌面框架
+- [React](https://react.dev/) – UI 组件库
+- [shadcn/ui](https://ui.shadcn.com/) – 精美设计的组件库
+- [Zustand](https://github.com/pmndrs/zustand) – 轻量级状态管理
+
+---
+
+## 社区
+
+加入我们的社区，与其他用户交流、获取帮助、分享你的使用体验。
+
+| 企业微信 | 飞书群组 | Discord |
+| :---: | :---: | :---: |
+| <img src="src/assets/community/wecom-qr.png" width="150" alt="企业微信二维码" /> | <img src="src/assets/community/feishu-qr.png" width="150" alt="飞书二维码" /> | <img src="src/assets/community/20260212-185822.png" width="150" alt="Discord 二维码" /> |
+
+---
+
+## 许可证
+
+ClawX 基于 [MIT 许可证](LICENSE) 发布。你可以自由地使用、修改和分发本软件。
+
+---
+
+<p align="center">
+  <sub>由 ValueCell 团队用 ❤️ 打造</sub>
+</p>