zydx-plus 1.36.646 → 1.36.648

package/package.json

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

package/src/components/mind/src/mind.vue

@@ -1,377 +1,557 @@
-<template>
-  <div class="mind" :class="{'full-screen':!fullShow}" :ref="id">
-    <div class="mind-table">
-      <div class="table-left" v-if="!readOnly">
-        <button :disabled="mindShow" @click="addNode">添加节点</button>
-        <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
-        <button :disabled="mindShow" @click="delNode">删除节点</button>
-        <button :disabled="mindShow" @click="associativeLine">关联线</button>
-        <button :disabled="lineShow" @click="lineStyle">关联样式</button>
-        <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
-        <div class="mind-btn">
-          <span>结构切换</span>
-          <div class="mind-btn-list">
-            <button @click="structure('logicalStructure')"
-                    :disabled="layoutList === 'logicalStructure' || layoutList === ''">向右结构
-            </button>
-            <button @click="structure('organizationStructure')" :disabled="layoutList === 'organizationStructure'">
-              向下结构
-            </button>
-            <button @click="structure('mindMap')" :disabled="layoutList === 'mindMap'">左右结构</button>
-          </div>
-        </div>
-        <button :disabled="retShow" @click="ret">上一步</button>
-        <button :disabled="forwardShow" @click="forward">下一步</button>
-        <button @click="reset" v-if="resetShow">重置位置</button>
-        <button v-if="protectShow" @click="preservation">保存</button>
-        <button @click="fullTap(false)" v-if="fullShow&&full">全屏</button>
-        <button @click="fullDel(true)" v-if="!fullShow">退出</button>
-      </div>
-    </div>
-    <div :id="id" class="mindMapContainer"></div>
-    <Tool v-model:open="styleStatus" :node="nodeData" @select="toolSelect"></Tool>
-    <LineTool v-model:open="lineStyleStatus" :node="lineData" @select="lineToolSelect"></LineTool>
-  </div>
-</template>
-
-<script>
-
-import MindMap from "simple-mind-map";
-import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
-import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
-import Export from 'simple-mind-map/src/plugins/Export.js'
-import Tool from "./tool.vue";
-import LineTool from "./lineTool.vue";
-
-MindMap.usePlugin(AssociativeLine)
-MindMap.usePlugin(TouchEvent)
-MindMap.usePlugin(Export)
-
-export default {
-  components: {LineTool, Tool},
-  name: "zydx-mind",
-  data() {
-    return {
-      id: null,
-      mindMap: null,
-      mindShow: true,
-      retShow: false,
-      forwardShow: false,
-      nodeData: null,
-      lineData: null,
-      colorShow: false,
-      lineStyleStatus: false,
-      lineShow: true,
-      top: 0,
-      activeNodes: null,
-      defaultData: {
-        "data": {
-          "text": "根节点"
-        },
-        "children": []
-      },
-      fullShow: true,
-      layoutList: '',
-      updateInit: false,
-      styleStatus: false,
-      activeLineNode: null,
-      activeLineToNode: null
-    }
-  },
-  props: {
-    data: { // 数据
-      type: Object,
-      default: {
-        "data": {
-          "text": "根节点"
-        },
-        "children": []
-      }
-    },
-    readOnly: { // 只读
-      type: Boolean,
-      default: false
-    },
-    protectShow: {
-      type: Boolean,
-      default: true
-    },
-    updateStatus: {
-      type: Boolean,
-      default: false
-    },
-    resetShow: {
-      type: Boolean,
-      default: true
-    },
-    full: {
-      type: Boolean,
-      default: true
-    }
-  },
-  beforeUnmount() {
-    this.mindMap.destroy()
-    this.mindMap = null
-  },
-  watch: {
-    readOnly: {
-      handler: function (val, oldVal) {
-        this.mindMap?.setMode(val ? 'readonly' : 'edit')
-      },
-      deep: true,
-      immediate: true
-    },
-    data: {
-      handler: function (val) {
-        if (this.updateInit) return
-        if (this.updateStatus) this.updateInit = true
-        if (Object.keys(val).length === 0) {
-          this.mindMap?.setData(this.defaultData)
-        } else {
-          this.mindMap?.setData(this.msgFun(val))
-          this.mindMap?.setLayout(val.layoutList || 'logicalStructure')
-        }
-      },
-      immediate: true
-    },
-    shapeValue(e) { // 形状
-      this.activeNodes.forEach(node => {
-        node.setStyle('shape', e)
-      })
-    },
-  },
-  mounted() {
-    this.id = this.randomId()
-    setTimeout(() => {
-      this.init()
-      const resizeObserver = new ResizeObserver(this.debounce(this.resizeCallback, 300));
-      resizeObserver.observe(this.$refs[this.id]);
-    }, 0)
-    window.onresize = () => {
-      if (!document.fullscreenElement) {
-        this.fullShow = true
-      }
-      this.mindMap?.resize()
-    }
-  },
-  methods: {
-    resizeCallback(entries) {
-      entries.forEach(entry => {
-        this.mindMap?.resize()
-      });
-    },
-    debounce(fn, delay = 500) {
-      let timer = null; // 定时器标识，用于重置延迟
-
-      return function (...args) {
-        // 每次触发时，清除之前的定时器（重置延迟）
-        clearTimeout(timer);
-        // 重新设置定时器，延迟执行目标函数
-        timer = setTimeout(() => {
-          fn.apply(this, args); // 保证this指向和参数传递正常
-        }, delay);
-      };
-    },
-    lineToolSelect(v) {
-      const associativeLineStyle = this.activeLineNode.getData('associativeLineStyle') || {}
-      const toNodeUid = this.activeLineToNode.getData('uid')
-      const lineStyle = associativeLineStyle[toNodeUid] || {}
-      this.activeLineNode.setData({
-        associativeLineStyle: {
-          ...associativeLineStyle,
-          [toNodeUid]: {
-            ...lineStyle,
-            ...v
-          }
-        }
-      })
-      this.mindMap.associativeLine.updateActiveLineStyle()
-    },
-    toolSelect(v) {
-      this.activeNodes.forEach(node => {
-        node.setStyle(v.type, v.value)
-      })
-    },
-    randomId() {
-      const id = Math.random().toString(36).substr(2)
-      return id.replace(/[0-9]/g, '')
-    },
-    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();
-      }
-    },
-    fullDel(v) {
-      this.fullShow = v
-      this.mindMap.view.setTransformData({
-        state: {scale: 1, x: 0, y: 0, sx: 0, sy: 0},
-        transform: {
-          a: 1,
-          b: 0,
-          c: 0,
-          d: 1,
-          e: 0,
-          f: 0,
-          originX: 0,
-          originY: 0,
-          rotate: 0,
-          scaleX: 1,
-          scaleY: 1,
-          shear: 0,
-          translateX: 0,
-          translateY: 0
-        }
-      })
-      this.cancelFullscreen()
-    },
-    // 全屏
-    fullTap(v) {
-      this.fullShow = v
-      this.fullScreen(document.body)
-    },
-    msgFun(e) {
-      if (e.msg) {
-        return Object.keys(e.msg).length === 0 ? this.defaultData : e.msg
-      } else {
-        return Object.keys(e).length === 0 ? this.defaultData : e
-      }
-    },
-    // 初始化
-    init() {
-      const that = this
-      this.mindMap = new MindMap({
-        el: document.getElementById(that.id),
-        openPerformance: true,
-        enableFreeDrag: false, // 是否开启自由拖拽
-        enableNodeTransitionMove: false, // 是否开启节点过渡动画
-        layout: that.data.layoutList || 'logicalStructure', // 节点布局方式
-        maxHistoryCount: 100, // 最大历史记录数
-        maxNodeCacheCount: 100, // 最大节点缓存数
-        data: that.msgFun(that.data)
-      });
-      this.mindMap.setMode(this.readOnly ? 'readonly' : 'edit')
-      // 节点点击
-      this.mindMap.on('node_active', (node, activeNodeList) => {
-        this.nodeData = node
-        this.activeNodes = activeNodeList
-        this.mindShow = !node
-        if (node) {
-          this.lineData = null
-          this.lineShow = true
-        }
-      })
-      // 后退前进
-      this.mindMap.on('back_forward', (index, len) => {
-        this.retShow = index <= 0;
-        this.forwardShow = index >= len - 1
-      })
-      // 关联线点击
-      this.mindMap.on('associative_line_click', (path, clickPath, node, toNode) => {
-        this.activeLineNode = node
-        this.activeLineToNode = toNode
-        this.lineData = this.mindMap.associativeLine.getStyleConfig(node, toNode)
-        this.lineShow = false
-      })
-      // 点击画布
-      this.mindMap.on('draw_click', () => {
-        this.lineStyleStatus = false
-        this.styleStatus = false
-        this.lineShow = true
-        this.mindShow = true
-        this.nodeData = null
-        this.activeNodes = []
-        this.lineData = null
-      })
-      // 数据改变
-      this.mindMap.on('data_change', (data) => {
-        this.$emit('dataChange', {
-          data: data,
-          url: ''
-        })
-      })
-    },
-    structure(v) {
-      this.layoutList = v
-      this.mindMap.setLayout(this.layoutList)
-    },
-    // 保存
-    preservation() {
-      let that = this
-      this.styleStatus = false
-      this.lineStyleStatus = false
-      that.$emit('preservation', {
-        data: {
-          msg: that.mindMap.getData(),
-          layoutList: this.layoutList
-        },
-        url: ''
-      })
-    },
-    getContent() {
-      let that = this
-      return new Promise((rl, rs) => {
-        rl({
-          data: that.mindMap.getData(),
-          url: ''
-        })
-      })
-    },
-    getImage(v) {
-      const name = v ? v : 'mind'
-      this.mindMap.export('png', true, name, true, false, null, true)
-    },
-    lineStyle() {
-      this.lineStyleStatus = true
-      this.styleStatus = false
-    },
-    nodeStyle() {
-      this.styleStatus = true
-      this.lineStyleStatus = false
-    },
-    // 关联线
-    associativeLine() {
-      this.mindMap.associativeLine.createLineFromActiveNode()
-    },
-    // 前进
-    forward() {
-      this.mindMap.execCommand('FORWARD')
-    },
-    // 返回
-    ret() {
-      this.mindMap.execCommand('BACK')
-    },
-    // 添加节点
-    addNode() {
-      this.mindMap.execCommand('INSERT_CHILD_NODE')
-    },
-    // 删除节点
-    delNode() {
-      this.mindMap.execCommand('REMOVE_NODE')
-    },
-    // 兄弟节点
-    brotherNode() {
-      this.mindMap.execCommand('INSERT_NODE')
-    },
-    reset() {
-      this.mindMap.renderer.setRootNodeCenter()
-    }
-  }
-}
-</script>
-
-<style scoped src="./mind.css"></style>
+<template>
+  <!--
+    思维导图组件 - zydx-mind
+    基于 simple-mind-map 封装，支持节点编辑、关联线、样式配置、撤销/重做、结构切换、保存/导出。
+  -->
+  <div class="mind" :class="{'full-screen':!fullShow}" :ref="id">
+    <div class="mind-table">
+      <!-- 工具栏（readOnly 模式下隐藏） -->
+      <div class="table-left" v-if="!readOnly">
+        <!-- 节点操作 -->
+        <button :disabled="mindShow" @click="addNode">添加节点</button>
+        <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
+        <button :disabled="mindShow" @click="delNode">删除节点</button>
+        <!-- 关联线操作 -->
+        <button :disabled="mindShow" @click="associativeLine">关联线</button>
+        <button :disabled="lineShow" @click="lineStyle">关联样式</button>
+        <!-- 节点样式 -->
+        <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
+
+        <!-- 结构切换 -->
+        <div class="mind-btn">
+          <span>结构切换</span>
+          <div class="mind-btn-list">
+            <button @click="structure('logicalStructure')"
+                    :disabled="layoutList === 'logicalStructure' || layoutList === ''">向右结构</button>
+            <button @click="structure('organizationStructure')" :disabled="layoutList === 'organizationStructure'">向下结构</button>
+            <button @click="structure('mindMap')" :disabled="layoutList === 'mindMap'">左右结构</button>
+          </div>
+        </div>
+
+        <!-- 撤销/重做 -->
+        <button :disabled="retShow" @click="ret">上一步</button>
+        <button :disabled="forwardShow" @click="forward">下一步</button>
+
+        <!-- 重置视角 / 保存 / 全屏 -->
+        <button @click="reset" v-if="resetShow">重置位置</button>
+        <button v-if="protectShow" @click="preservation">保存</button>
+        <button @click="fullTap(false)" v-if="fullShow&&full">全屏</button>
+        <button @click="fullDel(true)" v-if="!fullShow">退出</button>
+      </div>
+    </div>
+
+    <!-- 思维导图画布 -->
+    <div :id="id" class="mindMapContainer"></div>
+
+    <!-- 节点样式弹窗 -->
+    <Tool v-model:open="styleStatus" :node="nodeData" @select="toolSelect"></Tool>
+    <!-- 关联线样式弹窗 -->
+    <LineTool v-model:open="lineStyleStatus" :node="lineData" @select="lineToolSelect"></LineTool>
+  </div>
+</template>
+
+<script>
+import MindMap from "simple-mind-map";
+import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
+import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
+import Export from 'simple-mind-map/src/plugins/Export.js'
+import Tool from "./tool.vue";
+import LineTool from "./lineTool.vue";
+
+// 注册插件
+MindMap.usePlugin(AssociativeLine)
+MindMap.usePlugin(TouchEvent)
+MindMap.usePlugin(Export)
+
+/**
+ * zydx-mind 思维导图组件
+ *
+ * 功能：
+ * 1. 基于 simple-mind-map 渲染可交互的思维导图
+ * 2. 支持添加/删除/兄弟节点、关联线绘制
+ * 3. 支持节点样式（文字/边框/背景/形状）和关联线样式编辑
+ * 4. 支持撤销/重做、结构切换（向右/向下/左右）
+ * 5. 支持只读/编辑模式切换
+ * 6. 支持全屏显示、重置视角、保存/导出
+ *
+ * @emits confirm         数据变更，payload: { data, url }
+ * @emits dataChange      数据变更，payload: { data, url }
+ * @emits preservation    保存事件，payload: { data: { msg, layoutList }, url }
+ */
+export default {
+  components: { LineTool, Tool },
+  name: "zydx-mind",
+
+  data() {
+    return {
+      // ===== 实例标识 =====
+      /** 动态生成的唯一 ref 标识 */
+      id: null,
+
+      // ===== MindMap 实例 =====
+      /** simple-mind-map 实例 */
+      mindMap: null,
+
+      // ===== 工具栏状态 =====
+      /** 节点操作按钮禁用状态（未选中节点时禁用） */
+      mindShow: true,
+      /** 撤销按钮禁用状态 */
+      retShow: false,
+      /** 重做按钮禁用状态 */
+      forwardShow: false,
+      /** 关联线按钮禁用状态（点击关联线时禁用，防止对象混淆） */
+      lineShow: true,
+      /** 全屏状态标识 */
+      fullShow: true,
+      /** 当前布局类型 */
+      layoutList: '',
+
+      // ===== 样式弹窗状态 =====
+      /** 节点样式弹窗可见性 */
+      styleStatus: false,
+      /** 关联线样式弹窗可见性 */
+      lineStyleStatus: false,
+
+      // ===== 当前选中对象 =====
+      /** 当前激活节点（用于样式编辑） */
+      nodeData: null,
+      /** 当前激活的节点列表 */
+      activeNodes: null,
+      /** 关联线起点节点 */
+      activeLineNode: null,
+      /** 关联线终点节点 */
+      activeLineToNode: null,
+      /** 当前关联线样式数据 */
+      lineData: null,
+
+      // ===== 数据更新标志 =====
+      /** 是否已完成首次数据更新（用于 updateStatus 模式） */
+      updateInit: false,
+
+      // ===== 默认数据 =====
+      /** 无数据时的默认根节点 */
+      defaultData: {
+        "data": { "text": "根节点" },
+        "children": []
+      }
+    }
+  },
+
+  props: {
+    /** 思维导图数据 */
+    data: {
+      type: Object,
+      default: {
+        "data": { "text": "根节点" },
+        "children": []
+      }
+    },
+    /** 是否只读模式 */
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否显示保存按钮 */
+    protectShow: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否启用数据更新模式（仅允许一次外部数据更新） */
+    updateStatus: {
+      type: Boolean,
+      default: false
+    },
+    /** 是否显示重置位置按钮 */
+    resetShow: {
+      type: Boolean,
+      default: true
+    },
+    /** 是否显示全屏按钮 */
+    full: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  watch: {
+    /**
+     * 监听只读模式切换
+     */
+    readOnly: {
+      handler: function (val, oldVal) {
+        this.mindMap?.setMode(val ? 'readonly' : 'edit')
+      },
+      deep: true,
+      immediate: true
+    },
+
+    /**
+     * 监听数据变化，更新导图内容
+     * 当 updateStatus 为 true 时，仅允许一次外部更新
+     */
+    data: {
+      handler: function (val) {
+        if (this.updateInit) return
+        if (this.updateStatus) this.updateInit = true
+        if (Object.keys(val).length === 0) {
+          this.mindMap?.setData(this.defaultData)
+        } else {
+          this.mindMap?.setData(this.msgFun(val))
+          this.mindMap?.setLayout(val.layoutList || 'logicalStructure')
+        }
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    // 生成唯一 ID，避免多实例 ref 冲突
+    this.id = this.randomId()
+
+    this.$nextTick(() => {
+      this.init()
+
+      // 监听容器尺寸变化，自动调整导图
+      const resizeObserver = new ResizeObserver(this.debounce(this.resizeCallback, 300));
+      resizeObserver.observe(this.$refs[this.id]);
+    })
+
+    // 监听窗口尺寸变化
+    window.addEventListener('resize', this.handleWindowResize)
+  },
+
+  beforeUnmount() {
+    // 移除窗口事件监听
+    window.removeEventListener('resize', this.handleWindowResize)
+    // 销毁 MindMap 实例
+    this.mindMap?.destroy()
+    this.mindMap = null
+  },
+
+  methods: {
+    /**
+     * 获取当前思维导图数据（Promise 形式）
+     * 供外部组件通过 $refs 调用
+     *
+     * @returns {Promise<{data: Object, url: string}>}
+     */
+    getContent() {
+      return new Promise((resolve, reject) => {
+        resolve({
+          data: this.mindMap.getData(),
+          url: ''
+        })
+      })
+    },
+
+    /**
+     * 导出思维导图为图片
+     *
+     * @param {string} [v='mind'] - 导出文件名
+     */
+    getImage(v) {
+      const name = v ? v : 'mind'
+      this.mindMap.export('png', true, name, true, false, null, true)
+    },
+
+    /**
+     * 保存思维导图数据
+     * 关闭所有弹窗后发出 preservation 事件
+     *
+     * @emits preservation
+     */
+    preservation() {
+      this.styleStatus = false
+      this.lineStyleStatus = false
+      this.$emit('preservation', {
+        data: {
+          msg: this.mindMap.getData(),
+          layoutList: this.layoutList
+        },
+        url: ''
+      })
+    },
+
+    /**
+     * 切换导图结构布局
+     *
+     * @param {string} v - 布局类型：logicalStructure / organizationStructure / mindMap
+     */
+    structure(v) {
+      this.layoutList = v
+      this.mindMap.setLayout(this.layoutList)
+    },
+
+    /** 添加子节点 */
+    addNode() {
+      this.mindMap.execCommand('INSERT_CHILD_NODE')
+    },
+
+    /** 添加兄弟节点 */
+    brotherNode() {
+      this.mindMap.execCommand('INSERT_NODE')
+    },
+
+    /** 删除当前节点 */
+    delNode() {
+      this.mindMap.execCommand('REMOVE_NODE')
+    },
+
+    /** 从当前节点创建关联线 */
+    associativeLine() {
+      this.mindMap.associativeLine.createLineFromActiveNode()
+    },
+
+    /** 打开关联线样式弹窗 */
+    lineStyle() {
+      this.lineStyleStatus = true
+      this.styleStatus = false
+    },
+
+    /** 打开节点样式弹窗 */
+    nodeStyle() {
+      this.styleStatus = true
+      this.lineStyleStatus = false
+    },
+
+    /** 撤销 */
+    ret() {
+      this.mindMap.execCommand('BACK')
+    },
+
+    /** 重做 */
+    forward() {
+      this.mindMap.execCommand('FORWARD')
+    },
+
+    /** 重置视口位置，将根节点居中 */
+    reset() {
+      this.mindMap.renderer.setRootNodeCenter()
+    },
+    /**
+     * 进入全屏
+     *
+     * @param {boolean} v - 全屏状态
+     */
+    fullTap(v) {
+      this.fullShow = v
+      this.fullScreen(document.body)
+    },
+
+    /**
+     * 退出全屏并重置变换
+     *
+     * @param {boolean} v - 全屏状态
+     */
+    fullDel(v) {
+      this.fullShow = v
+      // 重置画布变换状态
+      this.mindMap.view.setTransformData({
+        state: { scale: 1, x: 0, y: 0, sx: 0, sy: 0 },
+        transform: {
+          a: 1, b: 0, c: 0, d: 1, e: 0, f: 0,
+          originX: 0, originY: 0, rotate: 0,
+          scaleX: 1, scaleY: 1, shear: 0,
+          translateX: 0, translateY: 0
+        }
+      })
+      this.cancelFullscreen()
+    },
+
+    /**
+     * 跨浏览器全屏 API
+     *
+     * @param {HTMLElement} element - 要全屏的元素
+     */
+    fullScreen(element) {
+      if (element.requestFullScreen) {
+        element.requestFullScreen()
+      } else if (element.webkitRequestFullScreen) {
+        element.webkitRequestFullScreen()
+      } else if (element.mozRequestFullScreen) {
+        element.mozRequestFullScreen()
+      }
+    },
+
+    /**
+     * 跨浏览器退出全屏 API
+     */
+    cancelFullscreen() {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    },
+
+    /**
+     * 节点样式选择回调
+     * 将样式应用到所有选中的节点
+     *
+     * @param {{type: string, value: string|number}} v - 样式类型和值
+     */
+    toolSelect(v) {
+      this.activeNodes.forEach(node => {
+        node.setStyle(v.type, v.value)
+      })
+    },
+
+    /**
+     * 关联线样式选择回调
+     * 更新当前选中关联线的样式数据
+     *
+     * @param {Object} v - 关联线样式配置
+     */
+    lineToolSelect(v) {
+      const associativeLineStyle = this.activeLineNode.getData('associativeLineStyle') || {}
+      const toNodeUid = this.activeLineToNode.getData('uid')
+      const lineStyle = associativeLineStyle[toNodeUid] || {}
+      this.activeLineNode.setData({
+        associativeLineStyle: {
+          ...associativeLineStyle,
+          [toNodeUid]: { ...lineStyle, ...v }
+        }
+      })
+      this.mindMap.associativeLine.updateActiveLineStyle()
+    },
+
+    /**
+     * 窗口尺寸变化处理
+     */
+    handleWindowResize() {
+      if (!document.fullscreenElement) {
+        this.fullShow = true
+      }
+      this.mindMap?.resize()
+    },
+
+    // =========================================================================
+    // 工具方法
+    // =========================================================================
+
+    /**
+     * 解析数据格式，兼容嵌套 msg 字段
+     * 如果数据为空则返回默认数据
+     *
+     * @param {Object} e - 外部传入的数据
+     * @returns {Object} 导图数据
+     */
+    msgFun(e) {
+      if (e.msg) {
+        return Object.keys(e.msg).length === 0 ? this.defaultData : e.msg
+      } else {
+        return Object.keys(e).length === 0 ? this.defaultData : e
+      }
+    },
+
+    /**
+     * 生成纯字母随机 ID
+     *
+     * @returns {string}
+     */
+    randomId() {
+      const id = Math.random().toString(36).substr(2)
+      return id.replace(/[0-9]/g, '')
+    },
+
+    /**
+     * 防抖函数
+     *
+     * @param {Function} fn    - 目标函数
+     * @param {number}   delay - 延迟毫秒数，默认 500
+     * @returns {Function} 防抖后的函数
+     */
+    debounce(fn, delay = 500) {
+      let timer = null;
+      return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          fn.apply(this, args);
+        }, delay);
+      };
+    },
+
+    /**
+     * 容器尺寸变化回调
+     *
+     * @param {ResizeObserverEntry[]} entries
+     */
+    resizeCallback(entries) {
+      entries.forEach(entry => {
+        this.mindMap?.resize()
+      });
+    },
+
+    /**
+     * 初始化 simple-mind-map 实例并注册事件监听
+     */
+    init() {
+      this.mindMap = new MindMap({
+        el: document.getElementById(this.id),
+        openPerformance: true,
+        enableFreeDrag: false,
+        enableNodeTransitionMove: false,
+        layout: this.data.layoutList || 'logicalStructure',
+        maxHistoryCount: 100,
+        maxNodeCacheCount: 100,
+        data: this.msgFun(this.data)
+      });
+
+      // 根据只读属性设置模式
+      this.mindMap.setMode(this.readOnly ? 'readonly' : 'edit')
+
+      // ---- 事件监听 ----
+
+      // 节点点击/激活
+      this.mindMap.on('node_active', (node, activeNodeList) => {
+        this.nodeData = node
+        this.activeNodes = activeNodeList
+        this.mindShow = !node
+        if (node) {
+          this.lineData = null
+          this.lineShow = true
+        }
+      })
+
+      // 撤销/重做状态更新
+      this.mindMap.on('back_forward', (index, len) => {
+        this.retShow = index <= 0;
+        this.forwardShow = index >= len - 1
+      })
+
+      // 关联线点击
+      this.mindMap.on('associative_line_click', (path, clickPath, node, toNode) => {
+        this.activeLineNode = node
+        this.activeLineToNode = toNode
+        this.lineData = this.mindMap.associativeLine.getStyleConfig(node, toNode)
+        this.lineShow = false
+      })
+
+      // 点击画布空白区域（取消所有选中）
+      this.mindMap.on('draw_click', () => {
+        this.lineStyleStatus = false
+        this.styleStatus = false
+        this.lineShow = true
+        this.mindShow = true
+        this.nodeData = null
+        this.activeNodes = []
+        this.lineData = null
+      })
+
+      // 数据变更通知父组件
+      this.mindMap.on('data_change', (data) => {
+        this.$emit('dataChange', {
+          data: data,
+          url: ''
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped src="./mind.css"></style>

package/src/components/seek/src/word.css

@@ -245,9 +245,6 @@ input[name='check'] {
     font-weight: 700;
     flex: 1;
 }
-.padd{
-    padding-bottom: 24px;
-}
 .buts-disabled{
     color: #797979 !important;
     cursor: not-allowed;

package/src/components/seek/src/word.vue

@@ -6,7 +6,7 @@
       <div class="paper-choice" :class="{'array-ch': !styleText(item.testKey)}" v-for="(item,index) in value">
         <div class="subject">
           <!-- 题目标题区域：有题号展示题号，否则展示序号 -->
-          <div class="subject-title" :class="{'padd': item.top !== 0}" v-if="item.subject">
+          <div class="subject-title" v-if="item.subject">
             <!-- 多选模式下的勾选框 -->
             <input v-if="multipleShow" type="checkbox" :disabled="item.disabled" :checked="item.checked" @change="checkboxChange($event,index)"
                    name="check"/>

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.36.646',
+    version: '1.36.648',
     install,
     Calendar,
     Message,