first commit

2026-03-23 20:23:58 +08:00
commit 74d612aca1
3193 changed files with 692056 additions and 0 deletions
--- a/frontend/src/module/editor/view/workspace.vue
+++ b/frontend/src/module/editor/view/workspace.vue
@@ -0,0 +1,140 @@
+<template>
+  <section class="fullscreen-editor">
+    <EditorTopToolbar
+      :device-mode="deviceMode"
+      :selected-selector="selectedSelector"
+      :selected-hidden="selectedElementMeta.hidden"
+      :insert-block-type="insertBlockType"
+      :insert-block-type-options="insertBlockTypeOptions"
+      :can-undo="canUndo"
+      :can-redo="canRedo"
+      @set-device-mode="setDeviceMode"
+      @toggle-visibility="toggleSelectedBlockVisibility"
+      @update:insert-block-type="insertBlockType = $event"
+      @insert-before="insertBlockNearSelection('before')"
+      @insert-after="insertBlockNearSelection('after')"
+      @duplicate="duplicateSelectedBlock"
+      @delete="deleteSelectedBlock"
+      @undo="undoHistory"
+      @redo="redoHistory"
+      @back="goBack"
+      @load-demo="loadDemoPage"
+    />
+
+    <el-alert
+      v-if="errorMessage"
+      type="error"
+      :closable="false"
+      :title="errorMessage"
+      show-icon
+    />
+
+    <section class="fullscreen-editor__stage">
+      <div class="fullscreen-editor__canvas-shell">
+        <EditorCanvasFrame
+          :base-url="baseUrl"
+          :device-mode="deviceMode"
+          :candidates="canvasCandidates"
+          :selected-selector="selectedSelector"
+          :preview-status="selectedPreviewSummary"
+          :preview-operations="previewOperations"
+          :feedback-summary="canvasFeedbackSummary"
+          :bridge-command="canvasBridgeCommand"
+          @select-candidate="selectCanvasCandidate"
+          @hover-candidate="handleCanvasHover"
+          @hover-clear="keepCurrentSelection"
+          @hotspot-action="handleCanvasHotspotAction"
+          @inline-attribute-change="handleInlineAttributeChange"
+          @inline-style-change="handleInlineStyleChange"
+          @inline-text-change="handleInlineTextChange"
+          @canvas-ready="handleCanvasReady"
+          @bridge-outbound="handleCanvasOutbound"
+        />
+      </div>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue"
+import EditorCanvasFrame from "@/module/editor/components/EditorCanvasFrame.vue";
+import EditorTopToolbar from "@/module/editor/components/EditorTopToolbar.vue";
+import { useEditorWorkspacePage } from "@/module/editor/service/use-editor-workspace-page";
+
+const {
+  errorMessage,
+  previewOperations,
+  canvasCandidates,
+  selectedPreviewSummary,
+  canvasFeedbackSummary,
+  selectedSelector,
+  selectedElementMeta,
+  canvasBridgeCommand,
+  baseUrl,
+  deviceMode,
+  setDeviceMode,
+  insertBlockType,
+  insertBlockTypeOptions,
+  toggleSelectedBlockVisibility,
+  insertBlockNearSelection,
+  duplicateSelectedBlock,
+  deleteSelectedBlock,
+  canUndo,
+  canRedo,
+  undoHistory,
+  redoHistory,
+  selectCanvasCandidate,
+  loadDemoPage,
+  handleCanvasReady,
+  handleCanvasHotspotAction,
+  handleInlineAttributeChange,
+  handleInlineStyleChange,
+  handleCanvasHover,
+  handleInlineTextChange,
+  keepCurrentSelection,
+  handleCanvasOutbound,
+  goBack,
+} = useEditorWorkspacePage();
+
+function onKeyDown(e) {
+  const tag = document.activeElement?.tagName?.toLowerCase()
+  if (tag === "input" || tag === "textarea" || tag === "select") return
+  if (document.activeElement?.isContentEditable) return
+
+  const mod = e.ctrlKey || e.metaKey
+  if (!mod) return
+
+  if (e.key === "z" && !e.shiftKey) {
+    e.preventDefault()
+    if (canUndo.value) undoHistory()
+    return
+  }
+  if ((e.key === "y") || (e.key === "z" && e.shiftKey)) {
+    e.preventDefault()
+    if (canRedo.value) redoHistory()
+  }
+}
+
+onMounted(() => window.addEventListener("keydown", onKeyDown))
+onBeforeUnmount(() => window.removeEventListener("keydown", onKeyDown))
+</script>
+
+<style scoped>
+.fullscreen-editor {
+  min-height: 100vh;
+  background: #f6f8fb;
+}
+
+.fullscreen-editor__stage {
+  display: grid;
+  min-height: calc(100vh - 72px);
+}
+
+.fullscreen-editor__canvas-shell :deep(.editor-canvas-frame) {
+  min-height: calc(100vh - 72px);
+  overflow: hidden;
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+}
+</style>