From c5ce246caf1280ed697ed5becf43a2b8a0cfa187 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Wed, 9 Jul 2025 14:42:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84projectview?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  11 +-
 .../{ => LabCanvas}/ComponentSelector.vue     |   4 +-
 .../{ => LabCanvas}/DiagramCanvas.vue         |   4 +-
 .../{ => LabCanvas}/diagramManager.ts         |   0
 src/components/{ => LabCanvas}/wireManager.ts |   0
 .../{LabCanvas => LabCanvasNew}/LabCanvas.vue |   0
 .../LabCanvasType.ts                          |   0
 .../LabComponentsDrawer.vue                   |   0
 .../composable/LabCanvasManager.ts            |   0
 .../{LabCanvas => LabCanvasNew}/index.ts      |   0
 src/components/PropertyEditor.vue             |   2 +-
 src/components/PropertyPanel.vue              |   2 +-
 src/components/equipments/componentConfig.ts  |   2 +-
 src/views/ProjectView.vue                     | 797 ++++++++++++++++-
 src/views/ProjectViewBack.vue                 | 844 ------------------
 src/views/ProjectViewNew.vue                  |  38 +
 16 files changed, 822 insertions(+), 882 deletions(-)
 rename src/components/{ => LabCanvas}/ComponentSelector.vue (99%)
 rename src/components/{ => LabCanvas}/DiagramCanvas.vue (99%)
 rename src/components/{ => LabCanvas}/diagramManager.ts (100%)
 rename src/components/{ => LabCanvas}/wireManager.ts (100%)
 rename src/components/{LabCanvas => LabCanvasNew}/LabCanvas.vue (100%)
 rename src/components/{LabCanvas => LabCanvasNew}/LabCanvasType.ts (100%)
 rename src/components/{LabCanvas => LabCanvasNew}/LabComponentsDrawer.vue (100%)
 rename src/components/{LabCanvas => LabCanvasNew}/composable/LabCanvasManager.ts (100%)
 rename src/components/{LabCanvas => LabCanvasNew}/index.ts (100%)
 delete mode 100644 src/views/ProjectViewBack.vue
 create mode 100644 src/views/ProjectViewNew.vue

diff --git a/components.d.ts b/components.d.ts
index b586813..b0e6dae 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,17 +11,17 @@ declare module 'vue' {
     BaseBoard: typeof import('./src/components/equipments/BaseBoard.vue')['default']
     Canvas: typeof import('./src/components/Canvas.vue')['default']
     CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
-    ComponentSelector: typeof import('./src/components/ComponentSelector.vue')['default']
+    ComponentSelector: typeof import('./src/components/LabCanvas/ComponentSelector.vue')['default']
     DDR: typeof import('./src/components/equipments/DDR.vue')['default']
     DDS: typeof import('./src/components/equipments/DDS.vue')['default']
     DDSPropertyEditor: typeof import('./src/components/equipments/DDSPropertyEditor.vue')['default']
-    DiagramCanvas: typeof import('./src/components/DiagramCanvas.vue')['default']
+    DiagramCanvas: typeof import('./src/components/LabCanvas/DiagramCanvas.vue')['default']
     Dialog: typeof import('./src/components/Dialog.vue')['default']
     ETH: typeof import('./src/components/equipments/ETH.vue')['default']
     HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
-    LabCanvas: typeof import('./src/components/LabCanvas/LabCanvas.vue')['default']
+    LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
     LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
-    LabComponentsDrawer: typeof import('./src/components/LabCanvas/LabComponentsDrawer.vue')['default']
+    LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
     LabComponentsDrawerNew: typeof import('./src/components/LabCanvas/LabComponentsDrawerNew.vue')['default']
     LoginCard: typeof import('./src/components/LoginCard.vue')['default']
     MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
@@ -43,6 +43,9 @@ declare module 'vue' {
     Sidebar: typeof import('./src/components/Sidebar.vue')['default']
     SMA: typeof import('./src/components/equipments/SMA.vue')['default']
     SMT_LED: typeof import('./src/components/equipments/SMT_LED.vue')['default']
+    SplitterGroup: typeof import('reka-ui')['SplitterGroup']
+    SplitterPanel: typeof import('reka-ui')['SplitterPanel']
+    SplitterResizeHandle: typeof import('reka-ui')['SplitterResizeHandle']
     Switch: typeof import('./src/components/equipments/Switch.vue')['default']
     ThemeControlButton: typeof import('./src/components/ThemeControlButton.vue')['default']
     ThemeControlToggle: typeof import('./src/components/ThemeControlToggle.vue')['default']
diff --git a/src/components/ComponentSelector.vue b/src/components/LabCanvas/ComponentSelector.vue
similarity index 99%
rename from src/components/ComponentSelector.vue
rename to src/components/LabCanvas/ComponentSelector.vue
index b477ed9..3d40b6a 100644
--- a/src/components/ComponentSelector.vue
+++ b/src/components/LabCanvas/ComponentSelector.vue
@@ -181,8 +181,8 @@
 
 <script setup lang="ts">
 import { ref, computed, shallowRef, onMounted } from "vue";
-import motherboardSvg from "../components/equipments/svg/motherboard.svg";
-import buttonSvg from "../components//equipments/svg/button.svg";
+import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
+import buttonSvg from "@/components//equipments/svg/button.svg";
 
 // Props 定义
 interface Props {
diff --git a/src/components/DiagramCanvas.vue b/src/components/LabCanvas/DiagramCanvas.vue
similarity index 99%
rename from src/components/DiagramCanvas.vue
rename to src/components/LabCanvas/DiagramCanvas.vue
index 28e32d3..ec7a642 100644
--- a/src/components/DiagramCanvas.vue
+++ b/src/components/LabCanvas/DiagramCanvas.vue
@@ -136,7 +136,7 @@ import {
   watch,
   provide,
 } from "vue";
-import WireComponent from "./equipments/Wire.vue";
+import WireComponent from "@/components/equipments/Wire.vue";
 
 // 导入 diagram 管理器
 import {
@@ -158,7 +158,7 @@ import type {
   WireItem,
 } from "./diagramManager";
 
-import { CanvasCurrentSelectedComponentID } from "./InjectKeys";
+import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
 
 // 右键菜单处理函数
 function handleContextMenu(e: MouseEvent) {
diff --git a/src/components/diagramManager.ts b/src/components/LabCanvas/diagramManager.ts
similarity index 100%
rename from src/components/diagramManager.ts
rename to src/components/LabCanvas/diagramManager.ts
diff --git a/src/components/wireManager.ts b/src/components/LabCanvas/wireManager.ts
similarity index 100%
rename from src/components/wireManager.ts
rename to src/components/LabCanvas/wireManager.ts
diff --git a/src/components/LabCanvas/LabCanvas.vue b/src/components/LabCanvasNew/LabCanvas.vue
similarity index 100%
rename from src/components/LabCanvas/LabCanvas.vue
rename to src/components/LabCanvasNew/LabCanvas.vue
diff --git a/src/components/LabCanvas/LabCanvasType.ts b/src/components/LabCanvasNew/LabCanvasType.ts
similarity index 100%
rename from src/components/LabCanvas/LabCanvasType.ts
rename to src/components/LabCanvasNew/LabCanvasType.ts
diff --git a/src/components/LabCanvas/LabComponentsDrawer.vue b/src/components/LabCanvasNew/LabComponentsDrawer.vue
similarity index 100%
rename from src/components/LabCanvas/LabComponentsDrawer.vue
rename to src/components/LabCanvasNew/LabComponentsDrawer.vue
diff --git a/src/components/LabCanvas/composable/LabCanvasManager.ts b/src/components/LabCanvasNew/composable/LabCanvasManager.ts
similarity index 100%
rename from src/components/LabCanvas/composable/LabCanvasManager.ts
rename to src/components/LabCanvasNew/composable/LabCanvasManager.ts
diff --git a/src/components/LabCanvas/index.ts b/src/components/LabCanvasNew/index.ts
similarity index 100%
rename from src/components/LabCanvas/index.ts
rename to src/components/LabCanvasNew/index.ts
diff --git a/src/components/PropertyEditor.vue b/src/components/PropertyEditor.vue
index ec8ae16..d0887e8 100644
--- a/src/components/PropertyEditor.vue
+++ b/src/components/PropertyEditor.vue
@@ -128,7 +128,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CollapsibleSection from "./CollapsibleSection.vue";
-import { type DiagramPart } from "@/components/diagramManager";
+import { type DiagramPart } from "@/components/LabCanvas/diagramManager";
 import {
   type PropertyConfig,
   getPropValue,
diff --git a/src/components/PropertyPanel.vue b/src/components/PropertyPanel.vue
index a158117..4632e4f 100644
--- a/src/components/PropertyPanel.vue
+++ b/src/components/PropertyPanel.vue
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 // 导入所需的类型和组件
-import { type DiagramPart } from "@/components/diagramManager"; // 图表部件类型定义
+import { type DiagramPart } from "@/components/LabCanvas/diagramManager"; // 图表部件类型定义
 import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
 import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
 import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件
diff --git a/src/components/equipments/componentConfig.ts b/src/components/equipments/componentConfig.ts
index 3e7e184..1831728 100644
--- a/src/components/equipments/componentConfig.ts
+++ b/src/components/equipments/componentConfig.ts
@@ -1,5 +1,5 @@
 // componentConfig.ts 提供通用的组件配置功能
-import type { DiagramPart } from '../diagramManager';
+import type { DiagramPart } from '../LabCanvas/diagramManager';
 
 // 属性配置接口
 export interface PropertyConfig {
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 55982f6..2e25615 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,38 +1,781 @@
 <template>
-  <div class="h-screen w-screen">
-    <SplitterGroup id="splitter-group" direction="horizontal">
-      <SplitterPanel
-        id="splitter-group-panel-canvas"
-        :default-size="80"
-        :min-size="30"
-        class="bg-white border rounded-xl flex items-center justify-center"
-      >
-        <LabCanvas></LabCanvas>
-      </SplitterPanel>
-      <SplitterResizeHandle id="splitter-group-resize-handle" class="w-2" />
-      <SplitterPanel
-        id="splitter-group-panel-properties"
-        :min-size="20"
-        class="bg-white border rounded-xl flex items-center justify-center"
-      >
-        Panel A
-      </SplitterPanel>
-    </SplitterGroup>
-    <!-- <div class="absolute top-20 left-10">
-      <input type="checkbox" class="checkbox" @change="handleCacheChange" />
-      cache shapes
-    </div> -->
+  <div class="h-screen flex flex-col overflow-hidden">
+    <div class="flex flex-1 overflow-hidden relative">
+      <SplitterGroup id="splitter-group" direction="horizontal" class="w-full h-full">
+        <!-- 左侧图形化区域 -->
+        <SplitterPanel
+          id="splitter-group-panel-canvas"
+          :default-size="60"
+          :min-size="30"
+          class="relative bg-base-200 overflow-hidden h-full"
+        >
+          <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
+            @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
+            @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deeted="handleWireDeleted"
+            @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
+            @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
+        </SplitterPanel>
+        <!-- 拖拽分割线 -->
+        <SplitterResizeHandle id="splitter-group-resize-handle" class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors" />
+        <!-- 右侧编辑区域 -->
+        <SplitterPanel
+          id="splitter-group-panel-properties"
+          :min-size="20"
+          class="bg-base-200 h-full overflow-hidden flex flex-col"
+        >
+          <div class="overflow-y-auto flex-1">
+            <!-- 使用条件渲染显示不同的面板 -->
+            <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
+              :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
+              @updateDirectProp="updateComponentDirectProp" />
+            <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
+              <MarkdownRenderer :content="documentContent" />
+            </div>
+          </div>
+        </SplitterPanel>
+      </SplitterGroup>
+    </div>
+    <!-- 元器件选择组件 -->
+    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
+      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useProvideLabCanvasStore } from "@/components/LabCanvas/composable/LabCanvasManager";
+// 引入wokwi-elements和组件
+// import "@wokwi/elements"; // 不再需要全局引入 wokwi
+import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
 import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
-import LabCanvas from "@/components/LabCanvas/LabCanvas.vue";
+import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
+import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
+import PropertyPanel from "@/components/PropertyPanel.vue";
+import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
+import type { DiagramData, DiagramPart } from "@/components/LabCanvas/diagramManager";
+import {
+  type PropertyConfig,
+  generatePropertyConfigs,
+  generatePropsFromDefault,
+  generatePropsFromAttrs,
+} from "@/components/equipments/componentConfig"; // 引入组件配置工具
 
-useProvideLabCanvasStore({width:window.innerWidth, height: window.innerHeight});
+// --- 文档面板控制 ---
+const showDocPanel = ref(false);
+const documentContent = ref("");
+
+// 获取路由参数
+import { useRoute } from "vue-router";
+const route = useRoute();
+
+// 切换文档面板和属性面板
+async function toggleDocPanel() {
+  showDocPanel.value = !showDocPanel.value;
+
+  // 如果切换到文档面板，则获取文档内容
+  if (showDocPanel.value) {
+    await loadDocumentContent();
+  }
+}
+
+// 加载文档内容
+async function loadDocumentContent() {
+  try {
+    // 从路由参数中获取教程ID
+    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
+
+    // 构建文档路径
+    let docPath = `/doc/${tutorialId}/doc.md`;
+
+    // 检查当前路径是否包含下划线（例如 02_key 格式）
+    // 如果不包含，那么使用更新的命名格式
+    if (!tutorialId.includes("_")) {
+      docPath = `/doc/${tutorialId}/doc.md`;
+    }
+
+    // 获取文档内容
+    const response = await fetch(docPath);
+    if (!response.ok) {
+      throw new Error(`Failed to load document: ${response.status}`);
+    }
+
+    // 更新文档内容，并替换图片路径
+    documentContent.value = (await response.text()).replace(
+      /.\/images/gi,
+      `/doc/${tutorialId}/images`,
+    );
+  } catch (error) {
+    console.error("加载文档失败:", error);
+    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
+  }
+}
+
+// 检查是否有例程参数，如果有则自动打开文档面板
+onMounted(async () => {
+  if (route.query.tutorial) {
+    showDocPanel.value = true;
+    await loadDocumentContent();
+  }
+});
+
+// --- 元器件管理 ---
+const showComponentsMenu = ref(false);
+const diagramData = ref<DiagramData>({
+  version: 1,
+  author: "admin",
+  editor: "me",
+  parts: [],
+  connections: [],
+});
+
+const selectedComponentId = ref<string | null>(null);
+const selectedComponentData = computed(() => {
+  return (
+    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
+    null
+  );
+});
+const diagramCanvas = ref(null);
+
+// 存储动态导入的组件模块
+interface ComponentModule {
+  default: any;
+  getDefaultProps?: () => Record<string, any>;
+  config?: {
+    props?: Array<PropertyConfig>;
+  };
+}
+
+const componentModules = shallowRef<Record<string, ComponentModule>>({});
+const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
+  null,
+); // 存储选中组件的配置
+
+// 动态加载组件定义
+async function loadComponentModule(type: string) {
+  if (!componentModules.value[type]) {
+    try {
+      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
+      const module = await import(`../components/equipments/${type}.vue`);
+
+      // 使用 markRaw 包装模块，避免不必要的响应式处理
+      componentModules.value = {
+        ...componentModules.value,
+        [type]: module,
+      };
+
+      console.log(`Loaded module for ${type}:`, module);
+    } catch (error) {
+      console.error(`Failed to load component module ${type}:`, error);
+      return null;
+    }
+  }
+  return componentModules.value[type];
+}
+
+// 处理组件模块加载请求
+async function handleLoadComponentModule(type: string) {
+  console.log("Handling load component module request for:", type);
+  await loadComponentModule(type);
+}
+
+// --- 元器件操作 ---
+function openComponentsMenu() {
+  showComponentsMenu.value = true;
+}
+
+// 处理 ComponentSelector 组件添加元器件事件
+async function handleAddComponent(componentData: {
+  type: string;
+  name: string;
+  props: Record<string, any>;
+}) {
+  // 加载组件模块以便后续使用
+  const componentModule = await loadComponentModule(componentData.type);
+
+  // 获取画布容器和位置信息
+  const canvasInstance = diagramCanvas.value as any;
+
+  // 获取当前画布的位置信息
+  let position = { x: 100, y: 100 };
+  let scale = 1;
+
+  try {
+    if (
+      canvasInstance &&
+      canvasInstance.getCanvasPosition &&
+      canvasInstance.getScale
+    ) {
+      position = canvasInstance.getCanvasPosition();
+      scale = canvasInstance.getScale();
+
+      // 获取画布容器
+      const canvasContainer = canvasInstance.$el as HTMLElement;
+      if (canvasContainer) {
+        // 计算可视区域中心点在画布坐标系中的位置
+        const viewportWidth = canvasContainer.clientWidth;
+        const viewportHeight = canvasContainer.clientHeight;
+
+        // 计算画布中心点的坐标
+        position.x = (viewportWidth / 2 - position.x) / scale;
+        position.y = (viewportHeight / 2 - position.y) / scale;
+      }
+    }
+  } catch (error) {
+    console.error("获取画布位置时出错:", error);
+  }
+
+  // 添加一些随机偏移，避免元器件重叠
+  const offsetX = Math.floor(Math.random() * 100) - 50;
+  const offsetY = Math.floor(Math.random() * 100) - 50;
+
+  // 获取组件的能力页面
+  let capsPage = null;
+  if (
+    componentModule &&
+    componentModule.default &&
+    typeof componentModule.default.getCapabilities === "function"
+  ) {
+    try {
+      capsPage = componentModule.default.getCapabilities();
+      console.log(`获取到${componentData.type}组件的能力页面`);
+    } catch (error) {
+      console.error(`获取${componentData.type}组件能力页面失败:`, error);
+    }
+  }
+
+  // 创建新组件，使用diagramManager接口定义
+  const newComponent: DiagramPart = {
+    id: `component-${Date.now()}`,
+    type: componentData.type,
+    x: Math.round(position.x + offsetX),
+    y: Math.round(position.y + offsetY),
+    attrs: componentData.props,
+    rotate: 0,
+    group: "",
+    positionlock: false,
+    hidepins: true,
+    isOn: true,
+    index: 0,
+  };
+
+  console.log("添加新组件:", newComponent);
+  // 通过画布实例添加组件
+  if (
+    canvasInstance &&
+    canvasInstance.getDiagramData &&
+    canvasInstance.updateDiagramDataDirectly
+  ) {
+    const currentData = canvasInstance.getDiagramData();
+    currentData.parts.push(newComponent);
+    canvasInstance.updateDiagramDataDirectly(currentData);
+  }
+}
+
+// 处理模板添加事件
+async function handleAddTemplate(templateData: {
+  id: string;
+  name: string;
+  template: any;
+}) {
+  console.log("添加模板:", templateData);
+  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
+  // 获取画布实例
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例添加模板");
+    return;
+  }
+
+  // 获取当前图表数据
+  const currentData = canvasInstance.getDiagramData();
+  console.log("=== 当前图表组件数量:", currentData.parts.length);
+
+  // 生成唯一ID前缀，以确保添加的组件ID不重复
+  const idPrefix = `template-${Date.now()}-`;
+  // 处理模板组件并添加到图表
+  if (templateData.template && templateData.template.parts) {
+    // 获取当前视口中心位置
+    let viewportCenter = { x: 300, y: 200 }; // 默认值
+    try {
+      if (
+        canvasInstance &&
+        canvasInstance.getCanvasPosition &&
+        canvasInstance.getScale
+      ) {
+        const position = canvasInstance.getCanvasPosition();
+        const scale = canvasInstance.getScale();
+
+        // 获取画布容器
+        const canvasContainer = canvasInstance.$el as HTMLElement;
+        if (canvasContainer) {
+          // 计算可视区域中心点在画布坐标系中的位置
+          const viewportWidth = canvasContainer.clientWidth;
+          const viewportHeight = canvasContainer.clientHeight;
+
+          // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
+          viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
+          viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
+          console.log(
+            `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
+          );
+        }
+      }
+    } catch (error) {
+      console.error("获取视口中心位置时出错:", error);
+    }
+
+    console.log("=== 使用视口中心添加模板组件:", viewportCenter);
+
+    // 找到模板中的主要组件（假设是第一个组件）
+    const mainPart = templateData.template.parts[0];
+
+    // 创建带有新位置的组件
+    const newParts = await Promise.all(
+      templateData.template.parts.map(async (part: any) => {
+        // 创建组件副本并分配新ID
+        const newPart = JSON.parse(JSON.stringify(part));
+        newPart.id = `${idPrefix}${part.id}`;
+
+        // 尝试加载组件模块并获取能力页面
+        try {
+          const componentModule = await loadComponentModule(part.type);
+          if (
+            componentModule &&
+            componentModule.default &&
+            typeof componentModule.default.getCapabilities === "function"
+          ) {
+            newPart.capsPage = componentModule.default.getCapabilities();
+            console.log(`加载模板组件${part.type}组件的能力页面成功`);
+          }
+        } catch (error) {
+          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
+        }
+
+        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
+        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
+          const oldX = newPart.x;
+          const oldY = newPart.y;
+
+          // 计算相对位置（相对于主要组件）
+          const relativeX = part.x - mainPart.x;
+          const relativeY = part.y - mainPart.y;
+
+          // 应用到视口中心位置
+          newPart.x = viewportCenter.x + relativeX;
+          newPart.y = viewportCenter.y + relativeY;
+
+          console.log(
+            `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
+          );
+        }
+
+        return newPart;
+      }),
+    );
+
+    // 向图表添加新组件
+    currentData.parts.push(...newParts);
+
+    // 处理连接关系
+    if (templateData.template.connections) {
+      // 创建一个映射表用于转换旧组件ID到新组件ID
+      const idMap: Record<string, string> = {};
+      templateData.template.parts.forEach((part: any) => {
+        idMap[part.id] = `${idPrefix}${part.id}`;
+      });
+
+      // 添加连接，更新组件ID引用
+      const newConnections = templateData.template.connections.map(
+        (conn: any) => {
+          // 处理连接数据 (格式为 [from, to, type, path])
+          if (Array.isArray(conn)) {
+            const [from, to, type, path] = conn;
+
+            // 从连接字符串中提取组件ID和引脚ID
+            const fromParts = from.split(":");
+            const toParts = to.split(":");
+
+            if (fromParts.length === 2 && toParts.length === 2) {
+              const fromComponentId = fromParts[0];
+              const fromPinId = fromParts[1];
+              const toComponentId = toParts[0];
+              const toPinId = toParts[1];
+
+              // 创建新的连接字符串，使用新的组件ID
+              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
+              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
+
+              return [newFrom, newTo, type, path];
+            }
+          }
+          return conn; // 如果格式不匹配，保持原样
+        },
+      );
+
+      // 添加到当前连接列表
+      currentData.connections.push(...newConnections);
+    }
+    // 更新图表数据
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
+
+    // 显示成功消息
+    showToast(`已添加 ${templateData.name} 模板`, "success");
+  } else {
+    console.error("模板格式错误，缺少parts数组");
+    showToast("模板格式错误", "error");
+  }
+}
+
+// 处理组件选中事件
+async function handleComponentSelected(componentData: DiagramPart | null) {
+  selectedComponentId.value = componentData ? componentData.id : null;
+  selectedComponentConfig.value = null; // 重置配置
+
+  if (componentData) {
+    // 先加载组件模块
+    const moduleRef = await loadComponentModule(componentData.type);
+
+    if (moduleRef) {
+      try {
+        // 创建属性配置数组
+        const propConfigs: PropertyConfig[] = [];
+
+        // 创建一个映射来跟踪已添加的属性名
+        const addedProps = new Set<string>();
+
+        // 1. 首先从getDefaultProps方法获取默认配置
+        if (typeof moduleRef.getDefaultProps === "function") {
+          const defaultProps = moduleRef.getDefaultProps();
+          const defaultPropConfigs = generatePropsFromDefault(defaultProps);
+
+          // 添加默认配置并记录属性名
+          defaultPropConfigs.forEach((config) => {
+            propConfigs.push(config);
+            addedProps.add(config.name);
+          });
+        }
+
+        // 2. 添加组件直接属性，这些属性会覆盖默认配置
+        const directPropConfigs = generatePropertyConfigs(componentData);
+
+        // 过滤掉已经添加过的属性名
+        const newDirectProps = directPropConfigs.filter(
+          (config) => !addedProps.has(config.name),
+        );
+        propConfigs.push(...newDirectProps);
+
+        // 3. 最后添加attrs中的属性
+        if (componentData.attrs) {
+          const attrs = componentData.attrs;
+          const attrPropConfigs = generatePropsFromAttrs(attrs);
+
+          // 更新已存在的属性值，或添加新属性
+          attrPropConfigs.forEach((attrConfig) => {
+            const existingIndex = propConfigs.findIndex(
+              (p) => p.name === attrConfig.name,
+            );
+            if (existingIndex >= 0) {
+              // 更新已存在的属性值
+              propConfigs[existingIndex] = attrConfig;
+            } else {
+              // 添加新属性
+              propConfigs.push(attrConfig);
+            }
+          });
+        }
+
+        selectedComponentConfig.value = { props: propConfigs };
+        console.log(
+          `Built config for ${componentData.type}:`,
+          selectedComponentConfig.value,
+        );
+      } catch (error) {
+        console.error(
+          `Error building config for ${componentData.type}:`,
+          error,
+        );
+        selectedComponentConfig.value = { props: [] };
+      }
+    } else {
+      console.warn(`Module for component ${componentData.type} not found.`);
+      selectedComponentConfig.value = { props: [] };
+    }
+  }
+}
+
+// 处理图表数据更新事件
+function handleDiagramUpdated(data: DiagramData) {
+  diagramData.value = data;
+  console.log("Diagram data updated:", data);
+}
+
+// 处理组件移动事件
+function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
+  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
+  if (part) {
+    part.x = moveData.x;
+    part.y = moveData.y;
+  }
+}
+
+// 处理组件删除事件
+function handleComponentDelete(componentId: string) {
+  // 查找要删除的组件
+  const component = diagramData.value.parts.find((p) => p.id === componentId);
+  if (!component) return;
+
+  // 收集需要删除的组件ID列表（包括当前组件和同组组件）
+  const componentsToDelete: string[] = [componentId];
+
+  // 如果组件属于一个组，则找出所有同组的组件
+  if (component.group && component.group !== "") {
+    const groupMembers = diagramData.value.parts.filter(
+      (p) => p.group === component.group && p.id !== componentId,
+    );
+
+    // 将同组组件ID添加到删除列表
+    componentsToDelete.push(...groupMembers.map((p) => p.id));
+    console.log(
+      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
+    );
+  }
+
+  // 删除所有标记的组件
+  diagramData.value.parts = diagramData.value.parts.filter(
+    (p) => !componentsToDelete.includes(p.id),
+  );
+
+  // 同时删除与这些组件相关的所有连接
+  diagramData.value.connections = diagramData.value.connections.filter(
+    (connection) => {
+      for (const id of componentsToDelete) {
+        if (
+          connection[0].startsWith(`${id}:`) ||
+          connection[1].startsWith(`${id}:`)
+        ) {
+          return false;
+        }
+      }
+      return true;
+    },
+  );
+
+  // 如果删除的是当前选中的组件，清除选中状态
+  if (
+    selectedComponentId.value &&
+    componentsToDelete.includes(selectedComponentId.value)
+  ) {
+    selectedComponentId.value = null;
+    selectedComponentConfig.value = null;
+  }
+}
+
+// 更新组件属性的方法
+function updateComponentProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
+    return;
+  }
+
+  // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
+  if (value !== null && typeof value === "object" && "value" in value) {
+    value = value.value;
+  }
+
+  const currentData = canvasInstance.getDiagramData();
+  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+  if (part) {
+    // 检查是否为基本属性
+    if (propName in part) {
+      (part as any)[propName] = value;
+    } else {
+      // 否则当作attrs中的属性处理
+      if (!part.attrs) {
+        part.attrs = {};
+      }
+      part.attrs[propName] = value;
+    }
+
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log(
+      `更新组件${componentId}的属性${propName}为:`,
+      value,
+      typeof value,
+    );
+  }
+}
+
+// 更新组件的直接属性
+function updateComponentDirectProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
+    return;
+  }
+
+  const currentData = canvasInstance.getDiagramData();
+  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+  if (part) {
+    // @ts-ignore: 动态属性赋值
+    part[propName] = value;
+
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log(
+      `更新组件${componentId}的直接属性${propName}为:`,
+      value,
+      typeof value,
+    );
+  }
+}
+
+// 处理连线创建事件
+function handleWireCreated(wireData: any) {
+  console.log("Wire created:", wireData);
+}
+
+// 处理连线删除事件
+function handleWireDeleted(wireId: string) {
+  console.log("Wire deleted:", wireId);
+}
+
+// --- 消息提示 ---
+const showNotification = ref(false);
+const notificationMessage = ref("");
+const notificationType = ref<"success" | "error" | "info">("info");
+
+function showToast(
+  message: string,
+  type: "success" | "error" | "info" = "info",
+  duration = 3000,
+) {
+  const canvasInstance = diagramCanvas.value as any;
+  if (canvasInstance && canvasInstance.showToast) {
+    canvasInstance.showToast(message, type, duration);
+  } else {
+    // 后备方案：使用原来的通知系统
+    notificationMessage.value = message;
+    notificationType.value = type;
+    showNotification.value = true;
+
+    // 设置自动消失
+    setTimeout(() => {
+      showNotification.value = false;
+    }, duration);
+  }
+}
+// 显示通知
+
+// --- 组件属性处理辅助函数 ---
+// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
+
+// --- 生命周期钩子 ---
+onMounted(async () => {
+  // 初始化画布设置
+  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
+
+  // 获取初始图表数据
+  const canvasInstance = diagramCanvas.value as any;
+  if (canvasInstance && canvasInstance.getDiagramData) {
+    diagramData.value = canvasInstance.getDiagramData();
+
+    // 预加载所有使用的组件模块，以确保它们在渲染时可用
+    const componentTypes = new Set<string>();
+    diagramData.value.parts.forEach((part) => {
+      componentTypes.add(part.type);
+    });
+
+    console.log("Preloading component modules:", Array.from(componentTypes));
+
+    // 并行加载所有组件模块
+    await Promise.all(
+      Array.from(componentTypes).map((type) => loadComponentModule(type)),
+    );
+
+    console.log("All component modules loaded");
+  }
+});
+
+onUnmounted(() => {
+  // 组件卸载时的清理工作（如果需要的话）
+});
 </script>
 
-<style>
+<style scoped lang="postcss">
+/* 样式保持不变 */
 @import "../assets/main.css";
+
+.animate-slideRight {
+  animation: slideRight 0.3s ease-out forwards;
+}
+
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 确保滚动行为仅在需要时出现 */
+html,
+body {
+  overflow: hidden;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* 文档面板样式 */
+.doc-panel {
+  padding: 1.5rem;
+  max-width: 100%;
+  margin: 0;
+  background-color: transparent;
+  /* 使用透明背景 */
+  border: none;
+  /* 确保没有边框 */
+}
+
+/* 文档切换按钮样式 */
+.doc-toggle-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 50;
+}
+
+/* Markdown渲染样式调整 */
+:deep(.markdown-content) {
+  padding: 1rem;
+  background-color: hsl(var(--b1));
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
 </style>
diff --git a/src/views/ProjectViewBack.vue b/src/views/ProjectViewBack.vue
deleted file mode 100644
index 88bc8c3..0000000
--- a/src/views/ProjectViewBack.vue
+++ /dev/null
@@ -1,844 +0,0 @@
-<template>
-  <div class="h-screen flex flex-col overflow-hidden">
-    <div class="flex flex-1 overflow-hidden relative">
-      <!-- 左侧图形化区域 -->
-      <div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
-        <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
-          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
-          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
-          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
-          @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
-      </div>
-
-      <!-- 拖拽分割线 -->
-      <div
-        class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
-        @mousedown="startResize"></div>
-      <!-- 右侧编辑区域 -->
-      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
-        <div class="overflow-y-auto flex-1">
-          <!-- 使用条件渲染显示不同的面板 -->
-          <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
-            :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
-            @updateDirectProp="updateComponentDirectProp" />
-          <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
-            <MarkdownRenderer :content="documentContent" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 元器件选择组件 -->
-    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
-  </div>
-</template>
-
-<script setup lang="ts">
-// 引入wokwi-elements和组件
-// import "@wokwi/elements"; // 不再需要全局引入 wokwi
-import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
-import DiagramCanvas from "@/components/DiagramCanvas.vue";
-import ComponentSelector from "@/components/ComponentSelector.vue";
-import PropertyPanel from "@/components/PropertyPanel.vue";
-import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
-import type { DiagramData, DiagramPart } from "@/components/diagramManager";
-import {
-  type PropertyConfig,
-  generatePropertyConfigs,
-  generatePropsFromDefault,
-  generatePropsFromAttrs,
-} from "@/components/equipments/componentConfig"; // 引入组件配置工具
-
-// --- 文档面板控制 ---
-const showDocPanel = ref(false);
-const documentContent = ref("");
-
-// 获取路由参数
-import { useRoute } from "vue-router";
-const route = useRoute();
-
-// 切换文档面板和属性面板
-async function toggleDocPanel() {
-  showDocPanel.value = !showDocPanel.value;
-
-  // 如果切换到文档面板，则获取文档内容
-  if (showDocPanel.value) {
-    await loadDocumentContent();
-  }
-}
-
-// 加载文档内容
-async function loadDocumentContent() {
-  try {
-    // 从路由参数中获取教程ID
-    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
-
-    // 构建文档路径
-    let docPath = `/doc/${tutorialId}/doc.md`;
-
-    // 检查当前路径是否包含下划线（例如 02_key 格式）
-    // 如果不包含，那么使用更新的命名格式
-    if (!tutorialId.includes("_")) {
-      docPath = `/doc/${tutorialId}/doc.md`;
-    }
-
-    // 获取文档内容
-    const response = await fetch(docPath);
-    if (!response.ok) {
-      throw new Error(`Failed to load document: ${response.status}`);
-    }
-
-    // 更新文档内容，并替换图片路径
-    documentContent.value = (await response.text()).replace(
-      /.\/images/gi,
-      `/doc/${tutorialId}/images`,
-    );
-  } catch (error) {
-    console.error("加载文档失败:", error);
-    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
-  }
-}
-
-// 检查是否有例程参数，如果有则自动打开文档面板
-onMounted(async () => {
-  if (route.query.tutorial) {
-    showDocPanel.value = true;
-    await loadDocumentContent();
-  }
-});
-
-// --- 元器件管理 ---
-const showComponentsMenu = ref(false);
-const diagramData = ref<DiagramData>({
-  version: 1,
-  author: "admin",
-  editor: "me",
-  parts: [],
-  connections: [],
-});
-
-const selectedComponentId = ref<string | null>(null);
-const selectedComponentData = computed(() => {
-  return (
-    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
-    null
-  );
-});
-const diagramCanvas = ref(null);
-
-// 存储动态导入的组件模块
-interface ComponentModule {
-  default: any;
-  getDefaultProps?: () => Record<string, any>;
-  config?: {
-    props?: Array<PropertyConfig>;
-  };
-}
-
-const componentModules = shallowRef<Record<string, ComponentModule>>({});
-const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
-  null,
-); // 存储选中组件的配置
-
-// 动态加载组件定义
-async function loadComponentModule(type: string) {
-  if (!componentModules.value[type]) {
-    try {
-      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`../components/equipments/${type}.vue`);
-
-      // 使用 markRaw 包装模块，避免不必要的响应式处理
-      componentModules.value = {
-        ...componentModules.value,
-        [type]: module,
-      };
-
-      console.log(`Loaded module for ${type}:`, module);
-    } catch (error) {
-      console.error(`Failed to load component module ${type}:`, error);
-      return null;
-    }
-  }
-  return componentModules.value[type];
-}
-
-// 处理组件模块加载请求
-async function handleLoadComponentModule(type: string) {
-  console.log("Handling load component module request for:", type);
-  await loadComponentModule(type);
-}
-
-// --- 分割面板 ---
-const leftPanelWidth = ref(60);
-const isResizing = ref(false);
-
-// 分割面板拖拽相关函数
-function startResize(e: MouseEvent) {
-  isResizing.value = true;
-  document.addEventListener("mousemove", onResize);
-  document.addEventListener("mouseup", stopResize);
-  e.preventDefault(); // 防止文本选择
-}
-
-function onResize(e: MouseEvent) {
-  if (!isResizing.value) return;
-
-  // 获取容器宽度和鼠标位置
-  const container = document.querySelector(
-    ".flex-1.overflow-hidden",
-  ) as HTMLElement;
-  if (!container) return;
-
-  const containerWidth = container.clientWidth;
-  const mouseX = e.clientX;
-
-  // 计算左侧面板应占的百分比
-  let newWidth = (mouseX / containerWidth) * 100;
-
-  // 限制最小宽度和最大宽度
-  newWidth = Math.max(20, Math.min(newWidth, 80));
-
-  // 更新宽度
-  leftPanelWidth.value = newWidth;
-}
-
-function stopResize() {
-  isResizing.value = false;
-  document.removeEventListener("mousemove", onResize);
-  document.removeEventListener("mouseup", stopResize);
-}
-
-// --- 元器件操作 ---
-function openComponentsMenu() {
-  showComponentsMenu.value = true;
-}
-
-// 处理 ComponentSelector 组件添加元器件事件
-async function handleAddComponent(componentData: {
-  type: string;
-  name: string;
-  props: Record<string, any>;
-}) {
-  // 加载组件模块以便后续使用
-  const componentModule = await loadComponentModule(componentData.type);
-
-  // 获取画布容器和位置信息
-  const canvasInstance = diagramCanvas.value as any;
-
-  // 获取当前画布的位置信息
-  let position = { x: 100, y: 100 };
-  let scale = 1;
-
-  try {
-    if (
-      canvasInstance &&
-      canvasInstance.getCanvasPosition &&
-      canvasInstance.getScale
-    ) {
-      position = canvasInstance.getCanvasPosition();
-      scale = canvasInstance.getScale();
-
-      // 获取画布容器
-      const canvasContainer = canvasInstance.$el as HTMLElement;
-      if (canvasContainer) {
-        // 计算可视区域中心点在画布坐标系中的位置
-        const viewportWidth = canvasContainer.clientWidth;
-        const viewportHeight = canvasContainer.clientHeight;
-
-        // 计算画布中心点的坐标
-        position.x = (viewportWidth / 2 - position.x) / scale;
-        position.y = (viewportHeight / 2 - position.y) / scale;
-      }
-    }
-  } catch (error) {
-    console.error("获取画布位置时出错:", error);
-  }
-
-  // 添加一些随机偏移，避免元器件重叠
-  const offsetX = Math.floor(Math.random() * 100) - 50;
-  const offsetY = Math.floor(Math.random() * 100) - 50;
-
-  // 获取组件的能力页面
-  let capsPage = null;
-  if (
-    componentModule &&
-    componentModule.default &&
-    typeof componentModule.default.getCapabilities === "function"
-  ) {
-    try {
-      capsPage = componentModule.default.getCapabilities();
-      console.log(`获取到${componentData.type}组件的能力页面`);
-    } catch (error) {
-      console.error(`获取${componentData.type}组件能力页面失败:`, error);
-    }
-  }
-
-  // 创建新组件，使用diagramManager接口定义
-  const newComponent: DiagramPart = {
-    id: `component-${Date.now()}`,
-    type: componentData.type,
-    x: Math.round(position.x + offsetX),
-    y: Math.round(position.y + offsetY),
-    attrs: componentData.props,
-    rotate: 0,
-    group: "",
-    positionlock: false,
-    hidepins: true,
-    isOn: true,
-    index: 0,
-  };
-
-  console.log("添加新组件:", newComponent);
-  // 通过画布实例添加组件
-  if (
-    canvasInstance &&
-    canvasInstance.getDiagramData &&
-    canvasInstance.updateDiagramDataDirectly
-  ) {
-    const currentData = canvasInstance.getDiagramData();
-    currentData.parts.push(newComponent);
-    canvasInstance.updateDiagramDataDirectly(currentData);
-  }
-}
-
-// 处理模板添加事件
-async function handleAddTemplate(templateData: {
-  id: string;
-  name: string;
-  template: any;
-}) {
-  console.log("添加模板:", templateData);
-  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
-  // 获取画布实例
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例添加模板");
-    return;
-  }
-
-  // 获取当前图表数据
-  const currentData = canvasInstance.getDiagramData();
-  console.log("=== 当前图表组件数量:", currentData.parts.length);
-
-  // 生成唯一ID前缀，以确保添加的组件ID不重复
-  const idPrefix = `template-${Date.now()}-`;
-  // 处理模板组件并添加到图表
-  if (templateData.template && templateData.template.parts) {
-    // 获取当前视口中心位置
-    let viewportCenter = { x: 300, y: 200 }; // 默认值
-    try {
-      if (
-        canvasInstance &&
-        canvasInstance.getCanvasPosition &&
-        canvasInstance.getScale
-      ) {
-        const position = canvasInstance.getCanvasPosition();
-        const scale = canvasInstance.getScale();
-
-        // 获取画布容器
-        const canvasContainer = canvasInstance.$el as HTMLElement;
-        if (canvasContainer) {
-          // 计算可视区域中心点在画布坐标系中的位置
-          const viewportWidth = canvasContainer.clientWidth;
-          const viewportHeight = canvasContainer.clientHeight;
-
-          // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
-          viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
-          viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
-          console.log(
-            `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
-          );
-        }
-      }
-    } catch (error) {
-      console.error("获取视口中心位置时出错:", error);
-    }
-
-    console.log("=== 使用视口中心添加模板组件:", viewportCenter);
-
-    // 找到模板中的主要组件（假设是第一个组件）
-    const mainPart = templateData.template.parts[0];
-
-    // 创建带有新位置的组件
-    const newParts = await Promise.all(
-      templateData.template.parts.map(async (part: any) => {
-        // 创建组件副本并分配新ID
-        const newPart = JSON.parse(JSON.stringify(part));
-        newPart.id = `${idPrefix}${part.id}`;
-
-        // 尝试加载组件模块并获取能力页面
-        try {
-          const componentModule = await loadComponentModule(part.type);
-          if (
-            componentModule &&
-            componentModule.default &&
-            typeof componentModule.default.getCapabilities === "function"
-          ) {
-            newPart.capsPage = componentModule.default.getCapabilities();
-            console.log(`加载模板组件${part.type}组件的能力页面成功`);
-          }
-        } catch (error) {
-          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
-        }
-
-        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
-        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
-          const oldX = newPart.x;
-          const oldY = newPart.y;
-
-          // 计算相对位置（相对于主要组件）
-          const relativeX = part.x - mainPart.x;
-          const relativeY = part.y - mainPart.y;
-
-          // 应用到视口中心位置
-          newPart.x = viewportCenter.x + relativeX;
-          newPart.y = viewportCenter.y + relativeY;
-
-          console.log(
-            `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
-          );
-        }
-
-        return newPart;
-      }),
-    );
-
-    // 向图表添加新组件
-    currentData.parts.push(...newParts);
-
-    // 处理连接关系
-    if (templateData.template.connections) {
-      // 创建一个映射表用于转换旧组件ID到新组件ID
-      const idMap: Record<string, string> = {};
-      templateData.template.parts.forEach((part: any) => {
-        idMap[part.id] = `${idPrefix}${part.id}`;
-      });
-
-      // 添加连接，更新组件ID引用
-      const newConnections = templateData.template.connections.map(
-        (conn: any) => {
-          // 处理连接数据 (格式为 [from, to, type, path])
-          if (Array.isArray(conn)) {
-            const [from, to, type, path] = conn;
-
-            // 从连接字符串中提取组件ID和引脚ID
-            const fromParts = from.split(":");
-            const toParts = to.split(":");
-
-            if (fromParts.length === 2 && toParts.length === 2) {
-              const fromComponentId = fromParts[0];
-              const fromPinId = fromParts[1];
-              const toComponentId = toParts[0];
-              const toPinId = toParts[1];
-
-              // 创建新的连接字符串，使用新的组件ID
-              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
-              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
-
-              return [newFrom, newTo, type, path];
-            }
-          }
-          return conn; // 如果格式不匹配，保持原样
-        },
-      );
-
-      // 添加到当前连接列表
-      currentData.connections.push(...newConnections);
-    }
-    // 更新图表数据
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
-
-    // 显示成功消息
-    showToast(`已添加 ${templateData.name} 模板`, "success");
-  } else {
-    console.error("模板格式错误，缺少parts数组");
-    showToast("模板格式错误", "error");
-  }
-}
-
-// 处理组件选中事件
-async function handleComponentSelected(componentData: DiagramPart | null) {
-  selectedComponentId.value = componentData ? componentData.id : null;
-  selectedComponentConfig.value = null; // 重置配置
-
-  if (componentData) {
-    // 先加载组件模块
-    const moduleRef = await loadComponentModule(componentData.type);
-
-    if (moduleRef) {
-      try {
-        // 创建属性配置数组
-        const propConfigs: PropertyConfig[] = [];
-
-        // 创建一个映射来跟踪已添加的属性名
-        const addedProps = new Set<string>();
-
-        // 1. 首先从getDefaultProps方法获取默认配置
-        if (typeof moduleRef.getDefaultProps === "function") {
-          const defaultProps = moduleRef.getDefaultProps();
-          const defaultPropConfigs = generatePropsFromDefault(defaultProps);
-
-          // 添加默认配置并记录属性名
-          defaultPropConfigs.forEach((config) => {
-            propConfigs.push(config);
-            addedProps.add(config.name);
-          });
-        }
-
-        // 2. 添加组件直接属性，这些属性会覆盖默认配置
-        const directPropConfigs = generatePropertyConfigs(componentData);
-
-        // 过滤掉已经添加过的属性名
-        const newDirectProps = directPropConfigs.filter(
-          (config) => !addedProps.has(config.name),
-        );
-        propConfigs.push(...newDirectProps);
-
-        // 3. 最后添加attrs中的属性
-        if (componentData.attrs) {
-          const attrs = componentData.attrs;
-          const attrPropConfigs = generatePropsFromAttrs(attrs);
-
-          // 更新已存在的属性值，或添加新属性
-          attrPropConfigs.forEach((attrConfig) => {
-            const existingIndex = propConfigs.findIndex(
-              (p) => p.name === attrConfig.name,
-            );
-            if (existingIndex >= 0) {
-              // 更新已存在的属性值
-              propConfigs[existingIndex] = attrConfig;
-            } else {
-              // 添加新属性
-              propConfigs.push(attrConfig);
-            }
-          });
-        }
-
-        selectedComponentConfig.value = { props: propConfigs };
-        console.log(
-          `Built config for ${componentData.type}:`,
-          selectedComponentConfig.value,
-        );
-      } catch (error) {
-        console.error(
-          `Error building config for ${componentData.type}:`,
-          error,
-        );
-        selectedComponentConfig.value = { props: [] };
-      }
-    } else {
-      console.warn(`Module for component ${componentData.type} not found.`);
-      selectedComponentConfig.value = { props: [] };
-    }
-  }
-}
-
-// 处理图表数据更新事件
-function handleDiagramUpdated(data: DiagramData) {
-  diagramData.value = data;
-  console.log("Diagram data updated:", data);
-}
-
-// 处理组件移动事件
-function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
-  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
-  if (part) {
-    part.x = moveData.x;
-    part.y = moveData.y;
-  }
-}
-
-// 处理组件删除事件
-function handleComponentDelete(componentId: string) {
-  // 查找要删除的组件
-  const component = diagramData.value.parts.find((p) => p.id === componentId);
-  if (!component) return;
-
-  // 收集需要删除的组件ID列表（包括当前组件和同组组件）
-  const componentsToDelete: string[] = [componentId];
-
-  // 如果组件属于一个组，则找出所有同组的组件
-  if (component.group && component.group !== "") {
-    const groupMembers = diagramData.value.parts.filter(
-      (p) => p.group === component.group && p.id !== componentId,
-    );
-
-    // 将同组组件ID添加到删除列表
-    componentsToDelete.push(...groupMembers.map((p) => p.id));
-    console.log(
-      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
-    );
-  }
-
-  // 删除所有标记的组件
-  diagramData.value.parts = diagramData.value.parts.filter(
-    (p) => !componentsToDelete.includes(p.id),
-  );
-
-  // 同时删除与这些组件相关的所有连接
-  diagramData.value.connections = diagramData.value.connections.filter(
-    (connection) => {
-      for (const id of componentsToDelete) {
-        if (
-          connection[0].startsWith(`${id}:`) ||
-          connection[1].startsWith(`${id}:`)
-        ) {
-          return false;
-        }
-      }
-      return true;
-    },
-  );
-
-  // 如果删除的是当前选中的组件，清除选中状态
-  if (
-    selectedComponentId.value &&
-    componentsToDelete.includes(selectedComponentId.value)
-  ) {
-    selectedComponentId.value = null;
-    selectedComponentConfig.value = null;
-  }
-}
-
-// 更新组件属性的方法
-function updateComponentProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例进行属性更新");
-    return;
-  }
-
-  // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
-  if (value !== null && typeof value === "object" && "value" in value) {
-    value = value.value;
-  }
-
-  const currentData = canvasInstance.getDiagramData();
-  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-  if (part) {
-    // 检查是否为基本属性
-    if (propName in part) {
-      (part as any)[propName] = value;
-    } else {
-      // 否则当作attrs中的属性处理
-      if (!part.attrs) {
-        part.attrs = {};
-      }
-      part.attrs[propName] = value;
-    }
-
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(
-      `更新组件${componentId}的属性${propName}为:`,
-      value,
-      typeof value,
-    );
-  }
-}
-
-// 更新组件的直接属性
-function updateComponentDirectProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例进行属性更新");
-    return;
-  }
-
-  const currentData = canvasInstance.getDiagramData();
-  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-  if (part) {
-    // @ts-ignore: 动态属性赋值
-    part[propName] = value;
-
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(
-      `更新组件${componentId}的直接属性${propName}为:`,
-      value,
-      typeof value,
-    );
-  }
-}
-
-// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
-
-// 处理连线创建事件
-function handleWireCreated(wireData: any) {
-  console.log("Wire created:", wireData);
-}
-
-// 处理连线删除事件
-function handleWireDeleted(wireId: string) {
-  console.log("Wire deleted:", wireId);
-}
-
-// 导出当前diagram数据
-function exportDiagram() {
-  // 直接使用DiagramCanvas组件提供的导出功能
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.exportDiagram) {
-    canvasInstance.exportDiagram();
-  }
-}
-
-// --- 消息提示 ---
-const showNotification = ref(false);
-const notificationMessage = ref("");
-const notificationType = ref<"success" | "error" | "info">("info");
-
-function showToast(
-  message: string,
-  type: "success" | "error" | "info" = "info",
-  duration = 3000,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.showToast) {
-    canvasInstance.showToast(message, type, duration);
-  } else {
-    // 后备方案：使用原来的通知系统
-    notificationMessage.value = message;
-    notificationType.value = type;
-    showNotification.value = true;
-
-    // 设置自动消失
-    setTimeout(() => {
-      showNotification.value = false;
-    }, duration);
-  }
-}
-// 显示通知
-
-// --- 组件属性处理辅助函数 ---
-// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
-
-// --- 生命周期钩子 ---
-onMounted(async () => {
-  // 初始化画布设置
-  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
-
-  // 获取初始图表数据
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.getDiagramData) {
-    diagramData.value = canvasInstance.getDiagramData();
-
-    // 预加载所有使用的组件模块，以确保它们在渲染时可用
-    const componentTypes = new Set<string>();
-    diagramData.value.parts.forEach((part) => {
-      componentTypes.add(part.type);
-    });
-
-    console.log("Preloading component modules:", Array.from(componentTypes));
-
-    // 并行加载所有组件模块
-    await Promise.all(
-      Array.from(componentTypes).map((type) => loadComponentModule(type)),
-    );
-
-    console.log("All component modules loaded");
-  }
-});
-
-onUnmounted(() => {
-  document.removeEventListener("mousemove", onResize);
-  document.removeEventListener("mouseup", stopResize);
-});
-</script>
-
-<style scoped lang="postcss">
-/* 样式保持不变 */
-@import "../assets/main.css";
-
-/* 分割线样式 */
-.resizer {
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  transition: background-color 0.3s;
-  z-index: 10;
-}
-
-.resizer:hover,
-.resizer:active {
-  width: 6px;
-}
-
-/* 调整大小时应用全局样式 */
-:global(body.resizing) {
-  cursor: col-resize;
-  user-select: none;
-}
-
-.animate-slideRight {
-  animation: slideRight 0.3s ease-out forwards;
-}
-
-@keyframes slideRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 确保滚动行为仅在需要时出现 */
-html,
-body {
-  overflow: hidden;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-/* 文档面板样式 */
-.doc-panel {
-  padding: 1.5rem;
-  max-width: 100%;
-  margin: 0;
-  background-color: transparent;
-  /* 使用透明背景 */
-  border: none;
-  /* 确保没有边框 */
-}
-
-/* 文档切换按钮样式 */
-.doc-toggle-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 50;
-}
-
-/* Markdown渲染样式调整 */
-:deep(.markdown-content) {
-  padding: 1rem;
-  background-color: hsl(var(--b1));
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/src/views/ProjectViewNew.vue b/src/views/ProjectViewNew.vue
new file mode 100644
index 0000000..6705c88
--- /dev/null
+++ b/src/views/ProjectViewNew.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="h-screen w-screen">
+    <SplitterGroup id="splitter-group" direction="horizontal">
+      <SplitterPanel
+        id="splitter-group-panel-canvas"
+        :default-size="80"
+        :min-size="30"
+        class="bg-white border rounded-xl flex items-center justify-center"
+      >
+        <LabCanvas></LabCanvas>
+      </SplitterPanel>
+      <SplitterResizeHandle id="splitter-group-resize-handle" class="w-2" />
+      <SplitterPanel
+        id="splitter-group-panel-properties"
+        :min-size="20"
+        class="bg-white border rounded-xl flex items-center justify-center"
+      >
+        Panel A
+      </SplitterPanel>
+    </SplitterGroup>
+    <!-- <div class="absolute top-20 left-10">
+      <input type="checkbox" class="checkbox" @change="handleCacheChange" />
+      cache shapes
+    </div> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useProvideLabCanvasStore } from "@/components/LabCanvasNew/composable/LabCanvasManager";
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
+import LabCanvas from "@/components/LabCanvasNew/LabCanvas.vue";
+
+useProvideLabCanvasStore({width:window.innerWidth, height: window.innerHeight});
+</script>
+
+<style>
+@import "../assets/main.css";
+</style>