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

src/views/EnvArea/Graphics.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+type AssetsType = "space" | "monitor";
+
+const activeAssets = ref<AssetsType>("space");
+const monitorPoints = ref([
+  { name: "3F-R1", disabled: true },
+  { name: "3F-R2" },
+  { name: "3F-R3" },
+]);
+
+const isSpacePanel = computed(() => {
+  return activeAssets.value === "space";
+});
+
+const isMonitorPanel = computed(() => {
+  return activeAssets.value === "monitor";
+});
+
+const assetsChange = () => {
+  return;
+};
+</script>
+
+<template>
+  <div class="graphics">
+    <div class="group-asset">
+      <t-radio-group
+        v-model="activeAssets"
+        @change="assetsChange"
+        variant="primary-filled"
+      >
+        <t-radio-button value="space">{{ $t("空间组件") }}</t-radio-button>
+        <t-radio-button value="monitor">{{ $t("监测点") }}</t-radio-button>
+      </t-radio-group>
+    </div>
+    <div :class="['groups-panel', { 'groups-panel-monitor': isMonitorPanel }]">
+      <div v-show="isSpacePanel">
+        <div class="space-item">
+          <div class="space-item-title">{{ $t("有监测点房间") }}</div>
+          <div class="space-item-has-monitor"></div>
+        </div>
+        <div class="space-item">
+          <div class="space-item-title">{{ $t("无监测点房间") }}</div>
+          <div class="space-item-no-monitor"></div>
+        </div>
+      </div>
+      <div v-show="isMonitorPanel">
+        <div
+          :class="['monitor-item', { 'monitor-item-disabled': item.disabled }]"
+          v-for="(item, index) in monitorPoints"
+          :key="index"
+        >
+          <div class="monitor-item-circle"></div>
+          <div class="monitor-item-title">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.graphics {
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+
+  .group-asset {
+    height: 48px;
+    align-items: center;
+    display: flex;
+    padding: 8px 16px;
+    background-color: #fff;
+    box-shadow: 0px 1px 0px 0px #e4e7ed;
+
+    .t-radio-group.t-radio-group--filled {
+      padding: 0px;
+      height: 32px;
+      background-color: #fff;
+
+      .t-radio-button::before {
+        content: none;
+      }
+    }
+
+    :deep(.t-radio-button__label) {
+      margin: auto;
+    }
+
+    .t-radio-button {
+      width: 88px;
+      height: 32px;
+      border-radius: 4px;
+      padding: 0px;
+      color: #000;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+
+      &.t-is-checked {
+        background-color: var(--color-primary) !important;
+        color: #fff !important;
+      }
+    }
+  }
+
+  .groups-panel {
+    flex: 1;
+    overflow-y: auto;
+    padding: 24px 16px;
+
+    .space-item {
+      cursor: pointer;
+
+      .space-item-title {
+        font-weight: 500;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 22px;
+        margin-bottom: 8px;
+      }
+
+      .space-item-has-monitor {
+        height: 140px;
+        background: #fff;
+        border-radius: 12px;
+      }
+
+      .space-item-no-monitor {
+        height: 140px;
+        background: repeating-linear-gradient(
+          -60deg,
+          #f1f1f1,
+          #f1f1f1 6px,
+          #d4d8d7 6px,
+          #d4d8d7 12px
+        );
+        border-radius: 12px;
+      }
+
+      & + .space-item {
+        margin-top: 24px;
+      }
+    }
+
+    .monitor-item {
+      height: 56px;
+      background-color: #fff;
+      border-radius: 8px;
+      padding: 16px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      .monitor-item-circle {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        background-color: rgba(103, 194, 58, 0.3);
+        border-radius: 50%;
+        margin-right: 12px;
+
+        &::before {
+          position: absolute;
+          top: 6px;
+          left: 6px;
+          display: block;
+          content: "";
+          width: 12px;
+          height: 12px;
+          background-color: rgba(103, 194, 58, 0.6);
+          border-radius: 50%;
+        }
+
+        &::after {
+          position: absolute;
+          top: 9px;
+          left: 9px;
+          display: block;
+          content: "";
+          width: 6px;
+          height: 6px;
+          background-color: rgba(103, 194, 58, 1);
+          border-radius: 50%;
+        }
+      }
+
+      .monitor-item-title {
+        font-weight: 500;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 22px;
+      }
+
+      & + .monitor-item {
+        margin-top: 8px;
+      }
+    }
+
+    .monitor-item-disabled {
+      background-color: initial;
+      cursor: not-allowed;
+
+      .monitor-item-title {
+        color: rgba(0, 0, 0, 0.25);
+      }
+    }
+  }
+
+  .groups-panel-monitor {
+    padding: 8px;
+  }
+}
+</style>