cornerstone3D库升级及其他文件调整

src/views/test/GridLayout.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="grid-container" :style="gridStyle">
+    <div
+      v-for="(cell, index) in cells"
+      :key="index"
+      class="grid-cell"
+      :style="cellStyle"
+      @dblclick="toggleFullScreen(index)"
+    >
+      <div v-if="fullScreenIndex === index" class="full-screen">
+        <div class="content">
+          <canvas class="canvas" :ref="`canvas-${fullScreenIndex}`"></canvas>
+          <!-- 这里可以放置单元格的内容 -->
+          <!-- Cell {{ index + 1 }} -->
+          <!-- <button @click="toggleFullScreen(null)">Exit Full Screen</button> -->
+        </div>
+      </div>
+      <div v-else class="content">
+        <!-- Cell {{ index + 1 }} -->
+        <canvas class="canvas" :ref="`canvas-${index}`"></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    rows: {
+      type: Number,
+      default: 1,
+    },
+    cols: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      fullScreenIndex: null,
+    };
+  },
+  computed: {
+    gridStyle() {
+      return {
+        display: 'grid',
+        gridTemplateRows: `repeat(${this.rows}, 1fr)`,
+        gridTemplateColumns: `repeat(${this.cols}, 1fr)`,
+        height: '100vh',
+        width: '100vw',
+      };
+    },
+    cellStyle() {
+      return {
+        border: '1px solid #ccc',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      };
+    },
+    cells() {
+      return Array(this.rows * this.cols).fill(0);
+    },
+  },
+  methods: {
+    toggleFullScreen(index) {
+      this.fullScreenIndex = this.fullScreenIndex === index ? null : index;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.grid-container {
+  display: grid;
+  height: 100vh;
+  width: 100vw;
+}
+
+.grid-cell {
+  border: 1px solid #ccc;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: white;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  /* text-align: center; */
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/test/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <!-- <label>行数: </label>
+    <input v-model.number="rows" type="number" min="1" max="3" />
+    <label>列数: </label>
+    <input v-model.number="cols" type="number" min="1" max="3" /> -->
+    <GridLayout :rows="rows" :cols="cols" />
+  </div>
+</template>
+
+<script>
+import GridLayout from './GridLayout.vue';
+
+export default {
+  components: {
+    GridLayout,
+  },
+  data() {
+    return {
+      rows: 2,
+      cols: 2,
+    };
+  },
+};
+</script>