Merge pull request #109 from gitplayer4/en/v2

update format

Author: gitplayer4

docs/installation/master_migrate.md

@@ -43,8 +43,10 @@
 
     (3) Click **Execute Backup** and check the backup result.
 
-    ![img.png](../../img/installation/master_backup.png)
+![img.png](../../img/installation/master_backup.png)
+{: .browser-mockup}
 
+!!! note ""
     (4) Open the slave node to be promoted, and run the promotion command with the installed 1panel-migrator:  
     `1panel-migrator promote`.
 

docs/user_manual/appstore/bitwarden.md

@@ -9,13 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
+{: .browser-mockup}
 
 ## 2. Search for Bitwarden and Install
 
 !!! note ""
     Enter **Bitwarden** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251020154143141](../../img/app/bitwarden.png)
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -30,6 +32,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251020154143141](../../img/app/bitwarden_install.png)
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -40,6 +43,7 @@
     Note: Bitwarden requires an SSL certificate for access. Direct access will result in a loading loop.
 
 ![image-20251021103933402](../../img/app/bitwarden_error.png)
+{: .browser-mockup}
 
 !!! note ""
     Click **Websites** in the left menu, then select **Create Website**.
@@ -50,30 +54,36 @@
     Click **Reverse Proxy**.
 
 ![image-20251021104522152](../../img/app/bitwarden_proxy.png)
+{: .browser-mockup}
 
 !!! note ""
     Enter the domain and port for the reverse proxy, select **Bitwarden** as the application, then click **Confirm**.
 
 ![image-20251021111122113](../../img/app/bitwarden_proxy_info.png)
+{: .browser-mockup}
 
 !!! note ""
     After the website is created successfully, click **Settings**.
 
 ![image-20251021110218133](../../img/app/bitwarden_con.png)
+{: .browser-mockup}
 
 !!! note ""
     Select **HTTPS** on the left and enable HTTPS.
 
 ![image-20251021110452921](../../img/app/bitwarden_https.png)
+{: .browser-mockup}
 
 !!! note ""
     Import your certificate or select an existing one, then click **Save** after configuration.
 
 ![image-20251021110637134](../../img/app/bitwarden_https_save.png)
+{: .browser-mockup}
 
 ## 5. Access the Bitwarden Service
 
 !!! note ""
     Access the domain and port configured for the reverse proxy.
 
 ![image-20251021112440459](../../img/app/bitwarden_view.png)
+{: .browser-mockup}

docs/user_manual/appstore/gitea.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for Gitea and Install
 
 !!! note ""
     Enter **Gitea** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251017152422217](../../img/app/gitea.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -37,7 +37,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251017152504426](../../img/app/gitea_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -48,22 +48,22 @@
     Configure the default access address. Skip this step if already configured.
 
 ![image-20251016172322315](../../img/app/setting_ip.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Return to the App Store and click **Jump** to access the Gitea service.
 
 ![image-20251017152732221](../../img/app/jump_gitea.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Complete the initial configuration and install the service.
 
 ![image-20251017152844763](../../img/app/gitea_info.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     You can use Gitea after installation is finished.
 
 ![image-20251017153119824](../../img/app/gitea_view.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/appstore/home-assistant.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for Home Assistant and Install
 
 !!! note ""
     Enter **Home Assistant** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251021134434601](../../img/app/home-assistant.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -32,7 +32,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251021134531378](../../img/app/home-assistant_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -43,16 +43,16 @@
     After installation, confirm the default access address in 1Panel. Skip this step if already configured.
 
 ![image-20251016172322315](../../img/app/setting_ip.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Return to the App Store and click **Jump** to access the Home Assistant service.
 
 ![image-20251021135110250](../../img/app/home-assistant_jump.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Complete the initial configuration to start using the service.
 
 ![image-20251021135328234](../../img/app/home-assistant_view.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/appstore/jumpserver.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for JumpServer and Install
 
 !!! note ""
     Enter **JumpServer** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251021154330947](../../img/app/jumpserver.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -44,7 +44,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251021160652472](../../img/app/jumpserver_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -55,16 +55,16 @@
     After installation, confirm the default access address in 1Panel. Skip this step if already configured.
 
 ![image-20251016172322315](../../img/app/setting_ip.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Return to the App Store and click **Jump** to access the JumpServer service.
 
 ![image-20251021162640135](../../img/app/jumpserver_jump.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Log in with the default credentials: Username `admin`, Password `ChangeMe`.
 
 ![image-20251021162912802](../../img/app/jumpserver_view.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/appstore/mariadb.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for MariaDB and Install
 
 !!! note ""
     Enter **MariaDB** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251016150309590](../../img/app/mariadb.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -33,7 +33,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251016150632846](../../img/app/mariadb_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -44,7 +44,7 @@
     After installation, click **Databases** in the left menu.
 
 ![image-20251016151214894](../../img/app/mariadb_view.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Select **Create Database** and modify the information as needed:
@@ -57,18 +57,18 @@
     After confirming the configuration is correct, click the **Confirm** button to create.
 
 ![image-20251016151324505](../../img/app/mariadb_creat.png)
-{: .original}
+{: .browser-mockup}
 
 ## 5. Connect to the MariaDB Database
 
 !!! note ""
     Obtain the database configuration information.
 
 ![image-20251016151517183](../../img/app/mariadb_info.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Connect to the database using a local client tool.
 
 ![image-20251016151836387](../../img/app/mariadb_conn.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/appstore/minio.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for MinIO and Install
 
 !!! note ""
     Enter **MinIO** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251016165333807](../../img/app/MinIO.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -38,7 +38,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251016170535427](../../img/app/minio_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -49,28 +49,28 @@
     After installation, obtain the MinIO configuration information. Click **Installed** and select **Parameters**.
 
 ![image-20251016171810134](../../img/app/minio_info.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Obtain the configuration details.
 
 ![image-20251016172011132](../../img/app/minio_passwd.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Configure the default access address.
 
 ![image-20251016172322315](../../img/app/setting_ip.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Return to the App Store and click **Jump** to access the MinIO service.
 
 ![image-20251016172526853](../../img/app/minio_jump.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Enter the **username and password** obtained above to log in to the **MinIO Web Service**.
 
 ![image-20251016173115776](../../img/app/minio_view.png)
-{: .original}
+{: .browser-mockup}

docs/user_manual/appstore/mongodb.md

@@ -9,15 +9,15 @@
     After entering the 1Panel console, click **App Store** in the left menu.
 
 ![image-20251016110510084](../../img/app/appstores.png)
-{: .original}
+{: .browser-mockup}
 
 ## 2. Search for MongoDB and Install
 
 !!! note ""
     Enter **MongoDB** in the search box in the upper right corner, click the application card to go to the details page, then select **Install**.
 
 ![image-20251016155319717](../../img/app/MongoDB.png)
-{: .original}
+{: .browser-mockup}
 
 ## 3. Configure Installation Parameters
 
@@ -33,7 +33,7 @@
     After confirming the settings are correct, click the **Confirm** button to start installation.
 
 ![image-20251016155828329](../../img/app/mongodb_install.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Wait for the installation to complete.
@@ -44,16 +44,16 @@
     After installation, obtain the MongoDB configuration information. Click **Installed** and select **Parameters**.
 
 ![image-20251016162420157](../../img/app/mongodb_info.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Obtain the configuration details.
 
 ![image-20251016162604193](../../img/app/mongodb_passwd.png)
-{: .original}
+{: .browser-mockup}
 
 !!! note ""
     Connect to MongoDB using a local client tool.
 
 ![image-20251016162737239](../../img/app/mongodb_conn.png)
-{: .original}
+{: .browser-mockup}