优化,补充注释

src/views/chartFrame_manage/common/config.js

@@ -25,8 +25,8 @@ export const baseNode = {
         body:{
             fill:'#ECF2FE',//背景色
             stroke:'#0052D9',//边框色
-            strokeWidth:2,//边框宽度
-            strokeDasharray:0,//虚线
+            strokeWidth:1,//边框宽度
+            strokeDasharray:'',//虚线,如果赋值为0保存缩略图时会省略掉边框
         },
         label:{ //与svg text属性相同
             fill:'#0052D9',//文字颜色

src/views/chartFrame_manage/components/frameContainer.vue

@@ -43,9 +43,9 @@ export default {
         }
     },
     data() {
-        this.baseNode = baseNode
+        this.baseNode = baseNode //默认节点样式
         return {
-            graph:null,
+            graph:null,//画布对象
             /* contextMenu:[{
                 label: '编辑',
                 key: 'edit',
@@ -56,11 +56,12 @@ export default {
                 key: 'del',
                 icon: 'el-icon-delete'
             }], *///右键菜单
-            isSelectEdge:false,
-            isSelectNode:false,
-            currentCell:null,
-            canRedo:false,
-            canUndo:false,
+            isSelectEdge:false,//是否选择了边
+            isSelectNode:false,//是否选择了节点
+            currentCell:null,//当前选中的元素
+            canRedo:false,//是否能前进
+            canUndo:false,//是否能后退
+            cleanSelect:false,//是否清除选区
         };
     },
     watch:{
@@ -69,12 +70,12 @@ export default {
                 this.currentCell = null
             }
         },
-        FrameworkContent(newVal){
+        FrameworkContent(newVal){//当框架内容发生改变时,画布内容也发生改变
             newVal.length&&this.gragh&&this.graph.fromJSON(JSON.parse(newVal))
         }
     },
     computed:{
-        contextMenu(){
+        contextMenu(){//右键菜单,根据权限配置
             const editOption = {label: '编辑',key: 'edit',icon: 'el-icon-edit'}
             const deleteOption = {label: '删除',key: 'del',icon: 'el-icon-delete'}
             let MenuArr = []
@@ -86,9 +87,11 @@ export default {
         }
     },
     methods: {
+        //初始化画布
         init(){
             //如果需要在内部调用vue实例,则初始化时就将this传入
             this.graph = new myGraph('frameContainer',this)
+            //如果有内容,初始化画布内容
             this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
             //如果有内容,将画布内容居中
             this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
@@ -97,9 +100,11 @@ export default {
             //如果是编辑页，加载完成后清除历史数据
             !window.location.pathname.startsWith('/chartframe')&&this.graph.cleanHistory()
         },
+        //销毁画布
         dispose(){
             this.graph&&this.graph.dispose()
         },
+        //添加/编辑节点
         editNode(node){
             //获取视口范围
             const position = this.graph.getContentArea()
@@ -126,6 +131,7 @@ export default {
                 }})
             }
         },
+        //点击右键菜单事件
         handleContext(key){
             const select_cell = this.graph.getSelectedCells()
             if(!select_cell.length) return 
@@ -134,10 +140,10 @@ export default {
                 const {id} = select_cell[0]
                 const node = this.graph.getNodes().find(item=>item.id===id)
                 this.$emit('editNode',{
-                        nodeId:node.id,
-                        nodeName:node.label,
-                        nodeLink:node.data.nodeLink
-                    })
+                    nodeId:node.id,
+                    nodeName:node.label,
+                    nodeLink:node.data.nodeLink
+                })
             }
             if(key==='del'){
                 this.graph.removeCells(select_cell)
@@ -151,6 +157,7 @@ export default {
             dom.style.left = '-9999px';
             dom.style.top = '-9999px';
         },
+        //获取画布内容的svg数据
         getContentPic(){
             const { cells } = this.graph.toJSON();
             let svgData = ''
@@ -180,6 +187,7 @@ export default {
             })
             return svgData
         },
+        //获取画布节点并转换成对应格式
         getContentNodes(){
             return this.graph.getNodes().map(node=>{
                 return {

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -215,13 +215,10 @@ export default {
         this.sizeOptions=sizeOptions
         this.stokeWidthOptions=stokeWidthOptions
         return {
-            nodeStyle:{
+            nodeStyle:{ //回显用的
                 fontSize:14,
                 fill:'#333',
                 color:'#333',
-            },
-            edgeStyle:{
-
             },
             cellStyle:{
                 stroke:'#333',
@@ -266,6 +263,7 @@ export default {
         },
     },
     methods: {
+        //加粗,斜体,下划线样式
         changeStyleToggle(attr){
             const value = this.currentCell.attr(attr)
             const valueMap = {
@@ -279,13 +277,13 @@ export default {
                 :valueMap[attr][0]})
         },
         changeStyle({attr,value}){
-            console.log('arrr value',attr,value)
             this.currentCell.attr(attr,value)
             if(attr==='label/fontSize'){
                 this.nodeStyle.fontSize = value
             }
             
         },
+        //边框和线条通用样式:线条颜色,宽度,虚线
         valueChange(e){
             //t.target.value: "#9c3535"
             if(e.target){
@@ -305,6 +303,7 @@ export default {
         changeCellStyle({attr,value}){
             this.valueChange({target:{id:attr,value}})
         },
+        //撤销/恢复
         handleGraphHistory(type){
             this.graph.history[type]()
         }

src/views/chartFrame_manage/frameEditor.vue

@@ -69,24 +69,26 @@ export default {
             frameId:this.$route.query.frameId||0,
             frameDetail:{
                 FrameworkName:'',
-                FrameworkContent:''
+                FrameworkContent:'',
             },
             lockLoding:null,
-            modifyNode: {},
-            isModifyNodeDialogShow: false,
+            modifyNode: {},//正在编辑的节点
+            isModifyNodeDialogShow: false,//编辑节点弹窗
             rules: {
                 nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
                 nodeLink: [{ required: true, message: "请选择节点链接", trigger: "blur" }]
             },
-            myList:[]
+            myList:[],//我的图库列表
         };
     },
     methods: {
+        //获取正在编辑的节点,弹出弹窗
         handleEditNode(node = {}) {
             this.$refs.refForm && this.$refs.refForm.resetFields();
             this.modifyNode = _.cloneDeep(node);
             this.isModifyNodeDialogShow = true;
         },
+        //编辑节点,更改子组件节点信息,隐藏弹窗
         async editNode() {
             await this.$refs.refForm.validate();
             if(!this.$refs.container) return
@@ -94,9 +96,11 @@ export default {
             this.$message.success(`${this.modifyNode.nodeId ? '编辑' : '添加'}节点成功`);
             this.isModifyNodeDialogShow = false;
         },
+        //跳转至my eta
         goToList(item) {
             window.open(`/mychart?frameId=${item.MyChartClassifyId}`);
         },
+        //保存框架:内容验证->生成缩略图->获取节点信息,内容信息->编辑/添加框架
         async saveFrame(){
             if(!this.frameDetail.FrameworkName.length){
                 return this.$message.warning("请输入框架名称")
@@ -143,6 +147,7 @@ export default {
                     this.frameId = res.Data?res.Data.ChartFrameworkId:0
                     this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
                     this.$message.success("新增成功")
+                    //切换至编辑页
                     this.$router.replace({path:'/editframe',query:{frameId:this.frameId}})
                 })
             }
@@ -160,6 +165,7 @@ export default {
                 if(res.Ret!==200) return 
                 this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
             }
+            //获取到框架内容后再加载graph
             this.$nextTick(()=>{
                 this.$refs.container.init()
             })

src/views/chartFrame_manage/index.vue

@@ -1,6 +1,7 @@
 <template>
     <!-- 图库框架 列表页 -->
     <div class="chart-frame-wrap">
+        <!-- 控制目录栏展开收起-->
         <span class="slide-icon slide-right" @click="slideHandle" v-show="isSlideLeft">
             <i class="el-icon-d-arrow-right"></i>
         </span>
@@ -164,6 +165,7 @@
                         </div>
                     </div>
                     <div class="frame-wrap">
+                        <!--沙盘图组件-->
                         <FrameContainer ref="container"
                             :FrameworkContent="currentFrame.FrameworkContent"
                             @showDialog="handleShowDialog"/>
@@ -247,7 +249,7 @@ import { mychartInterface,chartFrameInterface } from '@/api/api.js';
 import {copyBlob} from '@/utils/svgToblob.js';
 export default {
     components:{ draggable, FrameContainer,chartDetail},
-    directives: {
+    directives: {//自定义指令调整目录栏宽度
         drag(el, bindings) {
             el.onmousedown = function (e) {
                 let init = e.clientX;
@@ -285,14 +287,15 @@ export default {
             /* select frame*/
             model:'frame',
             frameType:'my',
-            publicFrameList:[],
-            currentList:[],
-            myFrameList:[],
-            currentFrame:{},
+            publicFrameList:[],//公共框架列表
+            currentList:[],//选择公共框架时,框架列表
+            myFrameList:[],//我的框架列表
+            currentFrame:{},//选择的框架
             /* frame node */
-            myETADetailDialogShow:false,
-            modifyFrame:{},
-            isRenameDialogShow:false,
+            myETADetailDialogShow:false,//点击节点时,弹出myeta图表详情弹框
+            modifyFrame:{},//正在修改的框架
+            isRenameDialogShow:false,//重命名弹窗
+            /*my eta 图表详情操作相关 */
             chartClassify:0,
             classifyUserId:0,
             chartCode:'',
@@ -301,6 +304,7 @@ export default {
             myETAClassArr:[],
             copyToClassify:[],
             modeId:0,
+            /* 页面loading */
             lockLoding:null,
         };
     },
@@ -398,6 +402,7 @@ export default {
                 this.currentFrame.FrameworkContent&&this.$refs.container.init()
             })
         },
+        /* 拖动相关 */
         menuDragStart({oldIndex}){
             this.dragStartIndex = oldIndex
             this.dragFrame = this.myFrameList[oldIndex]
@@ -431,6 +436,7 @@ export default {
                 this.getMyList()
             })
         },
+        /*下拉框 */
         handleCommand(command){
             if(command.key==='edit'){
                 this.modifyFrame = _.cloneDeep(this.currentFrame)
@@ -451,10 +457,12 @@ export default {
                 })
             }
         },
+        //选择我的框架
         chooseFrame(item){
             this.frameType = 'my'
             this.changeModel('frame',item)
         },
+        /* 框架操作相关 */
         handleOption(type,data){
             const optionMap = {
                 'edit':this.handleEditFrame,