diff --git a/test-test/src/main/java/com/test/test/controller/TestDatasourceController.java b/test-test/src/main/java/com/test/test/controller/TestDatasourceController.java
new file mode 100644
index 0000000..0eb56cc
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/controller/TestDatasourceController.java
@@ -0,0 +1,71 @@
+package com.test.test.controller;
+
+import java.util.List;
+
+import com.test.test.domain.qo.IDQO;
+import jakarta.annotation.Resource;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.test.common.annotation.Log;
+import com.test.common.core.controller.BaseController;
+import com.test.common.core.domain.AjaxResult;
+import com.test.common.enums.BusinessType;
+import com.test.test.domain.TestDatasource;
+import com.test.test.service.ITestDatasourceService;
+
+/**
+ * 数据源Controller
+ */
+@RestController
+@RequestMapping("/test/datasource")
+public class TestDatasourceController extends BaseController {
+    @Resource
+    private ITestDatasourceService testDatasourceService;
+
+    /**
+     * 查询数据源列表
+     */
+    @GetMapping("/list")
+    public AjaxResult list() {
+        List<TestDatasource> list = testDatasourceService.selectTestDatasourceList();
+        return success(list);
+    }
+
+    /**
+     * 获取数据源详细信息
+     */
+    @PostMapping(value = "/detail")
+    public AjaxResult getInfo(@RequestBody IDQO qo) {
+        return success(testDatasourceService.selectTestDatasourceById(qo.getId()));
+    }
+
+    /**
+     * 新增数据源
+     */
+    @Log(title = "数据源", businessType = BusinessType.INSERT)
+    @PostMapping("/add")
+    public AjaxResult add(@RequestBody TestDatasource testDatasource) {
+        return success(testDatasourceService.insertTestDatasource(testDatasource));
+    }
+
+    /**
+     * 修改数据源
+     */
+    @Log(title = "数据源", businessType = BusinessType.UPDATE)
+    @PostMapping("/edit")
+    public AjaxResult edit(@RequestBody TestDatasource testDatasource) {
+        return toAjax(testDatasourceService.updateTestDatasource(testDatasource));
+    }
+
+    /**
+     * 删除数据源
+     */
+    @Log(title = "数据源", businessType = BusinessType.DELETE)
+    @PostMapping("/del")
+    public AjaxResult remove(@RequestBody IDQO qo) {
+        return toAjax(testDatasourceService.deleteTestDatasourceById(qo.getId()));
+    }
+}
diff --git a/test-test/src/main/java/com/test/test/controller/TestHttpController.java b/test-test/src/main/java/com/test/test/controller/TestHttpController.java
index a9eade4..eb28457 100644
--- a/test-test/src/main/java/com/test/test/controller/TestHttpController.java
+++ b/test-test/src/main/java/com/test/test/controller/TestHttpController.java
@@ -15,7 +15,6 @@ import com.test.common.core.domain.AjaxResult;
 import com.test.common.enums.BusinessType;
 import com.test.test.domain.TestHttp;
 import com.test.test.service.ITestHttpService;
-import com.test.common.core.page.TableDataInfo;
 
 /**
  * http服务Controller
diff --git a/test-test/src/main/java/com/test/test/domain/TestDatasource.java b/test-test/src/main/java/com/test/test/domain/TestDatasource.java
new file mode 100644
index 0000000..7c1eb1b
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/domain/TestDatasource.java
@@ -0,0 +1,86 @@
+package com.test.test.domain;
+
+import com.test.common.core.domain.BaseEntity;
+import com.test.common.annotation.Excel;
+import lombok.Getter;
+import lombok.Setter;
+import lombok.ToString;
+
+/**
+ * 数据源对象 test_datasource
+ */
+@Getter
+@Setter
+@ToString
+public class TestDatasource extends BaseEntity {
+
+    /**
+     * 数据源id
+     */
+    private Long id;
+
+    /**
+     * 数据源名称
+     */
+    @Excel(name = "数据源名称")
+    private String name;
+
+    /**
+     * 数据源类型(Mysql：1，redis：2，Oracle：3，MongoDB：4，SQL Server：5，PostgreSQL：6)
+     */
+    @Excel(name = "数据源类型(Mysql：1，redis：2，Oracle：3，MongoDB：4，SQL Server：5，PostgreSQL：6)")
+    private Long type;
+
+    /**
+     * 主机
+     */
+    @Excel(name = "主机")
+    private String host;
+
+    /**
+     * 端口
+     */
+    @Excel(name = "端口")
+    private String port;
+
+    /**
+     * 用户名
+     */
+    @Excel(name = "用户名")
+    private String username;
+
+    /**
+     * 密码
+     */
+    @Excel(name = "密码")
+    private String password;
+
+    /**
+     * 库名（Oracle服务名）
+     */
+    @Excel(name = "库名", readConverterExp = "O=racle服务名")
+    private String dbName;
+
+    /**
+     * mongo认证库名
+     */
+    @Excel(name = "mongo认证库名")
+    private String authDb;
+
+    /**
+     * redis集群模式
+     */
+    @Excel(name = "redis集群模式")
+    private Integer cluster;
+
+    /**
+     * redis哨兵模式下输入MasterName
+     */
+    @Excel(name = "redis哨兵模式下输入MasterName")
+    private String masterName;
+
+    /**
+     * 删除标志（0代表存在 2代表删除）
+     */
+    private String delFlag;
+}
diff --git a/test-test/src/main/java/com/test/test/mapper/TestDatasourceMapper.java b/test-test/src/main/java/com/test/test/mapper/TestDatasourceMapper.java
new file mode 100644
index 0000000..3edf8da
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/mapper/TestDatasourceMapper.java
@@ -0,0 +1,40 @@
+package com.test.test.mapper;
+
+import java.util.List;
+
+import com.test.test.domain.TestDatasource;
+
+/**
+ * 数据源Mapper接口
+ */
+public interface TestDatasourceMapper {
+    /**
+     * 查询数据源
+     */
+     TestDatasource selectTestDatasourceById(Long id);
+
+    /**
+     * 查询数据源列表
+     */
+     List<TestDatasource> selectTestDatasourceList();
+
+    /**
+     * 新增数据源
+     */
+     int insertTestDatasource(TestDatasource testDatasource);
+
+    /**
+     * 修改数据源
+     */
+     int updateTestDatasource(TestDatasource testDatasource);
+
+    /**
+     * 删除数据源
+     */
+     int deleteTestDatasourceById(Long id);
+
+    /**
+     * 批量删除数据源
+     */
+     int deleteTestDatasourceByIds(Long[] ids);
+}
diff --git a/test-test/src/main/java/com/test/test/service/ITestDatasourceService.java b/test-test/src/main/java/com/test/test/service/ITestDatasourceService.java
new file mode 100644
index 0000000..17a31c9
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/service/ITestDatasourceService.java
@@ -0,0 +1,40 @@
+package com.test.test.service;
+
+import java.util.List;
+
+import com.test.test.domain.TestDatasource;
+
+/**
+ * 数据源Service接口
+ */
+public interface ITestDatasourceService {
+    /**
+     * 查询数据源
+     */
+    public TestDatasource selectTestDatasourceById(Long id);
+
+    /**
+     * 查询数据源列表
+     */
+    List<TestDatasource> selectTestDatasourceList();
+
+    /**
+     * 新增数据源
+     */
+    TestDatasource insertTestDatasource(TestDatasource testDatasource);
+
+    /**
+     * 修改数据源
+     */
+    int updateTestDatasource(TestDatasource testDatasource);
+
+    /**
+     * 批量删除数据源
+     */
+    int deleteTestDatasourceByIds(Long[] ids);
+
+    /**
+     * 删除数据源信息
+     */
+    int deleteTestDatasourceById(Long id);
+}
diff --git a/test-test/src/main/java/com/test/test/service/impl/TestDatasourceServiceImpl.java b/test-test/src/main/java/com/test/test/service/impl/TestDatasourceServiceImpl.java
new file mode 100644
index 0000000..38fb7e7
--- /dev/null
+++ b/test-test/src/main/java/com/test/test/service/impl/TestDatasourceServiceImpl.java
@@ -0,0 +1,73 @@
+package com.test.test.service.impl;
+
+import java.util.List;
+
+import com.test.common.utils.DateUtils;
+import jakarta.annotation.Resource;
+import org.springframework.stereotype.Service;
+import com.test.test.mapper.TestDatasourceMapper;
+import com.test.test.domain.TestDatasource;
+import com.test.test.service.ITestDatasourceService;
+
+/**
+ * 数据源Service业务层处理
+ */
+@Service
+public class TestDatasourceServiceImpl implements ITestDatasourceService {
+    @Resource
+    private TestDatasourceMapper testDatasourceMapper;
+
+    /**
+     * 查询数据源
+     *
+     * @param id 数据源主键
+     * @return 数据源
+     */
+    @Override
+    public TestDatasource selectTestDatasourceById(Long id) {
+        return testDatasourceMapper.selectTestDatasourceById(id);
+    }
+
+    /**
+     * 查询数据源列表
+     */
+    @Override
+    public List<TestDatasource> selectTestDatasourceList() {
+        return testDatasourceMapper.selectTestDatasourceList();
+    }
+
+    /**
+     * 新增数据源
+     */
+    @Override
+    public TestDatasource insertTestDatasource(TestDatasource testDatasource) {
+        testDatasource.setCreateTime(DateUtils.getNowDate());
+        testDatasourceMapper.insertTestDatasource(testDatasource);
+        return testDatasource;
+    }
+
+    /**
+     * 修改数据源
+     */
+    @Override
+    public int updateTestDatasource(TestDatasource testDatasource) {
+        testDatasource.setUpdateTime(DateUtils.getNowDate());
+        return testDatasourceMapper.updateTestDatasource(testDatasource);
+    }
+
+    /**
+     * 批量删除数据源
+     */
+    @Override
+    public int deleteTestDatasourceByIds(Long[] ids) {
+        return testDatasourceMapper.deleteTestDatasourceByIds(ids);
+    }
+
+    /**
+     * 删除数据源信息
+     */
+    @Override
+    public int deleteTestDatasourceById(Long id) {
+        return testDatasourceMapper.deleteTestDatasourceById(id);
+    }
+}
diff --git a/test-test/src/main/resources/mapper/test/TestDatasourceMapper.xml b/test-test/src/main/resources/mapper/test/TestDatasourceMapper.xml
new file mode 100644
index 0000000..e009d8d
--- /dev/null
+++ b/test-test/src/main/resources/mapper/test/TestDatasourceMapper.xml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.test.test.mapper.TestDatasourceMapper">
+
+    <resultMap type="TestDatasource" id="TestDatasourceResult">
+        <result property="id"    column="id"    />
+        <result property="name"    column="name"    />
+        <result property="type"    column="type"    />
+        <result property="host"    column="host"    />
+        <result property="port"    column="port"    />
+        <result property="username"    column="username"    />
+        <result property="password"    column="password"    />
+        <result property="dbName"    column="db_name"    />
+        <result property="authDb"    column="auth_db"    />
+        <result property="cluster"    column="cluster"    />
+        <result property="masterName"    column="master_name"    />
+        <result property="delFlag"    column="del_flag"    />
+        <result property="createBy"    column="create_by"    />
+        <result property="createTime"    column="create_time"    />
+        <result property="updateBy"    column="update_by"    />
+        <result property="updateTime"    column="update_time"    />
+    </resultMap>
+
+    <sql id="selectTestDatasourceVo">
+        select id, name, type, host, port, username, password, db_name, auth_db, cluster, master_name, del_flag, create_by, create_time, update_by, update_time from test_datasource
+    </sql>
+
+    <select id="selectTestDatasourceList" resultMap="TestDatasourceResult">
+        <include refid="selectTestDatasourceVo"/>
+    </select>
+
+    <select id="selectTestDatasourceById" parameterType="Long" resultMap="TestDatasourceResult">
+        <include refid="selectTestDatasourceVo"/>
+        where id = #{id}
+    </select>
+
+    <insert id="insertTestDatasource" parameterType="TestDatasource" useGeneratedKeys="true" keyProperty="id">
+        insert into test_datasource
+        <trim prefix="(" suffix=")" suffixOverrides=",">
+            <if test="name != null">name,</if>
+            <if test="type != null">type,</if>
+            <if test="host != null">host,</if>
+            <if test="port != null">port,</if>
+            <if test="username != null">username,</if>
+            <if test="password != null">password,</if>
+            <if test="dbName != null">db_name,</if>
+            <if test="authDb != null">auth_db,</if>
+            <if test="cluster != null">cluster,</if>
+            <if test="masterName != null">master_name,</if>
+            <if test="delFlag != null">del_flag,</if>
+            <if test="createBy != null">create_by,</if>
+            <if test="createTime != null">create_time,</if>
+            <if test="updateBy != null">update_by,</if>
+            <if test="updateTime != null">update_time,</if>
+        </trim>
+        <trim prefix="values (" suffix=")" suffixOverrides=",">
+            <if test="name != null">#{name},</if>
+            <if test="type != null">#{type},</if>
+            <if test="host != null">#{host},</if>
+            <if test="port != null">#{port},</if>
+            <if test="username != null">#{username},</if>
+            <if test="password != null">#{password},</if>
+            <if test="dbName != null">#{dbName},</if>
+            <if test="authDb != null">#{authDb},</if>
+            <if test="cluster != null">#{cluster},</if>
+            <if test="masterName != null">#{masterName},</if>
+            <if test="delFlag != null">#{delFlag},</if>
+            <if test="createBy != null">#{createBy},</if>
+            <if test="createTime != null">#{createTime},</if>
+            <if test="updateBy != null">#{updateBy},</if>
+            <if test="updateTime != null">#{updateTime},</if>
+        </trim>
+    </insert>
+
+    <update id="updateTestDatasource" parameterType="TestDatasource">
+        update test_datasource
+        <trim prefix="SET" suffixOverrides=",">
+            <if test="name != null">name = #{name},</if>
+            <if test="type != null">type = #{type},</if>
+            <if test="host != null">host = #{host},</if>
+            <if test="port != null">port = #{port},</if>
+            <if test="username != null">username = #{username},</if>
+            <if test="password != null">password = #{password},</if>
+            <if test="dbName != null">db_name = #{dbName},</if>
+            <if test="authDb != null">auth_db = #{authDb},</if>
+            <if test="cluster != null">cluster = #{cluster},</if>
+            <if test="masterName != null">master_name = #{masterName},</if>
+            <if test="delFlag != null">del_flag = #{delFlag},</if>
+            <if test="createBy != null">create_by = #{createBy},</if>
+            <if test="createTime != null">create_time = #{createTime},</if>
+            <if test="updateBy != null">update_by = #{updateBy},</if>
+            <if test="updateTime != null">update_time = #{updateTime},</if>
+        </trim>
+        where id = #{id}
+    </update>
+
+    <delete id="deleteTestDatasourceById" parameterType="Long">
+        delete from test_datasource where id = #{id}
+    </delete>
+
+    <delete id="deleteTestDatasourceByIds" parameterType="String">
+        delete from test_datasource where id in
+        <foreach item="id" collection="array" open="(" separator="," close=")">
+            #{id}
+        </foreach>
+    </delete>
+</mapper>
\ No newline at end of file
diff --git a/test-ui/src/api/test/database.js b/test-ui/src/api/test/database.js
new file mode 100644
index 0000000..696e32d
--- /dev/null
+++ b/test-ui/src/api/test/database.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 查询数据源列表
+export function listDatasource() {
+  return request({
+    url: '/test/datasource/list',
+    method: 'get'
+  })
+}
+
+// 查询数据源详细
+export function getDatasource(id) {
+  return request({
+    url: '/test/datasource/detail',
+    method: 'post',
+    data: {id}
+  })
+}
+
+// 新增数据源
+export function addDatasource(data) {
+  return request({
+    url: '/test/datasource/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改数据源
+export function updateDatasource(data) {
+  return request({
+    url: '/test/datasource/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除数据源
+export function delDatasource(id) {
+  return request({
+    url: '/test/datasource/del',
+    method: 'post',
+    data: {id}
+  })
+}
diff --git a/test-ui/src/assets/icons/svg/1.svg b/test-ui/src/assets/icons/svg/1.svg
new file mode 100644
index 0000000..f0d7dc1
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/1.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,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
+MDA6MDCJ1KObAAAAAElFTkSuQmCC" />
+</svg>
diff --git a/test-ui/src/assets/icons/svg/2.svg b/test-ui/src/assets/icons/svg/2.svg
new file mode 100644
index 0000000..f639310
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/2.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,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
+OjAwWxcxsgAAAABJRU5ErkJggg==" />
+</svg>
diff --git a/test-ui/src/assets/icons/svg/3.svg b/test-ui/src/assets/icons/svg/3.svg
new file mode 100644
index 0000000..9adf838
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/3.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
+AAB1MAAA6mAAADqYAAAXcJy6UTwAAAFBUExURQAAAP8AAORXROVWQ+RXRORXQ+VXQ+RXQ+VXQuVX
+Q+FVROVYReVYQ+RYQ+RXROVXRORXQ+RYQ+RYRORXQuRYQ+dXQ+dWQuRXQ+RXQ+NXRP9VVeNWQ+RY
+Q+ZWQapVVeRYQ+VYQ99PP+9fP+NXRORYQ/8AAORYROVYQ+VZP+ZUPORXRONWQeVYQ+RYReVXROVX
+Q+VXQ+JUOORQQ+RYQ+RXRORYQ+RXQ+VXQ+VXQ+VYROVYQ/8/P+RYQ+RXQ+VXRORWQ+RXQuRXQ+VX
+QwAAAOVXROVWQ+NWQ+RYROJURuRXQuRYROVXQ+JUOOVWQuRXQv9mM+RYQ+RXQ+VYQ+ZZQ+NWQudX
+Q+NYQuVXQ+RYRORXQ+RXROVMTOVYRORXQ+RYQuVWQuRXQ+VXQ+RXQ78/P+dWReNXQuVXQ+JWQuJU
+Q+VYRP///2kLViUAAABpdFJOUwABQ5bN6e7NPc88dvz8dHjqtqSk6nVB/d5SA1PePgPWxRAQxtMC
+TucUFehKomtsntsSE/ng4fT92Nn5BPXlu0S3cr0Bvm158xJ+/owJjXsFxOaLU0FAVObCy8oKmf6Z
+MvHxowQsSU9QLWGOosQAAAABYktHRGolYpUOAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAAB3RJTUUH
+6QITCQoNTnzkQwAAARVJREFUOMtjYBg+gJGJmYWVDQmwsjMzMSLkOTgzsQBOLpg8N08mVsDLB5Hn
+B/MEBIWE4UBIUAQsKAqSFxMHsiQkpVBdJSUtAxQWl2VgkJMHMhQUMR2upAyUUFFlUANS6hrYvKap
+BZTSZtABkrrYPa8HlNJnMADaZIhdgRHQdfIMxpmZJrjCzzQz04zBPDPTApcCy8xMKwagh82ksMtb
+22Rm2jLYAV3ChF2BPVDKgcERSDo5Y41BF6CUK4OGGZDix6bADSjh7sHA4Amkvbx90KV9fEGR4Qdk
++QeAWIFBwSGhcBASFhQOEo2wBodHZCYOEOUBMS06xhybdGxcNNzCeJ0EdOnEpHgUNyWnpKalI4B2
+hjXDEAIA6Gtt2UiJwB0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjUtMDItMTlUMDk6MTA6MTMrMDA6
+MDDSJZ11AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDI1LTAyLTE5VDA5OjEwOjEzKzAwOjAwo3glyQAA
+ACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyNS0wMi0xOVQwOToxMDoxMyswMDowMPRtBBYAAAAASUVO
+RK5CYII=" />
+</svg>
diff --git a/test-ui/src/assets/icons/svg/4.svg b/test-ui/src/assets/icons/svg/4.svg
new file mode 100644
index 0000000..d3226ad
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/4.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
+AAB1MAAA6mAAADqYAAAXcJy6UTwAAAHmUExURQAAAAAcKgAeKwAfLQAdKgAbKQAeKwAdLAAdKwAc
+KwAdKgAZMwAdKgAeKQAeKAAeKwAZJgAgLgAeKQAeKAAgKQAcKQAcKwAdLQAeKQAeKAASJAAcKwAc
+KgAeKwAeLQAeKgAeKAAeKwAdKwAeKgAeKgAeLQAeKQAeKgAdKgAaKQAeKAAeKwAeKwAbKgAeKwAe
+LQAbKwASNgAdKwAcLQAfLQAeKgAYMAAcKwAbKQAfLAAbKgAgLQAgLgAfLQAfLAAeKwAcKgAfKwAb
+KgAYKQCQSwAdKwARKABlPgDzZgAUKQBMOADeYAD0ZgApLgC/VwD5ZwDtZAAdKgAVKAB+RgD3ZwDu
+ZAAZKgAvMADNWwD2ZgATKABwQgDyZQDvZQAcKwCxVADrZADqYwCwUwAXKQAzMQDvZADgYADaXwD3
+ZgDJWgAwMAAUKABGNgDdXwDUXQDwZQDYXgBANAAVKQDdYADzZQDxZQDJWQC5VgBINgC9VgCoUQDy
+ZgDZXgBBNAAWKQA9MwDVXgD1ZgCyVACaTQDSXAA4MgD6ZwCUTAARJwB6RACgTwCPSgB7RAA1MQDO
+XACXTQCKSQBpQABmUAD5aAAgKwCpUQD/agD/awAsLwC3VQC1VAAqLgAjLQAoLgAPJwAOJwAxMP//
+/6NZ1FYAAAA7dFJOUwAkXZPA3es0nt+dFIn19IgUN8vKNz7gPePjDs7NhzL2Mp4j5eQiXZXB3dzt
+7OafM/cOzz44zBU1JZTemKLb9gAAAAFiS0dEoSnUjjYAAAAJcEhZcwAADsIAAA7CARUoSoAAAAAH
+dElNRQfpAhMJChQqF0yDAAACKElEQVQ4y21T6V/TQBRcSgG5rKBUKCoUpFSteIuQY0NDIdBAl0IL
+LQ0q9cL7wAu1GhTEA5QI8Vb+VAPN243V96H9Zd8kM7PvDUK0ilzF7pLS0hJ3sasI/Vtl28o5XhCt
+EniuvKKsoF1ZVc0LmJbAb/fscPZrajkx35Kk/L/I7dzF+nVe3n5V6umxEZj37qb09Zx9GJZ7e+Uw
+IBpsIb5GeD/S168o/X0RQOzxbQE8VN3AYFRVo4MDVOvezf6+JlsfloeGY4TEhodk+0BsarYAfiAY
+iY+OJQhJjI3GR4CkAqGWVmBIjk+kiFWpifEkcOxvQy6qID2Z0UgiQbTMZJqqCKB2anHqrKXg3HlL
+xXR4yj7k2lEQvpC9YDFcvHRZI1dmroJMwY0OgIdr128oRLs5c4sot+/cBR8H0SEGuDdL7j94mPkL
+EHIAHkVnSebx3BOiPH3mAFCK3PMXOlHmX6pEf7WQYxRUpCTNLxJ17rVOFqfDEhNJbeKlN7qmv31n
+/bxfgjPLJrsoeXlF1z98TKVWlsHl5kW1HAZEJL2qxgzjk7KahoELrW0IdcCwcHJt3TSMz+trMArM
++61pHjkKPnD2y1fD+PY9C8/5cTsWBud+mObPOFtuz9ZGHTtOSfAv0/xNH/hGn720DdRqzjThjjBX
+T9Nzgq39xgZb+zoWjJOnIDhJ24HI1dY4o3W6MHrVVZUF6ezs8DrC6+/8T77PBLqC3aFQd7Ar4Ij/
+HwhF5NH+WJirAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI1LTAyLTE5VDA5OjEwOjIwKzAwOjAwbUKA
+CwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNS0wMi0xOVQwOToxMDoyMCswMDowMBwfOLcAAAAodEVY
+dGRhdGU6dGltZXN0YW1wADIwMjUtMDItMTlUMDk6MTA6MjArMDA6MDBLChloAAAAAElFTkSuQmCC" />
+</svg>
diff --git a/test-ui/src/assets/icons/svg/5.svg b/test-ui/src/assets/icons/svg/5.svg
new file mode 100644
index 0000000..85a4d5e
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/5.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
+AAB1MAAA6mAAADqYAAAXcJy6UTwAAAAtUExURQAAAPJQIvROI328AH+6APZOHvlMH3u8AH26AACm
+8wCm9/+5AACk7wCk8////zYaLMIAAAABdFJOUwBA5thmAAAAAWJLR0QOb70wTwAAAAlwSFlzAAAO
+wgAADsIBFShKgAAAAAd0SU1FB+kCEwkKGs2vYYQAAAAsSURBVCjPYxCEAAVmFwhgGNYCoRCQwN4B
+AQyEwUwIWMC9GwIYzkDAhREhAAA59dSGAqm/4gAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyNS0wMi0x
+OVQwOToxMDoyNiswMDowMA6StTEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjUtMDItMTlUMDk6MTA6
+MjYrMDA6MDB/zw2NAAAAKHRFWHRkYXRlOnRpbWVzdGFtcAAyMDI1LTAyLTE5VDA5OjEwOjI2KzAw
+OjAwKNosUgAAAABJRU5ErkJggg==" />
+</svg>
diff --git a/test-ui/src/assets/icons/svg/6.svg b/test-ui/src/assets/icons/svg/6.svg
new file mode 100644
index 0000000..a4dbd7d
--- /dev/null
+++ b/test-ui/src/assets/icons/svg/6.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">  <image id="image0" width="32" height="32" x="0" y="0"
+    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIGNIUk0AAHomAACAhAAA+gAAAIDo
+AAB1MAAA6mAAADqYAAAXcJy6UTwAAAAkUExURQAAAAAAAD8/P39/f7+/v////7///3+/v39/vz9/
+vz9/f7+//2rYyu0AAAABdFJOUwBA5thmAAAAAWJLR0QF+G/pxwAAAAlwSFlzAAAOwgAADsIBFShK
+gAAAAAd0SU1FB+kCEwkKH73FlQsAAAFNSURBVCjPfZE/T8JQFMUf8gVawMkF0A+gxujgVHimBicS
+irGbhkFwrTZ0M1YjdQWGzqV/bjeNidEv57mvqLB4k7Ynv96envuuEELouEq60BssILdlu1k5kLIv
+B/saQM2cPDvWOPN7RHd7aDCJKPnk25BIamKjA/1EXI8hRbuiFkB+KJCOiAyxydJWgCRRV4GkU4DF
+T0c0dkM8pideugQ37jVRdu54CUzxLvfmDj50/SCqizL+EgUUs1MeLjRR7igAv2yUhz6CIWQeMqBh
+FLQQ3f4FfjQxAI4U8AHiqV/HtDvw8OiUo385PD4HuSjCv7/yAVU9oltHhZ8Zula4Xh32GZz1rK5y
+jZvHOVoym15wZGIreJPeDCC1rBa7lmRDyjac0nu2UGuoNKsYCaP+lZqx/i+AR6ytAN7GYg1gBQ9i
+tUxKL9dAbdDT1kBpGeobWSq3/gtmVIYAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjUtMDItMTlUMDk6
+MTA6MzErMDA6MDAHn4shAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDI1LTAyLTE5VDA5OjEwOjMxKzAw
+OjAwdsIznQAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyNS0wMi0xOVQwOToxMDozMSswMDowMCHX
+EkIAAAAASUVORK5CYII=" />
+</svg>
diff --git a/test-ui/src/views/test/resource/database.vue b/test-ui/src/views/test/resource/database.vue
index c6a1e2f..82197dc 100644
--- a/test-ui/src/views/test/resource/database.vue
+++ b/test-ui/src/views/test/resource/database.vue
@@ -1,69 +1,221 @@
 <template>
-  <div>
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-  </div>
+  <el-container>
+    <el-aside style="width: 180px; padding: 0">
+      <div class="header">
+        <div>Database</div>
+        <div>
+          <el-dropdown trigger="click" @command="handleAdd">
+            <el-button type="primary" icon="el-icon-plus" size="mini" circle/>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="1"><svg-icon icon-class="1"/> Mysql</el-dropdown-item>
+              <el-dropdown-item command="2"><svg-icon icon-class="2"/> Redis</el-dropdown-item>
+              <el-dropdown-item command="3"><svg-icon icon-class="3"/> Oracle</el-dropdown-item>
+              <el-dropdown-item command="4"><svg-icon icon-class="4"/> MongoDB</el-dropdown-item>
+              <el-dropdown-item command="5"><svg-icon icon-class="5"/> SQL Server</el-dropdown-item>
+              <el-dropdown-item command="6"><svg-icon icon-class="6"/> PostgreSQL</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="list" v-if="list && list.length > 0">
+        <div v-for="item in list" :key="item.id" :class="'item'+(selectedKey === item.id ? ' is-active' : '')" @click="handleListClick(item)">
+          <svg-icon :icon-class="item.type.toString()"/>
+          {{ item.name }}
+        </div>
+      </div>
+      <el-empty v-else description="暂无数据" :image-size="100"/>
+    </el-aside>
+    <el-main>
+      <div v-if="selectedKey">
+        <el-form :model="form" ref="form">
+          <el-row :gutter="20">
+            <el-col :span="24">
+              <el-form-item label="数据源名称" prop="name">
+                <el-input v-model="form.name" placeholder="请输入HTTP Server名称"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="16">
+              <el-form-item label="主机" prop="host">
+                <el-input v-model="form.host" placeholder="请输入主机地址"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="端口" prop="port">
+                <el-input v-model="form.port" placeholder="请输入端口号"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type !== 3">
+              <el-form-item label="库名" prop="dbName">
+                <el-input v-model="form.dbName" placeholder="请输入库名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 3">
+              <el-form-item label="服务名" prop="dbName">
+                <el-input v-model="form.dbName" placeholder="请输入服务名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 4">
+              <el-form-item label="认证库名" prop="authDb">
+                <el-input v-model="form.authDb" placeholder="请输入认证库名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="用户名" prop="username">
+                <el-input v-model="form.username" placeholder="请输入用户名"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="密码" prop="password">
+                <el-input v-model="form.password" show-password placeholder="请输入密码"/>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 2">
+              <el-form-item label="集群模式" prop="cluster">
+                <el-switch v-model="form.cluster" active-color="#13ce66" inactive-color="#ff4949" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" v-if="form.type === 2">
+              <el-form-item label="MasterName" prop="masterName">
+                <el-input v-model="form.masterName" placeholder="哨兵模式下，请输入MasterName"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div class="footer">
+          <el-button type="primary" @click="save">保 存</el-button>
+          <el-button type="danger" @click="del">删除</el-button>
+        </div>
+      </div>
+      <el-empty v-else description="暂无数据"/>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
 
-import {listApi} from "@/api/test/api";
+import {addDatasource, delDatasource, getDatasource, listDatasource, updateDatasource} from "@/api/test/database";
 
 export default {
-  name: "Database",
+  name: 'Database',
+  dicts: ["http_protocol"],
   data() {
     return {
-      loading: false,
-      showSearch: true,
-      total: 0,
-      dataList: [],
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        name: null,
-        method: null,
-        uri: null,
-      },
-    };
+      list: [],
+      selectedKey: "",
+      form: {},
+    }
+  },
+  created() {
+    this.getData();
+    this.$nextTick(() => {
+
+    })
   },
   methods: {
-    /** 查询接口列表 */
-    getList() {
-      this.loading = true;
-      listApi(this.queryParams).then(response => {
-        this.dataList = response.rows;
-        this.total = response.total;
-        this.loading = false;
+    getData(selectedKey) {
+      const loading = this.setLoading();
+      listDatasource().then(res => {
+        this.list = res.data;
+        if (selectedKey) {
+          this.handleListClick({id: selectedKey})
+        } else if (this.list && this.list.length > 0) {
+          this.handleListClick({id: this.list[0].id})
+        }
+        loading.close();
+      })
+    },
+    handleListClick(item) {
+      const loading = this.setLoading();
+      this.selectedKey = item.id;
+      getDatasource(item.id).then(res => {
+        this.form = res.data;
+        if (!this.form.header) {
+          this.form.header = []
+        } else {
+          this.form.header = JSON.parse(this.form.header);
+        }
+        this.form.header.push({
+          key: "",
+          value: ""
+        })
+      })
+      loading.close();
+    },
+    handleAdd(type) {
+      this.$prompt('请输入名称', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputPattern: /^(?!\s*$).+/,
+        inputErrorMessage: '名称不能为空'
+      }).then(({value}) => {
+        if (value) {
+          const loading = this.setLoading();
+          addDatasource({
+            name: value,
+            type: type
+          }).then(res => {
+            this.$message.success("添加成功")
+            this.getData(res.data.id);
+            loading.close();
+          })
+        }
       });
     },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+    save() {
+      updateDatasource(this.form).then(res => {
+        this.$modal.msgSuccess("修改成功");
+        this.getData();
+      })
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    del() {
+      this.$modal.confirm('是否确认删除？').then(() => {
+        return delDatasource(this.selectedKey);
+      }).then(() => {
+        this.$modal.msgSuccess("删除成功");
+        this.selectedKey = "";
+        this.getData();
+      })
     },
-    handleAdd() {
-
+    setLoading() {
+      return this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.footer {
+  text-align: right;
+  margin-top: 20px;
+}
 
+.header {
+  font-weight: bold;
+  line-height: 45px;
+  border-bottom: 1px solid #eee;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+  padding-left: 10px;
+}
+
+.list {
+  .item {
+    padding: 0 20px;
+    cursor: pointer;
+    height: 40px;
+    line-height: 40px;
+    border-right: 2px solid #eee;
+  }
+
+  .item.is-active {
+    color: var(--current-color);
+    border-right: 2px solid var(--current-color);
+  }
+}
 </style>
-
diff --git a/test-ui/src/views/test/resource/http.vue b/test-ui/src/views/test/resource/http.vue
index db0e195..498ec0b 100644
--- a/test-ui/src/views/test/resource/http.vue
+++ b/test-ui/src/views/test/resource/http.vue
@@ -99,17 +99,14 @@ export default {
   },
   created() {
     this.getData();
-    this.$nextTick(() => {
-
-    })
   },
   methods: {
-    getData(selectedKey) {
+    getData(key) {
       const loading = this.setLoading();
       listHttp().then(res => {
         this.list = res.data;
-        if (selectedKey) {
-          this.handleListClick({id: selectedKey})
+        if (key) {
+          this.handleListClick({id: key})
         } else if (this.list && this.list.length > 0) {
           this.handleListClick({id: this.list[0].id})
         }