feat: 画布解耦合

This commit is contained in:
2025-07-12 21:55:58 +08:00
parent 15c6eefe30
commit eebc5105a0
5 changed files with 320 additions and 348 deletions

View File

@@ -10,71 +10,19 @@
<!-- 工具栏 -->
<div class="absolute top-2 right-2 flex gap-2 z-30">
<button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
/>
</svg>
<FolderOpen class="h-4 w-4 mr-1" />
导入
</button>
<button class="btn btn-sm btn-primary" @click="exportDiagram">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
<Download class="h-4 w-4 mr-1" />
导出
</button>
<button class="btn btn-sm btn-primary" @click="emit('open-components')">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
</svg>
<Plus class="h-4 w-4 mr-1" />
添加组件
</button>
<button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 mr-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
<FileText class="h-4 w-4 mr-1" />
{{ props.showDocPanel ? "属性面板" : "文档" }}
</button>
</div>
@@ -235,6 +183,7 @@ import {
provide,
} from "vue";
import { useEventListener } from "@vueuse/core";
import { FolderOpen, Download, Plus, FileText } from "lucide-vue-next";
import WireComponent from "@/components/equipments/Wire.vue";
import { useAlertStore } from "@/components/Alert";