zydx-plus 1.35.640 → 1.36.640

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.640",
+  "version": "1.36.640",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/graph/index.js

@@ -0,0 +1,6 @@
+import main from './src/graph.vue';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/graph/src/graph.css

@@ -0,0 +1,207 @@
+.graph-text{
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+.graph-input{
+    width: 150%;
+    height: 40px;
+    border: 2px solid #4B0C77;
+    border-radius: 10px;
+    position: absolute;
+    top: 50%;
+    left: -25%;
+    transform: translateY(-50%);
+}
+.graph-content{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+.full-screen {
+    background: #fff;
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
+.graph-tab{
+    height: 30px;
+    display: flex;
+    border: 1px solid #ccc;
+}
+.graph-tab button{
+    height: 100%;
+    background-color: #fff;
+    border: none;
+    border-right: 1px solid #ccc;
+    cursor: pointer;
+    padding: 0 10px;
+    flex: 1;
+}
+.graph-tab button:last-child{
+    border-right: none;
+}
+.graph-relation{
+    height: calc(100% - 30px);
+}
+.graph-relation-only{
+    height: 100%;
+}
+.graph-tool {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    background-color: #fff;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    padding: 10px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
+    z-index: 501;
+    width: 320px;
+    display: none;
+    margin-top: -180px;
+}
+.graph-tool-line {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    background-color: #fff;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    padding: 10px;
+    box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
+    z-index: 501;
+    width: 320px;
+    display: none;
+    margin-top: -140px;
+}
+.graph-tool-show {
+    animation: nodeShow 0.3s;
+    display: block;
+}
+
+.graph-tool-hide {
+    animation: nodeHide 0.3s;
+}
+
+@keyframes nodeHide {
+    0% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    100% {
+        opacity: 0;
+        transform: translateX(110%);
+    }
+}
+
+@keyframes nodeShow {
+    0% {
+        opacity: 0;
+        transform: translateX(110%);
+    }
+    10% {
+        opacity: 1;
+        transform: translateX(100%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+.style-li{
+    position: relative;
+}
+.style-li img{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+}
+.style-list {
+    display: flex;
+    padding: 5px 0;
+}
+.node-but {
+    display: flex;
+    padding: 5px 0;
+}
+
+.node-but button {
+    flex: 1;
+    margin-right: 5px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    padding: 5px 10px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.node-but button:last-child {
+    margin: 0;
+}
+.node-left {
+    display: flex;
+    padding-right: 10px;
+}
+
+.node-left > span {
+    display: inline-block;
+    width: 80px;
+    line-height: 32px;
+    padding-right: 10px;
+    box-sizing: border-box;
+}
+.style-title {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 5px 0 10px 0;
+}
+.padd {
+    padding-right: 0;
+}
+.backColor {
+    width: 93px;
+    height: 32px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    margin-left: -40px;
+    box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
+    cursor: pointer;
+    background-color: #549688;
+}
+.node-input{
+    width: 220px;
+    height: 32px;
+    border: 1px solid #aaa;
+    border-radius: 3px;
+    padding: 0 10px;
+    box-sizing: border-box;
+}
+.node-back-color{
+    width: 220px;
+    height: 32px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
+    cursor: pointer;
+    background-color: #549688;
+}
+.node-select :deep(.wrapper) {
+    width: 220px;
+}
+:deep(.rel-canvas-slot-behind) {
+    z-index: 600;
+}

package/src/components/graph/src/graph.vue

@@ -0,0 +1,502 @@
+<template>
+  <!--
+    关系图组件 - zydx-graph
+    基于 relation-graph-vue3 封装，支持节点增删、关联线绘制、节点/连线样式编辑、
+    拖拽、撤销/重做、全屏、下载图片（PNG）。
+    通过 v-model:value 与父组件双向同步图谱数据。
+  -->
+  <div class="graph-content" :class="{'full-screen': !fullShow}">
+    <div class="graph-tab" v-if="!readOnly">
+      <button :disabled="!nodeData" @click="add">添加节点</button>
+      <button :disabled="delDisabled" @click="del">删除节点</button>
+      <button :disabled="!nodeData && !lines" @click="style">设置样式</button>
+      <button @click="dots">关联线</button>
+      <button :disabled="undoDisabled" @click="undo">上一步</button>
+      <button :disabled="forwardDisabled" @click="redo">下一步</button>
+      <button @click="download">下载图片</button>
+      <button @click="fullTap(false)" v-if="fullShow && full">全屏</button>
+      <button @click="fullDel(true)" v-if="!fullShow">退出</button>
+    </div>
+    <div :class="{'graph-relation-only': readOnly, 'graph-relation': !readOnly}" ref="graphContent">
+      <RelationGraph ref="graphRef" :options="options" @node-click="onNodeClick" @line-click="onLineClick" @canvas-click="onCanvasClick" @node-drag-end="nodeDragEnd">
+        <template #graph-plug>
+          <RGEditingController v-if="!readOnly">
+            <RGEditingResize />
+          </RGEditingController>
+        </template>
+        <template #node="{node}">
+          <div class="graph-text" @dblclick="startEditNodeText(node)">
+            <input class="graph-input" v-if="node.textEdit" type="text" @blur="stopEditNodeText(node)" v-model="node.text" />
+            <span v-else :style="{'font-size': node.fontSize + 'px', 'line-height': node.lineHeight + 'px', 'font-weight': node.fontWeight, 'font-style': node.fontStyle, 'text-decoration': node.textDecoration}">{{ node.text }}</span>
+          </div>
+        </template>
+      </RelationGraph>
+    </div>
+    <Tool v-model:open="styleStatus" @select="toolSelect" :node="nodeData"></Tool>
+    <LineTool v-model:open="lineStatus" :node="lines" @select="toolSelectLine"></LineTool>
+  </div>
+</template>
+
+<script>
+/**
+ * zydx-graph 关系图组件
+ * 功能：节点增删、关联线绘制、样式编辑、拖拽、撤销/重做、全屏、导出 PNG。
+ * 数据通过 v-model:value（nodes/lines）与父组件双向同步。
+ */
+import RelationGraph, {RGEditingResize, RGEditingController} from 'relation-graph-vue3'
+import Tool from './tool.vue'
+import LineTool from './lineTool.vue'
+export default {
+  name: 'zydx-graph',
+  components: {
+    RelationGraph,
+    RGEditingResize,
+    RGEditingController,
+    Tool,
+    LineTool
+  },
+  data() {
+    return {
+      // ===== RelationGraph 配置项 =====
+      options: {
+        allowShowMiniToolBar: false, // 是否显示小工具栏
+        defaultLineMarker: {
+          markerWidth: 15,
+          markerHeight: 15,
+          refX: 10,
+          refY: 7,
+          data: "M 14 7 L 1 .3 L 4 7 L .4 13 L 14 7, Z"
+        },
+      },
+      graphInstance: null,  // RelationGraph 实例（通过 $refs.graphRef.getInstance() 获取）
+      nodeData: null,  // 当前选中的节点
+      nodes: null,     // 图谱数据（含 nodes / lines 数组），组件唯一数据源
+      lines: null,     // 当前选中的关联线
+      styleStatus: false, // 节点样式弹窗可见性
+      top: 0,          // 选中节点中心点纵坐标（用于样式弹窗定位）
+      left: 0,         // 选中节点中心点横坐标
+      angle: 0,        // 预留：节点旋转角度（暂未使用）
+      width: 0,        // 预留：节点宽度（暂未使用）
+      graphLine: false,// 关联线绘制态标记
+      lineStatus: false, // 关联线样式弹窗可见性
+      delDisabled: true, // 删除按钮禁用态（有子节点时禁用）
+      fullShow: true, // 全屏状态标识：true=非全屏，false=全屏
+      // ===== 撤销/重做历史栈 =====
+      /** 历史快照栈（深拷贝的 nodes 数据） */
+      history: [],
+      /** 当前历史指针位置 */
+      historyIndex: -1,
+      /** 上一步按钮禁用态 */
+      undoDisabled: true,
+      /** 下一步按钮禁用态 */
+      forwardDisabled: true,
+      // ===== 新建节点默认样式 =====
+      default: {
+        text: '节点',
+        fontSize: 14,
+        lineHeight: 1.5,
+        fontColor: 'rgba(255, 255, 255, 1)',
+        fontWeight: 'normal',
+        fontStyle: 'normal',
+        textDecoration: 'none',
+        color: 'rgba(64, 158, 255, 1)',
+        borderWidth: '10',
+        borderColor: 'rgba(64, 158, 255, 1)',
+        nodeShape: '0',
+        width: 100,
+        height: 100,
+        fixed: true // 固定坐标，避免被布局器重排
+      },
+      // ===== 新建关联线默认样式 =====
+      defaultLine: {
+        color: 'rgba(95,176,253,1)',
+        lineWidth: '2',
+        text: '',
+        fontColor: 'rgba(64, 158, 255, 1)',
+        lineShape: 1
+      },
+      top2: 0,        // 预留：关联线弹窗定位（暂未使用）
+      left2: 0,
+    }
+  },
+  emits: ['update:value'], // 数据变更时向父组件回传最新图谱数据（v-model:value）
+  props: {
+    /** 图谱数据（v-model），含 nodes / lines */
+    value: {
+      type: Object,
+      default: () => {}
+    },
+    /** 是否只读模式（隐藏工具栏、禁用编辑） */
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否显示全屏按钮 */
+    full: {
+      type: Boolean,
+      default: true
+    }
+  },
+  watch: {
+    // 外部 value 变化：无 lines 时（如初始单节点）用最新数据重载画布
+    value: {
+      handler(val) {
+        if(!val.lines) return
+        if (this.graphInstance&&this.nodes.lines.length === 0) this.safeLoadData(val);
+        this.nodes = val
+      },
+      deep: true,
+      immediate: true
+    },
+    // 内部 nodes 变化：同步回传给父组件（双向绑定）
+    nodes: {
+      handler(val) {
+        this.$emit('update:value', val)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // 等 DOM 就绪后获取 RelationGraph 实例并初始化数据
+    this.$nextTick(() => {
+      this.graphInstance = this.$refs.graphRef.getInstance();
+      this.init()
+    })
+    // 监听窗口尺寸变化，全屏/退出或窗口缩放时重绘画布
+    window.addEventListener('resize', this.handleWindowResize)
+  },
+  beforeUnmount() {
+    // 移除窗口事件监听，避免内存泄漏
+    window.removeEventListener('resize', this.handleWindowResize)
+  },
+  methods: {
+    // ===== 全屏相关 =====
+    /** 进入全屏：标记状态并让 body 全屏，随后重绘画布铺满视口 */
+    fullTap(v) {
+      this.fullShow = v
+      this.fullScreen(document.body)
+      // 进入全屏后容器尺寸变化，触发画布重绘以铺满全屏
+      this.$nextTick(() => {
+        if (this.$refs.graphRef && this.$refs.graphRef.onGraphResize) {
+          this.$refs.graphRef.onGraphResize()
+        }
+      })
+    },
+    // 退出全屏并复位状态
+    fullDel(v) {
+      this.fullShow = v
+      this.cancelFullscreen()
+      this.$nextTick(() => {
+        if (this.$refs.graphRef && this.$refs.graphRef.onGraphResize) {
+          this.$refs.graphRef.onGraphResize()
+        }
+      })
+    },
+    // 窗口尺寸变化：非全屏时复位 fullShow，并重绘画布
+    handleWindowResize() {
+      if (!document.fullscreenElement) {
+        this.fullShow = true
+      }
+      if (this.$refs.graphRef && this.$refs.graphRef.onGraphResize) {
+        this.$refs.graphRef.onGraphResize()
+      }
+    },
+    // 跨浏览器请求全屏
+    fullScreen(element) {
+      if (element.requestFullScreen) {
+        element.requestFullScreen()
+      } else if (element.webkitRequestFullScreen) {
+        element.webkitRequestFullScreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      }
+    },
+    // 跨浏览器退出全屏
+    cancelFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    },
+    // 节点样式选择回调：把样式应用到选中节点并同步到数据，记录历史
+    toolSelect(v) {
+      const node = this.graphInstance.getNodeById(this.nodeData.id)
+      node[v.type] = v.value
+      this.nodeUpdate(node, v)
+      this.recordHistory()
+    },
+    // 关联线样式选择回调：把样式应用到选中关联线并同步到数据，记录历史
+    toolSelectLine(v) {
+      const links = this.graphInstance.getLinks()
+      const lines = links.reduce((currentLines, link) => currentLines.concat(...link.relations), []);
+      lines.forEach(line => {
+        if(line.id === this.lines.id) line[v.type] = v.value
+      })
+      this.linesUpdate(this.lines, v)
+      this.recordHistory()
+    },
+    // 数据校验：无 lines 时构造一个默认根节点，否则原样返回
+    verification(v) {
+      if(!v.lines) {
+        return {
+          rootId: this.rootId(),
+          nodes: [{id: this.rootId(), ...this.default}],
+          lines: []
+        }
+      }else {
+        return v
+      }
+    },
+    // 添加节点
+    add() {
+      const id = this.rootId()
+      const node = this.graphInstance.getNodeById(this.nodeData.id)
+      // 从父节点出发，螺旋搜索一个不与已有节点重叠的空位
+      const pos = this.getFreePosition(node)
+      const data = {
+        nodes: [{id: id, x: pos.x, y: pos.y, ...this.default}],
+        lines: [{id: this.rootId(), from: this.nodeData.id, to: id, ...this.defaultLine}]
+      }
+      this.nodes.nodes.push(data.nodes[0])
+      this.nodes.lines.push(data.lines[0])
+      this.graphInstance.addNodes(data.nodes)
+      this.graphInstance.addLines(data.lines)
+      this.onCanvasClick()
+      this.recordHistory()
+    },
+    /**
+     * 从指定节点出发，螺旋向外搜索一个不与任何已有节点重叠的空位
+     * @param {{x:number,y:number,id:string}} parent 父节点
+     * @returns {{x:number,y:number}} 新节点坐标
+     */
+    getFreePosition(parent) {
+      const step = (this.default.width || 100) + 100 // 节点尺寸 + 100 间距，确保新节点明显离开父节点
+      // 候选方向：优先右侧、下方，再向四周螺旋扩展
+      const dirs = [
+        {x: 1, y: 0}, {x: 0, y: 1}, {x: 1, y: 1}, {x: -1, y: 1},
+        {x: -1, y: 0}, {x: 0, y: -1}, {x: -1, y: -1}, {x: 1, y: -1}
+      ]
+      for (let r = 1; r <= 30; r++) {
+        for (const d of dirs) {
+          const x = parent.x + d.x * step * r
+          const y = parent.y + d.y * step * r
+          if (this.isFree(x, y, parent.id)) return {x, y}
+        }
+      }
+      // 极端情况下兜底：在父节点右下方固定偏移
+      return {x: parent.x + step * 2, y: parent.y + step * 2}
+    },
+    /**
+     * 判断坐标 (x,y) 处放置新节点是否与已有节点重叠
+     * @param {number} x 候选中心点 x
+     * @param {number} y 候选中心点 y
+     * @param {string} excludeId 排除的节点（父节点本身）
+     * @returns {boolean} 不重叠返回 true
+     */
+    isFree(x, y, excludeId) {
+      const w = this.default.width || 100
+      const h = this.default.height || 100
+      const pad = 10
+      for (const n of this.nodes.nodes) {
+        if (n.id === excludeId) continue
+        const nw = n.width || w
+        const nh = n.height || h
+        if (Math.abs(x - n.x) < (w + nw) / 2 + pad &&
+            Math.abs(y - n.y) < (h + nh) / 2 + pad) {
+          return false
+        }
+      }
+      return true
+    },
+    // 删除节点：仅允许删除无子节点的末端节点，删除后记录历史
+    del() {
+      if(this.nodes.nodes.length === 1) return
+      const node = this.graphInstance.getNodeById(this.nodeData.id)
+      if(node.targetTo.length === 0) {
+        const index = this.nodes.nodes.findIndex(x => x.id === this.nodeData.id)
+        this.nodes.nodes.splice(index, 1)
+        this.graphInstance.setEditingNodes([]);
+        this.graphInstance.removeNodeById(this.nodeData.id)
+        this.recordHistory()
+      }
+    },
+    // 设置样式
+    style() {
+      if(this.lines) this.lineStatus = true
+      if(this.nodeData) this.styleStatus = true
+    },
+    // 关联线：进入连线绘制模式，松开后生成关联线并写入数据、记录历史
+    dots(e) {
+      this.graphInstance.startCreatingLinePlot(e, {
+        template: {
+          lineWidth: 3,
+          color: 'rgba(95,176,253,1)',
+          text: '',
+        },
+        onCreateLine: (from, to) => {
+          if (to.id) {
+            const line = {from: from.id, to: to.id, ...this.defaultLine}
+            this.graphInstance.addLines([line])
+            this.nodes.lines.push(line)
+            this.recordHistory()
+          }
+        },
+      })
+    },
+    // 初始化
+    init() {
+      this.nodes = this.verification(this.value)
+      this.safeLoadData(this.nodes); //加载数据（防闪烁）
+      this.graphInstance.setZoom(60);
+      this.recordHistory(); // 记录初始快照
+    },
+    // 点击节点：同步尺寸、设置选中态与编辑态、更新删除按钮可用性
+    onNodeClick(node) {
+      if(this.readOnly) return
+      this.widthUpdate()
+      this.delDisabled = node.targetTo.length !== 0
+      this.top = node.y + node.height / 2
+      this.left = node.x + node.width / 2
+      this.lines = null
+      this.nodeData = node
+      this.styleStatus = false
+      this.lineStatus = false
+      if(!node.textEdit) this.graphInstance.setEditingNodes([node]);
+    },
+    // 点击线
+    onLineClick(line) {
+      if(this.readOnly) return
+      this.widthUpdate()
+      this.lines = line
+    },
+    // 点击画布：清空选中/编辑态，取消所有节点编辑
+    onCanvasClick() {
+      this.widthUpdate()
+      this.nodeData = null
+      this.graphLine = false
+      this.styleStatus = false
+      this.lineStatus = false
+      this.delDisabled = true
+      this.graphInstance.setEditingNodes([]); // 点击画布时，取消编辑状态
+    },
+    // 双击节点：进入文本编辑态
+    startEditNodeText(node) {
+      if(this.readOnly) return
+      node.textEdit = true
+      this.graphInstance.setEditingNodes([])
+    },
+    // 拖拽结束：把节点最新坐标同步到数据并记录历史
+    nodeDragEnd(node) {
+      if(this.readOnly) return
+      this.nodeUpdate(node, {type: 'x', value: node.x})
+      this.nodeUpdate(node, {type: 'y', value: node.y})
+      this.recordHistory()
+    },
+    // 文本编辑结束（失焦）：保存节点文本到数据并记录历史
+    stopEditNodeText(node) {
+      node.textEdit = false
+      const data = this.nodes.nodes.filter(x => x.id === this.nodeData.id)
+      if(data.length > 0) data[0].text = node.text
+      this.nodeUpdate(node, {type: 'text', value: node.text})
+      this.recordHistory()
+    },
+    // 把节点某字段的变更写回 this.nodes 数据源
+    nodeUpdate(node, v) {
+      const data = this.nodes.nodes.filter(x => x.id === node.id)
+      if(data.length > 0) data[0][v.type] = v.value
+    },
+    // 把关联线某字段的变更写回 this.nodes.lines 数据源
+    linesUpdate(line, v) {
+      const data = this.nodes.lines.filter(x => x.id === line.id)
+      if(data.length > 0) data[0][v.type] = v.value
+    },
+    // 同步选中节点的宽高到数据源（拖拽缩放后调用）
+    widthUpdate() {
+      if(!this.nodeData || this.readOnly) return
+      const node = this.graphInstance.getNodeById(this.nodeData.id)
+      this.nodeUpdate(node, {type: 'width', value: node.width})
+      this.nodeUpdate(node, {type: 'height', value: node.height})
+    },
+    // 生成随机唯一 ID（用作节点/连线标识）
+    rootId() {
+      return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    },
+    // ===== 撤销/重做 =====
+    /**
+     * 记录一次历史快照（在每次数据变更后调用）
+     * 会丢弃当前指针之后的"重做分支"，再追加新状态
+     */
+    recordHistory() {
+      if (!this.nodes) return
+      if (this.historyIndex < this.history.length - 1) {
+        this.history = this.history.slice(0, this.historyIndex + 1)
+      }
+      this.history.push(JSON.parse(JSON.stringify(this.nodes)))
+      this.historyIndex = this.history.length - 1
+      this.updateUndoRedoState()
+    },
+    /** 上一步：回退到上一快照 */
+    undo() {
+      if (this.historyIndex <= 0) return
+      this.historyIndex--
+      this.restoreHistory()
+    },
+    /** 下一步：前进到下一快照 */
+    redo() {
+      if (this.historyIndex >= this.history.length - 1) return
+      this.historyIndex++
+      this.restoreHistory()
+    },
+    /**
+     * 防闪烁地加载数据。
+     * setJsonData 内部会把画布透明度设为 0.01，并在 doLayout 中延迟约 300ms 才恢复，
+     * 这期间画布几乎全透明，导致"闪"一下。这里不 await，立即把透明度复位，
+     * 覆盖那 300ms 的透明窗口，从而消除闪烁。初始化、撤销/重做、value 回写均走此封装。
+     * @param {Object} data 图谱数据
+     * @returns {Promise}
+     */
+    safeLoadData(data) {
+      const inst = this.graphInstance
+      const p = inst.setJsonData(data)
+      inst.options.canvasOpacity = 1
+      if (inst._dataUpdated) inst._dataUpdated()
+      p.then(() => {
+        inst.options.canvasOpacity = 1
+      })
+      return p
+    },
+    /** 用当前指针指向的快照恢复画布 */
+    restoreHistory() {
+      const snapshot = JSON.parse(JSON.stringify(this.history[this.historyIndex]))
+      this.nodes = snapshot
+      this.safeLoadData(snapshot)
+      this.nodeData = null
+      this.lines = null
+      this.graphInstance.setEditingNodes([])
+      this.delDisabled = true
+      this.updateUndoRedoState()
+    },
+    /** 更新上一步/下一步按钮的禁用态 */
+    updateUndoRedoState() {
+      this.undoDisabled = this.historyIndex <= 0
+      this.forwardDisabled = this.historyIndex >= this.history.length - 1
+    },
+    // 下载图片：将当前关系图导出为 png 并触发浏览器下载
+    async download() {
+      if (!this.graphInstance) return
+      try {
+        await this.graphInstance.downloadAsImage('png', 'graph')
+      } catch (e) {
+        console.error('[graph] 下载图片失败:', e)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped src="./graph.css"></style>

package/src/components/graph/src/lineTool.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="graph-tool-line" :class="{'graph-tool-show': show, 'graph-tool-hide': !show}">
+    <div class="style-li">
+      <img @click="nodeStyle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAADTFJREFUeF7t3VmspEUVB/A/r5oYH+TFBF/UFwcSjcsD4oOJaNQXjBERXMBdwRFhcEMdkUWRGVHGfQOVRVEU3AVBdBhGNlcWFRAFFBTcd0UxxVTP3NvTfbu66vxr/Xcy4WG+OlV16vzu+b6+Pc0e0EsZUAbmZmAP5UYZUAbmZ0BAVB3KwBoZEBCVhzIgIKoBZSAuA+ogcXnTqEEyICCDHLS2GZcBAYnLm0YNkgEBGeSgtc24DAhIXN40apAMCMggB61txmXAEshDAewL4B4AWwHcHrckjVIGgjMwqTk34HIANwePDLzQAshbATwTwN5Tc24HcBqATweuRZcpA6EZOBLAi2bU3LUAzgFwUmigRdelAHkMgAsAPHjBJA7I8QCuX7QY/b0ysCADjwBwIoADFlznoOxjkc0UIPcusYDrABwoJEtkTJdOZ8DhOBfAusDUXArgiYHXzr0sFsixAE5YcnIhWTJhunxnBpbFMRm4HsCWlDzGAHkQgLsiJxWSyMQNPCwWxyRlewK4OzZ/MUAeD+Cy2AkBCElC8gYbmorDpWs/ANti8xYD5IUAPhY7oR8nJIkJHGC4BQ6XJvdu18dj8xUD5GgAm2InXDFOSAyS2GkIKxwuPRsAbI7NUwyQ/QFcGDvh1DghMUpkR2Escbi0PBnARbH5iQGyF4BbYyecMU5IDJPZeChrHC4dDwFwW2xeYoC4udxvKw+KnVRIDDPXTygGDves/OKUFMUCeZR/J+t+KZPrdsswe22HYuBwdyZPAnBnSmpigbg53WewNqZMrk5inL02wzFwuEw8A8D5qSlJASIkqdnXeBaOZ/uPpSRnOBWIkCQfwbABqsfhTsYCiJAMW+PRG2fhcG8cfSZ6VTMGWgEREstT6TtWMzgsO8jkSPXg3ndxp+6OheM5rH+YZ9lBhCS1fPoe3xwORgcRkr6LPHZ3LBwH+19ax65r4ThGBxGShWkf6gIWjkMAnM3OJBOIHtzZp1d//KZxMG+xVh6dHtzrL2TGClk4ngvgLMaCZ8VkdxDdbuU6ybrm6QJHrg4iJHUVL3s1LBzPA3Ame/HT8XN1ECHJfbJl5usKR+4OIiRlijbXrCwczwfwqVybKN1BhKTUSXPnZeF4AYBPcpe+dvTct1h6d6vkaXPm7hZHqVssIeEUaomoLByHAvhEiQ3VcoslJDWcftoausdRQwfRM0lakZYazcJxGIAzSm1q1rwln0Gm16PfuNdUGfPXwsLhvrHz9NpSUBMQlxshqa1CVq9nKBw13WLpmaRuGG51LBxJ353LTlttHUTPJOwTj4s/JI5aO4iQxBUxaxQLh/vGw9T/SwBrzzvj1tpBhIR+9EETDI2j9g4iJEE1TLuIheMlAD5KW7Vx4No7iJAYH3hgOBaOlwL4SOAaqrisFSB6CzhfuQjHily3BERI+EhYOF4G4MP85dvP0BoQIbGvgUlE4ZiR2xaBCIk9EhaOlwP4kP1y80VsFYiQ2NWIcKyRy5aBCEk6EhaOVwD4YPryykdoHYiQxNcQC8crAXwgfll1jewBiJAsX1PCEZizXoAISeCBEz+VeziA94cvo40rewIiJItrjtU5usTh0tkbECGZj4SF4wgA71tss80regQiJLvXIgvHqwC8t83SD1t1r0CEZNf5C0eYhZlX9QxESHj/THY9gC0JddfM0N6BjIyE1TmGwdHrQ/qsn06jfVsKC8erAZzWzI9/g4WO0EEmaRoFiXAYwJiEGAnICLdbLBxHAniPYd01E2o0ID0jYeF4DYB3N1PRxgsdEUiPSITDGMaot1gr09jLMwkLx1EATiXVXTNhR+0gvTy4CweZ2uhAWr7dYuE4GsC7yHXXTHgB2XFUrd1usXBsALC5merNsFAB2ZXkVpAIRwYYekifneTakbBwHANgU8a6a2YqdZDdj6pWJMJRgJWAtNFJWDheC+CUAnXXzJQCMv+oaukkwlGQk4CsnfzSSFg4XgfgnQXrrpmpBWTxUZVCwsLxegAnL962rnAZEJCwOsiNRDjCzoV+lYCEpzgXEhaONwB4R/h2daU6yPI1wEYiHMufCXWEOsjy6WUiORfAuuWXtOaINwJ4u3HMYcIJSNxRs5BY4zgWwElxW9Qo3WKl1QADSdqKVo8WDoNsqoOkJbFWJG8CcGLa1jRaHcSmBmpDIhw253pfFHUQm2TWguTNAE6w2ZKiCIhtDZRGIhy256kOQshnKSRvAXA8YT/Dh9Qtln0J5EayEcDb7LehiLrF4tVALiTCwTtD3WKRc8tG4uIfR97D8OF1i8UtARYS4eCe287oAsJLNOuDh27F1wE4EMD1vOUrsp5BeDXAxDFZ9bUeyQ28bSiyOoh9DeTAIST25zYzooDYJjonjsnKf+w7yU9st6JousWyrYESOITE9gx3i6YOYpPgkjgmO/iR7yQ/tdmSoqiD2NRADTiExOYs1UGM81gTjsnWfug7yc+M9zpkON1ixR97jTgmu/mBR3Jj/PY0UrdY8TVQMw4hiT9X3WIZ5I6Fw32uyn340PL1fd9JbrIMOlIs3WItd9pMHO7zVYzPbgnJcme86moBCU8eG8dkJQwk3/Od5Obw7epKPYOE10AuHEISfiZZrlQHWZzm3DiYSK7xneTni7etK9RBFtdAKRxMJFd7JLcs3r6uUAeZXwOlcQhJBT4FZPYh1IKDieQq30l+UUEdVrsEAdn9aGrDISQF+QjI6uTXioOJ5ErfSX5ZsA6rnVpAdh1N7TiYSK7wSG6ttlILLUxAdiS+FRxCkhmKgLSHg4nku76T3Ja5DqudbnQgrXWO6UJifCxFSFZkeWQgreNgdpLtvpPcXu2P9kwLGxVILziEhAxlRCC94WAiudx3kl+R67Da8KMB6RUHE8k2j+TX1VYxcWEjAekdh5AQoIwCZBQcTCSX+U5yB6EOqw05ApDRcAiJIbfegYyKg4lkq+8kdxrWYbWhegYyOg42kmcB+E21lW20sF6BCMfqAmH8xv07vpN0jaRHIMIx+6cnA8m3PZLfGv3Ari5Mb0CEY+0SE5IlCfYERDjCDp+B5FLfSe4KW0I7V/UCRDiWqzkhCcxXD0CEI/Cwpy5jIPmW7yR3xy2pvlGtAxGOtJpiIXFvAf8ubWl1jG4ZiHDY1BADySW+kzSPpFUgwmGDg/nLxIs9kt/bLjVvtBaBCAenRhidpHkkrQERDg4OZif5pu8kf+AunRO9JSDCwamB6aiMTuKQuAf3P+bZgt0srQARDrszD4nEQHKR7yRNIWkBiHCElLT9NQwkF3okf7JfLidi7UCEg3PuoVGHR1IzEOEILWPudQwk3/Cd5M/cpadHrxWIcKSfrWWEYZHUCEQ4LEvbLhYDydd9J/mL3TJtI9UGRDhsz9c6GguJewv4r9aLtYhXExDhsDhRfgwGkq/5TlIdklqACAe/sC1nYCD5qkfyN8uFpsaqAYhwpJ5imfFDICkNRDjKFLfVrAwkX/Gd5O9Wi0yJUxKIcKScXD1jWUjcg/s/Sm+zFBDhKH3ytvMzkHzZd5KiSEoAEQ7b4qwlGgPJlzySf5baZG4gwlHqpPPM2x2SnECEI0+Rlp6FgeSLvpP8K/fmcgERjtwnW3a+bpDkACIcZYu11OwMJBf4TvLvXJtiAxGOXCdZ5zwsJO4t4P/k2DITiHDkOMH652AgOd93EjoSFhDhqL9wc66QgeQLHsk9zI0wgAgH88Tajd0kEmsgwtFuAedYOQPJ530n+S9jA5ZAhINxQv3FZCFxD+7/s06XFRDhsD6ZvuMxkJznO4kpEgsgwtF3MbN2x0DyOY/kXqtFpwIRDquTGDNO9UhSgAjHmEVtvWsGks/6TpK81hQg7msk909eweoAxwFwCdNrrAwwkGwBsD41jbFAjgDgFmD5Eg7LbLYXi4HkEABnp6QiBsj9AdwAYK+UiafGCodhMhsOZY3kFgD7AIj+ppQYII8FcKXhIQiHYTI7CGWN5HEArorNSwyQQwGcHjuhOodR5voOY4nkMABnxKYrBsgGAKfETrhinDqHQRI7DmGF5BgAm2LzFAPkqQDct+ClvIQjJXvjjLVA8jQA7qtNo14xQB4G4Mao2XYMEo6E5A04NBXJwwHcFJu3GCBurqsBPDpiUuGISJqG3Pe7sY0RedgGYL+IcTuHxAI5GMBZS04sHEsmTJevykAMkn0BbE/JYywQN6f75runB04uHIGJ0mVrZmAZJEcBODU1nylA3NxPAbAZwLo5C3H/61/3jpf7r17KgEUGDvC3W4+cE+wKAIcDuMZislQgbg0PAHAQgCf4P+7z+BcDuATAORaLVAxlYCoDD/QfRpzUnPvrrf7PmQDMvhneAohOTxnoNgMC0u3RamMWGRAQiywqRrcZEJBuj1Ybs8iAgFhkUTG6zYCAdHu02phFBgTEIouK0W0GBKTbo9XGLDIgIBZZVIxuMyAg3R6tNmaRAQGxyKJidJsBAen2aLUxiwwIiEUWFaPbDAhIt0erjVlkQEAssqgY3WZAQLo9Wm3MIgP/B7mSJva6gFwqAAAAAElFTkSuQmCC" alt="" />
+      <div class="style-title">连接线</div>
+      <div class="style-list">
+        <div class="node-left padd">
+          <span>文字</span>
+          <input class="node-input" v-model="text" type="text" placeholder="请输入连接线文字" />
+        </div>
+      </div>
+      <div class="style-list">
+        <div class="node-left padd node-select">
+          <span>线宽度</span>
+          <Select :options="optionLine" v-model:value="lineValue"></Select>
+        </div>
+      </div>
+      <div class="style-list">
+        <div class="node-left padd node-select">
+          <span>样式</span>
+          <Select :options="styleLine" v-model:value="styleValue"></Select>
+        </div>
+      </div>
+      <div class="style-list">
+        <div class="node-left padd">
+          <span>文字颜色</span>
+          <div @click="colorTap($event,'fontColor')" class="node-back-color"></div>
+        </div>
+      </div>
+      <div class="style-list">
+        <div class="node-left padd">
+          <span>线颜色</span>
+          <div @click="colorTap($event,'color')" class="node-back-color"></div>
+        </div>
+      </div>
+      <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
+        <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="color"></Coloring>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Select from '../../select/src/select.vue'
+import Coloring from '../../coloring/src/coloring.vue'
+
+export default {
+  components: {Select, Coloring},
+  data() {
+    return {
+      show: false,
+      colorShow: false,
+      optionLine: [
+        {label: "1", value: '1'},
+        {label: "2", value: '2'},
+        {label: "3", value: '3'},
+        {label: "4", value: '4'},
+        {label: "5", value: '5'},
+        {label: "6", value: '6'},
+        {label: "7", value: '7'},
+        {label: "8", value: '8'},
+        {label: "9", value: '9'},
+        {label: "10", value: '10'},
+      ],
+      lineValue: '2',
+      styleValue: '1',
+      type: '',
+      color: 'rgba(84,150,136,1)',
+      text: '',
+      styleLine: [
+        {label: "直线", value: '1'},
+        {label: "鱼尾", value: '3'},
+        {label: "折线", value: '4'},
+        {label: "弧线", value: '5'},
+        {label: "曲线", value: '6'},
+      ]
+    }
+  },
+  emits: ['update:open', 'select'],
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    node: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    open: {
+      handler(val) {
+        this.show = val
+        if(!val) {
+          this.colorShow = false
+          return
+        }
+        this.styleValue =  this.node.lineWidth || '2'
+        this.text = this.node.text || ''
+        this.styleValue = this.node.lineShape.toString() || '1'
+        if(this.type === 'fontColor') this.color = this.node.fontColor || 'rgba(64, 158, 255, 1)'
+        if(this.type === 'color') this.color = this.node.color || 'rgba(95,176,253,1)'
+      },
+      deep: true
+    },
+    show: {
+      handler(val) {
+        this.$emit('update:open', val)
+      },
+      deep: true
+    },
+    text: {
+      handler(val) {
+        this.$emit('select', {type: 'text', value: val})
+      },
+      deep: true
+    },
+    styleValue: {
+      handler(val) {
+        this.$emit('select', {type: 'lineShape', value: Number(val)})
+      },
+      deep: true
+    },
+    lineValue: {
+      handler(val) {
+        this.$emit('select', {type: 'lineWidth', value: val})
+      },
+      deep: true
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    nodeStyle() {
+      this.show = false
+    },
+    colorTap(e, v) {
+      this.type = v
+      this.colorShow = true
+    },
+    submit() {
+      this.colorShow = false
+    },
+    empty() {
+      this.colorShow = false
+    },
+    rgba(v) {
+      this.$emit('select', {type: this.type, value: v.rgba})
+    },
+  }
+}
+</script>
+
+<style scoped src="./graph.css"></style>

package/src/components/graph/src/tool.vue

@@ -0,0 +1,329 @@
+<template>
+  <!--
+    图谱节点样式工具 - graph-tool
+    用于编辑 relation-graph 中选中节点的文字、边框、背景、形状样式。
+  -->
+  <div class="graph-tool" :class="{'graph-tool-show': show, 'graph-tool-hide': !show}">
+    <div class="style-li">
+      <!-- 关闭按钮 -->
+      <img @click="nodeStyle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAADTFJREFUeF7t3VmspEUVB/A/r5oYH+TFBF/UFwcSjcsD4oOJaNQXjBERXMBdwRFhcEMdkUWRGVHGfQOVRVEU3AVBdBhGNlcWFRAFFBTcd0UxxVTP3NvTfbu66vxr/Xcy4WG+OlV16vzu+b6+Pc0e0EsZUAbmZmAP5UYZUAbmZ0BAVB3KwBoZEBCVhzIgIKoBZSAuA+ogcXnTqEEyICCDHLS2GZcBAYnLm0YNkgEBGeSgtc24DAhIXN40apAMCMggB61txmXAEshDAewL4B4AWwHcHrckjVIGgjMwqTk34HIANwePDLzQAshbATwTwN5Tc24HcBqATweuRZcpA6EZOBLAi2bU3LUAzgFwUmigRdelAHkMgAsAPHjBJA7I8QCuX7QY/b0ysCADjwBwIoADFlznoOxjkc0UIPcusYDrABwoJEtkTJdOZ8DhOBfAusDUXArgiYHXzr0sFsixAE5YcnIhWTJhunxnBpbFMRm4HsCWlDzGAHkQgLsiJxWSyMQNPCwWxyRlewK4OzZ/MUAeD+Cy2AkBCElC8gYbmorDpWs/ANti8xYD5IUAPhY7oR8nJIkJHGC4BQ6XJvdu18dj8xUD5GgAm2InXDFOSAyS2GkIKxwuPRsAbI7NUwyQ/QFcGDvh1DghMUpkR2Escbi0PBnARbH5iQGyF4BbYyecMU5IDJPZeChrHC4dDwFwW2xeYoC4udxvKw+KnVRIDDPXTygGDves/OKUFMUCeZR/J+t+KZPrdsswe22HYuBwdyZPAnBnSmpigbg53WewNqZMrk5inL02wzFwuEw8A8D5qSlJASIkqdnXeBaOZ/uPpSRnOBWIkCQfwbABqsfhTsYCiJAMW+PRG2fhcG8cfSZ6VTMGWgE[... omitted end of long line]" alt="" />
+
+      <!-- ===== 文字样式 ===== -->
+      <div class="style-title">文字</div>
+      <div class="style-list">
+        <div class="node-left">
+          <span>字号</span>
+          <Select :options="optionSize" v-model:value="sizeValue"></Select>
+        </div>
+        <div class="node-left padd">
+          <span>行高</span>
+          <Select :options="optionRow" v-model:value="rowValue"></Select>
+        </div>
+      </div>
+      <div class="node-but">
+        <button @click="colorTap($event,'fontColor')">颜色</button>
+        <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}"
+                @click="bolds">粗体</button>
+        <button :style="{'background-color': (italicAct)? '#549688': '#fff','color': (italicAct)? '#fff': '#333'}"
+                @click="italics">斜体</button>
+        <button :style="{'background-color': (scribeAct)? '#549688': '#fff','color': (scribeAct)? '#fff': '#333'}"
+                @click="scribes">划线</button>
+      </div>
+
+      <!-- ===== 边框样式 ===== -->
+      <div class="style-li">
+        <div class="style-title">边框</div>
+        <div class="style-list">
+          <div class="node-left">
+            <span>颜色</span>
+            <div @click="colorTap($event,'borderColor')" class="backColor"></div>
+          </div>
+          <div class="node-left padd">
+            <span>宽度</span>
+            <Select :options="optionLine" v-model:value="styleValue"></Select>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== 背景样式 ===== -->
+      <div class="style-li">
+        <div class="style-title">背景</div>
+        <div class="style-list">
+          <div class="node-left">
+            <span>颜色</span>
+            <div @click="colorTap($event,'color')" class="backColor"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ===== 形状样式 ===== -->
+      <div class="style-li">
+        <div class="style-title">形状</div>
+        <div class="style-list">
+          <div class="node-left padd">
+            <span>形状</span>
+            <Select :options="optionShape" v-model:value="shapeValue"></Select>
+          </div>
+        </div>
+      </div>
+
+      <!-- 颜色选择浮层 -->
+      <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
+        <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="color"></Coloring>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Select from '../../select/src/select.vue'
+import Coloring from '../../coloring/src/coloring.vue'
+
+/**
+ * graph-tool 图谱节点样式编辑组件
+ *
+ * 功能：
+ * 1. 编辑节点文字样式（字号、行高、颜色、粗体、斜体、划线）
+ * 2. 编辑节点边框样式（颜色、宽度）
+ * 3. 编辑节点背景颜色
+ * 4. 编辑节点形状（圆形/矩形）
+ *
+ * @emits update:open  同步弹窗开关状态
+ * @emits select       样式变更事件，payload: { type, value }
+ */
+export default {
+  components: { Coloring, Select },
+
+  data() {
+    return {
+      // ===== 弹窗状态 =====
+      /** 弹窗显示/隐藏 */
+      show: false,
+      /** 颜色选择器浮层坐标 top */
+      top: 0,
+
+      // ===== 字号选项 =====
+      optionSize: [
+        {label: "12", value: '12'},
+        {label: "14", value: '14'},
+        {label: "16", value: '16'},
+        {label: "18", value: '18'},
+        {label: "20", value: '20'},
+        {label: "24", value: '24'},
+        {label: "26", value: '26'},
+        {label: "28", value: '28'},
+        {label: "30", value: '30'}
+      ],
+      /** 当前字号 */
+      sizeValue: '14',
+
+      // ===== 行高选项 =====
+      optionRow: [
+        {label: "1", value: '1'},
+        {label: "1.5", value: '1.5'},
+        {label: "2", value: '2'},
+        {label: "2.5", value: '2.5'},
+        {label: "3", value: '3'}
+      ],
+      /** 当前行高 */
+      rowValue: '1.5',
+
+      // ===== 文字样式 =====
+      /** 当前颜色（共用：字体色/边框色/背景色） */
+      color: 'rgba(84,150,136,1)',
+      /** 粗体激活状态 */
+      boldAct: false,
+      /** 斜体激活状态 */
+      italicAct: false,
+      /** 下划线激活状态 */
+      scribeAct: false,
+
+      // ===== 边框宽度选项 =====
+      optionLine: [
+        {label: "0", value: '0'},
+        {label: "1", value: '1'},
+        {label: "2", value: '2'},
+        {label: "3", value: '3'},
+        {label: "4", value: '4'},
+        {label: "5", value: '5'},
+        {label: "6", value: '6'},
+        {label: "7", value: '7'},
+        {label: "8", value: '8'},
+        {label: "9", value: '9'},
+        {label: "10", value: '10'},
+      ],
+      /** 当前边框宽度 */
+      styleValue: '0',
+
+      // ===== 形状选项 =====
+      optionShape: [
+        {label: "圆形", value: '0'},
+        {label: "矩形", value: '1'},
+      ],
+      /** 当前节点形状（0: 圆形, 1: 矩形） */
+      shapeValue: '0',
+
+      // ===== 颜色选择器 =====
+      /** 颜色选择器显示状态 */
+      colorShow: false,
+      /** 当前颜色编辑类型：fontColor / borderColor / color */
+      type: ''
+    }
+  },
+
+  props: {
+    /** 弹窗开关（v-model 双向绑定） */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /** 当前选中节点的样式数据 */
+    node: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  emits: ['update:open', 'select'],
+
+  watch: {
+    /**
+     * 监听弹窗打开/关闭
+     * 打开时从 node 中回填当前样式值；关闭时隐藏颜色选择器
+     */
+    open: {
+      handler(val) {
+        this.show = val
+        if (!val) {
+          this.colorShow = false
+          return
+        }
+        // 从节点数据中回填当前样式
+        this.sizeValue = this.node.fontSize || '14'
+        this.rowValue = this.node.lineHeight || '1.5'
+        this.boldAct = this.node.fontWeight === 'bold'
+        this.italicAct = this.node.fontStyle === 'italic'
+        this.scribeAct = this.node.textDecoration === 'underline'
+        this.styleValue = this.node.borderWidth || '0'
+        this.shapeValue = this.node.nodeShape || '0'
+        // 根据当前颜色编辑类型初始化颜色值
+        if (this.type === 'fontColor') this.color = this.node.fontColor || 'rgba(255, 255, 255, 1)'
+        if (this.type === 'borderColor') this.color = this.node.borderColor || 'rgba(64, 158, 255, 1)'
+        if (this.type === 'color') this.color = this.node.color || 'rgba(64, 158, 255, 1)'
+      },
+      deep: true
+    },
+
+    /**
+     * 同步显示状态到父组件
+     */
+    show: {
+      handler(val) {
+        this.$emit('update:open', val)
+      },
+      deep: true
+    },
+
+    /** 字号变化 */
+    sizeValue: {
+      handler(val) {
+        this.$emit('select', {type: 'fontSize', value: val})
+      },
+      deep: true
+    },
+
+    /** 行高变化 */
+    rowValue: {
+      handler(val) {
+        this.$emit('select', {type: 'lineHeight', value: val})
+      },
+      deep: true
+    },
+
+    /** 边框宽度变化 */
+    styleValue: {
+      handler(val) {
+        this.$emit('select', {type: 'borderWidth', value: val})
+      },
+      deep: true
+    },
+
+    /** 形状变化 */
+    shapeValue: {
+      handler(val) {
+        this.$emit('select', {type: 'nodeShape', value: val})
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    /**
+     * 切换粗体并发出事件
+     */
+    bolds() {
+      this.boldAct = !this.boldAct
+      this.$emit('select', {type: 'fontWeight', value: (!this.boldAct) ? 'normal' : 'bold'})
+    },
+
+    /**
+     * 切换斜体并发出事件
+     */
+    italics() {
+      this.italicAct = !this.italicAct
+      this.$emit('select', {type: 'fontStyle', value: (!this.italicAct) ? 'normal' : 'italic'})
+    },
+
+    /**
+     * 切换下划线并发出事件
+     */
+    scribes() {
+      this.scribeAct = !this.scribeAct
+      this.$emit('select', {type: 'textDecoration', value: (!this.scribeAct) ? 'none' : 'underline'})
+    },
+
+    /**
+     * 关闭弹窗
+     */
+    nodeStyle() {
+      this.show = false
+    },
+
+    /**
+     * 打开颜色选择器
+     *
+     * @param {Event}  e - click 事件对象
+     * @param {string} v - 颜色类型：fontColor / borderColor / color
+     */
+    colorTap(e, v) {
+      this.type = v
+      this.colorShow = true
+    },
+
+    /**
+     * 颜色选择回调（实时预览）
+     *
+     * @param {{rgba: string}} v - 颜色选择器输出的 rgba 值
+     */
+    rgba(v) {
+      this.$emit('select', {type: this.type, value: v.rgba})
+    },
+
+    /**
+     * 颜色选择确认，关闭选择器
+     */
+    submit() {
+      this.colorShow = false
+    },
+
+    /**
+     * 颜色选择取消，关闭选择器
+     */
+    empty() {
+      this.colorShow = false
+    }
+  }
+}
+</script>
+
+<style scoped src="./graph.css"></style>

package/src/index.js

@@ -37,6 +37,7 @@ import seek from './components/seek/index';
 import sketchpad from './components/sketchpad/index';
 import chat from './components/chat/index';
 import variableBox from './components/variableBox/index';
+import graph from './components/graph/index';
 
 const components = [
     Calendar,
@@ -74,7 +75,8 @@ const components = [
     sketchpad,
     chat,
     variableBox,
-    dragPopup2
+    dragPopup2,
+    graph
 ];
 
 function install(app) {
@@ -87,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.640',
+    version: '1.36.640',
     install,
     Calendar,
     Message,
@@ -127,6 +129,7 @@ export default {
     sketchpad,
     chat,
     variableBox,
-    dragPopup2
+    dragPopup2,
+    graph
 };