Doc update

2026-02-17 22:08:25 +08:00 · 2023-09-24 22:03:06 +08:00
parent ef9b9804cb
commit 1e38731ecb
15 changed files with 242 additions and 37 deletions
--- a/README.md
+++ b/README.md
@@ -25,6 +25,8 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。

 百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。

+> 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。
+
 # 特性

 - [x] 插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积
@@ -183,4 +185,8 @@ const mindMap = new MindMap({
        <img src="./web/src/assets/avatar/敏.jpg" style="width: 50px;height: 50px;" />
        <span>敏</span>
    </span>
+    <span>
+        <img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
+        <span>沐风牧草</span>
+    </span>
 </p>
--- a/web/src/assets/avatar/沐风牧草.jpg
+++ b/web/src/assets/avatar/沐风牧草.jpg
--- a/web/src/pages/Doc/en/client/index.md
+++ b/web/src/pages/Doc/en/client/index.md
@@ -0,0 +1,82 @@
+# Client
+
+This project also provides a client version using [Electron](https://www.electronjs.org/) Development. Supports 'Windows', 'Mac', and 'Linux'.
+
+Currently, the function is relatively simple:
+
+1. Support creating and opening files for editing;
+
+2. Support viewing the list of recently edited files;
+
+3. Support the copying, deletion, and renaming of files;
+
+## Download
+
+> The client version may lag behind the online version. To try new features, please prioritize using the online version.
+
+You can directly download the corresponding client for installation and use, and two download addresses are provided:
+
+Github：[releases](https://github.com/wanglin2/mind-map/releases)。
+
+Baidu cloud disk：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
+
+## Development
+
+If necessary, you can also conduct secondary development.
+
+### clone
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+git checkout electron
+```
+
+### Start serve
+
+Execute in the project root directory:
+
+```bash
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+npm run electron:serve
+```
+
+### Packaging client
+
+You need at least two computers, one 'Windows' and one 'Mac'.
+
+Packaging 'Windows' application:
+
+```bash
+npm run electron:build-win
+```
+
+Packaging 'Mac' application:
+
+```bash
+npm run electron:build-mac
+```
+
+Packaging 'Linux' application:
+
+```bash
+npm run electron:build-linux
+```
+
+Packaging all applications:
+
+```bash
+npm run electron:build-all
+```
+
+Automatically pack according to your computer system:
+
+```bash
+npm run electron:build
+```
--- a/web/src/pages/Doc/en/client/index.vue
+++ b/web/src/pages/Doc/en/client/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <h1>Client</h1>
+<p>This project also provides a client version using <a href="https://www.electronjs.org/">Electron</a> Development. Supports 'Windows', 'Mac', and 'Linux'.</p>
+<p>Currently, the function is relatively simple:</p>
+<ol>
+<li>
+<p>Support creating and opening files for editing;</p>
+</li>
+<li>
+<p>Support viewing the list of recently edited files;</p>
+</li>
+<li>
+<p>Support the copying, deletion, and renaming of files;</p>
+</li>
+</ol>
+<h2>Download</h2>
+<blockquote>
+<p>The client version may lag behind the online version. To try new features, please prioritize using the online version.</p>
+</blockquote>
+<p>You can directly download the corresponding client for installation and use, and two download addresses are provided:</p>
+<p>Github：<a href="https://github.com/wanglin2/mind-map/releases">releases</a>。</p>
+<p>Baidu cloud disk：<a href="https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3">地址</a>。</p>
+<h2>Development</h2>
+<p>If necessary, you can also conduct secondary development.</p>
+<h3>clone</h3>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+git checkout electron
+</code></pre>
+<h3>Start serve</h3>
+<p>Execute in the project root directory:</p>
+<pre class="hljs"><code><span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+npm run electron:serve
+</code></pre>
+<h3>Packaging client</h3>
+<p>You need at least two computers, one 'Windows' and one 'Mac'.</p>
+<p>Packaging 'Windows' application:</p>
+<pre class="hljs"><code>npm run electron:build-win
+</code></pre>
+<p>Packaging 'Mac' application:</p>
+<pre class="hljs"><code>npm run electron:build-mac
+</code></pre>
+<p>Packaging 'Linux' application:</p>
+<pre class="hljs"><code>npm run electron:build-linux
+</code></pre>
+<p>Packaging all applications:</p>
+<pre class="hljs"><code>npm run electron:build-all
+</code></pre>
+<p>Automatically pack according to your computer system:</p>
+<pre class="hljs"><code>npm run electron:build
+</code></pre>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
--- a/web/src/pages/Doc/en/introduction/index.md
+++ b/web/src/pages/Doc/en/introduction/index.md
@@ -206,4 +206,8 @@ Open source is not easy. If this project is helpful to you, you can invite the a
        <img src="../../../../assets/avatar/敏.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>敏</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>沐风牧草</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/en/introduction/index.vue
+++ b/web/src/pages/Doc/en/introduction/index.vue
@@ -8,16 +8,16 @@
 </blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox105" checked="true" /><label for="checkbox105">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
-<li><input type="checkbox" id="checkbox106" checked="true" /><label for="checkbox106">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
-<li><input type="checkbox" id="checkbox107" checked="true" /><label for="checkbox107">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
-<li><input type="checkbox" id="checkbox108" checked="true" /><label for="checkbox108">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
-<li><input type="checkbox" id="checkbox109" checked="true" /><label for="checkbox109">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
-<li><input type="checkbox" id="checkbox110" checked="true" /><label for="checkbox110">Support canvas dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox111" checked="true" /><label for="checkbox111">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
-<li><input type="checkbox" id="checkbox112" checked="true" /><label for="checkbox112">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
-<li><input type="checkbox" id="checkbox113" checked="true" /><label for="checkbox113">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
-<li><input type="checkbox" id="checkbox114" checked="true" /><label for="checkbox114">Provide rich configurations to meet various scenarios and usage habits</label></li>
+<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
+<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
+<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
+<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
+<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Support canvas dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
+<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
+<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Provide rich configurations to meet various scenarios and usage habits</label></li>
 </ul>
 <h2>Repository Catalog Introduction</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -27,16 +27,16 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox115" checked="true" /><label for="checkbox115">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox116" checked="true" /><label for="checkbox116">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox117" checked="true" /><label for="checkbox117">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox118" checked="true" /><label for="checkbox118">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox119" checked="true" /><label for="checkbox119">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@@ -164,6 +164,10 @@ full screen, support mini map</li>
        <img src="../../../../assets/avatar/敏.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>敏</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>沐风牧草</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/en/translate/index.md
+++ b/web/src/pages/Doc/en/translate/index.md
@@ -1,4 +1,12 @@
-# Participate in translation
+# Contribute
+
+## Participate in development
+
+If you want to contribute code, you can 'fork' this project and switch to the 'feature' branch for development. After development and testing, you can submit the 'pr' to the 'feature' branch of this project. When submitting, please try to submit functional files as much as possible. Do not submit unnecessary files.
+
+Before development, it is best to create a new 'issue' to describe the new features you want to add. We can have sufficient communication first, and when submitting a 'pr', please provide a detailed description of the features you are developing.
+
+## Participate in translation

 > Thanks for the first version English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
 >
--- a/web/src/pages/Doc/en/translate/index.vue
+++ b/web/src/pages/Doc/en/translate/index.vue
@@ -1,6 +1,10 @@
 <template>
  <div>
-    <h1>Participate in translation</h1>
+    <h1>Contribute</h1>
+<h2>Participate in development</h2>
+<p>If you want to contribute code, you can 'fork' this project and switch to the 'feature' branch for development. After development and testing, you can submit the 'pr' to the 'feature' branch of this project. When submitting, please try to submit functional files as much as possible. Do not submit unnecessary files.</p>
+<p>Before development, it is best to create a new 'issue' to describe the new features you want to add. We can have sufficient communication first, and when submitting a 'pr', please provide a detailed description of the features you are developing.</p>
+<h2>Participate in translation</h2>
 <blockquote>
 <p>Thanks for the first version English translation provided by <a href="https://github.com/emircanerkul">Emircan ERKUL</a>.</p>
 <p>Due to limited energy, most translations currently use machine translation, so accuracy is inevitably problematic.</p>
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -43,7 +43,7 @@ export default [
      { path: 'richText', title: 'RichText插件' },
      { path: 'select', title: 'Select 插件 ' },
      { path: 'start', title: '开始' },
-      { path: 'translate', title: '参与翻译' },
+      { path: 'translate', title: '贡献' },
      { path: 'utils', title: '内置工具方法' },
      { path: 'view', title: 'View实例' },
      { path: 'watermark', title: 'Watermark插件' },
@@ -84,7 +84,7 @@ export default [
      { path: 'richText', title: 'RichText plugin' },
      { path: 'select', title: 'Select plugin' },
      { path: 'start', title: 'Start' },
-      { path: 'translate', title: 'Participate in translation' },
+      { path: 'translate', title: 'Contribute' },
      { path: 'utils', title: 'Utility Methods' },
      { path: 'view', title: 'View instance' },
      { path: 'watermark', title: 'Watermark plugin' },
@@ -95,7 +95,8 @@ export default [
      { path: 'search', title: 'Search plugin' },
      { path: 'painter', title: 'Painter plugin' },
      { path: 'scrollbar', title: 'Scrollbar plugin' },
-      { path: 'formula', title: 'Formula plugin' }
+      { path: 'formula', title: 'Formula plugin' },
+      { path: 'client', title: 'Client' }
    ]
  }
 ]
--- a/web/src/pages/Doc/zh/client/index.md
+++ b/web/src/pages/Doc/zh/client/index.md
@@ -12,6 +12,8 @@

 ## 下载

+> 客户端版本会落后于在线版本，要尝试新功能请优先使用在线版。
+
 你可以直接下载对应的客户端安装使用，提供了两个下载地址：

 Github：[releases](https://github.com/wanglin2/mind-map/releases)。
--- a/web/src/pages/Doc/zh/client/index.vue
+++ b/web/src/pages/Doc/zh/client/index.vue
@@ -7,6 +7,9 @@
 <p>2.支持查看最近编辑文件列表；</p>
 <p>3.支持文件的复制、删除、重命名；</p>
 <h2>下载</h2>
+<blockquote>
+<p>客户端版本会落后于在线版本，要尝试新功能请优先使用在线版。</p>
+</blockquote>
 <p>你可以直接下载对应的客户端安装使用，提供了两个下载地址：</p>
 <p>Github：<a href="https://github.com/wanglin2/mind-map/releases">releases</a>。</p>
 <p>百度云盘：<a href="https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3">地址</a>。</p>
--- a/web/src/pages/Doc/zh/introduction/index.md
+++ b/web/src/pages/Doc/zh/introduction/index.md
@@ -199,4 +199,8 @@
        <img src="../../../../assets/avatar/敏.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>敏</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>沐风牧草</p>
+    </div>
 </div>
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -8,16 +8,16 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox90" checked="true" /><label for="checkbox90">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
-<li><input type="checkbox" id="checkbox91" checked="true" /><label for="checkbox91">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
-<li><input type="checkbox" id="checkbox92" checked="true" /><label for="checkbox92">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox93" checked="true" /><label for="checkbox93">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
-<li><input type="checkbox" id="checkbox94" checked="true" /><label for="checkbox94">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
-<li><input type="checkbox" id="checkbox95" checked="true" /><label for="checkbox95">支持画布拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox96" checked="true" /><label for="checkbox96">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
-<li><input type="checkbox" id="checkbox97" checked="true" /><label for="checkbox97">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox98" checked="true" /><label for="checkbox98">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
-<li><input type="checkbox" id="checkbox99" checked="true" /><label for="checkbox99">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
+<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">提供丰富的配置，满足各种场景各种使用习惯</label></li>
 </ul>
 <h2>仓库目录介绍</h2>
 <p>1.<code>simple-mind-map</code></p>
@@ -25,11 +25,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox100" checked="true" /><label for="checkbox100">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox101" checked="true" /><label for="checkbox101">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox102" checked="true" /><label for="checkbox102">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox103" checked="true" /><label for="checkbox103">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox104" checked="true" /><label for="checkbox104">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -158,6 +158,10 @@
        <img src="../../../../assets/avatar/敏.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
        <p>敏</p>
    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>沐风牧草</p>
+    </div>
 </div>
  </div>
 </template>
--- a/web/src/pages/Doc/zh/translate/index.md
+++ b/web/src/pages/Doc/zh/translate/index.md
@@ -1,4 +1,12 @@
-# 参与翻译
+# 贡献
+
+## 参与开发
+
+如果你想贡献代码的话可以`fork`本项目，然后切换到`feature`分支下进行开发，开发并测试完后可以提交`pr`到本项目的`feature`分支，提交时请尽量提交功能相关的文件，非必要的文件请勿提交。
+
+在开发前最好通过新建一个`issue`来描述你想要新增的功能，我们可以先进行充分的沟通，在提交`pr`时请详细描述你开发的功能。
+
+## 参与翻译

 > 感谢[Emircan ERKUL](https://github.com/emircanerkul)提供的第一版英文翻译。
 >
--- a/web/src/pages/Doc/zh/translate/index.vue
+++ b/web/src/pages/Doc/zh/translate/index.vue
@@ -1,6 +1,10 @@
 <template>
  <div>
-    <h1>参与翻译</h1>
+    <h1>贡献</h1>
+<h2>参与开发</h2>
+<p>如果你想贡献代码的话可以<code>fork</code>本项目，然后切换到<code>feature</code>分支下进行开发，开发并测试完后可以提交<code>pr</code>到本项目的<code>feature</code>分支，提交时请尽量提交功能相关的文件，非必要的文件请勿提交。</p>
+<p>在开发前最好通过新建一个<code>issue</code>来描述你想要新增的功能，我们可以先进行充分的沟通，在提交<code>pr</code>时请详细描述你开发的功能。</p>
+<h2>参与翻译</h2>
 <blockquote>
 <p>感谢<a href="https://github.com/emircanerkul">Emircan ERKUL</a>提供的第一版英文翻译。</p>
 <p>因为精力有限，目前大部分翻译都是使用机翻的，所以准确度难免有问题。</p>