refactor: restore zq admin design baseline

2026-06-22 07:58:57 +08:00
parent 17031cc3c9
commit 0de9c085d5
564 changed files with 154513 additions and 209 deletions
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { TableConfig } from './store/formDesignStore';
+
+import { watch } from 'vue';
+
+import { storeToRefs } from 'pinia';
+
+import AttributePanel from './components/AttributePanel.vue';
+import DesignCanvas from './components/DesignCanvas.vue';
+import MaterialPanel from './components/MaterialPanel.vue';
+import { useFormDesignStore } from './store/formDesignStore';
+
+const LEFT_PANEL_WIDTH = 288;
+const RIGHT_PANEL_WIDTH = 306;
+
+const props = defineProps<{
+  dataSource?: TableConfig[];
+  /** 当前表单编码，用于按钮「生成单据」动作绑定模板 */
+  formCode?: string;
+  /** 表单物理库连接 code（与 FormMeta.db_config 一致） */
+  formDbConfig?: string;
+}>();
+
+const store = useFormDesignStore();
+const { leftPanelCollapsed, rightPanelCollapsed } = storeToRefs(store);
+
+// 监听数据源变化，更新 Store
+watch(
+  () => props.dataSource,
+  (val) => {
+    if (val) {
+      store.setDataSource(val);
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<template>
+  <div
+    class="form-design-container bg-background-deep flex h-full w-full overflow-hidden"
+    :class="
+      leftPanelCollapsed && rightPanelCollapsed ? 'gap-0' : 'gap-3'
+    "
+  >
+    <!-- Left: Material Panel -->
+    <div
+      class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
+      :style="{
+        width: leftPanelCollapsed ? '0px' : `${LEFT_PANEL_WIDTH}px`,
+      }"
+    >
+      <div class="h-full" :style="{ width: `${LEFT_PANEL_WIDTH}px` }">
+        <MaterialPanel />
+      </div>
+    </div>
+
+    <!-- Center: Design Canvas -->
+    <div class="relative h-full min-w-0 flex-1 overflow-hidden">
+      <DesignCanvas />
+    </div>
+
+    <!-- Right: Attribute Panel -->
+    <div
+      class="h-full flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-in-out"
+      :style="{
+        width: rightPanelCollapsed ? '0px' : `${RIGHT_PANEL_WIDTH}px`,
+      }"
+    >
+      <div class="h-full" :style="{ width: `${RIGHT_PANEL_WIDTH}px` }">
+        <AttributePanel :form-code="formCode" :form-db-config="formDbConfig" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.form-design-container {
+  /* Ensure container takes full height relative to its parent */
+  height: 100%;
+}
+</style>