docs: refine Grafana plugin installation

docs-en/20-third-party/01-grafana.mdx

@@ -3,6 +3,9 @@ sidebar_label: Grafana
 title: Grafana
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 TDengine can be quickly integrated with the open-source data visualization system [Grafana](https://www.grafana.com/) to build a data monitoring and alerting system. The whole process does not require any code development. And you can visualize the contents of the data tables in TDengine on a dashboard.
 
 You can learn more about using the TDengine plugin on [GitHub](https://github.com/taosdata/grafanaplugin/blob/master/README.md).
@@ -25,7 +28,10 @@ TDengine currently supports Grafana versions 7.5 and above. Users can go to the
 
 ## Configuring Grafana
 
-### Option 1: Install with `install.sh`
+### Install Grafana Plugin and Configure Data Source
+
+<Tabs defaultValue="script">
+<TabItem value="script" label="Using Script">
 
 Set the url and authorization environment variables by `export` or a [`.env`(dotenv) file](https://hexdocs.pm/dotenvy/dotenv-file-format.html):
 
@@ -46,7 +52,8 @@ With this script, TDengine data source plugin and the Grafana data source will b
 
 And then, restart Grafana service and open Grafana in web-browser, usually <http://localhost:3000>.
 
-### Option 2: Install Plugin Manually
+</TabItem>
+<TabItem value="manual" label="Install & Configure Manually">
 
 Follow the installation steps in [Grafana](https://grafana.com/grafana/plugins/tdengine-datasource/?tab=installation) with the [``grafana-cli`` command-line tool](https://grafana.com/docs/grafana/latest/administration/cli/) for plugin installation.
 
@@ -98,6 +105,9 @@ Click `Save & Test` to test. You should see a success message if the test worked
 
 ![TDengine Database TDinsight plugin add database 4](./grafana/add_datasource4.webp)
 
+</TabItem>
+</Tabs>
+
 ### Create Dashboard
 
 Go back to the main interface to create a dashboard and click Add Query to enter the panel query page: