docs update readme

Author: lsustc

README.en.md

@@ -1,89 +1,89 @@
 # Element Plus Theme Editor
 
-[English](README.en.md) | 简体中文
+English | [简体中文](README.zh.md)
 
-Element Plus 主题变量编辑工具，帮助设计师快速调整和预览 Element Plus 组件的主题样式。
+A theme variable editor for Element Plus component library, helping designers quickly adjust and preview Element Plus component styles.
 
-## 项目背景
+## Project Background
 
-本项目旨在解决设计人员频繁更换配色主题的问题。通过提供可视化的主题编辑工具，让设计师能够自主调整主题变量并导出配置，减少开发人员的工作负担。
+This project aims to solve the problem of frequent theme changes by designers. By providing a visual theme editing tool, designers can independently adjust theme variables and export configurations, reducing the workload of developers.
 
-## 技术栈
+## Tech Stack
 
 - Vue 3
 - TypeScript
 - Tailwind CSS
 - Element Plus
 
-## 功能特性
+## Features
 
-### 1. 主题变量编辑
+### 1. Theme Variable Editing
 
-左侧为变量编辑区，右侧为组件展示区。支持以下类型的变量编辑：
+The interface is divided into two sections: variable editing area on the left and component preview area on the right. Supports editing of the following variable types:
 
-- 颜色变量
-- 尺寸变量
-- 风格变量
-- 其他变量
+- Color variables
+- Size variables
+- Style variables
+- Other variables
 
-![变量编辑展示](docs/imgs/变量编辑.png)
+![Variable Editing Preview](docs/imgs/变量编辑.png)
 
-### 2. 实时预览
+### 2. Real-time Preview
 
-编辑变量后，右侧组件区域会实时应用新的主题样式，方便设计师直观地查看效果。
+After editing variables, the component area on the right will immediately apply the new theme styles, allowing designers to intuitively view the effects.
 
-### 3. 黑白主题切换
+### 3. Light/Dark Theme Toggle
 
-支持在亮色和暗色主题之间快速切换，方便设计师在不同场景下预览效果。
+Supports quick switching between light and dark themes, making it convenient for designers to preview effects in different scenarios.
 
-![主题切换展示](docs/imgs/主题切换.png)
+![Theme Toggle Preview](docs/imgs/主题切换.png)
 
-### 4. 导出配置
+### 4. Export Configuration
 
-支持将编辑后的主题变量导出为 CSS 文件，方便开发人员直接使用。
+Supports exporting edited theme variables as a CSS file, making it easy for developers to use directly.
 
-![导出功能展示](docs/imgs/导出配置.gif)
+![Export Feature Preview](docs/imgs/导出配置.gif)
 
-导出的css变量文件示例：
+The exported CSS variable file example:
 
 ```
 --el-color-primary: #FF8340;
 ```
 
-## 快速开始
+## Quick Start
 
-### 安装依赖
+### Install Dependencies
 
 ```sh
 npm install
 ```
 
-### 启动开发服务器
+### Start Development Server
 
 ```sh
 npm run dev
 ```
 
-访问地址：http://localhost:5173/index.html#/theme/component
+Access URL: http://localhost:5173/index.html#/theme/component
 
-### 构建生产版本
+### Build for Production
 
 ```sh
 npm run build
 ```
 
-## 开发相关
+## Development
 
-### 推荐开发环境
+### Recommended IDE Setup
 
-- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur)
 
-### 代码检查
+### Code Linting
 
 ```sh
 npm run lint
 ```
 
-## 许可证
+## License
 
 [MIT](LICENSE)

README.md

@@ -0,0 +1,89 @@
+# Element Plus Theme Editor
+
+[English](README.md) | 简体中文
+
+Element Plus 主题变量编辑工具，帮助设计师快速调整和预览 Element Plus 组件的主题样式。
+
+## 项目背景
+
+本项目旨在解决设计人员频繁更换配色主题的问题。通过提供可视化的主题编辑工具，让设计师能够自主调整主题变量并导出配置，减少开发人员的工作负担。
+
+## 技术栈
+
+- Vue 3
+- TypeScript
+- Tailwind CSS
+- Element Plus
+
+## 功能特性
+
+### 1. 主题变量编辑
+
+左侧为变量编辑区，右侧为组件展示区。支持以下类型的变量编辑：
+
+- 颜色变量
+- 尺寸变量
+- 风格变量
+- 其他变量
+
+![变量编辑展示](docs/imgs/变量编辑.png)
+
+### 2. 实时预览
+
+编辑变量后，右侧组件区域会实时应用新的主题样式，方便设计师直观地查看效果。
+
+### 3. 黑白主题切换
+
+支持在亮色和暗色主题之间快速切换，方便设计师在不同场景下预览效果。
+
+![主题切换展示](docs/imgs/主题切换.png)
+
+### 4. 导出配置
+
+支持将编辑后的主题变量导出为 CSS 文件，方便开发人员直接使用。
+
+![导出功能展示](docs/imgs/导出配置.gif)
+
+导出的css变量文件示例：
+
+```
+--el-color-primary: #FF8340;
+```
+
+## 快速开始
+
+### 安装依赖
+
+```sh
+npm install
+```
+
+### 启动开发服务器
+
+```sh
+npm run dev
+```
+
+访问地址：http://localhost:5173/index.html#/theme/component
+
+### 构建生产版本
+
+```sh
+npm run build
+```
+
+## 开发相关
+
+### 推荐开发环境
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur)
+
+### 代码检查
+
+```sh
+npm run lint
+```
+
+## 许可证
+
+[MIT](LICENSE)

README.zh.md

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Element Plus Theme Editor</title>
   </head>
   <body>
     <div id="app" class="dark:bg-background-00-dark text-text-01 dark:text-text-01-dark"></div>