diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java
new file mode 100644
index 0000000000000000000000000000000000000000..0397d3f2c55e00d982c9179a41c429cd59b079c1
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/mapper/UnitViewTreeMapper.java
@@ -0,0 +1,17 @@
+package cn.icanci.loopstack.bic.biz.mapper;
+
+import org.mapstruct.Mapper;
+import org.mapstruct.NullValueMappingStrategy;
+
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeDataModeEnumConverter;
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeTypeEnumConverter;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:46
+ */
+@Mapper(componentModel = "spring", uses = { NodeDataModeEnumConverter.class, NodeTypeEnumConverter.class }, nullValueMappingStrategy = NullValueMappingStrategy.RETURN_NULL)
+public interface UnitViewTreeMapper extends BaseMapper<UnitViewTreeDO, UnitViewTreeVO> {
+}
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java
new file mode 100644
index 0000000000000000000000000000000000000000..565b62adf2ac6822a4335abe2da5967ab76de975
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/UnitViewTreeService.java
@@ -0,0 +1,26 @@
+package cn.icanci.loopstack.bic.biz.service;
+
+import java.util.List;
+
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:45
+ */
+public interface UnitViewTreeService extends BaseService<UnitViewTreeVO> {
+    @Override
+    List<UnitViewTreeVO> queryAll();
+
+    @Override
+    void save(UnitViewTreeVO unitViewTreeVO);
+
+    @Override
+    UnitViewTreeVO queryById(String id);
+
+    @Override
+    PageList<UnitViewTreeVO> queryPage(UnitViewTreeVO unitViewTreeVO, int pageNum, int pageSize);
+
+    UnitViewTreeVO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid);
+}
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
index 4edbff78ace1c541e21bfee60a87bf5414ee1d60..f698958235d3feb3dd575377a0dbbdac7125c2b0 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/NodeServiceImpl.java
@@ -6,7 +6,6 @@ import javax.annotation.Resource;
 
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
-import org.springframework.transaction.annotation.Transactional;
 
 import com.google.common.collect.Lists;
 
@@ -35,7 +34,7 @@ public class NodeServiceImpl implements NodeService {
     }
 
     @Override
-    @Transactional(rollbackFor = Exception.class)
+//    @Transactional(rollbackFor = Exception.class)
     public void save(NodeVO nodeVO) {
         // TODO 日志记录
         // TODO 事务插入 测试
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
new file mode 100644
index 0000000000000000000000000000000000000000..22db240b4671875bd5da9e46d0c972baf7a29ef6
--- /dev/null
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UnitViewTreeServiceImpl.java
@@ -0,0 +1,59 @@
+package cn.icanci.loopstack.bic.biz.service.impl;
+
+import java.util.List;
+
+import javax.annotation.Resource;
+
+import org.springframework.stereotype.Service;
+
+import cn.icanci.loopstack.bic.biz.mapper.UnitViewTreeMapper;
+import cn.icanci.loopstack.bic.biz.service.UnitViewTreeService;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+import cn.icanci.loopstack.bic.dal.mongo.daointerface.UnitViewTreeDAO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:45
+ */
+@Service
+public class UnitViewTreeServiceImpl implements UnitViewTreeService {
+
+    @Resource
+    private UnitViewTreeDAO    unitViewTreeDAO;
+    @Resource
+    private UnitViewTreeMapper unitViewTreeMapper;
+
+    @Override
+    public List<UnitViewTreeVO> queryAll() {
+        return unitViewTreeMapper.dos2vos(unitViewTreeDAO.queryAll());
+    }
+
+    @Override
+    public void save(UnitViewTreeVO unitViewTreeVO) {
+        // TODO 日志记录
+        if (doInsert(unitViewTreeVO)) {
+            UnitViewTreeDO insert = unitViewTreeMapper.vo2do(unitViewTreeVO);
+            unitViewTreeDAO.insert(insert);
+        } else {
+            unitViewTreeDAO.update(unitViewTreeMapper.vo2do(unitViewTreeVO));
+        }
+    }
+
+    @Override
+    public UnitViewTreeVO queryById(String id) {
+        return unitViewTreeMapper.do2vo(unitViewTreeDAO.queryOneById(id));
+    }
+
+    @Override
+    public PageList<UnitViewTreeVO> queryPage(UnitViewTreeVO unitViewTreeVO, int pageNum, int pageSize) {
+        PageList<UnitViewTreeDO> pageQuery = unitViewTreeDAO.pageQuery(unitViewTreeMapper.vo2do(unitViewTreeVO), pageNum, pageSize);
+        return new PageList<>(unitViewTreeMapper.dos2vos(pageQuery.getData()), pageQuery.getPaginator());
+    }
+
+    @Override
+    public UnitViewTreeVO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid) {
+        return unitViewTreeMapper.do2vo(unitViewTreeDAO.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid));
+    }
+}
diff --git a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
index 8f63099f5f5ebb84b7ed8cada817d6d152bec729..f02a7a2ea39be6e53ac2973bf453cc1dcb3ca2b6 100644
--- a/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
+++ b/biz/src/main/java/cn/icanci/loopstack/bic/biz/service/impl/UseCaseServiceImpl.java
@@ -5,6 +5,7 @@ import java.util.List;
 import javax.annotation.Resource;
 
 import org.apache.commons.lang3.StringUtils;
+import org.springframework.stereotype.Service;
 
 import com.google.common.collect.Lists;
 
@@ -20,6 +21,7 @@ import cn.icanci.loopstack.bic.dal.mongo.dateobject.UseCaseDO;
  * @author icanci
  * @since 1.0 Created in 2023/09/10 20:10
  */
+@Service
 public class UseCaseServiceImpl implements UseCaseService {
 
     @Resource
diff --git a/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java
new file mode 100644
index 0000000000000000000000000000000000000000..81163aedace4ed066e0ec40c603d460db42ff8b2
--- /dev/null
+++ b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeRelationVO.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.common.model.graph;
+
+import cn.icanci.loopstack.bic.common.enums.NodeDataModeEnum;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:42
+ */
+@Data
+public class UnitViewTreeRelationVO {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String                       sourceNodeUuid;
+    /** 起始节点样式 */
+    private String                       sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String                       sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private NodeDataModeEnum             sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String                       targetNodeUuid;
+    /** 结束节点样式 */
+    private String                       targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String                       targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private NodeDataModeEnum             targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String                       edgeStyleUuid;
+    /** 边HOVER */
+    private String                       hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelationVO> children;
+}
diff --git a/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java
new file mode 100644
index 0000000000000000000000000000000000000000..96e255349b1288161beb2305f3a04c42606ce3ce
--- /dev/null
+++ b/common/src/main/java/cn/icanci/loopstack/bic/common/model/graph/UnitViewTreeVO.java
@@ -0,0 +1,20 @@
+package cn.icanci.loopstack.bic.common.model.graph;
+
+import cn.icanci.loopstack.bic.common.model.BaseVO;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:41
+ */
+@Data
+public class UnitViewTreeVO extends BaseVO {
+    /** 系统唯一标识  */
+    private String                       systemUuid;
+    /** 用例唯一标识  */
+    private String                       useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelationVO> relationModel;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java
new file mode 100644
index 0000000000000000000000000000000000000000..f661d4be06ba4806219fee4e29774d22e7dab2d2
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/daointerface/UnitViewTreeDAO.java
@@ -0,0 +1,23 @@
+package cn.icanci.loopstack.bic.dal.mongo.daointerface;
+
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:48
+ */
+public interface UnitViewTreeDAO extends BaseDAO<UnitViewTreeDO> {
+    /** 文档对应的名字  */
+    String                COLLECTION_NAME  = BASE_COLLECTION_NAME + "unit-view-tree";
+    /** 文档对应的Class */
+    Class<UnitViewTreeDO> COLLECTION_CLASS = UnitViewTreeDO.class;
+
+    UnitViewTreeDO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid);
+
+    /** 列 */
+    interface UnitViewTreeColumn extends BaseColumn {
+        String SYSTEM_UUID   = "systemUuid";
+        String USE_CASE_UUID = "useCaseUuid";
+    }
+
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java
new file mode 100644
index 0000000000000000000000000000000000000000..98ca35e64f417384b94e42678fbb908485c159eb
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeDO.java
@@ -0,0 +1,19 @@
+package cn.icanci.loopstack.bic.dal.mongo.dateobject;
+
+import java.util.List;
+
+import lombok.Data;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:47
+ */
+@Data
+public class UnitViewTreeDO extends BaseDO {
+    /** 系统唯一标识  */
+    private String                       systemUuid;
+    /** 用例唯一标识  */
+    private String                       useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelationDO> relationModel;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java
new file mode 100644
index 0000000000000000000000000000000000000000..38bd0435f2b1d033de41fe7b2b021ca0ee360d33
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/dateobject/UnitViewTreeRelationDO.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.dal.mongo.dateobject;
+
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeRelationVO;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:47
+ */
+@Data
+public class UnitViewTreeRelationDO {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String                       sourceNodeUuid;
+    /** 起始节点样式 */
+    private String                       sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String                       sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private String                       sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String                       targetNodeUuid;
+    /** 结束节点样式 */
+    private String                       targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String                       targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private String                       targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String                       edgeStyleUuid;
+    /** 边HOVER */
+    private String                       hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelationVO> children;
+}
diff --git a/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java
new file mode 100644
index 0000000000000000000000000000000000000000..e1529a334d6874f39f18f125e3a29bf99e9949ba
--- /dev/null
+++ b/dal/src/main/java/cn/icanci/loopstack/bic/dal/mongo/mongo/MongoUnitViewTreeDAO.java
@@ -0,0 +1,75 @@
+package cn.icanci.loopstack.bic.dal.mongo.mongo;
+
+import java.util.List;
+
+import org.apache.commons.lang3.StringUtils;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.mongodb.core.query.Criteria;
+import org.springframework.data.mongodb.core.query.Query;
+import org.springframework.stereotype.Service;
+
+import cn.icanci.loopstack.bic.dal.mongo.common.PageList;
+import cn.icanci.loopstack.bic.dal.mongo.daointerface.UnitViewTreeDAO;
+import cn.icanci.loopstack.bic.dal.mongo.dateobject.UnitViewTreeDO;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:49
+ */
+@Service("unitViewDAO")
+public class MongoUnitViewTreeDAO extends AbstractBaseDAO<UnitViewTreeDO> implements UnitViewTreeDAO {
+    @Override
+    public void insert(UnitViewTreeDO unitViewTreeDO) {
+        super.insert(unitViewTreeDO);
+        mongoTemplate.insert(unitViewTreeDO, COLLECTION_NAME);
+    }
+
+    @Override
+    public void update(UnitViewTreeDO unitViewTreeDO) {
+        super.update(unitViewTreeDO);
+        mongoTemplate.save(unitViewTreeDO, COLLECTION_NAME);
+    }
+
+    @Override
+    public List<UnitViewTreeDO> queryAll() {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        Query query = new Query(criteria);
+        return mongoTemplate.find(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+
+    @Override
+    public PageList<UnitViewTreeDO> pageQuery(UnitViewTreeDO unitViewTreeDO, int pageNum, int pageSize) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        if (StringUtils.isNotBlank(unitViewTreeDO.getSystemUuid())) {
+            criteria.and(UnitViewTreeColumn.SYSTEM_UUID).is(unitViewTreeDO.getSystemUuid());
+        }
+        if (StringUtils.isNotBlank(unitViewTreeDO.getUseCaseUuid())) {
+            criteria.and(UnitViewTreeColumn.USE_CASE_UUID).is(unitViewTreeDO.getUseCaseUuid());
+        }
+        Query query = new Query(criteria);
+        query.with(Sort.by(Sort.Direction.DESC, UnitViewTreeColumn.CREATE_TIME));
+        return pageQuery(query, COLLECTION_CLASS, pageSize, pageNum, COLLECTION_NAME);
+    }
+
+    @Override
+    public UnitViewTreeDO queryOneById(String _id) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn._ID).is(_id);
+        criteria.and(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+
+    @Override
+    public Class<? extends BaseColumn> getBaseColumn() {
+        return UnitViewTreeColumn.class;
+    }
+
+    @Override
+    public UnitViewTreeDO queryBySystemUuidAndUseCaseUuid(String systemUuid, String useCaseUuid) {
+        Criteria criteria = Criteria.where(UnitViewTreeColumn.USE_CASE_UUID).is(useCaseUuid);
+        criteria.and(UnitViewTreeColumn.ENV).is(DEFAULT_ENV);
+        criteria.and(UnitViewTreeColumn.SYSTEM_UUID).is(systemUuid);
+        Query query = new Query(criteria);
+        return mongoTemplate.findOne(query, COLLECTION_CLASS, COLLECTION_NAME);
+    }
+}
diff --git a/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java b/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
index 5119d166213d8ca111c42e866994f1149add36a6..e5731339ca40093d3b270d81d24021a29fc48749 100644
--- a/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
+++ b/views/src/main/java/cn/icanci/loopstack/bic/views/BicApplication.java
@@ -3,12 +3,14 @@ package cn.icanci.loopstack.bic.views;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.context.annotation.ComponentScan;
+import org.springframework.transaction.annotation.EnableTransactionManagement;
 
 /**
  * @author icanci
  * @since 1.0 Created in 2023/08/19 09:42
  */
 @ComponentScan(basePackages = { "cn.icanci.loopstack.bic" })
+@EnableTransactionManagement
 @SpringBootApplication
 public class BicApplication {
     public static void main(String[] args) {
diff --git a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
index 194cc8627bfb97a44b97047e84a6d8d908d2e699..c25e9803edcb05c89d22cd198e0b126f84287e81 100644
--- a/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
+++ b/views/src/main/resources/vueboot/src/api/loadSelectorApi.js
@@ -5,7 +5,6 @@ export async function loadFuncTypes() {
     url: '/bicAdmin/common/funcType',
     method: 'get'
   })
-  console.log(ret)
   if (ret.ok) {
     return ret.data.textValues;
   }
@@ -17,7 +16,6 @@ export async function nodeDataModes() {
     url: '/bicAdmin/common/nodeDataMode',
     method: 'get'
   })
-  console.log(ret)
   if (ret.ok) {
     return ret.data.textValues;
   }
diff --git a/views/src/main/resources/vueboot/src/api/unitViewTree.js b/views/src/main/resources/vueboot/src/api/unitViewTree.js
new file mode 100644
index 0000000000000000000000000000000000000000..f921f03f4267d2258611821dcc8639509c0139db
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/api/unitViewTree.js
@@ -0,0 +1,27 @@
+import request from '@/utils/request'
+
+export async function unitViewTreePageQuery(unitViewTree, paginator) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/query',
+    method: 'post',
+    data: {
+      'unitViewTree': unitViewTree,
+      'paginator': paginator
+    }
+  })
+}
+
+export async function unitViewTreeSave(unitViewTree) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/save',
+    method: 'post',
+    data: unitViewTree
+  })
+}
+
+export async function remoteValidateUnitViewTreeUnique(systemUuid, useCaseUuid) {
+  return await request({
+    url: '/bicAdmin/unitViewTree/validateUnique/' + systemUuid + '/' + useCaseUuid,
+    method: 'get',
+  })
+}
diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js
index 2a5ef7fba6b01dc439cbfcc30bc3cfe3b451fcb3..901ac069af4ce43e4b0be8df131bb91eade9ea6d 100644
--- a/views/src/main/resources/vueboot/src/router/index.js
+++ b/views/src/main/resources/vueboot/src/router/index.js
@@ -167,9 +167,9 @@ export const constantRoutes = [
       //   meta: {title: '边函数配置'}
       // },
       {
-        path: 'bic-edit',
-        component: () => import('@/views/bic-config/bic-edit'),
-        name: 'bicEdit',
+        path: 'unit-view-tree',
+        component: () => import('@/views/bic-config/unit-view-tree'),
+        name: 'unitViewTree',
         meta: {title: '编辑纠察图'}
       },
     ]
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7e0536f8dd52b9e3c81951ba02725d547a1ac6ed
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeList.vue
@@ -0,0 +1,116 @@
+<style scoped>
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+
+.leftButton {
+  position: absolute;
+  top: 51%;
+  transform: translateY(-51%);
+}
+
+.el-button.is-circle {
+  border-radius: 0%;
+}
+
+.el-button--mini.is-circle {
+  padding: 4px;
+}
+
+.rule_tree_root {
+  width: 25px;
+  display: flex;
+  /*margin: 20px 10px;*/
+}
+
+.rule_tree {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 40px;
+  margin-right: 0px;
+}
+
+.rule_tree_top {
+  width: 90%;
+  top: 15px;
+  position: relative;
+  flex-grow: 2;
+
+  margin-left: 11px;
+  margin-bottom: 15px;
+
+  border-radius: 1px;
+  border-left: 1px solid #d3dce6;
+  border-top: 1px solid #d3dce6;
+  border-bottom: 1px solid #d3dce6;
+}
+
+.rule_tree_bottom {
+  width: 100%;
+  bottom: 15px;
+  position: relative;
+  /*flex-grow: 2;*/
+
+  margin-left: 16px;
+  margin-top: 15px;
+
+  border-left: 1px solid #d3dce6;
+  border-radius: 1px;
+  /*border-bottom: 1px solid #d3dce6;*/
+}
+
+</style>
+<template>
+  <div>
+    <div v-if="showSelf">
+      <el-row :class="'rule_tree_root'">
+        <el-col class="rule_tree">
+          <rule-tree-node
+            style="text-align: left;"
+            :relation-model="relationModel"
+            :selectors="selectors"
+            :root="true"
+          >
+          </rule-tree-node>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+
+import ruleTreeNode from "./ruleTreeNode";
+
+export default {
+  name: "ruleTreeList",
+  filters: {},
+  props: [],
+  components: {
+    ruleTreeNode
+  },
+  data() {
+    return {
+      showSelf: false,
+      selectors: {},
+      relationModel: []
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    async load(data) {
+      let vm = this
+      vm.selectors = data.selectors
+      vm.relationModel = data.relationModel
+      vm.showSelf = true
+    },
+    getRelationModel() {
+      return this.relationModel
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..902f499d0fe9f9d73880f70f124e359c2c095847
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/components/ruleTreeNode.vue
@@ -0,0 +1,317 @@
+<style>
+
+.leftButton {
+  position: absolute;
+  top: 51%;
+  transform: translateY(-51%);
+}
+
+.el-button.is-circle {
+  border-radius: 0%;
+}
+
+.el-button--mini.is-circle {
+  padding: 4px;
+}
+
+.rule_tree_root {
+  width: 25px;
+  display: flex;
+  /*margin: 20px 10px;*/
+}
+
+.rule_tree_item {
+  display: flex;
+  padding: 0 0 0 10px !important;
+}
+
+.rule_tree_left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  width: 20px;
+  margin-right: 12px;
+}
+
+.rule_tree_left_top {
+  width: 95%;
+  top: 15px;
+  position: relative;
+  flex-grow: 2;
+
+  margin-left: 11px;
+  margin-bottom: 15px;
+
+  border-radius: 1px;
+  border-left: 1px solid #d3dce6;
+  border-top: 1px solid #d3dce6;
+  border-bottom: 1px solid #d3dce6;
+}
+
+.rule_tree_left_bottom {
+  width: 100%;
+  bottom: 15px;
+  position: relative;
+  /*flex-grow: 2;*/
+
+  margin-left: 16px;
+  margin-top: 15px;
+
+  border-left: 1px solid #d3dce6;
+  border-radius: 1px;
+  /*border-bottom: 1px solid #d3dce6;*/
+}
+
+.rule_tree_right {
+  width: calc(100% - 55px);
+}
+
+.drawer_from_item {
+  margin-top: 20px;
+}
+
+.drawer_from_item_inner {
+  width: 90%;
+}
+</style>
+<template>
+  <div>
+    <el-row :class="root?'rule_tree_root':'rule_tree_item'">
+      <el-col class="rule_tree_left">
+        <el-row v-for="(model, index) in relationModel" :key="index">
+          <el-row>
+            <el-form
+              style="line-height: 40px;height: 40px;display: flex;" :inline="true" class="demo-form-inline">
+              <el-form-item prop="sourceNodeUuid">
+                <el-select filterable
+                           @change="refreshSelf()"
+                           style="width: 180px"
+                           v-model="model.sourceNodeUuid"
+                           placeholder="开始节点">
+                  <el-option
+                    v-for="item in selectors.nodeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="edgeStyleUuid">
+                <el-select filterable
+                           style="width: 180px"
+                           @change="refreshSelf()"
+                           v-model="model.edgeStyleUuid"
+                           placeholder="边样式">
+                  <el-option
+                    v-for="item in selectors.edgeStyleOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="targetNodeUuid">
+                <el-select filterable
+                           style="width: 180px"
+                           @change="refreshSelf()"
+                           v-model="model.targetNodeUuid"
+                           placeholder="目标节点">
+                  <el-option
+                    v-for="item in selectors.nodeOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item prop="hoverName">
+                <el-input style="width: 180px" v-on:input="refreshSelf()" v-model="model.hoverName" placeholder="边悬浮名称"></el-input>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="删除记录" placement="top">
+                  <el-popconfirm
+                    confirm-button-text='删除'
+                    cancel-button-text='我再想想'
+                    confirm-button-type="danger"
+                    icon="el-icon-delete"
+                    icon-color="red"
+                    @onConfirm="deleteOne(index)"
+                    title="确定删除吗？如有子节点会一并删除！">
+                    <el-button
+                      slot="reference" :disabled="root" type="danger" icon="el-icon-delete" circle size="mini">
+                    </el-button>
+                  </el-popconfirm>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="增加兄弟" placement="top">
+                  <el-button :disabled="root" type="primary" icon="el-icon-circle-plus" circle size="mini"
+                             @click="addBrother(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="增加孩子" placement="top">
+                  <el-button type="warning" icon="el-icon-circle-plus-outline" circle size="mini"
+                             @click="addChild(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+              <el-form-item>
+                <el-tooltip content="详细设计" placement="top">
+                  <el-button type="success" icon="el-icon-right" circle size="mini"
+                             @click="editModelDetail(index)">
+                  </el-button>
+                </el-tooltip>
+              </el-form-item>
+            </el-form>
+            <rule-tree-node
+              v-if="model.children && model.children.length>0"
+              :relation-model="model.children"
+              :selectors="selectors"
+              :root="false"
+            >
+            </rule-tree-node>
+          </el-row>
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <el-drawer
+      title="单节点详细设计"
+      size="40%"
+      :visible.sync="modelDetailFlag"
+      append-to-body
+      :with-header="true">
+      <el-card style="margin-left: 20px;margin-right: 20px">
+        <el-form
+          label-position="right"
+          ref="relationModelDetailForm" :model="relationModelDetail" label-width="180px">
+          <el-form-item label="开始节点样式" prop="sourceNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.sourceNodeDataMode"
+                       placeholder="开始节点样式">
+              <el-option
+                v-for="item in selectors.nodeStyleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="开始节点匹配类型" prop="sourceNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.sourceNodeDataMode"
+                       placeholder="开始节点匹配类型">
+              <el-option
+                v-for="item in selectors.nodeDataModeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="开始节点匹配值" prop="sourceNodeDataKey">
+            <el-input style="width: 200px" v-on:input="refreshSelf()" v-model="relationModelDetail.sourceNodeDataKey" placeholder="开始节点匹配值"></el-input>
+          </el-form-item>
+          <el-form-item label="结束节点样式" prop="targetStyleUuid">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.targetStyleUuid"
+                       placeholder="结束节点样式">
+              <el-option
+                v-for="item in selectors.nodeStyleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="结束节点匹配类型" prop="targetNodeDataMode">
+            <el-select filterable
+                       @change="refreshSelf()"
+                       v-model="relationModelDetail.targetNodeDataMode"
+                       placeholder="结束节点匹配类型">
+              <el-option
+                v-for="item in selectors.nodeDataModeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="结束节点匹配值" prop="targetNodeDataKey">
+            <el-input style="width: 200px" v-on:input="refreshSelf()" v-model="relationModelDetail.targetNodeDataKey" placeholder="结束节点匹配值"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-drawer>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "ruleTreeNode",
+  filters: {},
+  props: ['relationModel', "selectors", "root"],
+  components: {},
+  data() {
+    return {
+      tempRelationModel: {
+        sourceNodeUuid: '',
+        sourceStyleUuid: '',
+        sourceNodeDataKey: '',
+        sourceNodeDataMode: '',
+        targetNodeUuid: '',
+        targetStyleUuid: '',
+        targetNodeDataKey: '',
+        targetNodeDataMode: '',
+        edgeStyleUuid: '',
+        hoverName: '',
+        children: []
+      },
+      modelDetailFlag: false,
+      relationModelDetail: {},
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    deleteOne(index) {
+      let vm = this
+      vm.relationModel.splice(index, 1)
+      vm.$forceUpdate()
+    },
+    addBrother(index) {
+      let vm = this
+      vm.relationModel.push(
+        vm.$cloneObj(vm.tempRelationModel)
+      )
+      vm.$forceUpdate()
+    },
+    addChild(index) {
+      let vm = this
+      vm.relationModel[index].children = []
+
+      vm.relationModel[index].children.push(
+        vm.$cloneObj(vm.tempRelationModel)
+      )
+      vm.$forceUpdate()
+    },
+    editModelDetail(index) {
+      let vm = this
+      vm.modelDetailFlag = true
+      vm.relationModelDetail = vm.relationModel[index]
+    },
+    refreshSelf() {
+      let vm = this
+      vm.$forceUpdate()
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
deleted file mode 100644
index 88692bdfa1d9d0f1f0e7b7d81a2cd6447fe726de..0000000000000000000000000000000000000000
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/bic-edit-form.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<style>
-
-</style>
-<template>
-  <el-dialog
-    title="用例配置"
-    :visible.sync="dialogVisible"
-    :close-on-press-escape="false"
-    :close-on-click-modal="false"
-    width="80%"
-    :before-close="clearForm">
-
-    <el-form
-      :label-position="labelPosition"
-      label-width="80px"
-      :model="saveData"
-      :rules="rules"
-      ref="ruleForm"
-    >
-      <el-form-item label="系统" prop="systemUuid">
-        <el-select filterable
-                   @change="refreshUseCaseOptions"
-                   :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
-          <el-option
-            v-for="item in systemOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="用例">
-        <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
-                   @change="refreshUnitViewOptions"
-                   clearable filterable v-model="save.useCaseUuid" placeholder="请选择用例">
-          <el-option
-            v-for="item in useCaseOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-    <el-button @click="clearForm">取 消</el-button>
-    <el-button type="primary" @click="save">确 定</el-button>
-  </span>
-  </el-dialog>
-</template>
-<script>
-
-import {remoteValidatesSystemKey, remoteValidateSystemName, systemSave} from "@/api/system";
-import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {remoteValidatesUseCaseKey, remoteValidateUseCaseName, useCaseSave} from "@/api/useCase";
-import {remoteValidateUnique, remoteValidateUnitViewUnique} from "@/api/unitView";
-
-export default {
-  name: "useCaseForm",
-  filters: {},
-  components: {},
-  data() {
-    const validateName = async (rule, value, callback) => {
-      if (this.saveData.id) {
-        callback()
-      }
-      let systemUuid = this.saveData.systemUuid;
-      let useCaseUuid = this.saveData.useCaseUuid;
-
-      if (systemUuid === '') {
-        callback(new Error("请选择纠察图所属系统"))
-      }
-
-      if (useCaseUuid === '') {
-        callback(new Error("请选择纠察图所属用例"))
-      }
-
-      let ret = await remoteValidateUnitViewUnique(systemUuid, useCaseUuid);
-      if (ret.data.result) {
-        callback()
-      } else {
-        callback(new Error("当前系统当前用例已经存在纠察图"))
-      }
-    };
-
-    return {
-      labelPosition: 'right',
-      dialogVisible: false,
-      saveData: {
-        systemUuid: '',
-        useCaseUuid: '',
-        edges: [],
-        nodes: []
-      },
-      rules: {
-        systemUuid: [
-          {required: true, message: '此项必填', trigger: 'change'},
-          {validator: validateName, trigger: 'blur'}
-        ],
-        useCaseUuid: [
-          {required: true, message: '此项必填', trigger: 'change'}
-          {validator: validateName, trigger: 'blur'}
-        ],
-      },
-      systemOptions: [],
-      useCaseOptions: [],
-      nodeOptions: [],
-      nodeVueOptions: [],
-      nodeStyleOptions: [],
-      edgeStyleOptions: [],
-      nodeDataModeOptions: [],
-      nodeTypesOptions: [],
-    }
-  },
-  async created() {
-    this.systemOptions = await systemSelector();
-    this.nodeDataModeOptions = await nodeDataModes();
-    this.nodeTypesOptions = await nodeTypes();
-  },
-  mounted() {
-  },
-  methods: {
-    load(data) {
-      let vm = this
-      if (data) {
-        vm.saveData = vm.$cloneObj(data)
-      }
-      vm.dialogVisible = true
-    },
-    save() {
-      let vm = this
-      this.$refs['ruleForm'].validate(async (valid) => {
-        if (valid) {
-          await vm.doSave(this.saveData)
-        }
-      })
-    },
-    async doSave(saveData) {
-      let vm = this
-      let ret = await useCaseSave(saveData);
-      if (ret.ok) {
-        vm.$message({type: 'success', message: '保存成功'});
-      } else {
-        vm.$message({type: 'error', message: '保存失败：' + ret.message});
-      }
-      vm.clearForm()
-      vm.$parent.query()
-    },
-    clearForm() {
-      let vm = this
-      try {
-        vm.saveData = {
-          systemUuid: '',
-          useCaseUuid: '',
-          edges: [],
-          nodes: []
-        }
-        vm.$refs['ruleForm'].resetFields()
-      } catch (e) {
-        console.log(e)
-      }
-      vm.dialogVisible = false
-    },
-    async refreshUseCaseOptions() {
-      let vm = this
-      if (vm.saveData.systemUuid === '') {
-        vm.useCaseOptions = []
-        vm.nodeOptions = []
-        vm.nodeStyleOptions = []
-        vm.edgeStyleOptions = []
-        vm.saveData.useCaseUuid = ''
-        vm.saveData.nodes = []
-        vm.saveData.edges = []
-      } else {
-        vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
-        vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
-        vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
-        vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
-        vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
-      }
-    },
-    refreshUnitViewOptions() {
-      let vm = this
-      if (vm.saveData.useCaseUuid === '') {
-        vm.saveData.nodes = []
-        vm.saveData.edges = []
-      }
-    }
-  }
-}
-</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
index 19cd6b184888884a89e2c3e0d6b2f163728856a9..1e2588f877d12646927cd51cea101ef8a65dc83c 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/node-vue-form.vue
@@ -237,10 +237,9 @@ export default {
     },
     async refreshNodeOptions() {
       let vm = this
-      if (vm.saveData.systemUuid === '') {
-        vm.nodeOptions = []
-        vm.saveData.nodeUuid = ''
-      } else {
+      vm.saveData.nodeUuid = ''
+      vm.nodeOptions = []
+      if (vm.saveData.systemUuid !== '') {
         vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
       }
     }
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue b/views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..02729e6a07dc7e461cee2bf5b0dbe70ebe47f810
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-config/dialog/unit-view-tree-form.vue
@@ -0,0 +1,371 @@
+<style scoped>
+
+.el-divider--horizontal {
+  margin: 12px 0;
+}
+
+</style>
+<template>
+  <div>
+    <el-dialog
+      title="单元纠察图配置"
+      :visible.sync="dialogVisible"
+      :close-on-press-escape="false"
+      :close-on-click-modal="false"
+      width="90%"
+      :before-close="clearForm">
+
+      <el-form
+        :label-position="labelPosition"
+        label-width="80px"
+        :model="saveData"
+        :rules="rules"
+        :inline="true"
+        ref="ruleForm"
+      >
+        <el-form-item label="系统" prop="systemUuid">
+          <el-select filterable
+                     @change="refreshUseCaseOptions"
+                     :disabled="saveData.id && saveData.id !==''" v-model="saveData.systemUuid" placeholder="请选择系统">
+            <el-option
+              v-for="item in systemOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用例" prop="useCaseUuid">
+          <el-select :disabled="saveData.systemUuid === '' ||(saveData.id && saveData.id !=='')"
+                     @change="refreshUnitViewOptions"
+                     filterable
+                     v-model="saveData.useCaseUuid"
+                     placeholder="请选择用例">
+            <el-option
+              v-for="item in useCaseOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="treeView">纠察图树结构</el-button>
+        </el-form-item>
+      </el-form>
+      <el-divider></el-divider>
+      <el-row>
+        <rule-tree-list ref="ruleTreeList"></rule-tree-list>
+      </el-row>
+
+      <span slot="footer" class="dialog-footer">
+    <el-button @click="clearForm">取 消</el-button>
+    <el-button type="primary" @click="save">确 定</el-button>
+  </span>
+    </el-dialog>
+
+    <el-drawer
+      title="纠察图树结构"
+      size="40%"
+      :visible.sync="treeViewFlag"
+      :with-header="true">
+      <el-tree
+        :data="treeData"
+        node-key="nodeId"
+        :default-expanded-keys="getExpandedKeys()"
+        :props="defaultProps">
+      </el-tree>
+    </el-drawer>
+  </div>
+</template>
+<script>
+
+import {edgeStyleSelector, nodeDataModes, nodeSelector, nodeStyleSelector, nodeTypes, nodeVueSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
+import {remoteValidateUnitViewUnique, unitViewSave} from "@/api/unitView";
+import ruleTreeList from "@/views/bic-config/components/ruleTreeList";
+import unitViewTree from "@/views/bic-config/unit-view-tree.vue";
+import {remoteValidateUnitViewTreeUnique, unitViewTreeSave} from "@/api/unitViewTree";
+
+export default {
+  name: "bicEditForm",
+  filters: {},
+  components: {
+    ruleTreeList
+  },
+  data() {
+    const validateName = async (rule, value, callback) => {
+      if (this.saveData.id) {
+        callback()
+      }
+      let systemUuid = this.saveData.systemUuid;
+      let useCaseUuid = this.saveData.useCaseUuid;
+
+      if (systemUuid === '') {
+        callback(new Error("请选择纠察图所属系统"))
+        return;
+      }
+
+      if (useCaseUuid === '') {
+        callback(new Error("请选择纠察图所属用例"))
+        return;
+      }
+
+      let ret = await remoteValidateUnitViewTreeUnique(systemUuid, useCaseUuid);
+      if (ret.data.result) {
+        callback()
+      } else {
+        callback(new Error("当前系统当前用例已经存在纠察图"))
+      }
+    };
+
+    return {
+      labelPosition: 'right',
+      dialogVisible: false,
+      saveData: {
+        systemUuid: '',
+        useCaseUuid: '',
+        edges: [],
+        nodes: []
+      },
+      relationModel: [],
+      tempRelationModel: [
+        {
+          sourceNodeUuid: '',
+          sourceStyleUuid: '',
+          sourceNodeDataKey: '',
+          sourceNodeDataMode: '',
+          targetNodeUuid: '',
+          targetStyleUuid: '',
+          targetNodeDataKey: '',
+          targetNodeDataMode: '',
+          edgeStyleUuid: '',
+          hoverName: '',
+          children: []
+        }
+      ],
+      rules: {
+        systemUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+          {validator: validateName, trigger: 'blur'}
+        ],
+        useCaseUuid: [
+          {required: true, message: '此项必填', trigger: 'change'},
+          {validator: validateName, trigger: 'blur'}
+        ],
+      },
+      systemOptions: [],
+      useCaseOptions: [],
+      nodeOptions: [],
+      nodeVueOptions: [],
+      nodeStyleOptions: [],
+      edgeStyleOptions: [],
+      nodeDataModeOptions: [],
+      nodeTypesOptions: [],
+      selectors: {
+        nodeDataModeOptions: [],
+        nodeTypesOptions: [],
+        nodeOptions: [],
+        nodeVueOptions: [],
+        nodeStyleOptions: [],
+        edgeStyleOptions: [],
+      },
+      tempSelectors: {
+        nodeDataModeOptions: [],
+        nodeTypesOptions: [],
+        nodeOptions: [],
+        nodeVueOptions: [],
+        nodeStyleOptions: [],
+        edgeStyleOptions: [],
+      },
+      treeViewFlag: false,
+      treeData: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+    };
+  },
+  async created() {
+    this.systemOptions = await systemSelector();
+    this.nodeDataModeOptions = await nodeDataModes();
+    this.nodeTypesOptions = await nodeTypes();
+  },
+  mounted() {
+  },
+  methods: {
+    load(data) {
+      let vm = this
+      if (data) {
+        vm.saveData = vm.$cloneObj(data)
+      }
+      vm.dialogVisible = true
+
+      if (data) {
+        vm.reloadView(data)
+      } else {
+        vm.defaultLoad()
+      }
+    },
+    async reloadView(data) {
+      let vm = this
+
+      await vm.selectorLoad()
+      vm.relationModel = data.relationModel
+
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
+    },
+    save() {
+      let vm = this
+      // 遍历所有节点
+      this.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          await vm.doSave(this.saveData)
+        }
+      })
+    },
+    async doSave(saveData) {
+      let vm = this
+      let ret = await unitViewTreeSave(saveData);
+      if (ret.ok) {
+        vm.$message({type: 'success', message: '保存成功'});
+      } else {
+        vm.$message({type: 'error', message: '保存失败：' + ret.message});
+      }
+      vm.clearForm()
+      vm.$parent.query()
+    },
+    clearForm() {
+      let vm = this
+      try {
+        vm.saveData = {
+          systemUuid: '',
+          useCaseUuid: '',
+          edges: [],
+          nodes: []
+        }
+        vm.relationModel = []
+        vm.$refs['ruleForm'].resetFields()
+      } catch (e) {
+        console.log(e)
+      }
+      vm.dialogVisible = false
+    },
+    async refreshUseCaseOptions() {
+      let vm = this
+      vm.saveData.useCaseUuid = ''
+      vm.relationModel = vm.getRelationModel()
+      await vm.selectorLoad()
+    },
+    async selectorLoad() {
+      let vm = this
+      vm.useCaseOptions = await useCaseSelector(vm.saveData.systemUuid)
+      vm.nodeOptions = await nodeSelector(vm.saveData.systemUuid)
+      vm.nodeVueOptions = await nodeVueSelector(vm.saveData.systemUuid)
+      vm.nodeStyleOptions = await nodeStyleSelector(vm.saveData.systemUuid)
+      vm.edgeStyleOptions = await edgeStyleSelector(vm.saveData.systemUuid)
+      vm.selectors = vm.getSelectors()
+    },
+    refreshUnitViewOptions() {
+      let vm = this
+      vm.relationModel = vm.getRelationModel()
+      vm.selectors = vm.getSelectors()
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
+    },
+    defaultLoad() {
+      let vm = this
+      vm.relationModel = vm.getRelationModel()
+      vm.selectors = vm.getEmptySelectors()
+
+      vm.$nextTick(async () => {
+        // 组件
+        vm.$refs.ruleTreeList.load({relationModel: vm.relationModel, selectors: vm.selectors});
+      })
+    },
+    getRelationModel() {
+      return this.$cloneObj(this.tempRelationModel)
+    },
+    getEmptySelectors() {
+      return this.$cloneObj(this.tempSelectors)
+    },
+    getSelectors() {
+      let vm = this
+      return {
+        nodeDataModeOptions: vm.nodeDataModeOptions,
+        nodeTypesOptions: vm.nodeTypesOptions,
+        nodeOptions: vm.nodeOptions,
+        nodeVueOptions: vm.nodeVueOptions,
+        nodeStyleOptions: vm.nodeStyleOptions,
+        edgeStyleOptions: vm.edgeStyleOptions,
+      }
+    },
+    treeView() {
+      let vm = this
+      vm.treeData = vm.$cloneObj(vm.$refs.ruleTreeList.getRelationModel())
+      vm.loopFillUuid(vm.treeData)
+      vm.treeViewFlag = true
+    },
+    getExpandedKeys() {
+      let vm = this
+      let expandedKeys = []
+      for (let i = 0; i < vm.treeData.length; i++) {
+        expandedKeys.push(vm.treeData[i].nodeId)
+        if (vm.treeData[i].children) {
+          vm.loopExpandedKeys(expandedKeys, vm.treeData[i].children)
+        }
+      }
+      return expandedKeys;
+    },
+    loopExpandedKeys(expandedKeys, treeData) {
+      let vm = this
+      if (treeData) {
+        for (let i = 0; i < treeData.length; i++) {
+          expandedKeys.push(treeData[i].nodeId)
+          if (treeData[i].children) {
+            vm.loopExpandedKeys(expandedKeys, treeData[i].children)
+          }
+        }
+      }
+    },
+    loopFillUuid(obj) {
+      for (let i = 0; i < obj.length; i++) {
+        obj[i].nodeId = this.guid()
+        obj[i].label = this.getLabelName(obj[i])
+        if (obj[i].children) {
+          this.loopFillUuid(obj[i].children)
+        } else {
+          obj[i].children = []
+        }
+      }
+    },
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+      });
+    },
+    getLabelName(labelV) {
+      let vm = this
+      let sourceNodeUuid = labelV.sourceNodeUuid;
+      let targetNodeUuid = labelV.targetNodeUuid;
+      let sourceName = 'empty-source-name'
+      let targetName = 'empty-target-name'
+      for (let i = 0; i < vm.nodeOptions.length; i++) {
+        let nodeOption = vm.nodeOptions[i];
+        if (nodeOption.value === sourceNodeUuid) {
+          sourceName = nodeOption.label
+        }
+        if (nodeOption.value === targetNodeUuid) {
+          targetName = nodeOption.label
+        }
+      }
+      return sourceName
+    }
+  }
+}
+</script>
diff --git a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue b/views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
similarity index 93%
rename from views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
rename to views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
index 21e82ca130db26c6d5505a4c017f8598c5101cd1..a6964b3916b58ff7e69d37a0a75a110d58b6d8a4 100644
--- a/views/src/main/resources/vueboot/src/views/bic-config/bic-edit.vue
+++ b/views/src/main/resources/vueboot/src/views/bic-config/unit-view-tree.vue
@@ -111,21 +111,21 @@
       </el-footer>
     </el-card>
 
-    <bic-edit-form ref="bicEditForm"></bic-edit-form>
+    <unit-view-tree-form ref="unitViewTreeForm"></unit-view-tree-form>
   </div>
 </template>
 
 <script>
 import vuePage from "@/views/common/vue-page.vue";
 import vueLog from "@/views/common/vue-log.vue";
-import bicEditForm from "@/views/bic-config/dialog/bic-edit-form.vue";
+import unitViewTreeForm from "@/views/bic-config/dialog/unit-view-tree-form.vue";
 import {allUseCaseSelector, systemSelector, useCaseSelector} from "@/api/loadSelectorApi";
-import {unitViewPageQuery} from "@/api/unitView";
+import {unitViewTreePageQuery} from "@/api/unitViewTree";
 
 export default {
   name: "unit-view-config",
   components: {
-    bicEditForm,
+    unitViewTreeForm,
     vuePage,
     vueLog,
   },
@@ -161,7 +161,7 @@ export default {
     async query() {
 
       let vm = this
-      let ret = await unitViewPageQuery(vm.queryForm, vm.pageResult.paginator)
+      let ret = await unitViewTreePageQuery(vm.queryForm, vm.pageResult.paginator)
       vm.$message({type: 'success', message: '查询成功'});
       if (ret.ok) {
         vm.pageResult = ret.data.queryPage
@@ -170,10 +170,10 @@ export default {
       }
     },
     addNew() {
-      this.$refs.bicEditForm.load();
+      this.$refs.unitViewTreeForm.load();
     },
     toEdit(row) {
-      this.$refs.bicEditForm.load(row);
+      this.$refs.unitViewTreeForm.load(row);
     },
     toDisableOrEnable(row) {
       let vm = this
@@ -184,7 +184,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$refs.bicEditForm.doSave(clone);
+        this.$refs.unitViewTreeForm.doSave(clone);
       }).catch(() => {
         this.$message({
           type: 'info',
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
index 7885d8b974b2ea99c874439885e71ccb5c263280..c56f5b5d19ec6ac9f7eb895c246ff64b56e228ff 100644
--- a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewController.java
@@ -1,45 +1,45 @@
-package cn.icanci.loopstack.bic.web.controller;
-
-import javax.annotation.Resource;
-
-import org.springframework.web.bind.annotation.*;
-
-import cn.icanci.loopstack.bic.biz.service.UnitViewService;
-import cn.icanci.loopstack.bic.common.model.graph.UnitViewVO;
-import cn.icanci.loopstack.bic.common.result.R;
-import cn.icanci.loopstack.bic.web.form.UnitViewQueryForm;
-import cn.icanci.loopstack.bic.web.mapper.UnitViewWebMapper;
-import cn.icanci.loopstack.bic.web.model.UnitView;
-
-/**
- * @author icanci
- * @since 1.0 Created in 2023/09/16 10:55
- */
-@RestController
-@RequestMapping("/bicAdmin/unitView")
-public class UnitViewController {
-    @Resource
-    private UnitViewWebMapper unitViewWebMapper;
-    @Resource
-    private UnitViewService   unitViewService;
-
-    // ================================ CRUD ================================
-    @PostMapping("query")
-    public R query(@RequestBody UnitViewQueryForm form) {
-        return R.builderOk()
-            .data("queryPage", unitViewService.queryPage(unitViewWebMapper.web2vo(form.getUnitView()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
-            .build();
-    }
-
-    @PostMapping("save")
-    public R save(@RequestBody UnitView unitView) {
-        unitViewService.save(unitViewWebMapper.web2vo(unitView));
-        return R.builderOk().build();
-    }
-
-    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
-    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
-        UnitViewVO unitView = unitViewService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
-        return R.builderOk().data("result", unitView == null).build();
-    }
-}
+//package cn.icanci.loopstack.bic.web.controller;
+//
+//import javax.annotation.Resource;
+//
+//import org.springframework.web.bind.annotation.*;
+//
+//import cn.icanci.loopstack.bic.biz.service.UnitViewService;
+//import cn.icanci.loopstack.bic.common.model.graph.UnitViewVO;
+//import cn.icanci.loopstack.bic.common.result.R;
+//import cn.icanci.loopstack.bic.web.form.UnitViewQueryForm;
+//import cn.icanci.loopstack.bic.web.mapper.UnitViewWebMapper;
+//import cn.icanci.loopstack.bic.web.model.UnitView;
+//
+///**
+// * @author icanci
+// * @since 1.0 Created in 2023/09/16 10:55
+// */
+//@RestController
+//@RequestMapping("/bicAdmin/unitView")
+//public class UnitViewController {
+//    @Resource
+//    private UnitViewWebMapper unitViewWebMapper;
+//    @Resource
+//    private UnitViewService   unitViewService;
+//
+//    // ================================ CRUD ================================
+//    @PostMapping("query")
+//    public R query(@RequestBody UnitViewQueryForm form) {
+//        return R.builderOk()
+//            .data("queryPage", unitViewService.queryPage(unitViewWebMapper.web2vo(form.getUnitView()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
+//            .build();
+//    }
+//
+//    @PostMapping("save")
+//    public R save(@RequestBody UnitView unitView) {
+//        unitViewService.save(unitViewWebMapper.web2vo(unitView));
+//        return R.builderOk().build();
+//    }
+//
+//    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
+//    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
+//        UnitViewVO unitView = unitViewService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
+//        return R.builderOk().data("result", unitView == null).build();
+//    }
+//}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java
new file mode 100644
index 0000000000000000000000000000000000000000..617bb4e943c0d801fc0a73f77c38c03110c38b0c
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/controller/UnitViewTreeController.java
@@ -0,0 +1,46 @@
+package cn.icanci.loopstack.bic.web.controller;
+
+import javax.annotation.Resource;
+
+import org.springframework.web.bind.annotation.*;
+
+import cn.icanci.loopstack.bic.biz.service.UnitViewTreeService;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.common.result.R;
+import cn.icanci.loopstack.bic.web.form.UnitViewTreeQueryForm;
+import cn.icanci.loopstack.bic.web.mapper.UnitViewTreeWebMapper;
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/16 10:55
+ */
+@RestController
+@RequestMapping("/bicAdmin/unitViewTree")
+public class UnitViewTreeController {
+    @Resource
+    private UnitViewTreeWebMapper unitViewTreeWebMapper;
+    @Resource
+    private UnitViewTreeService   unitViewTreeService;
+
+    // ================================ CRUD ================================
+    @PostMapping("query")
+    public R query(@RequestBody UnitViewTreeQueryForm form) {
+        return R.builderOk()
+            .data("queryPage",
+                unitViewTreeService.queryPage(unitViewTreeWebMapper.web2vo(form.getUnitViewTree()), form.getPaginator().getCurrentPage(), form.getPaginator().getPageSize()))
+            .build();
+    }
+
+    @PostMapping("save")
+    public R save(@RequestBody UnitViewTree unitViewTree) {
+        unitViewTreeService.save(unitViewTreeWebMapper.web2vo(unitViewTree));
+        return R.builderOk().build();
+    }
+
+    @GetMapping("validateUnique/{systemUuid}/{useCaseUuid}")
+    public R validateUnique(@PathVariable("systemUuid") String systemUuid, @PathVariable("useCaseUuid") String useCaseUuid) {
+        UnitViewTreeVO unitViewTree = unitViewTreeService.queryBySystemUuidAndUseCaseUuid(systemUuid, useCaseUuid);
+        return R.builderOk().data("result", unitViewTree == null).build();
+    }
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java b/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java
new file mode 100644
index 0000000000000000000000000000000000000000..b4b1fe1429b119b8563cd587741cfd6ec6bc9478
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/form/UnitViewTreeQueryForm.java
@@ -0,0 +1,13 @@
+package cn.icanci.loopstack.bic.web.form;
+
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+import lombok.Data;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:44
+ */
+@Data
+public class UnitViewTreeQueryForm extends BaseQueryForm {
+    private UnitViewTree unitViewTree;
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java b/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java
new file mode 100644
index 0000000000000000000000000000000000000000..75bf41d1d0ab754aaea61c9b5edaf2040744ba32
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/mapper/UnitViewTreeWebMapper.java
@@ -0,0 +1,17 @@
+package cn.icanci.loopstack.bic.web.mapper;
+
+import org.mapstruct.Mapper;
+import org.mapstruct.NullValueMappingStrategy;
+
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeDataModeEnumConverter;
+import cn.icanci.loopstack.bic.biz.mapper.convertor.NodeTypeEnumConverter;
+import cn.icanci.loopstack.bic.common.model.graph.UnitViewTreeVO;
+import cn.icanci.loopstack.bic.web.model.UnitViewTree;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:40
+ */
+@Mapper(componentModel = "spring", uses = { NodeDataModeEnumConverter.class, NodeTypeEnumConverter.class }, nullValueMappingStrategy = NullValueMappingStrategy.RETURN_NULL)
+public interface UnitViewTreeWebMapper extends BaseWebMapper<UnitViewTree, UnitViewTreeVO> {
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java
new file mode 100644
index 0000000000000000000000000000000000000000..5a0f750174d852f9c20fe3deff93664070874c9a
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTree.java
@@ -0,0 +1,21 @@
+package cn.icanci.loopstack.bic.web.model;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * 图结构单元视图
+ * 
+ * @author icanci
+ * @since 1.0 Created in 2023/09/09 21:49
+ */
+@Data
+public class UnitViewTree extends Base {
+    /** 系统唯一标识  */
+    private String                     systemUuid;
+    /** 用例唯一标识  */
+    private String                     useCaseUuid;
+    /** 图配置数据  */
+    private List<UnitViewTreeRelation> relationModel;
+}
diff --git a/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java
new file mode 100644
index 0000000000000000000000000000000000000000..ffc1d0fedd89bd2f223e70c53ecce543c67eccfc
--- /dev/null
+++ b/web/src/main/java/cn/icanci/loopstack/bic/web/model/UnitViewTreeRelation.java
@@ -0,0 +1,45 @@
+package cn.icanci.loopstack.bic.web.model;
+
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/09/17 15:00
+ */
+@Data
+public class UnitViewTreeRelation {
+    // ====================== 起始节点配置 ======================
+    /** 起始节点 */
+    private String              sourceNodeUuid;
+    /** 起始节点样式 */
+    private String              sourceStyleUuid;
+    /** 起始节点唯一Key */
+    private String              sourceNodeDataKey;
+    /** 起始节点匹配模式 */
+    private String              sourceNodeDataMode;
+
+    // ====================== 结束节点配置 ======================
+
+    /** 结束节点 */
+    private String              targetNodeUuid;
+    /** 结束节点样式 */
+    private String              targetStyleUuid;
+    /** 结束节点唯一Key */
+    private String              targetNodeDataKey;
+    /** 结束节点匹配模式 */
+    private String              targetNodeDataMode;
+
+    // ====================== 边样式 ======================
+
+    /** 边样式 */
+    private String              edgeStyleUuid;
+    /** 边HOVER */
+    private String              hoverName;
+
+    // ====================== 孩子节点 ======================
+
+    /** 孩子节点 */
+    private List<UnitViewTreeRelation> children;
+}