diff --git a/README.md b/README.md
index 4916f4e2..5879a2e1 100644
--- a/README.md
+++ b/README.md
@@ -1,90 +1,61 @@
-# ECS Framework
+# ESEngine
-[](https://github.com/esengine/ecs-framework/actions)
-[](https://codecov.io/gh/esengine/ecs-framework)
-[](https://badge.fury.io/js/%40esengine%2Fecs-framework)
-[](https://www.npmjs.com/package/@esengine/ecs-framework)
-[](https://bundlephobia.com/package/@esengine/ecs-framework)
-[](https://www.typescriptlang.org/)
-[](https://opensource.org/licenses/MIT)
-[](#contributors)
-[](https://github.com/esengine/ecs-framework/stargazers)
-[](https://deepwiki.com/esengine/ecs-framework)
+**English** | [中文](./README_CN.md)
-
+**[Documentation](https://esengine.github.io/ecs-framework/) | [API Reference](https://esengine.github.io/ecs-framework/api/) | [Examples](./examples/)**
-
一个高性能的 TypeScript ECS (Entity-Component-System) 框架，专为现代游戏开发而设计。
+ESEngine is a cross-platform 2D game engine for creating games from a unified interface. It provides a comprehensive set of common tools so that developers can focus on making games without having to reinvent the wheel.
-
A high-performance TypeScript ECS (Entity-Component-System) framework designed for modern game development.
+Games can be exported to multiple platforms including Web browsers, WeChat Mini Games, and other mini-game platforms.
-
+- **Data-Driven Architecture**: Built on Entity-Component-System (ECS) pattern for flexible and performant game logic
+- **High-Performance Rendering**: Rust/WebAssembly 2D renderer with sprite batching and WebGL 2.0 backend
+- **Visual Editor**: Cross-platform desktop editor with scene management, asset browser, and visual tools
+- **Modular Design**: Use only what you need. Each feature is a separate module that can be included independently
+- **Multi-Platform**: Deploy to Web, WeChat Mini Games, and more from a single codebase
-[](https://star-history.com/#esengine/ecs-framework&Date)
+## Getting the Engine
-
-
-
-
-### 📈 下载趋势 / Download Trends
-
-
-
-[](https://www.npmjs.com/package/@esengine/ecs-framework)
-
-[](https://npmtrends.com/@esengine/ecs-framework)
-
-
-
----
-
-## 特性
-
-- **高性能** - 针对大规模实体优化，支持SoA存储和批量处理
-- **多线程计算** - Worker系统支持真正的并行处理，充分利用多核CPU性能
-- **类型安全** - 完整的TypeScript支持，编译时类型检查
-- **现代架构** - 支持多World、多Scene的分层架构设计
-- **开发友好** - 内置调试工具和性能监控
-- **跨平台** - 支持Cocos Creator、Laya引擎和Web平台
-
-## 安装
+### Using npm
```bash
npm install @esengine/ecs-framework
```
-## 快速开始
+### Building from Source
+
+See [Building from Source](#building-from-source) for detailed instructions.
+
+### Editor Download
+
+Pre-built editor binaries are available on the [Releases](https://github.com/esengine/ecs-framework/releases) page for Windows and macOS.
+
+## Quick Start
```typescript
-import { Core, Scene, Component, EntitySystem, ECSComponent, ECSSystem, Matcher, Time } from '@esengine/ecs-framework';
+import {
+ Core, Scene, Entity, Component, EntitySystem,
+ Matcher, Time, ECSComponent, ECSSystem
+} from '@esengine/ecs-framework';
-// 定义组件
@ECSComponent('Position')
class Position extends Component {
- constructor(public x = 0, public y = 0) {
- super();
- }
+ x = 0;
+ y = 0;
}
@ECSComponent('Velocity')
class Velocity extends Component {
- constructor(public dx = 0, public dy = 0) {
- super();
- }
+ dx = 0;
+ dy = 0;
}
-// 创建系统
@ECSSystem('Movement')
class MovementSystem extends EntitySystem {
constructor() {
@@ -93,177 +64,171 @@ class MovementSystem extends EntitySystem {
protected process(entities: readonly Entity[]): void {
for (const entity of entities) {
- const position = entity.getComponent(Position)!;
- const velocity = entity.getComponent(Velocity)!;
-
- position.x += velocity.dx * Time.deltaTime;
- position.y += velocity.dy * Time.deltaTime;
+ const pos = entity.getComponent(Position);
+ const vel = entity.getComponent(Velocity);
+ pos.x += vel.dx * Time.deltaTime;
+ pos.y += vel.dy * Time.deltaTime;
}
}
}
-// 创建场景并启动
-class GameScene extends Scene {
- protected initialize(): void {
- this.addSystem(new MovementSystem());
-
- const player = this.createEntity("Player");
- player.addComponent(new Position(100, 100));
- player.addComponent(new Velocity(50, 0));
- }
-}
-
-// 启动游戏
Core.create();
-Core.setScene(new GameScene());
+const scene = new Scene();
+scene.addSystem(new MovementSystem());
-// 游戏循环中更新
-function gameLoop(deltaTime: number) {
- Core.update(deltaTime);
-}
+const player = scene.createEntity('Player');
+player.addComponent(new Position());
+player.addComponent(new Velocity());
+
+Core.setScene(scene);
```
-## 核心特性
+## Modules
-- **实体查询** - 使用 Matcher API 进行高效的实体过滤
-- **事件系统** - 类型安全的事件发布/订阅机制
-- **性能优化** - SoA 存储优化，支持大规模实体处理
-- **多线程支持** - Worker系统实现真正的并行计算，充分利用多核CPU
-- **多场景** - 支持 World/Scene 分层架构
-- **时间管理** - 内置定时器和时间控制系统
+ESEngine is organized into modular packages. Each feature has a runtime module and an optional editor extension.
-## 🏗️ 架构设计 / Architecture
+### Core
-```mermaid
-graph TB
- A[Core 核心] --> B[World 世界]
- B --> C[Scene 场景]
- C --> D[EntityManager 实体管理器]
- C --> E[SystemManager 系统管理器]
- D --> F[Entity 实体]
- F --> G[Component 组件]
- E --> H[EntitySystem 实体系统]
- E --> I[WorkerSystem 工作线程系统]
+| Package | Description |
+|---------|-------------|
+| `@esengine/ecs-framework` | Core ECS framework with entity management, component system, and queries |
+| `@esengine/math` | Vector, matrix, and mathematical utilities |
+| `@esengine/engine` | Rust/WASM 2D renderer |
+| `@esengine/engine-core` | Engine module system and lifecycle management |
- style A fill:#e1f5ff
- style B fill:#fff3e0
- style C fill:#f3e5f5
- style D fill:#e8f5e9
- style E fill:#fff9c4
- style F fill:#ffebee
- style G fill:#e0f2f1
- style H fill:#fce4ec
- style I fill:#f1f8e9
+### Runtime Modules
+
+| Package | Description |
+|---------|-------------|
+| `@esengine/sprite` | 2D sprite rendering and animation |
+| `@esengine/tilemap` | Tile-based map rendering with animation support |
+| `@esengine/physics-rapier2d` | 2D physics simulation powered by Rapier |
+| `@esengine/behavior-tree` | Behavior tree AI system |
+| `@esengine/blueprint` | Visual scripting runtime |
+| `@esengine/camera` | Camera control and management |
+| `@esengine/audio` | Audio playback |
+| `@esengine/ui` | UI components |
+| `@esengine/material-system` | Material and shader system |
+| `@esengine/asset-system` | Asset loading and management |
+
+### Editor Extensions
+
+| Package | Description |
+|---------|-------------|
+| `@esengine/sprite-editor` | Sprite inspector and tools |
+| `@esengine/tilemap-editor` | Visual tilemap editor with brush tools |
+| `@esengine/physics-rapier2d-editor` | Physics collider visualization and editing |
+| `@esengine/behavior-tree-editor` | Visual behavior tree editor |
+| `@esengine/blueprint-editor` | Visual scripting editor |
+| `@esengine/material-editor` | Material and shader editor |
+| `@esengine/shader-editor` | Shader code editor |
+
+### Platform
+
+| Package | Description |
+|---------|-------------|
+| `@esengine/platform-common` | Platform abstraction interfaces |
+| `@esengine/platform-web` | Web browser runtime |
+| `@esengine/platform-wechat` | WeChat Mini Game runtime |
+
+## Editor
+
+ESEngine Editor is a cross-platform desktop application built with Tauri and React.
+
+### Features
+
+- Scene hierarchy and entity management
+- Component inspector with custom editors
+- Asset browser with drag-and-drop support
+- Tilemap editor with paint, fill, and selection tools
+- Behavior tree visual editor
+- Blueprint visual scripting
+- Material and shader editing
+- Built-in performance profiler
+- Localization support (English, Chinese)
+
+### Screenshot
+
+
+
+## Supported Platforms
+
+| Platform | Runtime | Editor |
+|----------|---------|--------|
+| Web Browser | Yes | - |
+| Windows | - | Yes |
+| macOS | - | Yes |
+| WeChat Mini Game | In Progress | - |
+| Playable Ads | Planned | - |
+| Android | Planned | - |
+| iOS | Planned | - |
+| Windows Native | Planned | - |
+| Other Platforms | Planned | - |
+
+## Building from Source
+
+### Prerequisites
+
+- Node.js 18 or later
+- pnpm 10 or later
+- Rust toolchain (for WASM renderer)
+- wasm-pack
+
+### Setup
+
+```bash
+# Clone repository
+git clone https://github.com/esengine/ecs-framework.git
+cd ecs-framework
+
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Build WASM renderer (optional)
+pnpm build:wasm
```
-## 平台支持
+### Running the Editor
-支持主流游戏引擎和 Web 平台：
+```bash
+cd packages/editor-app
+pnpm tauri:dev
+```
-- **Cocos Creator**
-- **Laya 引擎**
-- **原生 Web** - 浏览器环境直接运行
-- **小游戏平台** - 微信、支付宝等小游戏
+### Project Structure
-## ECS Framework Editor
+```
+ecs-framework/
+├── packages/ Engine packages (runtime, editor, platform)
+├── docs/ Documentation source
+├── examples/ Example projects
+├── scripts/ Build utilities
+└── thirdparty/ Third-party dependencies
+```
-跨平台桌面编辑器，提供可视化开发和调试工具。
+## Documentation
-### 主要功能
+- [Getting Started](https://esengine.github.io/ecs-framework/guide/getting-started.html)
+- [Architecture Guide](https://esengine.github.io/ecs-framework/guide/)
+- [API Reference](https://esengine.github.io/ecs-framework/api/)
-- **场景管理** - 可视化场景层级和实体管理
-- **组件检视** - 实时查看和编辑实体组件
-- **性能分析** - 内置 Profiler 监控系统性能
-- **插件系统** - 可扩展的插件架构
-- **远程调试** - 连接运行中的游戏进行实时调试
-- **自动更新** - 支持热更新，自动获取最新版本
+## Community
-### 下载
+- [GitHub Issues](https://github.com/esengine/ecs-framework/issues) - Bug reports and feature requests
+- [GitHub Discussions](https://github.com/esengine/ecs-framework/discussions) - Questions and ideas
-[](https://github.com/esengine/ecs-framework/releases/latest)
+## Contributing
-支持 Windows、macOS (Intel & Apple Silicon)
+Contributions are welcome. Please read the contributing guidelines before submitting a pull request.
-### 截图
+1. Fork the repository
+2. Create a feature branch
+3. Make changes with tests
+4. Submit a pull request
-
+## License
-
-查看更多截图
-
-**性能分析器**
-
-
-**插件管理**
-
-
-**设置界面**
-
-
-
-
-## 示例项目
-
-- [Worker系统演示](https://esengine.github.io/ecs-framework/demos/worker-system/) - 多线程物理系统演示，展示高性能并行计算
-- [割草机演示](https://github.com/esengine/lawn-mower-demo) - 完整的游戏示例
-
-## 文档
-
-- [📚 AI智能文档](https://deepwiki.com/esengine/ecs-framework) - AI助手随时解答你的问题
-- [快速入门](https://esengine.github.io/ecs-framework/guide/getting-started.html) - 详细教程和平台集成
-- [完整指南](https://esengine.github.io/ecs-framework/guide/) - ECS 概念和使用指南
-- [API 参考](https://esengine.github.io/ecs-framework/api/) - 完整 API 文档
-
-## 💪 支持项目 / Support the Project
-
-如果这个项目对你有帮助，请考虑：
-
-If this project helps you, please consider:
-
-
-
-[](https://github.com/sponsors/esengine)
-[](https://github.com/esengine/ecs-framework)
-
-
-
-- ⭐ 给项目点个 Star
-- 🐛 报告 Bug 或提出新功能
-- 📝 改进文档
-- 💖 成为赞助者
-
-## 社区与支持
-
-- [问题反馈](https://github.com/esengine/ecs-framework/issues) - Bug 报告和功能建议
-- [讨论区](https://github.com/esengine/ecs-framework/discussions) - 提问、分享想法
-- [QQ 交流群](https://jq.qq.com/?_wv=1027&k=29w1Nud6) - ecs游戏框架交流
-
-## 贡献者 / Contributors
-
-感谢所有为这个项目做出贡献的人！
-
-Thanks goes to these wonderful people:
-
-
-
-
-
-
-
-
-
-
-
-本项目遵循 [all-contributors](https://github.com/all-contributors/all-contributors) 规范。欢迎任何形式的贡献！
-
-## 许可证
-
-[MIT](LICENSE) © 2025 ECS Framework
+ESEngine is licensed under the [MIT License](LICENSE).
diff --git a/README_CN.md b/README_CN.md
new file mode 100644
index 00000000..28b060d7
--- /dev/null
+++ b/README_CN.md
@@ -0,0 +1,235 @@
+# ESEngine
+
+[English](./README.md) | **中文**
+
+**[文档](https://esengine.github.io/ecs-framework/) | [API 参考](https://esengine.github.io/ecs-framework/api/) | [示例](./examples/)**
+
+ESEngine 是一个跨平台 2D 游戏引擎，提供统一的开发界面。它包含完整的常用工具集，让开发者专注于游戏创作本身。
+
+游戏可以导出到多个平台，包括 Web 浏览器、微信小游戏等小游戏平台。
+
+## 免费开源
+
+ESEngine 基于 MIT 协议完全免费开源。无附加条件，无版税。你的游戏完全属于你。
+
+## 特性
+
+- **数据驱动架构**：基于 ECS（实体-组件-系统）模式构建，提供灵活高效的游戏逻辑
+- **高性能渲染**：Rust/WebAssembly 2D 渲染器，支持精灵批处理和 WebGL 2.0
+- **可视化编辑器**：跨平台桌面编辑器，包含场景管理、资源浏览器和可视化工具
+- **模块化设计**：按需使用，每个功能都是独立模块，可单独引入
+- **多平台支持**：一套代码部署到 Web、微信小游戏等多个平台
+
+## 获取引擎
+
+### 通过 npm 安装
+
+```bash
+npm install @esengine/ecs-framework
+```
+
+### 从源码构建
+
+详见 [从源码构建](#从源码构建) 章节。
+
+### 编辑器下载
+
+预编译的编辑器可在 [Releases](https://github.com/esengine/ecs-framework/releases) 页面下载，支持 Windows 和 macOS。
+
+## 快速开始
+
+```typescript
+import {
+ Core, Scene, Entity, Component, EntitySystem,
+ Matcher, Time, ECSComponent, ECSSystem
+} from '@esengine/ecs-framework';
+
+@ECSComponent('Position')
+class Position extends Component {
+ x = 0;
+ y = 0;
+}
+
+@ECSComponent('Velocity')
+class Velocity extends Component {
+ dx = 0;
+ dy = 0;
+}
+
+@ECSSystem('Movement')
+class MovementSystem extends EntitySystem {
+ constructor() {
+ super(Matcher.all(Position, Velocity));
+ }
+
+ protected process(entities: readonly Entity[]): void {
+ for (const entity of entities) {
+ const pos = entity.getComponent(Position);
+ const vel = entity.getComponent(Velocity);
+ pos.x += vel.dx * Time.deltaTime;
+ pos.y += vel.dy * Time.deltaTime;
+ }
+ }
+}
+
+Core.create();
+const scene = new Scene();
+scene.addSystem(new MovementSystem());
+
+const player = scene.createEntity('Player');
+player.addComponent(new Position());
+player.addComponent(new Velocity());
+
+Core.setScene(scene);
+```
+
+## 模块
+
+ESEngine 采用模块化组织。每个功能都有运行时模块和可选的编辑器扩展。
+
+### 核心
+
+| 包名 | 描述 |
+|------|------|
+| `@esengine/ecs-framework` | ECS 框架核心，包含实体管理、组件系统和查询 |
+| `@esengine/math` | 向量、矩阵和数学工具 |
+| `@esengine/engine` | Rust/WASM 2D 渲染器 |
+| `@esengine/engine-core` | 引擎模块系统和生命周期管理 |
+
+### 运行时模块
+
+| 包名 | 描述 |
+|------|------|
+| `@esengine/sprite` | 2D 精灵渲染和动画 |
+| `@esengine/tilemap` | Tilemap 渲染，支持动画 |
+| `@esengine/physics-rapier2d` | 基于 Rapier 的 2D 物理模拟 |
+| `@esengine/behavior-tree` | 行为树 AI 系统 |
+| `@esengine/blueprint` | 可视化脚本运行时 |
+| `@esengine/camera` | 相机控制和管理 |
+| `@esengine/audio` | 音频播放 |
+| `@esengine/ui` | UI 组件 |
+| `@esengine/material-system` | 材质和着色器系统 |
+| `@esengine/asset-system` | 资源加载和管理 |
+
+### 编辑器扩展
+
+| 包名 | 描述 |
+|------|------|
+| `@esengine/sprite-editor` | 精灵检视器和工具 |
+| `@esengine/tilemap-editor` | 可视化 Tilemap 编辑器，支持笔刷工具 |
+| `@esengine/physics-rapier2d-editor` | 物理碰撞体可视化和编辑 |
+| `@esengine/behavior-tree-editor` | 可视化行为树编辑器 |
+| `@esengine/blueprint-editor` | 可视化脚本编辑器 |
+| `@esengine/material-editor` | 材质和着色器编辑器 |
+| `@esengine/shader-editor` | 着色器代码编辑器 |
+
+### 平台
+
+| 包名 | 描述 |
+|------|------|
+| `@esengine/platform-common` | 平台抽象接口 |
+| `@esengine/platform-web` | Web 浏览器运行时 |
+| `@esengine/platform-wechat` | 微信小游戏运行时 |
+
+## 编辑器
+
+ESEngine 编辑器是基于 Tauri 和 React 构建的跨平台桌面应用。
+
+### 功能
+
+- 场景层级和实体管理
+- 组件检视器，支持自定义编辑器
+- 资源浏览器，支持拖放
+- Tilemap 编辑器，支持绘制、填充、选择工具
+- 行为树可视化编辑器
+- 蓝图可视化脚本
+- 材质和着色器编辑
+- 内置性能分析器
+- 多语言支持（英文、中文）
+
+### 截图
+
+
+
+## 支持的平台
+
+| 平台 | 运行时 | 编辑器 |
+|------|--------|--------|
+| Web 浏览器 | 支持 | - |
+| Windows | - | 支持 |
+| macOS | - | 支持 |
+| 微信小游戏 | 开发中 | - |
+| Playable 可玩广告 | 计划中 | - |
+| Android | 计划中 | - |
+| iOS | 计划中 | - |
+| Windows 原生 | 计划中 | - |
+| 其他平台 | 计划中 | - |
+
+## 从源码构建
+
+### 前置要求
+
+- Node.js 18 或更高版本
+- pnpm 10 或更高版本
+- Rust 工具链（用于 WASM 渲染器）
+- wasm-pack
+
+### 安装
+
+```bash
+# 克隆仓库
+git clone https://github.com/esengine/ecs-framework.git
+cd ecs-framework
+
+# 安装依赖
+pnpm install
+
+# 构建所有包
+pnpm build
+
+# 构建 WASM 渲染器（可选）
+pnpm build:wasm
+```
+
+### 运行编辑器
+
+```bash
+cd packages/editor-app
+pnpm tauri:dev
+```
+
+### 项目结构
+
+```
+ecs-framework/
+├── packages/ 引擎包（运行时、编辑器、平台）
+├── docs/ 文档源码
+├── examples/ 示例项目
+├── scripts/ 构建工具
+└── thirdparty/ 第三方依赖
+```
+
+## 文档
+
+- [快速入门](https://esengine.github.io/ecs-framework/guide/getting-started.html)
+- [架构指南](https://esengine.github.io/ecs-framework/guide/)
+- [API 参考](https://esengine.github.io/ecs-framework/api/)
+
+## 社区
+
+- [GitHub Issues](https://github.com/esengine/ecs-framework/issues) - Bug 反馈和功能建议
+- [GitHub Discussions](https://github.com/esengine/ecs-framework/discussions) - 问题和想法
+- [QQ 交流群](https://jq.qq.com/?_wv=1027&k=29w1Nud6) - 中文社区
+
+## 贡献
+
+欢迎贡献代码。提交 PR 前请阅读贡献指南。
+
+1. Fork 仓库
+2. 创建功能分支
+3. 修改代码并测试
+4. 提交 PR
+
+## 许可证
+
+ESEngine 基于 [MIT 协议](LICENSE) 开源。
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 966da33d..f9629a79 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,78 +1,84 @@
-/* ============================================
- ESEngine 文档站主题样式
- ============================================ */
-
:root {
color-scheme: dark;
--vp-nav-height: 64px;
+
+ --es-bg-base: #1e1e1e;
+ --es-bg-elevated: #252526;
+ --es-bg-overlay: #2d2d2d;
+ --es-bg-input: #3c3c3c;
+ --es-bg-inset: #181818;
+ --es-bg-hover: #2a2d2e;
+ --es-bg-active: #37373d;
+ --es-bg-sidebar: #262626;
+ --es-bg-card: #2a2a2a;
+ --es-bg-header: #2d2d2d;
+
+ --es-text-primary: #cccccc;
+ --es-text-secondary: #9d9d9d;
+ --es-text-tertiary: #6a6a6a;
+ --es-text-inverse: #ffffff;
+ --es-text-muted: #aaaaaa;
+ --es-text-dim: #6a6a6a;
+
+ --es-font-xs: 11px;
+ --es-font-sm: 12px;
+ --es-font-base: 13px;
+ --es-font-md: 14px;
+ --es-font-lg: 16px;
+
+ --es-border-default: #3a3a3a;
+ --es-border-subtle: #1a1a1a;
+ --es-border-strong: #4a4a4a;
+
+ --es-primary: #3b82f6;
+ --es-primary-hover: #2563eb;
+ --es-success: #4ade80;
+ --es-warning: #f59e0b;
+ --es-error: #ef4444;
+ --es-info: #3b82f6;
+
+ --es-selected: #3d5a80;
+ --es-selected-hover: #4a6a90;
}
body {
- background: #0d0d0d !important;
-}
-
-.VPContent.has-sidebar {
- background: linear-gradient(180deg, #1e3a5f 0%, #152540 30vh, #0d1a2a 50vh, #0d0d0d 70vh) !important;
- background-repeat: no-repeat !important;
+ background: var(--es-bg-base) !important;
}
html,
html.dark {
- --vp-c-bg: #0d0d0d;
- --vp-c-bg-soft: #1a1a1a;
- --vp-c-bg-mute: #1f1f1f;
- --vp-c-bg-alt: #1a1a1a;
- --vp-c-text-1: #e0e0e0;
- --vp-c-text-2: #a0a0a0;
- --vp-c-text-3: #707070;
- --vp-c-divider: #2a2a2a;
- --vp-c-divider-light: #222222;
+ --vp-c-bg: var(--es-bg-base);
+ --vp-c-bg-soft: var(--es-bg-elevated);
+ --vp-c-bg-mute: var(--es-bg-overlay);
+ --vp-c-bg-alt: var(--es-bg-sidebar);
+ --vp-c-text-1: var(--es-text-primary);
+ --vp-c-text-2: var(--es-text-tertiary);
+ --vp-c-text-3: var(--es-text-muted);
+ --vp-c-divider: var(--es-border-default);
+ --vp-c-divider-light: var(--es-border-subtle);
}
html:not(.dark) {
- --vp-c-bg: #0d0d0d !important;
- --vp-c-bg-soft: #1a1a1a !important;
- --vp-c-bg-mute: #1f1f1f !important;
- --vp-c-bg-alt: #1a1a1a !important;
- --vp-c-text-1: #e0e0e0 !important;
- --vp-c-text-2: #a0a0a0 !important;
- --vp-c-text-3: #707070 !important;
+ --vp-c-bg: var(--es-bg-base) !important;
+ --vp-c-bg-soft: var(--es-bg-elevated) !important;
+ --vp-c-bg-mute: var(--es-bg-overlay) !important;
+ --vp-c-bg-alt: var(--es-bg-sidebar) !important;
+ --vp-c-text-1: var(--es-text-primary) !important;
+ --vp-c-text-2: var(--es-text-tertiary) !important;
+ --vp-c-text-3: var(--es-text-muted) !important;
}
-:root {
- --es-bg-base: #0d0d0d;
- --es-bg-sidebar: #1a1a1a;
- --es-bg-card: #1f1f1f;
- --es-bg-hover: #252525;
- --es-bg-selected: #0e4a7c;
-
- --es-text-primary: #e0e0e0;
- --es-text-secondary: #a0a0a0;
- --es-text-tertiary: #707070;
- --es-text-inverse: #ffffff;
-
- --es-border-default: #2a2a2a;
- --es-border-subtle: #222222;
-
- --es-primary: #3b9eff;
- --es-warning: #c9a227;
- --es-info: #3b9eff;
-}
-
-/* ============================================
- 导航栏
- ============================================ */
.VPNav {
- background: #0d0d0d !important;
- border-bottom: 1px solid #2a2a2a !important;
+ background: var(--es-bg-header) !important;
+ border-bottom: 1px solid var(--es-border-subtle) !important;
}
.VPNav .VPNavBar {
- background: #0d0d0d !important;
+ background: var(--es-bg-header) !important;
}
.VPNav .VPNavBar .wrapper {
- background: #0d0d0d !important;
+ background: var(--es-bg-header) !important;
}
.VPNav .VPNavBar::before,
@@ -81,7 +87,7 @@ html:not(.dark) {
}
.VPNavBar {
- background: #0d0d0d !important;
+ background: var(--es-bg-header) !important;
}
.VPNavBar::before {
@@ -89,127 +95,110 @@ html:not(.dark) {
}
.VPNavBarTitle .title {
- color: #ffffff;
- font-weight: 600;
- font-size: 15px;
+ color: var(--es-text-primary);
+ font-weight: 500;
+ font-size: var(--es-font-base);
}
.VPNavBarMenuLink {
- color: #a0a0a0 !important;
- font-size: 14px !important;
+ color: var(--es-text-secondary) !important;
+ font-size: var(--es-font-sm) !important;
font-weight: 400 !important;
}
.VPNavBarMenuLink:hover {
- color: #ffffff !important;
+ color: var(--es-text-primary) !important;
}
.VPNavBarMenuLink.active {
- color: #ffffff !important;
+ color: var(--es-text-primary) !important;
}
.VPNavBarSearch .DocSearch-Button {
- background: #1a1a1a !important;
- border: 1px solid #2a2a2a !important;
- border-radius: 6px;
+ background: var(--es-bg-input) !important;
+ border: 1px solid var(--es-border-default) !important;
+ border-radius: 2px;
+ height: 26px;
}
-/* ============================================
- 侧边栏
- ============================================ */
.VPSidebar {
- background: transparent !important;
- border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
- padding: 16px 0 !important;
- width: 280px !important;
-}
-
-.VPSidebar .nav {
- padding: 0 16px;
+ background: var(--es-bg-sidebar) !important;
+ border-right: 1px solid var(--es-border-subtle) !important;
}
.VPSidebarItem.level-0 > .item {
- padding: 12px 0 6px 0;
+ padding: 8px 0 4px 0;
}
.VPSidebarItem.level-0 > .item > .text {
- font-weight: 400;
- font-size: 13px;
- color: #808080;
+ font-weight: 600;
+ font-size: var(--es-font-xs);
+ color: var(--es-text-secondary);
text-transform: uppercase;
- letter-spacing: 0.5px;
+ letter-spacing: 0.05em;
}
.VPSidebarItem .link {
- padding: 6px 12px;
+ padding: 4px 8px;
margin: 1px 0;
- border-radius: 4px;
- color: #9d9d9d;
- font-size: 14px;
- transition: all 0.15s;
- position: relative;
+ border-radius: 2px;
+ color: var(--es-text-primary);
+ font-size: var(--es-font-sm);
+ transition: all 0.1s ease;
border-left: 2px solid transparent;
}
.VPSidebarItem .link:hover {
- background: rgba(255, 255, 255, 0.05);
- color: #ffffff;
+ background: rgba(255, 255, 255, 0.03);
+ color: var(--es-text-inverse);
}
.VPSidebarItem.is-active > .item > .link {
- background: transparent;
- color: #ffffff;
- border-left: 2px solid #3b9eff;
+ background: var(--es-selected);
+ color: var(--es-text-inverse);
+ border-left: 2px solid var(--es-primary);
+}
+
+.VPSidebarItem.is-active > .item > .link:hover {
+ background: var(--es-selected-hover);
}
.VPSidebarItem.level-1 .link {
- padding-left: 24px;
- font-size: 13px;
+ padding-left: 20px;
+ font-size: var(--es-font-sm);
}
.VPSidebarItem.level-2 .link {
- padding-left: 36px;
- font-size: 13px;
+ padding-left: 32px;
+ font-size: var(--es-font-sm);
}
.VPSidebarItem .caret {
- color: #606060;
+ color: var(--es-text-secondary);
}
.VPSidebarItem .caret:hover {
- color: #9d9d9d;
+ color: var(--es-text-primary);
}
-/* ============================================
- 内容区域
- ============================================ */
.VPContent {
- background: transparent !important;
+ background: var(--es-bg-card) !important;
+}
+
+.VPContent.has-sidebar {
+ background: var(--es-bg-card) !important;
}
.VPDoc {
background: transparent !important;
}
-.VPDoc .container {
- max-width: 100% !important;
-}
-
-.VPDoc .content {
- max-width: 860px !important;
- padding: 80px 60px 48px !important;
-}
-
-.VPNavBar {
- background: #0d0d0d !important;
-}
-
.VPNavBar .content {
- background: #0d0d0d !important;
+ background: var(--es-bg-header) !important;
}
.VPNavBar .content-body {
- background: #0d0d0d !important;
+ background: var(--es-bg-header) !important;
}
.VPNavBar .divider {
@@ -217,16 +206,16 @@ html:not(.dark) {
}
.VPLocalNav {
- background: #0d0d0d !important;
- border-bottom: 1px solid #2a2a2a !important;
+ background: var(--es-bg-header) !important;
+ border-bottom: 1px solid var(--es-border-subtle) !important;
}
.VPNavScreenMenu {
- background: #0d0d0d !important;
+ background: var(--es-bg-base) !important;
}
.VPNavScreen {
- background: #0d0d0d !important;
+ background: var(--es-bg-base) !important;
}
.curtain {
@@ -248,68 +237,71 @@ html:not(.dark) {
}
.vp-doc {
- color: #e0e0e0;
+ color: var(--es-text-primary);
}
.vp-doc h1 {
- font-size: 32px;
- font-weight: 700;
- color: #ffffff;
+ font-size: var(--es-font-lg);
+ font-weight: 600;
+ color: var(--es-text-inverse);
border-bottom: none;
padding-bottom: 0;
- margin-bottom: 32px;
- line-height: 1.2;
+ margin-bottom: 16px;
+ line-height: 1.3;
}
.vp-doc h2 {
- font-size: 24px;
+ font-size: var(--es-font-md);
font-weight: 600;
- color: #ffffff;
+ color: var(--es-text-inverse);
border-bottom: none;
padding-bottom: 0;
- margin-top: 48px;
- margin-bottom: 20px;
+ margin-top: 32px;
+ margin-bottom: 12px;
+ padding: 6px 12px;
+ background: var(--es-bg-header);
+ border-left: 3px solid var(--es-primary);
}
.vp-doc h3 {
- font-size: 18px;
+ font-size: var(--es-font-base);
font-weight: 600;
- color: #ffffff;
- margin-top: 32px;
- margin-bottom: 16px;
+ color: var(--es-text-primary);
+ margin-top: 20px;
+ margin-bottom: 8px;
}
.vp-doc p {
- color: #a0a0a0;
- line-height: 1.8;
- font-size: 15px;
- margin: 20px 0;
+ color: var(--es-text-primary);
+ line-height: 1.7;
+ font-size: var(--es-font-base);
+ margin: 12px 0;
}
.vp-doc ul,
.vp-doc ol {
- padding-left: 24px;
- margin: 20px 0;
+ padding-left: 20px;
+ margin: 12px 0;
}
.vp-doc li {
- line-height: 1.8;
- margin: 8px 0;
- color: #a0a0a0;
- font-size: 15px;
+ line-height: 1.7;
+ margin: 4px 0;
+ color: var(--es-text-primary);
+ font-size: var(--es-font-base);
}
.vp-doc li::marker {
- color: #707070;
+ color: var(--es-text-secondary);
}
.vp-doc strong {
- color: #ffffff;
+ color: var(--es-text-primary);
font-weight: 600;
}
.vp-doc a {
- color: #3b9eff;
+ color: var(--es-primary);
text-decoration: none;
}
@@ -317,12 +309,9 @@ html:not(.dark) {
text-decoration: underline;
}
-/* ============================================
- 右侧大纲
- ============================================ */
.VPDocAside {
- padding-left: 32px;
- border-left: 1px solid #2a2a2a;
+ padding-left: 16px;
+ border-left: 1px solid var(--es-border-subtle);
}
.VPDocAsideOutline {
@@ -336,71 +325,66 @@ html:not(.dark) {
}
.VPDocAsideOutline .outline-title {
- font-size: 14px;
+ font-size: var(--es-font-xs);
font-weight: 600;
- text-transform: none;
- letter-spacing: 0;
- color: #ffffff;
- padding-bottom: 16px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--es-text-secondary);
+ padding-bottom: 8px;
}
.VPDocAsideOutline .outline-link {
- color: #707070;
- font-size: 13px;
- padding: 6px 0;
- line-height: 1.5;
+ color: var(--es-text-secondary);
+ font-size: var(--es-font-xs);
+ padding: 4px 0;
+ line-height: 1.4;
display: block;
}
.VPDocAsideOutline .outline-link:hover {
- color: #a0a0a0;
+ color: var(--es-text-primary);
}
.VPDocAsideOutline .outline-link.active {
- color: #3b9eff;
+ color: var(--es-primary);
}
.VPDocAsideOutline .outline-marker {
display: none;
}
-/* ============================================
- 代码块
- ============================================ */
div[class*='language-'] {
- background: #1a1a1a !important;
- border: 1px solid #2a2a2a;
- border-radius: 8px;
- margin: 20px 0;
+ background: var(--es-bg-inset) !important;
+ border: 1px solid var(--es-border-default);
+ border-radius: 2px;
+ margin: 12px 0;
}
.vp-code-group .tabs {
- background: #1f1f1f;
- border-bottom: 1px solid #2a2a2a;
+ background: var(--es-bg-header);
+ border-bottom: 1px solid var(--es-border-subtle);
}
.vp-doc :not(pre) > code {
- background: #1f1f1f;
- color: #3b9eff;
- padding: 3px 8px;
- border-radius: 4px;
- font-size: 0.9em;
+ background: var(--es-bg-input);
+ color: var(--es-primary);
+ padding: 2px 6px;
+ border-radius: 2px;
+ font-size: var(--es-font-xs);
}
-/* ============================================
- 表格
- ============================================ */
.vp-doc table {
display: table;
width: 100%;
background: transparent;
border: none;
border-collapse: collapse;
- margin: 24px 0;
+ margin: 16px 0;
+ font-size: var(--es-font-sm);
}
.vp-doc tr {
- border-bottom: 1px solid #2a2a2a;
+ border-bottom: 1px solid var(--es-border-subtle);
background: transparent;
}
@@ -408,224 +392,193 @@ div[class*='language-'] {
border-bottom: none;
}
+.vp-doc tr:hover {
+ background: rgba(255, 255, 255, 0.02);
+}
+
.vp-doc th {
- background: #1f1f1f;
+ background: var(--es-bg-header);
font-weight: 600;
- font-size: 14px;
- color: #a0a0a0;
+ font-size: var(--es-font-xs);
+ color: var(--es-text-secondary);
text-align: left;
- padding: 14px 20px;
- border-bottom: 1px solid #2a2a2a;
+ padding: 8px 12px;
+ border-bottom: 1px solid var(--es-border-subtle);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
}
.vp-doc td {
- font-size: 15px;
- color: #e0e0e0;
- padding: 14px 20px;
+ font-size: var(--es-font-sm);
+ color: var(--es-text-primary);
+ padding: 8px 12px;
vertical-align: top;
- line-height: 1.6;
+ line-height: 1.5;
}
.vp-doc td:first-child {
font-weight: 500;
- color: #a0a0a0;
- min-width: 120px;
+ color: var(--es-text-primary);
+ min-width: 100px;
}
-/* ============================================
- 提示框
- ============================================ */
.vp-doc .warning,
.vp-doc .custom-block.warning {
- background: rgba(201, 162, 39, 0.08);
+ background: rgba(245, 158, 11, 0.08);
border: none;
- border-left: 4px solid #c9a227;
- border-radius: 0 8px 8px 0;
- padding: 16px 24px;
- margin: 24px 0;
+ border-left: 3px solid var(--es-warning);
+ border-radius: 0 2px 2px 0;
+ padding: 10px 12px;
+ margin: 16px 0;
}
.vp-doc .warning .custom-block-title,
.vp-doc .custom-block.warning .custom-block-title {
- color: #c9a227;
+ color: var(--es-warning);
font-weight: 600;
- font-size: 15px;
- margin-bottom: 8px;
+ font-size: var(--es-font-xs);
+ margin-bottom: 4px;
}
.vp-doc .warning p {
- color: #a0a0a0;
+ color: var(--es-text-primary);
margin: 0;
+ font-size: var(--es-font-xs);
}
.vp-doc .tip,
.vp-doc .custom-block.tip {
- background: rgba(59, 158, 255, 0.08);
+ background: rgba(59, 130, 246, 0.08);
border: none;
- border-left: 4px solid #3b9eff;
- border-radius: 0 8px 8px 0;
- padding: 16px 24px;
- margin: 24px 0;
+ border-left: 3px solid var(--es-primary);
+ border-radius: 0 2px 2px 0;
+ padding: 10px 12px;
+ margin: 16px 0;
}
.vp-doc .tip .custom-block-title,
.vp-doc .custom-block.tip .custom-block-title {
- color: #3b9eff;
+ color: var(--es-primary);
font-weight: 600;
- font-size: 15px;
- margin-bottom: 8px;
+ font-size: var(--es-font-xs);
+ margin-bottom: 4px;
}
.vp-doc .tip p {
- color: #a0a0a0;
+ color: var(--es-text-primary);
margin: 0;
+ font-size: var(--es-font-xs);
}
.vp-doc .info,
.vp-doc .custom-block.info {
- background: rgba(78, 201, 176, 0.08);
+ background: rgba(74, 222, 128, 0.08);
border: none;
- border-left: 4px solid #4ec9b0;
- border-radius: 0 8px 8px 0;
- padding: 16px 24px;
- margin: 24px 0;
+ border-left: 3px solid var(--es-success);
+ border-radius: 0 2px 2px 0;
+ padding: 10px 12px;
+ margin: 16px 0;
}
.vp-doc .info .custom-block-title,
.vp-doc .custom-block.info .custom-block-title {
- color: #4ec9b0;
+ color: var(--es-success);
font-weight: 600;
- font-size: 15px;
- margin-bottom: 8px;
+ font-size: var(--es-font-xs);
+ margin-bottom: 4px;
}
.vp-doc .danger,
.vp-doc .custom-block.danger {
- background: rgba(244, 135, 113, 0.08);
+ background: rgba(239, 68, 68, 0.08);
border: none;
- border-left: 4px solid #f48771;
- border-radius: 0 8px 8px 0;
- padding: 16px 24px;
- margin: 24px 0;
+ border-left: 3px solid var(--es-error);
+ border-radius: 0 2px 2px 0;
+ padding: 10px 12px;
+ margin: 16px 0;
}
.vp-doc .danger .custom-block-title,
.vp-doc .custom-block.danger .custom-block-title {
- color: #f48771;
+ color: var(--es-error);
font-weight: 600;
- font-size: 15px;
- margin-bottom: 8px;
+ font-size: var(--es-font-xs);
+ margin-bottom: 4px;
}
-/* ============================================
- 卡片样式
- ============================================ */
.vp-doc .card {
- background: #1f1f1f;
- border-radius: 12px;
- padding: 24px;
- margin: 24px 0;
+ background: var(--es-bg-sidebar);
+ border: 1px solid var(--es-border-subtle);
+ border-radius: 4px;
+ padding: 12px;
+ margin: 16px 0;
}
.vp-doc .card-title {
- font-size: 18px;
+ font-size: var(--es-font-sm);
font-weight: 600;
- color: #ffffff;
- margin-bottom: 8px;
+ color: var(--es-text-primary);
+ margin-bottom: 6px;
}
.vp-doc .card-description {
- font-size: 14px;
- color: #707070;
- line-height: 1.6;
+ font-size: var(--es-font-xs);
+ color: var(--es-text-muted);
+ line-height: 1.5;
}
-/* ============================================
- 标签样式
- ============================================ */
.vp-doc .tag {
display: inline-block;
- padding: 4px 12px;
+ padding: 2px 8px;
background: transparent;
- border: 1px solid #3a3a3a;
- border-radius: 16px;
- color: #a0a0a0;
- font-size: 13px;
- margin-right: 8px;
- margin-bottom: 8px;
+ border: 1px solid var(--es-border-default);
+ border-radius: 2px;
+ color: var(--es-text-secondary);
+ font-size: var(--es-font-xs);
+ margin-right: 4px;
+ margin-bottom: 4px;
}
-/* ============================================
- 链接行样式
- ============================================ */
-.vp-doc .link-row {
- display: flex;
- align-items: center;
- gap: 12px;
- padding: 12px 0;
- color: #a0a0a0;
- font-size: 15px;
-}
-
-.vp-doc .link-row a {
- color: #3b9eff;
-}
-
-/* ============================================
- 页脚
- ============================================ */
.VPFooter {
- background: #1a1a1a !important;
- border-top: 1px solid #2a2a2a !important;
+ background: var(--es-bg-sidebar) !important;
+ border-top: 1px solid var(--es-border-subtle) !important;
}
-/* ============================================
- 滚动条
- ============================================ */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
- background: transparent;
+ background: var(--es-bg-card);
}
::-webkit-scrollbar-thumb {
- background: #3a3a3a;
+ background: var(--es-border-strong);
border-radius: 4px;
+ border: 2px solid var(--es-bg-card);
}
::-webkit-scrollbar-thumb:hover {
- background: #4a4a4a;
+ background: #5a5a5a;
}
::-webkit-scrollbar-corner {
background: transparent;
}
-/* ============================================
- 首页专用样式
- ============================================ */
.home-container {
- max-width: 1200px;
+ max-width: 1000px;
margin: 0 auto;
- padding: 0 24px;
+ padding: 0 16px;
}
.home-section {
- padding: 48px 0;
+ padding: 32px 0;
}
-/* ============================================
- 响应式
- ============================================ */
@media (max-width: 960px) {
.VPDoc .content {
- padding: 24px !important;
- }
-
- .VPSidebar {
- width: 100% !important;
+ padding: 16px !important;
}
}
