@arronqzy/vue-view 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,12 +23,12 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
-    "@arronqzy/blueprint-dsl": "1.0.5",
-    "@arronqzy/vue-blueprint": "0.1.3",
+    "@arronqzy/blueprint-dsl": "1.0.6",
+    "@arronqzy/rx-store": "1.0.4",
+    "@arronqzy/vue-blueprint": "0.1.4",
     "@arronqzy/view-table": "0.1.3",
-    "@arronqzy/i18n": "0.1.3",
     "@arronqzy/vue-rx-store": "0.1.2",
-    "@arronqzy/rx-store": "1.0.4"
+    "@arronqzy/i18n": "0.1.5"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/panel/VueViewOnlinePreview.vue

@@ -31,6 +31,7 @@ import {
   parsePanelLayers,
   resolvePreviewLayerElements,
 } from "./utils/panelStateIO";
+import { applyPreviewSceneFill, readOutputScale } from "./utils/outputScale";
 
 const { t, locale } = useI18n();
 
@@ -49,6 +50,8 @@ const blueprintLibraryItems = ref<BlueprintLibraryListItem[]>([]);
 const layoutRevision = ref(0);
 const layoutReady = ref(false);
 const sceneRef = ref<HTMLDivElement | null>(null);
+const outputScale = ref(readOutputScale());
+const fillScale = ref({ scaleX: 1, scaleY: 1 });
 
 const layers = computed(() => (panelState.value ? parsePanelLayers(panelState.value) : []));
 const activeLayerId = computed(() =>
@@ -146,24 +149,30 @@ const scopedLayerElements = computed(() => {
 const sceneBounds = computed(() => computePanelSceneBounds(scopedLayerElements.value));
 
 const displayElements = computed(() =>
-  scopedLayerElements.value.map((el) => ({
-    ...el,
-    x: el.x - sceneBounds.value.minX,
-    y: el.y - sceneBounds.value.minY,
-  }))
+  scopedLayerElements.value.map((el) => {
+    const x = el.x - sceneBounds.value.minX;
+    const y = el.y - sceneBounds.value.minY;
+    if (outputScale.value) return { ...el, x, y };
+    return {
+      ...el,
+      x: x * fillScale.value.scaleX,
+      y: y * fillScale.value.scaleY,
+      width: el.width * fillScale.value.scaleX,
+      height: el.height * fillScale.value.scaleY,
+    };
+  })
 );
 
 function applySceneFit() {
-  const scene = sceneRef.value;
-  if (!scene) return;
-  const vw = window.innerWidth || 1;
-  const vh = window.innerHeight || 1;
-  const sw = Math.max(1, sceneBounds.value.width);
-  const sh = Math.max(1, sceneBounds.value.height);
-  const scaleX = vw / sw;
-  const scaleY = vh / sh;
-  if (!Number.isFinite(scaleX) || !Number.isFinite(scaleY)) return;
-  scene.style.transform = `scale(${scaleX}, ${scaleY})`;
+  const enabled = readOutputScale();
+  outputScale.value = enabled;
+  const fill = applyPreviewSceneFill(
+    sceneRef.value,
+    sceneBounds.value.width,
+    sceneBounds.value.height,
+    enabled
+  );
+  fillScale.value = { scaleX: fill.scaleX, scaleY: fill.scaleY };
   layoutRevision.value += 1;
   notifyPreviewLayoutChanged();
 }
@@ -258,9 +267,10 @@ function noopSelect() {}
         id="preview-scene"
         class="relative shrink-0 origin-top-left"
         :style="{
-          width: `${sceneBounds.width}px`,
-          height: `${sceneBounds.height}px`,
+          width: `${outputScale ? sceneBounds.width : sceneBounds.width * fillScale.scaleX}px`,
+          height: `${outputScale ? sceneBounds.height : sceneBounds.height * fillScale.scaleY}px`,
           transformOrigin: 'left top',
+          transform: outputScale ? `scale(${fillScale.scaleX}, ${fillScale.scaleY})` : 'none',
         }"
       >
         <ElementsLayer

package/src/panel/VueViewPanel.vue

@@ -863,6 +863,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
           :on-exclude-selected-node="excludeSelectedNode"
           :on-adjust-node-z-order="adjustNodeZOrder"
           :selected-blueprint-node="selectedBlueprintNode"
+          :blueprint-graph-nodes="blueprintGraph.document.nodes"
+          :blueprint-graph-edges="blueprintGraph.document.edges"
+          :blueprint-trace-entries="blueprintDebugSession.entries.value"
           :allow-false-signal-propagation="blueprintGraph.document.allowFalseSignalPropagation"
           :blueprint-library-options="blueprintLibraryOptions"
           :blueprint-node-options="blueprintNodeOptions"

package/src/panel/components/PanelConfigSidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from "@arronqzy/i18n/vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, provide, ref, watch } from "vue";
 import { Empty, Input } from "ant-design-vue";
 import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../types";
 import { CHART_TYPES } from "../utils/chartOptionBuilder";
@@ -61,8 +61,8 @@ const sidebarScrollRef = ref<HTMLElement | null>(null);
 
 const expandedSections = ref<Record<string, boolean>>({
   nodeInfo: true,
-  styleBackground: true,
-  styleBorder: true,
+  styleBackground: false,
+  styleBorder: false,
   chartBasic: true,
   chartAdvanced: false,
   textConfig: true,
@@ -123,6 +123,7 @@ const scopeWarnings = computed(() => {
 const materialType = computed(() => props.selectedElement?.materialType ?? "");
 
 const forceOpenSections = computed(() => hasSearch.value);
+provide("configHasSearch", hasSearch);
 
 function isSectionExpanded(key: string, defaultValue = true) {
   return expandedSections.value[key] ?? defaultValue;
@@ -259,23 +260,6 @@ watch(
               @update:open="(v) => setSectionExpanded('nodeInfo', v)"
             />
 
-            <PanelConfigStyleSections
-              v-if="
-                shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background']) ||
-                shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])
-              "
-              :element="selectedElement"
-              :is-editable="isNodeEditable"
-              :show-background="shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background'])"
-              :show-border="shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])"
-              :background-open="isSectionExpanded('styleBackground')"
-              :border-open="isSectionExpanded('styleBorder')"
-              :force-open="forceOpenSections"
-              :update-element="updateElement"
-              @update:background-open="(v) => setSectionExpanded('styleBackground', v)"
-              @update:border-open="(v) => setSectionExpanded('styleBorder', v)"
-            />
-
             <PanelConfigChartSection
               v-if="isChartElement && shouldShowSection('chartBasic', t('panel.config.sectionChartBasic'), [t('panel.material.charts'), 'tooltip'])"
               :element="selectedElement"
@@ -381,6 +365,23 @@ watch(
               @update:open="(v) => setSectionExpanded('reference', v)"
             />
 
+            <PanelConfigStyleSections
+              v-if="
+                shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background']) ||
+                shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])
+              "
+              :element="selectedElement"
+              :is-editable="isNodeEditable"
+              :show-background="shouldShowSection('styleBackground', t('panel.config.sectionStyleBackground'), [t('panel.config.backgroundColor'), 'background'])"
+              :show-border="shouldShowSection('styleBorder', t('panel.config.sectionStyleBorder'), [t('panel.config.searchKwBorder'), 'border'])"
+              :background-open="isSectionExpanded('styleBackground')"
+              :border-open="isSectionExpanded('styleBorder')"
+              :force-open="forceOpenSections"
+              :update-element="updateElement"
+              @update:background-open="(v) => setSectionExpanded('styleBackground', v)"
+              @update:border-open="(v) => setSectionExpanded('styleBorder', v)"
+            />
+
             <div
               v-if="!isChartElement && materialType && !['text', 'table', 'audio', 'video', 'image', 'geometry', 'grid', 'reference'].includes(materialType)"
               class="text-xs leading-6 text-gray-500"

package/src/panel/components/WorkspaceConfigSidebar.vue

@@ -5,6 +5,7 @@ import { Empty } from "ant-design-vue";
 import {
   BlueprintExecutionLogPanel,
   BlueprintNodeConfigSidebar,
+  type BlueprintGraphEdge,
   type BlueprintGraphNode,
   type ExecutionLogSettings,
   type ExecutionTraceEntry,
@@ -56,6 +57,9 @@ export type WorkspaceConfigSidebarProps = Omit<
   configFocus: WorkspaceConfigFocus;
   executionLog?: BlueprintExecutionLogViewProps;
   selectedBlueprintNode: BlueprintGraphNode | null;
+  blueprintGraphNodes?: BlueprintGraphNode[];
+  blueprintGraphEdges?: BlueprintGraphEdge[];
+  blueprintTraceEntries?: ExecutionTraceEntry[];
   allowFalseSignalPropagation?: boolean;
   onUpdateAllowFalseSignalPropagation?: (value: boolean) => void;
   onUpdateBlueprintNode: (
@@ -90,6 +94,9 @@ const props = withDefaults(
   {
     allowFalseSignalPropagation: false,
     blueprintLibraryOptions: () => [],
+    blueprintGraphNodes: () => [],
+    blueprintGraphEdges: () => [],
+    blueprintTraceEntries: () => [],
     blueprintNodeOptions: () => [],
     selectedElements: () => [],
   }
@@ -143,6 +150,9 @@ const viewElementOptions = computed(() =>
     <BlueprintNodeConfigSidebar
       v-else
       :node="selectedBlueprintNode"
+      :graph-nodes="blueprintGraphNodes"
+      :graph-edges="blueprintGraphEdges"
+      :trace-entries="blueprintTraceEntries.length ? blueprintTraceEntries : executionLog?.entries ?? []"
       :allow-false-signal-propagation="allowFalseSignalPropagation"
       :on-update-allow-false-signal-propagation="onUpdateAllowFalseSignalPropagation"
       :view-element-options="viewElementOptions"

package/src/panel/components/config/ConfigFieldGroup.vue

@@ -1,20 +1,49 @@
 <script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from "vue";
 import ConfigHintIcon from "../ConfigHintIcon.vue";
 
-defineProps<{
-  title: string;
-  hint?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    hint?: boolean;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+  }>(),
+  { defaultOpen: true, collapsible: false }
+);
+
+const hasSearch = inject<ComputedRef<boolean>>(
+  "configHasSearch",
+  computed(() => false)
+);
+
+const open = ref(props.defaultOpen);
+const isOpen = computed(() => !props.collapsible || hasSearch.value || open.value);
+
+function toggle() {
+  if (!props.collapsible || hasSearch.value) return;
+  open.value = !open.value;
+}
 </script>
 
 <template>
   <div class="space-y-2.5 rounded-lg border border-gray-200/80 bg-white/80 p-2.5">
-    <div class="flex items-center gap-1">
+    <div class="flex items-center gap-1.5">
+      <button
+        v-if="collapsible"
+        type="button"
+        class="flex h-5 w-5 items-center justify-center rounded text-[11px] hover:bg-gray-100"
+        @click="toggle"
+      >
+        {{ isOpen ? "▾" : "▸" }}
+      </button>
       <div class="text-[11px] font-semibold text-gray-500">{{ title }}</div>
       <ConfigHintIcon v-if="$slots.hint" :label="title">
         <slot name="hint" />
       </ConfigHintIcon>
     </div>
-    <slot />
+    <div v-show="isOpen" class="space-y-2.5">
+      <slot />
+    </div>
   </div>
 </template>

package/src/panel/components/config/PanelConfigAudioSection.vue

@@ -168,7 +168,11 @@ function onPosterFileChange(e: Event) {
         :src="element.audioSrc || element.audioRemoteUrl || ''"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupDisplayStyle')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupDisplayStyle')"
+      collapsible
+      :default-open="false"
+    >
       <label class="flex items-center gap-2">
         <Checkbox
           :checked="element.mediaAutoPauseOnEdit !== false"

package/src/panel/components/config/PanelConfigChartSection.vue

@@ -143,6 +143,100 @@ function onOptionJsonChange(v: string) {
         :disabled="!isEditable"
         @update:value="(v) => updateChart({ color: v || '#3b82f6' })"
       />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup :title="t('panel.config.groupData')">
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.labelsCsv") }}</div>
+        <Input
+          size="small"
+          :value="getChartLabelsDisplayText(element.chart)"
+          :disabled="!isEditable"
+          @update:value="(v: string) => updateChart({ labelsText: v })"
+        />
+      </label>
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.valuesCsv") }}</div>
+        <Input
+          size="small"
+          :value="getChartValuesDisplayText(element.chart)"
+          :disabled="!isEditable"
+          @update:value="(v: string) => updateChart({ valuesText: v })"
+        />
+      </label>
+    </ConfigFieldGroup>
+
+    <ConfigFieldGroup
+      v-if="['bar', 'line', 'area', 'pie'].includes(selectedChartType)"
+      :title="t('panel.config.groupSeries')"
+    >
+      <label v-if="selectedChartType === 'bar'" class="block space-y-1">
+        <div>{{ t("panel.config.barWidthPx") }}</div>
+        <InputNumber
+          size="small"
+          class="w-full"
+          :min="1"
+          :placeholder="t('panel.config.barWidthAuto')"
+          :value="element.chart?.barWidth ?? undefined"
+          :disabled="!isEditable"
+          @update:value="(v) => {
+            if (v == null || v === '') {
+              updateChart({ barWidth: undefined });
+              return;
+            }
+            const n = Number(v);
+            if (!Number.isNaN(n) && n > 0) updateChart({ barWidth: Math.max(1, n) });
+          }"
+        />
+      </label>
+      <label
+        v-if="selectedChartType === 'line' || selectedChartType === 'area'"
+        class="flex items-center gap-2"
+      >
+        <Checkbox
+          :checked="element.chart?.smooth ?? true"
+          :disabled="!isEditable"
+          @update:checked="(v) => updateChart({ smooth: v === true })"
+        />
+        <span>{{ t("panel.config.smooth") }}</span>
+      </label>
+      <div v-if="selectedChartType === 'pie'" class="grid grid-cols-2 gap-2">
+        <label class="block space-y-1">
+          <div>{{ t("panel.config.pieInnerRadiusPct") }}</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="0"
+            :max="99"
+            :value="element.chart?.pieInnerRadius ?? 30"
+            :disabled="!isEditable"
+            @update:value="(v) => {
+              const n = Number(v);
+              if (!Number.isNaN(n)) updateChart({ pieInnerRadius: Math.max(0, Math.min(99, n)) });
+            }"
+          />
+        </label>
+        <label class="block space-y-1">
+          <div>{{ t("panel.config.pieOuterRadiusPct") }}</div>
+          <InputNumber
+            size="small"
+            class="w-full"
+            :min="1"
+            :max="100"
+            :value="element.chart?.pieOuterRadius ?? 65"
+            :disabled="!isEditable"
+            @update:value="(v) => {
+              const n = Number(v);
+              if (!Number.isNaN(n)) updateChart({ pieOuterRadius: Math.max(1, Math.min(100, n)) });
+            }"
+          />
+        </label>
+      </div>
+    </ConfigFieldGroup>
+    <ConfigFieldGroup
+      :title="t('panel.config.groupChartDisplayMore')"
+      collapsible
+      :default-open="false"
+    >
       <label class="flex items-center gap-2">
         <Checkbox
           :checked="element.chart?.colorMode === 'gradient'"
@@ -208,7 +302,11 @@ function onOptionJsonChange(v: string) {
       </label>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup :title="t('panel.config.groupTooltip')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupTooltip')"
+      collapsible
+      :default-open="false"
+    >
       <div class="grid grid-cols-2 gap-2">
         <label class="flex items-center gap-2">
           <Checkbox
@@ -264,30 +362,11 @@ function onOptionJsonChange(v: string) {
       </label>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup :title="t('panel.config.groupData')">
-      <label class="block space-y-1">
-        <div>{{ t("panel.config.labelsCsv") }}</div>
-        <Input
-          size="small"
-          :value="getChartLabelsDisplayText(element.chart)"
-          :disabled="!isEditable"
-          @update:value="(v: string) => updateChart({ labelsText: v })"
-        />
-      </label>
-      <label class="block space-y-1">
-        <div>{{ t("panel.config.valuesCsv") }}</div>
-        <Input
-          size="small"
-          :value="getChartValuesDisplayText(element.chart)"
-          :disabled="!isEditable"
-          @update:value="(v: string) => updateChart({ valuesText: v })"
-        />
-      </label>
-    </ConfigFieldGroup>
-
     <ConfigFieldGroup
       v-if="['bar', 'line', 'area', 'scatter'].includes(selectedChartType)"
       :title="t('panel.config.groupAxes')"
+      collapsible
+      :default-open="false"
     >
       <div class="grid grid-cols-2 gap-2">
         <label class="block">
@@ -407,68 +486,6 @@ function onOptionJsonChange(v: string) {
       </div>
     </ConfigFieldGroup>
 
-    <ConfigFieldGroup
-      v-if="['bar', 'line', 'area', 'pie'].includes(selectedChartType)"
-      :title="t('panel.config.groupSeries')"
-    >
-      <label v-if="selectedChartType === 'bar'" class="block space-y-1">
-        <div>{{ t("panel.config.barWidthPx") }}</div>
-        <InputNumber
-          size="small"
-          class="w-full"
-          :min="1"
-          :value="element.chart?.barWidth ?? 24"
-          :disabled="!isEditable"
-          @update:value="(v) => {
-            const n = Number(v);
-            if (!Number.isNaN(n)) updateChart({ barWidth: Math.max(1, n) });
-          }"
-        />
-      </label>
-      <label
-        v-if="selectedChartType === 'line' || selectedChartType === 'area'"
-        class="flex items-center gap-2"
-      >
-        <Checkbox
-          :checked="element.chart?.smooth ?? true"
-          :disabled="!isEditable"
-          @update:checked="(v) => updateChart({ smooth: v === true })"
-        />
-        <span>{{ t("panel.config.smooth") }}</span>
-      </label>
-      <div v-if="selectedChartType === 'pie'" class="grid grid-cols-2 gap-2">
-        <label class="block space-y-1">
-          <div>{{ t("panel.config.pieInnerRadiusPct") }}</div>
-          <InputNumber
-            size="small"
-            class="w-full"
-            :min="0"
-            :max="99"
-            :value="element.chart?.pieInnerRadius ?? 30"
-            :disabled="!isEditable"
-            @update:value="(v) => {
-              const n = Number(v);
-              if (!Number.isNaN(n)) updateChart({ pieInnerRadius: Math.max(0, Math.min(99, n)) });
-            }"
-          />
-        </label>
-        <label class="block space-y-1">
-          <div>{{ t("panel.config.pieOuterRadiusPct") }}</div>
-          <InputNumber
-            size="small"
-            class="w-full"
-            :min="1"
-            :max="100"
-            :value="element.chart?.pieOuterRadius ?? 65"
-            :disabled="!isEditable"
-            @update:value="(v) => {
-              const n = Number(v);
-              if (!Number.isNaN(n)) updateChart({ pieOuterRadius: Math.max(1, Math.min(100, n)) });
-            }"
-          />
-        </label>
-      </div>
-    </ConfigFieldGroup>
   </ConfigSection>
 
   <ConfigSection

package/src/panel/components/config/PanelConfigGeometrySection.vue

@@ -138,7 +138,11 @@ function clearSketch() {
         @update:value="(v) => patch({ geometryColor: v || '#3b82f6' })"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupCanvasScript')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupCanvasScript')"
+      collapsible
+      :default-open="false"
+    >
       <template #hint>
         {{ t("panel.config.canvasScriptHint") }}
       </template>
@@ -152,7 +156,11 @@ function clearSketch() {
         @update:value="(v: string) => patch({ geometryScript: v || undefined })"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupSketchOverlay')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupSketchOverlay')"
+      collapsible
+      :default-open="false"
+    >
       <div class="flex items-center gap-2">
         <label class="block space-y-1">
           <div class="text-[11px]">{{ t("panel.config.penColor") }}</div>

package/src/panel/components/config/PanelConfigImageSection.vue

@@ -100,7 +100,11 @@ function onFileChange(e: Event) {
         <span v-if="uploadStatus" class="text-[11px] text-gray-500">{{ uploadStatus }}</span>
       </div>
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupDisplayMode')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupDisplayMode')"
+      collapsible
+      :default-open="false"
+    >
       <label class="block space-y-1">
         <div>{{ t("panel.config.objectFitFull") }}</div>
         <Select

package/src/panel/components/config/PanelConfigNodeInfo.vue

@@ -4,6 +4,7 @@ import { Checkbox, Input, InputNumber, Select } from "ant-design-vue";
 import type { PanelElement, PanelLayer } from "../../types";
 import { getPanelMessages } from "../../constants/messages";
 import ConfigSection from "./ConfigSection.vue";
+import ConfigFieldGroup from "./ConfigFieldGroup.vue";
 
 const { t, locale } = useI18n();
 const msgs = () => getPanelMessages(t);
@@ -52,7 +53,7 @@ function patch(patch: Partial<PanelElement>) {
         @update:value="(v: string) => patch({ name: v || undefined })"
       />
     </label>
-    <div class="grid grid-cols-3 gap-2">
+    <div class="grid grid-cols-2 gap-2">
       <label class="block space-y-1">
         <div>X</div>
         <InputNumber
@@ -74,17 +75,7 @@ function patch(patch: Partial<PanelElement>) {
         />
       </label>
     </div>
-    <div class="grid grid-cols-3 gap-2">
-      <label class="block space-y-1">
-        <div>{{ t("panel.config.rotate") }}</div>
-        <InputNumber
-          size="small"
-          class="w-full"
-          :value="element.rotate ?? 0"
-          :disabled="!isEditable"
-          @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ rotate: n }); }"
-        />
-      </label>
+    <div class="grid grid-cols-2 gap-2">
       <label class="block space-y-1">
         <div>{{ t("panel.config.width") }}</div>
         <InputNumber
@@ -108,6 +99,23 @@ function patch(patch: Partial<PanelElement>) {
         />
       </label>
     </div>
+    <ConfigFieldGroup
+      :title="t('panel.config.groupNodeMore')"
+      collapsible
+      :default-open="false"
+    >
+    <div class="grid grid-cols-2 gap-2">
+      <label class="block space-y-1">
+        <div>{{ t("panel.config.rotate") }}</div>
+        <InputNumber
+          size="small"
+          class="w-full"
+          :value="element.rotate ?? 0"
+          :disabled="!isEditable"
+          @update:value="(v) => { const n = Number(v); if (!Number.isNaN(n)) patch({ rotate: n }); }"
+        />
+      </label>
+    </div>
     <div class="space-y-1.5">
       <div class="text-[11px] text-gray-500">{{ t("panel.config.nodeZOrder") }}</div>
       <div class="text-[11px] text-gray-400">{{ t("panel.config.currentZIndex", { value: nodeZOrderLabel ?? "-" }) }}</div>
@@ -148,6 +156,7 @@ function patch(patch: Partial<PanelElement>) {
     </div>
     <div class="truncate text-gray-400">ID: {{ element.id }}</div>
     <div class="text-gray-400">{{ t("panel.config.type") }}: {{ element.materialType ?? element.id }}</div>
+    </ConfigFieldGroup>
     <div class="rounded-lg border border-gray-200/60 bg-white/80 px-2.5 py-2">
       <label class="flex items-center gap-2">
         <Checkbox

package/src/panel/components/config/PanelConfigReferenceSection.vue

@@ -57,7 +57,11 @@ function patch(patch: Partial<PanelElement>) {
         </Select>
       </label>
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupCopyStrategy')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupCopyStrategy')"
+      collapsible
+      :default-open="false"
+    >
       <template #hint>
         {{ t("panel.config.copyStrategyHint") }}
       </template>

package/src/panel/components/config/PanelConfigStyleSections.vue

@@ -76,6 +76,12 @@ function onFileChange(e: Event) {
         :disabled="!isEditable"
         @update:value="(v) => patchStyle({ backgroundColor: v || undefined })"
       />
+    </ConfigFieldGroup>
+    <ConfigFieldGroup
+      :title="t('panel.config.groupBgLayout')"
+      collapsible
+      :default-open="false"
+    >
       <label class="block space-y-1">
         <div>{{ t("panel.scope.fieldStyleBackgroundImage") }}</div>
         <Input
@@ -102,8 +108,6 @@ function onFileChange(e: Event) {
         </label>
         <span v-if="uploadStatus" class="text-[11px] text-gray-500">{{ uploadStatus }}</span>
       </div>
-    </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupBgLayout')">
       <div class="grid grid-cols-2 gap-2">
         <label class="block space-y-1">
           <div>{{ t("panel.scope.fieldStyleBackgroundSize") }}</div>

package/src/panel/components/config/PanelConfigTextSection.vue

@@ -184,7 +184,11 @@ watch(() => [props.element.id, props.element.textHtml], syncEditorHtml);
         @update:value="(v) => patch({ textColor: v || undefined })"
       />
     </ConfigFieldGroup>
-    <ConfigFieldGroup :title="t('panel.config.groupInputAbility')">
+    <ConfigFieldGroup
+      :title="t('panel.config.groupInputAbility')"
+      collapsible
+      :default-open="false"
+    >
       <label class="flex items-center gap-2">
         <Checkbox
           :checked="element.textAllowInput ?? true"

package/src/panel/utils/chartOptionBuilder.ts

@@ -84,6 +84,11 @@ function deepMerge<T extends Record<string, any>>(base: T, patch?: Record<string
   return next as T;
 }
 
+function resolveBarWidth(chart?: PanelChartConfig): number | undefined {
+  const width = chart?.barWidth;
+  return typeof width === "number" && Number.isFinite(width) && width > 0 ? width : undefined;
+}
+
 export function buildChartOption(element: PanelElement): EChartsOption {
   const chartType = (element.materialType ?? "") as ChartType;
   const labels = resolveChartLabels(element);
@@ -315,7 +320,8 @@ export function buildChartOption(element: PanelElement): EChartsOption {
           chartType === "line" || chartType === "area"
             ? (element.chart?.smooth ?? true)
             : undefined,
-        barWidth: chartType === "bar" ? (element.chart?.barWidth ?? 24) : undefined,
+        barWidth:
+          chartType === "bar" ? resolveBarWidth(element.chart) : undefined,
         areaStyle: chartType === "area" ? { opacity: 0.25 } : undefined,
         itemStyle: { color: chartColor as any },
         lineStyle: { color: chartColor as any },

package/src/panel/utils/outputScale.ts

@@ -0,0 +1,56 @@
+/** 产物预览是否缩放内部内容（字体等）。默认 false：块仍按视口撑满，内容保持原尺寸以免失真。 */
+export const OUTPUT_SCALE_STORAGE_KEY = "panel:outputScale";
+
+export function readOutputScale(): boolean {
+  try {
+    return localStorage.getItem(OUTPUT_SCALE_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+export type PreviewFillScale = {
+  vw: number;
+  vh: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export function getPreviewFillScale(
+  sceneWidth: number,
+  sceneHeight: number
+): PreviewFillScale {
+  const vw = window.innerWidth || 1;
+  const vh = window.innerHeight || 1;
+  const sw = Math.max(1, sceneWidth);
+  const sh = Math.max(1, sceneHeight);
+  return {
+    vw,
+    vh,
+    scaleX: vw / sw,
+    scaleY: vh / sh,
+  };
+}
+
+export function applyPreviewSceneFill(
+  scene: HTMLElement | null,
+  sceneWidth: number,
+  sceneHeight: number,
+  outputScale: boolean
+): PreviewFillScale {
+  const fill = getPreviewFillScale(sceneWidth, sceneHeight);
+  if (!Number.isFinite(fill.scaleX) || !Number.isFinite(fill.scaleY)) return fill;
+  if (!scene) return fill;
+  const root = scene.parentElement;
+  if (root) root.style.overflow = "hidden";
+  if (outputScale) {
+    scene.style.width = `${Math.max(1, sceneWidth)}px`;
+    scene.style.height = `${Math.max(1, sceneHeight)}px`;
+    scene.style.transform = `translate(0px,0px) scale(${fill.scaleX},${fill.scaleY})`;
+  } else {
+    scene.style.width = `${fill.vw}px`;
+    scene.style.height = `${fill.vh}px`;
+    scene.style.transform = "none";
+  }
+  return fill;
+}

package/src/panel/utils/panelElementDefaults.ts

@@ -130,7 +130,6 @@ export function getDefaultChartConfig(
     return {
       title: t("panel.defaults.bar"),
       ...common,
-      barWidth: 24,
     };
   }
   if (materialType === "line") {