工业仿真（simulation）--前端（一）

​

这篇文章主要介绍仿真软件的一个前端框架

前端主要运用到了两个较为重要的组件

1. Ant Design of Vue，官网地址：Ant Design of Vue - Ant Design Vue
2. AntV x6，官网地址：X6 图编辑引擎 | AntV

第一个是页面的UI组件，第二个是画布编辑组件，图-1就是页面的初始页面，该软件没有登录功能，无需做登陆界面

​

图 -1

该页面主要分为7部分

1. 顶部标题栏【控制软件关闭，最大化最小化】
2. 顶部菜单栏【包含操作的功能按钮】
3. 左侧资源管理器【包含图层，项目文件，工具预设】
4. 中间画布以及工具箱【主要的操作区域，用户可以从工具箱上拖拽下来发生器，吸收器，缓冲区......等节点】
5. 中间下方的消息提示区【包含系统的提示信息，画布操作/历史数据，仿真控制器】
6. 右侧属性栏【当用户选择画布上的节点后，属性栏显示该节点的属性数据】
7. 底部页脚栏位【显示系统的版本号】

在中间部分，用户是可以通过拖拽的方式来改变区域的尺寸，如下

​

主要的核心组件是reka-ui，核心代码如下

<template>
  <div class="home-container">
    <PageTitle />
    <PageMenu />

    <div class="main-content">
      <SplitterGroup id="main-operation-area" direction="horizontal">
        <SplitterPanel
          id="resource-bar"
          ref="resourceRef"
          :min-size="0"
          :max-size="15"
          :default-size="13"
          class="bg-white border rounded-xl flex items-center justify-center"
        >
          <div style="height: 100%; width: 100%">
            <ResourceHome />
          </div>
        </SplitterPanel>
        <SplitterResizeHandle id="resource-bar-handle" class="w-2 moveArea" />
        <SplitterPanel id="middle-area" :min-size="20">
          <SplitterGroup id="middle-group" direction="vertical">
            <SplitterPanel
              id="middle-canvas"
              class="bg-white border rounded-xl flex items-center justify-center"
            >
              <div style="height: 100%; width: 100%">
                <CanvasHome />
              </div>
            </SplitterPanel>
            <SplitterResizeHandle id="splitter-group-2-resize-handle-1" class="h-2 moveArea" />
            <SplitterPanel
              id="middle-message"
              ref="messageRef"
              :min-size="0"
              :max-size="35"
              :default-size="15"
              class="bg-white border rounded-xl flex items-center justify-center"
            >
              <div style="height: 100%; width: 100%">
                <MessageHome />
              </div>
            </SplitterPanel>
          </SplitterGroup>
        </SplitterPanel>
        <SplitterResizeHandle id="middle-area-handle" class="w-2 moveArea" />
        <SplitterPanel
          id="attribute-bar"
          ref="attributeRef"
          :min-size="0"
          :max-size="20"
          :default-size="15"
          class="bg-white border rounded-xl flex items-center justify-center"
        >
          <div style="height: 100%; width: 100%">
            <PropertyHome />
          </div>
        </SplitterPanel>
      </SplitterGroup>
    </div>

    <PageBottom />
  </div>
</template>

<script setup lang="ts">
import PageTitle from './pageTitle/PageTitle.vue'
import PageMenu from './pageMenu/PageMenu.vue'
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from 'reka-ui'
import ResourceHome from './resourceBar/ResourceHome.vue'
import MessageHome from './message/MessageHome.vue'
import PropertyHome from './propertyBar/PropertyHome.vue'
import CanvasHome from './canvas/CanvasHome.vue'
import PageBottom from './pageBottom/PageBottom.vue'
import { useStyleStore } from '@renderer/store/globalStyle/style'
import { storeToRefs } from 'pinia'

const styleStore = useStyleStore()
const { resourceRef, messageRef, attributeRef } = storeToRefs(styleStore)
</script>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100%;

  .main-content {
    width: 100%;
    height: calc(100vh - 82px);
  }

  .bottom-area {
    height: 20px;
    width: 100%;
    background: #d4d4d4;
  }
}
</style>

前端的主体框架大致如上，接下来我将详细的刨析资源管理器，画布组件，属性栏三大部分

​