You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/03/23 02:21:48 UTC

[dolphinscheduler-website] branch master updated: [New UI] Update the new UI of dev document (#748)

This is an automated email from the ASF dual-hosted git repository.

zhongjiajie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 9eba490  [New UI] Update the new UI of dev document (#748)
9eba490 is described below

commit 9eba490b6711a4e4183ad21a2382da35957d4a37
Author: QuakeWang <45...@users.noreply.github.com>
AuthorDate: Wed Mar 23 10:21:43 2022 +0800

    [New UI] Update the new UI of dev document (#748)
---
 docs/en-us/dev/user_doc/guide/datasource/hive.md   |  11 +--
 docs/en-us/dev/user_doc/guide/datasource/mysql.md  |   4 +-
 .../dev/user_doc/guide/datasource/postgresql.md    |   4 +-
 docs/en-us/dev/user_doc/guide/datasource/spark.md  |   4 +-
 docs/en-us/dev/user_doc/guide/homepage.md          |   4 +-
 docs/en-us/dev/user_doc/guide/monitor.md           |  27 ++-----
 .../dev/user_doc/guide/project/project-list.md     |   9 +--
 docs/en-us/dev/user_doc/guide/resource.md          |  40 +++-------
 docs/en-us/dev/user_doc/guide/security.md          |  29 +++-----
 docs/en-us/dev/user_doc/guide/start/quick-start.md |  48 +++++-------
 docs/zh-cn/dev/user_doc/guide/datasource/hive.md   |  29 +++-----
 docs/zh-cn/dev/user_doc/guide/datasource/mysql.md  |  20 +++--
 .../dev/user_doc/guide/datasource/postgresql.md    |  20 +++--
 docs/zh-cn/dev/user_doc/guide/datasource/spark.md  |   6 +-
 docs/zh-cn/dev/user_doc/guide/homepage.md          |   4 +-
 docs/zh-cn/dev/user_doc/guide/monitor.md           |  45 ++++-------
 .../dev/user_doc/guide/project/project-list.md     |   8 +-
 docs/zh-cn/dev/user_doc/guide/resource.md          |  60 +++++----------
 docs/zh-cn/dev/user_doc/guide/security.md          |  82 +++++++++------------
 docs/zh-cn/dev/user_doc/guide/start/docker.md      |   4 +-
 docs/zh-cn/dev/user_doc/guide/start/quick-start.md |  66 ++++++++---------
 img/new_ui/dev/datasource/hive.png                 | Bin 0 -> 82758 bytes
 img/new_ui/dev/datasource/hiveserver2.png          | Bin 0 -> 83554 bytes
 img/new_ui/dev/datasource/mysql.png                | Bin 0 -> 79362 bytes
 img/new_ui/dev/datasource/postgresql.png           | Bin 0 -> 80970 bytes
 img/new_ui/dev/datasource/sparksql.png             | Bin 0 -> 80720 bytes
 img/new_ui/dev/homepage/homepage.png               | Bin 0 -> 161117 bytes
 img/new_ui/dev/monitor/db.png                      | Bin 0 -> 70427 bytes
 img/new_ui/dev/monitor/master.png                  | Bin 0 -> 90785 bytes
 img/new_ui/dev/monitor/statistics.png              | Bin 0 -> 62859 bytes
 img/new_ui/dev/monitor/worker.png                  | Bin 0 -> 90458 bytes
 img/new_ui/dev/project/project-list.png            | Bin 0 -> 129969 bytes
 img/new_ui/dev/project/project-overview.png        | Bin 0 -> 167215 bytes
 img/new_ui/dev/quick-start/create-alarmGroup.png   | Bin 0 -> 104181 bytes
 .../dev/quick-start/create-alarmInstance.png       | Bin 0 -> 123293 bytes
 img/new_ui/dev/quick-start/create-environment.png  | Bin 0 -> 97865 bytes
 img/new_ui/dev/quick-start/create-queue.png        | Bin 0 -> 83582 bytes
 img/new_ui/dev/quick-start/create-tenant.png       | Bin 0 -> 140937 bytes
 img/new_ui/dev/quick-start/create-token.png        | Bin 0 -> 104637 bytes
 img/new_ui/dev/quick-start/create-user.png         | Bin 0 -> 141908 bytes
 img/new_ui/dev/quick-start/create-workerGroup.png  | Bin 0 -> 90985 bytes
 img/new_ui/dev/quick-start/login.png               | Bin 0 -> 53227 bytes
 img/new_ui/dev/quick-start/project.png             | Bin 0 -> 167352 bytes
 img/new_ui/dev/resource/create-file.png            | Bin 0 -> 52868 bytes
 img/new_ui/dev/resource/create-taskGroup.png       | Bin 0 -> 80421 bytes
 img/new_ui/dev/resource/create-udf.png             | Bin 0 -> 80525 bytes
 img/new_ui/dev/resource/file-manage.png            | Bin 0 -> 83523 bytes
 img/new_ui/dev/resource/rename-file.png            | Bin 0 -> 90893 bytes
 img/new_ui/dev/resource/taskGroup.png              | Bin 0 -> 63641 bytes
 img/new_ui/dev/resource/upload-file.png            | Bin 0 -> 98998 bytes
 img/new_ui/dev/resource/use-queue.png              | Bin 0 -> 182654 bytes
 img/new_ui/dev/resource/view-groupQueue.png        | Bin 0 -> 75807 bytes
 img/new_ui/dev/resource/view-queue.png             | Bin 0 -> 394081 bytes
 img/new_ui/dev/security/create-alarmGroup.png      | Bin 0 -> 104181 bytes
 img/new_ui/dev/security/create-alarmInstance.png   | Bin 0 -> 123293 bytes
 img/new_ui/dev/security/create-environment.png     | Bin 0 -> 97865 bytes
 img/new_ui/dev/security/create-queue.png           | Bin 0 -> 83582 bytes
 img/new_ui/dev/security/create-tenant.png          | Bin 0 -> 140937 bytes
 img/new_ui/dev/security/create-token.png           | Bin 0 -> 104637 bytes
 img/new_ui/dev/security/create-user.png            | Bin 0 -> 141908 bytes
 img/new_ui/dev/security/create-workerGroup.png     | Bin 0 -> 90985 bytes
 img/new_ui/dev/security/project-authorize.png      | Bin 0 -> 155410 bytes
 img/new_ui/dev/security/use-environment.png        | Bin 0 -> 181755 bytes
 img/new_ui/dev/security/user-authorize.png         | Bin 0 -> 149260 bytes
 64 files changed, 186 insertions(+), 338 deletions(-)

diff --git a/docs/en-us/dev/user_doc/guide/datasource/hive.md b/docs/en-us/dev/user_doc/guide/datasource/hive.md
index d009729..9eff601 100644
--- a/docs/en-us/dev/user_doc/guide/datasource/hive.md
+++ b/docs/en-us/dev/user_doc/guide/datasource/hive.md
@@ -2,9 +2,7 @@
 
 ## Use HiveServer2
 
- <p align="center">
-    <img src="/img/hive-en.png" width="80%" />
-  </p>
+![hive](/img/new_ui/dev/datasource/hive.png)
 
 - Datasource: select `HIVE`
 - Datasource name: enter the name of the DataSource
@@ -21,9 +19,8 @@
 
 ## Use HiveServer2 HA ZooKeeper
 
- <p align="center">
-    <img src="/img/hive1-en.png" width="80%" />
-  </p>
+![hive-server2](/img/new_ui/dev/datasource/hiveserver2.png)
+
 NOTICE: If Kerberos is disabled, ensure the parameter `hadoop.security.authentication.startup.state` is false, and parameter `java.security.krb5.conf.path` value sets null. 
 If **Kerberos** is enabled, needs to set the following parameters  in `common.properties`: 
 
@@ -39,4 +36,4 @@ login.user.keytab.username=hdfs-mycluster@ESZ.COM
 
 # login user from keytab path
 login.user.keytab.path=/opt/hdfs.headless.keytab
-```
\ No newline at end of file
+```
diff --git a/docs/en-us/dev/user_doc/guide/datasource/mysql.md b/docs/en-us/dev/user_doc/guide/datasource/mysql.md
index daab565..0ac7cda 100644
--- a/docs/en-us/dev/user_doc/guide/datasource/mysql.md
+++ b/docs/en-us/dev/user_doc/guide/datasource/mysql.md
@@ -1,8 +1,6 @@
 # MySQL
 
-<p align="center">
-   <img src="/img/mysql-en.png" width="80%" />
- </p>
+![mysql](/img/new_ui/dev/datasource/mysql.png)
 
 - Datasource: select MYSQL
 - Datasource name: enter the name of the DataSource
diff --git a/docs/en-us/dev/user_doc/guide/datasource/postgresql.md b/docs/en-us/dev/user_doc/guide/datasource/postgresql.md
index 30f327b..fe05169 100644
--- a/docs/en-us/dev/user_doc/guide/datasource/postgresql.md
+++ b/docs/en-us/dev/user_doc/guide/datasource/postgresql.md
@@ -1,8 +1,6 @@
 # PostgreSQL
 
-<p align="center">
-   <img src="/img/postgresql-en.png" width="80%" />
- </p>
+![postgresql](/img/new_ui/dev/datasource/postgresql.png)
 
 - Datasource: select POSTGRESQL
 - Datasource name: enter the name of the DataSource
diff --git a/docs/en-us/dev/user_doc/guide/datasource/spark.md b/docs/en-us/dev/user_doc/guide/datasource/spark.md
index aeb113c..61e2c7d 100644
--- a/docs/en-us/dev/user_doc/guide/datasource/spark.md
+++ b/docs/en-us/dev/user_doc/guide/datasource/spark.md
@@ -1,8 +1,6 @@
 # Spark
 
-<p align="center">
-   <img src="/img/spark-en.png" width="80%" />
- </p>
+![sparksql](/img/new_ui/dev/datasource/sparksql.png)
 
 - Datasource: select Spark
 - Datasource name: enter the name of the DataSource
diff --git a/docs/en-us/dev/user_doc/guide/homepage.md b/docs/en-us/dev/user_doc/guide/homepage.md
index 16353e3..f8db29d 100644
--- a/docs/en-us/dev/user_doc/guide/homepage.md
+++ b/docs/en-us/dev/user_doc/guide/homepage.md
@@ -2,6 +2,4 @@
 
 The home page contains task status statistics, process status statistics, and workflow definition statistics for all projects of the user.
 
-<p align="center">
-<img src="/img/home_en.png" width="80%" />
-</p>
\ No newline at end of file
+![homepage](/img/new_ui/dev/homepage/homepage.png)
diff --git a/docs/en-us/dev/user_doc/guide/monitor.md b/docs/en-us/dev/user_doc/guide/monitor.md
index f113cfa..420a190 100644
--- a/docs/en-us/dev/user_doc/guide/monitor.md
+++ b/docs/en-us/dev/user_doc/guide/monitor.md
@@ -7,41 +7,26 @@
 ## Monitor Master Server
 
 - Mainly related to master information.
-<p align="center">
-   <img src="/img/master-jk-en.png" width="80%" />
- </p>
+
+![master](/img/new_ui/dev/monitor/master.png)
 
 ## Monitor Worker Server
 
 - Mainly related to worker information.
 
-<p align="center">
-   <img src="/img/worker-jk-en.png" width="80%" />
- </p>
-
-## Monitor ZooKeeper
-
-- Mainly related configuration information of each worker and master in ZooKeeper.
-
-<p alignlinux ="center">
-   <img src="/img/zookeeper-monitor-en.png" width="80%" />
- </p>
+![worker](/img/new_ui/dev/monitor/worker.png)
 
 ## Monitor DB
 
 - Mainly the health status of the DB.
 
-<p align="center">
-   <img src="/img/mysql-jk-en.png" width="80%" />
- </p>
+![db](/img/new_ui/dev/monitor/db.png)
 
 ## Statistics Management
 
-<p align="center">
-   <img src="/img/statistics-en.png" width="80%" />
- </p>
+![statistics](/img/new_ui/dev/monitor/statistics.png)
 
 - Number of commands wait to be executed: statistics of the `t_ds_command` table data.
 - The number of failed commands: statistics of the `t_ds_error_command` table data.
 - Number of tasks wait to run: count the data of `task_queue` in the ZooKeeper.
-- Number of tasks wait to be killed: count the data of `task_kill` in the ZooKeeper.
\ No newline at end of file
+- Number of tasks wait to be killed: count the data of `task_kill` in the ZooKeeper.
diff --git a/docs/en-us/dev/user_doc/guide/project/project-list.md b/docs/en-us/dev/user_doc/guide/project/project-list.md
index 6e4255a..38f7191 100644
--- a/docs/en-us/dev/user_doc/guide/project/project-list.md
+++ b/docs/en-us/dev/user_doc/guide/project/project-list.md
@@ -4,9 +4,7 @@
 
 - Click "Project Management" to enter the project management page, click the "Create Project" button, enter the project name, project description, and click "Submit" to create a new project.
 
-  <p align="center">
-      <img src="/img/create_project_en1.png" width="80%" />
-  </p>
+![project-list](/img/new_ui/dev/project/project-list.png)
 
 ## Project Home
 
@@ -16,6 +14,5 @@
 - Process status statistics: within the specified time range, count the number of workflow instances status as submission success, running, ready to pause, pause, ready to stop, stop, failure, success, need fault tolerance, kill and waiting threads
 - Workflow definition statistics: count the workflow definitions created by this user and granted by the administrator
 
-  <p align="center">
-     <img src="/img/project_home_en.png" width="80%" />
-  </p>
+![project-overview](/img/new_ui/dev/project/project-overview.png)
+
diff --git a/docs/en-us/dev/user_doc/guide/resource.md b/docs/en-us/dev/user_doc/guide/resource.md
index f43dabf..c6cf07d 100644
--- a/docs/en-us/dev/user_doc/guide/resource.md
+++ b/docs/en-us/dev/user_doc/guide/resource.md
@@ -42,24 +42,18 @@ conf/common.properties
 
 > It is the management of various resource files, including creating basic `txt/log/sh/conf/py/java` and jar packages and other type files, and can do edit, rename, download, delete and other operations to the files.
 
-  <p align="center">
-   <img src="/img/file-manage-en.png" width="80%" />
- </p>
+![file-manage](/img/new_ui/dev/resource/file-manage.png)
 
 - Create a file
   > The file format supports the following types: txt, log, sh, conf, cfg, py, java, sql, xml, hql, properties.
 
-<p align="center">
-   <img src="/img/file_create_en.png" width="80%" />
- </p>
+![create-file](/img/new_ui/dev/resource/create-file.png)
 
 - upload files
 
 > Upload file: Click the "Upload File" button to upload, drag the file to the upload area, the file name will be automatically completed with the uploaded file name.
 
-<p align="center">
-   <img src="/img/file-upload-en.png" width="80%" />
- </p>
+![upload-file](/img/new_ui/dev/resource/upload-file.png)
 
 - File View
 
@@ -75,9 +69,7 @@ conf/common.properties
 
 - File rename
 
-<p align="center">
-   <img src="/img/file_rename_en.png" width="80%" />
- </p>
+![rename-file](/img/new_ui/dev/resource/rename-file.png)
 
 - delete
   > File list -> Click the "Delete" button to delete the specified file.
@@ -112,9 +104,7 @@ conf/common.properties
 - Package name Class name: enter the full path of the UDF function.
 - UDF resource: set the resource file corresponding to the created UDF function.
 
-<p align="center">
-   <img src="/img/udf_edit_en.png" width="80%" />
- </p>
+![create-udf](/img/new_ui/dev/resource/create-udf.png)
  
 ## Task Group Settings
 
@@ -124,15 +114,11 @@ The task group is mainly used to control the concurrency of task instances and i
 
 #### Create Task Group 
 
-<p align="center">
-    <img src="/img/task_group_manage_eng.png" width="80%" />
-</p>
+![create-taskGroup](/img/new_ui/dev/resource/create-taskGroup.png)
 
 The user clicks [Resources] - [Task Group Management] - [Task Group option] - [Create Task Group] 
 
-<p align="center">
-<img src="/img/task_group_create_eng.png" width="80%" />
-</p> 
+![create-taskGroup](/img/new_ui/dev/resource/create-taskGroup.png) 
 
 You need to enter the information inside the picture:
 
@@ -144,23 +130,17 @@ You need to enter the information inside the picture:
 
 #### View Task Group Queue 
 
-<p align="center">
-    <img src="/img/task_group_conf_eng.png" width="80%" />
-</p>
+![view-queue](/img/new_ui/dev/resource/view-queue.png) 
 
 Click the button to view task group usage information:
 
-<p align="center">
-    <img src="/img/task_group_queue_list_eng.png" width="80%" />
-</p>
+![view-queue](/img/new_ui/dev/resource/view-groupQueue.png) 
 
 #### Use of Task Groups 
 
 **Note**: The usage of task groups is applicable to tasks executed by workers, such as [switch] nodes, [condition] nodes, [sub_process] and other node types executed by the master are not controlled by the task group. Let's take the shell node as an example: 
 
-<p align="center">
-    <img src="/img/task_group_use_eng.png" width="80%" />
-</p>        
+![use-queue](/img/new_ui/dev/resource/use-queue.png)                 
 
 Regarding the configuration of the task group, all you need to do is to configure these parts in the red box:
 
diff --git a/docs/en-us/dev/user_doc/guide/security.md b/docs/en-us/dev/user_doc/guide/security.md
index 52004a5..44e2cf4 100644
--- a/docs/en-us/dev/user_doc/guide/security.md
+++ b/docs/en-us/dev/user_doc/guide/security.md
@@ -7,9 +7,8 @@
 
 - Configure `queue` parameter to execute programs such as Spark and MapReduce.
 - The administrator enters the `Security Center->Queue Management` page and clicks the "Create Queue" button to create a new queue.
-<p align="center">
-   <img src="/img/create-queue-en.png" width="80%" />
- </p>
+
+![create-queue](/img/new_ui/dev/security/create-queue.png)
 
 ## Add Tenant
 
@@ -17,9 +16,7 @@
 - Tenant Code: **Tenant Code is the only user on Linux and cannot be repeated**
 - The administrator enters the `Security Center->Tenant Management` page and clicks the `Create Tenant` button to create a tenant.
 
- <p align="center">
-    <img src="/img/addtenant-en.png" width="80%" />
-  </p>
+![create-tenant](/img/new_ui/dev/security/create-tenant.png)
 
 ## Create Normal User
 
@@ -30,9 +27,8 @@
   - **Note**: If the user switches tenants, all resources under the tenant to which the user belongs will be copied to the new tenant that is switched.
 
 - The administrator enters the `Security Center -> User Management` page and clicks the `Create User` button to create a user.
-<p align="center">
-   <img src="/img/user-en.png" width="80%" />
- </p>
+
+![create-user](/img/new_ui/dev/security/create-user.png)
 
 > **Edit user information**
 
@@ -50,8 +46,7 @@
 
 * The administrator enters the `Security Center -> Alarm Group Management` page and clicks the `Create Alarm Group` button to create an alarm group.
 
-  <p align="center">
-    <img src="/img/mail-en.png" width="80%" />
+![create-alarmInstance](/img/new_ui/dev/security/create-alarmInstance.png)
 
 ## Token Management
 
@@ -59,9 +54,7 @@
 
 - The administrator enters the `Security Center -> Token Management page`, clicks the `Create Token` button, selects the expiration time and user, clicks the `Generate Token` button, and clicks the `Submit` button, then create the selected user's token successfully.
 
-  <p align="center">
-      <img src="/img/create-token-en.png" width="80%" />
-   </p>
+![create-token](/img/new_ui/dev/security/create-token.png)
 
 - After a normal user logs in, click the user information in the username drop-down box, enter the token management page, select the expiration time, click the `Generate Token` button, and click the `Submit` button, then the user creates a token successfully.
 - Call example:
@@ -149,14 +142,10 @@ worker.groups=default,test
 
 - The environment configuration is equivalent to the configuration in the `dolphinscheduler_env.sh` file.
 
-  <p align="center">
-      <img src="/img/create-environment.png" width="80%" />
-  </p>
+![create-environment](/img/new_ui/dev/security/create-environment.png)
 
 > Usage environment
 
 - Create a task node in the workflow definition, select the worker group and the environment corresponding to the worker group. When executing the task, the Worker will execute the environment first before executing the task.
 
-    <p align="center">
-        <img src="/img/use-environment.png" width="80%" />
-    </p>
+![use-environment](/img/new_ui/dev/security/use-environment.png)
diff --git a/docs/en-us/dev/user_doc/guide/start/quick-start.md b/docs/en-us/dev/user_doc/guide/start/quick-start.md
index 8ce9bd7..9310f9d 100644
--- a/docs/en-us/dev/user_doc/guide/start/quick-start.md
+++ b/docs/en-us/dev/user_doc/guide/start/quick-start.md
@@ -8,60 +8,46 @@
 
   > Address:http://localhost:12345/dolphinscheduler  Username and password: `admin/dolphinscheduler123`
 
-<p align="center">
-   <img src="/img/login_en.png" width="60%" />
- </p>
+![login](/img/new_ui/dev/quick-start/login.png)
 
 * Create a queue
 
-<p align="center">
-   <img src="/img/create-queue-en.png" width="60%" />
- </p>
+![create-queue](/img/new_ui/dev/quick-start/create-queue.png)
 
 * Create a tenant
 
-<p align="center">
-  <img src="/img/create-tenant-en.png" width="60%" />
-</p>
+![create-tenant](/img/new_ui/dev/quick-start/create-tenant.png)
 
-* Creating Ordinary Users
-<p align="center">
-      <img src="/img/create-user-en.png" width="60%" />
- </p>
+* Create Ordinary Users
 
-* Create an alarm group
+![create-user](/img/new_ui/dev/quick-start/create-user.png)
 
- <p align="center">
-    <img src="/img/alarm-group-en.png" width="60%" />
-  </p>
+* Create an alarm instance
+
+![create-alarmInstance](/img/new_ui/dev/quick-start/create-alarmInstance.png)
 
+* Create an alarm group
+
+![create-alarmGroup](/img/new_ui/dev/quick-start/create-alarmGroup.png)
   
 * Create a worker group
-  
-   <p align="center">
-      <img src="/img/worker-group-en.png" width="60%" />
-    </p>
+
+![create-workerGroup](/img/new_ui/dev/quick-start/create-workerGroup.png)
 
  * Create environment
 
-   <p align="center">
-    <img src="/img/create-environment.png" width="60%" />
-   </p>
+![create-environment](/img/new_ui/dev/quick-start/create-environment.png)
     
 * Create a token
   
-<p align="center">
-  <img src="/img/token-en.png" width="60%" />
-</p>
+![create-token](/img/new_ui/dev/quick-start/create-token.png)
      
-  
 * Login with regular users
   > Click on the user name in the upper right corner to "exit" and re-use the normal user login.
 
 * `Project Management - > Create Project - > Click on Project Name`
-<p align="center">
-      <img src="/img/create_project_en.png" width="60%" />
- </p>
+
+![project](/img/new_ui/dev/quick-start/project.png)
 
 * `Click Workflow Definition - > Create Workflow Definition - > Online Process Definition`
 
diff --git a/docs/zh-cn/dev/user_doc/guide/datasource/hive.md b/docs/zh-cn/dev/user_doc/guide/datasource/hive.md
index c09e939..c7df335 100644
--- a/docs/zh-cn/dev/user_doc/guide/datasource/hive.md
+++ b/docs/zh-cn/dev/user_doc/guide/datasource/hive.md
@@ -2,32 +2,27 @@
 
 ## 使用HiveServer2
 
- <p align="center">
-    <img src="/img/hive_edit.png" width="80%" />
-  </p>
+![hive](/img/new_ui/dev/datasource/hive.png)
 
-- 数据源:选择HIVE
+- 数据源:选择 HIVE
 - 数据源名称:输入数据源的名称
 - 描述:输入数据源的描述
-- IP/主机名:输入连接HIVE的IP
-- 端口:输入连接HIVE的端口
-- 用户名:设置连接HIVE的用户名
-- 密码:设置连接HIVE的密码
-- 数据库名:输入连接HIVE的数据库名称
-- Jdbc连接参数:用于HIVE连接的参数设置,以JSON形式填写
+- IP 主机名:输入连接 HIVE 的 IP
+- 端口:输入连接 HIVE 的端口
+- 用户名:设置连接 HIVE 的用户名
+- 密码:设置连接 HIVE 的密码
+- 数据库名:输入连接 HIVE 的数据库名称
+- Jdbc 连接参数:用于 HIVE 连接的参数设置,以 JSON 形式填写
 
 > 注意:如果您希望在同一个会话中执行多个 HIVE SQL,您可以修改配置文件 `common.properties` 中的配置,设置 `support.hive.oneSession = true`。
 > 这对运行 HIVE SQL 前设置环境变量的场景会很有帮助。参数 `support.hive.oneSession` 默认值为 `false`,多条 SQL 将在不同的会话中运行。
 
-## 使用HiveServer2 HA Zookeeper
+## 使用 HiveServer2 HA Zookeeper
 
- <p align="center">
-    <img src="/img/hive_edit2.png" width="80%" />
-  </p>
+![hive-server2](/img/new_ui/dev/datasource/hiveserver2.png)
 
-
-注意:如果没有开启kerberos,请保证参数 `hadoop.security.authentication.startup.state` 值为 `false`,
-参数 `java.security.krb5.conf.path` 值为空. 开启了**kerberos**,则需要在 `common.properties` 配置以下参数
+注意:如果没有开启 kerberos,请保证参数 `hadoop.security.authentication.startup.state` 值为 `false`,
+参数 `java.security.krb5.conf.path` 值为空. 开启了 **kerberos**,则需要在 `common.properties` 配置以下参数
 
 ```conf
 # whether to startup kerberos
diff --git a/docs/zh-cn/dev/user_doc/guide/datasource/mysql.md b/docs/zh-cn/dev/user_doc/guide/datasource/mysql.md
index 80264e6..0e9ef4a 100644
--- a/docs/zh-cn/dev/user_doc/guide/datasource/mysql.md
+++ b/docs/zh-cn/dev/user_doc/guide/datasource/mysql.md
@@ -1,15 +1,13 @@
-# MySQL数据源
+# MySQL 数据源
 
-<p align="center">
-   <img src="/img/mysql_edit.png" width="80%" />
-</p>
+![mysql](/img/new_ui/dev/datasource/mysql.png)
 
-- 数据源:选择MYSQL
+- 数据源:选择 MYSQL
 - 数据源名称:输入数据源的名称
 - 描述:输入数据源的描述
-- IP主机名:输入连接MySQL的IP
-- 端口:输入连接MySQL的端口
-- 用户名:设置连接MySQL的用户名
-- 密码:设置连接MySQL的密码
-- 数据库名:输入连接MySQL的数据库名称
-- Jdbc连接参数:用于MySQL连接的参数设置,以JSON形式填写
+- IP 主机名:输入连接 MySQL 的 IP
+- 端口:输入连接 MySQL 的端口
+- 用户名:设置连接 MySQL 的用户名
+- 密码:设置连接 MySQL 的密码
+- 数据库名:输入连接 MySQL 的数据库名称
+- Jdbc 连接参数:用于 MySQL 连接的参数设置,以 JSON 形式填写
diff --git a/docs/zh-cn/dev/user_doc/guide/datasource/postgresql.md b/docs/zh-cn/dev/user_doc/guide/datasource/postgresql.md
index 7f4ee95..ec3fd11 100644
--- a/docs/zh-cn/dev/user_doc/guide/datasource/postgresql.md
+++ b/docs/zh-cn/dev/user_doc/guide/datasource/postgresql.md
@@ -1,15 +1,13 @@
-# POSTGRESQL数据源
+# POSTGRESQL 数据源
 
-<p align="center">
-   <img src="/img/postgresql_edit.png" width="80%" />
- </p>
+![postgresql](/img/new_ui/dev/datasource/postgresql.png)
 
-- 数据源:选择POSTGRESQL
+- 数据源:选择 POSTGRESQL
 - 数据源名称:输入数据源的名称
 - 描述:输入数据源的描述
-- IP/主机名:输入连接POSTGRESQL的IP
-- 端口:输入连接POSTGRESQL的端口
-- 用户名:设置连接POSTGRESQL的用户名
-- 密码:设置连接POSTGRESQL的密码
-- 数据库名:输入连接POSTGRESQL的数据库名称
-- Jdbc连接参数:用于POSTGRESQL连接的参数设置,以JSON形式填写
+- IP 主机名:输入连接 POSTGRESQL 的 IP
+- 端口:输入连接 POSTGRESQL 的端口
+- 用户名:设置连接 POSTGRESQL 的用户名
+- 密码:设置连接 POSTGRESQL 的密码
+- 数据库名:输入连接 POSTGRESQL 的数据库名称
+- Jdbc 连接参数:用于 POSTGRESQL 连接的参数设置,以 JSON 形式填写
diff --git a/docs/zh-cn/dev/user_doc/guide/datasource/spark.md b/docs/zh-cn/dev/user_doc/guide/datasource/spark.md
index 5145406..9b97028 100644
--- a/docs/zh-cn/dev/user_doc/guide/datasource/spark.md
+++ b/docs/zh-cn/dev/user_doc/guide/datasource/spark.md
@@ -1,10 +1,8 @@
 # Spark数据源
 
-<p align="center">
-   <img src="/img/spark_datesource.png" width="80%" />
- </p>
+![sparksql](/img/new_ui/dev/datasource/sparksql.png)
 
-- 数据源:选择Spark
+- 数据源:选择 Spark
 - 数据源名称:输入数据源的名称
 - 描述:输入数据源的描述
 - IP/主机名:输入连接Spark的IP
diff --git a/docs/zh-cn/dev/user_doc/guide/homepage.md b/docs/zh-cn/dev/user_doc/guide/homepage.md
index f4f5d44..9d22fd2 100644
--- a/docs/zh-cn/dev/user_doc/guide/homepage.md
+++ b/docs/zh-cn/dev/user_doc/guide/homepage.md
@@ -2,6 +2,4 @@
 
 首页包含用户所有项目的任务状态统计、流程状态统计、工作流定义统计。
 
-<p align="center">
-    <img src="/img/home.png" width="80%" />
-</p>
\ No newline at end of file
+![homepage](/img/new_ui/dev/homepage/homepage.png)
diff --git a/docs/zh-cn/dev/user_doc/guide/monitor.md b/docs/zh-cn/dev/user_doc/guide/monitor.md
index fb11c68..34c15fe 100644
--- a/docs/zh-cn/dev/user_doc/guide/monitor.md
+++ b/docs/zh-cn/dev/user_doc/guide/monitor.md
@@ -4,46 +4,29 @@
 
 - 服务管理主要是对系统中的各个服务的健康状况和基本信息的监控和显示
 
-### master监控
+### Master 监控
 
-- 主要是master的相关信息。
+- 主要是 master 的相关信息。
 
-<p align="center">
-   <img src="/img/master-jk.png" width="80%" />
- </p>
+![master](/img/new_ui/dev/monitor/master.png)
 
-### worker监控
+### Worker 监控
 
-- 主要是worker的相关信息。
+- 主要是 worker 的相关信息。
 
-<p align="center">
-   <img src="/img/worker-jk.png" width="80%" />
- </p>
+![worker](/img/new_ui/dev/monitor/worker.png)
 
-### Zookeeper监控
+### DB 监控
 
-- 主要是zookpeeper中各个worker和master的相关配置信息。
+- 主要是 DB 的健康状况
 
-<p align="center">
-   <img src="/img/zk-jk.png" width="80%" />
- </p>
-
-### DB监控
-
-- 主要是DB的健康状况
-
-<p align="center">
-   <img src="/img/mysql-jk.png" width="80%" />
- </p>
+![db](/img/new_ui/dev/monitor/db.png)
  
 ## 统计管理
 
-<p align="center">
-   <img src="/img/Statistics.png" width="80%" />
- </p>
+![statistics](/img/new_ui/dev/monitor/statistics.png)
  
-- 待执行命令数:统计t_ds_command表的数据
-- 执行失败的命令数:统计t_ds_error_command表的数据
-- 待运行任务数:统计Zookeeper中task_queue的数据
-- 待杀死任务数:统计Zookeeper中task_kill的数据
- 
\ No newline at end of file
+- 待执行命令数:统计 t_ds_command 表的数据
+- 执行失败的命令数:统计 t_ds_error_command 表的数据
+- 待运行任务数:统计 Zookeeper 中 task_queue 的数据
+- 待杀死任务数:统计 Zookeeper 中 task_kill 的数据
diff --git a/docs/zh-cn/dev/user_doc/guide/project/project-list.md b/docs/zh-cn/dev/user_doc/guide/project/project-list.md
index e433d92..e5f8e94 100644
--- a/docs/zh-cn/dev/user_doc/guide/project/project-list.md
+++ b/docs/zh-cn/dev/user_doc/guide/project/project-list.md
@@ -4,9 +4,7 @@
 
 点击"项目管理"进入项目管理页面,点击“创建项目”按钮,输入项目名称,项目描述,点击“提交”,创建新的项目。
 
-<p align="center">
-    <img src="/img/project.png" width="80%" />
-</p>
+![project](/img/new_ui/dev/project/project-list.png)
 
 ## 项目首页
 
@@ -16,6 +14,4 @@
 - **流程状态统计**:在指定时间范围内,统计工作流实例中状态为提交成功、正在运行、准备暂停、暂停、准备停止、停止、失败、成功、需要容错、kill、等待线程的个数
 - **工作流定义统计**:统计用户创建的工作流定义及管理员授予该用户的工作流定义
 
-<p align="center">
-    <img src="/img/project-home.png" width="80%" />
-</p>
\ No newline at end of file
+![project-overview](/img/new_ui/dev/project/project-overview.png)
diff --git a/docs/zh-cn/dev/user_doc/guide/resource.md b/docs/zh-cn/dev/user_doc/guide/resource.md
index 66cee93..60746d3 100644
--- a/docs/zh-cn/dev/user_doc/guide/resource.md
+++ b/docs/zh-cn/dev/user_doc/guide/resource.md
@@ -40,25 +40,20 @@ conf/common.properties
 
 ## 文件管理
 
-> 是对各种资源文件的管理,包括创建基本的txt/log/sh/conf/py/java等文件、上传jar包等各种类型文件,可进行编辑、重命名、下载、删除等操作。
-  <p align="center">
-   <img src="/img/file-manage.png" width="80%" />
- </p>
+> 是对各种资源文件的管理,包括创建基本的 `txt/log/sh/conf/py/java` 等文件、上传jar包等各种类型文件,可进行编辑、重命名、下载、删除等操作。
+
+![file-manage](/img/new_ui/dev/resource/file-manage.png)
 
 * 创建文件
 
   > 文件格式支持以下几种类型:txt、log、sh、conf、cfg、py、java、sql、xml、hql、properties
 
-    <p align="center">
-        <img src="/img/file_create.png" width="80%" />
-    </p>
+![create-file](/img/new_ui/dev/resource/create-file.png)
 
 * 上传文件
   > 上传文件:点击"上传文件"按钮进行上传,将文件拖拽到上传区域,文件名会自动以上传的文件名称补全
 
-    <p align="center">
-        <img src="/img/file_upload.png" width="80%" />
-    </p>
+![upload-file](/img/new_ui/dev/resource/upload-file.png)
 
 * 文件查看
 
@@ -74,9 +69,7 @@ conf/common.properties
 
 * 文件重命名
 
-<p align="center">
-   <img src="/img/file_rename.png" width="80%" />
- </p>
+![rename-file](/img/new_ui/dev/resource/rename-file.png)
 
 * 删除
 
@@ -103,19 +96,16 @@ conf/common.properties
 
 ### 函数管理
 
-* 创建udf函数
+* 创建 UDF 函数
 
-  > 点击“创建UDF函数”,输入udf函数参数,选择udf资源,点击“提交”,创建udf函数。
+  > 点击“创建 UDF 函数”,输入 UDF 函数参数,选择udf资源,点击“提交”,创建udf函数。
   > 目前只支持HIVE的临时UDF函数
 
-- UDF函数名称:输入UDF函数时的名称
+- UDF 函数名称:输入UDF函数时的名称
 - 包名类名:输入UDF函数的全路径  
-- UDF资源:设置创建的UDF对应的资源文件
+- UDF 资源:设置创建的 UDF 对应的资源文件
 
-<p align="center">
-   <img src="/img/udf_edit.png" width="80%" />
- </p>
- 
+![create-udf](/img/new_ui/dev/resource/create-udf.png)
  
  ## 任务组设置
 
@@ -125,15 +115,11 @@ conf/common.properties
 
 #### 新建任务组   
 
-<p align="center">
-    <img src="/img/task_group_manage.png" width="80%" />
-</p>
+![taskGroup](/img/new_ui/dev/resource/taskGroup.png)
 
 用户点击【资源中心】-【任务组管理】-【任务组配置】-新建任务组
 
-<p align="center">
-<img src="/img/task_group_create.png" width="80%" />
-</p> 
+![create-taskGroup](/img/new_ui/dev/resource/create-taskGroup.png) 
 
 您需要输入图片中信息,其中
 
@@ -145,37 +131,31 @@ conf/common.properties
 
 #### 查看任务组队列
 
-<p align="center">
-    <img src="/img/task_group_conf.png" width="80%" />
-</p>
+![view-queue](/img/new_ui/dev/resource/view-queue.png) 
 
 点击按钮查看任务组使用信息
 
-<p align="center">
-    <img src="/img/task_group_queue_list.png" width="80%" />
-</p>
+![view-queue](/img/new_ui/dev/resource/view-groupQueue.png) 
 
 #### 任务组的使用
 
-注:任务组的使用适用于由worker执行的任务,例如【switch】节点、【condition】节点、【sub_process】等由master负责执行的节点类型不受任务组控制。
+注:任务组的使用适用于由 worker 执行的任务,例如【switch】节点、【condition】节点、【sub_process】等由 master 负责执行的节点类型不受任务组控制。
 
-我们以shell节点为例:
+我们以 shell 节点为例:
 
-<p align="center">
-    <img src="/img/task_group_use.png" width="80%" />
-</p>        
+![use-queue](/img/new_ui/dev/resource/use-queue.png)         
 
 关于任务组的配置,您需要做的只需要配置红色框内的部分,其中:
 
 【任务组名称】:任务组配置页面显示的任务组名称,这里只能看到该项目有权限的任务组(新建任务组时选择了该项目),或作用在全局的任务组(新建任务组时没有选择项目)
 
-【组内优先级】:在出现等待资源时,优先级高的任务会最先被master分发给worker执行,该部分数值越大,优先级越高。
+【组内优先级】:在出现等待资源时,优先级高的任务会最先被 master 分发给 worker 执行,该部分数值越大,优先级越高。
 
 ### 任务组的实现逻辑
 
 #### 获取任务组资源:
 
-Master在分发任务时判断该任务是否配置了任务组,如果任务没有配置,则正常抛给worker运行;如果配置了任务组,在抛给worker执行之前检查任务组资源池剩余大小是否满足当前任务运行,如果满足资源池-1,继续运行;如果不满足则退出任务分发,等待其他任务结束唤醒。
+Master 在分发任务时判断该任务是否配置了任务组,如果任务没有配置,则正常抛给 worker 运行;如果配置了任务组,在抛给 worker 执行之前检查任务组资源池剩余大小是否满足当前任务运行,如果满足资源池 -1,继续运行;如果不满足则退出任务分发,等待其他任务结束唤醒。
 
 #### 释放与唤醒:
 
diff --git a/docs/zh-cn/dev/user_doc/guide/security.md b/docs/zh-cn/dev/user_doc/guide/security.md
index 5e5637c..16ff175 100644
--- a/docs/zh-cn/dev/user_doc/guide/security.md
+++ b/docs/zh-cn/dev/user_doc/guide/security.md
@@ -1,25 +1,22 @@
 # 安全中心(权限系统)
 
 * 安全中心只有管理员账户才有权限操作,分别有队列管理、租户管理、用户管理、告警组管理、worker分组管理、令牌管理等功能,在用户管理模块可以对资源、数据源、项目等授权
-* 管理员登录,默认用户名密码:admin/dolphinscheduler123
+* 管理员登录,默认用户名/密码:admin/dolphinscheduler123
 
 ## 创建队列
 
-- 队列是在执行spark、mapreduce等程序,需要用到“队列”参数时使用的。
-- 管理员进入安全中心->队列管理页面,点击“创建队列”按钮,创建队列。
-<p align="center">
-  <img src="/img/create-queue.png" width="80%" />
-</p>
+- 队列是在执行 spark、mapreduce 等程序,需要用到“队列”参数时使用的。
+- 管理员进入安全中心 -> 队列管理页面,点击“创建队列”按钮,创建队列。
+
+![create-queue](/img/new_ui/dev/security/create-queue.png)
 
 ## 添加租户
 
-- 租户对应的是Linux的用户,用于worker提交作业所使用的用户。如果linux没有这个用户,则会导致任务运行失败。你可以通过修改 `worker.properties` 配置文件中参数 `worker.tenant.auto.create=true` 实现当 linux 用户不存在时自动创建该用户。`worker.tenant.auto.create=true` 参数会要求 worker 可以免密运行 `sudo` 命令
-- 租户编码:**租户编码是Linux上的用户,唯一,不能重复**
+- 租户对应的是 Linux 的用户,用于 worker 提交作业所使用的用户。如果 linux 没有这个用户,则会导致任务运行失败。你可以通过修改 `worker.properties` 配置文件中参数 `worker.tenant.auto.create=true` 实现当 linux 用户不存在时自动创建该用户。`worker.tenant.auto.create=true` 参数会要求 worker 可以免密运行 `sudo` 命令
+- 租户编码:**租户编码是 Linux上 的用户,唯一,不能重复**
 - 管理员进入安全中心->租户管理页面,点击“创建租户”按钮,创建租户。
 
- <p align="center">
-    <img src="/img/addtenant.png" width="80%" />
-  </p>
+![create-tenant](/img/new_ui/dev/security/create-tenant.png)
 
 ## 创建普通用户
 
@@ -30,9 +27,8 @@
     * 注意:如果该用户切换了租户,则该用户所在租户下所有资源将复制到切换的新租户下。
 
 - 进入安全中心->用户管理页面,点击“创建用户”按钮,创建用户。        
-<p align="center">
-   <img src="/img/useredit2.png" width="80%" />
- </p>
+
+![create-user](/img/new_ui/dev/security/create-user.png)
   
 ### 编辑用户信息
 
@@ -50,21 +46,16 @@
 * 告警组是在启动时设置的参数,在流程结束以后会将流程的状态和其他信息以邮件形式发送给告警组。
 * 管理员进入安全中心->告警组管理页面,点击“创建告警组”按钮,创建告警组。
 
-  <p align="center">
-    <img src="/img/mail_edit.png" width="80%" />
-  </p>
-
+![create-alarmInstance](/img/new_ui/dev/security/create-alarmInstance.png)
 
 ## 令牌管理
 
 > 由于后端接口有登录检查,令牌管理提供了一种可以通过调用接口的方式对系统进行各种操作。
 - 管理员进入安全中心->令牌管理页面,点击“创建令牌”按钮,选择失效时间与用户,点击"生成令牌"按钮,点击"提交"按钮,则选择用户的token创建成功。
 
-  <p align="center">
-      <img src="/img/creat_token.png" width="80%" />
-   </p>
+![create-token](/img/new_ui/dev/security/create-token.png)
   
-- 普通用户登录后,点击用户名下拉框中的用户信息,进入令牌管理页面,选择失效时间,点击"生成令牌"按钮,点击"提交"按钮,则该用户创建token成功。
+- 普通用户登录后,点击用户名下拉框中的用户信息,进入令牌管理页面,选择失效时间,点击"生成令牌"按钮,点击"提交"按钮,则该用户创建 token 成功。
     
 - 调用示例:
   
@@ -105,62 +96,55 @@
 
 ## 授予权限
 
-* 授予权限包括项目权限,资源权限,数据源权限,UDF函数权限。
-* 管理员可以对普通用户进行非其创建的项目、资源、数据源和UDF函数进行授权。因为项目、资源、数据源和UDF函数授权方式都是一样的,所以以项目授权为例介绍。
+* 授予权限包括项目权限,资源权限,数据源权限,UD F函数权限。
+* 管理员可以对普通用户进行非其创建的项目、资源、数据源和 UDF 函数进行授权。因为项目、资源、数据源和 UDF 函数授权方式都是一样的,所以以项目授权为例介绍。
 * 注意:对于用户自己创建的项目,该用户拥有所有的权限。则项目列表和已选项目列表中不会显示。
  
 - 管理员进入安全中心->用户管理页面,点击需授权用户的“授权”按钮,如下图所示:
-  <p align="center">
-   <img src="/img/auth_user.png" width="80%" />
- </p>
+
+![user-authorize](/img/new_ui/dev/security/user-authorize.png)
 
 - 选择项目,进行项目授权。
 
-<p align="center">
-   <img src="/img/auth_project.png" width="80%" />
- </p>
+![project-authorize](/img/new_ui/dev/security/project-authorize.png)
   
-- 资源、数据源、UDF函数授权同项目授权。
+- 资源、数据源、UDF 函数授权同项目授权。
 
-## Worker分组
+## Worker 分组
 
-每个worker节点都会归属于自己的Worker分组,默认分组为default.
+每个 worker 节点都会归属于自己的 worker 分组,默认分组为 default。
 
-在任务执行时,可以将任务分配给指定worker分组,最终由该组中的worker节点执行该任务.
+在任务执行时,可以将任务分配给指定 worker 分组,最终由该组中的 worker 节点执行该任务。
 
-> 新增/更新 worker分组
+> 新增/更新 worker 分组
 
-- 打开要设置分组的worker节点上的"conf/worker.properties"配置文件. 修改worker.groups参数. 
-- worker.groups参数后面对应的为该worker节点对应的分组名称,默认为default.
-- 如果该worker节点对应多个分组,则以逗号隔开.
+- 打开要设置分组的 worker 节点上的 `conf/worker.properties` 配置文件. 修改 worker.groups 参数. 
+- worker.groups 参数后面对应的为该 worker 节点对应的分组名称,默认为 default。
+- 如果该 worker 节点对应多个分组,则以逗号隔开。
 
 ```conf
 示例: 
 worker.groups=default,test
 ```
 
-- 也可以在运行中修改worker所属的worker分组,如果修改成功,worker就会使用这个新建的分组,忽略`worker.properties`中的配置。修改步骤为"安全中心 -> worker分组管理 -> 点击 '新建worker分组' -> 输入'组名称' -> 选择已有worker -> 点击'提交'"
+- 也可以在运行中修改 worker 所属的 worker 分组,如果修改成功,worker 就会使用这个新建的分组,忽略 `worker.properties` 中的配置。修改步骤为"安全中心 -> worker分组管理 -> 点击 '新建worker分组' -> 输入'组名称' -> 选择已有worker -> 点击'提交'"
 
 ## 环境管理
 
-* 在线配置Worker运行环境,一个Worker可以指定多个环境,每个环境等价于dolphinscheduler_env.sh文件.
+* 在线配置 worker 运行环境,一个 worker 可以指定多个环境,每个环境等价于 dolphinscheduler_env.sh 文件.
 
 * 默认环境为dolphinscheduler_env.sh文件.
 
-* 在任务执行时,可以将任务分配给指定worker分组,根据worker分组选择对应的环境,最终由该组中的worker节点执行环境后执行该任务.
+* 在任务执行时,可以将任务分配给指定 worker 分组,根据 worker 分组选择对应的环境,最终由该组中的 worker 节点执行环境后执行该任务.
 
 > 创建/更新 环境
 
 - 环境配置等价于dolphinscheduler_env.sh文件内配置
 
-  <p align="center">
-      <img src="/img/create-environment.png" width="80%" />
-  </p>
+![create-environment](/img/new_ui/dev/security/create-environment.png)
 
-> 使用 环境
+> 使用环境
 
-- 在工作流定义中创建任务节点选择Worker分组和Worker分组对应的环境,任务执行时Worker会先执行环境在执行任务.
+- 在工作流定义中创建任务节点选择 worker 分组和 worker 分组对应的环境,任务执行时 worker 会先执行环境在执行任务.
 
-    <p align="center">
-        <img src="/img/use-environment.png" width="80%" />
-    </p>
+![use-environment](/img/new_ui/dev/security/use-environment.png)
diff --git a/docs/zh-cn/dev/user_doc/guide/start/docker.md b/docs/zh-cn/dev/user_doc/guide/start/docker.md
index c78b283..85c5319 100644
--- a/docs/zh-cn/dev/user_doc/guide/start/docker.md
+++ b/docs/zh-cn/dev/user_doc/guide/start/docker.md
@@ -56,9 +56,7 @@ $ docker-compose up -d
 
 默认的用户是`admin`,默认的密码是`dolphinscheduler123`
 
-<p align="center">
-  <img src="/img/login.png" width="60%" />
-</p>
+![login](/img/new_ui/dev/quick-start/login.png)
 
 请参考用户手册章节的[快速上手](../start/quick-start.md)查看如何使用DolphinScheduler
 
diff --git a/docs/zh-cn/dev/user_doc/guide/start/quick-start.md b/docs/zh-cn/dev/user_doc/guide/start/quick-start.md
index 5ba3cfc..a40740b 100644
--- a/docs/zh-cn/dev/user_doc/guide/start/quick-start.md
+++ b/docs/zh-cn/dev/user_doc/guide/start/quick-start.md
@@ -4,54 +4,48 @@
 
 
 * 管理员用户登录
-  >地址:http://localhost:12345/dolphinscheduler 用户名密码:admin/dolphinscheduler123
+  >地址:http://localhost:12345/dolphinscheduler 用户名/密码:admin/dolphinscheduler123
 
-<p align="center">
-   <img src="/img/login.png" width="60%" />
- </p>
+![login](/img/new_ui/dev/quick-start/login.png)
 
 * 创建队列
-<p align="center">
-   <img src="/img/create-queue.png" width="60%" />
- </p>
 
-  * 创建租户
-   <p align="center">
-    <img src="/img/addtenant.png" width="60%" />
-  </p>
+![create-queue](/img/new_ui/dev/quick-start/create-queue.png)
 
-  * 创建普通用户
-<p align="center">
-   <img src="/img/useredit2.png" width="60%" />
- </p>
+* 创建租户
 
-  * 创建告警组
- <p align="center">
-    <img src="/img/mail_edit.png" width="60%" />
-  </p>
+![create-tenant](/img/new_ui/dev/quick-start/create-tenant.png)
 
- * 创建Worker分组
- <p align="center">
-    <img src="/img/worker_group.png" width="60%" />
-  </p>
+* 创建普通用户
+
+![create-user](/img/new_ui/dev/quick-start/create-user.png)
+
+* 创建告警组实例
+
+![create-alarmInstance](/img/new_ui/dev/quick-start/create-alarmInstance.png)
+
+* 创建告警组
+
+![create-alarmGroup](/img/new_ui/dev/quick-start/create-alarmGroup.png)
+
+ * 创建 Worker 分组
+
+![create-workerGroup](/img/new_ui/dev/quick-start/create-workerGroup.png)
 
 * 创建环境
- <p align="center">
-    <img src="/img/create-environment.png" width="60%" />
-  </p>
+![create-environment](/img/new_ui/dev/quick-start/create-environment.png)
  
- * 创建token令牌
- <p align="center">
-    <img src="/img/creat_token.png" width="60%" />
-  </p>
+ * 创建 Token 令牌
 
-  * 使用普通用户登录
-  > 点击右上角用户名“退出”,重新使用普通用户登录。
+![create-token](/img/new_ui/dev/quick-start/create-token.png)
 
-  * 项目管理->创建项目->点击项目名称
-<p align="center">
-   <img src="/img/project.png" width="60%" />
- </p>
+
+* 使用普通用户登录
+> 点击右上角用户名“退出”,重新使用普通用户登录。
+
+* 项目管理->创建项目->点击项目名称
+
+![project](/img/new_ui/dev/quick-start/project.png)
 
   * 点击工作流定义->创建工作流定义->上线工作流定义
 
diff --git a/img/new_ui/dev/datasource/hive.png b/img/new_ui/dev/datasource/hive.png
new file mode 100644
index 0000000..e5832cf
Binary files /dev/null and b/img/new_ui/dev/datasource/hive.png differ
diff --git a/img/new_ui/dev/datasource/hiveserver2.png b/img/new_ui/dev/datasource/hiveserver2.png
new file mode 100644
index 0000000..e5aabe3
Binary files /dev/null and b/img/new_ui/dev/datasource/hiveserver2.png differ
diff --git a/img/new_ui/dev/datasource/mysql.png b/img/new_ui/dev/datasource/mysql.png
new file mode 100644
index 0000000..bdb9584
Binary files /dev/null and b/img/new_ui/dev/datasource/mysql.png differ
diff --git a/img/new_ui/dev/datasource/postgresql.png b/img/new_ui/dev/datasource/postgresql.png
new file mode 100644
index 0000000..332a150
Binary files /dev/null and b/img/new_ui/dev/datasource/postgresql.png differ
diff --git a/img/new_ui/dev/datasource/sparksql.png b/img/new_ui/dev/datasource/sparksql.png
new file mode 100644
index 0000000..e00348b
Binary files /dev/null and b/img/new_ui/dev/datasource/sparksql.png differ
diff --git a/img/new_ui/dev/homepage/homepage.png b/img/new_ui/dev/homepage/homepage.png
new file mode 100644
index 0000000..5b852f4
Binary files /dev/null and b/img/new_ui/dev/homepage/homepage.png differ
diff --git a/img/new_ui/dev/monitor/db.png b/img/new_ui/dev/monitor/db.png
new file mode 100644
index 0000000..6bb22c4
Binary files /dev/null and b/img/new_ui/dev/monitor/db.png differ
diff --git a/img/new_ui/dev/monitor/master.png b/img/new_ui/dev/monitor/master.png
new file mode 100644
index 0000000..6505595
Binary files /dev/null and b/img/new_ui/dev/monitor/master.png differ
diff --git a/img/new_ui/dev/monitor/statistics.png b/img/new_ui/dev/monitor/statistics.png
new file mode 100644
index 0000000..a7f4a4a
Binary files /dev/null and b/img/new_ui/dev/monitor/statistics.png differ
diff --git a/img/new_ui/dev/monitor/worker.png b/img/new_ui/dev/monitor/worker.png
new file mode 100644
index 0000000..4a68279
Binary files /dev/null and b/img/new_ui/dev/monitor/worker.png differ
diff --git a/img/new_ui/dev/project/project-list.png b/img/new_ui/dev/project/project-list.png
new file mode 100644
index 0000000..15c7d82
Binary files /dev/null and b/img/new_ui/dev/project/project-list.png differ
diff --git a/img/new_ui/dev/project/project-overview.png b/img/new_ui/dev/project/project-overview.png
new file mode 100644
index 0000000..67c5ee7
Binary files /dev/null and b/img/new_ui/dev/project/project-overview.png differ
diff --git a/img/new_ui/dev/quick-start/create-alarmGroup.png b/img/new_ui/dev/quick-start/create-alarmGroup.png
new file mode 100644
index 0000000..495ede8
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-alarmGroup.png differ
diff --git a/img/new_ui/dev/quick-start/create-alarmInstance.png b/img/new_ui/dev/quick-start/create-alarmInstance.png
new file mode 100644
index 0000000..9caabe5
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-alarmInstance.png differ
diff --git a/img/new_ui/dev/quick-start/create-environment.png b/img/new_ui/dev/quick-start/create-environment.png
new file mode 100644
index 0000000..f578084
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-environment.png differ
diff --git a/img/new_ui/dev/quick-start/create-queue.png b/img/new_ui/dev/quick-start/create-queue.png
new file mode 100644
index 0000000..8fbb5b2
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-queue.png differ
diff --git a/img/new_ui/dev/quick-start/create-tenant.png b/img/new_ui/dev/quick-start/create-tenant.png
new file mode 100644
index 0000000..18aadca
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-tenant.png differ
diff --git a/img/new_ui/dev/quick-start/create-token.png b/img/new_ui/dev/quick-start/create-token.png
new file mode 100644
index 0000000..3c60587
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-token.png differ
diff --git a/img/new_ui/dev/quick-start/create-user.png b/img/new_ui/dev/quick-start/create-user.png
new file mode 100644
index 0000000..c75e84a
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-user.png differ
diff --git a/img/new_ui/dev/quick-start/create-workerGroup.png b/img/new_ui/dev/quick-start/create-workerGroup.png
new file mode 100644
index 0000000..8b58f9d
Binary files /dev/null and b/img/new_ui/dev/quick-start/create-workerGroup.png differ
diff --git a/img/new_ui/dev/quick-start/login.png b/img/new_ui/dev/quick-start/login.png
new file mode 100644
index 0000000..e883d33
Binary files /dev/null and b/img/new_ui/dev/quick-start/login.png differ
diff --git a/img/new_ui/dev/quick-start/project.png b/img/new_ui/dev/quick-start/project.png
new file mode 100644
index 0000000..0d78fe0
Binary files /dev/null and b/img/new_ui/dev/quick-start/project.png differ
diff --git a/img/new_ui/dev/resource/create-file.png b/img/new_ui/dev/resource/create-file.png
new file mode 100644
index 0000000..11cc9dc
Binary files /dev/null and b/img/new_ui/dev/resource/create-file.png differ
diff --git a/img/new_ui/dev/resource/create-taskGroup.png b/img/new_ui/dev/resource/create-taskGroup.png
new file mode 100644
index 0000000..a564f4b
Binary files /dev/null and b/img/new_ui/dev/resource/create-taskGroup.png differ
diff --git a/img/new_ui/dev/resource/create-udf.png b/img/new_ui/dev/resource/create-udf.png
new file mode 100644
index 0000000..f570b7f
Binary files /dev/null and b/img/new_ui/dev/resource/create-udf.png differ
diff --git a/img/new_ui/dev/resource/file-manage.png b/img/new_ui/dev/resource/file-manage.png
new file mode 100644
index 0000000..e51574d
Binary files /dev/null and b/img/new_ui/dev/resource/file-manage.png differ
diff --git a/img/new_ui/dev/resource/rename-file.png b/img/new_ui/dev/resource/rename-file.png
new file mode 100644
index 0000000..b01f4f5
Binary files /dev/null and b/img/new_ui/dev/resource/rename-file.png differ
diff --git a/img/new_ui/dev/resource/taskGroup.png b/img/new_ui/dev/resource/taskGroup.png
new file mode 100644
index 0000000..23d69d4
Binary files /dev/null and b/img/new_ui/dev/resource/taskGroup.png differ
diff --git a/img/new_ui/dev/resource/upload-file.png b/img/new_ui/dev/resource/upload-file.png
new file mode 100644
index 0000000..45ac7c7
Binary files /dev/null and b/img/new_ui/dev/resource/upload-file.png differ
diff --git a/img/new_ui/dev/resource/use-queue.png b/img/new_ui/dev/resource/use-queue.png
new file mode 100644
index 0000000..99ab2a2
Binary files /dev/null and b/img/new_ui/dev/resource/use-queue.png differ
diff --git a/img/new_ui/dev/resource/view-groupQueue.png b/img/new_ui/dev/resource/view-groupQueue.png
new file mode 100644
index 0000000..cf84f65
Binary files /dev/null and b/img/new_ui/dev/resource/view-groupQueue.png differ
diff --git a/img/new_ui/dev/resource/view-queue.png b/img/new_ui/dev/resource/view-queue.png
new file mode 100644
index 0000000..a903519
Binary files /dev/null and b/img/new_ui/dev/resource/view-queue.png differ
diff --git a/img/new_ui/dev/security/create-alarmGroup.png b/img/new_ui/dev/security/create-alarmGroup.png
new file mode 100644
index 0000000..495ede8
Binary files /dev/null and b/img/new_ui/dev/security/create-alarmGroup.png differ
diff --git a/img/new_ui/dev/security/create-alarmInstance.png b/img/new_ui/dev/security/create-alarmInstance.png
new file mode 100644
index 0000000..9caabe5
Binary files /dev/null and b/img/new_ui/dev/security/create-alarmInstance.png differ
diff --git a/img/new_ui/dev/security/create-environment.png b/img/new_ui/dev/security/create-environment.png
new file mode 100644
index 0000000..f578084
Binary files /dev/null and b/img/new_ui/dev/security/create-environment.png differ
diff --git a/img/new_ui/dev/security/create-queue.png b/img/new_ui/dev/security/create-queue.png
new file mode 100644
index 0000000..8fbb5b2
Binary files /dev/null and b/img/new_ui/dev/security/create-queue.png differ
diff --git a/img/new_ui/dev/security/create-tenant.png b/img/new_ui/dev/security/create-tenant.png
new file mode 100644
index 0000000..18aadca
Binary files /dev/null and b/img/new_ui/dev/security/create-tenant.png differ
diff --git a/img/new_ui/dev/security/create-token.png b/img/new_ui/dev/security/create-token.png
new file mode 100644
index 0000000..3c60587
Binary files /dev/null and b/img/new_ui/dev/security/create-token.png differ
diff --git a/img/new_ui/dev/security/create-user.png b/img/new_ui/dev/security/create-user.png
new file mode 100644
index 0000000..c75e84a
Binary files /dev/null and b/img/new_ui/dev/security/create-user.png differ
diff --git a/img/new_ui/dev/security/create-workerGroup.png b/img/new_ui/dev/security/create-workerGroup.png
new file mode 100644
index 0000000..8b58f9d
Binary files /dev/null and b/img/new_ui/dev/security/create-workerGroup.png differ
diff --git a/img/new_ui/dev/security/project-authorize.png b/img/new_ui/dev/security/project-authorize.png
new file mode 100644
index 0000000..c84dbb2
Binary files /dev/null and b/img/new_ui/dev/security/project-authorize.png differ
diff --git a/img/new_ui/dev/security/use-environment.png b/img/new_ui/dev/security/use-environment.png
new file mode 100644
index 0000000..e8aee0b
Binary files /dev/null and b/img/new_ui/dev/security/use-environment.png differ
diff --git a/img/new_ui/dev/security/user-authorize.png b/img/new_ui/dev/security/user-authorize.png
new file mode 100644
index 0000000..daa561d
Binary files /dev/null and b/img/new_ui/dev/security/user-authorize.png differ