smartai2dian0/src/views/Home.vue

<template>
  <div>SmartAI</div>

  <div class="box">
    <Editor></Editor>
    <!-- <MindMap :content="mindMap_content" :box_style="box_style" :svg_style="svg_style" @extend="extend"></MindMap> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Editor from '../components/Editor.vue';
// import MindMap from '../components/MindMap.vue';
// // 系统第一页

const isFullScreen = ref(false);
const toFullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
};

const mindMap_content = ref('');
const test_mk_str = `
# 一体机 (AIO)\n## 定义\n- 集成系统\n  - 显示器\n    - 基本特点\n      - 显示技术\n        - 液晶显示器（LCD）\n          - TN\n          - IPS\n          - VA\n        - 有机发光二极管显示器（OLED）\n        - 微型LED显示器（MicroLED）\n      - 分辨率\n        - 1080p (1920x1080)\n        - 2K (2560x1440)\n        - 4K (3840x2160)\n      - 刷新率\n        - 60Hz\n        - 75Hz\n        - 120Hz\n        - 144Hz\n      - 响应时间\n        - 减少图像拖影\n        - 提高动态画面清晰度\n      - 接口类型\n        - VGA\n        - DVI\n        - HDMI\n        - DisplayPort\n    - 分类\n      - 按用途\n        - 普通显示器\n        - 专业显示器\n        - 游戏显示器\n      - 按尺寸\n        - 21.5英寸\n        - 24英寸\n        - 27英寸\n        - 32英寸\n      - 按曲率\n        - 平面显示器\n        - 曲面显示器\n    - 适用范围\n      - 个人电脑\n      - 笔记本电脑\n      - 电视\n      - 手机\n      - 平板电脑\n  - 主板\n  - 处理器\n  - 内存\n  - 存储设备\n  - 电源\n## 特点\n- 紧凑设计\n  - 节省空间\n  - 整洁环境\n- 易于安装和维护\n  - 快速连接\n  - 集成组件\n- 外观美观\n  - 现代化设计\n  - 适合装饰\n- 性能多样\n  - 办公应用\n  - 图形处理\n  - 游戏\n- 扩展性有限\n  - 内部空间小\n  - 升级能力低\n## 适用范围\n- 办公\n- 家庭娱乐\n- 教育\n
`;
const test_mk_str_extend = `
# markmap

- beautiful
- useful
- easy
  - hard
  - code
- interactive
  - age
  - name
  - job
    - shaa
    - hhe
    - nihao
      - jfksaj
    - zheg
      - 张三
      - 李四
      - 王五
      - 赵六
      - 孙七
`;

const box_style = ref({
  width: '100%',
  height: '100%'
});
const svg_style = ref({
  width: '100%',
  height: '100%'
});
const target_node = ref(null);
const root_full = ref(null);

const extend = (item) => {
  console.log(item);
  target_node.value = item.node;
  root_full.value = item.full;
  setTimeout(() => {
    // 调用接口返回数据传递过去
    mindMap_content.value = test_mk_str_extend;
  }, 1000);
};
onMounted(() => {
  mindMap_content.value = test_mk_str;
});
</script>
<style scoped>
.box {
  width: 100%;
  height: 800px;
}
</style>
-