feat(components): 初步编写“环境区域”编辑器画布组件

src/styles/hvac.css

@@ -0,0 +1,22 @@
+/* 暖通平台全局样式 */
+.hvac-outline-button {
+  color: #000;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  background-color: #fff !important;
+
+  .t-button__text {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }  
+
+  i + span {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+  }
+}

src/styles/index.css

@@ -6,3 +6,4 @@
 @import './tdesign.css';
 @import './app.css';
 @import './props.css';
+@import './hvac.css';

src/views/EnvArea/Index.vue

@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import Graphics from "./Graphics.vue";
+import View from "./View.vue";
+</script>
+
 <template>
-  <div>Env Editor</div>
+  <div class="app-page" @contextmenu.prevent>
+    <div class="design-body">
+      <Graphics />
+      <View />
+    </div>
+  </div>
 </template>
+
+<style lang="postcss" scoped>
+.app-page {
+  height: 100vh;
+
+  .design-body {
+    display: grid;
+    grid-template-columns: 246px calc(100% - 246px);
+    height: 100vh;
+  }
+}
+</style>

src/views/EnvArea/View.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, reactive } from "vue";
+import { Meta2d, Options } from "@meta2d/core";
+import ContextMenu from "../components/ContextMenu.vue";
+import SvgIcon from "../components/SvgIcon.vue";
+
+const meta2dOptions: Options = {
+  x: 0,
+  y: 0,
+  width: 820,
+  height: 660,
+  background: "#F5F7FA",
+  shadowBlur: 0,
+};
+
+onMounted(() => {
+  new Meta2d("env-area-meta2d", meta2dOptions);
+});
+
+onUnmounted(() => {
+  meta2d?.destroy();
+});
+
+const contextmenu = reactive({
+  visible: false,
+  type: "",
+  style: {},
+});
+
+const changeContextMenuVisible = (e: boolean) => {
+  contextmenu.visible = e;
+};
+
+const handleOk = () => {
+  return;
+};
+
+const handleCancel = () => {
+  return;
+};
+</script>
+
+<template>
+  <div class="env-area-meta2d">
+    <div class="tools">
+      <t-button class="hvac-outline-button" variant="outline" @click="handleOk">
+        <SvgIcon name="check"></SvgIcon>
+      </t-button>
+      <t-button
+        class="hvac-outline-button"
+        variant="outline"
+        @click="handleCancel"
+      >
+        <SvgIcon name="close"></SvgIcon>
+      </t-button>
+    </div>
+    <div class="meta2d-bg-layer">
+      <t-button
+        class="hvac-outline-button temperature-humidity-button outdoor"
+        variant="outline"
+        @click="handleOk"
+      >
+        <SvgIcon name="outdoor"></SvgIcon>
+        <span>{{ $t("点击配置") }}</span>
+      </t-button>
+      <t-button
+        class="hvac-outline-button temperature-humidity-button home"
+        variant="outline"
+        @click="handleCancel"
+      >
+        <SvgIcon name="home"></SvgIcon>
+        <span>22.9℃｜60.6%</span>
+      </t-button>
+      <div id="env-area-meta2d"></div>
+    </div>
+    <ContextMenu
+      v-if="contextmenu.visible"
+      :type="contextmenu.type"
+      :style="contextmenu.style"
+      @changeVisible="changeContextMenuVisible"
+    ></ContextMenu>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.env-area-meta2d {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+  border-left: 1px solid #e4e7ed;
+
+  .tools {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    height: 48px;
+    flex-shrink: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    border-bottom: 1px solid #e4e7ed;
+
+    button {
+      width: 32px;
+      height: 32px;
+      font-size: 16px;
+
+      & + button {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .meta2d-bg-layer {
+    position: relative;
+    flex: 1;
+    background-image: radial-gradient(circle, #d8d8d8 1px, #fff 1px);
+    background-size: 15px 15px;
+    background-position: center center;
+    overflow: auto;
+  }
+
+  #env-area-meta2d {
+    width: 820px;
+    height: 660px;
+    z-index: 1;
+    overflow: hidden;
+    outline: 1px solid var(--color-primary);
+    border-radius: 12px;
+    top: 64px;
+    left: 40px;
+  }
+
+  .temperature-humidity-button {
+    position: absolute;
+    left: 56px;
+    font-size: 12px;
+    z-index: 10;
+
+    i {
+      font-size: 14px;
+    }
+
+    &.outdoor {
+      top: 16px;
+    }
+
+    &.home {
+      top: 80px;
+    }
+  }
+}
+</style>