[Docs] Add sinppet docs

docs/docs/reference/admin/datasource/home.md

@@ -51,3 +51,28 @@ Click the small window that pops up and click `OK` to delete the data source
 ---
 
 Click the third button in `Action` of a data source in the list to jump to the data source management page.
+
+![img_6.png](img_6.png)
+
+The page is divided into left and right parts. The left side mainly displays the basic information of the data source, including:
+
+- Database list
+- Data table & data column tree list
+
+When we select a database and a data table on the left, the content on the right is displayed as follows
+
+![img_7.png](img_7.png)
+
+Under the data table in the right content, you can select the previous page and next page operations of the current database table data.
+
+On the top right we can use the sorter to reorder the data
+
+![img_8.png](img_8.png)
+
+When we activate the sorter, we click the `Apply` button to apply the current sorter by selecting the data column and sorting rules, and the data below will be changed according to the sorter
+
+!!! danger
+
+    If the current data source does not support the management function, the following page will be displayed
+
+![img_9.png](img_9.png)

docs/docs/reference/admin/snippet/home.md

@@ -0,0 +1,60 @@
+!!! note
+
+    Through the snippet function, you can add support for various custom snippet, and perform subsequent snippet operations, etc.
+
+### Add snippet
+
+---
+
+After entering the system, click the corresponding `Snippet` submenu under the top `Admin` menu to go to the function configuration function
+
+![img.png](img.png)
+
+Click the Add button on the far right of the content area (it's a + icon), After clicking, the Add snippet window will pop up as follows
+
+![img_1.png](img_1.png)
+
+In the window we need to enter the following
+
+|     Field     |                      Description                      |
+|:-------------:|:-----------------------------------------------------:|
+|    `Name`     |     Tokenize the name of the current code snippet     |
+| `Description` |       Description of the current code fragment        |
+|   `Snippet`   | The specific SQL content of the current code fragment |
+
+After filling in the above content, click the `Submit` button at the bottom to save the code snippet
+
+After the snippet is saved, the snippet list will be automatically refreshed, roughly as follows
+
+![img_2.png](img_2.png)
+
+### View snippet content
+
+---
+
+Click the first button in `Action` in a certain data in the list to view the specific code snippet content, it will pop up a dialog box, roughly as follows
+
+![img_3.png](img_3.png)
+
+Click `OK` or `Cancel` to close the dialog
+
+### Modify snippet
+
+---
+
+Click the second button in `Action` in a data in the list to modify the snippet, the operation is similar to `Add snippet` operation
+
+### Quote snippet
+
+---
+
+Click the third button in `Action` of a data in the list to reference the current code fragment, it will jump to the query page, and the fragment content will be directly input into the editor.
+
+### Delete snippet
+
+---
+Click the fourth button in `Action` of a data in the list to delete the snippet, and the following content will pop up after clicking
+
+![img_4.png](img_4.png)
+
+Click the small window that pops up and click OK to delete the snippet

docs/mkdocs.yml

@@ -111,6 +111,7 @@ nav:
       - History: reference/get_started/history.md
       - User Manager:
           - DataSource: reference/admin/datasource/home.md
+          - Snippet: reference/admin/snippet/home.md
           - Functions: reference/admin/functions/home.md
           - Template:
               - Sql: reference/admin/template/sql/home.md