408 lines
15 KiB
Vue
408 lines
15 KiB
Vue
<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" :style="{ width: leftPanelWidth + '%' }"> <DiagramCanvas
|
||
ref="diagramCanvas" :components="components"
|
||
:componentModules="componentModules" @component-selected="handleComponentSelected"
|
||
@component-moved="handleComponentMoved"
|
||
@update-component-prop="updateComponentProp"
|
||
@component-delete="handleComponentDelete"
|
||
@wire-created="handleWireCreated"
|
||
@wire-deleted="handleWireDeleted"
|
||
/>
|
||
<!-- 添加元器件按钮 -->
|
||
<button class="btn btn-circle btn-primary absolute top-8 right-8 shadow-lg z-10" @click="openComponentsMenu">
|
||
<!-- SVG icon -->
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 拖拽分割线 -->
|
||
<div
|
||
class="resizer cursor-col-resize bg-base-300 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
|
||
@mousedown="startResize"
|
||
></div>
|
||
|
||
<!-- 右侧编辑区域 -->
|
||
<div class="bg-base-100 flex flex-col p-4 overflow-auto" :style="{ width: (100 - leftPanelWidth) + '%' }">
|
||
<h3 class="text-lg font-bold mb-4">属性编辑器</h3>
|
||
<div v-if="!selectedComponentData" class="text-gray-400">选择元器件以编辑属性</div>
|
||
<div v-else>
|
||
<div class="mb-4 pb-4 border-b border-base-300">
|
||
<h4 class="font-semibold text-lg mb-1">{{ selectedComponentData.name }}</h4>
|
||
<p class="text-xs text-gray-500">ID: {{ selectedComponentData.id }}</p>
|
||
<p class="text-xs text-gray-500">类型: {{ selectedComponentData.type }}</p>
|
||
</div>
|
||
|
||
<!-- 动态属性表单 -->
|
||
<div v-if="selectedComponentConfig && selectedComponentConfig.props" class="space-y-4">
|
||
<div v-for="prop in selectedComponentConfig.props" :key="prop.name" class="form-control">
|
||
<label class="label">
|
||
<span class="label-text">{{ prop.label || prop.name }}</span>
|
||
</label>
|
||
<!-- 根据 prop 类型选择输入控件 -->
|
||
<input
|
||
v-if="prop.type === 'string'"
|
||
type="text"
|
||
:placeholder="prop.label || prop.name"
|
||
class="input input-bordered input-sm w-full"
|
||
:value="selectedComponentData.props?.[prop.name]"
|
||
@input="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).value)"
|
||
/>
|
||
<input
|
||
v-else-if="prop.type === 'number'"
|
||
type="number"
|
||
:placeholder="prop.label || prop.name"
|
||
class="input input-bordered input-sm w-full"
|
||
:value="selectedComponentData.props?.[prop.name]"
|
||
@input="updateComponentProp(selectedComponentData.id, prop.name, parseFloat(($event.target as HTMLInputElement).value) || prop.default)"
|
||
/> <!-- 可以为 boolean 添加 checkbox，为 color 添加 color picker 等 -->
|
||
<div v-else-if="prop.type === 'boolean'" class="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
class="checkbox checkbox-sm mr-2"
|
||
:checked="selectedComponentData.props?.[prop.name]"
|
||
@change="updateComponentProp(selectedComponentData.id, prop.name, ($event.target as HTMLInputElement).checked)"
|
||
/>
|
||
<span>{{ prop.label || prop.name }}</span>
|
||
</div> <!-- 下拉选择框 -->
|
||
<select
|
||
v-else-if="prop.type === 'select' && prop.options"
|
||
class="select select-bordered select-sm w-full"
|
||
:value="selectedComponentData.props?.[prop.name]"
|
||
@change="(event) => {
|
||
const selectElement = event.target as HTMLSelectElement;
|
||
const value = selectElement.value;
|
||
console.log('选择的值:', value, '类型:', typeof value);
|
||
if (selectedComponentData) {updateComponentProp(selectedComponentData.id, prop.name, value);}
|
||
}"
|
||
>
|
||
<option v-for="option in prop.options" :key="option.value" :value="option.value">
|
||
{{ option.label }}
|
||
</option>
|
||
</select>
|
||
|
||
<p v-else class="text-xs text-warning">不支持的属性类型: {{ prop.type }}</p>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="selectedComponentData && !selectedComponentConfig" class="text-gray-500 text-sm">
|
||
正在加载组件配置...
|
||
</div>
|
||
<div v-else-if="selectedComponentData && selectedComponentConfig && (!selectedComponentConfig.props || selectedComponentConfig.props.length === 0)" class="text-gray-500 text-sm">
|
||
此组件没有可配置的属性。
|
||
</div>
|
||
</div>
|
||
</div> </div>
|
||
|
||
<!-- 元器件选择组件 -->
|
||
<ComponentSelector
|
||
:open="showComponentsMenu"
|
||
@update:open="showComponentsMenu = $event"
|
||
@add-component="handleAddComponent"
|
||
@close="showComponentsMenu = false"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 引入wokwi-elements和组件
|
||
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
|
||
import { ref, reactive, computed, onMounted, onUnmounted, defineAsyncComponent, shallowRef } from 'vue'; // 引入 defineAsyncComponent 和 shallowRef
|
||
import DiagramCanvas from '@/components/DiagramCanvas.vue';
|
||
import ComponentSelector from '@/components/ComponentSelector.vue';
|
||
import { getComponentConfig } from '@/components/equipments/componentConfig';
|
||
import type { ComponentConfig } from '@/components/equipments/componentConfig';
|
||
|
||
// --- 元器件管理 ---
|
||
const showComponentsMenu = ref(false);
|
||
interface ComponentItem {
|
||
id: string;
|
||
type: string; // 现在是组件的文件名或标识符，例如 'MechanicalButton'
|
||
name: string;
|
||
x: number;
|
||
y: number;
|
||
props?: Record<string, any>; // 添加 props 字段来存储组件实例的属性
|
||
}
|
||
const components = ref<ComponentItem[]>([]);
|
||
const selectedComponentId = ref<string | null>(null); // 重命名为 selectedComponentId
|
||
const selectedComponentData = computed(() => { // 改为计算属性
|
||
return components.value.find(c => c.id === selectedComponentId.value) || null;
|
||
});
|
||
const diagramCanvas = ref(null);
|
||
|
||
// 存储动态导入的组件模块
|
||
interface ComponentModule {
|
||
default: any;
|
||
config?: {
|
||
props?: Array<{
|
||
name: string;
|
||
type: string;
|
||
label?: string;
|
||
default: any;
|
||
options?: Array<{ value: any; label: string }>; // 添加 options 字段用于 select 类型
|
||
}>;
|
||
};
|
||
}
|
||
|
||
const componentModules = shallowRef<Record<string, ComponentModule>>({});
|
||
const selectedComponentConfig = shallowRef<ComponentModule['config'] | 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];
|
||
}
|
||
|
||
// --- 分割面板 ---
|
||
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> }) {
|
||
// 加载组件模块以便后续使用
|
||
await loadComponentModule(componentData.type);
|
||
|
||
// 获取画布容器和位置信息
|
||
const canvasInstance = diagramCanvas.value as any;
|
||
|
||
// 默认位置（当无法获取画布信息时使用）
|
||
let posX = 100;
|
||
let posY = 100;
|
||
|
||
try {
|
||
if (canvasInstance) {
|
||
// 获取画布容器
|
||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||
if (canvasContainer) {
|
||
// 获取当前画布的位置和缩放信息
|
||
const canvasPosition = canvasInstance.getCanvasPosition ?
|
||
canvasInstance.getCanvasPosition() :
|
||
{ x: 0, y: 0 };
|
||
const scale = canvasInstance.getScale ?
|
||
canvasInstance.getScale() :
|
||
1;
|
||
|
||
// 计算可视区域中心点在画布坐标系中的位置
|
||
const viewportWidth = canvasContainer.clientWidth;
|
||
const viewportHeight = canvasContainer.clientHeight;
|
||
|
||
// 计算画布中心点的坐标
|
||
posX = (viewportWidth / 2 - canvasPosition.x) / scale;
|
||
posY = (viewportHeight / 2 - canvasPosition.y) / scale;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error getting canvas position:', error);
|
||
// 使用默认位置
|
||
}
|
||
|
||
// 添加一些随机偏移，避免元器件重叠
|
||
const offsetX = Math.floor(Math.random() * 100) - 50;
|
||
const offsetY = Math.floor(Math.random() * 100) - 50;
|
||
|
||
const newComponent: ComponentItem = {
|
||
id: `component-${Date.now()}`,
|
||
type: componentData.type,
|
||
name: componentData.name,
|
||
x: Math.round(posX + offsetX),
|
||
y: Math.round(posY + offsetY),
|
||
props: componentData.props, // 使用从 ComponentSelector 传递的默认属性
|
||
};
|
||
|
||
components.value.push(newComponent);
|
||
}
|
||
|
||
// 处理组件选中事件
|
||
async function handleComponentSelected(componentData: ComponentItem | null) {
|
||
selectedComponentId.value = componentData ? componentData.id : null;
|
||
selectedComponentConfig.value = null; // 重置配置
|
||
|
||
if (componentData) {
|
||
// 从配置文件中获取组件配置
|
||
const config = getComponentConfig(componentData.type);
|
||
if (config) {
|
||
selectedComponentConfig.value = config;
|
||
console.log(`Config for ${componentData.type}:`, config);
|
||
} else {
|
||
console.warn(`No config found for component type ${componentData.type}`);
|
||
}
|
||
|
||
// 同时加载组件模块以备用
|
||
await loadComponentModule(componentData.type);
|
||
}
|
||
}
|
||
|
||
// 处理组件移动事件
|
||
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
|
||
const component = components.value.find(c => c.id === moveData.id);
|
||
if (component) {
|
||
component.x = moveData.x;
|
||
component.y = moveData.y;
|
||
}
|
||
}
|
||
|
||
// 处理组件删除事件
|
||
function handleComponentDelete(componentId: string) {
|
||
// 查找要删除的组件索引
|
||
const index = components.value.findIndex(c => c.id === componentId);
|
||
if (index !== -1) {
|
||
// 从数组中移除该组件
|
||
components.value.splice(index, 1);
|
||
// 如果删除的是当前选中的组件，清除选中状态
|
||
if (selectedComponentId.value === componentId) {
|
||
selectedComponentId.value = null;
|
||
selectedComponentConfig.value = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 更新组件属性的方法，处理字符串类型的初始值特殊格式
|
||
function updateComponentProp(componentId: string | { id: string; propName: string; value: any }, propName?: string, value?: any) {
|
||
// 处理来自 DiagramCanvas 的事件
|
||
if (typeof componentId === 'object') {
|
||
const { id, propName: name, value: val } = componentId;
|
||
componentId = id;
|
||
propName = name;
|
||
value = val;
|
||
}
|
||
const component = components.value.find(c => c.id === componentId);
|
||
if (component && propName !== undefined) {
|
||
if (!component.props) {
|
||
component.props = {};
|
||
}
|
||
|
||
// 检查值是否为对象，如果是对象并有value属性，则使用该属性值
|
||
if (value !== null && typeof value === 'object' && 'value' in value) {
|
||
value = value.value;
|
||
}
|
||
|
||
// 直接更新属性值
|
||
component.props[propName] = value;
|
||
|
||
console.log(`Updated ${componentId} prop ${propName} to:`, value, typeof value);
|
||
}
|
||
}
|
||
|
||
// 处理连线创建事件
|
||
function handleWireCreated(wireData: any) {
|
||
console.log('Wire created:', wireData);
|
||
// 连线已在DiagramCanvas.vue中完成约束处理
|
||
}
|
||
|
||
// 处理连线删除事件
|
||
function handleWireDeleted(wireId: string) {
|
||
console.log('Wire deleted:', wireId);
|
||
// 可以在这里添加连线删除的相关逻辑
|
||
}
|
||
|
||
// --- 生命周期钩子 ---
|
||
onMounted(() => {
|
||
// 初始化画布设置
|
||
console.log('ProjectView mounted, diagram canvas ref:', diagramCanvas.value);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
document.removeEventListener('mousemove', onResize);
|
||
document.removeEventListener('mouseup', stopResize);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="postcss">
|
||
/* 样式保持不变 */
|
||
@import "../assets/main.css";
|
||
|
||
/* 分割线样式 */
|
||
.resizer {
|
||
width: 6px;
|
||
height: 100%;
|
||
background-color: var(--b3);
|
||
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);
|
||
}
|
||
}
|
||
</style>
|