feat: remake most of forntend

src/components/equipments/DDR.vue

@@ -0,0 +1,48 @@
+<template>  <div class="ddr-component" :style="{ width: width + 'px', height: height + 'px' }">
+    <img 
+      src="../equipments/svg/ddr.svg" 
+      :width="width" 
+      :height="height" 
+      alt="DDR内存"
+      class="svg-image"
+      draggable="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 1
+});
+
+// 计算实际宽高
+const width = computed(() => 120 * props.size);
+const height = computed(() => 80 * props.size);
+</script>
+
+<style scoped>
+.ddr-component {
+  display: block;
+  user-select: none;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE/Edge */
+}
+
+.svg-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none; /* 禁止鼠标交互 */
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+</style>