SikongJueluo/FPGA_WebLab
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor：持续解耦合

Browse Source
This commit is contained in:
SikongJueluo
2025-07-09 16:32:17 +08:00
parent 91b00a977c
commit 3a292c0a98
10 changed files with 183 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/components/LabCanvas/DiagramCanvas.vue
View File

@@ -83,15 +83,15 @@
}
">
<!-- 动态渲染组件 -->
<component :is="getComponentDefinition(component.type)"
v-if="props.componentModules[component.type] && getComponentDefinition(component.type)"
v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
<component :is="componentManager.getComponentDefinition(component.type)"
v-if="componentManager.componentModules.value[component.type] && componentManager.getComponentDefinition(component.type)"
v-bind="componentManager.prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
(value: string) =>
updateComponentProp(component.id, 'bindKey', value)
" @pin-click="
(pinInfo: any) =>
handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
" :ref="(el: any) => setComponentRef(component.id, el)" />
" :ref="(el: any) => componentManager.setComponentRef(component.id, el)" />
<!-- Fallback if component module not loaded yet -->
<div v-else
@@ -99,7 +99,7 @@
<div class="flex flex-col items-center">
<div class="loading loading-spinner loading-xs mb-1"></div>
<span>Loading {{ component.type }}...</span>
<small class="mt-1 text-xs">{{ props.componentModules[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
<small class="mt-1 text-xs">{{ componentManager.componentModules.value[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
</div>
</div>
</div>
@@ -138,6 +138,7 @@ import {
watch,
provide,
} from "vue";
import { useEventListener } from "@vueuse/core";
import WireComponent from "@/components/equipments/Wire.vue";
// 导入 diagram 管理器
@@ -151,17 +152,17 @@ import {
parseConnectionPin,
connectionArrayToWireItem,
validateDiagramData,
} from "./diagramManager";
} from "./composable/diagramManager";
import type {
DiagramData,
DiagramPart,
ConnectionArray,
WireItem,
} from "./diagramManager";
} from "./composable/diagramManager";
import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
import { useComponentManager } from "./componentManager";
import { useComponentManager } from "./composable/componentManager";
// 右键菜单处理函数
function handleContextMenu(e: MouseEvent) {
@@ -179,7 +180,6 @@ const emit = defineEmits([
// 定义组件接受的属性
const props = defineProps<{
componentModules: Record<string, any>;
showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
}>();
@@ -214,8 +214,8 @@ const diagramData = ref<DiagramData>({
connections: [],
});
// 组件引用跟踪
const componentRefs = ref<Record<string, any>>({});
// 组件引用跟踪（保留以便向后兼容）
const componentRefs = computed(() => componentManager?.componentRefs.value || {});
// 计算属性：从 diagramData 中提取组件列表，并按index属性排序
const diagramParts = computed<DiagramPart[]>(() => {
@@ -259,7 +259,7 @@ const wireItems = computed<WireItem[]>(() => {
startPos.y = startComp.y;
// 尝试获取引脚精确位置（如果有实现）
const startCompRef = componentRefs.value?.[startCompId];
const startCompRef = componentManager?.getComponentRef(startCompId);
if (startCompRef && typeof startCompRef.getPinPosition === "function") {
try {
const pinPos = startCompRef.getPinPosition(startPinId);
@@ -285,7 +285,7 @@ const wireItems = computed<WireItem[]>(() => {
endPos.y = endComp.y;
// 尝试获取引脚精确位置
const endCompRef = componentRefs.value?.[endCompId];
const endCompRef = componentManager?.getComponentRef(endCompId);
if (endCompRef && typeof endCompRef.getPinPosition === "function") {
try {
const pinPos = endCompRef.getPinPosition(endPinId);
@@ -330,6 +330,37 @@ const toastTimers: number[] = [];
// 文件选择引用
const fileInput = ref<HTMLInputElement | null>(null);
// VueUse事件监听器状态管理
const isDragEventActive = ref(false);
const isComponentDragEventActive = ref(false);
const isWireCreationEventActive = ref(false);
// 使用VueUse设置事件监听器
// 画布拖拽事件
useEventListener(document, 'mousemove', (e: MouseEvent) => {
if (isDragEventActive.value) {
onDrag(e);
}
if (isComponentDragEventActive.value) {
onComponentDrag(e);
}
if (isWireCreationEventActive.value) {
onCreatingWireMouseMove(e);
}
});
useEventListener(document, 'mouseup', () => {
if (isDragEventActive.value) {
stopDrag();
}
if (isComponentDragEventActive.value) {
stopComponentDrag();
}
});
// 键盘事件
useEventListener(window, 'keydown', handleKeyDown);
// --- 缩放功能 ---
const MIN_SCALE = 0.2;
const MAX_SCALE = 10.0;
@@ -367,76 +398,6 @@ function onZoom(e: WheelEvent) {
scale.value = newScale;
}
// --- 动态组件渲染 ---
const getComponentDefinition = (type: string) => {
const module = props.componentModules[type];
if (!module) {
console.warn(`No module found for component type: ${type}`);
// 尝试异步加载组件模块
loadComponentModule(type);
return null;
}
// 确保我们返回一个有效的组件定义
if (module.default) {
return module.default;
} else if (module.__esModule && module.default) {
// 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
return module.default;
} else {
console.warn(
`Module for ${type} found but default export is missing`,
module,
);
return null;
}
};
function prepareComponentProps(
attrs: Record<string, any>,
componentId?: string,
): Record<string, any> {
const result: Record<string, any> = { ...attrs };
if (componentId) {
result.componentId = componentId;
}
// console.log(`组件属性 ID: ${componentId}`, result);
return result;
}
// 设置组件引用
function setComponentRef(componentId: string, el: any) {
if (componentRefs.value) {
if (el) {
componentRefs.value[componentId] = el;
} else {
delete componentRefs.value[componentId];
}
}
}
// 重置组件引用缓存
function resetComponentRefs() {
componentRefs.value = {};
}
// 加载组件模块
async function loadComponentModule(type: string) {
if (!props.componentModules[type]) {
try {
// 直接通过componentManager加载组件模块
if (componentManager) {
await componentManager.loadComponentModule(type);
// 强制更新当前组件，确保新加载的模块能被识别
console.log(`Component module ${type} loaded successfully`);
}
} catch (error) {
console.error(`Failed to request component module ${type}:`, error);
}
}
}
// --- 画布交互逻辑 ---
function handleCanvasMouseDown(e: MouseEvent) {
// 如果是直接点击画布（而不是元器件），清除选中状态
@@ -468,8 +429,7 @@ function startDrag(e: MouseEvent) {
dragStart.x = e.clientX - position.x;
dragStart.y = e.clientY - position.y;
document.addEventListener("mousemove", onDrag);
document.addEventListener("mouseup", stopDrag);
isDragEventActive.value = true;
e.preventDefault();
}
@@ -484,8 +444,7 @@ function startMiddleDrag(e: MouseEvent) {
dragStart.x = e.clientX - position.x;
dragStart.y = e.clientY - position.y;
document.addEventListener("mousemove", onDrag);
document.addEventListener("mouseup", stopDrag);
isDragEventActive.value = true;
e.preventDefault();
}
@@ -501,9 +460,7 @@ function onDrag(e: MouseEvent) {
function stopDrag() {
isDragging.value = false;
isMiddleDragging.value = false;
document.removeEventListener("mousemove", onDrag);
document.removeEventListener("mouseup", stopDrag);
isDragEventActive.value = false;
}
// --- 组件拖拽交互 ---
@@ -558,9 +515,8 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
componentDragOffset.x = mouseX_canvas - component.x;
componentDragOffset.y = mouseY_canvas - component.y;
// 添加全局监听器
document.addEventListener("mousemove", onComponentDrag);
document.addEventListener("mouseup", stopComponentDrag);
// 激活组件拖拽事件监听
isComponentDragEventActive.value = true;
}
// 拖拽组件过程
@@ -589,14 +545,6 @@ function onComponentDrag(e: MouseEvent) {
);
if (!draggedComponent) return;
// 更新组件位置
// diagramData.value = updatePartPosition(
// diagramData.value,
// draggingComponentId.value,
// Math.round(newX),
// Math.round(newY),
// );
// 如果组件属于组，移动组内所有其他组件
if (draggedComponent.group) {
const deltaX = Math.round(newX) - draggedComponent.x;
@@ -647,8 +595,7 @@ function stopComponentDrag() {
draggingComponentId.value = null;
}
document.removeEventListener("mousemove", onComponentDrag);
document.removeEventListener("mouseup", stopComponentDrag);
isComponentDragEventActive.value = false;
}
// 更新组件属性
@@ -700,8 +647,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
console.log("鼠标位置:", mousePosition);
if (!isCreatingWire.value) {
// 开始创建连线
const containerRect = canvasContainer.value.getBoundingClientRect();
// 获取初始位置信息
let pinPosition = pinInfo.position;
console.log("Pin信息:", pinInfo);
@@ -710,7 +655,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
console.log("引脚ID:", pinId);
// 从组件引用中获取组件实例
const component = componentRefs.value[componentId];
const component = componentManager?.getComponentRef(componentId);
console.log("组件引用:", component);
// 查找组件部件对象以获取组件位置
@@ -771,7 +716,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
pinId,
pinInfo.constraint,
);
document.addEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = true;
} else {
// 完成连线创建
if (
@@ -786,7 +731,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
// 获取终点引脚位置
let endPosition = { x: 0, y: 0 };
const componentPart = diagramParts.value.find((p) => p.id === componentId);
const endComponent = componentRefs.value[componentId];
const endComponent = componentManager?.getComponentRef(componentId);
console.log("终点组件部件:", componentPart);
console.log("终点组件引用:", endComponent);
@@ -848,7 +793,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
// 重置连线创建状态
resetWireCreation();
document.removeEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = false;
}
}
@@ -881,7 +826,7 @@ function resetWireCreation() {
// 取消连线创建
function cancelWireCreation() {
resetWireCreation();
document.removeEventListener("mousemove", onCreatingWireMouseMove);
isWireCreationEventActive.value = false;
}
// 连线创建过程中的鼠标移动
@@ -1053,9 +998,6 @@ function showToast(
// --- 生命周期钩子 ---
onMounted(async () => {
// 重置组件引用
resetComponentRefs();
// 设置componentManager的画布引用
if (componentManager) {
// 创建一个包含必要方法的画布API对象
@@ -1102,9 +1044,6 @@ onMounted(async () => {
position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
}
// 添加键盘事件监听器
window.addEventListener("keydown", handleKeyDown);
});
// 处理键盘事件
@@ -1123,32 +1062,15 @@ function handleKeyDown(e: KeyboardEvent) {
}
onUnmounted(() => {
// 清理事件监听器
document.removeEventListener("mousemove", onComponentDrag);
document.removeEventListener("mouseup", stopComponentDrag);
document.removeEventListener("mousemove", onDrag);
document.removeEventListener("mouseup", stopDrag);
document.removeEventListener("mousemove", onCreatingWireMouseMove);
// 移除键盘事件监听器
window.removeEventListener("keydown", handleKeyDown);
// 清除所有toast定时器
toastTimers.forEach((timerId) => clearTimeout(timerId));
// 重置事件状态
isDragEventActive.value = false;
isComponentDragEventActive.value = false;
isWireCreationEventActive.value = false;
});
// --- 对外API ---
// 获取当前图表数据
function getDiagramData() {
return diagramData.value;
}
// 设置图表数据
function setDiagramData(data: DiagramData) {
diagramData.value = data;
emit("diagram-updated", data);
}
// 无加载动画的数据更新方法
function updateDiagramDataDirectly(data: DiagramData) {
// 检查组件是否仍然挂载
@@ -1218,15 +1140,6 @@ watch(
},
{ deep: true },
);
// 当组件模块加载完成后，确保组件引用正确建立
watch(
() => props.componentModules,
() => {
// 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
},
{ deep: true },
);
</script>
<style scoped>

75
src/components/LabCanvas/README.md
View File

@@ -1,75 +0,0 @@
# 组件管理器重构
这次重构将 ProjectView 中关于组件和模板的增删查改逻辑抽取到了独立的服务中，使代码更加模块化和可维护。
## 新增文件
### `/src/components/LabCanvas/componentManager.ts`
使用 VueUse 的 `createInjectionState` 创建的组件管理服务，包含以下功能：
#### 状态管理
- `componentModules`: 存储动态导入的组件模块
- `selectedComponentId`: 当前选中的组件ID
- `selectedComponentData`: 当前选中的组件数据（计算属性）
- `selectedComponentConfig`: 当前选中组件的配置信息
#### 核心方法
- `loadComponentModule(type: string)`: 动态加载组件模块
- `preloadComponentModules(types: string[])`: 预加载多个组件模块
- `addComponent(componentData)`: 添加新组件到画布
- `addTemplate(templateData)`: 添加模板到画布
- `deleteComponent(componentId)`: 删除组件及其相关连接
- `selectComponent(componentData)`: 选中组件并生成配置
- `updateComponentProp()`: 更新组件属性
- `updateComponentDirectProp()`: 更新组件直接属性
- `moveComponent()`: 移动组件位置
### `/src/components/LabCanvas/index.ts`
统一导出文件，提供清晰的模块接口：
- 导出组件管理器的 hooks
- 导出类型定义
## 重构后的 ProjectView
现在 ProjectView 仅负责：
### 页面UI状态管理
- 文档面板的显示/隐藏
- 组件选择器的显示/隐藏
- 通知消息的显示
### 文档相关功能
- 加载和显示教程文档
- 文档面板的切换动画
### 事件委托
- 将所有组件操作事件委托给组件管理器处理
- 保持简洁的事件处理逻辑
## 使用方式
在需要使用组件管理功能的地方：
```typescript
// 提供服务（通常在父组件中）
import { useProvideComponentManager } from "@/components/LabCanvas";
const componentManager = useProvideComponentManager();
// 消费服务（在子组件中）
import { useComponentManager } from "@/components/LabCanvas";
const componentManager = useComponentManager(); // 如果未提供则会报错
```
## 优势
1. **关注点分离**: ProjectView 专注于页面动画和UI状态，组件管理逻辑独立
2. **可重用性**: componentManager 可以在其他页面或组件中复用
3. **可测试性**: 组件管理逻辑可以独立进行单元测试
4. **类型安全**: 完整的 TypeScript 类型支持
5. **依赖注入**: 使用 VueUse 的注入机制，避免 prop drilling
## 注意事项
- 组件管理器需要在使用前通过 `useProvideComponentManager` 提供
- 画布引用需要通过 `setCanvasRef` 设置
- 初始化需要调用 `initialize` 方法

117
src/components/LabCanvas/componentManager.ts → src/components/LabCanvas/composable/componentManager.ts
View File

@@ -15,6 +15,7 @@ interface ComponentModule {
config?: {
props?: Array<PropertyConfig>;
};
__esModule?: boolean; // 添加 __esModule 属性
}
// 定义组件管理器的状态和方法
@@ -24,7 +25,8 @@ const [useProvideComponentManager, useComponentManager] = createInjectionState(
const componentModules = ref<Record<string, ComponentModule>>({});
const selectedComponentId = ref<string | null>(null);
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null);
const diagramCanvas = ref(null);
const diagramCanvas = ref<any>(null);
const componentRefs = ref<Record<string, any>>({});
// 计算当前选中的组件数据
const selectedComponentData = computed(() => {
@@ -486,6 +488,110 @@ const [useProvideComponentManager, useComponentManager] = createInjectionState(
diagramCanvas.value = canvasRef;
}
/**
* 设置组件DOM引用
*/
function setComponentRef(componentId: string, el: any) {
if (el) {
componentRefs.value[componentId] = el;
} else {
delete componentRefs.value[componentId];
}
}
/**
* 获取组件DOM引用
*/
function getComponentRef(componentId: string) {
return componentRefs.value[componentId];
}
/**
* 获取当前图表数据
*/
function getDiagramData() {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.getDiagramData) {
return canvasInstance.getDiagramData();
}
return { parts: [], connections: [], version: 1, author: "admin", editor: "me" };
}
/**
* 更新图表数据
*/
function updateDiagramData(data: any) {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.updateDiagramDataDirectly) {
canvasInstance.updateDiagramDataDirectly(data);
}
}
/**
* 获取画布位置和缩放信息
*/
function getCanvasInfo() {
const canvasInstance = diagramCanvas.value;
if (!canvasInstance) return { position: { x: 0, y: 0 }, scale: 1 };
const position = canvasInstance.getCanvasPosition ? canvasInstance.getCanvasPosition() : { x: 0, y: 0 };
const scale = canvasInstance.getScale ? canvasInstance.getScale() : 1;
return { position, scale };
}
/**
* 显示通知
*/
function showToast(message: string, type: "success" | "error" | "info" = "info") {
const canvasInstance = diagramCanvas.value;
if (canvasInstance && canvasInstance.showToast) {
canvasInstance.showToast(message, type);
}
}
/**
* 获取组件定义
*/
function getComponentDefinition(type: string) {
const module = componentModules.value[type];
if (!module) {
console.warn(`No module found for component type: ${type}`);
// 尝试异步加载组件模块
loadComponentModule(type);
return null;
}
// 确保我们返回一个有效的组件定义
if (module.default) {
return module.default;
} else if (module.__esModule && module.default) {
// 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
return module.default;
} else {
console.warn(
`Module for ${type} found but default export is missing`,
module,
);
return null;
}
}
/**
* 准备组件属性
*/
function prepareComponentProps(
attrs: Record<string, any>,
componentId?: string,
): Record<string, any> {
const result: Record<string, any> = { ...attrs };
if (componentId) {
result.componentId = componentId;
}
return result;
}
/**
* 初始化组件管理器
*/
@@ -511,6 +617,7 @@ const [useProvideComponentManager, useComponentManager] = createInjectionState(
selectedComponentId,
selectedComponentData,
selectedComponentConfig,
componentRefs,
// 方法
loadComponentModule,
@@ -523,6 +630,14 @@ const [useProvideComponentManager, useComponentManager] = createInjectionState(
updateComponentDirectProp,
moveComponent,
setCanvasRef,
setComponentRef,
getComponentRef,
getDiagramData,
updateDiagramData,
getCanvasInfo,
showToast,
getComponentDefinition,
prepareComponentProps,
initialize,
};
}

0
src/components/LabCanvas/diagramManager.ts → src/components/LabCanvas/composable/diagramManager.ts
View File

1
src/components/LabCanvas/wireManager.ts → src/components/LabCanvas/composable/wireManager.ts
View File

@@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
mousePosition.y = y;
}
// 其它Wire相关操作可继续扩展...

6
src/components/LabCanvas/index.ts
View File

@@ -1,8 +1,8 @@
// 导出组件管理器服务
export { useProvideComponentManager, useComponentManager } from './componentManager';
export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
// 导出图表管理器
export type { DiagramData, DiagramPart } from './diagramManager';
export type { DiagramData, DiagramPart } from './composable/diagramManager';
// 导出连线管理器
export type { WireItem } from './wireManager';
export type { WireItem } from './composable/wireManager';

2
src/components/PropertyEditor.vue
View File

@@ -128,7 +128,7 @@
<script setup lang="ts">
import { ref } from "vue";
import CollapsibleSection from "./CollapsibleSection.vue";
import { type DiagramPart } from "@/components/LabCanvas/diagramManager";
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager";
import {
type PropertyConfig,
getPropValue,

2
src/components/PropertyPanel.vue
View File

@@ -68,7 +68,7 @@
<script setup lang="ts">
// 导入所需的类型和组件
import { type DiagramPart } from "@/components/LabCanvas/diagramManager"; // 图表部件类型定义
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager"; // 图表部件类型定义
import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件

2
src/components/equipments/componentConfig.ts
View File

@@ -1,5 +1,5 @@
// componentConfig.ts 提供通用的组件配置功能
import type { DiagramPart } from '../LabCanvas/diagramManager';
import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
// 属性配置接口
export interface PropertyConfig {

2
src/views/ProjectView.vue
View File

@@ -9,7 +9,7 @@
:min-size="30"
class="relative bg-base-200 overflow-hidden h-full"
>
<DiagramCanvas ref="diagramCanvas" :componentModules="componentManager.componentModules.value" :showDocPanel="showDocPanel"
<DiagramCanvas ref="diagramCanvas" :showDocPanel="showDocPanel"
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
@toggle-doc-panel="toggleDocPanel" />
</SplitterPanel>