refactor: merge
This commit is contained in:
commit
2a766c3f6b
|
|
@ -0,0 +1,56 @@
|
|||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
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/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/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/LabCanvasNew/LabCanvas.vue')['default']
|
||||
LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.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']
|
||||
MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']
|
||||
MotherBoard: typeof import('./src/components/equipments/MotherBoard.vue')['default']
|
||||
MotherBoardCaps: typeof import('./src/components/equipments/MotherBoardCaps.vue')['default']
|
||||
Navbar: typeof import('./src/components/Navbar.vue')['default']
|
||||
PG2L100H_FBG676: typeof import('./src/components/equipments/PG2L100H_FBG676.vue')['default']
|
||||
Pin: typeof import('./src/components/equipments/Pin.vue')['default']
|
||||
PopButton: typeof import('./src/components/PopButton.vue')['default']
|
||||
PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
|
||||
PropertyPanel: typeof import('./src/components/PropertyPanel.vue')['default']
|
||||
RekaSplitterGroup: typeof import('reka-ui')['SplitterGroup']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SD: typeof import('./src/components/equipments/SD.vue')['default']
|
||||
SevenSegmentDisplay: typeof import('./src/components/equipments/SevenSegmentDisplay.vue')['default']
|
||||
SFP: typeof import('./src/components/equipments/SFP.vue')['default']
|
||||
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']
|
||||
TutorialCarousel: typeof import('./src/components/TutorialCarousel.vue')['default']
|
||||
UploadCard: typeof import('./src/components/UploadCard.vue')['default']
|
||||
Wire: typeof import('./src/components/equipments/Wire.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: winter --default, night --prefersdark;
|
||||
}
|
||||
|
||||
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
|
||||
@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
|
||||
|
||||
|
||||
|
|
@ -1,11 +1,4 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: winter --default, night --prefersdark;
|
||||
}
|
||||
|
||||
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
|
||||
@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
|
||||
@import "base.css";
|
||||
|
||||
/* 禁止所有图像和SVG选择 */
|
||||
img, svg {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
|
|||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||
const module = await import(`../components/equipments/${type}.vue`);
|
||||
const module = await import(`@/components/equipments/${type}.vue`);
|
||||
|
||||
// 将模块添加到缓存中
|
||||
componentModules.value = {
|
||||
|
|
@ -83,14 +83,15 @@
|
|||
}
|
||||
">
|
||||
<!-- 动态渲染组件 -->
|
||||
<component :is="getComponentDefinition(component.type)" v-if="props.componentModules[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
|
||||
|
|
@ -98,6 +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">{{ componentManager.componentModules.value[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -136,7 +138,8 @@ import {
|
|||
watch,
|
||||
provide,
|
||||
} from "vue";
|
||||
import WireComponent from "./equipments/Wire.vue";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import WireComponent from "@/components/equipments/Wire.vue";
|
||||
|
||||
// 导入 diagram 管理器
|
||||
import {
|
||||
|
|
@ -149,16 +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 { CanvasCurrentSelectedComponentID } from "../InjectKeys";
|
||||
import { useComponentManager } from "./composable/componentManager";
|
||||
|
||||
// 右键菜单处理函数
|
||||
function handleContextMenu(e: MouseEvent) {
|
||||
|
|
@ -168,22 +172,23 @@ function handleContextMenu(e: MouseEvent) {
|
|||
// 定义组件发出的事件
|
||||
const emit = defineEmits([
|
||||
"diagram-updated",
|
||||
"component-selected",
|
||||
"component-moved",
|
||||
"component-delete",
|
||||
"toggle-doc-panel",
|
||||
"wire-created",
|
||||
"wire-deleted",
|
||||
"load-component-module",
|
||||
"open-components",
|
||||
]);
|
||||
|
||||
// 定义组件接受的属性
|
||||
const props = defineProps<{
|
||||
componentModules: Record<string, any>;
|
||||
showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
|
||||
}>();
|
||||
|
||||
// 获取componentManager实例
|
||||
const componentManager = useComponentManager();
|
||||
if (!componentManager) {
|
||||
throw new Error("DiagramCanvas must be used within a component manager provider");
|
||||
}
|
||||
|
||||
// --- 画布状态 ---
|
||||
const canvasContainer = ref<HTMLElement | null>(null);
|
||||
const canvas = ref<HTMLElement | null>(null);
|
||||
|
|
@ -209,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[]>(() => {
|
||||
|
|
@ -254,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);
|
||||
|
|
@ -280,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);
|
||||
|
|
@ -325,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;
|
||||
|
|
@ -362,73 +398,16 @@ function onZoom(e: WheelEvent) {
|
|||
scale.value = newScale;
|
||||
}
|
||||
|
||||
// --- 动态组件渲染 ---
|
||||
const getComponentDefinition = (type: string) => {
|
||||
const module = props.componentModules[type];
|
||||
if (!module) 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 {
|
||||
// 通知父组件需要加载此类型的组件
|
||||
emit("load-component-module", type);
|
||||
} catch (error) {
|
||||
console.error(`Failed to request component module ${type}:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- 画布交互逻辑 ---
|
||||
function handleCanvasMouseDown(e: MouseEvent) {
|
||||
// 如果是直接点击画布（而不是元器件），清除选中状态
|
||||
if (e.target === canvasContainer.value || e.target === canvas.value) {
|
||||
if (selectedComponentId.value !== null) {
|
||||
selectedComponentId.value = null;
|
||||
emit("component-selected", null);
|
||||
// 直接通过componentManager选择组件
|
||||
if (componentManager) {
|
||||
componentManager.selectComponent(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -450,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();
|
||||
}
|
||||
|
||||
|
|
@ -466,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();
|
||||
}
|
||||
|
||||
|
|
@ -483,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;
|
||||
}
|
||||
|
||||
// --- 组件拖拽交互 ---
|
||||
|
|
@ -505,7 +480,10 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
|
|||
// 仍然选中组件，无论是否为交互元素
|
||||
if (selectedComponentId.value !== component.id) {
|
||||
selectedComponentId.value = component.id;
|
||||
emit("component-selected", component);
|
||||
// 直接通过componentManager选择组件
|
||||
if (componentManager) {
|
||||
componentManager.selectComponent(component);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果组件锁定位置或是交互元素，则不启动拖拽
|
||||
|
|
@ -537,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;
|
||||
}
|
||||
|
||||
// 拖拽组件过程
|
||||
|
|
@ -568,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;
|
||||
|
|
@ -600,12 +569,14 @@ function onComponentDrag(e: MouseEvent) {
|
|||
}
|
||||
}
|
||||
|
||||
// 通知父组件位置已更新
|
||||
emit("component-moved", {
|
||||
// 通知componentManager位置已更新
|
||||
if (componentManager) {
|
||||
componentManager.moveComponent({
|
||||
id: draggingComponentId.value,
|
||||
x: Math.round(newX),
|
||||
y: Math.round(newY),
|
||||
});
|
||||
}
|
||||
|
||||
// 通知图表已更新
|
||||
emit("diagram-updated", diagramData.value);
|
||||
|
|
@ -624,8 +595,7 @@ function stopComponentDrag() {
|
|||
draggingComponentId.value = null;
|
||||
}
|
||||
|
||||
document.removeEventListener("mousemove", onComponentDrag);
|
||||
document.removeEventListener("mouseup", stopComponentDrag);
|
||||
isComponentDragEventActive.value = false;
|
||||
}
|
||||
|
||||
// 更新组件属性
|
||||
|
|
@ -634,6 +604,11 @@ function updateComponentProp(
|
|||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
// 直接通过componentManager更新组件属性
|
||||
if (componentManager) {
|
||||
componentManager.updateComponentProp(componentId, propName, value);
|
||||
} else {
|
||||
// 后备方案：直接更新数据
|
||||
diagramData.value = updatePartAttribute(
|
||||
diagramData.value,
|
||||
componentId,
|
||||
|
|
@ -643,6 +618,7 @@ function updateComponentProp(
|
|||
emit("diagram-updated", diagramData.value);
|
||||
saveDiagramData(diagramData.value);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 连线操作 ---
|
||||
// 更新鼠标位置
|
||||
|
|
@ -671,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);
|
||||
|
|
@ -681,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);
|
||||
|
||||
// 查找组件部件对象以获取组件位置
|
||||
|
|
@ -742,7 +716,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
|||
pinId,
|
||||
pinInfo.constraint,
|
||||
);
|
||||
document.addEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = true;
|
||||
} else {
|
||||
// 完成连线创建
|
||||
if (
|
||||
|
|
@ -757,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);
|
||||
|
|
@ -819,7 +793,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
|||
|
||||
// 重置连线创建状态
|
||||
resetWireCreation();
|
||||
document.removeEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -852,7 +826,7 @@ function resetWireCreation() {
|
|||
// 取消连线创建
|
||||
function cancelWireCreation() {
|
||||
resetWireCreation();
|
||||
document.removeEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = false;
|
||||
}
|
||||
|
||||
// 连线创建过程中的鼠标移动
|
||||
|
|
@ -871,7 +845,10 @@ function deleteWire(wireIndex: number) {
|
|||
// 删除组件
|
||||
function deleteComponent(componentId: string) {
|
||||
diagramData.value = deletePart(diagramData.value, componentId);
|
||||
emit("component-delete", componentId);
|
||||
// 直接通过componentManager删除组件
|
||||
if (componentManager) {
|
||||
componentManager.deleteComponent(componentId);
|
||||
}
|
||||
emit("diagram-updated", diagramData.value);
|
||||
saveDiagramData(diagramData.value);
|
||||
|
||||
|
|
@ -1021,8 +998,23 @@ function showToast(
|
|||
|
||||
// --- 生命周期钩子 ---
|
||||
onMounted(async () => {
|
||||
// 重置组件引用
|
||||
resetComponentRefs();
|
||||
// 设置componentManager的画布引用
|
||||
if (componentManager) {
|
||||
// 创建一个包含必要方法的画布API对象
|
||||
const canvasAPI = {
|
||||
getDiagramData: () => diagramData.value,
|
||||
updateDiagramDataDirectly: (data: DiagramData) => {
|
||||
diagramData.value = data;
|
||||
saveDiagramData(data);
|
||||
emit("diagram-updated", data);
|
||||
},
|
||||
getCanvasPosition: () => ({ x: position.x, y: position.y }),
|
||||
getScale: () => scale.value,
|
||||
$el: canvasContainer.value,
|
||||
showToast
|
||||
};
|
||||
componentManager.setCanvasRef(canvasAPI);
|
||||
}
|
||||
|
||||
// 加载图表数据
|
||||
try {
|
||||
|
|
@ -1039,12 +1031,10 @@ onMounted(async () => {
|
|||
Array.from(componentTypes),
|
||||
);
|
||||
|
||||
// 通知父组件需要加载组件模块
|
||||
componentTypes.forEach((type) => {
|
||||
if (!props.componentModules[type]) {
|
||||
emit("load-component-module", type);
|
||||
// 直接通过componentManager预加载组件模块
|
||||
if (componentManager) {
|
||||
await componentManager.preloadComponentModules(Array.from(componentTypes));
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("加载图表数据失败:", error);
|
||||
}
|
||||
|
|
@ -1054,9 +1044,6 @@ onMounted(async () => {
|
|||
position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
|
||||
position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
|
||||
}
|
||||
|
||||
// 添加键盘事件监听器
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
|
||||
// 处理键盘事件
|
||||
|
|
@ -1075,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) {
|
||||
// 检查组件是否仍然挂载
|
||||
|
|
@ -1115,7 +1085,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
|
|||
emit("diagram-updated", data);
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
// 暴露方法给父组件 - 简化版本，主要用于数据访问
|
||||
defineExpose({
|
||||
// 基本数据操作
|
||||
getDiagramData: () => diagramData.value,
|
||||
|
|
@ -1154,23 +1124,6 @@ defineExpose({
|
|||
});
|
||||
},
|
||||
|
||||
// 文件操作
|
||||
openDiagramFileSelector,
|
||||
exportDiagram,
|
||||
|
||||
// 组件操作
|
||||
getSelectedComponent: () => {
|
||||
if (!selectedComponentId.value) return null;
|
||||
return (
|
||||
diagramParts.value.find((p) => p.id === selectedComponentId.value) || null
|
||||
);
|
||||
},
|
||||
deleteSelectedComponent: () => {
|
||||
if (selectedComponentId.value) {
|
||||
deleteComponent(selectedComponentId.value);
|
||||
}
|
||||
},
|
||||
|
||||
// 画布状态
|
||||
getCanvasPosition: () => ({ x: position.x, y: position.y }),
|
||||
getScale: () => scale.value,
|
||||
|
|
@ -1187,15 +1140,6 @@ watch(
|
|||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 当组件模块加载完成后，确保组件引用正确建立
|
||||
watch(
|
||||
() => props.componentModules,
|
||||
() => {
|
||||
// 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -0,0 +1,646 @@
|
|||
import { ref, shallowRef, computed } from "vue";
|
||||
import { createInjectionState } from "@vueuse/core";
|
||||
import type { DiagramData, DiagramPart } from "./diagramManager";
|
||||
import type { PropertyConfig } from "@/components/equipments/componentConfig";
|
||||
import {
|
||||
generatePropertyConfigs,
|
||||
generatePropsFromDefault,
|
||||
generatePropsFromAttrs,
|
||||
} from "@/components/equipments/componentConfig";
|
||||
|
||||
// 存储动态导入的组件模块
|
||||
interface ComponentModule {
|
||||
default: any;
|
||||
getDefaultProps?: () => Record<string, any>;
|
||||
config?: {
|
||||
props?: Array<PropertyConfig>;
|
||||
};
|
||||
__esModule?: boolean; // 添加 __esModule 属性
|
||||
}
|
||||
|
||||
// 定义组件管理器的状态和方法
|
||||
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<any>(null);
|
||||
const componentRefs = ref<Record<string, any>>({});
|
||||
|
||||
// 计算当前选中的组件数据
|
||||
const selectedComponentData = computed(() => {
|
||||
if (!diagramCanvas.value || !selectedComponentId.value) return null;
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance && canvasInstance.getDiagramData) {
|
||||
const data = canvasInstance.getDiagramData();
|
||||
return data.parts.find((p: DiagramPart) => p.id === selectedComponentId.value) || null;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
// --- 组件模块管理 ---
|
||||
|
||||
/**
|
||||
* 动态加载组件模块
|
||||
*/
|
||||
async function loadComponentModule(type: string) {
|
||||
console.log(`尝试加载组件模块: ${type}`);
|
||||
console.log(`当前已加载的模块:`, Object.keys(componentModules.value));
|
||||
|
||||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
console.log(`正在动态导入模块: @/components/equipments/${type}.vue`);
|
||||
const module = await import(`@/components/equipments/${type}.vue`);
|
||||
console.log(`成功导入模块 ${type}:`, module);
|
||||
|
||||
// 直接设置新的对象引用以触发响应性
|
||||
componentModules.value = {
|
||||
...componentModules.value,
|
||||
[type]: module,
|
||||
};
|
||||
console.log(`模块 ${type} 已添加到 componentModules`);
|
||||
console.log(`更新后的模块列表:`, Object.keys(componentModules.value));
|
||||
} catch (error) {
|
||||
console.error(`Failed to load component module ${type}:`, error);
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
console.log(`模块 ${type} 已经存在`);
|
||||
}
|
||||
return componentModules.value[type];
|
||||
}
|
||||
|
||||
/**
|
||||
* 预加载所有组件模块
|
||||
*/
|
||||
async function preloadComponentModules(componentTypes: string[]) {
|
||||
console.log("Preloading component modules:", componentTypes);
|
||||
await Promise.all(
|
||||
componentTypes.map((type) => loadComponentModule(type))
|
||||
);
|
||||
console.log("All component modules loaded");
|
||||
}
|
||||
|
||||
// --- 组件操作 ---
|
||||
|
||||
/**
|
||||
* 添加新组件到画布
|
||||
*/
|
||||
async function addComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
console.log("=== 开始添加组件 ===");
|
||||
console.log("组件数据:", componentData);
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance) {
|
||||
console.error("没有可用的画布实例");
|
||||
return;
|
||||
}
|
||||
|
||||
// 预加载组件模块，确保组件能正常渲染
|
||||
console.log(`预加载组件模块: ${componentData.type}`);
|
||||
const componentModule = await loadComponentModule(componentData.type);
|
||||
if (!componentModule) {
|
||||
console.error(`无法加载组件模块: ${componentData.type}`);
|
||||
return;
|
||||
}
|
||||
console.log(`组件模块加载成功: ${componentData.type}`, componentModule);
|
||||
|
||||
// 获取画布位置信息
|
||||
let position = { x: 100, y: 100 };
|
||||
let scale = 1;
|
||||
|
||||
try {
|
||||
if (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);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新组件
|
||||
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,
|
||||
};
|
||||
|
||||
// 通过画布实例添加组件
|
||||
if (canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
currentData.parts.push(newComponent);
|
||||
|
||||
// 使用 updateDiagramDataDirectly 避免触发加载状态
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
|
||||
console.log("组件添加完成:", newComponent);
|
||||
|
||||
// 等待Vue的下一个tick，确保组件模块已经更新
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加模板到画布
|
||||
*/
|
||||
async function addTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
console.log("添加模板:", templateData);
|
||||
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例添加模板");
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
console.log("=== 当前图表组件数量:", currentData.parts.length);
|
||||
|
||||
// 生成唯一ID前缀
|
||||
const idPrefix = `template-${Date.now()}-`;
|
||||
|
||||
if (templateData.template?.parts) {
|
||||
// 获取视口中心位置
|
||||
let viewportCenter = { x: 300, y: 200 };
|
||||
try {
|
||||
if (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;
|
||||
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
|
||||
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取视口中心位置时出错:", error);
|
||||
}
|
||||
|
||||
const mainPart = templateData.template.parts[0];
|
||||
|
||||
// 创建新组件
|
||||
const newParts = await Promise.all(
|
||||
templateData.template.parts.map(async (part: any) => {
|
||||
const newPart = JSON.parse(JSON.stringify(part));
|
||||
newPart.id = `${idPrefix}${part.id}`;
|
||||
|
||||
// 加载组件模块并获取能力页面
|
||||
try {
|
||||
const componentModule = await loadComponentModule(part.type);
|
||||
if (
|
||||
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 relativeX = part.x - mainPart.x;
|
||||
const relativeY = part.y - mainPart.y;
|
||||
newPart.x = viewportCenter.x + relativeX;
|
||||
newPart.y = viewportCenter.y + relativeY;
|
||||
}
|
||||
|
||||
return newPart;
|
||||
})
|
||||
);
|
||||
|
||||
currentData.parts.push(...newParts);
|
||||
|
||||
// 处理连接关系
|
||||
if (templateData.template.connections) {
|
||||
const idMap: Record<string, string> = {};
|
||||
templateData.template.parts.forEach((part: any) => {
|
||||
idMap[part.id] = `${idPrefix}${part.id}`;
|
||||
});
|
||||
|
||||
const newConnections = templateData.template.connections.map((conn: any) => {
|
||||
if (Array.isArray(conn)) {
|
||||
const [from, to, type, path] = conn;
|
||||
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];
|
||||
|
||||
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);
|
||||
|
||||
return { success: true, message: `已添加 ${templateData.name} 模板` };
|
||||
} else {
|
||||
console.error("模板格式错误，缺少parts数组");
|
||||
return { success: false, message: "模板格式错误" };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除组件
|
||||
*/
|
||||
function deleteComponent(componentId: string) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const component = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (!component) return;
|
||||
|
||||
const componentsToDelete: string[] = [componentId];
|
||||
|
||||
// 处理组件组
|
||||
if (component.group && component.group !== "") {
|
||||
const groupMembers = currentData.parts.filter(
|
||||
(p: DiagramPart) => p.group === component.group && p.id !== componentId
|
||||
);
|
||||
componentsToDelete.push(...groupMembers.map((p: DiagramPart) => p.id));
|
||||
console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
|
||||
}
|
||||
|
||||
// 删除组件
|
||||
currentData.parts = currentData.parts.filter(
|
||||
(p: DiagramPart) => !componentsToDelete.includes(p.id)
|
||||
);
|
||||
|
||||
// 删除相关连接
|
||||
currentData.connections = currentData.connections.filter((connection: any) => {
|
||||
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;
|
||||
}
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中组件
|
||||
*/
|
||||
async function selectComponent(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>();
|
||||
|
||||
// 从 getDefaultProps 方法获取默认配置
|
||||
if (typeof moduleRef.getDefaultProps === "function") {
|
||||
const defaultProps = moduleRef.getDefaultProps();
|
||||
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
|
||||
defaultPropConfigs.forEach((config) => {
|
||||
propConfigs.push(config);
|
||||
addedProps.add(config.name);
|
||||
});
|
||||
}
|
||||
|
||||
// 添加组件直接属性
|
||||
const directPropConfigs = generatePropertyConfigs(componentData);
|
||||
const newDirectProps = directPropConfigs.filter(
|
||||
(config) => !addedProps.has(config.name)
|
||||
);
|
||||
propConfigs.push(...newDirectProps);
|
||||
|
||||
// 添加 attrs 中的属性
|
||||
if (componentData.attrs) {
|
||||
const attrPropConfigs = generatePropsFromAttrs(componentData.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 updateComponentProp(componentId: string, propName: string, value: any) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查值格式
|
||||
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 {
|
||||
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?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (part) {
|
||||
(part as any)[propName] = value;
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动组件
|
||||
*/
|
||||
function moveComponent(moveData: { id: string; x: number; y: number }) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === moveData.id);
|
||||
if (part) {
|
||||
part.x = moveData.x;
|
||||
part.y = moveData.y;
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置画布实例引用
|
||||
*/
|
||||
function setCanvasRef(canvasRef: any) {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化组件管理器
|
||||
*/
|
||||
async function initialize() {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance?.getDiagramData) {
|
||||
const diagramData = canvasInstance.getDiagramData();
|
||||
|
||||
// 收集所有组件类型
|
||||
const componentTypes = new Set<string>();
|
||||
diagramData.parts.forEach((part: DiagramPart) => {
|
||||
componentTypes.add(part.type);
|
||||
});
|
||||
|
||||
// 预加载组件模块
|
||||
await preloadComponentModules(Array.from(componentTypes));
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
componentModules,
|
||||
selectedComponentId,
|
||||
selectedComponentData,
|
||||
selectedComponentConfig,
|
||||
componentRefs,
|
||||
|
||||
// 方法
|
||||
loadComponentModule,
|
||||
preloadComponentModules,
|
||||
addComponent,
|
||||
addTemplate,
|
||||
deleteComponent,
|
||||
selectComponent,
|
||||
updateComponentProp,
|
||||
updateComponentDirectProp,
|
||||
moveComponent,
|
||||
setCanvasRef,
|
||||
setComponentRef,
|
||||
getComponentRef,
|
||||
getDiagramData,
|
||||
updateDiagramData,
|
||||
getCanvasInfo,
|
||||
showToast,
|
||||
getComponentDefinition,
|
||||
prepareComponentProps,
|
||||
initialize,
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
export { useProvideComponentManager, useComponentManager };
|
||||
|
|
@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
|
|||
mousePosition.y = y;
|
||||
}
|
||||
|
||||
// 其它Wire相关操作可继续扩展...
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// 导出组件管理器服务
|
||||
export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
|
||||
|
||||
// 导出图表管理器
|
||||
export type { DiagramData, DiagramPart } from './composable/diagramManager';
|
||||
|
||||
// 导出连线管理器
|
||||
export type { WireItem } from './composable/wireManager';
|
||||
|
|
@ -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/composable/diagramManager";
|
||||
import {
|
||||
type PropertyConfig,
|
||||
getPropValue,
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
// 导入所需的类型和组件
|
||||
import { type DiagramPart } from "@/components/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"; // 属性编辑器组件
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// componentConfig.ts 提供通用的组件配置功能
|
||||
import type { DiagramPart } from '../diagramManager';
|
||||
import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
|
||||
|
||||
// 属性配置接口
|
||||
export interface PropertyConfig {
|
||||
|
|
|
|||
|
|
@ -2,13 +2,10 @@ import './assets/main.css'
|
|||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import VueKonva from "vue-konva"
|
||||
|
||||
import App from '@/App.vue'
|
||||
import router from './router'
|
||||
// import { Client } from './APIClient'
|
||||
|
||||
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
||||
|
||||
// 初始化约束通信
|
||||
// initConstraintCommunication();
|
||||
const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { ref, reactive, watchPostEffect } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { isString, toNumber } from 'lodash';
|
||||
import { Common } from '@/Common';
|
||||
import { Common } from '@/utils/Common';
|
||||
import z from "zod"
|
||||
import { isNumber } from 'mathjs';
|
||||
import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { type FileParameter } from "./APIClient";
|
||||
import { type FileParameter } from "@/APIClient";
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
|
||||
export namespace Common {
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import Konva from "konva";
|
||||
import type { VueElement } from "vue";
|
||||
|
||||
interface VNode extends VueElement {
|
||||
getNode(): Konva.Node
|
||||
}
|
||||
|
||||
interface VLayer extends VueElement {
|
||||
getNode(): Konva.Layer
|
||||
}
|
||||
|
||||
interface VGroup extends VueElement {
|
||||
getNode(): Konva.Group
|
||||
}
|
||||
|
||||
interface VStage extends VueElement {
|
||||
getNode(): Konva.Stage
|
||||
}
|
||||
|
||||
interface VTransformer extends VueElement {
|
||||
getNode(): Konva.Transformer
|
||||
}
|
||||
|
||||
export type {
|
||||
VNode,
|
||||
VLayer,
|
||||
VGroup,
|
||||
VStage,
|
||||
VTransformer,
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@ import { isNull, isUndefined } from "lodash";
|
|||
import { ref } from "vue";
|
||||
import { RemoteUpdateClient } from "@/APIClient";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { Common } from "@/Common";
|
||||
import { Common } from "@/utils/Common";
|
||||
|
||||
const dialog = useDialogStore();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
<template>
|
||||
<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">
|
||||
<!-- 左侧图形化区域 -->
|
||||
<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"
|
||||
<SplitterPanel
|
||||
id="splitter-group-panel-canvas"
|
||||
:default-size="60"
|
||||
:min-size="30"
|
||||
class="relative bg-base-200 overflow-hidden h-full"
|
||||
>
|
||||
<DiagramCanvas ref="diagramCanvas" :showDocPanel="showDocPanel"
|
||||
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
|
||||
@load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
|
||||
</div>
|
||||
|
||||
@toggle-doc-panel="toggleDocPanel" />
|
||||
</SplitterPanel>
|
||||
<!-- 拖拽分割线 -->
|
||||
<div
|
||||
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
|
||||
@mousedown="startResize"></div>
|
||||
<SplitterResizeHandle id="splitter-group-resize-handle" class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors" />
|
||||
<!-- 右侧编辑区域 -->
|
||||
<div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
|
||||
<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"
|
||||
<PropertyPanel v-show="!showDocPanel" :componentData="componentManager.selectedComponentData.value"
|
||||
:componentConfig="componentManager.selectedComponentConfig.value" @updateProp="updateComponentProp"
|
||||
@updateDirectProp="updateComponentDirectProp" />
|
||||
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
|
||||
<MarkdownRenderer :content="documentContent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SplitterPanel>
|
||||
</SplitterGroup>
|
||||
</div>
|
||||
<!-- 元器件选择组件 -->
|
||||
<ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
|
||||
|
|
@ -34,29 +40,26 @@
|
|||
</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 { ref, onMounted, watch } from "vue";
|
||||
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
|
||||
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/diagramManager";
|
||||
import {
|
||||
type PropertyConfig,
|
||||
generatePropertyConfigs,
|
||||
generatePropsFromDefault,
|
||||
generatePropsFromAttrs,
|
||||
} from "@/components/equipments/componentConfig"; // 引入组件配置工具
|
||||
|
||||
// --- 文档面板控制 ---
|
||||
const showDocPanel = ref(false);
|
||||
const documentContent = ref("");
|
||||
import { useProvideComponentManager } from "@/components/LabCanvas";
|
||||
import type { DiagramData, DiagramPart } from "@/components/LabCanvas";
|
||||
|
||||
// 获取路由参数
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
|
||||
// 提供组件管理服务
|
||||
const componentManager = useProvideComponentManager();
|
||||
|
||||
// --- 文档面板控制 ---
|
||||
const showDocPanel = ref(false);
|
||||
const documentContent = ref("");
|
||||
|
||||
// 切换文档面板和属性面板
|
||||
async function toggleDocPanel() {
|
||||
showDocPanel.value = !showDocPanel.value;
|
||||
|
|
@ -99,610 +102,11 @@ async function loadDocumentContent() {
|
|||
}
|
||||
}
|
||||
|
||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||
onMounted(async () => {
|
||||
if (route.query.tutorial) {
|
||||
showDocPanel.value = true;
|
||||
await loadDocumentContent();
|
||||
}
|
||||
});
|
||||
|
||||
// --- 元器件管理 ---
|
||||
// --- UI 状态管理 ---
|
||||
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;
|
||||
}
|
||||
|
||||
// 处理组件移动事件
|
||||
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");
|
||||
|
|
@ -727,41 +131,68 @@ function showToast(
|
|||
}, duration);
|
||||
}
|
||||
}
|
||||
// 显示通知
|
||||
|
||||
// --- 组件属性处理辅助函数 ---
|
||||
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
|
||||
// --- 事件处理器（委托给组件管理器） ---
|
||||
|
||||
function openComponentsMenu() {
|
||||
showComponentsMenu.value = true;
|
||||
}
|
||||
|
||||
// 处理 ComponentSelector 组件添加元器件事件
|
||||
async function handleAddComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
await componentManager.addComponent(componentData);
|
||||
}
|
||||
|
||||
// 处理模板添加事件
|
||||
async function handleAddTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
const result = await componentManager.addTemplate(templateData);
|
||||
if (result) {
|
||||
showToast(result.message, result.success ? "success" : "error");
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图表数据更新事件
|
||||
function handleDiagramUpdated(data: DiagramData) {
|
||||
console.log("Diagram data updated:", data);
|
||||
}
|
||||
|
||||
// 更新组件属性的方法 - 委托给componentManager
|
||||
function updateComponentProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// 更新组件的直接属性 - 委托给componentManager
|
||||
function updateComponentDirectProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentDirectProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// --- 生命周期钩子 ---
|
||||
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");
|
||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||
if (route.query.tutorial) {
|
||||
showDocPanel.value = true;
|
||||
await loadDocumentContent();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("mousemove", onResize);
|
||||
document.removeEventListener("mouseup", stopResize);
|
||||
// 设置画布引用并初始化组件管理器
|
||||
componentManager.setCanvasRef(diagramCanvas.value);
|
||||
await componentManager.initialize();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -769,26 +200,6 @@ onUnmounted(() => {
|
|||
/* 样式保持不变 */
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,99 +1,5 @@
|
|||
<template>
|
||||
<div class="flex w-screen h-screen justify-center">
|
||||
<div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
|
||||
<div class="flex justify-center">
|
||||
<h1 class="font-bold text-3xl">Jtag 下载</h1>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="w-full">
|
||||
<div class="collapse bg-primary">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title font-semibold text-lg text-white">
|
||||
自定义开发板参数
|
||||
</div>
|
||||
<div class="collapse-content bg-primary-content text-sm">
|
||||
<div class="form-control w-full my-3">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-700">开发板IP地址</span>
|
||||
</label>
|
||||
<label class="input w-full">
|
||||
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
|
||||
<input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control w-full my-3">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-700">开发板端口号</span>
|
||||
</label>
|
||||
<label class="input w-full">
|
||||
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
|
||||
<input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
|
||||
</UploadCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { JtagClient, type FileParameter } from "@/APIClient";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { Common } from "@/Common";
|
||||
import { toNumber, isUndefined } from "lodash";
|
||||
import { ref } from "vue";
|
||||
|
||||
const jtagController = new JtagClient();
|
||||
const dialog = useDialogStore();
|
||||
|
||||
// Models with default values
|
||||
const boardAddress = ref("127.0.0.1"); // 默认IP地址
|
||||
const boardPort = ref("1234"); // 默认端口号
|
||||
|
||||
async function uploadBitstream(bitstream: File): Promise<boolean> {
|
||||
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.uploadBitstream(
|
||||
boardAddress.value,
|
||||
Common.toFileParameterOrNull(bitstream),
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadBitstream(): Promise<boolean> {
|
||||
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.downloadBitstream(
|
||||
boardAddress.value,
|
||||
toNumber(boardPort.value),
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
@import "../assets/main.css";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
|
|||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import tailwindcss from '@tailwindcss/postcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import RekaResolver from 'reka-ui/resolver'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
|
|
@ -20,6 +22,18 @@ export default defineConfig({
|
|||
}),
|
||||
vueJsx(),
|
||||
vueDevTools(),
|
||||
Components(
|
||||
{
|
||||
dts: true,
|
||||
resolvers: [
|
||||
RekaResolver()
|
||||
|
||||
// RekaResolver({
|
||||
// prefix: '' // use the prefix option to add Prefix to the imported components
|
||||
// })
|
||||
],
|
||||
}
|
||||
)
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue